diff --git a/static/css/hover-standards.css b/static/css/hover-standards.css
new file mode 100644
index 0000000..35fb46c
--- /dev/null
+++ b/static/css/hover-standards.css
@@ -0,0 +1,390 @@
+/* ===================================================================
+   TIMETRACK HOVER STANDARDS
+   Consistent hover states based on primary gradient colors
+   Primary: #667eea to #764ba2
+   =================================================================== */
+
+:root {
+    /* Primary gradient colors */
+    --primary-gradient-start: #667eea;
+    --primary-gradient-end: #764ba2;
+    --primary-color: #667eea;
+    
+    /* Hover color variations */
+    --hover-primary: #5569d6;  /* Darker primary for hover */
+    --hover-primary-dark: #4a5bc8;  /* Even darker primary */
+    --hover-secondary: #6a4195;  /* Darker gradient end */
+    
+    /* Background hover colors */
+    --hover-bg-light: rgba(102, 126, 234, 0.05);  /* 5% primary */
+    --hover-bg-medium: rgba(102, 126, 234, 0.1);  /* 10% primary */
+    --hover-bg-strong: rgba(102, 126, 234, 0.15); /* 15% primary */
+    
+    /* Shadow definitions */
+    --hover-shadow-light: 0 2px 4px rgba(102, 126, 234, 0.15);
+    --hover-shadow-medium: 0 4px 12px rgba(102, 126, 234, 0.2);
+    --hover-shadow-strong: 0 6px 20px rgba(102, 126, 234, 0.25);
+    --hover-shadow-heavy: 0 8px 30px rgba(102, 126, 234, 0.3);
+    
+    /* Transform values */
+    --hover-lift-subtle: translateY(-1px);
+    --hover-lift-small: translateY(-2px);
+    --hover-lift-medium: translateY(-3px);
+    --hover-lift-large: translateY(-5px);
+    
+    /* Transition timing */
+    --hover-transition-fast: all 0.2s ease;
+    --hover-transition-normal: all 0.3s ease;
+    --hover-transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===================================================================
+   GLOBAL HOVER STYLES
+   =================================================================== */
+
+/* All links */
+a {
+    transition: var(--hover-transition-fast);
+}
+
+a:hover {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+/* ===================================================================
+   BUTTON HOVER STYLES
+   =================================================================== */
+
+/* Base button hover */
+.btn {
+    transition: var(--hover-transition-normal);
+}
+
+.btn:hover {
+    transform: var(--hover-lift-subtle);
+    box-shadow: var(--hover-shadow-light);
+}
+
+/* Primary button with gradient */
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, var(--hover-primary) 0%, var(--hover-secondary) 100%);
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    border-color: var(--hover-primary);
+}
+
+/* Secondary button */
+.btn-secondary:hover {
+    background-color: var(--hover-bg-medium);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    transform: var(--hover-lift-subtle);
+    box-shadow: var(--hover-shadow-light);
+}
+
+/* Success button - maintain green but with consistent effects */
+.btn-success:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    filter: brightness(0.9);
+}
+
+/* Danger button - maintain red but with consistent effects */
+.btn-danger:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    filter: brightness(0.9);
+}
+
+/* Outline buttons */
+.btn-outline:hover {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+    transform: var(--hover-lift-subtle);
+    box-shadow: var(--hover-shadow-light);
+}
+
+/* Small buttons */
+.btn-sm:hover {
+    transform: var(--hover-lift-subtle);
+    box-shadow: var(--hover-shadow-light);
+}
+
+/* ===================================================================
+   NAVIGATION HOVER STYLES
+   =================================================================== */
+
+/* Sidebar */
+.sidebar {
+    transition: var(--hover-transition-normal);
+}
+
+.sidebar:hover {
+    box-shadow: var(--hover-shadow-heavy);
+}
+
+/* Sidebar navigation items */
+.sidebar-nav li a {
+    transition: var(--hover-transition-fast);
+}
+
+.sidebar-nav li a:hover {
+    background-color: var(--hover-bg-medium);
+    border-left-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+/* Active state should be stronger */
+.sidebar-nav li.active a {
+    background-color: var(--hover-bg-strong);
+    border-left-color: var(--primary-gradient-end);
+    color: var(--primary-gradient-end);
+}
+
+/* Top navigation */
+.navbar-nav .nav-link:hover {
+    color: var(--primary-color);
+    background-color: var(--hover-bg-light);
+    border-radius: 4px;
+}
+
+/* Dropdown items */
+.dropdown-item:hover {
+    background-color: var(--hover-bg-medium);
+    color: var(--primary-color);
+}
+
+/* ===================================================================
+   CARD & PANEL HOVER STYLES
+   =================================================================== */
+
+/* Base card hover */
+.card,
+.panel,
+.dashboard-card,
+.admin-card,
+.stat-card {
+    transition: var(--hover-transition-normal);
+}
+
+.card:hover,
+.panel:hover,
+.dashboard-card:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+}
+
+/* Clickable cards get stronger effect */
+.admin-card:hover,
+.clickable-card:hover {
+    transform: var(--hover-lift-medium);
+    box-shadow: var(--hover-shadow-strong);
+    cursor: pointer;
+}
+
+/* Stat cards */
+.stat-card:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    border-color: var(--hover-bg-strong);
+}
+
+/* Management cards */
+.management-card {
+    transition: var(--hover-transition-normal);
+}
+
+.management-card:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    border-color: var(--hover-bg-medium);
+}
+
+/* ===================================================================
+   TABLE HOVER STYLES
+   =================================================================== */
+
+/* Table rows */
+.table tbody tr,
+.data-table tbody tr,
+.time-history tbody tr {
+    transition: var(--hover-transition-fast);
+}
+
+.table tbody tr:hover,
+.data-table tbody tr:hover,
+.time-history tbody tr:hover {
+    background-color: var(--hover-bg-light);
+}
+
+/* Clickable rows get pointer */
+.clickable-row:hover {
+    cursor: pointer;
+    background-color: var(--hover-bg-medium);
+}
+
+/* ===================================================================
+   FORM ELEMENT HOVER STYLES
+   =================================================================== */
+
+/* Input fields */
+.form-control,
+.form-select {
+    transition: var(--hover-transition-fast);
+}
+
+.form-control:hover:not(:focus),
+.form-select:hover:not(:focus) {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 1px var(--hover-bg-light);
+}
+
+/* Checkboxes and radios */
+.form-check-input:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--hover-bg-medium);
+}
+
+/* ===================================================================
+   ICON HOVER STYLES
+   =================================================================== */
+
+/* Icon buttons */
+.icon-btn {
+    transition: var(--hover-transition-fast);
+}
+
+.icon-btn:hover {
+    color: var(--primary-color);
+    background-color: var(--hover-bg-medium);
+    border-radius: 50%;
+}
+
+/* Action icons */
+.action-icon:hover {
+    color: var(--primary-color);
+    transform: scale(1.1);
+}
+
+/* ===================================================================
+   SPECIAL COMPONENT HOVER STYLES
+   =================================================================== */
+
+/* Task cards */
+.task-card {
+    transition: var(--hover-transition-normal);
+}
+
+.task-card:hover {
+    transform: var(--hover-lift-subtle);
+    box-shadow: var(--hover-shadow-medium);
+    border-left-color: var(--primary-color);
+}
+
+/* Note cards */
+.note-card:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    border-color: var(--hover-bg-strong);
+}
+
+/* Export sections */
+.export-section:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-strong);
+}
+
+/* Widget hover */
+.widget:hover {
+    transform: var(--hover-lift-small);
+    box-shadow: var(--hover-shadow-medium);
+    border-color: var(--hover-bg-medium);
+}
+
+/* Mode buttons */
+.mode-btn:hover:not(.active) {
+    background-color: var(--hover-bg-medium);
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+/* Tab buttons */
+.tab-btn:hover:not(.active) {
+    background-color: var(--hover-bg-light);
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+}
+
+/* ===================================================================
+   UTILITY HOVER CLASSES
+   =================================================================== */
+
+/* Add these classes to elements for consistent hover effects */
+.hover-lift:hover {
+    transform: var(--hover-lift-small);
+}
+
+.hover-lift-large:hover {
+    transform: var(--hover-lift-large);
+}
+
+.hover-shadow:hover {
+    box-shadow: var(--hover-shadow-medium);
+}
+
+.hover-shadow-strong:hover {
+    box-shadow: var(--hover-shadow-strong);
+}
+
+.hover-bg:hover {
+    background-color: var(--hover-bg-medium);
+}
+
+.hover-primary:hover {
+    color: var(--primary-color);
+}
+
+.hover-scale:hover {
+    transform: scale(1.05);
+}
+
+.hover-brightness:hover {
+    filter: brightness(1.1);
+}
+
+/* ===================================================================
+   ANIMATION UTILITIES
+   =================================================================== */
+
+/* Smooth all transitions */
+.smooth-transition {
+    transition: var(--hover-transition-smooth);
+}
+
+/* Quick transitions for responsive feel */
+.quick-transition {
+    transition: var(--hover-transition-fast);
+}
+
+/* Disable transitions on request */
+.no-transition {
+    transition: none !important;
+}
+
+/* ===================================================================
+   DARK MODE ADJUSTMENTS (if applicable)
+   =================================================================== */
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --hover-bg-light: rgba(102, 126, 234, 0.1);
+        --hover-bg-medium: rgba(102, 126, 234, 0.2);
+        --hover-bg-strong: rgba(102, 126, 234, 0.3);
+    }
+}
\ No newline at end of file
diff --git a/static/css/splash.css b/static/css/splash.css
index d4da092..5531572 100644
--- a/static/css/splash.css
+++ b/static/css/splash.css
@@ -64,15 +64,15 @@
 }
 
 .btn-primary {
-    background: #4CAF50;
+    background: #667eea;
     color: white;
     box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
 }
 
 .btn-primary:hover {
-    background: #45a049;
+    background: linear-gradient(135deg, #5569d6 0%, #6a4195 100%);
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
 }
 
 .btn-secondary {
@@ -83,7 +83,9 @@
 
 .btn-secondary:hover {
     background: white;
-    color: #2a5298;
+    color: #667eea;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
 }
 
 /* Floating Clock Animation */
@@ -135,7 +137,7 @@
     width: 2px;
     height: 110px;
     margin-left: -1px;
-    background: #4CAF50;
+    background: #667eea;
     animation: rotate 60s linear infinite;
 }
 
@@ -171,8 +173,8 @@
 }
 
 .feature-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
 }
 
 .feature-icon {
@@ -329,7 +331,7 @@
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
-    background: #4CAF50;
+    background: #667eea;
     color: white;
     padding: 0.5rem 1.5rem;
     border-radius: 20px;
@@ -375,7 +377,7 @@
 .btn-pricing {
     display: inline-block;
     padding: 1rem 2rem;
-    background: #4CAF50;
+    background: #667eea;
     color: white;
     text-decoration: none;
     border-radius: 6px;
@@ -385,8 +387,9 @@
 }
 
 .btn-pricing:hover {
-    background: #45a049;
+    background: linear-gradient(135deg, #5569d6 0%, #6a4195 100%);
     transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
 }
 
 .pricing-card.featured .btn-pricing {
@@ -394,7 +397,8 @@
 }
 
 .pricing-card.featured .btn-pricing:hover {
-    background: #1e3c72;
+    background: linear-gradient(135deg, #5569d6 0%, #6a4195 100%);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
 }
 
 /* Final CTA */
diff --git a/static/css/style.css b/static/css/style.css
index 77e34a8..730f740 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -112,7 +112,7 @@ button {
 }
 
 .sidebar:hover {
-    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
+    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.15);
 }
 
 /* Custom scrollbar for sidebar */
@@ -169,7 +169,7 @@ button {
 }
 
 .sidebar-header h2 a:hover {
-    color: #4CAF50;
+    color: #667eea;
 }
 
 .sidebar-header small {
@@ -229,14 +229,14 @@ button {
 
 .sidebar-nav li a:hover {
     background-color: #e9ecef;
-    border-left-color: #4CAF50;
+    border-left-color: #667eea;
     color: #333;
 }
 
 .sidebar-nav li a.active {
-    background-color: #e8f5e9;
-    border-left-color: #4CAF50;
-    color: #2e7d32;
+    background-color: rgba(102, 126, 234, 0.1);
+    border-left-color: #667eea;
+    color: #5569d6;
     font-weight: 600;
 }
 
@@ -366,7 +366,7 @@ body:has(.sidebar.collapsed) .main-content {
 }
 
 .feature h3 {
-    color: #4CAF50;
+    color: #667eea;
     margin-top: 0;
 }
 
@@ -457,8 +457,10 @@ button {
 }
 
 .btn-primary:hover {
-    background-color: #0056b3;
-    border-color: #0056b3;
+    background-color: #5569d6;
+    border-color: #5569d6;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
 }
 
 .btn-secondary {
@@ -470,6 +472,8 @@ button {
 .btn-secondary:hover {
     background-color: #545b62;
     border-color: #545b62;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 .btn-success {
@@ -481,6 +485,8 @@ button {
 .btn-success:hover {
     background-color: #218838;
     border-color: #218838;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 .btn-danger {
@@ -492,6 +498,8 @@ button {
 .btn-danger:hover {
     background-color: #c82333;
     border-color: #c82333;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 .btn-warning {
@@ -503,6 +511,8 @@ button {
 .btn-warning:hover {
     background-color: #e0a800;
     border-color: #e0a800;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 .btn-info {
@@ -514,6 +524,8 @@ button {
 .btn-info:hover {
     background-color: #138496;
     border-color: #138496;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 /* Button Outline Variants */
@@ -524,8 +536,11 @@ button {
 }
 
 .btn-outline:hover {
-    background-color: #007bff;
+    background-color: #667eea;
     color: white;
+    border-color: #667eea;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
 }
 
 /* Special Button Styles */
@@ -539,7 +554,9 @@ button {
 
 .btn-filter:hover {
     background-color: #f8f9fa;
-    border-color: #adb5bd;
+    border-color: #667eea;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
 }
 
 .btn-filter.active {
@@ -551,7 +568,7 @@ button {
 /* Generic Button Hover */
 .btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
 }
 
 footer {
@@ -600,7 +617,7 @@ footer {
 }
 
 .footer-links a:hover {
-    color: var(--primary-color);
+    color: #667eea;
 }
 
 .footer-separator {
@@ -662,8 +679,8 @@ footer {
 }
 
 .email-nag-dismiss:hover {
-    background-color: rgba(0,0,0,0.1);
-    color: #333;
+    background-color: rgba(102, 126, 234, 0.1);
+    color: #5569d6;
 }
 
 @keyframes slideDown {
@@ -748,7 +765,9 @@ body:has(.sidebar.collapsed) footer {
 }
 
 .arrive-btn:hover {
-    background-color: #45a049;
+    background-color: #667eea;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
 }
 
 .leave-btn {
@@ -760,6 +779,8 @@ body:has(.sidebar.collapsed) footer {
 
 .leave-btn:hover {
     background-color: #d32f2f;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 .time-history {
@@ -788,7 +809,7 @@ body:has(.sidebar.collapsed) footer {
 }
 
 .time-history tr:hover {
-    background-color: #f5f5f5;
+    background-color: rgba(102, 126, 234, 0.05);
 }
 
 .button-group {
@@ -807,6 +828,8 @@ body:has(.sidebar.collapsed) footer {
 
 .pause-btn:hover {
     background-color: #f57c00;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
 }
 
 .resume-btn {
@@ -817,7 +840,9 @@ body:has(.sidebar.collapsed) footer {
 }
 
 .resume-btn:hover {
-    background-color: #1976D2;
+    background-color: #667eea;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
 }
 
 .break-info {
@@ -971,7 +996,9 @@ body:has(.sidebar.collapsed) footer {
 }
 
 .edit-entry-btn:hover {
-    background-color: #0b7dda;
+    background-color: #667eea;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
 }
 
 .delete-entry-btn {
@@ -981,6 +1008,8 @@ body:has(.sidebar.collapsed) footer {
 
 .delete-entry-btn:hover {
     background-color: #d32f2f;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
 }
 
 input[type="date"], input[type="time"] {
@@ -1037,8 +1066,8 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .admin-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.15);
 }
 
 .admin-card h2 {
@@ -1113,11 +1142,11 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .checkbox-container:hover input ~ .checkmark {
-    background-color: #ccc;
+    background-color: rgba(102, 126, 234, 0.15);
 }
 
 .checkbox-container input:checked ~ .checkmark {
-    background-color: #2196F3;
+    background-color: #667eea;
 }
 
 .checkmark:after {
@@ -1171,7 +1200,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .data-table tr:hover {
-    background-color: #f5f5f5;
+    background-color: rgba(102, 126, 234, 0.05);
 }
 
 /* Team Hours Page Styles */
@@ -1266,16 +1295,16 @@ input[type="time"]::-webkit-datetime-edit {
 
 .export-section:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
 }
 
 .export-section h3 {
-    color: #4CAF50;
+    color: #667eea;
     margin-top: 0;
     margin-bottom: 1.5rem;
     font-size: 1.3rem;
     font-weight: 600;
-    border-bottom: 2px solid #4CAF50;
+    border-bottom: 2px solid #667eea;
     padding-bottom: 0.5rem;
 }
 
@@ -1296,7 +1325,7 @@ input[type="time"]::-webkit-datetime-edit {
 
 .quick-export-buttons .btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
+    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
 }
 
 .export-button-container {
@@ -1305,7 +1334,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .export-button-container .btn {
-    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 1rem 2rem;
     font-size: 1.1rem;
@@ -1314,13 +1343,13 @@ input[type="time"]::-webkit-datetime-edit {
     display: inline-block;
     transition: all 0.2s ease;
     font-weight: 600;
-    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
 }
 
 .export-button-container .btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
-    background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }
 
 /* Custom date range form styling */
@@ -1348,8 +1377,8 @@ input[type="time"]::-webkit-datetime-edit {
 .export-section .form-group input:focus,
 .export-section .form-group select:focus {
     outline: none;
-    border-color: #4CAF50;
-    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 /* Team Hours Export Styling */
@@ -1364,7 +1393,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 #export-buttons h4 {
-    color: #4CAF50;
+    color: #667eea;
     margin-bottom: 1rem;
     font-size: 1.2rem;
     font-weight: 600;
@@ -1387,7 +1416,7 @@ input[type="time"]::-webkit-datetime-edit {
 
 #export-buttons .quick-export-buttons .btn:hover {
     transform: translateY(-1px);
-    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
+    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
 }
 /* Responsive Design for Sidebar Navigation */
 @media (max-width: 1024px) {
@@ -1528,14 +1557,14 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .mode-btn.active {
-    background: #4CAF50;
+    background: #667eea;
     color: white;
-    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
 }
 
 .mode-btn:hover:not(.active) {
-    background: #e9ecef;
-    color: #495057;
+    background: rgba(102, 126, 234, 0.1);
+    color: #5569d6;
 }
 
 .filter-panel {
@@ -1579,8 +1608,8 @@ input[type="time"]::-webkit-datetime-edit {
 .filter-group input:focus,
 .filter-group select:focus {
     outline: none;
-    border-color: #4CAF50;
-    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 .view-tabs {
@@ -1603,14 +1632,14 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .tab-btn.active {
-    color: #4CAF50;
-    border-bottom-color: #4CAF50;
-    background: rgba(76, 175, 80, 0.05);
+    color: #667eea;
+    border-bottom-color: #667eea;
+    background: rgba(102, 126, 234, 0.05);
 }
 
 .tab-btn:hover:not(.active) {
-    color: #495057;
-    background: rgba(0, 0, 0, 0.05);
+    color: #5569d6;
+    background: rgba(102, 126, 234, 0.05);
 }
 
 .view-content {
@@ -1700,7 +1729,7 @@ input[type="time"]::-webkit-datetime-edit {
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     text-align: center;
-    border-left: 4px solid #4CAF50;
+    border-left: 4px solid #667eea;
 }
 
 .stat-card h4 {
@@ -1796,8 +1825,8 @@ input[type="time"]::-webkit-datetime-edit {
 .form-group textarea:focus,
 .form-group select:focus {
     outline: none;
-    border-color: #4CAF50;
-    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 /* Responsive Design for Analytics */
@@ -2031,7 +2060,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .view-btn:hover:not(.active) {
-    background: #e9ecef;
+    background: rgba(102, 126, 234, 0.1);
 }
 
 /* Statistics Cards */
@@ -2165,7 +2194,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .management-card:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
     transform: translateY(-2px);
 }
 
@@ -2289,7 +2318,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .card:hover {
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
 }
 
 .card-header {
@@ -2362,7 +2391,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .widget:hover {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
 }
 
 .widget-header {
@@ -2549,8 +2578,8 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .user-dropdown-toggle:hover {
-    background-color: #e9ecef;
-    color: #333;
+    background-color: rgba(102, 126, 234, 0.1);
+    color: #5569d6;
 }
 
 /* Removed nav-icon style as we're using avatar instead */
@@ -2643,7 +2672,7 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .user-dropdown-menu a:hover {
-    background-color: #f0f0f0;
+    background-color: rgba(102, 126, 234, 0.1);
 }
 
 .user-dropdown-menu .nav-icon {
diff --git a/static/css/time-tracking.css b/static/css/time-tracking.css
new file mode 100644
index 0000000..14a042c
--- /dev/null
+++ b/static/css/time-tracking.css
@@ -0,0 +1,770 @@
+/* Time Tracking Styles */
+
+/* Container */
+.time-tracking-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* Page Header - reuse existing styles */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 2rem;
+    color: white;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.page-icon {
+    font-size: 2.5rem;
+    display: inline-block;
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.page-subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin: 0.5rem 0 0 0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+/* Timer Section */
+.timer-section {
+    margin-bottom: 2rem;
+}
+
+.timer-card {
+    background: white;
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
+}
+
+.timer-card.active {
+    border: 2px solid #10b981;
+    background: linear-gradient(135deg, #10b98110 0%, #059b6910 100%);
+}
+
+.timer-display {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.timer-value {
+    font-size: 4rem;
+    font-weight: 700;
+    color: #1f2937;
+    font-family: 'Monaco', 'Courier New', monospace;
+    letter-spacing: 0.1em;
+}
+
+.timer-status {
+    margin-top: 0.5rem;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.status-badge.active {
+    background: #10b981;
+    color: white;
+}
+
+.status-badge.paused {
+    background: #f59e0b;
+    color: white;
+}
+
+.timer-info {
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    font-weight: 600;
+    color: #6b7280;
+}
+
+.info-value {
+    color: #1f2937;
+}
+
+.project-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 16px;
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.task-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: #e5e7eb;
+    border-radius: 8px;
+    font-size: 0.875rem;
+}
+
+.timer-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+/* Start Work Form */
+.start-work-container {
+    text-align: center;
+}
+
+.start-work-container h2 {
+    font-size: 1.75rem;
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+}
+
+.start-work-container p {
+    color: #6b7280;
+    margin-bottom: 2rem;
+}
+
+.modern-form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-label {
+    font-weight: 600;
+    color: #374151;
+    font-size: 0.95rem;
+}
+
+.optional-badge {
+    background: #e5e7eb;
+    color: #6b7280;
+    padding: 0.125rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+}
+
+.form-control {
+    padding: 0.75rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+    background-color: #f9fafb;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: #667eea;
+    background-color: white;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-actions {
+    margin-top: 1.5rem;
+}
+
+/* Stats Section */
+.stats-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 12px;
+    text-align: center;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #667eea;
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+/* Entries Section */
+.entries-section {
+    background: white;
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.section-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.view-toggle {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.toggle-btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid #e5e7eb;
+    background: white;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 500;
+}
+
+.toggle-btn.active {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+}
+
+.view-container {
+    display: none;
+}
+
+.view-container.active {
+    display: block;
+}
+
+/* Table Styles */
+.entries-table-container {
+    overflow-x: auto;
+}
+
+.entries-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.entries-table th {
+    text-align: left;
+    padding: 1rem;
+    border-bottom: 2px solid #e5e7eb;
+    font-weight: 600;
+    color: #374151;
+    background: #f8f9fa;
+}
+
+.entries-table td {
+    padding: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.entry-row:hover {
+    background: #f8f9fa;
+}
+
+.date-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.date-day {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.date-month {
+    font-size: 0.875rem;
+    color: #6b7280;
+    text-transform: uppercase;
+}
+
+.time-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: 'Monaco', 'Courier New', monospace;
+}
+
+.time-separator {
+    color: #9ca3af;
+}
+
+.project-task-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.project-tag {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.task-name,
+.project-name {
+    color: #374151;
+}
+
+.no-project {
+    color: #9ca3af;
+    font-style: italic;
+}
+
+.duration-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: #ede9fe;
+    color: #5b21b6;
+    border-radius: 16px;
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+.break-duration {
+    color: #6b7280;
+}
+
+.notes-preview {
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+
+.actions-cell {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Specific button hover states */
+.btn-icon.resume-work-btn:hover:not(:disabled) {
+    color: #10b981;
+    border-color: #10b981;
+    background: #f0fdf4;
+}
+
+.btn-icon.edit-entry-btn:hover {
+    color: #667eea;
+    border-color: #667eea;
+    background: #f3f4f6;
+}
+
+.btn-icon.delete-entry-btn:hover {
+    color: #ef4444;
+    border-color: #ef4444;
+    background: #fef2f2;
+}
+
+/* Grid View */
+.entries-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+}
+
+.entry-card {
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 1.5rem;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s ease;
+}
+
+.entry-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+.entry-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.entry-date {
+    font-weight: 600;
+    color: #374151;
+}
+
+.entry-duration {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #667eea;
+}
+
+.entry-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.entry-project {
+    padding-left: 1rem;
+    border-left: 4px solid;
+}
+
+.entry-task,
+.entry-time,
+.entry-notes {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+
+.entry-footer {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e5e7eb;
+}
+
+/* Buttons */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+}
+
+.btn-large {
+    padding: 1rem 2rem;
+    font-size: 1.125rem;
+}
+
+.btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.btn-icon {
+    padding: 0.5rem;
+    border: 1px solid #e5e7eb;
+    background: white;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #6b7280;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+}
+
+.btn-icon:hover {
+    background: #f3f4f6;
+    transform: translateY(-2px);
+    color: #374151;
+}
+
+.btn-icon:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-icon:disabled:hover {
+    transform: none;
+    background: white;
+    color: #6b7280;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+    background: white;
+    color: #4b5563;
+    border: 2px solid #e5e7eb;
+}
+
+.btn-secondary:hover {
+    background: #f3f4f6;
+}
+
+.btn-success {
+    background: #10b981;
+    color: white;
+}
+
+.btn-success:hover {
+    background: #059669;
+    transform: translateY(-2px);
+}
+
+.btn-warning {
+    background: #f59e0b;
+    color: white;
+}
+
+.btn-warning:hover {
+    background: #d97706;
+    transform: translateY(-2px);
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+    transform: translateY(-2px);
+}
+
+.btn-ghost {
+    background: transparent;
+    color: #6b7280;
+}
+
+.btn-ghost:hover {
+    color: #374151;
+    background: #f3f4f6;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+}
+
+.empty-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.empty-state h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+}
+
+.empty-state p {
+    color: #6b7280;
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+}
+
+.modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    position: relative;
+    background: white;
+    border-radius: 16px;
+    max-width: 600px;
+    margin: 5vh auto;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+}
+
+.modal-small {
+    max-width: 400px;
+}
+
+.modal-header {
+    padding: 2rem;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #6b7280;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: #f3f4f6;
+    color: #1f2937;
+}
+
+.modal-body {
+    padding: 2rem;
+}
+
+.modal-footer {
+    padding: 1.5rem 2rem;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .time-tracking-container {
+        padding: 1rem;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .timer-value {
+        font-size: 3rem;
+    }
+    
+    .entries-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .entries-table {
+        font-size: 0.875rem;
+    }
+    
+    .entries-table th,
+    .entries-table td {
+        padding: 0.5rem;
+    }
+}
\ No newline at end of file
diff --git a/templates/_time_tracking_interface.html b/templates/_time_tracking_interface.html
new file mode 100644
index 0000000..b6f6eec
--- /dev/null
+++ b/templates/_time_tracking_interface.html
@@ -0,0 +1,356 @@
+<!-- Time Tracking Interface - Shared Component -->
+<div class="time-tracking-container">
+    <!-- Header Section -->
+    <div class="page-header">
+        <div class="header-content">
+            <div class="header-left">
+                <h1 class="page-title">
+                    <i class="ti ti-clock page-icon"></i>
+                    Time Tracking
+                </h1>
+                <p class="page-subtitle">Track your work hours efficiently</p>
+            </div>
+            <div class="header-actions">
+                <button id="manual-entry-btn" class="btn btn-secondary">
+                    <i class="ti ti-pencil"></i>
+                    Manual Entry
+                </button>
+                <a href="{{ url_for('analytics') }}" class="btn btn-secondary">
+                    <i class="ti ti-chart-bar"></i>
+                    View Analytics
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Timer Section -->
+    <div class="timer-section">
+        {% if active_entry %}
+        <!-- Active Timer -->
+        <div class="timer-card active">
+            <div class="timer-display">
+                <div class="timer-value" id="timer"
+                     data-start="{{ active_entry.arrival_time.timestamp() }}"
+                     data-breaks="{{ active_entry.total_break_duration }}"
+                     data-paused="{{ 'true' if active_entry.is_paused else 'false' }}">
+                    00:00:00
+                </div>
+                <div class="timer-status">
+                    {% if active_entry.is_paused %}
+                        <span class="status-badge paused">On Break</span>
+                    {% else %}
+                        <span class="status-badge active">Working</span>
+                    {% endif %}
+                </div>
+            </div>
+            
+            <div class="timer-info">
+                <div class="info-row">
+                    <span class="info-label">Started:</span>
+                    <span class="info-value">{{ active_entry.arrival_time|format_datetime }}</span>
+                </div>
+                
+                {% if active_entry.project %}
+                <div class="info-row">
+                    <span class="info-label">Project:</span>
+                    <span class="info-value project-badge" style="background-color: {{ active_entry.project.color or '#667eea' }}">
+                        {{ active_entry.project.code }} - {{ active_entry.project.name }}
+                    </span>
+                </div>
+                {% endif %}
+                
+                {% if active_entry.task %}
+                <div class="info-row">
+                    <span class="info-label">Task:</span>
+                    <span class="info-value task-badge">
+                        {{ active_entry.task.title }}
+                    </span>
+                </div>
+                {% endif %}
+                
+                {% if active_entry.notes %}
+                <div class="info-row">
+                    <span class="info-label">Notes:</span>
+                    <span class="info-value">{{ active_entry.notes }}</span>
+                </div>
+                {% endif %}
+                
+                {% if active_entry.is_paused %}
+                <div class="info-row">
+                    <span class="info-label">Break started:</span>
+                    <span class="info-value">{{ active_entry.pause_start_time|format_time }}</span>
+                </div>
+                {% endif %}
+                
+                {% if active_entry.total_break_duration > 0 %}
+                <div class="info-row">
+                    <span class="info-label">Total breaks:</span>
+                    <span class="info-value">{{ active_entry.total_break_duration|format_duration }}</span>
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="timer-actions">
+                <button id="pause-btn" class="btn {% if active_entry.is_paused %}btn-success{% else %}btn-warning{% endif %}" 
+                        data-id="{{ active_entry.id }}">
+                    {% if active_entry.is_paused %}
+                        <i class="ti ti-player-play"></i>
+                        Resume Work
+                    {% else %}
+                        <i class="ti ti-player-pause"></i>
+                        Take Break
+                    {% endif %}
+                </button>
+                <button id="leave-btn" class="btn btn-danger" data-id="{{ active_entry.id }}">
+                    <i class="ti ti-player-stop"></i>
+                    Stop Working
+                </button>
+            </div>
+        </div>
+        {% else %}
+        <!-- Inactive Timer -->
+        <div class="timer-card inactive">
+            <div class="start-work-container">
+                <h2>Start Tracking Time</h2>
+                <p>Select a project and task to begin tracking your work</p>
+                
+                <form id="start-work-form" class="modern-form">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="project-select" class="form-label">
+                                Project <span class="optional-badge">Optional</span>
+                            </label>
+                            <select id="project-select" name="project_id" class="form-control">
+                                <option value="">No specific project</option>
+                                {% for project in available_projects %}
+                                <option value="{{ project.id }}" data-color="{{ project.color or '#667eea' }}">
+                                    {{ project.code }} - {{ project.name }}
+                                </option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="task-select" class="form-label">
+                                Task <span class="optional-badge">Optional</span>
+                            </label>
+                            <select id="task-select" name="task_id" class="form-control" disabled>
+                                <option value="">Select a project first</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="work-notes" class="form-label">
+                            Notes <span class="optional-badge">Optional</span>
+                        </label>
+                        <textarea id="work-notes" name="notes" class="form-control" 
+                                  rows="2" placeholder="What are you working on?"></textarea>
+                    </div>
+                    
+                    <div class="form-actions">
+                        <button type="submit" id="arrive-btn" class="btn btn-primary btn-large">
+                            <i class="ti ti-player-play"></i>
+                            Start Working
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+
+    <!-- Quick Stats -->
+    <div class="stats-section">
+        <div class="stat-card">
+            <div class="stat-value">{{ today_hours|format_duration }}</div>
+            <div class="stat-label">Today</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value">{{ week_hours|format_duration }}</div>
+            <div class="stat-label">This Week</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value">{{ month_hours|format_duration }}</div>
+            <div class="stat-label">This Month</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value">{{ active_projects|length }}</div>
+            <div class="stat-label">Active Projects</div>
+        </div>
+    </div>
+
+    <!-- Recent Entries -->
+    <div class="entries-section">
+        <div class="section-header">
+            <h2 class="section-title">
+                <i class="ti ti-clipboard-list"></i>
+                Recent Time Entries
+            </h2>
+            <div class="view-toggle">
+                <button class="toggle-btn active" data-view="list">
+                    <i class="ti ti-list"></i>
+                    List
+                </button>
+                <button class="toggle-btn" data-view="grid">
+                    <i class="ti ti-layout-grid"></i>
+                    Grid
+                </button>
+            </div>
+        </div>
+
+        <!-- List View -->
+        <div id="list-view" class="view-container active">
+            {% if history %}
+            <div class="entries-table-container">
+                <table class="entries-table">
+                    <thead>
+                        <tr>
+                            <th>Date</th>
+                            <th>Time</th>
+                            <th>Project / Task</th>
+                            <th>Duration</th>
+                            <th>Break</th>
+                            <th>Notes</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for entry in history %}
+                        <tr data-entry-id="{{ entry.id }}" class="entry-row">
+                            <td>
+                                <div class="date-cell">
+                                    <span class="date-day">{{ entry.arrival_time.strftime('%d') }}</span>
+                                    <span class="date-month">{{ entry.arrival_time.strftime('%b') }}</span>
+                                </div>
+                            </td>
+                            <td>
+                                <div class="time-cell">
+                                    <span class="time-start">{{ entry.arrival_time|format_time }}</span>
+                                    <span class="time-separator"><i class="ti ti-arrow-right"></i></span>
+                                    <span class="time-end">{{ entry.departure_time|format_time if entry.departure_time else 'Active' }}</span>
+                                </div>
+                            </td>
+                            <td>
+                                <div class="project-task-cell">
+                                    {% if entry.project %}
+                                    <span class="project-tag" style="background-color: {{ entry.project.color or '#667eea' }}">
+                                        {{ entry.project.code }}
+                                    </span>
+                                    {% endif %}
+                                    {% if entry.task %}
+                                    <span class="task-name">{{ entry.task.title }}</span>
+                                    {% elif entry.project %}
+                                    <span class="project-name">{{ entry.project.name }}</span>
+                                    {% else %}
+                                    <span class="no-project">No project</span>
+                                    {% endif %}
+                                </div>
+                            </td>
+                            <td>
+                                <span class="duration-badge">
+                                    {{ entry.duration|format_duration if entry.duration is not none else 'In progress' }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="break-duration">
+                                    {{ entry.total_break_duration|format_duration if entry.total_break_duration else '-' }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="notes-preview" title="{{ entry.notes or '' }}">
+                                    {{ entry.notes[:30] + '...' if entry.notes and entry.notes|length > 30 else entry.notes or '-' }}
+                                </span>
+                            </td>
+                            <td>
+                                <div class="actions-cell">
+                                    {% if entry.departure_time and not active_entry %}
+                                        {% if entry.arrival_time.date() >= today %}
+                                    <button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Resume">
+                                        <i class="ti ti-refresh"></i>
+                                    </button>
+                                        {% else %}
+                                    <button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Cannot resume entries from previous days" disabled style="opacity: 0.5; cursor: not-allowed;">
+                                        <i class="ti ti-refresh"></i>
+                                    </button>
+                                        {% endif %}
+                                    {% endif %}
+                                    <button class="btn-icon edit-entry-btn" data-id="{{ entry.id }}" title="Edit">
+                                        <i class="ti ti-pencil"></i>
+                                    </button>
+                                    <button class="btn-icon delete-entry-btn" data-id="{{ entry.id }}" title="Delete">
+                                        <i class="ti ti-trash"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <div class="empty-state">
+                <div class="empty-icon"><i class="ti ti-mail-opened" style="font-size: 4rem;"></i></div>
+                <h3>No time entries yet</h3>
+                <p>Start tracking your time to see entries here</p>
+            </div>
+            {% endif %}
+        </div>
+
+        <!-- Grid View -->
+        <div id="grid-view" class="view-container">
+            <div class="entries-grid">
+                {% for entry in history %}
+                <div class="entry-card" data-entry-id="{{ entry.id }}">
+                    <div class="entry-header">
+                        <div class="entry-date">
+                            {{ entry.arrival_time.strftime('%d %b %Y') }}
+                        </div>
+                        <div class="entry-duration">
+                            {{ entry.duration|format_duration if entry.duration is not none else 'Active' }}
+                        </div>
+                    </div>
+                    
+                    <div class="entry-body">
+                        {% if entry.project %}
+                        <div class="entry-project" style="border-left-color: {{ entry.project.color or '#667eea' }}">
+                            <strong>{{ entry.project.code }}</strong> - {{ entry.project.name }}
+                        </div>
+                        {% endif %}
+                        
+                        {% if entry.task %}
+                        <div class="entry-task">
+                            <i class="ti ti-clipboard-list"></i> {{ entry.task.title }}
+                        </div>
+                        {% endif %}
+                        
+                        <div class="entry-time">
+                            <i class="ti ti-clock"></i>
+                            {{ entry.arrival_time|format_time }} - {{ entry.departure_time|format_time if entry.departure_time else 'Active' }}
+                        </div>
+                        
+                        {% if entry.notes %}
+                        <div class="entry-notes">
+                            <i class="ti ti-notes"></i>
+                            {{ entry.notes }}
+                        </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="entry-footer">
+                        <button class="btn-sm edit-entry-btn" data-id="{{ entry.id }}">Edit</button>
+                        <button class="btn-sm btn-danger delete-entry-btn" data-id="{{ entry.id }}">Delete</button>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modals -->
+{% include '_time_tracking_modals.html' %}
+
+<!-- Scripts -->
+<script src="{{ url_for('static', filename='js/timer.js') }}"></script>
+<script src="{{ url_for('static', filename='js/time-tracking.js') }}"></script>
\ No newline at end of file
diff --git a/templates/_time_tracking_modals.html b/templates/_time_tracking_modals.html
new file mode 100644
index 0000000..5d157d5
--- /dev/null
+++ b/templates/_time_tracking_modals.html
@@ -0,0 +1,146 @@
+<!-- Time Tracking Modals -->
+
+<!-- Edit Entry Modal -->
+<div id="edit-modal" class="modal">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3 class="modal-title">Edit Time Entry</h3>
+            <button class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <form id="edit-entry-form" class="modern-form">
+                <input type="hidden" id="edit-entry-id">
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="edit-arrival-date" class="form-label">Start Date</label>
+                        <input type="date" id="edit-arrival-date" class="form-control" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-arrival-time" class="form-label">Start Time</label>
+                        <input type="time" id="edit-arrival-time" class="form-control" required step="60">
+                    </div>
+                </div>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="edit-departure-date" class="form-label">End Date</label>
+                        <input type="date" id="edit-departure-date" class="form-control">
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-departure-time" class="form-label">End Time</label>
+                        <input type="time" id="edit-departure-time" class="form-control" step="60">
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="edit-project" class="form-label">Project</label>
+                    <select id="edit-project" class="form-control">
+                        <option value="">No specific project</option>
+                        {% for project in available_projects %}
+                        <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="edit-notes" class="form-label">Notes</label>
+                    <textarea id="edit-notes" class="form-control" rows="3"></textarea>
+                </div>
+                
+                <div class="form-actions">
+                    <button type="submit" class="btn btn-primary">Save Changes</button>
+                    <button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Manual Entry Modal -->
+<div id="manual-modal" class="modal">
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3 class="modal-title">Add Manual Time Entry</h3>
+            <button class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <form id="manual-entry-form" class="modern-form">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="manual-start-date" class="form-label">Start Date</label>
+                        <input type="date" id="manual-start-date" class="form-control" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="manual-start-time" class="form-label">Start Time</label>
+                        <input type="time" id="manual-start-time" class="form-control" required step="60">
+                    </div>
+                </div>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="manual-end-date" class="form-label">End Date</label>
+                        <input type="date" id="manual-end-date" class="form-control" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="manual-end-time" class="form-label">End Time</label>
+                        <input type="time" id="manual-end-time" class="form-control" required step="60">
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="manual-project" class="form-label">Project</label>
+                    <select id="manual-project" name="project_id" class="form-control">
+                        <option value="">No specific project</option>
+                        {% for project in available_projects %}
+                        <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="manual-task" class="form-label">Task</label>
+                    <select id="manual-task" name="task_id" class="form-control" disabled>
+                        <option value="">Select a project first</option>
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label for="manual-break" class="form-label">Break Duration (minutes)</label>
+                    <input type="number" id="manual-break" class="form-control" min="0" value="0">
+                </div>
+                
+                <div class="form-group">
+                    <label for="manual-notes" class="form-label">Notes</label>
+                    <textarea id="manual-notes" class="form-control" rows="3" placeholder="Description of work performed"></textarea>
+                </div>
+                
+                <div class="form-actions">
+                    <button type="submit" class="btn btn-primary">Add Entry</button>
+                    <button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div id="delete-modal" class="modal">
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-small">
+        <div class="modal-header">
+            <h3 class="modal-title">Confirm Deletion</h3>
+            <button class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
+            <input type="hidden" id="delete-entry-id">
+        </div>
+        <div class="modal-footer">
+            <button id="confirm-delete" class="btn btn-danger">Delete Entry</button>
+            <button class="btn btn-ghost modal-cancel">Cancel</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/admin_users.html b/templates/admin_users.html
index 25279a1..abab77a 100644
--- a/templates/admin_users.html
+++ b/templates/admin_users.html
@@ -7,7 +7,7 @@
         <div class="header-content">
             <div class="header-left">
                 <h1 class="page-title">
-                    <span class="page-icon">👤</span>
+                    <span class="page-icon"><i class="ti ti-user"></i></span>
                     User Management
                 </h1>
                 <p class="page-subtitle">Manage user accounts and permissions across your organization</p>
@@ -49,7 +49,7 @@
             <!-- View Controls -->
             <div class="view-controls">
                 <div class="search-container">
-                    <span class="search-icon">🔍</span>
+                    <span class="search-icon"><i class="ti ti-search"></i></span>
                     <input type="text" 
                            class="search-input" 
                            id="userSearch" 
@@ -106,23 +106,23 @@
                             
                             <div class="user-actions">
                                 <a href="{{ url_for('users.edit_user', user_id=user.id) }}" class="btn btn-edit" title="Edit User">
-                                    <span class="icon">✏️</span>
+                                    <span class="icon"><i class="ti ti-pencil"></i></span>
                                     Edit
                                 </a>
                                 {% if user.id != g.user.id %}
                                     <form method="POST" action="{{ url_for('users.toggle_user_status', user_id=user.id) }}" class="status-form">
                                         {% if user.is_blocked %}
                                             <button type="submit" class="btn btn-unblock" title="Unblock User">
-                                                <span class="icon">🔓</span>
+                                                <span class="icon"><i class="ti ti-lock-open"></i></span>
                                             </button>
                                         {% else %}
                                             <button type="submit" class="btn btn-block" title="Block User">
-                                                <span class="icon">🔒</span>
+                                                <span class="icon"><i class="ti ti-lock"></i></span>
                                             </button>
                                         {% endif %}
                                     </form>
                                     <button class="btn btn-delete" onclick="confirmDelete({{ user.id }}, '{{ user.username }}')" title="Delete User">
-                                        <span class="icon">🗑️</span>
+                                        <span class="icon"><i class="ti ti-trash"></i></span>
                                     </button>
                                 {% endif %}
                             </div>
@@ -174,22 +174,22 @@
                                     <td>
                                         <div class="table-actions">
                                             <a href="{{ url_for('users.edit_user', user_id=user.id) }}" class="btn-action btn-edit" title="Edit">
-                                                <span class="icon">✏️</span>
+                                                <span class="icon"><i class="ti ti-pencil"></i></span>
                                             </a>
                                             {% if user.id != g.user.id %}
                                                 <form method="POST" action="{{ url_for('users.toggle_user_status', user_id=user.id) }}" class="inline-form">
                                                     {% if user.is_blocked %}
                                                         <button type="submit" class="btn-action btn-unblock" title="Unblock">
-                                                            <span class="icon">🔓</span>
+                                                            <span class="icon"><i class="ti ti-lock-open"></i></span>
                                                         </button>
                                                     {% else %}
                                                         <button type="submit" class="btn-action btn-block" title="Block">
-                                                            <span class="icon">🔒</span>
+                                                            <span class="icon"><i class="ti ti-lock"></i></span>
                                                         </button>
                                                     {% endif %}
                                                 </form>
                                                 <button class="btn-action btn-delete" onclick="confirmDelete({{ user.id }}, '{{ user.username }}')" title="Delete">
-                                                    <span class="icon">🗑️</span>
+                                                    <span class="icon"><i class="ti ti-trash"></i></span>
                                                 </button>
                                             {% endif %}
                                         </div>
@@ -203,14 +203,14 @@
             
             <!-- No Results Message -->
             <div class="no-results" id="noResults" style="display: none;">
-                <div class="empty-icon">🔍</div>
+                <div class="empty-icon"><i class="ti ti-search"></i></div>
                 <p class="empty-message">No users found matching your search</p>
                 <p class="empty-hint">Try searching with different keywords</p>
             </div>
         {% else %}
             <!-- Empty State -->
             <div class="empty-state">
-                <div class="empty-icon">👤</div>
+                <div class="empty-icon"><i class="ti ti-user"></i></div>
                 <h2 class="empty-title">No Users Yet</h2>
                 <p class="empty-message">Create your first user to get started</p>
                 <a href="{{ url_for('users.create_user') }}" class="btn btn-primary btn-lg">
@@ -236,7 +236,7 @@
                 <form id="delete-form" method="POST">
                     <button type="button" id="cancel-delete" class="btn btn-secondary">Cancel</button>
                     <button type="submit" class="btn btn-danger">
-                        <span class="icon">🗑️</span>
+                        <span class="icon"><i class="ti ti-trash"></i></span>
                         Delete User
                     </button>
                 </form>
diff --git a/templates/index.html b/templates/index.html
index dddfa3e..772b4d3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -41,7 +41,7 @@
                 <p>Gain insights with comprehensive reports and visual dashboards</p>
             </div>
             <div class="feature-card">
-                <div class="feature-icon">🏃‍♂️</div>
+                <div class="feature-icon"><i class="ti ti-run"></i></div>
                 <h3>Sprint Management</h3>
                 <p>Organize work into sprints with agile project tracking</p>
             </div>
@@ -51,12 +51,12 @@
                 <p>Manage teams, projects, and resources all in one place</p>
             </div>
             <div class="feature-card">
-                <div class="feature-icon">🔒</div>
+                <div class="feature-icon"><i class="ti ti-lock"></i></div>
                 <h3>Enterprise Security</h3>
                 <p>Bank-level encryption with role-based access control</p>
             </div>
             <div class="feature-card">
-                <div class="feature-icon">🌐</div>
+                <div class="feature-icon"><i class="ti ti-world"></i></div>
                 <h3>Multi-Company Support</h3>
                 <p>Perfect for agencies managing multiple client accounts</p>
             </div>
@@ -89,17 +89,17 @@
         <h2 class="section-title">Get Started in Minutes</h2>
         <div class="testimonial-grid">
             <div class="testimonial-card">
-                <div class="feature-icon">1️⃣</div>
+                <div class="feature-icon"><i class="ti ti-number-1"></i></div>
                 <h3>Sign Up</h3>
                 <p>Create your free account in seconds. No credit card required.</p>
             </div>
             <div class="testimonial-card">
-                <div class="feature-icon">2️⃣</div>
+                <div class="feature-icon"><i class="ti ti-number-2"></i></div>
                 <h3>Set Up Your Workspace</h3>
                 <p>Add your company, teams, and projects to organize your time tracking.</p>
             </div>
             <div class="testimonial-card">
-                <div class="feature-icon">3️⃣</div>
+                <div class="feature-icon"><i class="ti ti-number-3"></i></div>
                 <h3>Start Tracking</h3>
                 <p>Click "Arrive" to start tracking, "Leave" when done. It's that simple!</p>
             </div>
@@ -145,1234 +145,8 @@
 
 {% else %}
 
-<!-- Include the modern time tracking interface from time_tracking.html -->
-<div class="time-tracking-container">
-    <!-- Header Section -->
-    <div class="page-header">
-        <div class="header-content">
-            <div class="header-left">
-                <h1 class="page-title">
-                    <span class="page-icon">⏱️</span>
-                    Time Tracking
-                </h1>
-                <p class="page-subtitle">Track your work hours efficiently</p>
-            </div>
-            <div class="header-actions">
-                <button id="manual-entry-btn" class="btn btn-secondary">
-                    <span class="icon">📝</span>
-                    Manual Entry
-                </button>
-                <a href="{{ url_for('analytics') }}" class="btn btn-secondary">
-                    <span class="icon">📊</span>
-                    View Analytics
-                </a>
-            </div>
-        </div>
-    </div>
-
-    <!-- Timer Section -->
-    <div class="timer-section">
-        {% if active_entry %}
-        <!-- Active Timer -->
-        <div class="timer-card active">
-            <div class="timer-display">
-                <div class="timer-value" id="timer"
-                     data-start="{{ active_entry.arrival_time.timestamp() }}"
-                     data-breaks="{{ active_entry.total_break_duration }}"
-                     data-paused="{{ 'true' if active_entry.is_paused else 'false' }}">
-                    00:00:00
-                </div>
-                <div class="timer-status">
-                    {% if active_entry.is_paused %}
-                        <span class="status-badge paused">On Break</span>
-                    {% else %}
-                        <span class="status-badge active">Working</span>
-                    {% endif %}
-                </div>
-            </div>
-            
-            <div class="timer-info">
-                <div class="info-row">
-                    <span class="info-label">Started:</span>
-                    <span class="info-value">{{ active_entry.arrival_time|format_datetime }}</span>
-                </div>
-                
-                {% if active_entry.project %}
-                <div class="info-row">
-                    <span class="info-label">Project:</span>
-                    <span class="info-value project-badge" style="background-color: {{ active_entry.project.color or '#667eea' }}">
-                        {{ active_entry.project.code }} - {{ active_entry.project.name }}
-                    </span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.task %}
-                <div class="info-row">
-                    <span class="info-label">Task:</span>
-                    <span class="info-value task-badge">
-                        {{ active_entry.task.title }}
-                    </span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.notes %}
-                <div class="info-row">
-                    <span class="info-label">Notes:</span>
-                    <span class="info-value">{{ active_entry.notes }}</span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.is_paused %}
-                <div class="info-row">
-                    <span class="info-label">Break started:</span>
-                    <span class="info-value">{{ active_entry.pause_start_time|format_time }}</span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.total_break_duration > 0 %}
-                <div class="info-row">
-                    <span class="info-label">Total breaks:</span>
-                    <span class="info-value">{{ active_entry.total_break_duration|format_duration }}</span>
-                </div>
-                {% endif %}
-            </div>
-            
-            <div class="timer-actions">
-                <button id="pause-btn" class="btn {% if active_entry.is_paused %}btn-success{% else %}btn-warning{% endif %}" 
-                        data-id="{{ active_entry.id }}">
-                    {% if active_entry.is_paused %}
-                        <span class="icon">▶️</span>
-                        Resume Work
-                    {% else %}
-                        <span class="icon">⏸️</span>
-                        Take Break
-                    {% endif %}
-                </button>
-                <button id="leave-btn" class="btn btn-danger" data-id="{{ active_entry.id }}">
-                    <span class="icon">⏹️</span>
-                    Stop Working
-                </button>
-            </div>
-        </div>
-        {% else %}
-        <!-- Inactive Timer -->
-        <div class="timer-card inactive">
-            <div class="start-work-container">
-                <h2>Start Tracking Time</h2>
-                <p>Select a project and task to begin tracking your work</p>
-                
-                <form id="start-work-form" class="modern-form">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label for="project-select" class="form-label">
-                                Project <span class="optional-badge">Optional</span>
-                            </label>
-                            <select id="project-select" name="project_id" class="form-control">
-                                <option value="">No specific project</option>
-                                {% for project in available_projects %}
-                                <option value="{{ project.id }}" data-color="{{ project.color or '#667eea' }}">
-                                    {{ project.code }} - {{ project.name }}
-                                </option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="task-select" class="form-label">
-                                Task <span class="optional-badge">Optional</span>
-                            </label>
-                            <select id="task-select" name="task_id" class="form-control" disabled>
-                                <option value="">Select a project first</option>
-                            </select>
-                        </div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="work-notes" class="form-label">
-                            Notes <span class="optional-badge">Optional</span>
-                        </label>
-                        <textarea id="work-notes" name="notes" class="form-control" 
-                                  rows="2" placeholder="What are you working on?"></textarea>
-                    </div>
-                    
-                    <div class="form-actions">
-                        <button type="submit" id="arrive-btn" class="btn btn-primary btn-large">
-                            <span class="icon">▶️</span>
-                            Start Working
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Quick Stats -->
-    {% if today_hours is defined %}
-    <div class="stats-section">
-        <div class="stat-card">
-            <div class="stat-value">{{ today_hours|format_duration }}</div>
-            <div class="stat-label">Today</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{{ week_hours|format_duration }}</div>
-            <div class="stat-label">This Week</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{{ month_hours|format_duration }}</div>
-            <div class="stat-label">This Month</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{{ active_projects|length if active_projects else 0 }}</div>
-            <div class="stat-label">Active Projects</div>
-        </div>
-    </div>
-    {% endif %}
-
-    <!-- Recent Entries -->
-    <div class="entries-section">
-        <div class="section-header">
-            <h2 class="section-title">
-                <span class="icon">📋</span>
-                Recent Time Entries
-            </h2>
-            <div class="view-toggle">
-                <button class="toggle-btn active" data-view="list">
-                    <span class="icon">📝</span>
-                    List
-                </button>
-                <button class="toggle-btn" data-view="grid">
-                    <span class="icon">📊</span>
-                    Grid
-                </button>
-            </div>
-        </div>
-
-        <!-- List View -->
-        <div id="list-view" class="view-container active">
-            {% if history %}
-            <div class="entries-table-container">
-                <table class="entries-table">
-                    <thead>
-                        <tr>
-                            <th>Date</th>
-                            <th>Time</th>
-                            <th>Project / Task</th>
-                            <th>Duration</th>
-                            <th>Break</th>
-                            <th>Notes</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for entry in history %}
-                        <tr data-entry-id="{{ entry.id }}" class="entry-row">
-                            <td>
-                                <div class="date-cell">
-                                    <span class="date-day">{{ entry.arrival_time.strftime('%d') }}</span>
-                                    <span class="date-month">{{ entry.arrival_time.strftime('%b') }}</span>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="time-cell">
-                                    <span class="time-start">{{ entry.arrival_time|format_time }}</span>
-                                    <span class="time-separator"><i class="ti ti-arrow-right"></i></span>
-                                    <span class="time-end">{{ entry.departure_time|format_time if entry.departure_time else 'Active' }}</span>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="project-task-cell">
-                                    {% if entry.project %}
-                                    <span class="project-tag" style="background-color: {{ entry.project.color or '#667eea' }}">
-                                        {{ entry.project.code }}
-                                    </span>
-                                    {% endif %}
-                                    {% if entry.task %}
-                                    <span class="task-name">{{ entry.task.title }}</span>
-                                    {% elif entry.project %}
-                                    <span class="project-name">{{ entry.project.name }}</span>
-                                    {% else %}
-                                    <span class="no-project">No project</span>
-                                    {% endif %}
-                                </div>
-                            </td>
-                            <td>
-                                <span class="duration-badge">
-                                    {{ entry.duration|format_duration if entry.duration is not none else 'In progress' }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="break-duration">
-                                    {{ entry.total_break_duration|format_duration if entry.total_break_duration else '-' }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="notes-preview" title="{{ entry.notes or '' }}">
-                                    {{ entry.notes[:30] + '...' if entry.notes and entry.notes|length > 30 else entry.notes or '-' }}
-                                </span>
-                            </td>
-                            <td>
-                                <div class="actions-cell">
-                                    {% if entry.departure_time and not active_entry %}
-                                    <button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Resume">
-                                        <span class="icon">🔄</span>
-                                    </button>
-                                    {% endif %}
-                                    <button class="btn-icon edit-entry-btn" data-id="{{ entry.id }}" title="Edit">
-                                        <span class="icon">✏️</span>
-                                    </button>
-                                    <button class="btn-icon delete-entry-btn" data-id="{{ entry.id }}" title="Delete">
-                                        <span class="icon">🗑️</span>
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-            {% else %}
-            <div class="empty-state">
-                <div class="empty-icon">📭</div>
-                <h3>No time entries yet</h3>
-                <p>Start tracking your time to see entries here</p>
-            </div>
-            {% endif %}
-        </div>
-
-        <!-- Grid View -->
-        <div id="grid-view" class="view-container">
-            <div class="entries-grid">
-                {% for entry in history %}
-                <div class="entry-card" data-entry-id="{{ entry.id }}">
-                    <div class="entry-header">
-                        <div class="entry-date">
-                            {{ entry.arrival_time.strftime('%d %b %Y') }}
-                        </div>
-                        <div class="entry-duration">
-                            {{ entry.duration|format_duration if entry.duration is not none else 'Active' }}
-                        </div>
-                    </div>
-                    
-                    <div class="entry-body">
-                        {% if entry.project %}
-                        <div class="entry-project" style="border-left-color: {{ entry.project.color or '#667eea' }}">
-                            <strong>{{ entry.project.code }}</strong> - {{ entry.project.name }}
-                        </div>
-                        {% endif %}
-                        
-                        {% if entry.task %}
-                        <div class="entry-task">
-                            <span class="icon">📋</span> {{ entry.task.title }}
-                        </div>
-                        {% endif %}
-                        
-                        <div class="entry-time">
-                            <span class="icon">🕐</span>
-                            {{ entry.arrival_time|format_time }} - {{ entry.departure_time|format_time if entry.departure_time else 'Active' }}
-                        </div>
-                        
-                        {% if entry.notes %}
-                        <div class="entry-notes">
-                            <span class="icon">📝</span>
-                            {{ entry.notes }}
-                        </div>
-                        {% endif %}
-                    </div>
-                    
-                    <div class="entry-footer">
-                        <button class="btn-sm edit-entry-btn" data-id="{{ entry.id }}">Edit</button>
-                        <button class="btn-sm btn-danger delete-entry-btn" data-id="{{ entry.id }}">Delete</button>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Modals -->
-<!-- Edit Entry Modal -->
-<div id="edit-modal" class="modal">
-    <div class="modal-overlay"></div>
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3 class="modal-title">Edit Time Entry</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <form id="edit-entry-form" class="modern-form">
-                <input type="hidden" id="edit-entry-id">
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="edit-arrival-date" class="form-label">Start Date</label>
-                        <input type="date" id="edit-arrival-date" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-arrival-time" class="form-label">Start Time</label>
-                        <input type="time" id="edit-arrival-time" class="form-control" required step="60">
-                    </div>
-                </div>
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="edit-departure-date" class="form-label">End Date</label>
-                        <input type="date" id="edit-departure-date" class="form-control">
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-departure-time" class="form-label">End Time</label>
-                        <input type="time" id="edit-departure-time" class="form-control" step="60">
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-project" class="form-label">Project</label>
-                    <select id="edit-project" class="form-control">
-                        <option value="">No specific project</option>
-                        {% for project in available_projects %}
-                        <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-notes" class="form-label">Notes</label>
-                    <textarea id="edit-notes" class="form-control" rows="3"></textarea>
-                </div>
-                
-                <div class="form-actions">
-                    <button type="submit" class="btn btn-primary">Save Changes</button>
-                    <button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Manual Entry Modal -->
-<div id="manual-modal" class="modal">
-    <div class="modal-overlay"></div>
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3 class="modal-title">Add Manual Time Entry</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <form id="manual-entry-form" class="modern-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="manual-start-date" class="form-label">Start Date</label>
-                        <input type="date" id="manual-start-date" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="manual-start-time" class="form-label">Start Time</label>
-                        <input type="time" id="manual-start-time" class="form-control" required step="60">
-                    </div>
-                </div>
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="manual-end-date" class="form-label">End Date</label>
-                        <input type="date" id="manual-end-date" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="manual-end-time" class="form-label">End Time</label>
-                        <input type="time" id="manual-end-time" class="form-control" required step="60">
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-project" class="form-label">Project</label>
-                    <select id="manual-project" name="project_id" class="form-control">
-                        <option value="">No specific project</option>
-                        {% for project in available_projects %}
-                        <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-task" class="form-label">Task</label>
-                    <select id="manual-task" name="task_id" class="form-control" disabled>
-                        <option value="">Select a project first</option>
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-break" class="form-label">Break Duration (minutes)</label>
-                    <input type="number" id="manual-break" class="form-control" min="0" value="0">
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-notes" class="form-label">Notes</label>
-                    <textarea id="manual-notes" class="form-control" rows="3" placeholder="Description of work performed"></textarea>
-                </div>
-                
-                <div class="form-actions">
-                    <button type="submit" class="btn btn-primary">Add Entry</button>
-                    <button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Delete Confirmation Modal -->
-<div id="delete-modal" class="modal">
-    <div class="modal-overlay"></div>
-    <div class="modal-content modal-small">
-        <div class="modal-header">
-            <h3 class="modal-title">Confirm Deletion</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
-            <input type="hidden" id="delete-entry-id">
-        </div>
-        <div class="modal-footer">
-            <button id="confirm-delete" class="btn btn-danger">Delete Entry</button>
-            <button class="btn btn-ghost modal-cancel">Cancel</button>
-        </div>
-    </div>
-</div>
-
-<style>
-/* Container */
-.time-tracking-container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-/* Page Header - reuse existing styles */
-.page-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 16px;
-    padding: 2rem;
-    color: white;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
-}
-
-.header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 2rem;
-}
-
-.page-title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.page-icon {
-    font-size: 2.5rem;
-    display: inline-block;
-    animation: float 3s ease-in-out infinite;
-}
-
-@keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-}
-
-.page-subtitle {
-    font-size: 1.1rem;
-    opacity: 0.9;
-    margin: 0.5rem 0 0 0;
-}
-
-.header-actions {
-    display: flex;
-    gap: 1rem;
-}
-
-/* Timer Section */
-.timer-section {
-    margin-bottom: 2rem;
-}
-
-.timer-card {
-    background: white;
-    border-radius: 16px;
-    padding: 2rem;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e5e7eb;
-}
-
-.timer-card.active {
-    border: 2px solid #10b981;
-    background: linear-gradient(135deg, #10b98110 0%, #059b6910 100%);
-}
-
-.timer-display {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.timer-value {
-    font-size: 4rem;
-    font-weight: 700;
-    color: #1f2937;
-    font-family: 'Monaco', 'Courier New', monospace;
-    letter-spacing: 0.1em;
-}
-
-.timer-status {
-    margin-top: 0.5rem;
-}
-
-.status-badge {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.status-badge.active {
-    background: #10b981;
-    color: white;
-}
-
-.status-badge.paused {
-    background: #f59e0b;
-    color: white;
-}
-
-.timer-info {
-    background: #f8f9fa;
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-}
-
-.info-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #e5e7eb;
-}
-
-.info-row:last-child {
-    border-bottom: none;
-}
-
-.info-label {
-    font-weight: 600;
-    color: #6b7280;
-}
-
-.info-value {
-    color: #1f2937;
-}
-
-.project-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: 16px;
-    color: white;
-    font-size: 0.875rem;
-    font-weight: 500;
-}
-
-.task-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: #e5e7eb;
-    border-radius: 8px;
-    font-size: 0.875rem;
-}
-
-.timer-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-}
-
-/* Start Work Form */
-.start-work-container {
-    text-align: center;
-}
-
-.start-work-container h2 {
-    font-size: 1.75rem;
-    color: #1f2937;
-    margin-bottom: 0.5rem;
-}
-
-.start-work-container p {
-    color: #6b7280;
-    margin-bottom: 2rem;
-}
-
-.modern-form {
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.form-label {
-    font-weight: 600;
-    color: #374151;
-    font-size: 0.95rem;
-}
-
-.optional-badge {
-    background: #e5e7eb;
-    color: #6b7280;
-    padding: 0.125rem 0.5rem;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    margin-left: 0.5rem;
-}
-
-.form-control {
-    padding: 0.75rem 1rem;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 1rem;
-    transition: all 0.2s ease;
-    background-color: #f9fafb;
-}
-
-.form-control:focus {
-    outline: none;
-    border-color: #667eea;
-    background-color: white;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.form-actions {
-    margin-top: 1.5rem;
-}
-
-/* Stats Section */
-.stats-section {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-}
-
-.stat-card {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 12px;
-    text-align: center;
-    border: 1px solid #e5e7eb;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    transition: all 0.3s ease;
-}
-
-.stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.stat-value {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    color: #667eea;
-}
-
-.stat-label {
-    font-size: 0.9rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 600;
-}
-
-/* Entries Section */
-.entries-section {
-    background: white;
-    border-radius: 16px;
-    padding: 2rem;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e5e7eb;
-}
-
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-}
-
-.section-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.view-toggle {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.toggle-btn {
-    padding: 0.5rem 1rem;
-    border: 2px solid #e5e7eb;
-    background: white;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    font-weight: 500;
-}
-
-.toggle-btn.active {
-    background: #667eea;
-    color: white;
-    border-color: #667eea;
-}
-
-.view-container {
-    display: none;
-}
-
-.view-container.active {
-    display: block;
-}
-
-/* Table Styles */
-.entries-table-container {
-    overflow-x: auto;
-}
-
-.entries-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.entries-table th {
-    text-align: left;
-    padding: 1rem;
-    border-bottom: 2px solid #e5e7eb;
-    font-weight: 600;
-    color: #374151;
-    background: #f8f9fa;
-}
-
-.entries-table td {
-    padding: 1rem;
-    border-bottom: 1px solid #e5e7eb;
-}
-
-.entry-row:hover {
-    background: #f8f9fa;
-}
-
-.date-cell {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.date-day {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #1f2937;
-}
-
-.date-month {
-    font-size: 0.875rem;
-    color: #6b7280;
-    text-transform: uppercase;
-}
-
-.time-cell {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-family: 'Monaco', 'Courier New', monospace;
-}
-
-.time-separator {
-    color: #9ca3af;
-}
-
-.project-task-cell {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.project-tag {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    color: white;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.task-name,
-.project-name {
-    color: #374151;
-}
-
-.no-project {
-    color: #9ca3af;
-    font-style: italic;
-}
-
-.duration-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: #ede9fe;
-    color: #5b21b6;
-    border-radius: 16px;
-    font-weight: 600;
-    font-size: 0.875rem;
-}
-
-.break-duration {
-    color: #6b7280;
-}
-
-.notes-preview {
-    color: #6b7280;
-    font-size: 0.875rem;
-}
-
-.actions-cell {
-    display: flex;
-    gap: 0.5rem;
-}
-
-/* Grid View */
-.entries-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 1.5rem;
-}
-
-.entry-card {
-    background: #f8f9fa;
-    border-radius: 12px;
-    padding: 1.5rem;
-    border: 1px solid #e5e7eb;
-    transition: all 0.3s ease;
-}
-
-.entry-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
-}
-
-.entry-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.entry-date {
-    font-weight: 600;
-    color: #374151;
-}
-
-.entry-duration {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #667eea;
-}
-
-.entry-body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.entry-project {
-    padding-left: 1rem;
-    border-left: 4px solid;
-}
-
-.entry-task,
-.entry-time,
-.entry-notes {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    color: #6b7280;
-    font-size: 0.875rem;
-}
-
-.entry-footer {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #e5e7eb;
-}
-
-/* Buttons */
-.btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-}
-
-.btn-large {
-    padding: 1rem 2rem;
-    font-size: 1.125rem;
-}
-
-.btn-sm {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-}
-
-.btn-icon {
-    padding: 0.5rem;
-    border: 1px solid #e5e7eb;
-    background: white;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-icon:hover {
-    background: #f3f4f6;
-    transform: translateY(-2px);
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-}
-
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.btn-secondary {
-    background: white;
-    color: #4b5563;
-    border: 2px solid #e5e7eb;
-}
-
-.btn-secondary:hover {
-    background: #f3f4f6;
-}
-
-.btn-success {
-    background: #10b981;
-    color: white;
-}
-
-.btn-success:hover {
-    background: #059669;
-    transform: translateY(-2px);
-}
-
-.btn-warning {
-    background: #f59e0b;
-    color: white;
-}
-
-.btn-warning:hover {
-    background: #d97706;
-    transform: translateY(-2px);
-}
-
-.btn-danger {
-    background: #ef4444;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #dc2626;
-    transform: translateY(-2px);
-}
-
-.btn-ghost {
-    background: transparent;
-    color: #6b7280;
-}
-
-.btn-ghost:hover {
-    color: #374151;
-    background: #f3f4f6;
-}
-
-/* Empty State */
-.empty-state {
-    text-align: center;
-    padding: 4rem 2rem;
-}
-
-.empty-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-}
-
-.empty-state h3 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin-bottom: 0.5rem;
-}
-
-.empty-state p {
-    color: #6b7280;
-}
-
-/* Modal Styles */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-}
-
-.modal-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-}
-
-.modal-content {
-    position: relative;
-    background: white;
-    border-radius: 16px;
-    max-width: 600px;
-    margin: 5vh auto;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
-}
-
-.modal-small {
-    max-width: 400px;
-}
-
-.modal-header {
-    padding: 2rem;
-    border-bottom: 1px solid #e5e7eb;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0;
-}
-
-.modal-close {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: #6b7280;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-}
-
-.modal-close:hover {
-    background: #f3f4f6;
-    color: #1f2937;
-}
-
-.modal-body {
-    padding: 2rem;
-}
-
-.modal-footer {
-    padding: 1.5rem 2rem;
-    border-top: 1px solid #e5e7eb;
-    display: flex;
-    justify-content: flex-end;
-    gap: 1rem;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .time-tracking-container {
-        padding: 1rem;
-    }
-    
-    .form-row {
-        grid-template-columns: 1fr;
-    }
-    
-    .timer-value {
-        font-size: 3rem;
-    }
-    
-    .entries-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .entries-table {
-        font-size: 0.875rem;
-    }
-    
-    .entries-table th,
-    .entries-table td {
-        padding: 0.5rem;
-    }
-}
-</style>
-
-<script src="{{ url_for('static', filename='js/timer.js') }}"></script>
-<script src="{{ url_for('static', filename='js/time-tracking.js') }}"></script>
+<!-- Include the shared time tracking interface -->
+{% include '_time_tracking_interface.html' %}
 
 {% endif %}
 
diff --git a/templates/invitations/list.html b/templates/invitations/list.html
index 1b3e30c..3dafc19 100644
--- a/templates/invitations/list.html
+++ b/templates/invitations/list.html
@@ -7,7 +7,7 @@
         <div class="header-content">
             <div class="header-left">
                 <h1 class="page-title">
-                    <span class="page-icon">📨</span>
+                    <span class="page-icon"><i class="ti ti-mail"></i></span>
                     Invitations
                 </h1>
                 <p class="page-subtitle">Manage team invitations for {{ g.user.company.name }}</p>
@@ -45,7 +45,7 @@
     {% if pending_invitations %}
     <div class="section">
         <h2 class="section-title">
-            <span class="icon">⏳</span>
+            <span class="icon"><i class="ti ti-hourglass"></i></span>
             Pending Invitations
         </h2>
         <div class="invitations-list">
@@ -56,15 +56,15 @@
                         <h3 class="invitation-email">{{ invitation.email }}</h3>
                         <div class="invitation-meta">
                             <span class="meta-item">
-                                <span class="icon">👤</span>
+                                <span class="icon"><i class="ti ti-user"></i></span>
                                 Role: {{ invitation.role }}
                             </span>
                             <span class="meta-item">
-                                <span class="icon">📅</span>
+                                <span class="icon"><i class="ti ti-calendar"></i></span>
                                 Sent {{ invitation.created_at.strftime('%b %d, %Y') }}
                             </span>
                             <span class="meta-item">
-                                <span class="icon">⏰</span>
+                                <span class="icon"><i class="ti ti-clock"></i></span>
                                 Expires {{ invitation.expires_at.strftime('%b %d, %Y') }}
                             </span>
                         </div>
@@ -72,13 +72,13 @@
                     <div class="invitation-actions">
                         <form method="POST" action="{{ url_for('invitations.resend_invitation', invitation_id=invitation.id) }}" style="display: inline;">
                             <button type="submit" class="btn btn-sm btn-secondary">
-                                <span class="icon">🔄</span>
+                                <span class="icon"><i class="ti ti-refresh"></i></span>
                                 Resend
                             </button>
                         </form>
                         <form method="POST" action="{{ url_for('invitations.revoke_invitation', invitation_id=invitation.id) }}" style="display: inline;">
                             <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to revoke this invitation?');">
-                                <span class="icon">❌</span>
+                                <span class="icon"><i class="ti ti-x"></i></span>
                                 Revoke
                             </button>
                         </form>
@@ -97,7 +97,7 @@
     {% if accepted_invitations %}
     <div class="section">
         <h2 class="section-title">
-            <span class="icon">✅</span>
+            <span class="icon"><i class="ti ti-check"></i></span>
             Accepted Invitations
         </h2>
         <div class="invitations-list">
@@ -108,18 +108,18 @@
                         <h3 class="invitation-email">{{ invitation.email }}</h3>
                         <div class="invitation-meta">
                             <span class="meta-item">
-                                <span class="icon">👤</span>
+                                <span class="icon"><i class="ti ti-user"></i></span>
                                 Joined as: {{ invitation.accepted_by.username }} ({{ invitation.role }})
                             </span>
                             <span class="meta-item">
-                                <span class="icon">📅</span>
+                                <span class="icon"><i class="ti ti-calendar"></i></span>
                                 Accepted {{ invitation.accepted_at.strftime('%b %d, %Y') }}
                             </span>
                         </div>
                     </div>
                     <div class="invitation-actions">
                         <a href="{{ url_for('users.view_user', user_id=invitation.accepted_by.id) }}" class="btn btn-sm btn-secondary">
-                            <span class="icon">👁️</span>
+                            <span class="icon"><i class="ti ti-eye"></i></span>
                             View User
                         </a>
                     </div>
@@ -137,7 +137,7 @@
     {% if expired_invitations %}
     <div class="section">
         <h2 class="section-title">
-            <span class="icon">⏱️</span>
+            <span class="icon"><i class="ti ti-clock"></i></span>
             Expired Invitations
         </h2>
         <div class="invitations-list">
@@ -148,11 +148,11 @@
                         <h3 class="invitation-email">{{ invitation.email }}</h3>
                         <div class="invitation-meta">
                             <span class="meta-item">
-                                <span class="icon">👤</span>
+                                <span class="icon"><i class="ti ti-user"></i></span>
                                 Role: {{ invitation.role }}
                             </span>
                             <span class="meta-item">
-                                <span class="icon">📅</span>
+                                <span class="icon"><i class="ti ti-calendar"></i></span>
                                 Expired {{ invitation.expires_at.strftime('%b %d, %Y') }}
                             </span>
                         </div>
@@ -160,7 +160,7 @@
                     <div class="invitation-actions">
                         <form method="POST" action="{{ url_for('invitations.resend_invitation', invitation_id=invitation.id) }}" style="display: inline;">
                             <button type="submit" class="btn btn-sm btn-primary">
-                                <span class="icon">📤</span>
+                                <span class="icon"><i class="ti ti-send"></i></span>
                                 Send New Invitation
                             </button>
                         </form>
@@ -178,7 +178,7 @@
     <!-- Empty State -->
     {% if not pending_invitations and not accepted_invitations and not expired_invitations %}
     <div class="empty-state">
-        <div class="empty-icon">📨</div>
+        <div class="empty-icon"><i class="ti ti-mail"></i></div>
         <h3>No invitations yet</h3>
         <p>Start building your team by sending invitations</p>
         <a href="{{ url_for('invitations.send_invitation') }}" class="btn btn-primary">
diff --git a/templates/invitations/send.html b/templates/invitations/send.html
index 4b5aab3..ead2ad1 100644
--- a/templates/invitations/send.html
+++ b/templates/invitations/send.html
@@ -7,7 +7,7 @@
         <div class="header-content">
             <div class="header-left">
                 <h1 class="page-title">
-                    <span class="page-icon">✉️</span>
+                    <span class="page-icon"><i class="ti ti-mail"></i></span>
                     Send Invitation
                 </h1>
                 <p class="page-subtitle">Invite team members to join {{ g.user.company.name }}</p>
@@ -60,7 +60,7 @@
 
                     <div class="info-panel">
                         <div class="info-item">
-                            <span class="info-icon">📧</span>
+                            <span class="info-icon"><i class="ti ti-mail-opened"></i></span>
                             <div class="info-content">
                                 <h4>What happens next?</h4>
                                 <ul>
@@ -75,7 +75,7 @@
 
                     <div class="form-actions">
                         <button type="submit" class="btn btn-primary">
-                            <span class="icon">📤</span>
+                            <span class="icon"><i class="ti ti-send"></i></span>
                             Send Invitation
                         </button>
                         <a href="{{ url_for('invitations.list_invitations') }}" class="btn btn-ghost">
@@ -90,7 +90,7 @@
         <div class="card preview-card">
             <div class="card-header">
                 <h2 class="card-title">
-                    <span class="icon">👁️</span>
+                    <span class="icon"><i class="ti ti-eye"></i></span>
                     Email Preview
                 </h2>
             </div>
diff --git a/templates/layout.html b/templates/layout.html
index 4ce2048..59ba13f 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -6,7 +6,11 @@
     <title>{{ title }} - {{ g.branding.app_name if g.branding else 'TimeTrack' }}{% if g.company %} - {{ g.company.name }}{% endif %}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/hover-standards.css') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
+    {% if g.user %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/time-tracking.css') }}">
+    {% endif %}
     {% if not g.user %}
     <link rel="stylesheet" href="{{ url_for('static', filename='css/splash.css') }}">
     {% endif %}
@@ -15,21 +19,12 @@
     {% endif %}
     <style>
         :root {
-            --primary-color: {{ g.branding.primary_color if g.branding else '#007bff' }};
-        }
-        .btn-primary {
-            background-color: var(--primary-color);
-            border-color: var(--primary-color);
-        }
-        .btn-primary:hover {
-            background-color: {{ (g.branding.primary_color if g.branding else '#007bff') + 'dd' }};
-            border-color: {{ (g.branding.primary_color if g.branding else '#007bff') + 'dd' }};
+            --primary-color: {{ g.branding.primary_color if g.branding else '#667eea' }};
+            --primary-gradient-start: {{ g.branding.primary_color if g.branding else '#667eea' }};
+            --primary-gradient-end: #764ba2;
         }
         .nav-icon {
-            color: rgb(116, 85, 175) /* var(--primary-color); */
-        }
-        a:hover {
-            color: var(--primary-color);
+            color: var(--primary-gradient-end);
         }
         .mobile-logo {
             max-height: 30px;
@@ -216,7 +211,7 @@
                         <strong>Add your email address</strong> to enable account recovery and receive important notifications.
                     </span>
                     <a href="{{ url_for('profile') }}" class="btn btn-sm btn-primary">Add Email</a>
-                    <button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session">×</button>
+                    <button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session"><i class="ti ti-x"></i></button>
                 </div>
             </div>
         {% elif g.show_email_verification_nag %}
@@ -227,7 +222,7 @@
                         <strong>Please verify your email address</strong> to ensure you can recover your account if needed.
                     </span>
                     <a href="{{ url_for('profile') }}" class="btn btn-sm btn-warning">Verify Email</a>
-                    <button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session">×</button>
+                    <button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session"><i class="ti ti-x"></i></button>
                 </div>
             </div>
         {% endif %}
diff --git a/templates/notes_list.html b/templates/notes_list.html
index 8c6e956..4d08b96 100644
--- a/templates/notes_list.html
+++ b/templates/notes_list.html
@@ -129,25 +129,25 @@
                 {% if folder_filter %}
                 <span class="filter-tag">
                     <i class="ti ti-folder"></i> {{ folder_filter }}
-                    <a href="{{ url_for('notes.notes_list', tag=tag_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter">×</a>
+                    <a href="{{ url_for('notes.notes_list', tag=tag_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter"><i class="ti ti-x"></i></a>
                 </span>
                 {% endif %}
                 {% if tag_filter %}
                 <span class="filter-tag">
                     <i class="ti ti-tag"></i> {{ tag_filter }}
-                    <a href="{{ url_for('notes.notes_list', folder=folder_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter">×</a>
+                    <a href="{{ url_for('notes.notes_list', folder=folder_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter"><i class="ti ti-x"></i></a>
                 </span>
                 {% endif %}
                 {% if visibility_filter %}
                 <span class="filter-tag">
                     <i class="ti ti-eye"></i> {{ visibility_filter|title }}
-                    <a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, search=search_query) }}" class="remove-filter">×</a>
+                    <a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, search=search_query) }}" class="remove-filter"><i class="ti ti-x"></i></a>
                 </span>
                 {% endif %}
                 {% if search_query %}
                 <span class="filter-tag">
                     <i class="ti ti-search"></i> "{{ search_query }}"
-                    <a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, visibility=visibility_filter) }}" class="remove-filter">×</a>
+                    <a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, visibility=visibility_filter) }}" class="remove-filter"><i class="ti ti-x"></i></a>
                 </span>
                 {% endif %}
                 <a href="{{ url_for('notes.notes_list') }}" class="clear-all">Clear all</a>
diff --git a/templates/profile.html b/templates/profile.html
index 1a229ce..cff1d42 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -24,7 +24,7 @@
                     <span class="stat-text">{{ user.team.name if user.team else 'No Team' }}</span>
                 </div>
                 <div class="stat-badge">
-                    <span class="stat-icon">👤</span>
+                    <span class="stat-icon"><i class="ti ti-user"></i></span>
                     <span class="stat-text">{{ user.role.value if user.role else 'Team Member' }}</span>
                 </div>
             </div>
@@ -37,7 +37,7 @@
             <div class="flash-messages">
                 {% for category, message in messages %}
                     <div class="alert alert-{{ category }}">
-                        <span class="alert-icon">{% if category == 'success' %}✓{% elif category == 'error' %}✕{% else %}ℹ{% endif %}</span>
+                        <span class="alert-icon">{% if category == 'success' %}<i class="ti ti-check"></i>{% elif category == 'error' %}<i class="ti ti-x"></i>{% else %}<i class="ti ti-info-circle"></i>{% endif %}</span>
                         {{ message }}
                     </div>
                 {% endfor %}
@@ -53,7 +53,7 @@
             <div class="card avatar-card">
                 <div class="card-header">
                     <h2 class="card-title">
-                        <span class="icon">🖼️</span>
+                        <span class="icon"><i class="ti ti-photo"></i></span>
                         Profile Picture
                     </h2>
                 </div>
@@ -65,15 +65,15 @@
                     <div class="avatar-controls">
                         <div class="control-tabs">
                             <button class="tab-btn active" data-tab="default">
-                                <span class="tab-icon">👤</span>
+                                <span class="tab-icon"><i class="ti ti-user"></i></span>
                                 Default
                             </button>
                             <button class="tab-btn" data-tab="upload">
-                                <span class="tab-icon">📤</span>
+                                <span class="tab-icon"><i class="ti ti-upload"></i></span>
                                 Upload
                             </button>
                             <button class="tab-btn" data-tab="url">
-                                <span class="tab-icon">🔗</span>
+                                <span class="tab-icon"><i class="ti ti-link"></i></span>
                                 URL
                             </button>
                         </div>
@@ -95,7 +95,7 @@
                             <form method="POST" action="{{ url_for('upload_avatar') }}" enctype="multipart/form-data" class="modern-form">
                                 <div class="upload-area">
                                     <label for="avatar_file" class="upload-label">
-                                        <div class="upload-icon">📁</div>
+                                        <div class="upload-icon"><i class="ti ti-folder-upload"></i></div>
                                         <div class="upload-text">Drop image here or click to browse</div>
                                         <div class="upload-hint">Max 5MB • JPG, PNG, GIF, WebP</div>
                                         <div class="file-name" id="file-name"></div>
@@ -107,7 +107,7 @@
                                     <img id="upload-preview-img" src="" alt="Preview">
                                 </div>
                                 <button type="submit" class="btn btn-primary" id="upload-btn" disabled>
-                                    <span class="icon">⬆</span>
+                                    <span class="icon"><i class="ti ti-upload"></i></span>
                                     Upload Avatar
                                 </button>
                             </form>
@@ -124,7 +124,7 @@
                                     <span class="form-hint">Enter a direct link to an image</span>
                                 </div>
                                 <button type="submit" class="btn btn-primary">
-                                    <span class="icon">✓</span>
+                                    <span class="icon"><i class="ti ti-check"></i></span>
                                     Set Avatar URL
                                 </button>
                             </form>
@@ -137,7 +137,7 @@
             <div class="card">
                 <div class="card-header">
                     <h2 class="card-title">
-                        <span class="icon">ℹ️</span>
+                        <span class="icon"><i class="ti ti-info-circle"></i></span>
                         Account Information
                     </h2>
                 </div>
@@ -175,7 +175,7 @@
             <div class="card">
                 <div class="card-header">
                     <h2 class="card-title">
-                        <span class="icon">✉️</span>
+                        <span class="icon"><i class="ti ti-mail"></i></span>
                         Email Settings
                     </h2>
                 </div>
@@ -198,14 +198,14 @@
                         </div>
                         {% elif not user.email %}
                         <div class="alert alert-info">
-                            <span class="alert-icon">ℹ️</span>
+                            <span class="alert-icon"><i class="ti ti-info-circle"></i></span>
                             <p>Adding an email enables account recovery and notifications.</p>
                         </div>
                         {% endif %}
                         
                         <div class="form-actions">
                             <button type="submit" class="btn btn-primary">
-                                <span class="icon">✓</span>
+                                <span class="icon"><i class="ti ti-check"></i></span>
                                 {% if user.email %}Update{% else %}Add{% endif %} Email
                             </button>
                         </div>
@@ -217,7 +217,7 @@
             <div class="card">
                 <div class="card-header">
                     <h2 class="card-title">
-                        <span class="icon">🔒</span>
+                        <span class="icon"><i class="ti ti-lock"></i></span>
                         Security Settings
                     </h2>
                 </div>
@@ -251,7 +251,7 @@
                             
                             <div class="form-actions">
                                 <button type="submit" class="btn btn-warning">
-                                    <span class="icon">🔑</span>
+                                    <span class="icon"><i class="ti ti-key"></i></span>
                                     Change Password
                                 </button>
                             </div>
@@ -264,7 +264,7 @@
                         <div class="tfa-status">
                             {% if user.two_factor_enabled %}
                                 <div class="status-indicator enabled">
-                                    <span class="status-icon">🛡️</span>
+                                    <span class="status-icon"><i class="ti ti-shield"></i></span>
                                     <div>
                                         <div class="status-text">Enabled</div>
                                         <div class="status-description">Your account is protected with 2FA</div>
@@ -279,7 +279,7 @@
                                                class="form-control" placeholder="Enter your password to disable 2FA" required>
                                     </div>
                                     <button type="submit" class="btn btn-danger">
-                                        <span class="icon">✕</span>
+                                        <span class="icon"><i class="ti ti-x"></i></span>
                                         Disable 2FA
                                     </button>
                                 </form>
@@ -293,7 +293,7 @@
                                 </div>
                                 
                                 <a href="{{ url_for('setup_2fa') }}" class="btn btn-success">
-                                    <span class="icon">✓</span>
+                                    <span class="icon"><i class="ti ti-check"></i></span>
                                     Enable 2FA
                                 </a>
                             {% endif %}
diff --git a/templates/team_form.html b/templates/team_form.html
index 1b3b8b9..44d0696 100644
--- a/templates/team_form.html
+++ b/templates/team_form.html
@@ -72,7 +72,7 @@
                         
                         <div class="form-actions">
                             <button type="submit" class="btn btn-primary">
-                                <span class="icon">✓</span>
+                                <span class="icon"><i class="ti ti-check"></i></span>
                                 {% if team %}Save Changes{% else %}Create Team{% endif %}
                             </button>
                             {% if not team %}
@@ -149,7 +149,7 @@
                                                     class="btn-icon btn-danger" 
                                                     onclick="return confirm('Remove {{ member.username }} from the team?')"
                                                     title="Remove from team">
-                                                <span class="icon">×</span>
+                                                <span class="icon"><i class="ti ti-x"></i></span>
                                             </button>
                                         </form>
                                     </div>
@@ -170,7 +170,7 @@
             <div class="card add-member-card">
                 <div class="card-header">
                     <h2 class="card-title">
-                        <span class="icon">➕</span>
+                        <span class="icon"><i class="ti ti-plus"></i></span>
                         Add Team Member
                     </h2>
                 </div>
@@ -202,7 +202,7 @@
                         </form>
                     {% else %}
                         <div class="empty-state">
-                            <div class="empty-icon">✓</div>
+                            <div class="empty-icon"><i class="ti ti-check"></i></div>
                             <p class="empty-message">All users are assigned</p>
                             <p class="empty-hint">No available users to add to this team</p>
                         </div>
@@ -216,7 +216,7 @@
             <div class="card info-card">
                 <div class="card-body">
                     <div class="info-content">
-                        <div class="info-icon">💡</div>
+                        <div class="info-icon"><i class="ti ti-bulb"></i></div>
                         <h3>Team Members</h3>
                         <p>After creating the team, you'll be able to add members and manage team composition from this page.</p>
                     </div>
diff --git a/templates/time_tracking.html b/templates/time_tracking.html
index 20b6c2e..093bd59 100644
--- a/templates/time_tracking.html
+++ b/templates/time_tracking.html
@@ -1,1235 +1,6 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="time-tracking-container">
-    <!-- Header Section -->
-    <div class="page-header">
-        <div class="header-content">
-            <div class="header-left">
-                <h1 class="page-title">
-                    <i class="ti ti-clock page-icon"></i>
-                    Time Tracking
-                </h1>
-                <p class="page-subtitle">Track your work hours efficiently</p>
-            </div>
-            <div class="header-actions">
-                <button id="manual-entry-btn" class="btn btn-secondary">
-                    <i class="ti ti-pencil"></i>
-                    Manual Entry
-                </button>
-                <a href="{{ url_for('analytics') }}" class="btn btn-secondary">
-                    <i class="ti ti-chart-bar"></i>
-                    View Analytics
-                </a>
-            </div>
-        </div>
-    </div>
-
-    <!-- Timer Section -->
-    <div class="timer-section">
-        {% if active_entry %}
-        <!-- Active Timer -->
-        <div class="timer-card active">
-            <div class="timer-display">
-                <div class="timer-value" id="timer"
-                     data-start="{{ active_entry.arrival_time.timestamp() }}"
-                     data-breaks="{{ active_entry.total_break_duration }}"
-                     data-paused="{{ 'true' if active_entry.is_paused else 'false' }}">
-                    00:00:00
-                </div>
-                <div class="timer-status">
-                    {% if active_entry.is_paused %}
-                        <span class="status-badge paused">On Break</span>
-                    {% else %}
-                        <span class="status-badge active">Working</span>
-                    {% endif %}
-                </div>
-            </div>
-            
-            <div class="timer-info">
-                <div class="info-row">
-                    <span class="info-label">Started:</span>
-                    <span class="info-value">{{ active_entry.arrival_time|format_datetime }}</span>
-                </div>
-                
-                {% if active_entry.project %}
-                <div class="info-row">
-                    <span class="info-label">Project:</span>
-                    <span class="info-value project-badge" style="background-color: {{ active_entry.project.color or '#667eea' }}">
-                        {{ active_entry.project.code }} - {{ active_entry.project.name }}
-                    </span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.task %}
-                <div class="info-row">
-                    <span class="info-label">Task:</span>
-                    <span class="info-value task-badge">
-                        {{ active_entry.task.title }}
-                    </span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.notes %}
-                <div class="info-row">
-                    <span class="info-label">Notes:</span>
-                    <span class="info-value">{{ active_entry.notes }}</span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.is_paused %}
-                <div class="info-row">
-                    <span class="info-label">Break started:</span>
-                    <span class="info-value">{{ active_entry.pause_start_time|format_time }}</span>
-                </div>
-                {% endif %}
-                
-                {% if active_entry.total_break_duration > 0 %}
-                <div class="info-row">
-                    <span class="info-label">Total breaks:</span>
-                    <span class="info-value">{{ active_entry.total_break_duration|format_duration }}</span>
-                </div>
-                {% endif %}
-            </div>
-            
-            <div class="timer-actions">
-                <button id="pause-btn" class="btn {% if active_entry.is_paused %}btn-success{% else %}btn-warning{% endif %}" 
-                        data-id="{{ active_entry.id }}">
-                    {% if active_entry.is_paused %}
-                        <i class="ti ti-player-play"></i>
-                        Resume Work
-                    {% else %}
-                        <i class="ti ti-player-pause"></i>
-                        Take Break
-                    {% endif %}
-                </button>
-                <button id="leave-btn" class="btn btn-danger" data-id="{{ active_entry.id }}">
-                    <i class="ti ti-player-stop"></i>
-                    Stop Working
-                </button>
-            </div>
-        </div>
-        {% else %}
-        <!-- Inactive Timer -->
-        <div class="timer-card inactive">
-            <div class="start-work-container">
-                <h2>Start Tracking Time</h2>
-                <p>Select a project and task to begin tracking your work</p>
-                
-                <form id="start-work-form" class="modern-form">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label for="project-select" class="form-label">
-                                Project <span class="optional-badge">Optional</span>
-                            </label>
-                            <select id="project-select" name="project_id" class="form-control">
-                                <option value="">No specific project</option>
-                                {% for project in available_projects %}
-                                <option value="{{ project.id }}" data-color="{{ project.color or '#667eea' }}">
-                                    {{ project.code }} - {{ project.name }}
-                                </option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        
-                        <div class="form-group">
-                            <label for="task-select" class="form-label">
-                                Task <span class="optional-badge">Optional</span>
-                            </label>
-                            <select id="task-select" name="task_id" class="form-control" disabled>
-                                <option value="">Select a project first</option>
-                            </select>
-                        </div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="work-notes" class="form-label">
-                            Notes <span class="optional-badge">Optional</span>
-                        </label>
-                        <textarea id="work-notes" name="notes" class="form-control" 
-                                  rows="2" placeholder="What are you working on?"></textarea>
-                    </div>
-                    
-                    <div class="form-actions">
-                        <button type="submit" id="arrive-btn" class="btn btn-primary btn-large">
-                            <i class="ti ti-player-play"></i>
-                            Start Working
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Quick Stats -->
-    <div class="stats-section">
-        <div class="stat-card">
-            <div class="stat-value">{{ today_hours|format_duration }}</div>
-            <div class="stat-label">Today</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{{ week_hours|format_duration }}</div>
-            <div class="stat-label">This Week</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{{ month_hours|format_duration }}</div>
-            <div class="stat-label">This Month</div>
-        </div>
-        <div class="stat-card">
-            <div class="stat-value">{{ active_projects|length }}</div>
-            <div class="stat-label">Active Projects</div>
-        </div>
-    </div>
-
-    <!-- Recent Entries -->
-    <div class="entries-section">
-        <div class="section-header">
-            <h2 class="section-title">
-                <i class="ti ti-clipboard-list"></i>
-                Recent Time Entries
-            </h2>
-            <div class="view-toggle">
-                <button class="toggle-btn active" data-view="list">
-                    <i class="ti ti-list"></i>
-                    List
-                </button>
-                <button class="toggle-btn" data-view="grid">
-                    <i class="ti ti-layout-grid"></i>
-                    Grid
-                </button>
-            </div>
-        </div>
-
-        <!-- List View -->
-        <div id="list-view" class="view-container active">
-            {% if history %}
-            <div class="entries-table-container">
-                <table class="entries-table">
-                    <thead>
-                        <tr>
-                            <th>Date</th>
-                            <th>Time</th>
-                            <th>Project / Task</th>
-                            <th>Duration</th>
-                            <th>Break</th>
-                            <th>Notes</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for entry in history %}
-                        <tr data-entry-id="{{ entry.id }}" class="entry-row">
-                            <td>
-                                <div class="date-cell">
-                                    <span class="date-day">{{ entry.arrival_time.strftime('%d') }}</span>
-                                    <span class="date-month">{{ entry.arrival_time.strftime('%b') }}</span>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="time-cell">
-                                    <span class="time-start">{{ entry.arrival_time|format_time }}</span>
-                                    <span class="time-separator"><i class="ti ti-arrow-right"></i></span>
-                                    <span class="time-end">{{ entry.departure_time|format_time if entry.departure_time else 'Active' }}</span>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="project-task-cell">
-                                    {% if entry.project %}
-                                    <span class="project-tag" style="background-color: {{ entry.project.color or '#667eea' }}">
-                                        {{ entry.project.code }}
-                                    </span>
-                                    {% endif %}
-                                    {% if entry.task %}
-                                    <span class="task-name">{{ entry.task.title }}</span>
-                                    {% elif entry.project %}
-                                    <span class="project-name">{{ entry.project.name }}</span>
-                                    {% else %}
-                                    <span class="no-project">No project</span>
-                                    {% endif %}
-                                </div>
-                            </td>
-                            <td>
-                                <span class="duration-badge">
-                                    {{ entry.duration|format_duration if entry.duration is not none else 'In progress' }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="break-duration">
-                                    {{ entry.total_break_duration|format_duration if entry.total_break_duration else '-' }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="notes-preview" title="{{ entry.notes or '' }}">
-                                    {{ entry.notes[:30] + '...' if entry.notes and entry.notes|length > 30 else entry.notes or '-' }}
-                                </span>
-                            </td>
-                            <td>
-                                <div class="actions-cell">
-                                    {% if entry.departure_time and not active_entry %}
-                                        {% if entry.arrival_time.date() >= today %}
-                                    <button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Resume">
-                                        <i class="ti ti-refresh"></i>
-                                    </button>
-                                        {% else %}
-                                    <button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Cannot resume entries from previous days" disabled style="opacity: 0.5; cursor: not-allowed;">
-                                        <i class="ti ti-refresh"></i>
-                                    </button>
-                                        {% endif %}
-                                    {% endif %}
-                                    <button class="btn-icon edit-entry-btn" data-id="{{ entry.id }}" title="Edit">
-                                        <i class="ti ti-pencil"></i>
-                                    </button>
-                                    <button class="btn-icon delete-entry-btn" data-id="{{ entry.id }}" title="Delete">
-                                        <i class="ti ti-trash"></i>
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-            {% else %}
-            <div class="empty-state">
-                <div class="empty-icon"><i class="ti ti-mail-opened" style="font-size: 4rem;"></i></div>
-                <h3>No time entries yet</h3>
-                <p>Start tracking your time to see entries here</p>
-            </div>
-            {% endif %}
-        </div>
-
-        <!-- Grid View -->
-        <div id="grid-view" class="view-container">
-            <div class="entries-grid">
-                {% for entry in history %}
-                <div class="entry-card" data-entry-id="{{ entry.id }}">
-                    <div class="entry-header">
-                        <div class="entry-date">
-                            {{ entry.arrival_time.strftime('%d %b %Y') }}
-                        </div>
-                        <div class="entry-duration">
-                            {{ entry.duration|format_duration if entry.duration is not none else 'Active' }}
-                        </div>
-                    </div>
-                    
-                    <div class="entry-body">
-                        {% if entry.project %}
-                        <div class="entry-project" style="border-left-color: {{ entry.project.color or '#667eea' }}">
-                            <strong>{{ entry.project.code }}</strong> - {{ entry.project.name }}
-                        </div>
-                        {% endif %}
-                        
-                        {% if entry.task %}
-                        <div class="entry-task">
-                            <i class="ti ti-clipboard-list"></i> {{ entry.task.title }}
-                        </div>
-                        {% endif %}
-                        
-                        <div class="entry-time">
-                            <i class="ti ti-clock"></i>
-                            {{ entry.arrival_time|format_time }} - {{ entry.departure_time|format_time if entry.departure_time else 'Active' }}
-                        </div>
-                        
-                        {% if entry.notes %}
-                        <div class="entry-notes">
-                            <i class="ti ti-notes"></i>
-                            {{ entry.notes }}
-                        </div>
-                        {% endif %}
-                    </div>
-                    
-                    <div class="entry-footer">
-                        <button class="btn-sm edit-entry-btn" data-id="{{ entry.id }}">Edit</button>
-                        <button class="btn-sm btn-danger delete-entry-btn" data-id="{{ entry.id }}">Delete</button>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Modals will go here -->
-<!-- Edit Entry Modal -->
-<div id="edit-modal" class="modal">
-    <div class="modal-overlay"></div>
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3 class="modal-title">Edit Time Entry</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <form id="edit-entry-form" class="modern-form">
-                <input type="hidden" id="edit-entry-id">
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="edit-arrival-date" class="form-label">Start Date</label>
-                        <input type="date" id="edit-arrival-date" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-arrival-time" class="form-label">Start Time</label>
-                        <input type="time" id="edit-arrival-time" class="form-control" required step="60">
-                    </div>
-                </div>
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="edit-departure-date" class="form-label">End Date</label>
-                        <input type="date" id="edit-departure-date" class="form-control">
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-departure-time" class="form-label">End Time</label>
-                        <input type="time" id="edit-departure-time" class="form-control" step="60">
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-project" class="form-label">Project</label>
-                    <select id="edit-project" class="form-control">
-                        <option value="">No specific project</option>
-                        {% for project in available_projects %}
-                        <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="edit-notes" class="form-label">Notes</label>
-                    <textarea id="edit-notes" class="form-control" rows="3"></textarea>
-                </div>
-                
-                <div class="form-actions">
-                    <button type="submit" class="btn btn-primary">Save Changes</button>
-                    <button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Manual Entry Modal -->
-<div id="manual-modal" class="modal">
-    <div class="modal-overlay"></div>
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3 class="modal-title">Add Manual Time Entry</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <form id="manual-entry-form" class="modern-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="manual-start-date" class="form-label">Start Date</label>
-                        <input type="date" id="manual-start-date" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="manual-start-time" class="form-label">Start Time</label>
-                        <input type="time" id="manual-start-time" class="form-control" required step="60">
-                    </div>
-                </div>
-                
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="manual-end-date" class="form-label">End Date</label>
-                        <input type="date" id="manual-end-date" class="form-control" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="manual-end-time" class="form-label">End Time</label>
-                        <input type="time" id="manual-end-time" class="form-control" required step="60">
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-project" class="form-label">Project</label>
-                    <select id="manual-project" name="project_id" class="form-control">
-                        <option value="">No specific project</option>
-                        {% for project in available_projects %}
-                        <option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-task" class="form-label">Task</label>
-                    <select id="manual-task" name="task_id" class="form-control" disabled>
-                        <option value="">Select a project first</option>
-                    </select>
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-break" class="form-label">Break Duration (minutes)</label>
-                    <input type="number" id="manual-break" class="form-control" min="0" value="0">
-                </div>
-                
-                <div class="form-group">
-                    <label for="manual-notes" class="form-label">Notes</label>
-                    <textarea id="manual-notes" class="form-control" rows="3" placeholder="Description of work performed"></textarea>
-                </div>
-                
-                <div class="form-actions">
-                    <button type="submit" class="btn btn-primary">Add Entry</button>
-                    <button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<!-- Delete Confirmation Modal -->
-<div id="delete-modal" class="modal">
-    <div class="modal-overlay"></div>
-    <div class="modal-content modal-small">
-        <div class="modal-header">
-            <h3 class="modal-title">Confirm Deletion</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
-            <input type="hidden" id="delete-entry-id">
-        </div>
-        <div class="modal-footer">
-            <button id="confirm-delete" class="btn btn-danger">Delete Entry</button>
-            <button class="btn btn-ghost modal-cancel">Cancel</button>
-        </div>
-    </div>
-</div>
-
-<style>
-/* Container */
-.time-tracking-container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-/* Page Header - reuse existing styles */
-.page-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 16px;
-    padding: 2rem;
-    color: white;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
-}
-
-.header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 2rem;
-}
-
-.page-title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.page-icon {
-    font-size: 2.5rem;
-    display: inline-block;
-    animation: float 3s ease-in-out infinite;
-}
-
-@keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-}
-
-.page-subtitle {
-    font-size: 1.1rem;
-    opacity: 0.9;
-    margin: 0.5rem 0 0 0;
-}
-
-.header-actions {
-    display: flex;
-    gap: 1rem;
-}
-
-/* Timer Section */
-.timer-section {
-    margin-bottom: 2rem;
-}
-
-.timer-card {
-    background: white;
-    border-radius: 16px;
-    padding: 2rem;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e5e7eb;
-}
-
-.timer-card.active {
-    border: 2px solid #10b981;
-    background: linear-gradient(135deg, #10b98110 0%, #059b6910 100%);
-}
-
-.timer-display {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.timer-value {
-    font-size: 4rem;
-    font-weight: 700;
-    color: #1f2937;
-    font-family: 'Monaco', 'Courier New', monospace;
-    letter-spacing: 0.1em;
-}
-
-.timer-status {
-    margin-top: 0.5rem;
-}
-
-.status-badge {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.status-badge.active {
-    background: #10b981;
-    color: white;
-}
-
-.status-badge.paused {
-    background: #f59e0b;
-    color: white;
-}
-
-.timer-info {
-    background: #f8f9fa;
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-}
-
-.info-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #e5e7eb;
-}
-
-.info-row:last-child {
-    border-bottom: none;
-}
-
-.info-label {
-    font-weight: 600;
-    color: #6b7280;
-}
-
-.info-value {
-    color: #1f2937;
-}
-
-.project-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: 16px;
-    color: white;
-    font-size: 0.875rem;
-    font-weight: 500;
-}
-
-.task-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: #e5e7eb;
-    border-radius: 8px;
-    font-size: 0.875rem;
-}
-
-.timer-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-}
-
-/* Start Work Form */
-.start-work-container {
-    text-align: center;
-}
-
-.start-work-container h2 {
-    font-size: 1.75rem;
-    color: #1f2937;
-    margin-bottom: 0.5rem;
-}
-
-.start-work-container p {
-    color: #6b7280;
-    margin-bottom: 2rem;
-}
-
-.modern-form {
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.form-label {
-    font-weight: 600;
-    color: #374151;
-    font-size: 0.95rem;
-}
-
-.optional-badge {
-    background: #e5e7eb;
-    color: #6b7280;
-    padding: 0.125rem 0.5rem;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    margin-left: 0.5rem;
-}
-
-.form-control {
-    padding: 0.75rem 1rem;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 1rem;
-    transition: all 0.2s ease;
-    background-color: #f9fafb;
-}
-
-.form-control:focus {
-    outline: none;
-    border-color: #667eea;
-    background-color: white;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.form-actions {
-    margin-top: 1.5rem;
-}
-
-/* Stats Section */
-.stats-section {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-}
-
-.stat-card {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 12px;
-    text-align: center;
-    border: 1px solid #e5e7eb;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    transition: all 0.3s ease;
-}
-
-.stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.stat-value {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    color: #667eea;
-}
-
-.stat-label {
-    font-size: 0.9rem;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 600;
-}
-
-/* Entries Section */
-.entries-section {
-    background: white;
-    border-radius: 16px;
-    padding: 2rem;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-    border: 1px solid #e5e7eb;
-}
-
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-}
-
-.section-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.view-toggle {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.toggle-btn {
-    padding: 0.5rem 1rem;
-    border: 2px solid #e5e7eb;
-    background: white;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    font-weight: 500;
-}
-
-.toggle-btn.active {
-    background: #667eea;
-    color: white;
-    border-color: #667eea;
-}
-
-.view-container {
-    display: none;
-}
-
-.view-container.active {
-    display: block;
-}
-
-/* Table Styles */
-.entries-table-container {
-    overflow-x: auto;
-}
-
-.entries-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.entries-table th {
-    text-align: left;
-    padding: 1rem;
-    border-bottom: 2px solid #e5e7eb;
-    font-weight: 600;
-    color: #374151;
-    background: #f8f9fa;
-}
-
-.entries-table td {
-    padding: 1rem;
-    border-bottom: 1px solid #e5e7eb;
-}
-
-.entry-row:hover {
-    background: #f8f9fa;
-}
-
-.date-cell {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.date-day {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #1f2937;
-}
-
-.date-month {
-    font-size: 0.875rem;
-    color: #6b7280;
-    text-transform: uppercase;
-}
-
-.time-cell {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-family: 'Monaco', 'Courier New', monospace;
-}
-
-.time-separator {
-    color: #9ca3af;
-}
-
-.project-task-cell {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.project-tag {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    color: white;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.task-name,
-.project-name {
-    color: #374151;
-}
-
-.no-project {
-    color: #9ca3af;
-    font-style: italic;
-}
-
-.duration-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: #ede9fe;
-    color: #5b21b6;
-    border-radius: 16px;
-    font-weight: 600;
-    font-size: 0.875rem;
-}
-
-.break-duration {
-    color: #6b7280;
-}
-
-.notes-preview {
-    color: #6b7280;
-    font-size: 0.875rem;
-}
-
-.actions-cell {
-    display: flex;
-    gap: 0.5rem;
-}
-
-/* Grid View */
-.entries-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 1.5rem;
-}
-
-.entry-card {
-    background: #f8f9fa;
-    border-radius: 12px;
-    padding: 1.5rem;
-    border: 1px solid #e5e7eb;
-    transition: all 0.3s ease;
-}
-
-.entry-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
-}
-
-.entry-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.entry-date {
-    font-weight: 600;
-    color: #374151;
-}
-
-.entry-duration {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #667eea;
-}
-
-.entry-body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.entry-project {
-    padding-left: 1rem;
-    border-left: 4px solid;
-}
-
-.entry-task,
-.entry-time,
-.entry-notes {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    color: #6b7280;
-    font-size: 0.875rem;
-}
-
-.entry-footer {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #e5e7eb;
-}
-
-/* Buttons */
-.btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-}
-
-.btn-large {
-    padding: 1rem 2rem;
-    font-size: 1.125rem;
-}
-
-.btn-sm {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-}
-
-.btn-icon {
-    padding: 0.5rem;
-    border: 1px solid #e5e7eb;
-    background: white;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-icon:hover {
-    background: #f3f4f6;
-    transform: translateY(-2px);
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-}
-
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.btn-secondary {
-    background: white;
-    color: #4b5563;
-    border: 2px solid #e5e7eb;
-}
-
-.btn-secondary:hover {
-    background: #f3f4f6;
-}
-
-.btn-success {
-    background: #10b981;
-    color: white;
-}
-
-.btn-success:hover {
-    background: #059669;
-    transform: translateY(-2px);
-}
-
-.btn-warning {
-    background: #f59e0b;
-    color: white;
-}
-
-.btn-warning:hover {
-    background: #d97706;
-    transform: translateY(-2px);
-}
-
-.btn-danger {
-    background: #ef4444;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #dc2626;
-    transform: translateY(-2px);
-}
-
-.btn-ghost {
-    background: transparent;
-    color: #6b7280;
-}
-
-.btn-ghost:hover {
-    color: #374151;
-    background: #f3f4f6;
-}
-
-/* Empty State */
-.empty-state {
-    text-align: center;
-    padding: 4rem 2rem;
-}
-
-.empty-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-}
-
-.empty-state h3 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin-bottom: 0.5rem;
-}
-
-.empty-state p {
-    color: #6b7280;
-}
-
-/* Modal Styles */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-}
-
-.modal-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-}
-
-.modal-content {
-    position: relative;
-    background: white;
-    border-radius: 16px;
-    max-width: 600px;
-    margin: 5vh auto;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
-}
-
-.modal-small {
-    max-width: 400px;
-}
-
-.modal-header {
-    padding: 2rem;
-    border-bottom: 1px solid #e5e7eb;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0;
-}
-
-.modal-close {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: #6b7280;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-}
-
-.modal-close:hover {
-    background: #f3f4f6;
-    color: #1f2937;
-}
-
-.modal-body {
-    padding: 2rem;
-}
-
-.modal-footer {
-    padding: 1.5rem 2rem;
-    border-top: 1px solid #e5e7eb;
-    display: flex;
-    justify-content: flex-end;
-    gap: 1rem;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .time-tracking-container {
-        padding: 1rem;
-    }
-    
-    .form-row {
-        grid-template-columns: 1fr;
-    }
-    
-    .timer-value {
-        font-size: 3rem;
-    }
-    
-    .entries-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .entries-table {
-        font-size: 0.875rem;
-    }
-    
-    .entries-table th,
-    .entries-table td {
-        padding: 0.5rem;
-    }
-}
-</style>
-
-<script src="{{ url_for('static', filename='js/timer.js') }}"></script>
-<script src="{{ url_for('static', filename='js/time-tracking.js') }}"></script>
+<!-- Include the shared time tracking interface -->
+{% include '_time_tracking_interface.html' %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/unified_task_management.html b/templates/unified_task_management.html
index bb5e9bb..e8b00a6 100644
--- a/templates/unified_task_management.html
+++ b/templates/unified_task_management.html
@@ -10,7 +10,7 @@
             <div class="smart-search-container">
                 <div class="smart-search-box">
                     <input type="text" id="smart-search-input" class="smart-search-input" placeholder="Search tasks... (e.g., my-tasks priority:high, project:TimeTrack, overdue)">
-                    <button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search">×</button>
+                    <button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search"><i class="ti ti-x"></i></button>
                 </div>
                 <div class="smart-search-suggestions" id="smart-search-suggestions" style="display: none;">
                     <!-- Suggestions will be populated here -->