diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 3eee8fcc022f40d6e247d3cdd605e850eb0a06ee..2cda3b815c28cb7f95020bae5c2a255f1c45ab5c 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -7,7 +7,7 @@ module.exports = {
                 title: 'Components',
                 collapsable: false,
                 children: [
-                    '/components/grid.md',
+                    '/components/DragGrid.md',
                 ]
             }
         ]
diff --git a/docs/components/DragGrid.md b/docs/components/DragGrid.md
new file mode 100644
index 0000000000000000000000000000000000000000..e8fe7d040b9773c15088798fde4e36a3256fa060
--- /dev/null
+++ b/docs/components/DragGrid.md
@@ -0,0 +1,7 @@
+# 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/components/grid.md b/docs/components/grid.md
deleted file mode 100644
index bbf8e0e4ca52bab4f9e66b35057319fc8ec717a4..0000000000000000000000000000000000000000
--- a/docs/components/grid.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# component
-
-`Component` is a cool component. Here's how to use it...
-
-<template>
-  <component />
-</template>
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 4adf16239a6649e6705f6b94306714c261efef81..bb1db440a68d1a9153a12bfe141115cb9d936393 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,23 +1,23 @@
 <script setup>
-import Grid from "../../src/Grid.vue";
+import DragGrid from "../../src/DragGrid.vue";
 import CircularCard from "./components/CircularCard.vue";
 </script>
 
 <template>
   <div id="app">
-    <Grid :rows="5" :cols="5" :pos-validation="blockField" v-model="items">
+    <DragGrid :rows="5" :cols="5" :pos-validation="blockField" v-model="items">
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
       <template #item="item">
         <div class="container">{{ item }}</div>
       </template>
-    </Grid>
-    <Grid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
+    </DragGrid>
+    <DragGrid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
       <template #item="item">
-        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O"}}</CircularCard>
+        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard>
       </template>
-    </Grid>
+    </DragGrid>
   </div>
 </template>
 
@@ -59,7 +59,7 @@ export default {
         { x: 3, y: 3, w: 1, h: 1, key: "b1", data: {} },
         { x: 1, y: 2, w: 1, h: 1, key: "b2", data: {} },
         { x: 3, y: 1, w: 1, h: 1, key: "b3", data: {} },
-      ]
+      ],
     };
   },
 };
diff --git a/src/Grid.vue b/src/DragGrid.vue
similarity index 99%
rename from src/Grid.vue
rename to src/DragGrid.vue
index 1a8512a2c9291c4421d400f78c3fc46ce04afad0..ee31af1df4bf81d7af2075ce5647f7735131f010 100644
--- a/src/Grid.vue
+++ b/src/DragGrid.vue
@@ -38,7 +38,7 @@
 import DragContainer from "./DragContainer.vue";
 
 export default {
-  name: "Grid",
+  name: "DragGrid",
   components: {
     DragContainer,
   },
diff --git a/src/components.js b/src/components.js
index e87f7ccfc3ff9c024dc821d1a68384bb47d8efaa..b8ed057bb44428cd0f0bf6b5e6f533b61ee89c03 100644
--- a/src/components.js
+++ b/src/components.js
@@ -1,4 +1,4 @@
 import DragContainer from "./DragContainer.vue";
-import Grid from "./Grid.vue";
+import DragGrid from "./DragGrid.vue";
 
-export default { DragContainer, Grid };
+export default { DragContainer, DragGrid };