diff --git a/crash.log b/crash.log
index 3d7e5c0..14b4301 100644
--- a/crash.log
+++ b/crash.log
@@ -43,3 +43,5 @@ PID 60328 received SIGSEGV for address: 0x7f900fab4000
 12  libsystem_pthread.dylib             0x00007fff205f747b thread_start + 15
 PID 65740 received SIGSEGV for address: 0x7fbddef00000
 0   segfault-handler.node               0x0000000116e6ae60 _ZL16segfault_handleriP9__siginfoPv + 304
+PID 65817 received SIGSEGV for address: 0x7fe23f39d000
+0   segfault-handler.node               0x0000000110840e60 _ZL16segfault_handleriP9__siginfoPv + 304
diff --git a/src/background/audio.ts b/src/background/audio.ts
index 313f6f1..98e2909 100644
--- a/src/background/audio.ts
+++ b/src/background/audio.ts
@@ -33,9 +33,9 @@ const updateRecorder = (_event, payload: boolean): void => {
 ipcMain.removeAllListeners('update-recorder');
 ipcMain.on('update-recorder', updateRecorder);
 
-// utility function used by play func.
+// Split Buffer into an array of len-sized Buffers.
 function bufSplit(buf: Buffer, len: number): Array<Buffer> {
-    let chunks = [];
+    const chunks = [];
     let i = 0;
     let L = len;
 
@@ -75,19 +75,19 @@ export function initAudioIO(): void {
 }
 
 // play audio buffers.
-export function play(input: string): void {
+export function play(input: Buffer): void {
     let i = 0;
-    console.log(Buffer.from(input, encoding));
-    // format buffers into half their size to account for writable highwaterMark.
-    const audio = bufSplit(Buffer.from(input), 8192);
-    console.log(audio);
+
+    const audio = bufSplit(input, 8192);
 
     // call this fuction after last audio chunk has been written.
     const callback = () => {
         // TODO: clear portAudio writable buffer on write end.
     }
+
     write();
-    // iterate through audio array and write buffers to portAudio writable.
+
+    // Iterate through audio array and write buffers to portAudio writable.
     function write() {
         let chunk: Buffer;
         let ok = true;
diff --git a/src/background/session.ts b/src/background/session.ts
index bd42b34..75f9433 100644
--- a/src/background/session.ts
+++ b/src/background/session.ts
@@ -32,6 +32,7 @@ let socket: WebSocket;
 let success = false;
 let auth = false;
 
+
 const authSession = async (_event, payload: string | UserCreds | null): Promise<string> => {
     return new Promise((resolve, reject) => {
 
@@ -60,6 +61,17 @@ const authSession = async (_event, payload: string | UserCreds | null): Promise<
     });
 };
 
+// function parseHexString(str: string) { 
+//     var result = [];
+//     while (str.length >= 8) { 
+//         result.push(parseInt(str.substring(0, 8), 16));
+
+//         str = str.substring(8, str.length);
+//     }
+
+//     return result;
+// }
+
 const receiveMessage = (message: string): void => {
 
     while (!auth) {
@@ -67,12 +79,16 @@ const receiveMessage = (message: string): void => {
         return;
     }
 
+    // Parse the message.
     const parsed: RenderMessage = JSON.parse(message);
     console.log('message received', parsed.content.text);
+
+    // If there is audio, play it.
     if (parsed.content.audio) {
-        console.log('audio received');
-        play(parsed.content.audio);
+        const audioBytes = Buffer.from(parsed.content.audio, 'hex');
+        play(audioBytes);
     }
+
     backgroundMitt.emit('ipc-renderer', {
         endpoint: 'render-message',
         message: parsed
diff --git a/src/components/content.vue b/src/components/content.vue
new file mode 100644
index 0000000..e623548
--- /dev/null
+++ b/src/components/content.vue
@@ -0,0 +1,19 @@
+<template>
+  Input Item Content
+</template>
+
+<script lang="ts">
+
+import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+import { calcSideProximity, calcPosition } from "./helpers"
+
+export default defineComponent({
+
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/inputItem.vue b/src/components/inputItem.vue
new file mode 100644
index 0000000..995b482
--- /dev/null
+++ b/src/components/inputItem.vue
@@ -0,0 +1,168 @@
+<template>
+
+  <div id=inputItem
+    class="input-item"
+    :class="{ playing: isRecording }"
+    :style="{ top: `${elementY}px`, left: `${elementX}px` }">
+    <span class="play"></span>
+    <span class="pause"></span>
+    <TextInput :input="input"/>
+  </div>
+  
+</template>
+
+<script lang="ts">
+
+import { defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
+import draggify from '@/modules/draggify';
+import useMitt from "@/modules/mitt";
+import TextInput from '@/components/taInput/textDetails/text.vue';
+import useInputController from "@/components/taInput/inputController";
+
+export default defineComponent({
+  name: "InputItem",
+  components: { TextInput },
+  setup() {
+
+    const isRecording = ref(false);
+
+    const { emitter } = useMitt();
+    const { elementX, elementY } = draggify({ elementId: 'inputItem'});
+
+    const {
+      input,
+      visualizeStream,
+      audioBubbleWidth,
+      paths,
+    } = useInputController();
+
+    onMounted(() => {
+      emitter.on('input-audio-record', (record) => isRecording.value = record);
+    })
+
+    onUnmounted(() => {
+      emitter.all.clear();
+    })
+
+    return {
+      elementX,
+      elementY,
+      isRecording,
+      input
+    }
+  }
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+ .input-item {
+
+    position: absolute;
+
+    width: 30px;
+    height: 30px;
+
+    border-radius: 19px;
+
+    z-index: 20;
+
+    top: 200px;
+    right: 0px;
+
+
+    background-color: white;
+    border: 4px solid #C3C3C3;
+
+    cursor: pointer;
+
+   .play, .pause {
+      z-index: 5;  
+      &::before, &::after {
+         -webkit-border-radius: 1000px;
+         -moz-border-radius: 1000px;
+         border-radius: 1000px;
+         content: "";
+         position: absolute;
+         height: 2.35em;
+         width: 2.35em;
+         left: 50%;
+         transform: translate(-50%, -50%); 
+         top: 50%;
+         z-index: 0;
+      }
+   }
+   .play::before {
+      box-shadow: 0 0 0 rgba(195, 195, 195, 0);
+   }
+   .pause {
+      opacity: 0;
+   }
+   &.playing {
+      .play {
+         opacity: 0;
+      }
+      .pause {
+         opacity: 1;
+         &::before {
+            -moz-animation: audio1 1.5s infinite ease-in-out;
+            -o-animation: audio1 1.5s infinite ease-in-out;
+            -webkit-animation: audio1 1.5s infinite ease-in-out;
+            animation: audio1 1.5s infinite ease-in-out;
+         }
+         &::after {
+            -moz-animation: audio2 2.2s infinite ease-in-out;
+            -o-animation: audio2 2.2s infinite ease-in-out;
+            -webkit-animation: audio2 2.2s infinite ease-in-out;
+            animation: audio2 2.2s infinite ease-in-out;
+         }
+      }
+   }
+}
+
+.animate-audio1 {
+   -moz-animation: audio1 1.5s infinite ease-in-out;
+   -o-animation: audio1 1.5s infinite ease-in-out;
+   -webkit-animation: audio1 1.5s infinite ease-in-out;
+   animation: audio1 1.5s infinite ease-in-out;
+}
+@keyframes audio1 {
+   0%,
+   100% {
+      box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
+   }
+   25% {
+      box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
+   }
+   50% {
+      box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
+   }
+   75% {
+      box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
+   }
+}
+.animate-audio2 {
+   -moz-animation: audio2 2.2s infinite ease-in-out;
+   -o-animation: audio2 2.2s infinite ease-in-out;
+   -webkit-animation: audio2 2.2s infinite ease-in-out;
+   animation: audio2 2.2s infinite ease-in-out;
+}
+@keyframes audio2 {
+   0%,
+   100% {
+      box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
+   }
+   25% {
+      box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
+   }
+   50% {
+      box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
+   }
+   75% {
+      box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
+   }
+} 
+
+</style>
diff --git a/src/components/messageItem.vue b/src/components/messageItem.vue
index 6197c94..00d7167 100644
--- a/src/components/messageItem.vue
+++ b/src/components/messageItem.vue
@@ -42,16 +42,21 @@
 </template>
 
 <script lang='ts'>
+
  import {defineComponent} from 'vue';
+
  export default defineComponent({
   name: "MessageItem",
+
   props: {
       message: {
         type: Object,
         required: true
       } 
   }
+
  })
+
 </script>
 
 <style lang="scss" scoped>
@@ -119,6 +124,10 @@
     padding: 10px;
 
     border-radius: 10px;
+
+    // Animate on render.
+    animation-name: appear;
+    animation-duration: 0.25s;
   }
 
   #aiBubble {
@@ -160,4 +169,13 @@
     border-radius: 15px;
   }
 
+  @keyframes appear {
+    from {
+      transform: scale(0.3);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
 </style>
\ No newline at end of file
diff --git a/src/views/messenger.vue b/src/views/messenger.vue
index 16e16fe..b1e965f 100644
--- a/src/views/messenger.vue
+++ b/src/views/messenger.vue
@@ -25,14 +25,19 @@ export default defineComponent({
     // List of messages in the view.
     // Oldest message first.
     const messages: Message[] = reactive([]);
+    const messages_ref: any = {}
 
     // Render a message.
+    // Called on "enter" instead of on "recv message"
     const render = (message: Message) => {
       messages.push(message);
-      console.log(
-        `Pushing: ${message.modifier}: ${message.content.text} ${message.context}`
-      );
-    };
+      messages_ref[message.id] = message;
+    }
+
+    // Annotate/update an existing message.
+    const annotate = (message: Message) => {
+      1+1
+    }
 
     onMounted(() => {
       // Listen for new messages to render.
@@ -56,8 +61,19 @@ export default defineComponent({
 #messenger {
   position: fixed;
 
+<<<<<<< HEAD
   width: 100vw;
   min-height: 100vh;
+=======
+  #messenger {
+    position: fixed;
+
+    width: 100vw;
+
+    overflow-y: scroll;
+
+    bottom: 0;
+>>>>>>> origin/main
 
   overflow-y: scroll;