diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index 1b46046f..f7a5d89c 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -4,7 +4,7 @@
 
     <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
       <div class="flex items-center mb-2">
-        <h1 class="text-xl">Settings</h1>
+        <h1 class="text-xl font-semibold">Settings</h1>
       </div>
 
       <div class="flex items-center py-2">
@@ -27,26 +27,6 @@
         </ui-tooltip>
       </div>
 
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
-        <ui-tooltip :text="tooltips.coverAspectRatio">
-          <p class="pl-4 text-lg">
-            Use square book covers
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
-      <div class="flex items-center py-2">
-        <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
-        <ui-tooltip :text="tooltips.bookshelfView">
-          <p class="pl-4 text-lg">
-            Use alternative bookshelf view
-            <span class="material-icons icon-text">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-
       <div class="flex items-center py-2">
         <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
         <ui-tooltip :text="tooltips.sortingIgnorePrefix">
@@ -66,7 +46,36 @@
       </div>
 
       <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl">Scanner Settings</h1>
+        <h1 class="text-xl font-semibold">Display Settings</h1>
+      </div>
+
+      <div class="flex items-center py-2">
+        <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
+        <ui-tooltip :text="tooltips.coverAspectRatio">
+          <p class="pl-4 text-lg">
+            Use square book covers
+            <span class="material-icons icon-text">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+
+      <div class="flex items-center py-2">
+        <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
+        <ui-tooltip :text="tooltips.bookshelfView">
+          <p class="pl-4 text-lg">
+            Use alternative bookshelf view
+            <span class="material-icons icon-text">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+
+      <div class="flex items-center py-2">
+        <p class="pr-4 text-lg">Date Format</p>
+        <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
+      </div>
+
+      <div class="flex items-center mb-2 mt-8">
+        <h1 class="text-xl font-semibold">Scanner Settings</h1>
       </div>
 
       <div class="flex items-center py-2">
@@ -144,7 +153,7 @@
       </div>
 
       <div class="flex items-center mb-2 mt-8">
-        <h1 class="text-xl">Experimental Feature Settings</h1>
+        <h1 class="text-xl font-semibold">Experimental Feature Settings</h1>
       </div>
 
       <div class="flex items-center py-2">
@@ -156,15 +165,6 @@
           </p>
         </ui-tooltip>
       </div>
-
-      <div clas="flex items-center py-2">
-          <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small @input="(val) => updateSettingsKey('dateFormat', val)" style="width: 10em; display:inline-flex" />
-            <p class="pl-4 text-lg" style="display:inline-flex; vertical-align: top;">
-              Date Format
-              <span class="material-icons icon-text">info_outlined</span>
-            </p>
-      </div>
-
     </div>
 
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
@@ -297,9 +297,6 @@ export default {
     }
   },
   methods: {
-    updateEnableChromecast(val) {
-      this.updateServerSettings({ enableChromecast: val })
-    },
     updateSortingPrefixes(val) {
       if (!val || !val.length) {
         this.$toast.error('Must have at least 1 prefix')
@@ -337,10 +334,12 @@ export default {
         .then((success) => {
           console.log('Updated Server Settings', success)
           this.updatingServerSettings = false
+          this.$toast.success('Server settings updated')
         })
         .catch((error) => {
           console.error('Failed to update server settings', error)
           this.updatingServerSettings = false
+          this.$toast.error('Failed to update server settings')
         })
     },
     initServerSettings() {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index b6e831fc..4e5784b7 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -31,6 +31,7 @@ module.exports = {
         '20': '5rem',
         '24': '6rem',
         '32': '8rem',
+        '40': '10rem',
         '48': '12rem',
         '64': '16rem',
         '80': '20rem'