diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index cc15915f..92c5e0c9 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -6,10 +6,11 @@
 	color: var(--color-info);
 	background-color: rgb(27, 42, 56);
 } */
-:root {
+:root, .defaultTheme {
   --color-primary: #0b192e;
   --color-secondary: #182b45;
   --color-tertiary: #0b3341;
+  --color-quaternary: #1c3250;
   --color-accent: #0cc9ab;
 
   --color-black: #202121;
@@ -28,6 +29,52 @@
   --color-info: #177edc;
 }
 
+@layer base {
+  html[data-theme="accessibility"],  .accessibilityTheme{
+    --color-primary: #fff;
+    --color-secondary: #f1f5f9;
+    --color-tertiary: #e2e8f0;
+    --color-quaternary: #cbd5e1;
+    --color-accent: #055E4F; /* 7.04:1 contrast to #f1f5f9 */
+
+    --color-black: #fff;
+    --color-dark: #000;
+    /*--color-transparent: #fff;*/
+    --color-light: lime;
+    --color-white: #000;
+    /* text*/
+    --color-heading: #777;
+    --color-subheading: #333;
+    --color-body: #555;
+    /*
+    --color-error: #ff0000;
+    --color-success: ;
+    --color-info: ;
+    --color-warning: ;
+    */
+    
+
+    * {
+      font-family: "Lexend" !important;
+      /* font-size: clamp(20px, 1em, 100px) !important; */
+      line-height: 1.6 !important;
+      letter-spacing: 2.5px !important;
+    }
+    p,a,label,h1,h2,h3,h4,h5,h6 {
+      color: #000;
+    }
+    /*
+    .text-heading-4, .text-body-1, .text-body-2, .text-subheading, .text-subheading-1, p, a, button  {
+      font-size: 20px !important;
+    }
+    */
+    :focus {
+      outline: none;
+      box-shadow: 0 0 0 5px #FFD700;
+    }
+  }
+}
+
 /* ======================================================= Fonts */
 @font-face {
   font-family: "Ubuntu Mono";
@@ -51,6 +98,14 @@
     U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: "Lexend";
+  src: url(~/public/fonts/Lexend/Lexend-Regular.ttf) format("truetype");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
 /* ======================================================= Transitions */
 .slide-up-enter-active,
 .slide-up-leave-active {
@@ -493,4 +548,4 @@
   [data-tooltip=""]::after {
     display: none !important;
   }
-}
+}
\ No newline at end of file
diff --git a/components/Dialog.vue b/components/Dialog.vue
index 43222f81..570b1004 100644
--- a/components/Dialog.vue
+++ b/components/Dialog.vue
@@ -22,7 +22,7 @@
       </div>
     </div>
 
-    <div class="card flex flex-wrap gap-card justify-end bg-[#1c3250]">
+    <div class="card flex flex-wrap gap-card justify-end bg-[var(--color-quaternary)]">
       <Btn
         v-if="!!secondaryBtn.label"
         :bgColor="theme.bg"
diff --git a/components/Footer.vue b/components/Footer.vue
index a4908278..e5a58c4a 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -3,7 +3,7 @@
 		class="container-fluid bg-tertiary flex flex-col items-center gap-7 pt-8 relative z-0"
 	>
 		<img
-			src="/images/logo-text.png"
+			:src="logoSrc"
 			:alt="t('AltAttributes.BootstrapAcademyLogo')"
 			class="w-40 mb-5 md:mt-2 block lg:hidden object-contain"
 		/>
@@ -59,6 +59,13 @@ import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
+  computed: {
+    logoSrc() {
+      return document.documentElement.getAttribute('data-theme') === 'accessibility'
+        ? '/images/logo-black-text.png'
+        : '/images/logo-text.png';
+    }
+  },
   setup() {
     const { t } = useI18n();
 
@@ -103,6 +110,6 @@ export default defineComponent({
 
 <style scoped>
 footer a {
-	@apply transition-basic font-body text-base text-body;
+  @apply transition-basic font-body text-base text-body;
 }
 </style>
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 68438a67..02325dc8 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -3,7 +3,7 @@
     <!-- START -->
     <NuxtLink to="/" class="hidden lg:flex gap-card-sm items-center">
       <img
-        src="/images/logo-text.png"
+        :src="logoSrc"
         :alt="t('AltAttributes.BootstrapAcademyLogo')"
         class="object-contain lg:w-28 xl:w-36 cursor-pointer"
       />
@@ -41,6 +41,13 @@ export default {
     links: { default: [] },
     authorized: { type: Boolean, default: false },
   },
+  computed: {
+    logoSrc() {
+      return document.documentElement.getAttribute('data-theme') === 'accessibility' 
+        ? '/images/logo-black-text.png' 
+        : '/images/logo-text.png';
+    }
+  },
   setup() {
     const { t } = useI18n();
 
diff --git a/components/NavbarBack.vue b/components/NavbarBack.vue
index f65decad..39817e5b 100644
--- a/components/NavbarBack.vue
+++ b/components/NavbarBack.vue
@@ -3,6 +3,7 @@
     class="container-fluid bg-secondary flex gap-4 items-center justify-between"
   >
     <Btn tertiary :icon="ArrowLeftIcon" @click="onclickNavigate">
+      <!-- TODO change image to logo_black.png in accessibility theme -->
       <img src="/images/logo.png" class="w-6 h-auto object-contain" :alt="t('AltAttributes.BootstrapAcademyLogo')" />
 
       {{ t(backRoute.label) }}
diff --git a/components/ThemeSelector.vue b/components/ThemeSelector.vue
new file mode 100644
index 00000000..efec2fbf
--- /dev/null
+++ b/components/ThemeSelector.vue
@@ -0,0 +1,27 @@
+<template>
+  <section class="inline-block mr-4">
+    <button>
+      <svg xmlns="http://www.w3.org/2000/svg" height="80" viewBox="40 40 220 120">
+        <circle cx="100" cy="100" r="60" fill="var(--color-accent)" />
+        <circle cx="150" cy="100" r="60" fill="var(--color-secondary)" />
+        <circle cx="200" cy="100" r="60" fill="var(--color-primary)" />
+      </svg>
+
+    </button>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
+});
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/components/account/ChangeThemes.vue b/components/account/ChangeThemes.vue
new file mode 100644
index 00000000..aa175568
--- /dev/null
+++ b/components/account/ChangeThemes.vue
@@ -0,0 +1,45 @@
+<template>
+  <article class="bg-secondary card style-card flex flex-col items-center justify-center">
+    <PaintBrushIcon class="h-10 w-10 text-accent mb-4 max-w-xl" />
+
+    <h2 class="text-heading-2">
+      {{ t("Headings.Themes") }}
+    </h2>
+
+    <div class="flex items-center space-x-4 mt-2 mb-8">
+      <CheckCircleIcon class="h-8 w-8 text-accent max-w-xl" />
+
+      <div class="flex flex-col items-center">
+        <p class="text-center">
+          {{ t("Body.AdjustTheDesign") }}
+        </p>
+      </div>
+    </div>
+
+    <NuxtLink to="/account/themes">
+      <Btn>{{ t('Buttons.OpenThemeSettings') }}</Btn>
+    </NuxtLink>
+  </article>
+</template>
+
+<script lang="ts">
+import { CheckCircleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/outline';
+import { PaintBrushIcon } from '@heroicons/vue/24/solid';
+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  components: {
+    CheckCircleIcon,
+    ShieldExclamationIcon,
+    PaintBrushIcon
+  },
+  setup() {
+    const { t } = useI18n();
+
+    return { t };
+  },
+});
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/components/input/Color.vue b/components/input/Color.vue
new file mode 100644
index 00000000..3cb0d84c
--- /dev/null
+++ b/components/input/Color.vue
@@ -0,0 +1,113 @@
+<template>
+	<div class="width">
+		<article class="flex justify-between items-center gap-card">
+			<label for="" class="text-heading-4 text-body font-heading">
+				{{ label }}
+			</label>
+
+			<div class="text-heading-4 text-heading font-heading">
+				{{ prefix }}{{ abbreviateNumber(value) }}
+			</div>
+		</article>
+		<input
+			ref="DOM_INPUT"
+			type="color"
+			v-model="value"
+			@change=""
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+
+export default defineComponent({
+  props: {
+    label: { type: String, default: '' },
+  },
+  emits: ['update:modelValue', 'valid'],
+  setup(props, { emit }) {
+    const DOM_INPUT = ref<HTMLInputElement | null>(null);
+
+    const value = ref(0);
+
+    onMounted(() => {
+      value.value = props.modelValue;
+      setRange(props.modelValue);
+    });
+
+    watch(
+      () => props.modelValue,
+      (newValue, oldValue) => {
+        value.value = newValue;
+      }
+    );
+
+    function setRange(val: string | number) {
+      let value = val;
+
+      if (typeof value == 'string') {
+        value = parseInt(value);
+      }
+
+      let total = props.max - props.min;
+      let filled = value / total;
+      let percent = filled * 100;
+      percent = percent - props.reduce;
+
+      if (!DOM_INPUT.value) return;
+      DOM_INPUT.value.style.background = `linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) ${percent}%, white ${percent}%,  white 100%)`;
+    }
+
+    function emitRange() {
+      emit('update:modelValue', value.value);
+    }
+
+    watch(
+      () => value.value,
+      (newValue, oldValue) => {
+        setRange(newValue);
+      }
+    );
+
+    return { DOM_INPUT, setRange, emitRange, value };
+  },
+});
+</script>
+
+<style scoped>
+/*
+.width {
+	--margin-left: 1.5rem;
+	width: calc(100% - var(--margin-left));
+}
+input[type='color'] {
+	border-radius: 8px;
+	height: 7px;
+	outline: none;
+	transition: background 450ms ease-in;
+	-webkit-appearance: none;
+	border: none;
+}
+input[type='color']::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	background-color: var(--color-accent);
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	border: none;
+	outline: none;
+	cursor: pointer;
+}
+input[type='color']::-moz-range-thumb {
+	-webkit-appearance: none;
+	background-color: var(--color-accent);
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	border: none;
+	outline: none;
+	cursor: pointer;
+}
+*/
+</style>
diff --git a/components/input/Range.vue b/components/input/Range.vue
index 7d591b1b..90435180 100644
--- a/components/input/Range.vue
+++ b/components/input/Range.vue
@@ -64,7 +64,7 @@ export default defineComponent({
       percent = percent - props.reduce;
 
       if (!DOM_INPUT.value) return;
-      DOM_INPUT.value.style.background = `linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) ${percent}%, white ${percent}%,  white 100%)`;
+      DOM_INPUT.value.style.background = `linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) ${percent}%, var(--color-white) ${percent}%,  var(--color-white) 100%)`;
     }
 
     function emitRange() {
@@ -95,6 +95,7 @@ input[type='range'] {
 	transition: background 450ms ease-in;
 	-webkit-appearance: none;
 	border: none;
+	background: var(--color-white);
 }
 input[type='range']::-webkit-slider-thumb {
 	-webkit-appearance: none;
@@ -107,7 +108,7 @@ input[type='range']::-webkit-slider-thumb {
 	cursor: pointer;
 }
 input[type='range']::-moz-range-thumb {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 	background-color: var(--color-accent);
 	width: 20px;
 	height: 20px;
diff --git a/locales/de.json b/locales/de.json
index 40a7cc9d..a73f3ade 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -298,6 +298,10 @@
     "Coachings": "Coachings",
     "Exams": "Prüfungen",
     "Webinars": "Webinare",
+    "Themes": "Themes",
+    "FontSize": "Schriftgröße",
+    "BackgroundColor": "Hintergrundfarbe",
+    "TextColor": "Textfarbe",
     "DisableMFA": "MFA deaktivieren",
     "EnableMFA": "MFA aktivieren",
     "TOTPSecret": "TOTP-Secret",
@@ -510,7 +514,8 @@
     "IncreasedSecurity": "Erhöhte Sicherheit",
     "NoMoreIncreaseSecurity": "Keine erhöhte Sicherheit mehr",
     "ExcitingUpdates": "spannende Neuigkeiten und Updates",
-    "NoMoreExcitingUpdates": "keine spannende Neuigkeiten und Updates mehr"
+    "NoMoreExcitingUpdates": "keine spannende Neuigkeiten und Updates mehr",
+    "AdjustTheDesign": "Passe das Design an"
   },
   "AltAttributes": {
     "BootstrapAcademyLogo": "Bootstrap Academy Logo",
@@ -858,6 +863,7 @@
     "ViewCertificate": "Zertifikat ansehen",
     "Logout": "Ausloggen",
     "DeleteAccount": "Ja, Konto löschen",
+    "OpenThemeSettings": "Theme Einstellungen öffnen",
     "Cancel": "Abbrechen",
     "UploadCertificates": "Zertifikat hochladen",
     "DisableMFA": "MFA Deaktivieren",
diff --git a/locales/en-US.json b/locales/en-US.json
index 6f7c9767..fc11ea9c 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -297,6 +297,10 @@
     "Coachings": "Coachings",
     "Exams": "Exams",
     "Webinars": "Webinars",
+    "Themes": "Themes",
+    "FontSize": "Font size",
+    "BackgroundColor": "Background color",
+    "TextColor": "Text color",
     "DisableMFA": "Disable MFA",
     "EnableMFA": "Enable MFA",
     "TOTPSecret": "TOTP Secret",
@@ -508,7 +512,8 @@
     "IncreasedSecurity": "Increased security",
     "NoMoreIncreaseSecurity": "No more increased security",
     "ExcitingUpdates": "Exciting news and updates",
-    "NoMoreExcitingUpdates": "No more exciting news and updates"
+    "NoMoreExcitingUpdates": "No more exciting news and updates",
+    "AdjustTheDesign": "Adjust the design"
   },
   "AltAttributes": {
     "BootstrapAcademyLogo": "Bootstrap Academy logo",
@@ -860,6 +865,7 @@
     "ViewCertificate": "View Certificate",
     "Logout": "Logout",
     "DeleteAccount": "Yes, Delete Account",
+    "OpenThemeSettings": "Open Theme Settings",
     "Cancel": "Cancel",
     "UploadCertificates": "Upload Certificates",
     "DisableMFA": "Disable MFA",
diff --git a/pages/account/index.vue b/pages/account/index.vue
index 6e633cd2..7c5a48bf 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -25,11 +25,14 @@
     <AccountVerifyEmail />
     <div class="md:flex justify-between md:space-x-12 max-md:space-y-6">
       <AccountNewsletter class="md:w-1/2" />
+      <AccountChangeThemes class="md:w-1/2" />
+    </div>
+    <div class="md:flex justify-between md:space-x-12 max-md:space-y-6">
       <AccountMFA class="md:w-1/2" />
+      <AccountChangePassword class="md:w-1/2" />
     </div>
     <div class="md:flex justify-between md:space-x-12 max-md:space-y-6 mb-16">
-      <AccountChangePassword class="md:w-1/2" />
-      <AccountDelete class="md:w-1/2" />
+      <AccountDelete class="md:w-1/2 mx-auto"/>
     </div>
   </main>
 </template>
diff --git a/pages/account/themes.vue b/pages/account/themes.vue
new file mode 100644
index 00000000..06c3fe6d
--- /dev/null
+++ b/pages/account/themes.vue
@@ -0,0 +1,82 @@
+<!--
+❌ Responsive UI
+❌ Page Title
+❌ Translation
+❌ Animation
+❌ middleware
+
+❌ Tested on chrome
+❌ Tested on firefox
+❌ Tested on safari
+❌ Tested on android mobile
+❌ Tested on apple mobile
+
+❌ Api implemented
+❌ Form Submission Process
+❌ Form Post Api Error Handling + ❌ Translation
+❌ Form Post Api Success Handling + ❌ Translation
+-->
+
+<template>
+  <section class="container-fluid pt-container pb-container h-screen-inner min grid place-items-center">
+    <Transition mode="out-in" name="slide-up-down">
+      <section class="container-form">
+        <SectionTitle heading="Headings.Themes" />
+        <ThemeSelector class="defaultTheme" onclick="document.documentElement.setAttribute('data-theme', '')" />
+        <ThemeSelector class="accessibilityTheme"
+          onclick="document.documentElement.setAttribute('data-theme', 'accessibility')" />
+        <InputRange :min="0" :max="100" :modelValue="50" :label="t('Headings.FontSize')" suffix="px" :reduce="0" />
+        <InputColor :label="t('Headings.BackgroundColor')" />
+        <InputColor :label="t('Headings.TextColor')" />
+      </section>
+    </Transition>
+  </section>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+
+definePageMeta({
+  layout: 'inner',
+  middleware: ['auth'],
+});
+
+export default {
+  head: {
+    title: 'Cofigure themes',
+  },
+  setup() {
+    const { t } = useI18n();
+    const form: any = reactive({
+      salary_min: {
+        min: 0,
+        max: 10000,
+        value: "props.filters?.salary_min ?? 0",
+      }
+    })
+    const router = useRouter();
+    const dialog = <any>reactive({});
+    onMounted(async () => {
+      Object.assign(dialog, {
+        primaryBtn: {
+          label: "Headings.Themes",
+          onclick: () => {
+            router.push("/account");
+          },
+        },
+        secondaryBtn: null,
+      });
+    });
+
+    const config = useRuntimeConfig().public;
+    const accountLink = computed(() => {
+
+      return `${config.BASE_WEB_URL}/account`;
+    });
+
+    return { t, accountLink };
+  },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/pages/docs/privacy.vue b/pages/docs/privacy.vue
index f8b3046c..0a00e00e 100644
--- a/pages/docs/privacy.vue
+++ b/pages/docs/privacy.vue
@@ -1091,7 +1091,7 @@ table td {
 table,
 th,
 td {
-	border: 1px solid white;
+	border: 1px solid var(--color-white);
 }
 
 td a {
diff --git a/public/fonts/Lexend/Lexend-Bold.ttf b/public/fonts/Lexend/Lexend-Bold.ttf
new file mode 100644
index 00000000..09511dbf
Binary files /dev/null and b/public/fonts/Lexend/Lexend-Bold.ttf differ
diff --git a/public/fonts/Lexend/Lexend-Regular.ttf b/public/fonts/Lexend/Lexend-Regular.ttf
new file mode 100644
index 00000000..eb69863c
Binary files /dev/null and b/public/fonts/Lexend/Lexend-Regular.ttf differ
diff --git a/public/fonts/Lexend/OFL.txt b/public/fonts/Lexend/OFL.txt
new file mode 100644
index 00000000..ff8b4a40
--- /dev/null
+++ b/public/fonts/Lexend/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2018 The Lexend Project Authors (https://github.com/googlefonts/lexend), with Reserved Font Name “RevReading Lexend”.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/images/logo-black-text.png b/public/images/logo-black-text.png
new file mode 100644
index 00000000..86c92f61
Binary files /dev/null and b/public/images/logo-black-text.png differ
diff --git a/public/images/logo_black.png b/public/images/logo_black.png
new file mode 100644
index 00000000..4ceb0347
Binary files /dev/null and b/public/images/logo_black.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 2747d969..da757382 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,6 +25,7 @@ module.exports = {
       primary: 'var(--color-primary)',
       secondary: 'var(--color-secondary)',
       tertiary: 'var(--color-tertiary)',
+      quaternary: 'var(--color-quaternary)',
       accent: 'var(--color-accent)',
 
       black: 'var(--color-black)',