diff --git a/README.md b/README.md
index d4d04bd..fdd7d32 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,30 @@
-# Blogify 📝
+# OG Docs 📝
 
-**A modern, collaborative blogging platform built for speed, security, and developer-centric content control.**
+**A modern, real-time collaborative documentation platform built for speed, security, and developer-centric content control.**
 
 ## About The Project
 
-**Blogify** is a full-stack web application designed to streamline the way developers write and share articles. The project focuses on structured content delivery, moving away from standard plain-text storage to a robust, custom-tailored data architecture.
+**OG Docs** is a full-stack web application designed to streamline the way teams and developers write, edit, and share documentation together. The platform emphasizes structured content delivery and real-time collaboration, moving beyond traditional plain-text storage toward a robust, custom-tailored data architecture.
 
-Built as a high-performance **MERN** application, Blogify provides a seamless writing experience while giving authors granular control over their content's metadata and presentation.
+Built as a high-performance **MERN** application, OG Docs enables multiple collaborators to work simultaneously in a shared workspace, with changes reflected instantly for everyone—ensuring smooth, efficient, and transparent collaboration.
 
 ---
 
 ## 🚀 Key Features
 
-* **Custom Slate.js Engine:** Uses a custom-built implementation to structure content into JSON format, ensuring consistent styling and portability.
+* **Real-Time Collaborative Workspace:** A dedicated editing area where multiple collaborators can make changes simultaneously, with updates reflected in real time.
+* **Custom Slate.js Engine:** A custom-built implementation that structures content into JSON format for consistent styling and long-term portability.
 * **Modern UI/UX:** A clean, responsive interface built with **React 19**, **Tailwind CSS 4.0**, and **CoreUI** components.
-* **Secure Authentication:** Integrated **Google OAuth** for quick and secure user access.
+* **Secure Authentication:** Integrated **Google OAuth** for fast and secure user access.
 * **Developer-Friendly Build:** Optimized with **Vite** for near-instant hot module replacement (HMR).
-* **Robust Security:** Hardened backend using **Helmet**, **HPP**, **Rate Limiting**, and **Zod** for schema validation.
+* **Robust Security:** Hardened backend using **Helmet**, **HPP**, **Rate Limiting**, and **Zod** for strict schema validation.
 
 ---
 
 ## 🛠 The Tech Stack
 
 ### Frontend
+
 * **Library:** React 19
 * **Styling:** Tailwind CSS 4.0 & CoreUI
 * **Editor:** Slate.js (Custom JSON Content Engine)
@@ -30,12 +32,14 @@ Built as a high-performance **MERN** application, Blogify provides a seamless wr
 * **Build Tool:** Vite
 
 ### Backend
+
 * **Runtime:** Node.js
 * **Framework:** Express.js (v5)
 * **Authentication:** JWT & Google Auth Library
 * **Validation:** Zod
 
 ### Database
+
 * **Database:** MongoDB
 * **ODM:** Mongoose
 
@@ -43,51 +47,56 @@ Built as a high-performance **MERN** application, Blogify provides a seamless wr
 
 ## ⚙️ How It Works
 
-The core logic of Blogify revolves around a structured data pipeline:
-
-1.  **The Input:** Authors use a custom editor powered by **Slate.js**. Instead of generating messy HTML, it outputs a clean **JSON tree** representing the document structure.
-2.  **The Storage:** This JSON object is validated via **Zod** and stored in **MongoDB** through **Mongoose** models.
-3.  **The Rendering:** On the frontend, our custom engine traverses the JSON tree and dynamically "paints" the content using Tailwind-styled React components.
-
+The core logic of OG Docs revolves around a structured, collaborative data pipeline:
 
+1. **The Input:** Contributors write using a custom editor powered by **Slate.js**. Instead of generating raw HTML, the editor produces a clean **JSON tree** representing the document structure.
+2. **The Collaboration Layer:** Multiple users can edit the same document simultaneously, with real-time updates synchronized across all active sessions.
+3. **The Storage:** The JSON structure is validated using **Zod** and securely stored in **MongoDB** via **Mongoose** models.
+4. **The Rendering:** On the frontend, a custom rendering engine traverses the JSON tree and dynamically paints the content using Tailwind-styled React components.
 
 ---
 
 ## 📦 Installation & Setup
 
-Follow these steps to get a copy of Blogify running locally.
+Follow these steps to run OG Docs locally.
 
 ### Prerequisites
+
 * [Node.js](https://nodejs.org/) (Latest LTS)
-* [MongoDB](https://www.mongodb.com/) account or local instance.
+* [MongoDB](https://www.mongodb.com/) account or local instance
 
 ### Steps
 
-1.  **Clone the Repository**
-    ```bash
-    git clone [https://github.com/shamil-tp/Blogify.git](https://github.com/shamil-tp/Blogify.git)
-    cd blogify
-    ```
+1. **Clone the Repository**
+
+   ```bash
+   git clone https://github.com/shamil-tp/Blogify.git
+   cd blogify
+   ```
+
+2. **Setup Backend**
+
+   ```bash
+   cd backend
+   npm install
+   ```
+
+   Create a `.env` file in the `backend` folder and add your `MONGODB_URI`, `JWT_SECRET`, and `PORT`.
+
+3. **Setup Frontend**
 
-2.  **Setup Backend**
-    ```bash
-    cd backend
-    npm install
-    ```
-    Create a `.env` file in the `backend` folder and add your `MONGODB_URI`, `JWT_SECRET`, and `PORT`.
+   ```bash
+   cd ../frontend
+   npm install
+   ```
 
-3.  **Setup Frontend**
-    ```bash
-    cd ../frontend
-    npm install
-    ```
+4. **Run Development Servers**
 
-4.  **Run Development Servers**
-    * **Backend:** `npm run test` (uses nodemon)
-    * **Frontend:** `npm run dev` (uses vite)
+   * **Backend:** `npm run test` (nodemon)
+   * **Frontend:** `npm run dev` (Vite)
 
-5.  **View the App**
-    Open `http://localhost:5173` for the frontend.
+5. **View the App**
+   Open `http://localhost:5173` in your browser.
 
 ---
 
@@ -95,6 +104,176 @@ Follow these steps to get a copy of Blogify running locally.
 
 This project was collaboratively designed and developed by:
 
-* **Shamil** - [GitHub](https://github.com/shamil-tp)
-* **Sinan** - [GitHub](https://github.com/sinanrahman/)
-* **Ranfees** - [GitHub](https://github.com/Ranfees)
\ No newline at end of file
+* **Sinan** – [GitHub](https://github.com/sinanrahman/)
+* **Hana** – [GitHub](https://github.com/Hana-Haris3)
+* **Salih** – [GitHub](https://github.com/salih85)
+
+---
+
+OG Docs is built with collaboration at its core—designed to help teams write, iterate, and ship documentation together, faster and cleaner.
+
+
+
+
+
+
+
+
+
+
+frontend/src/
+├── collaboration/
+│   ├── socket.js
+│   ├── ydoc.js
+│   ├── awareness.js
+│   └── collabTypes.js
+│
+├── hooks/
+│   ├── useAuth.jsx
+│   └── useCollaboration.js   ← NEW
+│
+├── components/
+│   └── GridEditor/
+│       ├── GridEditor.jsx
+│       ├── withCollaboration.js ← NEW
+│       ├── TextWidget.jsx
+│       ├── ImageWidget.jsx
+│       └── VideoWidget.jsx
+
+
+
+
+
+
+
+
+backend/
+├── socket/
+│   ├── index.js
+│   ├── auth.js
+│   ├── rooms.js
+│   └── handlers/
+│       ├── joinDoc.js
+│       ├── syncUpdate.js
+│       ├── awareness.js
+│       └── disconnect.js
+│
+├── collaboration/
+│   ├── yjs/
+│   │   ├── createDoc.js
+│   │   └── applyUpdate.js
+│   └── persistence/
+│       ├── loadSnapshot.js
+│       └── saveSnapshot.js
+
+
+
+
+
+👤 Teammate A — Backend (Realtime Engine)
+🎯 Responsibility
+
+Everything related to:
+
+Socket.IO
+
+Yjs document sync
+
+MongoDB snapshots
+
+📁 Files they touch
+backend/
+├── socket/
+├── collaboration/
+├── models/Blog.js
+
+
+They do NOT touch frontend.
+
+🔧 Their Tasks (Very Exact)
+A1 — Socket.IO server
+
+Attach Socket.IO to Express
+
+JWT auth on connection
+
+Rooms per blogId
+
+A2 — Yjs document manager
+
+Create Yjs doc per blog
+
+Load collabSnapshot
+
+Keep docs in memory
+
+A3 — Sync protocol
+
+Receive Yjs updates
+
+Broadcast to room
+
+Prevent echo loops
+
+A4 — Persistence
+
+Save snapshot when:
+
+last user leaves
+
+OR every 30s
+
+📦 Output
+
+socket.emit("doc:update", update)
+socket.emit("doc:sync", state)
+
+
+
+
+
+👤 Teammate B — Frontend (Quill + Yjs)
+🎯 Responsibility
+
+Bind Quill editor → Yjs → Socket.IO.
+
+📁 Files they touch
+frontend/src/
+├── collaboration/
+│   ├── socket.js
+│   ├── ydoc.js
+│   └── awareness.js
+│
+├── components/GridEditor/
+│   ├── GridEditor.jsx
+│   └── withCollaboration.js
+
+
+They do NOT touch backend.
+
+🔧 Their Tasks (Very Exact)
+B1 — Yjs + Quill binding
+
+Create Y.Doc
+
+Create Y.Text
+
+Bind using y-quill
+
+import { QuillBinding } from 'y-quill'
+
+B2 — Socket sync
+
+Send Yjs updates to backend
+
+Apply remote updates
+
+B3 — Presence & cursors
+
+Use quill-cursors
+
+Show colored cursors per user
+
+📦 Output
+
+<QuillEditor docId="..." />
\ No newline at end of file
diff --git a/backend/collaboration/persistence/loadSnapshot.js b/backend/collaboration/persistence/loadSnapshot.js
new file mode 100644
index 0000000..46afbba
--- /dev/null
+++ b/backend/collaboration/persistence/loadSnapshot.js
@@ -0,0 +1,20 @@
+// const Blog = require("../../models/Blog");
+
+// const loadSnapshot = async (blogId) => {
+//   const blog = await Blog.findById(blogId);
+//   if (blog && blog.collabSnapshot) {
+//     return blog.collabSnapshot;
+//   }
+//   return null;
+// };
+
+// module.exports = { loadSnapshot };
+// collaboration/persistence/loadSnapshot.js
+const Blog = require("../../models/Blog");
+
+const loadSnapshot = async (blogId) => {
+  const blog = await Blog.findById(blogId);
+  return blog?.collabSnapshot || null;
+};
+
+module.exports = { loadSnapshot };
diff --git a/backend/collaboration/persistence/saveSnapshot.js b/backend/collaboration/persistence/saveSnapshot.js
new file mode 100644
index 0000000..aab55dc
--- /dev/null
+++ b/backend/collaboration/persistence/saveSnapshot.js
@@ -0,0 +1,29 @@
+// const Blog = require("../../models/Blog");
+// const Y = require("yjs");
+
+// const saveSnapshot = async (blogId, ydoc) => {
+//   try {
+//     const update = Y.encodeStateAsUpdate(ydoc);
+//     await Blog.findByIdAndUpdate(blogId, { collabSnapshot: update });
+//     setInterval(async () => {
+//   for (const [blogId, ydoc] of docs) {
+//     await saveSnapshot(blogId, ydoc);
+//   }
+// }, 30_000);
+//   } catch (e) {
+//     console.error("Failed to save snapshot", e);
+//   }
+// };
+
+// module.exports = { saveSnapshot };
+// collaboration/persistence/saveSnapshot.js
+const Blog = require("../../models/Blog");
+const Y = require("yjs");
+
+const saveSnapshot = async (blogId, ydoc) => {
+  const snapshot = Y.encodeStateAsUpdate(ydoc);
+  await Blog.findByIdAndUpdate(blogId, { collabSnapshot: Buffer.from(snapshot) });
+};
+
+module.exports = { saveSnapshot };
+
diff --git a/backend/collaboration/socket.js b/backend/collaboration/socket.js
new file mode 100644
index 0000000..c89c627
--- /dev/null
+++ b/backend/collaboration/socket.js
@@ -0,0 +1,23 @@
+import io from 'socket.io-client';
+
+let socket = null;
+
+export const initSocket = (url, docId) => {
+  if (socket) return socket;
+
+  socket = io(url, { query: { docId } });
+
+  socket.on('connect', () => {
+    console.log('🔗 Socket connected!', socket.id);
+  });
+
+  socket.on('connect_error', (err) => {
+    console.error('❌ Socket connection error:', err);
+  });
+
+  socket.on('disconnect', (reason) => {
+    console.log('⚠️ Socket disconnected:', reason);
+  });
+
+  return socket;
+};
diff --git a/backend/collaboration/yjs/applyUpdate.js b/backend/collaboration/yjs/applyUpdate.js
new file mode 100644
index 0000000..154c81e
--- /dev/null
+++ b/backend/collaboration/yjs/applyUpdate.js
@@ -0,0 +1,9 @@
+// collaboration/yjs/applyUpdate.js
+const Y = require("yjs");
+
+const applyUpdate = (ydoc, update) => {
+  const uint8Update = update instanceof Uint8Array ? update : new Uint8Array(update);
+  Y.applyUpdate(ydoc, uint8Update);
+};
+
+module.exports = { applyUpdate };
diff --git a/backend/collaboration/yjs/createDoc.js b/backend/collaboration/yjs/createDoc.js
new file mode 100644
index 0000000..76c681c
--- /dev/null
+++ b/backend/collaboration/yjs/createDoc.js
@@ -0,0 +1,19 @@
+// collaboration/yjs/createDoc.js
+const Y = require("yjs");
+const { loadSnapshot } = require("../persistence/loadSnapshot");
+
+const docs = new Map();
+
+const createDoc = async (blogId) => {
+  if (docs.has(blogId)) return docs.get(blogId);
+
+  const ydoc = new Y.Doc();
+
+  const snapshot = await loadSnapshot(blogId);
+  if (snapshot) Y.applyUpdate(ydoc, snapshot);
+
+  docs.set(blogId, ydoc);
+  return ydoc;
+};
+
+module.exports = { createDoc, docs };
diff --git a/backend/controllers/auth-controller.js b/backend/controllers/auth-controller.js
index b9409a7..f8c157e 100644
--- a/backend/controllers/auth-controller.js
+++ b/backend/controllers/auth-controller.js
@@ -37,7 +37,7 @@ const googleLogin = async (req, res) => {
     };
     await user.save();
 
-    res.status(200).json({
+    return res.status(200).json({
       success: true,
       accessToken,
       refreshToken,
@@ -46,7 +46,7 @@ const googleLogin = async (req, res) => {
 
   } catch (error) {
     console.error("Authentication Error Details:", error.message);
-    res.status(401).json({
+    return res.status(401).json({
       success: false,
       message: "Google authentication failed"
     });
@@ -71,7 +71,7 @@ const refresh = async (req, res) => {
 
     const newAccessToken = generateAccessToken(user._id);
 
-    res.status(200).json({
+    return res.status(200).json({
       accessToken: newAccessToken,
     });
 
@@ -86,11 +86,11 @@ const logout = async (req, res) => {
     await User.findByIdAndUpdate(req.user._id, { $unset: { Rtoken: 1 } });
   }
 
-  res.status(200).json({ success: true, message: "Logged out successfully" });
+  return res.status(200).json({ success: true, message: "Logged out successfully" });
 };
 
 const me = (req, res) => {
-  res.status(200).json({ user: req.user });
+  return res.status(200).json({ user: req.user });
 };
 
 module.exports = { googleLogin, logout, me, refresh };
diff --git a/backend/controllers/blogController.js b/backend/controllers/blogController.js
index 07d6656..9f13995 100644
--- a/backend/controllers/blogController.js
+++ b/backend/controllers/blogController.js
@@ -1,4 +1,6 @@
 const Blog = require('../models/Blog')
+const User = require('../models/User')
+const { sendEmail } = require('../utils/emailService')
 const slugify = require('slugify')
 const { nanoid } = require('nanoid')
 
@@ -72,7 +74,14 @@ exports.getUserBlogs = async (req, res) => {
       return res.status(401).json({ message: 'user not found' })
     }
 
-    const userBlogs = await Blog.find({ author: userId }).populate('author', 'name')
+    const userBlogs = await Blog.find({
+      $or: [
+        { author: userId },
+        { 'collaborators.email': req.user.email }
+      ]
+    })
+      .populate('author', 'name email picture') // Added populate
+      .sort({ updatedAt: -1 });
 
     if (!userBlogs) {
       return res.status(401).json({ message: "no blogs found" })
@@ -104,7 +113,7 @@ exports.deleteUserPost = async (req, res) => {
 
     if (result.deletedCount === 1) {
       res.status(200).json({ message: "Successfully deleted the blog post." })
-    } 
+    }
     else {
       console.log("No post found with that ID or you are not the author.");
       res.status(401).json({ message: "No post found with that ID or you are not the author." })
@@ -115,47 +124,171 @@ exports.deleteUserPost = async (req, res) => {
   }
 }
 
+// exports.getBlogById = async (req, res) => {
+//   try {
+//     let blogId = req.params.postId
+//     const blog = await Blog.findOne({ _id: blogId })
+
+//     if (!blog) {
+//       return res.status(404).json({
+//         success: false,
+//         message: "Blog not found"
+//       })
+//     }
+
+//     res.status(200).json({
+//       success: true,
+//       blog
+//     })
+
+//   } catch (e) {
+//     console.log(e)
+//     return res.status(500).json({ message: 'error from backend', error: e })
+//   }
+// }
+
 exports.getBlogById = async (req, res) => {
   try {
-    let blogId = req.params.postId
-    const blog = await Blog.findOne({ _id: blogId })
+    const blogId = req.params.postId;
 
-    if (!blog) {
-      return res.status(404).json({
-        success: false,
-        message: "Blog not found"
-      })
+    if (!blogId || blogId === "null") {
+      return res.status(400).json({ message: "Invalid blog id" });
     }
 
-    res.status(200).json({
-      success: true,
-      blog
-    })
+    const blog = await Blog.findById(blogId);
+
+    if (!blog) {
+      return res.status(404).json({ message: "Blog not found" });
+    }
 
+    res.json({ success: true, blog });
   } catch (e) {
-    console.log(e)
-    return res.status(500).json({ message: 'error from backend', error: e })
+    res.status(500).json({ message: "error from backend", error: e });
   }
-}
+};
 
 exports.updateBlog = async (req, res) => {
   try {
-    const { title, content } = req.body;
+    const { title, content, published } = req.body;
     const blogId = req.params.postId;
     const userId = req.user._id;
 
-    const blog = await Blog.findOneAndUpdate(
-      { _id: blogId, author: userId },
-      { title, content },
-      { new: true }
-    );
+    const blog = await Blog.findById(blogId);
 
     if (!blog) {
-      return res.status(404).json({ message: "Blog not found or unauthorized" });
+      return res.status(404).json({ message: "Blog not found" });
     }
 
+    const isAuthor = blog.author.toString() === userId.toString();
+    const collaborator = blog.collaborators.find(c => c.email === req.user.email);
+    const canEdit = isAuthor || (collaborator && collaborator.role === 'edit');
+
+    if (!canEdit) {
+      return res.status(403).json({ message: "You do not have permission to edit this blog" });
+    }
+
+    blog.title = title;
+    blog.content = content;
+    blog.published = published ?? blog.published;
+
+    await blog.save();
+
     res.status(200).json({ success: true, blog });
   } catch (e) {
     res.status(500).json({ message: "Update failed", error: e });
   }
 };
+
+
+exports.createDraft = async (req, res) => {
+  const blog = await Blog.create({
+    author: req.user._id,
+    title: '',
+    published: false,
+    slug: slugify(`draft-${Date.now()}`, { lower: true }),
+    content: []
+  })
+  res.json({ blog })
+}
+
+exports.shareBlog = async (req, res) => {
+  console.log("Sharing blog route hit!", { blogId: req.params.postId, email: req.body.email });
+  try {
+    const { email, role } = req.body;
+    const blogId = req.params.postId;
+    const userId = req.user._id;
+
+    if (!email || !role) {
+      return res.status(400).json({ message: "Email and role are required" });
+    }
+
+    const blog = await Blog.findById(blogId);
+
+    if (!blog) {
+      return res.status(404).json({ message: "Blog not found" });
+    }
+
+    // Only author can share
+    if (blog.author.toString() !== userId.toString()) {
+      return res.status(403).json({ message: "Only the author can share this blog" });
+    }
+
+    // Check if user already has access
+    const existingCollaborator = blog.collaborators.find(c => c.email === email);
+    if (existingCollaborator) {
+      existingCollaborator.role = role;
+    } else {
+      blog.collaborators.push({ email, role });
+    }
+
+    await blog.save();
+
+    // Send email notification
+    const inviteLink = `${process.env.FRONTEND_URL}/blog/${blogId}`;
+    const subject = `Invitation to collaborate on "${blog.title || 'Untitled Blog'}"`;
+    const text = `You have been invited to ${role} the blog "${blog.title || 'Untitled Blog'}". Access it here: ${inviteLink}`;
+    const html = `<p>You have been invited to <strong>${role}</strong> the blog "<strong>${blog.title || 'Untitled Blog'}</strong>".</p><p>Access it here: <a href="${inviteLink}">${inviteLink}</a></p>`;
+
+    try {
+      await sendEmail(email, subject, text, html);
+    } catch (emailError) {
+      console.error("Detailed Email Error:", emailError);
+      return res.status(200).json({
+        success: true,
+        message: `Collaborator added, but email failed: ${emailError.message}. Check your RESEND_API_KEY settings.`
+      });
+    }
+
+    res.status(200).json({ success: true, message: "Invitation sent successfully" });
+  } catch (e) {
+    console.error(e);
+    res.status(500).json({ message: "Sharing failed", error: e.message });
+  }
+};
+
+exports.removeCollaborator = async (req, res) => {
+  try {
+    const { email } = req.body;
+    const blogId = req.params.postId;
+    const userId = req.user._id;
+
+    const blog = await Blog.findById(blogId);
+
+    if (!blog) {
+      return res.status(404).json({ message: "Blog not found" });
+    }
+
+    // Only author can remove collaborators
+    if (blog.author.toString() !== userId.toString()) {
+      return res.status(403).json({ message: "Only the author can remove collaborators" });
+    }
+
+    blog.collaborators = blog.collaborators.filter(c => c.email !== email);
+    await blog.save();
+
+    res.status(200).json({ success: true, message: "Collaborator removed successfully" });
+  } catch (e) {
+    console.error(e);
+    res.status(500).json({ message: "Action failed", error: e.message });
+  }
+};
\ No newline at end of file
diff --git a/backend/index.js b/backend/index.js
index f42d254..72fdb14 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -1,7 +1,9 @@
 require("dotenv").config();
 const express = require("express");
 const cors = require("cors");
-const connectDB = require("./config/db"); 
+const helmet = require("helmet");
+const rateLimit = require("express-rate-limit");
+const connectDB = require("./config/db");
 
 const authRoutes = require("./routes/authRoutes");
 const blogRoutes = require("./routes/blogRoutes");
@@ -9,39 +11,92 @@ const blogRoutes = require("./routes/blogRoutes");
 const app = express();
 const PORT = process.env.PORT || 3000;
 
-const helmet = require('helmet')
-const rateLimit = require('express-rate-limit')
-const hpp = require('hpp')
+// 1. CORS - MUST BE FIRST to catch all requests and provide headers
+app.use(
+	cors({
+		origin: (origin, callback) => {
+			if (!origin) return callback(null, true);
+
+			const allowedOrigins = [
+				"http://localhost:5173",
+				"http://localhost:5174",
+				"http://localhost:5175",
+				process.env.FRONTEND_URL,
+				"https://og-doc.vercel.app",
+			];
 
+			const isAllowed = allowedOrigins.some(ao => ao && ao.replace(/\/$/, '').toLowerCase() === origin.replace(/\/$/, '').toLowerCase()) ||
+				origin.endsWith(".onrender.com") ||
+				origin.includes("ngrok-free") ||
+				origin.endsWith(".vercel.app");
+
+			if (isAllowed) {
+				callback(null, true);
+			} else {
+				console.error("❌ CORS Blocked:", origin);
+				callback(new Error('CORS not allowed for this origin'));
+			}
+		},
+		credentials: true,
+		methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'],
+		allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'Accept'],
+		exposedHeaders: ['Set-Cookie']
+	})
+);
+
+// 2. Security Headers (configured to allow cross-origin communication)
+app.use(helmet({
+	crossOriginOpenerPolicy: { policy: "same-origin-allow-popups" },
+	crossOriginResourcePolicy: { policy: "cross-origin" },
+	crossOriginEmbedderPolicy: false,
+	contentSecurityPolicy: false,
+	referrerPolicy: { policy: "strict-origin-when-cross-origin" },
+}));
+
+// 3. Rate Limiting (moved below CORS so preflight OPTIONS requests aren't blocked silently)
 const limiter = rateLimit({
-	windowMs: 15 * 60 * 1000, 
-	limit: 100, 
-	standardHeaders: 'draft-8', 
-	legacyHeaders: false, 
-	ipv6Subnet: 56, 
+	windowMs: 15 * 60 * 1000,
+	limit: 500, // Increased limit for testing
+	standardHeaders: 'draft-8',
+	legacyHeaders: false,
 })
-
 app.use(limiter)
 
-app.use(helmet())
-
-app.use(
-  cors({
-    origin: ["http://localhost:5173", "http://localhost:5174", "http://localhost:5175",process.env.FRONTEND_URL,process.env.LIBRARY_URL],
-    credentials:true
-  })
-);
+const hpp = require('hpp')
+const http = require("http")
+const initSocket = require("./socket");
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(hpp())
 connectDB()
 
+// Health check endpoint
+app.get('/health', (req, res) => {
+	res.status(200).json({ status: 'ok', message: 'Server is running' });
+});
+
+// Root endpoint
+app.get('/', (req, res) => {
+	res.status(200).json({
+		message: 'ogDoc API Server',
+		version: '1.0.0',
+		endpoints: {
+			auth: '/api/auth',
+			blog: '/api/blog'
+		}
+	});
+});
+
 app.use("/api/auth", authRoutes);
-app.use("/api", blogRoutes);
+app.use("/api/blog", blogRoutes);
 
 if (require.main === module) {
-  app.listen(PORT);
-}
 
+	const server = http.createServer(app);
+	initSocket(server);
+
+	console.log(`Attempting to listen on port ${PORT}`);
+	server.listen(PORT, () => console.log(`Server running on ${PORT}`));
+}
 module.exports = app;
\ No newline at end of file
diff --git a/backend/middlewares/authMiddleware.js b/backend/middlewares/authMiddleware.js
index d567e8d..1ec8fa1 100644
--- a/backend/middlewares/authMiddleware.js
+++ b/backend/middlewares/authMiddleware.js
@@ -15,12 +15,10 @@ const protect = async (req, res, next) => {
       next();
     } catch (error) {
       console.log("Auth Middleware: Token Verification Failed:", error.message);
-      res.status(401).json({ message: "Not authorized" });
+      return res.status(401).json({ message: "Not authorized" });
     }
-  }
-
-  if (!token) {
-    res.status(401).json({ message: "Not authorized, no token" });
+  } else {
+    return res.status(401).json({ message: "Not authorized, no token" });
   }
 };
 
diff --git a/backend/models/Blog.js b/backend/models/Blog.js
index f80246e..3246292 100644
--- a/backend/models/Blog.js
+++ b/backend/models/Blog.js
@@ -1,3 +1,34 @@
+// const mongoose = require('mongoose')
+
+// const blogSchema = new mongoose.Schema(
+//   {
+//     author: {
+//       type: mongoose.Schema.Types.ObjectId,
+//       ref: 'User',
+//       required: true
+//     },
+//     title: {
+//       type: String,
+//       required: true,
+//       trim: true
+//     },
+//     slug: {
+//       type: String,
+//       required: true,
+//       unique: true
+//     },
+//     content: {
+//       type: Array,
+//       required: true,
+//       default: []
+//     }
+//   },
+//   { timestamps: true }
+// )
+
+// module.exports = mongoose.model('Blog', blogSchema)
+
+
 const mongoose = require('mongoose')
 
 const blogSchema = new mongoose.Schema(
@@ -7,21 +38,55 @@ const blogSchema = new mongoose.Schema(
       ref: 'User',
       required: true
     },
+
     title: {
       type: String,
-      required: true,
-      trim: true
+      trim: true,
+      required: function () {
+        return this.published === true
+      }
     },
     slug: {
       type: String,
       required: true,
       unique: true
     },
+
     content: {
       type: Array,
-      required: true,
       default: []
-    }
+    },
+    published: {
+      type: Boolean,
+      default: false
+    },
+
+    //  Yjs snapshot for collaboration
+    collabSnapshot: {
+      type: Buffer, // store encoded Yjs state
+      default: null
+    },
+
+    // Optional: track who is currently editing
+    activeEditors: [
+      {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'User'
+      }
+    ],
+
+    // Collaboration versioning (future-proof)
+    collabVersion: {
+      type: Number,
+      default: 1
+    },
+
+    collaborators: [
+      {
+        email: { type: String, required: true },
+        role: { type: String, enum: ['view', 'edit'], default: 'view' }
+      }
+    ]
   },
   { timestamps: true }
 )
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 87a95d9..9d9dbe6 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -20,7 +20,12 @@
         "jsonwebtoken": "^9.0.3",
         "mongoose": "^9.1.5",
         "nanoid": "^3.3.11",
+        "nodemailer": "^8.0.1",
+        "resend": "^6.9.2",
         "slugify": "^1.6.6",
+        "socket.io": "^4.8.3",
+        "socket.io-client": "^4.8.3",
+        "yjs": "^13.6.29",
         "zod": "^4.3.6"
       },
       "devDependencies": {
@@ -78,6 +83,36 @@
         "node": ">=14"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "25.2.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.2.tgz",
+      "integrity": "sha512-BkmoP5/FhRYek5izySdkOneRyXYN35I860MFAGupTdebyE66uZaR+bXLHq8k4DirE5DwQi3NuhvRU1jqTVwUrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/@types/webidl-conversions": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
@@ -195,6 +230,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/bignumber.js": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
@@ -553,6 +597,91 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.6.5",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.5.tgz",
+      "integrity": "sha512-2RZdgEbXmp5+dVbRm0P7HQUImZpICccJy7rN7Tv+SFa55pH+lxnuw6/K1ZxxBfHoYpSkHLAO92oa8O4SwFXA2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
+      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -665,6 +794,12 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
     "node_modules/fetch-blob": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
@@ -1213,6 +1348,16 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "license": "MIT",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -1289,6 +1434,27 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/lib0": {
+      "version": "0.2.117",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
+      "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==",
+      "license": "MIT",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
@@ -1615,6 +1781,15 @@
         "node-gyp-build-test": "build-test.js"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.1.tgz",
+      "integrity": "sha512-5kcldIXmaEjZcHR6F28IKGSgpmZHaF1IXLWFTG+Xh3S+Cce4MiakLtWY+PlBU69fLbRa8HlaGIrC/QolUpHkhg==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/nodemon": {
       "version": "3.1.11",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.11.tgz",
@@ -1759,6 +1934,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postal-mime": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/postal-mime/-/postal-mime-2.7.3.tgz",
+      "integrity": "sha512-MjhXadAJaWgYzevi46+3kLak8y6gbg0ku14O1gO/LNOuay8dO+1PtcSGvAdgDR0DoIsSaiIA8y/Ddw6MnrO0Tw==",
+      "license": "MIT-0"
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1840,6 +2021,27 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/resend": {
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.9.2.tgz",
+      "integrity": "sha512-uIM6CQ08tS+hTCRuKBFbOBvHIGaEhqZe8s4FOgqsVXSbQLAhmNWpmUhG3UAtRnmcwTWFUqnHa/+Vux8YGPyDBA==",
+      "license": "MIT",
+      "dependencies": {
+        "postal-mime": "2.7.3",
+        "svix": "1.84.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/rimraf": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
@@ -2093,6 +2295,105 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.3.tgz",
+      "integrity": "sha512-2Dd78bqzzjE6KPkD5fHZmDAKRNe3J15q+YHDrIsy9WEkqttc7GY+kT9OBLSMaPbQaEd0x1BjcmtMtXkfpc+T5A==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.4.1",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.6.tgz",
+      "integrity": "sha512-DkkO/dz7MGln0dHn5bmN3pPy+JmywNICWrJqVWiVOyvXjWQFIv9c2h24JrQLLFJ2aQVQf/Cvl1vblnd4r2apLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.4.1",
+        "ws": "~8.18.3"
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
+      "integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io/node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/socket.io/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/socket.io/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/socket.io/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/sparse-bitfield": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
@@ -2102,6 +2403,16 @@
         "memory-pager": "^1.0.2"
       }
     },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -2220,6 +2531,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/svix": {
+      "version": "1.84.1",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.84.1.tgz",
+      "integrity": "sha512-K8DPPSZaW/XqXiz1kEyzSHYgmGLnhB43nQCMeKjWGCUpLIpAMMM8kx3rVVOSm6Bo6EHyK1RQLPT4R06skM/MlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "standardwebhooks": "1.0.0",
+        "uuid": "^10.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2285,6 +2606,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -2294,6 +2621,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -2446,6 +2786,52 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/yjs": {
+      "version": "13.6.29",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.29.tgz",
+      "integrity": "sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/zod": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
diff --git a/backend/package.json b/backend/package.json
index a62d360..5733a4d 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -23,7 +23,12 @@
     "jsonwebtoken": "^9.0.3",
     "mongoose": "^9.1.5",
     "nanoid": "^3.3.11",
+    "nodemailer": "^8.0.1",
+    "resend": "^6.9.2",
     "slugify": "^1.6.6",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
+    "yjs": "^13.6.29",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/backend/routes/blogRoutes.js b/backend/routes/blogRoutes.js
index 8a9d114..7805c6e 100644
--- a/backend/routes/blogRoutes.js
+++ b/backend/routes/blogRoutes.js
@@ -1,17 +1,38 @@
 
 const express = require("express");
 const { protect } = require("../middlewares/authMiddleware");
-const { addBlog, getBlog, getUserBlogs, deleteUserPost, getBlogById, updateBlog } = require("../controllers/blogController");
+const {
+    addBlog,
+    getBlog,
+    getUserBlogs,
+    deleteUserPost,
+    getBlogById,
+    updateBlog,
+    createDraft,
+    shareBlog,
+    removeCollaborator
+} = require("../controllers/blogController");
 
 const router = express.Router();
 
-router.get("/viewblog/:slug", getBlog);
+/**
+ * ALL ROUTES HERE ARE PREFIXED WITH /api/blog (via index.js)
+ */
+
+// Debugging
+router.get("/ping", (req, res) => res.json({ message: "Blog routes active" }));
 
-router.post("/blog/postblog", protect, addBlog);
-router.get("/blog/user-blogs",protect,getUserBlogs)
-router.get("/blog/deleteblog/:postId",protect,deleteUserPost)
-router.get("/blog/:postId",getBlogById)
-router.post("/blog/updateblog/:postId", protect, updateBlog);
+// MAIN SHARE ROUTE
+router.post("/share-post/:postId", protect, shareBlog);
+router.post("/remove-collaborator/:postId", protect, removeCollaborator);
 
+// Other Routes
+router.post("/create-draft", protect, createDraft);
+router.get("/user-blogs", protect, getUserBlogs);
+router.get("/deleteblog/:postId", protect, deleteUserPost);
+router.get("/:postId", getBlogById);
+router.post("/updateblog/:postId", protect, updateBlog);
+router.post("/postblog", protect, addBlog);
+router.get("/viewblog/:slug", getBlog);
 
 module.exports = router;
diff --git a/backend/socket/auth.js b/backend/socket/auth.js
new file mode 100644
index 0000000..80f153a
--- /dev/null
+++ b/backend/socket/auth.js
@@ -0,0 +1,26 @@
+// socket/auth.js
+const jwt = require("jsonwebtoken");
+const User = require("../models/User");
+
+const authSocket = async (socket, next) => {
+  try {
+    const token = socket.handshake.auth?.token;
+
+    if (token) {
+      // JWT user
+      const decoded = jwt.verify(token, process.env.JWT_SECRET);
+      socket.user = await User.findById(decoded.userId).select("-password");
+    } else {
+      // Guest user (anyone with link)
+      const ip = socket.handshake.address.replace(/[:.]/g, ""); // sanitize IP
+      socket.user = { _id: `guest-${ip}-${socket.id}`, name: `Guest-${ip}` };
+    }
+
+    next();
+  } catch (err) {
+    console.log("Socket Auth Error:", err.message);
+    next(new Error("Authentication failed"));
+  }
+};
+
+module.exports = authSocket;
diff --git a/backend/socket/handlers/awareness.js b/backend/socket/handlers/awareness.js
new file mode 100644
index 0000000..16ec4a9
--- /dev/null
+++ b/backend/socket/handlers/awareness.js
@@ -0,0 +1,11 @@
+const rooms = require("../rooms");
+
+module.exports = (io, socket, { blogId, awareness }) => {
+  if (!rooms[blogId]) return;
+
+  // Broadcast awareness (cursor, selection)
+  socket.to(blogId).emit("doc:awareness", {
+    userId: socket.user._id,
+    awareness
+  });
+};
diff --git a/backend/socket/handlers/disconnect.js b/backend/socket/handlers/disconnect.js
new file mode 100644
index 0000000..c50b445
--- /dev/null
+++ b/backend/socket/handlers/disconnect.js
@@ -0,0 +1,22 @@
+const { leaveRoom, rooms } = require("../rooms");
+const { saveSnapshot } = require("../../collaboration/persistence/saveSnapshot");
+const { docs } = require("../../collaboration/yjs/createDoc");
+
+const disconnect = async (io, socket) => {
+  rooms.forEach(async (socketsSet, blogId) => {
+    if (socketsSet.has(socket.id)) {
+      leaveRoom(blogId, socket);
+
+      // if last user left, persist snapshot
+      if (!rooms.has(blogId)) {
+        const ydoc = docs.get(blogId);
+        if (ydoc) {
+          await saveSnapshot(blogId, ydoc);
+          // Note: docs.delete(blogId) should probably happen here if we want to free memory
+        }
+      }
+    }
+  });
+};
+
+module.exports = { disconnect };
diff --git a/backend/socket/handlers/joinDoc.js b/backend/socket/handlers/joinDoc.js
new file mode 100644
index 0000000..c28bc94
--- /dev/null
+++ b/backend/socket/handlers/joinDoc.js
@@ -0,0 +1,32 @@
+const Y = require("yjs");
+const { createDoc } = require("../../collaboration/yjs/createDoc");
+const { joinRoom } = require("../rooms");
+
+const joinDoc = async (io, socket, blogId) => {
+  socket.join(blogId);
+  joinRoom(blogId, socket);
+
+  // Load or create Yjs document
+  const ydoc = await createDoc(blogId);
+
+  // Send current Yjs state to this socket
+  const state = Y.encodeStateAsUpdate(ydoc);
+  socket.emit("doc:sync", state);
+
+  // Build users list WITH socketId
+  const usersInRoom = Array.from(
+    io.sockets.adapter.rooms.get(blogId) || []
+  ).map((id) => {
+    const s = io.sockets.sockets.get(id);
+    return {
+      name: s.user?.name || "Anonymous",
+      email: s.user?.email || null,
+      socketId: id,
+    };
+  });
+
+  // Emit users to everyone in the room
+  io.to(blogId).emit("doc:users", usersInRoom);
+};
+
+module.exports = { joinDoc };
diff --git a/backend/socket/handlers/syncUpdate.js b/backend/socket/handlers/syncUpdate.js
new file mode 100644
index 0000000..34df314
--- /dev/null
+++ b/backend/socket/handlers/syncUpdate.js
@@ -0,0 +1,16 @@
+// socket/handlers/syncUpdate.js
+const { applyUpdate } = require("../../collaboration/yjs/applyUpdate");
+const { docs } = require("../../collaboration/yjs/createDoc");
+
+const syncUpdate = (io, socket, blogId, update) => {
+  const ydoc = docs.get(blogId);
+  if (!ydoc) return;
+
+  // Apply update to Yjs doc
+  applyUpdate(ydoc, update);
+
+  // Broadcast to everyone else
+  socket.to(blogId).emit("doc:update", update);
+};
+
+module.exports = { syncUpdate };
diff --git a/backend/socket/index.js b/backend/socket/index.js
new file mode 100644
index 0000000..ac29123
--- /dev/null
+++ b/backend/socket/index.js
@@ -0,0 +1,96 @@
+const { Server } = require("socket.io");
+const authSocket = require("./auth");
+const { joinDoc } = require("./handlers/joinDoc");
+const { syncUpdate } = require("./handlers/syncUpdate");
+const { disconnect } = require("./handlers/disconnect");
+
+const initSocket = (server) => {
+  const io = new Server(server, {
+    cors: {
+      origin: [
+        "http://localhost:5173",
+        "http://localhost:5174",
+        "http://localhost:5175",
+        "http://192.168.29.93:5173",
+      ],
+      credentials: true
+    },
+  });
+
+  io.use(authSocket);
+
+  io.on("connection", (socket) => {
+    console.log("Socket connected:", socket.id, socket.user?.name);
+
+    // ================= DOC COLLAB =================
+    socket.on("doc:join", async (blogId) => {
+      await joinDoc(io, socket, blogId);
+    });
+
+    socket.on("doc:update", async (data) => {
+      await syncUpdate(io, socket, data.blogId, data.update);
+    });
+
+    socket.on("doc:awareness", ({ blogId, awareness }) => {
+      socket.to(blogId).emit("doc:awareness", awareness);
+    });
+
+    // ================= VIDEO CALL =================
+    socket.on("call:join", (blogId) => {
+      socket.join(`call-${blogId}`);
+      socket.to(`call-${blogId}`).emit("call:user-joined", {
+        socketId: socket.id,
+      });
+    });
+
+    socket.on("call:signal", ({ to, signal }) => {
+      io.to(to).emit("call:signal", {
+        from: socket.id,
+        signal,
+      });
+    });
+
+    socket.on("call:leave", (blogId) => {
+      socket.leave(`call-${blogId}`);
+      socket.to(`call-${blogId}`).emit("call:user-left", socket.id);
+    });
+
+
+    // INVITE
+    socket.on("call:invite", ({ blogId, to }) => {
+      io.to(to).emit("call:incoming", {
+        from: socket.id,
+        blogId,
+        user: socket.user,
+      });
+    });
+
+    // KICK
+    socket.on("doc:kick", ({ blogId, socketId }) => {
+      io.to(socketId).emit("doc:kicked");
+    });
+
+    // ACCEPT
+    socket.on("call:accept", ({ to, blogId }) => {
+      io.to(to).emit("call:accepted", {
+        from: socket.id,
+        blogId,
+      });
+    });
+
+    // DECLINE
+    socket.on("call:decline", ({ to }) => {
+      io.to(to).emit("call:declined", {
+        from: socket.id,
+      });
+    });
+
+
+    socket.on("disconnect", () => {
+      disconnect(io, socket);
+      console.log("Socket disconnected:", socket.id);
+    });
+  });
+};
+
+module.exports = initSocket;
diff --git a/backend/socket/registerHandlers.js b/backend/socket/registerHandlers.js
new file mode 100644
index 0000000..22a96eb
--- /dev/null
+++ b/backend/socket/registerHandlers.js
@@ -0,0 +1,20 @@
+// const joinDoc = require("./handlers/joinDoc");
+// const syncUpdate = require("./handlers/syncUpdate");
+// const awareness = require("./handlers/awareness");
+// const disconnect = require("./handlers/disconnect");
+
+// module.exports = (io, socket) => {
+//   socket.on("doc:join", (data) => joinDoc(io, socket, data));
+//   socket.on("doc:update", (data) => syncUpdate(io, socket, data));
+//   socket.on("doc:awareness", (data) => awareness(io, socket, data));
+//   socket.on("disconnect", () => disconnect(io, socket));
+// };
+const joinDoc = require('./handlers/joinDoc');
+const syncUpdate = require('./handlers/syncUpdate');
+const disconnect = require('./handlers/disconnect');
+
+module.exports = (io, socket) => {
+  socket.on('doc:join', (data) => joinDoc(io, socket, data));
+  socket.on('sync:update', (data) => syncUpdate(io, socket, data));
+  socket.on('disconnect', () => disconnect(io, socket));
+};
diff --git a/backend/socket/rooms.js b/backend/socket/rooms.js
new file mode 100644
index 0000000..8096759
--- /dev/null
+++ b/backend/socket/rooms.js
@@ -0,0 +1,14 @@
+const rooms = new Map(); // blogId -> Set of socket ids
+
+const joinRoom = (blogId, socket) => {
+    if (!rooms.has(blogId)) rooms.set(blogId, new Set());
+    rooms.get(blogId).add(socket.id);
+};
+
+const leaveRoom = (blogId, socket) => {
+    if (!rooms.has(blogId)) return;
+    rooms.get(blogId).delete(socket.id);
+    if (rooms.get(blogId).size === 0) rooms.delete(blogId);
+};
+
+module.exports = { joinRoom, leaveRoom, rooms };
diff --git a/backend/utils/emailService.js b/backend/utils/emailService.js
new file mode 100644
index 0000000..4efcf2b
--- /dev/null
+++ b/backend/utils/emailService.js
@@ -0,0 +1,37 @@
+const { Resend } = require("resend");
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+const sendEmail = async (to, subject, text, html) => {
+    console.log("Resend Service Attempt:", {
+        apiKey: process.env.RESEND_API_KEY ? "DETECTED" : "MISSING",
+        to
+    });
+
+    if (!process.env.RESEND_API_KEY) {
+        throw new Error("Missing RESEND_API_KEY environment variable");
+    }
+
+    try {
+        const { data, error } = await resend.emails.send({
+            from: "ogDoc@shamiltp.me",
+            to,
+            subject,
+            text,
+            html,
+        });
+
+        if (error) {
+            console.error("Resend API Error:", error);
+            throw new Error(error.message);
+        }
+
+        console.log("Email sent successfully via Resend:", data.id);
+        return data;
+    } catch (error) {
+        console.error("Resend execution error:", error);
+        throw error;
+    }
+};
+
+module.exports = { sendEmail };
diff --git a/backend/utils/tokenUtil.js b/backend/utils/tokenUtil.js
index df16a2e..bd42159 100644
--- a/backend/utils/tokenUtil.js
+++ b/backend/utils/tokenUtil.js
@@ -1,7 +1,7 @@
 const jwt = require("jsonwebtoken");
 
 const generateAccessToken = (userId) => {
-  return jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: "15m" });
+  return jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: "24h" });
 };
 
 const generateRefreshToken = (userId) => {
diff --git a/diagnose-404.ps1 b/diagnose-404.ps1
new file mode 100644
index 0000000..96474cb
--- /dev/null
+++ b/diagnose-404.ps1
@@ -0,0 +1,69 @@
+# 404 Error Diagnostic Script
+# Run this to help identify what's causing the 404 error
+
+Write-Host "ogDoc 404 Error Diagnostic Tool" -ForegroundColor Cyan
+Write-Host "===================================" -ForegroundColor Cyan
+Write-Host ""
+
+# Test 1: Check Backend Health
+Write-Host "1. Testing Backend Health..." -ForegroundColor Yellow
+try {
+    $backendHealth = Invoke-RestMethod -Uri "https://ogdoc.onrender.com/health" -Method Get -TimeoutSec 10
+    if ($backendHealth.status -eq "ok") {
+        Write-Host "   OK: Backend is healthy!" -ForegroundColor Green
+        Write-Host "   Response: $($backendHealth | ConvertTo-Json -Compress)" -ForegroundColor Gray
+    } else {
+        Write-Host "   Warning: Backend returned unexpected response" -ForegroundColor Yellow
+    }
+} catch {
+    Write-Host "   Error: Backend health check failed!" -ForegroundColor Red
+    Write-Host "   Message: $($_.Exception.Message)" -ForegroundColor Red
+}
+Write-Host ""
+
+# Test 2: Check Local Backend
+Write-Host "2. Testing Local Backend (Port 5001)..." -ForegroundColor Yellow
+try {
+    $localBackend = Invoke-RestMethod -Uri "http://localhost:5001/health" -Method Get -TimeoutSec 2
+    Write-Host "   OK: Local backend is running on port 5001" -ForegroundColor Green
+} catch {
+    Write-Host "   Info: Local backend not running on 5001" -ForegroundColor Gray
+}
+Write-Host ""
+
+# Test 3: Check Frontend
+Write-Host "3. Testing Frontend..." -ForegroundColor Yellow
+try {
+    $frontendResponse = Invoke-WebRequest -Uri "https://ogdoc-1.onrender.com/" -Method Get -TimeoutSec 10 -UseBasicParsing
+    Write-Host "   OK: Frontend is accessible!" -ForegroundColor Green
+    Write-Host "   Status Code: $($frontendResponse.StatusCode)" -ForegroundColor Gray
+} catch {
+    Write-Host "   Error: Frontend failed!" -ForegroundColor Red
+    Write-Host "   Message: $($_.Exception.Message)" -ForegroundColor Red
+}
+Write-Host ""
+
+# Test 4: Check if local dev server is running
+Write-Host "4. Checking Local Dev Server (Port 5173)..." -ForegroundColor Yellow
+try {
+    $localResponse = Invoke-WebRequest -Uri "http://localhost:5173/" -Method Get -TimeoutSec 2 -UseBasicParsing
+    Write-Host "   OK: Local dev server is running on port 5173" -ForegroundColor Green
+} catch {
+    Write-Host "   Info: Local dev server not running" -ForegroundColor Gray
+}
+Write-Host ""
+
+Write-Host "Summary & Next Steps:" -ForegroundColor Cyan
+Write-Host "========================" -ForegroundColor Cyan
+Write-Host ""
+Write-Host "If you're seeing 404 errors, please provide:" -ForegroundColor White
+Write-Host "1. The EXACT URL showing the 404 (from network tab)" -ForegroundColor White
+Write-Host "2. Check if VITE_BACKEND_URL in frontend/.env matches your intended backend" -ForegroundColor White
+Write-Host ""
+Write-Host "Common Issues:" -ForegroundColor Yellow
+Write-Host "- Testing locally without rebuilding: Run 'npm run dev' in frontend folder" -ForegroundColor Gray
+Write-Host "- Render still deploying: Wait 2-3 minutes after git push" -ForegroundColor Gray
+Write-Host "- Browser cache: Hard refresh with Ctrl+Shift+R" -ForegroundColor Gray
+Write-Host "- Missing render.json: Ensure it's in your build output" -ForegroundColor Gray
+Write-Host ""
+
diff --git a/frontend/index.html b/frontend/index.html
index 089e053..14c7e9d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,10 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/images/img.png" />
+    <link rel="icon" type="image/png" href="/images/Logo.png" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>blogify</title>
+    <title>ogDoc</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b3836fb..078cbd5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,13 +12,16 @@
         "@coreui/icons": "^3.0.1",
         "@coreui/icons-react": "^2.3.0",
         "@coreui/react": "^5.9.2",
+        "@ngrok/ngrok": "^1.7.0",
         "@react-oauth/google": "^0.13.4",
         "@tailwindcss/vite": "^4.1.18",
         "axios": "^1.13.2",
         "classnames": "^2.5.1",
         "is-hotkey": "^0.2.0",
         "lodash": "^4.17.23",
+        "ogl": "^1.0.11",
         "quill": "^2.0.3",
+        "quill-cursors": "^4.0.4",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-grid-layout": "^2.2.2",
@@ -26,7 +29,11 @@
         "react-router-dom": "^7.12.0",
         "react-secure-storage": "^1.3.2",
         "slate-history": "^0.113.1",
+        "socket.io-client": "^4.8.3",
         "uuid": "^13.0.0",
+        "y-protocols": "^1.0.7",
+        "y-quill": "^1.0.0",
+        "yjs": "^13.6.29",
         "zod": "^4.3.6"
       },
       "devDependencies": {
@@ -921,6 +928,235 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@ngrok/ngrok": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok/-/ngrok-1.7.0.tgz",
+      "integrity": "sha512-P06o9TpxrJbiRbHQkiwy/rUrlXRupc+Z8KT4MiJfmcdWxvIdzjCaJOdnNkcOTs6DMyzIOefG5tvk/HLdtjqr0g==",
+      "license": "(MIT OR Apache-2.0)",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@ngrok/ngrok-android-arm64": "1.7.0",
+        "@ngrok/ngrok-darwin-arm64": "1.7.0",
+        "@ngrok/ngrok-darwin-universal": "1.7.0",
+        "@ngrok/ngrok-darwin-x64": "1.7.0",
+        "@ngrok/ngrok-freebsd-x64": "1.7.0",
+        "@ngrok/ngrok-linux-arm-gnueabihf": "1.7.0",
+        "@ngrok/ngrok-linux-arm64-gnu": "1.7.0",
+        "@ngrok/ngrok-linux-arm64-musl": "1.7.0",
+        "@ngrok/ngrok-linux-x64-gnu": "1.7.0",
+        "@ngrok/ngrok-linux-x64-musl": "1.7.0",
+        "@ngrok/ngrok-win32-arm64-msvc": "1.7.0",
+        "@ngrok/ngrok-win32-ia32-msvc": "1.7.0",
+        "@ngrok/ngrok-win32-x64-msvc": "1.7.0"
+      }
+    },
+    "node_modules/@ngrok/ngrok-android-arm64": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-android-arm64/-/ngrok-android-arm64-1.7.0.tgz",
+      "integrity": "sha512-8tco3ID6noSaNy+CMS7ewqPoIkIM6XO5COCzsUp3Wv3XEbMSyn65RN6cflX2JdqLfUCHcMyD0ahr9IEiHwqmbQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-darwin-arm64": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-arm64/-/ngrok-darwin-arm64-1.7.0.tgz",
+      "integrity": "sha512-+dmJSOzSO+MNDVrPOca2yYDP1W3KfP4qOlAkarIeFRIfqonQwq3QCBmcR7HAlZocLsSqEwyG6KP4RRvAuT0WGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-darwin-universal": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-universal/-/ngrok-darwin-universal-1.7.0.tgz",
+      "integrity": "sha512-fDEfewyE2pWGFBhOSwQZObeHUkc65U1l+3HIgSOe094TMHsqmyJD0KTCgW9KSn0VP4OvDZbAISi1T3nvqgZYhQ==",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-darwin-x64": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-x64/-/ngrok-darwin-x64-1.7.0.tgz",
+      "integrity": "sha512-+fwMi5uHd9G8BS42MMa9ye6exI5lwTcjUO6Ut497Vu0qgLONdVRenRqnEePV+Q3KtQR7NjqkMnomVfkr9MBjtw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-freebsd-x64": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-freebsd-x64/-/ngrok-freebsd-x64-1.7.0.tgz",
+      "integrity": "sha512-2OGgbrjy3yLRrqAz5N6hlUKIWIXSpR5RjQa2chtZMsSbszQ6c9dI+uVQfOKAeo05tHMUgrYAZ7FocC+ig0dzdQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-linux-arm-gnueabihf": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm-gnueabihf/-/ngrok-linux-arm-gnueabihf-1.7.0.tgz",
+      "integrity": "sha512-SN9YIfEQiR9xN90QVNvdgvAemqMLoFVSeTWZs779145hQMhvF9Qd9rnWi6J+2uNNK10OczdV1oc/nq1es7u/3g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-linux-arm64-gnu": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm64-gnu/-/ngrok-linux-arm64-gnu-1.7.0.tgz",
+      "integrity": "sha512-KDMgzPKFU2kbpVSaA2RZBBia5IPdJEe063YlyVFnSMJmPYWCUnMwdybBsucXfV9u1Lw/ZjKTKotIlbTWGn3HGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-linux-arm64-musl": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm64-musl/-/ngrok-linux-arm64-musl-1.7.0.tgz",
+      "integrity": "sha512-e66vUdVrBlQ0lT9ZdamB4U604zt5Gualt8/WVcUGzbu8s5LajWd6g/mzZCUjK4UepjvMpfgmCp1/+rX7Rk8d5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-linux-x64-gnu": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-x64-gnu/-/ngrok-linux-x64-gnu-1.7.0.tgz",
+      "integrity": "sha512-M6gF0DyOEFqXLfWxObfL3bxYZ4+PnKBHuyLVaqNfFN9Y5utY2mdPOn5422Ppbk4XoIK5/YkuhRqPJl/9FivKEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-linux-x64-musl": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-x64-musl/-/ngrok-linux-x64-musl-1.7.0.tgz",
+      "integrity": "sha512-4Ijm0dKeoyzZTMaYxR2EiNjtlK81ebflg/WYIO1XtleFrVy4UJEGnxtxEidYoT4BfCqi4uvXiK2Mx216xXKvog==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-win32-arm64-msvc": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-arm64-msvc/-/ngrok-win32-arm64-msvc-1.7.0.tgz",
+      "integrity": "sha512-u7qyWIJI2/YG1HTBnHwUR1+Z2tyGfAsUAItJK/+N1G0FeWJhIWQvSIFJHlaPy4oW1Dc8mSDBX9qvVsiQgLaRFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-win32-ia32-msvc": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-ia32-msvc/-/ngrok-win32-ia32-msvc-1.7.0.tgz",
+      "integrity": "sha512-/UdYUsLNv/Q8j9YJsyIfq/jLCoD8WP+NidouucTUzSoDtmOsXBBT3itLrmPiZTEdEgKiFYLuC1Zon8XQQvbVLA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ngrok/ngrok-win32-x64-msvc": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-x64-msvc/-/ngrok-win32-x64-msvc-1.7.0.tgz",
+      "integrity": "sha512-UFJg/duEWzZlLkEs61Gz6/5nYhGaKI62I8dvUGdBR3NCtIMagehnFaFxmnXZldyHmCM8U0aCIFNpWRaKcrQkoA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "license": "MIT",
@@ -1263,6 +1499,12 @@
         "win32"
       ]
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@swc/core": {
       "version": "1.15.10",
       "dev": true,
@@ -2074,7 +2316,6 @@
     },
     "node_modules/debug": {
       "version": "4.4.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2128,6 +2369,28 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
+      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.4",
       "license": "MIT",
@@ -2793,6 +3056,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "license": "MIT",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "license": "MIT",
@@ -2872,6 +3145,27 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lib0": {
+      "version": "0.2.117",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
+      "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==",
+      "license": "MIT",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "license": "MPL-2.0",
@@ -3229,7 +3523,6 @@
     },
     "node_modules/ms": {
       "version": "2.1.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/murmurhash-js": {
@@ -3271,6 +3564,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ogl": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
+      "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
+      "license": "Unlicense"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "dev": true,
@@ -3441,6 +3740,12 @@
         "npm": ">=8.2.3"
       }
     },
+    "node_modules/quill-cursors": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/quill-cursors/-/quill-cursors-4.0.4.tgz",
+      "integrity": "sha512-beHOYwRZ/I+Ift3bsvMnNWZ7gX25upW3b0aREpklUTR273MFJgxsCYmlgd/6otBE0FtFefOfh2/xU6xbkkxgIg==",
+      "license": "MIT"
+    },
     "node_modules/quill-delta": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
@@ -3687,6 +3992,34 @@
         "slate": ">=0.65.3"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
+      "integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "license": "BSD-3-Clause",
@@ -3900,11 +4233,96 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/y-protocols": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.7.tgz",
+      "integrity": "sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.85"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
+    "node_modules/y-quill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/y-quill/-/y-quill-1.0.0.tgz",
+      "integrity": "sha512-WpYBXsFXdofGuaAVyvKpZ3rg+TklWtKtpemUziY044NLhnwud0D+QTX2mdGKMrLON+BshKQeT77FbXa68ZJbcA==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.93",
+        "y-protocols": "^1.0.6"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "quill": "^2.0.0",
+        "quill-cursors": "^4.0.2",
+        "yjs": "^13.6.14"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yjs": {
+      "version": "13.6.29",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.29.tgz",
+      "integrity": "sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "dev": true,
diff --git a/frontend/package.json b/frontend/package.json
index 6e24551..833207a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,13 +14,16 @@
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.3.0",
     "@coreui/react": "^5.9.2",
+    "@ngrok/ngrok": "^1.7.0",
     "@react-oauth/google": "^0.13.4",
     "@tailwindcss/vite": "^4.1.18",
     "axios": "^1.13.2",
     "classnames": "^2.5.1",
     "is-hotkey": "^0.2.0",
     "lodash": "^4.17.23",
+    "ogl": "^1.0.11",
     "quill": "^2.0.3",
+    "quill-cursors": "^4.0.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-grid-layout": "^2.2.2",
@@ -28,7 +31,11 @@
     "react-router-dom": "^7.12.0",
     "react-secure-storage": "^1.3.2",
     "slate-history": "^0.113.1",
+    "socket.io-client": "^4.8.3",
     "uuid": "^13.0.0",
+    "y-protocols": "^1.0.7",
+    "y-quill": "^1.0.0",
+    "yjs": "^13.6.29",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/frontend/public/_redirects b/frontend/public/_redirects
new file mode 100644
index 0000000..7797f7c
--- /dev/null
+++ b/frontend/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/frontend/public/images/Logo.png b/frontend/public/images/Logo.png
index aa75eae..b07a4f0 100644
Binary files a/frontend/public/images/Logo.png and b/frontend/public/images/Logo.png differ
diff --git a/frontend/public/images/img.png b/frontend/public/images/img.png
deleted file mode 100644
index 91cfd12..0000000
Binary files a/frontend/public/images/img.png and /dev/null differ
diff --git a/frontend/public/render.json b/frontend/public/render.json
new file mode 100644
index 0000000..70bff2f
--- /dev/null
+++ b/frontend/public/render.json
@@ -0,0 +1,8 @@
+{
+    "rewrites": [
+        {
+            "source": "/(.*)",
+            "destination": "/index.html"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/frontend/render.json b/frontend/render.json
new file mode 100644
index 0000000..0d199b2
--- /dev/null
+++ b/frontend/render.json
@@ -0,0 +1,5 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}
diff --git a/frontend/src/api/axios.jsx b/frontend/src/api/axios.jsx
index f66a742..f710bc0 100644
--- a/frontend/src/api/axios.jsx
+++ b/frontend/src/api/axios.jsx
@@ -1,20 +1,20 @@
 import axios from "axios";
 import secureLocalStorage from "react-secure-storage";
 
+const baseURL = import.meta.env.VITE_BACKEND_URL || "http://192.168.29.93:5005";
+console.log("Axios initialized with baseURL:", baseURL);
+
 const api = axios.create({
-  baseURL: import.meta.env.VITE_BACKEND_URL,
-  withCredentials:true
-}); 
+  baseURL,
+  withCredentials: true
+});
 
 // Request Interceptor: Attach Access Token
 api.interceptors.request.use(
   (config) => {
     const token = secureLocalStorage.getItem("accessToken");
     if (token) {
-      console.log("Axios Interceptor: Attaching Access Token:", token.substring(0, 10) + "...");
       config.headers.Authorization = `Bearer ${token}`;
-    } else {
-      console.log("Axios Interceptor: No Access Token found in storage.");
     }
     return config;
   },
@@ -44,7 +44,7 @@ api.interceptors.response.use(
         console.log("Axios Interceptor: Sending Refresh Request...");
         const res = await axios.post(`${import.meta.env.VITE_BACKEND_URL}/api/auth/refresh`, {
           refreshToken,
-        });
+        }, { withCredentials: true });
 
         console.log("Axios Interceptor: Refresh Successful. New Access Token received.");
         const { accessToken } = res.data;
diff --git a/frontend/src/collaboration/awareness.js b/frontend/src/collaboration/awareness.js
new file mode 100644
index 0000000..5d6a1b4
--- /dev/null
+++ b/frontend/src/collaboration/awareness.js
@@ -0,0 +1,34 @@
+import { Awareness } from 'y-protocols/awareness';
+import { getYDoc } from './ydoc';
+
+let awareness = null;
+
+export const initAwareness = () => {
+  const ydoc = getYDoc();
+  if (!ydoc) throw new Error('YDoc not initialized');
+
+  if (awareness) return awareness;
+
+  awareness = new Awareness(ydoc);
+
+  awareness.setLocalState({
+    user: {
+      id: `user-${Math.random().toString(36).slice(2)}`,
+      name: 'User',
+      color: `hsl(${Math.random() * 360},70%,50%)`,
+    },
+    cursor: null,
+  });
+
+  return awareness;
+};
+
+export const getAwareness = () => awareness;
+
+export const updateLocalState = (updates) => {
+  if (!awareness) return;
+  awareness.setLocalState({
+    ...awareness.getLocalState(),
+    ...updates,
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/collaboration/provider.js b/frontend/src/collaboration/provider.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/collaboration/socket.js b/frontend/src/collaboration/socket.js
new file mode 100644
index 0000000..a3566fc
--- /dev/null
+++ b/frontend/src/collaboration/socket.js
@@ -0,0 +1,34 @@
+import io from 'socket.io-client';
+
+let socket = null;
+
+// Use explicit port 5001 or environment variable
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || "http://192.168.29.93:5005";
+
+export const initSocket = (docId) => {
+  if (socket) return socket;
+
+  socket = io(BACKEND_URL, {
+    transports: ['websocket'],
+    query: { docId }
+  });
+
+  socket.on("connect", () => {
+    console.log("Socket connected:", socket.id);
+  });
+
+  socket.on("connect_error", (err) => {
+    console.error("Socket connection error:", err);
+  });
+
+  return socket;
+};
+
+export const getSocket = () => socket;
+
+export const disconnectSocket = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
+};
diff --git a/frontend/src/collaboration/useVideoCall.js b/frontend/src/collaboration/useVideoCall.js
new file mode 100644
index 0000000..b6e744e
--- /dev/null
+++ b/frontend/src/collaboration/useVideoCall.js
@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } from "react";
+
+const ICE = {
+  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+};
+
+export const useVideoCall = (socket, blogId) => {
+  const localVideo = useRef(null);
+  const localStreamRef = useRef(null);
+  const peers = useRef({});
+
+  const [remoteStreams, setRemoteStreams] = useState([]);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isCameraOff, setIsCameraOff] = useState(false);
+
+  
+
+  const toggleMute = () => {
+    localStreamRef.current?.getAudioTracks().forEach(track => {
+      track.enabled = !track.enabled;
+      setIsMuted(!track.enabled);
+    });
+  };
+
+  const toggleCamera = () => {
+    localStreamRef.current?.getVideoTracks().forEach(track => {
+      track.enabled = !track.enabled;
+      setIsCameraOff(!track.enabled);
+    });
+  };
+
+  const endCall = () => {
+    socket.emit("call:leave", blogId);
+
+    Object.values(peers.current).forEach(pc => pc.close());
+    peers.current = {};
+
+    localStreamRef.current?.getTracks().forEach(t => t.stop());
+    setRemoteStreams([]);
+  };
+
+ 
+
+  useEffect(() => {
+    if (!socket) return;
+
+    let mounted = true;
+
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: true })
+      .then(stream => {
+        if (!mounted) return;
+
+        localStreamRef.current = stream;
+        localVideo.current.srcObject = stream;
+
+        socket.emit("call:join", blogId);
+
+        socket.on("call:user-joined", async ({ socketId }) => {
+          const pc = new RTCPeerConnection(ICE);
+          peers.current[socketId] = pc;
+
+          stream.getTracks().forEach(t => pc.addTrack(t, stream));
+
+          pc.ontrack = e => {
+            setRemoteStreams(prev => [...prev, e.streams[0]]);
+          };
+
+          pc.onicecandidate = e => {
+            if (e.candidate) {
+              socket.emit("call:signal", {
+                blogId,
+                to: socketId,
+                signal: { candidate: e.candidate },
+              });
+            }
+          };
+
+          const offer = await pc.createOffer();
+          await pc.setLocalDescription(offer);
+
+          socket.emit("call:signal", {
+            blogId,
+            to: socketId,
+            signal: { sdp: offer },
+          });
+        });
+
+        socket.on("call:signal", async ({ from, signal }) => {
+          let pc = peers.current[from];
+
+          if (!pc) {
+            pc = new RTCPeerConnection(ICE);
+            peers.current[from] = pc;
+
+            stream.getTracks().forEach(t => pc.addTrack(t, stream));
+
+            pc.ontrack = e => {
+              setRemoteStreams(prev => [...prev, e.streams[0]]);
+            };
+
+            pc.onicecandidate = e => {
+              if (e.candidate) {
+                socket.emit("call:signal", {
+                  blogId,
+                  to: from,
+                  signal: { candidate: e.candidate },
+                });
+              }
+            };
+          }
+
+          if (signal.sdp) {
+            await pc.setRemoteDescription(signal.sdp);
+
+            if (signal.sdp.type === "offer") {
+              const answer = await pc.createAnswer();
+              await pc.setLocalDescription(answer);
+
+              socket.emit("call:signal", {
+                blogId,
+                to: from,
+                signal: { sdp: answer },
+              });
+            }
+          }
+
+          if (signal.candidate) {
+            await pc.addIceCandidate(signal.candidate);
+          }
+        });
+      });
+
+    return () => {
+      mounted = false;
+      endCall();
+      socket.off("call:user-joined");
+      socket.off("call:signal");
+    };
+  }, [socket, blogId]);
+
+  return {
+    localVideo,
+    remoteStreams,
+    toggleMute,
+    toggleCamera,
+    endCall,
+    isMuted,
+    isCameraOff,
+  };
+};
diff --git a/frontend/src/collaboration/ydoc.js b/frontend/src/collaboration/ydoc.js
new file mode 100644
index 0000000..1d65e91
--- /dev/null
+++ b/frontend/src/collaboration/ydoc.js
@@ -0,0 +1,19 @@
+import * as Y from 'yjs';
+
+let ydoc = null;
+
+export const initYDoc = () => {
+  if (!ydoc) ydoc = new Y.Doc();
+  return ydoc;
+};
+
+export const getYDoc = () => ydoc;
+
+export const getSharedText = () => {
+  if (!ydoc) throw new Error('YDoc missing');
+  return ydoc.getText('content');
+};
+
+export const applyUpdate = (update, origin) => {
+  Y.applyUpdate(ydoc, update, origin);
+};
\ No newline at end of file
diff --git a/frontend/src/components/GridEditor/GridEditor.jsx b/frontend/src/components/GridEditor/GridEditor.jsx
index 3de1822..7e2f469 100644
--- a/frontend/src/components/GridEditor/GridEditor.jsx
+++ b/frontend/src/components/GridEditor/GridEditor.jsx
@@ -41,7 +41,7 @@ const useContainerWidth = () => {
 };
 
 
-const GridEditor = ({ widgets, setWidgets, readOnly = false }) => {
+const GridEditor = ({ widgets, setWidgets, readOnly = false, ydoc, awareness }) => {
     const { width, ref: containerRef } = useContainerWidth();
 
     const onLayoutStop = (layout) => {
@@ -113,13 +113,13 @@ const GridEditor = ({ widgets, setWidgets, readOnly = false }) => {
                             minW: 2,
                             minH: 2
                         }}
-                        className="relative group border border-transparent hover:border-slate-200 dark:hover:border-slate-700 rounded-lg transition-colors flex flex-col"
+                        className="relative group border border-transparent hover:border-slate-200 dark:hover:border-gray-500 rounded-lg transition-colors flex flex-col"
                     >
 
                         {!readOnly && (
                             <div className="absolute top-0 left-0 w-full h-6 z-50 opacity-0 group-hover:opacity-100 transition-opacity flex justify-between items-start px-1 pt-1 pointer-events-none">
                                 {/* DRAG HANDLE */}
-                                <div className="grid-drag-handle cursor-grab active:cursor-grabbing bg-slate-100 dark:bg-slate-600 text-slate-400 dark:text-slate-200 rounded px-2 shadow-sm pointer-events-auto hover:bg-slate-200 dark:hover:bg-slate-500">
+                                <div className="grid-drag-handle cursor-grab active:cursor-grabbing bg-gray-200 dark:bg-gray-400 text-gray-600 dark:text-gray-800 rounded px-2 shadow-sm pointer-events-auto hover:bg-gray-300 dark:hover:bg-gray-500">
                                     <span className="material-icons-outlined text-sm">drag_indicator</span>
                                 </div>
                                 {/* DELETE BUTTON */}
@@ -129,7 +129,7 @@ const GridEditor = ({ widgets, setWidgets, readOnly = false }) => {
                                         e.stopPropagation();
                                         removeWidget(widget.id);
                                     }}
-                                    className="p-0.5 bg-white text-red-500 rounded shadow-md hover:bg-red-50 dark:bg-slate-700 pointer-events-auto"
+                                    className="p-0.5 bg-white text-red-500 rounded shadow-md hover:bg-red-50 dark:bg-gray-400 pointer-events-auto"
                                     title="Remove Item"
                                 >
                                     <span className="material-icons-outlined text-sm">close</span>
@@ -145,8 +145,9 @@ const GridEditor = ({ widgets, setWidgets, readOnly = false }) => {
                                     content={widget.content}
                                     onChange={handleContentChange}
                                     readOnly={readOnly}
-                                />
-                            )}
+                                    ydoc={ydoc}
+                                    awareness={awareness}
+                                />)}
                             {widget.type === 'image' && (
                                 <ImageWidget url={widget.content} readOnly={readOnly} />
                             )}
diff --git a/frontend/src/components/GridEditor/ImageWidget.jsx b/frontend/src/components/GridEditor/ImageWidget.jsx
index 74f97b2..830765f 100644
--- a/frontend/src/components/GridEditor/ImageWidget.jsx
+++ b/frontend/src/components/GridEditor/ImageWidget.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const ImageWidget = ({ url, readOnly }) => {
     return (
-        <div className="w-full h-full overflow-hidden rounded-lg shadow-sm border border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-[#1e293b] flex items-center justify-center">
+        <div className="w-full h-full overflow-hidden rounded-lg shadow-sm border border-slate-100 dark:border-gray-400 bg-slate-50 dark:bg-gray-300 flex items-center justify-center">
             <img
                 src={url}
                 alt="Post content"
diff --git a/frontend/src/components/GridEditor/TextWidget.jsx b/frontend/src/components/GridEditor/TextWidget.jsx
index 746bfaa..533c5a8 100644
--- a/frontend/src/components/GridEditor/TextWidget.jsx
+++ b/frontend/src/components/GridEditor/TextWidget.jsx
@@ -1,62 +1,100 @@
-import React from 'react';
-import ReactQuill from 'react-quill-new';
+import React, { useEffect, useRef } from 'react';
+import ReactQuill, { Quill } from 'react-quill-new';
 import 'quill/dist/quill.snow.css';
+import { QuillBinding } from 'y-quill';
+import QuillCursors from 'quill-cursors';
+
+
+Quill.register('modules/cursors', QuillCursors);
 
 // Custom toolbar options
 const modules = {
     toolbar: [
         [{ 'header': [1, 2, 3, false] }],
-        [{ 'align': [] }], 
+        [{ 'align': [] }],
         ['bold', 'italic', 'underline', 'strike', 'blockquote'],
         [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
-        ['link', 'clean'] 
+        ['link', 'clean']
     ],
+    cursors: true
 };
 
 const formats = [
-    'header', 'align', 
+    'header', 'align',
     'bold', 'italic', 'underline', 'strike', 'blockquote',
-    'list', 'bullet', 'indent',
+    'list', 'indent',
     'link'
 ];
 
-const TextWidget = ({ id, content, onChange, readOnly = false }) => {
+const TextWidget = ({ id, content, onChange, readOnly = false, ydoc, awareness }) => {
     const safeContent = Array.isArray(content) ? '' : content;
+    const quillRef = useRef(null);
+
+    useEffect(() => {
+        if (!ydoc || !quillRef.current || !awareness) {
+            console.log(`TextWidget ${id}: Waiting for dependencies...`, { ydoc: !!ydoc, quillRef: !!quillRef.current, awareness: !!awareness });
+            return;
+        }
+
+        const quillInstance = quillRef.current.getEditor();
+        const ytext = ydoc.getText(id);
+
+        console.log(`✅ Binding Yjs to TextWidget ${id}...`);
+        console.log(`   - Y.Text initial content:`, ytext.toString());
+        console.log(`   - Quill initial content:`, quillInstance.getText());
+
+        // Bind Yjs to Quill with support for Awareness (cursors)
+        const binding = new QuillBinding(ytext, quillInstance, awareness);
+
+        // Add listener to track Y.Text changes
+        const ytextObserver = () => {
+            console.log(`📝 Y.Text changed for widget ${id}:`, ytext.toString());
+        };
+        ytext.observe(ytextObserver);
+
+        return () => {
+            console.log(`🔴 Destroying binding for TextWidget ${id}`);
+            ytext.unobserve(ytextObserver);
+            binding.destroy();
+        };
+    }, [ydoc, id, awareness]);
 
     return (
-        <div className="h-full w-full flex flex-col bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 overflow-hidden"
+        <div className="h-full w-full flex flex-col bg-white dark:bg-gray-300 text-slate-900 dark:text-gray-900 overflow-hidden"
             style={{ cursor: 'text' }}
-            onMouseDown={(e) => e.stopPropagation()} 
+            onMouseDown={(e) => e.stopPropagation()}
         >
             <ReactQuill
+                ref={quillRef}
                 theme="snow"
-                value={safeContent}
+                defaultValue={safeContent}
                 onChange={(val) => onChange(id, val)}
                 modules={readOnly ? { toolbar: false } : modules}
                 formats={formats}
                 readOnly={readOnly}
-                className="h-full flex flex-col dark:bg-slate-800 dark:text-slate-100"
+                className="h-full flex flex-col dark:bg-gray-300 dark:text-gray-900"
                 style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
             />
             {/* Override Quill internal styles locally for flex growth and THEMING */}
             <style>{`
-                .quill { display: flex; flexDirection: column; height: 100%; }
+                .quill { display: flex; flexDirection: column; height: 100%; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
+                .dark .quill { border-color: #6b7280; border-width: 1px; }
                 .ql-container { flex: 1; overflow-y: auto; font-family: inherit; font-size: inherit; background-color: transparent !important; }
                 .ql-editor { min-height: 100%; color: #0f172a; background-color: transparent !important; } /* Slate 900 */
                 
                 /* Toolbar Theming */
                 .ql-toolbar { border-width: 0 0 1px 0 !important; border-color: #e2e8f0 !important; }
-                .dark .ql-toolbar { border-color: #334155 !important; background: #1e293b !important; color: #f8fafc !important; }
-                .dark .ql-stroke { stroke: #cbd5e1 !important; }
-                .dark .ql-fill { fill: #cbd5e1 !important; }
-                .dark .ql-picker { color: #cbd5e1 !important; }
+                .dark .ql-toolbar { border-color: #6b7280 !important; background: #d1d5db !important; color: #1f2937 !important; border-width: 0 0 2px 0 !important; }
+                .dark .ql-stroke { stroke: #4b5563 !important; }
+                .dark .ql-fill { fill: #4b5563 !important; }
+                .dark .ql-picker { color: #4b5563 !important; }
                 
-                .dark .ql-picker-options { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
+                .dark .ql-picker-options { background-color: #d1d5db !important; color: #1f2937 !important; border-color: #6b7280 !important; }
                 
                 /* Editor Content Theming */
-                .dark .ql-editor { color: #f1f5f9 !important; background-color: transparent !important; } /* Slate 100 */
-                .dark .ql-editor p { color: #f1f5f9 !important; }
-                .dark .ql-editor.ql-blank::before { color: #64748b !important; font-style: italic; } /* Slate 500 */
+                .dark .ql-editor { color: #1f2937 !important; background-color: transparent !important; } /* Gray 900 */
+                .dark .ql-editor p { color: #1f2937 !important; }
+                .dark .ql-editor.ql-blank::before { color: #6b7280 !important; font-style: italic; } /* Gray 500 */
             `}</style>
         </div>
     );
diff --git a/frontend/src/components/GridEditor/VideoWidget.jsx b/frontend/src/components/GridEditor/VideoWidget.jsx
index 5358693..0e864eb 100644
--- a/frontend/src/components/GridEditor/VideoWidget.jsx
+++ b/frontend/src/components/GridEditor/VideoWidget.jsx
@@ -10,7 +10,7 @@ const VideoWidget = ({ url }) => {
     }
 
     return (
-        <div className="w-full h-full overflow-hidden rounded-lg shadow-sm bg-black relative">
+        <div className="w-full h-full overflow-hidden rounded-lg shadow-sm bg-gray-300 dark:bg-gray-300 relative">
             {/* Overlay to allow dragging over the iframe without getting captured by the iframe */}
             <div className="absolute inset-0 z-10 hover:bg-black/10 transition-colors cursor-move"></div>
             <iframe
diff --git a/frontend/src/components/GridEditor/withCollaboration.jsx b/frontend/src/components/GridEditor/withCollaboration.jsx
new file mode 100644
index 0000000..de63d24
--- /dev/null
+++ b/frontend/src/components/GridEditor/withCollaboration.jsx
@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import { QuillBinding } from 'y-quill';
+import { initYDoc, getSharedText, applyUpdate } from '../../collaboration/ydoc';
+import { initAwareness } from '../../collaboration/awareness';
+import { initSocket, emitUpdate, onUpdate } from '../../collaboration/socket';
+
+const withCollaboration = (Editor) => {
+  return (props) => {
+    const { docId = 'default-doc', quillRef, serverUrl = 'http://localhost:3001' } = props;
+
+    useEffect(() => {
+      if (!docId) return;
+
+      try {
+        initYDoc(docId);
+        const awareness = initAwareness();
+
+        const socket = initSocket(serverUrl, docId);
+        socket.emit("doc:join", docId); 
+
+        socket.on("doc:users", (users) => {
+          // store in state / context / redux
+          console.log("Active collaborators:", users);
+          // setCollaborators(users);
+        });
+
+        // Yjs document updates (you already had this)
+        onUpdate(docId, (update, clientId) => {
+          applyUpdate(update, `remote-${clientId}`);
+        });
+
+        const ydoc = getSharedText().doc;
+
+        ydoc.on("update", (update, origin) => {
+          if (!origin?.startsWith("remote")) {
+            socket.emit("doc:update", {
+              blogId: docId,
+              update: Array.from(update),
+            });
+          }
+        });
+
+        // AWARENESS SYNC (ADD THIS)
+
+        // Send local awareness changes to server
+        awareness.on("update", () => {
+          socket.emit("doc:awareness", {
+            blogId: docId,
+            awareness: awareness.getStates(),
+          });
+        });
+
+        // Receive awareness from others
+        socket.on("doc:awareness", (states) => {
+          awareness.setStates(states);
+        });
+
+      } catch (err) {
+        console.error("Collaboration setup failed:", err);
+      }
+    }, [docId, serverUrl]);
+
+
+
+    useEffect(() => {
+      if (quillRef?.current) {
+        try {
+          new QuillBinding(getSharedText(), quillRef.current);
+        } catch (err) {
+          console.warn('Quill binding failed:', err);
+        }
+      }
+    }, [quillRef]);
+
+    return <Editor {...props} />;
+  };
+};
+
+export default withCollaboration;
\ No newline at end of file
diff --git a/frontend/src/components/IncomingCallModal.jsx b/frontend/src/components/IncomingCallModal.jsx
new file mode 100644
index 0000000..bda93b7
--- /dev/null
+++ b/frontend/src/components/IncomingCallModal.jsx
@@ -0,0 +1,33 @@
+const IncomingCallModal = ({ caller, onAccept, onDecline }) => {
+  if (!caller) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-80 text-center">
+        <h3 className="font-bold text-lg mb-2">
+          📞 Incoming Call
+        </h3>
+        <p className="text-sm mb-4">
+          {caller.user?.name || "Someone"} is calling you
+        </p>
+
+        <div className="flex gap-4 justify-center">
+          <button
+            onClick={onDecline}
+            className="px-4 py-2 bg-red-500 text-white rounded"
+          >
+            Decline
+          </button>
+          <button
+            onClick={onAccept}
+            className="px-4 py-2 bg-green-600 text-white rounded"
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IncomingCallModal;
diff --git a/frontend/src/components/Orb/Orb.css b/frontend/src/components/Orb/Orb.css
new file mode 100644
index 0000000..a3318e6
--- /dev/null
+++ b/frontend/src/components/Orb/Orb.css
@@ -0,0 +1,6 @@
+.orb-container {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/frontend/src/components/Orb/Orb.jsx b/frontend/src/components/Orb/Orb.jsx
new file mode 100644
index 0000000..008970a
--- /dev/null
+++ b/frontend/src/components/Orb/Orb.jsx
@@ -0,0 +1,344 @@
+import { Mesh, Program, Renderer, Triangle, Vec3 } from 'ogl';
+import { useEffect, useRef } from 'react';
+import './Orb.css';
+
+export default function Orb({
+  hue = 0,
+  hoverIntensity = 0.2,
+  rotateOnHover = true,
+  forceHoverState = false,
+  backgroundColor = '#000000'
+}) {
+  const ctnDom = useRef(null);
+
+  const vert = /* glsl */ `
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `;
+
+  const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    uniform vec3 backgroundColor;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+
+      float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float innerFade = smoothstep(r0 * 0.8, r0 * 0.95, len);
+      v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 colBase = mix(color1, color2, cl);
+      float fadeAmount = mix(1.0, 0.1, bgLuminance);
+      
+      vec3 darkCol = mix(color3, colBase, v0);
+      darkCol = (darkCol + v1) * v2 * v3;
+      darkCol = clamp(darkCol, 0.0, 1.0);
+      
+      vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);
+      lightCol = mix(backgroundColor, lightCol, v0);
+      lightCol = clamp(lightCol, 0.0, 1.0);
+      
+      vec3 finalCol = mix(darkCol, lightCol, bgLuminance);
+      
+      return extractAlpha(finalCol);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+
+  useEffect(() => {
+    const container = ctnDom.current;
+    if (!container) return;
+
+    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    container.appendChild(gl.canvas);
+
+    const geometry = new Triangle(gl);
+    const program = new Program(gl, {
+      vertex: vert,
+      fragment: frag,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: {
+          value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
+        },
+        hue: { value: hue },
+        hover: { value: 0 },
+        rot: { value: 0 },
+        hoverIntensity: { value: hoverIntensity },
+        backgroundColor: { value: hexToVec3(backgroundColor) }
+      }
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+
+    function resize() {
+      if (!container) return;
+      const dpr = window.devicePixelRatio || 1;
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width * dpr, height * dpr);
+      gl.canvas.style.width = width + 'px';
+      gl.canvas.style.height = height + 'px';
+      program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    let targetHover = 0;
+    let lastTime = 0;
+    let currentRot = 0;
+    const rotationSpeed = 0.3;
+
+    
+    const handleMouseMove = e => {
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const width = rect.width;
+      const height = rect.height;
+      const size = Math.min(width, height);
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const uvX = ((x - centerX) / size) * 2.0;
+      const uvY = ((y - centerY) / size) * 2.0;
+
+      if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+        targetHover = 1;
+      } else {
+        targetHover = 0;
+      }
+    };
+
+    const handleMouseLeave = () => {
+      targetHover = 0;
+    };
+
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+
+    let rafId;
+    const update = t => {
+      rafId = requestAnimationFrame(update);
+      const dt = (t - lastTime) * 0.001;
+      lastTime = t;
+      program.uniforms.iTime.value = t * 0.001;
+      program.uniforms.hue.value = hue;
+      program.uniforms.hoverIntensity.value = hoverIntensity;
+      program.uniforms.backgroundColor.value = hexToVec3(backgroundColor);
+
+      const effectiveHover = forceHoverState ? 1 : targetHover;
+      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+
+      if (rotateOnHover && effectiveHover > 0.5) {
+        currentRot += dt * rotationSpeed;
+      }
+      program.uniforms.rot.value = currentRot;
+
+      renderer.render({ scene: mesh });
+    };
+    rafId = requestAnimationFrame(update);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', resize);
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+      if (container.contains(gl.canvas)) {
+        container.removeChild(gl.canvas);
+      }
+      gl.getExtension('WEBGL_lose_context')?.loseContext();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
+
+  return <div ref={ctnDom} className="orb-container" />;
+}
+
+function hslToRgb(h, s, l) {
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  return new Vec3(r, g, b);
+}
+
+function hexToVec3(color) {
+  if (color.startsWith('#')) {
+    const r = parseInt(color.slice(1, 3), 16) / 255;
+    const g = parseInt(color.slice(3, 5), 16) / 255;
+    const b = parseInt(color.slice(5, 7), 16) / 255;
+    return new Vec3(r, g, b);
+  }
+
+  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgbMatch) {
+    return new Vec3(parseInt(rgbMatch[1]) / 255, parseInt(rgbMatch[2]) / 255, parseInt(rgbMatch[3]) / 255);
+  }
+
+  const hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);
+  if (hslMatch) {
+    const h = parseInt(hslMatch[1]) / 360;
+    const s = parseInt(hslMatch[2]) / 100;
+    const l = parseInt(hslMatch[3]) / 100;
+    return hslToRgb(h, s, l);
+  }
+
+  return new Vec3(0, 0, 0);
+}
diff --git a/frontend/src/components/OutgoingCallModal.jsx b/frontend/src/components/OutgoingCallModal.jsx
new file mode 100644
index 0000000..76eb69e
--- /dev/null
+++ b/frontend/src/components/OutgoingCallModal.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const OutgoingCallModal = ({ callee, onCancel }) => {
+    if (!callee) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 animate-in fade-in duration-300">
+            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 w-80 text-center shadow-2xl border border-slate-200 dark:border-gray-700">
+                <div className="mb-6 relative">
+                    <div className="w-20 h-20 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
+                        <span className="material-icons-outlined text-blue-600 dark:text-blue-400 text-3xl">call</span>
+                    </div>
+                    <div className="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-20 border-4 border-blue-500/20 rounded-full animate-ping"></div>
+                </div>
+
+                <h3 className="font-['Outfit',_sans-serif] font-bold text-xl mb-2 text-slate-900 dark:text-gray-100">
+                    Calling...
+                </h3>
+                <p className="text-slate-600 dark:text-gray-400 text-sm mb-8">
+                    Waiting for <span className="font-semibold text-blue-600 dark:text-blue-400">{callee.name || "Collaborator"}</span> to answer
+                </p>
+
+                <button
+                    onClick={onCancel}
+                    className="w-full py-3 bg-red-500 hover:bg-red-600 active:scale-95 text-white rounded-xl font-bold text-sm uppercase tracking-widest transition-all shadow-lg shadow-red-500/30 flex items-center justify-center gap-2"
+                >
+                    <span className="material-icons-outlined text-lg">call_end</span>
+                    Cancel Call
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default OutgoingCallModal;
diff --git a/frontend/src/components/ShareModal.jsx b/frontend/src/components/ShareModal.jsx
new file mode 100644
index 0000000..c879efc
--- /dev/null
+++ b/frontend/src/components/ShareModal.jsx
@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import api from '../api/axios';
+
+const ShareModal = ({ open, onClose, docId, onlineUsers = [], currentSocketId, onKick }) => {
+  const [copied, setCopied] = useState(false);
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState('view');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState({ text: '', type: '' });
+  const [collaborators, setCollaborators] = useState([]);
+  const [blogData, setBlogData] = useState(null);
+  const [showRoleStyles, setShowRoleStyles] = useState(false);
+
+  const currentUser = React.useMemo(() => JSON.parse(localStorage.getItem('user')), []);
+  const forceRound = { borderRadius: '9999px' };
+
+  const isAuthor = React.useMemo(() => {
+    return currentUser && blogData && (blogData.author === currentUser._id || blogData.author?._id === currentUser._id);
+  }, [currentUser, blogData]);
+
+  const fetchBlogDetails = React.useCallback(async () => {
+    try {
+      const res = await api.get(`/api/blog/${docId}`);
+      if (res.data?.blog) {
+        const blog = res.data.blog;
+        setBlogData(blog);
+        setCollaborators(blog.collaborators || []);
+      }
+    } catch (err) {
+      console.error("Error fetching collaborators:", err);
+    }
+  }, [docId]);
+
+  React.useEffect(() => {
+    if (open) fetchBlogDetails();
+  }, [open, fetchBlogDetails]);
+
+  const handleInvite = async (e) => {
+    e.preventDefault();
+    if (!email) return;
+    setLoading(true);
+    setMessage({ text: '', type: '' });
+    try {
+      await api.post(`/api/blog/share-post/${docId}`, { email, role });
+      setMessage({ text: 'Invitation sent!', type: 'success' });
+      setEmail('');
+      fetchBlogDetails(); 
+    } catch (error) {
+      setMessage({ text: error.response?.data?.message || 'Failed to send invitation', type: 'error' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemove = async (targetEmail) => {
+    try {
+      await api.post(`/api/blog/remove-collaborator/${docId}`, { email: targetEmail });
+      fetchBlogDetails(); 
+    } catch (error) {
+      alert("Failed to remove collaborator");
+    }
+  };
+
+  const shareLink = `${window.location.origin}/create/${docId}`;
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(shareLink);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 bg-slate-900/40 dark:bg-black/80 flex items-center justify-center z-[100] p-4 backdrop-blur-md animate-in fade-in duration-300">
+      <div className="relative overflow-hidden bg-white/70 dark:bg-[#0F0F0F]/80 border border-white/20 dark:border-white/10 p-5 sm:p-8 rounded-[32px] shadow-2xl w-full max-w-[95%] sm:max-w-md transform transition-all backdrop-blur-xl">
+        
+        {/* Decorative Glows */}
+        <div className="absolute -top-24 -right-24 w-48 h-48 bg-blue-500/20 blur-[80px] pointer-events-none" />
+        <div className="absolute -bottom-24 -left-24 w-48 h-48 bg-red-500/10 blur-[80px] pointer-events-none" />
+
+        <div className="relative z-10">
+          {/* Header */}
+          
+
+          {/* Invite Form */}
+          <form onSubmit={handleInvite} className="mb-6 space-y-3">
+            <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 block px-1">Invite People</label>
+            <div className="flex flex-row items-center gap-2 w-full">
+              <input
+                type="email"
+                placeholder="Email address"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                style={forceRound}
+                className="!rounded-full flex-[2] min-w-0 bg-white/40 dark:bg-white/5 border border-slate-200 dark:border-white/10 px-4 py-2 text-xs text-slate-900 dark:text-white outline-none focus:border-blue-500/50 transition-all backdrop-blur-sm"
+              />
+              <div className="relative flex-1 min-w-[90px]">
+                <button
+                  type="button"
+                  onClick={() => setShowRoleStyles(!showRoleStyles)}
+                  style={forceRound}
+                  className="!rounded-full w-full flex items-center justify-between bg-blue-600/10 border border-blue-500/30 text-blue-600 dark:text-blue-400 px-3 py-2 text-[10px] font-black uppercase tracking-widest outline-none backdrop-blur-md active:scale-95 transition-all"
+                >
+                  <span>{role}</span>
+                  <span className={`material-icons-outlined text-xs transition-transform ${showRoleStyles ? 'rotate-180' : ''}`}>expand_more</span>
+                </button>
+                {showRoleStyles && (
+                  <div className="absolute top-full left-0 right-0 mt-2 z-[110] overflow-hidden bg-white/90 dark:bg-[#1A1A1A]/90 border border-white/20 dark:border-white/10 rounded-2xl backdrop-blur-xl shadow-xl animate-in zoom-in-95">
+                    {['viewer', 'editor'].map((opt) => (
+                      <div key={opt} onClick={() => {setRole(opt); setShowRoleStyles(false);}} className="px-4 py-2 text-[10px] font-black uppercase tracking-tight text-slate-700 dark:text-slate-300 hover:bg-blue-500/10 hover:text-blue-600 cursor-pointer transition-colors">{opt}</div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+            <button type="submit" disabled={loading || !email} style={forceRound} className={`!rounded-full w-full py-2 text-[10px] uppercase tracking-[0.2em] font-black transition-all border ${loading ? 'bg-slate-200/20 text-slate-400' : 'bg-blue-600/10 border-blue-500/30 text-blue-600 dark:text-blue-400 hover:bg-blue-600/20 active:scale-95'}`}>
+              {loading ? 'Sending...' : 'Send Invitation'}
+            </button>
+            {message.text && <p className={`text-[10px] font-bold text-center uppercase tracking-wider ${message.type === 'success' ? 'text-green-500' : 'text-red-500'}`}>{message.text}</p>}
+          </form>
+
+          {/* PEOPLE WITH ACCESS */}
+          <div className="mb-6">
+            <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block px-1">
+              People with access
+            </label>
+            <div className="space-y-4 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
+              
+              {/* Author / Owner */}
+              {blogData && (
+                <div className="flex items-center justify-between group">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-600/20 border border-blue-500/30 flex items-center justify-center text-[10px] font-black text-blue-600 dark:text-blue-400" style={forceRound}>
+                      {blogData.author?.email?.[0].toUpperCase() || 'A'}
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-xs font-bold text-slate-900 dark:text-white truncate max-w-[150px]">Owner</p>
+                      <p className="text-[9px] text-slate-500 uppercase font-bold tracking-tighter">Document Creator</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Persistent Collaborators */}
+              {collaborators.map((c, i) => (
+                <div key={`collab-${i}`} className="flex items-center justify-between group">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 flex items-center justify-center text-[10px] font-black text-slate-600 dark:text-slate-400" style={forceRound}>
+                      {c.email[0].toUpperCase()}
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-xs font-bold text-slate-900 dark:text-white truncate max-w-[150px]">{c.email}</p>
+                      <p className="text-[9px] text-slate-500 uppercase font-bold tracking-tighter">{c.role}</p>
+                    </div>
+                  </div>
+                  {isAuthor && (
+                    <button onClick={() => handleRemove(c.email)} style={forceRound} className="w-7 h-7 flex items-center justify-center bg-red-500/10 text-red-500 border border-red-500/20 active:scale-90 transition-all">
+                      <span className="material-icons-outlined text-xs">close</span>
+                    </button>
+                  )}
+                </div>
+              ))}
+
+              {/* Online Visitors */}
+              {onlineUsers.reduce((unique, u) => {
+                  const isMe = u.socketId === currentSocketId;
+                  const alreadyAdded = unique.some(item => item.name === u.name);
+                  const isPersistent = collaborators.some(c => c.email === u.name || c.email === u.email);
+                  if (!isMe && !alreadyAdded && !isPersistent) unique.push(u);
+                  return unique;
+                }, []).map((u, i) => (
+                <div key={`online-${i}`} className="flex items-center justify-between group">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-green-500/10 border border-green-500/20 flex items-center justify-center text-[10px] font-black text-green-600" style={forceRound}>
+                      {u.name[0].toUpperCase()}
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-xs font-bold text-slate-900 dark:text-white truncate max-w-[150px]">{u.email || u.name}</p>
+                      <p className="text-[9px] text-green-500 uppercase font-bold tracking-tighter">Visitor</p>
+                    </div>
+                  </div>
+                  {isAuthor && (
+                    <button onClick={() => onKick && onKick(u.socketId)} style={forceRound} className="w-7 h-7 flex items-center justify-center bg-orange-500/10 text-orange-500 border border-orange-500/20 active:scale-90 transition-all">
+                      <span className="material-icons-outlined text-xs">close</span>
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="h-px bg-slate-200/50 dark:bg-white/10 mb-6" />
+
+          {/* Copy Link Section */}
+          <label className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 block px-1">General Access</label>
+          <div className="relative mb-6">
+            <input type="text" readOnly value={shareLink} style={forceRound} className="!rounded-full w-full bg-white/40 dark:bg-white/5 border border-slate-200 dark:border-white/10 px-6 py-2.5 text-[10px] font-mono text-slate-500 outline-none backdrop-blur-sm" />
+            <button 
+  onClick={handleCopyLink} 
+  style={forceRound} 
+  className={`!rounded-full absolute inset-y-1 right-1 px-4 text-[9px] font-black uppercase tracking-widest transition-all border shadow-lg ${
+    copied 
+      ? 'bg-green-600 border-green-400 text-white shadow-green-500/20' // Solid green on success
+      : 'bg-blue-600/40 dark:bg-blue-500/40 border-blue-500/30 text-blue-700 dark:text-blue-100 hover:bg-blue-600/60' // Reduced transparency (40% vs 10%)
+  }`}
+>
+  {copied ? 'Copied' : 'Copy'}
+</button>
+          </div>
+
+          <button onClick={onClose} style={forceRound} className="!rounded-full w-full py-2 text-[10px] uppercase tracking-[0.2em] font-black text-red-500 bg-red-500/5 border border-red-500/20 active:scale-95 transition-all">Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShareModal;
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 2250591..6553d98 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState, useEffect } from 'react';
 import {
   CSidebar,
   CSidebarBrand,
@@ -6,66 +6,149 @@ import {
   CSidebarNav,
   CNavItem,
   CNavTitle,
-} from '@coreui/react'
-
-import CIcon from '@coreui/icons-react'
-import { cilHome, cilPencil, cilAccountLogout, cilNotes } from '@coreui/icons'
-import { NavLink, useNavigate } from 'react-router-dom' 
-import api from '../api/axios'
-
-
+} from '@coreui/react';
 
+import CIcon from '@coreui/icons-react';
+import { cilHome, cilPencil, cilAccountLogout, cilNotes,cilPlus } from '@coreui/icons';
+import { NavLink, useNavigate } from 'react-router-dom';
+import api from '../api/axios';
 
 export const Sidebar = () => {
-  const [theme,setTheme] = useState(localStorage.getItem('theme'))
-    const navigate = useNavigate();
-    const handleLogout = async () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme'));
+  const navigate = useNavigate();
 
+  const handleLogout = async () => {
     try {
       await api.post("/api/auth/logout");
       navigate("/login", { replace: true });
     } catch (error) {
       console.error("Logout failed", error);
     }
-  }
+  };
 
+  const handleCreate = async () => {
+    try {
+      const res = await api.post('/api/blog/create-draft');
+      const newId = res.data.blog._id;
+      navigate(`/create/${newId}`);
+    } catch (error) {
+      console.error("Error creating draft:", error);
+    }
+  };
 
-  useEffect(()=>{
-    setTheme(localStorage.getItem('theme'))
-  },[localStorage.getItem('theme')])
+  useEffect(() => {
+    const checkTheme = () => setTheme(localStorage.getItem('theme'));
+    window.addEventListener('storage', checkTheme);
+    return () => window.removeEventListener('storage', checkTheme);
+  }, []);
 
   return (
-    <CSidebar className="border-end h-screen" unfoldable colorScheme={theme} size='sm'>
-      <CSidebarHeader className="border-bottom d-flex justify-content-center align-items-center bg-secondary">
-        <CSidebarBrand className="sidebar-brand d-flex align-items-center gap-2">
-  <CIcon icon={cilNotes} height={28} />
-  <span className="brand-text">Blogify</span>
-</CSidebarBrand>
-
+    <>
+      <style>{`
+        .dark .nav-link { color: #9ca3af !important; }
+        .dark .nav-link:hover { color: #d1d5db !important; }
+        .dark .nav-icon { color: #9ca3af !important; }
+        .dark .sidebar-brand { color: #9ca3af !important; }
+        .dark .brand-text { color: #9ca3af !important; }
+      `}</style>
 
-      </CSidebarHeader>
-      <CSidebarNav>
-        <CNavTitle>MENU</CNavTitle>
+      {/* --- DESKTOP SIDEBAR --- */}
+      <div className="hidden md:block">
+        <CSidebar 
+          className="border-end h-screen dark:bg-black dark:text-gray-400" 
+          unfoldable 
+          colorScheme={theme === 'dark' ? 'dark' : 'light'} 
+          size='sm'
+        >
+          <CSidebarHeader className="border-bottom d-flex justify-content-center align-items-center dark:bg-black dark:border-gray-700">
+            <CSidebarBrand className="sidebar-brand d-flex align-items-center gap-2 dark:text-gray-400">
+              <CIcon icon={cilNotes} height={28} />
+              <span className="brand-text">ogDoc</span>
+            </CSidebarBrand>
+          </CSidebarHeader>
+          
+          <CSidebarNav className="dark:bg-black">
+            <CNavTitle className="dark:text-gray-400">MENU</CNavTitle>
+            
+            <CNavItem>
+              <NavLink to="/home" className="nav-link dark:text-gray-400">
+                <CIcon customClassName="nav-icon dark:text-gray-400" icon={cilHome} /> Home
+              </NavLink>
+            </CNavItem>
 
-        <CNavItem>
-          <NavLink to="/home" className="nav-link">
-            <CIcon customClassName="nav-icon" icon={cilHome} /> Home
-          </NavLink>
-        </CNavItem>
+            <CNavItem>
+              <button 
+                onClick={handleCreate} 
+                className="nav-link dark:text-gray-400 w-full text-start bg-transparent border-0 flex items-center gap-2"
+              >
+                <CIcon customClassName="nav-icon dark:text-gray-400" icon={cilPencil} /> Compose
+              </button>
+            </CNavItem>
 
-        <CNavItem>
-          <NavLink to="/create" className="nav-link">
-            <CIcon customClassName="nav-icon" icon={cilPencil} /> Compose
-          </NavLink>
-        </CNavItem>
-        <CNavItem className="mt-auto">
-          <NavLink onClick={handleLogout} className="nav-link text-danger">
-            <CIcon customClassName="nav-icon text-danger" icon={cilAccountLogout} /> Logout
-          </NavLink>
-        </CNavItem>
+            <CNavItem className="mt-auto">
+              <NavLink onClick={handleLogout} className="nav-link text-danger">
+                <CIcon customClassName="nav-icon text-danger" icon={cilAccountLogout} /> Logout
+              </NavLink>
+            </CNavItem>
+          </CSidebarNav>
+        </CSidebar>
+      </div>
 
-      </CSidebarNav>
-    </CSidebar>
-  )
-}
+      {/* --- MOBILE BOTTOM BAR --- */}
+<div className="md:hidden fixed bottom-6 left-4 right-4 z-[100]">
+  <div className="flex justify-around items-center h-20 bg-white/90 dark:bg-zinc-900/95 backdrop-blur-2xl  shadow-2xl rounded-[2.5rem] px-2">
+    
+    {/* Home - No Label, Perfectly Centered */}
+   <NavLink 
+  to="/home" 
+  className="relative flex items-center justify-center flex-1 h-full"
+>
+  {({ isActive }) => (
+    <div className="flex items-center justify-center w-full h-full">
+      
+      <div className={`transition-colors duration-300 ${
+        isActive ? 'text-indigo-600' : 'text-slate-400 active:opacity-70'
+      }`}>
+        <CIcon 
+          icon={cilHome} 
+          className="w-10 h-10 stroke-[2px]" 
+        />
+      </div>
+      <div className={`absolute bottom-1 h-1 rounded-full transition-all duration-300 ${
+        isActive 
+          ? 'w-6 bg-indigo-600 opacity-100 shadow-[0_0_10px_rgba(79,70,229,0.4)]' 
+          : 'w-0 opacity-0'
+      }`} />
+      
+    </div>
+  )}
+</NavLink>
+    <div className="flex items-center justify-center flex-1 h-full">
+      <button 
+        onClick={handleCreate}
+        className="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-indigo-500 to-blue-700 !rounded-full shadow-lg shadow-blue-500/40 active:scale-75 transition-all"
+        style={{ borderRadius: '9999px' }}
+      >
+        <CIcon icon={cilPlus} className="w-8 h-8 text-white stroke-[4px]" />
+      </button>
+    </div>
 
+    {/* Exit - Vibrant Red, No Label, Perfectly Centered */}
+    <div className="flex items-center justify-center flex-1 h-full">
+      <button 
+        onClick={handleLogout} 
+        className="group flex items-center justify-center"
+      >
+        <div className="p-3.5 rounded-full text-white shadow-lg shadow-red-500/30 transition-all duration-300 group-active:scale-90 active:bg-red-600">
+          <CIcon 
+            icon={cilAccountLogout} 
+            className="w-6 h-6 stroke-[2px]" 
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
+    </>
+  );
+};
diff --git a/frontend/src/components/VideoCallPanel.jsx b/frontend/src/components/VideoCallPanel.jsx
new file mode 100644
index 0000000..6b67e1a
--- /dev/null
+++ b/frontend/src/components/VideoCallPanel.jsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from 'react';
+import useVideoCall from "../hooks/useVideoCall";
+
+const RemoteVideo = ({ stream, index }) => {
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+
+  return (
+    <div className="relative aspect-video bg-slate-950 rounded-xl overflow-hidden shadow-2xl border border-white/10 group">
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        className="w-full h-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent pointer-events-none" />
+      <div className="absolute bottom-1.5 left-2 px-1.5 py-0.5 bg-white/10 backdrop-blur-md rounded text-[9px] text-white font-semibold opacity-0 group-hover:opacity-100 transition-opacity">
+        User {index + 1}
+      </div>
+    </div>
+  );
+};
+
+const VideoCallPanel = ({ socket, blogId, onLeave }) => {
+  const {
+    localVideo,
+    remoteStreams,
+    toggleMute,
+    toggleCamera,
+    endCall,
+    isMuted,
+    isCameraOff,
+  } = useVideoCall(socket, blogId, onLeave);
+
+  return (
+    <div className="fixed top-24 right-6 w-80 flex flex-col gap-4 z-[100] animate-in slide-in-from-right duration-500">
+
+      {/* REMOTE VIDEOS - Grid layout for multiple users */}
+      {remoteStreams.length > 0 && (
+        <div className={`grid gap-2 ${remoteStreams.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}`}>
+          {remoteStreams.map((stream, i) => (
+            <RemoteVideo key={stream.id || i} stream={stream} index={i} />
+          ))}
+        </div>
+      )}
+
+      {/* LOCAL VIDEO FEED */}
+      <div className="relative aspect-video bg-slate-900 rounded-xl overflow-hidden shadow-2xl border border-white/10 group">
+        <video
+          ref={localVideo}
+          autoPlay
+          muted
+          playsInline
+          className={`w-full h-full object-cover transition-opacity duration-300 ${isCameraOff ? 'opacity-0' : 'opacity-100'}`}
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent pointer-events-none" />
+        {isCameraOff && (
+          <div className="absolute inset-0 flex items-center justify-center bg-slate-800">
+            <span className="material-icons-outlined text-white/10 text-3xl">videocam_off</span>
+          </div>
+        )}
+        <div className="absolute bottom-1.5 left-2 px-2 py-0.5 bg-white/10 backdrop-blur-md rounded text-[9px] text-white font-semibold flex items-center gap-1.5 shadow-sm">
+          <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+          You {isMuted && "• Muted"}
+        </div>
+      </div>
+
+      {/* COMPACT CONTROL BAR */}
+      <div className="flex items-center justify-between px-4 py-3 bg-slate-950/80 backdrop-blur-2xl rounded-xl border border-white/20 shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
+        <button
+          onClick={toggleMute}
+          className={`w-10 h-10 rounded-full flex items-center justify-center transition-all ${isMuted ? 'bg-red-500 text-white shadow-lg shadow-red-500/20' : 'bg-white/10 text-white hover:bg-white/20'
+            }`}
+        >
+          <span className="material-icons-outlined text-xl">{isMuted ? 'mic_off' : 'mic'}</span>
+        </button>
+
+        <button
+          onClick={toggleCamera}
+          className={`w-10 h-10 rounded-full flex items-center justify-center transition-all ${isCameraOff ? 'bg-red-500 text-white shadow-lg shadow-red-500/20' : 'bg-white/10 text-white hover:bg-white/20'
+            }`}
+        >
+          <span className="material-icons-outlined text-xl">{isCameraOff ? 'videocam_off' : 'videocam'}</span>
+        </button>
+
+        <div className="w-px h-6 bg-white/10" />
+
+        <button
+          onClick={endCall}
+          className="w-10 h-10 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-700 hover:scale-105 active:scale-95 transition-all shadow-lg shadow-red-600/30"
+        >
+          <span className="material-icons-outlined text-xl">call_end</span>
+        </button>
+      </div>
+
+    </div>
+  );
+};
+
+export default VideoCallPanel;
diff --git a/frontend/src/components/editor/grideditor b/frontend/src/components/editor/grideditor
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/editor/textWidget.jsx b/frontend/src/components/editor/textWidget.jsx
new file mode 100644
index 0000000..4ab2ee1
--- /dev/null
+++ b/frontend/src/components/editor/textWidget.jsx
@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import ReactQuill from 'react-quill-new'
+import * as Y from 'yjs'
+import { QuillBinding } from 'y-quill'
+import { getOrCreateDoc } from '../../collaboration/ydoc'
+
+const TextWidget = ({ docId, widgetId }) => {
+  const quillRef = useRef(null)
+  const bindingRef = useRef(null)
+
+  useEffect(() => {
+    const ydoc = getOrCreateDoc(docId)
+
+    const ytext = ydoc.getText(`widget-${widgetId}`)
+
+    if (quillRef.current) {
+      const quill = quillRef.current.getEditor()
+
+      bindingRef.current = new QuillBinding(ytext, quill)
+    }
+
+    return () => {
+      if (bindingRef.current) {
+        bindingRef.current.destroy()
+      }
+    }
+  }, [docId, widgetId])
+
+  return (
+    <ReactQuill
+      ref={quillRef}
+      theme="snow"
+    />
+  )
+}
+
+export default TextWidget
diff --git a/frontend/src/hooks/useAuth.jsx b/frontend/src/hooks/useAuth.jsx
index ca8033a..a5fae79 100644
--- a/frontend/src/hooks/useAuth.jsx
+++ b/frontend/src/hooks/useAuth.jsx
@@ -1,11 +1,20 @@
 import { useEffect, useState } from "react";
 import api from "../api/axios";
+import secureLocalStorage from "react-secure-storage";
 
 export default function useAuth() {
   const [loading, setLoading] = useState(true);
   const [authenticated, setAuthenticated] = useState(false);
 
   useEffect(() => {
+    const token = secureLocalStorage.getItem("accessToken");
+
+    if (!token) {
+      setAuthenticated(false);
+      setLoading(false);
+      return;
+    }
+
     api.get("/api/auth/me")
       .then(() => setAuthenticated(true))
       .catch(() => setAuthenticated(false))
diff --git a/frontend/src/hooks/useVideoCall.js b/frontend/src/hooks/useVideoCall.js
new file mode 100644
index 0000000..f2dae46
--- /dev/null
+++ b/frontend/src/hooks/useVideoCall.js
@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from "react";
+
+const ICE = {
+  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+  iceCandidatePoolSize: 10,
+};
+
+export default function useVideoCall(socket, blogId, onLeave) {
+  const localVideo = useRef(null);
+  const localStreamRef = useRef(null);
+  const peersRef = useRef({});
+
+  const [remoteStreams, setRemoteStreams] = useState([]);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isCameraOff, setIsCameraOff] = useState(false);
+
+  useEffect(() => {
+    if (!socket || !blogId) return;
+
+    const startCall = async () => {
+      try {
+        localStreamRef.current = await navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: true,
+        });
+
+        if (localVideo.current) {
+          localVideo.current.srcObject = localStreamRef.current;
+        }
+        socket.emit("call:join", blogId);
+      } catch (err) {
+        console.error("Failed to get media devices:", err);
+        onLeave?.();
+      }
+    };
+
+    /* 🔔 USER JOINED */
+    socket.on("call:user-joined", async ({ socketId }) => {
+      const pc = createPeer(socketId);
+      peersRef.current[socketId] = pc;
+
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+
+      socket.emit("call:signal", {
+        to: socketId,
+        blogId,
+        signal: { sdp: pc.localDescription },
+      });
+    });
+
+    /* 🔁 SIGNAL HANDLER */
+    socket.on("call:signal", async ({ from, signal }) => {
+      let pc = peersRef.current[from];
+      if (!pc) {
+        pc = createPeer(from);
+        peersRef.current[from] = pc;
+      }
+
+      if (signal.sdp) {
+        await pc.setRemoteDescription(signal.sdp);
+
+        if (signal.sdp.type === "offer") {
+          const answer = await pc.createAnswer();
+          await pc.setLocalDescription(answer);
+
+          socket.emit("call:signal", {
+            to: from,
+            blogId,
+            signal: { sdp: pc.localDescription },
+          });
+        }
+      }
+
+      if (signal.candidate) {
+        await pc.addIceCandidate(signal.candidate);
+      }
+    });
+
+    /* 👋 USER LEFT */
+    socket.on("call:user-left", (socketId) => {
+      peersRef.current[socketId]?.close();
+      delete peersRef.current[socketId];
+      setRemoteStreams((streams) => streams.filter((s) => s.socketId !== socketId));
+    });
+
+    startCall();
+
+    return () => {
+      socket.emit("call:leave", blogId);
+      Object.values(peersRef.current).forEach(pc => pc.close());
+      localStreamRef.current?.getTracks().forEach(t => t.stop());
+
+      socket.off("call:user-joined");
+      socket.off("call:signal");
+      socket.off("call:user-left");
+    };
+  }, [socket, blogId]);
+
+  /* 🧠 PEER CREATOR */
+  const createPeer = (socketId) => {
+    const pc = new RTCPeerConnection(ICE);
+
+    if (localStreamRef.current) {
+      localStreamRef.current.getTracks().forEach(track =>
+        pc.addTrack(track, localStreamRef.current)
+      );
+    }
+
+    pc.ontrack = (e) => {
+      const stream = e.streams[0];
+      stream.socketId = socketId; // Tag the stream with its socketId
+
+      setRemoteStreams(prev => {
+        // Check if this stream already exists
+        if (prev.find(s => s.id === stream.id)) {
+          return prev;
+        }
+        return [...prev, stream];
+      });
+    };
+
+    pc.onicecandidate = (e) => {
+      if (e.candidate) {
+        console.log("📡 Sending ICE Candidate to:", socketId);
+        socket.emit("call:signal", {
+          to: socketId,
+          blogId,
+          signal: { candidate: e.candidate },
+        });
+      }
+    };
+
+    pc.oniceconnectionstatechange = () => {
+      console.log(`🧊 ICE State for ${socketId}:`, pc.iceConnectionState);
+      if (pc.iceConnectionState === "failed" || pc.iceConnectionState === "disconnected") {
+        console.warn("⚠️ WebRTC connection failed, might need a relay (TURN). Using Google STUN for now.");
+      }
+    };
+
+    return pc;
+  };
+
+  /* 🎛️ CONTROLS */
+  const toggleMute = () => {
+    localStreamRef.current?.getAudioTracks().forEach(t => {
+      t.enabled = !t.enabled;
+      setIsMuted(!t.enabled);
+    });
+  };
+
+  const toggleCamera = () => {
+    localStreamRef.current?.getVideoTracks().forEach(t => {
+      t.enabled = !t.enabled;
+      setIsCameraOff(!t.enabled);
+    });
+  };
+
+  const endCall = () => {
+    socket.emit("call:leave", blogId);
+    Object.values(peersRef.current).forEach(pc => pc.close());
+    localStreamRef.current?.getTracks().forEach(t => t.stop());
+    setRemoteStreams([]);
+    onLeave?.();
+  };
+
+  return {
+    localVideo,
+    remoteStreams,
+    toggleMute,
+    toggleCamera,
+    endCall,
+    isMuted,
+    isCameraOff,
+  };
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 371aa61..5011d69 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;700;800;900&display=swap');
+
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui;
@@ -10,7 +11,11 @@
 
 @layer base {
   html {
-    @apply font-sans antialiased;
+    @apply font-sans antialiased bg-white text-slate-900 transition-colors duration-500;
+  }
+
+  html.dark {
+    @apply bg-black text-white;
   }
 }
 
@@ -24,5 +29,3 @@
   display: none;
 }
 
-
-
diff --git a/frontend/src/layouts/RootLayout.jsx b/frontend/src/layouts/RootLayout.jsx
index fd0576b..dcbb88b 100644
--- a/frontend/src/layouts/RootLayout.jsx
+++ b/frontend/src/layouts/RootLayout.jsx
@@ -1,16 +1,34 @@
+import { useState, useEffect } from "react"
 import { Sidebar } from "../components/Sidebar"
 import { Outlet } from "react-router-dom"
 
 function RootLayout() {
+    const [isDark, setIsDark] = useState(() => {
+        if (typeof window !== "undefined") {
+            const savedTheme = localStorage.getItem("theme");
+            if (savedTheme) return savedTheme === "dark";
+            return window.matchMedia("(prefers-color-scheme: dark)").matches;
+        }
+        return true;
+    });
+
+    useEffect(() => {
+        if (isDark) {
+            document.documentElement.classList.add("dark");
+            localStorage.setItem("theme", "dark");
+        } else {
+            document.documentElement.classList.remove("dark");
+            localStorage.setItem("theme", "light");
+        }
+    }, [isDark]);
+
     return (
-        <>
-            <div className="flex min-h-screen">
-                <Sidebar />
-                <main className="flex-1">
-                    <Outlet />
-                </main>
-            </div>
-        </>
+        <div className="flex min-h-screen bg-white dark:bg-black transition-colors duration-500">
+            <Sidebar isDark={isDark} setIsDark={setIsDark} />
+            <main className="flex-1 overflow-x-hidden">
+                <Outlet context={{ isDark, setIsDark }} />
+            </main>
+        </div>
     )
 }
 
diff --git a/frontend/src/pages/CreatePost.jsx b/frontend/src/pages/CreatePost.jsx
index 760955c..a329fa3 100644
--- a/frontend/src/pages/CreatePost.jsx
+++ b/frontend/src/pages/CreatePost.jsx
@@ -1,9 +1,17 @@
-import React, { useState, useEffect, useRef } from 'react' 
+import React, { useState, useEffect, useRef } from 'react'
 import { useParams, useNavigate } from "react-router-dom";
 import api from '../api/axios'
 import axios from 'axios'
 import GridEditor from '../components/GridEditor/GridEditor'
+import ShareModal from '../components/ShareModal'
 import { v4 as uuidv4 } from 'uuid';
+import * as Y from 'yjs';
+import { initSocket, disconnectSocket, getSocket } from '../collaboration/socket';
+import { Awareness, encodeAwarenessUpdate, applyAwarenessUpdate } from 'y-protocols/awareness';
+import VideoCallPanel from '../components/VideoCallPanel';
+import IncomingCallModal from "../components/IncomingCallModal";
+import OutgoingCallModal from "../components/OutgoingCallModal";
+
 
 const initialWidgets = [
     {
@@ -16,7 +24,7 @@ const initialWidgets = [
 
 
 const ToolbarContainer = ({ children }) => (
-    <div className="flex flex-wrap gap-2 items-center pb-4 mb-4 border-b border-slate-200 dark:border-slate-700/50 transition-colors duration-300">
+    <div className="flex flex-wrap gap-2 items-center pb-4 mb-4 border-b border-slate-200 dark:border-gray-700/50 transition-colors duration-300">
         {children}
     </div>
 )
@@ -25,7 +33,7 @@ const ToolbarButton = ({ onClick, children, title }) => (
     <button
         onClick={onClick}
         title={title}
-        className="flex items-center gap-2 px-3 py-1.5 rounded-md transition-all duration-200 text-sm font-medium bg-white border border-slate-200 shadow-sm hover:bg-slate-50 text-slate-700 dark:!bg-slate-800 dark:border-slate-700 dark:text-slate-200 dark:hover:!bg-slate-700"
+        className="flex items-center gap-2 px-3 py-1.5 rounded-md transition-all duration-200 text-sm font-medium bg-white border border-slate-200 shadow-sm hover:bg-slate-50 text-slate-700 dark:!bg-gray-300 dark:border-gray-400 dark:text-gray-900 dark:hover:!bg-gray-400"
     >
         {children}
     </button>
@@ -40,14 +48,58 @@ const ToolbarIcon = ({ children }) => (
 
 // --- MAIN COMPONENT ---
 const CreatePost = () => {
+    const [socket, setSocket] = useState(null);
+
+    const [incomingCall, setIncomingCall] = useState(null);
+    const [outgoingCall, setOutgoingCall] = useState(null);
+    const [callAccepted, setCallAccepted] = useState(false);
+
+    const acceptCall = () => {
+        if (!socket || !incomingCall) return;
+
+        socket.emit("call:accept", {
+            to: incomingCall.from,
+            blogId: docId,
+        });
+        socket.emit("call:join", docId);
+        setCallAccepted(true);
+        setIncomingCall(null);
+    };
+
+    const declineCall = () => {
+        if (!socket || !incomingCall) return;
+
+        socket.emit("call:decline", {
+            to: incomingCall.from,
+        });
+
+        setIncomingCall(null);
+    };
+
+    const cancelCall = () => {
+        if (!socket || !outgoingCall) return;
+        socket.emit("call:decline", { to: outgoingCall.socketId }); // Using decline as a generic signal to end
+        setOutgoingCall(null);
+    };
+
     const { id } = useParams();
+    const isCreateMode = !id;
+    const [docId, setDocId] = useState(id || null);
     const navigate = useNavigate();
     const isEditMode = Boolean(id);
     const [loading, setLoading] = useState(isEditMode);
+    const [shareOpen, setShareOpen] = useState(false);
 
     const [widgets, setWidgets] = useState(initialWidgets)
     const [title, setTitle] = useState('')
+    const [isSaving, setIsSaving] = useState(false);
     const [isUploading, setIsUploading] = useState(false)
+    const [ydoc, setYdoc] = useState(null);
+    const [awareness, setAwareness] = useState(null);
+    const [collaborators, setCollaborators] = useState([]);
+    const [canEdit, setCanEdit] = useState(true);
+
+    const [yWidgets, setYWidgets] = useState(null);
 
     const [isDark, setIsDark] = useState(() => {
         if (typeof window !== "undefined") {
@@ -69,56 +121,317 @@ const CreatePost = () => {
 
     const fileInputRef = useRef(null);
 
+    // --- SYNC TITLE ACROSS COLLABORATORS ---
+    useEffect(() => {
+        if (!ydoc) return;
+        const yTitle = ydoc.getText('title');
+
+        const observer = (event) => {
+            if (event.transaction.origin === 'local') return;
+            const currentYTitle = yTitle.toString();
+            setTitle(currentYTitle);
+        };
+
+        yTitle.observe(observer);
+
+        // Initial sync if title is already in ydoc
+        const initialTitle = yTitle.toString();
+        if (initialTitle && initialTitle !== title) {
+            setTitle(initialTitle);
+        }
+
+        return () => yTitle.unobserve(observer);
+    }, [ydoc]);
+
     useEffect(() => {
         if (!isEditMode) return;
 
         const fetchPost = async () => {
             try {
-                const res = await api.get(`/api/blog/${id}`);
-                setTitle(res.data.blog.title);
-
-                const loadedContent = res.data.blog.content;
-
-                if (Array.isArray(loadedContent) && loadedContent.length > 0) {
-                    if (loadedContent[0].layout && loadedContent[0].id) {
-                        const fixedWidgets = loadedContent.map(w => ({
-                            ...w,
-                            layout: {
-                                ...w.layout,
-                                y: typeof w.layout.y === "number" ? w.layout.y : Infinity
-                            }
-                        }));
-                        setWidgets(fixedWidgets);
+                const url = `/api/blog/${id}`;
+                console.log(`🔍 Fetching blog from: ${api.defaults.baseURL}${url}`);
+                const res = await api.get(url);
+
+                if (res.data && res.data.blog) {
+                    const blog = res.data.blog;
+                    setTitle(blog.title);
+                    const loadedContent = blog.content;
+
+                    // Check permissions
+                    const user = JSON.parse(localStorage.getItem('user'));
+                    if (user && blog.author !== user._id) {
+                        const collab = blog.collaborators?.find(c => c.email === user.email);
+                        if (!collab || collab.role === 'view') {
+                            setCanEdit(false);
+                        }
+                    }
+
+                    if (Array.isArray(loadedContent) && loadedContent.length > 0) {
+                        if (loadedContent[0].layout && loadedContent[0].id) {
+                            const fixedWidgets = loadedContent.map(w => ({
+                                ...w,
+                                layout: {
+                                    ...w.layout,
+                                    y: typeof w.layout.y === "number" ? w.layout.y : Infinity
+                                }
+                            }));
+                            setWidgets(fixedWidgets);
+                        } else {
+                            setWidgets([{
+                                id: uuidv4(),
+                                type: 'text',
+                                content: '<p><em>(Legacy Post Content)</em></p>',
+                                layout: { x: 0, y: 0, w: 12, h: 20 }
+                            }]);
+                        }
                     } else {
-                        setWidgets([{
-                            id: uuidv4(),
-                            type: 'text',
-                            content: '<p><em>(Legacy Post Content)</em></p>',
-                            layout: { x: 0, y: 0, w: 12, h: 20 }
-                        }]);
+                        setWidgets(initialWidgets);
                     }
                 } else {
+                    console.warn("⚠️ Blog data is missing in response", res.data);
                     setWidgets(initialWidgets);
                 }
-
-                setLoading(false);
             } catch (err) {
-                console.error("Failed to load blog", err);
+                console.error("❌ Failed to load blog:", err);
+                if (err.response) {
+                    console.error("   Status:", err.response.status);
+                    console.error("   Data:", err.response.data);
+
+                    if (err.response.status === 404) {
+                        alert("The requested blog post was not found (404). Redirecting to home.");
+                        navigate("/home");
+                        return; // Don't set loading to false here as we are navigating
+                    }
+                } else {
+                    console.error("   Message:", err.message);
+                    alert("Network error: Could not connect to the backend server.");
+                }
+            } finally {
+                setLoading(false);
             }
         };
-
         fetchPost();
-    }, [id, isEditMode]);
+    }, [id, isEditMode, navigate]);
+
+    // Cleanup socket on unmount
+    useEffect(() => {
+        return () => {
+            disconnectSocket();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!socket) return;
+
+        socket.on("call:incoming", (data) => {
+            setIncomingCall(data);
+        });
+
+        socket.on("call:accepted", () => {
+            setCallAccepted(true);
+            setOutgoingCall(null);
+        });
+
+        socket.on("call:declined", () => {
+            alert("Call rejected");
+            setOutgoingCall(null);
+        });
+
+        return () => {
+            socket.off("call:incoming");
+            socket.off("call:accepted");
+            socket.off("call:declined");
+        };
+    }, [socket]);
+
+    useEffect(() => {
+        console.log("📞 incomingCall =", incomingCall);
+    }, [incomingCall]);
+
+
+    // Initialize Yjs and Socket when docId is available
+    useEffect(() => {
+        if (!docId) return;
+
+        const doc = new Y.Doc();
+        setYdoc(doc);
+        const widgetsArray = doc.getArray('widgets');
+        setYWidgets(widgetsArray);
+
+        const yTitle = doc.getText('title');
+
+        const awarenessInstance = new Awareness(doc);
+        setAwareness(awarenessInstance);
+
+        const socket = initSocket(docId);
+        setSocket(socket);
+
+        socket.emit("doc:join", docId);
+
+
+        socket.on("doc:sync", (update) => {
+            console.log("Received doc:sync, applying update...");
+            Y.applyUpdate(doc, new Uint8Array(update), 'server');
+
+            // If local title is empty but Yjs title has content, update local state
+            if (title === '' && yTitle.toString() !== '') {
+                setTitle(yTitle.toString());
+            }
+        });
+
+        socket.on("doc:update", (update) => {
+            console.log("Received doc:update, applying update...");
+            Y.applyUpdate(doc, new Uint8Array(update), 'server');
+        });
+
+
+        // Track active users (legacy indicator)
+        socket.on("doc:users", (users) => {
+            setCollaborators(users);
+        });
+
+        socket.on("doc:kicked", () => {
+            alert("You have been removed from this document by the author.");
+            navigate("/home");
+        });
+
+        // Awareness events
+        socket.on("doc:awareness", (update) => {
+            applyAwarenessUpdate(awarenessInstance, new Uint8Array(update), 'server');
+        });
+
+        awarenessInstance.on('update', ({ added, updated, removed }, origin) => {
+            if (origin !== 'server') {
+                const update = encodeAwarenessUpdate(awarenessInstance, added.concat(updated).concat(removed));
+                socket.emit("doc:awareness", {
+                    blogId: docId,
+                    awareness: Array.from(update)
+                });
+            }
+        });
+
+
+        // Set local awareness state (name/color/email)
+        const userData = JSON.parse(localStorage.getItem('user')) || {};
+        awarenessInstance.setLocalStateField('user', {
+            name: userData.name || `Guest ${socket.id?.substring(0, 4) || ''}`,
+            email: userData.email || null,
+            color: '#' + Math.floor(Math.random() * 16777215).toString(16) // Random color
+        });
+
+        doc.on('update', (update, origin) => {
+            if (origin !== 'server') {
+                console.log("Sending doc:update to server...");
+                socket.emit('doc:update', {
+                    blogId: docId,
+                    update: Array.from(update)
+                });
+            }
+        });
+
+
+        // Sync Widgets Array
+        widgetsArray.observe((event) => {
+            if (event.transaction.origin === 'local') return;
+            setWidgets(widgetsArray.toArray());
+        });
+
+        return () => {
+            doc.destroy();
+            disconnectSocket(); // Re-connect if docId changes
+        };
+    }, [docId]);
+
+
+    // Initial sync from state to Yjs if Yjs is empty (e.g. first user to load doc)
+    useEffect(() => {
+        if (ydoc && title !== '') {
+            const yTitle = ydoc.getText('title');
+            if (yTitle.toString() === '') {
+                yTitle.doc.transact(() => {
+                    yTitle.insert(0, title);
+                }, 'local');
+            }
+        }
+    }, [title, ydoc]);
+
+
+    // Helper to update both local state and Yjs array
+    const updateWidgets = (newWidgets) => {
+        setWidgets(newWidgets);
 
+        if (!yWidgets) return;
+
+
+        const shouldSync = () => {
+            if (newWidgets.length !== widgets.length) return true;
+
+            return newWidgets.some((nw, i) => {
+                const ow = widgets[i];
+                if (!ow) return true;
+                if (nw.id !== ow.id) return true;
+                if (nw.type !== ow.type) return true;
+
+                // Check layout changes
+                if (nw.layout.x !== ow.layout.x ||
+                    nw.layout.y !== ow.layout.y ||
+                    nw.layout.w !== ow.layout.w ||
+                    nw.layout.h !== ow.layout.h) return true;
+
+                // Check content changes ONLY for non-text widgets
+                if (nw.type !== 'text' && nw.content !== ow.content) return true;
+
+                return false;
+            });
+        };
+
+        if (shouldSync()) {
+            yWidgets.doc.transact(() => {
+                yWidgets.delete(0, yWidgets.length);
+                yWidgets.insert(0, newWidgets);
+            }, 'local');
+        }
+    };
+
+
+    useEffect(() => {
+        if (!isCreateMode) return
+
+        const createDraft = async () => {
+            const res = await api.post('/api/blog/create-draft')
+            const newId = res.data.blog._id
+
+            setDocId(newId)
+            navigate(`/create/${newId}`, { replace: true })
+        }
+
+        createDraft()
+    }, [isCreateMode, docId])
+
+    const saveDraft = async () => {
+        if (!docId) return
+        await api.post(`/api/blog/updateblog/${docId}`, {
+            title,
+            content: widgets
+        })
+    }
+
+    useEffect(() => {
+        if (!isCreateMode) return
+
+        const timer = setTimeout(saveDraft, 2000)
+        return () => clearTimeout(timer)
+    }, [widgets, title, isCreateMode])
 
     const addTextWidget = () => {
         const newWidget = {
             id: uuidv4(),
             type: 'text',
-            content: '', 
+            content: '',
             layout: { x: 0, y: Infinity, w: 12, h: 4 }
         };
-        setWidgets([...widgets, newWidget]);
+        const newWidgets = [...widgets, newWidget];
+        updateWidgets(newWidgets);
     };
 
     const triggerImageUpload = () => {
@@ -151,7 +464,8 @@ const CreatePost = () => {
                 content: imageUrl,
                 layout: { x: 0, y: Infinity, w: 4, h: 8 }
             };
-            setWidgets([...widgets, newWidget]);
+            const newWidgets = [...widgets, newWidget];
+            updateWidgets(newWidgets);
 
         } catch (err) {
             console.error("Cloudinary upload error", err)
@@ -171,96 +485,170 @@ const CreatePost = () => {
                 content: url,
                 layout: { x: 0, y: Infinity, w: 6, h: 8 }
             };
-            setWidgets([...widgets, newWidget]);
+            const newWidgets = [...widgets, newWidget];
+            updateWidgets(newWidgets);
         }
     };
 
 
+
+
     const handleSave = async () => {
+        if (isSaving) return;
+        setIsSaving(true);
+        console.log('🚀 Publish button clicked');
+
         if (!title.trim()) {
             alert("Please enter a title for your post.");
+            setIsSaving(false);
+            return;
+        }
+
+        if (!docId) {
+            alert("Document ID is missing. Please try refreshing the page.");
+            setIsSaving(false);
             return;
         }
 
         try {
-            const sanitizedWidgets = widgets.map(w => ({
-                ...w,
-                layout: {
-                    ...w.layout,
-                    y: w.layout.y
+            console.log('📦 Preparing widgets for save...', { widgetCount: widgets.length, ydoc: !!ydoc });
+
+            const sanitizedWidgets = widgets.map(w => {
+                let content = w.content;
+                if (w.type === 'text' && ydoc) {
+                    const ytext = ydoc.getText(w.id);
+                    content = ytext.toString();
+                    console.log(`   Widget ${w.id}: Y.Text content length = ${content.length}`);
                 }
-            }));
-
-
+                return {
+                    ...w,
+                    content,
+                    layout: {
+                        ...w.layout,
+                        y: w.layout.y
+                    }
+                };
+            });
 
             const payload = {
                 title,
                 content: sanitizedWidgets,
             };
 
-            if (isEditMode) {
-                await api.post(`/api/blog/updateblog/${id}`, payload);
-                alert("Blog updated");
-            } else {
-                await api.post("/api/blog/postblog", payload);
-                alert("Blog published");
-            }
+            const response = await api.post(`/api/blog/updateblog/${docId}`, {
+                ...payload,
+                published: true
+            });
+
+            console.log('✅ Published successfully!');
             navigate("/home");
         } catch (error) {
-            console.error(error);
-            if (error.response && error.response.status === 400) {
-                alert("Cannot save: " + JSON.stringify(error.response.data));
-            } else {
-                alert("Error saving post");
-            }
+            console.error('❌ Publish failed:', error);
+            alert("Failed to publish document.");
+        } finally {
+            setIsSaving(false);
         }
     };
 
+
     if (loading) {
         return <div className="text-center mt-20">Loading editor...</div>;
     }
 
     return (
-        <div className="min-h-screen py-10 px-4 bg-slate-50 dark:bg-[#0f172a] font-['Inter',_sans-serif]">
-            <style>
-                {`
-          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@700;800&display=swap');
-          @import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');
-          @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
-        `}
-            </style>
-
-            <nav className="max-w-6xl mx-auto flex justify-between items-center mb-12">
-                <h2 className="font-['Outfit',_sans-serif] text-xl font-bold tracking-tight text-slate-900 dark:!text-slate-100">
-                    New Story
-                </h2>
-
-                <div className="flex items-center gap-6">
-                    <button
-                        onClick={() => setIsDark(!isDark)}
-                        className="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 transition-colors"
-                    >
-                        {isDark ? <i className="bi bi-sun h3"></i> : <i className="bi bi-moon h3"></i>}
-                    </button>
-                    <button
-                        onClick={handleSave}
-                        className="px-6 py-2 rounded bg-slate-900 dark:bg-slate-100 text-slate-50 dark:text-slate-900 text-xs uppercase tracking-widest font-bold hover:opacity-90 transition-all active:scale-95"
-                    >
-                        Publish
-                    </button>
-                </div>
-            </nav>
+        <div className="min-h-screen py-10 px-4 bg-slate-50 dark:bg-black font-['Inter',_sans-serif]">
+
+
+           <nav className="max-w-6xl mx-auto flex flex-col gap-6 mb-4 md:mb-12 px-2 md:px-4">
+        {/* TOP ROW: Branding & Primary Action */}
+        <div className="flex items-center justify-between w-full mt-4 md:mt-0">
+       <h2 className="font-['Outfit',_sans-serif] text-2xl md:!text-[60px] font-bold tracking-tight text-slate-800 dark:text-gray-200 leading-tight">
+    New Story
+</h2>
+
+            {/* Primary Action - Always prominent */}
+            <button
+                onClick={handleSave}
+                className="px-6 py-2 md:px-8 md:py-2.5 rounded-full bg-blue-600 dark:bg-blue-500 text-white text-[10px] md:text-[11px] uppercase tracking-[0.15em] font-black active:scale-95 shadow-lg shadow-blue-500/25 border-[0.5px] border-white/10 flex items-center gap-2 transition-all"
+            >
+                <i className="bi bi-send-fill text-[12px]"></i>
+                <span>Publish</span>
+            </button>
+        </div>
+
+        {/* SECONDARY TOOLS: Repositioned for Mobile */}
+        {/* On mobile: Moves just above the container. On Desktop: Stays right-aligned */}
+        <div className="flex items-center justify-end gap-2 overflow-x-auto no-scrollbar py-1">
+            
+            {/* Active Collaborators */}
+            <div className="flex items-center gap-2 text-[10px] font-black   backdrop-blur-xl px-3 py-2 rounded-full  shadow-sm shrink-0">
+                <span className="relative flex h-1.5 w-1.5">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
+                    <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500"></span>
+                </span>
+                <span className="text-slate-500 dark:text-slate-400">
+                    {collaborators.length} <span className="hidden lg:inline">Online</span>
+                </span>
+            </div>
+
+            {/* SHARE */}
+            <button
+                disabled={!docId}
+                onClick={() => setShareOpen(true)}
+                className={`h-9 w-9 md:w-auto md:px-4 flex items-center justify-center gap-2 rounded-full text-[10px] font-black uppercase tracking-wider backdrop-blur-xl  transition-all
+                    ${docId 
+                        ? " text-slate-700 dark:text-slate-300 dark:border-white/10 shadow-sm" 
+                        : "opacity-40 cursor-not-allowed"}`}
+            >
+                <i className="bi bi-share-fill"></i>
+                <span className="hidden md:inline">Share</span>
+            </button>
+
+            {/* CALL */}
+            <button
+                onClick={() => {
+                    const otherUsers = collaborators.filter(c => c.socketId && c.socketId !== socket.id);
+                    if (otherUsers.length === 0) { alert("No one online"); return; }
+                    otherUsers.forEach(user => socket.emit("call:invite", { blogId: docId, to: user.socketId }));
+                    setOutgoingCall(otherUsers[0]);
+                }}
+                className="h-9 w-9 md:w-auto md:px-4 flex items-center justify-center gap-2 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400  backdrop-blur-xl shadow-sm transition-all"
+            >
+                <i className="bi bi-camera-video-fill"></i>
+                <span className="hidden md:inline">Call</span>
+            </button>
+
+            {/* THEME TOGGLE */}
+            <button
+                onClick={() => setIsDark(!isDark)}
+                className="h-9 w-9 flex items-center justify-center rounded-full  text-slate-500 dark:text-gray-400  border-black/5 dark:border-white/10 backdrop-blur-xl shadow-sm transition-all"
+            >
+                {isDark ? <i className="bi bi-sun-fill"></i> : <i className="bi bi-moon-stars-fill"></i>}
+            </button>
+        </div>
+    </nav>
 
             <div className="max-w-[1400px] mx-auto">
-                <div className="bg-white dark:!bg-[#1e293b] rounded-2xl shadow-xl border border-slate-200 dark:border-slate-800 transition-colors duration-500 overflow-hidden">
+                <div className="bg-white dark:!bg-gray-300 rounded-2xl shadow-xl border border-slate-200 dark:border-gray-200 transition-colors duration-500 overflow-hidden">
 
                     <div className="p-4 sm:p-8 min-h-[80vh]">
 
                         <input
-                            type="text"
+                            readOnly={!canEdit}
                             placeholder="Title..."
                             value={title}
-                            onChange={e => setTitle(e.target.value)}
+                            onChange={e => {
+                                if (!canEdit) return;
+                                const newTitle = e.target.value;
+                                setTitle(newTitle);
+                                if (ydoc) {
+                                    const yTitle = ydoc.getText('title');
+                                    yTitle.doc.transact(() => {
+                                        yTitle.delete(0, yTitle.length);
+                                        yTitle.insert(0, newTitle);
+                                    }, 'local');
+                                }
+                            }}
                             style={{
                                 padding: "1rem",
                                 margin: "1rem",
@@ -272,44 +660,88 @@ const CreatePost = () => {
                                 backgroundColor: "transparent",
                                 transition: "all 0.3s ease",
                             }}
-                            className="w-full font-['Outfit',_sans-serif] text-[#ffffffff] text-2xl md:text-4xl font-bold bg-transparent border-none focus:outline-none p-0 text-slate-700 placeholder:text-slate-300 dark:placeholder:text-slate-600 dark:text-slate-500"
+                            className="w-full font-['Outfit',_sans-serif] text-[#ffffffff] text-2xl md:text-4xl font-bold bg-transparent border-none focus:outline-none p-0 text-slate-700 placeholder:text-slate-300 dark:placeholder:text-gray-400 dark:text-gray-400"
                         />
 
                         {/* TOOLBAR */}
-                        <div className="sticky top-0 z-20 bg-white/95 dark:!bg-[#1e293b]/95 backdrop-blur-sm transition-colors duration-500 rounded mb-5 shadow-sm">
-                            <ToolbarContainer>
-                                <span className="text-xs font-bold text-slate-400 uppercase tracking-wider mr-2 ml-1">Add Content:</span>
-
-                                <ToolbarButton onClick={addTextWidget} title="Add Text Block">
-                                    <ToolbarIcon>text_fields</ToolbarIcon> Text
-                                </ToolbarButton>
-
-                                <ToolbarButton onClick={triggerImageUpload} title="Add Image">
-                                    <ToolbarIcon>{isUploading ? 'sync' : 'add_photo_alternate'}</ToolbarIcon> Image
-                                </ToolbarButton>
-                                {/* Hidden Input */}
-                                <input
-                                    type="file"
-                                    accept="image/*"
-                                    className="hidden"
-                                    ref={fileInputRef}
-                                    onChange={handleImageUpload}
-                                    disabled={isUploading}
-                                />
-
-                                <ToolbarButton onClick={addVideoWidget} title="Add Video Embed">
-                                    <ToolbarIcon>smart_display</ToolbarIcon> Video
-                                </ToolbarButton>
-                            </ToolbarContainer>
-                        </div>
+                        {canEdit && (
+                            <div className="sticky top-0 z-20 bg-white/95 dark:!bg-gray-300/95 backdrop-blur-sm transition-colors duration-500 rounded mb-5 shadow-sm">
+                                <ToolbarContainer>
+                                    <span className="text-xs font-bold text-gray-600 dark:text-gray-600 uppercase tracking-wider mr-2 ml-1">Add Content:</span>
+
+                                    <ToolbarButton onClick={addTextWidget} title="Add Text Block">
+                                        <ToolbarIcon>text_fields</ToolbarIcon> Text
+                                    </ToolbarButton>
+
+                                    <ToolbarButton onClick={triggerImageUpload} title="Add Image">
+                                        <ToolbarIcon>{isUploading ? 'sync' : 'add_photo_alternate'}</ToolbarIcon> Image
+                                    </ToolbarButton>
+                                    {/* Hidden Input */}
+                                    <input
+                                        type="file"
+                                        accept="image/*"
+                                        className="hidden"
+                                        ref={fileInputRef}
+                                        onChange={handleImageUpload}
+                                        disabled={isUploading}
+                                    />
+
+                                    <ToolbarButton onClick={addVideoWidget} title="Add Video Embed">
+                                        <ToolbarIcon>smart_display</ToolbarIcon> Video
+                                    </ToolbarButton>
+                                </ToolbarContainer>
+                            </div>
+                        )}
 
                         {/* GRID EDITOR CANVAS */}
-                        <GridEditor widgets={widgets} setWidgets={setWidgets} />
+                        <div className="dark:bg-gray-300">
+                            <GridEditor widgets={widgets} setWidgets={updateWidgets} ydoc={ydoc} awareness={awareness} readOnly={!canEdit} />
+                        </div>
 
                     </div>
                 </div>
             </div>
+
+            <ShareModal
+                open={shareOpen}
+                onClose={() => setShareOpen(false)}
+                docId={docId}
+                onlineUsers={collaborators}
+                currentSocketId={socket?.id}
+                onKick={(socketId) => {
+                    if (socket) {
+                        socket.emit("doc:kick", { blogId: docId, socketId });
+                    }
+                }}
+            />
+            {incomingCall && (
+                <IncomingCallModal
+                    caller={incomingCall}
+                    onAccept={acceptCall}
+                    onDecline={declineCall}
+                />
+            )}
+
+            {outgoingCall && (
+                <OutgoingCallModal
+                    callee={outgoingCall}
+                    onCancel={cancelCall}
+                />
+            )}
+
+            {callAccepted && (
+                <VideoCallPanel
+                    socket={socket}
+                    blogId={docId}
+                    onLeave={() => {
+                        setCallAccepted(false);
+                        setIncomingCall(null);
+                    }}
+                />
+            )}
+
         </div>
+
     )
 }
 
diff --git a/frontend/src/pages/HomeFeed.jsx b/frontend/src/pages/HomeFeed.jsx
index 57fe944..850b052 100644
--- a/frontend/src/pages/HomeFeed.jsx
+++ b/frontend/src/pages/HomeFeed.jsx
@@ -7,27 +7,46 @@ const DeleteConfirmationModal = ({ show, onClose, onConfirm, postTitle }) => {
   if (!show) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
-      <div className="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-2xl w-full max-w-sm transform transition-all duration-300 scale-95">
-        <h2 className="text-xl font-['Outfit',_sans-serif] font-bold mb-4 text-slate-900 dark:text-slate-100">
-          Confirm Deletion
-        </h2>
-        <p className="text-slate-600 dark:text-slate-400 mb-6 text-sm">
-          Are you sure you want to delete the post: **{postTitle}**? This action cannot be undone.
-        </p>
-        <div className="flex justify-end gap-3">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            className="px-4 py-2 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors shadow-md active:scale-95"
-          >
-            Delete
-          </button>
+    <div className="fixed inset-0 bg-slate-900/40 dark:bg-black/80 flex items-center justify-center z-[100] p-4 backdrop-blur-md animate-in fade-in duration-300">
+      <div
+        className="relative overflow-hidden bg-white/80 dark:bg-[#0F0F0F]/90 border border-slate-200 dark:border-white/10 p-8 rounded-[32px] shadow-2xl w-full max-w-sm transform transition-all duration-500 scale-100 animate-in zoom-in-95"
+      >
+        {/* Decorative Background Glow */}
+        <div className="absolute -top-24 -right-24 w-48 h-48 bg-blue-500/10 blur-[80px] pointer-events-none" />
+        <div className="absolute -bottom-24 -left-24 w-48 h-48 bg-red-500/10 blur-[80px] pointer-events-none" />
+
+        <div className="relative z-10">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20">
+              <i className="bi bi-exclamation-triangle-fill text-red-500"></i>
+            </div>
+            <h2 className="text-2xl font-['Outfit',_sans-serif] font-black text-slate-900 dark:text-white tracking-tight">
+              Confirm Deletion
+            </h2>
+          </div>
+
+          <p className="text-slate-500 dark:text-gray-400 mb-8 text-sm leading-relaxed">
+            Are you sure you want to delete <span className="text-slate-900 dark:text-white font-bold italic">"{postTitle}"</span>? <br />
+            <span className="text-[10px] uppercase tracking-widest opacity-60 font-black mt-2 block">This action is permanent.</span>
+          </p>
+
+          <div className="flex flex-col gap-3">
+            <button
+              onClick={onConfirm}
+              style={{ borderRadius: '9999px' }}
+              className="w-full px-6 py-2 text-[10px] uppercase tracking-[0.2em] font-black bg-red-500 text-white hover:bg-red-600 transition-all shadow-lg shadow-red-500/20 active:scale-95"
+            >
+              Delete Post
+            </button>
+
+            <button
+              onClick={onClose}
+              style={{ borderRadius: '9999px' }}
+              className="w-full px-6 py-2 text-[10px] uppercase tracking-[0.2em] font-black text-slate-500 dark:text-gray-400 hover:bg-slate-100 dark:hover:bg-white/5 border border-transparent hover:border-slate-200 dark:hover:border-white/10 transition-all"
+            >
+              Go Back
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -37,17 +56,31 @@ const DeleteConfirmationModal = ({ show, onClose, onConfirm, postTitle }) => {
 
 export default function HomeFeed() {
 
- 
+
   const [posts, setPosts] = useState([]);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [postToDeleteId, setPostToDeleteId] = useState(null);
-  const [postToDeleteTitle, setPostToDeleteTitle] = useState(''); 
+  const [postToDeleteTitle, setPostToDeleteTitle] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
 
-   const navigate = useNavigate();
+  const navigate = useNavigate();
+
+  const startNewStory = async () => {
+    if (isCreating) return;
+    setIsCreating(true);
+    try {
+      const res = await api.post('/api/blog/create-draft');
+      const newId = res.data.blog._id;
+      navigate(`/create/${newId}`);
+    } catch (e) {
+      console.error("Error creating draft:", e);
+      setIsCreating(false);
+    }
+  };
 
   const editPost = (postId) => {
-  navigate(`/edit/${postId}`);
-};
+    navigate(`/edit/${postId}`);
+  };
 
   const deletePost = async (postId, postTitle) => {
     setPostToDeleteId(postId);
@@ -60,14 +93,14 @@ export default function HomeFeed() {
 
     try {
       let res = await api.get(`/api/blog/deleteblog/${postToDeleteId}`)
-      setPosts(posts.filter(item => item._id !== postToDeleteId)); 
+      setPosts(posts.filter(item => item._id !== postToDeleteId));
       console.log("Post deleted.");
       setShowDeleteModal(false);
       setPostToDeleteId(null);
       setPostToDeleteTitle('');
     } catch (e) {
       console.error('error deleting post', e);
-      setShowDeleteModal(false); 
+      setShowDeleteModal(false);
     }
   };
 
@@ -109,116 +142,246 @@ export default function HomeFeed() {
   }, [isDark]);
 
   return (
-    <div className="min-h-screen transition-colors duration-500 font-['Inter',_sans-serif]
-      bg-slate-50 text-slate-800 dark:bg-[#0f172a] dark:text-slate-400">
+    <div className="min-h-screen transition-all duration-700 font-['Inter',_sans-serif]
+      bg-slate-50 text-slate-800 dark:bg-[#030303] dark:bg-[radial-gradient(circle_at_top_right,_rgba(30,58,138,0.05),_transparent),_radial-gradient(circle_at_bottom_left,_rgba(79,70,229,0.05),_transparent)] dark:text-gray-400 selection:bg-blue-100 dark:selection:bg-blue-900/30">
 
       <style>
         {`
-          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Outfit:wght@700;800&display=swap');
-          @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
-
           a { text-decoration: none !important; }
+          .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+          }
+          .dark .glass-card {
+            background: rgba(15, 15, 15, 0.4);
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            border-left: 1px solid rgba(255, 255, 255, 0.05);
+            border-right: 1px solid rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
+          }
+          .dark .glass-card:hover {
+            background: rgba(20, 20, 20, 0.6);
+            border-top: 1px solid rgba(255, 255, 255, 0.15);
+            box-shadow: 0 0 40px rgba(59, 130, 246, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.05);
+          }
+          .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+          }
+          .custom-scrollbar::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+          }
+          .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+          }
         `}
       </style>
 
-      {/* --- MINIMAL NAVIGATION --- */}
-      <nav className="max-w-5xl mx-auto px-6 py-8 flex justify-between items-center">
-        <h2 className="font-['Outfit',_sans-serif] text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
-          Blogify
-        </h2>
-        <div className="flex items-center gap-6">
-          <Link to="/create" className="px-5 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-slate-50 dark:text-slate-900 text-xs uppercase tracking-widest font-bold hover:opacity-80 transition-all active:scale-95">
-            Write
-          </Link>
-          <button
-            onClick={() => setIsDark(!isDark)}
-            className="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 transition-colors"
-          >
-            {isDark ? <i className="bi bi-sun h3"></i> : <i className="bi bi-moon h3"></i>}
-          </button>
-        </div>
-      </nav>
+      {/* --- PREMIUM NAVIGATION --- */}
+       <nav className="sticky top-0 z-50 w-full glass-card border-b border-slate-200/50 dark:border-white/5 mb-8">
+  <div className="max-w-6xl mx-auto px-4 md:px-6 py-3 md:py-4 flex justify-between items-center">
+    
+    {/* LOGO SECTION - Responsive scale */}
+    <div className="flex items-center gap-2 group cursor-pointer shrink-0" onClick={() => navigate('/home')}>
+      <div className="w-7 h-7 md:w-8 md:h-8 bg-slate-900 dark:bg-white rounded-lg flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300 shadow-lg dark:shadow-white/10 overflow-hidden">
+        <img
+          src="/images/Logo.png"
+          alt="Logo"
+          className="w-4 h-4 md:w-5 md:h-5 object-contain"
+        />
+      </div>
+      <h2 className="font-['Outfit',_sans-serif] text-lg md:text-xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100">
+        ogDoc
+      </h2>
+    </div>
+
+    {/* BUTTON SECTION - Optimized for mobile tap targets */}
+    <div className="flex items-center gap-2 md:gap-3">
+  {/* START WRITING BUTTON */}
+  <button
+    onClick={async () => {
+      try {
+        const res = await api.post('/api/blog/create-draft');
+        navigate(`/create/${res.data.blog._id}`);
+      } catch (e) { console.error("Error creating draft:", e); }
+    }}
+    style={{ borderRadius: '15px' }}
+    className="relative group/btn overflow-hidden px-4 md:px-7 py-2 md:py-2.5 
+               bg-white/80 dark:bg-[#0A0A0A]/80 
+               border border-dashed border-slate-200 dark:border-white/10
+               backdrop-blur-xl
+               text-slate-900 dark:text-white text-[9px] md:text-[10px] uppercase tracking-[0.15em] md:tracking-[0.2em] font-black 
+               transition-all duration-500 hover:scale-105 active:scale-95 
+               hover:border-blue-500/50 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
+  >
+    {/* Matching Blue Shimmer */}
+    <div className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-blue-500/10 to-transparent -translate-x-full group-hover/btn:animate-[shimmer_2s_infinite]" />
+    <span className="relative z-10 group-hover/btn:text-blue-500 dark:group-hover/btn:text-blue-400 transition-colors duration-300 whitespace-nowrap">
+      create
+    </span>
+  </button>
+
+  {/* THEME TOGGLE BUTTON */}
+  <button
+    onClick={() => setIsDark(!isDark)}
+    style={{ borderRadius: '12px' }} 
+    className="relative h-9 w-9 md:h-[42px] md:w-[42px] flex items-center justify-center shrink-0
+              
+               backdrop-blur-xl 
+               text-slate-600 dark:text-gray-400 
+               hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-500/50 
+               transition-all duration-500 shadow-sm active:scale-90 group/theme"
+  >
+    <div className="relative z-10">
+      {isDark ? (
+        <i className="bi bi-sun-fill text-base md:text-lg transition-all duration-500 group-hover/theme:rotate-90"></i>
+      ) : (
+        <i className="bi bi-moon-stars-fill text-base md:text-lg transition-all duration-500 group-hover/theme:-rotate-12 group-hover/theme:scale-110"></i>
+      )}
+    </div>
+    {/* Background hover glow matching card style */}
+    <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-blue-500/5 transition-opacity duration-500" />
+  </button>
+</div>
+  </div>
+</nav>
 
       {/* --- FEED SECTION --- */}
-      <main className="max-w-5xl mx-auto px-6 py-12">
-        <header className="mb-12 border-b border-slate-200 dark:border-slate-800/60 pb-8">
-          <h1 className="font-['Outfit',_sans-serif] text-sm uppercase tracking-[0.3em] text-slate-400 mb-2">
-            Recent Stories
+      <main className="max-w-6xl mx-auto px-6 py-4">
+        <header className="mb-16">
+          <h1 className="font-['Outfit',_sans-serif] text-xs uppercase tracking-[0.4em] text-blue-600 dark:text-blue-400 font-black mb-3">
+            Workspace
           </h1>
-          <p className="text-slate-500 text-sm">
-            Curated thoughts on development and design.
-          </p>
+          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+            <div>
+              <h2 className="text-4xl md:text-5xl font-['Outfit',_sans-serif] font-black text-slate-900 dark:text-white leading-tight">
+                Think clearly.<br />Write beautifully.
+              </h2>
+              <p className="text-slate-500 dark:text-gray-400 mt-4 text-lg max-w-md">
+                A premium minimalist space for your most important thoughts and professional documentation.
+              </p>
+            </div>
+             <div className="w-full sm:w-auto px-3 sm:px-0 mb-0"> {/* px-3 matches your grid's mobile padding */}
+  <div className="w-full sm:w-fit px-4 py-2 rounded-xl bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20">
+    <span className="block text-[10px] uppercase tracking-wider text-blue-600 dark:text-blue-400 font-bold">
+      Total Stories
+    </span>
+    <span className="text-2xl font-black text-slate-900 dark:text-white">
+      {posts.length}
+    </span>
+  </div>
+</div>
+          </div>
         </header>
 
-        <div className="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-3 gap-1">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {/* ADD NEW POST PLACEHOLDER CARD - NOW FIRST */}
+          <button
+            onClick={startNewStory}
+            disabled={isCreating}
+            className={`group relative h-full glass-card p-6 rounded-[2rem] border-2 border-dashed border-slate-200 dark:border-white/10 flex flex-col items-center justify-center gap-4 hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 min-h-[300px] ${isCreating ? 'opacity-50 cursor-not-allowed' : ''}`}
+          >
+            <div className="w-16 h-16 rounded-3xl bg-slate-50 dark:bg-blue-900/10 flex items-center justify-center text-slate-300 dark:text-blue-400 group-hover:bg-blue-50 dark:group-hover:bg-blue-900/20 group-hover:text-blue-500 transition-all">
+              <i className={`bi ${isCreating ? 'bi-arrow-repeat animate-spin' : 'bi-plus-lg'} text-3xl`}></i>
+            </div>
+            <div className="text-center">
+              <span className="block text-sm font-bold text-slate-900 dark:text-slate-100">
+                {isCreating ? 'Working...' : 'Create New Story'}
+              </span>
+              <span className="text-[11px] text-slate-400 dark:text-slate-500">Share your latest discovery</span>
+            </div>
+          </button>
+
           {posts.map((post) => (
-            <a
+            <div
               key={post._id}
-              href={`https://shamil-tp.github.io/blog-Rendering-Library/?slug=${post.slug}`}
-              className="group block relative p-3 rounded-[1rem] border border-slate-200/60 dark:border-slate-800/50 
-                         bg-slate-100/50 dark:bg-[#1e293b]/30 hover:bg-white dark:hover:bg-[#1e293b]/60
-                         transition-all duration-300 w-[300px] mb-3 sm:w-full"
+              className="group relative"
             >
-              <div className="flex flex-col gap-2">
-
-                <div className="absolute top-4 right-4 flex gap-3 text-sm">
-                  {/* Edit Icon */}
-                  <i
-                    className="bi bi-pencil-square hover:text-blue-500 transition-colors cursor-pointer text-slate-400 dark:text-slate-500"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      editPost(post._id);
-                    }}
-                    title="Edit Post"
-                  ></i>
-
-                  {/* Delete Icon */}
-                  <i
-                    className="bi bi-trash3 hover:text-red-500 transition-colors cursor-pointer text-slate-400 dark:text-slate-500"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      deletePost(post._id, post.title); 
-                    }}
-                    title="Delete Post"
-                  ></i>
-                </div>
+              <a
+                href={`https://shamil-tp.github.io/blog-Rendering-Library/?slug=${post.slug}`}
+                className="block h-full glass-card p-6 rounded-[2rem] border border-slate-200/60 dark:border-white/5 
+                           hover:shadow-2xl hover:shadow-blue-500/5 dark:hover:shadow-blue-500/10
+                           hover:translate-y-[-4px] transition-all duration-500"
+              >
+                <div className="flex flex-col h-full gap-6">
+                  <div className="flex justify-between items-start">
+                    <div className="flex flex-col gap-2">
+                      {post.author?._id === JSON.parse(localStorage.getItem('user'))?._id ? (
+                        <span className="px-3 py-1 w-fit rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 text-[10px] font-black tracking-widest uppercase border border-blue-100 dark:border-blue-900/30">
+                          My Story
+                        </span>
+                      ) : (
+                        <span className="px-3 py-1 w-fit rounded-full bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 text-[10px] font-black tracking-widest uppercase border border-purple-100 dark:border-purple-900/30">
+                          Shared
+                        </span>
+                      )}
+                      <div className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest flex items-center gap-2">
+                        <span>{new Date(post.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
+                        <span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-gray-700"></span>
+                        <span>{new Date(post.createdAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</span>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          editPost(post._id);
+                        }}
+                        className="p-2 rounded-xl bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all"
+                        title="Edit Post"
+                      >
+                        <i className="bi bi-pencil-square text-lg"></i>
+                      </button>
+                      {post.author?._id === JSON.parse(localStorage.getItem('user'))?._id && (
+                        <button
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            deletePost(post._id, post.title);
+                          }}
+                          className="p-2 rounded-xl bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-white dark:hover:bg-white/10 transition-all"
+                          title="Delete Post"
+                        >
+                          <i className="bi bi-trash3 text-lg"></i>
+                        </button>
+                      )}
+                    </div>
+                  </div>
 
-                {/* Main content area */}
-                <div className="flex justify-between items-start gap-2">
-                  <div className="space-y-3 flex-grow min-w-0">
-                    <p className="text-[10px] font-mono text-slate-400 dark:text-slate-500 uppercase tracking-tighter italic truncate">
+                  <div className="space-y-4">
+                    <p className="text-[10px] font-mono text-slate-400 dark:text-gray-500 uppercase tracking-widest italic truncate">
                       /{post.slug}
                     </p>
-                    <h3 className="font-['Outfit',_sans-serif] text-2xl md:text-3xl font-bold text-slate-900 dark:text-slate-100 group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors">
+                    <h3 className="font-['Outfit',_sans-serif] text-2xl font-bold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2 leading-tight">
                       {post.title}
                     </h3>
                   </div>
 
-                  <div className="flex flex-col items-end gap-3 flex-shrink-0">
-                    <div className="text-[10px] font-bold text-slate-300 dark:text-slate-600 uppercase tracking-widest pt-5">
-                      {new Date(post.createdAt).toLocaleTimeString('en-US', {
-                        hour: '2-digit',
-                        minute: '2-digit',
-                        hour12: true
-                      })}
+                  <div className="mt-auto pt-6 border-t border-slate-100 dark:border-white/5 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      {post.author?.name && (
+                        <>
+                          <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center text-white text-[10px] font-black shadow-lg shadow-blue-500/20">
+                            {post.author.name.charAt(0).toUpperCase()}
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-xs font-bold text-slate-900 dark:text-slate-100">{post.author.name}</span>
+                          </div>
+                        </>
+                      )}
                     </div>
                   </div>
                 </div>
-
-                {/* Author and Date Row */}
-                <div className="flex items-center gap-4 text-xs font-medium text-slate-400 uppercase tracking-wider mt-4">
-                  <span className="text-slate-600 dark:text-slate-500">{post.author.name}</span>
-                  <span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
-                  <span>{new Date(post.createdAt).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                    year: 'numeric'
-                  }).toUpperCase()}</span>
-                </div>
-              </div>
-            </a>
+              </a>
+            </div>
           ))}
         </div>
       </main>
@@ -230,8 +393,23 @@ export default function HomeFeed() {
         postTitle={postToDeleteTitle}
       />
 
-      <footer className="max-w-5xl mx-auto px-6 py-20 text-center">
-        <p className="text-[10px] uppercase tracking-widest text-slate-400 border-t border-slate-200 dark:border-slate-800 pt-8 inline-block px-10">
-          &copy; 2026 Blogify Engine</p></footer></div>
+      <footer className="max-w-6xl mx-auto px-6 py-24 text-center">
+        <div className="w-full h-px bg-gradient-to-r from-transparent via-slate-200 dark:via-white/10 to-transparent mb-12"></div>
+        <div className="flex flex-col items-center gap-6">
+          <h2 className="font-['Outfit',_sans-serif] text-xl font-extrabold tracking-tight text-slate-400 dark:text-slate-500">
+            ogDoc
+          </h2>
+          <p className="text-[11px] uppercase tracking-[0.3em] font-black text-slate-400 dark:text-gray-600">
+            &copy; 2026 Crafted with Passion
+          </p>
+        </div>
+      </footer>
+    </div>
   );
 }
+
+
+
+
+
+
diff --git a/frontend/src/pages/components.jsx b/frontend/src/pages/components.jsx
index c54f071..5f6ed26 100644
--- a/frontend/src/pages/components.jsx
+++ b/frontend/src/pages/components.jsx
@@ -13,6 +13,7 @@ export const Toolbar = React.forwardRef(({ className, ...props }, ref) => (
   />
 ));
 
+
 export const Button = React.forwardRef(
   ({ className, active, reversed, ...props }, ref) => (
     <span
diff --git a/frontend/src/pages/login.jsx b/frontend/src/pages/login.jsx
index b20244d..124c0fb 100644
--- a/frontend/src/pages/login.jsx
+++ b/frontend/src/pages/login.jsx
@@ -6,9 +6,24 @@ function Login() {
   const navigate = useNavigate();
   const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
 
-  const [isDark, setIsDark] = useState(
-    document.documentElement.classList.contains("dark")
-  );
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) return savedTheme === "dark";
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDark]);
 
   useEffect(() => {
     if (!window.google) return;
@@ -23,14 +38,13 @@ function Login() {
       {
         theme: isDark ? "filled_black" : "outline",
         size: "large",
-        shape: "pill", 
-        width: "280",
+        shape: "pill",
+        width: window.innerWidth < 640 ? "250" : "300", 
       }
     );
   }, [isDark]);
 
   const handleCredentialLogin = async (response) => {
-    console.log(response)
     try {
       const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/auth/google`, {
         method: "POST",
@@ -51,43 +65,62 @@ function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-300 dark:bg-[#0f172a] transition-colors duration-500 font-['Inter',_sans-serif]">
-      <style>
-        {`
-          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Outfit:wght@700;800&display=swap');
-          
-          /* Custom override to ensure the Google iframe aligns with our Slate theme */
-          #googleSignInDiv iframe {
-            border-radius: 9999px !important;
-          }
-        `}
-      </style>
-
-      <div className="max-w-md w-full mx-6 p-[1px] bg-slate-200 dark:bg-slate-800 rounded-2xl">
-        <div className="bg-slate-200 dark:bg-slate-800 rounded-2xl p-10 py-14 shadow-2xl shadow-slate-200/50 dark:shadow-none text-center">
-
-          <h1 className="font-['Outfit',_sans-serif] text-3xl font-bold !text-slate-900 dark:!text-slate-300">
-            Welcome Back
-          </h1>
+    <div className="min-h-screen flex flex-col md:flex-row bg-slate-50 dark:bg-black transition-colors duration-500 font-['Inter',_sans-serif] overflow-x-hidden">
+      
+      {/* --- BRANDING SECTION (Top on Mobile, Left on Desktop) --- */}
+      <div className="flex flex-1 relative items-center justify-center p-8 sm:p-12 lg:p-20 bg-slate-900 dark:bg-gray-950 overflow-hidden min-h-[40vh] md:min-h-screen">
+        {/* Abstract Background Orbs */}
+        <div className="absolute top-[-20%] left-[-10%] w-[80%] h-[80%] bg-blue-600/20 rounded-full blur-[120px] animate-pulse"></div>
+        <div className="absolute bottom-[-20%] right-[-10%] w-[80%] h-[80%] bg-purple-600/20 rounded-full blur-[120px] animate-pulse delay-700"></div>
 
-          <p className="text-slate-600 dark:text-slate-400 text-sm mb-12">
-            Continue to <span className="font-semibold text-slate-400">Blogify</span>
+        <div className="relative z-10 max-w-lg text-center md:text-left">
+          <div className="w-16 h-16 lg:w-20 lg:h-20 bg-white rounded-2xl lg:rounded-3xl flex items-center justify-center shadow-2xl mb-6 lg:mb-12 mx-auto md:mx-0 transform -rotate-12 transition-transform hover:rotate-0 duration-700 overflow-hidden">
+            <img src="/images/Logo.png" alt="Logo" className="w-10 h-10 lg:w-12 lg:h-12 object-contain" />
+          </div>
+          <h1 className="font-['Outfit',_sans-serif] text-4xl sm:text-5xl lg:text-6xl font-black text-white mb-4 lg:mb-8 tracking-tighter leading-none">
+            Your journey <span className="text-blue-400">starts</span> here.
+          </h1>
+          <p className="text-base sm:text-lg lg:text-xl text-slate-400 font-medium leading-relaxed max-w-sm mx-auto md:mx-0">
+            Join thousands of creators documenting their growth on ogDoc. A minimalist, collaborative space for modern storytellers.
           </p>
+        </div>
+        
+        {/* Decorative Grid */}
+        <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
+      </div>
 
-          <div className="flex justify-center">
-            <div
-              id="googleSignInDiv"
-              className="hover:opacity-90 transition-opacity"
-            ></div>
-          </div>
+      {/* --- LOGIN SECTION (Bottom on Mobile, Right on Desktop) --- */}
+      <div className="flex-1 flex items-center justify-center p-6 sm:p-8 bg-slate-50 dark:bg-black relative text-center min-h-[60vh] md:min-h-screen">
+        {/* Mobile Decorative Orbs */}
+        <div className="md:hidden absolute top-[-5%] right-[-5%] w-[60%] h-[40%] bg-blue-500/10 dark:bg-blue-900/10 rounded-full blur-[80px]"></div>
+        
+        <div className="max-w-md w-full relative z-10">
+          <div className="bg-white/70 dark:bg-gray-900/40 backdrop-blur-3xl rounded-[2.5rem] md:rounded-[3rem] p-8 sm:p-10 md:p-16 text-center border border-white dark:border-gray-800 shadow-[0_32px_64px_-15px_rgba(0,0,0,0.1)] dark:shadow-none transition-all duration-500">
+
+            <h1 className={`font-['Outfit',_sans-serif] text-4xl sm:text-5xl font-black mb-3 md:mb-4 tracking-tight leading-tight ${isDark ? '!text-white' : 'text-slate-900'}`}>
+              Welcome Back
+            </h1>
+
+            <p className={`text-base sm:text-lg mb-8 md:mb-12 font-medium ${isDark ? '!text-white/80' : 'text-slate-500'}`}>
+              Continue your journey on <span className="text-blue-600 dark:text-blue-400 font-bold">ogDoc</span>
+            </p>
+
+            <div className="flex justify-center mb-10 md:mb-12">
+              <div
+                id="googleSignInDiv"
+                className="hover:scale-105 transition-all duration-300 shadow-xl dark:shadow-blue-500/10 rounded-full overflow-hidden"
+              ></div>
+            </div>
 
-          <div className="mt-12 pt-8 border-t border-slate-100 dark:border-slate-700/50">
-            <button
-              onClick={() => navigate("/")}
-              className="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
-            >
-              Back to Start
-            </button>
+            <div className="pt-6 md:pt-8 border-t border-slate-100 dark:border-gray-800/50">
+              <button
+                onClick={() => navigate("/")}
+                className={`group flex items-center justify-center gap-2 mx-auto text-[10px] font-black uppercase tracking-[0.3em] transition-all ${isDark ? 'text-white/50 hover:text-blue-400' : 'text-slate-400 hover:text-blue-600'}`}
+              >
+                <i className="bi bi-arrow-left transition-transform group-hover:-translate-x-1"></i>
+                Back to Start
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/pages/startPage.jsx b/frontend/src/pages/startPage.jsx
index d43d210..37219ba 100644
--- a/frontend/src/pages/startPage.jsx
+++ b/frontend/src/pages/startPage.jsx
@@ -1,16 +1,145 @@
+// import { useState, useEffect } from "react";
+// import { useNavigate } from "react-router-dom";
+// import Orb from "../components/Orb/Orb";
+
+// export default function StartPage() {
+//   const navigate = useNavigate();
+
+//   const [isDark, setIsDark] = useState(() => {
+//     if (typeof window !== "undefined") {
+//       const savedTheme = localStorage.getItem("theme");
+//       if (savedTheme) return savedTheme === "dark";
+//       return window.matchMedia("(prefers-color-scheme: dark)").matches;
+//     }
+//     return true;
+//   });
+
+//   useEffect(() => {
+//     if (isDark) {
+//       document.documentElement.classList.add("dark");
+//       localStorage.setItem("theme", "dark");
+//     } else {
+//       document.documentElement.classList.remove("dark");
+//       localStorage.setItem("theme", "light");
+//     }
+//   }, [isDark]);
+
+//   return (
+//     <div
+//      className="min-h-screen relative overflow-hidden transition-all duration-700 font-['Inter',_sans-serif] bg-white"
+//     >
+//       <style>
+//         {`
+//           .glass-card {
+//             background: rgba(255, 255, 255, 0.4);
+//             backdrop-filter: blur(24px);
+//             -webkit-backdrop-filter: blur(24px);
+//             border: 1px solid rgba(255, 255, 255, 0.5);
+//             box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
+//             position: relative;
+//             z-index: 10;
+//             overflow: hidden;
+//           }
+
+//           .dark .glass-card {
+//             background: #000000;
+//             border: 1px solid rgba(255, 255, 255, 0.08);
+//             box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
+//           }
+            
+//           @keyframes shine {
+//             from { left: -100%; }
+//             to { left: 100%; }
+//           }
+//           .group:hover .group-hover\:animate-shine {
+//             animation: shine 0.8s forwards;
+//           }
+//         `}
+//       </style>
+
+//       {/* Theme Toggle - Adjusted position for mobile */}
+//       <button
+//         onClick={() => setIsDark(!isDark)}
+//         className="fixed top-6 right-6 md:top-8 md:right-8 z-50 w-10 h-10 md:w-11 md:h-11 rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl shadow-xl border border-slate-100 dark:border-gray-800 flex items-center justify-center text-slate-600 dark:text-gray-400 hover:text-blue-500 transition-all hover:rotate-12 active:scale-95"
+//       >
+//         {isDark ? (
+//           <i className="bi bi-sun-fill text-lg md:text-xl"></i>
+//         ) : (
+//           <i className="bi bi-moon-stars-fill text-lg md:text-xl"></i>
+//         )}
+//       </button>
+
+//       <section className="relative z-20 min-h-screen flex items-center justify-center px-4 md:px-6">
+//         <div className="max-w-4xl w-full py-8 md:py-12">
+//           {/* Card: Adjusted rounding and padding for mobile */}
+//           <div className="glass-card rounded-[2.5rem] md:rounded-[3.5rem] p-8 md:p-16 min-h-[400px] md:min-h-[420px] flex flex-col items-center justify-center text-center relative group">
+
+//             {/* Orb Background - Adjusted scale for smaller screens */}
+//             <div className="absolute inset-0 z-0 pointer-events-none opacity-90 scale-[1.5] md:scale-[2.2] flex items-center justify-center">
+//               <Orb
+//                 hoverIntensity={2}
+//                 rotateOnHover
+//                 hue={0}
+//                 forceHoverState={false}
+//                 backgroundColor={isDark ? "#000000" : "#ffffff"}
+//               />
+//             </div>
+
+//             <div className="relative z-10 w-full">
+//               {/* Responsive Heading */}
+//               <h1 className="font-['Outfit',_sans-serif] text-4xl sm:text-5xl md:text-7xl font-black mb-4 md:mb-6 tracking-tighter text-slate-900 dark:text-white leading-[1.1] md:leading-[0.95]">
+//                 <span className="dark:text-white">Documenting</span> <br />
+//                 <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 drop-shadow-sm">
+//                   your legacy.
+//                 </span>
+//               </h1>
+
+//               {/* Responsive Paragraph */}
+//               <p className="text-sm md:text-lg max-w-xl mx-auto mb-8 md:mb-10 leading-relaxed text-slate-600 dark:text-white font-medium font-['Inter',_sans-serif] px-2 md:px-0">
+//                 A minimalist, real-time collaborative workspace designed for
+//                 high-performance storytelling and digital archiving.
+//               </p>
+
+//               <div className="flex flex-col sm:flex-row items-center justify-center gap-4 md:gap-6">
+//                 <button
+//                   onClick={() => navigate("/login")}
+//                   className="group relative px-6 py-2.5 !rounded-xl !border-[1.5px] 
+//                   bg-gradient-to-r from-blue-600 to-purple-600 
+//                   dark:from-blue-500 dark:to-purple-500
+//                   !border-white/20 dark:!border-white/10
+//                   text-white text-[11px] font-bold uppercase tracking-tight
+//                   shadow-lg shadow-blue-500/20 hover:shadow-purple-500/40
+//                   hover:-translate-y-0.5 transition-all duration-300 active:scale-95 
+//                   overflow-hidden w-full sm:w-auto font-['Inter',_sans-serif]"
+//                 >
+//                   <div className="relative z-10 flex items-center justify-center gap-1.5 leading-none">
+//                     <span className="inline-block">Start Creating</span>
+//                     <i className="bi bi-arrow-right-short text-xl flex items-center transition-transform duration-300 group-hover:translate-x-1 group-hover:scale-110"></i>
+//                   </div>
+
+//                   <div className="absolute -inset-full top-0 block duration-500 transform -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover:animate-shine" />
+//                   <div className="absolute inset-0 bg-gradient-to-tr from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </section>
+//     </div>
+//   );
+// }
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import Orb from "../components/Orb/Orb";
 
 export default function StartPage() {
   const navigate = useNavigate();
 
   const [isDark, setIsDark] = useState(() => {
     if (typeof window !== "undefined") {
-      return (
-        localStorage.getItem("theme") === "dark" ||
-        (!("theme" in localStorage) &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches)
-      );
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) return savedTheme === "dark";
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
     }
     return true;
   });
@@ -27,89 +156,100 @@ export default function StartPage() {
 
   return (
     <div
-      className="
-        min-h-screen relative overflow-hidden transition-colors duration-500
-        bg-slate-50 text-slate-800 font-['Inter',_sans-serif]
-        dark:bg-[#0f172a] dark:text-slate-400
-      "
+      // FIXED: The background now toggles between white and black globally
+      className={`min-h-screen relative overflow-hidden transition-colors duration-700 font-['Inter',_sans-serif] ${
+        isDark ? "bg-black" : "bg-white"
+      }`}
     >
       <style>
         {`
-          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Outfit:wght@700;800&display=swap');
-          @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
+          .glass-card {
+            background: rgba(255, 255, 255, 0.4);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
+            position: relative;
+            z-index: 10;
+            overflow: hidden;
+          }
 
+          .dark .glass-card {
+            background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
+          }
+            
+          @keyframes shine {
+            from { left: -100%; }
+            to { left: 100%; }
+          }
+          .group:hover .group-hover\:animate-shine {
+            animation: shine 0.8s forwards;
+          }
         `}
       </style>
 
+      {/* Theme Toggle */}
       <button
         onClick={() => setIsDark(!isDark)}
-        className="
-          fixed top-8 right-8 z-50
-          text-[10px] uppercase tracking-[0.2em] font-bold
-          text-slate-400 dark:text-slate-500
-          transition-colors hover:text-slate-900 dark:hover:text-slate-100
-        "
-        aria-label="Toggle theme"
+        className="fixed top-6 right-6 md:top-8 md:right-8 z-50 w-10 h-10 md:w-11 md:h-11 rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl shadow-xl border border-slate-100 dark:border-gray-800 flex items-center justify-center text-slate-600 dark:text-gray-400 hover:text-blue-500 transition-all hover:rotate-12 active:scale-95"
       >
-        {isDark ? <i className="bi bi-sun h3"></i> : <i className="bi bi-moon h3"></i>}
+        {isDark ? (
+          <i className="bi bi-sun-fill text-lg md:text-xl"></i>
+        ) : (
+          <i className="bi bi-moon-stars-fill text-lg md:text-xl"></i>
+        )}
       </button>
 
-      <section className="relative z-10 min-h-screen flex items-center justify-center px-6">
-        <div
-          style={{borderRadius:"10px"}}
-          className="
-            relative max-w-3xl w-full p-[1px] rounded-2xl
-            bg-slate-200 dark:bg-slate-700
-            transition-colors duration-500
-          "
-        >
-          <div
-            style={{borderRadius:"10px"}}
-            className="
-              rounded-2xl px-8 sm:px-12 py-20 text-center
-              shadow-2xl shadow-slate-200/50 dark:shadow-none
-              transition-colors duration-500
-              
-              /* LIGHT MODE: White Card */
-              
-              /* DARK MODE: Slate 800 (Distinct from Slate 900 background) */
-               bg-slate-200 dark:bg-slate-700
-            "
-          >
-            <h1 className="font-['Outfit',_sans-serif] text-5xl md:text-6xl font-extrabold mb-8 tracking-tight text-slate-900 dark:text-slate-100">
-              Welcome to{" "}
-              <span className="text-slate-400 dark:text-slate-500">
-                Blogify
-              </span>
-            </h1>
-
-            <p className="text-lg md:text-xl max-w-lg mx-auto mb-12 leading-relaxed text-slate-600 dark:text-slate-400">
-              A minimalist space to document your journey, 
-              explore new perspectives, and share stories.
-            </p>
-
-            <button
-              onClick={() => navigate("/login")}
-              style={{borderRadius:"10px"}}
-              className="
-                inline-flex items-center justify-center
-                px-10 py-4 rounded-2xl
-                text-sm uppercase tracking-widest font-semibold
-                transition-all duration-300
-                active:scale-[0.97]
-
-                /* LIGHT MODE BUTTON: Black Background, White Text */
-                bg-slate-900 text-slate-50 
-                hover:bg-black
-
-                /* DARK MODE BUTTON: Dark Gray Background, White Text */
-                /* Changed from 'bg-slate-100' (White) to avoid the 'bright element' issue */
-                dark:bg-slate-500 dark:text-slate-100 
-                dark:hover:bg-slate-600 dark:border dark:border-slate-600
-              "
-            >
-              Start Writing
-            </button>
+      <section className="relative z-20 min-h-screen flex items-center justify-center px-4 md:px-6">
+        <div className="max-w-4xl w-full py-8 md:py-12">
+          <div className="glass-card rounded-[2.5rem] md:rounded-[3.5rem] p-8 md:p-16 min-h-[400px] md:min-h-[420px] flex flex-col items-center justify-center text-center relative group">
+
+            {/* Orb Background */}
+            <div className="absolute inset-0 z-0 pointer-events-none opacity-90 scale-[1.5] md:scale-[2.2] flex items-center justify-center">
+              <Orb
+                hoverIntensity={2}
+                rotateOnHover
+                hue={0}
+                forceHoverState={false}
+                backgroundColor={isDark ? "#000000" : "#ffffff"}
+              />
+            </div>
+
+            <div className="relative z-10 w-full">
+              <h1 className="font-['Outfit',_sans-serif] text-4xl sm:text-5xl md:text-7xl font-black mb-4 md:mb-6 tracking-tighter text-slate-900 dark:text-white leading-[1.1] md:leading-[0.95]">
+                <span className="dark:text-white">Documenting</span> <br />
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 drop-shadow-sm">
+                  your legacy.
+                </span>
+              </h1>
+
+              <p className="text-sm md:text-lg max-w-xl mx-auto mb-8 md:mb-10 leading-relaxed text-slate-600 dark:text-gray-300 font-medium font-['Inter',_sans-serif] px-2 md:px-0">
+                A minimalist, real-time collaborative workspace designed for
+                high-performance storytelling and digital archiving.
+              </p>
+
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 md:gap-6">
+                <button
+                  onClick={() => navigate("/login")}
+                  className="group relative px-6 py-2.5 !rounded-xl !border-[1.5px] 
+                  bg-gradient-to-r from-blue-600 to-purple-600 
+                  dark:from-blue-500 dark:to-purple-500
+                  !border-white/20 dark:!border-white/10
+                  text-white text-[11px] font-bold uppercase tracking-tight
+                  shadow-lg shadow-blue-500/20 hover:shadow-purple-500/40
+                  hover:-translate-y-0.5 transition-all duration-300 active:scale-95 
+                  overflow-hidden w-full sm:w-auto font-['Inter',_sans-serif]"
+                >
+                  <div className="relative z-10 flex items-center justify-center gap-1.5 leading-none">
+                    <span className="inline-block">Start Creating</span>
+                    <i className="bi bi-arrow-right-short text-xl flex items-center transition-transform duration-300 group-hover:translate-x-1 group-hover:scale-110"></i>
+                  </div>
+                  <div className="absolute -inset-full top-0 block duration-500 transform -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover:animate-shine" />
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </section>
diff --git a/frontend/src/router/index.jsx b/frontend/src/router/index.jsx
index 2d08f01..500f981 100644
--- a/frontend/src/router/index.jsx
+++ b/frontend/src/router/index.jsx
@@ -20,7 +20,10 @@ const router = createBrowserRouter([
         children: [
           { path: "/home", element: <HomeFeed /> },
           { path: "/create", element: <CreatePost /> },
-          { path: "/edit/:id", element: <CreatePost  /> }]
+          { path: "/create/:id", element: <CreatePost /> },
+          { path: "/edit/:id", element: <CreatePost /> },
+          { path: "/blog/:id", element: <CreatePost /> }
+        ]
       }
     ]
   }
diff --git a/frontend/src/utils/blogRenderer.js b/frontend/src/utils/blogRenderer.js
index 21efb88..daf496a 100644
--- a/frontend/src/utils/blogRenderer.js
+++ b/frontend/src/utils/blogRenderer.js
@@ -386,27 +386,6 @@ function renderBlogPost(blog, theme) {
     const article = document.createElement('article');
     Object.assign(article.style, theme.article);
 
-    // Title
-    const title = document.createElement('h1');
-    title.innerText = blog.title;
-    Object.assign(title.style, theme.title);
-    article.append(title);
-
-    // Date
-    const dateOfCreation = new Date(blog.createdAt);
-    const dateString = dateOfCreation.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-    const timeString = dateOfCreation.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-
-    const publishedOn = document.createElement('h5');
-    publishedOn.innerText = `Published on ${dateString} • ${timeString}`;
-    Object.assign(publishedOn.style, theme.publlishedOn);
-    article.append(publishedOn);
-
-    // Separator
-    const hr = document.createElement('hr');
-    Object.assign(hr.style, theme.hr);
-    article.append(hr);
-
     // --- GRID LAYOUT CONTAINER ---
     const gridDiv = document.createElement('div');
     gridDiv.style.display = 'grid';
diff --git a/frontend/vercel.json b/frontend/vercel.json
new file mode 100644
index 0000000..1a3cefd
--- /dev/null
+++ b/frontend/vercel.json
@@ -0,0 +1,25 @@
+{
+    "cleanUrls": true,
+    "trailingSlash": false,
+    "rewrites": [
+        {
+            "source": "/(.*)",
+            "destination": "/index.html"
+        }
+    ],
+    "headers": [
+        {
+            "source": "/(.*)",
+            "headers": [
+                {
+                    "key": "Cross-Origin-Opener-Policy",
+                    "value": "same-origin-allow-popups"
+                },
+                {
+                    "key": "Referrer-Policy",
+                    "value": "strict-origin-when-cross-origin"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index af60f44..297a1ac 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -4,5 +4,25 @@ import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(),tailwindcss()],
+  plugins: [react(), tailwindcss()],
+  base: '/',
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
+  server: {
+    host: true,
+    port: 5173,
+    strictPort: false,
+    allowedHosts: true,
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+    },
+  },
 })
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..1b831a9
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,10 @@
+{
+    "cleanUrls": true,
+    "trailingSlash": false,
+    "rewrites": [
+        {
+            "source": "/(.*)",
+            "destination": "/index.html"
+        }
+    ]
+}
\ No newline at end of file