diff --git a/frontend/src/app/routes/settings/syspref/settings-syspref.component.html b/frontend/src/app/routes/settings/syspref/settings-syspref.component.html
index 9c6f9e1..21025d1 100644
--- a/frontend/src/app/routes/settings/syspref/settings-syspref.component.html
+++ b/frontend/src/app/routes/settings/syspref/settings-syspref.component.html
@@ -1,7 +1,5 @@
 <h1>System Settings</h1>
 
-<ng-container *ngIf="render">
-  <ng-container *ngFor="let pref of preferences">
-    <syspref-option [pref]="pref"></syspref-option>
-  </ng-container>
+<ng-container *ngFor="let pref of preferences | async">
+  <syspref-option [pref]="pref"></syspref-option>
 </ng-container>
diff --git a/frontend/src/app/routes/settings/syspref/settings-syspref.component.ts b/frontend/src/app/routes/settings/syspref/settings-syspref.component.ts
index 90724ed..4ac3e70 100644
--- a/frontend/src/app/routes/settings/syspref/settings-syspref.component.ts
+++ b/frontend/src/app/routes/settings/syspref/settings-syspref.component.ts
@@ -1,67 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { Component } from '@angular/core';
 import { SysPreferenceBaseResponse } from 'picsur-shared/dist/dto/api/pref.dto';
-import { HasFailed } from 'picsur-shared/dist/types';
-import { SnackBarType } from "src/app/models/dto/snack-bar-type.dto";
+import { Subject } from 'rxjs';
 import { SysprefService as SysPrefService } from 'src/app/services/api/syspref.service';
-import { UtilService } from 'src/app/util/util.service';
 
 @Component({
   templateUrl: './settings-syspref.component.html',
 })
-export class SettingsSysprefComponent implements OnInit {
-  render = true;
-  preferences: SysPreferenceBaseResponse[] = [];
+export class SettingsSysprefComponent {
+  preferences: Subject<SysPreferenceBaseResponse[]>;
 
-  constructor(
-    private sysprefService: SysPrefService,
-    private utilService: UtilService
-  ) {}
-
-  async ngOnInit() {
-    this.subscribePreferences();
-    const success = await this.sysprefService.getPreferences();
-    if (HasFailed(success)) {
-      this.utilService.showSnackBar(
-        'Failed to load preferences',
-        SnackBarType.Error
-      );
-    }
-  }
-
-  @AutoUnsubscribe()
-  private subscribePreferences() {
-    return this.sysprefService.live.subscribe((preferences) => {
-      // If the preferences are the same, something probably went wrong, so reset
-      if (this.compareFlatObjectArray(this.preferences, preferences)) {
-        this.render = false;
-        setTimeout(() => {
-          this.render = true;
-        });
-      }
-
-      this.preferences = preferences;
-    });
-  }
-
-  private compareFlatObjectArray(a: any[], b: any[]): boolean {
-    if (a.length !== b.length) {
-      return false;
-    }
-    for (let i = 0; i < a.length; i++) {
-      if (!this.compareFlatObject(a[i], b[i])) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private compareFlatObject(a: any, b: any): boolean {
-    for (const key in a) {
-      if (a.hasOwnProperty(key) && a[key] !== b[key]) {
-        return false;
-      }
-    }
-    return true;
+  constructor(sysprefService: SysPrefService) {
+    this.preferences = sysprefService.live;
   }
 }
diff --git a/frontend/src/app/services/api/syspref.service.ts b/frontend/src/app/services/api/syspref.service.ts
index cf890b0..59c4be5 100644
--- a/frontend/src/app/services/api/syspref.service.ts
+++ b/frontend/src/app/services/api/syspref.service.ts
@@ -11,10 +11,11 @@ import { Permission } from 'picsur-shared/dist/dto/permissions.dto';
 import { SysPrefValueType } from 'picsur-shared/dist/dto/syspreferences.dto';
 import { AsyncFailable, Fail, HasFailed } from 'picsur-shared/dist/types';
 import { BehaviorSubject } from 'rxjs';
+import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
+import { UtilService } from 'src/app/util/util.service';
 import { ApiService } from './api.service';
 import { PermissionService } from './permission.service';
 
-
 @Injectable({
   providedIn: 'root',
 })
@@ -35,9 +36,22 @@ export class SysprefService {
 
   constructor(
     private api: ApiService,
-    private permissionsService: PermissionService
+    private permissionsService: PermissionService,
+    private utilService: UtilService
   ) {
-    this.onPermissions();
+    this.subscribePermissions();
+    this.init().catch(console.error);
+  }
+
+  private async init() {
+    const result = await this.getPreferences();
+    if (HasFailed(result)) {
+      this.utilService.showSnackBar(
+        "Couldn't load system preferences",
+        SnackBarType.Error
+      );
+      this.flush();
+    }
   }
 
   public async getPreferences(): AsyncFailable<SysPreferenceBaseResponse[]> {
@@ -58,7 +72,7 @@ export class SysprefService {
   }
 
   public async getPreference(
-    key: string,
+    key: string
   ): AsyncFailable<GetSyspreferenceResponse> {
     if (!this.hasPermission)
       return Fail('You do not have permission to edit system preferences');
@@ -123,7 +137,7 @@ export class SysprefService {
   }
 
   @AutoUnsubscribe()
-  private onPermissions() {
+  private subscribePermissions() {
     return this.permissionsService.live.subscribe((permissions) => {
       this.hasPermission = permissions.includes(Permission.SysPrefManage);
       if (!this.hasPermission) {