diff --git a/src/renderer/components/ProjectSidebar.test.tsx b/src/renderer/components/ProjectSidebar.test.tsx
index 4f56e38..3ad1f10 100644
--- a/src/renderer/components/ProjectSidebar.test.tsx
+++ b/src/renderer/components/ProjectSidebar.test.tsx
@@ -251,15 +251,10 @@ describe('ProjectSidebar', () => {
     expect(onNewProject).toHaveBeenCalled()
   })
 
-  it('should call onNewProject when bottom + button is clicked', () => {
-    const onNewProject = vi.fn()
-    renderWithRouter({ onNewProject })
+  it('should show version label at the bottom', () => {
+    renderWithRouter({})
 
-    // Use data-testid for robust button selection
-    const bottomButton = screen.getByTestId('bottom-new-project')
-    fireEvent.click(bottomButton)
-
-    expect(onNewProject).toHaveBeenCalled()
+    expect(screen.getByText(/Termul v/)).toBeInTheDocument()
   })
 
   it('should show empty state when no projects', () => {
diff --git a/src/renderer/components/ProjectSidebar.tsx b/src/renderer/components/ProjectSidebar.tsx
index b078dce..4c76229 100644
--- a/src/renderer/components/ProjectSidebar.tsx
+++ b/src/renderer/components/ProjectSidebar.tsx
@@ -310,15 +310,15 @@ export function ProjectSidebar({
   )
 
   return (
-    <aside className="w-64 bg-card border-r border-border flex flex-col flex-shrink-0">
+    <aside className="w-64 bg-sidebar flex flex-col flex-shrink-0 rounded-xl h-full">
       {/* Header with inline + button */}
-      <div className="h-10 flex items-center justify-between px-4 border-b border-border">
-        <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+      <div className="h-10 flex items-center justify-between px-4 border-b border-sidebar-border rounded-t-xl">
+        <span className="text-xs font-semibold tracking-wider text-sidebar-foreground uppercase">
           Projects
         </span>
         <button
           onClick={onNewProject}
-          className="group h-6 w-6 inline-flex items-center justify-center rounded hover:bg-secondary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          className="group h-6 w-6 inline-flex items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
           title="New Project"
           aria-label="Create new project from header"
           data-testid="header-new-project"
@@ -376,7 +376,7 @@ export function ProjectSidebar({
               <div className="mt-2">
                 <button
                   onClick={() => setShowArchived(!showArchived)}
-                  className="w-full flex items-center px-4 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase hover:bg-secondary/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  className="w-full flex items-center px-4 py-2 text-xs font-semibold tracking-wider text-sidebar-foreground uppercase hover:bg-sidebar-accent/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                   aria-expanded={showArchived}
                   aria-label={`Archived projects (${archivedProjects.length})`}
                 >
@@ -402,17 +402,11 @@ export function ProjectSidebar({
         )}
       </div>
 
-      {/* Bottom toolbar - New Project only */}
-      <div className="border-t border-border p-2">
-        <button
-          onClick={onNewProject}
-          className="group w-full h-8 inline-flex items-center justify-center rounded hover:bg-secondary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-          title="New Project"
-          aria-label="Create new project from toolbar"
-          data-testid="bottom-new-project"
-        >
-          <Plus size={16} className="text-muted-foreground group-hover:text-foreground" />
-        </button>
+      {/* Bottom toolbar - Version */}
+      <div className="p-2 rounded-b-xl">
+        <div className="w-full h-8 inline-flex items-center justify-center">
+          <span className="text-xs text-muted-foreground">Termul v0.3.0-4</span>
+        </div>
       </div>
 
       {/* Context Menu */}
@@ -505,7 +499,7 @@ function ProjectItem({
       onContextMenu={onContextMenu}
       className={cn(
         'w-full flex items-center px-0 py-2 transition-colors group text-left border-l-2',
-        isActive ? `${colors.border} bg-secondary` : `${colors.borderMuted} hover:bg-secondary/50`
+        isActive ? `${colors.border} bg-sidebar-accent` : `${colors.borderMuted} hover:bg-sidebar-accent/50`
       )}
       aria-current={isActive ? 'page' : undefined}
       aria-label={`Project: ${project.name}${isActive ? ' (active)' : ''}`}
@@ -529,7 +523,7 @@ function ProjectItem({
           onChange={(e) => onEditNameChange(e.target.value)}
           onKeyDown={handleKeyDown}
           onBlur={onSaveRename}
-          className="flex-1 bg-secondary border border-border rounded px-2 py-0.5 text-sm text-foreground outline-none focus:ring-1 focus:ring-primary mr-2"
+          className="flex-1 bg-sidebar-accent border border-border rounded-md px-2 py-0.5 text-sm text-foreground outline-none focus:ring-1 focus:ring-primary mr-2"
           onClick={(e) => e.stopPropagation()}
         />
       ) : (
diff --git a/src/renderer/components/TitleBar.tsx b/src/renderer/components/TitleBar.tsx
index 7751e06..99f2d56 100644
--- a/src/renderer/components/TitleBar.tsx
+++ b/src/renderer/components/TitleBar.tsx
@@ -7,7 +7,7 @@ import { useUpdatePanelVisibility } from '@/hooks/use-app-settings'
 import { windowApi } from '@/lib/api'
 import { toast } from 'sonner'
 
-const focusableButtonClass = 'h-full px-3 hover:bg-secondary inline-flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
+const focusableButtonClass = 'h-full px-3 hover:bg-secondary/80 inline-flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
 
 export function TitleBar(): React.JSX.Element {
   const [isMaximized, setIsMaximized] = useState(false)
@@ -43,7 +43,7 @@ export function TitleBar(): React.JSX.Element {
 
   return (
     <header
-      className="h-8 flex items-center bg-card border-b border-border select-none shrink-0"
+      className="h-8 flex items-center bg-background select-none shrink-0"
     >
       <div
         className="flex items-center h-full px-3"
diff --git a/src/renderer/components/file-explorer/FileExplorer.tsx b/src/renderer/components/file-explorer/FileExplorer.tsx
index b13f7c8..648e483 100644
--- a/src/renderer/components/file-explorer/FileExplorer.tsx
+++ b/src/renderer/components/file-explorer/FileExplorer.tsx
@@ -418,11 +418,11 @@ export function FileExplorer(): React.JSX.Element {
   return (
     <div
       ref={containerRef}
-      className="h-full flex flex-col bg-background text-foreground"
+      className="w-64 flex flex-col bg-background text-foreground rounded-xl flex-shrink-0 h-full"
       tabIndex={0}
     >
       {/* Header */}
-      <div className="flex items-center justify-between px-3 h-10 border-b border-border flex-shrink-0">
+      <div className="flex items-center justify-between px-3 h-10 border-b border-border flex-shrink-0 rounded-t-xl">
         <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
           Explorer
         </span>
diff --git a/src/renderer/components/ui/button.tsx b/src/renderer/components/ui/button.tsx
index bcb73c9..7e104c7 100644
--- a/src/renderer/components/ui/button.tsx
+++ b/src/renderer/components/ui/button.tsx
@@ -5,21 +5,21 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-input bg-background hover:bg-secondary hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-secondary hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 rounded-lg px-3',
+        lg: 'h-11 rounded-lg px-8',
         icon: 'h-10 w-10'
       }
     },
diff --git a/src/renderer/components/ui/card.tsx b/src/renderer/components/ui/card.tsx
index a014766..f409f0d 100644
--- a/src/renderer/components/ui/card.tsx
+++ b/src/renderer/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
       {...props}
     />
   )
diff --git a/src/renderer/components/ui/context-menu.tsx b/src/renderer/components/ui/context-menu.tsx
index 36a79a8..713daa5 100644
--- a/src/renderer/components/ui/context-menu.tsx
+++ b/src/renderer/components/ui/context-menu.tsx
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary focus:bg-secondary',
       inset && 'pl-8',
       className
     )}
@@ -60,7 +60,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -78,7 +78,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -94,7 +94,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     checked={checked}
@@ -117,7 +117,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/dialog.tsx b/src/renderer/components/ui/dialog.tsx
index a5bfc2b..e2d07bb 100644
--- a/src/renderer/components/ui/dialog.tsx
+++ b/src/renderer/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/90 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/src/renderer/components/ui/dropdown-menu.tsx b/src/renderer/components/ui/dropdown-menu.tsx
index 10f85ae..f39cd94 100644
--- a/src/renderer/components/ui/dropdown-menu.tsx
+++ b/src/renderer/components/ui/dropdown-menu.tsx
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent',
+      'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary focus:bg-secondary',
       inset && 'pl-8',
       className
     )}
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
@@ -153,7 +153,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
 ))
diff --git a/src/renderer/components/ui/input.tsx b/src/renderer/components/ui/input.tsx
index e6fe6c0..8cf90c0 100644
--- a/src/renderer/components/ui/input.tsx
+++ b/src/renderer/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
diff --git a/src/renderer/components/ui/menubar.tsx b/src/renderer/components/ui/menubar.tsx
index e7e1864..2e60d57 100644
--- a/src/renderer/components/ui/menubar.tsx
+++ b/src/renderer/components/ui/menubar.tsx
@@ -36,7 +36,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-secondary data-[state=open]:text-accent-foreground focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
@@ -53,7 +53,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-secondary data-[state=open]:text-accent-foreground focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -72,7 +72,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -91,7 +91,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[12rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
@@ -109,7 +109,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -125,7 +125,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     checked={checked}
@@ -148,7 +148,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/navigation-menu.tsx b/src/renderer/components/ui/navigation-menu.tsx
index 3530949..342911e 100644
--- a/src/renderer/components/ui/navigation-menu.tsx
+++ b/src/renderer/components/ui/navigation-menu.tsx
@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
+  'group inline-flex h-10 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-secondary hover:text-accent-foreground focus:bg-secondary focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-secondary/50 data-[state=open]:bg-secondary/50'
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -80,7 +80,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
         className
       )}
       ref={ref}
diff --git a/src/renderer/components/ui/resizable.tsx b/src/renderer/components/ui/resizable.tsx
index 02a985b..eedfe57 100644
--- a/src/renderer/components/ui/resizable.tsx
+++ b/src/renderer/components/ui/resizable.tsx
@@ -24,7 +24,7 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/scroll-area.tsx b/src/renderer/components/ui/scroll-area.tsx
index fc2f417..9689565 100644
--- a/src/renderer/components/ui/scroll-area.tsx
+++ b/src/renderer/components/ui/scroll-area.tsx
@@ -36,7 +36,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-muted" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/src/renderer/components/ui/select.tsx b/src/renderer/components/ui/select.tsx
index 12cb7f4..6a1d5a3 100644
--- a/src/renderer/components/ui/select.tsx
+++ b/src/renderer/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -109,7 +109,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+      'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-secondary focus:text-accent-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/sidebar.tsx b/src/renderer/components/ui/sidebar.tsx
index 9d134dc..a41e9fa 100644
--- a/src/renderer/components/ui/sidebar.tsx
+++ b/src/renderer/components/ui/sidebar.tsx
@@ -491,7 +491,7 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li
 SidebarMenuItem.displayName = 'SidebarMenuItem'
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -693,7 +693,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
diff --git a/src/renderer/components/ui/tabs.tsx b/src/renderer/components/ui/tabs.tsx
index d906dfa..144ef89 100644
--- a/src/renderer/components/ui/tabs.tsx
+++ b/src/renderer/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-muted data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/src/renderer/components/ui/tooltip.tsx b/src/renderer/components/ui/tooltip.tsx
index e84aa62..0437de4 100644
--- a/src/renderer/components/ui/tooltip.tsx
+++ b/src/renderer/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 overflow-hidden rounded-lg border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
diff --git a/src/renderer/components/workspace/EditorTab.tsx b/src/renderer/components/workspace/EditorTab.tsx
index 1df4438..4fa69c0 100644
--- a/src/renderer/components/workspace/EditorTab.tsx
+++ b/src/renderer/components/workspace/EditorTab.tsx
@@ -88,7 +88,7 @@ export function EditorTab({
         <Icon size={14} className={cn('mr-2 flex-shrink-0', isActive ? 'text-primary' : '')} />
         <span
           className={cn(
-            'text-sm font-medium truncate',
+            'text-xs font-medium truncate',
             isActive && 'text-foreground'
           )}
         >
diff --git a/src/renderer/components/workspace/PaneContent.tsx b/src/renderer/components/workspace/PaneContent.tsx
index 97eb171..ac88222 100644
--- a/src/renderer/components/workspace/PaneContent.tsx
+++ b/src/renderer/components/workspace/PaneContent.tsx
@@ -114,7 +114,7 @@ export function PaneContent({
         defaultShell={defaultShell}
       />
 
-      <div className="flex-1 overflow-hidden bg-terminal-bg relative">
+      <div className="flex-1 overflow-hidden bg-terminal-bg relative h-full">
         <div
           className={cn(
             'w-full h-full relative transition-all duration-150 ease-out',
@@ -154,7 +154,12 @@ export function PaneContent({
                 // CRITICAL: Skip rendering if terminal doesn't have a PTY ID yet
                 // This prevents spawn loops when workspace tabs aren't fully synced
                 if (!terminal.ptyId) {
-                  return null
+                  const isVisible = activeTab?.id === tab.id
+                  return (
+                    <div key={tab.id} className={isVisible ? 'w-full h-full flex items-center justify-center text-muted-foreground text-sm' : 'hidden'}>
+                      Connecting...
+                    </div>
+                  )
                 }
                 const isVisible = activeTab?.id === tab.id
                 return (
diff --git a/src/renderer/components/workspace/WorkspaceTabBar.tsx b/src/renderer/components/workspace/WorkspaceTabBar.tsx
index d91f596..da8f75a 100644
--- a/src/renderer/components/workspace/WorkspaceTabBar.tsx
+++ b/src/renderer/components/workspace/WorkspaceTabBar.tsx
@@ -138,12 +138,12 @@ function TerminalTabInline({
             }}
             onBlur={handleSave}
             onClick={(e) => e.stopPropagation()}
-            className="text-sm font-medium bg-transparent border-b border-primary outline-none w-full"
+            className="text-xs font-medium bg-transparent border-b border-primary outline-none w-full"
           />
         ) : (
           <span
             onDoubleClick={handleDoubleClick}
-            className={cn('text-sm font-medium', isActive && 'text-foreground')}
+            className={cn('text-xs font-medium', isActive && 'text-foreground')}
           >
             {terminal.name}
           </span>
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 0b7d8a0..a7f5ac3 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -6,15 +6,15 @@
 
 @layer base {
   :root {
-    /* Background layers */
-    --background: 0 0% 12%; /* #1E1E1E */
+    /* Background layers - Codex dark theme */
+    --background: 0 0% 7%; /* #121212 - darker main background */
     --foreground: 0 0% 90%;
 
     /* Surface colors for layered UI */
-    --card: 0 0% 14%; /* #252526 */
+    --card: 0 0% 11%; /* #1c1c1c - slightly elevated surface */
     --card-foreground: 0 0% 90%;
 
-    --popover: 0 0% 14%;
+    --popover: 0 0% 11%;
     --popover-foreground: 0 0% 90%;
 
     /* Primary - IDE Blue */
@@ -22,11 +22,11 @@
     --primary-foreground: 0 0% 100%;
 
     /* Secondary - Muted surface */
-    --secondary: 0 0% 18%;
+    --secondary: 0 0% 15%; /* #262626 */
     --secondary-foreground: 0 0% 70%;
 
     /* Muted elements */
-    --muted: 0 0% 20%;
+    --muted: 0 0% 18%; /* #2e2e2e */
     --muted-foreground: 0 0% 50%;
 
     /* Accent for highlights */
@@ -37,20 +37,20 @@
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
-    /* Borders */
-    --border: 240 4% 26%; /* #3F3F46 zinc-700 */
-    --input: 240 4% 26%;
+    /* Borders - subtle dark borders */
+    --border: 0 0% 20%; /* #333333 */
+    --input: 0 0% 20%;
     --ring: 217 91% 60%;
 
-    --radius: 0.25rem;
+    --radius: 0.5rem; /* 8px - rounded corners */
 
     /* Terminal-specific */
     --terminal-bg: 0 0% 7%; /* #121212 */
     --terminal-fg: 0 0% 85%;
 
     /* Surface layers */
-    --surface-dark: 0 0% 14%; /* #252526 */
-    --surface-darker: 0 0% 10%;
+    --surface-dark: 0 0% 11%; /* #1c1c1c */
+    --surface-darker: 0 0% 7%;
 
     /* Status bar (VS Code style) */
     --status-bar: 217 91% 40%; /* #007acc */
@@ -65,14 +65,14 @@
     --project-pink: 330 81% 60%;
     --project-orange: 25 95% 53%;
 
-    /* Sidebar */
-    --sidebar-background: 0 0% 14%;
+    /* Sidebar - darker than main content */
+    --sidebar-background: 0 0% 9%; /* #171717 */
     --sidebar-foreground: 0 0% 70%;
     --sidebar-primary: 217 91% 60%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 0 0% 18%;
+    --sidebar-accent: 0 0% 15%; /* #262626 */
     --sidebar-accent-foreground: 0 0% 90%;
-    --sidebar-border: 240 4% 26%;
+    --sidebar-border: 0 0% 20%;
     --sidebar-ring: 217 91% 60%;
   }
 }
@@ -86,10 +86,10 @@
     @apply bg-background text-foreground font-sans antialiased;
   }
 
-  /* Custom scrollbar */
+  /* Custom scrollbar - Codex style */
   ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+    width: 4px;
+    height: 4px;
   }
 
   ::-webkit-scrollbar-track {
@@ -97,12 +97,12 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: hsl(0 0% 35%);
-    border-radius: 5px;
+    background: hsl(0 0% 25%);
+    border-radius: 2px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: hsl(0 0% 45%);
+    background: hsl(0 0% 35%);
   }
 
   .scrollbar-hide::-webkit-scrollbar {
@@ -121,9 +121,9 @@
     @apply inline-block w-2.5 h-5 bg-muted-foreground animate-pulse;
   }
 
-  /* Glass effect for modals */
+  /* Glass effect for modals - Codex style */
   .glass-panel {
-    background: hsla(0, 0%, 14%, 0.95);
+    background: hsla(0, 0%, 11%, 0.95);
     backdrop-filter: blur(12px);
   }
 
diff --git a/src/renderer/layouts/WorkspaceLayout.tsx b/src/renderer/layouts/WorkspaceLayout.tsx
index 1710159..286855d 100644
--- a/src/renderer/layouts/WorkspaceLayout.tsx
+++ b/src/renderer/layouts/WorkspaceLayout.tsx
@@ -123,7 +123,17 @@ export default function WorkspaceLayout(): React.JSX.Element {
   // Sync file explorer root path and register project root watcher when project changes
   useEffect(() => {
     const nextRootPathCandidate = activeProject?.path
-    if (typeof nextRootPathCandidate !== 'string' || activeProjectId === prevProjectIdRef.current) {
+    if (!activeProject || typeof nextRootPathCandidate !== 'string' || nextRootPathCandidate === '') {
+      // Project removed or has no path — clear explorer root and unwatch
+      useFileExplorerStore.getState().setRootPath('')
+      if (watchedRootPathRef.current) {
+        filesystemApi.unwatchDirectory(watchedRootPathRef.current)
+        watchedRootPathRef.current = null
+      }
+      prevProjectIdRef.current = activeProjectId
+      return
+    }
+    if (activeProjectId === prevProjectIdRef.current) {
       return
     }
 
@@ -393,6 +403,7 @@ export default function WorkspaceLayout(): React.JSX.Element {
       // Skip if typing in an input/textarea/editable element
       const target = e.target instanceof HTMLElement ? e.target : document.body
       const isInEditor = target.closest('.cm-content') || target.closest('.bn-editor')
+      const isInTerminal = !!target.closest('.xterm')
       const isInInput =
         target.tagName === 'INPUT' ||
         target.tagName === 'TEXTAREA' ||
@@ -425,9 +436,9 @@ export default function WorkspaceLayout(): React.JSX.Element {
         return
       }
 
-      // Ctrl+B - toggle file explorer (skip when in editor/input so BlockNote bold works)
+      // Ctrl+B - toggle file explorer (skip when in editor/input/terminal)
       if (e.ctrlKey && e.key === 'b' && !e.shiftKey && !e.altKey) {
-        if (!isInEditor && !isInInput) {
+        if (!isInEditor && !isInInput && !isInTerminal) {
           e.preventDefault()
           void updatePanelVisibility('fileExplorerVisible', !isExplorerVisible).catch((error) => {
             toast.error(
@@ -795,98 +806,97 @@ export default function WorkspaceLayout(): React.JSX.Element {
     <div className="h-screen flex flex-col overflow-hidden bg-background">
       <TitleBar />
 
-      <div className="flex-1 flex overflow-hidden min-h-0">
+      <div className="flex-1 flex overflow-hidden min-h-0 h-full p-2 gap-0">
         {/* Sidebar */}
         {isSidebarVisible && (
-          <ProjectSidebar
-            projects={projects}
-            activeProjectId={activeProjectId}
-            onSelectProject={selectProject}
-            onNewProject={() => setIsNewProjectModalOpen(true)}
-            onUpdateProject={updateProject}
-            onDeleteProject={deleteProject}
-            onArchiveProject={archiveProject}
-            onRestoreProject={restoreProject}
-            onReorderProjects={reorderProjects}
-          />
+          <div className="mr-2">
+            <ProjectSidebar
+              projects={projects}
+              activeProjectId={activeProjectId}
+              onSelectProject={selectProject}
+              onNewProject={() => setIsNewProjectModalOpen(true)}
+              onUpdateProject={updateProject}
+              onDeleteProject={deleteProject}
+              onArchiveProject={archiveProject}
+              onRestoreProject={restoreProject}
+              onReorderProjects={reorderProjects}
+            />
+          </div>
         )}
 
-        {/* Main Content */}
-        <main className="flex-1 flex flex-col min-w-0">
-          {projects.length === 0 ? (
-            /* No Projects Empty State */
-            <div className="flex-1 flex flex-col items-center justify-center bg-terminal-bg px-6">
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.4, ease: 'easeOut' }}
-                className="flex flex-col items-center text-center max-w-md"
-              >
-                <div className="mb-6">
-                  <FolderKanban className="w-24 h-24 text-muted-foreground/50" />
-                </div>
-                <h2 className="text-xl font-semibold text-foreground mb-2">
-                  No Projects Yet
-                </h2>
-                <p className="text-muted-foreground text-sm mb-6 leading-relaxed">
-                  Create your first project to organize your terminals, snapshots, and commands
-                </p>
-                <button
-                  onClick={() => setIsNewProjectModalOpen(true)}
-                  className="px-6 py-2.5 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
+        {/* Main Content and File Explorer Container */}
+        <div className="flex-1 flex min-h-0 h-full gap-0 overflow-hidden min-w-0">
+          {/* Main Content Area */}
+          <main className="flex-1 flex flex-col min-w-0 rounded-xl bg-card overflow-hidden">
+            {projects.length === 0 ? (
+              /* No Projects Empty State */
+              <div className="flex-1 flex flex-col items-center justify-center bg-background px-6 rounded-xl">
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.4, ease: 'easeOut' }}
+                  className="flex flex-col items-center text-center max-w-md"
                 >
-                  Create Your First Project
-                </button>
-              </motion.div>
-            </div>
-          ) : (
-            <>
-              {isWorkspaceRoute ? (
-                <div className="flex-1 flex min-h-0">
-                  <PaneDndProvider>
-                    <ResizablePanelGroup direction="horizontal">
-                      {/* Center Panel: Pane Tree */}
-                      <ResizablePanel defaultSize={isExplorerVisible ? 80 : 100}>
-                        <PaneRenderer
-                          node={paneRoot}
-                          onNewTerminal={(paneId) => {
-                            handleCreateTerminalInPane(paneId)
-                          }}
-                          onNewTerminalWithShell={(paneId, shell) => {
-                            handleCreateTerminalInPane(paneId, shell.path)
-                          }}
-                          onCloseTerminal={handleCloseTerminal}
-                          onRenameTerminal={renameTerminal}
-                          onCloseEditorTab={handleCloseEditorTab}
-                          defaultShell={activeProject?.defaultShell || appDefaultShell}
-                        />
-                      </ResizablePanel>
-
-                      {/* File Explorer Panel (Right, full height) */}
-                      {isExplorerVisible && (
-                        <>
-                          <ResizableHandle />
-                          <ResizablePanel defaultSize={20} minSize={10} maxSize={40}>
-                            <FileExplorer />
-                          </ResizablePanel>
-                        </>
-                      )}
-                    </ResizablePanelGroup>
-                  </PaneDndProvider>
-                </div>
-              ) : (
-                <div className="flex-1 overflow-hidden bg-terminal-bg relative">
-                  <div className="w-full h-full">
-                    <Outlet />
+                  <div className="mb-6">
+                    <FolderKanban className="w-24 h-24 text-muted-foreground/50" />
                   </div>
-                </div>
-              )}
-
-              {/* Status Bar */}
-              <StatusBar project={activeProject} />
-            </>
+                  <h2 className="text-xl font-semibold text-foreground mb-2">
+                    No Projects Yet
+                  </h2>
+                  <p className="text-muted-foreground text-sm mb-6 leading-relaxed">
+                    Create your first project to organize your terminals, snapshots, and commands
+                  </p>
+                  <button
+                    onClick={() => setIsNewProjectModalOpen(true)}
+                    className="px-6 py-2.5 bg-primary text-primary-foreground rounded-xl hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow"
+                  >
+                    Create Your First Project
+                  </button>
+                </motion.div>
+              </div>
+            ) : (
+              <>
+                {isWorkspaceRoute ? (
+                  <div className="flex-1 min-h-0 h-full overflow-hidden">
+                    <PaneDndProvider>
+                      <PaneRenderer
+                        node={paneRoot}
+                        onNewTerminal={(paneId) => {
+                          handleCreateTerminalInPane(paneId)
+                        }}
+                        onNewTerminalWithShell={(paneId, shell) => {
+                          handleCreateTerminalInPane(paneId, shell.path)
+                        }}
+                        onCloseTerminal={handleCloseTerminal}
+                        onRenameTerminal={renameTerminal}
+                        onCloseEditorTab={handleCloseEditorTab}
+                        defaultShell={activeProject?.defaultShell || appDefaultShell}
+                      />
+                    </PaneDndProvider>
+                  </div>
+                ) : (
+                  <div className="flex-1 overflow-hidden bg-background relative rounded-xl">
+                    <div className="w-full h-full">
+                      <Outlet />
+                    </div>
+                  </div>
+                )}
+
+                {/* Status Bar */}
+                <StatusBar project={activeProject} />
+              </>
+            )}
+          </main>
+
+          {/* File Explorer - separate floating panel */}
+          {isExplorerVisible && activeProject?.path && (
+            <div className="flex-shrink-0 ml-2">
+              <PaneDndProvider>
+                <FileExplorer />
+              </PaneDndProvider>
+            </div>
           )}
-        </main>
+        </div>
       </div>
 
       {/* Modals */}
diff --git a/src/renderer/pages/AppPreferences.tsx b/src/renderer/pages/AppPreferences.tsx
index 7bf1125..96a82c0 100644
--- a/src/renderer/pages/AppPreferences.tsx
+++ b/src/renderer/pages/AppPreferences.tsx
@@ -171,7 +171,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <select
                     value={fontFamily}
                     onChange={(e) => handleFontFamilyChange(e.target.value)}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     {FONT_FAMILY_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -215,7 +215,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <select
                     value={bufferSize}
                     onChange={(e) => handleBufferSizeChange(parseInt(e.target.value))}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     {BUFFER_SIZE_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -236,7 +236,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <select
                     value={maxTerminals}
                     onChange={(e) => handleMaxTerminalsChange(parseInt(e.target.value))}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     {MAX_TERMINALS_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -303,7 +303,7 @@ export default function AppPreferences(): React.JSX.Element {
                       return match?.path ?? defaultShell
                     })()}
                     onChange={(e) => handleDefaultShellChange(e.target.value)}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow"
                   >
                     <option value="">System Default</option>
                     {availableShells?.available?.map((shell) => (
@@ -368,7 +368,7 @@ export default function AppPreferences(): React.JSX.Element {
                     value={orphanDetectionTimeout ?? 600000}
                     onChange={(e) => handleOrphanTimeoutChange(e.target.value ? parseInt(e.target.value) : null)}
                     disabled={!orphanDetectionEnabled}
-                    className="w-full bg-secondary/50 border border-border rounded-md px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
                   >
                     {ORPHAN_TIMEOUT_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -522,7 +522,7 @@ export default function AppPreferences(): React.JSX.Element {
                   <button
                     onClick={checkForUpdates}
                     disabled={isChecking}
-                    className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 disabled:cursor-not-allowed border border-primary rounded-md text-sm text-primary-foreground transition-colors"
+                    className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 disabled:cursor-not-allowed border border-primary rounded-lg text-sm text-primary-foreground transition-colors"
                   >
                     <Download size={16} />
                     {isChecking ? 'Checking for updates...' : 'Check for Updates'}
@@ -595,7 +595,7 @@ export default function AppPreferences(): React.JSX.Element {
               <div className="w-2/3">
                 <button
                   onClick={() => setIsResetDialogOpen(true)}
-                  className="flex items-center gap-2 px-4 py-2 bg-card hover:bg-secondary border border-border rounded-md text-sm text-foreground transition-colors"
+                  className="flex items-center gap-2 px-4 py-2 bg-card hover:bg-secondary border border-border rounded-lg text-sm text-foreground transition-colors"
                 >
                   <RotateCcw size={16} />
                   Reset to Defaults