diff --git a/static/css/style.css b/static/css/style.css
index 68d62cd..7c5683a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1739,4 +1739,622 @@ input[type="time"]::-webkit-datetime-edit {
     .urgent-badge {
         align-self: flex-end;
     }
+}
+
+/* Common Management Interface Styles */
+.management-container {
+    padding: 1rem;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.management-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.management-header h1 {
+    margin: 0;
+    color: #333;
+}
+
+.management-controls {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+/* View Switcher Component */
+.view-switcher {
+    display: flex;
+    background: #f8f9fa;
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.view-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    background: white;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+    color: #333;
+    border: 1px solid #ddd;
+}
+
+.view-btn.active {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+.view-btn:hover:not(.active) {
+    background: #e9ecef;
+}
+
+/* Statistics Cards */
+.management-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.stat-number {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #007bff;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: #666;
+    margin-top: 0.25rem;
+}
+
+/* Loading and Error States */
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.error-alert {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 1rem;
+    border-radius: 6px;
+    text-align: center;
+    margin: 1rem 0;
+}
+
+/* Modal Enhancements */
+.modal.large .modal-content {
+    max-width: 800px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid #dee2e6;
+}
+
+/* Form Components */
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-weight: 500;
+    color: #333;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+/* Priority and Status Badges */
+.priority-badge, .status-badge {
+    padding: 0.125rem 0.375rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.priority-badge.LOW { background: #d4edda; color: #155724; }
+.priority-badge.MEDIUM { background: #fff3cd; color: #856404; }
+.priority-badge.HIGH { background: #f8d7da; color: #721c24; }
+.priority-badge.URGENT { background: #f5c6cb; color: #721c24; }
+
+.status-badge.PLANNING { background: #fff3cd; color: #856404; }
+.status-badge.ACTIVE { background: #d1ecf1; color: #0c5460; }
+.status-badge.COMPLETED { background: #d4edda; color: #155724; }
+.status-badge.CANCELLED { background: #f8d7da; color: #721c24; }
+.status-badge.NOT_STARTED { background: #e2e3e5; color: #495057; }
+.status-badge.IN_PROGRESS { background: #d1ecf1; color: #0c5460; }
+.status-badge.ON_HOLD { background: #ffeaa7; color: #856404; }
+
+/* Card Components */
+.management-card {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.1s;
+    position: relative;
+}
+
+.management-card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: 0;
+    color: #333;
+}
+
+.card-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+/* Progress Components */
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #007bff, #0056b3);
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.25rem;
+}
+
+/* Actions */
+.management-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Grid Layouts */
+.management-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+/* Responsive Design for Management Interfaces */
+@media (max-width: 768px) {
+    .management-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .management-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .view-switcher {
+        justify-content: center;
+    }
+    
+    .management-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Common Container Patterns */
+.page-container {
+    padding: 1rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #e9ecef;
+}
+
+.page-header h2 {
+    margin: 0;
+    color: #333;
+}
+
+.page-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Kanban Common Styles */
+.kanban-container {
+    padding: 1rem;
+}
+
+.kanban-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #dee2e6;
+}
+
+.kanban-board {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.kanban-column {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 1rem;
+    min-height: 500px;
+}
+
+.column-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #ddd;
+}
+
+.column-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #333;
+}
+
+.column-content {
+    min-height: 400px;
+    padding: 0.5rem 0;
+}
+
+.task-count {
+    background: #007bff;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+}
+
+/* Card Components - Enhanced */
+.card {
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: box-shadow 0.2s ease;
+}
+
+.card:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.card-header {
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+.card-footer {
+    padding: 1rem 1.5rem;
+    background: #f8f9fa;
+    border-top: 1px solid #dee2e6;
+}
+
+.card-title {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.card-subtitle {
+    color: #666;
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+/* Grid Systems */
+.grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+}
+
+.grid-4 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+}
+
+.grid-auto {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+/* Dashboard Widget Common Styles */
+.widget {
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.widget:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #eee;
+}
+
+.widget-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.widget-content {
+    min-height: 100px;
+}
+
+/* Filter Components */
+.filter-bar {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    border: 1px solid #dee2e6;
+}
+
+.filter-row {
+    display: flex;
+    gap: 1rem;
+    align-items: end;
+    flex-wrap: wrap;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+}
+
+.filter-group label {
+    font-weight: 500;
+    color: #495057;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.filter-group input,
+.filter-group select {
+    padding: 0.5rem;
+    border: 1px solid #ced4da;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    transition: border-color 0.2s ease;
+}
+
+.filter-group input:focus,
+.filter-group select:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+/* Tag/Badge System Enhancement */
+.tag {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.tag-blue { background: #d1ecf1; color: #0c5460; }
+.tag-green { background: #d4edda; color: #155724; }
+.tag-yellow { background: #fff3cd; color: #856404; }
+.tag-red { background: #f8d7da; color: #721c24; }
+.tag-gray { background: #e2e3e5; color: #495057; }
+.tag-purple { background: #e1d3ed; color: #6f42c1; }
+
+/* Project/Context Information */
+.project-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.project-code {
+    background: #007bff;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.project-name {
+    font-weight: 500;
+    color: #333;
+}
+
+.context-info {
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 6px;
+    border-left: 4px solid #007bff;
+    margin: 1rem 0;
+}
+
+.context-label {
+    font-weight: 600;
+    color: #333;
+    margin-right: 0.5rem;
+}
+
+/* Enhanced Responsive Design */
+@media (max-width: 1200px) {
+    .grid-4 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 992px) {
+    .grid-3, .grid-4 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .kanban-board {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .page-container {
+        padding: 0.5rem;
+    }
+    
+    .page-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .page-actions {
+        justify-content: center;
+    }
+    
+    .grid-2, .grid-3, .grid-4 {
+        grid-template-columns: 1fr;
+    }
+    
+    .kanban-board {
+        grid-template-columns: 1fr;
+    }
+    
+    .filter-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .filter-group {
+        min-width: auto;
+    }
+    
+    .card-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
 }
\ No newline at end of file
diff --git a/templates/analytics.html b/templates/analytics.html
index 7c1e55d..3389c26 100644
--- a/templates/analytics.html
+++ b/templates/analytics.html
@@ -1,8 +1,8 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="timetrack-container">
-    <div class="analytics-header">
+<div class="page-container timetrack-container">
+    <div class="page-header analytics-header">
         <h2>📊 Time Analytics</h2>
         <div class="mode-switcher">
             <button class="mode-btn {% if mode == 'personal' %}active{% endif %}" 
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 3c281d1..6efa5ee 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,10 +1,10 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="dashboard-container">
-    <div class="dashboard-header">
+<div class="page-container dashboard-container">
+    <div class="page-header dashboard-header">
         <h2>My Dashboard</h2>
-        <div class="dashboard-actions">
+        <div class="page-actions dashboard-actions">
             <button id="customize-btn" class="btn btn-md btn-primary">
                 <i class="fas fa-edit"></i> Customize
             </button>
@@ -193,30 +193,7 @@
 </div>
 
 <style>
-.dashboard-container {
-    padding: 1rem;
-    max-width: 1400px;
-    margin: 0 auto;
-}
-
-.dashboard-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid #e9ecef;
-}
-
-.dashboard-header h2 {
-    margin: 0;
-    color: #333;
-}
-
-.dashboard-actions {
-    display: flex;
-    gap: 0.5rem;
-}
+/* Dashboard-specific overrides */
 
 .dashboard-grid {
     display: grid;
@@ -231,20 +208,7 @@
     min-height: 400px;
 }
 
-.widget {
-    background: white;
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
-    padding: 1rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.widget:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
+/* Widget styles now inherited from common styles.css */
 
 .widget.dragging {
     opacity: 0.8;
@@ -282,21 +246,7 @@
     grid-row: span 1;
 }
 
-.widget-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid #e9ecef;
-}
-
-.widget-title {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #333;
-    margin: 0;
-}
+/* Widget header and title styles now inherited from common styles.css */
 
 .widget-actions {
     display: flex;
@@ -324,6 +274,7 @@
     color: #333;
 }
 
+/* Widget content styling now inherited from common styles.css */
 .widget-content {
     flex: 1;
     overflow: hidden;
diff --git a/templates/kanban_overview.html b/templates/kanban_overview.html
index 8fdfcb7..3b361c1 100644
--- a/templates/kanban_overview.html
+++ b/templates/kanban_overview.html
@@ -1,8 +1,8 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="kanban-overview-container">
-    <div class="overview-header">
+<div class="page-container kanban-overview-container">
+    <div class="page-header overview-header">
         <h2>Unified Kanban Boards</h2>
         <p class="overview-description">Organize tasks from any project on shared company-wide boards</p>
     </div>
@@ -39,8 +39,8 @@
     {% if boards %}
     <div class="boards-grid">
         {% for board in boards %}
-        <div class="board-card">
-            <div class="board-header">
+        <div class="card board-card">
+            <div class="card-header board-header">
                 <div class="board-info">
                     <h3 class="board-name">
                         {{ board.name }}
@@ -197,20 +197,11 @@
 </div>
 
 <style>
-.kanban-overview-container {
-    padding: 1rem;
-}
-
+/* Container and header styles now inherited from common styles.css */
 .overview-header {
-    margin-bottom: 2rem;
     text-align: center;
 }
 
-.overview-header h2 {
-    margin: 0 0 0.5rem 0;
-    color: #333;
-}
-
 .overview-description {
     color: #666;
     margin: 0;
@@ -223,16 +214,8 @@
 }
 
 .board-card {
-    background: white;
-    border: 1px solid #dee2e6;
+    /* Card styling now inherited from common .card class */
     border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    transition: box-shadow 0.2s ease;
-}
-
-.board-card:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 
 .board-header {
diff --git a/templates/manage_project_tasks.html b/templates/manage_project_tasks.html
index d281997..8e2e6cd 100644
--- a/templates/manage_project_tasks.html
+++ b/templates/manage_project_tasks.html
@@ -1,8 +1,8 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="timetrack-container">
-    <div class="task-header">
+<div class="page-container timetrack-container">
+    <div class="page-header task-header">
         <div class="project-info">
             <h2>Tasks for Project: {{ project.code }} - {{ project.name }}</h2>
             <p class="project-description">{{ project.description or 'No description available' }}</p>
@@ -12,7 +12,7 @@
             </span>
             {% endif %}
         </div>
-        <div class="task-actions">
+        <div class="page-actions task-actions">
             <button id="create-task-btn" class="btn btn-success">Create New Task</button>
             <a href="{{ url_for('admin_projects') }}" class="btn btn-secondary">Back to Projects</a>
         </div>
diff --git a/templates/project_kanban.html b/templates/project_kanban.html
index 51dfb44..51a3863 100644
--- a/templates/project_kanban.html
+++ b/templates/project_kanban.html
@@ -1,13 +1,13 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="kanban-container">
+<div class="page-container kanban-container">
     <div class="kanban-header">
         <div class="project-info">
             <h2>Unified Kanban Board</h2>
             <p class="project-description">Organize tasks from any project on shared boards</p>
             {% if project %}
-            <div class="project-context">
+            <div class="context-info project-context">
                 <span class="context-label">Project Context:</span>
                 <span class="project-code">{{ project.code }}</span>
                 <span class="project-name">{{ project.name }}</span>
@@ -19,7 +19,7 @@
             </div>
             {% endif %}
         </div>
-        <div class="kanban-actions">
+        <div class="page-actions kanban-actions">
             {% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
             <button id="create-board-btn" class="btn btn-md btn-success">Create Board</button>
             <button id="manage-columns-btn" class="btn btn-md btn-warning" style="display: none;">Manage Columns</button>
@@ -260,42 +260,9 @@
     margin: 0 0 0.5rem 0;
 }
 
-.project-context {
-    margin-top: 1rem;
-    padding: 0.75rem;
-    background: #f8f9fa;
-    border-radius: 6px;
-    border-left: 4px solid #007bff;
-}
+/* Project context styles now inherited from common styles.css */
 
-.context-label {
-    font-weight: 600;
-    color: #333;
-    margin-right: 0.5rem;
-}
-
-.project-code {
-    background: #007bff;
-    color: white;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin-right: 0.5rem;
-}
-
-.project-name {
-    font-weight: 500;
-    color: #333;
-    margin-right: 0.5rem;
-}
-
-.kanban-actions {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-    flex-wrap: wrap;
-}
+/* Kanban actions styles now inherited from common .page-actions */
 
 /* Button styles now centralized in main style.css */
 
diff --git a/templates/sprint_management.html b/templates/sprint_management.html
index 4a13481..f03553a 100644
--- a/templates/sprint_management.html
+++ b/templates/sprint_management.html
@@ -1,11 +1,11 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="sprint-management-container">
+<div class="management-container sprint-management-container">
     <!-- Header Section -->
-    <div class="sprint-header">
+    <div class="management-header sprint-header">
         <h1>🏃‍♂️ Sprint Management</h1>
-        <div class="sprint-controls">
+        <div class="management-controls sprint-controls">
             <!-- View Switcher -->
             <div class="view-switcher">
                 <button class="view-btn active" data-view="active">Active Sprints</button>
@@ -15,7 +15,7 @@
             </div>
             
             <!-- Actions -->
-            <div class="sprint-actions">
+            <div class="management-actions sprint-actions">
                 <button id="add-sprint-btn" class="btn btn-primary">+ New Sprint</button>
                 <button id="refresh-sprints" class="btn btn-secondary">🔄 Refresh</button>
             </div>
@@ -23,7 +23,7 @@
     </div>
 
     <!-- Sprint Statistics -->
-    <div class="sprint-stats">
+    <div class="management-stats sprint-stats">
         <div class="stat-card">
             <div class="stat-number" id="total-sprints">0</div>
             <div class="stat-label">Total Sprints</div>
@@ -43,7 +43,7 @@
     </div>
 
     <!-- Sprint Grid -->
-    <div class="sprint-grid" id="sprint-grid">
+    <div class="management-grid sprint-grid" id="sprint-grid">
         <!-- Sprint cards will be populated here -->
     </div>
 
@@ -228,18 +228,7 @@
 }
 
 .sprint-card {
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1.5rem;
-    cursor: pointer;
-    transition: box-shadow 0.2s, transform 0.1s;
-    position: relative;
-}
-
-.sprint-card:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    transform: translateY(-2px);
+    /* Sprint card inherits from .management-card */
 }
 
 .sprint-card-header {
@@ -256,19 +245,11 @@
     color: #333;
 }
 
-.sprint-status {
+.status-badge {
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    text-transform: uppercase;
 }
 
-.sprint-status.PLANNING { background: #fff3cd; color: #856404; }
-.sprint-status.ACTIVE { background: #d1ecf1; color: #0c5460; }
-.sprint-status.COMPLETED { background: #d4edda; color: #155724; }
-.sprint-status.CANCELLED { background: #f8d7da; color: #721c24; }
-
 .sprint-dates {
     font-size: 0.9rem;
     color: #666;
@@ -279,25 +260,6 @@
     margin-bottom: 1rem;
 }
 
-.progress-bar {
-    width: 100%;
-    height: 8px;
-    background: #e9ecef;
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #007bff, #0056b3);
-    transition: width 0.3s ease;
-}
-
-.progress-text {
-    font-size: 0.8rem;
-    color: #666;
-    margin-top: 0.25rem;
-}
 
 .sprint-metrics {
     display: grid;
@@ -330,91 +292,9 @@
     line-height: 1.4;
 }
 
-.loading-spinner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
 
-.spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #007bff;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.error-alert {
-    background: #f8d7da;
-    color: #721c24;
-    padding: 1rem;
-    border-radius: 6px;
-    text-align: center;
-    margin: 1rem 0;
-}
-
-.modal.large .modal-content {
-    max-width: 800px;
-}
-
-.form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.form-group {
-    margin-bottom: 1rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.25rem;
-    font-weight: 500;
-    color: #333;
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
-}
 
 @media (max-width: 768px) {
-    .sprint-header {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .sprint-controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .view-switcher {
-        justify-content: center;
-    }
-    
-    .sprint-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .form-row {
-        grid-template-columns: 1fr;
-    }
-    
     .sprint-metrics {
         grid-template-columns: repeat(2, 1fr);
     }
@@ -536,7 +416,7 @@ class SprintManager {
 
     createSprintCard(sprint) {
         const card = document.createElement('div');
-        card.className = 'sprint-card';
+        card.className = 'management-card sprint-card';
         card.addEventListener('click', () => this.openSprintModal(sprint));
 
         const startDate = new Date(sprint.start_date);
diff --git a/templates/unified_task_management.html b/templates/unified_task_management.html
index b4c803c..177de6d 100644
--- a/templates/unified_task_management.html
+++ b/templates/unified_task_management.html
@@ -1,11 +1,11 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="task-management-container">
+<div class="management-container task-management-container">
     <!-- Header Section -->
-    <div class="task-header">
+    <div class="management-header task-header">
         <h1>📋 Task Management</h1>
-        <div class="task-controls">
+        <div class="management-controls task-controls">
             <!-- View Switcher -->
             <div class="view-switcher">
                 <button class="view-btn active" data-view="all">All Tasks</button>
@@ -66,7 +66,7 @@
             </div>
             
             <!-- Actions -->
-            <div class="task-actions">
+            <div class="management-actions task-actions">
                 <button id="add-task-btn" class="btn btn-primary">+ Add Task</button>
                 <button id="refresh-tasks" class="btn btn-secondary">🔄 Refresh</button>
             </div>
@@ -74,7 +74,7 @@
     </div>
 
     <!-- Task Statistics -->
-    <div class="task-stats">
+    <div class="management-stats task-stats">
         <div class="stat-card">
             <div class="stat-number" id="total-tasks">0</div>
             <div class="stat-label">Total Tasks</div>
@@ -255,58 +255,7 @@
 
 <!-- Styles -->
 <style>
-.task-management-container {
-    padding: 1rem;
-    max-width: 100%;
-    margin: 0 auto;
-}
-
-.task-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.task-header h1 {
-    margin: 0;
-    color: #333;
-}
-
-.task-controls {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.view-switcher {
-    display: flex;
-    background: #f8f9fa;
-    border-radius: 6px;
-    padding: 2px;
-}
-
-.view-btn {
-    padding: 0.5rem 1rem;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.view-btn.active {
-    background: #007bff;
-    color: white;
-}
-
-.view-btn:hover:not(.active) {
-    background: #e9ecef;
-}
-
+/* Task-specific filters */
 .task-filters {
     display: flex;
     gap: 0.5rem;
@@ -344,38 +293,6 @@
     white-space: nowrap;
 }
 
-.task-actions {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.task-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-}
-
-.stat-card {
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1rem;
-    text-align: center;
-}
-
-.stat-number {
-    font-size: 2rem;
-    font-weight: bold;
-    color: #007bff;
-}
-
-.stat-label {
-    font-size: 0.9rem;
-    color: #666;
-    margin-top: 0.25rem;
-}
-
 .kanban-board {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -452,17 +369,6 @@
     font-size: 0.95rem;
 }
 
-.task-priority {
-    padding: 0.125rem 0.375rem;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-
-.task-priority.LOW { background: #d4edda; color: #155724; }
-.task-priority.MEDIUM { background: #fff3cd; color: #856404; }
-.task-priority.HIGH { background: #f8d7da; color: #721c24; }
-.task-priority.URGENT { background: #f5c6cb; color: #721c24; }
 
 .task-project {
     font-size: 0.8rem;
@@ -491,67 +397,7 @@
     font-weight: bold;
 }
 
-.loading-spinner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-}
 
-.spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #007bff;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.error-alert {
-    background: #f8d7da;
-    color: #721c24;
-    padding: 1rem;
-    border-radius: 6px;
-    text-align: center;
-    margin: 1rem 0;
-}
-
-.modal.large .modal-content {
-    max-width: 800px;
-}
-
-.form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.form-group {
-    margin-bottom: 1rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.25rem;
-    font-weight: 500;
-    color: #333;
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
-}
 
 .subtasks-section {
     margin-top: 1.5rem;
@@ -585,27 +431,9 @@
 }
 
 @media (max-width: 768px) {
-    .task-header {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .task-controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .view-switcher {
-        justify-content: center;
-    }
-    
     .kanban-board {
         grid-template-columns: 1fr;
     }
-    
-    .form-row {
-        grid-template-columns: 1fr;
-    }
 }
 </style>
 
@@ -889,7 +717,7 @@ class UnifiedTaskManager {
 
     createTaskCard(task) {
         const card = document.createElement('div');
-        card.className = 'task-card';
+        card.className = 'management-card task-card';
         card.dataset.taskId = task.id;
         card.addEventListener('click', () => this.openTaskModal(task));
 
@@ -899,7 +727,7 @@ class UnifiedTaskManager {
         card.innerHTML = `
             <div class="task-card-header">
                 <h4 class="task-title">${task.name}</h4>
-                <span class="task-priority ${task.priority}">${task.priority}</span>
+                <span class="priority-badge ${task.priority}">${task.priority}</span>
             </div>
             ${task.project_name ? `<div class="task-project">${task.project_code} - ${task.project_name}</div>` : ''}
             <div class="task-meta">