diff --git a/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue b/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
index 57a2582e4..ed09e48f0 100644
--- a/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
+++ b/apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
@@ -1,27 +1,34 @@
 <template>
-    <section v-if="isComponentRoute" class="flex flex-col gap-3">
-        <div class="text-lg font-semibold capitalize">{{ componentKey }}</div>
-        <template v-for="(value, name) in tokens" :key="name">
-            <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
-        </template>
-        <Tabs v-if="hasColorScheme" value="cs-0">
-            <TabList>
-                <Tab value="cs-0">Light</Tab>
-                <Tab value="cs-1">Dark</Tab>
-            </TabList>
-            <TabPanels class="!px-0">
-                <TabPanel value="cs-0">
-                    <div class="flex flex-col gap-3">
-                        <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
-                    </div>
-                </TabPanel>
-                <TabPanel value="cs-1">
-                    <div class="flex flex-col gap-3">
-                        <DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
-                    </div>
-                </TabPanel>
-            </TabPanels>
-        </Tabs>
+    <section v-if="isComponentRoute">
+        <div class="text-lg font-semibold capitalize mb-2">{{ componentKey }}</div>
+        <Fieldset legend="Common" :toggleable="true" class="mb-3">
+            <div class="flex flex-col gap-3">
+                <template v-for="(value, name) in tokens" :key="name">
+                    <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
+                </template>
+            </div>
+        </Fieldset>
+        <Fieldset legend="Color Scheme" :toggleable="true">
+            <Tabs v-if="hasColorScheme" value="cs-0">
+                <TabList>
+                    <Tab value="cs-0">Light</Tab>
+                    <Tab value="cs-1">Dark</Tab>
+                </TabList>
+                <TabPanels>
+                    <TabPanel value="cs-0">
+                        <div class="flex flex-col gap-3">
+                            <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
+                        </div>
+                    </TabPanel>
+                    <TabPanel value="cs-1">
+                        <div class="flex flex-col gap-3">
+                            <DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
+                        </div>
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+            <span v-else class="block py-3"> There are no design tokens per color scheme. </span>
+        </Fieldset>
     </section>
 </template>