diff --git a/docs/src/lib/components/demos/combobox-demo.svelte b/docs/src/lib/components/demos/combobox-demo.svelte
index 1284b442f..4a6abe538 100644
--- a/docs/src/lib/components/demos/combobox-demo.svelte
+++ b/docs/src/lib/components/demos/combobox-demo.svelte
@@ -61,16 +61,16 @@
 	</div>
 	<Combobox.Portal>
 		<Combobox.Content
-			class="border-muted bg-background shadow-popover max-h-96 w-[var(--bits-combobox-anchor-width)] min-w-[var(--bits-combobox-anchor-width)] rounded-xl border px-1 py-3 outline-none"
+			class="focus-override border-muted bg-background shadow-popover 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-combobox-anchor-width)] min-w-[var(--bits-combobox-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
 			sideOffset={10}
 		>
-			<Combobox.ScrollUpButton class="flex w-full items-center justify-center">
+			<Combobox.ScrollUpButton class="flex w-full items-center justify-center py-1">
 				<CaretDoubleUp class="size-3" />
 			</Combobox.ScrollUpButton>
 			<Combobox.Viewport class="p-1">
 				{#each filteredFruits as fruit, i (i + fruit.value)}
 					<Combobox.Item
-						class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize  outline-none"
+						class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
 						value={fruit.value}
 						label={fruit.label}
 					>
@@ -89,7 +89,7 @@
 					</span>
 				{/each}
 			</Combobox.Viewport>
-			<Combobox.ScrollDownButton class="flex w-full items-center justify-center">
+			<Combobox.ScrollDownButton class="flex w-full items-center justify-center py-1">
 				<CaretDoubleDown class="size-3" />
 			</Combobox.ScrollDownButton>
 		</Combobox.Content>
diff --git a/docs/src/lib/components/demos/select-demo-custom.svelte b/docs/src/lib/components/demos/select-demo-custom.svelte
index 6d8b96a2e..ff8ecbf67 100644
--- a/docs/src/lib/components/demos/select-demo-custom.svelte
+++ b/docs/src/lib/components/demos/select-demo-custom.svelte
@@ -51,14 +51,14 @@
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
-			class="border-muted bg-background shadow-popover w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border px-1 py-3 outline-none"
+			class="focus-override border-muted bg-background shadow-popover 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
 			sideOffset={10}
 			{...contentProps}
 		>
 			<Select.ScrollUpButton class="flex w-full items-center justify-center">
 				<CaretDoubleUp class="size-3" />
 			</Select.ScrollUpButton>
-			<Select.Viewport class="max-h-96 p-1">
+			<Select.Viewport class="p-1">
 				{#each themes as theme, i (i + theme.value)}
 					<Select.Item
 						class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
diff --git a/docs/src/lib/components/demos/select-demo-multiple.svelte b/docs/src/lib/components/demos/select-demo-multiple.svelte
index ba8d8a983..cffb0f489 100644
--- a/docs/src/lib/components/demos/select-demo-multiple.svelte
+++ b/docs/src/lib/components/demos/select-demo-multiple.svelte
@@ -42,7 +42,7 @@
 
 <Select.Root type="multiple" bind:value>
 	<Select.Trigger
-		class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
+		class="h-input rounded-9px border-border-input bg-background data-[placeholder]:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
 		aria-label="Select a theme"
 	>
 		<Palette class="text-muted-foreground mr-[9px] size-6" />
@@ -51,13 +51,13 @@
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
-			class="border-muted bg-background shadow-popover  w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border px-1 py-3 outline-none"
+			class="focus-override border-muted bg-background shadow-popover 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
 			sideOffset={10}
 		>
 			<Select.ScrollUpButton class="flex w-full items-center justify-center">
 				<CaretDoubleUp class="size-3" />
 			</Select.ScrollUpButton>
-			<Select.Viewport class="max-h-96 p-1">
+			<Select.Viewport class="p-1">
 				{#each themes as theme, i (i + theme.value)}
 					<Select.Item
 						class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none"
diff --git a/docs/src/lib/components/demos/select-demo-transition.svelte b/docs/src/lib/components/demos/select-demo-transition.svelte
index f1e358529..0c00aad3f 100644
--- a/docs/src/lib/components/demos/select-demo-transition.svelte
+++ b/docs/src/lib/components/demos/select-demo-transition.svelte
@@ -47,7 +47,7 @@
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
-			class="focus-override border-muted bg-background shadow-popover z-50  w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none"
+			class="focus-override border-muted bg-background shadow-popover z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none"
 			sideOffset={10}
 			forceMount
 		>
@@ -58,7 +58,7 @@
 							<Select.ScrollUpButton class="flex w-full items-center justify-center">
 								<CaretDoubleUp class="size-3" />
 							</Select.ScrollUpButton>
-							<Select.Viewport class="max-h-96 p-1">
+							<Select.Viewport class="p-1">
 								{#each themes as theme, i (i + theme.value)}
 									<Select.Item
 										class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75"
diff --git a/docs/src/lib/components/demos/select-demo.svelte b/docs/src/lib/components/demos/select-demo.svelte
index 480cf3039..64c5ad8b2 100644
--- a/docs/src/lib/components/demos/select-demo.svelte
+++ b/docs/src/lib/components/demos/select-demo.svelte
@@ -37,7 +37,7 @@
 
 <Select.Root type="single" onValueChange={(v) => (value = v)}>
 	<Select.Trigger
-		class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
+		class="h-input rounded-9px border-border-input bg-background data-[placeholder]:text-foreground-alt/50 inline-flex w-[296px] select-none items-center border px-[11px] text-sm transition-colors"
 		aria-label="Select a theme"
 	>
 		<Palette class="text-muted-foreground mr-[9px] size-6" />
@@ -46,13 +46,13 @@
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
-			class="focus-override border-muted bg-background shadow-popover 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50  w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+			class="focus-override border-muted bg-background shadow-popover 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border px-1 py-3 outline-none data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
 			sideOffset={10}
 		>
 			<Select.ScrollUpButton class="flex w-full items-center justify-center">
 				<CaretDoubleUp class="size-3" />
 			</Select.ScrollUpButton>
-			<Select.Viewport class="max-h-96 p-1">
+			<Select.Viewport class="p-1">
 				{#each themes as theme, i (i + theme.value)}
 					<Select.Item
 						class="rounded-button data-[highlighted]:bg-muted flex h-10 w-full select-none items-center py-3 pl-5 pr-1.5 text-sm capitalize outline-none  data-[disabled]:opacity-50"
diff --git a/packages/bits-ui/src/lib/bits/select/select.svelte.ts b/packages/bits-ui/src/lib/bits/select/select.svelte.ts
index 9bef047ac..f86407b70 100644
--- a/packages/bits-ui/src/lib/bits/select/select.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/select/select.svelte.ts
@@ -1,5 +1,6 @@
 import { Context, Previous, watch } from "runed";
 import {
+	afterSleep,
 	afterTick,
 	onDestroyEffect,
 	srOnlyStyles,
@@ -1126,12 +1127,6 @@ class SelectScrollButtonImplState {
 				return;
 			}
 			if (this.isUserScrolling) return;
-
-			// afterSleep(0, () => {
-			// 	const activeItem = this.root.highlightedNode;
-			// 	console.log("scrolling into view");
-			// 	activeItem?.scrollIntoView({ block: "nearest" });
-			// });
 		});
 
 		$effect(() => {
@@ -1195,6 +1190,7 @@ class SelectScrollDownButtonState {
 	content: SelectContentState;
 	root: SelectBaseRootState;
 	canScrollDown = $state(false);
+	scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null = null;
 
 	constructor(readonly state: SelectScrollButtonImplState) {
 		this.content = state.content;
@@ -1210,6 +1206,20 @@ class SelectScrollDownButtonState {
 
 			return on(this.content.viewportNode, "scroll", () => this.handleScroll());
 		});
+
+		watch(
+			() => this.state.mounted,
+			() => {
+				if (!this.state.mounted) return;
+				if (this.scrollIntoViewTimer) {
+					clearTimeout(this.scrollIntoViewTimer);
+				}
+				this.scrollIntoViewTimer = afterSleep(5, () => {
+					const activeItem = this.root.highlightedNode;
+					activeItem?.scrollIntoView({ block: "nearest" });
+				});
+			}
+		);
 	}
 	/**
 	 * @param manual - if true, it means the function was invoked manually outside of an event