diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index b4c5e09176f1a6917c581ef56855625cb7b554ce..bd521bf1650a654330f85a6bb1a429aa9d33f3cf 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -7,13 +7,14 @@ module.exports = {
                 title: 'Components',
                 collapsable: false,
                 children: [
-                    '/components/DragGrid.md',
+                    '/examples/Generic.md',
                 ]
             }
         ],
         nav: [
             { text: 'Home', link: '/' },
             { text: 'Guide', link: '/guide/' },
+            { text: 'Examples', link: '/examples/Generic.md'},
             { text: 'Repository', link: 'https://edugit.org/AlekSIS/libs/vue-draggable-grid/' }
         ]
     }
diff --git a/docs/components/DragGrid.md b/docs/components/DragGrid.md
deleted file mode 100644
index e8fe7d040b9773c15088798fde4e36a3256fa060..0000000000000000000000000000000000000000
--- a/docs/components/DragGrid.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# DragGrid
-
-`DragGrid` is a cool component. Here's how to use it...
-
-<template>
-  <DragGrid :rows="5" :cols="5" v-model="items"></DragGrid>
-</template>
\ No newline at end of file
diff --git a/docs/examples/Generic.md b/docs/examples/Generic.md
new file mode 100644
index 0000000000000000000000000000000000000000..520206bc1d9ade46086d2e9678169531e32b0617
--- /dev/null
+++ b/docs/examples/Generic.md
@@ -0,0 +1,12 @@
+# Example 1: Generic Example
+
+Grid with two programmatically blocked cells and one programmatically blocked item
+
+<ClientOnly>
+<script setup>
+import Example1Generic from "../../example/src/Example1Generic.vue";
+</script>
+
+
+<Example1Generic />
+</ClientOnly>
\ No newline at end of file