diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index df1c7922..830c2a63 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -1,20 +1,21 @@
 <template>
   <div>
     <!-- <div class="h-0.5 bg-primary bg-opacity-50 w-full" /> -->
-    <div class="sm:flex bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8" style="background-color: ">
+    
+    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8" style="background-color: ">
+    <div class="" style="background-color: ">
+      <h1 class="text-xl mb-2">Settings</h1>
+    </div>
 
+    <div class="sm:flex">
       <div id="firstcolumn" class="flex-1" style="background-color: ">
-        <div class="mb-2">
-          <h1 class="text-xl">Settings</h1>
-        </div>
-
-        <div class="mb-2">
-          <h1 class="text-xl font-semibold">General</h1>
+        <div class="">
+          <h2 class="font-semibold">General</h2>
         </div>
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
             <ui-tooltip :text="tooltips.storeCoverWithItem">
-              <p class="pl-4 text-lg">
+              <p class="pl-4">
                 Store covers with item
                 <span class="material-icons icon-text">info_outlined</span>
               </p>
@@ -24,7 +25,7 @@
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
             <ui-tooltip :text="tooltips.storeMetadataWithItem">
-              <p class="pl-4 text-lg">
+              <p class="pl-4">
                 Store metadata with item
                 <span class="material-icons icon-text">info_outlined</span>
               </p>
@@ -34,7 +35,7 @@
           <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">
-              <p class="pl-4 text-lg">
+              <p class="pl-4">
                 Ignore prefixes when sorting title and series
                 <span class="material-icons icon-text">info_outlined</span>
               </p>
@@ -46,17 +47,17 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
-            <p class="pl-4 text-lg">Enable Chromecast</p>
+            <p class="pl-4">Enable Chromecast</p>
           </div>
 
-        <div class="flex items-center mb-2 mt-8">
-          <h1 class="text-xl font-semibold">Display</h1>
+        <div class="mt-4">
+          <h2 class="font-semibold">Display</h2>
         </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">
+            <p class="pl-4">
               Use square book covers
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -66,7 +67,7 @@
         <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">
+            <p class="pl-4">
               Use alternative bookshelf view
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -74,20 +75,20 @@
         </div>
 
         <div class="flex items-center py-2">
-          <p class="pr-4 text-lg">Date Format</p>
+          <p class="pr-4 ">Date Format</p>
           <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
         </div>
       </div>
 
       <div id="secondcolumn" class="flex-1" style="background-color: ">
-        <div class="flex items-center mb-2 mt-8">
-          <h1 class="text-xl font-semibold">Scanner</h1>
+        <div class="">
+          <h2 class="font-semibold">Scanner</h2>
         </div>
 
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" />
           <ui-tooltip :text="tooltips.scannerParseSubtitle">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Scanner parse subtitles
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -97,7 +98,7 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" />
           <ui-tooltip :text="tooltips.scannerFindCovers">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Scanner find covers
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -111,7 +112,7 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerPreferAudioMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferAudioMetadata', val)" />
           <ui-tooltip :text="tooltips.scannerPreferAudioMetadata">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Scanner prefer audio metadata
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -121,7 +122,7 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerPreferOverdriveMediaMarker" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOverdriveMediaMarker', val)" />
           <ui-tooltip :text="tooltips.scannerPreferOverdriveMediaMarker">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Scanner prefer Overdrive Media Markers for chapters
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -131,7 +132,7 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerPreferOpfMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOpfMetadata', val)" />
           <ui-tooltip :text="tooltips.scannerPreferOpfMetadata">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Scanner prefer OPF metadata
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -141,7 +142,7 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" />
           <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Scanner prefer matched metadata
               <span class="material-icons icon-text">info_outlined</span>
             </p>
@@ -151,22 +152,22 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" />
           <ui-tooltip :text="tooltips.scannerDisableWatcher">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Disable Watcher
               <span class="material-icons icon-text">info_outlined</span>
             </p>
           </ui-tooltip>
         </div>
 
-        <div class="flex items-center mb-2 mt-8">
-          <h1 class="text-xl font-semibold">Experimental Features</h1>
+        <div class="mt-4">
+          <h2 class="font-semibold">Experimental Features</h2>
         </div>
 
         <div>
           <div class="flex items-center">
             <ui-toggle-switch v-model="showExperimentalFeatures" />
             <ui-tooltip :text="tooltips.experimentalFeatures">
-              <p class="pl-4 text-lg">
+              <p class="pl-4">
                 Experimental Features
                 <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
                   <span class="material-icons icon-text">info_outlined</span>
@@ -179,13 +180,14 @@
         <div class="flex items-center py-2">
           <ui-toggle-switch v-model="newServerSettings.enableEReader" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('enableEReader', val)" />
           <ui-tooltip :text="tooltips.enableEReader">
-            <p class="pl-4 text-lg">
+            <p class="pl-4">
               Enable e-reader for all users
               <span class="material-icons icon-text">info_outlined</span>
             </p>
           </ui-tooltip>
         </div>
-        
+
+      </div>
       </div>
     </div>
 
@@ -232,10 +234,10 @@
 
     <prompt-dialog v-model="showConfirmPurgeCache" :width="675">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p class="text-error text-lg font-semibold">Important Notice!</p>
-        <p class="text-lg my-2 text-center">Purge cache will delete the entire directory at <span class="font-mono">/metadata/cache</span>.</p>
+        <p class="text-error  font-semibold">Important Notice!</p>
+        <p class=" my-2 text-center">Purge cache will delete the entire directory at <span class="font-mono">/metadata/cache</span>.</p>
 
-        <p class="text-lg text-center mb-8">Are you sure you want to remove the cache directory?</p>
+        <p class=" text-center mb-8">Are you sure you want to remove the cache directory?</p>
         <div class="flex px-1 items-center">
           <ui-btn color="primary" @click="showConfirmPurgeCache = false">Nevermind</ui-btn>
           <div class="flex-grow" />