diff --git a/WebDisplay/components.d.ts b/WebDisplay/components.d.ts
index a4684a4..7f11273 100644
--- a/WebDisplay/components.d.ts
+++ b/WebDisplay/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     Indoor: typeof import('./src/components/Indoor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TimeRange: typeof import('./src/components/TimeRange.vue')['default']
     ValueChart: typeof import('./src/components/ValueChart.vue')['default']
     WeatherSummary: typeof import('./src/components/WeatherSummary.vue')['default']
   }
diff --git a/WebDisplay/package.json b/WebDisplay/package.json
index 6c88f6b..687f5e2 100644
--- a/WebDisplay/package.json
+++ b/WebDisplay/package.json
@@ -11,6 +11,7 @@
         "@mdi/font": "7.0.96",
         "@microsoft/signalr": "^8.0.0",
         "@types/suncalc": "^1.9.2",
+        "@vuepic/vue-datepicker": "^8.2.0",
         "apexcharts": "^3.46.0",
         "axios": "^1.6.7",
         "core-js": "^3.34.0",
diff --git a/WebDisplay/pnpm-lock.yaml b/WebDisplay/pnpm-lock.yaml
index 603ad9d..f2182c3 100644
--- a/WebDisplay/pnpm-lock.yaml
+++ b/WebDisplay/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   '@types/suncalc':
     specifier: ^1.9.2
     version: 1.9.2
+  '@vuepic/vue-datepicker':
+    specifier: ^8.2.0
+    version: 8.2.0(vue@3.4.21)
   apexcharts:
     specifier: ^3.46.0
     version: 3.46.0
@@ -850,6 +853,16 @@ packages:
   /@vue/shared@3.4.21:
     resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
 
+  /@vuepic/vue-datepicker@8.2.0(vue@3.4.21):
+    resolution: {integrity: sha512-H3X9/XRvF4/ttdgxgNhFCp9m9gt9UVsiuv8FXOfAPpfQvVlmlTHZ3yf3E5oAxzP/INVhBIJCGrkijhCl5+UAPg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      vue: '>=3.2.0'
+    dependencies:
+      date-fns: 3.3.1
+      vue: 3.4.21(typescript@5.3.3)
+    dev: false
+
   /@vuetify/loader-shared@2.0.2(vue@3.4.21)(vuetify@3.5.6):
     resolution: {integrity: sha512-91itRxkTRKUhEZhWR/ICfYml1WkVxC7/DIeJEyUzzzLQxRo9wpyk+rhFtwHUUJE2O8wL1VG9L6TkR5SIUswwKQ==}
     peerDependencies:
diff --git a/WebDisplay/src/components/TimeRange.vue b/WebDisplay/src/components/TimeRange.vue
new file mode 100644
index 0000000..f25ca62
--- /dev/null
+++ b/WebDisplay/src/components/TimeRange.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+    import { PropType } from 'vue';
+    import { subHours, addDays, startOfDay, endOfDay, isSameDay } from 'date-fns';
+    import TimeSpan from '@/models/time-span';
+
+    const props = defineProps({
+        timeSpan: { type: Number as PropType<TimeSpan>, required: true },
+        start: { type: Date, required: true },
+        end: { type: Date, required: true }
+    });
+
+    const emit = defineEmits<{
+        change: [
+            {
+                timeSpan: TimeSpan;
+                start: Date;
+                end: Date;
+            }
+        ];
+
+        refresh: [];
+    }>();
+
+    const timeSpanItems: { [value: number]: string } = {
+        [TimeSpan.Last24Hours]: 'Last 24 hours',
+        [TimeSpan.Day]: 'Day'
+    };
+
+    const addDay = (increment: number) => {
+        const start = addDays(props.start, increment);
+        const end = addDays(props.end, increment);
+
+        emit('change', {
+            timeSpan: props.timeSpan,
+            start: start,
+            end: end
+        });
+    };
+
+    const handleTimeSpanChange = (timeSpan: TimeSpan) => {
+        const date = new Date();
+
+        if (timeSpan == TimeSpan.Last24Hours) {
+            const end = date;
+            const start = subHours(end, 24);
+
+            emit('change', {
+                timeSpan: timeSpan,
+                start: start,
+                end: end
+            });
+        } else {
+            const end = endOfDay(date);
+            const start = startOfDay(date);
+
+            emit('change', {
+                timeSpan: timeSpan,
+                start: start,
+                end: end
+            });
+        }
+    };
+
+    const showDayBack = () => {
+        return props.timeSpan === TimeSpan.Day;
+    };
+
+    const showDayForward = () => {
+        return props.timeSpan === TimeSpan.Day && !isSameDay(props.start, new Date());
+    };
+
+    const refresh = () => {
+        const date = new Date();
+
+        if (props.timeSpan == TimeSpan.Last24Hours) {
+            const end = date;
+            const start = subHours(end, 24);
+
+            emit('change', {
+                timeSpan: props.timeSpan,
+                start: start,
+                end: end
+            });
+        } else {
+            emit('refresh');
+        }
+    };
+
+    const setToday = () => {
+        const date = new Date();
+
+        const end = endOfDay(date);
+        const start = startOfDay(date);
+
+        emit('change', {
+            timeSpan: props.timeSpan,
+            start: start,
+            end: end
+        });
+    };
+
+    const setDate = (value: Date) => {
+        const end = endOfDay(value);
+        const start = startOfDay(value);
+
+        emit('change', {
+            timeSpan: props.timeSpan,
+            start: start,
+            end: end
+        });
+    };
+</script>
+
+<template>
+    <v-app-bar
+        class="bar"
+        density="compact"
+        fixed
+        :elevation="0">
+        <v-toolbar-items>
+            <v-btn
+                icon
+                @click="refresh()">
+                <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+            <v-menu>
+                <template v-slot:activator="{ props }">
+                    <v-btn
+                        class="ml-2"
+                        color="primary"
+                        v-bind="props">
+                        {{ timeSpanItems[timeSpan] }}
+                    </v-btn>
+                </template>
+                <v-list :value="props.timeSpan">
+                    <v-list-item
+                        v-for="(item, index) in timeSpanItems"
+                        :key="index"
+                        :value="index"
+                        @click="handleTimeSpanChange(+index)">
+                        <v-list-item-title>{{ item }}</v-list-item-title>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
+            <v-btn
+                class="ml-2"
+                icon
+                @click="addDay(-1)"
+                v-show="showDayBack()">
+                <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+            <VueDatePicker
+                class="date-picker"
+                v-show="showDayBack()"
+                auto-apply
+                :model-value="props.start"
+                @update:model-value="setDate"
+                :clearable="false"
+                :max-date="new Date()"
+                :teleport="true"
+                :enable-time-picker="false" />
+            <v-btn
+                icon
+                @click="addDay(1)"
+                v-show="showDayForward()">
+                <v-icon>mdi-arrow-right</v-icon>
+            </v-btn>
+            <v-btn
+                class="ml-2"
+                @click="setToday()"
+                v-show="showDayForward()">
+                Today
+            </v-btn>
+        </v-toolbar-items>
+    </v-app-bar>
+</template>
+
+<style scoped>
+    .bar {
+        background-color: #eeeeee;
+        border-bottom: 1px solid lightgray;
+    }
+
+    .date-picker {
+        display: flex;
+        align-items: center;
+    }
+</style>
diff --git a/WebDisplay/src/components/ValueChart.vue b/WebDisplay/src/components/ValueChart.vue
index 7644afe..6cd8f9d 100644
--- a/WebDisplay/src/components/ValueChart.vue
+++ b/WebDisplay/src/components/ValueChart.vue
@@ -11,7 +11,12 @@
         valueDecimalPoints: { type: Number, required: false, default: 2 },
         group: { type: String, required: false, default: undefined },
         stepline: { type: Boolean, required: false, default: false },
-        ready: { type: Boolean, required: true }
+        ready: { type: Boolean, required: true },
+        yAxisMinimum: { type: Number, required: false, default: undefined },
+        yAxisMaximum: { type: Number, required: false, default: undefined },
+        tickAmount: { type: Number, required: false, default: undefined },
+        lineSize: { type: Number, required: false, default: 2 },
+        markerSize: { type: Number, required: false, default: 0 }
     });
 
     var chartOptions: ApexOptions = {
@@ -66,12 +71,18 @@
                 formatter: (value) => {
                     return `${value.toFixed(props.yAxisDecimalPoints)}${props.unit}`;
                 }
-            }
+            },
+            tickAmount: props.tickAmount,
+            min: props.yAxisMinimum,
+            max: props.yAxisMaximum
         },
         stroke: {
-            width: 2,
+            width: props.lineSize,
             curve: props.stepline ? 'stepline' : 'smooth'
         },
+        markers: {
+            size: props.markerSize
+        },
         dataLabels: {
             enabled: false
         }
@@ -96,7 +107,7 @@
         <apexchart
             v-else
             width="100%"
-            height="300"
+            height="250"
             :type="props.type"
             :options="chartOptions"
             :series="chartSeries"></apexchart>
@@ -106,7 +117,7 @@
 <style scoped>
     .loading {
         width: 100%;
-        min-height: 300px;
+        min-height: 250px;
     }
 
     .chart {
diff --git a/WebDisplay/src/main.ts b/WebDisplay/src/main.ts
index c57220d..0092b9e 100644
--- a/WebDisplay/src/main.ts
+++ b/WebDisplay/src/main.ts
@@ -7,6 +7,9 @@ import { createPinia } from 'pinia';
 
 import VueApexCharts from 'vue3-apexcharts';
 
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
 const pinia = createPinia();
 const app = createApp(App);
 
@@ -14,4 +17,7 @@ registerPlugins(app);
 
 app.use(VueApexCharts);
 app.use(pinia);
+
+app.component('VueDatePicker', VueDatePicker);
+
 app.mount('#app');
diff --git a/WebDisplay/src/models/time-span.ts b/WebDisplay/src/models/time-span.ts
new file mode 100644
index 0000000..75907da
--- /dev/null
+++ b/WebDisplay/src/models/time-span.ts
@@ -0,0 +1,7 @@
+export enum TimeSpan {
+    Last24Hours,
+    Day,
+    Custom
+}
+
+export default TimeSpan;
diff --git a/WebDisplay/src/models/weather/wind-direction-number.ts b/WebDisplay/src/models/weather/wind-direction-number.ts
new file mode 100644
index 0000000..90c30b9
--- /dev/null
+++ b/WebDisplay/src/models/weather/wind-direction-number.ts
@@ -0,0 +1,23 @@
+export enum WindDirectionNumber {
+    None,
+    North,
+    East,
+    South,
+    West,
+    NorthEast,
+    SouthEast,
+    SouthWest,
+    NorthWest,
+    NorthNorthEast,
+    EastNorthEast,
+    EastSouthEast,
+    SouthSouthEast,
+    SouthSouthWest,
+    WestSouthWest,
+    WestNorthWest,
+    NorthNorthWest,
+    Min = North,
+    Max = NorthNorthWest
+}
+
+export default WindDirectionNumber;
diff --git a/WebDisplay/src/pages/indoor.vue b/WebDisplay/src/pages/indoor.vue
index 5c9c163..b69fafa 100644
--- a/WebDisplay/src/pages/indoor.vue
+++ b/WebDisplay/src/pages/indoor.vue
@@ -5,11 +5,17 @@
     import { ConvertCToF } from '@/temperatureConverter';
     import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
     import ValueChart from '../components/ValueChart.vue';
+    import TimeRange from '@/components/TimeRange.vue';
+    import TimeSpan from '@/models/time-span';
 
     const indoorStore = createIndoorStore('charts');
 
     const ready = ref(false);
 
+    const end = ref(new Date());
+    const start = ref(subHours(end.value, 24));
+    const timeSpan = ref(TimeSpan.Last24Hours);
+
     const categories: number[] = [];
 
     const mainTemperatureSeries = { name: 'Upstairs', data: [] as number[] };
@@ -21,73 +27,103 @@
     const mainPressureSeries = { name: 'Upstairs', data: [] as number[] };
     const basementPressureSeries = { name: 'Downstairs', data: [] as number[] };
 
-    const end = new Date();
-    const start = subHours(end, 24);
+    const load = () => {
+        ready.value = false;
 
-    indoorStore.getReadingValueHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
-        groupedReadingsList.forEach((groupedReadings) => {
-            if (groupedReadings.name === 'main') {
-                categories.push(new Date(groupedReadings.bucket).getTime());
+        categories.length = 0;
 
-                mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
-                mainHumiditySeries.data.push(groupedReadings.averageHumidity);
-                mainPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
-            } else if (groupedReadings.name === 'basement') {
-                basementTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
-                basementHumiditySeries.data.push(groupedReadings.averageHumidity);
-                basementPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
-            }
+        mainTemperatureSeries.data.length = 0;
+        basementTemperatureSeries.data.length = 0;
+
+        mainHumiditySeries.data.length = 0;
+        basementHumiditySeries.data.length = 0;
+
+        mainPressureSeries.data.length = 0;
+        basementPressureSeries.data.length = 0;
+
+        indoorStore.getReadingValueHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
+            groupedReadingsList.forEach((groupedReadings) => {
+                if (groupedReadings.name === 'main') {
+                    categories.push(new Date(groupedReadings.bucket).getTime());
+
+                    mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
+                    mainHumiditySeries.data.push(groupedReadings.averageHumidity);
+                    mainPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
+                } else if (groupedReadings.name === 'basement') {
+                    basementTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
+                    basementHumiditySeries.data.push(groupedReadings.averageHumidity);
+                    basementPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
+                }
+            });
+
+            ready.value = true;
         });
+    };
 
-        ready.value = true;
-    });
+    load();
 </script>
 
 <template>
     <v-container
         fluid
         class="container">
-        <v-row
-            dense
-            align="start">
-            <v-col
-                sm="6"
-                cols="12">
-                <ValueChart
-                    :ready="ready"
-                    type="line"
-                    title="Temperature"
-                    unit="°F"
-                    group="indoor"
-                    :categories="categories"
-                    :series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
-            </v-col>
-            <v-col
-                sm="6"
-                cols="12">
-                <ValueChart
-                    :ready="ready"
-                    type="line"
-                    title="Humidity"
-                    unit="%"
-                    group="indoor"
-                    :categories="categories"
-                    :series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
-            </v-col>
-            <v-col
-                sm="6"
-                cols="12">
-                <ValueChart
-                    :ready="ready"
-                    type="line"
-                    title="Pressure"
-                    unit='"'
-                    group="indoor"
-                    :y-axis-decimal-points="1"
-                    :categories="categories"
-                    :series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
-            </v-col>
-        </v-row>
+        <TimeRange
+            :time-span="timeSpan"
+            :start="start"
+            :end="end"
+            @change="
+                (value) => {
+                    timeSpan = value.timeSpan;
+                    start = value.start;
+                    end = value.end;
+
+                    load();
+                }
+            "
+            @refresh="load"></TimeRange>
+        <div class="content">
+            <v-row
+                dense
+                align="start">
+                <v-col
+                    sm="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="ready"
+                        type="line"
+                        title="Temperature"
+                        unit="°F"
+                        group="indoor"
+                        :categories="categories"
+                        :series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
+                </v-col>
+                <v-col
+                    sm="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="ready"
+                        type="line"
+                        title="Humidity"
+                        unit="%"
+                        group="indoor"
+                        :categories="categories"
+                        :series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
+                </v-col>
+                <v-col
+                    sm="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="ready"
+                        type="line"
+                        title="Pressure"
+                        unit='"'
+                        group="indoor"
+                        :y-axis-decimal-points="1"
+                        :categories="categories"
+                        :series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
+                </v-col>
+            </v-row>
+        </div>
     </v-container>
 </template>
 
@@ -95,5 +131,10 @@
     .container {
         height: 100%;
         background-color: #fafafa;
+        padding: 0;
+    }
+
+    .content {
+        padding: 10px;
     }
 </style>
diff --git a/WebDisplay/src/pages/outdoor.vue b/WebDisplay/src/pages/outdoor.vue
index dfbcaa2..fd4ad7e 100644
--- a/WebDisplay/src/pages/outdoor.vue
+++ b/WebDisplay/src/pages/outdoor.vue
@@ -4,6 +4,9 @@
     import { useWeatherStore } from '@/stores/weatherStore';
     import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
     import ValueChart from '../components/ValueChart.vue';
+    import WindDirectionNumber from '@/models/weather/wind-direction-number';
+    import TimeRange from '@/components/TimeRange.vue';
+    import TimeSpan from '@/models/time-span';
 
     const weatherStore = useWeatherStore();
 
@@ -22,133 +25,192 @@
     const windMinimumSeries = { name: 'Minimum', data: [] as number[] };
     const windAverageSeries = { name: 'Average', data: [] as number[] };
     const windMaximumSeries = { name: 'Maximum', data: [] as number[] };
+    const windDirectionSeries = { name: 'Average Direction', data: [] as number[] };
 
-    const end = new Date();
-    const start = subHours(end, 24);
+    const end = ref(new Date());
+    const start = ref(subHours(end.value, 24));
+    const timeSpan = ref(TimeSpan.Last24Hours);
 
-    weatherStore.getReadingHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
-        groupedReadingsList.forEach((groupedReadings) => {
-            readingsCategories.push(new Date(groupedReadings.bucket).getTime());
+    const load = () => {
+        readingsReady.value = false;
+        readingsCategories.length = 0;
+        temperatureSeries.data.length = 0;
+        humiditySeries.data.length = 0;
+        pressureSeries.data.length = 0;
+        lightSeries.data.length = 0;
+        rainSeries.data.length = 0;
 
-            temperatureSeries.data.push(groupedReadings.averageTemperature);
-            humiditySeries.data.push(groupedReadings.averageHumidity);
-            pressureSeries.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure));
-            lightSeries.data.push(groupedReadings.averageLightLevel);
-            rainSeries.data.push(groupedReadings.rainTotal);
+        windReady.value = false;
+        windCategories.length = 0;
+        windMinimumSeries.data.length = 0;
+        windAverageSeries.data.length = 0;
+        windMaximumSeries.data.length = 0;
+        windDirectionSeries.data.length = 0;
+
+        weatherStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
+            groupedReadingsList.forEach((groupedReadings) => {
+                readingsCategories.push(new Date(groupedReadings.bucket).getTime());
+
+                temperatureSeries.data.push(groupedReadings.averageTemperature);
+                humiditySeries.data.push(groupedReadings.averageHumidity);
+                pressureSeries.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure));
+                lightSeries.data.push(groupedReadings.averageLightLevel);
+                rainSeries.data.push(groupedReadings.rainTotal);
+            });
+
+            readingsReady.value = true;
         });
 
-        readingsReady.value = true;
-    });
+        weatherStore.getWindHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
+            groupedReadingsList.forEach((groupedReadings) => {
+                windCategories.push(new Date(groupedReadings.bucket).getTime());
 
-    weatherStore.getWindHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
-        groupedReadingsList.forEach((groupedReadings) => {
-            windCategories.push(new Date(groupedReadings.bucket).getTime());
+                windMinimumSeries.data.push(groupedReadings.minimumSpeed);
+                windAverageSeries.data.push(groupedReadings.averageSpeed);
+                windMaximumSeries.data.push(groupedReadings.maximumSpeed);
 
-            windMinimumSeries.data.push(groupedReadings.minimumSpeed);
-            windAverageSeries.data.push(groupedReadings.averageSpeed);
-            windMaximumSeries.data.push(groupedReadings.maximumSpeed);
+                windDirectionSeries.data.push(groupedReadings.averageDirection);
+            });
+
+            windReady.value = true;
         });
+    };
 
-        windReady.value = true;
-    });
+    load();
 </script>
 
 <template>
     <v-container
         fluid
         class="container">
-        <v-row
-            dense
-            align="start">
-            <v-col
-                sm="4"
-                xl="6"
-                cols="12">
-                <ValueChart
-                    :ready="readingsReady"
-                    type="line"
-                    title="Temperature"
-                    unit="°F"
-                    group="outdoor"
-                    :categories="readingsCategories"
-                    :series="[temperatureSeries]">
-                </ValueChart>
-            </v-col>
-            <v-col
-                sm="4"
-                xl="6"
-                cols="12">
-                <ValueChart
-                    :ready="readingsReady"
-                    type="line"
-                    title="Humidity"
-                    unit="%"
-                    group="outdoor"
-                    :categories="readingsCategories"
-                    :series="[humiditySeries]">
-                </ValueChart>
-            </v-col>
-            <v-col
-                sm="4"
-                xl="6"
-                cols="12">
-                <ValueChart
-                    :ready="readingsReady"
-                    type="line"
-                    title="Pressure"
-                    unit='"'
-                    group="outdoor"
-                    :y-axis-decimal-points="1"
-                    :categories="readingsCategories"
-                    :series="[pressureSeries]">
-                </ValueChart>
-            </v-col>
-            <v-col
-                sm="4"
-                xl="6"
-                cols="12">
-                <ValueChart
-                    :ready="readingsReady"
-                    type="line"
-                    title="Light"
-                    unit=" lx"
-                    group="outdoor"
-                    :categories="readingsCategories"
-                    :series="[lightSeries]">
-                </ValueChart>
-            </v-col>
-            <v-col
-                sm="4"
-                xl="6"
-                cols="12">
-                <ValueChart
-                    :ready="readingsReady"
-                    type="line"
-                    title="Rain"
-                    unit='"'
-                    group="outdoor"
-                    :stepline="true"
-                    :y-axis-decimal-points="2"
-                    :categories="readingsCategories"
-                    :series="[rainSeries]">
-                </ValueChart>
-            </v-col>
-            <v-col
-                sm="4"
-                xl="6"
-                cols="12">
-                <ValueChart
-                    :ready="windReady"
-                    type="line"
-                    title="Wind"
-                    unit=" MPH"
-                    group="outdoor"
-                    :y-axis-decimal-points="0"
-                    :categories="windCategories"
-                    :series="[windMinimumSeries, windAverageSeries, windMaximumSeries]">
-                </ValueChart>
-            </v-col>
-        </v-row>
+        <TimeRange
+            :time-span="timeSpan"
+            :start="start"
+            :end="end"
+            @change="
+                (value) => {
+                    timeSpan = value.timeSpan;
+                    start = value.start;
+                    end = value.end;
+
+                    load();
+                }
+            "
+            @refresh="load"></TimeRange>
+        <div class="content">
+            <v-row
+                dense
+                align="start">
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="readingsReady"
+                        type="line"
+                        title="Temperature"
+                        unit="°F"
+                        group="outdoor"
+                        :categories="readingsCategories"
+                        :series="[temperatureSeries]">
+                    </ValueChart>
+                </v-col>
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="readingsReady"
+                        type="line"
+                        title="Humidity"
+                        unit="%"
+                        group="outdoor"
+                        :categories="readingsCategories"
+                        :series="[humiditySeries]">
+                    </ValueChart>
+                </v-col>
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="readingsReady"
+                        type="line"
+                        title="Pressure"
+                        unit='"'
+                        group="outdoor"
+                        :y-axis-decimal-points="1"
+                        :categories="readingsCategories"
+                        :series="[pressureSeries]">
+                    </ValueChart>
+                </v-col>
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="readingsReady"
+                        type="line"
+                        title="Light"
+                        unit=" lx"
+                        group="outdoor"
+                        :categories="readingsCategories"
+                        :series="[lightSeries]">
+                    </ValueChart>
+                </v-col>
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="readingsReady"
+                        type="line"
+                        title="Rain"
+                        unit='"'
+                        group="outdoor"
+                        :stepline="true"
+                        :y-axis-decimal-points="3"
+                        :value-decimal-points="2"
+                        :categories="readingsCategories"
+                        :series="[rainSeries]">
+                    </ValueChart>
+                </v-col>
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="windReady"
+                        type="line"
+                        title="Wind Speed"
+                        unit=" MPH"
+                        group="outdoor"
+                        :y-axis-decimal-points="0"
+                        :categories="windCategories"
+                        :series="[windMaximumSeries, windAverageSeries, windMinimumSeries]">
+                    </ValueChart>
+                </v-col>
+                <v-col
+                    sm="4"
+                    xl="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="windReady"
+                        type="line"
+                        title="Wind Direction"
+                        unit=""
+                        group="outdoor"
+                        :tick-amount="3"
+                        :marker-size="3"
+                        :line-size="0"
+                        :y-axis-minimum="WindDirectionNumber.Min"
+                        :y-axis-maximum="WindDirectionNumber.Max"
+                        :categories="windCategories"
+                        :series="[windDirectionSeries]">
+                    </ValueChart>
+                </v-col>
+            </v-row>
+        </div>
     </v-container>
 </template>
 
@@ -156,5 +218,10 @@
     .container {
         height: 100%;
         background-color: #fafafa;
+        padding: 0;
+    }
+
+    .content {
+        padding: 10px;
     }
 </style>
diff --git a/WebDisplay/src/pages/power.vue b/WebDisplay/src/pages/power.vue
index 9d80f35..614d750 100644
--- a/WebDisplay/src/pages/power.vue
+++ b/WebDisplay/src/pages/power.vue
@@ -4,7 +4,9 @@
     import { usePowerStore } from '@/stores/powerStore';
     import { useWeatherStore } from '@/stores/weatherStore';
     import ValueChart from '../components/ValueChart.vue';
+    import TimeRange from '@/components/TimeRange.vue';
     import WeatherValueType from '@/models/weather/weather-value-type';
+    import TimeSpan from '@/models/time-span';
 
     const powerStore = usePowerStore();
     const weatherStore = useWeatherStore();
@@ -20,66 +22,96 @@
 
     const lightSeries = { name: 'Average Light', data: [] as number[] };
 
-    const end = new Date();
-    const start = subHours(end, 24);
+    const end = ref(new Date());
+    const start = ref(subHours(end.value, 24));
+    const timeSpan = ref(TimeSpan.Last24Hours);
 
-    powerStore.getReadingHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
-        groupedReadingsList.forEach((groupedReadings) => {
-            powerCategories.push(new Date(groupedReadings.bucket).getTime());
+    const load = () => {
+        powerReady.value = false;
+        powerCategories.length = 0;
+        generationSeries.data.length = 0;
+        consumptionSeries.data.length = 0;
 
-            generationSeries.data.push(groupedReadings.averageGeneration);
-            consumptionSeries.data.push(groupedReadings.averageConsumption);
+        lightReady.value = false;
+        lightCategories.length = 0;
+        lightSeries.data.length = 0;
+
+        powerStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
+            groupedReadingsList.forEach((groupedReadings) => {
+                powerCategories.push(new Date(groupedReadings.bucket).getTime());
+
+                generationSeries.data.push(groupedReadings.averageGeneration);
+                consumptionSeries.data.push(groupedReadings.averageConsumption);
+            });
+
+            powerReady.value = true;
         });
 
-        powerReady.value = true;
-    });
+        weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => {
+            groupedReadingsList.forEach((groupedReadings) => {
+                lightCategories.push(new Date(groupedReadings.bucket).getTime());
 
-    weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start, end, 15).then((groupedReadingsList) => {
-        groupedReadingsList.forEach((groupedReadings) => {
-            lightCategories.push(new Date(groupedReadings.bucket).getTime());
+                lightSeries.data.push(groupedReadings.averageValue);
+            });
 
-            lightSeries.data.push(groupedReadings.averageValue);
+            lightReady.value = true;
         });
+    };
 
-        lightReady.value = true;
-    });
+    load();
 </script>
 
 <template>
     <v-container
         fluid
         class="container">
-        <v-row
-            dense
-            align="start">
-            <v-col
-                sm="6"
-                cols="12">
-                <ValueChart
-                    :ready="powerReady"
-                    type="line"
-                    title="Power"
-                    unit=" W"
-                    group="power"
-                    :y-axis-decimal-points="0"
-                    :value-decimal-points="0"
-                    :categories="powerCategories"
-                    :series="[generationSeries, consumptionSeries]"></ValueChart>
-            </v-col>
-            <v-col
-                sm="6"
-                cols="12">
-                <ValueChart
-                    :ready="lightReady"
-                    type="line"
-                    title="Light"
-                    unit=" lx"
-                    group="power"
-                    :categories="lightCategories"
-                    :series="[lightSeries]">
-                </ValueChart>
-            </v-col>
-        </v-row>
+        <TimeRange
+            :time-span="timeSpan"
+            :start="start"
+            :end="end"
+            @change="
+                (value) => {
+                    timeSpan = value.timeSpan;
+                    start = value.start;
+                    end = value.end;
+
+                    load();
+                }
+            "
+            @refresh="load"></TimeRange>
+        <div class="content">
+            <v-row
+                dense
+                align="start">
+                <v-col
+                    sm="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="powerReady"
+                        type="line"
+                        title="Power"
+                        unit=" W"
+                        group="power"
+                        :y-axis-decimal-points="0"
+                        :value-decimal-points="0"
+                        :categories="powerCategories"
+                        :series="[generationSeries, consumptionSeries]"></ValueChart>
+                </v-col>
+                <v-col
+                    sm="6"
+                    cols="12">
+                    <ValueChart
+                        :ready="lightReady"
+                        type="line"
+                        title="Light"
+                        unit=" lx"
+                        group="power"
+                        :categories="lightCategories"
+                        :series="[lightSeries]">
+                    </ValueChart>
+                </v-col>
+            </v-row>
+        </div>
     </v-container>
 </template>
 
@@ -87,5 +119,10 @@
     .container {
         height: 100%;
         background-color: #fafafa;
+        padding: 0;
+    }
+
+    .content {
+        padding: 10px;
     }
 </style>