diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4459ae3..aa4b353 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,8 +5,10 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="d24c4d50-575e-4f5d-9e13-04960cc44f85" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/.github/workflows/nextjs.yml" beforeDir="false" afterPath="$PROJECT_DIR$/.github/workflows/nextjs.yml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/mainzelliste-doc/docusaurus.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/mainzelliste-doc/docusaurus.config.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/mainzelliste-doc/src/css/custom.css" beforeDir="false" afterPath="$PROJECT_DIR$/mainzelliste-doc/src/css/custom.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Header/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -82,7 +84,7 @@
       <workItem from="1727080153618" duration="2052000" />
       <workItem from="1727082295564" duration="721000" />
       <workItem from="1727247496720" duration="2250000" />
-      <workItem from="1727386379479" duration="25711000" />
+      <workItem from="1727386379479" duration="27522000" />
     </task>
     <task id="LOCAL-00001" summary="add: update next js template">
       <option name="closed" value="true" />
@@ -380,7 +382,15 @@
       <option name="project" value="LOCAL" />
       <updated>1727451673793</updated>
     </task>
-    <option name="localTasksCounter" value="38" />
+    <task id="LOCAL-00038" summary="ci: build and deploy docusaurus">
+      <option name="closed" value="true" />
+      <created>1727452610271</created>
+      <option name="number" value="00038" />
+      <option name="presentableId" value="LOCAL-00038" />
+      <option name="project" value="LOCAL" />
+      <updated>1727452610271</updated>
+    </task>
+    <option name="localTasksCounter" value="39" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
diff --git a/mainzelliste-doc/docusaurus.config.ts b/mainzelliste-doc/docusaurus.config.ts
index 5f0df34..1bf2740 100644
--- a/mainzelliste-doc/docusaurus.config.ts
+++ b/mainzelliste-doc/docusaurus.config.ts
@@ -60,10 +60,10 @@ const config: Config = {
     image: 'img/mainzelliste-logo.jpg',
     navbar: {
       hideOnScroll: false,
-      title: 'My Site',
       logo: {
-        alt: 'My Site Logo',
-        src: 'img/logo.svg',
+        alt: 'Mainzelliste Logo',
+        src: 'img/mainzelliste-logo.png',
+        href: 'https://medicalinformatics.github.io/mainzelliste.de/'
       },
       items: [
         {
@@ -73,13 +73,18 @@ const config: Config = {
           label: 'Tutorial',
         },
         // {to: '/blog', label: 'Blog', position: 'left'},
-        // {
-        //   href: 'https://github.com/facebook/docusaurus',
-        //   label: 'GitHub',
-        //   position: 'right',
-        // },
+        {
+          href: 'https://medicalinformatics.github.io/mainzelliste.de/api-doc/',
+          label: 'API Doc',
+          position: 'right',
+        },
       ],
     },
+    colorMode: {
+      defaultMode: 'light',
+      disableSwitch: true,
+      respectPrefersColorScheme: false,
+    },
     footer: {
       style: 'dark',
       links: [
diff --git a/mainzelliste-doc/src/css/custom.css b/mainzelliste-doc/src/css/custom.css
index 2bc6a4c..0019d36 100644
--- a/mainzelliste-doc/src/css/custom.css
+++ b/mainzelliste-doc/src/css/custom.css
@@ -6,13 +6,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #2a4ea3;
+  --ifm-color-primary-dark: #22428d;
+  --ifm-color-primary-darker: #1c3672;
+  --ifm-color-primary-darkest: #1D2430;
+  --ifm-color-primary-light: #3053a4;
+  --ifm-color-primary-lighter: #3b60b6;
+  --ifm-color-primary-lightest: #547ad2;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index dce00e5..baff6f1 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -32,6 +32,7 @@ const Header = () => {
   let $features: HTMLElement;
   let $contact: HTMLElement;
   let $apiDoc: HTMLElement;
+  let $docs: HTMLElement;
 
   if (typeof document !== 'undefined') {
     sections = document.querySelectorAll("section[id]");
@@ -39,6 +40,7 @@ const Header = () => {
     $features = document.getElementById('features_');
     $contact = document.getElementById('contact_');
     $apiDoc = document.getElementById('apiDoc_');
+    $docs = document.getElementById('docs_');
     window.addEventListener("scroll", navHighlighter);
   }
 
@@ -70,6 +72,7 @@ const Header = () => {
         $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $docs.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       case "features": {
@@ -77,6 +80,7 @@ const Header = () => {
         $features.className = "text-primary dark:text-white"
         $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       case "contact": {
@@ -84,14 +88,23 @@ const Header = () => {
         $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $contact.className = "text-primary dark:text-white"
         $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       case "apiDoc": {
         $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
-        // "flex items-center py-2 text-lg lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 transition-transform cursor-pointer"
         $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        break;
+      }
+      case "docs": {
+        $home.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $features.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $contact.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $apiDoc.className = "flex items-center text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
+        $docs.className = "text-dark hover:text-primary dark:text-white/70 dark:hover:text-white"
         break;
       }
       default: {
@@ -182,6 +195,14 @@ const Header = () => {
                       </li>
                     ))}
                     <li key={menuData.length} className="group relative">
+                      <Link
+                          id={"docs_"}
+                          href="/docs"
+                          target="_blank"
+                          className="py-2 text-lg lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 transition-transform cursor-pointer"
+                      >Documentation</Link>
+                    </li>
+                    <li key={menuData.length + 1} className="group relative">
                       <Link
                           id={"apiDoc_"}
                           href="/api-doc"