diff --git a/frontend/src/app/components/icons/search.jsx b/frontend/src/app/components/icons/search.jsx
index 5212c02..1b4f360 100644
--- a/frontend/src/app/components/icons/search.jsx
+++ b/frontend/src/app/components/icons/search.jsx
@@ -12,7 +12,7 @@ const SearchIcon = (props) => {
     >
       <path
         d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-        stroke="#858699"
+        stroke="currentColor" //858699
         strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx b/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
index 616c8c6..50388d1 100644
--- a/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
+++ b/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
@@ -1,12 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 import SearchIcon from "../icons/search";
+
 const MobileSearchBar = (props) => {
+  const [open, setOpen] = useState(false);
   return (
-    <div className={styles.searchBarContainer}>
-      <input type="text" className={styles.searchBar} />
-      <SearchIcon className={styles.searchIcon} />
-    </div>
+    <form className={styles.searchBarContainer}>
+      <div
+        className={`${styles.searchBarWrapper} ${open ? styles.open : ""}`}
+        onClick={() => setOpen((open) => !open)}
+      >
+        <input type="text" placeholder="Search" className={styles.searchBar} />
+        <SearchIcon className={styles.searchIcon} />
+      </div>
+    </form>
   );
 };
 
diff --git a/frontend/src/app/components/mobileSearchBar/styles.module.css b/frontend/src/app/components/mobileSearchBar/styles.module.css
index 9fbb070..89c1297 100644
--- a/frontend/src/app/components/mobileSearchBar/styles.module.css
+++ b/frontend/src/app/components/mobileSearchBar/styles.module.css
@@ -1,29 +1,62 @@
 .searchBarContainer {
   display: flex;
-
   align-items: center;
   gap: 10px;
   align-self: stretch;
-  position: relative;
 }
-.searchBarContainer > input {
+
+.searchBarWrapper {
+  position: relative;
+  width: 100%;
+  border: 1px solid #31324a00;
+  transition: width 0.35s ease;
+}
+.open {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+}
+
+.searchBar {
   width: 100%;
   padding: 11px 12px;
   padding-left: 40px;
   background-color: transparent;
   border: none;
+  opacity: 0;
+  /* pointer-events: none; */
+  transition: opacity 0.35s ease;
   outline: none;
-  background-color: transparent;
   color: white;
   font-family: Inter;
   font-size: 1.18rem;
-  outline: none;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   caret-color: #575bc7;
 }
+.searchBar::placeholder {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+.open > .searchBar {
+  opacity: 1; /*show input when open*/
+}
 .searchIcon {
   position: absolute;
-  left: 10;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  pointer-events: none; /* so clicking the icon focuses input */
+  color: #858699;
+}
+.searchIcon:hover {
+  color: #959aff;
 }
diff --git a/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx b/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
index 96ff68c..f57638e 100644
--- a/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
+++ b/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import CreateIcon from "../../icons/create";
 import styles from "./styles.module.css";
 import useIsMobile from "@/app/hooks/useIsMobile";
+import SearchIcon from "../../icons/search";
 
 const HeaderDropdown = ({
   setOpen,
@@ -30,7 +31,7 @@ const HeaderDropdown = ({
         </div>
         {/* Search */}
         <div className={styles.srchInputContainer}>
-          <div className={styles.srchInputGroup}>
+          <form className={styles.srchInputGroup}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="18"
@@ -67,7 +68,7 @@ const HeaderDropdown = ({
               id=""
               placeholder="Search"
             />
-          </div>
+          </form>
         </div>
       </div>
 
diff --git a/frontend/src/app/components/navbar/navleft/styles.module.css b/frontend/src/app/components/navbar/navleft/styles.module.css
index 64bde6c..24fdf19 100644
--- a/frontend/src/app/components/navbar/navleft/styles.module.css
+++ b/frontend/src/app/components/navbar/navleft/styles.module.css
@@ -255,7 +255,7 @@
     background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
     border-radius: 0;
     position: fixed;
-    top: 90px;
+    top: 80px;
     left: 0;
     width: 100%;
     margin-top: 0;
diff --git a/frontend/src/app/components/navbar/navright/styles.module.css b/frontend/src/app/components/navbar/navright/styles.module.css
index 5445557..0698060 100644
--- a/frontend/src/app/components/navbar/navright/styles.module.css
+++ b/frontend/src/app/components/navbar/navright/styles.module.css
@@ -169,7 +169,7 @@
     gap: 16px;
     background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
     position: fixed;
-    top: 90px;
+    top: 80px;
     left: 0;
     width: 100%;
     margin-top: 0;
diff --git a/frontend/src/app/components/searchbar/SearchBar.jsx b/frontend/src/app/components/searchbar/SearchBar.jsx
index b465630..cd3f3fe 100644
--- a/frontend/src/app/components/searchbar/SearchBar.jsx
+++ b/frontend/src/app/components/searchbar/SearchBar.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import searchBarStyle from "./styles.module.css";
+import SearchIcon from "../icons/search";
 
 const SearchBar = () => {
   const [open, setOpen] = useState(false);
@@ -19,21 +20,7 @@ const SearchBar = () => {
         className={searchBarStyle.searchBtn}
         onClick={() => setOpen((open) => !open)}
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={24}
-          height={24}
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <path
-            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-            stroke="currentColor"
-            strokeWidth={1.5}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+        <SearchIcon />
       </div>
     </form>
   );
diff --git a/frontend/src/app/components/searchbar/styles.module.css b/frontend/src/app/components/searchbar/styles.module.css
index b4dcc35..86b40ce 100644
--- a/frontend/src/app/components/searchbar/styles.module.css
+++ b/frontend/src/app/components/searchbar/styles.module.css
@@ -10,17 +10,14 @@
   transition: width 0.35s ease;
   position: absolute;
 }
-
 .searchBarContainer:focus-within {
   background: #292a36;
-  background: color(display-p3 0.1608 0.1647 0.2078);
 }
 .open {
   width: 260px;
   padding: 6px 6px 6px 12px;
   justify-content: space-between;
   border: 1px solid #31324a;
-  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
   border-radius: 6px;
 }
 .input {
@@ -31,7 +28,6 @@
   opacity: 0; /*hide input kung collapse*/
   transition: opacity 0.35s ease;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
   font-size: 1.18rem;
   font-style: normal;
@@ -48,7 +44,6 @@
 
 .input::placeholder {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   text-align: start;
   font-family: Inter;
   font-size: 1.18rem;