diff --git a/docs/assets/configuration/1_config.png b/docs/assets/configuration/1_config.png
new file mode 100644
index 0000000..669c7cb
Binary files /dev/null and b/docs/assets/configuration/1_config.png differ
diff --git a/docs/pages/docs/configuration/theme/overview.md b/docs/pages/docs/configuration/theme/overview.md
index 1128a29..24bbcf8 100644
--- a/docs/pages/docs/configuration/theme/overview.md
+++ b/docs/pages/docs/configuration/theme/overview.md
@@ -1,93 +1,84 @@
----
-title: Theme
----
+# Übersicht
-# Theme konfigurieren
+## Variablen des Frameworks
Innerhalb der Theme-Konfiguration können sämtliche Variablen des CTM-Frameworks überschrieben werden, um das
Erscheinungsbild jeder Webseite nach Bedarf anzupassen.
+!!! info
+ Jeder Bezeichner einer einzustellenden Variable entspricht der jeweiligen
+ [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](/pages/docs/configuration/skin)
+ abgerufen werden kann.
+
+## Konfigurationsstruktur
+
In Version 2.0 des Contao ThemeManagers wurde die Konfiguration angepasst, sodass die hier dokumentierte Reihenfolge der
Theme-Konfiguration mit der im Contao-Backend übereinstimmt.
-> Jeder Bezeichner einer einzustellenden Variable entspricht der
-jeweiligen [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](/configuration/skin.md)
-abgerufen werden kann.
+![Backend-Ansicht der Theme Konfiguration](../../../../assets/configuration/1_config.png)
-___
+
-## Verfügbare Kapitel
+- :octicons-globe-24: __[Global](/pages/docs/configuration/theme/global/)__
-- [Global](#global)
-- [Schriften](#schriften)
-- [Überschriften](#überschriften)
-- [Buttons](#buttons)
-- [Komponenten](#komponenten)
-- [Formular](#formular)
-- [Module](#module)
-- [Header](#header)
-- [Sonstiges](#sonstiges)
-- [Layout](#layout)
+ ---
-### Global
+ Die globalen Einstellungen betreffen grundlegende Aspekte wie Farben und Root-Schriftgröße.
-Die globalen Einstellungen betreffen grundlegende Aspekte wie Farben und Root-Schriftgröße.
+- :octicons-typography-24: __[Schriften](/pages/docs/configuration/theme/fonts/)__
-- [Mehr über globale Einstellungen erfahren](/configuration/theme/global.md)
+ ---
-### Schriften
+ In diesem Abschnitt können die Typografie sowie Links angepasst werden.
-In diesem Abschnitt können die Typografie sowie Links angepasst werden.
+- :octicons-heading-24: __[Überschriften](/pages/docs/configuration/theme/headings/)__
-- [Einstellungen zu Schriften vornehmen](/configuration/theme/fonts.md)
+ ---
-### Überschriften
+ Hier erfolgt die Konfiguration von Schriftgrößen, Farben und weiteren Optionen für Überschriften (*h1* - *h6*).
-Hier erfolgt die Konfiguration von Schriftgrößen, Farben und weiteren Optionen für Überschriften (*h1* - *h6*).
+- :material-button-pointer: __[Buttons](/pages/docs/configuration/theme/buttons/)__
-- [Weitere Informationen zu Überschriften](/configuration/theme/headings.md)
+ ---
-### Buttons
+ Änderungen am Erscheinungsbild von Buttons und Links, für die der Button-Stil über den StyleManager festgelegt wurde.
-Änderungen am Erscheinungsbild von Buttons und Links, für die der Button-Stil über
-den [StyleManager](/tools/style-manager.md) festgelegt wurde.
+- :octicons-table-24: __[Komponenten](/pages/docs/configuration/theme/components/)__
-- [Anleitung zur Konfiguration von Buttons](/configuration/theme/buttons.md)
+ ---
-### Komponenten
+ Dieser Bereich ermöglicht die Anpassung des Aussehens von Cards (Box), Linien, Tabellen und der Icon-Komponente.
-Dieser Bereich ermöglicht die Anpassung des Aussehens von Cards (Box), Linien, Tabellen und der Icon-Komponente.
+- :material-form-textbox: __[Formular](/pages/docs/configuration/theme/form/)__
-- [Stilanpassungen für ThemeManager-Komponenten](/configuration/theme/components.md)
+ ---
-### Formular
+ Über die Formular-Konfiguration kann das gesamte Erscheinungsbild von `form`, `select`, `input`, `textarea`, `label`,
+ und `legend` festgelegt werden.
-Über die Formular-Konfiguration kann das gesamte Erscheinungsbild von `form`, `select`, `input`, `textarea`, `label`,
-und `legend` festgelegt werden.
+- :material-navigation-variant-outline: __[Module](/pages/docs/configuration/theme/modules/)__
-- [Anleitung zur Konfiguration von Formularstilen](/configuration/theme/components.md)
+ ---
-### Module
+ Einstellungen für Navigationen und die Breadcrumb-Navigation.
-Einstellungen für Navigationen und die Breadcrumb-Navigation.
+- :material-page-layout-header: __[Header](/pages/docs/configuration/theme/header/)__
-- [Konfiguration von Modul-Stilen](/configuration/theme/components.md)
+ ---
-### Header
+ Dieser Abschnitt behandelt die Konfiguration des ``-Elements.
-Dieser Abschnitt behandelt die Konfiguration des ``-Elements.
+- :material-selection: __[Sonstiges](/pages/docs/configuration/theme/miscellaneous/)__
-- [Anpassung des Header-Layouts](/configuration/theme/header.md)
+ ---
-### Sonstiges
+ Einstellungen für Textauswahl-Farbe, Schatten und Seitenverhältnisse von Bildern.
-Einstellungen für Textauswahl-Farbe, Schatten und Seitenverhältnisse von Bildern.
+- :material-view-grid-plus-outline: __[Layout](/pages/docs/configuration/theme/miscellaneous/)__
-- [Sonstige Anpassungen](/configuration/theme/miscellaneous.md)
+ ---
-### Layout
+ Alle Einstellungen, die das Layout des Frameworks beeinflussen. Hierzu gehören Breakpoints, das responsive Verhalten, Artikel-Abstände, das Grid, Paddings sowie Margins.
-Alle Einstellungen, die das Layout des Frameworks beeinflussen. Hierzu gehören Breakpoints, das responsive Verhalten,
-Artikel-Abstände, das Grid, Paddings sowie Margins.
-- [Einfussnahme auf das Layout der Website](/configuration/theme/layout.md)
+