diff --git a/client/src/components/Nav/Search-Bar/Form.css b/client/src/components/Nav/Search-Bar/Form.css
index 14d491df..0bb75c90 100644
--- a/client/src/components/Nav/Search-Bar/Form.css
+++ b/client/src/components/Nav/Search-Bar/Form.css
@@ -1,58 +1,90 @@
+.search__form__container {
+  position: relative;
+  width: 80%;
+  margin: auto;
+}
 
 .search__form {
-    width: 80%;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    margin: auto;
-    align-self: center;
-   
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
 }
 
 .search__form__input {
-    width: 100%;
-    height: 45px;
-    /* border-radius: 30px; */
-    outline: none;
-    font-size: .9rem;
-    border-color: #FFE26E;
-    border-style: solid;
-    border-radius: 10px;
-    border-top-right-radius:0;
-    border-bottom-right-radius: 0;
-}
-.search__form__button {
-    height: 45px;
-    width: 50px;
-    background-color: #FFE26E;;
-    color: rgb(0, 0, 0);
-    font-weight: bold;
-    border-color: #FFE26E;
-    border-style: solid;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+  width: 100%;
+  height: 45px;
+  outline: none;
+  padding-left: 25px;
+  font-size: 0.9rem;
+  border-color: #FFE26E;
+  border-style: solid;
+  border-radius: 10px;
 }
 
-.search__icon {
-    height: 50%;
-    width: auto;
+.search__form__button {
+  position: absolute;
+  height: 45px;
+  width: 50px;
+  background-color: #FFE26E;
+  color: rgb(0, 0, 0);
+  right: 0px;
+  font-weight: bold;
+  border-color: #FFE26E;
+  border-style: solid;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 
-input[type="text"]:placeholder-shown{
-    text-align: center;
-    text-overflow: ellipsis !important;
+input[type="text"]:placeholder-shown {
+  text-align: center;
+  padding: 15px;
 }
 
 @media screen and (max-width: 600px) {
-    input[type="text"]:placeholder-shown{
+  .search__form {
+    width: 300px;
+  }
+
+  input[type="text"]:placeholder-shown {
     text-align: start;
     padding: 15px;
+  }
 }
+
+
+.search__tags__box {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: 1px solid #FFE26E;
+  border-radius: 10px;
+  margin-top: 5px;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  gap: 15px;
+}
+
+.search__tag {
+  padding: 6px 12px;
+  background-color: #FFE26E;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.search__tag:hover {
+  background-color: #ffd93a;
 }
 
 
diff --git a/client/src/components/Nav/Search-Bar/Form.js b/client/src/components/Nav/Search-Bar/Form.js
index 6991a40c..4ba981f7 100644
--- a/client/src/components/Nav/Search-Bar/Form.js
+++ b/client/src/components/Nav/Search-Bar/Form.js
@@ -1,33 +1,83 @@
 import SearchIcon from '@mui/icons-material/Search';
 import { useNavigate } from 'react-router-dom';
-import { useState } from 'react';
-import './Form.css'
-import { useContext } from 'react';
+import { useState, useContext } from 'react';
+import './Form.css';
 import { SearchContext } from '../../../Context/SearchContext';
 
+// Suggestion tags
+const tags = [
+  "T-Shirts", "Shirts", "Jeans", "Joggers", "Trousers",
+  "Dresses", "Jumpsuits", "Skirts", "Shorts", "Sweaters",
+  "Hoodies", "Jackets", "Blazers", "Suits", "Track Pants",
+  "Kurtas", "Kurtis", "Sarees", "Lehengas", "Anarkali",
+  "Salwar Suits", "Palazzos", "Denim Jackets", "Crop Tops", "Tank Tops",
+  "Formal Shirts", "Casual Wear", "Ethnic Wear", "Winter Wear", "Summer Wear",
+  "Activewear", "Gym Wear", "Loungewear", "Innerwear", "Sleepwear",
+  "Party Wear", "Workwear", "Co-ords", "Oversized Tees", "Graphic Tees"
+];
+
 const Form = () => {
-    const [ searchInput, setSearchInput] = useState('')
-    const searchContext = useContext(SearchContext)
-    const navigate = useNavigate()
-
-    const handelChange = (e) => {
-        setSearchInput(e.target.value)
-    }
-
-    const handelFormSubmit = (e) => {  
-        e.preventDefault()
-        searchContext.setSearchQuery(searchInput)
-        navigate('/search')
-    }
-
-    return ( 
-            <form className="search__form" onSubmit={handelFormSubmit}>
-                <input type="text"  placeholder='Search for products' className="search__form__input" value={searchInput} onChange={handelChange} required/>
-                <button className="search__form__button" type='submit'>
-                    <SearchIcon fontSize='medium'/>
-                </button>
-            </form>
-     );
-}
- 
+  const [searchInput, setSearchInput] = useState('');
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const searchContext = useContext(SearchContext);
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    setSearchInput(e.target.value);
+  };
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    searchContext.setSearchQuery(searchInput);
+    
+    // Simulate loading delay
+    setTimeout(() => {
+      navigate('/search');
+    }, 1000); // 1 second
+    setShowSuggestions(false);
+  };
+
+  const handleTagClick = (tag) => {
+    setSearchInput(tag);
+    searchContext.setSearchQuery(tag);
+    setTimeout(() => {
+      navigate('/search');
+    }, 1000);
+    setShowSuggestions(false);
+  };
+
+  return (
+    <div className="search__form__container">
+      <form className="search__form" onSubmit={handleFormSubmit}>
+        <input
+          type="text"
+          placeholder="Search for products"
+          className="search__form__input"
+          value={searchInput}
+          onChange={handleChange}
+          onFocus={() => setShowSuggestions(true)}
+          required
+        />
+        <button className="search__form__button" type="submit">
+          <SearchIcon fontSize="medium" />
+        </button>
+      </form>
+
+      {showSuggestions && (
+        <div className="search__tags__box">
+          {tags.map((tag, index) => (
+            <div
+              key={index}
+              className="search__tag"
+              onMouseDown={() => handleTagClick(tag)}
+            >
+              {tag}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default Form;
\ No newline at end of file
diff --git a/client/src/components/Search/index.css b/client/src/components/Search/index.css
index a59ba6a0..b46a512c 100644
--- a/client/src/components/Search/index.css
+++ b/client/src/components/Search/index.css
@@ -1,15 +1,15 @@
-
 .search__container {
-    width: 100%;
-    height: 70vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 100%;
+  height: 70vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column; /* 👈 important for vertical stacking */
 }
 
 .search__container__header {
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
\ No newline at end of file
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/client/src/components/Search/index.js b/client/src/components/Search/index.js
index 32963c4a..34a6bbb2 100644
--- a/client/src/components/Search/index.js
+++ b/client/src/components/Search/index.js
@@ -1,28 +1,51 @@
-import { useEffect } from 'react';
-import { useContext } from 'react';
+import { useEffect, useContext, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SearchContext } from '../../Context/SearchContext';
-import './index.css'
+import './index.css';
+import ReactLoading from 'react-loading';
 
 const Search = () => {
-    const search = useContext(SearchContext)
-    const [ searchParam, setSearchParam ] = useSearchParams()
-
-    const searchQuery = {
-        query: search.searchQuery
-    }
-
-    useEffect(() => {
-        setSearchParam(searchQuery, { replace: true })
-    }, [searchQuery.query])
-
-    return ( 
-        <div className="search__container">
-            <div className="search__container__header">
-                <h1>No results found for "{search.searchQuery}"</h1>
-            </div>
+  const search = useContext(SearchContext);
+  const [searchParam, setSearchParam] = useSearchParams();
+  const [loading, setLoading] = useState(true); 
+
+  useEffect(() => {
+    if (!search.searchQuery) return;
+
+    setLoading(true);
+
+    // Set search param
+    setSearchParam({ query: search.searchQuery }, { replace: true });
+
+    // Simulate delay (e.g., API fetching time)
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [search.searchQuery]); 
+
+  return (
+    <div className="search__container">
+      {loading ? (
+        <ReactLoading
+          type="balls"
+          color="#FFE26E"
+          height={100}
+          width={100}
+          className="m-auto"
+        />
+      ) : (
+        <div className="search__container__header">
+          <h1>No results found for "{search.searchQuery}"</h1>
         </div>
-     );
-}
- 
-export default Search;
\ No newline at end of file
+      )}
+    </div>
+  );
+};
+
+export default Search;
+
+
+
+