diff --git a/assets/css/custom.css b/assets/css/custom.css
index 48aefb6..6fcb2fc 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,26 +1,49 @@
+/* E-Waste Reclaimer Custom Styles */
+
+:root {
+    --primary-color: #28a745;
+    --secondary-color: #6c757d;
+    --light-gray: #f8f9fa;
+    --dark-color: #343a40;
+}
+
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
-.btn-success {
-    background-color: #28a745;
-    border-color: #28a745;
+main {
+    flex: 1;
 }
 
-.btn-success:hover {
+.navbar-brand {
+    font-weight: bold;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.btn-primary:hover {
     background-color: #218838;
     border-color: #1e7e34;
 }
-
 .text-success {
-    color: #28a745 !important;
+    color: var(--primary-color) !important;
 }
-
-.card {
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+.hero-section {
+    background: linear-gradient(to right, rgba(40, 167, 69, 0.1), rgba(248, 249, 250, 0.1)), var(--light-gray);
+    border-bottom: 5px solid var(--primary-color);
 }
-
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+.card-icon i {
+    color: var(--primary-color);
 }
+.bg-dark {
+    background-color: var(--dark-color) !important;
+}
+footer {
+    background-color: var(--dark-color);
+}
\ No newline at end of file
diff --git a/dashboard.php b/dashboard.php
index 6f10d70..dd240f2 100644
--- a/dashboard.php
+++ b/dashboard.php
@@ -14,49 +14,66 @@ require_once 'db/config.php';
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard - E-Waste Reclaimer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
-    <header>
-        <div class="container">
-            <div class="logo">
-                <h1><a href="index.php">E-Waste Reclaimer</a></h1>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="index.php">Find a Center</a></li>
-                    <li><a href="dashboard.php">Dashboard</a></li>
-                    <li><a href="logout.php">Logout</a></li>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.php"><i class="fas fa-recycle me-2"></i>E-Waste Reclaimer</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php">Find a Center</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="dashboard.php">Dashboard</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="logout.php">Logout</a>
+                    </li>
                 </ul>
-            </nav>
+            </div>
         </div>
-    </header>
+    </nav>
 
-    <main class="container page-main">
-        <section>
-            <h2>Welcome, <?php echo htmlspecialchars($_SESSION['user_name']); ?>!</h2>
-            <p>This is your dashboard. From here you will be able to submit e-waste, track your points, and see your submission history.</p>
-            
-            <div class="dashboard-stats">
-                <div class="stat-card">
-                    <h3>Your Points</h3>
-                    <p class="points-total">0</p>
-                    <p>Keep recycling to earn more!</p>
-                </div>
-                <div class="stat-card">
-                    <h3>Submissions</h3>
-                    <p class="submissions-total">0</p>
-                    <a href="#" class="btn btn-secondary">Submit New E-Waste</a>
+    <main class="container my-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1>Welcome, <?php echo htmlspecialchars($_SESSION['user_name']); ?>!</h1>
+        </div>
+
+        <p class="lead mb-5">This is your dashboard. From here you can submit e-waste, track your points, and view your submission history.</p>
+
+        <div class="row">
+            <div class="col-md-6 mb-4">
+                <div class="card text-center h-100 shadow-sm">
+                    <div class="card-body">
+                        <h5 class="card-title">Your Points</h5>
+                        <p class="display-4 text-success fw-bold">0</p>
+                        <p class="card-text">Keep recycling to earn more!</p>
+                    </div>
                 </div>
             </div>
-        </section>
+            <div class="col-md-6 mb-4">
+                <div class="card text-center h-100 shadow-sm">
+                    <div class="card-body">
+                        <h5 class="card-title">Your Submissions</h5>
+                        <p class="display-4 fw-bold">0</p>
+                        <a href="#" class="btn btn-primary">Submit New E-Waste</a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </main>
 
-    <footer>
-        <div class="container">
-            <p>&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
-        </div>
+    <footer class="bg-dark text-white text-center p-3 mt-auto">
+        <p class="mb-0">&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
     </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/index.php b/index.php
index 089ef76..5adfd4c 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,6 @@
-<?php 
+<?php
 session_start();
-require_once 'db/config.php'; 
+require_once 'db/config.php';
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -9,40 +9,52 @@ require_once 'db/config.php';
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>E-Waste Reclaimer</title>
     <meta name="description" content="A platform to help you recycle your e-waste responsibly.">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
-    <header>
-        <div class="container">
-            <div class="logo">
-                <h1><a href="index.php">E-Waste Reclaimer</a></h1>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="index.php">Find a Center</a></li>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.php"><i class="fas fa-recycle me-2"></i>E-Waste Reclaimer</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="index.php">Find a Center</a>
+                    </li>
                     <?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true): ?>
-                        <li><a href="dashboard.php">Dashboard</a></li>
-                        <li><a href="logout.php">Logout</a></li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="dashboard.php">Dashboard</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="logout.php">Logout</a>
+                        </li>
                     <?php else: ?>
-                        <li><a href="login.php">Login</a></li>
-                        <li><a href="register.php">Register</a></li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="login.php">Login</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="register.php">Register</a>
+                        </li>
                     <?php endif; ?>
                 </ul>
-            </nav>
+            </div>
         </div>
-    </header>
+    </nav>
 
-    <main class="container page-main">
-        <section class="hero">
-            <h2>Welcome to E-Waste Reclaimer</h2>
-            <p>Your partner in responsible electronics recycling. Find a center near you and help us build a sustainable future.</p>
-            <a href="#centers-list" class="btn btn-primary">Find a Center</a>
-        </section>
+    <main class="container my-5">
+        <div class="bg-light p-5 rounded-3 text-center shadow-sm hero-section">
+            <h1 class="display-4">Welcome to E-Waste Reclaimer</h1>
+            <p class="lead">Your partner in responsible electronics recycling. Find a center near you and help us build a sustainable future.</p>
+            <a href="#centers-list" class="btn btn-primary btn-lg">Find a Recycling Center</a>
+        </div>
 
-        <section id="centers-list" class="centers-section">
-            <h2>Recycling Centers</h2>
-            <div class="card-container">
+        <section id="centers-list" class="py-5">
+            <h2 class="text-center mb-4">Recycling Centers</h2>
+            <div class="row">
             <?php
             try {
                 $pdo = db();
@@ -70,24 +82,30 @@ require_once 'db/config.php';
 
             if (!empty($centers)):
                 foreach ($centers as $center): ?>
-                    <div class="card">
-                        <div class="card-icon"><i class="fas fa-recycle"></i></div>
-                        <h3><?php echo htmlspecialchars($center['name']); ?></h3>
-                        <p><i class="fas fa-map-marker-alt"></i> <?php echo htmlspecialchars($center['address']); ?></p>
-                        <p><i class="fas fa-envelope"></i> <?php echo htmlspecialchars($center['contact']); ?></p>
+                    <div class="col-md-4 mb-4">
+                        <div class="card h-100 shadow-sm">
+                            <div class="card-body text-center">
+                                <div class="card-icon mb-3"><i class="fas fa-recycle fa-3x text-success"></i></div>
+                                <h5 class="card-title"><?php echo htmlspecialchars($center['name']); ?></h5>
+                                <p class="card-text"><i class="fas fa-map-marker-alt me-2"></i><?php echo htmlspecialchars($center['address']); ?></p>
+                                <p class="card-text"><i class="fas fa-envelope me-2"></i><?php echo htmlspecialchars($center['contact']); ?></p>
+                            </div>
+                        </div>
                     </div>
                 <?php endforeach;
             else: ?>
-                <div class="alert alert-info">No recycling centers found. Please check back later.</div>
+                <div class="col">
+                    <div class="alert alert-info">No recycling centers found. Please check back later.</div>
+                </div>
             <?php endif; ?>
             </div>
         </section>
     </main>
 
-    <footer>
-        <div class="container">
-            <p>&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
-        </div>
+    <footer class="bg-dark text-white text-center p-3">
+        <p class="mb-0">&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
     </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/login.php b/login.php
index 817316d..36c8cc6 100644
--- a/login.php
+++ b/login.php
@@ -49,64 +49,77 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - E-Waste Reclaimer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
-    <header>
-        <div class="container">
-            <div class="logo">
-                <h1><a href="index.php">E-Waste Reclaimer</a></h1>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="index.php">Find a Center</a></li>
-                    <li><a href="login.php">Login</a></li>
-                    <li><a href="register.php">Register</a></li>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.php"><i class="fas fa-recycle me-2"></i>E-Waste Reclaimer</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php">Find a Center</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="login.php">Login</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="register.php">Register</a>
+                    </li>
                 </ul>
-            </nav>
+            </div>
         </div>
-    </header>
+    </nav>
 
-    <main class="container page-main">
-        <section class="form-section">
-            <h2>Login to Your Account</h2>
-            <p>Access your dashboard to track your e-waste submissions.</p>
+    <main class="container my-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card shadow-sm">
+                    <div class="card-body p-5">
+                        <h2 class="card-title text-center mb-4">Login to Your Account</h2>
+                        
+                        <?php if (!empty($errors)): ?>
+                            <div class="alert alert-danger">
+                                <?php foreach ($errors as $error): ?>
+                                    <p class="mb-0"><?php echo htmlspecialchars($error); ?></p>
+                                <?php endforeach; ?>
+                            </div>
+                        <?php endif; ?>
 
-            <?php if (!empty($errors)): ?>
-                <div class="alert alert-danger">
-                    <?php foreach ($errors as $error): ?>
-                        <p><?php echo htmlspecialchars($error); ?></p>
-                    <?php endforeach; ?>
-                </div>
-            <?php endif; ?>
+                        <?php if ($success_msg): ?>
+                            <div class="alert alert-success">
+                                <p class="mb-0"><?php echo htmlspecialchars($success_msg); ?></p>
+                            </div>
+                        <?php endif; ?>
 
-            <?php if ($success_msg): ?>
-                <div class="alert alert-success">
-                    <p><?php echo htmlspecialchars($success_msg); ?></p>
+                        <form action="login.php" method="post">
+                            <div class="mb-3">
+                                <label for="email" class="form-label">Email Address</label>
+                                <input type="email" class="form-control" id="email" name="email" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="password" class="form-label">Password</label>
+                                <input type="password" class="form-control" id="password" name="password" required>
+                            </div>
+                            <div class="d-grid">
+                                <button type="submit" class="btn btn-primary">Login</button>
+                            </div>
+                        </form>
+                    </div>
                 </div>
-            <?php endif; ?>
-
-            <form action="login.php" method="post">
-                <div class="form-group">
-                    <label for="email">Email Address</label>
-                    <input type="email" id="email" name="email" required>
-                </div>
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input type="password" id="password" name="password" required>
-                </div>
-                <div class="form-group">
-                    <button type="submit" class="btn btn-primary">Login</button>
-                </div>
-            </form>
-        </section>
+            </div>
+        </div>
     </main>
 
-    <footer>
-        <div class="container">
-            <p>&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
-        </div>
+    <footer class="bg-dark text-white text-center p-3 mt-auto">
+        <p class="mb-0">&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
     </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/register.php b/register.php
index d3b640e..19e1053 100644
--- a/register.php
+++ b/register.php
@@ -3,7 +3,6 @@ session_start();
 require_once 'db/config.php';
 
 $errors = [];
-$success = '';
 
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
     $name = trim($_POST['name']);
@@ -46,62 +45,75 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Register - E-Waste Reclaimer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
-    <header>
-        <div class="container">
-            <div class="logo">
-                <h1><a href="index.php">E-Waste Reclaimer</a></h1>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="index.php">Find a Center</a></li>
-                    <li><a href="login.php">Login</a></li>
-                    <li><a href="register.php">Register</a></li>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.php"><i class="fas fa-recycle me-2"></i>E-Waste Reclaimer</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php">Find a Center</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="login.php">Login</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="register.php">Register</a>
+                    </li>
                 </ul>
-            </nav>
+            </div>
         </div>
-    </header>
+    </nav>
 
-    <main class="container page-main">
-        <section class="form-section">
-            <h2>Create an Account</h2>
-            <p>Join our community to start recycling and earning points.</p>
+    <main class="container my-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card shadow-sm">
+                    <div class="card-body p-5">
+                        <h2 class="card-title text-center mb-4">Create an Account</h2>
+                        
+                        <?php if (!empty($errors)): ?>
+                            <div class="alert alert-danger">
+                                <?php foreach ($errors as $error): ?>
+                                    <p class="mb-0"><?php echo htmlspecialchars($error); ?></p>
+                                <?php endforeach; ?>
+                            </div>
+                        <?php endif; ?>
 
-            <?php if (!empty($errors)): ?>
-                <div class="alert alert-danger">
-                    <?php foreach ($errors as $error): ?>
-                        <p><?php echo htmlspecialchars($error); ?></p>
-                    <?php endforeach; ?>
+                        <form action="register.php" method="post">
+                            <div class="mb-3">
+                                <label for="name" class="form-label">Full Name</label>
+                                <input type="text" class="form-control" id="name" name="name" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="email" class="form-label">Email Address</label>
+                                <input type="email" class="form-control" id="email" name="email" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="password" class="form-label">Password</label>
+                                <input type="password" class="form-control" id="password" name="password" required minlength="6">
+                            </div>
+                            <div class="d-grid">
+                                <button type="submit" class="btn btn-primary">Register</button>
+                            </div>
+                        </form>
+                    </div>
                 </div>
-            <?php endif; ?>
-
-            <form action="register.php" method="post">
-                <div class="form-group">
-                    <label for="name">Full Name</label>
-                    <input type="text" id="name" name="name" required>
-                </div>
-                <div class="form-group">
-                    <label for="email">Email Address</label>
-                    <input type="email" id="email" name="email" required>
-                </div>
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input type="password" id="password" name="password" required minlength="6">
-                </div>
-                <div class="form-group">
-                    <button type="submit" class="btn btn-primary">Register</button>
-                </div>
-            </form>
-        </section>
+            </div>
+        </div>
     </main>
 
-    <footer>
-        <div class="container">
-            <p>&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
-        </div>
+    <footer class="bg-dark text-white text-center p-3 mt-auto">
+        <p class="mb-0">&copy; <?php echo date("Y"); ?> E-Waste Reclaimer. All Rights Reserved.</p>
     </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
