diff --git a/package.json b/package.json
index 0460d59a..97d37500 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
     "cors": "^2.8.3",
     "socket.io": "^2.0.3",
     "videojs-contrib-hls": "^5.5.2",
-    "vue": "^2.4.2",
+    "vue": "^2.5.2",
     "vue-router": "^2.3.1",
-    "vuetify": "^0.13.1"
+    "vuetify": "^0.16.9"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
diff --git a/src/App.vue b/src/App.vue
index e1cd03d5..18a560ba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,14 @@
 <template>
-  <v-app dark style="height:100%" toolbar>
-    <v-navigation-drawer temporary v-model="drawer" disable-route-watcher>
+  <v-app dark style="height:100%">
+    <v-navigation-drawer app temporary v-model="drawer" disable-route-watcher>
       <leftsidebar></leftsidebar>
     </v-navigation-drawer>
-    <v-navigation-drawer  style="padding:0" persistent v-model="drawerRight" right disable-route-watcher enable-resize-watcher>
+    <v-navigation-drawer app 
+      permanent
+      clipped v-model="drawerRight" clipped right disable-route-watcher enable-resize-watcher>
       <drawerright></drawerright>
     </v-navigation-drawer>
-    <v-toolbar>
+    <v-toolbar app fixed>
       <v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title class="white--text">PlexTogether</v-toolbar-title>
       <v-spacer></v-spacer>
@@ -14,19 +16,21 @@
         <img class="ma-2 mr-3" style="height:70%;width:auto" v-bind:src="logo"/>
         <v-btn primary dark raised v-if="shortUrl != null" v-clipboard="shortUrl" @success="sendNotification()">Invite</v-btn>
         <v-btn small tag="a" class="hidden-sm-and-down" flat v-for="item in links" :key="item.title" :href="item.href" :target="item.target">{{ item.title }}</v-btn>
-        <v-toolbar-side-icon v-if="showRightDrawerButton" @click.native.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
+        <v-toolbar-side-icon v-if="showRightDrawerButton" @click="drawerRight = !drawerRight"></v-toolbar-side-icon>
       </v-toolbar-items>
     </v-toolbar>
     <main v-bind:style="mainStyle">
-      <v-container style="padding:0; height:100%; max-width:100%" v-bind:style="containerStyle">
-        <router-view></router-view>    
-        <v-snackbar
-          bottom
-          :timeout="4000"
-          v-model="snackbar"
-        > <div style="text-align:center;width:100%">{{snackbarMsg}}</div>
-        </v-snackbar>
-      </v-container>
+      <v-content style="padding:0; max-width:100%; margin: 0; margin-top: 64px" v-bind:style="containerStyle">
+        <v-container fluid class="ma-0 pa-0">
+          <router-view></router-view>    
+          <v-snackbar
+            bottom
+            :timeout="4000"
+            v-model="snackbar"
+          > <div style="text-align:center;width:100%">{{snackbarMsg}}</div>
+          </v-snackbar>
+        </v-container>
+      </v-content>
     </main>    
   </v-app>
 </template>
diff --git a/src/assets/css/styleNew.css b/src/assets/css/styleNew.css
index 16395623..c37527e6 100644
--- a/src/assets/css/styleNew.css
+++ b/src/assets/css/styleNew.css
@@ -231,6 +231,29 @@ span {
 
 /* PTPlayer */
 
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+video.video-js,
+video.vjs-tech, {
+  max-height: calc(100vh - 64px);
+  position: relative !important;
+  width: 100%;
+  height: auto !important;
+  max-width: 100% !important;
+  padding-top: 0 !important;
+  line-height: 0;
+}
+
+/* Fix the control bar due to us resetting the line-height on the video-js */
+.vjs-control-bar {
+  line-height: 1;
+}
+
+.ptplayer .video-js {
+  max-height: calc(100vh - 64px) !important;
+}
+
 .ptplayer .video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
   width: 10em
 }
diff --git a/src/components/application.vue b/src/components/application.vue
index aaccc6cf..f5fdc3d5 100644
--- a/src/components/application.vue
+++ b/src/components/application.vue
@@ -1,26 +1,28 @@
 <template>
 	<div style="margin-bottom: 0; height:100%">
 		<div style="margin-bottom: 0; height:100%">
-			<div style="margin-bottom: 0; height:100%">
+			<v-layout row wrap style="overflow-y: scroll">
 				<!-- MAIN CONTENT -->
-				<v-layout v-if="!validDevices" wrap row style="position:relative" class="pt-4">
-					<v-flex xs12 md4 offset-md4>			
-						<div style="width:100%;text-align:center">				
-							<v-progress-circular indeterminate v-bind:size="50" class="amber--text" style="display:inline-block"></v-progress-circular>
-						</div>
-					</v-flex>      
-				</v-layout>
-				<div v-if="validDevices">
+				<v-flex xs12 v-if="!validDevices">
+					<v-layout fill-height wrap row style="position:relative" class="pt-4">
+						<v-flex xs12 md4 offset-md4>			
+							<div style="width:100%;text-align:center">				
+								<v-progress-circular indeterminate v-bind:size="50" class="amber--text" style="display:inline-block"></v-progress-circular>
+							</div>
+						</v-flex>      
+					</v-layout>
+				</v-flex>
+				<v-flex xs12 v-if="validDevices">
 					<div v-if="!ptConnected || !chosenClient || !ptRoom">
 						<walkthrough  class="pa-4"></walkthrough>
 					</div>
 					<div v-else>
-						<plexbrowser v-if="showBrowser"  class="pa-4"></plexbrowser>
+						<plexbrowser v-if="showBrowser" class="pa-4"></plexbrowser>
 						<ptplayer v-if="isPTPlayer"></ptplayer>  
 						<plexcontent v-if="showMetadata"  class="pa-4" nowPlaying :content="chosenClient.clientPlayingMetadata" :server="nowPlayingServer"></plexcontent>
 					</div>
-				</div>
-			</div>
+				</v-flex>
+			</v-layout>
 		</div>
 	</div>
 </template>
@@ -39,12 +41,10 @@
 
   // Components
   import plexclient from './application/plexclient'
-  import plexserver from './application/plexserver'
   import ptuser from './application/ptuser'
   import joinroom from './application/joinroom'
   import chatmessage from './application/chatmessage'
   import walkthrough from './application/walkthrough'
-  import sidebar from './application/sidebar'
   import ptplayer from './application/ptplayer'
   import plexbrowser from './application/plexbrowser'
   import plexcontent from './application/plexbrowser/plexcontent'
@@ -54,9 +54,7 @@
 	name: 'application',
 	components: {
 	  plexclient,
-	  plexserver,
 	  joinroom,
-	  sidebar,
 	  ptuser,
 	  chatmessage,
 	  walkthrough,
diff --git a/src/components/application/joinroom.vue b/src/components/application/joinroom.vue
index 8f5b6f7e..5a6a729b 100644
--- a/src/components/application/joinroom.vue
+++ b/src/components/application/joinroom.vue
@@ -48,7 +48,6 @@
             :autofocus="true"
             v-on:keyup.enter.native="joinRoom()"
             v-model="room"
-            class="input-group"
             
           ></v-text-field>
         </v-flex>  
@@ -59,7 +58,6 @@
             label="Room password"
             v-on:keyup.enter.native="joinRoom()"
             v-model="password"
-            class="pt-0 mt-0 input-group orange--text"
             
           ></v-text-field>
         </v-flex>        
diff --git a/src/components/application/plexbrowser.vue b/src/components/application/plexbrowser.vue
index c9dee508..974ae914 100644
--- a/src/components/application/plexbrowser.vue
+++ b/src/components/application/plexbrowser.vue
@@ -38,7 +38,7 @@
           <v-flex xs12 lg12 >
             <v-subheader > Movies ({{filteredMovies.length}})</v-subheader>
           </v-flex>          
-          <v-flex xs6 md3 xl1 lg2 class="pb-3" v-for="movie in filteredMovies" :key="movie.key">            
+          <v-flex xs6 md3 xl1 lg1 class="pb-3" v-for="movie in filteredMovies" :key="movie.key">            
             <plexthumb :content="movie" :server="movie.server" showServer search @contentSet="setContent(movie)"></plexthumb>
           </v-flex>
         </v-layout>
@@ -47,7 +47,7 @@
           <v-flex xs12 lg12 >
             <v-subheader > TV Shows ({{filteredShows.length}})</v-subheader>
           </v-flex>          
-          <v-flex xs6 md3 xl1 lg2 class="pb-3" v-for="show in filteredShows" :key="show.key">            
+          <v-flex xs6 md3 xl1 lg1 class="pb-3" v-for="show in filteredShows" :key="show.key">            
             <plexthumb :content="show" :server="show.server" showServer search @contentSet="setContent(show)"></plexthumb>
           </v-flex>
         </v-layout>        
@@ -79,7 +79,7 @@
         <h4> Browse </h4>
         <v-layout row wrap>  
           <v-flex xs12 lg4 md6 xl3 v-for="server in plex.servers" :key="server.machineIdentifier" class="pa-2">  
-            <v-card class="white--text" v-on:click="setServer(server)" horizontal height="10em" style="cursor: pointer; z-index: 0; background: rgba(0,0,0,0.4);">
+            <v-card class="white--text" v-on:click.native="setServer(server)" horizontal height="10em" style="cursor: pointer; z-index: 0; background: rgba(0,0,0,0.4);">
               <v-container fluid grid-list-lg>
                 <v-layout row>                  
                   <v-flex xs4>
diff --git a/src/components/application/plexbrowser/plexcontent.vue b/src/components/application/plexbrowser/plexcontent.vue
index 7c9f5ca0..00b5bbae 100644
--- a/src/components/application/plexbrowser/plexcontent.vue
+++ b/src/components/application/plexbrowser/plexcontent.vue
@@ -32,9 +32,9 @@
                         </v-flex>                      
                         <v-flex xs12 sm6 style="position:relative">     
                           <div style="float:right">                 
-                            <v-chip bottom v-tooltip:top="{ html: 'Resolution' }" class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip> 
-                            <v-chip bottom v-tooltip:top="{ html: 'Year' }" class="grey darken-4 white--text" outline left> {{ contents.year }}</v-chip>   
-                            <v-chip v-if="contents.contentRating" v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>     
+                            <v-chip bottom class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip> 
+                            <v-chip bottom class="grey darken-4 white--text" outline left> {{ contents.year }}</v-chip>   
+                            <v-chip v-if="contents.contentRating" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>     
                           </div>
                         </v-flex>  
                       </v-layout>   
@@ -54,9 +54,9 @@
                         </v-flex>                      
                         <v-flex xs12 sm6 style="position:relative">     
                           <div style="float:right">                 
-                            <v-chip bottom v-tooltip:top="{ html: 'Resolution' }" class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip>    
-                            <v-chip v-if="contents.contentRating" v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>                  
-                            <v-chip v-if="contents.studio" v-tooltip:top="{ html: 'Studio' }"  class="grey darken-4 white--text" small label> {{ contents.studio }}</v-chip>
+                            <v-chip bottom class="grey darken-1 white--text" outline left> {{ largestRes }}p</v-chip>    
+                            <v-chip v-if="contents.contentRating"  class="grey darken-4 white--text" small label> {{ contents.contentRating }}</v-chip>                  
+                            <v-chip v-if="contents.studio" class="grey darken-4 white--text" small label> {{ contents.studio }}</v-chip>
                           </div>
                         </v-flex>  
                       </v-layout>   
@@ -100,14 +100,14 @@
                         </v-flex>               
                         <v-flex xs12 sm6 style="position:relative">     
                           <div style="float:right">    
-                            <v-chip v-if="contents.year"  v-tooltip:top="{ html: 'Content Rating' }" class="grey darken-4 white--text" small label> {{ contents.year }}</v-chip>                  
-                            <v-chip v-for="copy in contents.Media" :key="copy.key" v-tooltip:top="{ html: 'Quality' }"  class="grey darken-4 white--text" small> {{ copy.audioCodec.toUpperCase() }}</v-chip>              
+                            <v-chip v-if="contents.year" class="grey darken-4 white--text" small label> {{ contents.year }}</v-chip>                  
+                            <v-chip v-for="copy in contents.Media" :key="copy.key" class="grey darken-4 white--text" small> {{ copy.audioCodec.toUpperCase() }}</v-chip>              
                           </div>
                         </v-flex>  
                       </v-layout>  
                       <v-divider></v-divider>     
-                      <v-chip v-for="country in contents.Country" :key="country.tag" v-tooltip:top="{ html: 'Country' }"> {{ country.tag }}</v-chip>
-                      <v-chip v-for="genre in contents.Genre" :key="genre.tag" v-tooltip:top="{ html: 'Genre' }"> {{ genre.tag }}</v-chip>      
+                      <v-chip v-for="country in contents.Country" :key="country.tag"> {{ country.tag }}</v-chip>
+                      <v-chip v-for="genre in contents.Genre" :key="genre.tag"> {{ genre.tag }}</v-chip>      
                     </v-flex>  
                     
                   </v-layout>                
diff --git a/src/components/application/plexbrowser/plexlibrary.vue b/src/components/application/plexbrowser/plexlibrary.vue
index 6cc3e343..00152975 100644
--- a/src/components/application/plexbrowser/plexlibrary.vue
+++ b/src/components/application/plexbrowser/plexlibrary.vue
@@ -11,7 +11,7 @@
         </span>
         <div v-if="!browsingContent && contents" class="mt-3" style="height:90vh; overflow-y:scroll ">
           <v-layout class="row" row wrap>
-                <v-flex xs4 md3 xl1 lg2  class="pb-3"  v-for="content in contents.MediaContainer.Metadata" :key="content.key">
+                <v-flex xs4 md3 lg1  class="pb-3"  v-for="content in contents.MediaContainer.Metadata" :key="content.key">
                   <plexthumb :content="content" :server="server" type="thumb" style="margin:7%" @contentSet="setContent(content)"></plexthumb>
                 </v-flex>
             </v-layout>  
diff --git a/src/components/application/plexbrowser/plexseason.vue b/src/components/application/plexbrowser/plexseason.vue
index 966457fc..528e1ce0 100644
--- a/src/components/application/plexbrowser/plexseason.vue
+++ b/src/components/application/plexbrowser/plexseason.vue
@@ -31,8 +31,8 @@
                       <p style="font-style: italic" class="pt-3"> {{ content.summary }} </p>              
                       <div>
                         <div style="float:right" class="pa-4">
-                          <v-chip v-if="contents.MediaContainer.grandparentContentRating" v-tooltip:top="{ html: 'Content Rating' }" label> {{ contents.MediaContainer.grandparentContentRating }}</v-chip>
-                          <v-chip v-if="contents.MediaContainer.grandparentStudio" v-tooltip:top="{ html: 'Studio' }" secondary> {{ contents.MediaContainer.grandparentStudio }}</v-chip>
+                          <v-chip v-if="contents.MediaContainer.grandparentContentRating" label> {{ contents.MediaContainer.grandparentContentRating }}</v-chip>
+                          <v-chip v-if="contents.MediaContainer.grandparentStudio"  secondary> {{ contents.MediaContainer.grandparentStudio }}</v-chip>
                         </div>
                       </div>     
                     </div>                
@@ -45,7 +45,7 @@
           <v-divider></v-divider>
           <div>          
               <v-layout class="row mt-3" row wrap>
-                <v-flex xs6 md3 xl2 lg2  class="pb-3" v-for="content in contents.MediaContainer.Metadata" :key="content.key">
+                <v-flex xs6 md3 lg2  class="pb-3" v-for="content in contents.MediaContainer.Metadata" :key="content.key">
                   <plexthumb :content="content" :server="server" type="thumb" style="margin:2%" fullTitle @contentSet="setContent(content)"></plexthumb>
                 </v-flex>
             </v-layout>  
diff --git a/src/components/application/plexbrowser/plexseries.vue b/src/components/application/plexbrowser/plexseries.vue
index 69732088..b34d0ee4 100644
--- a/src/components/application/plexbrowser/plexseries.vue
+++ b/src/components/application/plexbrowser/plexseries.vue
@@ -53,7 +53,7 @@
           </v-flex>
           <h4 class="mt-3"> Seasons </h4>
           <v-layout class="row" row wrap>
-              <v-flex xs4 md3 xl1 lg2  class="pb-3" v-for="content in contents.MediaContainer.Metadata" :key="content.key">
+              <v-flex xs4 md3 xl1 lg1  class="pb-3" v-for="content in contents.MediaContainer.Metadata" :key="content.key">
                 <plexthumb :content="content" :server="server" type="thumb" style="margin:7%" @contentSet="setContent(content)"></plexthumb>
               </v-flex>
           </v-layout>            
diff --git a/src/components/application/plexbrowser/plexserver.vue b/src/components/application/plexbrowser/plexserver.vue
index e1cf6eef..d45664bb 100644
--- a/src/components/application/plexbrowser/plexserver.vue
+++ b/src/components/application/plexbrowser/plexserver.vue
@@ -13,9 +13,9 @@
                 <v-progress-circular active large></v-progress-circular>
             </div>
             <h4> Libraries </h4>
-            <v-layout row wrap>
-              <v-flex xs6 md3 xl2 lg2 v-if="libraries && !browsingLibrary" v-for="library in filteredLibraries" :key="library.name">
-                  <v-card v-on:click="setLibrary(library)" :img="getArtLibrary(library)" height="10em" class="text-xs-center hoverable card" style="max-width:100%">
+            <v-layout row wrap v-if="libraries && !browsingLibrary">
+              <v-flex xs6 md3 xl2 lg2  v-for="library in filteredLibraries" class="pa-3 clickable" :key="library.name">
+                  <v-card v-on:click.native="setLibrary(library)" :img="getArtLibrary(library)" height="10em" class="text-xs-center hoverable card" style="max-width:100%">
                       <div style="position:relative;width:100%;background: rgba(0,0,0,0.4); height:8em">
                           <img style="height: 70%;display: block; margin-left: auto; margin-right: auto " :src="getThumb(library)"/>
                       </div>                      
diff --git a/src/components/application/plexbrowser/plexthumb.vue b/src/components/application/plexbrowser/plexthumb.vue
index 3819711e..d5e31ef1 100644
--- a/src/components/application/plexbrowser/plexthumb.vue
+++ b/src/components/application/plexbrowser/plexthumb.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="portrait" ref="root" style="cursor: pointer" @mouseover="hovering = true" @mouseout="hovering = false">
-
-
-      <v-card data-tilt v-on:click="emitContentClicked(content)" class="grey darken-4" style="border:solid">
+      <v-card data-tilt v-on:click.native="emitContentClicked(content)" class="grey darken-4" style="border:solid">
         <v-card-media
           class="white--text"
           style="position:relative"
@@ -32,7 +30,7 @@
                     <v-progress-linear style="position:absolute; top:0; width:100%" class="pa-0 ma-0 pt-content-progress" v-if="showProgressBar" height="2" :value="unwatchedPercent"></v-progress-linear>                           
                     <v-layout row wrap class="text-xs-left" style="margin:0; margin-left:3px; display:block; max-width:100%; height:100%">
                         <v-flex v-if="!onlyBottom" xs12 style="height:50%" :style="topTextStyle" ref="topText" class="pa-0 ma-0 ml-1 mt-1">
-                            <div v-tooltip:top="{ html: getTitle(content) }" class="truncate" style="font-size:1rem">{{ getTitle(content) }}</div>
+                            <div class="truncate" style="font-size:1rem">{{ getTitle(content) }}</div>
                         </v-flex>                  
                         <v-flex xs12 style="height:50%; font-size:0.8rem"  :style="bottomTextStyle" ref="bottomText" class="pa-0 ma-0 mt-0 ml-1">
                             <div class="truncate soft-text" style=" position:absolute; bottom:0">{{ getUnder(content) }}</div>
diff --git a/src/components/application/plexserver.vue b/src/components/application/plexserver.vue
deleted file mode 100644
index dbf26fa7..00000000
--- a/src/components/application/plexserver.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div v-tooltip="tooltipMsg" class="mdc-list-item" href="#" style="height: 30px">
-    {{ object.name }}
-  </div>
-</template>
-
-<script>
-  export default {
-    props: ['object'],
-    name: 'plexserver',
-    computed: {
-      tooltipMsg: function () {
-        return this.object.name + ' running on ' + this.object.platform + ' (Version ' + this.object.productVersion + ')'
-      }
-    }
-  }
-</script>
-
diff --git a/src/components/application/ptplayer.vue b/src/components/application/ptplayer.vue
index 1c5d338f..d3a6fac3 100644
--- a/src/components/application/ptplayer.vue
+++ b/src/components/application/ptplayer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width:100%; height:100%">
+  <div style="width:100%; max-height: calc(100vh - 64px)">
     <videoplayer v-if="playingMetadata && chosenServer && chosenQuality && ready"
                  @playerMounted="playerMounted()"
                  @timelineUpdate="timelineUpdate"
diff --git a/src/components/application/ptplayer/videoplayer.vue b/src/components/application/ptplayer/videoplayer.vue
index cd7ddf08..5d93901f 100644
--- a/src/components/application/ptplayer/videoplayer.vue
+++ b/src/components/application/ptplayer/videoplayer.vue
@@ -235,21 +235,6 @@
           // console.log('Succesfully sent Player status to PMS')
         }
       })
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
     },
     computed: {
       player () {
@@ -272,7 +257,7 @@
           // videojs options
           plugins: {},
 
-          fluid: true,
+          fluid: false,
           preload: 'auto',
           volume: 0.5,
           aspectRatio: '16:9',
@@ -397,7 +382,7 @@
         console.log(player)
       },
       playerStateChanged (playerCurrentState) {
-        console.log("Setting volume to " + this.player.volume() || 0)
+        // console.log("Setting volume to " + this.player.volume() || 0)
         this.$store.commit('setSettingPTPLAYERVOLUME', this.player.volume() || 0)
         this.bufferedTill = Math.round(this.player.buffered().end(0) * 1000)
         this.duration = Math.round(this.player.duration() * 1000)
@@ -421,7 +406,7 @@
         })
       },
       playerReadied (player) {
-        console.log('Setting volume to ' + this.$store.getters.getSettingPTPLAYERVOLUME )
+        // console.log('Setting volume to ' + this.$store.getters.getSettingPTPLAYERVOLUME )
         this.player.volume(this.$store.getters.getSettingPTPLAYERVOLUME || 0)
       },
 
diff --git a/src/components/application/sidebar.vue b/src/components/application/sidebar.vue
deleted file mode 100644
index e37acb07..00000000
--- a/src/components/application/sidebar.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <div v-if="chosenClient && plex" class="col l2 s12" v-bind:style="{ position: isMobile }"
-       style="border-right-color: rgba(0,0,0,0.1); border-right-width: 1px; border-right-style: solid; border-bottom-color: rgba(0,0,0,0.1); border-bottom-width: 1px; border-bottom-style: solid; width: 100% min-height: 50%;">
-    <div style="overflow-y: auto;max-height: 50%;">
-      <div class="mdc-list">
-        <li v-if="chosenClient" class="mdc-list-item mdc-permanent-drawer--selected plex-gamboge-text truncate"
-            href="#">
-          Plex Players {{playercount}}
-        </li>
-        <li v-if="plex && chosenClient" v-for="client in clients" id="plexPlayers">
-          <plexclient :sidebar="true" :object="client"></plexclient>
-        </li>
-      </div>
-      <div v-if="ptConnected" style="margin-bottom: 20px">
-        <div class="mdc-list">
-          <li class="mdc-list-item mdc-permanent-drawer--selected plex-gamboge-text" href="#">
-            PT Server
-          </li>
-          <li class="mdc-list-item truncate" style="height: 30px" id="plexTogetherServerAddress">
-            {{ ptServer }}
-          </li>
-        </div>
-        <div class="mdc-list">
-          <li class="mdc-list-item mdc-permanent-drawer--selected plex-gamboge-text" href="#">
-            PT Room
-          </li>
-          <li class="mdc-list-item truncate" style="height: 30px" id="plexTogetherRoomName">
-            {{ ptRoom }}
-          </li>
-        </div>
-        <div v-if="ptPassword" class="mdc-list">
-          <li class="mdc-list-item mdc-permanent-drawer--selected plex-gamboge-text" href="#">
-            PT Password
-          </li>
-          <li class="mdc-list-item truncate" style="height: 30px" id="plexTogetherRoomPassword">
-            {{ ptPassword }}
-          </li>
-        </div>
-      </div>
-    </div>
-    <div class="row" style="position: absolute;left: 0; margin-bottom: 0; width:100%" v-bind:style="mobileStyle">
-      <div v-if="plex && chosenClient" class="plexTogetherInfo col l12 s12"
-           style="padding-top: 11.25px; min-height:30%; max-height:50%; padding-left: 0; padding-right: 0">
-        <div class="row" v-if="chosenClient.clientPlayingMetadata" style="margin-bottom: 0;" id="userMetadata">
-          <div class="col s12 center">
-            <img id="metaThumb" :src="metadataThumb" style="max-height: 30%; max-width: 100%">
-          </div>
-          <div class="col s12 center white-text" id="metaUnder" style="padding-bottom: 10px;">
-            {{ metadataTitle }}
-            <br> {{ metadataInfo }}
-            <br> <label>Playing on {{ metadataServer }}</label>
-          </div>
-        </div>
-        <div v-if="ptConnected" class="col s12" style="padding:0">
-          <button class="mdc-button mdc-button--raised mdc-button--accent plex-gamboge ptSettings disconnect"
-                  id="plexTogetherLeaveButton" style="width: 100%;" v-on:click="handleDisconnect()">
-            Disconnect
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-  import plexclient from './plexclient'
-  import plexserver from './plexserver'
-
-  export default {
-    props: ['object', 'mobile'],
-    name: 'sidebar',
-    data () {
-      return {
-        testClient: null
-      }
-    },
-    components: {
-      plexclient,
-      plexserver,
-    },
-    computed: {
-      mobileStyle: function () {
-        if (!this.mobile) {
-          return {
-            bottom: '0px'
-          }
-        }
-        return {}
-      },
-      chosenClient: function () {
-        return this.$store.getters.getChosenClient
-      },
-      plex: function () {
-        return this.$store.getters.getPlex
-      },
-      clients: function () {
-        return this.$store.getters.getPlex.clients
-      },
-      context: function () {
-        return this.$store
-      },
-      logo: function () {
-        if (this.$store.getters.getSettingDARKMODE) {
-          return 'ptweb/logo-long-light.png'
-        }
-        return 'ptweb/logo-long-dark.png'
-      },
-      ptConnected: function () {
-        return this.$store.getters.getConnected
-      },
-      ptServer: function () {
-        return this.$store.getters.getServer
-      },
-      ptRoom: function () {
-        return this.$store.getters.getRoom
-      },
-      ptPassword: function () {
-        return this.$store.getters.getPassword
-      },
-      validPlex: function () {
-        if (!this.$store.state.plex) {
-          return false
-        }
-        return true
-      },
-      playercount: function () {
-        if (this.$store.state.plex && this.$store.state.plex.gotDevices) {
-          return '(' + this.$store.state.plex.clients.length + ')'
-        }
-        return ''
-      },
-      servercount: function () {
-        if (this.$store.state.plex && this.$store.state.plex.gotDevices) {
-          return '(' + this.$store.state.plex.servers.length + ')'
-        }
-        return ''
-      },
-      metadataThumb: function () {
-        if (!this.validPlex) {
-          return ''
-        }
-        let plexObj = this.$store.state.plex
-        if (!this.$store.getters.getChosenClient) {
-          return ''
-        }
-        let metadata = this.$store.getters.getChosenClient.clientPlayingMetadata
-        if (!metadata) {
-          return ''
-        }
-        let server;
-        let content = metadata.thumb;
-        if (metadata.parentThumb) {
-          content = metadata.parentThumb
-        }
-        if (!plexObj.getServerById(metadata.machineIdentifier)) {
-          return ''
-        }
-        return plexObj.getServerById(metadata.machineIdentifier).getUrlForLibraryLoc(content)
-      },
-      metadataServer: function () {
-        if (!this.validPlex) {
-          return ''
-        }
-        if (!this.$store.getters.getChosenClient) {
-          return ''
-        }
-        let metadata = this.$store.getters.getChosenClient.clientPlayingMetadata
-        if (!metadata) {
-          return ''
-        }
-        return (this.plex.getServerById(this.chosenClient.clientPlayingMetadata.machineIdentifier).name)
-      },
-      metadataTitle: function () {
-        if (!this.validPlex) {
-          return ''
-        }
-        if (!this.$store.getters.getChosenClient) {
-          return ''
-        }
-        let metadata = this.$store.getters.getChosenClient.clientPlayingMetadata
-        if (!metadata) {
-          return ''
-        }
-        if (metadata.type == 'movie') {
-          return metadata.title
-        }
-        if (metadata.type == 'episode') {
-          return metadata.grandparentTitle
-        }
-        return metadata.index
-      },
-      metadataInfo: function () {
-        if (!this.validPlex) {
-          return ''
-        }
-        if (!this.$store.getters.getChosenClient) {
-          return ''
-        }
-        let metadata = this.$store.getters.getChosenClient.clientPlayingMetadata
-        if (!metadata) {
-          return ''
-        }
-        if (metadata.type == 'movie') {
-          return metadata.year
-        }
-        if (metadata.type == 'episode') {
-          return metadata.title + ' (S' + metadata.parentIndex + '·E' + metadata.index + ')'
-        }
-        return metadata.index
-
-      },
-      isMobile: function () {
-        if (!this.mobile) {
-          return 'relative'
-        }
-        return ''
-      },
-    },
-    methods: {
-      previewClient: function (client) {
-        this.testClient = client
-      },
-      clientClicked: function (client) {
-        let clients = this.$store.getters.getPlex.clients
-        for (let i = 0; i < clients.length; i++) {
-          let _client = clients[i]
-          _client.connectedstatus = 'fresh'
-        }
-        //this.$store.state.plex.chosenClient = null
-        client.connectedstatus = 'waiting'
-        let that = this
-        client.findConnection(function (res) {
-          let plexObj = that.$store.state.plex
-          if (res) {
-            client.connectedstatus = 'connected'
-            that.$store.commit('SET_CHOSENCLIENT', client)
-
-          } else {
-            client.connectedstatus = 'failed'
-          }
-        })
-      },
-      handleDisconnect: function () {
-        this.$store.dispatch('disconnectServer')
-      },
-      openJoinRoomModal: function () {
-        return this.$parent.$refs.joinroomModal.open()
-      },
-    }
-  }
-</script>
-
diff --git a/src/components/application/walkthrough.vue b/src/components/application/walkthrough.vue
index 3d728b64..ce633f8e 100644
--- a/src/components/application/walkthrough.vue
+++ b/src/components/application/walkthrough.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-layout >
-    <v-flex xs12 lg8 offset-lg2 xl6 offset-xl3 style="background: rgba(0,0,0,0.1); border-radius: 10px" class="pa-4">
-      <v-layout row wrap>
-        <v-flex xs12 md8 offset-md2 lg4 offset-lg4 xl6 offset-xl3>
+  <v-layout row wrap justify-center>
+    <v-flex xs12 lg8 xl6  style="background: rgba(0,0,0,0.1); border-radius: 10px" class="pa-4">
+      <v-layout row wrap justify-center>
+        <v-flex xs12 md8 lg4 xl6>
           <img style="width:100%" v-bind:src="logo">
         </v-flex>
       </v-layout>
@@ -28,7 +28,7 @@
         <v-divider></v-divider>
         <v-layout row wrap>      
           <v-flex xs12 md6 lg7>
-            <v-subheader light>Plex Players {{ playercount }}</v-subheader>              
+            <v-subheader>Plex Players {{ playercount }}</v-subheader>              
             <div v-for="i in plex.clients" :key="i.clientIdentifier">
               <div v-on:click="previewClient(i)">
                 <plexclient :startup="testClient" :sidebar="false" :selected="isClientSelected(i)" :object="i" style="cursor: pointer"></plexclient>
@@ -37,11 +37,11 @@
           </v-flex>
           <v-flex xs12 md6 lg5>
             <div v-if="testClient">
-              <v-subheader light>
+              <v-subheader>
                 Selected Player
               </v-subheader>
               <div class="pl-1">
-                <h6 light style="opacity:1">{{ testClient.name }}</h6>
+                <h6 style="opacity:1">{{ testClient.name }}</h6>
                 <div>
                   <label >Last seen</label><span style="opacity:0.8">  {{ lastSeenAgo(testClient.lastSeenAt) }}</span>
                 </div>
@@ -98,7 +98,6 @@
 <script>
 
   import plexclient from './plexclient'
-  import plexserver from './plexserver'
   import joinroom from './joinroom'
 
   import moment from '../../../node_modules/moment/moment.js'
@@ -115,7 +114,6 @@
     },
     components: {
       plexclient,
-      plexserver,
       joinroom
     },
     computed: {
diff --git a/src/components/home.vue b/src/components/home.vue
index 9f3e7489..156c4e2b 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -10,13 +10,13 @@
             <h1 style="color:white">G'day</h1>
           </v-flex>
         </v-layout>
-        <v-layout row wrap>
-          <v-flex xs12 md6 offset-md3>
+        <v-layout row wrap justify-center>
+          <v-flex xs12 md6>
             <p> PlexTogether is a tool to sync Plex playback with friends and family anywhere in the world.
               We started off with a Python script which we distributed amongst our friends. With a command line based UI we quickly realised this was too difficult for our friends to use reliably.
               After playing around with the concept we decided to make a version that we could release that all Plex users could enjoy.
             </p>  
-            <h2> How it works </h2>
+            <h4> How it works </h4>
             <p>
               PlexTogether aims to keep multiple viewing sessions in sync regardless of whether the clients are in the same room or across the globe. To do this PlexTogether utilizes a middle-man server to communicate between each of PlexTogether clients.
               Users choose their Plex client, decide on a PlexTogether Server and Room name and join up. Your friends/family can do the same. Whoever joins the room first will become the host.
diff --git a/src/sidebar.vue b/src/sidebar.vue
index 422be11b..4938cfbb 100644
--- a/src/sidebar.vue
+++ b/src/sidebar.vue
@@ -1,70 +1,75 @@
 <template>
-    <div v-if="ptRoom" class="pl-1 pr-1" style="height:100%; overflow-x:hidden;">   
-			<div style="height:60%">
-				<h6 style="text-align:center" class="mb-0 pb-0 pt-3"> Room {{ ptRoom }}</h6>
-				<v-subheader>Users ({{ ptUsers.length }})</v-subheader>  
-				<v-list dense style="height:90%; overflow-y:scroll">
-					<div v-for="user in ptUsers" v-bind:key="user.username" style="position:relative;height:7em">
-						<v-list-item style="height:4em" class="mb-0 pb-0">
-							<v-list-tile avatar class="pb-0 mb-0" tag="div" >
-								<v-list-tile-avatar>
-									<img v-bind:src="user.avatarUrl"/>
-								</v-list-tile-avatar>
-								<v-list-tile-content>
-									<v-list-tile-title> {{ user.username }}</v-list-tile-title>
-									<v-list-tile-sub-title style="opacity:0.6;color:white;font-size:70%"><v-icon style="font-size:90%">{{playerState(user)}}</v-icon> - {{getTitle(user)}}</v-list-tile-sub-title>
-								</v-list-tile-content>   
-								<v-list-tile-action  v-if="isHost(user)">     
-									<v-icon v-if="isHost(user)" style="color: #E5A00D">star</v-icon>
-								</v-list-tile-action>		
-							</v-list-tile>
-						</v-list-item>
-						<div style="width:100%;" class="pl-2 pr-2 pt-2 mt-0 pb-0 mb-0">
-							<span style="float: left;font-size:70%" class="ptuser-time pl-2">{{ getCurrent(user) }}</span>
-							<span style="float: right;font-size:70%" class="ptuser-maxTime pr-2">{{ getMax(user) }}</span>
-							<v-progress-linear class="pt-content-progress " :height="2" :value="percent(user)"></v-progress-linear>
+		<v-container class="pa-0" fill-height>
+			<v-layout column v-if="ptRoom" class="pl-2 pr-2" style="">   
+				<v-flex xs12 style="height: 50vh">
+					<h6 style="text-align:center" class="mb-0 pb-0 pt-3"> Room {{ ptRoom }}</h6>
+					<v-subheader>Users ({{ ptUsers.length }})</v-subheader>  
+					<v-list dense style="overflow-y:scroll">
+						<div v-for="user in ptUsers" v-bind:key="user.username" style="position:relative;height:7em">
+							<v-list-item style="height:4em" class="mb-0 pb-0">
+								<v-list-tile avatar class="pb-0 mb-0" tag="div" >
+									<v-list-tile-avatar>
+										<img v-bind:src="user.avatarUrl"/>
+									</v-list-tile-avatar>
+									<v-list-tile-content>
+										<v-list-tile-title> {{ user.username }}</v-list-tile-title>
+										<v-list-tile-sub-title style="opacity:0.6;color:white;font-size:70%"><v-icon style="font-size:90%">{{playerState(user)}}</v-icon> - {{getTitle(user)}}</v-list-tile-sub-title>
+									</v-list-tile-content>   
+									<v-list-tile-action  v-if="isHost(user)">     
+										<v-icon v-if="isHost(user)" style="color: #E5A00D">star</v-icon>
+									</v-list-tile-action>		
+								</v-list-tile>
+							</v-list-item>
+							<div class="pl-2 pr-2 pt-2 mt-0 pb-0 mb-0">
+								<span style="float: left;font-size:70%" class="ptuser-time pl-2">{{ getCurrent(user) }}</span>
+								<span style="float: right;font-size:70%" class="ptuser-maxTime pr-2">{{ getMax(user) }}</span>
+								<v-progress-linear class="pt-content-progress " :height="2" :value="percent(user)"></v-progress-linear>
+							</div>
+							<v-divider class="mt-0 pt-0" style="height:2px; color:white"></v-divider>  
 						</div>
-						<v-divider class="mt-0 pt-0" style="height:2px; color:white" light></v-divider>  
-					</div>
-				</v-list>
-			</div>
-			<div style="overflow-y: auto; height: 30%">
-				<div style="height:100%">
-					<v-divider></v-divider>  
-					<v-subheader style="height:10%" light>Messages</v-subheader>  
-					<v-list id="chatbox" :style="chatboxStyle" style="overflow-y:scroll; height:90%">
-						<v-list-item style="min-height:50px" v-bind:id="getMsgId(msg)" v-for="msg in messages" v-bind:key="msg.msg + msg.time">
-							<v-list-tile style="height:initial; position:relative" tag="div">
-								<v-list-tile-avatar>
-									<img v-bind:src="msg.user.thumb || msg.user.avatarUrl" style="position:absolute;top:0"/>
-								</v-list-tile-avatar>
-								<v-list-tile-content>
-									<v-list-tile-title style="color:white; position:relative; height:35%">
-										<span style="opacity:1;font-size:80%; float:left"> {{ msg.user.username }}</span>
-										<span style="opacity:0.6;font-size:60%; float:right"> {{ msg.time}}</span>
-									</v-list-tile-title>
-									<v-list-tile-sub-title style="opacity:0.8;color:white;font-size:70%; height:65%"> {{ msg.msg }}</v-list-tile-sub-title>
-								</v-list-tile-content>
-							</v-list-tile>
-						</v-list-item>
 					</v-list>
-				</div>
-			</div>
-			<div style="height: 10%; position:relative" class="pt-2">
-				<v-text-field
-					class="pa-1 ma-0" 
-					name="input-1"
-					prepend-icon="message"					
-					:label="'Send a message to ' + '#'+ptRoom"
-					autoGrow
-					v-on:keyup.enter.native="sendMessage()"
-					v-model="messageToBeSent"
-					
-				></v-text-field>
-				<v-btn style="width:100%; position:absolute; bottom:0" v-on:click.native="handleDisconnect()" class="ma-0 mt-1" primary>Leave room </v-btn>
-			</div>
-		</div>		
-			
+				</v-flex>
+				<v-flex xs12 style="overflow-y: auto; max-height: 50vh">
+					<v-container class="ma-0 pa-0" fill-height>
+						<v-layout column>
+							<v-flex xs12>
+								<v-divider></v-divider>  
+								<v-subheader>Messages</v-subheader>  
+								<v-list id="chatbox" :style="chatboxStyle" style="overflow-y:scroll; max-height: 34vh">
+									<v-list-item style="min-height:50px" v-bind:id="getMsgId(msg)" v-for="msg in messages" v-bind:key="msg.msg + msg.time">
+										<v-list-tile style="height:initial; position:relative" tag="div">
+											<v-list-tile-avatar>
+												<img v-bind:src="msg.user.thumb || msg.user.avatarUrl" style="position:absolute;top:0; width: 36px; height: 36px"/>
+											</v-list-tile-avatar>
+											<v-list-tile-content>
+												<v-list-tile-title style="color:white; position:relative;">
+													<span style="opacity:1;font-size:80%; float:left"> {{ msg.user.username }}</span>
+													<span style="opacity:0.6;font-size:60%; float:right"> {{ msg.time}}</span>
+												</v-list-tile-title>
+												<v-list-tile-sub-title style="opacity:0.8;color:white;font-size:70%;"> {{ msg.msg }}</v-list-tile-sub-title>
+											</v-list-tile-content>
+										</v-list-tile>
+									</v-list-item>
+								</v-list>
+							</v-flex>
+							<v-flex xs12 style="position:relative" class="pt-2">
+								<div style="position:absolute; bottom:0; width: 100%" class="ma-0 pa-0">
+									<v-text-field
+										prepend-icon="message"					
+										:label="'Send a message to ' + '#'+ptRoom"
+										autoGrow
+										v-on:keyup.enter.native="sendMessage()"
+										v-model="messageToBeSent"
+										
+									></v-text-field>
+									<v-btn  block v-on:click.native="handleDisconnect()" class="ma-0 mt-1" primary>Leave room </v-btn>
+								</div>
+							</v-flex>
+						</v-layout>
+					</v-container>
+				</v-flex>			
+			</v-layout>		
+		</v-container>
 </template>
 
 <script>