diff --git a/assets/css/custom.css b/assets/css/custom.css
index 886b3fb..c987b0e 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,16 +1,21 @@
 body {
-    background-color: #f8f9fa;
+    
 }
 
 .header {
-    background: linear-gradient(135deg, #0d6efd, #0d6efd);
+    background: linear-gradient(to right, #007bff, #0056b3);
     color: white;
     padding: 4rem 0;
     text-align: center;
 }
 
+.header h1 {
+    text-shadow: none;
+}
+
+
 .footer {
     position: fixed;
     bottom: 0;
     width: 100%;
-}
+}
\ No newline at end of file
diff --git a/assets/css/dark-mode.css b/assets/css/dark-mode.css
new file mode 100644
index 0000000..2ba1049
--- /dev/null
+++ b/assets/css/dark-mode.css
@@ -0,0 +1,100 @@
+body.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+body.dark-mode .header {
+    background: #1e1e1e;
+    border-bottom: 1px solid #333;
+}
+
+body.dark-mode .card {
+    background-color: #1e1e1e;
+    border: 1px solid #333;
+}
+
+body.dark-mode .modal-content {
+    background-color: #1e1e1e;
+    border: 1px solid #333;
+}
+
+body.dark-mode .footer {
+    background-color: #1e1e1e;
+    border-top: 1px solid #333;
+}
+
+body.dark-mode .table {
+    background-color: #1e1e1e;
+    color: #e0e0e0;
+}
+
+body.dark-mode .table-light {
+    background-color: #333;
+    color: #e0e0e0;
+}
+
+body.dark-mode .nav-tabs .nav-link {
+    color: #e0e0e0;
+    border: 1px solid #333;
+}
+
+body.dark-mode .nav-tabs .nav-link.active {
+    background-color: #333;
+    border-color: #333;
+}
+
+body.dark-mode .form-control {
+    background-color: #333;
+    color: #e0e0e0;
+    border: 1px solid #555;
+}
+
+body.dark-mode .form-select {
+    background-color: #333;
+    color: #e0e0e0;
+    border: 1px solid #555;
+}
+
+body.dark-mode .btn-primary {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+body.dark-mode .btn-outline-primary {
+    color: #0d6efd;
+    border-color: #0d6efd;
+}
+
+body.dark-mode .btn-outline-primary:hover {
+    background-color: #0d6efd;
+    color: #fff;
+}
+
+body.dark-mode .btn-outline-secondary {
+    color: #6c757d;
+    border-color: #6c757d;
+}
+
+body.dark-mode .btn-outline-secondary:hover {
+    background-color: #6c757d;
+    color: #fff;
+}
+
+body.dark-mode .btn-outline-info {
+    color: #0dcaf0;
+    border-color: #0dcaf0;
+}
+
+body.dark-mode .btn-outline-info:hover {
+    background-color: #0dcaf0;
+    color: #000;
+}
+
+body.dark-mode .text-muted {
+    color: #aaa !important;
+}
+
+body.dark-mode .badge.bg-info {
+    background-color: #0dcaf0 !important;
+    color: #000 !important;
+}
diff --git a/assets/pasted-20251112-162625-ae9fd705.jpg b/assets/pasted-20251112-162625-ae9fd705.jpg
new file mode 100644
index 0000000..05d0748
Binary files /dev/null and b/assets/pasted-20251112-162625-ae9fd705.jpg differ
diff --git a/footer.php b/footer.php
new file mode 100644
index 0000000..fc6fb5e
--- /dev/null
+++ b/footer.php
@@ -0,0 +1,67 @@
+    <footer class="footer mt-auto py-3 bg-light">
+        <div class="container text-center">
+            <span class="text-muted">Built with <a href="https://flatlogic.com" target="_blank">Flatlogic</a></span>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const darkModeToggle = document.getElementById('darkModeToggle');
+            const body = document.body;
+
+            // Check for saved dark mode preference
+            if (localStorage.getItem('darkMode') === 'enabled') {
+                body.classList.add('dark-mode');
+                darkModeToggle.checked = true;
+            }
+
+            darkModeToggle.addEventListener('change', function () {
+                if (this.checked) {
+                    body.classList.add('dark-mode');
+                    localStorage.setItem('darkMode', 'enabled');
+                } else {
+                    body.classList.remove('dark-mode');
+                    localStorage.setItem('darkMode', 'disabled');
+                }
+            });
+
+            var editGrievanceModal = document.getElementById('editGrievanceModal');
+            if (editGrievanceModal) {
+                editGrievanceModal.addEventListener('show.bs.modal', function (event) {
+                    var button = event.relatedTarget;
+                    var id = button.getAttribute('data-id');
+                    var grievantName = button.getAttribute('data-grievant-name');
+                    var discipline = button.getAttribute('data-discipline');
+                    var subject = button.getAttribute('data-subject');
+                    var status = button.getAttribute('data-status');
+                    var unionRepresentative = button.getAttribute('data-union-representative');
+                    var category = button.getAttribute('data-category');
+                    var caseNumber = button.getAttribute('data-case-number');
+
+                    var modal = this;
+                    modal.querySelector('#edit_grievance_id').value = id;
+                    modal.querySelector('#edit_grievant_name').value = grievantName;
+                    modal.querySelector('#edit_discipline').value = discipline;
+                    modal.querySelector('#edit_subject').value = subject;
+                    modal.querySelector('#edit_status').value = status;
+                    modal.querySelector('#edit_union_representative').value = unionRepresentative;
+
+                    var caseNumberWrapper = modal.querySelector('#edit_case_number_wrapper');
+                    var caseNumberInput = modal.querySelector('#edit_case_number');
+
+                    if (category === 'FWD to Office' || category === 'Terminations') {
+                        caseNumberWrapper.style.display = 'block';
+                        caseNumberInput.value = caseNumber;
+                    } else {
+                        caseNumberWrapper.style.display = 'none';
+                        caseNumberInput.value = '';
+                    }
+                });
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/header.php b/header.php
new file mode 100644
index 0000000..5200081
--- /dev/null
+++ b/header.php
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TWU Local 555 BNA Ramp Grievance Tracker</title>
+    <meta name="description" content="A tool for TWU Local 555 to track ramp grievances at BNA.">
+    <meta name="keywords" content="grievance tracker, union grievance, ramp grievance, TWU Local 555, BNA, employee relations, dispute resolution, union representative, workplace issues, Built with Flatlogic Generator">
+    <meta property="og:title" content="TWU Local 555 BNA Ramp Grievance Tracker">
+    <meta property="og:description" content="A tool for TWU Local 555 to track ramp grievances at BNA.">
+    <meta property="og:image" content="">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" href="assets/css/dark-mode.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    <?php
+    require_once 'db/config.php';
+
+    $message = '';
+    $page = isset($_GET['page']) ? htmlspecialchars($_GET['page']) : 'Local Grievances';
+    $categories = ['Local Grievances', 'FWD to Office', 'Terminations'];
+
+    $status_options = [];
+    if ($page === 'Local Grievances') {
+        $status_options = ['Pending Submission', '1st Step', '1st Step Pending', '2nd Step', '2nd Step Pending', 'Settled', 'Withdrawn'];
+    } elseif ($page === 'FWD to Office') {
+        $status_options = ['FWD', 'System Board', 'Arbitration', 'MED/ARB', 'Settled', 'Withdrawn'];
+    } elseif ($page === 'Terminations') {
+        $status_options = ['FWD', 'System Board', 'Arbitration', 'Settled', 'Withdrawn/Resigned'];
+    }
+
+    try {
+        $pdo = db();
+        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+        $pdotest = $pdo->query('SHOW TABLES');
+        if ($pdotest->rowCount() == 0) {
+            $pdo->exec("CREATE TABLE IF NOT EXISTS grievances (
+                id INT AUTO_INCREMENT PRIMARY KEY,
+                grievant_name VARCHAR(255) NOT NULL,
+                discipline VARCHAR(255) NOT NULL,
+                subject VARCHAR(255) NOT NULL,
+                status VARCHAR(100) NOT NULL,
+                last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+                union_representative VARCHAR(255) NOT NULL,
+                category VARCHAR(255) NOT NULL DEFAULT 'Local Grievances'
+            );");
+        }
+
+        // Check if 'category' column exists and add it if it doesn't
+        $stmt = $pdo->query("SHOW COLUMNS FROM grievances LIKE 'category'");
+        if ($stmt->rowCount() == 0) {
+            $pdo->exec("ALTER TABLE grievances ADD COLUMN category VARCHAR(255) NOT NULL DEFAULT 'Local Grievances'");
+        }
+
+        // Check if 'case_number' column exists and add it if it doesn't
+        $stmt = $pdo->query("SHOW COLUMNS FROM grievances LIKE 'case_number'");
+        if ($stmt->rowCount() == 0) {
+            $pdo->exec("ALTER TABLE grievances ADD COLUMN case_number VARCHAR(255) NULL");
+        }
+
+        $pdo->exec("CREATE TABLE IF NOT EXISTS grievance_updates (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            grievance_id INT NOT NULL,
+            update_text TEXT NOT NULL,
+            representative_name VARCHAR(255) NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (grievance_id) REFERENCES grievances(id) ON DELETE CASCADE
+        );");
+
+    } catch (PDOException $e) {
+        $message = '<div class="alert alert-danger" role="alert">Database error: ' . $e->getMessage() . '</div>';
+    }
+
+    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        if (isset($_POST['add_grievance'])) {
+            $grievant_name = trim($_POST['grievant_name']);
+            $discipline = trim($_POST['discipline']);
+            $subject = trim($_POST['subject']);
+            $status = trim($_POST['status']);
+            $union_representative = trim($_POST['union_representative']);
+            $category = trim($_POST['category']);
+
+            if (!empty($grievant_name) && !empty($discipline) && !empty($subject) && !empty($status) && !empty($union_representative) && !empty($category)) {
+                try {
+                    $stmt = $pdo->prepare("INSERT INTO grievances (grievant_name, discipline, subject, status, union_representative, category) VALUES (?, ?, ?, ?, ?, ?)");
+                    $stmt->execute([$grievant_name, $discipline, $subject, $status, $union_representative, $category]);
+                    $message = '<div class="alert alert-success" role="alert">Grievance added successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error adding grievance: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields.</div>';
+            }
+        } elseif (isset($_POST['move_grievance'])) {
+            $grievance_id = $_POST['grievance_id'];
+            $new_category = $_POST['new_category'];
+
+            if (!empty($grievance_id) && !empty($new_category) && in_array($new_category, $categories)) {
+                try {
+                    $stmt = $pdo->prepare("UPDATE grievances SET category = ? WHERE id = ?");
+                    $stmt->execute([$new_category, $grievance_id]);
+                    $message = '<div class="alert alert-success" role="alert">Grievance moved successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error moving grievance: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Invalid move operation.</div>';
+            }
+        } elseif (isset($_POST['edit_grievance'])) {
+            $grievance_id = $_POST['grievance_id'];
+            $grievant_name = trim($_POST['grievant_name']);
+            $discipline = trim($_POST['discipline']);
+            $subject = trim($_POST['subject']);
+            $status = trim($_POST['status']);
+            $union_representative = trim($_POST['union_representative']);
+            $case_number = isset($_POST['case_number']) ? trim($_POST['case_number']) : null;
+
+            if (!empty($grievance_id) && !empty($grievant_name) && !empty($discipline) && !empty($subject) && !empty($status) && !empty($union_representative)) {
+                try {
+                    // Check category to decide if case_number should be updated
+                    $stmt_cat = $pdo->prepare("SELECT category FROM grievances WHERE id = ?");
+                    $stmt_cat->execute([$grievance_id]);
+                    $grievance_category = $stmt_cat->fetchColumn();
+
+                    $sql = "UPDATE grievances SET grievant_name = ?, discipline = ?, subject = ?, status = ?, union_representative = ?";
+                    $params = [$grievant_name, $discipline, $subject, $status, $union_representative];
+
+                    if (($grievance_category === 'FWD to Office' || $grievance_category === 'Terminations')) {
+                        $sql .= ", case_number = ?";
+                        $params[] = $case_number;
+                    }
+                    
+                    $sql .= " WHERE id = ?";
+                    $params[] = $grievance_id;
+
+                    $stmt = $pdo->prepare($sql);
+                    $stmt->execute($params);
+                    $message = '<div class="alert alert-success" role="alert">Grievance updated successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error updating grievance: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields.</div>';
+            }
+        } elseif (isset($_POST['add_grievance_update'])) {
+            $grievance_id = $_POST['grievance_id'];
+            $update_text = trim($_POST['update_text']);
+            $representative_name = trim($_POST['representative_name']);
+
+            if (!empty($grievance_id) && !empty($update_text) && !empty($representative_name)) {
+                try {
+                    $stmt = $pdo->prepare("INSERT INTO grievance_updates (grievance_id, update_text, representative_name) VALUES (?, ?, ?)");
+                    $stmt->execute([$grievance_id, $update_text, $representative_name]);
+                    $message = '<div class="alert alert-success" role="alert">Update added successfully!</div>';
+                } catch (PDOException $e) {
+                    $message = '<div class="alert alert-danger" role="alert">Error adding update: ' . $e->getMessage() . '</div>';
+                }
+            } else {
+                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields for the update.</div>';
+            }
+        }
+    }
+
+    try {
+        $stmt = $pdo->prepare("SELECT * FROM grievances WHERE category = ? ORDER BY last_updated DESC");
+        $stmt->execute([$page]);
+        $grievances = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    } catch (PDOException $e) {
+        $grievances = [];
+        $message .= '<div class="alert alert-danger" role="alert">Error fetching grievances: ' . $e->getMessage() . '</div>';
+    }
+    ?>
+
+    <header class="header">
+        <div class="container">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <h1><a href="index.php" class="text-decoration-none text-dark">TWU Local 555 BNA Ramp Grievance Tracker</a></h1>
+                    <p class="lead">A simple tool to track and manage ramp grievances.</p>
+                </div>
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" id="darkModeToggle">
+                    <label class="form-check-label" for="darkModeToggle">Dark Mode</label>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="container mt-5">
+        <?php echo $message; ?>
diff --git a/index.php b/index.php
index 129b98b..9120167 100644
--- a/index.php
+++ b/index.php
@@ -1,156 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TWU Local 555 BNA Ramp Grievance Tracker</title>
-    <meta name="description" content="A tool for TWU Local 555 to track ramp grievances at BNA.">
-    <meta name="keywords" content="grievance tracker, union grievance, ramp grievance, TWU Local 555, BNA, employee relations, dispute resolution, union representative, workplace issues, Built with Flatlogic Generator">
-    <meta property="og:title" content="TWU Local 555 BNA Ramp Grievance Tracker">
-    <meta property="og:description" content="A tool for TWU Local 555 to track ramp grievances at BNA.">
-    <meta property="og:image" content="">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="">
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-</head>
-<body>
-    <?php
-    require_once 'db/config.php';
-
-    $message = '';
-    $page = isset($_GET['page']) ? htmlspecialchars($_GET['page']) : 'Local Grievances';
-    $categories = ['Local Grievances', 'FWD to Office', 'Terminations'];
-
-    try {
-        $pdo = db();
-        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
-
-        $pdotest = $pdo->query('SHOW TABLES');
-        if ($pdotest->rowCount() == 0) {
-            $pdo->exec("CREATE TABLE IF NOT EXISTS grievances (
-                id INT AUTO_INCREMENT PRIMARY KEY,
-                grievant_name VARCHAR(255) NOT NULL,
-                discipline VARCHAR(255) NOT NULL,
-                subject VARCHAR(255) NOT NULL,
-                status VARCHAR(100) NOT NULL,
-                last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
-                union_representative VARCHAR(255) NOT NULL,
-                category VARCHAR(255) NOT NULL DEFAULT 'Local Grievances'
-            );");
-        }
-
-        // Check if 'category' column exists and add it if it doesn't
-        $stmt = $pdo->query("SHOW COLUMNS FROM grievances LIKE 'category'");
-        if ($stmt->rowCount() == 0) {
-            $pdo->exec("ALTER TABLE grievances ADD COLUMN category VARCHAR(255) NOT NULL DEFAULT 'Local Grievances'");
-        }
-
-        // Check if 'case_number' column exists and add it if it doesn't
-        $stmt = $pdo->query("SHOW COLUMNS FROM grievances LIKE 'case_number'");
-        if ($stmt->rowCount() == 0) {
-            $pdo->exec("ALTER TABLE grievances ADD COLUMN case_number VARCHAR(255) NULL");
-        }
-
-    } catch (PDOException $e) {
-        $message = '<div class="alert alert-danger" role="alert">Database error: ' . $e->getMessage() . '</div>';
-    }
-
-    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-        if (isset($_POST['add_grievance'])) {
-            $grievant_name = trim($_POST['grievant_name']);
-            $discipline = trim($_POST['discipline']);
-            $subject = trim($_POST['subject']);
-            $status = trim($_POST['status']);
-            $union_representative = trim($_POST['union_representative']);
-            $category = trim($_POST['category']);
-
-            if (!empty($grievant_name) && !empty($discipline) && !empty($subject) && !empty($status) && !empty($union_representative) && !empty($category)) {
-                try {
-                    $stmt = $pdo->prepare("INSERT INTO grievances (grievant_name, discipline, subject, status, union_representative, category) VALUES (?, ?, ?, ?, ?, ?)");
-                    $stmt->execute([$grievant_name, $discipline, $subject, $status, $union_representative, $category]);
-                    $message = '<div class="alert alert-success" role="alert">Grievance added successfully!</div>';
-                } catch (PDOException $e) {
-                    $message = '<div class="alert alert-danger" role="alert">Error adding grievance: ' . $e->getMessage() . '</div>';
-                }
-            } else {
-                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields.</div>';
-            }
-        } elseif (isset($_POST['move_grievance'])) {
-            $grievance_id = $_POST['grievance_id'];
-            $new_category = $_POST['new_category'];
-
-            if (!empty($grievance_id) && !empty($new_category) && in_array($new_category, $categories)) {
-                try {
-                    $stmt = $pdo->prepare("UPDATE grievances SET category = ? WHERE id = ?");
-                    $stmt->execute([$new_category, $grievance_id]);
-                    $message = '<div class="alert alert-success" role="alert">Grievance moved successfully!</div>';
-                } catch (PDOException $e) {
-                    $message = '<div class="alert alert-danger" role="alert">Error moving grievance: ' . $e->getMessage() . '</div>';
-                }
-            } else {
-                $message = '<div class="alert alert-warning" role="alert">Invalid move operation.</div>';
-            }
-        } elseif (isset($_POST['edit_grievance'])) {
-            $grievance_id = $_POST['grievance_id'];
-            $grievant_name = trim($_POST['grievant_name']);
-            $discipline = trim($_POST['discipline']);
-            $subject = trim($_POST['subject']);
-            $status = trim($_POST['status']);
-            $union_representative = trim($_POST['union_representative']);
-            $case_number = isset($_POST['case_number']) ? trim($_POST['case_number']) : null;
-
-            if (!empty($grievance_id) && !empty($grievant_name) && !empty($discipline) && !empty($subject) && !empty($status) && !empty($union_representative)) {
-                try {
-                    // Check category to decide if case_number should be updated
-                    $stmt_cat = $pdo->prepare("SELECT category FROM grievances WHERE id = ?");
-                    $stmt_cat->execute([$grievance_id]);
-                    $grievance_category = $stmt_cat->fetchColumn();
-
-                    $sql = "UPDATE grievances SET grievant_name = ?, discipline = ?, subject = ?, status = ?, union_representative = ?";
-                    $params = [$grievant_name, $discipline, $subject, $status, $union_representative];
-
-                    if (($grievance_category === 'FWD to Office' || $grievance_category === 'Terminations')) {
-                        $sql .= ", case_number = ?";
-                        $params[] = $case_number;
-                    }
-                    
-                    $sql .= " WHERE id = ?";
-                    $params[] = $grievance_id;
-
-                    $stmt = $pdo->prepare($sql);
-                    $stmt->execute($params);
-                    $message = '<div class="alert alert-success" role="alert">Grievance updated successfully!</div>';
-                } catch (PDOException $e) {
-                    $message = '<div class="alert alert-danger" role="alert">Error updating grievance: ' . $e->getMessage() . '</div>';
-                }
-            } else {
-                $message = '<div class="alert alert-warning" role="alert">Please fill out all fields.</div>';
-            }
-        }
-    }
-
-    try {
-        $stmt = $pdo->prepare("SELECT * FROM grievances WHERE category = ? ORDER BY last_updated DESC");
-        $stmt->execute([$page]);
-        $grievances = $stmt->fetchAll(PDO::FETCH_ASSOC);
-    } catch (PDOException $e) {
-        $grievances = [];
-        $message .= '<div class="alert alert-danger" role="alert">Error fetching grievances: ' . $e->getMessage() . '</div>';
-    }
-    ?>
-
-    <header class="header">
-        <div class="container">
-            <h1 class="display-4">TWU Local 555 BNA Ramp Grievance Tracker</h1>
-            <p class="lead">A simple tool to track and manage ramp grievances.</p>
-        </div>
-    </header>
-
-    <main class="container mt-5">
-        <?php echo $message; ?>
+<?php require_once 'header.php'; ?>
 
         <ul class="nav nav-tabs mb-3">
             <?php foreach ($categories as $category): ?>
@@ -158,6 +6,9 @@
                     <a class="nav-link <?php echo $page === $category ? 'active' : ''; ?>" href="index.php?page=<?php echo urlencode($category); ?>"><?php echo htmlspecialchars($category); ?></a>
                 </li>
             <?php endforeach; ?>
+            <li class="nav-item">
+                <a class="nav-link" href="statistics.php">Statistics</a>
+            </li>
         </ul>
 
         <div class="d-flex justify-content-end mb-3">
@@ -179,6 +30,9 @@
                                 <?php if ($page === 'FWD to Office' || $page === 'Terminations'): ?>
                                 <th>Case Number</th>
                                 <?php endif; ?>
+                                <?php if ($page === 'Local Grievances'): ?>
+                                <th>Timeframes</th>
+                                <?php endif; ?>
                                 <th>Status</th>
                                 <th>Last Updated</th>
                                 <th>Union Representative</th>
@@ -188,7 +42,7 @@
                         <tbody>
                             <?php if (empty($grievances)): ?>
                                 <tr>
-                                    <td colspan="<?php echo ($page === 'FWD to Office' || $page === 'Terminations') ? '8' : '7'; ?>" class="text-center">No grievances found in this category.</td>
+                                    <td colspan="8" class="text-center">No grievances found in this category.</td>
                                 </tr>
                             <?php else: ?>
                                 <?php foreach ($grievances as $grievance): ?>
@@ -199,6 +53,9 @@
                                         <?php if ($page === 'FWD to Office' || $page === 'Terminations'): ?>
                                         <td><?php echo htmlspecialchars($grievance['case_number'] ?? ''); ?></td>
                                         <?php endif; ?>
+                                        <?php if ($page === 'Local Grievances'): ?>
+                                        <td><input type="date" class="form-control"></td>
+                                        <?php endif; ?>
                                         <td><span class="badge bg-info text-dark"><?php echo htmlspecialchars($grievance['status']); ?></span></td>
                                         <td><?php echo date("m/d/Y h:i A", strtotime($grievance['last_updated'])); ?></td>
                                         <td><?php echo htmlspecialchars($grievance['union_representative']); ?></td>
@@ -231,6 +88,47 @@
                                                 data-case-number="<?php echo htmlspecialchars($grievance['case_number'] ?? ''); ?>">
                                                 Edit
                                             </button>
+                                            <button type="button" class="btn btn-sm btn-outline-info view-updates-btn" data-bs-toggle="collapse" data-bs-target="#updates-<?php echo $grievance['id']; ?>">
+                                                <i class="bi bi-chat-dots"></i> View Updates
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr class="collapse" id="updates-<?php echo $grievance['id']; ?>">
+                                        <td colspan="8">
+                                            <div class="updates-container p-3">
+                                                <h5>Updates</h5>
+                                                <?php
+                                                $update_stmt = $pdo->prepare("SELECT * FROM grievance_updates WHERE grievance_id = ? ORDER BY created_at DESC");
+                                                $update_stmt->execute([$grievance['id']]);
+                                                $updates = $update_stmt->fetchAll(PDO::FETCH_ASSOC);
+                                                ?>
+                                                <?php if (empty($updates)): ?>
+                                                    <p>No updates for this grievance yet.</p>
+                                                <?php else: ?>
+                                                    <ul class="list-group mb-3">
+                                                        <?php foreach ($updates as $update): ?>
+                                                            <li class="list-group-item">
+                                                                <p class="mb-1"><?php echo htmlspecialchars($update['update_text']); ?></p>
+                                                                <small class="text-muted">By <?php echo htmlspecialchars($update['representative_name']); ?> on <?php echo date("m/d/Y h:i A", strtotime($update['created_at'])); ?></small>
+                                                            </li>
+                                                        <?php endforeach; ?>
+                                                    </ul>
+                                                <?php endif; ?>
+
+                                                <form action="index.php?page=<?php echo urlencode($page); ?>" method="post">
+                                                    <input type="hidden" name="add_grievance_update" value="1">
+                                                    <input type="hidden" name="grievance_id" value="<?php echo $grievance['id']; ?>">
+                                                    <div class="mb-3">
+                                                        <label for="update_text_<?php echo $grievance['id']; ?>" class="form-label">Add Update</label>
+                                                        <textarea class="form-control" id="update_text_<?php echo $grievance['id']; ?>" name="update_text" rows="3" required></textarea>
+                                                    </div>
+                                                    <div class="mb-3">
+                                                        <label for="representative_name_<?php echo $grievance['id']; ?>" class="form-label">Your Name (Union Representative)</label>
+                                                        <input type="text" class="form-control" id="representative_name_<?php echo $grievance['id']; ?>" name="representative_name" required>
+                                                    </div>
+                                                    <button type="submit" class="btn btn-primary">Submit Update</button>
+                                                </form>
+                                            </div>
                                         </td>
                                     </tr>
                                 <?php endforeach; ?>
@@ -269,10 +167,11 @@
                         <div class="mb-3">
                             <label for="status" class="form-label">Status</label>
                             <select class="form-select" id="status" name="status" required>
-                                <option value="Open">Open</option>
-                                <option value="In Progress">In Progress</option>
-                                <option value="Resolved">Resolved</option>
-                                <option value="Closed">Closed</option>
+                                <?php
+                                foreach ($status_options as $option) {
+                                    echo '<option value="' . htmlspecialchars($option) . '">' . htmlspecialchars($option) . '</option>';
+                                }
+                                ?>
                             </select>
                         </div>
                         <div class="mb-3">
@@ -316,10 +215,11 @@
                         <div class="mb-3">
                             <label for="edit_status" class="form-label">Status</label>
                             <select class="form-select" id="edit_status" name="status" required>
-                                <option value="Open">Open</option>
-                                <option value="In Progress">In Progress</option>
-                                <option value="Resolved">Resolved</option>
-                                <option value="Closed">Closed</option>
+                                <?php
+                                foreach ($status_options as $option) {
+                                    echo '<option value="' . htmlspecialchars($option) . '">' . htmlspecialchars($option) . '</option>';
+                                }
+                                ?>
                             </select>
                         </div>
                         <div class="mb-3">
@@ -340,48 +240,4 @@
         </div>
     </div>
 
-    <footer class="footer mt-auto py-3 bg-light">
-        <div class="container text-center">
-            <span class="text-muted">Built with <a href="https://flatlogic.com" target="_blank">Flatlogic</a></span>
-        </div>
-    </footer>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            var editGrievanceModal = document.getElementById('editGrievanceModal');
-            editGrievanceModal.addEventListener('show.bs.modal', function (event) {
-                var button = event.relatedTarget;
-                var id = button.getAttribute('data-id');
-                var grievantName = button.getAttribute('data-grievant-name');
-                var discipline = button.getAttribute('data-discipline');
-                var subject = button.getAttribute('data-subject');
-                var status = button.getAttribute('data-status');
-                var unionRepresentative = button.getAttribute('data-union-representative');
-                var category = button.getAttribute('data-category');
-                var caseNumber = button.getAttribute('data-case-number');
-
-                var modal = this;
-                modal.querySelector('#edit_grievance_id').value = id;
-                modal.querySelector('#edit_grievant_name').value = grievantName;
-                modal.querySelector('#edit_discipline').value = discipline;
-                modal.querySelector('#edit_subject').value = subject;
-                modal.querySelector('#edit_status').value = status;
-                modal.querySelector('#edit_union_representative').value = unionRepresentative;
-
-                var caseNumberWrapper = modal.querySelector('#edit_case_number_wrapper');
-                var caseNumberInput = modal.querySelector('#edit_case_number');
-
-                if (category === 'FWD to Office' || category === 'Terminations') {
-                    caseNumberWrapper.style.display = 'block';
-                    caseNumberInput.value = caseNumber;
-                } else {
-                    caseNumberWrapper.style.display = 'none';
-                    caseNumberInput.value = '';
-                }
-            });
-        });
-    </script>
-</body>
-</html>
+    <?php require_once 'footer.php'; ?>
diff --git a/statistics.php b/statistics.php
new file mode 100644
index 0000000..3c56748
--- /dev/null
+++ b/statistics.php
@@ -0,0 +1,232 @@
+<?php
+require_once 'header.php';
+
+try {
+    $pdo = db();
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    // Fetch data for Discipline
+    $discipline_stmt = $pdo->query("SELECT discipline, COUNT(*) as count FROM grievances GROUP BY discipline");
+    $discipline_data = $discipline_stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    // Fetch data for Subject
+    $subject_stmt = $pdo->query("SELECT subject, COUNT(*) as count FROM grievances GROUP BY subject");
+    $subject_data = $subject_stmt->fetchAll(PDO::FETCH_ASSOC);
+
+    // Fetch data for Grievances per Quarter
+    $quarter_stmt = $pdo->query("SELECT QUARTER(last_updated) as quarter, COUNT(*) as count FROM grievances GROUP BY QUARTER(last_updated)");
+    $quarter_data = $quarter_stmt->fetchAll(PDO::FETCH_ASSOC);
+
+} catch (PDOException $e) {
+    echo '<div class="alert alert-danger">Database error: ' . $e->getMessage() . '</div>';
+    exit;
+}
+
+$discipline_labels = [];
+$discipline_values = [];
+foreach ($discipline_data as $data) {
+    $discipline_labels[] = $data['discipline'];
+    $discipline_values[] = $data['count'];
+}
+
+$subject_labels = [];
+$subject_values = [];
+foreach ($subject_data as $data) {
+    $subject_labels[] = $data['subject'];
+    $subject_values[] = $data['count'];
+}
+
+$quarter_labels = [];
+$quarter_values = [];
+foreach ($quarter_data as $data) {
+    $quarter_labels[] = 'Q' . $data['quarter'];
+    $quarter_values[] = $data['count'];
+}
+?>
+
+<div class="container mt-5">
+    <h2 class="text-center mb-4">Grievance Statistics</h2>
+    <div class="row">
+        <div class="col-md-4">
+            <h4 class="text-center">Discipline</h4>
+            <canvas id="disciplineChart"></canvas>
+        </div>
+        <div class="col-md-4">
+            <h4 class="text-center">Subject</h4>
+            <canvas id="subjectChart"></canvas>
+        </div>
+        <div class="col-md-4">
+            <h4 class="text-center">Grievances per Quarter</h4>
+            <canvas id="quarterChart"></canvas>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    // Discipline Chart
+    var disciplineCtx = document.getElementById('disciplineChart').getContext('2d');
+    var disciplineChart = new Chart(disciplineCtx, {
+        type: 'pie',
+        data: {
+            labels: <?php echo json_encode($discipline_labels); ?>,
+            datasets: [{
+                label: 'Discipline',
+                data: <?php echo json_encode($discipline_values); ?>,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)',
+                    'rgba(153, 102, 255, 0.7)',
+                    'rgba(255, 159, 64, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            if (context.parsed !== null) {
+                                label += context.parsed;
+                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                                const percentage = (context.parsed / total * 100).toFixed(2) + '%';
+                                label += ' (' + percentage + ')';
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Subject Chart
+    var subjectCtx = document.getElementById('subjectChart').getContext('2d');
+    var subjectChart = new Chart(subjectCtx, {
+        type: 'pie',
+        data: {
+            labels: <?php echo json_encode($subject_labels); ?>,
+            datasets: [{
+                label: 'Subject',
+                data: <?php echo json_encode($subject_values); ?>,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)',
+                    'rgba(153, 102, 255, 0.7)',
+                    'rgba(255, 159, 64, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            if (context.parsed !== null) {
+                                label += context.parsed;
+                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                                const percentage = (context.parsed / total * 100).toFixed(2) + '%';
+                                label += ' (' + percentage + ')';
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Quarter Chart
+    var quarterCtx = document.getElementById('quarterChart').getContext('2d');
+    var quarterChart = new Chart(quarterCtx, {
+        type: 'pie',
+        data: {
+            labels: <?php echo json_encode($quarter_labels); ?>,
+            datasets: [{
+                label: 'Grievances per Quarter',
+                data: <?php echo json_encode($quarter_values); ?>,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            if (context.parsed !== null) {
+                                label += context.parsed;
+                                const total = context.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                                const percentage = (context.parsed / total * 100).toFixed(2) + '%';
+                                label += ' (' + percentage + ')';
+                            }
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+});
+</script>
+
+<?php
+require_once 'footer.php';
+?>
\ No newline at end of file