diff --git a/frontend/console/package.json b/frontend/console/package.json
index 38c84bd60d..b2c6f829da 100644
--- a/frontend/console/package.json
+++ b/frontend/console/package.json
@@ -22,9 +22,13 @@
     "build-storybook": "storybook build"
   },
   "lint-staged": {
-    "*.(js|cjs|tsx|ts)": ["pnpm run lint:fix"]
+    "*.(js|cjs|tsx|ts)": [
+      "pnpm run lint:fix"
+    ]
   },
-  "browserslist": ["> 2%"],
+  "browserslist": [
+    "> 2%"
+  ],
   "source": "index.html",
   "dependencies": {
     "@bufbuild/protobuf": "^1.1.0",
@@ -39,7 +43,6 @@
     "@connectrpc/connect-web": "^1.1.2",
     "@connectrpc/protoc-gen-connect-es": "^1.4.0",
     "@headlessui/react": "2.1.3",
-    "@heroicons/react": "2.1.5",
     "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-query-devtools": "^5.51.23",
@@ -50,6 +53,7 @@
     "codemirror-json5": "^1.0.3",
     "fnv1a": "^1.1.1",
     "highlight.js": "^11.8.0",
+    "hugeicons-react": "^0.3.0",
     "json-schema-faker": "0.5.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
diff --git a/frontend/console/src/components/CloseButton.tsx b/frontend/console/src/components/CloseButton.tsx
index d74ca89d35..e458a9ae38 100644
--- a/frontend/console/src/components/CloseButton.tsx
+++ b/frontend/console/src/components/CloseButton.tsx
@@ -1,4 +1,4 @@
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import { Cancel01Icon } from 'hugeicons-react'
 
 interface Props {
   onClick: () => void
@@ -7,7 +7,7 @@ interface Props {
 export const CloseButton = ({ onClick }: Props) => {
   return (
     <button type='button' onClick={onClick} className='rounded-sm hover:bg-gray-200 dark:hover:bg-slate-500'>
-      <XMarkIcon className={'h-5 w-5'} />
+      <Cancel01Icon className={'h-5 w-5'} />
     </button>
   )
 }
diff --git a/frontend/console/src/components/DarkModeSwitch.tsx b/frontend/console/src/components/DarkModeSwitch.tsx
index ca6489f763..b16930cc42 100644
--- a/frontend/console/src/components/DarkModeSwitch.tsx
+++ b/frontend/console/src/components/DarkModeSwitch.tsx
@@ -1,5 +1,6 @@
 import { Switch } from '@headlessui/react'
-import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
+
+import { Moon02Icon, Sun03Icon } from 'hugeicons-react'
 import { useUserPreferences } from '../providers/user-preferences-provider'
 import { classNames } from '../utils/react.utils'
 
@@ -19,10 +20,10 @@ export const DarkModeSwitch = () => {
         aria-hidden='true'
         className={classNames(
           isDarkMode ? 'translate-x-5' : 'translate-x-0',
-          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-indigo-600 shadow ring-0 transition duration-200 ease-in-out',
+          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-gray-50 dark:bg-indigo-600 shadow ring-0 transition duration-200 ease-in-out',
         )}
       >
-        {isDarkMode ? <MoonIcon className='text-white p-0.5' /> : <SunIcon className='text-indigo-600 p-0.5' />}
+        {isDarkMode ? <Moon02Icon className='text-white size-5 p-0.5' /> : <Sun03Icon className='text-indigo-500 size-5 p-0.5' />}
       </span>
     </Switch>
   )
diff --git a/frontend/console/src/features/console/ConsolePage.tsx b/frontend/console/src/features/console/ConsolePage.tsx
index 17b4bce26f..b547c8746d 100644
--- a/frontend/console/src/features/console/ConsolePage.tsx
+++ b/frontend/console/src/features/console/ConsolePage.tsx
@@ -1,4 +1,4 @@
-import { CubeTransparentIcon } from '@heroicons/react/24/outline'
+import { CubeIcon } from 'hugeicons-react'
 import { useState } from 'react'
 import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
@@ -25,7 +25,7 @@ export const ConsolePage = () => {
 
   return (
     <Page>
-      <Page.Header icon={<CubeTransparentIcon />} title='Console' />
+      <Page.Header icon={<CubeIcon />} title='Console' />
       <Page.Body className='flex h-full'>
         <ResizablePanels
           mainContent={<GraphPane onTapped={setSelectedNode} />}
diff --git a/frontend/console/src/features/console/ExpandablePanel.tsx b/frontend/console/src/features/console/ExpandablePanel.tsx
index 8b9d5fb99f..0801fcad7a 100644
--- a/frontend/console/src/features/console/ExpandablePanel.tsx
+++ b/frontend/console/src/features/console/ExpandablePanel.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
+import { ArrowDown01Icon, ArrowRight01Icon } from 'hugeicons-react'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
@@ -24,7 +24,7 @@ export const ExpandablePanel: React.FC<ExpandablePanelProps> = ({ icon: Icon, ti
   return (
     <div className='border-b border-gray-300 dark:border-gray-700'>
       <div className='bg-gray-100 dark:bg-gray-700 flex items-center cursor-pointer' onClick={toggleExpansion}>
-        {isExpanded ? <ChevronDownIcon className='h-3 w-3 m-1' /> : <ChevronRightIcon className='h-3 w-3  m-1' />}
+        {isExpanded ? <ArrowDown01Icon className='size-4 m-1' /> : <ArrowRight01Icon className='size-4  m-1' />}
         {Icon ? <Icon className='h-4 w-4 mr-2' /> : null}
         <span className='text-xs py-1'>{title}</span>
       </div>
diff --git a/frontend/console/src/features/console/right-panel/ModulePanels.tsx b/frontend/console/src/features/console/right-panel/ModulePanels.tsx
index 8a5920b53a..8d3b52bfee 100644
--- a/frontend/console/src/features/console/right-panel/ModulePanels.tsx
+++ b/frontend/console/src/features/console/right-panel/ModulePanels.tsx
@@ -1,13 +1,13 @@
 import {
-  ArrowRightEndOnRectangleIcon,
-  ArrowRightStartOnRectangleIcon,
-  ArrowTopRightOnSquareIcon,
-  ArrowsRightLeftIcon,
-  BoltIcon,
-  CodeBracketIcon,
-  Cog6ToothIcon,
-  LockClosedIcon,
-} from '@heroicons/react/24/outline'
+  ArrowLeftRightIcon,
+  CodeSquareIcon,
+  FunctionIcon,
+  InboxDownloadIcon,
+  InboxUploadIcon,
+  LinkSquare02Icon,
+  Settings02Icon,
+  SquareLock02Icon,
+} from 'hugeicons-react'
 import type { NavigateFunction } from 'react-router-dom'
 import { CodeBlock } from '../../../components'
 import { RightPanelAttribute } from '../../../components/RightPanelAttribute'
@@ -20,7 +20,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
 
   if (module.verbs && module.verbs.length > 0) {
     panels.push({
-      icon: BoltIcon,
+      icon: FunctionIcon,
       title: 'Verbs',
       expanded: true,
       children: module.verbs?.map((v) => (
@@ -31,7 +31,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
             className='flex items-center space-x-2 hover:text-indigo-400 py-1 px-2 rounded'
             onClick={() => navigate(`/deployments/${module.deploymentKey}/verbs/${v.verb?.name}`)}
           >
-            <ArrowTopRightOnSquareIcon className='size-4' />
+            <LinkSquare02Icon className='size-4' />
           </button>
         </div>
       )),
@@ -40,7 +40,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
 
   if (module.secrets && module.secrets.length > 0) {
     panels.push({
-      icon: LockClosedIcon,
+      icon: SquareLock02Icon,
       title: 'Secrets',
       expanded: false,
       children: module.secrets.map((s, index) => (
@@ -51,7 +51,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
 
   if (module.configs && module.configs.length > 0) {
     panels.push({
-      icon: Cog6ToothIcon,
+      icon: Settings02Icon,
       title: 'Configs',
       expanded: false,
       children: module.configs.map((c) => <RightPanelAttribute key={c.config?.name} name={c.config?.name} value={c.config?.type?.value?.case} />),
@@ -59,21 +59,21 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
   }
 
   panels.push({
-    icon: ArrowsRightLeftIcon,
+    icon: ArrowLeftRightIcon,
     title: 'Relationships',
     expanded: false,
     children: (
       <div className='flex flex-col space-y-2'>
         {callsIn(allModules, module)?.flatMap((inCall) => (
           <div key={`in-${inCall.module}-${inCall.verb}`} className='flex items-center space-x-2'>
-            <ArrowRightEndOnRectangleIcon className='h-4 w-4 text-green-600' />
+            <InboxDownloadIcon className='h-4 w-4 text-green-600' />
             <div className='truncate text-xs'>{`${inCall?.module}.${inCall?.verb}`}</div>
           </div>
         ))}
         {callsOut(module)?.map((out, outIndex) =>
           out?.calls.map((call, callIndex) => (
             <div key={`out-${outIndex}-${call?.module}.${call?.name}-${callIndex}`} className='flex items-center space-x-2'>
-              <ArrowRightStartOnRectangleIcon className='h-4 w-4 text-blue-600' />
+              <InboxUploadIcon className='h-4 w-4 text-blue-600' />
               <div className='truncate text-xs'>{`${call?.module}.${call?.name}`}</div>
             </div>
           )),
@@ -83,7 +83,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
   })
 
   panels.push({
-    icon: CodeBracketIcon,
+    icon: CodeSquareIcon,
     title: 'Schema',
     expanded: false,
     children: (
diff --git a/frontend/console/src/features/console/right-panel/RightPanelHeader.tsx b/frontend/console/src/features/console/right-panel/RightPanelHeader.tsx
index 5ce5263952..f842e25dd2 100644
--- a/frontend/console/src/features/console/right-panel/RightPanelHeader.tsx
+++ b/frontend/console/src/features/console/right-panel/RightPanelHeader.tsx
@@ -1,11 +1,11 @@
-import { BoltIcon, Cog6ToothIcon, CubeIcon, LockClosedIcon, RectangleGroupIcon } from '@heroicons/react/24/outline'
+import { CellsIcon, FunctionIcon, PackageIcon, Settings02Icon, SquareLock02Icon } from 'hugeicons-react'
 import { Config, Module, Secret, Verb } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import type { FTLNode } from '../../graph/GraphPane'
 
 export const headerForNode = (node: FTLNode | null) => {
   if (!node) {
     return header({
-      IconComponent: CubeIcon,
+      IconComponent: CellsIcon,
       content: <div className='text-sm font-medium truncate'>Root</div>,
     })
   }
@@ -34,7 +34,7 @@ const header = ({ IconComponent, content }: { IconComponent: React.ElementType;
 
 const moduleHeader = (module: Module) => {
   return header({
-    IconComponent: RectangleGroupIcon,
+    IconComponent: PackageIcon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>{module.name}</div>
@@ -50,7 +50,7 @@ const moduleHeader = (module: Module) => {
 
 const verbHeader = (verb: Verb) => {
   return header({
-    IconComponent: BoltIcon,
+    IconComponent: FunctionIcon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>{verb.verb?.name}</div>
@@ -66,7 +66,7 @@ const verbHeader = (verb: Verb) => {
 
 const secretHeader = (secret: Secret) => {
   return header({
-    IconComponent: LockClosedIcon,
+    IconComponent: SquareLock02Icon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>Secret</div>
@@ -82,7 +82,7 @@ const secretHeader = (secret: Secret) => {
 
 const configHeader = (config: Config) => {
   return header({
-    IconComponent: Cog6ToothIcon,
+    IconComponent: Settings02Icon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>{config.config?.name}</div>
diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx
index be7067f7f6..6ad959b447 100644
--- a/frontend/console/src/features/modules/ModulesTree.tsx
+++ b/frontend/console/src/features/modules/ModulesTree.tsx
@@ -1,21 +1,20 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
 import {
-  ArrowRightCircleIcon,
-  BellAlertIcon,
-  BellIcon,
-  BoltIcon,
-  BookOpenIcon,
-  ChevronRightIcon,
-  CircleStackIcon,
-  CodeBracketSquareIcon,
-  Cog6ToothIcon,
-  DocumentDuplicateIcon,
-  LockClosedIcon,
-  NumberedListIcon,
-  SquaresPlusIcon,
-  TableCellsIcon,
-} from '@heroicons/react/24/outline'
-import type { ForwardRefExoticComponent, SVGProps } from 'react'
+  AnonymousIcon,
+  ArrowRight01Icon,
+  BubbleChatIcon,
+  CircleArrowRight02Icon,
+  CodeIcon,
+  DatabaseIcon,
+  FlowIcon,
+  FunctionIcon,
+  type HugeiconsProps,
+  LeftToRightListNumberIcon,
+  MessageIncoming02Icon,
+  PackageIcon,
+  Settings02Icon,
+  SquareLock02Icon,
+} from 'hugeicons-react'
 import { useEffect, useMemo, useRef } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import type { Decl } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
@@ -26,18 +25,18 @@ import { addModuleToLocalStorageIfMissing, listExpandedModulesFromLocalStorage,
 // This could alternatively be an icon, but we'd need to pick a good one.
 const ExportBadge = () => <span className='text-xs py-0.5 px-1.5 bg-gray-200 dark:bg-gray-800 dark:text-gray-300 rounded-md'>Exported</span>
 
-type IconMap = Record<string, ForwardRefExoticComponent<SVGProps<SVGSVGElement> & { title?: string; titleId?: string }>>
+type IconMap = Record<string, React.FC<Omit<HugeiconsProps, 'ref'> & React.RefAttributes<SVGSVGElement>>>
 const icons: IconMap = {
-  config: Cog6ToothIcon,
-  data: TableCellsIcon,
-  database: CircleStackIcon,
-  enum: NumberedListIcon,
-  fsm: SquaresPlusIcon,
-  topic: BellIcon,
-  typeAlias: DocumentDuplicateIcon,
-  secret: LockClosedIcon,
-  subscription: BellAlertIcon,
-  verb: BoltIcon,
+  config: Settings02Icon,
+  data: CodeIcon,
+  database: DatabaseIcon,
+  enum: LeftToRightListNumberIcon,
+  fsm: FlowIcon,
+  topic: BubbleChatIcon,
+  typeAlias: AnonymousIcon,
+  secret: SquareLock02Icon,
+  subscription: MessageIncoming02Icon,
+  verb: FunctionIcon,
 }
 
 type WithExport = { export?: boolean }
@@ -47,7 +46,7 @@ const DeclNode = ({ decl, href, isSelected }: { decl: Decl; href: string; isSele
     return []
   }
   const navigate = useNavigate()
-  const Icon = useMemo(() => icons[decl.value.case || ''] || CodeBracketSquareIcon, [decl.value.case])
+  const Icon = useMemo(() => icons[decl.value.case || ''] || CodeIcon, [decl.value.case])
   return (
     <li className='my-1'>
       <div
@@ -90,9 +89,9 @@ const ModuleSection = ({ module, isExpanded, toggleExpansion }: { module: Module
           )}
           onClick={() => toggleExpansion(module.name)}
         >
-          <BookOpenIcon aria-hidden='true' className='size-4 my-1 shrink-0 ' />
+          <PackageIcon aria-hidden='true' className='size-4 my-1 shrink-0 ' />
           {module.name}
-          <ArrowRightCircleIcon
+          <CircleArrowRight02Icon
             className='size-4 shrink-0 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
             onClick={(e) => {
               e.preventDefault()
@@ -101,7 +100,7 @@ const ModuleSection = ({ module, isExpanded, toggleExpansion }: { module: Module
             }}
           />
           {module.decls.length === 0 || (
-            <ChevronRightIcon aria-hidden='true' className='ml-auto h-4 w-4 shrink-0 group-data-[open]:rotate-90 group-data-[open]:text-gray-500' />
+            <ArrowRight01Icon aria-hidden='true' className='ml-auto h-4 w-4 shrink-0 group-data-[open]:rotate-90 group-data-[open]:text-gray-500' />
           )}
         </DisclosureButton>
         <DisclosurePanel as='ul' className='px-2'>
diff --git a/frontend/console/src/features/timeline/TimelineIcon.tsx b/frontend/console/src/features/timeline/TimelineIcon.tsx
index 0dab9750ce..78d35540ec 100644
--- a/frontend/console/src/features/timeline/TimelineIcon.tsx
+++ b/frontend/console/src/features/timeline/TimelineIcon.tsx
@@ -1,4 +1,4 @@
-import { ListBulletIcon, PhoneArrowDownLeftIcon, PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
+import { Call02Icon, CallIncoming04Icon, Menu01Icon, Rocket01Icon } from 'hugeicons-react'
 import type { Event } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { LogLevelBadgeSmall } from '../logs/LogLevelBadgeSmall'
 
@@ -8,20 +8,16 @@ export const TimelineIcon = ({ event }: { event: Event }) => {
     switch (event.entry.case) {
       case 'call': {
         const textColor = event.entry.value.error ? 'text-red-600' : 'text-indigo-600'
-        return event.entry.value.sourceVerbRef ? (
-          <PhoneIcon className={`${style} ${textColor}`} />
-        ) : (
-          <PhoneArrowDownLeftIcon className={`${style} ${textColor}`} />
-        )
+        return event.entry.value.sourceVerbRef ? <Call02Icon className={`${style} ${textColor}`} /> : <CallIncoming04Icon className={`${style} ${textColor}`} />
       }
       case 'deploymentCreated':
-        return <RocketLaunchIcon className='h4 w-4 text-green-500' />
+        return <Rocket01Icon className='h4 w-4 text-green-500' />
       case 'deploymentUpdated':
-        return <RocketLaunchIcon className='h4 w-4 text-indigo-600' />
+        return <Rocket01Icon className='h4 w-4 text-indigo-600' />
       case 'log':
         return <LogLevelBadgeSmall logLevel={event.entry.value.logLevel} />
       default:
-        return <ListBulletIcon className={`${style}`} />
+        return <Menu01Icon className={`${style}`} />
     }
   }
 
diff --git a/frontend/console/src/features/timeline/TimelinePage.tsx b/frontend/console/src/features/timeline/TimelinePage.tsx
index 29ee4dbb3f..5aadeaa494 100644
--- a/frontend/console/src/features/timeline/TimelinePage.tsx
+++ b/frontend/console/src/features/timeline/TimelinePage.tsx
@@ -1,4 +1,4 @@
-import { ListBulletIcon } from '@heroicons/react/24/outline'
+import { ListViewIcon } from 'hugeicons-react'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Page } from '../../layout'
@@ -35,7 +35,7 @@ export const TimelinePage = () => {
   return (
     <SidePanelProvider>
       <Page>
-        <Page.Header icon={<ListBulletIcon />} title='Events'>
+        <Page.Header icon={<ListViewIcon className='size-5' />} title='Events'>
           <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
         </Page.Header>
         <Page.Body className='flex'>
diff --git a/frontend/console/src/features/timeline/filters/FilterPanelSection.tsx b/frontend/console/src/features/timeline/filters/FilterPanelSection.tsx
index 3c91898945..ed7665a9f6 100644
--- a/frontend/console/src/features/timeline/filters/FilterPanelSection.tsx
+++ b/frontend/console/src/features/timeline/filters/FilterPanelSection.tsx
@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react'
-import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import { ArrowUp01Icon } from 'hugeicons-react'
 import { textColor } from '../../../utils'
 
 export const FilterPanelSection = ({
@@ -19,7 +19,7 @@ export const FilterPanelSection = ({
             className={`flex w-full justify-between rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 py-1 px-2 text-left text-sm font-medium ${textColor} focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75`}
           >
             <span>{title}</span>
-            <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 text-gray-500`} />
+            <ArrowUp01Icon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 text-gray-500`} />
           </Disclosure.Button>
           <Disclosure.Panel className={`px-2 py-2 text-sm ${textColor}`}>
             <fieldset>
diff --git a/frontend/console/src/features/timeline/filters/LogLevelsFilter.tsx b/frontend/console/src/features/timeline/filters/LogLevelsFilter.tsx
deleted file mode 100644
index eee8ab58f9..0000000000
--- a/frontend/console/src/features/timeline/filters/LogLevelsFilter.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Popover, Transition } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { Fragment } from 'react'
-import { textColor } from '../../../utils'
-import { logLevelText } from '../../logs/log.utils'
-
-const logLevels = [1, 5, 9, 13, 17]
-
-export const LogLevelsFilter = ({
-  selectedLogLevels,
-  onLogLevelsChanged,
-}: {
-  selectedLogLevels: number[]
-  onLogLevelsChanged: (logLevel: number, checked: boolean) => void
-}) => {
-  return (
-    <Popover.Group className='hidden sm:flex sm:items-baseline sm:space-x-8'>
-      <Popover as='div' key='log-levels' id={'desktop-menu-log-levels'} className='relative inline-block text-left'>
-        <div>
-          <Popover.Button className={`group inline-flex items-center justify-center text-sm font-medium ${textColor} hover:text-gray-900`}>
-            <span>Log levels</span>
-            <span className='ml-1.5 rounded text-white bg-indigo-600 dark:bg-indigo-600 px-1.5 py-0.5 text-xs font-semibold tabular-nums'>
-              {selectedLogLevels.length}
-            </span>
-            <ChevronDownIcon className='-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500' aria-hidden='true' />
-          </Popover.Button>
-        </div>
-
-        <Transition
-          as={Fragment}
-          enter='transition ease-out duration-100'
-          enterFrom='transform opacity-0 scale-95'
-          enterTo='transform opacity-100 scale-100'
-          leave='transition ease-in duration-75'
-          leaveFrom='transform opacity-100 scale-100'
-          leaveTo='transform opacity-0 scale-95'
-        >
-          <Popover.Panel
-            className={'absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none'}
-          >
-            <form className='space-y-4'>
-              {logLevels.map((level) => (
-                <div key={level} className='flex items-center'>
-                  <input
-                    id={`log-level-${level}`}
-                    name={`log-level-${level}`}
-                    defaultValue={level}
-                    type='checkbox'
-                    className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600'
-                    checked={selectedLogLevels.includes(level)}
-                    onChange={(e) => onLogLevelsChanged(level, e.target.checked)}
-                  />
-                  <label htmlFor={`log-level-${level}`} className='ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900'>
-                    {logLevelText[level]}
-                  </label>
-                </div>
-              ))}
-            </form>
-          </Popover.Panel>
-        </Transition>
-      </Popover>
-    </Popover.Group>
-  )
-}
diff --git a/frontend/console/src/features/timeline/filters/TimeFilter.tsx b/frontend/console/src/features/timeline/filters/TimeFilter.tsx
deleted file mode 100644
index c365ef2038..0000000000
--- a/frontend/console/src/features/timeline/filters/TimeFilter.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Popover, Transition } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { Fragment } from 'react'
-import { textColor } from '../../../utils'
-
-interface TimeRange {
-  label: string
-  value: number
-}
-
-export const TIME_RANGES: Record<string, TimeRange> = {
-  '5m': { label: 'Last 5 minutes', value: 5 * 60 * 1000 },
-  '30m': { label: 'Last 30 minutes', value: 30 * 60 * 1000 },
-  '1h': { label: 'Last 1 hour', value: 60 * 60 * 1000 },
-  '24h': { label: 'Last 24 hours', value: 24 * 60 * 60 * 1000 },
-}
-
-export const TimeFilter = ({
-  selectedRange,
-  onSelectedRangeChanged,
-}: {
-  selectedRange: string
-  onSelectedRangeChanged: (range: string) => void
-}) => {
-  return (
-    <Popover.Group className='hidden sm:flex sm:items-baseline sm:space-x-8'>
-      <Popover as='div' key='log-levels' id={'desktop-menu-log-levels'} className='relative inline-block text-left'>
-        <div>
-          <Popover.Button className={`group inline-flex items-center justify-center text-sm font-medium ${textColor} hover:text-gray-900`}>
-            <span>{TIME_RANGES[selectedRange].label}</span>
-            <ChevronDownIcon className='-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500' aria-hidden='true' />
-          </Popover.Button>
-        </div>
-
-        <Transition
-          as={Fragment}
-          enter='transition ease-out duration-100'
-          enterFrom='transform opacity-0 scale-95'
-          enterTo='transform opacity-100 scale-100'
-          leave='transition ease-in duration-75'
-          leaveFrom='transform opacity-100 scale-100'
-          leaveTo='transform opacity-0 scale-95'
-        >
-          <Popover.Panel
-            className={'absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none'}
-          >
-            <form className='space-y-4'>
-              {Object.keys(TIME_RANGES).map((key) => (
-                <div key={key} className='flex items-center'>
-                  <input
-                    id={`time-range-${key}`}
-                    name={`time-range-${key}`}
-                    type='radio'
-                    className='h-4 w-4 rounded-full border-gray-300 text-indigo-600 focus:ring-indigo-600'
-                    checked={selectedRange === key}
-                    onChange={() => onSelectedRangeChanged(key)}
-                  />
-                  <label htmlFor={`time-range-${key}`} className='ml-3 whitespace-nowrap pr-6 text-sm font-medium text-gray-900'>
-                    {TIME_RANGES[key].label}
-                  </label>
-                </div>
-              ))}
-            </form>
-          </Popover.Panel>
-        </Transition>
-      </Popover>
-    </Popover.Group>
-  )
-}
diff --git a/frontend/console/src/features/timeline/filters/TimelineFilterPanel.tsx b/frontend/console/src/features/timeline/filters/TimelineFilterPanel.tsx
index 03f391ec99..24e584f763 100644
--- a/frontend/console/src/features/timeline/filters/TimelineFilterPanel.tsx
+++ b/frontend/console/src/features/timeline/filters/TimelineFilterPanel.tsx
@@ -1,4 +1,4 @@
-import { PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
+import { Call02Icon, Rocket01Icon } from 'hugeicons-react'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 import { useModules } from '../../../api/modules/use-modules'
@@ -16,17 +16,17 @@ interface EventFilter {
 }
 
 const EVENT_TYPES: Record<string, EventFilter> = {
-  call: { label: 'Call', type: EventType.CALL, icon: <PhoneIcon className='w-4 h-4 text-indigo-600 ml-1' /> },
+  call: { label: 'Call', type: EventType.CALL, icon: <Call02Icon className='w-4 h-4 text-indigo-600 ml-1' /> },
   log: { label: 'Log', type: EventType.LOG, icon: <LogLevelBadgeSmall logLevel={LogLevel.INFO} /> },
   deploymentCreated: {
     label: 'Deployment Created',
     type: EventType.DEPLOYMENT_CREATED,
-    icon: <RocketLaunchIcon className='w-4 h-4 text-green-500 ml-1' />,
+    icon: <Rocket01Icon className='w-4 h-4 text-green-500 ml-1' />,
   },
   deploymentUpdated: {
     label: 'Deployment Updated',
     type: EventType.DEPLOYMENT_UPDATED,
-    icon: <RocketLaunchIcon className='w-4 h-4 text-indigo-600 ml-1' />,
+    icon: <Rocket01Icon className='w-4 h-4 text-indigo-600 ml-1' />,
   },
 }
 
diff --git a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
index 947e51f134..3125a6b262 100644
--- a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
+++ b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
@@ -1,6 +1,6 @@
 import { Timestamp } from '@bufbuild/protobuf'
-import { Listbox, Transition } from '@headlessui/react'
-import { BackwardIcon, CheckIcon, ChevronUpDownIcon, ForwardIcon, PauseIcon, PlayIcon } from '@heroicons/react/24/outline'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
+import { Backward02Icon, Forward02Icon, PauseIcon, PlayIcon, Tick02Icon, UnfoldLessIcon } from 'hugeicons-react'
 import { Fragment, useEffect, useState } from 'react'
 import { bgColor, borderColor, classNames, formatTimestampShort, formatTimestampTime, panelColor, textColor } from '../../../utils'
 
@@ -111,45 +111,45 @@ export const TimelineTimeControls = ({
         <Listbox value={selected} onChange={handleRangeChanged}>
           {({ open }) => (
             <>
-              <div className='relative w-40 mr-2 -mt-0.5 items-center'>
-                <Listbox.Button
+              <div className='relative w-40 mr-2 mt-0.5 items-center'>
+                <ListboxButton
                   className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-3 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
                 >
                   <span className='block truncate'>{selected.label}</span>
                   <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
-                    <ChevronUpDownIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
+                    <UnfoldLessIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
                   </span>
-                </Listbox.Button>
+                </ListboxButton>
 
                 <Transition show={open} as={Fragment} leave='transition ease-in duration-100' leaveFrom='opacity-100' leaveTo='opacity-0'>
-                  <Listbox.Options
+                  <ListboxOptions
                     className={`absolute z-10 max-h-60 w-full overflow-auto rounded-md ${panelColor} py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
                   >
                     {Object.keys(TIME_RANGES).map((key) => {
                       const timeRange = TIME_RANGES[key]
                       return (
-                        <Listbox.Option
+                        <ListboxOption
                           key={key}
-                          className={({ active }) =>
-                            classNames(active ? 'bg-indigo-600 text-white' : `${textColor}`, 'relative cursor-pointer select-none py-2 pl-3 pr-9')
+                          className={({ focus }) =>
+                            classNames(focus ? 'bg-indigo-600 text-white' : `${textColor}`, 'relative cursor-pointer select-none py-2 pl-3 pr-9')
                           }
                           value={timeRange}
                         >
-                          {({ selected, active }) => (
+                          {({ selected, focus }) => (
                             <>
                               <span className={classNames(selected ? 'font-semibold' : 'font-normal', 'block truncate')}>{timeRange.label}</span>
 
                               {selected ? (
-                                <span className={classNames(active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4')}>
-                                  <CheckIcon className='h-4 w-4' aria-hidden='true' />
+                                <span className={classNames(focus ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-2')}>
+                                  <Tick02Icon className='h-4 w-4' aria-hidden='true' />
                                 </span>
                               ) : null}
                             </>
                           )}
-                        </Listbox.Option>
+                        </ListboxOption>
                       )
                     })}
-                  </Listbox.Options>
+                  </ListboxOptions>
                 </Transition>
               </div>
             </>
@@ -160,7 +160,7 @@ export const TimelineTimeControls = ({
             <button
               type='button'
               onClick={() => setIsPaused(!isPaused)}
-              className={`relative inline-flex items-center rounded-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700 focus:z-10`}
+              className={`relative inline-flex items-center rounded-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:text-gray-600 hover:bg-gray-50 dark:hover:text-gray-300 dark:hover:bg-indigo-700 focus:z-10`}
             >
               {isPaused ? <PlayIcon className='w-4 h-4' /> : <PauseIcon className='w-4 h-4' />}
             </button>
@@ -173,14 +173,14 @@ export const TimelineTimeControls = ({
               onClick={handleTimeBackward}
               className={`relative inline-flex items-center rounded-l-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700 focus:z-10`}
             >
-              <BackwardIcon className='w-4 h-4' />
+              <Backward02Icon className='w-4 h-4' />
             </button>
             <button
               type='button'
               onClick={handleTimeForward}
               className={`relative -ml-px inline-flex items-center rounded-r-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700 focus:z-10`}
             >
-              <ForwardIcon className='w-4 h-4' />
+              <Forward02Icon className='w-4 h-4' />
             </button>
           </span>
         )}
diff --git a/frontend/console/src/features/verbs/VerbPage.tsx b/frontend/console/src/features/verbs/VerbPage.tsx
index c91339184d..09aaf1d9fd 100644
--- a/frontend/console/src/features/verbs/VerbPage.tsx
+++ b/frontend/console/src/features/verbs/VerbPage.tsx
@@ -1,4 +1,4 @@
-import { BoltIcon } from '@heroicons/react/24/outline'
+import { FunctionIcon } from 'hugeicons-react'
 import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
@@ -52,7 +52,7 @@ export const VerbPage = ({ moduleName, declName }: { moduleName: string; declNam
 
   const header = (
     <div className='flex items-center gap-2 px-2 py-2'>
-      <BoltIcon className='h-5 w-5 text-indigo-600' />
+      <FunctionIcon className='h-5 w-5 text-indigo-500' />
       <div className='flex flex-col min-w-0'>Verb</div>
     </div>
   )
diff --git a/frontend/console/src/features/verbs/VerbRightPanel.tsx b/frontend/console/src/features/verbs/VerbRightPanel.tsx
index e051326697..cf680b60ec 100644
--- a/frontend/console/src/features/verbs/VerbRightPanel.tsx
+++ b/frontend/console/src/features/verbs/VerbRightPanel.tsx
@@ -1,4 +1,4 @@
-import { ArrowRightStartOnRectangleIcon } from '@heroicons/react/24/outline'
+import { InboxUploadIcon } from 'hugeicons-react'
 import { RightPanelAttribute } from '../../components/RightPanelAttribute'
 import type { Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import type { ExpandablePanelProps } from '../console/ExpandablePanel'
@@ -29,7 +29,7 @@ export const verbPanels = (verb?: Verb) => {
       expanded: true,
       children: calls?.map((c, index) => (
         <div key={`verb-call-${index}-${c.module}-${c.name}`} className='flex items-center space-x-2 space-y-1'>
-          <ArrowRightStartOnRectangleIcon className='h-4 w-4 text-blue-600' />
+          <InboxUploadIcon className='h-4 w-4 text-blue-600' />
           <div className='truncate text-xs'>{`${c?.module}.${c?.name}`}</div>
         </div>
       )),
diff --git a/frontend/console/src/layout/NotFoundPage.tsx b/frontend/console/src/layout/NotFoundPage.tsx
index 1a2655ac86..c7274a7dc7 100644
--- a/frontend/console/src/layout/NotFoundPage.tsx
+++ b/frontend/console/src/layout/NotFoundPage.tsx
@@ -1,4 +1,4 @@
-import { ListBulletIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import { CellsIcon, ListViewIcon } from 'hugeicons-react'
 
 export const NotFoundPage = () => {
   return (
@@ -14,9 +14,7 @@ export const NotFoundPage = () => {
           <ul className='-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5'>
             <li className='relative flex gap-x-6 py-6'>
               <div className='flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10'>
-                <div className='h-6 w-6 text-indigo-600'>
-                  <ListBulletIcon />
-                </div>
+                <ListViewIcon className='size-5 text-indigo-600' />
               </div>
               <div className='flex-auto'>
                 <h3 className='text-sm font-semibold leading-6 text-gray-900'>
@@ -39,18 +37,16 @@ export const NotFoundPage = () => {
             </li>
             <li className='relative flex gap-x-6 py-6'>
               <div className='flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10'>
-                <div className='h-6 w-6 text-indigo-600'>
-                  <Square3Stack3DIcon />
-                </div>
+                <CellsIcon className='size-5 text-indigo-600' />
               </div>
               <div className='flex-auto'>
                 <h3 className='text-sm font-semibold leading-6 text-gray-900'>
-                  <a href='/deployments'>
+                  <a href='/modules'>
                     <span className='absolute inset-0' aria-hidden='true' />
-                    Deployments
+                    Modules
                   </a>
                 </h3>
-                <p className='mt-0 text-sm leading-6 text-gray-600'>View and filter FTL events.</p>
+                <p className='mt-0 text-sm leading-6 text-gray-600'>View FTL modules.</p>
               </div>
               <div className='flex-none self-center'>
                 <svg className='h-5 w-5 text-gray-400' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'>
diff --git a/frontend/console/src/layout/Notification.tsx b/frontend/console/src/layout/Notification.tsx
index b419a075b8..822f717c72 100644
--- a/frontend/console/src/layout/Notification.tsx
+++ b/frontend/console/src/layout/Notification.tsx
@@ -1,6 +1,5 @@
 import { Transition } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/20/solid'
-import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
+import { Alert02Icon, AlertCircleIcon, Cancel02Icon, CheckmarkCircle02Icon, InformationCircleIcon } from 'hugeicons-react'
 import { Fragment, useContext } from 'react'
 import { NotificationType, NotificationsContext } from '../providers/notifications-provider'
 import { textColor } from '../utils'
@@ -26,11 +25,11 @@ export const Notification = () => {
   const icon = () => {
     switch (notification?.type) {
       case NotificationType.Success:
-        return <CheckCircleIcon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
+        return <CheckmarkCircle02Icon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
       case NotificationType.Error:
-        return <ExclamationTriangleIcon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
+        return <Alert02Icon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
       case NotificationType.Warning:
-        return <ExclamationCircleIcon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
+        return <AlertCircleIcon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
       case NotificationType.Info:
         return <InformationCircleIcon className={`h-6 w-6 ${iconColor()}`} aria-hidden='true' />
       default:
@@ -68,7 +67,7 @@ export const Notification = () => {
                     }}
                   >
                     <span className='sr-only'>Close</span>
-                    <XMarkIcon className='h-5 w-5' aria-hidden='true' />
+                    <Cancel02Icon className='h-5 w-5' aria-hidden='true' />
                   </button>
                 </div>
               </div>
diff --git a/frontend/console/src/layout/Page.tsx b/frontend/console/src/layout/Page.tsx
index 03a1a9dd0c..7e07c9fb98 100644
--- a/frontend/console/src/layout/Page.tsx
+++ b/frontend/console/src/layout/Page.tsx
@@ -1,4 +1,4 @@
-import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { ArrowRight02Icon } from 'hugeicons-react'
 import type React from 'react'
 import { classNames } from '../utils'
 
@@ -33,7 +33,7 @@ const Header = ({
                     <a href={crumb.link || '#'} className='text-lg mr-2 hover:text-indigo-500'>
                       {crumb.label}
                     </a>
-                    <ChevronRightIcon className='mt-0.5 h-5 w-5' />
+                    <ArrowRight02Icon className='mt-0.5 h-5 w-5' />
                   </div>
                 </li>
               ))}
diff --git a/frontend/console/src/layout/navigation/Navigation.tsx b/frontend/console/src/layout/navigation/Navigation.tsx
index 1d2df860f8..75791da21a 100644
--- a/frontend/console/src/layout/navigation/Navigation.tsx
+++ b/frontend/console/src/layout/navigation/Navigation.tsx
@@ -1,14 +1,14 @@
-import { CubeTransparentIcon, ListBulletIcon, ServerStackIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import { CellsIcon, Database01Icon, ListViewIcon, WorkflowSquare06Icon } from 'hugeicons-react'
 import { NavLink } from 'react-router-dom'
 import { DarkModeSwitch } from '../../components'
 import { classNames } from '../../utils'
 import { Version } from './Version'
 
 const navigation = [
-  { name: 'Events', href: '/events', icon: ListBulletIcon },
-  { name: 'Modules', href: '/modules', icon: Square3Stack3DIcon },
-  { name: 'Graph', href: '/graph', icon: CubeTransparentIcon },
-  { name: 'Infrastructure', href: '/infrastructure', icon: ServerStackIcon },
+  { name: 'Events', href: '/events', icon: ListViewIcon },
+  { name: 'Modules', href: '/modules', icon: CellsIcon },
+  { name: 'Graph', href: '/graph', icon: WorkflowSquare06Icon },
+  { name: 'Infrastructure', href: '/infrastructure', icon: Database01Icon },
 ]
 
 export const Navigation = ({ version }: { version?: string }) => {
@@ -30,7 +30,7 @@ export const Navigation = ({ version }: { version?: string }) => {
                       )
                     }
                   >
-                    <item.icon className='text-lg size-6' />
+                    <item.icon className='text-lg size-5' />
                     <span className='hidden md:inline'>{item.name}</span>
                   </NavLink>
                 ))}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b380f029a2..cb106f66a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,55 +6,6 @@ settings:
 
 importers:
 
-  frontend/vscode:
-    dependencies:
-      lookpath:
-        specifier: ^1.2.2
-        version: 1.2.2
-      semver:
-        specifier: ^7.6.0
-        version: 7.6.3
-      vscode-languageclient:
-        specifier: ^10.0.0-next.8
-        version: 10.0.0-next.13
-    devDependencies:
-      '@biomejs/biome':
-        specifier: 1.8.3
-        version: 1.8.3
-      '@types/mocha':
-        specifier: ^10.0.6
-        version: 10.0.7
-      '@types/node':
-        specifier: 20.x
-        version: 20.16.2
-      '@types/semver':
-        specifier: ^7.5.8
-        version: 7.5.8
-      '@types/vscode':
-        specifier: ^1.87.0
-        version: 1.92.0
-      '@vscode/test-cli':
-        specifier: ^0.0.10
-        version: 0.0.10
-      '@vscode/test-electron':
-        specifier: ^2.3.9
-        version: 2.4.1
-      '@vscode/vsce':
-        specifier: ^3.0.0
-        version: 3.0.0
-      ts-loader:
-        specifier: ^9.5.1
-        version: 9.5.1(typescript@5.5.4)(webpack@5.94.0(webpack-cli@5.1.4))
-      typescript:
-        specifier: ^5.3.3
-        version: 5.5.4
-      webpack:
-        specifier: ^5.90.3
-        version: 5.94.0(webpack-cli@5.1.4)
-      webpack-cli:
-        specifier: ^5.1.4
-        version: 5.1.4(webpack@5.94.0)
-
   frontend/console:
     dependencies:
       '@bufbuild/protobuf':
@@ -93,9 +44,6 @@ importers:
       '@headlessui/react':
         specifier: 2.1.3
         version: 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@heroicons/react':
-        specifier: 2.1.5
-        version: 2.1.5(react@18.3.1)
       '@tailwindcss/forms':
         specifier: ^0.5.6
         version: 0.5.8(tailwindcss@3.4.10)
@@ -126,6 +74,9 @@ importers:
       highlight.js:
         specifier: ^11.8.0
         version: 11.10.0
+      hugeicons-react:
+        specifier: ^0.3.0
+        version: 0.3.0(react@18.3.1)
       json-schema-faker:
         specifier: 0.5.6
         version: 0.5.6
@@ -251,6 +202,55 @@ importers:
         specifier: ^2.0.5
         version: 2.0.5(@types/node@22.5.1)(@vitest/ui@2.0.5)(jsdom@25.0.0)(less@4.2.0)(terser@5.31.6)
 
+  frontend/vscode:
+    dependencies:
+      lookpath:
+        specifier: ^1.2.2
+        version: 1.2.2
+      semver:
+        specifier: ^7.6.0
+        version: 7.6.3
+      vscode-languageclient:
+        specifier: ^10.0.0-next.8
+        version: 10.0.0-next.13
+    devDependencies:
+      '@biomejs/biome':
+        specifier: 1.8.3
+        version: 1.8.3
+      '@types/mocha':
+        specifier: ^10.0.6
+        version: 10.0.7
+      '@types/node':
+        specifier: 20.x
+        version: 20.16.2
+      '@types/semver':
+        specifier: ^7.5.8
+        version: 7.5.8
+      '@types/vscode':
+        specifier: ^1.87.0
+        version: 1.92.0
+      '@vscode/test-cli':
+        specifier: ^0.0.10
+        version: 0.0.10
+      '@vscode/test-electron':
+        specifier: ^2.3.9
+        version: 2.4.1
+      '@vscode/vsce':
+        specifier: ^3.0.0
+        version: 3.0.0
+      ts-loader:
+        specifier: ^9.5.1
+        version: 9.5.1(typescript@5.5.4)(webpack@5.94.0(webpack-cli@5.1.4))
+      typescript:
+        specifier: ^5.3.3
+        version: 5.5.4
+      webpack:
+        specifier: ^5.90.3
+        version: 5.94.0(webpack-cli@5.1.4)
+      webpack-cli:
+        specifier: ^5.1.4
+        version: 5.1.4(webpack@5.94.0)
+
 packages:
 
   '@adobe/css-tools@4.4.0':
@@ -1430,11 +1430,6 @@ packages:
       react: ^18
       react-dom: ^18
 
-  '@heroicons/react@2.1.5':
-    resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==}
-    peerDependencies:
-      react: '>= 16'
-
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
@@ -4180,6 +4175,11 @@ packages:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
 
+  hugeicons-react@0.3.0:
+    resolution: {integrity: sha512-znmC+uX7xVqcIs0q09LvwEvJkjX0U3xgT05BSiRV19farS4lPONOKjYT0JkcQG5cvfV0rXHSEAEVNjbHAu81rg==}
+    peerDependencies:
+      react: '>=16.0.0'
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -6680,7 +6680,7 @@ snapshots:
       '@babel/traverse': 7.25.4
       '@babel/types': 7.25.4
       convert-source-map: 2.0.0
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -6738,7 +6738,7 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -7479,7 +7479,7 @@ snapshots:
       '@babel/parser': 7.25.4
       '@babel/template': 7.25.0
       '@babel/types': 7.25.4
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -7808,7 +7808,7 @@ snapshots:
   '@eslint/config-array@0.18.0':
     dependencies:
       '@eslint/object-schema': 2.1.4
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -7816,7 +7816,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       espree: 10.1.0
       globals: 14.0.0
       ignore: 5.3.2
@@ -7865,10 +7865,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@heroicons/react@2.1.5(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
   '@humanwhocodes/module-importer@1.0.1': {}
 
   '@humanwhocodes/retry@0.3.0': {}
@@ -9444,7 +9440,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 8.0.0-alpha.30
       '@typescript-eslint/visitor-keys': 8.0.0-alpha.30
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -9473,7 +9469,7 @@ snapshots:
 
   '@typescript/vfs@1.6.0(typescript@4.5.2)':
     dependencies:
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       typescript: 4.5.2
     transitivePeerDependencies:
       - supports-color
@@ -9803,7 +9799,7 @@ snapshots:
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -10373,6 +10369,10 @@ snapshots:
     dependencies:
       ms: 2.0.0
 
+  debug@4.3.6:
+    dependencies:
+      ms: 2.1.2
+
   debug@4.3.6(supports-color@8.1.1):
     dependencies:
       ms: 2.1.2
@@ -10544,14 +10544,14 @@ snapshots:
 
   esbuild-register@3.6.0(esbuild@0.18.20):
     dependencies:
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       esbuild: 0.18.20
     transitivePeerDependencies:
       - supports-color
 
   esbuild-register@3.6.0(esbuild@0.21.5):
     dependencies:
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       esbuild: 0.21.5
     transitivePeerDependencies:
       - supports-color
@@ -10650,7 +10650,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       escape-string-regexp: 4.0.0
       eslint-scope: 8.0.2
       eslint-visitor-keys: 4.0.0
@@ -11118,17 +11118,21 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
+  hugeicons-react@0.3.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   human-signals@2.1.0: {}
 
   human-signals@5.0.0: {}
@@ -11539,7 +11543,7 @@ snapshots:
     dependencies:
       chalk: 5.3.0
       commander: 12.1.0
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       execa: 8.0.1
       lilconfig: 3.1.2
       listr2: 8.2.4
@@ -13323,7 +13327,7 @@ snapshots:
   vite-node@2.0.5(@types/node@22.5.1)(less@4.2.0)(terser@5.31.6):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       pathe: 1.1.2
       tinyrainbow: 1.2.0
       vite: 5.4.2(@types/node@22.5.1)(less@4.2.0)(terser@5.31.6)
@@ -13359,7 +13363,7 @@ snapshots:
       '@vitest/spy': 2.0.5
       '@vitest/utils': 2.0.5
       chai: 5.1.1
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
       execa: 8.0.1
       magic-string: 0.30.11
       pathe: 1.1.2