diff --git a/frontend/components/core/command/vessel-finder.tsx b/frontend/components/core/command/vessel-finder.tsx
index 7232bf7a..9fa65b52 100644
--- a/frontend/components/core/command/vessel-finder.tsx
+++ b/frontend/components/core/command/vessel-finder.tsx
@@ -1,13 +1,16 @@
 "use client"
 
-import { useShallow } from "zustand/react/shallow"
-import { useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { getVesselFirstExcursionSegments } from "@/services/backend-rest-client"
 import { FlyToInterpolator } from "deck.gl"
+import { useShallow } from "zustand/react/shallow"
 
-import { Vessel, VesselPosition } from "@/types/vessel"
+import { VesselPosition } from "@/types/vessel"
+import { useMapStore } from "@/libs/stores/map-store"
+import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
+import { useVesselsStore } from "@/libs/stores/vessels-store"
 import {
-  CommandDialog,
+  Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
@@ -15,19 +18,18 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command"
-import { useMapStore } from "@/libs/stores/map-store"
-import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
-import { useVesselsStore } from "@/libs/stores/vessels-store"
 
 type Props = {
   wideMode: boolean
+  setWideMode: (wideMode: boolean) => void
 }
 
 const SEPARATOR = "___"
 
-export function VesselFinderDemo({ wideMode }: Props) {
+export function VesselFinderDemo({ wideMode, setWideMode }: Props) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState<string>("")
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const { addTrackedVessel, trackedVesselIDs } = useTrackModeOptionsStore(
     useShallow((state) => ({
@@ -36,19 +38,15 @@ export function VesselFinderDemo({ wideMode }: Props) {
     }))
   )
 
-  const {
-    setActivePosition,
-    viewState,
-    latestPositions,
-    setViewState,
-  } = useMapStore(
-    useShallow((state) => ({
-      viewState: state.viewState,
-      latestPositions: state.latestPositions,
-      setActivePosition: state.setActivePosition,
-      setViewState: state.setViewState,
-    }))
-  )
+  const { setActivePosition, viewState, latestPositions, setViewState } =
+    useMapStore(
+      useShallow((state) => ({
+        viewState: state.viewState,
+        latestPositions: state.latestPositions,
+        setActivePosition: state.setActivePosition,
+        setViewState: state.setViewState,
+      }))
+    )
 
   const { vessels: allVessels } = useVesselsStore(
     useShallow((state) => ({
@@ -56,8 +54,37 @@ export function VesselFinderDemo({ wideMode }: Props) {
     }))
   )
 
+  const simpleVessels = useMemo(() => {
+    return allVessels.map((vessel) => ({
+      id: vessel.id,
+      title: vessel.ship_name,
+      subtitle: `MMSI ${vessel.mmsi} | IMO ${vessel.imo}`,
+      value: `${vessel.ship_name}${SEPARATOR}${vessel.mmsi}${SEPARATOR}${vessel.imo}${SEPARATOR}${vessel.id}`,
+    }))
+  }, [allVessels])
+
+  const filteredItems = useMemo(
+    () =>
+      simpleVessels.filter(
+        (vessel) =>
+          vessel.value.toLowerCase().includes(search.toLowerCase()) &&
+          !trackedVesselIDs.includes(vessel.id)
+      ),
+    [simpleVessels, search, trackedVesselIDs]
+  )
+
+  useEffect(() => {
+    if (!wideMode && open) {
+      setOpen(false)
+    }
+  }, [wideMode])
+
+  const displayedItems = filteredItems.slice(0, 50)
+
   const onSelectVessel = async (vesselIdentifier: string) => {
+    setOpen(false)
     const vesselId = parseInt(vesselIdentifier.split(SEPARATOR)[3])
+
     const response = await getVesselFirstExcursionSegments(vesselId)
     if (vesselId && !trackedVesselIDs.includes(vesselId)) {
       addTrackedVessel(vesselId)
@@ -83,67 +110,53 @@ export function VesselFinderDemo({ wideMode }: Props) {
   }
 
   return (
-    <>
-      <button
-        type="button"
-        className="dark:highlight-white/5 flex items-center rounded-md bg-color-3 py-1.5 pl-2 pr-3 text-sm leading-6 text-slate-400 shadow-sm ring-1 ring-color-2 hover:bg-slate-700 hover:ring-slate-300"
+    <Command
+      className={`border-[0.5px] border-solid ${!wideMode ? "cursor-pointer hover:border-primary hover:text-primary" : "cursor-default"}`}
+      onClick={() => {
+        if (!wideMode) {
+          setWideMode(true)
+          setOpen(true)
+          inputRef.current?.focus()
+        }
+      }}
+    >
+      <CommandInput
+        ref={inputRef}
+        onFocus={() => setOpen(true)}
+        onBlur={() => setOpen(false)}
         onClick={() => setOpen(true)}
+        onValueChange={(value) => setSearch(value)}
+        placeholder="Type MMSI, IMO or vessel name to search..."
+      />
+      <CommandList
+        hidden={!open}
+        onMouseDown={(e) => {
+          e.preventDefault()
+        }}
       >
-        <svg
-          width="24"
-          height="24"
-          fill="none"
-          aria-hidden="true"
-          className="mr-3 flex-none"
-        >
-          <path
-            d="m19 19-3.5-3.5"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></path>
-          <circle
-            cx="11"
-            cy="11"
-            r="6"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          ></circle>
-        </svg>
-        {wideMode && <>Find vessels...</>}
-      </button>
-
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput
-          placeholder="Type MMSI, IMO or vessel name to search..."
-          value={search}
-          onValueChange={setSearch}
-        />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Vessels">
-            {allVessels.map((vessel: Vessel) => {
-              return (
-                <CommandItem
-                  key={`${vessel.id}`}
-                  onSelect={(value) => onSelectVessel(value)}
-                  value={`${vessel.ship_name}${SEPARATOR}${vessel.mmsi}${SEPARATOR}${vessel.imo}${SEPARATOR}${vessel.id}`} // so we can search by name, mmsi, imo
-                >
-                  <span>{vessel.ship_name}</span>
-                  <span className="ml-2 text-xxxs">
-                    {" "}
-                    MMSI {vessel.mmsi} | IMO {vessel.imo}
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Vessels">
+          {displayedItems.map((vessel) => {
+            return (
+              <CommandItem
+                className="border-none"
+                key={`${vessel.id}`}
+                onSelect={(value) => onSelectVessel(value)}
+                value={vessel.value}
+              >
+                <div className="flex flex-wrap items-baseline gap-1">
+                  <span>{vessel.title}</span>
+                  <span>-</span>
+                  <span className="text-xxs text-neutral-300">
+                    {vessel.subtitle}
                   </span>
-                </CommandItem>
-              )
-            })}
-          </CommandGroup>
-          <CommandSeparator />
-        </CommandList>
-      </CommandDialog>
-    </>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+        <CommandSeparator />
+      </CommandList>
+    </Command>
   )
 }
diff --git a/frontend/components/core/left-panel.tsx b/frontend/components/core/left-panel.tsx
index a3dc0a5b..1b9b2cc3 100644
--- a/frontend/components/core/left-panel.tsx
+++ b/frontend/components/core/left-panel.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import Image from "next/image"
 import TrawlWatchLogo from "@/public/trawlwatch.svg"
 import { ChartBarIcon } from "@heroicons/react/24/outline"
@@ -114,7 +114,7 @@ export default function LeftPanel() {
                 name="Dashboard"
                 wide={leftPanelOpened}
               >
-                <ChartBarIcon className="w-8 min-w-8 stroke-neutral-200 stroke-1 hover:stroke-[1.25]" />
+                <ChartBarIcon className="size-8 stroke-[0.75] hover:text-primary" />
               </NavigationLink>
             </div>
             <div className="flex flex-col gap-3 bg-color-3 p-5">
@@ -123,7 +123,10 @@ export default function LeftPanel() {
                   <Spinner className="text-white" />
                 </div>
               ) : (
-                <VesselFinderDemo wideMode={leftPanelOpened} />
+                <VesselFinderDemo
+                  wideMode={leftPanelOpened}
+                  setWideMode={setLeftPanelOpened}
+                />
               )}
             </div>
           </>
diff --git a/frontend/components/core/map/filter-button.tsx b/frontend/components/core/map/filter-button.tsx
index 364db138..f12fe959 100644
--- a/frontend/components/core/map/filter-button.tsx
+++ b/frontend/components/core/map/filter-button.tsx
@@ -17,9 +17,9 @@ export function FilterButton({
     <Button
       variant="outline"
       size="sm"
-      className={`h-7 w-fit justify-start font-normal ${
+      className={`h-7 w-fit justify-start font-normal hover:text-primary-foreground/90 ${
         isActive
-          ? "bg-primary text-primary-foreground hover:bg-primary/90"
+          ? "bg-primary hover:bg-primary/90"
           : "bg-muted hover:bg-muted/50"
       }`}
       onClick={() => onToggle(value)}
diff --git a/frontend/components/core/map/zone-filter-modal.tsx b/frontend/components/core/map/zone-filter-modal.tsx
index 26c33a75..64085890 100644
--- a/frontend/components/core/map/zone-filter-modal.tsx
+++ b/frontend/components/core/map/zone-filter-modal.tsx
@@ -1,6 +1,8 @@
 import Image from "next/image"
+import { LayersIcon } from "lucide-react"
 
 import { ZoneCategory } from "@/types/zone"
+import { cn } from "@/libs/utils"
 import Spinner from "@/components/ui/custom/spinner"
 import {
   Dialog,
@@ -12,8 +14,6 @@ import {
 import IconButton from "@/components/ui/icon-button"
 
 import { FilterButton } from "./filter-button"
-import { cn } from "@/libs/utils"
-import { LayersIcon } from "lucide-react"
 
 interface ZoneFilterModalProps {
   activeZones: string[]
@@ -59,18 +59,22 @@ export default function ZoneFilterModal({
         <IconButton
           disabled={isLoading}
           description="Configure layers display settings"
-          className="dark:text-white"
         >
           {isLoading ? (
-            <Spinner />
+            <Spinner className="text-black dark:text-white" />
           ) : (
             <LayersIcon className="size-5 text-black dark:text-white" />
           )}
         </IconButton>
       </DialogTrigger>
-      <DialogContent className={cn("flex w-64 flex-col gap-6 bg-white", className)}>
+      <DialogContent
+        className={cn(
+          "flex w-64 flex-col gap-6 bg-white text-background",
+          className
+        )}
+      >
         <DialogHeader className="flex flex-row items-center justify-between space-y-0">
-          <DialogTitle className="flex items-center gap-2 text-xl text-black">
+          <DialogTitle className="flex items-center gap-2 text-xl text-primary-foreground">
             <LayersIcon className="size-5" />
             Zones
           </DialogTitle>
diff --git a/frontend/components/core/tracked-vessel/tracked-vessel-item.tsx b/frontend/components/core/tracked-vessel/tracked-vessel-item.tsx
index 123226dd..731ddfae 100644
--- a/frontend/components/core/tracked-vessel/tracked-vessel-item.tsx
+++ b/frontend/components/core/tracked-vessel/tracked-vessel-item.tsx
@@ -1,15 +1,15 @@
 import { useEffect, useMemo, useState } from "react"
 import { EyeIcon, Loader2Icon, LoaderIcon, XIcon } from "lucide-react"
+import { useShallow } from "zustand/react/shallow"
 
 import { Vessel } from "@/types/vessel"
-import SidebarExpander from "@/components/ui/custom/sidebar-expander"
+import { getVesselColorBg } from "@/libs/colors"
+import { useLoaderStore } from "@/libs/stores/loader-store"
 import { useMapStore } from "@/libs/stores/map-store"
+import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
+import SidebarExpander from "@/components/ui/custom/sidebar-expander"
 
 import TrackedVesselDetails from "./tracked-vessel-details"
-import { useShallow } from "zustand/react/shallow"
-import { useTrackModeOptionsStore } from "@/libs/stores/track-mode-options-store"
-import { useLoaderStore } from "@/libs/stores/loader-store"
-import { getVesselColorBg } from "@/libs/colors"
 
 export interface TrackedVesselItemProps {
   listIndex: number
@@ -22,26 +22,40 @@ export default function TrackedVesselItem({
   listIndex = 0,
   className,
 }: TrackedVesselItemProps) {
-  const { mode: mapMode } = useMapStore(useShallow((state) => ({
-    mode: state.mode,
-  })))
+  const { mode: mapMode } = useMapStore(
+    useShallow((state) => ({
+      mode: state.mode,
+    }))
+  )
 
-  const { removeTrackedVessel, vesselsIDsHidden, toggleVesselVisibility, focusedExcursionID, excursions } = useTrackModeOptionsStore(useShallow((state) => ({
-    excursions: state.excursions,
-    removeTrackedVessel: state.removeTrackedVessel,
-    vesselsIDsHidden: state.vesselsIDsHidden,
-    toggleVesselVisibility: state.toggleVesselVisibility,
-    focusedExcursionID: state.focusedExcursionID,
-  })))
+  const {
+    removeTrackedVessel,
+    vesselsIDsHidden,
+    toggleVesselVisibility,
+    focusedExcursionID,
+    excursions,
+  } = useTrackModeOptionsStore(
+    useShallow((state) => ({
+      excursions: state.excursions,
+      removeTrackedVessel: state.removeTrackedVessel,
+      vesselsIDsHidden: state.vesselsIDsHidden,
+      toggleVesselVisibility: state.toggleVesselVisibility,
+      focusedExcursionID: state.focusedExcursionID,
+    }))
+  )
 
-  const { excursionsLoading } = useLoaderStore(useShallow((state) => ({
-    excursionsLoading: state.excursionsLoading,
-  })))
+  const { excursionsLoading } = useLoaderStore(
+    useShallow((state) => ({
+      excursionsLoading: state.excursionsLoading,
+    }))
+  )
 
   const isVesselExcursionFocused = useMemo(() => {
     if (!excursions[vessel.id]) return false
 
-    return excursions[vessel.id].some(excursion => focusedExcursionID === excursion.id)
+    return excursions[vessel.id].some(
+      (excursion) => focusedExcursionID === excursion.id
+    )
   }, [focusedExcursionID, excursions])
 
   const [detailsOpened, setDetailsOpened] = useState(false)
@@ -52,9 +66,12 @@ export default function TrackedVesselItem({
     }
   }, [isVesselExcursionFocused])
 
-  const isHidden = useMemo(() => vesselsIDsHidden.includes(vessel.id), [vesselsIDsHidden, vessel.id])
+  const isHidden = useMemo(
+    () => vesselsIDsHidden.includes(vessel.id),
+    [vesselsIDsHidden, vessel.id]
+  )
 
-  const vesselBgColorClass = getVesselColorBg(listIndex);
+  const vesselBgColorClass = getVesselColorBg(listIndex)
   const isTrackMode = mapMode === "track"
 
   const onRemove = () => {
@@ -68,7 +85,11 @@ export default function TrackedVesselItem({
   return (
     <div className="flex gap-1">
       <div className={`flex w-full flex-col gap-2 py-2 ${className}`}>
-        <SidebarExpander.Root disabled={!isTrackMode || excursionsLoading} opened={isTrackMode && detailsOpened} onToggle={setDetailsOpened}>
+        <SidebarExpander.Root
+          disabled={!isTrackMode || excursionsLoading}
+          opened={isTrackMode && detailsOpened}
+          onToggle={setDetailsOpened}
+        >
           <SidebarExpander.Header className="flex items-center justify-between">
             <div className="flex w-full flex-col gap-1">
               <div className="flex items-center gap-2">
@@ -98,7 +119,7 @@ export default function TrackedVesselItem({
               {isTrackMode && (
                 <button
                   onClick={onToggleVisibility}
-                  className={`transition-colors hover:text-color-1/40 ${!isHidden ? 'text-color-1' : ''}`}
+                  className={`transition-colors hover:text-color-1/40 ${!isHidden ? "text-color-1" : ""}`}
                 >
                   <EyeIcon className="size-4" />
                 </button>
@@ -107,9 +128,7 @@ export default function TrackedVesselItem({
           </SidebarExpander.Header>
           <SidebarExpander.Content>
             <div className="flex w-full  flex-col">
-              <TrackedVesselDetails
-                vessel={vessel}
-              />
+              <TrackedVesselDetails vessel={vessel} />
             </div>
           </SidebarExpander.Content>
         </SidebarExpander.Root>
diff --git a/frontend/components/core/tracked-vessel/tracked-vessels-panel.tsx b/frontend/components/core/tracked-vessel/tracked-vessels-panel.tsx
index 35a8249d..27154f6a 100644
--- a/frontend/components/core/tracked-vessel/tracked-vessels-panel.tsx
+++ b/frontend/components/core/tracked-vessel/tracked-vessels-panel.tsx
@@ -309,28 +309,26 @@ export default function TrackedVesselsPanel({
 
   return (
     <>
-      <div>
-        <h5 className="flex gap-1 text-sm font-bold uppercase leading-6">
-          {!wideMode && (
-            <div className="relative">
-              <ShipIcon className="w-8 min-w-8 stroke-neutral-200 hover:stroke-neutral-100" />
-              {vesselsSelectedCount > 0 && (
-                <Badge
-                  variant="outline"
-                  className={cn(
-                    "absolute right-0 top-0 flex size-5 -translate-y-1/2 translate-x-1/2 items-center justify-center border-none bg-color-1 text-color-3",
-                    animateBadge && "animate-grow-shrink"
-                  )}
-                >
-                  {vesselsSelectedCount}
-                </Badge>
-              )}
-            </div>
-          )}
-          {mapMode === "position" && wideMode && (
-            <span className="text-card">{`Selected vessel (${trackedVesselIDs.length})`}</span>
-          )}
-        </h5>
+      <div className="flex items-center justify-center text-sm font-bold uppercase">
+        {!wideMode && (
+          <div className="relative flex size-8 items-center justify-center">
+            <ShipIcon className="size-7 text-neutral-200 hover:text-primary" />
+            {vesselsSelectedCount > 0 && (
+              <Badge
+                variant="outline"
+                className={cn(
+                  "absolute right-0 top-0 flex size-5 -translate-y-1/2 translate-x-1/2 items-center justify-center border-none bg-color-1 text-color-3",
+                  animateBadge && "animate-grow-shrink"
+                )}
+              >
+                {vesselsSelectedCount}
+              </Badge>
+            )}
+          </div>
+        )}
+        {mapMode === "position" && wideMode && (
+          <span className="w-full text-start text-card">{`Selected vessel (${trackedVesselIDs.length})`}</span>
+        )}
       </div>
 
       {wideMode && <WideModeTab />}
diff --git a/frontend/components/dashboard/kpi-card.tsx b/frontend/components/dashboard/kpi-card.tsx
index c565f31e..e8581360 100644
--- a/frontend/components/dashboard/kpi-card.tsx
+++ b/frontend/components/dashboard/kpi-card.tsx
@@ -21,7 +21,7 @@ export default function KPICard({
   loading,
 }: Props) {
   return (
-    <div className="flex w-full flex-col gap-y-2 rounded bg-primary p-4">
+    <div className="flex w-full flex-col gap-y-2 rounded bg-primary p-4 text-background">
       <div className="block text-lg font-bold uppercase">{title}</div>
       <div className="flex flex-row items-end justify-end">
         <div className="h-[40px] min-w-[50px] text-4xl font-bold uppercase">
diff --git a/frontend/components/ui/command.tsx b/frontend/components/ui/command.tsx
index 80567b4b..9e1aa58d 100644
--- a/frontend/components/ui/command.tsx
+++ b/frontend/components/ui/command.tsx
@@ -21,9 +21,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
@@ -115,7 +113,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
diff --git a/frontend/components/ui/dialog.tsx b/frontend/components/ui/dialog.tsx
index 83ca9149..1f6af76b 100644
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="size-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/frontend/components/ui/icon-button.tsx b/frontend/components/ui/icon-button.tsx
index 172490f7..b33989d0 100644
--- a/frontend/components/ui/icon-button.tsx
+++ b/frontend/components/ui/icon-button.tsx
@@ -1,6 +1,7 @@
-import { cn } from "@/libs/utils"
 import * as React from "react"
 
+import { cn } from "@/libs/utils"
+
 type Props = {
   description: string
   onClick?: () => void
@@ -9,25 +10,26 @@ type Props = {
   className?: string
 }
 
-export default function IconButton({
-  onClick,
-  children,
-  description,
-  disabled,
-  className,
-}: Props) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        "me-2 inline-flex size-10 items-center justify-center rounded-full bg-white text-center text-sm font-medium text-black shadow-md hover:bg-slate-200 focus:outline-none focus:ring-4 focus:ring-slate-300 dark:bg-slate-600 dark:hover:bg-slate-700 dark:focus:ring-slate-800",
-        className
-      )}
-    >
-      {children}
-      <span className="sr-only">{description}</span>
-    </button>
-  )
-}
+const IconButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ onClick, children, description, disabled, className }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={cn(
+          "me-2 inline-flex size-10 items-center justify-center rounded-full bg-white text-center text-sm font-medium text-black shadow-md hover:bg-slate-200 focus:outline-none focus:ring-4 focus:ring-slate-300 dark:bg-slate-600 dark:hover:bg-slate-700 dark:focus:ring-slate-800",
+          className
+        )}
+      >
+        {children}
+        <span className="sr-only">{description}</span>
+      </button>
+    )
+  }
+)
+
+IconButton.displayName = "IconButton"
+
+export default IconButton
diff --git a/frontend/components/ui/navigation-link.tsx b/frontend/components/ui/navigation-link.tsx
index 1bb5c44d..2fe25eb0 100644
--- a/frontend/components/ui/navigation-link.tsx
+++ b/frontend/components/ui/navigation-link.tsx
@@ -7,6 +7,7 @@ interface Props {
   name: string
   wide: boolean
   href: string
+  onClick?: () => void
 }
 
 const NavigationLink = ({
@@ -14,15 +15,17 @@ const NavigationLink = ({
   name,
   href = "#",
   wide = false,
+  onClick,
 }: Props) => {
   return (
     <Link
       href={href}
-      className="group flex cursor-pointer place-items-center gap-3 rounded stroke-neutral-200 p-1 text-neutral-200 transition-colors duration-100 hover:stroke-foreground hover:font-semibold hover:text-card"
+      className="flex cursor-pointer place-items-center gap-3 p-1 text-neutral-200 hover:text-primary"
+      onClick={onClick}
     >
       {children}
       {wide && (
-        <p className="text-clip whitespace-nowrap font-unito tracking-wide text-inherit">
+        <p className="text-clip whitespace-nowrap tracking-wide text-inherit">
           {name}
         </p>
       )}
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
index c94fa86d..5cc7cb3c 100644
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -116,7 +116,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}
diff --git a/frontend/package.json b/frontend/package.json
index 5bf8f101..2f023fb9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,7 @@
     "@js-temporal/polyfill": "^0.4.4",
     "@loaders.gl/core": "^4.2.0",
     "@loaders.gl/obj": "^4.2.0",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index bc66d871..1a5a9c0a 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -5,13 +5,13 @@
 @layer base {
   :root {
     --background: 223 33% 22%;
-    --foreground: 222.2 47.4% 11.2%;
+    --foreground: 0 0% 100%;
 
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --popover: 223 33% 22%;
+    --popover-foreground: 0 0% 100%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
@@ -26,7 +26,7 @@
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --accent: 223 33% 26%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: 0 0% 100%;
 
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;