diff --git a/app/routes/api/_static.py b/app/routes/api/_static.py
index e2eba5ef..d1f40ca5 100644
--- a/app/routes/api/_static.py
+++ b/app/routes/api/_static.py
@@ -30,6 +30,7 @@ FRONTEND_ROUTES: list[str] = [
     "/logs/",
     "/conditions/",
     "/browser/",
+    "/settings/",
     "/browser/{path:.*}",
 ]
 
diff --git a/ui/app/components/NotifyDropdown.vue b/ui/app/components/NotifyDropdown.vue
index 8ff79681..976f611f 100644
--- a/ui/app/components/NotifyDropdown.vue
+++ b/ui/app/components/NotifyDropdown.vue
@@ -43,14 +43,13 @@
 
 <template>
   <div class="navbar-item has-dropdown is-hoverable">
-    <a class="navbar-link">
+    <a class="navbar-link is-arrowless">
       <span class="icon"><i class="fas fa-bell" /></span>
-      <span class="tag ml-2">
+      <span class="tag ml-2" v-if="store.unreadCount > 0">
         <span class="is-underlined">{{ store.unreadCount }}</span>
-        <span>&nbsp;/&nbsp;</span>
-        <span class="is-underlined">{{ store.notifications.length }}</span>
       </span>
     </a>
+
     <div class="navbar-dropdown is-right" style="width: 400px;">
       <template v-if="store.notifications.length > 0">
         <div class="px-3 py-2 is-flex is-justify-content-space-between is-align-items-center">
@@ -113,6 +112,11 @@
         </div>
       </div>
     </div>
+
+  </div>
+
+  <div class="navbar-item">
+
   </div>
 </template>
 
diff --git a/ui/app/components/Settings.vue b/ui/app/components/Settings.vue
deleted file mode 100644
index 64087309..00000000
--- a/ui/app/components/Settings.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-  <div class="columns is-multiline">
-    <div class="column is-12 mt-2">
-      <div class="card">
-        <header class="card-header">
-          <p class="card-header-title">WebUI Settings</p>
-          <span class="card-header-icon">
-            <span class="icon"><i class="fas fa-cog" /></span>
-          </span>
-        </header>
-        <div class="card-content">
-          <div class="columns is-multiline">
-            <div class="column is-6">
-
-              <div class="field">
-                <label class="label is-unselectable">
-                  <span class="icon"><i class="fa-solid fa-computer" /></span>
-                  Page View
-                </label>
-                <div class="control">
-                  <div class="control">
-                    <input id="view_mode" type="checkbox" class="switch is-success" v-model="simpleMode">
-                    <label for="view_mode" class="is-unselectable">
-                      &nbsp;{{ simpleMode ? 'Simple View' : 'Regular View' }}
-                    </label>
-                  </div>
-                </div>
-                <p class="help is-bold">
-                  <span class="icon"> <i class="fa-solid fa-info-circle" /></span>
-                  The simple view is ideal for non-technical users and mobile devices.
-                </p>
-              </div>
-
-              <div class="field">
-                <label class="label is-unselectable">Color scheme</label>
-                <div class="control">
-                  <label for="auto" class="radio">
-                    <input id="auto" type="radio" v-model="selectedTheme" value="auto">
-                    <span class="icon"><i class="fa-solid fa-circle-half-stroke" /></span>
-                    <span>Auto</span>
-                  </label>
-                  <label for="light" class="radio">
-                    <input id="light" type="radio" v-model="selectedTheme" value="light">
-                    <span class="icon has-text-warning"><i class="fa-solid fa-sun" /></span>
-                    <span>Light</span>
-                  </label>
-                  <label for="dark" class="radio">
-                    <input id="dark" type="radio" v-model="selectedTheme" value="dark">
-                    <span class="icon"><i class="fa-solid fa-moon" /></span>
-                    <span>Dark</span>
-                  </label>
-                </div>
-              </div>
-
-              <div class="field">
-                <label class="label is-unselectable">
-                  Show Background
-                  <template v-if="bg_enable">
-                    <NuxtLink @click="$emit('reload_bg')" class="is-bold">Reload</NuxtLink>
-                    <span class="icon" v-if="isLoading"><i class="fa fa-spin fa-spinner" /></span>
-                  </template>
-                </label>
-                <div class="control">
-                  <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
-                  <label for="random_bg" class="is-unselectable">
-                    &nbsp;{{ bg_enable ? 'Yes' : 'No' }}
-                  </label>
-                </div>
-              </div>
-
-              <div class="field">
-                <label class="label is-unselectable" for="random_bg_opacity">
-                  Background visibility <code>{{ parseFloat(String(1.0 - bg_opacity)).toFixed(2) }}</code>
-                </label>
-                <div class="control">
-                  <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50"
-                    max="1.00" step="0.05">
-                </div>
-              </div>
-
-              <div class="field" v-if="!simpleMode">
-                <label class="label is-unselectable" for="show_thumbnail">URLs Separator</label>
-                <div class="control">
-                  <div class="select is-fullwidth">
-                    <select class="is-fullwidth" v-model="separator">
-                      <option v-for="(sep, index) in separators" :key="`sep-${index}`" :value="sep.value">
-                        {{ sep.name }} ({{ sep.value }})
-                      </option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-            <div class="column is-6">
-              <div class="field">
-                <label class="label is-unselectable" for="show_thumbnail">Show Thumbnails</label>
-                <div class="control">
-                  <input id="show_thumbnail" type="checkbox" class="switch is-success" v-model="show_thumbnail">
-                  <label for="show_thumbnail" class="is-unselectable">
-                    &nbsp;{{ show_thumbnail ? 'Yes' : 'No' }}
-                  </label>
-                </div>
-                <p class="help is-bold"> Show videos thumbnail if available.</p>
-              </div>
-
-              <div class="field" v-if="show_thumbnail">
-                <label class="label is-unselectable">Thumbnail Aspect Ratio</label>
-                <div class="control">
-                  <label for="ratio_16by9" class="radio">
-                    <input id="ratio_16by9" type="radio" v-model="thumbnail_ratio" value="is-16by9">
-                    <span>&nbsp;16:9</span>
-                  </label>
-                  <label for="ratio_3by1" class="radio">
-                    <input id="ratio_3by1" type="radio" v-model="thumbnail_ratio" value="is-3by1">
-                    <span>&nbsp;3:1</span>
-                  </label>
-                </div>
-                <p class="help is-bold">Choose the aspect ratio for thumbnail display.</p>
-              </div>
-
-              <div class="field">
-                <label class="label" for="allow_toasts">Show notifications</label>
-                <div class="control">
-                  <input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts">
-                  <label for="allow_toasts" class="is-unselectable">
-                    &nbsp;{{ allow_toasts ? 'Yes' : 'No' }}
-                  </label>
-                </div>
-              </div>
-
-              <div class="field" v-if="allow_toasts">
-                <label class="label">Notifications position</label>
-                <div class="control">
-                  <div class="select is-fullwidth">
-                    <select v-model="toast_position">
-                      <option :value="POSITION.TOP_RIGHT">{{ POSITION.TOP_RIGHT }}</option>
-                      <option :value="POSITION.TOP_CENTER">{{ POSITION.TOP_CENTER }}</option>
-                      <option :value="POSITION.TOP_LEFT">{{ POSITION.TOP_LEFT }}</option>
-                      <option :value="POSITION.BOTTOM_RIGHT">{{ POSITION.BOTTOM_RIGHT }}</option>
-                      <option :value="POSITION.BOTTOM_CENTER">{{ POSITION.BOTTOM_CENTER }}</option>
-                      <option :value="POSITION.BOTTOM_LEFT">{{ POSITION.BOTTOM_LEFT }}</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-
-              <div class="field" v-if="allow_toasts">
-                <label class="label" for="dismiss_on_click">Dismiss notification on click</label>
-                <div class="control">
-                  <input id="dismiss_on_click" type="checkbox" class="switch is-success"
-                    v-model="toast_dismiss_on_click">
-                  <label for="dismiss_on_click" class="is-unselectable">
-                    &nbsp;{{ toast_dismiss_on_click ? 'Yes' : 'No' }}
-                  </label>
-                </div>
-              </div>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useStorage } from '@vueuse/core'
-import { POSITION } from 'vue-toastification'
-import { useConfigStore } from '~/stores/ConfigStore'
-
-defineProps<{ isLoading: boolean }>()
-defineEmits<{ (e: 'reload_bg'): void }>()
-
-const bg_enable = useStorage<boolean>('random_bg', true)
-const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
-const selectedTheme = useStorage<'auto' | 'light' | 'dark'>('theme', 'auto')
-const allow_toasts = useStorage<boolean>('allow_toasts', true)
-const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
-const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true)
-const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
-const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
-const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
-const simpleMode = useStorage<boolean>('simple_mode', useConfigStore().app.simple_mode || false)
-</script>
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index a1939e1b..cc34a326 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -5,11 +5,9 @@
         <form class="download-form__body" autocomplete="off" @submit.prevent="addDownload">
           <label class="label" for="download-url">
             What you would like to download?
-            <span class="is-pulled-right">
-              <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
-                v-tooltip="'WebUI Settings'">
-                <i class="fas fa-cogs" /></span>
-            </span>
+            <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
+              v-tooltip="'WebUI Settings'">
+              <i class="fas fa-cogs" /></span>
           </label>
           <div class="field has-addons">
             <div class="control">
@@ -616,6 +614,7 @@ const connectionStatusColor = computed(() => {
       return 'has-text-danger'
   }
 })
+
 </script>
 
 <style scoped>
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index 94e61737..9c62cb21 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -6,9 +6,27 @@
   </template>
 
   <template v-if="show_settings">
-    <Modal @close="show_settings = false"
-      :content-class="isMobile ? 'modal-content-max is-overflow-scroll ' : 'modal-content-max is-overflow-visible'">
-      <Settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
+    <Modal @close="closeSettings()"
+      :content-class="isMobile ? 'modal-content-max is-overflow-scroll ' : 'modal-content-max'">
+      <div class="columns is-multiline">
+        <div class="column is-12 mt-2">
+          <div class="card">
+            <header class="card-header">
+              <p class="card-header-title">WebUI Settings</p>
+              <span class="card-header-icon">
+                <span class="icon"><i class="fas fa-cog" /></span>
+              </span>
+            </header>
+            <div class="card-content">
+              <div class="columns is-multiline">
+                <div class="column is-12">
+                  <settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </Modal>
   </template>
 
@@ -23,9 +41,8 @@
           <NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
             v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
             <span class="is-text-overflow">
-              <span class="icon">
-                <i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
-                <i v-else class="fas fa-home" />
+              <span class="icon" v-if="'connecting' === socket.connectionStatus">
+                <i class="fas fa-arrows-rotate fa-spin" />
               </span>
               <span class="has-text-bold" :class="connectionStatusColor">
                 YTPTube
@@ -43,6 +60,12 @@
 
         <div class="navbar-menu is-unselectable" :class="{ 'is-active': showMenu }">
           <div class="navbar-start">
+
+            <NuxtLink class="navbar-item" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)">
+              <span class="icon"><i class="fa-solid fa-home" /></span>
+              <span>Home</span>
+            </NuxtLink>
+
             <NuxtLink class="navbar-item" to="/browser" @click.prevent="(e: MouseEvent) => changeRoute(e)">
               <span class="icon"><i class="fa-solid fa-folder-tree" /></span>
               <span>Files</span>
@@ -52,23 +75,16 @@
               <span class="icon"><i class="fa-solid fa-sliders" /></span>
               <span>Presets</span>
             </NuxtLink>
-            <div class="navbar-item has-dropdown">
-              <a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
-                <span class="icon"><i class="fas fa-tasks" /></span>
-                <span>Tasks</span>
-              </a>
-              <div class="navbar-dropdown">
-                <NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
-                  <span class="icon"><i class="fa-solid fa-tasks" /></span>
-                  <span>List</span>
-                </NuxtLink>
 
-                <NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
-                  <span class="icon"><i class="fa-solid fa-diagram-project" /></span>
-                  <span>Definitions</span>
-                </NuxtLink>
-              </div>
-            </div>
+            <NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
+              <span class="icon"><i class="fa-solid fa-tasks" /></span>
+              <span>Tasks</span>
+            </NuxtLink>
+
+            <NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
+              <span class="icon"><i class="fa-solid fa-diagram-project" /></span>
+              <span>Task Definitions</span>
+            </NuxtLink>
 
             <NuxtLink class="navbar-item" to="/notifications" @click.prevent="(e: MouseEvent) => changeRoute(e)">
               <span class="icon-text">
@@ -84,63 +100,23 @@
 
           </div>
           <div class="navbar-end">
-            <div class="navbar-item has-dropdown">
-              <a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
-                <span class="icon"><i class="fas fa-tools" /></span>
-                <span>Other</span>
-              </a>
-
-              <div class="navbar-dropdown">
-                <NuxtLink class="navbar-item" to="/logs" @click.prevent="(e: MouseEvent) => changeRoute(e)"
-                  v-if="config.app.file_logging">
-                  <span class="icon"><i class="fa-solid fa-file-lines" /></span>
-                  <span>Logs</span>
-                </NuxtLink>
-
-                <NuxtLink class="navbar-item" to="/console" @click.prevent="(e: MouseEvent) => changeRoute(e)"
-                  v-if="config.app.console_enabled">
-                  <span class="icon"><i class="fa-solid fa-terminal" /></span>
-                  <span>Console</span>
-                </NuxtLink>
-              </div>
-            </div>
-
             <div class="navbar-item" v-if="true === config.app.is_native">
               <button class="button is-dark" @click="shutdownApp">
                 <span class="icon"><i class="fas fa-power-off" /></span>
                 <span v-if="isMobile">Shutdown</span>
               </button>
             </div>
-
-
-            <div class="navbar-item">
-              <button class="button is-dark" @click="reloadPage">
-                <span class="icon"><i class="fas fa-refresh" /></span>
-                <span v-if="isMobile">Reload</span>
-              </button>
-            </div>
-
+            <NuxtLink class="navbar-item" to="/settings" @click.prevent="(e: MouseEvent) => changeRoute(e)">
+              <span class="icon"><i class="fa-solid fa-cog" /></span>
+              <span>Settings</span>
+            </NuxtLink>
             <NotifyDropdown />
-
-            <div class="navbar-item" v-if="!isMobile">
-              <button class="button is-dark has-tooltip-bottom mr-4" v-tooltip.bottom="'WebUI Settings'"
-                @click="show_settings = !show_settings">
-                <span class="icon"><i class="fas fa-cog" /></span>
-              </button>
-            </div>
-            <div class="navbar-item" v-if="isMobile">
-              <button class="button is-dark" @click="show_settings = !show_settings">
-                <span class="icon"><i class="fas fa-cog" /></span>
-                <span>WebUI Settings</span>
-              </button>
-            </div>
-
           </div>
         </div>
       </nav>
       <div>
         <NuxtLoadingIndicator />
-        <NuxtPage v-if="config.is_loaded" />
+        <NuxtPage v-if="config.is_loaded" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
         <Message v-if="!config.is_loaded" class="has-background-info-90 has-text-dark mt-5"
           title="Loading Configuration" icon="fas fa-spinner fa-spin">
           <p>Loading application configuration. This usually takes less than a second.</p>
@@ -197,13 +173,13 @@ import Simple from '~/components/Simple.vue'
 import Shutdown from '~/components/shutdown.vue'
 import Markdown from '~/components/Markdown.vue'
 import Connection from '~/components/Connection.vue'
+import Settings from "~/pages/settings.vue";
 
 const Year = new Date().getFullYear()
 const selectedTheme = useStorage('theme', 'auto')
 const socket = useSocketStore()
 const config = useConfigStore()
 const loadedImage = ref()
-const show_settings = ref(false)
 const loadingImage = ref(false)
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.95)
@@ -211,6 +187,7 @@ const showMenu = ref(false)
 const isMobile = useMediaQuery({ maxWidth: 1024 })
 const app_shutdown = ref<boolean>(false)
 const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false)
+const show_settings = ref(false)
 
 const doc = ref<{ file: string }>({ file: '' })
 
@@ -315,8 +292,6 @@ watch(selectedTheme, value => {
   } catch { }
 })
 
-const reloadPage = () => window.location.reload()
-
 watch(bg_enable, async v => await handleImage(v))
 watch(bg_opacity, v => {
   if (false === bg_enable.value) {
@@ -408,18 +383,6 @@ const changeRoute = async (_: MouseEvent, callback: (() => void) | null = null)
   }
 }
 
-const openMenu = (e: MouseEvent) => {
-  const elm = (e.target as HTMLElement)?.closest('div.has-dropdown') as HTMLElement | null
-
-  document.querySelectorAll<HTMLElement>('div.has-dropdown').forEach(el => {
-    if (el !== elm) {
-      el.classList.remove('is-active')
-    }
-  })
-
-  elm?.classList.toggle('is-active')
-}
-
 const useVersionUpdate = () => {
   const newVersionIsAvailable = ref(false)
   const nuxtApp = useNuxtApp()
@@ -436,6 +399,11 @@ const useVersionUpdate = () => {
 
 const { newVersionIsAvailable } = useVersionUpdate()
 
+const closeSettings = () => {
+  show_settings.value = false
+  navigateTo('/')
+}
+
 const shutdownApp = async () => {
   const { alertDialog, confirmDialog: confirm_message } = useDialog()
 
diff --git a/ui/app/pages/settings.vue b/ui/app/pages/settings.vue
new file mode 100644
index 00000000..e849cca4
--- /dev/null
+++ b/ui/app/pages/settings.vue
@@ -0,0 +1,318 @@
+<template>
+  <main class="m-6">
+
+    <div>
+      <span class="title is-4">
+        <span class="icon-text">
+          <span class="icon"><i class="fas fa-cog" /></span>
+          <p class="card-header-title">Settings</p>
+        </span>
+      </span>
+      <span class="field is-horizontal" />
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Page View</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <div class="control is-expanded has-icons-left">
+              <input id="view_mode" type="checkbox" class="switch is-success" v-model="simpleMode">
+              <label for="view_mode" class="is-unselectable">
+                {{ simpleMode ? 'Simple View' : 'Regular View' }}
+              </label>
+            </div>
+            <p class="help">
+              <span class="icon"> <i class="fa-solid fa-info-circle" /></span>
+              The simple view is ideal for non-technical users and mobile devices.
+            </p>
+          </div>
+        </div>
+      </div>
+
+
+      <span class="field title is-4">
+        <span class="icon-text">
+          <span class="icon"><i class="fas fa-palette" /></span>
+          <p class="card-header-title">Theming</p>
+        </span>
+      </span>
+      <span class="field is-horizontal" />
+
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">Color scheme</label>
+        </div>
+        <div class="field-body">
+          <div class="field is-narrow">
+            <div class="control">
+              <label for="auto" class="radio">
+                <input id="auto" type="radio" v-model="selectedTheme" value="auto">
+                <span class="icon"><i class="fa-solid fa-circle-half-stroke" /></span>
+                <span>Auto</span>
+              </label>
+              <label for="light" class="radio">
+                <input id="light" type="radio" v-model="selectedTheme" value="light">
+                <span class="icon has-text-warning"><i class="fa-solid fa-sun" /></span>
+                <span>Light</span>
+              </label>
+              <label for="dark" class="radio">
+                <input id="dark" type="radio" v-model="selectedTheme" value="dark">
+                <span class="icon"><i class="fa-solid fa-moon" /></span>
+                <span>Dark</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Show Background</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <div class="control">
+              <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
+              <label for="random_bg" class="is-unselectable">
+                {{ bg_enable ? 'Yes' : 'No' }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label"></label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <div class="control">
+              <template v-if="bg_enable">
+                <button @click="$emit('reload_bg')" class="button is-primary" :disabled="isLoading">
+                  <span class="icon-text">
+                    <span class="icon"><i class="fa"
+                        :class="{ 'fa-spin fa-spinner': isLoading, 'fa-file-image': !isLoading }" /></span>
+                    <span>Reload Background</span>
+                  </span>
+                </button>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Background visibility</label>
+        </div>
+        <div class="field-body">
+          <div class="field is-expanded">
+            <a class="button is-static is-small">
+              <code>{{ parseFloat(String(1.0 - bg_opacity)).toFixed(2) }}</code>
+            </a>
+
+            <div class="control">
+              <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50" max="1.00"
+                step="0.05">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <span class="field title is-4">
+        <span class="icon-text">
+          <span class="icon"><i class="fas fa-home" /></span>
+          <p class="card-header-title">Dashboard</p>
+        </span>
+      </span>
+      <span class="field is-horizontal" />
+
+      <div class="field is-horizontal" v-if="!simpleMode">
+        <div class="field-label is-normal">
+          <label class="label">URL Separator</label>
+        </div>
+        <div class="field-body">
+          <div class="field is-narrow">
+            <div class="control">
+              <div class="select is-fullwidth">
+                <select v-model="separator">
+                  <option v-for="(sep, index) in separators" :key="`sep-${index}`" :value="sep.value">
+                    {{ sep.name }} ({{ sep.value }})
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Show Thumbnails</label>
+        </div>
+
+        <div class="field-body">
+          <div class="control">
+            <div class="field">
+              <input id="show_thumbnail" type="checkbox" class="switch is-success" v-model="show_thumbnail">
+              <label for="show_thumbnail" class="is-unselectable">
+                {{ show_thumbnail ? 'Yes' : 'No' }}
+              </label>
+            </div>
+            <p class="help">
+              <span class="icon"><i class="fa-solid fa-info-circle" /></span>
+              Show videos thumbnail if available
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal" v-if="show_thumbnail">
+        <div class="field-label is-normal">
+          <label class="label">Aspect Ratio</label>
+        </div>
+
+        <div class="field-body">
+          <div class="control">
+            <div class="field">
+              <label for="ratio_16by9" class="radio">
+                <input id="ratio_16by9" type="radio" v-model="thumbnail_ratio" value="is-16by9">
+                <span>&nbsp;16:9</span>
+              </label>
+              <label for="ratio_3by1" class="radio">
+                <input id="ratio_3by1" type="radio" v-model="thumbnail_ratio" value="is-3by1">
+                <span>&nbsp;3:1</span>
+              </label>
+            </div>
+            <p class="help">
+              <span class="icon"><i class="fa-solid fa-info-circle" /></span>
+              Choose the aspect ratio for thumbnail display.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <span class="field title is-4">
+        <span class="icon-text">
+          <span class="icon"><i class="fas fa-bell" /></span>
+          <p class="card-header-title">On-Screen Notifications</p>
+        </span>
+      </span>
+      <span class="field is-horizontal" />
+
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Show notifications</label>
+        </div>
+
+        <div class="field-body">
+          <div class="control">
+            <div class="field">
+              <input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts">
+              <label for="allow_toasts" class="is-unselectable">
+                {{ allow_toasts ? 'Yes' : 'No' }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal" v-if="allow_toasts">
+        <div class="field-label is-normal">
+          <label class="label">Notifications position</label>
+        </div>
+        <div class="field-body">
+          <div class="field is-narrow">
+            <div class="control">
+              <div class="select is-fullwidth">
+                <select v-model="toast_position">
+                  <option :value="POSITION.TOP_RIGHT">{{ POSITION.TOP_RIGHT }}</option>
+                  <option :value="POSITION.TOP_CENTER">{{ POSITION.TOP_CENTER }}</option>
+                  <option :value="POSITION.TOP_LEFT">{{ POSITION.TOP_LEFT }}</option>
+                  <option :value="POSITION.BOTTOM_RIGHT">{{ POSITION.BOTTOM_RIGHT }}</option>
+                  <option :value="POSITION.BOTTOM_CENTER">{{ POSITION.BOTTOM_CENTER }}</option>
+                  <option :value="POSITION.BOTTOM_LEFT">{{ POSITION.BOTTOM_LEFT }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal" v-if="allow_toasts">
+        <div class="field-label is-normal">
+          <label class="label">Dismiss notification on click</label>
+        </div>
+
+        <div class="field-body">
+          <div class="control">
+            <div class="field">
+              <input id="dismiss_on_click" type="checkbox" class="switch is-success" v-model="toast_dismiss_on_click">
+              <label for="dismiss_on_click" class="is-unselectable">
+                {{ toast_dismiss_on_click ? 'Yes' : 'No' }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template v-if="!simpleMode">
+        <span class="field is-horizontal" />
+        <span class="title is-4">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-cog" /></span>
+            <p class="card-header-title">Application Settings</p>
+          </span>
+        </span>
+        <span class="field is-horizontal" />
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label"></label>
+          </div>
+          <div class="field-body">
+            <div class="field is-grouped">
+              <div class="control" v-if="config.app.file_logging">
+                <NuxtLink class="button is-primary" to="/logs">
+                  <span class="icon"><i class="fa-solid fa-file-lines" /></span>
+                  <span>Open Logs</span>
+                </NuxtLink>
+              </div>
+              <div class="control" v-if="config.app.console_enabled">
+                <NuxtLink class="button is-primary" to="/console">
+                  <span class="icon"><i class="fa-solid fa-terminal" /></span>
+                  <span>Open Console</span>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { POSITION } from 'vue-toastification'
+import { useConfigStore } from '~/stores/ConfigStore'
+
+defineProps<{ isLoading: boolean }>()
+defineEmits<{ (e: 'reload_bg'): void }>()
+
+const config = useConfigStore()
+
+const bg_enable = useStorage<boolean>('random_bg', true)
+const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
+const selectedTheme = useStorage<'auto' | 'light' | 'dark'>('theme', 'auto')
+const allow_toasts = useStorage<boolean>('allow_toasts', true)
+const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
+const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true)
+const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
+const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
+const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
+const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false)
+</script>