diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
new file mode 100644
index 0000000000..be1a41e6b9
--- /dev/null
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Portal from '$lib/components/Portal.svelte'
+	import { melt, createSync } from '@melt-ui/svelte'
+
+	import { twMerge } from 'tailwind-merge'
+	import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte'
+
+	export let placement: any = 'right-start'
+	export let justifyEnd: boolean = false
+	export let lightMode: boolean = false
+	export let maxHeight: number = 900
+	export let disabled = false
+	export let createMenu: (any) => any
+	export let invisible: boolean = false
+
+	// Use the passed createMenu function
+	const menu = createMenu({
+		positioning: {
+			placement
+		}
+	})
+
+	//Melt
+	const {
+		elements: { trigger, menu: menuElement, item },
+		states
+	} = menu
+
+	let open = false
+
+	const sync = createSync(states)
+	$: sync.open(open, (v) => (open = Boolean(v)))
+</script>
+
+<div class="w-full h-8">
+	<ResolveOpen {open} on:open on:close />
+
+	<button class={twMerge('w-full', justifyEnd ? 'flex justify-end' : '')} {disabled}>
+		<slot name="trigger" trigger={$trigger} />
+	</button>
+
+	<Portal name="menu-v3">
+		<div class="z-[6000]" use:melt={$menuElement}>
+			<div
+				class={twMerge(
+					'border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto',
+					lightMode ? 'bg-surface-inverse' : 'bg-surface',
+					invisible ? 'opacity-0' : ''
+				)}
+				style="max-height: {maxHeight}px;"
+			>
+				<div class="my-1">
+					<slot item={$item} />
+				</div>
+			</div>
+		</div>
+	</Portal>
+</div>
diff --git a/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte b/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte
new file mode 100644
index 0000000000..8c87617fd6
--- /dev/null
+++ b/frontend/src/lib/components/meltComponents/MenuSingleItem.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { melt } from '@melt-ui/svelte'
+
+	export let createMenu: () => any
+
+	const menu = createMenu()
+
+	const {
+		elements: { trigger, item, menu: menuElement }
+	} = menu
+</script>
+
+<div class="hover:z-50 flex w-full h-8">
+	<slot name="trigger" trigger={$trigger} />
+	<div use:melt={$menuElement}>
+		<slot item={$item} />
+	</div>
+</div>
diff --git a/frontend/src/lib/components/meltComponents/Menubar.svelte b/frontend/src/lib/components/meltComponents/Menubar.svelte
new file mode 100644
index 0000000000..c1f4f5828a
--- /dev/null
+++ b/frontend/src/lib/components/meltComponents/Menubar.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { createMenubar, melt } from '@melt-ui/svelte'
+
+	const {
+		elements: { menubar },
+		builders: { createMenu }
+	} = createMenubar()
+</script>
+
+<div use:melt={$menubar}>
+	<slot {createMenu} />
+</div>
diff --git a/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte
new file mode 100644
index 0000000000..792cbc6f69
--- /dev/null
+++ b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+	import Popover from '../Popover.svelte'
+	import { melt } from '@melt-ui/svelte'
+	import { createEventDispatcher } from 'svelte'
+	import SideBarNotification from './SideBarNotification.svelte'
+	import { goto } from '$app/navigation'
+
+	export let label: string | undefined = undefined
+	export let icon: any | undefined = undefined
+	export let isCollapsed: boolean
+	export let disabled: boolean = false
+	export let lightMode: boolean = false
+	export let stopPropagationOnClick: boolean = false
+	export let shortcut: string = ''
+	export let notificationsCount: number = 0
+	export let color: string | null = null
+	export let trigger: any | undefined = undefined
+	export let href: string | undefined = undefined
+	export let openHref: boolean = false
+
+	let dispatch = createEventDispatcher()
+</script>
+
+{#if !disabled}
+	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+		<button
+			on:click={(e) => {
+				if (stopPropagationOnClick) e.preventDefault()
+				if (openHref && href) {
+					goto(href)
+				}
+				dispatch('click')
+			}}
+			class={twMerge(
+				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
+				lightMode
+					? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover'
+					: 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+				color ? 'border-4' : '',
+				'transition-all',
+				$$props.class
+			)}
+			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
+			title={label}
+			use:melt={trigger}
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					size={16}
+					class={twMerge(
+						'flex-shrink-0',
+						lightMode
+							? 'text-primary group-hover:text-secondary'
+							: 'text-primary-inverse group-hover:text-secondary-inverse dark:group-hover:text-secondary dark:text-primary',
+						'transition-all'
+					)}
+				/>
+			{/if}
+
+			{#if !isCollapsed && label}
+				<span
+					class={twMerge(
+						'whitespace-pre truncate',
+						lightMode ? 'text-primary' : 'text-primary-inverse dark:text-primary',
+						'transition-all',
+						$$props.class
+					)}
+				>
+					{label}
+					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
+						{shortcut}
+					</span>
+				</span>
+			{/if}
+
+			{#if isCollapsed && notificationsCount > 0}
+				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">
+					<SideBarNotification notificationCount={notificationsCount} small={true} />
+				</div>
+			{:else if notificationsCount > 0}
+				<div class="ml-auto">
+					<SideBarNotification notificationCount={notificationsCount} small={false} />
+				</div>
+			{/if}
+		</button>
+		<svelte:fragment slot="text">
+			{#if label}
+				{label}
+			{/if}
+		</svelte:fragment>
+	</Popover>
+{/if}
diff --git a/frontend/src/lib/components/sidebar/MenuLinkMelt.svelte b/frontend/src/lib/components/sidebar/MenuLinkMelt.svelte
new file mode 100644
index 0000000000..54a1800496
--- /dev/null
+++ b/frontend/src/lib/components/sidebar/MenuLinkMelt.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { classNames } from '$lib/utils'
+	import { navigating, page } from '$app/stores'
+	import Popover from '../Popover.svelte'
+	import { base } from '$app/paths'
+	import { melt } from '@melt-ui/svelte'
+	export let label: string
+	export let href: string
+	export let icon: any | undefined = undefined
+	export let isCollapsed: boolean
+	export let disabled: boolean = false
+	export let lightMode: boolean = false
+	export let item: any
+	let isSelected = false
+
+	navigating.subscribe(() => {
+		if (href === `${base}/`) {
+			isSelected = $page.url.pathname === href
+		} else {
+			isSelected = $page.url.pathname.startsWith(href)
+		}
+	})
+</script>
+
+{#if !disabled}
+	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+		<a
+			{href}
+			class={classNames(
+				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
+				isSelected
+					? lightMode
+						? 'bg-surface-selected hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
+						: 'bg-frost-700 hover:bg-[#30404e] data-[highlighted]:bg-[#30404e]'
+					: lightMode
+					? 'hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
+					: 'hover:bg-[#2A3648] data-[highlighted]:bg-[#2A3648]',
+
+				'hover:transition-all',
+				$$props.class
+			)}
+			target={href.includes('http') ? '_blank' : null}
+			title={isCollapsed ? undefined : label}
+			use:melt={item}
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					size={16}
+					class={classNames(
+						'flex-shrink-0',
+						isSelected
+							? lightMode
+								? 'text-primary group-hover:text-secondary'
+								: 'text-frost-200 group-hover:text-white'
+							: lightMode
+							? 'text-primary group-hover:text-secondary'
+							: 'text-gray-100 group-hover:text-white',
+						'transition-all'
+					)}
+				/>
+			{/if}
+
+			{#if !isCollapsed}
+				<span
+					class={classNames(
+						'whitespace-pre truncate',
+						isSelected
+							? lightMode
+								? 'text-primary group-hover:text-secondary'
+								: 'text-frost-200 group-hover:text-white'
+							: lightMode
+							? 'text-primary group-hover:text-secondary'
+							: 'text-gray-100 group-hover:text-white',
+						'transition-all duration-75'
+					)}
+				>
+					{label}
+				</span>
+			{/if}
+		</a>
+		<svelte:fragment slot="text">
+			{label}
+		</svelte:fragment>
+	</Popover>
+{/if}
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index cf82e1aaee..06ebfa7d2d 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -35,9 +35,6 @@
 		AlertCircle,
 		Database
 	} from 'lucide-svelte'
-	import Menu from '../common/menu/MenuV2.svelte'
-	import MenuButton from './MenuButton.svelte'
-	import { MenuItem } from '@rgossiaux/svelte-headlessui'
 	import UserMenu from './UserMenu.svelte'
 	import DiscordIcon from '../icons/brands/Discord.svelte'
 	import { WorkspaceService } from '$lib/gen'
@@ -53,7 +50,12 @@
 	import SideBarNotification from './SideBarNotification.svelte'
 	import KafkaIcon from '../icons/KafkaIcon.svelte'
 	import NatsIcon from '../icons/NatsIcon.svelte'
-
+	import Menubar from '../meltComponents/Menubar.svelte'
+	import Menu from '../meltComponents/Menu.svelte'
+	import { melt } from '@melt-ui/svelte'
+	import MenuButtonMelt from './MenuButtonMelt.svelte'
+	import MenuSingleItem from '../meltComponents/MenuSingleItem.svelte'
+	import MenuLinkMelt from './MenuLinkMelt.svelte'
 	export let numUnacknowledgedCriticalAlerts = 0
 
 	$: mainMenuLinks = [
@@ -321,141 +323,182 @@
 				class:opacity-0={isCollapsed}>Triggers</div
 			>
 			<div class="space-y-1">
-				{#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
-				{/each}
-				{#if extraTriggerLinks.length > 0 && !$userStore?.operator}
-					<Menu>
-						<div
-							slot="trigger"
-							class="w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded"
-						>
-							<Plus size={14} />
-						</div>
-						{#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)}
-							<MenuItem>
-								<div class="py-1" role="none">
-									<a
-										href={subItem.disabled ? '' : subItem.href}
-										class={twMerge(
-											'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary',
-											subItem.disabled ? 'pointer-events-none opacity-50' : ''
-										)}
-										role="menuitem"
-										tabindex="-1"
-									>
-										<div class="flex flex-row items-center gap-2">
-											{#if subItem.icon}
-												<svelte:component this={subItem.icon} size={16} />
-											{/if}
-											{subItem.label}
-										</div>
-									</a>
+				<Menubar let:createMenu>
+					{#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+						<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
+					{/each}
+					{#if extraTriggerLinks.length > 0 && !$userStore?.operator}
+						<Menu {createMenu} let:item>
+							<svelte:fragment slot="trigger" let:trigger>
+								<div
+									slot="trigger"
+									class={twMerge(
+										'w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded',
+										'data-[highlighted]:bg-[#2A3648] dark:data-[highlighted]:bg-[#30404e]'
+									)}
+									use:melt={trigger}
+								>
+									<Plus size={14} />
 								</div>
-							</MenuItem>
-						{/each}
-					</Menu>
-				{/if}
+							</svelte:fragment>
+							{#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)}
+								<div>
+									<div class="py-1" role="none">
+										<a
+											href={subItem.disabled ? '' : subItem.href}
+											class={twMerge(
+												'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary',
+												'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary',
+												subItem.disabled ? 'pointer-events-none opacity-50' : ''
+											)}
+											role="menuitem"
+											tabindex="-1"
+											use:melt={item}
+										>
+											<div class="flex flex-row items-center gap-2">
+												{#if subItem.icon}
+													<svelte:component this={subItem.icon} size={16} />
+												{/if}
+												{subItem.label}
+											</div>
+										</a>
+									</div>
+								</div>
+							{/each}
+						</Menu>
+					{/if}
+				</Menubar>
 			</div>
 		</div>
 	</div>
 	<div class="flex flex-col h-full justify-end">
 		<div class={twMerge('space-y-0.5 mb-6 md:mb-10', noGap ? 'md:mb-0 mb-0' : 'mb-6 md:mb-10')}>
-			<UserMenu {isCollapsed} />
-			{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-				{#if menuLink.subItems}
-					{@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)}
-					<Menu>
-						<div slot="trigger">
-							<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} {notificationsCount} />
+			<Menubar let:createMenu>
+				<UserMenu {isCollapsed} {createMenu} />
+				{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+					{#if menuLink.subItems}
+						{@const notificationsCount = computeAllNotificationsCount(menuLink.subItems)}
+						<Menu {createMenu} let:item>
+							<svelte:fragment slot="trigger" let:trigger>
+								<MenuButtonMelt
+									class="!text-2xs"
+									{...menuLink}
+									{isCollapsed}
+									{notificationsCount}
+									{trigger}
+								/>
+							</svelte:fragment>
+							<div>
+								{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
+									<div class="py-1" role="none">
+										{#if subItem?.['action']}
+											<button
+												class="text-secondary font-normal w-full block px-4 py-2 text-2xs data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary"
+												on:click={subItem?.['action']}
+												use:melt={item}
+											>
+												<div class="flex flex-row items-center gap-2">
+													{#if subItem.icon}
+														<svelte:component this={subItem.icon} size={16} />
+													{/if}
+
+													{subItem.label}
+													{#if subItem?.['notificationCount']}
+														<div class="ml-auto">
+															<SideBarNotification
+																notificationCount={subItem['notificationCount']}
+															/>
+														</div>
+													{/if}
+												</div>
+											</button>
+										{:else}
+											<a
+												href={subItem.href}
+												class="text-secondary font-normal block px-4 py-2 text-2xs data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary"
+												role="menuitem"
+												tabindex="-1"
+												use:melt={item}
+											>
+												<div class="flex flex-row items-center gap-2">
+													{#if subItem.icon}
+														<svelte:component this={subItem.icon} size={16} />
+													{/if}
+
+													{subItem.label}
+
+													{#if subItem?.['notificationCount']}
+														<div class="ml-auto">
+															<SideBarNotification
+																notificationCount={subItem['notificationCount']}
+															/>
+														</div>
+													{/if}
+												</div>
+											</a>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</Menu>
+					{:else}
+						<div>
+							<MenuSingleItem {createMenu} let:item>
+								<svelte:fragment slot="trigger" let:trigger>
+									<div class="w-full">
+										<MenuButtonMelt
+											class="!text-2xs"
+											{...menuLink}
+											{isCollapsed}
+											{trigger}
+											openHref={true}
+										/>
+									</div>
+								</svelte:fragment>
+								<MenuLinkMelt class="!text-2xs" {...menuLink} {isCollapsed} {item} />
+							</MenuSingleItem>
 						</div>
-						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-							<MenuItem>
-								<div class="py-1" role="none">
-									{#if subItem?.['action']}
-										<button
-											class="text-secondary font-normal w-full block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary"
-											on:click={subItem?.['action']}
-										>
-											<div class="flex flex-row items-center gap-2">
-												{#if subItem.icon}
-													<svelte:component this={subItem.icon} size={16} />
-												{/if}
-
-												{subItem.label}
-												{#if subItem?.['notificationCount']}
-													<div class="ml-auto">
-														<SideBarNotification notificationCount={subItem['notificationCount']} />
-													</div>
-												{/if}
-											</div>
-										</button>
-									{:else}
-										<a
-											href={subItem.href}
-											class="text-secondary font-normal block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary"
-											role="menuitem"
-											tabindex="-1"
-										>
-											<div class="flex flex-row items-center gap-2">
-												{#if subItem.icon}
-													<svelte:component this={subItem.icon} size={16} />
-												{/if}
-
-												{subItem.label}
-
-												{#if subItem?.['notificationCount']}
-													<div class="ml-auto">
-														<SideBarNotification notificationCount={subItem['notificationCount']} />
-													</div>
-												{/if}
-											</div>
-										</a>
-									{/if}
-								</div>
-							</MenuItem>
-						{/each}
-					</Menu>
-				{:else}
-					<MenuLink class="!text-2xs" {...menuLink} {isCollapsed} />
-				{/if}
-			{/each}
+					{/if}
+				{/each}
+			</Menubar>
 		</div>
 		<div class="space-y-0.5">
-			{#each thirdMenuLinks as menuLink (menuLink)}
-				{#if menuLink.subItems}
-					<Menu>
-						<div slot="trigger">
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<div
-								class="relative"
-								on:click={() => {
-									if (menuLink.label === 'Help') {
-										openChangelogs()
-									}
-								}}
-							>
-								<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} />
-								{#if menuLink.label === 'Help' && hasNewChangelogs}
-									<span class="absolute top-1 right-1 flex h-2 w-2">
-										<span
-											class="animate-ping absolute inline-flex h-full w-full rounded-full bg-frost-400 opacity-75"
-										/>
-										<span class="relative inline-flex rounded-full h-2 w-2 bg-frost-500" />
-									</span>
-								{/if}
-							</div>
-						</div>
-						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-							<MenuItem>
+			<Menubar let:createMenu>
+				{#each thirdMenuLinks as menuLink (menuLink)}
+					{#if menuLink.subItems}
+						<Menu {createMenu} let:item>
+							<svelte:fragment slot="trigger" let:trigger>
+								<button
+									class="relative w-full"
+									on:click={() => {
+										if (menuLink.label === 'Help') {
+											openChangelogs()
+										}
+									}}
+								>
+									<MenuButtonMelt class="!text-2xs" {...menuLink} {isCollapsed} {trigger} />
+									{#if menuLink.label === 'Help' && hasNewChangelogs}
+										<span class="absolute top-1 right-1 flex h-2 w-2">
+											<span
+												class="animate-ping absolute inline-flex h-full w-full rounded-full bg-frost-400 opacity-75"
+											/>
+											<span class="relative inline-flex rounded-full h-2 w-2 bg-frost-500" />
+										</span>
+									{/if}
+								</button>
+							</svelte:fragment>
+							{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
 								<div class="py-1" role="none">
 									<a
 										href={subItem.href}
-										class="text-secondary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary relative"
+										class={twMerge(
+											'text-secondary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary relative',
+											'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+										)}
 										role="menuitem"
 										tabindex="-1"
 										target="_blank"
+										use:melt={item}
 									>
 										<div class="flex flex-row items-center gap-2">
 											{#if subItem.icon}
@@ -466,13 +509,11 @@
 										</div>
 									</a>
 								</div>
-							</MenuItem>
-						{/each}
-						{#if recentChangelogs.length > 0}
-							<div class="w-full h-1 border-t" />
-							<span class="text-xs px-4 font-bold"> Latest changelogs </span>
-							{#each recentChangelogs as changelog}
-								<MenuItem>
+							{/each}
+							{#if recentChangelogs.length > 0}
+								<div class="w-full h-1 border-t" />
+								<span class="text-xs px-4 font-bold"> Latest changelogs </span>
+								{#each recentChangelogs as changelog}
 									<div class="py-1" role="none">
 										<a
 											href={changelog.href}
@@ -480,18 +521,19 @@
 											role="menuitem"
 											tabindex="-1"
 											target="_blank"
+											use:melt={item}
 										>
 											<div class="flex flex-row items-center gap-2">
 												{changelog.label}
 											</div>
 										</a>
 									</div>
-								</MenuItem>
-							{/each}
-						{/if}
-					</Menu>
-				{/if}
-			{/each}
+								{/each}
+							{/if}
+						</Menu>
+					{/if}
+				{/each}
+			</Menubar>
 		</div>
 	</div>
 </nav>
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index 87f39a590a..f160696fc0 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -8,30 +8,32 @@
 		isPremiumStore,
 		workspaceStore
 	} from '$lib/stores'
-	import Menu from '../common/menu/MenuV2.svelte'
 	import { USER_SETTINGS_HASH } from './settings'
 	import { isCloudHosted } from '$lib/cloud'
 	import { twMerge } from 'tailwind-merge'
 	import { Crown, HardHat, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte'
 	import DarkModeObserver from '../DarkModeObserver.svelte'
-	import MenuButton from './MenuButton.svelte'
-	import { MenuItem } from '@rgossiaux/svelte-headlessui'
+	import MenuButtonMelt from './MenuButtonMelt.svelte'
 
+	import { melt } from '@melt-ui/svelte'
+	import Menu from '$lib/components/meltComponents/Menu.svelte'
 	let darkMode: boolean = false
 	export let isCollapsed: boolean = false
 	export let lightMode: boolean = false
+	export let createMenu: (any) => any
 </script>
 
-<Menu>
-	<div slot="trigger" class="w-full">
-		<MenuButton
+<Menu {createMenu} let:item>
+	<svelte:fragment slot="trigger" let:trigger>
+		<MenuButtonMelt
 			class="!text-xs"
 			icon={User}
 			label={`User (${$userStore?.username ?? $userStore?.email})`}
 			{isCollapsed}
 			{lightMode}
+			{trigger}
 		/>
-	</div>
+	</svelte:fragment>
 	<div class="divide-y z-20">
 		<div class="px-4 py-3" role="none">
 			<p class="text-sm font-medium text-primary truncate" role="none">
@@ -47,17 +49,18 @@
 		</div>
 
 		<div class="py-1" role="none">
-			<MenuItem
+			<a
 				href={USER_SETTINGS_HASH}
 				class={twMerge(
 					'flex flex-row gap-2 items-center px-4 py-2 ',
 					'text-secondary text-sm',
-					'hover:bg-surface-hover hover:text-primary cursor-pointer'
+					'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 				)}
+				use:melt={item}
 			>
 				<Settings size={14} />
 				Account settings
-			</MenuItem>
+			</a>
 		</div>
 
 		<div class="py-1" role="none">
@@ -72,11 +75,13 @@
 					}
 				}}
 				class={twMerge(
-					'text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full',
-					'flex flex-row items-center gap-2'
+					'text-secondary block text-left px-4 py-2 font-normal text-sm w-full',
+					'flex flex-row items-center gap-2',
+					'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 				)}
 				role="menuitem"
 				tabindex="-1"
+				use:melt={item}
 			>
 				{#if darkMode}
 					<Sun size={14} />
@@ -88,18 +93,18 @@
 		</div>
 
 		<div class="py-1" role="none">
-			<MenuItem
-				href="#"
+			<button
 				on:click={() => logout()}
 				class={twMerge(
-					'flex flex-row gap-2 items-center px-4 py-2 ',
+					'flex flex-row gap-2 items-center px-4 py-2 w-full',
 					'text-secondary text-sm',
-					'hover:bg-surface-hover hover:text-primary cursor-pointer'
+					'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 				)}
+				use:melt={item}
 			>
 				<LogOut size={14} />
 				Sign out
-			</MenuItem>
+			</button>
 		</div>
 
 		{#if isCloudHosted()}