diff --git a/app/eslint.config.js b/app/eslint.config.js
index ef614d2..c2a386b 100644
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@@ -18,5 +18,8 @@ export default defineConfig([
     languageOptions: {
       globals: globals.browser,
     },
+    rules: {
+      'react-hooks/set-state-in-effect': 'off',
+    },
   },
 ])
diff --git a/app/src/components/ComplaintCard.tsx b/app/src/components/ComplaintCard.tsx
index a423cb8..b93bfe0 100644
--- a/app/src/components/ComplaintCard.tsx
+++ b/app/src/components/ComplaintCard.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import {
   Zap, Hammer, Calendar, MapPin, BedDouble, MessageSquare, ChevronRight,
 } from 'lucide-react';
-import { POST_PLACES } from '../constants/models';
+
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -74,7 +74,6 @@ function statusStyle(s: string): StatusStyle {
   return STATUS_CONFIG[norm] ?? { ...FALLBACK, label: s.replace(/_/g, ' ') };
 }
 
-const STAGES = ['XEN', 'AE', 'JE'];
 
 function formatDate(iso: string) {
   return new Date(iso).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
diff --git a/app/src/pages/Landing.tsx b/app/src/pages/Landing.tsx
index dbc2518..99b6d3c 100644
--- a/app/src/pages/Landing.tsx
+++ b/app/src/pages/Landing.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { ArrowRight, Search } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { MainLayout } from '../components/layout/MainLayout';
 
@@ -15,7 +15,6 @@ export function Landing() {
   const [profile, setProfile]           = useState<Profile>(null);
   const [isAuth, setIsAuth]             = useState<boolean | null>(null);
   const [showLoginMenu, setShowLoginMenu] = useState(false);
-  const [trackId, setTrackId]           = useState('');
   const menuRef                         = useRef<HTMLDivElement>(null);
   const navigate                        = useNavigate();
 
@@ -89,28 +88,6 @@ export function Landing() {
                 </Link>
               </div>
             </div>
-            <button className="inline-flex items-center gap-2 border border-[#16a34a] text-[#16a34a] hover:bg-[#E6F7ED] text-sm font-semibold px-6 py-3 rounded-lg transition-colors duration-200 cursor-pointer">
-              Track Status <Search className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* Track Bar */}
-      <section className="bg-[#F5F5F5] border-b border-[#E5E5E5] py-4">
-        <div className="container mx-auto px-6 flex flex-col sm:flex-row items-center gap-3">
-          <span className="text-xs font-bold uppercase tracking-widest text-[#666666] whitespace-nowrap">Quick Track</span>
-          <div className="flex flex-1 max-w-xl border border-[#111111] rounded-lg overflow-hidden bg-white">
-            <input
-              type="text"
-              value={trackId}
-              onChange={e => setTrackId(e.target.value)}
-              placeholder="Enter Complaint ID — e.g. CMS-1042"
-              className="flex-1 px-4 py-2.5 text-sm text-[#111111] placeholder-[#999999] outline-none bg-transparent"
-            />
-            <button className="bg-[#16a34a] hover:bg-[#15803d] text-white text-xs font-bold uppercase tracking-wider px-5 flex items-center gap-1.5 transition-colors duration-200 cursor-pointer">
-              <Search className="w-3.5 h-3.5" /> Track
-            </button>
           </div>
         </div>
       </section>
@@ -158,8 +135,7 @@ export function Landing() {
                 { step: '01', text: 'Select the correct category — Civil or Electrical — to ensure proper routing.' },
                 { step: '02', text: 'Provide the exact building and room number in the complaint description.' },
                 { step: '03', text: 'Only Wardens may file complaints for hostel common areas.' },
-                { step: '04', text: 'Attach relevant photos to help the team assess the issue faster.' },
-                { step: '05', text: 'Do not file duplicate complaints for the same issue.' },
+                { step: '04', text: 'Do not file duplicate complaints for the same issue.' },
               ].map(({ step, text }) => (
                 <div key={step} className="flex gap-4 items-start">
                   <span className="flex-shrink-0 text-xs font-bold text-[#666666] w-6 pt-0.5">{step}</span>
diff --git a/app/src/pages/admin/AdminPostView.tsx b/app/src/pages/admin/AdminPostView.tsx
index 2a8dc79..6f1fb8b 100644
--- a/app/src/pages/admin/AdminPostView.tsx
+++ b/app/src/pages/admin/AdminPostView.tsx
@@ -17,6 +17,8 @@ import {
   Pencil,
   Trash2,
   Info,
+  Check,
+  Clock,
 } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
@@ -294,7 +296,7 @@ export function AdminPostView() {
       .then(async (res) => {
         if (!res.ok) {
           let msg = `Server error (${res.status})`;
-          try { const b = await res.json(); if (b?.error) msg = b.error; } catch {}
+          try { const b = await res.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
           const err: Error & { status?: number } = new Error(msg);
           err.status = res.status;
           throw err;
@@ -350,7 +352,7 @@ export function AdminPostView() {
 
       if (!res.ok) {
         let msg = `Failed to edit comment (${res.status})`;
-        try { const b = await res.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await res.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -384,7 +386,7 @@ export function AdminPostView() {
 
       if (!res.ok) {
         let msg = `Failed to delete comment (${res.status})`;
-        try { const b = await res.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await res.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -423,7 +425,7 @@ export function AdminPostView() {
       });
       if (!commentRes.ok) {
         let msg = `Failed to post comment (${commentRes.status})`;
-        try { const b = await commentRes.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await commentRes.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -436,7 +438,7 @@ export function AdminPostView() {
       });
       if (!statusRes.ok) {
         let msg = `Comment posted but status update failed (${statusRes.status})`;
-        try { const b = await statusRes.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await statusRes.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -480,7 +482,7 @@ export function AdminPostView() {
       });
       if (!commentRes.ok) {
         let msg = `Failed to post comment (${commentRes.status})`;
-        try { const b = await commentRes.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await commentRes.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -493,7 +495,7 @@ export function AdminPostView() {
       });
       if (!statusRes.ok) {
         let msg = `Comment posted but status update failed (${statusRes.status})`;
-        try { const b = await statusRes.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await statusRes.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -534,7 +536,7 @@ export function AdminPostView() {
       });
       if (!commentRes.ok) {
         let msg = `Failed to post comment (${commentRes.status})`;
-        try { const b = await commentRes.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await commentRes.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
 
@@ -755,15 +757,56 @@ export function AdminPostView() {
             </h2>
 
             {/* Combined Timeline */}
-            {timelineItems.length === 0 ? (
-              <p className="text-sm text-gray-400 italic mb-8">No history or comments yet.</p>
-            ) : (
-              <div className="relative border-l border-gray-200 ml-4 pl-6 space-y-6 mb-8">
-                {timelineItems.map((item, idx) => {
+            <div className="relative space-y-6 mt-6">
+              {/* Connecting pipeline/line */}
+              <div className="absolute left-[15px] top-2 bottom-6 w-[2px] bg-gray-200" />
+
+              {timelineItems.length === 0 ? (
+                <div className="relative pl-10 py-2">
+                  <p className="text-xs text-gray-400 font-medium">No activity or responses yet.</p>
+                </div>
+              ) : (
+                timelineItems.map((item, idx) => {
                   if (item.type === 'audit') {
                     const audit = item.data;
                     const normEvent = audit.event.toLowerCase();
-                    const dotColor = STATUS_DOT[normEvent] ?? 'bg-gray-400';
+                    
+                    const auditStyle = (() => {
+                      if (normEvent.includes('resolved')) {
+                        return {
+                          bg: 'bg-emerald-50 border-emerald-300 text-emerald-600',
+                          icon: <Check className="w-3.5 h-3.5 text-emerald-600" />,
+                          textCls: 'text-emerald-700 font-bold',
+                        };
+                      }
+                      if (normEvent === 'pending_xen') {
+                        return {
+                          bg: 'bg-amber-50 border-amber-300 text-amber-600',
+                          icon: <Clock className="w-3.5 h-3.5 text-amber-600" />,
+                          textCls: 'text-amber-700 font-bold',
+                        };
+                      }
+                      if (normEvent === 'pending_ae') {
+                        return {
+                          bg: 'bg-sky-50 border-sky-300 text-sky-600',
+                          icon: <Clock className="w-3.5 h-3.5 text-sky-600" />,
+                          textCls: 'text-sky-700 font-bold',
+                        };
+                      }
+                      if (normEvent === 'pending_je') {
+                        return {
+                          bg: 'bg-violet-50 border-violet-300 text-violet-600',
+                          icon: <Clock className="w-3.5 h-3.5 text-violet-600" />,
+                          textCls: 'text-violet-700 font-bold',
+                        };
+                      }
+                      return {
+                        bg: 'bg-gray-50 border-gray-300 text-gray-500',
+                        icon: <Clock className="w-3.5 h-3.5 text-gray-500" />,
+                        textCls: 'text-gray-700 font-bold',
+                      };
+                    })();
+
                     const eventText = (() => {
                       if (normEvent === 'pending_xen') return 'Sent to XEN for review.';
                       if (normEvent === 'pending_ae') return 'Sent to AE for review.';
@@ -775,17 +818,15 @@ export function AdminPostView() {
                     })();
                     
                     return (
-                      <div key={`audit-${idx}`} className="relative">
-                        <span className="absolute -left-[30px] top-1.5 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-xs font-semibold text-gray-500">
+                      <div key={`audit-${idx}`} className="relative pl-10 min-h-[32px] flex items-center py-0.5">
+                        <div className={`absolute left-1 top-[4px] flex h-6 w-6 items-center justify-center rounded-full bg-white border ${auditStyle.bg} shadow-sm z-10`}>
+                          {auditStyle.icon}
+                        </div>
+                        <div className="flex flex-wrap items-baseline gap-x-2 text-xs">
+                          <span className={`${auditStyle.textCls}`}>{eventText}</span>
+                          <span className="text-[10px] text-gray-400 font-mono">
                             {formatDateTime(audit.timestamp)}
                           </span>
-                          <span className="text-sm font-bold text-gray-800">
-                            {eventText}
-                          </span>
                         </div>
                       </div>
                     );
@@ -798,15 +839,15 @@ export function AdminPostView() {
                     const editExpired = isEditWindowExpired(c.created_at);
 
                     return (
-                      <div key={`comment-${c.id}`} className="relative">
-                        <span className="absolute -left-[34px] top-1 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 border-[#ff9900]/50 bg-gray-50 rounded-r-lg px-4 py-3 group/comment relative">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="text-xs font-bold text-gray-800">{who}</span>
-                            {c.email && <span className="text-[11px] text-gray-400 truncate max-w-[150px] sm:max-w-none">{c.email}</span>}
-                            <span className="ml-auto text-[11px] text-gray-400 flex items-center gap-2">
+                      <div key={`comment-${c.id}`} className="relative pl-10">
+                        {/* Comment Bubble in GitHub Style */}
+                        <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden group/comment">
+                          <div className="bg-gray-50 border-b border-gray-150 px-4 py-2 flex items-center justify-between gap-2">
+                            <span className="min-w-0 flex items-baseline gap-1.5">
+                              <span className="text-xs font-bold text-gray-800">{who}</span>
+                              {c.email && <span className="text-[10px] text-gray-400 truncate max-w-[150px] sm:max-w-none">{c.email}</span>}
+                            </span>
+                            <span className="ml-auto text-[10px] text-gray-400 flex items-center gap-2">
                               {formatDateTime(c.created_at)}
                               
                               {isMyComment && !isEditing && !editExpired && (
@@ -820,7 +861,7 @@ export function AdminPostView() {
                                     className="p-0.5 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200/50 transition cursor-pointer"
                                     title="Edit comment"
                                   >
-                                    <Pencil className="w-3 h-3" />
+                                    <Pencil className="w-3.5 h-3.5" />
                                   </button>
                                   <button
                                     onClick={() => handleDeleteComment(c.id)}
@@ -828,182 +869,187 @@ export function AdminPostView() {
                                     className="p-0.5 rounded text-gray-400 hover:text-red-600 hover:bg-red-50 transition cursor-pointer"
                                     title="Delete comment"
                                   >
-                                    <Trash2 className="w-3 h-3" />
+                                    <Trash2 className="w-3.5 h-3.5" />
                                   </button>
                                 </span>
                               )}
                             </span>
                           </div>
 
-                          {isEditing ? (
-                            <div className="mt-2">
-                              <textarea
-                                value={editingText}
-                                onChange={(e) => setEditingText(e.target.value)}
-                                disabled={isBusy}
-                                rows={2}
-                                className="w-full text-sm text-gray-800 bg-white border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900] transition resize-none"
-                              />
-                              <div className="mt-2 flex justify-end gap-2">
-                                <button
-                                  onClick={() => setEditingCommentId(null)}
+                          <div className="px-4 py-3 relative">
+                            {isEditing ? (
+                              <div className="mt-1">
+                                <textarea
+                                  value={editingText}
+                                  onChange={(e) => setEditingText(e.target.value)}
                                   disabled={isBusy}
-                                  className="border border-gray-200 text-gray-500 hover:bg-gray-100 font-bold text-[11px] px-2.5 py-1.5 rounded transition cursor-pointer"
-                                >
-                                  Cancel
-                                </button>
-                                <button
-                                  onClick={() => handleEditComment(c.id)}
-                                  disabled={isBusy || !editingText.trim()}
-                                  className="bg-[#2d2d2d] text-white hover:bg-[#ff9900] font-bold text-[11px] px-3 py-1.5 rounded transition disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1"
-                                >
-                                  {isBusy && <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />}
-                                  Save
-                                </button>
+                                  rows={2}
+                                  className="w-full text-xs text-gray-800 bg-white border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900] transition resize-none"
+                                />
+                                <div className="mt-2 flex justify-end gap-2">
+                                  <button
+                                    onClick={() => setEditingCommentId(null)}
+                                    disabled={isBusy}
+                                    className="border border-gray-200 text-gray-500 hover:bg-gray-100 font-bold text-[10px] px-2.5 py-1.5 rounded transition cursor-pointer"
+                                  >
+                                    Cancel
+                                  </button>
+                                  <button
+                                    onClick={() => handleEditComment(c.id)}
+                                    disabled={isBusy || !editingText.trim()}
+                                    className="bg-[#2d2d2d] text-white hover:bg-[#ff9900] font-bold text-[10px] px-3 py-1.5 rounded transition disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1"
+                                  >
+                                    {isBusy && <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />}
+                                    Save
+                                  </button>
+                                </div>
                               </div>
-                            </div>
-                          ) : (
-                            <p className="text-sm text-gray-700 leading-relaxed break-words">{c.comment_text}</p>
-                          )}
+                            ) : (
+                              <p className="text-xs text-gray-600 leading-relaxed break-words whitespace-pre-wrap">{c.comment_text}</p>
+                            )}
+                          </div>
                         </div>
                       </div>
                     );
                   }
-                })}
-              </div>
-            )}
-
-            {/* ── Comment + action area — always shown; unlocked for any logged-in admin ── */}
-            <div>
-              <label className="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2">
-                Comment &amp; Update Status
-              </label>
-              <textarea
-                value={commentText}
-                onChange={(e) => setCommentText(e.target.value)}
-                disabled={acting || !adminType}
-                placeholder={adminType
-                  ? 'Add a comment…'
-                  : 'No actions available.'}
-                rows={3}
-                className="w-full text-sm text-gray-800 placeholder-gray-300 bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900] transition disabled:opacity-50 disabled:cursor-not-allowed"
-              />
-
-              {/* Feedback */}
-              {actError && (
-                <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" />
-                  {actError}
-                </p>
-              )}
-              {actSuccess && (
-                <p className="mt-2 text-xs font-semibold text-emerald-600 flex items-center gap-1.5">
-                  <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
-                  {actSuccess}
-                </p>
+                })
               )}
 
-              {/* Action buttons */}
-              {adminType && (
-                <div className="mt-3 flex flex-wrap justify-end gap-2">
-                  <span
-                    className={!commentText.trim() ? 'inline-block cursor-not-allowed' : 'inline-block'}
-                    title={!commentText.trim() ? 'comment content required' : undefined}
-                  >
-                    <button
-                      onClick={handlePostCommentOnly}
-                      disabled={acting || !commentText.trim()}
-                      className="inline-flex items-center gap-2 text-xs font-bold text-white bg-[#2d2d2d] hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer"
-                    >
-                      {acting ? (
-                        <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                      ) : <MessageSquare className="w-3.5 h-3.5" />}
-                      Post Comment
-                    </button>
-                  </span>
-
-                  {canAct && actionBtns.map((btn) => {
-                    const isAssignBtn = btn.label === 'Assign to JE';
-                    if (isAssignBtn) {
-                      const showBlockedTooltip = !commentText.trim();
-                      return (
-                        <span
-                          key={btn.review}
-                          className={showBlockedTooltip ? 'inline-block cursor-not-allowed' : 'inline-block'}
-                          title={showBlockedTooltip ? 'comment content required' : undefined}
-                        >
-                          <div className="relative inline-block text-left">
-                            <button
-                              type="button"
-                              onClick={() => {
-                                if (!jeDropdownOpen) {
-                                  fetchJEs();
-                                }
-                                setJeDropdownOpen(!jeDropdownOpen);
-                              }}
-                              disabled={acting || !commentText.trim()}
-                              className="inline-flex items-center gap-2 text-xs font-bold text-white bg-[#ff9900] hover:bg-[#e68a00] px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer"
-                            >
-                              {acting ? (
-                                <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                              ) : btn.icon}
-                              {btn.label}
-                            </button>
-                            {jeDropdownOpen && (
-                              <>
-                                <div className="fixed inset-0 z-40" onClick={() => setJeDropdownOpen(false)} />
-                                <div className="absolute right-0 bottom-full mb-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
-                                  <div className="py-1">
-                                    {jes.length === 0 ? (
-                                      <span className="block px-4 py-2 text-xs text-gray-500">No JEs available</span>
-                                    ) : (
-                                      jes.map((je) => (
-                                        <button
-                                          key={je.id}
-                                          type="button"
-                                          onClick={() => handleAssignToJE(je.email)}
-                                          className="w-full text-left block px-4 py-2 text-xs text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors cursor-pointer relative z-50"
-                                        >
-                                          {je.email}
-                                        </button>
-                                      ))
-                                    )}
-                                  </div>
-                                </div>
-                              </>
-                            )}
-                          </div>
-                        </span>
-                      );
-                    }
-
-                    const isResolvedBtn = btn.label === 'Resolved';
-                    const buttonColorClass = isResolvedBtn
-                      ? 'bg-red-600 hover:bg-red-700'
-                      : 'bg-[#ff9900] hover:bg-[#e68a00]';
-                    const showBlockedTooltip = !commentText.trim();
-
-                    return (
+              {/* ── Comment + action area ── */}
+              <div className="relative pl-10">
+                <div className="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3">
+                  <label className="block text-xs font-bold uppercase tracking-wider text-gray-400">
+                    Comment &amp; Update Status
+                  </label>
+                  <textarea
+                    value={commentText}
+                    onChange={(e) => setCommentText(e.target.value)}
+                    disabled={acting || !adminType}
+                    placeholder={adminType
+                      ? 'Add a comment…'
+                      : 'No actions available.'}
+                    rows={3}
+                    className="w-full text-xs text-gray-800 placeholder-gray-300 bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900] transition disabled:opacity-50 disabled:cursor-not-allowed"
+                  />
+
+                  {/* Feedback */}
+                  {actError && (
+                    <p className="text-xs font-semibold text-red-500 flex items-center gap-1.5">
+                      <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+                      {actError}
+                    </p>
+                  )}
+                  {actSuccess && (
+                    <p className="text-xs font-semibold text-emerald-600 flex items-center gap-1.5">
+                      <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
+                      {actSuccess}
+                    </p>
+                  )}
+
+                  {/* Action buttons */}
+                  {adminType && (
+                    <div className="flex flex-wrap justify-end gap-2 pt-1">
                       <span
-                        key={btn.review}
-                        className={showBlockedTooltip ? 'inline-block cursor-not-allowed' : 'inline-block'}
-                        title={showBlockedTooltip ? 'comment content required' : undefined}
+                        className={!commentText.trim() ? 'inline-block cursor-not-allowed' : 'inline-block'}
+                        title={!commentText.trim() ? 'comment content required' : undefined}
                       >
                         <button
-                          onClick={() => handleAction(btn.review)}
-                          disabled={disabled}
-                          className={`inline-flex items-center gap-2 text-xs font-bold text-white ${buttonColorClass} px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer`}
+                          onClick={handlePostCommentOnly}
+                          disabled={acting || !commentText.trim()}
+                          className="inline-flex items-center gap-2 text-xs font-bold text-white bg-[#2d2d2d] hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer"
                         >
                           {acting ? (
                             <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                          ) : btn.icon}
-                          {btn.label}
+                          ) : <MessageSquare className="w-3.5 h-3.5" />}
+                          Post Comment
                         </button>
                       </span>
-                    );
-                  })}
+
+                      {canAct && actionBtns.map((btn) => {
+                        const isAssignBtn = btn.label === 'Assign to JE';
+                        if (isAssignBtn) {
+                          const showBlockedTooltip = !commentText.trim();
+                          return (
+                            <span
+                              key={btn.review}
+                              className={showBlockedTooltip ? 'inline-block cursor-not-allowed' : 'inline-block'}
+                              title={showBlockedTooltip ? 'comment content required' : undefined}
+                            >
+                              <div className="relative inline-block text-left">
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    if (!jeDropdownOpen) {
+                                      fetchJEs();
+                                    }
+                                    setJeDropdownOpen(!jeDropdownOpen);
+                                  }}
+                                  disabled={acting || !commentText.trim()}
+                                  className="inline-flex items-center gap-2 text-xs font-bold text-white bg-[#ff9900] hover:bg-[#e68a00] px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer"
+                                >
+                                  {acting ? (
+                                    <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                  ) : btn.icon}
+                                  {btn.label}
+                                </button>
+                                {jeDropdownOpen && (
+                                  <>
+                                    <div className="fixed inset-0 z-40" onClick={() => setJeDropdownOpen(false)} />
+                                    <div className="absolute right-0 bottom-full mb-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+                                      <div className="py-1">
+                                        {jes.length === 0 ? (
+                                          <span className="block px-4 py-2 text-xs text-gray-500">No JEs available</span>
+                                        ) : (
+                                          jes.map((je) => (
+                                            <button
+                                              key={je.id}
+                                              type="button"
+                                              onClick={() => handleAssignToJE(je.email)}
+                                              className="w-full text-left block px-4 py-2 text-xs text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors cursor-pointer relative z-50"
+                                            >
+                                              {je.email}
+                                            </button>
+                                          ))
+                                        )}
+                                      </div>
+                                    </div>
+                                  </>
+                                )}
+                              </div>
+                            </span>
+                          );
+                        }
+
+                        const isResolvedBtn = btn.label === 'Resolved';
+                        const buttonColorClass = isResolvedBtn
+                          ? 'bg-red-600 hover:bg-red-700'
+                          : 'bg-[#ff9900] hover:bg-[#e68a00]';
+                        const showBlockedTooltip = !commentText.trim();
+
+                        return (
+                          <span
+                            key={btn.review}
+                            className={showBlockedTooltip ? 'inline-block cursor-not-allowed' : 'inline-block'}
+                            title={showBlockedTooltip ? 'comment content required' : undefined}
+                          >
+                            <button
+                              onClick={() => handleAction(btn.review)}
+                              disabled={disabled}
+                              className={`inline-flex items-center gap-2 text-xs font-bold text-white ${buttonColorClass} px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer`}
+                            >
+                              {acting ? (
+                                <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                              ) : btn.icon}
+                              {btn.label}
+                            </button>
+                          </span>
+                        );
+                      })}
+                    </div>
+                  )}
                 </div>
-              )}
+              </div>
+
             </div>
           </div>
 
diff --git a/app/src/pages/auth/VerifyAccount.tsx b/app/src/pages/auth/VerifyAccount.tsx
index aa0e4af..f0d5460 100644
--- a/app/src/pages/auth/VerifyAccount.tsx
+++ b/app/src/pages/auth/VerifyAccount.tsx
@@ -13,20 +13,17 @@ const roleLoginRoute: Record<string, string> = {
 export function VerifyAccount() {
   const [searchParams] = useSearchParams();
   const navigate        = useNavigate();
+  const token           = searchParams.get('token');
 
-  const [status,    setStatus]    = useState<VerifyStatus>('loading');
-  const [message,   setMessage]   = useState('');
+  const [status,    setStatus]    = useState<VerifyStatus>(token ? 'loading' : 'no-token');
+  const [message,   setMessage]   = useState(token ? '' : 'No verification token found in the link.');
   const [countdown, setCountdown] = useState(3);
 
   const intervalRef  = useRef<ReturnType<typeof setInterval> | null>(null);
   const controllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
-    const token = searchParams.get('token');
-
     if (!token) {
-      setStatus('no-token');
-      setMessage('No verification token found in the link.');
       return;
     }
 
diff --git a/app/src/pages/post/CentreHeadPost.tsx b/app/src/pages/post/CentreHeadPost.tsx
index b81d654..8ecfa53 100644
--- a/app/src/pages/post/CentreHeadPost.tsx
+++ b/app/src/pages/post/CentreHeadPost.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 import { POST_TYPES } from '../../constants/models';
 
 export function CentreHeadPost() {
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
     type_of_post: '',
     title: '',
@@ -39,6 +41,9 @@ export function CentreHeadPost() {
         setStatus('success');
         setMessage(data.success || 'Complaint submitted successfully!');
         setFormData({ type_of_post: '', title: '', description: '' });
+        if (data.post?.id) {
+          navigate(`/post/centrehead/${data.post.id}`);
+        }
       } else {
         setStatus('error');
         const errorMsg = data.error || Object.values(data)[0] || 'An error occurred';
diff --git a/app/src/pages/post/FacultyPost.tsx b/app/src/pages/post/FacultyPost.tsx
index d879285..3349183 100644
--- a/app/src/pages/post/FacultyPost.tsx
+++ b/app/src/pages/post/FacultyPost.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 import { POST_PLACES, POST_TYPES } from '../../constants/models';
 
 export function FacultyPost() {
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
     place: '',
     type_of_post: '',
@@ -40,6 +42,9 @@ export function FacultyPost() {
         setStatus('success');
         setMessage(data.success || 'Complaint submitted successfully!');
         setFormData({ place: '', type_of_post: '', title: '', description: '' });
+        if (data.post?.id) {
+          navigate(`/post/faculty/${data.post.id}`);
+        }
       } else {
         setStatus('error');
         const errorMsg = data.error || Object.values(data)[0] || 'An error occurred';
diff --git a/app/src/pages/post/PostView.tsx b/app/src/pages/post/PostView.tsx
index 8361ee3..16cacdc 100644
--- a/app/src/pages/post/PostView.tsx
+++ b/app/src/pages/post/PostView.tsx
@@ -3,7 +3,7 @@ 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,
+  Clock,
 } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 import { POST_PLACES } from '../../constants/models';
@@ -270,7 +270,7 @@ export function PostView() {
       });
       if (!res.ok) {
         let msg = `Failed to post comment (${res.status})`;
-        try { const b = await res.json(); if (b?.error) msg = b.error; } catch {}
+        try { const b = await res.json(); if (b?.error) msg = b.error; } catch { /* ignore */ }
         throw new Error(msg);
       }
       setCommentText('');
@@ -460,28 +460,66 @@ export function PostView() {
 
         {/* 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">
+          <div className="space-y-6">
+            <div className="flex items-center gap-2 border-b border-gray-200 pb-3 mt-4">
               <MessageSquare className={`w-4 h-4 ${theme.iconColor}`} />
-              <h3 className="text-sm font-bold text-gray-800">Official Responses</h3>
+              <h3 className="text-sm font-bold text-gray-800">Activity & Discussion</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) => {
+            {/* Timeline */}
+            <div className="relative space-y-6">
+              {/* Connecting pipeline/line */}
+              <div className="absolute left-[15px] top-2 bottom-6 w-[2px] bg-gray-200" />
+
+              {timelineItems.length === 0 ? (
+                <div className="relative pl-10 py-2">
+                  <p className="text-xs text-gray-400 font-medium">No activity or responses yet.</p>
+                </div>
+              ) : (
+                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 auditStyle = (() => {
+                      if (normEvent.includes('resolved')) {
+                        return {
+                          bg: 'bg-emerald-50 border-emerald-300 text-emerald-600',
+                          icon: <Check className="w-3.5 h-3.5 text-emerald-600" />,
+                          textCls: 'text-emerald-700 font-bold',
+                        };
+                      }
+                      if (normEvent === 'pending_xen') {
+                        return {
+                          bg: 'bg-amber-50 border-amber-300 text-amber-600',
+                          icon: <Clock className="w-3.5 h-3.5 text-amber-600" />,
+                          textCls: 'text-amber-700 font-bold',
+                        };
+                      }
+                      if (normEvent === 'pending_ae') {
+                        return {
+                          bg: 'bg-sky-50 border-sky-300 text-sky-600',
+                          icon: <Clock className="w-3.5 h-3.5 text-sky-600" />,
+                          textCls: 'text-sky-700 font-bold',
+                        };
+                      }
+                      if (normEvent === 'pending_je') {
+                        return {
+                          bg: 'bg-violet-50 border-violet-300 text-violet-600',
+                          icon: <Clock className="w-3.5 h-3.5 text-violet-600" />,
+                          textCls: 'text-violet-700 font-bold',
+                        };
+                      }
+                      return {
+                        bg: 'bg-gray-50 border-gray-300 text-gray-500',
+                        icon: <Clock className="w-3.5 h-3.5 text-gray-500" />,
+                        textCls: 'text-gray-700 font-bold',
+                      };
+                    })();
+
                     const eventText = (() => {
                       if (normEvent === 'pending_xen') return 'Sent to XEN for review.';
                       if (normEvent === 'pending_ae') return 'Sent to AE for review.';
@@ -493,32 +531,27 @@ export function PostView() {
                     })();
 
                     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">
+                      <div key={`audit-${idx}`} className="relative pl-10 min-h-[32px] flex items-center py-0.5">
+                        <div className={`absolute left-1 top-[4px] flex h-6 w-6 items-center justify-center rounded-full bg-white border ${auditStyle.bg} shadow-sm z-10`}>
+                          {auditStyle.icon}
+                        </div>
+                        <div className="flex flex-wrap items-baseline gap-x-2 text-xs">
+                          <span className={`${auditStyle.textCls}`}>{eventText}</span>
+                          <span className="text-[10px] text-gray-400 font-mono">
                             {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">
+                      <div key={`comment-${c.id}`} className="relative pl-10">
+                        {/* Comment Bubble in GitHub Style */}
+                        <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+                          <div className="bg-gray-50 border-b border-gray-150 px-4 py-2 flex items-center justify-between gap-2">
                             <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>}
@@ -528,46 +561,50 @@ export function PostView() {
                               {formatDateTime(c.created_at)}
                             </span>
                           </div>
-                          <p className="text-xs text-gray-600 leading-relaxed whitespace-pre-wrap">{c.comment_text}</p>
+                          <div className="px-4 py-3 text-xs text-gray-600 leading-relaxed whitespace-pre-wrap">
+                            {c.comment_text}
+                          </div>
                         </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>
+              {/* Composer */}
+              <div className="relative pl-10">
+                <div className="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3">
+                  <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-lg 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-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer h-[38px]"
+                    >
+                      {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="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>
-              {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>
         )}
 
diff --git a/app/src/pages/post/WardenPost.tsx b/app/src/pages/post/WardenPost.tsx
index 7a33f0a..1385cc6 100644
--- a/app/src/pages/post/WardenPost.tsx
+++ b/app/src/pages/post/WardenPost.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 import { POST_TYPES } from '../../constants/models';
 
 export function WardenPost() {
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
     room_number: '',
     type_of_post: '',
@@ -40,6 +42,9 @@ export function WardenPost() {
         setStatus('success');
         setMessage(data.success || 'Complaint submitted successfully!');
         setFormData({ room_number: '', type_of_post: '', title: '', description: '' });
+        if (data.post?.id) {
+          navigate(`/post/warden/${data.post.id}`);
+        }
       } else {
         setStatus('error');
         const errorMsg = data.error || Object.values(data)[0] || 'An error occurred';
diff --git a/app/src/pages/profile/Profile.tsx b/app/src/pages/profile/Profile.tsx
index 4609c74..b8ae5a7 100644
--- a/app/src/pages/profile/Profile.tsx
+++ b/app/src/pages/profile/Profile.tsx
@@ -8,8 +8,21 @@ import { MainLayout } from '../../components/layout/MainLayout';
 import { ComplaintCard } from '../../components/ComplaintCard';
 import type { ComplaintPost, EditForm, Role } from '../../components/ComplaintCard';
 
+interface ProfileData {
+  name?: string;
+  email?: string;
+  is_verified?: boolean;
+  phone_number?: string;
+  department?: string;
+  house_number?: string;
+  block?: string;
+  type?: string;
+  hostel?: string;
+  building?: string;
+}
+
 export function Profile() {
-  const [profile, setProfile] = useState<any>(null);
+  const [profile, setProfile] = useState<ProfileData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError]     = useState<string | null>(null);
   const navigate = useNavigate();
@@ -40,7 +53,7 @@ export function Profile() {
 
   const fetchPosts = useCallback((silent = false) => {
     if (!profile) return;
-    let endpoint = '';
+    let endpoint: string;
     if ('department' in profile)    endpoint = '/api/post/faculty';
     else if ('hostel' in profile)   endpoint = '/api/post/warden';
     else if ('building' in profile) endpoint = '/api/post/centrehead';
@@ -87,6 +100,8 @@ export function Profile() {
     );
   }
 
+  if (!profile) return null;
+
   const isFaculty    = 'department' in profile;
   const isWarden     = 'hostel' in profile;
   const isCentreHead = 'building' in profile;
@@ -102,7 +117,7 @@ export function Profile() {
   const deleteBase = isFaculty ? '/api/post/faculty/delete' : isWarden ? '/api/post/warden/delete' : '/api/post/centrehead/delete';
 
   const handleLogout = async () => {
-    try { await fetch('/api/auth/logout', { method: 'POST' }); } catch {}
+    try { await fetch('/api/auth/logout', { method: 'POST' }); } catch { /* ignore */ }
     window.location.href = '/';
   };
 
@@ -200,7 +215,7 @@ export function Profile() {
             {/* Identity row */}
             <div className="flex items-center justify-between px-6 py-5 border-b border-[#E5E5E5]">
               <div>
-                <p className="text-base font-bold text-[#111111]">{profile.name || profile.email.split('@')[0]}</p>
+                <p className="text-base font-bold text-[#111111]">{profile.name || profile.email?.split('@')[0] || ''}</p>
                 <p className="text-sm text-[#666666] mt-0.5">{profile.email}</p>
               </div>
               <div className="flex items-center gap-2">