diff --git a/web/package.json b/web/package.json
index fb98509c..817e30ca 100644
--- a/web/package.json
+++ b/web/package.json
@@ -35,7 +35,9 @@
 	"type": "module",
 	"dependencies": {
 		"@lottiefiles/svelte-lottie-player": "^0.3.1",
+		"@microsoft/applicationinsights-web": "^3.3.1",
 		"@tailwindcss/typography": "^0.5.13",
+		"dotenv": "^16.4.5",
 		"highlight.js": "^11.10.0",
 		"isomorphic-dompurify": "^2.14.0",
 		"showdown": "^2.1.0",
diff --git a/web/src/lib/components/CreateAgentDialog.svelte b/web/src/lib/components/CreateAgentDialog.svelte
index f9ad7a5a..8ce6b99a 100644
--- a/web/src/lib/components/CreateAgentDialog.svelte
+++ b/web/src/lib/components/CreateAgentDialog.svelte
@@ -4,7 +4,8 @@
     import { goto } from "$app/navigation";
     import { toastStore } from "$lib/stores/ToastStores";
     import { ToastType } from "$lib/types/Toast";
-	import IconClose from "~icons/carbon/close";
+    import appInsights from "$lib/utils/appInsights"; // Import the appInsights instance
+    import IconClose from "~icons/carbon/close";
     import CarbonSearch from "~icons/carbon/search";
     import CarbonGithub from "~icons/carbon/logo-github";
 
@@ -26,6 +27,14 @@
 
     const onCreateAgent = () => {
         if (validateGithubURL(value)) {
+            // Track custom event for form submission
+            appInsights.trackEvent({
+                name: "CreateAgentSubmitted",
+                properties: {
+                    githubUrl: value,
+                },
+            });
+
             goto(`${base}/agent?github=${value}`);
         } else {
             toastStore.set({
@@ -34,6 +43,13 @@
             });
         }
     };
+
+    $: if (showModal) {
+        // Track custom event for dialog opened
+        appInsights.trackEvent({
+            name: "CreateAgentDialogOpened",
+        });
+    }
 </script>
 
 {#if showModal}
@@ -48,11 +64,11 @@
         >
             <div class="absolute right-0 top-0 mr-2 mt-2">
                 <button
-					class="flex items-center px-2.5 py-1 text-sm text-white"
-					on:click={onClose}
-				>
-					<IconClose class="mr-1.5 text-xl" />
-				</button>
+                    class="flex items-center px-2.5 py-1 text-sm text-white"
+                    on:click={onClose}
+                >
+                    <IconClose class="mr-1.5 text-xl" />
+                </button>
             </div>
             <h1 class="text-xl font-bold text-white">Create Agent with Github</h1>
             <div
@@ -79,4 +95,4 @@
             </button>
         </dialog>
     </div>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/web/src/lib/components/chat/ChatIntroduction.svelte b/web/src/lib/components/chat/ChatIntroduction.svelte
index 621c484d..b1d50854 100644
--- a/web/src/lib/components/chat/ChatIntroduction.svelte
+++ b/web/src/lib/components/chat/ChatIntroduction.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
     import { toastStore } from "$lib/stores/ToastStores";
+    import appInsights from "$lib/utils/appInsights"; // Import the appInsights instance
 
     import Icon from "@iconify/svelte";
     import { ToastType } from "$lib/types/Toast";
@@ -48,6 +49,9 @@
                     message: _response.message,
                     type: ToastType.ERROR,
                 });
+                appInsights.trackException({
+                    error: new Error(_response.message),
+                }); // Track exception
                 return;
             }
 
@@ -55,19 +59,46 @@
                 message: "Notification sent successfully",
                 type: ToastType.SUCCESS,
             });
+
+            // Track custom event for notification sent
+            appInsights.trackEvent({
+                name: "NotificationSent",
+                properties: {
+                    agentId,
+                    emailValue,
+                },
+            });
         } catch (error) {
             console.log("error", error);
             toastStore.set({
                 message: "Ops! Something went wrong",
                 type: ToastType.ERROR,
             });
+            appInsights.trackException({ error: new Error(`${error}`) }); // Track exception
         }
     };
 
     const onQuestionnaire = (questionnaire: Questionnaire) => {
         questionnaireStore.set(questionnaire);
-    }
 
+        // Track custom event for questionnaire selected
+        appInsights.trackEvent({
+            name: "QuestionnaireSelected",
+            properties: {
+                agentId,
+                questionnaireId: questionnaire.id,
+                questionnaireMessage: questionnaire.message,
+            },
+        });
+    };
+    const trackLinkClick = () => {
+        appInsights.trackEvent({
+            name: "VSCodeLinkClicked",
+            properties: {
+                agentId,
+            },
+        });
+    };
 </script>
 
 <div class="my-auto grid gap-4 lg:grid-cols-2">
@@ -96,6 +127,7 @@
                 href="https://marketplace.visualstudio.com/items?itemName=WelltestedAI.fluttergpt"
                 target="_blank"
                 class="flex items-center justify-center w-full md:w-auto h-12 px-6 font-medium text-white transition-colors duration-150 ease-in-out bg-blue-800 rounded-md hover:bg-blue-700 space-x-2 shadow-lg"
+                on:click={trackLinkClick}
             >
                 <IconVisualStudio />
                 <div class="text-sm text-white">VSCode</div>
@@ -145,7 +177,8 @@
             {#each questionnaires as questionnaire}
                 <button
                     class={`relative rounded-xl border ${questionnaire.id === "generate-summary" ? "bg-[#497BEF] text-gray-300 border-[#497BEF] hover:bg-[#287CEB] hover:border-[#287CEB]" : "bg-gray-50 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 text-gray-600 hover:bg-gray-100"} p-3 max-xl:text-sm xl:p-3.5`}
-                    on:click={() => onQuestionnaire(questionnaire)}>
+                    on:click={() => onQuestionnaire(questionnaire)}
+                >
                     {questionnaire.message}
                 </button>
             {/each}
diff --git a/web/src/lib/components/chat/ChatMessage.svelte b/web/src/lib/components/chat/ChatMessage.svelte
index b0aea399..8d0e8638 100644
--- a/web/src/lib/components/chat/ChatMessage.svelte
+++ b/web/src/lib/components/chat/ChatMessage.svelte
@@ -2,7 +2,7 @@
     import showdown from "showdown";
     import hljs from "highlight.js";
     import DOMPurify from "isomorphic-dompurify";
-
+    import appInsights from "$lib/utils/appInsights"; 
     import { writable } from "svelte/store";
     import Icon from "@iconify/svelte";
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
@@ -180,6 +180,13 @@
             },
         ];
     };
+
+    const trackLinkClick = () => {
+        appInsights.trackEvent({
+            name: 'VSCodeLinkClicked',
+        
+        });
+    }
 </script>
 
 {#each messages as message, index}
@@ -266,6 +273,7 @@
                                 href="https://marketplace.visualstudio.com/items?itemName=WelltestedAI.fluttergpt"
                                 target="_blank"
                                 class="flex items-center justify-center w-full md:w-auto h-12 px-6 font-medium text-white transition-colors duration-150 ease-in-out bg-blue-800 rounded-md hover:bg-blue-700 space-x-2 shadow-lg"
+                                on:click={trackLinkClick}
                             >
                                 <IconVisualStudio />
                                 <div class="text-sm text-white">VSCode</div>
diff --git a/web/src/lib/components/chat/ChatWindow.svelte b/web/src/lib/components/chat/ChatWindow.svelte
index b9f4b420..453f4a6b 100644
--- a/web/src/lib/components/chat/ChatWindow.svelte
+++ b/web/src/lib/components/chat/ChatWindow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy } from "svelte";
+    import appInsights from "$lib/utils/appInsights";
 
     import { questionnaireStore } from "$lib/stores/QuestionnaireStores";
     import type { Message } from "$lib/types/Message";
@@ -35,34 +36,37 @@
         LottiePlayer = module.LottiePlayer;
 
         questionnaireStore.subscribe((questionnaire: Questionnaire) => {
-        
             switch (questionnaire?.id) {
                 case "generate-summary":
                     message = `Please give me a complete summary about ${agentDisplayName}`;
                     handleSubmit();
                     break;
                 case "ask-about":
-                    message = "Help me understand (x) feature in detail with helpful links to read more about it";
+                    message =
+                        "Help me understand (x) feature in detail with helpful links to read more about it";
                     break;
                 case "search-code":
-                    message = "Where can I find the code that does (y). Please help me with links to it";
+                    message =
+                        "Where can I find the code that does (y). Please help me with links to it";
                     break;
                 case "get-help":
-                    message = "Help me resolve the (z) problem I'm facing. Here is some helpful code: (code)";
+                    message =
+                        "Help me resolve the (z) problem I'm facing. Here is some helpful code: (code)";
                     break;
             }
-        })
+        });
     });
 
     onDestroy(() => {
         message = "";
-        questionnaireStore.set({id: "", message: ""});
+        questionnaireStore.set({ id: "", message: "" });
     });
 
     const onHome = () => {
         message = "";
-        goto('/');
-    }
+        goto("/");
+        appInsights.trackEvent({ name: "NavigateHome" });
+    };
 
     const handleSubmit = async () => {
         if (messageLoading || loading) {
@@ -72,7 +76,6 @@
 
         messages = [...messages, { role: "user", text: message }];
 
-
         const agentData = {
             agent_name: agentName,
             agent_version: agentVersion,
@@ -94,15 +97,25 @@
                     },
                 },
             );
-            
+
             const modelResponse = await response.json();
-            console.log('model response', modelResponse);
+            console.log("model response", modelResponse);
             messages = [
                 ...messages,
-                { role: "model", text: modelResponse.response, references: modelResponse.references },
+                {
+                    role: "model",
+                    text: modelResponse.response,
+                    references: modelResponse.references,
+                },
             ];
-            agentReferences = modelResponse?.references
-
+            agentReferences = modelResponse?.references;
+            appInsights.trackEvent({
+                name: "MessageSent",
+                properties: {
+                    agentName,
+                    agentVersion,
+                },
+            });
         } catch (error) {
             console.log("error", error);
         }
@@ -122,16 +135,20 @@
             <div class="flex h-max flex-col gap-6 pb-40 2xl:gap-7">
                 {#if messages.length > 0}
                     {#if !loading}
-                        <ChatMessage {messages} {agentLogo} {agentDisplayName} />
+                        <ChatMessage
+                            {messages}
+                            {agentLogo}
+                            {agentDisplayName}
+                        />
                         {#if messageLoading}
                             {#if LottiePlayer}
-                                <div
-                                    class="flex-col w-full h-48 px-2 py-3"
-                                >
+                                <div class="flex-col w-full h-48 px-2 py-3">
                                     <div
                                         class="inline-flex flex-row items-end px-2"
                                     >
-                                        <span id="workspace-loader-text">Preparing results</span>
+                                        <span id="workspace-loader-text"
+                                            >Preparing results</span
+                                        >
                                         <div class="typing-loader mx-2"></div>
                                     </div>
                                 </div>
diff --git a/web/src/lib/utils/appInsights.ts b/web/src/lib/utils/appInsights.ts
index a521877f..eca05256 100644
--- a/web/src/lib/utils/appInsights.ts
+++ b/web/src/lib/utils/appInsights.ts
@@ -1,18 +1,18 @@
-// import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 
-// const instrumentationKey = import.meta.env.VITE_INSTRUMENTATION_KEY;
+const instrumentationKey = import.meta.env.VITE_INSTRUMENTATION_KEY;
 
-// if (!instrumentationKey) {
-//   console.log('instrumentation key not found');
-// }
+if (!instrumentationKey) {
+  console.log('instrumentation key not found');
+}
 
-// const appInsights = new ApplicationInsights({
-//   config: {
-//     instrumentationKey: instrumentationKey
-//   }
-// });
+const appInsights = new ApplicationInsights({
+  config: {
+    instrumentationKey: instrumentationKey
+  }
+});
 
-// appInsights.loadAppInsights();
-// appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview
+appInsights.loadAppInsights();
+appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview
 
-// export default appInsights;
\ No newline at end of file
+export default appInsights;
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index e9f3edb1..c863c2bf 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { page } from "$app/stores";
-
+    import appInsights from "$lib/utils/appInsights";
     import CarbonSearch from "~icons/carbon/search";
     import CarbonAdd from "~icons/carbon/add";
     import CarbonGithub from "~icons/carbon/logo-github";
@@ -35,14 +35,22 @@
         const _response = await response.json();
         if (!response.ok) {
             loading = false;
+            appInsights.trackException({
+                error: new Error("Failed to fetch agents"),
+            }); // Track
         }
         agents = _response;
         filteredAgents = _response;
         loading = false;
+        appInsights.trackEvent({ name: "AgentsLoaded" }); // Track custom event   });
     });
 
     const navigateAgents = (agent: Agent) => {
         goto(`/agent/${agent.name}`);
+        appInsights.trackEvent({
+            name: "NavigateAgent",
+            properties: { agentName: agent.name },
+        }); // Track custom event
     };
 
     const search = debounce(async (value: string) => {
@@ -56,6 +64,7 @@
                 agent.author.source_url?.toLowerCase().includes(searchValue)
             );
         });
+        appInsights.trackEvent({ name: "Search", properties: { searchValue } }); // Track cus
     }, SEARCH_DEBOUNCE_DELAY);
 
     const formatGithubUrl = (url: string) => {
@@ -99,13 +108,13 @@
                 </h3>
             </div>
             <button
-    class="flex ml-auto h-9 items-center gap-1 whitespace-nowrap rounded-lg border border-gray-300 bg-gradient-to-r from-gray-700 via-gray-900 to-black text-white py-1 px-3 shadow-lg hover:bg-gradient-to-r hover:from-gray-600 hover:via-gray-800 hover:to-black hover:shadow-md dark:border-gray-700 dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-black dark:hover:from-gray-700 dark:hover:via-gray-800 dark:hover:to-black transition duration-200 ease-in-out transform hover:-translate-y-1"
-    on:click={() => {
-        showModal = true;
-    }}
->
-    <CarbonGithub />Create Agent
-</button>
+                class="flex ml-auto h-9 items-center gap-1 whitespace-nowrap rounded-lg border border-gray-300 bg-gradient-to-r from-gray-700 via-gray-900 to-black text-white py-1 px-3 shadow-lg hover:bg-gradient-to-r hover:from-gray-600 hover:via-gray-800 hover:to-black hover:shadow-md dark:border-gray-700 dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-black dark:hover:from-gray-700 dark:hover:via-gray-800 dark:hover:to-black transition duration-200 ease-in-out transform hover:-translate-y-1"
+                on:click={() => {
+                    showModal = true;
+                }}
+            >
+                <CarbonGithub />Create Agent
+            </button>
         </div>
         <div class="mt-6 flex flex-wrap gap-2 items-center">
             <div
diff --git a/web/src/routes/agent/+page.svelte b/web/src/routes/agent/+page.svelte
index 3cb99f74..8c1cbff1 100644
--- a/web/src/routes/agent/+page.svelte
+++ b/web/src/routes/agent/+page.svelte
@@ -2,6 +2,7 @@
     import { onMount } from "svelte";
     import { error as pageError } from "@sveltejs/kit";
     import { page } from "$app/stores";
+    import appInsights from "$lib/utils/appInsights";
 
     import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
     import { type Agent } from "$lib/types/Agent";
@@ -15,6 +16,10 @@
         loading = true;
         const ref: string = $page.url.searchParams.get("github") || "";
 
+        appInsights.trackPageView({
+            name: "AgentPage",
+        });
+
         const response = await fetch(
             "https://api.commanddash.dev/agent/get-latest-agent",
             {
@@ -30,11 +35,21 @@
         if (!response.ok) {
             loading = false;
             errorMessage = _response.message;
+            appInsights.trackException({ error: new Error(_response.message) }); // Track exception
             throw pageError(response.status, _response.message);
         }
 
         currentAgentDetails = _response as Agent;
         loading = false;
+        // Track custom event for agent details loaded
+        appInsights.trackEvent({
+            name: "AgentDetailsLoaded",
+            properties: {
+                agentName: currentAgentDetails.name,
+                agentVersion: currentAgentDetails.version,
+                agentDisplayName: currentAgentDetails.metadata.display_name,
+            },
+        });
     });
 </script>
 
@@ -55,9 +70,7 @@
 {#if loading}
     <LoadingPage />
 {:else if !loading && !currentAgentDetails}
-    <div
-        class="h-screen inline-flex justify-center items-center flex-col"
-    >
+    <div class="h-screen inline-flex justify-center items-center flex-col">
         <h1 class="text-2xl">Error:</h1>
         <h1 class="text-xl">{errorMessage}</h1>
     </div>