6 files changed, 28 insertions, 9 deletions
diff --git a/assets/base.css b/assets/base.css
index 7d525a2..6b6443a 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -23,6 +23,7 @@
   --c-brand: #8b72f0;
   --c-brand-light: #a08df5;
   --c-brand-dark: #7058d1;
+  --c-brand-deep: #342f50;
   --c-brand-mute: #866ee755;
   --c-brand-highlight: #9885e463;
   
@@ -38,6 +39,10 @@
 
   --color-border: var(--c-divider-light-2);
   --color-border-soft: var(--c-divider-light-1);
+  
+  --color-header: var(--c-brand-deep);
+  --color-header-text: var(--c-text-light-1);
+  --color-header-text-mute: var(--c-text-light-2);
 
   --color-heading: var(--c-text-dark-1);
   --color-text: var(--c-text-dark-1);
@@ -70,6 +75,10 @@
     --color-border: var(--c-divider-dark-2);
     --color-border-soft: var(--c-divider-dark-1);
 
+    --color-header: var(--c-black);
+    --color-header-text: var(--c-text-light-1);
+    --color-header-text-mute: var(--c-text-light-2);
+
     --color-heading: var(--c-text-light-1);
     --color-text: var(--c-text-light-1);
     --color-text-mute: var(--c-text-light-2);
diff --git a/components/editor/OptionsPanel.vue b/components/editor/OptionsPanel.vue
index 1415d84..7cf8982 100644
--- a/components/editor/OptionsPanel.vue
+++ b/components/editor/OptionsPanel.vue
@@ -12,6 +12,7 @@
   width: 100%;
   background-color: var(--color-background);
   border: 1px solid var(--color-border);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
   padding: 1rem;
   height: 100%;
 }
diff --git a/components/editor/Sidebar.vue b/components/editor/Sidebar.vue
index c48f3b4..992dd86 100644
--- a/components/editor/Sidebar.vue
+++ b/components/editor/Sidebar.vue
@@ -50,6 +50,8 @@ const setSelectedType = (type: 'quests' | 'items') => {
   background-color: var(--color-background);
   user-select: none;
   position: relative;
+  z-index: 0;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
 
   #selector {
     display: flex;
diff --git a/components/header/SiteHeader.vue b/components/header/SiteHeader.vue
index f51e970..0773a03 100644
--- a/components/header/SiteHeader.vue
+++ b/components/header/SiteHeader.vue
@@ -2,14 +2,13 @@
   <header>
     <div id="nav">
       <img src="@/assets/quests-logo.png" alt="Quests logo" />
-        <h1>Quests Web Editor</h1>
-        <code>Preview</code>
+      <h1>Quests Web Editor</h1>
+      <code>Preview</code>
     </div>
-  </header> 
+  </header>
 </template>
 
 <style lang="scss" scoped>
-
 #nav {
   padding: 1rem 1rem 0.5rem 1rem;
   display: flex;
@@ -17,27 +16,31 @@
   justify-content: flex-start;
   max-height: 72px;
   gap: 1rem;
+  color: var(--color-header-text);
 
   img {
     max-width: 3rem;
     height: auto;
   }
-  
+
   h1 {
     font-size: 1.5rem;
     margin: -5px 0 0 0;
     font-weight: 700;
   }
-  
+
   code {
     font-size: 0.8rem;
-    color: var(--color-text-mute);
+    color: var(--color-header-text-mute);
   }
-  
+
 }
 
 header {
   border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-header);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  position: relative;
+  z-index: 1;
 }
-
 </style>
 \ No newline at end of file
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index a16df59..3570a15 100644
--- a/pages/category/[id].vue
+++ b/pages/category/[id].vue
@@ -44,6 +44,8 @@ const categoryName = sessionStore.getCategoryById(categoryId)?.display.name;
   align-items: left;
   justify-content: space-between;
   gap: 1rem;
+  position: relative;
+  z-index: 0;
 
   #path {
     font-size: 1.2rem;
diff --git a/pages/quest/[id].vue b/pages/quest/[id].vue
index 6695f69..ad8ef4c 100644
--- a/pages/quest/[id].vue
+++ b/pages/quest/[id].vue
@@ -92,6 +92,8 @@ const duplicateQuest = (oldId: string, newId: string) => {
   align-items: left;
   justify-content: space-between;
   gap: 1rem;
+  position: relative;
+  z-index: 0;
 
   #path {
     font-size: 1.2rem;