diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue b/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
index ee2ddaa86..a155caa85 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
@@ -66,7 +66,7 @@ const slots = useSlots();
     <NumberField v-model="inputValue" v-bind="$attrs" class="w-41.25">
       <NumberFieldContent>
         <NumberFieldDecrement />
-        <NumberFieldInput />
+        <NumberFieldInput class="h-8" />
         <NumberFieldIncrement />
       </NumberFieldContent>
     </NumberField>
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue b/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
index 8a1e1021a..f19d36061 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
@@ -64,7 +64,7 @@ const slots = useSlots();
       </VbenTooltip>
     </span>
     <Select v-model="selectValue">
-      <SelectTrigger class="h-8 w-41.25">
+      <SelectTrigger class="h-8 w-41.25" size="sm">
         <SelectValue :placeholder="placeholder" />
       </SelectTrigger>
       <SelectContent>
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
index 58b7b8151..d1c972791 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
@@ -45,15 +45,15 @@ watch(
         :max="max"
         :min="min"
         :step="step"
-        class="w-full"
+        class="w-full mr-4"
       >
         <NumberFieldContent>
           <NumberFieldDecrement />
-          <NumberFieldInput />
+          <NumberFieldInput class="h-8" />
           <NumberFieldIncrement />
         </NumberFieldContent>
       </NumberField>
-      <span class="text-xs whitespace-nowrap text-muted-foreground">px</span>
+      <span class="text-sm whitespace-nowrap text-muted-foreground">px</span>
     </div>
     <div class="text-xs text-muted-foreground">
       {{ $t('preferences.theme.fontSizeTip') }}
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
index 0cfcd98b3..baf1d71a8 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
@@ -19,13 +19,7 @@ const items = [
 </script>
 
 <template>
-  <ToggleGroup
-    v-model="modelValue"
-    class="gap-2"
-    size="sm"
-    type="single"
-    variant="outline"
-  >
+  <ToggleGroup v-model="modelValue" size="sm" type="single" variant="outline">
     <template v-for="item in items" :key="item.value">
       <ToggleGroupItem
         :value="item.value"
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue b/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
index cfa3c62a7..6794e4b84 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
@@ -26,13 +26,7 @@ const modelValue = defineModel<string>();
     <span class="text-sm">
       <slot></slot>
     </span>
-    <ToggleGroup
-      v-model="modelValue"
-      class="gap-2"
-      size="sm"
-      type="single"
-      variant="outline"
-    >
+    <ToggleGroup v-model="modelValue" size="sm" type="single" variant="outline">
       <template v-for="item in items" :key="item.value">
         <ToggleGroupItem
           :value="item.value"