diff --git a/apps/landing/src/components/NavBar.tsx b/apps/landing/src/components/NavBar.tsx
index 1160224ec..fa58c4169 100644
--- a/apps/landing/src/components/NavBar.tsx
+++ b/apps/landing/src/components/NavBar.tsx
@@ -89,7 +89,7 @@ export default function NavBar() {
 				<div className="flex-1 lg:hidden" />
 				<Dropdown.Root
 					button={
-						<Button className="ml-[140px] hover:!bg-transparent" forIcon>
+						<Button className="ml-[140px] hover:!bg-transparent" size="icon">
 							<DotsThreeVertical weight="bold" className="w-6 h-6 " />
 						</Button>
 					}
diff --git a/packages/interface/src/components/explorer/Inspector.tsx b/packages/interface/src/components/explorer/Inspector.tsx
index a5876f313..fdc286b5d 100644
--- a/packages/interface/src/components/explorer/Inspector.tsx
+++ b/packages/interface/src/components/explorer/Inspector.tsx
@@ -58,7 +58,7 @@ export const Inspector = (props: Props) => {
 		>
 			{!!props.data && (
 				<>
-					<div className="flex bg-black items-center justify-center w-full h-64 mb-[10px] overflow-hidden rounded-lg ">
+					<div className="flex bg-sidebar items-center justify-center w-full h-64 mb-[10px] overflow-hidden rounded-lg ">
 						<FileThumb
 							iconClassNames="mx-10"
 							size={230}
@@ -67,7 +67,7 @@ export const Inspector = (props: Props) => {
 							data={props.data}
 						/>
 					</div>
-					<div className="flex flex-col w-full pt-0.5 pb-1 overflow-hidden bg-app-box rounded-lg shadow select-text shadow-app-shade/10 border border-app-line">
+					<div className="flex flex-col w-full pt-0.5 pb-1 overflow-hidden bg-app-box rounded-lg select-text shadow-app-shade/10 border border-app-line">
 						<h3 className="pt-2 pb-1 pl-3 text-base font-bold">
 							{props.data?.name}
 							{props.data?.extension && `.${props.data.extension}`}
@@ -78,12 +78,12 @@ export const Inspector = (props: Props) => {
 									<FavoriteButton data={objectData} />
 								</Tooltip>
 								<Tooltip label="Share">
-									<Button size="sm" forIcon>
+									<Button size="icon">
 										<ShareIcon className="w-[18px] h-[18px]" />
 									</Button>
 								</Tooltip>
 								<Tooltip label="Link">
-									<Button size="sm" forIcon>
+									<Button size="icon">
 										<Link className="w-[18px] h-[18px]" />
 									</Button>
 								</Tooltip>
diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx
index dd271ad74..0a2bd42df 100644
--- a/packages/interface/src/components/jobs/JobManager.tsx
+++ b/packages/interface/src/components/jobs/JobManager.tsx
@@ -68,7 +68,7 @@ export function JobsManager() {
 			<HeaderContainer>
 				<CategoryHeading className="ml-2">Recent Jobs</CategoryHeading>
 				<div className="flex-grow" />
-				<Button forIcon>
+				<Button size="icon">
 					<EllipsisHorizontalIcon className="w-5" />
 				</Button>
 			</HeaderContainer>
@@ -127,16 +127,16 @@ function Job({ job }: { job: JobReport }) {
 			<div className="flex-grow" />
 			<div className="flex flex-row space-x-2 ml-7">
 				{job.status === 'Running' && (
-					<Button forIcon>
+					<Button size="icon">
 						<Pause className="w-4" />
 					</Button>
 				)}
 				{job.status === 'Failed' && (
-					<Button forIcon>
+					<Button size="icon">
 						<ArrowsClockwise className="w-4" />
 					</Button>
 				)}
-				<Button forIcon>
+				<Button size="icon">
 					<XMarkIcon className="w-4" />
 				</Button>
 			</div>
diff --git a/packages/interface/src/components/key/Key.tsx b/packages/interface/src/components/key/Key.tsx
index 950d895aa..851d7ed15 100644
--- a/packages/interface/src/components/key/Key.tsx
+++ b/packages/interface/src/components/key/Key.tsx
@@ -68,12 +68,12 @@ export const Key: React.FC<{ data: Key; index: number }> = ({ data, index }) =>
 			<div className="space-x-1">
 				{data.mounted && (
 					<Tooltip label="Browse files">
-						<Button forIcon>
+						<Button size="icon">
 							<EyeIcon className="w-4 h-4 text-ink-faint" />
 						</Button>
 					</Tooltip>
 				)}
-				<Button forIcon>
+				<Button size="icon">
 					<EllipsisVerticalIcon className="w-4 h-4 text-ink-faint" />
 				</Button>
 			</div>
diff --git a/packages/interface/src/components/key/KeyMounter.tsx b/packages/interface/src/components/key/KeyMounter.tsx
index be48e6c01..dd73d0ddd 100644
--- a/packages/interface/src/components/key/KeyMounter.tsx
+++ b/packages/interface/src/components/key/KeyMounter.tsx
@@ -42,7 +42,7 @@ export function KeyMounter() {
 					/>
 					<Button
 						onClick={() => setShowKey(!showKey)}
-						forIcon
+						size="icon"
 						className="border-none absolute right-[5px] top-[5px]"
 					>
 						<CurrentEyeIcon className="w-4 h-4" />
diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx
index 897f86eff..67264beae 100644
--- a/packages/interface/src/components/layout/Sidebar.tsx
+++ b/packages/interface/src/components/layout/Sidebar.tsx
@@ -8,7 +8,7 @@ import {
 	useLibraryQuery,
 	usePlatform
 } from '@sd/client';
-import { Button, CategoryHeading, Dropdown, OverlayPanel, cva, tw } from '@sd/ui';
+import { Button, ButtonLink, CategoryHeading, Dropdown, OverlayPanel, cva, tw } from '@sd/ui';
 import clsx from 'clsx';
 import { CheckCircle, CirclesFour, Planet, ShareNetwork } from 'phosphor-react';
 import React, { PropsWithChildren } from 'react';
@@ -20,8 +20,6 @@ import { Folder } from '../icons/Folder';
 import { JobsManager } from '../jobs/JobManager';
 import { MacTrafficLights } from '../os/TrafficLights';
 
-const DropdownItem = tw(Dropdown.Item)`hover:bg-sidebar-selected`;
-
 export function Sidebar() {
 	const os = useOperatingSystem();
 	const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary();
@@ -58,25 +56,28 @@ export function Sidebar() {
 				>
 					<Dropdown.Section>
 						{libraries?.map((lib) => (
-							<DropdownItem
+							<Dropdown.Item
 								selected={lib.uuid === library?.uuid}
 								key={lib.uuid}
 								onClick={() => switchLibrary(lib.uuid)}
 							>
 								{lib.config.name}
-							</DropdownItem>
+							</Dropdown.Item>
 						))}
 					</Dropdown.Section>
 					<Dropdown.Section>
-						<DropdownItem icon={CogIcon} to="settings/library">
+						<Dropdown.Item icon={CogIcon} to="settings/library">
 							Library Settings
-						</DropdownItem>
+						</Dropdown.Item>
 						<CreateLibraryDialog>
-							<DropdownItem icon={PlusIcon}>Add Library</DropdownItem>
+							<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
 						</CreateLibraryDialog>
-						<DropdownItem icon={LockClosedIcon} onClick={() => alert('TODO: Not implemented yet!')}>
+						<Dropdown.Item
+							icon={LockClosedIcon}
+							onClick={() => alert('TODO: Not implemented yet!')}
+						>
 							Lock
-						</DropdownItem>
+						</Dropdown.Item>
 					</Dropdown.Section>
 				</Dropdown.Root>
 				<div className="pt-1">
@@ -100,27 +101,24 @@ export function Sidebar() {
 
 			<div className="flex flex-col mb-3 px-2.5">
 				<div className="flex flex-row">
-					<NavLink to="/settings/general">
-						<Button forIcon className={clsx('hover:!bg-opacity-20')}>
-							<CogIcon className="w-5 h-5 mt-[1px]" />
-						</Button>
-					</NavLink>
+					<ButtonLink to="/settings/general" size="icon" variant="outline">
+						<CogIcon className="w-5 h-5" />
+					</ButtonLink>
 					<OverlayPanel
 						className="focus:outline-none"
 						transformOrigin="bottom left"
 						disabled={!library}
 						trigger={
 							<Button
-								forIcon
-								className={clsx(
-									'!outline-none hover:!bg-opacity-20 disabled:opacity-50 disabled:cursor-not-allowed'
-								)}
+								size="icon"
+								variant="outline"
+								className="radix-state-open:bg-sidebar-selected/50"
 							>
 								<CheckCircle className="w-5 h-5" />
 							</Button>
 						}
 					>
-						<div className="block w-[500px] h-96">
+						<div className="block w-[430px] h-96">
 							<JobsManager />
 						</div>
 					</OverlayPanel>
diff --git a/packages/interface/src/components/primitive/InputContainer.tsx b/packages/interface/src/components/primitive/InputContainer.tsx
index d876e3258..0876ff562 100644
--- a/packages/interface/src/components/primitive/InputContainer.tsx
+++ b/packages/interface/src/components/primitive/InputContainer.tsx
@@ -12,7 +12,7 @@ interface InputContainerProps extends DefaultProps<HTMLDivElement> {
 export function InputContainer({ mini, ...props }: PropsWithChildren<InputContainerProps>) {
 	return (
 		<div className="flex flex-row">
-			<div className={clsx('flex flex-col w-full', !mini && 'pb-6', props.className)} {...props}>
+			<div {...props} className={clsx('flex flex-col w-full', !mini && 'pb-6', props.className)}>
 				<h3 className="mb-1 text-sm font-medium text-gray-700 dark:text-gray-100">{props.title}</h3>
 				{!!props.description && <p className="mb-2 text-sm text-gray-400 ">{props.description}</p>}
 				{!mini && props.children}
diff --git a/packages/interface/src/screens/settings/client/GeneralSettings.tsx b/packages/interface/src/screens/settings/client/GeneralSettings.tsx
index 36498d399..8a9e610d6 100644
--- a/packages/interface/src/screens/settings/client/GeneralSettings.tsx
+++ b/packages/interface/src/screens/settings/client/GeneralSettings.tsx
@@ -5,7 +5,7 @@ import { Database } from 'phosphor-react';
 import { SettingsContainer } from '../../../components/settings/SettingsContainer';
 import { SettingsHeader } from '../../../components/settings/SettingsHeader';
 
-const NodePill = tw.div`px-1.5 py-[2px] rounded text-xs font-medium bg-app-button`;
+const NodePill = tw.div`px-1.5 py-[2px] rounded text-xs font-medium bg-app-selected`;
 const NodeSettingLabel = tw.div`mb-1 text-xs font-medium`;
 
 export default function GeneralSettings() {
@@ -23,9 +23,9 @@ export default function GeneralSettings() {
 				<div className="flex flex-col w-full my-2">
 					<div className="flex flex-row items-center justify-between">
 						<span className="font-semibold">Connected Node</span>
-						<div className="grid grid-cols-2 gap-1">
+						<div className="flex flex-row space-x-1">
 							<NodePill>0 Peers</NodePill>
-							<NodePill className="bg-accent">Running</NodePill>
+							<NodePill className="text-white !bg-accent">Running</NodePill>
 						</div>
 					</div>
 
diff --git a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
index 9c81d453e..bf56bb205 100644
--- a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
+++ b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
@@ -27,11 +27,11 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
 				<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
 			</div>
 			<div className="flex flex-row items-center space-x-2">
-				<ButtonLink forIcon to="/settings/library" variant="gray">
+				<ButtonLink size="icon" to="/settings/library" variant="gray">
 					<PencilIcon className="w-4 h-4" />
 				</ButtonLink>
 				<DeleteLibraryDialog libraryUuid={props.library.uuid}>
-					<Button forIcon variant="gray">
+					<Button size="icon" variant="gray">
 						<TrashIcon className="w-4 h-4" />
 					</Button>
 				</DeleteLibraryDialog>
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 004631671..701be2199 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -22,19 +22,17 @@ type Button = {
 const hasHref = (props: ButtonProps | LinkButtonProps): props is LinkButtonProps => 'href' in props;
 
 const styles = cva(
-	'border rounded-md items-center transition-colors duration-100 cursor-default disabled:opacity-50 disabled:cursor-not-allowed',
+	'border rounded-md items-center transition-colors duration-100 cursor-default disabled:opacity-50',
 	{
 		variants: {
 			pressEffect: {
 				true: 'active:translate-y-[1px]'
 			},
-			loading: {
-				true: 'opacity-70'
-			},
-			forIcon: {
-				true: '!px-1'
+			disabled: {
+				true: 'opacity-70 pointer-events-none cursor-not-allowed'
 			},
 			size: {
+				icon: '!p-1',
 				md: 'py-1 px-3 text-md font-medium',
 				sm: 'py-1 px-2 text-sm font-medium'
 			},
@@ -64,8 +62,8 @@ const styles = cva(
 export const Button = forwardRef<
 	HTMLButtonElement | HTMLAnchorElement,
 	ButtonProps | LinkButtonProps
->(({ className, ..._props }, ref) => {
-	className = cx(styles(_props), className);
+>(({ className, ...props }, ref) => {
+	className = cx(styles(props), className);
 	return hasHref(props) ? (
 		<a {...props} ref={ref as any} className={cx(className, 'no-underline inline-block')} />
 	) : (
diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx
index a57705826..aaaac61c1 100644
--- a/packages/ui/src/Dialog.tsx
+++ b/packages/ui/src/Dialog.tsx
@@ -65,12 +65,7 @@ export function Dialog(props: DialogProps) {
 													{props.loading && <Loader />}
 													<div className="flex-grow" />
 													<DialogPrimitive.Close asChild>
-														<Button
-															loading={props.loading}
-															disabled={props.loading}
-															size="sm"
-															variant="gray"
-														>
+														<Button disabled={props.loading} size="sm" variant="gray">
 															Close
 														</Button>
 													</DialogPrimitive.Close>
@@ -78,7 +73,6 @@ export function Dialog(props: DialogProps) {
 														onClick={props.ctaAction}
 														type="submit"
 														size="sm"
-														loading={props.loading}
 														disabled={props.loading || props.submitDisabled}
 														variant={props.ctaDanger ? 'colored' : 'accent'}
 														className={clsx(props.ctaDanger && 'bg-red-500 border-red-500')}
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index 8cb60e4e7..b60f983f0 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -16,8 +16,8 @@ const itemStyles = cva(
 		variants: {
 			selected: {
 				true: 'bg-accent hover:!bg-accent text-white',
-				undefined: 'hover:bg-menu-hover/50',
-				false: 'hover:bg-menu-hover/50'
+				undefined: 'hover:bg-menu-hover',
+				false: 'hover:bg-menu-hover'
 			},
 			active: {
 				true: ''
diff --git a/packages/ui/style/colors.scss b/packages/ui/style/colors.scss
index 5e6356c78..138fd2358 100644
--- a/packages/ui/style/colors.scss
+++ b/packages/ui/style/colors.scss
@@ -39,7 +39,7 @@
     --color-menu-line: var(--dark-hue), 5%, 18%;
     --color-menu-ink: var(--dark-hue), 5%, 100%;
     --color-menu-faint: var(--dark-hue), 5%, 80%;
-    --color-menu-hover: var(--dark-hue), 5%, 30%;
+    --color-menu-hover: var(--dark-hue), 15%, 30%;
     --color-menu-selected: var(--dark-hue), 5%, 30%;
     --color-menu-shade: var(--dark-hue), 5%, 0%;
 }
@@ -85,7 +85,7 @@
   --color-menu-line: var(--light-hue), 5%, 18%;
   --color-menu-ink: var(--light-hue), 5%, 100%;
   --color-menu-faint: var(--light-hue), 5%, 80%;
-  --color-menu-hover: var(--light-hue), 5%, 30%;
+  --color-menu-hover: var(--light-hue), 15%, 20%;
   --color-menu-selected: var(--light-hue), 5%, 30%;
   --color-menu-shade: var(--light-hue), 5%, 0%;
 }