diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts
index fae4efce..aadd8006 100644
--- a/src/app/app-config.service.ts
+++ b/src/app/app-config.service.ts
@@ -17,6 +17,7 @@ export interface AppConfig {
   scicatBaseUrl: string;
   showLogoBanner: boolean;
   logoBanner: string | null;
+  logoWidth: string;
   retrieveToEmail: RetrieveDestinations | undefined;
 }
 
@@ -48,6 +49,8 @@ export class AppConfigService {
         this.appConfig = environment;
       }
     }
+    // Use old default if not provided
+    this.appConfig.logoWidth = this.appConfig.logoWidth ?? "412";
   }
 
   getConfig(): AppConfig {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6aa50053..16a4085a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -8,5 +8,5 @@
 <router-outlet></router-outlet>
 
 <mat-toolbar class="footer" *ngIf="config.showLogoBanner">
-  <img src="../assets/{{ config.logoBanner }}" width="412" alt="logo_banner" />
+  <img src="../assets/{{ config.logoBanner }}" width="{{ config.logoWidth }}" alt="logo_banner" />
 </mat-toolbar>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b408d84d..24116728 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -9,6 +9,7 @@
 .footer {
   height: 77px;
   justify-content: center;
+  background-color: var(--theme-primary-default-contrast);
 }
 
 .spacer {