diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index cb4aedc..ee99726 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="entry gridVideoRenderer accent"
+    class="entry gridVideoRenderer background"
     :to="`/watch?v=${video.videoId}`"
     flat
   >
diff --git a/NUXT/components/bottomNavigation.vue b/NUXT/components/bottomNavigation.vue
index 98d08d5..09c7723 100644
--- a/NUXT/components/bottomNavigation.vue
+++ b/NUXT/components/bottomNavigation.vue
@@ -2,7 +2,7 @@
   <v-bottom-navigation
     v-model="tabSelection"
     shift
-    class="bottomNav py-4 accent"
+    class="bottomNav py-4 background"
   >
     <v-btn
       v-for="(item, i) in tabs"
diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue
index a7aee1d..6c24581 100644
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="entry gridVideoRenderer accent"
+    class="entry gridVideoRenderer background"
     :to="`/watch?v=${video.videoId}`"
     flat
   >
diff --git a/NUXT/components/topNavigation.vue b/NUXT/components/topNavigation.vue
index 2e07c22..7e3810f 100644
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
     style="height: 4rem !important; display: flex; box-shadow: none !important"
-    color="accent"
+    color="background"
     class="rounded-0 pa-3 topNav"
   >
     <h3 v-show="!search" class="my-auto ml-4" v-text="page" />
@@ -22,7 +22,8 @@
       dense
       flat
       label="Search"
-      class="searchBar"
+      style="margin-top: 1px"
+      background-color="background lighten-1"
       @input="$emit('text-changed', text)"
       @keyup.enter="$emit('search-btn', text)"
     />
@@ -30,6 +31,7 @@
     <v-spacer v-if="!search" />
 
     <v-btn
+      v-if="!search"
       v-show="page == 'Home'"
       icon
       tile
@@ -103,7 +105,4 @@ export default {
   margin-left: 2em;
   /*transform: translateY(-2.5%);*/
 }
-.searchBar {
-  margin: 0;
-}
 </style>
diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 34e4a49..b6438d7 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -9,7 +9,7 @@
       @scroll-to-top="$refs.pgscroll.scrollTop = 0"
     />
 
-    <div class="accent" style="height: 100%; margin-top: 4rem">
+    <div class="background" style="height: 100%; margin-top: 4rem">
       <div
         v-show="!search"
         class="background"
@@ -32,7 +32,7 @@
 
       <div
         v-show="search"
-        class="accent"
+        class="background"
         style="
           padding: 0;
           overflow: hidden;
diff --git a/NUXT/nuxt.config.js b/NUXT/nuxt.config.js
index e3ad2af..b5e243b 100644
--- a/NUXT/nuxt.config.js
+++ b/NUXT/nuxt.config.js
@@ -60,18 +60,22 @@ export default {
             base: colors.red.lighten2,
             lighten2: colors.red.lighten4,
           },
-          background: "#fff",
-          accent: "#fff",
-          info: "#000",
+          background: {
+            base: "#fff",
+            lighten1: "#eee",
+            lighten2: "#ddd",
+          },
         },
         dark: {
           primary: {
             base: colors.red.darken2,
             lighten2: "#533",
           },
-          background: "#333",
-          accent: "#222",
-          info: "#fff",
+          background: {
+            base: "#222",
+            lighten1: "#282828",
+            lighten2: "#333",
+          },
         },
       },
     },
diff --git a/NUXT/pages/index.vue b/NUXT/pages/index.vue
index 55c0589..a93db00 100644
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@@ -30,24 +30,24 @@ export default {
         this.$vuetify.theme.dark = darkTheme;
         //this.$vuetube.statusBar.setDark(); //Not needed unless setLight() is used below -Front
         this.$vuetube.statusBar.setBackground(
-          this.$vuetify.theme.themes.dark.accent
+          this.$vuetify.theme.themes.dark.background
         );
 
         const isOled = localStorage.getItem("isOled");
 
         if (isOled == "true") {
-          (this.$vuetify.theme.themes.dark.accent = "#000"),
-            (this.$vuetify.theme.themes.dark.accent = "#000"),
+          (this.$vuetify.theme.themes.dark.background = "#000"),
+            (this.$vuetify.theme.themes.dark.background = "#000"),
             (this.$vuetify.theme.themes.dark.background = "#000");
         } else {
-          (this.$vuetify.theme.themes.dark.accent = "#222"),
-            (this.$vuetify.theme.themes.dark.accent = "#222"),
+          (this.$vuetify.theme.themes.dark.background = "#222"),
+            (this.$vuetify.theme.themes.dark.background = "#222"),
             (this.$vuetify.theme.themes.dark.background = "#333");
         }
       } else {
         //this.$vuetube.statusBar.setLight() //Looks weird -Front
         this.$vuetube.statusBar.setBackground(
-          this.$vuetify.theme.themes.light.accent
+          this.$vuetify.theme.themes.light.background
         );
       }
     }, 0);
diff --git a/NUXT/pages/mods/theme.vue b/NUXT/pages/mods/theme.vue
index 641060e..4a721a4 100644
--- a/NUXT/pages/mods/theme.vue
+++ b/NUXT/pages/mods/theme.vue
@@ -37,13 +37,13 @@
     </v-card>
 
     <v-card class="pb-5">
-      <v-card-title>Accent Color</v-card-title>
+      <v-card-title>background Color</v-card-title>
       <v-card-text>
         <v-alert color="primary" dense outlined type="warning"
           >NOTE: This doesn't save after closing the app (yet)</v-alert
         >
         <v-color-picker
-          v-model="accentColor"
+          v-model="backgroundColor"
           dot-size="5"
           hide-mode-switch
           mode="hexa"
@@ -57,12 +57,12 @@
 export default {
   data() {
     return {
-      accentColor: "#ffffff",
+      backgroundColor: "#ffffff",
     };
   },
 
   watch: {
-    accentColor: function (val) {
+    backgroundColor: function (val) {
       this.$vuetify.theme.currentTheme.primary.base = val;
       let primaryAlt = this.$vuetube.hexToRgb(val);
 
@@ -86,24 +86,24 @@ export default {
   },
 
   mounted() {
-    this.accentColor = this.$vuetify.theme.themes.dark.primary.base;
+    this.backgroundColor = this.$vuetify.theme.themes.dark.primary.base;
   },
 
   methods: {
     amoled() {
       this.$vuetify.theme.themes.dark.background === "#000"
-        ? ((this.$vuetify.theme.themes.dark.accent = "#222"),
-          (this.$vuetify.theme.themes.dark.accent = "#222"),
+        ? ((this.$vuetify.theme.themes.dark.background = "#222"),
+          (this.$vuetify.theme.themes.dark.background = "#222"),
           (this.$vuetify.theme.themes.dark.background = "#333"),
           localStorage.setItem("isOled", false))
-        : ((this.$vuetify.theme.themes.dark.accent = "#000"),
-          (this.$vuetify.theme.themes.dark.accent = "#000"),
+        : ((this.$vuetify.theme.themes.dark.background = "#000"),
+          (this.$vuetify.theme.themes.dark.background = "#000"),
           (this.$vuetify.theme.themes.dark.background = "#000"),
           localStorage.setItem("isOled", true));
     },
     saveTheme(isDark) {
       this.$vuetube.statusBar.setBackground(
-        this.$vuetify.theme.currentTheme.accent
+        this.$vuetify.theme.currentTheme.background
       );
       localStorage.setItem("darkTheme", isDark);
     },
diff --git a/NUXT/pages/search.vue b/NUXT/pages/search.vue
index ec410ea..efa8413 100644
--- a/NUXT/pages/search.vue
+++ b/NUXT/pages/search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="accent">
+  <div class="background">
     <!--   Video Loading Animation   -->
     <vid-load-renderer v-if="renderer.length <= 0" />
     <sectionListRenderer :render="renderer" />
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 0e463e3..3a92c9d 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="accent">
+  <div class="background">
     <videoPlayer :vid-src="vidSrc" />
-    <v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
+    <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
       <v-card-title
         class="mt-2"
         style="
@@ -57,7 +57,7 @@
 
       <!-- <v-bottom-sheet
         v-model="showMore"
-        color="accent"
+        color="background"
         style="z-index: 9999999"
       >
         <v-sheet style="padding: 1em">
@@ -70,7 +70,7 @@
           </div>
         </v-sheet>
       </v-bottom-sheet> -->
-      <!-- <v-bottom-sheet v-model="share" color="accent" style="z-index: 9999999">
+      <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
         <v-sheet style="padding: 1em">
           <div class="scroll-y">
             {{ description }}