diff --git a/src/components/TextBox.vue b/src/components/TextBox.vue
new file mode 100644
index 0000000..5209bc0
--- /dev/null
+++ b/src/components/TextBox.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const editor = ref("");
+const editMode = ref(false);
+
+function edit() {
+  editMode.value = !editMode.value;
+}
+</script>
+
+<template>
+
+  <q-dialog v-if="editMode" >
+    <q-editor v-model="editor" min-height="5rem" />
+  </q-dialog>
+
+
+  <Draggable :grid="[25, 25]">
+    <div style="display: flex">
+      <q-card flat bordered>
+        <q-card-section>
+          <div class="row items-center no-wrap">
+            <q-card-section v-html="editor" />
+            <div class="col-auto">
+              <q-btn color="grey-7" round flat icon="more_vert">
+                <q-menu cover auto-close>
+                  <q-list>
+                    <q-item clickable>
+                      <q-item-section @click="edit">Edit</q-item-section>
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section>Remove</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </Draggable>
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/components/WrapperBox.vue b/src/components/WrapperBox.vue
index 2f894b4..caa52a7 100644
--- a/src/components/WrapperBox.vue
+++ b/src/components/WrapperBox.vue
@@ -16,9 +16,7 @@ function increment() {
       <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>
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index 3efbf92..1a39d64 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -31,8 +31,10 @@
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container>
-      <WrapperBox />
+    <q-page-container style="display: flex">
+
+      <TextBox/>
+
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -48,6 +50,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import WrapperBox from "../components/WrapperBox.vue";
+import TextBox from "../components/TextBox.vue";
 
 const leftDrawerOpen = ref(false);