diff --git a/docs/src/pages/index.jsx b/docs/src/pages/index.jsx
index bdc2f6a..1fdce84 100644
--- a/docs/src/pages/index.jsx
+++ b/docs/src/pages/index.jsx
@@ -30,7 +30,7 @@ function HomepageHeader() {
         <div className="row">
           <div className="col col--6">
             <a href="https://dir-demo.adriansoftware.de" target="_blank">
-              <img style={{ boxShadow: "0px 0px 10px 0px #8585857d" }} src="/img/p1.png" />
+              <img style={{ boxShadow: "0px 0px 10px 0px #8585857d" }} src="/img/main2.png" />
             </a>
             {/* TODO: iframe of demo */}
           </div>
@@ -73,7 +73,7 @@ function SectionDocker() {
 function Section2() {
   return <div className=" xxx" style={{ textAlign: "center", background: "#000000", padding: "3em", paddingTop: "3em", paddingBottom: "3em" }}>
     <h1 className="hero__title" style={{ color: "var(--ifm-color-gray-700)", marginLeft: "auto" }}>🌙 Darkmode</h1>
-    <img /* style={{ boxShadow: "0px 0px 10px 0px #8585857d" }} */ src="/img/p2.png" />
+    <img /* style={{ boxShadow: "0px 0px 10px 0px #8585857d" }} */ src="/img/main1.png" />
   </div>
 }
 
diff --git a/docs/static/img/main1.png b/docs/static/img/main1.png
new file mode 100644
index 0000000..ce2c444
Binary files /dev/null and b/docs/static/img/main1.png differ
diff --git a/docs/static/img/main2.png b/docs/static/img/main2.png
new file mode 100644
index 0000000..cea3061
Binary files /dev/null and b/docs/static/img/main2.png differ