diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index bddfcc53bd..d7ee1147e8 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -25,6 +25,9 @@ const table = {
     font: '',
     size: 'text-sm'
   },
+  checkbox: {
+    padding: 'ps-4'
+  },
   loadingState: {
     wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
     label: 'text-sm text-center text-gray-900 dark:text-white',
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 6d15ee0d2b..75ffbc0ff5 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -3,7 +3,7 @@
     <table :class="[ui.base, ui.divide]">
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" class="ps-4">
+          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
             <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
           </th>
 
@@ -50,7 +50,7 @@
 
         <template v-else>
           <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
-            <td v-if="modelValue" class="ps-4">
+            <td v-if="modelValue" :class="ui.checkbox.padding">
               <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
             </td>