diff --git a/public/css/Room.css b/public/css/Room.css
index cace22a2..38d0506f 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -245,7 +245,7 @@ body {
     position: absolute;
     margin: auto;
     padding: 10px;
-    width: 365px;
+    width: 50%;
     min-height: 480px;
     background: var(--settings-bg);
     box-shadow: var(--box-shadow);
@@ -254,7 +254,34 @@ body {
     overflow: hidden;
 }
 
+.mySettingsMain {
+    display: flex;
+}
+
+@media screen and (max-width: 1030px) {
+    #mySettings {
+        width: 75%;
+    }
+}
+
+@media screen and (max-width: 830px) {
+    #mySettings {
+        width: 80%;
+        min-height: auto;
+    }
+    .mySettingsMain {
+        flex-direction: column;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    #mySettings {
+        width: 90%;
+    }
+}
+
 #mySettingsHeader {
+    height: 25px;
     cursor: move;
 }
 
@@ -282,8 +309,9 @@ body {
 
 #mySettingsCloseBtn {
     /* top right bottom left */
-    margin: 10px 0px 0px 10px;
+    /* margin: 10px 0px 0px 10px; */
     font-size: 1.4rem;
+    float: right;
 }
 
 #mySettings button {
@@ -325,10 +353,41 @@ th {
 /*--------------------------------------------------------------
 # Style the tab
 --------------------------------------------------------------*/
+
 .tab {
     padding: 10px;
     overflow: hidden;
     border-radius: 5px;
+    width: 35%;
+    background-color: var(--body-bg);
+    min-height: 480px;
+    display: flex;
+    flex-direction: column;
+    border-right: var(--border);
+}
+
+.tabActions {
+    position: relative;
+    width: 65%;
+    background-color: var(--body-bg);
+    min-height: 480px;
+}
+
+@media screen and (max-width: 830px) {
+    .tab {
+        width: 100%;
+        min-height: auto;
+        flex-direction: row;
+        border-right: none;
+    }
+    .tabActions {
+        width: 100%;
+        min-height: 100px;
+        border-radius: 10px;
+    }
+    .tabButtonText {
+        display: none !important;
+    }
 }
 
 /* Style the buttons inside the tab */
@@ -336,6 +395,7 @@ th {
     margin: 3px;
     padding: 11px;
     float: left;
+    text-align: left;
     color: #fff;
     border: var(--border);
     background-color: rgba(0, 0, 0, 0.2);
@@ -347,7 +407,7 @@ th {
 /* Change background color of buttons on hover */
 .tab button:hover {
     background-color: transparent;
-    color: grey;
+    transform: scale(0.95);
 }
 
 /* Create an active/current tablink class */
diff --git a/public/views/Room.html b/public/views/Room.html
index 9edd659d..824d9c8c 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -144,225 +144,245 @@ access to use this app.
             <header id="mySettingsHeader">
                 <button id="mySettingsCloseBtn" class="fas fa-times"></button>
             </header>
-            <main>
-                <br />
-
+            <main class="mySettingsMain">
                 <div class="tab">
-                    <button id="tabDevicesBtn" class="fas fa-cog tablinks"></button>
-                    <button id="tabRoomBtn" class="fas fa-home tablinks"></button>
-                    <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"></button>
-                    <button id="tabVideoShareBtn" class="fab fa-youtube tablinks"></button>
-                    <button id="tabAspectBtn" class="fas fa-screwdriver-wrench tablinks"></button>
-                    <button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
-                    <button id="tabLanguagesBtn" class="fas fa-globe tablinks"></button>
+                    <button id="tabDevicesBtn" class="fas fa-cog tablinks">
+                        <p class="tabButtonText">Device</p>
+                    </button>
+                    <button id="tabRoomBtn" class="fas fa-home tablinks">
+                        <p class="tabButtonText">Room</p>
+                    </button>
+                    <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks">
+                        <p class="tabButtonText">Recording</p>
+                    </button>
+                    <button id="tabVideoShareBtn" class="fab fa-youtube tablinks">
+                        <p class="tabButtonText">Media</p>
+                    </button>
+                    <button id="tabAspectBtn" class="fas fa-screwdriver-wrench tablinks">
+                        <p class="tabButtonText">Aspect</p>
+                    </button>
+                    <button id="tabStylingBtn" class="fas fa-palette tablinks">
+                        <p class="tabButtonText">Style</p>
+                    </button>
+                    <button id="tabLanguagesBtn" class="fas fa-globe tablinks">
+                        <p class="tabButtonText">Language</p>
+                    </button>
                 </div>
 
-                <div id="tabDevices" class="tabcontent">
-                    <br />
-                    <i class="fas fa-video"></i>
-                    <p>Video Source:</p>
-                    <select id="videoSelect" class="form-select text-light bg-dark"></select>
-                    <br />
-                    <i class="fas fa-palette"></i>
-                    <p>Video Quality:</p>
-                    <select id="videoQuality" class="form-select text-light bg-dark">
-                        <option value="default">🎥&nbsp;Default</option>
-                        <option value="qvga">🎥&nbsp;QVGA</option>
-                        <option value="vga">🎥&nbsp;VGA</option>
-                        <option value="hd">🎥&nbsp;HD</option>
-                        <option value="fhd">🎥&nbsp;FULL HD</option>
-                        <option value="2k">🎥&nbsp;2k</option>
-                        <option value="4k">🎥&nbsp;4K</option>
-                    </select>
-                    <br />
-                    <i class="fas fa-microphone"></i>
-                    <p>Microphone:</p>
-                    <select id="microphoneSelect" class="form-select text-light bg-dark"></select>
-                    <br />
-                    <div id="speakerSelectDiv">
-                        <i class="fas fa-headphones"></i>
-                        <p>Speaker:</p>
-                        <select id="speakerSelect" class="form-select text-light bg-dark"></select>
+                <div class="tabActions">
+                    <div id="tabDevices" class="tabcontent">
                         <br />
+                        <i class="fas fa-video"></i>
+                        <p>Video Source:</p>
+                        <select id="videoSelect" class="form-select text-light bg-dark"></select>
+                        <br />
+                        <i class="fas fa-palette"></i>
+                        <p>Video Quality:</p>
+                        <select id="videoQuality" class="form-select text-light bg-dark">
+                            <option value="default">🎥&nbsp;Default</option>
+                            <option value="qvga">🎥&nbsp;QVGA</option>
+                            <option value="vga">🎥&nbsp;VGA</option>
+                            <option value="hd">🎥&nbsp;HD</option>
+                            <option value="fhd">🎥&nbsp;FULL HD</option>
+                            <option value="2k">🎥&nbsp;2k</option>
+                            <option value="4k">🎥&nbsp;4K</option>
+                        </select>
+                        <br />
+                        <i class="fas fa-microphone"></i>
+                        <p>Microphone:</p>
+                        <select id="microphoneSelect" class="form-select text-light bg-dark"></select>
+                        <br />
+                        <div id="speakerSelectDiv">
+                            <i class="fas fa-headphones"></i>
+                            <p>Speaker:</p>
+                            <select id="speakerSelect" class="form-select text-light bg-dark"></select>
+                            <br />
+                        </div>
                     </div>
-                </div>
 
-                <div id="tabRoom" class="tabcontent">
-                    <button id="fullScreenButton" class="hidden">
-                        <i class="fas fa-expand-alt"></i>
-                        <p>Full screen mode</p>
-                    </button>
-                    <br />
-                    <button id="raiseHandButton" class="hidden">
-                        <i class="fas fa-hand-paper"></i>
-                        <p>Raise hand</p>
-                    </button>
-                    <button id="lowerHandButton" class="hidden">
-                        <i class="fas fa-hand-paper"></i>
-                        <p>Lower hand</p>
-                    </button>
-                    <br />
-                    <button id="fileShareButton" class="hidden">
-                        <i class="fas fa-folder-open"></i>
-                        <p>File sharing</p>
-                    </button>
-                    <br />
-                    <button id="lockRoomButton" class="hidden">
-                        <i class="fas fa-lock-open"></i>
-                        <p>Lock room</p>
-                    </button>
-                    <button id="unlockRoomButton" class="hidden">
-                        <i class="fas fa-lock"></i>
-                        <p>Unlock room</p>
-                    </button>
-                    <hr style="border: 1px solid grey" />
-                    <table class="settingsTable">
-                        <tr id="lobbyButton" class="hidden">
-                            <td>
-                                <label for="switchLobby"><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;Lobby</label>
-                            </td>
-                            <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
-                                <input id="switchLobby" class="form-check-input" type="checkbox" />
-                            </td>
-                        </tr>
-                        <tr id="pitchBarButton">
-                            <td>
-                                <label for="switchPitchBar"
-                                    ><i class="fas fa-microphone-lines"></i>&nbsp;&nbsp;Pitch bar</label
-                                >
-                            </td>
-                            <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
-                                <input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
-                            </td>
-                        </tr>
-                        <tr id="soundsButton">
-                            <td>
-                                <label for="switchSounds"><i class="fas fa-music"></i>&nbsp;&nbsp;Sounds</label>
-                            </td>
-                            <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
-                                <input id="switchSounds" class="form-check-input" type="checkbox" checked />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <label for="sessionTime"><i class="fas fa-clock"></i>&nbsp;&nbsp;Session time</label>
-                            </td>
-                            <td><label id="sessionTime">00:00:00</label></td>
-                        </tr>
-                    </table>
-                </div>
-
-                <div id="tabRecording" class="tabcontent">
-                    <button id="startRecButton" class="hidden">
-                        <i class="fas fa-record-vinyl"></i>
-                        <p>Start recording</p>
-                    </button>
-                    <button id="stopRecButton" class="hidden">
-                        <i class="fas fa-stop-circle"></i>
-                        <p>Stop recording</p>
-                    </button>
-                    <br />
-                    <button id="pauseRecButton" class="hidden">
-                        <i class="far fa-pause-circle"></i>
-                        <p>Pause recording</p>
-                    </button>
-                    <button id="resumeRecButton" class="hidden">
-                        <i class="far fa-play-circle"></i>
-                        <p>Resume recording</p>
-                    </button>
-                    <div id="recordingTime" class="hidden">
+                    <div id="tabRoom" class="tabcontent">
+                        <button id="fullScreenButton" class="hidden">
+                            <i class="fas fa-expand-alt"></i>
+                            <p>Full screen mode</p>
+                        </button>
+                        <br />
+                        <button id="raiseHandButton" class="hidden">
+                            <i class="fas fa-hand-paper"></i>
+                            <p>Raise hand</p>
+                        </button>
+                        <button id="lowerHandButton" class="hidden">
+                            <i class="fas fa-hand-paper"></i>
+                            <p>Lower hand</p>
+                        </button>
+                        <br />
+                        <button id="fileShareButton" class="hidden">
+                            <i class="fas fa-folder-open"></i>
+                            <p>File sharing</p>
+                        </button>
+                        <br />
+                        <button id="lockRoomButton" class="hidden">
+                            <i class="fas fa-lock-open"></i>
+                            <p>Lock room</p>
+                        </button>
+                        <button id="unlockRoomButton" class="hidden">
+                            <i class="fas fa-lock"></i>
+                            <p>Unlock room</p>
+                        </button>
                         <hr style="border: 1px solid grey" />
                         <table class="settingsTable">
+                            <tr id="lobbyButton" class="hidden">
+                                <td>
+                                    <label for="switchLobby"
+                                        ><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;Lobby</label
+                                    >
+                                </td>
+                                <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
+                                    <input id="switchLobby" class="form-check-input" type="checkbox" />
+                                </td>
+                            </tr>
+                            <tr id="pitchBarButton">
+                                <td>
+                                    <label for="switchPitchBar"
+                                        ><i class="fas fa-microphone-lines"></i>&nbsp;&nbsp;Pitch bar</label
+                                    >
+                                </td>
+                                <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
+                                    <input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
+                                </td>
+                            </tr>
+                            <tr id="soundsButton">
+                                <td>
+                                    <label for="switchSounds"><i class="fas fa-music"></i>&nbsp;&nbsp;Sounds</label>
+                                </td>
+                                <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
+                                    <input id="switchSounds" class="form-check-input" type="checkbox" checked />
+                                </td>
+                            </tr>
                             <tr>
                                 <td>
-                                    <i style="color: red" class="fa-solid fa-circle pulsate"></i>&nbsp;&nbsp;REC time:
+                                    <label for="sessionTime"
+                                        ><i class="fas fa-clock"></i>&nbsp;&nbsp;Session time</label
+                                    >
                                 </td>
-                                <td id="recordingStatus">0s</td>
+                                <td><label id="sessionTime">00:00:00</label></td>
                             </tr>
                         </table>
                     </div>
-                </div>
 
-                <div id="tabVideoShare" class="tabcontent">
-                    <button id="videoShareButton">
-                        <i class="fab fa-youtube"></i>
-                        <p>Share a Video or Audio</p>
-                    </button>
-                    <br />
-                    <button id="videoCloseBtn" class="hidden">
-                        <i class="fas fa-times"></i>
-                        <p>Close Video or Audio</p>
-                    </button>
-                    <br />
-                </div>
-
-                <div id="tabAspect" class="tabcontent">
-                    <br />
-                    <p>Aspect ratio:</p>
-                    <br />
-                    <select id="BtnAspectRatio" class="form-select text-light bg-dark">
-                        <option value="0">default</option>
-                        <option value="1">4:3</option>
-                        <option value="2">16:9</option>
-                        <option value="3">1:1</option>
-                        <option value="4">1:2</option>
-                    </select>
-                    <br />
-                    <p>Video Object fit:</p>
-                    <br />
-                    <select id="BtnVideoObjectFit" class="form-select text-light bg-dark">
-                        <option value="fill">fill</option>
-                        <option value="contain">contain</option>
-                        <option value="cover">cover</option>
-                        <option value="scale-down">scale-down</option>
-                        <option value="none">none</option>
-                    </select>
-                    <br />
-                    <p>Video Controls:</p>
-                    <br />
-                    <select id="BtnVideoControls" class="form-select text-light bg-dark">
-                        <option value="off">off</option>
-                        <option value="on">on</option>
-                    </select>
-                    <br />
-                </div>
-
-                <div id="tabStyling" class="tabcontent">
-                    <br />
-                    <p>Theme:</p>
-                    <br />
-                    <select id="selectTheme" class="form-select text-light bg-dark">
-                        <option value="dark">⚫ &nbsp;Dark</option>
-                        <option value="grey">⚪ &nbsp;Grey</option>
-                        <option value="green">🟢 &nbsp;Green</option>
-                        <option value="blue">🔵 &nbsp;Blue</option>
-                        <option value="red">🔴 &nbsp;Red</option>
-                    </select>
-                    <br />
-                    <p>Buttons bar:</p>
-                    <br />
-                    <select id="BtnsBarPosition" class="form-select text-light bg-dark">
-                        <option value="vertical">Vertical</option>
-                        <option value="horizontal">Horizontal</option>
-                    </select>
-                    <br />
-                    <div id="pinUnpinGridDiv" class="hidden">
-                        <p>Pin grid:</p>
+                    <div id="tabRecording" class="tabcontent">
+                        <button id="startRecButton" class="hidden">
+                            <i class="fas fa-record-vinyl"></i>
+                            <p>Start recording</p>
+                        </button>
+                        <button id="stopRecButton" class="hidden">
+                            <i class="fas fa-stop-circle"></i>
+                            <p>Stop recording</p>
+                        </button>
                         <br />
-                        <select id="pinVideoPosition" class="form-select text-light bg-dark">
+                        <button id="pauseRecButton" class="hidden">
+                            <i class="far fa-pause-circle"></i>
+                            <p>Pause recording</p>
+                        </button>
+                        <button id="resumeRecButton" class="hidden">
+                            <i class="far fa-play-circle"></i>
+                            <p>Resume recording</p>
+                        </button>
+                        <div id="recordingTime" class="hidden">
+                            <hr style="border: 1px solid grey" />
+                            <table class="settingsTable">
+                                <tr>
+                                    <td>
+                                        <i style="color: red" class="fa-solid fa-circle pulsate"></i>&nbsp;&nbsp;REC
+                                        time:
+                                    </td>
+                                    <td id="recordingStatus">0s</td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div id="tabVideoShare" class="tabcontent">
+                        <button id="videoShareButton">
+                            <i class="fab fa-youtube"></i>
+                            <p>Share a Video or Audio</p>
+                        </button>
+                        <br />
+                        <button id="videoCloseBtn" class="hidden">
+                            <i class="fas fa-times"></i>
+                            <p>Close Video or Audio</p>
+                        </button>
+                        <br />
+                    </div>
+
+                    <div id="tabAspect" class="tabcontent">
+                        <br />
+                        <p>Aspect ratio:</p>
+                        <br />
+                        <select id="BtnAspectRatio" class="form-select text-light bg-dark">
+                            <option value="0">default</option>
+                            <option value="1">4:3</option>
+                            <option value="2">16:9</option>
+                            <option value="3">1:1</option>
+                            <option value="4">1:2</option>
+                        </select>
+                        <br />
+                        <p>Video Object fit:</p>
+                        <br />
+                        <select id="BtnVideoObjectFit" class="form-select text-light bg-dark">
+                            <option value="fill">fill</option>
+                            <option value="contain">contain</option>
+                            <option value="cover">cover</option>
+                            <option value="scale-down">scale-down</option>
+                            <option value="none">none</option>
+                        </select>
+                        <br />
+                        <p>Video Controls:</p>
+                        <br />
+                        <select id="BtnVideoControls" class="form-select text-light bg-dark">
+                            <option value="off">off</option>
+                            <option value="on">on</option>
+                        </select>
+                        <br />
+                    </div>
+
+                    <div id="tabStyling" class="tabcontent">
+                        <br />
+                        <p>Theme:</p>
+                        <br />
+                        <select id="selectTheme" class="form-select text-light bg-dark">
+                            <option value="dark">⚫ &nbsp;Dark</option>
+                            <option value="grey">⚪ &nbsp;Grey</option>
+                            <option value="green">🟢 &nbsp;Green</option>
+                            <option value="blue">🔵 &nbsp;Blue</option>
+                            <option value="red">🔴 &nbsp;Red</option>
+                        </select>
+                        <br />
+                        <p>Buttons bar:</p>
+                        <br />
+                        <select id="BtnsBarPosition" class="form-select text-light bg-dark">
                             <option value="vertical">Vertical</option>
                             <option value="horizontal">Horizontal</option>
-                            <option value="top">Top</option>
                         </select>
+                        <br />
+                        <div id="pinUnpinGridDiv" class="hidden">
+                            <p>Pin grid:</p>
+                            <br />
+                            <select id="pinVideoPosition" class="form-select text-light bg-dark">
+                                <option value="vertical">Vertical</option>
+                                <option value="horizontal">Horizontal</option>
+                                <option value="top">Top</option>
+                            </select>
+                        </div>
+                        <br />
                     </div>
-                    <br />
-                </div>
 
-                <div id="tabLanguages" class="tabcontent">
-                    <br />
-                    <p>Language:</p>
-                    <br />
-                    <div id="google_translate_element"></div>
+                    <div id="tabLanguages" class="tabcontent">
+                        <br />
+                        <p>Language:</p>
+                        <br />
+                        <div id="google_translate_element"></div>
+                        <br />
+                    </div>
                 </div>
             </main>
         </section>