diff --git a/docs/sdk/alert.mdx b/docs/sdk/alert.mdx
index 9caac9a88..10d4947d7 100644
--- a/docs/sdk/alert.mdx
+++ b/docs/sdk/alert.mdx
@@ -19,7 +19,7 @@ The `alert` function adds an alert notification to your app.
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/alert.png"
+  src="../images/alert.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/checkbox.mdx b/docs/sdk/checkbox.mdx
index 0d85bf734..7d2513512 100644
--- a/docs/sdk/checkbox.mdx
+++ b/docs/sdk/checkbox.mdx
@@ -19,7 +19,7 @@ The `checkbox` function adds an interactive check box to your app.
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/checkbox.png"
+  src="../images/checkbox.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/playground.mdx b/docs/sdk/playground.mdx
index 8fb4cf5b6..c17854413 100644
--- a/docs/sdk/playground.mdx
+++ b/docs/sdk/playground.mdx
@@ -20,7 +20,7 @@ The `playground` function allows you to create an interactive SQL playground wit
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/playground.png"
+  src="../images/playground.png"
   alt="Playground UI Example"
 />
 </Frame>
@@ -89,4 +89,4 @@ The playground component:
 ## Related Functions
 
 - `query()`: Executes SQL queries directly
-- `get_df()`: Retrieves full datasets
\ No newline at end of file
+- `get_df()`: Retrieves full datasets
diff --git a/docs/sdk/plotly.mdx b/docs/sdk/plotly.mdx
index e3131ffc4..0be67aa38 100644
--- a/docs/sdk/plotly.mdx
+++ b/docs/sdk/plotly.mdx
@@ -18,7 +18,7 @@ The `plotly` function allows you to embed interactive Plotly charts into your ap
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/plotly.png"
+  src="../images/plotly.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/progress.mdx b/docs/sdk/progress.mdx
index 0c2bc029b..27c3ce075 100644
--- a/docs/sdk/progress.mdx
+++ b/docs/sdk/progress.mdx
@@ -19,7 +19,7 @@ The `progress` function adds a progress/work done indicator to your app.
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/progress.png"
+  src="../images/progress.png"
   alt="Hero Light"
 />
 </Frame>
@@ -44,4 +44,4 @@ for i in range(10):
     # Update progress as work is done
     progress(label="Processing Files", value=i * 10)
     time.sleep(0.5)  # Simulate work being done
-```
\ No newline at end of file
+```
diff --git a/docs/sdk/selectbox.mdx b/docs/sdk/selectbox.mdx
index 3c8f2bb0d..51415cbfe 100644
--- a/docs/sdk/selectbox.mdx
+++ b/docs/sdk/selectbox.mdx
@@ -25,7 +25,7 @@ The `selectbox` function creates a dropdown menu in your app, allowing users to
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/selectbox.png"
+  src="../images/selectbox.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/sidebar.mdx b/docs/sdk/sidebar.mdx
index 5106a3dc7..f57874029 100644
--- a/docs/sdk/sidebar.mdx
+++ b/docs/sdk/sidebar.mdx
@@ -26,7 +26,7 @@ The `sidebar` function adds a sidebar to your app, optionally allowing you to cu
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/sidebar.png"
+  src="../images/sidebar.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/slider.mdx b/docs/sdk/slider.mdx
index 3d7bcaede..897ed2f4c 100644
--- a/docs/sdk/slider.mdx
+++ b/docs/sdk/slider.mdx
@@ -29,7 +29,7 @@ The `slider` function adds an interactive slider to your app, enabling users to
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/slider.png"
+  src="../images/slider.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/table.mdx b/docs/sdk/table.mdx
index 00fda857f..0c351b248 100644
--- a/docs/sdk/table.mdx
+++ b/docs/sdk/table.mdx
@@ -19,7 +19,7 @@ The `table` function provides an easy way to display datasets in an interactive
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/table.png"
+  src="../images/table.png"
   alt="Hero Light"
 />
 </Frame>
diff --git a/docs/sdk/topbar.mdx b/docs/sdk/topbar.mdx
index f3e3850e4..2515986a5 100644
--- a/docs/sdk/topbar.mdx
+++ b/docs/sdk/topbar.mdx
@@ -34,7 +34,7 @@ This will add the topbar to your app:
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/topbar.png"
+  src="../images/topbar.png"
   alt="Hero Light"
 />
-</Frame>
\ No newline at end of file
+</Frame>
diff --git a/docs/sdk/workflow_dag.mdx b/docs/sdk/workflow_dag.mdx
index ccbb145ad..d3183a465 100644
--- a/docs/sdk/workflow_dag.mdx
+++ b/docs/sdk/workflow_dag.mdx
@@ -18,7 +18,7 @@ The `workflow_dag` function renders a Directed Acyclic Graph (DAG) visualization
 <Frame>
 <img
   className="block dark:hidden"
-  src="/images/workflow.png"
+  src="../images/workflow.png"
   alt="Hero Light"
 />
 </Frame>