diff --git a/storage/settings.go b/storage/settings.go
index 71befdd..62aa8e2 100644
--- a/storage/settings.go
+++ b/storage/settings.go
@@ -9,6 +9,9 @@ func settingsDefaults() map[string]interface{} {
 		"feed_list_width": 300,
 		"item_list_width": 300,
 		"sort_newest_first": true,
+		"theme_name": "light",
+		"theme_font": "",
+		"theme_size": 1,
 	}
 }
 
diff --git a/template/index.html b/template/index.html
index e9aa28b..ed6cd1c 100644
--- a/template/index.html
+++ b/template/index.html
@@ -182,27 +182,27 @@
                     <div class="p-1" style="width: 200px;">
                         <div class="d-flex">
                             <label class="themepicker">
-                                <input type="radio" name="settingsTheme" value="light" v-model="settings.theme">
+                                <input type="radio" name="settingsTheme" value="light" v-model="theme.name">
                                 <div class="themepicker-label appearance-option"></div>
                             </label>
                             <label class="themepicker">
-                                <input type="radio" name="settingsTheme" value="sepia" v-model="settings.theme">
+                                <input type="radio" name="settingsTheme" value="sepia" v-model="theme.name">
                                 <div class="themepicker-label appearance-option"></div>
                             </label>
                             <label class="themepicker">
-                                <input type="radio" name="settingsTheme" value="night" v-model="settings.theme">
+                                <input type="radio" name="settingsTheme" value="night" v-model="theme.name">
                                 <div class="themepicker-label appearance-option"></div>
                             </label>
                         </div>
                         <div class="mt-2">
                             <label class="selectgroup">
-                                <input type="radio" name="font" value="" v-model="settings.font">
+                                <input type="radio" name="font" value="" v-model="theme.font">
                                 <div class="selectgroup-label appearance-option">
                                     System Default
                                 </div>
                             </label>
                             <label class="selectgroup" v-for="f in availableFonts" :key="f">
-                                <input type="radio" name="font" :value="f" v-model="settings.font">
+                                <input type="radio" name="font" :value="f" v-model="theme.font">
                                 <div class="selectgroup-label appearance-option":style="{'font-family': f}">
                                     {{ f }}
                                 </div>
@@ -224,7 +224,7 @@
                     <time>{{ formatDate(itemSelectedDetails.date) }}</time>
                 </div>
                 <hr>
-                <div class="content" :style="{'font-family': settings.font, 'font-size': settings.size + 'rem'}">
+                <div class="content" :style="{'font-family': theme.font, 'font-size': theme.size + 'rem'}">
                     <div v-html="$sanitize(itemSelectedReadability)" v-if="itemSelectedReadability"></div>
                     <div v-html="$sanitize(itemSelectedDetails.content)" v-else-if="itemSelectedDetails.content"></div>
                     <div v-html="$sanitize(itemSelectedDetails.description)" v-else-if="itemSelectedDetails.description"></div>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index 0c24810..aef9ab6 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -132,6 +132,9 @@ var vm = new Vue({
       vm.itemSortNewestFirst = data.sort_newest_first
       vm.feedListWidth = data.feed_list_width || 300
       vm.itemListWidth = data.item_list_width || 300
+      vm.theme.name = data.theme_name
+      vm.theme.font = data.theme_font
+      vm.theme.size = data.theme_size
       vm.refreshItems()
     })
     this.refreshFeeds()
@@ -164,10 +167,10 @@ var vm = new Vue({
       },
       'availableFonts': FONTS.filter(fontAvailable),
       'feedStats': {},
-      'settings': {
+      'theme': {
+        'name': 'light',
         'font': '',
-        'theme': 'light',
-        'size': 1.0,
+        'size': 1,
       },
     }
   },
@@ -223,10 +226,15 @@ var vm = new Vue({
     },
   },
   watch: {
-    'settings': {
+    'theme': {
       deep: true,
-      handler: function(newVal) {
-        document.body.classList.value = 'theme-' + newVal.theme
+      handler: function(theme) {
+        document.body.classList.value = 'theme-' + theme.name
+        api.settings.update({
+          theme_name: theme.name,
+          theme_font: theme.font,
+          theme_size: theme.size,
+        })
       },
     },
     'feedStats': {
@@ -495,8 +503,7 @@ var vm = new Vue({
       this.feedNewChoiceSelected = ''
     },
     incrFont: function(x) {
-      console.log(x, this.settings.size)
-      this.settings.size = +(this.settings.size + (0.1 * x)).toFixed(1)
+      this.theme.size = +(this.theme.size + (0.1 * x)).toFixed(1)
     },
     fetchAllFeeds: function() {
       api.feeds.refresh()