diff --git a/app/src/App.tsx b/app/src/App.tsx
index bdf35b4..ba389b6 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -15,6 +15,7 @@ import { VerifyAccount } from './pages/auth/VerifyAccount';
 import { FacultyPost } from './pages/post/FacultyPost';
 import { WardenPost } from './pages/post/WardenPost';
 import { CentreHeadPost } from './pages/post/CentreHeadPost';
+import { PostView } from './pages/post/PostView';
 import { Profile } from './pages/profile/Profile';
 import { XENPostView } from './pages/admin/XENPostView';
 import { AEPostView } from './pages/admin/AEPostView';
@@ -40,6 +41,7 @@ function App() {
         <Route path="/faculty/post" element={<FacultyPost />} />
         <Route path="/warden/post" element={<WardenPost />} />
         <Route path="/centre-head/post" element={<CentreHeadPost />} />
+        <Route path="/post/:role/:post_id" element={<PostView />} />
         <Route path="/account/verify" element={<VerifyAccount />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/admin/xen" element={<XENPostView />} />
diff --git a/app/src/components/ComplaintCard.tsx b/app/src/components/ComplaintCard.tsx
index b78f41f..a423cb8 100644
--- a/app/src/components/ComplaintCard.tsx
+++ b/app/src/components/ComplaintCard.tsx
@@ -1,9 +1,6 @@
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
 import {
-  Zap, Hammer, Trash2, Pencil, X, Check, Calendar, MapPin, BedDouble,
-  MessageSquare, Wrench, GitBranch, ChevronRight, UserCircle, Clock,
-  Send, AlertCircle,
+  Zap, Hammer, Calendar, MapPin, BedDouble, MessageSquare, ChevronRight,
 } from 'lucide-react';
 import { POST_PLACES } from '../constants/models';
 
@@ -44,14 +41,14 @@ export interface EditForm {
 interface ComplaintCardProps {
   post: ComplaintPost;
   role: Role;
-  isEditing: boolean;
-  isBusy: boolean;
-  editForm: EditForm;
-  onEditFormChange: (patch: Partial<EditForm>) => void;
-  onStartEdit: (post: ComplaintPost) => void;
-  onCancelEdit: () => void;
-  onSaveEdit: (postId: number) => void;
-  onDelete: (postId: number) => void;
+  isEditing?: boolean;
+  isBusy?: boolean;
+  editForm?: EditForm;
+  onEditFormChange?: (patch: Partial<EditForm>) => void;
+  onStartEdit?: (post: ComplaintPost) => void;
+  onCancelEdit?: () => void;
+  onSaveEdit?: (postId: number) => void;
+  onDelete?: (postId: number) => void;
   // Called after the author successfully posts a comment, so the parent can
   // refetch and surface the new comment.
   onCommentPosted?: () => void;
@@ -79,24 +76,10 @@ function statusStyle(s: string): StatusStyle {
 
 const STAGES = ['XEN', 'AE', 'JE'];
 
-function isEditWindowExpired(createdAt: string): boolean {
-  return Date.now() - new Date(createdAt).getTime() >= 30 * 60 * 1000;
-}
-
 function formatDate(iso: string) {
   return new Date(iso).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
 }
 
-function formatDateTime(iso: string) {
-  return new Date(iso).toLocaleString('en-IN', {
-    day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
-  });
-}
-
-function roleLabel(position: string) {
-  return position.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
 // ── Type theme ─────────────────────────────────────────────────────────────────
 
 function typeTheme(isElectrical: boolean) {
@@ -105,362 +88,13 @@ function typeTheme(isElectrical: boolean) {
     : { cardBg: 'bg-sky-50',    accentBar: 'bg-sky-500',    headerBg: 'bg-sky-100/70',   iconColor: 'text-sky-600',   badge: 'bg-sky-200 text-sky-900 border-sky-400',       stageDone: 'bg-sky-600 border-sky-600' };
 }
 
-// ── Stage tracker ──────────────────────────────────────────────────────────────
-
-function StageTracker({ stage, theme }: { stage: string; theme: ReturnType<typeof typeTheme> }) {
-  const current = STAGES.indexOf(stage);
-  return (
-    <div className="flex items-center gap-2">
-      <GitBranch className={`w-3.5 h-3.5 shrink-0 ${theme.iconColor}`} />
-      <div className="flex items-center gap-0">
-        {STAGES.map((s, idx) => {
-          const done = current >= 0 && idx <= current;
-          const isLast = idx === STAGES.length - 1;
-          return (
-            <div key={s} className="flex items-center">
-              <span className={`text-[10px] font-bold uppercase tracking-wide px-2.5 py-0.5 border transition-colors ${
-                idx === 0 ? 'rounded-l-full' : ''
-              } ${isLast ? 'rounded-r-full' : ''} ${
-                done ? `${theme.stageDone} text-white` : 'bg-white/60 text-gray-400 border-gray-300'
-              }`}>
-                {s}
-              </span>
-              {!isLast && (
-                <div className={`w-px h-4 ${done && current > idx ? theme.stageDone.replace('bg-', 'bg-') : 'bg-gray-300'}`} />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-// ── Edit form ──────────────────────────────────────────────────────────────────
-
-function EditFormFields({
-  editForm, isFaculty, isWarden, onEditFormChange,
-}: {
-  editForm: EditForm;
-  isFaculty: boolean;
-  isWarden: boolean;
-  onEditFormChange: (patch: Partial<EditForm>) => void;
-}) {
-  const inputCls = 'w-full text-sm text-gray-800 bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400/40 focus:border-gray-600';
-  const labelCls = 'block text-[10px] font-bold uppercase tracking-wider text-gray-500 mb-1';
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        <label className={labelCls}>Title</label>
-        <input value={editForm.title} onChange={(e) => onEditFormChange({ title: e.target.value })} className={inputCls} />
-      </div>
-      {isFaculty && (
-        <div>
-          <label className={labelCls}>Area / Place</label>
-          <select value={editForm.place} onChange={(e) => onEditFormChange({ place: e.target.value })} className={inputCls}>
-            <option value="" disabled>Select Area</option>
-            {POST_PLACES.map((p) => <option key={p.value} value={p.value}>{p.label}</option>)}
-          </select>
-        </div>
-      )}
-      {isWarden && (
-        <div>
-          <label className={labelCls}>Room Number</label>
-          <input value={editForm.room_number} onChange={(e) => onEditFormChange({ room_number: e.target.value })} className={inputCls} />
-        </div>
-      )}
-      <div>
-        <label className={labelCls}>Description</label>
-        <textarea rows={5} value={editForm.description} onChange={(e) => onEditFormChange({ description: e.target.value })}
-          className={`${inputCls} resize-none`} />
-      </div>
-    </div>
-  );
-}
-
-// ── Comments list ──────────────────────────────────────────────────────────────
-
-function CommentsList({ comments }: { comments: ComplaintComment[] }) {
-  if (comments.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center py-10 text-center">
-        <MessageSquare className="w-8 h-8 text-gray-200 mb-2" />
-        <p className="text-sm text-gray-400 font-medium">No official responses yet</p>
-        <p className="text-xs text-gray-400 mt-0.5">Comments from staff will appear here.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      {comments.map((c, idx) => {
-        const author = c.role ? roleLabel(c.role) : 'Staff';
-        const initials = author.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
-        return (
-          <div key={c.id} className="flex gap-3">
-            {/* Avatar */}
-            <div className="shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-800 flex items-center justify-center text-[11px] font-bold text-white">
-              {initials || <UserCircle className="w-4 h-4" />}
-            </div>
-
-            {/* Bubble */}
-            <div className="flex-1 min-w-0">
-              <div className="bg-white border border-gray-200 rounded-xl rounded-tl-sm px-4 py-3 shadow-sm">
-                <div className="flex items-center justify-between gap-2 mb-1.5">
-                  <span className="min-w-0 flex items-baseline gap-1.5">
-                    <span className="text-xs font-bold text-gray-800">{author}</span>
-                    {c.email && <span className="text-[10px] text-gray-400 truncate">{c.email}</span>}
-                  </span>
-                  <span className="inline-flex items-center gap-1 text-[10px] text-gray-400 shrink-0">
-                    <Clock className="w-3 h-3" />
-                    {formatDateTime(c.created_at)}
-                  </span>
-                </div>
-                <p className="text-sm text-gray-600 leading-relaxed">{c.comment_text}</p>
-              </div>
-              {idx < comments.length - 1 && <div className="ml-4 w-px h-2 bg-gray-200" />}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// ── Comment composer (post author only) ──────────────────────────────────────────
-
-function CommentComposer({ role, postId, onPosted }: { role: Role; postId: number; onPosted?: () => void }) {
-  const [text, setText]         = useState('');
-  const [submitting, setBusy]   = useState(false);
-  const [error, setError]       = useState<string | null>(null);
-
-  const disabled = submitting || !text.trim();
-
-  async function submit() {
-    const content = text.trim();
-    if (!content) return;
-    setBusy(true);
-    setError(null);
-    try {
-      const res = await fetch(`/api/post/${role}/comment/${postId}`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ Content: content }),
-      });
-      if (!res.ok) {
-        let msg = `Failed to post comment (${res.status})`;
-        try { const b = await res.json(); if (b?.error) msg = b.error; } catch {}
-        throw new Error(msg);
-      }
-      setText('');
-      onPosted?.();
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <div className="mt-4">
-      <div className="flex items-end gap-2">
-        <textarea
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submit(); }}
-          disabled={submitting}
-          rows={2}
-          placeholder="Add a comment…"
-          className="flex-1 text-sm text-gray-800 placeholder-gray-400 bg-white border border-gray-200 rounded-xl px-3.5 py-2.5 resize-none focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-400 transition disabled:opacity-50"
-        />
-        <button
-          onClick={submit}
-          disabled={disabled}
-          title="Post comment (Ctrl/⌘ + Enter)"
-          className="shrink-0 inline-flex items-center gap-1.5 text-xs font-bold text-white bg-gray-900 hover:bg-gray-700 px-4 py-2.5 rounded-xl transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
-        >
-          {submitting
-            ? <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-            : <Send className="w-3.5 h-3.5" />}
-          Send
-        </button>
-      </div>
-      {error && (
-        <p className="mt-2 text-xs font-semibold text-red-500 flex items-center gap-1.5">
-          <AlertCircle className="w-3.5 h-3.5 shrink-0" /> {error}
-        </p>
-      )}
-    </div>
-  );
-}
-
-// ── Modal ──────────────────────────────────────────────────────────────────────
-
-interface ModalProps extends ComplaintCardProps {
-  onClose: () => void;
-}
-
-function PostModal({
-  post, role, isEditing, isBusy, editForm,
-  onEditFormChange, onStartEdit, onCancelEdit, onSaveEdit, onDelete, onClose, onCommentPosted,
-}: ModalProps) {
-  const isFaculty    = role === 'faculty';
-  const isWarden     = role === 'warden';
-  const status       = statusStyle(post.status);
-  const isElectrical = post.type_of_post === 'Electrical';
-  const theme        = typeTheme(isElectrical);
-  const comments     = post.comments ?? [];
-  const editExpired  = isEditWindowExpired(post.created_at);
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
-    >
-      <div className="bg-white w-full max-w-2xl max-h-[90vh] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
-
-        {/* Modal header */}
-        <div className={`${theme.headerBg} border-b border-gray-200 px-6 py-4 flex items-start justify-between gap-4 shrink-0`}>
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-xs font-mono font-bold text-gray-400">#{post.id}</span>
-            <span className={`inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full border ${theme.badge}`}>
-              {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
-              {post.type_of_post}
-            </span>
-            <span className={`inline-flex items-center gap-1.5 text-xs font-bold px-2.5 py-0.5 rounded-full border ${status.pill}`}>
-              <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
-              {status.label}
-            </span>
-          </div>
-
-          <div className="flex items-center gap-1 shrink-0">
-            {!isEditing && !editExpired && (
-              <button
-                onClick={() => onStartEdit(post)}
-                disabled={isBusy}
-                title="Edit"
-                className="p-1.5 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-white/70 transition-colors disabled:opacity-40 cursor-pointer"
-              >
-                <Pencil className="w-4 h-4" />
-              </button>
-            )}
-            {isEditing && (
-              <>
-                <button onClick={() => onSaveEdit(post.id)} disabled={isBusy} title="Save"
-                  className="p-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 transition-colors disabled:opacity-40 cursor-pointer">
-                  {isBusy ? <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Check className="w-4 h-4 text-white" />}
-                </button>
-                <button onClick={onCancelEdit} disabled={isBusy} title="Cancel"
-                  className="p-1.5 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-white/70 transition-colors disabled:opacity-40 cursor-pointer">
-                  <X className="w-4 h-4" />
-                </button>
-              </>
-            )}
-            {!editExpired && (
-              <button onClick={() => onDelete(post.id)} disabled={isBusy} title="Delete"
-                className="p-1.5 rounded-lg text-gray-400 hover:text-rose-600 hover:bg-rose-50 transition-colors disabled:opacity-40 cursor-pointer">
-                {isBusy && !isEditing
-                  ? <div className="w-4 h-4 border-2 border-rose-500 border-t-transparent rounded-full animate-spin" />
-                  : <Trash2 className="w-4 h-4" />}
-              </button>
-            )}
-            <div className="w-px h-5 bg-gray-300 mx-1" />
-            <button onClick={onClose} title="Close"
-              className="p-1.5 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-white/70 transition-colors cursor-pointer">
-              <X className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Scrollable content */}
-        <div className="overflow-y-auto flex-1">
-
-          {/* Post details */}
-          <div className="px-6 py-5 border-b border-gray-100">
-            {isEditing ? (
-              <EditFormFields
-                editForm={editForm}
-                isFaculty={isFaculty}
-                isWarden={isWarden}
-                onEditFormChange={onEditFormChange}
-              />
-            ) : (
-              <div className="flex flex-col gap-4">
-                <h2 className="text-lg font-bold text-gray-900 leading-snug">{post.title}</h2>
-                <p className="text-sm text-gray-600 leading-relaxed">{post.description}</p>
-
-                <StageTracker stage={post.stage} theme={theme} />
-
-                {/* Meta grid */}
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 pt-2">
-                  <div className="flex items-center gap-2 text-sm text-gray-600">
-                    <Calendar className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
-                    <div>
-                      <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Filed on</p>
-                      <p className="font-medium text-xs">{formatDate(post.created_at)}</p>
-                    </div>
-                  </div>
-                  {isFaculty && post.place && (
-                    <div className="flex items-center gap-2 text-sm text-gray-600">
-                      <MapPin className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
-                      <div>
-                        <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Location</p>
-                        <p className="font-medium text-xs">{post.place}</p>
-                      </div>
-                    </div>
-                  )}
-                  {isWarden && post.room_number && (
-                    <div className="flex items-center gap-2 text-sm text-gray-600">
-                      <BedDouble className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
-                      <div>
-                        <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Room</p>
-                        <p className="font-medium text-xs">{post.room_number}</p>
-                      </div>
-                    </div>
-                  )}
-                  {post.assigned_je_id != null && (
-                    <div className="flex items-center gap-2 text-sm text-gray-600">
-                      <Wrench className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
-                      <div>
-                        <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Assigned JE</p>
-                        <p className="font-medium text-xs">JE #{post.assigned_je_id}</p>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Comments */}
-          {!isEditing && (
-            <div className="px-6 py-5 bg-gray-50/60">
-              <div className="flex items-center gap-2 mb-4">
-                <MessageSquare className={`w-4 h-4 ${theme.iconColor}`} />
-                <h3 className="text-sm font-bold text-gray-800">Official Responses</h3>
-                {comments.length > 0 && (
-                  <span className="text-xs font-bold bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">{comments.length}</span>
-                )}
-              </div>
-              <CommentsList comments={comments} />
-              <CommentComposer role={role} postId={post.id} onPosted={onCommentPosted} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-}
 
 // ── Card (compact preview) ─────────────────────────────────────────────────────
 
 export function ComplaintCard({
-  post, role, isEditing, isBusy, editForm,
-  onEditFormChange, onStartEdit, onCancelEdit, onSaveEdit, onDelete, onCommentPosted,
+  post, role,
 }: ComplaintCardProps) {
-  const [modalOpen, setModalOpen] = useState(false);
+  const navigate = useNavigate();
 
   const status       = statusStyle(post.status);
   const isElectrical = post.type_of_post === 'Electrical';
@@ -468,100 +102,63 @@ export function ComplaintCard({
   const comments     = post.comments ?? [];
   const isFaculty    = role === 'faculty';
   const isWarden     = role === 'warden';
-  const editExpired  = isEditWindowExpired(post.created_at);
 
   return (
-    <>
-      {/* ── Compact card ── */}
-      <div
-        onClick={() => setModalOpen(true)}
-        className={`${theme.cardBg} border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-gray-300 transition-all cursor-pointer group`}
-      >
-        {/* Top accent */}
-        <div className={`h-1 w-full ${theme.accentBar}`} />
-
-        <div className="px-4 py-4">
-          {/* Row 1: badges + actions */}
-          <div className="flex items-center gap-2 mb-3">
-            <span className="text-[11px] font-mono font-bold text-gray-400">#{post.id}</span>
+    <div
+      onClick={() => navigate(`/post/${role}/${post.id}`)}
+      className={`${theme.cardBg} border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-gray-300 transition-all cursor-pointer group`}
+    >
+      {/* Top accent */}
+      <div className={`h-1 w-full ${theme.accentBar}`} />
+
+      <div className="px-4 py-4">
+        {/* Row 1: badges */}
+        <div className="flex items-center gap-2 mb-3">
+          <span className="text-[11px] font-mono font-bold text-gray-400">#{post.id}</span>
+
+          <span className={`inline-flex items-center gap-1 text-[11px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full border ${theme.badge}`}>
+            {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+            {post.type_of_post}
+          </span>
+
+          <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold px-2 py-0.5 rounded-full border ${status.pill}`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
+            {status.label}
+          </span>
+        </div>
 
-            <span className={`inline-flex items-center gap-1 text-[11px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full border ${theme.badge}`}>
-              {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
-              {post.type_of_post}
-            </span>
+        {/* Title + description */}
+        <h4 className="text-sm font-bold text-gray-900 leading-snug mb-1.5">{post.title}</h4>
+        <p className="text-xs text-gray-500 leading-relaxed line-clamp-2">{post.description}</p>
 
-            <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold px-2 py-0.5 rounded-full border ${status.pill}`}>
-              <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
-              {status.label}
+        {/* Footer row */}
+        <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200/60">
+          <div className="flex items-center gap-3">
+            <span className="inline-flex items-center gap-1 text-xs text-gray-400">
+              <Calendar className="w-3 h-3" /> {formatDate(post.created_at)}
             </span>
-
-            <div className="ml-auto flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
-              {!editExpired && (
-                <button onClick={() => onStartEdit(post)} disabled={isBusy} title="Edit"
-                  className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-white/80 transition-colors disabled:opacity-40 cursor-pointer">
-                  <Pencil className="w-3.5 h-3.5" />
-                </button>
-              )}
-              {!editExpired && (
-                <button onClick={() => onDelete(post.id)} disabled={isBusy} title="Delete"
-                  className="p-1.5 rounded-lg text-gray-400 hover:text-rose-600 hover:bg-rose-50 transition-colors disabled:opacity-40 cursor-pointer">
-                  <Trash2 className="w-3.5 h-3.5" />
-                </button>
-              )}
-            </div>
+            {isFaculty && post.place && (
+              <span className="inline-flex items-center gap-1 text-xs text-gray-400">
+                <MapPin className="w-3 h-3" /> {post.place}
+              </span>
+            )}
+            {isWarden && post.room_number && (
+              <span className="inline-flex items-center gap-1 text-xs text-gray-400">
+                <BedDouble className="w-3 h-3" /> {post.room_number}
+              </span>
+            )}
           </div>
 
-          {/* Title + description */}
-          <h4 className="text-sm font-bold text-gray-900 leading-snug mb-1.5">{post.title}</h4>
-          <p className="text-xs text-gray-500 leading-relaxed line-clamp-2">{post.description}</p>
-
-          {/* Footer row */}
-          <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200/60">
-            <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            {comments.length > 0 && (
               <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                <Calendar className="w-3 h-3" /> {formatDate(post.created_at)}
+                <MessageSquare className="w-3 h-3" /> {comments.length}
               </span>
-              {isFaculty && post.place && (
-                <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                  <MapPin className="w-3 h-3" /> {post.place}
-                </span>
-              )}
-              {isWarden && post.room_number && (
-                <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                  <BedDouble className="w-3 h-3" /> {post.room_number}
-                </span>
-              )}
-            </div>
-
-            <div className="flex items-center gap-2">
-              {comments.length > 0 && (
-                <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                  <MessageSquare className="w-3 h-3" /> {comments.length}
-                </span>
-              )}
-              <ChevronRight className={`w-4 h-4 text-gray-300 group-hover:text-gray-500 group-hover:translate-x-0.5 transition-all ${theme.iconColor} opacity-0 group-hover:opacity-100`} />
-            </div>
+            )}
+            <ChevronRight className={`w-4 h-4 text-gray-300 group-hover:text-gray-500 group-hover:translate-x-0.5 transition-all ${theme.iconColor} opacity-0 group-hover:opacity-100`} />
           </div>
         </div>
       </div>
-
-      {/* ── Modal ── */}
-      {modalOpen && (
-        <PostModal
-          post={post}
-          role={role}
-          isEditing={isEditing}
-          isBusy={isBusy}
-          editForm={editForm}
-          onEditFormChange={onEditFormChange}
-          onStartEdit={(p) => { onStartEdit(p); }}
-          onCancelEdit={() => { onCancelEdit(); }}
-          onSaveEdit={(id) => { onSaveEdit(id); }}
-          onDelete={(id) => { onDelete(id); setModalOpen(false); }}
-          onClose={() => { setModalOpen(false); if (isEditing) onCancelEdit(); }}
-          onCommentPosted={onCommentPosted}
-        />
-      )}
-    </>
+    </div>
   );
 }
diff --git a/app/src/pages/post/PostView.tsx b/app/src/pages/post/PostView.tsx
new file mode 100644
index 0000000..8361ee3
--- /dev/null
+++ b/app/src/pages/post/PostView.tsx
@@ -0,0 +1,577 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import {
+  Zap, Hammer, Trash2, Pencil, X, Check, Calendar, MapPin, BedDouble,
+  MessageSquare, Wrench, ArrowLeft, Send, AlertCircle,
+  UserCircle, Clock,
+} from 'lucide-react';
+import { MainLayout } from '../../components/layout/MainLayout';
+import { POST_PLACES } from '../../constants/models';
+
+type Role = 'faculty' | 'warden' | 'centrehead';
+
+interface StatusAudit {
+  event: string;
+  timestamp: string;
+}
+
+interface ComplaintComment {
+  id: number;
+  comment_text: string;
+  email: string;
+  role: string;
+  created_at: string;
+}
+
+interface ComplaintPost {
+  id: number;
+  type_of_post: string;
+  title: string;
+  description: string;
+  status: string;
+  stage: string;
+  assigned_je_id: number | null;
+  place?: string;
+  room_number?: string;
+  created_at: string;
+  updated_at?: string;
+  comments?: ComplaintComment[] | null;
+  status_audit_logs?: StatusAudit[] | null;
+}
+
+interface EditForm {
+  title: string;
+  description: string;
+  place: string;
+  room_number: string;
+}
+
+const STATUS_CONFIG: Record<string, { label: string; pill: string; dot: string }> = {
+  pending_xen:  { label: 'Pending · XEN', pill: 'bg-amber-100 text-amber-800 border-amber-300',    dot: 'bg-amber-400' },
+  pending_ae:   { label: 'Pending · AE',  pill: 'bg-sky-100 text-sky-800 border-sky-300',          dot: 'bg-sky-400' },
+  resolved_ae:  { label: 'Resolved · AE', pill: 'bg-teal-100 text-teal-800 border-teal-300',      dot: 'bg-teal-400' },
+  pending_je:   { label: 'Pending · JE',  pill: 'bg-violet-100 text-violet-800 border-violet-300', dot: 'bg-violet-400' },
+  resolved_je:  { label: 'Resolved · JE', pill: 'bg-teal-100 text-teal-800 border-teal-300',      dot: 'bg-teal-400' },
+  resolved_all: { label: 'Resolved · All', pill: 'bg-emerald-100 text-emerald-800 border-emerald-300', dot: 'bg-emerald-500' },
+};
+
+
+function statusStyle(s: string) {
+  const norm = s.toLowerCase();
+  return STATUS_CONFIG[norm] ?? { label: s.replace(/_/g, ' '), pill: 'bg-gray-100 text-gray-600 border-gray-300', dot: 'bg-gray-400' };
+}
+
+function typeTheme(isElectrical: boolean) {
+  return isElectrical
+    ? { cardBg: 'bg-amber-50', accentBar: 'bg-amber-400', headerBg: 'bg-amber-100/70', iconColor: 'text-amber-600', badge: 'bg-amber-200 text-amber-900 border-amber-400', stageDone: 'bg-amber-500 border-amber-500' }
+    : { cardBg: 'bg-sky-50',   accentBar: 'bg-sky-500',   headerBg: 'bg-sky-100/70',   iconColor: 'text-sky-600',   badge: 'bg-sky-200 text-sky-900 border-sky-400',       stageDone: 'bg-sky-600 border-sky-600' };
+}
+
+function isEditWindowExpired(createdAt: string): boolean {
+  return Date.now() - new Date(createdAt).getTime() >= 30 * 60 * 1000;
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+
+function formatDateTime(iso: string) {
+  return new Date(iso).toLocaleString('en-IN', {
+    day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+function roleLabel(position: string) {
+  return position.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function PostView() {
+  const { role, post_id } = useParams<{ role: Role; post_id: string }>();
+  const navigate = useNavigate();
+
+  const [post, setPost] = useState<ComplaintPost | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editForm, setEditForm] = useState<EditForm>({
+    title: '', description: '', place: '', room_number: '',
+  });
+  const [isBusy, setIsBusy] = useState(false);
+
+  const [commentText, setCommentText] = useState('');
+  const [commentSubmitting, setCommentSubmitting] = useState(false);
+  const [commentError, setCommentError] = useState<string | null>(null);
+
+  const fetchPost = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/post/${role}/${post_id}`, { credentials: 'include' });
+      if (!res.ok) {
+        throw new Error(`Failed to fetch post details (${res.status})`);
+      }
+      const data = await res.json();
+      setPost(data.post);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [role, post_id]);
+
+  useEffect(() => {
+    fetchPost();
+  }, [fetchPost]);
+
+  const timelineItems = useMemo(() => {
+    if (!post) return [];
+    const items: Array<
+      | { type: 'comment'; data: ComplaintComment; date: Date }
+      | { type: 'audit'; data: StatusAudit; date: Date }
+    > = [];
+
+    if (post.comments) {
+      post.comments.forEach((c) => {
+        items.push({
+          type: 'comment',
+          data: c,
+          date: new Date(c.created_at),
+        });
+      });
+    }
+
+    if (post.status_audit_logs) {
+      post.status_audit_logs.forEach((log) => {
+        items.push({
+          type: 'audit',
+          data: log,
+          date: new Date(log.timestamp),
+        });
+      });
+    }
+
+    return items.sort((a, b) => a.date.getTime() - b.date.getTime());
+  }, [post]);
+
+  if (loading) {
+    return (
+      <MainLayout>
+        <div className="flex-grow flex items-center justify-center py-12">
+          <div className="text-center">
+            <div className="w-12 h-12 border-4 border-gray-900 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+            <p className="text-gray-500 font-semibold text-sm">Loading complaint details…</p>
+          </div>
+        </div>
+      </MainLayout>
+    );
+  }
+
+  if (error || !post) {
+    return (
+      <MainLayout>
+        <div className="flex-grow flex items-center justify-center py-12">
+          <div className="max-w-md w-full mx-4 bg-white border border-gray-200 border-t-2 border-t-red-500 rounded-lg p-6 shadow-sm text-center">
+            <AlertCircle className="w-10 h-10 text-red-500 mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-gray-900 mb-2">Error Loading Complaint</h3>
+            <p className="text-sm text-gray-600 mb-4">{error || 'Complaint not found.'}</p>
+            <Link to="/profile" className="inline-flex items-center gap-1.5 text-xs font-bold text-gray-900 hover:underline">
+              <ArrowLeft className="w-3.5 h-3.5" /> Back to Dashboard
+            </Link>
+          </div>
+        </div>
+      </MainLayout>
+    );
+  }
+
+  const isFaculty = role === 'faculty';
+  const isWarden = role === 'warden';
+  const status = statusStyle(post.status);
+  const isElectrical = post.type_of_post === 'Electrical';
+  const theme = typeTheme(isElectrical);
+  const comments = post.comments ?? [];
+  const editExpired = isEditWindowExpired(post.created_at);
+
+  const editBase = isFaculty ? '/api/post/faculty/edit' : isWarden ? '/api/post/warden/edit' : '/api/post/centrehead/edit';
+  const deleteBase = isFaculty ? '/api/post/faculty/delete' : isWarden ? '/api/post/warden/delete' : '/api/post/centrehead/delete';
+
+  function startEdit() {
+    if (!post) return;
+    setIsEditing(true);
+    setEditForm({
+      title: post.title ?? '',
+      description: post.description ?? '',
+      place: post.place ?? '',
+      room_number: post.room_number ?? '',
+    });
+  }
+
+  function cancelEdit() {
+    setIsEditing(false);
+  }
+
+  async function handleSaveEdit() {
+    if (!post) return;
+    if (!window.confirm('Save changes to this complaint?')) return;
+    setIsBusy(true);
+
+    const body: Record<string, string> = { title: editForm.title, description: editForm.description };
+    if (isFaculty) body.place = editForm.place;
+    if (isWarden) body.room_number = editForm.room_number;
+
+    try {
+      const res = await fetch(`${editBase}/${post.id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) {
+        const b = await res.json().catch(() => ({}));
+        throw new Error(b.error ?? `Failed to save edit (${res.status})`);
+      }
+      setPost((prev) => prev ? { ...prev, ...body } : null);
+      setIsEditing(false);
+    } catch (err) {
+      alert((err as Error).message);
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!post) return;
+    if (!window.confirm('Delete this complaint? This cannot be undone.')) return;
+    setIsBusy(true);
+    try {
+      const res = await fetch(`${deleteBase}/${post.id}`, { method: 'DELETE', credentials: 'include' });
+      if (!res.ok) {
+        const b = await res.json().catch(() => ({}));
+        throw new Error(b.error ?? `Failed to delete (${res.status})`);
+      }
+      navigate('/profile');
+    } catch (err) {
+      alert((err as Error).message);
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function submitComment() {
+    if (!post) return;
+    const content = commentText.trim();
+    if (!content) return;
+    setCommentSubmitting(true);
+    setCommentError(null);
+    try {
+      const res = await fetch(`/api/post/${role}/comment/${post.id}`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ Content: content }),
+      });
+      if (!res.ok) {
+        let msg = `Failed to post comment (${res.status})`;
+        try { const b = await res.json(); if (b?.error) msg = b.error; } catch {}
+        throw new Error(msg);
+      }
+      setCommentText('');
+      fetchPost();
+    } catch (err) {
+      setCommentError((err as Error).message);
+    } finally {
+      setCommentSubmitting(false);
+    }
+  }
+
+
+  return (
+    <MainLayout>
+      <div className="flex-grow flex flex-col max-w-4xl w-full mx-auto px-6 py-6 space-y-6">
+        
+        {/* Back Link */}
+        <div className="flex items-center justify-between">
+          <Link to="/profile" className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 transition-colors">
+            <ArrowLeft className="w-4 h-4" /> Back to Dashboard
+          </Link>
+          
+          {/* Action buttons */}
+          <div className="flex items-center gap-2">
+            {!isEditing && !editExpired && (
+              <button
+                onClick={startEdit}
+                disabled={isBusy}
+                className="inline-flex items-center gap-1 px-3 py-1.5 border border-gray-300 rounded-lg text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition disabled:opacity-40 cursor-pointer"
+              >
+                <Pencil className="w-3.5 h-3.5" /> Edit
+              </button>
+            )}
+            {isEditing && (
+              <>
+                <button
+                  onClick={handleSaveEdit}
+                  disabled={isBusy}
+                  className="inline-flex items-center gap-1 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-xs font-semibold text-white rounded-lg transition disabled:opacity-40 cursor-pointer"
+                >
+                  {isBusy ? <div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Check className="w-3.5 h-3.5" />}
+                  Save
+                </button>
+                <button
+                  onClick={cancelEdit}
+                  disabled={isBusy}
+                  className="inline-flex items-center gap-1 px-3 py-1.5 border border-gray-300 rounded-lg text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition disabled:opacity-40 cursor-pointer"
+                >
+                  <X className="w-3.5 h-3.5" /> Cancel
+                </button>
+              </>
+            )}
+            {!editExpired && (
+              <button
+                onClick={handleDelete}
+                disabled={isBusy}
+                className="inline-flex items-center gap-1 px-3 py-1.5 border border-rose-200 rounded-lg text-xs font-semibold text-rose-600 bg-rose-50 hover:bg-rose-100 transition disabled:opacity-40 cursor-pointer"
+              >
+                {isBusy && !isEditing
+                  ? <div className="w-3 h-3 border-2 border-rose-500 border-t-transparent rounded-full animate-spin" />
+                  : <Trash2 className="w-3.5 h-3.5" />}
+                Delete
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Post Main Card */}
+        <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
+          {/* Accent strip */}
+          <div className={`h-1.5 w-full ${theme.accentBar}`} />
+          
+          <div className="p-6 space-y-6">
+            
+            {/* Title / Badges */}
+            <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 text-xs font-mono font-semibold text-gray-400">
+                  <span>Complaint #{post.id}</span>
+                </div>
+                {isEditing ? (
+                  <div className="mt-2">
+                    <label className="block text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-1">Title</label>
+                    <input
+                      type="text"
+                      value={editForm.title}
+                      onChange={(e) => setEditForm(prev => ({ ...prev, title: e.target.value }))}
+                      className="w-full text-base text-gray-800 bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400/40 focus:border-gray-600"
+                    />
+                  </div>
+                ) : (
+                  <h1 className="text-xl font-bold text-gray-900">{post.title}</h1>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2 shrink-0">
+                <span className={`inline-flex items-center gap-1 text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full border ${theme.badge}`}>
+                  {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+                  {post.type_of_post}
+                </span>
+                <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full border ${status.pill}`}>
+                  <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
+                  {status.label}
+                </span>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="space-y-1.5">
+              <h4 className="text-[10px] font-bold uppercase tracking-wider text-gray-400">Description</h4>
+              {isEditing ? (
+                <textarea
+                  rows={5}
+                  value={editForm.description}
+                  onChange={(e) => setEditForm(prev => ({ ...prev, description: e.target.value }))}
+                  className="w-full text-sm text-gray-800 bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400/40 focus:border-gray-600 resize-none"
+                />
+              ) : (
+                <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-wrap">{post.description}</p>
+              )}
+            </div>
+
+
+            {/* Meta Info */}
+            <div className="pt-4 border-t border-gray-100 grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <div className="flex items-center gap-2 text-sm text-gray-600">
+                <Calendar className={`w-4.5 h-4.5 shrink-0 ${theme.iconColor}`} />
+                <div>
+                  <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Filed on</p>
+                  <p className="font-medium text-xs">{formatDate(post.created_at)}</p>
+                </div>
+              </div>
+
+              {isFaculty && (
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  <MapPin className={`w-4.5 h-4.5 shrink-0 ${theme.iconColor}`} />
+                  <div className="flex-grow">
+                    <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Location</p>
+                    {isEditing ? (
+                      <select
+                        value={editForm.place}
+                        onChange={(e) => setEditForm(prev => ({ ...prev, place: e.target.value }))}
+                        className="w-full text-xs text-gray-800 bg-white border border-gray-300 rounded px-2 py-0.5 mt-1 focus:outline-none"
+                      >
+                        <option value="" disabled>Select Area</option>
+                        {POST_PLACES.map((p) => <option key={p.value} value={p.value}>{p.label}</option>)}
+                      </select>
+                    ) : (
+                      <p className="font-medium text-xs">{post.place}</p>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {isWarden && (
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  <BedDouble className={`w-4.5 h-4.5 shrink-0 ${theme.iconColor}`} />
+                  <div className="flex-grow">
+                    <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Room Number</p>
+                    {isEditing ? (
+                      <input
+                        type="text"
+                        value={editForm.room_number}
+                        onChange={(e) => setEditForm(prev => ({ ...prev, room_number: e.target.value }))}
+                        className="w-full text-xs text-gray-800 bg-white border border-gray-300 rounded px-2 py-0.5 mt-1 focus:outline-none"
+                      />
+                    ) : (
+                      <p className="font-medium text-xs">{post.room_number}</p>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {post.assigned_je_id != null && (
+                <div className="flex items-center gap-2 text-sm text-gray-600">
+                  <Wrench className={`w-4.5 h-4.5 shrink-0 ${theme.iconColor}`} />
+                  <div>
+                    <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Assigned JE</p>
+                    <p className="font-medium text-xs">JE #{post.assigned_je_id}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+          </div>
+        </div>
+
+        {/* Comments Section */}
+        {!isEditing && (
+          <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden p-6 space-y-6">
+            <div className="flex items-center gap-2 border-b border-gray-100 pb-3">
+              <MessageSquare className={`w-4 h-4 ${theme.iconColor}`} />
+              <h3 className="text-sm font-bold text-gray-800">Official Responses</h3>
+              {comments.length > 0 && (
+                <span className="text-xs font-bold bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{comments.length}</span>
+              )}
+            </div>
+
+            {/* Combined Timeline */}
+            {timelineItems.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-10 text-center">
+                <MessageSquare className="w-8 h-8 text-gray-200 mb-2" />
+                <p className="text-sm text-gray-400 font-medium">No activity or responses yet</p>
+              </div>
+            ) : (
+              <div className="relative border-l border-gray-200 ml-4 pl-6 space-y-6 mb-8">
+                {timelineItems.map((item, idx) => {
+                  if (item.type === 'audit') {
+                    const audit = item.data;
+                    const normEvent = audit.event.toLowerCase();
+                    const dotColor = STATUS_CONFIG[normEvent]?.dot ?? 'bg-gray-400';
+                    const eventText = (() => {
+                      if (normEvent === 'pending_xen') return 'Sent to XEN for review.';
+                      if (normEvent === 'pending_ae') return 'Sent to AE for review.';
+                      if (normEvent === 'resolved_ae') return 'Post marked as resolved by AE.';
+                      if (normEvent === 'pending_je') return 'Sent to JE for review.';
+                      if (normEvent === 'resolved_je') return 'Post marked as resolved by JE.';
+                      if (normEvent === 'resolved_all') return 'Post Resolved and closed by XEN.';
+                      return `Status updated to ${audit.event.replace(/_/g, ' ')}`;
+                    })();
+
+                    return (
+                      <div key={`audit-${idx}`} className="relative">
+                        <span className="absolute -left-[30px] top-1 flex h-3 w-3 items-center justify-center rounded-full bg-white ring-4 ring-white">
+                          <span className={`h-2 w-2 rounded-full ${dotColor}`} />
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <span className="text-[10px] font-semibold text-gray-400">
+                            {formatDateTime(audit.timestamp)}
+                          </span>
+                          <span className="text-xs font-bold text-gray-800">
+                            {eventText}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  } else {
+                    const c = item.data;
+                    const author = c.role ? roleLabel(c.role) : 'Staff';
+                    const borderCls = theme.accentBar.replace('bg-', 'border-');
+
+                    return (
+                      <div key={`comment-${c.id}`} className="relative">
+                        <span className="absolute -left-[34px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-white ring-4 ring-white">
+                          <MessageSquare className="w-3.5 h-3.5 text-gray-400" />
+                        </span>
+                        <div className={`border-l-2 ${borderCls}/50 bg-gray-50 rounded-r-lg px-4 py-3 relative`}>
+                          <div className="flex items-center justify-between gap-2 mb-1.5">
+                            <span className="min-w-0 flex items-baseline gap-1.5">
+                              <span className="text-xs font-bold text-gray-800">{author}</span>
+                              {c.email && <span className="text-[10px] text-gray-400 truncate">{c.email}</span>}
+                            </span>
+                            <span className="inline-flex items-center gap-1 text-[10px] text-gray-400 shrink-0">
+                              <Clock className="w-3 h-3" />
+                              {formatDateTime(c.created_at)}
+                            </span>
+                          </div>
+                          <p className="text-xs text-gray-600 leading-relaxed whitespace-pre-wrap">{c.comment_text}</p>
+                        </div>
+                      </div>
+                    );
+                  }
+                })}
+              </div>
+            )}
+
+            {/* Composer */}
+            <div className="pt-4 border-t border-gray-100">
+              <div className="flex items-end gap-2">
+                <textarea
+                  value={commentText}
+                  onChange={(e) => setCommentText(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submitComment(); }}
+                  disabled={commentSubmitting}
+                  rows={2}
+                  placeholder="Add a reply/update…"
+                  className="flex-1 text-xs text-gray-800 placeholder-gray-400 bg-white border border-gray-200 rounded-xl px-3.5 py-2.5 resize-none focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-400 transition disabled:opacity-50"
+                />
+                <button
+                  onClick={submitComment}
+                  disabled={commentSubmitting || !commentText.trim()}
+                  title="Post reply (Ctrl/⌘ + Enter)"
+                  className="shrink-0 inline-flex items-center gap-1.5 text-xs font-bold text-white bg-gray-900 hover:bg-gray-700 px-4 py-2.5 rounded-xl transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                >
+                  {commentSubmitting
+                    ? <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    : <Send className="w-3.5 h-3.5" />}
+                  Send
+                </button>
+              </div>
+              {commentError && (
+                <p className="mt-2 text-xs font-semibold text-red-500 flex items-center gap-1.5">
+                  <AlertCircle className="w-3.5 h-3.5 shrink-0" /> {commentError}
+                </p>
+              )}
+            </div>
+
+          </div>
+        )}
+
+      </div>
+    </MainLayout>
+  );
+}
diff --git a/handlers/admin_status.go b/handlers/admin_status.go
index 7ea86b7..50c151c 100644
--- a/handlers/admin_status.go
+++ b/handlers/admin_status.go
@@ -160,7 +160,7 @@ func (h *AdminHandler) AdminFacultyPostStatus(c *gin.Context) {
 			go func() {
 				JeToAssign := review.JeToAssign
 				if err := services.SendPostMailToAdmins(JeToAssign, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send JE mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -180,11 +180,11 @@ func (h *AdminHandler) AdminFacultyPostStatus(c *gin.Context) {
 				var xen models.Admin
 				result := h.DB.Where("position = ?", position).Take(&xen)
 				if result.Error != nil {
-		       	 	log.Printf("failed to send AE mail for post %d", post.ID)
+		       	 	log.Printf("failed to send XEN mail for post %d", post.ID)
 					return
 				}
 				if err := services.SendPostMailToAdmins(xen.Email, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send XEN mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -307,10 +307,23 @@ func (h *AdminHandler) AdminFacultyPostStatus(c *gin.Context) {
 			post.Status = string(PendingJE)
 			// keep a audit
 			post.StatusAuditLogs = append(post.StatusAuditLogs, models.StatusAudit{Event: string(PendingJE), TimeStamp: time.Now()})
+			// send mail to je (assigned JE can be changed atp)
+			var je models.Admin
+			if review.JeToAssign != "" {
+				if err := h.DB.Where("email = ?", review.JeToAssign).Take(&je).Error; err == nil {
+					jeID := je.ID
+					post.AssignedJE_ID = &jeID
+					h.DB.Model(&post).Update("assigned_je_id", &jeID)
+				}
+			}
 			// send mail to je
-			// go func() {
-				
-			// } ()
+			go func() {
+				JeToAssign := review.JeToAssign
+				if err := services.SendPostMailToAdmins(JeToAssign, postURL); err != nil {
+		       	 	log.Printf("failed to send JE mail for post %d: %s", post.ID, err)
+					return
+				}
+			} ()
 		} else if review.Review == string(ResolvedAE) {
 			post.Status = string(ResolvedAE)
 			// keep a audit
@@ -327,11 +340,11 @@ func (h *AdminHandler) AdminFacultyPostStatus(c *gin.Context) {
 				var xen models.Admin
 				result := h.DB.Where("position = ?", position).Take(&xen)
 				if result.Error != nil {
-		       	 	log.Printf("failed to send AE mail for post %d", post.ID)
+		       	 	log.Printf("failed to send XEN mail for post %d", post.ID)
 					return
 				}
 				if err := services.SendPostMailToAdmins(xen.Email, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send XEN mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -493,7 +506,7 @@ func (h *AdminHandler) AdminWardenPostStatus(c *gin.Context) {
 			go func() {
 				JeToAssign := review.JeToAssign
 				if err := services.SendPostMailToAdmins(JeToAssign, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send JE mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -513,11 +526,11 @@ func (h *AdminHandler) AdminWardenPostStatus(c *gin.Context) {
 				var xen models.Admin
 				result := h.DB.Where("position = ?", position).Take(&xen)
 				if result.Error != nil {
-		       	 	log.Printf("failed to send AE mail for post %d", post.ID)
+		       	 	log.Printf("failed to send XEN mail for post %d", post.ID)
 					return
 				}
 				if err := services.SendPostMailToAdmins(xen.Email, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send XEN mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -640,10 +653,23 @@ func (h *AdminHandler) AdminWardenPostStatus(c *gin.Context) {
 			post.Status = string(PendingJE)
 			// keep a audit
 			post.StatusAuditLogs = append(post.StatusAuditLogs, models.StatusAudit{Event: string(PendingJE), TimeStamp: time.Now()})
+			// send mail to je (assigned JE can be changed atp)
+			var je models.Admin
+			if review.JeToAssign != "" {
+				if err := h.DB.Where("email = ?", review.JeToAssign).Take(&je).Error; err == nil {
+					jeID := je.ID
+					post.AssignedJE_ID = &jeID
+					h.DB.Model(&post).Update("assigned_je_id", &jeID)
+				}
+			}
 			// send mail to je
-			// go func() {
-			// 
-			// } ()
+			go func() {
+				JeToAssign := review.JeToAssign
+				if err := services.SendPostMailToAdmins(JeToAssign, postURL); err != nil {
+		       	 	log.Printf("failed to send JE mail for post %d: %s", post.ID, err)
+					return
+				}
+			} ()
 		} else if review.Review == string(ResolvedAE) {
 			post.Status = string(ResolvedAE)
 			// keep a audit
@@ -660,11 +686,11 @@ func (h *AdminHandler) AdminWardenPostStatus(c *gin.Context) {
 				var xen models.Admin
 				result := h.DB.Where("position = ?", position).Take(&xen)
 				if result.Error != nil {
-		       	 	log.Printf("failed to send AE mail for post %d", post.ID)
+		       	 	log.Printf("failed to send XEN mail for post %d", post.ID)
 					return
 				}
 				if err := services.SendPostMailToAdmins(xen.Email, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send XEN mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -846,11 +872,11 @@ func (h *AdminHandler) AdminCentreheadPostStatus(c *gin.Context) {
 				var xen models.Admin
 				result := h.DB.Where("position = ?", position).Take(&xen)
 				if result.Error != nil {
-		       	 	log.Printf("failed to send AE mail for post %d", post.ID)
+		       	 	log.Printf("failed to send XEN mail for post %d", post.ID)
 					return
 				}
 				if err := services.SendPostMailToAdmins(xen.Email, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send XEN mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
@@ -973,10 +999,23 @@ func (h *AdminHandler) AdminCentreheadPostStatus(c *gin.Context) {
 			post.Status = string(PendingJE)
 			// keep a audit
 			post.StatusAuditLogs = append(post.StatusAuditLogs, models.StatusAudit{Event: string(PendingJE), TimeStamp: time.Now()})
+			// send mail to je (assigned JE can be changed atp)
+			var je models.Admin
+			if review.JeToAssign != "" {
+				if err := h.DB.Where("email = ?", review.JeToAssign).Take(&je).Error; err == nil {
+					jeID := je.ID
+					post.AssignedJE_ID = &jeID
+					h.DB.Model(&post).Update("assigned_je_id", &jeID)
+				}
+			}
 			// send mail to je
-			// go func() {
-				
-			// } ()
+			go func() {
+				JeToAssign := review.JeToAssign
+				if err := services.SendPostMailToAdmins(JeToAssign, postURL); err != nil {
+		       	 	log.Printf("failed to send JE mail for post %d: %s", post.ID, err)
+					return
+				}
+			} ()
 		} else if review.Review == string(ResolvedAE) {
 			post.Status = string(ResolvedAE)
 			// keep a audit
@@ -993,11 +1032,11 @@ func (h *AdminHandler) AdminCentreheadPostStatus(c *gin.Context) {
 				var xen models.Admin
 				result := h.DB.Where("position = ?", position).Take(&xen)
 				if result.Error != nil {
-		       	 	log.Printf("failed to send AE mail for post %d", post.ID)
+		       	 	log.Printf("failed to send XEN mail for post %d", post.ID)
 					return
 				}
 				if err := services.SendPostMailToAdmins(xen.Email, postURL); err != nil {
-		       	 	log.Printf("failed to send AE mail for post %d: %s", post.ID, err)
+		       	 	log.Printf("failed to send XEN mail for post %d: %s", post.ID, err)
 					return
 				}
 			} ()
diff --git a/handlers/post.go b/handlers/post.go
new file mode 100644
index 0000000..df9c405
--- /dev/null
+++ b/handlers/post.go
@@ -0,0 +1,91 @@
+package handlers
+
+import (
+	"errors"
+	"strconv"
+
+	"github.com/ayush00git/cms-web/middleware"
+	"github.com/ayush00git/cms-web/models"
+	"github.com/gin-gonic/gin"
+	"gorm.io/gorm"
+)
+
+// GetPostByID fetches a single post for the logged in user by role and post_id
+func (h *PostHandler) GetPostByID(c *gin.Context) {
+	email, exists := c.Get(middleware.EmailKey)
+	if !exists {
+		c.JSON(401, gin.H{"error": "unauthenticated user"})
+		return
+	}
+
+	role := c.Param("role")
+	postIDString := c.Param("post_id")
+	postIDU64, err := strconv.ParseUint(postIDString, 10, 64)
+	if err != nil {
+		c.JSON(400, gin.H{"error": "failed to parse post_id"})
+		return
+	}
+	postID := uint(postIDU64)
+
+	switch role {
+	case "faculty":
+		var faculty models.Faculty
+		result := h.DB.Where("email = ?", email).Take(&faculty)
+		if result.Error != nil {
+			c.JSON(401, gin.H{"error": "user not found"})
+			return
+		}
+		var post models.FacultyPost
+		result = h.DB.Preload("Comments").Where("id = ? AND faculty_id = ?", postID, faculty.ID).Take(&post)
+		if result.Error != nil {
+			if errors.Is(result.Error, gorm.ErrRecordNotFound) {
+				c.JSON(404, gin.H{"error": "requested entry no longer exists"})
+				return
+			}
+			c.JSON(500, gin.H{"error": "internal server error"})
+			return
+		}
+		c.JSON(200, gin.H{"success": "post fetched successfully", "post": post})
+
+	case "warden":
+		var warden models.Warden
+		result := h.DB.Where("email = ?", email).Take(&warden)
+		if result.Error != nil {
+			c.JSON(401, gin.H{"error": "user not found"})
+			return
+		}
+		var post models.WardenPost
+		result = h.DB.Preload("Comments").Where("id = ? AND warden_id = ?", postID, warden.ID).Take(&post)
+		if result.Error != nil {
+			if errors.Is(result.Error, gorm.ErrRecordNotFound) {
+				c.JSON(404, gin.H{"error": "requested entry no longer exists"})
+				return
+			}
+			c.JSON(500, gin.H{"error": "internal server error"})
+			return
+		}
+		c.JSON(200, gin.H{"success": "post fetched successfully", "post": post})
+
+	case "centrehead":
+		var head models.Centrehead
+		result := h.DB.Where("email = ?", email).Take(&head)
+		if result.Error != nil {
+			c.JSON(401, gin.H{"error": "user not found"})
+			return
+		}
+		var post models.CentreheadPost
+		result = h.DB.Preload("Comments").Where("id = ? AND centrehead_id = ?", postID, head.ID).Take(&post)
+		if result.Error != nil {
+			if errors.Is(result.Error, gorm.ErrRecordNotFound) {
+				c.JSON(404, gin.H{"error": "requested entry no longer exists"})
+				return
+			}
+			c.JSON(500, gin.H{"error": "internal server error"})
+			return
+		}
+		c.JSON(200, gin.H{"success": "post fetched successfully", "post": post})
+
+	default:
+		c.JSON(400, gin.H{"error": "undefined role"})
+	}
+}
diff --git a/routes/post.go b/routes/post.go
index 16c9221..50d092e 100644
--- a/routes/post.go
+++ b/routes/post.go
@@ -27,6 +27,7 @@ func PostRoute(e *gin.Engine, h *handlers.PostHandler) {
 	e.GET("/api/post/faculty", middleware.IsAuthenticated(), h.GetFacultyPosts)
 	e.GET("/api/post/warden", middleware.IsAuthenticated(), h.GetWardenPosts)
 	e.GET("/api/post/centrehead", middleware.IsAuthenticated(), h.GetCentreheadPosts)
+	e.GET("/api/post/:role/:post_id", middleware.IsAuthenticated(), h.GetPostByID)
 
 	// APIs for comments on the posts
 	e.POST("/api/post/faculty/comment/:post_id", middleware.IsAuthenticated() ,h.FacultyPostComment)
diff --git a/test/helpers_test.go b/test/helpers_test.go
index ec9a487..a49ed39 100644
--- a/test/helpers_test.go
+++ b/test/helpers_test.go
@@ -148,6 +148,7 @@ func newPostRouter(db *gorm.DB, auth gin.HandlerFunc) *gin.Engine {
 	e.GET("/api/post/faculty", auth, h.GetFacultyPosts)
 	e.GET("/api/post/warden", auth, h.GetWardenPosts)
 	e.GET("/api/post/centrehead", auth, h.GetCentreheadPosts)
+	e.GET("/api/post/:role/:post_id", auth, h.GetPostByID)
 
 	e.POST("/api/post/faculty/comment/:post_id", auth, h.FacultyPostComment)
 	e.POST("/api/post/warden/comment/:post_id", auth, h.WardenPostComment)
diff --git a/test/post_get_test.go b/test/post_get_test.go
new file mode 100644
index 0000000..5aec81f
--- /dev/null
+++ b/test/post_get_test.go
@@ -0,0 +1,112 @@
+package test
+
+import (
+	"encoding/json"
+	"net/http"
+	"testing"
+
+	"github.com/ayush00git/cms-web/models"
+)
+
+func TestFacultyPost_GetByID_Success(t *testing.T) {
+	db := newTestDB(t)
+	f := seedFaculty(t, db, "fac.getid@iit.ac.in")
+	post := models.FacultyPost{
+		FacultyID:   f.ID,
+		Place:       models.PlaceDepartmental,
+		TypeOfPost:  models.TypeCivil,
+		Title:       "Title 1",
+		Description: "Desc 1",
+	}
+	db.Create(&post)
+
+	// Add a comment
+	comment := models.Comment{
+		CommentableID:   post.ID,
+		CommentableType: "faculty_posts",
+		Content:         "Hello comment",
+		Email:           "staff@iit.ac.in",
+		Role:            "admin",
+	}
+	db.Create(&comment)
+
+	e := newPostRouter(db, authAs(f.ID, f.Email))
+	rec := doRequest(t, e, http.MethodGet, "/api/post/faculty/1", nil)
+
+	assertStatus(t, rec, 200)
+
+	var res struct {
+		Post models.FacultyPost `json:"post"`
+	}
+	if err := json.Unmarshal(rec.Body.Bytes(), &res); err != nil {
+		t.Fatalf("failed to decode response: %v", err)
+	}
+
+	if res.Post.ID != post.ID {
+		t.Fatalf("expected post ID %d, got %d", post.ID, res.Post.ID)
+	}
+	if len(res.Post.Comments) != 1 {
+		t.Fatalf("expected 1 preloaded comment, got %d", len(res.Post.Comments))
+	}
+}
+
+func TestWardenPost_GetByID_Success(t *testing.T) {
+	db := newTestDB(t)
+	w := seedWarden(t, db, "war.getid@iit.ac.in")
+	post := models.WardenPost{
+		WardenID:    w.ID,
+		RoomNumber:  "B-2",
+		TypeOfPost:  models.TypeCivil,
+		Title:       "Title 2",
+		Description: "Desc 2",
+	}
+	db.Create(&post)
+
+	e := newPostRouter(db, authAs(w.ID, w.Email))
+	rec := doRequest(t, e, http.MethodGet, "/api/post/warden/1", nil)
+
+	assertStatus(t, rec, 200)
+
+	var res struct {
+		Post models.WardenPost `json:"post"`
+	}
+	if err := json.Unmarshal(rec.Body.Bytes(), &res); err != nil {
+		t.Fatalf("failed to decode response: %v", err)
+	}
+
+	if res.Post.ID != post.ID {
+		t.Fatalf("expected post ID %d, got %d", post.ID, res.Post.ID)
+	}
+}
+
+func TestFacultyPost_GetByID_NotFound(t *testing.T) {
+	db := newTestDB(t)
+	f := seedFaculty(t, db, "fac.getidnf@iit.ac.in")
+
+	e := newPostRouter(db, authAs(f.ID, f.Email))
+	rec := doRequest(t, e, http.MethodGet, "/api/post/faculty/999", nil)
+
+	assertStatus(t, rec, 404)
+}
+
+func TestFacultyPost_GetByID_WrongUser(t *testing.T) {
+	db := newTestDB(t)
+	f1 := seedFaculty(t, db, "fac1@iit.ac.in")
+	f2 := seedFaculty(t, db, "fac2@iit.ac.in")
+
+	post := models.FacultyPost{
+		FacultyID:   f1.ID,
+		Place:       models.PlaceDepartmental,
+		TypeOfPost:  models.TypeCivil,
+		Title:       "Title 1",
+		Description: "Desc 1",
+	}
+	db.Create(&post)
+
+	// User 2 tries to access User 1's post
+	e := newPostRouter(db, authAs(f2.ID, f2.Email))
+	rec := doRequest(t, e, http.MethodGet, "/api/post/faculty/1", nil)
+
+	// Should not find the post as it filters by user ID
+	assertStatus(t, rec, 404)
+}