diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index e9a34f20e5a..ce740121fcf 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -281,6 +281,10 @@ export class ColorRegistry {
       dark: colorPalette.charcoal[600],
       light: colorPalette.gray[100],
     });
+    this.registerColor(`${glNav}bg-border`, {
+      dark: colorPalette.charcoal[500],
+      light: colorPalette.gray[300],
+    });
     this.registerColor(`${glNav}icon`, {
       dark: colorPalette.gray[600],
       light: colorPalette.charcoal[200],
diff --git a/packages/renderer/src/AppNavigation.svelte b/packages/renderer/src/AppNavigation.svelte
index 9fafb113788..937e0d833c3 100644
--- a/packages/renderer/src/AppNavigation.svelte
+++ b/packages/renderer/src/AppNavigation.svelte
@@ -244,7 +244,7 @@ export let meta: TinroRouteMeta;
 
 <svelte:window />
 <nav
-  class="group w-leftnavbar min-w-leftnavbar flex flex-col hover:overflow-y-none bg-[var(--pd-global-nav-bg)]"
+  class="group w-leftnavbar min-w-leftnavbar flex flex-col hover:overflow-y-none bg-[var(--pd-global-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
   aria-label="AppNavigation">
   <NavItem href="/" tooltip="Dashboard" bind:meta={meta}>
     <div class="relative w-full">
diff --git a/packages/renderer/src/PreferencesNavigation.svelte b/packages/renderer/src/PreferencesNavigation.svelte
index eb0d0838a76..8b6082055e1 100644
--- a/packages/renderer/src/PreferencesNavigation.svelte
+++ b/packages/renderer/src/PreferencesNavigation.svelte
@@ -41,7 +41,7 @@ onMount(async () => {
 </script>
 
 <nav
-  class="z-1 w-leftsidebar min-w-leftsidebar shadow flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)]"
+  class="z-1 w-leftsidebar min-w-leftsidebar flex-col justify-between flex transition-all duration-500 ease-in-out bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
   aria-label="PreferencesNavigation">
   <div class="flex items-center">
     <div class="pt-4 px-3 mb-10">
diff --git a/packages/renderer/src/lib/dashboard/DashboardPage.svelte b/packages/renderer/src/lib/dashboard/DashboardPage.svelte
index 3d0339c670a..076f1c745d5 100644
--- a/packages/renderer/src/lib/dashboard/DashboardPage.svelte
+++ b/packages/renderer/src/lib/dashboard/DashboardPage.svelte
@@ -38,7 +38,7 @@ function getInitializationContext(id: string): InitializationContext {
 </script>
 
 <NavPage searchEnabled={false} title="Dashboard">
-  <div slot="content" class="flex flex-col min-w-full h-full bg-[var(--pd-content-bg)] shadow-nav py-5">
+  <div slot="content" class="flex flex-col min-w-full h-full bg-[var(--pd-content-bg)] py-5">
     <div class="min-w-full flex-1">
       <NotificationsBox />
       <div class="px-5 space-y-5 h-full">
diff --git a/packages/renderer/src/lib/ui/TitleBar.svelte b/packages/renderer/src/lib/ui/TitleBar.svelte
index 45531efcfc4..b4a1a236e66 100644
--- a/packages/renderer/src/lib/ui/TitleBar.svelte
+++ b/packages/renderer/src/lib/ui/TitleBar.svelte
@@ -18,7 +18,8 @@ onMount(async () => {
   class="{platform === 'win32' ? 'bg-[#202020]' : 'bg-[var(--pd-titlebar-bg)]'} body-font z-[999] relative {platform ===
   'win32'
     ? 'min-h-[32px]'
-    : 'min-h-[38px]'}"
+    : 'min-h-[38px]'}
+    border-[var(--pd-global-nav-bg-border)] border-b-[1px]"
   style="-webkit-app-region: drag;">
   <div class="flex select-none">
     <!-- On Linux, title is centered and we have control buttons in the title bar-->
diff --git a/packages/ui/src/lib/layouts/NavPage.svelte b/packages/ui/src/lib/layouts/NavPage.svelte
index 5993a16f966..1ad5fbc49a7 100644
--- a/packages/ui/src/lib/layouts/NavPage.svelte
+++ b/packages/ui/src/lib/layouts/NavPage.svelte
@@ -6,7 +6,7 @@ export let searchTerm = '';
 export let searchEnabled = true;
 </script>
 
-<div class="flex flex-col w-full h-full shadow-pageheader">
+<div class="flex flex-col w-full h-full">
   <div class="flex flex-col w-full h-full pt-4" role="region" aria-label={title}>
     <div class="flex pb-2" role="region" aria-label="header">
       <div class="px-5">
diff --git a/packages/ui/src/lib/layouts/Page.svelte b/packages/ui/src/lib/layouts/Page.svelte
index e9c83a6ddb4..b31729dadf6 100644
--- a/packages/ui/src/lib/layouts/Page.svelte
+++ b/packages/ui/src/lib/layouts/Page.svelte
@@ -36,7 +36,7 @@ function handleKeydown(e: KeyboardEvent): void {
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="flex flex-col w-full h-full shadow-pageheader bg-[var(--pd-content-bg)]">
+<div class="flex flex-col w-full h-full bg-[var(--pd-content-bg)]">
   <div class="flex flex-row w-full h-fit px-5 pt-4 pb-2" aria-label="Header" role="region">
     <div class="flex flex-col w-full h-fit">
       {#if showBreadcrumb}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6b9d26ee064..89320317273 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -29,11 +29,6 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
-      boxShadow: {
-        "titlebar": 'inset 0px -1px 0px 0 rgb(54 54 61 / 0.6)', // highlight for bottom of titlebar
-	"pageheader": 'inset 0 0px 10px 0 rgb(0 0 0 / 0.4)',
-	"nav": 'inset 7px -4px 6px 0 rgb(0 0 0 / 0.15)',
-      },
       transitionProperty: {
         width: 'width',
       },