diff --git a/.vscode/settings.json b/.vscode/settings.json
index b145dea..3812503 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
   "window.title": "Data Portal - ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}",
   "cSpell.words": ["devcontainer", "devkit", "metldata", "TOTP", "ghga"],
+  "cSpell.language": "en-GB",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "[html]": {
diff --git a/src/app/portal/features/site-footer/site-footer.component.html b/src/app/portal/features/site-footer/site-footer.component.html
index 3ef1aed..5104a41 100644
--- a/src/app/portal/features/site-footer/site-footer.component.html
+++ b/src/app/portal/features/site-footer/site-footer.component.html
@@ -2,16 +2,18 @@
   <div class="pt-px-5 flex flex-wrap justify-around pb-5 no-underline">
     <a routerLink="/" class="mx-12 content-center text-center"
       ><img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="max-h-24" /></a
-    ><a href="https://ghga.de" class="mx-12 grow content-center text-center"
+    ><a href="https://ghga.de" class="mx-12 mt-4 grow content-start text-center"
       ><span><mat-icon inline="true">globe</mat-icon></span
       >GHGA Website</a
-    ><a routerLink="/browse" class="mx-12 grow content-center text-center"
+    ><a routerLink="/browse" class="mx-12 mt-4 grow content-start text-center"
       ><span><mat-icon inline="true">database</mat-icon></span
       >Browse Data</a
-    ><a href="https://docs.ghga.de/faq/" class="mx-12 grow content-center text-center"
+    ><a
+      href="https://docs.ghga.de/faq/"
+      class="mx-12 mt-4 grow content-start text-center"
       ><span><mat-icon inline="true">help</mat-icon></span
       >FAQ</a
-    ><a href="https://docs.ghga.de/" class="mx-12 grow content-center text-center"
+    ><a href="https://docs.ghga.de/" class="mx-12 mt-4 grow content-start text-center"
       ><span><mat-icon inline="true">docs</mat-icon></span
       >GHGA User<br />Documentaton</a
     >
diff --git a/src/app/portal/features/site-header/site-header.component.scss b/src/app/portal/features/site-header/site-header.component.scss
index 0f7bdcf..b28a31e 100644
--- a/src/app/portal/features/site-header/site-header.component.scss
+++ b/src/app/portal/features/site-header/site-header.component.scss
@@ -18,7 +18,7 @@ a {
 }
 
 a#activePage {
-  background-color: var(--mat-sys-secondary);
+  background-color: var(--mat-sys-tertiary);
 }
 
 button {
diff --git a/src/assets/scss/ghga_colors.scss b/src/assets/scss/ghga_colors.scss
deleted file mode 100644
index 5d3e48f..0000000
--- a/src/assets/scss/ghga_colors.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-// This file was generated by running 'ng generate @angular/material:theme-color'.
-// Proceed with caution if making changes to this file.
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-// Note: Color palettes are generated from primary: #00393f, secondary: #e84614, tertiary: #cfe7cd, neutral: #005a5a
-$_palettes: (
-  primary: (
-    0: #000000,
-    10: #001f23,
-    20: #00363c,
-    25: #0e4248,
-    30: #1d4d53,
-    35: #2a595f,
-    40: #37656c,
-    50: #517e85,
-    60: #6a989f,
-    70: #85b3ba,
-    80: #a0cfd6,
-    90: #bbebf2,
-    95: #cdf8ff,
-    98: #ecfcff,
-    99: #f5feff,
-    100: #ffffff,
-  ),
-  secondary: (
-    0: #000000,
-    10: #3b0900,
-    20: #601400,
-    25: #741a00,
-    30: #882000,
-    35: #9c2600,
-    40: #b12d00,
-    50: #db3d08,
-    60: #ff5625,
-    70: #ff8b6b,
-    80: #ffb5a1,
-    90: #ffdbd1,
-    95: #ffede8,
-    98: #fff8f6,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  tertiary: (
-    0: #000000,
-    10: #0c2010,
-    20: #213523,
-    25: #2c402e,
-    30: #374c39,
-    35: #435844,
-    40: #4e644f,
-    50: #677d67,
-    60: #809780,
-    70: #9ab199,
-    80: #b5cdb4,
-    90: #d1e9cf,
-    95: #dff7dd,
-    98: #ebffe8,
-    99: #f6fff2,
-    100: #ffffff,
-  ),
-  neutral: (
-    0: #000000,
-    10: #002020,
-    20: #003737,
-    25: #004343,
-    30: #004f4f,
-    35: #055c5c,
-    40: #1c6868,
-    50: #3b8281,
-    60: #579c9b,
-    70: #72b7b6,
-    80: #8dd3d2,
-    90: #a9efee,
-    95: #b7fdfc,
-    98: #e2fffe,
-    99: #f1fffe,
-    100: #ffffff,
-    4: #001111,
-    6: #001717,
-    12: #002424,
-    17: #003030,
-    22: #003c3c,
-    24: #004141,
-    87: #a0e6e6,
-    92: #aef5f4,
-    94: #b4fbfa,
-    96: #c1fffe,
-  ),
-  neutral-variant: (
-    0: #000000,
-    10: #151d1e,
-    20: #2a3233,
-    25: #353d3e,
-    30: #404849,
-    35: #4c5455,
-    40: #586061,
-    50: #70787a,
-    60: #8a9293,
-    70: #a5adae,
-    80: #c0c8c9,
-    90: #dce4e5,
-    95: #eaf2f3,
-    98: #f3fbfc,
-    99: #f6feff,
-    100: #ffffff,
-  ),
-  error: (
-    0: #000000,
-    10: #410002,
-    20: #690005,
-    25: #7e0007,
-    30: #93000a,
-    35: #a80710,
-    40: #ba1a1a,
-    50: #de3730,
-    60: #ff5449,
-    70: #ff897d,
-    80: #ffb4ab,
-    90: #ffdad6,
-    95: #ffedea,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-);
-
-$_rest: (
-  secondary: map.get($_palettes, secondary),
-  neutral: map.get($_palettes, neutral),
-  neutral-variant: map.get($_palettes,  neutral-variant),
-  error: map.get($_palettes, error),
-);
-
-$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
-$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
-
-@function _high-contrast-value($light, $dark, $theme-type) {
-  @if ($theme-type == light) {
-    @return $light;
-  }
-  @if ($theme-type == dark) {
-    @return $dark;
-  }
-  @if ($theme-type == color-scheme) {
-    @return light-dark(#{$light}, #{$dark});
-  }
-  
-  @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
-}
-
-@mixin high-contrast-overrides($theme-type) {
-  @include mat.theme-overrides((
-    primary: _high-contrast-value(#002226, #caf8ff, $theme-type),
-    on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    primary-container: _high-contrast-value(#00393f, #9ccbd2, $theme-type),
-    on-primary-container: _high-contrast-value(#cbf8ff, #000e10, $theme-type),
-    inverse-primary: _high-contrast-value(#a0cfd6, #1e4e55, $theme-type),
-    primary-fixed: _high-contrast-value(#205056, #bbebf2, $theme-type),
-    primary-fixed-dim: _high-contrast-value(#00393f, #a0cfd6, $theme-type),
-    on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-primary-fixed-variant: _high-contrast-value(#ffffff, #001417, $theme-type),
-    secondary: _high-contrast-value(#591200, #ffece7, $theme-type),
-    on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    secondary-container: _high-contrast-value(#8c2100, #ffaf99, $theme-type),
-    on-secondary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type),
-    secondary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
-    secondary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
-    on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-secondary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
-    tertiary: _high-contrast-value(#0e2212, #def7dc, $theme-type),
-    on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    tertiary-container: _high-contrast-value(#233725, #b1c9b0, $theme-type),
-    on-tertiary-container: _high-contrast-value(#def6dc, #000f03, $theme-type),
-    tertiary-fixed: _high-contrast-value(#3a4e3b, #d1e9cf, $theme-type),
-    tertiary-fixed-dim: _high-contrast-value(#233725, #b5cdb4, $theme-type),
-    on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #031506, $theme-type),
-    background: _high-contrast-value(#e2fffe, #001717, $theme-type),
-    on-background: _high-contrast-value(#002020, #a9efee, $theme-type),
-    surface: _high-contrast-value(#e2fffe, #001717, $theme-type),
-    surface-dim: _high-contrast-value(#7fc5c4, #001717, $theme-type),
-    surface-bright: _high-contrast-value(#e2fffe, #005a5a, $theme-type),
-    surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
-    surface-container: _high-contrast-value(#a9efee, #003737, $theme-type),
-    surface-container-high: _high-contrast-value(#9be1e0, #004343, $theme-type),
-    surface-container-highest: _high-contrast-value(#8dd3d2, #004f4f, $theme-type),
-    on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
-    shadow: _high-contrast-value(#000000, #000000, $theme-type),
-    scrim: _high-contrast-value(#000000, #000000, $theme-type),
-    surface-tint: _high-contrast-value(#37656c, #a0cfd6, $theme-type),
-    inverse-surface: _high-contrast-value(#003737, #a9efee, $theme-type),
-    inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
-    outline: _high-contrast-value(#262d2f, #eaf1f3, $theme-type),
-    outline-variant: _high-contrast-value(#434b4c, #bcc4c5, $theme-type),
-    error: _high-contrast-value(#600004, #ffece9, $theme-type),
-    on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
-    error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type),
-    on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type),
-    surface-variant: _high-contrast-value(#dce4e5, #404849, $theme-type),
-    on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type),
-  ))
- }
diff --git a/src/assets/scss/ghga_colours.scss b/src/assets/scss/ghga_colours.scss
new file mode 100644
index 0000000..0f58e17
--- /dev/null
+++ b/src/assets/scss/ghga_colours.scss
@@ -0,0 +1,206 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Colour palettes are generated from primary: #00393f, secondary: #cfe7cd, tertiary: #e84614, neutral: #005a5a
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001f23,
+    20: #00363c,
+    25: #0e4248,
+    30: #1d4d53,
+    35: #2a595f,
+    40: #37656c,
+    50: #517e85,
+    60: #6a989f,
+    70: #85b3ba,
+    80: #a0cfd6,
+    90: #bbebf2,
+    95: #cdf8ff,
+    98: #ecfcff,
+    99: #f5feff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #0c2010,
+    20: #213523,
+    25: #2c402e,
+    30: #374c39,
+    35: #435844,
+    40: #4e644f,
+    50: #677d67,
+    60: #809780,
+    70: #9ab199,
+    80: #b5cdb4,
+    90: #d1e9cf,
+    95: #dff7dd,
+    98: #ebffe8,
+    99: #f6fff2,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #3b0900,
+    20: #601400,
+    25: #741a00,
+    30: #882000,
+    35: #9c2600,
+    40: #b12d00,
+    50: #db3d08,
+    60: #ff5625,
+    70: #ff8b6b,
+    80: #ffb5a1,
+    90: #ffdbd1,
+    95: #ffede8,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #002020,
+    20: #003737,
+    25: #004343,
+    30: #004f4f,
+    35: #055c5c,
+    40: #1c6868,
+    50: #3b8281,
+    60: #579c9b,
+    70: #72b7b6,
+    80: #8dd3d2,
+    90: #a9efee,
+    95: #b7fdfc,
+    98: #e2fffe,
+    99: #f1fffe,
+    100: #ffffff,
+    4: #001111,
+    6: #001717,
+    12: #002424,
+    17: #003030,
+    22: #003c3c,
+    24: #004141,
+    87: #a0e6e6,
+    92: #aef5f4,
+    94: #b4fbfa,
+    96: #c1fffe,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #151d1e,
+    20: #2a3233,
+    25: #353d3e,
+    30: #404849,
+    35: #4c5455,
+    40: #586061,
+    50: #70787a,
+    60: #8a9293,
+    70: #a5adae,
+    80: #c0c8c9,
+    90: #dce4e5,
+    95: #eaf2f3,
+    98: #f3fbfc,
+    99: #f6feff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
+
+@function _high-contrast-value($light, $dark, $theme-type) {
+  @if ($theme-type == light) {
+    @return $light;
+  }
+  @if ($theme-type == dark) {
+    @return $dark;
+  }
+  @if ($theme-type == color-scheme) {
+    @return light-dark(#{$light}, #{$dark});
+  }
+
+  @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
+}
+
+@mixin high-contrast-overrides($theme-type) {
+  @include mat.theme-overrides(
+    (
+      primary: _high-contrast-value(#002226, #caf8ff, $theme-type),
+      on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      primary-container: _high-contrast-value(#00393f, #9ccbd2, $theme-type),
+      on-primary-container: _high-contrast-value(#cbf8ff, #000e10, $theme-type),
+      inverse-primary: _high-contrast-value(#a0cfd6, #1e4e55, $theme-type),
+      primary-fixed: _high-contrast-value(#205056, #bbebf2, $theme-type),
+      primary-fixed-dim: _high-contrast-value(#00393f, #a0cfd6, $theme-type),
+      on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-primary-fixed-variant: _high-contrast-value(#ffffff, #001417, $theme-type),
+      secondary: _high-contrast-value(#0e2212, #def7dc, $theme-type),
+      on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      secondary-container: _high-contrast-value(#233725, #b1c9b0, $theme-type),
+      on-secondary-container: _high-contrast-value(#def6dc, #000f03, $theme-type),
+      secondary-fixed: _high-contrast-value(#3a4e3b, #d1e9cf, $theme-type),
+      secondary-fixed-dim: _high-contrast-value(#233725, #b5cdb4, $theme-type),
+      on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-secondary-fixed-variant: _high-contrast-value(#ffffff, #031506, $theme-type),
+      tertiary: _high-contrast-value(#591200, #ffece7, $theme-type),
+      on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
+      tertiary-container: _high-contrast-value(#8c2100, #ffaf99, $theme-type),
+      on-tertiary-container: _high-contrast-value(#ffffff, #1e0300, $theme-type),
+      tertiary-fixed: _high-contrast-value(#8c2100, #ffdbd1, $theme-type),
+      tertiary-fixed-dim: _high-contrast-value(#641500, #ffb5a1, $theme-type),
+      on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
+      on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #290400, $theme-type),
+      background: _high-contrast-value(#e2fffe, #001717, $theme-type),
+      on-background: _high-contrast-value(#002020, #a9efee, $theme-type),
+      surface: _high-contrast-value(#e2fffe, #001717, $theme-type),
+      surface-dim: _high-contrast-value(#7fc5c4, #001717, $theme-type),
+      surface-bright: _high-contrast-value(#e2fffe, #005a5a, $theme-type),
+      surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
+      surface-container: _high-contrast-value(#a9efee, #003737, $theme-type),
+      surface-container-high: _high-contrast-value(#9be1e0, #004343, $theme-type),
+      surface-container-highest: _high-contrast-value(#8dd3d2, #004f4f, $theme-type),
+      on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
+      shadow: _high-contrast-value(#000000, #000000, $theme-type),
+      scrim: _high-contrast-value(#000000, #000000, $theme-type),
+      surface-tint: _high-contrast-value(#37656c, #a0cfd6, $theme-type),
+      inverse-surface: _high-contrast-value(#003737, #a9efee, $theme-type),
+      inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
+      outline: _high-contrast-value(#262d2f, #eaf1f3, $theme-type),
+      outline-variant: _high-contrast-value(#434b4c, #bcc4c5, $theme-type),
+      error: _high-contrast-value(#600004, #ffece9, $theme-type),
+      on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
+      error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type),
+      on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type),
+      surface-variant: _high-contrast-value(#dce4e5, #404849, $theme-type),
+      on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type),
+    )
+  );
+}
diff --git a/src/styles.scss b/src/styles.scss
index c0a7cd8..28e3d6e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,7 +2,7 @@
 // For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
 // Plus imports for other components in your app.
-@use './assets/scss/ghga_colors';
+@use './assets/scss/ghga_colours';
 @use './assets/scss/material_symbols';
 @use './assets/scss/fontawesome';
 @use './assets/scss/fontawesome_brands';
@@ -28,14 +28,20 @@
     (
       color: (
         theme-type: light,
-        primary: ghga_colors.$primary-palette,
-        tertiary: ghga_colors.$tertiary-palette,
+        primary: ghga_colours.$primary-palette,
+        tertiary: ghga_colours.$tertiary-palette,
       ),
       typography: Lexend,
     )
   );
 }
 
+:root {
+  --mat-sys-primary: #00393f;
+  --mat-sys-secondary: #cfe7cd;
+  --mat-sys-tertiary: #e84614;
+}
+
 html,
 body {
   height: 100%;