diff --git a/app/api/chat/messages/[id]/route.ts b/app/api/chat/messages/[id]/route.ts
new file mode 100644
index 0000000..6b71b58
--- /dev/null
+++ b/app/api/chat/messages/[id]/route.ts
@@ -0,0 +1,228 @@
+import { NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth/next'
+import { authOptions } from '@/app/api/auth/[...nextauth]/options'
+import dbConnect from '@/lib/dbConnect'
+import Message from '@/model/Message'
+import { chatEmitter } from '@/lib/eventEmitter'
+
+import mongoose from 'mongoose'
+
+/**
+ * PATCH /api/chat/messages/:id
+ *
+ * Authorises and modifies the text content of an existing chat message.
+ * Only the original author (matched via session user ID) may edit a message,
+ * and the message must not have been soft-deleted.
+ *
+ * **Auth gates:**
+ * 1. User must be logged in with a valid `session.user.id`.
+ * 2. User's email must belong to the `@iiitl.ac.in` domain.
+ * 3. `session.user.id` must match the message's `sender` field (ownership).
+ *
+ * **Request body:**
+ * - `content` (string, required) — The replacement text for the message.
+ *
+ * **Side effect:** On success, an `UPDATE_MESSAGE` event is emitted on the
+ * shared `chatEmitter` to push the edit to all connected SSE clients.
+ *
+ * @param req    - The incoming Request containing `{ content }` JSON.
+ * @param params - Next.js dynamic route params (Promise-based in App Router).
+ * @returns A `NextResponse` with the fully populated updated message (200),
+ *          or an appropriate error response (400/401/403/404/500).
+ */
+export async function PATCH(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const session = await getServerSession(authOptions)
+
+    /* ── Auth gate: must be logged in with a valid user ID ── */
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    /* ── Domain gate: only @iiitl.ac.in emails may write (edit/delete) ── */
+    if (!session.user.email?.toLowerCase().endsWith('@iiitl.ac.in')) {
+      return NextResponse.json(
+        { error: 'Read-only: write access restricted to @iiitl.ac.in' },
+        { status: 403 }
+      )
+    }
+
+    const { id } = await params
+    if (!mongoose.Types.ObjectId.isValid(id)) {
+      return NextResponse.json({ error: 'Invalid message ID' }, { status: 400 })
+    }
+    const { content } = await req.json()
+
+    if (!content || !content.trim()) {
+      return NextResponse.json(
+        { error: 'Message content is required' },
+        { status: 400 }
+      )
+    }
+
+    await dbConnect()
+
+    /* ── Fetch the target message from the database ── */
+    const message = await Message.findById(id)
+    if (!message) {
+      return NextResponse.json({ error: 'Message not found' }, { status: 404 })
+    }
+
+    /* ── Ownership gate: only the original author may edit ── */
+    if (message.sender.toString() !== session.user.id) {
+      return NextResponse.json(
+        { error: 'You can only edit your own messages' },
+        { status: 403 }
+      )
+    }
+
+    /* ── Deleted messages are tombstones and cannot be resurrected ── */
+    if (message.isDeleted) {
+      return NextResponse.json(
+        { error: 'Cannot edit a deleted message' },
+        { status: 400 }
+      )
+    }
+
+    /* ── Apply the content update and mark as edited ── */
+    message.content = content.trim()
+    message.isEdited = true
+    await message.save()
+
+    /*
+     * Re-populate sender and replyTo so the emitted SSE payload and the
+     * HTTP response both contain display-ready data.
+     */
+    await message.populate('sender', 'name image email')
+    if (message.replyTo) {
+      await message.populate({
+        path: 'replyTo',
+        populate: { path: 'sender', select: 'name' },
+      })
+    }
+
+    /* Broadcast UPDATE_MESSAGE to all SSE clients via the shared emitter. */
+    chatEmitter.emit('chatUpdate', {
+      type: 'UPDATE_MESSAGE',
+      message: message,
+    })
+
+    return NextResponse.json(message, { status: 200 })
+  } catch (error) {
+    console.error('Error updating message:', error)
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    )
+  }
+}
+
+/**
+ * DELETE /api/chat/messages/:id
+ *
+ * Performs a soft delete on the specified message. The message content
+ * is replaced with a tombstone string (`🚫 This message was deleted.`)
+ * and the `isDeleted` flag is set to `true`. The document is **not**
+ * removed from the database so that reply chains referencing it
+ * continue to render correctly (showing "Deleted message" inline).
+ *
+ * **Auth gates:**
+ * 1. User must be logged in with a valid `session.user.id`.
+ * 2. User's email must belong to the `@iiitl.ac.in` domain.
+ * 3. User must be the original sender **or** have the `admin` role.
+ *
+ * **Side effect:** On success, a `DELETE_MESSAGE` event is emitted on
+ * the shared `chatEmitter` to push the deletion to all SSE clients.
+ *
+ * @param req    - The incoming Request (body is not used).
+ * @param params - Next.js dynamic route params providing the message ID.
+ * @returns A `NextResponse` with `{ success: true }` (200), or an
+ *          appropriate error response (400/401/403/404/500).
+ */
+export async function DELETE(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const session = await getServerSession(authOptions)
+
+    /* ── Auth gate: must be logged in with a valid user ID ── */
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    /* ── Domain gate: only @iiitl.ac.in emails may write (edit/delete) ── */
+    if (!session.user.email?.toLowerCase().endsWith('@iiitl.ac.in')) {
+      return NextResponse.json(
+        { error: 'Read-only: write access restricted to @iiitl.ac.in' },
+        { status: 403 }
+      )
+    }
+
+    const { id } = await params
+    if (!mongoose.Types.ObjectId.isValid(id)) {
+      return NextResponse.json({ error: 'Invalid message ID' }, { status: 400 })
+    }
+
+    await dbConnect()
+
+    /* ── Fetch the target message from the database ── */
+    const message = await Message.findById(id)
+    if (!message) {
+      return NextResponse.json({ error: 'Message not found' }, { status: 404 })
+    }
+
+    /*
+     * Ownership / admin gate: the user must either be the original sender
+     * or hold the 'admin' role. This allows moderators to clean up
+     * inappropriate content while normal users can only delete their own.
+     */
+    if (
+      message.sender.toString() !== session.user.id &&
+      !session.user.roles?.includes('admin')
+    ) {
+      return NextResponse.json(
+        { error: 'You can only delete your own messages' },
+        { status: 403 }
+      )
+    }
+
+    /*
+     * Soft delete: replace the content with a tombstone indicator and set
+     * the isDeleted flag. The document stays in the database so reply
+     * chains can still reference it (displaying "Deleted message").
+     */
+    message.content = '🚫 This message was deleted.'
+    message.isDeleted = true
+    await message.save()
+
+    /*
+     * Re-populate sender and replyTo so the emitted SSE payload
+     * contains display-ready data for connected clients.
+     */
+    await message.populate('sender', 'name image email')
+    if (message.replyTo) {
+      await message.populate({
+        path: 'replyTo',
+        populate: { path: 'sender', select: 'name' },
+      })
+    }
+
+    /* Broadcast DELETE_MESSAGE to all SSE clients via the shared emitter. */
+    chatEmitter.emit('chatUpdate', {
+      type: 'DELETE_MESSAGE',
+      message: message,
+    })
+
+    return NextResponse.json({ success: true }, { status: 200 })
+  } catch (error) {
+    console.error('Error deleting message:', error)
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    )
+  }
+}
diff --git a/app/api/chat/messages/route.ts b/app/api/chat/messages/route.ts
new file mode 100644
index 0000000..bbd1ee5
--- /dev/null
+++ b/app/api/chat/messages/route.ts
@@ -0,0 +1,160 @@
+import { NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth/next'
+import { authOptions } from '@/app/api/auth/[...nextauth]/options'
+import dbConnect from '@/lib/dbConnect'
+import Message from '@/model/Message'
+import { chatEmitter } from '@/lib/eventEmitter'
+
+import mongoose from 'mongoose'
+
+/**
+ * Force this route to be dynamically rendered on every request.
+ * Chat message endpoints must never serve stale cached data.
+ */
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/chat/messages
+ *
+ * Retrieves the latest 100 chat messages from the database, sorted in
+ * chronological order (oldest first). Each message's `sender` field is
+ * populated with the user's `name`, `image`, and `email`. For reply
+ * chains, the `replyTo` field is also populated recursively to include
+ * the referenced message and its sender's `name`.
+ *
+ * This endpoint is publicly accessible (no auth required) so that
+ * unauthenticated or non-IIITL users can still view the chat in
+ * read-only mode.
+ *
+ * @returns A `NextResponse` containing a JSON array of `Message` documents
+ *          ordered chronologically (oldest → newest), or a 500 error on failure.
+ */
+export async function GET() {
+  try {
+    await dbConnect()
+
+    /*
+     * Fetch latest 100 messages in descending timestamp order, then
+     * reverse the result to present oldest-first (natural chat order).
+     * Populate sender fields for display and replyTo for thread context.
+     */
+    const messages = await Message.find()
+      .sort({ timestamp: -1 })
+      .limit(100)
+      .populate('sender', 'name image email') // Populate sender with limited fields
+      .populate({
+        path: 'replyTo',
+        populate: { path: 'sender', select: 'name' }, // Populate the sender of the replied message
+      })
+      .exec()
+
+    // Return messages in chronological order (oldest first)
+    return NextResponse.json(messages.reverse(), { status: 200 })
+  } catch (error) {
+    console.error('Error fetching messages:', error)
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    )
+  }
+}
+
+/**
+ * POST /api/chat/messages
+ *
+ * Validates, authorizes, and persists a brand-new chat message in the
+ * database. Only authenticated users with an `@iiitl.ac.in` email domain
+ * are permitted to send messages; all others receive a 403 response.
+ *
+ * **Request body:**
+ * - `content` (string, required) — The text body of the message.
+ * - `replyTo` (string, optional) — A valid MongoDB ObjectId referencing
+ *   the parent message when this message is a reply.
+ *
+ * **Side effect:** On successful creation, a `NEW_MESSAGE` event is
+ * emitted on the shared `chatEmitter` so that all connected SSE clients
+ * receive the new message in real time without requiring a page refresh.
+ *
+ * @param req - The incoming Request containing the JSON payload.
+ * @returns A `NextResponse` with the created (and populated) message
+ *          document (status 201), or an appropriate error response.
+ */
+export async function POST(req: Request) {
+  try {
+    const session = await getServerSession(authOptions)
+
+    /* ── Auth gate: require both email (for domain check) and id (for sender reference) ── */
+    if (!session?.user?.email || !session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    /* ── Domain gate: only @iiitl.ac.in emails can send messages ── */
+    if (!session.user.email.toLowerCase().endsWith('@iiitl.ac.in')) {
+      return NextResponse.json(
+        { error: 'Only IIITL students can send messages' },
+        { status: 403 }
+      )
+    }
+
+    const { content, replyTo } = await req.json()
+
+    /* ── Input validation: content must be a non-empty trimmed string ── */
+    if (!content || !content.trim()) {
+      return NextResponse.json(
+        { error: 'Message content is required' },
+        { status: 400 }
+      )
+    }
+
+    /*
+     * Validate replyTo if provided — must be a valid ObjectId to prevent
+     * injection of malformed references that would cause Mongoose cast errors.
+     */
+    if (replyTo && !mongoose.Types.ObjectId.isValid(replyTo)) {
+      return NextResponse.json(
+        { error: 'Invalid replyTo message ID' },
+        { status: 400 }
+      )
+    }
+
+    await dbConnect()
+
+    /* ── Create the new message document with the authenticated sender ── */
+    const newMessage = await Message.create({
+      sender: session.user.id,
+      email: session.user.email,
+      content: content.trim(),
+      replyTo: replyTo || null,
+    })
+
+    /*
+     * Populate sender and replyTo fields before returning so the response
+     * is immediately usable by the client without a second fetch.
+     */
+    await newMessage.populate('sender', 'name image email')
+    if (newMessage.replyTo) {
+      await newMessage.populate({
+        path: 'replyTo',
+        populate: { path: 'sender', select: 'name' },
+      })
+    }
+
+    /*
+     * Emit a NEW_MESSAGE event to notify all SSE subscribers in real time.
+     * The SSE stream handler in /api/chat/stream forwards this to browser clients.
+     */
+    chatEmitter.emit('chatUpdate', {
+      type: 'NEW_MESSAGE',
+      message: newMessage,
+    })
+
+    return NextResponse.json(newMessage, { status: 201 })
+  } catch (error) {
+    console.error('Error creating message:', error)
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    )
+  }
+}
+
diff --git a/app/api/chat/stream/route.ts b/app/api/chat/stream/route.ts
new file mode 100644
index 0000000..23ca4ff
--- /dev/null
+++ b/app/api/chat/stream/route.ts
@@ -0,0 +1,137 @@
+import { chatEmitter } from '@/lib/eventEmitter'
+import { NextRequest, NextResponse } from 'next/server'
+
+/**
+ * Payload shape emitted by the chat event system and streamed to clients via SSE.
+ *
+ * The `type` field distinguishes between lifecycle events and mutation events:
+ * - `CONNECTED`      – Sent once when the SSE connection is first established.
+ * - `HEARTBEAT`      – Sent every 30 seconds to prevent proxy/load-balancer timeouts.
+ * - `NEW_MESSAGE`    – A brand-new message was created in the chat.
+ * - `UPDATE_MESSAGE` – An existing message's content was edited by its author.
+ * - `DELETE_MESSAGE` – A message was soft-deleted (content replaced, isDeleted flag set).
+ *
+ * `message` carries the fully populated, serialised Mongoose document when the
+ * event involves a mutation (NEW_MESSAGE, UPDATE_MESSAGE, DELETE_MESSAGE).
+ * It is omitted for lifecycle-only events (CONNECTED, HEARTBEAT).
+ *
+ * **Type consistency note:** The emitter in `app/api/chat/messages/[id]/route.ts`
+ * emits `'UPDATE_MESSAGE'` and the consumer in `hooks/useChatMessages.ts` listens
+ * for `'UPDATE_MESSAGE'`. This union must stay in sync with both sides.
+ */
+interface ChatEventPayload {
+  type:
+    | 'CONNECTED'
+    | 'HEARTBEAT'
+    | 'NEW_MESSAGE'
+    | 'UPDATE_MESSAGE'
+    | 'DELETE_MESSAGE'
+  message?: Record<string, unknown>
+}
+
+/**
+ * Force this route to be dynamically rendered on every request.
+ * SSE endpoints must never be statically cached by Next.js.
+ */
+export const dynamic = 'force-dynamic'
+
+/**
+ * GET /api/chat/stream
+ *
+ * Initialises and manages a Server-Sent Events (SSE) stream for real-time
+ * chat updates. Each connected browser client receives a dedicated stream
+ * that forwards mutation events (new messages, edits, deletions) as they
+ * occur via the in-process `chatEmitter`.
+ *
+ * **Architecture note:** The current implementation uses a process-local
+ * `EventEmitter` (`chatEmitter`) as the broadcast layer. This works
+ * correctly when the application runs as a single Node.js process (e.g.,
+ * Vercel serverless functions sharing the same runtime, or a single
+ * `next start` instance). For multi-instance deployments behind a load
+ * balancer, this should be replaced with a shared pub/sub layer such as
+ * Redis Pub/Sub, Pusher, or Postgres LISTEN/NOTIFY to ensure events
+ * propagate across all server instances.
+ *
+ * @param req - The incoming NextRequest; its `signal` is used to detect
+ *              client disconnection and trigger cleanup.
+ * @returns A streaming NextResponse encoded as `text/event-stream`.
+ */
+export async function GET(req: NextRequest) {
+  /*
+   * TransformStream provides a ReadableStream/WritableStream pair.
+   * The writable side is used internally to push SSE frames; the readable
+   * side is returned to the client as the response body.
+   */
+  const { readable, writable } = new TransformStream()
+  const writer = writable.getWriter()
+  const encoder = new TextEncoder()
+
+  /**
+   * Serialises `data` as a JSON-encoded SSE frame (`data: ...\n\n`) and
+   * pushes it to the writable side of the transform stream.
+   *
+   * Write errors (e.g., the client has already disconnected before the
+   * abort signal fires) are caught and logged to prevent unhandled
+   * rejections from crashing the request handler.
+   *
+   * @param data - The structured event payload to send to the client.
+   */
+  const sendEvent = async (data: ChatEventPayload) => {
+    try {
+      await writer.write(encoder.encode(`data: ${JSON.stringify(data)}\n\n`))
+    } catch (writeErr) {
+      console.error('SSE write error:', writeErr)
+    }
+  }
+
+  /**
+   * Listener callback wired to the shared `chatEmitter` on the
+   * `'chatUpdate'` channel. Forwards every received event (new message,
+   * edit, or deletion) directly to this SSE client without filtering.
+   *
+   * @param data - The chat event payload emitted by a mutation handler.
+   */
+  const onChatUpdate = (data: ChatEventPayload) => {
+    sendEvent(data)
+  }
+
+  // Subscribe this client's listener to the shared in-process event bus.
+  chatEmitter.on('chatUpdate', onChatUpdate)
+
+  // Immediately send a CONNECTED event so the client knows the stream is live.
+  sendEvent({ type: 'CONNECTED' })
+
+  /*
+   * Heartbeat interval (30 s) keeps the connection alive through proxies
+   * and load balancers that may drop idle connections. The HEARTBEAT event
+   * type is ignored by the client-side SSE handler in useChatMessages.
+   */
+  const heartbeatInterval = setInterval(() => {
+    sendEvent({ type: 'HEARTBEAT' })
+  }, 30000)
+
+  /*
+   * Cleanup handler: when the client disconnects (tab closed, navigation,
+   * network loss), the request's AbortSignal fires. We must:
+   * 1. Stop the heartbeat timer to prevent memory leaks.
+   * 2. Remove the listener from chatEmitter to avoid dangling references.
+   * 3. Close the writer to finalise the stream.
+   */
+  req.signal.addEventListener('abort', () => {
+    clearInterval(heartbeatInterval)
+    chatEmitter.off('chatUpdate', onChatUpdate)
+    try {
+      writer.close()
+    } catch (_closeErr) {
+      /* Writer may already be closed by the runtime; safe to ignore. */
+    }
+  })
+
+  return new NextResponse(readable, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+    },
+  })
+}
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
index 969e275..d472efa 100644
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -1,69 +1,192 @@
 'use client'
-import Message from '@/components/message'
-import Sidebar from '@/components/sidebar'
+
+import React, { useEffect, useRef } from 'react'
+import { MessageCircle, Send, XCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import sample_message from '@/data/sample_message'
-import React, { useState } from 'react'
+import ChatMessage from '@/components/chat/ChatMessage'
+import { useChatMessages } from '@/hooks/useChatMessages'
+import { useSession } from 'next-auth/react'
 
-interface Participant {
-  name: string
-  avatar: string
-}
+/**
+ * Full-page UI rendering component for the IIITL General Chat.
+ *
+ * This page component serves as a dedicated, immersive chat view that
+ * occupies the main content area of the layout. It uses the shared
+ * `useChatMessages` hook with `isOpen: true` (always active) to maintain
+ * a persistent SSE connection and display real-time message updates.
+ *
+ * When the user navigates to `/chat`, the `ChatWidget` component in the
+ * root layout detects the pathname and returns `null`, ensuring only this
+ * component manages the SSE connection and message state — preventing
+ * duplicate API calls and unsynchronised message lists.
+ *
+ * @returns A full-page chat layout with message list, input area, and
+ *          contextual reply/edit banners.
+ */
+export default function ChatPage() {
+  const { data: session } = useSession()
+  const {
+    messages,
+    inputText,
+    setInputText,
+    isLoading,
+    error,
+    editingMessage,
+    replyingTo,
+    currentUserId,
+    isIIITLUser,
+    handleSend,
+    handleDeleteMessage,
+    startReply,
+    startEdit,
+    cancelAction,
+    inputRef,
+  } = useChatMessages({ isOpen: true })
 
-interface MessageType {
-  text: string
-  sender: string
-  senderAvatar: string
-  timestamp: string
-}
-export default function Page() {
-  const [message, setMessage] = useState<string>('')
-  const [messages, setMessages] = useState<MessageType[]>(
-    sample_message.user_message
-  )
-  const [participants] = useState<Participant[]>(sample_message.participants)
+  /** Ref to a sentinel div at the bottom of the message list for auto-scrolling. */
+  const messagesEndRef = useRef<HTMLDivElement>(null)
 
-  const handleSendMessage = () => {
-    if (message.trim()) {
-      const newMessage: MessageType = {
-        text: message,
-        sender: 'User1',
-        senderAvatar:
-          'https://th.bing.com/th/id/OIP.7SSen49kIgXR90Ii5VLYUAHaJQ?w=136&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
-        timestamp: new Date().toLocaleTimeString(),
-      }
-      setMessages([...messages, newMessage])
-      setMessage('')
+  /**
+   * Auto-scroll effect: smoothly scrolls the message list to the bottom
+   * whenever new messages arrive. Scroll is suppressed during edit mode
+   * to preserve the user's viewport position while they modify a message.
+   */
+  useEffect(() => {
+    if (!editingMessage && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [messages, editingMessage])
+
+  /**
+   * Keyboard handler for the chat input: submits the message on Enter
+   * (without Shift held) to match standard chat application UX patterns.
+   *
+   * @param e - The keyboard event from the input element.
+   */
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
     }
   }
 
   return (
-    <div className="flex flex-col h-screen">
-      <div className="flex flex-1">
-        <Sidebar participants={participants} />
-        <div className="flex-1 flex flex-col p-6">
-          <div className="flex-1 overflow-y-auto">
-            {messages.map((msg, index) => (
-              <Message key={index} message={msg} user="User1" />
-            ))}
+    <div className="container mx-auto px-4 py-8 flex flex-col h-[calc(100vh-80px)] max-h-[800px]">
+      <div className="bg-card border rounded-2xl shadow-xl flex flex-col h-full overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b bg-muted/30">
+          <div className="flex items-center gap-3">
+            <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
+            <h1 className="font-bold text-2xl">IIITL General Chat</h1>
           </div>
-          <div className="flex mt-4">
-            <input
-              type="text"
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              placeholder="Type a message..."
-              className="flex-1 p-3 border border-muted-foreground rounded-lg mr-3"
-            />
-            <Button
-              onClick={handleSendMessage}
-              variant={'secondary'}
-              className="border border-gray-300 hover:bg-blue-600 hover:text-white"
-            >
-              Send
-            </Button>
+          <div className="text-sm text-muted-foreground whitespace-nowrap">
+            Real-time Community
           </div>
         </div>
+
+        {/* Message Area */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8 bg-muted/10">
+          {messages.length === 0 ? (
+            <div className="h-full flex flex-col justify-center items-center text-muted-foreground">
+              <div className="w-20 h-20 bg-muted rounded-full flex items-center justify-center mb-4">
+                <MessageCircle size={40} className="opacity-30" />
+              </div>
+              <p>No messages yet. Be the first to say hi!</p>
+            </div>
+          ) : (
+            <div className="flex flex-col space-y-2 max-w-4xl mx-auto w-full">
+              {messages.map((msg) => (
+                <ChatMessage
+                  key={msg._id}
+                  message={msg}
+                  currentUserId={currentUserId}
+                  onReply={startReply}
+                  onEdit={startEdit}
+                  onDelete={handleDeleteMessage}
+                />
+              ))}
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+
+        {/* Auth / Read-only warning */}
+        {!isIIITLUser && (
+          <div className="bg-destructive/10 text-destructive text-sm font-medium py-3 px-4 text-center border-t border-b">
+            Read-only mode. You need an @iiitl.ac.in email to send messages in
+            the group chat.
+          </div>
+        )}
+
+        {/* Input Area */}
+        {session && isIIITLUser && (
+          <div className="border-t bg-card flex flex-col max-w-4xl mx-auto w-full">
+            {/* Status Banner for Replying/Editing */}
+            {(replyingTo || editingMessage) && (
+              <div className="p-3 bg-primary/10 border-b flex justify-between items-center text-sm px-6">
+                {replyingTo && (
+                  <span className="font-medium text-primary">
+                    Replying to{' '}
+                    {typeof replyingTo.sender === 'object' &&
+                    replyingTo.sender !== null
+                      ? (replyingTo.sender as { name: string }).name
+                      : 'someone'}
+                  </span>
+                )}
+                {editingMessage && (
+                  <span className="font-medium text-primary">
+                    Editing message
+                  </span>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 rounded-full hover:bg-primary/20"
+                  onClick={cancelAction}
+                  aria-label={editingMessage ? 'Cancel edit' : 'Cancel reply'}
+                >
+                  <XCircle size={16} />
+                </Button>
+              </div>
+            )}
+
+            <div className="p-4 md:p-6 flex gap-3 items-center relative">
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder={
+                  editingMessage
+                    ? 'Edit your message...'
+                    : 'Type a message to the group...'
+                }
+                aria-label={
+                  editingMessage
+                    ? 'Edit your message'
+                    : 'Type a message to the group'
+                }
+                value={inputText}
+                onChange={(e) => setInputText(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="flex-1 bg-muted border border-transparent p-4 rounded-full outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 text-base transition-all"
+                disabled={isLoading}
+              />
+              <Button
+                onClick={handleSend}
+                disabled={isLoading || !inputText.trim()}
+                aria-disabled={isLoading || !inputText.trim()}
+                aria-label="Send message"
+                className="rounded-full h-12 w-12 md:h-14 md:w-14 p-0 flex justify-center items-center shadow-md hover:shadow-lg hover:-translate-y-1 transition-all"
+              >
+                <Send size={22} className={isLoading ? 'opacity-50' : 'ml-1'} />
+              </Button>
+            </div>
+            {error && (
+              <div className="px-6 pb-4 text-sm text-destructive text-center font-medium">
+                {error}
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/app/layout.jsx b/app/layout.jsx
index d03c327..3060ef1 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -5,6 +5,7 @@ import Header from '@/components/header'
 import AuthProvider from '@/context/session-provider'
 import { Analytics } from '@vercel/analytics/next'
 import Script from 'next/script'
+import ChatWidget from '@/components/chat/ChatWidget'
 import { ThemeProvider } from '@/components/theme-provider'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -27,6 +28,7 @@ export default function RootLayout({ children }) {
           <Header />
           {children}
           <Footer />
+          <ChatWidget />
           <Analytics />
         </AuthProvider>
         </ThemeProvider>
diff --git a/components/chat/ChatMessage.tsx b/components/chat/ChatMessage.tsx
new file mode 100644
index 0000000..d040f82
--- /dev/null
+++ b/components/chat/ChatMessage.tsx
@@ -0,0 +1,330 @@
+import React, { useState } from 'react'
+import Image from 'next/image'
+import { MoreHorizontal, Edit2, Reply, Trash2 } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+
+/**
+ * Represents the populated sender metadata for a chat message.
+ *
+ * When the `sender` field of a Mongoose Message document is populated via
+ * `.populate('sender', 'name image email')`, it resolves to this shape
+ * instead of a raw ObjectId string.
+ *
+ * @property _id    - The MongoDB ObjectId of the User document.
+ * @property name   - The display name of the sender.
+ * @property image  - Optional avatar URL sourced from the user's profile.
+ * @property email  - The sender's email address (used for domain checks).
+ */
+export interface Sender {
+  _id: string
+  name: string
+  image?: string
+  email: string
+}
+
+/**
+ * Represents a single broadcasted chat message object as received from the
+ * API or via an SSE event.
+ *
+ * @property _id       - The MongoDB ObjectId string uniquely identifying this message.
+ * @property content   - The text body of the message (replaced on soft-delete).
+ * @property sender    - Either a populated `Sender` object or a raw ObjectId string
+ *                        when population has not been performed.
+ * @property isEdited  - Flag indicating whether the message content has been
+ *                        modified after initial creation.
+ * @property isDeleted - Flag indicating a soft-delete; content is replaced with
+ *                        a tombstone string and the message is rendered as italic/faded.
+ * @property replyTo   - Optionally populated parent message when this message is
+ *                        a reply. Contains at least `_id`, `content`, and nested
+ *                        `sender` fields. `null` when the message is top-level.
+ * @property timestamp - ISO 8601 date string of when the message was created.
+ */
+export interface MessageData {
+  _id: string
+  content: string
+  sender: Sender | string // Populated or ID
+  isEdited: boolean
+  isDeleted: boolean
+  replyTo?: Record<string, unknown> | null
+  timestamp: string
+}
+
+/**
+ * Props accepted by the {@link ChatMessage} component.
+ *
+ * @property message        - The fully populated message data to render.
+ * @property currentUserId  - The authenticated user's ID; used to determine
+ *                             ownership for edit/delete actions and alignment.
+ * @property onReply        - Callback invoked when the user clicks "Reply";
+ *                             receives the target message so the parent can
+ *                             enter reply mode.
+ * @property onEdit         - Callback invoked when the user clicks "Edit";
+ *                             receives the target message so the parent can
+ *                             populate the input field with the existing content.
+ * @property onDelete       - Callback invoked when the user confirms deletion;
+ *                             receives the message ID to issue the DELETE request.
+ */
+interface ChatMessageProps {
+  message: MessageData
+  currentUserId: string | undefined
+  onReply: (message: MessageData) => void
+  onEdit: (message: MessageData) => void
+  onDelete: (messageId: string) => void
+}
+
+/**
+ * Renders a single chat message bubble with contextual action controls.
+ *
+ * Layout behaviour:
+ * - Messages from the current user (`isMe`) are right-aligned with a
+ *   primary-coloured bubble and no avatar.
+ * - Messages from other users are left-aligned with a muted bubble,
+ *   an avatar, and a sender name label.
+ *
+ * Action menu items:
+ * - **Reply** – Available on all non-deleted messages. Disabled/hidden when
+ *   the message has been soft-deleted to prevent replying to tombstones.
+ * - **Edit** – Available only to the message owner and only when the message
+ *   has not been soft-deleted.
+ * - **Delete** – Available only to the message owner and only when the
+ *   message has not been soft-deleted. Opens a confirmation modal.
+ *
+ * Soft-deleted messages are rendered with reduced opacity and italic text,
+ * and their action menu is limited to prevent meaningless interactions.
+ *
+ * @param props - See {@link ChatMessageProps} for property descriptions.
+ * @returns A React element representing the message bubble + action overlay.
+ */
+export default function ChatMessage({
+  message,
+  currentUserId,
+  onReply,
+  onEdit,
+  onDelete,
+}: ChatMessageProps) {
+  /*
+   * Resolve the sender to a typed Sender object if the field has been
+   * populated. Falls back to `null` when the sender is still a raw
+   * ObjectId string (should not happen in normal flow).
+   */
+  const sender =
+    typeof message.sender === 'object' ? (message.sender as Sender) : null
+
+  /** Whether the current authenticated user is the author of this message. */
+  const isMe = sender?._id === currentUserId
+
+  /** Local loading state for the async delete operation. */
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  /** Controls visibility of the delete confirmation modal overlay. */
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+
+  /**
+   * Opens the delete confirmation modal. Called when the user clicks the
+   * "Delete" option in the dropdown menu.
+   */
+  const handleDeleteClick = () => {
+    setShowDeleteModal(true)
+  }
+
+  /**
+   * Executes the soft-delete mutation after the user confirms in the modal.
+   * Sets `isDeleting` to disable the button during the async operation and
+   * dismisses the modal on success.
+   */
+  const confirmDelete = async () => {
+    setIsDeleting(true)
+    try {
+      await onDelete(message._id)
+      setShowDeleteModal(false)
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  /**
+   * Converts an ISO 8601 date string to a localised time display
+   * (e.g., "02:45 PM"). Returns an empty string if the date is invalid
+   * to avoid rendering "Invalid Date" in the UI.
+   *
+   * @param dateString - The raw ISO timestamp string from the message.
+   * @returns A formatted time string, or empty string on failure.
+   */
+  const formatTime = (dateString: string) => {
+    try {
+      const date = new Date(dateString)
+      // Guard against invalid date objects (e.g. malformed strings)
+      if (isNaN(date.getTime())) return ''
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    } catch {
+      return ''
+    }
+  }
+
+  return (
+    <>
+      {/* Delete Confirmation Modal — rendered as a fixed overlay with backdrop blur */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <div className="bg-card text-card-foreground p-6 rounded-xl shadow-xl w-[90%] max-w-md border animate-in fade-in zoom-in-95 duration-200">
+            <h3 className="text-lg font-semibold mb-2">Delete Message</h3>
+            <p className="text-muted-foreground mb-6">
+              Are you sure you want to delete this message? This action cannot
+              be undone.
+            </p>
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="outline"
+                onClick={() => setShowDeleteModal(false)}
+                disabled={isDeleting}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={confirmDelete}
+                disabled={isDeleting}
+              >
+                {isDeleting ? 'Deleting...' : 'Delete'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Message row — flex-row-reverse for own messages to right-align */}
+      <div
+        className={`flex w-full mb-4 group ${isMe ? 'flex-row-reverse' : 'flex-row'} items-end gap-2`}
+      >
+        {/* Avatar — only shown for messages from other users */}
+        {!isMe && (
+          <div className="flex-shrink-0 mb-1">
+            {sender?.image ? (
+              <Image
+                src={sender.image}
+                alt={sender.name || 'User'}
+                width={32}
+                height={32}
+                className="w-8 h-8 rounded-full border border-border/50 object-cover"
+              />
+            ) : (
+              /* Fallback avatar: first character of name on a coloured circle */
+              <div className="w-8 h-8 rounded-full bg-primary/20 text-primary flex items-center justify-center font-bold text-xs uppercase">
+                {sender?.name?.charAt(0) || '?'}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Message Content Container */}
+        <div
+          className={`flex flex-col relative max-w-[75%] ${isMe ? 'items-end' : 'items-start'}`}
+        >
+          {/* Sender name label — only displayed for other users' messages */}
+          {!isMe && (
+            <span className="text-xs text-muted-foreground ml-1 mb-1 font-medium">
+              {sender?.name}
+            </span>
+          )}
+
+          {/* Reply Context — shows the parent message snippet when this is a reply */}
+          {message.replyTo && (
+            <div
+              className={`text-xs p-2 rounded-t-lg mb-[-4px] z-0 opacity-80 mt-1 border-l-2 border-r-2 ${isMe ? 'border-r bg-primary/10 text-primary border-primary/40 rounded-tr-lg pr-3 pl-2' : 'border-l bg-muted text-muted-foreground border-muted-foreground/40 rounded-tl-lg pl-3 pr-2'}`}
+            >
+              <div className="font-semibold text-[10px] mb-1">
+                Replying to{' '}
+                {typeof message.replyTo.sender === 'object' &&
+                message.replyTo.sender !== null
+                  ? (message.replyTo.sender as Sender).name
+                  : 'someone'}
+              </div>
+              <div className="truncate opacity-75 max-w-[150px]">
+                {typeof message.replyTo.content === 'string' &&
+                message.replyTo.content === '🚫 This message was deleted.'
+                  ? 'Deleted message'
+                  : typeof message.replyTo.content === 'string'
+                    ? message.replyTo.content
+                    : ''}
+              </div>
+            </div>
+          )}
+
+          {/* Message Bubble + Hover Action Controls */}
+          <div
+            className={`flex items-center gap-1 relative z-10 ${isMe ? 'flex-row-reverse' : 'flex-row'}`}
+          >
+            {/* The actual message text bubble */}
+            <div
+              className={`p-3 rounded-2xl shadow-sm text-sm break-words relative w-full ${isMe ? 'bg-primary text-primary-foreground rounded-br-sm' : 'bg-muted rounded-bl-sm border border-border/40 text-foreground'} ${message.isDeleted ? 'opacity-60 italic' : ''}`}
+            >
+              {message.content}
+            </div>
+
+            {/*
+             * Quick Actions dropdown — only visible on hover via opacity transition.
+             * The entire dropdown is hidden for deleted messages since no meaningful
+             * actions (reply, edit, delete) apply to a tombstone message.
+             */}
+            {!message.isDeleted && (
+              <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center shrink-0 px-1 gap-1">
+                <DropdownMenu>
+                  <DropdownMenuTrigger className="p-1 rounded-full hover:bg-muted text-muted-foreground outline-none">
+                    <MoreHorizontal size={16} />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align={isMe ? 'end' : 'start'}
+                    side="top"
+                    onCloseAutoFocus={(e) => e.preventDefault()}
+                  >
+                    {/* Reply — available to all users on non-deleted messages */}
+                    <DropdownMenuItem onClick={() => onReply(message)}>
+                      <Reply className="mr-2 h-4 w-4" />
+                      <span>Reply</span>
+                    </DropdownMenuItem>
+
+                    {/* Edit & Delete — only available to the message author */}
+                    {isMe && (
+                      <>
+                        <DropdownMenuItem onClick={() => onEdit(message)}>
+                          <Edit2 className="mr-2 h-4 w-4" />
+                          <span>Edit</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={handleDeleteClick}
+                          className="text-destructive focus:text-destructive focus:bg-destructive/10"
+                          disabled={isDeleting}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          <span>Delete</span>
+                        </DropdownMenuItem>
+                      </>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
+          </div>
+
+          {/* Footer Info (Timestamp & Edited indicator) */}
+          <div className="flex items-center gap-1 mt-1 px-1">
+            {message.isEdited && !message.isDeleted && (
+              <span className="text-[10px] text-muted-foreground/60">
+                (edited)
+              </span>
+            )}
+            <span className="text-[10px] text-muted-foreground/60">
+              {formatTime(message.timestamp)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/components/chat/ChatWidget.tsx b/components/chat/ChatWidget.tsx
new file mode 100644
index 0000000..4f8ab9a
--- /dev/null
+++ b/components/chat/ChatWidget.tsx
@@ -0,0 +1,247 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { useSession } from 'next-auth/react'
+import { usePathname } from 'next/navigation'
+import { MessageCircle, X, Send, XCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import ChatMessage from './ChatMessage'
+import { useChatMessages } from '@/hooks/useChatMessages'
+
+/**
+ * Floating drawer UI rendering component for the global IIITL hub chat.
+ *
+ * This component is mounted in the root layout (`app/layout.jsx`) and is
+ * therefore present on every page. To avoid duplicate API polling when the
+ * user navigates to the full-page chat (`/chat`), this wrapper checks the
+ * current route via `usePathname()` and returns `null` when `pathname`
+ * equals `'/chat'`. This ensures only `ChatPage` polls and renders on
+ * that route, preventing duplicated SSE connections and unsynchronised state.
+ *
+ * When visible, it renders `ChatWidgetInner` which provides the actual
+ * chat drawer UI with message display, input, and real-time updates.
+ *
+ * @returns The chat widget drawer, or `null` when on the `/chat` route.
+ */
+export default function ChatWidget() {
+  /** Current Next.js route path — used to conditionally hide the widget. */
+  const pathname = usePathname()
+
+  // Don't render (or poll / open SSE) on the dedicated full-page chat route.
+  if (pathname === '/chat') return null
+
+  return <ChatWidgetInner />
+}
+
+/**
+ * Inner implementation of the floating chat widget drawer.
+ *
+ * Separated from the outer `ChatWidget` so that the route check (`usePathname`)
+ * can short-circuit rendering before any hooks or effects execute, avoiding
+ * unnecessary SSE connections and API calls on the `/chat` page.
+ *
+ * **Features:**
+ * - Floating Action Button (FAB) to toggle the drawer open/closed.
+ * - Full-height side panel displaying message history, input area, and
+ *   status banners for reply/edit modes.
+ * - Mobile overlay backdrop to allow closing by tapping outside.
+ * - Read-only mode for non-IIITL users (no input area shown).
+ * - Auto-scroll to the latest message unless the user is in edit mode.
+ *
+ * @returns The complete chat drawer UI as a React element.
+ */
+function ChatWidgetInner() {
+  /** Session data from NextAuth; used to determine authentication status. */
+  const { data: session } = useSession()
+
+  /** Controls the open/closed state of the side-panel drawer. */
+  const [isOpen, setIsOpen] = useState(false)
+
+  /*
+   * Destructure all chat state and handlers from the shared hook.
+   * The `isOpen` flag is passed so the hook only activates SSE and
+   * fetching when the drawer is actually visible.
+   */
+  const {
+    messages,
+    inputText,
+    setInputText,
+    isLoading,
+    error,
+    editingMessage,
+    replyingTo,
+    currentUserId,
+    isIIITLUser,
+    handleSend,
+    handleDeleteMessage,
+    startReply,
+    startEdit,
+    cancelAction,
+    inputRef,
+  } = useChatMessages({ isOpen })
+
+  /** Ref to a sentinel div at the bottom of the message list for auto-scrolling. */
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  /**
+   * Auto-scroll effect: smoothly scrolls to the bottom of the message list
+   * when new messages arrive. Scroll is suppressed during edit mode so the
+   * user's viewport position is preserved while they modify a message.
+   */
+  useEffect(() => {
+    if (!editingMessage && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [messages, editingMessage])
+
+  /**
+   * Keyboard handler for the chat input field. Submits the message on
+   * Enter (without Shift) to mirror standard chat application behaviour.
+   *
+   * @param e - The keyboard event from the input element.
+   */
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  return (
+    <>
+      {/* Floating Action Button — only visible when the drawer is closed */}
+      {!isOpen && (
+        <Button
+          onClick={() => setIsOpen(true)}
+          className="fixed bottom-6 right-6 h-14 w-14 rounded-full shadow-xl bg-primary hover:bg-primary/90 text-primary-foreground z-50 transition-transform hover:scale-105"
+        >
+          <MessageCircle size={28} />
+        </Button>
+      )}
+
+      {/* Side Panel Drawer — slides in from the right edge */}
+      <div
+        className={`fixed top-0 right-0 h-full w-full sm:w-[400px] bg-background border-l shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}
+      >
+        {/* Header bar with live indicator and close button */}
+        <div className="flex items-center justify-between p-4 border-b bg-card text-card-foreground">
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <h2 className="font-semibold text-lg">IIITL Group Chat</h2>
+          </div>
+          <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
+            <X size={20} />
+          </Button>
+        </div>
+
+        {/* Message Area — scrollable container for the message history */}
+        <div className="flex-1 overflow-y-auto p-4 bg-muted/20">
+          {messages.length === 0 ? (
+            /* Empty state placeholder shown when no messages exist yet */
+            <div className="h-full flex flex-col justify-center items-center text-muted-foreground">
+              <p>No messages yet. Be the first to say hi!</p>
+            </div>
+          ) : (
+            <div className="flex flex-col">
+              {messages.map((msg) => (
+                <ChatMessage
+                  key={msg._id}
+                  message={msg}
+                  currentUserId={currentUserId}
+                  onReply={startReply}
+                  onEdit={startEdit}
+                  onDelete={handleDeleteMessage}
+                />
+              ))}
+              {/* Scroll sentinel — scrollIntoView targets this element */}
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+
+        {/* Auth / Read-only warning — shown for non-IIITL domain users */}
+        {!isIIITLUser && (
+          <div className="bg-destructive/10 text-destructive text-xs py-2 px-4 text-center border-t">
+            Read-only mode. You need an @iiitl.ac.in email to send messages.
+          </div>
+        )}
+
+        {/* Input Area — only rendered for authenticated IIITL domain users */}
+        {session && isIIITLUser && (
+          <div className="border-t bg-card flex flex-col">
+            {/* Status Banner for Replying/Editing — contextual indicator */}
+            {(replyingTo || editingMessage) && (
+              <div className="p-2 bg-primary/10 border-b flex justify-between items-center text-xs px-4">
+                {replyingTo && (
+                  <span className="font-semibold text-primary">
+                    Replying to{' '}
+                    {typeof replyingTo.sender === 'object' &&
+                    replyingTo.sender !== null
+                      ? (replyingTo.sender as { name: string }).name
+                      : 'someone'}
+                  </span>
+                )}
+                {editingMessage && (
+                  <span className="font-semibold text-primary">
+                    Editing message
+                  </span>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-5 w-5 rounded-full"
+                  onClick={cancelAction}
+                  aria-label={editingMessage ? 'Cancel edit' : 'Cancel reply'}
+                >
+                  <XCircle size={14} />
+                </Button>
+              </div>
+            )}
+
+            {/* Text input + Send button row */}
+            <div className="p-4 flex gap-2 items-center relative">
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder={
+                  editingMessage ? 'Edit your message...' : 'Type a message...'
+                }
+                aria-label={
+                  editingMessage ? 'Edit your message' : 'Type a message'
+                }
+                value={inputText}
+                onChange={(e) => setInputText(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="flex-1 bg-muted border-none p-3 rounded-full outline-none focus:ring-2 focus:ring-primary/50 text-sm"
+                disabled={isLoading}
+              />
+              <Button
+                onClick={handleSend}
+                disabled={isLoading || !inputText.trim()}
+                aria-label="Send message"
+                className="rounded-full h-10 w-10 p-0 flex justify-center items-center"
+              >
+                <Send size={18} className={isLoading ? 'opacity-50' : ''} />
+              </Button>
+            </div>
+            {/* Error message — displayed below the input on send failures */}
+            {error && (
+              <div className="px-4 pb-2 text-xs text-destructive text-center">
+                {error}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Mobile overlay backdrop — tapping outside the drawer closes it */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/20 z-40 sm:hidden"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+    </>
+  )
+}
+
diff --git a/components/message.tsx b/components/message.tsx
deleted file mode 100644
index ebcc26e..0000000
--- a/components/message.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Image from 'next/image'
-
-interface MessageProps {
-  message: {
-    text: string
-    sender: string
-    senderAvatar: string
-    timestamp: string
-  }
-  user: string
-}
-
-export default function Message({ message, user }: MessageProps) {
-  return (
-    <div
-      className={`flex ${message.sender === user ? 'flex-row-reverse' : ''} mb-4`}
-    >
-      <Image
-        src={message.senderAvatar}
-        alt={message.sender}
-        width={40}
-        height={40}
-        className="w-10 h-10 rounded-full mr-3"
-      />
-      <div className="max-w-[60%] bg-muted-200 p-3 rounded-xl shadow-md dark:shadow-lg dark:shadow-white/50">
-        <p>{message.sender}</p>
-        <p className="text-muted-foreground">{message.text}</p>
-        <span className="text-sm text-muted-foreground">
-          {message.timestamp}
-        </span>
-      </div>
-    </div>
-  )
-}
diff --git a/hooks/useChatMessages.ts b/hooks/useChatMessages.ts
new file mode 100644
index 0000000..1d4c9c3
--- /dev/null
+++ b/hooks/useChatMessages.ts
@@ -0,0 +1,435 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useSession } from 'next-auth/react'
+import { MessageData } from '@/components/chat/ChatMessage'
+
+/**
+ * Configuration options for the {@link useChatMessages} hook.
+ *
+ * @property isOpen - When `true`, the hook will establish an SSE connection
+ *                    and perform the initial message fetch. When `false`,
+ *                    the SSE connection is torn down and no network requests
+ *                    are made. Defaults to `true` if omitted.
+ */
+interface UseChatMessagesOptions {
+  isOpen?: boolean
+}
+
+/**
+ * Custom React hook to manage real-time group chat messages and UI state.
+ *
+ * **Architecture overview:**
+ * - On mount (when `isOpen` is `true`), performs a one-time `GET` request to
+ *   `/api/chat/messages` to seed the local message list.
+ * - Opens an SSE connection to `/api/chat/stream` to receive push events
+ *   for new messages, edits (UPDATE_MESSAGE), and deletions (DELETE_MESSAGE).
+ * - The SSE connection lifecycle is tied **only** to `isOpen` — changes to
+ *   `replyingTo` or `editingMessage` do **not** recreate the EventSource,
+ *   which avoids missed events during teardown/reconnect gaps.
+ * - Mutable state that event handlers need (e.g., current messages,
+ *   replyingTo, editingMessage) is tracked via `useRef`s so the SSE
+ *   `onmessage` handler can read the latest values without re-binding.
+ *
+ * **Returned API:**
+ * - `messages` / `inputText` / `isLoading` / `error` — React state for rendering.
+ * - `editingMessage` / `replyingTo` — Active UI mode (edit vs. reply vs. normal).
+ * - `handleSend` — Sends a new message, edits an existing one, or replies.
+ * - `handleDeleteMessage` — Soft-deletes a message by ID.
+ * - `startReply` / `startEdit` / `cancelAction` — Toggle UI modes.
+ * - `inputRef` — A ref to the text input element for programmatic focus.
+ * - `currentUserId` / `isIIITLUser` — Session-derived identity helpers.
+ *
+ * @param options - See {@link UseChatMessagesOptions}.
+ * @returns An object containing chat state, derived values, and handler functions.
+ */
+export function useChatMessages(options: UseChatMessagesOptions = {}) {
+  /** Next-Auth session; provides user identity and email for domain checks. */
+  const { data: session } = useSession()
+
+  /** Controls whether network activity (fetch + SSE) is active. */
+  const { isOpen = true } = options
+
+  /** The ordered list of chat messages displayed in the UI. */
+  const [messages, setMessages] = useState<MessageData[]>([])
+
+  /** Controlled value for the chat text input field. */
+  const [inputText, setInputText] = useState('')
+
+  /** True while an async send/edit/delete operation is in-flight. */
+  const [isLoading, setIsLoading] = useState(false)
+
+  /** User-facing error string displayed below the input; cleared on next send. */
+  const [error, setError] = useState('')
+
+  /**
+   * When non-null, the UI is in "edit" mode — the input is pre-filled with
+   * this message's content and pressing Send will issue a PATCH instead of POST.
+   */
+  const [editingMessage, setEditingMessage] = useState<MessageData | null>(null)
+
+  /**
+   * When non-null, the UI is in "reply" mode — a reply banner is shown above
+   * the input and pressing Send will attach this message's ID as `replyTo`.
+   */
+  const [replyingTo, setReplyingTo] = useState<MessageData | null>(null)
+
+  /** Ref to the text <input> element; used for programmatic `.focus()` calls. */
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  /**
+   * Whether the authenticated user's email ends with `@iiitl.ac.in`.
+   * Only IIITL domain users can send messages; others see a read-only view.
+   */
+  const isIIITLUser = session?.user?.email
+    ?.toLowerCase()
+    ?.endsWith('@iiitl.ac.in')
+
+  /** The authenticated user's MongoDB ObjectId (from session). */
+  const currentUserId = session?.user?.id
+
+  /*
+   * ──────────────────────────────────────────────────────────────────────────
+   * Refs for mutable state accessed inside the SSE onmessage handler.
+   *
+   * The SSE useEffect depends only on [isOpen] to avoid tearing down and
+   * recreating the EventSource when transient UI state (e.g., replyingTo)
+   * changes. However, the onmessage handler sometimes needs the *latest*
+   * value of these states (e.g., to cancel a reply if the target message
+   * is deleted remotely). Using refs lets us read current values without
+   * adding them to the effect's dependency array.
+   * ──────────────────────────────────────────────────────────────────────────
+   */
+
+  /** Ref mirror of `messages` for access inside the SSE handler. */
+  const messagesRef = useRef(messages)
+  useEffect(() => {
+    messagesRef.current = messages
+  }, [messages])
+
+  /** Ref mirror of `replyingTo` for access inside the SSE handler. */
+  const replyingToRef = useRef(replyingTo)
+  useEffect(() => {
+    replyingToRef.current = replyingTo
+  }, [replyingTo])
+
+  /** Ref mirror of `editingMessage` for access inside the SSE handler. */
+  const editingMessageRef = useRef(editingMessage)
+  useEffect(() => {
+    editingMessageRef.current = editingMessage
+  }, [editingMessage])
+
+  /*
+   * ──────────────────────────────────────────────────────────────────────────
+   * Initial fetch effect.
+   *
+   * Performs a one-time GET to /api/chat/messages when the chat becomes
+   * open to seed the message list. This ensures the user sees existing
+   * history immediately, before the SSE connection starts delivering
+   * incremental updates.
+   * ──────────────────────────────────────────────────────────────────────────
+   */
+  useEffect(() => {
+    if (!isOpen) return
+
+    /**
+     * Fetches the latest 100 messages from the REST endpoint and replaces
+     * the local message state. Errors are logged but do not surface to the
+     * user — the SSE connection will deliver updates regardless.
+     */
+    const fetchMessages = async () => {
+      try {
+        const res = await fetch('/api/chat/messages')
+        if (res.ok) {
+          const data = await res.json()
+          setMessages(data)
+        }
+      } catch (err) {
+        console.error('Failed to fetch messages:', err)
+      }
+    }
+    fetchMessages()
+  }, [isOpen])
+
+  /*
+   * ──────────────────────────────────────────────────────────────────────────
+   * SSE connection effect — real-time updates.
+   *
+   * Opens an EventSource to /api/chat/stream and processes three event types:
+   *   - NEW_MESSAGE    → Appends to the message list (with dedup guard).
+   *   - UPDATE_MESSAGE → Replaces the matching message in-place; also updates
+   *                       any nested replyTo references that point to the
+   *                       modified message.
+   *   - DELETE_MESSAGE → Same replacement logic as UPDATE_MESSAGE, plus
+   *                       cancels any active reply/edit targeting the deleted
+   *                       message to prevent the user from replying to or
+   *                       editing a tombstone.
+   *
+   * The dependency array intentionally contains only [isOpen]. Transient state
+   * (messages, replyingTo, editingMessage) is read via refs so the EventSource
+   * is never torn down unnecessarily — which would cause missed events during
+   * the reconnect window.
+   *
+   * Browser-native EventSource auto-reconnects on network drops. The
+   * `onerror` handler intentionally suppresses console output to avoid
+   * noisy Next.js dev overlay popups during normal reconnections.
+   * ──────────────────────────────────────────────────────────────────────────
+   */
+  useEffect(() => {
+    if (!isOpen) return
+
+    const eventSource = new EventSource('/api/chat/stream')
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data)
+
+        if (data.type === 'NEW_MESSAGE') {
+          setMessages((prev) => {
+            // Dedup guard: prevent double-insertion if the POST response
+            // already added this message to state before the SSE event arrived.
+            if (prev.some((m) => m._id === data.message._id)) return prev
+            return [...prev, data.message]
+          })
+        } else if (
+          data.type === 'UPDATE_MESSAGE' ||
+          data.type === 'DELETE_MESSAGE'
+        ) {
+          setMessages((prev) =>
+            prev.map((msg) => {
+              // Replace the target message with the updated document.
+              let updatedMsg = msg._id === data.message._id ? data.message : msg
+
+              /*
+               * Also patch any nested replyTo reference that points to
+               * the modified/deleted message. This ensures reply preview
+               * snippets stay in sync without a full re-fetch.
+               */
+              if (
+                updatedMsg.replyTo &&
+                typeof updatedMsg.replyTo === 'object' &&
+                updatedMsg.replyTo._id === data.message._id
+              ) {
+                updatedMsg = {
+                  ...updatedMsg,
+                  replyTo: {
+                    ...updatedMsg.replyTo,
+                    content: data.message.content,
+                    isDeleted: data.message.isDeleted,
+                  },
+                }
+              }
+              return updatedMsg
+            })
+          )
+
+          /*
+           * When a message is deleted (by any user), cancel the local
+           * reply or edit mode if it targets that message. This prevents
+           * the user from submitting a reply to a tombstone or editing
+           * content that no longer exists.
+           */
+          if (data.type === 'DELETE_MESSAGE') {
+            if (replyingToRef.current?._id === data.message._id) {
+              setReplyingTo(null)
+            }
+            if (editingMessageRef.current?._id === data.message._id) {
+              setEditingMessage(null)
+              setInputText('')
+            }
+          }
+        }
+      } catch (e) {
+        console.error('Error parsing SSE message', e)
+      }
+    }
+
+    eventSource.onerror = () => {
+      /*
+       * Browsers automatically reconnect when SSE connections drop.
+       * Suppressing console.error here to avoid Next.js dev overlays
+       * firing on every transient network hiccup.
+       */
+    }
+
+    /* Cleanup: close the EventSource when the chat is closed or unmounted. */
+    return () => {
+      eventSource.close()
+    }
+  }, [isOpen]) // Only re-create SSE when open/close changes; refs handle mutable state
+
+  /**
+   * Handles sending a new message, editing an existing one, or replying.
+   *
+   * Behaviour depends on the current UI mode:
+   * - **Edit mode** (`editingMessage` is set): Issues a `PATCH` request to
+   *   `/api/chat/messages/:id` with the updated content.
+   * - **Reply mode** (`replyingTo` is set): Issues a `POST` request with
+   *   `{ content, replyTo: replyingTo._id }`.
+   * - **Normal mode**: Issues a plain `POST` with `{ content }`.
+   *
+   * After a successful mutation, the input is cleared and the active mode
+   * (edit/reply) is reset. The message list is **not** manually re-fetched;
+   * the SSE stream will deliver the update event, which triggers a state update.
+   *
+   * Errors are caught and displayed via the `error` state string.
+   */
+  const handleSend = async () => {
+    if (!inputText.trim()) return
+
+    setIsLoading(true)
+    setError('')
+
+    try {
+      if (editingMessage) {
+        // ── Edit flow: PATCH the existing message with new content ──
+        const res = await fetch(`/api/chat/messages/${editingMessage._id}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: inputText }),
+        })
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}))
+          throw new Error(data.error || 'Request failed')
+        }
+        setEditingMessage(null)
+      } else {
+        // ── Send / Reply flow: POST a new message, optionally with replyTo ──
+        const payload = replyingTo
+          ? { content: inputText, replyTo: replyingTo._id }
+          : { content: inputText }
+
+        const res = await fetch('/api/chat/messages', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        })
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}))
+          throw new Error(data.error || 'Request failed')
+        }
+        setReplyingTo(null)
+      }
+
+      setInputText('')
+      // Note: We don't need to manually fetch messages anymore, SSE updates it.
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message || 'Failed to send message')
+      } else {
+        setError('Failed to send message')
+      }
+    } finally {
+      setIsLoading(false)
+      // Re-focus the input after the operation completes (slight delay for
+      // React re-render to settle).
+      setTimeout(() => {
+        inputRef.current?.focus()
+      }, 10)
+    }
+  }
+
+  /**
+   * Triggers a soft delete for a specified message ID by issuing a
+   * `DELETE` request to `/api/chat/messages/:id`.
+   *
+   * If the deleted message was being edited or replied to locally,
+   * the corresponding mode is cancelled to prevent stale UI state.
+   *
+   * @param id - The MongoDB ObjectId string of the message to delete.
+   */
+  const handleDeleteMessage = async (id: string) => {
+    try {
+      const res = await fetch(`/api/chat/messages/${id}`, {
+        method: 'DELETE',
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.error || 'Request failed')
+      }
+
+      // Cancel local edit/reply modes if they target the deleted message.
+      if (editingMessage?._id === id) {
+        cancelAction()
+      }
+      if (replyingTo?._id === id) {
+        setReplyingTo(null)
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        alert(err.message)
+      } else {
+        alert('An error occurred')
+      }
+    }
+  }
+
+  /**
+   * Prepares the UI for a reply action targeting a specific message.
+   *
+   * Cancels any active edit mode, sets the reply target, clears the input,
+   * and focuses the text field so the user can immediately start typing.
+   *
+   * @param msg - The message data object to reply to.
+   */
+  const startReply = useCallback((msg: MessageData) => {
+    setEditingMessage(null)
+    setReplyingTo(msg)
+    setInputText('')
+    setTimeout(() => inputRef.current?.focus(), 10)
+  }, [])
+
+  /**
+   * Places the UI into edit mode for the given message.
+   *
+   * Populates the input field with the message's current content and
+   * positions the cursor at the end of the text for convenient editing.
+   * Deleted messages cannot be edited and are silently ignored.
+   *
+   * @param msg - The message data object to edit.
+   */
+  const startEdit = useCallback((msg: MessageData) => {
+    if (msg.isDeleted) return
+    setReplyingTo(null)
+    setEditingMessage(msg)
+    setInputText(msg.content)
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus()
+        // Place cursor at end of text for natural editing experience.
+        inputRef.current.setSelectionRange(
+          msg.content.length,
+          msg.content.length
+        )
+      }
+    }, 10)
+  }, [])
+
+  /**
+   * Aborts all active edit/reply sessions and resets input to its default state.
+   * Re-focuses the input field for a seamless transition back to normal mode.
+   */
+  const cancelAction = useCallback(() => {
+    setReplyingTo(null)
+    setEditingMessage(null)
+    setInputText('')
+    setTimeout(() => inputRef.current?.focus(), 10)
+  }, [])
+
+  return {
+    messages,
+    inputText,
+    setInputText,
+    isLoading,
+    error,
+    editingMessage,
+    replyingTo,
+    currentUserId,
+    isIIITLUser,
+    handleSend,
+    handleDeleteMessage,
+    startReply,
+    startEdit,
+    cancelAction,
+    inputRef,
+  }
+}
+
diff --git a/lib/eventEmitter.ts b/lib/eventEmitter.ts
new file mode 100644
index 0000000..0c86106
--- /dev/null
+++ b/lib/eventEmitter.ts
@@ -0,0 +1,46 @@
+import { EventEmitter } from 'events'
+
+/**
+ * Typed augmentation of `globalThis` to persist the chat EventEmitter
+ * across Hot Module Replacement (HMR) reloads during development.
+ *
+ * Without this, `next dev` would create a new EventEmitter on every
+ * file change, breaking all existing SSE subscriptions that reference
+ * the old instance. By caching it on `globalThis`, the same emitter
+ * survives HMR cycles and maintains active listener registrations.
+ */
+const globalForEvents = globalThis as unknown as { chatEmitter: EventEmitter }
+
+/**
+ * A globally persisted EventEmitter acting as the single in-process
+ * broadcast bus for real-time chat events within the Next.js App Router.
+ *
+ * **How it works:**
+ * 1. API mutation routes (`POST`, `PATCH`, `DELETE` in `/api/chat/messages`)
+ *    emit events on this emitter when messages are created, edited, or deleted.
+ * 2. The SSE stream route (`GET /api/chat/stream`) subscribes a per-client
+ *    listener to this emitter, forwarding events as SSE frames to the browser.
+ * 3. The client-side `useChatMessages` hook processes these SSE frames and
+ *    updates React state in real time.
+ *
+ * **Production limitation:** This EventEmitter is process-local. In a
+ * multi-instance deployment (e.g., multiple containers behind a load
+ * balancer), events emitted on one instance will not reach SSE clients
+ * connected to a different instance. For such deployments, replace this
+ * with a shared pub/sub layer (Redis Pub/Sub, Pusher, etc.).
+ *
+ * **HMR safety:** In development (`NODE_ENV !== 'production'`), the
+ * emitter is cached on `globalThis` so that hot-reloaded modules
+ * continue referencing the same instance.
+ */
+export const chatEmitter = globalForEvents.chatEmitter || new EventEmitter()
+
+/*
+ * Persist the emitter on globalThis during development to survive
+ * Next.js HMR reloads. In production this is not strictly necessary
+ * because modules are loaded once, but the guard is a safety net.
+ */
+if (process.env.NODE_ENV !== 'production') {
+  globalForEvents.chatEmitter = chatEmitter
+}
+
diff --git a/middleware.ts b/middleware.ts
index e60ff21..1768c0a 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -74,6 +74,7 @@ export async function middleware(request: NextRequest) {
     '/api/papers',
     '/api/quick-reads',
     '/api/quick_read_categories',
+    '/api/chat/messages',
   ]
   const isPublicEndpoint = publicApiEndpoints.some(
     (endpoint) => path.startsWith(endpoint) && request.method === 'GET'
@@ -147,6 +148,7 @@ export async function middleware(request: NextRequest) {
     '/api/papers',
     '/api/quick-reads',
     '/api/quick_read_categories',
+    '/api/chat/messages',
   ]
   const isPublicGetRequest = publicGetEndpoints.some(
     (endpoint) => path.startsWith(endpoint) && request.method === 'GET'
diff --git a/model/Message.ts b/model/Message.ts
new file mode 100644
index 0000000..af584f1
--- /dev/null
+++ b/model/Message.ts
@@ -0,0 +1,83 @@
+import mongoose, { Document, Model } from 'mongoose'
+import './User' // Ensure User model is registered before populate() calls
+
+/**
+ * TypeScript interface representing a single Message document in MongoDB.
+ *
+ * This interface extends Mongoose's `Document` to provide type safety when
+ * working with message instances in API route handlers and population calls.
+ *
+ * @property sender    - Reference to the User who authored this message.
+ *                        Stored as an ObjectId in the database; resolved to a
+ *                        populated user object (with `name`, `image`, `email`)
+ *                        when `.populate('sender')` is called.
+ * @property email     - The sender's email address at the time of message
+ *                        creation. Stored denormalised for fast domain checks
+ *                        without needing to populate the sender.
+ * @property content   - The text body of the message. Replaced with a tombstone
+ *                        string (`🚫 This message was deleted.`) on soft delete.
+ * @property isEdited  - Flag set to `true` after the message content has been
+ *                        modified via PATCH. Displayed as "(edited)" in the UI.
+ * @property replyTo   - Optional reference to another Message document when this
+ *                        message is a reply. `null` for top-level messages.
+ * @property isDeleted - Soft-delete flag. When `true`, the message is rendered
+ *                        as italic/faded with an action menu limited to prevent
+ *                        further interaction (no reply, edit, or delete).
+ * @property timestamp - The creation date of the message. Defaults to `Date.now`
+ *                        via the schema.
+ */
+export interface IMessage extends Document {
+  sender: mongoose.Types.ObjectId | Record<string, unknown>
+  email: string
+  content: string
+  isEdited: boolean
+  replyTo: mongoose.Types.ObjectId | Record<string, unknown> | null
+  isDeleted: boolean
+  timestamp: Date
+}
+
+/**
+ * Mongoose schema definition for the Message collection.
+ *
+ * Key design decisions:
+ * - `sender` uses an ObjectId ref to `User`, enabling `.populate()` for
+ *   display-ready sender data in API responses and SSE payloads.
+ * - `replyTo` is a self-referencing ObjectId ref to `Message`, supporting
+ *   one level of reply chain nesting with recursive populate.
+ * - `isDeleted` enables soft deletes — the document is preserved for reply
+ *   chain integrity, with content replaced by a tombstone string.
+ * - `timestamp` defaults to `Date.now` for automatic creation dating.
+ */
+const MessageSchema = new mongoose.Schema<IMessage>({
+  /** Reference to the User document representing the message author. */
+  sender: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
+  /** Denormalised email of the sender for quick domain validation. */
+  email: { type: String, required: true },
+  /** The text body of the message; replaced with tombstone on soft delete. */
+  content: { type: String, required: true },
+  /** Whether the message has been edited after initial creation. */
+  isEdited: { type: Boolean, default: false },
+  /** Optional self-reference to the parent message in a reply chain. */
+  replyTo: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'Message',
+    default: null,
+  },
+  /** Soft-delete flag; when true, the message is rendered as deleted. */
+  isDeleted: { type: Boolean, default: false },
+  /** Creation timestamp; auto-set to the current date on insert. */
+  timestamp: { type: Date, default: Date.now },
+})
+
+/**
+ * Mongoose model for the `messages` collection in MongoDB.
+ *
+ * Uses the `mongoose.models` cache to avoid re-compiling the model during
+ * Next.js Hot Module Replacement (HMR) in development. If the model has
+ * already been registered (e.g., from a previous HMR cycle), the cached
+ * version is reused; otherwise, a fresh model is created from the schema.
+ */
+const Message: Model<IMessage> =
+  mongoose.models.Message || mongoose.model<IMessage>('Message', MessageSchema)
+export default Message
+