diff --git a/apps/showcase/assets/styles/layout/_designer.scss b/apps/showcase/assets/styles/layout/_designer.scss
index f02d5d0bf..619eb83ad 100644
--- a/apps/showcase/assets/styles/layout/_designer.scss
+++ b/apps/showcase/assets/styles/layout/_designer.scss
@@ -180,6 +180,27 @@
             color: inherit;
             padding: 0 1.125rem 1.125rem 1.125rem;
         }
+    }
 
+    .p-fileupload-choose-button {
+        padding: 0.5rem 0.75rem;
+        background: light-dark(#09090b, #ffffff);
+        border-color: light-dark(#09090b, #ffffff);
+        color: light-dark(#ffffff, #000000);
+        cursor: pointer;
+        font-weight: medium;
+        border-radius: 4px;
+        transition: background 0.2s;
+
+        &:hover {
+            background: light-dark(#27272a, #f3f4f6);
+            border-color: light-dark(#27272a, #f3f4f6);
+        }
+
+        &:focus-visible {
+            outline: 1px solid light-dark(#09090b, #ffffff);
+            outline-offset: 2px;
+            box-shadow: none;
+        }
     }
 }
\ No newline at end of file
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 668202ca0..89570c295 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -12,7 +12,23 @@
                 <span class="font-semibold">Base Theme</span>
                 <span class="text-muted-color">Variety of built-in themes with distinct characteristics.</span>
                 <div class="flex justify-between">
-                    <SelectButton v-model="basePreset" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                    <div class="flex">
+                        <button
+                            v-for="presetOption of presetOptions"
+                            :key="presetOption.label"
+                            type="button"
+                            @click="basePreset = presetOption.value"
+                            :class="[
+                                'border border-surface-200 dark:border-surface-700 px-3 py-2 border-r-0 last:border-r first:rounded-l-md last:rounded-r-md transition-colors duration-200',
+                                {
+                                    'bg-zinc-950 text-white dark:bg-white dark:text-black': presetOption.value === basePreset,
+                                    'hover:bg-gray-100 dark:hover:bg-surface-800': presetOption.value !== basePreset
+                                }
+                            ]"
+                        >
+                            {{ presetOption.label }}
+                        </button>
+                    </div>
                     <button type="button" @click="createThemeFromPreset" class="btn-design">Create</button>
                 </div>
             </div>
diff --git a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
index d29fcd0e3..58c4c86f9 100644
--- a/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignTokenField.vue
@@ -38,7 +38,7 @@
                     </div>
                 </template>
             </AutoComplete>
-            <div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-2 w-4 h-4 rounded-full border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
+            <div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-2 w-4 h-4 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
         </div>
     </div>
 </template>