diff --git a/engine/packages/api-peer/src/actors/kv_get.rs b/engine/packages/api-peer/src/actors/kv_get.rs
index 3ce45cf1d9..7f81aa7563 100644
--- a/engine/packages/api-peer/src/actors/kv_get.rs
+++ b/engine/packages/api-peer/src/actors/kv_get.rs
@@ -1,6 +1,6 @@
 use anyhow::*;
-use base64::prelude::BASE64_STANDARD;
 use base64::Engine;
+use base64::prelude::BASE64_STANDARD;
 use pegboard_actor_kv as actor_kv;
 use rivet_api_builder::ApiCtx;
 use rivet_util::Id;
diff --git a/engine/packages/api-public/src/actors/kv_get.rs b/engine/packages/api-public/src/actors/kv_get.rs
index 5e9dd3b9db..0c1c4d79ca 100644
--- a/engine/packages/api-public/src/actors/kv_get.rs
+++ b/engine/packages/api-public/src/actors/kv_get.rs
@@ -65,7 +65,11 @@ async fn kv_get_inner(ctx: ApiCtx, path: KvGetPath) -> Result<Response> {
 		request_remote_datacenter_raw(
 			&ctx,
 			path.actor_id.label(),
-			&format!("/actors/{}/kv/keys/{}", path.actor_id, urlencoding::encode(&path.key)),
+			&format!(
+				"/actors/{}/kv/keys/{}",
+				path.actor_id,
+				urlencoding::encode(&path.key)
+			),
 			axum::http::Method::GET,
 			Option::<&()>::None,
 			Option::<&()>::None,
diff --git a/frontend/src/app/actor-builds-list.tsx b/frontend/src/app/actor-builds-list.tsx
index c4c3423580..985b035733 100644
--- a/frontend/src/app/actor-builds-list.tsx
+++ b/frontend/src/app/actor-builds-list.tsx
@@ -75,6 +75,7 @@ export function ActorBuildsList() {
 					? Array(RECORDS_PER_PAGE)
 							.fill(null)
 							.map((_, i) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: skeleton loaders are static
 								<Fragment key={i}>
 									<Skeleton className="w-full h-6 my-1" />
 								</Fragment>
@@ -93,6 +94,7 @@ export function ActorBuildsListSkeleton() {
 				{Array(RECORDS_PER_PAGE)
 					.fill(null)
 					.map((_, i) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: skeleton loaders are static
 						<Fragment key={i}>
 							<Skeleton className="w-full h-6 my-1" />
 						</Fragment>
diff --git a/frontend/src/app/billing/plan-card.tsx b/frontend/src/app/billing/plan-card.tsx
index f8ece96544..b5f4f947ff 100644
--- a/frontend/src/app/billing/plan-card.tsx
+++ b/frontend/src/app/billing/plan-card.tsx
@@ -51,7 +51,7 @@ function PlanCard({
 				<p>Includes:</p>
 				<ul className="text-muted-foreground mt-2 space-y-1">
 					{features?.map((feature, index) => (
-						<li key={index}>
+						<li key={`${feature.label}-${index}`}>
 							<Icon icon={feature.icon} /> {feature.label}
 						</li>
 					))}
@@ -62,15 +62,14 @@ function PlanCard({
 					<Button
 						variant="secondary"
 						className="w-full mt-4"
-						children="Current Plan"
 						{...buttonProps}
-					></Button>
+					>
+						Current Plan
+					</Button>
 				) : (
-					<Button
-						className="w-full mt-4"
-						children={<>{custom ? "Contact Us" : "Upgrade"}</>}
-						{...buttonProps}
-					/>
+					<Button className="w-full mt-4" {...buttonProps}>
+						{custom ? "Contact Us" : "Upgrade"}
+					</Button>
 				)
 			) : null}
 		</div>
diff --git a/frontend/src/app/data-providers/default-data-provider.tsx b/frontend/src/app/data-providers/default-data-provider.tsx
index 0b3c0a25f5..d56dc63240 100644
--- a/frontend/src/app/data-providers/default-data-provider.tsx
+++ b/frontend/src/app/data-providers/default-data-provider.tsx
@@ -82,7 +82,6 @@ const defaultContext = {
 			refetchInterval: 2000,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return {} as PaginatedActorResponse;
 			},
 			getNextPageParam: (lastPage) => {
 				if (lastPage.pagination.cursor) {
@@ -110,7 +109,6 @@ const defaultContext = {
 			refetchInterval: 2000,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return {} as PaginatedBuildsResponse;
 			},
 			getNextPageParam: () => {
 				return undefined;
@@ -232,7 +230,6 @@ const defaultContext = {
 			queryKey: ["actor", actorId, "build"] as QueryKey,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return {} as Build;
 			},
 			enabled: false,
 		});
@@ -242,7 +239,6 @@ const defaultContext = {
 			queryKey: ["actor", actorId, "metrics"] as QueryKey,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return {} as ActorMetrics;
 			},
 			enabled: false,
 		});
@@ -283,7 +279,6 @@ const defaultContext = {
 			initialPageParam: null as string | null,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return [] as ActorLogEntry[];
 			},
 			getNextPageParam: () => null,
 		});
@@ -333,7 +328,6 @@ const defaultContext = {
 			initialPageParam: null as string | null,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return {} as PaginatedRegionsResponse;
 			},
 			getNextPageParam: () => null,
 			select: (data) => data.pages.flatMap((page) => page.regions),
@@ -345,7 +339,6 @@ const defaultContext = {
 			enabled: !!regionId,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return {} as Region;
 			},
 		});
 	},
@@ -357,7 +350,6 @@ const defaultContext = {
 			retry: 0,
 			queryFn: async () => {
 				throw new Error("Not implemented");
-				return false as boolean;
 			},
 		});
 	},
@@ -366,7 +358,6 @@ const defaultContext = {
 			mutationKey: ["createActor"] as QueryKey,
 			mutationFn: async (_: CreateActor) => {
 				throw new Error("Not implemented");
-				return "";
 			},
 			onSuccess: () => {
 				const keys = this.actorsQueryOptions({}).queryKey.filter(
diff --git a/frontend/src/app/dialogs/connect-vercel-frame.tsx b/frontend/src/app/dialogs/connect-vercel-frame.tsx
index e351a42785..cdd1c0b2f1 100644
--- a/frontend/src/app/dialogs/connect-vercel-frame.tsx
+++ b/frontend/src/app/dialogs/connect-vercel-frame.tsx
@@ -39,17 +39,18 @@ export const VERCEL_SERVERLESS_MAX_DURATION = 300;
 interface CreateProjectFrameContentProps extends DialogContentProps {}
 
 function usePublishableToken() {
+	const cloudProvider = useCloudNamespaceDataProvider();
+	const engineProvider = useEngineNamespaceDataProvider();
+	const cloudData = useSuspenseQuery(
+		cloudProvider.publishableTokenQueryOptions(),
+	);
+	const engineData = useSuspenseQuery(
+		engineProvider.engineAdminTokenQueryOptions(),
+	);
+
 	return match(__APP_TYPE__)
-		.with("cloud", () => {
-			return useSuspenseQuery(
-				useCloudNamespaceDataProvider().publishableTokenQueryOptions(),
-			).data;
-		})
-		.with("engine", () => {
-			return useSuspenseQuery(
-				useEngineNamespaceDataProvider().engineAdminTokenQueryOptions(),
-			).data;
-		})
+		.with("cloud", () => cloudData.data)
+		.with("engine", () => engineData.data)
 		.otherwise(() => {
 			throw new Error("Not in a valid context");
 		});
@@ -69,17 +70,14 @@ const useEndpoint = () => {
 };
 
 const useNamespace = () => {
+	const routeContext = useRouteContext({
+		from: "/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace/connect",
+		select: (ctx) => ctx.dataProvider.engineNamespace,
+	});
+
 	return match(__APP_TYPE__)
-		.with("cloud", () => {
-			const routeContext = useRouteContext({
-				from: "/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace/connect",
-				select: (ctx) => ctx.dataProvider.engineNamespace,
-			});
-			return routeContext;
-		})
-		.with("engine", () => {
-			return "default";
-		})
+		.with("cloud", () => routeContext)
+		.with("engine", () => "default")
 		.otherwise(() => {
 			throw new Error("Not in a valid context");
 		});
diff --git a/frontend/src/app/forms/connect-manual-serverfull-form.tsx b/frontend/src/app/forms/connect-manual-serverfull-form.tsx
index e817ec3021..25aa8ca713 100644
--- a/frontend/src/app/forms/connect-manual-serverfull-form.tsx
+++ b/frontend/src/app/forms/connect-manual-serverfull-form.tsx
@@ -81,7 +81,7 @@ export const ConnectionCheck = function ConnectionCheck({
 
 	useEffect(() => {
 		onChange(success);
-	}, [success]);
+	}, [success, onChange]);
 
 	return (
 		<div
diff --git a/frontend/src/app/forms/connect-manual-serverless-form.tsx b/frontend/src/app/forms/connect-manual-serverless-form.tsx
index 8ed1cdd5e1..13ff1f6897 100644
--- a/frontend/src/app/forms/connect-manual-serverless-form.tsx
+++ b/frontend/src/app/forms/connect-manual-serverless-form.tsx
@@ -464,7 +464,7 @@ export function ConnectionCheck({ provider }: { provider: string }) {
 
 	useEffect(() => {
 		onChange(isSuccess);
-	}, [isSuccess]);
+	}, [isSuccess, onChange]);
 
 	return (
 		<AnimatePresence>
diff --git a/frontend/src/app/inspector-root.tsx b/frontend/src/app/inspector-root.tsx
index 41877ad226..7ed38741e3 100644
--- a/frontend/src/app/inspector-root.tsx
+++ b/frontend/src/app/inspector-root.tsx
@@ -39,7 +39,7 @@ export function InspectorRoot() {
 		if (search.t) {
 			formRef.current?.requestSubmit();
 		}
-	}, []);
+	}, [search.t]);
 
 	const ctxValue = useMemo(() => {
 		return { credentials, setCredentials };
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 3f409cdb95..41e1d38340 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -393,13 +393,14 @@ const Subnav = () => {
 			: { to: "/", fuzzy: true },
 	);
 
+	const hasDataProvider = useDataProviderCheck();
+	const dataProvider = useDataProvider();
+	const hasQuery = hasDataProvider && !!dataProvider.buildsQueryOptions;
+
 	if (nsMatch === false) {
 		return null;
 	}
 
-	const hasDataProvider = useDataProviderCheck();
-	const hasQuery = hasDataProvider && !!useDataProvider().buildsQueryOptions;
-
 	return (
 		<div className="flex gap-1.5 flex-col">
 			{__APP_TYPE__ === "engine" ? (
diff --git a/frontend/src/app/login.tsx b/frontend/src/app/login.tsx
index dd929c2cf9..6038df9f38 100644
--- a/frontend/src/app/login.tsx
+++ b/frontend/src/app/login.tsx
@@ -29,7 +29,7 @@ export function Login() {
 		if (user) {
 			navigate({ to: "/" });
 		}
-	}, [user]);
+	}, [user, navigate]);
 
 	return (
 		<motion.div
diff --git a/frontend/src/components/actors/actor-events-list.tsx b/frontend/src/components/actors/actor-events-list.tsx
index 519a869e88..69c00ef480 100644
--- a/frontend/src/components/actors/actor-events-list.tsx
+++ b/frontend/src/components/actors/actor-events-list.tsx
@@ -94,7 +94,7 @@ function Event(props: RecordedRealtimeEvent) {
 				},
 			);
 		}
-	}, []);
+	}, [props.timestamp]);
 
 	if (props.type === "action") {
 		return (
diff --git a/frontend/src/components/actors/actor-events.tsx b/frontend/src/components/actors/actor-events.tsx
index 225e809061..f9060a0352 100644
--- a/frontend/src/components/actors/actor-events.tsx
+++ b/frontend/src/components/actors/actor-events.tsx
@@ -194,22 +194,26 @@ function useScrollToBottom(
 			e.currentTarget.clientHeight;
 	}, []);
 
-	useEffect(() => {
-		if (!shouldFollow()) {
-			return () => {};
-		}
-		// https://github.com/TanStack/virtual/issues/537
-		const rafId = requestAnimationFrame(() => {
-			ref.current?.scrollTo({
-				top: ref.current.scrollHeight,
-				behavior: "smooth",
+	useEffect(
+		() => {
+			if (!shouldFollow()) {
+				return () => {};
+			}
+			// https://github.com/TanStack/virtual/issues/537
+			const rafId = requestAnimationFrame(() => {
+				ref.current?.scrollTo({
+					top: ref.current.scrollHeight,
+					behavior: "smooth",
+				});
 			});
-		});
 
-		return () => {
-			cancelAnimationFrame(rafId);
-		};
-	}, deps);
+			return () => {
+				cancelAnimationFrame(rafId);
+			};
+		},
+		// biome-ignore lint/correctness/useExhaustiveDependencies: deps is passed from caller
+		deps,
+	);
 
 	return { onScroll };
 }
diff --git a/frontend/src/components/actors/actors-list.tsx b/frontend/src/components/actors/actors-list.tsx
index 53a82e4f2a..8390bf2c57 100644
--- a/frontend/src/components/actors/actors-list.tsx
+++ b/frontend/src/components/actors/actors-list.tsx
@@ -207,6 +207,7 @@ export function ListSkeleton() {
 			{Array(RECORDS_PER_PAGE)
 				.fill(null)
 				.map((_, i) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: skeleton loaders are static
 					<ActorsListRowSkeleton key={i} />
 				))}
 		</div>
@@ -379,7 +380,7 @@ function useFiltersChangeCallback(): OnFiltersChange {
 				setLs(fnOrValue || {});
 			}
 		},
-		[navigate, pick],
+		[navigate, pick, remove, setLs, value],
 	);
 }
 
diff --git a/frontend/src/components/actors/database/database-table.tsx b/frontend/src/components/actors/database/database-table.tsx
index 5c34cab452..d42007cd01 100644
--- a/frontend/src/components/actors/database/database-table.tsx
+++ b/frontend/src/components/actors/database/database-table.tsx
@@ -17,7 +17,7 @@ import {
 	type SortingState,
 	useReactTable as useTable,
 } from "@tanstack/react-table";
-import { Fragment, useMemo, useState } from "react";
+import { Fragment, useCallback, useMemo, useState } from "react";
 import type { Column, Columns, ForeignKeys } from "rivetkit/inspector";
 import {
 	Badge,
@@ -89,7 +89,7 @@ export function DatabaseTable({
 		},
 	});
 
-	function calculateColumnSizes() {
+	const calculateColumnSizes = useCallback(() => {
 		const headers = table.getFlatHeaders();
 		const colSizes: { [key: string]: number } = {};
 		for (let i = 0; i < headers.length; i++) {
@@ -99,11 +99,11 @@ export function DatabaseTable({
 				header.column.getSize();
 		}
 		return colSizes;
-	}
+	}, [table]);
 
 	const columnSizeVars = useMemo(() => {
 		return calculateColumnSizes();
-	}, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+	}, [calculateColumnSizes]);
 
 	return (
 		<Table
diff --git a/frontend/src/components/actors/guard-connectable-inspector.tsx b/frontend/src/components/actors/guard-connectable-inspector.tsx
index 2ab92bc190..22950a1145 100644
--- a/frontend/src/components/actors/guard-connectable-inspector.tsx
+++ b/frontend/src/components/actors/guard-connectable-inspector.tsx
@@ -243,12 +243,7 @@ function useActorEngineContext({ actorId }: { actorId: ActorId }) {
 			},
 			engineToken,
 		});
-	}, [
-		actorId,
-		actor?.runner,
-		provider.runnerByNameQueryOptions,
-		engineToken,
-	]);
+	}, [actor?.runner, provider.runnerByNameQueryOptions, engineToken]);
 
 	return { actorContext, actor, runner, isLoading };
 }
diff --git a/frontend/src/components/actors/queries/actor.ts b/frontend/src/components/actors/queries/actor.ts
index d372d9a996..0ca413fa21 100644
--- a/frontend/src/components/actors/queries/actor.ts
+++ b/frontend/src/components/actors/queries/actor.ts
@@ -130,7 +130,13 @@ function useStream<T = unknown>(
 		return () => {
 			controller.abort();
 		};
-	}, [url, actorId, opts.enabled, stableOnMessage]);
+	}, [
+		url,
+		actorId,
+		opts.enabled,
+		stableOnMessage,
+		queries.createActorInspectorFetchConfiguration,
+	]);
 }
 
 export const useActorStateStream = (
diff --git a/frontend/src/components/actors/worker/actor-worker-context.tsx b/frontend/src/components/actors/worker/actor-worker-context.tsx
index 4288f49c8a..4a51e7e651 100644
--- a/frontend/src/components/actors/worker/actor-worker-context.tsx
+++ b/frontend/src/components/actors/worker/actor-worker-context.tsx
@@ -27,29 +27,31 @@ export const useActorWorker = () => {
 };
 
 const useInspectorToken = (runnerName: string) => {
+	const inspectorCreds = useInspectorCredentials();
+	const provider = useEngineCompatDataProvider();
+	const { data } = useQuery(
+		provider.runnerByNameQueryOptions({
+			runnerName,
+		}),
+	);
+
 	return match(__APP_TYPE__)
 		.with("inspector", () => {
-			return useInspectorCredentials().credentials?.token;
+			return inspectorCreds.credentials?.token;
 		})
 		.otherwise(() => {
-			const provider = useEngineCompatDataProvider();
-			const { data } = useQuery(
-				provider.runnerByNameQueryOptions({
-					runnerName,
-				}),
-			);
-
 			return (data?.metadata?.inspectorToken as string) || "";
 		});
 };
 
 const useConnectionDetails = () => {
+	const provider = useEngineCompatDataProvider();
+
 	return match(__APP_TYPE__)
 		.with("inspector", () => {
 			return { namespace: "", engineToken: "" };
 		})
 		.otherwise(() => {
-			const provider = useEngineCompatDataProvider();
 			return {
 				namespace: provider.engineNamespace,
 				engineToken: provider.engineToken,
diff --git a/frontend/src/components/hooks/use-async-memo.tsx b/frontend/src/components/hooks/use-async-memo.tsx
index cc0034f9a0..803cf0befa 100644
--- a/frontend/src/components/hooks/use-async-memo.tsx
+++ b/frontend/src/components/hooks/use-async-memo.tsx
@@ -15,18 +15,22 @@ export function useAsyncMemo<T>(
 	initial?: T,
 ) {
 	const [val, setVal] = useState<T | undefined>(initial);
-	useEffect(() => {
-		let cancel = false;
-		const promise = factory();
-		if (promise === undefined || promise === null) return;
-		promise.then((val) => {
-			if (!cancel) {
-				setVal(val);
-			}
-		});
-		return () => {
-			cancel = true;
-		};
-	}, deps);
+	useEffect(
+		() => {
+			let cancel = false;
+			const promise = factory();
+			if (promise === undefined || promise === null) return;
+			promise.then((val) => {
+				if (!cancel) {
+					setVal(val);
+				}
+			});
+			return () => {
+				cancel = true;
+			};
+		},
+		// biome-ignore lint/correctness/useExhaustiveDependencies: deps is passed from caller
+		deps,
+	);
 	return val;
 }
diff --git a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
index f30cba7989..2db1e8fd0d 100644
--- a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
+++ b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
@@ -436,17 +436,18 @@ function Runners() {
 }
 
 function usePublishableToken() {
+	const cloudProvider = useCloudNamespaceDataProvider();
+	const engineProvider = useEngineNamespaceDataProvider();
+	const cloudData = useSuspenseQuery(
+		cloudProvider.publishableTokenQueryOptions(),
+	);
+	const engineData = useSuspenseQuery(
+		engineProvider.engineAdminTokenQueryOptions(),
+	);
+
 	return match(__APP_TYPE__)
-		.with("cloud", () => {
-			return useSuspenseQuery(
-				useCloudNamespaceDataProvider().publishableTokenQueryOptions(),
-			).data;
-		})
-		.with("engine", () => {
-			return useSuspenseQuery(
-				useEngineNamespaceDataProvider().engineAdminTokenQueryOptions(),
-			).data;
-		})
+		.with("cloud", () => cloudData.data)
+		.with("engine", () => engineData.data)
 		.otherwise(() => {
 			throw new Error("Not in a valid context");
 		});
diff --git a/rivetkit-typescript/packages/rivetkit/src/utils/node.ts b/rivetkit-typescript/packages/rivetkit/src/utils/node.ts
index d009907014..50ce00d72c 100644
--- a/rivetkit-typescript/packages/rivetkit/src/utils/node.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/utils/node.ts
@@ -29,7 +29,7 @@ function getRequireFn() {
 	}
 
 	// ESM context - use createRequire with import.meta.url
-	// @ts-ignore - import.meta.url is available in ESM
+	// @ts-expect-error - import.meta.url is available in ESM
 	return createRequire(import.meta.url);
 }
 
@@ -50,21 +50,21 @@ export function importNodeDependencies(): void {
 		const requireFn = getRequireFn();
 
 		// Use requireFn with webpack ignore comment to prevent bundling
-		// @ts-ignore - dynamic require usage
+		// @ts-expect-error - dynamic require usage
 		nodeCrypto = requireFn(/* webpackIgnore: true */ "node:crypto");
-		// @ts-ignore
+		// @ts-expect-error
 		nodeFsSync = requireFn(/* webpackIgnore: true */ "node:fs");
-		// @ts-ignore
+		// @ts-expect-error
 		nodeFs = requireFn(/* webpackIgnore: true */ "node:fs/promises");
-		// @ts-ignore
+		// @ts-expect-error
 		nodePath = requireFn(/* webpackIgnore: true */ "node:path");
-		// @ts-ignore
+		// @ts-expect-error
 		nodeOs = requireFn(/* webpackIgnore: true */ "node:os");
-		// @ts-ignore
+		// @ts-expect-error
 		nodeChildProcess = requireFn(
 			/* webpackIgnore: true */ "node:child_process",
 		);
-		// @ts-ignore
+		// @ts-expect-error
 		nodeStream = requireFn(
 			/* webpackIgnore: true */ "node:stream/promises",
 		);
diff --git a/website/src/app/(v2)/(blog)/changelog/page.tsx b/website/src/app/(v2)/(blog)/changelog/page.tsx
index 80aa4a09c3..292114040b 100644
--- a/website/src/app/(v2)/(blog)/changelog/page.tsx
+++ b/website/src/app/(v2)/(blog)/changelog/page.tsx
@@ -12,6 +12,48 @@ import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 
+// StyleInjector Component - Injects custom CSS for background grid
+const StyleInjector = () => (
+	<style
+		dangerouslySetInnerHTML={{
+			__html: `
+    /* --- Background Grid --- */
+    .changelog-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #0a0a0a;
+      background-image:
+        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+      background-size: 3rem 3rem;
+      animation: pan-grid 60s linear infinite;
+    }
+    
+    .changelog-background-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(ellipse at 50% 50%, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 1) 90%);
+    }
+    
+    @keyframes pan-grid {
+      0% { background-position: 0% 0%; }
+      100% { background-position: 3rem 3rem; }
+    }
+  `,
+		}}
+	/>
+);
+
 export const metadata: Metadata = {
 	title: "Changelog - Rivet",
 };
@@ -93,26 +135,37 @@ export default async function BlogPage() {
 	);
 	return (
 		<>
-			<div className="mt-8 flex w-full items-center justify-center">
-				<h1 className="text-6xl font-bold">Changelog</h1>
-			</div>
-			<div className="mb-8 mt-4 flex items-center justify-center">
-				<div className="bg-card rounded-md border">
-					<Button variant="ghost" asChild>
-						<Link href="/blog">All Posts</Link>
-					</Button>
-					<Button variant="secondary" asChild>
-						<Link href="/changelog">Changelog</Link>
-					</Button>
+			<StyleInjector />
+			<div className="relative min-h-screen w-full overflow-hidden">
+				{/* Background Grid */}
+				<div className="changelog-background" aria-hidden="true"></div>
+				<div className="changelog-background-overlay" aria-hidden="true"></div>
+				
+				<div className="relative z-10">
+					<div className="mt-8 flex w-full items-center justify-center">
+						<h1 className="font-heading text-5xl md:text-6xl lg:text-7xl font-bold tracking-tighter" style={{ color: '#FAFAFA' }}>
+							Changelog
+						</h1>
+					</div>
+					<div className="mb-8 mt-4 flex items-center justify-center">
+						<div className="bg-card rounded-md border">
+							<Button variant="ghost" asChild>
+								<Link href="/blog">All Posts</Link>
+							</Button>
+							<Button variant="secondary" asChild>
+								<Link href="/changelog">Changelog</Link>
+							</Button>
+						</div>
+					</div>
+					<div className="mx-auto mb-8 mt-16 flex max-w-prose flex-col">
+						{entries
+							.sort((a, b) => b.published - a.published)
+							.map((article) => (
+								<Article key={article.slug} {...article} />
+							))}
+					</div>
 				</div>
 			</div>
-			<div className="mx-auto mb-8 mt-16 flex max-w-prose flex-col">
-				{entries
-					.sort((a, b) => b.published - a.published)
-					.map((article) => (
-						<Article key={article.slug} {...article} />
-					))}
-			</div>
 		</>
 	);
 }
diff --git a/website/src/app/(v2)/(marketing)/(index)/page.tsx b/website/src/app/(v2)/(marketing)/(index)/page.tsx
index eb39c854af..9e41d1103d 100644
--- a/website/src/app/(v2)/(marketing)/(index)/page.tsx
+++ b/website/src/app/(v2)/(marketing)/(index)/page.tsx
@@ -1,73 +1,43 @@
-import { HeroBackground } from "./components/HeroBackground";
-import { HeroSection } from "./sections/HeroSection";
-import { UseCases } from "./sections/UseCases";
-import { PlatformSection } from "./sections/PlatformSection";
-import { CodeSnippetsSection } from "./sections/CodeSnippetsSection";
-import { FeaturesSection } from "./sections/FeaturesSection";
-import { FeaturesBentoBox } from "./sections/FeaturesBentoBox";
-import { TechSection } from "./sections/TechSection";
-import { DeploymentOptionsSection } from "./sections/DeploymentOptionsSection";
-import { StudioSection } from "./sections/StudioSection";
-import { CommunitySection } from "./sections/CommunitySection";
-import { CTASection } from "./sections/CTASection";
+"use client";
+
+// Import new sections
+import { NewHeroSection } from "./sections/NewHeroSection";
+import { SocialProofSection } from "./sections/SocialProofSection";
+import { ProblemSection } from "./sections/ProblemSection";
+import { SolutionSection } from "./sections/SolutionSection";
+import { NewFeaturesBento } from "./sections/NewFeaturesBento";
+import { NewUseCases } from "./sections/NewUseCases";
+import { NewCTASection } from "./sections/NewCTASection";
+import { ScrollObserver } from "@/components/ScrollObserver";
 
 export default function IndexPage() {
 	return (
-		<>
-			<div />
+		<ScrollObserver>
+			<div className="min-h-screen pt-20" style={{ backgroundColor: '#0A0A0A', color: '#FAFAFA' }}>
+				{/* Main container */}
+				<div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+					{/* Hero Section */}
+					<NewHeroSection />
 
-			{/*<HeroBackground />*/}
+					{/* Social Proof */}
+					<SocialProofSection />
 
-			{/* Content */}
-			<main className="min-h-screen w-full max-w-[1500px] mx-auto px-4 md:px-8">
-				<HeroSection />
+					{/* The Problem */}
+					<ProblemSection />
 
-				<div className="pb-8 sm:pb-12">
-					<PlatformSection />
-				</div>
-
-				<div className="pb-16 sm:pb-20">
-					<UseCases />
-				</div>
-
-				<div className="py-24 sm:py-32">
-					<CodeSnippetsSection />
-				</div>
-
-				<div className="py-24 sm:py-32">
-					<FeaturesBentoBox />
-				</div>
-
-				{/*<div className="py-24 sm:py-32">
-					<FeaturesSection />
-				</div>*/}
+					{/* The Solution */}
+					<SolutionSection />
 
-				<div className="py-24 sm:py-32">
-					<TechSection />
-				</div>
-
-				<div className="py-24 sm:py-32">
-					<DeploymentOptionsSection />
-				</div>
-
-				<div className="py-40 sm:py-48">
-					<StudioSection />
-				</div>
-
-				{/*<div className="py-16 sm:py-20">
-				  <QuotesSection />
-				</div>*/}
-
-				<div className="py-52 sm:py-60">
-					<CommunitySection />
-				</div>
+					{/* Features Bento */}
+					<NewFeaturesBento />
 
-				<div className="h-[1px] bg-white/20" />
+					{/* Use Cases */}
+					<NewUseCases />
 
-				<div className="py-52 sm:py-60">
-					<CTASection />
+					{/* Final CTA */}
+					<NewCTASection />
 				</div>
-			</main>
-		</>
+			</div>
+		</ScrollObserver>
 	);
 }
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewCTASection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewCTASection.tsx
new file mode 100644
index 0000000000..f528addfe9
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewCTASection.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+export function NewCTASection() {
+	return (
+		<section className="py-24 md:py-32 text-center">
+			<div className="animate-on-scroll animate-fade-up">
+				<h2 className="font-heading text-4xl sm:text-5xl font-bold tracking-tighter text-text-primary">
+					Build your app with Rivet Actors
+				</h2>
+
+				<p className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto">
+					Start in 5 minutes. Deploy anywhere. Scale to millions.
+				</p>
+
+				<div className="mt-10 flex flex-col sm:flex-row justify-center gap-4">
+					<Link
+						href="/docs/quickstart/"
+						className="animate-on-scroll animate-fade-up delay-100 px-8 py-4 rounded-lg font-medium bg-accent text-white transition-all duration-200 hover:bg-orange-600 hover:shadow-lg hover:shadow-accent/20 hover:-translate-y-0.5 text-lg"
+					>
+						Get Started Now
+					</Link>
+					<Link
+						href="/talk-to-an-engineer"
+						className="animate-on-scroll animate-fade-up delay-200 px-8 py-4 rounded-lg font-medium border border-border text-text-secondary transition-all duration-200 hover:border-text-secondary hover:text-text-primary text-lg"
+					>
+						Talk to an Engineer
+					</Link>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewFeaturesBento.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewFeaturesBento.tsx
new file mode 100644
index 0000000000..eb5d806e94
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewFeaturesBento.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect } from "react";
+
+const primitives = [
+	{
+		category: "Compute",
+		number: "01",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<rect x="4" y="4" width="16" height="16" rx="2"></rect>
+				<rect x="9" y="9" width="6" height="6"></rect>
+				<path d="M9 1v3"></path>
+				<path d="M15 1v3"></path>
+				<path d="M9 20v3"></path>
+				<path d="M15 20v3"></path>
+				<path d="M20 9h3"></path>
+				<path d="M20 14h3"></path>
+				<path d="M1 9h3"></path>
+				<path d="M1 14h3"></path>
+			</svg>
+		),
+		title: "Long-Lived Compute",
+		description: "Like Lambda, but with memory. No 5-minute timeouts, no state loss. Your logic runs as long as your product does.",
+		code: "persistent.process()",
+	},
+	{
+		category: "State",
+		number: "02",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<path d="M12 14l4-4"></path>
+				<path d="M3.34 19a10 10 0 1 1 17.32 0"></path>
+			</svg>
+		),
+		title: "Zero-Latency State",
+		description: "State lives beside your compute. Reads and writes are in-memory—no cache invalidation, no round-trips, no gymnastics.",
+		code: "read(<1ms)",
+	},
+	{
+		category: "Realtime",
+		number: "03",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<circle cx="12" cy="12" r="1"></circle>
+				<path d="M5 8.55a7 7 0 0 1 0 6.9"></path>
+				<path d="M19 8.55a7 7 0 0 0 0 6.9"></path>
+				<path d="M8.5 6a10 10 0 0 1 0 12"></path>
+				<path d="M15.5 6a10 10 0 0 0 0 12"></path>
+			</svg>
+		),
+		title: "Realtime, Built-in",
+		description: "WebSockets and SSE out of the box. Broadcast updates with one line—no extra infrastructure, no pub/sub layer.",
+		code: "c.broadcast()",
+	},
+	{
+		category: "Economics",
+		number: "04",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"></path>
+			</svg>
+		),
+		title: "Sleep When Idle",
+		description: "Actors automatically hibernate to save costs and wake instantly on demand. You only pay for work done—not uptime.",
+		code: "idle → sleep()",
+	},
+	{
+		category: "Ownership",
+		number: "05",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<path d="M15 22v-2.5a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 19.5 5.77 5.07 5.07 0 0 0 19.4 2S18.27 1.65 15 3.46a13.38 13.38 0 0 0-6 0C5.73 1.65 4.6 2 4.6 2a5.07 5.07 0 0 0-.1 3.77A5.44 5.44 0 0 0 3.5 9.89c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 19.5V22"></path>
+				<path d="M9 18c-4.51 2-5-2-7-2"></path>
+			</svg>
+		),
+		title: "Open Source & Self-Hostable",
+		description: "No lock-in. Run on your platform of choice or bare metal with the same API and mental model.",
+		code: "apache-2.0",
+	},
+	{
+		category: "Reliability",
+		number: "06",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<path d="m9 12 2 2 4-4"></path>
+				<path d="M12 22c4.5-2 8-5 8-10V5l-8-3-8 3v7c0 5 3.5 8 8 10"></path>
+			</svg>
+		),
+		title: "Resilient by Design",
+		description: "Automatic failover and restarts maintain state integrity. Your actors survive crashes, deploys, noisy neighbors.",
+		code: "uptime > 99.9%",
+	},
+];
+
+export function NewFeaturesBento() {
+	useEffect(() => {
+		// Scroll animation setup using existing system
+		const scrollElements = document.querySelectorAll(".animate-on-scroll");
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						entry.target.classList.add("is-visible");
+						observer.unobserve(entry.target);
+					}
+				});
+			},
+			{ threshold: 0.1 }
+		);
+
+		scrollElements.forEach((el) => observer.observe(el));
+
+		return () => {
+			scrollElements.forEach((el) => observer.unobserve(el));
+		};
+	}, []);
+
+	return (
+		<section className="py-24 md:py-32">
+			<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+				<h2 className="text-center font-heading text-4xl md:text-5xl font-bold tracking-tighter text-text-primary animate-on-scroll animate-fade-up mb-16">
+					A New Primitive for Your Backend.
+				</h2>
+
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+					{primitives.map((primitive, index) => {
+						const delayClasses = ["delay-100", "delay-200", "delay-300", "delay-400", "delay-500", "delay-600"];
+						return (
+						<div key={index} className={`bento-box animate-on-scroll animate-fade-up ${delayClasses[index] || ""} border border-border rounded-xl p-6 md:p-8 bg-background/50 flex flex-col justify-between`}>
+							{/* Header with category badge and number */}
+							<div className="flex items-start justify-between gap-4 mb-6">
+								<div className="inline-flex bg-black/50 border border-border rounded-full px-3 py-1.5 items-center justify-center">
+									<span className="w-1.5 h-1.5 rounded-full bg-accent mr-2"></span>
+									<span className="text-xs uppercase tracking-wider text-text-secondary">
+										{primitive.category}
+									</span>
+								</div>
+								<span className="text-xs font-mono text-text-secondary">
+									{primitive.number}
+								</span>
+							</div>
+
+							{/* Icon, title, and description */}
+							<div className="flex-1">
+								<div className="inline-flex items-center justify-center rounded-lg bg-black/30 border border-border p-3 mb-4">
+									{primitive.icon}
+								</div>
+								<h3 className="font-heading text-xl font-bold text-text-primary mb-2">
+									{primitive.title}
+								</h3>
+								<p className="text-text-secondary">
+									{primitive.description}
+								</p>
+							</div>
+
+							{/* Footer with code */}
+							<div className="mt-6 pt-4 border-t border-border">
+								<span className="text-xs font-mono text-text-secondary">
+									{primitive.code}
+								</span>
+							</div>
+						</div>
+						);
+					})}
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewHeroSection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewHeroSection.tsx
new file mode 100644
index 0000000000..cc8b8f225d
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewHeroSection.tsx
@@ -0,0 +1,441 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+// StyleInjector Component - Injects custom CSS
+const StyleInjector = () => (
+	<style
+		dangerouslySetInnerHTML={{
+			__html: `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+    
+    /* --- Background Grid --- */
+    .hero-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #0a0a0a;
+      background-image:
+        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+      background-size: 3rem 3rem;
+      animation: pan-grid 60s linear infinite;
+    }
+    
+    .hero-background-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(ellipse 70% 40% at 50% 50%, rgba(255, 240, 220, 0.08) 0%, rgba(10, 10, 10, 1) 70%);
+    }
+    
+    @keyframes pan-grid {
+      0% { background-position: 0% 0%; }
+      100% { background-position: 3rem 3rem; }
+    }
+    
+    /* --- Request Packet Animations - L-shaped paths --- */
+    /* Packets start at x=60px (icon center), need to reach x=280px (220px horizontal movement) */
+    @keyframes fly-req-1 {
+      0% { opacity: 0; transform: translate(0, 0); }
+      2% { opacity: 1; }
+      10% { transform: translate(0, 20px); } /* Drop down vertically - reach turn point very quickly */
+      12% { transform: translate(0, 20px); } /* Brief pause at turn */
+      100% { opacity: 0; transform: translate(220px, 20px); } /* Turn right and move all the way to actor */
+    }
+    
+    @keyframes fly-req-2 {
+      0% { opacity: 0; transform: translate(0, 0); }
+      2% { opacity: 1; }
+      100% { opacity: 0; transform: translate(220px, 0px); } /* Pure horizontal movement - no drop */
+    }
+    
+    @keyframes fly-req-3 {
+      0% { opacity: 0; transform: translate(0, 0); }
+      2% { opacity: 1; }
+      10% { transform: translate(0, -20px); } /* Move up - reach turn point very quickly */
+      12% { transform: translate(0, -20px); } /* Brief pause at turn */
+      100% { opacity: 0; transform: translate(220px, -20px); } /* Turn right and move all the way to actor */
+    }
+    
+    /* --- Actor Processing Pulse --- */
+    @keyframes pulse-actor {
+      0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.3); }
+      50% { box-shadow: 0 0 15px 8px rgba(255, 69, 0, 0.15); }
+      100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
+    }
+    
+    .animate-fly-1 { animation: fly-req-1 0.4s linear forwards; }
+    .animate-fly-2 { animation: fly-req-2 0.4s linear forwards; }
+    .animate-fly-3 { animation: fly-req-3 0.4s linear forwards; }
+    .animate-pulse-actor { animation: pulse-actor 0.4s ease-in-out; }
+    
+    /* Green packet animation from actor to database */
+    @keyframes fly-green {
+      0% { opacity: 0; transform: translate(0, 0); }
+      2% { opacity: 1; }
+      100% { opacity: 0; transform: translate(0, 89px); } /* Move down 89px from actor bottom (221) to database (310) */
+    }
+    
+    .animate-fly-green { animation: fly-green 0.6s linear forwards; }
+    
+    /* Database glow animation - triggers when ball reaches database */
+    @keyframes glow-database {
+      0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+      50% { box-shadow: 0 0 8px 4px rgba(34, 197, 94, 0.08); }
+      100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+    }
+    
+    .animate-glow-database { 
+      animation: glow-database 0.3s ease-out;
+    }
+    
+    /* Connection lines */
+    .connection-line {
+      stroke: rgba(59, 130, 246, 0.5);
+      stroke-width: 2.5;
+      stroke-dasharray: 5, 5;
+      animation: dash-move 2s linear infinite;
+    }
+    
+    .connection-line-green {
+      stroke: rgba(34, 197, 94, 0.6);
+      stroke-width: 2.5;
+      stroke-dasharray: 5, 5;
+      animation: dash-move 2s linear infinite;
+    }
+    
+    @keyframes dash-move {
+      0% { stroke-dashoffset: 0; }
+      100% { stroke-dashoffset: 10; }
+    }
+  `,
+		}}
+	/>
+);
+
+// UserNode Component
+const UserNode = ({ label, position, style }: { label: string; position: string; style?: React.CSSProperties }) => (
+	<div className={`absolute ${position} flex items-center space-x-3`} style={{ zIndex: 3, ...style }}>
+		<div className="w-10 h-10 rounded-full bg-neutral-700 border-2 border-neutral-500 flex items-center justify-center">
+			<svg className="w-5 h-5 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+				<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A1.5 1.5 0 0118 21.75H6a1.5 1.5 0 01-1.499-1.632z" />
+			</svg>
+		</div>
+		<span className="text-neutral-400 text-sm font-medium">{label}</span>
+	</div>
+);
+
+// DatabaseNode Component - Green dot for database/API
+const DatabaseNode = ({ label, position, shouldGlow }: { label: string; position: string; shouldGlow?: boolean }) => (
+	<div className={`absolute ${position} flex items-center space-x-3`} style={{ zIndex: 3 }}>
+		<div className={`w-10 h-10 rounded-full bg-green-600 border-2 border-green-400 flex items-center justify-center ${shouldGlow ? "animate-glow-database" : ""}`}>
+			<svg className="w-5 h-5 text-green-200" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+				<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+			</svg>
+		</div>
+		<span className="text-green-400 text-sm font-medium">{label}</span>
+	</div>
+);
+
+// RequestPacket Component
+const RequestPacket = ({
+	id,
+	status,
+	position,
+	startX,
+	startY,
+}: {
+	id: string;
+	status: string;
+	position: string;
+	startX?: number;
+	startY?: number;
+}) => {
+	let animationClass = "";
+	if (status === "flying") {
+		if (id === "req1") animationClass = "animate-fly-1";
+		if (id === "req2") animationClass = "animate-fly-2";
+		if (id === "req3") animationClass = "animate-fly-3";
+	}
+	return (
+		<div
+			className={`absolute w-5 h-5 rounded-full bg-blue-500 border-2 border-blue-300 shadow-lg shadow-blue-500/50 ${position || ""} ${status === "flying" ? animationClass : "opacity-0"}`}
+			style={{ 
+				zIndex: 1, // Behind the grey icons (which are z-index: 3)
+				left: startX ? `${startX - 10}px` : undefined,
+				top: startY ? `${startY - 10}px` : undefined
+			}}
+		/>
+	);
+};
+
+// GreenPacket Component - travels from actor to database
+const GreenPacket = ({ status }: { status: string }) => {
+	return (
+		<div
+			className={`absolute w-5 h-5 rounded-full bg-green-500 border-2 border-green-300 shadow-lg shadow-green-500/50 ${status === "processing" ? "animate-fly-green" : "opacity-0"}`}
+			style={{ 
+				zIndex: 1,
+				left: "366px", // Actor center x=376, minus 10px for icon center
+				top: "211px" // Actor bottom y=221, minus 10px for icon center
+			}}
+		/>
+	);
+};
+
+// ActorAnimation Component
+const ActorAnimation = () => {
+	const [actorState, setActorState] = useState({ count: 10 });
+	const [actorStatus, setActorStatus] = useState<"hibernating" | "active" | "processing">("hibernating");
+	const [requests, setRequests] = useState({ req1: "idle", req2: "idle", req3: "idle" });
+	const [step, setStep] = useState(0);
+	const [shouldGlowDatabase, setShouldGlowDatabase] = useState(false);
+
+	useEffect(() => {
+		const sequence = [
+			() => {
+				setActorStatus("active");
+				setShouldGlowDatabase(false); // Reset glow when status changes
+			},
+			() => setRequests((r) => ({ ...r, req1: "flying" })),
+			() => {
+				setRequests((r) => ({ ...r, req1: "idle" }));
+				setActorStatus("processing");
+				setActorState((s) => ({ count: s.count + 1 }));
+				// Trigger database glow when ball reaches (after 0.6s)
+				setShouldGlowDatabase(false); // Reset first
+				setTimeout(() => setShouldGlowDatabase(true), 600);
+			},
+			() => {
+				setActorStatus("active");
+				setShouldGlowDatabase(false); // Reset glow when status changes
+			},
+			() => setRequests((r) => ({ ...r, req2: "flying" })),
+			() => {
+				setRequests((r) => ({ ...r, req2: "idle" }));
+				setActorStatus("processing");
+				setActorState((s) => ({ count: s.count + 1 }));
+				// Trigger database glow when ball reaches (after 0.6s)
+				setShouldGlowDatabase(false); // Reset first
+				setTimeout(() => setShouldGlowDatabase(true), 600);
+			},
+			() => {
+				setActorStatus("active");
+				setShouldGlowDatabase(false); // Reset glow when status changes
+			},
+			() => setRequests((r) => ({ ...r, req3: "flying" })),
+			() => {
+				setRequests((r) => ({ ...r, req3: "idle" }));
+				setActorStatus("processing");
+				setActorState((s) => ({ count: s.count + 1 }));
+				// Trigger database glow when ball reaches (after 0.6s)
+				setShouldGlowDatabase(false); // Reset first
+				setTimeout(() => setShouldGlowDatabase(true), 600);
+			},
+			() => {
+				setActorStatus("hibernating");
+				setShouldGlowDatabase(false); // Reset glow when status changes
+			},
+			() => {
+				setActorState({ count: 10 });
+				setStep(0);
+			},
+		];
+
+		const delays = [1000, 1200, 400, 500, 1200, 400, 500, 1200, 400, 3000, 500];
+
+		const timer = setTimeout(() => {
+			if (sequence[step]) {
+				sequence[step]();
+				setStep((s) => s + 1);
+			}
+		}, delays[step] || 1000);
+
+		return () => clearTimeout(timer);
+	}, [step]);
+
+	const getActorClasses = () => {
+		let classes =
+			"w-48 h-48 border-2 flex flex-col items-center justify-center transition-all duration-500";
+
+		if (actorStatus === "hibernating") {
+			classes += " bg-orange-900/30 border-orange-500/20 opacity-60";
+		} else if (actorStatus === "active") {
+			classes += " bg-orange-900/80 border-orange-400 opacity-100";
+		} else if (actorStatus === "processing") {
+			classes += " bg-orange-900/80 border-orange-300 opacity-100 animate-pulse-actor";
+		}
+
+		return classes;
+	};
+
+	const getActorTextClasses = () => {
+		let classes = "transition-all duration-500";
+		if (actorStatus === "hibernating") {
+			classes += " text-orange-500/40";
+		} else {
+			classes += " text-orange-300";
+		}
+		return classes;
+	};
+
+	return (
+		<div className="relative w-full h-[400px] lg:h-[500px] flex items-center justify-center">
+			<div className="relative w-[600px] h-[350px]">
+				{/* SVG Connection Lines - Behind everything - L-shaped paths */}
+				<svg className="absolute inset-0 w-full h-full pointer-events-none" style={{ zIndex: 0 }}>
+					{/* L-shaped path from top node: down then right to actor top */}
+					{/* Icon is 40px wide, center at 40px + 20px = 60px. Icon is 40px tall, center Y at top + 20px */}
+					<path
+						d="M 60 40 L 60 60 L 280 60"
+						className="connection-line"
+						fill="none"
+					/>
+					{/* Horizontal path from middle node: straight to actor center (no drop) */}
+					<path
+						d="M 60 125 L 280 125"
+						className="connection-line"
+						fill="none"
+					/>
+					{/* L-shaped path from bottom node: up then right to actor bottom */}
+					<path
+						d="M 60 210 L 60 190 L 280 190"
+						className="connection-line"
+						fill="none"
+					/>
+					{/* Green dashed line from actor to database/API below */}
+					{/* Actor: left edge at x=280, width 192px (w-48), so center at x=376. Top at y=125 with translateY(-50%), height 192px, so bottom at y=221 */}
+					{/* Database icon center is at y=310 (350px height - 40px), and centered horizontally with actor at x=376 */}
+					<path
+						d="M 376 221 L 376 310"
+						className="connection-line-green"
+						fill="none"
+					/>
+				</svg>
+
+				{/* User Nodes on the left - positioned relative to blue lines */}
+				{/* Top line starts at y=40, User Request should be above it */}
+				{/* Middle line is at y=125, API Call centered on it */}
+				{/* Bottom line ends at y=190, Background Job is below it (center at y=230, top at 210px) */}
+				<UserNode label="User Request" position="left-10" style={{ top: "0px" }} />
+				<UserNode label="API Call" position="left-10" style={{ top: "105px" }} />
+				<UserNode label="Background Job" position="left-10" style={{ top: "210px" }} />
+
+				{/* Actor on the right - lines connect at x=280, y=60, y=125, y=190 */}
+				{/* Actor is 192px wide (w-48), so if lines connect at x=280, position actor so left edge is at x=280 */}
+				<div className="absolute left-[280px] top-[125px]" style={{ transform: "translateY(-50%)", zIndex: 2 }}>
+					<div className={`relative ${getActorClasses()}`} style={{ borderRadius: "42px" }}>
+						<div className="absolute top-3 px-3 py-1 bg-orange-400/20 text-orange-300 text-xs rounded-full font-medium">
+							Actor
+						</div>
+						<div className="mt-4 p-4 bg-black/30 rounded-lg w-[85%]">
+							<code className="text-sm">
+								<span className={getActorTextClasses()}>{"{"}</span>
+								<span className="text-white/80">"count"</span>
+								<span className="text-white">: </span>
+								<span className="text-fuchsia-400 font-bold">{JSON.stringify(actorState.count)}</span>
+								<span className={getActorTextClasses()}>{"}"}</span>
+							</code>
+						</div>
+						<span className={`text-xs mt-2 font-medium ${getActorTextClasses()}`}>Status: {actorStatus}</span>
+					</div>
+				</div>
+
+				{/* Database/API Node below the actor - centered with actor */}
+				<div className="absolute left-[376px] bottom-0" style={{ transform: "translateX(-50%)", zIndex: 3 }}>
+					<div className="flex items-center space-x-3">
+						<div className={`w-10 h-10 rounded-full bg-green-600 border-2 border-green-400 flex items-center justify-center ${shouldGlowDatabase ? "animate-glow-database" : ""}`}>
+							<svg className="w-5 h-5 text-green-200" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+								<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+							</svg>
+						</div>
+						<span className="text-green-400 text-sm font-medium">Database/API</span>
+					</div>
+				</div>
+
+				{/* Request Packets - Start at center of user node icons, follow lines */}
+				{/* Positioned at icon centers: top at y=40, middle at y=125, bottom at y=210 */}
+				<RequestPacket id="req1" status={requests.req1} position="" startX={60} startY={40} />
+				<RequestPacket id="req2" status={requests.req2} position="" startX={60} startY={125} />
+				<RequestPacket id="req3" status={requests.req3} position="" startX={60} startY={210} />
+
+				{/* Green Packet - travels from actor to database when processing */}
+				<GreenPacket status={actorStatus} />
+			</div>
+		</div>
+	);
+};
+
+export function NewHeroSection() {
+	return (
+		<>
+			<StyleInjector />
+			<section className="relative w-full min-h-screen flex items-center justify-center overflow-hidden text-white">
+				{/* Background Grid */}
+				<div className="hero-background" aria-hidden="true"></div>
+				<div className="hero-background-overlay" aria-hidden="true"></div>
+
+				{/* Content */}
+				<div className="relative z-10 container mx-auto px-6 py-20">
+					<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+						{/* Left: Text Content - Left Aligned */}
+						<div className="flex flex-col space-y-8 text-left">
+							<h1 className="font-heading text-5xl md:text-6xl lg:text-7xl font-bold tracking-tighter" style={{ color: '#FAFAFA' }}>
+								<span className="block overflow-hidden leading-[1.1]">
+									<span className="block opacity-0 animate-hero-line" style={{ animationDelay: "0.1s" }}>
+										Stateful Backends.
+									</span>
+								</span>
+								<span className="block overflow-hidden leading-[1.1]">
+									<span className="block opacity-0 animate-hero-line" style={{ animationDelay: "0.3s" }}>
+										Finally Solved.
+									</span>
+								</span>
+							</h1>
+
+							<p className="text-lg md:text-xl max-w-lg opacity-0 animate-hero-p" style={{ color: '#A0A0A0' }}>
+								Stop faking state with databases and message queues. Rivet is the open-source library for long-lived compute—we call them Actors. It's what you reach for when Lambda runs out of road.
+							</p>
+
+							<div className="flex flex-col sm:flex-row gap-4 opacity-0 animate-hero-cta">
+								<Link
+									href="/docs/quickstart/"
+									className="px-8 py-3.5 rounded-lg font-bold text-white transition-all duration-200 hover:bg-orange-600 hover:shadow-lg hover:-translate-y-0.5 text-center"
+									style={{ backgroundColor: '#FF4500' }}
+								>
+									Quickstart – 5 Mins
+								</Link>
+								<Link
+									href="https://github.com/rivet-gg/rivet"
+									className="px-8 py-3.5 rounded-lg font-medium transition-all duration-200 text-center"
+									style={{
+										border: '1px solid #252525',
+										color: '#A0A0A0',
+										backgroundColor: 'rgba(37, 37, 37, 0.5)'
+									}}
+								>
+									View on GitHub →
+								</Link>
+							</div>
+						</div>
+
+						{/* Right: Animation */}
+						<div className="w-full h-full flex items-center justify-center lg:justify-end">
+							<ActorAnimation />
+						</div>
+					</div>
+				</div>
+			</section>
+		</>
+	);
+}
\ No newline at end of file
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/NewUseCases.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/NewUseCases.tsx
new file mode 100644
index 0000000000..fdcaf2a790
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/NewUseCases.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+
+const useCases = [
+	{
+		title: "AI Agents",
+		description: "Build durable assistants with persistent, long-term memory and context.",
+	},
+	{
+		title: "Collaborative SaaS",
+		description: "Power real-time docs, whiteboards, and Figma-like tools with live sync.",
+	},
+	{
+		title: "Durable Workflows",
+		description: "Create multi-step background jobs and workflows that can run for days.",
+	},
+	{
+		title: "Logistics & IoT",
+		description: "Manage state and send commands to millions of connected devices in real-time.",
+	},
+	{
+		title: "Live Event Platforms",
+		description: "Push real-time data, polls, and chat to 100,000+ concurrent users.",
+	},
+	{
+		title: "Per-User Backends",
+		description: "Instantly spin up an isolated, stateful backend for every user who signs up.",
+	},
+];
+
+export function NewUseCases() {
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const [startX, setStartX] = useState(0);
+	const [scrollLeft, setScrollLeft] = useState(0);
+	const [isPaused, setIsPaused] = useState(false);
+	const animationRef = useRef<number>();
+
+	// Auto-scroll animation
+	useEffect(() => {
+		const scroll = () => {
+			if (!scrollRef.current || isPaused || isDragging) return;
+
+			const container = scrollRef.current;
+			const maxScroll = container.scrollWidth / 2; // Half because we have duplicates
+
+			// Increment scroll position
+			container.scrollLeft += 1;
+
+			// Reset to start when we've scrolled through the first set
+			if (container.scrollLeft >= maxScroll) {
+				container.scrollLeft = 0;
+			}
+
+			animationRef.current = requestAnimationFrame(scroll);
+		};
+
+		animationRef.current = requestAnimationFrame(scroll);
+
+		return () => {
+			if (animationRef.current) {
+				cancelAnimationFrame(animationRef.current);
+			}
+		};
+	}, [isPaused, isDragging]);
+
+	const handleMouseDown = (e: React.MouseEvent) => {
+		setIsDragging(true);
+		setStartX(e.pageX - (scrollRef.current?.offsetLeft || 0));
+		setScrollLeft(scrollRef.current?.scrollLeft || 0);
+	};
+
+	const handleMouseMove = (e: React.MouseEvent) => {
+		if (!isDragging) return;
+		e.preventDefault();
+		const x = e.pageX - (scrollRef.current?.offsetLeft || 0);
+		const walk = (x - startX) * 2;
+		if (scrollRef.current) {
+			scrollRef.current.scrollLeft = scrollLeft - walk;
+		}
+	};
+
+	const handleMouseUp = () => {
+		setIsDragging(false);
+	};
+
+	const handleMouseLeave = () => {
+		setIsDragging(false);
+		setIsPaused(false);
+	};
+
+	const handleMouseEnter = () => {
+		setIsPaused(true);
+	};
+
+	return (
+		<section className="py-24 md:py-32 overflow-hidden">
+			<h2 className="animate-on-scroll animate-fade-up text-center font-heading text-4xl md:text-5xl font-bold tracking-tighter text-text-primary">
+				From AI to IoT, Build What's Next.
+			</h2>
+
+			<div className="mt-16 relative -mx-4 px-4 [mask-image:_linear-gradient(to_right,transparent_0,_black_10%,_black_90%,transparent_100%)]">
+				<div
+					ref={scrollRef}
+					className="overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing py-2"
+					onMouseDown={handleMouseDown}
+					onMouseMove={handleMouseMove}
+					onMouseUp={handleMouseUp}
+					onMouseLeave={handleMouseLeave}
+					onMouseEnter={handleMouseEnter}
+					style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', overflowY: 'visible' }}
+				>
+					<div className="flex gap-6">
+						{/* First set of cards */}
+						{useCases.map((useCase, index) => (
+							<div key={`original-${index}`} className="flex-none w-72 md:w-80 bento-box border border-border rounded-xl p-6 select-none">
+								<h3 className="font-heading text-xl font-bold text-text-primary">{useCase.title}</h3>
+								<p className="mt-2 text-text-secondary">{useCase.description}</p>
+							</div>
+						))}
+						{/* Duplicate set for seamless loop */}
+						{useCases.map((useCase, index) => (
+							<div key={`duplicate-${index}`} className="flex-none w-72 md:w-80 bento-box border border-border rounded-xl p-6 select-none">
+								<h3 className="font-heading text-xl font-bold text-text-primary">{useCase.title}</h3>
+								<p className="mt-2 text-text-secondary">{useCase.description}</p>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/ProblemSection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/ProblemSection.tsx
new file mode 100644
index 0000000000..87ceb2c784
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/ProblemSection.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect } from "react";
+
+const problems = [
+	{
+		category: "Problem",
+		number: "01",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<circle cx="12" cy="12" r="10"></circle>
+				<line x1="12" y1="8" x2="12" y2="12"></line>
+				<line x1="12" y1="16" x2="12.01" y2="16"></line>
+			</svg>
+		),
+		title: "The Old Way",
+		description: "Your serverless function spins up. It queries a database. It does its job and dies.",
+		code: "lambda()",
+		status: "The pain",
+		statusColor: "bg-red-500",
+	},
+	{
+		category: "Complexity",
+		number: "02",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-yellow-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+				<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+				<line x1="12" y1="22.08" x2="12" y2="12"></line>
+			</svg>
+		),
+		title: "The \"Glue Code\" Mess",
+		description: "So you add Redis for state. And a message queue for jobs. And a WebSocket server for realtime. Your app is now a complex, distributed monolith.",
+		code: "redis + queue + ws",
+		status: "Complexity",
+		statusColor: "bg-yellow-500",
+	},
+	{
+		category: "Solution",
+		number: "03",
+		icon: (
+			<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+				<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+				<polyline points="22 4 12 14.01 9 11.01"></polyline>
+			</svg>
+		),
+		title: "The Rivet Way",
+		description: "Your logic and state live together. One library. One process. It's fast, resilient, and scales from zero. No database round-trips. No queues. Just code.",
+		code: "actor()",
+		status: "The gain",
+		statusColor: "bg-green-500",
+	},
+];
+
+export function ProblemSection() {
+	useEffect(() => {
+		// Bento box glow effect
+		const bentoBoxes = document.querySelectorAll<HTMLDivElement>(".bento-box");
+		bentoBoxes.forEach((box) => {
+			const handleMouseMove = (e: MouseEvent) => {
+				const rect = box.getBoundingClientRect();
+				const x = e.clientX - rect.left;
+				const y = e.clientY - rect.top;
+				box.style.setProperty("--mouse-x", `${x}px`);
+				box.style.setProperty("--mouse-y", `${y}px`);
+			};
+
+			const handleMouseLeave = () => {
+				box.style.setProperty("--mouse-x", "50%");
+				box.style.setProperty("--mouse-y", "50%");
+			};
+
+			box.addEventListener("mousemove", handleMouseMove);
+			box.addEventListener("mouseleave", handleMouseLeave);
+
+			return () => {
+				box.removeEventListener("mousemove", handleMouseMove);
+				box.removeEventListener("mouseleave", handleMouseLeave);
+			};
+		});
+	}, []);
+
+	return (
+		<section className="py-24 md:py-32">
+			<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+				<h2 className="text-center font-heading text-4xl md:text-5xl font-bold tracking-tighter text-text-primary animate-on-scroll animate-fade-up mb-16">
+					Your Stack is Stateless.
+					<br />
+					Your Apps Aren't.
+				</h2>
+
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+					{problems.map((problem, index) => {
+						const delayClasses = ["delay-100", "delay-200", "delay-300"];
+						const isSolution = problem.category === "Solution";
+						const isComplexity = problem.category === "Complexity";
+						const isProblem = problem.category === "Problem";
+						return (
+						<div key={index} className={`bento-box animate-on-scroll animate-fade-up ${delayClasses[index] || ""} border border-border rounded-xl p-6 md:p-8 bg-background/50 flex flex-col justify-between ${isSolution ? "ring-1 ring-green-500/30" : isComplexity ? "ring-1 ring-yellow-500/30" : isProblem ? "ring-1 ring-red-500/30" : ""}`}>
+							{/* Header with category badge and number */}
+							<div className="flex items-start justify-between gap-4 mb-6">
+								<div className={`inline-flex bg-black/50 border border-border rounded-full px-3 py-1.5 items-center justify-center ${isSolution ? "border-green-500/30" : isComplexity ? "border-yellow-500/30" : isProblem ? "border-red-500/30" : ""}`}>
+									<span className={`w-1.5 h-1.5 rounded-full ${isSolution ? "bg-green-500" : isComplexity ? "bg-yellow-500" : "bg-red-500"} mr-2`}></span>
+									<span className="text-xs uppercase tracking-wider text-text-secondary">
+										{problem.category}
+									</span>
+								</div>
+								<span className="text-xs font-mono text-text-secondary">
+									{problem.number}
+								</span>
+							</div>
+
+							{/* Icon, title, and description */}
+							<div className="flex-1">
+								<div className="inline-flex items-center justify-center rounded-lg bg-black/30 border border-border p-3 mb-4">
+									{problem.icon}
+								</div>
+								<h3 className={`font-heading text-xl font-bold mb-2 ${isSolution ? "text-green-500" : isComplexity ? "text-yellow-500" : "text-text-primary"}`}>
+									{problem.title}
+								</h3>
+								<p className="text-text-secondary">
+									{problem.description}
+								</p>
+							</div>
+						</div>
+						);
+					})}
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/SocialProofSection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/SocialProofSection.tsx
new file mode 100644
index 0000000000..03e979b7da
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/SocialProofSection.tsx
@@ -0,0 +1,76 @@
+export function SocialProofSection() {
+	return (
+		<section className="py-16 overflow-hidden">
+			<div className="animate-on-scroll animate-fade-up">
+				<p className="text-center text-sm uppercase tracking-widest" style={{ color: '#A0A0A0' }}>
+					Works Where You Work
+				</p>
+				<div className="mt-8 w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_10%,_black_90%,transparent_100%)]">
+					<div className="flex items-center justify-center md:justify-start [&_svg]:h-6 [&_svg]:w-auto animate-infinite-scroll">
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Vercel</title>
+								<path d="M12 1.5l12 21H0L12 1.5z" />
+							</svg>{" "}
+							Vercel
+						</span>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Railway</title>
+								<path d="M2.762 10.375L0 12l2.762 1.625.5 1.375H0v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H12v-1.5H8.738l.5-1.375L12 12l-2.762-1.625-.5-1.375H12v-1.5H8.738l-1 2.75V9H6.238v1.25l-1-2.75H0v1.5h3.262l-.5 1.375zm18.476 0L18.476 12l2.762 1.625.5 1.375H18.476v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H24v-1.5h-3.262l.5-1.375L24 12l-2.762-1.625-.5-1.375H24v-1.5h-3.262l-1 2.75V9h-1.5v1.25l-1-2.75H18.476v1.5h3.262l-.5 1.375z" />
+							</svg>{" "}
+							Railway
+						</span>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Cloudflare</title>
+								<path d="M19.342 8.786c.182-.62.274-1.26.274-1.91 0-3.32-2.68-6.01-5.99-6.01-2.42 0-4.5.8-5.36 2.05-.62-.48-1.37-.77-2.19-.77-2.31 0-4.18 1.88-4.18 4.19 0 .46.07.9.2 1.32-.48.62-.77 1.36-.77 2.18 0 2.31 1.87 4.18 4.18 4.18.9 0 1.73-.28 2.42-.76.62.48 1.36.76 2.18.76 2.31 0 4.18-1.87 4.18-4.18 0-.9-.28-1.73-.76-2.42.5-.63.78-1.4.78-2.23M12 14.49c-2.31 0-4.18-1.88-4.18-4.19S9.69 6.11 12 6.11s4.18 1.88 4.18 4.19-1.87 4.19-4.18 4.19m6.89-2.05h.69v-.68h-.69v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68H13.8v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68H7.32v.68M6.63 10.3h.69v.68h-.69v-.68m1.37 0h.68v.68h-.68v-.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-1.37v.68" />
+							</svg>{" "}
+							Cloudflare
+						</span>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Hetzner</title>
+								<path d="M12.38 3.01H1.81V1.3h10.57v1.71zm-1.71 19.69h1.71v-8.07l6.63-9.9H17.4l-5.32 8.07h-1.7v9.9zm-8.86 0h1.71V9.9H1.81v12.8z" />
+							</svg>{" "}
+							Hetzner
+						</span>
+					</div>
+					<div
+						className="flex items-center justify-center md:justify-start [&_svg]:h-6 [&_svg]:w-auto animate-infinite-scroll"
+						aria-hidden="true"
+					>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Vercel</title>
+								<path d="M12 1.5l12 21H0L12 1.5z" />
+							</svg>{" "}
+							Vercel
+						</span>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Railway</title>
+								<path d="M2.762 10.375L0 12l2.762 1.625.5 1.375H0v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H12v-1.5H8.738l.5-1.375L12 12l-2.762-1.625-.5-1.375H12v-1.5H8.738l-1 2.75V9H6.238v1.25l-1-2.75H0v1.5h3.262l-.5 1.375zm18.476 0L18.476 12l2.762 1.625.5 1.375H18.476v1.5h3.262l1-2.75V15h1.5v-1.25l1 2.75H24v-1.5h-3.262l.5-1.375L24 12l-2.762-1.625-.5-1.375H24v-1.5h-3.262l-1 2.75V9h-1.5v1.25l-1-2.75H18.476v1.5h3.262l-.5 1.375z" />
+							</svg>{" "}
+							Railway
+						</span>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Cloudflare</title>
+								<path d="M19.342 8.786c.182-.62.274-1.26.274-1.91 0-3.32-2.68-6.01-5.99-6.01-2.42 0-4.5.8-5.36 2.05-.62-.48-1.37-.77-2.19-.77-2.31 0-4.18 1.88-4.18 4.19 0 .46.07.9.2 1.32-.48.62-.77 1.36-.77 2.18 0 2.31 1.87 4.18 4.18 4.18.9 0 1.73-.28 2.42-.76.62.48 1.36.76 2.18.76 2.31 0 4.18-1.87 4.18-4.18 0-.9-.28-1.73-.76-2.42.5-.63.78-1.4.78-2.23M12 14.49c-2.31 0-4.18-1.88-4.18-4.19S9.69 6.11 12 6.11s4.18 1.88 4.18 4.19-1.87 4.19-4.18 4.19m6.89-2.05h.69v-.68h-.69v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68H13.8v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68h-.68v.68m-1.37 0h.68v-.68h-.68v.68m-1.36 0h.68v-.68H7.32v.68M6.63 10.3h.69v.68h-.69v-.68m1.37 0h.68v.68h-.68v-.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-.68v.68m1.37 0h.68v.68h-.68v.68m1.36 0h.68v.68h-1.37v.68" />
+							</svg>{" "}
+							Cloudflare
+						</span>
+						<span className="mx-6 flex items-center gap-2 text-2xl font-medium" style={{ color: 'rgba(160, 160, 160, 0.7)' }}>
+							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="fill-current">
+								<title>Hetzner</title>
+								<path d="M12.38 3.01H1.81V1.3h10.57v1.71zm-1.71 19.69h1.71v-8.07l6.63-9.9H17.4l-5.32 8.07h-1.7v9.9zm-8.86 0h1.71V9.9H1.81v12.8z" />
+							</svg>{" "}
+							Hetzner
+						</span>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/app/(v2)/(marketing)/(index)/sections/SolutionSection.tsx b/website/src/app/(v2)/(marketing)/(index)/sections/SolutionSection.tsx
new file mode 100644
index 0000000000..184933accb
--- /dev/null
+++ b/website/src/app/(v2)/(marketing)/(index)/sections/SolutionSection.tsx
@@ -0,0 +1,345 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function SolutionSection() {
+	useEffect(() => {
+		// Sticky code highlighting with scroll-based step animations
+		const codeSteps = document.querySelectorAll<HTMLDivElement>(".code-highlight-step");
+		if (codeSteps.length === 0) return;
+
+		const sectionTrigger = document.querySelector<HTMLDivElement>(".section-scale-trigger");
+		const codeBox = document.querySelector<HTMLDivElement>(".code-box-container");
+		const codePre = document.querySelector<HTMLElement>(".code-content pre");
+		const sectionHeader = document.querySelector<HTMLHeadingElement>(".section-header");
+		const codeRefs = new Map(
+			Array.from(document.querySelectorAll<HTMLElement>(".code-highlight-ref")).map((el) => [el.id, el])
+		);
+		const allHighlightRefs = document.querySelectorAll<HTMLElement>(".code-highlight-ref");
+		let activeCodeRef: HTMLElement | null = null;
+		let activeStep: HTMLElement | null = null;
+
+		// Track state
+		let isInExpandedZone = false; // Are we in the zone where box should be 1.2?
+		let currentActiveStepIndex = -1; // Which step is currently active
+
+		// Helper function to apply scale
+		const applyScale = (shouldExpand: boolean) => {
+			if (!codeBox) return;
+
+			if (shouldExpand) {
+				codeBox.style.transform = "scale(1.20)";
+				codeBox.style.transition = "transform 0.5s ease-in-out";
+
+				if (codePre) {
+					codePre.style.transform = "scale(0.85)";
+					codePre.style.transformOrigin = "0 0";
+					codePre.style.transition = "transform 0.5s ease-in-out";
+				}
+
+				allHighlightRefs.forEach((ref) => {
+					ref.style.marginLeft = "-1.8rem";
+					ref.style.marginRight = "0";
+					ref.style.paddingLeft = "2.5rem";
+					ref.style.paddingRight = "2.5rem";
+					ref.style.width = "calc((100% / 0.85) + 1.8rem + 1.5rem + 0.235rem)";
+					ref.style.transition = "margin 0.5s ease-in-out, padding 0.5s ease-in-out, width 0.5s ease-in-out";
+				});
+
+				if (sectionHeader) {
+					sectionHeader.style.marginBottom = "4.8rem"; // 4rem * 1.2 to maintain constant visual spacing
+					sectionHeader.style.transition = "margin-bottom 0.5s ease-in-out";
+				}
+			} else {
+				codeBox.style.transform = "scale(1)";
+				codeBox.style.transition = "transform 0.5s ease-in-out";
+
+				if (codePre) {
+					codePre.style.transform = "scale(1)";
+					codePre.style.transformOrigin = "";
+					codePre.style.transition = "transform 0.5s ease-in-out";
+				}
+
+				allHighlightRefs.forEach((ref) => {
+					ref.style.marginLeft = "";
+					ref.style.marginRight = "";
+					ref.style.paddingLeft = "";
+					ref.style.paddingRight = "";
+					ref.style.width = "";
+					ref.style.transition = "margin 0.5s ease-in-out, padding 0.5s ease-in-out, width 0.5s ease-in-out";
+				});
+
+				if (sectionHeader) {
+					sectionHeader.style.marginBottom = "";
+					sectionHeader.style.transition = "margin-bottom 0.5s ease-in-out";
+				}
+			}
+		};
+
+		// Helper to determine if box should be expanded
+		const updateScale = () => {
+			// Expand if: we're in the expanded zone AND active step is 0-3
+			const shouldExpand = isInExpandedZone && currentActiveStepIndex >= 0 && currentActiveStepIndex <= 3;
+			applyScale(shouldExpand);
+		};
+
+		// Observer for the section trigger - determines if we're in the "expanded zone"
+		const triggerObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					isInExpandedZone = entry.isIntersecting;
+					updateScale();
+				});
+			},
+			{
+				rootMargin: "-42% 0px -42% 0px",
+				threshold: 0,
+			}
+		);
+
+		// Observer for steps - determines which step is active
+		const stepObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					const stepEl = entry.target as HTMLElement;
+					const stepIndex = Array.from(codeSteps).indexOf(stepEl as HTMLDivElement);
+					const targetId = stepEl.dataset.targetCode;
+					const codeEl = codeRefs.get(targetId || "");
+					const isLastStep = stepIndex === codeSteps.length - 1;
+
+					if (entry.isIntersecting) {
+						// This step is now active
+						currentActiveStepIndex = stepIndex;
+
+						// Hide all other steps
+						codeSteps.forEach((step) => {
+							if (step !== stepEl) {
+								const rect = step.getBoundingClientRect();
+								const isAbove = rect.top < window.innerHeight / 2;
+								step.style.opacity = "0";
+								step.style.transform = isAbove
+									? "translateY(-30px) scale(0.95)"
+									: "translateY(30px) scale(0.95)";
+							}
+						});
+
+						// Activate code highlighting
+						if (activeCodeRef && activeCodeRef !== codeEl) {
+							activeCodeRef.classList.remove("is-active");
+						}
+						if (codeEl) {
+							codeEl.classList.add("is-active");
+							activeCodeRef = codeEl;
+						}
+
+						// Show step
+						stepEl.style.opacity = "1";
+						stepEl.style.transform = "translateY(0) scale(1)";
+						activeStep = stepEl;
+
+						// Update scale based on new active step
+						updateScale();
+					} else {
+						// Special handling for last step
+						if (isLastStep) {
+							const rect = stepEl.getBoundingClientRect();
+							const hasScrolledPast = rect.top < window.innerHeight / 2;
+							if (hasScrolledPast) {
+								currentActiveStepIndex = stepIndex;
+								stepEl.style.opacity = "1";
+								stepEl.style.transform = "translateY(0) scale(1)";
+								if (codeEl && !codeEl.classList.contains("is-active")) {
+									if (activeCodeRef) activeCodeRef.classList.remove("is-active");
+									codeEl.classList.add("is-active");
+									activeCodeRef = codeEl;
+								}
+								activeStep = stepEl;
+								updateScale();
+								return;
+							}
+						}
+
+						// Hide step
+						const rect = stepEl.getBoundingClientRect();
+						const isAbove = rect.top < window.innerHeight / 2;
+						stepEl.style.opacity = "0";
+						stepEl.style.transform = isAbove
+							? "translateY(-30px) scale(0.95)"
+							: "translateY(30px) scale(0.95)";
+					}
+				});
+			},
+			{
+				rootMargin: "-42% 0px -42% 0px",
+				threshold: 0,
+			}
+		);
+
+		// Observe the trigger element
+		if (sectionTrigger) {
+			triggerObserver.observe(sectionTrigger);
+		}
+
+		// Observe all steps
+		codeSteps.forEach((step) => {
+			step.style.transition = "opacity 0.35s ease-in-out, transform 0.35s ease-in-out";
+			stepObserver.observe(step);
+		});
+
+		return () => {
+			if (sectionTrigger) {
+				triggerObserver.unobserve(sectionTrigger);
+			}
+			codeSteps.forEach((step) => stepObserver.unobserve(step));
+		};
+	}, []);
+
+	return (
+		<section className="relative pt-48 md:pt-64">
+			{/* Centered Container */}
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				{/* Header */}
+				<h2 className="section-header text-center font-heading text-4xl md:text-5xl font-bold tracking-tighter text-text-primary mb-16">
+					Stop Writing Glue Code.
+				</h2>
+
+				{/* Content Grid */}
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16">
+					{/* Left Side: Sticky Code */}
+					<div>
+						<div className="sticky top-32 md:top-40 z-10">
+							<div className="code-box-container flex-none rounded-xl border border-border bg-black/50" style={{ transformOrigin: "center center" }}>
+								<div className="flex items-center justify-between border-b border-border px-4 py-3">
+									<span className="text-sm font-medium text-text-primary">ai-agent.ts</span>
+									<span className="text-sm text-text-secondary font-mono">actor.ts</span>
+								</div>
+								<div className="code-content p-6 font-mono text-sm overflow-x-auto overflow-y-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" style={{ transformOrigin: "center center" }}>
+								<pre>
+									<code>
+										<span className="code-comment">// Define your actor</span>
+										{"\n"}
+										<span className="code-keyword">export const</span> aiAgent ={" "}
+										<span className="code-function">actor</span>({"{"}
+										{"\n"}
+										<span className="code-highlight-ref" id="code-ref-1">
+											{"  "}
+											<span className="code-comment">// Persistent state that survives restarts</span>
+											{"\n"}
+											{"  "}
+											<span className="code-function">state</span>: {"{"}
+											{"\n"}
+											{"    "}messages: [] <span className="code-keyword">as</span> Message[],
+											{"\n"}
+											{"  "}{"},"}
+										</span>
+										{"\n"}
+										<span className="code-highlight-ref" id="code-ref-2">
+											{"  "}actions: {"{"}
+											{"\n"}
+											{"    "}
+											<span className="code-comment">// Call functions from clients</span>
+											{"\n"}
+											{"    "}sendMessage: <span className="code-keyword">async</span> (c, userMessage:{" "}
+											<span className="code-string">string</span>) ={">"} {"{"}
+										</span>
+										{"\n"}
+										{"      "}
+										<span className="code-keyword">const</span> userMsg = {"{"} role:{" "}
+										<span className="code-string">"user"</span>, content: userMessage {"}"};
+										{"\n"}
+										{"      "}
+										{"\n"}
+										<span className="code-highlight-ref" id="code-ref-3">
+											{"      "}
+											<span className="code-comment">// State changes are automatically persisted</span>
+											{"\n"}
+											{"      "}
+											<span className="text-accent font-bold">c.state</span>.messages.push(userMsg);
+											{"\n"}
+											{"      "}
+											<span className="code-keyword">const</span> assistantMsg ={" "}
+											<span className="code-keyword">await</span>{" "}
+											<span className="code-function">getAIReply</span>(
+											<span className="text-accent font-bold">c.state</span>.messages);
+											{"\n"}
+											{"      "}
+											<span className="text-accent font-bold">c.state</span>.messages.push(assistantMsg);
+										</span>
+										{"\n"}
+										<span className="code-highlight-ref" id="code-ref-4">
+											{"      "}
+											<span className="code-comment">// Send events to all connected clients</span>
+											{"\n"}
+											{"      "}c.<span className="code-function">broadcast</span>(
+											<span className="code-string">"messageReceived"</span>, assistantMsg);
+											{"\n"}
+											{"      "}
+											<span className="code-keyword">return</span> assistantMsg;
+										</span>
+										{"\n"}
+										{"    "}{"},"}
+										{"\n"}
+										{"  "}{"},"}
+										{"\n"}
+										{"}"});
+									</code>
+								</pre>
+							</div>
+						</div>
+					</div>
+					</div>
+
+					{/* Right Side: The Explanation (Scroll-triggers) */}
+					<div className="mt-8 md:mt-0">
+						<div className="flex flex-col items-center relative">
+							{/* Invisible trigger element - spans from before step 1 through step 4 */}
+							{/* This keeps isInExpandedZone true throughout steps 1-4 */}
+							<div className="section-scale-trigger absolute top-0 left-0 right-0" style={{ height: "calc(10vh + 20vh + 20vh + 20vh + 40vh)", pointerEvents: "none" }}></div>
+
+							<div className="h-[10vh]"></div>
+							<div className="code-highlight-step text-center" data-target-code="code-ref-1">
+								<h3 className="font-heading text-xl font-bold text-text-primary">1. Define Your State</h3>
+								<p className="mt-2 text-text-secondary max-w-md mx-auto">
+									Declare your state in a simple object. Rivet handles persistence, replication, and storage for you.
+									It's just there.
+								</p>
+							</div>
+
+							<div className="h-[20vh]"></div>
+							<div className="code-highlight-step text-center" data-target-code="code-ref-2">
+								<h3 className="font-heading text-xl font-bold text-text-primary">2. Add Your Actions</h3>
+								<p className="mt-2 text-text-secondary max-w-md mx-auto">
+									Write functions that clients can call. These are your entrypoints, just like a serverless function or
+									API route.
+								</p>
+							</div>
+
+							<div className="h-[20vh]"></div>
+							<div className="code-highlight-step text-center" data-target-code="code-ref-3">
+								<h3 className="font-heading text-xl font-bold text-text-primary">3. Mutate State In-Memory</h3>
+								<p className="mt-2 text-text-secondary max-w-md mx-auto">
+									Just modify{" "}
+									<code className="font-mono text-sm text-accent bg-border rounded px-1 py-0.5">c.state</code>. Reads
+									and writes are instant. No database round-trips, no `await`.
+								</p>
+							</div>
+
+							<div className="h-[20vh]"></div>
+							<div className="code-highlight-step text-center" data-target-code="code-ref-4">
+								<h3 className="font-heading text-xl font-bold text-text-primary">4. Go Realtime, Natively</h3>
+								<p className="mt-2 text-text-secondary max-w-md mx-auto">
+									Use{" "}
+									<code className="font-mono text-sm text-accent bg-border rounded px-1 py-0.5">c.broadcast</code> to
+									send events. No external pub/sub or WebSocket server needed. It's built-in.
+								</p>
+							</div>
+
+							{/* Add extra space at the end */}
+							<div className="h-[10vh]"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/app/(v2)/(marketing)/pricing/PricingPageClient.tsx b/website/src/app/(v2)/(marketing)/pricing/PricingPageClient.tsx
index 1c38c95e5d..8978da3c41 100644
--- a/website/src/app/(v2)/(marketing)/pricing/PricingPageClient.tsx
+++ b/website/src/app/(v2)/(marketing)/pricing/PricingPageClient.tsx
@@ -6,6 +6,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import { Icon, faArrowRight } from "@rivet-gg/icons";
 
+
 const tiers = [
 	{
 		name: "Free",
@@ -490,27 +491,27 @@ export default function PricingPageClient() {
 	return (
 		<main className="min-h-screen w-full max-w-[1500px] mx-auto md:px-8">
 			<div className="relative isolate overflow-hidden pb-8 sm:pb-10 pt-48">
-				<div className="mx-auto max-w-[1200px] px-6 lg:px-8">
-					<div className="text-center">
-						<h1 className="text-6xl font-normal text-white leading-[1.1] tracking-normal">
-							Rivet {activeTab === "cloud" ? "Cloud Pricing" : "Self-Host"}
-						</h1>
-						<p className="mt-6 max-w-2xl mx-auto text-xl leading-[1.2] tracking-tight font-extralight text-white/60">
-							{activeTab === "cloud" 
-								? "Start with free and scale as you grow."
-								: "Deploy Rivet on your own infrastructure."
-							}
-						</p>
-						<div className="mt-8">
-							<Toggle
-								options={toggleOptions}
-								activeValue={activeTab}
-								onChange={setActiveTab}
-							/>
+					<div className="mx-auto max-w-[1200px] px-6 lg:px-8">
+						<div className="text-center">
+							<h1 className="font-heading text-5xl md:text-6xl lg:text-7xl font-bold tracking-tighter" style={{ color: '#FAFAFA' }}>
+								Rivet {activeTab === "cloud" ? "Cloud Pricing" : "Self-Host"}
+							</h1>
+							<p className="mt-6 max-w-2xl mx-auto text-lg md:text-xl leading-[1.2]" style={{ color: '#A0A0A0' }}>
+								{activeTab === "cloud" 
+									? "Start with free and scale as you grow."
+									: "Deploy Rivet on your own infrastructure."
+								}
+							</p>
+							<div className="mt-8">
+								<Toggle
+									options={toggleOptions}
+									activeValue={activeTab}
+									onChange={setActiveTab}
+								/>
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
 
 			{activeTab === "cloud" ? (
 				<>
@@ -519,7 +520,7 @@ export default function PricingPageClient() {
 						<UsagePricingTable />
 					</div>
 
-					<div className="mx-auto max-w-2xl px-6 pt-16 sm:pt-24 lg:max-w-7xl lg:px-8 pb-24">
+					<div className="relative mx-auto max-w-2xl px-6 pt-16 sm:pt-24 lg:max-w-7xl lg:px-8 pb-24">
 						<PricingTable />
 						<MobilePricingTabs />
 					</div>
diff --git a/website/src/app/(v2)/[section]/[[...page]]/layout.tsx b/website/src/app/(v2)/[section]/[[...page]]/layout.tsx
index 7075af48b8..d93586f18d 100644
--- a/website/src/app/(v2)/[section]/[[...page]]/layout.tsx
+++ b/website/src/app/(v2)/[section]/[[...page]]/layout.tsx
@@ -56,7 +56,7 @@ export default function Layout({ params: { section, page }, children }) {
 					) : null
 				}
 			/>
-			<div className="w-full">
+			<div className="w-full relative z-10">
 				<div
 					className="md:grid-cols-docs-no-sidebar lg:grid-cols-docs mx-auto flex w-full flex-col justify-center md:grid min-h-content"
 					style={{ "--header-height": "6.5rem" } as CSSProperties}
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index 99bfec868a..8dc64bc5aa 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -46,6 +46,13 @@ export default function Layout({ children }) {
 					data-key="9b9IZaKPAs/KhRrWrBjsrw"
 					strategy="beforeInteractive"
 				/>
+				
+				{/* Fonts for landing page */}
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+				<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+				<link href="https://api.fontshare.com/v2/css?f[]=satoshi@700,900&display=swap" rel="stylesheet" />
+				<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet" />
 
 				<link
 					rel="apple-touch-icon"
diff --git a/website/src/components/ScrollObserver.tsx b/website/src/components/ScrollObserver.tsx
new file mode 100644
index 0000000000..b669f7f63b
--- /dev/null
+++ b/website/src/components/ScrollObserver.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function ScrollObserver({ children }: { children: React.ReactNode }) {
+	useEffect(() => {
+		const scrollElements = document.querySelectorAll(".animate-on-scroll");
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						entry.target.classList.add("is-visible");
+						observer.unobserve(entry.target);
+					}
+				});
+			},
+			{ threshold: 0.1 }
+		);
+
+		scrollElements.forEach((el) => observer.observe(el));
+
+		return () => {
+			scrollElements.forEach((el) => observer.unobserve(el));
+		};
+	}, []);
+
+	return <>{children}</>;
+}
diff --git a/website/src/components/v2/LandingHeader.tsx b/website/src/components/v2/LandingHeader.tsx
new file mode 100644
index 0000000000..c9afc68fe3
--- /dev/null
+++ b/website/src/components/v2/LandingHeader.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+export function LandingHeader() {
+	const [isScrolled, setIsScrolled] = useState(false);
+
+	useEffect(() => {
+		const handleScroll = () => {
+			setIsScrolled(window.scrollY > 50);
+		};
+
+		window.addEventListener("scroll", handleScroll);
+		handleScroll();
+
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+
+	return (
+		<header
+			id="header"
+			className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+			style={{
+				backgroundColor: isScrolled ? 'rgba(10, 10, 10, 0.8)' : 'transparent',
+				backdropFilter: isScrolled ? 'blur(16px)' : 'none',
+				borderBottom: isScrolled ? '1px solid #252525' : 'none'
+			}}
+		>
+			<div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+				<div className="flex h-20 items-center justify-between">
+					<Link href="/" className="flex items-center gap-2">
+						<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ color: '#FF4500' }}>
+							<path d="M4 4H20V12H4V4Z" fill="currentColor" />
+							<path d="M4 14H10V20H4V14Z" fill="currentColor" />
+							<path d="M14 14H20V20H14V14Z" fill="currentColor" />
+						</svg>
+						<span className="font-heading text-xl font-bold" style={{ color: '#FAFAFA' }}>Rivet</span>
+					</Link>
+					<nav className="hidden md:flex items-center gap-6">
+						<Link
+							href="/docs"
+							className="text-sm font-medium transition-colors"
+							style={{ color: '#A0A0A0' }}
+						>
+							Docs
+						</Link>
+						<Link
+							href="/blog"
+							className="text-sm font-medium transition-colors"
+							style={{ color: '#A0A0A0' }}
+						>
+							Blog
+						</Link>
+						<Link
+							href="https://github.com/rivet-gg/rivet"
+							className="text-sm font-medium transition-colors"
+							style={{ color: '#A0A0A0' }}
+						>
+							GitHub →
+						</Link>
+						<Link
+							href="/docs/quickstart/"
+							className="px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200 hover:bg-orange-600"
+							style={{ backgroundColor: '#FF4500' }}
+						>
+							Get Started
+						</Link>
+					</nav>
+					<div className="md:hidden">
+						<button style={{ color: '#A0A0A0' }}>
+							<svg
+								className="h-6 w-6"
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								strokeWidth="1.5"
+								stroke="currentColor"
+							>
+								<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+							</svg>
+						</button>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
diff --git a/website/src/styles/main.css b/website/src/styles/main.css
index 64f523f846..4cd60ca1da 100644
--- a/website/src/styles/main.css
+++ b/website/src/styles/main.css
@@ -65,13 +65,235 @@
     content: counter(step);
   }
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .scrollbar-hide {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	.scrollbar-hide::-webkit-scrollbar {
+		display: none;
+	}
+	/* Hide scrollbar for IE, Edge and Firefox */
+	.scrollbar-hide {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	/* Landing Page Styles */
+	/* Hide scrollbar */
+	.horizontal-scroller::-webkit-scrollbar {
+		display: none;
+	}
+	.horizontal-scroller {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	/* Actor Visualizer */
+	.actor-visualizer {
+		position: relative;
+		width: 280px;
+		height: 280px;
+		margin: 4rem auto 0 auto;
+		transition: transform 0.2s ease-out;
+	}
+
+	.actor-core {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 80px;
+		height: 80px;
+		border-radius: 50%;
+		background: #ff4500;
+		transform: translate(-50%, -50%);
+		box-shadow: 0 0 40px 10px rgba(255, 69, 0, 0.4);
+		animation: pulse-slow 2.5s infinite alternate;
+	}
+
+	.actor-client-orbit {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		animation: infinite-scroll 20s linear infinite;
+	}
+
+	.actor-client-orbit:nth-child(2) {
+		animation-duration: 30s;
+	}
+	.actor-client-orbit:nth-child(3) {
+		animation-duration: 25s;
+		animation-direction: reverse;
+	}
+
+	.actor-client {
+		position: absolute;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: #a0a0a0;
+	}
+
+	.actor-client::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 1px;
+		height: 100px;
+		background: #252525;
+		transform-origin: top left;
+		z-index: -1;
+	}
+
+	/* Client positions */
+	.client-1 {
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.client-1::before {
+		transform: translate(0, 0) rotate(180deg) scaleY(1.3);
+	}
+
+	.client-2 {
+		top: 50%;
+		right: 0;
+		transform: translateY(-50%);
+	}
+	.client-2::before {
+		transform: translate(0, 0) rotate(90deg) scaleY(1.3);
+	}
+
+	.client-3 {
+		bottom: 10%;
+		left: 15%;
+	}
+	.client-3::before {
+		transform: translate(0, 0) rotate(-40deg) scaleY(1);
+	}
+
+	.client-4 {
+		top: 20%;
+		right: 10%;
+	}
+	.client-4::before {
+		transform: translate(0, 0) rotate(60deg) scaleY(0.9);
+	}
+
+	/* Bento glow effect */
+	.bento-box {
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+	}
+
+	.bento-box:hover {
+		border-color: #444;
+		transform: scale(1.02);
+	}
+
+	.bento-box::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: radial-gradient(
+			circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+			rgba(255, 255, 255, 0.08),
+			transparent 40%
+		);
+		opacity: 0;
+		transition: opacity 0.3s ease;
+		pointer-events: none;
+	}
+
+	.bento-box:hover::before {
+		opacity: 1;
+	}
+
+	/* Scroll-triggered animations */
+	.animate-on-scroll {
+		opacity: 0;
+		transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+		transition-delay: var(--scroll-delay, 0s);
+		will-change: opacity, transform;
+	}
+
+	.animate-fade-up {
+		transform: translateY(30px);
+	}
+
+	.animate-on-scroll.is-visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.delay-100 {
+		--scroll-delay: 100ms;
+	}
+	.delay-200 {
+		--scroll-delay: 200ms;
+	}
+	.delay-300 {
+		--scroll-delay: 300ms;
+	}
+	.delay-400 {
+		--scroll-delay: 400ms;
+	}
+	.delay-500 {
+		--scroll-delay: 500ms;
+	}
+	.delay-600 {
+		--scroll-delay: 600ms;
+	}
+
+	/* Sticky Code Highlighting */
+	#code-block-sticky-wrapper {
+		min-height: 150vh;
+	}
+
+	.code-highlight-ref {
+		position: relative;
+		transition: background-color 0.3s ease-out;
+		display: block;
+		margin: 0 -1.5rem;
+		padding: 0 1.5rem;
+	}
+
+	.code-highlight-ref.is-active {
+		background-color: rgba(255, 69, 0, 0.1);
+	}
+
+	.code-highlight-ref.is-active::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background-color: #ff4500;
+	}
+
+	/* Code syntax colors */
+	.code-comment {
+		color: #737373;
+	}
+
+	.code-keyword {
+		color: #c084fc;
+	}
+
+	.code-function {
+		color: #60a5fa;
+	}
+
+	.code-string {
+		color: #4ade80;
+	}
+
+	/* Fonts */
+	.font-heading {
+		font-family: "Satoshi", sans-serif;
+	}
 }
diff --git a/website/src/styles/v2.css b/website/src/styles/v2.css
index 37643f986c..6b7341e355 100644
--- a/website/src/styles/v2.css
+++ b/website/src/styles/v2.css
@@ -74,3 +74,232 @@
 		scrollbar-width: none; /* Firefox */
 	}
 }
+
+/* Landing Page Styles */
+@layer components {
+	/* Hide scrollbar */
+	.horizontal-scroller::-webkit-scrollbar {
+		display: none;
+	}
+	.horizontal-scroller {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	/* Actor Visualizer */
+	.actor-visualizer {
+		position: relative;
+		width: 280px;
+		height: 280px;
+		margin: 4rem auto 0 auto;
+		transition: transform 0.2s ease-out;
+	}
+
+	.actor-core {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 80px;
+		height: 80px;
+		border-radius: 50%;
+		background: #ff4500;
+		transform: translate(-50%, -50%);
+		box-shadow: 0 0 40px 10px rgba(255, 69, 0, 0.4);
+		animation: pulse-slow 2.5s infinite alternate;
+	}
+
+	.actor-client-orbit {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		animation: infinite-scroll 20s linear infinite;
+	}
+
+	.actor-client-orbit:nth-child(2) {
+		animation-duration: 30s;
+	}
+	.actor-client-orbit:nth-child(3) {
+		animation-duration: 25s;
+		animation-direction: reverse;
+	}
+
+	.actor-client {
+		position: absolute;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: #a0a0a0;
+	}
+
+	.actor-client::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 1px;
+		height: 100px;
+		background: #252525;
+		transform-origin: top left;
+		z-index: -1;
+	}
+
+	/* Client positions */
+	.client-1 {
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.client-1::before {
+		transform: translate(0, 0) rotate(180deg) scaleY(1.3);
+	}
+
+	.client-2 {
+		top: 50%;
+		right: 0;
+		transform: translateY(-50%);
+	}
+	.client-2::before {
+		transform: translate(0, 0) rotate(90deg) scaleY(1.3);
+	}
+
+	.client-3 {
+		bottom: 10%;
+		left: 15%;
+	}
+	.client-3::before {
+		transform: translate(0, 0) rotate(-40deg) scaleY(1);
+	}
+
+	.client-4 {
+		top: 20%;
+		right: 10%;
+	}
+	.client-4::before {
+		transform: translate(0, 0) rotate(60deg) scaleY(0.9);
+	}
+
+	/* Bento glow effect */
+	.bento-box {
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+	}
+
+	.bento-box:hover {
+		border-color: #444;
+		transform: scale(1.02);
+	}
+
+	.bento-box::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: radial-gradient(
+			circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+			rgba(255, 255, 255, 0.08),
+			transparent 40%
+		);
+		opacity: 0;
+		transition: opacity 0.3s ease;
+		pointer-events: none;
+	}
+
+	.bento-box:hover::before {
+		opacity: 1;
+	}
+
+	/* Scroll-triggered animations */
+	.animate-on-scroll {
+		opacity: 0;
+		transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+		transition-delay: var(--scroll-delay, 0s);
+		will-change: opacity, transform;
+	}
+
+	.animate-fade-up {
+		transform: translateY(30px);
+	}
+
+	.animate-on-scroll.is-visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.delay-100 {
+		--scroll-delay: 100ms;
+	}
+	.delay-200 {
+		--scroll-delay: 200ms;
+	}
+	.delay-300 {
+		--scroll-delay: 300ms;
+	}
+	.delay-400 {
+		--scroll-delay: 400ms;
+	}
+	.delay-500 {
+		--scroll-delay: 500ms;
+	}
+	.delay-600 {
+		--scroll-delay: 600ms;
+	}
+
+	/* Sticky Code Highlighting */
+	#code-block-sticky-wrapper {
+		min-height: 150vh;
+	}
+
+	.code-highlight-ref {
+		position: relative;
+		transition: background-color 0.3s ease-out;
+		display: block;
+		margin: 0 -1.5rem;
+		padding: 0 1.5rem;
+	}
+
+	.code-highlight-ref.is-active {
+		background-color: rgba(255, 69, 0, 0.1);
+	}
+
+	.code-highlight-ref.is-active::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background-color: #ff4500;
+	}
+
+	/* Code syntax colors */
+	.code-comment {
+		color: #737373;
+	}
+
+	.code-keyword {
+		color: #c084fc;
+	}
+
+	.code-function {
+		color: #60a5fa;
+	}
+
+	.code-string {
+		color: #4ade80;
+	}
+
+	/* Fonts */
+	.font-heading {
+		font-family: "Satoshi", sans-serif;
+	}
+
+	/* Pause animation on hover */
+	.hover\:pause-animation:hover {
+		animation-play-state: paused;
+	}
+}
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 9e4284dcf7..6e93e0e28c 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -9,8 +9,51 @@ const config = {
 	],
 	theme: {
 		extend: {
+			colors: {
+				'background': '#0A0A0A',
+				'text-primary': '#FAFAFA',
+				'text-secondary': '#A0A0A0',
+				'border': '#252525',
+				'accent': '#FF4500',
+				'code-keyword': '#c084fc',
+				'code-function': '#60a5fa',
+				'code-string': '#4ade80',
+				'code-comment': '#737373',
+			},
 			fontFamily: {
 				sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
+				'heading': ['Satoshi', 'sans-serif'],
+				'mono': ['"JetBrains Mono"', 'monospace'],
+			},
+			animation: {
+				'fade-in-up': 'fade-in-up 0.8s ease-out forwards',
+				'hero-line': 'hero-line 1s cubic-bezier(0.19, 1, 0.22, 1) forwards',
+				'hero-p': 'hero-p 0.8s ease-out 0.6s forwards',
+				'hero-cta': 'hero-p 0.8s ease-out 0.8s forwards',
+				'hero-visual': 'hero-p 0.8s ease-out 1s forwards',
+				'infinite-scroll': 'infinite-scroll 25s linear infinite',
+				'pulse-slow': 'pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+			},
+			keyframes: {
+				'fade-in-up': {
+					'from': { opacity: '0', transform: 'translateY(24px)' },
+					'to': { opacity: '1', transform: 'translateY(0)' },
+				},
+				'hero-line': {
+					'0%': { opacity: '0', transform: 'translateY(100%) skewY(6deg)' },
+					'100%': { opacity: '1', transform: 'translateY(0) skewY(0deg)' },
+				},
+				'hero-p': {
+					'from': { opacity: '0', transform: 'translateY(20px)' },
+					'to': { opacity: '1', transform: 'translateY(0)' },
+				},
+				'infinite-scroll': {
+					'from': { transform: 'translateX(0)' },
+					'to': { transform: 'translateX(-50%)' },
+				},
+				'pulse-slow': {
+					'50%': { opacity: '.5' },
+				},
 			},
 			gridTemplateColumns: {
 				docs: "20rem 1fr",
diff --git a/website/tailwind.v2.config.js b/website/tailwind.v2.config.js
index 417af3b0a7..21fe84e95f 100644
--- a/website/tailwind.v2.config.js
+++ b/website/tailwind.v2.config.js
@@ -7,6 +7,52 @@ module.exports = {
 	],
 	theme: {
 		extend: {
+			colors: {
+				'background': '#0A0A0A',
+				'text-primary': '#FAFAFA',
+				'text-secondary': '#A0A0A0',
+				'border': '#252525',
+				'accent': '#FF4500',
+				'code-keyword': '#c084fc',
+				'code-function': '#60a5fa',
+				'code-string': '#4ade80',
+				'code-comment': '#737373',
+			},
+			fontFamily: {
+				'sans': ['Inter', 'sans-serif'],
+				'heading': ['Satoshi', 'sans-serif'],
+				'mono': ['"JetBrains Mono"', 'monospace'],
+			},
+			animation: {
+				'fade-in-up': 'fade-in-up 0.8s ease-out forwards',
+				'hero-line': 'hero-line 1s cubic-bezier(0.19, 1, 0.22, 1) forwards',
+				'hero-p': 'hero-p 0.8s ease-out 0.6s forwards',
+				'hero-cta': 'hero-p 0.8s ease-out 0.8s forwards',
+				'hero-visual': 'hero-p 0.8s ease-out 1s forwards',
+				'infinite-scroll': 'infinite-scroll 25s linear infinite',
+				'pulse-slow': 'pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+			},
+			keyframes: {
+				'fade-in-up': {
+					'from': { opacity: '0', transform: 'translateY(24px)' },
+					'to': { opacity: '1', transform: 'translateY(0)' },
+				},
+				'hero-line': {
+					'0%': { opacity: '0', transform: 'translateY(100%) skewY(6deg)' },
+					'100%': { opacity: '1', transform: 'translateY(0) skewY(0deg)' },
+				},
+				'hero-p': {
+					'from': { opacity: '0', transform: 'translateY(20px)' },
+					'to': { opacity: '1', transform: 'translateY(0)' },
+				},
+				'infinite-scroll': {
+					'from': { transform: 'translateX(0)' },
+					'to': { transform: 'translateX(-100%)' },
+				},
+				'pulse-slow': {
+					'50%': { opacity: '.5' },
+				},
+			},
 			gridTemplateColumns: {
 				docs: "minmax(0, 20rem) 65ch minmax(0, 20rem)",
 			},