diff --git a/frontend/src/components/ui/device-link.tsx b/frontend/src/components/ui/device-link.tsx
new file mode 100644
index 0000000..675b2db
--- /dev/null
+++ b/frontend/src/components/ui/device-link.tsx
@@ -0,0 +1,21 @@
+import { Link } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+
+interface DeviceLinkProps {
+  tenantId: string
+  deviceId: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function DeviceLink({ tenantId, deviceId, children, className }: DeviceLinkProps) {
+  return (
+    <Link
+      to="/tenants/$tenantId/devices/$deviceId"
+      params={{ tenantId, deviceId }}
+      className={cn('hover:text-text-primary hover:underline', className)}
+    >
+      {children}
+    </Link>
+  )
+}