diff --git a/README.md b/README.md
index 63c8961d..84aa255f 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 ![devika screenshot](.assets/devika-screenshot.png)
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > This project is currently in a very early development/experimental stage. There are a lot of unimplemented/broken features at the moment. Contributions are welcome to help out with the progress!
 
 ## Table of Contents
@@ -16,7 +16,7 @@
 - [System Architecture](#system-architecture)
 - [Getting Started](#getting-started)
   - [Requirements](#requirements)
-  - [Installation](#installation)
+  - [Quick Installation](#quick-installation)
   - [How to use](#how-to-use)
 - [Configuration](#configuration)
 - [Contributing](#contributing)
@@ -52,66 +52,52 @@ https://github.com/stitionai/devika/assets/26198477/cfed6945-d53b-4189-9fbe-6696
 
 Read [**README.md**](docs/architecture) for the detailed documentation.
 
-
 ## Getting Started
 
 ### Requirements
 ```
 Version's requirements
-  - Python >= 3.10 and < 3.12
-  - NodeJs >= 18
-  - bun
+  - Python >= 3.10 and < 3.12 (Python 3.11 recommended)
+  - NodeJs >= 18 (18.x or 20.x LTS recommended)
+  - bun (latest version)
 ```
 
-- Install uv - Python Package manager [download](https://github.com/astral-sh/uv)
-- Install bun - JavaScript runtime [download](https://bun.sh/docs/installation)
-- For ollama [ollama setup guide](docs/Installation/ollama.md) (optinal: if you don't want to use the local models then you can skip this step)
-- For API models, configure the API keys via setting page in UI.
-
-
-### Installation
+For detailed version compatibility information and requirements, see our [Comprehensive Installation Guide](docs/Installation/INSTALLATION.md).
 
-To install Devika, follow these steps:
+### Quick Installation
 
-1. Clone the Devika repository:
+1. Clone the repository:
    ```bash
    git clone https://github.com/stitionai/devika.git
-   ```
-2. Navigate to the project directory:
-   ```bash
    cd devika
    ```
-3. Create a virtual environment and install the required dependencies (you can use any virtual environment manager):
+
+2. Install dependencies and start Devika:
    ```bash
+   # Install Python dependencies
    uv venv
-   
-   # On macOS and Linux.
-   source .venv/bin/activate
+   source .venv/bin/activate  # On Windows: .venv\Scripts\activate
+   uv pip install -r requirements.txt
 
-   # On Windows.
-   .venv\Scripts\activate
+   # Install browser dependencies
+   playwright install --with-deps
 
-   uv pip install -r requirements.txt
-   ```
-4. Install the playwright for browsering capabilities:
-   ```bash
-   playwright install --with-deps # installs browsers in playwright (and their deps) if required
-   ```
-5. Start the Devika server:
-   ```bash
+   # Start backend
    python devika.py
-   ```
-6. if everything is working fine, you see the following output:
-   ```bash
-   root: INFO   : Devika is up and running!
-   ```
-7. Now, for frontend, open a new terminal and navigate to the `ui` directory:
-   ```bash
+
+   # In a new terminal, start frontend
    cd ui/
    bun install
    bun run start
    ```
-8. Access the Devika web interface by opening a browser and navigating to `http://127.0.0.1:3001`
+
+3. Access Devika at `http://127.0.0.1:3001`
+
+For detailed installation instructions, troubleshooting, and common issues, see:
+- [Comprehensive Installation Guide](docs/Installation/INSTALLATION.md)
+- [Docker Installation](docs/Installation/INSTALLATION.md#docker-installation)
+- [Ollama Setup](docs/Installation/ollama.md)
+- [Search Engine Setup](docs/Installation/search_engine.md)
 
 ### how to use
 
@@ -151,7 +137,6 @@ when you first time run Devika, it will create a `config.toml` file for you in t
 
 Make sure to keep your API keys secure and do not share them publicly. For setting up the Bing and Google search API keys, follow the instructions in the [search engine setup](docs/Installation/search_engine.md)
 
-
 ## Contributing
 
 We welcome contributions to enhance Devika's capabilities and improve its performance. To contribute, please see the [`CONTRIBUTING.md`](CONTRIBUTING.md) file for steps.
diff --git a/docs/Installation/INSTALLATION.md b/docs/Installation/INSTALLATION.md
new file mode 100644
index 00000000..1eb83645
--- /dev/null
+++ b/docs/Installation/INSTALLATION.md
@@ -0,0 +1,203 @@
+# Comprehensive Installation Guide
+
+## Table of Contents
+- [Prerequisites](#prerequisites)
+- [Version Requirements](#version-requirements)
+- [Installation Methods](#installation-methods)
+  - [Local Installation](#local-installation)
+  - [Docker Installation](#docker-installation)
+- [Package Dependencies](#package-dependencies)
+- [Common Issues & Solutions](#common-issues--solutions)
+- [Troubleshooting](#troubleshooting)
+
+## Prerequisites
+
+Before installing Devika, ensure you have the following tools installed:
+- Git
+- Python (see version requirements)
+- Node.js (see version requirements)
+- uv (Python package manager)
+- bun (JavaScript runtime)
+
+## Version Requirements
+
+### Python Version Compatibility
+- **Required**: Python >= 3.10 and < 3.12
+- **Recommended**: Python 3.11
+- **Note**: Python 3.12 support is planned but currently not available due to dependency constraints
+
+### Node.js Version Compatibility
+- **Required**: Node.js >= 18
+- **Recommended**: Node.js 18.x LTS or 20.x LTS
+- **Known Issues**:
+  - Node.js 19.x may have compatibility issues with some SvelteKit dependencies
+  - Node.js versions below 18 are not supported due to SvelteKit requirements
+
+### Package Manager Requirements
+- **uv**: Latest version recommended
+- **bun**: Latest version required for optimal frontend development
+
+## Installation Methods
+
+### Local Installation
+
+#### 1. Clone the Repository
+```bash
+git clone https://github.com/stitionai/devika.git
+cd devika
+```
+
+#### 2. Set Up Python Environment
+```bash
+# Create and activate virtual environment
+uv venv
+
+# On macOS and Linux
+source .venv/bin/activate
+
+# On Windows
+.venv\Scripts\activate
+
+# Install Python dependencies
+uv pip install -r requirements.txt
+```
+
+#### 3. Install Browser Dependencies
+```bash
+# Install Playwright browsers and dependencies
+playwright install --with-deps
+```
+
+#### 4. Set Up Frontend
+```bash
+cd ui/
+bun install
+```
+
+### Docker Installation
+
+Docker installation provides a containerized environment with all dependencies pre-configured.
+
+#### Prerequisites
+- Docker
+- Docker Compose
+
+#### Steps
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/stitionai/devika.git
+   cd devika
+   ```
+
+2. Start the services:
+   ```bash
+   docker compose up -d
+   ```
+
+3. Access Devika at `http://localhost:3000`
+
+#### Docker Configuration
+The docker-compose.yaml file includes:
+- Ollama service for local LLM support
+- Backend service with API endpoints
+- Frontend service with UI
+- Persistent volume for database storage
+
+## Package Dependencies
+
+### Core Python Dependencies
+- **flask**, **flask-cors**: Web server and CORS support
+- **playwright**: Web automation and browsing capabilities
+- **anthropic**, **openai**, **google-generativeai**: LLM API clients
+- **ollama**: Local LLM integration
+- **sqlmodel**: Database ORM
+- **tiktoken**: Token counting for LLMs
+- **keybert**: Keyword extraction
+- **Flask-SocketIO**, **eventlet**: Real-time communication
+
+### Frontend Dependencies
+- **SvelteKit**: Web application framework
+- **Tailwind CSS**: Styling
+- **Monaco Editor**: Code editor component
+- **Socket.io**: Real-time communication
+- **xterm**: Terminal emulation
+
+## Common Issues & Solutions
+
+### Python Environment Issues
+
+1. **NumPy Installation Errors**
+   - **Issue**: `error: Microsoft Visual C++ 14.0 or greater is required`
+   - **Solution**: Install Visual Studio Build Tools with C++ workload
+
+2. **Playwright Installation**
+   - **Issue**: Browser installation fails
+   - **Solution**: Run `playwright install --with-deps` with admin privileges
+
+### Node.js/Frontend Issues
+
+1. **SvelteKit Build Errors**
+   - **Issue**: `Error: Cannot find module '@sveltejs/kit'`
+   - **Solution**: Clear node_modules and reinstall with `bun install`
+
+2. **Vite Build Issues**
+   - **Issue**: `Error: The requested module '/node_modules/...' does not provide an export named '...'`
+   - **Solution**: Ensure Node.js version >= 18 is installed
+
+### Docker Issues
+
+1. **Container Start Failures**
+   - **Issue**: Services fail to start
+   - **Solution**: Check port conflicts and ensure Docker daemon is running
+
+2. **Volume Permission Issues**
+   - **Issue**: Database write permission errors
+   - **Solution**: Check volume permissions in docker-compose.yaml
+
+## Troubleshooting
+
+### Installation Verification
+Run these commands to verify your installation:
+
+1. Check Python environment:
+```bash
+python --version
+pip list
+```
+
+2. Verify Node.js setup:
+```bash
+node --version
+bun --version
+```
+
+3. Test Devika services:
+```bash
+# Backend
+python devika.py
+
+# Frontend
+cd ui/
+bun run dev
+```
+
+### Debug Mode
+To run Devika in debug mode:
+```bash
+# Backend with debug logging
+python devika.py --debug
+
+# Frontend with development server
+cd ui/
+bun run dev
+```
+
+### Logs Location
+- Backend logs: `./logs/devika.log`
+- Frontend build logs: `./ui/logs/`
+- Docker logs: Use `docker compose logs`
+
+For additional help, visit:
+- [GitHub Issues](https://github.com/stitionai/devika/issues)
+- [Discussions](https://github.com/stitionai/devika/discussions)
+- [Discord Community](https://discord.gg/CYRp43878y)
diff --git a/docs/architecture/REFACTORING.md b/docs/architecture/REFACTORING.md
new file mode 100644
index 00000000..3712b1b5
--- /dev/null
+++ b/docs/architecture/REFACTORING.md
@@ -0,0 +1,241 @@
+# Backend Architecture Refactoring Analysis
+
+## Current Architecture Overview
+
+### Core Components
+1. Main Flask Application (devika.py)
+   - Handles HTTP endpoints and WebSocket connections
+   - Uses threading for concurrent operations
+   - Manages agent state and project management
+
+2. Agent System (src/agents/)
+   - Multiple specialized agents (Runner, Planner, etc.)
+   - Mix of synchronous and asynchronous operations
+   - Direct state management through shared objects
+
+3. LLM Integration (src/llm/)
+   - Multiple model providers
+   - Synchronous inference with timeout handling
+   - Print-based debugging
+
+### Identified Issues
+
+#### 1. Logging Implementation
+Current Issues:
+- Direct print statements used throughout codebase
+  ```python
+  # Example from llm.py
+  print(f"Model: {self.model_id}, Enum: {model_enum}")
+  ```
+- Inconsistent error handling and logging patterns
+- Limited structured logging for debugging
+
+Recommendations:
+- Implement structured logging using Python's logging module
+- Define log levels (DEBUG, INFO, WARNING, ERROR)
+- Add context-specific loggers for different components
+- Implement log rotation and persistence
+
+Example Implementation:
+```python
+import logging
+
+# Component-specific logger
+logger = logging.getLogger(__name__)
+
+class LLM:
+    def inference(self, prompt: str, project_name: str) -> str:
+        logger.info(f"Starting inference for model={self.model_id} project={project_name}")
+        try:
+            # Inference logic
+            logger.debug(f"Model enum resolved: {model_enum}")
+        except Exception as e:
+            logger.error(f"Inference failed: {str(e)}", exc_info=True)
+```
+
+#### 2. State Management
+Current Issues:
+- Direct shared state access through AgentState class
+- Potential race conditions in multi-threaded operations
+- No message queue for state updates
+- Synchronization issues between WebSocket and HTTP endpoints
+
+Recommendations:
+- Implement message queue service (Redis/RabbitMQ)
+- Use atomic operations for state updates
+- Implement proper locking mechanisms
+- Add state versioning for consistency
+
+Example Architecture:
+```
+[WebSocket/HTTP] -> [Message Queue] -> [State Manager] -> [Agents]
+                                   -> [Event Subscribers]
+```
+
+Implementation Approach:
+```python
+from redis import Redis
+from dataclasses import dataclass
+from typing import Optional
+
+@dataclass
+class AgentStateEvent:
+    project_name: str
+    state_type: str
+    data: dict
+    version: int
+
+class StateManager:
+    def __init__(self):
+        self.redis = Redis()
+        self.pubsub = self.redis.pubsub()
+
+    async def update_state(self, event: AgentStateEvent):
+        await self.redis.publish(
+            f"state:{event.project_name}",
+            event.json()
+        )
+
+    async def get_state(self, project_name: str) -> Optional[dict]:
+        return await self.redis.get(f"state:{project_name}")
+```
+
+#### 3. Thread Race Conditions
+Current Issues:
+- Multiple threads accessing shared state
+- No proper synchronization in handle_message
+- Potential deadlocks in agent execution
+- Inconsistent state updates
+
+Recommendations:
+- Migrate to asyncio-based architecture
+- Implement proper locks and semaphores
+- Use async/await patterns consistently
+- Add request correlation IDs
+
+Example Implementation:
+```python
+from asyncio import Lock
+from contextlib import asynccontextmanager
+
+class AsyncAgentExecutor:
+    def __init__(self):
+        self._locks = {}
+        self._global_lock = Lock()
+
+    @asynccontextmanager
+    async def project_lock(self, project_name: str):
+        async with self._global_lock:
+            if project_name not in self._locks:
+                self._locks[project_name] = Lock()
+
+        async with self._locks[project_name]:
+            yield
+
+    async def execute(self, message: str, project_name: str):
+        async with self.project_lock(project_name):
+            # Safe execution logic
+            pass
+```
+
+#### 4. Asyncio Architecture
+Current Issues:
+- Mixed sync/async code
+- Blocking operations in async context
+- Inefficient resource usage
+- Complex error handling
+
+Recommendations:
+- Full migration to asyncio
+- Use FastAPI instead of Flask
+- Implement proper connection pooling
+- Add proper error boundaries
+
+Example Implementation:
+```python
+from fastapi import FastAPI, WebSocket
+from typing import Dict, Optional
+
+app = FastAPI()
+
+class AsyncDevika:
+    def __init__(self):
+        self.state_manager = StateManager()
+        self.agent_executor = AsyncAgentExecutor()
+        self.active_connections: Dict[str, WebSocket] = {}
+
+    async def handle_message(self, websocket: WebSocket, message: dict):
+        project_name = message["project_name"]
+        async with self.agent_executor.project_lock(project_name):
+            try:
+                await self.process_message(message)
+            except Exception as e:
+                await websocket.send_json({
+                    "error": str(e),
+                    "correlation_id": message.get("correlation_id")
+                })
+
+@app.websocket("/ws/{project_name}")
+async def websocket_endpoint(websocket: WebSocket, project_name: str):
+    await websocket.accept()
+    devika = AsyncDevika()
+    try:
+        while True:
+            message = await websocket.receive_json()
+            await devika.handle_message(websocket, message)
+    except Exception as e:
+        logger.error(f"WebSocket error: {str(e)}", exc_info=True)
+```
+
+## Implementation Plan
+
+### Phase 1: Logging Infrastructure
+1. Add structured logging
+2. Implement log rotation
+3. Add correlation IDs
+4. Remove print statements
+
+### Phase 2: State Management
+1. Set up Redis/RabbitMQ
+2. Implement state manager
+3. Add message queue patterns
+4. Migrate state access
+
+### Phase 3: Thread Safety
+1. Add proper locks
+2. Implement async executor
+3. Add request correlation
+4. Fix race conditions
+
+### Phase 4: Asyncio Migration
+1. Migrate to FastAPI
+2. Implement async patterns
+3. Add connection pooling
+4. Clean up error handling
+
+## Impact Analysis
+
+### Performance Benefits
+- Reduced memory usage
+- Better resource utilization
+- Improved concurrency
+- Lower latency
+
+### Reliability Improvements
+- Fewer race conditions
+- Better error handling
+- Consistent state management
+- Improved debugging
+
+### Maintainability Enhancements
+- Cleaner code structure
+- Better logging
+- Easier debugging
+- Simplified state management
+
+## Next Steps
+
+1. Create detailed implementation tickets for each phase
+2. Set up development environment with new dependencies
+3. Create proof-of-concept implementations
+4. Plan gradual migration strategy
diff --git a/ui/src/app.pcss b/ui/src/app.pcss
index 7ff61672..5b69529d 100644
--- a/ui/src/app.pcss
+++ b/ui/src/app.pcss
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --primary: #2F3337;
@@ -21,13 +21,13 @@
     --seperator: #E4E3E8;
 
     --window-outline: #E4E3E8;
-    
+
     --browser-window-dots: #E4E3E8;
     --browser-window-search: #F7F8FA;
     --browser-window-ribbon: #ffffff;
     --browser-window-foreground: #303438;
     --browser-window-background: #F7F8FA;
-    
+
     --terminal-window-dots: #E4E3E8;
     --terminal-window-ribbon: #ffffff;
     --terminal-window-background: #F7F8FA;
@@ -45,7 +45,7 @@
       --background: #1D1F21;
       --secondary: #2F3337;
       --tertiary: #81878C;
-  
+
       --foreground: #dcdcdc;
       --foreground-invert: #1D1F21;
       --foreground-light: #E6E9EB;
@@ -53,12 +53,12 @@
 
       --btn: #ECECEC;
       --btn-active: #ffffff;
-  
+
       --border: #2B2F34;
       --seperator: #495058;
-  
+
       --window-outline: #4E555D;
-      
+
       --browser-window-dots: #191C1E;
       --browser-window-search: #1D2124;
       --browser-window-ribbon: #292E32;
@@ -73,20 +73,21 @@
       --slider-empty: #2F3337;
       --slider-filled: #81878C;
       --slider-thumb: #ffffff;
-  
+
       --monologue-background: #242729;
       --monologue-outline: #464C51;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    -webkit-tap-highlight-color: transparent;
   }
-  
+
   /* Styling for scrollbar */
 
   /* WebKit (Chrome, Safari) */
@@ -100,7 +101,7 @@
   }
   *::-webkit-scrollbar-thumb:hover {
     background: #6b7280;
-  } 
+  }
 
   /* firefox  */
   @-moz-document url-prefix() {
@@ -134,4 +135,4 @@
   :global(*::-ms-scrollbar-thumb:hover) {
     background: #6b7280;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/lib/components/BrowserWidget.svelte b/ui/src/lib/components/BrowserWidget.svelte
index 838bdaad..bc640019 100644
--- a/ui/src/lib/components/BrowserWidget.svelte
+++ b/ui/src/lib/components/BrowserWidget.svelte
@@ -10,7 +10,7 @@
 
 </script>
 
-<div class="w-full h-full flex flex-col border-[3px] rounded-xl overflow-y-auto bg-browser-window-background border-window-outline">
+<div class="w-full h-full flex flex-col border-[3px] rounded-xl overflow-hidden bg-browser-window-background border-window-outline">
   <div class="p-2 flex items-center border-b border-border bg-browser-window-ribbon h-12">
     <div class="flex space-x-2 ml-2 mr-4">
       <div class="w-3 h-3 bg-browser-window-dots rounded-full"></div>
@@ -27,24 +27,28 @@
   </div>
   <div id="browser-content" class="flex-grow overflow-y-auto">
     {#if $agentState?.browser_session.screenshot}
-      <img
-        class="browser-img"
-        src={API_BASE_URL + "/api/get-browser-snapshot?snapshot_path=" + $agentState?.browser_session.screenshot}
-        alt="Browser snapshot"
-      />
+      <div class="relative w-full h-full">
+        <img
+          class="browser-img w-full h-full object-contain"
+          src={API_BASE_URL + "/api/get-browser-snapshot?snapshot_path=" + $agentState?.browser_session.screenshot}
+          alt="Browser snapshot"
+        />
+      </div>
     {:else}
-      <div class="text-gray-400 text-sm text-center mt-5"><strong>💡 TIP:</strong> You can include a Git URL in your prompt to clone a repo!</div>
+      <div class="text-gray-400 text-sm text-center mt-5 p-4"><strong>💡 TIP:</strong> You can include a Git URL in your prompt to clone a repo!</div>
     {/if}
   </div>
 </div>
 
 <style>
   #browser-url {
-    pointer-events: none
+    pointer-events: none;
   }
 
   .browser-img {
     display: block;
     object-fit: contain;
+    max-width: 100%;
+    height: auto;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/lib/components/EditorWidget.svelte b/ui/src/lib/components/EditorWidget.svelte
index 03c09ed1..e45495f4 100644
--- a/ui/src/lib/components/EditorWidget.svelte
+++ b/ui/src/lib/components/EditorWidget.svelte
@@ -87,13 +87,13 @@
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
     </div>
-      <div id="tabContainer" class="flex text-tertiary text-sm overflow-x-auto" bind:this={tabContainer} />
+      <div id="tabContainer" class="flex text-tertiary text-sm overflow-x-auto whitespace-nowrap" bind:this={tabContainer} />
       {#if Object.keys(models).length == 0}
-        <div class="flex items-center text-tertiary text-sm">Code viewer</div>
+        <div class="flex items-center text-tertiary text-sm truncate">Code viewer</div>
       {/if}
   </div>
-  <div class="h-full w-full flex">
-    <div class="min-w-[260px] overflow-y-auto bg-secondary h-full text-foreground text-sm flex flex-col pt-2" bind:this={sidebarContainer} />
+  <div class="h-full w-full flex flex-col md:flex-row">
+    <div class="w-full md:w-64 md:min-w-[260px] overflow-y-auto bg-secondary h-48 md:h-full text-foreground text-sm flex flex-col pt-2" bind:this={sidebarContainer} />
     <div class="h-full w-full rounded-bl-lg bg-terminal-window-background p-0" bind:this={editorContainer} />
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/lib/components/ErrorFallback.svelte b/ui/src/lib/components/ErrorFallback.svelte
new file mode 100644
index 00000000..3bddc360
--- /dev/null
+++ b/ui/src/lib/components/ErrorFallback.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let message = "An error occurred";
+  export let retryAction = () => window.location.reload();
+</script>
+
+<div class="flex items-center justify-center h-full">
+  <div class="text-center">
+    <p class="text-red-500 mb-2">{message}</p>
+    <button
+      class="px-4 py-2 bg-primary text-foreground-invert rounded hover:bg-btn-active"
+      on:click={retryAction}>
+      Retry
+    </button>
+  </div>
+</div>
diff --git a/ui/src/lib/components/LoadingSpinner.svelte b/ui/src/lib/components/LoadingSpinner.svelte
new file mode 100644
index 00000000..21bff4aa
--- /dev/null
+++ b/ui/src/lib/components/LoadingSpinner.svelte
@@ -0,0 +1,11 @@
+<script>
+  export let size = "h-8 w-8";
+  export let message = "Loading...";
+</script>
+
+<div class="flex items-center justify-center h-full">
+  <div class="text-center">
+    <div class="animate-spin rounded-full {size} border-b-2 border-primary mx-auto mb-4"></div>
+    <p class="text-foreground-light">{message}</p>
+  </div>
+</div>
diff --git a/ui/src/lib/components/TerminalWidget.svelte b/ui/src/lib/components/TerminalWidget.svelte
index ec13f128..e12e8d02 100644
--- a/ui/src/lib/components/TerminalWidget.svelte
+++ b/ui/src/lib/components/TerminalWidget.svelte
@@ -42,23 +42,19 @@
         let output = state.terminal_session.output || "Waiting...";
         let title = state.terminal_session.title || "Terminal";
 
-        // Check if the current state is different from the previous state
         if (
           command !== previousState.command ||
           output !== previousState.output ||
           title !== previousState.title
         ) {
-          // addCommandAndOutput(command, output, title);
           if (title) {
             document.getElementById("terminal-title").innerText = title;
           }
           terminal.reset();
           terminal.write(`$ ${command}\r\n\r\n${output}\r\n`);
-          // Update the previous state
           previousState = { command, output, title };
         }
       } else {
-        // Reset the terminal
         terminal.reset();
       }
 
@@ -76,27 +72,28 @@
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
       <div class="w-3 h-3 rounded-full bg-terminal-window-dots"></div>
     </div>
-    <span id="terminal-title" class="text-tertiary text-sm">Terminal</span>
+    <span id="terminal-title" class="text-tertiary text-sm truncate">Terminal</span>
   </div>
   <div
     id="terminal-content"
-    class="w-full h-full rounded-bl-lg bg-terminal-window-background "
+    class="w-full h-full rounded-bl-lg bg-terminal-window-background overflow-x-auto"
   ></div>
 </div>
 
 <style>
   #terminal-content :global(.xterm) {
     padding: 10px;
+    max-width: 100%;
   }
   #terminal-content :global(.xterm-screen) {
     width: 100% !important;
-
+    max-width: 100vw;
   }
   #terminal-content :global(.xterm-rows) {
     width: 100% !important;
     height: 100% !important;
-    overflow-x: scroll !important;
-    /* hide the scrollbar */
-    scrollbar-width: none;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
   }
 </style>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 0793500a..5f05f4a5 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -39,19 +39,37 @@
 <div class="flex h-full flex-col flex-1 gap-4 p-4 overflow-hidden">
   <ControlPanel />
 
-  <div class="flex h-full overflow-x-scroll">
-    <div class="flex flex-1 min-w-[calc(100vw-120px)] h-full gap-2">
-      <div class="flex flex-col gap-2 w-full h-full pr-4">
-        <MessageContainer />
-        <MessageInput />
+  {#if $serverStatus === undefined}
+    <div class="flex items-center justify-center h-full">
+      <div class="text-center">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+        <p class="text-foreground-light">Connecting to server...</p>
       </div>
-      <div class="flex flex-col gap-4 h-full w-full p-2">
-        <BrowserWidget />
-        <TerminalWidget />
+    </div>
+  {:else if !$serverStatus}
+    <div class="flex items-center justify-center h-full">
+      <div class="text-center">
+        <p class="text-red-500 mb-2">Failed to connect to server</p>
+        <button
+          class="px-4 py-2 bg-primary text-foreground-invert rounded hover:bg-btn-active"
+          on:click={() => window.location.reload()}>
+          Retry Connection
+        </button>
       </div>
     </div>
-    <div class="flex flex-col gap-2 min-w-[calc(100vw-120px)] h-full pr-4 p-2">
-      <EditorWidget />
+  {:else}
+    <div class="flex h-full overflow-x-auto md:overflow-x-hidden">
+      <div class="flex flex-col md:flex-row w-full h-full gap-2">
+        <div class="flex flex-col gap-2 w-full h-full md:w-1/2 lg:w-2/5">
+          <MessageContainer />
+          <MessageInput />
+        </div>
+        <div class="flex flex-col gap-4 h-full w-full md:w-1/2 lg:w-3/5 p-2">
+          <BrowserWidget />
+          <TerminalWidget />
+          <EditorWidget />
+        </div>
+      </div>
     </div>
-  </div>
-</div>
\ No newline at end of file
+  {/if}
+</div>