diff --git a/public/assets/logos.svg b/public/assets/logos-dark.svg
similarity index 100%
rename from public/assets/logos.svg
rename to public/assets/logos-dark.svg
diff --git a/public/assets/Artboard 15.svg b/public/assets/logos-light.svg
similarity index 100%
rename from public/assets/Artboard 15.svg
rename to public/assets/logos-light.svg
diff --git a/public/assets/ui-ux.svg b/public/assets/ui-ux-dark.svg
similarity index 100%
rename from public/assets/ui-ux.svg
rename to public/assets/ui-ux-dark.svg
diff --git a/public/assets/Artboard 16.svg b/public/assets/ui-ux-light.svg
similarity index 100%
rename from public/assets/Artboard 16.svg
rename to public/assets/ui-ux-light.svg
diff --git a/public/assets/verpakkingen.svg b/public/assets/verpakkingen-dark.svg
similarity index 100%
rename from public/assets/verpakkingen.svg
rename to public/assets/verpakkingen-dark.svg
diff --git a/public/assets/Artboard 14.svg b/public/assets/verpakkingen-light.svg
similarity index 100%
rename from public/assets/Artboard 14.svg
rename to public/assets/verpakkingen-light.svg
diff --git a/public/assets/zetwerk.svg b/public/assets/zetwerk-dark.svg
similarity index 100%
rename from public/assets/zetwerk.svg
rename to public/assets/zetwerk-dark.svg
diff --git a/public/assets/Artboard 13.svg b/public/assets/zetwerk-light.svg
similarity index 100%
rename from public/assets/Artboard 13.svg
rename to public/assets/zetwerk-light.svg
diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html
index 84164bd..404c7e5 100644
--- a/src/app/services/services.component.html
+++ b/src/app/services/services.component.html
@@ -1,16 +1,20 @@
 <div class="service">
-  <img src="assets/zetwerk.svg" alt="zetwerk" />
+  <img src="assets/zetwerk-dark.svg" alt="zetwerk" class="only-on-dark"/>
+  <img src="assets/zetwerk-light.svg" alt="zetwerk" class="only-on-light"/>
   <h2>Zetwerk van boeken</h2>
 </div>
 <div class="service">
-  <img src="assets/verpakkingen.svg" alt="Verpakkingen" />
+  <img src="assets/verpakkingen-dark.svg" alt="Verpakkingen" class="only-on-dark" />
+  <img src="assets/verpakkingen-light.svg" alt="Verpakkingen" class="only-on-light" />
   <h2>Verpakkingen</h2>
 </div>
 <div class="service">
-  <img src="assets/logos.svg" alt="Logos" />
+  <img src="assets/logos-dark.svg" alt="Logos" class="only-on-dark" />
+  <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
   <h2>logo's en huisstijlen</h2>
 </div>
 <div class="service">
-  <img src="assets/ui-ux.svg" alt="UX/UI" />
+  <img src="assets/ui-ux-dark.svg" alt="UX/UI" class="only-on-dark" />
+  <img src="assets/ui-ux-light.svg" alt="UX/UI" class="only-on-light" />
   <h2>UX/UI</h2>
 </div>
diff --git a/src/styles.scss b/src/styles.scss
index ef23c63..46840ea 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,9 +1,21 @@
 body {
+  .only-on-dark {
+    display: none;
+  }
+
   // dark mode
   @media (prefers-color-scheme: dark) {
     --text-color: rgb(222, 112, 108);
     --background-color: rgb(41, 23, 44);
     --accent-color: rgb(222, 112, 108);
+
+    .only-on-dark {
+      display: inline-block;
+    }
+
+    .only-on-light {
+      display: none;
+    }
   }