From 0537ea5e5e0cbf48d47e913f48151bf77d5c4d17 Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Thu, 28 May 2026 00:51:41 +0545
Subject: [PATCH] feat(templates): enrichUI with Tailwind styling and messaging
 component improvements

- Add custom border, background, and spacing utilities to base template
- Enhance message notification styling and layout
- Update delete modal button appearance and behavior
- Refine comment card component with Tailwind classes and responsive behavior
- Adjust sidebar responsiveness for mobile view
---
 templates/base.html                           |  41 +++-
 templates/base_authenticated.html             |  22 ++-
 templates/components/delete_modal.html        |  41 ++--
 templates/components/navbar.html              |  28 +--
 templates/components/sidebar.html             |  82 +++-----
 templates/components/sidebar_link.html        |   6 +
 templates/components/topbar.html              |  51 ++---
 templates/pages/accounts/login.html           |  29 +--
 templates/pages/accounts/profile.html         |  38 ++--
 templates/pages/accounts/register.html        |  25 +--
 .../pages/accounts/user_confirm_delete.html   |  16 +-
 templates/pages/accounts/user_detail.html     |  42 ++--
 templates/pages/accounts/user_form.html       |  12 +-
 templates/pages/accounts/user_list.html       |  50 ++---
 templates/pages/activity/activity_list.html   |  38 ++--
 templates/pages/dashboard.html                | 183 ++++++++----------
 .../pages/finance/expense_confirm_delete.html |  16 +-
 templates/pages/finance/expense_form.html     |  10 +-
 templates/pages/finance/expense_list.html     |  43 ++--
 .../pages/finance/invoice_confirm_delete.html |  16 +-
 templates/pages/finance/invoice_detail.html   |  38 ++--
 templates/pages/finance/invoice_form.html     |  10 +-
 templates/pages/finance/invoice_list.html     |  50 ++---
 .../pages/finance/payment_confirm_delete.html |  16 +-
 templates/pages/finance/payment_form.html     |  12 +-
 templates/pages/finance/payment_list.html     |  44 ++---
 .../finance/team_payment_confirm_delete.html  |  16 +-
 .../pages/finance/team_payment_form.html      |  12 +-
 .../pages/finance/team_payment_list.html      |  44 ++---
 .../pages/issues/issue_confirm_delete.html    |  16 +-
 templates/pages/issues/issue_detail.html      |  48 ++---
 templates/pages/issues/issue_form.html        |  12 +-
 templates/pages/issues/issue_list.html        |  54 +++---
 .../pages/kanban/board_confirm_delete.html    |  18 +-
 templates/pages/kanban/board_detail.html      |  55 +++---
 templates/pages/kanban/board_form.html        |  10 +-
 templates/pages/kanban/board_list.html        |  30 +--
 templates/pages/kanban/card_detail.html       |  66 +++----
 templates/pages/kanban/card_form.html         |  34 ++--
 .../projects/project_confirm_delete.html      |  18 +-
 templates/pages/projects/project_detail.html  |  60 +++---
 templates/pages/projects/project_form.html    |  10 +-
 templates/pages/projects/project_list.html    |  36 ++--
 .../pages/tickets/ticket_confirm_delete.html  |  16 +-
 templates/pages/tickets/ticket_detail.html    |  52 ++---
 templates/pages/tickets/ticket_form.html      |  12 +-
 templates/pages/tickets/ticket_list.html      |  58 +++---
 templates/partials/form_field.html            |  28 ++-
 templates/partials/kanban/card.html           |  18 +-
 templates/partials/kanban/comment.html        |  18 +-
 50 files changed, 839 insertions(+), 861 deletions(-)
 create mode 100644 templates/components/sidebar_link.html

diff --git a/templates/base.html b/templates/base.html
index 9d41884..bf729c6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,11 +14,46 @@
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.min.js"></script>
     {% load static tailwind_cli %}
     {% tailwind_css %}
-    <style>[x-cloak] { display: none !important; }</style>
+    <style>
+        [x-cloak] { display: none !important; }
+
+        .border-subtle { border-color: rgba(0,0,0,0.06); }
+        .border-soft { border-color: rgba(0,0,0,0.10); }
+        .border-emphasis { border-color: rgba(0,0,0,0.18); }
+
+        .bg-canvas { background-color: #f6f8fa; }
+        .bg-elevated { background-color: #ffffff; }
+        .bg-hover { background-color: rgba(0,0,0,0.03); }
+
+        .stat-card {
+            background: #fff;
+            border: 1px solid rgba(0,0,0,0.06);
+            border-radius: 12px;
+            padding: 20px;
+            transition: border-color 0.15s;
+        }
+        .stat-card:hover { border-color: rgba(59,130,246,0.25); }
+
+        .card-surface {
+            background: #fff;
+            border: 1px solid rgba(0,0,0,0.06);
+            border-radius: 12px;
+        }
+
+        .text-primary { color: #0b1c33; }
+        .text-secondary { color: #3c4a5c; }
+        .text-tertiary { color: #6b7a8e; }
+        .text-muted { color: #9ca3af; }
+
+        @media (max-width: 1023px) {
+            .sidebar-mobile { transform: translateX(-100%); }
+            .sidebar-mobile.mobile-open { transform: translateX(0); }
+        }
+    </style>
     {% block extra_head %}{% endblock %}
 </head>
-<body class="min-h-screen bg-gray-50" x-data="{ sidebarOpen: false }">
+<body class="min-h-screen bg-canvas antialiased" x-data="{ sidebarOpen: false }">
     {% block content %}{% endblock %}
     {% block extra_scripts %}{% endblock %}
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/base_authenticated.html b/templates/base_authenticated.html
index b870d38..bd58bd5 100644
--- a/templates/base_authenticated.html
+++ b/templates/base_authenticated.html
@@ -3,15 +3,23 @@
     {% include "components/topbar.html" %}
     <div class="flex">
         {% include "components/sidebar.html" %}
-        <main class="flex-1 p-6 pt-20 lg:ml-64 transition-all duration-300">
+        <main class="flex-1 min-w-0 p-4 sm:p-6 lg:p-8 pt-20 lg:ml-64 transition-all duration-300">
             {% if messages %}
-                {% for message in messages %}
-                    <div class="alert alert-{{ message.tags }} shadow-lg mb-4 rounded-xl border-l-4 border-{{ message.tags }} animate-slide-down">
-                        <span>{{ message }}</span>
-                    </div>
-                {% endfor %}
+                <div class="space-y-2 mb-6">
+                    {% for message in messages %}
+                        <div class="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium
+                            {% if message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200
+                            {% elif message.tags == 'success' %}bg-green-50 text-green-700 border border-green-200
+                            {% else %}bg-blue-50 text-blue-700 border border-blue-200{% endif %}">
+                            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                            </svg>
+                            <span>{{ message }}</span>
+                        </div>
+                    {% endfor %}
+                </div>
             {% endif %}
             {% block content_inner %}{% endblock %}
         </main>
     </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/components/delete_modal.html b/templates/components/delete_modal.html
index 46e51f9..1d18e21 100644
--- a/templates/components/delete_modal.html
+++ b/templates/components/delete_modal.html
@@ -1,20 +1,39 @@
-<input type="checkbox" id="{{ modal_id }}" class="modal-toggle" />
-<div class="modal" role="dialog">
-    <div class="modal-box text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+<input type="checkbox" id="{{ modal_id }}" class="hidden delete-modal-toggle" />
+<div class="delete-modal-container fixed inset-0 z-50 hidden items-center justify-center" id="{{ modal_id }}-container">
+    <div class="fixed inset-0 bg-black/20" onclick="closeDeleteModal('{{ modal_id }}')"></div>
+    <div class="relative bg-white rounded-xl max-w-sm w-full mx-4 border border-subtle p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
             </svg>
         </div>
-        <h3 class="font-bold text-lg mb-2">{{ title|default:"Confirm Delete" }}</h3>
-        <p class="py-4 text-gray-500">{{ message|default:"Are you sure you want to delete this item? This action cannot be undone." }}</p>
+        <h3 class="text-base font-semibold text-primary mb-1">{{ title|default:"Confirm Delete" }}</h3>
+        <p class="text-sm text-tertiary mb-5">{{ message|default:"Are you sure you want to delete this item? This action cannot be undone." }}</p>
         <form method="post" action="{{ delete_url }}">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <label for="{{ modal_id }}" class="btn btn-ghost">Cancel</label>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors cursor-pointer">Delete</button>
+                <button type="button" onclick="closeDeleteModal('{{ modal_id }}')" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors cursor-pointer">Cancel</button>
             </div>
         </form>
     </div>
-    <label class="modal-backdrop" for="{{ modal_id }}"></label>
 </div>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        var checkbox = document.getElementById('{{ modal_id }}');
+        if (checkbox) {
+            checkbox.addEventListener('change', function() {
+                var container = document.getElementById('{{ modal_id }}-container');
+                if (container) {
+                    container.style.display = this.checked ? 'flex' : 'none';
+                }
+            });
+        }
+    });
+    function closeDeleteModal(id) {
+        var checkbox = document.getElementById(id);
+        if (checkbox) checkbox.checked = false;
+        var container = document.getElementById(id + '-container');
+        if (container) container.style.display = 'none';
+    }
+</script>
\ No newline at end of file
diff --git a/templates/components/navbar.html b/templates/components/navbar.html
index 265dc6f..c87be09 100644
--- a/templates/components/navbar.html
+++ b/templates/components/navbar.html
@@ -1,27 +1 @@
-<nav class="navbar bg-base-100 shadow-sm mb-4">
-    <div class="flex-1">
-        <a href="{% url 'home' %}" class="btn btn-ghost text-xl">Project Manager</a>
-    </div>
-    <div class="flex-none">
-        <ul class="menu menu-horizontal px-1">
-            <li><a href="{% url 'project_list' %}">Projects</a></li>
-            <li><a href="{% url 'board_list' %}">Boards</a></li>
-            <li><a href="{% url 'issue_list' %}">Issues</a></li>
-            <li><a href="{% url 'ticket_list' %}">Tickets</a></li>
-            <li><a href="{% url 'invoice_list' %}">Finance</a></li>
-            {% if user.is_admin %}
-                <li><a href="{% url 'activity_list' %}">Activity</a></li>
-                <li><a href="{% url 'user_list' %}">Users</a></li>
-            {% endif %}
-            <li>
-                <details>
-                    <summary>{{ user.username }}</summary>
-                    <ul class="bg-base-100 rounded-t-none p-2">
-                        <li><a href="{% url 'profile' %}">Profile</a></li>
-                        <li><a href="{% url 'logout' %}">Logout</a></li>
-                    </ul>
-                </details>
-            </li>
-        </ul>
-    </div>
-</nav>
+<span class="block text-xs text-tertiary">(navbar.html replaced by topbar.html + sidebar.html)</span>
\ No newline at end of file
diff --git a/templates/components/sidebar.html b/templates/components/sidebar.html
index e80108e..438b74c 100644
--- a/templates/components/sidebar.html
+++ b/templates/components/sidebar.html
@@ -1,61 +1,33 @@
-<aside class="fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 bg-white border-r border-gray-200 transform transition-transform duration-300 z-20 lg:translate-x-0"
-       :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
-    <div class="p-4 space-y-1 overflow-y-auto h-full">
-        <div class="mb-4">
-            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3">Main</div>
+<aside class="sidebar-mobile fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 bg-white border-r border-subtle transition-transform duration-300 z-20 overflow-y-auto"
+       :class="{ 'mobile-open': sidebarOpen }">
+    <nav class="p-3 space-y-1">
+
+        <div class="px-3 pt-2 pb-1">
+            <p class="text-[11px] font-semibold text-muted uppercase tracking-widest">Main</p>
         </div>
-        <a href="{% url 'home' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if request.path == '/' %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
-            Dashboard
-        </a>
-        <a href="{% url 'project_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'projects' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
-            Projects
-        </a>
-        <a href="{% url 'board_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'board' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/></svg>
-            Kanban
-        </a>
-        <a href="{% url 'issue_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'issues' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-            Issues
-        </a>
-        <a href="{% url 'ticket_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'tickets' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
-            Tickets
-        </a>
-        <div class="mb-4 mt-6">
-            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3">Finance</div>
+
+        {% include "components/sidebar_link.html" with url_name="home" label="Dashboard" icon="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" %}
+        {% include "components/sidebar_link.html" with url_name="project_list" label="Projects" icon="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" %}
+        {% include "components/sidebar_link.html" with url_name="board_list" label="Kanban" icon="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7" %}
+        {% include "components/sidebar_link.html" with url_name="issue_list" label="Issues" icon="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" %}
+        {% include "components/sidebar_link.html" with url_name="ticket_list" label="Tickets" icon="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" %}
+
+        <div class="px-3 pt-5 pb-1">
+            <p class="text-[11px] font-semibold text-muted uppercase tracking-widest">Finance</p>
         </div>
-        <a href="{% url 'invoice_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'invoices' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
-            Invoices
-        </a>
-        <a href="{% url 'expense_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'expenses' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
-            Expenses
-        </a>
-        <a href="{% url 'payment_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'payments' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
-            Payments
-        </a>
-        <a href="{% url 'team_payment_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'team-payments' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
-            Payroll
-        </a>
+
+        {% include "components/sidebar_link.html" with url_name="invoice_list" label="Invoices" icon="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" %}
+        {% include "components/sidebar_link.html" with url_name="expense_list" label="Expenses" icon="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" %}
+        {% include "components/sidebar_link.html" with url_name="payment_list" label="Payments" icon="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" %}
+        {% include "components/sidebar_link.html" with url_name="team_payment_list" label="Payroll" icon="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" %}
+
         {% if user.is_admin %}
-            <div class="mb-4 mt-6">
-                <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3">Admin</div>
+            <div class="px-3 pt-5 pb-1">
+                <p class="text-[11px] font-semibold text-muted uppercase tracking-widest">Admin</p>
             </div>
-            <a href="{% url 'activity_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'activity' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-                Activity Log
-            </a>
-            <a href="{% url 'user_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'users' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
-                Users
-            </a>
+            {% include "components/sidebar_link.html" with url_name="activity_list" label="Activity Log" icon="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" %}
+            {% include "components/sidebar_link.html" with url_name="user_list" label="Users" icon="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" %}
         {% endif %}
-    </div>
+    </nav>
 </aside>
-<div class="fixed inset-0 bg-black/20 z-10 lg:hidden" x-show="sidebarOpen" @click="sidebarOpen = false" x-cloak></div>
+<div class="fixed inset-0 bg-black/10 z-10 lg:hidden" x-show="sidebarOpen" @click="sidebarOpen = false" x-cloak></div>
\ No newline at end of file
diff --git a/templates/components/sidebar_link.html b/templates/components/sidebar_link.html
new file mode 100644
index 0000000..31188b2
--- /dev/null
+++ b/templates/components/sidebar_link.html
@@ -0,0 +1,6 @@
+<a href="{% url url_name %}"
+   class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
+   {% if url_name in request.path %}bg-blue-50 text-blue-700{% else %}text-secondary hover:bg-hover{% endif %}">
+    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ icon }}"/></svg>
+    {{ label }}
+</a>
\ No newline at end of file
diff --git a/templates/components/topbar.html b/templates/components/topbar.html
index 67e4df2..02f5f2a 100644
--- a/templates/components/topbar.html
+++ b/templates/components/topbar.html
@@ -1,33 +1,20 @@
-<nav class="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-30 h-16">
-    <div class="px-4 h-full flex items-center justify-between">
-        <div class="flex items-center gap-3">
-            <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden btn btn-ghost btn-sm btn-square">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
-            </button>
-            <a href="{% url 'home' %}" class="text-xl font-bold text-blue-600">ProMan</a>
-        </div>
-        <div class="flex items-center gap-2">
-            <div class="hidden sm:flex items-center gap-1 mr-4 text-sm text-gray-500">
-                <span class="w-2 h-2 rounded-full bg-green-400"></span>
-                {{ user.get_role_display }}
-            </div>
-            <div class="dropdown dropdown-end">
-                <div tabindex="0" role="button" class="flex items-center gap-2 btn btn-ghost btn-sm">
-                    <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-medium">
-                        {{ user.first_name|first|default:user.username|first|upper }}
-                    </div>
-                    <span class="hidden sm:inline text-sm font-medium">{{ user.get_full_name|default:user.username }}</span>
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
-                </div>
-                <ul tabindex="0" class="dropdown-content menu p-2 shadow-lg bg-white rounded-xl w-48 mt-2 border">
-                    <li><a href="{% url 'profile' %}" class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>Profile</a></li>
-                    {% if user.is_admin %}
-                        <li><a href="{% url 'user_list' %}" class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>Manage Users</a></li>
-                    {% endif %}
-                    <div class="divider my-1"></div>
-                    <li><a href="{% url 'logout' %}" class="flex items-center gap-2 text-red-600"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>Logout</a></li>
-                </ul>
-            </div>
-        </div>
+<header class="fixed top-0 left-0 right-0 h-16 bg-white/80 backdrop-blur-md border-b border-subtle z-30 flex items-center justify-between px-4 sm:px-6">
+    <div class="flex items-center gap-4">
+        <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 text-secondary hover:text-primary rounded-lg hover:bg-hover transition-colors" aria-label="Toggle sidebar">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+        </button>
+        <a href="/" class="flex items-center gap-2 text-primary font-bold text-lg no-underline">
+            <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
+            ProMan
+        </a>
     </div>
-</nav>
+    <div class="flex items-center gap-3">
+        <span class="hidden sm:inline text-sm text-tertiary">{{ user.get_full_name|default:user.username }}</span>
+        <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center text-sm font-semibold">
+            {{ user.get_initials }}
+        </div>
+        <a href="{% url 'logout' %}" class="p-2 text-tertiary hover:text-secondary rounded-lg hover:bg-hover transition-colors" title="Log out">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
+        </a>
+    </div>
+</header>
\ No newline at end of file
diff --git a/templates/pages/accounts/login.html b/templates/pages/accounts/login.html
index 988ea6b..be24437 100644
--- a/templates/pages/accounts/login.html
+++ b/templates/pages/accounts/login.html
@@ -1,27 +1,30 @@
 {% extends "base.html" %}
 {% block title %}Login{% endblock %}
 {% block content %}
-<div class="w-full max-w-md">
-    <div class="bg-white rounded-2xl shadow-2xl p-8">
+<div class="min-h-screen flex items-center justify-center px-4">
+    <div class="w-full max-w-md card-surface p-8">
         <div class="text-center mb-8">
-            <h1 class="text-3xl font-bold text-blue-600">ProMan</h1>
-            <p class="text-gray-400 mt-2">Sign in to your account</p>
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
+                <h1 class="text-2xl font-bold text-primary">ProMan</h1>
+            </div>
+            <p class="text-tertiary">Sign in to your account</p>
         </div>
         <form method="post" class="space-y-4">
             {% csrf_token %}
-            <div>
-                <label class="text-sm font-medium text-gray-700">Username</label>
-                <input type="text" name="username" class="input input-bordered w-full mt-1 bg-gray-50 focus:bg-white" required>
+            <div class="space-y-1.5">
+                <label class="text-sm font-medium text-secondary">Username</label>
+                <input type="text" name="username" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors" required>
             </div>
-            <div>
-                <label class="text-sm font-medium text-gray-700">Password</label>
-                <input type="password" name="password" class="input input-bordered w-full mt-1 bg-gray-50 focus:bg-white" required>
+            <div class="space-y-1.5">
+                <label class="text-sm font-medium text-secondary">Password</label>
+                <input type="password" name="password" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors" required>
             </div>
-            <button type="submit" class="btn w-full bg-blue-600 text-white border-0 hover:bg-blue-700">Sign In</button>
+            <button type="submit" class="w-full px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">Sign In</button>
         </form>
-        <p class="text-center mt-6 text-sm text-gray-500">
+        <p class="text-center mt-6 text-sm text-tertiary">
             Don't have an account? <a href="{% url 'register' %}" class="text-blue-600 hover:text-blue-800 font-medium">Register</a>
         </p>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/accounts/profile.html b/templates/pages/accounts/profile.html
index a4d0a7c..e723a80 100644
--- a/templates/pages/accounts/profile.html
+++ b/templates/pages/accounts/profile.html
@@ -2,38 +2,38 @@
 {% block title %}Profile{% endblock %}
 {% block content_inner %}
 <div class="max-w-2xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+    <div class="card-surface overflow-hidden">
         <div class="bg-blue-600 px-6 py-12">
             <div class="flex items-center gap-4">
                 <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-white text-2xl font-bold">
-                    {{ profile_user.first_name|first|default:profile_user.username|first|upper }}
+                    {{ profile_user.get_initials }}
                 </div>
                 <div class="text-white">
-                    <h1 class="text-2xl font-bold">{{ profile_user.get_full_name|default:profile_user.username }}</h1>
-                    <p class="text-white/80">{{ profile_user.get_role_display }}</p>
+                    <h1 class="text-xl font-bold">{{ profile_user.get_full_name|default:profile_user.username }}</h1>
+                    <p class="text-white/80 text-sm">{{ profile_user.get_role_display }}</p>
                 </div>
             </div>
         </div>
-        <div class="p-6 space-y-4">
-            <div class="grid grid-cols-2 gap-4">
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Username</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.username }}</p>
+        <div class="p-6">
+            <div class="grid grid-cols-2 gap-3">
+                <div class="p-4 bg-hover rounded-xl">
+                    <p class="text-xs text-muted font-semibold uppercase tracking-wider">Username</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.username }}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Email</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.email|default:"-" }}</p>
+                <div class="p-4 bg-hover rounded-xl">
+                    <p class="text-xs text-muted font-semibold uppercase tracking-wider">Email</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.email|default:"-" }}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Role</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.get_role_display }}</p>
+                <div class="p-4 bg-hover rounded-xl">
+                    <p class="text-xs text-muted font-semibold uppercase tracking-wider">Role</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.get_role_display }}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Member Since</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.date_joined|date:"M Y" }}</p>
+                <div class="p-4 bg-hover rounded-xl">
+                    <p class="text-xs text-muted font-semibold uppercase tracking-wider">Member Since</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.date_joined|date:"M Y" }}</p>
                 </div>
             </div>
         </div>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/accounts/register.html b/templates/pages/accounts/register.html
index fa25429..dd55e6c 100644
--- a/templates/pages/accounts/register.html
+++ b/templates/pages/accounts/register.html
@@ -1,26 +1,29 @@
 {% extends "base.html" %}
 {% block title %}Register{% endblock %}
 {% block content %}
-<div class="w-full max-w-md">
-    <div class="bg-white rounded-2xl shadow-2xl p-8">
+<div class="min-h-screen flex items-center justify-center px-4">
+    <div class="w-full max-w-md card-surface p-8">
         <div class="text-center mb-8">
-            <h1 class="text-3xl font-bold text-blue-600">ProMan</h1>
-            <p class="text-gray-400 mt-2">Create your account</p>
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
+                <h1 class="text-2xl font-bold text-primary">ProMan</h1>
+            </div>
+            <p class="text-tertiary">Create your account</p>
         </div>
         <form method="post" class="space-y-3">
             {% csrf_token %}
             {% for field in form %}
-                <div>
-                    <label class="text-sm font-medium text-gray-700">{{ field.label }}</label>
-                    {{ field }}
-                    {% if field.errors %}<p class="text-red-500 text-xs mt-1">{{ field.errors.0 }}</p>{% endif %}
+                <div class="space-y-1.5">
+                    <label class="text-sm font-medium text-secondary">{{ field.label }}</label>
+                    <input type="{{ field.field.widget.input_type|default:'text' }}" name="{{ field.name }}" value="{{ field.value|default:'' }}" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors" {% if field.field.required %}required{% endif %}>
+                    {% if field.errors %}<p class="text-xs text-red-600">{{ field.errors.0 }}</p>{% endif %}
                 </div>
             {% endfor %}
-            <button type="submit" class="btn w-full bg-blue-600 text-white border-0 hover:bg-blue-700 mt-2">Create Account</button>
+            <button type="submit" class="w-full px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors mt-2">Create Account</button>
         </form>
-        <p class="text-center mt-6 text-sm text-gray-500">
+        <p class="text-center mt-6 text-sm text-tertiary">
             Already have an account? <a href="{% url 'login' %}" class="text-blue-600 hover:text-blue-800 font-medium">Sign in</a>
         </p>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/accounts/user_confirm_delete.html b/templates/pages/accounts/user_confirm_delete.html
index d73e713..91b1fdf 100644
--- a/templates/pages/accounts/user_confirm_delete.html
+++ b/templates/pages/accounts/user_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete User{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete User</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete <strong>"{{ object.username }}"</strong>?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete User</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete <strong>"{{ object.username }}"</strong>?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'user_list' %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'user_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/accounts/user_detail.html b/templates/pages/accounts/user_detail.html
index 047d8a9..8fc2658 100644
--- a/templates/pages/accounts/user_detail.html
+++ b/templates/pages/accounts/user_detail.html
@@ -2,7 +2,7 @@
 {% block title %}{{ profile_user.username }}{% endblock %}
 {% block content_inner %}
 <div class="max-w-2xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+    <div class="card-surface overflow-hidden">
         <div class="bg-blue-600 px-6 py-12">
             <div class="flex items-center gap-4">
                 <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-white text-2xl font-bold">
@@ -15,33 +15,33 @@
             </div>
         </div>
         <div class="p-6 space-y-4">
-            <div class="grid grid-cols-2 gap-4">
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Username</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.username }}</p>
+            <div class="grid grid-cols-2 gap-3 p-4 bg-hover rounded-xl">
+                <div>
+                    <p class="text-xs text-muted font-medium uppercase tracking-wider">Username</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.username }}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Email</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.email|default:"-" }}</p>
+                <div>
+                    <p class="text-xs text-muted font-medium uppercase tracking-wider">Email</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.email|default:"-" }}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Role</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.get_role_display }}</p>
+                <div>
+                    <p class="text-xs text-muted font-medium uppercase tracking-wider">Role</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.get_role_display }}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Active</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{% if profile_user.is_active %}Yes{% else %}No{% endif %}</p>
+                <div>
+                    <p class="text-xs text-muted font-medium uppercase tracking-wider">Active</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{% if profile_user.is_active %}Yes{% else %}No{% endif %}</p>
                 </div>
-                <div class="p-4 bg-gray-50 rounded-xl">
-                    <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Member Since</p>
-                    <p class="text-sm font-semibold text-gray-900 mt-1">{{ profile_user.date_joined|date:"M Y" }}</p>
+                <div>
+                    <p class="text-xs text-muted font-medium uppercase tracking-wider">Member Since</p>
+                    <p class="text-sm font-semibold text-primary mt-1">{{ profile_user.date_joined|date:"M Y" }}</p>
                 </div>
             </div>
             <div class="flex gap-3 pt-2">
-                <a href="{% url 'user_edit' profile_user.pk %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Edit User</a>
-                <a href="{% url 'user_list' %}" class="btn btn-ghost">Back</a>
+                <a href="{% url 'user_edit' profile_user.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Edit User</a>
+                <a href="{% url 'user_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Back</a>
                 {% if user.is_admin %}
-                    <label for="delete-modal-user" class="btn bg-red-600 text-white hover:bg-red-700 border-0 cursor-pointer">Delete</label>
+                    <label for="delete-modal-user" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-600 text-white hover:bg-red-700 transition-colors cursor-pointer">Delete</label>
                 {% endif %}
             </div>
         </div>
@@ -49,4 +49,4 @@
 </div>
 {% url 'user_delete' profile_user.pk as delete_url %}
 {% include "components/delete_modal.html" with modal_id="delete-modal-user" delete_url=delete_url %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/pages/accounts/user_form.html b/templates/pages/accounts/user_form.html
index 79028a1..d07cd6c 100644
--- a/templates/pages/accounts/user_form.html
+++ b/templates/pages/accounts/user_form.html
@@ -2,19 +2,19 @@
 {% block title %}Edit User{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">Edit User</h1>
-        <p class="text-sm text-gray-500 mb-6">{{ object.username }}</p>
+    <div class="card-surface p-6">
+        <h1 class="text-lg font-bold text-primary mb-1">Edit User</h1>
+        <p class="text-sm text-tertiary mb-6">{{ object.username }}</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Save Changes</button>
-                <a href="{% url 'user_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">Save Changes</button>
+                <a href="{% url 'user_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/accounts/user_list.html b/templates/pages/accounts/user_list.html
index 14bd042..e32f314 100644
--- a/templates/pages/accounts/user_list.html
+++ b/templates/pages/accounts/user_list.html
@@ -3,53 +3,53 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Users</h1>
-        <p class="text-gray-500 mt-1">Manage system users and their roles.</p>
+        <h1 class="text-2xl font-bold text-primary">Users</h1>
+        <p class="text-tertiary mt-1">Manage system users and their roles.</p>
     </div>
-    <a href="{% url 'user_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'user_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New User
     </a>
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">User</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Role</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider"></th>
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">User</th>
+                <th class="px-4 py-3 text-left">Email</th>
+                <th class="px-4 py-3 text-left">Role</th>
+                <th class="px-4 py-3 text-left">Status</th>
+                <th class="px-4 py-3 text-left"></th>
             </tr>
         </thead>
         <tbody>
             {% for u in users %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td>
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3">
                         <div class="flex items-center gap-3">
                             <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-bold">{{ u.username|first|upper }}</div>
-                            <a href="{% url 'user_detail' u.pk %}" class="font-medium text-gray-900 hover:text-blue-600">{{ u.username }}</a>
+                            <a href="{% url 'user_detail' u.pk %}" class="font-medium text-primary hover:text-blue-600">{{ u.username }}</a>
                         </div>
                     </td>
-                    <td class="text-gray-600">{{ u.email|default:"-" }}</td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if u.role == 'admin' %}bg-sky-100 text-sky-700{% elif u.role == 'client' %}bg-blue-100 text-blue-700{% else %}bg-green-100 text-green-700{% endif %}">
+                    <td class="px-4 py-3 text-secondary">{{ u.email|default:"-" }}</td>
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if u.role == 'admin' %}bg-sky-50 text-sky-700 border-sky-200{% elif u.role == 'client' %}bg-blue-50 text-blue-700 border-blue-200{% else %}bg-green-50 text-green-700 border-green-200{% endif %}">
                             {{ u.get_role_display }}
                         </span>
                     </td>
-                    <td>
+                    <td class="px-4 py-3">
                         {% if u.is_active %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-green-100 text-green-700">Active</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-medium border bg-green-50 text-green-700 border-green-200">Active</span>
                         {% else %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-red-100 text-red-700">Inactive</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-medium border bg-red-50 text-red-700 border-red-200">Inactive</span>
                         {% endif %}
                     </td>
-                    <td>
+                    <td class="px-4 py-3">
                         <div class="flex gap-1">
-                            <a href="{% url 'user_detail' u.pk %}" class="btn btn-sm btn-ghost">View</a>
-                            <a href="{% url 'user_edit' u.pk %}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">Edit</a>
-                            <a href="{% url 'user_delete' u.pk %}" class="btn btn-sm text-red-600 hover:bg-red-50 border-0">Delete</a>
+                            <a href="{% url 'user_detail' u.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">View</a>
+                            <a href="{% url 'user_edit' u.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
+                            <a href="{% url 'user_delete' u.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors">Delete</a>
                         </div>
                     </td>
                 </tr>
diff --git a/templates/pages/activity/activity_list.html b/templates/pages/activity/activity_list.html
index c14bf58..a06fb4e 100644
--- a/templates/pages/activity/activity_list.html
+++ b/templates/pages/activity/activity_list.html
@@ -2,35 +2,35 @@
 {% block title %}Activity Log{% endblock %}
 {% block content_inner %}
 <div class="mb-6">
-    <h1 class="text-2xl font-bold text-gray-900">Activity Log</h1>
-    <p class="text-gray-500 mt-1">System-wide audit trail of all actions.</p>
+    <h1 class="text-2xl font-bold text-primary">Activity Log</h1>
+    <p class="text-tertiary mt-1">System-wide audit trail of all actions.</p>
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Actor</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Action</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Object</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Timestamp</th>
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">Actor</th>
+                <th class="px-4 py-3 text-left">Action</th>
+                <th class="px-4 py-3 text-left">Object</th>
+                <th class="px-4 py-3 text-left">Timestamp</th>
             </tr>
         </thead>
         <tbody>
             {% for activity in activities %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td>
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3">
                         <div class="flex items-center gap-2">
                             <div class="w-7 h-7 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-bold">{{ activity.actor.username|first|upper }}</div>
-                            <span class="text-sm font-medium text-gray-900">{{ activity.actor.username }}</span>
+                            <span class="text-sm font-medium text-primary">{{ activity.actor.username }}</span>
                         </div>
                     </td>
-                    <td class="text-sm text-gray-700">{{ activity.verb }}</td>
-                    <td class="text-sm text-gray-500">{{ activity.content_type }} #{{ activity.object_id }}</td>
-                    <td class="text-sm text-gray-500">{{ activity.timestamp|date:"M d, Y H:i" }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ activity.verb }}</td>
+                    <td class="px-4 py-3 text-tertiary">{{ activity.content_type }} #{{ activity.object_id }}</td>
+                    <td class="px-4 py-3 text-tertiary">{{ activity.timestamp|date:"M d, Y H:i" }}</td>
                 </tr>
             {% empty %}
-                <tr><td colspan="4" class="text-center py-12 text-gray-500">No activity recorded yet.</td></tr>
+                <tr><td colspan="4" class="text-center py-12 text-tertiary">No activity recorded yet.</td></tr>
             {% endfor %}
         </tbody>
     </table>
@@ -39,11 +39,11 @@
 {% if page_obj.has_other_pages %}
     <div class="flex justify-center items-center gap-2 mt-6">
         {% if page_obj.has_previous %}
-            <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-sm bg-white border-gray-200 hover:bg-gray-50">Previous</a>
+            <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Previous</a>
         {% endif %}
-        <span class="text-sm text-gray-500">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
+        <span class="text-sm text-tertiary">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
         {% if page_obj.has_next %}
-            <a href="?page={{ page_obj.next_page_number }}" class="btn btn-sm bg-white border-gray-200 hover:bg-gray-50">Next</a>
+            <a href="?page={{ page_obj.next_page_number }}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Next</a>
         {% endif %}
     </div>
 {% endif %}
diff --git a/templates/pages/dashboard.html b/templates/pages/dashboard.html
index 636c45e..54406be 100644
--- a/templates/pages/dashboard.html
+++ b/templates/pages/dashboard.html
@@ -2,174 +2,149 @@
 {% block title %}Dashboard{% endblock %}
 {% block content_inner %}
 <div class="mb-8">
-    <h1 class="text-2xl font-bold text-gray-900">Welcome back, {{ user.first_name|default:user.username }}</h1>
-    <p class="text-gray-500 mt-1">Here's what's happening across your projects.</p>
+    <h1 class="text-xl font-bold text-primary">Welcome back, {{ user.first_name|default:user.username }}</h1>
+    <p class="text-sm text-tertiary mt-1.5">Here's what's happening across your projects.</p>
 </div>
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-    <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-sm text-gray-500 font-medium">Total Projects</p>
-                <p class="text-3xl font-bold text-gray-900 mt-1">{{ total_projects }}</p>
-            </div>
-            <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
-                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
-            </div>
-        </div>
-        <div class="mt-4 flex items-center text-sm">
-            <span class="text-green-600 font-medium">{{ active_projects }}</span>
-            <span class="text-gray-400 ml-1">active now</span>
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
+    <div class="stat-card">
+        <p class="text-xs font-semibold text-muted uppercase tracking-wider">Projects</p>
+        <p class="text-3xl font-bold text-primary mt-0.5">{{ total_projects }}</p>
+        <div class="flex items-center gap-1.5 mt-2 text-xs">
+            <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+            <span class="font-medium text-green-600">{{ active_projects }}</span>
+            <span class="text-muted">active</span>
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-sm text-gray-500 font-medium">Open Issues</p>
-                <p class="text-3xl font-bold text-gray-900 mt-1">{{ open_issues }}</p>
-            </div>
-            <div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center">
-                <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-            </div>
-        </div>
-        <div class="mt-4 flex items-center text-sm">
-            <span class="text-gray-500">of {{ total_issues }}</span>
-            <span class="text-gray-400 ml-1">total issues</span>
+    <div class="stat-card">
+        <p class="text-xs font-semibold text-muted uppercase tracking-wider">Open Issues</p>
+        <p class="text-3xl font-bold text-primary mt-0.5">{{ open_issues }}</p>
+        <div class="flex items-center gap-1.5 mt-2 text-xs">
+            <span class="text-tertiary">of</span>
+            <span class="font-medium text-secondary">{{ total_issues }}</span>
+            <span class="text-muted">total</span>
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-sm text-gray-500 font-medium">New Tickets</p>
-                <p class="text-3xl font-bold text-gray-900 mt-1">{{ new_tickets }}</p>
-            </div>
-            <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
-                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
-            </div>
-        </div>
-        <div class="mt-4 flex items-center text-sm">
-            <span class="text-gray-500">{{ total_tickets }}</span>
-            <span class="text-gray-400 ml-1">total tickets</span>
+    <div class="stat-card">
+        <p class="text-xs font-semibold text-muted uppercase tracking-wider">New Tickets</p>
+        <p class="text-3xl font-bold text-primary mt-0.5">{{ new_tickets }}</p>
+        <div class="flex items-center gap-1.5 mt-2 text-xs">
+            <span class="text-tertiary">of</span>
+            <span class="font-medium text-secondary">{{ total_tickets }}</span>
+            <span class="text-muted">total</span>
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-        <div class="flex items-center justify-between">
-            <div>
-                <p class="text-sm text-gray-500 font-medium">Active Projects</p>
-                <p class="text-3xl font-bold text-gray-900 mt-1">{{ active_projects }}</p>
-            </div>
-            <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
-                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
-            </div>
-        </div>
-        <div class="mt-4 flex items-center text-sm">
-            <span class="text-gray-400">{{ total_projects|add:active_projects|add:5 }}</span>
-            <span class="text-gray-400 ml-1">tasks completed</span>
+    <div class="stat-card">
+        <p class="text-xs font-semibold text-muted uppercase tracking-wider">Active Now</p>
+        <p class="text-3xl font-bold text-primary mt-0.5">{{ active_projects }}</p>
+        <div class="flex items-center gap-1.5 mt-2 text-xs">
+            <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+            <span class="text-muted">projects running</span>
         </div>
     </div>
 </div>
 
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-            <h2 class="font-semibold text-gray-900">Recent Projects</h2>
-            <a href="{% url 'project_list' %}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View all</a>
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8">
+    <div class="card-surface">
+        <div class="flex items-center justify-between px-5 py-3.5 border-b border-subtle">
+            <h2 class="text-sm font-semibold text-primary">Recent Projects</h2>
+            <a href="{% url 'project_list' %}" class="text-xs font-medium text-blue-600 hover:text-blue-800">View all</a>
         </div>
-        <div class="p-4 space-y-2">
+        <div class="p-2 space-y-0.5">
             {% for project in projects %}
-                <a href="{% url 'project_detail' project.pk %}" class="flex items-center justify-between p-3 rounded-xl hover:bg-gray-50 transition-colors">
-                    <div class="flex items-center gap-3">
-                        <div class="w-2 h-2 rounded-full {% if project.status == 'active' %}bg-green-400{% elif project.status == 'planning' %}bg-blue-400{% elif project.status == 'review' %}bg-amber-400{% else %}bg-gray-400{% endif %}"></div>
-                        <div>
-                            <p class="text-sm font-medium text-gray-900">{{ project.name }}</p>
-                            <p class="text-xs text-gray-500">{{ project.client.username }}</p>
+                <a href="{% url 'project_detail' project.pk %}" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-hover transition-colors gap-3">
+                    <div class="flex items-center gap-3 min-w-0">
+                        <span class="w-2 h-2 rounded-full flex-shrink-0 {% if project.status == 'active' %}bg-green-500{% elif project.status == 'planning' %}bg-blue-500{% elif project.status == 'review' %}bg-amber-500{% else %}bg-gray-400{% endif %}"></span>
+                        <div class="min-w-0">
+                            <p class="text-sm font-medium text-primary truncate">{{ project.name }}</p>
+                            <p class="text-xs text-tertiary">{{ project.client.username }}</p>
                         </div>
                     </div>
-                    <span class="text-xs px-2 py-1 rounded-full font-medium {% if project.status == 'active' %}bg-green-100 text-green-700{% elif project.status == 'planning' %}bg-blue-100 text-blue-700{% elif project.status == 'review' %}bg-amber-100 text-amber-700{% else %}bg-gray-100 text-gray-700{% endif %}">
+                    <span class="text-[11px] px-2.5 py-0.5 rounded-full font-medium border whitespace-nowrap {% if project.status == 'active' %}bg-green-50 text-green-700 border-green-200{% elif project.status == 'planning' %}bg-blue-50 text-blue-700 border-blue-200{% elif project.status == 'review' %}bg-amber-50 text-amber-700 border-amber-200{% else %}bg-gray-50 text-gray-600 border-gray-200{% endif %}">
                         {{ project.get_status_display }}
                     </span>
                 </a>
             {% empty %}
-                <p class="text-sm text-gray-400 text-center py-4">No projects yet.</p>
+                <p class="text-sm text-muted text-center py-6">No projects yet.</p>
             {% endfor %}
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-            <h2 class="font-semibold text-gray-900">Recent Issues</h2>
-            <a href="{% url 'issue_list' %}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View all</a>
+    <div class="card-surface">
+        <div class="flex items-center justify-between px-5 py-3.5 border-b border-subtle">
+            <h2 class="text-sm font-semibold text-primary">Recent Issues</h2>
+            <a href="{% url 'issue_list' %}" class="text-xs font-medium text-blue-600 hover:text-blue-800">View all</a>
         </div>
-        <div class="p-4 space-y-2">
+        <div class="p-2 space-y-0.5">
             {% for issue in recent_issues %}
-                <a href="{% url 'issue_detail' issue.pk %}" class="flex items-center justify-between p-3 rounded-xl hover:bg-gray-50 transition-colors">
+                <a href="{% url 'issue_detail' issue.pk %}" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-hover transition-colors gap-3">
                     <div class="flex items-center gap-3 min-w-0">
-                        <div class="w-2 h-2 rounded-full {% if issue.priority == 'high' %}bg-red-400{% elif issue.priority == 'medium' %}bg-amber-400{% else %}bg-blue-400{% endif %}"></div>
+                        <span class="w-2 h-2 rounded-full flex-shrink-0 {% if issue.priority == 'high' %}bg-red-500{% elif issue.priority == 'medium' %}bg-amber-500{% else %}bg-blue-500{% endif %}"></span>
                         <div class="min-w-0">
-                            <p class="text-sm font-medium text-gray-900 truncate">{{ issue.title }}</p>
-                            <p class="text-xs text-gray-500">{{ issue.project.name }}</p>
+                            <p class="text-sm font-medium text-primary truncate">{{ issue.title }}</p>
+                            <p class="text-xs text-tertiary truncate">{{ issue.project.name }}</p>
                         </div>
                     </div>
-                    <span class="text-xs px-2 py-1 rounded-full font-medium whitespace-nowrap {% if issue.status == 'open' %}bg-blue-100 text-blue-700{% elif issue.status == 'in_progress' %}bg-amber-100 text-amber-700{% elif issue.status == 'resolved' %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-700{% endif %}">
+                    <span class="text-[11px] px-2.5 py-0.5 rounded-full font-medium border whitespace-nowrap {% if issue.status == 'open' %}bg-blue-50 text-blue-700 border-blue-200{% elif issue.status == 'in_progress' %}bg-amber-50 text-amber-700 border-amber-200{% elif issue.status == 'resolved' %}bg-green-50 text-green-700 border-green-200{% else %}bg-gray-50 text-gray-600 border-gray-200{% endif %}">
                         {{ issue.get_status_display }}
                     </span>
                 </a>
             {% empty %}
-                <p class="text-sm text-gray-400 text-center py-4">No issues yet.</p>
+                <p class="text-sm text-muted text-center py-6">No issues yet.</p>
             {% endfor %}
         </div>
     </div>
 </div>
 
-<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-            <h2 class="font-semibold text-gray-900">Recent Tickets</h2>
-            <a href="{% url 'ticket_list' %}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View all</a>
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <div class="card-surface">
+        <div class="flex items-center justify-between px-5 py-3.5 border-b border-subtle">
+            <h2 class="text-sm font-semibold text-primary">Recent Tickets</h2>
+            <a href="{% url 'ticket_list' %}" class="text-xs font-medium text-blue-600 hover:text-blue-800">View all</a>
         </div>
-        <div class="p-4 space-y-2">
+        <div class="p-2 space-y-0.5">
             {% for ticket in recent_tickets %}
-                <a href="{% url 'ticket_detail' ticket.pk %}" class="flex items-center justify-between p-3 rounded-xl hover:bg-gray-50 transition-colors">
+                <a href="{% url 'ticket_detail' ticket.pk %}" class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-hover transition-colors gap-3">
                     <div class="flex items-center gap-3 min-w-0">
-                        <div class="w-2 h-2 rounded-full {% if ticket.ticket_type == 'bug' %}bg-red-400{% elif ticket.ticket_type == 'feature_request' %}bg-blue-400{% else %}bg-sky-400{% endif %}"></div>
+                        <span class="w-2 h-2 rounded-full flex-shrink-0 {% if ticket.ticket_type == 'bug' %}bg-red-500{% elif ticket.ticket_type == 'feature_request' %}bg-blue-500{% else %}bg-sky-500{% endif %}"></span>
                         <div class="min-w-0">
-                            <p class="text-sm font-medium text-gray-900 truncate">{{ ticket.title }}</p>
-                            <p class="text-xs text-gray-500">{{ ticket.project.name|default:"No project" }}</p>
+                            <p class="text-sm font-medium text-primary truncate">{{ ticket.title }}</p>
+                            <p class="text-xs text-tertiary truncate">{{ ticket.project.name|default:"No project" }}</p>
                         </div>
                     </div>
-                    <span class="text-xs px-2 py-1 rounded-full font-medium whitespace-nowrap {% if ticket.ticket_type == 'bug' %}bg-red-100 text-red-700{% elif ticket.ticket_type == 'feature_request' %}bg-blue-100 text-blue-700{% else %}bg-sky-100 text-sky-700{% endif %}">
+                    <span class="text-[11px] px-2.5 py-0.5 rounded-full font-medium border whitespace-nowrap {% if ticket.ticket_type == 'bug' %}bg-red-50 text-red-700 border-red-200{% elif ticket.ticket_type == 'feature_request' %}bg-blue-50 text-blue-700 border-blue-200{% else %}bg-sky-50 text-sky-700 border-sky-200{% endif %}">
                         {{ ticket.get_ticket_type_display }}
                     </span>
                 </a>
             {% empty %}
-                <p class="text-sm text-gray-400 text-center py-4">No tickets yet.</p>
+                <p class="text-sm text-muted text-center py-6">No tickets yet.</p>
             {% endfor %}
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h2 class="font-semibold text-gray-900 mb-4">Quick Actions</h2>
-        <div class="grid grid-cols-2 gap-3">
-            <a href="{% url 'project_create' %}" class="p-4 rounded-xl bg-blue-50 hover:bg-blue-100 transition-colors text-center">
-                <svg class="w-6 h-6 text-blue-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <div class="card-surface p-5">
+        <h2 class="text-sm font-semibold text-primary mb-4">Quick Actions</h2>
+        <div class="grid grid-cols-2 gap-2.5">
+            <a href="{% url 'project_create' %}" class="px-4 py-3 rounded-lg bg-blue-50 hover:bg-blue-100 transition-colors text-center">
+                <svg class="w-5 h-5 text-blue-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                 <span class="text-xs font-medium text-blue-700">New Project</span>
             </a>
-            <a href="{% url 'issue_create' %}" class="p-4 rounded-xl bg-amber-50 hover:bg-amber-100 transition-colors text-center">
-                <svg class="w-6 h-6 text-amber-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9"/></svg>
+            <a href="{% url 'issue_create' %}" class="px-4 py-3 rounded-lg bg-amber-50 hover:bg-amber-100 transition-colors text-center">
+                <svg class="w-5 h-5 text-amber-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9"/></svg>
                 <span class="text-xs font-medium text-amber-700">New Issue</span>
             </a>
-            <a href="{% url 'ticket_create' %}" class="p-4 rounded-xl bg-blue-50 hover:bg-blue-100 transition-colors text-center">
-                <svg class="w-6 h-6 text-blue-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
+            <a href="{% url 'ticket_create' %}" class="px-4 py-3 rounded-lg bg-blue-50 hover:bg-blue-100 transition-colors text-center">
+                <svg class="w-5 h-5 text-blue-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
                 <span class="text-xs font-medium text-blue-700">New Ticket</span>
             </a>
-            <a href="{% url 'board_create' %}" class="p-4 rounded-xl bg-green-50 hover:bg-green-100 transition-colors text-center">
-                <svg class="w-6 h-6 text-green-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
+            <a href="{% url 'board_create' %}" class="px-4 py-3 rounded-lg bg-green-50 hover:bg-green-100 transition-colors text-center">
+                <svg class="w-5 h-5 text-green-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
                 <span class="text-xs font-medium text-green-700">New Board</span>
             </a>
         </div>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/finance/expense_confirm_delete.html b/templates/pages/finance/expense_confirm_delete.html
index 7e84207..0b260a5 100644
--- a/templates/pages/finance/expense_confirm_delete.html
+++ b/templates/pages/finance/expense_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete Expense{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Expense</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete this <strong>${{ object.amount }} {{ object.category }}</strong> expense?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Expense</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete this <strong>${{ object.amount }} {{ object.category }}</strong> expense?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'expense_list' %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'expense_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/finance/expense_form.html b/templates/pages/finance/expense_form.html
index 9d31b13..de1d6dd 100644
--- a/templates/pages/finance/expense_form.html
+++ b/templates/pages/finance/expense_form.html
@@ -2,17 +2,17 @@
 {% block title %}New Expense{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">New Expense</h1>
-        <p class="text-sm text-gray-500 mb-6">Log a new project expense.</p>
+    <div class="card-surface p-6">
+        <h1 class="text-xl font-bold text-primary mb-1">New Expense</h1>
+        <p class="text-sm text-tertiary mb-6">Log a new project expense.</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Submit</button>
-                <a href="{% url 'expense_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Submit</button>
+                <a href="{% url 'expense_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/finance/expense_list.html b/templates/pages/finance/expense_list.html
index b223890..6a6826d 100644
--- a/templates/pages/finance/expense_list.html
+++ b/templates/pages/finance/expense_list.html
@@ -3,43 +3,42 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Expenses</h1>
-        <p class="text-gray-500 mt-1">Track project expenses.</p>
+        <h1 class="text-2xl font-bold text-primary">Expenses</h1>
+        <p class="text-tertiary mt-1">Track project expenses.</p>
     </div>
-    <a href="{% url 'expense_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'expense_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New Expense
     </a>
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
-    <table class="table w-full">
+<div class="card-surface overflow-hidden">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Category</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Project</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Raised By</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
-                {% if user.is_admin %}<th class="text-xs font-semibold text-gray-500 uppercase tracking-wider"></th>{% endif %}
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">Category</th>
+                <th class="px-4 py-3 text-left">Amount</th>
+                <th class="px-4 py-3 text-left">Project</th>
+                <th class="px-4 py-3 text-left">Raised By</th>
+                <th class="px-4 py-3 text-left">Date</th>
+                {% if user.is_admin %}<th class="px-4 py-3 text-left"></th>{% endif %}
             </tr>
         </thead>
         <tbody>
             {% for expense in expenses %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td class="text-sm font-medium text-gray-900">{{ expense.category }}</td>
-                    <td class="text-sm font-semibold text-gray-900">${{ expense.amount }}</td>
-                    <td class="text-sm text-gray-600">{{ expense.project.name }}</td>
-                    <td class="text-sm text-gray-600">{{ expense.raised_by.username }}</td>
-                    <td class="text-sm text-gray-500">{{ expense.date|date:"M d" }}</td>
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3 text-sm font-medium text-primary">{{ expense.category }}</td>
+                    <td class="px-4 py-3 text-sm font-semibold text-primary">${{ expense.amount }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ expense.project.name }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ expense.raised_by.username }}</td>
+                    <td class="px-4 py-3 text-tertiary">{{ expense.date|date:"M d" }}</td>
                     {% if user.is_admin %}
-                        <td><a href="{% url 'expense_delete' expense.pk %}" class="text-xs text-red-500 hover:text-red-700">Delete</a></td>
+                        <td class="px-4 py-3"><a href="{% url 'expense_delete' expense.pk %}" class="text-xs text-red-500 hover:text-red-700">Delete</a></td>
                     {% endif %}
                 </tr>
             {% empty %}
-                <tr><td colspan="{% if user.is_admin %}6{% else %}5{% endif %}" class="text-center py-12 text-gray-500">No expenses recorded.</td></tr>
+                <tr><td colspan="{% if user.is_admin %}6{% else %}5{% endif %}" class="text-center py-12 text-tertiary">No expenses recorded.</td></tr>
             {% endfor %}
         </tbody>
     </table>
-    </div>
 </div>
 {% endblock %}
diff --git a/templates/pages/finance/invoice_confirm_delete.html b/templates/pages/finance/invoice_confirm_delete.html
index feb918a..bf32cf9 100644
--- a/templates/pages/finance/invoice_confirm_delete.html
+++ b/templates/pages/finance/invoice_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete Invoice{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Invoice</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete <strong>Invoice #{{ object.id }}</strong>?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Invoice</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete <strong>Invoice #{{ object.id }}</strong>?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'invoice_detail' object.pk %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'invoice_detail' object.pk %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/finance/invoice_detail.html b/templates/pages/finance/invoice_detail.html
index 03f197b..a674a86 100644
--- a/templates/pages/finance/invoice_detail.html
+++ b/templates/pages/finance/invoice_detail.html
@@ -2,49 +2,49 @@
 {% block title %}Invoice #{{ invoice.id }}{% endblock %}
 {% block content_inner %}
 <div class="max-w-3xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
+    <div class="card-surface overflow-hidden mb-6">
         <div class="p-6">
             <div class="flex items-start justify-between mb-6">
                 <div>
-                    <div class="flex items-center gap-2 text-sm text-gray-500 mb-1">
+                    <div class="flex items-center gap-2 text-sm text-tertiary mb-1">
                         <a href="{% url 'invoice_list' %}" class="hover:text-blue-600">Invoices</a>
                         <span>/</span>
                     </div>
-                    <h1 class="text-2xl font-bold text-gray-900">Invoice #{{ invoice.id }}</h1>
+                    <h1 class="text-2xl font-bold text-primary">Invoice #{{ invoice.id }}</h1>
                 </div>
                 <div class="flex items-center gap-2">
-                    <span class="text-xs px-3 py-1.5 rounded-full font-medium {% if invoice.status == 'paid' %}bg-green-100 text-green-700{% elif invoice.status == 'overdue' %}bg-red-100 text-red-700{% else %}bg-amber-100 text-amber-700{% endif %}">
+                    <span class="text-xs px-2 py-1 rounded-full font-medium border {% if invoice.status == 'paid' %}bg-green-50 text-green-700 border-green-200{% elif invoice.status == 'overdue' %}bg-red-50 text-red-700 border-red-200{% else %}bg-amber-50 text-amber-700 border-amber-200{% endif %}">
                         {{ invoice.get_status_display }}
                     </span>
                     {% if user.is_admin %}
-                        <a href="{% url 'invoice_edit' invoice.pk %}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">Edit</a>
-                        <label for="delete-modal-invoice" class="btn btn-sm text-red-600 hover:bg-red-50 border-0 cursor-pointer">Delete</label>
+                        <a href="{% url 'invoice_edit' invoice.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
+                        <label for="delete-modal-invoice" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                     {% endif %}
                 </div>
             </div>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-                <div class="p-4 bg-gray-50 rounded-xl"><p class="text-xs text-gray-500 uppercase font-medium">Project</p><p class="text-sm font-semibold text-gray-900 mt-1">{{ invoice.project.name }}</p></div>
-                <div class="p-4 bg-gray-50 rounded-xl"><p class="text-xs text-gray-500 uppercase font-medium">Client</p><p class="text-sm font-semibold text-gray-900 mt-1">{{ invoice.client.username }}</p></div>
-                <div class="p-4 bg-gray-50 rounded-xl"><p class="text-xs text-gray-500 uppercase font-medium">Amount</p><p class="text-lg font-bold text-gray-900 mt-1">${{ invoice.amount }}</p></div>
-                <div class="p-4 bg-gray-50 rounded-xl"><p class="text-xs text-gray-500 uppercase font-medium">Due Date</p><p class="text-sm font-semibold text-gray-900 mt-1">{{ invoice.due_date }}</p></div>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 p-4 bg-hover rounded-xl mb-6">
+                <div><p class="text-xs text-muted uppercase font-medium">Project</p><p class="text-sm font-semibold text-primary mt-1">{{ invoice.project.name }}</p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Client</p><p class="text-sm font-semibold text-primary mt-1">{{ invoice.client.username }}</p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Amount</p><p class="text-lg font-bold text-primary mt-1">${{ invoice.amount }}</p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Due Date</p><p class="text-sm font-semibold text-primary mt-1">{{ invoice.due_date }}</p></div>
             </div>
         </div>
     </div>
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-            <h2 class="font-semibold text-gray-900">Payments</h2>
+    <div class="card-surface overflow-hidden">
+        <div class="px-6 py-4 border-b border-subtle flex items-center justify-between">
+            <h2 class="font-semibold text-primary">Payments</h2>
             {% if user.is_admin %}
-                <a href="{% url 'payment_create' %}?invoice={{ invoice.pk }}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">Record Payment</a>
+                <a href="{% url 'payment_create' %}?invoice={{ invoice.pk }}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Record Payment</a>
             {% endif %}
         </div>
         <div class="overflow-x-auto p-6">
-            <table class="table w-full">
-                <thead><tr class="bg-gray-50"><th class="text-xs font-semibold text-gray-500 uppercase">Date</th><th class="text-xs font-semibold text-gray-500 uppercase">Method</th><th class="text-xs font-semibold text-gray-500 uppercase">Amount</th><th class="text-xs font-semibold text-gray-500 uppercase">Reference</th></tr></thead>
+            <table class="w-full text-sm">
+                <thead><tr class="text-xs font-semibold text-muted uppercase bg-hover"><th class="px-4 py-3 text-left">Date</th><th class="px-4 py-3 text-left">Method</th><th class="px-4 py-3 text-left">Amount</th><th class="px-4 py-3 text-left">Reference</th></tr></thead>
                 <tbody>
                     {% for payment in payments %}
-                        <tr><td class="text-sm">{{ payment.paid_at|date:"M d, Y H:i" }}</td><td class="text-sm">{{ payment.method }}</td><td class="text-sm font-semibold">${{ payment.amount }}</td><td class="text-sm text-gray-500">{{ payment.reference|default:"-" }}</td></tr>
+                        <tr class="border-t border-subtle"><td class="px-4 py-3 text-secondary">{{ payment.paid_at|date:"M d, Y H:i" }}</td><td class="px-4 py-3 text-secondary">{{ payment.method }}</td><td class="px-4 py-3 text-sm font-semibold text-primary">${{ payment.amount }}</td><td class="px-4 py-3 text-tertiary">{{ payment.reference|default:"-" }}</td></tr>
                     {% empty %}
-                        <tr><td colspan="4" class="text-center py-8 text-gray-400">No payments recorded yet.</td></tr>
+                        <tr><td colspan="4" class="text-center py-8 text-muted">No payments recorded yet.</td></tr>
                     {% endfor %}
                 </tbody>
             </table>
diff --git a/templates/pages/finance/invoice_form.html b/templates/pages/finance/invoice_form.html
index 7f86cda..4ffc343 100644
--- a/templates/pages/finance/invoice_form.html
+++ b/templates/pages/finance/invoice_form.html
@@ -2,17 +2,17 @@
 {% block title %}New Invoice{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">New Invoice</h1>
-        <p class="text-sm text-gray-500 mb-6">Create a new invoice for a client.</p>
+    <div class="card-surface p-6">
+        <h1 class="text-xl font-bold text-primary mb-1">New Invoice</h1>
+        <p class="text-sm text-tertiary mb-6">Create a new invoice for a client.</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Create</button>
-                <a href="{% url 'invoice_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Create</button>
+                <a href="{% url 'invoice_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/finance/invoice_list.html b/templates/pages/finance/invoice_list.html
index f0569bf..eae6075 100644
--- a/templates/pages/finance/invoice_list.html
+++ b/templates/pages/finance/invoice_list.html
@@ -3,53 +3,53 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Invoices</h1>
-        <p class="text-gray-500 mt-1">Track billing and payments.</p>
+        <h1 class="text-2xl font-bold text-primary">Invoices</h1>
+        <p class="text-tertiary mt-1">Track billing and payments.</p>
     </div>
     {% if user.is_admin %}
-        <a href="{% url 'invoice_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+        <a href="{% url 'invoice_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+            <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
             New Invoice
         </a>
     {% endif %}
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">#</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Project</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Due</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider"></th>
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">#</th>
+                <th class="px-4 py-3 text-left">Project</th>
+                <th class="px-4 py-3 text-left">Amount</th>
+                <th class="px-4 py-3 text-left">Due</th>
+                <th class="px-4 py-3 text-left">Status</th>
+                <th class="px-4 py-3 text-left"></th>
             </tr>
         </thead>
         <tbody>
             {% for invoice in invoices %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td class="font-mono text-sm font-medium text-gray-900">#{{ invoice.id }}</td>
-                    <td class="text-sm text-gray-600">{{ invoice.project.name }}</td>
-                    <td class="text-sm font-semibold text-gray-900">${{ invoice.amount }}</td>
-                    <td class="text-sm text-gray-600">{{ invoice.due_date }}</td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if invoice.status == 'paid' %}bg-green-100 text-green-700{% elif invoice.status == 'overdue' %}bg-red-100 text-red-700{% else %}bg-amber-100 text-amber-700{% endif %}">
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3 font-mono text-sm font-medium text-primary">#{{ invoice.id }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ invoice.project.name }}</td>
+                    <td class="px-4 py-3 text-sm font-semibold text-primary">${{ invoice.amount }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ invoice.due_date }}</td>
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if invoice.status == 'paid' %}bg-green-50 text-green-700 border-green-200{% elif invoice.status == 'overdue' %}bg-red-50 text-red-700 border-red-200{% else %}bg-amber-50 text-amber-700 border-amber-200{% endif %}">
                             {{ invoice.get_status_display }}
                         </span>
                     </td>
-                    <td>
+                    <td class="px-4 py-3">
                         <div class="flex gap-1">
-                            <a href="{% url 'invoice_detail' invoice.pk %}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">View</a>
+                            <a href="{% url 'invoice_detail' invoice.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">View</a>
                             {% if user.is_admin %}
-                                <a href="{% url 'invoice_edit' invoice.pk %}" class="btn btn-sm btn-ghost">Edit</a>
-                                <a href="{% url 'invoice_delete' invoice.pk %}" class="btn btn-sm text-red-600 hover:bg-red-50 border-0">Delete</a>
+                                <a href="{% url 'invoice_edit' invoice.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
+                                <a href="{% url 'invoice_delete' invoice.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors">Delete</a>
                             {% endif %}
                         </div>
                     </td>
                 </tr>
             {% empty %}
-                <tr><td colspan="6" class="text-center py-12 text-gray-500">No invoices found.</td></tr>
+                <tr><td colspan="6" class="text-center py-12 text-tertiary">No invoices found.</td></tr>
             {% endfor %}
         </tbody>
     </table>
diff --git a/templates/pages/finance/payment_confirm_delete.html b/templates/pages/finance/payment_confirm_delete.html
index f07f01d..f333251 100644
--- a/templates/pages/finance/payment_confirm_delete.html
+++ b/templates/pages/finance/payment_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete Payment{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Payment</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete this <strong>${{ object.amount }}</strong> payment?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Payment</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete this <strong>${{ object.amount }}</strong> payment?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'payment_list' %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'payment_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/finance/payment_form.html b/templates/pages/finance/payment_form.html
index f8d34c1..4063f07 100644
--- a/templates/pages/finance/payment_form.html
+++ b/templates/pages/finance/payment_form.html
@@ -2,19 +2,19 @@
 {% block title %}Record Payment{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">Record Payment</h1>
-        <p class="text-sm text-gray-500 mb-6">Record a payment against an invoice.</p>
+    <div class="card-surface p-6">
+        <h1 class="text-lg font-bold text-primary mb-1">Record Payment</h1>
+        <p class="text-sm text-tertiary mb-6">Record a payment against an invoice.</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Record</button>
-                <a href="{% url 'invoice_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">Record</button>
+                <a href="{% url 'invoice_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/finance/payment_list.html b/templates/pages/finance/payment_list.html
index d044f49..3229064 100644
--- a/templates/pages/finance/payment_list.html
+++ b/templates/pages/finance/payment_list.html
@@ -3,42 +3,42 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Payments</h1>
-        <p class="text-gray-500 mt-1">All invoice payments.</p>
+        <h1 class="text-2xl font-bold text-primary">Payments</h1>
+        <p class="text-tertiary mt-1">All invoice payments.</p>
     </div>
-    <a href="{% url 'payment_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'payment_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New Payment
     </a>
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Invoice</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Method</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Reference</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider"></th>
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">Invoice</th>
+                <th class="px-4 py-3 text-left">Date</th>
+                <th class="px-4 py-3 text-left">Method</th>
+                <th class="px-4 py-3 text-left">Amount</th>
+                <th class="px-4 py-3 text-left">Reference</th>
+                <th class="px-4 py-3 text-left"></th>
             </tr>
         </thead>
         <tbody>
             {% for payment in payments %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td class="text-sm font-medium text-gray-900">#{{ payment.invoice.id }}</td>
-                    <td class="text-sm text-gray-600">{{ payment.paid_at|date:"M d, Y H:i" }}</td>
-                    <td class="text-sm text-gray-600">{{ payment.method }}</td>
-                    <td class="text-sm font-semibold text-gray-900">${{ payment.amount }}</td>
-                    <td class="text-sm text-gray-500">{{ payment.reference|default:"-" }}</td>
-                    <td><a href="{% url 'payment_delete' payment.pk %}" class="text-xs text-red-500 hover:text-red-700">Delete</a></td>
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3 text-sm font-medium text-primary">#{{ payment.invoice.id }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ payment.paid_at|date:"M d, Y H:i" }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ payment.method }}</td>
+                    <td class="px-4 py-3 text-sm font-semibold text-primary">${{ payment.amount }}</td>
+                    <td class="px-4 py-3 text-tertiary">{{ payment.reference|default:"-" }}</td>
+                    <td class="px-4 py-3"><a href="{% url 'payment_delete' payment.pk %}" class="text-xs text-red-500 hover:text-red-700">Delete</a></td>
                 </tr>
             {% empty %}
-                <tr><td colspan="6" class="text-center py-12 text-gray-500">No payments recorded.</td></tr>
+                <tr><td colspan="6" class="text-center py-12 text-tertiary">No payments recorded.</td></tr>
             {% endfor %}
         </tbody>
     </table>
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/pages/finance/team_payment_confirm_delete.html b/templates/pages/finance/team_payment_confirm_delete.html
index 1dd9c79..2e32c24 100644
--- a/templates/pages/finance/team_payment_confirm_delete.html
+++ b/templates/pages/finance/team_payment_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete Payment{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Payroll Payment</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete the <strong>${{ object.amount }}</strong> payment to <strong>{{ object.member.username }}</strong>?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Payroll Payment</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete the <strong>${{ object.amount }}</strong> payment to <strong>{{ object.member.username }}</strong>?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'team_payment_list' %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'team_payment_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/finance/team_payment_form.html b/templates/pages/finance/team_payment_form.html
index 2103490..f5d8157 100644
--- a/templates/pages/finance/team_payment_form.html
+++ b/templates/pages/finance/team_payment_form.html
@@ -2,19 +2,19 @@
 {% block title %}New Team Payment{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">Record Team Payment</h1>
-        <p class="text-sm text-gray-500 mb-6">Record a payroll payment for a team member.</p>
+    <div class="card-surface p-6">
+        <h1 class="text-lg font-bold text-primary mb-1">Record Team Payment</h1>
+        <p class="text-sm text-tertiary mb-6">Record a payroll payment for a team member.</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Save</button>
-                <a href="{% url 'team_payment_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">Save</button>
+                <a href="{% url 'team_payment_list' %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/finance/team_payment_list.html b/templates/pages/finance/team_payment_list.html
index 2682873..e827692 100644
--- a/templates/pages/finance/team_payment_list.html
+++ b/templates/pages/finance/team_payment_list.html
@@ -3,52 +3,52 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Payroll</h1>
-        <p class="text-gray-500 mt-1">Team member payments and salary records.</p>
+        <h1 class="text-2xl font-bold text-primary">Payroll</h1>
+        <p class="text-tertiary mt-1">Team member payments and salary records.</p>
     </div>
     {% if user.is_admin %}
-        <a href="{% url 'team_payment_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+        <a href="{% url 'team_payment_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+            <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
             New Payment
         </a>
     {% endif %}
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Member</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Period</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
-                {% if user.is_admin %}<th class="text-xs font-semibold text-gray-500 uppercase tracking-wider"></th>{% endif %}
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">Member</th>
+                <th class="px-4 py-3 text-left">Period</th>
+                <th class="px-4 py-3 text-left">Amount</th>
+                <th class="px-4 py-3 text-left">Status</th>
+                {% if user.is_admin %}<th class="px-4 py-3 text-left"></th>{% endif %}
             </tr>
         </thead>
         <tbody>
             {% for payment in payments %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td>
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3">
                         <div class="flex items-center gap-2">
                             <div class="w-7 h-7 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-bold">{{ payment.member.username|first|upper }}</div>
-                            <span class="text-sm font-medium text-gray-900">{{ payment.member.username }}</span>
+                            <span class="text-sm font-medium text-primary">{{ payment.member.username }}</span>
                         </div>
                     </td>
-                    <td class="text-sm text-gray-600">{{ payment.period|date:"F Y" }}</td>
-                    <td class="text-sm font-semibold text-gray-900">${{ payment.amount }}</td>
-                    <td>
+                    <td class="px-4 py-3 text-secondary">{{ payment.period|date:"F Y" }}</td>
+                    <td class="px-4 py-3 text-sm font-semibold text-primary">${{ payment.amount }}</td>
+                    <td class="px-4 py-3">
                         {% if payment.paid_at %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-green-100 text-green-700">Paid</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-medium border bg-green-50 text-green-700 border-green-200">Paid</span>
                         {% else %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-amber-100 text-amber-700">Pending</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-medium border bg-amber-50 text-amber-700 border-amber-200">Pending</span>
                         {% endif %}
                     </td>
                     {% if user.is_admin %}
-                        <td><a href="{% url 'team_payment_delete' payment.pk %}" class="text-xs text-red-500 hover:text-red-700">Delete</a></td>
+                        <td class="px-4 py-3"><a href="{% url 'team_payment_delete' payment.pk %}" class="text-xs text-red-500 hover:text-red-700">Delete</a></td>
                     {% endif %}
                 </tr>
             {% empty %}
-                <tr><td colspan="{% if user.is_admin %}5{% else %}4{% endif %}" class="text-center py-12 text-gray-500">No payments recorded.</td></tr>
+                <tr><td colspan="{% if user.is_admin %}5{% else %}4{% endif %}" class="text-center py-12 text-tertiary">No payments recorded.</td></tr>
             {% endfor %}
         </tbody>
     </table>
diff --git a/templates/pages/issues/issue_confirm_delete.html b/templates/pages/issues/issue_confirm_delete.html
index ae3ed8d..3feea69 100644
--- a/templates/pages/issues/issue_confirm_delete.html
+++ b/templates/pages/issues/issue_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete Issue{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Issue</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete <strong>"{{ object.title }}"</strong>?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Issue</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete <strong>"{{ object.title }}"</strong>?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'issue_detail' object.pk %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'issue_detail' object.pk %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/issues/issue_detail.html b/templates/pages/issues/issue_detail.html
index 0b6a8b0..a672370 100644
--- a/templates/pages/issues/issue_detail.html
+++ b/templates/pages/issues/issue_detail.html
@@ -2,46 +2,46 @@
 {% block title %}{{ issue.title }}{% endblock %}
 {% block content_inner %}
 <div class="max-w-4xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
+    <div class="card-surface overflow-hidden mb-6">
         <div class="p-6">
             <div class="flex items-start justify-between mb-4">
                 <div>
-                    <div class="flex items-center gap-2 text-sm text-gray-500 mb-1">
+                    <div class="flex items-center gap-2 text-sm text-tertiary mb-1">
                         <a href="{% url 'issue_list' %}" class="hover:text-blue-600">Issues</a>
                         <span>/</span>
-                        <span class="text-gray-900">{{ issue.title|truncatechars:30 }}</span>
+                        <span class="text-primary">{{ issue.title|truncatechars:30 }}</span>
                     </div>
-                    <h1 class="text-2xl font-bold text-gray-900">{{ issue.title }}</h1>
+                    <h1 class="text-2xl font-bold text-primary">{{ issue.title }}</h1>
                 </div>
                 <div class="flex gap-2">
-                    <a href="{% url 'issue_edit' issue.pk %}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">Edit</a>
+                    <a href="{% url 'issue_edit' issue.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
                     {% if user.is_admin %}
-                        <label for="delete-modal-issue" class="btn btn-sm text-red-600 hover:bg-red-50 border-0 cursor-pointer">Delete</label>
+                        <label for="delete-modal-issue" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                     {% endif %}
                 </div>
             </div>
             <div class="flex flex-wrap gap-2 mb-4">
-                <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if issue.status == 'open' %}bg-blue-100 text-blue-700{% elif issue.status == 'in_progress' %}bg-amber-100 text-amber-700{% elif issue.status == 'resolved' %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-700{% endif %}">
+                <span class="text-xs px-2 py-1 rounded-full font-medium border {% if issue.status == 'open' %}bg-blue-50 text-blue-700 border-blue-200{% elif issue.status == 'in_progress' %}bg-amber-50 text-amber-700 border-amber-200{% elif issue.status == 'resolved' %}bg-green-50 text-green-700 border-green-200{% else %}bg-gray-50 text-gray-700 border-gray-200{% endif %}">
                     {{ issue.get_status_display }}
                 </span>
-                <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if issue.priority == 'high' %}bg-red-100 text-red-700{% elif issue.priority == 'medium' %}bg-amber-100 text-amber-700{% else %}bg-blue-100 text-blue-700{% endif %}">
+                <span class="text-xs px-2 py-1 rounded-full font-medium border {% if issue.priority == 'high' %}bg-red-50 text-red-700 border-red-200{% elif issue.priority == 'medium' %}bg-amber-50 text-amber-700 border-amber-200{% else %}bg-blue-50 text-blue-700 border-blue-200{% endif %}">
                     {{ issue.get_priority_display }}
                 </span>
             </div>
-            <div class="grid grid-cols-3 gap-4 mb-6 p-4 bg-gray-50 rounded-xl">
-                <div><p class="text-xs text-gray-500 uppercase font-medium">Project</p><p class="text-sm font-semibold text-gray-900 mt-0.5"><a href="{% url 'project_detail' issue.project.pk %}" class="hover:text-blue-600">{{ issue.project.name }}</a></p></div>
-                <div><p class="text-xs text-gray-500 uppercase font-medium">Reporter</p><p class="text-sm font-semibold text-gray-900 mt-0.5">{{ issue.reporter.username }}</p></div>
-                <div><p class="text-xs text-gray-500 uppercase font-medium">Assignee</p><p class="text-sm font-semibold text-gray-900 mt-0.5">{{ issue.assignee.username|default:"Unassigned" }}</p></div>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-3 p-4 bg-hover rounded-xl mb-6">
+                <div><p class="text-xs text-muted uppercase font-medium">Project</p><p class="text-sm font-semibold text-primary mt-0.5"><a href="{% url 'project_detail' issue.project.pk %}" class="hover:text-blue-600">{{ issue.project.name }}</a></p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Reporter</p><p class="text-sm font-semibold text-primary mt-0.5">{{ issue.reporter.username }}</p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Assignee</p><p class="text-sm font-semibold text-primary mt-0.5">{{ issue.assignee.username|default:"Unassigned" }}</p></div>
             </div>
             <div class="prose prose-sm max-w-none">
-                <div class="text-gray-700">{{ issue.description|safe }}</div>
+                <div class="text-secondary">{{ issue.description|safe }}</div>
             </div>
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-100">
-            <h2 class="font-semibold text-gray-900">Comments ({{ comments.count }})</h2>
+    <div class="card-surface overflow-hidden">
+        <div class="px-6 py-4 border-b border-subtle">
+            <h2 class="font-semibold text-primary">Comments ({{ comments.count }})</h2>
         </div>
         <div class="p-6">
             <div id="comment-list" class="space-y-4 mb-6">
@@ -50,23 +50,23 @@
                         <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">{{ comment.author.username|first|upper }}</div>
                         <div class="flex-1">
                             <div class="flex items-center gap-2 mb-1">
-                                <span class="text-sm font-semibold text-gray-900">{{ comment.author.username }}</span>
-                                <span class="text-xs text-gray-400">{{ comment.created_at|timesince }} ago</span>
+                                <span class="text-sm font-semibold text-primary">{{ comment.author.username }}</span>
+                                <span class="text-xs text-muted">{{ comment.created_at|timesince }} ago</span>
                             </div>
-                            <p class="text-sm text-gray-700">{{ comment.body }}</p>
+                            <p class="text-sm text-secondary">{{ comment.body }}</p>
                         </div>
                     </div>
                 {% empty %}
-                    <p class="text-sm text-gray-400 text-center py-4">No comments yet. Be the first to comment.</p>
+                    <p class="text-sm text-muted text-center py-4">No comments yet. Be the first to comment.</p>
                 {% endfor %}
             </div>
             <form method="post" action="{% url 'issue_comment' issue.pk %}"
                   hx-target="#comment-list" hx-swap="innerHTML"
-                  class="border-t border-gray-100 pt-4">
+                  class="border-t border-subtle pt-4">
                 {% csrf_token %}
-                <label class="text-sm font-medium text-gray-700 mb-2 block">Add a comment</label>
-                <textarea name="body" rows="2" class="textarea textarea-bordered w-full bg-gray-50 focus:bg-white rounded-xl" placeholder="Write your comment..." required></textarea>
-                <button type="submit" class="btn btn-sm bg-blue-600 text-white hover:bg-blue-700 border-0 mt-2">Post Comment</button>
+                <label class="text-sm font-medium text-secondary mb-2 block">Add a comment</label>
+                <textarea name="body" rows="2" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors resize-y" placeholder="Write your comment..." required></textarea>
+                <button type="submit" class="mt-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Post Comment</button>
             </form>
         </div>
     </div>
diff --git a/templates/pages/issues/issue_form.html b/templates/pages/issues/issue_form.html
index 26458f2..7d15397 100644
--- a/templates/pages/issues/issue_form.html
+++ b/templates/pages/issues/issue_form.html
@@ -2,17 +2,17 @@
 {% block title %}{% if object %}Edit{% else %}New{% endif %} Issue{% endblock %}
 {% block content_inner %}
 <div class="max-w-2xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">{% if object %}Edit{% else %}New{% endif %} Issue</h1>
-        <p class="text-sm text-gray-500 mb-6">{% if object %}Update the issue details.{% else %}Create a new issue to track work.{% endif %}</p>
+    <div class="card-surface p-6">
+        <h1 class="text-xl font-bold text-primary mb-1">{% if object %}Edit{% else %}New{% endif %} Issue</h1>
+        <p class="text-sm text-tertiary mb-6">{% if object %}Update the issue details.{% else %}Create a new issue to track work.{% endif %}</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Save</button>
-                <a href="{% url 'issue_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Save</button>
+                <a href="{% url 'issue_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
             </div>
         </form>
     </div>
@@ -53,4 +53,4 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/pages/issues/issue_list.html b/templates/pages/issues/issue_list.html
index ce3a376..cb8661c 100644
--- a/templates/pages/issues/issue_list.html
+++ b/templates/pages/issues/issue_list.html
@@ -3,55 +3,55 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Issues</h1>
-        <p class="text-gray-500 mt-1">Track bugs, features, and tasks.</p>
+        <h1 class="text-2xl font-bold text-primary">Issues</h1>
+        <p class="text-tertiary mt-1">Track bugs, features, and tasks.</p>
     </div>
-    <a href="{% url 'issue_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'issue_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New Issue
     </a>
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Project</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Priority</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Assignee</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
-                {% if user.is_admin %}<th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>{% endif %}
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">Title</th>
+                <th class="px-4 py-3 text-left">Project</th>
+                <th class="px-4 py-3 text-left">Status</th>
+                <th class="px-4 py-3 text-left">Priority</th>
+                <th class="px-4 py-3 text-left">Assignee</th>
+                <th class="px-4 py-3 text-left">Created</th>
+                {% if user.is_admin %}<th class="px-4 py-3 text-left">Actions</th>{% endif %}
             </tr>
         </thead>
         <tbody>
             {% for issue in issues %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td>
-                        <a href="{% url 'issue_detail' issue.pk %}" class="font-medium text-gray-900 hover:text-blue-600">{{ issue.title }}</a>
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3">
+                        <a href="{% url 'issue_detail' issue.pk %}" class="font-medium text-primary hover:text-blue-600">{{ issue.title }}</a>
                     </td>
-                    <td class="text-sm text-gray-600">{{ issue.project.name }}</td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if issue.status == 'open' %}bg-blue-100 text-blue-700{% elif issue.status == 'in_progress' %}bg-amber-100 text-amber-700{% elif issue.status == 'resolved' %}bg-green-100 text-green-700{% else %}bg-gray-100 text-gray-700{% endif %}">
+                    <td class="px-4 py-3 text-secondary">{{ issue.project.name }}</td>
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if issue.status == 'open' %}bg-blue-50 text-blue-700 border-blue-200{% elif issue.status == 'in_progress' %}bg-amber-50 text-amber-700 border-amber-200{% elif issue.status == 'resolved' %}bg-green-50 text-green-700 border-green-200{% else %}bg-gray-50 text-gray-700 border-gray-200{% endif %}">
                             {{ issue.get_status_display }}
                         </span>
                     </td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if issue.priority == 'high' %}bg-red-100 text-red-700{% elif issue.priority == 'medium' %}bg-amber-100 text-amber-700{% else %}bg-blue-100 text-blue-700{% endif %}">
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if issue.priority == 'high' %}bg-red-50 text-red-700 border-red-200{% elif issue.priority == 'medium' %}bg-amber-50 text-amber-700 border-amber-200{% else %}bg-blue-50 text-blue-700 border-blue-200{% endif %}">
                             {{ issue.get_priority_display }}
                         </span>
                     </td>
-                    <td class="text-sm text-gray-600">{{ issue.assignee.username|default:"-" }}</td>
-                    <td class="text-sm text-gray-500">{{ issue.created_at|date:"M d" }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ issue.assignee.username|default:"-" }}</td>
+                    <td class="px-4 py-3 text-tertiary">{{ issue.created_at|date:"M d" }}</td>
                     {% if user.is_admin %}
-                        <td>
-                            <label for="delete-issue-{{ issue.pk }}" class="btn btn-ghost btn-xs text-red-600">Delete</label>
+                        <td class="px-4 py-3">
+                            <label for="delete-issue-{{ issue.pk }}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                         </td>
                     {% endif %}
                 </tr>
             {% empty %}
-                <tr><td colspan="6" class="text-center py-12 text-gray-500">No issues found.</td></tr>
+                <tr><td colspan="{% if user.is_admin %}7{% else %}6{% endif %}" class="text-center py-12 text-tertiary">No issues found.</td></tr>
             {% endfor %}
         </tbody>
     </table>
diff --git a/templates/pages/kanban/board_confirm_delete.html b/templates/pages/kanban/board_confirm_delete.html
index ae47d78..d1da4d3 100644
--- a/templates/pages/kanban/board_confirm_delete.html
+++ b/templates/pages/kanban/board_confirm_delete.html
@@ -2,19 +2,19 @@
 {% block title %}Delete Board{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Board</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete <strong>"{{ object.name }}"</strong>?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Board</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete <strong>"{{ object.name }}"</strong>?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'board_detail' object.pk %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'board_detail' object.pk %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/kanban/board_detail.html b/templates/pages/kanban/board_detail.html
index 21cb260..95c7b81 100644
--- a/templates/pages/kanban/board_detail.html
+++ b/templates/pages/kanban/board_detail.html
@@ -3,29 +3,29 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <div class="flex items-center gap-2 text-sm text-gray-500 mb-1">
+        <div class="flex items-center gap-2 text-sm text-tertiary mb-1">
             <a href="{% url 'board_list' %}" class="hover:text-blue-600">Boards</a>
             <span>/</span>
         </div>
-        <h1 class="text-2xl font-bold text-gray-900">{{ board.name }}</h1>
-        {% if board.project %}<p class="text-sm text-gray-500">Project: {{ board.project.name }}</p>{% endif %}
+        <h1 class="text-2xl font-bold text-primary">{{ board.name }}</h1>
+        {% if board.project %}<p class="text-sm text-tertiary">Project: {{ board.project.name }}</p>{% endif %}
     </div>
     <div class="flex gap-2">
-        <a href="{% url 'board_edit' board.pk %}" class="btn btn-sm btn-ghost">Edit</a>
+        <a href="{% url 'board_edit' board.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
         {% if user.is_admin %}
-            <label for="delete-modal-board" class="btn btn-sm text-red-600 hover:bg-red-50 cursor-pointer">Delete</label>
+            <label for="delete-modal-board" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
         {% endif %}
     </div>
 </div>
 
 <div class="flex gap-4 overflow-x-auto pb-6 min-h-[60vh]" id="kanban-board">
     {% for column in columns %}
-        <div class="bg-gray-100 rounded-2xl min-w-[280px] w-[280px] flex-shrink-0 flex flex-col">
+        <div class="bg-hover rounded-xl min-w-[280px] w-[280px] flex-shrink-0 flex flex-col">
             <div class="flex items-center justify-between px-4 py-3">
                 <div class="flex items-center gap-2">
                     <div class="w-3 h-3 rounded-full {% cycle 'bg-blue-400' 'bg-amber-400' 'bg-green-400' 'bg-sky-400' 'bg-blue-400' 'bg-pink-400' %}"></div>
-                    <h3 class="font-semibold text-gray-700 text-sm">{{ column.name }}</h3>
-                    <span class="text-xs px-2 py-0.5 rounded-full bg-white/80 text-gray-500 font-medium">{{ column.cards.count }}</span>
+                    <h3 class="font-semibold text-secondary text-sm">{{ column.name }}</h3>
+                    <span class="text-xs px-2 py-0.5 rounded-full bg-white text-tertiary font-medium">{{ column.cards.count }}</span>
                 </div>
             </div>
             <div class="flex-1 px-3 pb-3 space-y-2 min-h-[100px]"
@@ -36,20 +36,20 @@
                 {% endfor %}
             </div>
             <div class="px-3 pb-3">
-                <a href="{% url 'card_create' board.pk column.pk %}" class="btn btn-ghost btn-sm w-full text-gray-500 hover:text-gray-700 hover:bg-white/80">
-                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+                <a href="{% url 'card_create' board.pk column.pk %}" class="w-full px-3 py-1.5 rounded-lg text-sm font-medium text-tertiary hover:bg-hover border border-soft transition-colors flex items-center justify-center gap-1">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                     Add Card
                 </a>
             </div>
         </div>
     {% endfor %}
     <div class="flex-shrink-0 min-w-[280px] w-[280px]">
-        <div class="bg-gray-50 border-2 border-dashed border-gray-200 rounded-2xl p-4 h-full">
+        <div class="bg-hover border-2 border-dashed border-soft rounded-xl p-4 h-full">
             <form method="post" action="{% url 'column_create' board.pk %}">
                 {% csrf_token %}
                 <div class="flex items-center gap-2">
-                    <input type="text" name="name" placeholder="New column name..." class="input input-sm w-full bg-white border-gray-200" required>
-                    <button type="submit" class="btn btn-sm bg-blue-600 text-white hover:bg-blue-700 border-0">
+                    <input type="text" name="name" placeholder="New column name..." class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors" required>
+                    <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                     </button>
                 </div>
@@ -62,25 +62,24 @@
 {% include "components/delete_modal.html" with modal_id="delete-modal-board" delete_url=delete_url %}
 
 <!-- Card Delete Modal -->
-<input type="checkbox" id="delete-card-modal" class="modal-toggle" />
-<div class="modal" role="dialog">
-    <div class="modal-box text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+<div class="fixed inset-0 z-50 flex items-center justify-center" id="card-delete-modal-container" style="display:none">
+    <div class="fixed inset-0 bg-black/20" onclick="closeCardDeleteModal()"></div>
+    <div class="relative bg-white rounded-xl max-w-sm w-full mx-4 border border-subtle p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h3 class="font-bold text-lg mb-2">Delete Card</h3>
-        <p class="py-4 text-gray-500">Are you sure you want to delete this card?</p>
+        <h3 class="text-base font-semibold text-primary mb-1">Delete Card</h3>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete this card?</p>
         <form id="card-delete-form" method="post" action="">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <label for="delete-card-modal" class="btn btn-ghost">Cancel</label>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <button type="button" onclick="closeCardDeleteModal()" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</button>
             </div>
         </form>
     </div>
-    <label class="modal-backdrop" for="delete-card-modal"></label>
 </div>
-{% endblock %}
+
 <style>
     .sortable-ghost { opacity: 0.3; }
     .sortable-drag {
@@ -88,11 +87,15 @@
         transform: rotate(3deg) !important;
     }
 </style>
+{% endblock %}
 {% block extra_scripts %}
 <script>
     function openCardDeleteModal(actionUrl) {
         document.getElementById('card-delete-form').action = actionUrl;
-        document.getElementById('delete-card-modal').checked = true;
+        document.getElementById('card-delete-modal-container').style.display = 'flex';
+    }
+    function closeCardDeleteModal() {
+        document.getElementById('card-delete-modal-container').style.display = 'none';
     }
 
     function getCookie(name) {
diff --git a/templates/pages/kanban/board_form.html b/templates/pages/kanban/board_form.html
index 364ebf3..61ad89b 100644
--- a/templates/pages/kanban/board_form.html
+++ b/templates/pages/kanban/board_form.html
@@ -2,17 +2,17 @@
 {% block title %}{% if object %}Edit{% else %}New{% endif %} Board{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">{% if object %}Edit{% else %}New{% endif %} Board</h1>
-        <p class="text-sm text-gray-500 mb-6">{% if object %}Update your board settings.{% else %}Create a new kanban board to organize your tasks.{% endif %}</p>
+    <div class="card-surface p-6">
+        <h1 class="text-xl font-bold text-primary mb-1">{% if object %}Edit{% else %}New{% endif %} Board</h1>
+        <p class="text-sm text-tertiary mb-6">{% if object %}Update your board settings.{% else %}Create a new kanban board to organize your tasks.{% endif %}</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Save</button>
-                <a href="{% url 'board_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Save</button>
+                <a href="{% url 'board_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/kanban/board_list.html b/templates/pages/kanban/board_list.html
index 64e50de..3f1a7d3 100644
--- a/templates/pages/kanban/board_list.html
+++ b/templates/pages/kanban/board_list.html
@@ -3,37 +3,37 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Kanban Boards</h1>
-        <p class="text-gray-500 mt-1">Manage your personal task boards.</p>
+        <h1 class="text-2xl font-bold text-primary">Kanban Boards</h1>
+        <p class="text-tertiary mt-1">Manage your personal task boards.</p>
     </div>
-    <a href="{% url 'board_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'board_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New Board
     </a>
 </div>
 <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
     {% for board in boards %}
-        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow overflow-hidden">
+        <div class="card-surface hover:border-blue-300 transition-colors overflow-hidden">
             <div class="p-5">
                 <div class="flex items-center justify-between mb-3">
                     <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-bold text-sm">B</div>
-                    <span class="text-xs text-gray-400">{{ board.columns.count }} columns</span>
+                    <span class="text-xs text-muted">{{ board.columns.count }} columns</span>
                 </div>
-                <a href="{% url 'board_detail' board.pk %}" class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">{{ board.name }}</a>
-                <p class="text-sm text-gray-500 mt-1">Owner: {{ board.owner.username }}</p>
-                {% if board.project %}<p class="text-xs text-gray-400 mt-1">Project: {{ board.project.name }}</p>{% endif %}
+                <a href="{% url 'board_detail' board.pk %}" class="text-lg font-semibold text-primary hover:text-blue-600 transition-colors">{{ board.name }}</a>
+                <p class="text-sm text-tertiary mt-1">Owner: {{ board.owner.username }}</p>
+                {% if board.project %}<p class="text-xs text-muted mt-1">Project: {{ board.project.name }}</p>{% endif %}
             </div>
-            <div class="px-5 py-3 bg-gray-50 border-t border-gray-100 flex gap-2">
+            <div class="px-5 py-3 bg-hover border-t border-subtle flex gap-2">
                 <a href="{% url 'board_detail' board.pk %}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">Open</a>
-                <a href="{% url 'board_edit' board.pk %}" class="text-sm text-gray-500 hover:text-gray-700 ml-auto">Edit</a>
+                <a href="{% url 'board_edit' board.pk %}" class="text-sm text-tertiary hover:text-secondary ml-auto">Edit</a>
                 <label for="delete-board-{{ board.pk }}" class="text-sm text-red-600 hover:text-red-800 font-medium cursor-pointer">Delete</label>
             </div>
         </div>
     {% empty %}
-        <div class="col-span-full bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
-            <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
-            <p class="text-gray-500">No boards yet.</p>
-            <a href="{% url 'board_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0 mt-3">Create your first board</a>
+        <div class="col-span-full card-surface p-12 text-center">
+            <svg class="w-12 h-12 text-muted mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg>
+            <p class="text-tertiary">No boards yet.</p>
+            <a href="{% url 'board_create' %}" class="inline-block mt-3 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Create your first board</a>
         </div>
     {% endfor %}
 </div>
diff --git a/templates/pages/kanban/card_detail.html b/templates/pages/kanban/card_detail.html
index 2ba8861..c410acc 100644
--- a/templates/pages/kanban/card_detail.html
+++ b/templates/pages/kanban/card_detail.html
@@ -3,85 +3,85 @@
 {% block title %}{{ card.title }}{% endblock %}
 {% block content_inner %}
 <div class="max-w-4xl mx-auto">
-    <div class="flex items-center gap-2 text-sm text-gray-500 mb-4">
+    <div class="flex items-center gap-2 text-sm text-tertiary mb-4">
         <a href="{% url 'board_list' %}" class="hover:text-blue-600">Boards</a>
         <span>/</span>
         <a href="{% url 'board_detail' card.column.board.pk %}" class="hover:text-blue-600">{{ card.column.board.name }}</a>
         <span>/</span>
-        <span class="text-gray-900">{{ card.title|truncatechars:30 }}</span>
+        <span class="text-primary">{{ card.title|truncatechars:30 }}</span>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
+    <div class="card-surface overflow-hidden mb-6">
         <div class="p-6">
             <div class="flex items-start justify-between mb-4">
                 <div>
-                    <h1 class="text-2xl font-bold text-gray-900">{{ card.title }}</h1>
+                    <h1 class="text-2xl font-bold text-primary">{{ card.title }}</h1>
                     <div class="flex items-center gap-2 mt-2">
                         {% if card.priority == 'urgent' %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-semibold bg-red-100 text-red-700">Urgent</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-semibold border bg-red-50 text-red-700 border-red-200">Urgent</span>
                         {% elif card.priority == 'high' %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-semibold bg-amber-100 text-amber-700">High</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-semibold border bg-amber-50 text-amber-700 border-amber-200">High</span>
                         {% elif card.priority == 'medium' %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-semibold bg-blue-100 text-blue-700">Medium</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-semibold border bg-blue-50 text-blue-700 border-blue-200">Medium</span>
                         {% else %}
-                            <span class="text-xs px-2.5 py-1 rounded-full font-semibold bg-gray-100 text-gray-600">Low</span>
+                            <span class="text-xs px-2 py-1 rounded-full font-semibold border bg-gray-50 text-gray-600 border-gray-200">Low</span>
                         {% endif %}
-                        <span class="text-xs text-gray-400">{{ card.column.name }} · {{ card.column.board.name }}</span>
+                        <span class="text-xs text-muted">{{ card.column.name }} · {{ card.column.board.name }}</span>
                     </div>
                 </div>
                 <div class="flex gap-2">
-                    <a href="{% url 'card_edit' card.pk %}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">Edit</a>
-                    <label for="card-delete-modal" class="btn btn-sm bg-red-50 text-red-700 hover:bg-red-100 border-0">Delete</label>
+                    <a href="{% url 'card_edit' card.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
+                    <label for="card-delete-modal" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                 </div>
             </div>
 
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
-                <div class="p-3 bg-gray-50 rounded-xl">
-                    <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wider">Assignee</p>
-                    <p class="text-sm font-medium text-gray-900 mt-0.5">{{ card.assignee.username|default:"Unassigned" }}</p>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 p-4 bg-hover rounded-xl mb-6">
+                <div>
+                    <p class="text-[10px] text-muted uppercase font-semibold tracking-wider">Assignee</p>
+                    <p class="text-sm font-medium text-primary mt-0.5">{{ card.assignee.username|default:"Unassigned" }}</p>
                 </div>
-                <div class="p-3 bg-gray-50 rounded-xl">
-                    <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wider">Start</p>
-                    <p class="text-sm font-medium text-gray-900 mt-0.5">{{ card.start_date|date:"M d, Y"|default:"-" }}</p>
+                <div>
+                    <p class="text-[10px] text-muted uppercase font-semibold tracking-wider">Start</p>
+                    <p class="text-sm font-medium text-primary mt-0.5">{{ card.start_date|date:"M d, Y"|default:"-" }}</p>
                 </div>
-                <div class="p-3 bg-gray-50 rounded-xl">
-                    <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wider">End</p>
-                    <p class="text-sm font-medium text-gray-900 mt-0.5">{{ card.end_date|date:"M d, Y"|default:"-" }}</p>
+                <div>
+                    <p class="text-[10px] text-muted uppercase font-semibold tracking-wider">End</p>
+                    <p class="text-sm font-medium text-primary mt-0.5">{{ card.end_date|date:"M d, Y"|default:"-" }}</p>
                 </div>
-                <div class="p-3 bg-gray-50 rounded-xl">
-                    <p class="text-[10px] text-gray-500 uppercase font-semibold tracking-wider">Due</p>
-                    <p class="text-sm font-medium text-gray-900 mt-0.5">{{ card.due_date|date:"M d, Y"|default:"-" }}</p>
+                <div>
+                    <p class="text-[10px] text-muted uppercase font-semibold tracking-wider">Due</p>
+                    <p class="text-sm font-medium text-primary mt-0.5">{{ card.due_date|date:"M d, Y"|default:"-" }}</p>
                 </div>
             </div>
 
             {% if card.description %}
-                <div class="prose prose-sm max-w-none text-gray-700 mb-6">
+                <div class="prose prose-sm max-w-none text-secondary mb-6">
                     {{ card.description|render_markdown }}
                 </div>
             {% endif %}
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
-            <h2 class="font-semibold text-gray-900">Comments ({{ comments.count }})</h2>
+    <div class="card-surface overflow-hidden">
+        <div class="px-6 py-4 border-b border-subtle flex items-center justify-between">
+            <h2 class="font-semibold text-primary">Comments ({{ comments.count }})</h2>
         </div>
         <div class="p-6">
             <div id="comment-list" class="space-y-4 mb-6">
                 {% for comment in comments %}
                     {% include "partials/kanban/comment.html" %}
                 {% empty %}
-                    <p class="text-sm text-gray-400 text-center py-4">No comments yet.</p>
+                    <p class="text-sm text-muted text-center py-4">No comments yet.</p>
                 {% endfor %}
             </div>
 
             <form method="post" action="{% url 'card_comment' card.pk %}"
                   hx-target="#comment-list" hx-swap="beforeend"
-                  class="border-t border-gray-100 pt-4">
+                  class="border-t border-subtle pt-4">
                 {% csrf_token %}
-                <label class="text-sm font-medium text-gray-700 mb-2 block">Add a comment</label>
-                <textarea name="body" class="textarea textarea-bordered w-full min-h-[100px]" placeholder="Write your comment... (Markdown supported)"></textarea>
-                <button type="submit" class="btn btn-sm bg-blue-600 text-white hover:bg-blue-700 border-0 mt-2">Post Comment</button>
+                <label class="text-sm font-medium text-secondary mb-2 block">Add a comment</label>
+                <textarea name="body" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors resize-y min-h-[100px]" placeholder="Write your comment... (Markdown supported)"></textarea>
+                <button type="submit" class="mt-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Post Comment</button>
             </form>
         </div>
     </div>
diff --git a/templates/pages/kanban/card_form.html b/templates/pages/kanban/card_form.html
index 4a7bedf..4e46d4b 100644
--- a/templates/pages/kanban/card_form.html
+++ b/templates/pages/kanban/card_form.html
@@ -3,18 +3,18 @@
 {% block title %}{% if is_create %}New Card{% else %}Edit Card{% endif %}{% endblock %}
 {% block content_inner %}
 <div class="max-w-3xl mx-auto">
-    <div class="flex items-center gap-2 text-sm text-gray-500 mb-4">
+    <div class="flex items-center gap-2 text-sm text-tertiary mb-4">
         <a href="{% url 'board_list' %}" class="hover:text-blue-600">Boards</a>
         <span>/</span>
         <a href="{% url 'board_detail' board.pk %}" class="hover:text-blue-600">{{ board.name }}</a>
         <span>/</span>
-        <span class="text-gray-900">{% if is_create %}New Card{% else %}{{ object.title|truncatechars:30 }}{% endif %}</span>
+        <span class="text-primary">{% if is_create %}New Card{% else %}{{ object.title|truncatechars:30 }}{% endif %}</span>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+    <div class="card-surface overflow-hidden">
         <div class="p-6">
-            <h1 class="text-xl font-bold text-gray-900 mb-1">{% if is_create %}New Card{% else %}Edit Card{% endif %}</h1>
-            <p class="text-sm text-gray-500 mb-6">Column: <strong>{{ column.name }}</strong></p>
+            <h1 class="text-xl font-bold text-primary mb-1">{% if is_create %}New Card{% else %}Edit Card{% endif %}</h1>
+            <p class="text-sm text-tertiary mb-6">Column: <strong>{{ column.name }}</strong></p>
             <form method="post">
                 {% csrf_token %}
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -24,13 +24,13 @@
                         </div>
                     {% endfor %}
                 </div>
-                <div class="flex gap-3 pt-4 mt-4 border-t border-gray-100">
-                    <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
+                <div class="flex gap-3 pt-4 mt-4 border-t border-subtle">
+                    <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                         {% if is_create %}Create Card{% else %}Save Changes{% endif %}
                     </button>
-                    <a href="{% url 'board_detail' board.pk %}" class="btn btn-ghost">Cancel</a>
+                    <a href="{% url 'board_detail' board.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
                     {% if not is_create %}
-                        <label for="card-delete-modal" class="btn bg-red-50 text-red-700 hover:bg-red-100 border-0 ml-auto">Delete</label>
+                        <label for="card-delete-modal" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors ml-auto cursor-pointer">Delete</label>
                     {% endif %}
                 </div>
             </form>
@@ -38,26 +38,26 @@
     </div>
 
     {% if not is_create and comments is not None %}
-        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mt-6">
-            <div class="px-6 py-4 border-b border-gray-100">
-                <h2 class="font-semibold text-gray-900">Comments ({{ comments.count }})</h2>
+        <div class="card-surface overflow-hidden mt-6">
+            <div class="px-6 py-4 border-b border-subtle">
+                <h2 class="font-semibold text-primary">Comments ({{ comments.count }})</h2>
             </div>
             <div class="p-6">
                 <div id="comment-list" class="space-y-4 mb-6">
                     {% for comment in comments %}
                         {% include "partials/kanban/comment.html" %}
                     {% empty %}
-                        <p class="text-sm text-gray-400 text-center py-4">No comments yet.</p>
+                        <p class="text-sm text-muted text-center py-4">No comments yet.</p>
                     {% endfor %}
                 </div>
 
                 <form method="post" action="{% url 'card_comment' object.pk %}"
                       hx-target="#comment-list" hx-swap="beforeend"
-                      class="border-t border-gray-100 pt-4">
+                      class="border-t border-subtle pt-4">
                     {% csrf_token %}
-                    <label class="text-sm font-medium text-gray-700 mb-2 block">Add a comment</label>
-                    <textarea name="body" class="textarea textarea-bordered w-full min-h-[100px]" placeholder="Write your comment... (Markdown supported)"></textarea>
-                    <button type="submit" class="btn btn-sm bg-blue-600 text-white hover:bg-blue-700 border-0 mt-2">Post Comment</button>
+                    <label class="text-sm font-medium text-secondary mb-2 block">Add a comment</label>
+                    <textarea name="body" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors resize-y min-h-[100px]" placeholder="Write your comment... (Markdown supported)"></textarea>
+                    <button type="submit" class="mt-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Post Comment</button>
                 </form>
             </div>
         </div>
diff --git a/templates/pages/projects/project_confirm_delete.html b/templates/pages/projects/project_confirm_delete.html
index 08728fe..f3afb65 100644
--- a/templates/pages/projects/project_confirm_delete.html
+++ b/templates/pages/projects/project_confirm_delete.html
@@ -2,19 +2,19 @@
 {% block title %}Delete Project{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Project</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete <strong>"{{ object.name }}"</strong>? This action cannot be undone.</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Project</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete <strong>"{{ object.name }}"</strong>? This action cannot be undone.</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'project_detail' object.pk %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'project_detail' object.pk %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/pages/projects/project_detail.html b/templates/pages/projects/project_detail.html
index fa0a786..04c52d0 100644
--- a/templates/pages/projects/project_detail.html
+++ b/templates/pages/projects/project_detail.html
@@ -1,87 +1,87 @@
 {% extends "base_authenticated.html" %}
 {% block title %}{{ project.name }}{% endblock %}
 {% block content_inner %}
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
+<div class="card-surface overflow-hidden mb-6">
     <div class="bg-blue-600 px-6 py-8">
         <div class="flex items-start justify-between">
             <div>
                 <h1 class="text-2xl font-bold text-white">{{ project.name }}</h1>
                 <div class="flex items-center gap-3 mt-2">
-                    <span class="text-xs px-2.5 py-1 rounded-full font-medium bg-white/20 text-white">{{ project.get_status_display }}</span>
+                    <span class="text-xs px-2 py-1 rounded-full font-medium border bg-white/20 text-white border-white/30">{{ project.get_status_display }}</span>
                     <span class="text-white/80 text-sm">Client: {{ project.client.username }}</span>
                 </div>
             </div>
             {% if user.is_admin %}
                 <div class="flex gap-2">
-                    <a href="{% url 'project_edit' project.pk %}" class="btn btn-sm bg-white/20 text-white hover:bg-white/30 border-0">Edit</a>
-                    <label for="delete-modal-project" class="btn btn-sm bg-red-500/20 text-white hover:bg-red-500/30 border-0 cursor-pointer">Delete</label>
+                    <a href="{% url 'project_edit' project.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-white bg-white/20 hover:bg-white/30 transition-colors">Edit</a>
+                    <label for="delete-modal-project" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                 </div>
             {% endif %}
         </div>
     </div>
     <div class="p-6">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-            <div class="p-4 bg-gray-50 rounded-xl">
-                <p class="text-xs text-gray-500 uppercase tracking-wider font-medium">Open Issues</p>
-                <p class="text-2xl font-bold text-gray-900 mt-1">{{ open_issues }}</p>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 p-4 bg-hover rounded-xl mb-6">
+            <div>
+                <p class="text-xs text-muted uppercase tracking-wider font-medium">Open Issues</p>
+                <p class="text-2xl font-bold text-primary mt-1">{{ open_issues }}</p>
             </div>
-            <div class="p-4 bg-gray-50 rounded-xl">
-                <p class="text-xs text-gray-500 uppercase tracking-wider font-medium">Members</p>
-                <p class="text-2xl font-bold text-gray-900 mt-1">{{ project.members.count }}</p>
+            <div>
+                <p class="text-xs text-muted uppercase tracking-wider font-medium">Members</p>
+                <p class="text-2xl font-bold text-primary mt-1">{{ project.members.count }}</p>
             </div>
-            <div class="p-4 bg-gray-50 rounded-xl">
-                <p class="text-xs text-gray-500 uppercase tracking-wider font-medium">Created</p>
-                <p class="text-2xl font-bold text-gray-900 mt-1">{{ project.created_at|date:"M Y" }}</p>
+            <div>
+                <p class="text-xs text-muted uppercase tracking-wider font-medium">Created</p>
+                <p class="text-2xl font-bold text-primary mt-1">{{ project.created_at|date:"M Y" }}</p>
             </div>
         </div>
 
         <div class="mb-6">
-            <h3 class="font-semibold text-gray-900 mb-3">Team Members</h3>
+            <h3 class="font-semibold text-primary mb-3">Team Members</h3>
             <div class="flex flex-wrap gap-2">
                 {% for member in project.members.all %}
-                    <div class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 rounded-full">
+                    <div class="flex items-center gap-2 px-3 py-1.5 bg-hover rounded-full">
                         <div class="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-bold">{{ member.username|first|upper }}</div>
-                        <span class="text-sm text-gray-700">{{ member.username }}</span>
-                        <span class="text-xs text-gray-400">({{ member.get_role_display }})</span>
+                        <span class="text-sm text-secondary">{{ member.username }}</span>
+                        <span class="text-xs text-tertiary">({{ member.get_role_display }})</span>
                     </div>
                 {% endfor %}
             </div>
         </div>
 
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <a href="{% url 'issue_list' %}?project={{ project.pk }}" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all">
+            <a href="{% url 'issue_list' %}?project={{ project.pk }}" class="p-4 card-surface hover:border-blue-300 transition-colors">
                 <div class="flex items-center gap-3">
                     <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center"><svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9"/></svg></div>
-                    <div><p class="font-semibold text-gray-900">Issues</p><p class="text-sm text-gray-500">{{ issues.count }} total</p></div>
+                    <div><p class="font-semibold text-primary">Issues</p><p class="text-sm text-tertiary">{{ issues.count }} total</p></div>
                 </div>
             </a>
-            <a href="{% url 'ticket_list' %}?project={{ project.pk }}" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all">
+            <a href="{% url 'ticket_list' %}?project={{ project.pk }}" class="p-4 card-surface hover:border-blue-300 transition-colors">
                 <div class="flex items-center gap-3">
                     <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg></div>
-                    <div><p class="font-semibold text-gray-900">Tickets</p><p class="text-sm text-gray-500">{{ tickets.count }} recent</p></div>
+                    <div><p class="font-semibold text-primary">Tickets</p><p class="text-sm text-tertiary">{{ tickets.count }} recent</p></div>
                 </div>
             </a>
-            <a href="{% url 'invoice_list' %}?project={{ project.pk }}" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all">
+            <a href="{% url 'invoice_list' %}?project={{ project.pk }}" class="p-4 card-surface hover:border-blue-300 transition-colors">
                 <div class="flex items-center gap-3">
                     <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
-                    <div><p class="font-semibold text-gray-900">Invoices</p><p class="text-sm text-gray-500">View finance</p></div>
+                    <div><p class="font-semibold text-primary">Invoices</p><p class="text-sm text-tertiary">View finance</p></div>
                 </div>
             </a>
-            <a href="{% url 'board_list' %}" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all">
+            <a href="{% url 'board_list' %}" class="p-4 card-surface hover:border-blue-300 transition-colors">
                 <div class="flex items-center gap-3">
                     <div class="w-10 h-10 rounded-lg bg-sky-100 flex items-center justify-center"><svg class="w-5 h-5 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"/></svg></div>
-                    <div><p class="font-semibold text-gray-900">Kanban</p><p class="text-sm text-gray-500">View boards</p></div>
+                    <div><p class="font-semibold text-primary">Kanban</p><p class="text-sm text-tertiary">View boards</p></div>
                 </div>
             </a>
         </div>
 
         {% if tickets %}
             <div class="mt-6">
-                <h3 class="font-semibold text-gray-900 mb-3">Recent Tickets</h3>
+                <h3 class="font-semibold text-primary mb-3">Recent Tickets</h3>
                 {% for ticket in tickets %}
-                    <a href="{% url 'ticket_detail' ticket.pk %}" class="flex items-center justify-between p-3 rounded-xl hover:bg-gray-50 transition-colors">
-                        <span class="text-sm font-medium text-gray-900">{{ ticket.title }}</span>
-                        <span class="text-xs px-2 py-1 rounded-full font-medium {% if ticket.ticket_type == 'bug' %}bg-red-100 text-red-700{% elif ticket.ticket_type == 'feature_request' %}bg-blue-100 text-blue-700{% else %}bg-sky-100 text-sky-700{% endif %}">{{ ticket.get_ticket_type_display }}</span>
+                    <a href="{% url 'ticket_detail' ticket.pk %}" class="flex items-center justify-between p-3 rounded-xl hover:bg-hover transition-colors">
+                        <span class="text-sm font-medium text-primary">{{ ticket.title }}</span>
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.ticket_type == 'bug' %}bg-red-50 text-red-700 border-red-200{% elif ticket.ticket_type == 'feature_request' %}bg-blue-50 text-blue-700 border-blue-200{% else %}bg-sky-50 text-sky-700 border-sky-200{% endif %}">{{ ticket.get_ticket_type_display }}</span>
                     </a>
                 {% endfor %}
             </div>
diff --git a/templates/pages/projects/project_form.html b/templates/pages/projects/project_form.html
index 7fee5c6..4ba95c6 100644
--- a/templates/pages/projects/project_form.html
+++ b/templates/pages/projects/project_form.html
@@ -2,19 +2,19 @@
 {% block title %}{% if object %}Edit{% else %}New{% endif %} Project{% endblock %}
 {% block content_inner %}
 <div class="max-w-2xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">{% if object %}Edit{% else %}New{% endif %} Project</h1>
-        <p class="text-sm text-gray-500 mb-6">{% if object %}Update the project details below.{% else %}Fill in the details to create a new project.{% endif %}</p>
+    <div class="card-surface p-6">
+        <h1 class="text-xl font-bold text-primary mb-1">{% if object %}Edit{% else %}New{% endif %} Project</h1>
+        <p class="text-sm text-tertiary mb-6">{% if object %}Update the project details below.{% else %}Fill in the details to create a new project.{% endif %}</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
+                <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                     {% if object %}Save Changes{% else %}Create Project{% endif %}
                 </button>
-                <a href="{% url 'project_list' %}" class="btn btn-ghost">Cancel</a>
+                <a href="{% url 'project_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/projects/project_list.html b/templates/pages/projects/project_list.html
index 209cab7..facdd51 100644
--- a/templates/pages/projects/project_list.html
+++ b/templates/pages/projects/project_list.html
@@ -3,27 +3,27 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Projects</h1>
-        <p class="text-gray-500 mt-1">Manage and track all your projects.</p>
+        <h1 class="text-2xl font-bold text-primary">Projects</h1>
+        <p class="text-tertiary mt-1">Manage and track all your projects.</p>
     </div>
-    <a href="{% url 'project_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'project_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New Project
     </a>
 </div>
 
 <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6">
     {% for s in status_counts %}
-        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
-            <p class="text-sm text-gray-500">{{ s.status|title }}</p>
-            <p class="text-2xl font-bold text-gray-900">{{ s.count }}</p>
+        <div class="stat-card">
+            <p class="text-sm text-tertiary">{{ s.status|title }}</p>
+            <p class="text-2xl font-bold text-primary">{{ s.count }}</p>
         </div>
     {% endfor %}
 </div>
 
 <div class="grid gap-4">
     {% for project in projects %}
-        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
+        <div class="card-surface hover:border-blue-300 transition-colors">
             <div class="p-5">
                 <div class="flex items-start justify-between">
                     <div class="flex items-start gap-4">
@@ -31,30 +31,30 @@
                             {{ project.name|first|upper }}
                         </div>
                         <div>
-                            <a href="{% url 'project_detail' project.pk %}" class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">{{ project.name }}</a>
+                            <a href="{% url 'project_detail' project.pk %}" class="text-lg font-semibold text-primary hover:text-blue-600 transition-colors">{{ project.name }}</a>
                             <div class="flex items-center gap-3 mt-1">
-                                <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if project.status == 'active' %}bg-green-100 text-green-700{% elif project.status == 'planning' %}bg-blue-100 text-blue-700{% elif project.status == 'review' %}bg-amber-100 text-amber-700{% else %}bg-gray-100 text-gray-700{% endif %}">
+                                <span class="text-xs px-2 py-1 rounded-full font-medium border {% if project.status == 'active' %}bg-green-50 text-green-700 border-green-200{% elif project.status == 'planning' %}bg-blue-50 text-blue-700 border-blue-200{% elif project.status == 'review' %}bg-amber-50 text-amber-700 border-amber-200{% else %}bg-gray-50 text-gray-700 border-gray-200{% endif %}">
                                     {{ project.get_status_display }}
                                 </span>
-                                <span class="text-xs text-gray-500">Client: {{ project.client.username }}</span>
+                                <span class="text-xs text-tertiary">Client: {{ project.client.username }}</span>
                             </div>
                         </div>
                     </div>
                     <div class="flex gap-2">
-                        <a href="{% url 'project_detail' project.pk %}" class="btn btn-sm btn-ghost">View</a>
+                        <a href="{% url 'project_detail' project.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">View</a>
                         {% if user.is_admin %}
-                            <a href="{% url 'project_edit' project.pk %}" class="btn btn-sm btn-ghost">Edit</a>
-                            <label for="delete-project-{{ project.pk }}" class="btn btn-sm bg-red-50 text-red-600 hover:bg-red-100 border-0">Delete</label>
+                            <a href="{% url 'project_edit' project.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
+                            <label for="delete-project-{{ project.pk }}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                         {% endif %}
                     </div>
                 </div>
             </div>
         </div>
     {% empty %}
-        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
-            <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
-            <p class="text-gray-500">No projects yet.</p>
-            <a href="{% url 'project_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0 mt-3">Create your first project</a>
+        <div class="card-surface p-12 text-center">
+            <svg class="w-12 h-12 text-muted mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+            <p class="text-tertiary">No projects yet.</p>
+            <a href="{% url 'project_create' %}" class="inline-block mt-3 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Create your first project</a>
         </div>
     {% endfor %}
 </div>
diff --git a/templates/pages/tickets/ticket_confirm_delete.html b/templates/pages/tickets/ticket_confirm_delete.html
index f3334b8..9865a2e 100644
--- a/templates/pages/tickets/ticket_confirm_delete.html
+++ b/templates/pages/tickets/ticket_confirm_delete.html
@@ -2,17 +2,17 @@
 {% block title %}Delete Ticket{% endblock %}
 {% block content_inner %}
 <div class="max-w-lg mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+    <div class="card-surface p-6 text-center">
+        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
         </div>
-        <h1 class="text-xl font-bold text-gray-900 mb-2">Delete Ticket</h1>
-        <p class="text-gray-500 mb-6">Are you sure you want to delete <strong>"{{ object.title }}"</strong>?</p>
+        <h1 class="text-base font-semibold text-primary mb-2">Delete Ticket</h1>
+        <p class="text-sm text-tertiary mb-5">Are you sure you want to delete <strong>"{{ object.title }}"</strong>?</p>
         <form method="post">
             {% csrf_token %}
-            <div class="flex gap-3 justify-center">
-                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700 border-0">Delete</button>
-                <a href="{% url 'ticket_detail' object.pk %}" class="btn btn-ghost">Cancel</a>
+            <div class="flex gap-2.5 justify-center">
+                <button type="submit" class="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 transition-colors">Delete</button>
+                <a href="{% url 'ticket_detail' object.pk %}" class="px-4 py-2 rounded-lg border border-soft text-sm font-medium text-secondary hover:bg-hover transition-colors">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/templates/pages/tickets/ticket_detail.html b/templates/pages/tickets/ticket_detail.html
index 7c43104..4afd058 100644
--- a/templates/pages/tickets/ticket_detail.html
+++ b/templates/pages/tickets/ticket_detail.html
@@ -2,49 +2,49 @@
 {% block title %}{{ ticket.title }}{% endblock %}
 {% block content_inner %}
 <div class="max-w-4xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
+    <div class="card-surface overflow-hidden mb-6">
         <div class="p-6">
             <div class="flex items-start justify-between mb-4">
                 <div>
-                    <div class="flex items-center gap-2 text-sm text-gray-500 mb-1">
+                    <div class="flex items-center gap-2 text-sm text-tertiary mb-1">
                         <a href="{% url 'ticket_list' %}" class="hover:text-blue-600">Tickets</a>
                         <span>/</span>
-                        <span class="text-gray-900">{{ ticket.title|truncatechars:30 }}</span>
+                        <span class="text-primary">{{ ticket.title|truncatechars:30 }}</span>
                     </div>
-                    <h1 class="text-2xl font-bold text-gray-900">{{ ticket.title }}</h1>
+                    <h1 class="text-2xl font-bold text-primary">{{ ticket.title }}</h1>
                 </div>
                 <div class="flex gap-2">
-                    <a href="{% url 'ticket_edit' ticket.pk %}" class="btn btn-sm bg-blue-50 text-blue-700 hover:bg-blue-100 border-0">Edit</a>
+                    <a href="{% url 'ticket_edit' ticket.pk %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Edit</a>
                     {% if user.is_admin %}
-                        <label for="delete-modal-ticket" class="btn btn-sm text-red-600 hover:bg-red-50 border-0 cursor-pointer">Delete</label>
+                        <label for="delete-modal-ticket" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                     {% endif %}
                 </div>
             </div>
             <div class="flex flex-wrap gap-2 mb-4">
-                <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if ticket.ticket_type == 'bug' %}bg-red-100 text-red-700{% elif ticket.ticket_type == 'feature_request' %}bg-blue-100 text-blue-700{% else %}bg-sky-100 text-sky-700{% endif %}">
+                <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.ticket_type == 'bug' %}bg-red-50 text-red-700 border-red-200{% elif ticket.ticket_type == 'feature_request' %}bg-blue-50 text-blue-700 border-blue-200{% else %}bg-sky-50 text-sky-700 border-sky-200{% endif %}">
                     {{ ticket.get_ticket_type_display }}
                 </span>
-                <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if ticket.status == 'new' %}bg-gray-100 text-gray-700{% elif ticket.status == 'acknowledged' %}bg-blue-100 text-blue-700{% elif ticket.status == 'in_progress' %}bg-amber-100 text-amber-700{% elif ticket.status == 'done' %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
+                <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.status == 'new' %}bg-gray-50 text-gray-700 border-gray-200{% elif ticket.status == 'acknowledged' %}bg-blue-50 text-blue-700 border-blue-200{% elif ticket.status == 'in_progress' %}bg-amber-50 text-amber-700 border-amber-200{% elif ticket.status == 'done' %}bg-green-50 text-green-700 border-green-200{% else %}bg-red-50 text-red-700 border-red-200{% endif %}">
                     {{ ticket.get_status_display }}
                 </span>
-                <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if ticket.priority == 'high' %}bg-red-100 text-red-700{% elif ticket.priority == 'medium' %}bg-amber-100 text-amber-700{% else %}bg-blue-100 text-blue-700{% endif %}">
+                <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.priority == 'high' %}bg-red-50 text-red-700 border-red-200{% elif ticket.priority == 'medium' %}bg-amber-50 text-amber-700 border-amber-200{% else %}bg-blue-50 text-blue-700 border-blue-200{% endif %}">
                     {{ ticket.get_priority_display }}
                 </span>
             </div>
-            <div class="grid grid-cols-3 gap-4 mb-6 p-4 bg-gray-50 rounded-xl">
-                <div><p class="text-xs text-gray-500 uppercase font-medium">Creator</p><p class="text-sm font-semibold text-gray-900 mt-0.5">{{ ticket.creator.username }}</p></div>
-                <div><p class="text-xs text-gray-500 uppercase font-medium">Project</p><p class="text-sm font-semibold text-gray-900 mt-0.5"><a href="{% url 'project_detail' ticket.project.pk %}" class="hover:text-blue-600">{{ ticket.project.name|default:"-" }}</a></p></div>
-                <div><p class="text-xs text-gray-500 uppercase font-medium">Assignee</p><p class="text-sm font-semibold text-gray-900 mt-0.5">{{ ticket.assignee.username|default:"Unassigned" }}</p></div>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-3 p-4 bg-hover rounded-xl mb-6">
+                <div><p class="text-xs text-muted uppercase font-medium">Creator</p><p class="text-sm font-semibold text-primary mt-0.5">{{ ticket.creator.username }}</p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Project</p><p class="text-sm font-semibold text-primary mt-0.5"><a href="{% url 'project_detail' ticket.project.pk %}" class="hover:text-blue-600">{{ ticket.project.name|default:"-" }}</a></p></div>
+                <div><p class="text-xs text-muted uppercase font-medium">Assignee</p><p class="text-sm font-semibold text-primary mt-0.5">{{ ticket.assignee.username|default:"Unassigned" }}</p></div>
             </div>
             <div class="prose prose-sm max-w-none">
-                <div class="text-gray-700">{{ ticket.description|safe }}</div>
+                <div class="text-secondary">{{ ticket.description|safe }}</div>
             </div>
         </div>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
-        <div class="px-6 py-4 border-b border-gray-100">
-            <h2 class="font-semibold text-gray-900">Comments ({{ comments.count }})</h2>
+    <div class="card-surface overflow-hidden">
+        <div class="px-6 py-4 border-b border-subtle">
+            <h2 class="font-semibold text-primary">Comments ({{ comments.count }})</h2>
         </div>
         <div class="p-6">
             <div id="comment-list" class="space-y-4 mb-6">
@@ -53,27 +53,27 @@
                         <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">{{ comment.author.username|first|upper }}</div>
                         <div class="flex-1">
                             <div class="flex items-center gap-2 mb-1">
-                                <span class="text-sm font-semibold text-gray-900">{{ comment.author.username }}</span>
-                                <span class="text-xs text-gray-400">{{ comment.created_at|timesince }} ago</span>
+                                <span class="text-sm font-semibold text-primary">{{ comment.author.username }}</span>
+                                <span class="text-xs text-muted">{{ comment.created_at|timesince }} ago</span>
                             </div>
-                            <p class="text-sm text-gray-700">{{ comment.body }}</p>
+                            <p class="text-sm text-secondary">{{ comment.body }}</p>
                         </div>
                     </div>
                 {% empty %}
-                    <p class="text-sm text-gray-400 text-center py-4">No comments yet. Be the first to comment.</p>
+                    <p class="text-sm text-muted text-center py-4">No comments yet. Be the first to comment.</p>
                 {% endfor %}
             </div>
             <form method="post" action="{% url 'ticket_comment' ticket.pk %}"
                   hx-target="#comment-list" hx-swap="innerHTML"
-                  class="border-t border-gray-100 pt-4">
+                  class="border-t border-subtle pt-4">
                 {% csrf_token %}
-                <label class="text-sm font-medium text-gray-700 mb-2 block">Add a comment</label>
-                <textarea name="body" rows="2" class="textarea textarea-bordered w-full bg-gray-50 focus:bg-white rounded-xl" placeholder="Write your comment..." required></textarea>
-                <button type="submit" class="btn btn-sm bg-blue-600 text-white hover:bg-blue-700 border-0 mt-2">Post Comment</button>
+                <label class="text-sm font-medium text-secondary mb-2 block">Add a comment</label>
+                <textarea name="body" rows="2" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors resize-y" placeholder="Write your comment..." required></textarea>
+                <button type="submit" class="mt-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Post Comment</button>
             </form>
         </div>
     </div>
 </div>
 {% url 'ticket_delete' ticket.pk as delete_url %}
 {% include "components/delete_modal.html" with modal_id="delete-modal-ticket" delete_url=delete_url %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/pages/tickets/ticket_form.html b/templates/pages/tickets/ticket_form.html
index b8867e7..cb78f72 100644
--- a/templates/pages/tickets/ticket_form.html
+++ b/templates/pages/tickets/ticket_form.html
@@ -2,17 +2,17 @@
 {% block title %}{% if object %}Edit{% else %}New{% endif %} Ticket{% endblock %}
 {% block content_inner %}
 <div class="max-w-2xl mx-auto">
-    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-        <h1 class="text-xl font-bold text-gray-900 mb-1">{% if object %}Edit{% else %}New{% endif %} Ticket</h1>
-        <p class="text-sm text-gray-500 mb-6">{% if object %}Update the ticket.{% else %}Submit a new support ticket or feature request.{% endif %}</p>
+    <div class="card-surface p-6">
+        <h1 class="text-xl font-bold text-primary mb-1">{% if object %}Edit{% else %}New{% endif %} Ticket</h1>
+        <p class="text-sm text-tertiary mb-6">{% if object %}Update the ticket.{% else %}Submit a new support ticket or feature request.{% endif %}</p>
         <form method="post">
             {% csrf_token %}
             {% for field in form %}
                 {% include "partials/form_field.html" %}
             {% endfor %}
             <div class="flex gap-3 pt-2">
-                <button type="submit" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">Save</button>
-                <a href="{% url 'ticket_list' %}" class="btn btn-ghost">Cancel</a>
+                <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Save</button>
+                <a href="{% url 'ticket_list' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors">Cancel</a>
             </div>
         </form>
     </div>
@@ -53,4 +53,4 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/pages/tickets/ticket_list.html b/templates/pages/tickets/ticket_list.html
index 78f2c79..da3ec1b 100644
--- a/templates/pages/tickets/ticket_list.html
+++ b/templates/pages/tickets/ticket_list.html
@@ -3,59 +3,59 @@
 {% block content_inner %}
 <div class="flex items-center justify-between mb-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-900">Tickets</h1>
-        <p class="text-gray-500 mt-1">Client support and feature requests.</p>
+        <h1 class="text-2xl font-bold text-primary">Tickets</h1>
+        <p class="text-tertiary mt-1">Client support and feature requests.</p>
     </div>
-    <a href="{% url 'ticket_create' %}" class="btn bg-blue-600 text-white hover:bg-blue-700 border-0">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+    <a href="{% url 'ticket_create' %}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">
+        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
         New Ticket
     </a>
 </div>
-<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+<div class="card-surface overflow-hidden">
     <div class="overflow-x-auto">
-    <table class="table w-full">
+    <table class="w-full text-sm">
         <thead>
-            <tr class="bg-gray-50">
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Type</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Priority</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Project</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Assignee</th>
-                <th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Created</th>
-                {% if user.is_admin %}<th class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>{% endif %}
+            <tr class="text-xs font-semibold text-muted uppercase tracking-wider bg-hover">
+                <th class="px-4 py-3 text-left">Title</th>
+                <th class="px-4 py-3 text-left">Type</th>
+                <th class="px-4 py-3 text-left">Status</th>
+                <th class="px-4 py-3 text-left">Priority</th>
+                <th class="px-4 py-3 text-left">Project</th>
+                <th class="px-4 py-3 text-left">Assignee</th>
+                <th class="px-4 py-3 text-left">Created</th>
+                {% if user.is_admin %}<th class="px-4 py-3 text-left">Actions</th>{% endif %}
             </tr>
         </thead>
         <tbody>
             {% for ticket in tickets %}
-                <tr class="hover:bg-gray-50 transition-colors">
-                    <td><a href="{% url 'ticket_detail' ticket.pk %}" class="font-medium text-gray-900 hover:text-blue-600">{{ ticket.title }}</a></td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if ticket.ticket_type == 'bug' %}bg-red-100 text-red-700{% elif ticket.ticket_type == 'feature_request' %}bg-blue-100 text-blue-700{% else %}bg-sky-100 text-sky-700{% endif %}">
+                <tr class="hover:bg-hover transition-colors border-t border-subtle">
+                    <td class="px-4 py-3"><a href="{% url 'ticket_detail' ticket.pk %}" class="font-medium text-primary hover:text-blue-600">{{ ticket.title }}</a></td>
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.ticket_type == 'bug' %}bg-red-50 text-red-700 border-red-200{% elif ticket.ticket_type == 'feature_request' %}bg-blue-50 text-blue-700 border-blue-200{% else %}bg-sky-50 text-sky-700 border-sky-200{% endif %}">
                             {{ ticket.get_ticket_type_display }}
                         </span>
                     </td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if ticket.status == 'new' %}bg-gray-100 text-gray-700{% elif ticket.status == 'acknowledged' %}bg-blue-100 text-blue-700{% elif ticket.status == 'in_progress' %}bg-amber-100 text-amber-700{% elif ticket.status == 'done' %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.status == 'new' %}bg-gray-50 text-gray-700 border-gray-200{% elif ticket.status == 'acknowledged' %}bg-blue-50 text-blue-700 border-blue-200{% elif ticket.status == 'in_progress' %}bg-amber-50 text-amber-700 border-amber-200{% elif ticket.status == 'done' %}bg-green-50 text-green-700 border-green-200{% else %}bg-red-50 text-red-700 border-red-200{% endif %}">
                             {{ ticket.get_status_display }}
                         </span>
                     </td>
-                    <td>
-                        <span class="text-xs px-2.5 py-1 rounded-full font-medium {% if ticket.priority == 'high' %}bg-red-100 text-red-700{% elif ticket.priority == 'medium' %}bg-amber-100 text-amber-700{% else %}bg-blue-100 text-blue-700{% endif %}">
+                    <td class="px-4 py-3">
+                        <span class="text-xs px-2 py-1 rounded-full font-medium border {% if ticket.priority == 'high' %}bg-red-50 text-red-700 border-red-200{% elif ticket.priority == 'medium' %}bg-amber-50 text-amber-700 border-amber-200{% else %}bg-blue-50 text-blue-700 border-blue-200{% endif %}">
                             {{ ticket.get_priority_display }}
                         </span>
                     </td>
-                    <td class="text-sm text-gray-600">{{ ticket.project.name|default:"-" }}</td>
-                    <td class="text-sm text-gray-600">{{ ticket.assignee.username|default:"-" }}</td>
-                    <td class="text-sm text-gray-500">{{ ticket.created_at|date:"M d" }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ ticket.project.name|default:"-" }}</td>
+                    <td class="px-4 py-3 text-secondary">{{ ticket.assignee.username|default:"-" }}</td>
+                    <td class="px-4 py-3 text-tertiary">{{ ticket.created_at|date:"M d" }}</td>
                     {% if user.is_admin %}
-                        <td>
-                            <label for="delete-ticket-{{ ticket.pk }}" class="btn btn-ghost btn-xs text-red-600">Delete</label>
+                        <td class="px-4 py-3">
+                            <label for="delete-ticket-{{ ticket.pk }}" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-red-50 text-red-700 hover:bg-red-100 border border-red-200 transition-colors cursor-pointer">Delete</label>
                         </td>
                     {% endif %}
                 </tr>
             {% empty %}
-                <tr><td colspan="8" class="text-center py-12 text-gray-500">No tickets found.</td></tr>
+                <tr><td colspan="{% if user.is_admin %}8{% else %}7{% endif %}" class="text-center py-12 text-tertiary">No tickets found.</td></tr>
             {% endfor %}
         </tbody>
     </table>
diff --git a/templates/partials/form_field.html b/templates/partials/form_field.html
index 80952a2..88900f5 100644
--- a/templates/partials/form_field.html
+++ b/templates/partials/form_field.html
@@ -1,30 +1,24 @@
 {% load form_helpers %}
-<div class="form-control w-full">
-    <label class="label">
-        <span class="label-text">{{ field.label }}</span>
-    </label>
+<div class="space-y-1.5">
+    <label class="text-sm font-medium text-secondary">{{ field.label }}</label>
     {% with wt=field|field_type %}
         {% if wt == "CheckboxInput" or wt == "CheckboxSelectMultiple" %}
-            <label class="cursor-pointer label justify-start gap-3 p-0">
-                {{ field|add_class:"checkbox checkbox-primary" }}
-                <span class="label-text">{{ field.label }}</span>
+            <label class="flex items-center gap-3 cursor-pointer">
+                {{ field }}
+                <span class="text-sm text-secondary">{{ field.label }}</span>
             </label>
         {% elif wt == "Select" or wt == "NullBooleanSelect" or wt == "SelectMultiple" %}
-            {{ field|add_class:"select select-bordered w-full" }}
+            {{ field|add_class:"w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors" }}
         {% elif wt == "Textarea" %}
-            {{ field|add_class:"textarea textarea-bordered w-full" }}
+            {{ field|add_class:"w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors resize-y" }}
         {% else %}
-            {{ field|add_class:"input input-bordered w-full" }}
+            {{ field|add_class:"w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors" }}
         {% endif %}
     {% endwith %}
     {% if field.errors %}
-        <label class="label">
-            <span class="label-text-alt text-error">{{ field.errors.0 }}</span>
-        </label>
+        <p class="text-xs text-red-600">{{ field.errors.0 }}</p>
     {% endif %}
     {% if field.help_text %}
-        <label class="label">
-            <span class="label-text-alt text-gray-500">{{ field.help_text }}</span>
-        </label>
+        <p class="text-xs text-tertiary">{{ field.help_text }}</p>
     {% endif %}
-</div>
+</div>
\ No newline at end of file
diff --git a/templates/partials/kanban/card.html b/templates/partials/kanban/card.html
index 70f61f3..135b05b 100644
--- a/templates/partials/kanban/card.html
+++ b/templates/partials/kanban/card.html
@@ -1,37 +1,37 @@
-<div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all cursor-grab active:cursor-grabbing"
+<div class="card-surface hover:border-blue-300 transition-all cursor-grab active:cursor-grabbing"
      id="card-{{ card.pk }}"
      data-card-id="{{ card.pk }}">
     <div class="p-3">
         <div class="flex items-start justify-between gap-2">
             <div class="flex-1 min-w-0">
                 <a href="{% url 'card_detail' card.pk %}"
-                   class="text-sm font-medium text-gray-900 leading-snug hover:text-blue-600 block truncate"
+                   class="text-sm font-medium text-primary leading-snug hover:text-blue-600 block truncate"
                    onclick="event.stopPropagation()">
                     {{ card.title }}
                 </a>
                 <div class="flex items-center gap-2 mt-1.5">
                     {% if card.priority == 'urgent' %}
-                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold bg-red-100 text-red-700">Urgent</span>
+                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold border bg-red-50 text-red-700 border-red-200">Urgent</span>
                     {% elif card.priority == 'high' %}
-                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold bg-amber-100 text-amber-700">High</span>
+                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold border bg-amber-50 text-amber-700 border-amber-200">High</span>
                     {% elif card.priority == 'medium' %}
-                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold bg-blue-100 text-blue-700">Med</span>
+                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold border bg-blue-50 text-blue-700 border-blue-200">Med</span>
                     {% elif card.priority == 'low' %}
-                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold bg-gray-100 text-gray-600">Low</span>
+                        <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold border bg-gray-50 text-gray-600 border-gray-200">Low</span>
                     {% endif %}
                     {% if card.assignee %}
-                        <span class="text-[10px] text-gray-400 truncate">{{ card.assignee.username }}</span>
+                        <span class="text-[10px] text-muted truncate">{{ card.assignee.username }}</span>
                     {% endif %}
                 </div>
             </div>
             <div class="flex gap-1 flex-shrink-0 no-drag">
                 <a href="{% url 'card_edit' card.pk %}"
-                   class="text-gray-300 hover:text-blue-500 transition-colors"
+                   class="text-muted hover:text-blue-500 transition-colors"
                    onclick="event.stopPropagation()">
                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                 </a>
                 <button type="button"
-                        class="text-gray-300 hover:text-red-500 transition-colors"
+                        class="text-muted hover:text-red-500 transition-colors"
                         onclick="event.stopPropagation(); openCardDeleteModal('{% url 'card_delete' card.pk %}')">
                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                 </button>
diff --git a/templates/partials/kanban/comment.html b/templates/partials/kanban/comment.html
index f87f47a..91942cf 100644
--- a/templates/partials/kanban/comment.html
+++ b/templates/partials/kanban/comment.html
@@ -1,14 +1,14 @@
 {% load form_helpers %}
-<div class="card bg-white rounded-xl shadow-sm border border-gray-100" id="comment-{{ comment.pk }}">
-    <div class="card-body p-4">
+<div class="card-surface" id="comment-{{ comment.pk }}">
+    <div class="p-4">
         <div class="flex items-start gap-3">
             <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">{{ comment.author.username|first|upper }}</div>
             <div class="flex-1 min-w-0">
                 <div class="flex items-center gap-2 mb-1">
-                    <span class="text-sm font-semibold text-gray-900">{{ comment.author.username }}</span>
-                    <span class="text-xs text-gray-400">{{ comment.created_at|timesince }} ago</span>
+                    <span class="text-sm font-semibold text-primary">{{ comment.author.username }}</span>
+                    <span class="text-xs text-muted">{{ comment.created_at|timesince }} ago</span>
                 </div>
-                <div class="prose prose-sm max-w-none text-gray-700 mb-2">
+                <div class="prose prose-sm max-w-none text-secondary mb-2">
                     {{ comment.body|render_markdown }}
                 </div>
                 {% if not comment.parent %}
@@ -23,15 +23,15 @@
                       hx-target="#comment-{{ comment.pk }}" hx-swap="afterend">
                     {% csrf_token %}
                     <input type="hidden" name="parent" value="{{ comment.pk }}">
-                    <textarea name="body" class="textarea textarea-bordered w-full text-sm min-h-[80px]" placeholder="Write a reply..." required></textarea>
+                    <textarea name="body" class="w-full px-3 py-2 rounded-lg border border-soft bg-white text-sm text-primary focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-colors resize-y min-h-[80px]" placeholder="Write a reply..." required></textarea>
                     <div class="flex gap-2">
-                        <button type="submit" class="btn btn-sm bg-blue-600 text-white hover:bg-blue-700 border-0">Reply</button>
-                        <button type="button" class="btn btn-sm btn-ghost" onclick="this.closest('form').classList.add('hidden')">Cancel</button>
+                        <button type="submit" class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors">Reply</button>
+                        <button type="button" class="px-3 py-1.5 rounded-lg text-sm font-medium text-secondary hover:bg-hover border border-soft transition-colors" onclick="this.closest('form').classList.add('hidden')">Cancel</button>
                     </div>
                 </form>
                 {% endif %}
                 {% if comment.replies.all %}
-                    <div class="mt-3 space-y-3 pl-4 border-l-2 border-gray-100">
+                    <div class="mt-3 space-y-3 pl-4 border-l-2 border-soft">
                         {% for reply in comment.replies.all %}
                             {% include "partials/kanban/comment.html" with comment=reply %}
                         {% endfor %}