diff --git a/Client/Pages/Index.razor.css b/Client/Pages/Index.razor.css
index a466d3c..9a7d49d 100644
--- a/Client/Pages/Index.razor.css
+++ b/Client/Pages/Index.razor.css
@@ -1,13 +1,49 @@
 /* Top navigation buttons */
 .top-nav-buttons {
-    position: fixed;
-    top: 60px;
-    right: 24px;
     display: flex;
-    gap: 10px;
-    z-index: 1000;
-    padding: 14px 0;
-    background-color: transparent;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+/* Month selection buttons */
+.month-selection {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Action buttons container */
+.action-buttons {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+/* Month navigation buttons */
+.month-btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid #1b6ec2;
+    background-color: #fff;
+    color: #1b6ec2;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.month-btn:hover {
+    background-color: #f8f9fa;
+}
+
+.month-btn.selected {
+    background-color: #1b6ec2;
+    color: #fff;
+}
+
+.month-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
 /* Loading overlay */
@@ -41,47 +77,56 @@
 /* Calendar container */
 .calendar-grid {
     display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 10px;
-    margin: 20px 0;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
 }
 
 /* Each day cell */
 .day-cell {
-    border: 1px solid #ccc;
+    border: 1px solid #dee2e6;
     border-radius: 8px;
-    padding: 10px;
-    text-align: center;
-    background-color: #f9f9f9;
+    padding: 1rem;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 /* Day number */
-.day-cell > div:first-child {
+.day-header {
     font-weight: bold;
-    margin-bottom: 5px;
+    margin-bottom: 0.5rem;
+    color: #333;
+    font-size: 0.9rem;
 }
 
 /* Shift buttons container */
 .shifts {
-    display: flex;
-    justify-content: center;
-    gap: 5px;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
 /* Individual shift buttons */
 .shift-button {
-    border: 1px solid #888;
-    border-radius: 5px;
-    padding: 5px 8px;
-    background-color: white;
+    border: 2px solid #ddd;
+    border-radius: 6px;
+    padding: 0.5rem;
+    background-color: #fff;
     cursor: pointer;
-    font-size: 18px;
+    font-size: 1.2rem;
     transition: all 0.2s ease;
+    text-align: center;
+    min-height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .shift-button:hover {
-    background-color: #e0e0e0;
+    background-color: #f8f9fa;
+    border-color: #007bff;
+    transform: translateY(-1px);
 }
 
 /* Selected shift */
diff --git a/Client/wwwroot/css/app.css b/Client/wwwroot/css/app.css
index da047fa..8034dcc 100644
--- a/Client/wwwroot/css/app.css
+++ b/Client/wwwroot/css/app.css
@@ -99,226 +99,3 @@ a, .btn-link {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
-
-/* Shift Scheduler Specific Styles */
-.top-nav-buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.month-selection {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.action-buttons {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.month-btn {
-    padding: 0.5rem 1rem;
-    border: 2px solid #1b6ec2;
-    background-color: #fff;
-    color: #1b6ec2;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.month-btn:hover {
-    background-color: #f8f9fa;
-}
-
-.month-btn.selected {
-    background-color: #1b6ec2;
-    color: #fff;
-}
-
-.month-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.calendar-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.day-cell {
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
-    padding: 1rem;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.day-header {
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid #dee2e6;
-}
-
-.shifts {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.shift-button {
-    padding: 0.25rem 0.5rem;
-    border: 2px solid transparent;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 1.2rem;
-}
-
-.shift-button:hover {
-    background-color: #e9ecef;
-    border-color: #dee2e6;
-}
-
-.shift-button.selected {
-    background-color: #1b6ec2;
-    color: #fff;
-    border-color: #1861ac;
-}
-
-.shift-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.tooltip-wrapper {
-    position: relative;
-    display: inline-block;
-}
-
-.tooltip {
-    visibility: hidden;
-    position: absolute;
-    bottom: 125%;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #333;
-    color: #fff;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    white-space: nowrap;
-    z-index: 1;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.tooltip-wrapper:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-}
-
-.shift-times, .transport-info {
-    font-size: 0.8rem;
-    color: #6c757d;
-    margin-top: 0.25rem;
-}
-
-.loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.loading-content {
-    text-align: center;
-}
-
-.loading-spinner {
-    font-size: 2rem;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-
-.alert {
-    padding: 0.75rem 1.25rem;
-    margin-bottom: 1rem;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    position: relative;
-}
-
-.alert-danger {
-    color: #721c24;
-    background-color: #f8d7da;
-    border-color: #f5c6cb;
-}
-
-.alert-success {
-    color: #155724;
-    background-color: #d4edda;
-    border-color: #c3e6cb;
-}
-
-.btn-close {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    background: none;
-    border: none;
-    font-size: 1.25rem;
-    cursor: pointer;
-    opacity: 0.5;
-}
-
-.btn-close:hover {
-    opacity: 1;
-}
-
-.reset-btn {
-    background-color: #dc3545;
-    color: #fff;
-    border: 1px solid #dc3545;
-    padding: 0.375rem 0.75rem;
-    border-radius: 0.25rem;
-    cursor: pointer;
-}
-
-.reset-btn:hover {
-    background-color: #c82333;
-    border-color: #bd2130;
-}
-
-.export-btn, .config-btn {
-    background-color: #28a745;
-    color: #fff;
-    border: 1px solid #28a745;
-    padding: 0.375rem 0.75rem;
-    border-radius: 0.25rem;
-    cursor: pointer;
-}
-
-.export-btn:hover, .config-btn:hover {
-    background-color: #218838;
-    border-color: #1e7e34;
-}