diff --git a/.gitignore b/.gitignore
index b991db0..255fcba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-env.*
\ No newline at end of file
+env.*
+.idea/*
\ No newline at end of file
diff --git a/frontend/src/app/chats/components/PreviewTab.js b/frontend/src/app/chats/components/PreviewTab.js
index 16d01e6..445d1e5 100644
--- a/frontend/src/app/chats/components/PreviewTab.js
+++ b/frontend/src/app/chats/components/PreviewTab.js
@@ -78,98 +78,110 @@ export function PreviewTab({
 
   if (!projectPreviewUrl) {
     return (
-      <div className="flex items-center justify-center h-full text-muted-foreground">
-        No preview available
+      <div className="w-full h-full flex items-center justify-center bg-muted/10">
+        <span className="text-muted-foreground">No preview available</span>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="p-2 border-b flex flex-col sm:flex-row sm:items-center justify-between gap-2">
-        <div className="flex flex-wrap items-center gap-2">
-          <Select
-            value={viewport}
-            onValueChange={(value) => setViewport(value)}
-          >
-            <SelectTrigger className="w-[140px] sm:w-[180px]">
-              <SelectValue placeholder="Select viewport" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="full">
-                <div className="flex items-center gap-2">
-                  <Maximize2 className="h-4 w-4" />
-                  <span>Full Width</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="desktop">
-                <div className="flex items-center gap-2">
-                  <Monitor className="h-4 w-4" />
-                  <span>Desktop</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="mobile">
-                <div className="flex items-center gap-2">
-                  <Smartphone className="h-4 w-4" />
-                  <span>Mobile</span>
-                </div>
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          <Input
-            value={projectPreviewPath}
-            onChange={(e) => setProjectPreviewPath(e.target.value)}
-            className="w-full sm:w-[120px]"
-            placeholder="Path (e.g. /)"
-          />
-        </div>
-        <div className="flex gap-2 self-end sm:self-auto">
-          <Button variant="ghost" size="icon" onClick={handleRefresh}>
-            <RotateCw className="h-4 w-4" />
-          </Button>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => window.open(projectPreviewUrl, '_blank')}
-                >
-                  <ExternalLink className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  This preview URL is temporary and will change when the project
-                  is rebooted
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+    <div className="w-full h-full flex flex-col">
+      <div className="flex-none border-b bg-background">
+        <div className="p-2 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Select
+              value={viewport}
+              onValueChange={(value) => setViewport(value)}
+            >
+              <SelectTrigger className="w-[140px] sm:w-[180px]">
+                <SelectValue placeholder="Select viewport" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="full">
+                  <div className="flex items-center gap-2">
+                    <Maximize2 className="h-4 w-4" />
+                    <span>Full Width</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="desktop">
+                  <div className="flex items-center gap-2">
+                    <Monitor className="h-4 w-4" />
+                    <span>Desktop</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="mobile">
+                  <div className="flex items-center gap-2">
+                    <Smartphone className="h-4 w-4" />
+                    <span>Mobile</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              value={projectPreviewPath}
+              onChange={(e) => setProjectPreviewPath(e.target.value)}
+              className="w-full sm:w-[120px]"
+              placeholder="Path (e.g. /)"
+            />
+          </div>
+          <div className="flex gap-2 self-end sm:self-auto">
+            <Button variant="ghost" size="icon" onClick={handleRefresh}>
+              <RotateCw className="h-4 w-4" />
+            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => window.open(projectPreviewUrl, '_blank')}
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    This preview URL is temporary and will change when the project
+                    is rebooted
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </div>
       </div>
       <div
-        className="flex-1 flex items-start justify-center p-4 bg-gray-50"
+        className="flex-1 w-full h-full bg-muted/10 overflow-auto"
         ref={containerRef}
       >
         <div
+          className="w-full h-full flex items-start justify-center p-4"
           style={{
-            width: viewport === 'full' ? '100%' : 'auto',
-            height: viewport === 'full' ? '100%' : 'auto',
-            transform: viewport !== 'full' ? `scale(${scale})` : 'none',
-            transformOrigin: 'top center',
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'center',
-            marginTop: '20px',
+            minHeight: viewport === 'full' ? '100%' : 'auto'
           }}
         >
-          <iframe
-            src={`${projectPreviewUrl}${debouncedPath}`}
-            style={viewportStyles[viewport]}
-            className="border shadow-sm bg-white"
-            title="Project Preview"
-          />
+          <div
+            style={{
+              width: viewport === 'full' ? '100%' : 'auto',
+              height: viewport === 'full' ? '100%' : 'auto',
+              transform: viewport !== 'full' ? `scale(${scale})` : 'none',
+              transformOrigin: 'top center',
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              marginTop: '20px',
+            }}
+          >
+            <iframe
+              src={`${projectPreviewUrl}${debouncedPath}`}
+              style={{
+                ...viewportStyles[viewport],
+                height: viewport === 'full' ? '100%' : viewportStyles[viewport].height
+              }}
+              className="border shadow-sm bg-white"
+              title="Project Preview"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/chats/components/RightPanel.js b/frontend/src/app/chats/components/RightPanel.js
index ae7ffd8..4a48eaf 100644
--- a/frontend/src/app/chats/components/RightPanel.js
+++ b/frontend/src/app/chats/components/RightPanel.js
@@ -2,14 +2,11 @@
 
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { X as XIcon, PanelRight as PanelRightIcon } from 'lucide-react';
 import { PreviewTab } from './PreviewTab';
 import { FilesTab } from './FilesTab';
 import { ProjectTab } from './ProjectTab';
 
 export function RightPanel({
-  isOpen,
-  onClose,
   projectPreviewUrl,
   projectPreviewHash,
   projectFileTree,
@@ -22,73 +19,47 @@ export function RightPanel({
   const [selectedTab, setSelectedTab] = useState('preview');
 
   return (
-    <>
-      {isOpen && (
-        <div className="md:hidden fixed top-4 right-4 z-40">
-          <Button variant="outline" size="sm" onClick={() => onClose()}>
-            <PanelRightIcon className="h-4 w-4" />
+    <div className="flex flex-col w-full h-full">
+      <div className="border-b bg-background">
+        <div className="flex items-center space-x-4 px-4 py-2">
+          <Button
+            variant={selectedTab === 'preview' ? 'default' : 'ghost'}
+            size="sm"
+            onClick={() => setSelectedTab('preview')}
+          >
+            Preview
+          </Button>
+          <Button
+            variant={selectedTab === 'editor' ? 'default' : 'ghost'}
+            size="sm"
+            onClick={() => setSelectedTab('editor')}
+          >
+            Files
+          </Button>
+          <Button
+            variant={selectedTab === 'info' ? 'default' : 'ghost'}
+            size="sm"
+            onClick={() => setSelectedTab('info')}
+          >
+            Project
           </Button>
         </div>
-      )}
-
-      <div
-        className={`${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
-        } md:translate-x-0 fixed md:static right-0 top-0 h-screen w-full md:w-[600px] border-l bg-background transition-transform duration-200 ease-in-out z-30`}
-      >
-        <div className="p-4 pl-16 md:pl-4 border-b flex items-center justify-between">
-          <div className="flex items-center space-x-4">
-            <Button
-              variant={selectedTab === 'preview' ? 'default' : 'ghost'}
-              size="sm"
-              onClick={() => setSelectedTab('preview')}
-            >
-              Preview
-            </Button>
-            <Button
-              variant={selectedTab === 'editor' ? 'default' : 'ghost'}
-              size="sm"
-              onClick={() => setSelectedTab('editor')}
-            >
-              Files
-            </Button>
-            <Button
-              variant={selectedTab === 'info' ? 'default' : 'ghost'}
-              size="sm"
-              onClick={() => setSelectedTab('info')}
-            >
-              Project
-            </Button>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="md:hidden"
-              onClick={onClose}
-            >
-              <XIcon className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-        <div className="p-4">
-          <div className="rounded-lg border bg-muted/40 h-[calc(100vh-8rem)]">
-            {selectedTab === 'preview' ? (
-              <PreviewTab
-                projectPreviewUrl={projectPreviewUrl}
-                projectPreviewHash={projectPreviewHash}
-                projectPreviewPath={projectPreviewPath}
-                setProjectPreviewPath={setProjectPreviewPath}
-                status={status}
-              />
-            ) : selectedTab === 'editor' ? (
-              <FilesTab projectFileTree={projectFileTree} project={project} />
-            ) : (
-              <ProjectTab project={project} onSendMessage={onSendMessage} />
-            )}
-          </div>
-        </div>
       </div>
-    </>
+      <div className="flex-1 overflow-hidden">
+        {selectedTab === 'preview' ? (
+          <PreviewTab
+            projectPreviewUrl={projectPreviewUrl}
+            projectPreviewHash={projectPreviewHash}
+            projectPreviewPath={projectPreviewPath}
+            setProjectPreviewPath={setProjectPreviewPath}
+            status={status}
+          />
+        ) : selectedTab === 'editor' ? (
+          <FilesTab projectFileTree={projectFileTree} project={project} />
+        ) : (
+          <ProjectTab project={project} onSendMessage={onSendMessage} />
+        )}
+      </div>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/chats/page.js b/frontend/src/app/chats/page.js
index f52d350..dd4ce6b 100644
--- a/frontend/src/app/chats/page.js
+++ b/frontend/src/app/chats/page.js
@@ -9,6 +9,7 @@ import { api } from '@/lib/api';
 import { Chat } from './components/Chat';
 import { RightPanel } from './components/RightPanel';
 import { useToast } from '@/hooks/use-toast';
+import Splitter from '@/components/ui/splitter';
 
 export default function WorkspacePage({ chatId }) {
   const { addChat, team, projects, refreshProjects } = useUser();
@@ -294,31 +295,33 @@ export default function WorkspacePage({ chatId }) {
             </Button>
           </div>
         )}
-        <Chat
-          connected={!!webSocketRef.current}
-          messages={messages}
-          onSendMessage={handleSendMessage}
-          projectTitle={chatTitle}
-          status={status}
-          onProjectSelect={handleProjectSelect}
-          onStackSelect={handleStackPackSelect}
-          showStackPacks={chatId === 'new'}
-          suggestedFollowUps={suggestedFollowUps}
-          onReconnect={handleReconnect}
-        />
-        <RightPanel
-          onSendMessage={handleSendMessage}
-          isOpen={isPreviewOpen}
-          onClose={() => setIsPreviewOpen(false)}
-          projectPreviewUrl={projectPreviewUrl}
-          projectPreviewPath={projectPreviewPath}
-          setProjectPreviewPath={setProjectPreviewPath}
-          projectPreviewHash={previewHash}
-          projectFileTree={projectFileTree}
-          project={projects.find((p) => +p.id === +projectId)}
-          chatId={chatId}
-          status={status}
-        />
+        <Splitter defaultLeftWidth="60%" minLeftWidth={400} minRightWidth={400} className="h-full">
+          <Chat
+            connected={!!webSocketRef.current}
+            messages={messages}
+            onSendMessage={handleSendMessage}
+            projectTitle={chatTitle}
+            status={status}
+            onProjectSelect={handleProjectSelect}
+            onStackSelect={handleStackPackSelect}
+            showStackPacks={chatId === 'new'}
+            suggestedFollowUps={suggestedFollowUps}
+            onReconnect={handleReconnect}
+          />
+          <RightPanel
+            onSendMessage={handleSendMessage}
+            isOpen={isPreviewOpen}
+            onClose={() => setIsPreviewOpen(false)}
+            projectPreviewUrl={projectPreviewUrl}
+            projectPreviewPath={projectPreviewPath}
+            setProjectPreviewPath={setProjectPreviewPath}
+            projectPreviewHash={previewHash}
+            projectFileTree={projectFileTree}
+            project={projects.find((p) => +p.id === +projectId)}
+            chatId={chatId}
+            status={status}
+          />
+        </Splitter>
       </div>
     </div>
   );
diff --git a/frontend/src/components/ui/splitter.jsx b/frontend/src/components/ui/splitter.jsx
new file mode 100644
index 0000000..6b4a78e
--- /dev/null
+++ b/frontend/src/components/ui/splitter.jsx
@@ -0,0 +1,81 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+const Splitter = ({
+  children,
+  className = '',
+  minLeftWidth = 300,
+  minRightWidth = 50,
+  defaultLeftWidth = '70%'
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);
+  const containerRef = useRef(null);
+  const leftPaneRef = useRef(null);
+  const rightPaneRef = useRef(null);
+
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging || !containerRef.current) return;
+
+      const container = containerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const newLeftWidth = e.clientX - containerRect.left;
+
+      // Calculate the right width based on the new left width
+      const rightWidth = containerRect.width - newLeftWidth;
+
+      // Only update if both panes meet minimum width requirements
+      if (newLeftWidth >= minLeftWidth && rightWidth >= minRightWidth) {
+        setLeftWidth(`${(newLeftWidth / containerRect.width) * 100}%`);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, minLeftWidth, minRightWidth]);
+
+  const [leftChild, rightChild] = React.Children.toArray(children);
+
+  return (
+    <div ref={containerRef} className={`flex h-full w-full ${className}`}>
+      <div
+        ref={leftPaneRef}
+        className="flex-shrink-0"
+        style={{ width: leftWidth }}
+      >
+        {leftChild}
+      </div>
+
+      <div
+        className={`w-1 bg-border hover:bg-primary/10 cursor-col-resize flex-shrink-0 relative ${
+          isDragging ? 'bg-primary/10' : ''
+        }`}
+        onMouseDown={handleMouseDown}
+      >
+        <div className="absolute inset-y-0 -left-2 right-2 cursor-col-resize" />
+      </div>
+
+      <div ref={rightPaneRef} className="flex-1 min-w-0">
+        {rightChild}
+      </div>
+    </div>
+  );
+};
+
+export default Splitter;
\ No newline at end of file