diff --git a/docs/assets/img/customizing/screenshot-custom-css-example-result.png b/docs/assets/img/customizing/screenshot-custom-css-example-result.png
new file mode 100644
index 00000000..6f280167
Binary files /dev/null and b/docs/assets/img/customizing/screenshot-custom-css-example-result.png differ
diff --git a/docs/assets/img/customizing/screenshot-custom-css-example.png b/docs/assets/img/customizing/screenshot-custom-css-example.png
new file mode 100644
index 00000000..ef09ceaa
Binary files /dev/null and b/docs/assets/img/customizing/screenshot-custom-css-example.png differ
diff --git a/docs/assets/img/customizing/screenshot-custom-css-fiddle-2.png b/docs/assets/img/customizing/screenshot-custom-css-fiddle-2.png
new file mode 100644
index 00000000..500b4f2e
Binary files /dev/null and b/docs/assets/img/customizing/screenshot-custom-css-fiddle-2.png differ
diff --git a/docs/assets/img/customizing/screenshot-custom-css-fiddle.png b/docs/assets/img/customizing/screenshot-custom-css-fiddle.png
new file mode 100644
index 00000000..f542f08a
Binary files /dev/null and b/docs/assets/img/customizing/screenshot-custom-css-fiddle.png differ
diff --git a/docs/assets/img/customizing/screenshot-custom-css-find-element.png b/docs/assets/img/customizing/screenshot-custom-css-find-element.png
new file mode 100644
index 00000000..b0d98142
Binary files /dev/null and b/docs/assets/img/customizing/screenshot-custom-css-find-element.png differ
diff --git a/docs/assets/img/customizing/screenshot-custom-css-inspect.png b/docs/assets/img/customizing/screenshot-custom-css-inspect.png
new file mode 100644
index 00000000..7e452ba9
Binary files /dev/null and b/docs/assets/img/customizing/screenshot-custom-css-inspect.png differ
diff --git a/docs/customizing/custom-css.md b/docs/customizing/custom-css.md
index 16023460..6e2e0574 100644
--- a/docs/customizing/custom-css.md
+++ b/docs/customizing/custom-css.md
@@ -6,11 +6,49 @@ nav_order: 99
 permalink: /customizing/custom-css
 ---
 
-## Custom-CSS
+## Custom-CSS 
 
 The custom.css file allows you to customize the appearance of Mainsail
 without the need of rebuilding it. All you need to do is to place a file
 named "custom.css" into the configuration directory ".theme" and define
 your css rules in there.
 
-![screenshot](../assets/img/customizing/screenshot-custom-css.png)
+![file-screenshot](../assets/img/customizing/screenshot-custom-css.png "custom.css file")
+
+![example result](../assets/img/customizing/screenshot-custom-css-example-result.png "custom.css result")
+
+
+### How to CSS
+
+You need to be familiar with the CSS (**C**ascading **S**tyle **S**heets) syntax.
+There are many resources to learn CSS online, for example:
+- https://www.w3schools.com/css/default.asp
+
+#### find the Element selector (example based on Chrome Browser)
+
+Use your browser's built-in developer tools to find the right selector of the element you want to add your own flair to.
+
+Open the developer tools:
+
+right click anywhere on the page and select "inspect" (or F12 on the keyboard)
+
+![open dev-tools](../assets/img/customizing/screenshot-custom-css-inspect.png "open dev-tools")
+
+1. Activate the "inspector" 
+2. Select the desired element
+3. Find the selector
+4. Use the style editor and fiddle arround 
+
+![find element](../assets/img/customizing/screenshot-custom-css-find-element.png "find the right element")
+
+![fiddle](../assets/img/customizing/screenshot-custom-css-fiddle.png "fiddle")
+
+When you have achieved your desired appearance copy the full "section" including selector and curly braces
+
+![fiddle 2](../assets/img/customizing/screenshot-custom-css-fiddle-2.png "fiddle 2")
+
+Then copy it to the "custom.css" file (you can keep everything or only what you have added)
+
+![example](../assets/img/customizing/screenshot-custom-css-example.png "custom.css example")
+
+NOTE: After saving, your browser may need a uncached reload to show the change (https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache#Bypassing_cache)
diff --git a/docs/setup-guide/manual-setup/moonraker.md b/docs/setup-guide/manual-setup/moonraker.md
index 96272d55..899dd04b 100644
--- a/docs/setup-guide/manual-setup/moonraker.md
+++ b/docs/setup-guide/manual-setup/moonraker.md
@@ -48,8 +48,11 @@ trusted_clients:
     2a02:810d:9340:33f6::/64
 
 [update_manager]
-client_repo: meteyou/mainsail
-client_path: ~/mainsail
+
+[update_manager client mainsail]
+type: web
+repo: meteyou/mainsail
+path: ~/mainsail
 ```
 
 > 🔥 **trusted_clients - read carefully** 🔥