diff --git a/.gitignore b/.gitignore
index 623bf3e..2b6a4a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ pnpm-debug.log*
 # Custom
 src/assets/deck_of_cards
 src/assets/avatars
+src/assets/navbar
 
 # terraform
 *.terraform
diff --git a/src/App.vue b/src/App.vue
index 0de656f..e41418d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
       app
       :expand-on-hover="true"
       overflow
-      color="#070042"
+      color="#272935"
     >
       <v-list>
         <v-list-item
@@ -18,28 +18,31 @@
           :to="item.link"
         >
           <v-list-item-icon>
-            <v-icon >{{ item.icon }}</v-icon>
+            <!-- <v-icon>{{ item.icon }}</v-icon> -->
+            <v-img :src="item.icon" width="50"></v-img>
           </v-list-item-icon>
 
-          <v-list-item-content >
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          <v-list-item-content>
+            <v-list-item-title class="text-button">{{
+              item.title
+            }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar :clipped-left="false" app color="#070042" >
+    <v-app-bar :clipped-left="false" app color="#272935">
       <v-app-bar-nav-icon
         @click.stop="primaryDrawer.model = !primaryDrawer.model"
       ></v-app-bar-nav-icon>
-      <v-toolbar-title >Onmyoji Deck Builder</v-toolbar-title>
+      <v-toolbar-title>Onmyoji Deck Builder</v-toolbar-title>
     </v-app-bar>
 
     <v-main>
       <router-view></router-view>
     </v-main>
 
-    <v-footer :inset="false" color="#04002E" app>
+    <v-footer :inset="false" color="#272935" app>
       <!-- <span class="px-4"
         >&copy; {{ new Date().getFullYear() }} Daniel Tomlinson</span
       >
@@ -53,12 +56,13 @@
 
 <script>
 import {
-  mdiViewDashboard,
-  mdiCalculator,
-  mdiHelpBox,
   mdiGithub,
 } from "@mdi/js";
 
+const home_icon = require(`@/assets/navbar/0000034a.png`);
+const deck_icon = require(`@/assets/navbar/00000047.png`);
+const help_icon = require(`@/assets/navbar/00000121.png`);
+
 export default {
   name: "App",
 
@@ -66,9 +70,9 @@ export default {
     primaryDrawer: {
       model: true,
       items: [
-        { title: "Home", icon: mdiViewDashboard, link: "/" },
-        { title: "Deck Builder", icon: mdiCalculator, link: "deck-builder" },
-        { title: "Help", icon: mdiHelpBox, link: "help" },
+        { title: "Home", icon: home_icon, link: "/" },
+        { title: "Deck Builder", icon: deck_icon, link: "deck-builder" },
+        { title: "Help", icon: help_icon, link: "help" },
       ],
     },
     icons: {
diff --git a/src/assets/000000c6.png b/src/assets/000000c6.png
new file mode 100644
index 0000000..2954c90
Binary files /dev/null and b/src/assets/000000c6.png differ
diff --git a/src/assets/front_page_shikigami.png b/src/assets/front_page_shikigami.png
deleted file mode 100644
index 2626155..0000000
Binary files a/src/assets/front_page_shikigami.png and /dev/null differ
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 22b974c..8f982b4 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,3 @@
 $material-dark: (
-  'background': #04002E
+  'background': #16192B
 );
diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index 129fb81..61e49cf 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -45,7 +45,7 @@
               x-large
               @click="data.select"
               @click:close="remove_shikigami(data.item)"
-              color="#070042"
+              color="#C0B094"
             >
               <v-avatar size="90" left>
                 <v-img
@@ -76,7 +76,7 @@
       <!-- deck_title: {{ deck_title }} -->
     </v-row>
     <v-row v-for="(_, index) in selected_shikigami_names" :key="index">
-      <v-card elevation="2" width="100%" class="pa-3" flat tile color="#070042">
+      <v-card elevation="2" width="100%" class="pa-3" flat tile color="#171D29">
         <v-row>
           <v-col cols="2">
             <div cols="12">
@@ -118,7 +118,7 @@
                     label
                     @click="data.select"
                     @click:close="remove_decks(index, data.index)"
-                    color="#04002E"
+                    color="#C0B094"
                     >{{ data.item.name }}</v-chip
                   ></template
                 >
@@ -132,7 +132,7 @@
                 v-for="i in selected_shikigami_decks[index][index]"
                 :key="i.id"
                 width="12.3%"
-                color="#070042"
+                color="#171D29"
               >
                 <!-- <div class="text-center">
                   {{ i.name }}
@@ -149,7 +149,6 @@
     </v-row>
     <v-row>
       <!-- <v-textarea :value="construct_url()" color="teal"> </v-textarea> -->
-      <v-textarea :value="construct_url()" color="teal"> </v-textarea>
     </v-row>
   </v-container>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9827ce0..58740bd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,7 +3,7 @@
     <v-row class="text-center">
       <v-col cols="12">
         <v-img
-          :src="require('../assets/front_page_shikigami.png')"
+          :src="require('../assets/000000c6.png')"
           class="my-3"
           contain
           height="500"
@@ -14,7 +14,7 @@
         <h1 class="display-2 font-weight-bold mb-3">Onmyoji Deck Builder</h1>
 
         <p class="subheading font-weight-regular">Build and share decks.</p>
-        <v-btn elevation="1" x-large color="#EA6F1A">Get started</v-btn>
+        <v-btn elevation="1" x-large color="#C0B094">Get started</v-btn>
       </v-col>
     </v-row>
     <!-- <v-row class="text-center">