diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index ba76c729433da429b63d52c8dc6ec69e7c841c24..3eee8fcc022f40d6e247d3cdd605e850eb0a06ee 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -7,7 +7,7 @@ module.exports = {
                 title: 'Components',
                 collapsable: false,
                 children: [
-                    '/components/component.md',
+                    '/components/grid.md',
                 ]
             }
         ]
diff --git a/docs/components/component.md b/docs/components/grid.md
similarity index 100%
rename from docs/components/component.md
rename to docs/components/grid.md
diff --git a/src/Component.vue b/src/Component.vue
deleted file mode 100644
index 214828e8498041a85a3050cf8c1f634c407c6a3e..0000000000000000000000000000000000000000
--- a/src/Component.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div/>
-</template>
-<script>
-export default {
-  name: 'Component'
-}
-</script>
\ No newline at end of file
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9cb3c2ff9fe23348bc9049b1c2ab958f4a4f6b5
--- /dev/null
+++ b/src/DragContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div @dragstart="handleDragStart">
+    <slot>
+      <div id="container"></div>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DragContainer",
+  methods: {
+    handleDragStart(event) {
+      event.dataTransfer.setData("text", event.target.id);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/Grid.vue b/src/Grid.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f001d2f5fb7290965138352c5b6fc964c1b46f0
--- /dev/null
+++ b/src/Grid.vue
@@ -0,0 +1,36 @@
+<template>
+  <div @dragover.prevent @drop.prevent="">
+    <slot name="highlight">
+      <div id="highlight"></div>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Grid',
+  props: {
+    rows: {
+      type: Number,
+      required: true
+    },
+    cols: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    handleDrop(event) {
+      let data = event.dataTransfer.getData("text");
+      event.target.appendChild(document.getElementById(data));
+    }
+  }
+}
+</script>
+
+<style scoped>
+#highlight {
+  background: darkgrey;
+  border: grey dashed 2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components.js b/src/components.js
index ab5df4046db649aa1a963642d0a4142ecf5d7bec..60479b9437e8a59500ebf9ed51cdece526052842 100644
--- a/src/components.js
+++ b/src/components.js
@@ -1,3 +1,4 @@
-import Component from "./Component.vue";
+import DragContainer from "./DragContainer.vue";
+import Grid from "./Grid.vue";
 
-export default {Component};
+export default {DragContainer, Grid};