diff --git a/.cspell/project_words.txt b/.cspell/project_words.txt
index 924a3634c..e19636e4f 100644
--- a/.cspell/project_words.txt
+++ b/.cspell/project_words.txt
@@ -14,6 +14,7 @@ Flac
 haden
 haoyuan
 haris
+Iconoir
 josephjacks
 justinhoffman
 Keychain
diff --git a/packages/interface/src/AppLayout.tsx b/packages/interface/src/AppLayout.tsx
index 863051e18..4e9a9a383 100644
--- a/packages/interface/src/AppLayout.tsx
+++ b/packages/interface/src/AppLayout.tsx
@@ -1,5 +1,6 @@
 import { useCurrentLibrary } from '@sd/client';
 import clsx from 'clsx';
+import { IconoirProvider } from 'iconoir-react';
 import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 
@@ -32,9 +33,17 @@ export function AppLayout() {
 		>
 			<Sidebar />
 			<div className="relative flex w-full">
-				<Suspense fallback={<div className="w-screen h-screen bg-app" />}>
-					<Outlet />
-				</Suspense>
+				<IconoirProvider
+					iconProps={{
+						strokeWidth: 1.8,
+						width: '1em',
+						height: '1em'
+					}}
+				>
+					<Suspense fallback={<div className="w-screen h-screen bg-app" />}>
+						<Outlet />
+					</Suspense>
+				</IconoirProvider>
 			</div>
 			<Toasts />
 		</div>
diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx
index af8bec52f..b5b953315 100644
--- a/packages/interface/src/components/jobs/JobManager.tsx
+++ b/packages/interface/src/components/jobs/JobManager.tsx
@@ -68,9 +68,7 @@ export function JobsManager() {
 			<HeaderContainer>
 				<CategoryHeading className="ml-2">Recent Jobs</CategoryHeading>
 				<div className="flex-grow" />
-				<Button size="icon">
-					<EllipsisHorizontalIcon className="w-5" />
-				</Button>
+
 				<Button size="icon">
 					<EllipsisHorizontalIcon className="w-5" />
 				</Button>
diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx
index 1f91479e7..38217c715 100644
--- a/packages/interface/src/components/layout/Sidebar.tsx
+++ b/packages/interface/src/components/layout/Sidebar.tsx
@@ -16,6 +16,7 @@ import {
 	ButtonLink,
 	CategoryHeading,
 	Dropdown,
+	Loader,
 	OverlayPanel,
 	Switch,
 	cva,
@@ -44,58 +45,54 @@ export function Sidebar() {
 	return (
 		<div
 			className={clsx(
-				'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full   border-r border-sidebar-divider  bg-sidebar',
+				'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider  bg-sidebar',
 				macOnly(os, 'bg-opacity-[0.80]')
 			)}
 		>
 			<WindowControls />
 
-			<div className="flex flex-col px-2.5 flex-grow pt-1 pb-10 overflow-x-hidden overflow-y-scroll no-scrollbar mask-fade-out">
-				<Dropdown.Root
-					// usually this panel is styled with bg-menu, but as the dark theme sidebar is dark, we need to override it for dark:
-					// itemsClassName="dark:bg-sidebar-box"
-					button={
-						<Dropdown.Button
-							variant="gray"
-							className={clsx(
-								`w-full mb-1 mt-1 -mr-0.5`,
-								` !bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line text-ink`,
-								(library === null || isLoadingLibraries) && '!text-ink-faint'
-								// macOnly(os, '!bg-opacity-80 !border-opacity-40')
-							)}
-						>
-							<span className="truncate">
-								{isLoadingLibraries ? 'Loading...' : library ? library.config.name : ' '}
-							</span>
-						</Dropdown.Button>
-					}
-				>
-					<Dropdown.Section>
-						{libraries?.map((lib) => (
-							<Dropdown.Item
-								selected={lib.uuid === library?.uuid}
-								key={lib.uuid}
-								onClick={() => switchLibrary(lib.uuid)}
-							>
-								{lib.config.name}
-							</Dropdown.Item>
-						))}
-					</Dropdown.Section>
-					<Dropdown.Section>
-						<Dropdown.Item icon={CogIcon} to="settings/library">
-							Library Settings
-						</Dropdown.Item>
-						<CreateLibraryDialog>
-							<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
-						</CreateLibraryDialog>
+			<Dropdown.Root
+				className="mt-1 mx-2.5"
+				button={
+					<Dropdown.Button
+						variant="gray"
+						className={clsx(
+							`w-full text-ink !bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line`,
+							`active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line `,
+							(library === null || isLoadingLibraries) && '!text-ink-faint'
+							// macOnly(os, '!bg-opacity-80 !border-opacity-40')
+						)}
+					>
+						<span className="truncate">
+							{isLoadingLibraries ? 'Loading...' : library ? library.config.name : ' '}
+						</span>
+					</Dropdown.Button>
+				}
+			>
+				<Dropdown.Section>
+					{libraries?.map((lib) => (
 						<Dropdown.Item
-							icon={LockClosedIcon}
-							onClick={() => alert('TODO: Not implemented yet!')}
+							selected={lib.uuid === library?.uuid}
+							key={lib.uuid}
+							onClick={() => switchLibrary(lib.uuid)}
 						>
-							Lock
+							{lib.config.name}
 						</Dropdown.Item>
-					</Dropdown.Section>
-				</Dropdown.Root>
+					))}
+				</Dropdown.Section>
+				<Dropdown.Section>
+					<Dropdown.Item icon={CogIcon} to="settings/library">
+						Library Settings
+					</Dropdown.Item>
+					<CreateLibraryDialog>
+						<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
+					</CreateLibraryDialog>
+					<Dropdown.Item icon={LockClosedIcon} onClick={() => alert('TODO: Not implemented yet!')}>
+						Lock
+					</Dropdown.Item>
+				</Dropdown.Section>
+			</Dropdown.Root>
+			<div className="flex flex-col px-2.5 flex-grow pt-1 pb-10 overflow-x-hidden overflow-y-scroll no-scrollbar mask-fade-out">
 				<div className="pt-1">
 					<SidebarLink to="/overview">
 						<Icon component={Planet} />
diff --git a/packages/interface/src/components/location/LocationListItem.tsx b/packages/interface/src/components/location/LocationListItem.tsx
index 53c77d9f5..4b1735f94 100644
--- a/packages/interface/src/components/location/LocationListItem.tsx
+++ b/packages/interface/src/components/location/LocationListItem.tsx
@@ -33,25 +33,24 @@ export default function LocationListItem({ location }: LocationListItemProps) {
 			<Folder size={30} className="mr-3" />
 			<div className="grid grid-cols-1 min-w-[110px]">
 				<h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1>
-				<p className="mt-0.5 text-sm truncate  select-text text-gray-250">
-					<span className="py-[1px] px-1 bg-app-button rounded mr-1">{location.node.name}</span>
+				<p className="mt-0.5 text-sm truncate  select-text text-ink-dull">
+					<span className="py-[1px] px-1 bg-app-selected rounded mr-1">{location.node.name}</span>
 					{location.local_path}
 				</p>
 			</div>
 			<div className="flex flex-grow" />
 			<div className="flex h-[45px] p-2 space-x-2">
-				<Button disabled variant="gray" className="!py-1.5 !px-2 pointer-events-none flex">
-					<>
-						<div
-							className={clsx(
-								'w-2 h-2  rounded-full',
-								location.is_online ? 'bg-green-500' : 'bg-red-500'
-							)}
-						/>
-						<span className="ml-1.5 text-xs text-ink-dull">
-							{location.is_online ? 'Online' : 'Offline'}
-						</span>
-					</>
+				{/* This is a fake button, do not add disabled prop pls */}
+				<Button variant="gray" className="!py-1.5 !px-2 pointer-events-none flex">
+					<div
+						className={clsx(
+							'w-2 h-2  rounded-full',
+							location.is_online ? 'bg-green-500' : 'bg-red-500'
+						)}
+					/>
+					<span className="ml-1.5 text-xs text-ink-dull">
+						{location.is_online ? 'Online' : 'Offline'}
+					</span>
 				</Button>
 				<Dialog
 					title="Delete Location"
diff --git a/packages/interface/src/screens/settings/library/LocationSettings.tsx b/packages/interface/src/screens/settings/library/LocationSettings.tsx
index 0560e4216..53b2f42c1 100644
--- a/packages/interface/src/screens/settings/library/LocationSettings.tsx
+++ b/packages/interface/src/screens/settings/library/LocationSettings.tsx
@@ -1,6 +1,7 @@
 import { useLibraryMutation, useLibraryQuery, usePlatform } from '@sd/client';
 import { LocationCreateArgs } from '@sd/client';
-import { Button } from '@sd/ui';
+import { Button, Input } from '@sd/ui';
+import { MagnifyingGlass } from 'phosphor-react';
 
 import LocationListItem from '../../../components/location/LocationListItem';
 import { SettingsContainer } from '../../../components/settings/SettingsContainer';
@@ -18,7 +19,11 @@ export default function LocationSettings() {
 				title="Locations"
 				description="Manage your storage locations."
 				rightArea={
-					<div className="flex-row space-x-2">
+					<div className="flex flex-row items-center space-x-5">
+						<div className="relative hidden lg:block">
+							<MagnifyingGlass className="absolute w-[18px] h-auto top-[8px] left-[11px] text-gray-350" />
+							<Input className="!p-0.5 !pl-9" placeholder="Search locations" />
+						</div>
 						<Button
 							variant="accent"
 							size="sm"
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 701be2199..dce9a1600 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -42,11 +42,14 @@ const styles = cva(
 					'border-transparent hover:border-app-line active:border-app-line'
 				],
 				outline: [
-					'border-transparent hover:border-app-line/50 active:border-app-box active:bg-app-box/30'
+					'border-transparent hover:border-app-line/50 active:border-app-line active:bg-app-box/30'
+				],
+				gray: [
+					'bg-app-button active:bg-app-selected hover:bg-app-hover',
+					'border-app-line hover:border-app-line active:border-app-active'
 				],
-				gray: ['bg-app-button active:bg-app-hover', 'border-app-line hover:border-app-line'],
 				accent: [
-					'bg-accent text-white active:bg-accent hover:bg-accent-faint border-accent-faint hover:border-accent active:border-accent-deep shadow-md shadow-app-shade/10'
+					'bg-accent text-white active:bg-accent hover:bg-accent-faint border-accent-deep hover:border-accent active:border-accent-deep shadow-md shadow-app-shade/10'
 				],
 				colored: ['text-white shadow-sm hover:bg-opacity-90 active:bg-opacity-100'],
 				bare: ''
diff --git a/packages/ui/src/OverlayPanel.tsx b/packages/ui/src/OverlayPanel.tsx
index a7a4a4c89..af9884d27 100644
--- a/packages/ui/src/OverlayPanel.tsx
+++ b/packages/ui/src/OverlayPanel.tsx
@@ -46,7 +46,7 @@ export const OverlayPanel = ({
 										'min-w-[11rem] z-50 m-2 space-y-1',
 										'select-none cursor-default rounded-lg',
 										'text-left text-sm text-ink',
-										'bg-app-overlay/90 backdrop-blur',
+										'bg-app-overlay/80 backdrop-blur',
 										// 'border border-app-overlay',
 										'shadow-2xl shadow-black/60 ',
 										className
diff --git a/packages/ui/style/colors.scss b/packages/ui/style/colors.scss
index 1b328d9fe..d27232bc9 100644
--- a/packages/ui/style/colors.scss
+++ b/packages/ui/style/colors.scss
@@ -22,20 +22,21 @@
     --color-sidebar-selected: var(--dark-hue), 15%, 24%;
     --color-sidebar-shade: var(--dark-hue), 15%, 23%;
     // main
-    --color-app: var(--dark-hue), 16%, 13%;
-    --color-app-box: var(--dark-hue), 15%, 18%;
-    --color-app-overlay: var(--dark-hue), 15%, 14%;
+    --color-app: var(--dark-hue), 19%, 14%;
+    --color-app-box: var(--dark-hue), 15%, 19%;
+    --color-app-overlay: var(--dark-hue), 17%, 18%;
     --color-app-input: var(--dark-hue), 15%, 20%;
     --color-app-focus: var(--dark-hue), 15%, 10%;
     --color-app-line: var(--dark-hue), 15%, 26%;
-    --color-app-button: var(--dark-hue), 15%, 23%;
     --color-app-divider: var(--dark-hue), 15%, 5%;
-    --color-app-selected: var(--dark-hue), 15%, 23%;
-    --color-app-hover: var(--dark-hue), 15%, 20%;
+    --color-app-button: var(--dark-hue), 15%, 23%;
+    --color-app-hover: var(--dark-hue), 15%, 25%;
+    --color-app-selected: var(--dark-hue), 15%, 27%;
+    --color-app-active: var(--dark-hue), 15%, 30%;
     --color-app-shade: var(--dark-hue), 15%, 0%;
     --color-app-frame: var(--dark-hue), 15%, 25%;
     // menu
-    --color-menu: var(--dark-hue), 15%, 7%;
+    --color-menu: var(--dark-hue), 25%, 5%;
     --color-menu-line: var(--dark-hue), 15%, 7%;
     --color-menu-ink: var(--dark-hue), 5%, 100%;
     --color-menu-faint: var(--dark-hue), 5%, 80%;
@@ -75,7 +76,8 @@
   --color-app-button: var(--light-hue), 5%, 100%;
   --color-app-divider: var(--light-hue), 5%, 80%;
   --color-app-selected: var(--light-hue), 5%, 93%;
-  --color-app-hover: var(--light-hue), 5%, 100%;
+  --color-app-hover: var(--light-hue), 5%, 97%;
+  --color-app-active: var(--light-hue), 5%, 87%;
   --color-app-shade: var(--light-hue), 15%, 50%;
   --color-app-frame: 0, 0%, 100%;
   // menu
@@ -87,12 +89,12 @@
   --color-menu-selected: var(--light-hue), 5%, 30%;
   --color-menu-shade: var(--light-hue), 5%, 0%;
 
-  --color-menu: var(--light-hue), 16%, 99%;
-  --color-menu-line: var(--light-hue), 5%, 90%;
-  --color-menu-ink: var(--light-hue), 5%, 30%;
-  --color-menu-faint: var(--light-hue), 5%, 80%;
-  --color-menu-hover: var(--light-hue), 15%, 20%;
-  --color-menu-selected: var(--light-hue), 5%, 30%;
-  --color-menu-shade: var(--light-hue), 5%, 0%;
+  // --color-menu: var(--light-hue), 16%, 99%;
+  // --color-menu-line: var(--light-hue), 5%, 90%;
+  // --color-menu-ink: var(--light-hue), 5%, 30%;
+  // --color-menu-faint: var(--light-hue), 5%, 80%;
+  // --color-menu-hover: var(--light-hue), 15%, 20%;
+  // --color-menu-selected: var(--light-hue), 5%, 30%;
+  // --color-menu-shade: var(--light-hue), 5%, 0%;
 }
 }
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index 451047799..54e77b410 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.js
@@ -67,6 +67,7 @@ module.exports = function (app, options) {
 						button: alpha('--color-app-button'),
 						selected: alpha('--color-app-selected'),
 						hover: alpha('--color-app-hover'),
+						active: alpha('--color-app-active'),
 						shade: alpha('--color-app-shade'),
 						frame: alpha('--color-app-frame')
 					},