diff --git a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx
index 9ee4f2c04..d2b36cff1 100644
--- a/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx
+++ b/pkg/dashboard/frontend/src/components/apis/APIExplorer.tsx
@@ -6,7 +6,6 @@ import type {
   LocalStorageHistoryItem,
 } from '../../types'
 import {
-  Select,
   Badge,
   Spinner,
   Tabs,
@@ -43,6 +42,15 @@ import { APIMethodBadge } from './APIMethodBadge'
 import { Button } from '../ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import BreadCrumbs from '../layout/BreadCrumbs'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
 
 const getTabCount = (rows: FieldRow[]) => {
   if (!rows) return 0
@@ -391,26 +399,34 @@ const APIExplorer = () => {
                   />
                 </div>
                 <div className="lg:hidden">
-                  <Select<Endpoint>
-                    items={paths}
-                    label="Endpoint"
-                    id="endpoint-select"
-                    className="w-full"
-                    selected={selectedApiEndpoint}
-                    setSelected={setSelectedApiEndpoint}
-                    display={(v) => (
-                      <div className="grid grid-cols-12 items-center gap-4 p-0.5 text-lg">
-                        <APIMethodBadge
-                          method={v.method}
-                          className="col-span-3 w-20 px-1 !text-lg md:col-span-2"
-                        />
-                        <div className="col-span-9 flex gap-4 md:col-span-10">
-                          <span>{v?.api}</span>
-                          <span>{v?.path}</span>
-                        </div>
-                      </div>
-                    )}
-                  />
+                  <Select
+                    value={selectedApiEndpoint.id}
+                    onValueChange={(id) => {
+                      setSelectedApiEndpoint(paths.find((p) => p.id === id))
+                    }}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select Endpoint" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {paths.map((path) => (
+                          <SelectItem key={path.id} value={path.id}>
+                            <div className="grid grid-cols-12 items-center gap-4 p-0.5 text-lg">
+                              <APIMethodBadge
+                                method={path.method}
+                                className="col-span-3 w-20 px-1.5 !text-lg md:col-span-2"
+                              />
+                              <div className="col-span-9 flex gap-4 md:col-span-10">
+                                <span>{path?.api}</span>
+                                <span>{path?.path}</span>
+                              </div>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
                 </div>
 
                 <div className="flex items-center gap-4">
@@ -472,7 +488,7 @@ const APIExplorer = () => {
                 </div>
               </div>
 
-              <div className="bg-white shadow sm:rounded-lg">
+              <div className="rounded-lg bg-white shadow">
                 <Tabs
                   tabs={tabs}
                   index={currentTabIndex}
@@ -581,7 +597,7 @@ const APIExplorer = () => {
                   </div>
                 </div>
               </div>
-              <div className="bg-white shadow sm:rounded-lg">
+              <div className="rounded-lg bg-white shadow">
                 <div className="px-4 py-5 sm:p-6">
                   <div className="sm:flex sm:items-start sm:justify-between">
                     <div className="relative w-full">
diff --git a/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx b/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx
index dd58a7ce2..73aa7b48a 100644
--- a/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx
+++ b/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx
@@ -1,14 +1,11 @@
-import type { ApiHistoryItem, Endpoint } from '../../types'
-import Badge from '../shared/Badge'
-import { formatJSON, getDateString } from '../../lib/utils'
-import { Disclosure } from '@headlessui/react'
-import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import type { ApiHistoryItem } from '../../types'
+import { formatJSON } from '../../lib/utils'
 import { useState } from 'react'
 import { Tabs } from '../shared'
 import CodeEditor from './CodeEditor'
 import APIResponseContent from './APIResponseContent'
 import TableGroup from '../shared/TableGroup'
-import { ScrollArea } from '../ui/scroll-area'
+import HistoryAccordion from '../shared/HistoryAccordion'
 
 interface Props {
   history: ApiHistoryItem[]
@@ -45,13 +42,14 @@ const APIHistory: React.FC<Props> = ({ history, selectedRequest }) => {
   }
 
   return (
-    <ScrollArea className="h-[30rem]" type="always">
-      <div className="flex flex-col gap-2">
-        {requestHistory.map((h, idx) => (
-          <ApiHistoryAccordion key={idx} {...h} />
-        ))}
-      </div>
-    </ScrollArea>
+    <HistoryAccordion
+      items={requestHistory.map((h) => ({
+        label: h.event.api + h.event.request.path,
+        time: h.time,
+        status: h.event?.response?.status,
+        content: <ApiHistoryAccordionContent {...h} />,
+      }))}
+    />
   )
 }
 
@@ -65,9 +63,8 @@ function isJSON(data: string | undefined) {
   return true
 }
 
-const ApiHistoryAccordion: React.FC<ApiHistoryItem> = ({
-  time,
-  event: { api, request, response },
+const ApiHistoryAccordionContent: React.FC<ApiHistoryItem> = ({
+  event: { request, response },
 }) => {
   const [tabIndex, setTabIndex] = useState(0)
 
@@ -78,116 +75,81 @@ const ApiHistoryAccordion: React.FC<ApiHistoryItem> = ({
   const jsonTabs = [...tabs, { name: 'Payload' }]
 
   return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full justify-between rounded-lg border border-slate-100 bg-white px-4 py-2 text-left text-sm font-medium text-black hover:bg-blue-100 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75">
-            <div className="flex w-full flex-row justify-between">
-              <div className="flex flex-row gap-4">
-                {response.status && (
-                  <Badge
-                    status={response.status < 400 ? 'green' : 'red'}
-                    className="!text-md h-6 w-12 sm:w-20"
-                  >
-                    <span className="mr-0.5 hidden md:inline">Status: </span>
-                    {response.status}
-                  </Badge>
-                )}
-                <p className="max-w-[200px] truncate md:max-w-lg">
-                  {api}
-                  {request.path}
-                </p>
-              </div>
-              <div className="flex flex-row gap-2 md:gap-4">
-                <p className="hidden sm:inline">{getDateString(time)}</p>
-                <ChevronUpIcon
-                  className={`${
-                    open ? 'rotate-180 transform' : ''
-                  } h-5 w-5 text-blue-500`}
+    <div className="flex flex-col py-4">
+      <div className="bg-white sm:rounded-lg">
+        <Tabs
+          tabs={isJson ? jsonTabs : tabs}
+          index={tabIndex}
+          setIndex={setTabIndex}
+        />
+        <div className="py-5">
+          {tabIndex === 0 && (
+            <TableGroup
+              headers={['Key', 'Value']}
+              rowDataClassName="max-w-[100px]"
+              groups={[
+                {
+                  name: 'Request Headers',
+                  rows: Object.entries(request.headers)
+                    .filter(([key, value]) => key && value)
+                    .map(([key, value]) => [
+                      key.toLowerCase(),
+                      value.join(', '),
+                    ]),
+                },
+                {
+                  name: 'Response Headers',
+                  rows: Object.entries(response.headers ?? [])
+                    .filter(([key, value]) => key && value)
+                    .map(([key, value]) => [key.toLowerCase(), value]),
+                },
+              ]}
+            />
+          )}
+          {tabIndex === 1 && (
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-2">
+                <p className="text-md font-semibold">Response Data</p>
+                <APIResponseContent
+                  response={{ ...response, data: atob(response.data) }}
                 />
               </div>
             </div>
-          </Disclosure.Button>
-          <Disclosure.Panel className="pb-2 text-sm text-gray-500">
-            <div className="flex flex-col py-4">
-              <div className="bg-white shadow sm:rounded-lg">
-                <Tabs
-                  tabs={isJson ? jsonTabs : tabs}
-                  index={tabIndex}
-                  setIndex={setTabIndex}
-                />
-                <div className="py-5">
-                  {tabIndex === 0 && (
-                    <TableGroup
-                      headers={['Key', 'Value']}
-                      rowDataClassName="max-w-[100px]"
-                      groups={[
-                        {
-                          name: 'Request Headers',
-                          rows: Object.entries(request.headers)
-                            .filter(([key, value]) => key && value)
-                            .map(([key, value]) => [
-                              key.toLowerCase(),
-                              value.join(', '),
-                            ]),
-                        },
-                        {
-                          name: 'Response Headers',
-                          rows: Object.entries(response.headers ?? [])
-                            .filter(([key, value]) => key && value)
-                            .map(([key, value]) => [key.toLowerCase(), value]),
-                        },
-                      ]}
-                    />
-                  )}
-                  {tabIndex === 1 && (
-                    <div className="flex flex-col gap-8">
-                      <div className="flex flex-col gap-2">
-                        <p className="text-md font-semibold">Response Data</p>
-                        <APIResponseContent
-                          response={{ ...response, data: atob(response.data) }}
-                        />
-                      </div>
-                    </div>
+          )}
+          {tabIndex === 2 && (
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-2">
+                <p className="text-md font-semibold">Request Body</p>
+                <CodeEditor
+                  contentType="application/json"
+                  readOnly={true}
+                  value={formatJSON(
+                    JSON.parse(atob(request.body?.toString() ?? '')),
                   )}
-                  {tabIndex === 2 && (
-                    <div className="flex flex-col gap-8">
-                      <div className="flex flex-col gap-2">
-                        <p className="text-md font-semibold">Request Body</p>
-                        <CodeEditor
-                          contentType="application/json"
-                          readOnly={true}
-                          value={formatJSON(
-                            JSON.parse(atob(request.body?.toString() ?? '')),
-                          )}
-                          title="Request Body"
-                        />
-                      </div>
-                      <div className="flex flex-col gap-2">
-                        {request.queryParams && (
-                          <TableGroup
-                            headers={['Key', 'Value']}
-                            rowDataClassName="max-w-[100px]"
-                            groups={[
-                              {
-                                name: 'Query Params',
-                                rows: request.queryParams
-                                  .filter(({ key, value }) => key && value)
-                                  .map(({ key, value }) => [key, value]),
-                              },
-                            ]}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  )}
-                </div>
+                  title="Request Body"
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                {request.queryParams && (
+                  <TableGroup
+                    headers={['Key', 'Value']}
+                    rowDataClassName="max-w-[100px]"
+                    groups={[
+                      {
+                        name: 'Query Params',
+                        rows: request.queryParams
+                          .filter(({ key, value }) => key && value)
+                          .map(({ key, value }) => [key, value]),
+                      },
+                    ]}
+                  />
+                )}
               </div>
             </div>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+          )}
+        </div>
+      </div>
+    </div>
   )
 }
 
diff --git a/pkg/dashboard/frontend/src/components/apis/APIMenu.tsx b/pkg/dashboard/frontend/src/components/apis/APIMenu.tsx
index 5188a7c4d..c72da811f 100644
--- a/pkg/dashboard/frontend/src/components/apis/APIMenu.tsx
+++ b/pkg/dashboard/frontend/src/components/apis/APIMenu.tsx
@@ -1,10 +1,16 @@
-import { Menu, Transition } from '@headlessui/react'
-import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid'
-import { Fragment } from 'react'
 import type { Endpoint } from '../../types'
 import { LOCAL_STORAGE_KEY } from './APIExplorer'
 import { useHistory } from '../../lib/hooks/use-history'
-import { cn, formatJSON } from '@/lib/utils'
+import { formatJSON } from '@/lib/utils'
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '../ui/dropdown-menu'
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon'
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline'
+import ResourceDropdownMenu from '../shared/ResourceDropdownMenu'
 
 interface Props {
   selected: Endpoint
@@ -44,53 +50,20 @@ const APIMenu: React.FC<Props> = ({ selected, onAfterClear }) => {
   }
 
   return (
-    <Menu as="div" className="relative ml-auto">
-      <Menu.Button className="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
-        <span className="sr-only">Open options</span>
-        <EllipsisHorizontalIcon
-          className="h-10 w-10 md:h-6 md:w-6"
-          aria-hidden="true"
-        />
-      </Menu.Button>
-      <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"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-0.5 w-40 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-          <Menu.Item>
-            {({ active }) => (
-              <button
-                className={cn(
-                  active ? 'bg-gray-50' : '',
-                  'flex w-full px-3 py-1 text-sm leading-6 text-gray-900',
-                )}
-                onClick={downloadSpec}
-              >
-                Export Spec
-              </button>
-            )}
-          </Menu.Item>
-          <Menu.Item>
-            {({ active }) => (
-              <button
-                onClick={clearHistory}
-                className={cn(
-                  active ? 'bg-gray-50' : '',
-                  'flex w-full px-3 py-1 text-sm leading-6 text-gray-900',
-                )}
-              >
-                Clear History
-              </button>
-            )}
-          </Menu.Item>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <ResourceDropdownMenu>
+      <DropdownMenuLabel>API Menu</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={downloadSpec}>
+          <ArrowDownOnSquareIcon className="mr-2 h-4 w-4" />
+          <span>Export Spec</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={clearHistory}>
+          <TrashIcon className="mr-2 h-4 w-4" />
+          <span>Clear History</span>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </ResourceDropdownMenu>
   )
 }
 
diff --git a/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx b/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx
index 38b668edf..e314551fd 100644
--- a/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx
+++ b/pkg/dashboard/frontend/src/components/events/EventsExplorer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useWebSocket } from '../../lib/hooks/use-web-socket'
 import type { APIResponse, EventHistoryItem, Schedule, Topic } from '@/types'
-import { Badge, Select, Spinner, Tabs, Loading } from '../shared'
+import { Badge, Spinner, Tabs, Loading } from '../shared'
 import APIResponseContent from '../apis/APIResponseContent'
 import {
   fieldRowArrToHeaders,
@@ -24,6 +24,14 @@ import { capitalize } from 'radash'
 import { Button } from '../ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import BreadCrumbs from '../layout/BreadCrumbs'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
 
 interface Props {
   workerType: 'schedules' | 'topics'
@@ -182,18 +190,28 @@ const EventsExplorer: React.FC<Props> = ({ workerType }) => {
                 </div>
                 {data![workerType] && (
                   <Select
-                    className="w-full"
-                    id={`${workerType}-select`}
-                    items={data![workerType]}
-                    label={capitalize(workerType)}
-                    selected={selectedWorker}
-                    setSelected={setSelectedWorker}
-                    display={(w: Worker) => (
-                      <div className="flex items-center gap-4 p-0.5 text-lg">
-                        {w.name}
-                      </div>
-                    )}
-                  />
+                    value={selectedWorker.name}
+                    onValueChange={(name) => {
+                      setSelectedWorker(
+                        data![workerType].find((b) => b.name === name),
+                      )
+                    }}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue
+                        placeholder={`Select ${capitalize(workerType)}`}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {data![workerType].map((worker) => (
+                          <SelectItem key={worker.name} value={worker.name}>
+                            {worker.name}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
                 )}
               </div>
               <div className="flex items-center gap-4">
diff --git a/pkg/dashboard/frontend/src/components/events/EventsHistory.tsx b/pkg/dashboard/frontend/src/components/events/EventsHistory.tsx
index 4ec1965f1..dc944bfda 100644
--- a/pkg/dashboard/frontend/src/components/events/EventsHistory.tsx
+++ b/pkg/dashboard/frontend/src/components/events/EventsHistory.tsx
@@ -4,12 +4,9 @@ import type {
   Topic,
   TopicHistoryItem,
 } from '../../types'
-import Badge from '../shared/Badge'
-import { formatJSON, getDateString } from '../../lib/utils'
-import { Disclosure } from '@headlessui/react'
-import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import { formatJSON } from '@/lib/utils'
 import CodeEditor from '../apis/CodeEditor'
-import { ScrollArea } from '../ui/scroll-area'
+import HistoryAccordion from '../shared/HistoryAccordion'
 
 interface Props {
   history: EventHistoryItem[]
@@ -33,58 +30,21 @@ const EventsHistory: React.FC<Props> = ({
 
   return (
     <div className="pb-10">
-      <ScrollArea className="h-[30rem]" type="always">
-        <div className="flex flex-col gap-2">
-          {requestHistory.map((h, idx) => (
-            <EventHistoryAccordion key={idx} workerType={workerType} {...h} />
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  )
-}
+      <HistoryAccordion
+        items={requestHistory.map((h) => {
+          let payload = ''
 
-const EventHistoryAccordion: React.FC<
-  EventHistoryItem & Pick<Props, 'workerType'>
-> = ({ event, time, workerType }) => {
-  let payload = ''
+          if (workerType === 'topics') {
+            payload = (h.event as TopicHistoryItem['event']).payload
+          }
 
-  if (workerType === 'topics') {
-    payload = (event as TopicHistoryItem['event']).payload
-  }
-
-  const formattedPayload = payload ? formatJSON(payload) : ''
+          const formattedPayload = payload ? formatJSON(payload) : ''
 
-  return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full justify-between rounded-lg border border-slate-100 bg-white px-4 py-2 text-left text-sm font-medium text-black hover:bg-blue-100 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75">
-            <div className="flex w-full flex-row justify-between">
-              <div className="flex w-2/3 flex-row gap-4">
-                <Badge
-                  status={event.success ? 'green' : 'red'}
-                  className="!text-md h-6 w-16"
-                >
-                  {event.success ? 'success' : 'failure'}
-                </Badge>
-                <p className="text-ellipsis">{event.name}</p>
-              </div>
-              <div className="flex flex-row gap-4">
-                <p>{getDateString(time)}</p>
-                {payload && (
-                  <ChevronUpIcon
-                    className={`${
-                      open ? 'rotate-180 transform' : ''
-                    } h-5 w-5 text-blue-500`}
-                  />
-                )}
-              </div>
-            </div>
-          </Disclosure.Button>
-
-          {formattedPayload && (
-            <Disclosure.Panel className="px-4 pb-2 pt-4 text-sm text-gray-500">
+          return {
+            label: h.event.name,
+            time: h.time,
+            success: Boolean(h.event.success),
+            content: formattedPayload ? (
               <div className="flex flex-col gap-8">
                 <div className="flex flex-col gap-2">
                   <p className="text-md font-semibold">Payload</p>
@@ -96,11 +56,11 @@ const EventHistoryAccordion: React.FC<
                   />
                 </div>
               </div>
-            </Disclosure.Panel>
-          )}
-        </>
-      )}
-    </Disclosure>
+            ) : undefined,
+          }
+        })}
+      />
+    </div>
   )
 }
 
diff --git a/pkg/dashboard/frontend/src/components/events/EventsMenu.tsx b/pkg/dashboard/frontend/src/components/events/EventsMenu.tsx
index fbb093501..23a59d07e 100644
--- a/pkg/dashboard/frontend/src/components/events/EventsMenu.tsx
+++ b/pkg/dashboard/frontend/src/components/events/EventsMenu.tsx
@@ -1,8 +1,13 @@
-import { Menu, Transition } from '@headlessui/react'
-import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid'
-import { cn } from '@/lib/utils'
-import { Fragment } from 'react'
+import { TrashIcon } from '@heroicons/react/20/solid'
+
 import { useHistory } from '../../lib/hooks/use-history'
+import ResourceDropdownMenu from '../shared/ResourceDropdownMenu'
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '../ui/dropdown-menu'
 
 interface Props {
   storageKey: string
@@ -37,40 +42,18 @@ const EventsMenu: React.FC<Props> = ({
   }
 
   return (
-    <Menu as="div" className="relative ml-auto">
-      <Menu.Button className="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
-        <span className="sr-only">Open options</span>
-        <EllipsisHorizontalIcon
-          className="h-10 w-10 md:h-6 md:w-6"
-          aria-hidden="true"
-        />
-      </Menu.Button>
-      <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"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-0.5 w-40 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-          <Menu.Item>
-            {({ active }) => (
-              <button
-                onClick={clearHistory}
-                className={cn(
-                  active ? 'bg-gray-50' : '',
-                  'flex w-full px-3 py-1 text-sm leading-6 text-gray-900',
-                )}
-              >
-                Clear History
-              </button>
-            )}
-          </Menu.Item>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <ResourceDropdownMenu>
+      <DropdownMenuLabel className="capitalize">
+        {workerType} Menu
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={clearHistory}>
+          <TrashIcon className="mr-2 h-4 w-4" />
+          <span>Clear History</span>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </ResourceDropdownMenu>
   )
 }
 
diff --git a/pkg/dashboard/frontend/src/components/layout/AppLayout.tsx b/pkg/dashboard/frontend/src/components/layout/AppLayout.tsx
index 0cc185fe9..5dfe26d61 100644
--- a/pkg/dashboard/frontend/src/components/layout/AppLayout.tsx
+++ b/pkg/dashboard/frontend/src/components/layout/AppLayout.tsx
@@ -1,10 +1,4 @@
-import {
-  Fragment,
-  type PropsWithChildren,
-  type ReactNode,
-  useState,
-} from 'react'
-import { Dialog, Popover, Transition } from '@headlessui/react'
+import type { PropsWithChildren, ReactNode } from 'react'
 import {
   DocumentDuplicateIcon,
   Bars3Icon,
@@ -12,7 +6,6 @@ import {
   XMarkIcon,
   ClockIcon,
   ArchiveBoxIcon,
-  CircleStackIcon,
   MegaphoneIcon,
   QuestionMarkCircleIcon,
   PaperAirplaneIcon,
@@ -33,6 +26,8 @@ import { Button } from '../ui/button'
 import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert'
 import { Spinner } from '../shared'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
 
 const DiscordLogo: React.FC<React.SVGProps<SVGSVGElement>> = ({
   className,
@@ -103,7 +98,6 @@ const AppLayout: React.FC<Props> = ({
   routePath = '/',
 }) => {
   const { data, state } = useWebSocket()
-  const [sidebarOpen, setSidebarOpen] = useState(false)
 
   // remove trailing slash
   routePath = routePath !== '/' ? routePath.replace(/\/$/, '') : routePath
@@ -149,140 +143,6 @@ const AppLayout: React.FC<Props> = ({
     <>
       <TooltipProvider>
         <Toaster position="top-right" />
-        <Transition.Root show={sidebarOpen} as={Fragment}>
-          <Dialog
-            as="div"
-            className="relative z-50 lg:hidden"
-            onClose={setSidebarOpen}
-          >
-            <Transition.Child
-              as={Fragment}
-              enter="transition-opacity ease-linear duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="transition-opacity ease-linear duration-300"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-white/80" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 flex">
-              <Transition.Child
-                as={Fragment}
-                enter="transition ease-in-out duration-300 transform"
-                enterFrom="-translate-x-full"
-                enterTo="translate-x-0"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="translate-x-0"
-                leaveTo="-translate-x-full"
-              >
-                <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
-                  <Transition.Child
-                    as={Fragment}
-                    enter="ease-in-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in-out duration-300"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
-                      <button
-                        type="button"
-                        className="-m-2.5 p-2.5"
-                        onClick={() => setSidebarOpen(false)}
-                      >
-                        <span className="sr-only">Close sidebar</span>
-                        <XMarkIcon
-                          className="h-6 w-6 text-white"
-                          aria-hidden="true"
-                        />
-                      </button>
-                    </div>
-                  </Transition.Child>
-                  {/* Sidebar component, swap this element with another sidebar if you like */}
-                  <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2">
-                    <div className="flex h-16 shrink-0 items-center">
-                      <img
-                        className="h-8 w-auto"
-                        src="/nitric-no-text.svg"
-                        alt="Nitric Logo"
-                      />
-                    </div>
-                    <nav className="flex flex-1 flex-col">
-                      <ul className="flex flex-1 flex-col gap-y-7">
-                        <li>
-                          <ul className="-mx-2 space-y-1">
-                            {navigation.map((item) => (
-                              <li key={item.name}>
-                                <a
-                                  href={item.href}
-                                  className={cn(
-                                    item.href === routePath
-                                      ? 'bg-gray-50 text-primary'
-                                      : 'text-gray-700 hover:bg-gray-50 hover:text-primary',
-                                    'group flex items-center gap-x-3 rounded-md p-2 text-sm font-semibold leading-6',
-                                  )}
-                                >
-                                  <item.icon
-                                    className={cn(
-                                      item.href === routePath
-                                        ? 'text-primary'
-                                        : 'text-gray-400 group-hover:text-primary',
-                                      'h-6 w-6 shrink-0',
-                                    )}
-                                    aria-hidden="true"
-                                  />
-                                  <span>{item.name}</span>
-                                  {item.count ? (
-                                    <span
-                                      data-testid={`${item.name}-count`}
-                                      className="flex h-4 w-4 items-center justify-center rounded-full bg-white text-xs ring-2 ring-gray-100"
-                                    >
-                                      {item.count}
-                                    </span>
-                                  ) : null}
-                                </a>
-                              </li>
-                            ))}
-                          </ul>
-                        </li>
-                        <li>
-                          <div className="text-xs font-semibold leading-6 text-gray-400">
-                            Resources & Feedback
-                          </div>
-                          <ul className="-mx-2 mt-2 space-y-1">
-                            {[...resourceLinks, ...communityLinks].map(
-                              (link) => (
-                                <li key={link.name}>
-                                  <a
-                                    href={link.href}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    className={cn(
-                                      'items-center text-gray-700 hover:bg-gray-50 hover:text-primary',
-                                      'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6',
-                                    )}
-                                  >
-                                    <span className="truncate">
-                                      {link.name}
-                                    </span>
-                                    <link.icon className="h-4 w-4" />
-                                  </a>
-                                </li>
-                              ),
-                            )}
-                          </ul>
-                        </li>
-                      </ul>
-                    </nav>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
 
         <div className="hidden border-r lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-white lg:pb-4">
           <div className="flex h-16 shrink-0 items-center justify-center">
@@ -344,14 +204,91 @@ const AppLayout: React.FC<Props> = ({
 
         <main className="lg:pl-20">
           <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 sm:gap-x-6 sm:px-6 lg:px-8">
-            <button
-              type="button"
-              className="-m-2.5 p-2.5 text-gray-700 lg:hidden"
-              onClick={() => setSidebarOpen(true)}
-            >
-              <span className="sr-only">Open sidebar</span>
-              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-            </button>
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button size="icon" variant="ghost" className="lg:hidden">
+                  <span className="sr-only">Open sidebar</span>
+                  <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="sm:max-w-xs">
+                <div className="flex grow flex-col gap-y-5 bg-white">
+                  <div className="flex h-16 shrink-0 items-center gap-2">
+                    <img
+                      className="h-8 w-auto"
+                      src="/nitric-no-text.svg"
+                      alt="Nitric Logo"
+                    />
+                    <span className="max-w-96 truncate font-semibold">
+                      {data?.projectName}
+                    </span>
+                  </div>
+                  <nav className="flex flex-1 flex-col">
+                    <ul className="flex flex-1 flex-col gap-y-7">
+                      <li>
+                        <ul className="-mx-2 space-y-1">
+                          {navigation.map((item) => (
+                            <li key={item.name}>
+                              <a
+                                href={item.href}
+                                className={cn(
+                                  item.href === routePath
+                                    ? 'bg-gray-50 text-primary'
+                                    : 'text-gray-700 hover:bg-gray-50 hover:text-primary',
+                                  'group flex items-center gap-x-3 rounded-md p-2 text-sm font-semibold leading-6',
+                                )}
+                              >
+                                <item.icon
+                                  className={cn(
+                                    item.href === routePath
+                                      ? 'text-primary'
+                                      : 'text-gray-400 group-hover:text-primary',
+                                    'h-6 w-6 shrink-0',
+                                  )}
+                                  aria-hidden="true"
+                                />
+                                <span>{item.name}</span>
+                                {item.count ? (
+                                  <span
+                                    data-testid={`${item.name}-count`}
+                                    className="flex h-4 w-4 items-center justify-center rounded-full bg-white text-xs ring-2 ring-gray-100"
+                                  >
+                                    {item.count}
+                                  </span>
+                                ) : null}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                      <li>
+                        <div className="text-xs font-semibold leading-6 text-gray-400">
+                          Resources & Feedback
+                        </div>
+                        <ul className="-mx-2 mt-2 space-y-1">
+                          {[...resourceLinks, ...communityLinks].map((link) => (
+                            <li key={link.name}>
+                              <a
+                                href={link.href}
+                                target="_blank"
+                                rel="noreferrer"
+                                className={cn(
+                                  'items-center text-gray-700 hover:bg-gray-50 hover:text-primary',
+                                  'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6',
+                                )}
+                              >
+                                <span className="truncate">{link.name}</span>
+                                <link.icon className="h-4 w-4" />
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </SheetContent>
+            </Sheet>
             {/* Separator */}
             <div
               className="h-6 w-px bg-gray-900/10 lg:hidden"
@@ -359,7 +296,10 @@ const AppLayout: React.FC<Props> = ({
             />
             {data?.projectName && (
               <div className="flex items-center gap-6 font-semibold leading-6 text-gray-900 md:text-lg">
-                {data.projectName} <span className="text-gray-300">/</span>{' '}
+                <span className="hidden max-w-[300px] truncate lg:block">
+                  {data.projectName}
+                </span>{' '}
+                <span className="hidden text-gray-300 lg:block">/</span>{' '}
                 <Button
                   className={cn(
                     '/architecture' === routePath && 'bg-accent',
@@ -380,202 +320,166 @@ const AppLayout: React.FC<Props> = ({
               <div className="ml-auto flex items-center gap-x-4 lg:gap-x-6">
                 {data?.currentVersion &&
                 data?.latestVersion &&
-                data?.currentVersion < data?.latestVersion ? (
-                  <Popover className="relative">
-                    {({ open }) => (
-                      <>
-                        <Popover.Button
-                          as={Button}
-                          variant={'destructive'}
-                          className={cn(
-                            open && 'text-opacity-90',
-                            'bg-orange-500 font-semibold hover:bg-orange-600',
-                          )}
-                        >
-                          <span>Update Available</span>
-                          <ExclamationCircleIcon
-                            className={cn(
-                              'ml-2 h-5 w-5 transition duration-150 ease-in-out group-hover:text-opacity-80',
-                              open && 'text-opacity-70',
-                            )}
-                            aria-hidden="true"
-                          />
-                        </Popover.Button>
-                        <Transition
-                          as={Fragment}
-                          enter="transition ease-out duration-200"
-                          enterFrom="opacity-0 translate-y-1"
-                          enterTo="opacity-100 translate-y-0"
-                          leave="transition ease-in duration-150"
-                          leaveFrom="opacity-100 translate-y-0"
-                          leaveTo="opacity-0 translate-y-1"
-                        >
-                          <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
-                            <div className="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
-                              <div className="p-4">
-                                <h3 className="font mb-2 text-center text-sm font-semibold leading-6 text-gray-500">
-                                  A new version of Nitric is available
-                                </h3>
-                                <div className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
-                                  <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                                    <DocumentDuplicateIcon
-                                      className="h-6 w-6 text-gray-600 group-hover:text-primary"
-                                      aria-hidden="true"
-                                    />
-                                  </div>
-                                  <div>
-                                    <a
-                                      href={
-                                        'https://nitric.io/docs/installation'
-                                      }
-                                      target="_blank"
-                                      rel="noreferrer"
-                                      className="font-semibold text-gray-900"
-                                    >
-                                      Upgrade from version &apos;
-                                      {data.currentVersion}&apos; to &apos;
-                                      {data.latestVersion}&apos;
-                                      <span className="absolute inset-0" />
-                                    </a>
-                                    <p className="mt-1 text-gray-600">
-                                      To upgrade, visit the installation docs
-                                      for instructions and release notes
-                                    </p>
-                                  </div>
-                                </div>
-                              </div>
+                data.currentVersion < data.latestVersion ? (
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="destructive"
+                        className={
+                          'bg-orange-500 font-semibold transition-colors hover:bg-orange-600 data-[state="open"]:bg-orange-600'
+                        }
+                      >
+                        <span className="hidden lg:block">
+                          Update Available
+                        </span>
+                        <span className="lg:hidden">Update</span>
+                        <ExclamationCircleIcon
+                          className={
+                            'ml-2 h-5 w-5 transition duration-150 ease-in-out group-hover:text-opacity-80'
+                          }
+                          aria-hidden="true"
+                        />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white p-0 text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
+                      <div className="p-4">
+                        <h3 className="font mb-2 text-center text-sm font-semibold leading-6 text-gray-500">
+                          A new version of Nitric is available
+                        </h3>
+                        <div className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
+                          <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                            <DocumentDuplicateIcon
+                              className="h-6 w-6 text-gray-600 group-hover:text-primary"
+                              aria-hidden="true"
+                            />
+                          </div>
+                          <div>
+                            <a
+                              href={'https://nitric.io/docs/installation'}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="font-semibold text-gray-900"
+                            >
+                              Upgrade from version &apos;
+                              {data.currentVersion}&apos; to &apos;
+                              {data.latestVersion}&apos;
+                              <span className="absolute inset-0" />
+                            </a>
+                            <p className="mt-1 text-gray-600">
+                              To upgrade, visit the installation docs for
+                              instructions and release notes
+                            </p>
+                          </div>
+                        </div>
+                      </div>
 
-                              <div className="bg-gray-50">
-                                <div className="flex flex-col justify-between">
-                                  <h3 className="font p-4 text-center text-sm font-semibold leading-6 text-gray-500">
-                                    Reach out to the community
-                                  </h3>
-                                  <div className="grid grid-cols-2 divide-x divide-gray-900/5">
-                                    {communityLinks.map((item) => (
-                                      <a
-                                        key={item.name}
-                                        href={item.href}
-                                        target="_blank"
-                                        rel="noreferrer"
-                                        className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
-                                      >
-                                        <item.icon
-                                          className="h-5 w-5 flex-none text-gray-400"
-                                          aria-hidden="true"
-                                        />
-                                        {item.name}
-                                      </a>
-                                    ))}
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
+                      <div className="bg-gray-50">
+                        <div className="flex flex-col justify-between">
+                          <h3 className="font p-4 text-center text-sm font-semibold leading-6 text-gray-500">
+                            Reach out to the community
+                          </h3>
+                          <div className="grid grid-cols-2 divide-x divide-gray-900/5">
+                            {communityLinks.map((item) => (
+                              <a
+                                key={item.name}
+                                href={item.href}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
+                              >
+                                <item.icon
+                                  className="h-5 w-5 flex-none text-gray-400"
+                                  aria-hidden="true"
+                                />
+                                {item.name}
+                              </a>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </PopoverContent>
                   </Popover>
                 ) : null}
-                <span className="hidden font-semibold md:block">
+                <span className="hidden font-semibold lg:block">
                   Local Dashboard
                 </span>
-                <Popover className="relative">
-                  {({ open }) => (
-                    <>
-                      <Popover.Button
-                        as={Button}
-                        variant={'outline'}
-                        className={cn(
-                          open && 'text-opacity-90',
-                          'font-semibold',
-                        )}
-                      >
+                <div className="relative">
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button variant="outline" className="group font-semibold">
                         <QuestionMarkCircleIcon
-                          className={cn(
-                            'mr-2 h-5 w-5 text-gray-500 transition duration-150 ease-in-out group-hover:text-opacity-80',
-                            open && 'text-opacity-70',
-                          )}
+                          className={
+                            'mr-2 h-5 w-5 text-gray-500 transition duration-150 ease-in-out group-hover:text-opacity-80 group-data-[state="open"]:text-opacity-90'
+                          }
                           aria-hidden="true"
                         />
                         <span>Help</span>
-                      </Popover.Button>
-                      <Transition
-                        as={Fragment}
-                        enter="transition ease-out duration-200"
-                        enterFrom="opacity-0 translate-y-1"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-1"
-                      >
-                        <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
-                          <div className="w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
-                            <div className="p-4">
-                              <h3 className="font mb-2 text-center text-sm font-semibold leading-6 text-gray-500">
-                                Need help with your project?
-                              </h3>
-                              {resourceLinks.map((item) => (
-                                <div
-                                  key={item.name}
-                                  className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50"
-                                >
-                                  <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                                    <item.icon
-                                      className="h-6 w-6 text-gray-600 group-hover:text-primary"
-                                      aria-hidden="true"
-                                    />
-                                  </div>
-                                  <div>
-                                    <a
-                                      href={item.href}
-                                      target="_blank"
-                                      rel="noreferrer"
-                                      className="font-semibold text-gray-900"
-                                    >
-                                      {item.name}
-                                      <span className="absolute inset-0" />
-                                    </a>
-                                    <p className="mt-1 text-gray-600">
-                                      {item.description}
-                                    </p>
-                                  </div>
-                                </div>
-                              ))}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="mr-2 w-screen max-w-md flex-auto overflow-hidden rounded-3xl bg-white p-0 text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
+                      <div className="p-4">
+                        <h3 className="font mb-2 text-center text-sm font-semibold leading-6 text-gray-500">
+                          Need help with your project?
+                        </h3>
+                        {resourceLinks.map((item) => (
+                          <div
+                            key={item.name}
+                            className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50"
+                          >
+                            <div className="mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                              <item.icon
+                                className="h-6 w-6 text-gray-600 group-hover:text-primary"
+                                aria-hidden="true"
+                              />
                             </div>
-
-                            <div className="bg-gray-50">
-                              <div className="flex flex-col justify-between">
-                                <h3 className="font p-4 text-center text-sm font-semibold leading-6 text-gray-500">
-                                  Reach out to the community
-                                </h3>
-                                <div className="grid grid-cols-2 divide-x divide-gray-900/5">
-                                  {communityLinks.map((item) => (
-                                    <a
-                                      key={item.name}
-                                      href={item.href}
-                                      target="_blank"
-                                      rel="noreferrer"
-                                      className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
-                                    >
-                                      <item.icon
-                                        className="h-5 w-5 flex-none text-gray-400"
-                                        aria-hidden="true"
-                                      />
-                                      {item.name}
-                                    </a>
-                                  ))}
-                                </div>
-                                <p className="ml-auto w-full truncate border-t px-4 py-2 text-center text-gray-400">
-                                  CLI Version: v{data?.currentVersion}
-                                </p>
-                              </div>
+                            <div>
+                              <a
+                                href={item.href}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="font-semibold text-gray-900"
+                              >
+                                {item.name}
+                                <span className="absolute inset-0" />
+                              </a>
+                              <p className="mt-1 text-gray-600">
+                                {item.description}
+                              </p>
                             </div>
                           </div>
-                        </Popover.Panel>
-                      </Transition>
-                    </>
-                  )}
-                </Popover>
+                        ))}
+                      </div>
+
+                      <div className="bg-gray-50">
+                        <div className="flex flex-col justify-between">
+                          <h3 className="font p-4 text-center text-sm font-semibold leading-6 text-gray-500">
+                            Reach out to the community
+                          </h3>
+                          <div className="grid grid-cols-2 divide-x divide-gray-900/5">
+                            {communityLinks.map((item) => (
+                              <a
+                                key={item.name}
+                                href={item.href}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
+                              >
+                                <item.icon
+                                  className="h-5 w-5 flex-none text-gray-400"
+                                  aria-hidden="true"
+                                />
+                                {item.name}
+                              </a>
+                            ))}
+                          </div>
+                          <p className="ml-auto w-full truncate border-t px-4 py-2 text-center text-gray-400">
+                            CLI Version: v{data?.currentVersion}
+                          </p>
+                        </div>
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </div>
               </div>
             </div>
           </div>
diff --git a/pkg/dashboard/frontend/src/components/shared/HistoryAccordion.tsx b/pkg/dashboard/frontend/src/components/shared/HistoryAccordion.tsx
new file mode 100644
index 000000000..131655724
--- /dev/null
+++ b/pkg/dashboard/frontend/src/components/shared/HistoryAccordion.tsx
@@ -0,0 +1,82 @@
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import Badge from './Badge'
+import { getDateString } from '@/lib/utils/get-date-string'
+import { createElement } from 'react'
+
+interface HistoryAccordionItem {
+  status?: number
+  success?: boolean
+  time: number
+  label: string
+  content?: React.ReactNode
+}
+
+interface Props {
+  items: HistoryAccordionItem[]
+}
+
+const DivElement = (props: React.HTMLProps<HTMLDivElement>) => (
+  <div {...props} />
+)
+
+const HistoryAccordion = ({ items }: Props) => {
+  return (
+    <ScrollArea className="h-[30rem]" type="always">
+      <Accordion type="multiple" className="mx-2 my-2 flex flex-col">
+        {items.map((item, idx) => {
+          const TriggerElement = item.content ? AccordionTrigger : DivElement
+
+          return (
+            <AccordionItem key={idx} value={idx.toString()}>
+              <TriggerElement className="p-2 !no-underline hover:bg-primary/5">
+                <div className="flex w-full flex-row items-center gap-4 font-body">
+                  {typeof item.success === 'boolean' ? (
+                    <Badge
+                      status={item.success ? 'green' : 'red'}
+                      className="!text-md h-6 w-12 sm:w-20"
+                    >
+                      {item.success ? 'success' : 'failure'}
+                    </Badge>
+                  ) : (
+                    item.status && (
+                      <Badge
+                        status={item.status < 400 ? 'green' : 'red'}
+                        className="!text-md h-6 w-12 sm:w-20"
+                      >
+                        <span className="mr-0.5 hidden md:inline">
+                          Status:{' '}
+                        </span>
+                        {item.status}
+                      </Badge>
+                    )
+                  )}
+                  <p className="max-w-[200px] truncate text-sm md:max-w-lg">
+                    {item.label}
+                  </p>
+                  <p className="ml-auto hidden pr-2 text-sm sm:inline">
+                    {getDateString(item.time)}
+                  </p>
+                </div>
+              </TriggerElement>
+              {item.content && (
+                <AccordionContent className="pb-2 text-sm text-gray-500">
+                  <div className="flex flex-col py-4">
+                    <div className="bg-white sm:rounded-lg">{item.content}</div>
+                  </div>
+                </AccordionContent>
+              )}
+            </AccordionItem>
+          )
+        })}
+      </Accordion>
+    </ScrollArea>
+  )
+}
+
+export default HistoryAccordion
diff --git a/pkg/dashboard/frontend/src/components/shared/ResourceDropdownMenu.tsx b/pkg/dashboard/frontend/src/components/shared/ResourceDropdownMenu.tsx
new file mode 100644
index 000000000..f7f092d0d
--- /dev/null
+++ b/pkg/dashboard/frontend/src/components/shared/ResourceDropdownMenu.tsx
@@ -0,0 +1,25 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid'
+
+import { Button } from '../ui/button'
+import type { PropsWithChildren } from 'react'
+
+const ResourceDropdownMenu = ({ children }: PropsWithChildren) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="ml-auto">
+          <span className="sr-only">Open options</span>
+          <EllipsisHorizontalIcon className="size-6" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">{children}</DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default ResourceDropdownMenu
diff --git a/pkg/dashboard/frontend/src/components/shared/Select.tsx b/pkg/dashboard/frontend/src/components/shared/Select.tsx
index a81e1575e..6503e0600 100644
--- a/pkg/dashboard/frontend/src/components/shared/Select.tsx
+++ b/pkg/dashboard/frontend/src/components/shared/Select.tsx
@@ -1,5 +1,4 @@
 import { Fragment } from 'react'
-import { Listbox, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
 import { cn } from '@/lib/utils'
 
@@ -23,76 +22,77 @@ const Select = <T extends Record<string, any> | string>({
   className,
 }: Props<T>) => {
   return (
-    <Listbox value={selected} onChange={setSelected}>
-      {({ open }) => (
-        <div data-testid={id} className={className}>
-          <Listbox.Label className="block text-lg font-medium leading-6 text-gray-900">
-            {label}
-          </Listbox.Label>
-          <div className="relative mt-2">
-            <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-2.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-lg sm:leading-6">
-              <span className="block truncate">{display(selected as T)}</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"
-                />
-              </span>
-            </Listbox.Button>
+    <div></div>
+    // <Listbox value={selected} onChange={setSelected}>
+    //   {({ open }) => (
+    //     <div data-testid={id} className={className}>
+    //       <Listbox.Label className="block text-lg font-medium leading-6 text-gray-900">
+    //         {label}
+    //       </Listbox.Label>
+    //       <div className="relative mt-2">
+    //         <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-2.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-lg sm:leading-6">
+    //           <span className="block truncate">{display(selected as T)}</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"
+    //             />
+    //           </span>
+    //         </Listbox.Button>
 
-            <Transition
-              show={open}
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options
-                data-testid={`${id}-options`}
-                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-lg"
-              >
-                {items.map((item, i) => (
-                  <Listbox.Option
-                    key={i}
-                    className={({ active }) =>
-                      cn(
-                        active ? 'bg-blue-600 text-white' : 'text-gray-900',
-                        'relative cursor-default select-none py-2 pl-3 pr-9',
-                      )
-                    }
-                    value={item}
-                  >
-                    {({ selected, active }) => (
-                      <>
-                        <span
-                          className={cn(
-                            selected ? 'font-semibold' : 'font-normal',
-                            'block truncate',
-                          )}
-                        >
-                          {display(item)}
-                        </span>
+    //         <Transition
+    //           show={open}
+    //           as={Fragment}
+    //           leave="transition ease-in duration-100"
+    //           leaveFrom="opacity-100"
+    //           leaveTo="opacity-0"
+    //         >
+    //           <Listbox.Options
+    //             data-testid={`${id}-options`}
+    //             className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-lg"
+    //           >
+    //             {items.map((item, i) => (
+    //               <Listbox.Option
+    //                 key={i}
+    //                 className={({ active }) =>
+    //                   cn(
+    //                     active ? 'bg-blue-600 text-white' : 'text-gray-900',
+    //                     'relative cursor-default select-none py-2 pl-3 pr-9',
+    //                   )
+    //                 }
+    //                 value={item}
+    //               >
+    //                 {({ selected, active }) => (
+    //                   <>
+    //                     <span
+    //                       className={cn(
+    //                         selected ? 'font-semibold' : 'font-normal',
+    //                         'block truncate',
+    //                       )}
+    //                     >
+    //                       {display(item)}
+    //                     </span>
 
-                        {selected ? (
-                          <span
-                            className={cn(
-                              active ? 'text-white' : 'text-primary',
-                              'absolute inset-y-0 right-0 flex items-center pr-4',
-                            )}
-                          >
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                          </span>
-                        ) : null}
-                      </>
-                    )}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </div>
-        </div>
-      )}
-    </Listbox>
+    //                     {selected ? (
+    //                       <span
+    //                         className={cn(
+    //                           active ? 'text-white' : 'text-primary',
+    //                           'absolute inset-y-0 right-0 flex items-center pr-4',
+    //                         )}
+    //                       >
+    //                         <CheckIcon className="h-5 w-5" aria-hidden="true" />
+    //                       </span>
+    //                     ) : null}
+    //                   </>
+    //                 )}
+    //               </Listbox.Option>
+    //             ))}
+    //           </Listbox.Options>
+    //         </Transition>
+    //       </div>
+    //     </div>
+    //   )}
+    // </Listbox>
   )
 }
 
diff --git a/pkg/dashboard/frontend/src/components/shared/Tabs.tsx b/pkg/dashboard/frontend/src/components/shared/Tabs.tsx
index 86e786393..8874d692c 100644
--- a/pkg/dashboard/frontend/src/components/shared/Tabs.tsx
+++ b/pkg/dashboard/frontend/src/components/shared/Tabs.tsx
@@ -1,4 +1,11 @@
 import { cn } from '@/lib/utils'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
 
 interface Tab {
   name: string
@@ -17,23 +24,21 @@ const Tabs: React.FC<Props> = ({ tabs, index, setIndex, round, pill }) => {
   return (
     <div>
       <div className="sm:hidden">
-        <label htmlFor="tabs" className="sr-only">
-          Select a tab
-        </label>
-        {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-        <select
-          id="tabs"
-          name="tabs"
-          className="block w-full rounded-md border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-          defaultValue={tabs[index].name}
-          onChange={(e) => setIndex(parseInt(e.target.value))}
+        <Select
+          value={index.toString()}
+          onValueChange={(value) => setIndex(parseInt(value))}
         >
-          {tabs.map((tab, idx) => (
-            <option key={tab.name} value={idx}>
-              {tab.name}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder="Select a tab" />
+          </SelectTrigger>
+          <SelectContent>
+            {tabs.map((tab, idx) => (
+              <SelectItem key={tab.name} value={idx.toString()}>
+                {tab.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
       <div className="hidden sm:block">
         <nav
diff --git a/pkg/dashboard/frontend/src/components/shared/index.ts b/pkg/dashboard/frontend/src/components/shared/index.ts
index cb8afacc6..b23f4976a 100644
--- a/pkg/dashboard/frontend/src/components/shared/index.ts
+++ b/pkg/dashboard/frontend/src/components/shared/index.ts
@@ -1,9 +1,8 @@
 import Loading from './Loading'
 import Badge from './Badge'
 import FieldRows, { type FieldRow } from './FieldRows'
-import Select from './Select'
 import Spinner from './Spinner'
 import Tabs from './Tabs'
 
-export { Loading, Badge, FieldRows, Select, Spinner, Tabs }
+export { Loading, Badge, FieldRows, Spinner, Tabs }
 export type { FieldRow }
diff --git a/pkg/dashboard/frontend/src/components/storage/StorageExplorer.tsx b/pkg/dashboard/frontend/src/components/storage/StorageExplorer.tsx
index 00aa1a81e..c2bdc5792 100644
--- a/pkg/dashboard/frontend/src/components/storage/StorageExplorer.tsx
+++ b/pkg/dashboard/frontend/src/components/storage/StorageExplorer.tsx
@@ -1,12 +1,20 @@
 import { useEffect, useState } from 'react'
 
-import { Loading, Select } from '../shared'
+import { Loading } from '../shared'
 import { useWebSocket } from '../../lib/hooks/use-web-socket'
 import AppLayout from '../layout/AppLayout'
 import StorageTreeView from './StorageTreeView'
 import FileBrowser from './FileBrowser'
 import type { Bucket } from '@/types'
 import BreadCrumbs from '../layout/BreadCrumbs'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
 
 const LOCAL_STORAGE_KEY = 'nitric-local-dash-storage-history'
 
@@ -75,18 +83,24 @@ const StorageExplorer = () => {
 
               <div className="lg:hidden">
                 <Select
-                  className="w-full"
-                  id="bucket-select"
-                  items={buckets || []}
-                  label="Select Bucket"
-                  selected={selectedBucket}
-                  setSelected={setSelectedBucket}
-                  display={(v) => (
-                    <div className="flex items-center gap-4 p-0.5 text-lg">
-                      {v.name}
-                    </div>
-                  )}
-                />
+                  value={selectedBucket.name}
+                  onValueChange={(name) => {
+                    setSelectedBucket(buckets.find((b) => b.name === name))
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select Bucket" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {buckets.map((bucket) => (
+                        <SelectItem key={bucket.name} value={bucket.name}>
+                          {bucket.name}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
               </div>
               <div className="bg-white shadow sm:rounded-lg">
                 <div className="flex flex-col gap-4 px-4 py-5 sm:p-6">