diff --git a/app/home/_components/create-project-card.tsx b/app/(dashboard)/projects/(list)/_components/create-project-card.tsx
similarity index 100%
rename from app/home/_components/create-project-card.tsx
rename to app/(dashboard)/projects/(list)/_components/create-project-card.tsx
diff --git a/app/home/_components/home-page-content.tsx b/app/(dashboard)/projects/(list)/_components/home-page-content.tsx
similarity index 67%
rename from app/home/_components/home-page-content.tsx
rename to app/(dashboard)/projects/(list)/_components/home-page-content.tsx
index e285eb0..54534cf 100644
--- a/app/home/_components/home-page-content.tsx
+++ b/app/(dashboard)/projects/(list)/_components/home-page-content.tsx
@@ -1,20 +1,32 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ProjectStatus } from '@prisma/client'
+import { useRouter } from 'next/navigation'
 
 import type { ProjectWithRelations } from '@/lib/data/project'
 
 import { PageHeaderWithFilter } from './page-header-with-filter'
 import { ProjectList } from './project-list'
 
+const REFRESH_INTERVAL_MS = 3000
+
 interface HomePageContentProps {
   projects: ProjectWithRelations<{ sandboxes: true }>[]
 }
 
 export function HomePageContent({ projects }: HomePageContentProps) {
+  const router = useRouter()
   const [activeFilter, setActiveFilter] = useState<'ALL' | ProjectStatus>('ALL')
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      router.refresh()
+    }, REFRESH_INTERVAL_MS)
+
+    return () => clearInterval(interval)
+  }, [router])
+
   return (
     <>
       <PageHeaderWithFilter activeFilter={activeFilter} onFilterChange={setActiveFilter} />
diff --git a/app/home/_components/page-header-with-filter.tsx b/app/(dashboard)/projects/(list)/_components/page-header-with-filter.tsx
similarity index 100%
rename from app/home/_components/page-header-with-filter.tsx
rename to app/(dashboard)/projects/(list)/_components/page-header-with-filter.tsx
diff --git a/app/home/_components/project-actions-menu.tsx b/app/(dashboard)/projects/(list)/_components/project-actions-menu.tsx
similarity index 98%
rename from app/home/_components/project-actions-menu.tsx
rename to app/(dashboard)/projects/(list)/_components/project-actions-menu.tsx
index fa90fee..a831531 100644
--- a/app/home/_components/project-actions-menu.tsx
+++ b/app/(dashboard)/projects/(list)/_components/project-actions-menu.tsx
@@ -177,7 +177,7 @@ export function ProjectActionsMenu({ projectId, projectName, status }: ProjectAc
           {/* Confirmation Input */}
           <div className="space-y-2">
             <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">
-              Type <span className="text-white select-all">{projectName}</span> to confirm
+              Type <span className="text-white select-all normal-case">{projectName}</span> to confirm
             </Label>
             <Input
               value={confirmInput}
diff --git a/app/home/_components/project-card.tsx b/app/(dashboard)/projects/(list)/_components/project-card.tsx
similarity index 100%
rename from app/home/_components/project-card.tsx
rename to app/(dashboard)/projects/(list)/_components/project-card.tsx
diff --git a/app/home/_components/project-list.tsx b/app/(dashboard)/projects/(list)/_components/project-list.tsx
similarity index 100%
rename from app/home/_components/project-list.tsx
rename to app/(dashboard)/projects/(list)/_components/project-list.tsx
diff --git a/app/home/_components/status-config.ts b/app/(dashboard)/projects/(list)/_components/status-config.ts
similarity index 100%
rename from app/home/_components/status-config.ts
rename to app/(dashboard)/projects/(list)/_components/status-config.ts
diff --git a/app/home/layout.tsx b/app/(dashboard)/projects/(list)/layout.tsx
similarity index 100%
rename from app/home/layout.tsx
rename to app/(dashboard)/projects/(list)/layout.tsx
diff --git a/app/home/page.tsx b/app/(dashboard)/projects/(list)/page.tsx
similarity index 100%
rename from app/home/page.tsx
rename to app/(dashboard)/projects/(list)/page.tsx
diff --git a/app/(dashboard)/projects/page.tsx b/app/(dashboard)/projects/page.tsx
deleted file mode 100644
index 97fdec2..0000000
--- a/app/(dashboard)/projects/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Projects Page
- *
- * Server component that displays the list of user projects
- */
-
-import ProjectListContent from '@/components/features/projectList/ProjectListContent';
-import ProjectListHeader from '@/components/features/projectList/ProjectListHeader';
-
-export default function ProjectsPage() {
-  return (
-    <div className="flex-1 flex flex-col p-6 sm:p-10 max-w-7xl mx-auto w-full z-10 overflow-y-auto">
-      {/* Header Bar */}
-      <ProjectListHeader />
-
-      {/* Content */}
-      <ProjectListContent />
-    </div>
-  );
-}
diff --git a/components/features/projectList/EmptyProjectCard.tsx b/components/features/projectList/EmptyProjectCard.tsx
deleted file mode 100644
index 222a0e9..0000000
--- a/components/features/projectList/EmptyProjectCard.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { MdAdd } from 'react-icons/md';
-
-import CreateProjectDialog from '@/components/dialog/create-project-dialog';
-import { Card } from '@/components/ui/card';
-import { cn } from '@/lib/utils';
-
-export default function EmptyProjectCard() {
-  const [createModalOpen, setCreateModalOpen] = useState(false);
-
-  return (
-    <>
-      <Card 
-        className={cn(
-          "group bg-card border border-dashed border-border rounded-md p-5",
-          "hover:border-primary/50 transition-all duration-200 hover:shadow-lg hover:shadow-black/20 cursor-pointer",
-          "flex flex-col items-center justify-center gap-3 h-full min-h-[180px]",
-          "text-muted-foreground hover:text-primary hover:bg-primary/5"
-        )}
-        onClick={() => setCreateModalOpen(true)}
-      >
-        <div className="w-12 h-12 rounded-full bg-secondary group-hover:bg-primary/20 flex items-center justify-center transition-colors">
-          <MdAdd size={24} />
-        </div>
-        <span className="font-medium">Create new project</span>
-      </Card>
-
-      <CreateProjectDialog open={createModalOpen} onOpenChange={setCreateModalOpen} />
-    </>
-  );
-}
diff --git a/components/features/projectList/ProjectCard.tsx b/components/features/projectList/ProjectCard.tsx
deleted file mode 100644
index fbb4692..0000000
--- a/components/features/projectList/ProjectCard.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * ProjectCard Component
- *
- * Displays a single project card with status, metadata, and action menu
- */
-
-import { memo } from 'react';
-import { MdAccessTime } from 'react-icons/md';
-import type { Prisma } from '@prisma/client';
-import Link from 'next/link';
-
-import { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { getStatusBgClasses, getStatusTextColor } from '@/lib/util/status-colors';
-import { cn } from '@/lib/utils';
-
-import ProjectCardDropdown from './ProjectCardDropdown';
-
-type ProjectWithResources = Prisma.ProjectGetPayload<{
-  include: {
-    sandboxes: true;
-    databases: true;
-    environments: true;
-  };
-}>;
-
-interface ProjectCardProps {
-  project: ProjectWithResources;
-}
-
-const ProjectCard = memo(({ project }: ProjectCardProps) => {
-  return (
-    <Link href={`/projects/${project.id}`} className="block">
-      <Card className="group bg-card border border-border rounded-md p-5 hover:border-primary/50 transition-all duration-200 hover:shadow-lg hover:shadow-black/20 cursor-pointer flex flex-col gap-4 h-full">
-        <CardHeader className="px-0 pt-0 pb-2">
-          <div className="flex justify-between items-start">
-            <div className="flex flex-col gap-1">
-              <CardTitle className="font-semibold text-lg group-hover:text-primary transition-colors line-clamp-1">
-                {project.name}
-              </CardTitle>
-            </div>
-            <ProjectCardDropdown project={project} />
-          </div>
-          
-          <CardDescription className="line-clamp-2 min-h-10 text-sm mt-2">
-            {project.description || 'No description'}
-          </CardDescription>
-        </CardHeader>
-
-        {/* Horizontal divider matching content width */}
-        <div className="border-t border-border" />
-
-        <CardFooter className="flex items-center justify-between px-0">
-          <div className="flex items-center gap-x-2">
-            <Badge
-              className={cn(
-                "h-2 w-2 p-0 border-0",
-                getStatusBgClasses(project.status)
-              )}
-            />
-            <span className={cn('text-xs', getStatusTextColor(project.status))}>
-              {project.status}
-            </span>
-          </div>
-
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <MdAccessTime className="h-3 w-3" />
-            <span>
-              {new Date(project.updatedAt).toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-              })}
-            </span>
-          </div>
-        </CardFooter>
-      </Card>
-    </Link>
-  );
-});
-
-ProjectCard.displayName = 'ProjectCard';
-
-export default ProjectCard;
\ No newline at end of file
diff --git a/components/features/projectList/ProjectCardDropdown.tsx b/components/features/projectList/ProjectCardDropdown.tsx
deleted file mode 100644
index e698e27..0000000
--- a/components/features/projectList/ProjectCardDropdown.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * ProjectCardDropdown Component
- *
- * Dropdown menu for project operations (Start/Stop/Delete)
- * Includes delete confirmation dialog
- */
-
-'use client';
-
-import { useState } from 'react';
-import { MdDeleteOutline, MdMoreVert, MdPlayArrow, MdRefresh, MdStop } from 'react-icons/md';
-import type { Prisma } from '@prisma/client';
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useProjectOperations } from '@/hooks/use-project-operations';
-import { getAvailableProjectActions } from '@/lib/util/action';
-
-type ProjectWithResources = Prisma.ProjectGetPayload<{
-  include: {
-    sandboxes: true;
-    databases: true;
-  };
-}>;
-
-interface ProjectCardDropdownProps {
-  project: ProjectWithResources;
-}
-
-export default function ProjectCardDropdown({ project }: ProjectCardDropdownProps) {
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const { executeOperation, loading } = useProjectOperations(project.id);
-  const availableActions = getAvailableProjectActions(project);
-
-  const handleDeleteClick = () => {
-    setShowDeleteDialog(true);
-  };
-
-  const handleDeleteConfirm = () => {
-    setShowDeleteDialog(false);
-    executeOperation('DELETE');
-  };
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <MdMoreVert className="h-4 w-4" />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="rounded-md">
-          {availableActions.includes('START') && (
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                executeOperation('START');
-              }}
-              disabled={loading !== null}
-            >
-              {loading === 'START' ? (
-                <>
-                  <MdRefresh className="mr-2 h-4 w-4 animate-spin" />
-                  Starting...
-                </>
-              ) : (
-                <>
-                  <MdPlayArrow className="mr-2 h-4 w-4" />
-                  Start
-                </>
-              )}
-            </DropdownMenuItem>
-          )}
-          {availableActions.includes('STOP') && (
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                executeOperation('STOP');
-              }}
-              disabled={loading !== null}
-            >
-              {loading === 'STOP' ? (
-                <>
-                  <MdRefresh className="mr-2 h-4 w-4 animate-spin" />
-                  Stopping...
-                </>
-              ) : (
-                <>
-                  <MdStop className="mr-2 h-4 w-4" />
-                  Stop
-                </>
-              )}
-            </DropdownMenuItem>
-          )}
-          {availableActions.includes('DELETE') && (
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                handleDeleteClick();
-              }}
-              disabled={loading !== null}
-              className="text-destructive"
-            >
-              <MdDeleteOutline className="mr-2 h-4 w-4" />
-              Delete
-            </DropdownMenuItem>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure you want to delete {project.name}?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will terminate all resources
-              (databases, sandboxes) and cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleDeleteConfirm}
-              className="bg-destructive hover:bg-destructive/90"
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
\ No newline at end of file
diff --git a/components/features/projectList/ProjectCardSkeleton.tsx b/components/features/projectList/ProjectCardSkeleton.tsx
deleted file mode 100644
index 928c054..0000000
--- a/components/features/projectList/ProjectCardSkeleton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Card, CardFooter, CardHeader } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-
-export default function ProjectCardSkeleton() {
-  return (
-    <Card className="h-full border border-border rounded-md p-5 flex flex-col gap-4">
-      <CardHeader className="px-0 pt-0 pb-2">
-        <div className="flex justify-between items-start">
-          <div className="flex flex-col gap-1 w-full">
-            <Skeleton className="h-6 w-3/4" />
-          </div>
-          <Skeleton className="h-8 w-8 rounded-md" />
-        </div>
-        
-        <div className="mt-2 space-y-2">
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-2/3" />
-        </div>
-      </CardHeader>
-
-      <div className="border-t border-border" />
-
-      <CardFooter className="flex items-center justify-between px-0">
-        <div className="flex items-center gap-x-2">
-          <Skeleton className="h-2 w-2 rounded-full" />
-          <Skeleton className="h-3 w-16" />
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-3 w-3 rounded-full" />
-          <Skeleton className="h-3 w-12" />
-        </div>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/components/features/projectList/ProjectListContent.tsx b/components/features/projectList/ProjectListContent.tsx
deleted file mode 100644
index 8cbb158..0000000
--- a/components/features/projectList/ProjectListContent.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client';
-
-
-import EmptyProjectCard from '@/components/features/projectList/EmptyProjectCard';
-import ProjectCard from '@/components/features/projectList/ProjectCard';
-import ProjectCardSkeleton from '@/components/features/projectList/ProjectCardSkeleton';
-import { useProjects } from '@/hooks/use-projects';
-
-export default function ProjectListContent() {
-  // Fetch projects with automatic polling (every 3 seconds)
-  // Namespace is automatically determined from user's kubeconfig
-  const { data: projects, isLoading } = useProjects();
-
-  if (isLoading) {
-    return (
-      <div className="mt-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <ProjectCardSkeleton key={i} />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {projects?.map((project) => (
-          <ProjectCard key={project.id} project={project} />
-        ))}
-        <EmptyProjectCard />
-      </div>
-    </div>
-  );
-}
diff --git a/components/features/projectList/ProjectListHeader.tsx b/components/features/projectList/ProjectListHeader.tsx
deleted file mode 100644
index d7016d3..0000000
--- a/components/features/projectList/ProjectListHeader.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * ProjectListHeader Component
- *
- * Header bar for projects page with avatar and settings
- */
-
-'use client';
-
-import { useState } from 'react';
-import { MdAdd, MdSettings } from 'react-icons/md';
-
-import CreateProjectDialog from '@/components/dialog/create-project-dialog';
-import SettingsDialog from '@/components/dialog/settings-dialog';
-import { Button } from '@/components/ui/button';
-
-const ProjectListHeader = () => {
-  const [showSettings, setShowSettings] = useState(false);
-  const [showCreateProject, setShowCreateProject] = useState(false);
-
-  return (
-    <>
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
-        <div>
-          <h2 className="text-2xl font-bold">Projects</h2>
-          <p className="text-muted-foreground mt-1">Manage your full-stack applications</p>
-        </div>
-        <div className="flex gap-3 w-full sm:w-auto items-center">
-           <Button 
-             onClick={() => setShowCreateProject(true)}
-             className="whitespace-nowrap px-4 py-2 text-sm"
-           >
-             <MdAdd size={16} />
-             New Project
-           </Button>
-           
-           {/* Avatar / Settings Button */}
-           <Button
-             variant="secondary"
-             size="icon"
-             onClick={() => setShowSettings(true)}
-             className="ml-1 rounded-full border-border text-muted-foreground hover:text-foreground hover:border-primary shadow-sm"
-             aria-label="User Settings"
-           >
-             <MdSettings size={18} />
-           </Button>
-        </div>
-      </div>
-
-      {/* Create Project Dialog */}
-      <CreateProjectDialog open={showCreateProject} onOpenChange={setShowCreateProject} />
-
-      {/* Settings Dialog */}
-      <SettingsDialog open={showSettings} onOpenChange={setShowSettings} />
-    </>
-  );
-};
-
-ProjectListHeader.displayName = 'ProjectListHeader';
-
-export default ProjectListHeader;
diff --git a/package.json b/package.json
index f8a70eb..4ec58d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fulling",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "AI-Powered Full-Stack Development Platform",
   "author": "fanux",
   "license": "MIT",
@@ -70,6 +70,7 @@
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@types/ws": "^8.18.1",
+    "baseline-browser-mapping": "^2.10.0",
     "eslint": "^9",
     "eslint-config-next": "16.0.7",
     "eslint-config-prettier": "^10.1.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d38aec..b120a58 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,6 +162,9 @@ importers:
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
+      baseline-browser-mapping:
+        specifier: ^2.10.0
+        version: 2.10.0
       eslint:
         specifier: ^9
         version: 9.39.2(jiti@2.6.1)
@@ -1905,8 +1908,9 @@ packages:
   bare-url@2.3.2:
     resolution: {integrity: sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==}
 
-  baseline-browser-mapping@2.9.8:
-    resolution: {integrity: sha512-Y1fOuNDowLfgKOypdc9SPABfoWXuZHBOyCS4cD52IeZBhr4Md6CLLs6atcxVrzRmQ06E7hSlm5bHHApPKR/byA==}
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
   bcryptjs@3.0.3:
@@ -5350,7 +5354,7 @@ snapshots:
       bare-path: 3.0.0
     optional: true
 
-  baseline-browser-mapping@2.9.8: {}
+  baseline-browser-mapping@2.10.0: {}
 
   bcryptjs@3.0.3: {}
 
@@ -5369,7 +5373,7 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.9.8
+      baseline-browser-mapping: 2.10.0
       caniuse-lite: 1.0.30001760
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27