diff --git a/main/frontend/src/assets/style/components/app.scss b/main/frontend/src/assets/style/components/app.scss
index db37976..4ff66e6 100644
--- a/main/frontend/src/assets/style/components/app.scss
+++ b/main/frontend/src/assets/style/components/app.scss
@@ -228,6 +228,8 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+    background: linear-gradient(45deg, #4d708f54, #4d708f00);
+    border-radius: 10px;
     .chat-middle {
         background: linear-gradient(45deg, #4d708f54, #4d708f00);
         padding: 10px;
diff --git a/main/frontend/src/assets/style/components/call.scss b/main/frontend/src/assets/style/components/call.scss
index fd316c5..cb610a1 100644
--- a/main/frontend/src/assets/style/components/call.scss
+++ b/main/frontend/src/assets/style/components/call.scss
@@ -49,6 +49,7 @@
     height: 90%;
     align-self: center;
     margin: 10px;
+    margin-bottom: 5%;
     display: flex;
     justify-content: center;
     align-items: flex-start;
@@ -56,7 +57,7 @@
         display: flex;
         justify-content: center;
         flex-direction: column;
-        top: 0px;
+        top: 5%;
         margin-top: 50px;
         img {
             height: 200px;
@@ -65,6 +66,12 @@
             padding: 5px;
             box-shadow: 0px 0px 10px;
             margin: 10px;
+            animation-name: fff;
+            animation-iteration-count: infinite;
+            animation-duration: 6s;
+            &.terminate-animation {
+                animation-duration: 0;
+            }
         }
         .caller-name {
             font-family: poppins;
@@ -281,7 +288,7 @@
             display: flex;
             justify-content: center;
             font-size: 2rem;
-            margin-top: 30px;
+            margin-top: 20px;
             color: #7c7c7c;
         }
     }
@@ -463,14 +470,20 @@
     }
 }
 
-@keyframes callfunction {
+@keyframes fff {
     0% {
-        transform: translateX(10%);
+        transform: scale(1.075);
     }
     25% {
-        transform: translateX(20%);
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.075);
+    }
+    75% {
+        transform: scale(1);
     }
     100% {
-        transform: translateX(30%);
+        transform: scale(1.075);
     }
 }
\ No newline at end of file
diff --git a/main/frontend/src/views/Call.js b/main/frontend/src/views/Call.js
index 2f4af2e..2d2d48b 100644
--- a/main/frontend/src/views/Call.js
+++ b/main/frontend/src/views/Call.js
@@ -30,7 +30,6 @@ const defaultProps = {};
 function Calls(props) {
 const [typeView, setView] = useState('people');
 const [callView, setCallView] = useState('incoming')
-const [callstatus, setCallstatus] = useState('null')
 function shuffleView(){
 if(typeView === 'people'){
 setView('recents')
@@ -39,12 +38,13 @@ setView('people')
 }
 }
 
+var img = document.getElementsByClassName("caller-img");
 function acceptCall() {
-setCallstatus('accepted')
-  // setCallView('accepted')
+setCallView('accepted')
 }
 function declineCall() {
   setCallView('missed')
+  img.classList.add("terminate-animation")
 }
 return (
 <>
@@ -161,17 +161,16 @@ return (
       </div>
     </div>
     <div class="call-options">
-    {/* onClick={acceptCall} */}
-      <div class={callstatus=='null'?"answer-icon-bg":"answer-icon-bg callactive"} onClick={acceptCall}  >
+    <div class="decline-icon-bg" onClick={declineCall}>
+        <i class="bx bxs-phone-off" id="decline-icon"></i>
+        <p class="label">Decline</p>
+      </div>
+
+      <div class="answer-icon-bg" onClick={acceptCall}>
         <i class="bx bxs-phone" id="answer-icon"></i>
         <p class="label">Accept</p>
       </div>
-      {callstatus == 'null' &&
-      
-      <div class="decline-icon-bg" onClick={declineCall}>
-        <i class="bx bxs-phone-off" id="decline-icon"></i>
-        <p class="label">Decline</p>
-      </div>}
+
     </div>
     <p class="call-status">Incoming Call</p> 
     </>}