diff --git a/src/lib/components/Newsletter.svelte b/src/lib/components/Newsletter.svelte
index cf7d4f4137e..16e9fa70669 100644
--- a/src/lib/components/Newsletter.svelte
+++ b/src/lib/components/Newsletter.svelte
@@ -1,22 +1,167 @@
-<script lang="ts">
-	import { Tabs } from '$lib/UI';
+<script context="module" lang="ts">
+	export async function newsletter(name: string, email: string) {
+		const response = await fetch('https://growth.appwrite.io/v1/newsletter/subscribe', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				name,
+				email
+			})
+		});
+		return response;
+	}
 </script>
 
-<img src="/images/bgs/pre-footer.svg" alt="" class="pre-footer-bg" />
+<script lang="ts">
+	let email = '';
+	let name = '';
+	let submitted = false;
+	let error: string | undefined;
+	let submitting = false;
+
+	async function submit() {
+		submitting = true;
+		error = undefined;
+		const response = await newsletter(name, email);
+		submitting = false;
+		if (response.status >= 400) {
+			error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+			return;
+		}
+		submitted = true;
+	}
+</script>
 
-<div class="aw-u-row-gap-80 u-position-relative">
-	<div class="aw-container">
-		<div class="aw-hero aw-u-max-width-800">
-			<h5 class="aw-display aw-u-color-text-primary">Subscribe to our newsletter</h5>
-			<p class="aw-description aw-u-color-text-primary" style="opacity:0.64">
-				Sign up to our company blog and get the latest insights from Appwrite. Learn more about
-				engineering, product design, building community, and tips & tricks for using Appwrite.
-			</p>
-			<div
-				class="aw-subscribe-input aw-input-text is-reset-input-inside u-width-full-line aw-u-max-width-380 u-margin-inline-auto u-margin-block-start-32"
+<div class="pre-footer-bg" style="pointer-events:none;">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="692"
+		height="1171"
+		viewBox="0 0 692 1171"
+		fill="none"
+		style="max-inline-size:100%;"
+	>
+		<g opacity="0.4" filter="url(#filter0_f_1577_37321)">
+			<path
+				d="M-96.9811 29.2126C-329.155 33.7322 -513.706 225.611 -509.186 457.785C-504.667 689.959 -312.788 874.51 -80.6141 869.99C33.1857 867.775 -132.237 523.592 -36.8339 437.579C62.4044 348.109 394.063 627.529 391.759 509.155C387.239 276.98 135.193 24.693 -96.9811 29.2126Z"
+				fill="url(#paint0_radial_1577_37321)"
+			/>
+		</g>
+		<defs>
+			<filter
+				id="filter0_f_1577_37321"
+				x="-809.268"
+				y="-270.847"
+				width="1501.04"
+				height="1440.92"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+				<feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_1577_37321" />
+			</filter>
+			<radialGradient
+				id="paint0_radial_1577_37321"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(-88.7975 449.601) rotate(178.885) scale(420.468 420.468)"
 			>
-				<input type="email" placeholder="Enter your email" />
-				<button class="aw-button">Sign up</button>
+				<stop offset="0.281696" stop-color="#FE9567" />
+				<stop offset="0.59375" stop-color="#FD366E" />
+			</radialGradient>
+		</defs>
+	</svg>
+</div>
+
+<div class="aw-big-padding-section">
+	<div class="aw-big-padding-section-level-1">
+		<div class="aw-big-padding-section-level-2">
+			<div class="aw-container">
+				<div class="aw-grid-1-1-opt-2 u-gap-32">
+					<div class="">
+						<div class="aw-u-max-inline-size-none-mobile" class:aw-u-max-width-380={!submitted}>
+							<section class="u-flex-vertical aw-u-gap-20">
+								<h1 class="aw-title aw-u-color-text-primary">Subscribe to our newsletter</h1>
+								<p class="aw-description aw-u-padding-block-end-40">
+									Sign up to our company blog and get the latest insights from Appwrite. Learn more
+									about engineering, product design, building community, and tips & tricks for using
+									Appwrite.
+								</p>
+							</section>
+						</div>
+					</div>
+					{#if submitted}
+						<div class="u-flex u-gap-8 u-cross-center">
+							<svg
+								width="18"
+								height="18"
+								viewBox="0 0 18 18"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<circle
+									cx="9"
+									cy="9"
+									r="8"
+									fill="#FD366E"
+									fill-opacity="0.08"
+									stroke="#FD366E"
+									stroke-opacity="0.32"
+									stroke-width="1.2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<path
+									d="M5.25 10.5L7.75 12.5L12.75 6"
+									stroke="#E4E4E7"
+									stroke-width="1.2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+
+							<span class="text">
+								Thank you for subscribing! An email has been sent to your inbox.
+							</span>
+						</div>
+					{:else}
+						<form method="post" on:submit|preventDefault={submit} class="u-flex-vertical u-gap-16">
+							<div class="u-flex u-flex-vertical u-gap-4">
+								<label for="name">Your name</label>
+								<input
+									class="aw-input-text"
+									type="text"
+									placeholder="Enter your name"
+									id="name"
+									name="name"
+									required
+									bind:value={name}
+								/>
+							</div>
+							<div class="u-flex u-flex-vertical u-gap-4">
+								<label for="email">Your email</label>
+								<input
+									class="aw-input-text"
+									type="email"
+									placeholder="Enter your email"
+									required
+									id="email"
+									name="email"
+									bind:value={email}
+								/>
+							</div>
+							<button type="submit" class="aw-button" disabled={submitting}>Sign up</button>
+							{#if error}
+								<span class="text"> Something went wrong. Please try again later. </span>
+							{/if}
+						</form>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>
@@ -28,7 +173,7 @@
 		top: clamp(300px, 50vw, 50%);
 		left: clamp(300px, 50vw, 50%);
 		transform: translate(-50%, -70%);
-		width: clamp(1200px, 200vw, 3000px);
+		width: clamp(1200px, 100vw, 3000px);
 		height: auto;
 		max-inline-size: unset;
 		max-block-size: unset;
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 631da2bb6b2..a67747fb52f 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -6,6 +6,7 @@
     import { Carousel } from '$lib/components';
     import { TITLE_SUFFIX } from '$routes/titles';
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
+	import { newsletter } from '$lib/components/Newsletter.svelte';
     import FloatingHeads from '$lib/components/FloatingHeads.svelte';
     import type { EventCardProps } from './EventCard.svelte';
     import EventCard from './EventCard.svelte';
@@ -95,6 +96,24 @@
         }
     ];
 
+    let name = '';
+    let email = '';
+    let submitted = false;
+    let error: string | undefined;
+    let submitting = false;
+
+    async function submit() {
+        submitting = true;
+        error = undefined;
+        const response = await newsletter(name, email);
+        submitting = false;
+        if (response.status >= 400) {
+            error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+            return;
+        }
+        submitted = true;
+    }
+
     const title = 'Community' + TITLE_SUFFIX;
     const description = DEFAULT_DESCRIPTION;
     const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
@@ -681,23 +700,105 @@
                 </div>
             </div>
         </div>
+        <div class="aw-big-padding-section">
+            <div class="aw-big-padding-section-level-1">
+                <div class="aw-big-padding-section-level-2">
+                    <div class="aw-container">
+                        <div class="aw-grid-1-1-opt-2 u-gap-32">
+                            <div class="">
+                                <div
+                                    class="aw-u-max-inline-size-none-mobile"
+                                    class:aw-u-max-width-380={!submitted}
+                                >
+                                    <section class="u-flex-vertical aw-u-gap-20">
+                                        <h1 class="aw-title aw-u-color-text-primary">
+                                            Appwrite insights
+                                        </h1>
+                                        <p class="aw-description aw-u-padding-block-end-40">
+                                            Sign up to our company blog and get the latest insights
+                                            from Appwrite. Learn more about engineering, product
+                                            design, building community, and tips & tricks for using
+                                            Appwrite.
+                                        </p>
+                                    </section>
+                                </div>
+                            </div>
+                            {#if submitted}
+                                <div class="u-flex u-gap-8 u-cross-center">
+                                    <svg
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 18 18"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                        <circle
+                                            cx="9"
+                                            cy="9"
+                                            r="8"
+                                            fill="#FD366E"
+                                            fill-opacity="0.08"
+                                            stroke="#FD366E"
+                                            stroke-opacity="0.32"
+                                            stroke-width="1.2"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                        <path
+                                            d="M5.25 10.5L7.75 12.5L12.75 6"
+                                            stroke="#E4E4E7"
+                                            stroke-width="1.2"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
 
-        <div class="aw-big-padding-section-level-1 u-padding-0">
-            <div class="aw-big-padding-section-level-2">
-                <div class="aw-container">
-                    <div class="aw-hero is-center aw-u-max-width-800">
-                        <h3 class="aw-display aw-u-color-text-primary">Appwrite insights</h3>
-                        <p class="aw-main-body-400">
-                            Sign up to our blog and get the latest insights from Appwrite. Learn
-                            more about engineering, product design, building community, and tips &
-                            tricks for using Appwrite.
-                        </p>
-                    </div>
-                    <div
-                        class="aw-subscribe-input aw-input-text is-reset-input-inside u-width-full-line aw-u-max-width-380 u-margin-inline-auto u-margin-block-start-32"
-                    >
-                        <input type="email" placeholder="Enter your email" />
-                        <button class="aw-button">Sign up</button>
+                                    <span class="text">
+                                        Thank you for subscribing! An email has been sent to your
+                                        inbox.
+                                    </span>
+                                </div>
+                            {:else}
+                                <form
+                                    method="post"
+                                    on:submit|preventDefault={submit}
+                                    class="u-flex-vertical u-gap-16"
+                                >
+                                    <div class="u-flex u-flex-vertical u-gap-4">
+                                        <label for="name">Your name</label>
+                                        <input
+                                            class="aw-input-text"
+                                            type="text"
+                                            placeholder="Enter your name"
+                                            id="name"
+                                            name="name"
+                                            required
+                                            bind:value={name}
+                                        />
+                                    </div>
+                                    <div class="u-flex u-flex-vertical u-gap-4">
+                                        <label for="email">Your email</label>
+                                        <input
+                                            class="aw-input-text"
+                                            type="email"
+                                            placeholder="Enter your email"
+                                            required
+                                            id="email"
+                                            name="email"
+                                            bind:value={email}
+                                        />
+                                    </div>
+                                    <button type="submit" class="aw-button" disabled={submitting}
+                                        >Sign up</button
+                                    >
+                                    {#if error}
+                                        <span class="text">
+                                            Something went wrong. Please try again later.
+                                        </span>
+                                    {/if}
+                                </form>
+                            {/if}
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/routes/subscription/+page.ts b/src/routes/subscription/+page.ts
new file mode 100644
index 00000000000..25b96d20efa
--- /dev/null
+++ b/src/routes/subscription/+page.ts
@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	throw redirect(303, '/');
+};
diff --git a/src/routes/subscription/verify/+page.svelte b/src/routes/subscription/verify/+page.svelte
new file mode 100644
index 00000000000..695faa3263d
--- /dev/null
+++ b/src/routes/subscription/verify/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { FooterNav, MainFooter } from '$lib/components';
+	import { Main } from '$lib/layouts';
+	import { onMount } from 'svelte';
+
+	let error: string | undefined;
+
+	onMount(async () => {
+		const email = $page.url.searchParams.get('email');
+		const key = $page.url.searchParams.get('key');
+		const response = await fetch('https://growth.appwrite.io/v1/newsletter/verify', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				email,
+				key
+			})
+		});
+		if (response.status >= 400) {
+			error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+			return;
+		}
+	});
+</script>
+
+<Main>
+	<div class="aw-big-padding-section">
+		<div class="aw-big-padding-section-level-2">
+			<div class="aw-container">
+				<div class="aw-hero" style="--hero-gap:1.25rem;">
+					<span class="aw-badges aw-eyebrow">verification</span>
+					<h1 class="aw-headline aw-u-color-text-primary">
+						{#if error}
+							Error
+						{:else}
+							Success
+						{/if}
+					</h1>
+
+					<p class="aw-description">
+						{#if error}
+							Something went wrong, please try again later.
+						{:else}
+							Your email has been verified successfully.
+						{/if}
+					</p>
+					<a href="/" class="aw-button is-secondary u-cross-child-center u-margin-block-start-12">
+						<span>Back to homepage</span>
+					</a>
+				</div>
+			</div>
+		</div>
+		<div class="aw-big-padding-section-level-2 u-position-relative">
+			<div class="aw-container">
+				<FooterNav />
+				<MainFooter />
+			</div>
+		</div>
+	</div>
+</Main>
