diff --git a/core/templates/base.html b/core/templates/base.html
index 54b622d..0a89d79 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -14,17 +14,15 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <!-- 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="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
     {% block head %}{% endblock %}
 </head>
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #0f172a;">
+    <nav class="navbar navbar-expand-lg navbar-dark">
         <div class="container">
             <a class="navbar-brand heading-font fw-bold" href="{% url 'home' %}">
-                <span style="color: #10b981;">Fox</span> Fitt
+                <span style="color: var(--accent-color);">Fox</span> Fitt
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
diff --git a/core/templates/core/create_receipt.html b/core/templates/core/create_receipt.html
index 84d9e6c..bb97e05 100644
--- a/core/templates/core/create_receipt.html
+++ b/core/templates/core/create_receipt.html
@@ -5,7 +5,7 @@
 <div class="container mt-5">
     <div class="row justify-content-center">
         <div class="col-lg-8">
-            <div class="card shadow-lg border-0">
+            <div class="card shadow-sm border-0">
                 <div class="card-header text-white py-3" style="background-color: var(--primary-color); border-top-left-radius: 1rem; border-top-right-radius: 1rem;">
                     <h4 class="mb-0 fw-bold"><i class="fas fa-file-invoice-dollar me-2"></i>Receipt Generator</h4>
                 </div>
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 9835916..ada7f4d 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -159,7 +159,7 @@
             <!-- This Week Summary -->
             <div class="card p-4 mb-4">
                 <div class="d-flex justify-content-between align-items-center">
-                    <h5 class="mb-0"><i class="bi bi-calendar-week me-2"></i>This Week</h5>
+                    <h5 class="mb-0"><i class="fas fa-calendar-week me-2"></i>This Week</h5>
                     <a href="{% url 'work_log_list' %}?view=calendar" class="btn btn-sm btn-link text-decoration-none">View Calendar &rarr;</a>
                 </div>
                 <div class="d-flex flex-wrap gap-4 mt-3">
diff --git a/core/templates/core/loan_list.html b/core/templates/core/loan_list.html
index 3a4d388..78e2086 100644
--- a/core/templates/core/loan_list.html
+++ b/core/templates/core/loan_list.html
@@ -30,7 +30,7 @@
         <div class="card-body p-0">
             <div class="table-responsive">
                 <table class="table table-hover align-middle mb-0">
-                    <thead class="bg-light">
+                    <thead class="table-light">
                         <tr>
                             <th class="ps-4">Date Issued</th>
                             <th>Worker</th>
diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html
index e72c226..b0b2d6b 100644
--- a/core/templates/core/payroll_dashboard.html
+++ b/core/templates/core/payroll_dashboard.html
@@ -147,7 +147,7 @@
             <div class="card-body p-0">
                 <div class="table-responsive">
                     <table class="table table-hover align-middle mb-0">
-                        <thead class="bg-light">
+                        <thead class="table-light">
                             <tr>
                                 <th class="ps-4">Worker Name</th>
                                 <th>Breakdown</th>
@@ -253,7 +253,7 @@
             <div class="card-body p-0">
                 <div class="table-responsive">
                     <table class="table table-hover align-middle mb-0">
-                        <thead class="bg-light">
+                        <thead class="table-light">
                             <tr>
                                 <th class="ps-4">Date</th>
                                 <th>Payslip ID</th>
@@ -313,7 +313,7 @@
         <div class="card-body p-0">
             <div class="table-responsive">
                 <table class="table table-hover align-middle mb-0">
-                    <thead class="bg-light">
+                    <thead class="table-light">
                         <tr>
                             <th class="ps-4">Date Issued</th>
                             <th>Worker</th>
@@ -1072,7 +1072,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 modalBody.innerHTML = html;
             })
             .catch(function(err) {
-                modalBody.innerHTML = '<div class="text-center py-4 text-danger"><i class="bi bi-exclamation-triangle fs-3"></i><p class="mt-2">Could not load preview.</p></div>';
+                modalBody.innerHTML = '<div class="text-center py-4 text-danger"><i class="fas fa-exclamation-triangle fs-3"></i><p class="mt-2">Could not load preview.</p></div>';
             });
         });
     });
diff --git a/core/templates/core/payslip.html b/core/templates/core/payslip.html
index c86ceae..4b296ec 100644
--- a/core/templates/core/payslip.html
+++ b/core/templates/core/payslip.html
@@ -10,7 +10,7 @@
         <button onclick="window.print()" class="btn btn-accent">Print Payslip</button>
     </div>
 
-    <div class="card border-0 shadow-lg" id="payslip-card">
+    <div class="card border-0 shadow-sm" id="payslip-card">
         <div class="card-body p-5">
             <!-- Header -->
             <div class="row mb-5 border-bottom pb-4 align-items-center">
@@ -44,7 +44,7 @@
             <!-- Work Details -->
             <h6 class="text-uppercase text-muted fw-bold small mb-3">Work Log Details (Attendance)</h6>
             <div class="table-responsive mb-4">
-                <table class="table table-bordered mb-0">
+                <table class="table table-hover mb-0">
                     <thead class="table-light">
                         <tr>
                             <th>Date</th>
@@ -80,7 +80,7 @@
             {% if adjustments %}
             <h6 class="text-uppercase text-muted fw-bold small mb-3 mt-4">Adjustments (Bonuses, Deductions, Loans)</h6>
             <div class="table-responsive mb-4">
-                <table class="table table-bordered mb-0">
+                <table class="table table-hover mb-0">
                     <thead class="table-light">
                         <tr>
                             <th>Date</th>
diff --git a/core/templates/core/work_log_list.html b/core/templates/core/work_log_list.html
index 4234df6..5799f9f 100644
--- a/core/templates/core/work_log_list.html
+++ b/core/templates/core/work_log_list.html
@@ -19,15 +19,15 @@
                 <!-- View Switcher -->
                 <div class="btn-group me-2 shadow-sm" role="group">
                   <a href="?view=list&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode != 'calendar' %}active fw-bold{% endif %}">
-                      <i class="bi bi-list-ul"></i> List
+                      <i class="fas fa-list"></i> List
                   </a>
                   <a href="?view=calendar&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode == 'calendar' %}active fw-bold{% endif %}">
-                      <i class="bi bi-calendar3"></i> Calendar
+                      <i class="fas fa-calendar-alt"></i> Calendar
                   </a>
                 </div>
 
                 <a href="{% url 'export_work_log_csv' %}?{{ request.GET.urlencode }}" class="btn btn-outline-secondary shadow-sm border-0 bg-white text-dark">
-                    <i class="bi bi-download me-1"></i> Export CSV
+                    <i class="fas fa-download me-1"></i> Export CSV
                 </a>
                 <a href="{% url 'log_attendance' %}" class="btn btn-accent shadow-sm">
                     + New Entry
@@ -93,7 +93,7 @@
                     <div>
                         {% if selected_worker or selected_team or selected_project or selected_payment_status and selected_payment_status != 'all' %}
                         <a href="{% url 'work_log_list' %}?view={{ view_mode }}" class="btn btn-sm btn-link text-decoration-none text-muted p-0">
-                            <i class="bi bi-x-circle"></i> Clear all filters
+                            <i class="fas fa-times-circle"></i> Clear all filters
                         </a>
                         {% else %}
                         <small class="text-muted">Showing all records</small>
@@ -135,10 +135,10 @@
                 <h3 class="mb-0 fw-bold text-dark">{{ month_name }} {{ curr_year }}</h3>
                 <div class="btn-group shadow-sm">
                     <a href="?view=calendar&month={{ prev_month }}&year={{ prev_year }}&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-light border bg-white">
-                        <i class="bi bi-chevron-left"></i> Previous
+                        <i class="fas fa-chevron-left"></i> Previous
                     </a>
                     <a href="?view=calendar&month={{ next_month }}&year={{ next_year }}&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-light border bg-white">
-                        Next <i class="bi bi-chevron-right"></i>
+                        Next <i class="fas fa-chevron-right"></i>
                     </a>
                 </div>
             </div>
@@ -146,7 +146,7 @@
         <div class="card-body p-0">
             <div class="table-responsive">
                 <table class="table table-bordered mb-0 calendar-table" style="table-layout: fixed;">
-                    <thead class="bg-light text-center text-uppercase text-muted small">
+                    <thead class="table-light text-center text-uppercase text-muted small">
                         <tr>
                             <th style="width: 14.28%">Mon</th>
                             <th style="width: 14.28%">Tue</th>
@@ -176,7 +176,7 @@
                                                 <div class="fw-bold text-truncate">{{ record.project_name }}</div>
                                                 {% if record.type == 'WORK' and record.team_name %}
                                                     <div class="text-muted small text-truncate" style="font-size: 0.7rem;">
-                                                        <i class="bi bi-people-fill me-1"></i>{{ record.team_name }}
+                                                        <i class="fas fa-users me-1"></i>{{ record.team_name }}
                                                     </div>
                                                 {% endif %}
                                                 <div class="text-muted text-truncate">
@@ -218,7 +218,7 @@
             {% if records %}
             <div class="table-responsive">
                 <table class="table table-hover align-middle mb-0">
-                    <thead class="bg-light">
+                    <thead class="table-light">
                         <tr>
                             <th class="ps-4">Date</th>
                             <th>Description / Project</th>
@@ -241,7 +241,7 @@
                                         {{ record.project_name }}
                                     </span>
                                     {% if record.team_name %}
-                                        <small class="text-muted ms-1"><i class="bi bi-people-fill"></i> {{ record.team_name }}</small>
+                                        <small class="text-muted ms-1"><i class="fas fa-users"></i> {{ record.team_name }}</small>
                                     {% endif %}
                                 {% else %}
                                     <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 px-2 py-1">
@@ -282,7 +282,7 @@
                                 {% if record.paid_record %}
                                     <a href="{% url 'payslip_detail' record.paid_record.id %}" class="text-decoration-none">
                                         <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">
-                                            <i class="bi bi-check-circle-fill"></i> Paid (Slip #{{ record.paid_record.id }})
+                                            <i class="fas fa-check-circle"></i> Paid (Slip #{{ record.paid_record.id }})
                                         </span>
                                     </a>
                                 {% else %}
@@ -298,7 +298,7 @@
                             <td class="pe-4 text-end">
                                 <div class="dropdown">
                                     <button class="btn btn-sm btn-outline-light text-dark border-0" type="button" data-bs-toggle="dropdown">
-                                        <i class="bi bi-three-dots-vertical"></i>
+                                        <i class="fas fa-ellipsis-v"></i>
                                     </button>
                                     <ul class="dropdown-content dropdown-menu dropdown-menu-end">
                                         {% if record.type == 'WORK' %}
@@ -330,7 +330,7 @@
             </div>
             {% else %}
             <div class="text-center py-5">
-                <i class="bi bi-search display-1 text-muted opacity-25 mb-3 d-block"></i>
+                <i class="fas fa-search display-1 text-muted opacity-25 mb-3 d-block"></i>
                 <h4 class="text-muted">No records found matching filters.</h4>
                 <p class="text-muted mb-4">Try adjusting your filters or record a new entry.</p>
                 <a href="{% url 'log_attendance' %}" class="btn btn-primary">Log Attendance</a>
@@ -445,7 +445,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // Build detail HTML with date grouping for multi-select
         let html = '<div class="table-responsive"><table class="table table-hover align-middle mb-0">';
-        html += '<thead class="bg-light"><tr>';
+        html += '<thead class="table-light"><tr>';
         if (sorted.length > 1) html += '<th class="ps-4">Date</th>';
         html += '<th class="' + (sorted.length === 1 ? 'ps-4' : '') + '">Description / Project</th><th>Workers</th><th>Amount</th><th>Supervisor</th><th>Notes</th></tr></thead><tbody>';
 
diff --git a/core/templates/registration/login.html b/core/templates/registration/login.html
index ebdaa7d..14119b5 100644
--- a/core/templates/registration/login.html
+++ b/core/templates/registration/login.html
@@ -8,7 +8,7 @@
             <div class="card shadow-sm border-0">
                 <div class="card-body p-5">
                     <div class="text-center mb-4">
-                        <h2 class="fw-bold heading-font"><span style="color: #10b981;">Fox</span> Fitt</h2>
+                        <h2 class="fw-bold heading-font"><span style="color: var(--accent-color);">Fox</span> Fitt</h2>
                         <p class="text-muted">Sign in to manage work & payroll</p>
                     </div>
 
diff --git a/static/css/custom.css b/static/css/custom.css
index e19b888..121a2dd 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,5 +1,6 @@
 :root {
     --primary-color: #1e293b;
+    --primary-dark: #0f172a;
     --accent-color: #10b981;
     --bg-color: #f1f5f9;
     --text-main: #334155;
@@ -22,13 +23,14 @@ h1, h2, h3, .heading-font {
 }
 
 .navbar {
+    background-color: var(--primary-dark);
     position: sticky;
     top: 0;
     z-index: 1000;
 }
 
 .dashboard-header {
-    background: linear-gradient(135deg, var(--primary-color) 0%, #334155 100%);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--text-main) 100%);
     color: var(--white);
     padding: 4rem 2rem;
     margin-bottom: -4rem;
