diff --git a/src/components/FaviconDesigner.tsx b/src/components/FaviconDesigner.tsx
index 1ece320..29d8991 100644
--- a/src/components/FaviconDesigner.tsx
+++ b/src/components/FaviconDesigner.tsx
@@ -405,24 +405,18 @@ export function FaviconDesigner() {
 
   return (
     <div className="h-full flex flex-col bg-background">
-      <div className="border-b border-border bg-card px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-2xl font-bold">Favicon Designer</h2>
-            <p className="text-sm text-muted-foreground">
-              Create custom favicons for your web applications
-            </p>
-          </div>
+      <div className="border-b border-border bg-card px-4 sm:px-6 py-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
           <div className="flex gap-2">
-            <Button variant="outline" onClick={handleNewDesign}>
+            <Button variant="outline" size="sm" onClick={handleNewDesign}>
               <Plus size={16} className="mr-2" />
               New Design
             </Button>
-            <Button variant="outline" onClick={handleDuplicateDesign}>
+            <Button variant="outline" size="sm" onClick={handleDuplicateDesign}>
               <Copy size={16} className="mr-2" />
               Duplicate
             </Button>
-            <Button variant="outline" onClick={handleDeleteDesign} disabled={safeDesigns.length === 1}>
+            <Button variant="outline" size="sm" onClick={handleDeleteDesign} disabled={safeDesigns.length === 1}>
               <Trash size={16} className="mr-2" />
               Delete
             </Button>
@@ -431,7 +425,7 @@ export function FaviconDesigner() {
       </div>
 
       <div className="flex-1 overflow-hidden">
-        <div className="h-full grid grid-cols-[1fr_400px]">
+        <div className="h-full grid grid-cols-1 lg:grid-cols-[1fr_400px]">
           <div className="border-r border-border p-6 flex flex-col items-center justify-center bg-muted/20">
             <Card className="p-8 mb-6">
               <div className="flex flex-col items-center gap-4">
diff --git a/src/components/GlobalSearch.tsx b/src/components/GlobalSearch.tsx
index 56e8d81..38eff45 100644
--- a/src/components/GlobalSearch.tsx
+++ b/src/components/GlobalSearch.tsx
@@ -31,6 +31,7 @@ import {
   MagnifyingGlass,
   ClockCounterClockwise,
   X,
+  Lightbulb,
 } from '@phosphor-icons/react'
 import { ProjectFile, PrismaModel, ComponentNode, ComponentTree, Workflow, Lambda, PlaywrightTest, StorybookStory, UnitTest } from '@/types/project'
 import { Badge } from '@/components/ui/badge'
@@ -318,6 +319,16 @@ export function GlobalSearch({
       tags: ['settings', 'toggles', 'enable'],
     })
 
+    results.push({
+      id: 'nav-ideas',
+      title: 'Feature Ideas',
+      subtitle: 'Brainstorm and organize ideas',
+      category: 'Navigation',
+      icon: <Lightbulb size={18} weight="duotone" />,
+      action: () => onNavigate('ideas'),
+      tags: ['brainstorm', 'ideas', 'planning'],
+    })
+
     files.forEach((file) => {
       results.push({
         id: `file-${file.id}`,
diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
index da79504..780000c 100644
--- a/src/components/NavigationMenu.tsx
+++ b/src/components/NavigationMenu.tsx
@@ -26,6 +26,7 @@ import {
   CaretDoubleDown,
   CaretDoubleUp,
   Cloud,
+  Lightbulb,
 } from '@phosphor-icons/react'
 import { FeatureToggles } from '@/types/project'
 
@@ -154,6 +155,13 @@ export function NavigationMenu({
           value: 'favicon',
           featureKey: 'faviconDesigner',
         },
+        {
+          id: 'ideas',
+          label: 'Feature Ideas',
+          icon: <Lightbulb size={18} />,
+          value: 'ideas',
+          featureKey: 'ideaCloud',
+        },
       ],
     },
     {
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
index 934a927..3950937 100644
--- a/src/components/PageHeader.tsx
+++ b/src/components/PageHeader.tsx
@@ -15,6 +15,7 @@ import {
   DeviceMobile,
   Image,
   Faders,
+  Lightbulb,
 } from '@phosphor-icons/react'
 
 interface PageHeaderProps {
@@ -117,6 +118,11 @@ const tabInfo: Record<string, { title: string; icon: React.ReactNode; descriptio
     icon: <Faders size={24} weight="duotone" />,
     description: 'Toggle feature modules',
   },
+  ideas: {
+    title: 'Feature Ideas',
+    icon: <Lightbulb size={24} weight="duotone" />,
+    description: 'Brainstorm and organize feature ideas',
+  },
 }
 
 export function PageHeader({ activeTab }: PageHeaderProps) {