diff --git a/app-frontend/employer-panel/src/pages/EmployerDashboard.css b/app-frontend/employer-panel/src/pages/EmployerDashboard.css
index 31808fe8..9a3f3d89 100644
--- a/app-frontend/employer-panel/src/pages/EmployerDashboard.css
+++ b/app-frontend/employer-panel/src/pages/EmployerDashboard.css
@@ -277,4 +277,123 @@ body {
 }
 .ss-card__createtext {
   font-weight:600;
+}
+
+/* Incident Management */
+
+.ss-row .ss-incident-id {
+  color: #000; 
+  font-weight: 700;
+}
+
+.ss-status--resolved {
+  color: #2e7d32;
+}
+
+/* Modal Layout */
+.create-shift-modal-backdrop {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(10, 43, 102, 0.5);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.create-shift-card {
+  background: #fff;
+  border-radius: var(--radius-lg);
+  padding: 30px;
+  width: 100%;
+  box-shadow: var(--shadow);
+  animation: modalSlideUp 0.3s ease-out;
+}
+
+@keyframes modalSlideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.create-shift-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--ss-border);
+  padding-bottom: 16px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-weight: 700;
+  font-size: 13px;
+  text-transform: uppercase;
+  color: var(--ss-muted);
+}
+
+.ss-input-static {
+  background: #f5f5f5;
+  border: 1px solid var(--ss-border);
+  color: var(--ss-text);
+  font-weight: 600;
+}
+
+.ss-incident-description {
+  background: #fff9e6;
+  padding: 15px;
+  border-radius: 8px;
+  border: 1px solid #ffeeba;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.ss-evidence-img {
+  width: 120px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid var(--ss-border);
+  transition: transform 0.2s;
+}
+
+.ss-evidence-img:hover {
+  transform: scale(1.05);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.actions .primary {
+  background: var(--ss-blue-800);
+  color: #fff;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 999px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.actions .secondary {
+  background: #f0f2f7;
+  color: var(--ss-blue-800);
+  border: none;
+  padding: 10px 24px;
+  border-radius: 999px;
+  font-weight: 600;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/app-frontend/employer-panel/src/pages/EmployerDashboard.js b/app-frontend/employer-panel/src/pages/EmployerDashboard.js
index a9cb0f48..1c4c3578 100644
--- a/app-frontend/employer-panel/src/pages/EmployerDashboard.js
+++ b/app-frontend/employer-panel/src/pages/EmployerDashboard.js
@@ -61,67 +61,32 @@ export default function EmployerDashboard() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    async function fetchShifts() {
-      setLoading(true);
-      setError(null);
-      try {
-        const token = localStorage.getItem("token");
-        const res = await fetch("http://localhost:5000/api/v1/shifts", {
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-        });
-        if (!res.ok) throw new Error("Failed to fetch shifts");
-        const data = await res.json();
-        // Map backend data to dashboard format
-        const apiShifts = Array.isArray(data) ? data : (data.shifts || data.items || []);
-        setShifts(apiShifts.map(s => ({
-          role: s.title || "-",
-          company: s.siteName || s.company || "-",
-          venue: s.location?.street || s.venue || "-",
-          rate: s.payRate || s.price || 0,
-          status: mapStatus(s.status),
-          date: formatDate(s.date),
-          time: formatTime(s.startTime, s.endTime),
-        })));
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
+  // States for Incident Management
+  const [selectedIncident, setSelectedIncident] = useState(null);
+  const [incidents, setIncidents] = useState([
+    { 
+      id: "INC-9921", 
+      guard: "John Doe", 
+      shift: "Crowd Control - Marvel", 
+      date: "09-08-2025", 
+      time: "10:45 PM", 
+      status: "Pending", 
+      severity: "High",
+      description: "A patron was found attempting to bypass security with restricted items. Incident was recorded and patron escorted out.",
+
+      // Demo Image
+      photos: ["https://images.unsplash.com/photo-1582139329536-e7284fece509?auto=format&fit=crop&w=300&q=80"], 
+      comments: ""
     }
-    fetchShifts();
-  }, []);
-
-  function mapStatus(status) {
-    if (!status) return { text: "Open", tone: "confirmed" };
-    const s = status.toLowerCase();
-    if (s === "pending") return { text: "Pending", tone: "pending" };
-    if (s === "rejected") return { text: "Rejected", tone: "rejected" };
-    if (s === "completed") return { text: "Completed", tone: "completed" };
-    if (s === "confirmed") return { text: "Confirmed", tone: "confirmed" };
-    return { text: status, tone: "confirmed" };
-  }
-  function formatDate(date) {
-    if (!date) return "-";
-    const d = new Date(date);
-    if (isNaN(d)) return date;
-    return d.toLocaleDateString("en-GB");
-  }
-  function formatTime(start, end) {
-    if (!start || !end) return "-";
-    return `${to12hr(start)} - ${to12hr(end)}`;
-  }
-  function to12hr(t) {
-    if (!t) return "-";
-    let [h, m] = t.split(":");
-    h = parseInt(h, 10);
-    const ampm = h >= 12 ? "pm" : "am";
-    h = h % 12 || 12;
-    return `${h}:${m} ${ampm}`;
-  }
+  ]);
+
+  const shifts = useMemo(() => [
+    { role: "Crowd Control", company: "AIG Solutions", venue: "Marvel Stadium", rate: 55, status: { text: "Confirmed", tone: "confirmed" }, date: "09-08-2025", time: "5:00 pm - 1:00 am" },
+    { role: "Shopping Centre Security", company: "Vicinity Centres", venue: "Chadstone Shopping Centre", rate: 75, status: { text: "Pending", tone: "pending" }, date: "03-08-2025", time: "1:00 pm - 9:00 pm" },
+    { role: "Crowd Control", company: "AIG Solutions", venue: "Marvel Stadium", rate: 55, status: { text: "Rejected", tone: "rejected" }, date: "09-08-2025", time: "5:00 pm - 1:00 am" },
+    { role: "Crowd Control", company: "AIG Solutions", venue: "Marvel Stadium", rate: 55, status: { text: "Completed (Unrated)", tone: "completed" }, date: "01-08-2025", time: "5:00 pm - 1:00 am" },
+    { role: "Crowd Control", company: "AIG Solutions", venue: "Marvel Stadium", rate: 55, status: { text: "Completed (Rated)", tone: "completed" }, date: "31-07-2025", time: "5:00 pm - 1:00 am" },
+  ], []);
 
   const reviews = useMemo(() => [
     { name: "John Smith", role: "Crowd Control", stars: 5 },
@@ -134,6 +99,13 @@ export default function EmployerDashboard() {
     ref.current.scrollBy({ left: amt, behavior: "smooth" });
   };
 
+  const updateIncident = (id, newStatus, newSeverity, newComments) => {
+    setIncidents(prev => prev.map(inc => 
+      inc.id === id ? { ...inc, status: newStatus, severity: newSeverity, comments: newComments } : inc
+    ));
+    setSelectedIncident(null);
+  };
+
   return (
     <div className="ss-page">
   
@@ -219,6 +191,33 @@ export default function EmployerDashboard() {
           <button className="ss-arrow ss-arrow--right" onClick={() => scrollByAmount(overviewScroller, 320)}>›</button>
         </div>
 
+        {/* Incident Reports */}
+        <h2 className="ss-h1 ss-h1--spaced">Incident Reports</h2>
+        <div className="ss-overview">
+          <div style={{ width: "44px" }}></div>
+          <div className="ss-panel">
+            <div className="ss-shifts ss-shifts--list">
+              {incidents.map((inc, i) => (
+                <div className="ss-row" key={i}>
+                  <div className="ss-col ss-role"><b>{inc.guard}</b></div>
+                  <div className="ss-col ss-company">{inc.shift}</div>
+                  <div className="ss-col ss-incident-id">{inc.id}</div>
+                  <div className="ss-col ss-date">
+                    <IconCalendar className="ss-ico" /> {inc.date}
+                  </div>
+                  <div className={`ss-col ss-status ss-status--${inc.status.toLowerCase()}`}>
+                    {inc.status}
+                  </div>
+                  <div className="ss-col ss-time" style={{ textAlign: "right" }}>
+                    <button className="ss-secondary" style={{ width: '100px' }} onClick={() => setSelectedIncident(inc)}>Review</button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div style={{ width: "44px" }}></div>
+        </div>
+
         {/* Reviews */}
         <h2 className="ss-h1 ss-h1--spaced">Recent Review</h2>
         <div className="ss-reviews">
@@ -243,6 +242,66 @@ export default function EmployerDashboard() {
           <button className="ss-arrow ss-arrow--right" onClick={() => scrollByAmount(reviewScroller, 300)}>›</button>
         </div>
       </main>
+
+      {/* Incident Detail Modal */}
+      {selectedIncident && (
+        <div className="create-shift-modal-backdrop" onClick={() => setSelectedIncident(null)}>
+          <div className="create-shift-card" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '700px' }}>
+            <div className="create-shift-header">
+              <div>
+                <h1>Incident Details (<span className="ss-incident-id">{selectedIncident.id}</span>)</h1>
+                <p style={{ margin: 0, fontSize: '14px', color: '#666' }}>
+                  Recorded on: {selectedIncident.date} at {selectedIncident.time}
+                </p>
+              </div>
+              <span className={`ss-status ss-status--${selectedIncident.status.toLowerCase()}`}>
+                {selectedIncident.status}
+              </span>
+            </div>
+
+            <div className="form-grid" style={{ marginBottom: '20px' }}>
+              <div className="form-group">
+                <label>Reported By</label>
+                <div className="ss-input-static" style={{ padding: '10px', borderRadius: '4px' }}>{selectedIncident.guard}</div>
+              </div>
+              <div className="form-group">
+                <label>Assign Severity Level</label>
+                <select defaultValue={selectedIncident.severity} id="severitySelect" style={{ padding: '10px', border: '1px solid #ddd', borderRadius: '4px' }}>
+                  <option value="Low">Low</option>
+                  <option value="Medium">Medium</option>
+                  <option value="High">High</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="form-group" style={{ marginBottom: '20px' }}>
+              <label>Guard's Description</label>
+              <div className="ss-incident-description">{selectedIncident.description}</div>
+            </div>
+
+            <div className="form-group" style={{ marginBottom: '20px' }}>
+              <label>Evidence Photos</label>
+              <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                {selectedIncident.photos.map((url, idx) => (
+                  <img key={idx} src={url} alt="incident evidence" className="ss-evidence-img" />
+                ))}
+              </div>
+            </div>
+
+            <div className="form-group">
+              <label>Employer Comments</label>
+              <textarea id="employerComments" placeholder="Add internal notes..." defaultValue={selectedIncident.comments} style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '10px' }} rows={4} />
+            </div>
+
+            <div className="actions" style={{ marginTop: '30px' }}>
+              <button className="primary" onClick={() => updateIncident(selectedIncident.id, "Resolved", document.getElementById('severitySelect').value, document.getElementById('employerComments').value)}>Mark as Resolved</button>
+              <button className="secondary" onClick={() => updateIncident(selectedIncident.id, "Pending", document.getElementById('severitySelect').value, document.getElementById('employerComments').value)}>Save as Pending</button>
+              <button className="secondary" style={{ color: '#666' }} onClick={() => setSelectedIncident(null)}>Close</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showCreateModal && (
         <CreateShift
           isModal