diff --git a/website/docs/intro.md b/website/docs/intro.mdx
similarity index 90%
rename from website/docs/intro.md
rename to website/docs/intro.mdx
index c2d0858632..51fd376f9f 100644
--- a/website/docs/intro.md
+++ b/website/docs/intro.mdx
@@ -4,11 +4,18 @@ sidebar_position: 1
 slug: /
 ---
 
+import { useColorMode } from '@docusaurus/theme-common';
+
 # What is Fluss?
 
 Fluss is a streaming storage built for real-time analytics & AI which can serve as the real-time data layer for Lakehouse architectures.
 
-![arch](/img/fluss.png)
+{(() => {
+  const { colorMode } = useColorMode();
+  return (
+    <img src={colorMode === 'dark' ? '/img/fluss.png' : '/img/fluss_light_mode.png'} alt="arch" />
+  );
+})()}
 
 It bridges the gap between **streaming data** and the data **Lakehouse** by enabling low-latency, high-throughput data ingestion and processing while seamlessly integrating with popular compute engines like **Apache Flink**, with **Apache Spark** and **StarRocks** coming soon.
 
diff --git a/website/static/img/fluss_light_mode.png b/website/static/img/fluss_light_mode.png
new file mode 100644
index 0000000000..ec3d895250
Binary files /dev/null and b/website/static/img/fluss_light_mode.png differ