diff --git a/frontend/src/app/status/status/log-page.component.ts b/frontend/src/app/status/status/log-page.component.ts
index 3d5a06105..f4f9410c6 100644
--- a/frontend/src/app/status/status/log-page.component.ts
+++ b/frontend/src/app/status/status/log-page.component.ts
@@ -1,18 +1,10 @@
-import { AsyncPipe } from '@angular/common';
 import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
-import { Params, RouterLink } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
-import { LogPage } from '@api/common/status';
-import { PeriodParameters } from '@api/common/status';
+import { RouterLink } from '@angular/router';
 import { PageComponent } from '@app/components/shared/page';
-import { ApiService } from '@app/services';
-import { Observable } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
-import { tap } from 'rxjs/operators';
-import { map } from 'rxjs/operators';
+import { RouterService } from '../../shared/services/router.service';
 import { LogAnalysisChartComponent } from './charts/log/log-analysis-chart.component';
 import { LogAnalysisRobotChartComponent } from './charts/log/log-analysis-robot-chart.component';
 import { LogApiChartComponent } from './charts/log/log-api-chart.component';
@@ -21,7 +13,7 @@ import { LogNonRobotChartComponent } from './charts/log/log-non-robot-chart.comp
 import { LogRobotChartComponent } from './charts/log/log-robot-chart.component';
 import { LogTileChartComponent } from './charts/log/log-tile-chart.component';
 import { LogTileRobotChartComponent } from './charts/log/log-tile-robot-chart.component';
-import { StatusLinks } from './status-links';
+import { LogPageService } from './log-page.service';
 import { StatusPageMenuComponent } from './status-page-menu.component';
 import { StatusSidebarComponent } from './status-sidebar.component';
 
@@ -40,22 +32,25 @@ import { StatusSidebarComponent } from './status-sidebar.component';
 
       <h1>Log analysis</h1>
 
-      @if (page$ | async; as page) {
-        <kpn-status-page-menu [links]="statusLinks" [periodType]="page.periodType" />
+      @if (service.page(); as page) {
+        <kpn-status-page-menu [links]="service.statusLinks()" [periodType]="page.periodType" />
         <div>
           <a [routerLink]="'TODO previous'" class="previous">previous</a>
           <a [routerLink]="'TODO next'">next</a>
         </div>
         <div class="chart-group">
           <h2>Analysis</h2>
-          <kpn-log-tile-chart [barChart]="page.tile" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-tile-robot-chart [barChart]="page.tileRobot" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-api-chart [barChart]="page.api" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-api-robot-chart [barChart]="page.apiRobot" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-analysis-chart [barChart]="page.analysis" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-analysis-robot-chart [barChart]="page.analysisRobot" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-robot-chart [barChart]="page.robot" [xAxisLabel]="xAxisLabel" />
-          <kpn-log-non-robot-chart [barChart]="page.nonRobot" [xAxisLabel]="xAxisLabel" />
+          <kpn-log-tile-chart [barChart]="page.tile" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-log-tile-robot-chart [barChart]="page.tileRobot" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-log-api-chart [barChart]="page.api" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-log-api-robot-chart [barChart]="page.apiRobot" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-log-analysis-chart [barChart]="page.analysis" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-log-analysis-robot-chart
+            [barChart]="page.analysisRobot"
+            [xAxisLabel]="service.xAxisLabel"
+          />
+          <kpn-log-robot-chart [barChart]="page.robot" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-log-non-robot-chart [barChart]="page.nonRobot" [xAxisLabel]="service.xAxisLabel" />
         </div>
       }
       <kpn-status-sidebar sidebar />
@@ -74,9 +69,9 @@ import { StatusSidebarComponent } from './status-sidebar.component';
       padding-right: 5px;
     }
   `,
+  providers: [LogPageService, RouterService],
   standalone: true,
   imports: [
-    AsyncPipe,
     LogAnalysisChartComponent,
     LogAnalysisRobotChartComponent,
     LogApiChartComponent,
@@ -92,99 +87,9 @@ import { StatusSidebarComponent } from './status-sidebar.component';
   ],
 })
 export class LogPageComponent implements OnInit {
-  private readonly activatedRoute = inject(ActivatedRoute);
-  private readonly apiService = inject(ApiService);
-
-  protected page$: Observable<LogPage>;
-  protected statusLinks: StatusLinks;
-  protected xAxisLabel: string;
+  protected readonly service = inject(LogPageService);
 
   ngOnInit(): void {
-    this.page$ = this.activatedRoute.params.pipe(
-      map((params) => this.toPeriodParameters(params)),
-      tap((parameters) => {
-        if (parameters.period === 'year') {
-          this.xAxisLabel = 'weeks';
-        } else if (parameters.period === 'month') {
-          this.xAxisLabel = 'days';
-        } else if (parameters.period === 'week') {
-          this.xAxisLabel = 'days';
-        } else if (parameters.period === 'day') {
-          this.xAxisLabel = 'hours';
-        } else if (parameters.period === 'hour') {
-          this.xAxisLabel = 'minutes';
-        }
-      }),
-      mergeMap((parameters) =>
-        this.apiService.logStatus(parameters).pipe(
-          map((r) => r.result),
-          tap((page) => (this.statusLinks = new StatusLinks(page.timestamp, '/status/log')))
-        )
-      )
-    );
-  }
-
-  private toPeriodParameters(params: Params): PeriodParameters {
-    const period = params['period'];
-    if ('year' === period) {
-      return {
-        period: 'year',
-        year: +params['year'],
-        month: null,
-        week: null,
-        day: null,
-        hour: null,
-      };
-    }
-    if ('month' === period) {
-      return {
-        period: 'month',
-        year: +params['year'],
-        month: +params['monthOrWeek'],
-        week: null,
-        day: null,
-        hour: null,
-      };
-    }
-    if ('week' === period) {
-      return {
-        period: 'week',
-        year: +params['year'],
-        month: null,
-        week: +params['monthOrWeek'],
-        day: null,
-        hour: null,
-      };
-    }
-    if ('day' === period) {
-      return {
-        period: 'day',
-        year: +params['year'],
-        month: +params['month'],
-        week: null,
-        day: +params['day'],
-        hour: null,
-      };
-    }
-    if ('hour' === period) {
-      return {
-        period: 'hour',
-        year: +params['year'],
-        month: +params['month'],
-        week: null,
-        day: +params['day'],
-        hour: +params['hour'],
-      };
-    }
-
-    const now = new Date();
-    return {
-      period: 'hour',
-      year: now.getFullYear(),
-      month: now.getMonth(),
-      week: null,
-      day: now.getDate(),
-      hour: now.getHours(),
-    };
+    this.service.onInit();
   }
 }
diff --git a/frontend/src/app/status/status/log-page.service.ts b/frontend/src/app/status/status/log-page.service.ts
new file mode 100644
index 000000000..184ab697a
--- /dev/null
+++ b/frontend/src/app/status/status/log-page.service.ts
@@ -0,0 +1,105 @@
+import { computed } from '@angular/core';
+import { signal } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { inject } from '@angular/core';
+import { Params } from '@angular/router';
+import { PeriodParameters } from '@api/common/status';
+import { LogPage } from '@api/common/status';
+import { ApiResponse } from '@api/custom';
+import { ApiService } from '@app/services';
+import { RouterService } from '../../shared/services/router.service';
+import { StatusLinks } from './status-links';
+
+@Injectable()
+export class LogPageService {
+  private readonly apiService = inject(ApiService);
+  private readonly routerService = inject(RouterService);
+
+  private readonly _response = signal<ApiResponse<LogPage>>(null);
+  readonly response = this._response.asReadonly();
+  readonly page = computed(() => this.response()?.result);
+  readonly statusLinks = computed(() => new StatusLinks(this.page().timestamp, '/status/log'));
+
+  xAxisLabel: string;
+
+  onInit(): void {
+    const parameters = this.toPeriodParameters(this.routerService.params());
+    if (parameters.period === 'year') {
+      this.xAxisLabel = 'weeks';
+    } else if (parameters.period === 'month') {
+      this.xAxisLabel = 'days';
+    } else if (parameters.period === 'week') {
+      this.xAxisLabel = 'days';
+    } else if (parameters.period === 'day') {
+      this.xAxisLabel = 'hours';
+    } else if (parameters.period === 'hour') {
+      this.xAxisLabel = 'minutes';
+    }
+
+    this.apiService.logStatus(parameters).subscribe((response) => this._response.set(response));
+  }
+
+  private toPeriodParameters(params: Params): PeriodParameters {
+    const period = params['period'];
+    if ('year' === period) {
+      return {
+        period: 'year',
+        year: +params['year'],
+        month: null,
+        week: null,
+        day: null,
+        hour: null,
+      };
+    }
+    if ('month' === period) {
+      return {
+        period: 'month',
+        year: +params['year'],
+        month: +params['monthOrWeek'],
+        week: null,
+        day: null,
+        hour: null,
+      };
+    }
+    if ('week' === period) {
+      return {
+        period: 'week',
+        year: +params['year'],
+        month: null,
+        week: +params['monthOrWeek'],
+        day: null,
+        hour: null,
+      };
+    }
+    if ('day' === period) {
+      return {
+        period: 'day',
+        year: +params['year'],
+        month: +params['month'],
+        week: null,
+        day: +params['day'],
+        hour: null,
+      };
+    }
+    if ('hour' === period) {
+      return {
+        period: 'hour',
+        year: +params['year'],
+        month: +params['month'],
+        week: null,
+        day: +params['day'],
+        hour: +params['hour'],
+      };
+    }
+
+    const now = new Date();
+    return {
+      period: 'hour',
+      year: now.getFullYear(),
+      month: now.getMonth(),
+      week: null,
+      day: now.getDate(),
+      hour: now.getHours(),
+    };
+  }
+}
diff --git a/frontend/src/app/status/status/replication-status-page.component.ts b/frontend/src/app/status/status/replication-status-page.component.ts
index 9a8606ff4..a397c0334 100644
--- a/frontend/src/app/status/status/replication-status-page.component.ts
+++ b/frontend/src/app/status/status/replication-status-page.component.ts
@@ -1,18 +1,10 @@
-import { AsyncPipe } from '@angular/common';
 import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
-import { Params, RouterLink } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
-import { PeriodParameters } from '@api/common/status';
-import { ReplicationStatusPage } from '@api/common/status';
+import { RouterLink } from '@angular/router';
 import { PageComponent } from '@app/components/shared/page';
-import { ApiService } from '@app/services';
-import { Observable } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
-import { tap } from 'rxjs/operators';
-import { map } from 'rxjs/operators';
+import { RouterService } from '../../shared/services/router.service';
 import { AnalysisDelayChartComponent } from './charts/analysis-delay-chart.component';
 import { DelayChartComponent } from './charts/delay-chart.component';
 import { ReplicationBytesChartComponent } from './charts/replication-bytes-chart.component';
@@ -20,7 +12,7 @@ import { ReplicationChangesetsChartComponent } from './charts/replication-change
 import { ReplicationDelayChartComponent } from './charts/replication-delay-chart.component';
 import { ReplicationElementsChartComponent } from './charts/replication-elements-chart.component';
 import { UpdateDelayChartComponent } from './charts/update-delay-chart.component';
-import { StatusLinks } from './status-links';
+import { ReplicationStatusPageService } from './replication-status-page.service';
 import { StatusPageMenuComponent } from './status-page-menu.component';
 import { StatusSidebarComponent } from './status-sidebar.component';
 
@@ -39,33 +31,36 @@ import { StatusSidebarComponent } from './status-sidebar.component';
 
       <h1>Replication</h1>
 
-      @if (page$ | async; as page) {
-        <kpn-status-page-menu [links]="statusLinks" [periodType]="page.periodType" />
+      @if (service.page(); as page) {
+        <kpn-status-page-menu [links]="service.statusLinks()" [periodType]="page.periodType" />
         <div>
           <a [routerLink]="'TODO previous'" class="previous">previous</a>
           <a [routerLink]="'TODO next'">next</a>
         </div>
         <div class="chart-group">
-          <kpn-delay-chart [barChart]="page.delay" [xAxisLabel]="xAxisLabel" />
-          <kpn-analysis-delay-chart [barChart]="page.analysisDelay" [xAxisLabel]="xAxisLabel" />
-          <kpn-update-delay-chart [barChart]="page.updateDelay" [xAxisLabel]="xAxisLabel" />
+          <kpn-delay-chart [barChart]="page.delay" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-analysis-delay-chart
+            [barChart]="page.analysisDelay"
+            [xAxisLabel]="service.xAxisLabel"
+          />
+          <kpn-update-delay-chart [barChart]="page.updateDelay" [xAxisLabel]="service.xAxisLabel" />
           <kpn-replication-delay-chart
             [barChart]="page.replicationDelay"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
         </div>
         <div class="chart-group">
           <kpn-replication-bytes-chart
             [barChart]="page.replicationBytes"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
           <kpn-replication-elements-chart
             [barChart]="page.replicationElements"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
           <kpn-replication-changesets-chart
             [barChart]="page.replicationChangeSets"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
         </div>
       }
@@ -85,10 +80,10 @@ import { StatusSidebarComponent } from './status-sidebar.component';
       padding-right: 5px;
     }
   `,
+  providers: [ReplicationStatusPageService, RouterService],
   standalone: true,
   imports: [
     AnalysisDelayChartComponent,
-    AsyncPipe,
     DelayChartComponent,
     PageComponent,
     ReplicationBytesChartComponent,
@@ -102,99 +97,9 @@ import { StatusSidebarComponent } from './status-sidebar.component';
   ],
 })
 export class ReplicationStatusPageComponent implements OnInit {
-  private readonly activatedRoute = inject(ActivatedRoute);
-  private readonly apiService = inject(ApiService);
-
-  protected page$: Observable<ReplicationStatusPage>;
-  protected statusLinks: StatusLinks;
-  protected xAxisLabel: string;
+  protected readonly service = inject(ReplicationStatusPageService);
 
   ngOnInit(): void {
-    this.page$ = this.activatedRoute.params.pipe(
-      map((params) => this.toPeriodParameters(params)),
-      tap((parameters) => {
-        if (parameters.period === 'year') {
-          this.xAxisLabel = 'weeks';
-        } else if (parameters.period === 'month') {
-          this.xAxisLabel = 'days';
-        } else if (parameters.period === 'week') {
-          this.xAxisLabel = 'days';
-        } else if (parameters.period === 'day') {
-          this.xAxisLabel = 'hours';
-        } else if (parameters.period === 'hour') {
-          this.xAxisLabel = 'minutes';
-        }
-      }),
-      mergeMap((parameters) =>
-        this.apiService.replicationStatus(parameters).pipe(
-          map((r) => r.result),
-          tap((page) => (this.statusLinks = new StatusLinks(page.timestamp, '/status/replication')))
-        )
-      )
-    );
-  }
-
-  private toPeriodParameters(params: Params): PeriodParameters {
-    const period = params['period'];
-    if ('year' === period) {
-      return {
-        period: 'year',
-        year: +params['year'],
-        month: null,
-        week: null,
-        day: null,
-        hour: null,
-      };
-    }
-    if ('month' === period) {
-      return {
-        period: 'month',
-        year: +params['year'],
-        month: +params['monthOrWeek'],
-        week: null,
-        day: null,
-        hour: null,
-      };
-    }
-    if ('week' === period) {
-      return {
-        period: 'week',
-        year: +params['year'],
-        month: null,
-        week: +params['monthOrWeek'],
-        day: null,
-        hour: null,
-      };
-    }
-    if ('day' === period) {
-      return {
-        period: 'day',
-        year: +params['year'],
-        month: +params['month'],
-        week: null,
-        day: +params['day'],
-        hour: null,
-      };
-    }
-    if ('hour' === period) {
-      return {
-        period: 'hour',
-        year: +params['year'],
-        month: +params['month'],
-        week: null,
-        day: +params['day'],
-        hour: +params['hour'],
-      };
-    }
-
-    const now = new Date();
-    return {
-      period: 'hour',
-      year: now.getFullYear(),
-      month: now.getMonth(),
-      week: null,
-      day: now.getDate(),
-      hour: now.getHours(),
-    };
+    this.service.onInit();
   }
 }
diff --git a/frontend/src/app/status/status/replication-status-page.service.ts b/frontend/src/app/status/status/replication-status-page.service.ts
new file mode 100644
index 000000000..5e9c83f87
--- /dev/null
+++ b/frontend/src/app/status/status/replication-status-page.service.ts
@@ -0,0 +1,106 @@
+import { computed } from '@angular/core';
+import { signal } from '@angular/core';
+import { inject } from '@angular/core';
+import { Params } from '@angular/router';
+import { PeriodParameters } from '@api/common/status';
+import { ReplicationStatusPage } from '@api/common/status';
+import { ApiResponse } from '@api/custom';
+import { ApiService } from '@app/services';
+import { RouterService } from '../../shared/services/router.service';
+import { StatusLinks } from './status-links';
+
+export class ReplicationStatusPageService {
+  private readonly apiService = inject(ApiService);
+  private readonly routerService = inject(RouterService);
+
+  private readonly _response = signal<ApiResponse<ReplicationStatusPage>>(null);
+  readonly page = computed(() => this._response()?.result);
+  readonly statusLinks = computed(
+    () => new StatusLinks(this.page().timestamp, '/status/replication')
+  );
+  xAxisLabel: string;
+
+  onInit(): void {
+    const parameters = this.toPeriodParameters(this.routerService.params());
+
+    if (parameters.period === 'year') {
+      this.xAxisLabel = 'weeks';
+    } else if (parameters.period === 'month') {
+      this.xAxisLabel = 'days';
+    } else if (parameters.period === 'week') {
+      this.xAxisLabel = 'days';
+    } else if (parameters.period === 'day') {
+      this.xAxisLabel = 'hours';
+    } else if (parameters.period === 'hour') {
+      this.xAxisLabel = 'minutes';
+    }
+
+    this.apiService
+      .replicationStatus(parameters)
+      .subscribe((response) => this._response.set(response));
+  }
+
+  private toPeriodParameters(params: Params): PeriodParameters {
+    const period = params['period'];
+    if ('year' === period) {
+      return {
+        period: 'year',
+        year: +params['year'],
+        month: null,
+        week: null,
+        day: null,
+        hour: null,
+      };
+    }
+    if ('month' === period) {
+      return {
+        period: 'month',
+        year: +params['year'],
+        month: +params['monthOrWeek'],
+        week: null,
+        day: null,
+        hour: null,
+      };
+    }
+    if ('week' === period) {
+      return {
+        period: 'week',
+        year: +params['year'],
+        month: null,
+        week: +params['monthOrWeek'],
+        day: null,
+        hour: null,
+      };
+    }
+    if ('day' === period) {
+      return {
+        period: 'day',
+        year: +params['year'],
+        month: +params['month'],
+        week: null,
+        day: +params['day'],
+        hour: null,
+      };
+    }
+    if ('hour' === period) {
+      return {
+        period: 'hour',
+        year: +params['year'],
+        month: +params['month'],
+        week: null,
+        day: +params['day'],
+        hour: +params['hour'],
+      };
+    }
+
+    const now = new Date();
+    return {
+      period: 'hour',
+      year: now.getFullYear(),
+      month: now.getMonth(),
+      week: null,
+      day: now.getDate(),
+      hour: now.getHours(),
+    };
+  }
+}
diff --git a/frontend/src/app/status/status/status-page.component.ts b/frontend/src/app/status/status/status-page.component.ts
index 9ed3ed314..31906791e 100644
--- a/frontend/src/app/status/status/status-page.component.ts
+++ b/frontend/src/app/status/status/status-page.component.ts
@@ -1,18 +1,12 @@
-import { AsyncPipe } from '@angular/common';
 import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
-import { Status } from '@api/common/status';
-import { ApiResponse } from '@api/custom';
 import { PageComponent } from '@app/components/shared/page';
 import { TimestampComponent } from '@app/components/shared/timestamp';
-import { ApiService } from '@app/services';
-import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
 import { ServerDiskUsageComponent } from './charts/server-disk-usage.component';
-import { StatusLinks } from './status-links';
 import { StatusLinksComponent } from './status-links.component';
+import { StatusPageService } from './status-page.service';
 import { StatusSidebarComponent } from './status-sidebar.component';
 
 @Component({
@@ -22,31 +16,31 @@ import { StatusSidebarComponent } from './status-sidebar.component';
     <!-- English only-->
     <!-- eslint-disable @angular-eslint/template/i18n -->
     <kpn-page>
-      @if (response$ | async; as response) {
+      @if (service.response(); as response) {
         <p>
           <span class="kpn-label">The analysis is up-to-date until</span>
           <kpn-timestamp [timestamp]="response.situationOn" />
         </p>
         <p>
           <span class="kpn-label">Replication details</span>
-          <kpn-status-links [links]="replicationLinks" />
+          <kpn-status-links [links]="service.replicationLinks()" />
         </p>
         <p>
           <span class="kpn-label">System details</span>
-          <kpn-status-links [links]="systemLinks" />
+          <kpn-status-links [links]="service.systemLinks()" />
         </p>
         <p>
           <span class="kpn-label">Log analysis</span>
-          <kpn-status-links [links]="logLinks" />
+          <kpn-status-links [links]="service.logLinks()" />
         </p>
         <kpn-server-disk-usage [diskUsage]="response.result.diskUsage" />
       }
       <kpn-status-sidebar sidebar />
     </kpn-page>
   `,
+  providers: [StatusPageService],
   standalone: true,
   imports: [
-    AsyncPipe,
     PageComponent,
     ServerDiskUsageComponent,
     StatusLinksComponent,
@@ -55,23 +49,9 @@ import { StatusSidebarComponent } from './status-sidebar.component';
   ],
 })
 export class StatusPageComponent implements OnInit {
-  private readonly apiService = inject(ApiService);
-
-  protected response$: Observable<ApiResponse<Status>>;
-  protected replicationLinks: StatusLinks;
-  protected systemLinks: StatusLinks;
-  protected logLinks: StatusLinks;
+  protected readonly service = inject(StatusPageService);
 
   ngOnInit(): void {
-    this.response$ = this.apiService.status().pipe(
-      tap((response) => {
-        if (response.result) {
-          const timestamp = response.result.timestamp;
-          this.replicationLinks = new StatusLinks(timestamp, '/status/replication');
-          this.systemLinks = new StatusLinks(timestamp, '/status/system');
-          this.logLinks = new StatusLinks(timestamp, '/status/log');
-        }
-      })
-    );
+    this.service.onInit();
   }
 }
diff --git a/frontend/src/app/status/status/status-page.service.ts b/frontend/src/app/status/status/status-page.service.ts
new file mode 100644
index 000000000..3ad2cb728
--- /dev/null
+++ b/frontend/src/app/status/status/status-page.service.ts
@@ -0,0 +1,30 @@
+import { computed } from '@angular/core';
+import { signal } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { inject } from '@angular/core';
+import { Status } from '@api/common/status';
+import { ApiResponse } from '@api/custom';
+import { ApiService } from '@app/services';
+import { StatusLinks } from './status-links';
+
+@Injectable()
+export class StatusPageService {
+  private readonly apiService = inject(ApiService);
+
+  private readonly _response = signal<ApiResponse<Status>>(null);
+  readonly response = this._response.asReadonly();
+  private readonly timestamp = computed(() => this.response().result.timestamp);
+  readonly replicationLinks = computed(() => this.links('/status/replication'));
+  readonly systemLinks = computed(() => this.links('/status/system'));
+  readonly logLinks = computed(() => this.links('/status/log'));
+
+  onInit(): void {
+    this.apiService.status().subscribe((response) => {
+      this._response.set(response);
+    });
+  }
+
+  private links(root: string): StatusLinks {
+    return new StatusLinks(this.timestamp(), root);
+  }
+}
diff --git a/frontend/src/app/status/status/system-status-page.component.ts b/frontend/src/app/status/status/system-status-page.component.ts
index b9a36603e..bafc48961 100644
--- a/frontend/src/app/status/status/system-status-page.component.ts
+++ b/frontend/src/app/status/status/system-status-page.component.ts
@@ -1,18 +1,10 @@
-import { AsyncPipe } from '@angular/common';
 import { inject } from '@angular/core';
 import { ChangeDetectionStrategy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Component } from '@angular/core';
-import { Params, RouterLink } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
-import { PeriodParameters } from '@api/common/status';
-import { SystemStatusPage } from '@api/common/status';
+import { RouterLink } from '@angular/router';
 import { PageComponent } from '@app/components/shared/page';
-import { ApiService } from '@app/services';
-import { Observable } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
-import { tap } from 'rxjs/operators';
-import { map } from 'rxjs/operators';
+import { RouterService } from '../../shared/services/router.service';
 import { DataSizeChartComponent } from './charts/system/data-size-chart.component';
 import { DiskSizeChartComponent } from './charts/system/disk-size-chart.component';
 import { DiskSizeExternalChartComponent } from './charts/system/disk-size-external-chart.component';
@@ -20,9 +12,9 @@ import { DiskSpaceAvailableChartComponent } from './charts/system/disk-space-ava
 import { DiskSpaceOverpassChartComponent } from './charts/system/disk-space-overpass-chart.component';
 import { DiskSpaceUsedChartComponent } from './charts/system/disk-space-used-chart.component';
 import { DocsChartComponent } from './charts/system/docs-chart.component';
-import { StatusLinks } from './status-links';
 import { StatusPageMenuComponent } from './status-page-menu.component';
 import { StatusSidebarComponent } from './status-sidebar.component';
+import { SystemStatusPageService } from './system-status-page.service';
 
 @Component({
   selector: 'kpn-system-status-page',
@@ -39,8 +31,8 @@ import { StatusSidebarComponent } from './status-sidebar.component';
 
       <h1>System</h1>
 
-      @if (page$ | async; as page) {
-        <kpn-status-page-menu [links]="statusLinks" [periodType]="page.periodType" />
+      @if (service.page(); as page) {
+        <kpn-status-page-menu [links]="service.statusLinks()" [periodType]="page.periodType" />
         <div>
           <a [routerLink]="'TODO previous'" class="previous">previous</a>
           <a [routerLink]="'TODO next'">next</a>
@@ -49,36 +41,48 @@ import { StatusSidebarComponent } from './status-sidebar.component';
           <h2>Backend disk space</h2>
           <kpn-disk-space-used-chart
             [barChart]="page.backendDiskSpaceUsed"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
           <kpn-disk-space-available-chart
             [barChart]="page.backendDiskSpaceAvailable"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
           <kpn-disk-space-overpass-chart
             [barChart]="page.backendDiskSpaceOverpass"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
           />
         </div>
         <div class="chart-group">
           <h2>Analysis database</h2>
-          <kpn-docs-chart [barChart]="page.analysisDocCount" [xAxisLabel]="xAxisLabel" />
-          <kpn-disk-size-chart [barChart]="page.analysisDiskSize" [xAxisLabel]="xAxisLabel" />
+          <kpn-docs-chart [barChart]="page.analysisDocCount" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-disk-size-chart
+            [barChart]="page.analysisDiskSize"
+            [xAxisLabel]="service.xAxisLabel"
+          />
           <kpn-disk-size-external-chart
             [barChart]="page.analysisDiskSizeExternal"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
+          />
+          <kpn-data-size-chart
+            [barChart]="page.analysisDataSize"
+            [xAxisLabel]="service.xAxisLabel"
           />
-          <kpn-data-size-chart [barChart]="page.analysisDataSize" [xAxisLabel]="xAxisLabel" />
         </div>
         <div class="chart-group">
           <h2>Changes database</h2>
-          <kpn-docs-chart [barChart]="page.changesDocCount" [xAxisLabel]="xAxisLabel" />
-          <kpn-disk-size-chart [barChart]="page.changesDiskSize" [xAxisLabel]="xAxisLabel" />
+          <kpn-docs-chart [barChart]="page.changesDocCount" [xAxisLabel]="service.xAxisLabel" />
+          <kpn-disk-size-chart
+            [barChart]="page.changesDiskSize"
+            [xAxisLabel]="service.xAxisLabel"
+          />
           <kpn-disk-size-external-chart
             [barChart]="page.changesDiskSizeExternal"
-            [xAxisLabel]="xAxisLabel"
+            [xAxisLabel]="service.xAxisLabel"
+          />
+          <kpn-data-size-chart
+            [barChart]="page.changesDataSize"
+            [xAxisLabel]="service.xAxisLabel"
           />
-          <kpn-data-size-chart [barChart]="page.changesDataSize" [xAxisLabel]="xAxisLabel" />
         </div>
       }
       <kpn-status-sidebar sidebar />
@@ -97,9 +101,9 @@ import { StatusSidebarComponent } from './status-sidebar.component';
       padding-right: 5px;
     }
   `,
+  providers: [SystemStatusPageComponent, RouterService],
   standalone: true,
   imports: [
-    AsyncPipe,
     DataSizeChartComponent,
     DiskSizeChartComponent,
     DiskSizeExternalChartComponent,
@@ -114,99 +118,9 @@ import { StatusSidebarComponent } from './status-sidebar.component';
   ],
 })
 export class SystemStatusPageComponent implements OnInit {
-  private readonly activatedRoute = inject(ActivatedRoute);
-  private readonly apiService = inject(ApiService);
-
-  protected page$: Observable<SystemStatusPage>;
-  protected statusLinks: StatusLinks;
-  protected xAxisLabel: string;
+  protected readonly service = inject(SystemStatusPageService);
 
   ngOnInit(): void {
-    this.page$ = this.activatedRoute.params.pipe(
-      map((params) => this.toPeriodParameters(params)),
-      tap((parameters) => {
-        if (parameters.period === 'year') {
-          this.xAxisLabel = 'weeks';
-        } else if (parameters.period === 'month') {
-          this.xAxisLabel = 'days';
-        } else if (parameters.period === 'week') {
-          this.xAxisLabel = 'days';
-        } else if (parameters.period === 'day') {
-          this.xAxisLabel = 'hours';
-        } else if (parameters.period === 'hour') {
-          this.xAxisLabel = 'minutes';
-        }
-      }),
-      mergeMap((parameters) =>
-        this.apiService.systemStatus(parameters).pipe(
-          map((r) => r.result),
-          tap((page) => (this.statusLinks = new StatusLinks(page.timestamp, '/status/system')))
-        )
-      )
-    );
-  }
-
-  private toPeriodParameters(params: Params): PeriodParameters {
-    const period = params['period'];
-    if ('year' === period) {
-      return {
-        period: 'year',
-        year: +params['year'],
-        month: null,
-        week: null,
-        day: null,
-        hour: null,
-      };
-    }
-    if ('month' === period) {
-      return {
-        period: 'month',
-        year: +params['year'],
-        month: +params['monthOrWeek'],
-        week: null,
-        day: null,
-        hour: null,
-      };
-    }
-    if ('week' === period) {
-      return {
-        period: 'week',
-        year: +params['year'],
-        month: null,
-        week: +params['monthOrWeek'],
-        day: null,
-        hour: null,
-      };
-    }
-    if ('day' === period) {
-      return {
-        period: 'day',
-        year: +params['year'],
-        month: +params['month'],
-        week: null,
-        day: +params['day'],
-        hour: null,
-      };
-    }
-    if ('hour' === period) {
-      return {
-        period: 'hour',
-        year: +params['year'],
-        month: +params['month'],
-        week: null,
-        day: +params['day'],
-        hour: +params['hour'],
-      };
-    }
-
-    const now = new Date();
-    return {
-      period: 'hour',
-      year: now.getFullYear(),
-      month: now.getMonth(),
-      week: null,
-      day: now.getDate(),
-      hour: now.getHours(),
-    };
+    this.service.onInit();
   }
 }
diff --git a/frontend/src/app/status/status/system-status-page.service.ts b/frontend/src/app/status/status/system-status-page.service.ts
new file mode 100644
index 000000000..cde222260
--- /dev/null
+++ b/frontend/src/app/status/status/system-status-page.service.ts
@@ -0,0 +1,102 @@
+import { computed } from '@angular/core';
+import { signal } from '@angular/core';
+import { inject } from '@angular/core';
+import { Params } from '@angular/router';
+import { PeriodParameters } from '@api/common/status';
+import { SystemStatusPage } from '@api/common/status';
+import { ApiResponse } from '@api/custom';
+import { ApiService } from '@app/services';
+import { RouterService } from '../../shared/services/router.service';
+import { StatusLinks } from './status-links';
+
+export class SystemStatusPageService {
+  private readonly apiService = inject(ApiService);
+  private readonly routerService = inject(RouterService);
+
+  private readonly _response = signal<ApiResponse<SystemStatusPage>>(null);
+  readonly response = this._response.asReadonly();
+  readonly page = computed(() => this.response()?.result);
+  readonly statusLinks = computed(() => new StatusLinks(this.page().timestamp, '/status/system'));
+  xAxisLabel: string;
+
+  onInit(): void {
+    const parameters = this.toPeriodParameters(this.routerService.params());
+    if (parameters.period === 'year') {
+      this.xAxisLabel = 'weeks';
+    } else if (parameters.period === 'month') {
+      this.xAxisLabel = 'days';
+    } else if (parameters.period === 'week') {
+      this.xAxisLabel = 'days';
+    } else if (parameters.period === 'day') {
+      this.xAxisLabel = 'hours';
+    } else if (parameters.period === 'hour') {
+      this.xAxisLabel = 'minutes';
+    }
+
+    this.apiService.systemStatus(parameters).subscribe((response) => this._response.set(response));
+  }
+
+  private toPeriodParameters(params: Params): PeriodParameters {
+    const period = params['period'];
+    if ('year' === period) {
+      return {
+        period: 'year',
+        year: +params['year'],
+        month: null,
+        week: null,
+        day: null,
+        hour: null,
+      };
+    }
+    if ('month' === period) {
+      return {
+        period: 'month',
+        year: +params['year'],
+        month: +params['monthOrWeek'],
+        week: null,
+        day: null,
+        hour: null,
+      };
+    }
+    if ('week' === period) {
+      return {
+        period: 'week',
+        year: +params['year'],
+        month: null,
+        week: +params['monthOrWeek'],
+        day: null,
+        hour: null,
+      };
+    }
+    if ('day' === period) {
+      return {
+        period: 'day',
+        year: +params['year'],
+        month: +params['month'],
+        week: null,
+        day: +params['day'],
+        hour: null,
+      };
+    }
+    if ('hour' === period) {
+      return {
+        period: 'hour',
+        year: +params['year'],
+        month: +params['month'],
+        week: null,
+        day: +params['day'],
+        hour: +params['hour'],
+      };
+    }
+
+    const now = new Date();
+    return {
+      period: 'hour',
+      year: now.getFullYear(),
+      month: now.getMonth(),
+      week: null,
+      day: now.getDate(),
+      hour: now.getHours(),
+    };
+  }
+}
\ No newline at end of file