Fixed

frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./styles.module.css";
+import SearchIcon from "../icons/search";
+const MobileSearchBar = (props) => {
+  return (
+    <div className={styles.searchBarContainer}>
+      <input type="text" className={styles.searchBar} />
+      <SearchIcon className={styles.searchIcon} />
+    </div>
+  );
+};
+
+export default MobileSearchBar;

frontend/src/app/components/mobileSearchBar/styles.module.css

@@ -0,0 +1,28 @@
+.searchBarContainer {
+  display: flex;
+
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  position: relative;
+}
+.searchBarContainer > input {
+  width: 100%;
+  padding: 11px 12px;
+  padding-left: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.searchIcon {
+  position: absolute;
+}

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -59,13 +59,13 @@ const TopHeader = (props) => {
         <div className={styles.actionBar}>
           {props?.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
-              <SearchBar />
+              {!isMobile && <SearchBar />}
             </div>
           )}
           {props?.requiredButtons.includes("env") && (
             <div className={styles.mngEnvKeyButton}>
               <EnviromentIcon />
-              <p>Manage Env. Key</p>
+              {!isMobile && <p>Manage Env. Key</p>}
             </div>
           )}
           {props?.requiredButtons.includes("add-services") && (

frontend/src/app/components/topHeader/styles.module.css

@@ -169,3 +169,9 @@
   line-height: normal;
   z-index: 13;
 }
+@media (max-width: 768px) {
+  .container {
+    background: #21232f00;
+    padding: 16px;
+  }
+}