diff --git a/x-pack/plugins/observability/public/assets/illustration_dark.svg b/x-pack/plugins/observability/public/assets/illustration_dark.svg
new file mode 100644
index 000000000000..44815a745514
--- /dev/null
+++ b/x-pack/plugins/observability/public/assets/illustration_dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/x-pack/plugins/observability/public/assets/illustration_light.svg b/x-pack/plugins/observability/public/assets/illustration_light.svg
new file mode 100644
index 000000000000..1690c68fd595
--- /dev/null
+++ b/x-pack/plugins/observability/public/assets/illustration_light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/x-pack/plugins/observability/public/assets/observability_overview.png b/x-pack/plugins/observability/public/assets/observability_overview.png
deleted file mode 100644
index 70be08af9745..000000000000
Binary files a/x-pack/plugins/observability/public/assets/observability_overview.png and /dev/null differ
diff --git a/x-pack/plugins/observability/public/pages/landing/index.tsx b/x-pack/plugins/observability/public/pages/landing/index.tsx
index b61409564125..512f4428d9bf 100644
--- a/x-pack/plugins/observability/public/pages/landing/index.tsx
+++ b/x-pack/plugins/observability/public/pages/landing/index.tsx
@@ -84,7 +84,9 @@ export const LandingPage = () => {
size="xl"
alt="observability overview image"
url={core.http.basePath.prepend(
- '/plugins/observability/assets/observability_overview.png'
+ `/plugins/observability/assets/illustration_${
+ theme.darkMode ? 'dark' : 'light'
+ }.svg`
)}
/>