diff --git a/.github/workflows/ci-tests.yml b/.github/workflows/ci-tests.yml
index 22030b3..fa12dff 100644
--- a/.github/workflows/ci-tests.yml
+++ b/.github/workflows/ci-tests.yml
@@ -26,3 +26,27 @@ jobs:
 
       - name: Run unit tests
         run: npm run test:run
+
+  e2e-tests:
+    name: Run Playwright e2e tests
+    runs-on: ubuntu-latest
+    needs: unit-tests
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run e2e tests
+        run: npm run test:e2e
+        env:
+          CI: true
diff --git a/app/existing/[repoUrl]/page.tsx b/app/existing/[repoUrl]/page.tsx
index 7c9a7ab..a620ed2 100644
--- a/app/existing/[repoUrl]/page.tsx
+++ b/app/existing/[repoUrl]/page.tsx
@@ -7,13 +7,14 @@ import { absoluteUrl } from "@/lib/site-metadata"
 import type { RepoScanRouteParams } from "@/types/repo-scan"
 
 type RepoScanPageProps = {
-    params: RepoScanRouteParams
+    params: Promise<RepoScanRouteParams>
 }
 
 const toSlug = (repoUrl: string) => repoUrl.replace(/^https:\/\/github.com\//, "")
 
-export function generateMetadata({ params }: RepoScanPageProps): Metadata {
-    const decoded = decodeRepoRouteParam(params.repoUrl)
+export async function generateMetadata({ params }: RepoScanPageProps): Promise<Metadata> {
+    const resolvedParams = await params
+    const decoded = decodeRepoRouteParam(resolvedParams.repoUrl)
     const normalized = decoded ? normalizeGitHubRepoInput(decoded) ?? decoded : null
     const repoSlug = normalized ? toSlug(normalized) : null
     const title = repoSlug ? `Repo scan · ${repoSlug}` : "Repo scan"
@@ -47,8 +48,9 @@ export function generateMetadata({ params }: RepoScanPageProps): Metadata {
     }
 }
 
-export default function RepoScanPage({ params }: RepoScanPageProps) {
-    const decoded = decodeRepoRouteParam(params.repoUrl)
+export default async function RepoScanPage({ params }: RepoScanPageProps) {
+    const resolvedParams = await params
+    const decoded = decodeRepoRouteParam(resolvedParams.repoUrl)
     const normalized = decoded ? normalizeGitHubRepoInput(decoded) ?? decoded : null
 
     return <RepoScanClient initialRepoUrl={normalized ?? decoded ?? null} />
diff --git a/app/existing/[repoUrl]/repo-scan-client.tsx b/app/existing/[repoUrl]/repo-scan-client.tsx
index 649cdf7..726b22b 100644
--- a/app/existing/[repoUrl]/repo-scan-client.tsx
+++ b/app/existing/[repoUrl]/repo-scan-client.tsx
@@ -148,7 +148,10 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
     }, [scanResult])
 
     return (
-        <div className="relative flex min-h-screen flex-col bg-background text-foreground">
+        <div
+            className="relative flex min-h-screen flex-col bg-background text-foreground"
+            data-testid="repo-scan-page"
+        >
             <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background" aria-hidden="true" />
             <header className="relative z-10 flex items-center justify-between px-6 py-6 lg:px-12 lg:py-8">
                 <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
@@ -178,28 +181,42 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
                                 </div>
                             </div>
                         ) : promptVisible ? (
-                            <div className="space-y-4">
+                            <div className="space-y-4" data-testid="repo-scan-prompt">
                                 <h3 className="text-xl font-semibold text-foreground">Scan {repoSlug ?? repoUrlForScan}?</h3>
                                 <p className="text-sm text-muted-foreground">We will detect languages, frameworks, tooling, and testing info.</p>
-                                <Button onClick={handleStartScan} className="w-full sm:w-auto">Yes, scan this repo</Button>
+                                <Button
+                                    onClick={handleStartScan}
+                                    className="w-full sm:w-auto"
+                                    data-testid="repo-scan-confirm-button"
+                                >
+                                    Yes, scan this repo
+                                </Button>
                             </div>
                         ) : isLoading ? (
                             <div className="flex justify-center py-16">
                                 <RepoScanLoader />
                             </div>
                         ) : error ? (
-                            <div className="flex flex-col items-center gap-3 py-10 text-center">
+                            <div
+                                className="flex flex-col items-center gap-3 py-10 text-center"
+                                data-testid="repo-scan-error"
+                            >
                                 <AlertTriangle className="size-8 text-destructive" aria-hidden="true" />
                                 <div>
                                     <p className="text-base font-semibold text-foreground">Unable to scan repository</p>
                                     <p className="mt-1 text-sm text-muted-foreground">{error}</p>
                                 </div>
                                 {canRetry ? (
-                                    <Button onClick={handleRetryScan}>Try again</Button>
+                                    <Button
+                                        onClick={handleRetryScan}
+                                        data-testid="repo-scan-retry-button"
+                                    >
+                                        Try again
+                                    </Button>
                                 ) : null}
                             </div>
                         ) : scanResult ? (
-                            <div className="space-y-8">
+                            <div className="space-y-8" data-testid="repo-scan-results">
                                 <section className="space-y-2">
                                     <h3 className="text-lg font-semibold text-foreground">Detected snapshot</h3>
                                     <p className="text-sm text-muted-foreground">
@@ -291,7 +308,10 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
                                         </div>
                                     </div>
                                 ) : null}
-                                <div className="rounded-2xl border border-border/60 bg-background/70 p-5">
+                                <div
+                                    className="rounded-2xl border border-border/60 bg-background/70 p-5"
+                                    data-testid="repo-scan-raw-json"
+                                >
                                     <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Raw response</h3>
                                     <pre className="mt-3 max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground">
                                         {JSON.stringify(scanResult, null, 2)}
diff --git a/app/existing/existing-repo-entry-client.tsx b/app/existing/existing-repo-entry-client.tsx
index 9aac144..ec785ca 100644
--- a/app/existing/existing-repo-entry-client.tsx
+++ b/app/existing/existing-repo-entry-client.tsx
@@ -34,7 +34,10 @@ export function ExistingRepoEntryClient() {
   }
 
   return (
-    <div className="relative flex min-h-screen flex-col bg-background text-foreground">
+    <div
+      className="relative flex min-h-screen flex-col bg-background text-foreground"
+      data-testid="existing-repo-page"
+    >
       <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background" aria-hidden="true" />
       <header className="relative z-10 flex items-center justify-between px-6 py-6 lg:px-12 lg:py-8">
         <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
@@ -53,7 +56,11 @@ export function ExistingRepoEntryClient() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+            <form
+              className="flex flex-col gap-4"
+              onSubmit={handleSubmit}
+              data-testid="existing-repo-form"
+            >
               <div className="flex flex-col gap-2">
                 <label htmlFor="githubUrl" className="text-sm font-medium text-foreground">
                   GitHub repository URL
@@ -68,17 +75,27 @@ export function ExistingRepoEntryClient() {
                   onChange={(event) => setValue(event.target.value)}
                   aria-describedby={error ? "github-url-error" : undefined}
                   aria-invalid={error ? true : undefined}
+                  data-testid="existing-repo-input"
                 />
                 <p className="text-xs text-muted-foreground">
                   You can also paste an <code>owner/repo</code> slug and we will normalize it for you.
                 </p>
                 {error ? (
-                  <p id="github-url-error" className="text-sm text-destructive">
+                  <p
+                    id="github-url-error"
+                    className="text-sm text-destructive"
+                    data-testid="existing-repo-error"
+                  >
                     {error}
                   </p>
                 ) : null}
               </div>
-              <Button type="submit" disabled={isSubmitting} className="w-full">
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full"
+                data-testid="existing-repo-submit"
+              >
                 {isSubmitting ? "Redirecting…" : "Analyze repository"}
               </Button>
             </form>
diff --git a/app/new/stack/[[...stackSegments]]/page.tsx b/app/new/stack/[[...stackSegments]]/page.tsx
index 935ad4d..bc2155c 100644
--- a/app/new/stack/[[...stackSegments]]/page.tsx
+++ b/app/new/stack/[[...stackSegments]]/page.tsx
@@ -20,7 +20,7 @@ type MetadataProps = {
 }
 
 type PageProps = {
-  params: PageParams
+  params: Promise<PageParams>
 }
 
 export async function generateMetadata({ params }: MetadataProps): Promise<Metadata> {
@@ -92,7 +92,8 @@ export async function generateMetadata({ params }: MetadataProps): Promise<Metad
 }
 
 export default async function StackRoutePage({ params }: PageProps) {
-  const { stackSegments } = params
+  const resolvedParams = await params
+  const { stackSegments } = resolvedParams
   let stackIdFromRoute: string | null = null
   let summaryMode: "default" | "user" | null = null
 
diff --git a/app/new/stack/stack-summary-page.tsx b/app/new/stack/stack-summary-page.tsx
index 803c63f..64f340d 100644
--- a/app/new/stack/stack-summary-page.tsx
+++ b/app/new/stack/stack-summary-page.tsx
@@ -240,7 +240,10 @@ export function StackSummaryPage({ stackId, mode }: StackSummaryPageProps) {
 
   if (isLoading) {
     return (
-      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+      <div
+        className="flex flex-1 items-center justify-center text-sm text-muted-foreground"
+        data-testid="stack-summary-loading"
+      >
         Preparing your summary…
       </div>
     )
@@ -248,7 +251,10 @@ export function StackSummaryPage({ stackId, mode }: StackSummaryPageProps) {
 
   if (errorMessage) {
     return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
+      <div
+        className="flex flex-1 flex-col items-center justify-center gap-4 text-center"
+        data-testid="stack-summary-error"
+      >
         <p className="text-base text-muted-foreground">{errorMessage}</p>
         <Button asChild>
           <Link href={stackId ? `/new/stack/${stackId}` : "/new/stack"}>Back to wizard</Link>
@@ -262,7 +268,10 @@ export function StackSummaryPage({ stackId, mode }: StackSummaryPageProps) {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-5xl flex-col gap-6">
+    <div
+      className="mx-auto flex w-full max-w-5xl flex-col gap-6"
+      data-testid="stack-summary-page"
+    >
       <section className="rounded-3xl border border-border/80 bg-card/95 p-8 shadow-lg">
         <div className="space-y-4">
           <div className="space-y-2">
diff --git a/app/stacks/[stack]/page.tsx b/app/stacks/[stack]/page.tsx
index 3200e91..cd2944c 100644
--- a/app/stacks/[stack]/page.tsx
+++ b/app/stacks/[stack]/page.tsx
@@ -102,8 +102,9 @@ export function generateStaticParams() {
     .map((answer) => ({ stack: answer.value }))
 }
 
-export function generateMetadata({ params }: { params: { stack: string } }): Metadata {
-  const slug = params.stack.toLowerCase()
+export async function generateMetadata({ params }: { params: Promise<{ stack: string }> }): Promise<Metadata> {
+  const resolvedParams = await params
+  const slug = resolvedParams.stack.toLowerCase()
   const stackEntry = stackAnswers.find((answer) => answer.value === slug)
 
   if (!stackEntry) {
@@ -126,8 +127,9 @@ export function generateMetadata({ params }: { params: { stack: string } }): Met
   }
 }
 
-export default function StackLandingPage({ params }: { params: { stack: string } }) {
-  const slug = params.stack.toLowerCase()
+export default async function StackLandingPage({ params }: { params: Promise<{ stack: string }> }) {
+  const resolvedParams = await params
+  const slug = resolvedParams.stack.toLowerCase()
   const stackEntry = stackAnswers.find((answer) => answer.value === slug)
 
   if (!stackEntry) {
@@ -142,7 +144,10 @@ export default function StackLandingPage({ params }: { params: { stack: string }
   const defaultSummaryUrl = `/new/stack/${slug}/default/summary`
 
   return (
-    <main className="mx-auto flex min-h-screen max-w-3xl flex-col gap-10 px-6 py-16 text-foreground">
+    <main
+      className="mx-auto flex min-h-screen max-w-3xl flex-col gap-10 px-6 py-16 text-foreground"
+      data-testid="stack-detail-page"
+    >
       <header className="space-y-6">
         <div className="flex items-center justify-between">
           <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
diff --git a/app/stacks/page.tsx b/app/stacks/page.tsx
index 43b6d79..fe6764c 100644
--- a/app/stacks/page.tsx
+++ b/app/stacks/page.tsx
@@ -29,7 +29,10 @@ export const metadata: Metadata = {
 
 export default function StacksIndexPage() {
   return (
-    <main className="mx-auto flex min-h-screen max-w-4xl flex-col gap-10 px-6 py-16 text-foreground">
+    <main
+      className="mx-auto flex min-h-screen max-w-4xl flex-col gap-10 px-6 py-16 text-foreground"
+      data-testid="stacks-index-page"
+    >
       <header className="space-y-6">
         <div className="flex items-center justify-between">
           <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
@@ -52,6 +55,7 @@ export default function StacksIndexPage() {
             <article
               key={answer.value}
               className="flex flex-col gap-4 rounded-2xl border border-border/70 bg-card/95 p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
+              data-testid={`stack-card-${answer.value}`}
             >
               <div className="space-y-2">
                 <h2 className="text-2xl font-semibold tracking-tight">{answer.label}</h2>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index a74e03b..5a8d15c 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -67,6 +67,7 @@ export function Hero() {
       variants={containerVariants}
       initial="hidden"
       animate="show"
+      data-testid="hero-section"
     >
       <motion.div className="space-y-10" variants={itemVariants}>
         <motion.div
@@ -126,6 +127,7 @@ export function Hero() {
                       type="button"
                       onClick={() => handleStackClick(stack.value)}
                       className="group inline-flex items-center gap-3 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-sm font-medium text-foreground shadow-sm transition hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                      data-testid={`hero-stack-${stack.value}`}
                     >
                       <span
                         className="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-border/40"
@@ -160,6 +162,7 @@ export function Hero() {
                   type="button"
                   onClick={handleMoreStacks}
                   className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/80 px-4 py-2 text-sm font-semibold text-foreground shadow-sm transition hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                  data-testid="hero-more-stacks"
                 >
                   More stacks
                   <ArrowRight className="h-3.5 w-3.5" />
@@ -177,7 +180,11 @@ export function Hero() {
               </span>
             </div>
 
-            <form onSubmit={handleGithubSubmit} className={`${selectionCardClass} flex flex-col gap-4`}>
+            <form
+              onSubmit={handleGithubSubmit}
+              className={`${selectionCardClass} flex flex-col gap-4`}
+              data-testid="hero-scan-form"
+            >
               <div className="space-y-2 text-left">
                 <p className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                   Scan a GitHub repository
@@ -193,8 +200,9 @@ export function Hero() {
                   onChange={(event) => setGithubRepo(event.target.value)}
                   placeholder="github.com/owner/repo"
                   className="w-full rounded-xl border border-border/70 bg-background px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 sm:min-w-[260px]"
+                  data-testid="hero-repo-input"
                 />
-                <Button type="submit" size="sm" className="gap-2">
+                <Button type="submit" size="sm" className="gap-2" data-testid="hero-scan-button">
                   Scan repo
                   <Github className="h-4 w-4" />
                 </Button>
diff --git a/components/final-output-view.tsx b/components/final-output-view.tsx
index 88440d2..32e3d10 100644
--- a/components/final-output-view.tsx
+++ b/components/final-output-view.tsx
@@ -158,6 +158,7 @@ export default function FinalOutputView({ fileName, fileContent, mimeType, onClo
       aria-labelledby="final-output-title"
       aria-describedby="final-output-description"
       onClick={handleBackdropClick}
+      data-testid="final-output-dialog"
     >
       <div
         ref={dialogRef}
@@ -215,6 +216,7 @@ export default function FinalOutputView({ fileName, fileContent, mimeType, onClo
               className="min-h-0 h-full w-full resize-none rounded-2xl bg-transparent p-6 font-mono text-sm leading-relaxed text-foreground focus:outline-none"
               aria-label="Generated instructions content"
               placeholder="No content available."
+              data-testid="final-output-textarea"
             />
           </div>
         </div>
diff --git a/components/instructions-answer-card.tsx b/components/instructions-answer-card.tsx
index 1c59f91..972abb3 100644
--- a/components/instructions-answer-card.tsx
+++ b/components/instructions-answer-card.tsx
@@ -17,6 +17,7 @@ export type InstructionsAnswerCardProps = {
   disabled?: boolean
   disabledLabel?: string
   onClick?: () => void
+  testId?: string
 } & Omit<ComponentPropsWithoutRef<"button">, "children">
 
 export function InstructionsAnswerCard({
@@ -31,6 +32,7 @@ export function InstructionsAnswerCard({
   disabled = false,
   disabledLabel,
   onClick,
+  testId,
   ...buttonProps
 }: InstructionsAnswerCardProps) {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false)
@@ -51,6 +53,7 @@ export function InstructionsAnswerCard({
       type="button"
       onClick={onClick}
       aria-disabled={disabled}
+      data-testid={testId}
       className={cn(
         "group relative flex h-full items-center justify-between rounded-2xl border border-border/60 bg-background/90 px-5 py-4 text-left transition-all hover:border-primary/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         disabled && "cursor-not-allowed opacity-60 hover:border-border/60 hover:shadow-none focus-visible:ring-0",
diff --git a/components/instructions-wizard.tsx b/components/instructions-wizard.tsx
index da3d8e8..f13fa4f 100644
--- a/components/instructions-wizard.tsx
+++ b/components/instructions-wizard.tsx
@@ -297,22 +297,32 @@ export function InstructionsWizard({
       setIsStackFastTrackPromptVisible(false)
     }
 
-    const isFirstQuestionInStep = currentQuestionIndex === 0
-    const isFirstStep = currentStepIndex === 0
+    setCurrentQuestionIndex((prevQuestionIndex) => {
+      if (prevQuestionIndex > 0) {
+        return prevQuestionIndex - 1
+      }
 
-    if (isFirstQuestionInStep && isFirstStep) {
-      return
-    }
+      let targetStepIndex = currentStepIndex
 
-    if (isFirstQuestionInStep) {
-      const previousStepIndex = Math.max(currentStepIndex - 1, 0)
-      const previousStep = wizardSteps[previousStepIndex]
-      setCurrentStepIndex(previousStepIndex)
-      setCurrentQuestionIndex(previousStep.questions.length - 1)
-      return
-    }
+      setCurrentStepIndex((prevStepIndex) => {
+        if (prevStepIndex === 0) {
+          targetStepIndex = prevStepIndex
+          return prevStepIndex
+        }
+
+        const nextStepIndex = Math.max(prevStepIndex - 1, 0)
+        targetStepIndex = nextStepIndex
+        return nextStepIndex
+      })
 
-    setCurrentQuestionIndex((prev) => Math.max(prev - 1, 0))
+      const targetStep = wizardSteps[targetStepIndex] ?? null
+
+      if (targetStep && targetStep.questions.length > 0) {
+        return targetStep.questions.length - 1
+      }
+
+      return 0
+    })
   }
 
   const applyDefaultsAcrossWizard = useCallback(() => {
@@ -541,7 +551,10 @@ export function InstructionsWizard({
   }
 
   const wizardLayout = (
-    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+    <div
+      className="mx-auto flex w-full max-w-4xl flex-col gap-6"
+      data-testid="instructions-wizard"
+    >
       <div className="flex items-center justify-start">
         <Link
           href="/"
@@ -552,7 +565,10 @@ export function InstructionsWizard({
       </div>
 
       {isStackFastTrackPromptVisible ? (
-        <section className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg">
+        <section
+          className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg"
+          data-testid="wizard-fast-track"
+        >
           <div className="flex flex-col gap-6">
             <div className="space-y-4">
               <div className="space-y-2">
@@ -574,7 +590,10 @@ export function InstructionsWizard({
           </div>
         </section>
       ) : (
-        <section className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg">
+        <section
+          className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg"
+          data-testid="wizard-question-section"
+        >
           <div className="flex flex-col gap-4">
             <div className="flex flex-wrap items-center gap-2">
               <Button
@@ -595,7 +614,10 @@ export function InstructionsWizard({
               </Button>
             </div>
 
-            <h1 className="text-3xl font-semibold text-foreground">
+            <h1
+              className="text-3xl font-semibold text-foreground"
+              data-testid="wizard-question-heading"
+            >
               {currentQuestion.question}
             </h1>
 
@@ -635,6 +657,7 @@ export function InstructionsWizard({
               answers={filteredAnswers}
               onAnswerClick={handleAnswerClick}
               isSelected={isAnswerSelected}
+              questionId={currentQuestion?.id ?? null}
             />
           )}
 
diff --git a/components/repo-scan-loader.tsx b/components/repo-scan-loader.tsx
index c1b805f..5f4b52c 100644
--- a/components/repo-scan-loader.tsx
+++ b/components/repo-scan-loader.tsx
@@ -10,6 +10,7 @@ export default function RepoScanLoader({ message = "Scanning repository…", cla
             role="status"
             aria-live="polite"
             className={`repo-scan-loader ${className}`.trim()}
+            data-testid="repo-scan-loader"
             {...rest}
         >
             <div className="repo-scan-loader__orb" aria-hidden="true">
diff --git a/components/wizard-answer-grid.tsx b/components/wizard-answer-grid.tsx
index 4f716be..fc48e1e 100644
--- a/components/wizard-answer-grid.tsx
+++ b/components/wizard-answer-grid.tsx
@@ -7,11 +7,15 @@ type WizardAnswerGridProps = {
   answers: WizardAnswer[]
   onAnswerClick: (answer: WizardAnswer) => void
   isSelected: (value: string) => boolean
+  questionId?: string | null
 }
 
-export function WizardAnswerGrid({ answers, onAnswerClick, isSelected }: WizardAnswerGridProps) {
+export function WizardAnswerGrid({ answers, onAnswerClick, isSelected, questionId }: WizardAnswerGridProps) {
   return (
-    <div className="mt-6 grid gap-3 sm:grid-cols-2">
+    <div
+      className="mt-6 grid gap-3 sm:grid-cols-2"
+      data-testid={questionId ? `answer-grid-${questionId}` : "answer-grid"}
+    >
       {answers.map((answer) => {
         const iconDescriptor = getIconDescriptor(answer.icon ?? answer.value)
         const iconHex = iconDescriptor
@@ -66,6 +70,7 @@ export function WizardAnswerGrid({ answers, onAnswerClick, isSelected }: WizardA
             selected={isSelected(answer.value)}
             disabled={answer.disabled}
             disabledLabel={answer.disabledLabel}
+            testId={questionId ? `answer-option-${questionId}-${answer.value}` : `answer-option-${answer.value}`}
           />
         )
       })}
diff --git a/components/wizard-completion-summary.tsx b/components/wizard-completion-summary.tsx
index 31fd247..55a975d 100644
--- a/components/wizard-completion-summary.tsx
+++ b/components/wizard-completion-summary.tsx
@@ -28,7 +28,10 @@ export function WizardCompletionSummary({
   const selectedOption = fileOptions.find((file) => file.id === selectedFileId) ?? null
 
   return (
-    <div className="space-y-6 rounded-3xl border border-border/80 bg-card/95 p-8 shadow-lg">
+    <div
+      className="space-y-6 rounded-3xl border border-border/80 bg-card/95 p-8 shadow-lg"
+      data-testid="wizard-completion-summary"
+    >
       <div className="space-y-3">
         <div className="space-y-4">
           <div className="space-y-2">
@@ -73,7 +76,7 @@ export function WizardCompletionSummary({
             </span>
           ) : null}
         </div>
-        <div className="grid gap-3 md:grid-cols-3">
+        <div className="grid gap-3 md:grid-cols-3" data-testid="wizard-file-options">
           {fileOptions.map((file) => {
             const isSelected = file.id === selectedFileId
             return (
@@ -85,6 +88,7 @@ export function WizardCompletionSummary({
                   ? "border-primary bg-primary/10 shadow-lg shadow-primary/20"
                   : "border-border/60 bg-background/95 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md"
                   }`}
+                data-testid={`wizard-file-option-${file.id}`}
               >
                 <span className="text-sm font-semibold text-foreground">{file.label}</span>
                 <span className="text-xs text-muted-foreground">{file.filename}</span>
@@ -94,11 +98,12 @@ export function WizardCompletionSummary({
         </div>
       </div>
 
-      <div className="space-y-3">
+      <div className="space-y-3" data-testid="wizard-summary-entries">
         {summary.map((entry) => (
           <div
             key={entry.id}
             className="rounded-2xl border border-border/70 bg-background/90 p-5"
+            data-testid={`wizard-summary-entry-${entry.id}`}
           >
             <div className="flex flex-wrap items-start justify-between gap-3">
               <p className="text-sm font-medium text-muted-foreground">{entry.question}</p>
diff --git a/components/wizard-confirmation-dialog.tsx b/components/wizard-confirmation-dialog.tsx
index f3edb95..eda0c97 100644
--- a/components/wizard-confirmation-dialog.tsx
+++ b/components/wizard-confirmation-dialog.tsx
@@ -23,7 +23,10 @@ export function WizardConfirmationDialog({ intent, onCancel, onConfirm }: Wizard
   const { title, description, confirmLabel } = copyByIntent[intent]
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm"
+      data-testid="wizard-confirmation-dialog"
+    >
       <div className="w-full max-w-md space-y-4 rounded-2xl border border-border/70 bg-card/95 p-6 shadow-2xl">
         <div className="space-y-2">
           <h3 className="text-lg font-semibold text-foreground">{title}</h3>
@@ -33,7 +36,11 @@ export function WizardConfirmationDialog({ intent, onCancel, onConfirm }: Wizard
           <Button variant="ghost" onClick={onCancel}>
             Keep My Answers
           </Button>
-          <Button variant="destructive" onClick={onConfirm}>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="wizard-confirmation-confirm"
+          >
             {confirmLabel}
           </Button>
         </div>
diff --git a/components/wizard-edit-answer-dialog.tsx b/components/wizard-edit-answer-dialog.tsx
index dcf265b..1ce202a 100644
--- a/components/wizard-edit-answer-dialog.tsx
+++ b/components/wizard-edit-answer-dialog.tsx
@@ -25,7 +25,10 @@ export function WizardEditAnswerDialog({ question, value, onAnswerSelect, onClos
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-background/80 p-6 pt-24 backdrop-blur-sm">
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-background/80 p-6 pt-24 backdrop-blur-sm"
+      data-testid="wizard-edit-answer-dialog"
+    >
       <div className="w-full max-w-2xl space-y-6 rounded-2xl border border-border/70 bg-card/95 p-6 shadow-2xl">
         <div className="flex items-start justify-between gap-4">
           <div className="space-y-2">
@@ -68,7 +71,12 @@ export function WizardEditAnswerDialog({ question, value, onAnswerSelect, onClos
             No options match &ldquo;{query}&rdquo;. Try a different search.
           </p>
         ) : (
-          <WizardAnswerGrid answers={answers} onAnswerClick={onAnswerSelect} isSelected={isSelected} />
+          <WizardAnswerGrid
+            answers={answers}
+            onAnswerClick={onAnswerSelect}
+            isSelected={isSelected}
+            questionId={question.id}
+          />
         )}
       </div>
     </div>
diff --git a/package-lock.json b/package-lock.json
index 5871d48..19334ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
+        "@playwright/test": "^1.50.1",
         "@tailwindcss/postcss": "^4",
         "@testing-library/jest-dom": "^6.8.0",
         "@testing-library/react": "^16.3.0",
@@ -1994,6 +1995,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0.tgz",
+      "integrity": "sha512-Tzh95Twig7hUwwNe381/K3PggZBZblKUe2wv25oIpzWLr6Z0m4KgV1ZVIjnR6GM9ANEqjZD7XsZEa6JL/7YEgg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.56.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -7369,6 +7386,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0.tgz",
+      "integrity": "sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.56.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0.tgz",
+      "integrity": "sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
diff --git a/package.json b/package.json
index 244c49d..f5f6e3e 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
-    "validate:ids": "tsx scripts/validate-question-ids.ts"
+    "validate:ids": "tsx scripts/validate-question-ids.ts",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
@@ -31,6 +32,7 @@
     "@tailwindcss/postcss": "^4",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
+    "@playwright/test": "^1.50.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..2bb8d5e
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './playwright/tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['list']],
+  use: {
+    baseURL: 'http://127.0.0.1:3000',
+    trace: 'on-first-retry',
+    viewport: { width: 1280, height: 720 },
+  },
+  expect: {
+    timeout: 10000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    timeout: 120_000,
+    env: {
+      NEXT_TELEMETRY_DISABLED: '1',
+    },
+  },
+})
diff --git a/playwright/tests/existing.spec.ts b/playwright/tests/existing.spec.ts
new file mode 100644
index 0000000..7afb3c0
--- /dev/null
+++ b/playwright/tests/existing.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('existing repo entry validates input and redirects', async ({ page }) => {
+  await page.goto('/existing')
+
+  await expect(page.getByTestId('existing-repo-page')).toBeVisible()
+
+  await page.getByTestId('existing-repo-input').fill('https://example.com/foo/bar')
+  await page.getByTestId('existing-repo-submit').click()
+
+  await expect(page.getByTestId('existing-repo-error')).toContainText('Enter a valid public GitHub repository URL')
+
+  await page.getByTestId('existing-repo-input').fill('https://github.com/vercel/next.js')
+  await page.getByTestId('existing-repo-submit').click()
+
+  await expect(page).toHaveURL(/\/existing\/https%3A%2F%2Fgithub.com%2Fvercel%2Fnext\.js$/)
+  await expect(page.getByTestId('repo-scan-prompt')).toBeVisible()
+})
diff --git a/playwright/tests/landing.spec.ts b/playwright/tests/landing.spec.ts
new file mode 100644
index 0000000..587316d
--- /dev/null
+++ b/playwright/tests/landing.spec.ts
@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('hero quick stack navigates to default summary', async ({ page }) => {
+  await page.goto('/')
+
+  await expect(page.getByTestId('hero-section')).toBeVisible()
+
+  await page.getByTestId('hero-stack-react').click()
+
+  await expect(page).toHaveURL(/\/new\/stack\/react\/default\/summary$/)
+  await expect(page.getByTestId('stack-summary-page')).toBeVisible()
+})
+
+test('hero scan form falls back to existing flow for invalid input', async ({ page }) => {
+  await page.goto('/')
+
+  await page.getByTestId('hero-repo-input').fill('not-a-valid-repo')
+  await page.getByTestId('hero-scan-button').click()
+
+  await expect(page).toHaveURL(/\/existing$/)
+  await expect(page.getByTestId('existing-repo-page')).toBeVisible()
+})
diff --git a/playwright/tests/repo-scan.spec.ts b/playwright/tests/repo-scan.spec.ts
new file mode 100644
index 0000000..70eef12
--- /dev/null
+++ b/playwright/tests/repo-scan.spec.ts
@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test'
+
+const sampleScanResponse = {
+  repo: 'vercel/next.js',
+  defaultBranch: 'main',
+  language: 'TypeScript',
+  languages: ['TypeScript', 'JavaScript'],
+  frameworks: ['Next.js', 'React'],
+  tooling: ['ESLint', 'Prettier'],
+  testing: ['Playwright'],
+  structure: {
+    src: true,
+    components: true,
+    tests: true,
+    apps: true,
+    packages: false,
+  },
+  topics: ['nextjs', 'react'],
+  warnings: [],
+}
+
+test('repo scan success path generates instructions preview', async ({ page }) => {
+  await page.route('**/api/scan-repo?*', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(sampleScanResponse),
+    })
+  })
+
+  await page.goto('/existing/https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js')
+
+  await expect(page.getByTestId('repo-scan-prompt')).toBeVisible()
+
+  await page.getByTestId('repo-scan-confirm-button').click()
+
+  await expect(page.getByTestId('repo-scan-results')).toBeVisible()
+  await expect(page.getByText('TypeScript').first()).toBeVisible()
+  await expect(page.getByText('Playwright').first()).toBeVisible()
+
+  await page.route('**/api/generate/**', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        fileName: 'copilot-instructions.md',
+        content: '# Repo scan generated instructions\n',
+      }),
+    })
+  })
+
+  await page.getByRole('button', { name: 'Generate copilot-instructions.md' }).click()
+
+  await expect(page.getByTestId('final-output-dialog')).toBeVisible()
+  await expect(page.getByTestId('final-output-textarea')).toHaveValue('# Repo scan generated instructions\n')
+})
+
+test('repo scan retries after server error', async ({ page }) => {
+  let callCount = 0
+
+  await page.route('**/api/scan-repo?*', async (route) => {
+    callCount += 1
+
+    if (callCount === 1) {
+      await route.fulfill({
+        status: 500,
+        contentType: 'application/json',
+        body: JSON.stringify({ error: 'Repository unavailable' }),
+      })
+      return
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(sampleScanResponse),
+    })
+  })
+
+  await page.goto('/existing/https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js')
+
+  await page.getByTestId('repo-scan-confirm-button').click()
+
+  await expect(page.getByTestId('repo-scan-error')).toBeVisible()
+  await expect(page.getByTestId('repo-scan-retry-button')).toBeVisible()
+
+  await page.getByTestId('repo-scan-retry-button').click()
+
+  await expect(page.getByTestId('repo-scan-results')).toBeVisible()
+})
diff --git a/playwright/tests/stacks.spec.ts b/playwright/tests/stacks.spec.ts
new file mode 100644
index 0000000..bd3ed0b
--- /dev/null
+++ b/playwright/tests/stacks.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('stack presets navigate to detail and wizard', async ({ page }) => {
+  await page.goto('/stacks')
+
+  await expect(page.getByTestId('stacks-index-page')).toBeVisible()
+
+  await page.getByRole('link', { name: 'Preview React preset' }).click()
+
+  await expect(page).toHaveURL(/\/stacks\/react$/)
+  await expect(page.getByTestId('stack-detail-page')).toBeVisible()
+
+  await page.getByRole('link', { name: 'Customize in the wizard' }).click()
+
+  await expect(page).toHaveURL(/\/new\/stack\/react$/)
+  await expect(page.getByTestId('instructions-wizard')).toBeVisible()
+})
diff --git a/playwright/tests/summary.spec.ts b/playwright/tests/summary.spec.ts
new file mode 100644
index 0000000..cfad88e
--- /dev/null
+++ b/playwright/tests/summary.spec.ts
@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test'
+
+test('default summary generates preview', async ({ page }) => {
+  await page.goto('/new/stack/react/default/summary')
+
+  await expect(page.getByTestId('stack-summary-page')).toBeVisible()
+
+  await page.route('**/api/generate/**', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        fileName: 'copilot-instructions.md',
+        content: '# Generated instructions\n',
+      }),
+    })
+  })
+
+  await page.getByRole('button', { name: 'Generate copilot-instructions.md' }).click()
+
+  await expect(page.getByTestId('final-output-dialog')).toBeVisible()
+  await expect(page.getByTestId('final-output-textarea')).toHaveValue('# Generated instructions\n')
+
+  await page.getByRole('button', { name: 'Close preview' }).click()
+  await expect(page.getByTestId('final-output-dialog')).toBeHidden()
+})
diff --git a/playwright/tests/wizard.spec.ts b/playwright/tests/wizard.spec.ts
new file mode 100644
index 0000000..69d7d65
--- /dev/null
+++ b/playwright/tests/wizard.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+
+test('wizard supports filtering, defaults, and reset', async ({ page }) => {
+  await page.goto('/new/stack')
+
+  await expect(page.getByTestId('instructions-wizard')).toBeVisible()
+  await expect(page.getByTestId('wizard-question-heading')).toHaveText('Which stack are you working with?')
+
+  await page.getByLabel('Filter options').fill('React')
+  await expect(page.getByTestId('answer-option-stackSelection-react')).toBeVisible()
+
+  await page.getByTestId('answer-option-stackSelection-react').click()
+
+  await expect(page.getByTestId('wizard-question-heading')).toHaveText('What build tooling do you use?')
+
+  await page.getByRole('button', { name: /Use default/ }).click()
+
+  await expect(page.getByTestId('wizard-question-heading')).toHaveText('What language do you use?')
+
+  const backButton = page.getByRole('button', { name: 'Back' })
+  await expect(backButton).toBeEnabled()
+  await backButton.click()
+  await expect(page.getByTestId('wizard-question-heading')).toHaveText('What build tooling do you use?')
+
+  await page.getByRole('button', { name: 'Start Over' }).click()
+  await expect(page.getByTestId('wizard-confirmation-dialog')).toBeVisible()
+  await page.getByTestId('wizard-confirmation-confirm').click()
+
+  await expect(page.getByTestId('wizard-question-heading')).toHaveText('Which stack are you working with?')
+})
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 0000000..cbcc1fb
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}
\ No newline at end of file
diff --git a/vitest.config.ts b/vitest.config.ts
index 9d534e1..b86223a 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig, configDefaults } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 
@@ -8,10 +8,11 @@ export default defineConfig({
         environment: 'jsdom',
         setupFiles: ['./vitest.setup.ts'],
         globals: true,
+        exclude: [...configDefaults.exclude, 'playwright/**'],
     },
     resolve: {
         alias: {
             '@': path.resolve(__dirname, '.'),
         },
     },
-})
\ No newline at end of file
+})