diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 3376218bc4..1983f485c6 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -293,6 +293,13 @@
                 }
             }
 
+            &.doc-option-parameter {
+                > .doc-option-parameter-scope {
+                    font-weight: 500;
+                    color: var(--surface-600);
+                }
+            }
+
             &:first-child {
                 color: var(--primary-color);
                 font-weight: 700;
@@ -322,9 +329,9 @@
                 }
             }
 
-            .doc-option-props {
+            .doc-option-default,
+            .doc-option-returnType {
                 display: flex;
-                background: var(--bluegray-50);
                 border-width: 1px;
                 border-style: solid;
                 border-radius: 6px;
@@ -343,6 +350,16 @@
                     }
                 }
             }
+
+            .doc-option-light {
+                background: var(--bluegray-50);
+                border-color: var(--bluegray-100);
+            }
+
+            .doc-option-dark {
+                background: var(--bluegray-800);
+                border-color: var(--bluegray-800);
+            }
         }
     }
 }
diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index 1a4819c33c..38deae2900 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -22,17 +22,17 @@
                     <td
                         v-for="[k, v] in Object.entries(prop)"
                         :key="k"
-                        :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }"
+                        :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-parameter': k === 'parameters' }"
                         :style="{ 'max-width': k === 'default' || k === 'returnType' ? '200px' : undefined }"
                     >
                         <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
                             <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
-                                {{ v }}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" :class="['doc-option-link', optionLinkClass]"> <i class="pi pi-link"></i> </NuxtLink>
+                                {{ v }}<NuxtLink :to="`/${$router.currentRoute.value.name}/#${id}.${v}`" class="doc-option-link"> <i class="pi pi-link"></i> </NuxtLink>
                             </span>
 
                             <template v-else-if="k === 'type'">
                                 <template v-for="(value, i) in getType(v)" :key="value">
-                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" :class="['doc-option-link', optionLinkClass]">{{ value }}</NuxtLink
+                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link">{{ value }}</NuxtLink
                                     ><span v-else>{{ value }}</span>
                                 </template>
                             </template>
@@ -46,18 +46,22 @@
                             </template>
 
                             <template v-else-if="k === 'parameters'">
-                                <span v-if="v.name" :class="{ 'font-medium text-600': label === 'Slots' }"> {{ v.name }} : </span>
+                                <span v-if="v.name" :class="{ 'doc-option-parameter-scope': label === 'Slots', 'doc-option-parameter-type': label === 'Emits' }"> {{ v.name }} : </span>
                                 <template v-for="(value, i) in getType(v.type)" :key="value">
-                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" :class="['doc-option-link', optionLinkClass]"> {{ value }} </NuxtLink>
+                                    {{ i !== 0 ? ' | ' : '' }}<NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link doc-option-parameter-name"> {{ value }} </NuxtLink>
                                     <span v-else v-html="value"> </span>
                                 </template>
                             </template>
 
-                            <div v-else-if="k === 'default' || k === 'returnType'" :id="id + '.' + k" :class="['doc-option-props', optionPropClass]">
+                            <div v-else-if="k === 'default'" :id="id + '.' + k" :class="['doc-option-default', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">
                                 {{ v === '' || v === undefined ? 'null' : v }}
                             </div>
 
-                            <span v-else :id="id + '.' + k"> {{ v }} </span>
+                            <div v-else-if="k === 'returnType'" :id="id + '.' + k" :class="['doc-option-returnType', $appState.darkTheme ? 'doc-option-dark' : 'doc-option-light']">
+                                {{ v }}
+                            </div>
+
+                            <span v-else :id="id + '.' + k" class="doc-option-description"> {{ v }} </span>
                         </template>
                     </td>
                 </tr>
@@ -165,12 +169,6 @@ export default {
             }
 
             return this.data[0].data ? 1 : 2;
-        },
-        optionLinkClass() {
-            return this.$appState.darkTheme ? 'text-primary-400' : 'text-primary-600';
-        },
-        optionPropClass() {
-            return this.$appState.darkTheme ? 'border-bluegray-800 bg-bluegray-800' : 'border-bluegray-100 bg-bluegray-50';
         }
     }
 };