diff --git a/src/background.ts b/src/background.ts
index b461c75..9204046 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -8,26 +8,26 @@ import * as path from "path";
 import { SpeechRecorder } from "speech-recorder";
 import WebSocket from "ws";
 
-const ws = new WebSocket("ws://localhost:8080");
-ws.on("open", function open() {
-  ws.send("hello fro client");
-});
-ws.on("message", (message: any) => {
-  console.log("received message", message);
-});
-
-const recorder = new SpeechRecorder();
-
-recorder.start({
-  onAudio: (audio: object, speech: boolean) => {
-    if (speech) {
-      console.log(audio);
-      ws.send(audio);
-    }
-    console.log("recording");
-    // writeStream.write(audio);
-  }
-});
+// const ws = new WebSocket("ws://localhost:8080");
+// ws.on("open", function open() {
+//   ws.send("hello fro client");
+// });
+// ws.on("message", (message: any) => {
+//   console.log("received message", message);
+// });
+//
+// const recorder = new SpeechRecorder();
+//
+// recorder.start({
+//   onAudio: (audio: object, speech: boolean) => {
+//     if (speech) {
+//       console.log(audio);
+//       ws.send(audio);
+//     }
+//     console.log("recording");
+//     // writeStream.write(audio);
+//   }
+// });
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue
index 5eb583c..338c707 100644
--- a/src/components/UI/UIDetails/inputItem.vue
+++ b/src/components/UI/UIDetails/inputItem.vue
@@ -1,5 +1,33 @@
 <template>
-  {{ input }}
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="500"
+    >
+  <g
+  >
+    <rect
+      x="30"
+      y="10"
+      width="500"
+      height="100"
+      rx="20"
+      fill="#61b4f4"
+    />
+    <text
+      font-size="14"
+      font-family="SF Pro"
+    >
+      <tspan
+           dy="16"
+           x="0"
+      >
+        {{ input }}
+      </tspan>
+    </text>
+  </g>
+    </svg>
 </template>
 
 <script>
@@ -35,8 +63,6 @@
          return {
              input
          }
-
-
      }
  })
 </script>
diff --git a/src/composables/useMessageItemComp.ts b/src/composables/useMessageItemComp.ts
deleted file mode 100644
index 54d7f2c..0000000
--- a/src/composables/useMessageItemComp.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { computed } from "vue";
-
-export default function useMessageItemComp(modifier: string): string {
-  const textFill = computed(() => {
-    switch (modifier) {
-      case "ai":
-        return "#fff";
-      default:
-        return "#000";
-    }
-  });
-
-  const bubbleFill = computed(() => {
-    switch (modifier) {
-      case "sf":
-        return "#61b4f4";
-      case "ai":
-        return "#585858";
-      default:
-        return "#fff";
-    }
-  });
-
-  const startingOffset = computed(() => {
-    switch (modifier) {
-      case "sf":
-        return "translate(10, 600)";
-      case "ai":
-        return "translate(135, 600)";
-      default:
-        return "translate(20, 600)";
-    }
-  });
-  return {
-    textFill,
-    bubbleFill,
-    startingOffset
-  };
-}
diff --git a/src/composables/useTextBox.ts b/src/composables/useTextBox.ts
new file mode 100644
index 0000000..e69de29