diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5bcb6c5053..a98671cf5d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,6 @@
 				"@fortawesome/free-solid-svg-icons": "^6.2.0",
 				"@leeoniya/ufuzzy": "^0.8.0",
 				"@redocly/json-to-json-schema": "^0.0.1",
-				"@sveltejs/svelte-virtual-list": "^3.0.1",
 				"@types/autosize": "^4.0.1",
 				"@types/node": "^18.11.9",
 				"async-mutex": "^0.4.0",
@@ -485,11 +484,6 @@
 				"vite": "^3.0.0"
 			}
 		},
-		"node_modules/@sveltejs/svelte-virtual-list": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
-			"integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ=="
-		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.1.tgz",
@@ -7346,11 +7340,6 @@
 				"tiny-glob": "^0.2.9"
 			}
 		},
-		"@sveltejs/svelte-virtual-list": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
-			"integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ=="
-		},
 		"@sveltejs/vite-plugin-svelte": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8dc99a7095..5af25c35da 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,7 +63,6 @@
 		"@fortawesome/free-solid-svg-icons": "^6.2.0",
 		"@leeoniya/ufuzzy": "^0.8.0",
 		"@redocly/json-to-json-schema": "^0.0.1",
-		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@types/autosize": "^4.0.1",
 		"@types/node": "^18.11.9",
 		"async-mutex": "^0.4.0",
@@ -82,4 +81,4 @@
 		"svelte-select": "^5.0.0-beta.40",
 		"vscode-ws-jsonrpc": "^2.0.1"
 	}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index 1d605c06a5..cdb8d51b44 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -1,120 +1,94 @@
 <script lang="ts">
-	import { clickOutside } from '$lib/utils'
 	import type { DropdownItem } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
-	import { Button } from './common'
+	import { Button, Menu } from './common'
 
-	let open = false
+	type Alignment = 'start' | 'end'
+	type Side = 'top' | 'bottom'
+	type Placement = `${Side}-${Alignment}`
 
 	export let dropdownItems: DropdownItem[]
 	export let name: string | undefined = undefined
-	// The dropdown is positioned versus its first relatively positioned partent
-	// By default, the dropdown is positioned relative to its button
-	// This can cause the dropdown to be hidden if it is in an overflow-hidden div.
-	// In that case, set relative to false and control the dropdown positioning from the div
-	export let relative = true
-	export let left = true
+	export let placement: Placement = 'bottom-start'
 
 	const dispatch = createEventDispatcher()
-
-	function toggle() {
-		open = !open
-	}
-
-	function handleClickOutsideMenu(event: Event) {
-		open = false
-	}
 </script>
 
-<div
-	class="{relative ? 'relative' : ''} {$$props.class}"
-	use:clickOutside
-	on:click_outside={handleClickOutsideMenu}
->
-	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" on:click={toggle}>
+<Menu {placement} let:close>
+	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
 		{#if !$$slots.default}
 			<Icon data={faEllipsisH} scale={1.2} />
 		{:else}
 			<slot />
 		{/if}
 	</Button>
-	<div
-		class="flex flex-col z-50 origin-top-right absolute {left
-			? 'right-0'
-			: 'left-0'} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
-			? 'visible'
-			: 'hidden'}"
-		role="menu"
-		tabindex="-1"
-	>
-		{#if dropdownItems}
-			{#each dropdownItems as item, i}
-				{#if item.action}
-					<button
-						on:click={(event) => {
-							if (!item.disabled) {
-								event.preventDefault()
-								open = false
-								item.action && item.action(event)
-								dispatch('click', { item: item?.eventName })
-							}
-						}}
-						class="block hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
-							? 'border-t'
-							: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
-							? 'text-red-500'
-							: ''}"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-						disabled={item.disabled}
-						class:disabled={item.disabled}
-					>
-						{#if item.icon}
-							<Icon
-								data={item.icon}
-								scale={0.6}
-								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
-							/>
-						{/if}
-						{item.displayName}
-					</button>
-				{:else if item.href}
-					<a
-						href={item.href}
-						on:click={() => {
-							if (!item.disabled) {
-								open = false
-							}
-						}}
-						class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-						class:disabled={item.disabled}
-					>
-						{#if item.icon}
-							<Icon
-								data={item.icon}
-								scale={0.6}
-								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
-							/>
-						{/if}
-						{item.displayName}
-					</a>
-				{:else}
-					<span
-						class="block px-4 py-2 text-sm text-gray-700"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-					>
-						{item.displayName}
-					</span>
-				{/if}
-			{/each}
-		{/if}
-	</div>
-</div>
+	{#if dropdownItems}
+		{#each dropdownItems as item, i}
+			{#if item.action}
+				<button
+					on:click={(event) => {
+						if (!item.disabled) {
+							event.preventDefault()
+							close()
+							item.action && item.action(event)
+							dispatch('click', { item: item?.eventName })
+						}
+					}}
+					class="block  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
+						? 'border-t'
+						: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
+						? 'text-red-500'
+						: ''}"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					disabled={item.disabled}
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</button>
+			{:else if item.href}
+				<a
+					href={item.href}
+					on:click={() => {
+						if (!item.disabled) {
+							close()
+						}
+					}}
+					class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</a>
+			{:else}
+				<span
+					class="block px-4 py-2 text-sm text-gray-700"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+				>
+					{item.displayName}
+				</span>
+			{/if}
+		{/each}
+	{/if}
+</Menu>
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index 7dc5136970..b26da298dd 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -51,7 +51,6 @@
 	<div on:click={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
 		<slot class="triggerable" name="trigger" />
 	</div>
-
 	{#if show}
 		<div
 			class={classNames(
diff --git a/frontend/src/lib/components/common/popup/Popup.svelte b/frontend/src/lib/components/common/popup/Popup.svelte
index 583bbb96b0..b412be4490 100644
--- a/frontend/src/lib/components/common/popup/Popup.svelte
+++ b/frontend/src/lib/components/common/popup/Popup.svelte
@@ -145,17 +145,6 @@
 			<div class={innerClasses}>
 				<slot />
 			</div>
-			{#if !disableInstruction && focusableElements?.length}
-				<div
-					class="flex justify-center items-center font-semibold
-					text-xs text-gray-700 p-1 border-x border-b rounded-b bg-gray-100"
-				>
-					Use
-					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↑</Kbd>
-					and
-					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↓</Kbd>
-				</div>
-			{/if}
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index 24184570d5..4892712325 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -26,6 +26,7 @@
 			loadHubScripts()
 		}
 	})
+	const maxItems = 40
 </script>
 
 <SearchItems {filter} items={prefilteredItems} bind:filteredItems f={(x) => x.summary} />
@@ -40,7 +41,7 @@
 		<NoItemFound />
 	{:else}
 		<ul class="divide-y divide-gray-200 border rounded-md">
-			{#each filteredItems as item (item.path)}
+			{#each filteredItems.slice(0, maxItems) as item (item.path)}
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow hover:bg-gray-50 bg-white transition-all items-center"
@@ -81,6 +82,11 @@
 			{/each}
 		</ul>
 	{/if}
+	{#if filteredItems.length > maxItems}
+		<div class="text-gray-500 text-sm py-4">
+			There are more items ({filteredItems.length}) than being displayed. Refine your search.
+		</div>
+	{/if}
 {:else}
 	{#each Array(10).fill(0) as _}
 		<Skeleton layout={[[4], 0.5]} />
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index ed558f9bb4..97252308c7 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -1,23 +1,15 @@
 <script lang="ts">
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import {
-		AppService,
-		FlowService,
-		ListableApp,
-		Script,
-		ScriptService,
-		type Flow,
-		type OpenFlow
-	} from '$lib/gen'
+	import { AppService, FlowService, ListableApp, Script, ScriptService, type Flow } from '$lib/gen'
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
-	import VirtualList from '@sveltejs/svelte-virtual-list'
-	import { Drawer, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
-	import { canWrite, classNames, pluralize } from '$lib/utils'
-	import type { HubItem } from '$lib/components/flows/pickers/model'
+	import { Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
+	import { canWrite } from '$lib/utils'
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import type uFuzzy from '@leeoniya/ufuzzy'
 	import { Code2, LayoutDashboard, Wind } from 'lucide-svelte'
 
+	export let filter = ''
+
 	import ScriptRow from '$lib/components/common/table/ScriptRow.svelte'
 	import FlowRow from '$lib/components/common/table/FlowRow.svelte'
 	import AppRow from '$lib/components/common/table/AppRow.svelte'
@@ -46,7 +38,6 @@
 
 	let itemKind: 'script' | 'flow' | 'app' | 'all' = 'all'
 
-	let filter: string = ''
 	let shareModalScripts: ShareModal
 	let shareModalFlows: ShareModal
 
@@ -184,12 +175,6 @@
 	}
 
 	$: items = filter !== '' ? filteredItems : preFilteredItems
-	let start: number
-	let end: number
-
-	export let clientHeight: number
-
-	$: height = (100 * clientHeight) / window.innerHeight
 
 	function resetScroll() {
 		const element = document.getElementsByTagName('svelte-virtual-list-viewport')
@@ -294,11 +279,9 @@
 		{:else if filteredItems.length === 0}
 			<NoItemFound />
 		{:else}
-			<div
-				class={classNames('border rounded-md')}
-				style={`height: calc(100vh - 10em - ${height}vh);`}
-			>
-				<VirtualList {items} let:item bind:start bind:end>
+			<div class="border rounded-md divide-y divide-gray-200 mb-80">
+				<!-- <VirtualList {items} let:item bind:start bind:end> -->
+				{#each items ?? [] as item, i (item.type + '/' + item.path)}
 					{#if item.type == 'script'}
 						<ScriptRow
 							starred={item.starred ?? false}
@@ -323,10 +306,11 @@
 							app={item}
 						/>
 					{/if}
-				</VirtualList>
+				{/each}
+				<!-- </VirtualList> -->
 			</div>
-			<span class="text-xs">{pluralize(items?.length ?? 0, 'item')}</span>
-			<span class="text-xs">{`(${start} - ${end})`}</span>
+			<!-- <span class="text-xs">{pluralize(items?.length ?? 0, 'item')}</span>
+			<span class="text-xs">{`(${start} - ${end})`}</span> -->
 		{/if}
 	</div>
 </CenteredPage>
diff --git a/frontend/src/routes/groups.svelte b/frontend/src/routes/groups.svelte
index 9ac602af27..25982d39ea 100644
--- a/frontend/src/routes/groups.svelte
+++ b/frontend/src/routes/groups.svelte
@@ -115,6 +115,7 @@
 						<td>{summary ?? ''}</td>
 						<td>
 							<Dropdown
+								placement="bottom-end"
 								dropdownItems={[
 									{
 										displayName: 'Manage members',
@@ -125,7 +126,7 @@
 										}
 									},
 									{
-										displayName: 'Manage ACL of the group itself',
+										displayName: 'Manage ACL of the group',
 										icon: faShare,
 										disabled: !canWrite,
 										action: () => {
@@ -144,7 +145,6 @@
 										}
 									}
 								]}
-								relative={false}
 							/>
 						</td>
 					</tr>
diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
index b2cdb69f22..97550ae3cf 100644
--- a/frontend/src/routes/index.svelte
+++ b/frontend/src/routes/index.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { FlowService, type OpenFlow } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { Alert, Button, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
@@ -44,8 +43,6 @@
 		flowViewerFlow = hub
 		flowViewer.openDrawer?.()
 	}
-
-	$: clientHeight = 0
 </script>
 
 <Drawer bind:this={codeViewer} size="900px">
@@ -110,7 +107,7 @@
 	</DrawerContent>
 </Drawer>
 
-<div bind:clientHeight>
+<div>
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content">
 		{#if $workspaceStore == 'demo'}
 			<div class="my-4" />
@@ -166,5 +163,5 @@
 </div>
 
 {#if tab == 'workspace'}
-	<ItemsList {clientHeight} />
+	<ItemsList bind:filter />
 {/if}
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte
index 823d34ea1e..8311fbdfe5 100644
--- a/frontend/src/routes/resources.svelte
+++ b/frontend/src/routes/resources.svelte
@@ -431,6 +431,7 @@
 									</td>
 									<td>
 										<Dropdown
+											placement="bottom-end"
 											dropdownItems={[
 												{
 													displayName: 'Share',
@@ -483,7 +484,6 @@
 													  ]
 													: [])
 											]}
-											relative={true}
 										/>
 									</td>
 								</tr>
diff --git a/frontend/src/routes/schedules.svelte b/frontend/src/routes/schedules.svelte
index 46156d60c9..43acd037d1 100644
--- a/frontend/src/routes/schedules.svelte
+++ b/frontend/src/routes/schedules.svelte
@@ -119,6 +119,7 @@
 							>
 							<td
 								><Dropdown
+									placement="bottom-end"
 									dropdownItems={[
 										{
 											displayName: enabled ? 'Disable' : 'Enable',
@@ -157,7 +158,6 @@
 											}
 										}
 									]}
-									relative={true}
 								/></td
 							>
 						</tr>
diff --git a/frontend/src/routes/variables.svelte b/frontend/src/routes/variables.svelte
index 6b75cd4dea..825bd2432d 100644
--- a/frontend/src/routes/variables.svelte
+++ b/frontend/src/routes/variables.svelte
@@ -272,6 +272,7 @@
 								</td>
 								<td
 									><Dropdown
+										placement="bottom-end"
 										dropdownItems={[
 											{
 												displayName: 'Edit',
@@ -322,7 +323,6 @@
 												  ]
 												: [])
 										]}
-										relative={true}
 									/></td
 								>
 							</tr>