diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 837ce668c..8de1138fa 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -205,11 +205,16 @@
     }
 }
 
-.doc-section-buttons {
+.doc-section-code-buttons {
     gap: .75rem;
     padding: .75rem 0 0;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
+
+    .p-button-label {
+        font-weight: normal;
+        font-size: 0.875rem;
+    }
 }
 
 .doc-section-code-tooltip .p-tooltip-text {
@@ -224,17 +229,6 @@
         }
     }
 
-    .p-button-label {
-        font-weight: normal;
-        font-size: 0.875rem;
-    }
-
-    .doc-section-code-active {
-        .p-button-label {
-            font-weight: bold;
-        }
-    }
-
     pre {
         margin: 0;
     }
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index d71b49f7a..1ca9f9c84 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,14 +1,14 @@
 <template>
     <div v-if="!embedded" class="surface-card" style="border-radius: 10px">
-        <div class="flex doc-section-buttons surface-card align-items-center justify-content-end sticky z-1 top-0 mr-3">
+        <div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end sticky z-1 top-0 mr-3">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
-                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]"
+                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
                     label="Composition API"
                     @click="codeLang = 'composition'"
                 ></Button>
                 <Button
-                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'javascript' }]"
+                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'options' }]"
                     label="Options API"
                     @click="codeLang = 'options'"
                 ></Button>