diff --git a/docs/overrides/home.html b/docs/docs/overrides/home.html
similarity index 85%
rename from docs/overrides/home.html
rename to docs/docs/overrides/home.html
index 4cf65d0f1..a69b1d4ca 100644
--- a/docs/overrides/home.html
+++ b/docs/docs/overrides/home.html
@@ -13,19 +13,10 @@
 <!-- Additional styles for landing page -->
 <style>
 
-    :root {
-        --md-primary-fg-color: #000;
-    }
-
     body {
         background: #a599ff;
     }
 
-    /* Application header should be static for the landing page */
-    .md-header {
-        position: initial;
-    }
-
     /* Remove spacing, as we cannot hide it completely */
     .md-main__inner {
         margin: 0;
@@ -49,8 +40,11 @@
     }
 
     /* Moves the search results to the front */
+    /* Application header should be static for the landing page */
     .md-header {
+        background: #0000;
         z-index: 10;
+        position: initial;
     }
 
     .mdx-hero__content h1 {
@@ -85,26 +79,6 @@
         }
     }
 
-    /* Youtube videos */
-    .video-wrapper {
-        position: relative;
-        display: block;
-        height: 0;
-        padding: 0;
-        overflow: hidden;
-        padding-bottom: 56.25%;
-    }
-
-    .video-wrapper > iframe {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 0;
-    }
-
 </style>
 
 <!-- Hero for landing page -->
diff --git a/docs/docs/resources/setup/kafka.yaml b/docs/docs/resources/setup/kafka.yaml
new file mode 100644
index 000000000..753b29152
--- /dev/null
+++ b/docs/docs/resources/setup/kafka.yaml
@@ -0,0 +1,109 @@
+cp-zookeeper:
+  enabled: true
+  servers: 1
+  imageTag: 7.1.3
+  heapOptions: "-Xms124M -Xmx124M"
+  overrideGroupId: k8kafka
+  fullnameOverride: "k8kafka-cp-zookeeper"
+  resources:
+    requests:
+      cpu: 50m
+      memory: 0.2G
+    limits:
+      cpu: 250m
+      memory: 0.2G
+  prometheus:
+    jmx:
+      enabled: false
+
+cp-kafka:
+  enabled: true
+  brokers: 1
+  imageTag: 7.1.3
+  podManagementPolicy: Parallel
+  configurationOverrides:
+    "auto.create.topics.enable": false
+    "offsets.topic.replication.factor": 1
+    "transaction.state.log.replication.factor": 1
+    "transaction.state.log.min.isr": 1
+    "confluent.metrics.reporter.topic.replicas": 1
+  resources:
+    requests:
+      cpu: 50m
+      memory: 0.5G
+    limits:
+      cpu: 250m
+      memory: 0.5G
+  prometheus:
+    jmx:
+      enabled: false
+  persistence:
+    enabled: false
+
+cp-schema-registry:
+  enabled: true
+  imageTag: 7.1.3
+  fullnameOverride: "k8kafka-cp-schema-registry"
+  overrideGroupId: k8kafka
+  kafka:
+    bootstrapServers: "PLAINTEXT://k8kafka-cp-kafka-headless:9092"
+  resources:
+    requests:
+      cpu: 50m
+      memory: 0.25G
+    limits:
+      cpu: 250m
+      memory: 0.25G
+  prometheus:
+    jmx:
+      enabled: false
+
+cp-kafka-connect:
+  enabled: true
+  replicaCount: 1
+  image: k3d-kpops-registry.localhost:12345/kafka-connect-jdbc
+  imageTag: 7.1.3
+  fullnameOverride: "k8kafka-cp-kafka-connect"
+  overrideGroupId: k8kafka
+  kafka:
+    bootstrapServers: "PLAINTEXT://k8kafka-cp-kafka-headless:9092"
+  heapOptions: "-Xms256M -Xmx256M"
+  resources:
+    requests:
+      cpu: 500m
+      memory: 0.25G
+    limits:
+      cpu: 500m
+      memory: 0.25G
+  configurationOverrides:
+    "consumer.max.poll.records": "10"
+    "consumer.max.poll.interval.ms": "900000"
+    "config.storage.replication.factor": "1"
+    "offset.storage.replication.factor": "1"
+    "status.storage.replication.factor": "1"
+  cp-schema-registry:
+    url: http://k8kafka-cp-schema-registry:8081
+  prometheus:
+    jmx:
+      enabled: false
+
+cp-kafka-rest:
+  enabled: true
+  imageTag: 7.1.3
+  fullnameOverride: "k8kafka-cp-rest"
+  heapOptions: "-Xms256M -Xmx256M"
+  resources:
+    requests:
+      cpu: 50m
+      memory: 0.25G
+    limits:
+      cpu: 250m
+      memory: 0.5G
+  prometheus:
+    jmx:
+      enabled: false
+
+cp-ksql-server:
+  enabled: false
+cp-control-center:
+  enabled: false
diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css
new file mode 100644
index 000000000..ae2953c82
--- /dev/null
+++ b/docs/docs/stylesheets/extra.css
@@ -0,0 +1,24 @@
+:root > * {
+    /* The primary color of KPOps docs */
+    --md-primary-fg-color: #a599ff;
+
+    /* The second color of KPOps docs */
+    --md-accent-fg-color: #B0A5FF;
+
+    /* Create custom color variable to use for the buttons */
+    --kpops-button-color: #7068AD;
+
+    /* The footer color needs to be set sparately */
+    --md-footer-bg-color: var(--md-primary-fg-color);
+
+    /* Color the links with the primary color */
+    --md-typeset-a-color: var(--md-primary-fg-color);
+}
+
+.md-typeset .md-button, .md-button--primary {
+    background-color: var(--kpops-button-color);
+}
+
+.md-typeset .md-button:hover, .md-button--primary:hover {
+    border-color: white;
+}
diff --git a/docs/docs/user/getting-started/setup.md b/docs/docs/user/getting-started/setup.md
index 6515d95ce..1c608b77e 100644
--- a/docs/docs/user/getting-started/setup.md
+++ b/docs/docs/user/getting-started/setup.md
@@ -38,8 +38,8 @@ If you don't have access to an existing Kubernetes cluster, this section will gu
 
 <!-- dprint-ignore-start -->
 
-    !!! Note
-        Creating a new k3d cluster automatically configures `kubectl` to connect to the local cluster by modifying your `~/.kube/config`. In case you manually set the `KUBECONFIG` variable or don't want k3d to modify your config, k3d offers [many other options](https://k3d.io/v5.4.6/usage/kubeconfig/#handling-kubeconfigs){target=_blank}.
+!!! Note
+    Creating a new k3d cluster automatically configures `kubectl` to connect to the local cluster by modifying your `~/.kube/config`. In case you manually set the `KUBECONFIG` variable or don't want k3d to modify your config, k3d offers [many other options](https://k3d.io/v5.4.6/usage/kubeconfig/#handling-kubeconfigs){target=_blank}.
 
 <!-- dprint-ignore-end -->
 
@@ -90,120 +90,14 @@ You can check the cluster status with `kubectl get pods -n kube-system`. If all
 
 <!-- dprint-ignore-start -->
 
-    ??? example "Kafka Helm chart values (`kafka.yaml`)"
-        An example value configuration for Confluent's Helm chart. This configuration deploys a single Kafka Broker, a Schema Registry, Zookeeper, Kafka Rest Proxy, and Kafka Connect with minimal resources.
-
-        ```yaml
-        cp-zookeeper:
-          enabled: true
-          servers: 1
-          imageTag: 7.1.3
-          heapOptions: "-Xms124M -Xmx124M"
-          overrideGroupId: k8kafka
-          fullnameOverride: "k8kafka-cp-zookeeper"
-          resources:
-            requests:
-              cpu: 50m
-              memory: 0.2G
-            limits:
-              cpu: 250m
-              memory: 0.2G
-          prometheus:
-            jmx:
-              enabled: false
-
-        cp-kafka:
-          enabled: true
-          brokers: 1
-          imageTag: 7.1.3
-          podManagementPolicy: Parallel
-          configurationOverrides:
-            "auto.create.topics.enable": false
-            "offsets.topic.replication.factor": 1
-            "transaction.state.log.replication.factor": 1
-            "transaction.state.log.min.isr": 1
-            "confluent.metrics.reporter.topic.replicas": 1
-          resources:
-            requests:
-              cpu: 50m
-              memory: 0.5G
-            limits:
-              cpu: 250m
-              memory: 0.5G
-          prometheus:
-            jmx:
-              enabled: false
-          persistence:
-            enabled: false
-
-        cp-schema-registry:
-          enabled: true
-          imageTag: 7.1.3
-          fullnameOverride: "k8kafka-cp-schema-registry"
-          overrideGroupId: k8kafka
-          kafka:
-            bootstrapServers: "PLAINTEXT://k8kafka-cp-kafka-headless:9092"
-          resources:
-            requests:
-              cpu: 50m
-              memory: 0.25G
-            limits:
-              cpu: 250m
-              memory: 0.25G
-          prometheus:
-            jmx:
-              enabled: false
-
-        cp-kafka-connect:
-          enabled: true
-          replicaCount: 1
-          image: k3d-kpops-registry.localhost:12345/kafka-connect-jdbc
-          imageTag: 7.1.3
-          fullnameOverride: "k8kafka-cp-kafka-connect"
-          overrideGroupId: k8kafka
-          kafka:
-            bootstrapServers: "PLAINTEXT://k8kafka-cp-kafka-headless:9092"
-          heapOptions: "-Xms256M -Xmx256M"
-          resources:
-            requests:
-              cpu: 500m
-              memory: 0.25G
-            limits:
-              cpu: 500m
-              memory: 0.25G
-          configurationOverrides:
-            "consumer.max.poll.records": "10"
-            "consumer.max.poll.interval.ms": "900000"
-            "config.storage.replication.factor": "1"
-            "offset.storage.replication.factor": "1"
-            "status.storage.replication.factor": "1"
-          cp-schema-registry:
-            url: http://k8kafka-cp-schema-registry:8081
-          prometheus:
-            jmx:
-              enabled: false
-
-        cp-kafka-rest:
-          enabled: true
-          imageTag: 7.1.3
-          fullnameOverride: "k8kafka-cp-rest"
-          heapOptions: "-Xms256M -Xmx256M"
-          resources:
-            requests:
-              cpu: 50m
-              memory: 0.25G
-            limits:
-              cpu: 250m
-              memory: 0.5G
-          prometheus:
-            jmx:
-              enabled: false
-
-        cp-ksql-server:
-          enabled: false
-        cp-control-center:
-          enabled: false
-        ```
+??? example "Kafka Helm chart values (`kafka.yaml`)"
+    An example value configuration for Confluent's Helm chart. This configuration deploys a single Kafka Broker, a Schema Registry, Zookeeper, Kafka Rest Proxy, and Kafka Connect with minimal resources.
+
+    ```yaml
+    --8<--
+    ./docs/resources/setup/kafka.yaml
+    --8<--
+    ```
 
 <!-- dprint-ignore-end -->
 
diff --git a/docs/docs/user/references/editor-integration.md b/docs/docs/user/references/editor-integration.md
index 486f42929..86b7e93d0 100644
--- a/docs/docs/user/references/editor-integration.md
+++ b/docs/docs/user/references/editor-integration.md
@@ -17,9 +17,9 @@ KPOps provides JSON schemas that enable autocompletion and validation for some o
 ??? note "`settings.json`"
 
     ```json
-      --8<--
-      ./docs/resources/editor_integration/settings.json
-      --8<--
+    --8<--
+    ./docs/resources/editor_integration/settings.json
+    --8<--
     ```
 
 !!! tip "Advanced usage"
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 7c3ca5893..9a3c42720 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -4,15 +4,16 @@ site_url: https://bakdata.github.io/kpops/
 remote_branch: gh-pages
 copyright: Copyright &copy; 2023 bakdata
 
+extra_css:
+  - stylesheets/extra.css
+
 theme:
   name: "material"
-  custom_dir: overrides
+  custom_dir: docs/overrides
   language: "en"
-  palette:
-    primary: "custom"
   font:
-    text: "Roboto"
-    code: "Roboto Mono"
+    text: "SF Pro"
+    code: "DejaVu Sans Mono"
   features:
     - navigation.sections
     - navigation.tabs