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;
+}