diff --git a/Chapter-1-initial-architecture/README.adoc b/Chapter-1-initial-architecture/README.adoc
index a9a28f35..a43645fa 100644
--- a/Chapter-1-initial-architecture/README.adoc
+++ b/Chapter-1-initial-architecture/README.adoc
@@ -3,7 +3,11 @@
 
 ++++
 <div align="center">
-  <img src="../Assets/ea_banner.png" width="350" align="center" height="350" alt="ea banner">
+  <picture>
+    <source srcset="../Assets/ea_banner_dark.png" media="(prefers-color-scheme: dark)">
+    <source srcset="../Assets/ea_banner_light.png" media="(prefers-color-scheme: light)">
+    <img src="../Assets/ea_banner_light.png" width="350" height="350" alt="ea banner">
+  </picture>
 </div>
 ++++
 
diff --git a/Chapter-2-modules-separation/README.adoc b/Chapter-2-modules-separation/README.adoc
index 00bcfd62..3db4a59a 100644
--- a/Chapter-2-modules-separation/README.adoc
+++ b/Chapter-2-modules-separation/README.adoc
@@ -3,7 +3,11 @@
 
 ++++
 <div align="center">
-  <img src="../Assets/ea_banner.png" width="350" align="center" height="350" alt="ea banner">
+  <picture>
+    <source srcset="../Assets/ea_banner_dark.png" media="(prefers-color-scheme: dark)">
+    <source srcset="../Assets/ea_banner_light.png" media="(prefers-color-scheme: light)">
+    <img src="../Assets/ea_banner_light.png" width="350" height="350" alt="ea banner">
+  </picture>
 </div>
 ++++
 
diff --git a/Chapter-3-microservice-extraction/README.adoc b/Chapter-3-microservice-extraction/README.adoc
index 361bf0d0..3021346d 100644
--- a/Chapter-3-microservice-extraction/README.adoc
+++ b/Chapter-3-microservice-extraction/README.adoc
@@ -3,7 +3,11 @@
 
 ++++
 <div align="center">
-  <img src="../Assets/ea_banner.png" width="350" align="center" height="350" alt="ea banner">
+  <picture>
+    <source srcset="../Assets/ea_banner_dark.png" media="(prefers-color-scheme: dark)">
+    <source srcset="../Assets/ea_banner_light.png" media="(prefers-color-scheme: light)">
+    <img src="../Assets/ea_banner_light.png" width="350" height="350" alt="ea banner">
+  </picture>
 </div>
 ++++
 
diff --git a/Chapter-4-applying-tactical-domain-driven-design/README.adoc b/Chapter-4-applying-tactical-domain-driven-design/README.adoc
index a9064a9f..87162c10 100644
--- a/Chapter-4-applying-tactical-domain-driven-design/README.adoc
+++ b/Chapter-4-applying-tactical-domain-driven-design/README.adoc
@@ -3,7 +3,11 @@
 
 ++++
 <div align="center">
-  <img src="../Assets/ea_banner.png" width="350" align="center" height="350" alt="ea banner">
+  <picture>
+    <source srcset="../Assets/ea_banner_dark.png" media="(prefers-color-scheme: dark)">
+    <source srcset="../Assets/ea_banner_light.png" media="(prefers-color-scheme: light)">
+    <img src="../Assets/ea_banner_light.png" width="350" height="350" alt="ea banner">
+  </picture>
 </div>
 ++++