diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index e78bf77fd1013..4c2a71d3302b7 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -22,6 +22,7 @@
     "@emotion/react": "^11.13.3",
     "@tanstack/react-query": "^5.52.1",
     "@tanstack/react-table": "^8.20.1",
+    "@types/debounce-promise": "^3.1.9",
     "@uiw/codemirror-themes-all": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.5",
     "@visx/group": "^3.12.0",
@@ -31,6 +32,7 @@
     "chakra-react-select": "6.0.0-next.2",
     "chart.js": "^4.4.6",
     "dayjs": "^1.11.13",
+    "debounce-promise": "^3.1.2",
     "elkjs": "^0.9.3",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
diff --git a/airflow/ui/pnpm-lock.yaml b/airflow/ui/pnpm-lock.yaml
index 39b5886f0ab51..54f8983d08125 100644
--- a/airflow/ui/pnpm-lock.yaml
+++ b/airflow/ui/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.20.1
         version: 8.20.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/debounce-promise':
+        specifier: ^3.1.9
+        version: 3.1.9
       '@uiw/codemirror-themes-all':
         specifier: ^4.23.5
         version: 4.23.6(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)
@@ -53,6 +56,9 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      debounce-promise:
+        specifier: ^3.1.2
+        version: 3.1.2
       elkjs:
         specifier: ^0.9.3
         version: 0.9.3
@@ -961,6 +967,9 @@ packages:
   '@types/d3-zoom@3.0.8':
     resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
 
+  '@types/debounce-promise@3.1.9':
+    resolution: {integrity: sha512-awNxydYSU+E2vL7EiOAMtiSOfL5gUM5X4YSE2A92qpxDJQ/rXz6oMPYBFDcDywlUmvIDI6zsqgq17cGm5CITQw==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -1932,6 +1941,9 @@ packages:
   dayjs@1.11.13:
     resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
+  debounce-promise@3.1.2:
+    resolution: {integrity: sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg==}
+
   debug@4.3.6:
     resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
     engines: {node: '>=6.0'}
@@ -4693,6 +4705,8 @@ snapshots:
       '@types/d3-interpolate': 3.0.4
       '@types/d3-selection': 3.0.11
 
+  '@types/debounce-promise@3.1.9': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 0.7.34
@@ -6306,6 +6320,8 @@ snapshots:
 
   dayjs@1.11.13: {}
 
+  debounce-promise@3.1.2: {}
+
   debug@4.3.6:
     dependencies:
       ms: 2.1.2
diff --git a/airflow/ui/src/components/SearchDags/SearchDags.tsx b/airflow/ui/src/components/SearchDags/SearchDags.tsx
new file mode 100644
index 0000000000000..c0861cd34205e
--- /dev/null
+++ b/airflow/ui/src/components/SearchDags/SearchDags.tsx
@@ -0,0 +1,96 @@
+/*!
+ * 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 { Field } from "@chakra-ui/react";
+import { useQueryClient } from "@tanstack/react-query";
+import { AsyncSelect } from "chakra-react-select";
+import type { OptionsOrGroups, GroupBase, SingleValue } from "chakra-react-select";
+import debounce from "debounce-promise";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { UseDagServiceGetDagsKeyFn } from "openapi/queries";
+import { DagService } from "openapi/requests/services.gen";
+import type { DAGCollectionResponse, DAGResponse } from "openapi/requests/types.gen";
+
+import { DropdownIndicator } from "./SearchDagsDropdownIndicator";
+
+export type Option = {
+  label: string;
+  value: string;
+};
+
+export const SearchDags = ({
+  setIsOpen,
+}: {
+  readonly setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const SEARCH_LIMIT = 10;
+
+  const onSelect = (selected: SingleValue<Option>) => {
+    if (selected) {
+      setIsOpen(false);
+      navigate(`/dags/${selected.value}`);
+    }
+  };
+
+  const searchDag = (
+    inputValue: string,
+    callback: (options: OptionsOrGroups<Option, GroupBase<Option>>) => void,
+  ): Promise<OptionsOrGroups<Option, GroupBase<Option>>> =>
+    queryClient.fetchQuery({
+      queryFn: () =>
+        DagService.getDags({
+          dagDisplayNamePattern: inputValue,
+          limit: SEARCH_LIMIT,
+        }).then((data: DAGCollectionResponse) => {
+          const options = data.dags.map((dag: DAGResponse) => ({
+            label: dag.dag_display_name || dag.dag_id,
+            value: dag.dag_id,
+          }));
+
+          callback(options);
+
+          return options;
+        }),
+      queryKey: UseDagServiceGetDagsKeyFn({
+        dagDisplayNamePattern: inputValue,
+      }),
+      staleTime: 0,
+    });
+
+  const searchDagDebounced = debounce(searchDag, 300);
+
+  return (
+    <Field.Root>
+      <AsyncSelect
+        backspaceRemovesValue={true}
+        components={{ DropdownIndicator }}
+        defaultOptions
+        filterOption={undefined}
+        loadOptions={searchDagDebounced}
+        menuIsOpen
+        onChange={onSelect}
+        placeholder="Search Dags"
+        value={null} // null is required https://github.com/JedWatson/react-select/issues/3066
+      />
+    </Field.Root>
+  );
+};
diff --git a/airflow/ui/src/components/SearchDags/SearchDagsButton.tsx b/airflow/ui/src/components/SearchDags/SearchDagsButton.tsx
new file mode 100644
index 0000000000000..942e3e5a848dc
--- /dev/null
+++ b/airflow/ui/src/components/SearchDags/SearchDagsButton.tsx
@@ -0,0 +1,46 @@
+/*!
+ * 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 { Button, Box } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdSearch } from "react-icons/md";
+
+import { Dialog } from "src/components/ui";
+
+import { SearchDags } from "./SearchDags";
+
+export const SearchDagsButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onOpenChange = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Box>
+      <Button justifyContent="flex-start" onClick={() => setIsOpen(true)} variant="subtle" w={200}>
+        <MdSearch /> Search Dags
+      </Button>
+      <Dialog.Root onOpenChange={onOpenChange} open={isOpen} size="sm">
+        <Dialog.Content>
+          <SearchDags setIsOpen={setIsOpen} />
+        </Dialog.Content>
+      </Dialog.Root>
+    </Box>
+  );
+};
diff --git a/airflow/ui/src/components/SearchDags/SearchDagsDropdownIndicator.tsx b/airflow/ui/src/components/SearchDags/SearchDagsDropdownIndicator.tsx
new file mode 100644
index 0000000000000..3e0689cc881fa
--- /dev/null
+++ b/airflow/ui/src/components/SearchDags/SearchDagsDropdownIndicator.tsx
@@ -0,0 +1,29 @@
+/*!
+ * 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 { chakraComponents } from "chakra-react-select";
+import type { DropdownIndicatorProps } from "chakra-react-select";
+import { FiSearch } from "react-icons/fi";
+
+import type { Option } from "./SearchDags";
+
+export const DropdownIndicator: React.FC<DropdownIndicatorProps<Option, false>> = (props) => (
+  <chakraComponents.DropdownIndicator {...props}>
+    <FiSearch />
+  </chakraComponents.DropdownIndicator>
+);
diff --git a/airflow/ui/src/components/SearchDags/index.ts b/airflow/ui/src/components/SearchDags/index.ts
new file mode 100644
index 0000000000000..1cff3cbe900af
--- /dev/null
+++ b/airflow/ui/src/components/SearchDags/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 { SearchDagsButton } from "./SearchDagsButton";
diff --git a/airflow/ui/src/layouts/Details/DetailsLayout.tsx b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
index d5aee2370eeea..6036d6031a443 100644
--- a/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -16,13 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button } from "@chakra-ui/react";
+import { Box, Button, HStack } from "@chakra-ui/react";
 import type { PropsWithChildren } from "react";
 import { FiChevronsLeft } from "react-icons/fi";
 import { Outlet, Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
 import type { DAGResponse } from "openapi/requests/types.gen";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { SearchDagsButton } from "src/components/SearchDags";
 import { ProgressBar } from "src/components/ui";
 import { Toaster } from "src/components/ui";
 import { OpenGroupsProvider } from "src/context/openGroups";
@@ -53,12 +54,15 @@ export const DetailsLayout = ({ children, dag, error, isLoading, tabs }: Props)
   return (
     <OpenGroupsProvider dagId={dagId}>
       <Box>
-        <Button asChild colorPalette="blue" variant="ghost">
-          <RouterLink to="/dags">
-            <FiChevronsLeft />
-            Back to all dags
-          </RouterLink>
-        </Button>
+        <HStack justifyContent="space-between" mb={2}>
+          <Button asChild colorPalette="blue" variant="ghost">
+            <RouterLink to="/dags">
+              <FiChevronsLeft />
+              Back to all dags
+            </RouterLink>
+          </Button>
+          <SearchDagsButton />
+        </HStack>
         <Toaster />
         {children}
         <ErrorAlert error={error} />