diff --git a/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss b/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss
index 27e6fb46..63a7a130 100644
--- a/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss
+++ b/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss
@@ -1,9 +1,17 @@
 .fsb {
 	position: absolute;
 	top: var(--bt-size-8);
-	right: 200px;
-	padding: var(--bt-size-4) 0 var(--bt-size-4) 0;
+	right: 150px;
+	padding: var(--bt-size-4);
 	border-radius: var(--bt-size-10);
 	z-index: var(--bt-z-index-dropdown);
 	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+@media screen and (max-width: 550px) {
+	.fsb {
+		display: none;
+	}
 }
diff --git a/ui/src/components/Layouts/FloatingSearchBar/index.tsx b/ui/src/components/Layouts/FloatingSearchBar/index.tsx
index f602cdbf..ff48e4c1 100644
--- a/ui/src/components/Layouts/FloatingSearchBar/index.tsx
+++ b/ui/src/components/Layouts/FloatingSearchBar/index.tsx
@@ -1,9 +1,17 @@
-import { Input } from "antd";
+import { Input, theme } from "antd";
 import style from "./FloatingSearchBar.module.scss";
 import Icon from "components/General/Icon";
 const FloatingSearchBar = () => {
+	const {
+		token: { colorBgContainer },
+	} = theme.useToken();
 	return (
-		<div className={style.fsb}>
+		<div
+			className={style.fsb}
+			style={{
+				backgroundColor: colorBgContainer,
+			}}
+		>
 			<Input
 				addonBefore={<Icon name="Search" />}
 				addonAfter={<>cmd + k</>}