diff --git a/frontend/src/component/p-navigation.vue b/frontend/src/component/p-navigation.vue
index cb5f0bc30..840711fbc 100644
--- a/frontend/src/component/p-navigation.vue
+++ b/frontend/src/component/p-navigation.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="p-navigation">
-        <v-toolbar dark scroll-off-screen color="dark-background" class="hidden-lg-and-up p-navigation-small"
+        <v-toolbar dark scroll-off-screen color="navigation" class="hidden-lg-and-up p-navigation-small"
                    @click.stop="showNavigation()">
             <v-toolbar-side-icon class="p-navigation-show"></v-toolbar-side-icon>
 
@@ -11,7 +11,7 @@
         <v-navigation-drawer
                 v-model="drawer"
                 :mini-variant="mini"
-                class="p-navigation-sidebar dark-background"
+                class="p-navigation-sidebar navigation"
                 width="270"
                 fixed dark app
         >
diff --git a/frontend/src/component/p-photo-clipboard.vue b/frontend/src/component/p-photo-clipboard.vue
index 80a8c99fd..5a04c0a4d 100644
--- a/frontend/src/component/p-photo-clipboard.vue
+++ b/frontend/src/component/p-photo-clipboard.vue
@@ -12,7 +12,7 @@
     >
         <v-btn
                 slot="activator"
-                color="grey darken-2"
+                color="accent darken-2"
                 dark
                 fab
                 class="p-photo-clipboard-menu"
@@ -90,7 +90,7 @@
                 fab
                 dark
                 small
-                color="grey"
+                color="accent"
                 @click.stop="clearClipboard()"
                 class="p-photo-clipboard-clear"
         >
diff --git a/frontend/src/component/p-photo-details.vue b/frontend/src/component/p-photo-details.vue
index 53162a02d..0e1257c2d 100644
--- a/frontend/src/component/p-photo-details.vue
+++ b/frontend/src/component/p-photo-details.vue
@@ -18,13 +18,13 @@
                 <v-hover>
                     <v-card tile slot-scope="{ hover }"
                             :dark="$clipboard.has(photo)"
-                            :class="$clipboard.has(photo) ? 'elevation-10 ma-0 grey darken-1 white--text' : 'elevation-0 ma-1 grey lighten-3'">
+                            :class="$clipboard.has(photo) ? 'elevation-10 ma-0 accent darken-1 white--text' : 'elevation-0 ma-1 accent lighten-3'">
                         <v-img
                                 :src="photo.getThumbnailUrl('tile_500')"
                                 aspect-ratio="1"
                                 v-bind:class="{ selected: $clipboard.has(photo) }"
                                 style="cursor: pointer"
-                                class="grey lighten-2"
+                                class="accent lighten-2"
                                 @click="openPhoto(index)"
 
                         >
@@ -35,7 +35,7 @@
                                     justify-center
                                     ma-0
                             >
-                                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
+                                <v-progress-circular indeterminate color="accent lighten-5"></v-progress-circular>
                             </v-layout>
 
                             <v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
@@ -43,7 +43,7 @@
                                    class="p-photo-select"
                                    @click.stop.prevent="$clipboard.toggle(photo)">
                                 <v-icon v-if="selection.length && $clipboard.has(photo)" color="white">check_circle</v-icon>
-                                <v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
+                                <v-icon v-else color="accent lighten-3">radio_button_off</v-icon>
                             </v-btn>
 
                             <v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
@@ -52,7 +52,7 @@
                                    @click.stop.prevent="photo.toggleLike()">
                                 <v-icon v-if="photo.PhotoFavorite" color="white">favorite
                                 </v-icon>
-                                <v-icon v-else color="grey lighten-3">favorite_border</v-icon>
+                                <v-icon v-else color="accent lighten-3">favorite_border</v-icon>
                             </v-btn>
                         </v-img>
 
diff --git a/frontend/src/component/p-photo-list.vue b/frontend/src/component/p-photo-list.vue
index 2cee6ed42..531f9a821 100644
--- a/frontend/src/component/p-photo-list.vue
+++ b/frontend/src/component/p-photo-list.vue
@@ -14,8 +14,8 @@
                 <v-btn icon small :ripple="false"
                        class="p-photo-select"
                        @click.stop.prevent="$clipboard.toggle(props.item)">
-                    <v-icon v-if="selection.length && $clipboard.has(props.item)" color="grey darken-2">check_circle</v-icon>
-                    <v-icon v-else-if="!$clipboard.has(props.item)" color="grey lighten-4">radio_button_off</v-icon>
+                    <v-icon v-if="selection.length && $clipboard.has(props.item)" color="accent darken-2">check_circle</v-icon>
+                    <v-icon v-else-if="!$clipboard.has(props.item)" color="accent lighten-4">radio_button_off</v-icon>
                 </v-btn>
             </td>
             <td @click="openPhoto(props.index)" class="p-pointer">{{ props.item.PhotoTitle }}</td>
@@ -26,7 +26,7 @@
                        class="p-photo-like"
                        @click.stop.prevent="props.item.toggleLike()">
                 <v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
-                <v-icon v-else color="grey lighten-4">favorite_border</v-icon>
+                <v-icon v-else color="accent lighten-4">favorite_border</v-icon>
                 </v-btn>
             </td>
         </template>
diff --git a/frontend/src/component/p-photo-mosaic.vue b/frontend/src/component/p-photo-mosaic.vue
index c20c6124a..b26051275 100644
--- a/frontend/src/component/p-photo-mosaic.vue
+++ b/frontend/src/component/p-photo-mosaic.vue
@@ -22,7 +22,7 @@
                             :title="photo.PhotoTitle">
                         <v-img :src="photo.getThumbnailUrl('tile_224')"
                                aspect-ratio="1"
-                               class="grey lighten-2"
+                               class="accent lighten-2"
                                style="cursor: pointer"
                                @click="openPhoto(index)"
                         >
@@ -34,7 +34,7 @@
                                     ma-0
                             >
                                 <v-progress-circular indeterminate
-                                                     color="grey lighten-5"></v-progress-circular>
+                                                     color="accent lighten-5"></v-progress-circular>
                             </v-layout>
 
                             <v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
@@ -42,7 +42,7 @@
                                    class="p-photo-select"
                                    @click.stop.prevent="$clipboard.toggle(photo)">
                                 <v-icon v-if="selection.length && $clipboard.has(photo)" color="white">check_circle</v-icon>
-                                <v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
+                                <v-icon v-else color="accent lighten-3">radio_button_off</v-icon>
                             </v-btn>
 
                             <v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
@@ -50,7 +50,7 @@
                                    class="p-photo-like"
                                    @click.stop.prevent="photo.toggleLike()">
                                 <v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
-                                <v-icon v-else color="grey lighten-3">favorite_border</v-icon>
+                                <v-icon v-else color="accent lighten-3">favorite_border</v-icon>
                             </v-btn>
                         </v-img>
 
diff --git a/frontend/src/component/p-photo-search.vue b/frontend/src/component/p-photo-search.vue
index e1d10c6d8..770a2d826 100644
--- a/frontend/src/component/p-photo-search.vue
+++ b/frontend/src/component/p-photo-search.vue
@@ -1,13 +1,13 @@
 <template>
     <v-form ref="form" autocomplete="off" class="p-photo-search" lazy-validation @submit.prevent="filterChange" dense>
-        <v-toolbar flat color="medium-background">
+        <v-toolbar flat color="secondary">
             <v-text-field class="pt-3 pr-3 p-search-field"
                           autocomplete="off"
                           single-line
                           label="Search"
                           prepend-inner-icon="search"
                           clearable
-                          color="blue-grey"
+                          color="secondary-dark"
                           @click:clear="clearQuery"
                           v-model="filter.q"
                           @keyup.enter.native="filterChange"
@@ -42,7 +42,7 @@
 
         <v-card class="pt-1"
                 flat
-                color="light-background"
+                color="secondary-light"
                 v-show="searchExpanded">
             <v-card-text>
                 <v-layout row wrap>
@@ -50,7 +50,7 @@
                         <v-select @change="dropdownChange"
                                   label="Country"
                                   flat solo hide-details
-                                  color="blue-grey"
+                                  color="secondary-dark"
                                   item-value="LocCountryCode"
                                   item-text="LocCountry"
                                   v-model="filter.country"
@@ -61,7 +61,7 @@
                         <v-select @change="dropdownChange"
                                   label="Camera"
                                   flat solo hide-details
-                                  color="blue-grey"
+                                  color="secondary-dark"
                                   item-value="ID"
                                   item-text="CameraModel"
                                   v-model="filter.camera"
@@ -72,7 +72,7 @@
                         <v-select @change="dropdownChange"
                                   label="View"
                                   flat solo hide-details
-                                  color="blue-grey"
+                                  color="secondary-dark"
                                   v-model="settings.view"
                                   :items="options.views"
                                   id="viewSelect">
@@ -82,7 +82,7 @@
                         <v-select @change="dropdownChange"
                                   label="Sort By"
                                   flat solo hide-details
-                                  color="blue-grey"
+                                  color="secondary-dark"
                                   v-model="filter.order"
                                   :items="options.sorting">
                         </v-select>
diff --git a/frontend/src/component/p-photo-tiles.vue b/frontend/src/component/p-photo-tiles.vue
index 088b11b86..f6268a395 100644
--- a/frontend/src/component/p-photo-tiles.vue
+++ b/frontend/src/component/p-photo-tiles.vue
@@ -22,7 +22,7 @@
                             :title="photo.PhotoTitle">
                         <v-img :src="photo.getThumbnailUrl('tile_500')"
                                aspect-ratio="1"
-                               class="grey lighten-2"
+                               class="accent lighten-2"
                                style="cursor: pointer"
                                @click="openPhoto(index)"
                         >
@@ -34,7 +34,7 @@
                                     ma-0
                             >
                                 <v-progress-circular indeterminate
-                                                     color="grey lighten-5"></v-progress-circular>
+                                                     color="accent lighten-5"></v-progress-circular>
                             </v-layout>
 
                             <v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
@@ -42,7 +42,7 @@
                                    class="p-photo-select"
                                    @click.stop.prevent="$clipboard.toggle(photo)">
                                 <v-icon v-if="selection.length && $clipboard.has(photo)" color="white">check_circle</v-icon>
-                                <v-icon v-else-if="!$clipboard.has(photo)" color="grey lighten-3">radio_button_off</v-icon>
+                                <v-icon v-else-if="!$clipboard.has(photo)" color="accent lighten-3">radio_button_off</v-icon>
                             </v-btn>
 
                             <v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
@@ -50,7 +50,7 @@
                                    class="p-photo-like"
                                    @click.stop.prevent="photo.toggleLike()">
                                 <v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
-                                <v-icon v-else color="grey lighten-3">favorite_border</v-icon>
+                                <v-icon v-else color="accent lighten-3">favorite_border</v-icon>
                             </v-btn>
                         </v-img>
 
diff --git a/frontend/src/component/p-scroll-top.vue b/frontend/src/component/p-scroll-top.vue
index 2ac81aa72..1b91b4ed4 100644
--- a/frontend/src/component/p-scroll-top.vue
+++ b/frontend/src/component/p-scroll-top.vue
@@ -1,7 +1,7 @@
 <template>
     <transition name="fade-transition">
         <v-btn
-                color="grey darken-2"
+                color="accent darken-2"
                 dark
                 fab
                 fixed
diff --git a/frontend/src/pages/albums.vue b/frontend/src/pages/albums.vue
index f35580ba5..17904c332 100644
--- a/frontend/src/pages/albums.vue
+++ b/frontend/src/pages/albums.vue
@@ -3,13 +3,13 @@
          :infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
 
         <v-form ref="form" class="p-albums-search" lazy-validation @submit.prevent="updateQuery" dense>
-            <v-toolbar flat color="blue-grey lighten-4">
+            <v-toolbar flat color="secondary">
                 <v-text-field class="pt-3 pr-3"
                               single-line
                               label="Search"
                               prepend-inner-icon="search"
                               clearable
-                              color="blue-grey"
+                              color="secondary-dark"
                               @click:clear="clearQuery"
                               v-model="filter.q"
                               @keyup.enter.native="updateQuery"
@@ -44,12 +44,12 @@
                             xs6 sm4 md3 lg2 d-flex
                     >
                         <v-hover>
-                            <v-card tile class="elevation-0 ma-1 grey lighten-3">
+                            <v-card tile class="elevation-0 ma-1 accent lighten-3">
                                 <v-img
                                         :src="album.getThumbnailUrl('tile_500')"
                                         aspect-ratio="1"
                                         style="cursor: pointer"
-                                        class="grey lighten-2"
+                                        class="accent lighten-2"
                                         @click.prevent="openAlbum(index)"
                                 >
                                     <v-layout
@@ -59,7 +59,7 @@
                                             justify-center
                                             ma-0
                                     >
-                                        <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
+                                        <v-progress-circular indeterminate color="accent lighten-5"></v-progress-circular>
                                     </v-layout>
                                 </v-img>
 
@@ -69,7 +69,7 @@
                                     <v-btn icon @click.stop.prevent="album.toggleLike()">
                                         <v-icon v-if="album.AlbumFavorite" color="#FFD600">star
                                         </v-icon>
-                                        <v-icon v-else color="grey lighten-2">star</v-icon>
+                                        <v-icon v-else color="accent lighten-2">star</v-icon>
                                     </v-btn>
                                 </v-card-actions>
                             </v-card>
diff --git a/frontend/src/pages/events.vue b/frontend/src/pages/events.vue
index c3b1c896b..07a473b5f 100644
--- a/frontend/src/pages/events.vue
+++ b/frontend/src/pages/events.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-toolbar flat color="blue-grey lighten-4">
+        <v-toolbar flat color="secondary">
             <v-toolbar-title>Events</v-toolbar-title>
 
             <v-spacer></v-spacer>
diff --git a/frontend/src/pages/labels.vue b/frontend/src/pages/labels.vue
index e0b3c6200..8a0e19850 100644
--- a/frontend/src/pages/labels.vue
+++ b/frontend/src/pages/labels.vue
@@ -3,13 +3,13 @@
          :infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
 
         <v-form ref="form" class="p-labels-search" lazy-validation @submit.prevent="updateQuery" dense>
-            <v-toolbar flat color="blue-grey lighten-4">
+            <v-toolbar flat color="secondary">
                 <v-text-field class="pt-3 pr-3"
                               single-line
                               label="Search"
                               prepend-inner-icon="search"
                               clearable
-                              color="blue-grey"
+                              color="secondary-dark"
                               @click:clear="clearQuery"
                               v-model="filter.q"
                               @keyup.enter.native="updateQuery"
@@ -40,12 +40,12 @@
                             xs6 sm4 md3 lg2 d-flex
                     >
                         <v-hover>
-                            <v-card tile class="elevation-0 ma-1 grey lighten-3">
+                            <v-card tile class="elevation-0 ma-1 accent lighten-3">
                                 <v-img
                                         :src="label.getThumbnailUrl('tile_500')"
                                         aspect-ratio="1"
                                         style="cursor: pointer"
-                                        class="grey lighten-2"
+                                        class="accent lighten-2"
                                         @click.prevent="openLabel(index)"
                                 >
                                     <v-layout
@@ -55,7 +55,7 @@
                                             justify-center
                                             ma-0
                                     >
-                                        <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
+                                        <v-progress-circular indeterminate color="accent lighten-5"></v-progress-circular>
                                     </v-layout>
                                 </v-img>
 
@@ -65,7 +65,7 @@
                                     <v-btn icon @click.stop.prevent="label.toggleLike()">
                                         <v-icon v-if="label.LabelFavorite" color="#FFD600">star
                                         </v-icon>
-                                        <v-icon v-else color="grey lighten-2">star</v-icon>
+                                        <v-icon v-else color="accent lighten-2">star</v-icon>
                                     </v-btn>
                                 </v-card-actions>
                             </v-card>
diff --git a/frontend/src/pages/library.vue b/frontend/src/pages/library.vue
index e8fe8b47d..f1ef3e4d9 100644
--- a/frontend/src/pages/library.vue
+++ b/frontend/src/pages/library.vue
@@ -4,8 +4,8 @@
                 v-model="active"
                 flat
                 grow
-                color="blue-grey lighten-4"
-                slider-color="blue-grey darken-1"
+                color="secondary"
+                slider-color="secondary-dark"
                 height="64"
         >
             <v-tab id="tab-upload" v-if="!readonly" ripple @click="changePath('/library/upload')">
diff --git a/frontend/src/pages/library/import.vue b/frontend/src/pages/library/import.vue
index a0bd27a44..2ea932f00 100644
--- a/frontend/src/pages/library/import.vue
+++ b/frontend/src/pages/library/import.vue
@@ -9,11 +9,11 @@
                     <span v-else>Press button to import photos from directory...</span>
                 </p>
 
-                <v-progress-linear color="blue-grey" :value="completed" :indeterminate="busy"></v-progress-linear>
+                <v-progress-linear color="secondary-dark" :value="completed" :indeterminate="busy"></v-progress-linear>
 
                 <v-btn
                         :disabled="busy"
-                        color="blue-grey"
+                        color="secondary-dark"
                         class="white--text ml-0 mt-2"
                         depressed
                         @click.stop="startImport()"
diff --git a/frontend/src/pages/library/index.vue b/frontend/src/pages/library/index.vue
index 7b062ab4a..c98bdf37b 100644
--- a/frontend/src/pages/library/index.vue
+++ b/frontend/src/pages/library/index.vue
@@ -9,11 +9,11 @@
                     <span v-else>Press button to re-index existing files and photos...</span>
                 </p>
 
-                <v-progress-linear color="blue-grey" :value="completed" :indeterminate="busy"></v-progress-linear>
+                <v-progress-linear color="secondary-dark" :value="completed" :indeterminate="busy"></v-progress-linear>
 
                 <v-btn
                         :disabled="busy"
-                        color="blue-grey"
+                        color="secondary-dark"
                         class="white--text ml-0 mt-2"
                         depressed
                         @click.stop="startIndexing()"
diff --git a/frontend/src/pages/library/upload.vue b/frontend/src/pages/library/upload.vue
index d78989d37..ee284762c 100644
--- a/frontend/src/pages/library/upload.vue
+++ b/frontend/src/pages/library/upload.vue
@@ -11,11 +11,11 @@
                     <span v-else-if="completed === 100">Done.</span>
                 </p>
 
-                <v-progress-linear color="blue-grey" v-model="completed" :indeterminate="indexing"></v-progress-linear>
+                <v-progress-linear color="secondary-dark" v-model="completed" :indeterminate="indexing"></v-progress-linear>
 
                 <v-btn
                         :disabled="busy"
-                        color="blue-grey"
+                        color="secondary-dark"
                         class="white--text ml-0 mt-2"
                         depressed
                         @click.stop="uploadDialog()"
diff --git a/frontend/src/pages/login.vue b/frontend/src/pages/login.vue
index 082b09f0f..f013fa83f 100644
--- a/frontend/src/pages/login.vue
+++ b/frontend/src/pages/login.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-page p-page-login">
-        <v-toolbar flat color="blue-grey lighten-4">
+        <v-toolbar flat color="secondary">
             <v-toolbar-title>Login</v-toolbar-title>
 
             <v-spacer></v-spacer>
@@ -13,7 +13,7 @@
             <v-form ref="form" autocomplete="off" class="p-form-login" @submit.prevent="login" dense>
                 <v-text-field
                         label="Password"
-                        color="grey"
+                        color="accent"
                         v-model="password"
                         solo
                         flat
@@ -21,7 +21,7 @@
                         :type="showPassword ? 'text' : 'password'"
                         @click:append="showPassword = !showPassword"
                 ></v-text-field>
-                <v-btn color="blue-grey"
+                <v-btn color="secondary-dark"
                        class="white--text ml-0"
                        depressed
                        @click.stop="login">
diff --git a/frontend/src/pages/people.vue b/frontend/src/pages/people.vue
index 2f660dd48..d68fde6ef 100644
--- a/frontend/src/pages/people.vue
+++ b/frontend/src/pages/people.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-toolbar flat color="blue-grey lighten-4">
+        <v-toolbar flat color="secondary">
             <v-toolbar-title>Not implemented yet</v-toolbar-title>
 
             <v-spacer></v-spacer>
diff --git a/frontend/src/pages/places.vue b/frontend/src/pages/places.vue
index 1d6f027e7..f8fae9458 100644
--- a/frontend/src/pages/places.vue
+++ b/frontend/src/pages/places.vue
@@ -2,7 +2,7 @@
     <v-container fluid fill-height class="pa-0 p-page p-page-places">
         <l-map :zoom="zoom" :center="center" :bounds="bounds" :options="options">
             <l-control position="bottomright">
-                <v-toolbar dense floating color="grey lighten-4" v-on:dblclick.stop v-on:click.stop>
+                <v-toolbar dense floating color="accent lighten-4" v-on:dblclick.stop v-on:click.stop>
                     <v-btn icon v-on:click="currentPosition()">
                         <v-icon>my_location</v-icon>
                     </v-btn>
@@ -12,7 +12,7 @@
                                   label="Search"
                                   prepend-inner-icon="search"
                                   clearable
-                                  color="blue-grey"
+                                  color="secondary-dark"
                                   @click:clear="clearQuery"
                                   v-model="query.q"
                                   @keyup.enter.native="formChange"
diff --git a/frontend/src/pages/settings.vue b/frontend/src/pages/settings.vue
index bc0529087..9a102831e 100644
--- a/frontend/src/pages/settings.vue
+++ b/frontend/src/pages/settings.vue
@@ -4,8 +4,8 @@
                 v-model="active"
                 flat
                 grow
-                color="blue-grey lighten-4"
-                slider-color="blue-grey darken-1"
+                color="secondary"
+                slider-color="secondary-dark"
                 height="64"
         >
             <v-tab id="tab-settings-general" @click="changePath('/settings')">
diff --git a/frontend/src/pages/settings/general.vue b/frontend/src/pages/settings/general.vue
index 5734505ff..10a13d72f 100644
--- a/frontend/src/pages/settings/general.vue
+++ b/frontend/src/pages/settings/general.vue
@@ -7,7 +7,7 @@
                         <v-select
                                 :items="options.languages"
                                 label="Language"
-                                color="blue-grey"
+                                color="secondary-dark"
                                 v-model="settings.language"
                                 flat
                         ></v-select>
@@ -17,14 +17,14 @@
                         <v-select
                                 :items="options.themes"
                                 label="Theme"
-                                color="blue-grey"
+                                color="secondary-dark"
                                 v-model="settings.theme"
                                 flat
                         ></v-select>
                     </v-flex>
                 </v-layout>
 
-                <v-btn color="blue-grey"
+                <v-btn color="secondary-dark"
                        class="white--text ml-0 mt-2"
                        depressed
                        @click.stop="save">
diff --git a/frontend/src/pages/share.vue b/frontend/src/pages/share.vue
index 9d3f705a3..34cbe2aef 100644
--- a/frontend/src/pages/share.vue
+++ b/frontend/src/pages/share.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-toolbar flat color="blue-grey lighten-4">
+        <v-toolbar flat color="secondary">
             <v-toolbar-title>Not implemented yet</v-toolbar-title>
 
             <v-spacer></v-spacer>
diff --git a/frontend/src/pages/todo.vue b/frontend/src/pages/todo.vue
index d6788de46..6f14f5466 100644
--- a/frontend/src/pages/todo.vue
+++ b/frontend/src/pages/todo.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-page p-page-todo">
-        <v-toolbar flat color="blue-grey lighten-4">
+        <v-toolbar flat color="secondary">
             <v-toolbar-title>Not implemented yet</v-toolbar-title>
 
             <v-spacer></v-spacer>
diff --git a/frontend/src/resources/themes.json b/frontend/src/resources/themes.json
index 17c65f93d..0c266c9d7 100644
--- a/frontend/src/resources/themes.json
+++ b/frontend/src/resources/themes.json
@@ -1,8 +1,10 @@
 {
   "default": {
     "primary": "#FFD600",
-    "secondary": "#b0bec5",
-    "accent": "#00B8D4",
+    "secondary-dark": "#607D8B",
+    "secondary": "#CFD8DC",
+    "secondary-light": "#ECEFF1",
+    "accent": "#9E9E9E",
     "error": "#E57373",
     "info": "#00B8D4",
     "success": "#00BFA5",
@@ -10,14 +12,14 @@
     "delete": "#E57373",
     "love": "#EF5350",
     "terminal": "#333333",
-    "dark-background": "#424242",
-    "medium-background": "#CFD8DC",
-    "light-background": "#ECEFF1"
+    "navigation": "#424242"
   },
   "whale": {
     "primary": "#82B1FF",
-    "secondary": "#b0bec5",
-    "accent": "#00B8D4",
+    "secondary-dark": "#757575",
+    "secondary": "#E0E0E0",
+    "secondary-light": "#EEEEEE",
+    "accent": "#9E9E9E",
     "error": "#E57373",
     "info": "#00B8D4",
     "success": "#00BFA5",
@@ -25,14 +27,14 @@
     "delete": "#E57373",
     "love": "#EF5350",
     "terminal": "#333333",
-    "dark-background": "#616161",
-    "medium-background": "#E0E0E0",
-    "light-background": "#EEEEEE"
+    "navigation": "#616161"
   },
   "raspberry": {
     "primary": "#F48FB1",
-    "secondary": "#b0bec5",
-    "accent": "#00B8D4",
+    "secondary-dark": "#757575",
+    "secondary": "#E0E0E0",
+    "secondary-light": "#EEEEEE",
+    "accent": "#9E9E9E",
     "error": "#E57373",
     "info": "#00B8D4",
     "success": "#00BFA5",
@@ -40,8 +42,6 @@
     "delete": "#E57373",
     "love": "#EF5350",
     "terminal": "#333333",
-    "dark-background": "#616161",
-    "medium-background": "#E0E0E0",
-    "light-background": "#EEEEEE"
+    "navigation": "#616161"
   }
 }