diff --git a/app/api/projects/[id]/environment/[envId]/route.ts b/app/api/projects/[id]/environment/[envId]/route.ts
index 936e033..8ef190f 100644
--- a/app/api/projects/[id]/environment/[envId]/route.ts
+++ b/app/api/projects/[id]/environment/[envId]/route.ts
@@ -3,6 +3,10 @@ import { NextResponse } from 'next/server'
 
 import { verifyProjectAccess, withAuth } from '@/lib/api-auth'
 import { prisma } from '@/lib/db'
+import { logger as baseLogger } from '@/lib/logger'
+import { canUpdateResource } from '@/lib/util/action'
+
+const logger = baseLogger.child({ module: 'api/projects/[id]/environment/[envId]' })
 
 type PutEnvironmentResponse = { error: string } | Environment
 
@@ -27,6 +31,36 @@ export const PUT = withAuth<PutEnvironmentResponse>(async (req, context, session
       return NextResponse.json({ error: 'Environment variable not found' }, { status: 404 })
     }
 
+    // Check if project sandboxes can be updated
+    const project = await prisma.project.findUnique({
+      where: { id: projectId },
+      include: {
+        sandboxes: {
+          select: { id: true, status: true, name: true },
+        },
+      },
+    })
+
+    if (!project) {
+      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
+    }
+
+    // Check if all sandboxes can be updated
+    const nonUpdatableSandboxes = project.sandboxes.filter((sb) => !canUpdateResource(sb.status))
+
+    if (nonUpdatableSandboxes.length > 0) {
+      const statusList = nonUpdatableSandboxes.map((sb) => `${sb.name}: ${sb.status}`).join(', ')
+      logger.warn(
+        `Cannot update environment variable for project ${projectId}: some sandboxes cannot be updated (${statusList})`
+      )
+      return NextResponse.json(
+        {
+          error: `Cannot update environment variable: some sandboxes are not in a state that allows updates. Only RUNNING sandboxes can be updated. Non-updatable sandboxes: ${statusList}`,
+        },
+        { status: 400 }
+      )
+    }
+
     const body = await req.json()
     const { value } = body
 
@@ -34,15 +68,31 @@ export const PUT = withAuth<PutEnvironmentResponse>(async (req, context, session
       return NextResponse.json({ error: 'Value is required' }, { status: 400 })
     }
 
-    // Update the environment variable in database only
+    // Update the environment variable in database
     const updated = await prisma.environment.update({
       where: { id: envId },
       data: { value },
     })
 
+    // Set all sandboxes to UPDATING status
+    if (project.sandboxes.length > 0) {
+      await prisma.sandbox.updateMany({
+        where: {
+          projectId,
+          status: 'RUNNING', // Only update RUNNING sandboxes
+        },
+        data: {
+          status: 'UPDATING',
+        },
+      })
+      logger.info(
+        `Set ${project.sandboxes.length} sandboxes to UPDATING status for project ${projectId}`
+      )
+    }
+
     return NextResponse.json(updated)
   } catch (error) {
-    console.error('Error updating environment variable:', error)
+    logger.error(`Error updating environment variable: ${error}`)
     return NextResponse.json({ error: 'Failed to update environment variable' }, { status: 500 })
   }
 })
@@ -70,14 +120,60 @@ export const DELETE = withAuth<DeleteEnvironmentResponse>(async (_req, context,
       return NextResponse.json({ error: 'Environment variable not found' }, { status: 404 })
     }
 
-    // Delete the environment variable from database only
+    // Check if project sandboxes can be updated
+    const project = await prisma.project.findUnique({
+      where: { id: projectId },
+      include: {
+        sandboxes: {
+          select: { id: true, status: true, name: true },
+        },
+      },
+    })
+
+    if (!project) {
+      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
+    }
+
+    // Check if all sandboxes can be updated
+    const nonUpdatableSandboxes = project.sandboxes.filter((sb) => !canUpdateResource(sb.status))
+
+    if (nonUpdatableSandboxes.length > 0) {
+      const statusList = nonUpdatableSandboxes.map((sb) => `${sb.name}: ${sb.status}`).join(', ')
+      logger.warn(
+        `Cannot delete environment variable for project ${projectId}: some sandboxes cannot be updated (${statusList})`
+      )
+      return NextResponse.json(
+        {
+          error: `Cannot delete environment variable: some sandboxes are not in a state that allows updates. Only RUNNING sandboxes can be updated. Non-updatable sandboxes: ${statusList}`,
+        },
+        { status: 400 }
+      )
+    }
+
+    // Delete the environment variable from database
     await prisma.environment.delete({
       where: { id: envId },
     })
 
+    // Set all sandboxes to UPDATING status
+    if (project.sandboxes.length > 0) {
+      await prisma.sandbox.updateMany({
+        where: {
+          projectId,
+          status: 'RUNNING', // Only update RUNNING sandboxes
+        },
+        data: {
+          status: 'UPDATING',
+        },
+      })
+      logger.info(
+        `Set ${project.sandboxes.length} sandboxes to UPDATING status for project ${projectId}`
+      )
+    }
+
     return NextResponse.json({ success: true })
   } catch (error) {
-    console.error('Error deleting environment variable:', error)
+    logger.error(`Error deleting environment variable: ${error}`)
     return NextResponse.json({ error: 'Failed to delete environment variable' }, { status: 500 })
   }
 })
diff --git a/app/api/projects/[id]/environment/route.ts b/app/api/projects/[id]/environment/route.ts
index 47f92f1..cf7394a 100644
--- a/app/api/projects/[id]/environment/route.ts
+++ b/app/api/projects/[id]/environment/route.ts
@@ -4,6 +4,10 @@ import { NextResponse } from 'next/server'
 import { verifyProjectAccess, withAuth } from '@/lib/api-auth'
 import { EnvironmentCategory } from '@/lib/const'
 import { prisma } from '@/lib/db'
+import { logger as baseLogger } from '@/lib/logger'
+import { canUpdateResource } from '@/lib/util/action'
+
+const logger = baseLogger.child({ module: 'api/projects/[id]/environment' })
 
 type GroupedEnvironments = Record<string, Environment[]>
 
@@ -58,6 +62,37 @@ export const POST = withAuth<PostEnvironmentResponse>(async (req, context, sessi
 
   try {
     await verifyProjectAccess(projectId, session.user.id)
+
+    // Check if project sandboxes can be updated
+    const project = await prisma.project.findUnique({
+      where: { id: projectId },
+      include: {
+        sandboxes: {
+          select: { id: true, status: true, name: true },
+        },
+      },
+    })
+
+    if (!project) {
+      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
+    }
+
+    // Check if all sandboxes can be updated
+    const nonUpdatableSandboxes = project.sandboxes.filter((sb) => !canUpdateResource(sb.status))
+
+    if (nonUpdatableSandboxes.length > 0) {
+      const statusList = nonUpdatableSandboxes.map((sb) => `${sb.name}: ${sb.status}`).join(', ')
+      logger.warn(
+        `Cannot update environment variables for project ${projectId}: some sandboxes cannot be updated (${statusList})`
+      )
+      return NextResponse.json(
+        {
+          error: `Cannot update environment variables: some sandboxes are not in a state that allows updates. Only RUNNING sandboxes can be updated. Non-updatable sandboxes: ${statusList}`,
+        },
+        { status: 400 }
+      )
+    }
+
     const body = await req.json()
 
     // Check if this is a single variable creation or batch update
@@ -73,6 +108,22 @@ export const POST = withAuth<PostEnvironmentResponse>(async (req, context, sessi
         },
       })
 
+      // Set all sandboxes to UPDATING status
+      if (project.sandboxes.length > 0) {
+        await prisma.sandbox.updateMany({
+          where: {
+            projectId,
+            status: 'RUNNING', // Only update RUNNING sandboxes
+          },
+          data: {
+            status: 'UPDATING',
+          },
+        })
+        logger.info(
+          `Set ${project.sandboxes.length} sandboxes to UPDATING status for project ${projectId}`
+        )
+      }
+
       return NextResponse.json(newVar)
     } else if (body.variables) {
       // Batch update (replace all variables)
@@ -100,12 +151,28 @@ export const POST = withAuth<PostEnvironmentResponse>(async (req, context, sessi
 
       const created = await Promise.all(envPromises)
 
+      // Set all sandboxes to UPDATING status
+      if (project.sandboxes.length > 0) {
+        await prisma.sandbox.updateMany({
+          where: {
+            projectId,
+            status: 'RUNNING', // Only update RUNNING sandboxes
+          },
+          data: {
+            status: 'UPDATING',
+          },
+        })
+        logger.info(
+          `Set ${project.sandboxes.length} sandboxes to UPDATING status for project ${projectId}`
+        )
+      }
+
       return NextResponse.json({ success: true, count: created.length })
     } else {
       return NextResponse.json({ error: 'Invalid request body' }, { status: 400 })
     }
   } catch (error) {
-    console.error('Error saving environment variables:', error)
+    logger.error(`Error saving environment variables: ${error}`)
     return NextResponse.json({ error: 'Failed to save environment variables' }, { status: 500 })
   }
 })
diff --git a/app/api/projects/[id]/github/route.ts b/app/api/projects/[id]/github/route.ts
deleted file mode 100644
index 011602c..0000000
--- a/app/api/projects/[id]/github/route.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-
-import { auth } from '@/lib/auth'
-import { prisma } from '@/lib/db'
-
-// Connect GitHub repository to project
-export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await auth()
-
-  if (!session) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id: projectId } = await params
-
-  try {
-    const project = await prisma.project.findFirst({
-      where: {
-        id: projectId,
-        userId: session.user.id,
-      },
-    })
-
-    if (!project) {
-      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
-    }
-
-    const body = await request.json()
-    const { repoName } = body
-
-    if (!repoName) {
-      return NextResponse.json({ error: 'Repository name is required' }, { status: 400 })
-    }
-
-    // Validate repository name format
-    if (!repoName.includes('/') || repoName.split('/').length !== 2) {
-      return NextResponse.json(
-        { error: 'Invalid repository format. Use: username/repository' },
-        { status: 400 }
-      )
-    }
-
-    // Update project with GitHub repository
-    const updated = await prisma.project.update({
-      where: { id: projectId },
-      data: { githubRepo: repoName },
-    })
-
-    return NextResponse.json({
-      success: true,
-      githubRepo: updated.githubRepo,
-    })
-  } catch (error) {
-    console.error('Error connecting GitHub repository:', error)
-    return NextResponse.json({ error: 'Failed to connect GitHub repository' }, { status: 500 })
-  }
-}
-
-// Disconnect GitHub repository from project
-export async function DELETE(
-  request: NextRequest,
-  { params }: { params: Promise<{ id: string }> }
-) {
-  const session = await auth()
-
-  if (!session) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id: projectId } = await params
-
-  try {
-    const project = await prisma.project.findFirst({
-      where: {
-        id: projectId,
-        userId: session.user.id,
-      },
-    })
-
-    if (!project) {
-      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
-    }
-
-    // Remove GitHub repository from project
-    await prisma.project.update({
-      where: { id: projectId },
-      data: { githubRepo: null },
-    })
-
-    return NextResponse.json({
-      success: true,
-      message: 'GitHub repository disconnected',
-    })
-  } catch (error) {
-    console.error('Error disconnecting GitHub repository:', error)
-    return NextResponse.json({ error: 'Failed to disconnect GitHub repository' }, { status: 500 })
-  }
-}
-
-// Get GitHub repository info
-export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  const session = await auth()
-
-  if (!session) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  }
-
-  const { id: projectId } = await params
-
-  try {
-    const project = await prisma.project.findFirst({
-      where: {
-        id: projectId,
-        userId: session.user.id,
-      },
-      select: {
-        githubRepo: true,
-      },
-    })
-
-    if (!project) {
-      return NextResponse.json({ error: 'Project not found' }, { status: 404 })
-    }
-
-    return NextResponse.json({
-      githubRepo: project.githubRepo,
-      connected: !!project.githubRepo,
-    })
-  } catch (error) {
-    console.error('Error getting GitHub repository info:', error)
-    return NextResponse.json({ error: 'Failed to get GitHub repository info' }, { status: 500 })
-  }
-}
diff --git a/app/icon.svg b/app/icon.svg
index ff95846..b811003 100644
--- a/app/icon.svg
+++ b/app/icon.svg
@@ -1,21 +1,24 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title2 desc2">
-  <title id="title2">FullStack Agent — Full-Bleed App Icon</title>
-  <desc id="desc2">Rounded-square tile filled by a geometric comet for maximum size at small favicon scales.</desc>
+  <title id="title2">FullStack Agent — App Icon</title>
+  <desc id="desc2">Rounded square container with a geometric comet mark.</desc>
   <defs>
-    <linearGradient id="fs-grad2" x1="0" y1="0" x2="1" y2="1">
+    <linearGradient id="fs-grad" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0"  stop-color="var(--fs-primary, #FF7A1A)"/>
       <stop offset="1"  stop-color="var(--fs-secondary, #FF3D81)"/>
     </linearGradient>
   </defs>
 
-  <rect x="0" y="0" width="256" height="256" rx="56" fill="var(--fs-bg, #0B0B0F)"/>
-  <g transform="translate(128,128) rotate(-30) translate(-128,-128) scale(1.1) translate(-12,-12)">
-    <rect x="44" y="124" width="128" height="20" rx="10" fill="url(#fs-grad2)"/>
-    <rect x="62" y="96"  width="114" height="18" rx="9"  fill="url(#fs-grad2)" opacity="0.9"/>
-    <rect x="78" y="70"  width="96"  height="16" rx="8"  fill="url(#fs-grad2)" opacity="0.75"/>
-    <circle cx="210" cy="132" r="40" fill="url(#fs-grad2)"/>
-    <circle cx="222" cy="120" r="10" fill="#ffffff" opacity="0.9"/>
-    <path d="M208 110 L234 132 L218 152 Z" fill="#ffffff" opacity="0.12"/>
+  <rect x="12" y="12" width="232" height="232" rx="56"
+        fill="var(--fs-bg, #0B0B0F)"/>
+  <rect x="12" y="12" width="232" height="232" rx="56"
+        fill="none" stroke="white" stroke-opacity="0.06"/>
+
+  <g transform="translate(128,128) rotate(-30) translate(-128,-128)">
+    <rect x="44" y="124" width="116" height="18" rx="9" fill="url(#fs-grad)"/>
+    <rect x="60" y="98"  width="96"  height="16" rx="8" fill="url(#fs-grad)" opacity="0.85"/>
+    <rect x="74" y="74"  width="78"  height="14" rx="7" fill="url(#fs-grad)" opacity="0.7"/>
+    <circle cx="188" cy="132" r="34" fill="url(#fs-grad)"/>
+    <circle cx="198" cy="122" r="9" fill="#fff" opacity="0.85"/>
+    <path d="M186 114 L208 134 L194 150 Z" fill="#fff" opacity="0.12"/>
   </g>
 </svg>
diff --git a/components/dialog/settings-dialog.tsx b/components/dialog/settings-dialog.tsx
index 7892b62..568c355 100644
--- a/components/dialog/settings-dialog.tsx
+++ b/components/dialog/settings-dialog.tsx
@@ -4,6 +4,16 @@ import { useEffect, useState } from 'react';
 import { Code, Database, Save, Terminal } from 'lucide-react';
 import { toast } from 'sonner';
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
@@ -76,6 +86,11 @@ export default function SettingsDialog({
   const [isAnthropicLoading, setIsAnthropicLoading] = useState(false);
   const [isAnthropicInitialLoading, setIsAnthropicInitialLoading] = useState(true);
 
+  // Confirmation dialog state
+  const [showSystemPromptConfirm, setShowSystemPromptConfirm] = useState(false);
+  const [showSystemPromptResetConfirm, setShowSystemPromptResetConfirm] = useState(false);
+  const [showAnthropicConfirm, setShowAnthropicConfirm] = useState(false);
+
   // Load data when dialog opens
   useEffect(() => {
     if (open) {
@@ -145,7 +160,12 @@ export default function SettingsDialog({
     }
   };
 
-  const handleSaveSystemPrompt = async () => {
+  const handleSaveSystemPrompt = () => {
+    setShowSystemPromptConfirm(true);
+  };
+
+  const handleConfirmSaveSystemPrompt = async () => {
+    setShowSystemPromptConfirm(false);
     setIsSystemPromptLoading(true);
     try {
       await fetchClient.POST('/api/user/config/system-prompt', {
@@ -193,12 +213,16 @@ export default function SettingsDialog({
     }
   };
 
-  const handleSaveAnthropicConfig = async () => {
+  const handleSaveAnthropicConfig = () => {
     if (!anthropicApiKey.trim() || !anthropicApiBaseUrl.trim()) {
       toast.error('Both API key and base URL are required');
       return;
     }
+    setShowAnthropicConfirm(true);
+  };
 
+  const handleConfirmSaveAnthropicConfig = async () => {
+    setShowAnthropicConfirm(false);
     setIsAnthropicLoading(true);
     try {
       await fetchClient.POST('/api/user/config/anthropic', {
@@ -220,6 +244,11 @@ export default function SettingsDialog({
   };
 
   const handleResetSystemPrompt = () => {
+    setShowSystemPromptResetConfirm(true);
+  };
+
+  const handleConfirmResetSystemPrompt = () => {
+    setShowSystemPromptResetConfirm(false);
     setSystemPrompt(DEFAULT_SYSTEM_PROMPT);
     toast.success('Reset to default system prompt');
   };
@@ -323,7 +352,10 @@ export default function SettingsDialog({
                 <TabsContent value="kubeconfig" className="mt-0 h-full flex flex-col">
                   <div className="space-y-4 pb-4 flex-1 flex flex-col min-h-0">
                     <div className="space-y-2 shrink-0">
-                      <Label htmlFor="kubeconfig-dialog" className="text-foreground text-sm font-medium">
+                      <Label
+                        htmlFor="kubeconfig-dialog"
+                        className="text-foreground text-sm font-medium"
+                      >
                         Kubeconfig Content
                       </Label>
                       {kubeconfigNamespace && (
@@ -474,7 +506,88 @@ export default function SettingsDialog({
             </div>
           </Tabs>
         </div>
+
+        {/* System Prompt Confirmation Dialog */}
+        <AlertDialog open={showSystemPromptConfirm} onOpenChange={setShowSystemPromptConfirm}>
+          <AlertDialogContent className="bg-card border-border text-foreground">
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-foreground">
+                Confirm Save System Prompt
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-muted-foreground">
+                These changes won&apos;t take effect until you manually restart the application.
+                Save now?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel className="border-border text-muted-foreground hover:text-foreground hover:bg-accent">
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleConfirmSaveSystemPrompt}
+                className="bg-primary hover:bg-primary/90 text-primary-foreground"
+              >
+                Save
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* System Prompt Reset Confirmation Dialog */}
+        <AlertDialog
+          open={showSystemPromptResetConfirm}
+          onOpenChange={setShowSystemPromptResetConfirm}
+        >
+          <AlertDialogContent className="bg-card border-border text-foreground">
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-foreground">
+                Reset System Prompt to Default
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-muted-foreground">
+                This will reset the system prompt to the default template. You&apos;ll need to
+                manually restart the application for this change to take effect. Continue?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel className="border-border text-muted-foreground hover:text-foreground hover:bg-accent">
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleConfirmResetSystemPrompt}
+                className="bg-primary hover:bg-primary/90 text-primary-foreground"
+              >
+                Reset to Default
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        {/* Anthropic Config Confirmation Dialog */}
+        <AlertDialog open={showAnthropicConfirm} onOpenChange={setShowAnthropicConfirm}>
+          <AlertDialogContent className="bg-card border-border text-foreground">
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-foreground">
+                Confirm Save Anthropic Configuration
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-muted-foreground">
+                These changes won&apos;t take effect until you manually restart the application.
+                Save now?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel className="border-border text-muted-foreground hover:text-foreground hover:bg-accent">
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleConfirmSaveAnthropicConfig}
+                className="bg-primary hover:bg-primary/90 text-primary-foreground"
+              >
+                Save Configuration
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </DialogContent>
     </Dialog>
   );
-}
\ No newline at end of file
+}
diff --git a/components/features/projectList/ProjectCard.tsx b/components/features/projectList/ProjectCard.tsx
index 88a8cbb..b0e3d47 100644
--- a/components/features/projectList/ProjectCard.tsx
+++ b/components/features/projectList/ProjectCard.tsx
@@ -28,6 +28,7 @@ const ProjectCard = memo(({ project }: ProjectCardProps) => {
               project.status === 'STARTING' && 'bg-yellow-600 dark:bg-yellow-500 animate-pulse',
               project.status === 'STOPPING' && 'bg-yellow-600 dark:bg-yellow-500 animate-pulse',
               project.status === 'CREATING' && 'bg-blue-600 dark:bg-blue-500 animate-pulse',
+              project.status === 'UPDATING' && 'bg-cyan-600 dark:bg-cyan-500 animate-pulse',
               project.status === 'TERMINATING' && 'bg-red-600 dark:bg-red-500 animate-pulse',
               project.status === 'ERROR' && 'bg-destructive',
               project.status === 'PARTIAL' && 'bg-orange-600 dark:bg-orange-500'
diff --git a/components/terminal/terminal-container.tsx b/components/terminal/terminal-container.tsx
index fa25fe7..73b9586 100644
--- a/components/terminal/terminal-container.tsx
+++ b/components/terminal/terminal-container.tsx
@@ -2,7 +2,8 @@
  * TerminalContainer Component
  *
  * Main container that combines toolbar and display
- * Manages tab state and terminal authentication
+ * Manages tab state and renders separate terminal instances for each tab
+ * Each tab gets its own iframe with independent WebSocket connection
  */
 
 'use client';
@@ -31,6 +32,7 @@ export interface TerminalContainerProps {
 
 /**
  * Terminal container with toolbar and display
+ * Renders separate terminal instances for each tab to ensure independent WebSocket connections
  */
 export function TerminalContainer({ project, sandbox }: TerminalContainerProps) {
   // Tab management
@@ -39,10 +41,10 @@ export function TerminalContainer({ project, sandbox }: TerminalContainerProps)
 
   // Tab operations
   const handleTabAdd = () => {
-    const newId = (tabs.length + 1).toString();
+    const newId = Date.now().toString(); // Use timestamp for unique ID
     const newTab: Tab = {
       id: newId,
-      name: `Terminal ${newId}`,
+      name: `Terminal ${tabs.length + 1}`,
     };
     setTabs([...tabs, newTab]);
     setActiveTabId(newId);
@@ -76,9 +78,24 @@ export function TerminalContainer({ project, sandbox }: TerminalContainerProps)
         onTabAdd={handleTabAdd}
       />
 
-      {/* Terminal Display */}
-      <div className="flex-1 bg-black">
-        <TerminalDisplay ttydUrl={sandbox?.ttydUrl} status={project.status} />
+      {/* Terminal Displays - render all tabs but only show active one */}
+      <div className="flex-1 bg-black relative">
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className="absolute inset-0"
+            style={{
+              display: tab.id === activeTabId ? 'block' : 'none',
+            }}
+          >
+            <TerminalDisplay
+              key={tab.id}
+              ttydUrl={sandbox?.ttydUrl}
+              status={project.status}
+              tabId={tab.id}
+            />
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/components/terminal/terminal-display.tsx b/components/terminal/terminal-display.tsx
index 6380795..b1d09ee 100644
--- a/components/terminal/terminal-display.tsx
+++ b/components/terminal/terminal-display.tsx
@@ -17,15 +17,18 @@ export interface TerminalDisplayProps {
   ttydUrl?: string | null;
   /** Sandbox status */
   status: string;
+  /** Unique tab ID for this terminal instance */
+  tabId: string;
 }
 
 /**
  * Display terminal iframe or status message
+ * Each terminal tab gets its own iframe with unique key to ensure separate WebSocket connections
  */
-export function TerminalDisplay({ ttydUrl, status }: TerminalDisplayProps) {
+export function TerminalDisplay({ ttydUrl, status, tabId }: TerminalDisplayProps) {
   const [iframeLoaded, setIframeLoaded] = useState(false);
 
-  // Show terminal iframe if running and URL is available
+  // Only show terminal iframe if status is RUNNING and URL is available
   if (status === 'RUNNING' && ttydUrl) {
     return (
       <div className="h-full w-full bg-[#1e1e1e] flex flex-col relative">
@@ -39,8 +42,9 @@ export function TerminalDisplay({ ttydUrl, status }: TerminalDisplayProps) {
           </div>
         )}
 
-        {/* Terminal iframe */}
+        {/* Terminal iframe - unique key per tab ensures separate WebSocket connection */}
         <iframe
+          key={`terminal-${tabId}`}
           src={ttydUrl}
           className="flex-1 w-full bg-[#1e1e1e]"
           style={{
@@ -48,7 +52,7 @@ export function TerminalDisplay({ ttydUrl, status }: TerminalDisplayProps) {
             minHeight: '100%',
             height: '100%',
           }}
-          title="Terminal"
+          title={`Terminal ${tabId}`}
           onLoad={() => setIframeLoaded(true)}
           allow="clipboard-read; clipboard-write"
         />
@@ -75,6 +79,8 @@ function renderStatusIcon(status: string) {
     case 'CREATING':
     case 'STARTING':
       return <Spinner className="h-5 w-5 text-[#3794ff]" />;
+    case 'UPDATING':
+      return <Spinner className="h-5 w-5 text-[#3794ff]" />;
     case 'STOPPING':
       return <Spinner className="h-5 w-5 text-[#f48771]" />;
     case 'TERMINATING':
@@ -98,6 +104,8 @@ function getStatusMessage(status: string): string {
       return 'Creating sandbox...';
     case 'STARTING':
       return 'Starting sandbox...';
+    case 'UPDATING':
+      return 'Updating sandbox configuration...';
     case 'STOPPED':
       return 'Sandbox stopped';
     case 'STOPPING':
diff --git a/components/terminal/terminal-toolbar.tsx b/components/terminal/terminal-toolbar.tsx
index 0090fd0..40690c1 100644
--- a/components/terminal/terminal-toolbar.tsx
+++ b/components/terminal/terminal-toolbar.tsx
@@ -164,6 +164,7 @@ export function TerminalToolbar({
                 project.status === 'STARTING' && 'bg-yellow-500 animate-pulse',
                 project.status === 'STOPPING' && 'bg-yellow-500 animate-pulse',
                 project.status === 'CREATING' && 'bg-blue-500 animate-pulse',
+                project.status === 'UPDATING' && 'bg-cyan-500 animate-pulse',
                 project.status === 'TERMINATING' && 'bg-red-500 animate-pulse',
                 project.status === 'ERROR' && 'bg-red-500',
                 project.status === 'PARTIAL' && 'bg-orange-500'
diff --git a/lib/events/database/databaseListener.ts b/lib/events/database/databaseListener.ts
index ef534a8..72ecc2d 100644
--- a/lib/events/database/databaseListener.ts
+++ b/lib/events/database/databaseListener.ts
@@ -59,7 +59,7 @@ async function handleCreateDatabase(payload: DatabaseEventPayload): Promise<void
     // Update status to ERROR (with row-level lock)
     await updateDatabaseStatus(database.id, 'ERROR')
     await projectStatusReconcile(project.id)
-    throw error
+    // Don't throw - let reconciliation continue for other databases
   }
 }
 
@@ -146,7 +146,7 @@ async function handleStartDatabase(payload: DatabaseEventPayload): Promise<void>
     await updateDatabaseStatus(database.id, 'ERROR')
     await projectStatusReconcile(project.id)
 
-    throw error
+    // Don't throw - let reconciliation continue for other databases
   }
 }
 
@@ -206,7 +206,7 @@ async function handleStopDatabase(payload: DatabaseEventPayload): Promise<void>
     await updateDatabaseStatus(database.id, 'ERROR')
     await projectStatusReconcile(project.id)
 
-    throw error
+    // Don't throw - let reconciliation continue for other databases
   }
 }
 
@@ -268,7 +268,7 @@ async function handleDeleteDatabase(payload: DatabaseEventPayload): Promise<void
     // Update status to ERROR (with row-level lock)
     await updateDatabaseStatus(database.id, 'ERROR')
     await projectStatusReconcile(project.id)
-    throw error
+    // Don't throw - let reconciliation continue for other databases
   }
 }
 
@@ -284,7 +284,7 @@ export function registerDatabaseListeners(): void {
   on(Events.StopDatabase, handleStopDatabase)
   on(Events.DeleteDatabase, handleDeleteDatabase)
 
-  logger.info(' Database event listeners registered')
+  logger.info('Database event listeners registered')
 }
 
 // Auto-register listeners when module is imported
diff --git a/lib/events/sandbox/bus.ts b/lib/events/sandbox/bus.ts
index e25df95..37e926f 100644
--- a/lib/events/sandbox/bus.ts
+++ b/lib/events/sandbox/bus.ts
@@ -8,6 +8,7 @@ export const Events = {
   StartSandbox: 'sandbox.start',
   StopSandbox: 'sandbox.stop',
   DeleteSandbox: 'sandbox.delete',
+  UpdateSandbox: 'sandbox.update',
 } as const
 
 export type SandboxEventPayload = {
@@ -21,6 +22,7 @@ export type BusEvents = {
   [Events.StartSandbox]: SandboxEventPayload
   [Events.StopSandbox]: SandboxEventPayload
   [Events.DeleteSandbox]: SandboxEventPayload
+  [Events.UpdateSandbox]: SandboxEventPayload
 }
 
 export function on<E extends keyof BusEvents>(
diff --git a/lib/events/sandbox/sandboxListener.ts b/lib/events/sandbox/sandboxListener.ts
index 9673772..8519994 100644
--- a/lib/events/sandbox/sandboxListener.ts
+++ b/lib/events/sandbox/sandboxListener.ts
@@ -70,7 +70,7 @@ async function handleCreateSandbox(payload: SandboxEventPayload): Promise<void>
     await updateSandboxStatus(sandbox.id, 'ERROR')
     await projectStatusReconcile(project.id)
 
-    throw error
+    // Don't throw - let reconciliation continue for other sandboxes
   }
 }
 
@@ -122,7 +122,8 @@ async function handleStartSandbox(payload: SandboxEventPayload): Promise<void> {
     // Update status to ERROR
     await updateSandboxStatus(sandbox.id, 'ERROR')
     await projectStatusReconcile(project.id)
-    throw error
+
+    // Don't throw - let reconciliation continue for other sandboxes
   }
 }
 
@@ -175,7 +176,7 @@ async function handleStopSandbox(payload: SandboxEventPayload): Promise<void> {
     await updateSandboxStatus(sandbox.id, 'ERROR')
     await projectStatusReconcile(project.id)
 
-    throw error
+    // Don't throw - let reconciliation continue for other sandboxes
   }
 }
 
@@ -233,7 +234,96 @@ async function handleDeleteSandbox(payload: SandboxEventPayload): Promise<void>
     await updateSandboxStatus(sandbox.id, 'ERROR')
     await projectStatusReconcile(project.id)
 
-    throw error
+    // Don't throw - let reconciliation continue for other sandboxes
+  }
+}
+
+/**
+ * Handle sandbox update (environment variables)
+ * Only processes UPDATING sandboxes
+ * Updates environment variables, then monitors status
+ * Status transitions: UPDATING → STARTING (pod restart) → RUNNING
+ */
+async function handleUpdateSandbox(payload: SandboxEventPayload): Promise<void> {
+  const { user, project, sandbox } = payload
+
+  // Only process UPDATING sandboxes
+  if (sandbox.status !== 'UPDATING') {
+    logger.warn(
+      `Skipping update for sandbox ${sandbox.id} - status is ${sandbox.status}, expected UPDATING`
+    )
+    return
+  }
+
+  logger.info(`Updating sandbox ${sandbox.id} (${sandbox.name}) for project ${project.name}`)
+
+  try {
+    // Get Kubernetes service for user
+    const k8sService = await getK8sServiceForUser(user.id)
+
+    // Load project environment variables
+    const projectEnvVars = await getProjectEnvironments(project.id)
+
+    // Load anthropic variables for sandbox
+    const anthropicEnvVars = await loadEnvVarsForSandbox(user.id)
+
+    // Merge environment variables: project env vars first, then anthropic (anthropic can override)
+    const mergedEnvVars = {
+      ...projectEnvVars,
+      ...anthropicEnvVars,
+    }
+
+    // Update sandbox environment variables
+    const updated = await k8sService.updateSandboxEnvVars(
+      sandbox.k8sNamespace,
+      sandbox.sandboxName,
+      mergedEnvVars
+    )
+
+    if (!updated) {
+      // StatefulSet not found - sandbox may have been deleted
+      logger.error(`Sandbox ${sandbox.id} StatefulSet not found in Kubernetes`)
+      await updateSandboxStatus(sandbox.id, 'ERROR')
+      await projectStatusReconcile(project.id)
+      return
+    }
+
+    logger.info(`Sandbox ${sandbox.id} environment variables update command executed`)
+
+    // Get current status from Kubernetes
+    // Note: After env var update, Pod will restart, so status may be STARTING
+    const k8sStatus = await k8sService.getSandboxStatus(sandbox.k8sNamespace, sandbox.sandboxName)
+
+    logger.info(`Sandbox ${sandbox.id} K8s status after update: ${k8sStatus}`)
+
+    if (k8sStatus === 'RUNNING') {
+      // Pod is already running (either env vars didn't change, or restart completed quickly)
+      await updateSandboxStatus(sandbox.id, 'RUNNING')
+      await projectStatusReconcile(project.id)
+      logger.info(`Sandbox ${sandbox.id} is now RUNNING`)
+    } else if (k8sStatus === 'STARTING') {
+      // Pod is restarting due to env var changes - change status to STARTING
+      await updateSandboxStatus(sandbox.id, 'STARTING')
+      await projectStatusReconcile(project.id)
+      logger.info(`Sandbox ${sandbox.id} is STARTING (pod restarting after env var update)`)
+    } else if (k8sStatus === 'ERROR' || k8sStatus === 'TERMINATED') {
+      // Unexpected error or deletion
+      await updateSandboxStatus(sandbox.id, k8sStatus)
+      await projectStatusReconcile(project.id)
+      logger.error(`Sandbox ${sandbox.id} in unexpected state: ${k8sStatus}`)
+    } else {
+      // Other transient states (STOPPING, STOPPED) - keep monitoring
+      logger.info(`Sandbox ${sandbox.id} in transient state: ${k8sStatus}, keeping UPDATING status`)
+      // Keep status as UPDATING, reconciliation will check again in next cycle
+    }
+  } catch (error) {
+    logger.error(`Failed to update sandbox ${sandbox.id}: ${error}`)
+
+    // Update status to ERROR
+    await updateSandboxStatus(sandbox.id, 'ERROR')
+    await projectStatusReconcile(project.id)
+
+    // Don't throw - let reconciliation continue for other sandboxes
   }
 }
 
@@ -243,7 +333,7 @@ async function handleDeleteSandbox(payload: SandboxEventPayload): Promise<void>
  */
 export function registerSandboxListeners(): void {
   logger.info('Registering sandbox event listeners')
-
+  on(Events.UpdateSandbox, handleUpdateSandbox)
   on(Events.CreateSandbox, handleCreateSandbox)
   on(Events.StartSandbox, handleStartSandbox)
   on(Events.StopSandbox, handleStopSandbox)
diff --git a/lib/jobs/sandbox/sandboxReconcile.ts b/lib/jobs/sandbox/sandboxReconcile.ts
index 428cb10..9f70eea 100644
--- a/lib/jobs/sandbox/sandboxReconcile.ts
+++ b/lib/jobs/sandbox/sandboxReconcile.ts
@@ -84,6 +84,12 @@ async function reconcileSandboxes() {
           processedCount++
           break
 
+        case 'UPDATING':
+          logger.info(`Emitting UpdateSandbox event for sandbox ${sandbox.id}`)
+          emit(Events.UpdateSandbox, payload)
+          processedCount++
+          break
+
         default:
           logger.warn(`Unknown sandbox status: ${sandbox.status}`)
       }
@@ -95,4 +101,4 @@ async function reconcileSandboxes() {
   logger.info(`Reconcile cycle completed: ${processedCount} sandboxes processed`)
 }
 
-export { LOCK_DURATION_SECONDS, MAX_SANDBOXES_PER_CYCLE }
\ No newline at end of file
+export { LOCK_DURATION_SECONDS, MAX_SANDBOXES_PER_CYCLE }
diff --git a/lib/k8s/kubernetes.ts b/lib/k8s/kubernetes.ts
index b9083ab..afb7f67 100644
--- a/lib/k8s/kubernetes.ts
+++ b/lib/k8s/kubernetes.ts
@@ -233,26 +233,19 @@ export class KubernetesService {
   /**
    * Update Sandbox environment variables
    *
-   * @param projectName - Project name
    * @param namespace - Kubernetes namespace
    * @param sandboxName - Sandbox resource name
    * @param envVars - Environment variables to update
    * @returns Success status
    */
   async updateSandboxEnvVars(
-    projectName: string,
     namespace: string,
     sandboxName: string,
     envVars: Record<string, string>
   ): Promise<boolean> {
     namespace = namespace || this.defaultNamespace
 
-    return await this.sandboxManager.updateStatefulSetEnvVars(
-      projectName,
-      namespace,
-      sandboxName,
-      envVars
-    )
+    return await this.sandboxManager.updateStatefulSetEnvVars(namespace, sandboxName, envVars)
   }
 
   // ==================== Utility Methods ====================
diff --git a/lib/k8s/sandbox-manager.ts b/lib/k8s/sandbox-manager.ts
index 680f066..4a206f1 100644
--- a/lib/k8s/sandbox-manager.ts
+++ b/lib/k8s/sandbox-manager.ts
@@ -390,17 +390,21 @@ export class SandboxManager {
     }
   }
 
-  // TODO: This method is not idempotent - it will create a new StatefulSet if it doesn't exist (this method should be idempotent)
   /**
-   * Update StatefulSet environment variables
+   * Update StatefulSet environment variables (idempotent)
+   *
+   * This method ensures environment variables are up-to-date:
+   * 1. Returns false if StatefulSet doesn't exist
+   * 2. Returns true without changes if env vars are already correct
+   * 3. Updates StatefulSet only if there are differences
    *
    * @param projectName - Project name
    * @param namespace - Kubernetes namespace
    * @param sandboxName - Sandbox name
-   * @param envVars - Environment variables
+   * @param envVars - Environment variables to set
+   * @returns true if successful or no changes needed, false if StatefulSet not found
    */
   async updateStatefulSetEnvVars(
-    projectName: string,
     namespace: string,
     sandboxName: string,
     envVars: Record<string, string>
@@ -408,32 +412,74 @@ export class SandboxManager {
     logger.info(`Updating StatefulSet env vars: ${sandboxName}`)
 
     try {
-      // Find StatefulSet by exact match
+      // Step 1: Find StatefulSet by exact match
       const statefulSet = await this.getStatefulSet(sandboxName, namespace)
 
       if (!statefulSet) {
-        throw new Error(`StatefulSet not found: ${sandboxName}`)
+        // StatefulSet doesn't exist - return false
+        logger.warn(`StatefulSet not found: ${sandboxName}`)
+        return false
+      }
+
+      // Step 2: Get current environment variables from the main container
+      const mainContainer = statefulSet.spec!.template.spec!.containers.find(
+        (container) => container.name === sandboxName
+      )
+
+      if (!mainContainer) {
+        logger.error(`Main container not found in StatefulSet: ${sandboxName}`)
+        return false
+      }
+
+      // Convert current env array to map for comparison
+      const currentEnvMap: Record<string, string> = {}
+      if (mainContainer.env) {
+        for (const envVar of mainContainer.env) {
+          if (envVar.name && envVar.value !== undefined) {
+            currentEnvMap[envVar.name] = envVar.value
+          }
+        }
+      }
+
+      // Step 3: Check if environment variables have changed
+      let hasChanges = false
+
+      // Check if all desired envVars are present with correct values
+      for (const [key, value] of Object.entries(envVars)) {
+        if (currentEnvMap[key] !== String(value)) {
+          hasChanges = true
+          break
+        }
       }
 
-      // Merge all environment variables
-      const allEnvVars: Record<string, string> = {
+      // Check if there are any extra env vars that should be removed (optional)
+      // For now, we only add/update, not remove, so we skip this check
+
+      if (!hasChanges) {
+        // No changes needed - environment variables are already correct
+        logger.info(`StatefulSet env vars unchanged: ${sandboxName}`)
+        return true
+      }
+
+      // Step 4: Merge environment variables (preserve existing, add/update new ones)
+      const mergedEnvMap: Record<string, string> = {
+        ...currentEnvMap,
         ...envVars,
-        PROJECT_NAME: projectName,
-        NODE_ENV: 'development',
-        TTYD_PORT: '7681',
-        TTYD_INTERFACE: '0.0.0.0',
       }
 
-      // Update container environment variables
+      // Convert merged map back to env array
+      const updatedEnv = Object.entries(mergedEnvMap).map(([key, value]) => ({
+        name: key,
+        value: String(value),
+      }))
+
+      // Step 5: Update container environment variables
       const containers = statefulSet.spec!.template.spec!.containers.map((container) => {
         // Match main container (name equals sandboxName)
         if (container.name === sandboxName) {
           return {
             ...container,
-            env: Object.entries(allEnvVars).map(([key, value]) => ({
-              name: key,
-              value: String(value),
-            })),
+            env: updatedEnv,
           }
         }
         return container
@@ -457,13 +503,14 @@ export class SandboxManager {
         spec: updatedSpec,
       }
 
+      // Step 6: Apply changes to Kubernetes
       await this.k8sAppsApi.replaceNamespacedStatefulSet({
         name: sandboxName,
         namespace,
         body: updatedStatefulSet,
       })
 
-      logger.info(`StatefulSet env vars updated: ${sandboxName}`)
+      logger.info(`StatefulSet env vars updated successfully: ${sandboxName}`)
       return true
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : String(error)
diff --git a/lib/repo/sandbox.ts b/lib/repo/sandbox.ts
index 24c716b..2c7cddd 100644
--- a/lib/repo/sandbox.ts
+++ b/lib/repo/sandbox.ts
@@ -81,7 +81,7 @@ export async function acquireAndLockSandboxes(
         WHERE "id" IN (
           SELECT "id"
           FROM "Sandbox"
-          WHERE "status" IN ('CREATING', 'STARTING', 'STOPPING', 'TERMINATING')
+          WHERE "status" IN ('CREATING', 'STARTING', 'STOPPING', 'TERMINATING','UPDATING')
             AND ("lockedUntil" IS NULL OR "lockedUntil" <= ${now})
           ORDER BY "updatedAt" ASC
           LIMIT ${limit}
@@ -167,9 +167,7 @@ export async function updateSandboxStatus(
       return false
     }
 
-    logger.info(
-      `Sandbox ${sandboxId} status updated: ${result.previousStatus} -> ${newStatus}`
-    )
+    logger.info(`Sandbox ${sandboxId} status updated: ${result.previousStatus} -> ${newStatus}`)
     return true
   } catch (error) {
     logger.error(`Failed to update sandbox ${sandboxId} status: ${error}`)
@@ -227,4 +225,4 @@ export async function deleteSandbox(sandboxId: string): Promise<Sandbox> {
 }
 
 export { LOCK_DURATION_SECONDS }
-export type { SandboxWithRelations }
\ No newline at end of file
+export type { SandboxWithRelations }
diff --git a/lib/util/action.ts b/lib/util/action.ts
index ba9b037..f9e51f6 100644
--- a/lib/util/action.ts
+++ b/lib/util/action.ts
@@ -19,7 +19,7 @@ export type ProjectAction = 'START' | 'STOP' | 'DELETE'
 /**
  * Available actions for resources (Database, Sandbox)
  */
-export type ResourceAction = 'START' | 'STOP' | 'DELETE'
+export type ResourceAction = 'START' | 'STOP' | 'DELETE' | 'UPDATE'
 
 /**
  * Project with resources (minimal fields needed for action checks)
@@ -53,6 +53,7 @@ export interface ActionCheckResult {
  * - STOPPING: Can start or delete
  * - ERROR: Can start, stop, or delete
  * - CREATING: Can only delete
+ * - UPDATING: Can only delete
  * - TERMINATING: No actions allowed (deletion in progress)
  * - TERMINATED: No actions allowed (already deleted)
  */
@@ -64,6 +65,7 @@ export const PROJECT_ALLOWED_ACTIONS: Record<ProjectStatus, ProjectAction[]> = {
   STOPPING: ['START', 'DELETE'],
   ERROR: ['START', 'STOP', 'DELETE'],
   CREATING: ['DELETE'],
+  UPDATING: ['DELETE'],
   TERMINATING: [],
   TERMINATED: [],
 }
@@ -78,20 +80,22 @@ export const PROJECT_ALLOWED_ACTIONS: Record<ProjectStatus, ProjectAction[]> = {
  * Rules:
  * - CREATING: Can only delete
  * - STARTING: Can stop or delete
- * - RUNNING: Can stop or delete
+ * - RUNNING: Can stop, delete, or update (change environment variables)
  * - STOPPING: Can start or delete
  * - STOPPED: Can start or delete
  * - ERROR: Can start, stop, or delete
+ * - UPDATING: Can only delete
  * - TERMINATING: No actions allowed (deletion in progress)
  * - TERMINATED: No actions allowed (already deleted)
  */
 export const RESOURCE_ALLOWED_ACTIONS: Record<ResourceStatus, ResourceAction[]> = {
   CREATING: ['DELETE'],
   STARTING: ['STOP', 'DELETE'],
-  RUNNING: ['STOP', 'DELETE'],
+  RUNNING: ['STOP', 'DELETE', 'UPDATE'],
   STOPPING: ['START', 'DELETE'],
   STOPPED: ['START', 'DELETE'],
   ERROR: ['START', 'STOP', 'DELETE'],
+  UPDATING: ['DELETE'],
   TERMINATING: [],
   TERMINATED: [],
 }
@@ -112,27 +116,46 @@ function isProjectActionAllowed(status: ProjectStatus, action: ProjectAction): b
 }
 
 /**
- * Check if a project has any TERMINATING or TERMINATED resources (internal helper)
+ * Check if a project has any resources in transition states that block START/STOP
  *
  * @param project - Project with databases and sandboxes
- * @returns true if at least one resource is TERMINATING or TERMINATED
+ * @returns Object with blocking status information
  */
-function hasTerminatingOrTerminatedResources(project: ProjectWithResources): boolean {
+function hasBlockingResourceStates(project: ProjectWithResources): {
+  hasBlocking: boolean
+  blockingStates: ResourceStatus[]
+} {
   const allStatuses = [
     ...project.databases.map((db) => db.status),
     ...project.sandboxes.map((sb) => sb.status),
   ]
 
-  return allStatuses.some((status) => status === 'TERMINATING' || status === 'TERMINATED')
+  // States that block START/STOP operations
+  const blockingStates = allStatuses.filter(
+    (status) =>
+      status === 'TERMINATING' ||
+      status === 'TERMINATED' ||
+      status === 'UPDATING' ||
+      status === 'CREATING'
+  )
+
+  return {
+    hasBlocking: blockingStates.length > 0,
+    blockingStates: [...new Set(blockingStates)], // Remove duplicates
+  }
 }
 
 /**
  * Comprehensive check for project actions (with resource validation)
  *
- * Special rules:
- * - START/STOP: Not allowed if any resource is TERMINATING or TERMINATED
- *   (must wait for all resources to be fully deleted)
- * - DELETE: Always allowed if status permits (deletion can happen anytime)
+ * Special rules for START/STOP operations:
+ * - Not allowed if any resource is in TERMINATING state (deletion in progress)
+ * - Not allowed if any resource is in TERMINATED state (already deleted)
+ * - Not allowed if any resource is in UPDATING state (configuration changes in progress)
+ * - Not allowed if any resource is in CREATING state (initial creation in progress)
+ *
+ * Rationale: These transition states require completion before START/STOP can be safely executed.
+ * DELETE is always allowed (if status permits) since deletion can happen anytime.
  *
  * @param project - Project with resources
  * @param action - Action to check
@@ -143,7 +166,7 @@ function hasTerminatingOrTerminatedResources(project: ProjectWithResources): boo
  * const result = checkProjectAction(project, 'START')
  * if (!result.allowed) {
  *   console.log(result.reason)
- *   // "Cannot start project: some resources are being deleted"
+ *   // "Cannot start project: some resources are in UPDATING state..."
  * }
  * ```
  */
@@ -159,12 +182,15 @@ export function checkProjectAction(
     }
   }
 
-  // Special check for START/STOP: cannot execute if resources are TERMINATING or TERMINATED
+  // Special check for START/STOP: cannot execute if resources are in blocking states
   if (action === 'START' || action === 'STOP') {
-    if (hasTerminatingOrTerminatedResources(project)) {
+    const { hasBlocking, blockingStates } = hasBlockingResourceStates(project)
+
+    if (hasBlocking) {
+      const statesStr = blockingStates.join(', ')
       return {
         allowed: false,
-        reason: `Cannot ${action.toLowerCase()} project: some resources are being deleted or already terminated. Please wait for cleanup to complete.`,
+        reason: `Cannot ${action.toLowerCase()} project: some resources are in ${statesStr} state. Please wait for these operations to complete before starting or stopping the project.`,
       }
     }
   }
@@ -273,3 +299,10 @@ export function canStopResource(status: ResourceStatus): boolean {
 export function canDeleteResource(status: ResourceStatus): boolean {
   return isResourceActionAllowed(status, 'DELETE')
 }
+
+/**
+ * Check if a resource can be updated
+ */
+export function canUpdateResource(status: ResourceStatus): boolean {
+  return isResourceActionAllowed(status, 'UPDATE')
+}
diff --git a/lib/util/projectStatus.ts b/lib/util/projectStatus.ts
index dccdee1..511870c 100644
--- a/lib/util/projectStatus.ts
+++ b/lib/util/projectStatus.ts
@@ -6,12 +6,13 @@ import type { ProjectStatus, ResourceStatus } from '@prisma/client'
  * Rules (priority order):
  * 1. ERROR: At least one resource has ERROR status
  * 2. CREATING: At least one resource has CREATING status
- * 3. Pure states: All resources have the same status
- * 4. Transition states:
+ * 3. UPDATING: At least one resource has UPDATING status
+ * 4. Pure states: All resources have the same status
+ * 5. Transition states:
  *    - STARTING: All resources ∈ {RUNNING, STARTING}
  *    - STOPPING: All resources ∈ {STOPPED, STOPPING}
  *    - TERMINATING: All resources ∈ {TERMINATED, TERMINATING}
- * 5. PARTIAL: Inconsistent mixed states
+ * 6. PARTIAL: Inconsistent mixed states
  *
  * @param resourceStatuses - Array of resource statuses
  * @returns Aggregated project status
@@ -32,17 +33,22 @@ export function aggregateProjectStatus(resourceStatuses: ResourceStatus[]): Proj
     return 'CREATING'
   }
 
+  // Rule 3: Check for UPDATING - at least one resource is being updated
+  if (resourceStatuses.some((status) => status === 'UPDATING')) {
+    return 'UPDATING'
+  }
+
   // Get unique statuses
   const uniqueStatuses = new Set(resourceStatuses)
 
-  // Rule 3: Pure states - all resources have the same status
+  // Rule 4: Pure states - all resources have the same status
   if (uniqueStatuses.size === 1) {
     const status = resourceStatuses[0]
     // Map resource status to project status (they're the same for these states)
     return status as ProjectStatus
   }
 
-  // Rule 4: Transition states - check if all resources are in consistent transition
+  // Rule 5: Transition states - check if all resources are in consistent transition
   const statusArray = Array.from(uniqueStatuses)
 
   // STARTING: All resources ∈ {RUNNING, STARTING}
@@ -60,7 +66,7 @@ export function aggregateProjectStatus(resourceStatuses: ResourceStatus[]): Proj
     return 'TERMINATING'
   }
 
-  // Rule 5: PARTIAL - inconsistent mixed states
+  // Rule 6: PARTIAL - inconsistent mixed states
   // Examples:
   // - Some TERMINATING + some STARTING
   // - Some STOPPING + some STARTING
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index bd388e5..81ff46e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -193,12 +193,13 @@ model Sandbox {
 // Aggregation rules (priority order):
 // 1. ERROR: At least one resource has ERROR status
 // 2. CREATING: At least one resource has CREATING status (initial creation in progress)
-// 3. Pure states: All resources have the same status → Project uses that status
-// 4. Transition states (all resources in consistent transition):
+// 3. UPDATING: At least one resource has UPDATING status (environment variable changes)
+// 4. Pure states: All resources have the same status → Project uses that status
+// 5. Transition states (all resources in consistent transition):
 //    - STARTING: All resources ∈ {RUNNING, STARTING} (goal: RUNNING)
 //    - STOPPING: All resources ∈ {STOPPED, STOPPING} (goal: STOPPED)
 //    - TERMINATING: All resources ∈ {TERMINATED, TERMINATING} (goal: TERMINATED)
-// 5. PARTIAL: Mixed inconsistent states (e.g., some TERMINATING + some STARTING)
+// 6. PARTIAL: Mixed inconsistent states (e.g., some TERMINATING + some STARTING)
 //    This indicates manual intervention or error recovery is needed
 enum ProjectStatus {
   // Stable states
@@ -207,7 +208,8 @@ enum ProjectStatus {
   TERMINATED // All resources are TERMINATED - soft deleted
 
   // Transition states (consistent progress toward a goal)
-  CREATING // All resources are CREATING - initial creation
+  CREATING // At least one resource is CREATING - initial creation
+  UPDATING // At least one resource is UPDATING - configuration changes
   STARTING // Resources ∈ {RUNNING, STARTING} - transitioning to RUNNING
   STOPPING // Resources ∈ {STOPPED, STOPPING} - transitioning to STOPPED
   TERMINATING // Resources ∈ {TERMINATED, TERMINATING} - transitioning to TERMINATED
@@ -228,6 +230,7 @@ enum ResourceStatus {
   TERMINATING // Resource is being deleted from K8s
   TERMINATED // Resource deleted from K8s (soft delete: keep record)
   ERROR // Resource encountered an error
+  UPDATING // Resource is being updated
 }
 
 enum AuthProvider {
diff --git a/public/favicon-tight.svg b/public/favicon-tight.svg
new file mode 100644
index 0000000..ff95846
--- /dev/null
+++ b/public/favicon-tight.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title2 desc2">
+  <title id="title2">FullStack Agent — Full-Bleed App Icon</title>
+  <desc id="desc2">Rounded-square tile filled by a geometric comet for maximum size at small favicon scales.</desc>
+  <defs>
+    <linearGradient id="fs-grad2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0"  stop-color="var(--fs-primary, #FF7A1A)"/>
+      <stop offset="1"  stop-color="var(--fs-secondary, #FF3D81)"/>
+    </linearGradient>
+  </defs>
+
+  <rect x="0" y="0" width="256" height="256" rx="56" fill="var(--fs-bg, #0B0B0F)"/>
+  <g transform="translate(128,128) rotate(-30) translate(-128,-128) scale(1.1) translate(-12,-12)">
+    <rect x="44" y="124" width="128" height="20" rx="10" fill="url(#fs-grad2)"/>
+    <rect x="62" y="96"  width="114" height="18" rx="9"  fill="url(#fs-grad2)" opacity="0.9"/>
+    <rect x="78" y="70"  width="96"  height="16" rx="8"  fill="url(#fs-grad2)" opacity="0.75"/>
+    <circle cx="210" cy="132" r="40" fill="url(#fs-grad2)"/>
+    <circle cx="222" cy="120" r="10" fill="#ffffff" opacity="0.9"/>
+    <path d="M208 110 L234 132 L218 152 Z" fill="#ffffff" opacity="0.12"/>
+  </g>
+</svg>
diff --git a/public/favicon.svg b/public/favicon.svg
index ff95846..b811003 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,21 +1,24 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title2 desc2">
-  <title id="title2">FullStack Agent — Full-Bleed App Icon</title>
-  <desc id="desc2">Rounded-square tile filled by a geometric comet for maximum size at small favicon scales.</desc>
+  <title id="title2">FullStack Agent — App Icon</title>
+  <desc id="desc2">Rounded square container with a geometric comet mark.</desc>
   <defs>
-    <linearGradient id="fs-grad2" x1="0" y1="0" x2="1" y2="1">
+    <linearGradient id="fs-grad" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0"  stop-color="var(--fs-primary, #FF7A1A)"/>
       <stop offset="1"  stop-color="var(--fs-secondary, #FF3D81)"/>
     </linearGradient>
   </defs>
 
-  <rect x="0" y="0" width="256" height="256" rx="56" fill="var(--fs-bg, #0B0B0F)"/>
-  <g transform="translate(128,128) rotate(-30) translate(-128,-128) scale(1.1) translate(-12,-12)">
-    <rect x="44" y="124" width="128" height="20" rx="10" fill="url(#fs-grad2)"/>
-    <rect x="62" y="96"  width="114" height="18" rx="9"  fill="url(#fs-grad2)" opacity="0.9"/>
-    <rect x="78" y="70"  width="96"  height="16" rx="8"  fill="url(#fs-grad2)" opacity="0.75"/>
-    <circle cx="210" cy="132" r="40" fill="url(#fs-grad2)"/>
-    <circle cx="222" cy="120" r="10" fill="#ffffff" opacity="0.9"/>
-    <path d="M208 110 L234 132 L218 152 Z" fill="#ffffff" opacity="0.12"/>
+  <rect x="12" y="12" width="232" height="232" rx="56"
+        fill="var(--fs-bg, #0B0B0F)"/>
+  <rect x="12" y="12" width="232" height="232" rx="56"
+        fill="none" stroke="white" stroke-opacity="0.06"/>
+
+  <g transform="translate(128,128) rotate(-30) translate(-128,-128)">
+    <rect x="44" y="124" width="116" height="18" rx="9" fill="url(#fs-grad)"/>
+    <rect x="60" y="98"  width="96"  height="16" rx="8" fill="url(#fs-grad)" opacity="0.85"/>
+    <rect x="74" y="74"  width="78"  height="14" rx="7" fill="url(#fs-grad)" opacity="0.7"/>
+    <circle cx="188" cy="132" r="34" fill="url(#fs-grad)"/>
+    <circle cx="198" cy="122" r="9" fill="#fff" opacity="0.85"/>
+    <path d="M186 114 L208 134 L194 150 Z" fill="#fff" opacity="0.12"/>
   </g>
 </svg>