diff --git a/src/components/UI/UIDetails/messageItem.vue b/src/components/UI/UIDetails/messageItem.vue
index b0ecc3a..3c19b34 100644
--- a/src/components/UI/UIDetails/messageItem.vue
+++ b/src/components/UI/UIDetails/messageItem.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } from 'vue';
+import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
  export default defineComponent({
   name: "MessageItem",
   props: {
@@ -70,8 +70,6 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
       const msgID = ref(props.item.id);
       const bubbleTag = ref(`bubble${msgID.value}`);
       const contentTag = ref(`content${msgID.value}`);
-
-
       let bubble: any;
       let content: any;
 
@@ -133,10 +131,12 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
         bubble.setAttribute("width", bbox.width + 2 * padding);
         bubble.setAttribute("height", bbox.height + 2 * padding);
       }
+
+      // make textbox before mount
       createTextBox(props.item.content, 32);
+
       onMounted(async () => {
-          console.log(bubbleTag.value);
-          console.log(contentTag.value)
+          // update bubble and content for current message
           bubble = bubbleTag.value;
           content = contentTag.value;
           await adjustRect();
@@ -144,7 +144,6 @@ import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } fr
 
       })
       return {
-          bubble,
           textFill,
           bubbleFill,
           startingOffset,
diff --git a/src/components/UI/UIDetails/messages.ts b/src/components/UI/UIDetails/messages.ts
index 238d591..8e1ad41 100644
--- a/src/components/UI/UIDetails/messages.ts
+++ b/src/components/UI/UIDetails/messages.ts
@@ -23,38 +23,38 @@ const Messages: Message[] = [
     modifier: "fr",
     imgURL: "@/assets/logo.png",
     id: "2"
+  },
+  {
+    content: "Hey Anna, did you get the paper done?",
+    signature: "Tommy McConville",
+    outgoing: false,
+    modifier: "fr",
+    imgURL: "@/assets/logo.png",
+    id: "3"
+  },
+  {
+    content: "Yes posting it online soon.",
+    signature: "Tommy McConville",
+    outgoing: true,
+    modifier: "sf",
+    imgURL: "../../assets/logo.png",
+    id: "4"
+  },
+  {
+    content: "Sweet, thanks!",
+    signature: "Tommy McConville",
+    outgoing: false,
+    modifier: "fr",
+    imgURL: "../../assets/logo.png",
+    id: "5"
+  },
+  {
+    content: "Hey do you know Enrique Hernandez?",
+    signature: "Crimata AI",
+    outgoing: false,
+    modifier: "ai",
+    imgURL: "../../assets/logo.png",
+    id: "6"
   }
-  // {
-  //   content: "Hey Anna, did you get the paper done?",
-  //   signature: "Tommy McConville",
-  //   outgoing: false,
-  //   modifier: "fr",
-  //   imgURL: "@/assets/logo.png",
-  //   id: "3"
-  // },
-  // {
-  //   content: "Yes posting it online soon.",
-  //   signature: "Tommy McConville",
-  //   outgoing: true,
-  //   modifier: "sf",
-  //   imgURL: "../../assets/logo.png",
-  //   id: "4"
-  // },
-  // {
-  //   content: "Sweet, thanks!",
-  //   signature: "Tommy McConville",
-  //   outgoing: false,
-  //   modifier: "fr",
-  //   imgURL: "../../assets/logo.png",
-  //   id: "5"
-  // }
-  // {
-  //   content: "Hey do you know Enrique Hernandez?",
-  //   signature: "Crimata AI",
-  //   outgoing: false,
-  //   modifier: "ai",
-  //   imgURL: "../../assets/logo.png",
-  //   id: "6"
-  // }
 ];
 export default Messages;
diff --git a/src/components/microphone/index.vue b/src/components/microphone/index.vue
new file mode 100644
index 0000000..6993eff
--- /dev/null
+++ b/src/components/microphone/index.vue
@@ -0,0 +1,72 @@
+<template>
+    <div>
+      Hello from the mic
+    </div>
+</template>
+
+<script>
+ import { defineComponent } from 'vue';
+ export default defineComponent({
+   name: 'Microphone',
+   setup() {
+     const bufferLen = 4096;
+     const numChannels = 1;
+     window.AudioContext = window.AudioContext || window.webkitAudioContext;
+     const audioContext = new AudioContext();
+
+      let result;
+      const getCwasm = async () => {
+        await import('../../../crate/pkg').then(async module => {
+              result = await module.add(1, 2);
+              console.log(result);
+        });
+      }
+     getCwasm();
+
+     function handleStream(stream) {
+       const source = audioContext.createMediaStreamSource(stream);
+       const context = source.context;
+       // NOTE might come in handy for VAD
+       // const sampleRate = context.sampleRate;
+
+       const node = context.createScriptProcessor.call(
+         context,
+         bufferLen,
+         numChannels,
+         numChannels
+       );
+
+       node.onaudioprocess = (e) => {
+         const inputBuffer = new Float32Array(bufferLen);
+
+         e.inputBuffer.copyFromChannel(inputBuffer, 0);
+
+         // const int16 = new Int16Array(inputBuffer.buffer);
+
+           // TODO add handle audio stream to main process?
+           // window.postMessage(
+           //   {
+           //     myTypeField: "handle-audio-stream",
+           //     audioData: int16,
+           //   },
+           //   "*"
+           // );
+       };
+       source.connect(node);
+       node.connect(context.destination);
+     }
+
+     navigator.mediaDevices
+       .getUserMedia({ audio: true })
+       .then((stream) => {
+         handleStream(stream)
+       })
+       .catch((error) => {
+         throw error;
+       });
+
+
+   }
+ })
+
+</script>
diff --git a/src/composables/useMessageItemComp.ts b/src/composables/useMessageItemComp.ts
new file mode 100644
index 0000000..54d7f2c
--- /dev/null
+++ b/src/composables/useMessageItemComp.ts
@@ -0,0 +1,39 @@
+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/views/home/index.vue b/src/views/home/index.vue
index 2ab5125..11130b8 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,28 +1,17 @@
 <template>
-    Hello from vue home view
     <UIindex />
+    <Microphone />
 
 </template>
 
 <script lang="ts">
  import { defineComponent, onMounted } from 'vue';
  import UIindex from "@/components/UI/index.vue";
+ import Microphone from "@/components/microphone/index.vue";
 
  export default defineComponent({
      name: "HomeIndex",
-     components: { UIindex },
-     setup() {
-         let result;
-         const getCwasm = async () => {
-           await import('../../../crate/pkg').then(async module => {
-                 result = await module.add(1, 2);
-                 console.log(result);
-           });
-         }
-         onMounted(() => {
-             getCwasm();
-         })
-      },
+     components: { UIindex, Microphone },
  });
 
 </script>