diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000000000000000000000000000000000000..9139acc32a4b030a10ed0cb04ecb9a3f24ad71d1
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "device-pictures"]
+	path = device-pictures
+	url = https://github.com/freifunk/device-pictures.git
diff --git a/app.css b/app.css
index 613538533011f54497e9b1f1f95f7dbd9cb9d2b6..2c28310ec5d9ef4af928463f7ebf9c329c961eb7 100644
--- a/app.css
+++ b/app.css
@@ -1,15 +1,31 @@
 
 * {
   box-sizing: border-box;
+
+  --background-color: white;
+  --text-color: #333;
+  --table-alternate-color: #f9f9f9;
+  --background-color-attribution: rgba(255, 255, 255, 0.8);
+}
+
+@media (prefers-color-scheme: dark) {
+  * {
+    --background-color: #333333;
+    --text-color: #cccccc;
+    --table-alternate-color: #444;
+    --background-color-attribution: rgba(51, 51, 51, 0.8);
+  }
 }
 
+
+
 body {
   margin: 0;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 14px;
   line-height: 1.42;
-  color: #333;
-  background-color: #fff;
+  color: var(--text-color);
+  background-color: var(--background-color);
   overflow-y: scroll;
 }
 
@@ -68,11 +84,11 @@ h1, h2, h3, h4, h5, h6 {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: #fff;
+  background: var(--background-color);
 }
 
 .table-striped > tbody > tr:nth-of-type(2n+1) {
-  background-color: #f9f9f9;
+  background-color: var(--table-alternate-color);
 }
 
 .table td, th {
@@ -95,7 +111,7 @@ h1, h2, h3, h4, h5, h6 {
   bottom: 0;
   margin: 0;
   padding: 0.5em;
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--background-color-attribution);
 }
 
 #branchName {
@@ -230,7 +246,7 @@ h1, h2, h3, h4, h5, h6 {
   font: inherit;
   color: inherit;
   margin-bottom: .5em;
-  background: #fff;
+  background: var(--background-color);
   border: none;
   border: 1px solid #ddd;
   box-shadow: 1px 2px 2px 0 #ccc;
@@ -262,7 +278,7 @@ h1, h2, h3, h4, h5, h6 {
   display: inline-block;
   list-style-type: none;
   font: inherit;
-  color: black;
+  color: var(--text-color);
   margin: .5em;
   padding: .5em 1em;
   border: none;
@@ -272,7 +288,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #wizard .btn:hover {
-  color: black;
+  color: var(--text-color);
 }
 
 #wizard .imagePreview {
@@ -309,7 +325,7 @@ h1, h2, h3, h4, h5, h6 {
   min-height: 11em;
   margin: 0.5em;
   padding: 0.5em;
-  border: 1px solid white;
+  border: 1px solid var(--background-color);
   text-align: center;
 }
 
diff --git a/app.js b/app.js
index 64824680a4bc931f00db213eef7517184b79fd13..92e9c08bcf091e515685936cedffe7bb1b815c7e 100644
--- a/app.js
+++ b/app.js
@@ -503,7 +503,7 @@ var firmwarewizard = function() {
       'version': version,
       'location': location,
       'size': size,
-      'preview': preview+".jpg",
+      'preview': preview+".svg",
       'category': device.category
     });
   }
@@ -699,7 +699,7 @@ var firmwarewizard = function() {
   }
 
   function setDefaultImg(e) {
-    fallbackImg = PREVIEW_PICTURES_DIR+'no_picture_available.jpg';
+    fallbackImg = PREVIEW_PICTURES_DIR+'no_picture_available.svg';
     if (e.target.src.indexOf(fallbackImg) == -1) {
       e.target.src = fallbackImg;
     }
diff --git a/config.js b/config.js
index 515b68b75029482e83887a2b54903529690b26e9..09fd4ced767473ec1f9f5862089057502f2e8df2 100644
--- a/config.js
+++ b/config.js
@@ -59,7 +59,7 @@ var config = {
   // experimental branches (show a warning for these branches)
   experimental_branches: ['experimental', 'nightly'],
   // path to preview pictures directory
-  preview_pictures: 'pictures/',
+  preview_pictures: 'device-pictures/pictures-svg/',
   // link to changelog
   changelog: 'https://wiki.freifunk-stuttgart.net/technik:software:gluon:firmwareversionen_milestones'
 };
diff --git a/device-pictures b/device-pictures
new file mode 160000
index 0000000000000000000000000000000000000000..36efe11f39b714a6377ada377da74e2c3a751008
--- /dev/null
+++ b/device-pictures
@@ -0,0 +1 @@
+Subproject commit 36efe11f39b714a6377ada377da74e2c3a751008
diff --git a/ffs-logo_weiss.png b/ffs-logo_weiss.png
new file mode 100644
index 0000000000000000000000000000000000000000..0952eaf1a0c086a942468f123b126b832b4f5e47
Binary files /dev/null and b/ffs-logo_weiss.png differ
diff --git a/index.html b/index.html
index cf923ca7a21ef552eaa8f125fa359e6a5e1d7fbe..3fec7b5b7899a4cb29c5bb5bc946584e9f7f38ba 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,10 @@
     </div>
     <div id="wizard">
       <div class="center">
-        <a href="./index.html"><img src="./ffs-logo.png" class="center"></a>
+        <a href="./index.html"><picture>
+          <source srcset="ffs-logo_weiss.png" media="(prefers-color-scheme: dark)">
+          <img id="logo" src="./ffs-logo.png" class="center">
+        </picture></a>
       </div>
       <div class="pane-wrapper">
         <div id="model-pane" class="pane">