diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index f0b65035f..d5643de18 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -235,7 +235,8 @@
     background: rgba(255,255,255,.05);
     border-radius: 10px;
     padding: 4px;
-    backdrop-filter: blur(20px);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 0 10px 1px rgba(187, 247, 208, .6);
     
     button {
         outline: 0 none;
diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index 9e198e862..96e5288ab 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -6,9 +6,9 @@
     --topbar-border: var(--surface-border);
     --mobile-menu-bg: rgba(0,0,0,.3);
     --demo-code-bg: var(--surface-card);
-    --demo-code-button-color: var(--surface-400);
+    --demo-code-button-color: var(--surface-500);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
-    --demo-code-button-hover-color: var(--surface-500);
+    --demo-code-button-hover-color: var(--surface-700);
     --doc-highlight-text-bg: var(--highlight-bg);
     --doc-highlight-text-color: var(--highlight-text-color);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index aceb44221..f35ebede1 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -6,9 +6,9 @@
     --topbar-border: rgba(0,0,0,.05);
     --mobile-menu-bg: var(--surface-overlay);
     --demo-code-bg: var(--surface-700);
-    --demo-code-button-color: var(--surface-400);
+    --demo-code-button-color: var(--surface-300);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
-    --demo-code-button-hover-color: var(--surface-300);
+    --demo-code-button-hover-color: var(--surface-100);
     --doc-highlight-text-bg: var(--primary-100);
     --doc-highlight-text-color: var(--primary-900);
 }
\ No newline at end of file
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index c3b36bead..d17d37605 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="!embedded" class="doc-section-code">
-        <div class="doc-section-code-buttons fadein animation-duration-300">
+        <div class="doc-section-code-buttons scalein animation-duration-300">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
                 <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>