diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue
index b59a505..d8108fd 100644
--- a/src/components/UI/index.vue
+++ b/src/components/UI/index.vue
@@ -4,7 +4,7 @@
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
-    @click="renderMessage"
+    @click="emittMessage"
   >
     <AI />
     <MessageRenderer />
@@ -14,31 +14,35 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, inject } from "vue";
-import MessageItem from "./UIDetails/messageItem.vue";
+import { defineComponent, ref, inject } from "vue";
 import AI from "../AI/index.vue";
 import InputItem from "./UIDetails/inputItem.vue";
 import TitleBar from "./UIDetails/titleBar.vue";
 import Messages from "./UIDetails/messages";
 import MessageRenderer from "./UIDetails/messageRenderer.vue";
+import { Mitt } from "@/types/mitt/index";
 export default defineComponent({
   name: "UIindex",
-  components: { AI, MessageItem, InputItem, TitleBar, MessageRenderer },
+  components: { AI, MessageRenderer, InputItem, TitleBar },
   setup() {
     const messages = Messages;
     const count = ref(0);
-    const emitter: any = inject("mitt");
 
-    const renderMessage = () => {
+    // imports mitt Emitter safely
+    let emitter: Mitt;
+    const emitterInject: Mitt | undefined = inject("mitt");
+    if (emitterInject) emitter = emitterInject;
+
+    function emittMessage() {
       if (count.value < messages.length) {
-        emitter.emit("renderMessage", messages[count.value])
+        emitter.emit("renderMessage", messages[count.value]);
         count.value++;
         return;
       }
-    };
+    }
 
     return {
-      renderMessage,
+      emittMessage,
     };
   },
 });
diff --git a/src/types/mitt/index.ts b/src/types/mitt/index.ts
new file mode 100644
index 0000000..a1ba637
--- /dev/null
+++ b/src/types/mitt/index.ts
@@ -0,0 +1,3 @@
+import { Emitter } from "mitt";
+
+export type Mitt = Emitter;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 69e6ae6..b8b6722 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,15 +3,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject } from "vue";
+import { defineComponent } from "vue";
 import UIindex from "@/components/UI/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>