diff --git a/README.md b/README.md
index be8a1bf..0a520d9 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,13 @@
 ProdHub is a modern, all-in-one web application built to help you organize, achieve, and grow. Seamlessly manage projects, tasks, habits, and your calendar from a single, intuitive platform—all with smart AI-powered features and robust security.
 
 **Try ProdHub Now**  
-We are available at: [https://my-productivity-hub-5a3ba.web.app/](https://my-productivity-hub-5a3ba.web.app/)
+🌐 Web App: [https://my-productivity-hub-5a3ba.web.app/](https://my-productivity-hub-5a3ba.web.app/)  
+🧩 Chrome Extension: [ProdHub on the Chrome Web Store](#) *(coming soon)*
 
 ![ProdHub](images/dashboard_2.png)
 
+---
+
 ## Key Features
 
 **Dashboard Overview**
@@ -30,13 +33,13 @@ Break down projects into actionable steps. Set priorities (High, Medium, Low), a
 
 ProdHub uses the Google Gemini API for smart, context-aware planning:
 
-- **Goal Decomposition:** Turns your big ambitions into actionable projects. And with Ai gemerated pre tasks for better understanding.
+- **Goal Decomposition:** Turns your big ambitions into actionable projects. And with AI generated pre tasks for better understanding.
 
 - **Daily Planning:** Creates a prioritized daily schedule based on your tasks and calendar.
 
   - Smart Scheduling: The "Plan My Day" button on the dashboard will trigger an AI that acts as a productivity coach. It will analyze overdue tasks, today's high-priority items, and your fixed Google Calendar appointments.
 
-  - Actionable Output: Instead of just a list, the AI will generate a suggested schedule with time blocks and priorities. It will be presented in a clean, easy-to-read modal. For example, it might suggest: "9:00 AM - 10:00 AM: Focus on 'Draft Project Proposal' (Overdue Task)" and then slot other tasks around your scheduled meetings.
+  - Actionable Output: Instead of just a list, the AI will generate a suggested schedule with time blocks and priorities. It will be presented in a clean, easy-to-read modal.
 
   - Context-Aware: If you haven't synced your calendar, the planner will still work with your tasks but will also gently remind you that connecting your calendar can lead to even better plans.
 
@@ -48,13 +51,115 @@ ProdHub uses the Google Gemini API for smart, context-aware planning:
 
 **Secure Calendar Integration:** Sync your Google Calendar securely and privately. ProdHub only reads event information to help you plan and never stores or modifies your calendar data. Your data stays yours.
 
-<!--**Persistent, Private Data:**
+---
+
+## 🧩 Chrome Extension
+
+ProdHub is also available as a **Chrome side panel extension**, so you can access your full productivity dashboard without leaving your current tab.
+
+### Features of the Extension
+
+- Opens as a **side panel** — keeps your current tab intact
+- Full access to all ProdHub features: tasks, habits, goals, schedule, and AI planner
+- **Responsive UI** — compact, mobile-friendly layout optimized for the narrow side panel
+- Secure Google sign-in via Firebase Authentication
+- Real-time sync with your Firestore data across web and extension
+
+### Installing the Extension (Development / Unpacked)
+
+1. **Build the extension bundle:**
+   ```sh
+   npm run build:extension
+   ```
+   This runs `react-scripts build` and then copies `manifest.extension.json` → `build/manifest.json`, making the `build/` folder a valid Chrome extension package.
+
+2. **Load in Chrome:**
+   - Open `chrome://extensions/` in your browser
+   - Toggle **Developer mode** ON (top right)
+   - Click **"Load unpacked"**
+   - Select the `build/` folder
+
+3. **Open the side panel:**
+   - Click the ProdHub icon in your Chrome toolbar
+   - The side panel will open. Sign in with Google to get started.
+
+### Publishing to the Chrome Web Store
+
+Follow these steps to publish your own instance of the extension:
+
+#### Step 1 — Prepare & Build
+
+```sh
+npm run build:extension
+```
+
+Then create a ZIP of the `build/` folder contents (**not** the folder itself — the `manifest.json` must be at the root of the ZIP):
+
+```sh
+# PowerShell (Windows)
+Compress-Archive -Path .\build\* -DestinationPath prodhub-extension.zip
+```
+
+```sh
+# macOS / Linux
+cd build && zip -r ../prodhub-extension.zip . && cd ..
+```
+
+> [!IMPORTANT]
+> Verify that `manifest.json` is at the **root** of the ZIP (not inside a subfolder). Chrome will reject the package otherwise.
+
+#### Step 2 — Create a Developer Account
+
+- Go to the [Chrome Developer Dashboard](https://chrome.google.com/webstore/devconsole/)
+- Sign in with your Google account
+- Pay the one-time **$5 developer registration fee** if this is your first extension
+
+#### Step 3 — Upload the Extension
+
+1. Click **"New Item"** in the dashboard
+2. Drag and drop `prodhub-extension.zip` into the upload area
+3. Wait for it to process — you will be taken to the listing editor
+
+#### Step 4 — Complete the Store Listing
+
+Fill in the following required fields:
+
+| Field | Suggested Value |
+|---|---|
+| **Name** | ProdHub – Productivity Side Panel |
+| **Short description** | All-in-one productivity: tasks, habits, goals & AI planner in your Chrome side panel. |
+| **Category** | Productivity |
+| **Language** | English |
+| **Screenshots** | At least 1 screenshot (1280×800 or 640×400 px) |
+| **Privacy Policy URL** | Link to your privacy policy (required if you handle user data) |
 
-Everything you add is saved in real-time to your secure, private Firebase account. Your information is always up-to-date and accessible wherever you are.
+> [!NOTE]
+> ProdHub uses Firebase Authentication and Firestore. In the **Privacy Practices** tab you must declare that your extension collects user authentication data (email, name) stored in Firebase.
 
-**Safe Sign-In:**
+#### Step 5 — Submit for Review
 
-Log in with Google or a traditional email and password. ProdHub prioritizes your privacy and security every step of the way.-->
+- Set visibility to **Public** (or **Unlisted** for testing)
+- Click **"Submit for Review"**
+- Review typically takes **a few hours to a few days**
+
+#### Extension Manifest Reference
+
+The extension uses `manifest_version: 3` with the following key configuration:
+
+```json
+{
+  "name": "ProdHub Chrome Extension",
+  "version": "1.0",
+  "manifest_version": 3,
+  "permissions": ["sidePanel", "identity"],
+  "side_panel": { "default_path": "index.html" },
+  "action": { "default_title": "Open ProdHub Panel" }
+}
+```
+
+The extension manifest lives at `public/manifest.extension.json` and is automatically copied to `build/manifest.json` by the `build:extension` script.
+
+---
 
 ## Technology
 
@@ -65,6 +170,9 @@ ProdHub is built for speed, reliability, and a great user experience.
 - **Styling:** Tailwind CSS
 - **AI Integration:** Google Gemini API
 - **Calendar Integration:** Google Calendar API via Google Identity Services
+- **Extension:** Chrome Manifest V3 Side Panel API
+
+---
 
 ## Get Started with ProdHub
 
@@ -138,12 +246,14 @@ Update `src/App.js` to use these variables for your `firebaseConfig`.
 
 #### 6. Run and Deploy
 
-- **Start locally:**  
-  `npm start` (opens at `http://localhost:3000`)
-- **Build:**  
-  `npm run build`
-- **Deploy:**  
-  `firebase deploy` (ensure `firebase.json` is set to use the `build` folder)
+| Command | Description |
+|---|---|
+| `npm start` | Start local dev server at `http://localhost:3000` |
+| `npm run build` | Build production web app |
+| `npm run build:extension` | Build Chrome extension package in `build/` |
+| `firebase deploy` | Deploy web app to Firebase Hosting |
+
+---
 
 ## Running with Docker 🐳
 
@@ -158,12 +268,12 @@ This project is fully containerized, allowing you to run it in a consistent and
 1.  **Clone the Repository**
 
     ```bash
-    git clone [https://github.com/Rupesh4604/my-productivity-hub.git](https://github.com/Rupesh4604/my-productivity-hub.git)
+    git clone https://github.com/Rupesh4604/my-productivity-hub.git
     cd ProdHub
     ```
 
 2.  **Create an Environment File**
-    Create a file named `.env` in the root of the project. This file will hold your secret keys. Copy the contents of `.env.local` or add the following variables, replacing the placeholder values with your actual credentials:
+    Create a file named `.env` in the root of the project. Copy the contents of `.env.local` or add the following variables, replacing the placeholder values with your actual credentials:
 
     ```env
     REACT_APP_FIREBASE_API_KEY=AIzaSy...
@@ -177,20 +287,16 @@ This project is fully containerized, allowing you to run it in a consistent and
     ```
 
 3.  **Build and Run the Container**
-    Open your terminal in the project root and run the following command:
 
     ```bash
     docker-compose up --build
     ```
 
-    This command will build the Docker image based on the `Dockerfile` and then start the container.
-
 4.  **Access the Application**
-    Once the container is running, open your web browser and navigate to:
-    [**http://localhost:3000**](http://localhost:3000)
-
-    You should see the ProdHub application running live! To stop the application, press `Ctrl + C` in your terminal.
+    Once the container is running, open your browser at [**http://localhost:3000**](http://localhost:3000).  
+    To stop, press `Ctrl + C` in your terminal.
 
+---
 
 **Start your journey with ProdHub today.**
 
diff --git a/package.json b/package.json
index e626573..192d97c 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "my-productivity-hub",
   "version": "0.1.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
     "@react-oauth/google": "^0.12.2",
     "@testing-library/dom": "^10.4.0",
@@ -18,6 +19,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build:extension": "react-scripts build && node -e \"require('fs').copyFileSync('./build/manifest.extension.json', './build/manifest.json')\"",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
diff --git a/prodhub-extension.zip b/prodhub-extension.zip
new file mode 100644
index 0000000..e5b4155
Binary files /dev/null and b/prodhub-extension.zip differ
diff --git a/public/background.js b/public/background.js
new file mode 100644
index 0000000..d7262b8
--- /dev/null
+++ b/public/background.js
@@ -0,0 +1,3 @@
+chrome.sidePanel
+  .setPanelBehavior({ openPanelOnActionClick: true })
+  .catch((error) => console.error(error));
diff --git a/public/manifest.extension.json b/public/manifest.extension.json
new file mode 100644
index 0000000..60bf6da
--- /dev/null
+++ b/public/manifest.extension.json
@@ -0,0 +1,36 @@
+{
+  "name": "ProdHub Chrome Extension",
+  "version": "1.0",
+  "manifest_version": 3,
+  "description": "ProdHub – your all-in-one side-panel productivity hub. Manage tasks, habits, goals, and your schedule without ever leaving your current tab.",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": [
+    "sidePanel",
+    "identity"
+  ],
+  "oauth2": {
+    "client_id": "357244560688-4ibqpt07g54ns83qtimb2rtsa3p42uur.apps.googleusercontent.com",
+    "scopes": [
+      "profile",
+      "email",
+      "openid"
+    ]
+  },
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "action": {
+    "default_title": "Open ProdHub Panel",
+    "default_icon": "logo192.png"
+  },
+  "side_panel": {
+    "default_path": "index.html"
+  },
+  "icons": {
+    "128": "logo192.png",
+    "192": "logo192.png",
+    "512": "logo512.png"
+  }
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 98949f9..0e01799 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ import AllTasksView from './features/tasks/AllTasksView';
 import ScheduleView from './features/schedule/ScheduleView';
 import HabitTrackerView from './features/habits/HabitTrackerView';
 import WeeklyReviewView from './features/review/WeeklyReviewView';
+import { Menu, Book } from 'lucide-react';
 
 function HubApp({ user, handleSignOut }) {
     const [projects, setProjects] = useState([]);
@@ -22,6 +23,7 @@ function HubApp({ user, handleSignOut }) {
     const [habitEntries, setHabitEntries] = useState([]);
     const [activeView, setActiveView] = useState('dashboard');
     const [selectedProjectId, setSelectedProjectId] = useState(null);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
     const [syncedEvents, setSyncedEvents] = useState([]);
     const [tokenClient, setTokenClient] = useState(null);
@@ -101,18 +103,36 @@ function HubApp({ user, handleSignOut }) {
     const handleSetView = (view, projectId = null) => {
         setActiveView(view);
         setSelectedProjectId(projectId);
+        setIsSidebarOpen(false); // Auto-close sidebar on mobile
     };
 
     return (
-        <div className="bg-gray-900 text-gray-100 min-h-screen font-sans flex">
-            <Sidebar
-                onViewChange={handleSetView}
-                projects={projects}
-                goals={goals}
-                userId={user.uid}
-                handleSignOut={handleSignOut}
-            />
-            <main className="flex-1 p-4 sm:p-6 lg:p-8 overflow-y-auto">
+        <div className="bg-gray-900 text-gray-100 min-h-screen font-sans flex flex-col md:flex-row">
+            {/* Mobile Header */}
+            <div className="md:hidden flex items-center justify-between p-4 border-b border-gray-700/50 bg-gray-900">
+                <h1 className="text-xl font-bold text-blue-400 flex items-center gap-2">
+                    <Book size={20} /> ProdHub
+                </h1>
+                <button 
+                    onClick={() => setIsSidebarOpen(!isSidebarOpen)} 
+                    className="text-gray-300 hover:text-white p-2 rounded-md hover:bg-gray-800 transition-colors"
+                >
+                    <Menu size={24} />
+                </button>
+            </div>
+
+            {/* Sidebar Container */}
+            <div className={`${isSidebarOpen ? 'block' : 'hidden'} md:block md:w-64 flex-shrink-0 h-[calc(100vh-73px)] md:h-screen w-full`}>
+                <Sidebar
+                    onViewChange={handleSetView}
+                    projects={projects}
+                    goals={goals}
+                    userId={user.uid}
+                    handleSignOut={handleSignOut}
+                />
+            </div>
+            
+            <main className={`${isSidebarOpen ? 'hidden md:block' : 'block'} flex-1 p-4 sm:p-6 lg:p-8 overflow-y-auto max-h-screen`}>
                 {activeView === 'dashboard' && (
                     <Dashboard
                         projects={projects}
diff --git a/src/components/shared/TaskItem.jsx b/src/components/shared/TaskItem.jsx
index bbb8cab..6b978ee 100644
--- a/src/components/shared/TaskItem.jsx
+++ b/src/components/shared/TaskItem.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Book, Calendar, CheckSquare, Edit2, Save, Tag, Trash2 } from 'lucide-react';
+import { Calendar, Edit2, Trash2, Book } from 'lucide-react';
 import { doc, updateDoc, deleteDoc } from 'firebase/firestore';
 import { auth, db } from '../../config/firebase';
 import { appId } from '../../config/env';
@@ -10,6 +10,7 @@ export default function TaskItem({ task, projects = [], isCompact = false }) {
   const [isEditing, setIsEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(task.title);
   const [editPriority, setEditPriority] = useState(task.priority || 'Medium');
+  const [editDueDate, setEditDueDate] = useState(task.dueDate || '');
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const userId = auth?.currentUser?.uid;
 
@@ -27,6 +28,8 @@ export default function TaskItem({ task, projects = [], isCompact = false }) {
     await updateDoc(doc(db, `artifacts/${appId}/users/${userId}/tasks`, task.id), {
       title: editTitle,
       priority: editPriority,
+      // Store as ISO date string (YYYY-MM-DD) or null to clear
+      dueDate: editDueDate || null,
     });
     setIsEditing(false);
   };
@@ -38,15 +41,22 @@ export default function TaskItem({ task, projects = [], isCompact = false }) {
   };
 
   const projectName = projects.find((p) => p.id === task.projectId)?.name;
-  const priorityColor = { High: 'text-red-400', Medium: 'text-yellow-400', Low: 'text-green-400' };
+  const priorityColor = { High: 'text-red-400', Medium: 'text-amber-400', Low: 'text-emerald-400' };
+  const priorityDot = { High: 'bg-red-400', Medium: 'bg-amber-400', Low: 'bg-emerald-400' };
 
   if (isCompact) {
     return (
-      <div className="flex items-center justify-between text-sm p-2 rounded-md bg-gray-900/30 hover:bg-gray-900/50">
-        <span className={`truncate ${task.completed ? 'line-through text-gray-500' : ''}`}>{task.title}</span>
-        <div className="flex items-center gap-2 text-gray-400">
+      <div className="flex items-center gap-2 text-xs p-2 rounded-xl bg-gray-900/40 border border-gray-700/30 hover:border-gray-600/50 hover:bg-gray-900/60 transition-all duration-150">
+        <button onClick={handleToggleComplete} className="flex-shrink-0">
+          <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors duration-200 ${task.completed ? 'bg-emerald-500 border-emerald-500' : 'border-gray-600 hover:border-gray-400'}`}>
+            {task.completed && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
+          </div>
+        </button>
+        <span className={`flex-1 truncate ${task.completed ? 'line-through text-gray-600' : 'text-gray-300'}`}>{task.title}</span>
+        <div className="flex items-center gap-1.5 flex-shrink-0 text-gray-500">
+          {task.priority && <div className={`w-1.5 h-1.5 rounded-full ${priorityDot[task.priority]}`} />}
           {task.dueDate && <span>{formatDate(new Date(task.dueDate))}</span>}
-          {projectName && <span className="text-xs bg-gray-700 px-2 py-0.5 rounded">{projectName}</span>}
+          {projectName && <span className="text-xs bg-gray-700/80 px-1.5 py-0.5 rounded-md text-gray-400 max-w-[60px] truncate">{projectName}</span>}
         </div>
       </div>
     );
@@ -61,69 +71,143 @@ export default function TaskItem({ task, projects = [], isCompact = false }) {
         title="Delete Task"
         message={`Are you sure you want to delete this task: "${task.title}"?`}
       />
-      <div className={`p-3 rounded-md transition-colors flex items-start gap-3 ${task.completed ? 'bg-gray-800/50' : 'bg-gray-900/50'}`}>
-        <button onClick={handleToggleComplete} className="mt-1">
-          <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${task.completed ? 'bg-blue-500 border-blue-500' : 'border-gray-500'}`}>
-            {task.completed && <CheckSquare size={16} className="text-white" />}
-          </div>
-        </button>
-        <div className="flex-grow">
-          {isEditing ? (
-            <form onSubmit={handleUpdate} className="flex gap-2 items-center">
-              <input
-                type="text"
-                value={editTitle}
-                onChange={(e) => setEditTitle(e.target.value)}
-                className="flex-grow bg-gray-700 border border-gray-600 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
-                autoFocus
-              />
-              <select
-                value={editPriority}
-                onChange={(e) => setEditPriority(e.target.value)}
-                className="bg-gray-700 border border-gray-600 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
-              >
-                <option>High</option>
-                <option>Medium</option>
-                <option>Low</option>
-              </select>
-              <button type="submit" className="p-1.5 bg-green-600 hover:bg-green-700 rounded-md">
-                <Save size={16} />
-              </button>
-            </form>
-          ) : (
-            <p className={`text-gray-200 ${task.completed ? 'line-through text-gray-500' : ''}`}>{task.title}</p>
-          )}
-          <div className="flex items-center gap-4 text-xs text-gray-400 mt-1">
-            {task.dueDate && (
-              <div className="flex items-center gap-1">
-                <Calendar size={12} /> {formatDate(new Date(task.dueDate))}
-              </div>
-            )}
-            {task.priority && (
-              <div className={`flex items-center gap-1 font-semibold ${priorityColor[task.priority]}`}>
-                <Tag size={12} /> {task.priority}
-              </div>
-            )}
-            {projectName && (
-              <div className="flex items-center gap-1">
-                <Book size={12} /> {projectName}
-              </div>
+      <div className={`p-3 rounded-2xl border transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md ${task.completed ? 'bg-gray-800/30 border-gray-700/20' : 'bg-gray-800/50 border-gray-700/40 hover:border-gray-600/60'}`}>
+        <div className="flex items-start gap-3">
+          <button onClick={handleToggleComplete} className="mt-0.5 flex-shrink-0">
+            <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${task.completed ? 'bg-emerald-500 border-emerald-500' : 'border-gray-500 hover:border-blue-400'}`}>
+              {task.completed && <div className="w-2 h-2 rounded-full bg-white" />}
+            </div>
+          </button>
+          <div className="flex-grow min-w-0">
+            {isEditing ? (
+              <form onSubmit={handleUpdate} className="flex flex-col gap-2">
+
+                {/* ── MOBILE / extension: stacked layout ── */}
+                <div className="lg:hidden flex flex-col gap-2">
+                  {/* Row 1: Title */}
+                  <input
+                    type="text"
+                    value={editTitle}
+                    onChange={(e) => setEditTitle(e.target.value)}
+                    placeholder="Task title"
+                    className="w-full bg-gray-700/80 border border-gray-600 rounded-xl px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                    autoFocus
+                  />
+                  {/* Row 2: Priority + Date */}
+                  <div className="flex items-center gap-2">
+                    <select
+                      value={editPriority}
+                      onChange={(e) => setEditPriority(e.target.value)}
+                      className="flex-1 bg-gray-700/80 border border-gray-600 rounded-xl px-2 py-1.5 text-xs focus:outline-none"
+                    >
+                      <option>High</option>
+                      <option>Medium</option>
+                      <option>Low</option>
+                    </select>
+                    <div className="flex items-center flex-1 gap-1 bg-gray-700/80 border border-gray-600 rounded-xl px-2 py-1.5 text-xs">
+                      <Calendar size={11} className="text-gray-400 flex-shrink-0" />
+                      <input
+                        type="date"
+                        value={editDueDate}
+                        onChange={(e) => setEditDueDate(e.target.value)}
+                        className="flex-1 min-w-0 bg-transparent text-gray-300 focus:outline-none [color-scheme:dark]"
+                        title="Due date (optional)"
+                      />
+                      {editDueDate && (
+                        <button type="button" onClick={() => setEditDueDate('')} className="flex-shrink-0 text-gray-500 hover:text-red-400 transition-colors" title="Clear date">×</button>
+                      )}
+                    </div>
+                  </div>
+                  {/* Row 3: Buttons */}
+                  <div className="flex gap-2">
+                    <button type="submit" className="flex-1 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded-xl text-xs font-semibold transition-colors">
+                      Save
+                    </button>
+                    <button type="button" onClick={() => setIsEditing(false)} className="flex-1 py-1.5 bg-gray-600 hover:bg-gray-700 rounded-xl text-xs font-semibold transition-colors">
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+
+                {/* ── DESKTOP (lg+): single inline row ── */}
+                <div className="hidden lg:flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={editTitle}
+                    onChange={(e) => setEditTitle(e.target.value)}
+                    placeholder="Task title"
+                    className="flex-1 bg-gray-700/80 border border-gray-600 rounded-xl px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                    autoFocus
+                  />
+                  <select
+                    value={editPriority}
+                    onChange={(e) => setEditPriority(e.target.value)}
+                    className="w-28 bg-gray-700/80 border border-gray-600 rounded-xl px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                  >
+                    <option>High</option>
+                    <option>Medium</option>
+                    <option>Low</option>
+                  </select>
+                  <div className="flex items-center gap-1 bg-gray-700/80 border border-gray-600 rounded-xl px-2 py-1.5 text-xs">
+                    <Calendar size={11} className="text-gray-400 flex-shrink-0" />
+                    <input
+                      type="date"
+                      value={editDueDate}
+                      onChange={(e) => setEditDueDate(e.target.value)}
+                      className="w-28 bg-transparent text-gray-300 focus:outline-none [color-scheme:dark]"
+                      title="Due date (optional)"
+                    />
+                    {editDueDate && (
+                      <button type="button" onClick={() => setEditDueDate('')} className="text-gray-500 hover:text-red-400 transition-colors" title="Clear date">×</button>
+                    )}
+                  </div>
+                  <button type="submit" className="flex-shrink-0 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded-xl text-xs font-semibold transition-colors">
+                    Save
+                  </button>
+                  <button type="button" onClick={() => setIsEditing(false)} className="flex-shrink-0 px-3 py-1.5 bg-gray-600 hover:bg-gray-700 rounded-xl text-xs font-semibold transition-colors">
+                    Cancel
+                  </button>
+                </div>
+
+              </form>
+            ) : (
+              <p className={`text-sm leading-snug ${task.completed ? 'line-through text-gray-500' : 'text-gray-200'}`}>{task.title}</p>
             )}
+            <div className="flex items-center flex-wrap gap-2.5 text-xs text-gray-500 mt-1.5">
+              {task.dueDate && (
+                <div className="flex items-center gap-1">
+                  <Calendar size={11} />
+                  {formatDate(new Date(task.dueDate))}
+                </div>
+              )}
+              {task.priority && (
+                <div className={`flex items-center gap-1 font-medium ${priorityColor[task.priority]}`}>
+                  <div className={`w-1.5 h-1.5 rounded-full ${priorityDot[task.priority]}`} />
+                  {task.priority}
+                </div>
+              )}
+              {projectName && (
+                <div className="flex items-center gap-1">
+                  <Book size={11} />
+                  <span className="truncate max-w-[80px]">{projectName}</span>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-0.5 flex-shrink-0">
+            <button
+              onClick={() => setIsEditing(!isEditing)}
+              className="p-1.5 text-gray-500 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
+            >
+              <Edit2 size={13} />
+            </button>
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="p-1.5 text-gray-500 hover:text-red-400 hover:bg-gray-700 rounded-lg transition-colors"
+            >
+              <Trash2 size={13} />
+            </button>
           </div>
-        </div>
-        <div className="flex items-center gap-1">
-          <button
-            onClick={() => setIsEditing(!isEditing)}
-            className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded-md"
-          >
-            <Edit2 size={16} />
-          </button>
-          <button
-            onClick={() => setShowDeleteModal(true)}
-            className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-gray-700 rounded-md"
-          >
-            <Trash2 size={16} />
-          </button>
         </div>
       </div>
     </>
diff --git a/src/contexts/AuthContext.jsx b/src/contexts/AuthContext.jsx
index e94dbd1..08b6a9f 100644
--- a/src/contexts/AuthContext.jsx
+++ b/src/contexts/AuthContext.jsx
@@ -5,6 +5,7 @@ import {
   onAuthStateChanged,
   signInWithEmailAndPassword,
   signInWithPopup,
+  signInWithCredential,
   signOut,
 } from 'firebase/auth';
 import { auth } from '../config/firebase';
@@ -37,8 +38,26 @@ export function AuthProvider({ children }) {
 
   const signInWithGoogle = async () => {
     if (!auth) throw new Error('Auth not configured');
-    const provider = new GoogleAuthProvider();
-    await signInWithPopup(auth, provider);
+    
+    if (window.chrome && window.chrome.identity) {
+      return new Promise((resolve, reject) => {
+        window.chrome.identity.getAuthToken({ interactive: true }, async (token) => {
+          if (window.chrome.runtime.lastError || !token) {
+            return reject(window.chrome.runtime.lastError || new Error('No OAuth token returned.'));
+          }
+          try {
+            const credential = GoogleAuthProvider.credential(null, token);
+            await signInWithCredential(auth, credential);
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        });
+      });
+    } else {
+      const provider = new GoogleAuthProvider();
+      await signInWithPopup(auth, provider);
+    }
   };
 
   const emailSignIn = async (email, password) => {
diff --git a/src/features/dashboard/Dashboard.jsx b/src/features/dashboard/Dashboard.jsx
index 8ecf4b1..0c93c1e 100644
--- a/src/features/dashboard/Dashboard.jsx
+++ b/src/features/dashboard/Dashboard.jsx
@@ -124,59 +124,83 @@ Generate a step-by-step plan.`;
         error={planningError}
         retry={handlePlanMyDay}
       />
-      <div className="space-y-8">
-        <div className="flex flex-wrap gap-4 justify-between items-center">
-          <h1 className="text-4xl font-bold text-white">Dashboard</h1>
+      <div className="space-y-4">
+        {/* Header */}
+        <div className="flex items-center justify-between gap-2">
+          <h1 className="text-2xl font-bold text-white tracking-tight">Dashboard</h1>
           <button
             onClick={handlePlanMyDay}
             disabled={isPlanning}
-            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md font-semibold transition-colors disabled:bg-blue-800 disabled:cursor-not-allowed"
+            className="flex items-center gap-1.5 bg-gradient-to-r from-blue-600 to-violet-600 hover:from-blue-500 hover:to-violet-500 px-3 py-1.5 rounded-xl text-sm font-semibold transition-all duration-200 shadow-lg shadow-blue-900/30 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
           >
-            {isPlanning ? <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> : <Sparkles size={18} />}
+            {isPlanning ? (
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
+            ) : (
+              <Sparkles size={15} />
+            )}
             Plan My Day
           </button>
         </div>
+
+        {/* Overdue Banner */}
         {overdueTasks.length > 0 && (
-          <div className="bg-red-900/50 border border-red-700 rounded-lg p-4">
-            <h2 className="text-xl font-semibold text-red-300 mb-3">Overdue Tasks ({overdueTasks.length})</h2>
-            <div className="space-y-2">
+          <div className="bg-red-950/60 border border-red-700/50 rounded-2xl p-3.5 backdrop-blur-sm">
+            <h2 className="text-sm font-semibold text-red-300 mb-2 flex items-center gap-1.5">
+              <span className="w-2 h-2 rounded-full bg-red-400 animate-pulse" />
+              Overdue Tasks ({overdueTasks.length})
+            </h2>
+            <div className="space-y-1.5">
               {overdueTasks.map((task) => (
                 <TaskItem key={task.id} task={task} projects={projects} isCompact={true} />
               ))}
             </div>
           </div>
         )}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="bg-gray-800/60 rounded-lg p-6 space-y-4">
-            <h2 className="text-2xl font-semibold text-gray-200">Upcoming Deadlines</h2>
+
+        {/* Main grid — stacked on mobile/panel, side-by-side on desktop */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {/* Upcoming Deadlines */}
+          <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 backdrop-blur-sm">
+            <h2 className="text-base font-semibold text-gray-200 mb-3">Upcoming Deadlines</h2>
             {upcomingTasks.length > 0 ? (
-              <div className="space-y-3">
+              <div className="space-y-2">
                 {upcomingTasks.map((task) => (
                   <TaskItem key={task.id} task={task} projects={projects} isCompact={true} />
                 ))}
               </div>
             ) : (
-              <p className="text-gray-400">No upcoming deadlines. Great job!</p>
+              <p className="text-gray-500 text-sm text-center py-4">No upcoming deadlines. Great job!</p>
             )}
           </div>
-          <div className="bg-gray-800/60 rounded-lg p-6 space-y-4">
-            <h2 className="text-2xl font-semibold text-gray-200">Projects Overview</h2>
-            <div className="space-y-4">
+
+          {/* Projects Overview */}
+          <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 backdrop-blur-sm">
+            <h2 className="text-base font-semibold text-gray-200 mb-3">Projects Overview</h2>
+            <div className="space-y-3">
               {goals.map((goal) => (
                 <GoalProgress key={goal.id} goal={goal} projects={goalProjects[goal.id] || []} onViewChange={onViewChange} />
               ))}
               {standaloneProjects.map((p) => (
-                <div key={p.id} className="cursor-pointer" onClick={() => onViewChange('project', p.id)}>
-                  <div className="flex justify-between items-center mb-1">
-                    <span className="font-medium text-gray-300">{p.name}</span>
-                    <span className="text-sm text-gray-400">{Math.round(p.progress || 0)}%</span>
+                <div
+                  key={p.id}
+                  className="cursor-pointer group hover:-translate-y-0.5 transition-transform duration-200"
+                  onClick={() => onViewChange('project', p.id)}
+                >
+                  <div className="flex justify-between items-center mb-1.5">
+                    <span className="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">{p.name}</span>
+                    <span className="text-xs text-gray-500">{Math.round(p.progress || 0)}%</span>
                   </div>
-                  <div className="w-full bg-gray-700 rounded-full h-2.5">
-                    <div className="bg-blue-500 h-2.5 rounded-full" style={{ width: `${p.progress || 0}%` }}></div>
+                  <div className="w-full bg-gray-700/60 rounded-full h-1.5">
+                    <div
+                      className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all duration-700"
+                      style={{ width: `${p.progress || 0}%` }}
+                    />
                   </div>
                 </div>
               ))}
-              {projects.length === 0 && <p className="text-gray-400">No projects yet. Add one from the sidebar!</p>}
+              {projects.length === 0 && (
+                <p className="text-gray-500 text-sm text-center py-4">No projects yet. Add one from the sidebar!</p>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/features/dashboard/GoalProgress.jsx b/src/features/dashboard/GoalProgress.jsx
index 475ef0c..4258f64 100644
--- a/src/features/dashboard/GoalProgress.jsx
+++ b/src/features/dashboard/GoalProgress.jsx
@@ -11,29 +11,39 @@ export default function GoalProgress({ goal, projects, onViewChange }) {
   }, [projects]);
 
   return (
-    <div className="space-y-2">
-      <button onClick={() => setIsOpen(!isOpen)} className="w-full text-left">
+    <div className="space-y-1.5">
+      <button onClick={() => setIsOpen(!isOpen)} className="w-full text-left group">
         <div className="flex justify-between items-center mb-1">
-          <span className="font-semibold text-purple-300 flex items-center gap-2">
-            {isOpen ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-            {goal.name}
+          <span className="text-sm font-semibold text-purple-300 flex items-center gap-1.5 group-hover:text-purple-200 transition-colors">
+            {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+            <span className="truncate">{goal.name}</span>
           </span>
-          <span className="text-sm text-gray-400">{Math.round(goalProgress)}%</span>
+          <span className="text-xs text-gray-500 flex-shrink-0 ml-1">{Math.round(goalProgress)}%</span>
         </div>
-        <div className="w-full bg-gray-700 rounded-full h-2.5">
-          <div className="bg-purple-500 h-2.5 rounded-full" style={{ width: `${goalProgress}%` }}></div>
+        <div className="w-full bg-gray-700/60 rounded-full h-1.5">
+          <div
+            className="bg-gradient-to-r from-purple-500 to-pink-500 h-1.5 rounded-full transition-all duration-700"
+            style={{ width: `${goalProgress}%` }}
+          />
         </div>
       </button>
       {isOpen && (
-        <div className="pl-6 space-y-3 pt-2">
+        <div className="pl-4 border-l-2 border-purple-900/60 space-y-2 pt-1">
           {projects.map((p) => (
-            <div key={p.id} className="cursor-pointer" onClick={() => onViewChange('project', p.id)}>
-              <div className="flex justify-between items-center mb-1 text-sm">
-                <span className="font-medium text-gray-300">{p.name}</span>
-                <span className="text-xs text-gray-400">{Math.round(p.progress || 0)}%</span>
+            <div
+              key={p.id}
+              className="cursor-pointer group/proj hover:-translate-y-0.5 transition-transform duration-150"
+              onClick={() => onViewChange('project', p.id)}
+            >
+              <div className="flex justify-between items-center mb-1 text-xs">
+                <span className="font-medium text-gray-400 group-hover/proj:text-gray-200 transition-colors truncate">{p.name}</span>
+                <span className="text-gray-600 flex-shrink-0 ml-1">{Math.round(p.progress || 0)}%</span>
               </div>
-              <div className="w-full bg-gray-600 rounded-full h-2">
-                <div className="bg-blue-500 h-2 rounded-full" style={{ width: `${p.progress || 0}%` }}></div>
+              <div className="w-full bg-gray-700/50 rounded-full h-1">
+                <div
+                  className="bg-gradient-to-r from-blue-500 to-cyan-400 h-1 rounded-full transition-all duration-700"
+                  style={{ width: `${p.progress || 0}%` }}
+                />
               </div>
             </div>
           ))}
diff --git a/src/features/habits/HabitTrackerView.jsx b/src/features/habits/HabitTrackerView.jsx
index 3a1ceb7..f2e8dda 100644
--- a/src/features/habits/HabitTrackerView.jsx
+++ b/src/features/habits/HabitTrackerView.jsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Plus, TrendingUp, Edit2, Trash2 } from 'lucide-react';
+import { Plus, TrendingUp, Edit2, Trash2, Flame } from 'lucide-react';
 import { addDoc, collection, deleteDoc, doc, getDocs, query, updateDoc, where, writeBatch } from 'firebase/firestore';
 import { auth, db } from '../../config/firebase';
 import { appId } from '../../config/env';
@@ -56,54 +56,94 @@ export default function HabitTrackerView({ habits, entries }) {
   }, [habits, entries]);
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h1 className="text-4xl font-bold text-white">Habit Tracker</h1>
-        <div className="flex gap-2">
+    <div className="space-y-4 md:space-y-6">
+      {/* ── Header ── */}
+      <div className="flex items-center justify-between gap-2">
+        {/* Mobile/panel: compact header */}
+        <h1 className="text-2xl font-bold text-white tracking-tight md:text-4xl">Habit Tracker</h1>
+        <div className="flex gap-1.5 md:gap-2">
           <button
             onClick={() => setShowAnalytics(!showAnalytics)}
-            className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-md font-semibold transition-colors"
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all duration-200
+              md:px-4 md:py-2 md:rounded-md md:text-sm
+              ${showAnalytics
+                ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-900/30'
+                : 'bg-gray-800/60 border border-gray-700/50 text-gray-300 hover:border-gray-600 md:bg-indigo-600 md:hover:bg-indigo-700 md:border-0 md:text-white'
+              }`}
           >
-            <TrendingUp size={18} /> {showAnalytics ? 'Hide Analytics' : 'Show Analytics'}
+            <TrendingUp size={14} />
+            <span className="hidden sm:inline">{showAnalytics ? 'Hide Analytics' : 'Show Analytics'}</span>
+            <span className="sm:hidden">Analytics</span>
           </button>
           <button
             onClick={() => setIsAdding(!isAdding)}
-            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md font-semibold transition-colors"
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all duration-200
+              md:px-4 md:py-2 md:rounded-md md:text-sm
+              ${isAdding
+                ? 'bg-gray-700 text-white'
+                : 'bg-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg shadow-blue-900/30 md:bg-none md:bg-blue-600 md:hover:bg-blue-700'
+              }`}
           >
-            <Plus size={18} /> {isAdding ? 'Cancel' : 'New Habit'}
+            <Plus size={14} />
+            {isAdding ? 'Cancel' : 'New Habit'}
           </button>
         </div>
       </div>
 
+      {/* ── Add habit form ── */}
       {isAdding && (
-        <form onSubmit={handleAddHabit} className="flex gap-2 p-4 bg-gray-800 rounded-lg">
+        <form onSubmit={handleAddHabit} className="flex gap-2 p-3 bg-gray-800/40 border border-gray-700/40 rounded-2xl backdrop-blur-sm md:p-4 md:bg-gray-800 md:rounded-lg md:border-0">
           <input
             type="text"
             value={newHabitName}
             onChange={(e) => setNewHabitName(e.target.value)}
             placeholder="e.g., Read for 30 minutes"
-            className="flex-grow bg-gray-700 border border-gray-600 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="flex-grow bg-gray-700/80 border border-gray-600/50 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 md:rounded-md md:bg-gray-700 md:border-gray-600"
             required
+            autoFocus
           />
-          <button type="submit" className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-md font-semibold">
+          <button type="submit" className="bg-emerald-600 hover:bg-emerald-700 px-3 py-2 rounded-xl text-sm font-semibold transition-colors md:rounded-md md:px-4">
             Save
           </button>
         </form>
       )}
 
+      {/* ── Analytics panel ── */}
       {showAnalytics && (
-        <div className="bg-gray-800/60 rounded-lg p-6">
-          <h2 className="text-2xl font-semibold mb-4">Habit Analytics</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 backdrop-blur-sm md:bg-gray-800/60 md:rounded-lg md:border-0 md:p-6">
+          <h2 className="text-base font-semibold mb-3 md:text-2xl md:mb-4">Habit Analytics</h2>
+          {/* Mobile: single column; Desktop: multi-column */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 md:gap-6">
             {habits.map((habit) => (
               <HabitCalendar key={habit.id} habit={habit} entries={entries.filter((e) => e.habitId === habit.id)} />
             ))}
-            {habits.length === 0 && <p className="text-gray-400 md:col-span-3 text-center">No habits to analyze yet.</p>}
+            {habits.length === 0 && <p className="text-gray-500 text-sm text-center py-4 md:col-span-3">No habits to analyze yet.</p>}
           </div>
         </div>
       )}
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {/* ── Habit list ──
+          Mobile / extension panel → compact single-column rows (new design)
+          Desktop (md+) → old tall multi-column cards
+      ── */}
+
+      {/* MOBILE layout: compact rows */}
+      <div className="grid grid-cols-1 gap-3 md:hidden">
+        {habits.length === 0 && !isAdding && (
+          <p className="text-gray-500 text-sm text-center py-10">No habits defined yet. Add your first one!</p>
+        )}
+        {habits.map((habit) => (
+          <HabitRowCard
+            key={habit.id}
+            habit={habit}
+            entries={entries.filter((e) => e.habitId === habit.id)}
+            streak={habitStreaks[habit.id] || 0}
+          />
+        ))}
+      </div>
+
+      {/* DESKTOP layout: original tall cards */}
+      <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-3 gap-6">
         {habits.length === 0 && !isAdding && (
           <p className="text-gray-400 md:col-span-3 text-center py-8">No habits defined yet. Add your first one!</p>
         )}
@@ -120,7 +160,8 @@ export default function HabitTrackerView({ habits, entries }) {
   );
 }
 
-function HabitDayCard({ habit, entries, streak }) {
+/* ── Compact row card: mobile / extension panel ── */
+function HabitRowCard({ habit, entries, streak }) {
   const [isEditing, setIsEditing] = useState(false);
   const [editedName, setEditedName] = useState(habit.name);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -145,9 +186,8 @@ function HabitDayCard({ habit, entries, streak }) {
   const handleUpdateHabit = async (e) => {
     e.preventDefault();
     if (!editedName.trim() || !userId || !db) return;
-    const habitRef = doc(db, `artifacts/${appId}/users/${userId}/habits`, habit.id);
     try {
-      await updateDoc(habitRef, { name: editedName });
+      await updateDoc(doc(db, `artifacts/${appId}/users/${userId}/habits`, habit.id), { name: editedName });
       setIsEditing(false);
     } catch (error) {
       console.error('Error updating habit:', error);
@@ -157,22 +197,112 @@ function HabitDayCard({ habit, entries, streak }) {
   const handleDeleteHabit = async () => {
     if (!userId || !db) return;
     setShowDeleteModal(false);
+    const q = query(collection(db, `artifacts/${appId}/users/${userId}/habit_entries`), where('habitId', '==', habit.id));
+    try {
+      const snapshot = await getDocs(q);
+      const batch = writeBatch(db);
+      snapshot.forEach((d) => batch.delete(d.ref));
+      await batch.commit();
+      await deleteDoc(doc(db, `artifacts/${appId}/users/${userId}/habits`, habit.id));
+    } catch (error) {
+      console.error('Error deleting habit:', error);
+    }
+  };
 
-    const entriesPath = `artifacts/${appId}/users/${userId}/habit_entries`;
-    const q = query(collection(db, entriesPath), where('habitId', '==', habit.id));
+  return (
+    <>
+      <ConfirmModal
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        onConfirm={handleDeleteHabit}
+        title="Delete Habit"
+        message={`Are you sure you want to delete the habit "${habit.name}"? All its tracked history will also be removed.`}
+      />
+      <div className={`rounded-2xl border p-3.5 transition-all duration-200 backdrop-blur-sm ${isCompleted ? 'bg-emerald-950/40 border-emerald-800/40' : 'bg-gray-800/40 border-gray-700/40'}`}>
+        {isEditing ? (
+          <form onSubmit={handleUpdateHabit} className="flex gap-2">
+            <input
+              type="text"
+              value={editedName}
+              onChange={(e) => setEditedName(e.target.value)}
+              className="flex-grow bg-gray-700/80 border border-gray-600 rounded-xl px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+              autoFocus
+            />
+            <button type="submit" className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 rounded-xl text-xs font-semibold">Save</button>
+            <button type="button" onClick={() => setIsEditing(false)} className="px-2 py-1.5 bg-gray-600 hover:bg-gray-700 rounded-xl text-xs font-semibold">✕</button>
+          </form>
+        ) : (
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleHabitToggle}
+              className={`flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center text-lg font-bold transition-all duration-200 ${isCompleted ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-900/40' : 'bg-gray-700/80 text-gray-500 hover:bg-gray-600/80 hover:text-white'}`}
+            >
+              {isCompleted ? '✓' : '○'}
+            </button>
+            <div className="flex-grow min-w-0">
+              <p className={`text-sm font-semibold truncate ${isCompleted ? 'text-emerald-300' : 'text-white'}`}>{habit.name}</p>
+              <div className={`flex items-center gap-1 text-xs mt-0.5 ${streak > 0 ? 'text-orange-400' : 'text-gray-600'}`}>
+                <Flame size={11} />
+                <span>{streak} day streak</span>
+              </div>
+            </div>
+            <div className="flex items-center gap-0.5 flex-shrink-0">
+              <button onClick={() => setIsEditing(true)} className="p-1.5 text-gray-500 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"><Edit2 size={13} /></button>
+              <button onClick={() => setShowDeleteModal(true)} className="p-1.5 text-gray-500 hover:text-red-400 hover:bg-gray-700 rounded-lg transition-colors"><Trash2 size={13} /></button>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
 
+/* ── Original tall card: desktop only ── */
+function HabitDayCard({ habit, entries, streak }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedName, setEditedName] = useState(habit.name);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const userId = auth?.currentUser?.uid;
+  const todayKey = getLocalDateKey(new Date());
+  const entry = entries.find((e) => e.date === todayKey);
+  const isCompleted = entry ? entry.completed : false;
+
+  const handleHabitToggle = async () => {
+    if (!userId || !db) return;
+    if (entry) {
+      await updateDoc(doc(db, `artifacts/${appId}/users/${userId}/habit_entries`, entry.id), { completed: !isCompleted });
+    } else {
+      await addDoc(collection(db, `artifacts/${appId}/users/${userId}/habit_entries`), {
+        habitId: habit.id,
+        date: todayKey,
+        completed: true,
+      });
+    }
+  };
+
+  const handleUpdateHabit = async (e) => {
+    e.preventDefault();
+    if (!editedName.trim() || !userId || !db) return;
+    try {
+      await updateDoc(doc(db, `artifacts/${appId}/users/${userId}/habits`, habit.id), { name: editedName });
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Error updating habit:', error);
+    }
+  };
+
+  const handleDeleteHabit = async () => {
+    if (!userId || !db) return;
+    setShowDeleteModal(false);
+    const q = query(collection(db, `artifacts/${appId}/users/${userId}/habit_entries`), where('habitId', '==', habit.id));
     try {
-      const querySnapshot = await getDocs(q);
+      const snapshot = await getDocs(q);
       const batch = writeBatch(db);
-      querySnapshot.forEach((docSnap) => {
-        batch.delete(docSnap.ref);
-      });
+      snapshot.forEach((d) => batch.delete(d.ref));
       await batch.commit();
-
-      const habitRef = doc(db, `artifacts/${appId}/users/${userId}/habits`, habit.id);
-      await deleteDoc(habitRef);
+      await deleteDoc(doc(db, `artifacts/${appId}/users/${userId}/habits`, habit.id));
     } catch (error) {
-      console.error('Error deleting habit and its entries:', error);
+      console.error('Error deleting habit:', error);
     }
   };
 
@@ -196,16 +326,8 @@ function HabitDayCard({ habit, entries, streak }) {
               autoFocus
             />
             <div className="flex gap-2 mt-auto">
-              <button type="submit" className="flex-1 p-1.5 text-sm bg-green-600 hover:bg-green-700 rounded-md font-semibold">
-                Save
-              </button>
-              <button
-                type="button"
-                onClick={() => setIsEditing(false)}
-                className="flex-1 p-1.5 text-sm bg-gray-600 hover:bg-gray-700 rounded-md font-semibold"
-              >
-                Cancel
-              </button>
+              <button type="submit" className="flex-1 p-1.5 text-sm bg-green-600 hover:bg-green-700 rounded-md font-semibold">Save</button>
+              <button type="button" onClick={() => setIsEditing(false)} className="flex-1 p-1.5 text-sm bg-gray-600 hover:bg-gray-700 rounded-md font-semibold">Cancel</button>
             </div>
           </form>
         ) : (
@@ -213,12 +335,8 @@ function HabitDayCard({ habit, entries, streak }) {
             <div className="flex justify-between items-start">
               <span className="font-semibold text-white pr-2">{habit.name}</span>
               <div className="flex items-center gap-1 flex-shrink-0">
-                <button onClick={() => setIsEditing(true)} className="p-1 text-gray-400 hover:text-white rounded-md hover:bg-gray-700">
-                  <Edit2 size={16} />
-                </button>
-                <button onClick={() => setShowDeleteModal(true)} className="p-1 text-gray-400 hover:text-red-400 rounded-md hover:bg-gray-700">
-                  <Trash2 size={16} />
-                </button>
+                <button onClick={() => setIsEditing(true)} className="p-1 text-gray-400 hover:text-white rounded-md hover:bg-gray-700"><Edit2 size={16} /></button>
+                <button onClick={() => setShowDeleteModal(true)} className="p-1 text-gray-400 hover:text-red-400 rounded-md hover:bg-gray-700"><Trash2 size={16} /></button>
               </div>
             </div>
             <div className={`flex items-center gap-1 text-sm mt-2 ${streak > 0 ? 'text-orange-400' : 'text-gray-500'}`}>
@@ -227,13 +345,10 @@ function HabitDayCard({ habit, entries, streak }) {
             </div>
           </div>
         )}
-
         <button
           onClick={handleHabitToggle}
           disabled={isEditing}
-          className={`w-full mt-4 py-2 rounded-md font-semibold transition-colors ${
-            isCompleted ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-300'
-          } disabled:bg-gray-800 disabled:cursor-not-allowed`}
+          className={`w-full mt-4 py-2 rounded-md font-semibold transition-colors ${isCompleted ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-300'} disabled:bg-gray-800 disabled:cursor-not-allowed`}
         >
           {isCompleted ? 'Completed Today!' : 'Mark as Done'}
         </button>
@@ -242,47 +357,34 @@ function HabitDayCard({ habit, entries, streak }) {
   );
 }
 
+/* ── Calendar (used in analytics — shared by both layouts) ── */
 function HabitCalendar({ habit, entries }) {
   const today = new Date();
   const [date, setDate] = useState(new Date(today.getFullYear(), today.getMonth(), 1));
 
-  const goToPreviousMonth = () => {
-    setDate((currentDate) => new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
-  };
-
-  const goToNextMonth = () => {
-    setDate((currentDate) => new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
-  };
+  const goToPreviousMonth = () => setDate((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+  const goToNextMonth = () => setDate((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
 
   const completedDates = useMemo(() => new Set(entries.filter((e) => e.completed).map((e) => e.date)), [entries]);
-
   const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
   const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
   const blanks = Array.from({ length: firstDayOfMonth }, (_, i) => i);
 
   return (
-    <div className="bg-gray-900/50 p-4 rounded-lg">
+    <div className="bg-gray-900/50 p-3 rounded-xl">
       <div className="flex justify-between items-center mb-2">
-        <button onClick={goToPreviousMonth} className="p-1 rounded-md hover:bg-gray-700">
-          &lt;
-        </button>
-        <h3 className="font-semibold text-center text-sm">
-          {habit.name} - {date.toLocaleString('default', { month: 'long' })} {date.getFullYear()}
+        <button onClick={goToPreviousMonth} className="p-1 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-white transition-colors text-sm">‹</button>
+        <h3 className="text-xs font-semibold text-center text-gray-300 truncate px-1">
+          {habit.name} — {date.toLocaleString('default', { month: 'short' })} {date.getFullYear()}
         </h3>
-        <button onClick={goToNextMonth} className="p-1 rounded-md hover:bg-gray-700">
-          &gt;
-        </button>
+        <button onClick={goToNextMonth} className="p-1 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-white transition-colors text-sm">›</button>
       </div>
-      <div className="grid grid-cols-7 gap-1 text-center text-xs text-gray-400">
-        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => (
-          <div key={i}>{d}</div>
-        ))}
+      <div className="grid grid-cols-7 gap-1 text-center text-xs text-gray-600 mb-1">
+        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <div key={i}>{d}</div>)}
       </div>
-      <div className="grid grid-cols-7 gap-1 mt-2">
-        {blanks.map((b, i) => (
-          <div key={`b-${i}`}></div>
-        ))}
+      <div className="grid grid-cols-7 gap-1">
+        {blanks.map((_, i) => <div key={`b-${i}`} />)}
         {days.map((d) => {
           const dateKey = getLocalDateKey(new Date(date.getFullYear(), date.getMonth(), d));
           const isCompleted = completedDates.has(dateKey);
@@ -290,9 +392,7 @@ function HabitCalendar({ habit, entries }) {
           return (
             <div
               key={d}
-              className={`w-full aspect-square flex items-center justify-center rounded-full text-xs ${
-                isCompleted ? 'bg-green-500 text-white' : 'bg-gray-700'
-              } ${isToday ? 'ring-2 ring-blue-500' : ''}`}
+              className={`w-full aspect-square flex items-center justify-center rounded-lg text-xs transition-colors ${isCompleted ? 'bg-emerald-500 text-white font-semibold' : 'bg-gray-800 text-gray-600'} ${isToday ? 'ring-2 ring-blue-500' : ''}`}
             >
               {d}
             </div>
diff --git a/src/features/review/WeeklyReviewView.jsx b/src/features/review/WeeklyReviewView.jsx
index a7d6894..47a4637 100644
--- a/src/features/review/WeeklyReviewView.jsx
+++ b/src/features/review/WeeklyReviewView.jsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import TaskItem from '../../components/shared/TaskItem';
 import { formatDate, getLocalDateKey } from '../../utils/datetime';
+import { CheckCircle2, Percent } from 'lucide-react';
 
 export default function WeeklyReviewView({ tasks, projects, habits, entries }) {
   const lastWeek = useMemo(() => {
@@ -10,7 +11,9 @@ export default function WeeklyReviewView({ tasks, projects, habits, entries }) {
     return { start, end };
   }, []);
 
-  const completedTasks = tasks.filter((t) => t.completed && t.completedAt && t.completedAt.toDate() >= lastWeek.start);
+  const completedTasks = tasks.filter(
+    (t) => t.completed && t.completedAt && t.completedAt.toDate() >= lastWeek.start
+  );
 
   const habitConsistency = useMemo(() => {
     if (habits.length === 0) return 0;
@@ -34,33 +37,90 @@ export default function WeeklyReviewView({ tasks, projects, habits, entries }) {
   }, [habits, entries]);
 
   return (
-    <div className="space-y-8">
-      <h1 className="text-4xl font-bold text-white">Weekly Review</h1>
-      <p className="text-gray-400">Summary of your activity from {formatDate(lastWeek.start)} to {formatDate(lastWeek.end)}.</p>
+    <div className="space-y-4 md:space-y-8">
+
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-white tracking-tight md:text-4xl">Weekly Review</h1>
+        <p className="text-xs text-gray-500 mt-0.5 md:text-base md:text-gray-400 md:mt-0">
+          Summary of your activity from {formatDate(lastWeek.start)} to {formatDate(lastWeek.end)}.
+        </p>
+      </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="bg-gray-800/60 p-6 rounded-lg text-center">
-          <p className="text-gray-400 text-sm">Tasks Completed</p>
-          <p className="text-5xl font-bold text-green-400">{completedTasks.length}</p>
+      {/* ── MOBILE / extension layout ── */}
+      <div className="md:hidden space-y-4">
+        {/* Compact 2-col stat cards */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 text-center backdrop-blur-sm">
+            <CheckCircle2 size={22} className="text-emerald-400 mx-auto mb-1.5" />
+            <p className="text-3xl font-bold text-emerald-400">{completedTasks.length}</p>
+            <p className="text-xs text-gray-500 mt-0.5">Tasks Done</p>
+          </div>
+          <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 text-center backdrop-blur-sm">
+            <Percent size={22} className="text-orange-400 mx-auto mb-1.5" />
+            <p className="text-3xl font-bold text-orange-400">{habitConsistency}</p>
+            <p className="text-xs text-gray-500 mt-0.5">Habit Rate</p>
+          </div>
         </div>
-        <div className="bg-gray-800/60 p-6 rounded-lg text-center">
-          <p className="text-gray-400 text-sm">Habit Consistency</p>
-          <p className="text-5xl font-bold text-orange-400">{habitConsistency}%</p>
+
+        {/* Habit consistency bar */}
+        <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 backdrop-blur-sm">
+          <div className="flex justify-between items-center mb-2">
+            <p className="text-sm font-semibold text-gray-300">Habit Consistency</p>
+            <span className="text-xs text-orange-400 font-medium">{habitConsistency}%</span>
+          </div>
+          <div className="w-full bg-gray-700/60 rounded-full h-2">
+            <div
+              className="bg-gradient-to-r from-orange-500 to-yellow-400 h-2 rounded-full transition-all duration-700"
+              style={{ width: `${habitConsistency}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Completed tasks */}
+        <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 backdrop-blur-sm">
+          <h2 className="text-sm font-semibold text-gray-300 mb-3">Completed This Week</h2>
+          {completedTasks.length > 0 ? (
+            <div className="space-y-1.5">
+              {completedTasks.map((task) => (
+                <TaskItem key={task.id} task={task} projects={projects} isCompact />
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-500 text-sm text-center py-4">No tasks completed this week. Let's get to it!</p>
+          )}
         </div>
       </div>
 
-      <div className="bg-gray-800/60 p-6 rounded-lg">
-        <h2 className="text-2xl font-semibold mb-4">Completed Tasks This Week</h2>
-        {completedTasks.length > 0 ? (
-          <div className="space-y-2">
-            {completedTasks.map((task) => (
-              <TaskItem key={task.id} task={task} projects={projects} isCompact />
-            ))}
+      {/* ── DESKTOP layout (original) ── */}
+      <div className="hidden md:block space-y-6">
+        {/* Original large stat cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="bg-gray-800/60 p-6 rounded-lg text-center">
+            <p className="text-gray-400 text-sm">Tasks Completed</p>
+            <p className="text-5xl font-bold text-green-400">{completedTasks.length}</p>
           </div>
-        ) : (
-          <p className="text-gray-400">No tasks completed this week. Let's get to it!</p>
-        )}
+          <div className="bg-gray-800/60 p-6 rounded-lg text-center">
+            <p className="text-gray-400 text-sm">Habit Consistency</p>
+            <p className="text-5xl font-bold text-orange-400">{habitConsistency}%</p>
+          </div>
+        </div>
+
+        {/* Completed tasks list */}
+        <div className="bg-gray-800/60 p-6 rounded-lg">
+          <h2 className="text-2xl font-semibold mb-4">Completed Tasks This Week</h2>
+          {completedTasks.length > 0 ? (
+            <div className="space-y-2">
+              {completedTasks.map((task) => (
+                <TaskItem key={task.id} task={task} projects={projects} isCompact />
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-400">No tasks completed this week. Let's get to it!</p>
+          )}
+        </div>
       </div>
+
     </div>
   );
 }
diff --git a/src/features/schedule/ScheduleView.jsx b/src/features/schedule/ScheduleView.jsx
index 43fb244..fafb343 100644
--- a/src/features/schedule/ScheduleView.jsx
+++ b/src/features/schedule/ScheduleView.jsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { formatTime } from '../../utils/datetime';
 import { fetchCalendarEvents } from '../../services/googleCalendar';
+import { RefreshCw, CalendarDays } from 'lucide-react';
 
 export default function ScheduleView({ projects, tasks, syncedEvents, setSyncedEvents, tokenClient }) {
   const [isLoading, setIsLoading] = useState(false);
@@ -39,6 +40,7 @@ export default function ScheduleView({ projects, tasks, syncedEvents, setSyncedE
       date: p.deadline ? new Date(p.deadline) : null,
       type: 'Project Deadline',
       color: 'bg-purple-500',
+      dotColor: 'bg-purple-400',
     }));
 
     const taskEvents = tasks
@@ -51,7 +53,8 @@ export default function ScheduleView({ projects, tasks, syncedEvents, setSyncedE
           title: t.title,
           date: dueDate,
           type: 'Task Deadline',
-          color: isOverdue ? 'bg-red-700' : 'bg-green-500',
+          color: isOverdue ? 'bg-red-700' : 'bg-emerald-500',
+          dotColor: isOverdue ? 'bg-red-400' : 'bg-emerald-400',
           isOverdue,
         };
       });
@@ -62,61 +65,58 @@ export default function ScheduleView({ projects, tasks, syncedEvents, setSyncedE
   }, [projects, tasks, syncedEvents]);
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h1 className="text-4xl font-bold text-white">Schedule</h1>
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between gap-2">
+        <h1 className="text-2xl font-bold text-white tracking-tight">Schedule</h1>
         <button
           onClick={handleSync}
           disabled={isLoading || !tokenClient}
-          className="flex items-center gap-2 bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md font-semibold transition-colors disabled:bg-red-800 disabled:cursor-not-allowed"
+          className="flex items-center gap-1.5 bg-gradient-to-r from-red-600 to-rose-500 hover:from-red-500 hover:to-rose-400 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all duration-200 shadow-lg shadow-red-900/30 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
         >
           {isLoading ? (
-            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+            <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-white" />
           ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M8 2v4" />
-              <path d="M16 2v4" />
-              <rect width="18" height="18" x="3" y="4" rx="2" />
-              <path d="M3 10h18" />
-            </svg>
+            <RefreshCw size={13} />
           )}
-          {isLoading ? 'Syncing...' : syncedEvents.length > 0 ? 'Refresh Calendar' : 'Sync with Google Calendar'}
+          {isLoading ? 'Syncing…' : syncedEvents.length > 0 ? 'Refresh' : 'Sync Calendar'}
         </button>
       </div>
-      {error && <div className="text-red-400 bg-red-900/50 p-3 rounded-md text-sm">{error}</div>}
-      <div className="bg-gray-800/60 rounded-lg p-6">
-        <h2 className="text-2xl font-semibold mb-4">Upcoming Deadlines & Events</h2>
-        <div className="space-y-4">
+
+      {error && (
+        <div className="text-red-300 bg-red-950/60 border border-red-700/50 p-3 rounded-2xl text-xs">{error}</div>
+      )}
+
+      {/* Events list */}
+      <div className="bg-gray-800/40 border border-gray-700/40 rounded-2xl p-4 backdrop-blur-sm">
+        <h2 className="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-1.5">
+          <CalendarDays size={15} className="text-gray-500" />
+          Upcoming Deadlines & Events
+        </h2>
+        <div className="space-y-2">
           {allEvents.length > 0 ? (
             allEvents.map((event) => (
-              <div key={event.id} className="flex items-center gap-4 p-3 bg-gray-900/50 rounded-md">
-                <div className="flex flex-col items-center justify-center w-20 text-center">
-                  <span className="text-sm text-gray-400">{event.date.toLocaleString('default', { month: 'short' })}</span>
-                  <span className="text-2xl font-bold">{event.date.getDate()}</span>
+              <div key={event.id} className="flex items-center gap-3 p-2.5 bg-gray-900/40 border border-gray-700/30 rounded-xl hover:border-gray-600/50 transition-all duration-150 group">
+                {/* Date block */}
+                <div className="flex flex-col items-center justify-center w-11 flex-shrink-0 text-center">
+                  <span className="text-xs text-gray-500 leading-none">{event.date.toLocaleString('default', { month: 'short' })}</span>
+                  <span className="text-xl font-bold leading-tight text-white">{event.date.getDate()}</span>
                 </div>
-                <div className={`w-1.5 h-12 rounded-full ${event.color}`}></div>
-                <div>
-                  <p className="font-semibold text-gray-200">{event.title}</p>
-                  <p className="text-sm text-gray-400">
+                {/* Color bar */}
+                <div className={`w-1 h-10 rounded-full flex-shrink-0 ${event.color}`} />
+                {/* Info */}
+                <div className="flex-grow min-w-0">
+                  <p className="text-sm font-medium text-gray-200 truncate">{event.title}</p>
+                  <p className="text-xs text-gray-500 flex items-center gap-1">
                     {event.type}
-                    {event.isOverdue && <span className="font-semibold text-red-400"> (Overdue)</span>}
-                    {event.type === 'Google Calendar' && ` at ${formatTime(event.date)}`}
+                    {event.isOverdue && <span className="font-semibold text-red-400"> · Overdue</span>}
+                    {event.type === 'Google Calendar' && ` · ${formatTime(event.date)}`}
                   </p>
                 </div>
               </div>
             ))
           ) : (
-            <p className="text-gray-400">No scheduled events with deadlines.</p>
+            <p className="text-gray-500 text-sm text-center py-6">No scheduled events with deadlines.</p>
           )}
         </div>
       </div>
diff --git a/src/features/sidebar/Sidebar.jsx b/src/features/sidebar/Sidebar.jsx
index f39736d..fbec14b 100644
--- a/src/features/sidebar/Sidebar.jsx
+++ b/src/features/sidebar/Sidebar.jsx
@@ -56,11 +56,13 @@ export default function Sidebar({ onViewChange, projects, goals, userId, handleS
   return (
     <>
       <GoalPlannerModal isOpen={showGoalModal} onClose={() => setShowGoalModal(false)} userId={userId} />
-      <aside className="w-64 bg-gray-900/50 border-r border-gray-700/50 p-4 flex flex-col">
-        <div className="space-y-6 flex-1 overflow-y-auto">
-          <h1 className="text-2xl font-bold text-blue-400 flex items-center gap-2">
-            <Book size={24} /> ProdHub
-          </h1>
+      <aside className="w-full h-full md:w-64 bg-gray-900/50 md:border-r border-gray-700/50 p-4 flex flex-col">
+        <div className="space-y-6 flex-1 overflow-y-auto no-scrollbar">
+          <div className="hidden md:flex items-center justify-between">
+            <h1 className="text-2xl font-bold text-blue-400 flex items-center gap-2">
+              <Book size={24} /> ProdHub
+            </h1>
+          </div>
           <nav className="space-y-2">
             <button
               onClick={() => handleNavigate('dashboard')}
diff --git a/src/features/tasks/AllTasksView.jsx b/src/features/tasks/AllTasksView.jsx
index 0b93774..f93c95e 100644
--- a/src/features/tasks/AllTasksView.jsx
+++ b/src/features/tasks/AllTasksView.jsx
@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import TaskItem from '../../components/shared/TaskItem';
+import { ListFilter, ArrowUpDown } from 'lucide-react';
 
 export default function AllTasksView({ tasks, projects }) {
   const [filter, setFilter] = useState('All');
@@ -24,28 +25,31 @@ export default function AllTasksView({ tasks, projects }) {
       return 0;
     });
   }, [tasks, projects, filter, sortBy]);
+
   return (
-    <div className="space-y-6">
-      <h1 className="text-4xl font-bold text-white">All Tasks</h1>
-      <div className="flex flex-wrap gap-4 items-center p-4 bg-gray-800/60 rounded-lg">
-        <div>
-          <span className="text-sm font-medium text-gray-400 mr-2">Filter by:</span>
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold text-white tracking-tight">All Tasks</h1>
+
+      {/* Filter & Sort bar */}
+      <div className="flex gap-2 p-3 bg-gray-800/40 border border-gray-700/40 rounded-2xl backdrop-blur-sm">
+        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+          <ListFilter size={14} className="text-gray-500 flex-shrink-0" />
           <select
             onChange={(e) => setFilter(e.target.value)}
             value={filter}
-            className="bg-gray-700 border border-gray-600 rounded-md px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="flex-1 min-w-0 bg-gray-700/80 border border-gray-600/50 rounded-xl px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-200"
           >
             <option>All</option>
             <option>Active</option>
             <option>Completed</option>
           </select>
         </div>
-        <div>
-          <span className="text-sm font-medium text-gray-400 mr-2">Sort by:</span>
+        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+          <ArrowUpDown size={14} className="text-gray-500 flex-shrink-0" />
           <select
             onChange={(e) => setSortBy(e.target.value)}
             value={sortBy}
-            className="bg-gray-700 border border-gray-600 rounded-md px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="flex-1 min-w-0 bg-gray-700/80 border border-gray-600/50 rounded-xl px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-200"
           >
             <option value="dueDate">Due Date</option>
             <option value="priority">Priority</option>
@@ -53,11 +57,12 @@ export default function AllTasksView({ tasks, projects }) {
           </select>
         </div>
       </div>
-      <div className="space-y-3">
+
+      <div className="space-y-2">
         {filteredAndSortedTasks.length > 0 ? (
           filteredAndSortedTasks.map((task) => <TaskItem key={task.id} task={task} projects={projects} />)
         ) : (
-          <p className="text-gray-400 text-center py-8">No tasks found.</p>
+          <p className="text-gray-500 text-sm text-center py-10">No tasks found.</p>
         )}
       </div>
     </div>
diff --git a/src/index.css b/src/index.css
index bd6213e..622f58d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+/* Hide scrollbar visually but keep scroll functionality */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
\ No newline at end of file
diff --git a/src/services/geminiService.js b/src/services/geminiService.js
index b375565..c210173 100644
--- a/src/services/geminiService.js
+++ b/src/services/geminiService.js
@@ -1,6 +1,6 @@
 import { GEMINI_MODEL } from '../config/env';
 
-export const callGeminiWithRetry = async (payload, apiKey, maxRetries = 3) => {
+export const callGeminiWithRetry = async (payload, apiKey, maxRetries = 6) => {
     let retries = 0;
     while (retries < maxRetries) {
         try {
@@ -31,11 +31,14 @@ export const callGeminiWithRetry = async (payload, apiKey, maxRetries = 3) => {
             const errorData = await response.json().catch(() => ({}));
             throw new Error(errorData.error?.message || `API request failed with status ${response.status}`);
         } catch (error) {
-            if (error.message.includes("Rate limit") || error.message.includes("Service unavailable") || (retries < maxRetries && error.name === 'TypeError')) {
-                // If we already handled 429/503 and exhausted retries, throw it
-                if (error.message.includes("Rate limit") || error.message.includes("Service unavailable")) throw error;
-                
+            if (error.message.includes("Rate limit") || error.message.includes("Service unavailable")) {
+                throw error;
+            }
+            if (error.name === 'TypeError') {
                 retries++;
+                if (retries >= maxRetries) {
+                    throw new Error(`Network error: Failed after ${maxRetries} attempts`);
+                }
                 const waitTime = Math.pow(2, retries) * 1000;
                 await new Promise(resolve => setTimeout(resolve, waitTime));
                 continue;
@@ -43,4 +46,5 @@ export const callGeminiWithRetry = async (payload, apiKey, maxRetries = 3) => {
             throw error;
         }
     }
+    throw new Error(`Failed to generate content after ${maxRetries} attempts`);
 };