diff --git a/src/components/UI/UIDetails/messageItem.vue b/src/components/UI/UIDetails/messageItem.vue
index 3c19b34..a29dd6b 100644
--- a/src/components/UI/UIDetails/messageItem.vue
+++ b/src/components/UI/UIDetails/messageItem.vue
@@ -72,10 +72,11 @@ import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
       const contentTag = ref(`content${msgID.value}`);
       let bubble: any;
       let content: any;
+      console.log(props)
 
       const textFill = computed(() => {
         switch (props.item.modifier) {
-          case "ai":
+          case "ai" || "sf":
             return "#fff";
           default:
             return "#000";
diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue
index 371de54..2aeae6c 100644
--- a/src/components/UI/index.vue
+++ b/src/components/UI/index.vue
@@ -37,24 +37,24 @@
       </clipPath>
     </defs>
     <g id="cardsDiv">
-        <g
-            v-for="(item, index) in renderArr"
-            :key="index"
-            id="cards"
-            transform="translate(0, 0)"
+      <g
+        v-for="(item, index) in renderArr"
+        :key="index"
+        id="cards"
+        transform="translate(0, 0)"
+      >
+        <transition
+          appear
+          v-on:before-appear="beforeEnter"
+          v-on:appear="enter"
+          v-on:appear-cancelled="leave"
         >
-            <transition
-                appear
-                v-on:before-appear="beforeEnter"
-                v-on:appear="enter"
-                v-on:appear-cancelled="leave"
-            >
-                <MessageItem
-                    :item="item"
-                    :key="index"
-                />
-            </transition>
-        </g>
+          <MessageItem
+            :item="item"
+            :key="index"
+          />
+        </transition>
+      </g>
     </g>
     <g id="titlebar" transform="translate(0, 0)">
       <g data-name="Group 73" transform="translate(20 20)">
@@ -84,117 +84,111 @@
 
 <script lang="ts">
 import { defineComponent, inject, onMounted, reactive } from "vue";
- import MessageItem from './UIDetails/messageItem.vue';
- import Messages from "./UIDetails/messages";
- export default defineComponent({
-   name: 'UIindex',
-   components: { MessageItem },
-   setup() {
-
-      interface ProtectedRef {
-        readonly el: SVGElement | HTMLElement;
-        reference: any;
-        height: number | null;
+import MessageItem from './UIDetails/messageItem.vue';
+import InputItem from "@/components/UI/UIDetails/inputItem.vue";
+import Messages from "./UIDetails/messages";
+export default defineComponent({
+  name: 'UIindex',
+  components: { MessageItem, InputItem },
+  setup() {
+      const anime: object | any = inject('animejs');
+      const timeline: typeof anime = anime.timeline({ loop: true });
+      const renderArr: Message[] = reactive([])
+      const messages = Messages;
+      const msgOffset = {
+          x: 0 ,
+          y: 0
       }
-       const anime: object | any = inject('animejs');
-       const timeline: typeof anime = anime.timeline({ loop: true });
-       const renderArr: Message[] = reactive([])
-       const messages = Messages;
-       const msgOffset = {
-           x: 0 ,
-           y: 0
-       }
-       let messenger: any;
-       let winW: number;
-       let modifier: string;
-       let msg: any;
-       let cardsDiv: any;
-       let prevCardH = 0;
+      let messenger: any;
+      let winW: number;
+      let modifier: string;
+      let msg: any;
+      let cardsDiv: any;
+      let prevCardH = 0;
 
-       function renderMsg(i: number): void {
-         setTimeout(() => {
-           renderArr.push(messages[i]);
-         }, 2000);
-       }
+      function renderMsg(i: number): void {
+        setTimeout(() => {
+          renderArr.push(messages[i]);
+        }, 2000);
+      }
 
-       function runAnim(): void {
-         for (let i = 0; i < messages.length; i++) {
-             renderMsg(i);
-         }
-       }
+      function runAnim(): void {
+        for (let i = 0; i < messages.length; i++) {
+            renderMsg(i);
+        }
+      }
 
-       async function beforeEnter(el: any) {
-           modifier = el.className.baseVal.substring(0, 2);
-       }
+      async function beforeEnter(el: any) {
+          modifier = el.className.baseVal.substring(0, 2);
+      }
 
-       async function enter(el: any, done: any) {
-           const paddingLeft = 40;
-           msg = await document.getElementById(el.id);
-           const rect = msg.getBoundingClientRect();
-           const msgW = rect.width;
-           const msgH = rect.height;
-           cardsDiv = await document.getElementById("cardsDiv");
-           const cdBox = cardsDiv.getBBox();
+      async function enter(el: any, done: any) {
+          const paddingLeft = 40;
+          msg = await document.getElementById(el.id);
+          const rect = msg.getBoundingClientRect();
+          const msgW = rect.width;
+          const msgH = rect.height;
+          cardsDiv = await document.getElementById("cardsDiv");
+          const cdBox = cardsDiv.getBBox();
 
-           if (prevCardH === 0) {
-             msgOffset.y += cdBox.height;
-           } else if (prevCardH > msgH) {
-             // cardsDiv is offset by 17.5
-             msgOffset.y += prevCardH + msgH / 2 + 17.5;
-           } else {
-             msgOffset.y += cdBox.height - 20;
-           }
-           prevCardH = msgH;
+          if (prevCardH === 0) {
+            msgOffset.y += cdBox.height;
+          } else if (prevCardH > msgH) {
+            // cardsDiv is offset by 17.5
+            msgOffset.y += prevCardH + msgH / 2 + 17.5;
+          } else {
+            msgOffset.y += cdBox.height - 20;
+          }
+          prevCardH = msgH;
 
-           switch (modifier) {
-             case "sf":
-               msgOffset.x = winW - msgW;
-               break;
-             case "ai":
-               msgOffset.x = (winW - msgW) / 2;
-               break;
-             default:
-               msgOffset.x = paddingLeft;
-           }
+          switch (modifier) {
+            case "sf":
+              msgOffset.x = winW - msgW;
+              break;
+            case "ai":
+              msgOffset.x = (winW - msgW) / 2;
+              break;
+            default:
+              msgOffset.x = paddingLeft;
+          }
 
-           const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
-           const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
-           timeline
-             .add({
-               targets: el,
-               transform: translateUp,
-               easing: "easeInOutQuad",
-               duration: 1000
-             })
-             .add({
-               targets: el,
-               transform: translateDown,
-               easing: "easeInOutQuad",
-               duration: 500,
-               offset: 1000
-             });
-           done();
-       }
+          const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
+          const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
+          timeline
+            .add({
+              targets: el,
+              transform: translateUp,
+              easing: "easeInOutQuad",
+              duration: 1000
+            })
+            .add({
+              targets: el,
+              transform: translateDown,
+              easing: "easeInOutQuad",
+              duration: 500,
+              offset: 1000
+            });
+          done();
+      }
 
-       function leave() {
+      function leave() {
 
-       }
+      }
 
-       onMounted(() => {
-           messenger = document.getElementById('messenger');
-           winW = messenger.clientWidth;
-           runAnim();
-       });
-       return {
-           // timeline,
-           renderArr,
-           msgOffset,
-           beforeEnter,
-           enter,
-           leave
-       }
-   },
- });
+      onMounted(() => {
+          messenger = document.getElementById('messenger');
+          winW = messenger.clientWidth;
+          runAnim();
+      });
+      return {
+          renderArr,
+          msgOffset,
+          beforeEnter,
+          enter,
+          leave
+      }
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index dc8b768..9883e9f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,25 +1,18 @@
 <template>
-    <!-- <UIindex />
-         <Microphone /> -->
-    <InputItem />
-
+    <UIindex />
 </template>
 
 <script lang="ts">
- import { defineComponent, inject } from 'vue';
- // import UIindex from "@/components/UI/index.vue";
- // import Microphone from "@/components/microphone/index.vue";
- import InputItem from "@/components/UI/UIDetails/inputItem.vue";
-
- export default defineComponent({
-     name: "HomeIndex",
-     components: { InputItem },
-     setup() {
-         const emitter: any = inject("mitt");
-         emitter.on('newSelfMessage', (payload: any) => console.log('foo', payload) )
-     }
- });
+import { defineComponent, inject } from 'vue';
+import UIindex from "@/components/UI/index.vue";
+// import Microphone from "@/components/microphone/index.vue";
 
+export default defineComponent({
+  name: "HomeIndex",
+  components: { UIindex },
+  setup() {
+    const emitter: any = inject("mitt");
+    emitter.on('newSelfMessage', (payload: any) => console.log('foo', payload) )
+  }
+});
 </script>
-
-<style></style>