diff --git a/airflow/ui/src/components/DagRunInfo.tsx b/airflow/ui/src/components/DagRunInfo.tsx
index 0d30e9c7667c4..2cd7cac433721 100644
--- a/airflow/ui/src/components/DagRunInfo.tsx
+++ b/airflow/ui/src/components/DagRunInfo.tsx
@@ -21,10 +21,7 @@ import dayjs from "dayjs";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
-import { Tooltip } from "src/components/ui";
-import { stateColor } from "src/utils/stateColor";
-
-import { StateCircle } from "./StateCircle";
+import { Tooltip, Status } from "src/components/ui";
 
 type Props = {
   readonly dataIntervalEnd?: string | null;
@@ -82,10 +79,7 @@ const DagRunInfo = ({
       <HStack fontSize="sm">
         <Time datetime={dataIntervalStart} showTooltip={false} />
         {state === undefined ? undefined : (
-          <>
-            <StateCircle state={state} />
-            <Text color={stateColor[state]}>{state}</Text>
-          </>
+          <Status state={state}>{state}</Status>
         )}
       </HStack>
     </Tooltip>
diff --git a/airflow/ui/src/components/RunTypeIcon.tsx b/airflow/ui/src/components/RunTypeIcon.tsx
new file mode 100644
index 0000000000000..f465fbf298f2b
--- /dev/null
+++ b/airflow/ui/src/components/RunTypeIcon.tsx
@@ -0,0 +1,48 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { IconBaseProps } from "react-icons";
+import { HiDatabase } from "react-icons/hi";
+import { MdPlayArrow, MdOutlineSchedule } from "react-icons/md";
+import { RiArrowGoBackFill } from "react-icons/ri";
+
+import type { DAGRunResponse } from "openapi/requests/types.gen";
+
+type Props = {
+  readonly runType: DAGRunResponse["run_type"];
+} & IconBaseProps;
+
+const iconStyle = {
+  display: "inline",
+  verticalAlign: "bottom",
+};
+
+export const RunTypeIcon = ({ runType, ...rest }: Props) => {
+  switch (runType) {
+    case "asset_triggered":
+      return <HiDatabase style={iconStyle} {...rest} />;
+    case "backfill":
+      return <RiArrowGoBackFill style={iconStyle} {...rest} />;
+    case "manual":
+      return <MdPlayArrow style={iconStyle} {...rest} />;
+    case "scheduled":
+      return <MdOutlineSchedule style={iconStyle} {...rest} />;
+    default:
+      return undefined;
+  }
+};
diff --git a/airflow/ui/src/components/TimeRangeSelector.tsx b/airflow/ui/src/components/TimeRangeSelector.tsx
index 8ce7bef53a871..93f8d7674deb5 100644
--- a/airflow/ui/src/components/TimeRangeSelector.tsx
+++ b/airflow/ui/src/components/TimeRangeSelector.tsx
@@ -39,7 +39,6 @@ type Props = {
 const defaultTimeOptions = createListCollection({
   items: [
     { label: "Last 1 hour", value: "1" },
-    { label: "Last 8 hours", value: "8" },
     { label: "Last 12 hours", value: "12" },
     { label: "Last 24 hours", value: "24" },
     { label: "Last week", value: "168" },
diff --git a/airflow/ui/src/components/TrendCountButton.tsx b/airflow/ui/src/components/TrendCountButton.tsx
new file mode 100644
index 0000000000000..18dcfa7241d3a
--- /dev/null
+++ b/airflow/ui/src/components/TrendCountButton.tsx
@@ -0,0 +1,70 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { HStack, Badge, Text, Skeleton } from "@chakra-ui/react";
+import { Link, type To } from "react-router-dom";
+
+import { pluralize } from "src/utils";
+
+import { TrendCountChart, type ChartEvent } from "./TrendCountChart";
+
+type Props = {
+  readonly colorPalette: string;
+  readonly count: number;
+  readonly endDate: string;
+  readonly events: Array<ChartEvent>;
+  readonly isLoading?: boolean;
+  readonly label: string;
+  readonly route: To;
+  readonly startDate: string;
+};
+
+export const TrendCountButton = ({
+  colorPalette,
+  count,
+  endDate,
+  events,
+  isLoading,
+  label,
+  route,
+  startDate,
+}: Props) => {
+  if (count === 0 && !isLoading) {
+    return undefined;
+  }
+
+  return isLoading ? (
+    <Skeleton borderRadius={4} height="45px" width="350px" />
+  ) : (
+    <Link to={route}>
+      <HStack borderRadius={4} borderWidth={1} p={3} width="max-content">
+        <Badge borderRadius="50%" colorPalette={colorPalette} variant="solid">
+          {count}
+        </Badge>
+        <Text fontSize="sm" fontWeight="bold">
+          {pluralize(label, count, undefined, true)}
+        </Text>
+        <TrendCountChart
+          endDate={endDate}
+          events={events}
+          startDate={startDate}
+        />
+      </HStack>
+    </Link>
+  );
+};
diff --git a/airflow/ui/src/pages/DagsList/Dag/Overview/Chart.tsx b/airflow/ui/src/components/TrendCountChart.tsx
similarity index 94%
rename from airflow/ui/src/pages/DagsList/Dag/Overview/Chart.tsx
rename to airflow/ui/src/components/TrendCountChart.tsx
index b67796a7a684f..0e7c011499276 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Overview/Chart.tsx
+++ b/airflow/ui/src/components/TrendCountChart.tsx
@@ -42,10 +42,10 @@ ChartJS.register(
   Tooltip,
 );
 
-type Event = { timestamp: string };
+export type ChartEvent = { timestamp: string };
 
 const aggregateEventsIntoIntervals = (
-  events: Array<Event>,
+  events: Array<ChartEvent>,
   startDate: string,
   endDate: string,
 ) => {
@@ -103,11 +103,11 @@ const options = {
 
 type Props = {
   readonly endDate: string;
-  readonly events: Array<Event>;
+  readonly events: Array<ChartEvent>;
   readonly startDate: string;
 };
 
-export const Chart = ({ endDate, events, startDate }: Props) => {
+export const TrendCountChart = ({ endDate, events, startDate }: Props) => {
   const { colorMode } = useColorMode();
   const chartRef = useRef<ChartJS<"line">>();
 
diff --git a/airflow/ui/src/components/ui/Status.tsx b/airflow/ui/src/components/ui/Status.tsx
new file mode 100644
index 0000000000000..7c408b931d378
--- /dev/null
+++ b/airflow/ui/src/components/ui/Status.tsx
@@ -0,0 +1,45 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Status as ChakraStatus } from "@chakra-ui/react";
+import * as React from "react";
+
+import type {
+  DagRunState,
+  TaskInstanceState,
+} from "openapi/requests/types.gen";
+import { stateColor } from "src/utils/stateColor";
+
+type StatusValue = DagRunState | TaskInstanceState;
+
+export type StatusProps = {
+  state?: StatusValue;
+} & ChakraStatus.RootProps;
+
+export const Status = React.forwardRef<HTMLDivElement, StatusProps>(
+  ({ children, state, ...rest }, ref) => {
+    const colorPalette = state === undefined ? "info" : stateColor[state];
+
+    return (
+      <ChakraStatus.Root ref={ref} {...rest}>
+        <ChakraStatus.Indicator bg={colorPalette} />
+        {children}
+      </ChakraStatus.Root>
+    );
+  },
+);
diff --git a/airflow/ui/src/components/ui/index.ts b/airflow/ui/src/components/ui/index.ts
index f596effa12a93..b6fa2898e9e72 100644
--- a/airflow/ui/src/components/ui/index.ts
+++ b/airflow/ui/src/components/ui/index.ts
@@ -31,3 +31,4 @@ export * from "./Tooltip";
 export * from "./ProgressBar";
 export * from "./Menu";
 export * from "./Accordion";
+export * from "./Status";
diff --git a/airflow/ui/src/main.tsx b/airflow/ui/src/main.tsx
index 524efdb6695ce..964e6e32b9b5a 100644
--- a/airflow/ui/src/main.tsx
+++ b/airflow/ui/src/main.tsx
@@ -19,6 +19,7 @@
 import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import axios, { type AxiosError } from "axios";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 
@@ -61,13 +62,15 @@ axios.interceptors.response.use(
 );
 
 createRoot(document.querySelector("#root") as HTMLDivElement).render(
-  <ChakraProvider value={defaultSystem}>
-    <ColorModeProvider>
-      <QueryClientProvider client={queryClient}>
-        <TimezoneProvider>
-          <RouterProvider router={router} />
-        </TimezoneProvider>
-      </QueryClientProvider>
-    </ColorModeProvider>
-  </ChakraProvider>,
+  <StrictMode>
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider>
+        <QueryClientProvider client={queryClient}>
+          <TimezoneProvider>
+            <RouterProvider router={router} />
+          </TimezoneProvider>
+        </QueryClientProvider>
+      </ColorModeProvider>
+    </ChakraProvider>
+  </StrictMode>,
 );
diff --git a/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx b/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx
index be94a01d8edc2..dfe118bd18e10 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Overview/Overview.tsx
@@ -16,19 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, HStack, Badge, Text, Skeleton } from "@chakra-ui/react";
+import { Box, HStack } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
-import { useTaskInstanceServiceGetTaskInstances } from "openapi/queries";
+import {
+  useDagRunServiceGetDagRuns,
+  useTaskInstanceServiceGetTaskInstances,
+} from "openapi/queries";
 import TimeRangeSelector from "src/components/TimeRangeSelector";
-import { pluralize } from "src/utils";
+import { TrendCountButton } from "src/components/TrendCountButton";
 import { stateColor } from "src/utils/stateColor";
 
-import { Chart } from "./Chart";
-
-const defaultHour = "8";
+const defaultHour = "12";
 
 export const Overview = () => {
   const { dagId } = useParams();
@@ -48,7 +49,13 @@ export const Overview = () => {
       state: ["failed"],
     });
 
-  const location = useLocation();
+  const { data: failedRuns, isLoading: isLoadingRuns } =
+    useDagRunServiceGetDagRuns({
+      dagId: dagId ?? "",
+      logicalDateGte: startDate,
+      logicalDateLte: endDate,
+      state: ["failed"],
+    });
 
   // TODO actually link to task instances list
   return (
@@ -62,35 +69,38 @@ export const Overview = () => {
           startDate={startDate}
         />
       </Box>
-      {failedTasks?.total_entries !== undefined &&
-      failedTasks.total_entries > 0 ? (
-        // TODO: make sure url params pass correctly
-        <Link to={`${location.pathname}/tasks?state=failed`}>
-          <HStack borderRadius={4} borderWidth={1} p={3} width="max-content">
-            <Badge
-              borderRadius="50%"
-              colorPalette={stateColor.failed}
-              variant="solid"
-            >
-              {failedTasks.total_entries}
-            </Badge>
-            <Text fontSize="sm" fontWeight="bold">
-              Failed{" "}
-              {pluralize("Task", failedTasks.total_entries, undefined, true)}
-            </Text>
-            <Chart
-              endDate={endDate}
-              events={failedTasks.task_instances.map((ti) => ({
-                timestamp: ti.start_date ?? ti.logical_date,
-              }))}
-              startDate={startDate}
-            />
-          </HStack>
-        </Link>
-      ) : undefined}
-      {isLoading ? (
-        <Skeleton borderRadius={4} height="45px" width="350px" />
-      ) : undefined}
+      <HStack>
+        <TrendCountButton
+          colorPalette={stateColor.failed}
+          count={failedTasks?.total_entries ?? 0}
+          endDate={endDate}
+          events={(failedTasks?.task_instances ?? []).map((ti) => ({
+            timestamp: ti.start_date ?? ti.logical_date,
+          }))}
+          isLoading={isLoading}
+          label="Failed Task"
+          route={{
+            pathname: "tasks",
+            search: "state=failed",
+          }}
+          startDate={startDate}
+        />
+        <TrendCountButton
+          colorPalette={stateColor.failed}
+          count={failedRuns?.total_entries ?? 0}
+          endDate={endDate}
+          events={(failedRuns?.dag_runs ?? []).map((dr) => ({
+            timestamp: dr.start_date ?? dr.logical_date ?? "",
+          }))}
+          isLoading={isLoadingRuns}
+          label="Failed Run"
+          route={{
+            pathname: "runs",
+            search: "state=failed",
+          }}
+          startDate={startDate}
+        />
+      </HStack>
     </Box>
   );
 };
diff --git a/airflow/ui/src/pages/DagsList/Dag/Runs/Runs.tsx b/airflow/ui/src/pages/DagsList/Dag/Runs/Runs.tsx
new file mode 100644
index 0000000000000..02c157d90576a
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/Dag/Runs/Runs.tsx
@@ -0,0 +1,197 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  Box,
+  createListCollection,
+  Flex,
+  HStack,
+  Link,
+  type SelectValueChangeDetails,
+  Text,
+} from "@chakra-ui/react";
+import type { ColumnDef } from "@tanstack/react-table";
+import dayjs from "dayjs";
+import { useCallback } from "react";
+import {
+  useParams,
+  Link as RouterLink,
+  useSearchParams,
+} from "react-router-dom";
+
+import { useDagRunServiceGetDagRuns } from "openapi/queries";
+import type { DAGRunResponse, DagRunState } from "openapi/requests/types.gen";
+import { DataTable } from "src/components/DataTable";
+import { useTableURLState } from "src/components/DataTable/useTableUrlState";
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { RunTypeIcon } from "src/components/RunTypeIcon";
+import Time from "src/components/Time";
+import { Select, Status } from "src/components/ui";
+import { capitalize } from "src/utils";
+
+const columns: Array<ColumnDef<DAGRunResponse>> = [
+  {
+    accessorKey: "run_id",
+    cell: ({ row: { original } }) => (
+      <Link asChild color="fg.info" fontWeight="bold">
+        <RouterLink to={`/dags/${original.dag_id}/runs/${original.dag_run_id}`}>
+          {original.dag_run_id}
+        </RouterLink>
+      </Link>
+    ),
+    enableSorting: false,
+    header: "Run ID",
+  },
+  {
+    accessorKey: "state",
+    cell: ({
+      row: {
+        original: { state },
+      },
+    }) => <Status state={state}>{state}</Status>,
+    header: () => "State",
+  },
+  {
+    accessorKey: "run_type",
+    cell: ({ row: { original } }) => (
+      <HStack>
+        <RunTypeIcon runType={original.run_type} />
+        <Text>{original.run_type}</Text>
+      </HStack>
+    ),
+    enableSorting: false,
+    header: "Run Type",
+  },
+  {
+    accessorKey: "start_date",
+    cell: ({ row: { original } }) => <Time datetime={original.start_date} />,
+    header: "Start Date",
+  },
+  {
+    accessorKey: "end_date",
+    cell: ({ row: { original } }) => <Time datetime={original.end_date} />,
+    header: "End Date",
+  },
+  {
+    cell: ({ row: { original } }) =>
+      `${dayjs.duration(dayjs(original.end_date).diff(original.start_date)).asSeconds().toFixed(2)}s`,
+    header: "Duration",
+  },
+];
+
+const stateOptions = createListCollection({
+  items: [
+    { label: "All States", value: "all" },
+    { label: "Queued", value: "queued" },
+    { label: "Running", value: "running" },
+    { label: "Failed", value: "failed" },
+    { label: "Success", value: "success" },
+  ],
+});
+
+const STATE_PARAM = "state";
+
+export const Runs = () => {
+  const { dagId } = useParams();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { setTableURLState, tableURLState } = useTableURLState();
+  const { pagination, sorting } = tableURLState;
+  const [sort] = sorting;
+  const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined;
+
+  const filteredState = searchParams.get(STATE_PARAM);
+
+  const { data, error, isFetching, isLoading } = useDagRunServiceGetDagRuns({
+    dagId: dagId ?? "~",
+    limit: pagination.pageSize,
+    offset: pagination.pageIndex * pagination.pageSize,
+    orderBy,
+    state: filteredState === null ? undefined : [filteredState],
+  });
+
+  const handleStateChange = useCallback(
+    ({ value }: SelectValueChangeDetails<string>) => {
+      const [val] = value;
+
+      if (val === undefined || val === "all") {
+        searchParams.delete(STATE_PARAM);
+      } else {
+        searchParams.set(STATE_PARAM, val);
+      }
+      setSearchParams(searchParams);
+      setTableURLState({
+        pagination: { ...pagination, pageIndex: 0 },
+        sorting,
+      });
+    },
+    [pagination, searchParams, setSearchParams, setTableURLState, sorting],
+  );
+
+  return (
+    <Box pt={4}>
+      <Flex>
+        <Select.Root
+          collection={stateOptions}
+          maxW="200px"
+          onValueChange={handleStateChange}
+          value={[filteredState ?? "all"]}
+        >
+          <Select.Trigger colorPalette="blue" isActive={Boolean(filteredState)}>
+            <Select.ValueText width={20}>
+              {() =>
+                filteredState === null ? (
+                  "All States"
+                ) : (
+                  <Status state={filteredState as DagRunState}>
+                    {capitalize(filteredState)}
+                  </Status>
+                )
+              }
+            </Select.ValueText>
+          </Select.Trigger>
+          <Select.Content>
+            {stateOptions.items.map((option) => (
+              <Select.Item item={option} key={option.label}>
+                {option.value === "all" ? (
+                  option.label
+                ) : (
+                  <Status state={option.value as DagRunState}>
+                    {option.label}
+                  </Status>
+                )}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+      </Flex>
+      <DataTable
+        columns={columns}
+        data={data?.dag_runs ?? []}
+        errorMessage={<ErrorAlert error={error} />}
+        initialState={tableURLState}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        modelName="Dag Run"
+        onStateChange={setTableURLState}
+        total={data?.total_entries}
+      />
+    </Box>
+  );
+};
diff --git a/airflow/ui/src/components/StateCircle.tsx b/airflow/ui/src/pages/DagsList/Dag/Runs/index.ts
similarity index 67%
rename from airflow/ui/src/components/StateCircle.tsx
rename to airflow/ui/src/pages/DagsList/Dag/Runs/index.ts
index 50a2310a0ffc8..04ea8727764fb 100644
--- a/airflow/ui/src/components/StateCircle.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Runs/index.ts
@@ -16,23 +16,5 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, type BoxProps } from "@chakra-ui/react";
 
-import type { TaskInstanceState } from "openapi/requests/types.gen";
-import { stateColor } from "src/utils/stateColor";
-
-export const StateCircle = ({
-  state,
-  ...rest
-}: {
-  readonly state: TaskInstanceState;
-} & BoxProps) => (
-  <Box
-    {...rest}
-    bg={stateColor[state]}
-    borderRadius="50%"
-    h={2}
-    minW={2}
-    w={2}
-  />
-);
+export * from "./Runs";
diff --git a/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx b/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx
index c2d0c4d2c40c4..e3447051dbf25 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Tabs.tsx
@@ -16,13 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Tabs } from "@chakra-ui/react";
-import {
-  Link as RouterLink,
-  useLocation,
-  useParams,
-  useSearchParams,
-} from "react-router-dom";
+import { Button, Center, Flex } from "@chakra-ui/react";
+import { NavLink, useSearchParams } from "react-router-dom";
 
 import type { DAGResponse } from "openapi/requests/types.gen";
 import { DagIcon } from "src/assets/DagIcon";
@@ -30,12 +25,11 @@ import { capitalize } from "src/utils";
 
 import { DagVizModal } from "./DagVizModal";
 
-const tabs = ["runs", "tasks", "events", "code"];
+const tabs = ["overview", "runs", "tasks", "events", "code"];
 
 const MODAL = "modal";
 
 export const DagTabs = ({ dag }: { readonly dag?: DAGResponse }) => {
-  const { dagId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const modal = searchParams.get(MODAL);
@@ -51,35 +45,41 @@ export const DagTabs = ({ dag }: { readonly dag?: DAGResponse }) => {
     setSearchParams(searchParams);
   };
 
-  const { pathname } = useLocation();
-
-  const activeTab =
-    tabs.find((tab) => pathname.endsWith(`/${tab}`)) ?? "overview";
-
   return (
     <>
-      <Tabs.Root value={activeTab}>
-        <Tabs.List justifyContent="space-between" position="relative">
-          <Flex>
-            <Tabs.Trigger asChild value="overview">
-              <RouterLink to={`/dags/${dagId}`}>Overview</RouterLink>
-            </Tabs.Trigger>
-            {tabs.map((tab) => (
-              <Tabs.Trigger asChild key={tab} value={tab}>
-                <RouterLink to={`/dags/${dagId}/${tab}`}>
+      <Flex
+        alignItems="center"
+        borderBottomWidth={1}
+        justifyContent="space-between"
+      >
+        <Flex>
+          {tabs.map((tab) => (
+            <NavLink end key={tab} to={tab === "overview" ? "" : tab}>
+              {({ isActive }) => (
+                <Center
+                  borderBottomColor="border.info"
+                  borderBottomWidth={isActive ? 3 : 0}
+                  fontWeight={isActive ? "bold" : undefined}
+                  height="40px"
+                  mb="-2px" // Show the border on top of its parent's border
+                  pb={isActive ? 0 : "3px"}
+                  px={2}
+                  transition="all 0.2s ease"
+                  width="100px"
+                >
                   {capitalize(tab)}
-                </RouterLink>
-              </Tabs.Trigger>
-            ))}
-          </Flex>
-          <Flex alignSelf="flex-end">
-            <Button colorPalette="blue" onClick={onOpen} variant="ghost">
-              <DagIcon height={5} width={5} />
-              Graph
-            </Button>
-          </Flex>
-        </Tabs.List>
-      </Tabs.Root>
+                </Center>
+              )}
+            </NavLink>
+          ))}
+        </Flex>
+        <Flex alignSelf="flex-end">
+          <Button colorPalette="blue" onClick={onOpen} variant="ghost">
+            <DagIcon height={5} width={5} />
+            Graph
+          </Button>
+        </Flex>
+      </Flex>
       <DagVizModal
         dagDisplayName={dag?.dag_display_name ?? "graph"}
         onClose={onClose}
diff --git a/airflow/ui/src/pages/DagsList/DagsFilters.tsx b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
index fbce68971b27c..94cca4d5ee28f 100644
--- a/airflow/ui/src/pages/DagsList/DagsFilters.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
@@ -32,8 +32,7 @@ import { useSearchParams } from "react-router-dom";
 import { useDagServiceGetDagTags } from "openapi/queries";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { QuickFilterButton } from "src/components/QuickFilterButton";
-import { StateCircle } from "src/components/StateCircle";
-import { Select } from "src/components/ui";
+import { Select, Status } from "src/components/ui";
 import {
   SearchParamsKeys,
   type SearchParamsKeysType,
@@ -164,24 +163,21 @@ export const DagsFilters = () => {
             onClick={handleStateChange}
             value="failed"
           >
-            <StateCircle state="failed" />
-            Failed
+            <Status state="failed">Failed</Status>
           </QuickFilterButton>
           <QuickFilterButton
             isActive={isRunning}
             onClick={handleStateChange}
             value="running"
           >
-            <StateCircle state="running" />
-            Running
+            <Status state="running">Running</Status>
           </QuickFilterButton>
           <QuickFilterButton
             isActive={isSuccess}
             onClick={handleStateChange}
             value="success"
           >
-            <StateCircle state="success" />
-            Success
+            <Status state="success">Success</Status>
           </QuickFilterButton>
         </HStack>
         <Select.Root
diff --git a/airflow/ui/src/pages/DagsList/Run/Run.tsx b/airflow/ui/src/pages/DagsList/Run/Run.tsx
new file mode 100644
index 0000000000000..4011eeda3cbd2
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/Run/Run.tsx
@@ -0,0 +1,57 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Button, Heading } from "@chakra-ui/react";
+import { FiChevronsLeft } from "react-icons/fi";
+import { useParams, Link as RouterLink } from "react-router-dom";
+
+import { useDagRunServiceGetDagRun } from "openapi/queries";
+import { ErrorAlert } from "src/components/ErrorAlert";
+import { ProgressBar, Status } from "src/components/ui";
+
+export const Run = () => {
+  const { dagId = "", runId = "" } = useParams();
+
+  const {
+    data: dagRun,
+    error,
+    isLoading,
+  } = useDagRunServiceGetDagRun({
+    dagId,
+    dagRunId: runId,
+  });
+
+  return (
+    <Box>
+      <Button asChild colorPalette="blue" variant="ghost">
+        <RouterLink to={`/dags/${dagId}`}>
+          <FiChevronsLeft />
+          Back to Dag
+        </RouterLink>
+      </Button>
+      <Heading>
+        {dagId}.{runId}
+      </Heading>
+      <ErrorAlert error={error} />
+      <ProgressBar size="xs" visibility={isLoading ? "visible" : "hidden"} />
+      {dagRun === undefined ? undefined : (
+        <Status state={dagRun.state}>{dagRun.state}</Status>
+      )}
+    </Box>
+  );
+};
diff --git a/airflow/ui/src/pages/DagsList/Run/index.ts b/airflow/ui/src/pages/DagsList/Run/index.ts
new file mode 100644
index 0000000000000..824441d6d7241
--- /dev/null
+++ b/airflow/ui/src/pages/DagsList/Run/index.ts
@@ -0,0 +1,20 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from "./Run";
diff --git a/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx b/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
index 7d1037cbeb0d9..feb6ffeeb0b0d 100644
--- a/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
+++ b/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
@@ -28,7 +28,7 @@ import { DagRunMetrics } from "./DagRunMetrics";
 import { MetricSectionSkeleton } from "./MetricSectionSkeleton";
 import { TaskInstanceMetrics } from "./TaskInstanceMetrics";
 
-const defaultHour = "8";
+const defaultHour = "12";
 
 export const HistoricalMetrics = () => {
   const now = dayjs();
diff --git a/airflow/ui/src/router.tsx b/airflow/ui/src/router.tsx
index ae33b021d211d..6c5081c35e2b4 100644
--- a/airflow/ui/src/router.tsx
+++ b/airflow/ui/src/router.tsx
@@ -18,15 +18,16 @@
  */
 import { createBrowserRouter } from "react-router-dom";
 
+import { BaseLayout } from "src/layouts/BaseLayout";
 import { DagsList } from "src/pages/DagsList";
+import { Dag } from "src/pages/DagsList/Dag";
+import { Code } from "src/pages/DagsList/Dag/Code";
+import { Overview } from "src/pages/DagsList/Dag/Overview";
+import { Runs } from "src/pages/DagsList/Dag/Runs";
+import { Run } from "src/pages/DagsList/Run";
 import { Dashboard } from "src/pages/Dashboard";
-
-import { BaseLayout } from "./layouts/BaseLayout";
-import { Dag } from "./pages/DagsList/Dag";
-import { Code } from "./pages/DagsList/Dag/Code";
-import { Overview } from "./pages/DagsList/Dag/Overview";
-import { ErrorPage } from "./pages/Error";
-import { Events } from "./pages/Events";
+import { ErrorPage } from "src/pages/Error";
+import { Events } from "src/pages/Events";
 
 export const router = createBrowserRouter(
   [
@@ -46,8 +47,8 @@ export const router = createBrowserRouter(
         },
         {
           children: [
-            { element: <Overview />, path: "" },
-            { element: <div>Runs</div>, path: "runs" },
+            { element: <Overview />, index: true },
+            { element: <Runs />, path: "runs" },
             { element: <div>Tasks</div>, path: "tasks" },
             { element: <Events />, path: "events" },
             { element: <Code />, path: "code" },
@@ -55,6 +56,7 @@ export const router = createBrowserRouter(
           element: <Dag />,
           path: "dags/:dagId",
         },
+        { element: <Run />, path: "dags/:dagId/runs/:runId" },
       ],
       element: <BaseLayout />,
       errorElement: (