diff --git a/src/components/WrapperBox.vue b/src/components/WrapperBox.vue
new file mode 100644
index 0000000..2f894b4
--- /dev/null
+++ b/src/components/WrapperBox.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const count = ref(0);
+function increment() {
+  count.value++
+}
+
+</script>
+
+<template>
+  <Draggable :grid="[25, 25]">
+    <div>
+      <div>Grid with component</div>
+
+        <q-btn @click="increment">Count is: {{ count }}</q-btn>
+        <q-card class="my-card">
+            hi
+        </q-card>
+    </div>
+  </Draggable>
+</template>
+<style lang="sass" scoped>
+.my-card
+  width: 50%
+  max-width: 250px
+</style>
\ No newline at end of file
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index d267c91..15a27cc 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-  
+import WrapperBox from '../components/WrapperBox.vue';
+
 </script>
 
 <template>
 
+
+    <WrapperBox/>
     <Draggable>
     <div class="box">
 
     <q-btn
-        @click="showNotification"
         color="primary"
         label="Show another notification"
         />
@@ -16,4 +18,4 @@
   </Draggable>
 </template>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/vite.config.ts b/vite.config.ts
index 731ae55..3bc00d8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,11 +12,11 @@ export default defineConfig({
         },
     },
     plugins: [
-      vue({
-          template: { transformAssetUrls },
-      }),
+        vue({
+            template: { transformAssetUrls },
+        }),
 
-      quasar({
-          sassVariables: 'src/quasar-variables.sass',
-      }),]
+        quasar({
+            sassVariables: 'src/quasar-variables.sass',
+        })],
 })