diff --git a/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
index b27e310242dc..f145992a9048 100644
--- a/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
@@ -59,7 +59,7 @@ export class Sidebar extends React.Component<SidebarProps> {
     {
       path: "/hotranges",
       text: "Hot Ranges",
-      activeFor: ["/hotranges"],
+      activeFor: ["/hotranges", "/reports/range"],
     },
     { path: "/jobs", text: "Jobs", activeFor: [] },
     { path: "/schedules", text: "Schedules", activeFor: [] },
@@ -67,7 +67,7 @@ export class Sidebar extends React.Component<SidebarProps> {
       path: "/debug",
       text: "Advanced Debug",
       activeFor: ["/reports", "/data-distribution", "/raft", "/keyvisualizer"],
-      ignoreFor: ["/reports/network"],
+      ignoreFor: ["/reports/network", "/reports/range"],
     },
   ];
 
diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx
index f1c3355adf11..5a5a6b80e15c 100644
--- a/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx
@@ -35,7 +35,8 @@ import AllocatorOutput from "src/views/reports/containers/range/allocator";
 import RangeInfo from "src/views/reports/containers/range/rangeInfo";
 import LeaseTable from "src/views/reports/containers/range/leaseTable";
 import { getMatchParamByName } from "src/util/query";
-import { BackToAdvanceDebug } from "../util";
+import { Button, commonStyles } from "@cockroachlabs/cluster-ui";
+import { ArrowLeft } from "@cockroachlabs/icons";
 
 interface RangeDispatchProps {
   refreshRange: typeof refreshRange;
@@ -111,6 +112,10 @@ export class Range extends React.Component<RangeProps, {}> {
     }
   }
 
+  backToHotRanges = (): void => {
+    this.props.history.push("/hotranges");
+  };
+
   render() {
     const { range, match } = this.props;
     const rangeID = getMatchParamByName(match, rangeIDAttr);
@@ -188,7 +193,16 @@ export class Range extends React.Component<RangeProps, {}> {
     return (
       <div className="section">
         <Helmet title={`r${responseRangeID.toString()} Range | Debug`} />
-        <BackToAdvanceDebug history={this.props.history} />
+        <Button
+          onClick={this.backToHotRanges}
+          type="unstyled-link"
+          size="small"
+          icon={<ArrowLeft fontSize={"10px"} />}
+          iconPosition="left"
+          className={commonStyles("small-margin")}
+        >
+          Hot Ranges
+        </Button>
         <h1 className="base-heading">
           Range Report for r{responseRangeID.toString()}
         </h1>