diff --git a/app/components/RouteTabs.tsx b/app/components/RouteTabs.tsx
index 6210a4cc5..b1c0b3b39 100644
--- a/app/components/RouteTabs.tsx
+++ b/app/components/RouteTabs.tsx
@@ -79,10 +79,16 @@ export function RouteTabs({
 
 export interface TabProps {
   to: string
+  /**
+   * Used in rare cases when a tab has sidebar tabs underneath and we want to be
+   * able to link directly to the first sidebar tab, but we of course also want
+   * this tab to appear active for all the sidebar tabs. See instance metrics.
+   */
+  toPrefix?: string
   children: ReactNode
 }
-export const Tab = ({ to, children }: TabProps) => {
-  const isActive = useIsActivePath({ to })
+export const Tab = ({ to, toPrefix, children }: TabProps) => {
+  const isActive = useIsActivePath({ to: toPrefix || to })
   return (
     <Link
       role="tab"
@@ -90,6 +96,7 @@ export const Tab = ({ to, children }: TabProps) => {
       className={cn('ox-tab', { 'is-selected': isActive })}
       tabIndex={isActive ? 0 : -1}
       aria-selected={isActive}
+      data-state={isActive ? 'active' : 'inactive'}
     >
       <div>{children}</div>
     </Link>
diff --git a/app/pages/project/instances/InstancePage.tsx b/app/pages/project/instances/InstancePage.tsx
index fc3bf8de4..861a1553d 100644
--- a/app/pages/project/instances/InstancePage.tsx
+++ b/app/pages/project/instances/InstancePage.tsx
@@ -51,7 +51,7 @@ import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { Spinner } from '~/ui/lib/Spinner'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { truncate } from '~/ui/lib/Truncate'
-import { pb } from '~/util/path-builder'
+import { instanceMetricsBase, pb } from '~/util/path-builder'
 import { pluralize } from '~/util/str'
 import { GiB } from '~/util/units'
 
@@ -256,7 +256,12 @@ export default function InstancePage() {
       <RouteTabs fullWidth>
         <Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
         <Tab to={pb.instanceNetworking(instanceSelector)}>Networking</Tab>
-        <Tab to={pb.instanceCpuMetrics(instanceSelector)}>Metrics</Tab>
+        <Tab
+          to={pb.instanceCpuMetrics(instanceSelector)}
+          toPrefix={instanceMetricsBase(instanceSelector)}
+        >
+          Metrics
+        </Tab>
         <Tab to={pb.instanceConnect(instanceSelector)}>Connect</Tab>
         <Tab to={pb.instanceSettings(instanceSelector)}>Settings</Tab>
       </RouteTabs>
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index 329639177..cf077ce06 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -36,12 +36,12 @@
 }
 
 /* Active states */
-.ox-tab.is-selected {
+.ox-tab[data-state='active'] {
   @apply text-accent border-accent;
 }
 
-.ox-tab.is-selected:hover > * {
-  @apply !bg-accent-secondary;
+.ox-tabs-list .ox-tab[data-state='active']:hover > * {
+  @apply bg-accent-secondary;
 }
 
 /* Badge styles */
@@ -49,12 +49,12 @@
   @apply -mt-1 select-none text-current;
 }
 
-.ox-tab:not(.is-selected) > .ox-badge {
+.ox-tab[data-state='inactive'] > .ox-badge {
   @apply bg-disabled;
 }
 
-.ox-tab.is-selected > .ox-badge {
-  @apply bg-accent-secondary;
+.ox-tab[data-state='active'] > .ox-badge {
+  @apply bg-accent-secondary-hover;
 }
 
 /* Full width variants */
@@ -81,7 +81,7 @@
   border-bottom: none;
 }
 
-.ox-side-tabs .ox-tab.is-selected {
+.ox-side-tabs-list .ox-tab[data-state='active'] {
   @apply text-accent bg-accent-secondary;
   border: none;
 }
@@ -90,6 +90,10 @@
   @apply mx-0 ml-4;
 }
 
-.ox-side-tabs-list .ox-tab:not(.is-selected):hover {
+.ox-side-tabs-list .ox-tab[data-state='active']:hover {
+  @apply bg-accent-secondary-hover;
+}
+
+.ox-side-tabs-list .ox-tab:not([data-state='active']):hover {
   @apply text-default bg-hover;
 }
diff --git a/app/util/path-builder.ts b/app/util/path-builder.ts
index 3e75e5347..1e65f73fa 100644
--- a/app/util/path-builder.ts
+++ b/app/util/path-builder.ts
@@ -14,7 +14,9 @@ const projectBase = ({ project }: PP.Project) => `${pb.projects()}/${project}`
 const instanceBase = ({ project, instance }: PP.Instance) =>
   `${pb.instances({ project })}/${instance}`
 const vpcBase = ({ project, vpc }: PP.Vpc) => `${pb.vpcs({ project })}/${vpc}`
-const instanceMetricsBase = ({ project, instance }: PP.Instance) =>
+
+/** Don't use this for links. only exported for use as toPrefix on metrics tab */
+export const instanceMetricsBase = ({ project, instance }: PP.Instance) =>
   `${instanceBase({ project, instance })}/metrics`
 
 export const pb = {