diff --git a/.gitignore b/.gitignore
index 45ddf0a..8caa2be 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,11 @@
+# MkDocs
 site/
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
diff --git a/README.md b/README.md
index ce02896..906127d 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ You can see the slides of this repository at https://hogenttin.github.io/hogent-
 ## Installation
 
 1. Install [python](https://www.python.org/downloads/) .
-2. (optional) Create a [Python environment](https://docs.python.org/3/library/venv.html). E.g. for Linux:
+2. (optional) Create a [python environment](https://docs.python.org/3/library/venv.html). E.g. for Linux:
 
     ```console
     python -m venv venv
@@ -17,7 +17,7 @@ You can see the slides of this repository at https://hogenttin.github.io/hogent-
 3. Install the dependencies:
 
     ```console
-    pip install -r requirements.txt
+    pip install --requirement requirements.txt
     ```
 
 ## Basic usage
@@ -52,7 +52,7 @@ A [markdownlint](https://github.com/DavidAnson/markdownlint) config has been add
 
 ### Theme
 
-If you want another theme, you can change edit the `theme.css` header tag in [index.html](./docs/index.html) to point to another CSS file. You can also use an existing link like https://hogenttin.github.io/hogent-docsify/theme.css . Using this specific URL will always keep your theme up to date with the one on this repo.
+If you want another theme, you can change edit the `extra_css` entry in [mkdocs.yml](./mkdocs.yml) to point to another CSS file. You can also use an existing link like https://hogenttin.github.io/hogent-mkdocs/docs/theme.css . Using this specific URL will always keep your theme up to date with the one on this repo.
 
 ### [MkDocs](https://www.mkdocs.org/) options
 
diff --git a/docs/examples/h2.md b/docs/examples/h2.md
index 5f0b8d2..2739e6e 100644
--- a/docs/examples/h2.md
+++ b/docs/examples/h2.md
@@ -46,7 +46,7 @@ graph TD
 
 You can Also use [PlantUML](https://plantuml.com/news) to create diagrams from text:
 
-```plantuml
+```puml
 @startuml
 participant Participant as Foo
 actor       Actor       as Foo1
diff --git a/docs/theme.css b/docs/theme.css
new file mode 100644
index 0000000..5f96911
--- /dev/null
+++ b/docs/theme.css
@@ -0,0 +1,128 @@
+/*
+ *  https://www.hogent.be/dit-is-hogent/huisstijl/huisstijl-kleuren/
+ *  https://fonts.google.com/specimen/Montserrat
+ *  https://fonts.google.com/specimen/Inconsolata
+ */
+
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&family=Montserrat:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
+
+:root {
+    --hogent-blue: #4ca2d5;
+    --hogent-gray: #c3bbaf;
+    --hogent-red: #ef8767;
+    --hogent-white: #ffffff;
+    --hogent-black: #000000;
+
+    /* HOGENT blue is good for slides and accents with bold text, but is too bright for regular text. Therefore, we use 
+      * a darker blue for text, like the blue Wikipedia uses for links.
+      * https://en.wikipedia.org/wiki/Help:Link_color#Standard_colors
+      */
+    --wikipedia-blue: #3366cc;
+    --blue: var(--wikipedia-blue);
+}
+
+body {
+    font-family: "Montserrat", "Arial", sans-serif;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.5em;
+    color: var(--hogent-black);
+}
+
+.rst-content h1,
+.rst-content h2,
+.rst-content h3,
+.rst-content h4,
+.rst-content h5,
+.rst-content h6 {
+    font-family: "Montserrat", "Arial", sans-serif;
+    font-weight: 800;
+}
+
+.rst-content h1 {
+    font-size: 2.5em;
+}
+
+.rst-content h2 {
+    font-size: 1.5em;
+}
+
+.rst-content h3 {
+    font-size: 1.25em;
+}
+
+.rst-content h4 {
+    font-size: 1em;
+}
+
+b,
+strong {
+    color: var(--hogent-red);
+    font-weight: bold;
+}
+
+i,
+em {
+    font-style: italic;
+}
+
+a {
+    color: var(--blue);
+}
+
+a:hover {
+    color: var(--hogent-gray);
+    text-decoration: none;
+}
+
+.rst-content code,
+.rst-content pre code.hljs {
+    font-family: "Inconsolata", monospace;
+    font-size: 1rem;
+}
+
+.rst-content code {
+    color: var(--blue);
+}
+
+blockquote p {
+    font-style: italic;
+    padding: 1em;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--hogent-gray);
+    border-radius: 5px;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+ul {
+    list-style-type: disc;
+}
+
+ul ul {
+    list-style-type: square;
+}
+
+ul ul ul {
+    list-style-type: circle;
+}
+
+/* Uncomment if you want the theme to fill the entire width of the screen
+ */
+/* .wy-nav-content {
+    max-width: 100%;
+} */
+
+/* tr,
+th {
+    border-style: none;
+}
+
+td {
+    border-style: solid none none none;
+    border-color: var(--hogent-black);
+} */
diff --git a/mkdocs.yml b/mkdocs.yml
index 9315496..3c7a5f6 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -14,5 +14,13 @@ markdown_extensions:
     - pymdownx.magiclink
     - pymdownx.tasklist
     - pymdownx.tilde
+plugins:
+    - mermaid2
+    - plantuml:
+          puml_url: https://www.plantuml.com/plantuml/
+          num_workers: 8
+    - search
 extra_javascript:
     - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
+extra_css:
+    - ./theme.css
diff --git a/requirements.txt b/requirements.txt
index 2d0d5aa..ef1cfca 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1,4 @@
 mkdocs
 pymdown-extensions
+mkdocs-mermaid2-plugin
+mkdocs_puml