diff --git a/dashboard/client/src/App.tsx b/dashboard/client/src/App.tsx
index 323b9b28c68bc..469797b798f8c 100644
--- a/dashboard/client/src/App.tsx
+++ b/dashboard/client/src/App.tsx
@@ -31,6 +31,7 @@ import {
 } from "./pages/serve/ServeApplicationDetailPage";
 import { ServeApplicationsListPage } from "./pages/serve/ServeApplicationsListPage";
 import { ServeLayout, ServeSideTabLayout } from "./pages/serve/ServeLayout";
+import { ServeReplicaDetailLayout } from "./pages/serve/ServeReplicaDetailLayout";
 import { ServeReplicaDetailPage } from "./pages/serve/ServeReplicaDetailPage";
 import {
   ServeControllerDetailPage,
@@ -263,9 +264,12 @@ const App = () => {
                   >
                     <Route element={<ServeApplicationDetailPage />} path="" />
                     <Route
-                      element={<ServeReplicaDetailPage />}
+                      element={<ServeReplicaDetailLayout />}
                       path=":deploymentName/:replicaId"
-                    />
+                    >
+                      <Route element={<ServeReplicaDetailPage />} path="" />
+                      <Route path="tasks/:taskId" element={<TaskPage />} />
+                    </Route>
                   </Route>
                 </Route>
                 <Route element={<LogsLayout />} path="logs">
diff --git a/dashboard/client/src/pages/serve/ServeReplicaDetailLayout.tsx b/dashboard/client/src/pages/serve/ServeReplicaDetailLayout.tsx
new file mode 100644
index 0000000000000..df9b49f2f3b52
--- /dev/null
+++ b/dashboard/client/src/pages/serve/ServeReplicaDetailLayout.tsx
@@ -0,0 +1,47 @@
+import { Typography } from "@material-ui/core";
+import React from "react";
+import { Outlet, useParams } from "react-router-dom";
+import Loading from "../../components/Loading";
+import { MainNavPageInfo } from "../layout/mainNavContext";
+import { useServeReplicaDetails } from "./hook/useServeApplications";
+
+export const ServeReplicaDetailLayout = () => {
+  const { applicationName, deploymentName, replicaId } = useParams();
+  const { loading, application, deployment, replica, error } =
+    useServeReplicaDetails(applicationName, deploymentName, replicaId);
+
+  if (error) {
+    return <Typography color="error">{error.toString()}</Typography>;
+  }
+
+  if (loading) {
+    return <Loading loading />;
+  } else if (!replica || !deployment || !application) {
+    return (
+      <Typography color="error">
+        {applicationName} / {deploymentName} / {replicaId} not found.
+      </Typography>
+    );
+  }
+
+  const appName = application.name ? application.name : "-";
+  const { replica_id } = replica;
+
+  return (
+    <div>
+      <MainNavPageInfo
+        pageInfo={{
+          id: "serveReplicaDetail",
+          title: replica_id,
+          pageTitle: `${replica_id} | Serve Replica`,
+          path: `/serve/applications/${encodeURIComponent(
+            appName,
+          )}/${encodeURIComponent(deployment.name)}/${encodeURIComponent(
+            replica_id,
+          )}`,
+        }}
+      />
+      <Outlet />
+    </div>
+  );
+};
diff --git a/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx b/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx
index 359a4f65196d9..3e69be58f1e74 100644
--- a/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx
+++ b/dashboard/client/src/pages/serve/ServeReplicaDetailPage.tsx
@@ -11,11 +11,9 @@ import {
   MultiTabLogViewerTabDetails,
 } from "../../common/MultiTabLogViewer";
 import { Section } from "../../common/Section";
-import Loading from "../../components/Loading";
 import { MetadataSection } from "../../components/MetadataSection";
 import { StatusChip } from "../../components/StatusChip";
 import { ServeReplica } from "../../type/serve";
-import { MainNavPageInfo } from "../layout/mainNavContext";
 import TaskList from "../state/task";
 import { useServeReplicaDetails } from "./hook/useServeApplications";
 import { ServeReplicaMetricsSection } from "./ServeDeploymentMetricsSection";
@@ -35,16 +33,13 @@ export const ServeReplicaDetailPage = () => {
   const { applicationName, deploymentName, replicaId } = useParams();
   const classes = useStyles();
 
-  const { loading, application, deployment, replica, error } =
-    useServeReplicaDetails(applicationName, deploymentName, replicaId);
-
-  if (error) {
-    return <Typography color="error">{error.toString()}</Typography>;
-  }
+  const { application, deployment, replica } = useServeReplicaDetails(
+    applicationName,
+    deploymentName,
+    replicaId,
+  );
 
-  if (loading) {
-    return <Loading loading />;
-  } else if (!replica || !deployment || !application) {
+  if (!replica || !deployment || !application) {
     return (
       <Typography color="error">
         {applicationName} / {deploymentName} / {replicaId} not found.
@@ -52,7 +47,6 @@ export const ServeReplicaDetailPage = () => {
     );
   }
 
-  const appName = application.name ? application.name : "-";
   const {
     replica_id,
     state,
@@ -65,18 +59,6 @@ export const ServeReplicaDetailPage = () => {
   } = replica;
   return (
     <div className={classes.root}>
-      <MainNavPageInfo
-        pageInfo={{
-          id: "serveReplicaDetail",
-          title: replica_id,
-          pageTitle: `${replica_id} | Serve Replica`,
-          path: `/serve/applications/${encodeURIComponent(
-            appName,
-          )}/${encodeURIComponent(deployment.name)}/${encodeURIComponent(
-            replica_id,
-          )}`,
-        }}
-      />
       <MetadataSection
         metadataList={[
           {