diff --git a/package.json b/package.json
index 6977417343..6b87c83373 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
 		"dotenv": "^16.3.1",
 		"highlight.js": "^11.8.0",
 		"markdown-it": "^13.0.1",
+		"meilisearch": "^0.35.0",
 		"motion": "^10.16.2"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3a3f74559..31b2073333 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   markdown-it:
     specifier: ^13.0.1
     version: 13.0.1
+  meilisearch:
+    specifier: ^0.35.0
+    version: 0.35.0
   motion:
     specifier: ^10.16.2
     version: 10.16.2
@@ -1565,6 +1568,14 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: true
 
+  /cross-fetch@3.1.8:
+    resolution: {integrity: sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==}
+    dependencies:
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2935,6 +2946,14 @@ packages:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
     dev: false
 
+  /meilisearch@0.35.0:
+    resolution: {integrity: sha512-gF1I6K5/Wpe7BWfjBnG+o19y/FIpJ9HbN+byON6CB9U3uE7qc6GvwUbjKOllh7LKXQVVxH/kCu7Jn0ODCUwqbQ==}
+    dependencies:
+      cross-fetch: 3.1.8
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -3194,6 +3213,18 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-gyp@9.4.0:
     resolution: {integrity: sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==}
     engines: {node: ^12.13 || ^14.13 || >=16}
@@ -4362,6 +4393,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
@@ -4651,6 +4686,17 @@ packages:
       - terser
     dev: true
 
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
new file mode 100644
index 0000000000..ca9beeecb8
--- /dev/null
+++ b/src/lib/components/Search.svelte
@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { Action } from 'svelte/action';
+	import { MeiliSearch, type Hits, type Hit } from 'meilisearch';
+
+	export let open: boolean = true;
+
+	let value: string;
+	let container: HTMLDivElement;
+
+	const client = new MeiliSearch({
+		host: 'https://search.appwrite.org',
+		apiKey: 'd7e83e21c0daf2a471ef4c463c7872e55b91b0cd02e2d20e9c6f6f1c4cd09ed3'
+	});
+	const index = client.index<Props>('website');
+
+	type Props = {
+		url: string;
+		title?: string;
+		uid?: string;
+		meta?: Record<string, string>;
+		page_block?: number;
+		urls_tags?: Array<string>;
+		h1?: string;
+		h2?: string;
+		h3?: string;
+		h4?: string;
+		h5?: string;
+		h6?: string;
+		p?: string;
+		anchor?: string;
+	};
+
+	let results: Hits<Props> = [];
+
+	async function search(value: string) {
+		return index.search(value, {
+			limit: 5
+		});
+	}
+
+	async function handleInput(value: string) {
+		const response = await search(value);
+		results = response.hits.filter((hit) => hit.h1);
+	}
+
+	function handleExit(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		if (event.target === container) {
+			open = false;
+		}
+	}
+
+	function createHref(hit: Hit<Props>): string {
+		const anchor = hit.anchor === '#' ? '' : hit.anchor ?? '';
+		const target = new URL(hit.url + anchor);
+
+		return target.toString();
+	}
+
+	const recommended: Hits<Props> = [
+		{
+			uid: 'recommended-references-account',
+			url: 'https://website-appwrite.vercel.app/docs/references/cloud/client-web/databases',
+			h1: 'References',
+			h2: 'Databases'
+		},
+		{
+			uid: 'recommended-references-teans',
+			url: 'https://website-appwrite.vercel.app/docs/references/cloud/client-web/teams',
+			h1: 'References',
+			h2: 'Teams'
+		},
+		{
+			uid: 'recommended-references-databases',
+			url: 'https://website-appwrite.vercel.app/docs/references/cloud/client-web/databases',
+			h1: 'References',
+			h2: 'Databases'
+		},
+		{
+			uid: 'recommended-references-storage',
+			url: 'https://website-appwrite.vercel.app/docs/references/cloud/client-web/storage',
+			h1: 'References',
+			h2: 'Storage'
+		}
+	];
+
+	const elements = new Map<number, HTMLElement>();
+
+	const arrowKeyFocus: Action<HTMLElement, number> = (node, index) => {
+		elements.set(index, node);
+		const callback = (event: KeyboardEvent) => {
+			switch (event.key) {
+				case 'ArrowDown':
+					{
+						event.preventDefault();
+						const target = index + 1;
+						if (elements.has(target)) {
+							elements.get(target)?.focus();
+						}
+					}
+					break;
+				case 'ArrowUp':
+					{
+						event.preventDefault();
+						const target = index - 1;
+						if (elements.has(target)) {
+							elements.get(target)?.focus();
+						}
+					}
+					break;
+			}
+		};
+
+		node.addEventListener('keydown', callback);
+
+		return {
+			destroy() {
+				elements.delete(index);
+				node.removeEventListener('keydown', callback);
+			}
+		};
+	};
+
+	$: value && handleInput(value);
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if open}
+	<div
+		class="u-position-fixed u-padding-0 u-inset-0 u-flex u-main-center u-cross-center"
+		style:z-index="100"
+		style:background="hsl(var(--aw-color-black) / 0.3)"
+		style:backdrop-filter="blur(15px)"
+		style:-webkit-backdrop-filter="blur(15px)"
+		bind:this={container}
+		on:click={handleExit}
+		transition:fade={{ duration: 50 }}
+	>
+		<div
+			class="aw-input-text-search-wrapper aw-u-max-width-680 aw-u-margin-inline-20 u-width-full-line"
+		>
+			<span class="icon-search u-z-index-5" aria-hidden="true" style="" />
+			<div id="searchbox" />
+
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1"
+				type="text"
+				id="search"
+				bind:value
+				placeholder="Search"
+				style="border-end-start-radius:0; border-end-end-radius:0;"
+				use:arrowKeyFocus={-1}
+			/>
+			<div
+				class="aw-card is-normal u-overflow-y-auto"
+				style="--card-padding-mobile:1rem; border-radius:0 0 0.5rem 0.5rem; margin-block-start:-0.0625rem; max-block-size: min(18.75rem, calc(100vh - 5.5rem)); border-block-start-width:0;"
+			>
+				<div class="u-flex-vertical u-gap-24">
+					{#if value}
+						{#if results.length > 0}
+							<section>
+								<h6 class="aw-eyebrow">{results.length} results found</h6>
+								<ul class="u-margin-block-start-8">
+									{#each results as hit, i (hit.uid)}
+										<li>
+											<a
+												href={createHref(hit)}
+												use:arrowKeyFocus={i}
+												class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-4 aw-u-cross-start u-max-width-100-percent"
+											>
+												<div class="aw-u-trim-1">
+													<span class="aw-u-color-text-secondary">{hit.h1}</span>
+													{#if hit.h2}
+														<span class="aw-u-color-text-secondary"> / </span>
+														<span class="aw-u-color-text-primary">{hit.h2}</span>
+													{/if}
+												</div>
+												{#if hit.p}
+													<div class="u-inline aw-u-color-text-secondary aw-u-trim-1">
+														{hit.p}
+													</div>
+												{/if}
+											</a>
+										</li>
+									{/each}
+								</ul>
+							</section>
+						{:else}
+							<p class="aw-caption-400">No results found for <span class="u-bold">{value}</span></p>
+						{/if}
+					{/if}
+					<section>
+						<h6 class="aw-eyebrow">Recommended</h6>
+						<ul class="u-margin-block-start-8">
+							{#key results.length}
+								{#each recommended as hit, i (hit.uid)}
+									{@const index = i + (results.length ? results.length : 0)}
+									<li>
+										<a
+											href={createHref(hit)}
+											use:arrowKeyFocus={index}
+											class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-4 aw-u-cross-start"
+										>
+											<div class="aw-u-trim-1">
+												<span class="aw-u-color-text-secondary">{hit.h1}</span>
+												{#if hit.h2}
+													<span class="aw-u-color-text-secondary"> / </span>
+													<span class="aw-u-color-text-primary">{hit.h2}</span>
+												{/if}
+											</div>
+										</a>
+									</li>
+								{/each}
+							{/key}
+						</ul>
+					</section>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index a404870597..02d8f88bf0 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -6,11 +6,13 @@
 	export type DocsLayoutState = {
 		showReferences: boolean;
 		showSidenav: boolean;
+		showSearch: boolean;
 		currentVariant: DocsLayoutVariant | null;
 	};
 	export const layoutState = writable<DocsLayoutState>({
 		showReferences: false,
 		showSidenav: false,
+		showSearch: false,
 		currentVariant: null
 	});
 	export function toggleReferences() {
@@ -30,6 +32,8 @@
 </script>
 
 <script lang="ts">
+	import Search from '$lib/components/Search.svelte';
+
 	export let variant: DocsLayoutVariant = 'default';
 
 	const variantClasses: Record<DocsLayoutVariant, string> = {
@@ -117,7 +121,10 @@
 							</ul>
 						</nav>
 						<div class="u-flex u-stretch aw-u-margin-inline-start-48">
-							<button class="aw-input-button aw-u-flex-basis-400">
+							<button
+								class="aw-input-button aw-u-flex-basis-400"
+								on:click={() => ($layoutState.showSearch = true)}
+							>
 								<span class="icon-search" aria-hidden="true" />
 								<span class="text">Search in docs</span>
 
@@ -165,3 +172,5 @@
 		<slot />
 	</div>
 </div>
+
+<Search bind:open={$layoutState.showSearch} />
diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index 3913fb0f98..a399e6f493 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -38,7 +38,10 @@
 	class:is-transparent={$layoutState.currentVariant !== 'two-side-navs'}
 >
 	<div class="aw-side-nav-wrapper">
-		<button class="aw-input-text aw-is-not-desktop">
+		<button
+			class="aw-input-text aw-is-not-desktop"
+			on:click={() => ($layoutState.showSearch = true)}
+		>
 			<span class="icon-search" />
 			<span class="text">Search in docs</span>
 		</button>
diff --git a/src/markdoc/nodes/Link.svelte b/src/markdoc/nodes/Link.svelte
index 20180aae32..8898cac4ae 100644
--- a/src/markdoc/nodes/Link.svelte
+++ b/src/markdoc/nodes/Link.svelte
@@ -7,9 +7,4 @@
 	const rel = isExternal ? 'noopener nofollow' : undefined;
 </script>
 
-<a class="aw-link" {href} {title} {target} {rel}>
-	<slot />
-	{#if !isExternal}
-	<!-- <span class="icon-cheveron-right" /> -->
-	{/if}
-</a>
+<a class="aw-link" {href} {title} {target} {rel}><slot /></a>