diff --git a/src/app.css b/src/app.css
index 626ba25e..003527b7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -42,8 +42,13 @@
   --color-zinc-925: rgb(var(--c-z-925, 28 28 32));
   --color-zinc-950: rgb(var(--c-z-950, 25 25 29));
 
-  --color-primary-100: rgb(var(--c-p-100, 241 245 249));
-  --color-primary-900: rgb(var(--c-p-900, 15 23 42));
+  /* dark theme */
+  --color-primary-100: rgb(var(--c-p-100, 248 248 251));
+  --color-primary-200: rgb(var(--c-p-200, 175 175 185));
+
+  /* light theme */
+  --color-primary-800: rgb(var(--c-p-900, 20 28 47));
+  --color-primary-900: rgb(var(--c-p-800, 15 23 42));
 
   --color-black: rgb(var(--c-o-black, 0 0 0));
   --color-white: rgb(var(--c-o-white, 255 255 255));
diff --git a/src/lib/app/markdown/MarkdownEditor.svelte b/src/lib/app/markdown/MarkdownEditor.svelte
index 13acf2c4..e8f88083 100644
--- a/src/lib/app/markdown/MarkdownEditor.svelte
+++ b/src/lib/app/markdown/MarkdownEditor.svelte
@@ -146,10 +146,10 @@
   {/if}
   <div
     class={[
-      'flex flex-col border  border-slate-200 border-b-slate-300 dark:border-zinc-800',
+      'flex flex-col border border-slate-200 border-b-slate-300 dark:border-zinc-800',
       'focus-within:border-primary-900 dark:focus-within:border-primary-100 focus-within:ring-3 ring-slate-300 dark:ring-zinc-700',
       'bg-white dark:bg-zinc-950',
-      'rounded-2xl overflow-hidden transition-colors',
+      'rounded-2xl overflow-hidden transition-colors shadow-xs',
       label && 'mt-1',
       clazz,
     ]}
diff --git a/src/lib/ui/layout/Pageination.svelte b/src/lib/ui/layout/Pageination.svelte
index 42635849..d355276a 100644
--- a/src/lib/ui/layout/Pageination.svelte
+++ b/src/lib/ui/layout/Pageination.svelte
@@ -46,7 +46,7 @@
   <nav
     aria-label={$t('aria.pagination.nav')}
     class={[
-      'flex flex-row gap-2 items-center justify-center bg-white dark:bg-zinc-900',
+      'flex flex-row gap-2 items-center justify-center bg-white dark:bg-zinc-950',
       'border border-slate-200 dark:border-zinc-800 rounded-full overflow-hidden w-max mx-auto p-0.5',
       'shadow-md',
     ]}
diff --git a/src/lib/ui/navbar/NavButton.svelte b/src/lib/ui/navbar/NavButton.svelte
index b98678ba..077a9379 100644
--- a/src/lib/ui/navbar/NavButton.svelte
+++ b/src/lib/ui/navbar/NavButton.svelte
@@ -130,7 +130,6 @@
         background-color: var(--color-primary-900);
         color: var(--color-slate-50);
         border-radius: var(--radius-xl);
-        height: 80%;
 
         @variant hover {
           color: var(--color-slate-50);
diff --git a/src/lib/ui/shared/button/Button.svelte b/src/lib/ui/shared/button/Button.svelte
index 53b6a9e3..c8ed8313 100644
--- a/src/lib/ui/shared/button/Button.svelte
+++ b/src/lib/ui/shared/button/Button.svelte
@@ -100,7 +100,7 @@
     size = 'md',
     rounding = 'xl',
     alignment = 'center',
-    shadow = color != 'tertiary' ? 'none' : 'none',
+    shadow = color == 'primary' || color == 'secondary' ? 'sm' : 'none',
     disabled,
     loaderWidth = undefined,
     href = undefined,
@@ -185,7 +185,7 @@
 
     .btn-primary {
       border: 1px solid transparent;
-      background-color: var(--color-primary-900);
+      background: var(--color-primary-900);
       color: var(--color-slate-50);
 
       @variant dark {
diff --git a/src/lib/ui/shared/forms/select/Select.svelte b/src/lib/ui/shared/forms/select/Select.svelte
index fd5f090f..c7f00635 100644
--- a/src/lib/ui/shared/forms/select/Select.svelte
+++ b/src/lib/ui/shared/forms/select/Select.svelte
@@ -95,7 +95,7 @@
         bind:this={element}
         class={[
           buttonSize[size],
-          'btn btn-secondary select rounded-xl appearance-none pr-6! w-full',
+          'btn btn-secondary select rounded-xl appearance-none pr-6! w-full shadow-xs',
           selectClass,
           clazz,
         ]}