diff --git a/apps/website/app/[locale]/layout.tsx b/apps/website/app/[locale]/layout.tsx
index 89e15a9b0..65e4ba499 100644
--- a/apps/website/app/[locale]/layout.tsx
+++ b/apps/website/app/[locale]/layout.tsx
@@ -7,6 +7,8 @@ import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 
 import type { Metadata } from "next";
+import { Header } from "@/components/Header";
+import { Footer } from "@/components/Footer";
 
 export const metadata: Metadata = {
 	title: {
@@ -89,7 +91,9 @@ export default async function RootLayout({
 			<GoogleAnalytics />
 			<body className="flex h-full flex-col">
 				<NextIntlClientProvider messages={messages}>
+					<Header />
 					{children}
+					<Footer />
 				</NextIntlClientProvider>
 			</body>
 		</html>
diff --git a/apps/website/app/[locale]/page.tsx b/apps/website/app/[locale]/page.tsx
index c6c1b2bbf..7630268b0 100644
--- a/apps/website/app/[locale]/page.tsx
+++ b/apps/website/app/[locale]/page.tsx
@@ -1,16 +1,12 @@
 import { CallToAction } from "@/components/CallToAction";
 import { Faqs } from "@/components/Faqs";
-import { Footer } from "@/components/Footer";
-import { Header } from "@/components/Header";
 import { Hero } from "@/components/Hero";
 import { PrimaryFeatures } from "@/components/PrimaryFeatures";
 import { SecondaryFeatures } from "@/components/SecondaryFeatures";
-import { Testimonials } from "../../components/Testimonials";
 
 export default function Home() {
 	return (
 		<div>
-			<Header />
 			<main>
 				<Hero />
 				<PrimaryFeatures />
@@ -18,7 +14,6 @@ export default function Home() {
 				<CallToAction />
 				{/* <Testimonials /> */}
 				<Faqs />
-				<Footer />
 			</main>
 		</div>
 	);
diff --git a/apps/website/app/[locale]/pricing/page.tsx b/apps/website/app/[locale]/pricing/page.tsx
new file mode 100644
index 000000000..8bd1177e4
--- /dev/null
+++ b/apps/website/app/[locale]/pricing/page.tsx
@@ -0,0 +1,9 @@
+import { Pricing } from "@/components/pricing";
+
+export default function Home() {
+	return (
+		<div className="w-full">
+			<Pricing />
+		</div>
+	);
+}
diff --git a/apps/website/app/[locale]/privacy/page.tsx b/apps/website/app/[locale]/privacy/page.tsx
new file mode 100644
index 000000000..a87d611fe
--- /dev/null
+++ b/apps/website/app/[locale]/privacy/page.tsx
@@ -0,0 +1,111 @@
+export default function Home() {
+	return (
+		<div className="flex flex-col gap-4 w-full max-w-4xl mx-auto">
+			<h1 className="text-3xl font-bold text-center mb-6">Privacy</h1>
+
+			<section className="flex flex-col gap-2">
+				<p>
+					At Dokploy, we are committed to protecting your privacy. This Privacy
+					Policy explains how we collect, use, and safeguard your personal
+					information when you use our website and services.
+				</p>
+				<p>
+					By using Dokploy, you agree to the collection and use of information
+					in accordance with this Privacy Policy. If you do not agree with these
+					practices, please do not use our services.
+				</p>
+				<h2 className="text-2xl font-semibold mb-4">
+					1. Information We Collect
+				</h2>
+				<p className="">
+					We only collect limited, non-personal data through Umami Analytics, a
+					privacy-focused analytics tool. No personal identifying information
+					(PII) is collected. The data we collect includes:
+				</p>
+				<ul className="list-disc list-inside mb-4">
+					<li>Website usage statistics (e.g., page views, session duration)</li>
+					<li>Anonymized IP addresses</li>
+					<li>Referring websites</li>
+					<li>Browser and device type</li>
+				</ul>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">
+					2. How We Use the Information
+				</h2>
+				<p className="mb-4">
+					The information we collect is used solely for improving the
+					functionality and user experience of our platform. Specifically, we
+					use it to:
+				</p>
+				<ul className="list-disc list-inside mb-4">
+					<li>Monitor traffic and website performance</li>
+					<li>Optimize the user experience</li>
+					<li>Understand how users interact with our platform</li>
+				</ul>
+				<p>
+					Additionally, we use a single cookie to manage user sessions, which is
+					necessary for the proper functioning of the platform.
+				</p>
+			</section>
+
+			<section className="flex flex-col gap-2">
+				<h2 className="text-2xl font-semibold mb-4">3. Data Security</h2>
+				<p className="">
+					We take reasonable precautions to protect your data. Since we do not
+					collect personal information, the risk of data misuse is minimized.
+					Umami Analytics is privacy-friendly and does not rely on cookies or
+					store PII.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">4. Third-Party Services</h2>
+
+				<p>
+					We do not share your data with any third-party services other than
+					Umami Analytics. We do not sell, trade, or transfer your data to
+					outside parties.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">5. Cookies</h2>
+				<p className="mb-4">
+					Dokploy does not use cookies to track user activity. Umami Analytics
+					is cookie-free and does not require any tracking cookies for its
+					functionality.
+				</p>
+			</section>
+
+			<section className="flex flex-col gap-2">
+				<h2 className="text-2xl font-semibold mb-4">
+					6. Changes to This Privacy Policy
+				</h2>
+				<p className="">
+					We may update this Privacy Policy from time to time. Any changes will
+					be posted on this page, and it is your responsibility to review this
+					policy periodically.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">12. Contact Information</h2>
+				<p className="mb-4">
+					If you have any questions or concerns regarding these Privacy Policy,
+					please contact us at:
+				</p>
+				<p className="mb-4">
+					Email:
+					<a
+						href="mailto:support@dokploy.com"
+						className="text-blue-500 hover:underline"
+					>
+						support@dokploy.com
+					</a>
+				</p>
+			</section>
+		</div>
+	);
+}
diff --git a/apps/website/app/[locale]/terms/page.tsx b/apps/website/app/[locale]/terms/page.tsx
new file mode 100644
index 000000000..ddaa10377
--- /dev/null
+++ b/apps/website/app/[locale]/terms/page.tsx
@@ -0,0 +1,205 @@
+export default function Home() {
+	return (
+		<div className="flex flex-col gap-4 w-full max-w-4xl mx-auto">
+			<h1 className="text-3xl font-bold text-center mb-6">
+				Terms and Conditions
+			</h1>
+
+			<section className="flex flex-col gap-2">
+				<p>
+					Welcome to Dokploy! These Terms and Conditions outline the rules and
+					regulations for the use of Dokploy’s website and services.
+				</p>
+				<p>
+					By accessing or using our services, you agree to be bound by the
+					following terms. If you do not agree with these terms, please do not
+					use our website or services.
+				</p>
+				<h2 className="text-2xl font-semibold mb-4">1. Definitions</h2>
+				<p className="">
+					Website: Refers to the website of Dokploy (
+					<a
+						href="https://dokploy.com"
+						className="text-blue-500 hover:underline"
+					>
+						https://dokploy.com
+					</a>
+					) and its subdomains.
+				</p>
+				<p>
+					Services: The platform and related services offered by Dokploy for
+					deploying and managing applications using Docker and other related
+					tools.
+				</p>
+				<p>User: Any individual or organization using Dokploy.</p>
+				<p>
+					Subscription: The paid plan for using additional features, resources,
+					or server capacity.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">2. Service Description</h2>
+				<p className="mb-4">
+					Dokploy is a platform that allows users to deploy and manage web
+					applications on their own servers using custom builders and Docker
+					technology. Dokploy offers both free and paid services, including
+					subscriptions for adding additional servers, features, or increased
+					capacity.
+				</p>
+			</section>
+
+			<section className="flex flex-col gap-2">
+				<h2 className="text-2xl font-semibold mb-4">
+					3. User Responsibilities
+				</h2>
+				<p className="">
+					Users are responsible for maintaining the security of their accounts,
+					servers, and applications deployed through Dokploy.
+				</p>
+				<p className="">
+					Users must not use the platform for illegal activities, including but
+					not limited to distributing malware, violating intellectual property
+					rights, or engaging in cyberattacks.
+				</p>
+				<p className="">
+					Users must comply with all local, state, and international laws in
+					connection with their use of Dokploy.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">
+					4. Subscription and Payment
+				</h2>
+				<ul className="list-disc list-inside mb-4">
+					<li>
+						By purchasing a subscription, users agree to the pricing and payment
+						terms detailed on the website or via Paddle (our payment processor).
+					</li>
+					<li>
+						Subscriptions renew automatically unless canceled by the user before
+						the renewal date.
+					</li>
+				</ul>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">5. Refund Policy</h2>
+				<p className="mb-4">
+					Due to the nature of our digital services, Dokploy operates on a
+					no-refund policy for any paid subscriptions, except where required by
+					law. We offer a self-hosted version of Dokploy with the same core
+					functionalities, which users can deploy and use without any cost. We
+					recommend users try the self-hosted version to evaluate the platform
+					before committing to a paid subscription.
+				</p>
+			</section>
+
+			<section className="flex flex-col gap-2">
+				<h2 className="text-2xl font-semibold mb-4">
+					6. Limitations of Liability
+				</h2>
+				<p className="">
+					Dokploy is provided "as is" without any warranties, express or
+					implied, including but not limited to the availability, reliability,
+					or accuracy of the service.
+				</p>
+				<p className="">
+					Users are fully responsible for any modifications made to their remote
+					servers or the environment where Dokploy is deployed. Any changes to
+					the server configuration, system settings, security policies, or other
+					environments that deviate from the recommended use of Dokploy may
+					result in compatibility issues, performance degradation, or security
+					vulnerabilities. Additionally, Dokploy may not function properly on
+					unsupported operating systems or environments. We do not guarantee the
+					platform will operate correctly or reliably under modified server
+					conditions or on unsupported systems, and we will not be held liable
+					for any disruptions, malfunctions, or damages resulting from such
+					changes or unsupported configurations.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">
+					7. Service Modifications and Downtime
+				</h2>
+				<p className="mb-4">
+					While we strive to provide uninterrupted service, there may be periods
+					of downtime due to scheduled maintenance or upgrades to our
+					infrastructure, such as server maintenance or system improvements. We
+					will provide notice to users ahead of any planned maintenance.
+				</p>
+			</section>
+
+			<section className="flex flex-col gap-2">
+				<h2 className="text-2xl font-semibold mb-4">
+					8. Intellectual Property
+				</h2>
+				<p className="">
+					Dokploy retains all intellectual property rights to the platform,
+					including code, design, and content.
+				</p>
+				<p className="">
+					Users are granted a limited, non-exclusive, and non-transferable
+					license to use Dokploy in accordance with these terms.
+				</p>
+				<p className="">
+					Users may not modify, reverse-engineer, or distribute any part of the
+					platform without express permission.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">9. Termination</h2>
+				<p className="mb-4">
+					Dokploy reserves the right to suspend or terminate access to the
+					platform for users who violate these terms or engage in harmful
+					behavior.
+				</p>
+				<p className="mb-4">
+					Users may terminate their account at any time by contacting support.
+					Upon termination, access to the platform will be revoked, and any
+					stored data may be permanently deleted.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">10. Changes to Terms</h2>
+				<p className="mb-4">
+					Dokploy reserves the right to update these Terms & Conditions at any
+					time. Changes will be effective immediately upon posting on the
+					website. It is the user's responsibility to review these terms
+					periodically.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">11. Governing Law</h2>
+				<p className="mb-4">
+					These Terms & Conditions are governed by applicable laws based on the
+					user's location. Any disputes arising under these terms will be
+					resolved in accordance with the legal jurisdiction relevant to the
+					user’s location, unless otherwise required by applicable law.
+				</p>
+			</section>
+
+			<section className="">
+				<h2 className="text-2xl font-semibold mb-4">12. Contact Information</h2>
+				<p className="mb-4">
+					If you have any questions or concerns regarding these Terms, you can
+					reach us at:
+				</p>
+				<p className="mb-4">
+					Email:
+					<a
+						href="mailto:support@dokploy.com"
+						className="text-blue-500 hover:underline"
+					>
+						support@dokploy.com
+					</a>
+				</p>
+			</section>
+		</div>
+	);
+}
diff --git a/apps/website/components/pricing.tsx b/apps/website/components/pricing.tsx
new file mode 100644
index 000000000..7526e5be6
--- /dev/null
+++ b/apps/website/components/pricing.tsx
@@ -0,0 +1,310 @@
+"use client";
+import clsx from "clsx";
+
+import { Container } from "./Container";
+import { Button } from "./ui/button";
+import { trackGAEvent } from "./analitycs";
+import { Switch } from "./ui/switch";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+function SwirlyDoodle(props: React.ComponentPropsWithoutRef<"svg">) {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 281 40"
+			preserveAspectRatio="none"
+			{...props}
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M240.172 22.994c-8.007 1.246-15.477 2.23-31.26 4.114-18.506 2.21-26.323 2.977-34.487 3.386-2.971.149-3.727.324-6.566 1.523-15.124 6.388-43.775 9.404-69.425 7.31-26.207-2.14-50.986-7.103-78-15.624C10.912 20.7.988 16.143.734 14.657c-.066-.381.043-.344 1.324.456 10.423 6.506 49.649 16.322 77.8 19.468 23.708 2.65 38.249 2.95 55.821 1.156 9.407-.962 24.451-3.773 25.101-4.692.074-.104.053-.155-.058-.135-1.062.195-13.863-.271-18.848-.687-16.681-1.389-28.722-4.345-38.142-9.364-15.294-8.15-7.298-19.232 14.802-20.514 16.095-.934 32.793 1.517 47.423 6.96 13.524 5.033 17.942 12.326 11.463 18.922l-.859.874.697-.006c2.681-.026 15.304-1.302 29.208-2.953 25.845-3.07 35.659-4.519 54.027-7.978 9.863-1.858 11.021-2.048 13.055-2.145a61.901 61.901 0 0 0 4.506-.417c1.891-.259 2.151-.267 1.543-.047-.402.145-2.33.913-4.285 1.707-4.635 1.882-5.202 2.07-8.736 2.903-3.414.805-19.773 3.797-26.404 4.829Zm40.321-9.93c.1-.066.231-.085.29-.041.059.043-.024.096-.183.119-.177.024-.219-.007-.107-.079ZM172.299 26.22c9.364-6.058 5.161-12.039-12.304-17.51-11.656-3.653-23.145-5.47-35.243-5.576-22.552-.198-33.577 7.462-21.321 14.814 12.012 7.205 32.994 10.557 61.531 9.831 4.563-.116 5.372-.288 7.337-1.559Z"
+			/>
+		</svg>
+	);
+}
+
+function CheckIcon({
+	className,
+	...props
+}: React.ComponentPropsWithoutRef<"svg">) {
+	return (
+		<svg
+			aria-hidden="true"
+			className={clsx(
+				"h-6 w-6 flex-none fill-current stroke-current",
+				className,
+			)}
+			{...props}
+		>
+			<path
+				d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
+				strokeWidth={0}
+			/>
+			<circle
+				cx={12}
+				cy={12}
+				r={8.25}
+				fill="none"
+				strokeWidth={1.5}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+function Plan({
+	name,
+	price,
+	description,
+	href,
+	features,
+	featured = false,
+}: {
+	name: string;
+	price: string;
+	description: string;
+	href: string;
+	features: Array<string>;
+	featured?: boolean;
+}) {
+	const router = useRouter();
+	return (
+		<section
+			className={clsx(
+				"flex flex-col rounded-3xl px-6 sm:px-8",
+				featured ? "order-first bg-black border py-8 lg:order-none" : "lg:py-8",
+			)}
+		>
+			<h3 className="mt-5 font-display text-lg text-white">{name}</h3>
+			<p
+				className={clsx(
+					"mt-2 text-base",
+					featured ? "text-white" : "text-slate-400",
+				)}
+			>
+				{description}
+			</p>
+			<p className="order-first font-display text-5xl font-light tracking-tight text-white">
+				{price}
+			</p>
+			<ul
+				role="list"
+				className={clsx(
+					"order-last mt-10 flex flex-col gap-y-3 text-sm",
+					featured ? "text-white" : "text-slate-200",
+				)}
+			>
+				{features.map((feature) => (
+					<li key={feature} className="flex">
+						<CheckIcon className={featured ? "text-white" : "text-slate-400"} />
+						<span className="ml-4">{feature}</span>
+					</li>
+				))}
+			</ul>
+			<Button
+				onClick={() => {
+					router.push(href);
+					trackGAEvent({
+						action: "Buy Plan Clicked",
+						category: "Pricing",
+						label: `${name} - ${price}`,
+					});
+				}}
+				className="rounded-full mt-8"
+			>
+				Get started
+			</Button>
+			{/* <Button
+				href={href}
+				variant={featured ? "solid" : "outline"}
+				color="white"
+				className="mt-8"
+				aria-label={`Get started with the ${name} plan for ${price}`}
+			>
+				Get started
+			</Button> */}
+		</section>
+	);
+}
+
+export function Pricing() {
+	const [monthly, setMonthly] = useState(false);
+	return (
+		<section
+			id="pricing"
+			aria-label="Pricing"
+			className="bg-black border-t border-border/30 py-20 sm:py-32"
+		>
+			<Container>
+				<div className="text-center">
+					<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+						<span className="relative whitespace-nowrap">
+							<SwirlyDoodle className="absolute left-0 top-1/2 h-[1em] w-full fill-muted-foreground" />
+							<span className="relative"> Simple & Affordable,</span>
+						</span>{" "}
+						Pricing.
+					</h2>
+					<p className="mt-4 text-lg text-muted-foreground">
+						Deploy Smarter, Scale Faster – Without Breaking the Bank
+					</p>
+				</div>
+				<div className="mt-10 flex flex-row gap-x-4 justify-center">
+					<Switch checked={monthly} onCheckedChange={(e) => setMonthly(e)} />
+					{!monthly ? "Monthly" : "Yearly"}
+				</div>
+
+				<div className=" mt-10 mx-auto">
+					<div className="mt-16 grid  md:grid-cols-2  gap-y-10 mx-auto w-full lg:-mx-8 xl:mx-0 xl:gap-x-8">
+						<Plan
+							name="Free"
+							price="$0"
+							description="Perfect for developers who prefer to manage their own servers."
+							href="https://docs.dokploy.com/en/docs/core/get-started/installation#docker"
+							features={[
+								"Unlimited deployments",
+								"Self-hosted on your own infrastructure",
+								"Full access to all deployment features",
+								"Docker Swarm and Docker Compose support",
+								"Community support",
+								"Custom domains and SSL integration",
+								"No feature limitations on the core platform",
+							]}
+						/>
+						<Plan
+							featured
+							name="General"
+							price={!monthly ? "$6.99" : "$5.49"}
+							description="Ideal for indie hackers, freelancers, agencies, and businesses looking for a managed solution."
+							href="/register"
+							features={[
+								"1 free server included (user-provided)",
+								"All self-hosted features without hosting the UI",
+								"Dokploy infrastructure managed by us",
+								"$3.99 per additional server (user-provided)",
+							]}
+						/>
+						{/* <Plan
+							name="Enterprise"
+							price="$39"
+							description="For even the biggest enterprise companies."
+							href="/register"
+							features={[
+								"Send unlimited quotes and invoices",
+								"Connect up to 15 bank accounts",
+								"Track up to 200 expenses per month",
+								"Automated payroll support",
+								"Export up to 25 reports, including TPS",
+							]}
+						/> */}
+					</div>
+				</div>
+			</Container>
+
+			<Faqs />
+		</section>
+	);
+}
+
+const faqs = [
+	[
+		{
+			question: "How does Dokploy's free plan work?",
+			answer:
+				"The free plan allows you to self-host Dokploy on your own infrastructure with unlimited deployments and full access to all features.",
+		},
+		{
+			question: "Do I need to provide my own server for the managed plan?",
+			answer:
+				"Yes, in the managed plan, you provide your own server, and we manage the Dokploy UI infrastructure for you.",
+		},
+		{
+			question: "What happens if I need more than one server?",
+			answer:
+				"Each additional server costs $3.99/month and can be easily added to your account.",
+		},
+	],
+	[
+		{
+			question: "Can I use my custom domain with Dokploy?",
+			answer:
+				"Yes, custom domain support is available on all plans, including the free version.",
+		},
+		{
+			question: "Is there a limit on the number of deployments?",
+			answer:
+				"No, there is no limit on the number of deployments in any of the plans.",
+		},
+		{
+			question: "Do I have to manually configure Traefik?",
+			answer:
+				"Dokploy offers dynamic Traefik configuration out-of-the-box, so no manual setup is needed.",
+		},
+	],
+	[
+		{
+			question: "How do automated backups work?",
+			answer:
+				"Automated backups are included in the managed plan and are limited to database backups only.",
+		},
+		{
+			question: "What kind of support do you offer?",
+			answer:
+				"We offer community support for the free plan and priority support for paid plans.",
+		},
+		{
+			question: "Is Dokploy open-source?",
+			answer:
+				"Yes, Dokploy is fully open-source. You can contribute or modify it as needed for your projects.",
+		},
+	],
+];
+
+export function Faqs() {
+	return (
+		<section
+			id="faqs"
+			aria-labelledby="faq-title"
+			className="relative overflow-hidden bg-black py-20 sm:py-32"
+		>
+			<Container className="relative">
+				<div className="mx-auto max-w-2xl lg:mx-0">
+					<h2
+						id="faq-title"
+						className="font-display text-3xl tracking-tight text-primary sm:text-4xl"
+					>
+						{"Frequently asked questions"}
+					</h2>
+					<p className="mt-4 text-lg tracking-tight text-muted-foreground">
+						If you can’t find what you’re looking for, please submit an issue
+						to:{" "}
+						<Link href={"mailto:support@dokploy.com"} className="text-primary">
+							support@dokploy.com
+						</Link>
+					</p>
+				</div>
+				<ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3">
+					{faqs.map((column, columnIndex) => (
+						<li key={columnIndex}>
+							<ul className="flex flex-col gap-y-8">
+								{column.map((faq, faqIndex) => (
+									<li key={faqIndex}>
+										<h3 className="font-display text-lg leading-7 text-primary">
+											{faq.question}
+										</h3>
+										<p className="mt-4 text-sm text-muted-foreground">
+											{faq.answer}
+										</p>
+									</li>
+								))}
+							</ul>
+						</li>
+					))}
+				</ul>
+			</Container>
+		</section>
+	);
+}
diff --git a/apps/website/components/ui/switch.tsx b/apps/website/components/ui/switch.tsx
new file mode 100644
index 000000000..bc69cf2db
--- /dev/null
+++ b/apps/website/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/apps/website/package.json b/apps/website/package.json
index b9d2f6121..a36e3f968 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -16,6 +16,7 @@
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-switch": "^1.0.3",
 		"@types/node": "20.4.6",
 		"autoprefixer": "^10.4.12",
 		"class-variance-authority": "^0.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9adaaee2f..3aa026c55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -520,6 +520,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.1.0(@types/react@18.3.5)(react@18.2.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.0.3
+        version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@types/node':
         specifier: 20.4.6
         version: 20.4.6
@@ -13017,7 +13020,7 @@ snapshots:
       eslint: 8.45.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.45.0)
       eslint-plugin-react: 7.35.0(eslint@8.45.0)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.45.0)
@@ -13041,7 +13044,7 @@ snapshots:
       enhanced-resolve: 5.17.1
       eslint: 8.45.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.15.0
@@ -13063,7 +13066,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
