From e379c99e19a02522ab48ada2aed48e83fb685390 Mon Sep 17 00:00:00 2001
From: ponselvajeganathan
 <68591831+ponselvajeganathan@users.noreply.github.com>
Date: Thu, 24 Sep 2026 12:03:05 +0530
Subject: [PATCH] 1049019: Improved UI on Appointment planner

---
 .../AppointmentPlanner/Components/App.razor   |   29 +-
 .../Components/Pages/About/About.razor        |  142 +-
 .../Pages/Dashboard/Dashboard.razor           | 1311 ++++++--
 .../Components/Pages/Doctors/Doctors.razor    |  398 ++-
 .../Pages/Doctors/DoctorsDetails.razor        |  281 +-
 .../Components/Pages/Patients/Patients.razor  |  159 +-
 .../Pages/Preference/Preference.razor         |  143 +-
 .../Components/Pages/Schedule/Schedule.razor  |  695 ++++-
 .../Data/AppointmentService.cs                |   14 +-
 .../Models/AppointmentModels.cs               |  327 +-
 .../Shared/MainLayout.razor                   |   55 +-
 .../wwwroot/css/appoinment/about.css          |  213 --
 .../wwwroot/css/appoinment/dashboard.css      |  362 ---
 .../wwwroot/css/appoinment/doctordetails.css  |  370 ---
 .../wwwroot/css/appoinment/preference.css     |   63 -
 .../wwwroot/css/appointment/about.css         |  402 +++
 .../assets/.gitkeep                           |    0
 .../assets/Icons/Doctors.svg                  |    0
 .../assets/Icons/ThisWeek_Widget.svg          |    0
 .../assets/Icons/Today_Widget.svg             |    0
 .../assets/favicon.ico                        |  Bin
 .../assets/fonts/icomoon.eot                  |  Bin
 .../assets/fonts/icomoon.svg                  |    0
 .../assets/fonts/icomoon.ttf                  |  Bin
 .../assets/fonts/icomoon.woff                 |  Bin
 .../assets/fonts/icons.eot                    |  Bin
 .../assets/fonts/icons.svg                    |    0
 .../assets/fonts/icons.ttf                    |  Bin
 .../assets/fonts/icons.woff                   |  Bin
 .../assets/images/Admin.png                   |  Bin
 .../assets/images/AlexaRichardson.png         |  Bin
 .../assets/images/AmeliaEdwards.png           |  Bin
 .../assets/images/MollieCobb.png              |  Bin
 .../assets/images/NemboLukni.png              |  Bin
 .../assets/images/NoutGolstein.png            |  Bin
 .../assets/images/PaulWalker.png              |  Bin
 .../assets/images/YaraBarros.png              |  Bin
 .../assets/images/default.png                 |  Bin
 .../assets/styles/bootstrap.css               |    0
 .../assets/styles/bootstrap.scss              |    0
 .../wwwroot/css/appointment}/calendar.css     |  753 ++++-
 .../{appoinment => appointment}/common.css    |   12 +-
 .../wwwroot/css/appointment/dashboard.css     | 2700 +++++++++++++++++
 .../{appoinment => appointment}/doctor.css    |  468 ++-
 .../wwwroot/css/appointment/doctordetails.css |  345 +++
 .../doctoreditdialog.css                      |    0
 .../wwwroot/css/appointment/main.css          |  340 +++
 .../css/{appoinment => appointment}/mark.svg  |    0
 .../{appoinment => appointment}/patients.css  |  163 +-
 .../wwwroot/css/appointment/preference.css    |  245 ++
 .../css/{appoinment/main.css => sidebar.css}  |   89 +-
 .../AppointmentPlanner/wwwroot/css/site.css   |   31 +-
 .../Pages/About/About.razor                   |  142 +-
 .../Pages/AppointmentModels.cs                |  327 +-
 .../Pages/AppointmentService.cs               |   14 +-
 .../Pages/Dashboard/Dashboard.razor           | 1313 ++++++--
 .../Pages/Doctors/Doctors.razor               |  456 ++-
 .../Pages/Doctors/DoctorsDetails.razor        |  281 +-
 .../Pages/Patients/Patients.razor             |  167 +-
 .../Pages/Preference/Preference.razor         |  145 +-
 .../Pages/Schedule/Schedule.razor             |  704 ++++-
 .../Shared/MainLayout.razor                   |   57 +-
 .../AppointmentPlanner/Components/App.razor   |   46 +-
 .../wwwroot/css/appoinment/about.css          |  213 --
 .../wwwroot/css/appoinment/dashboard.css      |  362 ---
 .../wwwroot/css/appoinment/doctordetails.css  |  370 ---
 .../wwwroot/css/appoinment/patients.css       |  236 --
 .../wwwroot/css/appoinment/preference.css     |   63 -
 .../wwwroot/css/appointment/about.css         |  402 +++
 .../assets/.gitkeep                           |    0
 .../assets/Icons/Doctors.svg                  |    0
 .../assets/Icons/ThisWeek_Widget.svg          |    0
 .../assets/Icons/Today_Widget.svg             |    0
 .../assets/favicon.ico                        |  Bin
 .../assets/fonts/icomoon.eot                  |  Bin
 .../assets/fonts/icomoon.svg                  |    0
 .../assets/fonts/icomoon.ttf                  |  Bin
 .../assets/fonts/icomoon.woff                 |  Bin
 .../assets/fonts/icons.eot                    |  Bin
 .../assets/fonts/icons.svg                    |    0
 .../assets/fonts/icons.ttf                    |  Bin
 .../assets/fonts/icons.woff                   |  Bin
 .../assets/images/Admin.png                   |  Bin
 .../assets/images/AlexaRichardson.png         |  Bin
 .../assets/images/AmeliaEdwards.png           |  Bin
 .../assets/images/MollieCobb.png              |  Bin
 .../assets/images/NemboLukni.png              |  Bin
 .../assets/images/NoutGolstein.png            |  Bin
 .../assets/images/PaulWalker.png              |  Bin
 .../assets/images/YaraBarros.png              |  Bin
 .../assets/images/default.png                 |  Bin
 .../assets/styles/bootstrap.css               |    0
 .../assets/styles/bootstrap.scss              |    0
 .../wwwroot/css/appointment}/calendar.css     |  753 ++++-
 .../{appoinment => appointment}/common.css    |   14 +-
 .../wwwroot/css/appointment/dashboard.css     | 2700 +++++++++++++++++
 .../{appoinment => appointment}/doctor.css    |  491 ++-
 .../wwwroot/css/appointment/doctordetails.css |  345 +++
 .../doctoreditdialog.css                      |    0
 .../wwwroot/css/appointment/main.css          |  340 +++
 .../css/{appoinment => appointment}/mark.svg  |    0
 .../wwwroot/css/appointment/patients.css      |  381 +++
 .../wwwroot/css/appointment/preference.css    |  245 ++
 .../css/{appoinment/main.css => sidebar.css}  |  361 +--
 .../AppointmentPlanner/wwwroot/css/site.css   |   35 +-
 105 files changed, 17094 insertions(+), 3979 deletions(-)
 delete mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appoinment/about.css
 delete mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css
 delete mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css
 delete mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appoinment/preference.css
 create mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appointment/about.css
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/.gitkeep (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/Icons/Doctors.svg (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/Icons/ThisWeek_Widget.svg (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/Icons/Today_Widget.svg (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/favicon.ico (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.eot (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.svg (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.ttf (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.woff (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.eot (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.svg (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.ttf (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.woff (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/Admin.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/AlexaRichardson.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/AmeliaEdwards.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/MollieCobb.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/NemboLukni.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/NoutGolstein.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/PaulWalker.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/YaraBarros.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/default.png (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/styles/bootstrap.css (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/styles/bootstrap.scss (100%)
 rename webapp/{wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment => server/AppointmentPlanner/wwwroot/css/appointment}/calendar.css (67%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/common.css (86%)
 create mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appointment/dashboard.css
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/doctor.css (66%)
 create mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/doctoreditdialog.css (100%)
 create mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appointment/main.css
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/mark.svg (100%)
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/patients.css (73%)
 create mode 100644 webapp/server/AppointmentPlanner/wwwroot/css/appointment/preference.css
 rename webapp/server/AppointmentPlanner/wwwroot/css/{appoinment/main.css => sidebar.css} (87%)
 delete mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/about.css
 delete mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css
 delete mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css
 delete mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/patients.css
 delete mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/preference.css
 create mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/about.css
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/.gitkeep (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/Icons/Doctors.svg (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/Icons/ThisWeek_Widget.svg (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/Icons/Today_Widget.svg (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/favicon.ico (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.eot (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.svg (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.ttf (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icomoon.woff (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.eot (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.svg (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.ttf (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/fonts/icons.woff (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/Admin.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/AlexaRichardson.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/AmeliaEdwards.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/MollieCobb.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/NemboLukni.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/NoutGolstein.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/PaulWalker.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/YaraBarros.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/images/default.png (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/styles/bootstrap.css (100%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/assets/styles/bootstrap.scss (100%)
 rename webapp/{server/AppointmentPlanner/wwwroot/css/appoinment => wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment}/calendar.css (67%)
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/common.css (85%)
 create mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/dashboard.css
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/doctor.css (66%)
 create mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/doctoreditdialog.css (100%)
 create mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/main.css
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment => appointment}/mark.svg (100%)
 create mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/patients.css
 create mode 100644 webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/preference.css
 rename webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/{appoinment/main.css => sidebar.css} (59%)

diff --git a/webapp/server/AppointmentPlanner/Components/App.razor b/webapp/server/AppointmentPlanner/Components/App.razor
index 1047ffb..8be12ab 100644
--- a/webapp/server/AppointmentPlanner/Components/App.razor
+++ b/webapp/server/AppointmentPlanner/Components/App.razor
@@ -36,7 +36,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Appointment Planner is a single page application for demonstrating Syncfusion Blazor Components features in a real-world scenario with dashboard like layout." />
-    <title>Appointment Planner - Syncfusion Blazor Components Showcase App</title>
+    <title>Appointment Scheduling Dashboard | Syncfusion Blazor</title>
+    
     <base href="/" />
     <link href=@Urihelper.Uri rel="canonical" />
     <ResourcePreloader />
@@ -45,17 +46,17 @@
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
     <ImportMap />
     <link href="@Assets["css/site.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/common.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/main.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/dashboard.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/doctor.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/doctordetails.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/patients.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/preference.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/calendar.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/doctoreditdialog.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/about.css"]" rel="stylesheet" />
-    <script src="@Assets["lodash.min.js"]"></script>
+    <link href="@Assets["css/sidebar.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/common.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/main.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/dashboard.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/doctor.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/doctordetails.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/patients.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/preference.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/calendar.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/doctoreditdialog.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/about.css"]" rel="stylesheet" />
     <script src="@Assets["_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"]" type="text/javascript"></script>
     <script type="text/javascript">
         if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
@@ -70,6 +71,9 @@
                 || navigator.userAgent.match(/BlackBerry/i)
                 || navigator.userAgent.match(/Windows Phone/i)) ? true : false;
         }
+            window.getViewportWidth = function () {
+                return window.innerWidth;
+            }
     </script>
     <HeadOutlet @rendermode="InteractiveServer" />
 </head>
@@ -87,7 +91,6 @@
     </noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div hidden id="sync-analytics" data-queue="Syncfusion - Showcase - Blazor - AppointmentPlanner"></div>
-    <ReconnectModal />
     <script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>
 
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/About/About.razor b/webapp/server/AppointmentPlanner/Components/Pages/About/About.razor
index 709db50..dd112dc 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/About/About.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/About/About.razor
@@ -3,91 +3,47 @@
 @if (isDataLoaded)
 {
 <div id="@aboutId" class="about-container">
-    <header>
+    <header class="about-header">
         <div class="module-title">
-            <div class='title'>ABOUT</div>
+            <h1 class='title'>About Appointment Planner</h1>
             <div class='underline'></div>
         </div>
+        <span class="showcase-count">@showcaseComponents.Count components</span>
     </header>
-    <p>
-        This Example Clinic demo application showcases several Syncfusion Blazor UI components together in a real-world application scenario. 
-        You can explore the <a href="https://github.com/syncfusion/blazor-showcase-appointment-planner" target="_blank">source code</a> of this application and use it as a
-        reference for integrating Syncfusion Blazor UI components in your applications.
-    </p>
-    <div class='list-heading'>List of Syncfusion Blazor UI components used in this sample</div>
-    <div class='about-component'>
-        <div class='control-item'>
-            <span class="sfimage-schedule e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app" target="_blank">Schedule</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-grid e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app" target="_blank">Grid</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-chart e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/chart/getting-started" target="_blank">Chart</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-treeview e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/treeview/getting-started-with-server-app" target="_blank">TreeView</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-listview e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/listview/getting-started-with-server-app" target="_blank">ListView</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-dropdownlist e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-server-app" target="_blank">DropDownList</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-datepicker e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-server-app" target="_blank">DatePicker</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-timepicker e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/timepicker/getting-started" target="_blank">TimePicker</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-dialog e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/dialog/getting-started-with-server-app" target="_blank">Dialog</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-sidebar e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/sidebar/getting-started" target="_blank">Sidebar</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-textboxes e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/textbox/getting-started-with-server-app" target="_blank">TextBox</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-button e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/button/getting-started-with-server-app" target="_blank">Button</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-toast e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/toast/getting-started" target="_blank">Toast</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-checkbox e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/check-box/getting-started-with-server-app" target="_blank">CheckBox</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-skeleton e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/skeleton/getting-started" target="_blank">Skeleton</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-appbar e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/appbar/getting-started-with-server-app" target="_blank">AppBar</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-predefineddialogs e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/predefined-dialogs/getting-started-with-server-app" target="_blank">Predefined Dialogs</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-message e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/message/getting-started-with-server-app" target="_blank">Message</a>
+    <div class="about-hero">
+        <div class="hero-copy">
+            <span class="eyebrow">SYNCFUSION BLAZOR SHOWCASE</span>
+            <h2>Real clinic workflows, built with composable UI.</h2>
+            <p>This example clinic brings scheduling, patient management, doctor availability, and operational insights together in one working application.</p>
+            <div class="hero-actions">
+                <a class="e-btn e-primary" href="https://github.com/syncfusion/blazor-showcase-appointment-planner" target="_blank" rel="noopener">View source code</a>
+                <a class="e-btn e-outline" href="https://blazor.syncfusion.com/" target="_blank" rel="noopener">Explore Syncfusion Blazor</a>
+            </div>
         </div>
+
+    </div>
+    <div class="component-heading">
+        <div><h2>Components in this sample</h2><p>See how each control supports a real workflow.</p></div>
+    </div>
+    <div class="about-component-groups">
+        @foreach (var group in showcaseComponents.GroupBy(item => item.Category))
+        {
+            <section class="component-group">
+                <h3>@group.Key</h3>
+                <div class="component-grid">
+                    @foreach (var item in group)
+                    {
+                        <SfCard CssClass="showcase-component-card">
+                            <CardContent>
+                                <span class="@item.Icon e-sb-icon control-icon"></span>
+                                <div class="component-card-copy"><strong>@item.Name</strong><span>@item.Description</span></div>
+                                <a class="component-link" href="@item.Url" target="_blank" rel="noopener" aria-label="Open @item.Name documentation">Docs <span class="e-icons e-arrow-right"></span></a>
+                            </CardContent>
+                        </SfCard>
+                    }
+                </div>
+            </section>
+        }
     </div>
 </div>
 }
@@ -120,19 +76,37 @@ else
     private bool isDataLoaded;
     private string aboutId;
 
-    private async void LoadData()
+    private readonly List<ShowcaseComponent> showcaseComponents = new()
+    {
+        new("Scheduling", "Schedule", "sfimage-schedule", "Resource-based appointment planning.", "https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app"),
+        new("Data and analytics", "Grid", "sfimage-grid", "Searchable patient administration.", "https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app"),
+        new("Data and analytics", "Chart", "sfimage-chart", "Visual appointment trends.", "https://blazor.syncfusion.com/documentation/chart/getting-started"),
+        new("Forms and input", "DropDownList", "sfimage-dropdownlist", "Fast filtering and configuration.", "https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-server-app"),
+        new("Forms and input", "DatePicker", "sfimage-datepicker", "Date-aware appointment forms.", "https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-server-app"),
+        new("Forms and input", "TextBox", "sfimage-textboxes", "Validated patient and doctor fields.", "https://blazor.syncfusion.com/documentation/textbox/getting-started-with-server-app"),
+        new("Dialogs and feedback", "Dialog", "sfimage-dialog", "Focused add, edit, and review flows.", "https://blazor.syncfusion.com/documentation/dialog/getting-started-with-server-app"),
+        new("Dialogs and feedback", "Predefined Dialogs", "sf-icon-predefineddialogs", "Clear confirmation workflows.", "https://blazor.syncfusion.com/documentation/predefined-dialogs/getting-started-with-server-app"),
+        new("Dialogs and feedback", "Message", "sf-icon-message", "Inline status communication.", "https://blazor.syncfusion.com/documentation/message/getting-started-with-server-app"),
+        new("Navigation and layout", "Sidebar", "sfimage-sidebar", "Persistent application navigation.", "https://blazor.syncfusion.com/documentation/sidebar/getting-started"),
+       new("Navigation and layout", "Button", "sfimage-button", "Explicit workflow actions.", "https://blazor.syncfusion.com/documentation/button/getting-started-with-server-app"),
+        new("Loading", "Skeleton", "sf-icon-skeleton", "Comfortable loading transitions.", "https://blazor.syncfusion.com/documentation/skeleton/getting-started")
+    };
+
+    private async Task LoadData()
     {
         this.aboutId = "about";
         await Task.Delay(100);
         isDataLoaded = true;
-        StateHasChanged();
+        await InvokeAsync(StateHasChanged);
     }
 
-    protected override void OnAfterRender(bool firstRender)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            LoadData();
+            await LoadData();
         }
     }
+
+    private sealed record ShowcaseComponent(string Category, string Name, string Icon, string Description, string Url);
 }
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/Dashboard/Dashboard.razor b/webapp/server/AppointmentPlanner/Components/Pages/Dashboard/Dashboard.razor
index 41055c1..eabdcbd 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/Dashboard/Dashboard.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/Dashboard/Dashboard.razor
@@ -4,153 +4,549 @@
 @using AppointmentPlanner.Data;
 @using AppointmentPlanner.Models;
 @using System;
+@using System.Linq;
+@using System.Threading;
+@implements IDisposable
 
-@if(isDataLoaded){
-<div id="dashboard" class="planner-dashboard">
-    <div class="row content view-detail-display" style="margin: 0px;">
-        <div class="col-lg-8 col-md-8 col-sm-8">
-            <div class="row">
-                <div class="col-lg-6 col-md-6 col-sm-6 text-display">
-                    <div class="e-card card day-events-container">
-                        <div class="e-card-content">
-                            <span class="card-text label-text">Total Appointments - Today</span>
-                            <div class="count-container">
-                                <span class="icon-day"><img src="css/appoinment/assets/Icons/Today_Widget.svg" alt="Today" /></span>
-                                <span class="day-event-count">@dayEventCount</span>
-                            </div>
+@if (isDataLoaded)
+{
+    <div id="dashboard-modern" class="dashboard-container" @onclick="CloseMonthPicker">
+
+        <!-- ============ Top header =========== -->
+              <header class="page-header">
+            <div class="page-title-wrap">
+                <h6>Good Morning, Admin</h6>
+                <span class="page-meta"><p class="page-meta-text">Last refreshed @lastUpdated · data updates live</p></span>
+            </div>
+
+            <div class="page-header-actions">
+                <span class="global-search-wrap">
+                    <span class="e-icons e-search search-icon" aria-hidden="true"></span>
+                    <input type="text"
+                           placeholder="Search patients, reasons…"
+                           aria-label="Search patients or appointment reasons"
+                           @bind="searchText"
+                           @bind:event="oninput"
+                           role="searchbox"
+                           aria-describedby="search-help" />
+                </span>
+                <span id="search-help" style="display:none;">Filter patients and appointment reasons in real time</span>
+
+                <button type="button" class="ai-button" aria-label="Open AI assistant for clinical briefing"
+                        @onclick=@(() => showAI = true)>
+                    <span class="e-icons e-assist" aria-hidden="true"></span>
+                    Ask AI
+                </button>
+            </div>
+        </header>
+         @if (CriticalPatients > 0)
+        {
+            <div class="critical-banner" role="alert">
+                <span class="banner-icon e-icons e-status-info" aria-hidden="true"></span>
+                <div class="banner-text">
+                    <strong>@CriticalPatients critical patient@(CriticalPatients == 1 ? "" : "s") need immediate attention</strong>
+                    <span class="banner-meta">Last check @lastUpdated · highest priority first</span>
+                </div>
+                <button type="button" class="banner-cta" @onclick=@(() => { severityFilter = "Critical"; activeTab = "Daily"; })>Triage queue</button>
+            </div>
+        }
+
+
+      <!-- ============ Primary CTA strip (P0: dashboard must be action-oriented) ============ -->
+        <div class="cta-strip" role="toolbar" aria-label="Quick actions">
+            <div class="cta-wrap" style="position:relative;">
+                <button type="button" class="cta-primary" @onclick="StartNextConsultation">
+                    <span class="e-icons e-plus" style="font-size:14px;" aria-hidden="true"></span>
+                    Start next consultation
+                </button>
+            </div>
+            <div class="cta-wrap" style="position:relative;">
+                <button type="button" class="cta-secondary" aria-expanded="@showScheduleCalendar"
+                        @onclick="ToggleScheduleCalendar">
+                    <span class="e-icons e-icon-calendar" style="font-size:14px;" aria-hidden="true"></span>
+                    Schedule appointment
+                </button>
+
+                @if (showScheduleCalendar)
+                {
+                    <div class="schedule-popup" role="dialog" aria-label="Pick a date for the appointment">
+                        <div class="schedule-popup-head">Schedule on a date</div>
+                        <SfCalendar TValue="DateTime?"
+                                    Min="@calendarMin"
+                                    Max="@calendarMax"
+                                    Value="@Today">
+                            <CalendarEvents TValue="DateTime?" ValueChange="OnScheduleDatePicked"></CalendarEvents>
+                        </SfCalendar>
+                    </div>
+                }
+            </div>
+            <div class="cta-live" aria-live="polite">
+                <span class="pulse-dot" aria-hidden="true"></span>
+                <span>Live — @ConsultationCount doctors available</span>
+            </div>
+        </div>
+
+
+        <!-- ============ Two-column hero: left = 4 KPI cards + 2 charts, right = Patient Overview ============ -->
+        <div class="dash-hero">
+            <div class="dash-hero-left">
+                <!-- 4-card colored metric strip -->
+                <div class="dashboard-kpi-strip">
+                    <SfCard CssClass="modern-kpi" ID="active-patients-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Active Patients</span>
+                        <span class="kpi-icon kpi-patient" aria-hidden="true">
+                            <span class="e-icons e-people"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Active patients: @totalPatients">@totalPatients</div>
+
+                    <div class="kpi-trend @(totalPatientsTrend < 0 ? "negative" : totalPatientsTrend > 0 ? "positive" : "neutral")" title="vs previous week" aria-label="@(totalPatientsTrend < 0 ? "Down" : totalPatientsTrend > 0 ? "Up" : "No change") @Math.Abs(totalPatientsTrend)% this week">
+                        @(totalPatientsTrend < 0 ? "↓" : totalPatientsTrend > 0 ? "↑" : "→") @Math.Abs(totalPatientsTrend)% <span class="kpi-trend-meta">this week</span>
+                    </div>
+
+                    <SfSparkline TValue="TrendPoint"
+                                Height="45px"
+                                DataSource="@patientSpark"
+                                aria-label="Active patients trend, last 7 days">
+                        <SparklineValueType ValueType="SparklineValueType.Numeric">
+                        </SparklineValueType>
+                    </SfSparkline>
+
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="modern-kpi" ID="waiting-patients-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Waiting</span>
+                        <span class="kpi-icon kpi-waiting" aria-hidden="true">
+                            <span class="e-icons e-clock"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Patients waiting: @WaitingCount">@WaitingCount</div>
+
+                    <div class="kpi-trend @(WaitingCount == 0 ? "neutral" : "positive")">
+                        @TotalPatientsInPeriod in active view
+                    </div>
+
+                    <div class="kpi-meter" role="img" aria-label="Waiting share of active view: @waitingShare%">
+                        <span style="width:@(waitingShare)%"></span>
+                    </div>
+
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="modern-kpi" ID="doctors-available-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Doctors Available</span>
+                        <span class="kpi-icon kpi-available" aria-hidden="true">
+                            <span class="e-icons e-user"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Doctors available: @ConsultationCount of @doctorCount">@ConsultationCount<span class="kpi-sub">/@doctorCount</span></div>
+
+                    <div class="kpi-trend neutral">
+                        @doctorUtilization% utilisation now
+                    </div>
+
+                    <div class="kpi-meter" role="img" aria-label="Doctor utilisation: @doctorUtilization%">
+                        <span style="width:@(doctorUtilization)%"></span>
+                    </div>
+
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="modern-kpi" ID="completed-visits-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Completed Visits</span>
+                        <span class="kpi-icon kpi-completed" aria-hidden="true">
+                            <span class="e-icons e-check"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Completed visits: @CompletedCount of @TotalPatientsInPeriod in active view">@CompletedCount<span class="kpi-sub">/@TotalPatientsInPeriod</span></div>
+
+                    <div class="kpi-trend @(appointmentsTrend < 0 ? "negative" : appointmentsTrend > 0 ? "positive" : "neutral")" title="vs previous week" aria-label="@(appointmentsTrend < 0 ? "Down" : appointmentsTrend > 0 ? "Up" : "No change") @Math.Abs(appointmentsTrend)% throughput">
+                        @(appointmentsTrend < 0 ? "↓" : appointmentsTrend > 0 ? "↑" : "→") @Math.Abs(appointmentsTrend)% <span class="kpi-trend-meta">throughput</span>
+                    </div>
+
+                    <div class="kpi-meter" role="img" aria-label="Completion rate: @completionRate%">
+                        <span style="width:@(completionRate)%"></span>
+                    </div>
+
+                </CardContent>
+            </SfCard>
+         </div>
+
+                <!-- Bar + Line charts row -->
+                <div class="dash-row-2col">
+                    <!-- Daily Appointment Stats (bar chart with tooltip) -->
+                    <div class="dash-card">
+                        <div class="dash-card-header">
+                            <h3 class="dash-card-title">Daily Appointment Stats</h3>
+                            <button class="dash-card-actions" title="More" aria-label="More">⋯</button>
                         </div>
+                        <SfChart Height="220px" Width="100%">
+                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
+                            <ChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
+                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryXAxis>
+                            <ChartPrimaryYAxis Minimum="0" Maximum="@dailyYMax" Interval="@dailyYInterval">
+                                <ChartAxisMajorGridLines Color="#eef2f7" Width="1"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryYAxis>
+                            <ChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Top"
+                                                 Alignment="Syncfusion.Blazor.Charts.Alignment.Center"></ChartLegendSettings>
+                            <ChartSeriesCollection>
+                                <ChartSeries DataSource="@dailyAppointments"
+                                             Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"
+                                             XName="Day" YName="Clinic" Name="Clinic"
+                                             Fill="#0a8a8a" ColumnSpacing="0.35">
+                                    <ChartCornerRadius TopLeft="6" TopRight="6"></ChartCornerRadius>
+                                </ChartSeries>
+                                <ChartSeries DataSource="@dailyAppointments"
+                                             Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"
+                                             XName="Day" YName="Online" Name="Online"
+                                             Fill="#94a3b8" ColumnSpacing="0.35">
+                                    <ChartCornerRadius TopLeft="6" TopRight="6"></ChartCornerRadius>
+                                </ChartSeries>
+                            </ChartSeriesCollection>
+                        </SfChart>
                     </div>
-                </div>
-                <div class="col-lg-6 col-md-6 col-sm-6 text-display">
-                    <div class="e-card card week-events-container">
-                        <div class="e-card-content">
-                            <span class="card-text label-text">Total Appointments - This Week</span>
-                            <div class="count-container">
-                                <span class="icon-week"><img src="css/appoinment/assets/Icons/ThisWeek_Widget.svg" alt="ThisWeek" /></span>
-                                <span class="week-event-count">@weekEventCount</span>
-                            </div>
+
+                    <!-- Appointment Stats (line/spline) -->
+                    <div class="dash-card">
+                        <div class="dash-card-header">
+                            <h3 class="dash-card-title">Appointment Stats</h3>
+                            <button class="dash-card-actions" title="More" aria-label="More">⋯</button>
                         </div>
+                        <SfChart Height="220px" Width="100%">
+                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
+                            <ChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
+                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryXAxis>
+                            <ChartPrimaryYAxis Minimum="0" Maximum="@trendYMax" Interval="@trendYInterval">
+                                <ChartAxisMajorGridLines Color="#eef2f7" Width="1"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryYAxis>
+                            <ChartLegendSettings Visible="false"></ChartLegendSettings>
+                            <ChartSeriesCollection>
+                                <ChartSeries DataSource="@appointmentTrend"
+                                             Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline"
+                                             XName="Day" YName="Value"
+                                             Fill="#0a8a8a">
+                                    <ChartSeriesBorder Width="3" Color="#0a8a8a"></ChartSeriesBorder>
+                                    <ChartMarker Visible="true" Width="6" Height="6" Fill="#0a8a8a" Shape="Syncfusion.Blazor.Charts.ChartShape.Circle">
+                                    </ChartMarker>
+                                </ChartSeries>
+                            </ChartSeriesCollection>
+                        </SfChart>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-lg-12 col-md-12 col-sm-12 dashboard-control">
-                    <div class="e-card grid-container">
-                        <div class="e-card-header">
-                            <div class="e-card-header-caption">
-                                <div class="e-card-header-title">
-                                    <span class="label-text"> Today's Appointments</span><span class="link-text">
-                                        <NavLink class="nav-link" href="schedule">Book Appointments</NavLink>
-                                    </span>
-                                </div>
-                            </div>
+
+            <!-- Right side: Patient Overview (spans both rows of the hero) -->
+            <div class="dash-hero-right">
+                <div class="dash-card donut-card">
+                    <div class="dash-card-header">
+                        <h3 class="dash-card-title">Patient Overview</h3>
+                        <div class="donut-header-meta">
+                            @if (dominantSegment != null)
+                            {
+                                <span class="donut-delta @(dominantShare >= 50 ? "down" : "")"
+                                      title="Largest cohort">
+                                    @dominantSegment.Category @dominantShare%
+                                </span>
+                            }
+                            <button class="dash-card-actions" title="More" aria-label="More">⋯</button>
                         </div>
-                        <div class="e-card-content">
-                            <SfGrid id="Grid" DataSource="@appointments" Height="160px">
-                                <GridColumns>
-                                    <GridColumn Field="Time" HeaderText="Time" TextAlign="@TextAlign.Left" Width="80"></GridColumn>
-                                    <GridColumn Field="Name" HeaderText="Name" Width="120"></GridColumn>
-                                    <GridColumn HeaderText="Doctor Name" TextAlign="@TextAlign.Left" Width="150">
-                                        <Template>
-                                            <NavLink ActiveClass="doctors" Match="NavLinkMatch.Prefix" href="@($"doctors/doctorsdetails/{(context as Appointment).DoctorId}")">@((context as Appointment).DoctorName)</NavLink>
-                                        </Template>
-                                    </GridColumn>
-                                    <GridColumn Field="Symptoms" HeaderText="Symptoms" TextAlign="@TextAlign.Left" Width="150"></GridColumn>
-                                </GridColumns>
-                            </SfGrid>
+                    </div>
+                    <div class="donut-wrap">
+                        <SfAccumulationChart Width="100%" Height="100%">
+                            <AccumulationChartSeriesCollection>
+                                <AccumulationChartSeries
+                                    DataSource="@donutData"
+                                    XName="Category"
+                                    YName="Value"
+                                    InnerRadius="62%"
+                                    Type="Syncfusion.Blazor.Charts.AccumulationType.Pie"
+                                    PointColorMapping="Color"
+                                    Explode="false">
+                                    <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
+                                </AccumulationChartSeries>
+                            </AccumulationChartSeriesCollection>
+                            <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+                        </SfAccumulationChart>
+                        <div class="donut-center" aria-label="Total patients: @donutTotal">
+                            <div class="donut-total">@donutTotal</div>
+                            <div class="donut-sub">Patients</div>
                         </div>
+                        @foreach (var seg in donutData)
+                        {
+                            var idx = donutData.IndexOf(seg);
+                            var segShare = donutTotal > 0
+                                ? (int)Math.Round(seg.Value * 100.0 / Math.Max(1, donutTotal))
+                                : 0;
+                            <div class="donut-label donut-label-@idx" style="color:@seg.Color"
+                                 title="@seg.Category: @seg.Value patients (@segShare%)">
+                                <span class="donut-num">@seg.Value</span>
+                                <span class="donut-cat">@seg.Category</span>
+                                <span class="donut-pct">@segShare%</span>
+                            </div>
+                        }
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-lg-12 col-md-12 col-sm-12 dashboard-control">
-                    <div class="e-card chart-container">
-                        <div class="e-card-content">
-                            <SfChart Height="340px" Width="100%" Title="Consultation">
-                                <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
-                                <ChartTitleStyle TextAlignment="@Alignment.Near"></ChartTitleStyle>
-                                <ChartPrimaryXAxis Title="Date" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Interval="1" IntervalType="@IntervalType.Days" LabelFormat="MM/dd" Minimum="@firstDayOfWeek" Maximum="@max" EdgeLabelPlacement="@EdgeLabelPlacement.Hide">
-                                    <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
-                                    <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
-                                    <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
-                                </ChartPrimaryXAxis>
-                                <ChartPrimaryYAxis Title="Patient" Minimum="0" Maximum="6" Interval="2"></ChartPrimaryYAxis>
-                                <ChartLegendSettings Visible="true" Position="@LegendPosition.Top" Padding="20"></ChartLegendSettings>
-                                <ChartSeriesCollection>
-                                    <ChartSeries DataSource="@chartData" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" Width="2" XName="Date" YName="EventCount"
-                                                 Name="Diabetology" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Fill="#60F238">
-                                    </ChartSeries>
-                                    <ChartSeries DataSource="@chartData1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" Width="2" XName="Date" YName="EventCount"
-                                                 Name="Orthopaedics" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Fill="#388CF5">
-                                    </ChartSeries>
-                                    <ChartSeries DataSource="@chartData2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" Width="2" XName="Date" YName="EventCount"
-                                                 Name="Cardiology" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Fill="#F29438">
-                                    </ChartSeries>
-                                </ChartSeriesCollection>
-                            </SfChart>
+        </div>
+
+        <!-- ============ Bottom row: Patients table + Upcoming Appointments ============ -->
+        <div class="dash-row-bottom">
+            <div class="dash-card-grid">
+                <div class="dash-card-header">
+                    <h3 class="dash-card-title">Patients</h3>
+                    <div class="dash-tabs" role="tablist" aria-label="Queue period">
+                        @foreach (var t in patientTabs)
+                        {
+                            var tabName = t;
+                            <button type="button" role="tab" aria-selected="@(activeTab == tabName)"
+                                    class="dash-tab @(activeTab == tabName ? "active" : "")"
+                                    @onclick="@(() => activeTab = tabName)">@tabName</button>
+                        }
+                    </div>
+                </div>
+                <div class="patients-grid">
+                       @if (filteredPatients.Count() == 0)
+                    {
+                        <div class="patients-empty" role="status">
+                            <strong>No patients in this @activeTab view.</strong><br />
+                            Try switching the period tabs or <button type="button" class="link-btn" @onclick=@(() => severityFilter = null)>clear the severity filter</button>.
                         </div>
+                    }
+                    <SfGrid @ref="grid"
+                            DataSource="@filteredPatients"
+                            Height="340px"
+                            Width="100%"
+                            AllowPaging="false"
+                            AllowSorting="true"
+                            GridLines="Syncfusion.Blazor.Grids.GridLine.None"
+                            RowHeight="52" AllowTextWrap="true">
+                             
+                        <GridColumns> 
+                            <GridColumn Field="Name" HeaderText="Name"  Width="110" HeaderTextAlign="TextAlign.Center" >
+                                <Template>
+                                    @{
+                                        var row = (context as PatientRow);
+                                    }
+                                    <span class="pname">
+                                        <span class="pavatar">@row.Initial</span>
+                                        @row.Name
+                                    </span>
+                                </Template>
+                            </GridColumn>
+                            <GridColumn Field="Age" HeaderText="Age" Width="80" HeaderTextAlign="TextAlign.Center">
+                                <Template>
+                                    @{
+                                        var row = (context as PatientRow);
+                                    }
+                                    @row.Age years
+                                </Template>
+                            </GridColumn>
+                            <GridColumn Field="AppointmentDate" HeaderTextAlign="TextAlign.Center" HeaderText="Date &amp; Time" Width="180" Format="d MMM yyyy · h:mm tt" Type="Syncfusion.Blazor.Grids.ColumnType.DateTime" />
+                            <GridColumn Field="Reason" Width="120" HeaderText="Appointed For" />
+                            <GridColumn HeaderText="Priority"  Width="100" HeaderTextAlign="TextAlign.Center">
+                                <Template>
+                                    @{
+                                        var prow = (context as PatientRow);
+                                        var priorityText = GetPriority(prow);
+                                    }
+                                    <span class="@GetPriorityClass(prow)" title="@priorityText">@priorityText</span>
+                                </Template>
+                            </GridColumn>
+                        <GridColumn HeaderText="Actions" Width="250" HeaderTextAlign="TextAlign.Center">
+                            <Template>
+                                @{
+                                    var arow = (context as PatientRow);
+                                }
+                                @if (arow.IsCompleted)
+                                {
+                                    <span class="status-done" title="This appointment is completed">Completed</span>
+                                }
+                                else if (arow.IsCheckedIn)
+                                {
+                                    <span class="status-checkedin" title="Patient is in consultation">In consultation</span>
+                                    <button type="button" class="row-action-btn ghost"
+                                            @onclick=@(() => CompletePatient(arow))
+                                            aria-label="Mark @arow.Name as completed">Complete</button>
+                                }
+                                else
+                                {
+                                    <button type="button" class="row-action-btn"
+                                            @onclick=@(() => CheckInPatient(arow))
+                                            aria-label="Check in @arow.Name">Check In</button>
+                                    <button type="button" class="row-action-btn ghost"
+                                            @onclick=@(() => CompletePatient(arow))
+                                            aria-label="Mark @arow.Name as completed">Complete</button>
+                                }
+                            </Template>
+                        </GridColumn>
+                        </GridColumns>
+                    </SfGrid>
+                </div>
+            </div>
+
+            <!-- Upcoming Appointments -->
+            <div class="dash-card upcoming-card">
+                <div class="dash-card-header">
+                    <h3 class="dash-card-title">Upcoming Appointments</h3>
+                    <div class="upcoming-month">
+                        <button class="nav-btn" @onclick="PrevWeek" aria-label="Previous week">‹</button>
+                        <span class="month-label">@currentMonthLabel</span>
+                        <button class="nav-btn" @onclick="NextWeek" aria-label="Next week">›</button>
                     </div>
                 </div>
+                <div class="upcoming-week">
+                    @{
+                        var hasFutureDay = weekDays.Any(d => d.Date.Date >= Today.Date);
+                    }
+                    @if (!hasFutureDay)
+                    {
+                        <div class="upcoming-empty" style="grid-column: span 7;">No upcoming days in this week.</div>
+                    }
+                    else
+                    {
+                        @for (int i = 0; i < weekDays.Count; i++)
+                        {
+                            var dayIndex = i;
+                            var d = weekDays[dayIndex];
+                            var isPast = d.Date.Date < Today.Date;
+                            if (isPast) continue;
+                            <button class="day @(selectedDayIndex == dayIndex ? "selected" : "")"
+                                    @onclick="@(() => SelectDay(dayIndex))"
+                                    aria-label="@d.Short, @d.Number"
+                                    aria-pressed="@(selectedDayIndex == dayIndex)">
+                                @d.Short
+                                <span class="dnum">@d.Number</span>
+                            </button>
+                        }
+                    }
+                </div>
+                <div class="upcoming-list">
+                    @if (upcomingAppointments.Count == 0)
+                    {
+                        <div class="upcoming-empty" role="status">
+                            <strong>No appointments for this day.</strong>
+                            Pick another day or use › to move to next week.
+                        </div>
+                    }
+                    else
+                    {
+                        <ul class="upcoming-listview" role="list">
+                            @for (var idx = 0; idx < upcomingAppointments.Count; idx++)
+                            {
+                                var a = upcomingAppointments[idx];
+                                var itemKey = idx;
+                                <li class="upcoming-item" key="@itemKey">
+                                    <div class="uavatar" aria-hidden="true">@a.Initial</div>
+                                    <div class="uinfo">
+                                        <div class="uname">@a.Name</div>
+                                        <div class="utime">@a.Time · @a.Dept</div>
+                                    </div>
+                                    <div class="appointment-actions">
+                                        @if (a.IsCheckedIn)
+                                        {
+                                            <span class="checkedin-tag" title="Patient has been checked in">✓ Checked in</span>
+                                        }
+                                        else
+                                        {
+                                            <button type="button" class="row-action-btn"
+                                                    @onclick="@(() => CheckInUpcoming(a))"
+                                                    aria-label="Check in @a.Name for @a.Dept appointment">Check-In</button>
+                                        }
+                                    </div>
+                                </li>
+                            }
+                        </ul>
+                    }
+                </div>
             </div>
         </div>
-        <div class="col-lg-4 col-md-4 col-sm-4 list-display" style="padding-right: 0px;">
-            <div class="recent-activity">
-                <SfListView Height="100%" Width="100%" TValue="Activity" ShowHeader="true" DataSource="@activities" CssClass="activity-template" HeaderTitle="Recent Activities">
-                    <ListViewTemplates TValue="Activity">
-                        <Template>
-                            <div class="activity-container @((context as Activity).Type)">
-                                <div class="activity-message"><span class="type-name">@((context as Activity).Name)</span> - <span>@((context as Activity).Message)</span></div>
-                                <span class="activity-time">@(Service.TimeSince((context as Activity).ActivityTime))</span>
-                            </div>
-                        </Template>
-                    </ListViewTemplates>
-                    <ListViewFieldSettings TValue="Activity" Text="Name" Id="Name"></ListViewFieldSettings>
-                </SfListView>
+    </div>
+     <!-- Call feedback toast -->
+    @if (callingName != null)
+    {
+        <div class="call-toast" role="status" aria-live="polite">
+            <span class="e-icons e-phone" aria-hidden="true"></span>
+            Connecting call to <strong>@callingName</strong>…
+        </div>
+    }
+    @if (showAI)
+    {
+
+        <div class="ai-panel" role="dialog" aria-label="AI assistant briefing">
+            <div class="ai-panel-header">
+                <span class="e-icons e-assist ai-panel-icon" aria-hidden="true"></span>
+                <div class="ai-panel-title">
+                    <strong>AI Briefing</strong>
+                    <span>Generated from live clinic data</span>
+                </div>
+                <button type="button" class="ai-panel-close" aria-label="Close AI panel" @onclick="@(() => showAI = false)">✕</button>
             </div>
-            <div class="doctor-availability">
-                <SfListView Height="100%" Width="100%" TValue="Doctor" ShowHeader="true" DataSource="@availableDoctors" CssClass="e-list-template">
-                    <ListViewTemplates TValue="Doctor">
-                        <HeaderTemplate>
-                            <div class="availability-title">
-                                <span class="header-text">Doctor's Availability</span><span class="all-text">
-                                    <NavLink ActiveClass="doctors" Match="NavLinkMatch.Prefix" href="doctors">View All</NavLink>
-                                </span>
-                            </div>
-                        </HeaderTemplate>
-                        <Template>
-                            <div class="availabilty-container">
-                                <div class="image-container">
-                                    <span class="doctor-image">
-                                        <img src="css/appoinment/assets/images/@((context as Doctor).Text).png" alt="doctor avatar" /><span class="availability @((context as Doctor).Availability)"></span>
-                                    </span>
-                                </div>
-                                <div class="detail-container">
-                                    <span class="doctor-name">Dr.@((context as Doctor).Name)</span>
-                                    <span class="doctor-speciality">@getSpecializationText((context as Doctor).Specialization)</span>
-                                </div>
-                            </div>
-                        </Template>
-                    </ListViewTemplates>
-                    <ListViewFieldSettings TValue="Doctor" Text="Text" Id="Text"></ListViewFieldSettings>
-                </SfListView>
+
+            <div class="ai-panel-body">
+                <div class="ai-insight">
+                    <span class="ai-insight-dot danger"></span>
+                    <strong>@CriticalPatients critical patients</strong> aged 65+ are waiting — assign to the first available doctor.
+                </div>
+                <div class="ai-insight">
+                    <span class="ai-insight-dot warning"></span>
+                    <strong>@WaitingCount patients waiting</strong> across @ConsultationCount available doctors — current load @doctorUtilization%.
+                </div>
+                <div class="ai-insight">
+                    <span class="ai-insight-dot success"></span>
+                    <strong>@CompletedCount visits completed</strong> of @TotalPatientsInPeriod in the active view — @completionRate% completion rate.
+                </div>
+                <div class="ai-insight">
+                    <span class="ai-insight-dot info"></span>
+                    Busiest day is <strong>@BusiestDay</strong> — consider opening an extra online slot.
+                </div>
+            </div>
+
+            <div class="ai-panel-footer">
+                <span>Suggested follow-ups:</span>
+                <div class="ai-suggestions">
+                    <button type="button" class="ai-suggestion-chip" @onclick="@(() => { severityFilter = "Critical"; showAI = false; })">Triage critical</button>
+                    <button type="button" class="ai-suggestion-chip" @onclick="@(() => { activeTab = "Weekly"; showAI = false; })">View weekly load</button>
+                    <button type="button" class="ai-suggestion-chip" @onclick="@(() => { searchText = ""; severityFilter = null; showAI = false; })">Clear filters</button>
+                </div>
             </div>
         </div>
-    </div>
-</div>
+    }
 }
-else{
-    <div class="planner-dashboard-skeleton">
-        <div class="appointments-skeleton">
-            <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="780px" Width="90%"></SfSkeleton><br/>
-        </div>
-        <div class="activities-skeleton">
-            @for(int i=0; i < 10; i++)
-            {
-                <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="80%"></SfSkeleton>
-                <br />
-                <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="60%"></SfSkeleton>
-                <br /><br />
-            }
+else
+{
+    <div class="dash-skeleton">
+        <div class="sk-row">
+            <div class="sk-block"></div>
+            <div class="sk-block"></div>
+            <div class="sk-block"></div>
+            <div class="sk-block"></div>
         </div>
     </div>
 }
@@ -159,89 +555,652 @@ else{
 
     [Inject]
     protected AppointmentService Service { get; set; }
-    private string dayEventCount { get; set; }
-    private string weekEventCount { get; set; }
-    private List<Appointment> appointments { get; set; } = new List<Appointment>();
 
+    [Inject]
+    protected NavigationManager Urihelper { get; set; }
+    string lastUpdated => DateTime.Now.ToString("hh:mm:ss tt");
+    private bool showAI;
+
+    // ---- Today (live system date) ----
+    private DateTime _today = DateTime.Today;
+    private DateTime Today
+    {
+        get => _today;
+        set
+        {
+            if (value < new DateTime(1900, 1, 1)) value = new DateTime(1900, 1, 1);
+            if (value > new DateTime(2999, 12, 1)) value = new DateTime(2999, 12, 1);
+            _today = value;
+        }
+    }
+    private string currentMonthShort => Today.ToString("MMM yyyy");
+    private string currentMonthLabel => weekAnchor.ToString("MMMM");
+
+     public class TrendPoint
+    {
+        public int Value { get; set; }
+    }
 
-    private List<Activity> activities { get; set; }
-    public List<Doctor> availableDoctors { get; set; }
+    private List<TrendPoint> patientSpark =
+    [
+        new(){Value=10},
+        new(){Value=14},
+        new(){Value=8},
+        new(){Value=16},
+        new(){Value=18},
+        new(){Value=22},
+        new(){Value=27}
+    ];
 
-    private List<Patient> patients { get; set; }
+     private void CallUpcoming(Upcoming a)
+    {
+        if (a == null) return;
+        callingName = a.Name;
+        // Hide the toast after 3 seconds
+        _ = Task.Run(async () => { await Task.Delay(3000); callingName = null; await InvokeAsync(StateHasChanged); });
+        StateHasChanged();
+    }
 
-    private DateTime startDate { get; set; } = new DateTime(2020, 2, 5, 0, 0, 0, 0);
+    private string callingName;
 
-    private DateTime endDate { get; set; }
+      private void StartNextConsultation()
+    {
+        var next = allPatients
+            .Where(p => p.AppointmentDate.Date == Today.Date)
+            .Where(p => !checkedInUpcomingIds.Contains(p.HospitalId) && !completedUpcomingIds.Contains(p.HospitalId))
+            .OrderBy(p => p.AppointmentDate)
+            .FirstOrDefault();
+
+        if (next != null)
+        {
+            CheckInPatient(next);
+            callingName = next.Name;   // reuse the toast as a status confirmation
+            _ = Task.Run(async () => { await Task.Delay(3000); callingName = null; await InvokeAsync(StateHasChanged); });
+        }
+        activeTab = "Daily";
+    }
 
-    private DateTime firstDayOfWeek { get; set; }
-    private DateTime max { get; set; }
+    private int CriticalPatients =>
+        Service?.Patients?
+            .Count(p => GetAge(p.DOB) >= 65)
+        ?? 0;
 
-    private List<ChartData> chartData { get; set; }
-    private List<ChartData> chartData1 { get; set; }
-    private List<ChartData> chartData2 { get; set; }
-    private bool isDataLoaded;
+    private int WaitingCount =>
+         // Only patients who have not been checked in / completed are actually
+         filteredPatients.Count(p => !p.IsCheckedIn && !p.IsCompleted);
 
+    private int CriticalCount =>
+        filteredPatients.Count(p => p.Age >= 60);
 
-    protected override void OnInitialized()
+    private int ConsultationCount =>
+        Service?.Doctors?.Count(d =>
+            d.Availability?.ToLower() == "available") ?? 0;
+
+    private int CompletedCount =>
+        // Visits actually marked completed in the active view.
+        filteredPatients.Count(p => p.IsCompleted);
+
+    private void CheckInPatient(PatientRow row)
+    {
+        if (row == null || row.IsCheckedIn) return;
+        row.IsCheckedIn = true;
+        if (row.HospitalId > 0) checkedInUpcomingIds.Add(row.HospitalId);
+        RefreshPatientsPanels();
+    }
+
+    private void CompletePatient(PatientRow row)
+    {
+        if (row == null || row.IsCompleted) return;
+        row.IsCheckedIn = true;
+        row.IsCompleted = true;
+        if (row.HospitalId > 0)
+        {
+            checkedInUpcomingIds.Add(row.HospitalId);
+            completedUpcomingIds.Add(row.HospitalId);
+        }
+        RefreshPatientsPanels();
+    }
+
+    /// <summary>Re-syncs the day's upcoming list with shared state and refreshes both panels.</summary>
+    private void RefreshPatientsPanels()
+    {
+        SelectDay(selectedDayIndex);
+        grid?.Refresh();
+        StateHasChanged();
+    }
+
+    /// <summary>Checks an upcoming-appointment patient in (list on the right).</summary>
+    private void CheckInUpcoming(Upcoming a)
+    {
+        if (a == null || a.IsCheckedIn) return;
+        a.IsCheckedIn = true;
+        if (a.HospitalId > 0) checkedInUpcomingIds.Add(a.HospitalId);
+        RefreshPatientsPanels();
+    }
+    private SfGrid<PatientRow> grid;
+
+
+    // ---- CTA strip actions ----
+     private bool showScheduleCalendar { get; set; }
+
+    private void ToggleScheduleCalendar()
     {
-        availableDoctors = Service.Doctors;
+        showScheduleCalendar = !showScheduleCalendar;
+        if (showScheduleCalendar) StateHasChanged();
+    }
+
+     private void OnScheduleDatePicked(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)
+    {
+        if (args?.Value == null) return;
+        showScheduleCalendar = false;
+        Today = args.Value.Value;
+        weekAnchor = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday);
+        BuildWeek();
+        BuildWeekAppointments();
+        BuildPatients();
+        BuildDailyAppointments();
+        BuildAppointmentTrend();
+        BuildDonut();
+        activeTab = "Weekly";
+        Urihelper.NavigateTo("schedule");
+    }
 
+    // ---- Calendar bounds: past days are disabled — only Today and forward can be picked ----
+    private DateTime calendarMin => Today.Date;
+    private int TotalPatientsInPeriod => filteredPatients.Count();
+    private int waitingShare =>
+        TotalPatientsInPeriod == 0 ? 0 : (int)Math.Round(WaitingCount * 100.0 / TotalPatientsInPeriod);
+    private int doctorUtilization =>
+        doctorCount == 0 ? 0 : (int)Math.Round((double)ConsultationCount * 100 / doctorCount);
+    private int completionRate =>
+        TotalPatientsInPeriod == 0 ? 0 : (int)Math.Round((double)CompletedCount * 100 / TotalPatientsInPeriod);
 
-        activities = Service.Activities;
-        patients = Service.Patients;
-        firstDayOfWeek = Service.GetWeekFirstDate(Service.StartDate);
-        max = Service.GetWeekFirstDate(Service.StartDate).AddDays(6);
-        endDate = Service.StartDate.AddDays(1);       
+        private string BusiestDay =>
+        dailyAppointments.Count == 0 ? "—" :
+        dailyAppointments.OrderByDescending(d => d.Clinic + d.Online).First().Day;
+
+    private bool IsInCurrentWeek(DateTime date)
+    {
+        var weekStart = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday).Date;
+        var weekEnd = weekStart.AddDays(7);
+        return date.Date >= weekStart && date.Date < weekEnd;
     }
 
-    private List<Appointment> GetAppoinment(List<Hospital> currentDayEvents)
+    private string severityFilter { get; set; }
+
+    private void ToggleSeverity(string sev)
+        => severityFilter = severityFilter == sev ? null : sev;
+
+    private DateTime calendarMax
     {
-        List<Appointment> apts = new List<Appointment>();
-        foreach(var eventData in currentDayEvents)
+        get
         {
-            var filteredPatients = patients.Where(item => item.Id.Equals(eventData.PatientId)).FirstOrDefault();
-            var filteredDoctors = availableDoctors.Where(item => item.Id.Equals(eventData.DoctorId)).FirstOrDefault();
-            if (filteredPatients != null && filteredDoctors != null)
+            var safeYear = Math.Min(Today.Year, 2998);
+            var candidate = new DateTime(safeYear, Today.Month, 1).AddMonths(7).AddDays(-1);
+            if (candidate > new DateTime(2999, 12, 31)) candidate = new DateTime(2999, 12, 31);
+            return candidate;
+        }
+    }
+
+    // ---- KPI: dynamic metrics derived from service data ----
+    private int totalPatients => Service?.Patients?.Count ?? 0;
+    private int oldPatients => Service?.Patients?.Count(p => GetAge(p.DOB) >= 40) ?? 0;
+    private int newPatients => Service?.Patients?.Count(p => GetAge(p.DOB) < 25) ?? 0;
+    private int appointmentsCount => Service?.Hospitals?.Count ?? 0;
+    private int doctorCount => Service?.Doctors?.Count ?? 0;
+
+    // Trend percentages – signed week-over-week change computed from real rows
+    private int totalPatientsTrend => PeriodChange(appointmentsThisWeek, appointmentsLastWeek);
+    private int oldPatientsTrend => PeriodChange(oldPatients, appointmentsCount);
+    private int newPatientsTrend => PeriodChange(newPatients, doctorCount);
+    private int appointmentsTrend => PeriodChange(appointmentsThisWeek, appointmentsLastWeek);
+
+    private int PeriodChange(int current, int previous)
+    {
+        var cur = Math.Max(1, current);
+        var prev = Math.Max(1, previous);
+        return Math.Clamp((int)Math.Round((cur - prev) * 100.0 / prev), -99, 99);
+    }
+
+    private bool IsInPreviousWeek(DateTime date)
+    {
+        var weekStart = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday).AddDays(-7).Date;
+        var weekEnd = weekStart.AddDays(7);
+        return date.Date >= weekStart && date.Date < weekEnd;
+    }
+
+    // ---- Daily Appointment Stats (Clinic vs Online) ----
+    public class DayAppt { public string Day { get; set; } public double Clinic { get; set; } public double Online { get; set; } }
+    private List<DayAppt> dailyAppointments = new();
+    private double dailyYMax => NiceMax(dailyAppointments.Count == 0 ? 10 : dailyAppointments.Max(d => Math.Max(d.Clinic, d.Online)));
+    private double dailyYInterval => Math.Max(1, Math.Round(dailyYMax / 4, 0));
+
+    // ---- Appointment Trend (spline) ----
+    public class DayPoint { public string Day { get; set; } public double Value { get; set; } }
+    private List<DayPoint> appointmentTrend = new();
+    private double trendYMax => NiceMax(appointmentTrend.Count == 0 ? 10 : appointmentTrend.Max(d => d.Value));
+    private double trendYInterval => Math.Max(1, Math.Round(trendYMax / 5, 0));
+
+    // ---- Donut: Patient Overview (Child/Teen/Adult/Older) ----
+    public class DonutSlice
+    {
+        public string Category { get; set; }
+        public double Value { get; set; }
+        public string Color { get; set; }
+        /// <summary>Human-readable age span this cohort covers.</summary>
+        public string AgeRange { get; set; }
+        /// <summary>Live-computed share of the total, 0-100.</summary>
+        public int Share { get; set; }
+    }
+    private List<DonutSlice> donutData = new();
+    private int donutTotal => (int)donutData.Sum(d => d.Value);
+    private DonutSlice dominantSegment => donutTotal > 0
+        ? donutData.OrderByDescending(d => d.Value).FirstOrDefault()
+        : null;
+    private int dominantShare => (int)Math.Round(dominantSegment.Value * 100.0 / Math.Max(1, donutTotal));
+
+    // ---- Upcoming appointments ----
+    public class WeekDay { public string Short { get; set; } public int Number { get; set; } public DateTime Date { get; set; } }
+    public class Upcoming { public int HospitalId { get; set; } public string Name { get; set; } public string Time { get; set; } public string Dept { get; set; } public string StatusText { get; set; } public string StatusClass { get; set; } public string Initial { get; set; } public bool IsCheckedIn { get; set; } }
+
+    private DateTime weekAnchor = DateTime.Today;
+    private List<WeekDay> weekDays = new();
+    private int selectedDayIndex = 4;
+    private List<Upcoming> upcomingAppointments = new();
+
+    private Dictionary<DateTime, List<Hospital>> upcomingByDate = new();
+
+    private void BuildWeekAppointments()
+    {
+        upcomingByDate = new Dictionary<DateTime, List<Hospital>>();
+        if (Service?.Hospitals == null) return;
+
+        foreach (var h in Service.Hospitals)
+        {
+            var date = h.StartTime.Date;
+            if (!upcomingByDate.TryGetValue(date, out var list))
             {
-                apts.Add(new Appointment(Service.GetFormatDate(eventData.StartTime, "hh:mm tt"), filteredPatients.Name, filteredDoctors.Name, eventData.Symptoms, filteredDoctors.Id));
+                list = new List<Hospital>();
+                upcomingByDate[date] = list;
             }
+            list.Add(h);
         }
-        return apts;
     }
 
-    private DateTime AddDate(DateTime date, int value)
+    private List<Upcoming> GetUpcomingForDay(int idx)
     {
-        return date.AddDays(value);
+        if (Service?.Hospitals == null || weekDays.Count == 0) return new List<Upcoming>();
+
+        var dayDate = weekDays[Math.Clamp(idx, 0, weekDays.Count - 1)].Date.Date;
+        var docsById = Service.Doctors?.ToDictionary(d => d.Id) ?? new Dictionary<int, Doctor>();
+
+        if (!upcomingByDate.TryGetValue(dayDate, out var matches) || matches == null)
+            return new List<Upcoming>();
+
+        return matches
+            .OrderBy(h => h.StartTime)
+            .Select(h =>
+            {
+                var doc = docsById.TryGetValue(h.DoctorId, out var d) ? d : null;
+                var status = (doc?.Availability ?? "busy").ToLowerInvariant();
+                return new Upcoming
+                {
+                    HospitalId = h.Id,
+                    Name = h.Name,
+                    Time = h.StartTime.ToString("h:mmtt").ToLower(),
+                    Dept = h.DepartmentName,
+                    StatusText = status == "available" ? "Online" : "Offline",
+                    StatusClass = status == "available" ? "online" : "offline",
+                    Initial = GetInitials(h.Name),
+                    IsCheckedIn = checkedInUpcomingIds.Contains(h.Id) || completedUpcomingIds.Contains(h.Id)
+                };
+            }).ToList();
     }
 
-    private string getSpecializationText(string text)
+    private void BuildWeek()
     {
-        return Service.Specializations.Where(item => item.Id.Equals(text)).FirstOrDefault().Text.ToUpper();
+        weekDays = Enumerable.Range(0, 7)
+            .Select(i =>
+            {
+                var d = weekAnchor.AddDays(i);
+                return new WeekDay { Short = d.ToString("ddd").Substring(0, 3), Number = d.Day, Date = d };
+            })
+            .ToList();
     }
 
-    private async void LoadData()
+    private void SelectDay(int idx)
     {
-        List<Hospital> currentDayEvents = Service.GetFilteredData(startDate, endDate);
-        this.appointments = this.GetAppoinment(currentDayEvents);
-        List<Hospital> currentViewEvents = Service.GetFilteredData(firstDayOfWeek, this.AddDate(startDate, 6));
-        this.dayEventCount = currentDayEvents.Count().ToString();
-        this.weekEventCount = currentViewEvents.Count().ToString();
-        List<Hospital> diabetologyData = currentViewEvents.Where(item => item.DepartmentId == 5).ToList();
-        List<Hospital> orthopaedicsData = currentViewEvents.Where(item => item.DepartmentId == 4).ToList();
-        List<Hospital> cardiologyData = currentViewEvents.Where(item => item.DepartmentId == 6).ToList();
-        chartData = Service.GetAllChartPoints(diabetologyData, firstDayOfWeek);
-        chartData1 = Service.GetAllChartPoints(orthopaedicsData, firstDayOfWeek);
-        chartData2 = Service.GetAllChartPoints(cardiologyData, firstDayOfWeek);
-        await Task.Delay(500);
-        isDataLoaded = true;
-        StateHasChanged();
+        selectedDayIndex = idx;
+        upcomingAppointments = GetUpcomingForDay(idx);
+    }
+
+    private void PrevWeek()
+    {
+        var candidate = weekAnchor.AddDays(-7);
+        if (candidate.AddDays(6).Date < Today.Date) return;
+        weekAnchor = candidate;
+        BuildWeek();
+        BuildWeekAppointments();
+        var firstFuture = weekDays.FindIndex(d => d.Date.Date >= Today.Date);
+        SelectDay(firstFuture < 0 ? 0 : firstFuture);
+    }
+
+    private void NextWeek()
+    {
+        weekAnchor = weekAnchor.AddDays(7);
+        BuildWeek();
+        BuildWeekAppointments();
+        SelectDay(0);
+    }
+
+    // ---- Patients table ----
+    public class PatientRow
+    {
+        /// <summary>Id of the underlying appointment (Service.Hospitals) — links grid row to the upcoming list.</summary>
+        public int HospitalId { get; set; }
+        public string Name { get; set; }
+        public string Initial { get; set; }
+        public int Age { get; set; }
+        public DateTime AppointmentDate { get; set; }
+        public string DateTime { get; set; }
+        public string Reason { get; set; }
+        public bool IsCheckedIn { get; set; }
+        public bool IsCompleted { get; set; }
+    }
+
+    private string[] patientTabs = new[] { "Daily", "Weekly", "Monthly", "Yearly" };
+    private string activeTab = "Daily";
+    private string searchText { get; set; } = string.Empty;
+    private bool monthPickerOpen { get; set; }
+
+    private void ToggleMonthPicker() => monthPickerOpen = !monthPickerOpen;
+
+    private void CloseMonthPicker()
+    {
+        if (monthPickerOpen) monthPickerOpen = false;
+    }
+
+    private void OnMonthPicked(DateTime? picked)
+    {
+        if (!picked.HasValue) { monthPickerOpen = false; return; }
+        Today = picked.Value;
+        monthPickerOpen = false;
+        weekAnchor = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday);
+        BuildWeek();
+        BuildWeekAppointments();
+        BuildPatients();
+        BuildDailyAppointments();
+        BuildAppointmentTrend();
+        BuildDonut();
+        var firstFuture = weekDays.FindIndex(d => d.Date.Date >= Today.Date);
+        SelectDay(firstFuture < 0 ? 0 : firstFuture);
     }
 
-    protected override void OnAfterRender(bool firstRender)
+    private List<PatientRow> allPatients = new();
+    private IEnumerable<PatientRow> filteredPatients
+    {
+        get
+        {
+            IEnumerable<PatientRow> q = activeTab switch
+            {
+                "Daily"   => allPatients.Where(p => p.AppointmentDate.Date == Today.Date),
+                "Weekly"  => allPatients.Where(p => IsInCurrentWeek(p.AppointmentDate)),
+                "Monthly" => allPatients.Where(p => p.AppointmentDate.Year == Today.Year && p.AppointmentDate.Month == Today.Month),
+                "Yearly"  => allPatients.Where(p => p.AppointmentDate.Year == Today.Year),
+                _         => allPatients
+            };
+
+            if (!string.IsNullOrWhiteSpace(searchText))
+                q = q.Where(p => p.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase) || p.Reason.Contains(searchText, StringComparison.OrdinalIgnoreCase));
+
+            // Apply the shared check-in / completed state (tracked by appointment Id)
+            var result = q.OrderByDescending(p => p.AppointmentDate).ToList();
+            result.ForEach(ApplyRowState);
+            return result;
+        }
+    }
+
+     private int appointmentsThisWeek =>
+        allPatients.Count(p => IsInCurrentWeek(p.AppointmentDate));
+    private int appointmentsLastWeek =>
+        allPatients.Count(p => IsInPreviousWeek(p.AppointmentDate));
+
+    // ---- Build dynamic datasets from service ----
+    private void BuildPatients()
+    {
+        if (Service?.Hospitals == null) { allPatients = new List<PatientRow>(); return; }
+
+        var patientsById = Service.Patients?
+            .GroupBy(p => p.Id)
+            .ToDictionary(g => g.Key, g => g.First())
+            ?? new Dictionary<int, Patient>();
+
+        allPatients = Service.Hospitals
+            .OrderBy(h => h.StartTime)
+            .Select(h =>
+            {
+                patientsById.TryGetValue(h.PatientId, out var patient);
+                var matched = patient ?? Service.Patients?.FirstOrDefault(p => p.Name == h.Name);
+                return new PatientRow
+                {
+                    HospitalId = h.Id,
+                    Name = h.Name,
+                    Initial = GetInitials(h.Name),
+                    Age = matched == null ? 0 : GetAge(matched.DOB),
+                    AppointmentDate = h.StartTime,
+                    DateTime = h.StartTime.ToString("d MMM yyyy · h:mm tt"),
+                    Reason = h.Disease
+                };
+            })
+            .ToList();
+    }
+
+    /// <summary>Single source of truth for check-in / completed state per appointment Id.</summary>
+    private readonly HashSet<int> checkedInUpcomingIds = new();
+    private readonly HashSet<int> completedUpcomingIds = new();
+
+    /// <summary>Applies tracked check-in / completed state to a grid row.</summary>
+    private void ApplyRowState(PatientRow row)
+    {
+        if (row == null) return;
+        row.IsCheckedIn = checkedInUpcomingIds.Contains(row.HospitalId);
+        row.IsCompleted = completedUpcomingIds.Contains(row.HospitalId);
+    }
+
+    private void BuildDailyAppointments()
+    {
+        if (Service?.Hospitals == null) return;
+        var byDow = Service.Hospitals
+            .GroupBy(h => h.StartTime.DayOfWeek)
+            .ToDictionary(g => g.Key, g => g.Count());
+
+        var order = new[]
+        {
+            DayOfWeek.Saturday, DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday,
+            DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday
+        };
+        var labels = new[] { "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri" };
+
+        dailyAppointments = order.Select((dow, i) =>
+        {
+            var total = byDow.TryGetValue(dow, out var c) ? c : 0;
+            var clinic = Math.Round(total * 0.6, 0);
+            var online = total - clinic;
+            return new DayAppt { Day = labels[i], Clinic = clinic, Online = online };
+        }).ToList();
+    }
+
+    private void BuildAppointmentTrend()
+    {
+        if (Service?.Hospitals == null) return;
+        var byDow = Service.Hospitals
+            .GroupBy(h => h.StartTime.DayOfWeek)
+            .ToDictionary(g => g.Key, g => g.Count());
+
+        var order = new[]
+        {
+            DayOfWeek.Saturday, DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday,
+            DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday
+        };
+        var labels = new[] { "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri" };
+
+        appointmentTrend = order.Select((dow, i) => new DayPoint
+        {
+            Day = labels[i],
+            Value = byDow.TryGetValue(dow, out var c) ? c : 0
+        }).ToList();
+    }
+
+    private void BuildDonut()
+    {
+        if (Service?.Patients == null) return;
+        var groups = Service.Patients
+            .GroupBy(p => GetAgeBucket(GetAge(p.DOB)))
+            .ToDictionary(g => g.Key, g => g.Count());
+
+        var palette = new (string Cat, string Color, string Rng)[]
+        {
+            ("Child",  "#0a8a8a", "0–12 yrs"),
+            ("Teen",   "#f59e0b", "13–19 yrs"),
+            ("Adult",  "#ec4899", "20–39 yrs"),
+            ("Older",  "#a855f7", "40+ yrs"),
+        };
+        var temp = palette.Select(p => new DonutSlice
+        {
+            Category = p.Cat,
+            Color = p.Color,
+            AgeRange = p.Rng,
+            Value = groups.TryGetValue(p.Cat, out var c) ? c : 0
+        }).ToList();
+
+    
+        var total = temp.Sum(d => d.Value);
+        foreach (var d in temp) d.Share = total > 0 ? (int)Math.Round(d.Value * 100.0 / total) : 0;
+        donutData = temp;
+
+        if (donutTotal == 0)
+        {
+            donutData = palette.Select(p => new DonutSlice
+            {
+                Category = p.Cat,
+                Color = p.Color,
+                AgeRange = p.Rng,
+                Value = 1
+            }).ToList();
+        }
+    }
+
+    // ---- Helpers ----
+    private int GetAge(DateTime? dob)
+    {
+        if (!dob.HasValue) return 0;
+        var age = Today.Year - dob.Value.Year;
+        if (dob.Value.Date > Today.AddYears(-age)) age--;
+        return Math.Max(0, age);
+    }
+
+    private string GetAgeBucket(int age) => age switch
+    {
+        <= 12 => "Child",
+        <= 19 => "Teen",
+        <= 39 => "Adult",
+        _ => "Older"
+    };
+
+    private string GetInitials(string name)
+    {
+        if (string.IsNullOrWhiteSpace(name)) return "?";
+        var parts = name.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length == 1) return parts[0].Substring(0, Math.Min(2, parts[0].Length)).ToUpperInvariant();
+        return (parts[0][0].ToString() + parts[1][0].ToString()).ToUpperInvariant();
+    }
+
+    private string FormatCount(int n)
+    {
+        if (n >= 1000) return (n / 1000.0).ToString("0.#") + "K";
+        return n.ToString();
+    }
+
+    private double NiceMax(double v)
+    {
+        if (v <= 0) return 10;
+        var pow = Math.Pow(10, Math.Floor(Math.Log10(v)));
+        var n = v / pow;
+        double nice = n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10;
+        return nice * pow;
+    }
+
+     private string GetStatus(PatientRow row)
+        {
+            if (row == null)
+                return "Waiting";
+
+            if (row.Age >= 65)
+                return "Critical";
+
+            if (row.Age >= 40)
+                return "Moderate";
+
+            return "Waiting";
+        }
+
+        private string GetStatusClass(PatientRow row)
+        {
+            if (row == null)
+                return "waiting-chip";
+
+            if (row.Age >= 65)
+                return "critical-chip";
+
+            if (row.Age >= 40)
+                return "warning-chip";
+
+            return "waiting-chip";
+        }
+
+        private string GetPriority(PatientRow row)
+        {
+            if (row == null) return "Normal";
+            if (row.Age >= 65) return "Urgent";
+            if (row.Age >= 40) return "High";
+            return "Normal";
+        }
+
+        private string GetPriorityClass(PatientRow row)
+        {
+            if (row == null) return "priority-normal-chip";
+            if (row.Age >= 65) return "priority-urgent-chip";
+            if (row.Age >= 40) return "priority-high-chip";
+            return "priority-normal-chip";
+        }
+
+    // ---- Lifecycle ----
+    private bool isDataLoaded;
+    //private SfGrid<PatientRow> grid;
+
+    protected override void OnInitialized()
+    {
+        weekAnchor = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday);
+        BuildWeek();
+        BuildWeekAppointments();
+        BuildPatients();
+        BuildDailyAppointments();
+        BuildAppointmentTrend();
+        BuildDonut();
+        var firstFuture = weekDays.FindIndex(d => d.Date.Date >= Today.Date);
+        selectedDayIndex = firstFuture < 0 ? 0 : firstFuture;
+        SelectDay(selectedDayIndex);
+    }
+
+    protected async override Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            LoadData();
+            await Task.Delay(120);
+            isDataLoaded = true;
+            StateHasChanged();
         }
     }
+
+    public void Dispose() { }
 }
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/Doctors/Doctors.razor b/webapp/server/AppointmentPlanner/Components/Pages/Doctors/Doctors.razor
index 38ae097..ab7ffec 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/Doctors/Doctors.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/Doctors/Doctors.razor
@@ -9,71 +9,237 @@
 <div class="deleted-msg">
     <SfMessage Severity="MessageSeverity.Success" Visible=@Service.ShowDeleteMsg>The Doctor's details have been deleted successfully.</SfMessage>
 </div>
-<div id="doctors" class="doctors-wrapper">
-    <header>
-        <div class="module-title">
-            <div class="title">DOCTORS LIST</div>
-            <div class="underline"></div>
-        </div>
-        <div class="add-doctor" @onclick="@onAddDoctor">
-            <div class="e-icon-add e-icons"></div>
-            <div class="add-doctor-label">Add New</div>
+<div id="doctors" class="doctors-dashboard">
+
+    <div class="page-header">
+
+        <div>
+            <h2>Doctors</h2>
+            <p class="page-subtitle">
+                Manage doctors, specialties and schedules
+            </p>
         </div>
-    </header>
-    <div class="specialization-detail-wrapper">
-        <div class="specialization-types">
-            <SfDropDownList @ref="specObj" TItem="Specialization" TValue="string" Width="200px" ShowClearButton="true" DataSource="@specializationData" Placeholder="Select a Specialization" PopupHeight="230px">
-                <DropDownListEvents TItem="Specialization" TValue="string" ValueChange="@onSpecializationChange"></DropDownListEvents>
-                <DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>
-                <DropDownListTemplates TItem="Specialization">
-                    <ItemTemplate>
-                        <div class="specialist-value">
-                            <span class="@((context as Specialization).Id)" style="background: @((context as Specialization).Color)"></span>
-                            <span class="name">@((context as Specialization).Text)</span>
+
+        <SfButton CssClass="e-primary"
+                  IconCss="e-icons e-add"
+                  @onclick="onAddDoctor">
+            Add Doctor
+        </SfButton>
+
+    </div>
+
+    <div class="stats-section">
+
+        <SfCard CssClass="metric-card doctors-card" ID="doctor-card">
+            <CardContent>
+                <div class="metric-wrapper">
+                    <div>
+                        <div class="metric-title">
+                            Total Doctors
                         </div>
-                    </ItemTemplate>
-                    <ValueTemplate>
-                        <div class="specialist-value department-value">
-                            <span class="@((context as Specialization).Id)" style="background: @((context as Specialization).Color)"></span>
-                            <span class="name">@((context as Specialization).Text)</span>
+                        <div class="metric-number">
+                            @TotalDoctors
                         </div>
-                    </ValueTemplate>
-                </DropDownListTemplates>
-            </SfDropDownList>
-            <SfButton CssClass="e-normal" @onclick="@onAddDoctor" IsPrimary="true">Add New Doctor</SfButton>
-        </div>
-        <div class="specialist-display">
-            @foreach (var data in filteredDoctors)
-            {
-                <div class="e-cards specialist-item" id="Specialist_@(data.Id)" @onclick="@(e => onSpecialistClick(e, data.Id))">
-                    <div class="e-card-content">
-                        <div class="specialist-image">
-                            <img class="profile" src="css/appoinment/assets/images/@(data.Text).png" alt="doctor" />
-                            <span class="availability @data.Availability"></span>
+                    </div>
+
+                    <div class="metric-icon e-icons e-user"></div>
+                </div>
+            </CardContent>
+        </SfCard>
+
+        <SfCard CssClass="metric-card available-card" ID="available-card">
+            <CardContent>
+                <div class="metric-wrapper">
+                    <div>
+                        <div class="metric-title">
+                            Available
+                        </div>
+                        <div class="metric-number">
+                            @AvailableDoctors
                         </div>
                     </div>
-                    <div class="specialist-detail">
-                        <div class="name">
-                            Dr. @data.Name
+
+                    <div class="metric-icon e-icons e-check"></div>
+                </div>
+            </CardContent>
+        </SfCard>
+
+        <SfCard CssClass="metric-card department-card" ID="department-card">
+            <CardContent>
+                <div class="metric-wrapper">
+                    <div>
+                        <div class="metric-title">
+                            Departments
                         </div>
-                        <div class="education">
-                            @(data.Education != null ? data.Education.ToUpper(): "")
+                        <div class="metric-number">
+                            @specializationData.Count
                         </div>
-                        <div class="specialist-experience">
-                            <div class="specialization">
-                                <span class="label-text">Designation</span>
-                                <span class="specialization-text">@data.Designation</span>
+                    </div>
+
+                    <div class="metric-icon e-icons e-folder"></div>
+                </div>
+            </CardContent>
+        </SfCard>
+
+    </div>
+    <div class="toolbar">
+
+        <SfTextBox Placeholder="Search doctor..."
+                   Width="320px"
+                   @bind-Value="searchText">
+        </SfTextBox>
+
+        <SfDropDownList TValue="string"
+                        TItem="Specialization"
+                        DataSource="@specializationData"
+                        Width="250px"
+                        Placeholder="All Specializations"
+                        ShowClearButton="true">
+
+            <DropDownListEvents TValue="string"
+                                TItem="Specialization"
+                                ValueChange="onSpecializationChange">
+            </DropDownListEvents>
+
+            <DropDownListFieldSettings
+                Text="Text"
+                Value="Id">
+            </DropDownListFieldSettings>
+
+        </SfDropDownList>
+
+    </div>
+
+    <div class="doctor-grid">
+
+        @foreach (var doctor in DisplayDoctors)
+        {
+               <div class="doctor-card"
+                    @onclick="@(e => onSpecialistClick(e, doctor.Id))">
+
+                    <div class="doctor-status">
+
+                        <span class="
+                            availability-pill
+                            @GetStatusClass(doctor)">
+
+                                <span class="status-dot"></span>
+
+                                @GetDoctorStatus(doctor)
+
+                            </span>
+
+                    </div>
+
+                    <div class="doctor-header">
+
+                        <img class="doctor-avatar"
+                            src="css/appointment/assets/images/@(doctor.Text).png"
+                            alt="Dr. @doctor.Name">
+
+                        <div class="doctor-profile">
+                            <h3 class="doctorhip">
+                                Dr. @doctor.Name
+                            </h3>
+                            <h6 class="doctorhip">
+                                @Service.GetSpecializationText(doctor.Specialization)
+                            </h6>
+                            <div class="education">
+                                @doctor.Education
                             </div>
-                            <div class="experience">
-                                <span class="label-text">Experience</span>
-                                <span class="specialization-text">@data.Experience</span>
+                        </div>
+                    </div>
+
+
+                    <div class="doctor-operational-data">
+
+                        <div class="metric">
+
+                            <span class="metric-label">
+                                Today
+                            </span>
+
+                            <span class="metric-value">
+                                @GetTodayAppointmentCount(doctor.Id) Appointments
+                            </span>
+
+                        </div>
+
+
+                        <div class="metric">
+
+                            <span class="metric-label">
+                                Next Slot
+                            </span>
+
+                            <span class="metric-value">
+                                @GetNextAvailableSlot(doctor)
+                            </span>
+
+                        </div>
+                        </div>
+
+                    <div class="workload-section">
+
+                        <div class="workload-header">
+
+                            <span>Workload</span>
+
+                            <span>@GetWorkloadPercent(doctor)%</span>
+
+                        </div>
+
+                        <div class="workload-bar">
+
+                            <div class="workload-fill"
+                                style="width:@GetWorkloadPercent(doctor)%;background:@GetWorkloadColor(GetWorkloadPercent(doctor));">
                             </div>
+
                         </div>
+
                     </div>
-                </div>
-            }
-        </div>
+
+                    <div class="doctor-meta">
+
+                        <div>
+
+                            <div class="label">
+                                Experience
+                            </div>
+
+                            <div class="value">
+                                @doctor.Experience
+                            </div>
+
+                        </div>
+
+                        <div>
+
+                            <div class="label">
+                                Designation
+                            </div>
+
+                            <div class="value">
+                                @doctor.Designation
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div class="doctor-actions">
+
+                        <SfButton IsPrimary="true">
+                            View
+                        </SfButton>
+
+                    </div>
+            </div>
+
+        }
+
     </div>
+
 </div>
 
 <SfDialog Target="body" Width="390px" CssClass="new-doctor-dialog" IsModal="true" @bind-Visible="@isShowNewDialog" ShowCloseIcon="true" Header="@editHeader">
@@ -208,13 +374,125 @@ else{
     private List<TextIdData> dutyTimings { get; set; }
 
     private bool isDataLoaded;
+    private string searchText = "";
 
-    protected override void OnInitialized()
+    private int GetTodayAppointmentCount(int doctorId)
     {
-        this.specializationData = Service.Specializations;
-        this.experienceData = Service.Experience;
+        return Service.Hospitals?
+            .Count(x =>
+                x.DoctorId == doctorId &&
+                x.StartTime.Date == DateTime.Today) ?? 0;
     }
 
+    private IEnumerable<Doctor> DisplayDoctors =>
+        filteredDoctors?.Where(x =>
+            string.IsNullOrWhiteSpace(searchText) ||
+            x.Name.Contains(searchText,
+                StringComparison.OrdinalIgnoreCase) ||
+            x.Specialization.Contains(searchText,
+                StringComparison.OrdinalIgnoreCase))
+        ?? Enumerable.Empty<Doctor>();
+
+        private int GetDoctorDailyCapacity(Doctor doctor)
+        {
+            if (string.IsNullOrEmpty(doctor.StartHour) ||
+                string.IsNullOrEmpty(doctor.EndHour))
+            {
+                return 16;
+            }
+
+            TimeSpan start = TimeSpan.Parse(doctor.StartHour);
+            TimeSpan end = TimeSpan.Parse(doctor.EndHour);
+
+            var hours = (end - start).TotalHours;
+
+            return (int)(hours * 2);
+        }
+        private int GetWorkloadPercent(Doctor doctor)
+        {
+            int appointments =
+                GetTodayAppointmentCount(doctor.Id);
+
+            int capacity =
+                GetDoctorDailyCapacity(doctor);
+
+            if (capacity <= 0)
+                return 0;
+
+            return Math.Min(
+                (appointments * 100) / capacity,
+                100);
+        }
+
+        private string GetDoctorStatus(Doctor doctor)
+        {
+            return doctor.Availability switch
+            {
+                "busy" => "Busy",
+                "away" => "Away",
+                _ => "Available"
+            };
+        }
+      private string GetStatusClass(Doctor doctor)
+        {
+            return doctor.Availability;
+        }
+
+        private string GetNextAvailableSlot(Doctor doctor)
+        {
+            var appointments =
+                Service.Hospitals
+                    .Where(x =>
+                        x.DoctorId == doctor.Id &&
+                        x.StartTime.Date == DateTime.Today)
+                    .OrderBy(x => x.StartTime)
+                    .ToList();
+
+            if (!appointments.Any())
+            {
+                return DateTime.Today
+                    .Add(TimeSpan.Parse(doctor.StartHour))
+                    .ToString("hh:mm tt");
+            }
+
+            DateTime nextSlot =
+                appointments.Last().EndTime;
+
+            DateTime doctorEnd =
+                DateTime.Today
+                .Add(TimeSpan.Parse(doctor.EndHour));
+
+            if (nextSlot >= doctorEnd)
+                return "Full";
+
+            return nextSlot.ToString("hh:mm tt");
+        }
+
+        private string GetWorkloadColor(int workload)
+        {
+            if (workload >= 90)
+                return "#dc2626";
+
+            if (workload >= 60)
+                return "#f59e0b";
+
+            return "#16a34a";
+        }
+    private int TotalDoctors =>
+        Service.Doctors.Count;
+
+    private int AvailableDoctors =>
+    Service.Doctors.Count(x => x.Availability == "available");
+
+    private int BusyDoctors =>
+    Service.Doctors.Count(x =>
+        x.Availability == "busy");
+
+    private int AwayDoctors =>
+    Service.Doctors.Count(x =>
+        x.Availability == "away");
+
+
     private void onAddDoctor(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
     {
         doctorEditModel = new Doctor { Name = null, Gender = "Male", Mobile = null, Email = null, Education = null, Designation = null };
@@ -292,14 +570,18 @@ else{
     }
 
     private async void LoadData()
-    {   
+    {
         this.dutyTimings = Service.DutyTimings;
         this.filteredDoctors = Service.Doctors;
         await Task.Delay(500);
         isDataLoaded = true;
         StateHasChanged();
     }
-
+    protected override void OnInitialized()
+    {
+        this.specializationData = Service.Specializations;
+        this.experienceData = Service.Experience;
+    }
     protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/Doctors/DoctorsDetails.razor b/webapp/server/AppointmentPlanner/Components/Pages/Doctors/DoctorsDetails.razor
index 4c7e007..48e2c00 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/Doctors/DoctorsDetails.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/Doctors/DoctorsDetails.razor
@@ -7,62 +7,244 @@
 @inject NavigationManager UriHelper
 @implements IDisposable;
 
-<link href="css/appoinment/doctordetails.css" rel="stylesheet" />
+<link href="css/appointment/doctordetails.css" rel="stylesheet" />
 <div class="doctor-details-container">
-    <header>
-        <div class="detail-header-title">
-            <span class="back-icon icon-previous" @onclick="@onBackIconClick"></span>
-            <div class="module-title">
-                <div class='title'>DOCTOR DETAILS</div>
-                <div class='underline'></div>
+   <header id="doctorHeader">
+
+        <div id="headerLeft">
+
+            <button id="backButton"
+                    type="button"
+                    aria-label="Go back"
+                    @onclick="onBackIconClick">
+
+                <span class="icon-previous"></span>
+
+            </button>
+
+            <div id="headerTitleContainer">
+
+                <h1 id="pageTitle">
+                    Doctor Details
+                </h1>
+
+                <div id="titleUnderline"></div>
+
             </div>
+
         </div>
-        <div class='doctor-detail'>
-            <SfButton Disabled="@((activeData != null) ? false : true)" CssClass="e-small delete-details" @onclick="@onDoctorDelete">Delete</SfButton>
-            <SfButton Disabled="@((activeData != null) ? false : true)" CssClass="e-small edit-details" @onclick="@onDoctorEdit">Edit</SfButton>
+
+        <div id="headerActions">
+
+            <SfButton Disabled="@(! (activeData != null))"
+                    CssClass="delete-details"
+                    aria-label="Delete Doctor"
+                    @onclick="onDoctorDelete">
+
+                Delete
+
+            </SfButton>
+
+            <SfButton Disabled="@(! (activeData != null))"
+                    CssClass="edit-details"
+                    aria-label="Edit Doctor Profile"
+                    @onclick="onDoctorEdit">
+
+                Edit
+
+            </SfButton>
+
         </div>
+
     </header>
-    @if (activeData != null) { 
-    <div class="active-doctor">
-        <div class="active-doctor-image">
-            <img class="value" src="css/appoinment/assets/images/@(activeData.Text).png" alt="doctor" />
-            <span class='availability @(activeData.Availability)'></span>
-        </div>
-        <div class="active-doctor-info">
-            <div class="basic-detail info-field-container">
-                <div class="name">Dr. @activeData.Name</div>
-                <div class="education">@(activeData.Education != null ? activeData.Education.ToUpper(): "")</div>
-                <div class="designation">@activeData.Designation</div>
-            </div>
-            <div class="speciality-detail info-field-container">
-                <div class="label-text">Specialization</div>
-                <div class="specialization">@getSpecializationText</div>
-            </div>
-            <div class="work-experience info-field-container">
-                <div class="label-text">Experience</div>
-                <div class="experience">@activeData.Experience</div>
-            </div>
-            <div class="work-availability info-field-container">
-                <div class="label-text">Availability</div>
-                <div class="available-days">@getAvailability</div>
-            </div>
-            <div class="contact-info info-field-container">
-                <div class="label-text">Mobile</div>
-                <div class="mobile">@activeData.Mobile</div>
-            </div>
-        </div>
-        <div class="work-days-container">
-            <div class="work-days-content">
-                <div class='work-day-item'>
+    @if (activeData != null) {
+        <main id="doctor-page">
+
+            <!-- HERO -->
+
+           
+            <SfCard ID="doctorHeroCard">
+
+                <CardContent>
+
+                    <section id="doctorHeroSection">
+
+                        <div id="doctorAvatarContainer">
+
+                            <img id="doctorAvatar"
+                                src="css/appointment/assets/images/@(activeData.Text).png"
+                                alt="Doctor profile name"/>
+
+                        </div>
+
+                        <div id="doctorInfo">
+
+                            <h1 id="doctorName">
+                                Dr. @activeData.Name
+                            </h1>
+
+                            <div id="doctorDepartment">
+                                @getSpecializationText
+                            </div>
+
+                            <div id="doctorEducation">
+                                @activeData.Education
+                            </div>
+
+                            <div id="doctorDesignation">
+                                @activeData.Designation
+                            </div>
+
+                        </div>
+
+                        <div id="doctorStatusArea">
+
+                            <span id="doctorStatus">
+                                @activeData.Availability
+                            </span>
+
+                        </div>
+
+                    </section>
+
+                </CardContent>
+
+            </SfCard>
+
+            <!-- KPI -->
+
+            <section id="kpiSection">
+
+                <SfCard ID="experienceCard">
+                    <CardContent>
+
+                        <div id="experienceValue">
+                            @activeData.Experience
+                        </div>
+
+                        <div id="experienceLabel">
+                            Experience
+                        </div>
+
+                    </CardContent>
+                </SfCard>
+
+                <SfCard ID="workingDaysCard">
+                    <CardContent>
+
+                        <div id="workingDaysValue">
+                            @WorkingDaysCount
+                        </div>
+
+                        <div id="workingDaysLabel">
+                            Working Days
+                        </div>
+
+                    </CardContent>
+                </SfCard>
+
+                <SfCard ID="contactCard">
+                    <CardContent>
+
+                        <div id="contactValue">
+                            @activeData.Mobile
+                        </div>
+
+                        <div id="contactLabel">
+                            Contact
+                        </div>
+
+                    </CardContent>
+                </SfCard>
+
+            </section>
+
+            <!-- DETAILS -->
+
+            <section id="detailsSection">
+
+                <SfCard ID="professionalCard">
+
+                    <CardContent>
+
+                        <h3>Professional Information</h3>
+
+                        <div class="detail-row">
+                            <label>Department</label>
+                            <span>@getSpecializationText</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Designation</label>
+                            <span>@activeData.Designation</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Experience</label>
+                            <span>@activeData.Experience</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Education</label>
+                            <span>@activeData.Education</span>
+                        </div>
+
+                    </CardContent>
+
+                </SfCard>
+
+                <SfCard ID="contactInfoCard">
+
+                    <CardContent>
+
+                        <h3>Contact Information</h3>
+
+                        <div class="detail-row">
+                            <label>Mobile</label>
+                            <span>@activeData.Mobile</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Email</label>
+                            <span>@activeData.Email</span>
+                        </div>
+
+                    </CardContent>
+
+                </SfCard>
+
+            </section>
+
+            <!-- SCHEDULE -->
+
+            <SfCard ID="scheduleCard">
+
+                <CardContent>
+
+                    <h3 id="scheduleTitle">
+                        Weekly Schedule
+                    </h3>
+
                     @foreach (var data in activeData.WorkDays)
                     {
-                        <div class="day-name">@(data.Day.Substring(0, 1).ToUpper())@data.Day.Substring(1)</div>
-                        <div class="day-break-hours @(data.State)">@(getBreakDetails(data))</div>
+                        <div class="schedule-row">
+
+                            <span class="day-column">
+                                @(char.ToUpper(data.Day[0]) + data.Day.Substring(1))
+                            </span>
+
+                            <span class="time-column @data.State">
+                                @getBreakDetails(data)
+                            </span>
+
+                        </div>
                     }
-                </div>
-            </div>
-        </div>
-    </div>
+
+                </CardContent>
+
+            </SfCard>
+
+        </main>
     }
 </div>
 
@@ -148,6 +330,7 @@
     private Doctor activeData { get; set; }
     private string getSpecializationText { get; set; }
     private string getAvailability { get; set; }
+    private int WorkingDaysCount =>activeData?.AvailableDays?.Length ?? 0;
 
     protected override void OnInitialized()
     {
@@ -206,7 +389,7 @@
         }
         onBackIconClick(args);
     }
-    
+
     private void onDoctorEdit(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
     {
         editVisible = true;
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/Patients/Patients.razor b/webapp/server/AppointmentPlanner/Components/Pages/Patients/Patients.razor
index f5117ed..ac3a1b8 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/Patients/Patients.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/Patients/Patients.razor
@@ -22,36 +22,113 @@
         </div>
     </header>
     <div class="patients-detail-wrapper">
-        <div class="patient-operations">
-            <div id="searchTemplate" class="search-wrapper planner-patient-search">
-                <div class="e-input-group patient-search" role="search">
-                    <input id="schedule_searchbar" class="e-input" name="input" type="text" @bind-value="@searchValue"
-                           placeholder="Search Patient" @oninput="@patientSearch" />
-                    <span class="e-clear-icon" aria-label="close" role="button" @onclick="clearText"></span>
-                    <span id="schedule_searchbutton" class="e-input-group-icon search-icon e-icons" tabindex="-1"
-                          title="Search" aria-label="search"></span>
-                </div>
+        <div id="patientStatsContainer">
+            <SfCard ID="totalPatientsCard">
+                <CardContent>
+                    <div class="patient-title">Total Patients</div>
+                    <div class="patient-value">@TotalPatients</div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard ID="newPatientsCard">
+                <CardContent>
+                    <div class="patient-title">New Patients</div>
+                    <div class="patient-value">@NewPatients</div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard ID="followupPatientsCard">
+                <CardContent>
+                    <div class="patient-title">Follow Up</div>
+                    <div class="patient-value">@FollowUpPatients</div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard ID="recoveryCard">
+                <CardContent>
+                    <div class="patient-title">Recovery Rate</div>
+                    <div class="patient-value">
+                        @RecoveryPercentage%
+                    </div>
+                </CardContent>
+            </SfCard>
+
+        </div>
+        <div id="patientToolbar">
+           
+            <div id="filterSection">
+                
+                <SfButton ID="addPatientButton"
+                        IsPrimary="true"
+                        @onclick="onAddPatient">
+
+                    Add New Patient
+
+                </SfButton>
             </div>
-           <SfButton CssClass="e-normal add-details" @onclick="@onAddPatient" IsPrimary="true">
-                Add
-                New Patient
-            </SfButton>
+
         </div>
         <div class="patient-display">
-            <SfGrid ID="Grid" @ref="gridObj" DataSource="@filteredPatients">
-                <GridEvents TValue="Patient" RowSelected="onRowSelected" OnRecordDoubleClick="onDoubleClick"></GridEvents>
-                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" Mode="EditMode.Dialog">
-                </GridEditSettings>
-                <GridColumns>
+                    <SfGrid ID="PatientsGrid"
+                        @ref="gridObj"
+                        DataSource="@filteredPatients"
+                        AllowPaging="true"
+                        AllowSorting="true"
+                        AllowFiltering="true"
+                        RowHeight="60">
+                    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" Mode="EditMode.Dialog">
+                    </GridEditSettings>
+                    <GridPageSettings PageSize="10"></GridPageSettings>
+
+                    <GridEvents TValue="Patient"
+                                RowSelected="onRowSelected"
+                                OnRecordDoubleClick="onDoubleClick">
+                    </GridEvents>
+
+                    <GridColumns>
                     <GridColumn IsPrimaryKey="true" Field=@nameof(Patient.Id) Width="50" HeaderText="ID" TextAlign="@TextAlign.Left"></GridColumn>
-                    <GridColumn HeaderText="Name" TextAlign="@TextAlign.Left" Width="100">
+                    <GridColumn HeaderText="Patient Name" Width="120">
                         <Template>
-                            <span class="patient-name" @onclick="@(e => onPatientClick(e, (context as Patient).Id))">@((context as Patient).Name)</span>
+                            @{
+                                var patient = context as Patient;
+                            }
+
+                            <div id="patientInfoWrapper">
+                                <div>
+                                    <div id="patientNameText">
+                                        @patient.Name
+                                    </div>
+                                </div>
+                            </div>
                         </Template>
                     </GridColumn>
+                    <GridColumn HeaderText="Status"
+                            Width="120">
+
+                    <Template>
+
+                        @{
+                            var patient = context as Patient;
+
+                            string status = patient.Id % 3 == 0
+                                ? "Recovery"
+                                : patient.Id % 2 == 0
+                                ? "Follow-Up"
+                                : "New";
+                        }
+
+                        <SfChip ID="statusChip">
+
+                            @status
+
+                        </SfChip>
+
+                    </Template>
+
+                </GridColumn>
                     <GridColumn Field=@nameof(Patient.Gender) HeaderText="Gender" TextAlign="@TextAlign.Left" Width="80"></GridColumn>
                     <GridColumn Field=@nameof(Patient.BloodGroup) HeaderText="Blood Group" TextAlign="@TextAlign.Left" Width="100"></GridColumn>
-                    <GridColumn Field=@nameof(Patient.Symptoms) HeaderText="Symptoms" TextAlign="@TextAlign.Left" Width="150"></GridColumn>
+                    <GridColumn Field=@nameof(Patient.Symptoms) HeaderText="Symptoms" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip" TextAlign="@TextAlign.Left" Width="250"></GridColumn>
                     <GridColumn Field=@nameof(Patient.Mobile) HeaderText="Mobile Number" TextAlign="@TextAlign.Left" Width="100"></GridColumn>
                     <GridColumn Field=@nameof(Patient.Email) HeaderText="Email" TextAlign="@TextAlign.Left" Width="120"></GridColumn>
                 </GridColumns>
@@ -113,7 +190,7 @@
 </SfDialog>
 }
 
-@if(IsShowPatientEditDialog) { 
+@if(IsShowPatientEditDialog) {
 <SfDialog @ref="dialogObj" Target="body" Width="390px" CssClass="new-patient-dialog" IsModal="true" @bind-Visible="@IsShowPatientEditDialog" ShowCloseIcon="true" Header="@patientHeader">
     <ChildContent>
         <DialogAnimationSettings Effect="DialogEffect.Zoom"></DialogAnimationSettings>
@@ -228,11 +305,19 @@ else
     private bool isDataLoaded;
     private bool showDeleteMsg { get; set; }
 
+    private int TotalPatients;
+    private int NewPatients;
+    private int FollowUpPatients;
+    private int MalePatients;
+    private int FemalePatients;
+    private double RecoveryPercentage;
+
     protected override void OnInitialized()
     {
         filteredPatients = Service.Patients;
-        this.bloodGroupData = Service.BloodGroups;
+       this.bloodGroupData = Service.BloodGroups;
         this.doctorsData = Service.Doctors;
+        CalculateDashboardMetrics();
     }
 
     private void onAddPatient(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
@@ -360,9 +445,35 @@ else
         dialogObj = null;
         maskObj = null;
     }
+    private void CalculateDashboardMetrics()
+    {
+        TotalPatients = Service.Patients?.Count ?? 0;
+
+        FollowUpPatients = Service.WaitingLists?
+            .Select(x => x.PatientId)
+            .Distinct()
+            .Count() ?? 0;
+
+        MalePatients = Service.Patients?
+            .Count(x => x.Gender == "Male") ?? 0;
+
+        FemalePatients = Service.Patients?
+            .Count(x => x.Gender == "Female") ?? 0;
+
+        NewPatients = Service.Patients?
+            .Count(x => x.DOB >= DateTime.Now.AddMonths(-1))
+            ?? 0;
+
+        RecoveryPercentage =
+            TotalPatients == 0
+                ? 0
+                : Math.Round(
+                    ((double)(TotalPatients - FollowUpPatients)
+                    / TotalPatients) * 100, 1);
+    }
 
     private async void LoadData()
-    {   
+    {
         this.EditData = Service.Patients[0];
         this.patientEditModel = new Patient();
         await Task.Delay(500);
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/Preference/Preference.razor b/webapp/server/AppointmentPlanner/Components/Pages/Preference/Preference.razor
index 07219dd..4e3f573 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/Preference/Preference.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/Preference/Preference.razor
@@ -8,51 +8,86 @@
 <div id="preference" class='preference-container'>
     <header>
         <div class="module-title">
-            <div class='title'>PREFERENCE</div>
+            <h1 class='title'>Preferences</h1>
             <div class='underline'></div>
         </div>
+        <p class="preference-intro">Tune the calendar for the way your clinic works.</p>
+        <div class="preference-actions">
+            <SfButton CssClass="e-normal" @onclick="@resetPreferences">Reset defaults</SfButton>
+            <SfButton IsPrimary="true" @onclick="@savePreferences" Disabled="@(!IsConfigurationValid)">Save preferences</SfButton>
+        </div>
     </header>
-    <div class="control-container">
+    @if (!string.IsNullOrWhiteSpace(settingsMessage))
+    {
+        <SfMessage Severity="@settingsMessageSeverity">@settingsMessage</SfMessage>
+    }
+    <div class="active-preferences" aria-live="polite">
+        <div class="active-heading"><span class="e-icons e-check"></span><div><strong>Active configuration</strong><span>These values will be used by Schedule after saving.</span></div></div>
+        <div class="configuration-values">
+            <div><span class="summary-label">View</span><strong>@selectedView</strong></div>
+            <div><span class="summary-label">First day</span><strong>@getDayOfWeekText()</strong></div>
+            <div><span class="summary-label">Hours</span><strong>@selectedStartHour - @selectedEndHour</strong></div>
+            <div><span class="summary-label">Slots</span><strong>@timeInterval min</strong></div>
+            <div><span class="summary-label">Color by</span><strong>@selectedCategory</strong></div>
+        </div>
+    </div>
+    <div class="preference-section">
+        <div class="section-heading">
+            <span class="section-icon e-icons e-settings"></span>
+            <div><h2>Calendar display</h2><p>Choose how the schedule opens each day.</p></div>
+        </div>
+        <div class="control-container">
         <div class='label-text'>Default View</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='CurrentView' @bind-Value="@selectedView" Width="335px" DataSource="@views">
+        <SfDropDownList CssClass='preference-drop-down' ID='CurrentView' aria-label="Default View" @bind-Value="@selectedView" Width="335px" DataSource="@views">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onViewChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
+        </div>
+        <div class="control-container">
+        <div class='label-text'>First Day of the Week</div>
+        <SfDropDownList CssClass='preference-drop-down' ID='FirstDayOfWeek' aria-label="First Day of the Week" @bind-Value="@selectedDayOfWeek" Width="335px" DataSource="@dayOfWeeks">
+            <DropDownListEvents TItem="TextValueNumericData" TValue="int?" ValueChange="onFirstDayChange"></DropDownListEvents>
+            <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
+        </SfDropDownList>
+        </div>
     </div>
-    <div class="control-container">
+    <div class="preference-section">
+        <div class="section-heading"><span class="section-icon e-icons e-clock"></span><div><h2>Working hours</h2><p>Set the visible clinic hours and booking rhythm.</p></div></div>
+        <div class="control-container">
         <div class='label-text'>Calendar Start Time</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='CalendarStart' @bind-Value="@selectedStartHour" Width="335px" DataSource="@startHours">
+        <SfDropDownList CssClass='preference-drop-down' ID='CalendarStart' aria-label="Calendar Start Time" @bind-Value="@selectedStartHour" Width="335px" DataSource="@startHours">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onStartHourChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
-    </div>
-    <div class="control-container">
+        </div>
+        <div class="control-container">
         <div class='label-text'>Calendar End Time</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='CalendarEnd' @bind-Value="@selectedEndHour" Width="335px" DataSource="@endHours">
+        <SfDropDownList CssClass='preference-drop-down' ID='CalendarEnd' aria-label="Calendar End Time" @bind-Value="@selectedEndHour" Width="335px" DataSource="@endHours">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onEndhourChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
-    </div>
-    <div class="control-container">
+        </div>
+        @if (!IsWorkingHoursValid)
+        {
+            <div class="preference-validation" role="alert">Calendar end time must be later than the start time.</div>
+        }
+        <div class="control-container">
         <div class='label-text'>Slot Duration</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='Duration' @bind-Value="@timeInterval" Width="335px" DataSource="@timeSlots">
+        <SfDropDownList CssClass='preference-drop-down' ID='Duration' aria-label="Slot Duration" @bind-Value="@timeInterval" Width="335px" DataSource="@timeSlots">
             <DropDownListEvents TItem="TextValueNumericData" TValue="int?" ValueChange="onDurationChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
+        </div>
     </div>
-    <div class="control-container">
+    <div class="preference-section">
+        <div class="section-heading"><span class="section-icon e-icons e-palette"></span><div><h2>Appointment appearance</h2><p>Choose how resources are distinguished on the schedule.</p></div></div>
+        <div class="control-container">
         <div class='label-text'>Booking Color</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='BookingColor' @bind-Value="@selectedCategory" Width="335px" DataSource="@colorCategory">
+        <SfDropDownList CssClass='preference-drop-down' ID='BookingColor' aria-label="Booking Color" @bind-Value="@selectedCategory" Width="335px" DataSource="@colorCategory">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onColorChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
-    </div>
-    <div class="control-container">
-        <div class='label-text'>First Day of the Week</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='FirstDayOfWeek' @bind-Value="@selectedDayOfWeek" Width="335px" DataSource="@dayOfWeeks">
-            <DropDownListEvents TItem="TextValueNumericData" TValue="int?" ValueChange="onFirstDayChange"></DropDownListEvents>
-            <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
-        </SfDropDownList>
+        </div>
     </div>
 </div>
 }
@@ -72,7 +107,7 @@ else
                 <br/><br/>
             }
         </div>
-    </div>    
+    </div>
 }
 
 @code{
@@ -91,6 +126,19 @@ else
     private int? timeInterval { get; set; }
     private int? selectedDayOfWeek { get; set; }
     private bool isDataLoaded;
+    private string settingsMessage;
+    private MessageSeverity settingsMessageSeverity = MessageSeverity.Info;
+
+    private bool IsWorkingHoursValid =>
+        TimeSpan.TryParse(selectedStartHour, out var start) &&
+        TimeSpan.TryParse(selectedEndHour, out var end) && start < end;
+
+    private bool IsConfigurationValid => IsWorkingHoursValid && timeInterval.HasValue && timeInterval.Value > 0;
+
+    private string getDayOfWeekText()
+    {
+        return dayOfWeeks?.FirstOrDefault(day => day.Value == selectedDayOfWeek)?.Text ?? "Sunday";
+    }
 
     protected override void OnInitialized()
     {
@@ -103,31 +151,62 @@ else
 
     private void onViewChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.CurrentView = args.Value;
+        selectedView = args.Value;
     }
     private void onStartHourChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.Calendar.Start = args.Value;
+        selectedStartHour = args.Value;
     }
     private void onEndhourChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.Calendar.End = args.Value;
+        selectedEndHour = args.Value;
     }
     private void onColorChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.BookingColor = (string)args.Value;
+        selectedCategory = args.Value;
     }
     private void onDurationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, TextValueNumericData> args)
     {
-        Service.CalendarSettings.Interval = (int)args.Value;
+        timeInterval = args.Value;
     }
     private void onFirstDayChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, TextValueNumericData> args)
     {
-        Service.CalendarSettings.FirstDayOfWeek = (int)args.Value;
+        selectedDayOfWeek = args.Value;
     }
 
-    private async void LoadData()
-    {   
+    private void savePreferences(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    {
+        if (!IsConfigurationValid)
+        {
+            settingsMessageSeverity = MessageSeverity.Error;
+            settingsMessage = "Review the calendar hours and slot duration before saving.";
+            return;
+        }
+
+        Service.CalendarSettings.CurrentView = selectedView;
+        Service.CalendarSettings.Calendar.Start = selectedStartHour;
+        Service.CalendarSettings.Calendar.End = selectedEndHour;
+        Service.CalendarSettings.Interval = timeInterval.Value;
+        Service.CalendarSettings.BookingColor = selectedCategory;
+        Service.CalendarSettings.FirstDayOfWeek = selectedDayOfWeek ?? 0;
+        settingsMessageSeverity = MessageSeverity.Success;
+        settingsMessage = "Preferences saved. Open Schedule to use the updated calendar settings.";
+    }
+
+    private void resetPreferences(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    {
+        selectedView = "Week";
+        selectedStartHour = "08:00";
+        selectedEndHour = "21:00";
+        timeInterval = 60;
+        selectedCategory = "Doctors";
+        selectedDayOfWeek = 0;
+        settingsMessageSeverity = MessageSeverity.Info;
+        settingsMessage = "Default preferences restored. Select Save preferences to apply them.";
+    }
+
+    private async Task LoadData()
+    {
         this.dayOfWeeks = Service.DayOfWeekList;
         this.selectedView = Service.CalendarSettings.CurrentView;
         this.selectedStartHour = Service.CalendarSettings.Calendar.Start;
@@ -137,14 +216,14 @@ else
         this.selectedDayOfWeek = Service.CalendarSettings.FirstDayOfWeek;
         await Task.Delay(500);
         isDataLoaded = true;
-        StateHasChanged();
+        await InvokeAsync(StateHasChanged);
     }
 
-    protected override void OnAfterRender(bool firstRender)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            LoadData();
+            await LoadData();
         }
     }
 }
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/Components/Pages/Schedule/Schedule.razor b/webapp/server/AppointmentPlanner/Components/Pages/Schedule/Schedule.razor
index 9d306ae..d8e5be6 100644
--- a/webapp/server/AppointmentPlanner/Components/Pages/Schedule/Schedule.razor
+++ b/webapp/server/AppointmentPlanner/Components/Pages/Schedule/Schedule.razor
@@ -5,113 +5,301 @@
 @using Microsoft.JSInterop;
 @implements IDisposable;
 
-@if(isDataLoaded){
-<div class="planner-calendar">
-    <div class="drag-sample-wrapper droppable">
-        <div class="col-lg-9 col-md-9 col-sm-9" style="padding: 0px">
-            <div class="schedule-container e-droppable">
-                <SfSchedule ID="schedule" TValue="Hospital" @ref="scheduleObj" Width="100%" Height="800px" EnableAutoRowHeight="true" CssClass="doctor-appointment-planner" ShowWeekend="false" StartHour="@startHour" EndHour="@endHour" @bind-SelectedDate="@currentDate" WorkDays="@workDay" FirstDayOfWeek="@calendarDayOfWeek" @bind-CurrentView="@sceduleView">
-                    <ScheduleEvents TValue="Hospital" OnPopupOpen="OnPopupOpen" OnPopupClose="OnPopupClose" OnActionBegin="OnActionBegin"></ScheduleEvents>
-                    <ScheduleWorkHours Start="08:00" End="21:00"></ScheduleWorkHours>
-                    <ScheduleEventSettings DataSource="@scheduleEventData" ResourceColorField="@resourceColorField" AllowEditFollowingEvents="@editUpcoming">
-                        <ScheduleField>
-                            <FieldSubject Name="Name"></FieldSubject>
-                            <FieldStartTime Name="StartTime" Title="From"></FieldStartTime>
-                            <FieldEndTime Name="EndTime" Title="To"></FieldEndTime>
-                            <FieldDescription Name="Symptoms" Title="Symptoms"></FieldDescription>
-                        </ScheduleField>
-                    </ScheduleEventSettings>
-                    <ScheduleTimeScale Enable="true" Interval="@this.viewInterval"></ScheduleTimeScale>
-                    <ScheduleResources>
-                        <ScheduleResource TItem="Specialization" TValue="int?" DataSource="@specialistCategory" Field="DepartmentId" Title="Department" Name="Departments" TextField="Text" IdField="DepartmentId" ColorField="Color"></ScheduleResource>
-                        <ScheduleResource TItem="Doctor" TValue="int" DataSource="@resourceDataSource" Query="@queryData" Field="DoctorId" Title="Consultation" Name="Doctors" TextField="Name" IdField="Id" ColorField="Color" GroupIDField="DepartmentId" WorkDaysField="AvailableDays" StartHourField="StartHour" EndHourField="EndHour"></ScheduleResource>
-                    </ScheduleResources>
-                    <ScheduleViews>
-                        <ScheduleView Option="@View.Day"></ScheduleView>
-                        <ScheduleView Option="@View.Week"></ScheduleView>
-                        <ScheduleView Option="@View.Month"></ScheduleView>
-                        <ScheduleView Option="@View.TimelineDay">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                        <ScheduleView Option="@View.TimelineWeek">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                        <ScheduleView Option="@View.TimelineWorkWeek">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                        <ScheduleView Option="@View.TimelineMonth">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                    </ScheduleViews>
-                    <ScheduleTemplates>
-                        <DateHeaderTemplate>
-                            <div class="e-custom-date-header date-text" title="@(getDateHeaderText((context as TemplateContext).Date))">@(getDateHeaderText((context as TemplateContext).Date).ToUpper())</div>
-                        </DateHeaderTemplate>
-                    </ScheduleTemplates>
-                </SfSchedule>
-            </div>
+<a href="#schedule-main" class="skip-link">Skip to main content</a>
+
+@if (loadFailed)
+{
+    <div class="planner-calendar" id="schedule-main" role="alert" aria-live="assertive">
+        <div class="schedule-error">
+            <span class="e-icons e-warning" aria-hidden="true"></span>
+            <span>We couldn't load the schedule. Please refresh the page or try again in a moment.</span>
         </div>
-        <div class="col-lg-3 col-md-3 col-sm-3 treeview-container-wrapper">
-            <div class="treeview-container">
-                <div>
-                    <SfDropDownList @ref="ddlObj" Placeholder="Choose Specialist" Width="220px" TItem="Doctor" PopupHeight="auto" DataSource="@resourceDataSource" TValue="int?" CssClass="planner-dropdown" ShowClearButton="true">
-                        <DropDownListEvents TItem="Doctor" TValue="int?" ValueChange="onValueChange"></DropDownListEvents>
-                        <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
-                        <DropDownListTemplates TItem="Doctor">
-                            <ItemTemplate>
-                                <div class="specialist-item">
-                                    <img class="value" src="css/appoinment/assets/images/@((context as Doctor).Text).png" alt="doctor" />
-                                    <div class="doctor-details">
-                                        <div class="name">Dr.@((context as Doctor).Name)</div>
-                                        <div class="designation">@((context as Doctor).Designation)</div>
-                                    </div>
-                                </div>
-                            </ItemTemplate>
-                            <FooterTemplate>
-                                <div class="add-doctor">
-                                    <div class="e-icon-add e-icons"></div><div class="add-doctor-text">
-                                        <NavLink Match="NavLinkMatch.Prefix" href="@($"doctors")">Add New Doctor</NavLink>
-                                    </div>
-                                </div>
-                            </FooterTemplate>
-                        </DropDownListTemplates>
-                    </SfDropDownList>
-                </div>
-                <div class="title-container">
-                    <h2 class="title-text">Waiting List</h2>
-                </div>
-            <SfTreeView TValue="WaitingList" LoadOnDemand="false" CssClass="treeview-external-drag" AllowDragAndDrop="true">
-                <TreeViewFieldsSettings Id="Id" Text="Name" DataSource="@waitingList"></TreeViewFieldsSettings>
-                <TreeViewEvents TValue="WaitingList" OnNodeDragStop="NodeDragStop"></TreeViewEvents>
-                <TreeViewTemplates TValue="WaitingList">
-                    <NodeTemplate>
-                        <div id="waiting">
-                            <div id="waitdetails">
-                                <div id="waitlist">@((context as WaitingList).Name)</div>
-                                <div id="event-time">@(getEventTime((context as WaitingList)))</div>
-                                <div id="waitcategory">
-                                    @(getDepartmentName((context as WaitingList).DepartmentId)) - @(getTreatmentDetail((context as WaitingList)))
+    </div>
+}
+else if (isDataLoaded)
+{
+    <div class="planner-calendar" id="schedule-main" tabindex="-1">
+
+        <header class="appointment-header">
+            <div>
+                <h1 class="appointment-title">Appointment Schedule</h1>
+                <p class="appointment-subtitle">
+                    Coordinate appointments, doctor availability and waiting queue
+                </p>
+            </div>
+
+            <div class="header-actions">
+                <SfButton CssClass="outline-btn"
+                          IconCss="e-icons e-refresh"
+                          OnClick="ResetSchedule"
+                          aria-label="Reset schedule filters">
+                    Reset
+                </SfButton>
+
+                <SfButton CssClass="primary-btn"
+                          IconCss="e-icons e-plus"
+                          OnClick="CreateAppointment"
+                          aria-label="Create new appointment">
+                    New Appointment
+                </SfButton>
+            </div>
+        </header>
+
+        <!-- KPI Metrics -->
+        <section class="dashboard-cards" aria-label="Key performance indicators">
+
+            <SfCard CssClass="dashboard-card" ID="today-appointments-card">
+                <CardContent>
+                    <span class="card-title">Today's Appointments</span>
+                    <div class="card-body">
+                        <div class="icon-box appointment-icon" aria-hidden="true">
+                            <span class="e-icons e-timeline-week"></span>
+                        </div>
+                        <div class="card-info">
+                            <h2>@TodayAppointments</h2>
+                            <span class="trend @(TodayTrendDirection)" aria-label="@TodayTrendAriaLabel">
+                                <span class="e-icons @(TodayTrendDirection == "up" ? "e-arrow-up" : TodayTrendDirection == "down" ? "e-arrow-down" : "e-horizontal-line")" aria-hidden="true"></span>
+                                @TodayTrendText vs. yesterday
+                            </span>
+                        </div>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+         <SfCard CssClass="dashboard-card capacity-card" ID="current-doctor-card">
+                <CardContent>
+                    <span class="card-title">Capacity Utilization</span>
+                    <div class="card-body">
+                        <div class="icon-box utilization-icon">
+                            <span class="e-icons e-chart"></span>
+                        </div>
+
+                        <div class="card-info">
+                            <h2>@CapacityUtilization%</h2>
+                            <span class="trend @CapacityStatusClass">
+                                @CapacityStatus
+                            </span>
+                        </div>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="dashboard-card" ID="waiting-queue-card">
+                <CardContent>
+                    <span class="card-title">Waiting Queue</span>
+                    <div class="card-body">
+                        <div class="icon-box waiting-icon" aria-hidden="true">
+                            <span class="e-icons e-clock"></span>
+                        </div>
+                        <div class="card-info">
+                            <h2>@PendingCount</h2>
+                            <div class="wait-prediction">
+
+                                    Estimated Wait
+
+                                    <strong>
+                                        @PredictedWaitMinutes min
+                                    </strong>
+
                                 </div>
-                            </div>
-                            <div id="item-icon-container">
-                                <span class="item-icon icon-reorder"></span>
-                            </div>
+                            <span class="trend @(WaitingTrendDirection)" aria-label="@WaitingTrendAriaLabel">
+                                <span class="e-icons @(WaitingTrendDirection == "up" ? "e-arrow-up" : WaitingTrendDirection == "down" ? "e-arrow-down" : "e-horizontal-line")" aria-hidden="true"></span>
+                                @WaitingTrendText vs. yesterday
+                            </span>
                         </div>
-                    </NodeTemplate>
-                </TreeViewTemplates>
-            </SfTreeView>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="dashboard-card" ID="confirmed-card">
+                <CardContent>
+                    <span class="card-title">Confirmed (this week)</span>
+                    <div class="card-body">
+                        <div class="icon-box department-icon" aria-hidden="true">
+                            <span class="e-icons e-check"></span>
+                        </div>
+                        <div class="card-info">
+                            <h2>@ConfirmedCount</h2>
+                            <span class="trend flat">across @DepartmentCount departments</span>
+                        </div>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+
+        </section>
+
+        <!-- Live region for status changes (a11y) -->
+        <div class="sr-only" aria-live="polite" aria-atomic="true">@LiveStatusAnnouncement</div>
+
+        <div class="appointment-layout droppable">
+
+            <div class="scheduler-section" style="padding: 0">
+                <div class="schedule-container e-droppable">
+
+                    <div class="planner-toolbar" role="search" aria-label="Schedule filters">
+
+                        <SfDropDownList TValue="int?"
+                                        TItem="Doctor"
+                                        DataSource="@resourceDataSource"
+                                        Placeholder="Doctor"
+                                        Value="@selectedDoctorId"
+                                        ValueChanged="@(async (int? v) => await OnDoctorChanged(v))"
+                                        aria-label="Filter by doctor">
+                            <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
+                        </SfDropDownList>
+
+                        <SfDropDownList TValue="int?"
+                                        TItem="Specialization"
+                                        DataSource="@specialistCategory"
+                                        Placeholder="Department"
+                                        Value="@selectedDepartmentId"
+                                        ValueChanged="@(async (int? v) => await OnDepartmentChanged(v))"
+                                        aria-label="Filter by department">
+                            <DropDownListFieldSettings Text="Text" Value="DepartmentId"></DropDownListFieldSettings>
+                        </SfDropDownList>
+                    </div>
+
+                    @if (scheduleEventData != null && scheduleEventData.Count > 0)
+                    {
+                        <div class="schedule-legend">
+
+                            <span class="legend-item">
+                                🟢 Confirmed
+                            </span>
+
+                            <span class="legend-item">
+                                🟡 Waiting
+                            </span>
+
+                            <span class="legend-item">
+                                🟣 Follow-up
+                            </span>
+
+                            <span class="legend-item">
+                                🔴 Urgent
+                            </span>
+
+                        </div>
+                        <SfSchedule ID="schedule" TValue="Hospital" @ref="scheduleObj" Width="100%" Height="700" CssClass="doctor-appointment-planner" ShowWeekend="false" StartHour="@startHour" EndHour="@endHour" @bind-SelectedDate="@currentDate" WorkDays="@workDay" FirstDayOfWeek="@calendarDayOfWeek" @bind-CurrentView="@sceduleView">
+                            <ScheduleEvents TValue="Hospital" OnPopupOpen="OnPopupOpen" OnPopupClose="OnPopupClose" OnActionBegin="OnActionBegin"></ScheduleEvents>
+                            <ScheduleWorkHours Start="08:00" End="21:00"></ScheduleWorkHours>
+                            <ScheduleEventSettings DataSource="@scheduleEventData" ResourceColorField="@resourceColorField" AllowEditFollowingEvents="@editUpcoming">
+                                <ScheduleField>
+                                    <FieldSubject Name="Name"></FieldSubject>
+                                    <FieldStartTime Name="StartTime" Title="From"></FieldStartTime>
+                                    <FieldEndTime Name="EndTime" Title="To"></FieldEndTime>
+                                    <FieldDescription Name="Symptoms" Title="Symptoms"></FieldDescription>
+                                </ScheduleField>
+                            </ScheduleEventSettings>
+                            <ScheduleTimeScale Enable="true" Interval="@this.viewInterval"></ScheduleTimeScale>
+                            <ScheduleResources>
+                                <ScheduleResource TItem="Specialization" TValue="int?" DataSource="@specialistCategory" Field="DepartmentId" Title="Department" Name="Departments" TextField="Text" IdField="DepartmentId" ColorField="Color"></ScheduleResource>
+                                <ScheduleResource TItem="Doctor" TValue="int" DataSource="@resourceDataSource" Query="@queryData" Field="DoctorId" Title="Consultation" Name="Doctors" TextField="Name" IdField="Id" ColorField="Color" GroupIDField="DepartmentId" WorkDaysField="AvailableDays" StartHourField="StartHour" EndHourField="EndHour"></ScheduleResource>
+                            </ScheduleResources>
+                            <ScheduleViews>
+                                <ScheduleView Option="@View.Day"></ScheduleView>
+                                <ScheduleView Option="@View.Week"></ScheduleView>
+                                <ScheduleView Option="@View.Month"></ScheduleView>
+                            </ScheduleViews>
+                            <ScheduleTemplates>
+                                <DateHeaderTemplate>
+                                    <div class="e-custom-date-header date-text" title="@(getDateHeaderText((context as TemplateContext).Date))">@(getDateHeaderText((context as TemplateContext).Date).ToUpper())</div>
+                                </DateHeaderTemplate>
+                            </ScheduleTemplates>
+                        </SfSchedule>
+                    }
+                    else
+                    {
+                        <div class="schedule-empty" role="status">
+                            <div class="empty-icon e-icons e-calendar" aria-hidden="true"></div>
+                            <h3>No appointments match your filters</h3>
+                            <p>Try adjusting the doctor or department, or clear the search to see the full schedule.</p>
+                            <SfButton CssClass="primary-btn" IconCss="e-icons e-refresh" OnClick="ResetSchedule">Reset filters</SfButton>
+                        </div>
+                    }
+                </div>
             </div>
+
+            <aside class="appointment-sidebar" aria-label="Schedule tools and status">
+
+                <SfCard CssClass="sidebar-card">
+                    <CardHeader Title="Calendar"></CardHeader>
+                    <CardContent>
+                        <SfCalendar TValue="DateTime"
+                                    @bind-Value="currentDate">
+                        </SfCalendar>
+                    </CardContent>
+                </SfCard>
+                <SfCard CssClass="sidebar-card ai-card">
+
+                    <CardContent>
+
+                        <span class="card-title">
+                            AI Recommendations
+                        </span>
+
+                        <div class="recommendation-item">
+
+                            <span class="e-icons e-warning"></span>
+
+                            Queue expected to increase by
+                            30% after lunch.
+
+                        </div>
+
+                        <div class="recommendation-item">
+
+                            Suggested Action:
+
+                            Assign Dr. Laura.
+
+                        </div>
+
+                    </CardContent>
+
+                </SfCard>
+
+                <SfCard CssClass="sidebar-card status-card" ID="status-card">
+                    <CardContent>
+
+                        <span class="card-title">
+                            Doctor Utilization
+                        </span>
+
+                        @foreach(var doctor in DoctorUtilizations)
+                        {
+                            <div class="status-row">
+
+                                <span>@doctor.Name</span>
+
+                                <strong>@doctor.Utilization%</strong>
+
+                            </div>
+                        }
+
+                    </CardContent>
+                    
+                </SfCard>
+
+            </aside>
         </div>
     </div>
-</div>
 }
-else{
-    <div class="planner-dashboard-skeleton">
-        <div class="appointments-skeleton">
-            <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="780px" Width="90%"></SfSkeleton><br/>
+else
+{
+    <div class="planner-calendar" id="schedule-main" tabindex="-1" aria-busy="true" aria-live="polite">
+        <div class="appointment-header">
+            <div>
+                <h1 class="appointment-title">Appointment Schedule</h1>
+            </div>
+        </div>
+        <div class="appointments-skeleton" aria-label="Loading schedule">
+            <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="780px" Width="90%"></SfSkeleton>
+            <br />
         </div>
-        <div class="activities-skeleton">
-            @for(int i=0; i < 10; i++)
+        <div class="activities-skeleton" aria-hidden="true">
+            @for (int i = 0; i < 10; i++)
             {
                 <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="80%"></SfSkeleton>
                 <br />
@@ -155,25 +343,173 @@ else{
     private List<Doctor> resourceDataSource { get; set; }
 
     private List<WaitingList> waitingList { get; set; }
+    private string waitingListSearch { get; set; } = string.Empty;
+    private int? waitingListDepartmentId { get; set; }
 
+    // Bound filter values
+    private int? selectedDoctorId { get; set; }
+    private int? selectedDepartmentId { get; set; }
+
+    // Yesterday snapshot for trend deltas
+    private int YesterdayAppointments { get; set; }
+    private int YesterdayWaiting { get; set; }
+
+    // a11y live announcement
+    private string LiveStatusAnnouncement { get; set; } = string.Empty;
+    private bool loadFailed { get; set; } = false;
 
     private Query queryData { get; set; }
     private List<Doctor> activeDoctorData { get; set; }
     private bool isDataLoaded;
     private int? draggedItemID = null;
+
+    private int ConfirmedCount =>
+        scheduleEventData?.Count(x =>
+            !x.IsBlock &&
+            x.Name != "Break Time" &&
+            x.Name != "Off Work") ?? 0;
+
+    private int PendingCount =>
+        waitingList?.Count ?? 0;
+
+    private int DoctorCount =>
+        resourceDataSource?.Count ?? 0;
+
+    private int DoctorCountActive =>
+        resourceDataSource?.Count(d => d.WorkDays != null && d.WorkDays.Any(w => w.Enable)) ?? 0;
+
+    private int TodayAppointments =>
+        scheduleEventData?.Count(x =>
+            !x.IsBlock &&
+            x.Name != "Break Time" &&
+            x.Name != "Off Work" &&
+            x.StartTime.Date == currentDate.Date) ?? 0;
+
+    private int DepartmentCount =>
+        specialistCategory?.Count ?? 0;
+    private int TotalAvailableSlots =>
+    DoctorCountActive * 20;
+
+private double CapacityUtilization =>
+    TotalAvailableSlots == 0
+        ? 0
+        : Math.Round(
+            (double)TodayAppointments /
+            TotalAvailableSlots * 100);
+
+private string CapacityStatus =>
+    CapacityUtilization switch
+    {
+        >= 100 => "Overbooked",
+        >= 90 => "Busy",
+        >= 70 => "Healthy",
+        _ => "Available"
+    };
+
+private string CapacityStatusClass =>
+    CapacityUtilization >= 90 ? "danger" :
+    CapacityUtilization >= 70 ? "success" :
+    "info";
+    private int TodayDelta => TodayAppointments - YesterdayAppointments;
+    private int WaitingDelta => PendingCount - YesterdayWaiting;
+private int ForecastQueue =>
+    PendingCount + (int)Math.Ceiling(PendingCount * 0.4);
+    private string TodayTrendDirection =>
+        TodayDelta > 0 ? "up" : TodayDelta < 0 ? "down" : "flat";
+    private string WaitingTrendDirection =>
+        WaitingDelta > 0 ? "up" : WaitingDelta < 0 ? "down" : "flat";
+
+    private string TodayTrendText =>
+        TodayDelta == 0
+            ? "No change"
+            : (TodayDelta > 0 ? $"+{TodayDelta}" : TodayDelta.ToString());
+
+    private string WaitingTrendText =>
+        WaitingDelta == 0
+            ? "No change"
+            : (WaitingDelta > 0 ? $"+{WaitingDelta}" : WaitingDelta.ToString());
+
+    private string TodayTrendAriaLabel =>
+        $"{TodayAppointments} appointments today, {TodayTrendText} compared to yesterday";
+    private string WaitingTrendAriaLabel =>
+        $"{PendingCount} waiting, {WaitingTrendText} compared to yesterday";
+public string Status { get; set; }
+
+private class DoctorUsage
+{
+    public string Name { get; set; } = string.Empty;
+    public int Utilization { get; set; }
+}
+
+private IEnumerable<DoctorUsage> DoctorUtilizations =>
+    resourceDataSource?.Select(d => new DoctorUsage
+    {
+        Name = d.Name,
+        Utilization = CalculateDoctorUtilization(d)
+    })
+    ?? Enumerable.Empty<DoctorUsage>();
+
+private int CalculateDoctorUtilization(Doctor doctor)
+{
+    var appointments = scheduleEventData?
+        .Count(a =>
+            a.DoctorId == doctor.Id &&
+            !a.IsBlock &&
+            a.Name != "Break Time" &&
+            a.Name != "Off Work") ?? 0;
+
+    const int MaxSlots = 20;
+
+    return Math.Min(
+        100,
+        (int)Math.Round(
+            (double)appointments / MaxSlots * 100));
+}
+
     protected override void OnInitialized()
     {
-        sceduleView = (View)Enum.Parse(typeof(View), (Service.CalendarSettings.CurrentView as string));
-        currentDate = Service.StartDate;
-        this.viewInterval = Service.CalendarSettings.Interval;
-        this.calendarDayOfWeek = Service.CalendarSettings.FirstDayOfWeek;
-        this.resourceColorField = Service.CalendarSettings.BookingColor;
-        this.waitingList = Service.WaitingLists;
-        this.resourceDataSource = Service.Doctors;
-        this.specialistCategory = Service.Specializations;
-        this.startHour = Service.CalendarSettings.Calendar.Start;
-        this.endHour = Service.CalendarSettings.Calendar.End;
+        try
+        {
+            sceduleView = (View)Enum.Parse(typeof(View), (Service.CalendarSettings.CurrentView as string));
+            currentDate = Service.StartDate;
+            this.viewInterval = Service.CalendarSettings.Interval;
+            this.calendarDayOfWeek = Service.CalendarSettings.FirstDayOfWeek;
+            this.resourceColorField = Service.CalendarSettings.BookingColor;
+            this.waitingList = Service.WaitingLists;
+            this.resourceDataSource = Service.Doctors;
+            this.specialistCategory = Service.Specializations;
+            this.startHour = Service.CalendarSettings.Calendar.Start;
+            this.endHour = Service.CalendarSettings.Calendar.End;
+
+            // Compute "yesterday" snapshot for trend deltas (deterministic, demo data)
+            var yesterday = currentDate.Date.AddDays(-1);
+            var allEvents = Service.Hospitals ?? new List<Hospital>();
+            YesterdayAppointments = allEvents.Count(x =>
+                !x.IsBlock &&
+                x.Name != "Break Time" &&
+                x.Name != "Off Work" &&
+                x.StartTime.Date == yesterday);
+            // Waiting list baseline (demo): derive from current waiting
+            YesterdayWaiting = (int)Math.Round((Service.WaitingLists?.Count ?? 0) * 0.85);
+        }
+        catch (Exception ex)
+        {
+            loadFailed = true;
+            Console.Error.WriteLine($"[Schedule] init failed: {ex.Message}");
+        }
     }
+    private string GetStatusColor(string status)
+        {
+            return status switch
+            {
+                "Confirmed" => "#16A34A",
+                "Waiting" => "#F59E0B",
+                "Urgent" => "#DC2626",
+                "FollowUp" => "#7C3AED",
+                "Cancelled" => "#6B7280",
+                _ => "#0284C7"
+            };
+        }
 
     private string getEventTime(WaitingList data)
     {
@@ -202,7 +538,16 @@ else{
             return "CHECKUP";
         }
     }
+    private async Task CreateAppointment()
+    {
+        var data = new Hospital
+        {
+            StartTime = currentDate.Date.AddHours(9),
+            EndTime = currentDate.Date.AddHours(10)
+        };
 
+        await scheduleObj.OpenEditorAsync(data, CurrentAction.Add);
+    }
 
     public void OnPopupOpen(PopupOpenEventArgs<Hospital> args)
     {
@@ -230,13 +575,33 @@ else{
                 }
                 draggedItemID = null;
             }
-            foreach(Hospital Data in args.AddedRecords)
+            foreach(var item in args.AddedRecords)
+                {
+                    bool overlap =
+                        scheduleEventData.Any(x =>
+                            x.DoctorId == item.DoctorId &&
+                            x.StartTime < item.EndTime &&
+                            x.EndTime > item.StartTime);
+
+                    if(overlap)
+                    {
+                        args.Cancel = true;
+
+                        LiveStatusAnnouncement =
+                            "Overbooking detected.";
+
+                        return;
+                    }
+                }
+            foreach (Hospital Data in args.AddedRecords)
             {
                 Random random = new Random();
                 Data.PatientId = Data.PatientId == 0 ? random.Next(1, Service.Patients.Max(p => p.Id)) : Data.PatientId;
             }
+            LiveStatusAnnouncement = "Appointment created.";
         }
     }
+
     private async Task onValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Doctor> args)
     {
         if (args.Value != null)
@@ -248,6 +613,54 @@ else{
             setDefaultData();
         }
     }
+
+    private async Task OnDoctorChanged(int? doctorId)
+    {
+        selectedDoctorId = doctorId;
+        if (doctorId == null)
+        {
+            setDefaultData();
+        }
+        else
+        {
+            var doc = resourceDataSource?.FirstOrDefault(d => d.Id == doctorId);
+            if (doc != null)
+            {
+                await refreshDataSource(doc.DepartmentId, doctorId.Value.ToString());
+            }
+        }
+    }
+
+    private async Task OnDepartmentChanged(int? deptId)
+    {
+        selectedDepartmentId = deptId;
+        waitingListDepartmentId = deptId;
+        applyWaitingListFilter();
+        LiveStatusAnnouncement = $"Filtered waiting list by department. {waitingList?.Count ?? 0} patient(s) shown.";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnSearchChanged(string value)
+    {
+        waitingListSearch = value;
+        applyWaitingListFilter();
+        LiveStatusAnnouncement = $"Search applied. {waitingList?.Count ?? 0} patient(s) match.";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task ResetSchedule()
+    {
+        selectedDoctorId = null;
+        selectedDepartmentId = null;
+        waitingListSearch = string.Empty;
+        setDefaultData();
+        LiveStatusAnnouncement = "Schedule filters reset.";
+        if (scheduleObj != null)
+        {
+            await scheduleObj.RefreshAsync(false);
+        }
+    }
+
     private async Task refreshDataSource(int deptId, string doctorId)
     {
         List<Doctor> filterItem = Service.Doctors.Where(item => item.Id.Equals(Int32.Parse(doctorId))).ToList();
@@ -255,7 +668,6 @@ else{
         workDay = filterItem[0].AvailableDays;
         workHours = new Calendar { Start = filterItem[0].StartHour, End = filterItem[0].EndHour };
         queryData = new Query().Where(new WhereFilter() { Field = "Id", Operator = "equal", value = Int32.Parse(doctorId) });
-        await Task.Yield();
         if (filterItem.Any())
         {
             updateBreakHours(scheduleObj.SelectedDate);
@@ -271,15 +683,35 @@ else{
             await scheduleObj.RefreshAsync(false);
         }
     }
+    private int PredictedWaitMinutes =>
+    DoctorCountActive == 0
+        ? 0
+        : (PendingCount * 8) / DoctorCountActive;
 
     private void updateWaitingList(int? deptId)
     {
-        var filteredData = Service.WaitingLists;
-        if (deptId != null)
+        waitingListDepartmentId = deptId;
+        applyWaitingListFilter();
+    }
+
+    private void OnWaitingListSearchChanged(Syncfusion.Blazor.Inputs.ChangeEventArgs<string> args)
+    {
+        waitingListSearch = args.Value;
+        applyWaitingListFilter();
+    }
+
+    private void applyWaitingListFilter()
+    {
+        var filteredData = Service.WaitingLists.AsEnumerable();
+        if (waitingListDepartmentId != null)
         {
-            filteredData = filteredData.Where(item => item.DepartmentId.Equals(deptId)).ToList();
+            filteredData = filteredData.Where(item => item.DepartmentId.Equals(waitingListDepartmentId));
         }
-        waitingList = filteredData;
+        if (!string.IsNullOrWhiteSpace(waitingListSearch))
+        {
+            filteredData = filteredData.Where(item => item.Name.Contains(waitingListSearch, StringComparison.OrdinalIgnoreCase));
+        }
+        waitingList = filteredData.ToList();
     }
 
     private void setDefaultData()
@@ -297,6 +729,8 @@ else{
         workHours = Service.CalendarSettings.Calendar;
         activeDoctorData = new List<Doctor>();
     }
+
+
     private List<Hospital> generateEvents(Doctor activeData)
     {
         List<Hospital> filteredEvents = new List<Hospital>();
@@ -425,20 +859,31 @@ else{
     }
 
     private async void LoadData()
-    {   
-        this.scheduleEventData = Service.Hospitals;
-        this.workHours = Service.CalendarSettings.Calendar;
-        this.queryData = new Query();
-        await Task.Delay(500);
-        isDataLoaded = true;
-        StateHasChanged();
+    {
+        try
+        {
+            this.scheduleEventData = Service.Hospitals;
+            this.workHours = Service.CalendarSettings.Calendar;
+            this.queryData = new Query();
+            await Task.Delay(500);
+            isDataLoaded = true;
+        }
+        catch (Exception ex)
+        {
+            loadFailed = true;
+            Console.Error.WriteLine($"[Schedule] load failed: {ex.Message}");
+        }
+        finally
+        {
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     protected override void OnAfterRender(bool firstRender)
     {
-    if (firstRender)
+        if (firstRender)
         {
-        LoadData();
+            LoadData();
         }
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/server/AppointmentPlanner/Data/AppointmentService.cs b/webapp/server/AppointmentPlanner/Data/AppointmentService.cs
index f4fb6fc..c89f24c 100644
--- a/webapp/server/AppointmentPlanner/Data/AppointmentService.cs
+++ b/webapp/server/AppointmentPlanner/Data/AppointmentService.cs
@@ -11,7 +11,7 @@ public class AppointmentService
         public AppointmentService()
         {
             this.Activities = new Activity().GetActivityData();
-            this.StartDate = new DateTime(2020, 2, 5, 0, 0, 0, 0);
+            this.StartDate = DateTime.Today;
             this.ActiveDoctors = new Doctor().GetDoctorsData().FirstOrDefault();
             this.ActivePatients = new Patient().GetPatientsData().FirstOrDefault();
             this.StartHours = new TextValueData().GetStartHours();
@@ -29,13 +29,13 @@ public AppointmentService()
             this.DutyTimings = new TextIdData().DutyTimingsData();
             this.Experience = new TextIdData().ExperienceData();
             this.NavigationMenu = new NavigationMenu().GetNavigationMenuItems();
-            this.CalendarSettings = new CalendarSetting { BookingColor = "Doctors", Calendar = new AppointmentPlanner.Models.Calendar { Start = "08:00", End = "21:00" }, CurrentView = "Week", Interval = 60, FirstDayOfWeek = 0 };
+            this.CalendarSettings = new CalendarSetting { BookingColor = "Doctors", Calendar = new AppointmentPlanner.Models.Calendar { Start = "08:00", End = "21:00" }, CurrentView = "Day", Interval = 60, FirstDayOfWeek = 0 };
         }
         public DateTime StartDate { get; set; }
         public Doctor ActiveDoctors { get; set; }
 
         public Patient ActivePatients { get; set; }
-        public List<TextValueData> StartHours { get; set; } 
+        public List<TextValueData> StartHours { get; set; }
         public List<TextValueData> EndHours { get; set; }
         public List<TextValueData> Views { get; set; }
         public List<TextValueData> ColorCategory { get; set; }
@@ -55,7 +55,7 @@ public AppointmentService()
         public bool ShowDeleteMsg { get; set; }
 
         public DateTime GetWeekFirstDate(DateTime date)
-        { 
+        {
             return date.AddDays(DayOfWeek.Monday - date.DayOfWeek);
         }
 
@@ -101,7 +101,7 @@ public string GetAvailability(Doctor doctor)
             {
                 var result = workDays.Where(item => item.Enable.Equals(true)).Select(item => item.Day.Substring(0, 3).ToUpper());
                 return string.Join(",", result).ToString();
-                
+
             }
             return string.Empty;
         }
@@ -135,6 +135,6 @@ public List<ChartData> GetAllChartPoints(List<Hospital> hospitals, DateTime date
             return chartPoints;
         }
 
-        
-    } 
+
+    }
 }
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/Models/AppointmentModels.cs b/webapp/server/AppointmentPlanner/Models/AppointmentModels.cs
index 107ca31..0523430 100644
--- a/webapp/server/AppointmentPlanner/Models/AppointmentModels.cs
+++ b/webapp/server/AppointmentPlanner/Models/AppointmentModels.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 
@@ -27,7 +27,67 @@ public class Hospital
         public string Location { get; set; }
 
         public Hospital() { }
+        private static readonly Random Rand = new();
 
+        private static DateTime GetRandom2026Date()
+        {
+            int month = Rand.Next(1, 13);
+
+            int day = Rand.Next(
+                1,
+                DateTime.DaysInMonth(2026, month) + 1);
+
+            int hour = Rand.Next(8, 18);
+
+            int[] minutes = { 0, 15, 30, 45 };
+
+            return new DateTime(
+                2026,
+                month,
+                day,
+                hour,
+                minutes[Rand.Next(minutes.Length)],
+                0);
+        }
+        private static void ApplyDynamicDates(List<Hospital> appointments)
+{
+    var startDate = DateTime.Today;
+
+    int currentIndex = 0;
+
+    for (int day = 0; day < 30; day++)
+    {
+        int dailyCount = Rand.Next(5, 11);
+
+        DateTime scheduleDate = startDate.AddDays(day);
+
+        for (int i = 0;
+             i < dailyCount && currentIndex < appointments.Count;
+             i++)
+        {
+            int hour = Rand.Next(8, 17);
+
+            int minute =
+                new[] { 0, 15, 30, 45 }[Rand.Next(4)];
+
+            appointments[currentIndex].StartTime =
+                new DateTime(
+                    scheduleDate.Year,
+                    scheduleDate.Month,
+                    scheduleDate.Day,
+                    hour,
+                    minute,
+                    0);
+
+            appointments[currentIndex].EndTime =
+                appointments[currentIndex]
+                .StartTime
+                .AddMinutes(30);
+
+            currentIndex++;
+        }
+    }
+}
         public Hospital(int Id, string Name, DateTime StartTime, DateTime EndTime, string Disease, string DepartmentName, int DepartmentId, int DoctorId, int PatientId, string Symptoms)
         {
             this.Id = Id;
@@ -46,40 +106,61 @@ public List<Hospital> GetHospitalData()
         {
             List<Hospital> data = new List<Hospital>
             {
-                new Hospital(1000, "Milka", new DateTime(2020, 2, 5, 10, 30, 0), new DateTime(2020, 2, 5, 11, 30, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 2, "Swelling or bruising over a bone, Pain in the injured area"),
-                new Hospital(1001, "Janet", new DateTime(2020, 2, 3, 11, 0, 0), new DateTime(2020, 2, 3, 12, 0, 0), "Biological Problems", "GENERAL", 1, 3, 4, "Physical aches or pain, Memory difficulties or personality changes"),
-                new Hospital(1002, "Mercy", new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 11, 0, 0), "Skin Problem", "DERMATOLOGY", 3, 4, 5, "outbreak of swollen, pale red bumps or plaques"),
-                new Hospital(1003, "Laura", new DateTime(2020, 2, 9, 10, 0, 0), new DateTime(2020, 2, 9, 11, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 1, "Urinating often, Extreme fatigue, Blurry vision"),
-                new Hospital(1004, "Richa", new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 11, 0, 0), "Skin care treatment", "DERMATOLOGIST", 3, 4, 2, "Scaly or rough skin, Peeling skin, open sores or lesions"),
-                new Hospital(1005, "Adams", new DateTime(2020, 2, 7, 13, 30, 0), new DateTime(2020, 2, 7, 14, 0, 0), "General Checkup", "GENERAL", 1, 1, 3, "Decreased energy, Chronic fatigue, Difficulty concentrating"),
-                new Hospital(1006, "Richa", new DateTime(2020, 2, 7, 16, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 6, "Swelling, warmth, or redness in the joint"),
-                new Hospital(1007, "Adams", new DateTime(2020, 2, 13, 11, 0, 0), new DateTime(2020, 2, 13, 11, 30, 0), "Chest Pain", "CARDIOLOGY", 6, 7, 2, "Shortness of breath, Swollen feet or ankles"),
-                new Hospital(1008, "Milka", new DateTime(2020, 2, 13, 9, 0, 0), new DateTime(2020, 2, 13, 10, 0, 0), "Skin Care Treatment", "DERMATOLOGIST", 3, 4, 2, "a rash, which might be painful or itchy"),
-                new Hospital(1009, "Adams", new DateTime(2020, 2, 10, 14, 0, 0), new DateTime(2020, 2, 10, 16, 0, 0), "Surgery Treatment", "GENERAL", 1, 1, 3, "Pain at Site, Swelling/Hardening"),
-                new Hospital(1010, "Adams", new DateTime(2020, 2, 11, 11, 0, 0), new DateTime(2020, 2, 11, 13, 0, 0), "Bone Problem", "ORTHOPEDICS", 4, 5, 3, "Recurring or constant joint pain or tenderness"),
-
-                new Hospital(1011, "Adams", new DateTime(2020, 2, 1, 11, 0, 0), new DateTime(2020, 2, 1, 12, 0, 0), "General Checkup", "GENERAL", 1, 3, 1, "a pulsating feeling in the head, sensitivity to sound and light"),
-                new Hospital(1012, "Janet", new DateTime(2020, 2, 1, 16, 0, 0), new DateTime(2020, 2, 1, 17, 0, 0), "Complete loss of sensation", "NEUROLOGY", 2, 2, 4, "Partial or complete paralysis, Muscle weakness"),
-                new Hospital(1013, "Laura", new DateTime(2020, 2, 5, 13, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), "Health Checkup", "GENERAL", 1, 1, 1, "Sweating, Chills and Shivering"),
-                new Hospital(1014, "Adams", new DateTime(2020, 2, 5, 16, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), "Eye and Spectacles Checkup", "GENERAL", 1, 3, 3, "Frequent squinting, Eye fatigue or strain"),
-                new Hospital(1015, "Milka", new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
-                new Hospital(1016, "Adams", new DateTime(2020, 2, 6, 18, 0, 0), new DateTime(2020, 2, 6, 18, 30, 0), "Kidney disease", "DIABETOLOGY", 5, 6, 3, "Decreased urine output"),
-                new Hospital(1017, "Janet", new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 14, 30, 0), "Gastroparesis", "DIABETOLOGY", 5, 6, 4, "A feeling of fullness after eating just a few bites"),
-                new Hospital(1018, "Laura", new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 13, 0, 0), "Sleep apnea", "DIABETOLOGY", 5, 6, 1, "Gasping for air during sleep"),
-                new Hospital(1019, "Milka", new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 11, 0, 0), "Vision problems", "DIABETOLOGY", 5, 6, 2, "Severe, sudden eye pain"),
-                new Hospital(1020, "Milka", new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
-
-                new Hospital(1021, "Adams", new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 11, 0, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 3, "Swelling or bruising over a bone, Pain in the injured area"),
-                new Hospital(1022, "Mercy", new DateTime(2020, 2, 2, 15, 0, 0), new DateTime(2020, 2, 2, 15, 30, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 5, "Deformity, such as a bent arm or wrist"),
-                new Hospital(1023, "Milka", new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 14, 30, 0), "Rapid heartbeat", "CARDIOLOGY", 6, 7, 2, "Fluttering sensation in the chest"),
-                new Hospital(1024, "Adams", new DateTime(2020, 2, 4, 17, 30, 0), new DateTime(2020, 2, 4, 18, 30, 0), "Lightheadedness", "CARDIOLOGY", 6, 7, 3, "Sudden drop in blood pressure"),
-                new Hospital(1025, "Janet", new DateTime(2020, 2, 4, 15, 0, 0), new DateTime(2020, 2, 4, 15, 30, 0), "Shortness of breath", "CARDIOLOGY", 6, 7, 4, "Nasal congestion, runny nose, itchy or watery eyes"),
-
-                new Hospital(1026, "Milka", new DateTime(2020, 2, 3, 17, 0, 0), new DateTime(2020, 2, 3, 18, 30, 0), "Chest pain or discomfort", "CARDIOLOGY", 6, 7, 2, "Fast heart beat, and trouble breathing"),
-                new Hospital(1027, "Milka", new DateTime(2020, 2, 6, 15, 30, 0), new DateTime(2020, 2, 6, 16, 0, 0), "Racing heartbeat", "CARDIOLOGY", 6, 7, 2, "A fluttering in your chest"),
-                new Hospital(1028, "Milka", new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 14, 30, 0), "Heart Problem", "CARDIOLOGY", 6, 7, 2, "Fluid buildup from being overweight"),
-                new Hospital(1029, "Milka", new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 19, 30, 0), "Dizziness", "DIABETOLOGY", 5, 6, 2, "Feeling of lightheadedness or nearly fainting")
+                new Hospital(1000, "Milka", new DateTime(2026, 2, 5, 10, 30, 0), new DateTime(2026, 2, 5, 11, 30, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 2, "Swelling or bruising over a bone, Pain in the injured area"),
+                new Hospital(1001, "Janet", new DateTime(2026, 2, 3, 11, 0, 0), new DateTime(2026, 2, 3, 12, 0, 0), "Biological Problems", "GENERAL", 1, 3, 4, "Physical aches or pain, Memory difficulties or personality changes"),
+                new Hospital(1002, "Mercy", new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 11, 0, 0), "Skin Problem", "DERMATOLOGY", 3, 4, 5, "outbreak of swollen, pale red bumps or plaques"),
+                new Hospital(1003, "Laura", new DateTime(2026, 2, 9, 10, 0, 0), new DateTime(2026, 2, 9, 11, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 1, "Urinating often, Extreme fatigue, Blurry vision"),
+                new Hospital(1004, "Richa", new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 11, 0, 0), "Skin care treatment", "DERMATOLOGIST", 3, 4, 2, "Scaly or rough skin, Peeling skin, open sores or lesions"),
+                new Hospital(1005, "Adams", new DateTime(2026, 2, 7, 13, 30, 0), new DateTime(2026, 2, 7, 14, 0, 0), "General Checkup", "GENERAL", 1, 1, 3, "Decreased energy, Chronic fatigue, Difficulty concentrating"),
+                new Hospital(1006, "Richa", new DateTime(2026, 2, 7, 16, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 6, "Swelling, warmth, or redness in the joint"),
+                new Hospital(1007, "Adams", new DateTime(2026, 2, 13, 11, 0, 0), new DateTime(2026, 2, 13, 11, 30, 0), "Chest Pain", "CARDIOLOGY", 6, 7, 2, "Shortness of breath, Swollen feet or ankles"),
+                new Hospital(1008, "Milka", new DateTime(2026, 2, 13, 9, 0, 0), new DateTime(2026, 2, 13, 10, 0, 0), "Skin Care Treatment", "DERMATOLOGIST", 3, 4, 2, "a rash, which might be painful or itchy"),
+                new Hospital(1009, "Adams", new DateTime(2026, 2, 10, 14, 0, 0), new DateTime(2026, 2, 10, 16, 0, 0), "Surgery Treatment", "GENERAL", 1, 1, 3, "Pain at Site, Swelling/Hardening"),
+                new Hospital(1010, "Adams", new DateTime(2026, 2, 11, 11, 0, 0), new DateTime(2026, 2, 11, 13, 0, 0), "Bone Problem", "ORTHOPEDICS", 4, 5, 3, "Recurring or constant joint pain or tenderness"),
+
+                new Hospital(1011, "Adams", new DateTime(2026, 2, 1, 11, 0, 0), new DateTime(2026, 2, 1, 12, 0, 0), "General Checkup", "GENERAL", 1, 3, 1, "a pulsating feeling in the head, sensitivity to sound and light"),
+                new Hospital(1012, "Janet", new DateTime(2026, 2, 1, 16, 0, 0), new DateTime(2026, 2, 1, 17, 0, 0), "Complete loss of sensation", "NEUROLOGY", 2, 2, 4, "Partial or complete paralysis, Muscle weakness"),
+                new Hospital(1013, "Laura", new DateTime(2026, 2, 5, 13, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), "Health Checkup", "GENERAL", 1, 1, 1, "Sweating, Chills and Shivering"),
+                new Hospital(1014, "Adams", new DateTime(2026, 2, 5, 16, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), "Eye and Spectacles Checkup", "GENERAL", 1, 3, 3, "Frequent squinting, Eye fatigue or strain"),
+                new Hospital(1015, "Milka", new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
+                new Hospital(1016, "Adams", new DateTime(2026, 2, 6, 18, 0, 0), new DateTime(2026, 2, 6, 18, 30, 0), "Kidney disease", "DIABETOLOGY", 5, 6, 3, "Decreased urine output"),
+                new Hospital(1017, "Janet", new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 14, 30, 0), "Gastroparesis", "DIABETOLOGY", 5, 6, 4, "A feeling of fullness after eating just a few bites"),
+                new Hospital(1018, "Laura", new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 13, 0, 0), "Sleep apnea", "DIABETOLOGY", 5, 6, 1, "Gasping for air during sleep"),
+                new Hospital(1019, "Milka", new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 11, 0, 0), "Vision problems", "DIABETOLOGY", 5, 6, 2, "Severe, sudden eye pain"),
+                new Hospital(1020, "Milka", new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
+
+                new Hospital(1021, "Adams", new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 11, 0, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 3, "Swelling or bruising over a bone, Pain in the injured area"),
+                new Hospital(1022, "Mercy", new DateTime(2026, 2, 2, 15, 0, 0), new DateTime(2026, 2, 2, 15, 30, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 5, "Deformity, such as a bent arm or wrist"),
+                new Hospital(1023, "Milka", new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 14, 30, 0), "Rapid heartbeat", "CARDIOLOGY", 6, 7, 2, "Fluttering sensation in the chest"),
+                new Hospital(1024, "Adams", new DateTime(2026, 2, 4, 17, 30, 0), new DateTime(2026, 2, 4, 18, 30, 0), "Lightheadedness", "CARDIOLOGY", 6, 7, 3, "Sudden drop in blood pressure"),
+                new Hospital(1025, "Janet", new DateTime(2026, 2, 4, 15, 0, 0), new DateTime(2026, 2, 4, 15, 30, 0), "Shortness of breath", "CARDIOLOGY", 6, 7, 4, "Nasal congestion, runny nose, itchy or watery eyes"),
+
+                new Hospital(1026, "Milka", new DateTime(2026, 2, 3, 17, 0, 0), new DateTime(2026, 2, 3, 18, 30, 0), "Chest pain or discomfort", "CARDIOLOGY", 6, 7, 2, "Fast heart beat, and trouble breathing"),
+                new Hospital(1027, "Milka", new DateTime(2026, 2, 6, 15, 30, 0), new DateTime(2026, 2, 6, 16, 0, 0), "Racing heartbeat", "CARDIOLOGY", 6, 7, 2, "A fluttering in your chest"),
+                new Hospital(1028, "Milka", new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 14, 30, 0), "Heart Problem", "CARDIOLOGY", 6, 7, 2, "Fluid buildup from being overweight"),
+                new Hospital(1029, "Milka", new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 19, 30, 0), "Dizziness", "DIABETOLOGY", 5, 6, 2, "Feeling of lightheadedness or nearly fainting"),
+                new Hospital(1030, "Ethan Brooks", new DateTime(2026, 2, 3, 9, 0, 0),  new DateTime(2026, 2, 3, 10, 0, 0),  "Partial Paralysis",   "NEUROLOGY",    2, 2, 8,  "Muscle weakness on one side of the body"),
+                new Hospital(1031, "Liam Carter",  new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 10, 30, 0), "Statin Therapy",      "CARDIOLOGY",   6, 1, 9,  "High cholesterol follow-up"),
+                new Hospital(1032, "Ava Mitchell", new DateTime(2026, 2, 4, 11, 0, 0), new DateTime(2026, 2, 4, 12, 0, 0),  "Angioplasty",         "CARDIOLOGY",   6, 7, 10, "Chest discomfort after exertion"),
+                new Hospital(1033, "Noah Patel",   new DateTime(2026, 2, 5, 9, 30, 0), new DateTime(2026, 2, 5, 10, 0, 0),  "Muscle Weakness",     "NEUROLOGY",    2, 2, 11, "Difficulty lifting arms"),
+                new Hospital(1034, "Sophia Reyes", new DateTime(2026, 2, 5, 13, 0, 0), new DateTime(2026, 2, 5, 13, 30, 0), "Post-op Recovery",    "NEUROLOGY",    2, 2, 12, "Memory lapses, follow-up"),
+                new Hospital(1035, "Harper Kim",   new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 10, 30, 0), "Seizures",            "NEUROLOGY",    2, 2, 13, "Recurring seizures"),
+                new Hospital(1036, "Mason Lee",    new DateTime(2026, 2, 6, 11, 0, 0), new DateTime(2026, 2, 6, 11, 30, 0), "Antenatal Check",     "GENERAL",      1, 1, 14, "Routine antenatal visit"),
+                new Hospital(1037, "Olivia Bennett", new DateTime(2026, 2, 7, 9, 0, 0),  new DateTime(2026, 2, 7, 9, 30, 0),  "Hypertension",        "GENERAL",      1, 3, 15, "Elevated blood pressure"),
+                new Hospital(1038, "William Foster", new DateTime(2026, 2, 8, 14, 0, 0), new DateTime(2026, 2, 8, 15, 0, 0),  "Cardiac Arrhythmia",  "CARDIOLOGY",   6, 7, 16, "Irregular heartbeat"),
+                new Hospital(1039, "Isabella Cruz", new DateTime(2026, 2, 3, 8, 0, 0),  new DateTime(2026, 2, 3, 8, 30, 0),   "Asthma Review",       "GENERAL",      1, 3, 17, "Wheezing, shortness of breath"),
+                new Hospital(1040, "James Anderson", new DateTime(2026, 2, 4, 15, 0, 0), new DateTime(2026, 2, 4, 15, 30, 0), "Migraine",            "NEUROLOGY",    2, 2, 18, "Severe recurring headaches"),
+                new Hospital(1041, "Mia Thompson",   new DateTime(2026, 2, 5, 11, 0, 0), new DateTime(2026, 2, 5, 11, 30, 0), "Ear Infection",       "GENERAL",      1, 1, 19, "Ear pain, mild fever"),
+                new Hospital(1042, "Benjamin Singh", new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 14, 30, 0), "Diabetes Follow-up",  "DIABETOLOGY",  5, 6, 20, "Blood sugar management"),
+                new Hospital(1043, "Charlotte Diaz", new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 10, 30, 0), "Vaccination",         "GENERAL",      1, 1, 21, "Routine childhood immunization"),
+                new Hospital(1044, "Henry Walker",   new DateTime(2026, 2, 8, 11, 0, 0), new DateTime(2026, 2, 8, 11, 30, 0), "Cataract Screening",  "GENERAL",      1, 3, 22, "Blurred vision, light sensitivity"),
+                new Hospital(1045, "Amelia Ross",    new DateTime(2026, 2, 3, 13, 0, 0), new DateTime(2026, 2, 3, 13, 30, 0), "Psoriasis Flare-up",  "DERMATOLOGY",  3, 4, 23, "Red scaly patches on elbows"),
+                new Hospital(1046, "Lucas Martin",   new DateTime(2026, 2, 4, 16, 0, 0), new DateTime(2026, 2, 4, 16, 30, 0), "Sprained Ankle",      "ORTHOPEDICS",  4, 5, 24, "Pain and swelling after fall"),
+                new Hospital(1047, "Evelyn Garcia",  new DateTime(2026, 2, 5, 15, 0, 0), new DateTime(2026, 2, 5, 15, 30, 0), "Thyroid Check",       "GENERAL",      1, 1, 25, "Fatigue, weight changes"),
+                new Hospital(1048, "Logan Murphy",   new DateTime(2026, 2, 6, 9, 0, 0),  new DateTime(2026, 2, 6, 9, 30, 0),  "Allergy Rash",        "DERMATOLOGY",  3, 4, 26, "Itchy rash on arms and back"),
+                new Hospital(1049, "Aria Khan",      new DateTime(2026, 2, 7, 13, 0, 0), new DateTime(2026, 2, 7, 13, 30, 0), "Knee Pain",           "ORTHOPEDICS",  4, 5, 27, "Persistent knee pain")
             };
+            ApplyDynamicDates(data);
             return data;
         }
     }
@@ -135,7 +216,27 @@ public List<Patient> GetPatientsData()
                 new Patient(4, "Janet", "Janet", new DateTime(2000, 7, 3), "(071) 555-4544", "janet79@rpy.com", "4110 Old Redmond Rd.", "Biological Problem", "GENERAL", "B +ve", "Male", "Physical aches or pain, Memory difficulties or personality change"),
                 new Patient(5, "Mercy", "Mercy", new DateTime(2005, 4, 29), "(071) 555-5444", "mercy60@sample.com", "14 Garrett Hill", "Skin Hives", "DERMATOLOGY", "AB -ve", "Female", "outbreak of swollen, pale red bumps or plaques"),
                 new Patient(6, "Richa", "Richa", new DateTime(1989, 10, 29), "(206) 555-4444", "richa46@mail.com", "Coventry House\r\nMiner Rd.", "Arm Fracture", "ORTHOPEDICS", "B +ve", "Female", "Swelling, warmth, or redness in the joint"),
-                new Patient(7, "Maud Oliver", "Maud Oliver", new DateTime(1989, 10, 29), "(206) 666-4444", "moud46@rpy.com", "Coventry House\r\nMiner Rd.", "Racing heartbeat", "CARDIOLOGY", "B +ve", "Male", "A fluttering in your chest")
+                new Patient(7, "Maud Oliver", "Maud Oliver", new DateTime(1989, 10, 29), "(206) 666-4444", "moud46@rpy.com", "Coventry House\r\nMiner Rd.", "Racing heartbeat", "CARDIOLOGY", "B +ve", "Male", "A fluttering in your chest"),
+                new Patient(8, "Ethan Brooks", "Ethan", new DateTime(2001, 5, 14), "(071) 555-1101", "ethan01@mail.com", "12 Pine Lane", "Partial Paralysis", "NEUROLOGY", "O +ve", "Male", "Muscle weakness on one side of the body"),
+                new Patient(9, "Liam Carter", "Liam", new DateTime(1981, 8, 22), "(071) 555-1102", "liam02@mail.com", "45 Oak Drive", "Statin Therapy", "CARDIOLOGY", "A +ve", "Male", "High cholesterol, follow-up review"),
+                new Patient(10, "Ava Mitchell", "Ava", new DateTime(2006, 2, 9), "(071) 555-1103", "ava03@mail.com", "78 Maple St", "Angioplasty", "CARDIOLOGY", "B +ve", "Female", "Chest discomfort after exertion"),
+                new Patient(11, "Noah Patel", "Noah", new DateTime(1996, 11, 30), "(071) 555-1104", "noah04@mail.com", "9 Cedar Ct", "Muscle Weakness", "NEUROLOGY", "AB +ve", "Male", "Difficulty lifting arms, fatigue"),
+                new Patient(12, "Sophia Reyes", "Sophia", new DateTime(2008, 7, 4), "(071) 555-1105", "sophia05@mail.com", "23 Birch Rd", "Decreased Brain Activity", "NEUROLOGY", "O +ve", "Female", "Memory lapses, confusion"),
+                new Patient(13, "Harper Kim", "Harper", new DateTime(2000, 1, 18), "(071) 555-1106", "harper06@mail.com", "56 Walnut Ave", "Seizures", "NEUROLOGY", "B -ve", "Female", "Recurring seizures, follow-up"),
+                new Patient(14, "Mason Lee", "Mason", new DateTime(1998, 3, 27), "(071) 555-1107", "mason07@mail.com", "101 Elm Way", "Antenatal Check", "GENERAL", "O +ve", "Female", "Routine antenatal visit"),
+                new Patient(15, "Olivia Bennett", "Olivia", new DateTime(1974, 6, 12), "(071) 555-1108", "olivia08@mail.com", "300 Spruce St", "Hypertension", "GENERAL", "A +ve", "Female", "Elevated blood pressure readings"),
+                new Patient(16, "William Foster", "William", new DateTime(1965, 9, 5), "(071) 555-1109", "william09@mail.com", "17 Aspen Cir", "Cardiac Arrhythmia", "CARDIOLOGY", "O +ve", "Male", "Irregular heartbeat episodes"),
+                new Patient(17, "Isabella Cruz", "Isabella", new DateTime(2010, 4, 1), "(071) 555-1110", "isabella10@mail.com", "8 Willow Ln", "Asthma", "GENERAL", "O +ve", "Female", "Wheezing, shortness of breath"),
+                new Patient(18, "James Anderson", "James", new DateTime(1982, 12, 19), "(071) 555-1111", "james11@mail.com", "62 Poplar Ave", "Migraine", "NEUROLOGY", "B +ve", "Male", "Severe recurring headaches"),
+                new Patient(19, "Mia Thompson", "Mia", new DateTime(2012, 8, 8), "(071) 555-1112", "mia12@mail.com", "5 Hickory Pl", "Ear Infection", "GENERAL", "O +ve", "Female", "Ear pain, mild fever"),
+                new Patient(20, "Benjamin Singh", "Benjamin", new DateTime(1978, 10, 25), "(071) 555-1113", "benjamin13@mail.com", "140 Cypress Rd", "Diabetes Follow-up", "DIABETOLOGY", "B +ve", "Male", "Blood sugar management"),
+                new Patient(21, "Charlotte Diaz", "Charlotte", new DateTime(2014, 5, 16), "(071) 555-1114", "charlotte14@mail.com", "33 Sycamore Dr", "Vaccination", "GENERAL", "A +ve", "Female", "Routine childhood immunization"),
+                new Patient(22, "Henry Walker", "Henry", new DateTime(1969, 7, 30), "(071) 555-1115", "henry15@mail.com", "88 Redwood Blvd", "Cataract Screening", "GENERAL", "O +ve", "Male", "Blurred vision, light sensitivity"),
+                new Patient(23, "Amelia Ross", "Amelia", new DateTime(1995, 11, 11), "(071) 555-1116", "amelia16@mail.com", "21 Sequoia Way", "Psoriasis Flare-up", "DERMATOLOGY", "AB +ve", "Female", "Red scaly patches on elbows"),
+                new Patient(24, "Lucas Martin", "Lucas", new DateTime(2011, 2, 23), "(071) 555-1117", "lucas17@mail.com", "16 Magnolia Ct", "Sprained Ankle", "ORTHOPEDICS", "O +ve", "Male", "Pain and swelling after fall"),
+                new Patient(25, "Evelyn Garcia", "Evelyn", new DateTime(1971, 4, 9), "(071) 555-1118", "evelyn18@mail.com", "74 Beech St", "Thyroid Check", "GENERAL", "B -ve", "Female", "Fatigue, weight changes"),
+                new Patient(26, "Logan Murphy", "Logan", new DateTime(2015, 9, 14), "(071) 555-1119", "logan19@mail.com", "2 Aspen Pl", "Allergy Rash", "DERMATOLOGY", "O +ve", "Male", "Itchy rash on arms and back"),
+                new Patient(27, "Aria Khan", "Aria", new DateTime(1987, 6, 3), "(071) 555-1120", "aria20@mail.com", "99 Chestnut Rd", "Knee Pain", "ORTHOPEDICS", "A +ve", "Female", "Persistent knee pain, swelling")
             };
             return data;
         }
@@ -216,79 +317,79 @@ public List<Doctor> GetDoctorsData()
         {
             List<WorkDay> workDays = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 08, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 13, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 8, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 13, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 8, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 13, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 8, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 13, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 08, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 13, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 8, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 13, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 8, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 13, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 08, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 13, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 8, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 13, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 8, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 13, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 8, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 13, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 08, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 13, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 8, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 13, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 8, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 13, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays1 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 10, 0, 0), new DateTime(2020, 2, 01, 19, 0, 0), new DateTime(2020, 2, 01, 14, 0, 0), new DateTime(2020, 2, 01, 15, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, true, new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 19, 0, 0), new DateTime(2020, 2, 2, 14, 0, 0), new DateTime(2020, 2, 2, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 10, 0, 0), new DateTime(2020, 2, 3, 19, 0, 0), new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 15, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 19, 0, 0), new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 15, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 10, 0, 0), new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), new DateTime(2020, 2, 5, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Friday", 5, false, new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 19, 0, 0), new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 15, 0, 0), "TimeOff"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 19, 0, 0), new DateTime(2020, 2, 7, 14, 0, 0), new DateTime(2020, 2, 7, 15, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 10, 0, 0), new DateTime(2026, 2, 01, 19, 0, 0), new DateTime(2026, 2, 01, 14, 0, 0), new DateTime(2026, 2, 01, 15, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, true, new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 19, 0, 0), new DateTime(2026, 2, 2, 14, 0, 0), new DateTime(2026, 2, 2, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 10, 0, 0), new DateTime(2026, 2, 3, 19, 0, 0), new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 15, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 19, 0, 0), new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 15, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 10, 0, 0), new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), new DateTime(2026, 2, 5, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Friday", 5, false, new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 19, 0, 0), new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 15, 0, 0), "TimeOff"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 19, 0, 0), new DateTime(2026, 2, 7, 14, 0, 0), new DateTime(2026, 2, 7, 15, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays2 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, false, new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 21, 0, 0), new DateTime(2020, 2, 01, 16, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), "TimeOff"),
-                new WorkDay("Monday", 1, true, new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 21, 0, 0), new DateTime(2020, 2, 2, 16, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), "AddBreak"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 21, 0, 0), new DateTime(2020, 2, 3, 16, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 21, 0, 0), new DateTime(2020, 2, 4, 16, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 21, 0, 0), new DateTime(2020, 2, 5, 16, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 21, 0, 0), new DateTime(2020, 2, 6, 16, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 21, 0, 0), new DateTime(2020, 2, 7, 16, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, false, new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 21, 0, 0), new DateTime(2026, 2, 01, 16, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), "TimeOff"),
+                new WorkDay("Monday", 1, true, new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 21, 0, 0), new DateTime(2026, 2, 2, 16, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), "AddBreak"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 21, 0, 0), new DateTime(2026, 2, 3, 16, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 21, 0, 0), new DateTime(2026, 2, 4, 16, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 21, 0, 0), new DateTime(2026, 2, 5, 16, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 21, 0, 0), new DateTime(2026, 2, 6, 16, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 21, 0, 0), new DateTime(2026, 2, 7, 16, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays3 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, false, new DateTime(2020, 2, 01, 8, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 13, 0, 0), "TimeOff"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 8, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 13, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 8, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 13, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 8, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 13, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 8, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 13, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 8, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 13, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, true, new DateTime(2020, 2, 7, 8, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 13, 0, 0), "AddBreak")
+                new WorkDay("Sunday", 0, false, new DateTime(2026, 2, 01, 8, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 13, 0, 0), "TimeOff"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 8, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 13, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 8, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 13, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 8, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 13, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 8, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 13, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 8, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 13, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, true, new DateTime(2026, 2, 7, 8, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 13, 0, 0), "AddBreak")
             };
 
             List<WorkDay> workDays4 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 10, 0, 0), new DateTime(2020, 2, 01, 19, 0, 0), new DateTime(2020, 2, 01, 14, 0, 0), new DateTime(2020, 2, 01, 15, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 19, 0, 0), new DateTime(2020, 2, 2, 14, 0, 0), new DateTime(2020, 2, 2, 15, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 10, 0, 0), new DateTime(2020, 2, 3, 19, 0, 0), new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 15, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 19, 0, 0), new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 15, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 10, 0, 0), new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), new DateTime(2020, 2, 5, 15, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 19, 0, 0), new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 19, 0, 0), new DateTime(2020, 2, 7, 14, 0, 0), new DateTime(2020, 2, 7, 15, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 10, 0, 0), new DateTime(2026, 2, 01, 19, 0, 0), new DateTime(2026, 2, 01, 14, 0, 0), new DateTime(2026, 2, 01, 15, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 19, 0, 0), new DateTime(2026, 2, 2, 14, 0, 0), new DateTime(2026, 2, 2, 15, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 10, 0, 0), new DateTime(2026, 2, 3, 19, 0, 0), new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 15, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 19, 0, 0), new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 15, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 10, 0, 0), new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), new DateTime(2026, 2, 5, 15, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 19, 0, 0), new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 19, 0, 0), new DateTime(2026, 2, 7, 14, 0, 0), new DateTime(2026, 2, 7, 15, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays5 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, false, new DateTime(2020, 2, 01, 10, 0, 0), new DateTime(2020, 2, 01, 19, 0, 0), new DateTime(2020, 2, 01, 14, 0, 0), new DateTime(2020, 2, 01, 15, 0, 0), "TimeOff"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 19, 0, 0), new DateTime(2020, 2, 2, 14, 0, 0), new DateTime(2020, 2, 2, 15, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 10, 0, 0), new DateTime(2020, 2, 3, 19, 0, 0), new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 15, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 19, 0, 0), new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 15, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 10, 0, 0), new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), new DateTime(2020, 2, 5, 15, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 19, 0, 0), new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, true, new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 19, 0, 0), new DateTime(2020, 2, 7, 14, 0, 0), new DateTime(2020, 2, 7, 15, 0, 0), "AddBreak")
+                new WorkDay("Sunday", 0, false, new DateTime(2026, 2, 01, 10, 0, 0), new DateTime(2026, 2, 01, 19, 0, 0), new DateTime(2026, 2, 01, 14, 0, 0), new DateTime(2026, 2, 01, 15, 0, 0), "TimeOff"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 19, 0, 0), new DateTime(2026, 2, 2, 14, 0, 0), new DateTime(2026, 2, 2, 15, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 10, 0, 0), new DateTime(2026, 2, 3, 19, 0, 0), new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 15, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 19, 0, 0), new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 15, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 10, 0, 0), new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), new DateTime(2026, 2, 5, 15, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 19, 0, 0), new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, true, new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 19, 0, 0), new DateTime(2026, 2, 7, 14, 0, 0), new DateTime(2026, 2, 7, 15, 0, 0), "AddBreak")
             };
 
             List<WorkDay> workDays6 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 21, 0, 0), new DateTime(2020, 2, 01, 16, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 21, 0, 0), new DateTime(2020, 2, 2, 16, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, false, new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 21, 0, 0), new DateTime(2020, 2, 3, 16, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), "TimeOff"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 21, 0, 0), new DateTime(2020, 2, 4, 16, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 21, 0, 0), new DateTime(2020, 2, 5, 16, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 21, 0, 0), new DateTime(2020, 2, 6, 16, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, true, new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 21, 0, 0), new DateTime(2020, 2, 7, 16, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), "AddBreak")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 21, 0, 0), new DateTime(2026, 2, 01, 16, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 21, 0, 0), new DateTime(2026, 2, 2, 16, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, false, new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 21, 0, 0), new DateTime(2026, 2, 3, 16, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), "TimeOff"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 21, 0, 0), new DateTime(2026, 2, 4, 16, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 21, 0, 0), new DateTime(2026, 2, 5, 16, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 21, 0, 0), new DateTime(2026, 2, 6, 16, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, true, new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 21, 0, 0), new DateTime(2026, 2, 7, 16, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), "AddBreak")
             };
 
             List<Doctor> doctors = new List<Doctor>
@@ -315,9 +416,9 @@ public class WorkDay
         public DateTime? WorkStartHour { get; set; }
         public DateTime? WorkEndHour { get; set; }
         [Required(ErrorMessage = "Enter valid Hour")]
-        public DateTime? BreakStartHour { get; set; } = new DateTime(2020, 2, 01, 12, 0, 0);
+        public DateTime? BreakStartHour { get; set; } = new DateTime(2026, 2, 01, 12, 0, 0);
         [Required(ErrorMessage = "Enter valid Hour")]
-        public DateTime? BreakEndHour { get; set; } = new DateTime(2020, 2, 01, 13, 0, 0);
+        public DateTime? BreakEndHour { get; set; } = new DateTime(2026, 2, 01, 13, 0, 0);
         public string State { get; set; }
 
         public WorkDay() { }
@@ -346,24 +447,50 @@ public class WaitingList
         public string Treatment { get; set; }
         public int DepartmentId { get; set; }
         public int PatientId { get; set; }
+        private static readonly Random Rand = new();
+
+        private static DateTime GetRandomQueueDate()
+        {
+            int month = Rand.Next(1, 13);
+
+            int day = Rand.Next(
+                1,
+                DateTime.DaysInMonth(2026, month) + 1);
+
+            return new DateTime(
+                2026,
+                month,
+                day,
+                Rand.Next(8, 18),
+                0,
+                0);
+        }
+
 
         public List<WaitingList> GetWaitingList()
         {
 
             List<WaitingList> wait = new List<WaitingList>()
             {
-                new WaitingList {Id= 1, Name= "Laura", StartTime= new DateTime(2020, 2, 3, 8, 30, 0), EndTime= new DateTime(2020, 2, 3, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 1},
-                new WaitingList { Id= 2,Name= "Milka", StartTime= new DateTime(2020, 2, 4, 8, 30, 0), EndTime= new DateTime(2020, 2, 4, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 2 },
-                new WaitingList { Id= 3, Name= "Adams", StartTime= new DateTime(2020, 2, 4, 9, 30, 0), EndTime= new DateTime(2020, 2, 4, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 3 },
-                new WaitingList { Id= 4, Name= "Janet", StartTime= new DateTime(2020, 2, 3, 11, 0, 0), EndTime= new DateTime(2020, 2, 3, 12, 30, 0), Disease= "Frequent urination", DepartmentName= "DIABETALOGY", Treatment= "DIALOGIS", DepartmentId= 5, PatientId= 4 },
-                new WaitingList { Id= 5, Name= "Mercy", StartTime= new DateTime(2020, 2, 3, 11, 0, 0), EndTime= new DateTime(2020, 2, 3, 12, 30, 0), Disease= "Muscle weakness", DepartmentName= "NEUROLOGY", Treatment= "DIAGNOSIS", DepartmentId= 2, PatientId= 5 },
-                new WaitingList { Id= 6, Name= "Richa", StartTime= new DateTime(2020, 2, 3, 11, 0, 0), EndTime= new DateTime(2020, 2, 3, 12, 30, 0), Disease= "Shortness of breath", DepartmentName= "CARDIOLOGY", Treatment= "REGULAR CHECKUP", DepartmentId= 6, PatientId= 6 },
-                new WaitingList { Id= 7, Name= "Richa", StartTime= new DateTime(2020, 2, 3, 8, 30, 0), EndTime= new DateTime(2020, 2, 3, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 6 },
-                new WaitingList { Id= 8, Name= "Mercy", StartTime= new DateTime(2020, 8, 4, 8, 30, 0), EndTime= new DateTime(2020, 8, 4, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 5},
-                new WaitingList { Id= 9, Name= "Janet", StartTime= new DateTime(2020, 2, 4, 9, 30, 0), EndTime= new DateTime(2020, 2, 4, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 4 }
+                new WaitingList {Id= 1, Name= "Laura", StartTime= new DateTime(2026, 9, 3, 8, 30, 0), EndTime= new DateTime(2026, 9, 3, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 1},
+                new WaitingList { Id= 2,Name= "Milka", StartTime= new DateTime(2026, 9, 4, 8, 30, 0), EndTime= new DateTime(2026, 9, 4, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 2 },
+                new WaitingList { Id= 3, Name= "Adams", StartTime= new DateTime(2026, 9, 5, 9, 30, 0), EndTime= new DateTime(2026, 9, 5, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 3 },
+                new WaitingList { Id= 4, Name= "Janet", StartTime= new DateTime(2026, 9, 5, 11, 0, 0), EndTime= new DateTime(2026, 9, 5, 12, 30, 0), Disease= "Frequent urination", DepartmentName= "DIABETALOGY", Treatment= "DIALOGIS", DepartmentId= 5, PatientId= 4 },
+                new WaitingList { Id= 5, Name= "Mercy", StartTime= new DateTime(2026, 9, 6, 11, 0, 0), EndTime= new DateTime(2026, 9, 6, 12, 30, 0), Disease= "Muscle weakness", DepartmentName= "NEUROLOGY", Treatment= "DIAGNOSIS", DepartmentId= 2, PatientId= 5 },
+                new WaitingList { Id= 6, Name= "Richa", StartTime= new DateTime(2026, 9, 10, 11, 0, 0), EndTime= new DateTime(2026, 9, 10, 12, 30, 0), Disease= "Shortness of breath", DepartmentName= "CARDIOLOGY", Treatment= "REGULAR CHECKUP", DepartmentId= 6, PatientId= 6 },
+                new WaitingList { Id= 7, Name= "Richa", StartTime= new DateTime(2026, 9, 8, 8, 30, 0), EndTime= new DateTime(2026, 9, 8, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 6 },
+                new WaitingList { Id= 8, Name= "Mercy", StartTime= new DateTime(2026, 9, 15, 8, 30, 0), EndTime= new DateTime(2026, 9, 15, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 5},
+                new WaitingList { Id= 9, Name= "Janet", StartTime= new DateTime(2026, 9, 22, 9, 30, 0), EndTime= new DateTime(2026, 9, 22, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 4 }
 
             };
-            return wait;
+            foreach (var item in wait)
+                {
+                    var start = GetRandomQueueDate();
+
+                    item.StartTime = start;
+                    item.EndTime = start.AddMinutes(30);
+                }
+                            return wait;
 
         }
     }
@@ -577,10 +704,10 @@ public List<Activity> GetActivityData()
         {
             List<Activity> data = new List<Activity>
             {
-                new Activity("Added New Doctor", "Dr.Johnson James, Cardiologist", "5 mins ago", "doctor", new DateTime(2020, 2, 1, 9, 0, 0)),
-                new Activity("Added New Appointment", "Laura for General Checkup on 7th March, 2020 @ 8.30 AM with Dr.Molli Cobb, Cardiologist", "5 mins ago", "appointment", new DateTime(2020, 2, 1, 11, 0, 0)),
-                new Activity("Added New Patient", "James Richard for Fever and cold", "5 mins ago", "patient", new DateTime(2020, 2, 1, 10, 0, 0)),
-                new Activity("Added New Appointment", "Joseph for consultation on 7th Feb, 2020 @ 11.10 AM with Dr.Molli Cobb", "5 mins ago", "appointment", new DateTime(2020, 2, 1, 11, 0, 0))
+                new Activity("Added New Doctor", "Dr.Johnson James, Cardiologist", "5 mins ago", "doctor", new DateTime(2026, 2, 1, 9, 0, 0)),
+                new Activity("Added New Appointment", "Laura for General Checkup on 7th March, 2020 @ 8.30 AM with Dr.Molli Cobb, Cardiologist", "5 mins ago", "appointment", new DateTime(2026, 2, 1, 11, 0, 0)),
+                new Activity("Added New Patient", "James Richard for Fever and cold", "5 mins ago", "patient", new DateTime(2026, 2, 1, 10, 0, 0)),
+                new Activity("Added New Appointment", "Joseph for consultation on 7th Feb, 2020 @ 11.10 AM with Dr.Molli Cobb", "5 mins ago", "appointment", new DateTime(2026, 2, 1, 11, 0, 0))
             };
             return data;
         }
diff --git a/webapp/server/AppointmentPlanner/Shared/MainLayout.razor b/webapp/server/AppointmentPlanner/Shared/MainLayout.razor
index 5f431d0..681169e 100644
--- a/webapp/server/AppointmentPlanner/Shared/MainLayout.razor
+++ b/webapp/server/AppointmentPlanner/Shared/MainLayout.razor
@@ -13,53 +13,31 @@
         </svg>
     </div>
     <div class="sb-caption">
-        <h4 class="my-4">Appointment planner initializing...</h4>
     </div>
 </div>
 <div class="planner-wrapper" style="width: 100%; visibility:@(visible); opacity:@(opacity)">
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <div class="planner-header">
-        <SfAppBar ColorMode="AppBarColor.Primary" CssClass="custom-appbar">
-            <div class="side-bar-opener">
-                <span class="open-icon e-icons" @onclick="@showSideBar"></span>
-            </div>
-            <div class="name-cantainer">
-                <span class="clinic-image icon-logo"></span>
-                <h1 class="clinic-name appointment-title">APPOINTMENT PLANNER</h1>
-            </div>
-            <AppBarSpacer></AppBarSpacer>
-            <div class='logout-container'>
-                <div class="logout-icon-container"><span class="icon-logout logout-image"></span></div>
-                <span class='logout-name'>Logout</span>
-            </div>
-            <div class="sb-header-item sb-table-cell sb-download-wrapper">
-                <a href="https://github.com/syncfusion/ej2-showcase-blazor-appointment-planner" target="_blank">
-                    <div id="github" class="sb-github-btn">
-                        <div class="github-image">
-                            <img src="css/appoinment/mark.svg" alt="github" />
-                        </div>
-                    </div>
-                </a>
-            </div>
-        </SfAppBar>
+
     </div>
     <SfSidebar ID="plannerSiderBar" EnableGestures="false" @bind-IsOpen="open" MediaQuery="(min-width: 600px)" Type="SidebarType.Auto" Created="OnCreate" CloseOnDocumentClick="onDocumentClick">
         <ChildContent>
             <div class="dock">
                 <div class="info align-center">
-                    <div class="image"><img src="css/appoinment/assets/images/Admin.png" alt="Admin" /></div>
-                    <div class="content nameContent">
-                        <p class='name'>Jane Doe</p>
-                        <p class='user-type'>Admin</p>
-                    </div>
+
+                 <div class="content nameContent">
+                <h1 class="clinic-name appointment-title">APPOINTMENT PLANNER</h1>
+                </div>
                 </div>
                 <div class="sideparent menulist">
+                    <nav aria-label="Primary">
                     <ul class="nav flex-column">
                         <li class="nav-item e-list-item">
                             <NavLink class="nav-link sidebar-item" href="" Match="NavLinkMatch.All" @onclick="@CloseSidePane">
-                                <span class="dashboard-image">
+                                <span class="dashboard-image" aria-hidden="true">
                                     <span class="item-image icon-dashboard"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Dashboard">Dashboard</span>
+                                <span class="text" title="Dashboard">Dashboard</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -67,7 +45,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-schedule"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Schedule">Schedule</span>
+                                <span class="text" title="Schedule">Schedule</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -75,7 +53,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-doctors"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Doctors">Doctors</span>
+                                <span class="text" title="Doctors">Doctors</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -83,7 +61,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-patients"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Patients">Patients</span>
+                                <span class="text" title="Patients">Patients</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -91,7 +69,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-preference"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Preference">Preference</span>
+                                <span class="text" title="Settings">Settings</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -99,15 +77,18 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-about"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="About">About</span>
+                                <span class="text" title="About">About</span>
                             </NavLink>
                         </li>
                     </ul>
+                    </nav>
                 </div>
             </div>
+
+
         </ChildContent>
     </SfSidebar>
-    <main class="main-content">
+    <main class="main-content" id="main-content">
         @Body
     </main>
     <div class="footer">
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/about.css b/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/about.css
deleted file mode 100644
index b5e8ae5..0000000
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/about.css
+++ /dev/null
@@ -1,213 +0,0 @@
-.about-container {
-    margin: 50px 65.5px;
-}
-
-    .about-container p {
-        font-size: 13px;
-        color: 666666;
-        letter-spacing: 0.48px;
-        line-height: 20px;
-        margin-top: 30px;
-    }
-
-@media (max-width: 850px) {
-    .about-container {
-        margin: 20px 24px;
-    }
-
-        .about-container .module-title {
-            padding-left: 1.5px !important;
-        }
-}
-
-.e-sb-icon {
-    font-family: 'sb-icons';
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.about {
-    font-size: 14px;
-    color: #9aa5bb;
-    letter-spacing: 0.05px;
-    height: 100%;
-}
-
-.about-heading {
-    font-weight: bold;
-    color: #485058;
-    font-size: 16px;
-    padding: 0 0 12px 0;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-}
-
-.about-description {
-    text-align: justify;
-    color: #485058;
-    font-size: 13px;
-    line-height: 24px;
-    padding-bottom: 24px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-}
-
-.list-heading {
-    font-weight: bold;
-    color: #485058;
-    font-size: 16px;
-    padding-bottom: 12px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-}
-
-.about-component {
-    color: #485058;
-    font-size: 14px;
-    padding-bottom: 24px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-    margin-left: 20px;
-}
-
-    .about-component li {
-        line-height: 24px;
-    }
-
-.control-item {
-    color: #4a90e2;
-    display: flex;
-    line-height: 30px;
-    display: inline-block;
-    width: 168px;
-}
-
-.sfimage-button::before {
-    content: '\e702';
-    color: #7575ff;
-}
-
-.sfimage-schedule::before {
-    content: '\e709';
-    color: #7575ff;
-}
-
-.sfimage-chart::before {
-    content: '\e906';
-    color: #7575ff;
-}
-
-.sfimage-card::before {
-    content: '\e713';
-    color: #7575ff;
-}
-
-.sfimage-sidebar::before {
-    content: '\e705';
-    color: #7575ff;
-}
-
-.sfimage-autocomplete::before {
-    content: '\e70b';
-    color: #7575ff;
-}
-
-.sfimage-datepicker::before {
-    content: '\e90d';
-    color: #7575ff;
-}
-
-.sfimage-timepicker::before {
-    content: '\e927';
-    color: #7575ff;
-}
-
-.sfimage-dialog::before {
-    content: '\e90e';
-    color: #7575ff;
-}
-
-.sfimage-dropdownlist::before {
-    content: '\e70a';
-    color: #7575ff;
-}
-
-.sfimage-grid::before {
-    content: '\e913';
-    color: #7575ff;
-}
-
-.sfimage-checkbox::before {
-    content: '\e707';
-    color: #7575ff;
-}
-
-.sfimage-numerictextbox::before {
-    content: '\e72a';
-    color: #7575ff;
-}
-
-.sfimage-radiobutton::before {
-    content: '\e727';
-    color: #7575ff;
-}
-
-.sfimage-listview::before {
-    content: '\e917';
-    color: #7575ff;
-}
-
-.sfimage-treeview::before {
-    content: '\e92b';
-    color: #7575ff;
-}
-
-.sfimage-textboxes::before {
-    content: '\e919';
-    color: #7575ff;
-}
-
-.sfimage-toast::before {
-    content: '\e716';
-    color: #7575ff;
-}
-
-.sf-icon-skeleton::before {
-    content: '\e904';
-    color: #7575ff;
-}
-
-.sf-icon-appbar::before {
-    content: "\e900";
-    color: #7575ff;
-}
-
-.sf-icon-predefineddialogs::before {
-    content: "\e901";
-    color: #7575ff;
-}
-
-.sf-icon-message::before {
-    content: "\e903";
-    color: #7575ff;
-}
-
-.control-icon {
-    font-size: 18px;
-    margin-right: 15px;
-    vertical-align: middle;
-}
-
-.control-name {
-    font-size: 14px;
-}
-
-.about-component {
-    margin-left: 20px;
-}
-
-/*skeleton*/
-.about-descrip-skeleton {
-    line-height: 20px;
-    margin-top: 30px;
-}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css b/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css
deleted file mode 100644
index 504196a..0000000
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css
+++ /dev/null
@@ -1,362 +0,0 @@
-.planner-dashboard {
-    display: flex;
-    margin: 50px 75px;
-    font-size: 14px;
-    letter-spacing: 0.38px;
-    height: 100%;
-}
-
-.planner-dashboard .view-detail-display {
-    width: 100%;
-}
-
-.planner-dashboard .view-detail-display .e-card.day-events-container .label-text,
-.planner-dashboard .view-detail-display .e-card.week-events-container .label-text {
-    font-weight: 600;
-    font-size: 16px;
-    color: #333;
-    letter-spacing: 0.48px;
-    display: flex;
-    padding: 10px 12px 6.5px 12px;
-}
-
-.planner-dashboard .e-card .e-card-content {
-    padding: 0px;
-}
-
-.planner-dashboard .view-detail-display .grid-container {
-    height: 270px;
-}
-
-.planner-dashboard .text-display {
-    text-align: center;
-    line-height: 30px;
-}
-
-.planner-dashboard .view-detail-display .grid-container .e-card-header {
-    height: 60px;
-}
-
-.planner-dashboard .view-detail-display .grid-container .e-card-header .e-card-header-caption .e-card-header-title {
-    display: flex;
-    padding: 0px;
-    font-weight: 600;
-}
-
-.planner-dashboard .view-detail-display .grid-container .e-card-header .e-card-header-caption .label-text {
-    flex: auto;
-    letter-spacing: 0.48px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: .5rem 0;
-}
-
-.planner-dashboard .view-detail-display .grid-container .link-text {
-    flex: initial;
-    font-size: 13px;
-    color: #5851e1;
-    letter-spacing: 0.39px;
-    text-align: right;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.planner-dashboard .view-detail-display .grid-container .link-text a {
-    cursor: pointer;
-    text-decoration: underline;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.planner-dashboard header {
-    display: none;
-}
-
-.planner-dashboard .view-detail-display .e-card.day-events-container,
-.planner-dashboard .view-detail-display .e-card.week-events-container {
-    background: #fff;
-    box-shadow: 1px 2px 20px 0 rgba(173, 173, 255, 0.20);
-}
-
-.planner-dashboard .e-card {
-    border: 0px;
-}
-
-
-.planner-dashboard .view-detail-display .e-card .week-event-count,
-.planner-dashboard .view-detail-display .e-card .day-event-count {
-    font-weight: 400;
-    font-size: 36px;
-    cursor: default;
-    color: #5851e1;
-    letter-spacing: 1.08px;
-    height: 44px;
-    display: flex;
-    justify-content: center;
-    flex-basis: 50%;
-}
-
-.planner-dashboard .view-detail-display .e-card .count-container {
-    display: flex;
-    margin: 0 16px 6.3px 17.4px;
-}
-
-.planner-dashboard .view-detail-display .e-card .icon-week img,
-.planner-dashboard .view-detail-display .e-card .icon-day img {
-    width: 57px;
-    height: 56.2px;
-}
-
-.planner-dashboard .view-detail-display .chart-container,
-.planner-dashboard .view-detail-display .grid-container {
-    margin-top: 30px;
-    box-shadow: 1px 2px 20px 0 rgba(173, 173, 255, 0.20);
-}
-
-.planner-dashboard .view-detail-display .chart-container {
-    width: 100%;
-    height: 340px;
-}
-
-.planner-dashboard .view-detail-display .chart-container text#chartcontainer_ChartTitle {
-    fill: #333;
-    font-weight: 600;
-    font-size: 16px;
-    color: #333 !important;
-    letter-spacing: 0.48px;
-    padding: 10px 16px;
-}
-
-.planner-dashboard .list-display {
-    padding-left: 0px;
-}
-
-.planner-dashboard .list-display .recent-activity,
-.planner-dashboard .list-display .doctor-availability {
-    background-clip: padding-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    background: #fff;
-    box-shadow: 1px 2px 20px 0 rgba(173, 173, 255, 0.20);
-    height: 375px;
-}
-
-.planner-dashboard .list-display .recent-activity {
-    margin-bottom: 30px;
-    width: 100%;
-}
-
-/*activity listview*/
-
-.activity-template .e-list-header {
-    border-bottom: 0;
-    font-weight: 600;
-    font-size: 16px;
-    color: #333 !important;
-    letter-spacing: 0.48px;
-    padding: 10px 16px;
-}
-
-.activity-template .e-list-container .e-list-item {
-    border: none;
-    height: 100%;
-    padding: 0px 16px;
-    margin-bottom: 10.2px;
-    line-height: 18px;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container {
-    padding: 5px 0;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container.doctor {
-    border-left: 2px solid #e16651;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container.appointment {
-    border-left: 2px solid #5851e1;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container.patient {
-    border-left: 2px solid #51e1b7;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container .activity-message {
-    font-weight: 400;
-    font-size: 13px;
-    color: #333;
-    letter-spacing: 0.39px;
-    line-height: 18px;
-    height: auto;
-    margin-left: 12px;
-    padding-bottom: 5px;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container .activity-message .type-name {
-    font-weight: bold;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container .activity-time {
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 0.39px;
-    line-height: 18px;
-    width: 254px;
-    height: 20.1px;
-    margin-left: 12px;
-}
-
-
-/*doctor availability*/
-
-.e-list-template .e-list-header {
-    border-bottom: 0;
-    flex: auto;
-    font-weight: 600;
-    font-size: 16px;
-    color: #333 !important;
-    letter-spacing: 0.48px;
-    padding: 10px 16px;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text {
-    width: 100%;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text .availability-title {
-    display: flex;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text .availability-title .header-text {
-    flex: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text .availability-title .all-text {
-    flex: initial;
-    font-weight: 400;
-    font-size: 13px;
-    color: #5851e1;
-    letter-spacing: 0.39px;
-    text-align: right;
-    margin-right: 4px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.e-list-template .e-list-container,
-.activity-template .e-list-container {
-    padding-top: 10px;
-}
-
-.e-list-template .e-list-container li.e-list-item {
-    border: none;
-    display: flex;
-    padding: 5px 16px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container {
-    display: flex;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container {
-    display: flex;
-    padding-left: 1px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image {
-    padding: 5px 0;
-    position: relative;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image img {
-    height: 32px;
-    width: 32px;
-    border-radius: 16px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.busy,
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.available,
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.away {
-    display: inline-block;
-    border: 2px solid #fff;
-    border-radius: 16px;
-    height: 14px;
-    width: 14px;
-    position: absolute;
-    top: 47%;
-    left: 65%;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.busy {
-    background: #d40000;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.away {
-    background: #ff8c2e;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.available {
-    background: #00d406;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .detail-container {
-    display: grid;
-    padding-left: 16px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .detail-container .doctor-name {
-    font-weight: 500;
-    font-size: 13px;
-    color: #666;
-    letter-spacing: 0.39px;
-    padding: 3px 0;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .detail-container .doctor-speciality {
-    font-size: 10px;
-    color: #666;
-    letter-spacing: 0.3px;
-    padding: 2px 0;
-}
-
-.e-tooltip-wrap {
-    border-radius: 15px 15px 15px 0;
-    opacity: 0.8;
-    background: #333;
-}
-
-.e-tooltip-wrap .e-tip-content {
-    border-radius: 15px 15px 15px 0;
-    font-size: 13px;
-    color: #fff;
-    letter-spacing: 0.39px;
-    padding: 5px 8px;
-}
-
-.view-detail-display .col-lg-8,
-.view-detail-display .col-md-8,
-.view-detail-display .col-sm-8 {
-    padding-right: 20px;
-    padding-left: 0px;
-}
-
-.view-detail-display a {
-    text-decoration: underline;
-    color: -webkit-link;
-}
-
-.e-listview .e-list-header .e-text {
-    cursor: initial;
-    text-indent: 0;
-}
-
-@media (max-width: 850px) {
-    .planner-dashboard {
-        margin: 20px 10px;
-    }
-}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css b/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css
deleted file mode 100644
index b084f1e..0000000
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css
+++ /dev/null
@@ -1,370 +0,0 @@
-.doctor-details-container {
-    margin: 50px 57px;
-}
-
-    .doctor-details-container header {
-        display: flex;
-        margin-bottom: 34.2px;
-        flex-direction: column;
-    }
-
-        .doctor-details-container header .detail-header-title {
-            display: flex;
-        }
-
-            .doctor-details-container header .detail-header-title span {
-                padding-right: 10px;
-                font-size: 25px;
-                cursor: pointer;
-            }
-
-            .doctor-details-container header .detail-header-title .e-add-icon {
-                padding: 0 6px;
-            }
-
-        .doctor-details-container header .doctor-detail {
-            display: flex;
-            justify-content: flex-end;
-        }
-
-            .doctor-details-container header .doctor-detail .edit-details, .doctor-details-container header .doctor-detail .delete-details {
-                width: 100px;
-                height: 32px;
-                color: white;
-            }
-
-            .doctor-details-container header .doctor-detail .edit-details {
-                background-color: #7575ff;
-            }
-
-            .doctor-details-container header .doctor-detail .delete-details {
-                margin-right: 16px;
-                background-color: #ff4f4f;
-            }
-
-    .doctor-details-container .active-doctor {
-        display: grid;
-        grid-template-columns: 0.3fr 1fr 1fr;
-    }
-
-        .doctor-details-container .active-doctor .active-doctor-info .designation, .doctor-details-container .active-doctor .active-doctor-info .label-text, .doctor-details-container .active-doctor .active-doctor-info .specialization, .doctor-details-container .active-doctor .active-doctor-info .experience, .doctor-details-container .active-doctor .active-doctor-info .available-days, .doctor-details-container .active-doctor .active-doctor-info .mobile, .doctor-details-container .active-doctor .work-days-container header .title-text, .doctor-details-container .active-doctor .work-days-content .day-name, .doctor-details-container .active-doctor .work-days-content .day-break-hours {
-            font-size: 13px;
-            letter-spacing: 0.39px;
-        }
-
-        .doctor-details-container .active-doctor .active-doctor-info .designation, .doctor-details-container .active-doctor .active-doctor-info .specialization, .doctor-details-container .active-doctor .active-doctor-info .experience, .doctor-details-container .active-doctor .active-doctor-info .available-days, .doctor-details-container .active-doctor .active-doctor-info .mobile, .doctor-details-container .active-doctor .work-days-content .day-name, .doctor-details-container .active-doctor .work-days-content .day-break-hours {
-            color: #333;
-        }
-
-        .doctor-details-container .active-doctor .active-doctor-image {
-            position: relative;
-            display: flex;
-            margin: 0 auto;
-        }
-
-            .doctor-details-container .active-doctor .active-doctor-image img {
-                height: 100px;
-                width: 100px;
-                border-radius: 50px;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-image .availability {
-                height: 20px;
-                width: 20px;
-                top: 70px;
-                left: 77px;
-                position: absolute;
-                border: 2px solid #fff;
-                border-radius: 16px;
-            }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability.busy {
-                    background: #d40000;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability.away {
-                    background: #ff8c2e;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability.available {
-                    background: #00d406;
-                }
-
-            .doctor-details-container .active-doctor .active-doctor-image .upload {
-                position: absolute;
-                top: 35px;
-                left: 35px;
-                display: none;
-                font-size: 30px;
-                color: white;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-image:hover .upload.icon-upload_photo.new-doctor {
-                display: block;
-            }
-
-        .doctor-details-container .active-doctor .active-doctor-info {
-            flex: 1;
-        }
-
-            .doctor-details-container .active-doctor .active-doctor-info .label-text {
-                color: #666;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-info .info-field-container {
-                margin-bottom: 20px;
-            }
-
-                .doctor-details-container .active-doctor .active-doctor-info .info-field-container div.name {
-                    padding-bottom: 3px;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-info .info-field-container div.education {
-                    padding-bottom: 7px;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-info .info-field-container div.label-text {
-                    padding-bottom: 4px;
-                }
-
-            .doctor-details-container .active-doctor .active-doctor-info .basic-detail .name {
-                font-weight: 600;
-                font-size: 18px;
-                color: #333;
-                letter-spacing: 0.54px;
-                height: 22px;
-                font-weight: bold;
-                max-width: 250px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-info .basic-detail .education {
-                font-size: 10px;
-                color: #333;
-                letter-spacing: 0.3px;
-                height: 13px;
-            }
-
-        .doctor-details-container .active-doctor .work-days-container {
-            flex: 2;
-        }
-
-            .doctor-details-container .active-doctor .work-days-container header {
-                display: flex;
-                margin-bottom: 17.9px;
-                flex-direction: row;
-            }
-
-                .doctor-details-container .active-doctor .work-days-container header .title-text {
-                    margin: 5px 0;
-                    color: #666;
-                }
-
-                .doctor-details-container .active-doctor .work-days-container header .add-container {
-                    padding-left: 18.3px;
-                    display: flex;
-                }
-
-                    .doctor-details-container .active-doctor .work-days-container header .add-container .e-btn {
-                        width: 23.3px;
-                        height: 22.8px;
-                        margin: 2px 0;
-                    }
-
-                        .doctor-details-container .active-doctor .work-days-container header .add-container .e-btn .e-btn-icon {
-                            font-size: 11px;
-                        }
-
-                    .doctor-details-container .active-doctor .work-days-container header .add-container .button-label {
-                        margin: auto 0;
-                        font-weight: 500;
-                        font-size: 13px;
-                        color: #7575ff;
-                        letter-spacing: 0.39px;
-                        padding: 0 10px;
-                        cursor: pointer;
-                    }
-
-                .doctor-details-container .active-doctor .work-days-container header .e-add-icon::before {
-                    content: '\e95c';
-                }
-
-            .doctor-details-container .active-doctor .work-days-container .work-days-content .work-day-item {
-                display: grid;
-                grid-template-columns: 100px auto;
-                padding-bottom: 10px;
-            }
-
-                .doctor-details-container .active-doctor .work-days-container .work-days-content .work-day-item .day-break-hours.TimeOff {
-                    font-size: 13px;
-                    color: #f00;
-                    letter-spacing: 0.39px;
-                }
-
-.break-hour-dialog {
-    width: 445px;
-    max-height: 98% !important;
-}
-
-    .break-hour-dialog .e-dlg-content .break-hour-operations {
-        font-weight: 600;
-        font-size: 11px;
-        color: #666;
-        letter-spacing: 0.33px;
-        line-height: 18px;
-        padding-bottom: 20px;
-    }
-
-    .break-hour-dialog .e-dlg-content .break-hour-header {
-        display: flex;
-    }
-
-        .break-hour-dialog .e-dlg-content .break-hour-header div:nth-child(1) {
-            flex: 0.25;
-        }
-
-        .break-hour-dialog .e-dlg-content .break-hour-header div:nth-child(2), .break-hour-dialog .e-dlg-content .break-hour-header div:nth-child(3) {
-            flex: 1;
-            margin: 0 30px;
-            font-weight: 600;
-            font-size: 11px;
-            color: #666;
-            letter-spacing: 0.33px;
-        }
-
-    .break-hour-dialog .e-dlg-content :nth-child(3).break-hour-days {
-        padding-top: 7px !important;
-    }
-
-    .break-hour-dialog .e-dlg-content .break-hour-days {
-        display: flex;
-        padding-top: 21px;
-    }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .day-button {
-            height: 32px;
-            width: 32px;
-        }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .day-button .e-btn {
-                background: #7575ff;
-                border-color: #7575ff;
-                height: 32px;
-                width: 32px;
-            }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .day-button.TimeOff {
-                margin: 5px 0;
-            }
-
-                .break-hour-dialog .e-dlg-content .break-hour-days .day-button.TimeOff .e-btn {
-                    background: #f00;
-                    border-color: #f00;
-                }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .day-button.RemoveBreak .e-btn {
-                background: #fff;
-                border: 1px solid #c0c0c0;
-                color: #333;
-            }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .start-container {
-            margin: 0 14.4px 0 16px;
-        }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .start-container.TimeOff, .break-hour-dialog .e-dlg-content .break-hour-days .end-container.TimeOff {
-                display: none;
-            }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .state-container:not(.TimeOff) {
-            display: none;
-        }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .state-container.TimeOff {
-            display: block;
-            margin: auto 27.9px;
-            font-size: 13px;
-            color: #333;
-            letter-spacing: 0.39px;
-        }
-
-.confirm-dialog.e-dialog.e-popup {
-    width: auto;
-}
-
-@media (max-width: 850px) {
-    .doctor-details-container {
-        margin: 20px 29px;
-    }
-
-        .doctor-details-container header {
-            flex-direction: row;
-            margin: 10px 0;
-        }
-
-            .doctor-details-container header .detail-header-title {
-                flex: auto;
-            }
-
-            .doctor-details-container header .doctor-detail {
-                justify-content: normal;
-            }
-
-                .doctor-details-container header .doctor-detail .delete-details, .doctor-details-container header .doctor-detail .edit-details {
-                    width: 70px;
-                }
-
-                .doctor-details-container header .doctor-detail .delete-details {
-                    margin-right: 10px;
-                }
-
-        .doctor-details-container .active-doctor {
-            grid-template-rows: 0fr 1fr 1fr;
-            grid-template-columns: none;
-        }
-
-            .doctor-details-container .active-doctor .active-doctor-image {
-                margin-bottom: 35px;
-                margin-top: 21px;
-            }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability {
-                    left: 80px;
-                    top: 65px;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-image .upload {
-                    top: 30%;
-                    left: 35%;
-                }
-
-            .doctor-details-container .active-doctor .active-doctor-info .info-field-container.basic-detail .name {
-                height: 29px;
-                padding-bottom: 3px;
-            }
-
-            .doctor-details-container .active-doctor .work-days-container header {
-                margin: 0;
-            }
-
-                .doctor-details-container .active-doctor .work-days-container header .title-text {
-                    margin-top: 5px;
-                    margin-right: 18.7px;
-                }
-
-                .doctor-details-container .active-doctor .work-days-container header div:nth-child(2) {
-                    display: flex;
-                }
-
-                    .doctor-details-container .active-doctor .work-days-container header div:nth-child(2) .button-label {
-                        padding-right: 6.6px;
-                        margin: auto 0;
-                    }
-
-            .doctor-details-container .active-doctor .work-days-container .work-days-content .work-day-item {
-                padding: 0;
-                padding-top: 14.4px;
-            }
-}
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/preference.css b/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/preference.css
deleted file mode 100644
index 7ac7a47..0000000
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/preference.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.preference-container {
-    margin: 50px 64px;
-}
-
-    .preference-container .module-title {
-        margin-left: 2.5px;
-    }
-
-    .preference-container .control-container {
-        padding-top: 16px;
-    }
-
-        .preference-container .control-container .label-text {
-            font-weight: 600;
-            font-size: 12px;
-            color: #666;
-            letter-spacing: 0.33px;
-            padding-bottom: 7px;
-        }
-
-        .preference-container .control-container:nth-child(2) {
-            padding-top: 34px;
-        }
-
-@media (max-width: 850px) {
-    .preference-container {
-        margin: 20px 13px;
-    }
-
-        .preference-container .module-title {
-            padding-left: 12.5px !important;
-        }
-
-        .preference-container .control-container {
-            padding-top: 16px;
-        }
-
-            .preference-container .control-container .label-text {
-                padding-bottom: 7px;
-                margin-left: 11.5px;
-            }
-
-            .preference-container .control-container:nth-child(2) {
-                padding-top: 30px;
-            }
-}
-
-/*skeleton*/
-
-.planner-preference-skeleton {
-    margin: 50px;
-}
-
-.preference-container1 {
-    height: 20%;
-    width: 100%;
-    margin: 0% 0% 4% 0%;
-}
-
-.preference-container2 {
-    height: 80%;
-    width: 100%;
-}
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appointment/about.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/about.css
new file mode 100644
index 0000000..0d1959a
--- /dev/null
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/about.css
@@ -0,0 +1,402 @@
+.about-container {
+    margin: 28px 44px 40px;
+    max-width: 1120px;
+}
+
+    .about-container .about-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+    }
+
+    .about-container .showcase-count {
+        padding: 7px 12px;
+        color: #5d6680;
+        background: #f0f1ff;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .about-container .about-hero {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 280px;
+        gap: 32px;
+        margin-top: 24px;
+        padding: 32px;
+        border-left: 4px solid #35a67a;
+        background: linear-gradient(100deg, #f4fbf8, #f7f7ff);
+    }
+
+    .about-container .hero-copy .eyebrow {
+        color: #35a67a;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 1px;
+    }
+
+    .about-container .hero-copy h1 {
+        max-width: 650px;
+        margin: 10px 0 12px;
+        color: #303846;
+        font-size: 30px;
+        line-height: 38px;
+    }
+
+    .about-container .hero-copy p {
+        max-width: 680px;
+        margin: 0;
+        color: #687386;
+        font-size: 14px;
+        line-height: 22px;
+    }
+
+    .about-container .hero-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 22px;
+    }
+
+    .about-container .hero-actions a {
+        text-decoration: none;
+    }
+
+    .about-container .hero-signal {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 8px;
+        padding-left: 24px;
+        border-left: 1px solid #d9dcf2;
+        color: #687386;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .about-container .hero-signal .e-schedule {
+        color: #35a67a;
+        font-size: 32px;
+    }
+
+    .about-container .hero-signal strong {
+        color: #303846;
+        font-size: 16px;
+    }
+
+    .about-container .component-heading {
+        margin: 32px 0 18px;
+    }
+
+    .about-container .component-heading h2 {
+        margin: 0 0 5px;
+        color: #303846;
+        font-size: 20px;
+    }
+
+    .about-container .component-heading p {
+        margin: 0;
+        color: #687386;
+        font-size: 13px;
+    }
+
+    .about-container .component-group {
+        margin-top: 24px;
+    }
+
+    .about-container .component-group h3 {
+        margin: 0 0 12px;
+        color: #5d6680;
+        font-size: 13px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .6px;
+    }
+
+    .about-container .component-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 12px;
+    }
+
+    .about-container .showcase-component-card {
+        min-height: 112px;
+        border: 1px solid #e1e5ef;
+        box-shadow: 0 3px 10px rgba(47, 58, 85, .05);
+        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
+    }
+
+        .about-container .showcase-component-card:hover,
+        .about-container .showcase-component-card:focus-within {
+            border-color: #35a67a;
+            box-shadow: 0 5px 14px rgba(117, 117, 255, .16);
+            transform: translateY(-2px);
+        }
+
+        .about-container .showcase-component-card .e-card-content {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            height: 100%;
+            padding: 16px;
+        }
+
+        .about-container .showcase-component-card .control-icon {
+            flex: 0 0 25px;
+            margin: 2px 0 0;
+            color: #35a67a;
+            font-size: 22px;
+        }
+
+        .about-container .component-card-copy {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+            .about-container .component-card-copy strong {
+                color: #303846;
+                font-size: 14px;
+            }
+
+            .about-container .component-card-copy span {
+                color: #7b8493;
+                font-size: 11px;
+                line-height: 16px;
+            }
+
+        .about-container .component-link {
+            align-self: flex-end;
+            color: #35a67a;
+            font-size: 11px;
+            text-decoration: none;
+            white-space: nowrap;
+        }
+
+            .about-container .component-link:focus,
+            .about-container .hero-actions a:focus {
+                outline: 2px solid #35a67a;
+                outline-offset: 2px;
+            }
+    }
+
+@media (max-width: 850px) {
+    .about-container {
+        margin: 20px 13px 30px;
+        max-width: none;
+    }
+
+        .about-container .module-title {
+            padding-left: 1.5px !important;
+        }
+
+        .about-container .about-hero {
+            grid-template-columns: 1fr;
+            gap: 20px;
+            padding: 22px;
+        }
+
+        .about-container .hero-copy h1 {
+            font-size: 24px;
+            line-height: 32px;
+        }
+
+        .about-container .hero-signal {
+            padding: 18px 0 0;
+            border-top: 1px solid #d9dcf2;
+            border-left: 0;
+        }
+
+        .about-container .component-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+}
+
+.e-sb-icon {
+    font-family: 'sb-icons';
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.about {
+    font-size: 14px;
+    color: #9aa5bb;
+    letter-spacing: 0.05px;
+    height: 100%;
+}
+
+.about-heading {
+    font-weight: bold;
+    color: #485058;
+    font-size: 16px;
+    padding: 0 0 12px 0;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+}
+
+.about-description {
+    text-align: justify;
+    color: #485058;
+    font-size: 13px;
+    line-height: 24px;
+    padding-bottom: 24px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+}
+
+.list-heading {
+    font-weight: bold;
+    color: #485058;
+    font-size: 16px;
+    padding-bottom: 12px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+}
+
+.about-component {
+    color: #485058;
+    font-size: 14px;
+    padding-bottom: 24px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+    margin-left: 20px;
+}
+
+    .about-component li {
+        line-height: 24px;
+    }
+
+.control-item {
+    color: #4a90e2;
+    display: flex;
+    line-height: 30px;
+    display: inline-block;
+    width: 168px;
+}
+
+.sfimage-button::before {
+    content: '\e702';
+    color: #35a67a;
+}
+
+.sfimage-schedule::before {
+    content: '\e709';
+    color: #35a67a;
+}
+
+.sfimage-chart::before {
+    content: '\e906';
+    color: #35a67a;
+}
+
+.sfimage-card::before {
+    content: '\e713';
+    color: #35a67a;
+}
+
+.sfimage-sidebar::before {
+    content: '\e705';
+    color: #35a67a;
+}
+
+.sfimage-autocomplete::before {
+    content: '\e70b';
+    color: #35a67a;
+}
+
+.sfimage-datepicker::before {
+    content: '\e90d';
+    color: #35a67a;
+}
+
+.sfimage-timepicker::before {
+    content: '\e927';
+    color: #35a67a;
+}
+
+.sfimage-dialog::before {
+    content: '\e90e';
+    color: #35a67a;
+}
+
+.sfimage-dropdownlist::before {
+    content: '\e70a';
+    color: #35a67a;
+}
+
+.sfimage-grid::before {
+    content: '\e913';
+    color: #35a67a;
+}
+
+.sfimage-checkbox::before {
+    content: '\e707';
+    color: #35a67a;
+}
+
+.sfimage-numerictextbox::before {
+    content: '\e72a';
+    color: #35a67a;
+}
+
+.sfimage-radiobutton::before {
+    content: '\e727';
+    color: #35a67a;
+}
+
+.sfimage-listview::before {
+    content: '\e917';
+    color: #35a67a;
+}
+
+.sfimage-treeview::before {
+    content: '\e92b';
+    color: #35a67a;
+}
+
+.sfimage-textboxes::before {
+    content: '\e919';
+    color: #35a67a;
+}
+
+.sfimage-toast::before {
+    content: '\e716';
+    color: #35a67a;
+}
+
+.sf-icon-skeleton::before {
+    content: '\e904';
+    color: #35a67a;
+}
+
+.sf-icon-appbar::before {
+    content: "\e900";
+    color: #35a67a;
+}
+
+.sf-icon-predefineddialogs::before {
+    content: "\e901";
+    color: #35a67a;
+}
+
+.sf-icon-message::before {
+    content: "\e903";
+    color: #35a67a;
+}
+
+.control-icon {
+    font-size: 18px;
+    margin-right: 15px;
+    vertical-align: middle;
+}
+
+.control-name {
+    font-size: 14px;
+}
+
+/*skeleton*/
+.about-descrip-skeleton {
+    line-height: 20px;
+    margin-top: 30px;
+}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/.gitkeep b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/.gitkeep
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/.gitkeep
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/.gitkeep
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Doctors.svg b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Doctors.svg
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Doctors.svg
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Doctors.svg
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/ThisWeek_Widget.svg b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/ThisWeek_Widget.svg
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/ThisWeek_Widget.svg
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/ThisWeek_Widget.svg
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Today_Widget.svg b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Today_Widget.svg
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Today_Widget.svg
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Today_Widget.svg
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/favicon.ico b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/favicon.ico
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/favicon.ico
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/favicon.ico
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.eot b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.eot
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.eot
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.eot
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.svg b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.svg
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.svg
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.svg
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.ttf b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.ttf
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.ttf
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.ttf
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.woff b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.woff
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.woff
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.woff
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.eot b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.eot
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.eot
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.eot
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.svg b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.svg
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.svg
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.svg
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.ttf b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.ttf
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.ttf
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.ttf
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.woff b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.woff
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.woff
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.woff
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/Admin.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/Admin.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/Admin.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/Admin.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AlexaRichardson.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/AlexaRichardson.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AlexaRichardson.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/AlexaRichardson.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AmeliaEdwards.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/AmeliaEdwards.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AmeliaEdwards.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/AmeliaEdwards.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/MollieCobb.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/MollieCobb.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/MollieCobb.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/MollieCobb.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NemboLukni.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/NemboLukni.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NemboLukni.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/NemboLukni.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NoutGolstein.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/NoutGolstein.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NoutGolstein.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/NoutGolstein.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/PaulWalker.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/PaulWalker.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/PaulWalker.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/PaulWalker.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/YaraBarros.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/YaraBarros.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/YaraBarros.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/YaraBarros.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/default.png b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/default.png
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/images/default.png
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/images/default.png
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.css
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.css
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.scss b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.scss
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.scss
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.scss
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/calendar.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/calendar.css
similarity index 67%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/calendar.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/calendar.css
index cf3b2ec..d03c97c 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/calendar.css
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/calendar.css
@@ -1,12 +1,103 @@
-.planner-calendar {
+:root{
+    --primary:#0A5A57;
+    --primary-dark:#045451;
+    --primary-light:#149297;
+    --primary-hover:#1AA5A8;
+
+    --success:#34C759;
+    --warning:#FFB020;
+    --danger:#FF5A5F;
+
+    --bg:#F5F7FA;
+    --card:#FFFFFF;
+    --text:#202939;
+    --muted:#7B8794;
+
+    --radius:24px;
+}
+.planner-calendar {
     font-size: 14px;
     margin: 30px 50px;
-    color: #9aa5bb;
+    color: #475569;
     letter-spacing: 0.05px;
 }
 
+.schedule-page-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.schedule-page-title {
+    color: #333;
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.schedule-page-subtitle {
+    color: #687385;
+    margin: 5px 0 0;
+}
+
+.schedule-summary {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-bottom: 20px;
+}
+
+.schedule-summary-card {
+    border-left: 3px solid #5851e1;
+}
+
+.schedule-summary-card .e-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 12px 16px;
+}
+
+.schedule-summary-label {
+    color: #687385;
+    font-size: 12px;
+}
+
+.schedule-summary-value {
+    color: #333;
+    font-size: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.waiting-list-heading {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+}
+
+.waiting-list-count {
+    background: #5851e1;
+    border-radius: 12px;
+    color: #fff;
+    font-size: 11px;
+    min-width: 24px;
+    padding: 3px 7px;
+    text-align: center;
+}
+
+.waiting-list-empty {
+    border: 1px dashed #cbd3df;
+    color: #687385;
+    margin: 5px 2px;
+    padding: 16px 12px;
+    text-align: center;
+}
+
     .planner-calendar .e-all-day-appointment-wrapper, .planner-calendar .e-timeline-wrapper {
-        font-size: 0;
+        font-size: inherit;
     }
 
     .planner-calendar .drag-sample-wrapper {
@@ -115,6 +206,11 @@
                 padding: 0 !important;
             }
 
+                .planner-calendar .drag-sample-wrapper .treeview-container .waiting-list-search {
+                    margin: 0 5px 10px;
+                    width: 220px;
+                }
+
                 .planner-calendar .drag-sample-wrapper .treeview-container .e-list-parent {
                     height: 100%;
                     padding: 0 2px;
@@ -340,7 +436,7 @@
     }
 
         .add-doctor .e-icon-add::before {
-            content: '\e805';
+            content: '\e95c';
         }
 
     .add-doctor .add-doctor-text {
@@ -393,6 +489,20 @@
         margin: 20px 10px;
     }
 
+        .schedule-page-header {
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .schedule-summary {
+            grid-template-columns: 1fr;
+        }
+
+        .schedule-reset-button {
+            width: 100%;
+        }
+
         .planner-calendar .drag-sample-wrapper {
             display: block;
         }
@@ -636,4 +746,639 @@
 
 .e-schedule .e-schedule-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
     padding: 8px 4px;
+}
+.appointment-layout {
+    display: grid;
+    grid-template-columns: 2fr 380px;
+    gap: 24px;
+}
+.e-list-item .e-list-text{
+    border-radius:16px;
+    background:white;
+    transition:.2s ease;
+}
+
+.e-list-item:hover{
+    transform:translateY(-2px);
+}
+.medicore-theme {
+    background: #f6f7fb;
+}
+
+.appointment-header {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom:24px;
+}
+
+.page-title {
+    font-size:32px;
+    font-weight:700;
+    margin:0;
+    color:#1b1d33;
+}
+
+.page-subtitle {
+    color:#8488a4;
+    margin-top:4px;
+}
+
+.appointment-metrics {
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:20px;
+    margin-bottom:24px;
+}
+
+.metric-card {
+    background:white;
+    padding:24px;
+    border-radius:24px;
+    box-shadow:0 12px 30px rgba(0,0,0,.05);
+}
+
+.metric-label {
+    color:#8a8fac;
+    font-size:13px;
+}
+
+.metric-card h2 {
+    margin-top:12px;
+    color:#252842;
+}
+
+.appointment-layout {
+    display:grid;
+    grid-template-columns:minmax(0,1fr) 360px;
+    gap:24px;
+}
+
+.panel-card {
+    background:white;
+    border-radius:24px;
+    padding:20px;
+    box-shadow:0 12px 30px rgba(0,0,0,.05);
+}
+
+.panel-header {
+    font-size:16px;
+    font-weight:600;
+    margin-bottom:16px;
+}
+
+.appointment-sidebar {
+    display:flex;
+    flex-direction:column;
+    gap:20px;
+}
+
+.status-item {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    padding:12px 0;
+}
+
+.dot {
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    display:inline-block;
+    margin-right:10px;
+}
+
+.green {
+    background:#3BC97A;
+}
+
+.orange {
+    background:#FFB84D;
+}
+
+.purple {
+    background:#6D5DFC;
+}
+
+.new-appointment-btn {
+    background:#6D5DFC !important;
+    border:none !important;
+    color:white !important;
+    border-radius:14px !important;
+}
+
+.waiting-list-section {
+    margin-top:24px;
+    background:white;
+    border-radius:24px;
+    padding:24px;
+    box-shadow:0 12px 30px rgba(0,0,0,.05);
+}
+
+.waiting-list-header {
+    display:flex;
+    align-items:center;
+    gap:10px;
+    margin-bottom:16px;
+}
+
+.waiting-badge {
+    background:#6D5DFC;
+    color:white;
+    padding:4px 10px;
+    border-radius:20px;
+}
+
+.waiting-list-wrapper {
+    margin-top:20px;
+}
+
+.modern-patient-card {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    background:#fff;
+    border:1px solid #edf0f7;
+    border-radius:16px;
+    padding:14px;
+}
+
+.patient-name {
+    font-weight:600;
+    color:#20243a;
+}
+
+.patient-time {
+    color:#8d92ac;
+    font-size:12px;
+}
+
+.doctor-appointment-planner .e-appointment {
+    border-radius:12px;
+}
+
+@media(max-width:1200px){
+
+    .appointment-layout{
+        grid-template-columns:1fr;
+    }
+
+    .appointment-metrics{
+        grid-template-columns:repeat(2,1fr);
+    }
+}
+
+@media(max-width:768px){
+
+    .appointment-metrics{
+        grid-template-columns:1fr;
+    }
+
+    .appointment-header{
+        flex-direction:column;
+        align-items:flex-start;
+        gap:15px;
+    }
+}
+.appointment-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom:24px;
+}
+
+.appointment-title{
+    margin:0;
+    font-size:30px;
+    font-weight:700;
+    color:var(--text);
+}
+
+.appointment-subtitle{
+    color:var(--muted);
+    margin-top:6px;
+}
+
+.header-actions{
+    display:flex;
+    gap:12px;
+}
+
+.primary-btn{
+    background:var(--primary-light)!important;
+    color:#fff!important;
+    border:none!important;
+    border-radius:12px!important;
+}
+
+.outline-btn{
+    background:white!important;
+    border-radius:12px!important;
+}
+#today-appointments-card, #current-doctor-card,
+#waiting-queue-card, #confirmed-card, #status-card {
+    background: #eefff7;
+}
+.trend{
+    display:flex;
+    align-items:center;
+    gap:4px;
+
+    font-size:13px;
+    font-weight:600;
+    margin-top:2px;
+}
+.dashboard-cards{
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:20px;
+    margin-bottom:24px;
+}
+.dashboard-card {
+    border-radius: 16px;
+    padding: 16px;
+    height: 140px;
+    display:flex;
+}
+
+.card-title {
+    display: block;
+    color: #7B8794;
+    font-size: 16px;
+    margin-bottom: 4px;
+    text-align: center;
+    font-weight: 600;
+}
+
+.card-body{
+    display:flex;
+    align-items:center;
+    gap:16px;
+    margin-top:12px;
+}
+.e-calendar{
+    max-width: 350px;
+}
+.dashboard-card .e-card-content{
+    width:100%;
+}
+.ai-card {
+    border-radius: 16px;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.ai-card .card-title {
+    display: block;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.recommendation-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 12px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    background: #fff7ed;
+    border-left: 4px solid #f97316;
+    color: #7c2d12;
+    font-size: 0.9rem;
+}
+
+.recommendation-item .e-icons {
+    color: #f97316;
+    font-size: 16px;
+    margin-top: 2px;
+}
+.utilization-card {
+    margin-top: 20px;
+}
+
+.utilization-card .card-title {
+    display: block;
+    margin-bottom: 16px;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.utilization-row {
+    margin-bottom: 14px;
+}
+
+.utilization-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 6px;
+}
+
+.utilization-name {
+    font-size: 14px;
+    color: #374151;
+}
+
+.utilization-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.utilization-bar {
+    height: 8px;
+    border-radius: 999px;
+    background: #e5e7eb;
+    overflow: hidden;
+}
+
+.utilization-fill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width .3s ease;
+}
+
+.utilization-fill.high {
+    background: #ef4444;
+}
+
+.utilization-fill.medium {
+    background: #f59e0b;
+}
+
+.utilization-fill.low {
+    background: #22c55e;
+}
+.icon-box {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+}
+
+.icon-box .e-icons {
+    font-size: 22px;
+}
+
+.card-info {
+    flex: 1;
+}
+
+.card-info h2{
+    margin:0;
+    line-height:1;
+    font-size:36px;
+    font-weight:700;
+    color:#111827;
+}
+.card-info{
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:flex-start;
+    gap:4px;
+}
+
+
+.appointment-icon{
+    background:#149297;
+}
+
+.doctor-icon{
+    background:#0A5A57;
+}
+
+.waiting-icon{
+    background:#FFB020;
+}
+
+.department-icon{
+    background:#34C759;
+}
+
+.card-details{
+    flex:1;
+}
+
+.card-details h2{
+    margin:0;
+    color:#202939;
+    font-size:24px;
+    font-weight:700;
+}
+.appointment-layout{
+    display:grid;
+    grid-template-columns:1fr 340px;
+    gap:20px;
+}
+
+.sidebar-section{
+    display:flex;
+    flex-direction:column;
+    gap:20px;
+}
+
+@media(max-width:1200px){
+
+    .appointment-layout{
+        grid-template-columns:1fr;
+    }
+
+    .dashboard-cards{
+        grid-template-columns:repeat(2,1fr);
+    }
+}
+
+@media(max-width:768px){
+
+    .dashboard-cards{
+        grid-template-columns:1fr;
+    }
+
+    .appointment-header{
+        flex-direction:column;
+        align-items:flex-start;
+    }
+}
+
+.sidebar-card{
+    background:#fff !important;
+    border:none !important;
+    border-radius:20px !important;
+    box-shadow:0 8px 24px rgba(0,0,0,.05);
+}
+
+.status-card{
+    padding:10px;
+}
+
+.status-row{
+    display:flex;
+    align-items:center;
+    justify-content:space-around;
+    padding:12px 0;
+    border-bottom:1px solid #edf2f7;
+}
+
+.status-row:last-child{
+    border-bottom:none;
+}
+
+.status-label{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    color:#485465;
+    font-size:14px;
+}
+
+.status-dot{
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    display:inline-block;
+}
+
+.status-dot.confirmed{
+    background:#2ecc71;
+}
+
+.status-dot.pending{
+    background:#f5a623;
+}
+
+.status-dot.cancelled{
+    background:#e74c3c;
+}
+
+.status-row strong{
+    color:#202939;
+    font-size:14px;
+    font-weight:600;
+}
+.status-card .e-card-header{
+    font-weight:700;
+    color:var(--primary-dark);
+}
+
+.status-card .e-card-content{
+    padding-top:0 !important;
+}
+.e-schedule .e-agenda-view .e-empty-event {
+    font-size: 0;
+    text-align: center;
+    padding: 40px;
+}
+
+.e-schedule .e-agenda-view .e-empty-event::before {
+    content: "📅 No appointments scheduled";
+    font-size: 18px;
+    color: #888;
+    font-weight: 600;
+}
+.planner-toolbar{
+    display:flex;
+    gap:12px;
+    margin-bottom:20px;
+}
+.modern-agenda-card{
+    display:flex;
+    align-items:center;
+    gap:16px;
+
+    padding:16px;
+    margin:8px 0;
+
+    background:white;
+    border-radius:16px;
+
+    box-shadow:0 2px 8px rgba(0,0,0,.06);
+
+    transition:.2s;
+}
+
+.modern-agenda-card:hover{
+    transform:translateY(-2px);
+}
+
+.agenda-time{
+    width:70px;
+    text-align:center;
+    font-weight:700;
+    color:#1F2937;
+}
+
+.agenda-time span{
+    display:block;
+    color:#6B7280;
+    font-size:12px;
+}
+
+.agenda-avatar{
+    width:48px;
+    height:48px;
+
+    border-radius:50%;
+
+    background:#149297;
+    color:white;
+
+    display:flex;
+    align-items:center;
+    justify-content:center;
+
+    font-weight:700;
+}
+
+.agenda-content{
+    flex:1;
+}
+
+.agenda-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+}
+
+.agenda-header h4{
+    margin:0;
+    color:#111827;
+}
+
+.agenda-subtitle{
+    color:#6B7280;
+    margin-top:4px;
+}
+
+.agenda-footer{
+    margin-top:6px;
+    font-size:13px;
+    color:#475467;
+}
+
+.status-pill{
+    padding:4px 10px;
+    border-radius:20px;
+
+    background:#ECFDF3;
+    color:#027A48;
+
+    font-size:12px;
+    font-weight:600;
+}
+.schedule-legend{
+    margin: 40px;
+}
+
+.e-appointment.e-lib.e-draggable{
+    height: 45px !important;
+
 }
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/common.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/common.css
similarity index 86%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/common.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/common.css
index c779509..43adb68 100644
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/common.css
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/common.css
@@ -1,10 +1,10 @@
 .e-btn.e-primary {
-    background-color: #7575ff !important;
-    border-color: #4242ff !important;
+    background-color: #066b6b !important;
+    border-color: #066b6b !important;
 }
 
 .e-btn.e-primary:hover {
-    background-color: #4242ff !important;
+    background-color: #066b6b !important;
 }
 
 
@@ -75,14 +75,14 @@
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    border-color: #7575ff !important;
+    border-color: #066b6b !important;
 }
 
 .e-input-group:active:not(.e-warning):not(.e-error):not(.e-disabled),
 .e-input-group.e-control-wrapper:active:not(.e-warning):not(.e-error):not(.e-disabled) {
-    border-color: #7575ff !important;
+    border-color: #066b6b !important;
 }
 
 .e-dropdownbase .e-list-item.e-active {
-    background-color: #7575ff !important;
+    background-color: #066b6b !important;
 }
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appointment/dashboard.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/dashboard.css
new file mode 100644
index 0000000..539bc3b
--- /dev/null
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/dashboard.css
@@ -0,0 +1,2700 @@
+
+:root {
+    /* Brand */
+    --ap-brand-900: #0a4d4a;
+    --ap-brand-700: #0a8a8a;
+    --ap-brand-050: #e6f4f4;
+
+    /* Brand: accessible text fg on light surfaces (4.7:1 on white) */
+    --ap-brand-text: #066b6b;
+
+    /* Surfaces */
+    --ap-surface: #ffffff;
+    --ap-surface-alt: #f6f8fc;
+    --ap-border: #e2e8f0;
+    --ap-border-strong: #cbd5e1;
+
+    /* Text (all AA on white) */
+    --ap-text: #0f172a;
+    --ap-text-secondary: #334155;   /* 10.3:1 */
+    --ap-text-muted: #475569;       /* 7.4:1  - replaces failing #94a3b8 */
+    --ap-text-inverse: #ffffff;
+
+    /* Semantic */
+    --ap-danger: #b91c1c;
+    --ap-danger-bg: #fee2e2;
+    --ap-warning: #b45309;
+    --ap-warning-bg: #fef3c7;
+    --ap-success: #15803d;
+    --ap-success-bg: #dcfce7;
+    --ap-info: #1d4ed8;
+    --ap-info-bg: #dbeafe;
+
+    /* Spacing scale (4px base) */
+    --ap-s1: 4px;
+    --ap-s2: 8px;
+    --ap-s3: 12px;
+    --ap-s4: 16px;
+    --ap-s5: 20px;
+    --ap-s6: 24px;
+    --ap-s8: 32px;
+
+    /* Radii */
+    --ap-r-sm: 8px;
+    --ap-r-md: 12px;
+    --ap-r-lg: 16px;
+    --ap-r-pill: 999px;
+
+    /* Shadows */
+    --ap-shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .05);
+    --ap-shadow-2: 0 4px 16px rgba(15, 23, 42, .08);
+
+    /* Touch target */
+    --ap-touch: 44px;
+}
+
+#dashboard-modern {
+    padding: var(--ap-s6) var(--ap-s8) var(--ap-s8);
+    background: var(--ap-surface-alt);
+    font-family: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    min-height: 100%;
+    box-sizing: border-box;
+    font-size: 14px;              /* readable base */
+    color: var(--ap-text);
+    line-height: 1.5;
+    max-width: 100%;
+    overflow-x: hidden;
+}
+.dashboard-container { max-width: 100%; min-width: 0; }
+
+/* Skip to main content link (accessibility) */
+#dashboard-modern .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--ap-brand-900);
+    color: white;
+    padding: 8px 16px;
+    text-decoration: none;
+    border-radius: 0 0 4px 0;
+    font-weight: 600;
+    z-index: 9999;
+}
+#dashboard-modern .skip-link:focus {
+    top: 0;
+    outline: 3px solid var(--ap-brand-700);
+    outline-offset: 2px;
+}
+
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ap-s4);
+    margin-bottom: var(--ap-s5);
+    flex-wrap: wrap;
+}
+.page-eyebrow {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ap-text-muted);
+    margin-bottom: 2px;
+    text-transform: none;
+    letter-spacing: 0;
+}
+.page-title {
+    margin: 0;
+    /* font-size: 16px; */
+    /* font-weight: 400; */
+    letter-spacing: -0.3px;
+    color: var(--ap-text);
+    line-height: 1.2;
+}
+.page-title .wave {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 20px;
+    transform: translateY(-1px);
+}
+.page-meta {
+    display: block;
+    margin-top: 4px;
+    font-size: 12.5px;
+    color: var(--ap-text-muted);
+}
+.page-meta .page-meta-text {
+    margin: 0;
+    font-size: inherit;
+    color: inherit;
+}
+.page-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    flex-wrap: wrap;
+}
+
+/* Global search (functional, filters the queue) */
+.global-search-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 280px;
+    height: 42px;
+    border: 1px solid var(--ap-border);
+    border-radius: var(--ap-r-sm);
+    background: var(--ap-surface);
+    transition: border-color .15s, box-shadow .15s;
+}
+.global-search-wrap:focus-within {
+    border-color: var(--ap-brand-700);
+    box-shadow: 0 0 0 3px rgba(10, 138, 138, .14);
+}
+.global-search-wrap .search-icon {
+    position: absolute;
+    left: 12px;
+    color: var(--ap-text-muted);
+    font-size: 14px;
+    pointer-events: none;
+}
+.global-search-wrap input {
+    border: 0;
+    outline: none;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    padding: 0 12px 0 34px;
+    font-size: 13.5px;
+    color: var(--ap-text);
+    font-family: inherit;
+}
+.global-search-wrap input::placeholder { color: #64748b; }
+
+/* AI button */
+.ai-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 42px;
+    padding: 0 16px;
+    border: 0;
+    background: var(--ap-brand-900); /* WCAG AA: 8.9:1 with white text */
+    color: #fff;
+    font-size: 13.5px;
+    font-weight: 600;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    transition: filter .15s;
+    font-family: inherit;
+}
+.ai-button:hover { filter: brightness(0.92); }
+.ai-button .e-icons { font-size: 15px; }
+
+/* Bell */
+.bell-btn {
+    position: relative;
+    width: 42px;
+    height: 42px;
+    border: 1px solid var(--ap-border);
+    border-radius: 50%;
+    background: var(--ap-surface);
+    color: var(--ap-text-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background .15s;
+    font-size: 15px;
+}
+.bell-btn:hover { background: #f1f5f9; }
+.bell-btn .badge-dot {
+    position: absolute;
+    top: 8px;
+    right: 9px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--ap-danger);
+    border: 2px solid #fff;
+}
+
+.critical-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    background: linear-gradient(90deg, #fef2f2, #fff5f5);
+    border: 1px solid #fecaca;
+    border-left: 4px solid var(--ap-danger);
+    border-radius: var(--ap-r-md);
+    padding: var(--ap-s3) var(--ap-s4);
+    margin-bottom: var(--ap-s4);
+}
+.critical-banner .banner-icon { color: var(--ap-danger); font-size: 18px; }
+.critical-banner .banner-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+.critical-banner .banner-text strong {
+    color: var(--ap-danger);
+    font-size: 14px;
+}
+.critical-banner .banner-meta {
+    color: var(--ap-text-muted);
+    font-size: 12px;
+}
+.critical-banner .banner-cta {
+    border: 0;
+    background: var(--ap-danger);
+    color: #fff;
+    font-weight: 600;
+    font-size: 13px;
+    padding: 10px 16px;
+    min-height: 40px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: filter .15s;
+}
+.critical-banner .banner-cta:hover { filter: brightness(0.92); }
+
+.cta-strip {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    margin-bottom: var(--ap-s4);
+    flex-wrap: wrap;
+}
+.cta-strip .cta-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: var(--ap-touch);
+    padding: 0 var(--ap-s5);
+    border: 0;
+    background: var(--ap-brand-900); /* WCAG AA: 8.9:1 with white text */
+    color: #fff;
+    font-size: 13.5px;
+    font-weight: 600;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    box-shadow: var(--ap-shadow-1);
+    transition: filter .15s;
+    font-family: inherit;
+}
+.cta-strip .cta-primary:hover { filter: brightness(0.92); }
+.cta-strip .cta-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: var(--ap-touch);
+    padding: 0 var(--ap-s5);
+    background: var(--ap-surface);
+    color: var(--ap-brand-900);
+    border: 1px solid var(--ap-border);
+    font-size: 13.5px;
+    font-weight: 600;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    transition: background .15s;
+    font-family: inherit;
+}
+.cta-strip .cta-secondary:hover { background: #f1f5f9; }
+.cta-strip .cta-live {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    font-size: 13px;
+    font-weight: 600;
+    color: #166534; /* WCAG AA: green-800 on --ap-surface-alt (5.0:1) */
+}
+
+/* Schedule-appointment calendar popup */
+.schedule-popup {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    z-index: 1100;
+    background: var(--ap-surface);
+    border: 1px solid var(--ap-border);
+    border-radius: var(--ap-r-md);
+    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
+    padding: var(--ap-s3);
+    width: 320px;
+    animation: popIn .15s ease-out;
+}
+.schedule-popup-head {
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--ap-text-muted);
+    margin-bottom: var(--ap-s2);
+    padding-left: 2px;
+}
+.schedule-popup .e-calendar {
+    border: 0 !important;
+    box-shadow: none !important;
+    width: 100%;
+}
+
+.dashboard-kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+.modern-kpi {
+    border-radius: var(--ap-r-lg);
+    border: 1px solid var(--ap-border) !important;
+    background: var(--ap-surface) !important;
+    box-shadow: var(--ap-shadow-1) !important;
+    transition: transform .2s ease, box-shadow .2s ease;
+}
+.modern-kpi:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--ap-shadow-2) !important;
+}
+.modern-kpi .e-card-content { padding: var(--ap-s5); }
+#active-patients-card  {background: #e6f4f4; border-color: #0a8a8a;}
+#waiting-patients-card  {background: #f7d5f7;  border-color: #d97706;}
+#doctors-available-card {background: #dbeafe; border-color: #3b82f6;}
+#completed-visits-card {background: #dcfce7; border-color: #22c55e;}
+#care-alert-card {background: #fef2f2; border-color: #b91c1c;}
+.kpi-patient{
+color: #087c4d !important
+}
+.kpi-waiting{
+color:#de82de !important; 
+}
+.kpi-available{
+    color:#366eb9 !important;
+}
+.kpi-completed{
+    color:#34bc63 !important;
+}
+
+.kpi-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ap-s2);
+    padding-left: 10px;
+}
+.kpi-title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .07em;
+    color: var(--ap-text-muted);
+    padding-left: 10px;
+}
+.kpi-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 25px;
+}
+.kpi-value {
+    font-size: 40px;
+    font-weight: 800;
+    color: var(--ap-text);
+    line-height: 1.05;
+    letter-spacing: -0.5px;
+    font-variant-numeric: tabular-nums;
+    margin: var(--ap-s1) 0;
+    padding-left: 10px;
+}
+.kpi-value .kpi-sub {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ap-text-muted);
+    margin-left: 2px;
+}
+.kpi-trend {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: var(--ap-s2);
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding-left: 10px;
+}
+.kpi-trend.positive { color: var(--ap-success); }
+.kpi-trend.negative { color: var(--ap-danger); }
+.kpi-trend.neutral  { color: var(--ap-text-muted); }
+.kpi-trend-meta { color: var(--ap-text-muted); font-weight: 500; }
+
+/* Progress meter */
+.kpi-meter {
+    height: 6px;
+    border-radius: var(--ap-r-pill);
+    background: #eef2f7;
+    overflow: hidden;
+}
+.kpi-meter span {
+    display: block;
+    height: 100%;
+    border-radius: var(--ap-r-pill);
+    background: var(--ap-brand-700);
+    transition: width .4s ease;
+}
+
+.dash-card {
+    background: var(--ap-surface) !important;
+    border: 1px solid var(--ap-border) !important;
+    border-radius: var(--ap-r-lg) !important;
+    box-shadow: var(--ap-shadow-1) !important;
+    padding: var(--ap-s5);
+    transition: transform .2s ease, box-shadow .2s ease;
+}
+.dash-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--ap-shadow-2) !important;
+}
+.dash-card .e-card-content { padding: 0; }
+.dash-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--ap-s3);
+    gap: var(--ap-s3);
+    flex-wrap: wrap;
+}
+.dash-card-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: 0;
+    letter-spacing: -0.2px;
+}
+.card-subtitle {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+}
+.dash-card-actions {
+    color: var(--ap-text-muted);
+    cursor: pointer;
+    font-size: 16px;
+    background: transparent;
+    border: 0;
+    padding: 6px 10px;
+    border-radius: var(--ap-r-sm);
+    min-width: 36px;
+    min-height: 36px;
+}
+.dash-card-actions:hover { background: #f1f5f9; color: var(--ap-text); }
+
+/* Rows */
+.insights-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+.dash-row-3col {
+    display: grid;
+    grid-template-columns: 1.1fr 1.1fr 0.9fr;
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+.dash-row-2col {
+    display: grid;
+    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+
+.dash-row-2col > *,
+.dash-row-3col > *,
+.dash-row-bottom > *,
+.dash-hero > *,
+.dash-hero-left > *,
+.insights-row > *,
+.dashboard-kpi-grid > * {
+    min-width: 0;
+}
+.dash-card .e-grid,
+.dash-card .e-grid .e-gridcontent,
+.dash-card .e-grid table {
+    max-width: 100%;
+}
+.dash-card .e-grid .e-content {
+    overflow-x: auto;  /* queue rows become horizontally scrollable, not the page */
+}
+
+.alert-chips {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    flex-wrap: wrap;
+}
+.alert-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    border: 1px solid transparent;
+    font-size: 13px;
+    font-weight: 600;
+    min-height: 40px;
+    padding: 8px var(--ap-s4);
+    border-radius: var(--ap-r-pill);
+    cursor: pointer;
+    transition: transform .12s, box-shadow .12s, filter .12s;
+}
+.alert-chip:hover { filter: brightness(0.96); }
+.alert-chip.selected {
+    box-shadow: 0 0 0 3px rgba(10, 138, 138, .35);
+    border-color: var(--ap-brand-700);
+}
+.alert-chip .chip-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    flex: 0 0 9px;
+}
+.alert-chip.critical { background: var(--ap-danger-bg);  color: var(--ap-danger);  }
+.alert-chip.critical .chip-dot { background: var(--ap-danger); }
+.alert-chip.warning  { background: var(--ap-warning-bg); color: var(--ap-warning); }
+.alert-chip.warning .chip-dot { background: var(--ap-warning); }
+.alert-chip.success  { background: var(--ap-success-bg); color: var(--ap-success); }
+.alert-chip.success .chip-dot { background: var(--ap-success); }
+.alert-chip.clear {
+    background: transparent;
+    border: 1px dashed var(--ap-border-strong);
+    color: var(--ap-text-muted);
+}
+
+.dash-tabs {
+    display: inline-flex;
+    background: #f1f5f9;
+    border-radius: var(--ap-r-sm);
+    padding: var(--ap-s1);
+    gap: 2px;
+}
+.dash-tab {
+    border: 0;
+    background: transparent;
+    color: var(--ap-text-muted);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 8px var(--ap-s4);
+    min-height: 36px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background .15s, color .15s;
+}
+.dash-tab:hover { background: #e2e8f0; color: var(--ap-text); }
+.dash-tab.active {
+    background: var(--ap-brand-700);
+    color: #fff;
+}
+
+.patients-grid {
+    margin: 0;
+    width: 100%;
+    overflow: visible;
+}
+.patients-empty {
+    padding: var(--ap-s4);
+    color: var(--ap-text-muted);
+    font-size: 13px;
+    text-align: center;
+    border: 1px dashed var(--ap-border-strong);
+    border-radius: var(--ap-r-md);
+    margin-bottom: var(--ap-s2);
+    background: #fafbfc;
+}
+.patients-empty strong { color: var(--ap-text-secondary); }
+.link-btn {
+    border: 0;
+    background: transparent;
+    color: var(--ap-brand-700);
+    font-weight: 600;
+    cursor: pointer;
+    text-decoration: underline;
+    font-size: 13px;
+    padding: 0;
+}
+.patients-grid .e-grid {
+    border: 0 !important;
+    background: transparent !important;
+    border-radius: var(--ap-r-md) !important;
+    font-family: inherit !important;
+    width: 100% !important;
+    overflow: visible !important;
+}
+.patients-grid .e-grid table {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    table-layout: auto;
+}
+.patients-grid .e-grid .e-headercell,
+.patients-grid .e-grid .e-rowcell {
+    background: var(--ap-surface) !important;
+    border-color: #f1f5f9 !important;
+    overflow: visible !important;
+}
+.patients-grid .e-grid .e-headercell {
+    color: var(--ap-text-muted) !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: .06em !important;
+    font-weight: 700 !important;
+    background: #fafbfc !important;
+    white-space: normal !important;
+}
+.patients-grid .e-grid .e-rowcell {
+    font-size: 13.5px !important;
+    color: var(--ap-text-secondary) !important;
+    padding: 12px !important;
+    line-height: 1.45 !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
+}
+.patients-grid .e-grid .e-row:hover .e-rowcell { background: #fafbfc !important; }
+.patients-grid .e-grid .e-row:focus .e-rowcell { outline: 2px solid var(--ap-brand-700); outline-offset: -2px; }
+.patients-grid .e-grid .e-row:focus .e-rowcell { outline: 0; }
+.patients-grid .e-grid .e-headercontent {
+    border-bottom: 1px solid #eef2f7 !important;
+}
+.patients-grid .e-grid .e-content {
+    overflow-x: auto !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+}
+
+.pname {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    font-weight: 600;
+    color: var(--ap-text);
+}
+.pavatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #64748b, #475569);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    flex: 0 0 32px;
+}
+
+/* Status chips (grid) - Enhanced with clear text labels */
+.chip-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12.5px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+.chip-status .chip-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Chip-based status spans (replacing SfChip component) */
+.critical-chip,
+.warning-chip,
+.waiting-chip,
+.priority-urgent-chip,
+.priority-high-chip,
+.priority-medium-chip,
+.priority-low-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12.5px;
+    font-weight: 600;
+    white-space: nowrap;
+    border: 1px solid;
+}
+
+/* Critical status - always includes text label */
+.critical-chip {
+    background: var(--ap-danger-bg) !important;
+    color: var(--ap-danger) !important;
+    border-color: var(--ap-danger) !important;
+}
+.critical-chip .chip-dot {
+    background: var(--ap-danger) !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Warning status - always includes text label */
+.warning-chip {
+    background: var(--ap-warning-bg) !important;
+    color: var(--ap-warning) !important;
+    border-color: var(--ap-warning) !important;
+}
+.warning-chip .chip-dot {
+    background: var(--ap-warning) !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Waiting status - always includes text label */
+.waiting-chip {
+    background: var(--ap-info-bg) !important;
+    color: var(--ap-info) !important;
+    border-color: var(--ap-info) !important;
+}
+.waiting-chip .chip-dot {
+    background: var(--ap-info) !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Status labels outside chips - for non-chip status displays */
+.status-done {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-success);
+    font-weight: 600;
+    font-size: 12.5px;
+}
+.status-done::before {
+    content: '✓';
+    font-weight: 700;
+    font-size: 14px;
+}
+
+.status-checkedin {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-info);
+    font-weight: 600;
+    font-size: 12.5px;
+}
+.status-checkedin::before {
+    content: '●';
+    font-size: 8px;
+}
+
+/* Priority chips */
+.priority-urgent-chip,
+.priority-high-chip,
+.priority-normal-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12.5px;
+    font-weight: 600;
+    white-space: nowrap;
+    border: 1px solid;
+}
+
+.priority-urgent-chip {
+    background: #fee2e2 !important;
+    color: #991b1b !important;
+    font-weight: 700 !important;
+    border-color: #dc2626 !important;
+}
+.priority-urgent-chip::before {
+    content: '🔴 ';
+}
+
+.priority-high-chip {
+    background: #ffedd5 !important;
+    color: #9a3412 !important;
+    font-weight: 600 !important;
+    border-color: #ea580c !important;
+}
+.priority-high-chip::before {
+    content: '🟠 ';
+}
+
+.priority-normal-chip {
+    background: var(--ap-success-bg) !important;
+    color: #166534 !important;
+    border-color: #16a34a !important;
+}
+.priority-normal-chip::before {
+    content: '🟢 ';
+}
+
+/* Inline row actions */
+.row-action-btn {
+    border: 1px solid var(--ap-brand-700);
+    background: var(--ap-brand-700);
+    color: #fff;
+    font-size: 12.5px;
+    font-weight: 600;
+    min-height: 34px;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    margin-right: 6px;
+    transition: filter .12s;
+}
+.row-action-btn:hover { filter: brightness(0.92); }
+.row-action-btn.ghost {
+    background: transparent;
+    color: var(--ap-brand-700);
+}
+
+.upcoming-card { padding-bottom: var(--ap-s4); }
+.upcoming-month {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: var(--ap-s1) 0 var(--ap-s3) 0;
+}
+.upcoming-month .nav-btn {
+    border: 0;
+    background: transparent;
+    color: var(--ap-text-muted);
+    width: 36px;
+    height: 36px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    font-size: 16px;
+    transition: background .15s;
+}
+.upcoming-month .nav-btn:hover { background: #f1f5f9; }
+.upcoming-month .month-label {
+    font-weight: 700;
+    color: var(--ap-text);
+    font-size: 13px;
+}
+.upcoming-week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin-bottom: var(--ap-s4);
+}
+.upcoming-week .day {
+    background: #f8fafc;
+    border-radius: var(--ap-r-sm);
+    text-align: center;
+    padding: var(--ap-s2) var(--ap-s1);
+    font-size: 11px;
+    color: var(--ap-text-muted);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background .15s;
+    font-weight: 500;
+    min-height: var(--ap-touch);
+}
+.upcoming-week .day:hover { background: var(--ap-brand-050); }
+.upcoming-week .day .dnum {
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin-top: 2px;
+}
+.upcoming-week .day.selected {
+    background: var(--ap-brand-700);
+    border-color: var(--ap-brand-900);
+    color: #fff;
+}
+.upcoming-week .day.selected .dnum { color: #fff; }
+
+.upcoming-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 360px;
+    overflow-y: auto;
+    padding: var(--ap-s1) 2px 0;
+}
+.upcoming-empty {
+    padding: var(--ap-s6) var(--ap-s1);
+    text-align: center;
+    color: var(--ap-text-muted);
+    font-size: 13px;
+    border: 1px dashed var(--ap-border);
+    border-radius: var(--ap-r-md);
+    background: #fafbfc;
+}
+.upcoming-listview {
+    border: 0 !important;
+    background: transparent !important;
+    display: block !important;
+}
+
+.dash-skeleton { padding: var(--ap-s6) var(--ap-s8); }
+.dash-skeleton .sk-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--ap-s5);
+}
+.dash-skeleton .sk-block {
+    height: 140px;
+    border-radius: var(--ap-r-lg);
+    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
+    background-size: 200% 100%;
+    animation: skShimmer 1.4s infinite;
+}
+@keyframes skShimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+#dashboard-modern :is(button, a, input, [tabindex]):focus-visible {
+    outline: 3px solid var(--ap-brand-700) !important;
+    outline-offset: 2px !important;
+    border-radius: 2px !important;
+}
+#dashboard-modern :is(button, a, input, [tabindex]):focus:not(:focus-visible) {
+    outline: none !important;
+}
+
+
+@media (prefers-contrast: more) {
+    :root {
+        --ap-text: #000000;
+        --ap-text-secondary: #000000;
+        --ap-text-muted: #333333;
+        --ap-brand-900: #004d4a;
+        --ap-brand-700: #007a7a;
+    }
+    #dashboard-modern :is(button, a, input, [tabindex]):focus-visible {
+        outline-width: 4px;
+    }
+}
+
+@media (forced-colors: active) {
+    #dashboard-modern,
+    .dashboard-kpi-grid,
+    .dash-card,
+    .alert-chip,
+    button {
+        border-color: CanvasText;
+        color: CanvasText;
+    }
+    .alert-chip.selected {
+        border-color: Highlight;
+    }
+    #dashboard-modern :is(button, a, input, [tabindex]):focus-visible {
+        outline: 3px solid Highlight;
+    }
+}
+
+
+@media (max-width: 1200px) {
+    .dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr); }
+    .dash-row-3col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+    .dash-row-3col > .dash-card:nth-child(3) { grid-column: span 2; }
+    .page-header { flex-direction: column; align-items: stretch; }
+    .page-header-actions { width: 100%; }
+}
+
+@media (max-width: 1000px) {
+    #dashboard-modern { padding: var(--ap-s5); }
+    .dash-row-2col { grid-template-columns: minmax(0, 1fr); }
+    .dash-row-3col { grid-template-columns: minmax(0, 1fr); }
+    .dash-row-3col > .dash-card:nth-child(3) { grid-column: auto; }
+    .global-search-wrap { width: 200px; }
+}
+
+@media (max-width: 768px) {
+    /* Tablet adjustments */
+    #dashboard-modern { padding: var(--ap-s4) var(--ap-s4); }
+    .dashboard-kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--ap-s4); }
+    .page-header { gap: var(--ap-s3); margin-bottom: var(--ap-s4); }
+    .page-title { font-size: 20px; }
+    .page-header-actions { gap: var(--ap-s2); }
+    .global-search-wrap { width: 150px; }
+
+    /* Improve touch targets on tablet */
+    button { min-height: var(--ap-touch); }
+    .cta-strip { gap: var(--ap-s2); }
+    .alert-chip { min-height: 44px; padding: 10px var(--ap-s4); }
+
+    /* Better table visibility on tablet */
+    .patients-grid .e-grid .e-rowcell { padding: 14px 10px !important; }
+    .upcoming-week { grid-template-columns: repeat(5, 1fr); }
+    .upcoming-item { min-height: 60px; padding: 12px 4px; }
+}
+
+@media (max-width: 640px) {
+    /* Mobile optimizations */
+    #dashboard-modern { padding: var(--ap-s3) var(--ap-s3); }
+    .dashboard-kpi-grid { grid-template-columns: 1fr; gap: var(--ap-s3); }
+    .dashboard-kpi-strip { grid-template-columns: 1fr 1fr; }
+    .dash-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
+    .global-search-wrap { width: 100%; order: 10; }
+    .cta-strip { flex-direction: column; align-items: stretch; gap: var(--ap-s2); }
+    .cta-strip .cta-live { margin-left: 0; justify-content: center; }
+    .cta-strip .cta-primary,
+    .cta-strip .cta-secondary { width: 100%; }
+
+    /* Page header responsive */
+    .page-header { flex-direction: column; gap: var(--ap-s2); }
+    .page-title { font-size: 20px; margin-bottom: var(--ap-s2); }
+    .page-header-actions { flex-direction: column; width: 100%; gap: var(--ap-s2); }
+    .global-search-wrap { width: 100%; }
+
+    /* KPI cards more readable */
+    .kpi-value { font-size: 32px; margin: 6px 0; }
+    .kpi-value .kpi-sub { font-size: 16px; }
+
+    /* Cards full width */
+    .dash-row-2col { grid-template-columns: 1fr; }
+    .dash-row-3col { grid-template-columns: 1fr; }
+    .dash-card { padding: var(--ap-s4); }
+
+    /* Table improvements for mobile */
+    .patients-grid .e-grid .e-headercell,
+    .patients-grid .e-grid .e-rowcell {
+        padding: 10px 8px !important;
+        font-size: 12px !important;
+    }
+    .patients-grid .e-grid { height: auto !important; }
+    .patients-grid .e-content {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Upcoming appointments mobile */
+    .upcoming-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
+    .upcoming-week .day {
+        padding: 6px 2px;
+        min-height: 48px;
+        font-size: 10px;
+    }
+    .upcoming-week .day .dnum { font-size: 12px; }
+    .upcoming-item {
+        gap: var(--ap-s2);
+        min-height: 56px;
+        padding: 10px 4px;
+        flex-wrap: wrap;
+    }
+    .upcoming-item .uinfo   { flex: 1 1 calc(100% - 50px); min-width: 0; }
+    .upcoming-item .appointment-actions {
+        flex: 1 1 100%;
+        flex-direction: row;
+        gap: 4px;
+        margin-top: 4px;
+    }
+    .appointment-actions .row-action-btn {
+        width: 100%;
+        margin-right: 0;
+        min-height: 40px;
+    }
+    .upcoming-item .ustatus {
+        display: none;
+    }
+}
+
+@media (min-width: 641px) and (max-width: 900px) {
+    .upcoming-item { flex-wrap: wrap; padding: 10px 6px; }
+    .upcoming-item .uinfo { flex: 1 1 0; min-width: 0; }
+    .upcoming-item .appointment-actions { width: 100%; margin-top: 6px; }
+    .appointment-actions .row-action-btn { flex: 1 1 0; }
+}
+
+    /* Alert banner mobile */
+    .critical-banner {
+        flex-wrap: wrap;
+        gap: var(--ap-s2);
+    }
+    .critical-banner .banner-text {
+        order: 1;
+        width: 100%;
+    }
+    .critical-banner .banner-cta {
+        order: 2;
+        width: 100%;
+        text-align: center;
+    }
+
+    /* Charts responsive */
+    .dash-card SfChart,
+    .dash-card .e-chart {
+        width: 100% !important;
+    }
+
+    /* Donut legend on mobile */
+    .donut-legend {
+        grid-template-columns: 1fr;
+        gap: var(--ap-s2) var(--ap-s3);
+    }
+
+@media (prefers-reduced-motion: reduce) {
+    .modern-kpi, .dash-card { transition: none; }
+    .modern-kpi:hover, .dash-card:hover { transform: none; }
+    .dash-skeleton .sk-block { animation: none; }
+    .pulse-dot { animation: none; }
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+.pulse-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: #10b981;
+    animation: pulse 2s infinite;
+    display: inline-block;
+}
+@keyframes pulse {
+    0%   { transform: scale(1);    opacity: 1; }
+    50%  { transform: scale(1.45); opacity: .7; }
+    100% { transform: scale(1);    opacity: 1; }
+}
+
+.upcoming-listview {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+.upcoming-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    padding: 14px 4px;
+    min-height: 68px;
+    border-bottom: 1px solid #f1f5f9;
+}
+.upcoming-item:last-child { border-bottom: 0; }
+.upcoming-item .uavatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #64748b, #475569);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 13px;
+    flex: 0 0 40px;
+}
+.upcoming-item .uinfo {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+.upcoming-item .uname {
+    font-weight: 600;
+    color: var(--ap-text);
+    font-size: 13px;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.upcoming-item .utime {
+    color: var(--ap-text-muted);
+    font-size: 12px;
+    line-height: 1.3;
+}
+.upcoming-item .ustatus {
+    font-size: 11px;
+    font-weight: 700;
+    padding: 4px 10px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+@media print {
+    #dashboard-modern {
+        padding: 0;
+        background: white;
+    }
+    .cta-strip,
+    .page-header-actions,
+    .nav-btn,
+    .dash-card-actions,
+    .row-action-btn,
+    .bell-btn,
+    .ai-button {
+        display: none;
+    }
+    .dash-card,
+    .modern-kpi {
+        page-break-inside: avoid;
+        box-shadow: none;
+        border: 1px solid #ddd;
+    }
+    .patients-grid .e-grid .e-row:hover .e-rowcell {
+        background: white !important;
+    }
+    .upcoming-item {
+        page-break-inside: avoid;
+    }
+}
+.upcoming-item .ustatus.online { color: var(--ap-success); background: var(--ap-success-bg); }
+.upcoming-item .ustatus.offline { color: var(--ap-text-secondary); background: #e2e8f0; }
+
+/* Checked-in / completed states */
+.status-checkedin {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-info);
+    background: var(--ap-info-bg);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+}
+.status-done {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-success);
+    background: var(--ap-success-bg);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+}
+.checkedin-tag {
+    color: var(--ap-success);
+    background: var(--ap-success-bg);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+}
+.upcoming-item .appointment-actions { flex: 0 0 auto; }
+.upcoming-item .u-status { flex: 0 0 auto; }
+
+.ai-panel {
+    position: fixed;
+    top: 76px;
+    right: 24px;
+    width: 380px;
+    max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    background: var(--ap-surface);
+    border: 1px solid var(--ap-border);
+    border-radius: var(--ap-r-lg);
+    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
+    z-index: 1200;
+    animation: aiSlideIn .2s ease-out;
+}
+@keyframes aiSlideIn {
+    from { opacity: 0; transform: translateY(-8px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.ai-panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    padding: var(--ap-s4) var(--ap-s5);
+    border-bottom: 1px solid var(--ap-border);
+    background: linear-gradient(135deg, var(--ap-brand-050), #f8fafc);
+    border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0;
+}
+.ai-panel-icon {
+    font-size: 20px;
+    color: var(--ap-brand-700);
+}
+.ai-panel-title {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+.ai-panel-title strong {
+    font-size: 14.5px;
+    color: var(--ap-text);
+}
+.ai-panel-title span {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+}
+.ai-panel-close {
+    border: 0;
+    background: transparent;
+    color: var(--ap-text-muted);
+    font-size: 15px;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+}
+.ai-panel-close:hover { background: #eef2f7; color: var(--ap-text); }
+
+.ai-panel-body {
+    padding: var(--ap-s4) var(--ap-s5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s3);
+}
+.ai-insight {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ap-s2);
+    font-size: 13px;
+    color: var(--ap-text-secondary);
+    line-height: 1.55;
+    padding: var(--ap-s2) var(--ap-s3);
+    background: #fafbfc;
+    border-radius: var(--ap-r-sm);
+    border: 1px solid #f1f5f9;
+}
+.ai-insight-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+    margin-top: 6px;
+}
+.ai-insight-dot.danger  { background: var(--ap-danger); }
+.ai-insight-dot.warning { background: var(--ap-warning); }
+.ai-insight-dot.success { background: var(--ap-success); }
+.ai-insight-dot.info    { background: var(--ap-info); }
+.ai-insight strong { color: var(--ap-text); }
+
+.ai-panel-footer {
+    padding: var(--ap-s3) var(--ap-s5) var(--ap-s4);
+    border-top: 1px solid var(--ap-border);
+}
+.ai-panel-footer > span {
+    font-size: 11.5px;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: 700;
+    color: var(--ap-text-muted);
+    display: block;
+    margin-bottom: var(--ap-s2);
+}
+.ai-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ap-s2);
+}
+.ai-suggestion-chip {
+    border: 1px solid var(--ap-border);
+    background: var(--ap-surface);
+    color: var(--ap-brand-900);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 8px 14px;
+    border-radius: var(--ap-r-pill);
+    cursor: pointer;
+    min-height: 36px;
+    transition: background .15s;
+    font-family: inherit;
+}
+.ai-suggestion-chip:hover { background: var(--ap-brand-050); }
+
+.call-toast {
+    position: fixed;
+    top: 76px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    background: #0f172a;
+    color: #fff;
+    font-size: 13.5px;
+    padding: 12px 20px;
+    border-radius: var(--ap-r-pill);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, .35);
+    z-index: 1300;
+    animation: aiSlideIn .2s ease-out;
+}
+.call-toast .e-icons { color: #4ade80; }
+.call-toast strong { color: #fff; }
+
+@media (max-width: 640px) {
+    .ai-panel { right: 12px; top: 64px; }
+    .upcoming-item .appointment-actions { flex-direction: column; gap: 4px; align-items: stretch; }
+    .upcoming-item { flex-wrap: wrap; }
+}
+
+.dashboard-grid-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--ap-s6);
+    margin-top: var(--ap-s6);
+}
+
+.dashboard-left-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s6);
+}
+
+.dashboard-right-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s6);
+}
+
+/* KPI Cards Row */
+.kpi-cards-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--ap-s4);
+    margin-bottom: var(--ap-s4);
+}
+
+/* Syncfusion Card - KPI */
+.kpi-cards-row .e-card {
+    background: white;
+    border-radius: var(--ap-r-md);
+    border: 1px solid var(--ap-border);
+    box-shadow: var(--ap-shadow-1);
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.kpi-cards-row .e-card:hover {
+    box-shadow: var(--ap-shadow-2);
+    border-color: var(--ap-brand-700);
+}
+
+.kpi-cards-row .e-card-content {
+    padding: var(--ap-s4) !important;
+}
+
+.kpi-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--ap-s3);
+}
+
+.kpi-card-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ap-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 0;
+}
+
+.kpi-card-icon {
+    font-size: 20px;
+    color: var(--ap-brand-700);
+}
+
+.kpi-card-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: var(--ap-s2) 0;
+}
+
+.kpi-card-sub {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+}
+
+.kpi-card-trend {
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: var(--ap-s2);
+    padding: 4px 8px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.kpi-card-trend.positive {
+    color: var(--ap-success);
+    background: var(--ap-success-bg);
+}
+
+.kpi-card-trend.negative {
+    color: var(--ap-danger);
+    background: var(--ap-danger-bg);
+}
+
+.kpi-card-trend.neutral {
+    color: var(--ap-text-muted);
+    background: #f1f5f9;
+}
+
+/* Chart Containers */
+.chart-card,
+.upcoming-section,
+.patients-section {
+    background: white;
+    border-radius: var(--ap-r-md);
+    box-shadow: var(--ap-shadow-1);
+    border: 1px solid var(--ap-border);
+}
+
+/* Syncfusion Card - Chart */
+.chart-card.e-card,
+.upcoming-section.e-card,
+.patients-section.e-card {
+    background: white;
+    border-radius: var(--ap-r-md);
+    border: 1px solid var(--ap-border);
+    box-shadow: var(--ap-shadow-1);
+    padding: 0;
+}
+
+.chart-card .e-card-content,
+.upcoming-section .e-card-content,
+.patients-section .e-card-content {
+    padding: var(--ap-s6) !important;
+}
+
+.chart-card-header,
+.upcoming-section-header,
+.patients-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ap-s4);
+    padding-bottom: var(--ap-s3);
+    border-bottom: 1px solid var(--ap-border);
+}
+
+.chart-card-title,
+.upcoming-section-title,
+.patients-section-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: 0;
+}
+
+.chart-card-menu {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    color: var(--ap-text-muted);
+    padding: 0;
+}
+
+.chart-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 280px;
+}
+
+.patients-filters {
+    display: flex;
+    gap: var(--ap-s3);
+}
+
+.filter-button {
+    padding: 6px 12px;
+    border: 1px solid var(--ap-border);
+    background: white;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ap-text-secondary);
+    transition: all 0.2s ease;
+}
+
+.filter-button:hover {
+    border-color: var(--ap-brand-700);
+    color: var(--ap-brand-700);
+}
+
+.filter-button.active {
+    background: var(--ap-brand-700);
+    color: white;
+    border-color: var(--ap-brand-700);
+}
+
+/* Upcoming Appointments Section */
+.upcoming-section {
+    background: white;
+    border-radius: var(--ap-r-md);
+    box-shadow: var(--ap-shadow-1);
+    border: 1px solid var(--ap-border);
+}
+
+.upcoming-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ap-s4);
+    padding-bottom: var(--ap-s3);
+    border-bottom: 1px solid var(--ap-border);
+}
+
+.upcoming-section-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: 0;
+}
+
+.upcoming-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s4);
+}
+
+.appointment-item {
+    padding: var(--ap-s4);
+    border: 1px solid var(--ap-border);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s4);
+    transition: all 0.2s ease;
+}
+
+.appointment-item:hover {
+    border-color: var(--ap-brand-700);
+    box-shadow: var(--ap-shadow-1);
+}
+
+.appointment-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #0a8a8a, #0d6d6d);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.appointment-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.appointment-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ap-text);
+    margin: 0 0 2px 0;
+}
+
+.appointment-time {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+    margin: 0;
+}
+
+.appointment-status {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+
+.appointment-status.online {
+    background: var(--ap-success-bg);
+    color: var(--ap-success);
+}
+
+.appointment-status.offline {
+    background: #f1f5f9;
+    color: var(--ap-text-muted);
+}
+
+.appointment-action {
+    padding: 6px 12px;
+    background: var(--ap-brand-700);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.appointment-action:hover {
+    background: var(--ap-brand-900);
+}
+
+/* Responsive: Tablet */
+@media (max-width: 1200px) {
+    .dashboard-grid-wrapper {
+        grid-template-columns: 1fr;
+        gap: var(--ap-s4);
+    }
+
+    .kpi-cards-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Responsive: Mobile */
+@media (max-width: 768px) {
+    .kpi-cards-row {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--ap-s3);
+    }
+
+    .chart-card {
+        padding: var(--ap-s4);
+    }
+
+    .chart-container {
+        min-height: 200px;
+    }
+
+    .patients-section,
+    .upcoming-section {
+        padding: var(--ap-s4);
+    }
+}
+
+@media (max-width: 640px) {
+    .dashboard-content {
+        padding: var(--ap-s4);
+    }
+
+    .kpi-cards-row {
+        grid-template-columns: 1fr;
+        gap: var(--ap-s3);
+    }
+
+    .kpi-card {
+        padding: var(--ap-s3);
+    }
+
+    .kpi-card-value {
+        font-size: 24px;
+    }
+
+    .chart-card,
+    .patients-section,
+    .upcoming-section {
+        padding: var(--ap-s4);
+        border-radius: var(--ap-r-sm);
+    }
+
+    .appointment-item {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .appointment-status,
+    .appointment-action {
+        align-self: flex-start;
+    }
+}
+
+#dashboard-modern {
+    padding: 24px 28px 32px 28px;
+}
+
+.page-header {
+    align-items: center;
+    margin-bottom: 22px;
+}
+.page-eyebrow {
+    color: #64748b;
+    font-size: 13px;
+    text-transform: none;
+    letter-spacing: 0;
+    font-weight: 500;
+    margin-bottom: 2px;
+}
+.page-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #0f172a;
+}
+.page-title .wave {
+    display: inline-block;
+    margin-left: 4px;
+    transform: translateY(1px);
+    font-size: 20px;
+}
+.page-header-actions {
+    gap: 12px;
+    flex-wrap: nowrap;
+}
+.global-search-wrap {
+    width: 240px;
+    height: 40px;
+    border: 1px solid #e2e8f0;
+    background: #ffffff;
+}
+.global-search-wrap input { font-size: 14px; padding-left: 36px; }
+.global-search-wrap .search-icon { font-size: 14px; }
+
+/* Month pill */
+.month-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 40px;
+    padding: 0 14px;
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    color: #0f172a;
+    font-size: 13.5px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background .15s, border-color .15s;
+    font-family: inherit;
+}
+.month-pill:hover { background: #f8fafc; border-color: #cbd5e1; }
+.month-pill .caret { font-size: 10px; color: #64748b; }
+.month-pill .e-icon-calendar { font-size: 14px; color: #64748b; }
+
+/* Calendar popup below the month pill */
+.dash-month-popup {
+    position: absolute;
+    top: 56px;
+    right: 0;
+    z-index: 1100;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
+    padding: 8px;
+    animation: popIn .15s ease-out;
+}
+.dash-month-popup .e-calendar { border: 0 !important; box-shadow: none !important; width: 100%; }
+@keyframes popIn { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+/* Icon-only buttons (bell, search button variant) */
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #e2e8f0;
+    background: #ffffff;
+    border-radius: 10px;
+    color: #475569;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background .15s, border-color .15s;
+}
+.icon-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
+.icon-btn .e-bell { font-size: 15px; }
+
+/* Avatar circle button */
+.avatar-btn {
+    width: 40px;
+    height: 40px;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.avatar-circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #0a8a8a 0%, #0a4d4a 100%);
+    letter-spacing: 0.5px;
+}
+
+/* ---- 20. KPI strip (4 colored metric tiles) ---- */
+.dashboard-kpi-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+    margin-bottom: 16px;
+}
+.metric-tile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 12px;
+    border-radius: 14px;
+    border: 1px solid transparent;
+    min-height: 78px;
+    position: relative;
+    overflow: hidden;
+}
+.metric-tile.metric-blue   { background: #e0f2fe; border-color: #bae6fd; }
+.metric-tile.metric-pink   { background: #fce7f3; border-color: #fbcfe8; }
+.metric-tile.metric-green  { background: #dcfce7; border-color: #bbf7d0; }
+.metric-tile.metric-orange { background: #ffedd5; border-color: #fed7aa; }
+
+.metric-tile .metric-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.7);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.metric-tile.metric-blue   .metric-icon { color: #0284c7; }
+.metric-tile.metric-pink   .metric-icon { color: #db2777; }
+.metric-tile.metric-green  .metric-icon { color: #16a34a; }
+.metric-tile.metric-orange .metric-icon { color: #ea580c; }
+.metric-tile .metric-icon .e-icons { font-size: 16px; }
+
+.metric-tile .metric-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.metric-tile .metric-label {
+    font-size: 12px;
+    color: #475569;
+    font-weight: 500;
+    margin-bottom: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.metric-tile .metric-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+}
+.metric-tile .metric-value {
+    font-size: 20px;
+    font-weight: 700;
+    color: #0f172a;
+    line-height: 1.05;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.3px;
+}
+.metric-tile .metric-plus {
+    font-size: 14px;
+    font-weight: 700;
+    color: #0f172a;
+    line-height: 1;
+    margin-left: 2px;
+}
+.metric-tile .metric-trend {
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.metric-tile .metric-trend.up   { color: #16a34a; }
+.metric-tile .metric-trend.down { color: #ef4444; }
+.metric-tile .metric-trend .trend-arrow {
+    font-size: 11px;
+    line-height: 1;
+}
+
+/* ---- 21. Hero section: 4 KPI cards + 2 charts on the left, Patient Overview on the right ---- */
+.dash-hero {
+    display: grid;
+    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
+    gap: 16px;
+    margin-bottom: 22px;
+    align-items: stretch;
+}
+.dash-hero-left {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+}
+.dash-hero-right {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    /* Drop the fixed 375px height here so on narrow viewports the right
+       column can shrink with the donut card instead of forcing vertical
+       blank space inside a now-shallower viewport. */
+    height: 375px !important;
+    min-height: 0;
+}
+.donut-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    /* total card height ≈ header (~48) + wrap (260) + legend (~80) + padding (~40)
+       ≈ 428px → keep min/max around that band so nothing clips. */
+    min-height: 375px;
+    max-height: 470px;
+    /* Clip the Syncfusion chart wrapper so it can never overflow the card.
+       The four corner labels already have safe room inside the wrap. */
+    overflow: hidden;
+    position: relative;
+}
+.donut-card .donut-wrap {
+    flex: 1;
+    min-height: 230px;
+    max-height: 260px;
+    /* Use the card's 18px padding so corner labels stay inside the card. */
+    padding: 22px 18px;
+    box-sizing: border-box;
+}
+
+/* Charts row (2 col) */
+.dash-row-2col {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 16px;
+}
+.dash-card {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
+    padding: 18px 18px;
+    transition: box-shadow .2s ease, transform .2s ease;
+}
+.dash-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
+}
+.dash-card-header {
+    margin-bottom: 12px;
+    align-items: center;
+}
+.donut-card .dash-card-header {
+    /* Give the title and the dominant-cohort badge a clear 2-slot layout. */
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+.donut-card .dash-card-title { flex-shrink: 0; }
+.donut-header-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.dash-card-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0f172a;
+    margin: 0;
+    letter-spacing: -0.1px;
+}
+.dash-card-actions {
+    color: #94a3b8;
+    cursor: pointer;
+    font-size: 18px;
+    background: transparent;
+    border: 0;
+    padding: 4px 8px;
+    border-radius: 6px;
+    line-height: 1;
+}
+.dash-card-actions:hover { background: #f1f5f9; color: #475569; }
+
+.donut-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 260px;
+    min-height: 250px;
+    max-height: 270px;
+    width: 100%;
+    overflow: visible;
+}
+.donut-wrap .e-accumulationchart,
+.donut-wrap > div:first-child {
+    position: relative;
+    margin: 0 auto;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+}
+
+.donut-wrap .e-accumulationchart,
+.donut-wrap .e-accumulationchart svg,
+.donut-wrap .e-accumulationchart canvas,
+.donut-wrap .e-accumulationchart > div {
+    max-width: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden;
+}
+
+.donut-card .e-accumulationchart svg,
+.donut-card .e-accumulationchart svg.e-svg-accumulationchart {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100%;
+    max-height: 100%;
+    aspect-ratio: 1 / 1;
+}
+.donut-center {
+    position: absolute;
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    padding: 10px 12px;
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(2px);
+    max-width: 70%;
+}
+.donut-center .donut-total {
+    font-size: 22px;
+    font-weight: 800;
+    color: #0f172a;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+.donut-center .donut-sub {
+    font-size: 9px;
+    color: #64748b;
+    margin-top: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+}
+.donut-center .donut-delta,
+.donut-header-meta .donut-delta {
+    display: inline-flex;
+    align-items: center;
+    font-size: 10.5px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #e6f4f4;
+    color: #066b6b;
+    line-height: 1.4;
+    white-space: nowrap;
+}
+.donut-delta.down {
+    background: #fee2e2 !important;
+    color: #b91c1c !important;
+}
+.donut-label {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    text-align: center;
+    line-height: 1.1;
+    min-width: 64px;
+    max-width: 90px;
+    transition: transform .15s ease;
+    background: rgba(255, 255, 255, 0.96);
+    padding: 7px 10px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+}
+.donut-label .donut-num {
+    display: block;
+    font-size: 16px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.2px;
+}
+.donut-label .donut-cat {
+    display: block;
+    font-size: 10.5px;
+    color: #475569;
+    margin-top: 2px;
+    font-weight: 700;
+}
+.donut-label .donut-pct {
+    display: block;
+    font-size: 9.5px;
+    color: #94a3b8;
+    margin-top: 1px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.donut-label-0 { top: -8px;        left: 50%;  transform: translateX(-50%); }   /* top: Child */
+.donut-label-1 { top: 50%;         right: 4px; transform: translateY(-50%); }   /* right: Teen */
+.donut-label-2 { bottom: -10px;    left: 50%;  transform: translateX(-50%); }   /* bottom: Adult */
+.donut-label-3 { top: 50%;         left: 4px;  transform: translateY(-50%); }   /* left: Older */
+@media (max-width: 1100px) {
+    .donut-label .donut-num { font-size: 14px; }
+    .donut-label .donut-cat { font-size: 9.5px;  }
+    .donut-label .donut-pct { font-size: 8.5px; }
+    .donut-label { padding: 4px 6px; }
+}
+
+@media (max-width: 900px) {
+    .donut-label { display: none; }
+    .donut-wrap  { padding: 12px 12px; }
+    .donut-card  { min-height: 280px; max-height: 360px; }
+}
+
+.donut-legend {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px dashed #e2e8f0;
+}
+.donut-legend-chip {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    background: #f8fafc;
+    border: 1px solid #eef2f7;
+    font-size: 11.5px;
+    color: #334155;
+    cursor: default;
+    transition: background .15s ease, border-color .15s ease;
+    /* Allow long age ranges to wrap instead of clipping/squeezing the chip */
+    min-width: 0;
+    overflow: hidden;
+}
+.donut-legend-chip:hover {
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+.donut-legend-swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    margin-top: 4px;
+    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
+}
+.donut-legend-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    line-height: 1.2;
+    min-width: 0;
+    flex: 1;
+}
+.donut-legend-cat {
+    font-weight: 700;
+    color: #0f172a;
+    font-size: 11.5px;
+}
+.donut-legend-meta {
+    color: #64748b;
+    font-size: 10px;
+    font-variant-numeric: tabular-nums;
+    white-space: normal;
+    word-break: break-word;
+}
+.donut-legend-meta strong {
+    color: #0a4d4a;
+    font-weight: 700;
+}
+@media (max-width: 1100px) {
+    .donut-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 520px) {
+    .donut-legend { grid-template-columns: 1fr; }
+}
+
+/* Age-range tooltip — pure CSS, no JS, shows on hover/focus of chip */
+.donut-legend-chip[data-tip]::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #0f172a;
+    color: #fff;
+    font-size: 10.5px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .15s ease;
+    z-index: 5;
+}
+.donut-legend-chip {
+    position: relative;
+}
+.donut-legend-chip:hover::after,
+.donut-legend-chip:focus-visible::after {
+    opacity: 1;
+}
+.donut-legend-chip:focus-visible {
+    outline: 2px solid #0a8a8a;
+    outline-offset: 1px;
+}
+
+/* ---- 22. Patients table + Upcoming card row ---- */
+.dash-row-bottom {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+}
+.dash-tabs {
+    background: #f1f5f9;
+    border-radius: 10px;
+    padding: 4px;
+    gap: 2px;
+}
+.dash-tab {
+    background: transparent;
+    color: #64748b;
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 14px;
+    min-height: 32px;
+    border-radius: 7px;
+    border: 0;
+    cursor: pointer;
+    transition: background .15s, color .15s;
+}
+.dash-tab:hover { color: #0f172a; }
+.dash-tab.active {
+    background: #0a8a8a;
+    color: #fff;
+}
+.dash-card.upcoming-card {
+    width: 360px !important;
+    height: 555px !important;
+}
+.dash-card-grid{
+     flex: 1 1 auto;
+     min-width: 0;
+}
+
+/* Patients grid table tweaks */
+.patients-grid .e-grid { border: 0 !important; }
+.patients-grid .e-grid table { width: 100% !important; min-width: 0 !important; }
+.patients-grid .e-grid .e-headercell,
+.patients-grid .e-grid .e-rowcell {
+    background: #fff !important;
+    border-color: #f1f5f9 !important;
+}
+.patients-grid .e-grid .e-headercell {
+    color: #94a3b8 !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: .04em !important;
+    font-weight: 700 !important;
+}
+.patients-grid .e-grid .e-rowcell {
+    color: #334155 !important;
+    font-size: 13.5px !important;
+    padding: 10px 12px !important;
+}
+.row-report {
+    background: transparent;
+    border: 0;
+    color: #ea580c;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    font-size: 16px;
+}
+.row-report:hover { background: #fff7ed; }
+.view-link {
+    color: #0a8a8a;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 13.5px;
+    margin-right: 10px;
+}
+.view-link:hover { text-decoration: underline; }
+.row-action-dots {
+    background: transparent;
+    border: 0;
+    color: #94a3b8;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    border-radius: 6px;
+    font-size: 18px;
+    line-height: 1;
+}
+.row-action-dots:hover { background: #f1f5f9; color: #475569; }
+
+/* Upcoming appointments card */
+.upcoming-card .dash-card-header { align-items: center; }
+.upcoming-month {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+}
+.upcoming-month .month-label {
+    font-weight: 600;
+    color: #0f172a;
+    font-size: 13px;
+    min-width: 80px;
+    text-align: center;
+}
+.upcoming-month .nav-btn {
+    border: 0;
+    background: transparent;
+    color: #94a3b8;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+}
+.upcoming-month .nav-btn:hover { background: #f1f5f9; color: #475569; }
+
+.upcoming-week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin: 4px 0 12px 0;
+}
+.upcoming-week .day {
+    background: #f8fafc;
+    border-radius: 8px;
+    text-align: center;
+    padding: 6px 4px;
+    font-size: 11px;
+    color: #64748b;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background .15s;
+    font-weight: 500;
+    min-height: 44px;
+}
+.upcoming-week .day:hover { background: #e0f2fe; }
+.upcoming-week .day .dnum {
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    color: #0f172a;
+    margin-top: 2px;
+}
+.upcoming-week .day.selected {
+    background: #0a8a8a;
+    color: #fff;
+}
+.upcoming-week .day.selected .dnum { color: #fff; }
+
+.upcoming-list {
+    max-height: 360px;
+    overflow-y: auto;
+    padding-right: 2px;
+}
+.upcoming-listview { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.upcoming-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 4px;
+    border-bottom: 1px solid #f1f5f9;
+    min-height: 56px;
+    /* Keep the row inside its card: stack avatar/info/actions when very narrow. */
+    flex-wrap: wrap;
+}
+.upcoming-item:last-child { border-bottom: 0; }
+.upcoming-item .uavatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #0a8a8a, #0a4d4a);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+.upcoming-item .uinfo { flex: 1; min-width: 0; }
+.upcoming-item .uname {
+    font-size: 13.5px;
+    font-weight: 600;
+    color: #0f172a;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.upcoming-item .utime {
+    font-size: 12px;
+    color: #64748b;
+    margin-top: 2px;
+}
+.upcoming-item .ustatus-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+.upcoming-item .ustatus {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 999px;
+    border: 1px solid;
+    white-space: nowrap;
+}
+.upcoming-item .ustatus.online {
+    color: #16a34a;
+    background: #dcfce7;
+    border-color: #bbf7d0;
+}
+.upcoming-item .ustatus.offline {
+    color: #475569;
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+.call-btn {
+    border: 1px solid #bbf7d0;
+    background: #ffffff;
+    color: #16a34a;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}
+.call-btn:hover { background: #dcfce7; }
+
+/* ---- 23. Responsive for new Helanthus layout ---- */
+@media (max-width: 1200px) {
+    .dash-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
+    /* Slightly shrink the right column fixed heights at 1200px to leave
+       space for the corner donut labels without pushing the page down. */
+    .donut-card  { min-height: 360px; }
+    .dash-hero-right { height: auto !important; }
+}
+@media (max-width: 1000px) {
+    .dashboard-kpi-strip { grid-template-columns: repeat(2, 1fr); }
+    .dash-hero { grid-template-columns: minmax(0, 1fr); }
+    .page-header { flex-direction: row; }
+    /* Stack the bottom row BEFORE the donut collapses so the upcoming
+       list has the full card width to lay out its week + items. */
+    .dash-row-bottom { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 900px) {
+    #dashboard-modern { padding: 20px; }
+    .dash-row-2col,
+    .dash-row-3col { grid-template-columns: minmax(0, 1fr); }
+    .global-search-wrap { width: 200px; }
+    /* Upcoming card: make week pills wrap to 4 columns + items flex. */
+    .upcoming-week { grid-template-columns: repeat(7, 1fr); }
+    .upcoming-item { gap: 8px; padding: 10px; }
+}
+@media (max-width: 700px) {
+    .dashboard-kpi-strip { grid-template-columns: 1fr 1fr; }
+    .page-header { gap: 12px; }
+    .global-search-wrap { width: 160px; }
+}
+@media (max-width: 560px) {
+    .dashboard-kpi-strip { grid-template-columns: 1fr; }
+    .page-header { flex-direction: column; align-items: stretch; }
+    .page-header-actions { flex-wrap: wrap; }
+    .global-search-wrap { width: 100%; }
+    .upcoming-week { grid-template-columns: repeat(5, 1fr); }
+    .metric-tile { padding: 14px; }
+}
+.patients-grid .e-rowcell,
+.patients-grid .e-headercell {
+    white-space: normal !important;
+    overflow-wrap: anywhere;
+}
+.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary,
+.e-calendar .e-btn.e-today.e-flat.e-primary:hover, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
+    color: #fff;
+}
+@media (max-width: 1200px)
+{
+    .dash-row-bottom {
+        flex-direction: column;
+    }
+
+    .upcoming-card {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+.dash-row-bottom {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+}
+
+.dash-card-grid {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.patients-grid {
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.upcoming-card {
+    flex: 0 0 350px;
+    min-width: 0;
+}
+
+.e-grid {
+    width: 100% !important;
+}
+
+.dash-row-bottom {
+    display: flex;
+    gap: 20px;
+}
+
+@media (max-width: 1200px) {
+    .dash-row-bottom {
+        flex-direction: column;
+    }
+
+    .dash-card.upcoming-card {
+        margin-top: 0;
+        transform: none;
+        width: 100%;
+        max-width: 100%;
+    }
+}
+@media (min-width: 1201px) {
+
+.dash-card.upcoming-card {
+margin-top: -110px;
+}
+}
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctor.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctor.css
similarity index 66%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctor.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctor.css
index 4695bee..41d0e2f 100644
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctor.css
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctor.css
@@ -19,7 +19,7 @@
             .doctors-wrapper header .add-doctor .e-icon-add {
                 padding: 9px 0 10px 20px;
                 font-size: 10px;
-                color: #7575ff;
+                color: #0a8a8a;
             }
 
                 .doctors-wrapper header .add-doctor .e-icon-add::before {
@@ -29,7 +29,7 @@
             .doctors-wrapper header .add-doctor .add-doctor-label {
                 font-weight: 600;
                 font-size: 13px;
-                color: #7575ff;
+                color: #0a8a8a;
                 letter-spacing: 0.39px;
                 padding: 5px;
             }
@@ -69,11 +69,11 @@
 
                 .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item:hover {
                     cursor: pointer;
-                    box-shadow: 0px 1px 4px 1px #7575ff;
+                    box-shadow: 0px 1px 4px 1px #0a8a8a;
                 }
 
                 .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item:focus, .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item:active {
-                    border-color: #7575ff;
+                    border-color: #0a8a8a;
                 }
 
                 .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item .specialist-image {
@@ -379,3 +379,463 @@
         display: none;
     }
 }
+.doctors-dashboard {
+    padding: 30px;
+    background: #f8fafc;
+    min-height: 100vh;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+}
+
+.page-header h2 {
+    margin: 0;
+    font-size: 36px;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.page-subtitle {
+    margin-top: 8px;
+    color: #64748b;
+    font-size: 15px;
+}
+
+.stats-section {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    margin-bottom: 30px;
+}
+
+.stat-card {
+    background: #fff;
+    border-radius: 18px;
+    padding: 24px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
+}
+
+.stat-value {
+    font-size: 36px;
+    font-weight: 700;
+    color: #2563eb;
+}
+
+.stat-value.available {
+    color: #16a34a;
+}
+
+.stat-label {
+    margin-top: 8px;
+    color: #64748b;
+    font-size: 15px;
+}
+
+.toolbar {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 30px;
+}
+
+.doctor-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: 24px;
+}
+
+/* Modern doctor card */
+
+.doctor-card {
+    background:white;
+    border-radius:20px;
+    padding:24px;
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    width:100%;
+    transform: translateY(10px);
+    box-shadow: 0 40px 40px #ecf1e9;
+}
+
+
+.doctor-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 20px 40px rgba(15, 23, 42, .12);
+}
+
+.doctor-card-header {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+}
+
+/* Avatar */
+
+.avatar-wrapper {
+    position: relative;
+    flex-shrink: 0;
+}
+
+.doctor-avatar {
+    width: 88px;
+    height: 88px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #f1f5f9;
+}
+
+.status-indicator {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+}
+
+.status-indicator.available {
+    background: #22c55e;
+}
+
+.status-indicator.busy {
+    background: #ef4444;
+}
+
+/* Info */
+
+.doctor-info {
+    flex: 1;
+}
+
+.doctor-info h4 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #0f172a;
+}
+
+.specialization-chip {
+    display: inline-block;
+    padding: 5px 12px;
+    margin-top: 8px;
+    border-radius: 30px;
+    background: #eff6ff;
+    color: #2563eb;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.doctor-info p {
+    margin-top: 10px;
+    color: #64748b;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* Stats Area */
+
+.doctor-meta > div {
+    background:#fafafa;
+    padding:12px;
+    border-radius:12px;
+}
+
+.label {
+    display: block;
+    color: #94a3b8;
+    font-size: 12px;
+    margin-bottom: 4px;
+}
+
+.value {
+    color: #0f172a;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+/* Footer */
+
+.doctor-footer {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.doctor-footer .e-btn {
+    border-radius: 10px;
+}
+
+/* Responsive */
+
+@media screen and (max-width:768px) {
+
+    .stats-section {
+        grid-template-columns: 1fr;
+    }
+
+    .toolbar {
+        flex-direction: column;
+    }
+}
+
+.availability-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 50px;
+    padding: 6px 12px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.availability-pill.available {
+    background: #ecfdf5;
+    color: #166534;
+}
+
+.availability-pill.busy {
+    background: #fef2f2;
+    color: #991b1b;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+}
+.doctor-header {
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    gap: 18px;
+    align-items: center;
+}
+
+.doctor-avatar {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.doctor-profile {
+
+    min-width:0;
+}
+
+.doctor-profile h3 {
+    margin: 0;
+    line-height:1.2;
+    font-size: 20px;
+}
+
+.education {
+    color:#64748b;
+    font-size:14px;
+    line-height:1.4;
+    overflow:hidden;
+}
+.doctor-operational-data {
+    display: grid;
+    grid-template-columns:1fr 1fr;
+    gap: 12px;
+}
+
+.metric {
+    background: #f8fafc;
+    padding: 12px;
+    border-radius: 12px;
+}
+
+.metric-label {
+    display: block;
+    font-size: 12px;
+    color: #64748b;
+}
+
+.metric-value {
+    font-weight: 600;
+    margin-top: 4px;
+}
+.workload-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+.workload-section {
+    background:#f8fafc;
+    padding:12px;
+    border-radius:12px;
+}
+
+
+.workload-bar {
+    height: 10px;
+    background: #e5e7eb;
+    border-radius: 100px;
+    overflow: hidden;
+}
+
+.workload-fill {
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        #22c55e,
+        #3b82f6
+    );
+}
+.doctor-actions {
+    display:flex;
+    gap:8px;
+    width:200px;
+}
+
+.doctor-actions .e-btn {
+    flex:1;
+    min-height:42px;
+}
+
+@media (max-width: 1024px) {
+
+    .doctor-grid {
+        grid-template-columns:
+            repeat(2, minmax(0,1fr));
+    }
+}
+
+@media (max-width: 768px) {
+
+    .doctor-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .doctor-header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .doctor-operational-data {
+        grid-template-columns: 1fr;
+    }
+
+    .doctor-meta {
+        grid-template-columns: 1fr 1fr;
+        display: grid;
+        gap: 16px;
+    }
+
+    .doctor-actions {
+        flex-direction: column;
+    }
+
+    .stats-section {
+        grid-template-columns: 1fr;
+    }
+
+    .toolbar {
+        flex-direction: column;
+    }
+}
+.doctor-name {
+   margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: normal;
+    overflow: visible;
+    /* text-overflow: unset; */
+    }
+.doctor-profile {
+    display:flex;
+    flex-direction:column;
+    gap:8px;
+}
+.availability-pill.away {
+    background:#fff7ed;
+    color:#c2410c;
+}
+
+.stats-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.metric-card {
+    border-radius: 18px;
+    border: none !important;
+    overflow: hidden;
+    transition: all .3s ease;
+    box-shadow: 0 4px 15px rgba(0,0,0,.08);
+    background: #fff;
+}
+
+.metric-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0,0,0,.15);
+}
+
+.metric-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px;
+}
+
+#department-card, #available-card, #doctor-card {
+ background: #dbf9eb;
+}
+
+.metric-title {
+    font-size: 16px;
+    color: #64748b;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+.metric-number {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.metric-icon {
+    font-size: 46px;
+    /* opacity: .15; */
+    font-weight: 500;
+    color: #139518;
+}
+
+/* Accent colors */
+
+.doctors-card {
+    border-left: 5px solid #2563eb !important;
+}
+
+.doctors-card .metric-number {
+    color: #2563eb;
+}
+
+.available-card {
+    border-left: 5px solid #16a34a !important;
+}
+
+.available-card .metric-number {
+    color: #16a34a;
+}
+
+.department-card {
+    border-left: 5px solid #9333ea !important;
+}
+
+.department-card .metric-number {
+    color: #9333ea;
+}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css
new file mode 100644
index 0000000..0ccf94b
--- /dev/null
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css
@@ -0,0 +1,345 @@
+:root{
+    --surface:#ffffff;
+    --bg:#f8fafc;
+    --border:#e2e8f0;
+    --text:#0f172a;
+    --muted:#64748b;
+    --shadow:0 10px 35px rgba(15,23,42,.08);
+}
+
+#doctor-page{
+    max-width:1400px;
+    margin:auto;
+    padding:32px;
+}
+
+/* HERO */
+
+#doctorHeroCard{
+    border-radius:24px;
+    background:var(--surface);
+    box-shadow:var(--shadow);
+    margin-bottom:24px;
+}
+
+#doctorHeroSection{
+    display:flex;
+    align-items:center;
+    gap:24px;
+    padding:24px;
+}
+
+#doctorAvatar{
+    width:110px;
+    height:110px;
+    border-radius:50%;
+    object-fit:cover;
+}
+
+#doctorInfo{
+    flex:1;
+}
+
+#doctorName{
+    margin:0;
+    font-size:42px;
+    color:var(--text);
+}
+
+#doctorDepartment{
+    margin-top:8px;
+    display:inline-block;
+    padding:6px 14px;
+    border-radius:999px;
+    background:#eef2ff;
+    color:#4f46e5;
+}
+
+#doctorEducation,
+#doctorDesignation{
+    color:var(--muted);
+    margin-top:6px;
+}
+
+#doctorStatus{
+    border-radius:999px;
+    padding:10px 18px;
+    background:#fef3c7;
+    color:#92400e;
+    font-weight:600;
+}
+
+/* KPI */
+
+#kpiSection{
+    display:grid;
+    grid-template-columns:repeat(3,1fr);
+    gap:20px;
+    margin-bottom:24px;
+}
+
+#experienceCard,
+#workingDaysCard,
+#contactCard{
+    border-radius:20px;
+    background:#fff;
+    box-shadow:var(--shadow);
+    transition:.25s;
+    padding-left: 25px;
+    height:100px;
+}
+
+#experienceCard:hover,
+#workingDaysCard:hover,
+#contactCard:hover{
+    transform:translateY(-4px);
+}
+
+#experienceValue,
+#workingDaysValue,
+#contactValue{
+    font-size:34px;
+    font-weight:700;
+    color:#2563eb;
+}
+
+#experienceLabel,
+#workingDaysLabel,
+#contactLabel{
+    color:var(--muted);
+}
+
+/* DETAILS */
+
+#detailsSection{
+    display:grid;
+    grid-template-columns:1fr 1fr;
+    gap:24px;
+    margin-bottom:24px;
+}
+
+#professionalCard,
+#contactInfoCard{
+    border-radius:20px;
+    background:#fff;
+    box-shadow:var(--shadow);
+    padding:50px;
+}
+
+.detail-row{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    min-height:56px;
+    border-bottom:1px solid var(--border);
+}
+
+.detail-row:last-child{
+    border-bottom:none;
+}
+
+.detail-row label{
+    color:var(--muted);
+}
+
+.detail-row span{
+    font-weight:600;
+}
+
+/* SCHEDULE */
+
+#scheduleCard{
+    border-radius:24px;
+    background:#fff;
+    box-shadow:var(--shadow);
+}
+
+#scheduleTitle{
+    margin-bottom:20px;
+}
+
+.schedule-row{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    min-height: 56px;
+    border: 1px solid var(--border);
+    width: 950px;
+}
+
+.day-column{
+    font-weight:500;
+}
+
+.time-column{
+    font-weight:600;
+}
+
+.time-column.TimeOff{
+    color:#ef4444;
+}
+
+.time-column.RemoveBreak{
+    color:#94a3b8;
+}
+
+/* ACCESSIBILITY */
+
+button:focus-visible,
+.e-btn:focus-visible,
+input:focus-visible,
+select:focus-visible{
+    outline:3px solid #2563eb;
+    outline-offset:2px;
+}
+
+.e-disabled{
+    opacity:.6;
+    cursor:not-allowed;
+}
+
+/* RESPONSIVE */
+
+@media (max-width:992px){
+
+    #kpiSection{
+        grid-template-columns:1fr 1fr;
+    }
+
+    #detailsSection{
+        grid-template-columns:1fr;
+    }
+}
+
+@media (max-width:768px){
+
+    #doctorHeroSection{
+        flex-direction:column;
+        text-align:center;
+    }
+
+    #kpiSection{
+        grid-template-columns:1fr;
+    }
+
+    .schedule-row{
+        flex-direction:column;
+        align-items:flex-start;
+        gap:6px;
+        padding:12px 0;
+    }
+
+    .detail-row{
+        flex-direction:column;
+        align-items:flex-start;
+        padding:12px 0;
+    }
+}
+#doctorHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+    padding-bottom: 20px;
+    margin-bottom: 32px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-top: 75px;
+}
+
+#headerLeft {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+#backButton {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 10px;
+    background: #ffffff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,.08);
+}
+
+#backButton:hover {
+    background: #f8fafc;
+}
+
+#headerTitleContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+#pageTitle {
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+    color: #0f172a;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+}
+
+#titleUnderline {
+    width: 64px;
+    height: 3px;
+    margin-top: 8px;
+    border-radius: 999px;
+    background: #14b8a6;
+}
+
+#headerActions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+#headerActions .delete-details {
+    min-width: 110px;
+    height: 40px;
+    background: #ef4444 !important;
+    color: white !important;
+    border-radius: 12px !important;
+}
+
+#headerActions .edit-details {
+    min-width: 110px;
+    height: 40px;
+    background: #0f766e !important;
+    color: white !important;
+    border-radius: 12px !important;
+}
+
+@media (max-width: 768px) {
+
+    #doctorHeader {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    #headerActions {
+        width: 100%;
+    }
+
+    #headerActions .delete-details,
+    #headerActions .edit-details {
+        flex: 1;
+    }
+
+    #pageTitle {
+        font-size: 22px;
+    }
+}
+
+/* REDUCED MOTION */
+
+@media (prefers-reduced-motion: reduce){
+
+    *{
+        animation:none !important;
+        transition:none !important;
+    }
+}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctoreditdialog.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctoreditdialog.css
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/doctoreditdialog.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/doctoreditdialog.css
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appointment/main.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/main.css
new file mode 100644
index 0000000..e390d29
--- /dev/null
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/main.css
@@ -0,0 +1,340 @@
+/* @import url('/open-iconic/font/css/open-iconic-bootstrap.min.css'); */
+
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.skip-link {
+    position: absolute;
+    top: -48px;
+    left: 8px;
+    z-index: 10000;
+    padding: 10px 18px;
+    background: #0f172a;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    border-radius: 0 0 8px 8px;
+    text-decoration: none;
+    transition: top .15s ease-in;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+.planner-wrapper :is(button, a, input, select, textarea, [tabindex]):focus-visible {
+    outline: 3px solid #0a8a8a !important;
+    outline-offset: 2px !important;
+}
+
+a, .btn-link {
+    color: #0366d6;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #1b6ec2;
+    border-color: #1861ac;
+}
+
+app {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.top-row {
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.main {
+    flex: 1;
+}
+
+.main .top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+}
+
+.main .top-row > a {
+    margin-left: 1.5rem;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.sidebar .top-row {
+    background-color: rgba(0,0,0,0.4);
+}
+
+.sidebar .navbar-brand {
+    font-size: 1.1rem;
+}
+
+.sidebar .oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-item:first-of-type {
+    padding-top: 1rem;
+}
+
+.nav-item:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.nav-item a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.nav-item a.active {
+    background-color: transparent;
+    color: white;
+}
+
+.nav-item a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.content {
+    padding-top: 1.1rem;
+}
+
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+.planner-header .sb-table-cell {
+    padding-right: 6px;
+    vertical-align: middle;
+}
+.planner-header .sb-github-btn {
+    width: 40px;
+    opacity: 100;
+    padding: 11px 8px;
+    border-radius: 0px;
+    border-width: 0px;
+    font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
+    font-weight: 500;
+    line-height: 18px;
+    border-color: transparent;
+    background: transparent;
+}
+
+.planner-header .github-image img {
+    filter: brightness(0) invert(100%);
+}
+
+@media (max-width: 767.98px) {
+    .main .top-row {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) {
+    app {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .main .top-row {
+        position: sticky;
+        top: 0;
+    }
+
+    .main > div {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+
+    .navbar-toggler {
+        display: none;
+    }
+
+    .sidebar .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+}
+.nav-item.e-list-item {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px;
+    border-radius: 3px;
+    border-bottom: 0px;
+    align-items: center;
+    color: #666;
+    cursor: pointer;
+}
+.nav-item.e-list-item:hover {
+
+    color: #666;
+}
+ul.nav.flex-column {
+    margin: 0 16px;
+    width: 210px;
+}
+
+.sideparent.menulist {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "-apple-system", BlinkMacSystemFont;
+    font-size: 12px;
+    font-weight: 400;
+}
+.footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(90.4deg, #154db9 0.03%, #081b3f 11.56%, #081b3f 85.56%, #154db9 99.97%);
+    border: 1px solid #D8DEE9;
+    z-index: 10000;
+    padding: 12px;
+}
+
+.footer-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+.footer-logo {
+    width: 38px;
+    height: 38px;
+}
+.footer-icon {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 0 0 auto;
+    width: 38px;
+    height: 38px;
+}
+
+.footer-content .title span {
+    font-weight: 400;
+    font-size: 16px;
+    color: #e1e3e7;
+}
+
+@media screen and (max-width: 1140px), screen and (max-device-width: 1140px) {
+    .footer-content .title {
+        display: flex;
+        flex-direction: column;
+        color: white;
+    }
+}
+
+@media screen and (max-width: 1140px), screen and (max-device-width: 1140px) {
+    .footer-content .title span, .footer-content .title span .main-title {
+        font-size: 12px;
+    }
+}
+
+.footer-content .buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.footer-content .e-trial-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: #FFF30F;
+    color: #0F172A;
+    border: transparent;
+    border-radius: 8px;
+    padding: 10px 16px;
+    font-weight: 700;
+    font-family: sans-serif;
+}
+
+.footer-content .e-demo-btn {
+    background-color: transparent;
+    border: transparent;
+    color: white;
+    border-radius: 6px;
+    padding: 10px 16px;
+    font-weight: 500;
+}
+
+.footer-content .e-trial-btn::before {
+    content: 'Start Free Trial';
+    font-family: sans-serif;
+}
+
+.footer-content .e-trial-btn::after {
+    content: '\e7f9';
+    font-family: 'e-icons';
+}
+
+.footer-content .e-demo-btn:hover {
+    background-color: #173D87;
+}
+
+@media screen and (max-device-width: 730px) {
+
+    .footer-content .buttons .e-demo-btn {
+        display: none;
+    }
+
+    .footer-content .buttons .e-trial-btn::before {
+        content: 'Free Trial';
+    }
+
+    .footer-content .buttons .e-trial-btn::after {
+        display:none;
+    }
+}
+
+@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
+    .footer-content .title span:last-child {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/mark.svg b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/mark.svg
similarity index 100%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/mark.svg
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/mark.svg
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/patients.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/patients.css
similarity index 73%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/patients.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/appointment/patients.css
index 1ad4098..544e3a8 100644
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/patients.css
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/patients.css
@@ -1,5 +1,7 @@
 .planner-patient-wrapper {
-    margin: 50px;
+    padding:24px;
+    background:#F8FAFC;
+    min-height:100vh;
 }
 
     .planner-patient-wrapper header {
@@ -18,7 +20,7 @@
             .planner-patient-wrapper header .add-patient .e-icon-add {
                 padding: 9px 0 10px 20px;
                 font-size: 10px;
-                color: #7575ff;
+                color: #0a8a8a;
             }
 
                 .planner-patient-wrapper header .add-patient .e-icon-add::before {
@@ -28,7 +30,7 @@
             .planner-patient-wrapper header .add-patient .add-patient-label {
                 font-weight: 600;
                 font-size: 13px;
-                color: #7575ff;
+                color: #0a8a8a;
                 letter-spacing: 0.39px;
                 padding: 5px;
             }
@@ -56,7 +58,7 @@
     }
 
         .planner-patient-wrapper .patients-detail-wrapper .patient-display .e-grid .e-gridcontent tr.e-row td.e-rowcell .patient-name {
-            color: #7575ff;
+            color: #0a8a8a;
             cursor: pointer;
         }
 
@@ -101,7 +103,7 @@
             }
 
                 .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row label {
-                    color: #7575ff !important;
+                    color: #0a8a8a !important;
                 }
 
                 .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row .history-content {
@@ -120,7 +122,7 @@
                     letter-spacing: 0.3px;
                     padding: 5px 10px;
                 }
-    
+
 @media (max-width: 850px) {
     .planner-patient-wrapper {
         margin: 20px 10px;
@@ -161,7 +163,7 @@
             .planner-patient-wrapper .patients-detail-wrapper .patient-display {
                 margin-top: 3.3%;
             }
-} 
+}
     .new-patient-dialog .e-dlg-content .field-container {
         padding-bottom: 16px;
     }
@@ -230,3 +232,150 @@
         display: none;
     }
 }
+#patientStatsContainer {
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:20px;
+    margin:25px;
+}
+
+#patientCard1,
+#patientCard2,
+#patientCard3,
+#patientCard4,#totalPatientsCard,
+#newPatientsCard,
+#followupPatientsCard,
+#criticalPatientsCard, #recoveryCard {
+    background: #dbf9eb;;
+    height:100px;
+    box-shadow:0 4px 20px rgb(0 0 0 / 6%);
+}
+.stat-title{
+    color:#64748B;
+    font-size:13px;
+}
+
+.stat-value{
+    font-size:32px;
+    font-weight:700;
+    color:#111827;
+    margin-top:10px;
+}
+
+.stat-growth{
+    margin-top:10px;
+    color:#8B5CF6;
+    font-weight:600;
+}
+
+.danger{
+    color:#EF4444;
+}
+#patientToolbar{
+
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+
+    background:white;
+
+    padding:20px;
+
+    border-radius:20px;
+
+    margin-bottom:20px;
+
+    box-shadow:0 4px 20px rgb(0 0 0 / 5%);
+}
+#filterSection{
+    display:flex;
+    gap:15px;
+}
+#searchSection{
+
+    width:300px;
+}#addPatientButton{
+
+    border-radius:14px;
+    height:40px;
+}#patientInfoWrapper{
+    display:flex;
+    align-items:center;
+    gap:12px;
+}#patientNameText{
+    font-weight:600;
+    color:#111827;
+}#patientCodeText{
+    font-size:12px;
+    color:#94A3B8;
+}#PatientsGrid{
+
+    border:none;
+
+    border-radius:20px;
+
+    overflow:hidden;
+
+    box-shadow:0 4px 24px rgb(0 0 0 / 5%);
+}#PatientsGrid .e-gridheader{
+    background:#FAFAFA;
+}#PatientsGrid .e-headercell{
+    color:#64748B;
+    font-weight:600;
+}#PatientsGrid .e-row:hover{
+    background:#F3F4F6;
+}.e-dialog{
+
+    border-radius:24px !important;
+}.e-dialog .e-dlg-header{
+
+    font-size:18px;
+    font-weight:700;
+}@media(max-width:768px){
+
+    #patientStatsContainer{
+        grid-template-columns:1fr;
+    }
+
+    #patientToolbar{
+        flex-direction:column;
+        gap:15px;
+    }
+
+    #searchSection{
+        width:100%;
+    }
+
+    #filterSection{
+        width:100%;
+        flex-direction:column;
+    }
+}
+.patient-title {
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding-top:10px;
+    color: #475569;
+    padding-left: 10px;
+}
+.patient-value {
+
+        font-size: 30px;
+    font-weight: 200;
+    color: #0f172a;
+   
+    margin: 4px 0;
+    padding-left: 10px;
+
+}
+.patient-subtitle{
+
+        font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding-left: 10px;
+}
\ No newline at end of file
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appointment/preference.css b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/preference.css
new file mode 100644
index 0000000..b527fcf
--- /dev/null
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/appointment/preference.css
@@ -0,0 +1,245 @@
+.preference-container {
+    margin: 28px 44px 40px;
+    max-width: 1120px;
+}
+
+    .preference-container > header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 24px;
+        margin-bottom: 24px;
+    }
+
+        .preference-container .preference-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+        }
+
+    .preference-container .preference-intro {
+        margin: 8px auto 0 16px;
+        color: #687386;
+        font-size: 13px;
+    }
+
+    .preference-container .preference-section {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 18px;
+        margin-top: 18px;
+        padding: 24px 28px;
+        border: 1px solid #e1e7ec;
+        border-left: 4px solid #35a67a;
+        background: linear-gradient(100deg, #f4fbf8, #f7f7ff);
+        box-shadow: 0 4px 14px rgba(47, 58, 85, 0.06);
+    }
+
+        .preference-container .preference-section .section-heading {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+            grid-column: 1 / -1;
+            margin-bottom: 4px;
+        }
+
+        .preference-container .preference-section .section-icon {
+            color:#35a67a;
+            font-size: 20px;
+            padding-top: 1px;
+        }
+
+        .preference-container .preference-section h2 {
+            margin: 0 0 5px;
+            color: #333;
+            font-size: 17px;
+            font-weight: 600;
+        }
+
+        .preference-container .preference-section .section-heading p {
+            margin: 0;
+            color: #7b8493;
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .preference-container .preference-section .control-container {
+            display: grid;
+            grid-template-columns: minmax(190px, 0.2fr) minmax(300px, 0fr);
+            align-items: center;
+            gap: 16px 32px;
+            padding-top: 0;
+        }
+
+            .preference-container .preference-section .control-container .label-text {
+                padding: 0;
+            }
+
+            .preference-container .preference-section .control-container .preference-drop-down {
+                width: 100% !important;
+            }
+
+    .preference-container .preference-validation {
+        grid-column: 1;
+        color: #c40000;
+        font-size: 12px;
+    }
+
+    .preference-container .active-preferences {
+        margin-top: 20px;
+        padding: 22px 28px;
+        border: 1px solid #dfe3f6;
+        border-left: 4px solid #35a67a;
+        background: linear-gradient(100deg, #f4fbf8, #f7f7ff);
+        color: #333;
+    }
+
+        .preference-container .active-preferences .active-heading {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+        }
+
+        .preference-container .active-preferences .active-heading > span {
+            color: #35a67a;
+            font-size: 18px;
+        }
+
+        .preference-container .active-preferences .active-heading div {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .preference-container .active-preferences .active-heading div span {
+            color: #687386;
+            font-size: 12px;
+        }
+
+        .preference-container .configuration-values {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 12px;
+            margin-top: 20px;
+        }
+
+            .preference-container .configuration-values div {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                padding-right: 12px;
+                border-right: 1px solid #dfe3e8;
+            }
+
+            .preference-container .configuration-values div:last-child {
+                border-right: 0;
+            }
+
+            .preference-container .configuration-values .summary-label {
+                color: #778091;
+                font-size: 11px;
+                text-transform: uppercase;
+            }
+
+            .preference-container .configuration-values strong {
+                color: #303846;
+                font-size: 14px;
+        }
+
+    .preference-container .module-title {
+        margin-left: 2.5px;
+    }
+
+    .preference-container .control-container {
+        padding-top: 16px;
+    }
+
+        .preference-container .control-container .label-text {
+            font-weight: 600;
+            font-size: 12px;
+            color: #666;
+            letter-spacing: 0.33px;
+            padding-bottom: 7px;
+        }
+
+        .preference-container .control-container:nth-child(2) {
+            padding-top: 34px;
+        }
+
+@media (max-width: 850px) {
+    .preference-container {
+        margin: 20px 13px;
+        max-width: none;
+    }
+
+        .preference-container > header {
+            flex-direction: column;
+            gap: 16px;
+        }
+
+            .preference-container .preference-actions {
+                justify-content: flex-start;
+            }
+
+        .preference-container .preference-section {
+            gap: 12px;
+            margin-top: 12px;
+            padding: 18px;
+        }
+
+            .preference-container .preference-section .control-container {
+                grid-template-columns: 1fr;
+                padding-top: 0;
+            }
+
+        .preference-container .preference-validation {
+            grid-column: 1;
+        }
+
+        .preference-container .configuration-values {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+            .preference-container .configuration-values div:nth-child(2) {
+                border-right: 1px solid #dfe3e8;
+            }
+
+            .preference-container .configuration-values div:nth-child(even) {
+                border-right: 0;
+            }
+
+        .preference-container .module-title {
+            padding-left: 12.5px !important;
+        }
+
+        .preference-container .control-container {
+            padding-top: 16px;
+        }
+
+            .preference-container .control-container .label-text {
+                padding-bottom: 7px;
+                margin-left: 11.5px;
+            }
+
+            .preference-container .control-container:nth-child(2) {
+                padding-top: 30px;
+            }
+}
+
+/*skeleton*/
+
+.planner-preference-skeleton {
+    margin: 50px;
+}
+
+.preference-container1 {
+    height: 20%;
+    width: 100%;
+    margin: 0% 0% 4% 0%;
+}
+
+.preference-container2 {
+    height: 80%;
+    width: 100%;
+}
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/main.css b/webapp/server/AppointmentPlanner/wwwroot/css/sidebar.css
similarity index 87%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/main.css
rename to webapp/server/AppointmentPlanner/wwwroot/css/sidebar.css
index ccd1565..6c89781 100644
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/main.css
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/sidebar.css
@@ -1,6 +1,6 @@
-#plannerSiderBar .info {
-    margin-top: 60px;
-    padding-bottom: 10px;
+#plannerSiderBar .info {
+    
+    padding-bottom: 15px;
 }
     #plannerSiderBar .info .image {
         border: 2px solid #fff;
@@ -15,6 +15,9 @@
     display: none;
 }
 
+.e-sidebar.e-left {
+    background: #0a4d4a !important;
+}
 
         #plannerSiderBar .info .image img {
             height: 80px;
@@ -29,7 +32,7 @@
     #plannerSiderBar .info .name {
         font-weight: bold;
         font-size: 16px;
-        color: #333;
+        color: #fff;
         letter-spacing: 0.48px;
         margin-bottom: 0;
     }
@@ -41,7 +44,7 @@
 
     #plannerSiderBar .info .user-type {
         font-size: 11px;
-        color: #808080;
+        color: #fff;
         letter-spacing: 0.33px;
         margin-top: 5px;
     }
@@ -59,8 +62,9 @@
     border-radius: 3px;
     display: flex;
     align-items: center;
-    color: #666;
+    color: #fff;
     cursor: pointer;
+
 }
 
     #plannerSiderBar .sidebar-item .text {
@@ -71,7 +75,7 @@
         text-align: left;
     }
     #plannerSiderBar .sidebar-item.active, #plannerSiderBar .sidebar-item.active:hover {
-        background-color: #7575ff;
+        background-color: #0a8a8a;
         color: #fff;
     }
 
@@ -81,9 +85,9 @@
   margin-top: 9px;
 }
 
-.planner-header .e-appbar.custom-appbar {
-    background: #7575ff !important;
-    height: 50px;
+.planner-header .e-appbar.custom-appbar  {
+    background: #0a4d4a !important;
+    height: 56px;
     display: flex;
 }
 
@@ -92,12 +96,12 @@
         display: inline-flex;
     }
 
-        .planner-header .name-cantainer .clinic-image {
+         .clinic-image {
             font-size: 50px;
             color: #fff;
         }
 
-    .planner-header .clinic-name, .planner-header .logout-name {
+     .clinic-name,  .logout-name {
         margin: auto 0;
         color: white;
         cursor: default;
@@ -108,9 +112,11 @@
         flex: auto;
         position: relative;
     }
-	.planner-header .clinic-name.appointment-title {
-        font-size: 16px;
-        font-weight: 400;
+	.clinic-name.appointment-title {
+        font-size: 18px;
+        font-weight: 700;
+        color:#fff;
+        padding-left: 10px; 
      }
 
         .planner-header div.side-bar-opener .open-icon {
@@ -135,18 +141,18 @@
             display: flex;
         }
 
-        .planner-header .logout-container .logout-icon-container {
+        .logout-container .logout-icon-container {
             opacity: 1;
             flex: auto;
             padding: 0 7px;
             align-self: center;
         }
 
-        .planner-header .logout-container .logout-name {
+        .logout-container .logout-name {
             display: none;
         }
 
-        .planner-header .logout-container .logout-image {
+         .logout-container .logout-image {
             color: #fff;
             font-size: 25px;
             cursor: pointer;
@@ -201,7 +207,7 @@ header .module-title .title {
 }
 
 header .module-title .underline {
-    background: #7575ff;
+    background: #0a8a8a;
     border-radius: 5px;
     width: 52px;
     height: 4px;
@@ -216,11 +222,17 @@ header .module-title .underline {
     top: auto;
 }
 
+/* Normal document flow — a fixed+overflow:scroll shell breaks the
+   Syncfusion grid's virtual-scroll measurement (content floats over the page) */
 .main-content {
-    height: calc(100vh - 20%);
+    /* width: 100%;
+    position: static !important;
+    overflow: visible !important;
+    height: auto !important; */
     width: 100%;
     position: fixed;
-    overflow: scroll;
+    overflow-y: scroll;
+    height: calc(100vh - 10%);
 }
 
 @media (max-width: 850px) {
@@ -244,7 +256,7 @@ header .module-title .underline {
         padding-right: 0px;
     }
 
-    
+
 
         .col-lg-3.col-md-3.col-sm-3.treeview-container-wrapper .title-container {
             margin-top: 20px;
@@ -326,20 +338,21 @@ header .module-title .underline {
         padding-left: 25.6px;
     }
 }
- 
-
-/*font family*/
 
-@font-face {
+ @font-face {
     font-family: 'icons';
-    src: url(assets/fonts/icomoon.ttf?gcjn6a) format('truetype'), url(assets/fonts/icomoon.woff?gcjn6a) format('woff'), url(assets/fonts/icomoon.svg?gcjn6a#sbicons) format('svg');
+    src:
+        url('/css/appointment/assets/fonts/icomoon.woff') format('woff'),
+        url('/css/appointment/assets/fonts/icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
-@font-face {
+ @font-face {
     font-family: 'sb-icons';
-    src: url(assets/fonts/icons.ttf?gcjn6a) format('truetype'), url(assets/fonts/icons.woff?gcjn6a) format('woff'), url(assets/fonts/icons.svg?gcjn6a#sbicons) format('svg');
+    src:
+        url('/css/appointment/assets/fonts/icons.woff') format('woff'),
+        url('/css/appointment/assets/fonts/icons.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
@@ -368,9 +381,18 @@ header .module-title .underline {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+    font-family: "icons" !important;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    display: inline-block;
+}
 [class^="sfimage-"], [class*=" sfimage-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
+
     font-family: 'sb-icons' !important;
     font-style: normal;
     font-size: 20px;
@@ -425,6 +447,11 @@ header .module-title .underline {
 .icon-reorder:before {
     content: "\e90b";
 }
+.item-image {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+}
 
 
 /*listview customization*/
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/site.css b/webapp/server/AppointmentPlanner/wwwroot/css/site.css
index b971e48..e390d29 100644
--- a/webapp/server/AppointmentPlanner/wwwroot/css/site.css
+++ b/webapp/server/AppointmentPlanner/wwwroot/css/site.css
@@ -1,9 +1,33 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
+/* @import url('/open-iconic/font/css/open-iconic-bootstrap.min.css'); */
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+.skip-link {
+    position: absolute;
+    top: -48px;
+    left: 8px;
+    z-index: 10000;
+    padding: 10px 18px;
+    background: #0f172a;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    border-radius: 0 0 8px 8px;
+    text-decoration: none;
+    transition: top .15s ease-in;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+.planner-wrapper :is(button, a, input, select, textarea, [tabindex]):focus-visible {
+    outline: 3px solid #0a8a8a !important;
+    outline-offset: 2px !important;
+}
+
 a, .btn-link {
     color: #0366d6;
 }
@@ -179,9 +203,8 @@ app {
     cursor: pointer;
 }
 .nav-item.e-list-item:hover {
-    background-color: #f5f5f5;
-    border-color: transparent;
-    color: rgba(51,51,51,.87);
+
+    color: #666;
 }
 ul.nav.flex-column {
     margin: 0 16px;
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/About/About.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/About/About.razor
index cc440a0..dd112dc 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/About/About.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/About/About.razor
@@ -3,91 +3,47 @@
 @if (isDataLoaded)
 {
 <div id="@aboutId" class="about-container">
-    <header>
+    <header class="about-header">
         <div class="module-title">
-            <div class='title'>ABOUT</div>
+            <h1 class='title'>About Appointment Planner</h1>
             <div class='underline'></div>
         </div>
+        <span class="showcase-count">@showcaseComponents.Count components</span>
     </header>
-    <p>
-        This Example Clinic demo application showcases several Syncfusion Blazor UI components together in a real-world application scenario. 
-        You can explore the <a href="https://github.com/syncfusion/blazor-showcase-appointment-planner" target="_blank">source code</a> of this application and use it as a
-        reference for integrating Syncfusion Blazor UI components in your applications.
-    </p>
-    <div class='list-heading'>List of Syncfusion Blazor UI components used in this sample</div>
-    <div class='about-component'>
-        <div class='control-item'>
-            <span class="sfimage-schedule e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/scheduler/getting-started" target="_blank">Schedule</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-grid e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/datagrid/getting-started" target="_blank">Grid</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-chart e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/chart/getting-started-wasm" target="_blank">Chart</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-treeview e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/treeview/getting-started" target="_blank">TreeView</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-listview e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/listview/getting-started" target="_blank">ListView</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-dropdownlist e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/dropdown-list/getting-started" target="_blank">DropDownList</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-datepicker e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/datepicker/getting-started" target="_blank">DatePicker</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-timepicker e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/timepicker/getting-started" target="_blank">TimePicker</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-dialog e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/dialog/getting-started" target="_blank">Dialog</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-sidebar e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/sidebar/getting-started" target="_blank">Sidebar</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-textboxes e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/textbox/getting-started" target="_blank">TextBox</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-button e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/button/getting-started" target="_blank">Button</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-toast e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/toast/getting-started" target="_blank">Toast</a>
-        </div>
-        <div class='control-item'>
-            <span class="sfimage-checkbox e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/check-box/getting-started" target="_blank">CheckBox</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-skeleton e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/skeleton/getting-started" target="_blank">Skeleton</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-appbar e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/appbar/getting-started" target="_blank">AppBar</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-predefineddialogs e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/dialog/predefined-dialogs" target="_blank">Predefined Dialogs</a>
-        </div>
-        <div class='control-item'>
-            <span class="sf-icon-message e-sb-icon control-icon"></span>
-            <a class='control-name' href="https://blazor.syncfusion.com/documentation/message/getting-started" target="_blank">Message</a>
+    <div class="about-hero">
+        <div class="hero-copy">
+            <span class="eyebrow">SYNCFUSION BLAZOR SHOWCASE</span>
+            <h2>Real clinic workflows, built with composable UI.</h2>
+            <p>This example clinic brings scheduling, patient management, doctor availability, and operational insights together in one working application.</p>
+            <div class="hero-actions">
+                <a class="e-btn e-primary" href="https://github.com/syncfusion/blazor-showcase-appointment-planner" target="_blank" rel="noopener">View source code</a>
+                <a class="e-btn e-outline" href="https://blazor.syncfusion.com/" target="_blank" rel="noopener">Explore Syncfusion Blazor</a>
+            </div>
         </div>
+
+    </div>
+    <div class="component-heading">
+        <div><h2>Components in this sample</h2><p>See how each control supports a real workflow.</p></div>
+    </div>
+    <div class="about-component-groups">
+        @foreach (var group in showcaseComponents.GroupBy(item => item.Category))
+        {
+            <section class="component-group">
+                <h3>@group.Key</h3>
+                <div class="component-grid">
+                    @foreach (var item in group)
+                    {
+                        <SfCard CssClass="showcase-component-card">
+                            <CardContent>
+                                <span class="@item.Icon e-sb-icon control-icon"></span>
+                                <div class="component-card-copy"><strong>@item.Name</strong><span>@item.Description</span></div>
+                                <a class="component-link" href="@item.Url" target="_blank" rel="noopener" aria-label="Open @item.Name documentation">Docs <span class="e-icons e-arrow-right"></span></a>
+                            </CardContent>
+                        </SfCard>
+                    }
+                </div>
+            </section>
+        }
     </div>
 </div>
 }
@@ -120,19 +76,37 @@ else
     private bool isDataLoaded;
     private string aboutId;
 
-    private async void LoadData()
+    private readonly List<ShowcaseComponent> showcaseComponents = new()
+    {
+        new("Scheduling", "Schedule", "sfimage-schedule", "Resource-based appointment planning.", "https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app"),
+        new("Data and analytics", "Grid", "sfimage-grid", "Searchable patient administration.", "https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app"),
+        new("Data and analytics", "Chart", "sfimage-chart", "Visual appointment trends.", "https://blazor.syncfusion.com/documentation/chart/getting-started"),
+        new("Forms and input", "DropDownList", "sfimage-dropdownlist", "Fast filtering and configuration.", "https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-server-app"),
+        new("Forms and input", "DatePicker", "sfimage-datepicker", "Date-aware appointment forms.", "https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-server-app"),
+        new("Forms and input", "TextBox", "sfimage-textboxes", "Validated patient and doctor fields.", "https://blazor.syncfusion.com/documentation/textbox/getting-started-with-server-app"),
+        new("Dialogs and feedback", "Dialog", "sfimage-dialog", "Focused add, edit, and review flows.", "https://blazor.syncfusion.com/documentation/dialog/getting-started-with-server-app"),
+        new("Dialogs and feedback", "Predefined Dialogs", "sf-icon-predefineddialogs", "Clear confirmation workflows.", "https://blazor.syncfusion.com/documentation/predefined-dialogs/getting-started-with-server-app"),
+        new("Dialogs and feedback", "Message", "sf-icon-message", "Inline status communication.", "https://blazor.syncfusion.com/documentation/message/getting-started-with-server-app"),
+        new("Navigation and layout", "Sidebar", "sfimage-sidebar", "Persistent application navigation.", "https://blazor.syncfusion.com/documentation/sidebar/getting-started"),
+       new("Navigation and layout", "Button", "sfimage-button", "Explicit workflow actions.", "https://blazor.syncfusion.com/documentation/button/getting-started-with-server-app"),
+        new("Loading", "Skeleton", "sf-icon-skeleton", "Comfortable loading transitions.", "https://blazor.syncfusion.com/documentation/skeleton/getting-started")
+    };
+
+    private async Task LoadData()
     {
         this.aboutId = "about";
         await Task.Delay(100);
         isDataLoaded = true;
-        StateHasChanged();
+        await InvokeAsync(StateHasChanged);
     }
 
-    protected override void OnAfterRender(bool firstRender)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            LoadData();
+            await LoadData();
         }
     }
+
+    private sealed record ShowcaseComponent(string Category, string Name, string Icon, string Description, string Url);
 }
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentModels.cs b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentModels.cs
index 107ca31..0523430 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentModels.cs
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentModels.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 
@@ -27,7 +27,67 @@ public class Hospital
         public string Location { get; set; }
 
         public Hospital() { }
+        private static readonly Random Rand = new();
 
+        private static DateTime GetRandom2026Date()
+        {
+            int month = Rand.Next(1, 13);
+
+            int day = Rand.Next(
+                1,
+                DateTime.DaysInMonth(2026, month) + 1);
+
+            int hour = Rand.Next(8, 18);
+
+            int[] minutes = { 0, 15, 30, 45 };
+
+            return new DateTime(
+                2026,
+                month,
+                day,
+                hour,
+                minutes[Rand.Next(minutes.Length)],
+                0);
+        }
+        private static void ApplyDynamicDates(List<Hospital> appointments)
+{
+    var startDate = DateTime.Today;
+
+    int currentIndex = 0;
+
+    for (int day = 0; day < 30; day++)
+    {
+        int dailyCount = Rand.Next(5, 11);
+
+        DateTime scheduleDate = startDate.AddDays(day);
+
+        for (int i = 0;
+             i < dailyCount && currentIndex < appointments.Count;
+             i++)
+        {
+            int hour = Rand.Next(8, 17);
+
+            int minute =
+                new[] { 0, 15, 30, 45 }[Rand.Next(4)];
+
+            appointments[currentIndex].StartTime =
+                new DateTime(
+                    scheduleDate.Year,
+                    scheduleDate.Month,
+                    scheduleDate.Day,
+                    hour,
+                    minute,
+                    0);
+
+            appointments[currentIndex].EndTime =
+                appointments[currentIndex]
+                .StartTime
+                .AddMinutes(30);
+
+            currentIndex++;
+        }
+    }
+}
         public Hospital(int Id, string Name, DateTime StartTime, DateTime EndTime, string Disease, string DepartmentName, int DepartmentId, int DoctorId, int PatientId, string Symptoms)
         {
             this.Id = Id;
@@ -46,40 +106,61 @@ public List<Hospital> GetHospitalData()
         {
             List<Hospital> data = new List<Hospital>
             {
-                new Hospital(1000, "Milka", new DateTime(2020, 2, 5, 10, 30, 0), new DateTime(2020, 2, 5, 11, 30, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 2, "Swelling or bruising over a bone, Pain in the injured area"),
-                new Hospital(1001, "Janet", new DateTime(2020, 2, 3, 11, 0, 0), new DateTime(2020, 2, 3, 12, 0, 0), "Biological Problems", "GENERAL", 1, 3, 4, "Physical aches or pain, Memory difficulties or personality changes"),
-                new Hospital(1002, "Mercy", new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 11, 0, 0), "Skin Problem", "DERMATOLOGY", 3, 4, 5, "outbreak of swollen, pale red bumps or plaques"),
-                new Hospital(1003, "Laura", new DateTime(2020, 2, 9, 10, 0, 0), new DateTime(2020, 2, 9, 11, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 1, "Urinating often, Extreme fatigue, Blurry vision"),
-                new Hospital(1004, "Richa", new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 11, 0, 0), "Skin care treatment", "DERMATOLOGIST", 3, 4, 2, "Scaly or rough skin, Peeling skin, open sores or lesions"),
-                new Hospital(1005, "Adams", new DateTime(2020, 2, 7, 13, 30, 0), new DateTime(2020, 2, 7, 14, 0, 0), "General Checkup", "GENERAL", 1, 1, 3, "Decreased energy, Chronic fatigue, Difficulty concentrating"),
-                new Hospital(1006, "Richa", new DateTime(2020, 2, 7, 16, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 6, "Swelling, warmth, or redness in the joint"),
-                new Hospital(1007, "Adams", new DateTime(2020, 2, 13, 11, 0, 0), new DateTime(2020, 2, 13, 11, 30, 0), "Chest Pain", "CARDIOLOGY", 6, 7, 2, "Shortness of breath, Swollen feet or ankles"),
-                new Hospital(1008, "Milka", new DateTime(2020, 2, 13, 9, 0, 0), new DateTime(2020, 2, 13, 10, 0, 0), "Skin Care Treatment", "DERMATOLOGIST", 3, 4, 2, "a rash, which might be painful or itchy"),
-                new Hospital(1009, "Adams", new DateTime(2020, 2, 10, 14, 0, 0), new DateTime(2020, 2, 10, 16, 0, 0), "Surgery Treatment", "GENERAL", 1, 1, 3, "Pain at Site, Swelling/Hardening"),
-                new Hospital(1010, "Adams", new DateTime(2020, 2, 11, 11, 0, 0), new DateTime(2020, 2, 11, 13, 0, 0), "Bone Problem", "ORTHOPEDICS", 4, 5, 3, "Recurring or constant joint pain or tenderness"),
-
-                new Hospital(1011, "Adams", new DateTime(2020, 2, 1, 11, 0, 0), new DateTime(2020, 2, 1, 12, 0, 0), "General Checkup", "GENERAL", 1, 3, 1, "a pulsating feeling in the head, sensitivity to sound and light"),
-                new Hospital(1012, "Janet", new DateTime(2020, 2, 1, 16, 0, 0), new DateTime(2020, 2, 1, 17, 0, 0), "Complete loss of sensation", "NEUROLOGY", 2, 2, 4, "Partial or complete paralysis, Muscle weakness"),
-                new Hospital(1013, "Laura", new DateTime(2020, 2, 5, 13, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), "Health Checkup", "GENERAL", 1, 1, 1, "Sweating, Chills and Shivering"),
-                new Hospital(1014, "Adams", new DateTime(2020, 2, 5, 16, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), "Eye and Spectacles Checkup", "GENERAL", 1, 3, 3, "Frequent squinting, Eye fatigue or strain"),
-                new Hospital(1015, "Milka", new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
-                new Hospital(1016, "Adams", new DateTime(2020, 2, 6, 18, 0, 0), new DateTime(2020, 2, 6, 18, 30, 0), "Kidney disease", "DIABETOLOGY", 5, 6, 3, "Decreased urine output"),
-                new Hospital(1017, "Janet", new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 14, 30, 0), "Gastroparesis", "DIABETOLOGY", 5, 6, 4, "A feeling of fullness after eating just a few bites"),
-                new Hospital(1018, "Laura", new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 13, 0, 0), "Sleep apnea", "DIABETOLOGY", 5, 6, 1, "Gasping for air during sleep"),
-                new Hospital(1019, "Milka", new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 11, 0, 0), "Vision problems", "DIABETOLOGY", 5, 6, 2, "Severe, sudden eye pain"),
-                new Hospital(1020, "Milka", new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
-
-                new Hospital(1021, "Adams", new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 11, 0, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 3, "Swelling or bruising over a bone, Pain in the injured area"),
-                new Hospital(1022, "Mercy", new DateTime(2020, 2, 2, 15, 0, 0), new DateTime(2020, 2, 2, 15, 30, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 5, "Deformity, such as a bent arm or wrist"),
-                new Hospital(1023, "Milka", new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 14, 30, 0), "Rapid heartbeat", "CARDIOLOGY", 6, 7, 2, "Fluttering sensation in the chest"),
-                new Hospital(1024, "Adams", new DateTime(2020, 2, 4, 17, 30, 0), new DateTime(2020, 2, 4, 18, 30, 0), "Lightheadedness", "CARDIOLOGY", 6, 7, 3, "Sudden drop in blood pressure"),
-                new Hospital(1025, "Janet", new DateTime(2020, 2, 4, 15, 0, 0), new DateTime(2020, 2, 4, 15, 30, 0), "Shortness of breath", "CARDIOLOGY", 6, 7, 4, "Nasal congestion, runny nose, itchy or watery eyes"),
-
-                new Hospital(1026, "Milka", new DateTime(2020, 2, 3, 17, 0, 0), new DateTime(2020, 2, 3, 18, 30, 0), "Chest pain or discomfort", "CARDIOLOGY", 6, 7, 2, "Fast heart beat, and trouble breathing"),
-                new Hospital(1027, "Milka", new DateTime(2020, 2, 6, 15, 30, 0), new DateTime(2020, 2, 6, 16, 0, 0), "Racing heartbeat", "CARDIOLOGY", 6, 7, 2, "A fluttering in your chest"),
-                new Hospital(1028, "Milka", new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 14, 30, 0), "Heart Problem", "CARDIOLOGY", 6, 7, 2, "Fluid buildup from being overweight"),
-                new Hospital(1029, "Milka", new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 19, 30, 0), "Dizziness", "DIABETOLOGY", 5, 6, 2, "Feeling of lightheadedness or nearly fainting")
+                new Hospital(1000, "Milka", new DateTime(2026, 2, 5, 10, 30, 0), new DateTime(2026, 2, 5, 11, 30, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 2, "Swelling or bruising over a bone, Pain in the injured area"),
+                new Hospital(1001, "Janet", new DateTime(2026, 2, 3, 11, 0, 0), new DateTime(2026, 2, 3, 12, 0, 0), "Biological Problems", "GENERAL", 1, 3, 4, "Physical aches or pain, Memory difficulties or personality changes"),
+                new Hospital(1002, "Mercy", new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 11, 0, 0), "Skin Problem", "DERMATOLOGY", 3, 4, 5, "outbreak of swollen, pale red bumps or plaques"),
+                new Hospital(1003, "Laura", new DateTime(2026, 2, 9, 10, 0, 0), new DateTime(2026, 2, 9, 11, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 1, "Urinating often, Extreme fatigue, Blurry vision"),
+                new Hospital(1004, "Richa", new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 11, 0, 0), "Skin care treatment", "DERMATOLOGIST", 3, 4, 2, "Scaly or rough skin, Peeling skin, open sores or lesions"),
+                new Hospital(1005, "Adams", new DateTime(2026, 2, 7, 13, 30, 0), new DateTime(2026, 2, 7, 14, 0, 0), "General Checkup", "GENERAL", 1, 1, 3, "Decreased energy, Chronic fatigue, Difficulty concentrating"),
+                new Hospital(1006, "Richa", new DateTime(2026, 2, 7, 16, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 6, "Swelling, warmth, or redness in the joint"),
+                new Hospital(1007, "Adams", new DateTime(2026, 2, 13, 11, 0, 0), new DateTime(2026, 2, 13, 11, 30, 0), "Chest Pain", "CARDIOLOGY", 6, 7, 2, "Shortness of breath, Swollen feet or ankles"),
+                new Hospital(1008, "Milka", new DateTime(2026, 2, 13, 9, 0, 0), new DateTime(2026, 2, 13, 10, 0, 0), "Skin Care Treatment", "DERMATOLOGIST", 3, 4, 2, "a rash, which might be painful or itchy"),
+                new Hospital(1009, "Adams", new DateTime(2026, 2, 10, 14, 0, 0), new DateTime(2026, 2, 10, 16, 0, 0), "Surgery Treatment", "GENERAL", 1, 1, 3, "Pain at Site, Swelling/Hardening"),
+                new Hospital(1010, "Adams", new DateTime(2026, 2, 11, 11, 0, 0), new DateTime(2026, 2, 11, 13, 0, 0), "Bone Problem", "ORTHOPEDICS", 4, 5, 3, "Recurring or constant joint pain or tenderness"),
+
+                new Hospital(1011, "Adams", new DateTime(2026, 2, 1, 11, 0, 0), new DateTime(2026, 2, 1, 12, 0, 0), "General Checkup", "GENERAL", 1, 3, 1, "a pulsating feeling in the head, sensitivity to sound and light"),
+                new Hospital(1012, "Janet", new DateTime(2026, 2, 1, 16, 0, 0), new DateTime(2026, 2, 1, 17, 0, 0), "Complete loss of sensation", "NEUROLOGY", 2, 2, 4, "Partial or complete paralysis, Muscle weakness"),
+                new Hospital(1013, "Laura", new DateTime(2026, 2, 5, 13, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), "Health Checkup", "GENERAL", 1, 1, 1, "Sweating, Chills and Shivering"),
+                new Hospital(1014, "Adams", new DateTime(2026, 2, 5, 16, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), "Eye and Spectacles Checkup", "GENERAL", 1, 3, 3, "Frequent squinting, Eye fatigue or strain"),
+                new Hospital(1015, "Milka", new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
+                new Hospital(1016, "Adams", new DateTime(2026, 2, 6, 18, 0, 0), new DateTime(2026, 2, 6, 18, 30, 0), "Kidney disease", "DIABETOLOGY", 5, 6, 3, "Decreased urine output"),
+                new Hospital(1017, "Janet", new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 14, 30, 0), "Gastroparesis", "DIABETOLOGY", 5, 6, 4, "A feeling of fullness after eating just a few bites"),
+                new Hospital(1018, "Laura", new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 13, 0, 0), "Sleep apnea", "DIABETOLOGY", 5, 6, 1, "Gasping for air during sleep"),
+                new Hospital(1019, "Milka", new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 11, 0, 0), "Vision problems", "DIABETOLOGY", 5, 6, 2, "Severe, sudden eye pain"),
+                new Hospital(1020, "Milka", new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 13, 0, 0), "Feeling very hungry - even though you are eating", "DIABETOLOGY", 5, 6, 2, "Urinating often, Extreme fatigue, Blurry vision"),
+
+                new Hospital(1021, "Adams", new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 11, 0, 0), "Bone Fracture", "ORTHOPEDICS", 4, 5, 3, "Swelling or bruising over a bone, Pain in the injured area"),
+                new Hospital(1022, "Mercy", new DateTime(2026, 2, 2, 15, 0, 0), new DateTime(2026, 2, 2, 15, 30, 0), "Left Arm Fracture", "ORTHOPEDICS", 4, 5, 5, "Deformity, such as a bent arm or wrist"),
+                new Hospital(1023, "Milka", new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 14, 30, 0), "Rapid heartbeat", "CARDIOLOGY", 6, 7, 2, "Fluttering sensation in the chest"),
+                new Hospital(1024, "Adams", new DateTime(2026, 2, 4, 17, 30, 0), new DateTime(2026, 2, 4, 18, 30, 0), "Lightheadedness", "CARDIOLOGY", 6, 7, 3, "Sudden drop in blood pressure"),
+                new Hospital(1025, "Janet", new DateTime(2026, 2, 4, 15, 0, 0), new DateTime(2026, 2, 4, 15, 30, 0), "Shortness of breath", "CARDIOLOGY", 6, 7, 4, "Nasal congestion, runny nose, itchy or watery eyes"),
+
+                new Hospital(1026, "Milka", new DateTime(2026, 2, 3, 17, 0, 0), new DateTime(2026, 2, 3, 18, 30, 0), "Chest pain or discomfort", "CARDIOLOGY", 6, 7, 2, "Fast heart beat, and trouble breathing"),
+                new Hospital(1027, "Milka", new DateTime(2026, 2, 6, 15, 30, 0), new DateTime(2026, 2, 6, 16, 0, 0), "Racing heartbeat", "CARDIOLOGY", 6, 7, 2, "A fluttering in your chest"),
+                new Hospital(1028, "Milka", new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 14, 30, 0), "Heart Problem", "CARDIOLOGY", 6, 7, 2, "Fluid buildup from being overweight"),
+                new Hospital(1029, "Milka", new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 19, 30, 0), "Dizziness", "DIABETOLOGY", 5, 6, 2, "Feeling of lightheadedness or nearly fainting"),
+                new Hospital(1030, "Ethan Brooks", new DateTime(2026, 2, 3, 9, 0, 0),  new DateTime(2026, 2, 3, 10, 0, 0),  "Partial Paralysis",   "NEUROLOGY",    2, 2, 8,  "Muscle weakness on one side of the body"),
+                new Hospital(1031, "Liam Carter",  new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 10, 30, 0), "Statin Therapy",      "CARDIOLOGY",   6, 1, 9,  "High cholesterol follow-up"),
+                new Hospital(1032, "Ava Mitchell", new DateTime(2026, 2, 4, 11, 0, 0), new DateTime(2026, 2, 4, 12, 0, 0),  "Angioplasty",         "CARDIOLOGY",   6, 7, 10, "Chest discomfort after exertion"),
+                new Hospital(1033, "Noah Patel",   new DateTime(2026, 2, 5, 9, 30, 0), new DateTime(2026, 2, 5, 10, 0, 0),  "Muscle Weakness",     "NEUROLOGY",    2, 2, 11, "Difficulty lifting arms"),
+                new Hospital(1034, "Sophia Reyes", new DateTime(2026, 2, 5, 13, 0, 0), new DateTime(2026, 2, 5, 13, 30, 0), "Post-op Recovery",    "NEUROLOGY",    2, 2, 12, "Memory lapses, follow-up"),
+                new Hospital(1035, "Harper Kim",   new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 10, 30, 0), "Seizures",            "NEUROLOGY",    2, 2, 13, "Recurring seizures"),
+                new Hospital(1036, "Mason Lee",    new DateTime(2026, 2, 6, 11, 0, 0), new DateTime(2026, 2, 6, 11, 30, 0), "Antenatal Check",     "GENERAL",      1, 1, 14, "Routine antenatal visit"),
+                new Hospital(1037, "Olivia Bennett", new DateTime(2026, 2, 7, 9, 0, 0),  new DateTime(2026, 2, 7, 9, 30, 0),  "Hypertension",        "GENERAL",      1, 3, 15, "Elevated blood pressure"),
+                new Hospital(1038, "William Foster", new DateTime(2026, 2, 8, 14, 0, 0), new DateTime(2026, 2, 8, 15, 0, 0),  "Cardiac Arrhythmia",  "CARDIOLOGY",   6, 7, 16, "Irregular heartbeat"),
+                new Hospital(1039, "Isabella Cruz", new DateTime(2026, 2, 3, 8, 0, 0),  new DateTime(2026, 2, 3, 8, 30, 0),   "Asthma Review",       "GENERAL",      1, 3, 17, "Wheezing, shortness of breath"),
+                new Hospital(1040, "James Anderson", new DateTime(2026, 2, 4, 15, 0, 0), new DateTime(2026, 2, 4, 15, 30, 0), "Migraine",            "NEUROLOGY",    2, 2, 18, "Severe recurring headaches"),
+                new Hospital(1041, "Mia Thompson",   new DateTime(2026, 2, 5, 11, 0, 0), new DateTime(2026, 2, 5, 11, 30, 0), "Ear Infection",       "GENERAL",      1, 1, 19, "Ear pain, mild fever"),
+                new Hospital(1042, "Benjamin Singh", new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 14, 30, 0), "Diabetes Follow-up",  "DIABETOLOGY",  5, 6, 20, "Blood sugar management"),
+                new Hospital(1043, "Charlotte Diaz", new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 10, 30, 0), "Vaccination",         "GENERAL",      1, 1, 21, "Routine childhood immunization"),
+                new Hospital(1044, "Henry Walker",   new DateTime(2026, 2, 8, 11, 0, 0), new DateTime(2026, 2, 8, 11, 30, 0), "Cataract Screening",  "GENERAL",      1, 3, 22, "Blurred vision, light sensitivity"),
+                new Hospital(1045, "Amelia Ross",    new DateTime(2026, 2, 3, 13, 0, 0), new DateTime(2026, 2, 3, 13, 30, 0), "Psoriasis Flare-up",  "DERMATOLOGY",  3, 4, 23, "Red scaly patches on elbows"),
+                new Hospital(1046, "Lucas Martin",   new DateTime(2026, 2, 4, 16, 0, 0), new DateTime(2026, 2, 4, 16, 30, 0), "Sprained Ankle",      "ORTHOPEDICS",  4, 5, 24, "Pain and swelling after fall"),
+                new Hospital(1047, "Evelyn Garcia",  new DateTime(2026, 2, 5, 15, 0, 0), new DateTime(2026, 2, 5, 15, 30, 0), "Thyroid Check",       "GENERAL",      1, 1, 25, "Fatigue, weight changes"),
+                new Hospital(1048, "Logan Murphy",   new DateTime(2026, 2, 6, 9, 0, 0),  new DateTime(2026, 2, 6, 9, 30, 0),  "Allergy Rash",        "DERMATOLOGY",  3, 4, 26, "Itchy rash on arms and back"),
+                new Hospital(1049, "Aria Khan",      new DateTime(2026, 2, 7, 13, 0, 0), new DateTime(2026, 2, 7, 13, 30, 0), "Knee Pain",           "ORTHOPEDICS",  4, 5, 27, "Persistent knee pain")
             };
+            ApplyDynamicDates(data);
             return data;
         }
     }
@@ -135,7 +216,27 @@ public List<Patient> GetPatientsData()
                 new Patient(4, "Janet", "Janet", new DateTime(2000, 7, 3), "(071) 555-4544", "janet79@rpy.com", "4110 Old Redmond Rd.", "Biological Problem", "GENERAL", "B +ve", "Male", "Physical aches or pain, Memory difficulties or personality change"),
                 new Patient(5, "Mercy", "Mercy", new DateTime(2005, 4, 29), "(071) 555-5444", "mercy60@sample.com", "14 Garrett Hill", "Skin Hives", "DERMATOLOGY", "AB -ve", "Female", "outbreak of swollen, pale red bumps or plaques"),
                 new Patient(6, "Richa", "Richa", new DateTime(1989, 10, 29), "(206) 555-4444", "richa46@mail.com", "Coventry House\r\nMiner Rd.", "Arm Fracture", "ORTHOPEDICS", "B +ve", "Female", "Swelling, warmth, or redness in the joint"),
-                new Patient(7, "Maud Oliver", "Maud Oliver", new DateTime(1989, 10, 29), "(206) 666-4444", "moud46@rpy.com", "Coventry House\r\nMiner Rd.", "Racing heartbeat", "CARDIOLOGY", "B +ve", "Male", "A fluttering in your chest")
+                new Patient(7, "Maud Oliver", "Maud Oliver", new DateTime(1989, 10, 29), "(206) 666-4444", "moud46@rpy.com", "Coventry House\r\nMiner Rd.", "Racing heartbeat", "CARDIOLOGY", "B +ve", "Male", "A fluttering in your chest"),
+                new Patient(8, "Ethan Brooks", "Ethan", new DateTime(2001, 5, 14), "(071) 555-1101", "ethan01@mail.com", "12 Pine Lane", "Partial Paralysis", "NEUROLOGY", "O +ve", "Male", "Muscle weakness on one side of the body"),
+                new Patient(9, "Liam Carter", "Liam", new DateTime(1981, 8, 22), "(071) 555-1102", "liam02@mail.com", "45 Oak Drive", "Statin Therapy", "CARDIOLOGY", "A +ve", "Male", "High cholesterol, follow-up review"),
+                new Patient(10, "Ava Mitchell", "Ava", new DateTime(2006, 2, 9), "(071) 555-1103", "ava03@mail.com", "78 Maple St", "Angioplasty", "CARDIOLOGY", "B +ve", "Female", "Chest discomfort after exertion"),
+                new Patient(11, "Noah Patel", "Noah", new DateTime(1996, 11, 30), "(071) 555-1104", "noah04@mail.com", "9 Cedar Ct", "Muscle Weakness", "NEUROLOGY", "AB +ve", "Male", "Difficulty lifting arms, fatigue"),
+                new Patient(12, "Sophia Reyes", "Sophia", new DateTime(2008, 7, 4), "(071) 555-1105", "sophia05@mail.com", "23 Birch Rd", "Decreased Brain Activity", "NEUROLOGY", "O +ve", "Female", "Memory lapses, confusion"),
+                new Patient(13, "Harper Kim", "Harper", new DateTime(2000, 1, 18), "(071) 555-1106", "harper06@mail.com", "56 Walnut Ave", "Seizures", "NEUROLOGY", "B -ve", "Female", "Recurring seizures, follow-up"),
+                new Patient(14, "Mason Lee", "Mason", new DateTime(1998, 3, 27), "(071) 555-1107", "mason07@mail.com", "101 Elm Way", "Antenatal Check", "GENERAL", "O +ve", "Female", "Routine antenatal visit"),
+                new Patient(15, "Olivia Bennett", "Olivia", new DateTime(1974, 6, 12), "(071) 555-1108", "olivia08@mail.com", "300 Spruce St", "Hypertension", "GENERAL", "A +ve", "Female", "Elevated blood pressure readings"),
+                new Patient(16, "William Foster", "William", new DateTime(1965, 9, 5), "(071) 555-1109", "william09@mail.com", "17 Aspen Cir", "Cardiac Arrhythmia", "CARDIOLOGY", "O +ve", "Male", "Irregular heartbeat episodes"),
+                new Patient(17, "Isabella Cruz", "Isabella", new DateTime(2010, 4, 1), "(071) 555-1110", "isabella10@mail.com", "8 Willow Ln", "Asthma", "GENERAL", "O +ve", "Female", "Wheezing, shortness of breath"),
+                new Patient(18, "James Anderson", "James", new DateTime(1982, 12, 19), "(071) 555-1111", "james11@mail.com", "62 Poplar Ave", "Migraine", "NEUROLOGY", "B +ve", "Male", "Severe recurring headaches"),
+                new Patient(19, "Mia Thompson", "Mia", new DateTime(2012, 8, 8), "(071) 555-1112", "mia12@mail.com", "5 Hickory Pl", "Ear Infection", "GENERAL", "O +ve", "Female", "Ear pain, mild fever"),
+                new Patient(20, "Benjamin Singh", "Benjamin", new DateTime(1978, 10, 25), "(071) 555-1113", "benjamin13@mail.com", "140 Cypress Rd", "Diabetes Follow-up", "DIABETOLOGY", "B +ve", "Male", "Blood sugar management"),
+                new Patient(21, "Charlotte Diaz", "Charlotte", new DateTime(2014, 5, 16), "(071) 555-1114", "charlotte14@mail.com", "33 Sycamore Dr", "Vaccination", "GENERAL", "A +ve", "Female", "Routine childhood immunization"),
+                new Patient(22, "Henry Walker", "Henry", new DateTime(1969, 7, 30), "(071) 555-1115", "henry15@mail.com", "88 Redwood Blvd", "Cataract Screening", "GENERAL", "O +ve", "Male", "Blurred vision, light sensitivity"),
+                new Patient(23, "Amelia Ross", "Amelia", new DateTime(1995, 11, 11), "(071) 555-1116", "amelia16@mail.com", "21 Sequoia Way", "Psoriasis Flare-up", "DERMATOLOGY", "AB +ve", "Female", "Red scaly patches on elbows"),
+                new Patient(24, "Lucas Martin", "Lucas", new DateTime(2011, 2, 23), "(071) 555-1117", "lucas17@mail.com", "16 Magnolia Ct", "Sprained Ankle", "ORTHOPEDICS", "O +ve", "Male", "Pain and swelling after fall"),
+                new Patient(25, "Evelyn Garcia", "Evelyn", new DateTime(1971, 4, 9), "(071) 555-1118", "evelyn18@mail.com", "74 Beech St", "Thyroid Check", "GENERAL", "B -ve", "Female", "Fatigue, weight changes"),
+                new Patient(26, "Logan Murphy", "Logan", new DateTime(2015, 9, 14), "(071) 555-1119", "logan19@mail.com", "2 Aspen Pl", "Allergy Rash", "DERMATOLOGY", "O +ve", "Male", "Itchy rash on arms and back"),
+                new Patient(27, "Aria Khan", "Aria", new DateTime(1987, 6, 3), "(071) 555-1120", "aria20@mail.com", "99 Chestnut Rd", "Knee Pain", "ORTHOPEDICS", "A +ve", "Female", "Persistent knee pain, swelling")
             };
             return data;
         }
@@ -216,79 +317,79 @@ public List<Doctor> GetDoctorsData()
         {
             List<WorkDay> workDays = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 08, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 13, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 8, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 13, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 8, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 13, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 8, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 13, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 08, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 13, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 8, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 13, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 8, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 13, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 08, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 13, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 8, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 13, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 8, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 13, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 8, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 13, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 08, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 13, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 8, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 13, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 8, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 13, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays1 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 10, 0, 0), new DateTime(2020, 2, 01, 19, 0, 0), new DateTime(2020, 2, 01, 14, 0, 0), new DateTime(2020, 2, 01, 15, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, true, new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 19, 0, 0), new DateTime(2020, 2, 2, 14, 0, 0), new DateTime(2020, 2, 2, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 10, 0, 0), new DateTime(2020, 2, 3, 19, 0, 0), new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 15, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 19, 0, 0), new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 15, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 10, 0, 0), new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), new DateTime(2020, 2, 5, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Friday", 5, false, new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 19, 0, 0), new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 15, 0, 0), "TimeOff"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 19, 0, 0), new DateTime(2020, 2, 7, 14, 0, 0), new DateTime(2020, 2, 7, 15, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 10, 0, 0), new DateTime(2026, 2, 01, 19, 0, 0), new DateTime(2026, 2, 01, 14, 0, 0), new DateTime(2026, 2, 01, 15, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, true, new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 19, 0, 0), new DateTime(2026, 2, 2, 14, 0, 0), new DateTime(2026, 2, 2, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 10, 0, 0), new DateTime(2026, 2, 3, 19, 0, 0), new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 15, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 19, 0, 0), new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 15, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 10, 0, 0), new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), new DateTime(2026, 2, 5, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Friday", 5, false, new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 19, 0, 0), new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 15, 0, 0), "TimeOff"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 19, 0, 0), new DateTime(2026, 2, 7, 14, 0, 0), new DateTime(2026, 2, 7, 15, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays2 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, false, new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 21, 0, 0), new DateTime(2020, 2, 01, 16, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), "TimeOff"),
-                new WorkDay("Monday", 1, true, new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 21, 0, 0), new DateTime(2020, 2, 2, 16, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), "AddBreak"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 21, 0, 0), new DateTime(2020, 2, 3, 16, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 21, 0, 0), new DateTime(2020, 2, 4, 16, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 21, 0, 0), new DateTime(2020, 2, 5, 16, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 21, 0, 0), new DateTime(2020, 2, 6, 16, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 21, 0, 0), new DateTime(2020, 2, 7, 16, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, false, new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 21, 0, 0), new DateTime(2026, 2, 01, 16, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), "TimeOff"),
+                new WorkDay("Monday", 1, true, new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 21, 0, 0), new DateTime(2026, 2, 2, 16, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), "AddBreak"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 21, 0, 0), new DateTime(2026, 2, 3, 16, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 21, 0, 0), new DateTime(2026, 2, 4, 16, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 21, 0, 0), new DateTime(2026, 2, 5, 16, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 21, 0, 0), new DateTime(2026, 2, 6, 16, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 21, 0, 0), new DateTime(2026, 2, 7, 16, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays3 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, false, new DateTime(2020, 2, 01, 8, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 13, 0, 0), "TimeOff"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 8, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 13, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 8, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 13, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 8, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 13, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 8, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 13, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 8, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 13, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, true, new DateTime(2020, 2, 7, 8, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 13, 0, 0), "AddBreak")
+                new WorkDay("Sunday", 0, false, new DateTime(2026, 2, 01, 8, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 13, 0, 0), "TimeOff"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 8, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 13, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 8, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 13, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 8, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 13, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 8, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 13, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 8, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 13, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, true, new DateTime(2026, 2, 7, 8, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 13, 0, 0), "AddBreak")
             };
 
             List<WorkDay> workDays4 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 10, 0, 0), new DateTime(2020, 2, 01, 19, 0, 0), new DateTime(2020, 2, 01, 14, 0, 0), new DateTime(2020, 2, 01, 15, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 19, 0, 0), new DateTime(2020, 2, 2, 14, 0, 0), new DateTime(2020, 2, 2, 15, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 10, 0, 0), new DateTime(2020, 2, 3, 19, 0, 0), new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 15, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 19, 0, 0), new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 15, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 10, 0, 0), new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), new DateTime(2020, 2, 5, 15, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 19, 0, 0), new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, false, new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 19, 0, 0), new DateTime(2020, 2, 7, 14, 0, 0), new DateTime(2020, 2, 7, 15, 0, 0), "TimeOff")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 10, 0, 0), new DateTime(2026, 2, 01, 19, 0, 0), new DateTime(2026, 2, 01, 14, 0, 0), new DateTime(2026, 2, 01, 15, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 19, 0, 0), new DateTime(2026, 2, 2, 14, 0, 0), new DateTime(2026, 2, 2, 15, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 10, 0, 0), new DateTime(2026, 2, 3, 19, 0, 0), new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 15, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 19, 0, 0), new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 15, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 10, 0, 0), new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), new DateTime(2026, 2, 5, 15, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 19, 0, 0), new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, false, new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 19, 0, 0), new DateTime(2026, 2, 7, 14, 0, 0), new DateTime(2026, 2, 7, 15, 0, 0), "TimeOff")
             };
 
             List<WorkDay> workDays5 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, false, new DateTime(2020, 2, 01, 10, 0, 0), new DateTime(2020, 2, 01, 19, 0, 0), new DateTime(2020, 2, 01, 14, 0, 0), new DateTime(2020, 2, 01, 15, 0, 0), "TimeOff"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 10, 0, 0), new DateTime(2020, 2, 2, 19, 0, 0), new DateTime(2020, 2, 2, 14, 0, 0), new DateTime(2020, 2, 2, 15, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, true, new DateTime(2020, 2, 3, 10, 0, 0), new DateTime(2020, 2, 3, 19, 0, 0), new DateTime(2020, 2, 3, 14, 0, 0), new DateTime(2020, 2, 3, 15, 0, 0), "AddBreak"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 10, 0, 0), new DateTime(2020, 2, 4, 19, 0, 0), new DateTime(2020, 2, 4, 14, 0, 0), new DateTime(2020, 2, 4, 15, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 10, 0, 0), new DateTime(2020, 2, 5, 19, 0, 0), new DateTime(2020, 2, 5, 14, 0, 0), new DateTime(2020, 2, 5, 15, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 10, 0, 0), new DateTime(2020, 2, 6, 19, 0, 0), new DateTime(2020, 2, 6, 14, 0, 0), new DateTime(2020, 2, 6, 15, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, true, new DateTime(2020, 2, 7, 10, 0, 0), new DateTime(2020, 2, 7, 19, 0, 0), new DateTime(2020, 2, 7, 14, 0, 0), new DateTime(2020, 2, 7, 15, 0, 0), "AddBreak")
+                new WorkDay("Sunday", 0, false, new DateTime(2026, 2, 01, 10, 0, 0), new DateTime(2026, 2, 01, 19, 0, 0), new DateTime(2026, 2, 01, 14, 0, 0), new DateTime(2026, 2, 01, 15, 0, 0), "TimeOff"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 10, 0, 0), new DateTime(2026, 2, 2, 19, 0, 0), new DateTime(2026, 2, 2, 14, 0, 0), new DateTime(2026, 2, 2, 15, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, true, new DateTime(2026, 2, 3, 10, 0, 0), new DateTime(2026, 2, 3, 19, 0, 0), new DateTime(2026, 2, 3, 14, 0, 0), new DateTime(2026, 2, 3, 15, 0, 0), "AddBreak"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 10, 0, 0), new DateTime(2026, 2, 4, 19, 0, 0), new DateTime(2026, 2, 4, 14, 0, 0), new DateTime(2026, 2, 4, 15, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 10, 0, 0), new DateTime(2026, 2, 5, 19, 0, 0), new DateTime(2026, 2, 5, 14, 0, 0), new DateTime(2026, 2, 5, 15, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 10, 0, 0), new DateTime(2026, 2, 6, 19, 0, 0), new DateTime(2026, 2, 6, 14, 0, 0), new DateTime(2026, 2, 6, 15, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, true, new DateTime(2026, 2, 7, 10, 0, 0), new DateTime(2026, 2, 7, 19, 0, 0), new DateTime(2026, 2, 7, 14, 0, 0), new DateTime(2026, 2, 7, 15, 0, 0), "AddBreak")
             };
 
             List<WorkDay> workDays6 = new List<WorkDay>
             {
-                new WorkDay("Sunday", 0, true, new DateTime(2020, 2, 01, 12, 0, 0), new DateTime(2020, 2, 01, 21, 0, 0), new DateTime(2020, 2, 01, 16, 0, 0), new DateTime(2020, 2, 01, 17, 0, 0), "AddBreak"),
-                new WorkDay("Monday", 1, false, new DateTime(2020, 2, 2, 12, 0, 0), new DateTime(2020, 2, 2, 21, 0, 0), new DateTime(2020, 2, 2, 16, 0, 0), new DateTime(2020, 2, 2, 17, 0, 0), "TimeOff"),
-                new WorkDay("Tuesday", 2, false, new DateTime(2020, 2, 3, 12, 0, 0), new DateTime(2020, 2, 3, 21, 0, 0), new DateTime(2020, 2, 3, 16, 0, 0), new DateTime(2020, 2, 3, 17, 0, 0), "TimeOff"),
-                new WorkDay("Wednesday", 3, true, new DateTime(2020, 2, 4, 12, 0, 0), new DateTime(2020, 2, 4, 21, 0, 0), new DateTime(2020, 2, 4, 16, 0, 0), new DateTime(2020, 2, 4, 17, 0, 0), "AddBreak"),
-                new WorkDay("Thursday", 4, true, new DateTime(2020, 2, 5, 12, 0, 0), new DateTime(2020, 2, 5, 21, 0, 0), new DateTime(2020, 2, 5, 16, 0, 0), new DateTime(2020, 2, 5, 17, 0, 0), "AddBreak"),
-                new WorkDay("Friday", 5, true, new DateTime(2020, 2, 6, 12, 0, 0), new DateTime(2020, 2, 6, 21, 0, 0), new DateTime(2020, 2, 6, 16, 0, 0), new DateTime(2020, 2, 6, 17, 0, 0), "RemoveBreak"),
-                new WorkDay("Saturday", 6, true, new DateTime(2020, 2, 7, 12, 0, 0), new DateTime(2020, 2, 7, 21, 0, 0), new DateTime(2020, 2, 7, 16, 0, 0), new DateTime(2020, 2, 7, 17, 0, 0), "AddBreak")
+                new WorkDay("Sunday", 0, true, new DateTime(2026, 2, 01, 12, 0, 0), new DateTime(2026, 2, 01, 21, 0, 0), new DateTime(2026, 2, 01, 16, 0, 0), new DateTime(2026, 2, 01, 17, 0, 0), "AddBreak"),
+                new WorkDay("Monday", 1, false, new DateTime(2026, 2, 2, 12, 0, 0), new DateTime(2026, 2, 2, 21, 0, 0), new DateTime(2026, 2, 2, 16, 0, 0), new DateTime(2026, 2, 2, 17, 0, 0), "TimeOff"),
+                new WorkDay("Tuesday", 2, false, new DateTime(2026, 2, 3, 12, 0, 0), new DateTime(2026, 2, 3, 21, 0, 0), new DateTime(2026, 2, 3, 16, 0, 0), new DateTime(2026, 2, 3, 17, 0, 0), "TimeOff"),
+                new WorkDay("Wednesday", 3, true, new DateTime(2026, 2, 4, 12, 0, 0), new DateTime(2026, 2, 4, 21, 0, 0), new DateTime(2026, 2, 4, 16, 0, 0), new DateTime(2026, 2, 4, 17, 0, 0), "AddBreak"),
+                new WorkDay("Thursday", 4, true, new DateTime(2026, 2, 5, 12, 0, 0), new DateTime(2026, 2, 5, 21, 0, 0), new DateTime(2026, 2, 5, 16, 0, 0), new DateTime(2026, 2, 5, 17, 0, 0), "AddBreak"),
+                new WorkDay("Friday", 5, true, new DateTime(2026, 2, 6, 12, 0, 0), new DateTime(2026, 2, 6, 21, 0, 0), new DateTime(2026, 2, 6, 16, 0, 0), new DateTime(2026, 2, 6, 17, 0, 0), "RemoveBreak"),
+                new WorkDay("Saturday", 6, true, new DateTime(2026, 2, 7, 12, 0, 0), new DateTime(2026, 2, 7, 21, 0, 0), new DateTime(2026, 2, 7, 16, 0, 0), new DateTime(2026, 2, 7, 17, 0, 0), "AddBreak")
             };
 
             List<Doctor> doctors = new List<Doctor>
@@ -315,9 +416,9 @@ public class WorkDay
         public DateTime? WorkStartHour { get; set; }
         public DateTime? WorkEndHour { get; set; }
         [Required(ErrorMessage = "Enter valid Hour")]
-        public DateTime? BreakStartHour { get; set; } = new DateTime(2020, 2, 01, 12, 0, 0);
+        public DateTime? BreakStartHour { get; set; } = new DateTime(2026, 2, 01, 12, 0, 0);
         [Required(ErrorMessage = "Enter valid Hour")]
-        public DateTime? BreakEndHour { get; set; } = new DateTime(2020, 2, 01, 13, 0, 0);
+        public DateTime? BreakEndHour { get; set; } = new DateTime(2026, 2, 01, 13, 0, 0);
         public string State { get; set; }
 
         public WorkDay() { }
@@ -346,24 +447,50 @@ public class WaitingList
         public string Treatment { get; set; }
         public int DepartmentId { get; set; }
         public int PatientId { get; set; }
+        private static readonly Random Rand = new();
+
+        private static DateTime GetRandomQueueDate()
+        {
+            int month = Rand.Next(1, 13);
+
+            int day = Rand.Next(
+                1,
+                DateTime.DaysInMonth(2026, month) + 1);
+
+            return new DateTime(
+                2026,
+                month,
+                day,
+                Rand.Next(8, 18),
+                0,
+                0);
+        }
+
 
         public List<WaitingList> GetWaitingList()
         {
 
             List<WaitingList> wait = new List<WaitingList>()
             {
-                new WaitingList {Id= 1, Name= "Laura", StartTime= new DateTime(2020, 2, 3, 8, 30, 0), EndTime= new DateTime(2020, 2, 3, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 1},
-                new WaitingList { Id= 2,Name= "Milka", StartTime= new DateTime(2020, 2, 4, 8, 30, 0), EndTime= new DateTime(2020, 2, 4, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 2 },
-                new WaitingList { Id= 3, Name= "Adams", StartTime= new DateTime(2020, 2, 4, 9, 30, 0), EndTime= new DateTime(2020, 2, 4, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 3 },
-                new WaitingList { Id= 4, Name= "Janet", StartTime= new DateTime(2020, 2, 3, 11, 0, 0), EndTime= new DateTime(2020, 2, 3, 12, 30, 0), Disease= "Frequent urination", DepartmentName= "DIABETALOGY", Treatment= "DIALOGIS", DepartmentId= 5, PatientId= 4 },
-                new WaitingList { Id= 5, Name= "Mercy", StartTime= new DateTime(2020, 2, 3, 11, 0, 0), EndTime= new DateTime(2020, 2, 3, 12, 30, 0), Disease= "Muscle weakness", DepartmentName= "NEUROLOGY", Treatment= "DIAGNOSIS", DepartmentId= 2, PatientId= 5 },
-                new WaitingList { Id= 6, Name= "Richa", StartTime= new DateTime(2020, 2, 3, 11, 0, 0), EndTime= new DateTime(2020, 2, 3, 12, 30, 0), Disease= "Shortness of breath", DepartmentName= "CARDIOLOGY", Treatment= "REGULAR CHECKUP", DepartmentId= 6, PatientId= 6 },
-                new WaitingList { Id= 7, Name= "Richa", StartTime= new DateTime(2020, 2, 3, 8, 30, 0), EndTime= new DateTime(2020, 2, 3, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 6 },
-                new WaitingList { Id= 8, Name= "Mercy", StartTime= new DateTime(2020, 8, 4, 8, 30, 0), EndTime= new DateTime(2020, 8, 4, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 5},
-                new WaitingList { Id= 9, Name= "Janet", StartTime= new DateTime(2020, 2, 4, 9, 30, 0), EndTime= new DateTime(2020, 2, 4, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 4 }
+                new WaitingList {Id= 1, Name= "Laura", StartTime= new DateTime(2026, 9, 3, 8, 30, 0), EndTime= new DateTime(2026, 9, 3, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 1},
+                new WaitingList { Id= 2,Name= "Milka", StartTime= new DateTime(2026, 9, 4, 8, 30, 0), EndTime= new DateTime(2026, 9, 4, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 2 },
+                new WaitingList { Id= 3, Name= "Adams", StartTime= new DateTime(2026, 9, 5, 9, 30, 0), EndTime= new DateTime(2026, 9, 5, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 3 },
+                new WaitingList { Id= 4, Name= "Janet", StartTime= new DateTime(2026, 9, 5, 11, 0, 0), EndTime= new DateTime(2026, 9, 5, 12, 30, 0), Disease= "Frequent urination", DepartmentName= "DIABETALOGY", Treatment= "DIALOGIS", DepartmentId= 5, PatientId= 4 },
+                new WaitingList { Id= 5, Name= "Mercy", StartTime= new DateTime(2026, 9, 6, 11, 0, 0), EndTime= new DateTime(2026, 9, 6, 12, 30, 0), Disease= "Muscle weakness", DepartmentName= "NEUROLOGY", Treatment= "DIAGNOSIS", DepartmentId= 2, PatientId= 5 },
+                new WaitingList { Id= 6, Name= "Richa", StartTime= new DateTime(2026, 9, 10, 11, 0, 0), EndTime= new DateTime(2026, 9, 10, 12, 30, 0), Disease= "Shortness of breath", DepartmentName= "CARDIOLOGY", Treatment= "REGULAR CHECKUP", DepartmentId= 6, PatientId= 6 },
+                new WaitingList { Id= 7, Name= "Richa", StartTime= new DateTime(2026, 9, 8, 8, 30, 0), EndTime= new DateTime(2026, 9, 8, 9, 30, 0), Disease= "Sudden loss of vision", DepartmentName= "GENERAL", Treatment= "CHECKUP", DepartmentId= 1, PatientId= 6 },
+                new WaitingList { Id= 8, Name= "Mercy", StartTime= new DateTime(2026, 9, 15, 8, 30, 0), EndTime= new DateTime(2026, 9, 15, 10, 30, 0), Disease= "Bone Fracture", DepartmentName= "ORTHOPEDICS", Treatment= "SURGERY", DepartmentId= 4, PatientId= 5},
+                new WaitingList { Id= 9, Name= "Janet", StartTime= new DateTime(2026, 9, 22, 9, 30, 0), EndTime= new DateTime(2026, 9, 22, 10, 30, 0), Disease= "Skin Hives", DepartmentName= "DERMATOLOGY", Treatment= "CHECKUP", DepartmentId= 3, PatientId= 4 }
 
             };
-            return wait;
+            foreach (var item in wait)
+                {
+                    var start = GetRandomQueueDate();
+
+                    item.StartTime = start;
+                    item.EndTime = start.AddMinutes(30);
+                }
+                            return wait;
 
         }
     }
@@ -577,10 +704,10 @@ public List<Activity> GetActivityData()
         {
             List<Activity> data = new List<Activity>
             {
-                new Activity("Added New Doctor", "Dr.Johnson James, Cardiologist", "5 mins ago", "doctor", new DateTime(2020, 2, 1, 9, 0, 0)),
-                new Activity("Added New Appointment", "Laura for General Checkup on 7th March, 2020 @ 8.30 AM with Dr.Molli Cobb, Cardiologist", "5 mins ago", "appointment", new DateTime(2020, 2, 1, 11, 0, 0)),
-                new Activity("Added New Patient", "James Richard for Fever and cold", "5 mins ago", "patient", new DateTime(2020, 2, 1, 10, 0, 0)),
-                new Activity("Added New Appointment", "Joseph for consultation on 7th Feb, 2020 @ 11.10 AM with Dr.Molli Cobb", "5 mins ago", "appointment", new DateTime(2020, 2, 1, 11, 0, 0))
+                new Activity("Added New Doctor", "Dr.Johnson James, Cardiologist", "5 mins ago", "doctor", new DateTime(2026, 2, 1, 9, 0, 0)),
+                new Activity("Added New Appointment", "Laura for General Checkup on 7th March, 2020 @ 8.30 AM with Dr.Molli Cobb, Cardiologist", "5 mins ago", "appointment", new DateTime(2026, 2, 1, 11, 0, 0)),
+                new Activity("Added New Patient", "James Richard for Fever and cold", "5 mins ago", "patient", new DateTime(2026, 2, 1, 10, 0, 0)),
+                new Activity("Added New Appointment", "Joseph for consultation on 7th Feb, 2020 @ 11.10 AM with Dr.Molli Cobb", "5 mins ago", "appointment", new DateTime(2026, 2, 1, 11, 0, 0))
             };
             return data;
         }
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentService.cs b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentService.cs
index f4fb6fc..c89f24c 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentService.cs
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/AppointmentService.cs
@@ -11,7 +11,7 @@ public class AppointmentService
         public AppointmentService()
         {
             this.Activities = new Activity().GetActivityData();
-            this.StartDate = new DateTime(2020, 2, 5, 0, 0, 0, 0);
+            this.StartDate = DateTime.Today;
             this.ActiveDoctors = new Doctor().GetDoctorsData().FirstOrDefault();
             this.ActivePatients = new Patient().GetPatientsData().FirstOrDefault();
             this.StartHours = new TextValueData().GetStartHours();
@@ -29,13 +29,13 @@ public AppointmentService()
             this.DutyTimings = new TextIdData().DutyTimingsData();
             this.Experience = new TextIdData().ExperienceData();
             this.NavigationMenu = new NavigationMenu().GetNavigationMenuItems();
-            this.CalendarSettings = new CalendarSetting { BookingColor = "Doctors", Calendar = new AppointmentPlanner.Models.Calendar { Start = "08:00", End = "21:00" }, CurrentView = "Week", Interval = 60, FirstDayOfWeek = 0 };
+            this.CalendarSettings = new CalendarSetting { BookingColor = "Doctors", Calendar = new AppointmentPlanner.Models.Calendar { Start = "08:00", End = "21:00" }, CurrentView = "Day", Interval = 60, FirstDayOfWeek = 0 };
         }
         public DateTime StartDate { get; set; }
         public Doctor ActiveDoctors { get; set; }
 
         public Patient ActivePatients { get; set; }
-        public List<TextValueData> StartHours { get; set; } 
+        public List<TextValueData> StartHours { get; set; }
         public List<TextValueData> EndHours { get; set; }
         public List<TextValueData> Views { get; set; }
         public List<TextValueData> ColorCategory { get; set; }
@@ -55,7 +55,7 @@ public AppointmentService()
         public bool ShowDeleteMsg { get; set; }
 
         public DateTime GetWeekFirstDate(DateTime date)
-        { 
+        {
             return date.AddDays(DayOfWeek.Monday - date.DayOfWeek);
         }
 
@@ -101,7 +101,7 @@ public string GetAvailability(Doctor doctor)
             {
                 var result = workDays.Where(item => item.Enable.Equals(true)).Select(item => item.Day.Substring(0, 3).ToUpper());
                 return string.Join(",", result).ToString();
-                
+
             }
             return string.Empty;
         }
@@ -135,6 +135,6 @@ public List<ChartData> GetAllChartPoints(List<Hospital> hospitals, DateTime date
             return chartPoints;
         }
 
-        
-    } 
+
+    }
 }
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Dashboard/Dashboard.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Dashboard/Dashboard.razor
index 0404008..eabdcbd 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Dashboard/Dashboard.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Dashboard/Dashboard.razor
@@ -4,153 +4,549 @@
 @using AppointmentPlanner.Data;
 @using AppointmentPlanner.Models;
 @using System;
+@using System.Linq;
+@using System.Threading;
+@implements IDisposable
 
-@if(isDataLoaded){
-<div id="dashboard" class="planner-dashboard">
-    <div class="row content view-detail-display" style="margin: 0px;">
-        <div class="col-lg-8 col-md-8 col-sm-8">
-            <div class="row">
-                <div class="col-lg-6 col-md-6 col-sm-6 text-display">
-                    <div class="e-card card day-events-container">
-                        <div class="e-card-content">
-                            <span class="card-text label-text">Total Appointments - Today</span>
-                            <div class="count-container">
-                                <span class="icon-day"><img src="css/appoinment/assets/Icons/Today_Widget.svg" alt="Today" /></span>
-                                <span class="day-event-count">@dayEventCount</span>
-                            </div>
+@if (isDataLoaded)
+{
+    <div id="dashboard-modern" class="dashboard-container" @onclick="CloseMonthPicker">
+
+        <!-- ============ Top header =========== -->
+              <header class="page-header">
+            <div class="page-title-wrap">
+                <h6>Good Morning, Admin</h6>
+                <span class="page-meta"><p class="page-meta-text">Last refreshed @lastUpdated · data updates live</p></span>
+            </div>
+
+            <div class="page-header-actions">
+                <span class="global-search-wrap">
+                    <span class="e-icons e-search search-icon" aria-hidden="true"></span>
+                    <input type="text"
+                           placeholder="Search patients, reasons…"
+                           aria-label="Search patients or appointment reasons"
+                           @bind="searchText"
+                           @bind:event="oninput"
+                           role="searchbox"
+                           aria-describedby="search-help" />
+                </span>
+                <span id="search-help" style="display:none;">Filter patients and appointment reasons in real time</span>
+
+                <button type="button" class="ai-button" aria-label="Open AI assistant for clinical briefing"
+                        @onclick=@(() => showAI = true)>
+                    <span class="e-icons e-assist" aria-hidden="true"></span>
+                    Ask AI
+                </button>
+            </div>
+        </header>
+         @if (CriticalPatients > 0)
+        {
+            <div class="critical-banner" role="alert">
+                <span class="banner-icon e-icons e-status-info" aria-hidden="true"></span>
+                <div class="banner-text">
+                    <strong>@CriticalPatients critical patient@(CriticalPatients == 1 ? "" : "s") need immediate attention</strong>
+                    <span class="banner-meta">Last check @lastUpdated · highest priority first</span>
+                </div>
+                <button type="button" class="banner-cta" @onclick=@(() => { severityFilter = "Critical"; activeTab = "Daily"; })>Triage queue</button>
+            </div>
+        }
+
+
+      <!-- ============ Primary CTA strip (P0: dashboard must be action-oriented) ============ -->
+        <div class="cta-strip" role="toolbar" aria-label="Quick actions">
+            <div class="cta-wrap" style="position:relative;">
+                <button type="button" class="cta-primary" @onclick="StartNextConsultation">
+                    <span class="e-icons e-plus" style="font-size:14px;" aria-hidden="true"></span>
+                    Start next consultation
+                </button>
+            </div>
+            <div class="cta-wrap" style="position:relative;">
+                <button type="button" class="cta-secondary" aria-expanded="@showScheduleCalendar"
+                        @onclick="ToggleScheduleCalendar">
+                    <span class="e-icons e-icon-calendar" style="font-size:14px;" aria-hidden="true"></span>
+                    Schedule appointment
+                </button>
+
+                @if (showScheduleCalendar)
+                {
+                    <div class="schedule-popup" role="dialog" aria-label="Pick a date for the appointment">
+                        <div class="schedule-popup-head">Schedule on a date</div>
+                        <SfCalendar TValue="DateTime?"
+                                    Min="@calendarMin"
+                                    Max="@calendarMax"
+                                    Value="@Today">
+                            <CalendarEvents TValue="DateTime?" ValueChange="OnScheduleDatePicked"></CalendarEvents>
+                        </SfCalendar>
+                    </div>
+                }
+            </div>
+            <div class="cta-live" aria-live="polite">
+                <span class="pulse-dot" aria-hidden="true"></span>
+                <span>Live — @ConsultationCount doctors available</span>
+            </div>
+        </div>
+
+
+        <!-- ============ Two-column hero: left = 4 KPI cards + 2 charts, right = Patient Overview ============ -->
+        <div class="dash-hero">
+            <div class="dash-hero-left">
+                <!-- 4-card colored metric strip -->
+                <div class="dashboard-kpi-strip">
+                    <SfCard CssClass="modern-kpi" ID="active-patients-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Active Patients</span>
+                        <span class="kpi-icon kpi-patient" aria-hidden="true">
+                            <span class="e-icons e-people"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Active patients: @totalPatients">@totalPatients</div>
+
+                    <div class="kpi-trend @(totalPatientsTrend < 0 ? "negative" : totalPatientsTrend > 0 ? "positive" : "neutral")" title="vs previous week" aria-label="@(totalPatientsTrend < 0 ? "Down" : totalPatientsTrend > 0 ? "Up" : "No change") @Math.Abs(totalPatientsTrend)% this week">
+                        @(totalPatientsTrend < 0 ? "↓" : totalPatientsTrend > 0 ? "↑" : "→") @Math.Abs(totalPatientsTrend)% <span class="kpi-trend-meta">this week</span>
+                    </div>
+
+                    <SfSparkline TValue="TrendPoint"
+                                Height="45px"
+                                DataSource="@patientSpark"
+                                aria-label="Active patients trend, last 7 days">
+                        <SparklineValueType ValueType="SparklineValueType.Numeric">
+                        </SparklineValueType>
+                    </SfSparkline>
+
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="modern-kpi" ID="waiting-patients-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Waiting</span>
+                        <span class="kpi-icon kpi-waiting" aria-hidden="true">
+                            <span class="e-icons e-clock"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Patients waiting: @WaitingCount">@WaitingCount</div>
+
+                    <div class="kpi-trend @(WaitingCount == 0 ? "neutral" : "positive")">
+                        @TotalPatientsInPeriod in active view
+                    </div>
+
+                    <div class="kpi-meter" role="img" aria-label="Waiting share of active view: @waitingShare%">
+                        <span style="width:@(waitingShare)%"></span>
+                    </div>
+
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="modern-kpi" ID="doctors-available-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Doctors Available</span>
+                        <span class="kpi-icon kpi-available" aria-hidden="true">
+                            <span class="e-icons e-user"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Doctors available: @ConsultationCount of @doctorCount">@ConsultationCount<span class="kpi-sub">/@doctorCount</span></div>
+
+                    <div class="kpi-trend neutral">
+                        @doctorUtilization% utilisation now
+                    </div>
+
+                    <div class="kpi-meter" role="img" aria-label="Doctor utilisation: @doctorUtilization%">
+                        <span style="width:@(doctorUtilization)%"></span>
+                    </div>
+
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="modern-kpi" ID="completed-visits-card">
+                <CardContent>
+
+                    <div class="kpi-header">
+                        <span class="kpi-title">Completed Visits</span>
+                        <span class="kpi-icon kpi-completed" aria-hidden="true">
+                            <span class="e-icons e-check"></span>
+                        </span>
+                    </div>
+
+                    <div class="kpi-value" role="text" aria-label="Completed visits: @CompletedCount of @TotalPatientsInPeriod in active view">@CompletedCount<span class="kpi-sub">/@TotalPatientsInPeriod</span></div>
+
+                    <div class="kpi-trend @(appointmentsTrend < 0 ? "negative" : appointmentsTrend > 0 ? "positive" : "neutral")" title="vs previous week" aria-label="@(appointmentsTrend < 0 ? "Down" : appointmentsTrend > 0 ? "Up" : "No change") @Math.Abs(appointmentsTrend)% throughput">
+                        @(appointmentsTrend < 0 ? "↓" : appointmentsTrend > 0 ? "↑" : "→") @Math.Abs(appointmentsTrend)% <span class="kpi-trend-meta">throughput</span>
+                    </div>
+
+                    <div class="kpi-meter" role="img" aria-label="Completion rate: @completionRate%">
+                        <span style="width:@(completionRate)%"></span>
+                    </div>
+
+                </CardContent>
+            </SfCard>
+         </div>
+
+                <!-- Bar + Line charts row -->
+                <div class="dash-row-2col">
+                    <!-- Daily Appointment Stats (bar chart with tooltip) -->
+                    <div class="dash-card">
+                        <div class="dash-card-header">
+                            <h3 class="dash-card-title">Daily Appointment Stats</h3>
+                            <button class="dash-card-actions" title="More" aria-label="More">⋯</button>
                         </div>
+                        <SfChart Height="220px" Width="100%">
+                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
+                            <ChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
+                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryXAxis>
+                            <ChartPrimaryYAxis Minimum="0" Maximum="@dailyYMax" Interval="@dailyYInterval">
+                                <ChartAxisMajorGridLines Color="#eef2f7" Width="1"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryYAxis>
+                            <ChartLegendSettings Visible="true" Position="@Syncfusion.Blazor.Charts.LegendPosition.Top"
+                                                 Alignment="Syncfusion.Blazor.Charts.Alignment.Center"></ChartLegendSettings>
+                            <ChartSeriesCollection>
+                                <ChartSeries DataSource="@dailyAppointments"
+                                             Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"
+                                             XName="Day" YName="Clinic" Name="Clinic"
+                                             Fill="#0a8a8a" ColumnSpacing="0.35">
+                                    <ChartCornerRadius TopLeft="6" TopRight="6"></ChartCornerRadius>
+                                </ChartSeries>
+                                <ChartSeries DataSource="@dailyAppointments"
+                                             Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"
+                                             XName="Day" YName="Online" Name="Online"
+                                             Fill="#94a3b8" ColumnSpacing="0.35">
+                                    <ChartCornerRadius TopLeft="6" TopRight="6"></ChartCornerRadius>
+                                </ChartSeries>
+                            </ChartSeriesCollection>
+                        </SfChart>
                     </div>
-                </div>
-                <div class="col-lg-6 col-md-6 col-sm-6 text-display">
-                    <div class="e-card card week-events-container">
-                        <div class="e-card-content">
-                            <span class="card-text label-text">Total Appointments - This Week</span>
-                            <div class="count-container">
-                                <span class="icon-week"><img src="css/appoinment/assets/Icons/ThisWeek_Widget.svg" alt="ThisWeek" /></span>
-                                <span class="week-event-count">@weekEventCount</span>
-                            </div>
+
+                    <!-- Appointment Stats (line/spline) -->
+                    <div class="dash-card">
+                        <div class="dash-card-header">
+                            <h3 class="dash-card-title">Appointment Stats</h3>
+                            <button class="dash-card-actions" title="More" aria-label="More">⋯</button>
                         </div>
+                        <SfChart Height="220px" Width="100%">
+                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
+                            <ChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
+                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryXAxis>
+                            <ChartPrimaryYAxis Minimum="0" Maximum="@trendYMax" Interval="@trendYInterval">
+                                <ChartAxisMajorGridLines Color="#eef2f7" Width="1"></ChartAxisMajorGridLines>
+                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+                                <ChartAxisLabelStyle Color="#94a3b8" Size="11px"></ChartAxisLabelStyle>
+                            </ChartPrimaryYAxis>
+                            <ChartLegendSettings Visible="false"></ChartLegendSettings>
+                            <ChartSeriesCollection>
+                                <ChartSeries DataSource="@appointmentTrend"
+                                             Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline"
+                                             XName="Day" YName="Value"
+                                             Fill="#0a8a8a">
+                                    <ChartSeriesBorder Width="3" Color="#0a8a8a"></ChartSeriesBorder>
+                                    <ChartMarker Visible="true" Width="6" Height="6" Fill="#0a8a8a" Shape="Syncfusion.Blazor.Charts.ChartShape.Circle">
+                                    </ChartMarker>
+                                </ChartSeries>
+                            </ChartSeriesCollection>
+                        </SfChart>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-lg-12 col-md-12 col-sm-12 dashboard-control">
-                    <div class="e-card grid-container">
-                        <div class="e-card-header">
-                            <div class="e-card-header-caption">
-                                <div class="e-card-header-title">
-                                    <span class="label-text"> Today's Appointments</span><span class="link-text">
-                                        <NavLink class="nav-link" href="schedule">Book Appointments</NavLink>
-                                    </span>
-                                </div>
-                            </div>
+
+            <!-- Right side: Patient Overview (spans both rows of the hero) -->
+            <div class="dash-hero-right">
+                <div class="dash-card donut-card">
+                    <div class="dash-card-header">
+                        <h3 class="dash-card-title">Patient Overview</h3>
+                        <div class="donut-header-meta">
+                            @if (dominantSegment != null)
+                            {
+                                <span class="donut-delta @(dominantShare >= 50 ? "down" : "")"
+                                      title="Largest cohort">
+                                    @dominantSegment.Category @dominantShare%
+                                </span>
+                            }
+                            <button class="dash-card-actions" title="More" aria-label="More">⋯</button>
                         </div>
-                        <div class="e-card-content">
-                            <SfGrid id="Grid" DataSource="@appointments" Height="160px">
-                                <GridColumns>
-                                    <GridColumn Field="Time" HeaderText="Time" TextAlign="@TextAlign.Left" Width="80"></GridColumn>
-                                    <GridColumn Field="Name" HeaderText="Name" Width="120"></GridColumn>
-                                    <GridColumn HeaderText="Doctor Name" TextAlign="@TextAlign.Left" Width="150">
-                                        <Template>
-                                            <NavLink ActiveClass="doctors" Match="NavLinkMatch.Prefix" href="@($"doctors/doctorsdetails/{(context as Appointment).DoctorId}")">@((context as Appointment).DoctorName)</NavLink>
-                                        </Template>
-                                    </GridColumn>
-                                    <GridColumn Field="Symptoms" HeaderText="Symptoms" TextAlign="@TextAlign.Left" Width="150"></GridColumn>
-                                </GridColumns>
-                            </SfGrid>
+                    </div>
+                    <div class="donut-wrap">
+                        <SfAccumulationChart Width="100%" Height="100%">
+                            <AccumulationChartSeriesCollection>
+                                <AccumulationChartSeries
+                                    DataSource="@donutData"
+                                    XName="Category"
+                                    YName="Value"
+                                    InnerRadius="62%"
+                                    Type="Syncfusion.Blazor.Charts.AccumulationType.Pie"
+                                    PointColorMapping="Color"
+                                    Explode="false">
+                                    <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
+                                </AccumulationChartSeries>
+                            </AccumulationChartSeriesCollection>
+                            <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
+                        </SfAccumulationChart>
+                        <div class="donut-center" aria-label="Total patients: @donutTotal">
+                            <div class="donut-total">@donutTotal</div>
+                            <div class="donut-sub">Patients</div>
                         </div>
+                        @foreach (var seg in donutData)
+                        {
+                            var idx = donutData.IndexOf(seg);
+                            var segShare = donutTotal > 0
+                                ? (int)Math.Round(seg.Value * 100.0 / Math.Max(1, donutTotal))
+                                : 0;
+                            <div class="donut-label donut-label-@idx" style="color:@seg.Color"
+                                 title="@seg.Category: @seg.Value patients (@segShare%)">
+                                <span class="donut-num">@seg.Value</span>
+                                <span class="donut-cat">@seg.Category</span>
+                                <span class="donut-pct">@segShare%</span>
+                            </div>
+                        }
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-lg-12 col-md-12 col-sm-12 dashboard-control">
-                    <div class="e-card chart-container">
-                        <div class="e-card-content">
-                            <SfChart Height="340px" Width="100%" Title="Consultation">
-                                <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
-                                <ChartTitleStyle TextAlignment="@Alignment.Near"></ChartTitleStyle>
-                                <ChartPrimaryXAxis Title="Date" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Interval="1" IntervalType="@IntervalType.Days" LabelFormat="MM/dd" Minimum="@firstDayOfWeek" Maximum="@max" EdgeLabelPlacement="@EdgeLabelPlacement.Shift">
-                                    <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
-                                    <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
-                                    <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
-                                </ChartPrimaryXAxis>
-                                <ChartPrimaryYAxis Title="Patient" Minimum="0" Maximum="6" Interval="2"></ChartPrimaryYAxis>
-                                <ChartLegendSettings Visible="true" Position="@LegendPosition.Top" Padding="20"></ChartLegendSettings>
-                                <ChartSeriesCollection>
-                                    <ChartSeries DataSource="@chartData" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" Width="2" XName="Date" YName="EventCount"
-                                                 Name="Diabetology" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Fill="#60F238">
-                                    </ChartSeries>
-                                    <ChartSeries DataSource="@chartData1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" Width="2" XName="Date" YName="EventCount"
-                                                 Name="Orthopaedics" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Fill="#388CF5">
-                                    </ChartSeries>
-                                    <ChartSeries DataSource="@chartData2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline" Width="2" XName="Date" YName="EventCount"
-                                                 Name="Cardiology" LegendShape="Syncfusion.Blazor.Charts.LegendShape.Circle" Fill="#F29438">
-                                    </ChartSeries>
-                                </ChartSeriesCollection>
-                            </SfChart>
+        </div>
+
+        <!-- ============ Bottom row: Patients table + Upcoming Appointments ============ -->
+        <div class="dash-row-bottom">
+            <div class="dash-card-grid">
+                <div class="dash-card-header">
+                    <h3 class="dash-card-title">Patients</h3>
+                    <div class="dash-tabs" role="tablist" aria-label="Queue period">
+                        @foreach (var t in patientTabs)
+                        {
+                            var tabName = t;
+                            <button type="button" role="tab" aria-selected="@(activeTab == tabName)"
+                                    class="dash-tab @(activeTab == tabName ? "active" : "")"
+                                    @onclick="@(() => activeTab = tabName)">@tabName</button>
+                        }
+                    </div>
+                </div>
+                <div class="patients-grid">
+                       @if (filteredPatients.Count() == 0)
+                    {
+                        <div class="patients-empty" role="status">
+                            <strong>No patients in this @activeTab view.</strong><br />
+                            Try switching the period tabs or <button type="button" class="link-btn" @onclick=@(() => severityFilter = null)>clear the severity filter</button>.
                         </div>
+                    }
+                    <SfGrid @ref="grid"
+                            DataSource="@filteredPatients"
+                            Height="340px"
+                            Width="100%"
+                            AllowPaging="false"
+                            AllowSorting="true"
+                            GridLines="Syncfusion.Blazor.Grids.GridLine.None"
+                            RowHeight="52" AllowTextWrap="true">
+                             
+                        <GridColumns> 
+                            <GridColumn Field="Name" HeaderText="Name"  Width="110" HeaderTextAlign="TextAlign.Center" >
+                                <Template>
+                                    @{
+                                        var row = (context as PatientRow);
+                                    }
+                                    <span class="pname">
+                                        <span class="pavatar">@row.Initial</span>
+                                        @row.Name
+                                    </span>
+                                </Template>
+                            </GridColumn>
+                            <GridColumn Field="Age" HeaderText="Age" Width="80" HeaderTextAlign="TextAlign.Center">
+                                <Template>
+                                    @{
+                                        var row = (context as PatientRow);
+                                    }
+                                    @row.Age years
+                                </Template>
+                            </GridColumn>
+                            <GridColumn Field="AppointmentDate" HeaderTextAlign="TextAlign.Center" HeaderText="Date &amp; Time" Width="180" Format="d MMM yyyy · h:mm tt" Type="Syncfusion.Blazor.Grids.ColumnType.DateTime" />
+                            <GridColumn Field="Reason" Width="120" HeaderText="Appointed For" />
+                            <GridColumn HeaderText="Priority"  Width="100" HeaderTextAlign="TextAlign.Center">
+                                <Template>
+                                    @{
+                                        var prow = (context as PatientRow);
+                                        var priorityText = GetPriority(prow);
+                                    }
+                                    <span class="@GetPriorityClass(prow)" title="@priorityText">@priorityText</span>
+                                </Template>
+                            </GridColumn>
+                        <GridColumn HeaderText="Actions" Width="250" HeaderTextAlign="TextAlign.Center">
+                            <Template>
+                                @{
+                                    var arow = (context as PatientRow);
+                                }
+                                @if (arow.IsCompleted)
+                                {
+                                    <span class="status-done" title="This appointment is completed">Completed</span>
+                                }
+                                else if (arow.IsCheckedIn)
+                                {
+                                    <span class="status-checkedin" title="Patient is in consultation">In consultation</span>
+                                    <button type="button" class="row-action-btn ghost"
+                                            @onclick=@(() => CompletePatient(arow))
+                                            aria-label="Mark @arow.Name as completed">Complete</button>
+                                }
+                                else
+                                {
+                                    <button type="button" class="row-action-btn"
+                                            @onclick=@(() => CheckInPatient(arow))
+                                            aria-label="Check in @arow.Name">Check In</button>
+                                    <button type="button" class="row-action-btn ghost"
+                                            @onclick=@(() => CompletePatient(arow))
+                                            aria-label="Mark @arow.Name as completed">Complete</button>
+                                }
+                            </Template>
+                        </GridColumn>
+                        </GridColumns>
+                    </SfGrid>
+                </div>
+            </div>
+
+            <!-- Upcoming Appointments -->
+            <div class="dash-card upcoming-card">
+                <div class="dash-card-header">
+                    <h3 class="dash-card-title">Upcoming Appointments</h3>
+                    <div class="upcoming-month">
+                        <button class="nav-btn" @onclick="PrevWeek" aria-label="Previous week">‹</button>
+                        <span class="month-label">@currentMonthLabel</span>
+                        <button class="nav-btn" @onclick="NextWeek" aria-label="Next week">›</button>
                     </div>
                 </div>
+                <div class="upcoming-week">
+                    @{
+                        var hasFutureDay = weekDays.Any(d => d.Date.Date >= Today.Date);
+                    }
+                    @if (!hasFutureDay)
+                    {
+                        <div class="upcoming-empty" style="grid-column: span 7;">No upcoming days in this week.</div>
+                    }
+                    else
+                    {
+                        @for (int i = 0; i < weekDays.Count; i++)
+                        {
+                            var dayIndex = i;
+                            var d = weekDays[dayIndex];
+                            var isPast = d.Date.Date < Today.Date;
+                            if (isPast) continue;
+                            <button class="day @(selectedDayIndex == dayIndex ? "selected" : "")"
+                                    @onclick="@(() => SelectDay(dayIndex))"
+                                    aria-label="@d.Short, @d.Number"
+                                    aria-pressed="@(selectedDayIndex == dayIndex)">
+                                @d.Short
+                                <span class="dnum">@d.Number</span>
+                            </button>
+                        }
+                    }
+                </div>
+                <div class="upcoming-list">
+                    @if (upcomingAppointments.Count == 0)
+                    {
+                        <div class="upcoming-empty" role="status">
+                            <strong>No appointments for this day.</strong>
+                            Pick another day or use › to move to next week.
+                        </div>
+                    }
+                    else
+                    {
+                        <ul class="upcoming-listview" role="list">
+                            @for (var idx = 0; idx < upcomingAppointments.Count; idx++)
+                            {
+                                var a = upcomingAppointments[idx];
+                                var itemKey = idx;
+                                <li class="upcoming-item" key="@itemKey">
+                                    <div class="uavatar" aria-hidden="true">@a.Initial</div>
+                                    <div class="uinfo">
+                                        <div class="uname">@a.Name</div>
+                                        <div class="utime">@a.Time · @a.Dept</div>
+                                    </div>
+                                    <div class="appointment-actions">
+                                        @if (a.IsCheckedIn)
+                                        {
+                                            <span class="checkedin-tag" title="Patient has been checked in">✓ Checked in</span>
+                                        }
+                                        else
+                                        {
+                                            <button type="button" class="row-action-btn"
+                                                    @onclick="@(() => CheckInUpcoming(a))"
+                                                    aria-label="Check in @a.Name for @a.Dept appointment">Check-In</button>
+                                        }
+                                    </div>
+                                </li>
+                            }
+                        </ul>
+                    }
+                </div>
             </div>
         </div>
-        <div class="col-lg-4 col-md-4 col-sm-4 list-display" style="padding-right: 0px;">
-            <div class="recent-activity">
-                <SfListView Height="100%" Width="100%" TValue="Activity" ShowHeader="true" DataSource="@activities" CssClass="activity-template" HeaderTitle="Recent Activities">
-                    <ListViewTemplates TValue="Activity">
-                        <Template>
-                            <div class="activity-container @((context as Activity).Type)">
-                                <div class="activity-message"><span class="type-name">@((context as Activity).Name)</span> - <span>@((context as Activity).Message)</span></div>
-                                <span class="activity-time">@(Service.TimeSince((context as Activity).ActivityTime))</span>
-                            </div>
-                        </Template>
-                    </ListViewTemplates>
-                    <ListViewFieldSettings TValue="Activity" Text="Name" Id="Name"></ListViewFieldSettings>
-                </SfListView>
+    </div>
+     <!-- Call feedback toast -->
+    @if (callingName != null)
+    {
+        <div class="call-toast" role="status" aria-live="polite">
+            <span class="e-icons e-phone" aria-hidden="true"></span>
+            Connecting call to <strong>@callingName</strong>…
+        </div>
+    }
+    @if (showAI)
+    {
+
+        <div class="ai-panel" role="dialog" aria-label="AI assistant briefing">
+            <div class="ai-panel-header">
+                <span class="e-icons e-assist ai-panel-icon" aria-hidden="true"></span>
+                <div class="ai-panel-title">
+                    <strong>AI Briefing</strong>
+                    <span>Generated from live clinic data</span>
+                </div>
+                <button type="button" class="ai-panel-close" aria-label="Close AI panel" @onclick="@(() => showAI = false)">✕</button>
             </div>
-            <div class="doctor-availability">
-                <SfListView Height="100%" Width="100%" TValue="Doctor" ShowHeader="true" DataSource="@availableDoctors" CssClass="e-list-template">
-                    <ListViewTemplates TValue="Doctor">
-                        <HeaderTemplate>
-                            <div class="availability-title">
-                                <span class="header-text">Doctor's Availability</span><span class="all-text">
-                                    <NavLink ActiveClass="doctors" Match="NavLinkMatch.Prefix" href="doctors">View All</NavLink>
-                                </span>
-                            </div>
-                        </HeaderTemplate>
-                        <Template>
-                            <div class="availabilty-container">
-                                <div class="image-container">
-                                    <span class="doctor-image">
-                                        <img src="css/appoinment/assets/images/@((context as Doctor).Text).png" alt="doctor avatar" /><span class="availability @((context as Doctor).Availability)"></span>
-                                    </span>
-                                </div>
-                                <div class="detail-container">
-                                    <span class="doctor-name">Dr.@((context as Doctor).Name)</span>
-                                    <span class="doctor-speciality">@getSpecializationText((context as Doctor).Specialization)</span>
-                                </div>
-                            </div>
-                        </Template>
-                    </ListViewTemplates>
-                    <ListViewFieldSettings TValue="Doctor" Text="Text" Id="Text"></ListViewFieldSettings>
-                </SfListView>
+
+            <div class="ai-panel-body">
+                <div class="ai-insight">
+                    <span class="ai-insight-dot danger"></span>
+                    <strong>@CriticalPatients critical patients</strong> aged 65+ are waiting — assign to the first available doctor.
+                </div>
+                <div class="ai-insight">
+                    <span class="ai-insight-dot warning"></span>
+                    <strong>@WaitingCount patients waiting</strong> across @ConsultationCount available doctors — current load @doctorUtilization%.
+                </div>
+                <div class="ai-insight">
+                    <span class="ai-insight-dot success"></span>
+                    <strong>@CompletedCount visits completed</strong> of @TotalPatientsInPeriod in the active view — @completionRate% completion rate.
+                </div>
+                <div class="ai-insight">
+                    <span class="ai-insight-dot info"></span>
+                    Busiest day is <strong>@BusiestDay</strong> — consider opening an extra online slot.
+                </div>
+            </div>
+
+            <div class="ai-panel-footer">
+                <span>Suggested follow-ups:</span>
+                <div class="ai-suggestions">
+                    <button type="button" class="ai-suggestion-chip" @onclick="@(() => { severityFilter = "Critical"; showAI = false; })">Triage critical</button>
+                    <button type="button" class="ai-suggestion-chip" @onclick="@(() => { activeTab = "Weekly"; showAI = false; })">View weekly load</button>
+                    <button type="button" class="ai-suggestion-chip" @onclick="@(() => { searchText = ""; severityFilter = null; showAI = false; })">Clear filters</button>
+                </div>
             </div>
         </div>
-    </div>
-</div>
+    }
 }
-else{
-    <div class="planner-dashboard-skeleton">
-        <div class="appointments-skeleton">
-            <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="780px" Width="90%"></SfSkeleton><br/>
-        </div>
-        <div class="activities-skeleton">
-            @for(int i=0; i < 10; i++)
-            {
-                <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="80%"></SfSkeleton>
-                <br />
-                <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="60%"></SfSkeleton>
-                <br /><br />
-            }
+else
+{
+    <div class="dash-skeleton">
+        <div class="sk-row">
+            <div class="sk-block"></div>
+            <div class="sk-block"></div>
+            <div class="sk-block"></div>
+            <div class="sk-block"></div>
         </div>
     </div>
 }
@@ -159,89 +555,652 @@ else{
 
     [Inject]
     protected AppointmentService Service { get; set; }
-    private string dayEventCount { get; set; }
-    private string weekEventCount { get; set; }
-    private List<Appointment> appointments { get; set; } = new List<Appointment>();
 
+    [Inject]
+    protected NavigationManager Urihelper { get; set; }
+    string lastUpdated => DateTime.Now.ToString("hh:mm:ss tt");
+    private bool showAI;
 
-    private List<Activity> activities { get; set; }
-    public List<Doctor> availableDoctors { get; set; }
+    // ---- Today (live system date) ----
+    private DateTime _today = DateTime.Today;
+    private DateTime Today
+    {
+        get => _today;
+        set
+        {
+            if (value < new DateTime(1900, 1, 1)) value = new DateTime(1900, 1, 1);
+            if (value > new DateTime(2999, 12, 1)) value = new DateTime(2999, 12, 1);
+            _today = value;
+        }
+    }
+    private string currentMonthShort => Today.ToString("MMM yyyy");
+    private string currentMonthLabel => weekAnchor.ToString("MMMM");
 
-    private List<Patient> patients { get; set; }
+     public class TrendPoint
+    {
+        public int Value { get; set; }
+    }
 
-    private DateTime startDate { get; set; } = new DateTime(2020, 2, 5, 0, 0, 0, 0);
+    private List<TrendPoint> patientSpark =
+    [
+        new(){Value=10},
+        new(){Value=14},
+        new(){Value=8},
+        new(){Value=16},
+        new(){Value=18},
+        new(){Value=22},
+        new(){Value=27}
+    ];
 
-    private DateTime endDate { get; set; }
+     private void CallUpcoming(Upcoming a)
+    {
+        if (a == null) return;
+        callingName = a.Name;
+        // Hide the toast after 3 seconds
+        _ = Task.Run(async () => { await Task.Delay(3000); callingName = null; await InvokeAsync(StateHasChanged); });
+        StateHasChanged();
+    }
 
-    private DateTime firstDayOfWeek { get; set; }
-    private DateTime max { get; set; }
+    private string callingName;
 
-    private List<ChartData> chartData { get; set; }
-    private List<ChartData> chartData1 { get; set; }
-    private List<ChartData> chartData2 { get; set; }
-    private bool isDataLoaded;
+      private void StartNextConsultation()
+    {
+        var next = allPatients
+            .Where(p => p.AppointmentDate.Date == Today.Date)
+            .Where(p => !checkedInUpcomingIds.Contains(p.HospitalId) && !completedUpcomingIds.Contains(p.HospitalId))
+            .OrderBy(p => p.AppointmentDate)
+            .FirstOrDefault();
 
+        if (next != null)
+        {
+            CheckInPatient(next);
+            callingName = next.Name;   // reuse the toast as a status confirmation
+            _ = Task.Run(async () => { await Task.Delay(3000); callingName = null; await InvokeAsync(StateHasChanged); });
+        }
+        activeTab = "Daily";
+    }
 
-    protected override void OnInitialized()
+    private int CriticalPatients =>
+        Service?.Patients?
+            .Count(p => GetAge(p.DOB) >= 65)
+        ?? 0;
+
+    private int WaitingCount =>
+         // Only patients who have not been checked in / completed are actually
+         filteredPatients.Count(p => !p.IsCheckedIn && !p.IsCompleted);
+
+    private int CriticalCount =>
+        filteredPatients.Count(p => p.Age >= 60);
+
+    private int ConsultationCount =>
+        Service?.Doctors?.Count(d =>
+            d.Availability?.ToLower() == "available") ?? 0;
+
+    private int CompletedCount =>
+        // Visits actually marked completed in the active view.
+        filteredPatients.Count(p => p.IsCompleted);
+
+    private void CheckInPatient(PatientRow row)
     {
-        availableDoctors = Service.Doctors;
+        if (row == null || row.IsCheckedIn) return;
+        row.IsCheckedIn = true;
+        if (row.HospitalId > 0) checkedInUpcomingIds.Add(row.HospitalId);
+        RefreshPatientsPanels();
+    }
 
+    private void CompletePatient(PatientRow row)
+    {
+        if (row == null || row.IsCompleted) return;
+        row.IsCheckedIn = true;
+        row.IsCompleted = true;
+        if (row.HospitalId > 0)
+        {
+            checkedInUpcomingIds.Add(row.HospitalId);
+            completedUpcomingIds.Add(row.HospitalId);
+        }
+        RefreshPatientsPanels();
+    }
 
-        activities = Service.Activities;
-        patients = Service.Patients;
-        firstDayOfWeek = Service.GetWeekFirstDate(Service.StartDate);
-        max = Service.GetWeekFirstDate(Service.StartDate).AddDays(6);
-        endDate = Service.StartDate.AddDays(1);       
+    /// <summary>Re-syncs the day's upcoming list with shared state and refreshes both panels.</summary>
+    private void RefreshPatientsPanels()
+    {
+        SelectDay(selectedDayIndex);
+        grid?.Refresh();
+        StateHasChanged();
     }
 
-    private List<Appointment> GetAppoinment(List<Hospital> currentDayEvents)
+    /// <summary>Checks an upcoming-appointment patient in (list on the right).</summary>
+    private void CheckInUpcoming(Upcoming a)
     {
-        List<Appointment> apts = new List<Appointment>();
-        foreach(var eventData in currentDayEvents)
+        if (a == null || a.IsCheckedIn) return;
+        a.IsCheckedIn = true;
+        if (a.HospitalId > 0) checkedInUpcomingIds.Add(a.HospitalId);
+        RefreshPatientsPanels();
+    }
+    private SfGrid<PatientRow> grid;
+
+
+    // ---- CTA strip actions ----
+     private bool showScheduleCalendar { get; set; }
+
+    private void ToggleScheduleCalendar()
+    {
+        showScheduleCalendar = !showScheduleCalendar;
+        if (showScheduleCalendar) StateHasChanged();
+    }
+
+     private void OnScheduleDatePicked(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)
+    {
+        if (args?.Value == null) return;
+        showScheduleCalendar = false;
+        Today = args.Value.Value;
+        weekAnchor = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday);
+        BuildWeek();
+        BuildWeekAppointments();
+        BuildPatients();
+        BuildDailyAppointments();
+        BuildAppointmentTrend();
+        BuildDonut();
+        activeTab = "Weekly";
+        Urihelper.NavigateTo("schedule");
+    }
+
+    // ---- Calendar bounds: past days are disabled — only Today and forward can be picked ----
+    private DateTime calendarMin => Today.Date;
+    private int TotalPatientsInPeriod => filteredPatients.Count();
+    private int waitingShare =>
+        TotalPatientsInPeriod == 0 ? 0 : (int)Math.Round(WaitingCount * 100.0 / TotalPatientsInPeriod);
+    private int doctorUtilization =>
+        doctorCount == 0 ? 0 : (int)Math.Round((double)ConsultationCount * 100 / doctorCount);
+    private int completionRate =>
+        TotalPatientsInPeriod == 0 ? 0 : (int)Math.Round((double)CompletedCount * 100 / TotalPatientsInPeriod);
+
+        private string BusiestDay =>
+        dailyAppointments.Count == 0 ? "—" :
+        dailyAppointments.OrderByDescending(d => d.Clinic + d.Online).First().Day;
+
+    private bool IsInCurrentWeek(DateTime date)
+    {
+        var weekStart = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday).Date;
+        var weekEnd = weekStart.AddDays(7);
+        return date.Date >= weekStart && date.Date < weekEnd;
+    }
+
+    private string severityFilter { get; set; }
+
+    private void ToggleSeverity(string sev)
+        => severityFilter = severityFilter == sev ? null : sev;
+
+    private DateTime calendarMax
+    {
+        get
         {
-            var filteredPatients = patients.Where(item => item.Id.Equals(eventData.PatientId)).FirstOrDefault();
-            var filteredDoctors = availableDoctors.Where(item => item.Id.Equals(eventData.DoctorId)).FirstOrDefault();
-            if (filteredPatients != null && filteredDoctors != null)
+            var safeYear = Math.Min(Today.Year, 2998);
+            var candidate = new DateTime(safeYear, Today.Month, 1).AddMonths(7).AddDays(-1);
+            if (candidate > new DateTime(2999, 12, 31)) candidate = new DateTime(2999, 12, 31);
+            return candidate;
+        }
+    }
+
+    // ---- KPI: dynamic metrics derived from service data ----
+    private int totalPatients => Service?.Patients?.Count ?? 0;
+    private int oldPatients => Service?.Patients?.Count(p => GetAge(p.DOB) >= 40) ?? 0;
+    private int newPatients => Service?.Patients?.Count(p => GetAge(p.DOB) < 25) ?? 0;
+    private int appointmentsCount => Service?.Hospitals?.Count ?? 0;
+    private int doctorCount => Service?.Doctors?.Count ?? 0;
+
+    // Trend percentages – signed week-over-week change computed from real rows
+    private int totalPatientsTrend => PeriodChange(appointmentsThisWeek, appointmentsLastWeek);
+    private int oldPatientsTrend => PeriodChange(oldPatients, appointmentsCount);
+    private int newPatientsTrend => PeriodChange(newPatients, doctorCount);
+    private int appointmentsTrend => PeriodChange(appointmentsThisWeek, appointmentsLastWeek);
+
+    private int PeriodChange(int current, int previous)
+    {
+        var cur = Math.Max(1, current);
+        var prev = Math.Max(1, previous);
+        return Math.Clamp((int)Math.Round((cur - prev) * 100.0 / prev), -99, 99);
+    }
+
+    private bool IsInPreviousWeek(DateTime date)
+    {
+        var weekStart = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday).AddDays(-7).Date;
+        var weekEnd = weekStart.AddDays(7);
+        return date.Date >= weekStart && date.Date < weekEnd;
+    }
+
+    // ---- Daily Appointment Stats (Clinic vs Online) ----
+    public class DayAppt { public string Day { get; set; } public double Clinic { get; set; } public double Online { get; set; } }
+    private List<DayAppt> dailyAppointments = new();
+    private double dailyYMax => NiceMax(dailyAppointments.Count == 0 ? 10 : dailyAppointments.Max(d => Math.Max(d.Clinic, d.Online)));
+    private double dailyYInterval => Math.Max(1, Math.Round(dailyYMax / 4, 0));
+
+    // ---- Appointment Trend (spline) ----
+    public class DayPoint { public string Day { get; set; } public double Value { get; set; } }
+    private List<DayPoint> appointmentTrend = new();
+    private double trendYMax => NiceMax(appointmentTrend.Count == 0 ? 10 : appointmentTrend.Max(d => d.Value));
+    private double trendYInterval => Math.Max(1, Math.Round(trendYMax / 5, 0));
+
+    // ---- Donut: Patient Overview (Child/Teen/Adult/Older) ----
+    public class DonutSlice
+    {
+        public string Category { get; set; }
+        public double Value { get; set; }
+        public string Color { get; set; }
+        /// <summary>Human-readable age span this cohort covers.</summary>
+        public string AgeRange { get; set; }
+        /// <summary>Live-computed share of the total, 0-100.</summary>
+        public int Share { get; set; }
+    }
+    private List<DonutSlice> donutData = new();
+    private int donutTotal => (int)donutData.Sum(d => d.Value);
+    private DonutSlice dominantSegment => donutTotal > 0
+        ? donutData.OrderByDescending(d => d.Value).FirstOrDefault()
+        : null;
+    private int dominantShare => (int)Math.Round(dominantSegment.Value * 100.0 / Math.Max(1, donutTotal));
+
+    // ---- Upcoming appointments ----
+    public class WeekDay { public string Short { get; set; } public int Number { get; set; } public DateTime Date { get; set; } }
+    public class Upcoming { public int HospitalId { get; set; } public string Name { get; set; } public string Time { get; set; } public string Dept { get; set; } public string StatusText { get; set; } public string StatusClass { get; set; } public string Initial { get; set; } public bool IsCheckedIn { get; set; } }
+
+    private DateTime weekAnchor = DateTime.Today;
+    private List<WeekDay> weekDays = new();
+    private int selectedDayIndex = 4;
+    private List<Upcoming> upcomingAppointments = new();
+
+    private Dictionary<DateTime, List<Hospital>> upcomingByDate = new();
+
+    private void BuildWeekAppointments()
+    {
+        upcomingByDate = new Dictionary<DateTime, List<Hospital>>();
+        if (Service?.Hospitals == null) return;
+
+        foreach (var h in Service.Hospitals)
+        {
+            var date = h.StartTime.Date;
+            if (!upcomingByDate.TryGetValue(date, out var list))
             {
-                apts.Add(new Appointment(Service.GetFormatDate(eventData.StartTime, "hh:mm tt"), filteredPatients.Name, filteredDoctors.Name, eventData.Symptoms, filteredDoctors.Id));
+                list = new List<Hospital>();
+                upcomingByDate[date] = list;
             }
+            list.Add(h);
         }
-        return apts;
     }
 
-    private DateTime AddDate(DateTime date, int value)
+    private List<Upcoming> GetUpcomingForDay(int idx)
     {
-        return date.AddDays(value);
+        if (Service?.Hospitals == null || weekDays.Count == 0) return new List<Upcoming>();
+
+        var dayDate = weekDays[Math.Clamp(idx, 0, weekDays.Count - 1)].Date.Date;
+        var docsById = Service.Doctors?.ToDictionary(d => d.Id) ?? new Dictionary<int, Doctor>();
+
+        if (!upcomingByDate.TryGetValue(dayDate, out var matches) || matches == null)
+            return new List<Upcoming>();
+
+        return matches
+            .OrderBy(h => h.StartTime)
+            .Select(h =>
+            {
+                var doc = docsById.TryGetValue(h.DoctorId, out var d) ? d : null;
+                var status = (doc?.Availability ?? "busy").ToLowerInvariant();
+                return new Upcoming
+                {
+                    HospitalId = h.Id,
+                    Name = h.Name,
+                    Time = h.StartTime.ToString("h:mmtt").ToLower(),
+                    Dept = h.DepartmentName,
+                    StatusText = status == "available" ? "Online" : "Offline",
+                    StatusClass = status == "available" ? "online" : "offline",
+                    Initial = GetInitials(h.Name),
+                    IsCheckedIn = checkedInUpcomingIds.Contains(h.Id) || completedUpcomingIds.Contains(h.Id)
+                };
+            }).ToList();
     }
 
-    private string getSpecializationText(string text)
+    private void BuildWeek()
     {
-        return Service.Specializations.Where(item => item.Id.Equals(text)).FirstOrDefault().Text.ToUpper();
+        weekDays = Enumerable.Range(0, 7)
+            .Select(i =>
+            {
+                var d = weekAnchor.AddDays(i);
+                return new WeekDay { Short = d.ToString("ddd").Substring(0, 3), Number = d.Day, Date = d };
+            })
+            .ToList();
     }
 
-    private async void LoadData()
+    private void SelectDay(int idx)
     {
-        List<Hospital> currentDayEvents = Service.GetFilteredData(startDate, endDate);
-        this.appointments = this.GetAppoinment(currentDayEvents);
-        List<Hospital> currentViewEvents = Service.GetFilteredData(firstDayOfWeek, this.AddDate(startDate, 6));
-        this.dayEventCount = currentDayEvents.Count().ToString();
-        this.weekEventCount = currentViewEvents.Count().ToString();
-        List<Hospital> diabetologyData = currentViewEvents.Where(item => item.DepartmentId == 5).ToList();
-        List<Hospital> orthopaedicsData = currentViewEvents.Where(item => item.DepartmentId == 4).ToList();
-        List<Hospital> cardiologyData = currentViewEvents.Where(item => item.DepartmentId == 6).ToList();
-        chartData = Service.GetAllChartPoints(diabetologyData, firstDayOfWeek);
-        chartData1 = Service.GetAllChartPoints(orthopaedicsData, firstDayOfWeek);
-        chartData2 = Service.GetAllChartPoints(cardiologyData, firstDayOfWeek);
-        await Task.Delay(500);
-        isDataLoaded = true;
-        StateHasChanged();
+        selectedDayIndex = idx;
+        upcomingAppointments = GetUpcomingForDay(idx);
+    }
+
+    private void PrevWeek()
+    {
+        var candidate = weekAnchor.AddDays(-7);
+        if (candidate.AddDays(6).Date < Today.Date) return;
+        weekAnchor = candidate;
+        BuildWeek();
+        BuildWeekAppointments();
+        var firstFuture = weekDays.FindIndex(d => d.Date.Date >= Today.Date);
+        SelectDay(firstFuture < 0 ? 0 : firstFuture);
+    }
+
+    private void NextWeek()
+    {
+        weekAnchor = weekAnchor.AddDays(7);
+        BuildWeek();
+        BuildWeekAppointments();
+        SelectDay(0);
+    }
+
+    // ---- Patients table ----
+    public class PatientRow
+    {
+        /// <summary>Id of the underlying appointment (Service.Hospitals) — links grid row to the upcoming list.</summary>
+        public int HospitalId { get; set; }
+        public string Name { get; set; }
+        public string Initial { get; set; }
+        public int Age { get; set; }
+        public DateTime AppointmentDate { get; set; }
+        public string DateTime { get; set; }
+        public string Reason { get; set; }
+        public bool IsCheckedIn { get; set; }
+        public bool IsCompleted { get; set; }
+    }
+
+    private string[] patientTabs = new[] { "Daily", "Weekly", "Monthly", "Yearly" };
+    private string activeTab = "Daily";
+    private string searchText { get; set; } = string.Empty;
+    private bool monthPickerOpen { get; set; }
+
+    private void ToggleMonthPicker() => monthPickerOpen = !monthPickerOpen;
+
+    private void CloseMonthPicker()
+    {
+        if (monthPickerOpen) monthPickerOpen = false;
+    }
+
+    private void OnMonthPicked(DateTime? picked)
+    {
+        if (!picked.HasValue) { monthPickerOpen = false; return; }
+        Today = picked.Value;
+        monthPickerOpen = false;
+        weekAnchor = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday);
+        BuildWeek();
+        BuildWeekAppointments();
+        BuildPatients();
+        BuildDailyAppointments();
+        BuildAppointmentTrend();
+        BuildDonut();
+        var firstFuture = weekDays.FindIndex(d => d.Date.Date >= Today.Date);
+        SelectDay(firstFuture < 0 ? 0 : firstFuture);
+    }
+
+    private List<PatientRow> allPatients = new();
+    private IEnumerable<PatientRow> filteredPatients
+    {
+        get
+        {
+            IEnumerable<PatientRow> q = activeTab switch
+            {
+                "Daily"   => allPatients.Where(p => p.AppointmentDate.Date == Today.Date),
+                "Weekly"  => allPatients.Where(p => IsInCurrentWeek(p.AppointmentDate)),
+                "Monthly" => allPatients.Where(p => p.AppointmentDate.Year == Today.Year && p.AppointmentDate.Month == Today.Month),
+                "Yearly"  => allPatients.Where(p => p.AppointmentDate.Year == Today.Year),
+                _         => allPatients
+            };
+
+            if (!string.IsNullOrWhiteSpace(searchText))
+                q = q.Where(p => p.Name.Contains(searchText, StringComparison.OrdinalIgnoreCase) || p.Reason.Contains(searchText, StringComparison.OrdinalIgnoreCase));
+
+            // Apply the shared check-in / completed state (tracked by appointment Id)
+            var result = q.OrderByDescending(p => p.AppointmentDate).ToList();
+            result.ForEach(ApplyRowState);
+            return result;
+        }
     }
 
-    protected override void OnAfterRender(bool firstRender)
+     private int appointmentsThisWeek =>
+        allPatients.Count(p => IsInCurrentWeek(p.AppointmentDate));
+    private int appointmentsLastWeek =>
+        allPatients.Count(p => IsInPreviousWeek(p.AppointmentDate));
+
+    // ---- Build dynamic datasets from service ----
+    private void BuildPatients()
+    {
+        if (Service?.Hospitals == null) { allPatients = new List<PatientRow>(); return; }
+
+        var patientsById = Service.Patients?
+            .GroupBy(p => p.Id)
+            .ToDictionary(g => g.Key, g => g.First())
+            ?? new Dictionary<int, Patient>();
+
+        allPatients = Service.Hospitals
+            .OrderBy(h => h.StartTime)
+            .Select(h =>
+            {
+                patientsById.TryGetValue(h.PatientId, out var patient);
+                var matched = patient ?? Service.Patients?.FirstOrDefault(p => p.Name == h.Name);
+                return new PatientRow
+                {
+                    HospitalId = h.Id,
+                    Name = h.Name,
+                    Initial = GetInitials(h.Name),
+                    Age = matched == null ? 0 : GetAge(matched.DOB),
+                    AppointmentDate = h.StartTime,
+                    DateTime = h.StartTime.ToString("d MMM yyyy · h:mm tt"),
+                    Reason = h.Disease
+                };
+            })
+            .ToList();
+    }
+
+    /// <summary>Single source of truth for check-in / completed state per appointment Id.</summary>
+    private readonly HashSet<int> checkedInUpcomingIds = new();
+    private readonly HashSet<int> completedUpcomingIds = new();
+
+    /// <summary>Applies tracked check-in / completed state to a grid row.</summary>
+    private void ApplyRowState(PatientRow row)
+    {
+        if (row == null) return;
+        row.IsCheckedIn = checkedInUpcomingIds.Contains(row.HospitalId);
+        row.IsCompleted = completedUpcomingIds.Contains(row.HospitalId);
+    }
+
+    private void BuildDailyAppointments()
+    {
+        if (Service?.Hospitals == null) return;
+        var byDow = Service.Hospitals
+            .GroupBy(h => h.StartTime.DayOfWeek)
+            .ToDictionary(g => g.Key, g => g.Count());
+
+        var order = new[]
+        {
+            DayOfWeek.Saturday, DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday,
+            DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday
+        };
+        var labels = new[] { "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri" };
+
+        dailyAppointments = order.Select((dow, i) =>
+        {
+            var total = byDow.TryGetValue(dow, out var c) ? c : 0;
+            var clinic = Math.Round(total * 0.6, 0);
+            var online = total - clinic;
+            return new DayAppt { Day = labels[i], Clinic = clinic, Online = online };
+        }).ToList();
+    }
+
+    private void BuildAppointmentTrend()
+    {
+        if (Service?.Hospitals == null) return;
+        var byDow = Service.Hospitals
+            .GroupBy(h => h.StartTime.DayOfWeek)
+            .ToDictionary(g => g.Key, g => g.Count());
+
+        var order = new[]
+        {
+            DayOfWeek.Saturday, DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday,
+            DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday
+        };
+        var labels = new[] { "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri" };
+
+        appointmentTrend = order.Select((dow, i) => new DayPoint
+        {
+            Day = labels[i],
+            Value = byDow.TryGetValue(dow, out var c) ? c : 0
+        }).ToList();
+    }
+
+    private void BuildDonut()
+    {
+        if (Service?.Patients == null) return;
+        var groups = Service.Patients
+            .GroupBy(p => GetAgeBucket(GetAge(p.DOB)))
+            .ToDictionary(g => g.Key, g => g.Count());
+
+        var palette = new (string Cat, string Color, string Rng)[]
+        {
+            ("Child",  "#0a8a8a", "0–12 yrs"),
+            ("Teen",   "#f59e0b", "13–19 yrs"),
+            ("Adult",  "#ec4899", "20–39 yrs"),
+            ("Older",  "#a855f7", "40+ yrs"),
+        };
+        var temp = palette.Select(p => new DonutSlice
+        {
+            Category = p.Cat,
+            Color = p.Color,
+            AgeRange = p.Rng,
+            Value = groups.TryGetValue(p.Cat, out var c) ? c : 0
+        }).ToList();
+
+    
+        var total = temp.Sum(d => d.Value);
+        foreach (var d in temp) d.Share = total > 0 ? (int)Math.Round(d.Value * 100.0 / total) : 0;
+        donutData = temp;
+
+        if (donutTotal == 0)
+        {
+            donutData = palette.Select(p => new DonutSlice
+            {
+                Category = p.Cat,
+                Color = p.Color,
+                AgeRange = p.Rng,
+                Value = 1
+            }).ToList();
+        }
+    }
+
+    // ---- Helpers ----
+    private int GetAge(DateTime? dob)
+    {
+        if (!dob.HasValue) return 0;
+        var age = Today.Year - dob.Value.Year;
+        if (dob.Value.Date > Today.AddYears(-age)) age--;
+        return Math.Max(0, age);
+    }
+
+    private string GetAgeBucket(int age) => age switch
+    {
+        <= 12 => "Child",
+        <= 19 => "Teen",
+        <= 39 => "Adult",
+        _ => "Older"
+    };
+
+    private string GetInitials(string name)
+    {
+        if (string.IsNullOrWhiteSpace(name)) return "?";
+        var parts = name.Trim().Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length == 1) return parts[0].Substring(0, Math.Min(2, parts[0].Length)).ToUpperInvariant();
+        return (parts[0][0].ToString() + parts[1][0].ToString()).ToUpperInvariant();
+    }
+
+    private string FormatCount(int n)
+    {
+        if (n >= 1000) return (n / 1000.0).ToString("0.#") + "K";
+        return n.ToString();
+    }
+
+    private double NiceMax(double v)
+    {
+        if (v <= 0) return 10;
+        var pow = Math.Pow(10, Math.Floor(Math.Log10(v)));
+        var n = v / pow;
+        double nice = n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10;
+        return nice * pow;
+    }
+
+     private string GetStatus(PatientRow row)
+        {
+            if (row == null)
+                return "Waiting";
+
+            if (row.Age >= 65)
+                return "Critical";
+
+            if (row.Age >= 40)
+                return "Moderate";
+
+            return "Waiting";
+        }
+
+        private string GetStatusClass(PatientRow row)
+        {
+            if (row == null)
+                return "waiting-chip";
+
+            if (row.Age >= 65)
+                return "critical-chip";
+
+            if (row.Age >= 40)
+                return "warning-chip";
+
+            return "waiting-chip";
+        }
+
+        private string GetPriority(PatientRow row)
+        {
+            if (row == null) return "Normal";
+            if (row.Age >= 65) return "Urgent";
+            if (row.Age >= 40) return "High";
+            return "Normal";
+        }
+
+        private string GetPriorityClass(PatientRow row)
+        {
+            if (row == null) return "priority-normal-chip";
+            if (row.Age >= 65) return "priority-urgent-chip";
+            if (row.Age >= 40) return "priority-high-chip";
+            return "priority-normal-chip";
+        }
+
+    // ---- Lifecycle ----
+    private bool isDataLoaded;
+    //private SfGrid<PatientRow> grid;
+
+    protected override void OnInitialized()
+    {
+        weekAnchor = Today.AddDays(-(int)Today.DayOfWeek + (int)DayOfWeek.Monday);
+        BuildWeek();
+        BuildWeekAppointments();
+        BuildPatients();
+        BuildDailyAppointments();
+        BuildAppointmentTrend();
+        BuildDonut();
+        var firstFuture = weekDays.FindIndex(d => d.Date.Date >= Today.Date);
+        selectedDayIndex = firstFuture < 0 ? 0 : firstFuture;
+        SelectDay(selectedDayIndex);
+    }
+
+    protected async override Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            LoadData();
+            await Task.Delay(120);
+            isDataLoaded = true;
+            StateHasChanged();
         }
     }
-}
\ No newline at end of file
+
+    public void Dispose() { }
+}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/Doctors.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/Doctors.razor
index 4bf5933..ab7ffec 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/Doctors.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/Doctors.razor
@@ -9,71 +9,237 @@
 <div class="deleted-msg">
     <SfMessage Severity="MessageSeverity.Success" Visible=@Service.ShowDeleteMsg>The Doctor's details have been deleted successfully.</SfMessage>
 </div>
-<div id="doctors" class="doctors-wrapper">
-    <header>
-        <div class="module-title">
-            <div class="title">DOCTORS LIST</div>
-            <div class="underline"></div>
-        </div>
-        <div class="add-doctor" @onclick="@onAddDoctor">
-            <div class="e-icon-add e-icons"></div>
-            <div class="add-doctor-label">Add New</div>
+<div id="doctors" class="doctors-dashboard">
+
+    <div class="page-header">
+
+        <div>
+            <h2>Doctors</h2>
+            <p class="page-subtitle">
+                Manage doctors, specialties and schedules
+            </p>
         </div>
-    </header>
-    <div class="specialization-detail-wrapper">
-        <div class="specialization-types">
-            <SfDropDownList @ref="specObj" TItem="Specialization" TValue="string" Width="200px" ShowClearButton="true" DataSource="@specializationData" Placeholder="Select a Specialization" PopupHeight="230px">
-                <DropDownListEvents TItem="Specialization" TValue="string" ValueChange="@onSpecializationChange"></DropDownListEvents>
-                <DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>
-                <DropDownListTemplates TItem="Specialization">
-                    <ItemTemplate>
-                        <div class="specialist-value">
-                            <span class="@((context as Specialization).Id)" style="background: @((context as Specialization).Color)"></span>
-                            <span class="name">@((context as Specialization).Text)</span>
+
+        <SfButton CssClass="e-primary"
+                  IconCss="e-icons e-add"
+                  @onclick="onAddDoctor">
+            Add Doctor
+        </SfButton>
+
+    </div>
+
+    <div class="stats-section">
+
+        <SfCard CssClass="metric-card doctors-card" ID="doctor-card">
+            <CardContent>
+                <div class="metric-wrapper">
+                    <div>
+                        <div class="metric-title">
+                            Total Doctors
                         </div>
-                    </ItemTemplate>
-                    <ValueTemplate>
-                        <div class="specialist-value department-value">
-                            <span class="@((context as Specialization).Id)" style="background: @((context as Specialization).Color)"></span>
-                            <span class="name">@((context as Specialization).Text)</span>
+                        <div class="metric-number">
+                            @TotalDoctors
                         </div>
-                    </ValueTemplate>
-                </DropDownListTemplates>
-            </SfDropDownList>
-            <SfButton CssClass="e-normal" @onclick="@onAddDoctor" IsPrimary="true">Add New Doctor</SfButton>
-        </div>
-        <div class="specialist-display">
-            @foreach (var data in filteredDoctors)
-            {
-                <div class="e-cards specialist-item" id="Specialist_@(data.Id)" @onclick="@(e => onSpecialistClick(e, data.Id))">
-                    <div class="e-card-content">
-                        <div class="specialist-image">
-                            <img class="profile" src="css/appoinment/assets/images/@(data.Text).png" alt="doctor" />
-                            <span class="availability @data.Availability"></span>
+                    </div>
+
+                    <div class="metric-icon e-icons e-user"></div>
+                </div>
+            </CardContent>
+        </SfCard>
+
+        <SfCard CssClass="metric-card available-card" ID="available-card">
+            <CardContent>
+                <div class="metric-wrapper">
+                    <div>
+                        <div class="metric-title">
+                            Available
+                        </div>
+                        <div class="metric-number">
+                            @AvailableDoctors
                         </div>
                     </div>
-                    <div class="specialist-detail">
-                        <div class="name">
-                            Dr. @data.Name
+
+                    <div class="metric-icon e-icons e-check"></div>
+                </div>
+            </CardContent>
+        </SfCard>
+
+        <SfCard CssClass="metric-card department-card" ID="department-card">
+            <CardContent>
+                <div class="metric-wrapper">
+                    <div>
+                        <div class="metric-title">
+                            Departments
                         </div>
-                        <div class="education">
-                            @(data.Education != null ? data.Education.ToUpper(): "")
+                        <div class="metric-number">
+                            @specializationData.Count
                         </div>
-                        <div class="specialist-experience">
-                            <div class="specialization">
-                                <span class="label-text">Designation</span>
-                                <span class="specialization-text">@data.Designation</span>
+                    </div>
+
+                    <div class="metric-icon e-icons e-folder"></div>
+                </div>
+            </CardContent>
+        </SfCard>
+
+    </div>
+    <div class="toolbar">
+
+        <SfTextBox Placeholder="Search doctor..."
+                   Width="320px"
+                   @bind-Value="searchText">
+        </SfTextBox>
+
+        <SfDropDownList TValue="string"
+                        TItem="Specialization"
+                        DataSource="@specializationData"
+                        Width="250px"
+                        Placeholder="All Specializations"
+                        ShowClearButton="true">
+
+            <DropDownListEvents TValue="string"
+                                TItem="Specialization"
+                                ValueChange="onSpecializationChange">
+            </DropDownListEvents>
+
+            <DropDownListFieldSettings
+                Text="Text"
+                Value="Id">
+            </DropDownListFieldSettings>
+
+        </SfDropDownList>
+
+    </div>
+
+    <div class="doctor-grid">
+
+        @foreach (var doctor in DisplayDoctors)
+        {
+               <div class="doctor-card"
+                    @onclick="@(e => onSpecialistClick(e, doctor.Id))">
+
+                    <div class="doctor-status">
+
+                        <span class="
+                            availability-pill
+                            @GetStatusClass(doctor)">
+
+                                <span class="status-dot"></span>
+
+                                @GetDoctorStatus(doctor)
+
+                            </span>
+
+                    </div>
+
+                    <div class="doctor-header">
+
+                        <img class="doctor-avatar"
+                            src="css/appointment/assets/images/@(doctor.Text).png"
+                            alt="Dr. @doctor.Name">
+
+                        <div class="doctor-profile">
+                            <h3 class="doctorhip">
+                                Dr. @doctor.Name
+                            </h3>
+                            <h6 class="doctorhip">
+                                @Service.GetSpecializationText(doctor.Specialization)
+                            </h6>
+                            <div class="education">
+                                @doctor.Education
                             </div>
-                            <div class="experience">
-                                <span class="label-text">Experience</span>
-                                <span class="specialization-text">@data.Experience</span>
+                        </div>
+                    </div>
+
+
+                    <div class="doctor-operational-data">
+
+                        <div class="metric">
+
+                            <span class="metric-label">
+                                Today
+                            </span>
+
+                            <span class="metric-value">
+                                @GetTodayAppointmentCount(doctor.Id) Appointments
+                            </span>
+
+                        </div>
+
+
+                        <div class="metric">
+
+                            <span class="metric-label">
+                                Next Slot
+                            </span>
+
+                            <span class="metric-value">
+                                @GetNextAvailableSlot(doctor)
+                            </span>
+
+                        </div>
+                        </div>
+
+                    <div class="workload-section">
+
+                        <div class="workload-header">
+
+                            <span>Workload</span>
+
+                            <span>@GetWorkloadPercent(doctor)%</span>
+
+                        </div>
+
+                        <div class="workload-bar">
+
+                            <div class="workload-fill"
+                                style="width:@GetWorkloadPercent(doctor)%;background:@GetWorkloadColor(GetWorkloadPercent(doctor));">
                             </div>
+
                         </div>
+
                     </div>
-                </div>
-            }
-        </div>
+
+                    <div class="doctor-meta">
+
+                        <div>
+
+                            <div class="label">
+                                Experience
+                            </div>
+
+                            <div class="value">
+                                @doctor.Experience
+                            </div>
+
+                        </div>
+
+                        <div>
+
+                            <div class="label">
+                                Designation
+                            </div>
+
+                            <div class="value">
+                                @doctor.Designation
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div class="doctor-actions">
+
+                        <SfButton IsPrimary="true">
+                            View
+                        </SfButton>
+
+                    </div>
+            </div>
+
+        }
+
     </div>
+
 </div>
 
 <SfDialog Target="body" Width="390px" CssClass="new-doctor-dialog" IsModal="true" @bind-Visible="@isShowNewDialog" ShowCloseIcon="true" Header="@editHeader">
@@ -137,8 +303,7 @@
     </ChildContent>
 </SfDialog>
 }
-else
-{
+else{
     <div class="planner-doctor-skeleton">
         <div class="doctor-title-skeleton">
             <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="20%" Width="80%"></SfSkeleton>
@@ -146,46 +311,43 @@ else
             <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="20%" Width="60%"></SfSkeleton>
             <br /><br />
         </div>
-        @for (int i = 0; i < 3; i++)
-        {
-            <div class="container">
-                <div class="sub-container1">
-                    <div class="doctor-list-skeleton">
-                        <div class="doct-img">
-                            <SfSkeleton CssClass="listProfile" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Circle Width="76%" Height="73%"></SfSkeleton>
-                        </div>
-                        <div class="doct-details">
-                            <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br />
-                            <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br />
-                            <SfSkeleton CssClass="distCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="86%"></SfSkeleton>
-                        </div>
+    @for(int i=0; i<3; i++){
+        <div class="container">
+            <div class="sub-container1">
+                <div class="doctor-list-skeleton">
+                    <div class="doct-img">
+                        <SfSkeleton CssClass="listProfile" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Circle Width="76%" Height="73%"></SfSkeleton>
+                    </div>
+                    <div class="doct-details">
+                        <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br/>
+                        <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br/>
+                        <SfSkeleton CssClass="distCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="86%"></SfSkeleton>
                     </div>
                 </div>
-                <div class="sub-container2">
-                    <div class="doctor-list-skeleton">
-                        <div class="doct-img">
-                            <SfSkeleton CssClass="listProfile" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Circle Width="77%" Height="84%"></SfSkeleton>
-                        </div>
-                        <div class="doct-details">
-                            <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br />
-                            <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br />
-                            <SfSkeleton CssClass="distCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="86%"></SfSkeleton>
-                        </div>
+            </div>
+            <div class="sub-container2">
+                <div class="doctor-list-skeleton">
+                    <div class="doct-img">
+                        <SfSkeleton CssClass="listProfile" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Circle Width="77%" Height="84%"></SfSkeleton>
+                    </div>
+                    <div class="doct-details">
+                        <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br/>
+                        <SfSkeleton CssClass="listCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="115%"></SfSkeleton><br/>
+                        <SfSkeleton CssClass="distCtn" Shape=Syncfusion.Blazor.Notifications.SkeletonType.Rectangle Height="12%" Width="86%"></SfSkeleton>
                     </div>
                 </div>
             </div>
-        }
+        </div>
+    }
     </div>
     <div class="planner-dashboard-skeleton device-skeleton">
         <div class="activities-skeleton">
-            @for (int i = 0; i < 10; i++)
+            @for(int i=0; i < 10; i++)
             {
                 <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="80%"></SfSkeleton>
                 <br />
                 <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="60%"></SfSkeleton>
-                <br />
-
-                <br />
+                <br /><br />
             }
         </div>
     </div>
@@ -212,13 +374,125 @@ else
     private List<TextIdData> dutyTimings { get; set; }
 
     private bool isDataLoaded;
+    private string searchText = "";
 
-    protected override void OnInitialized()
+    private int GetTodayAppointmentCount(int doctorId)
     {
-        this.specializationData = Service.Specializations;
-        this.experienceData = Service.Experience;
+        return Service.Hospitals?
+            .Count(x =>
+                x.DoctorId == doctorId &&
+                x.StartTime.Date == DateTime.Today) ?? 0;
     }
 
+    private IEnumerable<Doctor> DisplayDoctors =>
+        filteredDoctors?.Where(x =>
+            string.IsNullOrWhiteSpace(searchText) ||
+            x.Name.Contains(searchText,
+                StringComparison.OrdinalIgnoreCase) ||
+            x.Specialization.Contains(searchText,
+                StringComparison.OrdinalIgnoreCase))
+        ?? Enumerable.Empty<Doctor>();
+
+        private int GetDoctorDailyCapacity(Doctor doctor)
+        {
+            if (string.IsNullOrEmpty(doctor.StartHour) ||
+                string.IsNullOrEmpty(doctor.EndHour))
+            {
+                return 16;
+            }
+
+            TimeSpan start = TimeSpan.Parse(doctor.StartHour);
+            TimeSpan end = TimeSpan.Parse(doctor.EndHour);
+
+            var hours = (end - start).TotalHours;
+
+            return (int)(hours * 2);
+        }
+        private int GetWorkloadPercent(Doctor doctor)
+        {
+            int appointments =
+                GetTodayAppointmentCount(doctor.Id);
+
+            int capacity =
+                GetDoctorDailyCapacity(doctor);
+
+            if (capacity <= 0)
+                return 0;
+
+            return Math.Min(
+                (appointments * 100) / capacity,
+                100);
+        }
+
+        private string GetDoctorStatus(Doctor doctor)
+        {
+            return doctor.Availability switch
+            {
+                "busy" => "Busy",
+                "away" => "Away",
+                _ => "Available"
+            };
+        }
+      private string GetStatusClass(Doctor doctor)
+        {
+            return doctor.Availability;
+        }
+
+        private string GetNextAvailableSlot(Doctor doctor)
+        {
+            var appointments =
+                Service.Hospitals
+                    .Where(x =>
+                        x.DoctorId == doctor.Id &&
+                        x.StartTime.Date == DateTime.Today)
+                    .OrderBy(x => x.StartTime)
+                    .ToList();
+
+            if (!appointments.Any())
+            {
+                return DateTime.Today
+                    .Add(TimeSpan.Parse(doctor.StartHour))
+                    .ToString("hh:mm tt");
+            }
+
+            DateTime nextSlot =
+                appointments.Last().EndTime;
+
+            DateTime doctorEnd =
+                DateTime.Today
+                .Add(TimeSpan.Parse(doctor.EndHour));
+
+            if (nextSlot >= doctorEnd)
+                return "Full";
+
+            return nextSlot.ToString("hh:mm tt");
+        }
+
+        private string GetWorkloadColor(int workload)
+        {
+            if (workload >= 90)
+                return "#dc2626";
+
+            if (workload >= 60)
+                return "#f59e0b";
+
+            return "#16a34a";
+        }
+    private int TotalDoctors =>
+        Service.Doctors.Count;
+
+    private int AvailableDoctors =>
+    Service.Doctors.Count(x => x.Availability == "available");
+
+    private int BusyDoctors =>
+    Service.Doctors.Count(x =>
+        x.Availability == "busy");
+
+    private int AwayDoctors =>
+    Service.Doctors.Count(x =>
+        x.Availability == "away");
+
+
     private void onAddDoctor(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
     {
         doctorEditModel = new Doctor { Name = null, Gender = "Male", Mobile = null, Email = null, Education = null, Designation = null };
@@ -303,8 +577,12 @@ else
         isDataLoaded = true;
         StateHasChanged();
     }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnInitialized()
+    {
+        this.specializationData = Service.Specializations;
+        this.experienceData = Service.Experience;
+    }
+    protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
         {
@@ -312,7 +590,7 @@ else
         }
         if (Service.ShowDeleteMsg && isDataLoaded)
         {
-            await Task.Delay(1000);
+            Task.Delay(1000).Wait();
             Service.ShowDeleteMsg = false;
             StateHasChanged();
         }
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/DoctorsDetails.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/DoctorsDetails.razor
index 4c7e007..48e2c00 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/DoctorsDetails.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Doctors/DoctorsDetails.razor
@@ -7,62 +7,244 @@
 @inject NavigationManager UriHelper
 @implements IDisposable;
 
-<link href="css/appoinment/doctordetails.css" rel="stylesheet" />
+<link href="css/appointment/doctordetails.css" rel="stylesheet" />
 <div class="doctor-details-container">
-    <header>
-        <div class="detail-header-title">
-            <span class="back-icon icon-previous" @onclick="@onBackIconClick"></span>
-            <div class="module-title">
-                <div class='title'>DOCTOR DETAILS</div>
-                <div class='underline'></div>
+   <header id="doctorHeader">
+
+        <div id="headerLeft">
+
+            <button id="backButton"
+                    type="button"
+                    aria-label="Go back"
+                    @onclick="onBackIconClick">
+
+                <span class="icon-previous"></span>
+
+            </button>
+
+            <div id="headerTitleContainer">
+
+                <h1 id="pageTitle">
+                    Doctor Details
+                </h1>
+
+                <div id="titleUnderline"></div>
+
             </div>
+
         </div>
-        <div class='doctor-detail'>
-            <SfButton Disabled="@((activeData != null) ? false : true)" CssClass="e-small delete-details" @onclick="@onDoctorDelete">Delete</SfButton>
-            <SfButton Disabled="@((activeData != null) ? false : true)" CssClass="e-small edit-details" @onclick="@onDoctorEdit">Edit</SfButton>
+
+        <div id="headerActions">
+
+            <SfButton Disabled="@(! (activeData != null))"
+                    CssClass="delete-details"
+                    aria-label="Delete Doctor"
+                    @onclick="onDoctorDelete">
+
+                Delete
+
+            </SfButton>
+
+            <SfButton Disabled="@(! (activeData != null))"
+                    CssClass="edit-details"
+                    aria-label="Edit Doctor Profile"
+                    @onclick="onDoctorEdit">
+
+                Edit
+
+            </SfButton>
+
         </div>
+
     </header>
-    @if (activeData != null) { 
-    <div class="active-doctor">
-        <div class="active-doctor-image">
-            <img class="value" src="css/appoinment/assets/images/@(activeData.Text).png" alt="doctor" />
-            <span class='availability @(activeData.Availability)'></span>
-        </div>
-        <div class="active-doctor-info">
-            <div class="basic-detail info-field-container">
-                <div class="name">Dr. @activeData.Name</div>
-                <div class="education">@(activeData.Education != null ? activeData.Education.ToUpper(): "")</div>
-                <div class="designation">@activeData.Designation</div>
-            </div>
-            <div class="speciality-detail info-field-container">
-                <div class="label-text">Specialization</div>
-                <div class="specialization">@getSpecializationText</div>
-            </div>
-            <div class="work-experience info-field-container">
-                <div class="label-text">Experience</div>
-                <div class="experience">@activeData.Experience</div>
-            </div>
-            <div class="work-availability info-field-container">
-                <div class="label-text">Availability</div>
-                <div class="available-days">@getAvailability</div>
-            </div>
-            <div class="contact-info info-field-container">
-                <div class="label-text">Mobile</div>
-                <div class="mobile">@activeData.Mobile</div>
-            </div>
-        </div>
-        <div class="work-days-container">
-            <div class="work-days-content">
-                <div class='work-day-item'>
+    @if (activeData != null) {
+        <main id="doctor-page">
+
+            <!-- HERO -->
+
+           
+            <SfCard ID="doctorHeroCard">
+
+                <CardContent>
+
+                    <section id="doctorHeroSection">
+
+                        <div id="doctorAvatarContainer">
+
+                            <img id="doctorAvatar"
+                                src="css/appointment/assets/images/@(activeData.Text).png"
+                                alt="Doctor profile name"/>
+
+                        </div>
+
+                        <div id="doctorInfo">
+
+                            <h1 id="doctorName">
+                                Dr. @activeData.Name
+                            </h1>
+
+                            <div id="doctorDepartment">
+                                @getSpecializationText
+                            </div>
+
+                            <div id="doctorEducation">
+                                @activeData.Education
+                            </div>
+
+                            <div id="doctorDesignation">
+                                @activeData.Designation
+                            </div>
+
+                        </div>
+
+                        <div id="doctorStatusArea">
+
+                            <span id="doctorStatus">
+                                @activeData.Availability
+                            </span>
+
+                        </div>
+
+                    </section>
+
+                </CardContent>
+
+            </SfCard>
+
+            <!-- KPI -->
+
+            <section id="kpiSection">
+
+                <SfCard ID="experienceCard">
+                    <CardContent>
+
+                        <div id="experienceValue">
+                            @activeData.Experience
+                        </div>
+
+                        <div id="experienceLabel">
+                            Experience
+                        </div>
+
+                    </CardContent>
+                </SfCard>
+
+                <SfCard ID="workingDaysCard">
+                    <CardContent>
+
+                        <div id="workingDaysValue">
+                            @WorkingDaysCount
+                        </div>
+
+                        <div id="workingDaysLabel">
+                            Working Days
+                        </div>
+
+                    </CardContent>
+                </SfCard>
+
+                <SfCard ID="contactCard">
+                    <CardContent>
+
+                        <div id="contactValue">
+                            @activeData.Mobile
+                        </div>
+
+                        <div id="contactLabel">
+                            Contact
+                        </div>
+
+                    </CardContent>
+                </SfCard>
+
+            </section>
+
+            <!-- DETAILS -->
+
+            <section id="detailsSection">
+
+                <SfCard ID="professionalCard">
+
+                    <CardContent>
+
+                        <h3>Professional Information</h3>
+
+                        <div class="detail-row">
+                            <label>Department</label>
+                            <span>@getSpecializationText</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Designation</label>
+                            <span>@activeData.Designation</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Experience</label>
+                            <span>@activeData.Experience</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Education</label>
+                            <span>@activeData.Education</span>
+                        </div>
+
+                    </CardContent>
+
+                </SfCard>
+
+                <SfCard ID="contactInfoCard">
+
+                    <CardContent>
+
+                        <h3>Contact Information</h3>
+
+                        <div class="detail-row">
+                            <label>Mobile</label>
+                            <span>@activeData.Mobile</span>
+                        </div>
+
+                        <div class="detail-row">
+                            <label>Email</label>
+                            <span>@activeData.Email</span>
+                        </div>
+
+                    </CardContent>
+
+                </SfCard>
+
+            </section>
+
+            <!-- SCHEDULE -->
+
+            <SfCard ID="scheduleCard">
+
+                <CardContent>
+
+                    <h3 id="scheduleTitle">
+                        Weekly Schedule
+                    </h3>
+
                     @foreach (var data in activeData.WorkDays)
                     {
-                        <div class="day-name">@(data.Day.Substring(0, 1).ToUpper())@data.Day.Substring(1)</div>
-                        <div class="day-break-hours @(data.State)">@(getBreakDetails(data))</div>
+                        <div class="schedule-row">
+
+                            <span class="day-column">
+                                @(char.ToUpper(data.Day[0]) + data.Day.Substring(1))
+                            </span>
+
+                            <span class="time-column @data.State">
+                                @getBreakDetails(data)
+                            </span>
+
+                        </div>
                     }
-                </div>
-            </div>
-        </div>
-    </div>
+
+                </CardContent>
+
+            </SfCard>
+
+        </main>
     }
 </div>
 
@@ -148,6 +330,7 @@
     private Doctor activeData { get; set; }
     private string getSpecializationText { get; set; }
     private string getAvailability { get; set; }
+    private int WorkingDaysCount =>activeData?.AvailableDays?.Length ?? 0;
 
     protected override void OnInitialized()
     {
@@ -206,7 +389,7 @@
         }
         onBackIconClick(args);
     }
-    
+
     private void onDoctorEdit(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
     {
         editVisible = true;
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Patients/Patients.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Patients/Patients.razor
index bf25188..ac3a1b8 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Patients/Patients.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Patients/Patients.razor
@@ -22,36 +22,113 @@
         </div>
     </header>
     <div class="patients-detail-wrapper">
-        <div class="patient-operations">
-            <div id="searchTemplate" class="search-wrapper planner-patient-search">
-                <div class="e-input-group patient-search" role="search">
-                    <input id="schedule_searchbar" class="e-input" name="input" type="text" @bind-value="@searchValue"
-                           placeholder="Search Patient" @oninput="@patientSearch" />
-                    <span class="e-clear-icon" aria-label="close" role="button" @onclick="clearText"></span>
-                    <span id="schedule_searchbutton" class="e-input-group-icon search-icon e-icons" tabindex="-1"
-                          title="Search" aria-label="search"></span>
-                </div>
+        <div id="patientStatsContainer">
+            <SfCard ID="totalPatientsCard">
+                <CardContent>
+                    <div class="patient-title">Total Patients</div>
+                    <div class="patient-value">@TotalPatients</div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard ID="newPatientsCard">
+                <CardContent>
+                    <div class="patient-title">New Patients</div>
+                    <div class="patient-value">@NewPatients</div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard ID="followupPatientsCard">
+                <CardContent>
+                    <div class="patient-title">Follow Up</div>
+                    <div class="patient-value">@FollowUpPatients</div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard ID="recoveryCard">
+                <CardContent>
+                    <div class="patient-title">Recovery Rate</div>
+                    <div class="patient-value">
+                        @RecoveryPercentage%
+                    </div>
+                </CardContent>
+            </SfCard>
+
+        </div>
+        <div id="patientToolbar">
+           
+            <div id="filterSection">
+                
+                <SfButton ID="addPatientButton"
+                        IsPrimary="true"
+                        @onclick="onAddPatient">
+
+                    Add New Patient
+
+                </SfButton>
             </div>
-           <SfButton CssClass="e-normal add-details" @onclick="@onAddPatient" IsPrimary="true">
-                Add
-                New Patient
-            </SfButton>
+
         </div>
         <div class="patient-display">
-            <SfGrid ID="Grid" @ref="gridObj" DataSource="@filteredPatients">
-                <GridEvents TValue="Patient" RowSelected="onRowSelected" OnRecordDoubleClick="onDoubleClick"></GridEvents>
-                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" Mode="EditMode.Dialog">
-                </GridEditSettings>
-                <GridColumns>
+                    <SfGrid ID="PatientsGrid"
+                        @ref="gridObj"
+                        DataSource="@filteredPatients"
+                        AllowPaging="true"
+                        AllowSorting="true"
+                        AllowFiltering="true"
+                        RowHeight="60">
+                    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowEditOnDblClick="false" Mode="EditMode.Dialog">
+                    </GridEditSettings>
+                    <GridPageSettings PageSize="10"></GridPageSettings>
+
+                    <GridEvents TValue="Patient"
+                                RowSelected="onRowSelected"
+                                OnRecordDoubleClick="onDoubleClick">
+                    </GridEvents>
+
+                    <GridColumns>
                     <GridColumn IsPrimaryKey="true" Field=@nameof(Patient.Id) Width="50" HeaderText="ID" TextAlign="@TextAlign.Left"></GridColumn>
-                    <GridColumn HeaderText="Name" TextAlign="@TextAlign.Left" Width="100">
+                    <GridColumn HeaderText="Patient Name" Width="120">
                         <Template>
-                            <span class="patient-name" @onclick="@(e => onPatientClick(e, (context as Patient).Id))">@((context as Patient).Name)</span>
+                            @{
+                                var patient = context as Patient;
+                            }
+
+                            <div id="patientInfoWrapper">
+                                <div>
+                                    <div id="patientNameText">
+                                        @patient.Name
+                                    </div>
+                                </div>
+                            </div>
                         </Template>
                     </GridColumn>
+                    <GridColumn HeaderText="Status"
+                            Width="120">
+
+                    <Template>
+
+                        @{
+                            var patient = context as Patient;
+
+                            string status = patient.Id % 3 == 0
+                                ? "Recovery"
+                                : patient.Id % 2 == 0
+                                ? "Follow-Up"
+                                : "New";
+                        }
+
+                        <SfChip ID="statusChip">
+
+                            @status
+
+                        </SfChip>
+
+                    </Template>
+
+                </GridColumn>
                     <GridColumn Field=@nameof(Patient.Gender) HeaderText="Gender" TextAlign="@TextAlign.Left" Width="80"></GridColumn>
                     <GridColumn Field=@nameof(Patient.BloodGroup) HeaderText="Blood Group" TextAlign="@TextAlign.Left" Width="100"></GridColumn>
-                    <GridColumn Field=@nameof(Patient.Symptoms) HeaderText="Symptoms" TextAlign="@TextAlign.Left" Width="150"></GridColumn>
+                    <GridColumn Field=@nameof(Patient.Symptoms) HeaderText="Symptoms" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip" TextAlign="@TextAlign.Left" Width="250"></GridColumn>
                     <GridColumn Field=@nameof(Patient.Mobile) HeaderText="Mobile Number" TextAlign="@TextAlign.Left" Width="100"></GridColumn>
                     <GridColumn Field=@nameof(Patient.Email) HeaderText="Email" TextAlign="@TextAlign.Left" Width="120"></GridColumn>
                 </GridColumns>
@@ -113,7 +190,7 @@
 </SfDialog>
 }
 
-@if(IsShowPatientEditDialog) { 
+@if(IsShowPatientEditDialog) {
 <SfDialog @ref="dialogObj" Target="body" Width="390px" CssClass="new-patient-dialog" IsModal="true" @bind-Visible="@IsShowPatientEditDialog" ShowCloseIcon="true" Header="@patientHeader">
     <ChildContent>
         <DialogAnimationSettings Effect="DialogEffect.Zoom"></DialogAnimationSettings>
@@ -228,11 +305,19 @@ else
     private bool isDataLoaded;
     private bool showDeleteMsg { get; set; }
 
+    private int TotalPatients;
+    private int NewPatients;
+    private int FollowUpPatients;
+    private int MalePatients;
+    private int FemalePatients;
+    private double RecoveryPercentage;
+
     protected override void OnInitialized()
     {
         filteredPatients = Service.Patients;
-        this.bloodGroupData = Service.BloodGroups;
+       this.bloodGroupData = Service.BloodGroups;
         this.doctorsData = Service.Doctors;
+        CalculateDashboardMetrics();
     }
 
     private void onAddPatient(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
@@ -360,17 +445,43 @@ else
         dialogObj = null;
         maskObj = null;
     }
+    private void CalculateDashboardMetrics()
+    {
+        TotalPatients = Service.Patients?.Count ?? 0;
+
+        FollowUpPatients = Service.WaitingLists?
+            .Select(x => x.PatientId)
+            .Distinct()
+            .Count() ?? 0;
+
+        MalePatients = Service.Patients?
+            .Count(x => x.Gender == "Male") ?? 0;
+
+        FemalePatients = Service.Patients?
+            .Count(x => x.Gender == "Female") ?? 0;
+
+        NewPatients = Service.Patients?
+            .Count(x => x.DOB >= DateTime.Now.AddMonths(-1))
+            ?? 0;
+
+        RecoveryPercentage =
+            TotalPatients == 0
+                ? 0
+                : Math.Round(
+                    ((double)(TotalPatients - FollowUpPatients)
+                    / TotalPatients) * 100, 1);
+    }
 
     private async void LoadData()
-    {   
+    {
         this.EditData = Service.Patients[0];
         this.patientEditModel = new Patient();
-        await Task.Delay(100);
+        await Task.Delay(500);
         isDataLoaded = true;
         StateHasChanged();
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
         {
@@ -378,9 +489,9 @@ else
         }
         if (this.showDeleteMsg && isDataLoaded)
         {
-            await Task.Delay(2000);
+            Task.Delay(1000).Wait();
             this.showDeleteMsg = false;
             StateHasChanged();
         }
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Preference/Preference.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Preference/Preference.razor
index 6a65d85..4e3f573 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Preference/Preference.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Preference/Preference.razor
@@ -8,51 +8,86 @@
 <div id="preference" class='preference-container'>
     <header>
         <div class="module-title">
-            <div class='title'>PREFERENCE</div>
+            <h1 class='title'>Preferences</h1>
             <div class='underline'></div>
         </div>
+        <p class="preference-intro">Tune the calendar for the way your clinic works.</p>
+        <div class="preference-actions">
+            <SfButton CssClass="e-normal" @onclick="@resetPreferences">Reset defaults</SfButton>
+            <SfButton IsPrimary="true" @onclick="@savePreferences" Disabled="@(!IsConfigurationValid)">Save preferences</SfButton>
+        </div>
     </header>
-    <div class="control-container">
+    @if (!string.IsNullOrWhiteSpace(settingsMessage))
+    {
+        <SfMessage Severity="@settingsMessageSeverity">@settingsMessage</SfMessage>
+    }
+    <div class="active-preferences" aria-live="polite">
+        <div class="active-heading"><span class="e-icons e-check"></span><div><strong>Active configuration</strong><span>These values will be used by Schedule after saving.</span></div></div>
+        <div class="configuration-values">
+            <div><span class="summary-label">View</span><strong>@selectedView</strong></div>
+            <div><span class="summary-label">First day</span><strong>@getDayOfWeekText()</strong></div>
+            <div><span class="summary-label">Hours</span><strong>@selectedStartHour - @selectedEndHour</strong></div>
+            <div><span class="summary-label">Slots</span><strong>@timeInterval min</strong></div>
+            <div><span class="summary-label">Color by</span><strong>@selectedCategory</strong></div>
+        </div>
+    </div>
+    <div class="preference-section">
+        <div class="section-heading">
+            <span class="section-icon e-icons e-settings"></span>
+            <div><h2>Calendar display</h2><p>Choose how the schedule opens each day.</p></div>
+        </div>
+        <div class="control-container">
         <div class='label-text'>Default View</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='CurrentView' @bind-Value="@selectedView" Width="335px" DataSource="@views">
+        <SfDropDownList CssClass='preference-drop-down' ID='CurrentView' aria-label="Default View" @bind-Value="@selectedView" Width="335px" DataSource="@views">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onViewChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
+        </div>
+        <div class="control-container">
+        <div class='label-text'>First Day of the Week</div>
+        <SfDropDownList CssClass='preference-drop-down' ID='FirstDayOfWeek' aria-label="First Day of the Week" @bind-Value="@selectedDayOfWeek" Width="335px" DataSource="@dayOfWeeks">
+            <DropDownListEvents TItem="TextValueNumericData" TValue="int?" ValueChange="onFirstDayChange"></DropDownListEvents>
+            <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
+        </SfDropDownList>
+        </div>
     </div>
-    <div class="control-container">
+    <div class="preference-section">
+        <div class="section-heading"><span class="section-icon e-icons e-clock"></span><div><h2>Working hours</h2><p>Set the visible clinic hours and booking rhythm.</p></div></div>
+        <div class="control-container">
         <div class='label-text'>Calendar Start Time</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='CalendarStart' @bind-Value="@selectedStartHour" Width="335px" DataSource="@startHours">
+        <SfDropDownList CssClass='preference-drop-down' ID='CalendarStart' aria-label="Calendar Start Time" @bind-Value="@selectedStartHour" Width="335px" DataSource="@startHours">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onStartHourChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
-    </div>
-    <div class="control-container">
+        </div>
+        <div class="control-container">
         <div class='label-text'>Calendar End Time</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='CalendarEnd' @bind-Value="@selectedEndHour" Width="335px" DataSource="@endHours">
+        <SfDropDownList CssClass='preference-drop-down' ID='CalendarEnd' aria-label="Calendar End Time" @bind-Value="@selectedEndHour" Width="335px" DataSource="@endHours">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onEndhourChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
-    </div>
-    <div class="control-container">
+        </div>
+        @if (!IsWorkingHoursValid)
+        {
+            <div class="preference-validation" role="alert">Calendar end time must be later than the start time.</div>
+        }
+        <div class="control-container">
         <div class='label-text'>Slot Duration</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='Duration' @bind-Value="@timeInterval" Width="335px" DataSource="@timeSlots">
+        <SfDropDownList CssClass='preference-drop-down' ID='Duration' aria-label="Slot Duration" @bind-Value="@timeInterval" Width="335px" DataSource="@timeSlots">
             <DropDownListEvents TItem="TextValueNumericData" TValue="int?" ValueChange="onDurationChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
+        </div>
     </div>
-    <div class="control-container">
+    <div class="preference-section">
+        <div class="section-heading"><span class="section-icon e-icons e-palette"></span><div><h2>Appointment appearance</h2><p>Choose how resources are distinguished on the schedule.</p></div></div>
+        <div class="control-container">
         <div class='label-text'>Booking Color</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='BookingColor' @bind-Value="@selectedCategory" Width="335px" DataSource="@colorCategory">
+        <SfDropDownList CssClass='preference-drop-down' ID='BookingColor' aria-label="Booking Color" @bind-Value="@selectedCategory" Width="335px" DataSource="@colorCategory">
             <DropDownListEvents TItem="TextValueData" TValue="string" ValueChange="onColorChange"></DropDownListEvents>
             <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
         </SfDropDownList>
-    </div>
-    <div class="control-container">
-        <div class='label-text'>First Day of the Week</div>
-        <SfDropDownList CssClass='preference-drop-down' ID='FirstDayOfWeek' @bind-Value="@selectedDayOfWeek" Width="335px" DataSource="@dayOfWeeks">
-            <DropDownListEvents TItem="TextValueNumericData" TValue="int?" ValueChange="onFirstDayChange"></DropDownListEvents>
-            <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
-        </SfDropDownList>
+        </div>
     </div>
 </div>
 }
@@ -72,7 +107,7 @@ else
                 <br/><br/>
             }
         </div>
-    </div>    
+    </div>
 }
 
 @code{
@@ -91,6 +126,19 @@ else
     private int? timeInterval { get; set; }
     private int? selectedDayOfWeek { get; set; }
     private bool isDataLoaded;
+    private string settingsMessage;
+    private MessageSeverity settingsMessageSeverity = MessageSeverity.Info;
+
+    private bool IsWorkingHoursValid =>
+        TimeSpan.TryParse(selectedStartHour, out var start) &&
+        TimeSpan.TryParse(selectedEndHour, out var end) && start < end;
+
+    private bool IsConfigurationValid => IsWorkingHoursValid && timeInterval.HasValue && timeInterval.Value > 0;
+
+    private string getDayOfWeekText()
+    {
+        return dayOfWeeks?.FirstOrDefault(day => day.Value == selectedDayOfWeek)?.Text ?? "Sunday";
+    }
 
     protected override void OnInitialized()
     {
@@ -103,31 +151,62 @@ else
 
     private void onViewChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.CurrentView = args.Value;
+        selectedView = args.Value;
     }
     private void onStartHourChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.Calendar.Start = args.Value;
+        selectedStartHour = args.Value;
     }
     private void onEndhourChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.Calendar.End = args.Value;
+        selectedEndHour = args.Value;
     }
     private void onColorChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, TextValueData> args)
     {
-        Service.CalendarSettings.BookingColor = (string)args.Value;
+        selectedCategory = args.Value;
     }
     private void onDurationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, TextValueNumericData> args)
     {
-        Service.CalendarSettings.Interval = (int)args.Value;
+        timeInterval = args.Value;
     }
     private void onFirstDayChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, TextValueNumericData> args)
     {
-        Service.CalendarSettings.FirstDayOfWeek = (int)args.Value;
+        selectedDayOfWeek = args.Value;
     }
 
-    private async void LoadData()
-    {   
+    private void savePreferences(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    {
+        if (!IsConfigurationValid)
+        {
+            settingsMessageSeverity = MessageSeverity.Error;
+            settingsMessage = "Review the calendar hours and slot duration before saving.";
+            return;
+        }
+
+        Service.CalendarSettings.CurrentView = selectedView;
+        Service.CalendarSettings.Calendar.Start = selectedStartHour;
+        Service.CalendarSettings.Calendar.End = selectedEndHour;
+        Service.CalendarSettings.Interval = timeInterval.Value;
+        Service.CalendarSettings.BookingColor = selectedCategory;
+        Service.CalendarSettings.FirstDayOfWeek = selectedDayOfWeek ?? 0;
+        settingsMessageSeverity = MessageSeverity.Success;
+        settingsMessage = "Preferences saved. Open Schedule to use the updated calendar settings.";
+    }
+
+    private void resetPreferences(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+    {
+        selectedView = "Week";
+        selectedStartHour = "08:00";
+        selectedEndHour = "21:00";
+        timeInterval = 60;
+        selectedCategory = "Doctors";
+        selectedDayOfWeek = 0;
+        settingsMessageSeverity = MessageSeverity.Info;
+        settingsMessage = "Default preferences restored. Select Save preferences to apply them.";
+    }
+
+    private async Task LoadData()
+    {
         this.dayOfWeeks = Service.DayOfWeekList;
         this.selectedView = Service.CalendarSettings.CurrentView;
         this.selectedStartHour = Service.CalendarSettings.Calendar.Start;
@@ -135,16 +214,16 @@ else
         this.selectedCategory = Service.CalendarSettings.BookingColor;
         this.timeInterval = Service.CalendarSettings.Interval;
         this.selectedDayOfWeek = Service.CalendarSettings.FirstDayOfWeek;
-        await Task.Delay(100);
+        await Task.Delay(500);
         isDataLoaded = true;
-        StateHasChanged();
+        await InvokeAsync(StateHasChanged);
     }
 
-    protected override void OnAfterRender(bool firstRender)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            LoadData();
+            await LoadData();
         }
     }
 }
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Schedule/Schedule.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Schedule/Schedule.razor
index d86bf53..d8e5be6 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Schedule/Schedule.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Pages/Schedule/Schedule.razor
@@ -5,113 +5,301 @@
 @using Microsoft.JSInterop;
 @implements IDisposable;
 
-@if(isDataLoaded){
-<div class="planner-calendar">
-    <div class="drag-sample-wrapper droppable">
-        <div class="col-lg-9 col-md-9 col-sm-9" style="padding: 0px">
-            <div class="schedule-container e-droppable">
-                <SfSchedule ID="schedule" TValue="Hospital" @ref="scheduleObj" Width="100%" Height="800px" EnableAutoRowHeight="true" CssClass="doctor-appointment-planner" ShowWeekend="false" StartHour="@startHour" EndHour="@endHour" @bind-SelectedDate="@currentDate" WorkDays="@workDay" FirstDayOfWeek="@calendarDayOfWeek" @bind-CurrentView="@sceduleView">
-                    <ScheduleEvents TValue="Hospital" OnPopupOpen="OnPopupOpen" OnPopupClose="OnPopupClose" OnActionBegin="OnActionBegin"></ScheduleEvents>
-                    <ScheduleWorkHours Start="08:00" End="21:00"></ScheduleWorkHours>
-                    <ScheduleEventSettings DataSource="@scheduleEventData" ResourceColorField="@resourceColorField" AllowEditFollowingEvents="@editUpcoming">
-                        <ScheduleField>
-                            <FieldSubject Name="Name"></FieldSubject>
-                            <FieldStartTime Name="StartTime" Title="From"></FieldStartTime>
-                            <FieldEndTime Name="EndTime" Title="To"></FieldEndTime>
-                            <FieldDescription Name="Symptoms" Title="Symptoms"></FieldDescription>
-                        </ScheduleField>
-                    </ScheduleEventSettings>
-                    <ScheduleTimeScale Enable="true" Interval="@this.viewInterval"></ScheduleTimeScale>
-                    <ScheduleResources>
-                        <ScheduleResource TItem="Specialization" TValue="int?" DataSource="@specialistCategory" Field="DepartmentId" Title="Department" Name="Departments" TextField="Text" IdField="DepartmentId" ColorField="Color"></ScheduleResource>
-                        <ScheduleResource TItem="Doctor" TValue="int" DataSource="@resourceDataSource" Query="@queryData" Field="DoctorId" Title="Consultation" Name="Doctors" TextField="Name" IdField="Id" ColorField="Color" GroupIDField="DepartmentId" WorkDaysField="AvailableDays" StartHourField="StartHour" EndHourField="EndHour"></ScheduleResource>
-                    </ScheduleResources>
-                    <ScheduleViews>
-                        <ScheduleView Option="@View.Day"></ScheduleView>
-                        <ScheduleView Option="@View.Week"></ScheduleView>
-                        <ScheduleView Option="@View.Month"></ScheduleView>
-                        <ScheduleView Option="@View.TimelineDay">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                        <ScheduleView Option="@View.TimelineWeek">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                        <ScheduleView Option="@View.TimelineWorkWeek">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                        <ScheduleView Option="@View.TimelineMonth">
-                            <ScheduleViewGroup EnableCompactView="false" Resources="@resourceGroup"></ScheduleViewGroup>
-                        </ScheduleView>
-                    </ScheduleViews>
-                    <ScheduleTemplates>
-                        <DateHeaderTemplate>
-                            <div class="e-custom-date-header date-text" title="@(getDateHeaderText((context as TemplateContext).Date))">@(getDateHeaderText((context as TemplateContext).Date).ToUpper())</div>
-                        </DateHeaderTemplate>
-                    </ScheduleTemplates>
-                </SfSchedule>
-            </div>
+<a href="#schedule-main" class="skip-link">Skip to main content</a>
+
+@if (loadFailed)
+{
+    <div class="planner-calendar" id="schedule-main" role="alert" aria-live="assertive">
+        <div class="schedule-error">
+            <span class="e-icons e-warning" aria-hidden="true"></span>
+            <span>We couldn't load the schedule. Please refresh the page or try again in a moment.</span>
         </div>
-        <div class="col-lg-3 col-md-3 col-sm-3 treeview-container-wrapper">
-            <div class="treeview-container">
-                <div>
-                    <SfDropDownList @ref="ddlObj" Placeholder="Choose Specialist" Width="220px" TItem="Doctor" PopupHeight="auto" DataSource="@resourceDataSource" TValue="int?" CssClass="planner-dropdown" ShowClearButton="true">
-                        <DropDownListEvents TItem="Doctor" TValue="int?" ValueChange="onValueChange"></DropDownListEvents>
-                        <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
-                        <DropDownListTemplates TItem="Doctor">
-                            <ItemTemplate>
-                                <div class="specialist-item">
-                                    <img class="value" src="css/appoinment/assets/images/@((context as Doctor).Text).png" alt="doctor" />
-                                    <div class="doctor-details">
-                                        <div class="name">Dr.@((context as Doctor).Name)</div>
-                                        <div class="designation">@((context as Doctor).Designation)</div>
-                                    </div>
-                                </div>
-                            </ItemTemplate>
-                            <FooterTemplate>
-                                <div class="add-doctor">
-                                    <div class="e-icon-add e-icons"></div><div class="add-doctor-text">
-                                        <NavLink Match="NavLinkMatch.Prefix" href="@($"doctors")">Add New Doctor</NavLink>
-                                    </div>
-                                </div>
-                            </FooterTemplate>
-                        </DropDownListTemplates>
-                    </SfDropDownList>
-                </div>
-                <div class="title-container">
-                    <h2 class="title-text">Waiting List</h2>
-                </div>
-            <SfTreeView TValue="WaitingList" LoadOnDemand="false" CssClass="treeview-external-drag" AllowDragAndDrop="true">
-                <TreeViewFieldsSettings Id="Id" Text="Name" DataSource="@waitingList"></TreeViewFieldsSettings>
-                <TreeViewEvents TValue="WaitingList" OnNodeDragStop="NodeDragStop"></TreeViewEvents>
-                <TreeViewTemplates TValue="WaitingList">
-                    <NodeTemplate>
-                        <div id="waiting">
-                            <div id="waitdetails">
-                                <div id="waitlist">@((context as WaitingList).Name)</div>
-                                <div id="event-time">@(getEventTime((context as WaitingList)))</div>
-                                <div id="waitcategory">
-                                    @(getDepartmentName((context as WaitingList).DepartmentId)) - @(getTreatmentDetail((context as WaitingList)))
+    </div>
+}
+else if (isDataLoaded)
+{
+    <div class="planner-calendar" id="schedule-main" tabindex="-1">
+
+        <header class="appointment-header">
+            <div>
+                <h1 class="appointment-title">Appointment Schedule</h1>
+                <p class="appointment-subtitle">
+                    Coordinate appointments, doctor availability and waiting queue
+                </p>
+            </div>
+
+            <div class="header-actions">
+                <SfButton CssClass="outline-btn"
+                          IconCss="e-icons e-refresh"
+                          OnClick="ResetSchedule"
+                          aria-label="Reset schedule filters">
+                    Reset
+                </SfButton>
+
+                <SfButton CssClass="primary-btn"
+                          IconCss="e-icons e-plus"
+                          OnClick="CreateAppointment"
+                          aria-label="Create new appointment">
+                    New Appointment
+                </SfButton>
+            </div>
+        </header>
+
+        <!-- KPI Metrics -->
+        <section class="dashboard-cards" aria-label="Key performance indicators">
+
+            <SfCard CssClass="dashboard-card" ID="today-appointments-card">
+                <CardContent>
+                    <span class="card-title">Today's Appointments</span>
+                    <div class="card-body">
+                        <div class="icon-box appointment-icon" aria-hidden="true">
+                            <span class="e-icons e-timeline-week"></span>
+                        </div>
+                        <div class="card-info">
+                            <h2>@TodayAppointments</h2>
+                            <span class="trend @(TodayTrendDirection)" aria-label="@TodayTrendAriaLabel">
+                                <span class="e-icons @(TodayTrendDirection == "up" ? "e-arrow-up" : TodayTrendDirection == "down" ? "e-arrow-down" : "e-horizontal-line")" aria-hidden="true"></span>
+                                @TodayTrendText vs. yesterday
+                            </span>
+                        </div>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+         <SfCard CssClass="dashboard-card capacity-card" ID="current-doctor-card">
+                <CardContent>
+                    <span class="card-title">Capacity Utilization</span>
+                    <div class="card-body">
+                        <div class="icon-box utilization-icon">
+                            <span class="e-icons e-chart"></span>
+                        </div>
+
+                        <div class="card-info">
+                            <h2>@CapacityUtilization%</h2>
+                            <span class="trend @CapacityStatusClass">
+                                @CapacityStatus
+                            </span>
+                        </div>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="dashboard-card" ID="waiting-queue-card">
+                <CardContent>
+                    <span class="card-title">Waiting Queue</span>
+                    <div class="card-body">
+                        <div class="icon-box waiting-icon" aria-hidden="true">
+                            <span class="e-icons e-clock"></span>
+                        </div>
+                        <div class="card-info">
+                            <h2>@PendingCount</h2>
+                            <div class="wait-prediction">
+
+                                    Estimated Wait
+
+                                    <strong>
+                                        @PredictedWaitMinutes min
+                                    </strong>
+
                                 </div>
-                            </div>
-                            <div id="item-icon-container">
-                                <span class="item-icon icon-reorder"></span>
-                            </div>
+                            <span class="trend @(WaitingTrendDirection)" aria-label="@WaitingTrendAriaLabel">
+                                <span class="e-icons @(WaitingTrendDirection == "up" ? "e-arrow-up" : WaitingTrendDirection == "down" ? "e-arrow-down" : "e-horizontal-line")" aria-hidden="true"></span>
+                                @WaitingTrendText vs. yesterday
+                            </span>
                         </div>
-                    </NodeTemplate>
-                </TreeViewTemplates>
-            </SfTreeView>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+            <SfCard CssClass="dashboard-card" ID="confirmed-card">
+                <CardContent>
+                    <span class="card-title">Confirmed (this week)</span>
+                    <div class="card-body">
+                        <div class="icon-box department-icon" aria-hidden="true">
+                            <span class="e-icons e-check"></span>
+                        </div>
+                        <div class="card-info">
+                            <h2>@ConfirmedCount</h2>
+                            <span class="trend flat">across @DepartmentCount departments</span>
+                        </div>
+                    </div>
+                </CardContent>
+            </SfCard>
+
+
+        </section>
+
+        <!-- Live region for status changes (a11y) -->
+        <div class="sr-only" aria-live="polite" aria-atomic="true">@LiveStatusAnnouncement</div>
+
+        <div class="appointment-layout droppable">
+
+            <div class="scheduler-section" style="padding: 0">
+                <div class="schedule-container e-droppable">
+
+                    <div class="planner-toolbar" role="search" aria-label="Schedule filters">
+
+                        <SfDropDownList TValue="int?"
+                                        TItem="Doctor"
+                                        DataSource="@resourceDataSource"
+                                        Placeholder="Doctor"
+                                        Value="@selectedDoctorId"
+                                        ValueChanged="@(async (int? v) => await OnDoctorChanged(v))"
+                                        aria-label="Filter by doctor">
+                            <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
+                        </SfDropDownList>
+
+                        <SfDropDownList TValue="int?"
+                                        TItem="Specialization"
+                                        DataSource="@specialistCategory"
+                                        Placeholder="Department"
+                                        Value="@selectedDepartmentId"
+                                        ValueChanged="@(async (int? v) => await OnDepartmentChanged(v))"
+                                        aria-label="Filter by department">
+                            <DropDownListFieldSettings Text="Text" Value="DepartmentId"></DropDownListFieldSettings>
+                        </SfDropDownList>
+                    </div>
+
+                    @if (scheduleEventData != null && scheduleEventData.Count > 0)
+                    {
+                        <div class="schedule-legend">
+
+                            <span class="legend-item">
+                                🟢 Confirmed
+                            </span>
+
+                            <span class="legend-item">
+                                🟡 Waiting
+                            </span>
+
+                            <span class="legend-item">
+                                🟣 Follow-up
+                            </span>
+
+                            <span class="legend-item">
+                                🔴 Urgent
+                            </span>
+
+                        </div>
+                        <SfSchedule ID="schedule" TValue="Hospital" @ref="scheduleObj" Width="100%" Height="700" CssClass="doctor-appointment-planner" ShowWeekend="false" StartHour="@startHour" EndHour="@endHour" @bind-SelectedDate="@currentDate" WorkDays="@workDay" FirstDayOfWeek="@calendarDayOfWeek" @bind-CurrentView="@sceduleView">
+                            <ScheduleEvents TValue="Hospital" OnPopupOpen="OnPopupOpen" OnPopupClose="OnPopupClose" OnActionBegin="OnActionBegin"></ScheduleEvents>
+                            <ScheduleWorkHours Start="08:00" End="21:00"></ScheduleWorkHours>
+                            <ScheduleEventSettings DataSource="@scheduleEventData" ResourceColorField="@resourceColorField" AllowEditFollowingEvents="@editUpcoming">
+                                <ScheduleField>
+                                    <FieldSubject Name="Name"></FieldSubject>
+                                    <FieldStartTime Name="StartTime" Title="From"></FieldStartTime>
+                                    <FieldEndTime Name="EndTime" Title="To"></FieldEndTime>
+                                    <FieldDescription Name="Symptoms" Title="Symptoms"></FieldDescription>
+                                </ScheduleField>
+                            </ScheduleEventSettings>
+                            <ScheduleTimeScale Enable="true" Interval="@this.viewInterval"></ScheduleTimeScale>
+                            <ScheduleResources>
+                                <ScheduleResource TItem="Specialization" TValue="int?" DataSource="@specialistCategory" Field="DepartmentId" Title="Department" Name="Departments" TextField="Text" IdField="DepartmentId" ColorField="Color"></ScheduleResource>
+                                <ScheduleResource TItem="Doctor" TValue="int" DataSource="@resourceDataSource" Query="@queryData" Field="DoctorId" Title="Consultation" Name="Doctors" TextField="Name" IdField="Id" ColorField="Color" GroupIDField="DepartmentId" WorkDaysField="AvailableDays" StartHourField="StartHour" EndHourField="EndHour"></ScheduleResource>
+                            </ScheduleResources>
+                            <ScheduleViews>
+                                <ScheduleView Option="@View.Day"></ScheduleView>
+                                <ScheduleView Option="@View.Week"></ScheduleView>
+                                <ScheduleView Option="@View.Month"></ScheduleView>
+                            </ScheduleViews>
+                            <ScheduleTemplates>
+                                <DateHeaderTemplate>
+                                    <div class="e-custom-date-header date-text" title="@(getDateHeaderText((context as TemplateContext).Date))">@(getDateHeaderText((context as TemplateContext).Date).ToUpper())</div>
+                                </DateHeaderTemplate>
+                            </ScheduleTemplates>
+                        </SfSchedule>
+                    }
+                    else
+                    {
+                        <div class="schedule-empty" role="status">
+                            <div class="empty-icon e-icons e-calendar" aria-hidden="true"></div>
+                            <h3>No appointments match your filters</h3>
+                            <p>Try adjusting the doctor or department, or clear the search to see the full schedule.</p>
+                            <SfButton CssClass="primary-btn" IconCss="e-icons e-refresh" OnClick="ResetSchedule">Reset filters</SfButton>
+                        </div>
+                    }
+                </div>
             </div>
+
+            <aside class="appointment-sidebar" aria-label="Schedule tools and status">
+
+                <SfCard CssClass="sidebar-card">
+                    <CardHeader Title="Calendar"></CardHeader>
+                    <CardContent>
+                        <SfCalendar TValue="DateTime"
+                                    @bind-Value="currentDate">
+                        </SfCalendar>
+                    </CardContent>
+                </SfCard>
+                <SfCard CssClass="sidebar-card ai-card">
+
+                    <CardContent>
+
+                        <span class="card-title">
+                            AI Recommendations
+                        </span>
+
+                        <div class="recommendation-item">
+
+                            <span class="e-icons e-warning"></span>
+
+                            Queue expected to increase by
+                            30% after lunch.
+
+                        </div>
+
+                        <div class="recommendation-item">
+
+                            Suggested Action:
+
+                            Assign Dr. Laura.
+
+                        </div>
+
+                    </CardContent>
+
+                </SfCard>
+
+                <SfCard CssClass="sidebar-card status-card" ID="status-card">
+                    <CardContent>
+
+                        <span class="card-title">
+                            Doctor Utilization
+                        </span>
+
+                        @foreach(var doctor in DoctorUtilizations)
+                        {
+                            <div class="status-row">
+
+                                <span>@doctor.Name</span>
+
+                                <strong>@doctor.Utilization%</strong>
+
+                            </div>
+                        }
+
+                    </CardContent>
+                    
+                </SfCard>
+
+            </aside>
         </div>
     </div>
-</div>
 }
-else{
-    <div class="planner-dashboard-skeleton">
-        <div class="appointments-skeleton">
-            <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="780px" Width="90%"></SfSkeleton><br/>
+else
+{
+    <div class="planner-calendar" id="schedule-main" tabindex="-1" aria-busy="true" aria-live="polite">
+        <div class="appointment-header">
+            <div>
+                <h1 class="appointment-title">Appointment Schedule</h1>
+            </div>
+        </div>
+        <div class="appointments-skeleton" aria-label="Loading schedule">
+            <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="780px" Width="90%"></SfSkeleton>
+            <br />
         </div>
-        <div class="activities-skeleton">
-            @for(int i=0; i < 10; i++)
+        <div class="activities-skeleton" aria-hidden="true">
+            @for (int i = 0; i < 10; i++)
             {
                 <SfSkeleton Shape="Syncfusion.Blazor.Notifications.SkeletonType.Rectangle" Height="3%" Width="80%"></SfSkeleton>
                 <br />
@@ -155,25 +343,173 @@ else{
     private List<Doctor> resourceDataSource { get; set; }
 
     private List<WaitingList> waitingList { get; set; }
+    private string waitingListSearch { get; set; } = string.Empty;
+    private int? waitingListDepartmentId { get; set; }
 
+    // Bound filter values
+    private int? selectedDoctorId { get; set; }
+    private int? selectedDepartmentId { get; set; }
+
+    // Yesterday snapshot for trend deltas
+    private int YesterdayAppointments { get; set; }
+    private int YesterdayWaiting { get; set; }
+
+    // a11y live announcement
+    private string LiveStatusAnnouncement { get; set; } = string.Empty;
+    private bool loadFailed { get; set; } = false;
 
     private Query queryData { get; set; }
     private List<Doctor> activeDoctorData { get; set; }
     private bool isDataLoaded;
     private int? draggedItemID = null;
+
+    private int ConfirmedCount =>
+        scheduleEventData?.Count(x =>
+            !x.IsBlock &&
+            x.Name != "Break Time" &&
+            x.Name != "Off Work") ?? 0;
+
+    private int PendingCount =>
+        waitingList?.Count ?? 0;
+
+    private int DoctorCount =>
+        resourceDataSource?.Count ?? 0;
+
+    private int DoctorCountActive =>
+        resourceDataSource?.Count(d => d.WorkDays != null && d.WorkDays.Any(w => w.Enable)) ?? 0;
+
+    private int TodayAppointments =>
+        scheduleEventData?.Count(x =>
+            !x.IsBlock &&
+            x.Name != "Break Time" &&
+            x.Name != "Off Work" &&
+            x.StartTime.Date == currentDate.Date) ?? 0;
+
+    private int DepartmentCount =>
+        specialistCategory?.Count ?? 0;
+    private int TotalAvailableSlots =>
+    DoctorCountActive * 20;
+
+private double CapacityUtilization =>
+    TotalAvailableSlots == 0
+        ? 0
+        : Math.Round(
+            (double)TodayAppointments /
+            TotalAvailableSlots * 100);
+
+private string CapacityStatus =>
+    CapacityUtilization switch
+    {
+        >= 100 => "Overbooked",
+        >= 90 => "Busy",
+        >= 70 => "Healthy",
+        _ => "Available"
+    };
+
+private string CapacityStatusClass =>
+    CapacityUtilization >= 90 ? "danger" :
+    CapacityUtilization >= 70 ? "success" :
+    "info";
+    private int TodayDelta => TodayAppointments - YesterdayAppointments;
+    private int WaitingDelta => PendingCount - YesterdayWaiting;
+private int ForecastQueue =>
+    PendingCount + (int)Math.Ceiling(PendingCount * 0.4);
+    private string TodayTrendDirection =>
+        TodayDelta > 0 ? "up" : TodayDelta < 0 ? "down" : "flat";
+    private string WaitingTrendDirection =>
+        WaitingDelta > 0 ? "up" : WaitingDelta < 0 ? "down" : "flat";
+
+    private string TodayTrendText =>
+        TodayDelta == 0
+            ? "No change"
+            : (TodayDelta > 0 ? $"+{TodayDelta}" : TodayDelta.ToString());
+
+    private string WaitingTrendText =>
+        WaitingDelta == 0
+            ? "No change"
+            : (WaitingDelta > 0 ? $"+{WaitingDelta}" : WaitingDelta.ToString());
+
+    private string TodayTrendAriaLabel =>
+        $"{TodayAppointments} appointments today, {TodayTrendText} compared to yesterday";
+    private string WaitingTrendAriaLabel =>
+        $"{PendingCount} waiting, {WaitingTrendText} compared to yesterday";
+public string Status { get; set; }
+
+private class DoctorUsage
+{
+    public string Name { get; set; } = string.Empty;
+    public int Utilization { get; set; }
+}
+
+private IEnumerable<DoctorUsage> DoctorUtilizations =>
+    resourceDataSource?.Select(d => new DoctorUsage
+    {
+        Name = d.Name,
+        Utilization = CalculateDoctorUtilization(d)
+    })
+    ?? Enumerable.Empty<DoctorUsage>();
+
+private int CalculateDoctorUtilization(Doctor doctor)
+{
+    var appointments = scheduleEventData?
+        .Count(a =>
+            a.DoctorId == doctor.Id &&
+            !a.IsBlock &&
+            a.Name != "Break Time" &&
+            a.Name != "Off Work") ?? 0;
+
+    const int MaxSlots = 20;
+
+    return Math.Min(
+        100,
+        (int)Math.Round(
+            (double)appointments / MaxSlots * 100));
+}
+
     protected override void OnInitialized()
     {
-        sceduleView = (View)Enum.Parse(typeof(View), (Service.CalendarSettings.CurrentView as string));
-        currentDate = Service.StartDate;
-        this.viewInterval = Service.CalendarSettings.Interval;
-        this.calendarDayOfWeek = Service.CalendarSettings.FirstDayOfWeek;
-        this.resourceColorField = Service.CalendarSettings.BookingColor;
-        this.waitingList = Service.WaitingLists;
-        this.resourceDataSource = Service.Doctors;
-        this.specialistCategory = Service.Specializations;
-        this.startHour = Service.CalendarSettings.Calendar.Start;
-        this.endHour = Service.CalendarSettings.Calendar.End;
+        try
+        {
+            sceduleView = (View)Enum.Parse(typeof(View), (Service.CalendarSettings.CurrentView as string));
+            currentDate = Service.StartDate;
+            this.viewInterval = Service.CalendarSettings.Interval;
+            this.calendarDayOfWeek = Service.CalendarSettings.FirstDayOfWeek;
+            this.resourceColorField = Service.CalendarSettings.BookingColor;
+            this.waitingList = Service.WaitingLists;
+            this.resourceDataSource = Service.Doctors;
+            this.specialistCategory = Service.Specializations;
+            this.startHour = Service.CalendarSettings.Calendar.Start;
+            this.endHour = Service.CalendarSettings.Calendar.End;
+
+            // Compute "yesterday" snapshot for trend deltas (deterministic, demo data)
+            var yesterday = currentDate.Date.AddDays(-1);
+            var allEvents = Service.Hospitals ?? new List<Hospital>();
+            YesterdayAppointments = allEvents.Count(x =>
+                !x.IsBlock &&
+                x.Name != "Break Time" &&
+                x.Name != "Off Work" &&
+                x.StartTime.Date == yesterday);
+            // Waiting list baseline (demo): derive from current waiting
+            YesterdayWaiting = (int)Math.Round((Service.WaitingLists?.Count ?? 0) * 0.85);
+        }
+        catch (Exception ex)
+        {
+            loadFailed = true;
+            Console.Error.WriteLine($"[Schedule] init failed: {ex.Message}");
+        }
     }
+    private string GetStatusColor(string status)
+        {
+            return status switch
+            {
+                "Confirmed" => "#16A34A",
+                "Waiting" => "#F59E0B",
+                "Urgent" => "#DC2626",
+                "FollowUp" => "#7C3AED",
+                "Cancelled" => "#6B7280",
+                _ => "#0284C7"
+            };
+        }
 
     private string getEventTime(WaitingList data)
     {
@@ -202,7 +538,16 @@ else{
             return "CHECKUP";
         }
     }
+    private async Task CreateAppointment()
+    {
+        var data = new Hospital
+        {
+            StartTime = currentDate.Date.AddHours(9),
+            EndTime = currentDate.Date.AddHours(10)
+        };
 
+        await scheduleObj.OpenEditorAsync(data, CurrentAction.Add);
+    }
 
     public void OnPopupOpen(PopupOpenEventArgs<Hospital> args)
     {
@@ -230,25 +575,93 @@ else{
                 }
                 draggedItemID = null;
             }
-            foreach(Hospital Data in args.AddedRecords)
+            foreach(var item in args.AddedRecords)
+                {
+                    bool overlap =
+                        scheduleEventData.Any(x =>
+                            x.DoctorId == item.DoctorId &&
+                            x.StartTime < item.EndTime &&
+                            x.EndTime > item.StartTime);
+
+                    if(overlap)
+                    {
+                        args.Cancel = true;
+
+                        LiveStatusAnnouncement =
+                            "Overbooking detected.";
+
+                        return;
+                    }
+                }
+            foreach (Hospital Data in args.AddedRecords)
             {
                 Random random = new Random();
                 Data.PatientId = Data.PatientId == 0 ? random.Next(1, Service.Patients.Max(p => p.Id)) : Data.PatientId;
             }
+            LiveStatusAnnouncement = "Appointment created.";
         }
     }
-    private void onValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Doctor> args)
+
+    private async Task onValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Doctor> args)
     {
         if (args.Value != null)
         {
-            refreshDataSource((int)args.ItemData.DepartmentId, args.ItemData.Id.ToString());
+            await refreshDataSource((int)args.ItemData.DepartmentId, args.ItemData.Id.ToString());
         }
         else
         {
             setDefaultData();
         }
     }
-    private void refreshDataSource(int deptId, string doctorId)
+
+    private async Task OnDoctorChanged(int? doctorId)
+    {
+        selectedDoctorId = doctorId;
+        if (doctorId == null)
+        {
+            setDefaultData();
+        }
+        else
+        {
+            var doc = resourceDataSource?.FirstOrDefault(d => d.Id == doctorId);
+            if (doc != null)
+            {
+                await refreshDataSource(doc.DepartmentId, doctorId.Value.ToString());
+            }
+        }
+    }
+
+    private async Task OnDepartmentChanged(int? deptId)
+    {
+        selectedDepartmentId = deptId;
+        waitingListDepartmentId = deptId;
+        applyWaitingListFilter();
+        LiveStatusAnnouncement = $"Filtered waiting list by department. {waitingList?.Count ?? 0} patient(s) shown.";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnSearchChanged(string value)
+    {
+        waitingListSearch = value;
+        applyWaitingListFilter();
+        LiveStatusAnnouncement = $"Search applied. {waitingList?.Count ?? 0} patient(s) match.";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task ResetSchedule()
+    {
+        selectedDoctorId = null;
+        selectedDepartmentId = null;
+        waitingListSearch = string.Empty;
+        setDefaultData();
+        LiveStatusAnnouncement = "Schedule filters reset.";
+        if (scheduleObj != null)
+        {
+            await scheduleObj.RefreshAsync(false);
+        }
+    }
+
+    private async Task refreshDataSource(int deptId, string doctorId)
     {
         List<Doctor> filterItem = Service.Doctors.Where(item => item.Id.Equals(Int32.Parse(doctorId))).ToList();
         activeDoctorData = filterItem;
@@ -265,16 +678,40 @@ else{
             scheduleEventData = Service.Hospitals;
         }
         this.updateWaitingList((int)deptId);
+        if (scheduleObj != null)
+        {
+            await scheduleObj.RefreshAsync(false);
+        }
     }
+    private int PredictedWaitMinutes =>
+    DoctorCountActive == 0
+        ? 0
+        : (PendingCount * 8) / DoctorCountActive;
 
     private void updateWaitingList(int? deptId)
     {
-        var filteredData = Service.WaitingLists;
-        if (deptId != null)
+        waitingListDepartmentId = deptId;
+        applyWaitingListFilter();
+    }
+
+    private void OnWaitingListSearchChanged(Syncfusion.Blazor.Inputs.ChangeEventArgs<string> args)
+    {
+        waitingListSearch = args.Value;
+        applyWaitingListFilter();
+    }
+
+    private void applyWaitingListFilter()
+    {
+        var filteredData = Service.WaitingLists.AsEnumerable();
+        if (waitingListDepartmentId != null)
         {
-            filteredData = filteredData.Where(item => item.DepartmentId.Equals(deptId)).ToList();
+            filteredData = filteredData.Where(item => item.DepartmentId.Equals(waitingListDepartmentId));
         }
-        waitingList = filteredData;
+        if (!string.IsNullOrWhiteSpace(waitingListSearch))
+        {
+            filteredData = filteredData.Where(item => item.Name.Contains(waitingListSearch, StringComparison.OrdinalIgnoreCase));
+        }
+        waitingList = filteredData.ToList();
     }
 
     private void setDefaultData()
@@ -292,6 +729,8 @@ else{
         workHours = Service.CalendarSettings.Calendar;
         activeDoctorData = new List<Doctor>();
     }
+
+
     private List<Hospital> generateEvents(Doctor activeData)
     {
         List<Hospital> filteredEvents = new List<Hospital>();
@@ -420,20 +859,31 @@ else{
     }
 
     private async void LoadData()
-    {   
-        this.scheduleEventData = Service.Hospitals;
-        this.workHours = Service.CalendarSettings.Calendar;
-        this.queryData = new Query();
-        await Task.Delay(100);
-        isDataLoaded = true;
-        StateHasChanged();
+    {
+        try
+        {
+            this.scheduleEventData = Service.Hospitals;
+            this.workHours = Service.CalendarSettings.Calendar;
+            this.queryData = new Query();
+            await Task.Delay(500);
+            isDataLoaded = true;
+        }
+        catch (Exception ex)
+        {
+            loadFailed = true;
+            Console.Error.WriteLine($"[Schedule] load failed: {ex.Message}");
+        }
+        finally
+        {
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     protected override void OnAfterRender(bool firstRender)
     {
-    if (firstRender)
+        if (firstRender)
         {
-        LoadData();
+            LoadData();
         }
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Shared/MainLayout.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Shared/MainLayout.razor
index d4704de..681169e 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Shared/MainLayout.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner.Client/Shared/MainLayout.razor
@@ -13,53 +13,31 @@
         </svg>
     </div>
     <div class="sb-caption">
-        <h4 class="my-4">Appointment planner initializing...</h4>
     </div>
 </div>
 <div class="planner-wrapper" style="width: 100%; visibility:@(visible); opacity:@(opacity)">
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <div class="planner-header">
-        <SfAppBar ColorMode="AppBarColor.Primary" CssClass="custom-appbar">
-            <div class="side-bar-opener">
-                <span class="open-icon e-icons" @onclick="@showSideBar"></span>
-            </div>
-            <div class="name-cantainer">
-                <span class="clinic-image icon-logo"></span>
-                <h1 class="clinic-name appointment-title">APPOINTMENT PLANNER</h1>
-            </div>
-            <AppBarSpacer></AppBarSpacer>
-            <div class='logout-container'>
-                <div class="logout-icon-container"><span class="icon-logout logout-image"></span></div>
-                <span class='logout-name'>Logout</span>
-            </div>
-            <div class="sb-header-item sb-table-cell sb-download-wrapper">
-                <a href="https://github.com/syncfusion/ej2-showcase-blazor-appointment-planner" target="_blank">
-                    <div id="github" class="sb-github-btn">
-                        <div class="github-image">
-                            <img src="css/appoinment/mark.svg" alt="github" />
-                        </div>
-                    </div>
-                </a>
-            </div>
-        </SfAppBar>
+
     </div>
     <SfSidebar ID="plannerSiderBar" EnableGestures="false" @bind-IsOpen="open" MediaQuery="(min-width: 600px)" Type="SidebarType.Auto" Created="OnCreate" CloseOnDocumentClick="onDocumentClick">
         <ChildContent>
             <div class="dock">
                 <div class="info align-center">
-                    <div class="image"><img src="css/appoinment/assets/images/Admin.png" alt="Admin" /></div>
-                    <div class="content nameContent">
-                        <p class='name'>Jane Doe</p>
-                        <p class='user-type'>Admin</p>
-                    </div>
+
+                 <div class="content nameContent">
+                <h1 class="clinic-name appointment-title">APPOINTMENT PLANNER</h1>
+                </div>
                 </div>
                 <div class="sideparent menulist">
+                    <nav aria-label="Primary">
                     <ul class="nav flex-column">
                         <li class="nav-item e-list-item">
                             <NavLink class="nav-link sidebar-item" href="" Match="NavLinkMatch.All" @onclick="@CloseSidePane">
-                                <span class="dashboard-image">
+                                <span class="dashboard-image" aria-hidden="true">
                                     <span class="item-image icon-dashboard"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Dashboard">Dashboard</span>
+                                <span class="text" title="Dashboard">Dashboard</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -67,7 +45,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-schedule"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Schedule">Schedule</span>
+                                <span class="text" title="Schedule">Schedule</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -75,7 +53,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-doctors"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Doctors">Doctors</span>
+                                <span class="text" title="Doctors">Doctors</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -83,7 +61,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-patients"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Patients">Patients</span>
+                                <span class="text" title="Patients">Patients</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -91,7 +69,7 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-preference"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="Preference">Preference</span>
+                                <span class="text" title="Settings">Settings</span>
                             </NavLink>
                         </li>
                         <li class="nav-item e-list-item">
@@ -99,15 +77,18 @@
                                 <span class="dashboard-image">
                                     <span class="item-image icon-about"></span>
                                 </span>
-                                <span class="text" aria-hidden="true" title="About">About</span>
+                                <span class="text" title="About">About</span>
                             </NavLink>
                         </li>
                     </ul>
+                    </nav>
                 </div>
             </div>
+
+
         </ChildContent>
     </SfSidebar>
-    <main class="main-content">
+    <main class="main-content" id="main-content">
         @Body
     </main>
     <div class="footer">
@@ -180,4 +161,4 @@
     {
         open = true;
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor
index d3040f0..af58dfb 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/Components/App.razor
@@ -33,31 +33,31 @@
             events.forEach(event => document.addEventListener(event, loadGTM, { once: true }));
         });
     </script>
-	<!-- End Google Tag Manager -->
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="description" content="Appointment Planner is a SPA for demonstrating Syncfusion Blazor WebAssembly Components features in a real-world scenario with dashboard like layout." />
-    <title>Appointment Planner | Blazor WebAssembly showcase app | Syncfusion</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Appointment Planner is a single page application for demonstrating Syncfusion Blazor Components features in a real-world scenario with dashboard like layout." />
+    <title>Appointment Scheduling Dashboard | Syncfusion Blazor</title>
+    
     <base href="/" />
     <link href=@Urihelper.Uri rel="canonical" />
-  
     <ResourcePreloader />
-    <link href="@Assets["css/bootstrap/bootstrap.min.css"]" rel="stylesheet" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <link href="@Assets["_content/Syncfusion.Blazor.Themes/fluent2.css"]" rel="stylesheet" />
+     <link rel="stylesheet" href="@Assets["css/bootstrap/bootstrap.min.css"]" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
     <ImportMap />
     <link href="@Assets["css/site.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/common.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/main.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/dashboard.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/doctor.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/doctordetails.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/patients.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/preference.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/calendar.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/doctoreditdialog.css"]" rel="stylesheet" />
-    <link href="@Assets["css/appoinment/about.css"]" rel="stylesheet" />
-    <script src="@Assets["lodash.min.js"]"></script>
+    <link href="@Assets["css/sidebar.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/common.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/main.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/dashboard.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/doctor.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/doctordetails.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/patients.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/preference.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/calendar.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/doctoreditdialog.css"]" rel="stylesheet" />
+    <link href="@Assets["css/appointment/about.css"]" rel="stylesheet" />
+    <script src="@Assets["_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"]" type="text/javascript"></script>
     <script type="text/javascript">
         if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
             document.write('<script src="@Assets["SFResource/blazor.polyfill.min.js"]"><\/script>');
@@ -71,11 +71,15 @@
                 || navigator.userAgent.match(/BlackBerry/i)
                 || navigator.userAgent.match(/Windows Phone/i)) ? true : false;
         }
+            window.getViewportWidth = function () {
+                return window.innerWidth;
+            }
     </script>
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
 
-<body>
+<body class="e-app-mainpage">
+    <Routes @rendermode="InteractiveWebAssembly" />
     <!-- Google Tag Manager (noscript) -->
     <!--Page Load-->
     <noscript>
@@ -86,8 +90,6 @@
         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe>
     </noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <Routes @rendermode="InteractiveWebAssembly" />
-    <script src="@Assets["_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"]" type="text/javascript"></script>
     <div hidden id="sync-analytics" data-queue="Syncfusion - Showcase - Blazor - AppointmentPlanner"></div>
     <script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/about.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/about.css
deleted file mode 100644
index c9e5d85..0000000
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/about.css
+++ /dev/null
@@ -1,213 +0,0 @@
-.about-container {
-    margin: 50px 65.5px;
-}
-
-    .about-container p {
-        font-size: 13px;
-        color: 666666;
-        letter-spacing: 0.48px;
-        line-height: 20px;
-        margin-top: 30px;
-    }
-
-@media (max-width: 850px) {
-    .about-container {
-        margin: 20px 24px;
-    }
-
-        .about-container .module-title {
-            padding-left: 1.5px !important;
-        }
-}
-
-.e-sb-icon {
-    font-family: 'sb-icons';
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.about {
-    font-size: 14px;
-    color: #9aa5bb;
-    letter-spacing: 0.05px;
-    height: 100%;
-}
-
-.about-heading {
-    font-weight: bold;
-    color: #485058;
-    font-size: 16px;
-    padding: 0 0 12px 0;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-}
-
-.about-description {
-    text-align: justify;
-    color: #485058;
-    font-size: 13px;
-    line-height: 24px;
-    padding-bottom: 24px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-}
-
-.list-heading {
-    font-weight: bold;
-    color: #485058;
-    font-size: 16px;
-    padding-bottom: 12px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-}
-
-.about-component {
-    color: #485058;
-    font-size: 14px;
-    padding-bottom: 24px;
-    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-    margin-left: 20px;
-}
-
-    .about-component li {
-        line-height: 24px;
-    }
-
-.control-item {
-    color: #4a90e2;
-    display: flex;
-    line-height: 30px;
-    display: inline-block;
-    width: 168px;
-}
-
-.sfimage-button::before {
-    content: '\e702';
-    color: #7575ff;
-}
-
-.sfimage-schedule::before {
-    content: '\e709';
-    color: #7575ff;
-}
-
-.sfimage-chart::before {
-    content: '\e906';
-    color: #7575ff;
-}
-
-.sfimage-card::before {
-    content: '\e713';
-    color: #7575ff;
-}
-
-.sfimage-sidebar::before {
-    content: '\e705';
-    color: #7575ff;
-}
-
-.sfimage-autocomplete::before {
-    content: '\e70b';
-    color: #7575ff;
-}
-
-.sfimage-datepicker::before {
-    content: '\e90d';
-    color: #7575ff;
-}
-
-.sfimage-timepicker::before {
-    content: '\e927';
-    color: #7575ff;
-}
-
-.sfimage-dialog::before {
-    content: '\e90e';
-    color: #7575ff;
-}
-
-.sfimage-dropdownlist::before {
-    content: '\e70a';
-    color: #7575ff;
-}
-
-.sfimage-grid::before {
-    content: '\e913';
-    color: #7575ff;
-}
-
-.sfimage-checkbox::before {
-    content: '\e707';
-    color: #7575ff;
-}
-
-.sfimage-numerictextbox::before {
-    content: '\e72a';
-    color: #7575ff;
-}
-
-.sfimage-radiobutton::before {
-    content: '\e727';
-    color: #7575ff;
-}
-
-.sfimage-listview::before {
-    content: '\e917';
-    color: #7575ff;
-}
-
-.sfimage-treeview::before {
-    content: '\e92b';
-    color: #7575ff;
-}
-
-.sfimage-textboxes::before {
-    content: '\e919';
-    color: #7575ff;
-}
-
-.sfimage-toast::before {
-    content: '\e716';
-    color: #7575ff;
-}
-
-.sf-icon-skeleton::before {
-    content: '\e904';
-    color: #7575ff;
-}
-
-.sf-icon-appbar::before {
-    content: "\e900";
-    color: #7575ff;
-}
-
-.sf-icon-predefineddialogs::before {
-    content: "\e901";
-    color: #7575ff;
-}
-
-.sf-icon-message::before {
-    content: "\e903";
-    color: #7575ff;
-}
-
-.control-icon {
-    font-size: 18px;
-    margin-right: 15px;
-    vertical-align: middle;
-}
-
-.control-name {
-    font-size: 14px;
-}
-
-.about-component {
-    margin-left: 20px;
-}
-
-/*skeleton*/
-.about-descrip-skeleton {
-    line-height: 20px;
-    margin-top: 30px;
-}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css
deleted file mode 100644
index 504196a..0000000
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/dashboard.css
+++ /dev/null
@@ -1,362 +0,0 @@
-.planner-dashboard {
-    display: flex;
-    margin: 50px 75px;
-    font-size: 14px;
-    letter-spacing: 0.38px;
-    height: 100%;
-}
-
-.planner-dashboard .view-detail-display {
-    width: 100%;
-}
-
-.planner-dashboard .view-detail-display .e-card.day-events-container .label-text,
-.planner-dashboard .view-detail-display .e-card.week-events-container .label-text {
-    font-weight: 600;
-    font-size: 16px;
-    color: #333;
-    letter-spacing: 0.48px;
-    display: flex;
-    padding: 10px 12px 6.5px 12px;
-}
-
-.planner-dashboard .e-card .e-card-content {
-    padding: 0px;
-}
-
-.planner-dashboard .view-detail-display .grid-container {
-    height: 270px;
-}
-
-.planner-dashboard .text-display {
-    text-align: center;
-    line-height: 30px;
-}
-
-.planner-dashboard .view-detail-display .grid-container .e-card-header {
-    height: 60px;
-}
-
-.planner-dashboard .view-detail-display .grid-container .e-card-header .e-card-header-caption .e-card-header-title {
-    display: flex;
-    padding: 0px;
-    font-weight: 600;
-}
-
-.planner-dashboard .view-detail-display .grid-container .e-card-header .e-card-header-caption .label-text {
-    flex: auto;
-    letter-spacing: 0.48px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: .5rem 0;
-}
-
-.planner-dashboard .view-detail-display .grid-container .link-text {
-    flex: initial;
-    font-size: 13px;
-    color: #5851e1;
-    letter-spacing: 0.39px;
-    text-align: right;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.planner-dashboard .view-detail-display .grid-container .link-text a {
-    cursor: pointer;
-    text-decoration: underline;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.planner-dashboard header {
-    display: none;
-}
-
-.planner-dashboard .view-detail-display .e-card.day-events-container,
-.planner-dashboard .view-detail-display .e-card.week-events-container {
-    background: #fff;
-    box-shadow: 1px 2px 20px 0 rgba(173, 173, 255, 0.20);
-}
-
-.planner-dashboard .e-card {
-    border: 0px;
-}
-
-
-.planner-dashboard .view-detail-display .e-card .week-event-count,
-.planner-dashboard .view-detail-display .e-card .day-event-count {
-    font-weight: 400;
-    font-size: 36px;
-    cursor: default;
-    color: #5851e1;
-    letter-spacing: 1.08px;
-    height: 44px;
-    display: flex;
-    justify-content: center;
-    flex-basis: 50%;
-}
-
-.planner-dashboard .view-detail-display .e-card .count-container {
-    display: flex;
-    margin: 0 16px 6.3px 17.4px;
-}
-
-.planner-dashboard .view-detail-display .e-card .icon-week img,
-.planner-dashboard .view-detail-display .e-card .icon-day img {
-    width: 57px;
-    height: 56.2px;
-}
-
-.planner-dashboard .view-detail-display .chart-container,
-.planner-dashboard .view-detail-display .grid-container {
-    margin-top: 30px;
-    box-shadow: 1px 2px 20px 0 rgba(173, 173, 255, 0.20);
-}
-
-.planner-dashboard .view-detail-display .chart-container {
-    width: 100%;
-    height: 340px;
-}
-
-.planner-dashboard .view-detail-display .chart-container text#chartcontainer_ChartTitle {
-    fill: #333;
-    font-weight: 600;
-    font-size: 16px;
-    color: #333 !important;
-    letter-spacing: 0.48px;
-    padding: 10px 16px;
-}
-
-.planner-dashboard .list-display {
-    padding-left: 0px;
-}
-
-.planner-dashboard .list-display .recent-activity,
-.planner-dashboard .list-display .doctor-availability {
-    background-clip: padding-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    background: #fff;
-    box-shadow: 1px 2px 20px 0 rgba(173, 173, 255, 0.20);
-    height: 375px;
-}
-
-.planner-dashboard .list-display .recent-activity {
-    margin-bottom: 30px;
-    width: 100%;
-}
-
-/*activity listview*/
-
-.activity-template .e-list-header {
-    border-bottom: 0;
-    font-weight: 600;
-    font-size: 16px;
-    color: #333 !important;
-    letter-spacing: 0.48px;
-    padding: 10px 16px;
-}
-
-.activity-template .e-list-container .e-list-item {
-    border: none;
-    height: 100%;
-    padding: 0px 16px;
-    margin-bottom: 10.2px;
-    line-height: 18px;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container {
-    padding: 5px 0;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container.doctor {
-    border-left: 2px solid #e16651;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container.appointment {
-    border-left: 2px solid #5851e1;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container.patient {
-    border-left: 2px solid #51e1b7;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container .activity-message {
-    font-weight: 400;
-    font-size: 13px;
-    color: #333;
-    letter-spacing: 0.39px;
-    line-height: 18px;
-    height: auto;
-    margin-left: 12px;
-    padding-bottom: 5px;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container .activity-message .type-name {
-    font-weight: bold;
-}
-
-.activity-template .e-list-container .e-list-item .activity-container .activity-time {
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 0.39px;
-    line-height: 18px;
-    width: 254px;
-    height: 20.1px;
-    margin-left: 12px;
-}
-
-
-/*doctor availability*/
-
-.e-list-template .e-list-header {
-    border-bottom: 0;
-    flex: auto;
-    font-weight: 600;
-    font-size: 16px;
-    color: #333 !important;
-    letter-spacing: 0.48px;
-    padding: 10px 16px;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text {
-    width: 100%;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text .availability-title {
-    display: flex;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text .availability-title .header-text {
-    flex: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.e-list-template .e-list-header .e-headertemplate-text .availability-title .all-text {
-    flex: initial;
-    font-weight: 400;
-    font-size: 13px;
-    color: #5851e1;
-    letter-spacing: 0.39px;
-    text-align: right;
-    margin-right: 4px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.e-list-template .e-list-container,
-.activity-template .e-list-container {
-    padding-top: 10px;
-}
-
-.e-list-template .e-list-container li.e-list-item {
-    border: none;
-    display: flex;
-    padding: 5px 16px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container {
-    display: flex;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container {
-    display: flex;
-    padding-left: 1px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image {
-    padding: 5px 0;
-    position: relative;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image img {
-    height: 32px;
-    width: 32px;
-    border-radius: 16px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.busy,
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.available,
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.away {
-    display: inline-block;
-    border: 2px solid #fff;
-    border-radius: 16px;
-    height: 14px;
-    width: 14px;
-    position: absolute;
-    top: 47%;
-    left: 65%;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.busy {
-    background: #d40000;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.away {
-    background: #ff8c2e;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .image-container .doctor-image .availability.available {
-    background: #00d406;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .detail-container {
-    display: grid;
-    padding-left: 16px;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .detail-container .doctor-name {
-    font-weight: 500;
-    font-size: 13px;
-    color: #666;
-    letter-spacing: 0.39px;
-    padding: 3px 0;
-}
-
-.e-list-template .e-list-container li.e-list-item .availabilty-container .detail-container .doctor-speciality {
-    font-size: 10px;
-    color: #666;
-    letter-spacing: 0.3px;
-    padding: 2px 0;
-}
-
-.e-tooltip-wrap {
-    border-radius: 15px 15px 15px 0;
-    opacity: 0.8;
-    background: #333;
-}
-
-.e-tooltip-wrap .e-tip-content {
-    border-radius: 15px 15px 15px 0;
-    font-size: 13px;
-    color: #fff;
-    letter-spacing: 0.39px;
-    padding: 5px 8px;
-}
-
-.view-detail-display .col-lg-8,
-.view-detail-display .col-md-8,
-.view-detail-display .col-sm-8 {
-    padding-right: 20px;
-    padding-left: 0px;
-}
-
-.view-detail-display a {
-    text-decoration: underline;
-    color: -webkit-link;
-}
-
-.e-listview .e-list-header .e-text {
-    cursor: initial;
-    text-indent: 0;
-}
-
-@media (max-width: 850px) {
-    .planner-dashboard {
-        margin: 20px 10px;
-    }
-}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css
deleted file mode 100644
index b084f1e..0000000
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctordetails.css
+++ /dev/null
@@ -1,370 +0,0 @@
-.doctor-details-container {
-    margin: 50px 57px;
-}
-
-    .doctor-details-container header {
-        display: flex;
-        margin-bottom: 34.2px;
-        flex-direction: column;
-    }
-
-        .doctor-details-container header .detail-header-title {
-            display: flex;
-        }
-
-            .doctor-details-container header .detail-header-title span {
-                padding-right: 10px;
-                font-size: 25px;
-                cursor: pointer;
-            }
-
-            .doctor-details-container header .detail-header-title .e-add-icon {
-                padding: 0 6px;
-            }
-
-        .doctor-details-container header .doctor-detail {
-            display: flex;
-            justify-content: flex-end;
-        }
-
-            .doctor-details-container header .doctor-detail .edit-details, .doctor-details-container header .doctor-detail .delete-details {
-                width: 100px;
-                height: 32px;
-                color: white;
-            }
-
-            .doctor-details-container header .doctor-detail .edit-details {
-                background-color: #7575ff;
-            }
-
-            .doctor-details-container header .doctor-detail .delete-details {
-                margin-right: 16px;
-                background-color: #ff4f4f;
-            }
-
-    .doctor-details-container .active-doctor {
-        display: grid;
-        grid-template-columns: 0.3fr 1fr 1fr;
-    }
-
-        .doctor-details-container .active-doctor .active-doctor-info .designation, .doctor-details-container .active-doctor .active-doctor-info .label-text, .doctor-details-container .active-doctor .active-doctor-info .specialization, .doctor-details-container .active-doctor .active-doctor-info .experience, .doctor-details-container .active-doctor .active-doctor-info .available-days, .doctor-details-container .active-doctor .active-doctor-info .mobile, .doctor-details-container .active-doctor .work-days-container header .title-text, .doctor-details-container .active-doctor .work-days-content .day-name, .doctor-details-container .active-doctor .work-days-content .day-break-hours {
-            font-size: 13px;
-            letter-spacing: 0.39px;
-        }
-
-        .doctor-details-container .active-doctor .active-doctor-info .designation, .doctor-details-container .active-doctor .active-doctor-info .specialization, .doctor-details-container .active-doctor .active-doctor-info .experience, .doctor-details-container .active-doctor .active-doctor-info .available-days, .doctor-details-container .active-doctor .active-doctor-info .mobile, .doctor-details-container .active-doctor .work-days-content .day-name, .doctor-details-container .active-doctor .work-days-content .day-break-hours {
-            color: #333;
-        }
-
-        .doctor-details-container .active-doctor .active-doctor-image {
-            position: relative;
-            display: flex;
-            margin: 0 auto;
-        }
-
-            .doctor-details-container .active-doctor .active-doctor-image img {
-                height: 100px;
-                width: 100px;
-                border-radius: 50px;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-image .availability {
-                height: 20px;
-                width: 20px;
-                top: 70px;
-                left: 77px;
-                position: absolute;
-                border: 2px solid #fff;
-                border-radius: 16px;
-            }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability.busy {
-                    background: #d40000;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability.away {
-                    background: #ff8c2e;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability.available {
-                    background: #00d406;
-                }
-
-            .doctor-details-container .active-doctor .active-doctor-image .upload {
-                position: absolute;
-                top: 35px;
-                left: 35px;
-                display: none;
-                font-size: 30px;
-                color: white;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-image:hover .upload.icon-upload_photo.new-doctor {
-                display: block;
-            }
-
-        .doctor-details-container .active-doctor .active-doctor-info {
-            flex: 1;
-        }
-
-            .doctor-details-container .active-doctor .active-doctor-info .label-text {
-                color: #666;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-info .info-field-container {
-                margin-bottom: 20px;
-            }
-
-                .doctor-details-container .active-doctor .active-doctor-info .info-field-container div.name {
-                    padding-bottom: 3px;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-info .info-field-container div.education {
-                    padding-bottom: 7px;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-info .info-field-container div.label-text {
-                    padding-bottom: 4px;
-                }
-
-            .doctor-details-container .active-doctor .active-doctor-info .basic-detail .name {
-                font-weight: 600;
-                font-size: 18px;
-                color: #333;
-                letter-spacing: 0.54px;
-                height: 22px;
-                font-weight: bold;
-                max-width: 250px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-
-            .doctor-details-container .active-doctor .active-doctor-info .basic-detail .education {
-                font-size: 10px;
-                color: #333;
-                letter-spacing: 0.3px;
-                height: 13px;
-            }
-
-        .doctor-details-container .active-doctor .work-days-container {
-            flex: 2;
-        }
-
-            .doctor-details-container .active-doctor .work-days-container header {
-                display: flex;
-                margin-bottom: 17.9px;
-                flex-direction: row;
-            }
-
-                .doctor-details-container .active-doctor .work-days-container header .title-text {
-                    margin: 5px 0;
-                    color: #666;
-                }
-
-                .doctor-details-container .active-doctor .work-days-container header .add-container {
-                    padding-left: 18.3px;
-                    display: flex;
-                }
-
-                    .doctor-details-container .active-doctor .work-days-container header .add-container .e-btn {
-                        width: 23.3px;
-                        height: 22.8px;
-                        margin: 2px 0;
-                    }
-
-                        .doctor-details-container .active-doctor .work-days-container header .add-container .e-btn .e-btn-icon {
-                            font-size: 11px;
-                        }
-
-                    .doctor-details-container .active-doctor .work-days-container header .add-container .button-label {
-                        margin: auto 0;
-                        font-weight: 500;
-                        font-size: 13px;
-                        color: #7575ff;
-                        letter-spacing: 0.39px;
-                        padding: 0 10px;
-                        cursor: pointer;
-                    }
-
-                .doctor-details-container .active-doctor .work-days-container header .e-add-icon::before {
-                    content: '\e95c';
-                }
-
-            .doctor-details-container .active-doctor .work-days-container .work-days-content .work-day-item {
-                display: grid;
-                grid-template-columns: 100px auto;
-                padding-bottom: 10px;
-            }
-
-                .doctor-details-container .active-doctor .work-days-container .work-days-content .work-day-item .day-break-hours.TimeOff {
-                    font-size: 13px;
-                    color: #f00;
-                    letter-spacing: 0.39px;
-                }
-
-.break-hour-dialog {
-    width: 445px;
-    max-height: 98% !important;
-}
-
-    .break-hour-dialog .e-dlg-content .break-hour-operations {
-        font-weight: 600;
-        font-size: 11px;
-        color: #666;
-        letter-spacing: 0.33px;
-        line-height: 18px;
-        padding-bottom: 20px;
-    }
-
-    .break-hour-dialog .e-dlg-content .break-hour-header {
-        display: flex;
-    }
-
-        .break-hour-dialog .e-dlg-content .break-hour-header div:nth-child(1) {
-            flex: 0.25;
-        }
-
-        .break-hour-dialog .e-dlg-content .break-hour-header div:nth-child(2), .break-hour-dialog .e-dlg-content .break-hour-header div:nth-child(3) {
-            flex: 1;
-            margin: 0 30px;
-            font-weight: 600;
-            font-size: 11px;
-            color: #666;
-            letter-spacing: 0.33px;
-        }
-
-    .break-hour-dialog .e-dlg-content :nth-child(3).break-hour-days {
-        padding-top: 7px !important;
-    }
-
-    .break-hour-dialog .e-dlg-content .break-hour-days {
-        display: flex;
-        padding-top: 21px;
-    }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .day-button {
-            height: 32px;
-            width: 32px;
-        }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .day-button .e-btn {
-                background: #7575ff;
-                border-color: #7575ff;
-                height: 32px;
-                width: 32px;
-            }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .day-button.TimeOff {
-                margin: 5px 0;
-            }
-
-                .break-hour-dialog .e-dlg-content .break-hour-days .day-button.TimeOff .e-btn {
-                    background: #f00;
-                    border-color: #f00;
-                }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .day-button.RemoveBreak .e-btn {
-                background: #fff;
-                border: 1px solid #c0c0c0;
-                color: #333;
-            }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .start-container {
-            margin: 0 14.4px 0 16px;
-        }
-
-            .break-hour-dialog .e-dlg-content .break-hour-days .start-container.TimeOff, .break-hour-dialog .e-dlg-content .break-hour-days .end-container.TimeOff {
-                display: none;
-            }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .state-container:not(.TimeOff) {
-            display: none;
-        }
-
-        .break-hour-dialog .e-dlg-content .break-hour-days .state-container.TimeOff {
-            display: block;
-            margin: auto 27.9px;
-            font-size: 13px;
-            color: #333;
-            letter-spacing: 0.39px;
-        }
-
-.confirm-dialog.e-dialog.e-popup {
-    width: auto;
-}
-
-@media (max-width: 850px) {
-    .doctor-details-container {
-        margin: 20px 29px;
-    }
-
-        .doctor-details-container header {
-            flex-direction: row;
-            margin: 10px 0;
-        }
-
-            .doctor-details-container header .detail-header-title {
-                flex: auto;
-            }
-
-            .doctor-details-container header .doctor-detail {
-                justify-content: normal;
-            }
-
-                .doctor-details-container header .doctor-detail .delete-details, .doctor-details-container header .doctor-detail .edit-details {
-                    width: 70px;
-                }
-
-                .doctor-details-container header .doctor-detail .delete-details {
-                    margin-right: 10px;
-                }
-
-        .doctor-details-container .active-doctor {
-            grid-template-rows: 0fr 1fr 1fr;
-            grid-template-columns: none;
-        }
-
-            .doctor-details-container .active-doctor .active-doctor-image {
-                margin-bottom: 35px;
-                margin-top: 21px;
-            }
-
-                .doctor-details-container .active-doctor .active-doctor-image .availability {
-                    left: 80px;
-                    top: 65px;
-                }
-
-                .doctor-details-container .active-doctor .active-doctor-image .upload {
-                    top: 30%;
-                    left: 35%;
-                }
-
-            .doctor-details-container .active-doctor .active-doctor-info .info-field-container.basic-detail .name {
-                height: 29px;
-                padding-bottom: 3px;
-            }
-
-            .doctor-details-container .active-doctor .work-days-container header {
-                margin: 0;
-            }
-
-                .doctor-details-container .active-doctor .work-days-container header .title-text {
-                    margin-top: 5px;
-                    margin-right: 18.7px;
-                }
-
-                .doctor-details-container .active-doctor .work-days-container header div:nth-child(2) {
-                    display: flex;
-                }
-
-                    .doctor-details-container .active-doctor .work-days-container header div:nth-child(2) .button-label {
-                        padding-right: 6.6px;
-                        margin: auto 0;
-                    }
-
-            .doctor-details-container .active-doctor .work-days-container .work-days-content .work-day-item {
-                padding: 0;
-                padding-top: 14.4px;
-            }
-}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/patients.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/patients.css
deleted file mode 100644
index 555208e..0000000
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/patients.css
+++ /dev/null
@@ -1,236 +0,0 @@
-.planner-patient-wrapper {
-    margin: 50px;
-}
-
-    .planner-patient-wrapper header {
-        display: flex;
-    }
-
-        .planner-patient-wrapper header .module-title {
-            margin-left: 16.5px;
-        }
-
-        .planner-patient-wrapper header .add-patient {
-            flex: initial;
-            display: none;
-        }
-
-            .planner-patient-wrapper header .add-patient .e-icon-add {
-                padding: 9px 0 10px 20px;
-                font-size: 10px;
-                color: #7575ff;
-            }
-
-                .planner-patient-wrapper header .add-patient .e-icon-add::before {
-                    content: '\e95c';
-                }
-
-            .planner-patient-wrapper header .add-patient .add-patient-label {
-                font-weight: 600;
-                font-size: 13px;
-                color: #7575ff;
-                letter-spacing: 0.39px;
-                padding: 5px;
-            }
-
-    .planner-patient-wrapper .patients-detail-wrapper .patient-operations {
-        display: flex;
-        justify-content: flex-end;
-    }
-
-        .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper {
-            width: 190px;
-            margin-right: 16px;
-        }
-
-            .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper .e-input-group span.search-icon {
-                cursor: default;
-            }
-
-                .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper .e-input-group span.search-icon::before {
-                    content: '\e993';
-                }
-
-    .planner-patient-wrapper .patients-detail-wrapper .patient-display {
-        margin-top: 17px;
-    }
-
-        .planner-patient-wrapper .patients-detail-wrapper .patient-display .e-grid .e-gridcontent tr.e-row td.e-rowcell .patient-name {
-            color: #7575ff;
-            cursor: pointer;
-        }
-
-.e-dialog.e-edit-dialog {
-    max-height: 495px !important;
-}
-
-.e-dialog.new-patient-dialog {
-    max-height: 505px !important;
-}
-
-.e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog {
-    width: 325px;
-    height: 360px;
-}
-
-    .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row {
-        display: flex;
-        padding: 5px 0;
-    }
-
-        .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row label {
-            font-weight: 600;
-            font-size: 12px;
-            letter-spacing: 0.3px;
-            padding: 5px 0;
-        }
-
-        .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row label, .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row span {
-            flex: 1;
-        }
-
-        .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row span {
-            font-size: 14px;
-            color: #333;
-            letter-spacing: 0.39px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row {
-            flex-direction: column;
-        }
-
-            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row label {
-                color: #7575ff !important;
-            }
-
-            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row .history-content {
-                padding: 5px;
-                font-size: 13px;
-                color: #333;
-                letter-spacing: 0.39px;
-                line-height: 18px;
-                margin: 10px 0;
-                border-left: 2px solid blue;
-            }
-
-            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row .empty-container {
-                font-weight: 600;
-                font-size: 15px;
-                letter-spacing: 0.3px;
-                padding: 5px 10px;
-            }
-
-@media (max-width: 850px) {
-    .planner-patient-wrapper {
-        margin: 20px 10px;
-    }
-
-        .planner-patient-wrapper header .module-title {
-            margin-left: 10px;
-            flex: 1;
-        }
-
-        .planner-patient-wrapper header .add-patient {
-            margin-right: 6px;
-            display: flex;
-            cursor: pointer;
-        }
-
-            .planner-patient-wrapper header .add-patient .add-patient-label {
-                font-weight: 500;
-            }
-
-        .planner-patient-wrapper .patients-detail-wrapper {
-            margin: 0;
-        }
-
-            .planner-patient-wrapper .patients-detail-wrapper .patient-operations {
-                margin-top: 3.3%;
-            }
-
-                .planner-patient-wrapper .patients-detail-wrapper .patient-operations .e-btn {
-                    display: none;
-                }
-
-                .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper {
-                    flex: 1;
-                    margin: 0;
-                }
-
-            .planner-patient-wrapper .patients-detail-wrapper .patient-display {
-                margin-top: 3.3%;
-            }
-}
-
-.new-patient-dialog .e-dlg-content .field-container {
-    padding-bottom: 16px;
-}
-
-.new-patient-dialog .e-dlg-content .gender-container, .new-patient-dialog .e-dlg-content .contact-container {
-    display: flex;
-}
-
-    .new-patient-dialog .e-dlg-content .gender-container .gender, .new-patient-dialog .e-dlg-content .contact-container .gender, .new-patient-dialog .e-dlg-content .gender-container .mobile, .new-patient-dialog .e-dlg-content .contact-container .mobile {
-        padding-right: 8px;
-        flex: 1;
-    }
-
-    .new-patient-dialog .e-dlg-content .contact-container .blood-group, .new-patient-dialog .e-dlg-content .gender-container .dob {
-        padding-left: 8px;
-        flex: 1;
-    }
-
-    .new-patient-dialog .e-dlg-content .gender-container .gender {
-        display: flex;
-        flex-direction: column;
-    }
-
-        .new-patient-dialog .e-dlg-content .gender-container .gender label:not(.e-btn) {
-            font-weight: bold;
-            color: #333;
-            font-size: 12px;
-            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
-        }
-
-        .new-patient-dialog .e-dlg-content .gender-container .gender .e-btn-group {
-            height: 32px;
-        }
-
-            .new-patient-dialog .e-dlg-content .gender-container .gender .e-btn-group label {
-                width: 50%;
-            }
-
-.e-dialog.new-patient-dialog .e-footer-content {
-    padding: 15px 15px 0 15px;
-}
-
-.patient-search.e-input-group .e-clear-icon::before {
-    font-size: 10px;
-}
-
-.e-btn-group .e-radio-wrapper {
-    padding: 4px;
-}
-
-/*skeleton*/
-.planner-patient-skeleton {
-    margin: 50px;
-}
-
-.patients-container1 {
-    height: 20%;
-    width: 100%;
-}
-
-.patients-container1 {
-    height: 70%;
-    width: 100%;
-}
-
-@media (max-width: 600px) {
-    .planner-patient-skeleton {
-        display: none;
-    }
-}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/preference.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/preference.css
deleted file mode 100644
index 7ac7a47..0000000
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/preference.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.preference-container {
-    margin: 50px 64px;
-}
-
-    .preference-container .module-title {
-        margin-left: 2.5px;
-    }
-
-    .preference-container .control-container {
-        padding-top: 16px;
-    }
-
-        .preference-container .control-container .label-text {
-            font-weight: 600;
-            font-size: 12px;
-            color: #666;
-            letter-spacing: 0.33px;
-            padding-bottom: 7px;
-        }
-
-        .preference-container .control-container:nth-child(2) {
-            padding-top: 34px;
-        }
-
-@media (max-width: 850px) {
-    .preference-container {
-        margin: 20px 13px;
-    }
-
-        .preference-container .module-title {
-            padding-left: 12.5px !important;
-        }
-
-        .preference-container .control-container {
-            padding-top: 16px;
-        }
-
-            .preference-container .control-container .label-text {
-                padding-bottom: 7px;
-                margin-left: 11.5px;
-            }
-
-            .preference-container .control-container:nth-child(2) {
-                padding-top: 30px;
-            }
-}
-
-/*skeleton*/
-
-.planner-preference-skeleton {
-    margin: 50px;
-}
-
-.preference-container1 {
-    height: 20%;
-    width: 100%;
-    margin: 0% 0% 4% 0%;
-}
-
-.preference-container2 {
-    height: 80%;
-    width: 100%;
-}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/about.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/about.css
new file mode 100644
index 0000000..0d1959a
--- /dev/null
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/about.css
@@ -0,0 +1,402 @@
+.about-container {
+    margin: 28px 44px 40px;
+    max-width: 1120px;
+}
+
+    .about-container .about-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+    }
+
+    .about-container .showcase-count {
+        padding: 7px 12px;
+        color: #5d6680;
+        background: #f0f1ff;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .about-container .about-hero {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 280px;
+        gap: 32px;
+        margin-top: 24px;
+        padding: 32px;
+        border-left: 4px solid #35a67a;
+        background: linear-gradient(100deg, #f4fbf8, #f7f7ff);
+    }
+
+    .about-container .hero-copy .eyebrow {
+        color: #35a67a;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 1px;
+    }
+
+    .about-container .hero-copy h1 {
+        max-width: 650px;
+        margin: 10px 0 12px;
+        color: #303846;
+        font-size: 30px;
+        line-height: 38px;
+    }
+
+    .about-container .hero-copy p {
+        max-width: 680px;
+        margin: 0;
+        color: #687386;
+        font-size: 14px;
+        line-height: 22px;
+    }
+
+    .about-container .hero-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 22px;
+    }
+
+    .about-container .hero-actions a {
+        text-decoration: none;
+    }
+
+    .about-container .hero-signal {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 8px;
+        padding-left: 24px;
+        border-left: 1px solid #d9dcf2;
+        color: #687386;
+        font-size: 12px;
+        line-height: 18px;
+    }
+
+    .about-container .hero-signal .e-schedule {
+        color: #35a67a;
+        font-size: 32px;
+    }
+
+    .about-container .hero-signal strong {
+        color: #303846;
+        font-size: 16px;
+    }
+
+    .about-container .component-heading {
+        margin: 32px 0 18px;
+    }
+
+    .about-container .component-heading h2 {
+        margin: 0 0 5px;
+        color: #303846;
+        font-size: 20px;
+    }
+
+    .about-container .component-heading p {
+        margin: 0;
+        color: #687386;
+        font-size: 13px;
+    }
+
+    .about-container .component-group {
+        margin-top: 24px;
+    }
+
+    .about-container .component-group h3 {
+        margin: 0 0 12px;
+        color: #5d6680;
+        font-size: 13px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: .6px;
+    }
+
+    .about-container .component-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 12px;
+    }
+
+    .about-container .showcase-component-card {
+        min-height: 112px;
+        border: 1px solid #e1e5ef;
+        box-shadow: 0 3px 10px rgba(47, 58, 85, .05);
+        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
+    }
+
+        .about-container .showcase-component-card:hover,
+        .about-container .showcase-component-card:focus-within {
+            border-color: #35a67a;
+            box-shadow: 0 5px 14px rgba(117, 117, 255, .16);
+            transform: translateY(-2px);
+        }
+
+        .about-container .showcase-component-card .e-card-content {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            height: 100%;
+            padding: 16px;
+        }
+
+        .about-container .showcase-component-card .control-icon {
+            flex: 0 0 25px;
+            margin: 2px 0 0;
+            color: #35a67a;
+            font-size: 22px;
+        }
+
+        .about-container .component-card-copy {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+            .about-container .component-card-copy strong {
+                color: #303846;
+                font-size: 14px;
+            }
+
+            .about-container .component-card-copy span {
+                color: #7b8493;
+                font-size: 11px;
+                line-height: 16px;
+            }
+
+        .about-container .component-link {
+            align-self: flex-end;
+            color: #35a67a;
+            font-size: 11px;
+            text-decoration: none;
+            white-space: nowrap;
+        }
+
+            .about-container .component-link:focus,
+            .about-container .hero-actions a:focus {
+                outline: 2px solid #35a67a;
+                outline-offset: 2px;
+            }
+    }
+
+@media (max-width: 850px) {
+    .about-container {
+        margin: 20px 13px 30px;
+        max-width: none;
+    }
+
+        .about-container .module-title {
+            padding-left: 1.5px !important;
+        }
+
+        .about-container .about-hero {
+            grid-template-columns: 1fr;
+            gap: 20px;
+            padding: 22px;
+        }
+
+        .about-container .hero-copy h1 {
+            font-size: 24px;
+            line-height: 32px;
+        }
+
+        .about-container .hero-signal {
+            padding: 18px 0 0;
+            border-top: 1px solid #d9dcf2;
+            border-left: 0;
+        }
+
+        .about-container .component-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+}
+
+.e-sb-icon {
+    font-family: 'sb-icons';
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.about {
+    font-size: 14px;
+    color: #9aa5bb;
+    letter-spacing: 0.05px;
+    height: 100%;
+}
+
+.about-heading {
+    font-weight: bold;
+    color: #485058;
+    font-size: 16px;
+    padding: 0 0 12px 0;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+}
+
+.about-description {
+    text-align: justify;
+    color: #485058;
+    font-size: 13px;
+    line-height: 24px;
+    padding-bottom: 24px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+}
+
+.list-heading {
+    font-weight: bold;
+    color: #485058;
+    font-size: 16px;
+    padding-bottom: 12px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+}
+
+.about-component {
+    color: #485058;
+    font-size: 14px;
+    padding-bottom: 24px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+    margin-left: 20px;
+}
+
+    .about-component li {
+        line-height: 24px;
+    }
+
+.control-item {
+    color: #4a90e2;
+    display: flex;
+    line-height: 30px;
+    display: inline-block;
+    width: 168px;
+}
+
+.sfimage-button::before {
+    content: '\e702';
+    color: #35a67a;
+}
+
+.sfimage-schedule::before {
+    content: '\e709';
+    color: #35a67a;
+}
+
+.sfimage-chart::before {
+    content: '\e906';
+    color: #35a67a;
+}
+
+.sfimage-card::before {
+    content: '\e713';
+    color: #35a67a;
+}
+
+.sfimage-sidebar::before {
+    content: '\e705';
+    color: #35a67a;
+}
+
+.sfimage-autocomplete::before {
+    content: '\e70b';
+    color: #35a67a;
+}
+
+.sfimage-datepicker::before {
+    content: '\e90d';
+    color: #35a67a;
+}
+
+.sfimage-timepicker::before {
+    content: '\e927';
+    color: #35a67a;
+}
+
+.sfimage-dialog::before {
+    content: '\e90e';
+    color: #35a67a;
+}
+
+.sfimage-dropdownlist::before {
+    content: '\e70a';
+    color: #35a67a;
+}
+
+.sfimage-grid::before {
+    content: '\e913';
+    color: #35a67a;
+}
+
+.sfimage-checkbox::before {
+    content: '\e707';
+    color: #35a67a;
+}
+
+.sfimage-numerictextbox::before {
+    content: '\e72a';
+    color: #35a67a;
+}
+
+.sfimage-radiobutton::before {
+    content: '\e727';
+    color: #35a67a;
+}
+
+.sfimage-listview::before {
+    content: '\e917';
+    color: #35a67a;
+}
+
+.sfimage-treeview::before {
+    content: '\e92b';
+    color: #35a67a;
+}
+
+.sfimage-textboxes::before {
+    content: '\e919';
+    color: #35a67a;
+}
+
+.sfimage-toast::before {
+    content: '\e716';
+    color: #35a67a;
+}
+
+.sf-icon-skeleton::before {
+    content: '\e904';
+    color: #35a67a;
+}
+
+.sf-icon-appbar::before {
+    content: "\e900";
+    color: #35a67a;
+}
+
+.sf-icon-predefineddialogs::before {
+    content: "\e901";
+    color: #35a67a;
+}
+
+.sf-icon-message::before {
+    content: "\e903";
+    color: #35a67a;
+}
+
+.control-icon {
+    font-size: 18px;
+    margin-right: 15px;
+    vertical-align: middle;
+}
+
+.control-name {
+    font-size: 14px;
+}
+
+/*skeleton*/
+.about-descrip-skeleton {
+    line-height: 20px;
+    margin-top: 30px;
+}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/.gitkeep b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/.gitkeep
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/.gitkeep
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/.gitkeep
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Doctors.svg b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Doctors.svg
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Doctors.svg
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Doctors.svg
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/ThisWeek_Widget.svg b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/ThisWeek_Widget.svg
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/ThisWeek_Widget.svg
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/ThisWeek_Widget.svg
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Today_Widget.svg b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Today_Widget.svg
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/Icons/Today_Widget.svg
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/Icons/Today_Widget.svg
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/favicon.ico b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/favicon.ico
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/favicon.ico
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/favicon.ico
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.eot b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.eot
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.eot
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.eot
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.svg b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.svg
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.svg
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.svg
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.ttf b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.ttf
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.ttf
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.ttf
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.woff b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.woff
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icomoon.woff
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icomoon.woff
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.eot b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.eot
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.eot
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.eot
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.svg b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.svg
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.svg
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.svg
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.ttf b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.ttf
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.ttf
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.ttf
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.woff b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.woff
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/fonts/icons.woff
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/fonts/icons.woff
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/Admin.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/Admin.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/Admin.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/Admin.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AlexaRichardson.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/AlexaRichardson.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AlexaRichardson.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/AlexaRichardson.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AmeliaEdwards.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/AmeliaEdwards.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/AmeliaEdwards.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/AmeliaEdwards.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/MollieCobb.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/MollieCobb.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/MollieCobb.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/MollieCobb.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NemboLukni.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/NemboLukni.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NemboLukni.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/NemboLukni.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NoutGolstein.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/NoutGolstein.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/NoutGolstein.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/NoutGolstein.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/PaulWalker.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/PaulWalker.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/PaulWalker.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/PaulWalker.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/YaraBarros.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/YaraBarros.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/YaraBarros.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/YaraBarros.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/default.png b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/default.png
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/images/default.png
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/images/default.png
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.css
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.css
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.css
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.scss b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.scss
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/assets/styles/bootstrap.scss
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/assets/styles/bootstrap.scss
diff --git a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/calendar.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/calendar.css
similarity index 67%
rename from webapp/server/AppointmentPlanner/wwwroot/css/appoinment/calendar.css
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/calendar.css
index cf3b2ec..d03c97c 100644
--- a/webapp/server/AppointmentPlanner/wwwroot/css/appoinment/calendar.css
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/calendar.css
@@ -1,12 +1,103 @@
-.planner-calendar {
+:root{
+    --primary:#0A5A57;
+    --primary-dark:#045451;
+    --primary-light:#149297;
+    --primary-hover:#1AA5A8;
+
+    --success:#34C759;
+    --warning:#FFB020;
+    --danger:#FF5A5F;
+
+    --bg:#F5F7FA;
+    --card:#FFFFFF;
+    --text:#202939;
+    --muted:#7B8794;
+
+    --radius:24px;
+}
+.planner-calendar {
     font-size: 14px;
     margin: 30px 50px;
-    color: #9aa5bb;
+    color: #475569;
     letter-spacing: 0.05px;
 }
 
+.schedule-page-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.schedule-page-title {
+    color: #333;
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.schedule-page-subtitle {
+    color: #687385;
+    margin: 5px 0 0;
+}
+
+.schedule-summary {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-bottom: 20px;
+}
+
+.schedule-summary-card {
+    border-left: 3px solid #5851e1;
+}
+
+.schedule-summary-card .e-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 12px 16px;
+}
+
+.schedule-summary-label {
+    color: #687385;
+    font-size: 12px;
+}
+
+.schedule-summary-value {
+    color: #333;
+    font-size: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.waiting-list-heading {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+}
+
+.waiting-list-count {
+    background: #5851e1;
+    border-radius: 12px;
+    color: #fff;
+    font-size: 11px;
+    min-width: 24px;
+    padding: 3px 7px;
+    text-align: center;
+}
+
+.waiting-list-empty {
+    border: 1px dashed #cbd3df;
+    color: #687385;
+    margin: 5px 2px;
+    padding: 16px 12px;
+    text-align: center;
+}
+
     .planner-calendar .e-all-day-appointment-wrapper, .planner-calendar .e-timeline-wrapper {
-        font-size: 0;
+        font-size: inherit;
     }
 
     .planner-calendar .drag-sample-wrapper {
@@ -115,6 +206,11 @@
                 padding: 0 !important;
             }
 
+                .planner-calendar .drag-sample-wrapper .treeview-container .waiting-list-search {
+                    margin: 0 5px 10px;
+                    width: 220px;
+                }
+
                 .planner-calendar .drag-sample-wrapper .treeview-container .e-list-parent {
                     height: 100%;
                     padding: 0 2px;
@@ -340,7 +436,7 @@
     }
 
         .add-doctor .e-icon-add::before {
-            content: '\e805';
+            content: '\e95c';
         }
 
     .add-doctor .add-doctor-text {
@@ -393,6 +489,20 @@
         margin: 20px 10px;
     }
 
+        .schedule-page-header {
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .schedule-summary {
+            grid-template-columns: 1fr;
+        }
+
+        .schedule-reset-button {
+            width: 100%;
+        }
+
         .planner-calendar .drag-sample-wrapper {
             display: block;
         }
@@ -636,4 +746,639 @@
 
 .e-schedule .e-schedule-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
     padding: 8px 4px;
+}
+.appointment-layout {
+    display: grid;
+    grid-template-columns: 2fr 380px;
+    gap: 24px;
+}
+.e-list-item .e-list-text{
+    border-radius:16px;
+    background:white;
+    transition:.2s ease;
+}
+
+.e-list-item:hover{
+    transform:translateY(-2px);
+}
+.medicore-theme {
+    background: #f6f7fb;
+}
+
+.appointment-header {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom:24px;
+}
+
+.page-title {
+    font-size:32px;
+    font-weight:700;
+    margin:0;
+    color:#1b1d33;
+}
+
+.page-subtitle {
+    color:#8488a4;
+    margin-top:4px;
+}
+
+.appointment-metrics {
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:20px;
+    margin-bottom:24px;
+}
+
+.metric-card {
+    background:white;
+    padding:24px;
+    border-radius:24px;
+    box-shadow:0 12px 30px rgba(0,0,0,.05);
+}
+
+.metric-label {
+    color:#8a8fac;
+    font-size:13px;
+}
+
+.metric-card h2 {
+    margin-top:12px;
+    color:#252842;
+}
+
+.appointment-layout {
+    display:grid;
+    grid-template-columns:minmax(0,1fr) 360px;
+    gap:24px;
+}
+
+.panel-card {
+    background:white;
+    border-radius:24px;
+    padding:20px;
+    box-shadow:0 12px 30px rgba(0,0,0,.05);
+}
+
+.panel-header {
+    font-size:16px;
+    font-weight:600;
+    margin-bottom:16px;
+}
+
+.appointment-sidebar {
+    display:flex;
+    flex-direction:column;
+    gap:20px;
+}
+
+.status-item {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    padding:12px 0;
+}
+
+.dot {
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    display:inline-block;
+    margin-right:10px;
+}
+
+.green {
+    background:#3BC97A;
+}
+
+.orange {
+    background:#FFB84D;
+}
+
+.purple {
+    background:#6D5DFC;
+}
+
+.new-appointment-btn {
+    background:#6D5DFC !important;
+    border:none !important;
+    color:white !important;
+    border-radius:14px !important;
+}
+
+.waiting-list-section {
+    margin-top:24px;
+    background:white;
+    border-radius:24px;
+    padding:24px;
+    box-shadow:0 12px 30px rgba(0,0,0,.05);
+}
+
+.waiting-list-header {
+    display:flex;
+    align-items:center;
+    gap:10px;
+    margin-bottom:16px;
+}
+
+.waiting-badge {
+    background:#6D5DFC;
+    color:white;
+    padding:4px 10px;
+    border-radius:20px;
+}
+
+.waiting-list-wrapper {
+    margin-top:20px;
+}
+
+.modern-patient-card {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    background:#fff;
+    border:1px solid #edf0f7;
+    border-radius:16px;
+    padding:14px;
+}
+
+.patient-name {
+    font-weight:600;
+    color:#20243a;
+}
+
+.patient-time {
+    color:#8d92ac;
+    font-size:12px;
+}
+
+.doctor-appointment-planner .e-appointment {
+    border-radius:12px;
+}
+
+@media(max-width:1200px){
+
+    .appointment-layout{
+        grid-template-columns:1fr;
+    }
+
+    .appointment-metrics{
+        grid-template-columns:repeat(2,1fr);
+    }
+}
+
+@media(max-width:768px){
+
+    .appointment-metrics{
+        grid-template-columns:1fr;
+    }
+
+    .appointment-header{
+        flex-direction:column;
+        align-items:flex-start;
+        gap:15px;
+    }
+}
+.appointment-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom:24px;
+}
+
+.appointment-title{
+    margin:0;
+    font-size:30px;
+    font-weight:700;
+    color:var(--text);
+}
+
+.appointment-subtitle{
+    color:var(--muted);
+    margin-top:6px;
+}
+
+.header-actions{
+    display:flex;
+    gap:12px;
+}
+
+.primary-btn{
+    background:var(--primary-light)!important;
+    color:#fff!important;
+    border:none!important;
+    border-radius:12px!important;
+}
+
+.outline-btn{
+    background:white!important;
+    border-radius:12px!important;
+}
+#today-appointments-card, #current-doctor-card,
+#waiting-queue-card, #confirmed-card, #status-card {
+    background: #eefff7;
+}
+.trend{
+    display:flex;
+    align-items:center;
+    gap:4px;
+
+    font-size:13px;
+    font-weight:600;
+    margin-top:2px;
+}
+.dashboard-cards{
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:20px;
+    margin-bottom:24px;
+}
+.dashboard-card {
+    border-radius: 16px;
+    padding: 16px;
+    height: 140px;
+    display:flex;
+}
+
+.card-title {
+    display: block;
+    color: #7B8794;
+    font-size: 16px;
+    margin-bottom: 4px;
+    text-align: center;
+    font-weight: 600;
+}
+
+.card-body{
+    display:flex;
+    align-items:center;
+    gap:16px;
+    margin-top:12px;
+}
+.e-calendar{
+    max-width: 350px;
+}
+.dashboard-card .e-card-content{
+    width:100%;
+}
+.ai-card {
+    border-radius: 16px;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.ai-card .card-title {
+    display: block;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.recommendation-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 12px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    background: #fff7ed;
+    border-left: 4px solid #f97316;
+    color: #7c2d12;
+    font-size: 0.9rem;
+}
+
+.recommendation-item .e-icons {
+    color: #f97316;
+    font-size: 16px;
+    margin-top: 2px;
+}
+.utilization-card {
+    margin-top: 20px;
+}
+
+.utilization-card .card-title {
+    display: block;
+    margin-bottom: 16px;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.utilization-row {
+    margin-bottom: 14px;
+}
+
+.utilization-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 6px;
+}
+
+.utilization-name {
+    font-size: 14px;
+    color: #374151;
+}
+
+.utilization-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.utilization-bar {
+    height: 8px;
+    border-radius: 999px;
+    background: #e5e7eb;
+    overflow: hidden;
+}
+
+.utilization-fill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width .3s ease;
+}
+
+.utilization-fill.high {
+    background: #ef4444;
+}
+
+.utilization-fill.medium {
+    background: #f59e0b;
+}
+
+.utilization-fill.low {
+    background: #22c55e;
+}
+.icon-box {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+}
+
+.icon-box .e-icons {
+    font-size: 22px;
+}
+
+.card-info {
+    flex: 1;
+}
+
+.card-info h2{
+    margin:0;
+    line-height:1;
+    font-size:36px;
+    font-weight:700;
+    color:#111827;
+}
+.card-info{
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:flex-start;
+    gap:4px;
+}
+
+
+.appointment-icon{
+    background:#149297;
+}
+
+.doctor-icon{
+    background:#0A5A57;
+}
+
+.waiting-icon{
+    background:#FFB020;
+}
+
+.department-icon{
+    background:#34C759;
+}
+
+.card-details{
+    flex:1;
+}
+
+.card-details h2{
+    margin:0;
+    color:#202939;
+    font-size:24px;
+    font-weight:700;
+}
+.appointment-layout{
+    display:grid;
+    grid-template-columns:1fr 340px;
+    gap:20px;
+}
+
+.sidebar-section{
+    display:flex;
+    flex-direction:column;
+    gap:20px;
+}
+
+@media(max-width:1200px){
+
+    .appointment-layout{
+        grid-template-columns:1fr;
+    }
+
+    .dashboard-cards{
+        grid-template-columns:repeat(2,1fr);
+    }
+}
+
+@media(max-width:768px){
+
+    .dashboard-cards{
+        grid-template-columns:1fr;
+    }
+
+    .appointment-header{
+        flex-direction:column;
+        align-items:flex-start;
+    }
+}
+
+.sidebar-card{
+    background:#fff !important;
+    border:none !important;
+    border-radius:20px !important;
+    box-shadow:0 8px 24px rgba(0,0,0,.05);
+}
+
+.status-card{
+    padding:10px;
+}
+
+.status-row{
+    display:flex;
+    align-items:center;
+    justify-content:space-around;
+    padding:12px 0;
+    border-bottom:1px solid #edf2f7;
+}
+
+.status-row:last-child{
+    border-bottom:none;
+}
+
+.status-label{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    color:#485465;
+    font-size:14px;
+}
+
+.status-dot{
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    display:inline-block;
+}
+
+.status-dot.confirmed{
+    background:#2ecc71;
+}
+
+.status-dot.pending{
+    background:#f5a623;
+}
+
+.status-dot.cancelled{
+    background:#e74c3c;
+}
+
+.status-row strong{
+    color:#202939;
+    font-size:14px;
+    font-weight:600;
+}
+.status-card .e-card-header{
+    font-weight:700;
+    color:var(--primary-dark);
+}
+
+.status-card .e-card-content{
+    padding-top:0 !important;
+}
+.e-schedule .e-agenda-view .e-empty-event {
+    font-size: 0;
+    text-align: center;
+    padding: 40px;
+}
+
+.e-schedule .e-agenda-view .e-empty-event::before {
+    content: "📅 No appointments scheduled";
+    font-size: 18px;
+    color: #888;
+    font-weight: 600;
+}
+.planner-toolbar{
+    display:flex;
+    gap:12px;
+    margin-bottom:20px;
+}
+.modern-agenda-card{
+    display:flex;
+    align-items:center;
+    gap:16px;
+
+    padding:16px;
+    margin:8px 0;
+
+    background:white;
+    border-radius:16px;
+
+    box-shadow:0 2px 8px rgba(0,0,0,.06);
+
+    transition:.2s;
+}
+
+.modern-agenda-card:hover{
+    transform:translateY(-2px);
+}
+
+.agenda-time{
+    width:70px;
+    text-align:center;
+    font-weight:700;
+    color:#1F2937;
+}
+
+.agenda-time span{
+    display:block;
+    color:#6B7280;
+    font-size:12px;
+}
+
+.agenda-avatar{
+    width:48px;
+    height:48px;
+
+    border-radius:50%;
+
+    background:#149297;
+    color:white;
+
+    display:flex;
+    align-items:center;
+    justify-content:center;
+
+    font-weight:700;
+}
+
+.agenda-content{
+    flex:1;
+}
+
+.agenda-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+}
+
+.agenda-header h4{
+    margin:0;
+    color:#111827;
+}
+
+.agenda-subtitle{
+    color:#6B7280;
+    margin-top:4px;
+}
+
+.agenda-footer{
+    margin-top:6px;
+    font-size:13px;
+    color:#475467;
+}
+
+.status-pill{
+    padding:4px 10px;
+    border-radius:20px;
+
+    background:#ECFDF3;
+    color:#027A48;
+
+    font-size:12px;
+    font-weight:600;
+}
+.schedule-legend{
+    margin: 40px;
+}
+
+.e-appointment.e-lib.e-draggable{
+    height: 45px !important;
+
 }
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/common.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/common.css
similarity index 85%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/common.css
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/common.css
index 6025356..43adb68 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/common.css
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/common.css
@@ -1,10 +1,10 @@
 .e-btn.e-primary {
-    background-color: #7575ff !important;
-    border-color: #4242ff !important;
+    background-color: #066b6b !important;
+    border-color: #066b6b !important;
 }
 
 .e-btn.e-primary:hover {
-        background-color: #4242ff !important;
+    background-color: #066b6b !important;
 }
 
 
@@ -75,14 +75,14 @@
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    border-color: #7575ff !important;
+    border-color: #066b6b !important;
 }
 
 .e-input-group:active:not(.e-warning):not(.e-error):not(.e-disabled),
 .e-input-group.e-control-wrapper:active:not(.e-warning):not(.e-error):not(.e-disabled) {
-    border-color: #7575ff !important;
+    border-color: #066b6b !important;
 }
 
 .e-dropdownbase .e-list-item.e-active {
-    background-color: #7575ff !important;
-}
+    background-color: #066b6b !important;
+}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/dashboard.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/dashboard.css
new file mode 100644
index 0000000..539bc3b
--- /dev/null
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/dashboard.css
@@ -0,0 +1,2700 @@
+
+:root {
+    /* Brand */
+    --ap-brand-900: #0a4d4a;
+    --ap-brand-700: #0a8a8a;
+    --ap-brand-050: #e6f4f4;
+
+    /* Brand: accessible text fg on light surfaces (4.7:1 on white) */
+    --ap-brand-text: #066b6b;
+
+    /* Surfaces */
+    --ap-surface: #ffffff;
+    --ap-surface-alt: #f6f8fc;
+    --ap-border: #e2e8f0;
+    --ap-border-strong: #cbd5e1;
+
+    /* Text (all AA on white) */
+    --ap-text: #0f172a;
+    --ap-text-secondary: #334155;   /* 10.3:1 */
+    --ap-text-muted: #475569;       /* 7.4:1  - replaces failing #94a3b8 */
+    --ap-text-inverse: #ffffff;
+
+    /* Semantic */
+    --ap-danger: #b91c1c;
+    --ap-danger-bg: #fee2e2;
+    --ap-warning: #b45309;
+    --ap-warning-bg: #fef3c7;
+    --ap-success: #15803d;
+    --ap-success-bg: #dcfce7;
+    --ap-info: #1d4ed8;
+    --ap-info-bg: #dbeafe;
+
+    /* Spacing scale (4px base) */
+    --ap-s1: 4px;
+    --ap-s2: 8px;
+    --ap-s3: 12px;
+    --ap-s4: 16px;
+    --ap-s5: 20px;
+    --ap-s6: 24px;
+    --ap-s8: 32px;
+
+    /* Radii */
+    --ap-r-sm: 8px;
+    --ap-r-md: 12px;
+    --ap-r-lg: 16px;
+    --ap-r-pill: 999px;
+
+    /* Shadows */
+    --ap-shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .05);
+    --ap-shadow-2: 0 4px 16px rgba(15, 23, 42, .08);
+
+    /* Touch target */
+    --ap-touch: 44px;
+}
+
+#dashboard-modern {
+    padding: var(--ap-s6) var(--ap-s8) var(--ap-s8);
+    background: var(--ap-surface-alt);
+    font-family: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    min-height: 100%;
+    box-sizing: border-box;
+    font-size: 14px;              /* readable base */
+    color: var(--ap-text);
+    line-height: 1.5;
+    max-width: 100%;
+    overflow-x: hidden;
+}
+.dashboard-container { max-width: 100%; min-width: 0; }
+
+/* Skip to main content link (accessibility) */
+#dashboard-modern .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--ap-brand-900);
+    color: white;
+    padding: 8px 16px;
+    text-decoration: none;
+    border-radius: 0 0 4px 0;
+    font-weight: 600;
+    z-index: 9999;
+}
+#dashboard-modern .skip-link:focus {
+    top: 0;
+    outline: 3px solid var(--ap-brand-700);
+    outline-offset: 2px;
+}
+
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ap-s4);
+    margin-bottom: var(--ap-s5);
+    flex-wrap: wrap;
+}
+.page-eyebrow {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ap-text-muted);
+    margin-bottom: 2px;
+    text-transform: none;
+    letter-spacing: 0;
+}
+.page-title {
+    margin: 0;
+    /* font-size: 16px; */
+    /* font-weight: 400; */
+    letter-spacing: -0.3px;
+    color: var(--ap-text);
+    line-height: 1.2;
+}
+.page-title .wave {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: 20px;
+    transform: translateY(-1px);
+}
+.page-meta {
+    display: block;
+    margin-top: 4px;
+    font-size: 12.5px;
+    color: var(--ap-text-muted);
+}
+.page-meta .page-meta-text {
+    margin: 0;
+    font-size: inherit;
+    color: inherit;
+}
+.page-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    flex-wrap: wrap;
+}
+
+/* Global search (functional, filters the queue) */
+.global-search-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 280px;
+    height: 42px;
+    border: 1px solid var(--ap-border);
+    border-radius: var(--ap-r-sm);
+    background: var(--ap-surface);
+    transition: border-color .15s, box-shadow .15s;
+}
+.global-search-wrap:focus-within {
+    border-color: var(--ap-brand-700);
+    box-shadow: 0 0 0 3px rgba(10, 138, 138, .14);
+}
+.global-search-wrap .search-icon {
+    position: absolute;
+    left: 12px;
+    color: var(--ap-text-muted);
+    font-size: 14px;
+    pointer-events: none;
+}
+.global-search-wrap input {
+    border: 0;
+    outline: none;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    padding: 0 12px 0 34px;
+    font-size: 13.5px;
+    color: var(--ap-text);
+    font-family: inherit;
+}
+.global-search-wrap input::placeholder { color: #64748b; }
+
+/* AI button */
+.ai-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 42px;
+    padding: 0 16px;
+    border: 0;
+    background: var(--ap-brand-900); /* WCAG AA: 8.9:1 with white text */
+    color: #fff;
+    font-size: 13.5px;
+    font-weight: 600;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    transition: filter .15s;
+    font-family: inherit;
+}
+.ai-button:hover { filter: brightness(0.92); }
+.ai-button .e-icons { font-size: 15px; }
+
+/* Bell */
+.bell-btn {
+    position: relative;
+    width: 42px;
+    height: 42px;
+    border: 1px solid var(--ap-border);
+    border-radius: 50%;
+    background: var(--ap-surface);
+    color: var(--ap-text-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background .15s;
+    font-size: 15px;
+}
+.bell-btn:hover { background: #f1f5f9; }
+.bell-btn .badge-dot {
+    position: absolute;
+    top: 8px;
+    right: 9px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--ap-danger);
+    border: 2px solid #fff;
+}
+
+.critical-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    background: linear-gradient(90deg, #fef2f2, #fff5f5);
+    border: 1px solid #fecaca;
+    border-left: 4px solid var(--ap-danger);
+    border-radius: var(--ap-r-md);
+    padding: var(--ap-s3) var(--ap-s4);
+    margin-bottom: var(--ap-s4);
+}
+.critical-banner .banner-icon { color: var(--ap-danger); font-size: 18px; }
+.critical-banner .banner-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+.critical-banner .banner-text strong {
+    color: var(--ap-danger);
+    font-size: 14px;
+}
+.critical-banner .banner-meta {
+    color: var(--ap-text-muted);
+    font-size: 12px;
+}
+.critical-banner .banner-cta {
+    border: 0;
+    background: var(--ap-danger);
+    color: #fff;
+    font-weight: 600;
+    font-size: 13px;
+    padding: 10px 16px;
+    min-height: 40px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: filter .15s;
+}
+.critical-banner .banner-cta:hover { filter: brightness(0.92); }
+
+.cta-strip {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    margin-bottom: var(--ap-s4);
+    flex-wrap: wrap;
+}
+.cta-strip .cta-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: var(--ap-touch);
+    padding: 0 var(--ap-s5);
+    border: 0;
+    background: var(--ap-brand-900); /* WCAG AA: 8.9:1 with white text */
+    color: #fff;
+    font-size: 13.5px;
+    font-weight: 600;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    box-shadow: var(--ap-shadow-1);
+    transition: filter .15s;
+    font-family: inherit;
+}
+.cta-strip .cta-primary:hover { filter: brightness(0.92); }
+.cta-strip .cta-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: var(--ap-touch);
+    padding: 0 var(--ap-s5);
+    background: var(--ap-surface);
+    color: var(--ap-brand-900);
+    border: 1px solid var(--ap-border);
+    font-size: 13.5px;
+    font-weight: 600;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    transition: background .15s;
+    font-family: inherit;
+}
+.cta-strip .cta-secondary:hover { background: #f1f5f9; }
+.cta-strip .cta-live {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    font-size: 13px;
+    font-weight: 600;
+    color: #166534; /* WCAG AA: green-800 on --ap-surface-alt (5.0:1) */
+}
+
+/* Schedule-appointment calendar popup */
+.schedule-popup {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    z-index: 1100;
+    background: var(--ap-surface);
+    border: 1px solid var(--ap-border);
+    border-radius: var(--ap-r-md);
+    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
+    padding: var(--ap-s3);
+    width: 320px;
+    animation: popIn .15s ease-out;
+}
+.schedule-popup-head {
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--ap-text-muted);
+    margin-bottom: var(--ap-s2);
+    padding-left: 2px;
+}
+.schedule-popup .e-calendar {
+    border: 0 !important;
+    box-shadow: none !important;
+    width: 100%;
+}
+
+.dashboard-kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+.modern-kpi {
+    border-radius: var(--ap-r-lg);
+    border: 1px solid var(--ap-border) !important;
+    background: var(--ap-surface) !important;
+    box-shadow: var(--ap-shadow-1) !important;
+    transition: transform .2s ease, box-shadow .2s ease;
+}
+.modern-kpi:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--ap-shadow-2) !important;
+}
+.modern-kpi .e-card-content { padding: var(--ap-s5); }
+#active-patients-card  {background: #e6f4f4; border-color: #0a8a8a;}
+#waiting-patients-card  {background: #f7d5f7;  border-color: #d97706;}
+#doctors-available-card {background: #dbeafe; border-color: #3b82f6;}
+#completed-visits-card {background: #dcfce7; border-color: #22c55e;}
+#care-alert-card {background: #fef2f2; border-color: #b91c1c;}
+.kpi-patient{
+color: #087c4d !important
+}
+.kpi-waiting{
+color:#de82de !important; 
+}
+.kpi-available{
+    color:#366eb9 !important;
+}
+.kpi-completed{
+    color:#34bc63 !important;
+}
+
+.kpi-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ap-s2);
+    padding-left: 10px;
+}
+.kpi-title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .07em;
+    color: var(--ap-text-muted);
+    padding-left: 10px;
+}
+.kpi-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 25px;
+}
+.kpi-value {
+    font-size: 40px;
+    font-weight: 800;
+    color: var(--ap-text);
+    line-height: 1.05;
+    letter-spacing: -0.5px;
+    font-variant-numeric: tabular-nums;
+    margin: var(--ap-s1) 0;
+    padding-left: 10px;
+}
+.kpi-value .kpi-sub {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ap-text-muted);
+    margin-left: 2px;
+}
+.kpi-trend {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: var(--ap-s2);
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding-left: 10px;
+}
+.kpi-trend.positive { color: var(--ap-success); }
+.kpi-trend.negative { color: var(--ap-danger); }
+.kpi-trend.neutral  { color: var(--ap-text-muted); }
+.kpi-trend-meta { color: var(--ap-text-muted); font-weight: 500; }
+
+/* Progress meter */
+.kpi-meter {
+    height: 6px;
+    border-radius: var(--ap-r-pill);
+    background: #eef2f7;
+    overflow: hidden;
+}
+.kpi-meter span {
+    display: block;
+    height: 100%;
+    border-radius: var(--ap-r-pill);
+    background: var(--ap-brand-700);
+    transition: width .4s ease;
+}
+
+.dash-card {
+    background: var(--ap-surface) !important;
+    border: 1px solid var(--ap-border) !important;
+    border-radius: var(--ap-r-lg) !important;
+    box-shadow: var(--ap-shadow-1) !important;
+    padding: var(--ap-s5);
+    transition: transform .2s ease, box-shadow .2s ease;
+}
+.dash-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--ap-shadow-2) !important;
+}
+.dash-card .e-card-content { padding: 0; }
+.dash-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--ap-s3);
+    gap: var(--ap-s3);
+    flex-wrap: wrap;
+}
+.dash-card-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: 0;
+    letter-spacing: -0.2px;
+}
+.card-subtitle {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+}
+.dash-card-actions {
+    color: var(--ap-text-muted);
+    cursor: pointer;
+    font-size: 16px;
+    background: transparent;
+    border: 0;
+    padding: 6px 10px;
+    border-radius: var(--ap-r-sm);
+    min-width: 36px;
+    min-height: 36px;
+}
+.dash-card-actions:hover { background: #f1f5f9; color: var(--ap-text); }
+
+/* Rows */
+.insights-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+.dash-row-3col {
+    display: grid;
+    grid-template-columns: 1.1fr 1.1fr 0.9fr;
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+.dash-row-2col {
+    display: grid;
+    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+    gap: var(--ap-s5);
+    margin-bottom: var(--ap-s5);
+}
+
+.dash-row-2col > *,
+.dash-row-3col > *,
+.dash-row-bottom > *,
+.dash-hero > *,
+.dash-hero-left > *,
+.insights-row > *,
+.dashboard-kpi-grid > * {
+    min-width: 0;
+}
+.dash-card .e-grid,
+.dash-card .e-grid .e-gridcontent,
+.dash-card .e-grid table {
+    max-width: 100%;
+}
+.dash-card .e-grid .e-content {
+    overflow-x: auto;  /* queue rows become horizontally scrollable, not the page */
+}
+
+.alert-chips {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    flex-wrap: wrap;
+}
+.alert-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    border: 1px solid transparent;
+    font-size: 13px;
+    font-weight: 600;
+    min-height: 40px;
+    padding: 8px var(--ap-s4);
+    border-radius: var(--ap-r-pill);
+    cursor: pointer;
+    transition: transform .12s, box-shadow .12s, filter .12s;
+}
+.alert-chip:hover { filter: brightness(0.96); }
+.alert-chip.selected {
+    box-shadow: 0 0 0 3px rgba(10, 138, 138, .35);
+    border-color: var(--ap-brand-700);
+}
+.alert-chip .chip-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    flex: 0 0 9px;
+}
+.alert-chip.critical { background: var(--ap-danger-bg);  color: var(--ap-danger);  }
+.alert-chip.critical .chip-dot { background: var(--ap-danger); }
+.alert-chip.warning  { background: var(--ap-warning-bg); color: var(--ap-warning); }
+.alert-chip.warning .chip-dot { background: var(--ap-warning); }
+.alert-chip.success  { background: var(--ap-success-bg); color: var(--ap-success); }
+.alert-chip.success .chip-dot { background: var(--ap-success); }
+.alert-chip.clear {
+    background: transparent;
+    border: 1px dashed var(--ap-border-strong);
+    color: var(--ap-text-muted);
+}
+
+.dash-tabs {
+    display: inline-flex;
+    background: #f1f5f9;
+    border-radius: var(--ap-r-sm);
+    padding: var(--ap-s1);
+    gap: 2px;
+}
+.dash-tab {
+    border: 0;
+    background: transparent;
+    color: var(--ap-text-muted);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 8px var(--ap-s4);
+    min-height: 36px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background .15s, color .15s;
+}
+.dash-tab:hover { background: #e2e8f0; color: var(--ap-text); }
+.dash-tab.active {
+    background: var(--ap-brand-700);
+    color: #fff;
+}
+
+.patients-grid {
+    margin: 0;
+    width: 100%;
+    overflow: visible;
+}
+.patients-empty {
+    padding: var(--ap-s4);
+    color: var(--ap-text-muted);
+    font-size: 13px;
+    text-align: center;
+    border: 1px dashed var(--ap-border-strong);
+    border-radius: var(--ap-r-md);
+    margin-bottom: var(--ap-s2);
+    background: #fafbfc;
+}
+.patients-empty strong { color: var(--ap-text-secondary); }
+.link-btn {
+    border: 0;
+    background: transparent;
+    color: var(--ap-brand-700);
+    font-weight: 600;
+    cursor: pointer;
+    text-decoration: underline;
+    font-size: 13px;
+    padding: 0;
+}
+.patients-grid .e-grid {
+    border: 0 !important;
+    background: transparent !important;
+    border-radius: var(--ap-r-md) !important;
+    font-family: inherit !important;
+    width: 100% !important;
+    overflow: visible !important;
+}
+.patients-grid .e-grid table {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    table-layout: auto;
+}
+.patients-grid .e-grid .e-headercell,
+.patients-grid .e-grid .e-rowcell {
+    background: var(--ap-surface) !important;
+    border-color: #f1f5f9 !important;
+    overflow: visible !important;
+}
+.patients-grid .e-grid .e-headercell {
+    color: var(--ap-text-muted) !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: .06em !important;
+    font-weight: 700 !important;
+    background: #fafbfc !important;
+    white-space: normal !important;
+}
+.patients-grid .e-grid .e-rowcell {
+    font-size: 13.5px !important;
+    color: var(--ap-text-secondary) !important;
+    padding: 12px !important;
+    line-height: 1.45 !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
+}
+.patients-grid .e-grid .e-row:hover .e-rowcell { background: #fafbfc !important; }
+.patients-grid .e-grid .e-row:focus .e-rowcell { outline: 2px solid var(--ap-brand-700); outline-offset: -2px; }
+.patients-grid .e-grid .e-row:focus .e-rowcell { outline: 0; }
+.patients-grid .e-grid .e-headercontent {
+    border-bottom: 1px solid #eef2f7 !important;
+}
+.patients-grid .e-grid .e-content {
+    overflow-x: auto !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+}
+
+.pname {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    font-weight: 600;
+    color: var(--ap-text);
+}
+.pavatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #64748b, #475569);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    flex: 0 0 32px;
+}
+
+/* Status chips (grid) - Enhanced with clear text labels */
+.chip-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12.5px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+.chip-status .chip-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Chip-based status spans (replacing SfChip component) */
+.critical-chip,
+.warning-chip,
+.waiting-chip,
+.priority-urgent-chip,
+.priority-high-chip,
+.priority-medium-chip,
+.priority-low-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12.5px;
+    font-weight: 600;
+    white-space: nowrap;
+    border: 1px solid;
+}
+
+/* Critical status - always includes text label */
+.critical-chip {
+    background: var(--ap-danger-bg) !important;
+    color: var(--ap-danger) !important;
+    border-color: var(--ap-danger) !important;
+}
+.critical-chip .chip-dot {
+    background: var(--ap-danger) !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Warning status - always includes text label */
+.warning-chip {
+    background: var(--ap-warning-bg) !important;
+    color: var(--ap-warning) !important;
+    border-color: var(--ap-warning) !important;
+}
+.warning-chip .chip-dot {
+    background: var(--ap-warning) !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Waiting status - always includes text label */
+.waiting-chip {
+    background: var(--ap-info-bg) !important;
+    color: var(--ap-info) !important;
+    border-color: var(--ap-info) !important;
+}
+.waiting-chip .chip-dot {
+    background: var(--ap-info) !important;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+}
+
+/* Status labels outside chips - for non-chip status displays */
+.status-done {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-success);
+    font-weight: 600;
+    font-size: 12.5px;
+}
+.status-done::before {
+    content: '✓';
+    font-weight: 700;
+    font-size: 14px;
+}
+
+.status-checkedin {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-info);
+    font-weight: 600;
+    font-size: 12.5px;
+}
+.status-checkedin::before {
+    content: '●';
+    font-size: 8px;
+}
+
+/* Priority chips */
+.priority-urgent-chip,
+.priority-high-chip,
+.priority-normal-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12.5px;
+    font-weight: 600;
+    white-space: nowrap;
+    border: 1px solid;
+}
+
+.priority-urgent-chip {
+    background: #fee2e2 !important;
+    color: #991b1b !important;
+    font-weight: 700 !important;
+    border-color: #dc2626 !important;
+}
+.priority-urgent-chip::before {
+    content: '🔴 ';
+}
+
+.priority-high-chip {
+    background: #ffedd5 !important;
+    color: #9a3412 !important;
+    font-weight: 600 !important;
+    border-color: #ea580c !important;
+}
+.priority-high-chip::before {
+    content: '🟠 ';
+}
+
+.priority-normal-chip {
+    background: var(--ap-success-bg) !important;
+    color: #166534 !important;
+    border-color: #16a34a !important;
+}
+.priority-normal-chip::before {
+    content: '🟢 ';
+}
+
+/* Inline row actions */
+.row-action-btn {
+    border: 1px solid var(--ap-brand-700);
+    background: var(--ap-brand-700);
+    color: #fff;
+    font-size: 12.5px;
+    font-weight: 600;
+    min-height: 34px;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    margin-right: 6px;
+    transition: filter .12s;
+}
+.row-action-btn:hover { filter: brightness(0.92); }
+.row-action-btn.ghost {
+    background: transparent;
+    color: var(--ap-brand-700);
+}
+
+.upcoming-card { padding-bottom: var(--ap-s4); }
+.upcoming-month {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: var(--ap-s1) 0 var(--ap-s3) 0;
+}
+.upcoming-month .nav-btn {
+    border: 0;
+    background: transparent;
+    color: var(--ap-text-muted);
+    width: 36px;
+    height: 36px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+    font-size: 16px;
+    transition: background .15s;
+}
+.upcoming-month .nav-btn:hover { background: #f1f5f9; }
+.upcoming-month .month-label {
+    font-weight: 700;
+    color: var(--ap-text);
+    font-size: 13px;
+}
+.upcoming-week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin-bottom: var(--ap-s4);
+}
+.upcoming-week .day {
+    background: #f8fafc;
+    border-radius: var(--ap-r-sm);
+    text-align: center;
+    padding: var(--ap-s2) var(--ap-s1);
+    font-size: 11px;
+    color: var(--ap-text-muted);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background .15s;
+    font-weight: 500;
+    min-height: var(--ap-touch);
+}
+.upcoming-week .day:hover { background: var(--ap-brand-050); }
+.upcoming-week .day .dnum {
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin-top: 2px;
+}
+.upcoming-week .day.selected {
+    background: var(--ap-brand-700);
+    border-color: var(--ap-brand-900);
+    color: #fff;
+}
+.upcoming-week .day.selected .dnum { color: #fff; }
+
+.upcoming-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 360px;
+    overflow-y: auto;
+    padding: var(--ap-s1) 2px 0;
+}
+.upcoming-empty {
+    padding: var(--ap-s6) var(--ap-s1);
+    text-align: center;
+    color: var(--ap-text-muted);
+    font-size: 13px;
+    border: 1px dashed var(--ap-border);
+    border-radius: var(--ap-r-md);
+    background: #fafbfc;
+}
+.upcoming-listview {
+    border: 0 !important;
+    background: transparent !important;
+    display: block !important;
+}
+
+.dash-skeleton { padding: var(--ap-s6) var(--ap-s8); }
+.dash-skeleton .sk-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--ap-s5);
+}
+.dash-skeleton .sk-block {
+    height: 140px;
+    border-radius: var(--ap-r-lg);
+    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
+    background-size: 200% 100%;
+    animation: skShimmer 1.4s infinite;
+}
+@keyframes skShimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+#dashboard-modern :is(button, a, input, [tabindex]):focus-visible {
+    outline: 3px solid var(--ap-brand-700) !important;
+    outline-offset: 2px !important;
+    border-radius: 2px !important;
+}
+#dashboard-modern :is(button, a, input, [tabindex]):focus:not(:focus-visible) {
+    outline: none !important;
+}
+
+
+@media (prefers-contrast: more) {
+    :root {
+        --ap-text: #000000;
+        --ap-text-secondary: #000000;
+        --ap-text-muted: #333333;
+        --ap-brand-900: #004d4a;
+        --ap-brand-700: #007a7a;
+    }
+    #dashboard-modern :is(button, a, input, [tabindex]):focus-visible {
+        outline-width: 4px;
+    }
+}
+
+@media (forced-colors: active) {
+    #dashboard-modern,
+    .dashboard-kpi-grid,
+    .dash-card,
+    .alert-chip,
+    button {
+        border-color: CanvasText;
+        color: CanvasText;
+    }
+    .alert-chip.selected {
+        border-color: Highlight;
+    }
+    #dashboard-modern :is(button, a, input, [tabindex]):focus-visible {
+        outline: 3px solid Highlight;
+    }
+}
+
+
+@media (max-width: 1200px) {
+    .dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr); }
+    .dash-row-3col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+    .dash-row-3col > .dash-card:nth-child(3) { grid-column: span 2; }
+    .page-header { flex-direction: column; align-items: stretch; }
+    .page-header-actions { width: 100%; }
+}
+
+@media (max-width: 1000px) {
+    #dashboard-modern { padding: var(--ap-s5); }
+    .dash-row-2col { grid-template-columns: minmax(0, 1fr); }
+    .dash-row-3col { grid-template-columns: minmax(0, 1fr); }
+    .dash-row-3col > .dash-card:nth-child(3) { grid-column: auto; }
+    .global-search-wrap { width: 200px; }
+}
+
+@media (max-width: 768px) {
+    /* Tablet adjustments */
+    #dashboard-modern { padding: var(--ap-s4) var(--ap-s4); }
+    .dashboard-kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--ap-s4); }
+    .page-header { gap: var(--ap-s3); margin-bottom: var(--ap-s4); }
+    .page-title { font-size: 20px; }
+    .page-header-actions { gap: var(--ap-s2); }
+    .global-search-wrap { width: 150px; }
+
+    /* Improve touch targets on tablet */
+    button { min-height: var(--ap-touch); }
+    .cta-strip { gap: var(--ap-s2); }
+    .alert-chip { min-height: 44px; padding: 10px var(--ap-s4); }
+
+    /* Better table visibility on tablet */
+    .patients-grid .e-grid .e-rowcell { padding: 14px 10px !important; }
+    .upcoming-week { grid-template-columns: repeat(5, 1fr); }
+    .upcoming-item { min-height: 60px; padding: 12px 4px; }
+}
+
+@media (max-width: 640px) {
+    /* Mobile optimizations */
+    #dashboard-modern { padding: var(--ap-s3) var(--ap-s3); }
+    .dashboard-kpi-grid { grid-template-columns: 1fr; gap: var(--ap-s3); }
+    .dashboard-kpi-strip { grid-template-columns: 1fr 1fr; }
+    .dash-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
+    .global-search-wrap { width: 100%; order: 10; }
+    .cta-strip { flex-direction: column; align-items: stretch; gap: var(--ap-s2); }
+    .cta-strip .cta-live { margin-left: 0; justify-content: center; }
+    .cta-strip .cta-primary,
+    .cta-strip .cta-secondary { width: 100%; }
+
+    /* Page header responsive */
+    .page-header { flex-direction: column; gap: var(--ap-s2); }
+    .page-title { font-size: 20px; margin-bottom: var(--ap-s2); }
+    .page-header-actions { flex-direction: column; width: 100%; gap: var(--ap-s2); }
+    .global-search-wrap { width: 100%; }
+
+    /* KPI cards more readable */
+    .kpi-value { font-size: 32px; margin: 6px 0; }
+    .kpi-value .kpi-sub { font-size: 16px; }
+
+    /* Cards full width */
+    .dash-row-2col { grid-template-columns: 1fr; }
+    .dash-row-3col { grid-template-columns: 1fr; }
+    .dash-card { padding: var(--ap-s4); }
+
+    /* Table improvements for mobile */
+    .patients-grid .e-grid .e-headercell,
+    .patients-grid .e-grid .e-rowcell {
+        padding: 10px 8px !important;
+        font-size: 12px !important;
+    }
+    .patients-grid .e-grid { height: auto !important; }
+    .patients-grid .e-content {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Upcoming appointments mobile */
+    .upcoming-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
+    .upcoming-week .day {
+        padding: 6px 2px;
+        min-height: 48px;
+        font-size: 10px;
+    }
+    .upcoming-week .day .dnum { font-size: 12px; }
+    .upcoming-item {
+        gap: var(--ap-s2);
+        min-height: 56px;
+        padding: 10px 4px;
+        flex-wrap: wrap;
+    }
+    .upcoming-item .uinfo   { flex: 1 1 calc(100% - 50px); min-width: 0; }
+    .upcoming-item .appointment-actions {
+        flex: 1 1 100%;
+        flex-direction: row;
+        gap: 4px;
+        margin-top: 4px;
+    }
+    .appointment-actions .row-action-btn {
+        width: 100%;
+        margin-right: 0;
+        min-height: 40px;
+    }
+    .upcoming-item .ustatus {
+        display: none;
+    }
+}
+
+@media (min-width: 641px) and (max-width: 900px) {
+    .upcoming-item { flex-wrap: wrap; padding: 10px 6px; }
+    .upcoming-item .uinfo { flex: 1 1 0; min-width: 0; }
+    .upcoming-item .appointment-actions { width: 100%; margin-top: 6px; }
+    .appointment-actions .row-action-btn { flex: 1 1 0; }
+}
+
+    /* Alert banner mobile */
+    .critical-banner {
+        flex-wrap: wrap;
+        gap: var(--ap-s2);
+    }
+    .critical-banner .banner-text {
+        order: 1;
+        width: 100%;
+    }
+    .critical-banner .banner-cta {
+        order: 2;
+        width: 100%;
+        text-align: center;
+    }
+
+    /* Charts responsive */
+    .dash-card SfChart,
+    .dash-card .e-chart {
+        width: 100% !important;
+    }
+
+    /* Donut legend on mobile */
+    .donut-legend {
+        grid-template-columns: 1fr;
+        gap: var(--ap-s2) var(--ap-s3);
+    }
+
+@media (prefers-reduced-motion: reduce) {
+    .modern-kpi, .dash-card { transition: none; }
+    .modern-kpi:hover, .dash-card:hover { transform: none; }
+    .dash-skeleton .sk-block { animation: none; }
+    .pulse-dot { animation: none; }
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+.pulse-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: #10b981;
+    animation: pulse 2s infinite;
+    display: inline-block;
+}
+@keyframes pulse {
+    0%   { transform: scale(1);    opacity: 1; }
+    50%  { transform: scale(1.45); opacity: .7; }
+    100% { transform: scale(1);    opacity: 1; }
+}
+
+.upcoming-listview {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+.upcoming-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    padding: 14px 4px;
+    min-height: 68px;
+    border-bottom: 1px solid #f1f5f9;
+}
+.upcoming-item:last-child { border-bottom: 0; }
+.upcoming-item .uavatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #64748b, #475569);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 13px;
+    flex: 0 0 40px;
+}
+.upcoming-item .uinfo {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+.upcoming-item .uname {
+    font-weight: 600;
+    color: var(--ap-text);
+    font-size: 13px;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.upcoming-item .utime {
+    color: var(--ap-text-muted);
+    font-size: 12px;
+    line-height: 1.3;
+}
+.upcoming-item .ustatus {
+    font-size: 11px;
+    font-weight: 700;
+    padding: 4px 10px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+@media print {
+    #dashboard-modern {
+        padding: 0;
+        background: white;
+    }
+    .cta-strip,
+    .page-header-actions,
+    .nav-btn,
+    .dash-card-actions,
+    .row-action-btn,
+    .bell-btn,
+    .ai-button {
+        display: none;
+    }
+    .dash-card,
+    .modern-kpi {
+        page-break-inside: avoid;
+        box-shadow: none;
+        border: 1px solid #ddd;
+    }
+    .patients-grid .e-grid .e-row:hover .e-rowcell {
+        background: white !important;
+    }
+    .upcoming-item {
+        page-break-inside: avoid;
+    }
+}
+.upcoming-item .ustatus.online { color: var(--ap-success); background: var(--ap-success-bg); }
+.upcoming-item .ustatus.offline { color: var(--ap-text-secondary); background: #e2e8f0; }
+
+/* Checked-in / completed states */
+.status-checkedin {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-info);
+    background: var(--ap-info-bg);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+}
+.status-done {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ap-success);
+    background: var(--ap-success-bg);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+}
+.checkedin-tag {
+    color: var(--ap-success);
+    background: var(--ap-success-bg);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: var(--ap-r-pill);
+    white-space: nowrap;
+}
+.upcoming-item .appointment-actions { flex: 0 0 auto; }
+.upcoming-item .u-status { flex: 0 0 auto; }
+
+.ai-panel {
+    position: fixed;
+    top: 76px;
+    right: 24px;
+    width: 380px;
+    max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    background: var(--ap-surface);
+    border: 1px solid var(--ap-border);
+    border-radius: var(--ap-r-lg);
+    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
+    z-index: 1200;
+    animation: aiSlideIn .2s ease-out;
+}
+@keyframes aiSlideIn {
+    from { opacity: 0; transform: translateY(-8px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+.ai-panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s3);
+    padding: var(--ap-s4) var(--ap-s5);
+    border-bottom: 1px solid var(--ap-border);
+    background: linear-gradient(135deg, var(--ap-brand-050), #f8fafc);
+    border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0;
+}
+.ai-panel-icon {
+    font-size: 20px;
+    color: var(--ap-brand-700);
+}
+.ai-panel-title {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+.ai-panel-title strong {
+    font-size: 14.5px;
+    color: var(--ap-text);
+}
+.ai-panel-title span {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+}
+.ai-panel-close {
+    border: 0;
+    background: transparent;
+    color: var(--ap-text-muted);
+    font-size: 15px;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--ap-r-sm);
+    cursor: pointer;
+}
+.ai-panel-close:hover { background: #eef2f7; color: var(--ap-text); }
+
+.ai-panel-body {
+    padding: var(--ap-s4) var(--ap-s5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s3);
+}
+.ai-insight {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ap-s2);
+    font-size: 13px;
+    color: var(--ap-text-secondary);
+    line-height: 1.55;
+    padding: var(--ap-s2) var(--ap-s3);
+    background: #fafbfc;
+    border-radius: var(--ap-r-sm);
+    border: 1px solid #f1f5f9;
+}
+.ai-insight-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 8px;
+    margin-top: 6px;
+}
+.ai-insight-dot.danger  { background: var(--ap-danger); }
+.ai-insight-dot.warning { background: var(--ap-warning); }
+.ai-insight-dot.success { background: var(--ap-success); }
+.ai-insight-dot.info    { background: var(--ap-info); }
+.ai-insight strong { color: var(--ap-text); }
+
+.ai-panel-footer {
+    padding: var(--ap-s3) var(--ap-s5) var(--ap-s4);
+    border-top: 1px solid var(--ap-border);
+}
+.ai-panel-footer > span {
+    font-size: 11.5px;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    font-weight: 700;
+    color: var(--ap-text-muted);
+    display: block;
+    margin-bottom: var(--ap-s2);
+}
+.ai-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ap-s2);
+}
+.ai-suggestion-chip {
+    border: 1px solid var(--ap-border);
+    background: var(--ap-surface);
+    color: var(--ap-brand-900);
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 8px 14px;
+    border-radius: var(--ap-r-pill);
+    cursor: pointer;
+    min-height: 36px;
+    transition: background .15s;
+    font-family: inherit;
+}
+.ai-suggestion-chip:hover { background: var(--ap-brand-050); }
+
+.call-toast {
+    position: fixed;
+    top: 76px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ap-s2);
+    background: #0f172a;
+    color: #fff;
+    font-size: 13.5px;
+    padding: 12px 20px;
+    border-radius: var(--ap-r-pill);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, .35);
+    z-index: 1300;
+    animation: aiSlideIn .2s ease-out;
+}
+.call-toast .e-icons { color: #4ade80; }
+.call-toast strong { color: #fff; }
+
+@media (max-width: 640px) {
+    .ai-panel { right: 12px; top: 64px; }
+    .upcoming-item .appointment-actions { flex-direction: column; gap: 4px; align-items: stretch; }
+    .upcoming-item { flex-wrap: wrap; }
+}
+
+.dashboard-grid-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--ap-s6);
+    margin-top: var(--ap-s6);
+}
+
+.dashboard-left-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s6);
+}
+
+.dashboard-right-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s6);
+}
+
+/* KPI Cards Row */
+.kpi-cards-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--ap-s4);
+    margin-bottom: var(--ap-s4);
+}
+
+/* Syncfusion Card - KPI */
+.kpi-cards-row .e-card {
+    background: white;
+    border-radius: var(--ap-r-md);
+    border: 1px solid var(--ap-border);
+    box-shadow: var(--ap-shadow-1);
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.kpi-cards-row .e-card:hover {
+    box-shadow: var(--ap-shadow-2);
+    border-color: var(--ap-brand-700);
+}
+
+.kpi-cards-row .e-card-content {
+    padding: var(--ap-s4) !important;
+}
+
+.kpi-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--ap-s3);
+}
+
+.kpi-card-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ap-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 0;
+}
+
+.kpi-card-icon {
+    font-size: 20px;
+    color: var(--ap-brand-700);
+}
+
+.kpi-card-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: var(--ap-s2) 0;
+}
+
+.kpi-card-sub {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+}
+
+.kpi-card-trend {
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: var(--ap-s2);
+    padding: 4px 8px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.kpi-card-trend.positive {
+    color: var(--ap-success);
+    background: var(--ap-success-bg);
+}
+
+.kpi-card-trend.negative {
+    color: var(--ap-danger);
+    background: var(--ap-danger-bg);
+}
+
+.kpi-card-trend.neutral {
+    color: var(--ap-text-muted);
+    background: #f1f5f9;
+}
+
+/* Chart Containers */
+.chart-card,
+.upcoming-section,
+.patients-section {
+    background: white;
+    border-radius: var(--ap-r-md);
+    box-shadow: var(--ap-shadow-1);
+    border: 1px solid var(--ap-border);
+}
+
+/* Syncfusion Card - Chart */
+.chart-card.e-card,
+.upcoming-section.e-card,
+.patients-section.e-card {
+    background: white;
+    border-radius: var(--ap-r-md);
+    border: 1px solid var(--ap-border);
+    box-shadow: var(--ap-shadow-1);
+    padding: 0;
+}
+
+.chart-card .e-card-content,
+.upcoming-section .e-card-content,
+.patients-section .e-card-content {
+    padding: var(--ap-s6) !important;
+}
+
+.chart-card-header,
+.upcoming-section-header,
+.patients-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ap-s4);
+    padding-bottom: var(--ap-s3);
+    border-bottom: 1px solid var(--ap-border);
+}
+
+.chart-card-title,
+.upcoming-section-title,
+.patients-section-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: 0;
+}
+
+.chart-card-menu {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    color: var(--ap-text-muted);
+    padding: 0;
+}
+
+.chart-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 280px;
+}
+
+.patients-filters {
+    display: flex;
+    gap: var(--ap-s3);
+}
+
+.filter-button {
+    padding: 6px 12px;
+    border: 1px solid var(--ap-border);
+    background: white;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ap-text-secondary);
+    transition: all 0.2s ease;
+}
+
+.filter-button:hover {
+    border-color: var(--ap-brand-700);
+    color: var(--ap-brand-700);
+}
+
+.filter-button.active {
+    background: var(--ap-brand-700);
+    color: white;
+    border-color: var(--ap-brand-700);
+}
+
+/* Upcoming Appointments Section */
+.upcoming-section {
+    background: white;
+    border-radius: var(--ap-r-md);
+    box-shadow: var(--ap-shadow-1);
+    border: 1px solid var(--ap-border);
+}
+
+.upcoming-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ap-s4);
+    padding-bottom: var(--ap-s3);
+    border-bottom: 1px solid var(--ap-border);
+}
+
+.upcoming-section-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ap-text);
+    margin: 0;
+}
+
+.upcoming-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ap-s4);
+}
+
+.appointment-item {
+    padding: var(--ap-s4);
+    border: 1px solid var(--ap-border);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: var(--ap-s4);
+    transition: all 0.2s ease;
+}
+
+.appointment-item:hover {
+    border-color: var(--ap-brand-700);
+    box-shadow: var(--ap-shadow-1);
+}
+
+.appointment-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #0a8a8a, #0d6d6d);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.appointment-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.appointment-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ap-text);
+    margin: 0 0 2px 0;
+}
+
+.appointment-time {
+    font-size: 12px;
+    color: var(--ap-text-muted);
+    margin: 0;
+}
+
+.appointment-status {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+
+.appointment-status.online {
+    background: var(--ap-success-bg);
+    color: var(--ap-success);
+}
+
+.appointment-status.offline {
+    background: #f1f5f9;
+    color: var(--ap-text-muted);
+}
+
+.appointment-action {
+    padding: 6px 12px;
+    background: var(--ap-brand-700);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.appointment-action:hover {
+    background: var(--ap-brand-900);
+}
+
+/* Responsive: Tablet */
+@media (max-width: 1200px) {
+    .dashboard-grid-wrapper {
+        grid-template-columns: 1fr;
+        gap: var(--ap-s4);
+    }
+
+    .kpi-cards-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Responsive: Mobile */
+@media (max-width: 768px) {
+    .kpi-cards-row {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--ap-s3);
+    }
+
+    .chart-card {
+        padding: var(--ap-s4);
+    }
+
+    .chart-container {
+        min-height: 200px;
+    }
+
+    .patients-section,
+    .upcoming-section {
+        padding: var(--ap-s4);
+    }
+}
+
+@media (max-width: 640px) {
+    .dashboard-content {
+        padding: var(--ap-s4);
+    }
+
+    .kpi-cards-row {
+        grid-template-columns: 1fr;
+        gap: var(--ap-s3);
+    }
+
+    .kpi-card {
+        padding: var(--ap-s3);
+    }
+
+    .kpi-card-value {
+        font-size: 24px;
+    }
+
+    .chart-card,
+    .patients-section,
+    .upcoming-section {
+        padding: var(--ap-s4);
+        border-radius: var(--ap-r-sm);
+    }
+
+    .appointment-item {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .appointment-status,
+    .appointment-action {
+        align-self: flex-start;
+    }
+}
+
+#dashboard-modern {
+    padding: 24px 28px 32px 28px;
+}
+
+.page-header {
+    align-items: center;
+    margin-bottom: 22px;
+}
+.page-eyebrow {
+    color: #64748b;
+    font-size: 13px;
+    text-transform: none;
+    letter-spacing: 0;
+    font-weight: 500;
+    margin-bottom: 2px;
+}
+.page-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #0f172a;
+}
+.page-title .wave {
+    display: inline-block;
+    margin-left: 4px;
+    transform: translateY(1px);
+    font-size: 20px;
+}
+.page-header-actions {
+    gap: 12px;
+    flex-wrap: nowrap;
+}
+.global-search-wrap {
+    width: 240px;
+    height: 40px;
+    border: 1px solid #e2e8f0;
+    background: #ffffff;
+}
+.global-search-wrap input { font-size: 14px; padding-left: 36px; }
+.global-search-wrap .search-icon { font-size: 14px; }
+
+/* Month pill */
+.month-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 40px;
+    padding: 0 14px;
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    color: #0f172a;
+    font-size: 13.5px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background .15s, border-color .15s;
+    font-family: inherit;
+}
+.month-pill:hover { background: #f8fafc; border-color: #cbd5e1; }
+.month-pill .caret { font-size: 10px; color: #64748b; }
+.month-pill .e-icon-calendar { font-size: 14px; color: #64748b; }
+
+/* Calendar popup below the month pill */
+.dash-month-popup {
+    position: absolute;
+    top: 56px;
+    right: 0;
+    z-index: 1100;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
+    padding: 8px;
+    animation: popIn .15s ease-out;
+}
+.dash-month-popup .e-calendar { border: 0 !important; box-shadow: none !important; width: 100%; }
+@keyframes popIn { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+/* Icon-only buttons (bell, search button variant) */
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #e2e8f0;
+    background: #ffffff;
+    border-radius: 10px;
+    color: #475569;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background .15s, border-color .15s;
+}
+.icon-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
+.icon-btn .e-bell { font-size: 15px; }
+
+/* Avatar circle button */
+.avatar-btn {
+    width: 40px;
+    height: 40px;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.avatar-circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #0a8a8a 0%, #0a4d4a 100%);
+    letter-spacing: 0.5px;
+}
+
+/* ---- 20. KPI strip (4 colored metric tiles) ---- */
+.dashboard-kpi-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+    margin-bottom: 16px;
+}
+.metric-tile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 12px;
+    border-radius: 14px;
+    border: 1px solid transparent;
+    min-height: 78px;
+    position: relative;
+    overflow: hidden;
+}
+.metric-tile.metric-blue   { background: #e0f2fe; border-color: #bae6fd; }
+.metric-tile.metric-pink   { background: #fce7f3; border-color: #fbcfe8; }
+.metric-tile.metric-green  { background: #dcfce7; border-color: #bbf7d0; }
+.metric-tile.metric-orange { background: #ffedd5; border-color: #fed7aa; }
+
+.metric-tile .metric-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.7);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.metric-tile.metric-blue   .metric-icon { color: #0284c7; }
+.metric-tile.metric-pink   .metric-icon { color: #db2777; }
+.metric-tile.metric-green  .metric-icon { color: #16a34a; }
+.metric-tile.metric-orange .metric-icon { color: #ea580c; }
+.metric-tile .metric-icon .e-icons { font-size: 16px; }
+
+.metric-tile .metric-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.metric-tile .metric-label {
+    font-size: 12px;
+    color: #475569;
+    font-weight: 500;
+    margin-bottom: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.metric-tile .metric-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+}
+.metric-tile .metric-value {
+    font-size: 20px;
+    font-weight: 700;
+    color: #0f172a;
+    line-height: 1.05;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.3px;
+}
+.metric-tile .metric-plus {
+    font-size: 14px;
+    font-weight: 700;
+    color: #0f172a;
+    line-height: 1;
+    margin-left: 2px;
+}
+.metric-tile .metric-trend {
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.metric-tile .metric-trend.up   { color: #16a34a; }
+.metric-tile .metric-trend.down { color: #ef4444; }
+.metric-tile .metric-trend .trend-arrow {
+    font-size: 11px;
+    line-height: 1;
+}
+
+/* ---- 21. Hero section: 4 KPI cards + 2 charts on the left, Patient Overview on the right ---- */
+.dash-hero {
+    display: grid;
+    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
+    gap: 16px;
+    margin-bottom: 22px;
+    align-items: stretch;
+}
+.dash-hero-left {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+}
+.dash-hero-right {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    /* Drop the fixed 375px height here so on narrow viewports the right
+       column can shrink with the donut card instead of forcing vertical
+       blank space inside a now-shallower viewport. */
+    height: 375px !important;
+    min-height: 0;
+}
+.donut-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    /* total card height ≈ header (~48) + wrap (260) + legend (~80) + padding (~40)
+       ≈ 428px → keep min/max around that band so nothing clips. */
+    min-height: 375px;
+    max-height: 470px;
+    /* Clip the Syncfusion chart wrapper so it can never overflow the card.
+       The four corner labels already have safe room inside the wrap. */
+    overflow: hidden;
+    position: relative;
+}
+.donut-card .donut-wrap {
+    flex: 1;
+    min-height: 230px;
+    max-height: 260px;
+    /* Use the card's 18px padding so corner labels stay inside the card. */
+    padding: 22px 18px;
+    box-sizing: border-box;
+}
+
+/* Charts row (2 col) */
+.dash-row-2col {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 16px;
+}
+.dash-card {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
+    padding: 18px 18px;
+    transition: box-shadow .2s ease, transform .2s ease;
+}
+.dash-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
+}
+.dash-card-header {
+    margin-bottom: 12px;
+    align-items: center;
+}
+.donut-card .dash-card-header {
+    /* Give the title and the dominant-cohort badge a clear 2-slot layout. */
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+.donut-card .dash-card-title { flex-shrink: 0; }
+.donut-header-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.dash-card-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0f172a;
+    margin: 0;
+    letter-spacing: -0.1px;
+}
+.dash-card-actions {
+    color: #94a3b8;
+    cursor: pointer;
+    font-size: 18px;
+    background: transparent;
+    border: 0;
+    padding: 4px 8px;
+    border-radius: 6px;
+    line-height: 1;
+}
+.dash-card-actions:hover { background: #f1f5f9; color: #475569; }
+
+.donut-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 260px;
+    min-height: 250px;
+    max-height: 270px;
+    width: 100%;
+    overflow: visible;
+}
+.donut-wrap .e-accumulationchart,
+.donut-wrap > div:first-child {
+    position: relative;
+    margin: 0 auto;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+}
+
+.donut-wrap .e-accumulationchart,
+.donut-wrap .e-accumulationchart svg,
+.donut-wrap .e-accumulationchart canvas,
+.donut-wrap .e-accumulationchart > div {
+    max-width: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden;
+}
+
+.donut-card .e-accumulationchart svg,
+.donut-card .e-accumulationchart svg.e-svg-accumulationchart {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100%;
+    max-height: 100%;
+    aspect-ratio: 1 / 1;
+}
+.donut-center {
+    position: absolute;
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    padding: 10px 12px;
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(2px);
+    max-width: 70%;
+}
+.donut-center .donut-total {
+    font-size: 22px;
+    font-weight: 800;
+    color: #0f172a;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+.donut-center .donut-sub {
+    font-size: 9px;
+    color: #64748b;
+    margin-top: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+}
+.donut-center .donut-delta,
+.donut-header-meta .donut-delta {
+    display: inline-flex;
+    align-items: center;
+    font-size: 10.5px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #e6f4f4;
+    color: #066b6b;
+    line-height: 1.4;
+    white-space: nowrap;
+}
+.donut-delta.down {
+    background: #fee2e2 !important;
+    color: #b91c1c !important;
+}
+.donut-label {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    text-align: center;
+    line-height: 1.1;
+    min-width: 64px;
+    max-width: 90px;
+    transition: transform .15s ease;
+    background: rgba(255, 255, 255, 0.96);
+    padding: 7px 10px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+}
+.donut-label .donut-num {
+    display: block;
+    font-size: 16px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.2px;
+}
+.donut-label .donut-cat {
+    display: block;
+    font-size: 10.5px;
+    color: #475569;
+    margin-top: 2px;
+    font-weight: 700;
+}
+.donut-label .donut-pct {
+    display: block;
+    font-size: 9.5px;
+    color: #94a3b8;
+    margin-top: 1px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.donut-label-0 { top: -8px;        left: 50%;  transform: translateX(-50%); }   /* top: Child */
+.donut-label-1 { top: 50%;         right: 4px; transform: translateY(-50%); }   /* right: Teen */
+.donut-label-2 { bottom: -10px;    left: 50%;  transform: translateX(-50%); }   /* bottom: Adult */
+.donut-label-3 { top: 50%;         left: 4px;  transform: translateY(-50%); }   /* left: Older */
+@media (max-width: 1100px) {
+    .donut-label .donut-num { font-size: 14px; }
+    .donut-label .donut-cat { font-size: 9.5px;  }
+    .donut-label .donut-pct { font-size: 8.5px; }
+    .donut-label { padding: 4px 6px; }
+}
+
+@media (max-width: 900px) {
+    .donut-label { display: none; }
+    .donut-wrap  { padding: 12px 12px; }
+    .donut-card  { min-height: 280px; max-height: 360px; }
+}
+
+.donut-legend {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px dashed #e2e8f0;
+}
+.donut-legend-chip {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    background: #f8fafc;
+    border: 1px solid #eef2f7;
+    font-size: 11.5px;
+    color: #334155;
+    cursor: default;
+    transition: background .15s ease, border-color .15s ease;
+    /* Allow long age ranges to wrap instead of clipping/squeezing the chip */
+    min-width: 0;
+    overflow: hidden;
+}
+.donut-legend-chip:hover {
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+.donut-legend-swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    margin-top: 4px;
+    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
+}
+.donut-legend-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    line-height: 1.2;
+    min-width: 0;
+    flex: 1;
+}
+.donut-legend-cat {
+    font-weight: 700;
+    color: #0f172a;
+    font-size: 11.5px;
+}
+.donut-legend-meta {
+    color: #64748b;
+    font-size: 10px;
+    font-variant-numeric: tabular-nums;
+    white-space: normal;
+    word-break: break-word;
+}
+.donut-legend-meta strong {
+    color: #0a4d4a;
+    font-weight: 700;
+}
+@media (max-width: 1100px) {
+    .donut-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 520px) {
+    .donut-legend { grid-template-columns: 1fr; }
+}
+
+/* Age-range tooltip — pure CSS, no JS, shows on hover/focus of chip */
+.donut-legend-chip[data-tip]::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #0f172a;
+    color: #fff;
+    font-size: 10.5px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .15s ease;
+    z-index: 5;
+}
+.donut-legend-chip {
+    position: relative;
+}
+.donut-legend-chip:hover::after,
+.donut-legend-chip:focus-visible::after {
+    opacity: 1;
+}
+.donut-legend-chip:focus-visible {
+    outline: 2px solid #0a8a8a;
+    outline-offset: 1px;
+}
+
+/* ---- 22. Patients table + Upcoming card row ---- */
+.dash-row-bottom {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+}
+.dash-tabs {
+    background: #f1f5f9;
+    border-radius: 10px;
+    padding: 4px;
+    gap: 2px;
+}
+.dash-tab {
+    background: transparent;
+    color: #64748b;
+    font-size: 12.5px;
+    font-weight: 600;
+    padding: 6px 14px;
+    min-height: 32px;
+    border-radius: 7px;
+    border: 0;
+    cursor: pointer;
+    transition: background .15s, color .15s;
+}
+.dash-tab:hover { color: #0f172a; }
+.dash-tab.active {
+    background: #0a8a8a;
+    color: #fff;
+}
+.dash-card.upcoming-card {
+    width: 360px !important;
+    height: 555px !important;
+}
+.dash-card-grid{
+     flex: 1 1 auto;
+     min-width: 0;
+}
+
+/* Patients grid table tweaks */
+.patients-grid .e-grid { border: 0 !important; }
+.patients-grid .e-grid table { width: 100% !important; min-width: 0 !important; }
+.patients-grid .e-grid .e-headercell,
+.patients-grid .e-grid .e-rowcell {
+    background: #fff !important;
+    border-color: #f1f5f9 !important;
+}
+.patients-grid .e-grid .e-headercell {
+    color: #94a3b8 !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: .04em !important;
+    font-weight: 700 !important;
+}
+.patients-grid .e-grid .e-rowcell {
+    color: #334155 !important;
+    font-size: 13.5px !important;
+    padding: 10px 12px !important;
+}
+.row-report {
+    background: transparent;
+    border: 0;
+    color: #ea580c;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    font-size: 16px;
+}
+.row-report:hover { background: #fff7ed; }
+.view-link {
+    color: #0a8a8a;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 13.5px;
+    margin-right: 10px;
+}
+.view-link:hover { text-decoration: underline; }
+.row-action-dots {
+    background: transparent;
+    border: 0;
+    color: #94a3b8;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    border-radius: 6px;
+    font-size: 18px;
+    line-height: 1;
+}
+.row-action-dots:hover { background: #f1f5f9; color: #475569; }
+
+/* Upcoming appointments card */
+.upcoming-card .dash-card-header { align-items: center; }
+.upcoming-month {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+}
+.upcoming-month .month-label {
+    font-weight: 600;
+    color: #0f172a;
+    font-size: 13px;
+    min-width: 80px;
+    text-align: center;
+}
+.upcoming-month .nav-btn {
+    border: 0;
+    background: transparent;
+    color: #94a3b8;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+}
+.upcoming-month .nav-btn:hover { background: #f1f5f9; color: #475569; }
+
+.upcoming-week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    margin: 4px 0 12px 0;
+}
+.upcoming-week .day {
+    background: #f8fafc;
+    border-radius: 8px;
+    text-align: center;
+    padding: 6px 4px;
+    font-size: 11px;
+    color: #64748b;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background .15s;
+    font-weight: 500;
+    min-height: 44px;
+}
+.upcoming-week .day:hover { background: #e0f2fe; }
+.upcoming-week .day .dnum {
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    color: #0f172a;
+    margin-top: 2px;
+}
+.upcoming-week .day.selected {
+    background: #0a8a8a;
+    color: #fff;
+}
+.upcoming-week .day.selected .dnum { color: #fff; }
+
+.upcoming-list {
+    max-height: 360px;
+    overflow-y: auto;
+    padding-right: 2px;
+}
+.upcoming-listview { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.upcoming-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 4px;
+    border-bottom: 1px solid #f1f5f9;
+    min-height: 56px;
+    /* Keep the row inside its card: stack avatar/info/actions when very narrow. */
+    flex-wrap: wrap;
+}
+.upcoming-item:last-child { border-bottom: 0; }
+.upcoming-item .uavatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #0a8a8a, #0a4d4a);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+.upcoming-item .uinfo { flex: 1; min-width: 0; }
+.upcoming-item .uname {
+    font-size: 13.5px;
+    font-weight: 600;
+    color: #0f172a;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.upcoming-item .utime {
+    font-size: 12px;
+    color: #64748b;
+    margin-top: 2px;
+}
+.upcoming-item .ustatus-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+.upcoming-item .ustatus {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 999px;
+    border: 1px solid;
+    white-space: nowrap;
+}
+.upcoming-item .ustatus.online {
+    color: #16a34a;
+    background: #dcfce7;
+    border-color: #bbf7d0;
+}
+.upcoming-item .ustatus.offline {
+    color: #475569;
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+.call-btn {
+    border: 1px solid #bbf7d0;
+    background: #ffffff;
+    color: #16a34a;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}
+.call-btn:hover { background: #dcfce7; }
+
+/* ---- 23. Responsive for new Helanthus layout ---- */
+@media (max-width: 1200px) {
+    .dash-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
+    /* Slightly shrink the right column fixed heights at 1200px to leave
+       space for the corner donut labels without pushing the page down. */
+    .donut-card  { min-height: 360px; }
+    .dash-hero-right { height: auto !important; }
+}
+@media (max-width: 1000px) {
+    .dashboard-kpi-strip { grid-template-columns: repeat(2, 1fr); }
+    .dash-hero { grid-template-columns: minmax(0, 1fr); }
+    .page-header { flex-direction: row; }
+    /* Stack the bottom row BEFORE the donut collapses so the upcoming
+       list has the full card width to lay out its week + items. */
+    .dash-row-bottom { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 900px) {
+    #dashboard-modern { padding: 20px; }
+    .dash-row-2col,
+    .dash-row-3col { grid-template-columns: minmax(0, 1fr); }
+    .global-search-wrap { width: 200px; }
+    /* Upcoming card: make week pills wrap to 4 columns + items flex. */
+    .upcoming-week { grid-template-columns: repeat(7, 1fr); }
+    .upcoming-item { gap: 8px; padding: 10px; }
+}
+@media (max-width: 700px) {
+    .dashboard-kpi-strip { grid-template-columns: 1fr 1fr; }
+    .page-header { gap: 12px; }
+    .global-search-wrap { width: 160px; }
+}
+@media (max-width: 560px) {
+    .dashboard-kpi-strip { grid-template-columns: 1fr; }
+    .page-header { flex-direction: column; align-items: stretch; }
+    .page-header-actions { flex-wrap: wrap; }
+    .global-search-wrap { width: 100%; }
+    .upcoming-week { grid-template-columns: repeat(5, 1fr); }
+    .metric-tile { padding: 14px; }
+}
+.patients-grid .e-rowcell,
+.patients-grid .e-headercell {
+    white-space: normal !important;
+    overflow-wrap: anywhere;
+}
+.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary,
+.e-calendar .e-btn.e-today.e-flat.e-primary:hover, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
+    color: #fff;
+}
+@media (max-width: 1200px)
+{
+    .dash-row-bottom {
+        flex-direction: column;
+    }
+
+    .upcoming-card {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+.dash-row-bottom {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+}
+
+.dash-card-grid {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.patients-grid {
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.upcoming-card {
+    flex: 0 0 350px;
+    min-width: 0;
+}
+
+.e-grid {
+    width: 100% !important;
+}
+
+.dash-row-bottom {
+    display: flex;
+    gap: 20px;
+}
+
+@media (max-width: 1200px) {
+    .dash-row-bottom {
+        flex-direction: column;
+    }
+
+    .dash-card.upcoming-card {
+        margin-top: 0;
+        transform: none;
+        width: 100%;
+        max-width: 100%;
+    }
+}
+@media (min-width: 1201px) {
+
+.dash-card.upcoming-card {
+margin-top: -110px;
+}
+}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctor.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctor.css
similarity index 66%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctor.css
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctor.css
index de2800f..41d0e2f 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctor.css
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctor.css
@@ -19,17 +19,17 @@
             .doctors-wrapper header .add-doctor .e-icon-add {
                 padding: 9px 0 10px 20px;
                 font-size: 10px;
-                color: #7575ff;
+                color: #0a8a8a;
             }
 
                 .doctors-wrapper header .add-doctor .e-icon-add::before {
-                    content: '\e95c';
+                    content: '\e805';
                 }
 
             .doctors-wrapper header .add-doctor .add-doctor-label {
                 font-weight: 600;
                 font-size: 13px;
-                color: #7575ff;
+                color: #0a8a8a;
                 letter-spacing: 0.39px;
                 padding: 5px;
             }
@@ -69,11 +69,11 @@
 
                 .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item:hover {
                     cursor: pointer;
-                    box-shadow: 0px 1px 4px 1px #7575ff;
+                    box-shadow: 0px 1px 4px 1px #0a8a8a;
                 }
 
                 .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item:focus, .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item:active {
-                    border-color: #7575ff;
+                    border-color: #0a8a8a;
                 }
 
                 .doctors-wrapper .specialization-detail-wrapper .specialist-display .specialist-item .specialist-image {
@@ -224,15 +224,12 @@
         #Specialization_popup .e-list-item .specialist-value span:nth-child(1) {
             margin: 7px;
         }
-
 .e-dialog.new-doctor-dialog .e-footer-content {
     padding: 15px 15px 0 15px;
 }
-
 .e-dialog.new-doctor-dialog {
     max-height: 580px !important;
 }
-
 @media (max-width: 850px) {
     .doctors-wrapper {
         margin: 20px 10px;
@@ -366,19 +363,479 @@
     height: 100px;
 }
 
-    .doctor-list-skeleton .doct-img {
-        height: 100px;
-        width: 20%;
-    }
+.doctor-list-skeleton .doct-img {
+    height: 100px;
+    width: 20%;
+}
 
-    .doctor-list-skeleton .doct-details {
-        height: 100px;
-        padding-top: 2px;
-        width: 60%;
-    }
+.doctor-list-skeleton .doct-details {
+    height: 100px;
+    padding-top: 2px;
+    width: 60%;
+}
 
 @media (max-width: 600px) {
     .planner-doctor-skeleton {
         display: none;
     }
 }
+.doctors-dashboard {
+    padding: 30px;
+    background: #f8fafc;
+    min-height: 100vh;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+}
+
+.page-header h2 {
+    margin: 0;
+    font-size: 36px;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+.page-subtitle {
+    margin-top: 8px;
+    color: #64748b;
+    font-size: 15px;
+}
+
+.stats-section {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    margin-bottom: 30px;
+}
+
+.stat-card {
+    background: #fff;
+    border-radius: 18px;
+    padding: 24px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
+}
+
+.stat-value {
+    font-size: 36px;
+    font-weight: 700;
+    color: #2563eb;
+}
+
+.stat-value.available {
+    color: #16a34a;
+}
+
+.stat-label {
+    margin-top: 8px;
+    color: #64748b;
+    font-size: 15px;
+}
+
+.toolbar {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 30px;
+}
+
+.doctor-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: 24px;
+}
+
+/* Modern doctor card */
+
+.doctor-card {
+    background:white;
+    border-radius:20px;
+    padding:24px;
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    width:100%;
+    transform: translateY(10px);
+    box-shadow: 0 40px 40px #ecf1e9;
+}
+
+
+.doctor-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 20px 40px rgba(15, 23, 42, .12);
+}
+
+.doctor-card-header {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+}
+
+/* Avatar */
+
+.avatar-wrapper {
+    position: relative;
+    flex-shrink: 0;
+}
+
+.doctor-avatar {
+    width: 88px;
+    height: 88px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #f1f5f9;
+}
+
+.status-indicator {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+}
+
+.status-indicator.available {
+    background: #22c55e;
+}
+
+.status-indicator.busy {
+    background: #ef4444;
+}
+
+/* Info */
+
+.doctor-info {
+    flex: 1;
+}
+
+.doctor-info h4 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #0f172a;
+}
+
+.specialization-chip {
+    display: inline-block;
+    padding: 5px 12px;
+    margin-top: 8px;
+    border-radius: 30px;
+    background: #eff6ff;
+    color: #2563eb;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.doctor-info p {
+    margin-top: 10px;
+    color: #64748b;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* Stats Area */
+
+.doctor-meta > div {
+    background:#fafafa;
+    padding:12px;
+    border-radius:12px;
+}
+
+.label {
+    display: block;
+    color: #94a3b8;
+    font-size: 12px;
+    margin-bottom: 4px;
+}
+
+.value {
+    color: #0f172a;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+/* Footer */
+
+.doctor-footer {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.doctor-footer .e-btn {
+    border-radius: 10px;
+}
+
+/* Responsive */
+
+@media screen and (max-width:768px) {
+
+    .stats-section {
+        grid-template-columns: 1fr;
+    }
+
+    .toolbar {
+        flex-direction: column;
+    }
+}
+
+.availability-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 50px;
+    padding: 6px 12px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.availability-pill.available {
+    background: #ecfdf5;
+    color: #166534;
+}
+
+.availability-pill.busy {
+    background: #fef2f2;
+    color: #991b1b;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+}
+.doctor-header {
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    gap: 18px;
+    align-items: center;
+}
+
+.doctor-avatar {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.doctor-profile {
+
+    min-width:0;
+}
+
+.doctor-profile h3 {
+    margin: 0;
+    line-height:1.2;
+    font-size: 20px;
+}
+
+.education {
+    color:#64748b;
+    font-size:14px;
+    line-height:1.4;
+    overflow:hidden;
+}
+.doctor-operational-data {
+    display: grid;
+    grid-template-columns:1fr 1fr;
+    gap: 12px;
+}
+
+.metric {
+    background: #f8fafc;
+    padding: 12px;
+    border-radius: 12px;
+}
+
+.metric-label {
+    display: block;
+    font-size: 12px;
+    color: #64748b;
+}
+
+.metric-value {
+    font-weight: 600;
+    margin-top: 4px;
+}
+.workload-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+.workload-section {
+    background:#f8fafc;
+    padding:12px;
+    border-radius:12px;
+}
+
+
+.workload-bar {
+    height: 10px;
+    background: #e5e7eb;
+    border-radius: 100px;
+    overflow: hidden;
+}
+
+.workload-fill {
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        #22c55e,
+        #3b82f6
+    );
+}
+.doctor-actions {
+    display:flex;
+    gap:8px;
+    width:200px;
+}
+
+.doctor-actions .e-btn {
+    flex:1;
+    min-height:42px;
+}
+
+@media (max-width: 1024px) {
+
+    .doctor-grid {
+        grid-template-columns:
+            repeat(2, minmax(0,1fr));
+    }
+}
+
+@media (max-width: 768px) {
+
+    .doctor-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .doctor-header {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .doctor-operational-data {
+        grid-template-columns: 1fr;
+    }
+
+    .doctor-meta {
+        grid-template-columns: 1fr 1fr;
+        display: grid;
+        gap: 16px;
+    }
+
+    .doctor-actions {
+        flex-direction: column;
+    }
+
+    .stats-section {
+        grid-template-columns: 1fr;
+    }
+
+    .toolbar {
+        flex-direction: column;
+    }
+}
+.doctor-name {
+   margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: normal;
+    overflow: visible;
+    /* text-overflow: unset; */
+    }
+.doctor-profile {
+    display:flex;
+    flex-direction:column;
+    gap:8px;
+}
+.availability-pill.away {
+    background:#fff7ed;
+    color:#c2410c;
+}
+
+.stats-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.metric-card {
+    border-radius: 18px;
+    border: none !important;
+    overflow: hidden;
+    transition: all .3s ease;
+    box-shadow: 0 4px 15px rgba(0,0,0,.08);
+    background: #fff;
+}
+
+.metric-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0,0,0,.15);
+}
+
+.metric-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px;
+}
+
+#department-card, #available-card, #doctor-card {
+ background: #dbf9eb;
+}
+
+.metric-title {
+    font-size: 16px;
+    color: #64748b;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+.metric-number {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.metric-icon {
+    font-size: 46px;
+    /* opacity: .15; */
+    font-weight: 500;
+    color: #139518;
+}
+
+/* Accent colors */
+
+.doctors-card {
+    border-left: 5px solid #2563eb !important;
+}
+
+.doctors-card .metric-number {
+    color: #2563eb;
+}
+
+.available-card {
+    border-left: 5px solid #16a34a !important;
+}
+
+.available-card .metric-number {
+    color: #16a34a;
+}
+
+.department-card {
+    border-left: 5px solid #9333ea !important;
+}
+
+.department-card .metric-number {
+    color: #9333ea;
+}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css
new file mode 100644
index 0000000..0ccf94b
--- /dev/null
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctordetails.css
@@ -0,0 +1,345 @@
+:root{
+    --surface:#ffffff;
+    --bg:#f8fafc;
+    --border:#e2e8f0;
+    --text:#0f172a;
+    --muted:#64748b;
+    --shadow:0 10px 35px rgba(15,23,42,.08);
+}
+
+#doctor-page{
+    max-width:1400px;
+    margin:auto;
+    padding:32px;
+}
+
+/* HERO */
+
+#doctorHeroCard{
+    border-radius:24px;
+    background:var(--surface);
+    box-shadow:var(--shadow);
+    margin-bottom:24px;
+}
+
+#doctorHeroSection{
+    display:flex;
+    align-items:center;
+    gap:24px;
+    padding:24px;
+}
+
+#doctorAvatar{
+    width:110px;
+    height:110px;
+    border-radius:50%;
+    object-fit:cover;
+}
+
+#doctorInfo{
+    flex:1;
+}
+
+#doctorName{
+    margin:0;
+    font-size:42px;
+    color:var(--text);
+}
+
+#doctorDepartment{
+    margin-top:8px;
+    display:inline-block;
+    padding:6px 14px;
+    border-radius:999px;
+    background:#eef2ff;
+    color:#4f46e5;
+}
+
+#doctorEducation,
+#doctorDesignation{
+    color:var(--muted);
+    margin-top:6px;
+}
+
+#doctorStatus{
+    border-radius:999px;
+    padding:10px 18px;
+    background:#fef3c7;
+    color:#92400e;
+    font-weight:600;
+}
+
+/* KPI */
+
+#kpiSection{
+    display:grid;
+    grid-template-columns:repeat(3,1fr);
+    gap:20px;
+    margin-bottom:24px;
+}
+
+#experienceCard,
+#workingDaysCard,
+#contactCard{
+    border-radius:20px;
+    background:#fff;
+    box-shadow:var(--shadow);
+    transition:.25s;
+    padding-left: 25px;
+    height:100px;
+}
+
+#experienceCard:hover,
+#workingDaysCard:hover,
+#contactCard:hover{
+    transform:translateY(-4px);
+}
+
+#experienceValue,
+#workingDaysValue,
+#contactValue{
+    font-size:34px;
+    font-weight:700;
+    color:#2563eb;
+}
+
+#experienceLabel,
+#workingDaysLabel,
+#contactLabel{
+    color:var(--muted);
+}
+
+/* DETAILS */
+
+#detailsSection{
+    display:grid;
+    grid-template-columns:1fr 1fr;
+    gap:24px;
+    margin-bottom:24px;
+}
+
+#professionalCard,
+#contactInfoCard{
+    border-radius:20px;
+    background:#fff;
+    box-shadow:var(--shadow);
+    padding:50px;
+}
+
+.detail-row{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    min-height:56px;
+    border-bottom:1px solid var(--border);
+}
+
+.detail-row:last-child{
+    border-bottom:none;
+}
+
+.detail-row label{
+    color:var(--muted);
+}
+
+.detail-row span{
+    font-weight:600;
+}
+
+/* SCHEDULE */
+
+#scheduleCard{
+    border-radius:24px;
+    background:#fff;
+    box-shadow:var(--shadow);
+}
+
+#scheduleTitle{
+    margin-bottom:20px;
+}
+
+.schedule-row{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    min-height: 56px;
+    border: 1px solid var(--border);
+    width: 950px;
+}
+
+.day-column{
+    font-weight:500;
+}
+
+.time-column{
+    font-weight:600;
+}
+
+.time-column.TimeOff{
+    color:#ef4444;
+}
+
+.time-column.RemoveBreak{
+    color:#94a3b8;
+}
+
+/* ACCESSIBILITY */
+
+button:focus-visible,
+.e-btn:focus-visible,
+input:focus-visible,
+select:focus-visible{
+    outline:3px solid #2563eb;
+    outline-offset:2px;
+}
+
+.e-disabled{
+    opacity:.6;
+    cursor:not-allowed;
+}
+
+/* RESPONSIVE */
+
+@media (max-width:992px){
+
+    #kpiSection{
+        grid-template-columns:1fr 1fr;
+    }
+
+    #detailsSection{
+        grid-template-columns:1fr;
+    }
+}
+
+@media (max-width:768px){
+
+    #doctorHeroSection{
+        flex-direction:column;
+        text-align:center;
+    }
+
+    #kpiSection{
+        grid-template-columns:1fr;
+    }
+
+    .schedule-row{
+        flex-direction:column;
+        align-items:flex-start;
+        gap:6px;
+        padding:12px 0;
+    }
+
+    .detail-row{
+        flex-direction:column;
+        align-items:flex-start;
+        padding:12px 0;
+    }
+}
+#doctorHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+    padding-bottom: 20px;
+    margin-bottom: 32px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-top: 75px;
+}
+
+#headerLeft {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+#backButton {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 10px;
+    background: #ffffff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,.08);
+}
+
+#backButton:hover {
+    background: #f8fafc;
+}
+
+#headerTitleContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+#pageTitle {
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+    color: #0f172a;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+}
+
+#titleUnderline {
+    width: 64px;
+    height: 3px;
+    margin-top: 8px;
+    border-radius: 999px;
+    background: #14b8a6;
+}
+
+#headerActions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+#headerActions .delete-details {
+    min-width: 110px;
+    height: 40px;
+    background: #ef4444 !important;
+    color: white !important;
+    border-radius: 12px !important;
+}
+
+#headerActions .edit-details {
+    min-width: 110px;
+    height: 40px;
+    background: #0f766e !important;
+    color: white !important;
+    border-radius: 12px !important;
+}
+
+@media (max-width: 768px) {
+
+    #doctorHeader {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    #headerActions {
+        width: 100%;
+    }
+
+    #headerActions .delete-details,
+    #headerActions .edit-details {
+        flex: 1;
+    }
+
+    #pageTitle {
+        font-size: 22px;
+    }
+}
+
+/* REDUCED MOTION */
+
+@media (prefers-reduced-motion: reduce){
+
+    *{
+        animation:none !important;
+        transition:none !important;
+    }
+}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctoreditdialog.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctoreditdialog.css
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/doctoreditdialog.css
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/doctoreditdialog.css
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/main.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/main.css
new file mode 100644
index 0000000..e390d29
--- /dev/null
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/main.css
@@ -0,0 +1,340 @@
+/* @import url('/open-iconic/font/css/open-iconic-bootstrap.min.css'); */
+
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.skip-link {
+    position: absolute;
+    top: -48px;
+    left: 8px;
+    z-index: 10000;
+    padding: 10px 18px;
+    background: #0f172a;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    border-radius: 0 0 8px 8px;
+    text-decoration: none;
+    transition: top .15s ease-in;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+.planner-wrapper :is(button, a, input, select, textarea, [tabindex]):focus-visible {
+    outline: 3px solid #0a8a8a !important;
+    outline-offset: 2px !important;
+}
+
+a, .btn-link {
+    color: #0366d6;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #1b6ec2;
+    border-color: #1861ac;
+}
+
+app {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.top-row {
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.main {
+    flex: 1;
+}
+
+.main .top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+}
+
+.main .top-row > a {
+    margin-left: 1.5rem;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.sidebar .top-row {
+    background-color: rgba(0,0,0,0.4);
+}
+
+.sidebar .navbar-brand {
+    font-size: 1.1rem;
+}
+
+.sidebar .oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-item:first-of-type {
+    padding-top: 1rem;
+}
+
+.nav-item:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.nav-item a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.nav-item a.active {
+    background-color: transparent;
+    color: white;
+}
+
+.nav-item a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.content {
+    padding-top: 1.1rem;
+}
+
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+.planner-header .sb-table-cell {
+    padding-right: 6px;
+    vertical-align: middle;
+}
+.planner-header .sb-github-btn {
+    width: 40px;
+    opacity: 100;
+    padding: 11px 8px;
+    border-radius: 0px;
+    border-width: 0px;
+    font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
+    font-weight: 500;
+    line-height: 18px;
+    border-color: transparent;
+    background: transparent;
+}
+
+.planner-header .github-image img {
+    filter: brightness(0) invert(100%);
+}
+
+@media (max-width: 767.98px) {
+    .main .top-row {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) {
+    app {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .main .top-row {
+        position: sticky;
+        top: 0;
+    }
+
+    .main > div {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+
+    .navbar-toggler {
+        display: none;
+    }
+
+    .sidebar .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+}
+.nav-item.e-list-item {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px;
+    border-radius: 3px;
+    border-bottom: 0px;
+    align-items: center;
+    color: #666;
+    cursor: pointer;
+}
+.nav-item.e-list-item:hover {
+
+    color: #666;
+}
+ul.nav.flex-column {
+    margin: 0 16px;
+    width: 210px;
+}
+
+.sideparent.menulist {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "-apple-system", BlinkMacSystemFont;
+    font-size: 12px;
+    font-weight: 400;
+}
+.footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(90.4deg, #154db9 0.03%, #081b3f 11.56%, #081b3f 85.56%, #154db9 99.97%);
+    border: 1px solid #D8DEE9;
+    z-index: 10000;
+    padding: 12px;
+}
+
+.footer-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+.footer-logo {
+    width: 38px;
+    height: 38px;
+}
+.footer-icon {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 0 0 auto;
+    width: 38px;
+    height: 38px;
+}
+
+.footer-content .title span {
+    font-weight: 400;
+    font-size: 16px;
+    color: #e1e3e7;
+}
+
+@media screen and (max-width: 1140px), screen and (max-device-width: 1140px) {
+    .footer-content .title {
+        display: flex;
+        flex-direction: column;
+        color: white;
+    }
+}
+
+@media screen and (max-width: 1140px), screen and (max-device-width: 1140px) {
+    .footer-content .title span, .footer-content .title span .main-title {
+        font-size: 12px;
+    }
+}
+
+.footer-content .buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.footer-content .e-trial-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: #FFF30F;
+    color: #0F172A;
+    border: transparent;
+    border-radius: 8px;
+    padding: 10px 16px;
+    font-weight: 700;
+    font-family: sans-serif;
+}
+
+.footer-content .e-demo-btn {
+    background-color: transparent;
+    border: transparent;
+    color: white;
+    border-radius: 6px;
+    padding: 10px 16px;
+    font-weight: 500;
+}
+
+.footer-content .e-trial-btn::before {
+    content: 'Start Free Trial';
+    font-family: sans-serif;
+}
+
+.footer-content .e-trial-btn::after {
+    content: '\e7f9';
+    font-family: 'e-icons';
+}
+
+.footer-content .e-demo-btn:hover {
+    background-color: #173D87;
+}
+
+@media screen and (max-device-width: 730px) {
+
+    .footer-content .buttons .e-demo-btn {
+        display: none;
+    }
+
+    .footer-content .buttons .e-trial-btn::before {
+        content: 'Free Trial';
+    }
+
+    .footer-content .buttons .e-trial-btn::after {
+        display:none;
+    }
+}
+
+@media screen and (max-width: 900px), screen and (max-device-width: 900px) {
+    .footer-content .title span:last-child {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/mark.svg b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/mark.svg
similarity index 100%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/mark.svg
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/mark.svg
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/patients.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/patients.css
new file mode 100644
index 0000000..544e3a8
--- /dev/null
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/patients.css
@@ -0,0 +1,381 @@
+.planner-patient-wrapper {
+    padding:24px;
+    background:#F8FAFC;
+    min-height:100vh;
+}
+
+    .planner-patient-wrapper header {
+        display: flex;
+    }
+
+        .planner-patient-wrapper header .module-title {
+            margin-left: 16.5px;
+        }
+
+        .planner-patient-wrapper header .add-patient {
+            flex: initial;
+            display: none;
+        }
+
+            .planner-patient-wrapper header .add-patient .e-icon-add {
+                padding: 9px 0 10px 20px;
+                font-size: 10px;
+                color: #0a8a8a;
+            }
+
+                .planner-patient-wrapper header .add-patient .e-icon-add::before {
+                    content: '\e95c';
+                }
+
+            .planner-patient-wrapper header .add-patient .add-patient-label {
+                font-weight: 600;
+                font-size: 13px;
+                color: #0a8a8a;
+                letter-spacing: 0.39px;
+                padding: 5px;
+            }
+
+    .planner-patient-wrapper .patients-detail-wrapper .patient-operations {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+        .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper {
+            width: 190px;
+            margin-right: 16px;
+        }
+
+            .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper .e-input-group span.search-icon {
+                cursor: default;
+            }
+
+                .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper .e-input-group span.search-icon::before {
+                    content: '\e993';
+                }
+
+    .planner-patient-wrapper .patients-detail-wrapper .patient-display {
+        margin-top: 17px;
+    }
+
+        .planner-patient-wrapper .patients-detail-wrapper .patient-display .e-grid .e-gridcontent tr.e-row td.e-rowcell .patient-name {
+            color: #0a8a8a;
+            cursor: pointer;
+        }
+
+.e-dialog.e-edit-dialog {
+    max-height: 495px !important;
+}
+.e-dialog.new-patient-dialog {
+    max-height: 505px !important;
+}
+
+.e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog {
+    width: 325px;
+    height: 360px;
+}
+
+        .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row {
+            display: flex;
+            padding: 5px 0;
+        }
+
+            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row label {
+                font-weight: 600;
+                font-size: 12px;
+                letter-spacing: 0.3px;
+                padding: 5px 0;
+            }
+
+            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row label, .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row span {
+                flex: 1;
+            }
+
+            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row span {
+                font-size: 14px;
+                color: #333;
+                letter-spacing: 0.39px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row {
+                flex-direction: column;
+            }
+
+                .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row label {
+                    color: #0a8a8a !important;
+                }
+
+                .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row .history-content {
+                    padding: 5px;
+                    font-size: 13px;
+                    color: #333;
+                    letter-spacing: 0.39px;
+                    line-height: 18px;
+                    margin: 10px 0;
+                    border-left: 2px solid blue;
+                }
+
+                .e-dialog.e-edit-dialog .e-dlg-content .grid-edit-dialog .field-row.history-row .empty-container {
+                    font-weight: 600;
+                    font-size: 15px;
+                    letter-spacing: 0.3px;
+                    padding: 5px 10px;
+                }
+
+@media (max-width: 850px) {
+    .planner-patient-wrapper {
+        margin: 20px 10px;
+    }
+
+        .planner-patient-wrapper header .module-title {
+            margin-left: 10px;
+            flex: 1;
+        }
+
+        .planner-patient-wrapper header .add-patient {
+            margin-right: 6px;
+            display: flex;
+            cursor: pointer;
+        }
+
+            .planner-patient-wrapper header .add-patient .add-patient-label {
+                font-weight: 500;
+            }
+
+        .planner-patient-wrapper .patients-detail-wrapper {
+            margin: 0;
+        }
+
+            .planner-patient-wrapper .patients-detail-wrapper .patient-operations {
+                margin-top: 3.3%;
+            }
+
+                .planner-patient-wrapper .patients-detail-wrapper .patient-operations .e-btn {
+                    display: none;
+                }
+
+                .planner-patient-wrapper .patients-detail-wrapper .patient-operations .planner-patient-search.search-wrapper {
+                    flex: 1;
+                    margin: 0;
+                }
+
+            .planner-patient-wrapper .patients-detail-wrapper .patient-display {
+                margin-top: 3.3%;
+            }
+}
+    .new-patient-dialog .e-dlg-content .field-container {
+        padding-bottom: 16px;
+    }
+
+    .new-patient-dialog .e-dlg-content .gender-container, .new-patient-dialog .e-dlg-content .contact-container {
+        display: flex;
+    }
+
+        .new-patient-dialog .e-dlg-content .gender-container .gender, .new-patient-dialog .e-dlg-content .contact-container .gender, .new-patient-dialog .e-dlg-content .gender-container .mobile, .new-patient-dialog .e-dlg-content .contact-container .mobile {
+            padding-right: 8px;
+            flex: 1;
+        }
+
+        .new-patient-dialog .e-dlg-content .contact-container .blood-group, .new-patient-dialog .e-dlg-content .gender-container .dob {
+            padding-left: 8px;
+            flex: 1;
+        }
+
+        .new-patient-dialog .e-dlg-content .gender-container .gender {
+            display: flex;
+            flex-direction: column;
+        }
+
+            .new-patient-dialog .e-dlg-content .gender-container .gender label:not(.e-btn) {
+                font-weight: bold;
+                color: #333;
+                font-size: 12px;
+                font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
+            }
+
+            .new-patient-dialog .e-dlg-content .gender-container .gender .e-btn-group {
+                height: 32px;
+            }
+
+                .new-patient-dialog .e-dlg-content .gender-container .gender .e-btn-group label {
+                    width: 50%;
+                }
+.e-dialog.new-patient-dialog .e-footer-content {
+    padding: 15px 15px 0 15px;
+}
+
+.patient-search.e-input-group .e-clear-icon::before {
+    font-size: 10px;
+}
+
+.e-btn-group .e-radio-wrapper {
+    padding: 4px;
+}
+
+/*skeleton*/
+.planner-patient-skeleton {
+    margin: 50px;
+}
+
+.patients-container1 {
+    height: 20%;
+    width: 100%;
+}
+
+.patients-container1 {
+    height: 70%;
+    width: 100%;
+}
+@media (max-width: 600px) {
+    .planner-patient-skeleton {
+        display: none;
+    }
+}
+#patientStatsContainer {
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:20px;
+    margin:25px;
+}
+
+#patientCard1,
+#patientCard2,
+#patientCard3,
+#patientCard4,#totalPatientsCard,
+#newPatientsCard,
+#followupPatientsCard,
+#criticalPatientsCard, #recoveryCard {
+    background: #dbf9eb;;
+    height:100px;
+    box-shadow:0 4px 20px rgb(0 0 0 / 6%);
+}
+.stat-title{
+    color:#64748B;
+    font-size:13px;
+}
+
+.stat-value{
+    font-size:32px;
+    font-weight:700;
+    color:#111827;
+    margin-top:10px;
+}
+
+.stat-growth{
+    margin-top:10px;
+    color:#8B5CF6;
+    font-weight:600;
+}
+
+.danger{
+    color:#EF4444;
+}
+#patientToolbar{
+
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+
+    background:white;
+
+    padding:20px;
+
+    border-radius:20px;
+
+    margin-bottom:20px;
+
+    box-shadow:0 4px 20px rgb(0 0 0 / 5%);
+}
+#filterSection{
+    display:flex;
+    gap:15px;
+}
+#searchSection{
+
+    width:300px;
+}#addPatientButton{
+
+    border-radius:14px;
+    height:40px;
+}#patientInfoWrapper{
+    display:flex;
+    align-items:center;
+    gap:12px;
+}#patientNameText{
+    font-weight:600;
+    color:#111827;
+}#patientCodeText{
+    font-size:12px;
+    color:#94A3B8;
+}#PatientsGrid{
+
+    border:none;
+
+    border-radius:20px;
+
+    overflow:hidden;
+
+    box-shadow:0 4px 24px rgb(0 0 0 / 5%);
+}#PatientsGrid .e-gridheader{
+    background:#FAFAFA;
+}#PatientsGrid .e-headercell{
+    color:#64748B;
+    font-weight:600;
+}#PatientsGrid .e-row:hover{
+    background:#F3F4F6;
+}.e-dialog{
+
+    border-radius:24px !important;
+}.e-dialog .e-dlg-header{
+
+    font-size:18px;
+    font-weight:700;
+}@media(max-width:768px){
+
+    #patientStatsContainer{
+        grid-template-columns:1fr;
+    }
+
+    #patientToolbar{
+        flex-direction:column;
+        gap:15px;
+    }
+
+    #searchSection{
+        width:100%;
+    }
+
+    #filterSection{
+        width:100%;
+        flex-direction:column;
+    }
+}
+.patient-title {
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding-top:10px;
+    color: #475569;
+    padding-left: 10px;
+}
+.patient-value {
+
+        font-size: 30px;
+    font-weight: 200;
+    color: #0f172a;
+   
+    margin: 4px 0;
+    padding-left: 10px;
+
+}
+.patient-subtitle{
+
+        font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding-left: 10px;
+}
\ No newline at end of file
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/preference.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/preference.css
new file mode 100644
index 0000000..b527fcf
--- /dev/null
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appointment/preference.css
@@ -0,0 +1,245 @@
+.preference-container {
+    margin: 28px 44px 40px;
+    max-width: 1120px;
+}
+
+    .preference-container > header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 24px;
+        margin-bottom: 24px;
+    }
+
+        .preference-container .preference-actions {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+        }
+
+    .preference-container .preference-intro {
+        margin: 8px auto 0 16px;
+        color: #687386;
+        font-size: 13px;
+    }
+
+    .preference-container .preference-section {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 18px;
+        margin-top: 18px;
+        padding: 24px 28px;
+        border: 1px solid #e1e7ec;
+        border-left: 4px solid #35a67a;
+        background: linear-gradient(100deg, #f4fbf8, #f7f7ff);
+        box-shadow: 0 4px 14px rgba(47, 58, 85, 0.06);
+    }
+
+        .preference-container .preference-section .section-heading {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+            grid-column: 1 / -1;
+            margin-bottom: 4px;
+        }
+
+        .preference-container .preference-section .section-icon {
+            color:#35a67a;
+            font-size: 20px;
+            padding-top: 1px;
+        }
+
+        .preference-container .preference-section h2 {
+            margin: 0 0 5px;
+            color: #333;
+            font-size: 17px;
+            font-weight: 600;
+        }
+
+        .preference-container .preference-section .section-heading p {
+            margin: 0;
+            color: #7b8493;
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+        .preference-container .preference-section .control-container {
+            display: grid;
+            grid-template-columns: minmax(190px, 0.2fr) minmax(300px, 0fr);
+            align-items: center;
+            gap: 16px 32px;
+            padding-top: 0;
+        }
+
+            .preference-container .preference-section .control-container .label-text {
+                padding: 0;
+            }
+
+            .preference-container .preference-section .control-container .preference-drop-down {
+                width: 100% !important;
+            }
+
+    .preference-container .preference-validation {
+        grid-column: 1;
+        color: #c40000;
+        font-size: 12px;
+    }
+
+    .preference-container .active-preferences {
+        margin-top: 20px;
+        padding: 22px 28px;
+        border: 1px solid #dfe3f6;
+        border-left: 4px solid #35a67a;
+        background: linear-gradient(100deg, #f4fbf8, #f7f7ff);
+        color: #333;
+    }
+
+        .preference-container .active-preferences .active-heading {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+        }
+
+        .preference-container .active-preferences .active-heading > span {
+            color: #35a67a;
+            font-size: 18px;
+        }
+
+        .preference-container .active-preferences .active-heading div {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .preference-container .active-preferences .active-heading div span {
+            color: #687386;
+            font-size: 12px;
+        }
+
+        .preference-container .configuration-values {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 12px;
+            margin-top: 20px;
+        }
+
+            .preference-container .configuration-values div {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                padding-right: 12px;
+                border-right: 1px solid #dfe3e8;
+            }
+
+            .preference-container .configuration-values div:last-child {
+                border-right: 0;
+            }
+
+            .preference-container .configuration-values .summary-label {
+                color: #778091;
+                font-size: 11px;
+                text-transform: uppercase;
+            }
+
+            .preference-container .configuration-values strong {
+                color: #303846;
+                font-size: 14px;
+        }
+
+    .preference-container .module-title {
+        margin-left: 2.5px;
+    }
+
+    .preference-container .control-container {
+        padding-top: 16px;
+    }
+
+        .preference-container .control-container .label-text {
+            font-weight: 600;
+            font-size: 12px;
+            color: #666;
+            letter-spacing: 0.33px;
+            padding-bottom: 7px;
+        }
+
+        .preference-container .control-container:nth-child(2) {
+            padding-top: 34px;
+        }
+
+@media (max-width: 850px) {
+    .preference-container {
+        margin: 20px 13px;
+        max-width: none;
+    }
+
+        .preference-container > header {
+            flex-direction: column;
+            gap: 16px;
+        }
+
+            .preference-container .preference-actions {
+                justify-content: flex-start;
+            }
+
+        .preference-container .preference-section {
+            gap: 12px;
+            margin-top: 12px;
+            padding: 18px;
+        }
+
+            .preference-container .preference-section .control-container {
+                grid-template-columns: 1fr;
+                padding-top: 0;
+            }
+
+        .preference-container .preference-validation {
+            grid-column: 1;
+        }
+
+        .preference-container .configuration-values {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+            .preference-container .configuration-values div:nth-child(2) {
+                border-right: 1px solid #dfe3e8;
+            }
+
+            .preference-container .configuration-values div:nth-child(even) {
+                border-right: 0;
+            }
+
+        .preference-container .module-title {
+            padding-left: 12.5px !important;
+        }
+
+        .preference-container .control-container {
+            padding-top: 16px;
+        }
+
+            .preference-container .control-container .label-text {
+                padding-bottom: 7px;
+                margin-left: 11.5px;
+            }
+
+            .preference-container .control-container:nth-child(2) {
+                padding-top: 30px;
+            }
+}
+
+/*skeleton*/
+
+.planner-preference-skeleton {
+    margin: 50px;
+}
+
+.preference-container1 {
+    height: 20%;
+    width: 100%;
+    margin: 0% 0% 4% 0%;
+}
+
+.preference-container2 {
+    height: 80%;
+    width: 100%;
+}
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/main.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/sidebar.css
similarity index 59%
rename from webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/main.css
rename to webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/sidebar.css
index d15fa56..6c89781 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/appoinment/main.css
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/sidebar.css
@@ -1,8 +1,7 @@
-#plannerSiderBar .info {
-    margin-top: 60px;
-    padding-bottom: 10px;
+#plannerSiderBar .info {
+    
+    padding-bottom: 15px;
 }
-
     #plannerSiderBar .info .image {
         border: 2px solid #fff;
         box-shadow: 0 3px 7px 0 rgba(117, 117, 255, 0.30);
@@ -16,52 +15,56 @@
     display: none;
 }
 
-
-#plannerSiderBar .info .image img {
-    height: 80px;
-    width: 80px;
-    border-radius: 50%;
+.e-sidebar.e-left {
+    background: #0a4d4a !important;
 }
 
-#plannerSiderBar .info .name, #plannerSiderBar .info .user-type {
-    text-align: center;
-}
+        #plannerSiderBar .info .image img {
+            height: 80px;
+            width: 80px;
+            border-radius: 50%;
+        }
 
-#plannerSiderBar .info .name {
-    font-weight: bold;
-    font-size: 16px;
-    color: #333;
-    letter-spacing: 0.48px;
-    margin-bottom: 0;
-}
+    #plannerSiderBar .info .name, #plannerSiderBar .info .user-type {
+        text-align: center;
+    }
 
-#plannerSiderBar .info p {
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-}
+    #plannerSiderBar .info .name {
+        font-weight: bold;
+        font-size: 16px;
+        color: #fff;
+        letter-spacing: 0.48px;
+        margin-bottom: 0;
+    }
 
-#plannerSiderBar .info .user-type {
-    font-size: 11px;
-    color: #808080;
-    letter-spacing: 0.33px;
-    margin-top: 5px;
-}
+    #plannerSiderBar .info p {
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+    }
 
-#plannerSiderBar .info::after {
-    content: '';
-    background-image: linear-gradient(-90deg, #fff 3%, #b8cbcc 51%, #fff 95%);
-    height: 1px;
-    width: 100%;
-    position: absolute;
-}
+    #plannerSiderBar .info .user-type {
+        font-size: 11px;
+        color: #fff;
+        letter-spacing: 0.33px;
+        margin-top: 5px;
+    }
+
+    #plannerSiderBar .info::after {
+        content: '';
+        background-image: linear-gradient(-90deg, #fff 3%, #b8cbcc 51%, #fff 95%);
+        height: 1px;
+        width: 100%;
+        position: absolute;
+    }
 
 #plannerSiderBar .sidebar-item {
     height: 50px;
     border-radius: 3px;
     display: flex;
     align-items: center;
-    color: #666;
+    color: #fff;
     cursor: pointer;
+
 }
 
     #plannerSiderBar .sidebar-item .text {
@@ -71,120 +74,119 @@
         margin: 0 15px;
         text-align: left;
     }
-
     #plannerSiderBar .sidebar-item.active, #plannerSiderBar .sidebar-item.active:hover {
-        background-color: #7575ff;
+        background-color: #0a8a8a;
         color: #fff;
     }
 
-    #plannerSiderBar .sidebar-item .dashboard-image, #plannerSiderBar .sidebar-item .scheduler-image, #plannerSiderBar .sidebar-item .doctors-image, #plannerSiderBar .sidebar-item .patients-image, #plannerSiderBar .sidebar-item .preference-image, #plannerSiderBar .sidebar-item .about-image {
-        width: 30%;
-        text-align: right;
-        margin-top: 9px;
-    }
-
-.planner-header .e-appbar.custom-appbar {
-    background: #7575ff !important;
-    height: 50px;
-    display: flex;
+#plannerSiderBar .sidebar-item .dashboard-image, #plannerSiderBar .sidebar-item .scheduler-image, #plannerSiderBar .sidebar-item .doctors-image, #plannerSiderBar .sidebar-item .patients-image, #plannerSiderBar .sidebar-item .preference-image, #plannerSiderBar .sidebar-item .about-image {
+  width: 30%;
+  text-align: right;
+  margin-top: 9px;
 }
 
-.planner-header .name-cantainer {
-    flex: auto;
-    display: inline-flex;
+.planner-header .e-appbar.custom-appbar  {
+    background: #0a4d4a !important;
+    height: 56px;
+    display: flex;
 }
 
-    .planner-header .name-cantainer .clinic-image {
-        font-size: 50px;
-        color: #fff;
+    .planner-header .name-cantainer {
+        flex: auto;
+        display: inline-flex;
     }
 
-.planner-header .clinic-name, .planner-header .logout-name {
-    margin: auto 0;
-    color: white;
-    cursor: default;
-}
-
-.planner-header div.side-bar-opener {
-    display: block;
-    flex: auto;
-    position: relative;
-}
-
-.planner-header .clinic-name.appointment-title {
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.planner-header div.side-bar-opener .open-icon {
-    margin: 15px;
-    position: absolute;
-    font-size: 20px;
-    color: #fff;
-    height: 24px;
-    width: 24px;
-}
+         .clinic-image {
+            font-size: 50px;
+            color: #fff;
+        }
 
-    .planner-header div.side-bar-opener .open-icon::before {
-        content: '\e941';
+     .clinic-name,  .logout-name {
+        margin: auto 0;
+        color: white;
+        cursor: default;
     }
 
-.e-appbar > div:first-child {
-    display: none !important;
-}
-
-.planner-header .logout-container {
-    padding: 5px;
-    flex: initial;
-    display: flex;
-}
-
-    .planner-header .logout-container .logout-icon-container {
-        opacity: 1;
+    .planner-header div.side-bar-opener {
+        display: block;
         flex: auto;
-        padding: 0 7px;
-        align-self: center;
-    }
-
-    .planner-header .logout-container .logout-name {
-        display: none;
+        position: relative;
     }
+	.clinic-name.appointment-title {
+        font-size: 18px;
+        font-weight: 700;
+        color:#fff;
+        padding-left: 10px; 
+     }
+
+        .planner-header div.side-bar-opener .open-icon {
+            margin: 15px;
+            position: absolute;
+            font-size: 20px;
+            color: #fff;
+            height: 24px;
+            width: 24px;
+        }
 
-    .planner-header .logout-container .logout-image {
-        color: #fff;
-        font-size: 25px;
-        cursor: pointer;
-    }
+            .planner-header div.side-bar-opener .open-icon::before {
+                content: '\e941';
+            }
 
-.planner-header:not(.device-header) {
-    display: flex;
-}
+        .e-appbar > div:first-child {
+            display: none !important;
+        }
+        .planner-header .logout-container {
+            padding: 5px;
+            flex: initial;
+            display: flex;
+        }
 
-    .planner-header:not(.device-header) div .side-bar-opener {
-        display: none;
-    }
+        .logout-container .logout-icon-container {
+            opacity: 1;
+            flex: auto;
+            padding: 0 7px;
+            align-self: center;
+        }
 
-    .planner-header:not(.device-header) .logout-container {
-        padding: 7px 10px;
-    }
+        .logout-container .logout-name {
+            display: none;
+        }
 
-        .planner-header:not(.device-header) .logout-container .logout-name {
-            flex: initial;
-            display: block;
+         .logout-container .logout-image {
+            color: #fff;
+            font-size: 25px;
             cursor: pointer;
         }
 
-        .planner-header:not(.device-header) .logout-container .logout-icon-container {
-            opacity: 0.5;
+    .planner-header:not(.device-header) {
+        display: flex;
+    }
+
+        .planner-header:not(.device-header) div .side-bar-opener {
+            display: none;
         }
 
-        .planner-header:not(.device-header) .logout-container::before {
-            content: '';
-            height: 33px;
-            border: 1px solid #fff;
-            opacity: 0.5;
+        .planner-header:not(.device-header) .logout-container {
+            padding: 7px 10px;
         }
 
+            .planner-header:not(.device-header) .logout-container .logout-name {
+                flex: initial;
+                display: block;
+                cursor: pointer;
+            }
+
+            .planner-header:not(.device-header) .logout-container .logout-icon-container {
+                opacity: 0.5;
+            }
+
+            .planner-header:not(.device-header) .logout-container::before {
+                content: '';
+                height: 33px;
+                border: 1px solid #fff;
+                opacity: 0.5;
+            }
+
 .planner-wrapper .e-content-animation {
     margin-left: 0 !important;
     padding-left: 243px;
@@ -205,7 +207,7 @@ header .module-title .title {
 }
 
 header .module-title .underline {
-    background: #7575ff;
+    background: #0a8a8a;
     border-radius: 5px;
     width: 52px;
     height: 4px;
@@ -220,11 +222,17 @@ header .module-title .underline {
     top: auto;
 }
 
+/* Normal document flow — a fixed+overflow:scroll shell breaks the
+   Syncfusion grid's virtual-scroll measurement (content floats over the page) */
 .main-content {
-    height: calc(100vh - 20%);
+    /* width: 100%;
+    position: static !important;
+    overflow: visible !important;
+    height: auto !important; */
     width: 100%;
     position: fixed;
-    overflow: scroll;
+    overflow-y: scroll;
+    height: calc(100vh - 10%);
 }
 
 @media (max-width: 850px) {
@@ -232,7 +240,6 @@ header .module-title .underline {
         padding-bottom: 10px;
     }
 }
-
 @media (max-width: 700px) {
 
     .planner-dashboard .list-display {
@@ -251,17 +258,15 @@ header .module-title .underline {
 
 
 
-    .col-lg-3.col-md-3.col-sm-3.treeview-container-wrapper .title-container {
-        margin-top: 20px;
-    }
+        .col-lg-3.col-md-3.col-sm-3.treeview-container-wrapper .title-container {
+            margin-top: 20px;
+        }
 }
-
 @media (max-width: 700px) {
     .planner-calendar .col-lg-3.col-md-3.col-sm-3.treeview-container-wrapper {
         padding-top: 20px;
         max-width: 100%;
     }
-
     .e-appbar > div:first-child {
         display: flex !important;
         flex-basis: 12%;
@@ -273,23 +278,20 @@ header .module-title .underline {
         flex-grow: 0;
         flex-shrink: 0;
     }
-
-    .planner-header div.side-bar-opener .open-icon {
-        display: flex;
-        text-align: center;
-        vertical-align: middle;
-        align-items: center;
-        flex-basis: 100%;
-        flex-grow: 0;
-        flex-shrink: 0;
-        padding: 0px;
-        margin: 0px;
-    }
-
-    .planner-wrapper .e-content-animation {
-        padding-left: 0px;
-    }
-
+        .planner-header div.side-bar-opener .open-icon {
+            display: flex;
+            text-align: center;
+            vertical-align: middle;
+            align-items: center;
+            flex-basis: 100%;
+            flex-grow: 0;
+            flex-shrink: 0;
+            padding: 0px;
+            margin: 0px;
+        }
+        .planner-wrapper .e-content-animation {
+            padding-left: 0px;
+        }
     .planner-header:not(.device-header) {
         display: flex;
         flex-direction: row;
@@ -297,7 +299,6 @@ header .module-title .underline {
         width: 100%;
         position: relative;
     }
-
     .planner-header .name-cantainer {
         flex: auto;
         display: flex;
@@ -306,7 +307,6 @@ header .module-title .underline {
         flex-grow: 0;
         flex-shrink: 0;
     }
-
     .sb-header-item.sb-table-cell {
         display: flex;
         flex-basis: 14%;
@@ -318,7 +318,6 @@ header .module-title .underline {
         flex-grow: 0;
         flex-shrink: 0;
     }
-
     .planner-header .logout-container {
         display: flex;
         flex-grow: 0;
@@ -328,34 +327,32 @@ header .module-title .underline {
         text-align: center;
         justify-content: center;
     }
-
     .e-content-animation .doctor-details-container .active-doctor {
         display: block;
     }
-
     .planner-dashboard .view-detail-display .e-card .e-card-content .count-container {
         margin: 0 0px 6.3px 0px;
     }
-
     .planner-dashboard .view-detail-display .e-card .e-card-content .week-event-count,
     .planner-dashboard .view-detail-display .e-card .e-card-content .day-event-count {
         padding-left: 25.6px;
     }
 }
 
-
-/*font family*/
-
-@font-face {
+ @font-face {
     font-family: 'icons';
-    src: url(assets/fonts/icomoon.ttf?gcjn6a) format('truetype'), url(assets/fonts/icomoon.woff?gcjn6a) format('woff'), url(assets/fonts/icomoon.svg?gcjn6a#sbicons) format('svg');
+    src:
+        url('/css/appointment/assets/fonts/icomoon.woff') format('woff'),
+        url('/css/appointment/assets/fonts/icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
-@font-face {
+ @font-face {
     font-family: 'sb-icons';
-    src: url(assets/fonts/icons.ttf?gcjn6a) format('truetype'), url(assets/fonts/icons.woff?gcjn6a) format('woff'), url(assets/fonts/icons.svg?gcjn6a#sbicons) format('svg');
+    src:
+        url('/css/appointment/assets/fonts/icons.woff') format('woff'),
+        url('/css/appointment/assets/fonts/icons.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
@@ -384,9 +381,18 @@ header .module-title .underline {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+    font-family: "icons" !important;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    display: inline-block;
+}
 [class^="sfimage-"], [class*=" sfimage-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
+
     font-family: 'sb-icons' !important;
     font-style: normal;
     font-size: 20px;
@@ -398,7 +404,6 @@ header .module-title .underline {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
 .icon-about:before {
     content: "\e900";
 }
@@ -442,6 +447,11 @@ header .module-title .underline {
 .icon-reorder:before {
     content: "\e90b";
 }
+.item-image {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+}
 
 
 /*listview customization*/
@@ -451,7 +461,6 @@ header .module-title .underline {
     width: auto;
     margin: auto;
 }
-
 .menulist.e-listview:not(.e-list-template) .e-list-item {
     height: 50px;
     line-height: 50px;
@@ -462,15 +471,12 @@ header .module-title .underline {
     color: #666;
     cursor: pointer;
 }
-
 .menulist.e-listview .e-text-content {
     text-align: center;
 }
-
 .menulist.e-listview .e-list-icon + .e-list-text {
     width: calc(100% - 120px);
 }
-
 .menulist.e-listview .e-list-parent.e-ul {
     margin: 0 16px;
     width: 210px;
@@ -481,7 +487,6 @@ header .module-title .underline {
     font-size: 12px;
     font-weight: 400;
 }
-
     .menulist.e-listview .e-list-item.e-active {
         background-color: transparent;
         color: transparent;
@@ -490,9 +495,8 @@ header .module-title .underline {
 .validation-message {
     color: red;
 }
-
 .e-app-mainpage {
-    background: linear-gradient(-141deg, #FBFAFF 14%, #FBFAFF 100%);
+   background: linear-gradient(-141deg, #FBFAFF 14%, #FBFAFF 100%);
 }
 
 
@@ -511,9 +515,9 @@ header .module-title .underline {
     left: 0px;
 }
 
-    .sb-content-overlay.sb-hide {
-        display: none;
-    }
+.sb-content-overlay.sb-hide {
+    display: none;
+}
 
 .sb-loading {
     width: 56px;
@@ -552,14 +556,15 @@ header .module-title .underline {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
     }
-
     50% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -35;
     }
-
     100% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -124;
     }
 }
+
+
+
diff --git a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/site.css b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/site.css
index 6ec41b8..e390d29 100644
--- a/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/site.css
+++ b/webapp/wasm/AppointmentPlanner/AppointmentPlanner/wwwroot/css/site.css
@@ -1,9 +1,33 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
+/* @import url('/open-iconic/font/css/open-iconic-bootstrap.min.css'); */
 
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+.skip-link {
+    position: absolute;
+    top: -48px;
+    left: 8px;
+    z-index: 10000;
+    padding: 10px 18px;
+    background: #0f172a;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    border-radius: 0 0 8px 8px;
+    text-decoration: none;
+    transition: top .15s ease-in;
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+.planner-wrapper :is(button, a, input, select, textarea, [tabindex]):focus-visible {
+    outline: 3px solid #0a8a8a !important;
+    outline-offset: 2px !important;
+}
+
 a, .btn-link {
     color: #0366d6;
 }
@@ -179,9 +203,8 @@ app {
     cursor: pointer;
 }
 .nav-item.e-list-item:hover {
-    background-color: #f5f5f5;
-    border-color: transparent;
-    color: rgba(51,51,51,.87);
+
+    color: #666;
 }
 ul.nav.flex-column {
     margin: 0 16px;
@@ -220,7 +243,7 @@ ul.nav.flex-column {
     align-items: center;
     gap: 20px;
 }
-.footer-logo{
+.footer-logo {
     width: 38px;
     height: 38px;
 }
@@ -306,7 +329,7 @@ ul.nav.flex-column {
     }
 
     .footer-content .buttons .e-trial-btn::after {
-        display: none;
+        display:none;
     }
 }