diff --git a/components/home-page.tsx b/components/home-page.tsx
index 2abd0e3..f84348b 100644
--- a/components/home-page.tsx
+++ b/components/home-page.tsx
@@ -100,9 +100,14 @@ export function HomePage() {
                 height={80}
                 className="w-16 h-16 md:w-20 md:h-20"
               />
-              <h1 className="md:text-6xl lg:text-8xl font-bold bg-linear-to-r from-foreground to-muted-foreground bg-clip-text leading-normal text-transparent">
-                Fulling
-              </h1>
+              <div className="relative">
+                <h1 className="md:text-6xl lg:text-8xl font-bold bg-linear-to-r from-foreground to-muted-foreground bg-clip-text leading-normal text-transparent">
+                  Fulling
+                </h1>
+                <span className="absolute top-2 -right-10 md:-right-14 text-blue-500 border border-blue-500 rounded px-1.5 py-0.5 text-xs md:text-sm font-medium tracking-wide">
+                  Beta
+                </span>
+              </div>
             </div>
 
             {/* Subtitle and Description */}
diff --git a/components/sidebars/primary-sidebar.tsx b/components/sidebars/primary-sidebar.tsx
index c7800c9..f72b9da 100644
--- a/components/sidebars/primary-sidebar.tsx
+++ b/components/sidebars/primary-sidebar.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Circle, FolderOpen, GitBranch, Home, Plus, Settings } from 'lucide-react';
+import { Circle, FolderOpen, GitBranch, LayoutGrid, Plus, Settings } from 'lucide-react';
 import Link from 'next/link';
 
 import CreateProjectDialog from '@/components/dialog/create-project-dialog';
@@ -37,23 +37,16 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
     staleTime: 4000, // Data is fresh for 4 seconds
     retry: 2,
   });
-  const [isExpanded, setIsExpanded] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showCreateProject, setShowCreateProject] = useState(false);
 
   return (
     <div
-      className={cn(
-        'bg-sidebar-background border-r border-sidebar-border flex flex-col transition-all duration-200',
-        isExpanded ? 'w-52' : 'w-12'
-      )}
-      onMouseEnter={() => setIsExpanded(true)}
-      onMouseLeave={() => setIsExpanded(false)}
+      className="bg-sidebar-background border-r border-sidebar-border flex flex-col w-12 transition-all duration-200"
     >
       {/* Header */}
-      <div className="h-12 flex items-center justify-center border-b border-sidebar-border">
+      <div className="h-12 flex items-center justify-center border-b border-border">
         <FolderOpen className="h-5 w-5 text-muted-foreground" />
-        {isExpanded && <span className="ml-2 text-sm font-medium text-foreground">Projects</span>}
       </div>
 
       {/* Navigation Items */}
@@ -61,21 +54,17 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
         {/* Home Link */}
         <Link
           href="/projects"
-          className="group flex items-center h-8 px-3 hover:bg-sidebar-accent/10 transition-colors"
+          className="group flex items-center justify-center h-8 px-3 hover:bg-sidebar-accent/10 transition-colors"
         >
-          <Home className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
-          {isExpanded && (
-            <span className="ml-3 text-sm text-foreground truncate">All Projects</span>
-          )}
+          <LayoutGrid className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
         </Link>
 
         {/* New Project */}
         <button
           onClick={() => setShowCreateProject(true)}
-          className="group flex items-center h-8 px-3 hover:bg-sidebar-accent transition-colors mb-2 w-full"
+          className="group flex items-center justify-center h-8 px-3 hover:bg-sidebar-accent transition-colors mb-2 w-full"
         >
           <Plus className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
-          {isExpanded && <span className="ml-3 text-sm text-foreground truncate">New Project</span>}
         </button>
 
         <div className="border-t border-border my-2" />
@@ -87,20 +76,17 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
               key={project.id}
               href={`/projects/${project.id}`}
               className={cn(
-                'group flex items-center h-8 px-3 hover:bg-sidebar-accent transition-colors',
+                'group flex items-center justify-center h-8 px-3 hover:bg-sidebar-accent transition-colors',
                 currentProjectId === project.id && 'bg-sidebar-accent'
               )}
             >
-              <div className="flex items-center shrink-0">
+              <div className="flex items-center justify-center shrink-0">
                 <Circle
                   className={cn('h-2 w-2 mr-2', getStatusTextClasses(project.status))}
                   fill="currentColor"
                 />
                 <GitBranch className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground transition-colors" />
               </div>
-              {isExpanded && (
-                <span className="ml-3 text-sm text-foreground truncate">{project.name}</span>
-              )}
             </Link>
           ))}
         </div>
@@ -110,10 +96,9 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
       <div className="p-2">
         <button
           onClick={() => setShowSettings(true)}
-          className="group flex items-center h-8 px-2 hover:bg-sidebar-accent rounded transition-colors w-full"
+          className="group flex items-center justify-center h-8 px-2 hover:bg-sidebar-accent rounded transition-colors w-full"
         >
           <Settings className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
-          {isExpanded && <span className="ml-3 text-sm text-foreground">Settings</span>}
         </button>
       </div>
 
diff --git a/components/sidebars/project-sidebar-new.tsx b/components/sidebars/project-sidebar-new.tsx
index 7ca0325..25652ee 100644
--- a/components/sidebars/project-sidebar-new.tsx
+++ b/components/sidebars/project-sidebar-new.tsx
@@ -68,21 +68,23 @@ export default function ProjectSidebar({ projectId }: ProjectSidebarProps) {
   return (
     <div
       className={cn(
-        'bg-sidebar-project-background border-r border-border flex flex-col transition-all duration-200',
-        isCollapsed ? 'w-10' : 'w-72'
+        'bg-sidebar-project-background flex flex-col transition-all duration-200 relative',
+        isCollapsed ? 'w-0' : 'w-72 border-r border-border'
       )}
     >
+      {/* Toggle Button */}
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="absolute -right-2 top-1/2 -translate-y-1/2 z-20 h-10 w-4 rounded-md border border-border bg-sidebar-project-background flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors shadow-sm"
+      >
+        {isCollapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
+      </button>
+
       {/* Header */}
-      <div className="h-12 flex items-center justify-between px-3 border-b border-border">
+      <div className="h-12 flex items-center px-3 border-b border-border min-w-0 overflow-hidden">
         {!isCollapsed && (
-          <span className="text-sm font-medium text-foreground">Project {project?.name ?? 'Loading...'}</span>
+          <span className="text-sm font-medium text-foreground truncate">Project {project?.name ?? 'Loading...'}</span>
         )}
-        <button
-          onClick={() => setIsCollapsed(!isCollapsed)}
-          className="text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-        </button>
       </div>
 
       {!isCollapsed && (
diff --git a/components/sidebars/project-sidebar.tsx b/components/sidebars/project-sidebar.tsx
deleted file mode 100644
index 8796246..0000000
--- a/components/sidebars/project-sidebar.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Environment, Project, Sandbox } from '@prisma/client';
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  CreditCard,
-  Database,
-  Key,
-  Package,
-  Settings,
-  Shield,
-  Terminal,
-} from 'lucide-react';
-import { usePathname } from 'next/navigation';
-
-import { cn } from '@/lib/utils';
-
-interface ProjectSidebarProps {
-  project: Project;
-  sandboxes: Sandbox[];
-  envVars: Environment[];
-}
-
-export default function ProjectSidebar({ project }: ProjectSidebarProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isConfigExpanded, setIsConfigExpanded] = useState(true);
-  const pathname = usePathname();
-
-  const topSections = [
-    {
-      id: 'terminal',
-      label: 'Web Terminal',
-      icon: Terminal,
-      href: `/projects/${project.id}/terminal`,
-    },
-    { id: 'database', label: 'Database', icon: Database, href: `/projects/${project.id}/database` },
-  ];
-
-  const configSections = [
-    {
-      id: 'environment',
-      label: 'Environment Variables',
-      icon: Package,
-      href: `/projects/${project.id}/environment`,
-    },
-    {
-      id: 'secrets',
-      label: 'Secret Configuration',
-      icon: Key,
-      href: `/projects/${project.id}/secrets`,
-    },
-    { id: 'auth', label: 'Auth Configuration', icon: Shield, href: `/projects/${project.id}/auth` },
-    {
-      id: 'payment',
-      label: 'Payment Configuration',
-      icon: CreditCard,
-      href: `/projects/${project.id}/payment`,
-    },
-  ];
-
-  // Check if any config section is active
-  const isConfigActive = configSections.some((section) => pathname === section.href);
-
-  return (
-    <div
-      className={cn(
-        'bg-sidebar-project-background border-r border-border flex flex-col transition-all duration-200',
-        isCollapsed ? 'w-10' : 'w-72'
-      )}
-    >
-      {/* Header */}
-      <div className="h-12 flex items-center justify-between px-3 border-b border-border">
-        {!isCollapsed && (
-          <span className="text-sm font-medium text-foreground">Project {project.name}</span>
-        )}
-        <button
-          onClick={() => setIsCollapsed(!isCollapsed)}
-          className="text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-        </button>
-      </div>
-
-      {!isCollapsed && (
-        <div className="flex-1 overflow-y-auto">
-          {/* Top sections */}
-          {topSections.map((section) => {
-            const Icon = section.icon;
-            const isActive = pathname === section.href;
-
-            return (
-              <a
-                key={section.id}
-                href={section.href}
-                className={cn(
-                  'group w-full flex items-center px-3 py-2 text-sm transition-colors min-h-[32px]',
-                  isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent'
-                )}
-              >
-                <Icon className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
-                <span className="text-foreground truncate flex-1">{section.label}</span>
-              </a>
-            );
-          })}
-
-          {/* Configuration Group */}
-          <div>
-            <button
-              onClick={() => setIsConfigExpanded(!isConfigExpanded)}
-              className={cn(
-                'group w-full flex items-center px-3 py-2 text-sm transition-colors min-h-[32px]',
-                isConfigActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent'
-              )}
-            >
-              <Settings className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
-              <span className="text-foreground flex-1 text-left truncate">Configuration</span>
-              <ChevronDown
-                className={cn(
-                  'h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-all',
-                  !isConfigExpanded && '-rotate-90'
-                )}
-              />
-            </button>
-
-            {isConfigExpanded && (
-              <div className="bg-muted/30">
-                {configSections.map((section) => {
-                  const Icon = section.icon;
-                  const isActive = pathname === section.href;
-
-                  return (
-                    <a
-                      key={section.id}
-                      href={section.href}
-                      className={cn(
-                        'group w-full flex items-center pl-9 pr-3 py-2 text-sm transition-colors min-h-[32px]',
-                        isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent'
-                      )}
-                    >
-                      <Icon className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
-                      <span className="text-foreground truncate flex-1">{section.label}</span>
-                    </a>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/components/terminal/terminal-toolbar.tsx b/components/terminal/terminal-toolbar.tsx
index 1967441..2f532a6 100644
--- a/components/terminal/terminal-toolbar.tsx
+++ b/components/terminal/terminal-toolbar.tsx
@@ -101,41 +101,49 @@ export function TerminalToolbar({
 
   return (
     <>
-      <div className="h-9 bg-[#2d2d30] border-b border-[#3e3e42] flex items-center justify-between px-2">
+      <div className="h-12 bg-[#2d2d30] border-b border-[#3e3e42] flex items-center justify-between">
         {/* Terminal Tabs */}
-        <div className="flex items-center gap-1 flex-1 min-w-0">
+        <div className="flex items-center flex-1 min-w-0 h-full overflow-x-auto overflow-y-hidden">
           {tabs.map((tab) => (
             <div
               key={tab.id}
               className={cn(
-                'flex items-center gap-1 px-2 py-1 rounded text-xs cursor-pointer transition-colors',
+                'flex items-center gap-2 px-4 h-full text-xs cursor-pointer transition-colors border-r border-[#3e3e42] relative group min-w-[120px] max-w-[200px]',
                 activeTabId === tab.id
                   ? 'bg-[#1e1e1e] text-white'
-                  : 'text-gray-400 hover:bg-[#37373d]'
+                  : 'bg-[#2d2d30] text-[#969696] hover:bg-[#2d2d30] hover:text-white'
               )}
               onClick={() => onTabSelect(tab.id)}
             >
-              <TerminalIcon className="h-3 w-3" />
-              <span className="truncate max-w-[100px]">{tab.name}</span>
+              {/* Top Accent Line for Active Tab */}
+              {activeTabId === tab.id && (
+                <div className="absolute top-0 left-0 right-0 h-[2px] bg-[#007fd4]" />
+              )}
+              
+              <TerminalIcon className={cn("h-3.5 w-3.5 shrink-0", activeTabId === tab.id ? "text-white" : "text-[#007fd4]")} />
+              <span className="truncate flex-1">{tab.name}</span>
               {tabs.length > 1 && (
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
                     onTabClose(tab.id);
                   }}
-                  className="ml-1 hover:text-white"
+                  className={cn(
+                    "p-0.5 rounded-sm opacity-0 group-hover:opacity-100 transition-all",
+                    activeTabId === tab.id ? "hover:bg-[#37373d]" : "hover:bg-[#454549]"
+                  )}
                 >
-                  <X className="h-3 w-3" />
+                  <X className="h-3.5 w-3.5" />
                 </button>
               )}
             </div>
           ))}
           <button
             onClick={onTabAdd}
-            className="p-1 text-gray-400 hover:text-white hover:bg-[#37373d] rounded transition-colors"
+            className="h-full aspect-square flex items-center justify-center text-[#c5c5c5] hover:bg-[#37373d] transition-colors border-r border-transparent"
             title="Add new terminal"
           >
-            <Plus className="h-3 w-3" />
+            <Plus className="h-4 w-4" />
           </button>
         </div>