From f9f26bb590d4458afdee08426cb1860a7b0e7e1d Mon Sep 17 00:00:00 2001
From: RevIQ <me@rev.iq>
Date: Sat, 10 Jan 2026 15:26:49 +0800
Subject: [PATCH] Add shadcn UI components and replace raw HTML form elements

- Install 8 shadcn components: select, skeleton, checkbox, switch, avatar,
  dropdown-menu, tooltip, textarea
- Replace raw <select> elements with Select component in members page
- Replace raw checkbox with Checkbox component in admin user details
- Add Skeleton loading states to admin pages (users list, orgs list,
  user details) for better UX

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../ui/avatar/avatar-fallback.svelte          | 17 +++++
 .../components/ui/avatar/avatar-image.svelte  | 17 +++++
 .../lib/components/ui/avatar/avatar.svelte    | 19 ++++++
 .../src/lib/components/ui/avatar/index.ts     | 13 ++++
 .../components/ui/checkbox/checkbox.svelte    | 36 ++++++++++
 .../src/lib/components/ui/checkbox/index.ts   |  6 ++
 .../dropdown-menu-checkbox-group.svelte       | 16 +++++
 .../dropdown-menu-checkbox-item.svelte        | 43 ++++++++++++
 .../dropdown-menu-content.svelte              | 31 +++++++++
 .../dropdown-menu-group-heading.svelte        | 22 +++++++
 .../dropdown-menu/dropdown-menu-group.svelte  |  8 +++
 .../dropdown-menu/dropdown-menu-item.svelte   | 27 ++++++++
 .../dropdown-menu/dropdown-menu-label.svelte  | 24 +++++++
 .../dropdown-menu/dropdown-menu-portal.svelte |  7 ++
 .../dropdown-menu-radio-group.svelte          | 16 +++++
 .../dropdown-menu-radio-item.svelte           | 33 ++++++++++
 .../dropdown-menu-separator.svelte            | 17 +++++
 .../dropdown-menu-shortcut.svelte             | 20 ++++++
 .../dropdown-menu-sub-content.svelte          | 20 ++++++
 .../dropdown-menu-sub-trigger.svelte          | 29 ++++++++
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |  8 +++
 .../dropdown-menu-trigger.svelte              | 10 +++
 .../ui/dropdown-menu/dropdown-menu.svelte     |  8 +++
 .../lib/components/ui/dropdown-menu/index.ts  | 54 +++++++++++++++
 .../src/lib/components/ui/select/index.ts     | 37 +++++++++++
 .../ui/select/select-content.svelte           | 45 +++++++++++++
 .../ui/select/select-group-heading.svelte     | 21 ++++++
 .../components/ui/select/select-group.svelte  |  8 +++
 .../components/ui/select/select-item.svelte   | 38 +++++++++++
 .../components/ui/select/select-label.svelte  | 20 ++++++
 .../components/ui/select/select-portal.svelte |  7 ++
 .../select/select-scroll-down-button.svelte   | 20 ++++++
 .../ui/select/select-scroll-up-button.svelte  | 20 ++++++
 .../ui/select/select-separator.svelte         | 18 +++++
 .../ui/select/select-trigger.svelte           | 29 ++++++++
 .../lib/components/ui/select/select.svelte    | 11 ++++
 .../src/lib/components/ui/skeleton/index.ts   |  7 ++
 .../components/ui/skeleton/skeleton.svelte    | 17 +++++
 .../src/lib/components/ui/switch/index.ts     |  7 ++
 .../lib/components/ui/switch/switch.svelte    | 29 ++++++++
 .../src/lib/components/ui/textarea/index.ts   |  7 ++
 .../components/ui/textarea/textarea.svelte    | 23 +++++++
 .../src/lib/components/ui/tooltip/index.ts    | 19 ++++++
 .../ui/tooltip/tooltip-content.svelte         | 52 +++++++++++++++
 .../ui/tooltip/tooltip-portal.svelte          |  7 ++
 .../ui/tooltip/tooltip-provider.svelte        |  7 ++
 .../ui/tooltip/tooltip-trigger.svelte         |  8 +++
 .../lib/components/ui/tooltip/tooltip.svelte  |  8 +++
 .../src/routes/admin/orgs/+page.svelte        | 53 +++++++++++----
 .../src/routes/admin/users/+page.svelte       | 39 +++++++++--
 .../routes/admin/users/[email]/+page.svelte   | 66 ++++++++++++++++---
 .../dashboard/[slug]/members/+page.svelte     | 46 ++++++++-----
 52 files changed, 1129 insertions(+), 41 deletions(-)
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/avatar/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/checkbox/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-content.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-group.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-item.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-label.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-portal.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-separator.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/select/select.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/skeleton/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/skeleton/skeleton.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/switch/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/switch/switch.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/textarea/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/textarea/textarea.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/tooltip/index.ts
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte
 create mode 100644 apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip.svelte

diff --git a/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-fallback.svelte b/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..16bb678
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-image.svelte b/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..ab2969a
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("aspect-square size-full", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar.svelte b/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..75bf628
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  loadingStatus = $bindable("loading"),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/avatar/index.ts b/apps/publisher-dashboard/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..a8ad6d7
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Image from "./avatar-image.svelte";
+
+export {
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/checkbox/checkbox.svelte b/apps/publisher-dashboard/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..14dc90b
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { Checkbox as CheckboxPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/checkbox/index.ts b/apps/publisher-dashboard/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..d1b2485
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+  Root,
+  //
+  Root as Checkbox,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..5fe30f7
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable([]),
+  ...restProps
+}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..49be469
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+  children?: Snippet;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..ef29949
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  sideOffset = 4,
+  portalProps,
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.ContentProps & {
+  portalProps?: WithoutChildrenOrChild<
+    ComponentProps<typeof DropdownMenuPortal>
+  >;
+} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..a84920a
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  ...restProps
+}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..9b8c8e1
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..e1278b4
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  variant = "default",
+  ...restProps
+}: DropdownMenuPrimitive.ItemProps & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..9ab03be
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..79e897c
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..f1dced8
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  ...restProps
+}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..d4f7ef3
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+import CircleIcon from "@lucide/svelte/icons/circle";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..f7b3d5f
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..a27ab29
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..67f6303
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..cc5bc78
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: DropdownMenuPrimitive.SubTriggerProps & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..48d664b
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..51774fa
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  ...restProps
+}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..f1b7449
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..41ef3f9
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/index.ts b/apps/publisher-dashboard/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..99160bb
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Content from "./select-content.svelte";
+import Group from "./select-group.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Label from "./select-label.svelte";
+import Portal from "./select-portal.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import Separator from "./select-separator.svelte";
+import Trigger from "./select-trigger.svelte";
+
+export {
+  Root,
+  Group,
+  Label,
+  Item,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  GroupHeading,
+  Portal,
+  //
+  Root as Select,
+  Group as SelectGroup,
+  Label as SelectLabel,
+  Item as SelectItem,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton,
+  GroupHeading as SelectGroupHeading,
+  Portal as SelectPortal,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-content.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..d07be69
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "$lib/utils.js";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+import SelectPortal from "./select-portal.svelte";
+import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  portalProps,
+  children,
+  preventScroll = true,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ContentProps> & {
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-group-heading.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..91f4085
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-group.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..1a12fae
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
+  $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-item.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..992d361
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+import CheckIcon from "@lucide/svelte/icons/check";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  value,
+  label,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-label.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..13d913f
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-portal.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 0000000..099e8cb
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..0d8719a
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..c367d14
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-separator.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..dc66875
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { Separator as SeparatorPrimitive } from "bits-ui";
+import { Separator } from "$lib/components/ui/separator/index.js";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select-trigger.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..b92b3af
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  size = "default",
+  ...restProps
+}: WithoutChild<SelectPrimitive.TriggerProps> & {
+  size?: "sm" | "default";
+} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/select/select.svelte b/apps/publisher-dashboard/src/lib/components/ui/select/select.svelte
new file mode 100644
index 0000000..c9bb6d3
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let {
+  open = $bindable(false),
+  value = $bindable(),
+  ...restProps
+}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/skeleton/index.ts b/apps/publisher-dashboard/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..cb26b2c
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+  Root,
+  //
+  Root as Skeleton,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/skeleton/skeleton.svelte b/apps/publisher-dashboard/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..50afe9c
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-accent animate-pulse rounded-md", className)}
+	{...restProps}
+></div>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/switch/index.ts b/apps/publisher-dashboard/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..99620eb
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+  Root,
+  //
+  Root as Switch,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/switch/switch.svelte b/apps/publisher-dashboard/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..37300f2
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+import { Switch as SwitchPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  checked = $bindable(false),
+  ...restProps
+}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/textarea/index.ts b/apps/publisher-dashboard/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..c14b903
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+  Root,
+  //
+  Root as Textarea,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/textarea/textarea.svelte b/apps/publisher-dashboard/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..dec8688
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  class: className,
+  "data-slot": dataSlot = "textarea",
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/tooltip/index.ts b/apps/publisher-dashboard/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..a7865f5
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Content from "./tooltip-content.svelte";
+import Portal from "./tooltip-portal.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+
+export {
+  Root,
+  Trigger,
+  Content,
+  Provider,
+  Portal,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider,
+  Portal as TooltipPortal,
+};
diff --git a/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..118ccac
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "$lib/utils.js";
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+import TooltipPortal from "./tooltip-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 0,
+  side = "top",
+  children,
+  arrowClasses,
+  portalProps,
+  ...restProps
+}: TooltipPrimitive.ContentProps & {
+  arrowClasses?: string;
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 0000000..9b32bbf
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 0000000..7bea75e
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..57370f8
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps =
+  $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip.svelte b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 0000000..90e83e6
--- /dev/null
+++ b/apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps =
+  $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte b/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte
index 916ca58..f98027f 100644
--- a/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
-import {
-  AlertCircle,
-  Building,
-  Eye,
-  Loader2,
-  Plus,
-  Trash2,
-} from "@lucide/svelte";
+import { AlertCircle, Building, Eye, Plus, Trash2 } from "@lucide/svelte";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import { toast } from "svelte-sonner";
 import { api } from "$lib/api/client.js";
@@ -19,6 +12,7 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 import {
   Table,
   TableBody,
@@ -89,11 +83,46 @@ async function executeConfirmAction() {
 <DashboardLayout title="Organizations">
   <div class="space-y-6">
     {#if orgsQuery.isPending}
-      <!-- Loading state -->
-      <div class="flex flex-col items-center justify-center py-16">
-        <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
-        <p class="mt-4 text-sm text-muted-foreground">Loading organizations...</p>
+      <!-- Loading skeleton -->
+      <div class="flex items-center justify-between">
+        <Skeleton class="h-7 w-40" />
+        <Skeleton class="h-9 w-40" />
       </div>
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-base">
+            <Building class="h-4 w-4" />
+            <Skeleton class="h-5 w-32" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Slug</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Created At</TableHead>
+                <TableHead class="w-[120px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {#each Array(5) as _}
+                <TableRow>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-32" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell>
+                    <div class="flex items-center gap-1">
+                      <Skeleton class="h-8 w-8" />
+                      <Skeleton class="h-8 w-8" />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     {:else if orgsQuery.error}
       <!-- Error state -->
       <div class="flex flex-col items-center justify-center py-16">
diff --git a/apps/publisher-dashboard/src/routes/admin/users/+page.svelte b/apps/publisher-dashboard/src/routes/admin/users/+page.svelte
index eb02f1f..a89f39a 100644
--- a/apps/publisher-dashboard/src/routes/admin/users/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/admin/users/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { AlertCircle, Check, Eye, Loader2, Users, X } from "@lucide/svelte";
+import { AlertCircle, Check, Eye, Users, X } from "@lucide/svelte";
 import { createQuery } from "@tanstack/svelte-query";
 import { api } from "$lib/api/client.js";
 import { SuperuserBadge } from "$lib/components/admin/index.js";
@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 import {
   Table,
   TableBody,
@@ -38,9 +39,39 @@ const usersQuery = createQuery(() => ({
 
 <DashboardLayout title="Users">
   {#if usersQuery.isPending}
-    <div class="flex flex-col items-center justify-center py-16">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
-      <p class="mt-4 text-sm text-muted-foreground">Loading users...</p>
+    <div class="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-base">
+            <Users class="h-4 w-4" />
+            <Skeleton class="h-5 w-20" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Email</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Email Verified</TableHead>
+                <TableHead>Superuser</TableHead>
+                <TableHead class="w-[100px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {#each Array(5) as _}
+                <TableRow>
+                  <TableCell><Skeleton class="h-4 w-40" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-4" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-16" /></TableCell>
+                  <TableCell><Skeleton class="h-8 w-16" /></TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     </div>
   {:else if usersQuery.error}
     <div class="flex flex-col items-center justify-center py-16">
diff --git a/apps/publisher-dashboard/src/routes/admin/users/[email]/+page.svelte b/apps/publisher-dashboard/src/routes/admin/users/[email]/+page.svelte
index 218b551..e85373a 100644
--- a/apps/publisher-dashboard/src/routes/admin/users/[email]/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/admin/users/[email]/+page.svelte
@@ -25,6 +25,9 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Checkbox } from "$lib/components/ui/checkbox/index.js";
+import { Label } from "$lib/components/ui/label/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 
 /**
  * Admin user details page
@@ -154,9 +157,51 @@ async function handleConfirmEmail() {
   </div>
 
   {#if userDetailsQuery.isPending}
-    <div class="flex flex-col items-center justify-center py-16">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
-      <p class="mt-4 text-sm text-muted-foreground">Loading user...</p>
+    <div class="space-y-6">
+      <!-- Header Section Skeleton -->
+      <Card>
+        <CardContent class="pt-6">
+          <div class="flex items-center gap-4">
+            <Skeleton class="h-16 w-16 rounded-full" />
+            <div class="flex-1 space-y-2">
+              <Skeleton class="h-6 w-48" />
+              <Skeleton class="h-4 w-32" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Profile Info Skeleton -->
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-5 w-40" />
+          <Skeleton class="h-4 w-48" />
+        </CardHeader>
+        <CardContent>
+          <div class="grid gap-4 sm:grid-cols-2">
+            {#each Array(5) as _}
+              <div class="space-y-1">
+                <Skeleton class="h-4 w-20" />
+                <Skeleton class="h-5 w-32" />
+              </div>
+            {/each}
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Permissions Skeleton -->
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-5 w-24" />
+          <Skeleton class="h-4 w-36" />
+        </CardHeader>
+        <CardContent>
+          <div class="flex items-center gap-3">
+            <Skeleton class="h-4 w-4" />
+            <Skeleton class="h-4 w-40" />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   {:else if userDetailsQuery.error}
     <div class="flex flex-col items-center justify-center py-16">
@@ -256,16 +301,17 @@ async function handleConfirmEmail() {
               </AlertDescription>
             </Alert>
           {:else}
-            <label class="flex cursor-pointer items-center gap-3">
-              <input
-                type="checkbox"
+            <div class="flex items-center gap-3">
+              <Checkbox
+                id="superuser-checkbox"
                 checked={isSuperuser}
-                onchange={(e) => (isSuperuser = e.currentTarget.checked)}
+                onCheckedChange={(checked) => { isSuperuser = checked === true; }}
                 disabled={isViewingSelf || isSaving}
-                class="h-4 w-4 rounded border-input bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
-              <span class="text-sm font-medium leading-none">Grant superuser privileges</span>
-            </label>
+              <Label for="superuser-checkbox" class="cursor-pointer">
+                Grant superuser privileges
+              </Label>
+            </div>
           {/if}
         </CardContent>
         {#if !isViewingSelf}
diff --git a/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte b/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte
index b3bfed8..1f350cc 100644
--- a/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte
@@ -22,6 +22,12 @@ import {
 } from "$lib/components/ui/card";
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "$lib/components/ui/select";
 import {
   Table,
   TableBody,
@@ -284,16 +290,21 @@ const availableInviteRoles = $derived.by(() => {
               </div>
               <div class="w-full space-y-2 sm:w-32">
                 <Label for="invite-role">Role</Label>
-                <select
-                  id="invite-role"
-                  bind:value={inviteRole}
+                <Select
+                  type="single"
+                  value={inviteRole}
+                  onValueChange={(v) => { if (v) inviteRole = v as typeof inviteRole; }}
                   disabled={isInviting}
-                  class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                 >
-                  {#each availableInviteRoles as role}
-                    <option value={role}>{role.charAt(0).toUpperCase() + role.slice(1)}</option>
-                  {/each}
-                </select>
+                  <SelectTrigger id="invite-role" class="w-full">
+                    {inviteRole.charAt(0).toUpperCase() + inviteRole.slice(1)}
+                  </SelectTrigger>
+                  <SelectContent>
+                    {#each availableInviteRoles as role}
+                      <SelectItem value={role} label={role.charAt(0).toUpperCase() + role.slice(1)} />
+                    {/each}
+                  </SelectContent>
+                </Select>
               </div>
               <Button type="submit" disabled={isInviting || !inviteEmail.trim()}>
                 {#if isInviting}
@@ -398,15 +409,20 @@ const availableInviteRoles = $derived.by(() => {
                     </TableCell>
                     <TableCell>
                       {#if isOwner && !isCurrentUser}
-                        <select
+                        <Select
+                          type="single"
                           value={member.role}
-                          onchange={(e) => handleUpdateRole(member.userId, e.currentTarget.value as "owner" | "admin" | "member")}
-                          class="h-7 rounded-md border border-input bg-transparent px-2 text-xs shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          onValueChange={(v) => { if (v) handleUpdateRole(member.userId, v as "owner" | "admin" | "member"); }}
                         >
-                          <option value="member">Member</option>
-                          <option value="admin">Admin</option>
-                          <option value="owner">Owner</option>
-                        </select>
+                          <SelectTrigger size="sm" class="h-7 w-24 text-xs">
+                            {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="member" label="Member" />
+                            <SelectItem value="admin" label="Admin" />
+                            <SelectItem value="owner" label="Owner" />
+                          </SelectContent>
+                        </Select>
                       {:else}
                         <RoleBadge role={member.role} />
                       {/if}