From 8b0b9ce3db34aba603eeebea01b23df9f281ad44 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Sun, 21 Jun 2026 15:34:46 +0000
Subject: [PATCH] Add more to kiosk page

---
 WebDisplay/Dockerfile                         |   2 +-
 WebDisplay/src/components/AlarmOverview.vue   |   2 -
 WebDisplay/src/components/Almanac.vue         |  98 ++++++-----
 WebDisplay/src/components/CalendarAgenda.vue  |   2 -
 .../src/components/CurrentLaundryStatus.vue   |  40 +++--
 WebDisplay/src/components/CurrentPower.vue    |  48 +++---
 WebDisplay/src/components/CurrentWeather.vue  | 132 ++++++++-------
 WebDisplay/src/components/Indoor.vue          |  57 ++++---
 WebDisplay/src/components/IndoorSummary.vue   |  65 ++++----
 WebDisplay/src/components/NationalDays.vue    |   2 -
 WebDisplay/src/components/WeatherSummary.vue  | 152 +++++++++---------
 WebDisplay/src/pages/index/index.vue          |  28 ++--
 WebDisplay/src/pages/index/summary.vue        |  30 ++--
 WebDisplay/src/pages/kiosk.vue                |  81 ++++++++--
 14 files changed, 387 insertions(+), 352 deletions(-)

diff --git a/WebDisplay/Dockerfile b/WebDisplay/Dockerfile
index 0c37d34..8015ca5 100644
--- a/WebDisplay/Dockerfile
+++ b/WebDisplay/Dockerfile
@@ -11,7 +11,7 @@ COPY . .
 RUN pnpm run build
 
 # production stage
-FROM nginx:stable-alpine AS production-stage
+FROM nginx:lts-alpine AS production-stage
 COPY nginx/default.conf /etc/nginx/conf.d/
 RUN rm -rf /usr/share/nginx/html/*
 COPY --from=build-stage /app/dist /usr/share/nginx/html
diff --git a/WebDisplay/src/components/AlarmOverview.vue b/WebDisplay/src/components/AlarmOverview.vue
index 6ce61a5..0f9ec0f 100644
--- a/WebDisplay/src/components/AlarmOverview.vue
+++ b/WebDisplay/src/components/AlarmOverview.vue
@@ -82,8 +82,6 @@
 
 <style scoped>
     .alarm-overview {
-        background-color: #121212;
-        border-radius: 10px;
         display: flex;
         flex: 1;
         flex-direction: column;
diff --git a/WebDisplay/src/components/Almanac.vue b/WebDisplay/src/components/Almanac.vue
index 00d7e57..f3bfa0c 100644
--- a/WebDisplay/src/components/Almanac.vue
+++ b/WebDisplay/src/components/Almanac.vue
@@ -65,56 +65,54 @@
 </script>
 
 <template>
-    <DashboardItem title="Almanac">
-        <div className="almanac-content">
-            <div v-if="!almanacStore.sunTimes || !almanacStore.moonIllumination">Loading...</div>
-            <table v-else>
-                <tbody>
-                    <tr>
-                        <td className="almanac-table-header">Sunrise</td>
-                        <td colSpan="{2}">
-                            {{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="almanac-table-header">Sunset</td>
-                        <td colSpan="{2}">
-                            {{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="almanac-table-header">Day length</td>
-                        <td colSpan="{2}">{{ dayLength() }}</td>
-                    </tr>
-                    <tr>
-                        <td className="almanac-table-header">Moonrise</td>
-                        <td colSpan="{2}">
-                            {{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="almanac-table-header">Moonset</td>
-                        <td colSpan="{2}">
-                            {{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="almanac-table-header">Moon</td>
-                        <td>
-                            {{ moonPhaseName() }}
-                            <br />
-                            {{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
-                        </td>
-                        <td>
-                            <div className="moon-phase">
-                                {{ moonPhaseLetter() }}
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="almanac-content">
+        <div v-if="!almanacStore.sunTimes || !almanacStore.moonIllumination">Loading...</div>
+        <table v-else>
+            <tbody>
+                <tr>
+                    <td className="almanac-table-header">Sunrise</td>
+                    <td colSpan="{2}">
+                        {{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
+                    </td>
+                </tr>
+                <tr>
+                    <td className="almanac-table-header">Sunset</td>
+                    <td colSpan="{2}">
+                        {{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
+                    </td>
+                </tr>
+                <tr>
+                    <td className="almanac-table-header">Day length</td>
+                    <td colSpan="{2}">{{ dayLength() }}</td>
+                </tr>
+                <tr>
+                    <td className="almanac-table-header">Moonrise</td>
+                    <td colSpan="{2}">
+                        {{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
+                    </td>
+                </tr>
+                <tr>
+                    <td className="almanac-table-header">Moonset</td>
+                    <td colSpan="{2}">
+                        {{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
+                    </td>
+                </tr>
+                <tr>
+                    <td className="almanac-table-header">Moon</td>
+                    <td>
+                        {{ moonPhaseName() }}
+                        <br />
+                        {{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
+                    </td>
+                    <td>
+                        <div className="moon-phase">
+                            {{ moonPhaseLetter() }}
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style scoped>
diff --git a/WebDisplay/src/components/CalendarAgenda.vue b/WebDisplay/src/components/CalendarAgenda.vue
index 384ddb6..5c15476 100644
--- a/WebDisplay/src/components/CalendarAgenda.vue
+++ b/WebDisplay/src/components/CalendarAgenda.vue
@@ -94,8 +94,6 @@
 
 <style>
     .calendar {
-        background-color: #121212;
-        border-radius: 10px;
         display: flex;
         flex: 1;
         flex-direction: column;
diff --git a/WebDisplay/src/components/CurrentLaundryStatus.vue b/WebDisplay/src/components/CurrentLaundryStatus.vue
index e86af87..2ce593f 100644
--- a/WebDisplay/src/components/CurrentLaundryStatus.vue
+++ b/WebDisplay/src/components/CurrentLaundryStatus.vue
@@ -6,27 +6,25 @@
 </script>
 
 <template>
-    <DashboardItem title="Laundry">
-        <div className="laundry-current">
-            <div v-if="!laundryStore.current">Loading...</div>
-            <table v-else>
-                <tbody>
-                    <tr v-if="laundryStore.current.dryer != null">
-                        <td className="laundry-current-header">Dryer</td>
-                        <td :className="laundryStore.current.dryer.toString()">
-                            {{ laundryStore.current.dryer ? 'On' : 'Off' }}
-                        </td>
-                    </tr>
-                    <tr v-if="laundryStore.current.washer != null">
-                        <td className="laundry-current-header">Washer</td>
-                        <td :className="laundryStore.current.washer.toString()">
-                            {{ laundryStore.current.washer ? 'On' : 'Off' }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="laundry-current">
+        <div v-if="!laundryStore.current">Loading...</div>
+        <table v-else>
+            <tbody>
+                <tr v-if="laundryStore.current.dryer != null">
+                    <td className="laundry-current-header">Dryer</td>
+                    <td :className="laundryStore.current.dryer.toString()">
+                        {{ laundryStore.current.dryer ? 'On' : 'Off' }}
+                    </td>
+                </tr>
+                <tr v-if="laundryStore.current.washer != null">
+                    <td className="laundry-current-header">Washer</td>
+                    <td :className="laundryStore.current.washer.toString()">
+                        {{ laundryStore.current.washer ? 'On' : 'Off' }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style>
diff --git a/WebDisplay/src/components/CurrentPower.vue b/WebDisplay/src/components/CurrentPower.vue
index f4ddbe2..87a1710 100644
--- a/WebDisplay/src/components/CurrentPower.vue
+++ b/WebDisplay/src/components/CurrentPower.vue
@@ -6,33 +6,27 @@
 </script>
 
 <template>
-    <DashboardItem title="Power">
-        <div className="power-current">
-            <div v-if="!powerStore.current">Loading...</div>
-            <table v-else>
-                <tbody>
-                    <tr>
-                        <td className="power-current-header">Generation</td>
-                        <td>
-                            {{
-                                powerStore.current!.Generation < 0
-                                    ? 0
-                                    : powerStore.current!.Generation
-                            }}
-                            W
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="power-current-header">Consumption</td>
-                        <td>
-                            {{ powerStore.current!.Consumption }}
-                            W
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="power-current">
+        <div v-if="!powerStore.current">Loading...</div>
+        <table v-else>
+            <tbody>
+                <tr>
+                    <td className="power-current-header">Generation</td>
+                    <td>
+                        {{ powerStore.current!.Generation < 0 ? 0 : powerStore.current!.Generation }}
+                        W
+                    </td>
+                </tr>
+                <tr>
+                    <td className="power-current-header">Consumption</td>
+                    <td>
+                        {{ powerStore.current!.Consumption }}
+                        W
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style scoped>
diff --git a/WebDisplay/src/components/CurrentWeather.vue b/WebDisplay/src/components/CurrentWeather.vue
index bbbf555..4f9661a 100644
--- a/WebDisplay/src/components/CurrentWeather.vue
+++ b/WebDisplay/src/components/CurrentWeather.vue
@@ -8,73 +8,71 @@
 </script>
 
 <template>
-    <DashboardItem title="Weather">
-        <div className="weather-current">
-            <div v-if="!weatherStore.current">Loading...</div>
-            <table
-                v-else
-                class="weather-table">
-                <tbody>
-                    <tr>
-                        <td
-                            className="weather-current-header"
-                            width="1">
-                            Temperature
-                        </td>
-                        <td :colspan="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill ? 1 : 3">
-                            {{ weatherStore.current?.Temperature?.toFixed(2) }}°F
-                        </td>
-                        <td>
-                            <div
-                                v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
-                                className="weather-current-header ml-8">
-                                Feels like
-                            </div>
-                        </td>
-                        <td>
-                            <div v-if="weatherStore.current?.HeatIndex">{{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F</div>
-                            <div v-if="weatherStore.current?.WindChill">{{ weatherStore.current?.WindChill?.toFixed(2) }}°F</div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="weather-current-header">Humidity</td>
-                        <td colspan="3">{{ weatherStore.current?.Humidity?.toFixed(2) }}%</td>
-                    </tr>
-                    <tr>
-                        <td className="weather-current-header">Dew point</td>
-                        <td colspan="3">{{ weatherStore.current?.DewPoint?.toFixed(2) }}°F</td>
-                    </tr>
-                    <tr>
-                        <td className="weather-current-header">Pressure</td>
-                        <td colspan="3">
-                            {{ weatherStore.current?.Pressure && (weatherStore.current?.Pressure / 100).toFixed(2) }} mbar
-                            <PressureTrendArrow
-                                class="pressure-trend-arrow"
-                                :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="weather-current-header">Wind</td>
-                        <td colspan="3">
-                            {{ weatherStore.current?.WindSpeed?.toFixed(2) }}
-                            mph {{ ShortenWindDirection(weatherStore.current?.WindDirection) }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td className="weather-current-header">Rain</td>
-                        <td colspan="3">{{ weatherStore.current?.RainLastHour?.toFixed(2) }}" (last hour)</td>
-                    </tr>
-                    <tr>
-                        <td className="weather-current-header">Light</td>
-                        <td colspan="3">
-                            {{ weatherStore.current?.LightLevel?.toFixed(2) }}
-                            lx
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="weather-current">
+        <div v-if="!weatherStore.current">Loading...</div>
+        <table
+            v-else
+            class="weather-table">
+            <tbody>
+                <tr>
+                    <td
+                        className="weather-current-header"
+                        width="1">
+                        Temperature
+                    </td>
+                    <td :colspan="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill ? 1 : 3">
+                        {{ weatherStore.current?.Temperature?.toFixed(2) }}°F
+                    </td>
+                    <td>
+                        <div
+                            v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
+                            className="weather-current-header ml-8">
+                            Feels like
+                        </div>
+                    </td>
+                    <td>
+                        <div v-if="weatherStore.current?.HeatIndex">{{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F</div>
+                        <div v-if="weatherStore.current?.WindChill">{{ weatherStore.current?.WindChill?.toFixed(2) }}°F</div>
+                    </td>
+                </tr>
+                <tr>
+                    <td className="weather-current-header">Humidity</td>
+                    <td colspan="3">{{ weatherStore.current?.Humidity?.toFixed(2) }}%</td>
+                </tr>
+                <tr>
+                    <td className="weather-current-header">Dew point</td>
+                    <td colspan="3">{{ weatherStore.current?.DewPoint?.toFixed(2) }}°F</td>
+                </tr>
+                <tr>
+                    <td className="weather-current-header">Pressure</td>
+                    <td colspan="3">
+                        {{ weatherStore.current?.Pressure && (weatherStore.current?.Pressure / 100).toFixed(2) }} mbar
+                        <PressureTrendArrow
+                            class="pressure-trend-arrow"
+                            :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
+                    </td>
+                </tr>
+                <tr>
+                    <td className="weather-current-header">Wind</td>
+                    <td colspan="3">
+                        {{ weatherStore.current?.WindSpeed?.toFixed(2) }}
+                        mph {{ ShortenWindDirection(weatherStore.current?.WindDirection) }}
+                    </td>
+                </tr>
+                <tr>
+                    <td className="weather-current-header">Rain</td>
+                    <td colspan="3">{{ weatherStore.current?.RainLastHour?.toFixed(2) }}" (last hour)</td>
+                </tr>
+                <tr>
+                    <td className="weather-current-header">Light</td>
+                    <td colspan="3">
+                        {{ weatherStore.current?.LightLevel?.toFixed(2) }}
+                        lx
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style>
diff --git a/WebDisplay/src/components/Indoor.vue b/WebDisplay/src/components/Indoor.vue
index 81f9cf4..5022cb7 100644
--- a/WebDisplay/src/components/Indoor.vue
+++ b/WebDisplay/src/components/Indoor.vue
@@ -4,7 +4,6 @@
     import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
 
     const props = defineProps({
-        title: { type: String, required: true },
         deviceName: { type: String, required: true }
     });
 
@@ -53,35 +52,33 @@
 </script>
 
 <template>
-    <DashboardItem :title="title">
-        <div className="current">
-            <div v-if="!indoorStore.current">Loading...</div>
-            <table v-else>
-                <tbody>
-                    <tr>
-                        <td className="header">Temperature</td>
-                        <td>{{ ConvertCToF(indoorStore.current.temperature).toFixed(2) }}°F</td>
-                    </tr>
-                    <tr>
-                        <td className="header">Humidity</td>
-                        <td>{{ indoorStore.current.humidity.toFixed(2) }}%</td>
-                    </tr>
-                    <tr>
-                        <td className="header">Pressure</td>
-                        <td>{{ ConvertMillibarToInchesOfMercury(indoorStore.current.pressure).toFixed(2) }}"</td>
-                    </tr>
-                    <tr>
-                        <td className="header">Air quality</td>
-                        <td
-                            :class="airQualityClass(indoorStore.current.airQualityIndex)"
-                            :title="indoorStore.current.airQualityIndex.toString()">
-                            {{ airQualityDescription(indoorStore.current.airQualityIndex) }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="current">
+        <div v-if="!indoorStore.current">Loading...</div>
+        <table v-else>
+            <tbody>
+                <tr>
+                    <td className="header">Temperature</td>
+                    <td>{{ ConvertCToF(indoorStore.current.temperature).toFixed(2) }}°F</td>
+                </tr>
+                <tr>
+                    <td className="header">Humidity</td>
+                    <td>{{ indoorStore.current.humidity.toFixed(2) }}%</td>
+                </tr>
+                <tr>
+                    <td className="header">Pressure</td>
+                    <td>{{ ConvertMillibarToInchesOfMercury(indoorStore.current.pressure).toFixed(2) }}"</td>
+                </tr>
+                <tr>
+                    <td className="header">Air quality</td>
+                    <td
+                        :class="airQualityClass(indoorStore.current.airQualityIndex)"
+                        :title="indoorStore.current.airQualityIndex.toString()">
+                        {{ airQualityDescription(indoorStore.current.airQualityIndex) }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style scoped>
diff --git a/WebDisplay/src/components/IndoorSummary.vue b/WebDisplay/src/components/IndoorSummary.vue
index 594f7f0..6524800 100644
--- a/WebDisplay/src/components/IndoorSummary.vue
+++ b/WebDisplay/src/components/IndoorSummary.vue
@@ -7,7 +7,6 @@
 
     const props = defineProps({
         name: { type: String, required: true },
-        title: { type: String, required: true },
         start: { type: Date, required: true },
         end: { type: Date, required: true }
     });
@@ -31,39 +30,37 @@
 </script>
 
 <template>
-    <DashboardItem :title="props.title">
-        <div className="reading-summary">
-            <div v-if="!readingAggregates">Loading...</div>
-            <table v-else>
-                <tbody>
-                    <tr>
-                        <th></th>
-                        <th>Minimum</th>
-                        <th>Average</th>
-                        <th>Maximum</th>
-                    </tr>
-                    <tr>
-                        <td class="reading-summary-header">Temperature</td>
-                        <td>{{ ConvertCToF(readingAggregates!.minimumTemperature).toFixed(2) }}°F</td>
-                        <td>{{ ConvertCToF(readingAggregates!.averageTemperature).toFixed(2) }}°F</td>
-                        <td>{{ ConvertCToF(readingAggregates!.maximumTemperature).toFixed(2) }}°F</td>
-                    </tr>
-                    <tr>
-                        <td class="reading-summary-header">Humidity</td>
-                        <td>{{ readingAggregates!.minimumHumidity.toFixed(2) }}%</td>
-                        <td>{{ readingAggregates!.averageHumidity.toFixed(2) }}%</td>
-                        <td>{{ readingAggregates!.maximumHumidity.toFixed(2) }}%</td>
-                    </tr>
-                    <tr>
-                        <td class="reading-summary-header">Pressure</td>
-                        <td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.minimumPressure).toFixed(2) }}"</td>
-                        <td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.averagePressure).toFixed(2) }}"</td>
-                        <td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.maximumPressure).toFixed(2) }}"</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="reading-summary">
+        <div v-if="!readingAggregates">Loading...</div>
+        <table v-else>
+            <tbody>
+                <tr>
+                    <th></th>
+                    <th>Minimum</th>
+                    <th>Average</th>
+                    <th>Maximum</th>
+                </tr>
+                <tr>
+                    <td class="reading-summary-header">Temperature</td>
+                    <td>{{ ConvertCToF(readingAggregates!.minimumTemperature).toFixed(2) }}°F</td>
+                    <td>{{ ConvertCToF(readingAggregates!.averageTemperature).toFixed(2) }}°F</td>
+                    <td>{{ ConvertCToF(readingAggregates!.maximumTemperature).toFixed(2) }}°F</td>
+                </tr>
+                <tr>
+                    <td class="reading-summary-header">Humidity</td>
+                    <td>{{ readingAggregates!.minimumHumidity.toFixed(2) }}%</td>
+                    <td>{{ readingAggregates!.averageHumidity.toFixed(2) }}%</td>
+                    <td>{{ readingAggregates!.maximumHumidity.toFixed(2) }}%</td>
+                </tr>
+                <tr>
+                    <td class="reading-summary-header">Pressure</td>
+                    <td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.minimumPressure).toFixed(2) }}"</td>
+                    <td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.averagePressure).toFixed(2) }}"</td>
+                    <td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.maximumPressure).toFixed(2) }}"</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style scoped>
diff --git a/WebDisplay/src/components/NationalDays.vue b/WebDisplay/src/components/NationalDays.vue
index 11e3628..0435e13 100644
--- a/WebDisplay/src/components/NationalDays.vue
+++ b/WebDisplay/src/components/NationalDays.vue
@@ -75,8 +75,6 @@
 
 <style>
     .national-days {
-        background-color: #121212;
-        border-radius: 10px;
         padding: 10px;
         display: flex;
         flex: 1;
diff --git a/WebDisplay/src/components/WeatherSummary.vue b/WebDisplay/src/components/WeatherSummary.vue
index 79583c0..5e92a08 100644
--- a/WebDisplay/src/components/WeatherSummary.vue
+++ b/WebDisplay/src/components/WeatherSummary.vue
@@ -29,83 +29,81 @@
 </script>
 
 <template>
-    <DashboardItem title="Weather">
-        <div className="weather-summary">
-            <div v-if="!weatherAggregates">Loading...</div>
-            <table v-else>
-                <tbody>
-                    <tr>
-                        <th></th>
-                        <th>Minimum</th>
-                        <th>Average</th>
-                        <th>Maximum</th>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Temperature</td>
-                        <td>{{ weatherAggregates!.temperature.min.toFixed(2) }}°F</td>
-                        <td>{{ weatherAggregates!.temperature.average.toFixed(2) }}°F</td>
-                        <td>{{ weatherAggregates!.temperature.max.toFixed(2) }}°F</td>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Humidity</td>
-                        <td>{{ weatherAggregates!.humidity.min.toFixed(2) }}%</td>
-                        <td>{{ weatherAggregates!.humidity.average.toFixed(2) }}%</td>
-                        <td>{{ weatherAggregates!.humidity.max.toFixed(2) }}%</td>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Pressure</td>
-                        <td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.min).toFixed(2) }}"</td>
-                        <td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.average).toFixed(2) }}"</td>
-                        <td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.max).toFixed(2) }}"</td>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Light</td>
-                        <td>
-                            {{ weatherAggregates!.light.min.toFixed(2) }}
-                            lx
-                        </td>
-                        <td>
-                            {{ weatherAggregates!.light.average.toFixed(2) }}
-                            lx
-                        </td>
-                        <td>
-                            {{ weatherAggregates!.light.max.toFixed(2) }}
-                            lx
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Wind speed</td>
-                        <td>
-                            {{ weatherAggregates!.windSpeed.min.toFixed(2) }}
-                            mph
-                        </td>
-                        <td>
-                            {{ weatherAggregates!.windSpeed.average.toFixed(2) }}
-                            mph
-                        </td>
-                        <td>
-                            {{ weatherAggregates!.windSpeed.max.toFixed(2) }}
-                            mph
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Wind direction</td>
-                        <td></td>
-                        <td>
-                            {{ ShortenWindDirection(weatherAggregates!.windDirectionAverage) }}
-                        </td>
-                        <td></td>
-                    </tr>
-                    <tr>
-                        <td class="weather-summary-header">Rain</td>
-                        <td></td>
-                        <td></td>
-                        <td>{{ weatherAggregates!.rainTotal.toFixed(2) }}"</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DashboardItem>
+    <div className="weather-summary">
+        <div v-if="!weatherAggregates">Loading...</div>
+        <table v-else>
+            <tbody>
+                <tr>
+                    <th></th>
+                    <th>Minimum</th>
+                    <th>Average</th>
+                    <th>Maximum</th>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Temperature</td>
+                    <td>{{ weatherAggregates!.temperature.min.toFixed(2) }}°F</td>
+                    <td>{{ weatherAggregates!.temperature.average.toFixed(2) }}°F</td>
+                    <td>{{ weatherAggregates!.temperature.max.toFixed(2) }}°F</td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Humidity</td>
+                    <td>{{ weatherAggregates!.humidity.min.toFixed(2) }}%</td>
+                    <td>{{ weatherAggregates!.humidity.average.toFixed(2) }}%</td>
+                    <td>{{ weatherAggregates!.humidity.max.toFixed(2) }}%</td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Pressure</td>
+                    <td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.min).toFixed(2) }}"</td>
+                    <td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.average).toFixed(2) }}"</td>
+                    <td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.max).toFixed(2) }}"</td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Light</td>
+                    <td>
+                        {{ weatherAggregates!.light.min.toFixed(2) }}
+                        lx
+                    </td>
+                    <td>
+                        {{ weatherAggregates!.light.average.toFixed(2) }}
+                        lx
+                    </td>
+                    <td>
+                        {{ weatherAggregates!.light.max.toFixed(2) }}
+                        lx
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Wind speed</td>
+                    <td>
+                        {{ weatherAggregates!.windSpeed.min.toFixed(2) }}
+                        mph
+                    </td>
+                    <td>
+                        {{ weatherAggregates!.windSpeed.average.toFixed(2) }}
+                        mph
+                    </td>
+                    <td>
+                        {{ weatherAggregates!.windSpeed.max.toFixed(2) }}
+                        mph
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Wind direction</td>
+                    <td></td>
+                    <td>
+                        {{ ShortenWindDirection(weatherAggregates!.windDirectionAverage) }}
+                    </td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">Rain</td>
+                    <td></td>
+                    <td></td>
+                    <td>{{ weatherAggregates!.rainTotal.toFixed(2) }}"</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
 <style scoped>
diff --git a/WebDisplay/src/pages/index/index.vue b/WebDisplay/src/pages/index/index.vue
index 0fec970..5344529 100644
--- a/WebDisplay/src/pages/index/index.vue
+++ b/WebDisplay/src/pages/index/index.vue
@@ -5,26 +5,34 @@
         fluid
         class="container">
         <v-card class="current-weather">
-            <CurrentWeather></CurrentWeather>
+            <DashboardItem title="Weather">
+                <CurrentWeather></CurrentWeather>
+            </DashboardItem>
         </v-card>
         <v-card class="almanac">
-            <Almanac></Almanac>
+            <DashboardItem title="Almanac">
+                <Almanac></Almanac>
+            </DashboardItem>
         </v-card>
         <v-card class="current-power">
-            <CurrentPower></CurrentPower>
+            <DashboardItem title="Power">
+                <CurrentPower></CurrentPower>
+            </DashboardItem>
         </v-card>
         <v-card class="current-laundry-status">
-            <CurrentLaundryStatus></CurrentLaundryStatus>
+            <DashboardItem title="Laundry">
+                <CurrentLaundryStatus></CurrentLaundryStatus>
+            </DashboardItem>
         </v-card>
         <v-card class="upstairs">
-            <Indoor
-                title="Upstairs"
-                deviceName="main"></Indoor>
+            <DashboardItem title="Upstairs">
+                <Indoor deviceName="main"></Indoor>
+            </DashboardItem>
         </v-card>
         <v-card class="downstairs">
-            <Indoor
-                title="Downstairs"
-                deviceName="basement"></Indoor>
+            <DashboardItem title="Downstairs">
+                <Indoor deviceName="basement"></Indoor>
+            </DashboardItem>
         </v-card>
     </v-container>
 </template>
diff --git a/WebDisplay/src/pages/index/summary.vue b/WebDisplay/src/pages/index/summary.vue
index 1f9c180..ac2dfc9 100644
--- a/WebDisplay/src/pages/index/summary.vue
+++ b/WebDisplay/src/pages/index/summary.vue
@@ -26,23 +26,27 @@
                 }
             "></TimeRange>
         <v-card class="weather-summary">
-            <WeatherSummary
-                :start="start"
-                :end="end"></WeatherSummary>
+            <DashboardItem title="Weather">
+                <WeatherSummary
+                    :start="start"
+                    :end="end"></WeatherSummary>
+            </DashboardItem>
         </v-card>
         <v-card class="main-summary">
-            <IndoorSummary
-                name="main"
-                title="Upstairs"
-                :start="start"
-                :end="end"></IndoorSummary>
+            <DashboardItem title="Upstairs">
+                <IndoorSummary
+                    name="main"
+                    :start="start"
+                    :end="end"></IndoorSummary>
+            </DashboardItem>
         </v-card>
         <v-card class="basement-summary">
-            <IndoorSummary
-                name="basement"
-                title="Downstairs"
-                :start="start"
-                :end="end"></IndoorSummary>
+            <DashboardItem title="Downstairs">
+                <IndoorSummary
+                    name="basement"
+                    :start="start"
+                    :end="end"></IndoorSummary>
+            </DashboardItem>
         </v-card>
     </v-container>
 </template>
diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index 772ca65..748b9cb 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -8,14 +8,22 @@
     import LongPressButton from '@/components/LongPressButton.vue';
     import PressureTrendArrow from '@/components/PressureTrendArrow.vue';
     import AlarmOverview from '@/components/AlarmOverview.vue';
+    import WeatherSummary from '@/components/WeatherSummary.vue';
+    import { subHours } from 'date-fns';
+    import Almanac from '@/components/Almanac.vue';
 
     enum KioskPage {
         Calendar,
-        AlarmOverview
+        AlarmOverview,
+        WeatherSummary,
+        Almanac
     }
 
     const kioskPage = ref(KioskPage.Calendar);
 
+    const end = ref(new Date());
+    const start = ref(subHours(end.value, 24));
+
     const outOfDateDuration = 5000;
 
     const showFeelsLike = ref(true);
@@ -252,22 +260,50 @@
                     icon="mdi-shield-home-outline"
                     :class="{ 'kiosk-navigation-selected': kioskPage === KioskPage.AlarmOverview }"
                     @click="kioskPage = KioskPage.AlarmOverview" />
+                <v-icon
+                    class="kiosk-navigation-icon"
+                    icon="mdi-weather-cloudy-clock"
+                    :class="{ 'kiosk-navigation-selected': kioskPage === KioskPage.WeatherSummary }"
+                    @click="kioskPage = KioskPage.WeatherSummary" />
+                <v-icon
+                    class="kiosk-navigation-icon"
+                    icon="mdi-notebook-outline"
+                    :class="{ 'kiosk-navigation-selected': kioskPage === KioskPage.Almanac }"
+                    @click="kioskPage = KioskPage.Almanac" />
             </div>
             <div
-                class="kiosk-calendar-page"
+                class="kiosk-page"
                 v-show="kioskPage === KioskPage.Calendar">
                 <CalendarAgenda
-                    class="kiosk-calendar"
+                    class="kiosk-panel kiosk-calendar"
                     days="10"
                     :refresh-interval="5 * 60 * 1000" />
                 <NationalDays
-                    class="kiosk-national-days"
+                    class="kiosk-panel kiosk-national-days"
                     v-show="kioskPage === KioskPage.Calendar" />
             </div>
             <div
-                class="kiosk-alarm-overview-page"
+                class="kiosk-page"
                 v-show="kioskPage === KioskPage.AlarmOverview">
-                <AlarmOverview class="kiosk-alarm-overview" />
+                <AlarmOverview class="kiosk-panel" />
+            </div>
+            <div
+                class="kiosk-page"
+                v-show="kioskPage === KioskPage.WeatherSummary">
+                <div class="kiosk-panel">
+                    <div class="kiosk-panel-header">Weather Summary</div>
+                    <WeatherSummary
+                        :start="start"
+                        :end="end"></WeatherSummary>
+                </div>
+            </div>
+            <div
+                class="kiosk-page"
+                v-show="kioskPage === KioskPage.Almanac">
+                <div class="kiosk-panel">
+                    <div class="kiosk-panel-header">Almanac</div>
+                    <Almanac></Almanac>
+                </div>
             </div>
         </div>
     </v-container>
@@ -294,6 +330,23 @@
         align-items: center;
     }
 
+    .kiosk-panel {
+        background-color: #121212;
+        border-radius: 10px;
+        width: 100%;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+    }
+
+    .kiosk-panel-header {
+        font-size: 1.15em;
+        padding-top: 10px;
+        padding-bottom: 2px;
+        text-align: center;
+        width: 100%;
+    }
+
     .kiosk-sidebar {
         padding: 5px;
         background-color: #121212;
@@ -331,7 +384,7 @@
 
     .kiosk-navigation-icon {
         font-size: 2rem;
-        margin-right: 10px;
+        margin-right: 15px;
     }
 
     .kiosk-navigation-selected {
@@ -400,14 +453,7 @@
         font-size: 1.3rem;
     }
 
-    .kiosk-calendar-page {
-        display: flex;
-        padding-top: 10px;
-        gap: 10px;
-        height: calc(100vh - 70px);
-    }
-
-    .kiosk-alarm-overview-page {
+    .kiosk-page {
         display: flex;
         padding-top: 10px;
         gap: 10px;
@@ -415,11 +461,14 @@
     }
 
     .kiosk-calendar {
-        flex-basis: 20%;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 50%;
     }
 
     .kiosk-national-days {
         flex-grow: 1;
+        flex-shrink: 1;
         flex-basis: auto;
     }