diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..4a0f47428a74e06e6e5949b2cc66b438b292925e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+public_html/classes/redirect.admin.class.php_enabled.txt
+static/*
diff --git "a/docs/10_\360\237\223\221_Features.md" "b/docs/10_\360\237\223\221_Description.md"
similarity index 79%
rename from "docs/10_\360\237\223\221_Features.md"
rename to "docs/10_\360\237\223\221_Description.md"
index f74d11d627eeb793166e12ea074892dd58865731..f98e2e196f855dec69aaf2f14762abe7bcc305f2 100644
--- "a/docs/10_\360\237\223\221_Features.md"
+++ "b/docs/10_\360\237\223\221_Description.md"
@@ -1,4 +1,9 @@
-# Features #
+## Requirements
+
+* PHP 7+
+* Webserver (docs describe usage for Apache httpd)
+
+## Features
 
 * handle Redirects with strings or regex
 * one config file per handled domain
diff --git "a/docs/40_\360\237\226\245\357\270\217_Web_ui.md" "b/docs/40_\360\237\226\245\357\270\217_Web_ui.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2c7480e5b0c6190a9bdaa3cf9ae896c27325ecc7
--- /dev/null
+++ "b/docs/40_\360\237\226\245\357\270\217_Web_ui.md"
@@ -0,0 +1,48 @@
+## The web ui
+
+The web ui is a viewer for the configuration with some additional help features:
+
+* A check of the configuration shows you found errors.
+* DNS check of a hostname
+* live view of current http response header
+* view configs
+
+## Enable web ui
+
+By default the web ui is disabled.
+
+In the classes folder you find a file `classes/redirect.admin.class.php_enabled.txt.dist` ... just copy it to `redirect.admin.class.php_enabled.txt` (without ".dist").
+
+Then you can open **/admin** in your webbrowser, eg.  `http(s)://servername/admin/`.
+
+## Domains and redirects
+
+You get a list with all defined domains and its redirects + aliases.
+
+In the table you see the columns
+
+* **Host** - the hostname/ FQDN that has a redirect rule
+  * 🔷 Domain with config entries
+  * ◻️ Alias pointng to the config of another domain
+* **Ip address** - the found ip of the fqdn. 
+  * 🟢 green = domain is on the same ip like the redirect tool.
+  * 🟠 yellow = domain is on another domain (= the config from here does not work because redirect is handled on another system)
+  * ❗= Hostname was not found in DNS
+* **Setup** - type of setup: one of config|alias
+* **Type** - type of redirect: one of direct|regex
+* **From** - source that will be redirected
+* **Code** - http response code for redirection
+* **Target** - target url
+
+## Http header
+
+If click on the link of the host you get a live view of a response of a http HEAD request to the webroot of this domain.
+
+The redirects of the type "direct" have a linked "From" field value. If you click on it you get a live view of the http response header of `https://[Server]/[From]`.
+
+## Config
+
+If you click on the linked text "config" you get the content of the config file for this domain with all its redirects.
+
+If you click on the linked text "alias" you get the configuration of the domain that points to the alias domain.
+
diff --git a/docs/_index.md b/docs/_index.md
index 62f956b5cc6f6adff8730d2107d350ee2b46a635..f406076be7bcce2e362ff40cf1b39887c83ec29f 100644
--- a/docs/_index.md
+++ b/docs/_index.md
@@ -1,15 +1,11 @@
-
-# IML Redirect #
-
-Redirect urls of any domain that points here.
-
-Author: Axel Hahn; Institute for Medical Education; University of Bern
-
+<html>
+<div class="hero">
+    <h2>IML Redirect</h2>
+    Redirect urls of any domain that points here.
+</div>
+</html>
+
+👤 Author: Axel Hahn; Institute for Medical Education; University of Bern \
 📄 Source: <https://git-repo.iml.unibe.ch/iml-open-source/redirect-handler> \
 📜 License: GNU GPL 3.0 \
 📖 Docs: <https://os-docs.iml.unibe.ch/redirect-handler/>
-
-## Requirements ##
-
-* PHP 7+
-* Webserver (docs describe usage for Apache httpd)
diff --git a/docs/config.json b/docs/config.json
index 0f1bdb28a7432798e20d3cc671e32676fc002ceb..795d43b371424e106aeb483483b9d28fb5e16f57 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -13,7 +13,8 @@
         "jump_buttons": true,
         "edit_on_github_": "iml-it/appmonitor/tree/master/docs",
         "links": {
-            "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/redirect-handler/"
+            "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/redirect-handler/",
+            "IML Opensource": "https://os-docs.iml.unibe.ch/"
         },
         "theme": "daux-blue",
         "search": true
diff --git a/docs/style.css b/docs/style.css
index 909562cb91d2a8335f4470332ef1e07bdb2ee44c..18463c799d9cd101d8f9b27a282128cde4494d99 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,176 +1,267 @@
 /*
-
-    patch css elements of daux.io blue theme
-    version 2022-05-13
-
+    override css elements of daux.io blue theme
+    version 2022-11-30
 */
-
-
-/* ---------- vars ---------- */ 
-
-:root{
-
-    /* background colors */
-    --bg:none;
-    --bg-body: #fff;
-    --bg-navlinkactive:#f4f4f4;
-    --bg-navlinkactive: linear-gradient(-90deg,rgba(0,0,0,0), rgba(40,60,80,0.05) 30%);
-    --bg-pre:#f8f8f8;
-    --bg-toc: #fff;
-
-    /* foreground colors */
-    --color: #234;
-    --navlinkactive:#f33;
-    --title: #aaa;
-
-    --link:#12a;
-    --toclink:rgba(40,60,80,0.8);
-
-    --h1: rgba(40,60,80,0.8);
-    --h1-bottom: 1px solid rgba(40,60,80,0.1);
-    --h2: #468;
-    --h3: #579;
-
+:root {
+    /* Axels Overrides */
+    --color-text: #222;
+    --link-color: #822;
+    --brand-color: var(--color-secondary);
+    --brand-background: var(--body-background);
+    --hr-color: none;
+    --search-field-background: none;
+    --search-field-border-color: none;
+    --sidebar-background: var(--body-background);
+    --sidebar-border-color: none;
+    --sidebar-link-active-background: #e8f4f6;
+    --sidebar-link-active-background: #eee;
+    /* Axels custom values */
+    --axel_bg-toc: var(--body-background);
+    --axel_bg-toc-head: #f8f8f8;
+    --axel_brand-background: none;
+    --axel_brand-pre-background: rgb(255, 0, 51);
+    ;
+    --axel_brand-pre-background-hover: rgb(255, 0, 51);
+    ;
+    --axel_h1_header: none;
+    --axel_h1: #345;
+    --axel_h1-bg: none;
+    --axel_h1-bottom: 3px solid none;
+    --axel_h2: #156;
+    --axel_h2-bg: #f8fafb;
+    --axel_h2-bottom: 2px solid #467;
+    --axel_h2-hero-bottom: 2px solid #912;
+    --axel_h3: #278;
+    --axel_h3-bottom: 1px solid #ddd;
+    --axel_hero_bg: #f8f8f8;
+    --axel_nav-bg: #fcfcfc;
+    --axel_nav-buttomborder: #ddd;
+    --axel_pre-background: #f8f8f8;
+    --axel-th-background: #d0e0e8;
+    --axel-article-nav-border-top: 0px dotted #ddd;
 }
 
-/* ---------- tags ---------- */
+.dark {
+    /* Axels Overrides */
+    --color-text: #c0c0c0;
+    --link-color: #b44;
+    --brand-color: var(--color-text);
+    --brand-background: var(--body-background);
+    --hr-color: none;
+    --code-tag-background-color_: #bcc;
+    --search-field-background: none;
+    --search-field-border-color: none;
+    --sidebar-background: var(--body-background);
+    --sidebar-border-color: none;
+    --sidebar-link-active-background: #333;
+    /* Axels custom values */
+    --axel_bg-toc: var(--body-background);
+    --axel_bg-toc-head: #333;
+    --axel_brand-background: none;
+    --axel_brand-pre-background: rgb(255, 0, 51);
+    ;
+    --axel_brand-pre-background-hover: rgb(255, 0, 51);
+    ;
+    --axel_h1_header: none;
+    --axel_h1: #777;
+    --axel_h1-bg: none;
+    --axel_h1-bottom: none;
+    --axel_h2: #467;
+    --axel_h2-bg: #202020;
+    --axel_h2-bottom: 2px solid #256;
+    --axel_h2-hero-bottom: 2px solid #712;
+    --axel_h3: #589;
+    --axel_h3-bottom: 1px solid #333;
+    --axel_hero_bg: #242424;
+    --axel_nav-bg: #242424;
+    --axel_nav-buttomborder: #555;
+    --axel_pre-background: #bcc;
+    --axel-th-background: #203038;
+    --axel-article-nav-border-top: 0px dotted #234;
+}
 
+/* ---------- left side ---------- */
 a.Brand::before {
-	background: rgb(255,0,51);
-	color: #fff;
+    background: var(--axel_brand-pre-background);
+    color: #fff;
     font-family: arial;
-	font-weight: bold;
-	padding: 0.5em 0.3em;
-	content: 'IML';
+    font-weight: bold;
+    padding: 0.5em 0.3em;
+    content: 'IML';
     margin-right: 0.4em;
+    float: left;
 }
 
-body, *{color: var(--color);}
-body{background: var(--bg-body);}
-
-
-a{color: var(--link);}
-a:hover{opacity: 0.7;}
-
-h1>a{ color:var(--title);}
-_h1:nth-child(1){position: fixed; background: var(--bg); box-shadow: 0 0 1em #ccc; padding: 0 1em}
-h1:nth-child(1)>a{ color:var(--navlinkactive); }
-
-.s-content h1{color: var(--h1); font-size: 200%; font-weight:bold; margin-top: 2em; border-bottom: var(--h1-bottom);}
-.s-content h2{color: var(--h2); font-size: 160%; }
-.s-content h3{color: var(--h3); font-size: 140%; }
-.s-content h4{margin: 0; font-size: 100%; text-align: center; background-color: rgba(0,0,0,0.05);padding: 0.3em;}
-
-.s-content pre{
-    background: var(--bg-pre);
+a.Brand:hover::before {
+    background: var(--axel_brand-pre-background-hover);
 }
 
-/* ---------- classes ---------- */
-
-.required{color:#a42;}
-.optional{color:#888;}
+a.Brand {
+    background: var(--axel_brand-background);
+    font-size: 200%;
+    height: 4em;
+}
 
+/* ---------- page header: breadcrumb ---------- */
+.Page__header {
+    border: none;
+}
 
-/* ----- top left */
-.Brand,
-.Columns__left {
-	background: var(--bg);
-	border-right: 0px solid #e7e7e9;
-    color: var(--color);
+.Page__header a {
+    color: var(--axel_h1_header);
 }
-.Brand{font-size: 200%;
-    background_: linear-gradient(-10deg,#fff 50%, #ddd);
-    background: var(--bg);
+
+.Page__header h1 {
+    font-size: 1.3em;
 }
-.Columns__right__content {
-	background: var(--bg);
+
+/* ---------- page content ---------- */
+.s-content {
+    padding-top: 1em;
 }
 
-/* ----- Navi left */
+.s-content h1 {
+    background: var(--axel_h1-bg);
+    color: var(--axel_h1);
+    font-size: 200%;
+    font-weight: bold;
+    margin-bottom: 2em;
+    margin-top: 2em;
+    border-bottom: var(--axel_h1-bottom);
+}
 
-.Nav a:hover{
-    background: none;
-    color: var(--navlinkactive) !important;
+.s-content h2 {
+    background: var(--axel_h2-bg);
+    color: var(--axel_h2);
+    font-size: 180%;
+    font-weight: bold;
+    margin-top: 4em;
+    border-bottom: var(--axel_h2-bottom);
 }
 
-.Nav__item--active {
-    border-right_: 0.3em solid var(--navlinkactive);
+h1:first-of-type {
+    margin-top: 0em;
 }
-.Nav__item--active > a{
-	background: var(--bg-navlinkactive);
-    color: var(--navlinkactive);
+
+h2:first-of-type {
+    margin-top: 0em;
 }
-.Nav .Nav .Nav__item--active a {
-    color: var(--navlinkactive);
+
+.s-content h3 {
+    background: var(--axel_h3-bg);
+    color: var(--axel_h3);
+    font-size: 150%;
+    font-weight: bold;
+    margin-top: 3em;
+    border-bottom: var(--axel_h3-bottom);
 }
-.Nav .Nav .Nav__item a {
-	opacity: 1;
+
+.s-content h4 {
+    margin: 0;
+    font-size: 100%;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.05);
+    padding: 0.3em;
 }
-.Nav__item--open > a {
-	background-color: var(--bg);
+
+.s-content pre {
+    background: var(--axel_pre-background);
 }
 
-.Nav a[href*="__Welcome"]{
-    background: url("/icons/house.png") no-repeat 10px 4px ;
-    padding-left: 40px;
+/* FIX smaller fnt size in tables */
+.s-content table {
+    font-size: 1em;
 }
-.Nav a[href*="__How_does_it_work"]{
-    background: url("/icons/light-bulb.png") no-repeat 10px 4px ;
-    padding-left: 40px;
+
+.s-content table th {
+    background: var(--axel-th-background);
 }
 
+.s-content h3 code {
+    border: none;
+    background: none;
+}
 
+article nav {
+    border-top: var(--axel-article-nav-border-top);
+    margin: 8em 0 5em;
+}
 
+.Pager li>a {
+    padding: 1em 2em;
+}
 
 /* ---------- classes ---------- */
+.required {
+    color: #a42;
+}
 
-/* FIX smaller fnt size in tables */
-.s-content table {
-	font-size: 1em;
+.optional {
+    color: #888;
+}
+
+div.hero {
+    background: var(--axel_hero_bg);
+    border-radius: 2em;
+    padding: 5em 2em;
+    text-align: center;
+    margin-bottom: 1.5em;
 }
 
+div.hero h2 {
+    color: var(--color-text);
+    background: none;
+    border-bottom: var(--axel_h2-hero-bottom);
+    font-size: 300%;
+    margin: 0 0 2em;
+}
 
-/* TOC */
-@media(min-width:1700px){
-    .TableOfContentsContainer{
+/* ---------- TOC ---------- */
+@media(min-width:1700px) {
+    .TableOfContentsContainer {
         position: fixed;
         right: 2em;
         top: 1em;
     }
 }
 
-.TableOfContentsContainer{
-    border-top-left-radius: 1em;
-    background-color: var(--bg-toc);
-	border-left: 2px solid rgba(0,0,0,0.05);
-    padding: 0em;
+.TableOfContentsContainer {
+    background-color: var(--axel_bg-toc);
+    padding: 0.5em;
 }
-.TableOfContentsContainer__content {
 
-	border: none;
-	font-size: 0.5em;
+.s-content .TableOfContentsContainer h4 {
+    background-color: var(--axel_bg-toc-head);
+    border-top-left-radius: 1em;
+    font-size: 1.1em;
+    margin: 0;
+    padding: 0;
+}
 
+.TableOfContentsContainer__content {
+    border-width: 1px;
+    font-size: 0.5em;
 }
-ul.TableOfContents ul{
-	list-style-type: none;
+
+ul.TableOfContents ul {
+    list-style-type: none;
     padding-left: 1em;
 }
-.TableOfContentsContainer a{ color:var(--toclink);}
 
-.TableOfContentsContainer__content > .TableOfContents > li + li {
-	border-top: none;
-}
-.TableOfContentsContainer__content > .TableOfContents > li {
-	border-bottom: 1px dashed #ddd;
-}
+/* ----- Icons on links --- */
 
-/* pager - prev .. next */
-.s-content{
-    margin-bottom: 6em;
+.EditOn a::before{
+    content: '✏️ ';
 }
-.Pager{
-    border-top: 1px dashed #aaa; margin: 0; padding: 1em;
+
+.Links a[href^="https://github.com/"]::before {
+    content: '🌐 ';
 }
-.Pager a{
-    color:var(--navlinkactive);
+
+.Links a[href^="https://git-repo.iml.unibe.ch/"]::before {
+    content: '🌐 ';
 }
+
+.Links a[href^="https://os-docs.iml.unibe.ch"]::before {
+    content: '📗 ';
+}
\ No newline at end of file