diff --git a/src/lib/settings/SettingsPanel.svelte b/src/lib/settings/SettingsPanel.svelte
index 0ff8106..9fb3f14 100644
--- a/src/lib/settings/SettingsPanel.svelte
+++ b/src/lib/settings/SettingsPanel.svelte
@@ -3,6 +3,12 @@
   // Settings Panel — VS Code-style sidebar + content layout with search.
   import { onMount } from 'svelte';
   import { SETTINGS_REGISTRY, type SettingsCategory, type SettingEntry } from './settings-registry';
+  import AppearanceSettings from './categories/AppearanceSettings.svelte';
+  import AgentSettings from './categories/AgentSettings.svelte';
+  import SecuritySettings from './categories/SecuritySettings.svelte';
+  import ProjectSettings from './categories/ProjectSettings.svelte';
+  import OrchestrationSettings from './categories/OrchestrationSettings.svelte';
+  import AdvancedSettings from './categories/AdvancedSettings.svelte';
 
   interface Props {
     onClose?: () => void;
@@ -124,12 +130,19 @@
       </nav>
 
       <div class="settings-content" role="tabpanel">
-        <!-- Category components will be rendered here via dynamic import or {#if} -->
-        <div class="category-placeholder">
-          <h2>{CATEGORIES.find(c => c.id === activeCategory)?.label}</h2>
-          <p>Settings for {activeCategory} will be rendered here.</p>
-          <p class="setting-count">{SETTINGS_REGISTRY.filter(s => s.category === activeCategory).length} settings</p>
-        </div>
+        {#if activeCategory === 'appearance'}
+          <AppearanceSettings />
+        {:else if activeCategory === 'agents'}
+          <AgentSettings />
+        {:else if activeCategory === 'security'}
+          <SecuritySettings />
+        {:else if activeCategory === 'projects'}
+          <ProjectSettings />
+        {:else if activeCategory === 'orchestration'}
+          <OrchestrationSettings />
+        {:else if activeCategory === 'advanced'}
+          <AdvancedSettings />
+        {/if}
       </div>
     </div>
   {/if}