From 2ca0078223500b7e43011054bca73234deff381d Mon Sep 17 00:00:00 2001
From: voltsrage <electric5388@hotmail.com>
Date: Sat, 20 Jun 2026 07:58:15 +0800
Subject: [PATCH] fix styling to be more responsive and clean

---
 vigilcare-dashboard/index.html                |  11 +-
 .../src/components/alerts/AlertCard.vue       |   6 +-
 .../src/components/alerts/AlertFilters.vue    |  28 +-
 .../src/components/layout/AppHeader.vue       |  90 +++++-
 .../src/components/layout/AppShell.vue        |  14 +-
 .../src/components/layout/AppSidebar.vue      |  65 +++-
 .../src/components/layout/MobileNav.vue       |  64 ++++
 .../src/components/patient/AlertsList.vue     |   6 +-
 .../src/components/patient/OrdersPanel.vue    |   6 +-
 .../src/components/patient/ScoresPanel.vue    |   6 +-
 .../components/patient/SepsisBundlePanel.vue  |   8 +-
 .../src/components/patient/VitalsPanel.vue    |   6 +-
 .../src/components/ui/Badge.vue               |   2 +-
 .../src/components/ui/Button.vue              |   4 +-
 .../src/components/ui/Card.vue                |   4 +-
 .../src/components/ui/Modal.vue               |   4 +-
 .../src/components/ui/Skeleton.vue            |   2 +-
 .../src/components/ward/PatientCard.vue       |  53 +++
 .../src/components/ward/PatientRow.vue        |  12 +-
 .../src/components/ward/WardTable.vue         |  30 +-
 vigilcare-dashboard/src/style.css             | 304 +-----------------
 vigilcare-dashboard/src/views/AlertCenter.vue |   2 +-
 .../src/views/PatientDetail.vue               |   8 +-
 .../src/views/WardDashboard.vue               |  30 +-
 24 files changed, 398 insertions(+), 367 deletions(-)
 create mode 100644 vigilcare-dashboard/src/components/layout/MobileNav.vue
 create mode 100644 vigilcare-dashboard/src/components/ward/PatientCard.vue
diff --git a/vigilcare-dashboard/index.html b/vigilcare-dashboard/index.html
index c75431d..15eda8e 100644
--- a/vigilcare-dashboard/index.html
+++ b/vigilcare-dashboard/index.html
@@ -4,7 +4,16 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>vigilcare-dashboard</title>
+    <title>VigilCare Clinical</title>
+    <script>
+      ;(function () {
+        try {
+          if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark')
+          }
+        } catch (_) {}
+      })()
+    </script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/vigilcare-dashboard/src/components/alerts/AlertCard.vue b/vigilcare-dashboard/src/components/alerts/AlertCard.vue
index f5dcaca..16aae04 100644
--- a/vigilcare-dashboard/src/components/alerts/AlertCard.vue
+++ b/vigilcare-dashboard/src/components/alerts/AlertCard.vue
@@ -34,7 +34,7 @@ function formatTime(iso) {
 
 <template>
   <Card>
-    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
       <div class="min-w-0 flex-1">
         <div class="flex flex-wrap items-center gap-2">
           <Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
@@ -43,7 +43,7 @@ function formatTime(iso) {
         <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
           {{ alertTypeLabel(alert.alertType) }}
         </h3>
-        <p v-if="alert.details" class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        <p v-if="alert.details" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           {{ alert.details }}
         </p>
         <p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
@@ -51,7 +51,7 @@ function formatTime(iso) {
         </p>
       </div>
 
-      <div v-if="showActions(alert.status)" class="flex shrink-0 gap-2">
+      <div v-if="showActions(alert.status)" class="flex w-full shrink-0 gap-2 sm:w-auto">
         <Button
           v-if="canAcknowledge(alert.status)"
           size="sm"
diff --git a/vigilcare-dashboard/src/components/alerts/AlertFilters.vue b/vigilcare-dashboard/src/components/alerts/AlertFilters.vue
index a622d7b..709f6ce 100644
--- a/vigilcare-dashboard/src/components/alerts/AlertFilters.vue
+++ b/vigilcare-dashboard/src/components/alerts/AlertFilters.vue
@@ -10,18 +10,20 @@ const tabs = [
 </script>
 
 <template>
-  <div class="flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-    <button
-      v-for="tab in tabs"
-      :key="tab.value"
-      type="button"
-      class="border-b-2 px-4 py-2 text-sm font-medium transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-      :class="activeFilter === tab.value
-        ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
-        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
-      @click="activeFilter = tab.value"
-    >
-      {{ tab.label }}
-    </button>
+  <div class="-mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0">
+    <div class="flex min-w-max gap-2 border-b border-gray-200 dark:border-gray-700 sm:min-w-0 sm:flex-wrap">
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        type="button"
+        class="shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        :class="activeFilter === tab.value
+          ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+          : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+        @click="activeFilter = tab.value"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
   </div>
 </template>
diff --git a/vigilcare-dashboard/src/components/layout/AppHeader.vue b/vigilcare-dashboard/src/components/layout/AppHeader.vue
index 3aaf1e5..4a9c926 100644
--- a/vigilcare-dashboard/src/components/layout/AppHeader.vue
+++ b/vigilcare-dashboard/src/components/layout/AppHeader.vue
@@ -1,8 +1,94 @@
 <script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useWardStore } from '@/stores/ward'
+import { useDarkMode } from '@/composables/useDarkMode'
+
+const route = useRoute()
+const wardStore = useWardStore()
+const { department } = storeToRefs(wardStore)
+const { darkMode, toggle } = useDarkMode()
+
+const pageTitle = computed(() => route.meta.title ?? 'VigilCare')
+
+const departments = [
+  { value: '', label: 'All departments' },
+  { value: 'ICU', label: 'ICU' },
+  { value: 'GENERAL_MEDICINE', label: 'General Medicine' },
+  { value: 'SURGERY', label: 'Surgery' },
+]
+
+function onDepartmentChange(event) {
+  const value = event.target.value || null
+  wardStore.setDepartment(value)
+}
 </script>
 
 <template>
-  <header class="flex h-14 items-center border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900">
-    <h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">VigilCare Clinical</h1>
+  <header class="sticky top-0 z-30 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+    <div class="flex h-16 items-center gap-4 px-4 lg:px-8">
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+          VigilCare Clinical
+        </p>
+        <h1 class="truncate text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ pageTitle }}
+        </h1>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-2 sm:gap-4">
+        <label v-if="route.name === 'WardDashboard'" class="hidden sm:block">
+          <span class="sr-only">Department filter</span>
+          <select
+            :value="department ?? ''"
+            class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+            @change="onDepartmentChange"
+          >
+            <option v-for="dept in departments" :key="dept.value" :value="dept.value">
+              {{ dept.label }}
+            </option>
+          </select>
+        </label>
+
+        <button
+          type="button"
+          class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-600 transition duration-200 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-gray-300 dark:hover:bg-gray-800"
+          :aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+          @click="toggle"
+        >
+          <svg
+            v-if="darkMode"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+            />
+          </svg>
+          <svg
+            v-else
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
   </header>
 </template>
diff --git a/vigilcare-dashboard/src/components/layout/AppShell.vue b/vigilcare-dashboard/src/components/layout/AppShell.vue
index d9f4af5..72d24de 100644
--- a/vigilcare-dashboard/src/components/layout/AppShell.vue
+++ b/vigilcare-dashboard/src/components/layout/AppShell.vue
@@ -1,16 +1,20 @@
 <script setup>
 import AppHeader from './AppHeader.vue'
 import AppSidebar from './AppSidebar.vue'
+import MobileNav from './MobileNav.vue'
 </script>
 
 <template>
-  <div class="flex h-screen bg-gray-50 dark:bg-gray-950">
+  <div class="flex min-h-screen bg-gray-50 dark:bg-gray-950">
     <AppSidebar />
-    <div class="flex flex-1 flex-col overflow-hidden">
+    <div class="flex min-w-0 flex-1 flex-col">
       <AppHeader />
-      <main class="flex-1 overflow-y-auto p-4 lg:p-6">
-        <slot />
+      <main class="flex-1 overflow-y-auto p-4 pb-24 lg:p-8 lg:pb-8">
+        <div class="mx-auto w-full max-w-7xl">
+          <slot />
+        </div>
       </main>
     </div>
+    <MobileNav />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/vigilcare-dashboard/src/components/layout/AppSidebar.vue b/vigilcare-dashboard/src/components/layout/AppSidebar.vue
index 604276a..63a4a82 100644
--- a/vigilcare-dashboard/src/components/layout/AppSidebar.vue
+++ b/vigilcare-dashboard/src/components/layout/AppSidebar.vue
@@ -1,13 +1,68 @@
 <script setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const links = [
+  { to: '/ward', label: 'Virtual Ward', icon: 'ward' },
+  { to: '/alerts', label: 'Alert Center', icon: 'alerts' },
+]
+
+function linkClasses(path) {
+  const active = route.path.startsWith(path)
+  return active
+    ? 'bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300'
+    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+}
 </script>
 
 <template>
-  <aside class="hidden w-64 border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 lg:block">
-    <div class="flex h-14 items-center px-4">
-      <span class="text-lg font-bold text-gray-900 dark:text-gray-100">VC</span>
+  <aside class="hidden w-64 shrink-0 border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 lg:flex lg:flex-col">
+    <div class="flex h-16 items-center px-8">
+      <span class="text-lg font-bold text-gray-900 dark:text-gray-100">VigilCare</span>
     </div>
-    <nav class="px-2 py-4">
-      <slot />
+    <nav class="flex-1 px-4 py-4" aria-label="Main navigation">
+      <ul class="space-y-2">
+        <li v-for="link in links" :key="link.to">
+          <RouterLink
+            :to="link.to"
+            class="flex items-center gap-4 rounded-lg px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            :class="linkClasses(link.to)"
+          >
+            <svg
+              v-if="link.icon === 'ward'"
+              class="h-6 w-6 shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 10h16M4 14h16M4 18h16"
+              />
+            </svg>
+            <svg
+              v-else
+              class="h-6 w-6 shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+              />
+            </svg>
+            {{ link.label }}
+          </RouterLink>
+        </li>
+      </ul>
     </nav>
   </aside>
 </template>
diff --git a/vigilcare-dashboard/src/components/layout/MobileNav.vue b/vigilcare-dashboard/src/components/layout/MobileNav.vue
new file mode 100644
index 0000000..b0e5dd7
--- /dev/null
+++ b/vigilcare-dashboard/src/components/layout/MobileNav.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const links = [
+  { to: '/ward', label: 'Ward', icon: 'ward' },
+  { to: '/alerts', label: 'Alerts', icon: 'alerts' },
+]
+
+const activePath = computed(() => route.path)
+</script>
+
+<template>
+  <nav
+    class="fixed inset-x-0 bottom-0 z-40 border-t border-gray-200 bg-white lg:hidden dark:border-gray-800 dark:bg-gray-900"
+    aria-label="Mobile navigation"
+  >
+    <ul class="flex h-16 items-stretch">
+      <li v-for="link in links" :key="link.to" class="flex-1">
+        <RouterLink
+          :to="link.to"
+          class="flex h-full flex-col items-center justify-center gap-2 px-4 py-2 text-xs font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500"
+          :class="activePath.startsWith(link.to)
+            ? 'text-blue-600 dark:text-blue-400'
+            : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+        >
+          <svg
+            v-if="link.icon === 'ward'"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 10h16M4 14h16M4 18h16"
+            />
+          </svg>
+          <svg
+            v-else
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+            />
+          </svg>
+          {{ link.label }}
+        </RouterLink>
+      </li>
+    </ul>
+  </nav>
+</template>
diff --git a/vigilcare-dashboard/src/components/patient/AlertsList.vue b/vigilcare-dashboard/src/components/patient/AlertsList.vue
index 837c276..772f2be 100644
--- a/vigilcare-dashboard/src/components/patient/AlertsList.vue
+++ b/vigilcare-dashboard/src/components/patient/AlertsList.vue
@@ -41,7 +41,7 @@ async function resolve(alertId) {
 <template>
   <Card>
     <template #header>
-      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
         Active Alerts
       </h2>
     </template>
@@ -51,7 +51,7 @@ async function resolve(alertId) {
       <li
         v-for="alert in alerts"
         :key="alert.id"
-        class="flex items-start justify-between gap-3 py-3 first:pt-0 last:pb-0"
+        class="flex flex-col gap-4 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between"
       >
         <div class="min-w-0 flex-1">
           <div class="flex flex-wrap items-center gap-2">
@@ -60,7 +60,7 @@ async function resolve(alertId) {
               {{ alertTypeLabel(alert.alertType) }}
             </span>
           </div>
-          <p v-if="alert.details" class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">
+          <p v-if="alert.details" class="mt-2 truncate text-xs text-gray-500 dark:text-gray-400">
             {{ alert.details }}
           </p>
         </div>
diff --git a/vigilcare-dashboard/src/components/patient/OrdersPanel.vue b/vigilcare-dashboard/src/components/patient/OrdersPanel.vue
index ac260aa..d723a7b 100644
--- a/vigilcare-dashboard/src/components/patient/OrdersPanel.vue
+++ b/vigilcare-dashboard/src/components/patient/OrdersPanel.vue
@@ -26,7 +26,7 @@ function statusVariant(status) {
 <template>
   <Card>
     <template #header>
-      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
         Orders
       </h2>
     </template>
@@ -40,7 +40,7 @@ function statusVariant(status) {
           <li
             v-for="order in pendingOrders"
             :key="order.id"
-            class="flex items-center justify-between gap-3 py-2 first:pt-0"
+            class="flex items-center justify-between gap-4 py-2 first:pt-0"
           >
             <div class="min-w-0">
               <div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
@@ -59,7 +59,7 @@ function statusVariant(status) {
             :key="order.id"
             class="py-2 first:pt-0"
           >
-            <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center justify-between gap-4">
               <div class="min-w-0">
                 <div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
                 <div v-if="order.resultSummary" class="text-xs text-gray-500 dark:text-gray-400">
diff --git a/vigilcare-dashboard/src/components/patient/ScoresPanel.vue b/vigilcare-dashboard/src/components/patient/ScoresPanel.vue
index 8c04c74..ddfcc5a 100644
--- a/vigilcare-dashboard/src/components/patient/ScoresPanel.vue
+++ b/vigilcare-dashboard/src/components/patient/ScoresPanel.vue
@@ -40,7 +40,7 @@ const qsofaVariant = computed(() => {
 <template>
   <Card>
     <template #header>
-      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
         Clinical Scores
       </h2>
     </template>
@@ -48,7 +48,7 @@ const qsofaVariant = computed(() => {
     <div class="grid grid-cols-2 gap-4">
       <div>
         <div class="text-xs text-gray-500 dark:text-gray-400">NEWS2</div>
-        <div class="mt-1 flex items-center gap-2">
+        <div class="mt-2 flex items-center gap-2">
           <Badge :variant="news2Variant">{{ news2?.totalScore ?? '—' }}</Badge>
           <span v-if="news2?.riskLevel" class="text-xs text-gray-500 dark:text-gray-400">
             {{ news2.riskLevel }}
@@ -57,7 +57,7 @@ const qsofaVariant = computed(() => {
       </div>
       <div>
         <div class="text-xs text-gray-500 dark:text-gray-400">qSOFA</div>
-        <div class="mt-1">
+        <div class="mt-2">
           <Badge :variant="qsofaVariant">{{ qsofa?.activeCriteria ?? '—' }}</Badge>
           <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">/ 3 criteria</span>
         </div>
diff --git a/vigilcare-dashboard/src/components/patient/SepsisBundlePanel.vue b/vigilcare-dashboard/src/components/patient/SepsisBundlePanel.vue
index 7b419e5..4468f94 100644
--- a/vigilcare-dashboard/src/components/patient/SepsisBundlePanel.vue
+++ b/vigilcare-dashboard/src/components/patient/SepsisBundlePanel.vue
@@ -48,7 +48,7 @@ function elementComplete(element) {
 <template>
   <Card>
     <template #header>
-      <div class="mb-3 flex items-center justify-between gap-2">
+      <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
         <h2 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
           Sepsis Bundle
         </h2>
@@ -56,7 +56,7 @@ function elementComplete(element) {
       </div>
     </template>
 
-    <div class="mb-4 flex items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-800">
+    <div class="mb-4 flex items-center justify-between rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
       <span class="text-sm text-gray-600 dark:text-gray-300">Time to deadline</span>
       <span
         class="font-mono text-lg font-semibold"
@@ -70,10 +70,10 @@ function elementComplete(element) {
       <li
         v-for="element in bundle.elements"
         :key="element.id"
-        class="flex items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700"
+        class="flex items-center gap-4 rounded-lg border border-gray-200 p-4 dark:border-gray-700"
       >
         <span
-          class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs"
+          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs"
           :class="elementComplete(element)
             ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
             : 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500'"
diff --git a/vigilcare-dashboard/src/components/patient/VitalsPanel.vue b/vigilcare-dashboard/src/components/patient/VitalsPanel.vue
index 6fe5f85..58cce65 100644
--- a/vigilcare-dashboard/src/components/patient/VitalsPanel.vue
+++ b/vigilcare-dashboard/src/components/patient/VitalsPanel.vue
@@ -24,16 +24,16 @@ const latestByCode = computed(() => {
 <template>
   <Card>
     <template #header>
-      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
         Latest Vitals
       </h2>
     </template>
 
-    <div v-if="latestByCode.length" class="grid grid-cols-2 gap-3">
+    <div v-if="latestByCode.length" class="grid grid-cols-2 gap-4 sm:grid-cols-3">
       <div
         v-for="obs in latestByCode"
         :key="obs.id ?? obs.observationCode"
-        class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800"
+        class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
       >
         <div class="text-xs text-gray-500 dark:text-gray-400">
           {{ observationCodeLabel(obs.observationCode) }}
diff --git a/vigilcare-dashboard/src/components/ui/Badge.vue b/vigilcare-dashboard/src/components/ui/Badge.vue
index c8da31a..deafeef 100644
--- a/vigilcare-dashboard/src/components/ui/Badge.vue
+++ b/vigilcare-dashboard/src/components/ui/Badge.vue
@@ -9,7 +9,7 @@ const props = defineProps({
 
 const classes = computed(() => {
   const base = 'inline-flex items-center font-medium rounded-full'
-  const sizes = { xs: 'px-1.5 py-0.5 text-xs', sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-1 text-sm' }
+  const sizes = { xs: 'px-2 py-2 text-xs', sm: 'px-2 py-2 text-xs', md: 'px-4 py-2 text-sm' }
   const variants = {
     critical: 'bg-severity-critical/10 text-severity-critical dark:bg-severity-critical-dark/20 dark:text-red-300',
     warning:  'bg-severity-warning/10 text-severity-warning dark:bg-severity-warning-dark/20 dark:text-amber-300',
diff --git a/vigilcare-dashboard/src/components/ui/Button.vue b/vigilcare-dashboard/src/components/ui/Button.vue
index 1e1d313..29191e5 100644
--- a/vigilcare-dashboard/src/components/ui/Button.vue
+++ b/vigilcare-dashboard/src/components/ui/Button.vue
@@ -25,9 +25,9 @@ const classes = computed(() => {
   const base =
     'inline-flex items-center justify-center font-medium rounded-lg transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none'
   const sizes = {
-    sm: 'px-3 py-1.5 text-xs',
+    sm: 'px-4 py-2 text-xs',
     md: 'px-4 py-2 text-sm',
-    lg: 'px-5 py-2.5 text-base',
+    lg: 'px-6 py-2 text-base',
   }
   const variants = {
     primary:
diff --git a/vigilcare-dashboard/src/components/ui/Card.vue b/vigilcare-dashboard/src/components/ui/Card.vue
index b1e52eb..ce3ed00 100644
--- a/vigilcare-dashboard/src/components/ui/Card.vue
+++ b/vigilcare-dashboard/src/components/ui/Card.vue
@@ -15,9 +15,9 @@ const classes = computed(() => {
     'rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900'
   const paddings = {
     none: '',
-    sm: 'p-3',
+    sm: 'p-4',
     md: 'p-4',
-    lg: 'p-6',
+    lg: 'p-8',
   }
   return twMerge(base, paddings[props.padding])
 })
diff --git a/vigilcare-dashboard/src/components/ui/Modal.vue b/vigilcare-dashboard/src/components/ui/Modal.vue
index 249e2ac..6d49546 100644
--- a/vigilcare-dashboard/src/components/ui/Modal.vue
+++ b/vigilcare-dashboard/src/components/ui/Modal.vue
@@ -15,10 +15,10 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
 
 <template>
   <Teleport to="body">
-    <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
+    <div v-if="open" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center">
       <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="$emit('close')" />
       <div ref="modalRef" role="dialog" aria-modal="true"
-           class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-800">
+           class="relative z-10 max-h-[calc(100svh-2rem)] w-full max-w-md overflow-y-auto rounded-lg bg-white p-8 shadow-lg dark:bg-gray-800">
         <h2 v-if="title" class="mb-4 text-lg font-semibold dark:text-white">{{ title }}</h2>
         <slot />
       </div>
diff --git a/vigilcare-dashboard/src/components/ui/Skeleton.vue b/vigilcare-dashboard/src/components/ui/Skeleton.vue
index fe9d5d0..c24348f 100644
--- a/vigilcare-dashboard/src/components/ui/Skeleton.vue
+++ b/vigilcare-dashboard/src/components/ui/Skeleton.vue
@@ -5,7 +5,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="animate-pulse space-y-3" role="status" aria-label="Loading">
+  <div class="animate-pulse space-y-4" role="status" aria-label="Loading">
     <div
       v-for="n in rows"
       :key="n"
diff --git a/vigilcare-dashboard/src/components/ward/PatientCard.vue b/vigilcare-dashboard/src/components/ward/PatientCard.vue
new file mode 100644
index 0000000..20a852a
--- /dev/null
+++ b/vigilcare-dashboard/src/components/ward/PatientCard.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from 'vue'
+import Badge from '@/components/ui/Badge.vue'
+
+const props = defineProps({ patient: { type: Object, required: true } })
+
+const riskVariant = computed(() => {
+  const score = props.patient.news2Score ?? 0
+  if (score >= 7) return 'critical'
+  if (score >= 5) return 'warning'
+  return 'success'
+})
+</script>
+
+<template>
+  <article
+    class="cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition duration-200 hover:border-gray-300 hover:shadow-md active:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+            Room {{ patient.room ?? '—' }}
+          </span>
+          <Badge v-if="patient.sepsisActive" variant="critical" size="xs">Sepsis</Badge>
+        </div>
+        <h3 class="mt-2 truncate text-base font-semibold text-gray-900 dark:text-white">
+          {{ patient.firstName }} {{ patient.lastName }}
+        </h3>
+        <p class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</p>
+      </div>
+      <Badge :variant="riskVariant">NEWS2 {{ patient.news2Score ?? '—' }}</Badge>
+    </div>
+
+    <dl class="mt-4 grid grid-cols-2 gap-4 border-t border-gray-100 pt-4 dark:border-gray-800">
+      <div>
+        <dt class="text-xs text-gray-500 dark:text-gray-400">qSOFA</dt>
+        <dd class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
+          {{ patient.qsofaScore ?? '—' }}
+        </dd>
+      </div>
+      <div>
+        <dt class="text-xs text-gray-500 dark:text-gray-400">Open alerts</dt>
+        <dd class="mt-2">
+          <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
+            {{ patient.openAlertCount }}
+          </Badge>
+          <span v-else class="text-sm text-gray-400">0</span>
+        </dd>
+      </div>
+    </dl>
+  </article>
+</template>
diff --git a/vigilcare-dashboard/src/components/ward/PatientRow.vue b/vigilcare-dashboard/src/components/ward/PatientRow.vue
index 9ea412a..77e6dbe 100644
--- a/vigilcare-dashboard/src/components/ward/PatientRow.vue
+++ b/vigilcare-dashboard/src/components/ward/PatientRow.vue
@@ -14,26 +14,26 @@ const riskVariant = computed(() => {
 
 <template>
   <tr>
-    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
       {{ patient.room ?? '—' }}
     </td>
-    <td class="px-4 py-3">
+    <td class="px-4 py-4">
       <div class="text-sm font-medium text-gray-900 dark:text-white">
         {{ patient.firstName }} {{ patient.lastName }}
       </div>
       <div class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</div>
     </td>
-    <td class="whitespace-nowrap px-4 py-3 text-right">
+    <td class="whitespace-nowrap px-4 py-4 text-right">
       <Badge :variant="riskVariant">{{ patient.news2Score ?? '—' }}</Badge>
     </td>
-    <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-gray-700 dark:text-gray-300">
+    <td class="whitespace-nowrap px-4 py-4 text-right text-sm text-gray-700 dark:text-gray-300">
       {{ patient.qsofaScore ?? '—' }}
     </td>
-    <td class="whitespace-nowrap px-4 py-3">
+    <td class="whitespace-nowrap px-4 py-4">
       <Badge v-if="patient.sepsisActive" variant="critical">Active</Badge>
       <span v-else class="text-sm text-gray-400">No</span>
     </td>
-    <td class="whitespace-nowrap px-4 py-3">
+    <td class="whitespace-nowrap px-4 py-4">
       <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
         {{ patient.openAlertCount }}
       </Badge>
diff --git a/vigilcare-dashboard/src/components/ward/WardTable.vue b/vigilcare-dashboard/src/components/ward/WardTable.vue
index 95f1c6a..25dbe91 100644
--- a/vigilcare-dashboard/src/components/ward/WardTable.vue
+++ b/vigilcare-dashboard/src/components/ward/WardTable.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useRouter } from 'vue-router'
 import PatientRow from './PatientRow.vue'
+import PatientCard from './PatientCard.vue'
 
 defineProps({ patients: { type: Array, required: true } })
 const router = useRouter()
@@ -11,16 +12,27 @@ function goToPatient(encounterId) {
 </script>
 
 <template>
-  <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+  <!-- Mobile: card list -->
+  <div class="space-y-4 md:hidden">
+    <PatientCard
+      v-for="patient in patients"
+      :key="patient.encounterId"
+      :patient="patient"
+      @click="goToPatient(patient.encounterId)"
+    />
+  </div>
+
+  <!-- Desktop: scrollable table -->
+  <div class="hidden overflow-x-auto rounded-lg border border-gray-200 md:block dark:border-gray-700">
     <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="sticky top-0 bg-gray-50 dark:bg-gray-800">
         <tr>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">NEWS2</th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">qSOFA</th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sepsis</th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Alerts</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
+          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">NEWS2</th>
+          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">qSOFA</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sepsis</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Alerts</th>
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
@@ -28,10 +40,10 @@ function goToPatient(encounterId) {
           v-for="patient in patients"
           :key="patient.encounterId"
           :patient="patient"
-          class="cursor-pointer transition duration-150 hover:bg-gray-50 dark:hover:bg-gray-800"
+          class="cursor-pointer transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
           @click="goToPatient(patient.encounterId)"
         />
       </tbody>
     </table>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/vigilcare-dashboard/src/style.css b/vigilcare-dashboard/src/style.css
index bbf23da..a1653fc 100644
--- a/vigilcare-dashboard/src/style.css
+++ b/vigilcare-dashboard/src/style.css
@@ -1,298 +1,18 @@
 @import "tailwindcss";
 
-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+/* 8px spacing rhythm — use Tailwind scale steps 2, 4, 6, 8, 12, 16 (8, 16, 24, 32, 48, 64 px) */
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+  body {
+    margin: 0;
+    min-height: 100svh;
+  }
 
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-body {
-  margin: 0;
-}
-
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}
-
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#app {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
+  #app {
+    min-height: 100svh;
   }
 }
diff --git a/vigilcare-dashboard/src/views/AlertCenter.vue b/vigilcare-dashboard/src/views/AlertCenter.vue
index 86ccc19..a4ff377 100644
--- a/vigilcare-dashboard/src/views/AlertCenter.vue
+++ b/vigilcare-dashboard/src/views/AlertCenter.vue
@@ -42,7 +42,7 @@ async function handleResolve(alertId) {
 
     <Skeleton v-if="loading && alerts.length === 0" class="mt-4" :rows="4" />
     <EmptyState v-else-if="alerts.length === 0" class="mt-4" message="No alerts for this status" />
-    <div v-else class="mt-4 space-y-3">
+    <div v-else class="mt-4 space-y-4">
       <AlertCard
         v-for="alert in alerts"
         :key="alert.id"
diff --git a/vigilcare-dashboard/src/views/PatientDetail.vue b/vigilcare-dashboard/src/views/PatientDetail.vue
index 27c6d3a..7b6b8e9 100644
--- a/vigilcare-dashboard/src/views/PatientDetail.vue
+++ b/vigilcare-dashboard/src/views/PatientDetail.vue
@@ -47,8 +47,8 @@ watch(() => route.params.encounterId, loadAll)
 
 <template>
   <Skeleton v-if="loading && !encounter" :rows="6" />
-  <div v-else-if="encounter" class="space-y-6">
-    <div class="flex items-center gap-4">
+  <div v-else-if="encounter" class="space-y-8">
+    <div class="flex flex-wrap items-center gap-4">
       <RouterLink to="/ward" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
         &larr; Ward
       </RouterLink>
@@ -57,13 +57,13 @@ watch(() => route.params.encounterId, loadAll)
       </h1>
     </div>
 
-    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       <ScoresPanel :news2="news2" :encounter="encounter" />
       <VitalsPanel :observations="observations" />
       <AlertsList :encounter-id="route.params.encounterId" />
     </div>
 
-    <div class="grid gap-4 md:grid-cols-2">
+    <div class="grid gap-4 lg:grid-cols-2">
       <OrdersPanel :orders="orders" />
       <SepsisBundlePanel v-if="sepsisBundle" :bundle="sepsisBundle" />
     </div>
diff --git a/vigilcare-dashboard/src/views/WardDashboard.vue b/vigilcare-dashboard/src/views/WardDashboard.vue
index aea43f0..caf4b8c 100644
--- a/vigilcare-dashboard/src/views/WardDashboard.vue
+++ b/vigilcare-dashboard/src/views/WardDashboard.vue
@@ -8,20 +8,46 @@ import EmptyState from '@/components/ui/EmptyState.vue'
 import Badge from '@/components/ui/Badge.vue'
 
 const wardStore = useWardStore()
-const { sortedByRisk, loading, error, criticalCount } = storeToRefs(wardStore)
+const { sortedByRisk, loading, error, criticalCount, department } = storeToRefs(wardStore)
 
 usePolling(() => wardStore.loadEncounters(), 10_000)
+
+const departments = [
+  { value: '', label: 'All departments' },
+  { value: 'ICU', label: 'ICU' },
+  { value: 'GENERAL_MEDICINE', label: 'General Medicine' },
+  { value: 'SURGERY', label: 'Surgery' },
+]
+
+function onDepartmentChange(event) {
+  wardStore.setDepartment(event.target.value || null)
+}
 </script>
 
 <template>
   <div>
-    <div class="mb-4 flex items-center justify-between">
+    <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
       <h1 class="text-xl font-bold dark:text-white">Virtual Ward</h1>
       <Badge v-if="criticalCount > 0" variant="critical">
         {{ criticalCount }} critical
       </Badge>
     </div>
 
+    <label class="mb-4 block sm:hidden">
+      <span class="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+        Department
+      </span>
+      <select
+        :value="department ?? ''"
+        class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+        @change="onDepartmentChange"
+      >
+        <option v-for="dept in departments" :key="dept.value" :value="dept.value">
+          {{ dept.label }}
+        </option>
+      </select>
+    </label>
+
     <Skeleton v-if="loading && sortedByRisk.length === 0" :rows="5" />
     <EmptyState v-else-if="sortedByRisk.length === 0" message="No active patients" />
     <WardTable v-else :patients="sortedByRisk" />
