diff --git a/app/components/Select.tsx b/app/components/Select.tsx
index 096edea..5df6e21 100644
--- a/app/components/Select.tsx
+++ b/app/components/Select.tsx
@@ -50,11 +50,11 @@ function Select(props: SelectProps) {
 		<div className={cn('flex flex-col', props.className)}>
 			<label
 				{...labelProps}
-				htmlFor={id}
 				className={cn(
 					'text-xs font-medium px-3 mb-0.5',
 					'text-headplane-700 dark:text-headplane-100',
 				)}
+				htmlFor={id}
 			>
 				{props.label}
 			</label>
@@ -63,18 +63,18 @@ function Select(props: SelectProps) {
 					'flex rounded-xl focus:outline-hidden focus-within:ring-3',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
+					props.isInvalid && 'ring-red-400',
 				)}
 			>
 				<input
 					{...inputProps}
-					ref={inputRef}
-					id={id}
 					className="outline-hidden px-3 py-2 rounded-l-xl w-full bg-transparent"
 					data-1p-ignore
+					id={id}
+					ref={inputRef}
 				/>
 				<button
 					{...buttonProps}
-					ref={buttonRef}
 					className={cn(
 						'flex items-center justify-center p-1 rounded-lg m-1',
 						'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
@@ -82,6 +82,7 @@ function Select(props: SelectProps) {
 							? 'opacity-50 cursor-not-allowed'
 							: 'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
 					)}
+					ref={buttonRef}
 				>
 					<ChevronDown className="p-0.5" />
 				</button>
@@ -99,12 +100,12 @@ function Select(props: SelectProps) {
 			)}
 			{state.isOpen && (
 				<Popover
-					popoverRef={popoverRef}
-					triggerRef={inputRef}
-					state={state}
+					className="w-full max-w-xs"
 					isNonModal
 					placement="bottom start"
-					className="w-full max-w-xs"
+					popoverRef={popoverRef}
+					state={state}
+					triggerRef={inputRef}
 				>
 					<ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
 				</Popover>
@@ -114,23 +115,22 @@ function Select(props: SelectProps) {
 }
 
 interface ListBoxProps extends AriaListBoxOptions<object> {
-	listBoxRef?: React.RefObject<HTMLUListElement | null>;
+	listBoxRef: React.RefObject<HTMLUListElement | null>;
 	state: ListState<object>;
 }
 
 function ListBox(props: ListBoxProps) {
 	const { listBoxRef, state } = props;
-	const ref = listBoxRef ?? useRef<HTMLUListElement | null>(null);
-	const { listBoxProps } = useListBox(props, state, ref);
+	const { listBoxProps } = useListBox(props, state, listBoxRef);
 
 	return (
 		<ul
 			{...listBoxProps}
-			ref={listBoxRef}
 			className="w-full max-h-72 overflow-auto outline-hidden pt-1"
+			ref={listBoxRef}
 		>
 			{[...state.collection].map((item) => (
-				<Option key={item.key} item={item} state={state} />
+				<Option item={item} key={item.key} state={state} />
 			))}
 		</ul>
 	);
@@ -154,7 +154,6 @@ function Option({ item, state }: OptionProps) {
 	return (
 		<li
 			{...optionProps}
-			ref={ref}
 			className={cn(
 				'flex items-center justify-between',
 				'py-2 px-3 mx-1 rounded-lg mb-1',
@@ -164,6 +163,7 @@ function Option({ item, state }: OptionProps) {
 					: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800',
 				isDisabled && 'text-headplane-300 dark:text-headplane-600',
 			)}
+			ref={ref}
 		>
 			{item.rendered}
 			{isSelected && <Check className="p-0.5" />}
diff --git a/app/routes/machines/components/machine-row.tsx b/app/routes/machines/components/machine-row.tsx
index cb44738..aa4dea9 100644
--- a/app/routes/machines/components/machine-row.tsx
+++ b/app/routes/machines/components/machine-row.tsx
@@ -22,6 +22,7 @@ interface Props {
 	isAgent?: boolean;
 	magic?: string;
 	isDisabled?: boolean;
+	existingTags?: string[];
 }
 
 export default function MachineRow({
@@ -30,6 +31,7 @@ export default function MachineRow({
 	isAgent,
 	magic,
 	isDisabled,
+	existingTags,
 }: Props) {
 	const uiTags = useMemo(() => {
 		const tags = uiTagsForNode(node, isAgent);
@@ -146,6 +148,7 @@ export default function MachineRow({
 			</td>
 			<td className="py-2 pr-0.5">
 				<MenuOptions
+					existingTags={existingTags}
 					isDisabled={isDisabled}
 					magic={magic}
 					node={node}
diff --git a/app/routes/machines/components/menu.tsx b/app/routes/machines/components/menu.tsx
index 26434fb..cb0d8d6 100644
--- a/app/routes/machines/components/menu.tsx
+++ b/app/routes/machines/components/menu.tsx
@@ -18,6 +18,7 @@ interface MenuProps {
 	magic?: string;
 	isFullButton?: boolean;
 	isDisabled?: boolean;
+	existingTags?: string[];
 }
 
 type Modal = 'rename' | 'expire' | 'remove' | 'routes' | 'move' | 'tags' | null;
@@ -28,6 +29,7 @@ export default function MachineMenu({
 	users,
 	isFullButton,
 	isDisabled,
+	existingTags,
 }: MenuProps) {
 	const [modal, setModal] = useState<Modal>(null);
 	const supportsTailscaleSSH =
@@ -75,6 +77,7 @@ export default function MachineMenu({
 			)}
 			{modal === 'tags' && (
 				<Tags
+					existingTags={existingTags}
 					isOpen={modal === 'tags'}
 					machine={node}
 					setIsOpen={(isOpen) => {
diff --git a/app/routes/machines/dialogs/tags.tsx b/app/routes/machines/dialogs/tags.tsx
index b00d081..bbc280f 100644
--- a/app/routes/machines/dialogs/tags.tsx
+++ b/app/routes/machines/dialogs/tags.tsx
@@ -1,9 +1,9 @@
 import { Plus, TagsIcon, X } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import Button from '~/components/Button';
 import Dialog from '~/components/Dialog';
-import Input from '~/components/Input';
 import Link from '~/components/Link';
+import Select from '~/components/Select';
 import TableList from '~/components/TableList';
 import type { Machine } from '~/types';
 import cn from '~/utils/cn';
@@ -12,11 +12,24 @@ interface TagsProps {
 	machine: Machine;
 	isOpen: boolean;
 	setIsOpen: (isOpen: boolean) => void;
+	existingTags?: string[];
 }
 
-export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
+export default function Tags({
+	machine,
+	isOpen,
+	setIsOpen,
+	existingTags,
+}: TagsProps) {
 	const [tags, setTags] = useState(machine.forcedTags);
-	const [tag, setTag] = useState('');
+	const [tag, setTag] = useState('tag:');
+	const tagIsInvalid = useMemo(() => {
+		return tag.length === 0 || !tag.startsWith('tag:') || tags.includes(tag);
+	}, [tag, tags]);
+
+	const validNodeTags = useMemo(() => {
+		return existingTags?.filter((nodeTag) => !tags.includes(nodeTag)) || [];
+	}, [tags]);
 
 	return (
 		<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
@@ -57,44 +70,36 @@ export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
 							</TableList.Item>
 						))
 					)}
-					<TableList.Item
-						className={cn(
-							'rounded-b-xl focus-within:ring-3',
-							tag.length > 0 &&
-								(!tag.startsWith('tag:') || tags.includes(tag)) &&
-								'ring-3 ring-red-500 ring-opacity-50',
-						)}
-					>
-						<Input
-							className={cn(
-								'border-none font-mono p-0',
-								'rounded-none focus:ring-0 w-full',
-							)}
-							label="Add a tag"
-							labelHidden
-							onChange={setTag}
-							placeholder="tag:example"
-						/>
-						<Button
-							className={cn(
-								'rounded-md p-0.5',
-								(!tag.startsWith('tag:') || tags.includes(tag)) &&
-									'opacity-50 cursor-not-allowed',
-							)}
-							isDisabled={
-								tag.length === 0 ||
-								!tag.startsWith('tag:') ||
-								tags.includes(tag)
-							}
-							onPress={() => {
-								setTags([...tags, tag]);
-								setTag('');
-							}}
-						>
-							<Plus className="p-1" />
-						</Button>
-					</TableList.Item>
 				</TableList>
+
+				<div className="flex items-center gap-2 mt-2">
+					<Select
+						allowsCustomValue
+						aria-label="Add a tag"
+						className="w-full"
+						inputValue={tag}
+						isInvalid={tag.length > 0 && tagIsInvalid}
+						onInputChange={setTag}
+						placeholder="tag:example"
+					>
+						{validNodeTags.map((nodeTag) => {
+							return <Select.Item key={nodeTag}>{nodeTag}</Select.Item>;
+						})}
+					</Select>
+					<Button
+						className={cn(
+							'rounded-md p-1',
+							tagIsInvalid && 'opacity-50 cursor-not-allowed',
+						)}
+						isDisabled={tagIsInvalid}
+						onPress={() => {
+							setTags([...tags, tag]);
+							setTag('tag:');
+						}}
+					>
+						<Plus className="p-1" size={30} />
+					</Button>
+				</div>
 			</Dialog.Panel>
 		</Dialog>
 	);
diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx
index c054ed5..0b751f0 100644
--- a/app/routes/machines/machine.tsx
+++ b/app/routes/machines/machine.tsx
@@ -10,7 +10,7 @@ import StatusCircle from '~/components/StatusCircle';
 import Tooltip from '~/components/Tooltip';
 import cn from '~/utils/cn';
 import { getOSInfo, getTSVersion } from '~/utils/host-info';
-import { mapNodes } from '~/utils/node-info';
+import { mapNodes, sortNodeTags } from '~/utils/node-info';
 import type { Route } from './+types/machine';
 import { mapTagsToComponents, uiTagsForNode } from './components/machine-row';
 import MenuOptions from './components/menu';
@@ -35,10 +35,8 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
 	}
 
 	const api = context.hsApi.getRuntimeClient(session.api_key);
-	const [node, users] = await Promise.all([
-		api.getNode(params.id),
-		api.getUsers(),
-	]);
+	const [nodes, users] = await Promise.all([api.getNodes(), api.getUsers()]);
+	const node = nodes.find((node) => node.id === params.id);
 
 	const lookup = await context.agents?.lookup([node.nodeKey]);
 	const [enhancedNode] = mapNodes([node], lookup);
@@ -53,13 +51,14 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
 		magic,
 		agent: context.agents?.agentID(),
 		stats: lookup?.[enhancedNode.nodeKey],
+		existingTags: sortNodeTags(nodes),
 	};
 }
 
 export const action = machineAction;
 
 export default function Page({
-	loaderData: { node, tags, users, magic, agent, stats },
+	loaderData: { node, tags, users, magic, agent, stats, existingTags },
 }: Route.ComponentProps) {
 	const [showRouting, setShowRouting] = useState(false);
 
@@ -87,7 +86,13 @@ export default function Page({
 					<h1 className="text-2xl font-medium">{node.givenName}</h1>
 					<StatusCircle className="w-4 h-4" isOnline={node.online} />
 				</span>
-				<MenuOptions isFullButton magic={magic} node={node} users={users} />
+				<MenuOptions
+					existingTags={existingTags}
+					isFullButton
+					magic={magic}
+					node={node}
+					users={users}
+				/>
 			</div>
 			<div className="flex gap-1 mb-4">
 				<div className="border-r border-headplane-100 dark:border-headplane-800 p-2 pr-4">
diff --git a/app/routes/machines/overview.tsx b/app/routes/machines/overview.tsx
index cf99c1c..3b23f8a 100644
--- a/app/routes/machines/overview.tsx
+++ b/app/routes/machines/overview.tsx
@@ -4,7 +4,7 @@ import Link from '~/components/Link';
 import Tooltip from '~/components/Tooltip';
 import { Capabilities } from '~/server/web/roles';
 import cn from '~/utils/cn';
-import { mapNodes } from '~/utils/node-info';
+import { mapNodes, sortNodeTags } from '~/utils/node-info';
 import type { Route } from './+types/overview';
 import MachineRow from './components/machine-row';
 import NewMachine from './dialogs/new';
@@ -126,6 +126,7 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 				>
 					{loaderData.populatedNodes.map((node) => (
 						<MachineRow
+							existingTags={sortNodeTags(loaderData.nodes)}
 							isAgent={
 								loaderData.agent ? loaderData.agent === node.nodeKey : undefined
 							}
diff --git a/app/utils/node-info.ts b/app/utils/node-info.ts
index ec0598e..3e54f3c 100644
--- a/app/utils/node-info.ts
+++ b/app/utils/node-info.ts
@@ -52,3 +52,14 @@ export function mapNodes(
 		};
 	});
 }
+
+export function sortNodeTags(nodes: Machine[]): string[] {
+	return Array.from(
+		new Set(
+			nodes.flatMap(({ validTags, forcedTags }) => [
+				...validTags,
+				...forcedTags,
+			]),
+		),
+	).sort();
+}