diff --git a/.env.template b/.env.template
index 1f2d22d0..34bbb9ee 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.7.62 - Environment Configuration
+# MiroTalk P2P v.1.7.63 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 66afde78..5855339d 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.7.62 - Configuration File
+ * MiroTalk P2P v.1.7.63 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index e1220c35..40aef7d9 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.7.62
+ * @version 1.7.63
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 28d7fa73..e6152d9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
     "name": "mirotalk",
-    "version": "1.7.62",
+    "version": "1.7.63",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.7.62",
+            "version": "1.7.63",
             "license": "AGPL-3.0",
             "dependencies": {
-                "@mattermost/client": "11.4.0",
+                "@mattermost/client": "11.5.0",
                 "@ngrok/ngrok": "1.7.0",
                 "@sentry/node": "^10.46.0",
                 "axios": "^1.13.6",
@@ -21,7 +21,7 @@
                 "dompurify": "^3.3.3",
                 "dotenv": "^17.3.1",
                 "express": "^5.2.1",
-                "express-openid-connect": "^2.19.4",
+                "express-openid-connect": "^2.20.1",
                 "express-rate-limit": "^8.3.1",
                 "he": "^1.2.0",
                 "helmet": "^8.1.0",
@@ -401,12 +401,12 @@
             }
         },
         "node_modules/@mattermost/client": {
-            "version": "11.4.0",
-            "resolved": "https://registry.npmjs.org/@mattermost/client/-/client-11.4.0.tgz",
-            "integrity": "sha512-QzYIpxFRPA+NDCCxk9bPwnFRpgZq8d1KKYXic8AJJiPXjja6IJDOkpDfGgo4b1q0AofUQ+u7Js3Fh2mxerwz5g==",
+            "version": "11.5.0",
+            "resolved": "https://registry.npmjs.org/@mattermost/client/-/client-11.5.0.tgz",
+            "integrity": "sha512-/e1/TVisfiAwiBH9Um9Ur5fShemS09GKuNO9Nurxpvsrgo/anybqi/R7AT7ppUZ9j4K2b+acBj/gDuUGN6Gpmw==",
             "license": "MIT",
             "peerDependencies": {
-                "@mattermost/types": "11.4.0",
+                "@mattermost/types": "11.5.0",
                 "typescript": "^4.3.0 || ^5.0.0"
             },
             "peerDependenciesMeta": {
@@ -416,9 +416,9 @@
             }
         },
         "node_modules/@mattermost/types": {
-            "version": "11.4.0",
-            "resolved": "https://registry.npmjs.org/@mattermost/types/-/types-11.4.0.tgz",
-            "integrity": "sha512-oYt7vvsa60hPpujcCBYeyd+22OwprEAtFXgVJrsdd9pR1qkEGU4F+uv8bh6ZTBSZAQnc2/xXQPZJGGR06toteA==",
+            "version": "11.5.0",
+            "resolved": "https://registry.npmjs.org/@mattermost/types/-/types-11.5.0.tgz",
+            "integrity": "sha512-8vAzjjIJV/NIyKMB5tVRDQF9Uc58t6jCvZ7kOPR+JYHuW/8CPKBJkWmx2hqvgQ8h0b+otPLUqksGKp3LevGF7A==",
             "license": "MIT",
             "peer": true,
             "peerDependencies": {
@@ -2939,9 +2939,9 @@
             }
         },
         "node_modules/express-openid-connect": {
-            "version": "2.19.4",
-            "resolved": "https://registry.npmjs.org/express-openid-connect/-/express-openid-connect-2.19.4.tgz",
-            "integrity": "sha512-3YFPZ4MgUPhwfHbCaJKEij7uTc0vF4KpGKsuc3D1IhNMooiP6w8p1HBaaDQOE2KaAas22UghxVECxPpcC/gfOA==",
+            "version": "2.20.1",
+            "resolved": "https://registry.npmjs.org/express-openid-connect/-/express-openid-connect-2.20.1.tgz",
+            "integrity": "sha512-Ka4qyKJgoC2fLJszQLpnoGFfmEPGCnq/uJgfhZxI+a8+3pvK8i+AKXIyavd29Z7V4lsK5JBs0Sjx/QSusMYNEw==",
             "license": "MIT",
             "dependencies": {
                 "base64url": "^3.0.1",
diff --git a/package.json b/package.json
index a0967d71..ddb95401 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.7.62",
+    "version": "1.7.63",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
@@ -44,7 +44,7 @@
     "license": "AGPL-3.0",
     "homepage": "https://github.com/miroslavpejic85/mirotalk",
     "dependencies": {
-        "@mattermost/client": "11.4.0",
+        "@mattermost/client": "11.5.0",
         "@ngrok/ngrok": "1.7.0",
         "@sentry/node": "^10.46.0",
         "axios": "^1.13.6",
@@ -56,7 +56,7 @@
         "dompurify": "^3.3.3",
         "dotenv": "^17.3.1",
         "express": "^5.2.1",
-        "express-openid-connect": "^2.19.4",
+        "express-openid-connect": "^2.20.1",
         "express-rate-limit": "^8.3.1",
         "he": "^1.2.0",
         "helmet": "^8.1.0",
diff --git a/public/css/client.css b/public/css/client.css
index 5455b0aa..8543e20b 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -353,11 +353,31 @@ body {
 }
 
 #bottomButtons #settingsExtraMenu {
-    min-width: 200px;
+    min-width: 220px;
     max-width: calc(100vw - 24px);
     text-align: left;
 }
 
+#bottomButtons #settingsExtraMenu .device-menu-header.extra-menu-group {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: rgba(255, 255, 255, 0.4);
+    padding: 10px 16px 4px;
+    pointer-events: none;
+    user-select: none;
+}
+
+#bottomButtons #settingsExtraMenu button:hover {
+    transform: translateX(3px) !important;
+}
+
+#bottomButtons #settingsExtraMenu .extra-menu-divider.extra-menu-divider {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.08);
+    margin: 6px 12px;
+}
+
 /* Mobile: keep settingsExtraMenu inside viewport and scrollable */
 @media (max-width: 600px) {
     #bottomButtons #audioMenu,
diff --git a/public/js/brand.js b/public/js/brand.js
index 714336c5..c5455bdc 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -107,7 +107,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.7.62',
+        title: 'WebRTC P2P v1.7.63',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index b7835e85..b96fca0d 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.7.62
+ * @version 1.7.63
  *
  */
 
@@ -6729,6 +6729,7 @@ function setMySettingsExtraBtns() {
         let hideTimeout;
         function showMenu() {
             clearTimeout(hideTimeout);
+            updateSettingsExtraGroups();
             settingsExtraMenu.classList.remove('hidden');
             settingsExtraMenu.classList.add('show');
         }
@@ -6774,6 +6775,30 @@ function setMySettingsExtraBtns() {
     }
 }
 
+function updateSettingsExtraGroups() {
+    settingsExtraMenu.querySelectorAll('.extra-menu-group').forEach((header) => {
+        const ids = (header.dataset.buttons || '').split(',');
+        const anyVisible = ids.some((id) => {
+            const btn = document.getElementById(id.trim());
+            return btn && !btn.classList.contains('hidden') && btn.style.display !== 'none';
+        });
+        header.style.display = anyVisible ? '' : 'none';
+    });
+    settingsExtraMenu.querySelectorAll('.extra-menu-divider').forEach((div) => {
+        let prev = div.previousElementSibling;
+        while (prev && !prev.classList.contains('extra-menu-group')) {
+            prev = prev.previousElementSibling;
+        }
+        let next = div.nextElementSibling;
+        while (next && !next.classList.contains('extra-menu-group')) {
+            next = next.nextElementSibling;
+        }
+        const prevVisible = prev && prev.style.display !== 'none';
+        const nextVisible = next && next.style.display !== 'none';
+        div.style.display = prevVisible && nextVisible ? '' : 'none';
+    });
+}
+
 /**
  * About button click event
  */
@@ -13738,7 +13763,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.62',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.63',
         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 2bd5ac16..b862bc2e 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -192,17 +192,47 @@ access to use this app.
                         class="dropdown-menu text-start hidden"
                         aria-labelledby="settingsExtraToggle"
                     >
-                        <!-- https://fontawesome.com/icons?d=gallery -->
+                        <!-- SHARING -->
+                        <div class="device-menu-header extra-menu-group" data-buttons="shareRoomBtn,fileShareBtn">
+                            SHARING
+                        </div>
                         <button id="shareRoomBtn"><i class="fas fa-share-alt"></i> Share Room</button>
-                        <button id="hideMeBtn"><i class="fas fa-user"></i> Hide Me</button>
-                        <button id="recordStreamBtn"><i class="fas fa-record-vinyl"></i> Recording</button>
-                        <button id="fullScreenBtn"><i class="fas fa-expand-alt"></i> Full screen</button>
-                        <button id="roomEmojiPickerBtn"><i class="fas fa-face-smile"></i> Room Emoji</button>
-                        <button id="captionBtn"><i class="fas fa-closed-captioning"></i> Caption</button>
-                        <button id="whiteboardBtn"><i class="fas fa-chalkboard-teacher"></i> Whiteboard</button>
+                        <button id="fileShareBtn"><i class="fas fa-folder-open"></i> File sharing</button>
+
+                        <div class="device-menu-divider extra-menu-divider" data-group="sharing"></div>
+
+                        <!-- RECORDING & CAPTURE -->
+                        <div class="device-menu-header extra-menu-group" data-buttons="recordStreamBtn,snapshotRoomBtn">
+                            RECORDING & CAPTURE
+                        </div>
+                        <button id="recordStreamBtn"><i class="fas fa-record-vinyl"></i> Start Recording</button>
                         <button id="snapshotRoomBtn"><i class="fas fa-camera-retro"></i> Snapshot</button>
-                        <button id="fileShareBtn"><i class="fas fa-folder-open"></i> File Share</button>
+
+                        <div class="device-menu-divider extra-menu-divider" data-group="recording"></div>
+
+                        <!-- TOOLS -->
+                        <div
+                            class="device-menu-header extra-menu-group"
+                            data-buttons="captionBtn,whiteboardBtn,documentPiPBtn,roomEmojiPickerBtn"
+                        >
+                            TOOLS
+                        </div>
+                        <button id="captionBtn"><i class="fas fa-closed-captioning"></i> Transcription</button>
+                        <button id="whiteboardBtn"><i class="fas fa-chalkboard-teacher"></i> Whiteboard</button>
                         <button id="documentPiPBtn"><i class="fas fa-images"></i> Document PiP</button>
+                        <button id="roomEmojiPickerBtn"><i class="fas fa-face-smile"></i> Room Emoji</button>
+
+                        <div class="device-menu-divider extra-menu-divider" data-group="tools"></div>
+
+                        <!-- VIEW & SETTINGS -->
+                        <div
+                            class="device-menu-header extra-menu-group"
+                            data-buttons="hideMeBtn,fullScreenBtn,aboutBtn"
+                        >
+                            VIEW & SETTINGS
+                        </div>
+                        <button id="hideMeBtn"><i class="fas fa-user"></i> Hide Me</button>
+                        <button id="fullScreenBtn"><i class="fas fa-expand-alt"></i> Full Screen</button>
                         <button id="aboutBtn"><i class="fas fa-question"></i> About</button>
                     </div>
                 </div>