diff --git a/package-lock.json b/package-lock.json
index a1afcae1..eaba4ec9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,13 @@
 {
-    "name": "cachet-core",
+    "name": "cachethq-core",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "chart.js": "^4.4.7",
+                "chartjs-adapter-moment": "^1.0.1"
+            },
             "devDependencies": {
                 "@alpinejs/anchor": "^3.13.3",
                 "@alpinejs/collapse": "^3.13.3",
@@ -530,6 +534,12 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "license": "MIT"
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1065,6 +1075,28 @@
             ],
             "license": "CC-BY-4.0"
         },
+        "node_modules/chart.js": {
+            "version": "4.4.7",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
+            "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
+            "license": "MIT",
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
+        "node_modules/chartjs-adapter-moment": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz",
+            "integrity": "sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "chart.js": ">=3.0.0",
+                "moment": "^2.10.2"
+            }
+        },
         "node_modules/chokidar": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1893,6 +1925,16 @@
                 "node": ">=16 || 14 >=14.17"
             }
         },
+        "node_modules/moment": {
+            "version": "2.30.1",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/mz": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
diff --git a/package.json b/package.json
index b046fb37..58670969 100644
--- a/package.json
+++ b/package.json
@@ -23,5 +23,9 @@
         "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.4.13",
         "vite": "^5.4"
+    },
+    "dependencies": {
+        "chart.js": "^4.4.7",
+        "chartjs-adapter-moment": "^1.0.1"
     }
 }
diff --git a/resources/js/cachet.js b/resources/js/cachet.js
index 50005015..d286c497 100644
--- a/resources/js/cachet.js
+++ b/resources/js/cachet.js
@@ -1,3 +1,6 @@
+import Chart from 'chart.js/auto'
+import 'chartjs-adapter-moment'
+
 import Alpine from 'alpinejs'
 
 import Anchor from '@alpinejs/anchor'
@@ -5,9 +8,13 @@ import Collapse from '@alpinejs/collapse'
 import Focus from '@alpinejs/focus'
 import Ui from '@alpinejs/ui'
 
+Chart.defaults.color = '#fff'
+window.Chart = Chart
+
 Alpine.plugin(Anchor)
 Alpine.plugin(Collapse)
 Alpine.plugin(Focus)
 Alpine.plugin(Ui)
 
+window.Alpine = Alpine
 Alpine.start()
diff --git a/resources/views/components/component-group.blade.php b/resources/views/components/component-group.blade.php
index b714c40f..b20f93db 100644
--- a/resources/views/components/component-group.blade.php
+++ b/resources/views/components/component-group.blade.php
@@ -1,12 +1,15 @@
 @props(['componentGroup' => null])
 
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_COMPONENT_GROUPS_BEFORE) }}
-<div x-data x-disclosure {{ $attributes
-    ->merge(array_filter([
-        'default-open' => $componentGroup->isExpanded(),
-    ]))
-    ->class(['overflow-hidden rounded-lg border dark:border-zinc-700'])
-    }}>
+<div x-data x-disclosure {{
+    $attributes
+        ->merge(
+            array_filter([
+                'default-open' => $componentGroup->isExpanded(),
+            ]),
+        )
+        ->class(['overflow-hidden rounded-lg border dark:border-zinc-700'])
+}}>
     <div class="flex items-center justify-between bg-white p-4 dark:border-zinc-700 dark:bg-white/5">
         <button x-disclosure:button class="flex items-center gap-2 text-zinc-500 dark:text-zinc-300">
             <h3 class="text-lg font-semibold">
@@ -15,17 +18,17 @@
             <x-heroicon-o-chevron-up ::class="!$disclosure.isOpen && 'rotate-180'" class="size-4 transition" />
         </button>
 
-        @if(($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
-        <span class="rounded border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
-            {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
-        </span>
+        @if (($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
+            <span class="rounded border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
+                {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
+            </span>
         @endif
     </div>
 
     <div x-disclosure:panel x-collapse class="flex flex-col divide-y bg-white dark:bg-white/5">
         <ul class="divide-y dark:divide-zinc-700">
-            @foreach($componentGroup->components as $component)
-            <x-cachet::component :component="$component" />
+            @foreach ($componentGroup->components as $component)
+                <x-cachet::component :component="$component" />
             @endforeach
         </ul>
     </div>
diff --git a/resources/views/components/metric.blade.php b/resources/views/components/metric.blade.php
new file mode 100644
index 00000000..6bc8b6c5
--- /dev/null
+++ b/resources/views/components/metric.blade.php
@@ -0,0 +1,43 @@
+@props([
+    'metric',
+])
+
+@use('\Cachet\Enums\MetricViewEnum')
+
+<div x-data="chart">
+    <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-1.5">
+            <div class="font-semibold leading-6">{{ $metric->name }}</div>
+
+            <div x-data x-popover class="flex items-center">
+                <button x-ref="anchor" x-popover:button>
+                    <x-heroicon-o-question-mark-circle class="size-4 text-zinc-500 dark:text-zinc-300" />
+                </button>
+                <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="rounded bg-white px-2 py-1 text-xs font-medium text-zinc-800 drop-shadow dark:text-zinc-800">
+                    <span class="pointer-events-none absolute -left-1 top-1.5 size-4 rotate-45 bg-white"></span>
+                    <p class="relative">{{ $metric->description }}</p>
+                </div>
+            </div>
+
+            <!-- Period Selector -->
+            <select x-model="period" class="ml-auto rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-zinc-800 dark:text-gray-100">
+                @foreach ([MetricViewEnum::last_hour, MetricViewEnum::today, MetricViewEnum::week, MetricViewEnum::month] as $value)
+                    <option value="{{ $value }}">{{ $value->getLabel() }}</option>
+                @endforeach
+            </select>
+        </div>
+        <canvas x-ref="canvas" height="380" class="text-gray rounded-md bg-white p-3 shadow-sm ring-1 ring-gray-900/5 dark:bg-zinc-800 dark:text-white dark:ring-gray-100/10"></canvas>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('chart', () => ({
+            metric: {{ Js::from($metric) }},
+            period: {{ Js::from($metric->default_view) }},
+            points: [[], [], [], []],
+            chart: null,
+            init,
+        }))
+    })
+</script>
diff --git a/resources/views/components/metrics.blade.php b/resources/views/components/metrics.blade.php
new file mode 100644
index 00000000..52c3616f
--- /dev/null
+++ b/resources/views/components/metrics.blade.php
@@ -0,0 +1,125 @@
+<script>
+    const now = new Date()
+    const previousHour = new Date(now - 60 * 60 * 1000)
+    const previous24Hours = new Date(now - 24 * 60 * 60 * 1000)
+    const previous7Days = new Date(now - 7 * 24 * 60 * 60 * 1000)
+    const previous30Days = new Date(now - 30 * 24 * 60 * 60 * 1000)
+
+    const MetricView = {{
+        Js::from([
+            'last_hour' => \Cachet\Enums\MetricViewEnum::last_hour->value,
+            'today' => \Cachet\Enums\MetricViewEnum::today->value,
+            'week' => \Cachet\Enums\MetricViewEnum::week->value,
+            'month' => \Cachet\Enums\MetricViewEnum::month->value,
+        ])
+    }}
+
+    function getCssVar(name) {
+        return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    }
+
+    function getFontColor() {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
+            return `rgba(${getCssVar('--gray-100')}, 1)`
+        }
+
+        return `rgba(${getCssVar('--gray-800')}, 1)`
+    }
+
+    function getThemeColors() {
+        const fontColor = getFontColor()
+        const accent = `rgba(${getCssVar('--accent')}, 1)`
+        const accentBackground = `rgba(${getCssVar('--accent-background')}, 0.2)`
+
+        return {
+            fontColor: fontColor,
+            backgroundColors: [accent, accentBackground],
+            borderColor: accent,
+        }
+    }
+
+    let themeColors = getThemeColors()
+
+    function init() {
+        // Parse metric points
+        const metricPoints = this.metric.metric_points.map((point) => {
+            return {
+                x: new Date(point.x),
+                y: point.y,
+            }
+        })
+
+        // Filter points based on the selected period
+        this.points[0] = metricPoints.filter((point) => point.x >= previousHour)
+        this.points[1] = metricPoints.filter((point) => point.x >= previous24Hours)
+        this.points[2] = metricPoints.filter((point) => point.x >= previous7Days)
+        this.points[3] = metricPoints.filter((point) => point.x >= previous30Days)
+
+        // Initialize chart
+        const chart = new Chart(this.$refs.canvas, {
+            type: 'line',
+            data: {
+                datasets: [
+                    {
+                        label: this.metric.suffix,
+                        data: this.points[this.period],
+                        fill: false,
+                        backgroundColor: themeColors.backgroundColors,
+                        borderColor: themeColors.borderColor,
+                        tension: 0.1,
+                    },
+                ],
+            },
+            options: {
+                scales: {
+                    x: {
+                        ticks: {
+                            color: themeColors.fontColor,
+                        },
+                        type: 'timeseries',
+                    },
+                    y: {
+                        ticks: {
+                            color: themeColors.fontColor,
+                        },
+                    },
+                },
+            },
+        })
+
+        this.$watch('period', () => {
+            chart.data.datasets[0].data = this.points[this.period]
+            chart.options.scales.x.time.unit = getTimeUnit(this.period)
+
+            chart.update()
+        })
+
+        function getTimeUnit(period) {
+            if (period == MetricView.last_hour) return 'minute'
+            if (period == MetricView.today) return 'hour'
+            if (period == MetricView.week) return 'week'
+            if (period == MetricView.month) return 'month'
+            return 'day'
+        }
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            themeColors = getThemeColors()
+
+            chart.data.datasets[0].backgroundColor = themeColors.backgroundColors
+            chart.data.datasets[0].borderColor = themeColors.borderColor
+            chart.options.plugins.legend.labels.color = themeColors.fontColor
+            chart.options.plugins.tooltip.bodyColor = themeColors.fontColor
+            chart.options.plugins.tooltip.titleColor = themeColors.fontColor
+            chart.options.scales.x.ticks.color = themeColors.fontColor
+            chart.options.scales.y.ticks.color = themeColors.fontColor
+
+            chart.update()
+        })
+    }
+</script>
+
+<div class="flex flex-col gap-8">
+    @foreach ($metrics as $metric)
+        <x-cachet::metric :metric="$metric" />
+    @endforeach
+</div>
diff --git a/resources/views/status-page/index.blade.php b/resources/views/status-page/index.blade.php
index 5fef4e98..bb9092e9 100644
--- a/resources/views/status-page/index.blade.php
+++ b/resources/views/status-page/index.blade.php
@@ -1,21 +1,22 @@
 <x-cachet::cachet>
     <x-cachet::header />
 
-    <div class="container mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8 flex flex-col space-y-6">
+    <div class="container mx-auto flex max-w-5xl flex-col space-y-6 px-4 py-10 sm:px-6 lg:px-8">
         <x-cachet::status-bar />
 
         <x-cachet::about />
-
-        @foreach($componentGroups as $componentGroup)
-        <x-cachet::component-group :component-group="$componentGroup"/>
+        @foreach ($componentGroups as $componentGroup)
+            <x-cachet::component-group :component-group="$componentGroup" />
         @endforeach
 
-        @foreach($ungroupedComponents as $component)
-        <x-cachet::component-ungrouped :component="$component" />
+        @foreach ($ungroupedComponents as $component)
+            <x-cachet::component-ungrouped :component="$component" />
         @endforeach
 
-        @if($schedules->isNotEmpty())
-        <x-cachet::schedules :schedules="$schedules" />
+        <x-cachet::metrics />
+
+        @if ($schedules->isNotEmpty())
+            <x-cachet::schedules :schedules="$schedules" />
         @endif
 
         <x-cachet::incident-timeline />
diff --git a/src/View/Components/Metrics.php b/src/View/Components/Metrics.php
new file mode 100644
index 00000000..a500e050
--- /dev/null
+++ b/src/View/Components/Metrics.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace Cachet\View\Components;
+
+use Cachet\Models\Metric;
+use Cachet\Settings\AppSettings;
+use Illuminate\Contracts\View\View;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Collection;
+use Illuminate\View\Component;
+
+class Metrics extends Component
+{
+    public function __construct(private AppSettings $appSettings)
+    {
+        //
+    }
+
+    public function render(): View
+    {
+        $startDate = Carbon::now()->subDays(30);
+
+        $metrics = $this->metrics($startDate);
+
+        // Convert each metric point to Chart.js format (x, y)
+        $metrics->each(function ($metric) {
+            $metric->metricPoints->transform(fn ($point) => [
+                'x' => $point->created_at->utc(),
+                'y' => $point->value,
+            ]);
+        });
+
+        return view('cachet::components.metrics', [
+            'metrics' => $metrics
+        ]);
+    }
+
+    /**
+     * Fetch the available metrics and their points.
+     */
+    private function metrics(Carbon $startDate): Collection
+    {
+        return Metric::query()
+            ->with([
+                'metricPoints' => fn ($query) => $query->orderBy('created_at'),
+            ])
+            ->where('display_chart', '=', 1)
+            ->where('visible', '=', 1)
+            ->where('visible', '>=', !auth()->check())
+            ->whereHas('metricPoints', fn (Builder $query) => $query->where('created_at', '>=', $startDate))
+            ->orderBy('places', 'asc')
+            ->get();
+    }
+}