diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index 69100e308b6..1a1710c7fe8 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand navbar-dark bg-primary">
+<nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
     <div class="container">
         <a class="navbar-brand" routerLink="/">
             <i class="fa fa-shield"></i>
diff --git a/src/app/layouts/navbar.component.ts b/src/app/layouts/navbar.component.ts
index 49abf0bc2d8..dd24955d1ab 100644
--- a/src/app/layouts/navbar.component.ts
+++ b/src/app/layouts/navbar.component.ts
@@ -3,13 +3,18 @@ import {
 } from '@angular/core';
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 @Component({
     selector: 'app-navbar',
     templateUrl: 'navbar.component.html',
 })
 export class NavbarComponent {
-    constructor(private messagingService: MessagingService) { }
+    selfHosted = false;
+
+    constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService) {
+        this.selfHosted = this.platformUtilsService.isSelfHost();
+    }
 
     lock() {
         this.messagingService.send('lockVault');