diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6e89260ba92adabe1cb90bb33d4dd86fec5af834
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,19 @@
+image: docker:20.10.9
+
+variables:
+  DOCKER_TLS_CERTDIR: "/certs"
+
+services:
+  - docker:20.10.9-dind
+
+before_script:
+  - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+
+build:
+  stage: build
+  script:
+    - VERSION=`cat VERSION`
+    - docker pull $CI_REGISTRY_IMAGE:latest || true
+    - docker build --cache-from $CI_REGISTRY_IMAGE:latest --tag $CI_REGISTRY_IMAGE:$VERSION --tag $CI_REGISTRY_IMAGE:latest .
+    - docker push $CI_REGISTRY_IMAGE:$VERSION
+    - docker push $CI_REGISTRY_IMAGE:latest
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..6793d7710d4981bc82535d2b85cb2289dc820f23
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,37 @@
+FROM python:3.11
+
+RUN mkdir /app
+WORKDIR /app
+
+# Install NodeJS
+ENV NODE_MAJOR=20
+RUN apt-get update
+RUN apt-get install -y ca-certificates curl gnupg
+RUN mkdir -p /etc/apt/keyrings
+RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
+RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_${NODE_MAJOR}.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
+RUN apt-get update
+RUN apt-get install -y nodejs
+RUN rm -rf /var/lib/apt/lists/*
+
+COPY . .
+
+RUN pip install -r requirements/base.txt
+RUN npm install
+RUN npm run prod
+
+# Placeholder values so the static files collect
+RUN DJANGO_ALLOWED_HOSTS=x \
+    DJANGO_SECRET_KEY=x \
+    python manage.py collectstatic --noinput --settings=majak_uistyleguide.settings.production
+
+RUN bash -c "adduser --disabled-login --quiet --gecos app app &&  \
+             chmod -R o+r /app/ && \
+             chmod o+x /app/run.sh"
+USER app
+
+ENV DJANGO_SETTINGS_MODULE "majak_uistyleguide.settings.production"
+
+EXPOSE 8000
+
+CMD ["bash", "run.sh"]
diff --git a/VERSION b/VERSION
new file mode 100644
index 0000000000000000000000000000000000000000..3eefcb9dd5b38e2c1dc061052455dd97bcd51e6c
--- /dev/null
+++ b/VERSION
@@ -0,0 +1 @@
+1.0.0
diff --git a/gunicorn.conf.py b/gunicorn.conf.py
new file mode 100644
index 0000000000000000000000000000000000000000..16484fd52069292cf24727fbf8e393ac8583608e
--- /dev/null
+++ b/gunicorn.conf.py
@@ -0,0 +1,7 @@
+bind = "0.0.0.0:8000"
+accesslog = "-"
+workers = 1
+max_requests = 1000
+max_requests_jitter = 10
+timeout = 60
+graceful_timeout = 60
diff --git a/majak_uistyleguide/settings/base.py b/majak_uistyleguide/settings/base.py
index e780fc577024e991a4560ba7b9b6cc2334fb8de8..02b7e98e58b75de417658c65892a0c5b7774a92e 100644
--- a/majak_uistyleguide/settings/base.py
+++ b/majak_uistyleguide/settings/base.py
@@ -50,6 +50,7 @@ INSTALLED_APPS = [
 # ------------------------------------------------------------------------------
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+    "whitenoise.middleware.WhiteNoiseMiddleware",
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -91,7 +92,7 @@ STATICFILES_FINDERS = [
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
 ]
-STATICFILES_STORAGE = "django.contrib.staticfiles.storage.ManifestStaticFilesStorage"
+STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
 
 # MEDIA
 # ------------------------------------------------------------------------------
diff --git a/majak_uistyleguide/static/images/background-images/onboarding_mobile.png b/majak_uistyleguide/static/images/background-images/onboarding_mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3ec302681aeb396ff6fc58bb621d8c596f3dc0
Binary files /dev/null and b/majak_uistyleguide/static/images/background-images/onboarding_mobile.png differ
diff --git a/majak_uistyleguide/static/images/onboarding/donate.webp b/majak_uistyleguide/static/images/onboarding/donate.webp
new file mode 100644
index 0000000000000000000000000000000000000000..38dec65f2786f1ee79796f7606f42efcc50209f1
Binary files /dev/null and b/majak_uistyleguide/static/images/onboarding/donate.webp differ
diff --git a/majak_uistyleguide/static/images/onboarding/member.webp b/majak_uistyleguide/static/images/onboarding/member.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3a0a3b1b9ebeccbf207c50531949c5cd062f95e8
Binary files /dev/null and b/majak_uistyleguide/static/images/onboarding/member.webp differ
diff --git a/majak_uistyleguide/static/images/onboarding/newsletter.webp b/majak_uistyleguide/static/images/onboarding/newsletter.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8caceb1bcfa19e2d9420929a2d8c0213064a3c2e
Binary files /dev/null and b/majak_uistyleguide/static/images/onboarding/newsletter.webp differ
diff --git a/majak_uistyleguide/static/images/onboarding/regp.webp b/majak_uistyleguide/static/images/onboarding/regp.webp
new file mode 100644
index 0000000000000000000000000000000000000000..28644f0b99db29762bbea6a9bd03d956e03774d9
Binary files /dev/null and b/majak_uistyleguide/static/images/onboarding/regp.webp differ
diff --git a/majak_uistyleguide/static/images/onboarding/volunteer.webp b/majak_uistyleguide/static/images/onboarding/volunteer.webp
new file mode 100644
index 0000000000000000000000000000000000000000..056c39eed182e5a91aa8f49a4df3a0c9ab71e8f9
Binary files /dev/null and b/majak_uistyleguide/static/images/onboarding/volunteer.webp differ
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.html
new file mode 100644
index 0000000000000000000000000000000000000000..2a314e46fdb8d753de7991e8691aa37414f02a65
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.html
@@ -0,0 +1,39 @@
+<div class="flip-card" tabindex="0">
+  <div class="flip-card-inner">
+    <div class="flip-card-front">
+      <div
+        class="relative h-[33rem] bg-black rounded-3xl overflow-hidden bg-cover"
+        style="background-image:url('{{ image_url }}')"
+      >
+        <div
+          class="
+            absolute top-0 left-0
+
+            border border-r-[27rem] border-r-[transparent]
+            border-l-0 border-t-[33rem] border-t-pirati-yellow
+          "
+        ></div>
+
+        <h1
+          class="font-alt text-5xl whitespace-pre-line absolute top-10 left-10"
+        >{{ title }}</h1>
+      </div>
+    </div>
+    <div
+      class="flip-card-back bg-pirati-yellow rounded-3xl p-10"
+    >
+      <div class="prose prose-black">
+        {% comment %}
+          WARNING: This is generated by the styleguide implementation.
+          Don't keep the |safe!
+        {% endcomment %}
+
+        {{ content|safe }}
+      </div>
+
+      <div class="flex justify-center items-center my-5">
+        {% include 'patterns/atoms/buttons/round_button.html' with button_text=button_text %}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.yaml b/majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..15f881a67cd8b0ecbfdbd92cf70750a1cd3f027d
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.yaml
@@ -0,0 +1,30 @@
+context:
+  title: |-
+    Staň se členkou
+    nebo členem
+  image_url: '../../../../../static/images/onboarding/member.png'
+  content: |-
+    <h2>
+      Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+    </h2>
+
+    <p>
+      <u>Jako člen pirátské strany máš právo:</u>
+    </p>
+
+    <ul>
+      <li>
+        být informován o činnostech strany
+      </li>
+      <li>
+        podílet se na utváření politiky strany
+      </li>
+      <li>
+        kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+      </li>
+    </ul>
+
+    <p>
+      Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+    </p>
+  button_text: 'Chci se zapojit!'
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.html
index 6744a730bf4c9f3198ec195954fc2cf55a38fc84..28c500bff57fe0f0670f781594482d47a44407eb 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.html
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.html
@@ -1,6 +1,6 @@
 <div class="__js-root">
   <div class="header-carousel">
-    <div class="block h-[700px] xl:h-screen relative group cursor-pointer">
+    <div class="block h-[700px] xl:h-screen relative">
       <img
         class="
           header-carousel--image
@@ -29,8 +29,8 @@
             {{ heading|safe }}
           </h1>
 
-          <div class="ml-4 text-lg group">
-            {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text classes="bg-white text-black" %}
+          <div class="ml-4 text-lg">
+            {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text classes="bg-white text-black duration-300 hover:bg-black hover:text-white" %}
           </div>
         </div>
       </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.yaml b/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.yaml
index b4d9ff2e702075d977086b92c6ae8918e59b0b3c..85a55f3b80533157a7657a8880ac4a3bbcbfcf7e 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.yaml
@@ -5,5 +5,5 @@ context:
     Chceš se zapojit do dění
     na české politické scéně?
   button_text: "Přidej se k nám!"
-  mobile_background_image_url: '../../../../../../static/images/background-images/onboarding.jpg'
+  mobile_background_image_url: '../../../../../../static/images/background-images/onboarding_mobile.png'
   desktop_background_image_url: '../../../../../../static/images/background-images/onboarding.jpg'
diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.html b/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.html
index 42eb7d0023c44e7ad2e2ee93d83a1d5da7ac052f..a97fb4dc1b08178fde66105dc162c19b37cc9017 100644
--- a/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.html
@@ -1,5 +1,5 @@
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-8">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
   {% for card in cards %}
-    {% include 'patterns/molecules/boxes/card_box.html' with url=card.url image=card.image header=card.header content=card.content description_classes=description_classes classes=classes date=date %}
+    {% include 'patterns/molecules/boxes/onboarding/card_box.html' with title=card.title image_url=card.image_url content=card.content button_text=card.button_text %}
   {% endfor %}
 </div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.yaml b/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.yaml
index f5f37c172297a61f87964b9a9583aa99df40a93d..801bf3549f5fb875bd7c793011e571ce418459a9 100644
--- a/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.yaml
@@ -1,17 +1,152 @@
 context:
   cards:
     -
-      url: "https://example.com"
-      image: "https://picsum.photos/1000"
-      header: "Informatika"
-      content: "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Laoreet id donec ultrices tincidunt arcu non. Sem et tortor consequat id."
+      title: |-
+        Staň se členkou
+        nebo členem
+      image_url: '../../../../../static/images/onboarding/member.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
     -
-      url: "https://example.com"
-      image: "https://picsum.photos/1000"
-      header: "Životní Prostředí"
-      content: "Id velit ut tortor pretium viverra suspendisse potenti. Accumsan in nisl nisi scelerisque eu ultrices. Arcu odio ut sem nulla. Mollis nunc sed id semper risus in."
+      title: |-
+        Registrovaný
+        příznivec
+      image_url: '../../../../../static/images/onboarding/regp.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
     -
-      url: "https://example.com"
-      image: "https://picsum.photos/1000"
-      header: "Evropa, zahraničí, obrana"
-      content: "Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Tellus elementum sagittis vitae et leo duis ut diam. Eu non diam phasellus vestibulum."
+      title: |-
+        Zapoj se jako
+        dobrovolník
+      image_url: '../../../../../static/images/onboarding/volunteer.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
+    -
+      title: |-
+        Přihlaš se
+        k novinkám
+      image_url: '../../../../../static/images/onboarding/newsletter.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
+    -
+      title: |-
+        Podpoř nás
+        finančně
+      image_url: '../../../../../static/images/onboarding/donate.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
index cddd0b2b8ab491447afd1956816959c76b962396..ba17e96e189d3082939a86057e165b62113169d2 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
@@ -224,6 +224,21 @@
               {% endfor %}
             </div>
           {% endif %}
+
+          {% if menu_button and not additional_buttons and menu_button_url %}
+            <div class="mt-8 mb-6 flex flex-col gap-1.5">
+              <a
+                href="{{ menu_button_url }}"
+                class="
+                  decoration-1 underline-offset-4
+
+                  navbar__menu-item
+
+                  {% if menu_button == selected_item %}navbar__menu-item--selected{% endif %}
+                "
+              >{{ menu_button }}</a>
+            </div>
+          {% endif %}
         </div>
 
         <div class="flex gap-5 text-lg md:justify-end">
diff --git a/package.json b/package.json
index 82523acc5e49b83f3437ff65d12543ece7b34ed0..f21f60c15fa4fe21ae4cb49736e8e7b238a2ee6e 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "tippy.js": "^6.3.7",
     "vue": "^2.6.11",
     "vue-clickaway": "^2.2.2",
-    "vue-slick-carousel": "^1.0.6",
+    "vue-slick-carousel": "^1.0.5",
     "vue-slide-up-down": "^2.0.1"
   },
   "devDependencies": {
diff --git a/requirements/base.txt b/requirements/base.txt
index 4d010e8cc8efa6b08adea6ae832e7b435d3dbeba..b1925eb0f8890c88caac10fdeab9987917f0a493 100644
--- a/requirements/base.txt
+++ b/requirements/base.txt
@@ -1,4 +1,6 @@
-Django==4.0
+django==4.0
 django-pattern-library==1.0.0
 django-environ==0.9.0
-django-vite==2.0.2
\ No newline at end of file
+django-vite==2.0.2
+gunicorn==21.2.0
+whitenoise==6.6.0
diff --git a/run.sh b/run.sh
new file mode 100644
index 0000000000000000000000000000000000000000..44ce2f937a524e71decc18ee9ea9c8ba7b5d1b5d
--- /dev/null
+++ b/run.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# exit on error
+set -e
+
+# migrate database
+python manage.py migrate
+
+# start webserver
+exec gunicorn -c gunicorn.conf.py majak_uistyleguide.wsgi
diff --git a/src/css/molecules/card_box.pcss b/src/css/molecules/card_box.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..ddd5afe864f7eecd1025881f3fd9650498b62d80
--- /dev/null
+++ b/src/css/molecules/card_box.pcss
@@ -0,0 +1,43 @@
+.flip-card {
+  .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  @apply w-auto h-[33rem] cursor-pointer;
+
+  perspective: 1000px; /* Remove this if you don't want the 3D effect */
+}
+
+/* This container is needed to position the front and back side */
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+/* Do an horizontal flip when you move the mouse over the flip box container */
+.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+/* Position the front and back side */
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+}
+
+/* Style the back side */
+.flip-card-back {
+  transform: rotateY(180deg);
+}
diff --git a/src/css/style.pcss b/src/css/style.pcss
index a4af57076c9c98d4a04f7fd911006a371b9df83a..f91d941c19967f64f8d0e9a8eb42d609e9f10c23 100644
--- a/src/css/style.pcss
+++ b/src/css/style.pcss
@@ -33,6 +33,7 @@
 @import "molecules/representative_box.pcss";
 @import "molecules/popout.pcss";
 @import "molecules/candidate_list.pcss";
+@import "molecules/card_box.pcss";
 
 @import "organisms/article-timeline.pcss";
 @import "organisms/footer.pcss";
diff --git a/tailwind.config.js b/tailwind.config.js
index ef437d2c73e56985c8963ae9ecb268eab69942d8..320f5a975f915ce49a8bb33065e8c6378a32dd7f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,44 @@ module.exports = {
             scale: {
                 '-1': '-1',
             },
+            typography: ({ theme }) => ({
+                black: {
+                    css: {
+                        '--tw-prose-body': theme('colors.black'),
+                        '--tw-prose-headings': theme('colors.black'),
+                        '--tw-prose-lead': theme('colors.black'),
+                        '--tw-prose-links': theme('colors.black'),
+                        '--tw-prose-bold': theme('colors.black'),
+                        '--tw-prose-counters': theme('colors.black'),
+                        '--tw-prose-bullets': theme('colors.black'),
+                        '--tw-prose-hr': theme('colors.black'),
+                        '--tw-prose-quotes': theme('colors.black'),
+                        '--tw-prose-quote-borders': theme('colors.black'),
+                        '--tw-prose-captions': theme('colors.black'),
+                        '--tw-prose-code': theme('colors.black'),
+                        '--tw-prose-pre-code': theme('colors.black'),
+                        '--tw-prose-pre-bg': theme('colors.white'),
+                        '--tw-prose-th-borders': theme('colors.black'),
+                        '--tw-prose-td-borders': theme('colors.black'),
+                        '--tw-prose-invert-body': theme('colors.white'),
+                        '--tw-prose-invert-headings': theme('colors.white'),
+                        '--tw-prose-invert-lead': theme('colors.white'),
+                        '--tw-prose-invert-links': theme('colors.white'),
+                        '--tw-prose-invert-bold': theme('colors.white'),
+                        '--tw-prose-invert-counters': theme('colors.white'),
+                        '--tw-prose-invert-bullets': theme('colors.white'),
+                        '--tw-prose-invert-hr': theme('colors.white'),
+                        '--tw-prose-invert-quotes': theme('colors.white'),
+                        '--tw-prose-invert-quote-borders': theme('colors.white'),
+                        '--tw-prose-invert-captions': theme('colors.white'),
+                        '--tw-prose-invert-code': theme('colors.white'),
+                        '--tw-prose-invert-pre-code': theme('colors.white'),
+                        '--tw-prose-invert-pre-bg': theme('colors.black'),
+                        '--tw-prose-invert-th-borders': theme('colors.white'),
+                        '--tw-prose-invert-td-borders': theme('colors.white')
+                    }
+                }
+            }),
         },
         // Breakpoints
         screens: {
@@ -165,7 +203,7 @@ module.exports = {
         textDecorationColor: { // defaults to theme => theme('colors')
             'white': '#fff',
             'black': '#000',
-        },
+        }
     },
     plugins: [
         require('@tailwindcss/typography'),