diff --git a/web/app/providers.tsx b/web/app/providers.tsx
index 89185599..32155169 100644
--- a/web/app/providers.tsx
+++ b/web/app/providers.tsx
@@ -1,14 +1,14 @@
 "use client"
 
-import { QueryClientProvider } from "@/lib/get-query-client"
 import { Toaster } from "@/components/ui/sonner"
 import { ThemeProvider } from "@/components/ui/theme-provider"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { QueryClientProvider } from "@/lib/get-query-client"
 import { AppProgressProvider as ProgressProvider } from "@bprogress/next"
 import { ClerkProvider } from "@clerk/nextjs"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { Analytics } from "@vercel/analytics/react"
 import * as React from "react"
-
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider>
@@ -18,17 +18,19 @@ export function Providers({ children }: { children: React.ReactNode }) {
           defaultTheme="system"
           disableTransitionOnChange
         >
-          <ProgressProvider
-            height="4px"
-            delay={500}
-            color="hsl(var(--foreground))"
-            options={{ showSpinner: false }}
-            shallowRouting
-          >
-            {children}
-            <Analytics />
-            <Toaster position="bottom-left" richColors />
-          </ProgressProvider>
+          <TooltipProvider>
+            <ProgressProvider
+              height="4px"
+              delay={500}
+              color="hsl(var(--foreground))"
+              options={{ showSpinner: false }}
+              shallowRouting
+            >
+              {children}
+              <Analytics />
+              <Toaster position="bottom-left" richColors />
+            </ProgressProvider>
+          </TooltipProvider>
         </ThemeProvider>
       </ClerkProvider>
       <ReactQueryDevtools />
diff --git a/web/components/dashboard/navbar/index.tsx b/web/components/dashboard/navbar/index.tsx
index 13caee46..bba3929e 100644
--- a/web/components/dashboard/navbar/index.tsx
+++ b/web/components/dashboard/navbar/index.tsx
@@ -10,7 +10,7 @@ export default function DashboardNavbar({ userData }: { userData: User }) {
     <div className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-2">
         <Link
-          href="/"
+          href="/dashboard"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Logo />
diff --git a/web/components/profile/index.tsx b/web/components/profile/index.tsx
index 93a84fb5..2d6e56ab 100644
--- a/web/components/profile/index.tsx
+++ b/web/components/profile/index.tsx
@@ -27,7 +27,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { deleteSandbox, updateSandbox, updateUser } from "@/lib/api/actions"
@@ -185,37 +184,35 @@ function ProfileCard({
     <Card className="mb-6 md:mb-0 sticky top-6">
       {isOwnProfile && (
         <div className="absolute top-2 right-2 flex flex-col gap-2">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  onClick={toggleEdit}
-                  aria-label={isEditing ? "close edit form" : "open edit form"}
-                  size="smIcon"
-                  variant="secondary"
-                  className="rounded-full relative"
-                >
-                  {isEditing ? (
-                    <X className="size-4" />
-                  ) : showAddMoreInfoBanner ? (
-                    <>
-                      <Sparkles className="size-4 text-yellow-400 z-[2]" />
-                      <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
-                    </>
-                  ) : (
-                    <Edit className="size-4" />
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  {showAddMoreInfoBanner
-                    ? "Add more information to your profile"
-                    : "Edit your profile"}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={toggleEdit}
+                aria-label={isEditing ? "close edit form" : "open edit form"}
+                size="smIcon"
+                variant="secondary"
+                className="rounded-full relative"
+              >
+                {isEditing ? (
+                  <X className="size-4" />
+                ) : showAddMoreInfoBanner ? (
+                  <>
+                    <Sparkles className="size-4 text-yellow-400 z-[2]" />
+                    <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
+                  </>
+                ) : (
+                  <Edit className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {showAddMoreInfoBanner
+                  ? "Add more information to your profile"
+                  : "Edit your profile"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       )}
       <CardContent className="flex flex-col gap-4 pt-6">
diff --git a/web/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
index 5de5c55a..cec73f0a 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -11,7 +11,7 @@ export default function ProfileNavbar({ userData }: { userData?: User }) {
     <nav className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-2">
         <Link
-          href="/"
+          href="/dashboard"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Logo />
diff --git a/web/components/project/navbar/index.tsx b/web/components/project/navbar/index.tsx
index 1f0d9b38..16a6705c 100644
--- a/web/components/project/navbar/index.tsx
+++ b/web/components/project/navbar/index.tsx
@@ -25,7 +25,6 @@ export default function Navbar({
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false)
   const [isShareOpen, setIsShareOpen] = useState(false)
-  const [isRunning, setIsRunning] = useState(false)
 
   const isOwner = sandboxData.userId === userData.id
 
@@ -45,7 +44,7 @@ export default function Navbar({
       <div className="h-14 shrink-0 px-2 w-full flex items-center justify-between border-b border-border">
         <div className="flex items-center space-x-4">
           <Link
-            href="/"
+            href="/dashboard"
             className="ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md"
           >
             <Logo />
@@ -62,11 +61,7 @@ export default function Navbar({
             ) : null}
           </div>
         </div>
-        <RunButtonModal
-          isRunning={isRunning}
-          setIsRunning={setIsRunning}
-          sandboxData={sandboxData}
-        />
+        <RunButtonModal sandboxData={sandboxData} />
         <div className="flex items-center h-full space-x-4">
           {/* <Avatars /> */}
 
diff --git a/web/components/project/navbar/run.tsx b/web/components/project/navbar/run.tsx
index a65c467d..1e2939c6 100644
--- a/web/components/project/navbar/run.tsx
+++ b/web/components/project/navbar/run.tsx
@@ -2,39 +2,22 @@
 
 import { Button } from "@/components/ui/button"
 import { useEditorLayout } from "@/context/EditorLayoutContext"
+import { useSocket } from "@/context/SocketContext"
 import { useTerminal } from "@/context/TerminalContext"
 import { Sandbox } from "@/lib/types"
 import { templateConfigs } from "@gitwit/templates"
 import { Play, StopCircle } from "lucide-react"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { toast } from "sonner"
 
-export default function RunButtonModal({
-  isRunning,
-  setIsRunning,
-  sandboxData,
-}: {
-  isRunning: boolean
-  setIsRunning: (running: boolean) => void
-  sandboxData: Sandbox
-}) {
+const MAX_TERMINALS = 4
+export default function RunButton({ sandboxData }: { sandboxData: Sandbox }) {
+  const [isRunning, setIsRunning] = useState(false)
+  const { isSocketReady } = useSocket()
   const { createNewTerminal, closeTerminal, terminals } = useTerminal()
   const { setIsPreviewCollapsed, previewPanelRef } = useEditorLayout()
   // Ref to keep track of the last created terminal's ID
   const lastCreatedTerminalRef = useRef<string | null>(null)
-
-  // Effect to update the lastCreatedTerminalRef when a new terminal is added
-  useEffect(() => {
-    if (terminals.length > 0 && !isRunning) {
-      const latestTerminal = terminals[terminals.length - 1]
-      if (
-        latestTerminal &&
-        latestTerminal.id !== lastCreatedTerminalRef.current
-      ) {
-        lastCreatedTerminalRef.current = latestTerminal.id
-      }
-    }
-  }, [terminals, isRunning])
   // commands to run in the terminal
   const handleRun = async () => {
     if (isRunning && lastCreatedTerminalRef.current) {
@@ -42,7 +25,7 @@ export default function RunButtonModal({
       lastCreatedTerminalRef.current = null
       setIsPreviewCollapsed(true)
       previewPanelRef.current?.collapse()
-    } else if (!isRunning && terminals.length < 4) {
+    } else if (!isRunning && terminals.length < MAX_TERMINALS) {
       const command =
         templateConfigs[sandboxData.type]?.runCommand || "npm run dev"
 
@@ -67,8 +50,21 @@ export default function RunButtonModal({
     setIsRunning(!isRunning)
   }
 
+  // Effect to update the lastCreatedTerminalRef when a new terminal is added
+  useEffect(() => {
+    if (terminals.length > 0 && !isRunning) {
+      const latestTerminal = terminals[terminals.length - 1]
+      if (
+        latestTerminal &&
+        latestTerminal.id !== lastCreatedTerminalRef.current
+      ) {
+        lastCreatedTerminalRef.current = latestTerminal.id
+      }
+    }
+  }, [terminals, isRunning])
+
   return (
-    <Button variant="outline" onClick={handleRun}>
+    <Button variant="outline" onClick={handleRun} disabled={!isSocketReady}>
       {isRunning ? (
         <StopCircle className="w-4 h-4 mr-2" />
       ) : (
diff --git a/web/components/project/preview/index.tsx b/web/components/project/preview/index.tsx
index 85d5ac66..43858fa3 100644
--- a/web/components/project/preview/index.tsx
+++ b/web/components/project/preview/index.tsx
@@ -2,115 +2,384 @@
 
 import { Button } from "@/components/ui/button"
 import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useEditorLayout } from "@/context/EditorLayoutContext"
+import { cn } from "@/lib/utils"
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion"
+import {
+  AlertTriangle,
   ArrowDownToLine,
   ArrowRightToLine,
+  ExternalLinkIcon,
   Link,
+  Loader2,
+  Maximize,
+  Minimize,
   RotateCw,
   UnfoldVertical,
 } from "lucide-react"
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react"
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
 import { toast } from "sonner"
 
-export default forwardRef(function PreviewWindow(
-  {
-    collapsed,
-    open,
-    src,
-    isHorizontal,
-    toggleLayout,
-    isAIChatOpen,
-  }: {
-    collapsed: boolean
-    open: () => void
-    src: string
-    isHorizontal: boolean
-    toggleLayout: () => void
-    isAIChatOpen: boolean
-  },
+export function PreviewWindow({
+  ref,
+}: {
   ref: React.Ref<{
     refreshIframe: () => void
   }>
-) {
-  const [iframeKey, setIframeKey] = useState(0)
-  const refreshIframe = () => {
-    setIframeKey((prev) => prev + 1)
-  }
-  // Refresh the preview when the URL changes.
-  useEffect(refreshIframe, [src])
+}) {
+  const { previewURL: src } = useEditorLayout()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  const {
+    iframeKey,
+    isMaximized,
+    isLoading,
+    hasError,
+    refreshIframe,
+    toggleMaximize,
+    setIsLoading,
+    setIsMaximized,
+    setHasError,
+  } = usePreviewState(src)
+
+  const handleIframeLoad = useCallback(() => {
+    setIsLoading(false)
+    setHasError(false)
+  }, [setIsLoading, setHasError])
+
+  const handleIframeError = useCallback(() => {
+    setIsLoading(false)
+    setHasError(true)
+  }, [setIsLoading, setHasError])
+
+  useEffect(() => {
+    // when escape is pressed, toggle preview maximize state
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === "Escape" &&
+        !event.ctrlKey &&
+        !event.altKey &&
+        !event.shiftKey &&
+        !(event.target as HTMLElement)?.matches(
+          "input, textarea, [contenteditable]"
+        )
+      ) {
+        setIsMaximized(false)
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [])
   // Expose refreshIframe method to the parent.
   useImperativeHandle(ref, () => ({ refreshIframe }))
 
   return (
-    <>
-      <div className="flex items-center justify-between">
-        <Button
-          onClick={toggleLayout}
-          size="sm"
-          variant="ghost"
-          className="mr-2 border"
-          disabled={isAIChatOpen}
-        >
-          {isHorizontal ? (
-            <ArrowRightToLine className="w-4 h-4" />
-          ) : (
-            <ArrowDownToLine className="w-4 h-4" />
+    <PreviewContext.Provider value={{ isMaximized, toggleMaximize }}>
+      <LayoutGroup>
+        <AnimatePresence>
+          {isMaximized && (
+            <motion.div
+              key="preview"
+              initial={{ opacity: 0, backdropFilter: "blur(0px)" }}
+              animate={{ opacity: 1, backdropFilter: "blur(12px)" }}
+              exit={{ opacity: 0, backdropFilter: "blur(0px)" }}
+              className="fixed inset-0 z-20 bg-background/10"
+              transition={{ duration: 0.3 }}
+              onClick={toggleMaximize}
+            />
           )}
-        </Button>
-        <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
-          <div className="text-xs">Preview</div>
-          <div className="flex space-x-1 translate-x-1">
-            {collapsed ? (
-              <PreviewButton onClick={open}>
-                <UnfoldVertical className="w-4 h-4" />
-              </PreviewButton>
-            ) : (
+        </AnimatePresence>
+        <motion.div
+          layout
+          layoutDependency={isMaximized}
+          className={cn(
+            "flex flex-col gap-2 bg-background transition-shadow shadow-[0_0_0_0px_hsl(var(--muted-foreground))]",
+            isMaximized
+              ? "fixed inset-4 z-50 rounded-lg shadow-[0_0_0_1px_hsl(var(--muted-foreground)_/_0.4)]"
+              : "relative w-full h-full"
+          )}
+        >
+          <PreviewHeader
+            {...{
+              refreshIframe,
+            }}
+          />
+          <motion.div
+            layout
+            layoutDependency={isMaximized}
+            className="w-full grow rounded-md overflow-hidden bg-background mt-2"
+          >
+            {src ? (
               <>
-                <PreviewButton onClick={open}>
-                  <UnfoldVertical className="w-4 h-4" />
-                </PreviewButton>
-
-                <PreviewButton
-                  onClick={() => {
-                    navigator.clipboard.writeText(src)
-                    toast.info("Copied preview link to clipboard")
-                  }}
-                >
-                  <Link className="w-4 h-4" />
-                </PreviewButton>
-                <PreviewButton onClick={refreshIframe}>
-                  <RotateCw className="w-3 h-3" />
-                </PreviewButton>
+                <iframe
+                  key={iframeKey}
+                  ref={iframeRef}
+                  title="Gitwit Sandbox project preview"
+                  width="100%"
+                  height="100%"
+                  src={src}
+                  allow="fullscreen; camera; microphone; gyroscope; accelerometer; geolocation; clipboard-write; autoplay"
+                  loading="eager"
+                  className="bg-secondary"
+                  onLoad={handleIframeLoad}
+                  onError={handleIframeError}
+                />
+
+                {/* Loading overlay */}
+                {isLoading && (
+                  <div className="h-full flex items-center justify-center bg-secondary">
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                      <Loader2 className="size-4 animate-spin" />
+                      <span className="text-sm">Loading preview...</span>
+                    </div>
+                  </div>
+                )}
+
+                {/* Error overlay */}
+                {hasError && (
+                  <div className="h-full flex items-center justify-center bg-secondary">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <AlertTriangle className="size-8" />
+                      <span className="text-sm">Failed to load preview</span>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={refreshIframe}
+                        className="mt-2"
+                      >
+                        Try Again
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </>
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <p className="text-sm">No preview available</p>
+              </div>
             )}
-          </div>
-        </div>
+          </motion.div>
+        </motion.div>
+      </LayoutGroup>
+    </PreviewContext.Provider>
+  )
+}
+
+PreviewWindow.displayName = "PreviewWindow"
+
+function PreviewHeader({ refreshIframe }: { refreshIframe: () => void }) {
+  const {
+    isHorizontalLayout: isHorizontal,
+    isPreviewCollapsed: collapsed,
+    previewURL: src,
+    togglePreviewPanel: open,
+    toggleLayout,
+  } = useEditorLayout()
+  const { isMaximized, toggleMaximize } = usePreviewContext()
+
+  const copyLink = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    navigator.clipboard
+      .writeText(src)
+      .then(() => {
+        toast.success("Preview link copied to clipboard")
+      })
+      .catch((err) => {
+        console.error("Failed to copy link: ", err)
+        toast.error("Failed to copy preview link")
+      })
+  }, [src])
+
+  const openInNewTab = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    window.open(src, "_blank")
+  }, [src])
+
+  return (
+    <motion.div
+      layout
+      layoutDependency={isMaximized}
+      className={cn("flex gap-2 items-center", isMaximized && "px-2 pt-2")}
+    >
+      <div className={cn(isMaximized && "hidden")}>
+        <Tooltip>
+          <TooltipTrigger disabled={isMaximized} asChild>
+            <Button
+              size="smIcon"
+              variant="outline"
+              className="size-8 rounded-md"
+              onClick={toggleLayout}
+            >
+              {isHorizontal ? (
+                <ArrowRightToLine className="size-4 opacity-80" />
+              ) : (
+                <ArrowDownToLine className="size-4 opacity-80" />
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Toggle Layout</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
-      <div className="w-full grow rounded-md overflow-hidden bg-background mt-2">
-        {src ? (
-          <iframe key={iframeKey} width="100%" height="100%" src={src} />
-        ) : null}
+      <motion.div
+        layout
+        layoutDependency={isMaximized}
+        className="h-8 rounded-md bg-secondary px-1 flex gap-2 items-center w-full"
+      >
+        <PreviewButton label="Reload" onClick={refreshIframe}>
+          <RotateCw className="size-3" />
+        </PreviewButton>
+        <div className="text-xs flex-1">Preview</div>
+        <div className="flex gap-1">
+          <PreviewButton
+            label={isMaximized ? "Minimize" : "Maximize"}
+            onClick={toggleMaximize}
+          >
+            {isMaximized ? (
+              <Minimize className="size-3" />
+            ) : (
+              <Maximize className="size-3" />
+            )}
+          </PreviewButton>
+          {isMaximized ? (
+            <PreviewButton label="open in new tab" onClick={openInNewTab}>
+              <ExternalLinkIcon className="size-3" />
+            </PreviewButton>
+          ) : (
+            <PreviewButton label="copy link" onClick={copyLink}>
+              <Link className="size-3" />
+            </PreviewButton>
+          )}
+        </div>
+      </motion.div>
+      <div className={cn(isMaximized && "hidden")}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="smIcon"
+              variant="outline"
+              className="size-8 rounded-md"
+              onClick={open}
+            >
+              <UnfoldVertical className="size-4 opacity-80" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {(isHorizontal ? !collapsed : collapsed)
+              ? "Expand Preview"
+              : "Collapse Preview"}
+          </TooltipContent>
+        </Tooltip>
       </div>
-    </>
+    </motion.div>
   )
-})
+}
+
+const usePreviewState = (src: string | undefined) => {
+  const [iframeKey, setIframeKey] = useState(() => Date.now())
+  const [isMaximized, setIsMaximized] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasError, setHasError] = useState(false)
+
+  const refreshIframe = useCallback(() => {
+    setIframeKey(Date.now())
+    setIsLoading(true)
+    setHasError(false)
+  }, [])
+
+  const toggleMaximize = useCallback(() => {
+    if (!src) {
+      toast.error("No preview URL available")
+      return
+    }
+    setIsMaximized((prev) => !prev)
+  }, [src])
+
+  // Reset states when URL changes
+  useEffect(() => {
+    if (!src) return
+    setIsLoading(true)
+    setHasError(false)
+    refreshIframe()
+  }, [src, refreshIframe])
+
+  return {
+    iframeKey,
+    isMaximized,
+    isLoading,
+    hasError,
+    refreshIframe,
+    toggleMaximize,
+    setIsMaximized,
+    setIsLoading,
+    setHasError,
+  }
+}
 
 function PreviewButton({
   children,
   disabled = false,
+  label,
   onClick,
 }: {
   children: React.ReactNode
   disabled?: boolean
   onClick: () => void
+  label: string
 }) {
+  const { isMaximized } = usePreviewContext()
   return (
-    <div
-      className={`${
-        disabled ? "pointer-events-none opacity-50" : ""
-      } p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
-      onClick={onClick}
-    >
-      {children}
-    </div>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <motion.button
+          layout="position"
+          layoutDependency={isMaximized}
+          className={cn(
+            disabled && "pointer-events-none opacity-50",
+            "p-0.5 size-6  flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
+          )}
+          onClick={onClick}
+        >
+          {children}
+        </motion.button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{label}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }
+
+const PreviewContext = createContext<{
+  isMaximized: boolean
+  toggleMaximize: () => void
+} | null>(null)
+
+const usePreviewContext = () => {
+  const context = useContext(PreviewContext)
+  if (!context) {
+    throw new Error("usePreviewContext must be used within a PreviewProvider")
+  }
+  return context
+}
diff --git a/web/components/project/project-layout.tsx b/web/components/project/project-layout.tsx
index 116b5108..33f3f8ac 100644
--- a/web/components/project/project-layout.tsx
+++ b/web/components/project/project-layout.tsx
@@ -16,7 +16,7 @@ import { FileJson, TerminalSquare } from "lucide-react"
 import * as monaco from "monaco-editor"
 import { useTheme } from "next-themes"
 import { useParams } from "next/navigation"
-import { useCallback, useRef, useState } from "react"
+import { useCallback, useMemo, useRef, useState } from "react"
 import { ImperativePanelHandle } from "react-resizable-panels"
 import Tab from "../ui/tab"
 import AIChat from "./ai-chat"
@@ -25,7 +25,7 @@ import { SessionTimeoutDialog } from "./alerts/session-timeout-dialog"
 import { useCodeDiffer } from "./hooks/useCodeDiffer"
 import { useEditorSocket } from "./hooks/useEditorSocket"
 import { useMonacoEditor } from "./hooks/useMonacoEditor"
-import PreviewWindow from "./preview"
+import { PreviewWindow } from "./preview"
 import Terminals from "./terminals"
 export interface ProjectLayoutProps {
   isOwner: boolean
@@ -81,9 +81,6 @@ export default function ProjectLayout({
     isHorizontalLayout,
     isPreviewCollapsed,
     isAIChatOpen,
-    previewURL,
-    togglePreviewPanel,
-    toggleLayout,
     toggleAIChat,
     loadPreviewURL,
     setIsAIChatOpen,
@@ -146,6 +143,39 @@ export default function ProjectLayout({
     }
     setDraft(activeTab.id, content ?? "")
   }
+
+  const previewPanelProps = useMemo(
+    () => ({
+      onCollapse: () => {
+        setIsPreviewCollapsed(true)
+        const previewPanel = document.querySelector(
+          ".preview-panel"
+        ) as HTMLDivElement
+        if (previewPanel) {
+          previewPanel.style.transition = ""
+        }
+      },
+
+      onExpand: () => {
+        setIsPreviewCollapsed(false)
+        const previewPanel = document.querySelector(
+          ".preview-panel"
+        ) as HTMLDivElement
+        if (previewPanel) {
+          previewPanel.style.transition = ""
+        }
+      },
+      onResize: () => {
+        const previewPanel = document.querySelector(
+          ".preview-panel"
+        ) as HTMLDivElement
+        if (previewPanel) {
+          previewPanel.style.transition = "none"
+        }
+      },
+    }),
+    [setIsPreviewCollapsed]
+  )
   return (
     <ResizablePanelGroup
       direction={isHorizontalLayout ? "horizontal" : "vertical"}
@@ -238,23 +268,14 @@ export default function ProjectLayout({
               {/* Preview Panel */}
               <ResizablePanel
                 ref={previewPanelRef}
-                defaultSize={isPreviewCollapsed ? 4 : 20}
+                defaultSize={isPreviewCollapsed ? 4 : 50}
                 minSize={25}
-                collapsedSize={isHorizontalLayout ? 20 : 4}
-                className="p-2 flex flex-col gap-2"
+                collapsedSize={isHorizontalLayout ? 50 : 4}
+                className="preview-panel p-2 transition-all duration-300 ease-in-out"
                 collapsible
-                onCollapse={() => setIsPreviewCollapsed(true)}
-                onExpand={() => setIsPreviewCollapsed(false)}
+                {...previewPanelProps}
               >
-                <PreviewWindow
-                  open={togglePreviewPanel}
-                  collapsed={isPreviewCollapsed}
-                  src={previewURL}
-                  ref={previewWindowRef}
-                  toggleLayout={toggleLayout}
-                  isHorizontal={isHorizontalLayout}
-                  isAIChatOpen={isAIChatOpen}
-                />
+                <PreviewWindow ref={previewWindowRef} />
               </ResizablePanel>
 
               <ResizableHandle />
diff --git a/web/components/project/terminals/terminal.tsx b/web/components/project/terminals/terminal.tsx
index 118ecc35..d21a9715 100644
--- a/web/components/project/terminals/terminal.tsx
+++ b/web/components/project/terminals/terminal.tsx
@@ -34,7 +34,7 @@ export default function EditorTerminal({
       cursorBlink: true,
       theme: theme === "light" ? lightTheme : darkTheme,
       fontFamily: "var(--font-geist-mono)",
-      fontSize: 14,
+      fontSize: 12,
       lineHeight: 1.5,
       letterSpacing: 0,
       allowTransparency: true,
diff --git a/web/components/ui/sidebar.tsx b/web/components/ui/sidebar.tsx
index 64c83817..3d322587 100644
--- a/web/components/ui/sidebar.tsx
+++ b/web/components/ui/sidebar.tsx
@@ -5,7 +5,6 @@ import { buttonVariants } from "@/components/ui/button"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
@@ -264,11 +263,9 @@ export function Sidebar({
 }: SidebarProps) {
   return (
     <SidebarProvider defaultActiveItem={defaultActiveItem}>
-      <TooltipProvider>
-        <div className={cn("flex h-full", className)} {...props}>
-          {children}
-        </div>
-      </TooltipProvider>
+      <div className={cn("flex h-full", className)} {...props}>
+        {children}
+      </div>
     </SidebarProvider>
   )
 }
diff --git a/web/context/SocketContext.tsx b/web/context/SocketContext.tsx
index a6b581c0..2d951b21 100644
--- a/web/context/SocketContext.tsx
+++ b/web/context/SocketContext.tsx
@@ -5,6 +5,7 @@ import { io, Socket } from "socket.io-client"
 
 interface SocketContextType {
   socket: Socket | null
+  isSocketReady: boolean
 }
 
 const SocketContext = createContext<SocketContextType | undefined>(undefined)
@@ -16,6 +17,7 @@ export const SocketProvider: React.FC<{
   sandboxId: string
 }> = ({ children, token, userId, sandboxId }) => {
   const [socket, setSocket] = useState<Socket | null>(null)
+  const [isSocketReady, setIsSocketReady] = useState<boolean>(false)
 
   useEffect(() => {
     const newSocket = io(
@@ -34,8 +36,21 @@ export const SocketProvider: React.FC<{
     }
   }, [])
 
+  // Listen for the "ready" signal from the socket
+  React.useEffect(() => {
+    if (socket) {
+      socket.on("ready", () => {
+        setIsSocketReady(true)
+      })
+    }
+    return () => {
+      if (socket) socket.off("ready")
+    }
+  }, [socket])
+
   const value = {
     socket,
+    isSocketReady,
   }
 
   return (
diff --git a/web/context/TerminalContext.tsx b/web/context/TerminalContext.tsx
index 7bc9d8f6..9310ef96 100644
--- a/web/context/TerminalContext.tsx
+++ b/web/context/TerminalContext.tsx
@@ -33,25 +33,12 @@ const TerminalContext = createContext<TerminalContextType | undefined>(
 export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const { socket } = useSocket()
+  const { socket, isSocketReady } = useSocket()
   const [terminals, setTerminals] = useState<
     { id: string; terminal: Terminal | null }[]
   >([])
   const [activeTerminalId, setActiveTerminalId] = useState<string>("")
   const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false)
-  const [isSocketReady, setIsSocketReady] = useState<boolean>(false)
-
-  // Listen for the "ready" signal from the socket
-  React.useEffect(() => {
-    if (socket) {
-      socket.on("ready", () => {
-        setIsSocketReady(true)
-      })
-    }
-    return () => {
-      if (socket) socket.off("ready")
-    }
-  }, [socket])
 
   const createNewTerminal = async (command?: string): Promise<void> => {
     if (!socket) return