diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
new file mode 100644
index 0000000000..efdfb9dee4
--- /dev/null
+++ b/src/lib/components/Feedback.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	export let date: string;
+	let showFeedback = false;
+	let feedbackType = '';
+	let email = '';
+	let comment = '';
+	let error: string | undefined;
+	let submitted = false;
+	let submitting = false;
+
+	async function handleSubmit() {
+		submitting = true;
+		error = undefined;
+		const response = await fetch('https://growth.appwrite.io/v1/feedback/docs', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				email,
+				type: feedbackType,
+				route: $page.route.id,
+				comment
+			})
+		});
+		submitting = false;
+		if (response.status >= 400) {
+			error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+			return;
+		}
+		comment = email = '';
+		submitted = true;
+	}
+
+	function reset() {
+		comment = email = '';
+		submitted = false;
+		error = undefined;
+	}
+
+	$: if (!showFeedback) {
+		reset();
+	}
+</script>
+
+<section class="aw-content-footer">
+	<header class="aw-content-footer-header u-width-full-line">
+		<div
+			class="u-flex u-gap-32 u-main-space-between u-cross-center u-width-full-line"
+			style="flex-wrap: wrap-reverse;"
+		>
+			<div class="u-flex u-gap-16 u-cross-center">
+				<h5 class="aw-main-body-600 aw-u-color-text-primary">Was this page helpful?</h5>
+				<div class="u-flex u-gap-8">
+					<button
+						class="aw-radio-button"
+						aria-label="helpful"
+						on:click={() => {
+							showFeedback = feedbackType === 'positive' ? false : true;
+							feedbackType = 'positive';
+						}}
+					>
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M0.000488281 8.5C0.000488281 7.67157 0.672061 7 1.50049 7C2.32892 7 3.00049 7.67157 3.00049 8.5V14.5C3.00049 15.3284 2.32892 16 1.50049 16C0.672061 16 0.000488281 15.3284 0.000488281 14.5V8.5Z"
+								fill="#EDEDF0"
+							/>
+							<path
+								d="M4.00049 8.33333V13.7639C4.00049 14.5215 4.42849 15.214 5.10606 15.5528L5.15591 15.5777C5.71133 15.8554 6.32378 16 6.94476 16H12.3609C13.3142 16 14.1351 15.3271 14.322 14.3922L15.522 8.39223C15.7696 7.15465 14.823 6 13.5609 6H10.0005V2C10.0005 0.895431 9.10506 0 8.00049 0C7.4482 0 7.00049 0.447715 7.00049 1V1.66667C7.00049 2.53215 6.71978 3.37428 6.20049 4.06667L4.80049 5.93333C4.2812 6.62572 4.00049 7.46785 4.00049 8.33333Z"
+								fill="#EDEDF0"
+							/>
+						</svg>
+					</button>
+					<button
+						class="aw-radio-button"
+						aria-label="unhelpful"
+						on:click={() => {
+							showFeedback = feedbackType === 'negative' ? false : true;
+							feedbackType = 'negative';
+						}}
+					>
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 16 16"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M16 7.5C16 8.32843 15.3285 9 14.5 9C13.6716 9 13 8.32843 13 7.5V1.5C13 0.671574 13.6716 8.77022e-07 14.5 9.49446e-07C15.3285 1.02187e-06 16 0.671574 16 1.5V7.5Z"
+								fill="#EDEDF0"
+							/>
+							<path
+								d="M12 7.66667V2.23607C12 1.47852 11.572 0.785998 10.8945 0.447215L10.8446 0.422291C10.2892 0.144581 9.67675 5.2778e-07 9.05577 4.73492e-07L3.63964 0C2.68628 -8.33455e-08 1.86545 0.672919 1.67848 1.60777L0.478483 7.60777C0.230966 8.84535 1.17755 10 2.43964 10H6.00004V14C6.00004 15.1046 6.89547 16 8.00004 16C8.55232 16 9.00004 15.5523 9.00004 15V14.3333C9.00004 13.4679 9.28075 12.6257 9.80004 11.9333L11.2 10.0667C11.7193 9.37428 12 8.53215 12 7.66667Z"
+								fill="#EDEDF0"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+			<div class="aw-content-footer-header-end">
+				<ul class="aw-metadata aw-caption-400">
+					{#if date}
+						<li>Last updated on {new Date(date)?.toLocaleDateString()}</li>
+					{/if}
+					<li>
+						<a
+							href="https://github.com/appwrite/website"
+							target="_blank"
+							class="aw-link u-flex u-gap-4 u-cross-baseline"
+						>
+							<span class="icon-pencil-alt u-contents" aria-hidden="true" />
+							<span>Update on GitHub</span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</header>
+	{#if showFeedback}
+		<form
+			on:submit|preventDefault={handleSubmit}
+			class="aw-card is-normal"
+			style="--card-padding:1rem"
+		>
+			<div class="u-flex-vertical u-gap-8">
+				<label for="message">
+					<span class="aw-u-color-text-primary">
+						What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional)
+					</span>
+				</label>
+				<textarea
+					class="aw-input-text"
+					id="message"
+					placeholder="Write your message"
+					bind:value={comment}
+				/>
+				<label for="message" class="u-margin-block-start-8">
+					<span class="aw-u-color-text-primary">Email</span>
+				</label>
+				<input
+					class="aw-input-text"
+					placeholder="Enter your email"
+					type="email"
+					name="email"
+					required
+					bind:value={email}
+				/>
+			</div>
+			{#if submitted}
+				<p class="aw-u-color-text-primary u-margin-block-start-16">
+					Your message has been sent successfully. We appreciate your feedback.
+				</p>
+			{/if}
+			{#if error}
+				<p class="aw-u-color-text-primary u-margin-block-start-16">
+					There was an error submitting your feedback. Please try again later.
+				</p>
+			{/if}
+
+			<div class="u-flex u-main-end u-margin-block-start-16 u-gap-8">
+				<button class="aw-button is-text" on:click={() => (showFeedback = false)}>
+					<span>Cancel</span>
+				</button>
+				<button type="submit" class="aw-button" disabled={submitting || !email}>
+					<span>Submit</span>
+				</button>
+			</div>
+		</form>
+	{/if}
+</section>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index eb75c9f9a4..5159056fd8 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -9,3 +9,4 @@ export { default as Spline } from './Spline.svelte';
 export { default as Article } from './Article.svelte';
 export { default as Carousel } from './Carousel.svelte';
 export { default as FloatingHeads } from './FloatingHeads.svelte';
+export { default as Feedback } from './Feedback.svelte';
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index b5509cff2d..5f2f8f0d7e 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -13,9 +13,12 @@
 </script>
 
 <script lang="ts">
+	import { Feedback } from '$lib/components';
+
 	export let title: string;
 	export let toc: Array<TocItem>;
 	export let back: string | undefined = undefined;
+	export let date: string;
 </script>
 
 <main class="u-contents">
@@ -58,59 +61,7 @@
 		</header>
 		<div class="aw-article-content">
 			<slot />
-			<section class="aw-content-footer">
-				<header class="aw-content-footer-header">
-					<div class="aw-content-footer-header-start">
-						<!--
-							<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-							<div class="u-flex u-gap-8">
-								<input
-									class="aw-radio-button is-like"
-									type="radio"
-									aria-label="Helpful"
-									name="happy"
-								/>
-								<input
-									class="aw-radio-button is-dislike"
-									type="radio"
-									aria-label="UnHelpful"
-									name="happy"
-								/>
-							</div>
-						-->
-					</div>
-					<div class="aw-content-footer-header-end">
-						<ul class="aw-metadata aw-caption-400">
-							<li>Last updated on September 27, 2023</li>
-							<li>
-								<a href="https://github.com/appwrite/website" target="_blank" class="aw-link">
-									<span class="icon-pencil-alt u-contents" aria-hidden="true" />
-									<span>Update on GitHub</span>
-								</a>
-							</li>
-						</ul>
-					</div>
-				</header>
-				<!-- <div class="aw-card is-normal" style="--card-padding:1rem">
-					<label for="message">
-						<span class="aw-u-color-text-primary">What did you like?</span>
-						<span class="">(optional)</span>
-					</label>
-					<textarea
-						class="aw-input-text u-margin-block-start-8"
-						id="message"
-						placeholder="Write your message"
-					/>
-					<div class="u-flex u-main-end u-margin-block-start-16">
-						<button class="aw-button is-text">
-							<span class="">Cancel</span>
-						</button>
-						<button class="aw-button">
-							<span class="">Submit</span>
-						</button>
-					</div>
-				</div> -->
-			</section>
+			<Feedback {date} />
 		</div>
 		<aside class="aw-references-menu aw-u-padding-inline-start-24">
 			<div class="aw-references-menu-content">
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
index d5b923f66b..b2c1ab6827 100644
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Feedback } from '$lib/components';
 	import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
 	import type { TocItem } from './DocsArticle.svelte';
 
@@ -6,6 +7,7 @@
 	export let toc: Array<TocItem>;
 	export let currentStep: number;
 	export let back: string;
+	export let date: string;
 
 	export let tutorials: Array<Tutorial>;
 
@@ -30,18 +32,18 @@
 				</ul>
 				<div class="u-position-relative u-flex u-cross-center">
 					{#if back}
-					<a
-						href={back}
-						class="
+						<a
+							href={back}
+							class="
 						aw-button is-text is-only-icon aw-u-cross-center aw-u-size-40
 						u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-						aria-label="previous page"
-					>
-						<span
-							class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
-							aria-hidden="true"
-						/>
-					</a>
+							aria-label="previous page"
+						>
+							<span
+								class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
+								aria-hidden="true"
+							/>
+						</a>
 					{/if}
 					<h1 class="aw-title">{title}</h1>
 				</div>
@@ -73,59 +75,7 @@
 				{/if}
 			</div>
 
-			<section class="aw-content-footer">
-				<header class="aw-content-footer-header u-cross-center">
-					<div class="aw-content-footer-header-start u-cross-center">
-					<!-- 
-						<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-						<div class="u-flex u-gap-8">
-							<input
-								class="aw-radio-button is-like"
-								type="radio"
-								aria-label="Helpful"
-								name="happy"
-							/>
-							<input
-								class="aw-radio-button is-dislike"
-								type="radio"
-								aria-label="UnHelpful"
-								name="happy"
-							/>
-						</div>
-					-->
-					</div>
-					<div class="aw-content-footer-header-end">
-						<ul class="aw-metadata aw-caption-400">
-							<li>Last updated on September 27, 2023</li>
-							<li>
-								<a href="https://github.com/appwrite/website" target="_blank" class="aw-link u-flex u-gap-4 u-cross-baseline">
-									<span class="icon-pencil-alt u-contents" aria-hidden="true" />
-									<span>Update on GitHub</span>
-								</a>
-							</li>
-						</ul>
-					</div>
-				</header>
-				<!-- <div class="aw-card is-normal" style="--card-padding:1rem">
-					<label for="message">
-						<span class="aw-caption-400 aw-u-color-text-primary">What did you like?</span>
-						<span class="aw-caption-400">(optional)</span>
-					</label>
-					<textarea
-						class="aw-input-text u-margin-block-start-8"
-						id="message"
-						placeholder="Write your message"
-					/>
-					<div class="u-flex u-gap-8 u-main-end u-margin-block-start-16">
-						<button class="aw-button is-text">
-							<span class="">Cancel</span>
-						</button>
-						<button class="aw-button">
-							<span class="">Submit</span>
-						</button>
-					</div>
-				</div> -->
-			</section>
+			<Feedback {date} />
 		</div>
 		<aside class="aw-references-menu aw-u-padding-inline-start-24">
 			<div class="aw-references-menu-content">
diff --git a/src/markdoc/layouts/Article.svelte b/src/markdoc/layouts/Article.svelte
index c020d081ac..f3d92b54cf 100644
--- a/src/markdoc/layouts/Article.svelte
+++ b/src/markdoc/layouts/Article.svelte
@@ -26,6 +26,7 @@
 	export let back: string | undefined = undefined;
 	export let difficulty: string | undefined = undefined;
 	export let readtime: string | undefined = undefined;
+	export let date: string;
 
 	setContext<LayoutContext>('headings', writable({}));
 
@@ -77,7 +78,7 @@
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<DocsArticle {title} {back} {toc}>
+<DocsArticle {title} {back} {toc} {date}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
 			<li>{difficulty}</li>
diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte
index 6c06b4a08e..08f8dc04c9 100644
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -22,6 +22,7 @@
 	export let readtime: string;
 	export let step: number;
 	export let back: string;
+	export let date: string;
 
 	setContext<LayoutContext>('headings', writable({}));
 
@@ -73,7 +74,7 @@
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<DocsTutorial {title} {back} {toc} {tutorials} currentStep={step}>
+<DocsTutorial {title} {back} {toc} {tutorials} {date} currentStep={step}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
 			<li>{difficulty}</li>
diff --git a/src/routes/docs/products/auth/+page.markdoc b/src/routes/docs/products/auth/+page.markdoc
index b815a50da6..24902c3e3b 100644
--- a/src/routes/docs/products/auth/+page.markdoc
+++ b/src/routes/docs/products/auth/+page.markdoc
@@ -3,12 +3,13 @@ layout: article
 title: Authentication
 description: Explore Appwrite's powerful authentication solutions. Learn how to implement secure user authentication, manage user identities, and enhance your application's security."
 back: /docs
+date: 2023-09-28
 ---
 
-Appwrite Authentication delivers more than just user sign up and log in. 
+Appwrite Authentication delivers more than just user sign up and log in.
 Authentication makes it easy to build secure and robust authentication with support for many different authentication methods.
 
-You can manage user accounts with user preferences, user labeling, or organizing users into teams. 
+You can manage user accounts with user preferences, user labeling, or organizing users into teams.
 Combined with a robust permissions system, Appwrite Authentication provides everything you need to authenticate and manage users.
 
 [Quick start {% icon icon="cheveron-right" /%}](/docs/products/auth/quick-start)