diff --git a/packages/website/docs/docs/block-types.md b/packages/website/docs/docs/block-types.md
index e405533cdc..ebd4271375 100644
--- a/packages/website/docs/docs/block-types.md
+++ b/packages/website/docs/docs/block-types.md
@@ -24,7 +24,7 @@ BlockNote includes a number of built-in block types, each with their own set of
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/paragraph_type_dark.png' : '../public/img/screenshots/paragraph_type.png'" alt="image" style="height: 29px">
+<img :src="isDark ? '/img/screenshots/paragraph_type_dark.png' : '/img/screenshots/paragraph_type.png'" alt="image" style="height: 29px">
 
 **Type & Props**
 
@@ -42,7 +42,7 @@ type ParagraphBlock = {
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/heading_type_dark.png' : '../public/img/screenshots/heading_type.png'" alt="image" style="height: 77px">
+<img :src="isDark ? '/img/screenshots/heading_type_dark.png' : '/img/screenshots/heading_type.png'" alt="image" style="height: 77px">
 
 **Type & Props**
 
@@ -64,7 +64,7 @@ type HeadingBlock = {
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/bullet_list_item_type_dark.png' : '../public/img/screenshots/bullet_list_item_type.png'" alt="image" style="height: 29px">
+<img :src="isDark ? '/img/screenshots/bullet_list_item_type_dark.png' : '/img/screenshots/bullet_list_item_type.png'" alt="image" style="height: 29px">
 
 **Type & Props**
 
@@ -82,7 +82,7 @@ type BulletListItemBlock = {
 
 **Appearance**
 
-<img :src="isDark ? '../public/img/screenshots/numbered_list_item_type_dark.png' : '../public/img/screenshots/numbered_list_item_type.png'" alt="image" style="height: 29px">
+<img :src="isDark ? '/img/screenshots/numbered_list_item_type_dark.png' : '/img/screenshots/numbered_list_item_type.png'" alt="image" style="height: 29px">
 
 **Type & Props**
 
diff --git a/packages/website/docs/docs/blocks.md b/packages/website/docs/docs/blocks.md
index d4f12e3510..361df43aa5 100644
--- a/packages/website/docs/docs/blocks.md
+++ b/packages/website/docs/docs/blocks.md
@@ -45,7 +45,7 @@ function App() {
 
 So, BlockNote is centered around the idea of blocks. A block - like a heading, paragraph, or list item - contains a piece of content and optionally nested blocks:
 
-<img :src="isDark ? '../public/img/screenshots/block_structure_dark.png' : '../public/img/screenshots/block_structure.png'" alt="image" style="width: 100%">
+<img :src="isDark ? '/img/screenshots/block_structure_dark.png' : '/img/screenshots/block_structure.png'" alt="image" style="width: 100%">
 
 In code, the `Block` type is used to describe any given block in the editor:
 
diff --git a/packages/website/docs/docs/formatting-toolbar.md b/packages/website/docs/docs/formatting-toolbar.md
index 1d7fac7c99..881ba087f1 100644
--- a/packages/website/docs/docs/formatting-toolbar.md
+++ b/packages/website/docs/docs/formatting-toolbar.md
@@ -16,7 +16,7 @@ const { isDark } = useData();
 
 The Formatting Toolbar appears whenever you highlight text in the editor, and is mainly used for styling.
 
-<img style="max-width:600px" :src="isDark ? '../public/img/screenshots/formatting_toolbar_dark.png' : '../public/img/screenshots/formatting_toolbar.png'" alt="image">
+<img style="max-width:600px" :src="isDark ? '/img/screenshots/formatting_toolbar_dark.png' : '/img/screenshots/formatting_toolbar.png'" alt="image">
 
 ## Custom Formatting Toolbar
 
diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md
index 0fef39f46c..d6d2733a66 100644
--- a/packages/website/docs/docs/side-menu.md
+++ b/packages/website/docs/docs/side-menu.md
@@ -7,7 +7,8 @@ path: /docs/side-menu
 
 <script setup>
 import { useData } from 'vitepress';
-import { getTheme, getStyles } from "./demoUtils";
+import { getTheme, getStyles } from "./demoUtils"; 
+import {ref} from "vue"; 
 
 const { isDark } = useData();
 </script>
@@ -16,11 +17,11 @@ const { isDark } = useData();
 
 The Block Side Menu appears whenever you hover over a block, and is used to drag & drop the block as well as add new ones below it.
 
-<img style="max-width:500px" :src="isDark ? '../public/img/screenshots/side_menu_dark.png' : '../public/img/screenshots/side_menu.png'" alt="image">
+<img style="max-width:500px" :src="isDark ? '/img/screenshots/side_menu_dark.png' : '/img/screenshots/side_menu.png'" alt="image">
 
 You can also click the drag handle in the Block Side Menu (`⠿`) to open the Drag Handle Menu.
 
-<img style="max-width:250px" :src="isDark ? '../public/img/screenshots/drag_handle_menu_dark.png' : '../public/img/screenshots/drag_handle_menu.png'" alt="image">
+<img style="max-width:250px" :src="isDark ? '/img/screenshots/drag_handle_menu_dark.png' : '/img/screenshots/drag_handle_menu.png'" alt="image">
 
 ## Custom Drag Handle Menu
 
diff --git a/packages/website/docs/docs/slash-menu.md b/packages/website/docs/docs/slash-menu.md
index dc30f3fd1d..272e6c1458 100644
--- a/packages/website/docs/docs/slash-menu.md
+++ b/packages/website/docs/docs/slash-menu.md
@@ -16,9 +16,7 @@ const { isDark } = useData();
 
 The Slash Menu is the list of commands which shows up whenever you type the "/" (slash) character, or when you click the "+" button in the [Side Menu](/docs/side-menu):
 
-<!-- ![../public/img/screenshots/slash_menu.png]() -->
-
-<img style="max-width:400px" :src="isDark ? '../public/img/screenshots/slash_menu_dark.png' : '../public/img/screenshots/slash_menu.png'" alt="image">
+<img style="max-width:400px" :src="isDark ? '/img/screenshots/slash_menu_dark.png' : '/img/screenshots/slash_menu.png'" alt="image">
 
 ## Slash Menu Items