diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
new file mode 100644
index 00000000..4c1f24ed
--- /dev/null
+++ b/client/components/app/SettingsContent.vue
@@ -0,0 +1,48 @@
+<template>
+  <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">{{ headerText }}</h1>
+
+      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
+        <span class="material-icons" style="font-size: 1.4rem">add</span>
+      </div>
+    </div>
+
+    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerText: String,
+    description: String,
+    note: String,
+    showAddButton: Boolean
+  },
+  methods: {
+    clicked() {
+      this.$emit('clicked')
+    }
+  }
+}
+</script>
+
+<style>
+#settings-description a {
+  color: rgb(96 165 250);
+}
+#settings-description a:hover {
+  color: rgb(147 197 253);
+  text-decoration-line: underline;
+}
+#settings-description code {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>
\ No newline at end of file
diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 8fb644ea..d243fe31 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -1,12 +1,5 @@
 <template>
-  <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">{{ $strings.HeaderUsers }}</h1>
-      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
-      </div>
-    </div>
-
+  <div>
     <div class="text-center">
       <table id="accounts">
         <tr>
diff --git a/client/components/tables/library/LibrariesTable.vue b/client/components/tables/library/LibrariesTable.vue
index e40f6583..90e4cf1a 100644
--- a/client/components/tables/library/LibrariesTable.vue
+++ b/client/components/tables/library/LibrariesTable.vue
@@ -1,11 +1,5 @@
 <template>
-  <div id="librariesTable" 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">{{ $strings.HeaderLibraries }}</h1>
-      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
-      </div>
-    </div>
+  <div id="librariesTable">
     <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
         <div :key="library.id" class="item">
diff --git a/client/pages/config/backups.vue b/client/pages/config/backups.vue
index edb9fe08..36071aa3 100644
--- a/client/pages/config/backups.vue
+++ b/client/pages/config/backups.vue
@@ -1,13 +1,6 @@
 <template>
-  <div class="w-full h-full">
-    <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">{{ $strings.HeaderBackups }}</h1>
-      </div>
-
-      <p class="text-base mb-2 text-gray-300">{{ $strings.MessageBackupsDescription }} <span class="font-mono text-gray-100">/metadata/items</span> & <span class="font-mono text-gray-100">/metadata/authors</span>.</p>
-      <p class="text-base mb-4 text-gray-300">{{ $strings.MessageBackupsNote }}</p>
-
+  <div>
+    <app-settings-content :header-text="$strings.HeaderBackups" :description="$strings.MessageBackupsDescription">
       <div class="flex items-center py-2">
         <ui-toggle-switch v-model="enableBackups" small :disabled="updatingServerSettings" @input="updateBackupsSettings" />
         <ui-tooltip :text="$strings.LabelBackupsEnableAutomaticBackupsHelp">
@@ -40,9 +33,7 @@
       </div>
 
       <tables-backups-table />
-    </div>
-
-    <modals-backup-schedule-modal v-model="showCronBuilder" :cron-expression.sync="cronExpression" />
+    </app-settings-content>
   </div>
 </template>
 
diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index 5e25c8a6..9f466763 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-2">
-      <div class="mb-2">
-        <h1 class="text-xl">{{ $strings.HeaderSettings }}</h1>
-      </div>
-
+    <app-settings-content :header-text="$strings.HeaderSettings">
       <div class="lg:flex">
         <div class="flex-1">
           <div class="pt-4">
@@ -199,7 +195,7 @@
           </div> -->
         </div>
       </div>
-    </div>
+    </app-settings-content>
 
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
 
@@ -209,6 +205,7 @@
       <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">{{ $strings.ButtonPurgeItemsCache }}</ui-btn>
       <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">{{ $strings.ButtonRemoveAllLibraryItems }}</ui-btn>
     </div>
+
     <div class="flex items-center py-4">
       <div class="flex-grow" />
       <p class="pr-2 text-sm font-book text-yellow-400">
diff --git a/client/pages/config/libraries.vue b/client/pages/config/libraries.vue
index 0c4762ce..6f892a96 100644
--- a/client/pages/config/libraries.vue
+++ b/client/pages/config/libraries.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
-    <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
-
+    <app-settings-content :header-text="$strings.HeaderLibraries" show-add-button @clicked="setShowLibraryModal">
+      <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
+    </app-settings-content>
     <modals-libraries-edit-modal v-model="showLibraryModal" :library="selectedLibrary" />
   </div>
 </template>
diff --git a/client/pages/config/library-stats.vue b/client/pages/config/library-stats.vue
index 8fd69f69..181946f6 100644
--- a/client/pages/config/library-stats.vue
+++ b/client/pages/config/library-stats.vue
@@ -1,66 +1,67 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <h1 class="text-xl">{{ $strings.HeaderLibraryStats }}: {{ currentLibraryName }}</h1>
-    <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
+  <div>
+    <app-settings-content :header-text="$strings.HeaderLibraryStats + ': ' + currentLibraryName">
+      <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
 
-    <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
-      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop5Genres }}</h1>
-        <p v-if="!top5Genres.length">{{ $strings.MessageNoGenres }}</p>
-        <template v-for="genre in top5Genres">
-          <div :key="genre.genre" class="w-full py-2">
-            <div class="flex items-end mb-1">
-              <p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
-              <div class="flex-grow" />
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base font-book text-white text-opacity-70 hover:underline">
-                {{ genre.genre }}
-              </nuxt-link>
+      <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop5Genres }}</h1>
+          <p v-if="!top5Genres.length">{{ $strings.MessageNoGenres }}</p>
+          <template v-for="genre in top5Genres">
+            <div :key="genre.genre" class="w-full py-2">
+              <div class="flex items-end mb-1">
+                <p class="text-2xl font-bold">{{ Math.round((100 * genre.count) / totalItems) }}&nbsp;%</p>
+                <div class="flex-grow" />
+                <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(genre.genre)}`" class="text-base font-book text-white text-opacity-70 hover:underline">
+                  {{ genre.genre }}
+                </nuxt-link>
+              </div>
+              <div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
+                <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * genre.count) / totalItems) + '%' }" />
+              </div>
             </div>
-            <div class="w-full rounded-full h-3 bg-primary bg-opacity-50 overflow-hidden">
-              <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * genre.count) / totalItems) + '%' }" />
+          </template>
+        </div>
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop10Authors }}</h1>
+          <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
+          <template v-for="(author, index) in top10Authors">
+            <div :key="author.id" class="w-full py-2">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-36 pr-2 truncate">
+                  {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
+                </p>
+                <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                  <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
+                </div>
+                <div class="w-4 ml-3">
+                  <p class="text-sm font-bold">{{ author.count }}</p>
+                </div>
+              </div>
             </div>
-          </div>
-        </template>
+          </template>
+        </div>
+        <div class="w-80 my-6 mx-auto">
+          <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsLongestItems }}</h1>
+          <p v-if="!top10LongestItems.length">{{ $strings.MessageNoItems }}</p>
+          <template v-for="(ab, index) in top10LongestItems">
+            <div :key="index" class="w-full py-2">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-44 pr-2 truncate">
+                  {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
+                </p>
+                <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
+                  <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
+                </div>
+                <div class="w-4 ml-3">
+                  <p class="text-sm font-bold">{{ (ab.duration / 3600).toFixed(1) }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
-      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsTop10Authors }}</h1>
-        <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
-        <template v-for="(author, index) in top10Authors">
-          <div :key="author.id" class="w-full py-2">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-36 pr-2 truncate">
-                {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}</nuxt-link>
-              </p>
-              <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * author.count) / mostUsedAuthorCount) + '%' }" />
-              </div>
-              <div class="w-4 ml-3">
-                <p class="text-sm font-bold">{{ author.count }}</p>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsLongestItems }}</h1>
-        <p v-if="!top10LongestItems.length">{{ $strings.MessageNoItems }}</p>
-        <template v-for="(ab, index) in top10LongestItems">
-          <div :key="index" class="w-full py-2">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-44 pr-2 truncate">
-                {{ index + 1 }}.&nbsp;&nbsp;&nbsp;&nbsp;<nuxt-link :to="`/item/${ab.id}`" class="hover:underline">{{ ab.title }}</nuxt-link>
-              </p>
-              <div class="flex-grow rounded-full h-2.5 bg-primary bg-opacity-0 overflow-hidden">
-                <div class="bg-yellow-400 h-full rounded-full" :style="{ width: Math.round((100 * ab.duration) / longestItemDuration) + '%' }" />
-              </div>
-              <div class="w-4 ml-3">
-                <p class="text-sm font-bold">{{ (ab.duration / 3600).toFixed(1) }}</p>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
+    </app-settings-content>
   </div>
 </template>
 
diff --git a/client/pages/config/log.vue b/client/pages/config/log.vue
index 12714121..aa172d2d 100644
--- a/client/pages/config/log.vue
+++ b/client/pages/config/log.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="w-full h-full">
-    <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">{{ $strings.HeaderLogs }}</h1>
-      </div>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderLogs">
       <div class="flex justify-between mb-2 place-items-end">
         <ui-text-input ref="input" v-model="search" placeholder="Search filter.." @input="inputUpdate" clearable class="w-full sm:w-40 h-8 text-sm sm:mb-0" />
 
@@ -25,7 +22,7 @@
           <p class="text-xl text-gray-200 mb-2">{{ $strings.MessageNoLogs }}</p>
         </div>
       </div>
-    </div>
+    </app-settings-content>
   </div>
 </template>
 
diff --git a/client/pages/config/notifications.vue b/client/pages/config/notifications.vue
index 05e00cb1..cd434db8 100644
--- a/client/pages/config/notifications.vue
+++ b/client/pages/config/notifications.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
-    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-3 md:p-8 mb-2 max-w-3xl mx-auto">
-      <h2 class="text-xl font-semibold mb-4">{{ $strings.HeaderAppriseNotificationSettings }}</h2>
-      <p id="appriseDescription" class="mb-6 text-gray-200" v-html="$strings.MessageAppriseDescription" />
-
+    <app-settings-content :header-text="$strings.HeaderAppriseNotificationSettings" :description="$strings.MessageAppriseDescription">
       <form @submit.prevent="submitForm">
         <ui-text-input-with-label ref="apiUrlInput" v-model="appriseApiUrl" :disabled="savingSettings" label="Apprise API Url" class="mb-2" />
 
@@ -41,7 +38,7 @@
       <template v-for="notification in notifications">
         <cards-notification-card :key="notification.id" :notification="notification" @update="updateSettings" @edit="editNotification" />
       </template>
-    </div>
+    </app-settings-content>
 
     <modals-notification-edit-modal v-model="showEditModal" :notification="selectedNotification" :notification-data="notificationData" @update="updateSettings" />
   </div>
@@ -170,21 +167,4 @@ export default {
     this.$root.socket.off('notifications_updated', this.notificationsUpdated)
   }
 }
-</script>
-
-<style>
-#appriseDescription a {
-  color: rgb(96 165 250);
-}
-#appriseDescription a:hover {
-  color: rgb(147 197 253);
-  text-decoration-line: underline;
-}
-#appriseDescription code {
-  font-size: 0.875rem;
-  border-radius: 6px;
-  background-color: rgb(82, 82, 82);
-  color: white;
-  padding: 2px 4px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/client/pages/config/sessions.vue b/client/pages/config/sessions.vue
index 4f51d511..2e417ce5 100644
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@@ -1,10 +1,6 @@
 <template>
-  <div class="w-full h-full">
-    <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">{{ $strings.HeaderListeningSessions }}</h1>
-      </div>
-
+  <div>
+    <app-settings-content :header-text="$strings.HeaderListeningSessions">
       <div class="flex justify-end mb-2">
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
       </div>
@@ -56,7 +52,7 @@
         </div>
       </div>
       <p v-else class="text-white text-opacity-50">{{ $strings.MessageNoListeningSessions }}</p>
-    </div>
+    </app-settings-content>
 
     <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" @removedSession="removedSession" />
   </div>
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 0c10dc44..70f5058f 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -1,69 +1,68 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <h1 class="text-xl">{{ $strings.HeaderYourStats }}</h1>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderYourStats">
+      <div class="flex justify-center">
+        <div class="flex p-2">
+          <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
+            />
+          </svg>
+          <div class="px-3">
+            <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+          </div>
+        </div>
 
-    <div class="flex justify-center">
-      <div class="flex p-2">
-        <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
-          />
-        </svg>
-        <div class="px-3">
-          <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+        <div class="flex p-2">
+          <div class="hidden sm:block">
+            <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span>
+          </div>
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
+          </div>
+        </div>
+
+        <div class="flex p-2">
+          <div class="hidden sm:block">
+            <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span>
+          </div>
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
+          </div>
         </div>
       </div>
-
-      <div class="flex p-2">
-        <div class="hidden sm:block">
-          <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span>
-        </div>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
-        </div>
-      </div>
-
-      <div class="flex p-2">
-        <div class="hidden sm:block">
-          <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span>
-        </div>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
-      <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
-      <div class="w-80 my-6 mx-auto">
-        <div class="flex mb-4 items-center">
-          <h1 class="text-2xl font-book">{{ $strings.HeaderStatsRecentSessions }}</h1>
-          <div class="flex-grow" />
-          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
-        </div>
-        <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
-        <template v-for="(item, index) in mostRecentListeningSessions">
-          <div :key="item.id" class="w-full py-0.5">
-            <div class="flex items-center mb-1">
-              <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
-              <div class="w-56">
-                <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
-                <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
-              </div>
-              <div class="flex-grow" />
-              <div class="w-18 text-right">
-                <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+      <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
+        <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
+        <div class="w-80 my-6 mx-auto">
+          <div class="flex mb-4 items-center">
+            <h1 class="text-2xl font-book">{{ $strings.HeaderStatsRecentSessions }}</h1>
+            <div class="flex-grow" />
+            <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
+          </div>
+          <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
+          <template v-for="(item, index) in mostRecentListeningSessions">
+            <div :key="item.id" class="w-full py-0.5">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+                <div class="w-56">
+                  <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                  <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
+                </div>
+                <div class="flex-grow" />
+                <div class="w-18 text-right">
+                  <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+                </div>
               </div>
             </div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
-    </div>
-
-    <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+      <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+    </app-settings-content>
   </div>
 </template>
 
diff --git a/client/pages/config/users/index.vue b/client/pages/config/users/index.vue
index a47eedc4..c6279b47 100644
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@@ -1,16 +1,27 @@
 <template>
   <div>
-    <tables-users-table />
+    <app-settings-content :header-text="$strings.HeaderUsers" show-add-button @clicked="setShowUserModal">
+      <tables-users-table />
+    </app-settings-content>
+    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      selectedAccount: null,
+      showAccountModal: false
+    }
   },
   computed: {},
-  methods: {},
+  methods: {
+    setShowUserModal(selectedAccount) {
+      this.selectedAccount = selectedAccount
+      this.showAccountModal = true
+    }
+  },
   mounted() {}
 }
 </script>
\ No newline at end of file
diff --git a/client/strings/de.json b/client/strings/de.json
index 2e248058..fc8af9f2 100644
--- a/client/strings/de.json
+++ b/client/strings/de.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Lesezeichen",
   "LabelYourProgress": "Fortschritt",
   "MessageAppriseDescription": "Um diese Funktion nutzen zu können, müssen Sie eine Instanz von <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> laufen haben oder eine API verwenden welche dieselbe Anfragen bearbeiten kann. <br />Die Apprise API Url muss der vollständige URL-Pfad sein, an den die Benachrichtigung gesendet werden soll, z.B. wenn Ihre API-Instanz unter <code>http://192.168.1.1:8337</code> läuft, würden Sie <code>http://192.168.1.1:8337/notify</code> eingeben.",
-  "MessageBackupsDescription": "In Sicherungen werden Benutzer, Benutzerfortschritte, Details zu den Bibliotheksobjekten, Servereinstellungen und Bilder gespeichert",
-  "MessageBackupsNote": "Die Sicherungen enthalten keine Dateien welche in Ihren Bibliotheksordnern gespeichert sind.",
+  "MessageBackupsDescription": "In Sicherungen werden Benutzer, Benutzerfortschritte, Details zu den Bibliotheksobjekten, Servereinstellungen und Bilder gespeichert <code>/metadata/items</code> & <code>/metadata/authors</code>. Die Sicherungen enthalten keine Dateien welche in Ihren Bibliotheksordnern gespeichert sind.",
   "MessageBatchQuickMatchDescription": "Der Schnellabgleich versucht, fehlende Titelbilder und Metadaten für die ausgewählten Artikel hinzuzufügen. Aktivieren Sie die nachstehenden Optionen, damit der Schnellabgleich vorhandene Titelbilder und/oder Metadaten überschreiben kann.",
   "MessageBookshelfNoCollections": "Es wurden noch keine Sammlungen erstellt",
   "MessageBookshelfNoResultsForFilter": "Keine Ergebnisse für filter \"{0}: {1}\"",
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 2d450958..d92fd606 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Your Bookmarks",
   "LabelYourProgress": "Your Progress",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in",
-  "MessageBackupsNote": "Backups do not include any files stored in your library folders.",
+  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoResultsForFilter": "No Results for filter \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Thursday",
   "WeekdayTuesday": "Tuesday",
   "WeekdayWednesday": "Wednesday"
-}
\ No newline at end of file
+}
diff --git a/client/strings/es.json b/client/strings/es.json
index 2d450958..d92fd606 100644
--- a/client/strings/es.json
+++ b/client/strings/es.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Your Bookmarks",
   "LabelYourProgress": "Your Progress",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in",
-  "MessageBackupsNote": "Backups do not include any files stored in your library folders.",
+  "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
   "MessageBatchQuickMatchDescription": "Quick Match will attempt to add missing covers and metadata for the selected items. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoResultsForFilter": "No Results for filter \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Thursday",
   "WeekdayTuesday": "Tuesday",
   "WeekdayWednesday": "Wednesday"
-}
\ No newline at end of file
+}
diff --git a/client/strings/fr.json b/client/strings/fr.json
index 81406f4e..81c2ec58 100644
--- a/client/strings/fr.json
+++ b/client/strings/fr.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Vos Signets",
   "LabelYourProgress": "Votre Progression",
   "MessageAppriseDescription": "Nécessite une instance d'<a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">API Apprise</a> pour utiliser cette fonctionnalité ou une api qui prend en charge les mêmes requêtes. <br />L'URL de l'API Apprise doit comprendre le chemin complet pour envoyer la notification. Par exemple, si votre instance écoute sur <code>http://192.168.1.1:8337</code> alors vous devez mettre <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Les Sauvegardes incluent les utilisateurs, la progression de lecture par utilisateur, les détails des articles des bibliothèques, les paramètres du serveur et les images sauvegardées.",
-  "MessageBackupsNote": "Les Sauvegardes n'incluent pas les fichiers de votre bibliothèque.",
+  "MessageBackupsDescription": "Les Sauvegardes incluent les utilisateurs, la progression de lecture par utilisateur, les détails des articles des bibliothèques, les paramètres du serveur et les images sauvegardées. Les Sauvegardes n'incluent pas les fichiers de votre bibliothèque.",
   "MessageBatchQuickMatchDescription": "La Recherche par Correspondance Rapide tentera d'ajouter les couvertures et les métadonnées manquantes pour les articles sélectionnés. Activer l'option suivante pour autoriser la Recherche par Correspondance à écraser les données existantes.",
   "MessageBookshelfNoCollections": "Vous n'avez pas encore de collections",
   "MessageBookshelfNoResultsForFilter": "Aucun résultat pour le filtre \"{0}: {1}\"",
diff --git a/client/strings/hr.json b/client/strings/hr.json
index 00f83abf..070f998a 100644
--- a/client/strings/hr.json
+++ b/client/strings/hr.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Tvoje knjižne oznake",
   "LabelYourProgress": "Tvoj napredak",
   "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Backups uključuju korisnike, korisnikov napredak, detalje stavki iz biblioteke, postavke server i slike iz",
-  "MessageBackupsNote": "Backups ne uključuju nijedne datoteke koje su u folderima biblioteke.",
+  "MessageBackupsDescription": "Backups uključuju korisnike, korisnikov napredak, detalje stavki iz biblioteke, postavke server i slike iz <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups ne uključuju nijedne datoteke koje su u folderima biblioteke.",
   "MessageBatchQuickMatchDescription": "Quick Match će probati dodati nedostale covere i metapodatke za odabrane stavke. Uključi postavke ispod da omočutie Quick Mathchu da zamijeni postojeće covere i/ili metapodatke.",
   "MessageBookshelfNoCollections": "You haven't made any collections yet",
   "MessageBookshelfNoResultsForFilter": "No Results for filter \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Četvrtak",
   "WeekdayTuesday": "Utorak",
   "WeekdayWednesday": "Srijeda"
-}
\ No newline at end of file
+}
diff --git a/client/strings/it.json b/client/strings/it.json
index 113dc43e..f0f5f70c 100644
--- a/client/strings/it.json
+++ b/client/strings/it.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "I tuoi Preferiti",
   "LabelYourProgress": "Completato al",
   "MessageAppriseDescription": "Per utilizzare questa funzione è necessario disporre di un'istanza di <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> in esecuzione o un'API che gestirà quelle stesse richieste. <br />L'API Url dovrebbe essere il percorso URL completo per inviare la notifica, ad esempio se la tua istanza API è servita cosi .<code>http://192.168.1.1:8337</code> Allora dovrai mettere <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "I backup includono utenti, progressi degli utenti, dettagli sugli elementi della libreria, impostazioni del server e immagini archiviate in",
-  "MessageBackupsNote": "I backup non includono i file archiviati nelle cartelle della libreria.",
+  "MessageBackupsDescription": "I backup includono utenti, progressi degli utenti, dettagli sugli elementi della libreria, impostazioni del server e immagini archiviate in <code>/metadata/items</code> & <code>/metadata/authors</code>. I backup non includono i file archiviati nelle cartelle della libreria.",
   "MessageBatchQuickMatchDescription": "Quick Match tenterà di aggiungere copertine e metadati mancanti per gli elementi selezionati. Attiva l'opzione per consentire a Quick Match di sovrascrivere copertine e/o metadati esistenti.",
   "MessageBookshelfNoCollections": "Non hai ancora creato nessuna raccolta ",
   "MessageBookshelfNoResultsForFilter": "Nessul risultato per il filtro \"{0}: {1}\"",
diff --git a/client/strings/pl.json b/client/strings/pl.json
index a9fdffb0..bd5cafaa 100644
--- a/client/strings/pl.json
+++ b/client/strings/pl.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "Twoje zakładki",
   "LabelYourProgress": "Twój postęp",
   "MessageAppriseDescription": "Aby użyć tej funkcji, konieczne jest posiadanie instancji <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> albo innego rozwiązania, które obsługuje schemat zapytań Apprise. <br />URL do interfejsu API powinno być całkowitą ścieżką, np., jeśli Twoje API do powiadomień jest dostępne pod adresem <code>http://192.168.1.1:8337</code> to wpisany tutaj URL powinien mieć postać: <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "Kopie zapasowe obejmują użytkowników, postępy użytkowników, szczegóły pozycji biblioteki, ustawienia serwera i obrazy przechowywane w",
-  "MessageBackupsNote": "Kopie zapasowe nie obejmują żadnych plików przechowywanych w folderach biblioteki.",
+  "MessageBackupsDescription": "Kopie zapasowe obejmują użytkowników, postępy użytkowników, szczegóły pozycji biblioteki, ustawienia serwera i obrazy przechowywane w <code>/metadata/items</code> & <code>/metadata/authors</code>. Kopie zapasowe nie obejmują żadnych plików przechowywanych w folderach biblioteki.",
   "MessageBatchQuickMatchDescription": "Quick Match będzie próbował dodać brakujące okładki i metadane dla wybranych elementów. Włącz poniższe opcje, aby umożliwić Quick Match nadpisanie istniejących okładek i/lub metadanych.",
   "MessageBookshelfNoCollections": "Nie posiadasz jeszcze żadnych kolekcji",
   "MessageBookshelfNoResultsForFilter": "Nie znaleziono żadnych pozycji przy aktualnym filtrowaniu \"{0}: {1}\"",
@@ -571,4 +570,4 @@
   "WeekdayThursday": "Czwartek",
   "WeekdayTuesday": "Wtorek",
   "WeekdayWednesday": "Środa"
-}
\ No newline at end of file
+}
diff --git a/client/strings/zh-cn.json b/client/strings/zh-cn.json
index 73c5a33c..11d9aafb 100644
--- a/client/strings/zh-cn.json
+++ b/client/strings/zh-cn.json
@@ -407,8 +407,7 @@
   "LabelYourBookmarks": "你的书签",
   "LabelYourProgress": "你的进度",
   "MessageAppriseDescription": "要使用此功能，您需要运行一个 <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> 实例或一个可以处理这些相同请求的 API. <br />Apprise API Url 应该是发送通知的完整 URL 路径, 例如: 如果你的 API 实例运行在 <code>http://192.168.1.1:8337</code>, 那么你可以输入 <code>http://192.168.1.1:8337/notify</code>.",
-  "MessageBackupsDescription": "备份包括用户, 用户进度, 媒体库项目详细信息, 服务器设置和图像, 存储在",
-  "MessageBackupsNote": "备份不包括存储在您的媒体库文件夹中的任何文件.",
+  "MessageBackupsDescription": "备份包括用户, 用户进度, 媒体库项目详细信息, 服务器设置和图像, 存储在 <code>/metadata/items</code> & <code>/metadata/authors</code>. 备份不包括存储在您的媒体库文件夹中的任何文件.",
   "MessageBatchQuickMatchDescription": "快速匹配将尝试为所选项目添加缺少的封面和元数据. 启用以下选项以允许快速匹配覆盖现有封面和或元数据.",
   "MessageBookshelfNoCollections": "你尚未进行任何收藏",
   "MessageBookshelfNoResultsForFilter": "过滤器无结果 \"{0}: {1}\"",