diff --git a/app/src/server.js b/app/src/server.js
index 3e44c316..e090149e 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.6.19
+ * @version 1.6.20
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 5cac8db6..38b19ac7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.6.19",
+    "version": "1.6.20",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.6.19",
+            "version": "1.6.20",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.0.4",
diff --git a/package.json b/package.json
index 46e6777a..9d9f7bcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.6.19",
+    "version": "1.6.20",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/videoGrid.css b/public/css/videoGrid.css
index b7f1228c..25f535ea 100644
--- a/public/css/videoGrid.css
+++ b/public/css/videoGrid.css
@@ -34,20 +34,7 @@
     /* border: 3px solid lime; */
 }
 
-.Camera {
-    position: relative;
-    vertical-align: middle;
-    align-self: center;
-    border-radius: 10px;
-    overflow: hidden;
-    display: inline-block;
-    background: var(--body-bg);
-    border: var(--elem-border-color);
-    box-shadow: var(--box-shadow);
-    border-radius: 10px;
-    animation: show 0.4s ease;
-}
-
+.Camera,
 .Screen {
     position: relative;
     vertical-align: middle;
@@ -59,6 +46,8 @@
     border: var(--elem-border-color);
     box-shadow: var(--box-shadow);
     border-radius: 10px;
+    container-type: inline-size;
+    container-name: camera;
     animation: show 0.4s ease;
 }
 
@@ -73,26 +62,136 @@
     width: 100%;
     background: var(--navbar-bg);
     text-align: right;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 6px 12px 6px 6px;
+    gap: 4px;
+    row-gap: 4px;
+    box-sizing: border-box;
 }
 
 .navbar button {
-    display: inline;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     padding: 10px;
-    font-size: small;
+    font-size: 1.2rem;
     text-decoration: none;
     border: none;
     border-radius: 10px;
-    background: transparent;
+    background: var(--body-bg);
     color: #fff;
+    margin: 2px;
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+
+.navbar button:hover {
+    background: var(--btns-bg-color);
+    transform: scale(1.05);
+    cursor: pointer;
 }
 
 .navbar div {
     display: inline;
 }
 
-.navbar button:hover {
-    color: var(--hover-color);
-    cursor: pointer;
+/* Extra small containers (mobile portrait, small screens) */
+@container camera (max-width: 250px) {
+    .navbar {
+        padding: 4px 10px 4px 4px;
+        gap: 3px;
+        row-gap: 3px;
+    }
+    .navbar button {
+        font-size: 0.7rem;
+        padding: 6px;
+        min-width: 28px;
+        min-height: 28px;
+        margin: 1px;
+    }
+}
+
+/* Small containers (mobile portrait) */
+@container camera (min-width: 251px) and (max-width: 350px) {
+    .navbar {
+        padding: 5px 10px 5px 5px;
+        gap: 3px;
+        row-gap: 3px;
+    }
+    .navbar button {
+        font-size: 0.8rem;
+        padding: 7px;
+        min-width: 30px;
+        min-height: 30px;
+        margin: 1px;
+    }
+}
+
+/* Medium-small containers (mobile landscape, small tablets) */
+@container camera (min-width: 351px) and (max-width: 500px) {
+    .navbar {
+        padding: 6px 11px 6px 6px;
+        gap: 4px;
+        row-gap: 4px;
+    }
+    .navbar button {
+        font-size: 0.9rem;
+        padding: 8px;
+        min-width: 32px;
+        min-height: 32px;
+        margin: 1.5px;
+    }
+}
+
+/* Medium containers (tablets portrait) */
+@container camera (min-width: 501px) and (max-width: 700px) {
+    .navbar {
+        padding: 6px 12px 6px 6px;
+        gap: 4px;
+        row-gap: 4px;
+    }
+    .navbar button {
+        font-size: 1rem;
+        padding: 9px;
+        min-width: 34px;
+        min-height: 34px;
+        margin: 2px;
+    }
+}
+
+/* Large containers (tablets landscape, desktop) */
+@container camera (min-width: 701px) and (max-width: 900px) {
+    .navbar {
+        padding: 7px 13px 7px 7px;
+        gap: 5px;
+        row-gap: 5px;
+    }
+    .navbar button {
+        font-size: 1.05rem;
+        padding: 9.5px;
+        min-width: 36px;
+        min-height: 36px;
+        margin: 2px;
+    }
+}
+
+/* Extra large containers (large desktop) */
+@container camera (min-width: 901px) {
+    .navbar {
+        padding: 8px 14px 8px 8px;
+        gap: 6px;
+        row-gap: 6px;
+    }
+    .navbar button {
+        font-size: 1.1rem;
+        padding: 10px;
+        min-width: 38px;
+        min-height: 38px;
+        margin: 2px;
+    }
 }
 
 /*--------------------------------------------------------------
diff --git a/public/js/brand.js b/public/js/brand.js
index 0da2b32b..845ad7ea 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -75,7 +75,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.6.19',
+        title: 'WebRTC P2P v1.6.20',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index 1b73d020..b8f5d0cf 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.6.19
+ * @version 1.6.20
  *
  */
 
@@ -311,6 +311,7 @@ const captionFooter = getId('captionFooter');
 // My settings
 const mySettings = getId('mySettings');
 const mySettingsHeader = getId('mySettingsHeader');
+const mySessionTime = getId('mySessionTime'); // conference session time
 const tabVideoBtn = getId('tabVideoBtn');
 const tabAudioBtn = getId('tabAudioBtn');
 const tabVideoShareBtn = getId('tabVideoShareBtn');
@@ -515,7 +516,6 @@ let thisMaxRoomParticipants = 8;
 // misc
 let swBg = 'rgba(0, 0, 0, 0.7)'; // swAlert background color
 let callElapsedTime; // count time
-let mySessionTime; // conference session time
 let isDocumentOnFullScreen = false;
 let isToggleExtraBtnClicked = false;
 
@@ -708,7 +708,6 @@ function loadGeo() {
  * Load all Html elements by Id
  */
 function getHtmlElementsById() {
-    mySessionTime = getId('mySessionTime');
     // My video elements
     myVideo = getId('myVideo');
     myScreen = getId('myScreen');
@@ -773,6 +772,7 @@ function setButtonsToolTip() {
     setTippy(mySettingsCloseBtn, 'Close', 'bottom');
     setTippy(myPeerNameSetBtn, 'Change name', 'top');
     setTippy(myRoomId, 'Room name (click to copy/share)', 'right');
+    setTippy(mySessionTime, 'Session time', 'right');
     setTippy(
         switchNoiseSuppression,
         'If Active, the audio will be processed to reduce background noise, making the voice clearer',
@@ -3390,7 +3390,6 @@ async function loadLocalMedia(stream, kind) {
 
             // html elements
             const myVideoNavBar = document.createElement('div');
-            const mySessionTime = document.createElement('button');
             const myVideoPeerName = document.createElement('p');
             const myHandStatusIcon = document.createElement('button');
             const myVideoToImgBtn = document.createElement('button');
@@ -3408,11 +3407,6 @@ async function loadLocalMedia(stream, kind) {
             const myPitchMeter = document.createElement('div');
             const myPitchBar = document.createElement('div');
 
-            // session time
-            mySessionTime.setAttribute('id', 'mySessionTime');
-            mySessionTime.className = 'notranslate';
-            mySessionTime.style.cursor = 'default';
-
             // my peer name
             myVideoPeerName.setAttribute('id', 'myVideoPeerName');
             myVideoPeerName.className = 'videoPeerName notranslate';
@@ -3468,7 +3462,6 @@ async function loadLocalMedia(stream, kind) {
 
             // no mobile devices
             if (!isMobileDevice) {
-                setTippy(mySessionTime, 'Session Time', 'bottom');
                 setTippy(myHandStatusIcon, 'My hand is raised', 'bottom');
                 setTippy(myPrivacyBtn, 'Toggle video privacy', 'bottom');
                 setTippy(myVideoStatusIcon, 'My video is on', 'bottom');
@@ -3497,9 +3490,6 @@ async function loadLocalMedia(stream, kind) {
             // my video nav bar
             myVideoNavBar.className = 'navbar fadein';
 
-            // attach to video nav bar
-            myVideoNavBar.appendChild(mySessionTime);
-
             !isMobileDevice && myVideoNavBar.appendChild(myVideoPinBtn);
 
             buttons.local.showVideoFocusBtn && myVideoNavBar.appendChild(myVideoFocusBtn);
@@ -12310,7 +12300,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.19',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.20',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/views/client.html b/public/views/client.html
index f389f159..51d33bf2 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -431,6 +431,17 @@ access to use this app.
                                 <td><input id="switchKeepButtonsVisible" class="toggle" type="checkbox" /></td>
                             </tr>
                         </table>
+                        <br />
+                        <table id="mySettingsTable">
+                            <tr>
+                                <td>
+                                    <div class="title">
+                                        <i class="fas fa-clock"></i>
+                                    </div>
+                                    <span id="mySessionTime">0s</span>
+                                </td>
+                            </tr>
+                        </table>
                     </div>
 
                     <div id="tabVideo" class="tabcontent">