diff --git a/assets/css/custom.css b/assets/css/custom.css
index 93755df..d55c65e 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,8 +1,8 @@
-
+/* System Font Stack */
 body {
-    font-family: 'Poppins', sans-serif;
-    background-color: #121212;
-    color: #FFFFFF;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: #f8f9fa;
+    color: #212529;
 }
 
 .sidebar {
@@ -10,52 +10,81 @@ body {
     top: 0;
     left: 0;
     height: 100%;
-    width: 250px;
-    background-color: #1E1E1E;
+    width: 240px;
+    background-color: #ffffff;
+    border-right: 1px solid #e7e7e7;
     padding: 1rem;
 }
 
+.sidebar h4 {
+    color: #007bff;
+    font-weight: 700;
+}
+
 .sidebar .nav-link {
-    color: #A0A0A0;
-    font-size: 1.1rem;
+    color: #6c757d;
+    font-size: 1rem;
     margin-bottom: 0.5rem;
 }
 
 .sidebar .nav-link:hover, .sidebar .nav-link.active {
-    color: #FFFFFF;
+    color: #007bff;
 }
 
 .sidebar .nav-link .bi {
     margin-right: 0.8rem;
+    font-size: 1.2rem;
 }
 
 .main-content {
-    margin-left: 250px;
+    margin-left: 240px;
     padding: 2rem;
 }
 
 .kpi-card {
-    background-color: #1E1E1E;
-    border: 1px solid #333;
+    background-color: #ffffff;
+    border: 1px solid #e7e7e7;
     border-radius: 0.5rem;
     padding: 1.5rem;
-    color: #FFFFFF;
+    color: #212529;
+    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.kpi-card:hover {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
 }
 
 .kpi-card h5 {
-    color: #A0A0A0;
-    font-size: 1rem;
+    color: #6c757d;
+    font-size: 0.9rem;
     text-transform: uppercase;
+    font-weight: 600;
     margin-bottom: 1rem;
 }
 
 .kpi-card .value {
-    font-size: 2.5rem;
-    font-weight: 600;
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: #212529;
 }
 
 .kpi-card .icon {
-    font-size: 3rem;
+    font-size: 2.8rem;
     color: #007bff;
-    opacity: 0.5;
+    opacity: 0.2;
 }
+
+.card {
+    border: 1px solid #e7e7e7;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.table {
+    color: #212529;
+}
+
+.table thead th {
+    font-weight: 600;
+    color: #495057;
+}
\ No newline at end of file
diff --git a/customers.php b/customers.php
new file mode 100644
index 0000000..0815e26
--- /dev/null
+++ b/customers.php
@@ -0,0 +1,127 @@
+<?php
+require_once 'db/config.php';
+
+try {
+    $pdo = db();
+    $stmt = $pdo->query('SELECT id, name, email, plan, status FROM customers ORDER BY id');
+    $customers = $stmt->fetchAll();
+} catch (PDOException $e) {
+    // For development, you might want to log this error or display a generic message
+    // For production, log the error and show a user-friendly message.
+    error_log('Database error: ' . $e->getMessage());
+    $customers = []; // Ensure $customers is an empty array on error
+    // Optionally, set an error message to display to the user
+    $errorMessage = 'Could not retrieve customer data. Please try again later.';
+}
+
+function getStatusBadgeClass($status) {
+    switch (strtolower($status)) {
+        case 'active':
+            return 'bg-success';
+        case 'suspended':
+            return 'bg-warning text-dark';
+        case 'deactivated':
+            return 'bg-danger';
+        default:
+            return 'bg-secondary';
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customers - CableCRM</title>
+    <meta name="description" content="Customer Management for CableCRM">
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body>
+
+    <div class="sidebar">
+        <h4 class="p-2 mb-4">CableCRM</h4>
+        <ul class="nav flex-column">
+            <li class="nav-item">
+                <a class="nav-link" href="index.php"><i class="bi bi-grid-1x2-fill"></i> Dashboard</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link active" href="customers.php"><i class="bi bi-people-fill"></i> Customers</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#"><i class="bi bi-receipt"></i> Invoices</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#"><i class="bi bi-box-seam"></i> Plans</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#"><i class="bi bi-bar-chart-fill"></i> Reports</a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="main-content">
+        <div class="container-fluid">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <h1>Customers</h1>
+                <button class="btn btn-primary"><i class="bi bi-plus-circle-fill me-2"></i>Add Customer</button>
+            </div>
+
+            <?php if (isset($errorMessage)): ?>
+                <div class="alert alert-danger" role="alert">
+                    <?php echo htmlspecialchars($errorMessage); ?>
+                </div>
+            <?php endif; ?>
+
+            <div class="card">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Name</th>
+                                    <th>Email</th>
+                                    <th>Plan</th>
+                                    <th>Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php if (empty($customers) && !isset($errorMessage)): ?>
+                                    <tr>
+                                        <td colspan="6" class="text-center">No customers found.</td>
+                                    </tr>
+                                <?php else: ?>
+                                    <?php foreach ($customers as $customer): ?>
+                                        <tr>
+                                            <td>CUST-<?php echo str_pad($customer['id'], 3, '0', STR_PAD_LEFT); ?></td>
+                                            <td><?php echo htmlspecialchars($customer['name']); ?></td>
+                                            <td><?php echo htmlspecialchars($customer['email']); ?></td>
+                                            <td><?php echo htmlspecialchars($customer['plan']); ?></td>
+                                            <td><span class="badge <?php echo getStatusBadgeClass($customer['status']); ?>"><?php echo htmlspecialchars(ucfirst($customer['status'])); ?></span></td>
+                                            <td>
+                                                <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil-fill"></i></button>
+                                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash-fill"></i></button>
+                                            </td>
+                                        </tr>
+                                    <?php endforeach; ?>
+                                <?php endif; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
+    <script src="assets/js/main.js"></script>
+</body>
+</html>
diff --git a/db/migrate.php b/db/migrate.php
new file mode 100644
index 0000000..68baaba
--- /dev/null
+++ b/db/migrate.php
@@ -0,0 +1,31 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+function run_migrations() {
+    $pdo = db();
+    $migrationsDir = __DIR__ . '/migrations';
+    $files = glob($migrationsDir . '/*.sql');
+
+    if (empty($files)) {
+        echo "No migration files found.\n";
+        return;
+    }
+
+    sort($files);
+
+    foreach ($files as $file) {
+        echo "Running migration: " . basename($file) . "...\n";
+        try {
+            $sql = file_get_contents($file);
+            $pdo->exec($sql);
+            echo "Success.\n";
+        } catch (PDOException $e) {
+            echo "Error running migration " . basename($file) . ": " . $e->getMessage() . "\n";
+            // Exit on first error
+            exit(1);
+        }
+    }
+}
+
+run_migrations();
+
diff --git a/db/migrations/001_create_customers_table.sql b/db/migrations/001_create_customers_table.sql
new file mode 100644
index 0000000..0319ca7
--- /dev/null
+++ b/db/migrations/001_create_customers_table.sql
@@ -0,0 +1,9 @@
+CREATE TABLE IF NOT EXISTS `customers` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `name` VARCHAR(255) NOT NULL,
+  `email` VARCHAR(255) NOT NULL UNIQUE,
+  `plan` VARCHAR(100),
+  `status` VARCHAR(50) DEFAULT 'active',
+  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
diff --git a/db/seed.php b/db/seed.php
new file mode 100644
index 0000000..4fecf77
--- /dev/null
+++ b/db/seed.php
@@ -0,0 +1,27 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+function seed_customers() {
+    $pdo = db();
+    $customers = [
+        ['name' => 'John Doe', 'email' => 'john.doe@example.com', 'plan' => 'Premium HD', 'status' => 'Active'],
+        ['name' => 'Jane Smith', 'email' => 'jane.smith@example.com', 'plan' => 'Basic', 'status' => 'Active'],
+        ['name' => 'Mike Johnson', 'email' => 'mike.j@example.com', 'plan' => 'Premium HD', 'status' => 'Suspended'],
+        ['name' => 'Sarah Williams', 'email' => 'sarah.w@example.com', 'plan' => 'Family Pack', 'status' => 'Deactivated'],
+    ];
+
+    $stmt = $pdo->prepare("INSERT INTO customers (name, email, plan, status) VALUES (:name, :email, :plan, :status) ON DUPLICATE KEY UPDATE name=VALUES(name), plan=VALUES(plan), status=VALUES(status)");
+
+    foreach ($customers as $customer) {
+        echo "Seeding customer: " . $customer['name'] . "...\n";
+        try {
+            $stmt->execute($customer);
+            echo "Success.\n";
+        } catch (PDOException $e) {
+            echo "Error seeding customer " . $customer['name'] . ": " . $e->getMessage() . "\n";
+        }
+    }
+}
+
+seed_customers();
+
diff --git a/index.php b/index.php
index ebb5a9f..af81817 100644
--- a/index.php
+++ b/index.php
@@ -16,23 +16,19 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <!-- Google Fonts (Poppins) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="assets/css/custom.css">
 </head>
 <body>
 
     <div class="sidebar">
-        <h4 class="text-white p-2 mb-4">CableCRM</h4>
+        <h4 class="p-2 mb-4">CableCRM</h4>
         <ul class="nav flex-column">
             <li class="nav-item">
-                <a class="nav-link active" href="#"><i class="bi bi-grid-1x2-fill"></i> Dashboard</a>
+                <a class="nav-link active" href="index.php"><i class="bi bi-grid-1x2-fill"></i> Dashboard</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="#"><i class="bi bi-people-fill"></i> Customers</a>
+                <a class="nav-link" href="customers.php"><i class="bi bi-people-fill"></i> Customers</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" href="#"><i class="bi bi-receipt"></i> Invoices</a>
