diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index eacdb6c..e76e0c6 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -6,6 +6,7 @@ pages: # the job must be named pages
     - echo $CI_COMMIT_TIMESTAMP $CI_COMMIT_SHORT_SHA > src/assets/version.txt
     - npm install -g workbox-cli
   script:
+    - export NODE_OPTIONS=--openssl-legacy-provider
     - npm ci
     - npm run build
     - mv public public-vue # GitLab Pages hooks on the public folder
diff --git a/public/index.html b/public/index.html
index 4123528..93f2580 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" id="favicon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index cb470ca..7622dd2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-main>
+    <v-main class="main">
       <router-view />
 
       <!-- Loading indicator -->
@@ -127,6 +127,16 @@ export default {
       }
       return title;
     },
+
+    favicon() {
+      var favicon = undefined;
+      if (this.$route.meta.includeFavicon) {
+        if (this.$matrix.currentRoom) {
+          favicon = this.$matrix.currentRoom.avatar || 'favicon.ico';
+        }
+      }
+      return favicon;
+    },
   },
   watch: {
     "$i18n.locale": {
@@ -149,12 +159,33 @@ export default {
       },
       immediate: true,
     },
+
+    favicon: {
+      handler(favicon) {
+        document.getElementById("favicon").setAttribute('href', favicon);
+      },
+      immediate: true,
+    },
   },
 };
 </script>
 
 <style lang="scss">
+@import '~vuetify/src/styles/settings/_variables.scss';
+@import '@/assets/css/variables';
+
 .copyright {
   font-size: 10px;
 }
+
+#app {
+  background-color: $app-background;
+}
+
+.main {
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    margin: 0 auto;
+    width: $main-desktop-width;;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
new file mode 100644
index 0000000..9b6a0be
--- /dev/null
+++ b/src/assets/css/_variables.scss
@@ -0,0 +1,12 @@
+$background: #ffffff;
+$app-background: #f6f6f6;
+$main-desktop-width: 644px;
+$dialog-desktop-width: 688px;
+
+
+$chat-background: $background;
+$chat-standard-padding: 32px;
+$chat-standard-padding-s: 16px;
+$chat-standard-padding-xs: 8px;
+$chat-text-size: 1.0px;
+$chat-button-height: 50px;
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 331e0ab..2751361 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -982,6 +982,8 @@ $admin-fg: white;
 }
 
 .create-room {
+    background-color: $background;
+
     .v-avatar {
         border: 1px solid #808080 !important;
     }
diff --git a/src/assets/css/join.scss b/src/assets/css/join.scss
index a52ebc6..93618f1 100644
--- a/src/assets/css/join.scss
+++ b/src/assets/css/join.scss
@@ -62,7 +62,7 @@
     /* or 43px */
     text-align: center;
     letter-spacing: -0.8px;
-    
+
     color: #000000;
     overflow-wrap: break-word;
 }
@@ -118,4 +118,4 @@
         background: #9C9CAE;
         content: " ";
     }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/login.scss b/src/assets/css/login.scss
index 3df951c..c8d2cfd 100644
--- a/src/assets/css/login.scss
+++ b/src/assets/css/login.scss
@@ -1,14 +1,5 @@
 @import "@/assets/css/main.scss";
 
 .login-root {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    width: 80%;
-    height: 100%;
-    padding: 0;
-    margin: 10%;
     background-color: $background;
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index cef60c2..26c1aa2 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,4 +1,4 @@
-$background: #ffffff;
+@import './variables';
 
 @font-face {
     font-family: "Inter";
@@ -49,14 +49,6 @@ $background: #ffffff;
     font-style: normal;
 }
 
-
-$chat-background: $background;
-$chat-standard-padding: 32px;
-$chat-standard-padding-s: 16px;
-$chat-standard-padding-xs: 8px;
-$chat-text-size: 1.0px;
-$chat-button-height: 50px;
-
 html { height:100%; }
 body { position:absolute; top:0; bottom:0; right:0; left:0; }
 
@@ -142,7 +134,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
         text-align: center;
         margin-bottom: 20px;
     }
-    
+
     .dialog-text {
         text-align: left;
         word-break: break-word;
@@ -150,7 +142,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
             color: black;
             text-decoration: underline;
         }
-    }    
+    }
 }
 
 .build-version {
@@ -162,4 +154,4 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
     text-align: center;
     letter-spacing: 0.4px;
     color: rgba(0, 0, 0, 0.6);
-}
\ No newline at end of file
+}
diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index 84fabd3..8fa1393 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -141,6 +141,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~vuetify/src/styles/settings/_variables.scss';
+@import '@/assets/css/variables';
+
 .bottom-sheet {
   position: fixed;
   top: 0;
@@ -184,6 +187,11 @@ export default {
   border-radius: 10px 10px 0px 0px;
   background-color: white;
   overflow: hidden;
+
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    margin: 0 auto;
+    width: $dialog-desktop-width;
+  }
 }
 
 .bottom-sheet-content[data-state="small"],
@@ -191,4 +199,10 @@ export default {
 .bottom-sheet-content[data-state="closed"] {
   transition: top 0.3s ease-out;
 }
+
+.bottom-sheet-content[data-state="small"] {
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    top: 100px !important;
+  }
+}
 </style>
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 1467b36..a8c089a 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -17,7 +17,7 @@
         style="overflow: hidden; cursor: pointer"
         @click.stop="onHeaderClicked"
       >
-        <div class="d-flex flex-nowrap room-name-inline">
+        <div class="room-name-inline text-truncate" :title="room.name">
           {{ room.name }}
           <!--<v-icon>expand_more</v-icon>-->
         </div>
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 5dd079e..e2d812c 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="create-room">
+  <div class="create-room fill-height">
     <div>
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 7389fec..ae6e548 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-4">
+  <div class="pa-4 login-root fill-height">
     <div class="chat-header">
       <v-container fluid>
         <v-row no-gutters>
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 416da5c..2b690ec 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -3,7 +3,7 @@
     v-model="showDialog"
     content-class="profile-info-popup"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '60%' : '95%'"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
   >
     <v-card flat>
       <v-card-text>
@@ -135,6 +135,8 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+@import '~vuetify/src/styles/settings/_variables.scss';
+
 .profile-info-popup {
   font-family: "Inter", sans-serif !important;
   font-size: 16px;
@@ -181,5 +183,22 @@ export default {
       font-size: 13 * $chat-text-size !important;
     }
   }
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    overflow: unset;
+    width: $main-desktop-width;;
+    position: absolute;
+    top: 70px;
+    right: unset;
+
+    &::before {
+      position: absolute;
+      top: -18px;
+      right: 40px;
+    }
+
+    .v-card {
+      border-radius: 20px;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/SelectLanguageDialog.vue b/src/components/SelectLanguageDialog.vue
index 422b6fb..1ac5a00 100644
--- a/src/components/SelectLanguageDialog.vue
+++ b/src/components/SelectLanguageDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <v-dialog
     class="ma-0 pa-0"
-    width="80%"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '80%'"
   >
     <v-card class="dialog-card">
       <v-card-title class="dialog-title"
diff --git a/src/router/index.js b/src/router/index.js
index b74dec0..4ec0a32 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,7 +22,8 @@ const routes = [
     name: 'Chat',
     component: Chat,
     meta: {
-      includeRoom: true
+      includeRoom: true,
+      includeFavicon: true
     }
   },
   {
@@ -32,7 +33,8 @@ const routes = [
     props: true,
     meta: {
       title: 'Info',
-      includeRoom: true
+      includeRoom: true,
+      includeFavicon: true
     }
   },
   {
@@ -40,7 +42,8 @@ const routes = [
     name: 'Profile',
     component: Profile,
     meta: {
-      title: 'Profile'
+      title: 'Profile',
+      includeFavicon: true
     }
   },
   {
