diff --git a/src/lib/components/features/calendar-month-select.svelte b/src/lib/components/features/calendar-month-select.svelte
index dddfc2f..4c17f55 100644
--- a/src/lib/components/features/calendar-month-select.svelte
+++ b/src/lib/components/features/calendar-month-select.svelte
@@ -25,7 +25,7 @@
   <select
     id="month-select"
     bind:value={selectedMonth}
-    class="inline-block border-2 border-white rounded-lg bg-secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-fristenkalender_secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each months as month}
       <option value={month.value}>{month.label}</option>
diff --git a/src/lib/components/features/calendar-table.svelte b/src/lib/components/features/calendar-table.svelte
index 20a9da8..a582e15 100644
--- a/src/lib/components/features/calendar-table.svelte
+++ b/src/lib/components/features/calendar-table.svelte
@@ -117,7 +117,7 @@
   {#if isLoading}
     <div class="flex flex-1 items-center justify-center">
       <div>
-        <IconSpinner size={80} fillColor="fill-tint" />
+        <IconSpinner size={80} fillColor="fill-white" />
       </div>
     </div>
   {:else if entries.length === 0}
@@ -130,17 +130,17 @@
         <thead class="text-sm bg-white uppercase sticky top-0 z-10">
           <tr class="text-black/50">
             <th
-              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-secondary"
+              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-fristenkalender_secondary"
             >
               Datum
             </th>
             <th
-              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-secondary"
+              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-fristenkalender_secondary"
             >
               Werktag
             </th>
             <th
-              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-secondary"
+              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-fristenkalender_secondary"
             >
               Beschreibung
             </th>
@@ -148,7 +148,9 @@
         </thead>
         <tbody>
           {#each entries as entry}
-            <tr class="font-medium border-b border-secondary/50 text-black/70">
+            <tr
+              class="font-medium border-b border-fristenkalender_secondary/50 text-black/70"
+            >
               <td class="py-4 whitespace-nowrap">{entry.date}</td>
               <td class="py-4 whitespace-nowrap"
                 >{formatWorkday(entry.workday)}</td
diff --git a/src/lib/components/features/calendar-type-select.svelte b/src/lib/components/features/calendar-type-select.svelte
index 39765a5..9beb86f 100644
--- a/src/lib/components/features/calendar-type-select.svelte
+++ b/src/lib/components/features/calendar-type-select.svelte
@@ -14,7 +14,7 @@
   <select
     id="type-select"
     bind:value={selectedType}
-    class="inline-block border-2 border-white rounded-lg bg-secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-fristenkalender_secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each types as type}
       <option value={type.value}>{type.label}</option>
diff --git a/src/lib/components/features/calendar-year-select.svelte b/src/lib/components/features/calendar-year-select.svelte
index 70dd60b..d2ea8da 100644
--- a/src/lib/components/features/calendar-year-select.svelte
+++ b/src/lib/components/features/calendar-year-select.svelte
@@ -9,7 +9,7 @@
   <select
     id="year-select"
     bind:value={selectedYear}
-    class="inline-block border-2 border-white rounded-lg bg-secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-fristenkalender_secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each years as year}
       <option value={year}>{year}</option>
diff --git a/src/lib/components/features/download-button.svelte b/src/lib/components/features/download-button.svelte
index 87b187f..8f324fd 100644
--- a/src/lib/components/features/download-button.svelte
+++ b/src/lib/components/features/download-button.svelte
@@ -4,7 +4,7 @@
   import { IconDownload, IconSpinner } from "$lib/components";
   import { downloadCalendar } from "$lib/services/download-ics";
 
-  export let background = "bg-secondary";
+  export let background = "bg-fristenkalender_secondary";
   export let textColor = "text-black";
   export let selectedYear: number;
 
diff --git a/src/lib/components/features/glossary-toggle.svelte b/src/lib/components/features/glossary-toggle.svelte
index b439313..193ea24 100644
--- a/src/lib/components/features/glossary-toggle.svelte
+++ b/src/lib/components/features/glossary-toggle.svelte
@@ -30,7 +30,7 @@
         </div>
 
         <div
-          class="absolute inset-0 bg-secondary transition-opacity duration-300 rounded-r-lg"
+          class="absolute inset-0 bg-fristenkalender_secondary transition-opacity duration-300 rounded-r-lg"
           class:opacity-99={isOpen}
           class:opacity-100={!isOpen}
         ></div>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 1750d89..d91ec47 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,6 +1,7 @@
 // shared components
 export { default as AuthButton } from "$lib/components/shared/auth-button.svelte";
 export { default as Footer } from "$lib/components/shared/footer.svelte";
+export { default as FooterTools } from "$lib/components/shared/footer-tools.svelte";
 export { default as Header } from "$lib/components/shared/header.svelte";
 export { default as IconDownload } from "$lib/components/shared/icon-download.svelte";
 export { default as IconHeart } from "$lib/components/shared/icon-heart.svelte";
diff --git a/src/lib/components/shared/footer-tools.svelte b/src/lib/components/shared/footer-tools.svelte
new file mode 100644
index 0000000..28850d3
--- /dev/null
+++ b/src/lib/components/shared/footer-tools.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  export let background = "bg-off_white";
+</script>
+
+<footer class="flex items-center {background} px-3 py-3">
+  <div class="flex-1 flex justify-center">
+    <div class="flex items-center text-sm text-black/70 gap-10 text-center">
+      <a
+        href="https://ahb-tabellen.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-ahb_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        AHB-Tabellen
+      </a>
+      <a
+        href="https://bedingungsbaum.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-bedingungsbaum_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        Bedingungsbaum
+      </a>
+      <a
+        href="https://ebd.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-ebd_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        Entscheidungsbaumdiagramme
+      </a>
+      <a
+        href="https://fristenkalender.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-fristenkalender_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        Fristenkalender
+      </a>
+    </div>
+  </div>
+</footer>
diff --git a/src/lib/components/shared/footer.svelte b/src/lib/components/shared/footer.svelte
index ced87ac..4c78581 100644
--- a/src/lib/components/shared/footer.svelte
+++ b/src/lib/components/shared/footer.svelte
@@ -4,7 +4,7 @@
   import { base } from "$app/paths";
   import { IconHeart, IconLogo } from "$lib/components";
 
-  export let background = "bg-secondary";
+  export let background = "bg-fristenkalender_secondary";
 
   type VersionInfo = {
     version_tag: string;
diff --git a/src/lib/components/shared/header.svelte b/src/lib/components/shared/header.svelte
index b3879ec..6482662 100644
--- a/src/lib/components/shared/header.svelte
+++ b/src/lib/components/shared/header.svelte
@@ -9,7 +9,7 @@
   } from "$lib/components";
   import type { MonthValue } from "$lib/types/calendar-month";
 
-  export let background = "bg-primary";
+  export let background = "bg-fristenkalender_primary";
   export let selectedYear: number;
   export let selectedMonth: MonthValue;
   export let selectedType: string;
@@ -33,6 +33,9 @@
   </div>
 
   <div class="flex-none py-2 pr-1">
-    <AuthButton background="bg-secondary" textColor="text-black/70" />
+    <AuthButton
+      background="bg-fristenkalender_secondary"
+      textColor="text-black/70"
+    />
   </div>
 </header>
diff --git a/src/lib/components/shared/icon-spinner.svelte b/src/lib/components/shared/icon-spinner.svelte
index e0e16f8..4025284 100644
--- a/src/lib/components/shared/icon-spinner.svelte
+++ b/src/lib/components/shared/icon-spinner.svelte
@@ -6,7 +6,7 @@
 <div role="status">
   <svg
     aria-hidden="true"
-    class="animate-spin dark:text-secondary {fillColor}"
+    class="animate-spin dark:text-fristenkalender_secondary {fillColor}"
     style="width: {size}px; height: {size}px;"
     viewBox="0 0 100 101"
     fill="none"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7c54a3c..429166c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,9 +16,11 @@
   }
 </script>
 
-<section class="bg-primary flex-grow flex items-center justify-center">
+<section
+  class="bg-fristenkalender_primary flex-grow flex items-center justify-center"
+>
   <div
-    class="rounded-3xl w-1/3 bg-secondary p-12
+    class="rounded-3xl w-1/3 bg-fristenkalender_secondary p-12
     shadow-lg
     transition-all
     duration-300
@@ -52,7 +54,7 @@
     <div class="mt-10 flex justify-center relative z-10">
       <button
         on:click={checkAuthentication}
-        class="flex flex-row items-center gap-2 rounded-full bg-primary text-white text-lg px-5 py-2
+        class="flex flex-row items-center gap-2 rounded-full bg-fristenkalender_primary text-white text-lg px-5 py-2
           shadow-lg
           ring-1
           ring-black/5
diff --git a/src/routes/fristenkalender/+layout.svelte b/src/routes/fristenkalender/+layout.svelte
index 3b37f99..690f7df 100644
--- a/src/routes/fristenkalender/+layout.svelte
+++ b/src/routes/fristenkalender/+layout.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import "$src/app.scss";
+
+  import { FooterTools } from "$lib/components";
 </script>
 
 <div class="flex flex-col h-full">
   <main class="flex-1 min-h-0">
     <slot />
   </main>
+  <FooterTools />
 </div>
diff --git a/src/routes/fristenkalender/+page.svelte b/src/routes/fristenkalender/+page.svelte
index 94152da..4a45f13 100644
--- a/src/routes/fristenkalender/+page.svelte
+++ b/src/routes/fristenkalender/+page.svelte
@@ -82,7 +82,7 @@
   }
 </script>
 
-<div class="flex flex-col h-full bg-tint relative">
+<div class="flex flex-col h-full bg-white relative">
   <Header bind:selectedYear bind:selectedMonth bind:selectedType />
   <div class="flex flex-row justify-between">
     <div class="flex flex-col px-24 py-12">
diff --git a/tailwind.config.js b/tailwind.config.js
index 31c0151..238087b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,8 +4,15 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: "#ABDCD3",
-        secondary: "#D4EDE8",
+        off_white: "#E7E6E5",
+        ahb_primary: "#EBBEC1",
+        ahb_secondary: "#F4E0E1",
+        bedingungsbaum_primary: "#E5BD5C",
+        bedingungsbaum_secondary: "#F4E2B9",
+        ebd_primary: "#8BA2D7",
+        ebd_secondary: "#C2CEE9",
+        fristenkalender_primary: "#ABDCD3",
+        fristenkalender_secondary: "#D4EDE8",
       },
     },
   },