diff --git a/layouts/server/Server.html b/layouts/server/Server.html
index ba0f43c53b..559c1f397c 100644
--- a/layouts/server/Server.html
+++ b/layouts/server/Server.html
@@ -15,7 +15,8 @@
         id="statusbar"
         :server="{ name: 'Test Server', address: '0x0', desc: 'Just a test server' }"
         :user="$mock.users[0]"/>
-      <Nuxt id="server" ref="server" />
+      <TailoredCoreMedia /> 
+      <Nuxt id="server" ref="server" class="hidden-scroll"/>
       <TailoredCoreChatbar />
     </div>
   </div>
diff --git a/layouts/server/Server.less b/layouts/server/Server.less
index e69de29bb2..cff7aaf925 100644
--- a/layouts/server/Server.less
+++ b/layouts/server/Server.less
@@ -0,0 +1,103 @@
+@sidebar-size: 250px;
+@servers-size: 60px;
+
+#app-wrap {
+  #app.mobile-app {
+    height: calc(100vh - @mobile-nav-size);
+    transition: height @animation-speed;
+  }
+  #mobile-nav {
+    transition: bottom @animation-speed;
+  }
+
+  &.is-collapsed {
+    #app.mobile-app {
+      height: 100vh;
+    }
+    #mobile-nav {
+      bottom: -@mobile-nav-size;
+    }
+  }
+}
+
+#app {
+  display: flex;
+  background-color: @darker;
+  user-select: none;
+  height: 100vh;
+  .dynamic-content {
+    background-color: @darker;
+    user-select: text;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .file-preview {
+      transition: @transition-all;
+    }
+
+    #statusbar {
+      max-height: @statusbar-height;
+    }
+
+    #server {
+      width: 100%;
+      flex: 1;
+      transition: flex 0.3s;
+      overflow-x: hidden;
+    }
+
+    #chatbar {
+      height: @chatbar-size;
+      width: 100%;
+      min-width: 0;
+      justify-content: flex-end;
+      transition: height 0.3s;
+    }
+
+    #mediastream {
+      transition: flex 0.3s;
+    }
+    &.fullscreen-media {
+      #server {
+        height: 0;
+        flex: 0;
+      }
+      #chatbar {
+        height: 0;
+        margin-top: 0;
+      }
+      #mediastream {
+        flex: 1;
+      }
+    }
+  }
+
+  #sidebar,
+  #servers-vertical-list,
+  .dynamic-content,
+  #sidebar .toggle-sidebar,
+  #statusbar {
+    transition: @transition-all;
+  }
+
+  &.is-collapsed {
+    .file-preview {
+      width: calc(100% - 2rem) !important;
+    }
+    #sidebar,
+    #servers-vertical-list {
+      transform: translateX(calc(-@sidebar-size + -@servers-size));
+    }
+    .dynamic-content {
+      margin-left: calc(-@sidebar-size + -@servers-size);
+    }
+    #sidebar .toggle-sidebar {
+      right: -2rem;
+      z-index: @base-z-index;
+    }
+    #statusbar {
+      padding-left: 3rem;
+    }
+  }
+}
diff --git a/pages/server/chat/Chat.html b/pages/server/chat/Chat.html
index e69de29bb2..9183d3c2fa 100644
--- a/pages/server/chat/Chat.html
+++ b/pages/server/chat/Chat.html
@@ -0,0 +1,3 @@
+<div id="server-direct">
+    <TailoredMessagingConversation :messages="$mock.messages" :loading="loading" />
+</div>
\ No newline at end of file
diff --git a/pages/server/chat/index.vue b/pages/server/chat/index.vue
index 86e490cc57..4da4f0520b 100644
--- a/pages/server/chat/index.vue
+++ b/pages/server/chat/index.vue
@@ -6,5 +6,16 @@ import Vue from 'vue'
 export default Vue.extend({
   name: 'ServerChat',
   layout: 'server',
+  data() {
+    return {
+      loading: true,
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$data.loading = false
+    }, 3000)
+    this.$store.dispatch('fetchFriends')
+  },
 })
 </script>