diff --git a/src/index.ejs b/src/index.ejs
index 02837388..399650ac 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -15,7 +15,7 @@
     <% } %>
   </head>
 
-  <body class="redLight">
+  <body class="light mainRed secBlue">
     <div id="app"></div>
     <!-- Set `__static` path to static files in production -->
     <script>
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 744640b5..34e5dabe 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -18,13 +18,30 @@ export default Vue.extend({
   mounted: function () {
     this.$store.dispatch('grabUserSettings')
 
-    const theme = localStorage.getItem('theme')
-    console.log(theme)
+    let baseTheme = localStorage.getItem('baseTheme')
+    let mainColor = localStorage.getItem('mainColor')
+    let secColor = localStorage.getItem('secColor')
 
-    if (theme !== null) {
-      this.updateTheme(theme)
+    if (baseTheme === null) {
+      baseTheme = 'light'
     }
 
+    if (mainColor === null) {
+      mainColor = 'mainRed'
+    }
+
+    if (secColor === null) {
+      secColor = 'secBlue'
+    }
+
+    const theme = {
+      baseTheme: baseTheme,
+      mainColor: mainColor,
+      secColor: secColor
+    }
+
+    this.updateTheme(theme)
+
     // Open links externally by default
     $(document).on('click', 'a[href^="http"]', (event) => {
       const el = event.currentTarget
@@ -38,9 +55,12 @@ export default Vue.extend({
   methods: {
     updateTheme: function (theme) {
       console.log(theme)
+      const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
       const body = document.getElementsByTagName('body')[0]
-      body.className = theme
-      localStorage.setItem('theme', theme)
+      body.className = className
+      localStorage.setItem('baseTheme', theme.baseTheme)
+      localStorage.setItem('mainColor', theme.mainColor)
+      localStorage.setItem('secColor', theme.secColor)
     }
   }
 })
diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js
index 8a30254c..7c70ddb3 100644
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/src/renderer/components/ft-button/ft-button.js
@@ -19,11 +19,11 @@ export default Vue.extend({
     },
     textColor: {
       type: String,
-      default: '#FFFFFF'
+      default: 'var(--text-with-accent-color)'
     },
     backgroundColor: {
       type: String,
-      default: '#2196F3'
+      default: 'var(--accent-color)'
     }
   }
 })
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index e4ae8b0d..12a26bde 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -22,6 +22,15 @@
   color: var(--teritary-text-color);
 }
 
+.search .ft-input {
+  color: var(--text-with-main-color);
+  border-bottom: 1px solid var(--text-with-main-color);
+}
+
+.search ::-webkit-input-placeholder {
+  color: var(--text-with-main-color);
+}
+
 .inputAction {
   position: absolute;
   padding: 10px;
@@ -32,6 +41,10 @@
   color: var(--primary-text-color);
 }
 
+.search .inputAction {
+  color: var(--text-with-main-color)
+}
+
 .inputAction:hover {
   background-color: var(--side-nav-hover-color);
   -moz-transition: background 0.2s ease-in;
@@ -39,9 +52,17 @@
   transition: background 0.2s ease-in;
 }
 
+.search .inputAction:hover {
+  background-color: var(--primary-color-hover);
+}
+
 .inputAction:active {
   background-color: var(--teritary-text-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
+
+.search .inputAction:active {
+  background-color: var(--primary-color-active);
+}
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 8b1de04b..86d7a1be 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -10,13 +10,25 @@ export default Vue.extend({
     showArrow: {
       type: Boolean,
       default: true
+    },
+    isSearch: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
     return {
       id: '',
-      inputData: '',
-      component: this
+      inputData: ''
+    }
+  },
+  computed: {
+    barColor: function () {
+      return this.$store.getters.getBarColor
+    },
+
+    forceTextColor: function () {
+      return this.isSearch && this.barColor
     }
   },
   mounted: function () {
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 3b9b0198..35923551 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="ft-input-component">
+  <div
+    class="ft-input-component"
+    :class="{ search: forceTextColor }"
+  >
     <input
       :id="id"
       v-model="inputData"
@@ -11,7 +14,7 @@
       v-if="showArrow"
       icon="arrow-right"
       class="inputAction"
-      @click="handleClick(inputData, component)"
+      @click="handleClick"
     />
   </div>
 </template>
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 22722fcd..4946f86b 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -40,6 +40,10 @@
 	border: none;
 }
 
+.select option {
+	color: #000000;
+}
+
 /* Remove focus */
 .select-text:focus {
 	outline: none;
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 933590aa..7613e52b 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -1,8 +1,8 @@
 .pure-material-slider {
-    --pure-material-safari-helper1: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
-    --pure-material-safari-helper2: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
-    --pure-material-safari-helper3: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
-    --pure-material-safari-helper4: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    --pure-material-safari-helper1: var(--accent-color-opacity1);
+    --pure-material-safari-helper2: var(--accent-color-opacity2);
+    --pure-material-safari-helper3: var(--accent-color-opacity3);
+    --pure-material-safari-helper4: var(--accent-color-opacity4);
     display: inline-block;
     width: 220px;
     color: rgba(var(--primary-text-color), 0.87);
@@ -58,7 +58,7 @@
     border-radius: 1px;
     width: 100%;
     height: 2px;
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    background-color: var(--accent-color-opacity4);
 }
 
 /* Webkit | Thumb */
@@ -69,7 +69,7 @@
     border-radius: 50%;
     height: 2px;
     width: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
     transform: scale(6, 6);
     transition: box-shadow 0.2s;
 }
@@ -110,7 +110,7 @@
     border-radius: 1px;
     width: 100%;
     height: 2px;
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    background-color: var(--accent-color-opacity4);
 }
 
 /* Moz | Thumb */
@@ -121,7 +121,7 @@
     border-radius: 50%;
     height: 2px;
     width: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
     transform: scale(6, 6);
     transition: box-shadow 0.2s;
 }
@@ -130,25 +130,25 @@
 .pure-material-slider > input::-moz-range-progress {
     border-radius: 1px;
     height: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
 }
 
 /* Moz | Hover, Focus */
 .pure-material-slider:hover > input:hover::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* Moz | Active */
 .pure-material-slider > input:active::-moz-range-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important;
+    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* Moz | Disabled */
@@ -185,14 +185,14 @@
 .pure-material-slider > input::-ms-fill-lower {
     border-radius: 1px;
     height: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
 }
 
 /* MS | Progress */
 .pure-material-slider > input::-ms-fill-upper {
     border-radius: 1px;
     height: 2px;
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    background-color: var(--accent-color-opacity4);
 }
 
 /* MS | Thumb */
@@ -203,27 +203,27 @@
     border-radius: 50%;
     height: 2px;
     width: 2px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    background-color: var(--accent-color);
     transform: scale(6, 6);
     transition: box-shadow 0.2s;
 }
 
 /* MS | Hover, Focus */
 .pure-material-slider:hover > input::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity1);
 }
 
 .pure-material-slider > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity2);
 }
 
 .pure-material-slider:hover > input:focus::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+    box-shadow: 0 0 0 2px var(--accent-color-opacity3);
 }
 
 /* MS | Active */
 .pure-material-slider > input:active::-ms-thumb {
-    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important;
+    box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
 }
 
 /* MS | Disabled */
diff --git a/src/renderer/components/ft-slider/ft-slider.js b/src/renderer/components/ft-slider/ft-slider.js
index c5b9fb33..b95e5cd3 100644
--- a/src/renderer/components/ft-slider/ft-slider.js
+++ b/src/renderer/components/ft-slider/ft-slider.js
@@ -43,6 +43,11 @@ export default Vue.extend({
       }
     }
   },
+  watch: {
+    defaultValue: function () {
+      this.currentValue = this.defaultValue
+    }
+  },
   mounted: function () {
     this.id = this._uid
     this.currentValue = this.defaultValue
diff --git a/src/renderer/components/ft-slider/ft-slider.vue b/src/renderer/components/ft-slider/ft-slider.vue
index 4c32eaf9..f52a068d 100644
--- a/src/renderer/components/ft-slider/ft-slider.vue
+++ b/src/renderer/components/ft-slider/ft-slider.vue
@@ -9,6 +9,7 @@
       :max="maxValue"
       :step="step"
       v-model.number="currentValue"
+      @change="$emit('change', $event.target.value)"
     >
       <span>
         {{ label }} -
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
index 1d57aaf0..abebec5e 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
@@ -55,11 +55,11 @@
 }
 
 .switch-input:checked+.switch-label:before {
-    background-color: #90CAF9;
+    background-color: var(--accent-color-light);
 }
 
 .switch-input:checked+.switch-label:after {
-    background-color: #2196F3;
+    background-color: var(--accent-color);
     -ms-transform: translate(80%, -50%);
     -webkit-transform: translate(80%, -50%);
     transform: translate(80%, -50%);
diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js
index c8e84989..31d96dad 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.js
+++ b/src/renderer/components/ft-video-player/ft-video-player.js
@@ -46,6 +46,7 @@ export default Vue.extend({
   data: function () {
     return {
       id: '',
+      volume: 1,
       player: null,
       useDash: false,
       useHls: false,
@@ -99,17 +100,27 @@ export default Vue.extend({
       return this.$store.getters.getListType
     },
 
-    videoFormatPreference: function () {
-      return this.$store.getters.getVideoFormatPreference
+    defaultPlayback: function () {
+      return this.$store.getters.getDefaultPlayback
     },
 
-    autoplay: function () {
-      return this.$store.getters.getAutoplay
+    defaultVideoFormat: function () {
+      return this.$store.getters.getDefaultVideoFormat
+    },
+
+    autoplayVideos: function () {
+      return this.$store.getters.getAutoplayVideos
     }
   },
   mounted: function () {
     this.id = this._uid
 
+    const volume = sessionStorage.getItem('volume')
+
+    if (volume !== null) {
+      this.volume = volume
+    }
+
     this.determineFormatType()
   },
   beforeDestroy: function () {
@@ -129,6 +140,9 @@ export default Vue.extend({
 
         this.player = videojs(videoPlayer)
 
+        this.player.volume(this.volume)
+        this.player.playbackRate(this.defaultPlayback)
+
         this.player.vttThumbnails({
           src: this.storyboardSrc
         })
@@ -141,7 +155,7 @@ export default Vue.extend({
           this.player.httpSourceSelector()
         }
 
-        if (this.autoplay) {
+        if (this.autoplayVideos) {
           // Calling play() won't happen right away, so a quick timeout will make it function properly.
           setTimeout(() => {
             this.player.play()
@@ -152,6 +166,7 @@ export default Vue.extend({
 
         this.player.on('mousemove', this.hideMouseTimeout)
         this.player.on('mouseleave', this.removeMouseTimeout)
+        this.player.on('volumechange', this.updateVolume)
 
         const v = this
 
@@ -161,6 +176,11 @@ export default Vue.extend({
       }
     },
 
+    updateVolume: function (event) {
+      const volume = this.player.volume()
+      sessionStorage.setItem('volume', volume)
+    },
+
     determineFormatType: function () {
       if (this.format === 'dash') {
         this.enableDashFormat()
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index 859a4fb7..f68c4b64 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -16,17 +16,6 @@ export default Vue.extend({
   data: function () {
     return {
       title: 'General Settings',
-      currentTheme: '',
-      themeNames: [
-        'Light Red',
-        'Dark Red',
-        'Gray Red'
-      ],
-      themeValues: [
-        'redLight',
-        'redDark',
-        'redGray'
-      ],
       backendNames: [
         'Invidious API',
         'Local API'
@@ -558,9 +547,6 @@ export default Vue.extend({
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
     },
-    barColor: function () {
-      return this.$store.getters.getBarColor
-    },
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -577,14 +563,7 @@ export default Vue.extend({
       return this.$store.getters.getThumbnailPreference
     }
   },
-  mounted: function () {
-    this.currentTheme = localStorage.getItem('theme')
-  },
   methods: {
-    updateTheme: function (theme) {
-      this.$parent.$parent.updateTheme(theme)
-    },
-
     ...mapActions([
       'updateBackendFallback',
       'updateCheckForUpdates',
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index fabcd42d..2448691c 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -17,11 +17,6 @@
         :default-value="checkForUpdates"
         @change="updateCheckForUpdates"
       />
-      <ft-toggle-switch
-        label="Match Top Bar with Theme Color"
-        :default-value="barColor"
-        @change="updateBarColor"
-      />
     </ft-flex-box>
     <br>
     <ft-flex-box>
@@ -32,13 +27,6 @@
         :select-values="backendValues"
         @change="updateBackendPreference"
       />
-      <ft-select
-        placeholder="Default Theme"
-        :value="currentTheme"
-        :select-names="themeNames"
-        :select-values="themeValues"
-        @change="updateTheme"
-      />
       <ft-select
         placeholder="Default Landing Page"
         :value="landingPage"
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index b181d8c0..c6a98422 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -54,13 +55,67 @@ export default Vue.extend({
     }
   },
   computed: {
-    invidiousInstance: function () {
-      return this.$store.getters.getInvidiousInstance
+    rememberHistory: function () {
+      return this.$store.getters.getRememberHistory
+    },
+
+    autoplayVideos: function () {
+      return this.$store.getters.getAutoplayVideos
+    },
+
+    autoplayPlaylists: function () {
+      return this.$store.getters.getAutoplayPlaylists
+    },
+
+    playNextVideo: function () {
+      return this.$store.getters.getPlayNextVideo
+    },
+
+    enableSubtitles: function () {
+      return this.$store.getters.getEnableSubtitles
+    },
+
+    forceLocalBackendForLegacy: function () {
+      return this.$store.getters.getForceLocalBackendForLegacy
+    },
+
+    proxyVideos: function () {
+      return this.$store.getters.getProxyVideos
+    },
+
+    defaultVolume: function () {
+      return parseFloat(this.$store.getters.getDefaultVolume) * 100
+    },
+
+    defaultPlayback: function () {
+      return parseFloat(this.$store.getters.getDefaultPlayback)
+    },
+
+    defaultVideoFormat: function () {
+      return this.$store.getters.getDefaultVideoFormat
+    },
+
+    defaultQuality: function () {
+      return this.$store.getters.getDefaultQuality
     }
   },
   methods: {
-    goToChannel: function () {
-      console.log('TODO: Handle goToChannel')
-    }
+    parseVolumeBeforeUpdate: function (volume) {
+      this.updateDefaultVolume(volume / 100)
+    },
+
+    ...mapActions([
+      'updateRememberHistory',
+      'updateAutoplayVideos',
+      'updateAutoplayPlaylists',
+      'updatePlayNextVideo',
+      'updateEnableSubtitles',
+      'updateForceLocalBackendForLegacy',
+      'updateProxyVideos',
+      'updateDefaultVolume',
+      'updateDefaultPlayback',
+      'updateDefaultVideoFormat',
+      'updateDefaultQuality'
+    ])
   }
 })
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 4864851c..2c5ac4d9 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -9,58 +9,76 @@
     <ft-flex-box>
       <ft-toggle-switch
         label="Remember History"
+        :default-value="rememberHistory"
+        @change="updateRememberHistory"
       />
       <ft-toggle-switch
         label="Autoplay Videos"
+        :default-value="autoplayVideos"
+        @change="updateAutoplayVideos"
       />
       <ft-toggle-switch
         label="Autoplay Playlists"
+        :default-value="autoplayPlaylists"
+        @change="updateAutoplayPlaylists"
       />
       <ft-toggle-switch
         label="Play Next Video"
+        :default-value="playNextVideo"
+        @change="updatePlayNextVideo"
       />
       <ft-toggle-switch
         label="Enable Subtitles by Default"
+        :default-value="enableSubtitles"
+        @change="updateEnableSubtitles"
       />
       <ft-toggle-switch
         label="Force Local Backend for Legacy Formats"
+        :default-value="forceLocalBackendForLegacy"
+        @change="updateForceLocalBackendForLegacy"
       />
       <ft-toggle-switch
         label="Proxy Videos Through Invidious"
+        :default-value="proxyVideos"
+        @change="updateProxyVideos"
       />
     </ft-flex-box>
     <br>
     <ft-flex-box>
       <ft-slider
         label="Default Volume"
-        :default-value="100"
+        :default-value="defaultVolume"
         :min-value="0"
         :max-value="100"
         :step="1"
         value-extension="%"
+        @change="parseVolumeBeforeUpdate"
       />
       <ft-slider
         label="Default Playback Rate"
-        :default-value="1"
+        :default-value="defaultPlayback"
         :min-value="0.25"
         :max-value="3"
         :step="0.25"
         value-extension="x"
+        @change="updateDefaultPlayback"
       />
     </ft-flex-box>
     <br>
     <ft-flex-box>
       <ft-select
         placeholder="Default Video Format"
-        :value="formatValues[0]"
+        :value="defaultVideoFormat"
         :select-names="formatNames"
         :select-values="formatValues"
+        @change="updateDefaultVideoFormat"
       />
       <ft-select
         placeholder="Default Quality"
-        :value="qualityValues[0]"
+        :value="defaultQuality"
         :select-names="qualityNames"
         :select-values="qualityValues"
+        @change="updateDefaultQuality"
       />
     </ft-flex-box>
   </ft-card>
diff --git a/src/renderer/components/theme-settings/theme-settings.css b/src/renderer/components/theme-settings/theme-settings.css
new file mode 100644
index 00000000..373444d9
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.css
@@ -0,0 +1,9 @@
+.relative {
+  position: relative;
+}
+
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 10px;
+}
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
new file mode 100644
index 00000000..898d88c1
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -0,0 +1,127 @@
+import Vue from 'vue'
+import { mapActions } from 'vuex'
+import FtCard from '../ft-card/ft-card.vue'
+import FtSelect from '../ft-select/ft-select.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+export default Vue.extend({
+  name: 'ThemeSettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-select': FtSelect,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-flex-box': FtFlexBox
+  },
+  data: function () {
+    return {
+      title: 'Theme Settings',
+      currentBaseTheme: '',
+      currentMainColor: '',
+      currentSecColor: '',
+      baseThemeNames: [
+        'Light',
+        'Dark',
+        'Gray'
+      ],
+      baseThemeValues: [
+        'light',
+        'dark',
+        'gray'
+      ],
+      colorNames: [
+        'Red',
+        'Pink',
+        'Purple',
+        'Deep Purple',
+        'Indigo',
+        'Blue',
+        'Light Blue',
+        'Cyan',
+        'Teal',
+        'Green',
+        'Light Green',
+        'Lime',
+        'Yellow',
+        'Amber',
+        'Orange',
+        'Deep Orange'
+      ],
+      colorValues: [
+        'Red',
+        'Pink',
+        'Purple',
+        'DeepPurple',
+        'Indigo',
+        'Blue',
+        'LightBlue',
+        'Cyan',
+        'Teal',
+        'Green',
+        'LightGreen',
+        'Lime',
+        'Yellow',
+        'Amber',
+        'Orange',
+        'DeepOrange'
+      ]
+    }
+  },
+  computed: {
+    barColor: function () {
+      return this.$store.getters.getBarColor
+    }
+  },
+  mounted: function () {
+    this.currentBaseTheme = localStorage.getItem('baseTheme')
+    this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
+    this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
+  },
+  methods: {
+    updateBaseTheme: function (theme) {
+      const mainColor = `main${this.currentMainColor}`
+      const secColor = `sec${this.currentSecColor}`
+
+      const payload = {
+        baseTheme: theme,
+        mainColor: mainColor,
+        secColor: secColor
+      }
+
+      this.$parent.$parent.updateTheme(payload)
+      this.currentBaseTheme = theme
+    },
+
+    updateMainColor: function (color) {
+      const mainColor = `main${color}`
+      const secColor = `sec${this.currentSecColor}`
+
+      const payload = {
+        baseTheme: this.currentBaseTheme,
+        mainColor: mainColor,
+        secColor: secColor
+      }
+
+      this.$parent.$parent.updateTheme(payload)
+      this.currentMainColor = color
+    },
+
+    updateSecColor: function (color) {
+      const mainColor = `main${this.currentMainColor}`
+      const secColor = `sec${color}`
+
+      const payload = {
+        baseTheme: this.currentBaseTheme,
+        mainColor: mainColor,
+        secColor: secColor
+      }
+
+      this.$parent.$parent.updateTheme(payload)
+      this.currentSecColor = color
+    },
+
+    ...mapActions([
+      'updateBarColor'
+    ])
+  }
+})
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
new file mode 100644
index 00000000..9ef5a9c6
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -0,0 +1,42 @@
+<template>
+  <ft-card
+    class="relative card">
+    <h3>
+      {{ title }}
+    </h3>
+    <ft-flex-box>
+      <ft-toggle-switch
+        label="Match Top Bar with Main Color"
+        :default-value="barColor"
+        @change="updateBarColor"
+      />
+    </ft-flex-box>
+    <br>
+    <ft-flex-box>
+      <ft-select
+        placeholder="Base Theme"
+        :value="currentBaseTheme"
+        :select-names="baseThemeNames"
+        :select-values="baseThemeValues"
+        @change="updateBaseTheme"
+      />
+      <ft-select
+        placeholder="Main Color Theme"
+        :value="currentMainColor"
+        :select-names="colorNames"
+        :select-values="colorValues"
+        @change="updateMainColor"
+      />
+      <ft-select
+        placeholder="Secondary Color Theme"
+        :value="currentSecColor"
+        :select-names="colorNames"
+        :select-values="colorValues"
+        @change="updateSecColor"
+      />
+    </ft-flex-box>
+  </ft-card>
+</template>
+
+<script src="./theme-settings.js" />
+<style scoped src="./theme-settings.css" />
diff --git a/src/renderer/components/top-nav/top-nav.css b/src/renderer/components/top-nav/top-nav.css
index 14ada4fa..defb1277 100644
--- a/src/renderer/components/top-nav/top-nav.css
+++ b/src/renderer/components/top-nav/top-nav.css
@@ -18,6 +18,9 @@
   position: absolute;
   top: 10px;
   left: 10px;
+}
+
+.navIcon {
   font-size: 20px;
   padding: 10px;
   cursor: pointer;
@@ -30,78 +33,42 @@
   transition: background 0.2s ease-out;
 }
 
-.menuIcon:hover {
+.topNavBarColor .navIcon {
+  color: var(--text-with-main-color);
+}
+
+.navIcon:hover {
   background-color: var(--side-nav-hover-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
-.menuIcon:active {
+.topNavBarColor .navIcon:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.navIcon:active {
   background-color: var(--teritary-text-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
+.topNavBarColor .menuIcon:active {
+  background-color: var(--primary-color-active)
+}
+
 .navBackIcon {
   position: absolute;
   top: 10px;
   left: 50px;
-  font-size: 20px;
-  padding: 10px;
-  cursor: pointer;
-  color: var(--primary-text-color);
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.navBackIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.navBackIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
 }
 
 .navForwardIcon {
   position: absolute;
   top: 10px;
   left: 85px;
-  font-size: 20px;
-  padding: 10px;
-  cursor: pointer;
-  color: var(--primary-text-color);
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.navForwardIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.navForwardIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
 }
 
 .logoIcon {
@@ -142,32 +109,14 @@
   position: relative;
 }
 
-.search {
+.searchInput {
   width: 450px;
 }
 
 .navFilterIcon {
   position: absolute;
-  padding: 10px;
   top: 10px;
   right: 10px;
-  cursor: pointer;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.navFilterIcon:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.navFilterIcon:active {
-  background-color: var(--teritary-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
 }
 
 .searchFilters {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index ea1b7f88..fb14271d 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -4,17 +4,17 @@
     :class="{ topNavBarColor: barColor }"
   >
     <font-awesome-icon
-      class="menuIcon"
+      class=" menuIcon navIcon"
       icon="bars"
       @click="toggleSideNav"
     />
     <font-awesome-icon
-      class="navBackIcon"
+      class="navBackIcon navIcon"
       icon="arrow-left"
       @click="historyBack"
     />
     <font-awesome-icon
-      class="navForwardIcon"
+      class="navForwardIcon navIcon"
       icon="arrow-right"
       @click="historyForward"
     />
@@ -29,11 +29,12 @@
     <div class="searchContainer">
       <ft-input
         placeholder="Search / Go to URL"
-        class="search"
+        class="searchInput"
+        :is-search="true"
         @click="goToSearch"
       />
       <font-awesome-icon
-        class="navFilterIcon"
+        class="navFilterIcon navIcon"
         icon="filter"
         @click="showFilters = !showFilters"
       />
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index ffc9469d..e0c80d09 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -9,30 +9,29 @@ const settingsDb = new Datastore({
 
 const state = {
   currentTheme: 'lightRed',
-  barColor: false,
-  listType: 'grid',
-  invidiousInstance: 'https://invidio.us',
-  backendPreference: 'local',
-  useClickBaitRemover: true,
-  thumbnailPreference: '',
   backendFallback: true,
-  videoFormatPreference: 'dash',
-  defaultQuality: 'Auto',
-  videoAutoplay: true,
-  playlistAutoplay: true,
-  playNextVideo: false,
   checkForUpdates: true,
-  useTor: false,
-  history: true,
-  subtitles: false,
-  player: 'dash',
-  volume: 1,
-  rate: '1',
-  proxy: 'SOCKS5://127.0.0.1:9050',
-  proxyVideos: false,
-  region: 'US',
-  debugMode: false,
+  backendPreference: 'local',
   landingPage: 'subscriptions',
+  region: 'US',
+  listType: 'grid',
+  thumbnailPreference: '',
+  invidiousInstance: 'https://invidio.us',
+  barColor: false,
+  rememberHistory: true,
+  autoplayVideos: true,
+  autoplayPlaylists: true,
+  playNextVideo: false,
+  enableSubtitles: true,
+  forceLocalBackendForLegacy: true,
+  proxyVideos: false,
+  defaultVolume: 1,
+  defaultPlayback: 1,
+  defaultVideoFormat: 'dash',
+  defaultQuality: 'auto',
+  useTor: false,
+  proxy: 'SOCKS5://127.0.0.1:9050',
+  debugMode: false,
   disctractionFreeMode: false,
   hideWatchedSubs: false,
   profileList: [{ name: 'All Channels', color: '#304FFE' }],
@@ -76,12 +75,48 @@ const getters = {
     return state.invidiousInstance
   },
 
-  getVideoFormatPreference: () => {
-    return state.videoFormatPreference
+  getRememberHistory: () => {
+    return state.rememberHistory
   },
 
-  getAutoplay: () => {
-    return state.videoAutoplay
+  getAutoplayVideos: () => {
+    return state.autoplayVideos
+  },
+
+  getAutoplayPlaylists: () => {
+    return state.autoplayPlaylists
+  },
+
+  getPlayNextVideo: () => {
+    return state.playNextVideo
+  },
+
+  getEnableSubtitles: () => {
+    return state.enableSubtitles
+  },
+
+  getForceLocalBackendForLegacy: () => {
+    return state.forceLocalBackendForLegacy
+  },
+
+  getProxyVideos: () => {
+    return state.proxyVideos
+  },
+
+  getDefaultVolume: () => {
+    return state.defaultVolume
+  },
+
+  getDefaultPlayback: () => {
+    return state.defaultPlayback
+  },
+
+  getDefaultVideoFormat: () => {
+    return state.defaultVideoFormat
+  },
+
+  getDefaultQuality: () => {
+    return state.defaultQuality
   }
 }
 
@@ -89,6 +124,7 @@ const actions = {
   grabUserSettings ({ commit }) {
     settingsDb.find({}, (err, results) => {
       if (!err) {
+        console.log(results)
         results.forEach((result) => {
           switch (result._id) {
             case 'backendFallback':
@@ -97,9 +133,6 @@ const actions = {
             case 'checkForUpdates':
               commit('setCheckForUpdates', result.value)
               break
-            case 'barColor':
-              commit('setBarColor', result.value)
-              break
             case 'backendPreference':
               commit('setBackendPreference', result.value)
               break
@@ -115,6 +148,43 @@ const actions = {
             case 'thumbnailPreference':
               commit('setThumbnailPreference', result.value)
               break
+            case 'barColor':
+              commit('setBarColor', result.value)
+              break
+            case 'rememberHistory':
+              commit('setRememberHistory', result.value)
+              break
+            case 'autoplayVideos':
+              commit('setAutoplayVideos', result.value)
+              break
+            case 'autoplayPlaylists':
+              commit('setAutoplayPlaylists', result.value)
+              break
+            case 'playNextVideo':
+              commit('setPlayNextVideo', result.value)
+              break
+            case 'enableSubtitles':
+              commit('setEnableSubtitles', result.value)
+              break
+            case 'forceLocalBackendForLegacy':
+              commit('setForceLocalBackendForLegacy', result.value)
+              break
+            case 'proxyVideos':
+              commit('setProxyVideos', result.value)
+              break
+            case 'defaultVolume':
+              commit('setDefaultVolume', result.value)
+              sessionStorage.setItem('volume', result.value)
+              break
+            case 'defaultPlayback':
+              commit('setDefaultPlayback', result.value)
+              break
+            case 'defaultVideoFormat':
+              commit('setDefaultVideoFormat', result.value)
+              break
+            case 'defaultQuality':
+              commit('setDefaultQuality', result.value)
+              break
           }
         })
       }
@@ -137,14 +207,6 @@ const actions = {
     })
   },
 
-  updateBarColor ({ commit }, barColor) {
-    settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
-      if (!err) {
-        commit('setBarColor', barColor)
-      }
-    })
-  },
-
   updateBackendPreference ({ commit }, backendPreference) {
     settingsDb.update({ _id: 'backendPreference' }, { _id: 'backendPreference', value: backendPreference }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -185,36 +247,109 @@ const actions = {
     })
   },
 
+  updateBarColor ({ commit }, barColor) {
+    settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setBarColor', barColor)
+      }
+    })
+  },
+
+  updateRememberHistory ({ commit }, history) {
+    settingsDb.update({ _id: 'rememberHistory' }, { _id: 'rememberHistory', value: history }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setRememberHistory', history)
+      }
+    })
+  },
+
+  updateAutoplayVideos ({ commit }, autoplayVideos) {
+    settingsDb.update({ _id: 'autoplayVideos' }, { _id: 'autoplayVideos', value: autoplayVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setAutoplayVideos', autoplayVideos)
+      }
+    })
+  },
+
+  updateAutoplayPlaylists ({ commit }, autoplayPlaylists) {
+    settingsDb.update({ _id: 'autoplayPlaylists' }, { _id: 'autoplayPlaylists', value: autoplayPlaylists }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setAutoplayPlaylists', autoplayPlaylists)
+      }
+    })
+  },
+
+  updatePlayNextVideo ({ commit }, playNextVideo) {
+    settingsDb.update({ _id: 'playNextVideo' }, { _id: 'playNextVideo', value: playNextVideo }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setPlayNextVideo', playNextVideo)
+      }
+    })
+  },
+
+  updateEnableSubtitles ({ commit }, enableSubtitles) {
+    settingsDb.update({ _id: 'enableSubtitles' }, { _id: 'enableSubtitles', value: enableSubtitles }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setEnableSubtitles', enableSubtitles)
+      }
+    })
+  },
+
+  updateForceLocalBackendForLegacy ({ commit }, forceLocalBackendForLegacy) {
+    settingsDb.update({ _id: 'forceLocalBackendForLegacy' }, { _id: 'forceLocalBackendForLegacy', value: forceLocalBackendForLegacy }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setForceLocalBackendForLegacy', forceLocalBackendForLegacy)
+      }
+    })
+  },
+
+  updateProxyVideos ({ commit }, proxyVideos) {
+    settingsDb.update({ _id: 'proxyVideos' }, { _id: 'proxyVideos', value: proxyVideos }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setProxyVideos', proxyVideos)
+      }
+    })
+  },
+
+  updateDefaultVolume ({ commit }, defaultVolume) {
+    settingsDb.update({ _id: 'defaultVolume' }, { _id: 'defaultVolume', value: defaultVolume }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultVolume', defaultVolume)
+        sessionStorage.setItem('volume', defaultVolume)
+      }
+    })
+  },
+
+  updateDefaultPlayback ({ commit }, defaultPlayback) {
+    settingsDb.update({ _id: 'defaultPlayback' }, { _id: 'defaultPlayback', value: defaultPlayback }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultPlayback', defaultPlayback)
+      }
+    })
+  },
+
+  updateDefaultVideoFormat ({ commit }, defaultVideoFormat) {
+    settingsDb.update({ _id: 'defaultVideoFormat' }, { _id: 'defaultVideoFormat', value: defaultVideoFormat }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultVideoFormat', defaultVideoFormat)
+      }
+    })
+  },
+
+  updateDefaultQuality ({ commit }, defaultQuality) {
+    settingsDb.update({ _id: 'defaultQuality' }, { _id: 'defaultQuality', value: defaultQuality }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultQuality', defaultQuality)
+      }
+    })
+  },
+
   updateUseTor ({ commit }, useTor) {
     settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => {
       if (!err) {
         commit('setUseTor', useTor)
       }
     })
-  },
-
-  updateSetHistory ({ commit }, history) {
-    settingsDb.update({ _id: history }, { value: history }, { upsert: true }, (err, history) => {
-      if (!err) {
-        commit('setHistory', history)
-      }
-    })
-  },
-
-  updateAutoPlay ({ commit }, autoplay) {
-    settingsDb.update({ _id: autoplay }, { value: autoplay }, { upsert: true }, (err, autoplay) => {
-      if (!err) {
-        commit('setAutoplay', autoplay)
-      }
-    })
-  },
-
-  updateAutoPlayPlaylists ({ commit }, autoplayPlaylists) {
-    settingsDb.update({ _id: autoplayPlaylists }, { value: autoplayPlaylists }, { upsert: true }, (err, autoplayPlaylists) => {
-      if (!err) {
-        commit('setAutoplayPlaylists', autoplayPlaylists)
-      }
-    })
   }
 }
 
@@ -228,9 +363,6 @@ const mutations = {
   setCheckForUpdates (state, checkForUpdates) {
     state.checkForUpdates = checkForUpdates
   },
-  setBarColor (state, barColor) {
-    state.barColor = barColor
-  },
   setBackendPreference (state, backendPreference) {
     state.backendPreference = backendPreference
   },
@@ -246,14 +378,14 @@ const mutations = {
   setThumbnailPreference (state, thumbnailPreference) {
     state.thumbnailPreference = thumbnailPreference
   },
-  setUseTor (state, useTor) {
-    state.useTor = useTor
+  setBarColor (state, barColor) {
+    state.barColor = barColor
   },
-  setHistory (state, history) {
-    state.history = history
+  setRememberHistory (state, rememberHistory) {
+    state.rememberHistory = rememberHistory
   },
-  setAutoplay (state, autoplay) {
-    state.autoplay = autoplay
+  setAutoplayVideos (state, autoplayVideos) {
+    state.autoplayVideos = autoplayVideos
   },
   setAutoplayPlaylists (state, autoplayPlaylists) {
     state.autoplayPlaylists = autoplayPlaylists
@@ -261,39 +393,36 @@ const mutations = {
   setPlayNextVideo (state, playNextVideo) {
     state.playNextVideo = playNextVideo
   },
-  setSubtitles (state, subtitles) {
-    state.subtitles = subtitles
+  setEnableSubtitles (state, enableSubtitles) {
+    state.enableSubtitles = enableSubtitles
   },
-  setUpdates (state, updates) {
-    state.updates = updates
-  },
-  setLocalScrape (state, localScrape) {
-    state.localScrape = localScrape
-  },
-  setPlayer (state, player) {
-    state.player = player
-  },
-  setQuality (state, quality) {
-    state.quality = quality
-  },
-  setVolume (state, volume) {
-    state.volume = volume
-  },
-  setRate (state, rate) {
-    state.rate = rate
-  },
-  setProxy (state, proxy) {
-    state.proxy = proxy
+  setForceLocalBackendForLegacy (state, forceLocalBackendForLegacy) {
+    state.forceLocalBackendForLegacy = forceLocalBackendForLegacy
   },
   setProxyVideos (state, proxyVideos) {
     state.proxyVideos = proxyVideos
   },
+  setDefaultVolume (state, defaultVolume) {
+    state.defaultVolume = defaultVolume
+  },
+  setDefaultPlayback (state, defaultPlayback) {
+    state.defaultPlayback = defaultPlayback
+  },
+  setDefaultVideoFormat (state, defaultVideoFormat) {
+    state.defaultVideoFormat = defaultVideoFormat
+  },
+  setDefaultQuality (state, defaultQuality) {
+    state.defaultQuality = defaultQuality
+  },
+  setProxy (state, proxy) {
+    state.proxy = proxy
+  },
+  setUseTor (state, useTor) {
+    state.useTor = useTor
+  },
   setDebugMode (state, debugMode) {
     state.debugMode = debugMode
   },
-  setStartScreen (state, startScreen) {
-    state.startScreen = startScreen
-  },
   setDistractionFreeMode (state, disctractionFreeMode) {
     state.disctractionFreeMode = disctractionFreeMode
   },
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 0ed5e1d1..07b72755 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -12,16 +12,20 @@ const state = {
 }
 
 const getters = {
+  getIsSideNavOpen () {
+    return state.isSideNavOpen
+  },
+
+  getCurrentVolume () {
+    return state.currentVolume
+  },
+
   getSessionSearchHistory () {
     return state.sessionSearchHistory
   },
 
   getSearchSettings () {
     return state.searchSettings
-  },
-
-  getIsSideNavOpen () {
-    return state.isSideNavOpen
   }
 }
 
diff --git a/src/renderer/store/modules/ytdl.js b/src/renderer/store/modules/ytdl.js
index 6b21b482..ae4819a5 100644
--- a/src/renderer/store/modules/ytdl.js
+++ b/src/renderer/store/modules/ytdl.js
@@ -2,6 +2,8 @@ import ytdl from 'ytdl-core'
 import ytsr from 'ytsr'
 import ytpl from 'ytpl'
 
+import IsEqual from 'lodash.isequal'
+
 const state = {
   main: 0,
   isYtSearchRunning: false
@@ -22,13 +24,34 @@ const actions = {
         resolve(false)
       }
 
+      const defaultFilters = {
+        sortBy: 'relevance',
+        time: '',
+        type: 'all',
+        duration: ''
+      }
+
       commit('toggleIsYtSearchRunning')
 
-      dispatch('ytSearchGetFilters', payload).then((filter) => {
-        if (typeof (payload.options.nextpageRef) === 'undefined' && filter !== payload.query) {
-          payload.options.nextpageRef = filter
-        }
+      if (!IsEqual(defaultFilters, rootState.utils.searchSettings)) {
+        dispatch('ytSearchGetFilters', payload).then((filter) => {
+          if (typeof (payload.options.nextpageRef) === 'undefined' && filter !== payload.query) {
+            payload.options.nextpageRef = filter
+          }
 
+          ytsr(payload.query, payload.options, (err, result) => {
+            commit('toggleIsYtSearchRunning')
+            if (err) {
+              console.log(err)
+              reject(err)
+            } else {
+              console.log(result)
+              console.log('done')
+              resolve(result)
+            }
+          })
+        })
+      } else {
         ytsr(payload.query, payload.options, (err, result) => {
           commit('toggleIsYtSearchRunning')
           if (err) {
@@ -40,7 +63,7 @@ const actions = {
             resolve(result)
           }
         })
-      })
+      }
     })
   },
 
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index e0993c58..6501bff3 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -1,8 +1,4 @@
-.redLight {
-  --primary-color: #f44336;
-  --primary-color-hover: #e53935;
-  --primary-color-active: #c62828;
-  --accent-color: #2196F3;
+.light {
   --primary-text-color: #212121;
   --secondary-text-color: #424242;
   --teritary-text-color: #757575;
@@ -18,15 +14,10 @@
   --search-bar-color: #f5f5f5;
   --logo-icon: url("/_icons/iconColorSmall.png");
   --logo-text: url("/_icons/textColorSmall.png");
-  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }
 
-.redDark {
-  --primary-color: #f44336;
-  --primary-color-hover: #e53935;
-  --primary-color-active: #c62828;
-  --accent-color: #2196F3;
+
+.dark {
   --primary-text-color: #EEEEEE;
   --secondary-text-color: #E0E0E0;
   --teritary-text-color: #F5F5F5;
@@ -42,34 +33,331 @@
   --search-bar-color: #f5f5f5;
   --logo-icon: url("/_icons/iconColorSmall.png");
   --logo-text: url("/_icons/textColorSmall.png");
+}
+
+
+.gray {
+  --primary-text-color: #EEEEEE;
+  --secondary-text-color: #E0E0E0;
+  --teritary-text-color: #F5F5F5;
+  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-shadow-color: rgba(0, 0, 0, 0.75);
+  --title-color: #EEEEEE;
+  --bg-color: #212121;
+  --card-bg-color: #303030;
+  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --side-nav-color: #262626;
+  --side-nav-hover-color: #212121;
+  --side-nav-active-color: #303030;
+  --search-bar-color: #f5f5f5;
+  --logo-icon: url("/_icons/iconColorSmall.png");
+  --logo-text: url("/_icons/textColorSmall.png");
+}
+
+.mainRed {
+  --primary-color: #f44336;
+  --primary-color-hover: #e53935;
+  --primary-color-active: #c62828;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainPink {
+  --primary-color: #E91E63;
+  --primary-color-hover: #D81B60;
+  --primary-color-active: #AD1457;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainPurple {
+  --primary-color: #9C27B0;
+  --primary-color-hover: #8E24AA;
+  --primary-color-active: #6A1B9A;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainDeepPurple {
+  --primary-color: #673AB7;
+  --primary-color-hover: #5E35B1;
+  --primary-color-active: #4527A0;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainIndigo {
+  --primary-color: #3F51B5;
+  --primary-color-hover: #3949AB;
+  --primary-color-active: #283593;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainBlue {
+  --primary-color: #2196F3;
+  --primary-color-hover: #1E88E5;
+  --primary-color-active: #1565C0;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainLightBlue {
+  --primary-color: #03A9F4;
+  --primary-color-hover: #039BE5;
+  --primary-color-active: #0277BD;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainCyan {
+  --primary-color: #00BCD4;
+  --primary-color-hover: #00ACC1;
+  --primary-color-active: #00838F;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainTeal {
+  --primary-color: #009688;
+  --primary-color-hover: #00897B;
+  --primary-color-active: #00695C;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainGreen {
+  --primary-color: #4CAF50;
+  --primary-color-hover: #43A047;
+  --primary-color-active: #2E7D32;
+  --text-with-main-color: #FFFFFF;
+  --logo-icon-bar-color: url("/_icons/iconWhite.png");
+  --logo-text-bar-color: url("/_icons/textWhite.png");
+}
+
+.mainLightGreen {
+  --primary-color: #8BC34A;
+  --primary-color-hover: #7CB342;
+  --primary-color-active: #558B2F;
+  --text-with-main-color: #000000;
   --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
   --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }
 
-.redGray {
-  --primary-color: #f44336;
-  --primary-color-hover: #e53935;
-  --primary-color-active: #c62828;
-  --accent-color: #2196F3;
-  --primary-text-color: #212121;
-  --secondary-text-color: #424242;
-  --teritary-text-color: #757575;
-  --primary-input-color: rgba(0, 0, 0, 0.50);
-  --primary-shadow-color: rgba(232, 232, 232, 1);
-  --title-color: #3f7ac6;
-  --bg-color: #f1f1f1;
-  --card-bg-color: #FFFFFF;
-  --secondary-card-bg-color: #eeeeee;
-  --side-nav-color: #FFFFFF;
-  --side-nav-hover-color: #e0e0e0;
-  --side-nav-active-color: #757575;
-  --search-bar-color: #f5f5f5;
-  --logo-icon: url("/_icons/iconColorSmall.png");
-  --logo-text: url("/_icons/textColorSmall.png");
+.mainLime {
+  --primary-color: #CDDC39;
+  --primary-color-hover: #C0CA33;
+  --primary-color-active: #9E9D24;
+  --text-with-main-color: #000000;
   --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
   --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }
 
+.mainYellow {
+  --primary-color: #FFEB3B;
+  --primary-color-hover: #FDD835;
+  --primary-color-active: #F9A825;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.mainAmber {
+  --primary-color: #FFC107;
+  --primary-color-hover: #FFB300;
+  --primary-color-active: #FF8F00;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.mainOrange {
+  --primary-color: #FF9800;
+  --primary-color-hover: #FB8C00;
+  --primary-color-active: #EF6C00;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.mainDeepOrange {
+  --primary-color: #FF5722;
+  --primary-color-hover: #F4511E;
+  --primary-color-active: #D84315;
+  --text-with-main-color: #000000;
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.secRed {
+  --accent-color: #f44336;
+  --accent-color-light: #ef9a9a;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(244,67,54,0.04);
+  --accent-color-opacity2: rgba(244,67,54,0.12);
+  --accent-color-opacity3: rgba(244,67,54,0.16);
+  --accent-color-opacity4: rgba(244,67,54,0.24);
+}
+
+.secPink {
+  --accent-color: #E91E63;
+  --accent-color-light: #F48FB1;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(233,30,99,0.04);
+  --accent-color-opacity2: rgba(233,30,99,0.12);
+  --accent-color-opacity3: rgba(233,30,99,0.16);
+  --accent-color-opacity4: rgba(233,30,99,0.24);
+}
+
+.secPurple {
+  --accent-color: #9C27B0;
+  --accent-color-light: #CE93D8;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(156,39,176,0.04);
+  --accent-color-opacity2: rgba(156,39,176,0.12);
+  --accent-color-opacity3: rgba(156,39,176,0.16);
+  --accent-color-opacity4: rgba(156,39,176,0.24);
+}
+
+.secDeepPurple {
+  --accent-color: #673AB7;
+  --accent-color-light: #B39DDB;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(103,58,183,0.04);
+  --accent-color-opacity2: rgba(103,58,183,0.12);
+  --accent-color-opacity3: rgba(103,58,183,0.16);
+  --accent-color-opacity4: rgba(103,58,183,0.24);
+}
+
+.secIndigo {
+  --accent-color: #3F51B5;
+  --accent-color-light: #9FA8DA;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(63,81,181,0.04);
+  --accent-color-opacity2: rgba(63,81,181,0.12);
+  --accent-color-opacity3: rgba(63,81,181,0.16);
+  --accent-color-opacity4: rgba(63,81,181,0.24);
+}
+
+.secBlue {
+  --accent-color: #2196F3;
+  --accent-color-light: #90CAF9;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(33,150,243,0.04);
+  --accent-color-opacity2: rgba(33,150,243,0.12);
+  --accent-color-opacity3: rgba(33,150,243,0.16);
+  --accent-color-opacity4: rgba(33,150,243,0.24);
+}
+
+.secLightBlue {
+  --accent-color: #03A9F4;
+  --accent-color-light: #81D4FA;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(3,169,244,0.04);
+  --accent-color-opacity2: rgba(3,169,244,0.12);
+  --accent-color-opacity3: rgba(3,169,244,0.16);
+  --accent-color-opacity4: rgba(3,169,244,0.24);
+}
+
+.secCyan {
+  --accent-color: #00BCD4;
+  --accent-color-light: #80DEEA;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(0,188,212,0.04);
+  --accent-color-opacity2: rgba(0,188,212,0.12);
+  --accent-color-opacity3: rgba(0,188,212,0.16);
+  --accent-color-opacity4: rgba(0,188,212,0.24);
+}
+
+.secTeal {
+  --accent-color: #009688;
+  --accent-color-light: #80CBC4;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(0,150,136,0.04);
+  --accent-color-opacity2: rgba(0,150,136,0.12);
+  --accent-color-opacity3: rgba(0,150,136,0.16);
+  --accent-color-opacity4: rgba(0,150,136,0.24);
+}
+
+.secGreen {
+  --accent-color: #4CAF50;
+  --accent-color-light: #A5D6A7;
+  --text-with-accent-color: #FFFFFF;
+  --accent-color-opacity1: rgba(76,175,80,0.04);
+  --accent-color-opacity2: rgba(76,175,80,0.12);
+  --accent-color-opacity3: rgba(76,175,80,0.16);
+  --accent-color-opacity4: rgba(76,175,80,0.24);
+}
+
+.secLightGreen {
+  --accent-color: #8BC34A;
+  --accent-color-light: #C5E1A5;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(139,195,74,0.04);
+  --accent-color-opacity2: rgba(139,195,74,0.12);
+  --accent-color-opacity3: rgba(139,195,74,0.16);
+  --accent-color-opacity4: rgba(139,195,74,0.24);
+}
+
+.secLime {
+  --accent-color: #CDDC39;
+  --accent-color-light: #E6EE9C;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(205,220,57,0.04);
+  --accent-color-opacity2: rgba(205,220,57,0.12);
+  --accent-color-opacity3: rgba(205,220,57,0.16);
+  --accent-color-opacity4: rgba(205,220,57,0.24);
+}
+
+.secYellow {
+  --accent-color: #FFEB3B;
+  --accent-color-light: #FFF59D;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,235,59,0.04);
+  --accent-color-opacity2: rgba(255,235,59,0.12);
+  --accent-color-opacity3: rgba(255,235,59,0.16);
+  --accent-color-opacity4: rgba(255,235,59,0.24);
+}
+
+.secAmber {
+  --accent-color: #FFC107;
+  --accent-color-light: #FFE082;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,193,7,0.04);
+  --accent-color-opacity2: rgba(255,193,7,0.12);
+  --accent-color-opacity3: rgba(255,193,7,0.16);
+  --accent-color-opacity4: rgba(255,193,7,0.24);
+}
+
+.secOrange {
+  --accent-color: #FF9800;
+  --accent-color-light: #FFCC80;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,152,0,0.04);
+  --accent-color-opacity2: rgba(255,152,0,0.12);
+  --accent-color-opacity3: rgba(255,152,0,0.16);
+  --accent-color-opacity4: rgba(255,152,0,0.24);
+}
+
+.secDeepOrange {
+  --accent-color: #FF5722;
+  --accent-color-light: #FFAB91;
+  --text-with-accent-color: #000000;
+  --accent-color-opacity1: rgba(255,87,34,0.04);
+  --accent-color-opacity2: rgba(255,87,34,0.12);
+  --accent-color-opacity3: rgba(255,87,34,0.16);
+  --accent-color-opacity4: rgba(255,87,34,0.24);
+}
+
 body {
   color: var(--primary-text-color);
   background-color: var(--bg-color);
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index fa02056f..94fc6ef1 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
   position: absolute;
-  top: 0;
+  top: 3px;
   left: 0;
   width: 100%;
   height: 100%;
@@ -982,6 +982,7 @@ body.vjs-full-window {
 
 .video-js .vjs-volume-control.vjs-volume-horizontal {
   width: 5em;
+  top: 3px;
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control {
@@ -1204,7 +1205,7 @@ body.vjs-full-window {
 .video-js .vjs-time-control {
   flex: none;
   font-size: 1em;
-  line-height: 3em;
+  line-height: 4em;
   min-width: 2em;
   width: auto;
   padding-left: 0em;
@@ -1292,7 +1293,7 @@ video::-webkit-media-text-track-display {
 .vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
   position: absolute;
-  top: 30%;
+  top: 16px;
   left: 0;
   width: 100%;
   height: 100%;
@@ -1802,7 +1803,7 @@ video::-webkit-media-text-track-display {
     right: 0;
     width: 100%;
     height: .4em;
-    top: -.4em
+    top: -.1em
 }
 
 .video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder {
@@ -1918,11 +1919,11 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
-    background-color: #cc181e
+    background-color: var(--primary-color)
 }
 
 .video-js .vjs-loading-spinner {
-    border-color: #cc181e
+    border-color: var(--primary-color)
 }
 
 .video-js .vjs-control-bar2 {
@@ -1936,7 +1937,7 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js .vjs-play-progress,.video-js  .vjs-volume-level {
-    background-color: #cc181e
+    background-color: var(--primary-color)
 }
 
 .video-js .vjs-load-progress {
@@ -1981,3 +1982,7 @@ video::-webkit-media-text-track-display {
     pointer-events: none;
     box-shadow: 0 0 7px rgba(0,0,0,.6);
 }
+
+.video-js .vjs-http-source-selector {
+  top: 4px;
+}
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 8ebe1a1f..03dcfa01 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -34,7 +34,8 @@
         </div>
         <ft-button
           label="SUBSCRIBE"
-          background-color="#f44336"
+          background-color="var(--primary-color)"
+          text-color="var(--text-with-main-color)"
           class="subscribeButton"
           @click="handleSubscription"
         />
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index e207c787..4dae8dc5 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
+import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
 import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue'
 
@@ -11,6 +12,7 @@ export default Vue.extend({
     'ft-card': FtCard,
     'ft-element-list': FtElementList,
     'general-settings': GeneralSettings,
+    'theme-settings': ThemeSettings,
     'player-settings': PlayerSettings,
     'subscription-settings': SubscriptionSettings
   },
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 39ac63c2..89a63dcd 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <general-settings />
+    <theme-settings />
     <player-settings />
     <subscription-settings />
   </div>
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 9378167a..3f32e74e 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -53,31 +53,35 @@ export default Vue.extend({
     }
   },
   computed: {
-    backendPreference: function() {
+    backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
 
-    backendFallback: function() {
+    backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
 
-    invidiousInstance: function() {
+    invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
     },
 
-    videoFormatPreference: function() {
-      return this.$store.getters.getVideoFormatPreference
+    defaultVideoFormat: function () {
+      return this.$store.getters.getDefaultVideoFormat
     },
 
-    videoDashUrl: function() {
+    forceLocalBackendForLegacy: function () {
+      return this.$store.getters.getForceLocalBackendForLegacy
+    },
+
+    videoDashUrl: function () {
       return `${this.invidiousInstance}/api/manifest/dash/id/${this.videoId}.mpd`
     },
 
-    youtubeNoCookieEmbeddedFrame: function() {
+    youtubeNoCookieEmbeddedFrame: function () {
       return `<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>`
     },
 
-    dashSrc: function() {
+    dashSrc: function () {
       return [
         {
           url: `${this.invidiousInstance}/api/manifest/dash/${this.videoId}.mpd`,
@@ -100,6 +104,10 @@ export default Vue.extend({
           break
         case 'invidious':
           this.getVideoInformationInvidious(this.videoId)
+
+          if (this.forceLocalBackendForLegacy) {
+            this.getVideoInformationLocal(this.videoId)
+          }
           break
       }
     },
@@ -108,7 +116,7 @@ export default Vue.extend({
     this.videoId = this.$route.params.id
     this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90`
 
-    this.activeFormat = this.videoFormatPreference
+    this.activeFormat = this.defaultVideoFormat
 
     if (this.proxyVideos) {
       this.dashSrc = this.dashSrc + '?local=true'
@@ -116,10 +124,10 @@ export default Vue.extend({
 
     switch (this.backendPreference) {
       case 'local':
-        this.getVideoInformationLocal(this.videoId)
+        this.getVideoInformationLocal()
         break
       case 'invidious':
-        this.getVideoInformationInvidious(this.videoId)
+        this.getVideoInformationInvidious()
         break
     }
   },
@@ -223,7 +231,6 @@ export default Vue.extend({
           this.videoPublished = result.published * 1000
           this.videoDescriptionHtml = result.descriptionHtml
           this.recommendedVideos = result.recommendedVideos
-          this.videoSourceList = result.formatStreams.reverse()
           this.captionSourceList = result.captions.map(caption => {
             caption.url = this.invidiousInstance + caption.url
             caption.type = ''
@@ -231,6 +238,12 @@ export default Vue.extend({
             return caption
           })
 
+          if (this.forceLocalBackendForLegacy) {
+            this.videoSourceList = result.formatStreams.reverse()
+          } else {
+            this.getLegacyFormats()
+          }
+
           this.isLoading = false
         })
         .catch(err => {
@@ -247,7 +260,15 @@ export default Vue.extend({
         })
     },
 
-    enableDashFormat: function() {
+    getLegacyFormats: function () {
+      this.$store
+        .dispatch('ytGetVideoInformation', this.videoId)
+        .then(result => {
+          this.videoSourceList = result.player_response.streamingData.formats
+        })
+    },
+
+    enableDashFormat: function () {
       if (this.activeFormat === 'dash') {
         return
       }
