diff --git a/app/Livewire/StatisticsPage.php b/app/Livewire/StatisticsPage.php
new file mode 100644
index 00000000..bfabe59a
--- /dev/null
+++ b/app/Livewire/StatisticsPage.php
@@ -0,0 +1,235 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Livewire;
+
+use App\Models\BackupDestination;
+use App\Models\BackupTask;
+use App\Models\BackupTaskData;
+use App\Models\BackupTaskLog;
+use App\Models\RemoteServer;
+use Carbon\Carbon;
+use Carbon\CarbonInterface;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Number;
+use Illuminate\View\View;
+use Livewire\Component;
+
+/**
+ * StatisticsPage Livewire Component
+ *
+ * This component handles the statistics page, loading and preparing various
+ * backup-related statistics for display.
+ */
+class StatisticsPage extends Component
+{
+    /** @var array<string> Dates for the backup tasks chart */
+    public array $backupDates = [];
+
+    /** @var array<int> Counts of file backups for each date */
+    public array $fileBackupCounts = [];
+
+    /** @var array<int> Counts of database backups for each date */
+    public array $databaseBackupCounts = [];
+
+    /** @var array<string> Labels for the backup success rate chart */
+    public array $backupSuccessRateLabels = [];
+
+    /** @var array<float> Data for the backup success rate chart */
+    public array $backupSuccessRateData = [];
+
+    /** @var array<string> Labels for the average backup size chart */
+    public array $averageBackupSizeLabels = [];
+
+    /** @var array<float> Data for the average backup size chart */
+    public array $averageBackupSizeData = [];
+
+    /** @var array<string> Labels for the completion time chart */
+    public array $completionTimeLabels = [];
+
+    /** @var array<float> Data for the completion time chart */
+    public array $completionTimeData = [];
+
+    /** @var string Total data backed up in the past seven days */
+    public string $dataBackedUpInThePastSevenDays;
+
+    /** @var string Total data backed up in the past month */
+    public string $dataBackedUpInThePastMonth;
+
+    /** @var string Total data backed up overall */
+    public string $dataBackedUpInTotal;
+
+    /** @var int Number of linked servers */
+    public int $linkedServers;
+
+    /** @var int Number of linked backup destinations */
+    public int $linkedBackupDestinations;
+
+    /** @var int Number of active backup tasks */
+    public int $activeBackupTasks;
+
+    /** @var int Number of paused backup tasks */
+    public int $pausedBackupTasks;
+
+    /**
+     * Initialize the component state
+     */
+    public function mount(): void
+    {
+        $this->loadBackupTasksData();
+        $this->loadStatistics();
+        $this->loadAverageBackupSizeData();
+        $this->loadBackupSuccessRateData();
+        $this->loadCompletionTimeData();
+    }
+
+    /**
+     * Render the component
+     */
+    public function render(): View
+    {
+        return view('livewire.statistics-page');
+    }
+
+    /**
+     * Load backup tasks data for the past 90 days
+     */
+    private function loadBackupTasksData(): void
+    {
+        $startDate = now()->subDays(89);
+        $endDate = now();
+
+        $backupTasks = BackupTask::selectRaw('DATE(created_at) as date, type, COUNT(*) as count')
+            ->whereBetween('created_at', [$startDate, $endDate])
+            ->groupBy('date', 'type')
+            ->orderBy('date')
+            ->get();
+
+        $dates = Collection::make($startDate->daysUntil($endDate)->toArray())
+            ->map(fn (CarbonInterface $date, $key): string => $date->format('Y-m-d'));
+
+        $fileBackups = $databaseBackups = array_fill_keys($dates->toArray(), 0);
+
+        foreach ($backupTasks as $backupTask) {
+            $date = $backupTask['date'];
+            $count = (int) $backupTask['count'];
+            if ($backupTask['type'] === 'Files') {
+                $fileBackups[$date] = $count;
+            } else {
+                $databaseBackups[$date] = $count;
+            }
+        }
+
+        $this->backupDates = $dates->values()->toArray();
+        $this->fileBackupCounts = array_values($fileBackups);
+        $this->databaseBackupCounts = array_values($databaseBackups);
+    }
+
+    /**
+     * Load general statistics
+     */
+    private function loadStatistics(): void
+    {
+        $this->dataBackedUpInThePastSevenDays = $this->formatFileSize(
+            (int) BackupTaskData::where('created_at', '>=', now()->subDays(7))->sum('size')
+        );
+
+        $this->dataBackedUpInThePastMonth = $this->formatFileSize(
+            (int) BackupTaskData::where('created_at', '>=', now()->subMonth())->sum('size')
+        );
+
+        $this->dataBackedUpInTotal = $this->formatFileSize(
+            (int) BackupTaskData::sum('size')
+        );
+
+        $this->linkedServers = RemoteServer::whereUserId(Auth::id())->count();
+        $this->linkedBackupDestinations = BackupDestination::whereUserId(Auth::id())->count();
+        $this->activeBackupTasks = BackupTask::whereUserId(Auth::id())->whereNull('paused_at')->count();
+        $this->pausedBackupTasks = BackupTask::whereUserId(Auth::id())->whereNotNull('paused_at')->count();
+    }
+
+    /**
+     * Load backup success rate data for the past 6 months
+     */
+    private function loadBackupSuccessRateData(): void
+    {
+        $startDate = now()->startOfMonth()->subMonths(5);
+        $endDate = now()->endOfMonth();
+
+        $backupLogs = BackupTaskLog::selectRaw("DATE_TRUNC('month', created_at)::date as month")
+            ->selectRaw('COUNT(*) as total')
+            ->selectRaw('SUM(CASE WHEN successful_at IS NOT NULL THEN 1 ELSE 0 END) as successful')
+            ->whereBetween('created_at', [$startDate, $endDate])
+            ->groupBy('month')
+            ->orderBy('month')
+            ->get();
+
+        $this->backupSuccessRateLabels = $backupLogs->pluck('month')->map(fn ($date): string => Carbon::parse($date)->format('Y-m'))->toArray();
+        $this->backupSuccessRateData = $backupLogs->map(function ($log): float|int {
+            $total = (int) ($log['total'] ?? 0);
+            $successful = (int) ($log['successful'] ?? 0);
+
+            return $total > 0 ? round(($successful / $total) * 100, 2) : 0;
+        })->toArray();
+    }
+
+    /**
+     * Load average backup size data
+     */
+    private function loadAverageBackupSizeData(): void
+    {
+        $backupSizes = BackupTask::join('backup_task_data', 'backup_tasks.id', '=', 'backup_task_data.backup_task_id')
+            ->join('backup_task_logs', 'backup_tasks.id', '=', 'backup_task_logs.backup_task_id')
+            ->select('backup_tasks.type')
+            ->selectRaw('AVG(backup_task_data.size) as average_size')
+            ->whereNotNull('backup_task_logs.successful_at')
+            ->groupBy('backup_tasks.type')
+            ->get();
+
+        $this->averageBackupSizeLabels = $backupSizes->pluck('type')->toArray();
+        $this->averageBackupSizeData = $backupSizes->pluck('average_size')
+            ->map(fn ($size): string => $this->formatFileSize((int) $size))
+            ->toArray();
+    }
+
+    private function loadCompletionTimeData(): void
+    {
+        $startDate = now()->subMonths(3);
+        $endDate = now();
+
+        $completionTimes = BackupTaskData::join('backup_task_logs', 'backup_task_data.backup_task_id', '=', 'backup_task_logs.backup_task_id')
+            ->selectRaw('DATE(backup_task_logs.created_at) as date')
+            ->selectRaw("
+            AVG(
+                CASE
+                    WHEN backup_task_data.duration ~ '^\\d+$' THEN backup_task_data.duration::integer
+                    WHEN backup_task_data.duration ~ '^(\\d+):(\\d+):(\\d+)$' THEN
+                        (SUBSTRING(backup_task_data.duration FROM '^(\\d+)'))::integer * 3600 +
+                        (SUBSTRING(backup_task_data.duration FROM '^\\d+:(\\d+)'))::integer * 60 +
+                        (SUBSTRING(backup_task_data.duration FROM ':(\\d+)$'))::integer
+                    ELSE 0
+                END
+            ) as avg_duration
+        ")
+            ->whereBetween('backup_task_logs.created_at', [$startDate, $endDate])
+            ->whereNotNull('backup_task_logs.successful_at')
+            ->groupBy('date')
+            ->orderBy('date')
+            ->get();
+
+        $this->completionTimeLabels = $completionTimes->pluck('date')->toArray();
+        $this->completionTimeData = $completionTimes->pluck('avg_duration')
+            ->map(fn ($duration): float => round($duration / 60, 2))
+            ->toArray();
+    }
+
+    /**
+     * Format file size using the Number facade
+     */
+    private function formatFileSize(int $bytes): string
+    {
+        return Number::fileSize($bytes);
+    }
+}
diff --git a/app/Services/Backup/Backup.php b/app/Services/Backup/Backup.php
index 9d66d551..17e38314 100644
--- a/app/Services/Backup/Backup.php
+++ b/app/Services/Backup/Backup.php
@@ -173,7 +173,15 @@ public function getRemoteDirectorySize(SFTPInterface $sftp, string $path): int
     }
 
     /**
-     * @throws SFTPConnectionException
+     * Get the size of a remote database in bytes.
+     *
+     * @param  SFTPInterface  $sftp  SFTP connection interface
+     * @param  string  $databaseType  Type of the database (mysql or postgresql)
+     * @param  string  $databaseName  Name of the database
+     * @param  string  $password  Database password
+     * @return int Size of the database in bytes
+     *
+     * @throws SFTPConnectionException If there's an error in connection or unsupported database type
      */
     public function getRemoteDatabaseSize(SFTPInterface $sftp, string $databaseType, string $databaseName, string $password): int
     {
@@ -181,43 +189,17 @@ public function getRemoteDatabaseSize(SFTPInterface $sftp, string $databaseType,
 
         $this->validateSFTP($sftp);
 
-        if ($databaseType === BackupConstants::DATABASE_TYPE_MYSQL) {
-            $sizeCommand = sprintf(
-                'mysql -p%s -e "SELECT ROUND(SUM(data_length + index_length) / 1024 / 1024, 1) AS size_mb FROM information_schema.tables WHERE table_schema = \'%s\';"',
-                escapeshellarg($password),
-                escapeshellarg($databaseName)
-            );
-
-        } elseif ($databaseType === BackupConstants::DATABASE_TYPE_POSTGRESQL) {
-            $sizeCommand = sprintf(
-                'PGPASSWORD=%s psql -d %s -c "SELECT pg_size_pretty(pg_database_size(\'%s\')) AS size;" -t | awk \'{print $1}\'',
-                escapeshellarg($password),
-                escapeshellarg($databaseName),
-                escapeshellarg($databaseName)
-            );
-
-        } else {
-            $this->logError('Unsupported database type.', ['database_type' => $databaseType]);
-            throw new SFTPConnectionException('Unsupported database type.');
-        }
+        $sizeCommand = $this->buildSizeCommand($databaseType, $databaseName, $password);
 
         $output = $sftp->exec($sizeCommand);
         $this->logDebug('Database size command output.', ['command' => $sizeCommand, 'output' => $output]);
 
-        if (is_string($output)) {
-            $size = trim($output);
-            if ($databaseType === BackupConstants::DATABASE_TYPE_MYSQL) {
-                $sizeInMb = (float) $size;
-            } elseif ($databaseType === BackupConstants::DATABASE_TYPE_POSTGRESQL) {
-                $sizeInMb = $this->convertPgSizeToMb($size);
-            }
-
-            return (int) $sizeInMb;
+        if (! is_string($output) || (trim($output) === '' || trim($output) === '0')) {
+            $this->logError('Failed to get the database size.');
+            throw new SFTPConnectionException('Failed to retrieve database size.');
         }
 
-        $this->logError('Failed to get the database size.');
-
-        return 0;
+        return $this->parseSizeOutput(trim($output));
     }
 
     /**
@@ -634,26 +616,51 @@ protected function handleException(Exception $exception, string $context): void
         $this->logError($context . ': ' . $exception->getMessage(), ['exception' => $exception]);
     }
 
-    private function convertPgSizeToMb(string $size): float
+    /**
+     * Build the appropriate size command based on database type.
+     *
+     * @param  string  $databaseType  Type of the database
+     * @param  string  $databaseName  Name of the database
+     * @param  string  $password  Database password
+     * @return string The command to execute
+     *
+     * @throws SFTPConnectionException If the database type is unsupported
+     */
+    private function buildSizeCommand(string $databaseType, string $databaseName, string $password): string
     {
-        $units = [
-            'mb' => 1,
-            'kb' => 1 / 1024,
-            'gb' => 1024,
-            'tb' => 1024 * 1024,
-        ];
-
-        $size = strtolower($size);
-
-        preg_match('/([\d.]+)\s*([a-z]+)/', $size, $matches);
+        return match ($databaseType) {
+            BackupConstants::DATABASE_TYPE_MYSQL => sprintf(
+                "mysql -p%s -e \"SELECT SUM(data_length + index_length) FROM information_schema.tables WHERE table_schema = '%s';\"",
+                escapeshellarg($password),
+                escapeshellarg($databaseName)
+            ),
+            BackupConstants::DATABASE_TYPE_POSTGRESQL => sprintf(
+                "PGPASSWORD=%s psql -d %s -c \"SELECT pg_database_size('%s');\" -t",
+                escapeshellarg($password),
+                escapeshellarg($databaseName),
+                escapeshellarg($databaseName)
+            ),
+            default => throw new SFTPConnectionException('Unsupported database type: ' . $databaseType),
+        };
+    }
 
-        if (isset($matches[1]) && isset($matches[2])) {
-            $number = (float) $matches[1];
-            $unit = $matches[2];
+    /**
+     * Parse the size output based on database type.
+     *
+     * @param  string  $output  Command output
+     * @return int Size in bytes
+     *
+     * @throws SFTPConnectionException If parsing fails
+     */
+    private function parseSizeOutput(string $output): int
+    {
+        $size = filter_var($output, FILTER_SANITIZE_NUMBER_INT);
 
-            return isset($units[$unit]) ? $number * $units[$unit] : $number / (1024 * 1024); // Assume bytes if unit is not recognized
+        if ($size === false || $size === null) {
+            $this->logError('Failed to parse database size output.', ['output' => $output]);
+            throw new SFTPConnectionException('Failed to parse database size output.');
         }
 
-        return (float) $size / (1024 * 1024);
+        return (int) $size;
     }
 }
diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php
index 72fa6669..ffaf540d 100644
--- a/resources/views/livewire/layout/navigation.blade.php
+++ b/resources/views/livewire/layout/navigation.blade.php
@@ -106,6 +106,10 @@ public function toggleUserDropdown(): void
                                 @svg('heroicon-o-bell', 'h-5 w-5 mr-2 inline')
                                 {{ __('Notifications') }}
                             </x-dropdown-link>
+                            <x-dropdown-link :href="route('statistics')" wire:navigate>
+                                @svg('heroicon-o-chart-pie', 'h-5 w-5 mr-2 inline')
+                                {{ __('Statistics') }}
+                            </x-dropdown-link>
                             @if (Auth::user()->isAdmin())
                                 <div class="border-t border-gray-200 dark:border-gray-600"></div>
                                 <x-dropdown-link href="{{ url('/pulse') }}">
@@ -180,6 +184,10 @@ public function toggleUserDropdown(): void
                     @svg('heroicon-o-bell', 'h-5 w-5 text-gray-50 mr-2 inline')
                     {{ __('Notifications') }}
                 </x-responsive-nav-link>
+                <x-responsive-nav-link :href="route('statistics')" wire:navigate>
+                    @svg('heroicon-o-chart-pie', 'h-5 w-5 text-gray-50 mr-2 inline')
+                    {{ __('Statistics') }}
+                </x-responsive-nav-link>
                 @if (Auth::user()->isAdmin())
                     <x-responsive-nav-link href="{{ url('/pulse') }}">
                         @svg('heroicon-o-chart-bar', 'h-5 w-5 text-gray-50 mr-2 inline')
diff --git a/resources/views/livewire/statistics-page.blade.php b/resources/views/livewire/statistics-page.blade.php
new file mode 100644
index 00000000..114d62f2
--- /dev/null
+++ b/resources/views/livewire/statistics-page.blade.php
@@ -0,0 +1,449 @@
+<div>
+    @section('title', __('Statistics'))
+    <x-slot name="header">
+        {{ __('Statistics') }}
+    </x-slot>
+    <div class="py-6">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            @if (Auth::user()->backupTasks->count() === 0)
+                <x-no-content withBackground>
+                    <x-slot name="icon">
+                        @svg('heroicon-o-chart-pie', 'h-16 w-16 text-primary-900 dark:text-white inline')
+                    </x-slot>
+                    <x-slot name="title">
+                        {{ __('No Data Available') }}
+                    </x-slot>
+                    <x-slot name="description">
+                        {{ __('Backup Tasks are required to be ran in order to generate statistical data.') }}
+                    </x-slot>
+                </x-no-content>
+            @else
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-server', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('Backup Data Statistics') }}</h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('Data backed up over different periods') }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
+                            <p class="text-sm text-gray-600 dark:text-gray-300 mb-1">{{ __('Last 7 days') }}: <span class="font-semibold">{{ $dataBackedUpInThePastSevenDays }}</span></p>
+                            <p class="text-sm text-gray-600 dark:text-gray-300 mb-1">{{ __('Last month') }}: <span class="font-semibold">{{ $dataBackedUpInThePastMonth }}</span></p>
+                            <p class="text-sm text-gray-600 dark:text-gray-300">{{ __('Total') }}: <span class="font-semibold">{{ $dataBackedUpInTotal }}</span></p>
+                        </div>
+                    </div>
+
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-link', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('Linked Resources') }}</h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('Connected servers and destinations') }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
+                            <p class="text-sm text-gray-600 dark:text-gray-300 mb-1">{{ __('Remote Servers') }}: <span class="font-semibold">{{ $linkedServers }}</span></p>
+                            <p class="text-sm text-gray-600 dark:text-gray-300">{{ __('Backup Destinations') }}: <span class="font-semibold">{{ $linkedBackupDestinations }}</span></p>
+                        </div>
+                    </div>
+
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-clipboard-document-list', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('Backup Tasks') }}</h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('Status of your backup tasks') }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
+                            <p class="text-sm text-gray-600 dark:text-gray-300 mb-1">{{ __('Active') }}: <span class="font-semibold">{{ $activeBackupTasks }}</span></p>
+                            <p class="text-sm text-gray-600 dark:text-gray-300">{{ __('Paused') }}: <span class="font-semibold">{{ $pausedBackupTasks }}</span></p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div x-data="{
+                    chart: null,
+                    init() {
+                        this.createChart();
+                        this.$watch('$store.darkMode', () => {
+                            this.updateChart();
+                        });
+                    },
+                    createChart() {
+                        const ctx = document.getElementById('totalBackupTasksPast90Days').getContext('2d');
+                        this.chart = new Chart(ctx, this.getChartConfig());
+                    },
+                    updateChart() {
+                        if (this.chart) {
+                            this.chart.destroy();
+                        }
+                        this.createChart();
+                    },
+                    getChartConfig() {
+                        const isDarkMode = document.documentElement.classList.contains('dark');
+                        const textColor = isDarkMode ? 'rgb(229, 231, 235)' : 'rgb(17, 24, 39)';
+
+                        return {
+                            type: 'bar',
+                            data: {
+                                labels: {{ Js::from($backupDates) }},
+                                datasets: [
+                                    {
+                                        label: '{{ __("Files") }}',
+                                        data: {{ Js::from($fileBackupCounts) }},
+                                        backgroundColor: 'rgba(255, 159, 64, 0.8)',
+                                        borderColor: 'rgb(255, 159, 64)',
+                                        borderWidth: 1
+                                    },
+                                    {
+                                        label: '{{ __("Database") }}',
+                                        data: {{ Js::from($databaseBackupCounts) }},
+                                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
+                                        borderColor: 'rgb(75, 192, 192)',
+                                        borderWidth: 1
+                                    }
+                                ]
+                            },
+                            options: {
+                                responsive: true,
+                                plugins: {
+                                    legend: {
+                                        position: 'top',
+                                        labels: {
+                                            color: textColor
+                                        }
+                                    },
+                                    title: {
+                                        display: true,
+                                        text: '{{ __("Backup Tasks - Past 90 Days") }}',
+                                        color: textColor
+                                    }
+                                },
+                                scales: {
+                                    x: {
+                                        stacked: true,
+                                        ticks: { color: textColor }
+                                    },
+                                    y: {
+                                        stacked: true,
+                                        ticks: { color: textColor },
+                                        beginAtZero: true
+                                    }
+                                }
+                            }
+                        };
+                    }
+                }" x-init="init()" x-init="init()" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-chart-bar', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                                        {{ __('Backups over the past 90 days') }}
+                                    </h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                        {{ __('All backups over the past ninety days.') }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+                            <canvas id="totalBackupTasksPast90Days" width="auto" height="200"></canvas>
+                        </div>
+                    </div>
+
+                    <div x-data="{
+    chart: null,
+    init() {
+        this.createChart();
+        this.$watch('$store.darkMode', () => {
+            this.updateChart();
+        });
+    },
+    createChart() {
+        const ctx = document.getElementById('backupSuccessRateChart').getContext('2d');
+        this.chart = new Chart(ctx, this.getChartConfig());
+    },
+    updateChart() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        this.createChart();
+    },
+    getChartConfig() {
+        const isDarkMode = document.documentElement.classList.contains('dark');
+        const textColor = isDarkMode ? 'rgb(229, 231, 235)' : 'rgb(17, 24, 39)';
+
+        return {
+            type: 'line',
+            data: {
+                labels: {{ Js::from($backupSuccessRateLabels) }},
+                datasets: [{
+                    label: '{{ __("Success Rate (%)") }}',
+                    data: {{ Js::from($backupSuccessRateData) }},
+                    borderColor: 'rgb(75, 192, 192)',
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                    tension: 0.1
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        labels: {
+                            color: textColor
+                        }
+                    },
+                    title: {
+                        display: true,
+                        text: '{{ __("Backup Success Rate - Last 6 Months") }}',
+                        color: textColor
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: { color: textColor }
+                    },
+                    y: {
+                        ticks: { color: textColor },
+                        beginAtZero: true,
+                        max: 100
+                    }
+                }
+            }
+        };
+    }
+}" x-init="init()" x-init="init()" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-chart-bar', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                                        {{ __('Backup Success Rate') }}
+                                    </h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                        {{ __('Success rate of backups over the last 6 months') }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+                            <canvas id="backupSuccessRateChart" width="auto" height="200"></canvas>
+                        </div>
+                    </div>
+
+                    <div x-data="{
+            chart: null,
+            init() {
+                this.createChart();
+                this.$watch('$store.darkMode', () => {
+                    this.updateChart();
+                });
+            },
+            createChart() {
+                const ctx = document.getElementById('averageBackupSizeChart').getContext('2d');
+                this.chart = new Chart(ctx, this.getChartConfig());
+            },
+            updateChart() {
+                if (this.chart) {
+                    this.chart.destroy();
+                }
+                this.createChart();
+            },
+            getChartConfig() {
+                const isDarkMode = document.documentElement.classList.contains('dark');
+                const textColor = isDarkMode ? 'rgb(229, 231, 235)' : 'rgb(17, 24, 39)';
+
+                return {
+                    type: 'bar',
+                    data: {
+                        labels: {{ Js::from($averageBackupSizeLabels) }},
+                        datasets: [{
+                            label: '{{ __("Average Size (MB)") }}',
+                            data: {{ Js::from($averageBackupSizeData) }},
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.8)',
+                                'rgba(54, 162, 235, 0.8)',
+                                'rgba(255, 206, 86, 0.8)',
+                                'rgba(75, 192, 192, 0.8)',
+                                'rgba(153, 102, 255, 0.8)',
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 206, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(153, 102, 255)',
+                            ],
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                                labels: {
+                                    color: textColor
+                                }
+                            },
+                            title: {
+                                display: true,
+                                text: '{{ __("Average Backup Size by Type") }}',
+                                color: textColor
+                            }
+                        },
+                        scales: {
+                            x: {
+                                ticks: { color: textColor }
+                            },
+                            y: {
+                                ticks: { color: textColor },
+                                beginAtZero: true,
+                                title: {
+                                    display: true,
+                                    text: 'Size (MB)',
+                                    color: textColor
+                                }
+                            }
+                        }
+                    }
+                };
+            }
+        }" x-init="init()" x-init="init()" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-chart-bar', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                                        {{ __('Average Backup Size by Type') }}
+                                    </h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                        {{ __('Average size of backups for each type') }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+                            <canvas id="averageBackupSizeChart" width="auto" height="200"></canvas>
+                        </div>
+                    </div>
+
+                    <div x-data="{
+            chart: null,
+            init() {
+                this.createChart();
+                this.$watch('$store.darkMode', () => {
+                    this.updateChart();
+                });
+            },
+            createChart() {
+                const ctx = document.getElementById('completionTimeChart').getContext('2d');
+                this.chart = new Chart(ctx, this.getChartConfig());
+            },
+            updateChart() {
+                if (this.chart) {
+                    this.chart.destroy();
+                }
+                this.createChart();
+            },
+            getChartConfig() {
+                const isDarkMode = document.documentElement.classList.contains('dark');
+                const textColor = isDarkMode ? 'rgb(229, 231, 235)' : 'rgb(17, 24, 39)';
+
+                return {
+                    type: 'line',
+                    data: {
+                        labels: {{ Js::from($completionTimeLabels) }},
+                        datasets: [{
+                            label: '{{ __("Average Completion Time (minutes)") }}',
+                            data: {{ Js::from($completionTimeData) }},
+                            borderColor: 'rgb(75, 192, 192)',
+                            backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                            tension: 0.1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                                labels: {
+                                    color: textColor
+                                }
+                            },
+                            title: {
+                                display: true,
+                                text: '{{ __("Backup Task Completion Time Trend - Last 3 Months") }}',
+                                color: textColor
+                            }
+                        },
+                        scales: {
+                            x: {
+                                ticks: { color: textColor },
+                                title: {
+                                    display: true,
+                                    text: 'Date',
+                                    color: textColor
+                                }
+                            },
+                            y: {
+                                ticks: { color: textColor },
+                                beginAtZero: true,
+                                title: {
+                                    display: true,
+                                    text: 'Time (minutes)',
+                                    color: textColor
+                                }
+                            }
+                        }
+                    }
+                };
+            }
+        }" x-init="init()" x-init="init()" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                        <div class="px-6 py-5">
+                            <div class="flex items-center">
+                                <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
+                                    @svg('heroicon-o-chart-bar', ['class' => 'h-6 w-6 text-primary-600 dark:text-primary-400'])
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                                        {{ __('Backup Task Completion Time Trend') }}
+                                    </h3>
+                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                                        {{ __('Average completion time of backup tasks over the last 3 months') }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
+                            <canvas id="completionTimeChart" width="auto" height="200"></canvas>
+                        </div>
+                    </div>
+                </div>
+            @endif
+        </div>
+    </div>
+</div>
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index fa322e54..fe53fa90 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -90,3 +90,7 @@
     $trail->parent('notification-streams.index');
     $trail->push(__('Update Notification Stream'), route('notification-streams.edit', $tag));
 });
+
+Breadcrumbs::for('statistics', function (BreadcrumbTrail $trail) {
+    $trail->push(__('Statistics'), route('statistics'));
+});
diff --git a/routes/web.php b/routes/web.php
index e7afe04f..735e588c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,6 +11,7 @@
 use App\Livewire\NotificationStreams\Forms\CreateNotificationStream;
 use App\Livewire\NotificationStreams\Forms\UpdateNotificationStream;
 use App\Livewire\NotificationStreams\Index as NotificationStreamIndex;
+use App\Livewire\StatisticsPage;
 use Illuminate\Support\Facades\Route;
 
 Route::redirect('/', '/overview');
@@ -59,6 +60,8 @@
         Route::get('edit/{notificationStream}', UpdateNotificationStream::class)->name('notification-streams.edit')
             ->middleware('can:update,notificationStream');
     });
+
+    Route::get('statistics', StatisticsPage::class)->name('statistics');
 });
 
 require __DIR__ . '/auth.php';
diff --git a/tests/Feature/Livewire/StatisticsPageTest.php b/tests/Feature/Livewire/StatisticsPageTest.php
new file mode 100644
index 00000000..cf019d9b
--- /dev/null
+++ b/tests/Feature/Livewire/StatisticsPageTest.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Livewire\StatisticsPage;
+use App\Models\User;
+
+test('the component renders successfully', function (): void {
+    $user = User::factory()->create();
+    $component = Livewire::actingAs($user)->test(StatisticsPage::class);
+    $component->assertOk();
+});
+
+test('the page can be loaded', function (): void {
+    $user = User::factory()->create();
+
+    $response = $this->actingAs($user)
+        ->get(route('statistics'));
+
+    $response->assertOk();
+});
+
+test('guests cannot access this page', function (): void {
+    $response = $this->get(route('statistics'));
+
+    $response->assertRedirect(route('login'));
+
+    $this->assertGuest();
+});