diff --git a/webui/src/app/settings-page/settings-page.component.html b/webui/src/app/settings-page/settings-page.component.html
index f22230474..34683a40f 100644
--- a/webui/src/app/settings-page/settings-page.component.html
+++ b/webui/src/app/settings-page/settings-page.component.html
@@ -98,7 +98,8 @@
         <span *ngIf="settingsForm.invalid" class="p-error ml-3"> There are issues in the form values. </span>
     </ng-container>
     <ng-container *ngSwitchCase="'fail'">
-        <button pButton type="button" label="Retry" id="retry-button" (click)="retry()" class="mt-2 ml-1"></button>
+        <div class="text-lg">Fetching current settings from the server failed. Click the button to retry.</div>
+        <button pButton type="button" label="Retry" id="retry-button" (click)="retry()" class="mt-4"></button>
     </ng-container>
     <ng-container *ngSwitchDefault>
         <p-progressSpinner></p-progressSpinner>
diff --git a/webui/src/app/settings-page/settings-page.component.spec.ts b/webui/src/app/settings-page/settings-page.component.spec.ts
index aeb3703d1..bf4d43766 100644
--- a/webui/src/app/settings-page/settings-page.component.spec.ts
+++ b/webui/src/app/settings-page/settings-page.component.spec.ts
@@ -6,9 +6,7 @@ import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform
 import { FieldsetModule } from 'primeng/fieldset'
 import { MessageService } from 'primeng/api'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-
 import { MessagesModule } from 'primeng/messages'
-
 import { SettingsPageComponent } from './settings-page.component'
 import { SettingsService } from '../backend/api/api'
 import { BreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component'
@@ -130,6 +128,9 @@ describe('SettingsPageComponent', () => {
         fixture.detectChanges()
 
         expect(messageService.add).toHaveBeenCalledTimes(2)
+        expect(fixture.debugElement.nativeElement.innerText).toContain(
+            'Fetching current settings from the server failed.'
+        )
     }))
 
     it('should submit the form', fakeAsync(() => {
diff --git a/webui/src/app/settings-page/settings-page.component.ts b/webui/src/app/settings-page/settings-page.component.ts
index 5f0d110b5..ac9c2e2c8 100644
--- a/webui/src/app/settings-page/settings-page.component.ts
+++ b/webui/src/app/settings-page/settings-page.component.ts
@@ -217,6 +217,6 @@ export class SettingsPageComponent implements OnInit {
      * @returns A boolean value indicating if the control has the error.
      */
     hasError(name: string, errType: string): boolean {
-        return this.settingsForm.get(name)?.hasError(errType)
+        return !!this.settingsForm.get(name)?.hasError(errType)
     }
 }