diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx
index 6fc4250..07390ec 100644
--- a/apps/web/src/app/(home)/_components/CodeContainer.tsx
+++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx
@@ -36,9 +36,9 @@ const CodeContainer = () => {
 	}, [step]);
 
 	const commands = {
-		npm: "npx create-better-t-stack@latest my-app",
-		pnpm: "pnpm create better-t-stack@latest my-app",
-		bun: "bun create better-t-stack@latest my-app",
+		npm: "npx create-better-t-stack@latest",
+		pnpm: "pnpm create better-t-stack@latest",
+		bun: "bun create better-t-stack@latest",
 	};
 
 	const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {
diff --git a/apps/web/src/app/(home)/_components/StackArchitech.tsx b/apps/web/src/app/(home)/_components/StackArchitech.tsx
index 4358804..0c66b3e 100644
--- a/apps/web/src/app/(home)/_components/StackArchitech.tsx
+++ b/apps/web/src/app/(home)/_components/StackArchitech.tsx
@@ -484,13 +484,13 @@ const StackArchitect = () => {
 	return (
 		<div className="mx-auto w-full">
 			<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-white">
-				<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
+				<div className="flex items-center justify-between bg-gray-200 px-2 py-2 sm:px-4 dark:bg-gray-800">
 					<div className="flex space-x-2">
 						<div className="h-3 w-3 rounded-full bg-red-500" />
 						<div className="h-3 w-3 rounded-full bg-yellow-500" />
 						<div className="h-3 w-3 rounded-full bg-green-500" />
 					</div>
-					<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
+					<div className="hidden font-mono text-gray-600 text-xs sm:block dark:text-gray-400">
 						Stack Architect Terminal
 					</div>
 					<div className="flex space-x-2">
@@ -526,11 +526,11 @@ const StackArchitect = () => {
 				</div>
 
 				{showHelp && (
-					<div className="border-gray-300 border-b bg-blue-50 p-4 dark:border-gray-700 dark:bg-blue-900/20">
-						<h3 className="mb-2 font-medium text-blue-800 dark:text-blue-300">
+					<div className="border-gray-300 border-b bg-blue-50 p-3 sm:p-4 dark:border-gray-700 dark:bg-blue-900/20">
+						<h3 className="mb-2 font-medium text-blue-800 text-sm dark:text-blue-300">
 							How to Use Stack Architect
 						</h3>
-						<ul className="list-disc space-y-1 pl-5 text-blue-700 text-sm dark:text-blue-400">
+						<ul className="list-disc space-y-1 pl-5 text-blue-700 text-xs dark:text-blue-400">
 							<li>
 								Select your preferred technologies from each category using the
 								tabs below
@@ -550,8 +550,8 @@ const StackArchitect = () => {
 				)}
 
 				{showPresets && (
-					<div className="border-gray-300 border-b bg-amber-50 p-4 dark:border-gray-700 dark:bg-amber-900/20">
-						<h3 className="mb-2 font-medium text-amber-800 dark:text-amber-300">
+					<div className="border-gray-300 border-b bg-amber-50 p-3 sm:p-4 dark:border-gray-700 dark:bg-amber-900/20">
+						<h3 className="mb-2 font-medium text-amber-800 text-sm dark:text-amber-300">
 							Quick Start Presets
 						</h3>
 						<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -562,7 +562,7 @@ const StackArchitect = () => {
 									onClick={() => applyPreset(preset.id)}
 									className="rounded border border-amber-200 p-2 text-left transition-colors hover:bg-amber-100 dark:border-amber-700 dark:hover:bg-amber-800/30"
 								>
-									<div className="font-medium text-amber-700 dark:text-amber-300">
+									<div className="font-medium text-amber-700 text-sm dark:text-amber-300">
 										{preset.name}
 									</div>
 									<div className="text-amber-600 text-xs dark:text-amber-400">
@@ -574,9 +574,9 @@ const StackArchitect = () => {
 					</div>
 				)}
 
-				<div className="p-4 font-mono">
-					<div className="mb-4 flex items-start justify-between">
-						<label className="flex flex-col">
+				<div className="p-3 font-mono sm:p-4">
+					<div className="mb-4 flex flex-col justify-between sm:flex-row sm:items-start">
+						<label className="mb-2 flex flex-col sm:mb-0">
 							<span className="mb-1 text-gray-600 text-xs dark:text-gray-400">
 								Project Name:
 							</span>
@@ -589,7 +589,7 @@ const StackArchitect = () => {
 										setStack((prev) => ({ ...prev, projectName: newValue }));
 										setProjectNameError(validateProjectName(newValue));
 									}}
-									className={`border bg-gray-200 dark:bg-gray-800 ${
+									className={`w-full border bg-gray-200 sm:w-auto dark:bg-gray-800 ${
 										projectNameError
 											? "border-red-500 dark:border-red-500"
 											: "border-gray-300 dark:border-gray-700"
@@ -602,7 +602,7 @@ const StackArchitect = () => {
 							)}
 						</label>
 
-						<div className="flex gap-2">
+						<div className="flex flex-wrap gap-2">
 							<button
 								type="button"
 								onClick={resetStack}
@@ -636,17 +636,17 @@ const StackArchitect = () => {
 							</button>
 						</div>
 					</div>
-					<div className="mb-4">
+					<div className="mb-4 overflow-x-auto">
 						<div className="flex">
 							<span className="mr-2 text-green-600 dark:text-green-400">$</span>
-							<code className="text-gray-700 dark:text-gray-300">
+							<code className="whitespace-pre-wrap break-all text-gray-700 text-xs sm:text-sm dark:text-gray-300">
 								{command}
 							</code>
 						</div>
 					</div>
 					{compatNotes[activeTab] && compatNotes[activeTab].length > 0 && (
 						<div className="mb-4 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
-							<div className="mb-2 flex items-center gap-2 font-medium text-blue-800 text-sm dark:text-blue-300">
+							<div className="mb-2 flex items-center gap-2 font-medium text-blue-800 text-xs sm:text-sm dark:text-blue-300">
 								<InfoIcon className="h-4 w-4" />
 								<span>Compatibility Notes</span>
 							</div>
@@ -658,7 +658,7 @@ const StackArchitect = () => {
 						</div>
 					)}
 					<div className="border-gray-300 border-t pt-4 dark:border-gray-700">
-						<div className="mb-3 flex items-center text-gray-600 dark:text-gray-400">
+						<div className="mb-3 flex items-center text-gray-600 text-sm dark:text-gray-400">
 							<Terminal className="mr-2 h-4 w-4" />
 							<span>
 								Configure{" "}
@@ -749,23 +749,25 @@ const StackArchitect = () => {
 												</div>
 												<div className="flex-grow">
 													<div className="flex items-center">
-														<span className="mr-2">{tech.icon}</span>
+														<span className="mr-2 text-base sm:text-lg">
+															{tech.icon}
+														</span>
 														<span
-															className={
+															className={`${
 																isSelected
 																	? "text-blue-700 dark:text-blue-300"
 																	: "text-gray-700 dark:text-gray-300"
-															}
+															} text-xs sm:text-sm`}
 														>
 															{tech.name}
 														</span>
 													</div>
-													<p className="text-gray-500 text-xs">
+													<p className="hidden text-gray-500 text-xs sm:block">
 														{tech.description}
 													</p>
 												</div>
 												{tech.default && !isSelected && (
-													<span className="ml-2 text-gray-500 text-xs dark:text-gray-600">
+													<span className="ml-2 hidden text-gray-500 text-xs sm:block dark:text-gray-600">
 														Default
 													</span>
 												)}
@@ -936,7 +938,7 @@ const StackArchitect = () => {
 						<button
 							type="button"
 							key={category}
-							className={`whitespace-nowrap px-4 py-2 font-mono text-xs transition-colors${
+							className={`whitespace-nowrap px-2 py-2 font-mono text-[10px] sm:px-4 sm:text-xs transition-colors${
 								activeTab === category
 									? " border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
 									: " text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
diff --git a/apps/web/src/app/(home)/_components/Testimonials.tsx b/apps/web/src/app/(home)/_components/Testimonials.tsx
index ca54003..04b0f69 100644
--- a/apps/web/src/app/(home)/_components/Testimonials.tsx
+++ b/apps/web/src/app/(home)/_components/Testimonials.tsx
@@ -30,7 +30,7 @@ const TWEET_IDS = [
 
 export default function Testimonials() {
 	const [startIndex, setStartIndex] = useState(0);
-	const [tweetsPerPage, setTweetsPerPage] = useState(3);
+	const [tweetsPerPage, setTweetsPerPage] = useState(1);
 
 	useEffect(() => {
 		const handleResize = () => {
@@ -75,8 +75,8 @@ export default function Testimonials() {
 	const currentPage = Math.floor(startIndex / tweetsPerPage) + 1;
 
 	return (
-		<section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
-			<div className="relative space-y-8 text-center">
+		<section className="relative z-10 mx-auto mt-12 w-full max-w-7xl space-y-8 px-4 sm:mt-20 sm:space-y-16 sm:px-6">
+			<div className="relative space-y-4 text-center sm:space-y-8">
 				<motion.div
 					initial={{ opacity: 0, y: 20 }}
 					whileInView={{ opacity: 1, y: 0 }}
@@ -84,7 +84,7 @@ export default function Testimonials() {
 					transition={{ duration: 0.5 }}
 					className="relative"
 				>
-					<h2 className="font-bold font-mono text-2xl tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
+					<h2 className="font-bold font-mono text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
 						<span className="border-blue-500 border-b-2 pb-1 text-gray-900 dark:text-blue-100">
 							Developer Feedback
 						</span>
@@ -97,7 +97,7 @@ export default function Testimonials() {
 					whileInView={{ opacity: 1, y: 0 }}
 					viewport={{ once: true, margin: "-100px" }}
 					transition={{ duration: 0.5, delay: 0.2 }}
-					className="mx-auto max-w-3xl font-mono text-gray-700 text-lg leading-relaxed sm:text-xl dark:text-gray-300"
+					className="mx-auto max-w-3xl font-mono text-base text-gray-700 leading-relaxed sm:text-lg md:text-xl dark:text-gray-300"
 				>
 					what devs are saying about Better-T-Stack
 				</motion.p>
@@ -108,25 +108,26 @@ export default function Testimonials() {
 				whileInView={{ opacity: 1, y: 0 }}
 				viewport={{ once: true, margin: "-100px" }}
 				transition={{ duration: 0.5, delay: 0.3 }}
-				className="relative mt-8"
+				className="relative mt-4 sm:mt-8"
 			>
 				<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 shadow-xl dark:border-gray-700 dark:bg-gray-900">
-					<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
-						<div className="flex space-x-2">
-							<div className="h-3 w-3 rounded-full bg-red-500" />
-							<div className="h-3 w-3 rounded-full bg-yellow-500" />
-							<div className="h-3 w-3 rounded-full bg-green-500" />
+					<div className="flex items-center justify-between bg-gray-200 px-2 py-2 sm:px-4 dark:bg-gray-800">
+						<div className="flex space-x-1 sm:space-x-2">
+							<div className="h-2 w-2 rounded-full bg-red-500 sm:h-3 sm:w-3" />
+							<div className="h-2 w-2 rounded-full bg-yellow-500 sm:h-3 sm:w-3" />
+							<div className="h-2 w-2 rounded-full bg-green-500 sm:h-3 sm:w-3" />
 						</div>
-						<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
-							Developer Feedback Terminal
+						<div className="font-mono text-[10px] text-gray-600 sm:text-xs dark:text-gray-400">
+							Developer Feedback
 						</div>
-						<div className="flex items-center gap-2">
+						<div className="flex items-center gap-1 sm:gap-2">
 							<motion.button
 								whileHover={{ scale: 1.05 }}
 								whileTap={{ scale: 0.95 }}
 								onClick={handlePrev}
-								className="flex h-6 w-6 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+								className="flex h-5 w-5 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 sm:h-6 sm:w-6 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
 								title="Previous testimonials"
+								aria-label="Previous testimonials"
 							>
 								<ChevronLeft className="h-3 w-3" />
 							</motion.button>
@@ -135,8 +136,9 @@ export default function Testimonials() {
 								whileHover={{ scale: 1.05 }}
 								whileTap={{ scale: 0.95 }}
 								onClick={handleNext}
-								className="flex h-6 w-6 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+								className="flex h-5 w-5 items-center justify-center rounded bg-gray-300 text-gray-700 transition-colors hover:bg-gray-400 sm:h-6 sm:w-6 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
 								title="Next testimonials"
+								aria-label="Next testimonials"
 							>
 								<ChevronRight className="h-3 w-3" />
 							</motion.button>
@@ -151,24 +153,24 @@ export default function Testimonials() {
 						</div>
 					</div>
 
-					<div className="flex items-center justify-between border-gray-300 border-t bg-gray-200 p-3 dark:border-gray-700 dark:bg-gray-800">
-						<div className="flex items-center gap-2">
-							<span className="text-gray-700 text-xs dark:text-gray-300">
-								Page {currentPage} of {totalPages}
+					<div className="flex items-center justify-between border-gray-300 border-t bg-gray-200 px-2 py-2 sm:p-3 dark:border-gray-700 dark:bg-gray-800">
+						<div className="flex items-center">
+							<span className="text-[10px] text-gray-700 sm:text-xs dark:text-gray-300">
+								{currentPage}/{totalPages}
 							</span>
 						</div>
 
-						<div className="flex items-center gap-3">
-							<div className="hidden items-center gap-1 sm:flex">
-								{Array.from({ length: totalPages }).map((_, i) => {
-									const isActive = i === currentPage - 1;
+						<div className="flex items-center gap-2 sm:gap-3">
+							<div className="flex items-center gap-1">
+								{Array.from({ length: Math.min(totalPages, 5) }).map((_, i) => {
+									const isActive = i === Math.min(currentPage - 1, 4);
 									return (
 										<button
 											type="button"
-											// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+											// biome-ignore lint/suspicious/noArrayIndexKey: pagination indicator
 											key={i}
 											onClick={() => setStartIndex(i * tweetsPerPage)}
-											className={`h-1.5 w-1.5 rounded-full transition-colors ${
+											className={`h-1 w-1 rounded-full transition-colors sm:h-1.5 sm:w-1.5 ${
 												isActive
 													? "bg-blue-500"
 													: "bg-gray-400 hover:bg-gray-500 dark:bg-gray-600"
@@ -177,6 +179,11 @@ export default function Testimonials() {
 										/>
 									);
 								})}
+								{totalPages > 5 && (
+									<span className="text-[8px] text-gray-500 sm:text-[10px] dark:text-gray-400">
+										...
+									</span>
+								)}
 							</div>
 						</div>
 					</div>
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index d906820..d797cef 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -9,7 +9,7 @@ import Testimonials from "./_components/Testimonials";
 
 export default function HomePage() {
 	return (
-		<main className="flex flex-col items-center justify-start px-2 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-36">
+		<main className="flex flex-col items-center justify-start px-0 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-36">
 			<BackgroundGradients />
 			<div className="relative z-10 mx-auto mb-10 max-w-5xl text-center sm:mb-16">
 				<div className="px-1 sm:px-6 lg:px-8">