diff --git a/core/static/index.js b/core/static/index.js
index 4b78eb5..e2fe57a 100644
--- a/core/static/index.js
+++ b/core/static/index.js
@@ -5,105 +5,120 @@ Main js file for loading the dynamic UI elements.
 */
 
 // Runs on inital startup, after window (html) has finished loading
- init = () => {
-    document.getElementById('send_button').addEventListener('click', sendMessage)
-    document.getElementById('clear_log').addEventListener('click', clear_log)
-
-    document.querySelector(".chatHistory").innerHTML += chatHistoryList()
-
-    // To hide settings page when clicking somewhere else after it's opened.
-    document.addEventListener('click', function(event){
-        const settings = document.getElementById("settingsPage");
-        const settingsButton = document.getElementById("settingsButton");
-        if(!settings.contains(event.target) && !settingsButton.contains(event.target) && settings.style.display=="block") {
-            settingsPage()
-        }
-     });
-}
+init = () => {
+  document.getElementById("send_button").addEventListener("click", sendMessage);
+  document.getElementById("clear_log").addEventListener("click", clear_log);
+
+  document.querySelector(".chatHistory").innerHTML += chatHistoryList();
+
+  // To hide settings page when clicking somewhere else after it's opened.
+  document.addEventListener("click", function (event) {
+    const settings = document.getElementById("settingsPage");
+    const settingsButton = document.getElementById("settingsButton");
+    if (
+      !settings.contains(event.target) &&
+      !settingsButton.contains(event.target) &&
+      settings.style.display == "block"
+    ) {
+      settingsPage();
+    }
+  });
+};
 window.onload = init;
 
 // global state of the UI
 state = {
-    activeConversationId: 0, // The active conversation ID, so the UI knows what conversation to display and load.
-    userId: 0, // The user ID using the interface. probably not going to be used for a while.
-    totalTokensUsed: 0,  // Track of total tokens and $$$ used
-    aiMessageId: 0 // The message id. Set when a response is received from the AI in chat.js
-}
+  activeConversationId: 0, // The active conversation ID, so the UI knows what conversation to display and load.
+  userId: 0, // The user ID using the interface. probably not going to be used for a while.
+  totalTokensUsed: 0, // Track of total tokens and $$$ used
+  aiMessageId: 0, // The message id. Set when a response is received from the AI in chat.js
+};
 
 // Changes the loading icon
-let loading = false
+let loading = false;
 let setLoading = (newLoadingVal) => {
-    if(newLoadingVal){
-        document.getElementById("chat_history").innerHTML += /* html */`
+  if (newLoadingVal) {
+    document.getElementById("chat_history").innerHTML += /* html */ `
     <div id="spinner" class="dot-spinner">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
-    </div>`
-    }else{
-        try{
-            document.getElementById("spinner").remove()
-        }catch(e){
+    </div>`;
+  } else {
+    try {
+      document.getElementById("spinner").remove();
+    } catch (e) {}
+  }
 
-        }
-    }
-
-    loading = newLoadingVal
-}
+  loading = newLoadingVal;
+};
 
 // For seeing formatted HTML in javascript files, this extension for VSCode is recommended:
 // https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html
 
 async function addMessage(message, uuid) {
-let html = /*html*/`
+  let html = /*html*/ `
     <li class = "chat_element">
         <img class="profile_picture" src="./static/rickroll-roll.gif">
         <div class="chat_message_container">
             <div id=${uuid} class="chat_message"> ${message} </div>
     </li>`;
-    document.getElementById('chat_history').innerHTML += html;
-    const messages = getAllChatMessages();
-    console.log(messages);
+  document.getElementById("chat_history").innerHTML += html;
+  const messages = getAllChatMessages();
+  console.log(messages);
 }
 
 async function getAllChatMessages() {
-    const chatMessages = document.querySelectorAll('.chat_message');
-    const messagesList = [];
-    chatMessages.forEach((element) => {
-        messagesList.push(element.textContent.trim());
-    });
-    return messagesList;
+  const chatMessages = document.querySelectorAll(".chat_message");
+  const messagesList = [];
+  chatMessages.forEach((element) => {
+    messagesList.push(element.textContent.trim());
+  });
+  return messagesList;
 }
 
 async function addStreamedMessage(uuid, messagePart) {
-    let element = document.getElementById(uuid);
-
-    if (element == null) {
-        await addMessage(messagePart, uuid);
-        element = document.getElementById(uuid);
-    } else {
-        // Concat ChatPart on message with uuid
-        element.innerHTML += messagePart;
-    }
-    
-    // Add auto-scroll
-    let chat_history = document.getElementById("chat_history")
-    chat_history.scrollTop = chat_history.scrollHeight;
+  let element = document.getElementById(uuid);
+
+  if (element == null) {
+    await addMessage(messagePart, uuid);
+    element = document.getElementById(uuid);
+  } else {
+    // Concat ChatPart on message with uuid
+    element.innerHTML += messagePart;
+  }
+
+  // Add auto-scroll
+  let chat_history = document.getElementById("chat_history");
+  chat_history.scrollTop = chat_history.scrollHeight;
+}
+
+async function addToolResponseToProcessContainer(toolResponse) {
+  let html = /*html*/ `
+    <div class="process_element">
+        <img class="process_icon" src="./static/tool_icon.png" alt="Tool Icon">
+        <div class="process_message">${toolResponse}</div>
+    </div>`;
+  document.querySelector(".processesContainer").innerHTML += html;
+
+  // Auto-scroll to the latest process
+  let processesContainer = document.querySelector(".processesContainer");
+  processesContainer.scrollTop = processesContainer.scrollHeight;
 }
 
 addUserMessage = (message) => {
-    let html = /*html*/`
+  let html = /*html*/ `
     <li class = "chat_element">
         <img class="profile_picture" src="https://media1.tenor.com/m/pMhSj9NfCXsAAAAd/saul-goodman-better-call-saul.gif">
         <div class="chat_message_container">
             <div class="chat_message">${message}</div>
-    </li>`
-    document.getElementById('chat_history').innerHTML += html;
-}
+    </li>`;
+  document.getElementById("chat_history").innerHTML += html;
+};
 
 initialLoadMessages = () => {
-    const chat_box = document.getElementById('chat_history')
-    allChats = []
-    chat_box.value = messageLog.join('\n')
-}
\ No newline at end of file
+  const chat_box = document.getElementById("chat_history");
+  allChats = [];
+  chat_box.value = messageLog.join("\n");
+};
diff --git a/core/static/socketEvents.js b/core/static/socketEvents.js
index d7522c1..d0d9da2 100644
--- a/core/static/socketEvents.js
+++ b/core/static/socketEvents.js
@@ -3,43 +3,43 @@
 // TODO: add this port to .env later
 var socket = io("ws://localhost:3000"); // websocket querying port 3001, where Flask is running.
 
-socket.on('connect', () => {
-    socket.emit('message', {data: 'I\'m connected!'});
+socket.on("connect", () => {
+  socket.emit("message", { data: "I'm connected!" });
 });
 
-let tokenCounter = 0
-let uuid = 0
+let tokenCounter = 0;
+let uuid = 0;
 
 // prints chunks that are streamed to the console and adds them to the chat
-socket.on("chunk", async (chunk)=>{
-    if(!state.activeAIMessage){
-        console.log("STARTED MESSAGE")
-        uuid = generateUUID();
-        await addStreamedMessage(uuid, "");
-        ai_message = document.getElementById(uuid)
-        state.activeAIMessage = ai_message
-    }
-    await addStreamedMessage(uuid, chunk);
-})
+socket.on("chunk", async (chunk) => {
+  if (!state.activeAIMessage) {
+    console.log("STARTED MESSAGE");
+    uuid = generateUUID();
+    await addStreamedMessage(uuid, "");
+    ai_message = document.getElementById(uuid);
+    state.activeAIMessage = ai_message;
+  }
+  await addStreamedMessage(uuid, chunk);
+});
 
 socket.on("tokens", async (tokens) => {
-    state.totalTokensUsed += tokens
-    console.log("Total tokens so far:", state.totalTokensUsed)
-    endStreamedAIMessage()
-})
-
-socket.on("start_message", async () => {
+  state.totalTokensUsed += tokens;
+  console.log("Total tokens so far:", state.totalTokensUsed);
+  endStreamedAIMessage();
+});
 
-}) 
+socket.on("start_message", async () => {});
 
 socket.on("tool_call", async (tool_call) => {
-    console.log("Tool called: ", tool_call);
-})
+  console.log("Tool called: ", tool_call);
+});
 
 socket.on("tool_response", async (tool_response) => {
-    console.log("Response from tool: ", tool_response);
-    
-})
+  console.log("Response from tool: ", tool_response);
+
+  // Add the tool response to the chat
+  await addToolResponseToProcessContainer(tool_response);
+});
 
 // Remember to parse the streamed response
 
@@ -54,4 +54,4 @@ socket.on("tool_response", async (tool_response) => {
         chat_history.scrollTop = chat_history.scrollHeight;
 */
 
-console.log('socketEvents.js loaded...')
\ No newline at end of file
+console.log("socketEvents.js loaded...");