diff --git a/src/components/SearchWithSuggestion/index.js b/src/components/SearchWithSuggestion/index.js
new file mode 100644
index 0000000..3515a66
--- /dev/null
+++ b/src/components/SearchWithSuggestion/index.js
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import _ from "lodash";
+
+const langDetector = (lang, option1, option2) => {
+  return lang === "fa" ? option1 : option2;
+};
+
+export default function PopularSearch(props) {
+  const [value, setValue] = useState("");
+  const [popularsToggle, setPopularsToggle] = useState(false);
+  const { lang, theme, populars } = props;
+
+  const onChange = (val) => {
+    setValue(val);
+  };
+
+  return (
+    <div
+      className={_.join(
+        ["flex flex-col relative search my-2", langDetector(lang, "fa", "en")],
+        " "
+      )}
+    >
+      <input
+        type="search"
+        className="transition py-2 pr-4  pl-14 mx-0 border rounded-md outline-none focus:ring-1 placeholder-gray-500 placeholder-opacity-40 focus:placeholder-blue-300"
+        onChange={(e) => onChange(e.target.value)}
+        value={value}
+        placeholder={langDetector(
+          lang,
+          "نام کالا را جستجو کنید",
+          "search product name"
+        )}
+        onFocus={() => setPopularsToggle(true)}
+        onBlur={() =>
+          setTimeout(() => {
+            setPopularsToggle(false);
+          }, 250)
+        }
+      />
+      <img
+        src={searchIcon}
+        alt={langDetector(lang, "جستجو", "search")}
+        className={_.join(
+          [
+            "search__icon absolute w-6 h-6 top-1/2 transform -translate-y-1/2",
+            langDetector(lang, "left-3", "right-3"),
+          ],
+          " "
+        )}
+      />
+      <div
+        className={_.join(
+          [
+            "search__populars w-full mt-0 border rounded-md top-12 left-0 absolute z-10 px-4 bg-white",
+            popularsToggle ? "flex flex-col" : "hidden",
+            "transition",
+          ],
+          " "
+        )}
+      >
+        <strong className="py-3">
+          {langDetector(lang, "جستجوهای پرطرفدار", "Popular search")}
+        </strong>
+        <ul className="divide-y divide-gray-200">
+          {populars?.map((item, i) => (
+            <>
+              <li
+                key={i}
+                className="transition py-3 px-1 hover:bg-blue-100"
+                onClick={() => setValue(() => item)}
+              >
+                {item}
+              </li>
+            </>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+PopularSearch.defaultProps = {
+  lang: "fa",
+  theme: "light",
+  populars: ["علی", "علیرضا", "محمد", "محمدرضا"],
+  searchIcon: "images/SearchWithSuggestionsearch.png",
+};