diff --git a/src/components/project-boot/shadcn/shadcn-config-panel.tsx b/src/components/project-boot/shadcn/shadcn-config-panel.tsx
index d08f729..e140f7e 100644
--- a/src/components/project-boot/shadcn/shadcn-config-panel.tsx
+++ b/src/components/project-boot/shadcn/shadcn-config-panel.tsx
@@ -12,6 +12,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
 import {
   STYLE_OPTIONS,
   BASE_COLOR_OPTIONS,
@@ -33,56 +34,43 @@ interface ShadcnConfigPanelProps {
   presetCode: string
 }
 
-type ConfigI18nKey =
-  | "config.style"
-  | "config.baseColor"
-  | "config.theme"
-  | "config.chartColor"
-  | "config.iconLibrary"
-  | "config.font"
-  | "config.fontHeading"
-  | "config.menuAccent"
-  | "config.menuColor"
-  | "config.radius"
-  | "config.template"
-
-const CONFIG_FIELDS: {
-  key: keyof ShadcnPresetConfig
-  i18nKey: ConfigI18nKey
+function ConfigField({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string
+  value: string
   options: { value: string; label: string }[]
-}[] = [
-  { key: "style", i18nKey: "config.style", options: STYLE_OPTIONS },
-  {
-    key: "baseColor",
-    i18nKey: "config.baseColor",
-    options: BASE_COLOR_OPTIONS,
-  },
-  { key: "theme", i18nKey: "config.theme", options: THEME_OPTIONS },
-  { key: "chartColor", i18nKey: "config.chartColor", options: THEME_OPTIONS },
-  {
-    key: "iconLibrary",
-    i18nKey: "config.iconLibrary",
-    options: ICON_LIBRARY_OPTIONS,
-  },
-  { key: "font", i18nKey: "config.font", options: FONT_OPTIONS },
-  {
-    key: "fontHeading",
-    i18nKey: "config.fontHeading",
-    options: FONT_HEADING_OPTIONS,
-  },
-  {
-    key: "menuAccent",
-    i18nKey: "config.menuAccent",
-    options: MENU_ACCENT_OPTIONS,
-  },
-  {
-    key: "menuColor",
-    i18nKey: "config.menuColor",
-    options: MENU_COLOR_OPTIONS,
-  },
-  { key: "radius", i18nKey: "config.radius", options: RADIUS_OPTIONS },
-  { key: "template", i18nKey: "config.template", options: TEMPLATE_OPTIONS },
-]
+  onChange: (v: string) => void
+}) {
+  return (
+    <div className="space-y-1">
+      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger className="h-8">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+function SectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <h4 className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
+      {children}
+    </h4>
+  )
+}
 
 export function ShadcnConfigPanel({
   config,
@@ -92,32 +80,69 @@ export function ShadcnConfigPanel({
   const t = useTranslations("ProjectBoot")
   const [createOpen, setCreateOpen] = useState(false)
 
+  const field = (
+    key: keyof ShadcnPresetConfig,
+    i18nKey: string,
+    options: { value: string; label: string }[]
+  ) => (
+    <ConfigField
+      label={t(i18nKey as Parameters<typeof t>[0])}
+      value={config[key]}
+      options={options}
+      onChange={(v) => onConfigChange(key, v)}
+    />
+  )
+
   return (
     <div className="flex h-full flex-col">
       <ScrollArea className="min-h-0 flex-1 px-4 py-3">
-        <div className="space-y-3">
-          {CONFIG_FIELDS.map((field) => (
-            <div key={field.key} className="space-y-1">
-              <Label className="text-xs text-muted-foreground">
-                {t(field.i18nKey)}
-              </Label>
-              <Select
-                value={config[field.key]}
-                onValueChange={(v) => onConfigChange(field.key, v)}
-              >
-                <SelectTrigger className="h-8">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {field.options.map((opt) => (
-                    <SelectItem key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+        <div className="space-y-4">
+          {/* Style & Template */}
+          <div className="space-y-2">
+            <SectionHeader>{t("config.sectionStyle")}</SectionHeader>
+            <div className="grid grid-cols-2 gap-x-3 gap-y-2">
+              {field("style", "config.style", STYLE_OPTIONS)}
+              {field("template", "config.template", TEMPLATE_OPTIONS)}
             </div>
-          ))}
+          </div>
+
+          <Separator />
+
+          {/* Colors */}
+          <div className="space-y-2">
+            <SectionHeader>{t("config.sectionColors")}</SectionHeader>
+            <div className="space-y-2">
+              {field("baseColor", "config.baseColor", BASE_COLOR_OPTIONS)}
+              <div className="grid grid-cols-2 gap-x-3 gap-y-2">
+                {field("theme", "config.theme", THEME_OPTIONS)}
+                {field("chartColor", "config.chartColor", THEME_OPTIONS)}
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Typography */}
+          <div className="space-y-2">
+            <SectionHeader>{t("config.sectionTypography")}</SectionHeader>
+            <div className="grid grid-cols-2 gap-x-3 gap-y-2">
+              {field("font", "config.font", FONT_OPTIONS)}
+              {field("fontHeading", "config.fontHeading", FONT_HEADING_OPTIONS)}
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Interface */}
+          <div className="space-y-2">
+            <SectionHeader>{t("config.sectionInterface")}</SectionHeader>
+            <div className="grid grid-cols-2 gap-x-3 gap-y-2">
+              {field("iconLibrary", "config.iconLibrary", ICON_LIBRARY_OPTIONS)}
+              {field("radius", "config.radius", RADIUS_OPTIONS)}
+              {field("menuAccent", "config.menuAccent", MENU_ACCENT_OPTIONS)}
+              {field("menuColor", "config.menuColor", MENU_COLOR_OPTIONS)}
+            </div>
+          </div>
         </div>
       </ScrollArea>
 
diff --git a/src/components/project-boot/shadcn/shadcn-launcher.tsx b/src/components/project-boot/shadcn/shadcn-launcher.tsx
index fcb5264..da59b6a 100644
--- a/src/components/project-boot/shadcn/shadcn-launcher.tsx
+++ b/src/components/project-boot/shadcn/shadcn-launcher.tsx
@@ -11,9 +11,9 @@ import {
   type ShadcnPresetConfig,
 } from "./constants"
 
-const MIN_WIDTH = 280
-const MAX_WIDTH = 480
-const DEFAULT_WIDTH = 360
+const MIN_WIDTH = 260
+const MAX_WIDTH = 420
+const DEFAULT_WIDTH = 320
 
 export function ShadcnLauncher() {
   const [config, setConfig] = useState<ShadcnPresetConfig>(
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
index 8e41002..b7b9536 100644
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1593,7 +1593,11 @@
       "menuColor": "لون القائمة",
       "radius": "نصف القطر",
       "template": "القالب",
-      "createProject": "إنشاء مشروع"
+      "createProject": "إنشاء مشروع",
+      "sectionStyle": "النمط",
+      "sectionColors": "الألوان",
+      "sectionTypography": "الخطوط",
+      "sectionInterface": "الواجهة"
     },
     "preview": {
       "loading": "جاري تحميل المعاينة..."
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index ff102a9..d47c64f 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -1593,7 +1593,11 @@
       "menuColor": "Menü-Farbe",
       "radius": "Radius",
       "template": "Vorlage",
-      "createProject": "Projekt erstellen"
+      "createProject": "Projekt erstellen",
+      "sectionStyle": "Stil",
+      "sectionColors": "Farben",
+      "sectionTypography": "Typografie",
+      "sectionInterface": "Oberfläche"
     },
     "preview": {
       "loading": "Vorschau wird geladen..."
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index e593468..c0aaa10 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -1593,7 +1593,11 @@
       "menuColor": "Menu Color",
       "radius": "Radius",
       "template": "Template",
-      "createProject": "Create Project"
+      "createProject": "Create Project",
+      "sectionStyle": "Style",
+      "sectionColors": "Colors",
+      "sectionTypography": "Typography",
+      "sectionInterface": "Interface"
     },
     "preview": {
       "loading": "Loading preview..."
diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json
index e1b8b8c..95a275e 100644
--- a/src/i18n/messages/es.json
+++ b/src/i18n/messages/es.json
@@ -1593,7 +1593,11 @@
       "menuColor": "Color del menú",
       "radius": "Radio",
       "template": "Plantilla",
-      "createProject": "Crear proyecto"
+      "createProject": "Crear proyecto",
+      "sectionStyle": "Estilo",
+      "sectionColors": "Colores",
+      "sectionTypography": "Tipografía",
+      "sectionInterface": "Interfaz"
     },
     "preview": {
       "loading": "Cargando vista previa..."
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index d8ce0dc..b5045f8 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1593,7 +1593,11 @@
       "menuColor": "Couleur du menu",
       "radius": "Rayon",
       "template": "Modèle",
-      "createProject": "Créer un projet"
+      "createProject": "Créer un projet",
+      "sectionStyle": "Style",
+      "sectionColors": "Couleurs",
+      "sectionTypography": "Typographie",
+      "sectionInterface": "Interface"
     },
     "preview": {
       "loading": "Chargement de l'aperçu..."
diff --git a/src/i18n/messages/ja.json b/src/i18n/messages/ja.json
index 23a960c..0f9720f 100644
--- a/src/i18n/messages/ja.json
+++ b/src/i18n/messages/ja.json
@@ -1593,7 +1593,11 @@
       "menuColor": "メニューカラー",
       "radius": "角丸",
       "template": "テンプレート",
-      "createProject": "プロジェクトを作成"
+      "createProject": "プロジェクトを作成",
+      "sectionStyle": "スタイル",
+      "sectionColors": "カラー",
+      "sectionTypography": "タイポグラフィ",
+      "sectionInterface": "インターフェース"
     },
     "preview": {
       "loading": "プレビューを読み込み中..."
diff --git a/src/i18n/messages/ko.json b/src/i18n/messages/ko.json
index d78a657..a63ea0a 100644
--- a/src/i18n/messages/ko.json
+++ b/src/i18n/messages/ko.json
@@ -1593,7 +1593,11 @@
       "menuColor": "메뉴 색상",
       "radius": "둥글기",
       "template": "템플릿",
-      "createProject": "프로젝트 만들기"
+      "createProject": "프로젝트 만들기",
+      "sectionStyle": "스타일",
+      "sectionColors": "색상",
+      "sectionTypography": "타이포그래피",
+      "sectionInterface": "인터페이스"
     },
     "preview": {
       "loading": "미리보기 로딩 중..."
diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json
index f7f0803..2cfdd59 100644
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -1593,7 +1593,11 @@
       "menuColor": "Cor do menu",
       "radius": "Raio",
       "template": "Modelo",
-      "createProject": "Criar projeto"
+      "createProject": "Criar projeto",
+      "sectionStyle": "Estilo",
+      "sectionColors": "Cores",
+      "sectionTypography": "Tipografia",
+      "sectionInterface": "Interface"
     },
     "preview": {
       "loading": "Carregando visualização..."
diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json
index b51e4e4..9079f6f 100644
--- a/src/i18n/messages/zh-CN.json
+++ b/src/i18n/messages/zh-CN.json
@@ -1593,7 +1593,11 @@
       "menuColor": "菜单颜色",
       "radius": "圆角",
       "template": "模板",
-      "createProject": "创建项目"
+      "createProject": "创建项目",
+      "sectionStyle": "风格",
+      "sectionColors": "配色",
+      "sectionTypography": "排版",
+      "sectionInterface": "界面"
     },
     "preview": {
       "loading": "加载预览..."
diff --git a/src/i18n/messages/zh-TW.json b/src/i18n/messages/zh-TW.json
index 3b3cebb..c573800 100644
--- a/src/i18n/messages/zh-TW.json
+++ b/src/i18n/messages/zh-TW.json
@@ -1593,7 +1593,11 @@
       "menuColor": "選單顏色",
       "radius": "圓角",
       "template": "模板",
-      "createProject": "建立專案"
+      "createProject": "建立專案",
+      "sectionStyle": "風格",
+      "sectionColors": "配色",
+      "sectionTypography": "排版",
+      "sectionInterface": "介面"
     },
     "preview": {
       "loading": "載入預覽..."