diff --git a/sea-orm-pro/docs/01-introduction/01-sea-orm-pro.md b/sea-orm-pro/docs/01-introduction/01-sea-orm-pro.md
index bd073a769e..a67f1ebaf8 100644
--- a/sea-orm-pro/docs/01-introduction/01-sea-orm-pro.md
+++ b/sea-orm-pro/docs/01-introduction/01-sea-orm-pro.md
@@ -4,6 +4,8 @@ SeaORM Pro is an admin panel solution ...
 
 ## Architecture
 
+<img src="/sea-orm-pro/img/SeaORM Pro Architecture.png" className="dark-mode" />
+
 The tech stack is **RRLS** (pronounced release!): React, Rust, Loco, SeaQL. These four technologies form a full-stack solution for building data-centric applications.
 
 + Frontend: Ant Design React
diff --git a/sea-orm-pro/src/css/custom.css b/sea-orm-pro/src/css/custom.css
index 6f1c716d6f..0eaef4d3ba 100644
--- a/sea-orm-pro/src/css/custom.css
+++ b/sea-orm-pro/src/css/custom.css
@@ -86,3 +86,18 @@ div[class^=announcementBar_] {
 code span.token.table {
   display:inline;
 }
+
+html[data-theme='dark'] canvas.chart-js,
+html[data-theme='dark'] .badge-dark-mode,
+html[data-theme='dark'] img.dark-mode
+{
+  filter: invert(1) hue-rotate(180deg);
+}
+
+[data-theme='light'] img[src$='dark'],
+[data-theme='dark'] img[src$='light'],
+[data-theme='light'] video[data-theme='dark'],
+[data-theme='dark'] video[data-theme='light']
+{
+  display: none;
+}
diff --git a/sea-orm-pro/static/img/SeaORM Pro Architecture.png b/sea-orm-pro/static/img/SeaORM Pro Architecture.png
new file mode 100644
index 0000000000..1b47852305
Binary files /dev/null and b/sea-orm-pro/static/img/SeaORM Pro Architecture.png differ