diff --git a/CLAUDE.md b/CLAUDE.md
index 88811fd..2cd99cc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -10,6 +10,27 @@ bun build    # Production build
 bun lint     # Run ESLint
 ```
 
+## Testing
+
+### Unit Tests
+```bash
+bun test     # Run unit tests
+```
+
+### E2E Tests
+```bash
+bunx playwright test              # Run all E2E tests
+bunx playwright test --ui         # Interactive UI mode
+bunx playwright test e2e/admin    # Run admin tests only
+bunx playwright test --debug      # Debug mode
+```
+
+### Testing Patterns
+- E2E tests are in `e2e/` directory using Playwright
+- Use `data-testid` attributes for reliable element selection
+- Test helpers are in `e2e/fixtures/test-helpers.ts`
+- Tests verify DB state by navigating to edit pages after creation
+
 ## Architecture
 
 This is a Next.js 16 authentication app using the App Router with React 19.
diff --git a/app/favicon.ico b/app/favicon.ico
index 718d6fe..faac630 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/components/admin/client-form.tsx b/components/admin/client-form.tsx
index 0713b24..25f327e 100644
--- a/components/admin/client-form.tsx
+++ b/components/admin/client-form.tsx
@@ -10,7 +10,12 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { createOAuthClient } from "@/actions/admin/clients/create";
 import { updateOAuthClient } from "@/actions/admin/clients/update";
-import { SUPPORTED_SCOPES } from "@/lib/validations/oauth";
+import {
+  SCOPE_RESOURCES,
+  SPECIAL_SCOPES,
+  OPERATIONS,
+  getScopesByResource,
+} from "@/lib/scopes";
 
 interface ClientFormProps {
   client?: {
@@ -67,6 +72,34 @@ export function ClientForm({ client }: ClientFormProps) {
     }
   };
 
+  const handleResourceToggle = (resourceKey: string) => {
+    const resourceScopes = getScopesByResource(resourceKey);
+    const scopeKeys = resourceScopes.map((s) => s.key);
+    const allSelected = scopeKeys.every((key) => allowedScopes.includes(key));
+
+    if (allSelected) {
+      // Deselect all scopes for this resource
+      setAllowedScopes(allowedScopes.filter((s) => !scopeKeys.includes(s)));
+    } else {
+      // Select all scopes for this resource
+      const newScopes = new Set([...allowedScopes, ...scopeKeys]);
+      setAllowedScopes(Array.from(newScopes));
+    }
+  };
+
+  const isResourceFullySelected = (resourceKey: string) => {
+    const resourceScopes = getScopesByResource(resourceKey);
+    return resourceScopes.every((s) => allowedScopes.includes(s.key));
+  };
+
+  const isResourcePartiallySelected = (resourceKey: string) => {
+    const resourceScopes = getScopesByResource(resourceKey);
+    const selectedCount = resourceScopes.filter((s) =>
+      allowedScopes.includes(s.key)
+    ).length;
+    return selectedCount > 0 && selectedCount < resourceScopes.length;
+  };
+
   const handleCopy = (text: string, type: string) => {
     navigator.clipboard.writeText(text);
     setCopied(type);
@@ -137,7 +170,7 @@ export function ClientForm({ client }: ClientFormProps) {
           <div className="space-y-2">
             <Label>Client ID</Label>
             <div className="flex gap-2">
-              <Input value={credentials.clientId} readOnly className="font-mono" />
+              <Input data-testid="client-id-display" value={credentials.clientId} readOnly className="font-mono" />
               <Button
                 type="button"
                 variant="outline"
@@ -157,6 +190,7 @@ export function ClientForm({ client }: ClientFormProps) {
             <Label>Client Secret</Label>
             <div className="flex gap-2">
               <Input
+                data-testid="client-secret-display"
                 value={credentials.clientSecret}
                 readOnly
                 className="font-mono"
@@ -177,7 +211,7 @@ export function ClientForm({ client }: ClientFormProps) {
           </div>
         </div>
 
-        <Button onClick={() => router.push("/admin/dashboard/clients")}>
+        <Button data-testid="done-button" onClick={() => router.push("/admin/dashboard/clients")}>
           Done
         </Button>
       </motion.div>
@@ -200,6 +234,7 @@ export function ClientForm({ client }: ClientFormProps) {
         <Label htmlFor="name">Application Name *</Label>
         <Input
           id="name"
+          data-testid="client-name"
           placeholder="My Application"
           value={name}
           onChange={(e) => setName(e.target.value)}
@@ -212,6 +247,7 @@ export function ClientForm({ client }: ClientFormProps) {
         <Label htmlFor="description">Description</Label>
         <Textarea
           id="description"
+          data-testid="client-description"
           placeholder="A brief description of your application"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
@@ -228,6 +264,7 @@ export function ClientForm({ client }: ClientFormProps) {
           {redirectUris.map((uri, index) => (
             <div key={index} className="flex gap-2">
               <Input
+                data-testid={`redirect-uri-${index}`}
                 placeholder="https://example.com/callback"
                 value={uri}
                 onChange={(e) => handleRedirectUriChange(index, e.target.value)}
@@ -238,6 +275,7 @@ export function ClientForm({ client }: ClientFormProps) {
                   type="button"
                   variant="ghost"
                   size="icon"
+                  data-testid={`remove-redirect-uri-${index}`}
                   onClick={() => handleRemoveRedirectUri(index)}
                   disabled={isPending}
                 >
@@ -250,6 +288,7 @@ export function ClientForm({ client }: ClientFormProps) {
             type="button"
             variant="outline"
             size="sm"
+            data-testid="add-redirect-uri"
             onClick={handleAddRedirectUri}
             disabled={isPending}
           >
@@ -264,19 +303,124 @@ export function ClientForm({ client }: ClientFormProps) {
         <p className="text-xs text-muted-foreground">
           Scopes this application can request
         </p>
-        <div className="flex flex-wrap gap-2">
-          {SUPPORTED_SCOPES.map((scope) => (
-            <Button
-              key={scope}
-              type="button"
-              variant={allowedScopes.includes(scope) ? "default" : "outline"}
-              size="sm"
-              onClick={() => handleScopeToggle(scope)}
-              disabled={isPending || scope === "openid"}
-            >
-              {scope}
-            </Button>
-          ))}
+        <div className="space-y-3">
+          {/* Special Scopes (openid, offline_access) */}
+          {SPECIAL_SCOPES.map((scope) => {
+            const isSelected = allowedScopes.includes(scope.key);
+            const isRequired = scope.required;
+            return (
+              <button
+                key={scope.key}
+                data-testid={scope.key}
+                type="button"
+                onClick={() => handleScopeToggle(scope.key)}
+                disabled={isPending || isRequired}
+                className={`w-full flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
+                  isSelected
+                    ? "border-primary bg-primary/5"
+                    : "border-border hover:border-primary/50"
+                } ${isPending || isRequired ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+              >
+                <scope.icon className="w-5 h-5 mt-0.5 text-muted-foreground" />
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium">{scope.title}</span>
+                    {isRequired && (
+                      <span className="text-xs text-muted-foreground">(Required)</span>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">{scope.subtitle}</p>
+                </div>
+                <div
+                  className={`w-4 h-4 rounded border flex items-center justify-center ${
+                    isSelected ? "bg-primary border-primary" : "border-border"
+                  }`}
+                >
+                  {isSelected && <Check className="w-3 h-3 text-primary-foreground" />}
+                </div>
+              </button>
+            );
+          })}
+
+          {/* Resource Scopes (grouped by resource) */}
+          {SCOPE_RESOURCES.map((resource) => {
+            const resourceScopes = getScopesByResource(resource.key);
+            const isFullySelected = isResourceFullySelected(resource.key);
+            const isPartiallySelected = isResourcePartiallySelected(resource.key);
+
+            return (
+              <div key={resource.key} className="rounded-lg border border-border">
+                {/* Resource Header */}
+                <button
+                  data-testid={resource.key}
+                  type="button"
+                  onClick={() => handleResourceToggle(resource.key)}
+                  disabled={isPending}
+                  className={`w-full flex items-start gap-3 p-3 text-left transition-colors rounded-t-lg ${
+                    isFullySelected || isPartiallySelected
+                      ? "bg-primary/5"
+                      : "hover:bg-muted/50"
+                  } ${isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                >
+                  <resource.icon className="w-5 h-5 mt-0.5 text-muted-foreground" />
+                  <div className="flex-1">
+                    <span className="text-sm font-medium">{resource.title}</span>
+                    <p className="text-xs text-muted-foreground">{resource.subtitle}</p>
+                  </div>
+                  <div
+                    className={`w-4 h-4 rounded border flex items-center justify-center ${
+                      isFullySelected
+                        ? "bg-primary border-primary"
+                        : isPartiallySelected
+                          ? "bg-primary/50 border-primary"
+                          : "border-border"
+                    }`}
+                  >
+                    {(isFullySelected || isPartiallySelected) && (
+                      <Check className="w-3 h-3 text-primary-foreground" />
+                    )}
+                  </div>
+                </button>
+
+                {/* Operation Checkboxes */}
+                <div className="border-t border-border bg-muted/30 rounded-b-lg">
+                  {resourceScopes.map((scope) => {
+                    const isSelected = allowedScopes.includes(scope.key);
+                    const op = OPERATIONS[scope.operation!];
+                    const OpIcon = op.icon;
+
+                    return (
+                      <button
+                        key={scope.key}
+                        data-testid={scope.key}
+                        type="button"
+                        onClick={() => handleScopeToggle(scope.key)}
+                        disabled={isPending}
+                        className={`w-full flex items-center gap-3 px-3 py-2 pl-11 text-left transition-colors last:rounded-b-lg ${
+                          isSelected ? "bg-primary/5" : "hover:bg-muted/50"
+                        } ${isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                      >
+                        <OpIcon className="w-4 h-4 text-muted-foreground" />
+                        <div className="flex-1">
+                          <span className="text-sm">{op.title}</span>
+                          <span className="text-xs text-muted-foreground ml-2">
+                            {scope.subtitle}
+                          </span>
+                        </div>
+                        <div
+                          className={`w-4 h-4 rounded border flex items-center justify-center ${
+                            isSelected ? "bg-primary border-primary" : "border-border"
+                          }`}
+                        >
+                          {isSelected && <Check className="w-3 h-3 text-primary-foreground" />}
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
 
@@ -284,6 +428,7 @@ export function ClientForm({ client }: ClientFormProps) {
         <input
           type="checkbox"
           id="isFirstParty"
+          data-testid="first-party-checkbox"
           checked={isFirstParty}
           onChange={(e) => setIsFirstParty(e.target.checked)}
           disabled={isPending}
@@ -298,12 +443,13 @@ export function ClientForm({ client }: ClientFormProps) {
         <Button
           type="button"
           variant="outline"
+          data-testid="cancel-button"
           onClick={() => router.back()}
           disabled={isPending}
         >
           Cancel
         </Button>
-        <Button type="submit" disabled={isPending}>
+        <Button type="submit" data-testid="submit-button" disabled={isPending}>
           {isPending ? (
             <>
               <Loader2 className="size-4 animate-spin" />
diff --git a/components/auth/oauth-consent-card.tsx b/components/auth/oauth-consent-card.tsx
index 50c217a..639dc2b 100644
--- a/components/auth/oauth-consent-card.tsx
+++ b/components/auth/oauth-consent-card.tsx
@@ -3,10 +3,11 @@
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
-import { Loader2, CheckCircle, Shield, User, Mail, Key } from "lucide-react";
+import { Loader2, CheckCircle, Shield } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card";
 import { approveConsent, denyConsent, type ConsentParams } from "@/actions/oauth/consent";
+import { getScope } from "@/lib/scopes";
 
 interface OAuthConsentCardProps {
   client: {
@@ -19,29 +20,6 @@ interface OAuthConsentCardProps {
   params: ConsentParams;
 }
 
-const SCOPE_INFO: Record<string, { icon: React.ElementType; label: string; description: string }> = {
-  openid: {
-    icon: Key,
-    label: "OpenID",
-    description: "Verify your identity",
-  },
-  profile: {
-    icon: User,
-    label: "Profile",
-    description: "Access your name and profile picture",
-  },
-  email: {
-    icon: Mail,
-    label: "Email",
-    description: "View your email address",
-  },
-  offline_access: {
-    icon: Shield,
-    label: "Offline Access",
-    description: "Maintain access when you're not using the app",
-  },
-};
-
 export function OAuthConsentCard({ client, scopes, params }: OAuthConsentCardProps) {
   const router = useRouter();
   const [error, setError] = useState<string | null>(null);
@@ -114,9 +92,9 @@ export function OAuthConsentCard({ client, scopes, params }: OAuthConsentCardPro
             <p className="text-sm font-medium">This will allow {client.name} to:</p>
             <ul className="space-y-2">
               {scopes.map((scope) => {
-                const info = SCOPE_INFO[scope];
-                if (!info) return null;
-                const Icon = info.icon;
+                const scopeInfo = getScope(scope);
+                if (!scopeInfo) return null;
+                const Icon = scopeInfo.icon;
                 return (
                   <motion.li
                     key={scope}
@@ -126,9 +104,9 @@ export function OAuthConsentCard({ client, scopes, params }: OAuthConsentCardPro
                   >
                     <Icon className="w-5 h-5 text-muted-foreground mt-0.5" />
                     <div>
-                      <p className="text-sm font-medium">{info.label}</p>
+                      <p className="text-sm font-medium">{scopeInfo.title}</p>
                       <p className="text-xs text-muted-foreground">
-                        {info.description}
+                        {scopeInfo.subtitle}
                       </p>
                     </div>
                   </motion.li>
diff --git a/e2e/admin/clients.spec.ts b/e2e/admin/clients.spec.ts
new file mode 100644
index 0000000..53c61bd
--- /dev/null
+++ b/e2e/admin/clients.spec.ts
@@ -0,0 +1,184 @@
+import { test, expect } from "@playwright/test";
+
+const ADMIN_PASSWORD = "e2e-test-admin-password";
+
+async function adminLogin(page: import("@playwright/test").Page) {
+  await page.goto("/admin");
+  await page.getByLabel("Admin Password").fill(ADMIN_PASSWORD);
+  await page.getByRole("button", { name: "Sign in with Password" }).click();
+  await expect(page).toHaveURL("/admin/dashboard");
+}
+
+test.describe("Client Form Scope Selection", () => {
+  test.beforeEach(async ({ page }) => {
+    await adminLogin(page);
+  });
+
+
+  test("should create client with all scopes selected", async ({ page }) => {
+    await page.goto("/admin/dashboard/clients/new");
+
+    // Fill basic info
+    await page.getByTestId("client-name").fill("All Scopes Test App");
+    await page.getByTestId("redirect-uri-0").fill("http://localhost:3001/callback");
+
+    // Verify openid is already selected (required)
+    const openidButton = page.getByTestId("openid");
+    await expect(openidButton).toHaveAttribute("class", /border-primary/);
+
+    // Select all resource scopes by clicking resource toggles
+    await page.getByTestId("profile").click();
+    await page.getByTestId("email").click();
+
+    // Verify all individual scopes are selected (checking for the selected state class)
+    const readProfileButton = page.getByTestId("read:profile");
+    const writeProfileButton = page.getByTestId("write:profile");
+    const readEmailButton = page.getByTestId("read:email");
+
+    await expect(readProfileButton).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(writeProfileButton).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(readEmailButton).toHaveAttribute("class", /bg-primary\/5/);
+
+    // Submit the form
+    await page.getByTestId("submit-button").click();
+
+    // Wait for credentials display
+    await expect(page.getByText("Client Created Successfully")).toBeVisible();
+
+    // Get the client ID for later verification
+    const clientId = await page.getByTestId("client-id-display").inputValue();
+    expect(clientId).toBeTruthy();
+    expect(clientId).toMatch(/^client_/);
+
+    // Navigate directly to the edit page using the client ID to verify DB storage
+    await page.goto(`/admin/dashboard/clients/${clientId}`);
+
+    // Verify all scopes are still selected (DB verification via UI)
+    await expect(page.getByTestId("openid")).toHaveAttribute("class", /border-primary/);
+    await expect(page.getByTestId("read:profile")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("read:email")).toHaveAttribute("class", /bg-primary\/5/);
+  });
+
+  test("should create client with partial scopes (profile read only)", async ({ page }) => {
+    await page.goto("/admin/dashboard/clients/new");
+
+    // Fill basic info
+    await page.getByTestId("client-name").fill("Partial Scopes Test App");
+    await page.getByTestId("redirect-uri-0").fill("http://localhost:3001/callback");
+
+    // Select only read:profile (not write:profile)
+    await page.getByTestId("read:profile").click();
+
+    // Verify read:profile is selected but write:profile is not
+    await expect(page.getByTestId("read:profile")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+
+    // Submit the form
+    await page.getByTestId("submit-button").click();
+
+    // Wait for credentials display
+    await expect(page.getByText("Client Created Successfully")).toBeVisible();
+
+    const clientId = await page.getByTestId("client-id-display").inputValue();
+
+    // Navigate directly to the edit page using the client ID to verify DB storage
+    await page.goto(`/admin/dashboard/clients/${clientId}`);
+
+    // Verify only read:profile is selected (DB verification via UI)
+    await expect(page.getByTestId("openid")).toHaveAttribute("class", /border-primary/);
+    await expect(page.getByTestId("read:profile")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("read:email")).not.toHaveAttribute("class", /bg-primary\/5/);
+  });
+
+  test("should toggle resource to select/deselect all operations", async ({ page }) => {
+    await page.goto("/admin/dashboard/clients/new");
+
+    // Initially, profile scopes should not be selected
+    await expect(page.getByTestId("read:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+
+    // Click profile resource toggle - should select all profile scopes
+    await page.getByTestId("profile").click();
+
+    // Verify both read and write profile scopes are now selected
+    await expect(page.getByTestId("read:profile")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).toHaveAttribute("class", /bg-primary\/5/);
+
+    // Click profile resource toggle again - should deselect all profile scopes
+    await page.getByTestId("profile").click();
+
+    // Verify both read and write profile scopes are now deselected
+    await expect(page.getByTestId("read:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+  });
+
+  test("should not allow deselecting openid scope (required)", async ({ page }) => {
+    await page.goto("/admin/dashboard/clients/new");
+
+    // Verify openid is selected and has the required indicator
+    const openidButton = page.getByTestId("openid");
+    await expect(openidButton).toHaveAttribute("class", /border-primary/);
+    await expect(openidButton).toBeDisabled();
+
+    // Try clicking openid - it should remain selected
+    await openidButton.click({ force: true });
+
+    // Verify openid is still selected
+    await expect(openidButton).toHaveAttribute("class", /border-primary/);
+  });
+
+  test("should create client with email scope only", async ({ page }) => {
+    await page.goto("/admin/dashboard/clients/new");
+
+    // Fill basic info
+    await page.getByTestId("client-name").fill("Email Only Test App");
+    await page.getByTestId("redirect-uri-0").fill("http://localhost:3001/callback");
+
+    // Select only email resource
+    await page.getByTestId("email").click();
+
+    // Verify email is selected but profile is not
+    await expect(page.getByTestId("read:email")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("read:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+
+    // Submit the form
+    await page.getByTestId("submit-button").click();
+
+    // Wait for credentials display
+    await expect(page.getByText("Client Created Successfully")).toBeVisible();
+
+    const clientId = await page.getByTestId("client-id-display").inputValue();
+
+    // Navigate directly to the edit page using the client ID to verify DB storage
+    await page.goto(`/admin/dashboard/clients/${clientId}`);
+
+    // Verify only email scope is selected (DB verification via UI)
+    await expect(page.getByTestId("openid")).toHaveAttribute("class", /border-primary/);
+    await expect(page.getByTestId("read:email")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("read:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).not.toHaveAttribute("class", /bg-primary\/5/);
+  });
+
+  test("should show partial selection indicator when some operations selected", async ({ page }) => {
+    await page.goto("/admin/dashboard/clients/new");
+
+    // Select only read:profile (partial selection for profile resource)
+    await page.getByTestId("read:profile").click();
+
+    // The profile resource header should show partial selection
+    // (bg-primary/50 for partial vs bg-primary for full)
+    const profileHeader = page.getByTestId("profile");
+
+    // Verify partial selection state - the checkbox should have partial styling
+    await expect(profileHeader).toHaveAttribute("class", /bg-primary\/5/);
+
+    // Now select write:profile to make it fully selected
+    await page.getByTestId("write:profile").click();
+
+    // Both should now be selected
+    await expect(page.getByTestId("read:profile")).toHaveAttribute("class", /bg-primary\/5/);
+    await expect(page.getByTestId("write:profile")).toHaveAttribute("class", /bg-primary\/5/);
+  });
+});
diff --git a/e2e/fixtures/test-helpers.ts b/e2e/fixtures/test-helpers.ts
index 2b546e0..9a4ba9e 100644
--- a/e2e/fixtures/test-helpers.ts
+++ b/e2e/fixtures/test-helpers.ts
@@ -55,28 +55,29 @@ export async function createOAuthClient(
 ) {
   await page.goto("/admin/dashboard/clients/new");
 
-  await page.getByLabel("Application Name").fill(options.name);
-  await page.getByPlaceholder("https://example.com/callback").fill(options.redirectUri);
+  await page.getByTestId("client-name").fill(options.name);
+  await page.getByTestId("redirect-uri-0").fill(options.redirectUri);
 
-  // Select additional scopes if provided
+  // Select additional scopes if provided using data-testid
+  // Scopes can be resource names (profile, email) or scope keys (read:profile, write:profile, read:email)
   if (options.scopes) {
     for (const scope of options.scopes) {
       if (scope !== "openid") {
-        await page.getByRole("button", { name: scope }).click();
+        await page.getByTestId(scope).click();
       }
     }
   }
 
-  await page.getByRole("button", { name: "Create Application" }).click();
+  await page.getByTestId("submit-button").click();
 
   // Wait for credentials to be shown
   await expect(page.getByText("Client Created Successfully")).toBeVisible();
 
-  // Extract credentials
-  const clientId = await page.locator('input[readonly]').first().inputValue();
-  const clientSecret = await page.locator('input[readonly]').nth(1).inputValue();
+  // Extract credentials using data-testid
+  const clientId = await page.getByTestId("client-id-display").inputValue();
+  const clientSecret = await page.getByTestId("client-secret-display").inputValue();
 
-  await page.getByRole("button", { name: "Done" }).click();
+  await page.getByTestId("done-button").click();
 
   return { clientId, clientSecret };
 }
diff --git a/e2e/oauth/consent.spec.ts b/e2e/oauth/consent.spec.ts
index 0152aae..c53e24f 100644
--- a/e2e/oauth/consent.spec.ts
+++ b/e2e/oauth/consent.spec.ts
@@ -42,8 +42,8 @@ test.describe("OAuth Consent Flow", () => {
     await page.getByPlaceholder("https://example.com/callback").fill("http://localhost:3001/callback");
 
     // Enable profile and email scopes
-    await page.getByRole("button", { name: "profile" }).click();
-    await page.getByRole("button", { name: "email" }).click();
+    await page.getByTestId('profile').click();
+    await page.getByTestId('email').click();
 
     await page.getByRole("button", { name: "Create Application" }).click();
     await expect(page.getByText("Client Created Successfully")).toBeVisible();
diff --git a/lib/scopes.test.ts b/lib/scopes.test.ts
new file mode 100644
index 0000000..8010c91
--- /dev/null
+++ b/lib/scopes.test.ts
@@ -0,0 +1,158 @@
+import { describe, expect, test } from "bun:test";
+import {
+  SCOPES,
+  SCOPE_RESOURCES,
+  SPECIAL_SCOPES,
+  SUPPORTED_SCOPES,
+  OPERATIONS,
+  getScope,
+  getScopesByResource,
+  getSpecialScopes,
+  getResourceScopes,
+} from "./scopes";
+
+describe("SCOPE_RESOURCES", () => {
+  test("should have at least one resource", () => {
+    expect(SCOPE_RESOURCES.length).toBeGreaterThan(0);
+  });
+
+  test("each resource should have required fields", () => {
+    for (const resource of SCOPE_RESOURCES) {
+      expect(resource.key).toBeDefined();
+      expect(resource.key.length).toBeGreaterThan(0);
+      expect(resource.title).toBeDefined();
+      expect(resource.subtitle).toBeDefined();
+      expect(resource.icon).toBeDefined();
+      expect(resource.operations.length).toBeGreaterThan(0);
+    }
+  });
+
+  test("should have unique keys", () => {
+    const keys = SCOPE_RESOURCES.map((r) => r.key);
+    const uniqueKeys = new Set(keys);
+    expect(uniqueKeys.size).toBe(keys.length);
+  });
+
+  test("operations should be valid", () => {
+    const validOperations = Object.keys(OPERATIONS);
+    for (const resource of SCOPE_RESOURCES) {
+      for (const op of resource.operations) {
+        expect(validOperations).toContain(op);
+      }
+    }
+  });
+});
+
+describe("SPECIAL_SCOPES", () => {
+  test("should have openid as a required scope", () => {
+    const openid = SPECIAL_SCOPES.find((s) => s.key === "openid");
+    expect(openid).toBeDefined();
+    expect(openid?.required).toBe(true);
+  });
+
+  test("should contain expected special scopes", () => {
+    const keys = SPECIAL_SCOPES.map((s) => s.key);
+    expect(keys).toContain("openid");
+    expect(keys).toContain("offline_access");
+  });
+});
+
+describe("SCOPES (generated)", () => {
+  test("should generate scopes from resources and special scopes", () => {
+    expect(SCOPES.length).toBeGreaterThan(0);
+  });
+
+  test("should contain special scopes", () => {
+    const keys = SCOPES.map((s) => s.key);
+    expect(keys).toContain("openid");
+    expect(keys).toContain("offline_access");
+  });
+
+  test("should contain resource scopes with operation:resource format", () => {
+    const keys = SCOPES.map((s) => s.key);
+    expect(keys).toContain("read:profile");
+    expect(keys).toContain("write:profile");
+    expect(keys).toContain("read:email");
+  });
+
+  test("resource scopes should have resource and operation fields", () => {
+    const resourceScopes = SCOPES.filter((s) => s.key.includes(":"));
+    for (const scope of resourceScopes) {
+      expect(scope.resource).toBeDefined();
+      expect(scope.operation).toBeDefined();
+    }
+  });
+
+  test("special scopes should not have resource or operation fields", () => {
+    const specialScopes = SCOPES.filter((s) => !s.key.includes(":"));
+    for (const scope of specialScopes) {
+      expect(scope.resource).toBeUndefined();
+      expect(scope.operation).toBeUndefined();
+    }
+  });
+});
+
+describe("SUPPORTED_SCOPES", () => {
+  test("should be derived from SCOPES", () => {
+    expect(SUPPORTED_SCOPES).toEqual(SCOPES.map((s) => s.key));
+  });
+
+  test("should be a non-empty tuple", () => {
+    expect(SUPPORTED_SCOPES.length).toBeGreaterThan(0);
+  });
+});
+
+describe("getScope", () => {
+  test("should return scope for valid key", () => {
+    const scope = getScope("openid");
+    expect(scope).toBeDefined();
+    expect(scope?.key).toBe("openid");
+  });
+
+  test("should return resource scope for operation:resource format", () => {
+    const scope = getScope("read:profile");
+    expect(scope).toBeDefined();
+    expect(scope?.key).toBe("read:profile");
+    expect(scope?.resource).toBe("profile");
+    expect(scope?.operation).toBe("read");
+  });
+
+  test("should return undefined for invalid key", () => {
+    const scope = getScope("invalid_scope");
+    expect(scope).toBeUndefined();
+  });
+});
+
+describe("getScopesByResource", () => {
+  test("should return all scopes for a resource", () => {
+    const profileScopes = getScopesByResource("profile");
+    expect(profileScopes.length).toBe(2);
+    expect(profileScopes.map((s) => s.key)).toContain("read:profile");
+    expect(profileScopes.map((s) => s.key)).toContain("write:profile");
+  });
+
+  test("should return empty array for unknown resource", () => {
+    const scopes = getScopesByResource("unknown");
+    expect(scopes).toEqual([]);
+  });
+});
+
+describe("getSpecialScopes", () => {
+  test("should return only special scopes", () => {
+    const special = getSpecialScopes();
+    for (const scope of special) {
+      expect(scope.resource).toBeUndefined();
+    }
+    expect(special.map((s) => s.key)).toContain("openid");
+  });
+});
+
+describe("getResourceScopes", () => {
+  test("should return only resource scopes", () => {
+    const resourceScopes = getResourceScopes();
+    for (const scope of resourceScopes) {
+      expect(scope.resource).toBeDefined();
+      expect(scope.operation).toBeDefined();
+    }
+  });
+});
diff --git a/lib/scopes.ts b/lib/scopes.ts
new file mode 100644
index 0000000..0b307f1
--- /dev/null
+++ b/lib/scopes.ts
@@ -0,0 +1,119 @@
+import { Key, User, Mail, Shield, Eye, Pencil } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+export type Operation = "read" | "write";
+
+export interface ScopeResource {
+  key: string;
+  title: string;
+  subtitle: string;
+  icon: LucideIcon;
+  operations: Operation[];
+}
+
+export interface SpecialScope {
+  key: string;
+  title: string;
+  subtitle: string;
+  icon: LucideIcon;
+  required?: boolean;
+}
+
+export interface Scope {
+  key: string;
+  title: string;
+  subtitle: string;
+  icon: LucideIcon;
+  required?: boolean;
+  resource?: string;
+  operation?: Operation;
+}
+
+// Resources that support read/write operations
+export const SCOPE_RESOURCES: ScopeResource[] = [
+  {
+    key: "profile",
+    title: "Profile",
+    subtitle: "Your name and profile picture",
+    icon: User,
+    operations: ["read", "write"],
+  },
+  {
+    key: "email",
+    title: "Email",
+    subtitle: "Your email address",
+    icon: Mail,
+    operations: ["read"],
+  },
+];
+
+// Special scopes that don't follow the resource:operation pattern
+export const SPECIAL_SCOPES: SpecialScope[] = [
+  {
+    key: "openid",
+    title: "Authentication",
+    subtitle: "Authenticate your identity",
+    icon: Key,
+    required: true,
+  },
+];
+
+// Operation metadata for UI
+export const OPERATIONS: Record<Operation, { title: string; icon: LucideIcon; verb: string }> = {
+  read: { title: "Read", icon: Eye, verb: "View" },
+  write: { title: "Write", icon: Pencil, verb: "Modify" },
+};
+
+// Generate all scopes from resources and special scopes
+function generateScopes(): Scope[] {
+  const scopes: Scope[] = [];
+
+  // Add special scopes first
+  for (const special of SPECIAL_SCOPES) {
+    scopes.push({
+      key: special.key,
+      title: special.title,
+      subtitle: special.subtitle,
+      icon: special.icon,
+      required: special.required,
+    });
+  }
+
+  // Generate resource scopes (e.g., read:profile, write:profile)
+  for (const resource of SCOPE_RESOURCES) {
+    for (const operation of resource.operations) {
+      const op = OPERATIONS[operation];
+      scopes.push({
+        key: `${operation}:${resource.key}`,
+        title: `${op.title} ${resource.title}`,
+        subtitle: `${op.verb} ${resource.subtitle.toLowerCase()}`,
+        icon: resource.icon,
+        resource: resource.key,
+        operation,
+      });
+    }
+  }
+
+  return scopes;
+}
+
+export const SCOPES: Scope[] = generateScopes();
+
+export const SUPPORTED_SCOPES = SCOPES.map((s) => s.key) as [string, ...string[]];
+export type SupportedScope = (typeof SUPPORTED_SCOPES)[number];
+
+export function getScope(key: string): Scope | undefined {
+  return SCOPES.find((s) => s.key === key);
+}
+
+export function getScopesByResource(resourceKey: string): Scope[] {
+  return SCOPES.filter((s) => s.resource === resourceKey);
+}
+
+export function getSpecialScopes(): Scope[] {
+  return SCOPES.filter((s) => !s.resource);
+}
+
+export function getResourceScopes(): Scope[] {
+  return SCOPES.filter((s) => !!s.resource);
+}
diff --git a/lib/validations/oauth.ts b/lib/validations/oauth.ts
index 46a93ef..f450848 100644
--- a/lib/validations/oauth.ts
+++ b/lib/validations/oauth.ts
@@ -1,13 +1,7 @@
 import { z } from "zod";
+import { SUPPORTED_SCOPES, type SupportedScope } from "@/lib/scopes";
 
-export const SUPPORTED_SCOPES = [
-  "openid",
-  "profile",
-  "email",
-  "offline_access",
-] as const;
-
-export type SupportedScope = (typeof SUPPORTED_SCOPES)[number];
+export { SUPPORTED_SCOPES, type SupportedScope };
 
 export const authorizeRequestSchema = z.object({
   client_id: z.string().min(1, "client_id is required"),
diff --git a/package.json b/package.json
index f1079da..39e2958 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "bun db:migrate && next build",
     "start": "next start",
     "lint": "eslint",
     "db:generate": "drizzle-kit generate",
diff --git a/playwright.config.ts b/playwright.config.ts
index 6802de6..09676b0 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -77,45 +77,45 @@ export default defineConfig({
       command: "bun run dev",
       url: "http://localhost:3000",
       timeout: 30 * 1000,
-      reuseExistingServer: !process.env.CI,
+      reuseExistingServer: false,
       env: {
-      // Testing flags (both server and client side)
-      E2E_SKIP_EMAIL_VERIFICATION: "true",
-      NEXT_PUBLIC_E2E_SKIP_EMAIL_VERIFICATION: "true",
+        // Testing flags (both server and client side)
+        E2E_SKIP_EMAIL_VERIFICATION: "true",
+        NEXT_PUBLIC_E2E_SKIP_EMAIL_VERIFICATION: "true",
 
-      // Database (in-memory SQLite for E2E tests)
-      TURSO_DATABASE_URL: "file::memory:",
-      TURSO_AUTH_TOKEN: "",
+        // Database (in-memory SQLite for E2E tests)
+        TURSO_DATABASE_URL: "file::memory:",
+        TURSO_AUTH_TOKEN: "",
 
-      // Session
-      SESSION_SECRET: "e2e-test-session-secret-minimum-32-characters",
+        // Session
+        SESSION_SECRET: "e2e-test-session-secret-minimum-32-characters",
 
-      // Redis (local docker via serverless-redis-http)
-      UPSTASH_REDIS_REST_URL: "http://localhost:8079",
-      UPSTASH_REDIS_REST_TOKEN: "e2e-test-token",
+        // Redis (local docker via serverless-redis-http)
+        UPSTASH_REDIS_REST_URL: "http://localhost:8079",
+        UPSTASH_REDIS_REST_TOKEN: "e2e-test-token",
 
-      // Email (mock)
-      RESEND_API_KEY: "re_mock_key",
+        // Email (mock)
+        RESEND_API_KEY: "re_mock_key",
 
-      // OAuth/OIDC
-      OAUTH_ISSUER_URL: "http://localhost:3000",
-      JWT_PRIVATE_KEY: testPrivateKey.replace(/\n/g, "\\n"),
-      JWT_PUBLIC_KEY: testPublicKey.replace(/\n/g, "\\n"),
+        // OAuth/OIDC
+        OAUTH_ISSUER_URL: "http://localhost:3000",
+        JWT_PRIVATE_KEY: testPrivateKey.replace(/\n/g, "\\n"),
+        JWT_PUBLIC_KEY: testPublicKey.replace(/\n/g, "\\n"),
 
-      // Admin
-      ADMIN_PASSWORD: "e2e-test-admin-password",
+        // Admin
+        ADMIN_PASSWORD: "e2e-test-admin-password",
 
-      // Storage (mock)
-      BLOB_READ_WRITE_TOKEN: "vercel_blob_mock",
+        // Storage (mock)
+        BLOB_READ_WRITE_TOKEN: "vercel_blob_mock",
 
-      // App
-      NEXT_PUBLIC_APP_URL: "http://localhost:3000",
-      NEXT_PUBLIC_APP_NAME: "RxLab Auth",
+        // App
+        NEXT_PUBLIC_APP_URL: "http://localhost:3000",
+        NEXT_PUBLIC_APP_NAME: "RxLab Auth",
 
-      // WebAuthn
-      WEBAUTHN_RP_ID: "localhost",
-      WEBAUTHN_RP_NAME: "RxLab Auth",
-      WEBAUTHN_ORIGIN: "http://localhost:3000",
+        // WebAuthn
+        WEBAUTHN_RP_ID: "localhost",
+        WEBAUTHN_RP_NAME: "RxLab Auth",
+        WEBAUTHN_ORIGIN: "http://localhost:3000",
       },
     },
   ],