diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 9fa6dde26e..9b5a8b22cf 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -8,10 +8,11 @@
 import { format } from 'date-fns'
 import filesize from 'filesize'
 import { useMemo } from 'react'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
+  useApiQuery,
   useApiQueryClient,
   usePrefetchedApiQuery,
   type InstanceNetworkInterface,
@@ -33,7 +34,6 @@ import { getInstanceSelector, useInstanceSelector, useQuickActions } from 'app/h
 import { pb } from 'app/util/path-builder'
 
 import { useMakeInstanceActions } from '../actions'
-import { VpcNameFromId } from './tabs/NetworkingTab'
 
 function getPrimaryVpcId(nics: InstanceNetworkInterface[]) {
   const nic = nics.find((nic) => nic.primary)
@@ -100,6 +100,15 @@ export function InstancePage() {
   })
   const primaryVpcId = getPrimaryVpcId(nics.items)
 
+  // a little funny, as noted in the loader -- this should always be prefetched
+  // when primaryVpcId is defined, but primaryVpcId might not be defined, so
+  // we can't use usePrefetchedApiQuery
+  const { data: vpc } = useApiQuery(
+    'vpcView',
+    { path: { vpc: primaryVpcId! } },
+    { enabled: !!primaryVpcId }
+  )
+
   const actions = useMemo(
     () => [
       {
@@ -147,9 +156,16 @@ export function InstancePage() {
             <InstanceStatusBadge status={instance.runState} />
           </PropertiesTable.Row>
           <PropertiesTable.Row label="vpc">
-            <span className="text-secondary">
-              {primaryVpcId ? VpcNameFromId({ value: primaryVpcId }) : <EmptyCell />}
-            </span>
+            {vpc ? (
+              <Link
+                className="link-with-underline group text-sans-semi-md"
+                to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
+              >
+                {vpc.name}
+              </Link>
+            ) : (
+              <EmptyCell />
+            )}
           </PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index 0554dffe58..1d29fd9bc8 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -43,7 +43,7 @@ import { fancifyStates } from './common'
 
 export const Skeleton = classed.div`h-4 w-12 rounded bg-tertiary motion-safe:animate-pulse`
 
-export const VpcNameFromId = ({ value }: { value: string }) => {
+const VpcNameFromId = ({ value }: { value: string }) => {
   const projectSelector = useProjectSelector()
   const { data: vpc, isError } = useApiQuery(
     'vpcView',
@@ -58,10 +58,12 @@ export const VpcNameFromId = ({ value }: { value: string }) => {
   if (!vpc) return <Skeleton />
   return (
     <Link
-      className="link-with-underline text-sans-semi-md"
+      className="link-with-underline group text-sans-semi-md"
       to={pb.vpc({ ...projectSelector, vpc: vpc.name })}
     >
-      {vpc.name}
+      {/* Pushes out the link area to the entire cell for improved clickability™ */}
+      <div className="absolute inset-0 right-px group-hover:bg-raise" />
+      <div className="relative">{vpc.name}</div>
     </Link>
   )
 }