diff --git a/web/package.json b/web/package.json
index 9dafcb32..fb98509c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -36,6 +36,8 @@
 	"dependencies": {
 		"@lottiefiles/svelte-lottie-player": "^0.3.1",
 		"@tailwindcss/typography": "^0.5.13",
+		"highlight.js": "^11.10.0",
+		"isomorphic-dompurify": "^2.14.0",
 		"showdown": "^2.1.0",
 		"tailwind-scrollbar": "^3.1.0"
 	}
diff --git a/web/src/lib/actions/clickOutside.ts b/web/src/lib/actions/clickOutside.ts
new file mode 100644
index 00000000..6aa14693
--- /dev/null
+++ b/web/src/lib/actions/clickOutside.ts
@@ -0,0 +1,18 @@
+export function clickOutside(element: HTMLElement, callbackFunction: () => void) {
+	function onClick(event: MouseEvent) {
+		if (!element.contains(event.target as Node)) {
+			callbackFunction();
+		}
+	}
+
+	document.body.addEventListener("click", onClick);
+
+	return {
+		update(newCallbackFunction: () => void) {
+			callbackFunction = newCallbackFunction;
+		},
+		destroy() {
+			document.body.removeEventListener("click", onClick);
+		},
+	};
+}
diff --git a/web/src/lib/components/CreateAgentDialog.svelte b/web/src/lib/components/CreateAgentDialog.svelte
new file mode 100644
index 00000000..f9ad7a5a
--- /dev/null
+++ b/web/src/lib/components/CreateAgentDialog.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { base } from "$app/paths";
+    import { clickOutside } from "$lib/actions/clickOutside";
+    import { goto } from "$app/navigation";
+    import { toastStore } from "$lib/stores/ToastStores";
+    import { ToastType } from "$lib/types/Toast";
+	import IconClose from "~icons/carbon/close";
+    import CarbonSearch from "~icons/carbon/search";
+    import CarbonGithub from "~icons/carbon/logo-github";
+
+    export let showModal: boolean;
+    export let onClose: () => void;
+
+    let dialog: HTMLDialogElement;
+    let value: string = "";
+
+    const validateGithubURL = (url: string): boolean => {
+        const githubUrlPattern =
+            /^(https:\/\/github\.com\/[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+\/?)$/;
+        return githubUrlPattern.test(url);
+    };
+
+    const addGithubURL = (url: string) => {
+        value = url;
+    };
+
+    const onCreateAgent = () => {
+        if (validateGithubURL(value)) {
+            goto(`${base}/agent?github=${value}`);
+        } else {
+            toastStore.set({
+                message: "Please enter valid Github URL",
+                type: ToastType.ERROR,
+            });
+        }
+    };
+</script>
+
+{#if showModal}
+    <div
+        class="fixed inset-0 z-20 flex items-center justify-center bg-transparent backdrop-blur-sm"
+    >
+        <dialog
+            bind:this={dialog}
+            class="flex flex-col content-center items-center gap-x-10 gap-y-3 overflow-hidden rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950 dark:hover:bg-gray-950 max-sm:w-[85dvw] max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
+            on:close={() => dialog.close()}
+            open={showModal}
+        >
+            <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>
+            </div>
+            <h1 class="text-xl font-bold text-white">Create Agent with Github</h1>
+            <div
+                class="relative flex h-[50px] min-w-full items-center rounded-md border px-2 has-[:focus]:border-gray-400 sm:w-64 dark:border-gray-600"
+            >
+                <CarbonGithub
+                    height="1.5em"
+                    width="1.5em"
+                    class="pointer-events-none absolute left-2 text-xs text-gray-400"
+                />
+                <input
+                    class="h-[50px] w-full bg-transparent pl-7 focus:outline-none text-white"
+                    placeholder="Github Repo URL"
+                    type="url"
+                    {value}
+                    on:input={(e) => addGithubURL(e.currentTarget.value)}
+                />
+            </div>
+            <button
+                on:click={onCreateAgent}
+                class="mt-4 w-full rounded-full bg-gray-300 px-4 py-3 font-semibold text-black"
+            >
+                Submit
+            </button>
+        </dialog>
+    </div>
+{/if}
diff --git a/web/src/lib/components/Toast.svelte b/web/src/lib/components/Toast.svelte
index c628c441..66287638 100644
--- a/web/src/lib/components/Toast.svelte
+++ b/web/src/lib/components/Toast.svelte
@@ -15,7 +15,7 @@
 
 <div
 	transition:fade|global={{ duration: 300 }}
-	class="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
+	class="pointer-events-none fixed right-0 top-12 z-30 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
 >
 	<div
 		class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
@@ -27,6 +27,6 @@
 		{:else if ToastType.ERROR === toastType}
 		<CarbonError color="red" height="1.5em" width="1.5em" class="mx-2" />
 		{/if}
-		<h2 class="font-semibold mx-2">{message}</h2>
+		<h2 class="font-semibold mx-2 text-white">{message}</h2>
 	</div>
 </div>
diff --git a/web/src/lib/components/chat/ChatInput.svelte b/web/src/lib/components/chat/ChatInput.svelte
index e2885865..bf810894 100644
--- a/web/src/lib/components/chat/ChatInput.svelte
+++ b/web/src/lib/components/chat/ChatInput.svelte
@@ -1,65 +1,64 @@
 <script lang="ts">
-    import { isDesktop } from "$lib/utils/isDesktop";
-    import { onMount, createEventDispatcher } from "svelte";
+	import { isDesktop } from "$lib/utils/isDesktop";
+	import { createEventDispatcher, onMount } from "svelte";
 
-    export let value: string = "";
-    export let placeholder: string = "";
-    export let minRows = 1;
-    export let maxRows: null | number = null;
-    export let disabled: boolean = false;
+	export let value = "";
+	export let minRows = 1;
+	export let maxRows: null | number = null;
+	export let placeholder = "";
+	export let disabled = false;
 
-    let textareaElement: HTMLTextAreaElement;
+	let textareaElement: HTMLTextAreaElement;
 
-    const dispatch = createEventDispatcher<{ submit: void }>();
+	const dispatch = createEventDispatcher<{ submit: void }>();
 
-    $: minHeight = `${1 + minRows * 1.5}em`;
-    $: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
+	$: minHeight = `${1 + minRows * 1.5}em`;
+	$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
 
-    function handleKeydown(event: KeyboardEvent) {
-        //submit on enter
-        if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			textareaElement.blur();
+			if (isDesktop(window)) {
+				textareaElement.focus();
+			}
+			dispatch("submit");
+		}
+	}
 
-            textareaElement.blur();
-
-            if (isDesktop(window)) {
-                textareaElement.focus();
-            }
-
-            dispatch("submit");
-        }
-    }
-
-    onMount(() => {
-        if (isDesktop(window)) {
-            textareaElement.focus();
-        }
-    });
+	onMount(() => {
+		if (isDesktop(window)) {
+			textareaElement.focus();
+		}
+	});
 </script>
 
 <div class="relative min-w-0 flex-1" on:paste>
-    <pre
-        class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
-        aria-hidden="true"
-        style="min-height: {minHeight}; max-height: {maxHeight}"></pre>
-    <textarea
-        enterkeyhint="send"
-        tabindex="0"
-        rows="1"
-        bind:value
-        bind:this={textareaElement}
-        class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
-        {placeholder}
-        {disabled}
-        on:keydown={handleKeydown}
-    />
+	<pre
+		class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
+		aria-hidden="true"
+		style="min-height: {minHeight}; max-height: {maxHeight}">{(value || " ") + "\n"}</pre>
+
+	<textarea
+		enterkeyhint="send"
+		tabindex="0"
+		rows="1"
+		class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
+		class:text-gray-400={disabled}
+		bind:value
+		bind:this={textareaElement}
+		{disabled}
+		on:keydown={handleKeydown}
+		on:beforeinput
+		{placeholder}
+	/>
 </div>
 
 <style>
-    pre,
-    textarea {
-        font-family: inherit;
-        box-sizing: border-box;
-        line-height: 1.5;
-    }
+	pre,
+	textarea {
+		font-family: inherit;
+		box-sizing: border-box;
+		line-height: 1.5;
+	}
 </style>
diff --git a/web/src/lib/components/chat/ChatIntroduction.svelte b/web/src/lib/components/chat/ChatIntroduction.svelte
index 068cfa86..d90d1018 100644
--- a/web/src/lib/components/chat/ChatIntroduction.svelte
+++ b/web/src/lib/components/chat/ChatIntroduction.svelte
@@ -4,7 +4,6 @@
 
     import Icon from "@iconify/svelte";
     import { ToastType } from "$lib/types/Toast";
-    import Toast from "../Toast.svelte";
 
     export let agentDisplayName: string = "";
     export let agentDescription: string = "";
@@ -34,7 +33,6 @@
                 return;
             }
 
-            console.log('response', _response);
             toastStore.set({message: 'Notification sent successfully', type: ToastType.SUCCESS});
         } catch (error) {
             console.log("error", error);
diff --git a/web/src/lib/components/chat/ChatWindow.svelte b/web/src/lib/components/chat/ChatWindow.svelte
index 5953b6de..a0e4284f 100644
--- a/web/src/lib/components/chat/ChatWindow.svelte
+++ b/web/src/lib/components/chat/ChatWindow.svelte
@@ -64,10 +64,10 @@
             const modelResponse = await response.json();
             messages = [
                 ...messages,
-                { role: "model", text: modelResponse.response, references: modelResponse.references },
+                { role: "model", text: modelResponse.response },
             ];
+            agentReferences = modelResponse?.references
 
-            console.log('model response', modelResponse);
         } catch (error) {
             console.log("error", error);
         }
diff --git a/web/src/lib/types/Message.ts b/web/src/lib/types/Message.ts
index d41f463a..06ed00ef 100644
--- a/web/src/lib/types/Message.ts
+++ b/web/src/lib/types/Message.ts
@@ -1,5 +1,4 @@
 export type Message = {
     role: "user" | "model";
     text: string,
-    references?: any[],
 }
\ No newline at end of file
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 7130b104..276e9848 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,15 +2,10 @@
     import "../styles/main.css";
     import { onDestroy, onMount } from "svelte";
     import { browser } from "$app/environment";
-    import NavMenu from "$lib/components/NavMenu.svelte";
-    import MobileNav from "$lib/components/MobileNav.svelte";
-    import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
     import Toast from "$lib/components/Toast.svelte";
     import { ToastType } from "$lib/types/Toast";
     import { toastStore } from "$lib/stores/ToastStores";
 
-    let isNavCollapsed = true;
-    let isNavOpen = false;
     let toastMessage: string | null = null;
     let toastType: ToastType | null = null;
     let toastTimeout: ReturnType<typeof setTimeout>;
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 7ef48e96..757a1f7e 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,16 +1,240 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import { page } from "$app/stores";
+
+    import CarbonSearch from "~icons/carbon/search";
+    import CarbonAdd from "~icons/carbon/add";
+    import CarbonGithub from "~icons/carbon/logo-github";
+    import type { Agent } from "$lib/types/Agent";
     import { goto } from "$app/navigation";
+    import { debounce } from "$lib/utils/debounce";
+    import { base } from "$app/paths";
+    import CreateAgentDialog from "$lib/components/CreateAgentDialog.svelte";
+
+    const SEARCH_DEBOUNCE_DELAY = 400;
+    let agents: Agent[] = [];
+    let filteredAgents: Agent[] = [];
+    let searchValue: string = "";
+    let showModal: boolean = false;
+
+    $: loading = true;
 
-    import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+    onMount(async () => {
+        loading = true;
+        const response = await fetch(
+            "https://api.commanddash.dev/agent/web/get-agent-list",
+            {
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                method: "POST",
+                body: JSON.stringify({ cli_version: "0.0.1" }),
+            },
+        );
 
-    onMount(() => {
-        goto('/marketplace');
+        const _response = await response.json();
+        if (!response.ok) {
+            loading = false;
+        }
+        agents = _response;
+        filteredAgents = _response;
+        loading = false;
     });
+
+    const navigateAgents = (agent: Agent) => {
+        goto(`/agent/${agent.name}`);
+    };
+
+    const search = debounce(async (value: string) => {
+        searchValue = value.toLowerCase();
+        filteredAgents = agents.filter((agent) => {
+            return (
+                agent.metadata.display_name
+                    .toLowerCase()
+                    .includes(searchValue) ||
+                agent.author.name.toLowerCase().includes(searchValue) ||
+                agent.author.source_url?.toLowerCase().includes(searchValue)
+            );
+        });
+    }, SEARCH_DEBOUNCE_DELAY);
+
+    const formatText = (url: string, maxLength: number) => {
+        return url.length > maxLength ? url.slice(0, maxLength) + "..." : url;
+    };
 </script>
 
 <svelte:head>
-    <title>Commanddash</title>
+    <title>CommandDash - Marketplace</title>
+    <meta property="og:title" content="CommandDash - Explore Agents" />
+    <meta property="og:type" content="link" />
+    <meta
+        property="og:description"
+        content="Browse CommandDash Explore Agents made by the community."
+    />
+    <meta property="og:url" content={$page.url.href} />
 </svelte:head>
 
-<ChatWindow />
+<div
+    class="scrollbar-custom mr-1 h-screen overflow-y-auto py-12 max-sm:pt-8 md:py-24"
+>
+    <div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
+        <div class="flex flex-row">
+            <div>
+                <div class="flex items-center">
+                    <h1 class="text-2xl font-bold">Marketplace</h1>
+                </div>
+                <h3 class="text-gray-500">
+                    Explore the agents in the marketplace made by dev community
+                </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>
+        </div>
+        <div class="mt-6 flex flex-wrap gap-2 items-center">
+            <div
+                class="relative flex h-[50px] min-w-full items-center rounded-full border px-2 has-[:focus]:border-gray-400 sm:w-64 dark:border-gray-600"
+            >
+                <CarbonSearch
+                    height="1.5em"
+                    width="1.5em"
+                    class="pointer-events-none absolute left-2 text-xs text-gray-400"
+                />
+                <input
+                    class="h-[50px] w-full bg-transparent pl-7 focus:outline-none"
+                    placeholder="Search agents in the marketplace"
+                    maxlength="150"
+                    type="search"
+                    value={searchValue}
+                    on:input={(e) => search(e.currentTarget.value)}
+                />
+            </div>
+            <!-- <select
+                class="rounded-lg border border-gray-300 bg-gray-50 px-2 py-1 text-sm text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            >
+                <option value={SortKey.TRENDING}>{SortKey.TRENDING}</option>
+                <option value={SortKey.POPULAR}>{SortKey.POPULAR}</option>
+                <option value={SortKey.NEW}>{SortKey.NEW}</option>
+            </select> -->
+        </div>
+        {#if loading}
+            <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">Loading results</span>
+                    <div class="typing-loader mx-2"></div>
+                </div>
+            </div>
+        {:else}
+            <div
+                class="mt-7 flex flex-wrap items-center gap-x-2 gap-y-3 text-sm"
+            ></div>
+            <div
+                class="mt-8 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4"
+            >
+                {#each filteredAgents as agent}
+                    <button
+                        class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
+                        on:click={() => navigateAgents(agent)}
+                    >
+                        <img
+                            src={agent.metadata.avatar_id}
+                            alt="Avatar"
+                            class="mb-2 aspect-square size-12 flex-none rounded-full object-cover sm:mb-6 sm:size-20"
+                        />
+                        <h3
+                            class="mb-2 line-clamp-2 max-w-full break-words text-center text-[.8rem] font-semibold leading-snug sm:text-sm"
+                        >
+                            {agent.metadata.display_name}
+                        </h3>
+                        <p
+                            class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400"
+                        >
+                            {agent.metadata.description}
+                        </p>
+                        {#if agent.author.source_url}
+                            <a
+                                href={agent.author.source_url}
+                                class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500 line-clamp-1 hover:underline"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                {formatText(agent.author.source_url, 20)}
+                            </a>
+                        {:else}
+                            <p
+                                class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500"
+                            >
+                                Created by <a
+                                    class="hover:underline"
+                                    href="https://github.com/{agent.author
+                                        .github_id}"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    {agent.author.name}
+                                </a>
+                            </p>
+                        {/if}
+                    </button>
+                {/each}
+                <button
+                    class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
+                    on:click={() => {
+                        showModal = true;
+                    }}
+                >
+                    <CarbonGithub height="5.5em" width="5.5em" />
+                    <h3
+                        class="mb-2 line-clamp-2 max-w-full break-words text-center text-[.8rem] font-semibold leading-snug sm:text-sm mt-2"
+                    >
+                        Create from github
+                    </h3>
+                </button>
+            </div>
+        {/if}
+    </div>
+</div>
+<CreateAgentDialog
+    bind:showModal
+    onClose={() => {
+        showModal = false;
+    }}
+/>
+
+<style>
+    .typing-loader {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        animation: loading 1s linear infinite alternate;
+        margin-bottom: 4px;
+    }
+
+    @keyframes loading {
+        0% {
+            background-color: #0e70c0;
+            box-shadow:
+                8px 0px 0px 0px #d4d4d4,
+                16px 0px 0px 0px #d4d4d4;
+        }
+
+        25% {
+            background-color: #d4d4d4;
+            box-shadow:
+                8px 0px 0px 0px #0e70c0,
+                16px 0px 0px 0px #d4d4d4;
+        }
+
+        75% {
+            background-color: #d4d4d4;
+            box-shadow:
+                8px 0px 0px 0px #d4d4d4,
+                16px 0px 0px 0px #0e70c0;
+        }
+    }
+</style>
diff --git a/web/src/routes/agent/[id]/+page.svelte b/web/src/routes/agent/[id]/+page.svelte
index c4f6b0bf..267eb871 100644
--- a/web/src/routes/agent/[id]/+page.svelte
+++ b/web/src/routes/agent/[id]/+page.svelte
@@ -50,6 +50,7 @@
         agentDisplayName={currentAgentDetails?.metadata?.display_name}
         agentDescription={currentAgentDetails?.metadata?.description}
         agentLogo={currentAgentDetails?.metadata?.avatar_id}
+        agentIsDataSourceIndexed={currentAgentDetails.data_sources_indexed}
         agentId={currentAgentDetails?.name}
     />
 {/if}
diff --git a/web/src/routes/marketplace/+page.svelte b/web/src/routes/marketplace/+page.svelte
deleted file mode 100644
index e183eb08..00000000
--- a/web/src/routes/marketplace/+page.svelte
+++ /dev/null
@@ -1,192 +0,0 @@
-<script lang="ts">
-    import { onMount } from "svelte";
-    import { page } from "$app/stores";
-
-    import CarbonSearch from "~icons/carbon/search";
-    import type { Agent } from "$lib/types/Agent";
-    import { goto } from "$app/navigation";
-    import { debounce } from "$lib/utils/debounce";
-
-    const SEARCH_DEBOUNCE_DELAY = 400;
-    let agents: Agent[] = [];
-    let filteredAgents: Agent[] = [];
-    let searchValue: string = "";
-
-    $: loading = true;
-
-    onMount(async () => {
-        loading = true;
-        const response = await fetch(
-            "https://api.commanddash.dev/agent/web/get-agent-list",
-            {
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                method: "POST",
-                body: JSON.stringify({ cli_version: "0.0.1" }),
-            },
-        );
-
-        const _response = await response.json();
-        if (!response.ok) {
-            loading = false;
-        }
-        agents = _response;
-        filteredAgents = _response;
-        loading = false;
-    });
-
-    const navigateAgents = (agent: Agent) => {
-        goto(`/agent/${agent.name}`);
-    };
-
-    const search = debounce(async (value: string) => {
-        searchValue = value.toLowerCase();
-        filteredAgents = agents.filter((agent) => {
-            return (
-                agent.metadata.display_name
-                    .toLowerCase()
-                    .includes(searchValue) ||
-                agent.author.name.toLowerCase().includes(searchValue)
-            );
-        });
-    }, SEARCH_DEBOUNCE_DELAY);
-</script>
-
-<svelte:head>
-    <title>CommandDash - Explore Agents</title>
-    <meta property="og:title" content="CommandDash - Explore Agents" />
-    <meta property="og:type" content="link" />
-    <meta
-        property="og:description"
-        content="Browse CommandDash Explore Agents made by the community."
-    />
-    <meta property="og:url" content={$page.url.href} />
-</svelte:head>
-<div
-    class="scrollbar-custom mr-1 h-screen overflow-y-auto py-12 max-sm:pt-8 md:py-24"
->
-    <div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
-        <div class="flex items-center">
-            <h1 class="text-2xl font-bold">Marketplace</h1>
-        </div>
-        <h3 class="text-gray-500">
-            Explore the agents in the marketplace made by dev community
-        </h3>
-        <div class="mt-6 flex flex-wrap gap-2 items-center">
-            <div
-                class="relative flex h-[50px] min-w-full items-center rounded-full border px-2 has-[:focus]:border-gray-400 sm:w-64 dark:border-gray-600"
-            >
-                <CarbonSearch
-                    height="1.5em"
-                    width="1.5em"
-                    class="pointer-events-none absolute left-2 text-xs text-gray-400"
-                />
-                <input
-                    class="h-[50px] w-full bg-transparent pl-7 focus:outline-none"
-                    placeholder="Search agents in the marketplace"
-                    maxlength="150"
-                    type="search"
-                    value={searchValue}
-                    on:input={(e) => search(e.currentTarget.value)}
-                />
-            </div>
-            <!-- <select
-                class="rounded-lg border border-gray-300 bg-gray-50 px-2 py-1 text-sm text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
-            >
-                <option value={SortKey.TRENDING}>{SortKey.TRENDING}</option>
-                <option value={SortKey.POPULAR}>{SortKey.POPULAR}</option>
-                <option value={SortKey.NEW}>{SortKey.NEW}</option>
-            </select>
-
-			<a
-				href="#"
-				class="flex ml-auto items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
-			>
-				<CarbonAdd />Create quick agent
-			</a> -->
-        </div>
-        {#if loading}
-            <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">Loading results</span>
-                    <div class="typing-loader mx-2"></div>
-                </div>
-            </div>
-        {:else}
-            <div
-                class="mt-7 flex flex-wrap items-center gap-x-2 gap-y-3 text-sm"
-            ></div>
-            <div
-                class="mt-8 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4"
-            >
-                {#each filteredAgents as agent}
-                    <button
-                        class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
-                        on:click={() => navigateAgents(agent)}
-                    >
-                        <img
-                            src={agent.metadata.avatar_id}
-                            alt="Avatar"
-                            class="mb-2 aspect-square size-12 flex-none rounded-full object-cover sm:mb-6 sm:size-20"
-                        />
-                        <h3
-                            class="mb-2 line-clamp-2 max-w-full break-words text-center text-[.8rem] font-semibold leading-snug sm:text-sm"
-                        >
-                            {agent.metadata.display_name}
-                        </h3>
-                        <p
-                            class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400"
-                        >
-                            {agent.metadata.description}
-                        </p>
-                        <p
-                            class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500"
-                        >
-                            Created by <a
-                                class="hover:underline"
-                                href="https://github.com/{agent.author
-                                    .github_id}"
-                            >
-                                {agent.author.name}
-                            </a>
-                        </p>
-                    </button>
-                {/each}
-            </div>
-        {/if}
-    </div>
-</div>
-<style>
-
-    .typing-loader {
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-        animation: loading 1s linear infinite alternate;
-        margin-bottom: 4px;
-    }
-
-    @keyframes loading {
-        0% {
-            background-color: #0e70c0;
-            box-shadow:
-                8px 0px 0px 0px #d4d4d4,
-                16px 0px 0px 0px #d4d4d4;
-        }
-
-        25% {
-            background-color: #d4d4d4;
-            box-shadow:
-                8px 0px 0px 0px #0e70c0,
-                16px 0px 0px 0px #d4d4d4;
-        }
-
-        75% {
-            background-color: #d4d4d4;
-            box-shadow:
-                8px 0px 0px 0px #d4d4d4,
-                16px 0px 0px 0px #0e70c0;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/web/src/styles/highlight-js.css b/web/src/styles/highlight-js.css
new file mode 100644
index 00000000..27f2b82e
--- /dev/null
+++ b/web/src/styles/highlight-js.css
@@ -0,0 +1 @@
+@import "highlight.js/styles/atom-one-dark";
\ No newline at end of file
diff --git a/web/src/styles/main.css b/web/src/styles/main.css
index bd6213e1..a79bfc08 100644
--- a/web/src/styles/main.css
+++ b/web/src/styles/main.css
@@ -1,3 +1,5 @@
+@import "./highlight-js.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
\ No newline at end of file