diff --git a/apps/dashboard/components/organizations/api-key-create-dialog.tsx b/apps/dashboard/components/organizations/api-key-create-dialog.tsx
index 13b10eff9..3a2ed65ba 100644
--- a/apps/dashboard/components/organizations/api-key-create-dialog.tsx
+++ b/apps/dashboard/components/organizations/api-key-create-dialog.tsx
@@ -3,31 +3,32 @@
 import type { ApiScope } from "@databuddy/api-keys/scopes";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+	CaretUpDownIcon,
 	CheckCircleIcon,
 	CheckIcon,
 	CopyIcon,
-	GlobeIcon,
 	KeyIcon,
 	PlusIcon,
-	TrashIcon,
 } from "@phosphor-icons/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import type { Website } from "@/hooks/use-websites";
 import { orpc } from "@/lib/orpc";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "../ui/command";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
 	Sheet,
 	SheetBody,
@@ -37,6 +38,7 @@ import {
 	SheetHeader,
 	SheetTitle,
 } from "../ui/sheet";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { type ApiKeyAccessEntry, SCOPE_OPTIONS } from "./api-key-types";
 
 interface ApiKeyCreateDialogProps {
@@ -57,6 +59,9 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
+const DEFAULT_SCOPES: ApiScope[] = ["read:data"];
+const ALL_SCOPES: ApiScope[] = SCOPE_OPTIONS.map((opt) => opt.value);
+
 export function ApiKeyCreateDialog({
 	open,
 	onOpenChangeAction,
@@ -64,9 +69,14 @@ export function ApiKeyCreateDialog({
 	onSuccessAction,
 }: ApiKeyCreateDialogProps) {
 	const queryClient = useQueryClient();
-	const [globalScopes, setGlobalScopes] = useState<ApiScope[]>(["read:data"]);
+	// const [globalScopes, setGlobalScopes] = useState<ApiScope[]>(ALL_SCOPES);
 	const [websiteAccess, setWebsiteAccess] = useState<ApiKeyAccessEntry[]>([]);
-	const [websiteToAdd, setWebsiteToAdd] = useState<string | undefined>();
+
+	const [scopeMode, setScopeMode] = useState("all");
+	const [restrictedScopes, setRestrictedScopes] =
+		useState<ApiScope[]>(DEFAULT_SCOPES);
+
+	const [popoverOpen, setPopoverOpen] = useState(false);
 	const [created, setCreated] = useState<{
 		id: string;
 		secret: string;
@@ -93,6 +103,19 @@ export function ApiKeyCreateDialog({
 		},
 	});
 
+	const globalScopes = useMemo(() => {
+		switch (scopeMode) {
+			case "all":
+				return ALL_SCOPES;
+			case "restricted":
+				return restrictedScopes;
+			case "read-data":
+				return DEFAULT_SCOPES;
+			default:
+				return DEFAULT_SCOPES;
+		}
+	}, [scopeMode, restrictedScopes]);
+
 	const handleClose = () => {
 		if (created) {
 			onSuccessAction(created);
@@ -100,9 +123,9 @@ export function ApiKeyCreateDialog({
 		onOpenChangeAction(false);
 		setTimeout(() => {
 			form.reset();
-			setGlobalScopes(["read:data"]);
+			setScopeMode("all");
+			setRestrictedScopes(DEFAULT_SCOPES);
 			setWebsiteAccess([]);
-			setWebsiteToAdd(undefined);
 			setCreated(null);
 			setCopied(false);
 		}, 200);
@@ -116,55 +139,37 @@ export function ApiKeyCreateDialog({
 		}
 	};
 
-	const toggleGlobalScope = (scope: ApiScope) => {
-		setGlobalScopes((prev) =>
-			prev.includes(scope) ? prev.filter((s) => s !== scope) : [...prev, scope]
-		);
-	};
-
-	const addWebsite = () => {
-		if (!websiteToAdd) {
-			return;
-		}
-		if (websiteAccess.some((e) => e.resourceId === websiteToAdd)) {
+	const addWebsite = (resourceId: string) => {
+		if (websiteAccess.some((e) => e.resourceId === resourceId)) {
 			return;
 		}
 		setWebsiteAccess((prev) => [
 			...prev,
-			{ resourceType: "website", resourceId: websiteToAdd, scopes: [] },
+			{ resourceType: "website", resourceId, scopes: [] },
+			// don't snapshot globalScopes here, as they are computed on submit to ensure they reflect the latest selection
 		]);
-		setWebsiteToAdd(undefined);
 	};
 
 	const removeWebsite = (resourceId: string) => {
 		setWebsiteAccess((prev) => prev.filter((e) => e.resourceId !== resourceId));
 	};
 
-	const toggleWebsiteScope = (resourceId: string, scope: ApiScope) => {
-		setWebsiteAccess((prev) =>
-			prev.map((entry) => {
-				if (entry.resourceId !== resourceId) {
-					return entry;
-				}
-				const scopes = entry.scopes.includes(scope)
-					? entry.scopes.filter((s) => s !== scope)
-					: [...entry.scopes, scope];
-				return { ...entry, scopes };
-			})
-		);
+	const isWebsiteSelected = (resourceId: string) => {
+		return websiteAccess.some((e) => e.resourceId === resourceId);
 	};
 
 	const onSubmit = form.handleSubmit((values) => {
 		const resources: Record<string, ApiScope[]> = {};
 
-		if (globalScopes.length > 0) {
+		if (globalScopes.length > 0 && websiteAccess.length === 0) {
 			resources.global = globalScopes;
 		}
 
 		// Add website-specific scopes with proper prefix
 		for (const entry of websiteAccess) {
-			if (entry.resourceId && entry.scopes.length > 0) {
-				resources[`website:${entry.resourceId}`] = entry.scopes;
+			if (entry.resourceId) {
+				// snapshot globalScopes on submit to ensure it reflects latest selection
+				resources[`website:${entry.resourceId}`] = globalScopes;
 			}
 		}
 
@@ -182,7 +187,7 @@ export function ApiKeyCreateDialog({
 			<Sheet onOpenChange={handleClose} open={open}>
 				<SheetContent className="sm:max-w-md" side="right">
 					<div className="flex h-full flex-col items-center justify-center p-8 text-center">
-						<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+						<div className="zoom-in-90 mb-5 flex h-16 w-16 animate-in items-center justify-center rounded-full bg-green-100 duration-200 ease-out dark:bg-green-900/30">
 							<CheckCircleIcon
 								className="text-green-600 dark:text-green-400"
 								size={32}
@@ -271,56 +276,75 @@ export function ApiKeyCreateDialog({
 						{/* Global Permissions */}
 						<section className="space-y-3">
 							<div className="flex items-center justify-between">
-								<div className="flex items-center gap-2">
-									<GlobeIcon className="text-muted-foreground" size={16} />
-									<Label className="font-medium">Global Permissions</Label>
-								</div>
-								<Badge className="font-normal" variant="secondary">
+								<Label className="font-medium">Global Permissions</Label>
+								<Badge className="font-normal" variant="outline">
 									{globalScopes.length} selected
 								</Badge>
 							</div>
 							<p className="text-muted-foreground text-xs">
-								These permissions apply to all websites. Read Data is included
-								by default.
+								These permissions apply to all websites unless you restrict to
+								specific ones below.
 							</p>
-							<div className="rounded border bg-card p-1">
-								<div className="grid grid-cols-2 gap-1">
-									{SCOPE_OPTIONS.map((scope) => {
-										const isSelected = globalScopes.includes(scope.value);
-										const isDefault = scope.value === "read:data";
-										return (
-											<button
-												className="flex items-center gap-2 rounded px-3 py-2.5 text-left text-sm"
-												key={scope.value}
-												onClick={() => toggleGlobalScope(scope.value)}
-												type="button"
-											>
-												<div
-													className={`flex size-4 shrink-0 items-center justify-center rounded-sm border ${
-														isSelected
-															? "border-primary bg-primary text-primary"
-															: "border-muted-foreground/30"
-													}`}
+							<Tabs
+								defaultValue="all"
+								onValueChange={setScopeMode}
+								value={scopeMode}
+								variant="default"
+							>
+								<TabsList className="w-full bg-background">
+									<TabsTrigger value="all">All</TabsTrigger>
+									<TabsTrigger value="restricted">Restricted</TabsTrigger>
+									<TabsTrigger value="read-data">Read data only</TabsTrigger>
+								</TabsList>
+								<TabsContent
+									className="rounded border bg-card"
+									value="restricted"
+								>
+									<div className="grid grid-cols-2 gap-1">
+										{SCOPE_OPTIONS.map((scope) => {
+											const isSelected = restrictedScopes.includes(scope.value);
+											const isDefault = DEFAULT_SCOPES.includes(scope.value);
+											return (
+												<button
+													className="flex items-center gap-2 rounded px-3 py-2.5 text-left text-sm"
+													key={scope.value}
+													onClick={() =>
+														setRestrictedScopes((prev) => {
+															if (prev.includes(scope.value)) {
+																return prev.filter((s) => s !== scope.value);
+															}
+															return [...prev, scope.value];
+														})
+													}
+													type="button"
 												>
-													{isSelected && (
-														<CheckIcon
-															className="text-white"
-															size={12}
-															weight="bold"
-														/>
+													<div
+														className={`flex size-4 shrink-0 items-center justify-center rounded-sm border ${
+															isSelected
+																? "border-primary bg-primary text-primary"
+																: "border-muted-foreground/30"
+														}`}
+													>
+														{isSelected && (
+															<CheckIcon
+																className="text-white"
+																size={12}
+																weight="bold"
+															/>
+														)}
+													</div>
+													<span className="truncate">{scope.label}</span>
+													{isDefault && (
+														<span className="text-[10px] text-muted-foreground">
+															default
+														</span>
 													)}
-												</div>
-												<span className="truncate">{scope.label}</span>
-												{isDefault && (
-													<span className="text-[10px] text-muted-foreground">
-														default
-													</span>
-												)}
-											</button>
-										);
-									})}
-								</div>
-							</div>
+												</button>
+											);
+										})}
+									</div>
+								</TabsContent>
+							</Tabs>
 						</section>
 
 						{/* Website-Specific Permissions */}
@@ -333,112 +357,58 @@ export function ApiKeyCreateDialog({
 									</span>
 								</div>
 								<p className="text-muted-foreground text-xs">
-									Limit this key to specific websites with custom permissions
+									Limit this key to specific websites
 								</p>
 
-								{/* Add Website */}
-								<div className="flex gap-2">
-									<Select onValueChange={setWebsiteToAdd} value={websiteToAdd}>
-										<SelectTrigger className="h-10 flex-1">
-											<SelectValue placeholder="Select a website..." />
-										</SelectTrigger>
-										<SelectContent>
-											{websites
-												.filter(
-													(w) =>
-														!websiteAccess.some((e) => e.resourceId === w.id)
-												)
-												.map((w: Website) => (
-													<SelectItem key={w.id} value={w.id}>
-														{w.name || w.domain}
-													</SelectItem>
-												))}
-										</SelectContent>
-									</Select>
-									<Button
-										disabled={!websiteToAdd}
-										onClick={addWebsite}
-										size="icon"
-										type="button"
-										variant="outline"
+								<Popover onOpenChange={setPopoverOpen} open={popoverOpen}>
+									<PopoverTrigger asChild>
+										<Button
+											aria-expanded={popoverOpen}
+											className="w-full justify-between"
+											role="combobox"
+											variant="outline"
+										>
+											{websiteAccess.length > 0
+												? `${websiteAccess.map((entry) => websites?.find((w) => w.id === entry.resourceId)?.name || entry.resourceId).join(", ")}`
+												: "Select websites..."}
+											<CaretUpDownIcon className="size-3.5 opacity-50" />
+										</Button>
+									</PopoverTrigger>
+									<PopoverContent
+										align="start"
+										className="w-(--radix-popover-trigger-width) p-0"
 									>
-										<PlusIcon size={16} />
-									</Button>
-								</div>
-
-								{/* Website Access List */}
-								{websiteAccess.length > 0 && (
-									<div className="space-y-3">
-										{websiteAccess.map((entry) => {
-											const website = websites.find(
-												(w) => w.id === entry.resourceId
-											);
-											return (
-												<div
-													className="rounded border bg-muted/20 p-3"
-													key={entry.resourceId}
-												>
-													<div className="mb-3 flex items-center justify-between">
-														<span className="font-medium text-sm">
-															{(website?.name || website?.domain) ??
-																entry.resourceId}
-														</span>
-														<Button
-															className="size-7"
-															onClick={() =>
-																removeWebsite(entry.resourceId ?? "")
-															}
-															size="icon"
-															type="button"
-															variant="ghost"
+										<Command>
+											<CommandInput placeholder="Search websites..." />
+											<CommandList>
+												<CommandEmpty>No websites found.</CommandEmpty>
+												<CommandGroup>
+													{(websites as Website[]).map((website) => (
+														<CommandItem
+															key={website.id}
+															onSelect={(currentValue) => {
+																isWebsiteSelected(currentValue)
+																	? removeWebsite(currentValue)
+																	: addWebsite(currentValue);
+																setPopoverOpen(false);
+															}}
+															value={website.id}
 														>
-															<TrashIcon size={14} />
-														</Button>
-													</div>
-													<div className="grid grid-cols-2 gap-1">
-														{SCOPE_OPTIONS.slice(0, 6).map((scope) => {
-															const isSelected = entry.scopes.includes(
-																scope.value
-															);
-															return (
-																<button
-																	className={`flex items-center gap-2 rounded px-2 py-1.5 text-left text-xs ${
-																		isSelected
-																			? "bg-primary/20 text-foreground"
-																			: "hover:bg-muted"
-																	}`}
-																	key={scope.value}
-																	onClick={() =>
-																		toggleWebsiteScope(
-																			entry.resourceId ?? "",
-																			scope.value
-																		)
-																	}
-																	type="button"
-																>
-																	<div
-																		className={`flex size-3 shrink-0 items-center justify-center rounded-sm border ${
-																			isSelected
-																				? "border-primary bg-primary text-primary-foreground"
-																				: "border-muted-foreground/30"
-																		}`}
-																	>
-																		{isSelected && (
-																			<CheckIcon size={8} weight="bold" />
-																		)}
-																	</div>
-																	<span className="truncate">
-																		{scope.label}
-																	</span>
-																</button>
-															);
-														})}
-													</div>
-												</div>
-											);
-										})}
-									</div>
-								)}
+															{website.name || website.domain}
+															<CheckIcon
+																className={`ml-auto size-3.5 ${
+																	isWebsiteSelected(website.id)
+																		? "opacity-100"
+																		: "opacity-0"
+																}`}
+															/>
+														</CommandItem>
+													))}
+												</CommandGroup>
+											</CommandList>
+										</Command>
+									</PopoverContent>
+								</Popover>
 							</section>
 						)}
 					</SheetBody>
diff --git a/apps/dashboard/components/ui/button.tsx b/apps/dashboard/components/ui/button.tsx
index 2333554ce..c60696af4 100644
--- a/apps/dashboard/components/ui/button.tsx
+++ b/apps/dashboard/components/ui/button.tsx
@@ -12,9 +12,9 @@ const buttonVariants = cva(
 				default:
 					'bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-accent-disabled disabled:text-neutral-500',
 				destructive:
-					'bg-destructive text-white disabled:bg-accent-disabled disabled:text-neutral-500  hover:bg-destructive-brighter focus-visible:ring-destructive/20',
+					'bg-destructive text-white disabled:bg-accent-disabled disabled:border-accent-disabled disabled:text-neutral-500 hover:bg-destructive-brighter focus-visible:ring-destructive/20',
 				outline:
-					'border text-accent-foreground bg-transparent hover:border-transparent disabled:bg-accent-disabled disabled:text-neutral-400  hover:bg-secondary hover:text-accent-foreground',
+					'border text-accent-foreground disabled:border-accent-disabled bg-transparent disabled:bg-accent-disabled disabled:text-muted-foreground hover:bg-secondary hover:text-accent-foreground',
 				secondary:
 					'bg-secondary  text-accent-foreground hover:bg-secondary-brighter disabled:bg-accent-disabled disabled:text-neutral-500',
 				ghost:
diff --git a/apps/dashboard/components/ui/tabs.tsx b/apps/dashboard/components/ui/tabs.tsx
index 40295b33e..697ca9bce 100644
--- a/apps/dashboard/components/ui/tabs.tsx
+++ b/apps/dashboard/components/ui/tabs.tsx
@@ -75,7 +75,7 @@ function TabsList({
 
 	useLayoutEffect(() => {
 		if (
-			(variant !== "underline" && variant !== "navigation") ||
+			(!["navigation", "underline", "default"].includes(variant) ) ||
 			!listRef.current ||
 			!activeValue
 		)
@@ -149,6 +149,7 @@ function TabsList({
 
 	// Default variant
 	return (
+		<div className="relative">
 		<TabsPrimitive.List
 			className={cn(
 				"inline-flex h-9 w-fit items-center justify-center rounded bg-accent-brighter p-[3px] text-muted-foreground",
@@ -158,6 +159,11 @@ function TabsList({
 			ref={listRef}
 			{...props}
 		/>
+		<div
+					className="absolute inset-0 top-1 bottom-1 z-0 rounded-md bg-secondary-brightest border border-accent-foreground/10 w-full transition-all duration-200 ease-out"
+					style={indicatorStyle}
+				/>
+		</div>
 	);
 }
 
@@ -248,10 +254,12 @@ function TabsTrigger({
 	return (
 		<TabsPrimitive.Trigger
 			className={cn(
-				"inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1",
+				"z-1 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1",
 				"font-medium text-muted-foreground data-[state=active]:text-foreground text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px]",
-				"focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-accent-foreground/10",
-				"data-[state=active]:bg-secondary-brightest [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+				" [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				// "data-[state=active]:bg-secondary-brightest data-[state=active]:border-accent-foreground/10",
+				 // disable trigger active styling so TabList default `absolute` indicator is visible 
 				className
 			)}
 			data-slot="tabs-trigger"
diff --git a/apps/docs/content/docs/api-keys.mdx b/apps/docs/content/docs/api-keys.mdx
index 220b810e9..20a300aa8 100644
--- a/apps/docs/content/docs/api-keys.mdx
+++ b/apps/docs/content/docs/api-keys.mdx
@@ -21,9 +21,14 @@ An API key authenticates server-to-server calls to Databuddy. It supports fine-g
 ### Create a key
 
 1. Open [Organization Settings → API Keys](https://app.databuddy.cc/organizations/settings/api-keys)
-2. Click “Create API Key”
-3. Choose a name, optional organization, scopes, and resource access
-4. Copy the secret immediately (it’s only shown once)
+2. Click "Create API Key"
+3. Enter a key name
+4. Choose how broad the key should be:
+   - `All`: grants all available scopes across the organization
+   - `Restricted`: lets you customize the key's global scopes
+   - `Read data only`: quickly creates a read-only key
+5. Optionally select specific websites to limit the key to those websites only
+6. Copy the secret immediately (it's only shown once)
 
 We only display the `prefix` and first characters (`start`) later for identification. Never share the full secret.
 
@@ -59,12 +64,16 @@ Grant only what you need. Prefer resource-scoped access where possible.
 
 ### Resource access
 
+API keys are created from Organization Settings and default to organization-wide access.
+
 Access can be scoped to:
 
-- **global**: Applies to all websites in the organization
-- **website**: Applies to a specific website only
+- **global**: Applies the selected scopes to all websites in the organization
+- **website**: Applies the selected scopes only to the specific websites you choose
+
+If you add website restrictions, the key no longer inherits global read access by default.
 
-Example: a key with `read:data` scoped to a single website can read analytics only for that website, not others in the organization.
+Example: a key with `read:data` limited to a single website can read analytics only for that website, not others in the organization.
 
 ### Errors
 
@@ -115,6 +124,7 @@ Logs include IP addresses, user agents, and timestamps for security monitoring.
 - Treat API keys like passwords; don't commit them to source control
 - Use environment variables or secret managers
 - Share only the prefix and `start` snippet for identification
+- Start with `Read data only` or `Restricted` when full global access is not needed
 - Use least-privilege scopes and resource scoping
 - Rotate keys periodically and revoke unused keys
 - Monitor audit logs for suspicious activity
diff --git a/apps/docs/content/docs/api/authentication.mdx b/apps/docs/content/docs/api/authentication.mdx
index 51c552a82..8ee8a98b7 100644
--- a/apps/docs/content/docs/api/authentication.mdx
+++ b/apps/docs/content/docs/api/authentication.mdx
@@ -30,7 +30,10 @@ Alternatively, use Bearer token format:
 1. Go to **[Dashboard → Organization Settings → API Keys](https://app.databuddy.cc/organizations/settings/api-keys)**
 2. Click **Create API Key**
 3. Enter a descriptive name (e.g., "Production Server", "CI Pipeline")
-4. Select the required scopes
+4. Choose a preset:
+   - **All** for full organization-wide access
+   - **Restricted** to customize global scopes
+   - **Read data only** for a quick read-only key
 5. Optionally restrict access to specific websites
 6. Copy and securely store your key — it won't be shown again
 
@@ -59,14 +62,14 @@ API keys can have two access levels:
 
 ### Global Access
 
-Access all websites in your account or organization. Best for:
+Access all websites in your account or organization with the selected global scopes. Best for:
 - Internal dashboards
 - Automated reporting
 - Organization-wide analytics
 
 ### Website-Specific Access
 
-Access only specified websites. Best for:
+Access only specified websites. Restricted keys do not inherit a default global `read:data` scope. Best for:
 - Third-party integrations
 - Client-specific keys
 - Least-privilege security
diff --git a/apps/docs/content/docs/api/index.mdx b/apps/docs/content/docs/api/index.mdx
index 2d0e56881..a6cd6c6c7 100644
--- a/apps/docs/content/docs/api/index.mdx
+++ b/apps/docs/content/docs/api/index.mdx
@@ -22,6 +22,8 @@ Access your analytics data programmatically with Databuddy's REST API. All endpo
 
 **1. Get your API key** from [Dashboard → Organization Settings → API Keys](https://app.databuddy.cc/organizations/settings/api-keys)
 
+API keys start with organization-wide access by default, and you can switch to restricted scopes or limit a key to specific websites during creation.
+
 **2. List your websites:**
 
 <CodeBlock