diff --git a/src/resources/themes/meet.scss b/src/resources/themes/meet.scss
--- a/src/resources/themes/meet.scss
+++ b/src/resources/themes/meet.scss
@@ -185,22 +185,38 @@
     background: #f6f5f3;
     border-radius: 0 2em 2em 0;
     margin: 0.25em 0;
+    padding-right: 0.5em;
 
     button {
         font-size: 1.3em;
-        padding: 0 0.25em;
-        margin: 0.5em;
+        margin: 0.4em;
         position: relative;
+        color: #4f5963;
+        width: 1.75em;
+        height: 1.75em;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        &.on:not(:disabled) {
+            background: #4f5963;
+            color: white;
+        }
 
         .badge {
             font-size: 0.5em;
             position: absolute;
             right: -0.5em;
+            top: -0.5em;
 
             &:empty {
                 display: none;
             }
         }
+
+        svg {
+            width: 1em;
+        }
     }
 }
 
@@ -214,7 +230,7 @@
 
     img {
         height: 1.25em;
-        padding: 0 1.5em;
+        padding: 0 1em 0 1.5em;
     }
 }
 
@@ -279,6 +295,8 @@
     width: 0;
     display: none;
     flex-direction: column;
+    background: $body-bg;
+    padding-top: 0.25em;
 
     &.open {
         width: 30%;
@@ -287,7 +305,6 @@
         .mobile & {
             width: 100%;
             z-index: 1;
-            background: $body-bg;
         }
     }
 
@@ -301,7 +318,7 @@
         margin: 0 0.5em 0.5em 0.5em;
         padding: 0.25em 0.5em;
         border-radius: 1em;
-        background: $menu-bg-color;
+        background: #fff;
         overflow-wrap: break-word;
 
         &.self {
@@ -449,3 +466,16 @@
         }
     }
 }
+
+@include media-breakpoint-down(xs) {
+    #meet-setup {
+        .card-title {
+            text-align: center;
+        }
+    }
+
+    .media-setup-preview {
+        // Fix video element size in Safari/iOS
+        display: block;
+    }
+}
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -3,20 +3,22 @@
         <div id="meet-session-toolbar" class="hidden">
             <span id="meet-session-logo" v-html="$root.logo()"></span>
             <div id="meet-session-menu">
-                <button class="btn link-audio" :class="{ 'text-primary' : audioActive }" @click="switchSound" :disabled="!isPublisher()" :title="audioActive ? 'Mute audio' : 'Unmute audio'">
+                <button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="audioActive ? 'Mute audio' : 'Unmute audio'">
                     <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
                 </button>
-                <button class="btn link-video" :class="{ 'text-primary' : videoActive }" @click="switchVideo" :disabled="!isPublisher()" :title="videoActive ? 'Mute video' : 'Unmute video'">
+                <button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="videoActive ? 'Mute video' : 'Unmute video'">
                     <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
                 </button>
-                <button class="btn link-screen" :class="{ 'text-danger' : screenShareActive }" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen">
+                <button :class="'btn link-screen' + (screenShareActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
-                <button class="btn link-hand" :class="{ 'text-primary' : handRaised }"  v-if="!isPublisher()" @click="switchHand" :title="handRaised ? 'Lower hand' : 'Raise hand'">
+                <button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="handRaised ? 'Lower hand' : 'Raise hand'">
                     <svg-icon icon="hand-paper"></svg-icon>
                 </button>
                 <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
-                    <button class="btn link-channel" title="Interpreted language channel" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
+                    <button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-toggle="dropdown"
+                            title="Interpreted language channel" aria-haspopup="true" aria-expanded="false"
+                    >
                         <svg-icon icon="headphones"></svg-icon>
                         <span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
                     </button>
@@ -27,7 +29,7 @@
                         >{{ languages[code] }}</a>
                     </div>
                 </span>
-                <button class="btn link-chat" @click="switchChat" title="Chat">
+                <button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" title="Chat">
                     <svg-icon icon="comment"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" title="Full screen">
@@ -150,19 +152,19 @@
                         <form class="media-setup-form">
                             <div class="media-setup-preview"></div>
                             <div class="input-group mt-2">
-                                <label for="setup-microphone" class="input-group-prepend mb-0">
+                                <label for="setup-mic" class="input-group-prepend mb-0">
                                     <span class="input-group-text" title="Microphone"><svg-icon icon="microphone"></svg-icon></span>
                                 </label>
-                                <select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
+                                <select class="custom-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">None</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mt-2">
-                                <label for="setup-camera" class="input-group-prepend mb-0">
+                                <label for="setup-cam" class="input-group-prepend mb-0">
                                     <span class="input-group-text" title="Camera"><svg-icon icon="video"></svg-icon></span>
                                 </label>
-                                <select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
+                                <select class="custom-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
                                     <option value="">None</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
@@ -272,6 +274,7 @@
                 session: {},
                 audioActive: false,
                 videoActive: false,
+                chatActive: false,
                 handRaised: false,
                 screenShareActive: false
             }
@@ -663,13 +666,15 @@
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
-                
+
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
 
+                this.chatActive = !enabled
+
                 // Trigger resize, so participant matrix can update its layout
                 window.dispatchEvent(new Event('resize'));
             },
@@ -694,12 +699,10 @@
                 this.updateSelf({ hand: !this.handRaised })
             },
             switchSound() {
-                const enabled = this.meet.switchAudio()
-                this.audioActive = enabled
+                this.audioActive = this.meet.switchAudio()
             },
             switchVideo() {
-                const enabled = this.meet.switchVideo()
-                this.videoActive = enabled
+                this.videoActive = this.meet.switchVideo()
             },
             switchScreen() {
                 const switchScreenAction = () => {
@@ -744,7 +747,6 @@
 
                 this.videoActive = isPublisher ? data.videoActive : false
                 this.audioActive = isPublisher ? data.audioActive : false
-                
                 this.handRaised = data.hand
             }
         }
diff --git a/src/resources/vue/Meet/RoomOptions.vue b/src/resources/vue/Meet/RoomOptions.vue
--- a/src/resources/vue/Meet/RoomOptions.vue
+++ b/src/resources/vue/Meet/RoomOptions.vue
@@ -41,7 +41,7 @@
                         <hr>
                         <form id="room-options-nomedia">
                             <div id="room-nomedia">
-                                <label for="room-lock-input">Subscribers only:</label>
+                                <label for="room-nomedia-input">Subscribers only:</label>
                                 <input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave">
                             </div>
                             <small class="form-text text-muted">
diff --git a/src/tests/Browser/Meet/RoomControlsTest.php b/src/tests/Browser/Meet/RoomControlsTest.php
--- a/src/tests/Browser/Meet/RoomControlsTest.php
+++ b/src/tests/Browser/Meet/RoomControlsTest.php
@@ -105,13 +105,13 @@
 
             // Assert current UI state
             $owner->assertToolbar([
-                    'audio' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'video' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
+                    'video' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
-                    'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'options' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'fullscreen' => RoomPage::BUTTON_ENABLED,
+                    'options' => RoomPage::BUTTON_ENABLED,
+                    'logout' => RoomPage::BUTTON_ENABLED,
                 ])
                 ->whenAvailable('div.meet-video.self', function (Browser $browser) {
                     $browser->waitFor('video')
@@ -134,12 +134,12 @@
 
             // Assert current UI state
             $guest->assertToolbar([
-                    'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
-                    'video' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'audio' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'video' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
-                    'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'fullscreen' => RoomPage::BUTTON_ENABLED,
+                    'logout' => RoomPage::BUTTON_ENABLED,
                 ])
                 ->whenAvailable('div.meet-video:not(.self)', function (Browser $browser) {
                     $browser->waitFor('video')
@@ -166,7 +166,7 @@
 
             // Test muting audio
             $owner->click('@menu button.link-audio')
-                ->assertToolbarButtonState('audio', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
+                ->assertToolbarButtonState('audio', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertVisible('div.meet-video.self .status .status-audio');
 
             // FIXME: It looks that we can't just check the <video> element state
@@ -175,14 +175,14 @@
 
             // Test unmuting audio
             $owner->click('@menu button.link-audio')
-                ->assertToolbarButtonState('audio', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
+                ->assertToolbarButtonState('audio', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertMissing('div.meet-video.self .status .status-audio');
 
             $guest->waitUntilMissing('div.meet-video:not(.self) .status .status-audio');
 
             // Test muting audio with a keyboard shortcut (key 'm')
             $owner->driver->getKeyboard()->sendKeys('m');
-            $owner->assertToolbarButtonState('audio', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
+            $owner->assertToolbarButtonState('audio', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertVisible('div.meet-video.self .status .status-audio');
 
             $guest->waitFor('div.meet-video:not(.self) .status .status-audio')
@@ -190,7 +190,7 @@
 
             // Test unmuting audio with a keyboard shortcut (key 'm')
             $owner->driver->getKeyboard()->sendKeys('m');
-            $owner->assertToolbarButtonState('audio', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
+            $owner->assertToolbarButtonState('audio', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertMissing('div.meet-video.self .status .status-audio');
 
             $guest->waitUntilMissing('div.meet-video:not(.self) .status .status-audio')
@@ -198,7 +198,7 @@
 
             // Test muting video
             $owner->click('@menu button.link-video')
-                ->assertToolbarButtonState('video', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
+                ->assertToolbarButtonState('video', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertVisible('div.meet-video.self .status .status-video');
 
             // FIXME: It looks that we can't just check the <video> element state
@@ -207,7 +207,7 @@
 
             // Test unmuting video
             $owner->click('@menu button.link-video')
-                ->assertToolbarButtonState('video', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
+                ->assertToolbarButtonState('video', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertMissing('div.meet-video.self .status .status-video');
 
             $guest->waitUntilMissing('div.meet-video:not(.self) .status .status-video');
diff --git a/src/tests/Browser/Meet/RoomSetupTest.php b/src/tests/Browser/Meet/RoomSetupTest.php
--- a/src/tests/Browser/Meet/RoomSetupTest.php
+++ b/src/tests/Browser/Meet/RoomSetupTest.php
@@ -301,14 +301,14 @@
                 ->assertElementsCount('@session video', 0)
                 ->assertElementsCount('@session .meet-subscriber', 1)
                 ->assertToolbar([
-                    'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
-                    'video' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
+                    'audio' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_DISABLED,
+                    'video' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_DISABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'hand' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
-                    'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'options' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'fullscreen' => RoomPage::BUTTON_ENABLED,
+                    'options' => RoomPage::BUTTON_ENABLED,
+                    'logout' => RoomPage::BUTTON_ENABLED,
                 ]);
 
             // After the owner "opened the room" guest should be able to join
@@ -332,13 +332,13 @@
                 ->assertElementsCount('@session video', 0)
                 ->assertElementsCount('@session div.meet-subscriber', 2)
                 ->assertToolbar([
-                    'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
-                    'video' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
+                    'audio' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_DISABLED,
+                    'video' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_DISABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'hand' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
-                    'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
-                    'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
+                    'fullscreen' => RoomPage::BUTTON_ENABLED,
+                    'logout' => RoomPage::BUTTON_ENABLED,
                 ]);
 
             // Check guest's elements in the owner's window
diff --git a/src/tests/Browser/Pages/Meet/Room.php b/src/tests/Browser/Pages/Meet/Room.php
--- a/src/tests/Browser/Pages/Meet/Room.php
+++ b/src/tests/Browser/Pages/Meet/Room.php
@@ -121,11 +121,11 @@
         $class = '';
 
         if ($state & self::BUTTON_ACTIVE) {
-            $class .= ':not(.text-danger)';
+            $class .= '.on';
         }
 
         if ($state & self::BUTTON_INACTIVE) {
-            $class .= '.text-danger';
+            $class .= ':not(.on)';
         }
 
         if ($state & self::BUTTON_DISABLED) {