diff --git a/package-lock.json b/package-lock.json
index e6cf01ca..66d9a129 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1803,6 +1803,7 @@
       "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
       "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
       "dev": true,
+      "optional": true,
       "requires": {
         "@types/webpack": "*"
       }
@@ -6048,9 +6049,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.564",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.564.tgz",
-      "integrity": "sha512-fNaYN3EtKQWLQsrKXui8mzcryJXuA0LbCLoizeX6oayG2emBaS5MauKjCPAvc29NEY4FpLHIUWiP+Y0Bfrs5dg==",
+      "version": "1.3.565",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.565.tgz",
+      "integrity": "sha512-me5dGlHFd8Q7mKhqbWRLIYnKjw4i0fO6hmW0JBxa7tM87fBfNEjWokRnDF7V+Qme/9IYpwhfMn+soWs40tXWqg==",
       "dev": true
     },
     "elliptic": {
@@ -15282,6 +15283,7 @@
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
       "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
       "dev": true,
+      "optional": true,
       "requires": {
         "@types/mini-css-extract-plugin": "^0.9.1",
         "chalk": "^3.0.0",
@@ -15296,6 +15298,7 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -15305,7 +15308,8 @@
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/App.vue b/src/App.vue
index c133584d..5621bd06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
-    <leftsidebar />
-    <rightsidebar v-if="IS_IN_ROOM" />
+    <TheSidebarLeft />
+    <TheSidebarRight v-if="IS_IN_ROOM" />
 
     <v-app-bar
       app
@@ -12,7 +12,7 @@
       <v-app-bar-nav-icon @click="SET_LEFT_SIDEBAR_OPEN" />
 
       <router-link
-        :to="{ name: 'CreateRoom'}"
+        :to="{ name: 'RoomCreation'}"
       >
         <picture>
           <source
@@ -27,7 +27,7 @@
         </picture>
       </router-link>
 
-      <nowplayingchip
+      <TheNowPlayingChip
         v-if="showNowPlaying"
         class="pl-4"
       />
@@ -65,7 +65,7 @@
           {{ item.title }}
         </v-btn>
 
-        <donate v-slot="{ on, attrs }">
+        <DonateDialog #default="{ on, attrs }">
           <v-btn
             small
             class="hidden-sm-and-down"
@@ -75,7 +75,7 @@
           >
             Donate ♥
           </v-btn>
-        </donate>
+        </DonateDialog>
 
         <v-btn
           v-if="IS_IN_ROOM"
@@ -93,9 +93,9 @@
 
       <template
         v-if="showCrumbs"
-        v-slot:extension
+        #extension
       >
-        <crumbs />
+        <TheAppBarCrumbs />
 
         <v-spacer />
 
@@ -149,14 +149,13 @@
               :color="GET_SNACKBAR_MESSAGE.color"
               bottom
               timeout="4000"
+              content-class="text-center"
               @input="SET_SNACKBAR_OPEN"
             >
-              <div style="text-align: center; width: 100%;">
-                {{ GET_SNACKBAR_MESSAGE.text }}
-              </div>
+              {{ GET_SNACKBAR_MESSAGE.text }}
             </v-snackbar>
 
-            <upnext v-if="GET_UP_NEXT_POST_PLAY_DATA" />
+            <TheUpnextDialog v-if="GET_UP_NEXT_POST_PLAY_DATA" />
           </v-sheet>
         </v-img>
       </v-container>
@@ -176,12 +175,12 @@ import { slPlayerClientId } from '@/player/constants';
 
 export default {
   components: {
-    rightsidebar: () => import('@/components/sidebars/rightsidebar.vue'),
-    upnext: () => import('@/components/upnext.vue'),
-    nowplayingchip: () => import('@/components/nowplayingchip.vue'),
-    leftsidebar: () => import('@/components/sidebars/leftsidebar.vue'),
-    donate: () => import('@/components/donate.vue'),
-    crumbs: () => import('@/components/crumbs.vue'),
+    TheSidebarLeft: () => import('@/components/TheSidebarLeft.vue'),
+    TheSidebarRight: () => import('@/components/TheSidebarRight.vue'),
+    TheUpnextDialog: () => import('@/components/TheUpnextDialog.vue'),
+    TheNowPlayingChip: () => import('@/components/TheNowPlayingChip.vue'),
+    DonateDialog: () => import('@/components/DonateDialog.vue'),
+    TheAppBarCrumbs: () => import('@/components/TheAppBarCrumbs.vue'),
   },
 
   mixins: [
@@ -249,13 +248,14 @@ export default {
     },
 
     showNowPlaying() {
-      return this.GET_ACTIVE_SERVER_ID && this.$route.name === 'browse';
+      return this.GET_ACTIVE_SERVER_ID && this.$route.name !== 'NowPlaying'
+       && this.$route.name !== 'WebPlayer';
     },
 
     showCrumbs() {
       // TODO: rewrite this logic but I'm lazy now
       return !(this.$route.path.indexOf('browse') === -1
-        && this.$route.path.indexOf('nowplaying') === -1);
+        && this.$route.name !== 'NowPlaying');
     },
 
     smallLogoMedia() {
@@ -280,7 +280,7 @@ export default {
         }
 
         const invitePart = this.$router.resolve({
-          name: 'join',
+          name: 'RoomJoin',
           params: {
             room: this.GET_ROOM,
             ...(this.GET_SERVER.length > 0 && { server: this.GET_SERVER }),
@@ -306,15 +306,15 @@ export default {
       if (this.IS_IN_ROOM && this.GET_CHOSEN_CLIENT_ID !== slPlayerClientId) {
         if (metadata) {
           this.redirectToMediaPage();
-        } else if (this.$route.fullPath.indexOf('/nowplaying') > -1) {
-          this.$router.push({ name: 'browse' });
+        } else if (this.$route.name === 'NowPlaying') {
+          this.$router.push({ name: 'PlexHome' });
         }
       }
     },
 
     GET_NAVIGATE_TO_PLAYER(navigate) {
       if (navigate) {
-        this.$router.push({ name: 'player' });
+        this.$router.push({ name: 'WebPlayer' });
         this.SET_NAVIGATE_TO_PLAYER(false);
       }
     },
@@ -322,7 +322,7 @@ export default {
     async GET_NAVIGATE_HOME(navigate) {
       if (navigate) {
         console.debug('NAVIGATE_HOME');
-        this.$router.push('/');
+        this.$router.push({ name: 'RoomCreation' });
         this.SET_NAVIGATE_HOME(false);
       }
     },
@@ -359,9 +359,6 @@ export default {
 
   methods: {
     ...mapActions([
-      'SET_LEFT_SIDEBAR_OPEN',
-      'SET_RIGHT_SIDEBAR_OPEN',
-      'TOGGLE_RIGHT_SIDEBAR_OPEN',
       'DISPLAY_NOTIFICATION',
     ]),
 
@@ -378,6 +375,9 @@ export default {
       'SET_SNACKBAR_OPEN',
       'SET_NAVIGATE_TO_PLAYER',
       'SET_NAVIGATE_HOME',
+      'TOGGLE_RIGHT_SIDEBAR_OPEN',
+      'SET_RIGHT_SIDEBAR_OPEN',
+      'SET_LEFT_SIDEBAR_OPEN',
     ]),
 
     ...mapMutations('plex', [
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index b01c8a79..d42f1677 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,22 +1,4 @@
-/* Helpers */
-
-.truncate {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.center-text {
-  text-align: center;
-}
-
-.soft-text {
-  opacity: 0.7;
-}
-
 /* Headers */
-
 h3 {
   color: white;
 }
@@ -29,81 +11,16 @@ h5 {
   color: #e5a00d;
 }
 
-h6 {
-  color: white;
-}
-
-/* Background/Text Colors */
-
-a:hover,
-a:visited,
-a:link,
-a:active {
-  text-decoration: none;
-}
-
-html {
-  overflow: auto;
-  overflow-x: hidden;
-}
-
-::-webkit-scrollbar {
-  /* remove scrollbar space */
-  background: transparent;
-
-  /* optional: just make scrollbar invisible */
-  width: 2px;
-  height: 2px;
-}
-
 .pt-orange {
   background-color: #e5a00d;
 }
 
-.pt-orange-text {
-  color: #e5a00d;
-}
-
-.highlightBorder {
-  border: solid 2px #f3b32b;
-}
-
 main {
   background: #2b5876;
   background: linear-gradient(to bottom, #1f1c2c, #182848);
 }
 
-.input-group--text-field.input-group--focused label {
-  color: #e5a00d;
-}
-
-.input-group--focused {
-  border-color: #e5a00d;
-}
-
-.card {
-  /* border-radius */
-  -webkit-border-radius: 5px !important;
-  -moz-border-radius: 5px !important;
-  border-radius: 5px !important;
-
-  /* box-shadow */
-  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
-  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
-}
-
-/* FIX Chat text not wrapping */
-.list__tile__sub-title,
-.v-list__tile__title {
-  overflow-wrap: break-word;
-  overflow-x: visible;
-  white-space: initial;
-  text-overflow: initial;
-}
-
 /* PlexBrowser */
-
 .pt-content-unwatched {
   position: absolute;
   top: 0;
@@ -116,11 +33,16 @@ main {
   background: white;
 }
 
-.progress-linear .progress-linear__bar {
-  background: white;
+/* Scrollbar */
+::-webkit-scrollbar {
+  /* remove scrollbar space */
+  background: transparent;
+
+  /* optional: just make scrollbar invisible */
+  width: 2px;
+  height: 2px;
 }
 
-/* Scrollbar */
 ::-webkit-scrollbar-button {
   width: 2px;
   height: 2px;
@@ -153,7 +75,3 @@ main {
 ::-webkit-scrollbar-track:active {
   background: #333;
 }
-
-.thick--text {
-  font-weight: 600;
-}
diff --git a/src/components/donate.vue b/src/components/DonateDialog.vue
similarity index 96%
rename from src/components/donate.vue
rename to src/components/DonateDialog.vue
index 138cb461..3f9e8c83 100644
--- a/src/components/donate.vue
+++ b/src/components/DonateDialog.vue
@@ -3,7 +3,7 @@
     v-model="donateDialog"
     max-width="650px"
   >
-    <template v-slot:activator="stuff">
+    <template #activator="stuff">
       <slot
         v-bind="stuff"
       />
@@ -90,7 +90,7 @@
 
         <v-divider />
 
-        <p class="pa-2 soft-text mb-0 pb-0">
+        <p class="pa-2 text--secondary mb-0 pb-0">
           If you make a donation, stop by the Discord and message samcm#2715
           to get your Donator role. Thankyou!
         </p>
@@ -114,6 +114,8 @@
 import clipboard from '@/mixins/clipboard';
 
 export default {
+  name: 'DonateDialog',
+
   mixins: [
     clipboard,
   ],
diff --git a/src/components/libraryviewbutton.vue b/src/components/LibraryViewButton.vue
similarity index 94%
rename from src/components/libraryviewbutton.vue
rename to src/components/LibraryViewButton.vue
index 9b98dbf8..ba2e12d7 100644
--- a/src/components/libraryviewbutton.vue
+++ b/src/components/LibraryViewButton.vue
@@ -11,6 +11,8 @@
 import { mapGetters, mapMutations } from 'vuex';
 
 export default {
+  name: 'LibraryViewButton',
+
   computed: {
     ...mapGetters([
       'IS_LIBRARY_LIST_VIEW',
diff --git a/src/components/messaging/MessageInput.vue b/src/components/MessageInput.vue
similarity index 96%
rename from src/components/messaging/MessageInput.vue
rename to src/components/MessageInput.vue
index 8ee4f166..a2a96a12 100644
--- a/src/components/messaging/MessageInput.vue
+++ b/src/components/MessageInput.vue
@@ -16,6 +16,8 @@
 import { mapActions } from 'vuex';
 
 export default {
+  name: 'MessageInput',
+
   data() {
     return {
       messageToBeSent: '',
diff --git a/src/components/messaging/message.vue b/src/components/MessageItem.vue
similarity index 97%
rename from src/components/messaging/message.vue
rename to src/components/MessageItem.vue
index 942eef0a..319208ae 100644
--- a/src/components/messaging/message.vue
+++ b/src/components/MessageItem.vue
@@ -21,6 +21,8 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  name: 'MessageItem',
+
   props: {
     message: {
       type: Object,
diff --git a/src/components/messaging/messages.vue b/src/components/MessageList.vue
similarity index 80%
rename from src/components/messaging/messages.vue
rename to src/components/MessageList.vue
index 7e0edf6f..b4f3c622 100644
--- a/src/components/messaging/messages.vue
+++ b/src/components/MessageList.vue
@@ -8,7 +8,7 @@
       Chat
     </v-subheader>
 
-    <message
+    <MessageItem
       v-for="(msg, index) in GET_MESSAGES"
       :key="index"
       :message="msg"
@@ -20,8 +20,10 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  name: 'MessageList',
+
   components: {
-    message: () => import('@/components/messaging/message.vue'),
+    MessageItem: () => import('@/components/MessageItem.vue'),
   },
 
   computed: {
diff --git a/src/components/plex/plexclient.vue b/src/components/PlexClient.vue
similarity index 99%
rename from src/components/plex/plexclient.vue
rename to src/components/PlexClient.vue
index b2a50d98..96e5200b 100644
--- a/src/components/plex/plexclient.vue
+++ b/src/components/PlexClient.vue
@@ -37,7 +37,7 @@ import { formatDistanceToNow, parseISO } from 'date-fns';
 import plexPlatformMap from '@/utils/plexplatformmap';
 
 export default {
-  name: 'Plexclient',
+  name: 'PlexClient',
 
   props: {
     clientId: {
diff --git a/src/components/plex/clientpicker.vue b/src/components/PlexClientPicker.vue
similarity index 95%
rename from src/components/plex/clientpicker.vue
rename to src/components/PlexClientPicker.vue
index 8eefbe64..65a2006d 100644
--- a/src/components/plex/clientpicker.vue
+++ b/src/components/PlexClientPicker.vue
@@ -33,8 +33,7 @@
       <v-btn
         icon
         x-small
-        @click="
-          FETCH_PLEX_DEVICES"
+        @click="FETCH_PLEX_DEVICES"
       >
         <v-icon>refresh</v-icon>
       </v-btn>
@@ -45,7 +44,7 @@
       :value="GET_CHOSEN_CLIENT_ID"
       @change="onClientClicked"
     >
-      <plexclient
+      <PlexClient
         v-for="id in GET_PLEX_CLIENT_IDS_SORTED_BY_LAST_SEEN"
         :key="id"
         :value="id"
@@ -59,8 +58,10 @@
 import { mapActions, mapGetters, mapMutations } from 'vuex';
 
 export default {
+  name: 'PlexClientPicker',
+
   components: {
-    plexclient: () => import('@/components/plex/plexclient.vue'),
+    PlexClient: () => import('@/components/PlexClient.vue'),
   },
 
   data() {
diff --git a/src/components/plex/plexthumb.vue b/src/components/PlexThumbnail.vue
similarity index 96%
rename from src/components/plex/plexthumb.vue
rename to src/components/PlexThumbnail.vue
index b1c20313..e01ea377 100644
--- a/src/components/plex/plexthumb.vue
+++ b/src/components/PlexThumbnail.vue
@@ -62,7 +62,7 @@
 
     <v-progress-linear
       v-if="showProgressBar"
-      v-slot:progress
+      #progress
       style="width: 100%;"
       class="pa-0 mb-0 ma-0 pt-content-progress"
       height="1"
@@ -76,7 +76,7 @@
         bottom
         nudge-top="10"
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template #activator="{ on, attrs }">
           <v-row
             v-bind="attrs"
             dense
@@ -92,8 +92,7 @@
               style="max-width: 100%;"
             >
               <div
-                class="truncate"
-                style="font-size: 0.9rem;"
+                class="text-truncate"
               >
                 {{ getTitle(content, fullTitle) }}
               </div>
@@ -101,9 +100,8 @@
 
             <v-col
               cols="12"
-              style="font-size: 0.7rem;"
             >
-              <div class="truncate soft-text">
+              <div class="text-caption text-truncate text--secondary">
                 {{ getSecondaryTitle(content, fullTitle) }}
               </div>
             </v-col>
@@ -112,8 +110,7 @@
 
         <div>{{ getTitle(content, fullTitle) }}</div>
         <div
-          class="soft-text"
-          style="font-size: 0.7rem;"
+          class="text-caption text--secondary"
         >
           {{ getSecondaryTitle(content, fullTitle) }}
         </div>
@@ -148,6 +145,8 @@ const getSizeValue = (cols) => `calc((100vw - 24px) / (12 / ${cols}) - 24px)`;
 const getSrcSize = (minWidth, cols) => `(min-width: ${minWidth}px) ${getSizeValue(cols)}`;
 
 export default {
+  name: 'PlexThumbnail',
+
   mixins: [contentTitle],
 
   props: {
diff --git a/src/components/crumbs.vue b/src/components/TheAppBarCrumbs.vue
similarity index 89%
rename from src/components/crumbs.vue
rename to src/components/TheAppBarCrumbs.vue
index ee42f147..7a83014d 100644
--- a/src/components/crumbs.vue
+++ b/src/components/TheAppBarCrumbs.vue
@@ -4,11 +4,11 @@
     class="text-xs-left"
     style="justify-content: left;"
   >
-    <template v-slot:divider>
+    <template #divider>
       <v-icon>chevron_right</v-icon>
     </template>
 
-    <template v-slot:item="props">
+    <template #item="props">
       <v-breadcrumbs-item
         :to="props.item.to"
         :exact="true"
@@ -24,6 +24,8 @@ import { mapGetters } from 'vuex';
 import getContentLink from '@/utils/contentlinks';
 
 export default {
+  name: 'TheAppBarCrumbs',
+
   computed: {
     ...mapGetters([
       'GET_ACTIVE_METADATA',
@@ -34,17 +36,14 @@ export default {
     ]),
 
     crumbs() {
-      if (
-        this.$route.path.indexOf('browse') === -1
-        && this.$route.path.indexOf('nowplaying') === -1
-      ) {
+      if (this.$route.path.indexOf('browse') === -1 && this.$route.name !== 'NowPlaying') {
         return [];
       }
 
       const data = [
         {
           text: 'Home',
-          to: '/browse',
+          to: { name: 'PlexHome' },
         },
       ];
 
@@ -52,7 +51,7 @@ export default {
         data.push({
           text: this.GET_PLEX_SERVER(this.GET_ACTIVE_METADATA.machineIdentifier).name,
           to: {
-            name: 'server',
+            name: 'PlexServer',
             params: {
               machineIdentifier: this.GET_ACTIVE_METADATA.machineIdentifier,
             },
@@ -63,7 +62,7 @@ export default {
           data.push({
             text: this.GET_ACTIVE_METADATA.librarySectionTitle,
             to: {
-              name: 'library',
+              name: 'PlexLibrary',
               params: {
                 machineIdentifier: this.GET_ACTIVE_METADATA.machineIdentifier,
                 sectionId: this.GET_ACTIVE_METADATA.librarySectionID,
@@ -77,7 +76,7 @@ export default {
           data.push({
             text: this.GET_ACTIVE_METADATA.grandparentTitle,
             to: {
-              name: 'series',
+              name: 'PlexSeries',
               params: {
                 machineIdentifier: this.GET_ACTIVE_METADATA.machineIdentifier,
                 sectionId: this.GET_ACTIVE_METADATA.librarySectionID,
@@ -93,7 +92,7 @@ export default {
               data.push({
                 text: this.GET_ACTIVE_METADATA.parentTitle,
                 to: {
-                  name: 'season',
+                  name: 'PlexSeason',
                   params: {
                     machineIdentifier: this.GET_ACTIVE_METADATA.machineIdentifier,
                     sectionId: this.GET_ACTIVE_METADATA.librarySectionID,
@@ -110,7 +109,7 @@ export default {
               data.push({
                 text: this.GET_ACTIVE_METADATA.parentTitle,
                 to: {
-                  name: 'series',
+                  name: 'PlexSeries',
                   params: {
                     machineIdentifier: this.GET_ACTIVE_METADATA.machineIdentifier,
                     sectionId: this.GET_ACTIVE_METADATA.librarySectionID,
diff --git a/src/components/nowplayingchip.vue b/src/components/TheNowPlayingChip.vue
similarity index 96%
rename from src/components/nowplayingchip.vue
rename to src/components/TheNowPlayingChip.vue
index 20512aa1..abefdf0f 100644
--- a/src/components/nowplayingchip.vue
+++ b/src/components/TheNowPlayingChip.vue
@@ -36,6 +36,8 @@ import { mapGetters } from 'vuex';
 import contentTitle from '@/mixins/contentTitle';
 
 export default {
+  name: 'TheNowPlayingChip',
+
   mixins: [
     contentTitle,
   ],
@@ -52,7 +54,7 @@ export default {
 
     href() {
       return {
-        name: 'nowplaying',
+        name: 'NowPlaying',
         params: {
           machineIdentifier: this.GET_ACTIVE_SERVER_ID,
           ratingKey: this.GET_ACTIVE_MEDIA_METADATA.ratingKey,
diff --git a/src/components/TheSettingsDialog.vue b/src/components/TheSettingsDialog.vue
new file mode 100644
index 00000000..df200ce4
--- /dev/null
+++ b/src/components/TheSettingsDialog.vue
@@ -0,0 +1,238 @@
+<template>
+  <v-dialog max-width="350">
+    <template #activator="stuff">
+      <slot v-bind="stuff" />
+    </template>
+
+    <v-card>
+      <v-card-title>SyncLounge Settings</v-card-title>
+
+      <v-list dense>
+        <v-list-item>
+          <v-slider
+            dense
+            label="Client Poll Interval"
+            :value="GET_CLIENTPOLLINTERVAL"
+            :min="100"
+            :max="10000"
+            :thumb-label="true"
+            @change="SET_CLIENTPOLLINTERVAL"
+          />
+
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-list-item-icon
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>info</v-icon>
+              </v-list-item-icon>
+            </template>
+
+            <span>
+              How often Plex clients are polled for new information
+            </span>
+          </v-tooltip>
+        </v-list-item>
+
+        <v-list-item>
+          <v-slider
+            label="Sync Flexibility"
+            :value="GET_SYNCFLEXIBILITY"
+            :min="0"
+            :max="10000"
+            :thumb-label="true"
+            @change="UPDATE_SYNC_FLEXIBILITY"
+          />
+
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-list-item-icon
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>info</v-icon>
+              </v-list-item-icon>
+            </template>
+
+            <span>
+              Max allowed distance from host
+            </span>
+          </v-tooltip>
+        </v-list-item>
+
+        <v-list-item>
+          <v-select
+            :value="GET_STREAMING_PROTOCOL"
+            :items="streamingProtocols"
+            :rules="[v => !!v || 'Item is required']"
+            label="Streaming Protocol"
+            required
+            @input="SET_STREAMING_PROTOCOL"
+          />
+        </v-list-item>
+
+        <v-list-item>
+          <v-select
+            :value="GET_SYNCMODE"
+            :items="syncMethods"
+            :rules="[v => !!v || 'Item is required']"
+            label="Syncing Method"
+            required
+            @input="SET_SYNCMODE"
+          />
+        </v-list-item>
+
+        <v-list-item>
+          <v-switch
+            label="Autoplay"
+            :input-value="GET_AUTOPLAY"
+            class="pa-0 ma-0"
+            @change="SET_AUTOPLAY"
+          />
+
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-list-item-icon
+                v-bind="attrs"
+                class="mt-0"
+                v-on="on"
+              >
+                <v-icon>info</v-icon>
+              </v-list-item-icon>
+            </template>
+
+            <span>
+              Automatically play the same content as the host
+            </span>
+          </v-tooltip>
+        </v-list-item>
+
+        <v-list-item>
+          <v-switch
+            label="Auto Skip Intro"
+            :input-value="GET_AUTO_SKIP_INTRO"
+            class="pa-0 ma-0"
+            @change="SET_AUTO_SKIP_INTRO"
+          />
+        </v-list-item>
+
+        <v-list-item>
+          <v-switch
+            label="Force Transcode"
+            :input-value="GET_SLPLAYERFORCETRANSCODE"
+            class="pa-0 ma-0"
+            @change="SET_SLPLAYERFORCETRANSCODE"
+          />
+        </v-list-item>
+
+        <v-subheader>Chat</v-subheader>
+
+        <v-list-item>
+          <v-switch
+            label="Desktop Notifications"
+            :input-value="ARE_NOTIFICATIONS_ENABLED && !isHttp"
+            :disabled="isHttp"
+            class="pa-0 ma-0"
+            @change="CHANGE_NOTIFICATIONS_ENABLED"
+          />
+
+          <v-tooltip
+            v-if="isHttp"
+            bottom
+          >
+            <template #activator="{ on, attrs }">
+              <v-list-item-icon
+                v-bind="attrs"
+                class="mt-0"
+                v-on="on"
+              >
+                <v-icon>info</v-icon>
+              </v-list-item-icon>
+            </template>
+
+            <span>
+              Popup notifications are only available in secure contexts (HTTPS)
+            </span>
+          </v-tooltip>
+        </v-list-item>
+
+        <v-list-item>
+          <v-switch
+            label="Sound Notifications"
+            :input-value="ARE_SOUND_NOTIFICATIONS_ENABLED"
+            class="pa-0 ma-0"
+            @change="SET_ARE_SOUND_NOTIFICATIONS_ENABLED"
+          />
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex';
+import { streamingProtocols } from '@/utils/streamingprotocols';
+
+export default {
+  name: 'TheSettingsDialog',
+
+  data() {
+    return {
+      syncMethods: [
+        { text: 'Clean Seek', value: 'cleanseek' },
+        { text: 'Skip Ahead', value: 'skipahead' },
+      ],
+
+      streamingProtocols,
+    };
+  },
+
+  computed: {
+    ...mapGetters('settings', [
+      'GET_AUTOPLAY',
+      'GET_SLPLAYERFORCETRANSCODE',
+      'GET_CLIENTPOLLINTERVAL',
+      'GET_SYNCFLEXIBILITY',
+      'GET_SYNCMODE',
+      'GET_AUTO_SKIP_INTRO',
+    ]),
+
+    ...mapGetters('slplayer', [
+      'GET_STREAMING_PROTOCOL',
+    ]),
+
+    ...mapGetters('synclounge', [
+      'ARE_NOTIFICATIONS_ENABLED',
+      'ARE_SOUND_NOTIFICATIONS_ENABLED',
+    ]),
+
+    isHttp() {
+      return window.location.protocol === 'http:';
+    },
+  },
+
+  methods: {
+    ...mapActions('synclounge', [
+      'UPDATE_SYNC_FLEXIBILITY',
+      'CHANGE_NOTIFICATIONS_ENABLED',
+    ]),
+
+    ...mapMutations('settings', [
+      'SET_AUTOPLAY',
+      'SET_SLPLAYERFORCETRANSCODE',
+      'SET_CLIENTPOLLINTERVAL',
+      'SET_SYNCMODE',
+      'SET_AUTO_SKIP_INTRO',
+    ]),
+
+    ...mapMutations('slplayer', [
+      'SET_STREAMING_PROTOCOL',
+    ]),
+
+    ...mapMutations('synclounge', [
+      'SET_ARE_SOUND_NOTIFICATIONS_ENABLED',
+    ]),
+  },
+};
+</script>
diff --git a/src/components/sidebars/leftsidebar.vue b/src/components/TheSidebarLeft.vue
similarity index 57%
rename from src/components/sidebars/leftsidebar.vue
rename to src/components/TheSidebarLeft.vue
index 488fbedf..d2183365 100644
--- a/src/components/sidebars/leftsidebar.vue
+++ b/src/components/TheSidebarLeft.vue
@@ -26,44 +26,61 @@
       nav
     >
       <v-subheader>Preferences</v-subheader>
-      <v-list-item @click.stop="ptsettingstoggle = !ptsettingstoggle">
-        <v-list-item-icon>
-          <v-icon color="white">
-            settings
-          </v-icon>
-        </v-list-item-icon>
 
-        <v-list-item-content>
-          <v-list-item-title>SyncLounge Settings</v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
+      <TheSettingsDialog #default="{ on, attrs }">
+        <v-list-item
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-list-item-icon>
+            <v-icon>settings</v-icon>
+          </v-list-item-icon>
 
-      <v-list-item
-        @click.stop="plexsettingstoggle = !plexsettingstoggle"
+          <v-list-item-content>
+            <v-list-item-title>SyncLounge Settings</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </TheSettingsDialog>
+
+      <v-list-group
+        no-action
+        prepend-icon="settings"
       >
-        <v-list-item-icon>
-          <v-icon color="white">
-            settings
-          </v-icon>
-        </v-list-item-icon>
+        <template v-slot:activator>
+          <v-list-item-content>
+            <v-list-item-title>Plex Settings</v-list-item-title>
+          </v-list-item-content>
+        </template>
+
+        <v-list-item class="pl-1">
+          <v-select
+            v-model="BLOCKEDSERVERS"
+            label="Blocked Servers"
+            :items="localServersList"
+            item-value="id"
+            item-text="name"
+            multiple
+          />
+        </v-list-item>
 
-        <v-list-item-content>
-          <v-list-item-title>Plex Settings</v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
+        <v-list-item class="pl-1">
+          <v-text-field
+            :value="GET_ALTUSERNAME"
+            :placeholder="GET_PLEX_USER.username"
+            label="Display name"
+            @change="SET_ALTUSERNAME"
+          />
+        </v-list-item>
+      </v-list-group>
 
-      <v-subheader>
-        Account
-      </v-subheader>
+      <v-subheader>Account</v-subheader>
 
       <v-list-item
         :router="true"
-        to="/signout"
+        :to="{name: 'SignOut'}"
       >
         <v-list-item-icon>
-          <v-icon color="white">
-            cancel
-          </v-icon>
+          <v-icon>cancel</v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>
@@ -78,13 +95,11 @@
         target="_blank"
       >
         <v-list-item-icon>
-          <v-icon color="white">
-            info
-          </v-icon>
+          <v-icon>info</v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>
-          <v-list-item-title>SyncLounge v{{ GET_VERSION }}</v-list-item-title>
+          <v-list-item-title>v{{ GET_VERSION }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
 
@@ -93,9 +108,7 @@
         target="_blank"
       >
         <v-list-item-icon>
-          <v-icon color="white">
-            chat
-          </v-icon>
+          <v-icon>chat</v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>
@@ -108,9 +121,7 @@
         target="_blank"
       >
         <v-list-item-icon>
-          <v-icon color="white">
-            code
-          </v-icon>
+          <v-icon>code</v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>
@@ -118,27 +129,23 @@
         </v-list-item-content>
       </v-list-item>
 
-      <donate v-slot="{ on, attrs }">
+      <DonateDialog #default="{ on, attrs }">
         <v-list-item
           v-bind="attrs"
           v-on="on"
         >
           <v-list-item-icon>
-            <v-icon color="white">
-              favorite
-            </v-icon>
+            <v-icon>favorite</v-icon>
           </v-list-item-icon>
 
           <v-list-item-content>
             <v-list-item-title>Donate</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-      </donate>
-
-      <v-spacer />
+      </DonateDialog>
     </v-list>
 
-    <template v-slot:append>
+    <template #append>
       <v-divider />
       <div
         class="text-center pa-2"
@@ -148,59 +155,19 @@
         <div>Last updated {{ updatedAt }}</div>
       </div>
     </template>
-
-    <v-dialog
-      v-model="ptsettingstoggle"
-      width="350"
-    >
-      <v-card
-        class="pa-3"
-      >
-        <div class="text-center">
-          <h2>SyncLounge Settings</h2>
-        </div>
-
-        <v-divider class="mt-2 mb-2" />
-        <settings class="darken-4 pa-1" />
-      </v-card>
-    </v-dialog>
-
-    <v-dialog
-      v-model="plexsettingstoggle"
-      width="350"
-    >
-      <v-card
-        class="pa-3"
-      >
-        <div class="text-center">
-          <h2>Plex Settings</h2>
-        </div>
-
-        <v-divider class="mt-2 mb-2" />
-        <plexsettings
-          class="darken-4 pa-1"
-        />
-      </v-card>
-    </v-dialog>
   </v-navigation-drawer>
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapGetters, mapMutations, mapState } from 'vuex';
 import { formatDistanceToNow } from 'date-fns';
 
 export default {
-  components: {
-    settings: () => import('@/components/settings.vue'),
-    plexsettings: () => import('@/components/plex/plexsettings.vue'),
-    donate: () => import('@/components/donate.vue'),
-  },
+  name: 'TheSidebarLeft',
 
-  data() {
-    return {
-      ptsettingstoggle: false,
-      plexsettingstoggle: false,
-    };
+  components: {
+    TheSettingsDialog: () => import('@/components/TheSettingsDialog.vue'),
+    DonateDialog: () => import('@/components/DonateDialog.vue'),
   },
 
   computed: {
@@ -219,6 +186,25 @@ export default {
       'GET_PLEX_USER',
     ]),
 
+    ...mapGetters('plexservers', [
+      'GET_PLEX_SERVERS',
+      'GET_BLOCKED_SERVER_IDS',
+    ]),
+
+    ...mapGetters('settings', [
+      'GET_ALTUSERNAME',
+    ]),
+
+    BLOCKEDSERVERS: {
+      get() {
+        return this.GET_BLOCKED_SERVER_IDS;
+      },
+
+      set(value) {
+        this.SET_BLOCKED_SERVER_IDS(value);
+      },
+    },
+
     date() {
       return new Date(parseInt(process.env.VUE_APP_GIT_DATE, 10) * 1000);
     },
@@ -226,10 +212,28 @@ export default {
     updatedAt() {
       return `${formatDistanceToNow(this.date)} ago`;
     },
+
+    localServersList() {
+      return this.GET_PLEX_SERVERS.map((server) => ({
+        name: server.name,
+        id: server.clientIdentifier,
+      }));
+    },
   },
 
   methods: {
-    ...mapActions(['SET_LEFT_SIDEBAR_OPEN']),
+    ...mapMutations([
+      'SET_LEFT_SIDEBAR_OPEN',
+    ]),
+
+    ...mapMutations('plexservers', [
+      'SET_BLOCKED_SERVER_IDS',
+    ]),
+
+    // TODO: potentially add system for announcing username changes
+    ...mapMutations('settings', [
+      'SET_ALTUSERNAME',
+    ]),
 
     getTimeFromMs(ms) {
       const hours = ms / (1000 * 60 * 60);
diff --git a/src/components/sidebars/rightsidebar.vue b/src/components/TheSidebarRight.vue
similarity index 90%
rename from src/components/sidebars/rightsidebar.vue
rename to src/components/TheSidebarRight.vue
index 2a899c72..5779fc5a 100644
--- a/src/components/sidebars/rightsidebar.vue
+++ b/src/components/TheSidebarRight.vue
@@ -8,7 +8,7 @@
     width="300"
     @input="SET_RIGHT_SIDEBAR_OPEN"
   >
-    <template v-slot:prepend>
+    <template #prepend>
       <v-list-item three-line>
         <v-list-item-content>
           <v-list-item-title>{{ GET_ROOM }}</v-list-item-title>
@@ -28,19 +28,14 @@
           </v-list-item-subtitle>
         </v-list-item-content>
 
-        <v-list-item-icon>
-          <chatsettings v-slot="{ on, attrs }">
-            <v-btn
-              icon
-              class="ma-0 pa-0"
-              dark
-              v-bind="attrs"
-              v-on="on"
-            >
-              <v-icon>more_vert</v-icon>
-            </v-btn>
-          </chatsettings>
-        </v-list-item-icon>
+        <v-list-item-action>
+          <v-btn
+            icon
+            @click="DISCONNECT_AND_NAVIGATE_HOME"
+          >
+            <v-icon>exit_to_app</v-icon>
+          </v-btn>
+        </v-list-item-action>
       </v-list-item>
 
       <v-list-item dense>
@@ -65,7 +60,7 @@
         v-if="AM_I_HOST"
         bottom
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template #activator="{ on, attrs }">
           <v-list-item
             dense
             v-bind="attrs"
@@ -92,7 +87,7 @@
           bottom
           color="rgb(44, 44, 49)"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               color="primary"
@@ -155,7 +150,7 @@
               multi-line
               class="userlist"
             >
-              <template v-slot:activator="{ on, attrs }">
+              <template #activator="{ on, attrs }">
                 <div
                   v-bind="attrs"
                   v-on="on"
@@ -211,7 +206,7 @@
               multi-line
               class="userlist"
             >
-              <template v-slot:activator="{ on, attrs }">
+              <template #activator="{ on, attrs }">
                 <v-icon
                   v-bind="attrs"
                   style="color: #e5a00d;"
@@ -232,7 +227,7 @@
               multi-line
               class="userlist"
             >
-              <template v-slot:activator="{ on, attrs }">
+              <template #activator="{ on, attrs }">
                 <v-icon
                   v-bind="attrs"
                   v-on="on"
@@ -250,28 +245,29 @@
 
       <v-divider />
 
-      <messages
-        class="messages"
-      />
+      <MessageList class="messages" />
     </div>
 
-    <template v-slot:append>
+    <template #append>
       <MessageInput />
     </template>
   </v-navigation-drawer>
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
+import {
+  mapActions, mapGetters, mapMutations, mapState,
+} from 'vuex';
 
 import contentTitle from '@/mixins/contentTitle';
 import { slPlayerClientId } from '@/player/constants';
 
 export default {
+  name: 'TheSidebarRight',
+
   components: {
-    messages: () => import('@/components/messaging/messages.vue'),
-    MessageInput: () => import('@/components/messaging/MessageInput.vue'),
-    chatsettings: () => import('@/components/chatsettings.vue'),
+    MessageList: () => import('@/components/MessageList.vue'),
+    MessageInput: () => import('@/components/MessageInput.vue'),
   },
 
   mixins: [
@@ -341,9 +337,10 @@ export default {
       'sendPartyPause',
       'TRANSFER_HOST',
       'KICK_USER',
+      'DISCONNECT_AND_NAVIGATE_HOME',
     ]),
 
-    ...mapActions([
+    ...mapMutations([
       'SET_RIGHT_SIDEBAR_OPEN',
     ]),
 
@@ -443,8 +440,4 @@ export default {
   font-size: 0.8em;
   color: rgba(255, 255, 255, 0.7);
 }
-
-.v-list__tile {
-  padding: 0;
-}
 </style>
diff --git a/src/components/upnext.vue b/src/components/TheUpnextDialog.vue
similarity index 99%
rename from src/components/upnext.vue
rename to src/components/TheUpnextDialog.vue
index cd3ac992..fdfc4b27 100644
--- a/src/components/upnext.vue
+++ b/src/components/TheUpnextDialog.vue
@@ -113,6 +113,8 @@ import { mapActions, mapGetters, mapMutations } from 'vuex';
 import contentTitle from '@/mixins/contentTitle';
 
 export default {
+  name: 'TheUpnextDialog',
+
   mixins: [contentTitle],
 
   data() {
diff --git a/src/components/chatsettings.vue b/src/components/chatsettings.vue
deleted file mode 100644
index eaac6ed2..00000000
--- a/src/components/chatsettings.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <v-menu
-    v-model="menu"
-    :close-on-content-click="false"
-    offset-x
-  >
-    <template v-slot:activator="stuff">
-      <slot
-        v-bind="stuff"
-      />
-    </template>
-
-    <v-card>
-      <v-list>
-        <v-list-item>
-          <v-list-item-action>
-            <v-switch
-              :input-value="ARE_NOTIFICATIONS_ENABLED && !isHttp"
-              :disabled="isHttp"
-              @change="CHANGE_NOTIFICATIONS_ENABLED"
-            />
-          </v-list-item-action>
-
-          <v-list-item-content>
-            <v-list-item-title>Popup notifications</v-list-item-title>
-
-            <v-list-item-subtitle v-if="isHttp">
-              Popup notifications are only available in secure contexts (HTTPS)
-            </v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-
-        <v-list-item>
-          <v-list-item-action>
-            <v-switch
-              :input-value="ARE_SOUND_NOTIFICATIONS_ENABLED"
-              @change="SET_ARE_SOUND_NOTIFICATIONS_ENABLED"
-            />
-          </v-list-item-action>
-
-          <v-list-item-content>
-            <v-list-item-title>Sound notifications</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-
-      <v-card-actions>
-        <v-spacer />
-
-        <v-btn
-          color="primary"
-          text
-          @click="DISCONNECT_AND_NAVIGATE_HOME"
-        >
-          Leave Room
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-menu>
-</template>
-
-<script>
-import { mapActions, mapGetters, mapMutations } from 'vuex';
-
-export default {
-  data: () => ({
-    menu: false,
-  }),
-
-  computed: {
-    ...mapGetters('synclounge', [
-      'ARE_NOTIFICATIONS_ENABLED',
-      'ARE_SOUND_NOTIFICATIONS_ENABLED',
-    ]),
-
-    isHttp() {
-      return window.location.protocol === 'http:';
-    },
-  },
-
-  methods: {
-    ...mapActions('synclounge', [
-      'CHANGE_NOTIFICATIONS_ENABLED',
-      'DISCONNECT_AND_NAVIGATE_HOME',
-    ]),
-
-    ...mapMutations('synclounge', [
-      'SET_ARE_SOUND_NOTIFICATIONS_ENABLED',
-    ]),
-  },
-};
-</script>
diff --git a/src/components/plex/plexsettings.vue b/src/components/plex/plexsettings.vue
deleted file mode 100644
index 31ebe92a..00000000
--- a/src/components/plex/plexsettings.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div>
-    <div class="pt-1 text-xs-left">
-      <h4 style="text-align: initial;">
-        Blocked Plex Servers
-      </h4>
-
-      <small>
-        Used for autoplay functionality.
-        Use this list to block SyncLounge from searching certain servers when attempting to
-        autoplay content.
-      </small>
-
-      <v-select
-        v-model="BLOCKEDSERVERS"
-        label="Select"
-        :items="localServersList"
-        item-value="id"
-        item-text="name"
-        multiple
-        hint="Blocked Servers"
-        persistent-hint
-      />
-    </div>
-
-    <v-divider />
-
-    <div class="pt-4 text-xs-left">
-      <h4 style="text-align: initial;">
-        Change display name
-      </h4>
-
-      <v-checkbox
-        v-model="HIDEUSERNAME"
-        label="Enabled"
-      />
-
-      <v-text-field
-        v-if="HIDEUSERNAME"
-        :value="GET_ALTUSERNAME"
-        label="Alternative username"
-        @change="SET_ALTUSERNAME"
-      />
-      <small>By default SyncLounge uses your Plex.tv username when you join a room.</small>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations } from 'vuex';
-
-export default {
-  name: 'Plexsettings',
-  computed: {
-    ...mapGetters('plexservers', [
-      'GET_PLEX_SERVERS',
-      'GET_BLOCKED_SERVER_IDS',
-    ]),
-
-    ...mapGetters('settings', [
-      'GET_HIDEUSERNAME',
-      'GET_ALTUSERNAME',
-    ]),
-
-    BLOCKEDSERVERS: {
-      get() {
-        return this.GET_BLOCKED_SERVER_IDS;
-      },
-
-      set(value) {
-        this.SET_BLOCKED_SERVER_IDS(value);
-      },
-    },
-
-    HIDEUSERNAME: {
-      get() {
-        return this.GET_HIDEUSERNAME;
-      },
-
-      set(value) {
-        this.SET_HIDEUSERNAME(value);
-      },
-    },
-
-    localServersList() {
-      return this.GET_PLEX_SERVERS.map((server) => ({
-        name: server.name,
-        id: server.clientIdentifier,
-      }));
-    },
-  },
-
-  methods: {
-    ...mapMutations('plexservers', [
-      'SET_BLOCKED_SERVER_IDS',
-    ]),
-
-    ...mapMutations('settings', [
-      'SET_HIDEUSERNAME',
-      'SET_ALTUSERNAME',
-    ]),
-  },
-};
-</script>
diff --git a/src/components/settings.vue b/src/components/settings.vue
deleted file mode 100644
index 1ed3cf56..00000000
--- a/src/components/settings.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <div>
-    <div style="text-align: center;">
-      <h4 style="text-align: initial;">
-        Plex Client Polling Interval
-      </h4>
-
-      <div> {{ GET_CLIENTPOLLINTERVAL }} </div>
-
-      <v-slider
-        class="pa-0 ma-0"
-        :value="GET_CLIENTPOLLINTERVAL"
-        :min="100"
-        :max="10000"
-        hint="Sets how frequently SyncLounge will poll plex clients for new information in
-        milliseconds.Default is 1000ms (1 second)"
-        persistent-hint
-        @change="SET_CLIENTPOLLINTERVAL"
-      />
-    </div>
-
-    <v-divider />
-
-    <div
-      style="text-align: center;"
-      class="pt-4"
-    >
-      <h4 style="text-align: initial;">
-        Sync Flexibility
-      </h4>
-
-      <div> {{ GET_SYNCFLEXIBILITY }} </div>
-
-      <v-slider
-        class="pa-0 ma-0"
-        :value="GET_SYNCFLEXIBILITY"
-        :min="0"
-        :max="10000"
-        hint="Sets the acceptable distance away from the host in milliseconds.
-        Default is 3000ms (3 seconds)."
-        persistent-hint
-        @change="UPDATE_SYNC_FLEXIBILITY"
-      />
-    </div>
-
-    <v-divider />
-
-    <div
-      style="text-align: center;"
-      class="pt-4"
-    >
-      <v-select
-        :value="GET_STREAMING_PROTOCOL"
-        :items="protocols"
-        :rules="[v => !!v || 'Item is required']"
-        label="Streaming Protocol"
-        required
-        @input="SET_STREAMING_PROTOCOL"
-      />
-    </div>
-
-    <div
-      style="text-align: center;"
-      class="pt-4"
-    >
-      <h4 style="text-align: initial;">
-        Syncing Method
-      </h4>
-
-      <v-radio-group v-model="syncmode">
-        <v-radio
-          label="Clean Seek"
-          class="pa-0 ma-0"
-          value="cleanseek"
-        />
-
-        <v-radio
-          label="Skip Ahead"
-          class="pa-0 ma-0"
-          value="skipahead"
-          persistent-hint
-          hint="Sets the syncing method used when we need to get back in line with the host."
-        />
-      </v-radio-group>
-    </div>
-
-    <div
-      style="text-align: center;"
-    >
-      <v-switch
-        label="Autoplay"
-        hint="If enabled SyncLounge will attempt to automatically play the
-         same content as the host."
-        :input-value="GET_AUTOPLAY"
-        @change="SET_AUTOPLAY"
-      />
-
-      <v-switch
-        label="Auto skip intro"
-        hint="Automatically skip intros"
-        :input-value="GET_AUTO_SKIP_INTRO"
-        @change="SET_AUTO_SKIP_INTRO"
-      />
-    </div>
-
-    <div
-      style="text-align: center;"
-      class="pt-4"
-    >
-      <h4 style="text-align: initial;">
-        SLPlayer Force Transcode
-      </h4>
-
-      <v-switch
-        label="Enabled"
-        :input-value="GET_SLPLAYERFORCETRANSCODE"
-        @change="SET_SLPLAYERFORCETRANSCODE"
-      />
-    </div>
-
-    <small>
-      WARNING: EXPERIMENTAL SETTING! DO NOT CHANGE IF YOU DO NOT UNDERSTAND THE RAMIFICATIONS.
-    </small>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters, mapMutations } from 'vuex';
-import { streamingProtocols } from '@/utils/streamingprotocols';
-
-export default {
-  name: 'Settings',
-  computed: {
-    ...mapGetters('settings', [
-      'GET_AUTOPLAY',
-      'GET_SLPLAYERFORCETRANSCODE',
-      'GET_CLIENTPOLLINTERVAL',
-      'GET_SYNCFLEXIBILITY',
-      'GET_SYNCMODE',
-      'GET_AUTO_SKIP_INTRO',
-    ]),
-
-    ...mapGetters('slplayer', [
-      'GET_STREAMING_PROTOCOL',
-    ]),
-
-    protocols() {
-      return streamingProtocols;
-    },
-
-    syncmode: {
-      get() {
-        return this.GET_SYNCMODE;
-      },
-
-      set(value) {
-        this.SET_SYNCMODE(value);
-      },
-    },
-  },
-
-  methods: {
-    ...mapActions('synclounge', [
-      'UPDATE_SYNC_FLEXIBILITY',
-    ]),
-
-    ...mapMutations('settings', [
-      'SET_AUTOPLAY',
-      'SET_SLPLAYERFORCETRANSCODE',
-      'SET_CLIENTPOLLINTERVAL',
-      'SET_SYNCMODE',
-      'SET_AUTO_SKIP_INTRO',
-    ]),
-
-    ...mapMutations('slplayer', [
-      'SET_STREAMING_PROTOCOL',
-    ]),
-  },
-};
-</script>
diff --git a/src/main.js b/src/main.js
index 185b2692..d9b3d1f0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,22 +28,22 @@ router.beforeEach(async (to, from, next) => {
     && to.matched.some((record) => record.meta.requiresPlexToken))) {
     if (to.matched.some((record) => record.meta.redirectAfterAuth)) {
       next({
-        name: 'Signin',
+        name: 'SignIn',
         query: {
           redirect: to.fullPath,
         },
       });
     } else {
-      next({ name: 'Signin' });
+      next({ name: 'SignIn' });
     }
   } else if (to.matched.some((record) => record.meta.requiresNoAuth)
     && store.getters['plex/GET_PLEX_AUTH_TOKEN']) {
-    next({ name: 'CreateRoom' });
+    next({ name: 'RoomCreation' });
   } else if (!store.getters['synclounge/IS_IN_ROOM']
     && to.matched.some((record) => record.meta.protected)) {
     // this route requires us to be in a room with a client selected
     // if not, redirect to the needed stage
-    next({ name: 'CreateRoom' });
+    next({ name: 'RoomCreation' });
   } else {
     next();
   }
diff --git a/src/mixins/redirection.js b/src/mixins/redirection.js
index 9207cfc7..1152c690 100644
--- a/src/mixins/redirection.js
+++ b/src/mixins/redirection.js
@@ -2,7 +2,7 @@ export default {
   methods: {
     redirectToMediaPage() {
       this.$router.push({
-        name: 'nowplaying',
+        name: 'NowPlaying',
         params: {
           machineIdentifier: this.$store.getters['plexclients/GET_ACTIVE_MEDIA_METADATA']
             .machineIdentifier,
diff --git a/src/router/index.js b/src/router/index.js
index d29494ed..ce7e2ee8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,16 +3,13 @@ import Router from 'vue-router';
 
 Vue.use(Router);
 
-// Good guide: https://blog.sqreen.com/authentication-best-practices-vue/
-
-// ==================== Router registration ====================
 export default new Router({
   mode: 'hash',
   routes: [
     {
       path: '/',
-      component: () => import('@/views/createroom.vue'),
-      name: 'CreateRoom',
+      name: 'RoomCreation',
+      component: () => import('@/views/RoomCreation.vue'),
       meta: {
         requiresAuth: true,
       },
@@ -20,16 +17,17 @@ export default new Router({
 
     {
       path: '/signin',
-      name: 'Signin',
+      name: 'SignIn',
+      component: () => import('@/views/SignIn.vue'),
       meta: {
         requiresNoAuth: true,
       },
-      component: () => import('@/views/signin.vue'),
     },
 
     {
       path: '/signout',
-      component: () => import('@/views/signout.vue'),
+      name: 'SignOut',
+      component: () => import('@/views/SignOut.vue'),
       meta: {
         requiresPlexToken: true,
       },
@@ -37,18 +35,19 @@ export default new Router({
 
     {
       path: '/join/:room/:server?',
+      name: 'RoomJoin',
+      component: () => import('@/views/RoomJoin.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         redirectAfterAuth: true,
       },
-      component: () => import('@/views/join.vue'),
-      props: true,
-      name: 'join',
     },
 
     {
       path: '/clientselect',
-      component: () => import('@/views/walkthrough.vue'),
+      name: 'AdvancedRoomWalkthrough',
+      component: () => import('@/views/AdvancedRoomWalkthrough.vue'),
       meta: {
         requiresAuth: true,
       },
@@ -56,7 +55,8 @@ export default new Router({
 
     {
       path: '/joinroom',
-      component: () => import('@/views/joinroom.vue'),
+      name: 'AdvancedRoomJoin',
+      component: () => import('@/views/AdvancedRoomJoin.vue'),
       meta: {
         requiresAuth: true,
       },
@@ -64,105 +64,105 @@ export default new Router({
 
     {
       path: '/player',
-      name: 'player',
+      name: 'WebPlayer',
+      component: () => import('@/views/WebPlayer.vue'),
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      component: () => import('@/views/slplayer.vue'),
     },
 
     {
       path: '/nowplaying/:machineIdentifier/:ratingKey',
+      name: 'NowPlaying',
+      component: () => import('@/views/PlexItem.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'nowplaying',
-      props: true,
-      component: () => import('@/views/plexbrowser/plexcontent.vue'),
     },
 
     {
       path: '/browse',
+      name: 'PlexHome',
+      component: () => import('@/views/PlexHome.vue'),
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'browse',
-      component: () => import('@/views/plexbrowser/plexbrowser.vue'),
     },
 
     {
       path: '/browse/:machineIdentifier',
+      name: 'PlexServer',
+      component: () => import('@/views/PlexServer.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'server',
-      props: true,
-      component: () => import('@/views/plexbrowser/plexserver.vue'),
     },
 
     {
       path: '/browse/:machineIdentifier/:sectionId',
-      meta: {
-        requiresAuth: true,
-        protected: true,
+      name: 'PlexLibrary',
+      components: {
+        default: () => import('@/views/PlexLibrary.vue'),
+        appBarView: () => import('@/components/LibraryViewButton.vue'),
       },
       props: {
         default: true,
       },
-      name: 'library',
-      components: {
-        default: () => import('@/views/plexbrowser/plexlibrary.vue'),
-        appBarView: () => import('@/components/libraryviewbutton.vue'),
+      meta: {
+        requiresAuth: true,
+        protected: true,
       },
     },
 
     {
       path: '/browse/:machineIdentifier/:sectionId/:ratingKey',
+      name: 'PlexMovie',
+      component: () => import('@/views/PlexItem.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'movie',
-      props: true,
-      component: () => import('@/views/plexbrowser/plexcontent.vue'),
     },
 
     {
       path: '/browse/:machineIdentifier/:sectionId/tv/:ratingKey',
+      name: 'PlexSeries',
+      component: () => import('@/views/PlexSeries.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'series',
-      props: true,
-      component: () => import('@/views/plexbrowser/plexseries.vue'),
     },
 
     {
       path: '/browse/:machineIdentifier/:sectionId/tv/:parentRatingKey/:ratingKey',
+      name: 'PlexSeason',
+      component: () => import('@/views/PlexSeason.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'season',
-      props: true,
-      component: () => import('@/views/plexbrowser/plexseason.vue'),
     },
 
     {
       path:
       '/browse/:machineIdentifier/:sectionId/tv/:grandparentRatingKey/:parentRatingKey/:ratingKey',
+      name: 'PlexEpisode',
+      component: () => import('@/views/PlexItem.vue'),
+      props: true,
       meta: {
         requiresAuth: true,
         protected: true,
       },
-      name: 'content',
-      props: true,
-      component: () => import('@/views/plexbrowser/plexcontent.vue'),
     },
   ],
 });
diff --git a/src/store/actions.js b/src/store/actions.js
index e0be466f..61856b96 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -11,18 +11,6 @@ export default {
     commit('synclounge/RESET');
   },
 
-  SET_LEFT_SIDEBAR_OPEN: ({ commit }, open) => {
-    commit('SET_LEFT_SIDEBAR_OPEN', open);
-  },
-
-  SET_RIGHT_SIDEBAR_OPEN: ({ commit }, open) => {
-    commit('SET_RIGHT_SIDEBAR_OPEN', open);
-  },
-
-  TOGGLE_RIGHT_SIDEBAR_OPEN: ({ commit }) => {
-    commit('TOGGLE_RIGHT_SIDEBAR_OPEN');
-  },
-
   DISPLAY_NOTIFICATION: ({ commit }, message) => {
     commit('SET_SNACKBAR_MESSAGE', message);
     commit('SET_SNACKBAR_OPEN', true);
diff --git a/src/store/modules/settings/getters.js b/src/store/modules/settings/getters.js
index 9fe5d6d7..5748c361 100644
--- a/src/store/modules/settings/getters.js
+++ b/src/store/modules/settings/getters.js
@@ -22,7 +22,6 @@ export default {
     .slPlayerForceTranscode
     ?? rootGetters.GET_CONFIG.default_slplayer_force_transcode,
 
-  GET_HIDEUSERNAME: (state) => state.hideUsername,
   GET_ALTUSERNAME: (state) => state.altUsername,
   GET_CUSTOM_SERVER_USER_INPUTTED_URL: (state) => state.customServerUserInputtedUrl,
 
diff --git a/src/store/modules/settings/mutations.js b/src/store/modules/settings/mutations.js
index 15870420..dd3fe1f5 100644
--- a/src/store/modules/settings/mutations.js
+++ b/src/store/modules/settings/mutations.js
@@ -20,9 +20,6 @@ export default {
   SET_SYNCMODE: (state, mode) => {
     state.syncMode = mode;
   },
-  SET_HIDEUSERNAME: (state, hide) => {
-    state.hideUsername = hide;
-  },
   SET_ALTUSERNAME: (state, alt) => {
     state.altUsername = alt;
   },
diff --git a/src/store/modules/settings/state.js b/src/store/modules/settings/state.js
index b52e4781..5d82e927 100644
--- a/src/store/modules/settings/state.js
+++ b/src/store/modules/settings/state.js
@@ -8,7 +8,6 @@ const state = () => ({
   slPlayerQuality: null,
   slPlayerVolume: null,
   slPlayerForceTranscode: null,
-  hideUsername: false,
   altUsername: null,
   autoSkipIntro: null,
 });
diff --git a/src/store/modules/synclounge/actions.js b/src/store/modules/synclounge/actions.js
index 02972f73..3256138f 100644
--- a/src/store/modules/synclounge/actions.js
+++ b/src/store/modules/synclounge/actions.js
@@ -669,14 +669,17 @@ export default {
     });
   },
 
-  UPDATE_SYNC_FLEXIBILITY: ({ getters, dispatch, commit }, syncFlexibility) => {
+  UPDATE_SYNC_FLEXIBILITY: async ({ getters, dispatch, commit }, syncFlexibility) => {
     commit('settings/SET_SYNCFLEXIBILITY', syncFlexibility, { root: true });
-    commit('SET_USER_SYNC_FLEXIBILITY', {
-      id: getters.GET_SOCKET_ID,
-      syncFlexibility,
-    });
 
-    return dispatch('SEND_SYNC_FLEXIBILITY_UPDATE');
+    if (getters.IS_IN_ROOM) {
+      commit('SET_USER_SYNC_FLEXIBILITY', {
+        id: getters.GET_SOCKET_ID,
+        syncFlexibility,
+      });
+
+      await dispatch('SEND_SYNC_FLEXIBILITY_UPDATE');
+    }
   },
 
   KICK_USER: (ctx, id) => {
diff --git a/src/store/modules/synclounge/getters.js b/src/store/modules/synclounge/getters.js
index 27000c17..e28afb86 100644
--- a/src/store/modules/synclounge/getters.js
+++ b/src/store/modules/synclounge/getters.js
@@ -56,10 +56,10 @@ export default {
       .reduce((prev, curr) => (curr[1] < prev[1] ? curr : prev))[0]
     : null),
 
-  GET_DISPLAY_USERNAME: (state, getters, rootState, rootGetters) => (
-    rootGetters['settings/GET_HIDEUSERNAME']
-      ? rootGetters['settings/GET_ALTUSERNAME']
-      : rootGetters['plex/GET_PLEX_USER'].username || rootGetters['plex/GET_PLEX_USER'].title),
+  GET_DISPLAY_USERNAME: (state, getters, rootState, rootGetters) => rootGetters[
+    'settings/GET_ALTUSERNAME']
+    || rootGetters['plex/GET_PLEX_USER'].username
+    || rootGetters['plex/GET_PLEX_USER'].title,
 
   GET_SERVER: (state) => state.server,
 
diff --git a/src/utils/contentlinks.js b/src/utils/contentlinks.js
index d96b7012..4f4b2a2c 100644
--- a/src/utils/contentlinks.js
+++ b/src/utils/contentlinks.js
@@ -2,7 +2,7 @@ const getContentLink = (metadata) => {
   switch (metadata.type) {
     case 'episode': {
       return {
-        name: 'content',
+        name: 'PlexEpisode',
         params: {
           machineIdentifier: metadata.machineIdentifier,
           sectionId: metadata.librarySectionID,
@@ -15,7 +15,7 @@ const getContentLink = (metadata) => {
 
     case 'season': {
       return {
-        name: 'season',
+        name: 'PlexSeason',
         params: {
           machineIdentifier: metadata.machineIdentifier,
           sectionId: metadata.librarySectionID,
@@ -28,7 +28,7 @@ const getContentLink = (metadata) => {
     case 'series':
     case 'show': {
       return {
-        name: 'series',
+        name: 'PlexSeries',
         params: {
           machineIdentifier: metadata.machineIdentifier,
           sectionId: metadata.librarySectionID,
@@ -41,7 +41,7 @@ const getContentLink = (metadata) => {
     case 'movie':
     default: {
       return {
-        name: 'movie',
+        name: 'PlexMovie',
         params: {
           machineIdentifier: metadata.machineIdentifier,
           sectionId: metadata.librarySectionID,
diff --git a/src/utils/mediasupport.js b/src/utils/mediasupport.js
index 45af9cb8..aa36c274 100644
--- a/src/utils/mediasupport.js
+++ b/src/utils/mediasupport.js
@@ -85,4 +85,4 @@ const supportedContainers = [
   'wav',
 ];
 
-export const isContainerSupported = (container) => supportedContainers.includes(container);
+export const isContainerSupported = ({ container }) => supportedContainers.includes(container);
diff --git a/src/views/joinroom.vue b/src/views/AdvancedRoomJoin.vue
similarity index 98%
rename from src/views/joinroom.vue
rename to src/views/AdvancedRoomJoin.vue
index 6ac72ea0..442b4302 100644
--- a/src/views/joinroom.vue
+++ b/src/views/AdvancedRoomJoin.vue
@@ -113,7 +113,7 @@
                   top
                   color="light-blue darken-4"
                 >
-                  <template v-slot:activator="{ on, attrs }">
+                  <template #activator="{ on, attrs }">
                     <v-icon
                       color="white"
                       v-bind="attrs"
@@ -186,7 +186,7 @@
                       >
                         Ping:
                         <span
-                          class="thick--text"
+                          class="font-weight-bold"
                           :class="connectionQualityClass(GET_SERVER_HEALTH(server.url).latency)"
                         >{{ GET_SERVER_HEALTH(server.url).latency }}ms</span>
                       </v-col>
@@ -198,7 +198,7 @@
                         <div>
                           Load:
                           <span
-                            class="thick--text"
+                            class="font-weight-bold"
                             :class="loadQualityClass(GET_SERVER_HEALTH(server.url).load)"
                           >{{ GET_SERVER_HEALTH(server.url).load }}</span>
                         </div>
@@ -418,6 +418,8 @@ import { formatDistanceToNow } from 'date-fns';
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 
 export default {
+  name: 'AdvancedRoomJoin',
+
   data() {
     return {
       selectedServer: null,
@@ -455,7 +457,7 @@ export default {
     IS_IN_ROOM: {
       handler(inRoom) {
         if (inRoom) {
-          this.$router.push({ name: 'browse' });
+          this.$router.push({ name: 'PlexHome' });
         }
       },
 
diff --git a/src/views/walkthrough.vue b/src/views/AdvancedRoomWalkthrough.vue
similarity index 95%
rename from src/views/walkthrough.vue
rename to src/views/AdvancedRoomWalkthrough.vue
index ecaacb5a..17e19709 100644
--- a/src/views/walkthrough.vue
+++ b/src/views/AdvancedRoomWalkthrough.vue
@@ -104,12 +104,11 @@
               <v-list-item-group
                 v-model="previewClientId"
               >
-                <plexclient
+                <PlexClient
                   v-for="id in GET_PLEX_CLIENT_IDS_SORTED_BY_LAST_SEEN"
                   :key="id"
                   :value="id"
                   :client-id="id"
-                  style="cursor: pointer;"
                 />
               </v-list-item-group>
             </v-list>
@@ -219,7 +218,7 @@
                   >
                     Note: Plex for Android applications may not work properly. See "What clients are
                     supported?" in the
-                    <a href="http://docs.synclounge.tv/faq/">FAQ</a> for more details.
+                    <a href="https://docs.synclounge.tv/faq/">FAQ</a> for more details.
                   </div>
 
                   <div
@@ -228,7 +227,7 @@
                   >
                     Note: Plex Desktop applications may not work properly. See "What clients are
                     supported?" in the
-                    <a href="http://docs.synclounge.tv/faq/">FAQ</a> for more details.
+                    <a href="https://docs.synclounge.tv/faq/">FAQ</a> for more details.
                   </div>
 
                   <div
@@ -238,7 +237,7 @@
                     Note: You may not be able to connect to external Plex Clients while loading the
                     page via HTTPS. Click
                     <a :href="nohttpslink">here</a> to load the page via HTTP. See "My client isn't
-                    working!" in the <a href="http://docs.synclounge.tv/faq/">FAQ</a> for more
+                    working!" in the <a href="https://docs.synclounge.tv/faq/">FAQ</a> for more
                     details.
                   </div>
                 </v-col>
@@ -261,12 +260,11 @@
               <v-list-item-group
                 v-model="previewClientId"
               >
-                <plexclient
+                <PlexClient
                   v-for="id in GET_PLEX_CLIENT_IDS_SORTED_BY_LAST_SEEN"
                   :key="id"
                   :value="id"
                   :client-id="id"
-                  style="cursor: pointer;"
                 />
               </v-list-item-group>
             </v-list>
@@ -284,10 +282,10 @@ import plexPlatformMap from '@/utils/plexplatformmap';
 import { slPlayerClientId } from '@/player/constants';
 
 export default {
-  name: 'Walkthrough',
+  name: 'AdvancedRoomWalkthrough',
 
   components: {
-    plexclient: () => import('@/components/plex/plexclient.vue'),
+    PlexClient: () => import('@/components/PlexClient.vue'),
   },
 
   data() {
@@ -413,7 +411,7 @@ export default {
 
     async chooseClient() {
       this.SET_CHOSEN_CLIENT_ID(this.previewClientId);
-      this.$router.push('/joinroom');
+      this.$router.push({ name: 'AdvancedRoomJoin' });
     },
 
     lastSeenAgo(clientTime) {
diff --git a/src/views/plexbrowser/plexbrowser.vue b/src/views/PlexHome.vue
similarity index 80%
rename from src/views/plexbrowser/plexbrowser.vue
rename to src/views/PlexHome.vue
index d8c98544..35252268 100644
--- a/src/views/plexbrowser/plexbrowser.vue
+++ b/src/views/PlexHome.vue
@@ -66,7 +66,7 @@
           md="2"
           xl="1"
         >
-          <plexthumb
+          <PlexThumbnail
             :content="movie"
             :machine-identifier="movie.machineIdentifier"
             show-server
@@ -96,7 +96,7 @@
           md="2"
           xl="1"
         >
-          <plexthumb
+          <PlexThumbnail
             :content="show"
             :machine-identifier="show.machineIdentifier"
             show-server
@@ -126,7 +126,7 @@
           md="3"
           xl="2"
         >
-          <plexthumb
+          <PlexThumbnail
             :content="episode"
             :machine-identifier="episode.machineIdentifier"
             show-server
@@ -145,9 +145,7 @@
     <template
       v-if="GET_LAST_SERVER && searchResults.length == 0 && subsetOnDeck.length > 0"
     >
-      <v-row
-        no-gutters
-      >
+      <v-row no-gutters>
         <v-col>
           <v-subheader>
             Continue watching from {{ GET_LAST_SERVER.name }}
@@ -158,21 +156,21 @@
           cols="auto"
           class="ml-auto"
         >
-          <v-icon
-            style="cursor: pointer;"
+          <v-btn
+            icon
             :style="onDeckDownStyle"
             @click="onDeckDown"
           >
-            navigate_before
-          </v-icon>
+            <v-icon>navigate_before</v-icon>
+          </v-btn>
 
-          <v-icon
+          <v-btn
+            icon
             :style="onDeckUpStyle"
-            style="cursor: pointer;"
             @click="onDeckUp"
           >
-            navigate_next
-          </v-icon>
+            <v-icon>navigate_next</v-icon>
+          </v-btn>
         </v-col>
       </v-row>
 
@@ -187,7 +185,7 @@
           md="3"
           xl="2"
         >
-          <plexthumb
+          <PlexThumbnail
             :content="content"
             :machine-identifier="GET_LAST_SERVER_ID"
             type="art"
@@ -208,13 +206,13 @@
     >
       <v-subheader>
         Browse
-        <v-icon
-          class="pl-2"
-          small
+        <v-btn
+          x-small
+          icon
           @click="FETCH_PLEX_DEVICES"
         >
-          refresh
-        </v-icon>
+          <v-icon>refresh</v-icon>
+        </v-btn>
       </v-subheader>
 
       <v-row>
@@ -236,64 +234,61 @@
           lg="4"
           xl="3"
         >
-          <router-link
-            :to="{ name: 'server', params: { machineIdentifier: server.clientIdentifier }}"
+          <v-card
+            :to="{ name: 'PlexServer', params: { machineIdentifier: server.clientIdentifier }}"
+            class="white--text"
+            horizontal
+            height="10em"
+            style="z-index: 0; background: rgba(0, 0, 0, 0.4);"
+            :title="server.name"
           >
-            <v-card
-              class="white--text"
-              horizontal
-              height="10em"
-              style="cursor: pointer; z-index: 0; background: rgba(0, 0, 0, 0.4);"
-              :title="server.name"
-            >
-              <v-container fill-height>
-                <v-row
-                  justify="center"
-                  align="center"
+            <v-container fill-height>
+              <v-row
+                justify="center"
+                align="center"
+              >
+                <v-col cols="4">
+                  <v-img
+                    src="@/assets/images/logos/plexlogo.png"
+                    height="110px"
+                    contain
+                  />
+                </v-col>
+
+                <v-col
+                  cols="8"
+                  class="pl-2"
                 >
-                  <v-col cols="4">
-                    <v-img
-                      src="@/assets/images/logos/plexlogo.png"
-                      height="110px"
-                      contain
-                    />
-                  </v-col>
-
-                  <v-col
-                    cols="8"
-                    class="pl-2"
-                  >
-                    <div>
-                      <h1 style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
-                        {{ server.name }}
-                      </h1>
-
-                      <h4 style="opacity: 0.9;">
-                        v{{ server.productVersion }}
-                      </h4>
-
-                      <div>Owned by {{ ownerOfServer(server) }}</div>
-
-                      <div
-                        v-if="!server.chosenConnection"
-                        class="red--text"
-                      >
-                        Unable to connect
-                      </div>
-
-                      <div
-                        v-if="!server.chosenConnection"
-                        class="red--text"
-                        style="font-size: 10px;"
-                      >
-                        Try disabling your adblocker
-                      </div>
+                  <div>
+                    <h1 style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
+                      {{ server.name }}
+                    </h1>
+
+                    <h4 style="opacity: 0.9;">
+                      v{{ server.productVersion }}
+                    </h4>
+
+                    <div>Owned by {{ ownerOfServer(server) }}</div>
+
+                    <div
+                      v-if="!server.chosenConnection"
+                      class="red--text"
+                    >
+                      Unable to connect
+                    </div>
+
+                    <div
+                      v-if="!server.chosenConnection"
+                      class="red--text"
+                      style="font-size: 10px;"
+                    >
+                      Try disabling your adblocker
                     </div>
-                  </v-col>
-                </v-row>
-              </v-container>
-            </v-card>
-          </router-link>
+                  </div>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-card>
         </v-col>
       </v-row>
     </template>
@@ -305,9 +300,9 @@ import { mapActions, mapGetters, mapMutations } from 'vuex';
 import { debounce } from '@/utils/lightlodash';
 
 export default {
-  name: 'Plexbrowser',
+  name: 'PlexHome',
   components: {
-    plexthumb: () => import('@/components/plex/plexthumb.vue'),
+    PlexThumbnail: () => import('@/components/PlexThumbnail.vue'),
   },
 
   data() {
diff --git a/src/views/plexbrowser/plexcontent.vue b/src/views/PlexItem.vue
similarity index 98%
rename from src/views/plexbrowser/plexcontent.vue
rename to src/views/PlexItem.vue
index a1926432..2060dc3e 100644
--- a/src/views/plexbrowser/plexcontent.vue
+++ b/src/views/PlexItem.vue
@@ -124,7 +124,7 @@
                   class="ml-auto"
                 >
                   <v-menu>
-                    <template v-slot:activator="{ on, attrs }">
+                    <template #activator="{ on, attrs }">
                       <v-btn
                         icon
                         class="ma-0 pa-0"
@@ -397,7 +397,7 @@
               md="3"
               xl="2"
             >
-              <plexthumb
+              <PlexThumbnail
                 bottom-only
                 :content="ep"
                 type="thumb"
@@ -427,7 +427,7 @@
               md="2"
               xl="1"
             >
-              <plexthumb
+              <PlexThumbnail
                 :content="movie"
                 :machine-identifier="machineIdentifier"
                 type="thumb"
@@ -473,7 +473,7 @@
                 {{ media.videoResolution }}p {{ getDuration(media.duration) }}
               </div>
 
-              <div class="pl-4 soft-text">
+              <div class="pl-4 text--secondary">
                 <div>Video Codec: {{ media.videoCodec }} ({{ media.bitrate }}kbps)</div>
                 <div>Audio Streams: {{ audioStreams(media.Part[0].Stream) }}</div>
                 <div>Subtitles: {{ subtitleStreams(media.Part[0].Stream) }}</div>
@@ -501,8 +501,10 @@ import customFormatDuration from '@/utils/customformatduration';
 import { getAppWidth, getAppHeight } from '@/utils/sizing';
 
 export default {
+  name: 'PlexItem',
+
   components: {
-    plexthumb: () => import('@/components/plex/plexthumb.vue'),
+    PlexThumbnail: () => import('@/components/PlexThumbnail.vue'),
   },
 
   props: {
@@ -563,7 +565,7 @@ export default {
     },
 
     playable() {
-      return this.$route.fullPath.indexOf('/nowplaying') === -1;
+      return this.$route.name !== 'NowPlaying';
     },
 
     getArtUrl() {
diff --git a/src/views/plexbrowser/plexlibrary.vue b/src/views/PlexLibrary.vue
similarity index 98%
rename from src/views/plexbrowser/plexlibrary.vue
rename to src/views/PlexLibrary.vue
index 44fe1515..02566b77 100644
--- a/src/views/plexbrowser/plexlibrary.vue
+++ b/src/views/PlexLibrary.vue
@@ -59,7 +59,7 @@
         md="2"
         xl="1"
       >
-        <plexthumb
+        <PlexThumbnail
           :content="content"
           :machine-identifier="machineIdentifier"
           type="thumb"
@@ -98,8 +98,10 @@ import { intervalToDuration } from 'date-fns';
 import getContentLink from '@/utils/contentlinks';
 
 export default {
+  name: 'PlexLibrary',
+
   components: {
-    plexthumb: () => import('@/components/plex/plexthumb.vue'),
+    PlexThumbnail: () => import('@/components/PlexThumbnail.vue'),
   },
 
   props: {
diff --git a/src/views/plexbrowser/plexseason.vue b/src/views/PlexSeason.vue
similarity index 97%
rename from src/views/plexbrowser/plexseason.vue
rename to src/views/PlexSeason.vue
index 18ca822e..f9b909ec 100644
--- a/src/views/plexbrowser/plexseason.vue
+++ b/src/views/PlexSeason.vue
@@ -96,7 +96,7 @@
         md="3"
         xl="2"
       >
-        <plexthumb
+        <PlexThumbnail
           :content="content"
           :machine-identifier="machineIdentifier"
           full-title
@@ -116,8 +116,10 @@ import { mapActions, mapGetters, mapMutations } from 'vuex';
 import { getAppWidth, getAppHeight } from '@/utils/sizing';
 
 export default {
+  name: 'PlexSeason',
+
   components: {
-    plexthumb: () => import('@/components/plex/plexthumb.vue'),
+    PlexThumbnail: () => import('@/components/PlexThumbnail.vue'),
   },
 
   props: {
diff --git a/src/views/plexbrowser/plexseries.vue b/src/views/PlexSeries.vue
similarity index 98%
rename from src/views/plexbrowser/plexseries.vue
rename to src/views/PlexSeries.vue
index aa3df5fb..57484f52 100644
--- a/src/views/plexbrowser/plexseries.vue
+++ b/src/views/PlexSeries.vue
@@ -118,7 +118,7 @@
         md="2"
         xl="1"
       >
-        <plexthumb
+        <PlexThumbnail
           :content="content"
           :machine-identifier="machineIdentifier"
           type="thumb"
@@ -137,8 +137,10 @@ import { mapActions, mapGetters, mapMutations } from 'vuex';
 import { getAppWidth, getAppHeight } from '@/utils/sizing';
 
 export default {
+  name: 'PlexSeries',
+
   components: {
-    plexthumb: () => import('@/components/plex/plexthumb.vue'),
+    PlexThumbnail: () => import('@/components/PlexThumbnail.vue'),
   },
 
   props: {
diff --git a/src/views/plexbrowser/plexserver.vue b/src/views/PlexServer.vue
similarity index 92%
rename from src/views/plexbrowser/plexserver.vue
rename to src/views/PlexServer.vue
index c4925b46..9145e755 100644
--- a/src/views/plexbrowser/plexserver.vue
+++ b/src/views/PlexServer.vue
@@ -20,12 +20,12 @@
           bottom
           nudge-top="10"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <v-card
               :img="getArtLibrary(library)"
               v-bind="attrs"
               flat
-              :to="{ name: 'library', params: {
+              :to="{ name: 'PlexLibrary', params: {
                 machineIdentifier: machineIdentifier,
                 sectionId: library.key,
               }}"
@@ -71,21 +71,21 @@
           cols="auto"
           class="ml-auto"
         >
-          <v-icon
-            style="cursor: pointer;"
+          <v-btn
+            icon
             :style="onDeckDownStyle"
             @click="onDeckDown"
           >
-            navigate_before
-          </v-icon>
+            <v-icon>navigate_before</v-icon>
+          </v-btn>
 
-          <v-icon
+          <v-btn
+            icon
             :style="onDeckUpStyle"
-            style="cursor: pointer;"
             @click="onDeckUp"
           >
-            navigate_next
-          </v-icon>
+            <v-icon>navigate_next</v-icon>
+          </v-btn>
         </v-col>
       </v-row>
 
@@ -98,7 +98,7 @@
           md="3"
           xl="2"
         >
-          <plexthumb
+          <PlexThumbnail
             :content="content"
             :machine-identifier="machineIdentifier"
             type="art"
@@ -131,21 +131,21 @@
           cols="auto"
           class="ml-auto"
         >
-          <v-icon
-            style="cursor: pointer;"
+          <v-btn
+            icon
             :style="recentlyAddedDownStyle"
             @click="recentlyAddedDown"
           >
-            navigate_before
-          </v-icon>
+            <v-icon>navigate_before</v-icon>
+          </v-btn>
 
-          <v-icon
+          <v-btn
+            icon
             :style="recentlyAddedUpStyle"
-            style="cursor: pointer;"
             @click="recentlyAddedUp"
           >
-            navigate_next
-          </v-icon>
+            <v-icon>navigate_next</v-icon>
+          </v-btn>
         </v-col>
       </v-row>
 
@@ -158,7 +158,7 @@
           md="2"
           xl="1"
         >
-          <plexthumb
+          <PlexThumbnail
             :content="content"
             :machine-identifier="machineIdentifier"
             full-title
@@ -179,8 +179,10 @@ import { mapActions, mapGetters, mapMutations } from 'vuex';
 import { getAppWidth, getAppHeight } from '@/utils/sizing';
 
 export default {
+  name: 'PlexServer',
+
   components: {
-    plexthumb: () => import('@/components/plex/plexthumb.vue'),
+    PlexThumbnail: () => import('@/components/PlexThumbnail.vue'),
   },
 
   props: {
diff --git a/src/views/createroom.vue b/src/views/RoomCreation.vue
similarity index 93%
rename from src/views/createroom.vue
rename to src/views/RoomCreation.vue
index 2c3ae1e8..5d813cf1 100644
--- a/src/views/createroom.vue
+++ b/src/views/RoomCreation.vue
@@ -55,7 +55,7 @@
               </v-expansion-panel-header>
 
               <v-expansion-panel-content>
-                <clientpicker
+                <PlexClientPicker
                   @loadingChange="loading = $event"
                   @clientConnectableChange="clientConnectable = $event"
                 />
@@ -96,7 +96,7 @@
 
             <v-spacer />
 
-            <v-btn to="/clientselect">
+            <v-btn :to="{name: 'AdvancedRoomWalkthrough'}">
               Advanced
             </v-btn>
           </v-card-actions>
@@ -114,8 +114,10 @@ import JoinError from '@/utils/joinerror';
 import { v4 as uuidv4 } from 'uuid';
 
 export default {
+  name: 'RoomCreation',
+
   components: {
-    clientpicker: () => import('@/components/plex/clientpicker.vue'),
+    PlexClientPicker: () => import('@/components/PlexClientPicker.vue'),
   },
 
   mixins: [
@@ -157,7 +159,7 @@ export default {
 
     if (this.GET_CONFIG.autojoin) {
       this.$router.push({
-        name: 'join',
+        name: 'RoomJoin',
         params: this.GET_CONFIG.autojoin,
       });
     } else {
@@ -192,9 +194,9 @@ export default {
           password: this.roomPassword,
         });
 
-        if (this.$route.name === 'CreateRoom') {
+        if (this.$route.name === 'RoomCreation') {
           if (this.GET_CHOSEN_CLIENT_ID === slPlayerClientId || !this.GET_ACTIVE_MEDIA_METADATA) {
-            this.$router.push({ name: 'browse' });
+            this.$router.push({ name: 'PlexHome' });
           } else {
             this.redirectToMediaPage();
           }
@@ -207,6 +209,7 @@ export default {
           this.error = 'Room already in use';
         } else {
           this.error = e.message;
+          await this.fetchServersHealth();
         }
       }
 
diff --git a/src/views/join.vue b/src/views/RoomJoin.vue
similarity index 94%
rename from src/views/join.vue
rename to src/views/RoomJoin.vue
index e7948f0c..6f119f45 100644
--- a/src/views/join.vue
+++ b/src/views/RoomJoin.vue
@@ -36,7 +36,7 @@
               </v-expansion-panel-header>
 
               <v-expansion-panel-content>
-                <clientpicker
+                <PlexClientPicker
                   @loadingChange="loading = $event"
                   @clientConnectableChange="clientConnectable = $event"
                 />
@@ -91,8 +91,10 @@ import { slPlayerClientId } from '@/player/constants';
 import JoinError from '@/utils/joinerror';
 
 export default {
+  name: 'RoomJoin',
+
   components: {
-    clientpicker: () => import('@/components/plex/clientpicker.vue'),
+    PlexClientPicker: () => import('@/components/PlexClientPicker.vue'),
   },
 
   mixins: [
@@ -158,9 +160,9 @@ export default {
           password: this.password,
         });
 
-        if (this.$route.name === 'join') {
+        if (this.$route.name === 'RoomJoin') {
           if (this.GET_CHOSEN_CLIENT_ID === slPlayerClientId || !this.GET_ACTIVE_MEDIA_METADATA) {
-            this.$router.push({ name: 'browse' });
+            this.$router.push({ name: 'PlexHome' });
           } else {
             this.redirectToMediaPage();
           }
diff --git a/src/views/signin.vue b/src/views/SignIn.vue
similarity index 99%
rename from src/views/signin.vue
rename to src/views/SignIn.vue
index e0af73ab..9973bf68 100644
--- a/src/views/signin.vue
+++ b/src/views/SignIn.vue
@@ -50,6 +50,8 @@ import CAF from 'caf';
 import getCookie from '@/utils/getcookie';
 
 export default {
+  name: 'SignIn',
+
   data() {
     return {
       loading: false,
diff --git a/src/views/signout.vue b/src/views/SignOut.vue
similarity index 86%
rename from src/views/signout.vue
rename to src/views/SignOut.vue
index c643e5a0..f60245bc 100644
--- a/src/views/signout.vue
+++ b/src/views/SignOut.vue
@@ -5,7 +5,7 @@
       md="8"
       class="offset-md-2"
     >
-      <h1 class="white--text center-text pa-4">
+      <h1 class="white--text text-center pa-4">
         Successfully signed out
       </h1>
     </v-col>
@@ -16,7 +16,7 @@
 import { mapActions } from 'vuex';
 
 export default {
-  name: 'Signout',
+  name: 'SignOut',
 
   async created() {
     await this.RESET();
diff --git a/src/views/slplayer.vue b/src/views/WebPlayer.vue
similarity index 97%
rename from src/views/slplayer.vue
rename to src/views/WebPlayer.vue
index 5c39e261..4cf9f860 100644
--- a/src/views/slplayer.vue
+++ b/src/views/WebPlayer.vue
@@ -14,8 +14,8 @@
           autoplay
           preload="auto"
           playsinline="true"
+          class="black"
 
-          style="background-color: transparent !important;"
           @pause="HANDLE_PLAYER_PAUSE"
           @ended="PRESS_STOP"
           @playing="HANDLE_PLAYER_PLAYING"
@@ -95,7 +95,7 @@
       <div
         v-if="$vuetify.breakpoint.mdAndDown"
       >
-        <messages class="messages-wrapper" />
+        <MessageList class="messages-wrapper" />
         <MessageInput />
       </div>
 
@@ -175,9 +175,11 @@ import 'shaka-player/dist/controls.css';
 import 'libjass/libjass.css';
 
 export default {
+  name: 'WebPlayer',
+
   components: {
-    messages: () => import('@/components/messaging/messages.vue'),
-    MessageInput: () => import('@/components/messaging/MessageInput.vue'),
+    MessageList: () => import('@/components/MessageList.vue'),
+    MessageInput: () => import('@/components/MessageInput.vue'),
   },
 
   data() {
@@ -240,7 +242,7 @@ export default {
   watch: {
     GET_PLAYER_STATE(state) {
       if (state === 'stopped') {
-        this.$router.push({ name: 'browse' });
+        this.$router.push({ name: 'PlexHome' });
       }
     },