diff --git a/src/assets/grlx-arch-dark.webp b/src/assets/grlx-arch-dark.webp
new file mode 100644
index 0000000..0c39050
--- /dev/null
+++ b/src/assets/grlx-arch-dark.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c0be79de7cde17b03b1e46ef75edb2baebebd32b0605bad3fcb3a2babe924e6
+size 68258
diff --git a/src/assets/grlx-arch-light.webp b/src/assets/grlx-arch-light.webp
new file mode 100644
index 0000000..8e42672
--- /dev/null
+++ b/src/assets/grlx-arch-light.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:852c13313142bfb83fefad5bbabd64f5e9f9eba95ef7bf180553dbe140ba2f24
+size 66244
diff --git a/src/components/ArchitectureImage.astro b/src/components/ArchitectureImage.astro
new file mode 100644
index 0000000..9f6482d
--- /dev/null
+++ b/src/components/ArchitectureImage.astro
@@ -0,0 +1,16 @@
+---
+import { Image } from 'astro:assets'
+import darkArch from "../assets/grlx-arch-dark.webp"
+import lightArch from '../assets/grlx-arch-light.webp'
+---
+
+<Image
+  class="dark:hidden"
+  src={lightArch}
+  alt="ADAtomic logo"
+/>
+<Image
+  class="hidden dark:inline"
+  src={darkArch}
+  alt="ADAtomic logo dark arch"
+/>
diff --git a/src/content/docs/architecture/overview.md b/src/content/docs/architecture/overview.mdx
similarity index 88%
rename from src/content/docs/architecture/overview.md
rename to src/content/docs/architecture/overview.mdx
index 64d4c26..7738bd5 100644
--- a/src/content/docs/architecture/overview.md
+++ b/src/content/docs/architecture/overview.mdx
@@ -2,8 +2,12 @@
 title: Overview
 description: A brief description of the grlx architecture
 ---
+
+import ArchitectureImage from '../../../components/ArchitectureImage.astro'
+
 At a high level our architecture looks like the following:
 
+<ArchitectureImage />
 We can boil down the `grlx` into three different parts: the farmer, the sprout, and the CLI.
 
 ## Farmer
diff --git a/src/custom.css b/src/custom.css
index 43e37eb..149e979 100644
--- a/src/custom.css
+++ b/src/custom.css
@@ -3,3 +3,7 @@
   --sl-card-border: #454FBF !important;
 }
 
+[data-theme="light"] .hidden{
+  display: none;
+}
+