diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index ffcc81d..62b1a70 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { type AriaButtonOptions, useButton } from 'react-aria';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface ButtonProps extends AriaButtonOptions<'button'> {
 	variant?: 'heavy' | 'light' | 'danger';
diff --git a/app/components/Card.tsx b/app/components/Card.tsx
index 35351ae..e5a8c15 100644
--- a/app/components/Card.tsx
+++ b/app/components/Card.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Title from '~/components/Title';
 import Text from '~/components/Text';
-import { cn } from '~/utils/cn';
+import Title from '~/components/Title';
+import cn from '~/utils/cn';
 
 interface Props extends React.HTMLProps<HTMLDivElement> {
 	variant?: 'raised' | 'flat';
diff --git a/app/components/Chip.tsx b/app/components/Chip.tsx
index e9af785..1aae704 100644
--- a/app/components/Chip.tsx
+++ b/app/components/Chip.tsx
@@ -1,4 +1,4 @@
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface ChipProps {
 	text: string;
diff --git a/app/components/Code.tsx b/app/components/Code.tsx
index 79834c4..b8dfad9 100644
--- a/app/components/Code.tsx
+++ b/app/components/Code.tsx
@@ -1,6 +1,6 @@
 import { CheckIcon, CopyIcon } from '@primer/octicons-react';
 import { HTMLProps, useState } from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import toast from '~/utils/toast';
 
 interface Props extends HTMLProps<HTMLSpanElement> {
diff --git a/app/components/Dialog.tsx b/app/components/Dialog.tsx
index 99f7399..3ad7b8c 100644
--- a/app/components/Dialog.tsx
+++ b/app/components/Dialog.tsx
@@ -18,7 +18,7 @@ import Card from '~/components/Card';
 import IconButton, { IconButtonProps } from '~/components/IconButton';
 import Text from '~/components/Text';
 import Title from '~/components/Title';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface DialogProps extends OverlayTriggerProps {
 	children:
diff --git a/app/components/Error.tsx b/app/components/Error.tsx
index e52b3c4..9297f35 100644
--- a/app/components/Error.tsx
+++ b/app/components/Error.tsx
@@ -1,6 +1,6 @@
 import { AlertIcon } from '@primer/octicons-react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import Card from './Card';
 import Code from './Code';
 
@@ -10,7 +10,7 @@ interface Props {
 
 function getMessage(error: Error | unknown) {
 	if (!(error instanceof Error)) {
-		return "An unknown error occurred";
+		return 'An unknown error occurred';
 	}
 
 	let rootError = error;
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 097024e..86c3299 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,6 +1,6 @@
-import { cn } from '~/utils/cn';
 import Link from '~/components/Link';
 import Tooltip from '~/components/Tooltip';
+import cn from '~/utils/cn';
 
 declare global {
 	const __VERSION__: string;
@@ -35,11 +35,7 @@ export default function Footer({ url, debug }: FooterProps) {
 			<p className="container text-xs opacity-75">
 				Version: {__VERSION__}
 				{' — '}
-				Connecting to
-				{' '}
-				<strong className="blur-xs hover:blur-none">
-					{url}
-				</strong>
+				Connecting to <strong className="blur-xs hover:blur-none">{url}</strong>
 				{debug && ' (Debug mode enabled)'}
 			</p>
 		</footer>
diff --git a/app/components/IconButton.tsx b/app/components/IconButton.tsx
index 4223535..a3d6b32 100644
--- a/app/components/IconButton.tsx
+++ b/app/components/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { type AriaButtonOptions, useButton } from 'react-aria';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface IconButtonProps extends AriaButtonOptions<'button'> {
 	variant?: 'heavy' | 'light';
diff --git a/app/components/Link.tsx b/app/components/Link.tsx
index fbd30fa..e7c931c 100644
--- a/app/components/Link.tsx
+++ b/app/components/Link.tsx
@@ -1,5 +1,5 @@
 import { LinkExternalIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	to: string;
diff --git a/app/components/Notice.tsx b/app/components/Notice.tsx
index 8fdf5bb..83506b3 100644
--- a/app/components/Notice.tsx
+++ b/app/components/Notice.tsx
@@ -1,6 +1,6 @@
 import { InfoIcon } from '@primer/octicons-react';
 import type { ReactNode } from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	className?: string;
diff --git a/app/components/Switch.tsx b/app/components/Switch.tsx
index 9fdf8cf..8ba8a0f 100644
--- a/app/components/Switch.tsx
+++ b/app/components/Switch.tsx
@@ -1,5 +1,5 @@
 import { Switch as AriaSwitch } from 'react-aria-components';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 type SwitchProps = Parameters<typeof AriaSwitch>[0] & {
 	readonly label: string;
diff --git a/app/components/Text.tsx b/app/components/Text.tsx
index 8c600c4..ae5f315 100644
--- a/app/components/Text.tsx
+++ b/app/components/Text.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface TextProps {
 	children: React.ReactNode;
@@ -7,9 +7,5 @@ export interface TextProps {
 }
 
 export default function Text({ children, className }: TextProps) {
-	return (
-		<p className={cn('text-md my-0', className)}>
-			{children}
-		</p>
-	);
+	return <p className={cn('text-md my-0', className)}>{children}</p>;
 }
diff --git a/app/components/Title.tsx b/app/components/Title.tsx
index 157a05a..ac16423 100644
--- a/app/components/Title.tsx
+++ b/app/components/Title.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface TitleProps {
 	children: React.ReactNode;
@@ -8,8 +8,6 @@ export interface TitleProps {
 
 export default function Title({ children, className }: TitleProps) {
 	return (
-		<h3 className={cn('text-2xl font-bold mb-6', className)}>
-			{children}
-		</h3>
+		<h3 className={cn('text-2xl font-bold mb-6', className)}>{children}</h3>
 	);
 }
diff --git a/app/components/Tooltip.tsx b/app/components/Tooltip.tsx
index ad726b9..2fc202b 100644
--- a/app/components/Tooltip.tsx
+++ b/app/components/Tooltip.tsx
@@ -4,7 +4,7 @@ import {
 	Tooltip as AriaTooltip,
 	TooltipTrigger,
 } from 'react-aria-components';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	children: ReactNode;
diff --git a/app/layouts/dashboard.tsx b/app/layouts/dashboard.tsx
index 181bbcd..19942d6 100644
--- a/app/layouts/dashboard.tsx
+++ b/app/layouts/dashboard.tsx
@@ -1,7 +1,7 @@
 import { XCircleFillIcon } from '@primer/octicons-react';
 import { type LoaderFunctionArgs, redirect } from 'react-router';
 import { Outlet, useLoaderData } from 'react-router';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { HeadscaleError, healthcheck, pull } from '~/utils/headscale';
 import log from '~/utils/log';
 import { destroySession, getSession } from '~/utils/sessions.server';
diff --git a/app/root.tsx b/app/root.tsx
index b74d066..8a0d534 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -13,7 +13,7 @@ import { ProgressBar } from 'react-aria-components';
 import { ErrorPopup } from '~/components/Error';
 import ToastProvider from '~/components/ToastProvider';
 import stylesheet from '~/tailwind.css?url';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { useToastQueue } from '~/utils/toast';
 
 export const meta: MetaFunction = () => [
diff --git a/app/routes/acls/components/cm.client.tsx b/app/routes/acls/components/cm.client.tsx
index b47e34f..48841cc 100644
--- a/app/routes/acls/components/cm.client.tsx
+++ b/app/routes/acls/components/cm.client.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import Merge from 'react-codemirror-merge';
-import CodeMirror from '@uiw/react-codemirror';
 import * as shopify from '@shopify/lang-jsonc';
-import { ClientOnly } from 'remix-utils/client-only';
-import { ErrorBoundary } from 'react-error-boundary';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
-import { cn } from '~/utils/cn';
+import Merge from 'react-codemirror-merge';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ClientOnly } from 'remix-utils/client-only';
+import cn from '~/utils/cn';
 
 import Fallback from './fallback';
 
diff --git a/app/routes/acls/components/error.tsx b/app/routes/acls/components/error.tsx
index 07cabc1..0e08e70 100644
--- a/app/routes/acls/components/error.tsx
+++ b/app/routes/acls/components/error.tsx
@@ -1,5 +1,5 @@
-import { cn } from '~/utils/cn';
 import { AlertIcon } from '@primer/octicons-react';
+import cn from '~/utils/cn';
 
 import Card from '~/components/Card';
 import Code from '~/components/Code';
diff --git a/app/routes/acls/components/fallback.tsx b/app/routes/acls/components/fallback.tsx
index 0441ebf..3f2b627 100644
--- a/app/routes/acls/components/fallback.tsx
+++ b/app/routes/acls/components/fallback.tsx
@@ -1,5 +1,5 @@
 import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	readonly acl: string;
diff --git a/app/routes/acls/components/unavailable.tsx b/app/routes/acls/components/unavailable.tsx
index 58e20ec..652946b 100644
--- a/app/routes/acls/components/unavailable.tsx
+++ b/app/routes/acls/components/unavailable.tsx
@@ -1,8 +1,8 @@
-import { cn } from '~/utils/cn';
 import { AlertIcon } from '@primer/octicons-react';
+import cn from '~/utils/cn';
 
-import Code from '~/components/Code';
 import Card from '~/components/Card';
+import Code from '~/components/Code';
 
 interface Props {
 	mode: 'file' | 'database';
diff --git a/app/routes/acls/editor.tsx b/app/routes/acls/editor.tsx
index 67a89bb..03c41a5 100644
--- a/app/routes/acls/editor.tsx
+++ b/app/routes/acls/editor.tsx
@@ -16,7 +16,7 @@ import Code from '~/components/Code';
 import Link from '~/components/Link';
 import Notice from '~/components/Notice';
 import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { HeadscaleError, pull, put } from '~/utils/headscale';
diff --git a/app/routes/dns/components/dns.tsx b/app/routes/dns/components/dns.tsx
index 98015eb..b62d0f2 100644
--- a/app/routes/dns/components/dns.tsx
+++ b/app/routes/dns/components/dns.tsx
@@ -1,10 +1,10 @@
-import { useSubmit } from 'react-router';
 import { Button } from 'react-aria-components';
+import { useSubmit } from 'react-router';
 
 import Code from '~/components/Code';
 import Link from '~/components/Link';
 import TableList from '~/components/TableList';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 import AddDNS from '../dialogs/dns';
 
@@ -37,7 +37,7 @@ export default function DNS({ records, isDisabled }: Props) {
 						</TableList.Item>
 					) : (
 						records.map((record, index) => (
-							<TableList.Item key={index}>
+							<TableList.Item key={`${record.name}-${record.value}`}>
 								<div className="flex gap-24">
 									<div className="flex gap-2">
 										<p className="font-mono text-sm font-bold">{record.type}</p>
diff --git a/app/routes/dns/components/domains.tsx b/app/routes/dns/components/domains.tsx
index a54b83e..b9b6a2f 100644
--- a/app/routes/dns/components/domains.tsx
+++ b/app/routes/dns/components/domains.tsx
@@ -18,7 +18,7 @@ import { type FetcherWithComponents, useFetcher } from 'react-router';
 
 import Spinner from '~/components/Spinner';
 import TableList from '~/components/TableList';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 type Properties = {
 	readonly baseDomain?: string;
diff --git a/app/routes/dns/components/nameservers.tsx b/app/routes/dns/components/nameservers.tsx
index 3e3d694..084cc27 100644
--- a/app/routes/dns/components/nameservers.tsx
+++ b/app/routes/dns/components/nameservers.tsx
@@ -1,11 +1,8 @@
-import { useSubmit } from 'react-router';
-import { useState } from 'react';
 import { Button } from 'react-aria-components';
-
+import { useSubmit } from 'react-router';
 import Link from '~/components/Link';
-import Switch from '~/components/Switch';
 import TableList from '~/components/TableList';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 import AddNameserver from '../dialogs/nameserver';
 
@@ -59,7 +56,7 @@ function NameserverList({
 	name,
 }: ListProps) {
 	const submit = useSubmit();
-	const list = isGlobal ? nameservers['global'] : nameservers[name];
+	const list = isGlobal ? nameservers.global : nameservers[name];
 	if (list.length === 0) {
 		return null;
 	}
@@ -74,8 +71,7 @@ function NameserverList({
 			<TableList>
 				{list.length > 0
 					? list.map((ns, index) => (
-							// eslint-disable-next-line react/no-array-index-key
-							<TableList.Item key={index}>
+							<TableList.Item key={ns}>
 								<p className="font-mono text-sm">{ns}</p>
 								<Button
 									className={cn(
diff --git a/app/routes/dns/components/rename.tsx b/app/routes/dns/components/rename.tsx
index 12bc1ce..ef844ce 100644
--- a/app/routes/dns/components/rename.tsx
+++ b/app/routes/dns/components/rename.tsx
@@ -5,7 +5,7 @@ import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
 import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 type Properties = {
 	readonly name: string;
diff --git a/app/routes/dns/dialogs/nameserver.tsx b/app/routes/dns/dialogs/nameserver.tsx
index cd9ae19..c12dcdd 100644
--- a/app/routes/dns/dialogs/nameserver.tsx
+++ b/app/routes/dns/dialogs/nameserver.tsx
@@ -6,7 +6,7 @@ import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
 import Switch from '~/components/Switch';
 import Tooltip from '~/components/Tooltip';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	nameservers: Record<string, string[]>;
diff --git a/app/routes/machines/components/machine.tsx b/app/routes/machines/components/machine.tsx
index 3f2f1b3..8378ddb 100644
--- a/app/routes/machines/components/machine.tsx
+++ b/app/routes/machines/components/machine.tsx
@@ -5,7 +5,7 @@ import Chip from '~/components/Chip';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import type { HostInfo, Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import * as hinfo from '~/utils/host-info';
 
 import toast from '~/utils/toast';
diff --git a/app/routes/machines/components/menu.tsx b/app/routes/machines/components/menu.tsx
index c6df411..cccabdb 100644
--- a/app/routes/machines/components/menu.tsx
+++ b/app/routes/machines/components/menu.tsx
@@ -2,7 +2,7 @@ import { Cog, Ellipsis } from 'lucide-react';
 import { useState } from 'react';
 import Menu from '~/components/Menu';
 import type { Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import Delete from '../dialogs/delete';
 import Expire from '../dialogs/expire';
 import Move from '../dialogs/move';
diff --git a/app/routes/machines/dialogs/routes.tsx b/app/routes/machines/dialogs/routes.tsx
index 25d01ca..ae9c3cc 100644
--- a/app/routes/machines/dialogs/routes.tsx
+++ b/app/routes/machines/dialogs/routes.tsx
@@ -4,7 +4,7 @@ import Dialog from '~/components/Dialog';
 import Link from '~/components/Link';
 import Switch from '~/components/Switch';
 import type { Machine, Route } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface RoutesProps {
 	machine: Machine;
diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx
index 3f70ac1..a01f707 100644
--- a/app/routes/machines/machine.tsx
+++ b/app/routes/machines/machine.tsx
@@ -18,7 +18,7 @@ import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import Tooltip from '~/components/Tooltip';
 import type { Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { pull } from '~/utils/headscale';
diff --git a/app/routes/machines/overview.tsx b/app/routes/machines/overview.tsx
index ba1e3e0..063d26c 100644
--- a/app/routes/machines/overview.tsx
+++ b/app/routes/machines/overview.tsx
@@ -7,7 +7,7 @@ import Code from '~/components/Code';
 import { ErrorPopup } from '~/components/Error';
 import Link from '~/components/Link';
 import type { Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { pull } from '~/utils/headscale';
diff --git a/app/routes/settings/components/agent.tsx b/app/routes/settings/components/agent.tsx
index 0ac49c6..4412cb0 100644
--- a/app/routes/settings/components/agent.tsx
+++ b/app/routes/settings/components/agent.tsx
@@ -1,8 +1,8 @@
-import Link from '~/components/Link';
-import Button from '~/components/Button';
-import { Link as RemixLink } from 'react-router';
 import { ArrowRightIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import { Link as RemixLink } from 'react-router';
+import Button from '~/components/Button';
+import Link from '~/components/Link';
+import cn from '~/utils/cn';
 
 export default function AgentSection() {
 	return (
@@ -10,10 +10,10 @@ export default function AgentSection() {
 			<div className="flex flex-col w-2/3">
 				<h1 className="text-2xl font-medium mb-4">Local Agent</h1>
 				<p className="text-gray-700 dark:text-gray-300">
-					Headplane provides a local agent that can be installed on a
-					server to provide additional features including viewing device
-					information and SSH access via the web interface (soon).
-					To learn more about the agent visit the{' '}
+					Headplane provides a local agent that can be installed on a server to
+					provide additional features including viewing device information and
+					SSH access via the web interface (soon). To learn more about the agent
+					visit the{' '}
 					<Link
 						to="https://github.com/tale/headplane/blob/main/docs/Headplane-Agent.md"
 						name="Headplane Agent Documentation"
@@ -34,5 +34,5 @@ export default function AgentSection() {
 				</div>
 			</RemixLink>
 		</>
-	)
+	);
 }
diff --git a/app/routes/settings/overview.tsx b/app/routes/settings/overview.tsx
index f69ea9e..efc4112 100644
--- a/app/routes/settings/overview.tsx
+++ b/app/routes/settings/overview.tsx
@@ -1,8 +1,8 @@
-import Link from '~/components/Link';
-import Button from '~/components/Button';
-import { Link as RemixLink } from 'react-router';
 import { ArrowRightIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import { Link as RemixLink } from 'react-router';
+import Button from '~/components/Button';
+import Link from '~/components/Link';
+import cn from '~/utils/cn';
 
 import AgentSection from './components/agent';
 
diff --git a/app/routes/users/overview.tsx b/app/routes/users/overview.tsx
index b80bdd6..ec3cb74 100644
--- a/app/routes/users/overview.tsx
+++ b/app/routes/users/overview.tsx
@@ -10,7 +10,7 @@ import Card from '~/components/Card';
 import { ErrorPopup } from '~/components/Error';
 import StatusCircle from '~/components/StatusCircle';
 import type { Machine, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { del, post, pull } from '~/utils/headscale';
diff --git a/app/utils/cn.ts b/app/utils/cn.ts
index b44fd90..de58645 100644
--- a/app/utils/cn.ts
+++ b/app/utils/cn.ts
@@ -1,5 +1,5 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
 export default cn;