diff --git a/src/background.ts b/src/background.ts
index 9204046..2aaec65 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -6,7 +6,9 @@ import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 const isDevelopment = process.env.NODE_ENV !== "production";
 import * as path from "path";
 import { SpeechRecorder } from "speech-recorder";
-import WebSocket from "ws";
+
+// TODO: connect To Crimata-BE
+// import WebSocket from "ws";
 
 // const ws = new WebSocket("ws://localhost:8080");
 // ws.on("open", function open() {
@@ -16,18 +18,8 @@ import WebSocket from "ws";
 //   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 recorder = new SpeechRecorder();
 
 // 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.
@@ -62,6 +54,22 @@ function createWindow() {
     win.loadURL("app://./index.html");
   }
 
+  win.webContents.on('did-finish-load', () => {
+    if (win) {
+      recorder.start({
+        onAudio: (audio: object, speech: boolean) => {
+          if (win) {
+            win.webContents.send('render-audio', { data: audio })
+          }
+          if (speech) {
+            // TODO: send audio to crimata BE
+            // ws.send(audio);
+          }
+        }
+      });
+    }
+  })
+
   win.on("closed", () => {
     win = null;
   });
diff --git a/src/components/AI/index.vue b/src/components/AI/index.vue
index 9139461..02bb6a9 100644
--- a/src/components/AI/index.vue
+++ b/src/components/AI/index.vue
@@ -19,6 +19,7 @@
       <feComposite in="SourceGraphic" />
     </filter>
   </defs>
+
   <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_410)">
     <rect
       id="Rectangle_410-2"
@@ -35,5 +36,10 @@
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "AI",
+  setup() {
+    window.ipcRenderer.on("render-audio", (event, audio) => {
+      console.log(audio);
+    });
+  },
 });
 </script>
diff --git a/src/preload.ts b/src/preload.ts
index a5c911d..9e33238 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -1,27 +1,8 @@
 // All of the Node.js APIs are available in the preload process.
 // It has the same sandbox as a Chrome extension.
-import ipcRenderer from "electron";
+import { ipcRenderer } from "electron";
 
-process.once("loaded", () => {
-  window.addEventListener("message", event => {
-    // do something with custom event
-    const message = event.data;
-
-    if (message.myTypeField === "handle-audio-stream") {
-      ipcRenderer.send("audio-stream", message);
-    }
-  });
-});
-
-window.addEventListener("DOMContentLoaded", () => {
-  const replaceText = (selector: string, text: string) => {
-    const element = document.getElementById(selector);
-    if (element) {
-      element.innerText = text;
-    }
-  };
-
-  for (const type of ["chrome", "node", "electron"]) {
-    replaceText(`${type}-version`, (process.versions as any)[type]);
-  }
-});
+interface Window {
+  ipcRenderer: typeof ipcRenderer;
+}
+window.ipcRenderer = ipcRenderer;