diff --git a/ui/src/app/app.brand.ts b/ui/src/app/app.brand.ts
new file mode 100644
index 000000000..a17c34cc0
--- /dev/null
+++ b/ui/src/app/app.brand.ts
@@ -0,0 +1,44 @@
+import { brand as customBrand } from '../brand';
+import { Brand } from './core/model/brand';
+
+export const brand: Brand = {
+    header: {
+        title: 'Source Management'
+    },
+    logo: {
+        default: '/assets/shibboleth_logowordmark_color.png',
+        small: '/assets/shibboleth_icon_color_130x130.png',
+        large: '/assets/shibboleth_logowordmark_color.png',
+        alt: 'Shibboleth Logo - Click to be directed to www.shibboleth.net',
+        link: {
+            label: 'Shibboleth',
+            url: 'https://www.shibboleth.net/'
+        }
+    },
+    footer: {
+        links: [
+            {
+                label: 'Home Page',
+                url: 'https://www.shibboleth.net/',
+                description: 'Shibboleth.net open-source community home page'
+            },
+            {
+                label: 'Wiki',
+                url: 'https://wiki.shibboleth.net/',
+                description: 'Shibboleth.net open-source community wiki'
+            },
+            {
+                label: 'Issue Tracker',
+                url: 'https://issues.shibboleth.net/',
+                description: 'Shibboleth.net open-source community issue tracker'
+            },
+            {
+                label: 'Mailing List',
+                url: 'https://www.shibboleth.net/community/lists/',
+                description: 'Shibboleth.net open-source community mailing list'
+            }
+        ],
+        text: 'Links to Shibboleth resources:'
+    },
+    ...customBrand
+};
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 17b5742e3..694a691ab 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -1,10 +1,10 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <nav class="navbar navbar-expand-md fixed-top">
-    <a class="navbar-brand" href="https://www.shibboleth.net/" target="_blank">
-        <img src="/assets/shibboleth_icon_color_130x130.png" width="30" height="30" class="d-inline-block align-top" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net">
-        <span class="d-lg-inline d-none">Shibboleth</span>
+    <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description">
+        <img [src]="brand.logo.small" width="30" height="30" class="d-inline-block align-top" [alt]="brand.logo.alt">
+        <span class="d-lg-inline d-none">{{ brand.logo.link.label }}</span>
     </a>
-    <span class="navbar-text" i18n="@@label--app">Source Management</span>
+    <span class="navbar-text" i18n="@@label--app">{{ brand.header.title }}</span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
             aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -66,11 +66,12 @@
     <div class="row">
         <div class="col-md-8 copyright">
             <ul class="list-inline">
-                <li class="list-inline-item" i18n="@@link--links-to-shibboleth-resources">Links to Shibboleth resources:</li>
-                <li class="list-inline-item"><a href="https://www.shibboleth.net/" target="_blank" i18n="@@link--home-page" aria-label="Shibboleth.net open-source community home page">Home Page</a></li>
-                <li class="list-inline-item"><a href="https://wiki.shibboleth.net/" target="_blank" i18n="@@link--wiki" aria-label="Shibboleth.net open-source community wiki">Wiki</a></li>
-                <li class="list-inline-item"><a href="https://issues.shibboleth.net/" target="_blank" i18n="@@link--issue-tracker" aria-label="Shibboleth.net open-source community issue tracker">Issue Tracker</a></li>
-                <li class="list-inline-item"><a href="https://www.shibboleth.net/community/lists/" target="_blank" i18n="@@link--mailing-list" aria-label="Shibboleth.net open-source community mailing list">Mailing List</a></li>
+                <li class="list-inline-item">{{ brand.footer.text }}</li>
+                <li class="list-inline-item" *ngFor="let link of brand.footer.links">
+                    <a [href]="link.url" target="_blank" [attr.aria-label]="link.description" [title]="link.description">
+                        {{ link.label }}
+                    </a>
+                </li>
             </ul>
             <p>
                 <ng-container *ngIf="version$ | async">
@@ -81,7 +82,9 @@
             </p>
         </div>
         <div class="col-md-4 logo">
-            <a href="https://www.shibboleth.net/" target="_blank"><img src="/assets/shibboleth_logowordmark_color.png" class="img-fluid float-right" alt="Shibboleth Logo - Click to be directed to www.shibboleth.net"></a>
+            <a [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.label">
+                <img [src]="brand.logo.default" class="img-fluid float-right" [alt]="brand.logo.alt">
+            </a>
         </div>
     </div>
 </footer>
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index f3e44f399..8f011a533 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -7,6 +7,9 @@ import { Store } from '@ngrx/store';
 import * as fromRoot from './core/reducer';
 import { VersionInfo } from './core/model/version';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
+
+import { brand } from './app.brand';
+import { Brand } from './core/model/brand';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -18,6 +21,9 @@ export class AppComponent implements OnInit {
     version: string;
     formatted$: Observable<string>;
     today = new Date();
+    year = new Date().getFullYear();
+
+    brand: Brand = brand;
 
     formatter = v => v && v.build ? `${v.build.version}-${v.git.commit.id}` : '';
 
diff --git a/ui/src/app/core/model/brand.ts b/ui/src/app/core/model/brand.ts
new file mode 100644
index 000000000..2713957e3
--- /dev/null
+++ b/ui/src/app/core/model/brand.ts
@@ -0,0 +1,29 @@
+export interface Brand {
+    logo: Logo;
+    footer: Footer;
+    header: Header;
+}
+
+export interface Header {
+    title: string;
+}
+
+export interface Logo {
+    default: string;
+    small: string;
+    large: string;
+    alt: string;
+    link: Link;
+    [propName: string]: any;
+}
+
+export interface Footer {
+    links: Link[];
+    text: string;
+}
+
+export interface Link {
+    label: string;
+    url: string;
+    description?: string;
+}
diff --git a/ui/src/app/shared/pipe/replace.pipe.ts b/ui/src/app/shared/pipe/replace.pipe.ts
new file mode 100644
index 000000000..16fd97ce3
--- /dev/null
+++ b/ui/src/app/shared/pipe/replace.pipe.ts
@@ -0,0 +1,10 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({ name: 'replace' })
+export class ReplacePipe implements PipeTransform {
+    constructor(public sanitizer: DomSanitizer) { }
+    transform(value: string, query: { [propName: string]: string }): SafeHtml {
+        return '';
+    }
+}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index 1c148a5ea..db0bdb213 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -11,6 +11,7 @@ import { InfoLabelDirective } from './directive/info-label.directive';
 import { PrettyXml } from './pipe/pretty-xml.pipe';
 import { ToggleSwitchComponent } from './switch/switch.component';
 import { ContenteditableDirective } from './contenteditable/contenteditable.directive';
+import { ReplacePipe } from './pipe/replace.pipe';
 
 @NgModule({
     imports: [
@@ -28,6 +29,7 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
         ValidFormIconComponent,
         InfoLabelDirective,
         PrettyXml,
+        ReplacePipe,
         ContenteditableDirective
     ],
     exports: [
@@ -42,7 +44,8 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
         ValidFormIconComponent,
         ValidationClassDirective,
         InfoLabelDirective,
-        ContenteditableDirective
+        ContenteditableDirective,
+        ReplacePipe
     ]
 })
 export class SharedModule { }
diff --git a/ui/src/brand.scss b/ui/src/brand.scss
new file mode 100644
index 000000000..874fb4337
--- /dev/null
+++ b/ui/src/brand.scss
@@ -0,0 +1,31 @@
+//
+// Color system
+// Override these colors by uncommenting them and changing the value.
+//
+
+// $white:  #FFF;
+// $gray-100: #f8f9fa;
+// $gray-200: #e9ecef;
+// $gray-300: #dee2e6;
+// $gray-400: #ced4da;
+// $gray-500: #adb5bd;
+// $gray-600: #868e96;
+// $gray-700: #495057;
+// $gray-800: #343a40;
+// $gray-900: #212529;
+// $black:  #000;
+
+// $blue:    #00355f;
+// $light-blue: #007db1;
+// $indigo:  #6610f2;
+// $purple:  #6f42c1;
+// $pink:    #e83e8c;
+// $red:     #d3190f;
+// $orange:  #fd7e14;
+// $yellow:  #ffc107;
+// $green:   #498500;
+// $teal:    #20c997;
+// $cyan:    #17a2b8;
+
+// $dark-grey: #666666;
+// $light-grey: #EEEEEE;
diff --git a/ui/src/brand.ts b/ui/src/brand.ts
new file mode 100644
index 000000000..2ceffe5af
--- /dev/null
+++ b/ui/src/brand.ts
@@ -0,0 +1,21 @@
+/*
+export const brand = {
+    logo: {
+        default: '',
+        small: '',
+        large: ''
+    },
+    footer: {
+        links: [
+            {
+                label: '',
+                url: ''
+            }
+        ],
+        text: '',
+        copyright: ''
+    }
+};
+*/
+
+export const brand = {};
diff --git a/ui/src/theme/_palette.scss b/ui/src/theme/_palette.scss
index 4a8adb95a..640b15603 100644
--- a/ui/src/theme/_palette.scss
+++ b/ui/src/theme/_palette.scss
@@ -14,18 +14,6 @@ $gray-800: #343a40;
 $gray-900: #212529;
 $black:  #000;
 
-$grays: (
-  100: $gray-100,
-  200: $gray-200,
-  300: $gray-300,
-  400: $gray-400,
-  500: $gray-500,
-  600: $gray-600,
-  700: $gray-700,
-  800: $gray-800,
-  900: $gray-900
-);
-
 $blue:    #00355f;
 $light-blue: #007db1;
 $indigo:  #6610f2;
@@ -41,6 +29,20 @@ $cyan:    #17a2b8;
 $dark-grey: #666666;
 $light-grey: #EEEEEE;
 
+@import "../brand";
+
+$grays: (
+  100: $gray-100,
+  200: $gray-200,
+  300: $gray-300,
+  400: $gray-400,
+  500: $gray-500,
+  600: $gray-600,
+  700: $gray-700,
+  800: $gray-800,
+  900: $gray-900
+);
+
 $colors: (
   blue: $blue,
   indigo: $indigo,