diff --git a/docs/pr-screenshots/ui-polish-tweaks/after/app-bundles.jpg b/docs/pr-screenshots/ui-polish-tweaks/after/app-bundles.jpg
new file mode 100644
index 0000000000..e9b6a1ea24
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/after/app-bundles.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/after/app-overview.jpg b/docs/pr-screenshots/ui-polish-tweaks/after/app-overview.jpg
new file mode 100644
index 0000000000..f9bf3a7e6f
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/after/app-overview.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/after/apps.jpg b/docs/pr-screenshots/ui-polish-tweaks/after/apps.jpg
new file mode 100644
index 0000000000..571b2be7d4
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/after/apps.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/after/dashboard.jpg b/docs/pr-screenshots/ui-polish-tweaks/after/dashboard.jpg
new file mode 100644
index 0000000000..10d0f50f30
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/after/dashboard.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/after/login.jpg b/docs/pr-screenshots/ui-polish-tweaks/after/login.jpg
new file mode 100644
index 0000000000..10570a2438
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/after/login.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/after/settings-organization.jpg b/docs/pr-screenshots/ui-polish-tweaks/after/settings-organization.jpg
new file mode 100644
index 0000000000..71b2a7d2ab
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/after/settings-organization.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/before/app-bundles.jpg b/docs/pr-screenshots/ui-polish-tweaks/before/app-bundles.jpg
new file mode 100644
index 0000000000..ee6bf07bb5
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/before/app-bundles.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/before/app-overview.jpg b/docs/pr-screenshots/ui-polish-tweaks/before/app-overview.jpg
new file mode 100644
index 0000000000..b135e06432
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/before/app-overview.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/before/apps.jpg b/docs/pr-screenshots/ui-polish-tweaks/before/apps.jpg
new file mode 100644
index 0000000000..956e8ab613
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/before/apps.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/before/dashboard.jpg b/docs/pr-screenshots/ui-polish-tweaks/before/dashboard.jpg
new file mode 100644
index 0000000000..6c4af21b72
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/before/dashboard.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/before/login.jpg b/docs/pr-screenshots/ui-polish-tweaks/before/login.jpg
new file mode 100644
index 0000000000..10e194631a
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/before/login.jpg differ
diff --git a/docs/pr-screenshots/ui-polish-tweaks/before/settings-organization.jpg b/docs/pr-screenshots/ui-polish-tweaks/before/settings-organization.jpg
new file mode 100644
index 0000000000..e81501e4db
Binary files /dev/null and b/docs/pr-screenshots/ui-polish-tweaks/before/settings-organization.jpg differ
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 234ef45c92..a30e056b44 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -34,6 +34,7 @@ interface Props {
   showAdd?: boolean
   addButtonTestId?: string
   search?: string
+  pageSize?: number
   total: number
   currentPage: number
   columns: TableColumn[]
@@ -330,14 +331,20 @@ function tooltipIdFor(rowIndex: number, actionIndex: number): string {
   return `datatable-action-tooltip-${rowIndex}-${actionIndex}`
 }
 
+const paginationPageSize = computed(() => props.pageSize ?? offset.value)
+
 const displayElemRange = computed(() => {
-  const begin = (props.currentPage - 1) * props.elementList.length
-  const end = begin + props.elementList.length
+  if (props.total === 0 || props.elementList.length === 0)
+    return '0-0'
+
+  const pageSize = paginationPageSize.value
+  const begin = ((props.currentPage - 1) * pageSize) + 1
+  const end = Math.min(begin + props.elementList.length - 1, props.total)
   return `${begin}-${end}`
 })
 
 function canNext() {
-  return props.currentPage < Math.ceil(props.total / offset.value)
+  return paginationPageSize.value > 0 && props.currentPage < Math.ceil(props.total / paginationPageSize.value)
 }
 function canPrev() {
   return props.currentPage > 1
@@ -352,7 +359,7 @@ async function next() {
 async function fastForward() {
   if (canNext()) {
     emit('fastForward')
-    emit('update:currentPage', Math.ceil(props.total / offset.value))
+    emit('update:currentPage', Math.ceil(props.total / paginationPageSize.value))
   }
 }
 async function prev() {
@@ -455,37 +462,37 @@ const RenderCell = defineComponent<{
 const isReloading = computed(() => props.isLoading || pendingReset.value)
 const isAdding = computed(() => props.isLoading || pendingAdd.value)
 const paginationClass = computed(() => props.mobileFixedPagination
-  ? 'fixed bottom-0 left-0 z-40 flex items-center justify-between w-full p-4 bg-white md:relative md:pt-4 md:bg-transparent dark:bg-gray-900 dark:md:bg-transparent'
-  : 'flex items-center justify-between w-full p-4 bg-white md:relative md:pt-4 md:bg-transparent dark:bg-gray-900 dark:md:bg-transparent')
+  ? 'fixed bottom-0 left-0 z-40 flex items-center justify-between w-full gap-3 border-t border-slate-200 bg-white/95 p-4 shadow-[0_-14px_34px_-28px_rgba(15,23,42,0.45)] backdrop-blur md:relative md:border-t md:bg-transparent md:pt-4 md:shadow-none md:backdrop-blur-0 dark:border-slate-700 dark:bg-gray-900/95 dark:md:bg-transparent'
+  : 'flex items-center justify-between w-full gap-3 border-t border-slate-200 bg-white p-4 md:relative md:bg-transparent dark:border-slate-700 dark:bg-gray-900 dark:md:bg-transparent')
 </script>
 
 <template>
   <div class="pb-4 overflow-x-auto md:pb-0">
-    <div class="flex items-start justify-between p-3 pb-4 md:items-center">
-      <div class="flex h-10 md:mb-0">
+    <div class="flex flex-col gap-3 p-3 pb-4 md:flex-row md:items-center md:justify-between md:p-4">
+      <div class="flex h-auto flex-wrap gap-2 md:mb-0">
         <button
-          class="inline-flex items-center py-1.5 px-3 mr-2 text-sm font-medium text-gray-500 bg-white rounded-md border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+          class="inline-flex min-h-11 items-center gap-2 rounded-lg border border-slate-300 bg-white px-3.5 py-2 text-sm font-medium text-slate-600 shadow-sm transition-colors cursor-pointer hover:bg-slate-50 focus:ring-4 focus:ring-slate-200 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
           type="button" @click="handleResetClick"
         >
-          <IconReload v-if="!isReloading" class="m-1 md:mr-2" />
-          <Spinner v-else size="w-[16.8px] h-[16.8px] m-1 mr-2" />
+          <IconReload v-if="!isReloading" class="h-4 w-4" />
+          <Spinner v-else size="w-[16.8px] h-[16.8px]" />
           <span class="hidden text-sm md:block">{{ t("reload") }}</span>
         </button>
-        <div v-if="showAdd" class="p-px mr-2 rounded-lg from-cyan-500 to-purple-500 bg-linear-to-r">
+        <div v-if="showAdd" class="p-px rounded-lg from-cyan-500 to-purple-500 bg-linear-to-r">
           <button
             :data-test="addButtonTestId"
-            class="inline-flex items-center py-1.5 px-3 text-sm font-medium text-gray-500 bg-white rounded-md cursor-pointer dark:text-white dark:bg-gray-800 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+            class="inline-flex min-h-[42px] items-center gap-2 rounded-md bg-white px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors cursor-pointer hover:bg-slate-50 focus:ring-4 focus:ring-slate-200 focus:outline-hidden dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
             type="button" @click="handleAddClick"
           >
-            <plusOutline v-if="!isAdding" class="m-1 md:mr-2" />
-            <Spinner v-else size="w-[16.8px] h-[16.8px] m-1 mr-2" />
+            <plusOutline v-if="!isAdding" class="h-4 w-4" />
+            <Spinner v-else size="w-[16.8px] h-[16.8px]" />
             <span class="hidden text-sm md:block">{{ t("add-one") }}</span>
           </button>
         </div>
-        <div v-if="filterText && filterList.length" class="h-10 d-dropdown">
+        <div v-if="filterText && filterList.length" class="relative min-h-11 d-dropdown">
           <button
             tabindex="0"
-            class="inline-flex items-center py-1.5 px-3 mr-2 h-full text-sm font-medium text-gray-500 bg-white rounded-md border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+            class="inline-flex min-h-11 items-center rounded-lg border border-slate-300 bg-white px-3.5 py-2 text-sm font-medium text-slate-600 shadow-sm transition-colors cursor-pointer hover:bg-slate-50 focus:ring-4 focus:ring-slate-200 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
           >
             <div
               v-if="filterActivated"
@@ -522,7 +529,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
       </div>
       <button
         v-if="isSelectAllEnabled"
-        class="inline-flex items-center self-end px-3 py-2 ml-auto mr-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+        class="inline-flex min-h-11 items-center self-end px-3 py-2 ml-auto mr-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
         type="button" @click="
           selectedRows = selectedRows.map(() => true);
           emit('selectRow', selectedRows);
@@ -532,27 +539,27 @@ const paginationClass = computed(() => props.mobileFixedPagination
       </button>
       <button
         v-if="isSelectAllEnabled"
-        class="inline-flex items-center self-end py-1.5 px-3 mr-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+        class="inline-flex min-h-11 items-center self-end py-1.5 px-3 mr-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
         type="button" @click="emit('massDelete')"
       >
         <IconTrash class="h-6 text-red-500" />
       </button>
-      <div class="flex overflow-hidden md:w-auto">
+      <div class="flex w-full min-w-0 overflow-hidden md:w-auto">
         <FormKit
           v-model="searchVal" :placeholder="searchPlaceholder" :prefix-icon="IconSearch"
           :disabled="isLoading" enterkeyhint="send" :classes="{
-            outer: 'mb-0! md:w-96',
+            outer: 'mb-0! w-full md:w-96',
           }"
         />
       </div>
     </div>
-    <div class="block">
+    <div class="block overflow-hidden">
       <table id="custom_table" class="w-full text-sm text-left text-gray-500 pb-14 md:pb-0 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:text-gray-400 dark:bg-gray-700">
+        <thead class="text-xs text-slate-600 uppercase bg-slate-50/90 dark:text-gray-300 dark:bg-gray-700/80">
           <tr>
             <th v-if="props.massSelect" class="px-4 md:px-6" />
             <th
-              v-for="(col, i) in columns" :key="i" scope="col" class="px-4 py-1 md:py-3 md:px-6" :class="{
+              v-for="(col, i) in columns" :key="i" scope="col" class="px-4 py-3 md:px-6" :class="{
                 'cursor-pointer': col.sortable,
                 'hidden md:table-cell': !col.mobile,
               }" @click="sortClick(i)"
@@ -571,7 +578,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
         <tbody v-if="shouldShowRows">
           <tr
             v-for="(elem, i) in elementList" :key="i"
-            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+            class="bg-white border-b border-slate-100 transition-colors dark:bg-gray-800 dark:border-gray-700 hover:bg-slate-50 dark:hover:bg-gray-700/70"
           >
             <template v-if="true">
               <th v-if="props.massSelect" class="px-4 md:px-6">
@@ -586,7 +593,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                   } ${col.onClick
                     ? 'cursor-pointer hover:underline clickable-cell'
                     : ''
-                  }`" scope="row" class="px-4 py-2 font-medium text-gray-900 whitespace-nowrap md:py-4 md:px-6 dark:text-white"
+                  }`" scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap md:py-4 md:px-6 dark:text-white"
                   @click.stop="col.onClick ? col.onClick(elem) : () => { }"
                 >
                   <RenderCell v-if="col.renderFunction" :renderer="col.renderFunction" :item="elem" />
@@ -596,7 +603,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                 </th>
                 <td
                   v-else-if="col.actions || col.icon" :class="`${col.class ?? ''} ${!col.mobile ? 'hidden md:table-cell' : ''
-                  }`" class="px-4 py-2 md:py-4 md:px-6"
+                  }`" class="px-4 py-3 md:py-4 md:px-6"
                 >
                   <div class="flex items-center space-x-1">
                     <template v-if="col.actions">
@@ -611,7 +618,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                             :disabled="isActionDisabled(action, elem)"
                             :aria-describedby="getActionTitle(action, elem) ? tooltipIdFor(i, actionIndex) : undefined"
                             :data-test="action.testId ? (typeof action.testId === 'function' ? action.testId(elem) : action.testId) : undefined"
-                            class="p-2 text-gray-500 rounded-md cursor-pointer dark:text-gray-400 hover:text-gray-600 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:disabled:hover:text-gray-400 disabled:hover:bg-transparent disabled:hover:text-gray-500"
+                            class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors cursor-pointer dark:text-gray-400 hover:text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:disabled:hover:text-gray-400 disabled:hover:bg-transparent disabled:hover:text-gray-500"
                             @click.stop="action.onClick(elem)"
                           >
                             <component :is="action.icon" />
@@ -629,7 +636,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                     </template>
                     <template v-else-if="col.icon">
                       <button
-                        class="p-2 text-gray-500 rounded-md cursor-pointer dark:text-gray-400 hover:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+                        class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors cursor-pointer dark:text-gray-400 hover:text-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                         @click.stop="col.onClick ? col.onClick(elem) : () => { }"
                       >
                         <component :is="col.icon" />
@@ -642,7 +649,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                   } ${col.onClick
                     ? 'cursor-pointer hover:underline clickable-cell'
                     : ''
-                  } overflow-hidden text-ellipsis whitespace-nowrap`" class="px-4 py-2 md:py-4 md:px-6"
+                  } overflow-hidden text-ellipsis whitespace-nowrap`" class="px-4 py-3 md:py-4 md:px-6"
                   @click.stop="col.onClick ? col.onClick(elem) : () => { }"
                 >
                   <RenderCell v-if="col.renderFunction" :renderer="col.renderFunction" :item="elem" />
@@ -702,7 +709,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
       <ul class="inline-flex items-center -space-x-px">
         <li>
           <button
-            class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg cursor-pointer dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
+            class="flex min-h-11 min-w-11 items-center justify-center px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
             :class="{
               'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white':
                 canPrev(),
@@ -714,7 +721,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
         </li>
         <li>
           <button
-            class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 cursor-pointer dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
+            class="flex min-h-11 min-w-11 items-center justify-center px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
             :class="{
               'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white':
                 canPrev(),
@@ -727,7 +734,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
         <li>
           <button
             aria-current="page"
-            class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 dark:text-white dark:bg-gray-700 dark:border-gray-700"
+            class="z-10 min-h-11 min-w-11 px-3 py-2 leading-tight text-blue-700 border border-blue-300 bg-blue-50 dark:text-white dark:bg-gray-700 dark:border-gray-700"
             disabled
           >
             {{ currentPage }}
@@ -735,7 +742,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
         </li>
         <li>
           <button
-            class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 cursor-pointer dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
+            class="flex min-h-11 min-w-11 items-center justify-center px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
             :class="{
               'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white':
                 canNext(),
@@ -747,7 +754,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
         </li>
         <li>
           <button
-            class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg cursor-pointer dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
+            class="flex min-h-11 min-w-11 items-center justify-center px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-700"
             :class="{
               'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white':
                 canNext(),
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 35f52bbb51..8da871deeb 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -33,14 +33,14 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <header class="bg-slate-100 backdrop-blur-xl dark:bg-slate-900">
+  <header class="sticky top-0 z-30 border-b border-slate-200/80 bg-slate-50/95 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/90">
     <div class="px-2 sm:px-4 lg:px-6">
       <div class="relative flex items-center justify-between h-16 -mb-px">
         <!-- Header: Left side -->
         <div class="flex items-center space-x-4">
           <div v-if="displayStore.NavTitle && isMobile" class="pr-2">
             <button
-              class="flex p-2 rounded-sm dark:text-white focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none text-slate-500 dark:hover:bg-slate-600 hover:bg-slate-300"
+              class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-200 hover:text-slate-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-white"
               :aria-label="t('button-back')"
               @click="back()"
             >
@@ -50,7 +50,7 @@ const { t } = useI18n()
           </div>
           <!-- Hamburger button -->
           <button
-            class="p-1 rounded-md lg:hidden dark:text-white focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none text-slate-500 dark:hover:text-slate-50 hover:text-slate-600"
+            class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-200 hover:text-slate-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-white lg:hidden"
             aria-controls="sidebar"
             :aria-expanded="props.sidebarOpen"
             :aria-label="props.sidebarOpen ? t('close-sidebar') : t('open-sidebar')"
@@ -63,14 +63,14 @@ const { t } = useI18n()
           <!-- Title on desktop -->
           <div class="hidden lg:block">
             <div class="flex items-center space-x-2 font-bold truncate md:text-2xl dark:text-white text-md text-dark">
-              <nav class="text-sm font-normal text-slate-600 dark:text-slate-400" aria-label="Breadcrumb">
+              <nav class="text-sm font-normal text-slate-600 dark:text-slate-300" aria-label="Breadcrumb">
                 <ol class="inline-flex items-center space-x-1">
                   <li v-for="(breadcrumb, i) in displayStore.pathTitle" :key="i" class="flex items-center">
                     <span v-if="i > 0" class="mx-1" aria-hidden="true"> / </span>
                     <router-link
                       :to="breadcrumb.path"
-                      class="px-1 rounded-sm hover:underline focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none"
-                      :class="i === displayStore.pathTitle.length - 1 ? 'font-bold text-slate-600 dark:text-slate-100' : ''"
+                      class="px-1.5 py-1 rounded-md transition-colors hover:bg-slate-200/70 hover:text-slate-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none dark:hover:bg-slate-800 dark:hover:text-white"
+                      :class="i === displayStore.pathTitle.length - 1 ? 'font-bold text-slate-800 dark:text-slate-50' : ''"
                     >
                       {{ breadcrumb.translate === false ? breadcrumb.name : t(breadcrumb.name) }}
                     </router-link>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 335f80a606..9f2123a51a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -91,7 +91,7 @@ const tabs = computed<Tab[]>(() => {
     <div
       class="fixed inset-0 transition-opacity duration-200 lg:hidden z-60"
       :class="{
-        'bg-slate-900/50 cursor-pointer': props.sidebarOpen,
+        'bg-slate-900/55 cursor-pointer backdrop-blur-sm': props.sidebarOpen,
         'bg-slate-900/0 pointer-events-none': !props.sidebarOpen,
       }"
       aria-hidden="true"
@@ -102,14 +102,14 @@ const tabs = computed<Tab[]>(() => {
     <div
       id="sidebar"
       ref="sidebar"
-      class="fixed z-60 left-4 top-16 h-[calc(100%-4rem)] w-64 flex shrink-0 flex-col bg-slate-800 transition-all duration-200 ease-in-out rounded-xl shadow-lg lg:static lg:left-0 lg:top-0 lg:w-64 lg:h-full lg:bg-slate-800 lg:rounded-none lg:shadow-none lg:translate-x-0"
+      class="fixed z-60 left-4 top-16 h-[calc(100%-4rem)] w-64 flex shrink-0 flex-col bg-slate-800 transition-all duration-200 ease-in-out rounded-xl border border-white/10 shadow-2xl lg:static lg:left-0 lg:top-0 lg:w-64 lg:h-full lg:bg-slate-800 lg:rounded-none lg:border-0 lg:shadow-none lg:translate-x-0"
       :class="{
         'translate-x-0': props.sidebarOpen,
         '-translate-x-[120%]': !props.sidebarOpen,
       }"
     >
       <!-- Sidebar header -->
-      <div class="flex justify-between px-3 py-4 border-b lg:py-6 lg:px-6 lg:border-b border-slate-800 shrink-0 lg:border-slate-700">
+      <div class="flex justify-between px-3 py-4 border-b lg:py-6 lg:px-6 lg:border-b border-slate-700/70 shrink-0">
         <router-link
           class="flex items-center p-1 space-x-2 rounded-lg cursor-pointer lg:space-x-3 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none focus:ring-offset-slate-800"
           to="/apps"
@@ -128,24 +128,24 @@ const tabs = computed<Tab[]>(() => {
       <!-- Navigation -->
       <div class="flex-1 px-3 py-4 space-y-4 overflow-y-auto lg:py-6 lg:px-6">
         <div>
-          <h3 class="mb-3 text-xs font-semibold uppercase lg:mb-4 lg:tracking-wider text-slate-500 lg:text-slate-500">
+          <h3 class="mb-3 text-xs font-semibold uppercase lg:mb-4 lg:tracking-wider text-slate-400/80">
             {{ t('pages') }}
           </h3>
           <ul class="space-y-1 lg:space-y-2">
             <li v-for="tab, i in tabs" :key="i">
               <button
-                class="flex items-center p-3 w-full rounded-md transition duration-150 cursor-pointer lg:p-3 lg:rounded-lg focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none text-slate-200 min-h-[44px] lg:text-slate-200 lg:hover:bg-slate-700/50 hover:bg-slate-700/50 focus:ring-offset-slate-800"
+                class="group relative flex min-h-11 w-full items-center overflow-hidden rounded-lg p-3 text-left text-slate-200 transition duration-150 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-800 focus:outline-none hover:bg-slate-700/60"
                 :class="{
-                  'hover:bg-slate-700/50 lg:hover:bg-slate-700/50': !isTabActive(tab.key),
-                  'bg-slate-700 text-white lg:bg-slate-700 lg:text-white': isTabActive(tab.key),
+                  'hover:bg-slate-700/60': !isTabActive(tab.key),
+                  'bg-slate-700/90 text-white shadow-inner before:absolute before:left-0 before:top-2 before:bottom-2 before:w-1 before:rounded-r-full before:bg-sky-300 before:content-[\'\']': isTabActive(tab.key),
                   'cursor-default': isTabActive(tab.key),
                 }"
                 :aria-label="tab.redirect ? `${t(tab.label)} (opens in new tab)` : t(tab.label)"
                 :aria-current="isTabActive(tab.key) ? 'page' : undefined"
                 @click="openTab(tab)"
               >
-                <component :is="tab.icon" class="w-5 h-5 transition-colors duration-150 shrink-0" :class="{ 'text-blue-500 lg:text-blue-500': isTabActive(tab.key), 'text-slate-400 group-hover:text-slate-300 lg:text-slate-400 lg:group-hover:text-slate-300': !isTabActive(tab.key) }" />
-                <span class="flex items-center ml-3 text-sm font-medium capitalize transition-colors duration-150" :class="{ 'text-blue-500 lg:text-blue-500': isTabActive(tab.key), 'text-slate-400 group-hover:text-slate-300 lg:text-slate-400 lg:group-hover:text-slate-300': !isTabActive(tab.key), 'underline': tab.redirect }">
+                <component :is="tab.icon" class="w-5 h-5 transition-colors duration-150 shrink-0" :class="{ 'text-sky-300': isTabActive(tab.key), 'text-slate-400 group-hover:text-slate-200': !isTabActive(tab.key) }" />
+                <span class="flex items-center ml-3 text-sm font-medium capitalize transition-colors duration-150" :class="{ 'text-sky-300': isTabActive(tab.key), 'text-slate-300 group-hover:text-white': !isTabActive(tab.key), 'underline': tab.redirect }">
                   {{ t(tab.label) }}
                   <svg v-if="tab.redirect" class="w-3 h-3 ml-1 opacity-60" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                     <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" clip-rule="evenodd" />
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index b08250bde5..bc44a1d1ab 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -20,20 +20,20 @@ function activeTabColor(tab: string, isSecondary = false) {
   // Secondary row tabs
   if (isSecondary) {
     return isActive
-      ? 'text-blue-600 dark:text-blue-400 bg-white dark:bg-slate-800 border border-blue-200/70 dark:border-blue-800 shadow-sm hover:ring-1 hover:ring-blue-200 dark:hover:ring-blue-700 hover:bg-blue-50 dark:hover:bg-slate-900 transition-colors'
-      : 'border border-transparent text-slate-500/75 dark:text-slate-400/75 hover:bg-white dark:hover:bg-slate-900 hover:text-slate-700 dark:hover:text-slate-200 transition-colors'
+      ? 'text-blue-700 dark:text-blue-300 bg-white dark:bg-slate-900 border border-blue-200/80 dark:border-blue-800 shadow-sm ring-1 ring-blue-100/70 dark:ring-blue-900/40 hover:bg-white dark:hover:bg-slate-900 transition-colors'
+      : 'border border-transparent text-slate-500 dark:text-slate-400 hover:bg-white/80 dark:hover:bg-slate-900 hover:text-slate-800 dark:hover:text-slate-100 transition-colors'
   }
 
   // Primary row tabs - open tab style
   return isActive
-    ? 'text-blue-500 dark:text-blue-300 bg-blue-50 dark:bg-slate-800/40 border-t border-l border-r border-blue-200/60 dark:border-blue-800/70 border-b-0 before:content-[\'\'] before:absolute before:bottom-[-1px] before:left-0 before:right-0 before:h-[3px] before:bg-blue-50 dark:before:bg-[#141e33] before:z-[11] hover:bg-blue-100 dark:hover:bg-[#1e3050] transition-colors'
-    : 'border border-transparent text-slate-500/75 dark:text-slate-400/75 hover:bg-blue-100/70 dark:hover:bg-[#1a2744cc] hover:text-slate-700 dark:hover:text-slate-200 transition-colors'
+    ? 'text-blue-700 dark:text-blue-300 bg-white dark:bg-slate-900 border-t border-l border-r border-blue-200/80 dark:border-blue-800/80 border-b-0 shadow-sm before:content-[\'\'] before:absolute before:bottom-[-1px] before:left-0 before:right-0 before:h-[3px] before:bg-white dark:before:bg-slate-900 before:z-[11] hover:bg-white dark:hover:bg-slate-900 transition-colors'
+    : 'border border-transparent text-slate-500 dark:text-slate-400 hover:bg-white/70 dark:hover:bg-slate-900/80 hover:text-slate-800 dark:hover:text-slate-100 transition-colors'
 }
 
-const ulPrimaryClass = 'flex text-xs md:text-sm font-medium text-center text-gray-500 dark:text-gray-300 gap-1 pt-1 px-1'
-const ulSecondaryClass = 'flex text-sm font-medium text-center text-gray-600 dark:text-gray-200 gap-2 py-2'
-const buttonPrimaryClass = 'inline-flex items-center gap-2 px-3 py-2 min-w-[42px] min-h-[38px] rounded-t-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-900 transition-all group relative'
-const buttonSecondaryClass = 'inline-flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-900 transition-colors group'
+const ulPrimaryClass = 'flex text-xs md:text-sm font-medium text-center text-gray-500 dark:text-gray-300 gap-1.5 pt-2 px-2'
+const ulSecondaryClass = 'flex text-sm font-medium text-center text-gray-600 dark:text-gray-200 gap-2 py-2 px-2'
+const buttonPrimaryClass = 'inline-flex items-center gap-2 px-3.5 py-2 min-w-11 min-h-11 rounded-t-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-900 transition-all group relative'
+const buttonSecondaryClass = 'inline-flex items-center gap-2 px-3.5 py-2 min-h-11 rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-900 transition-colors group'
 const iconClass = 'w-5 h-5 transition-colors'
 const labelClass = 'hidden md:block text-xs md:text-sm font-medium transition-colors first-letter:uppercase'
 </script>
@@ -41,7 +41,7 @@ const labelClass = 'hidden md:block text-xs md:text-sm font-medium transition-co
 <template>
   <div>
     <div class="pb-0">
-      <ul :class="[ulPrimaryClass, noWrap ? 'flex-nowrap overflow-x-scroll no-scrollbar px-1' : 'flex-wrap']">
+      <ul :class="[ulPrimaryClass, noWrap ? 'flex-nowrap overflow-x-auto no-scrollbar' : 'flex-wrap']">
         <li v-for="(tab, i) in tabs" :key="i" class="relative mr-2" :class="{ 'z-20': activeTab === tab.key }">
           <button :class="[buttonPrimaryClass, activeTabColor(tab.key)]" @click="emit('update:activeTab', tab.key)">
             <component :is="tab.icon" :class="iconClass" />
@@ -50,8 +50,8 @@ const labelClass = 'hidden md:block text-xs md:text-sm font-medium transition-co
         </li>
       </ul>
     </div>
-    <div class="relative -mt-px border-t bg-blue-50 dark:bg-slate-800/40 border-blue-200/60 dark:border-blue-800/70" :class="secondaryTabs?.length ? 'z-10' : 'z-0'">
-      <ul v-if="secondaryTabs?.length" :class="[ulSecondaryClass, noWrap ? 'flex-nowrap overflow-x-scroll no-scrollbar px-1' : 'flex-wrap']">
+    <div class="relative -mt-px border-t bg-slate-50/95 dark:bg-slate-950/40 border-blue-200/60 dark:border-blue-800/70" :class="secondaryTabs?.length ? 'z-10' : 'z-0'">
+      <ul v-if="secondaryTabs?.length" :class="[ulSecondaryClass, noWrap ? 'flex-nowrap overflow-x-auto no-scrollbar' : 'flex-wrap']">
         <li v-for="(tab, i) in secondaryTabs" :key="i" class="mr-2">
           <button :class="[buttonSecondaryClass, activeTabColor(tab.key, true)]" @click="emit('update:secondaryActiveTab', tab.key)">
             <component :is="tab.icon" :class="iconClass" />
diff --git a/src/components/auth/AuthPageShell.vue b/src/components/auth/AuthPageShell.vue
index 51dc613782..9104472259 100644
--- a/src/components/auth/AuthPageShell.vue
+++ b/src/components/auth/AuthPageShell.vue
@@ -61,8 +61,7 @@ const heroHighlights = computed(() => props.heroHighlights ?? [
     class="relative flex h-dvh min-h-dvh w-full overflow-y-auto bg-[linear-gradient(180deg,rgba(248,250,252,0.98)_0%,rgba(238,244,255,0.9)_55%,rgba(248,250,252,0.98)_100%)] dark:bg-[linear-gradient(180deg,rgba(15,23,42,0.98)_0%,rgba(20,29,53,0.96)_52%,rgba(15,23,42,0.98)_100%)]"
   >
     <div class="pointer-events-none absolute inset-0 hidden overflow-hidden lg:block" aria-hidden="true">
-      <div class="absolute top-[10%] -left-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(17,158,255,0.22)] opacity-55 blur-[52px]" />
-      <div class="absolute right-[-7rem] bottom-[8%] h-[18rem] w-[18rem] rounded-full bg-[rgba(104,118,225,0.18)] opacity-55 blur-[52px]" />
+      <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(17,158,255,0.13)_0%,transparent_44%)]" />
       <div
         class="absolute inset-0 opacity-40 [background-image:linear-gradient(rgba(148,163,184,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.12)_1px,transparent_1px)] [background-size:3rem_3rem] [mask-image:radial-gradient(circle_at_center,black_40%,transparent_82%)]"
       />
@@ -82,7 +81,7 @@ const heroHighlights = computed(() => props.heroHighlights ?? [
           </div>
 
           <div class="mt-8 space-y-5">
-            <div class="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-slate-200/70 bg-white/80 shadow-lg shadow-slate-900/5 backdrop-blur dark:border-slate-700/80 dark:bg-slate-900/70">
+            <div class="inline-flex h-14 w-14 items-center justify-center rounded-xl border border-slate-200/70 bg-white/80 shadow-lg shadow-slate-900/5 backdrop-blur dark:border-slate-700/80 dark:bg-slate-900/70">
               <img src="/capgo.webp" alt="Capgo logo" class="h-8 w-8 rounded-sm invert dark:invert-0">
             </div>
             <div>
@@ -102,7 +101,7 @@ const heroHighlights = computed(() => props.heroHighlights ?? [
             <article
               v-for="highlight in heroHighlights"
               :key="highlight.title"
-              class="rounded-3xl border border-white/70 bg-white/78 p-5 shadow-[0_20px_50px_-30px_rgba(15,23,42,0.45)] backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/72"
+              class="rounded-2xl border border-white/70 bg-white/78 p-5 shadow-[0_20px_50px_-34px_rgba(15,23,42,0.45)] backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/72"
             >
               <div class="mb-3 h-2 w-12 rounded-full bg-gradient-to-r from-sky-500 via-sky-400 to-indigo-500" />
               <h2 class="text-base font-semibold text-slate-900 dark:text-white">
@@ -131,7 +130,7 @@ const heroHighlights = computed(() => props.heroHighlights ?? [
           </div>
         </div>
 
-        <div class="rounded-none border-0 bg-transparent p-0 shadow-none backdrop-blur-0 sm:rounded-[1.75rem] sm:border sm:border-slate-200/75 sm:bg-[linear-gradient(180deg,rgba(255,255,255,0.94)_0%,rgba(255,255,255,0.84)_100%)] sm:p-7 sm:shadow-[0_34px_80px_-42px_rgba(15,23,42,0.5)] sm:backdrop-blur-[18px] sm:dark:border-slate-600/70 sm:dark:bg-[linear-gradient(180deg,rgba(15,23,42,0.88)_0%,rgba(15,23,42,0.7)_100%)]">
+        <div class="rounded-none border-0 bg-transparent p-0 shadow-none backdrop-blur-0 sm:rounded-2xl sm:border sm:border-slate-200/80 sm:bg-[linear-gradient(180deg,rgba(255,255,255,0.96)_0%,rgba(255,255,255,0.88)_100%)] sm:p-7 sm:shadow-[0_30px_70px_-46px_rgba(15,23,42,0.52)] sm:backdrop-blur-[18px] sm:dark:border-slate-600/70 sm:dark:bg-[linear-gradient(180deg,rgba(15,23,42,0.9)_0%,rgba(15,23,42,0.74)_100%)]">
           <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
             <div>
               <p v-if="cardKicker" class="text-[0.72rem] font-bold tracking-[0.22em] text-slate-500 uppercase dark:text-slate-400">
diff --git a/src/components/dashboard/ChartCard.vue b/src/components/dashboard/ChartCard.vue
index d3500b4293..f728e0152e 100644
--- a/src/components/dashboard/ChartCard.vue
+++ b/src/components/dashboard/ChartCard.vue
@@ -49,8 +49,8 @@ const displayNoDataMessage = computed(() => props.noDataMessage ?? t('no-data'))
 </script>
 
 <template>
-  <div class="relative col-span-full flex h-[460px] flex-col overflow-hidden rounded-[1.75rem] border border-slate-200/80 bg-white/95 shadow-[0_20px_60px_-38px_rgba(15,23,42,0.3)] backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/85 dark:shadow-[0_24px_70px_-42px_rgba(2,6,23,0.72)]">
-    <div class="pointer-events-none absolute inset-x-0 top-0 h-28 bg-gradient-to-br from-slate-50 via-white to-transparent dark:from-slate-800/70 dark:via-slate-900/40 dark:to-transparent" />
+  <div class="relative col-span-full flex h-[460px] flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-[0_18px_48px_-38px_rgba(15,23,42,0.45)] dark:border-slate-700/80 dark:bg-slate-900 dark:shadow-[0_24px_70px_-48px_rgba(2,6,23,0.82)]">
+    <div class="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-br from-slate-50 via-white to-transparent dark:from-slate-800/70 dark:via-slate-900/40 dark:to-transparent" />
 
     <!-- Header with title and stats -->
     <div class="relative overflow-hidden px-5 pt-5">
@@ -71,7 +71,7 @@ const displayNoDataMessage = computed(() => props.noDataMessage ?? t('no-data'))
             <div
               v-if="showEvolutionBadge"
               class="inline-flex justify-center items-center rounded-full px-3 py-1 text-xs font-bold text-white shadow-sm"
-              :class="{ 'bg-cyan-500': (lastDayEvolution ?? 0) >= 0, 'bg-amber-500': (lastDayEvolution ?? 0) < 0 }"
+              :class="{ 'bg-cyan-600': (lastDayEvolution ?? 0) >= 0, 'bg-amber-600': (lastDayEvolution ?? 0) < 0 }"
             >
               {{ (lastDayEvolution ?? 0) < 0 ? '-' : '+' }}{{ Math.abs(lastDayEvolution ?? 0).toFixed(2) }}%
             </div>
diff --git a/src/components/tables/AppTable.vue b/src/components/tables/AppTable.vue
index e12412fabc..5e1df40f5f 100644
--- a/src/components/tables/AppTable.vue
+++ b/src/components/tables/AppTable.vue
@@ -321,6 +321,7 @@ const filteredApps = computed(() => {
         v-model:search="internalSearch"
         :show-add="!isMobile"
         :total="props.total ?? filteredApps.length"
+        :page-size="10"
         :element-list="filteredApps"
         :search-placeholder="t('search-by-name-or-app-id')"
         :is-loading="props.isLoading ?? false"
diff --git a/src/layouts/admin.vue b/src/layouts/admin.vue
index 15d9f54d1c..8f779f0641 100644
--- a/src/layouts/admin.vue
+++ b/src/layouts/admin.vue
@@ -41,7 +41,7 @@ function handleTab(key: string) {
       no-wrap
       @update:active-tab="handleTab"
     />
-    <main class="flex flex-1 w-full min-h-0 mt-0 overflow-hidden bg-blue-50 dark:bg-slate-800/40">
+    <main class="flex flex-1 w-full min-h-0 mt-0 overflow-hidden bg-slate-50 dark:bg-slate-950/40">
       <div class="flex-1 w-full min-h-0 mx-auto overflow-y-auto">
         <RouterView class="w-full" />
       </div>
diff --git a/src/layouts/app.vue b/src/layouts/app.vue
index f2e1e1d1e9..7ec48cea88 100644
--- a/src/layouts/app.vue
+++ b/src/layouts/app.vue
@@ -183,7 +183,7 @@ function handleSecondaryTab(key: string) {
       @update:active-tab="handleTab"
       @update:secondary-active-tab="handleSecondaryTab"
     />
-    <main class="relative flex flex-1 w-full min-h-0 mt-0 overflow-hidden bg-blue-50 dark:bg-slate-800/40">
+    <main class="relative flex flex-1 w-full min-h-0 mt-0 overflow-hidden bg-slate-50 dark:bg-slate-950/40">
       <div
         class="flex-1 w-full min-h-0 mx-auto overflow-y-auto"
         :class="{ 'blur-sm pointer-events-none select-none': showPaymentOverlay }"
diff --git a/src/layouts/settings.vue b/src/layouts/settings.vue
index b2838bab55..2a73183cc1 100644
--- a/src/layouts/settings.vue
+++ b/src/layouts/settings.vue
@@ -292,7 +292,7 @@ function handleSecondary(val: string) {
       @update:active-tab="handlePrimary"
       @update:secondary-active-tab="handleSecondary"
     />
-    <main class="flex relative flex-1 w-full min-h-0 mt-0 overflow-hidden bg-blue-50 dark:bg-slate-800/40">
+    <main class="flex relative flex-1 w-full min-h-0 mt-0 overflow-hidden bg-slate-50 dark:bg-slate-950/40">
       <div
         class="flex-1 w-full min-h-0 px-0 pt-0 mx-auto mb-8 overflow-y-auto sm:px-6 md:pt-16 lg:px-8 max-w-9xl"
         :class="{ 'blur-sm pointer-events-none select-none': showAdminOnlyModal }"
diff --git a/src/pages/admin/dashboard/replication.vue b/src/pages/admin/dashboard/replication.vue
index 4c1aaa7cc1..2246d8df92 100644
--- a/src/pages/admin/dashboard/replication.vue
+++ b/src/pages/admin/dashboard/replication.vue
@@ -99,26 +99,19 @@ const checkedAt = computed(() => {
   return formatLocalDateTime(data.value.checked_at)
 })
 
-const internalReplicationSecret = import.meta.env.VITE_REPLICATION_API_SECRET as string | undefined
-
 async function loadReplicationStatus() {
   isLoading.value = true
   errorMessage.value = null
 
   try {
     const headers: Record<string, string> = {}
-    if (internalReplicationSecret) {
-      headers.apisecret = internalReplicationSecret
-    }
-    else {
-      const supabase = useSupabase()
-      const { data: { session } } = await supabase.auth.getSession()
+    const supabase = useSupabase()
+    const { data: { session } } = await supabase.auth.getSession()
 
-      if (!session?.access_token)
-        throw new Error('No session available and replication secret is not configured')
+    if (!session?.access_token)
+      throw new Error('No session available and replication secret is not configured')
 
-      headers.Authorization = `Bearer ${session.access_token}`
-    }
+    headers.Authorization = `Bearer ${session.access_token}`
 
     const response = await fetch(`${defaultApiHost}/replication`, {
       method: 'GET',
@@ -209,7 +202,7 @@ displayStore.defaultBack = '/dashboard'
           {{ errorMessage }}
         </div>
 
-        <div v-else-if="isLoading && !data" class="flex items-center justify-center min-h-[300px]">
+        <div v-else-if="isLoading && !data" class="flex items-center justify-center min-h-75">
           <Spinner size="w-24 h-24" />
         </div>
 
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 9363cc71c5..c0e8b3f498 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -66,9 +66,9 @@ const loginHeroHighlights = computed(() => [
 ])
 const authCardShellClass = [
   'rounded-none border-0 bg-transparent p-0 shadow-none backdrop-blur-0',
-  'sm:rounded-[1.75rem] sm:border sm:border-slate-200/75 sm:bg-[linear-gradient(180deg,rgba(255,255,255,0.94)_0%,rgba(255,255,255,0.84)_100%)]',
-  'sm:p-7 sm:shadow-[0_34px_80px_-42px_rgba(15,23,42,0.5)] sm:backdrop-blur-[18px]',
-  'sm:dark:border-slate-600/70 sm:dark:bg-[linear-gradient(180deg,rgba(15,23,42,0.88)_0%,rgba(15,23,42,0.7)_100%)]',
+  'sm:rounded-2xl sm:border sm:border-slate-200/80 sm:bg-[linear-gradient(180deg,rgba(255,255,255,0.96)_0%,rgba(255,255,255,0.88)_100%)]',
+  'sm:p-7 sm:shadow-[0_30px_70px_-46px_rgba(15,23,42,0.52)] sm:backdrop-blur-[18px]',
+  'sm:dark:border-slate-600/70 sm:dark:bg-[linear-gradient(180deg,rgba(15,23,42,0.9)_0%,rgba(15,23,42,0.74)_100%)]',
 ].join(' ')
 const authCardHeaderClass = 'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'
 const authStepCardClass = 'min-w-0'
@@ -610,8 +610,7 @@ onMounted(checkLogin)
     class="relative flex h-dvh min-h-dvh w-full overflow-y-auto bg-[linear-gradient(180deg,rgba(248,250,252,0.98)_0%,rgba(238,244,255,0.9)_55%,rgba(248,250,252,0.98)_100%)] dark:bg-[linear-gradient(180deg,rgba(15,23,42,0.98)_0%,rgba(20,29,53,0.96)_52%,rgba(15,23,42,0.98)_100%)]"
   >
     <div class="pointer-events-none absolute inset-0 hidden overflow-hidden lg:block" aria-hidden="true">
-      <div class="absolute top-[10%] -left-32 h-[22rem] w-[22rem] rounded-full bg-[rgba(17,158,255,0.22)] opacity-55 blur-[52px]" />
-      <div class="absolute right-[-7rem] bottom-[8%] h-[18rem] w-[18rem] rounded-full bg-[rgba(104,118,225,0.18)] opacity-55 blur-[52px]" />
+      <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(17,158,255,0.13)_0%,transparent_44%)]" />
       <div
         class="absolute inset-0 opacity-40 [background-image:linear-gradient(rgba(148,163,184,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.12)_1px,transparent_1px)] [background-size:3rem_3rem] [mask-image:radial-gradient(circle_at_center,black_40%,transparent_82%)]"
       />
@@ -631,7 +630,7 @@ onMounted(checkLogin)
           </div>
 
           <div class="mt-8 space-y-5">
-            <div class="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-slate-200/70 bg-white/80 shadow-lg shadow-slate-900/5 backdrop-blur dark:border-slate-700/80 dark:bg-slate-900/70">
+            <div class="inline-flex h-14 w-14 items-center justify-center rounded-xl border border-slate-200/70 bg-white/80 shadow-lg shadow-slate-900/5 backdrop-blur dark:border-slate-700/80 dark:bg-slate-900/70">
               <img src="/capgo.webp" alt="Capgo logo" class="h-8 w-8 rounded-sm invert dark:invert-0">
             </div>
             <div>
@@ -651,7 +650,7 @@ onMounted(checkLogin)
             <article
               v-for="highlight in loginHeroHighlights"
               :key="highlight.title"
-              class="rounded-3xl border border-white/70 bg-white/78 p-5 shadow-[0_20px_50px_-30px_rgba(15,23,42,0.45)] backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/72"
+              class="rounded-2xl border border-white/70 bg-white/78 p-5 shadow-[0_20px_50px_-34px_rgba(15,23,42,0.45)] backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/72"
             >
               <div class="mb-3 h-2 w-12 rounded-full bg-gradient-to-r from-sky-500 via-sky-400 to-indigo-500" />
               <h2 class="text-base font-semibold text-slate-900 dark:text-white">
diff --git a/src/styles/style.css b/src/styles/style.css
index f4eb1e9157..29086ba402 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -224,28 +224,28 @@ layer(base);
   --text-sm--line-height: 1.5715;
   --text-base: 1rem;
   --text-base--line-height: 1.5;
-  --text-base--letter-spacing: -0.01em;
+  --text-base--letter-spacing: 0;
   --text-lg: 1.125rem;
   --text-lg--line-height: 1.5;
-  --text-lg--letter-spacing: -0.01em;
+  --text-lg--letter-spacing: 0;
   --text-xl: 1.25rem;
   --text-xl--line-height: 1.5;
-  --text-xl--letter-spacing: -0.01em;
+  --text-xl--letter-spacing: 0;
   --text-2xl: 1.5rem;
   --text-2xl--line-height: 1.33;
-  --text-2xl--letter-spacing: -0.01em;
+  --text-2xl--letter-spacing: 0;
   --text-3xl: 1.88rem;
   --text-3xl--line-height: 1.33;
-  --text-3xl--letter-spacing: -0.01em;
+  --text-3xl--letter-spacing: 0;
   --text-4xl: 2.25rem;
   --text-4xl--line-height: 1.25;
-  --text-4xl--letter-spacing: -0.02em;
+  --text-4xl--letter-spacing: 0;
   --text-5xl: 3rem;
   --text-5xl--line-height: 1.25;
-  --text-5xl--letter-spacing: -0.02em;
+  --text-5xl--letter-spacing: 0;
   --text-6xl: 3.75rem;
   --text-6xl--line-height: 1.2;
-  --text-6xl--letter-spacing: -0.02em;
+  --text-6xl--letter-spacing: 0;
   
   /* Screens */
   --breakpoint-xs: 480px;
@@ -300,6 +300,8 @@ layer(base);
 html {
   height: 100%;
   overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
 #app {