diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index b6f8daa3..a54ff30c 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -6,6 +6,7 @@ import FloatingHeader from "components/Layouts/FloatingHeader";
 import CookieConsent from "pages/Footer/CookieConsent";
 import useTheme from "lib/utils/hooks/useTheme";
 import PopupSearch from "components/General/PopupSearch";
+import FloatingSearchBar from "components/Layouts/FloatingSearchBar";
 
 const { Content } = Layout;
 
@@ -20,6 +21,7 @@ const App: React.FC = () => {
 						<Sidebar />
 						<Layout>
 							<Content>
+								<FloatingSearchBar />
 								<FloatingHeader />
 								<RoutesWithPageTitle />
 							</Content>
diff --git a/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss b/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss
new file mode 100644
index 00000000..27e6fb46
--- /dev/null
+++ b/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss
@@ -0,0 +1,9 @@
+.fsb {
+	position: absolute;
+	top: var(--bt-size-8);
+	right: 200px;
+	padding: var(--bt-size-4) 0 var(--bt-size-4) 0;
+	border-radius: var(--bt-size-10);
+	z-index: var(--bt-z-index-dropdown);
+	display: flex;
+}
diff --git a/ui/src/components/Layouts/FloatingSearchBar/index.tsx b/ui/src/components/Layouts/FloatingSearchBar/index.tsx
new file mode 100644
index 00000000..f602cdbf
--- /dev/null
+++ b/ui/src/components/Layouts/FloatingSearchBar/index.tsx
@@ -0,0 +1,16 @@
+import { Input } from "antd";
+import style from "./FloatingSearchBar.module.scss";
+import Icon from "components/General/Icon";
+const FloatingSearchBar = () => {
+	return (
+		<div className={style.fsb}>
+			<Input
+				addonBefore={<Icon name="Search" />}
+				addonAfter={<>cmd + k</>}
+				placeholder="Search..."
+			/>
+		</div>
+	);
+};
+
+export default FloatingSearchBar;