diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 04e19e99d..0c2e31f8c 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -28,9 +28,9 @@
             <template #item="{ item, props }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
@@ -112,9 +112,9 @@ export default {
     <template #item="{ item, props }">
         <a v-ripple class="flex items-center" v-bind="props.action">
             <span :class="item.icon" />
-            <span class="ml-2">{{ item.label }}</span>
+            <span>{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
         </a>
     </template>
     <template #end>
@@ -153,9 +153,9 @@ export default {
             <template #item="{ item, props }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>
@@ -248,9 +248,9 @@ export default {
             <template #item="{ item, props }">
                 <a v-ripple class="flex items-center" v-bind="props.action">
                     <span :class="item.icon" />
-                    <span class="ml-2">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 dark:bg-surface-800 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
             <template #end>