diff --git a/app/mobile/src/context/useRingContext.hook.js b/app/mobile/src/context/useRingContext.hook.js
index bef665e3..410afd77 100644
--- a/app/mobile/src/context/useRingContext.hook.js
+++ b/app/mobile/src/context/useRingContext.hook.js
@@ -36,6 +36,7 @@ export function useRingContext() {
 
   const EXPIRE = 3000
   const RING = 2000
+  const RING_COUNT = 10
   const ringing = useRef(new Map());
   const calling = useRef(null);
   const ws = useRef(null);
@@ -429,8 +430,15 @@ export function useRingContext() {
       let index = 0;
       const ringInterval = setInterval(async () => {
         try {
-          await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
-          index += 1;
+          if (index > RING_COUNT) {
+            if (ws.current) {
+              ws.current.close();
+            } 
+          }
+          else {
+            await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
+            index += 1;
+          }
         }
         catch (err) {
           console.log(err);
diff --git a/net/web/src/context/useRingContext.hook.js b/net/web/src/context/useRingContext.hook.js
index ae3f4f6c..d9b75dde 100644
--- a/net/web/src/context/useRingContext.hook.js
+++ b/net/web/src/context/useRingContext.hook.js
@@ -22,6 +22,7 @@ export function useRingContext() {
 
   const EXPIRE = 3000
   const RING = 2000
+  const RING_COUNT = 10
   const ringing = useRef(new Map());
   const calling = useRef(null);
   const ws = useRef(null);
@@ -390,8 +391,15 @@ export function useRingContext() {
       let index = 0;
       const ringInterval = setInterval(async () => {
         try {
-          await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
-          index += 1;
+          if (index > RING_COUNT) {
+            if (ws.current) {
+              ws.current.close();
+            }
+          }
+          else {
+            await addContactRing(contactNode, contactToken, { index, callId: id, calleeToken });
+            index += 1;
+          }
         }
         catch (err) {
           console.log(err);
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index c77f2aed..5caacf12 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -23,6 +23,7 @@ export function Session() {
   const [ringing, setRinging] = useState([]);
   const [callWidth, setCallWidth] = useState(256);
   const [callHeight, setCallHeight] = useState(256);
+  const [callModal, setCallModal] = useState({ width: 256, height: 256, offset: 0 });
   const remote = useRef();
   const local = useRef();
 
@@ -44,23 +45,20 @@ export function Session() {
     setRinging(incoming);
   }, [state.ringing]);
 
-  const getWidth = () => {
-    if (state.remoteVideo) {
-      return callWidth;
+  useEffect(() => {
+    if (!state.remoteVideo) {
+      setCallModal({ width: 256 + 12, height: 256 + 12, offset: 0 });
+    }
+    else {
+      setCallModal({ width: callWidth + 12, height: callHeight + 12, offset: ((268 - callHeight) / 2) });
     }
-    return 256;
-  }
 
-  const getHeight = () => {
-    if (state.remoteVideo) {
-      return callHeight;
-    }
-    return 256;
-  }
+  }, [callWidth, callHeight, state.remoteVideo])
 
   useEffect(() => {
     if (remote.current) {
       remote.current.onloadedmetadata = (ev) => {
+
         const { videoWidth, videoHeight } = ev.target || { videoWidth: 256, videoHeight: 256 }
         if ((window.innerWidth * 8) / 10 < videoWidth) {
           const scaledWidth = window.innerWidth * 8 / 10;
@@ -80,16 +78,15 @@ export function Session() {
           setCallHeight(height);
           setCallWidth(videoWidth * (height / videoHeight));
         }
-        else if (videoHeight < 256 || videoWidth < 256) {
-          setCallHeight(256);
-          setCallWidth(256);
+        else if (videoHeight < 72 || videoWidth < 72) {
+          setCallHeight(72);
+          setCallWidth(72);
         }
         else {
           setCallHeight(videoHeight);
           setCallWidth(videoWidth);
         }
       };
-console.log(" SET REMOTE STREAM");
       remote.current.srcObject = state.remoteStream;
       remote.current.load();
       remote.current.play();
@@ -330,7 +327,7 @@ console.log(" SET REMOTE STREAM");
           </div>
         </RingingWrapper>
       </Modal>
-      <Modal centered visible={state.callStatus} footer={null} closable={false} width={getWidth() + 12} height={getHeight() + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 6 }}>
+      <Modal centered visible={state.callStatus} footer={null} closable={false} width={callModal.width} height={callModal.height} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 6 }}>
         <CallingWrapper>
           { !state.remoteVideo && (
             <Logo url={state.callLogo} width={256} height={256} radius={8} />