diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index 03d757e2c..7fb3649fa 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <div v-if="!data[0].data" class="doc-tablewrapper mt-3">
+    <div v-if="!data[0].data" class="doc-tablewrapper mt-4">
         <table class="doc-table">
             <thead>
                 <tr>
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index b560a5221..1541273af 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,32 +1,32 @@
 <template>
     <div v-if="!embedded" class="doc-section-code">
-        <div class="doc-section-code-buttons scalein animation-duration-300">
+        <div class="doc-section-code-buttons animate-scalein animate-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>
+                <button :class="['py-0 px-2 rounded h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
+                <button :class="['py-0 px-2 rounded h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
             </template>
 
             <template v-if="!hideToggleCode">
-                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
+                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-8 w-8 p-0 inline-flex items-center justify-center">
                     <i class="pi pi-code"></i>
                 </button>
             </template>
 
             <template v-if="!hideToggleCode && code.data">
-                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
+                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-8 w-8 p-0 inline-flex items-center justify-center">
                     <i class="pi pi-database"></i>
                 </button>
             </template>
 
             <template v-if="!hideStackBlitz">
-                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
+                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showStackblitz">
                     <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
                         <path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
                     </svg>
                 </button>
             </template>
 
-            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
+            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
                 <i class="pi pi-copy"></i>
             </button>
         </div>
diff --git a/components/doc/DocSections.vue b/components/doc/DocSections.vue
index 547ccd393..21988ff00 100644
--- a/components/doc/DocSections.vue
+++ b/components/doc/DocSections.vue
@@ -1,6 +1,6 @@
 <template>
     <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
-        <section class="py-4">
+        <section class="py-6">
             <template v-if="doc.children">
                 <div :id="doc.id">
                     <DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge">