diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index 99ac0bb..20fcaa3 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -10,9 +10,13 @@ import { FileInterface } from "../../types/file";
 import classNames from "classnames";
 import { closeDrawer } from "../../reducers/leftSection";
 import { setPopupSelect } from "../../reducers/selected";
+import CloseIcon from "../../icons/CloseIcon";
+import Spinner from "../Spinner/Spinner";
+import SearchIcon from "../../icons/SearchIcon";
 
 const SearchBar = memo(() => {
   const [searchText, setSearchText] = useState("");
+  const [showSuggestions, setShowSuggestions] = useState(false);
   const dispatch = useAppDispatch();
   const [debouncedSearchText, setDebouncedSearchText] = useState("");
   const { data: searchSuggestions, isLoading: isLoadingSearchSuggestions } =
@@ -39,6 +43,7 @@ const SearchBar = memo(() => {
 
   const outOfContainerClick = useCallback(() => {
     closeDrawer();
+    setShowSuggestions(false);
   }, []);
 
   const { wrapperRef } = useClickOutOfBounds(outOfContainerClick);
@@ -87,6 +92,7 @@ const SearchBar = memo(() => {
 
   const onFocus = () => {
     dispatch(closeDrawer());
+    setShowSuggestions(true);
   };
 
   const searchTextPlaceholder = useMemo(() => {
@@ -106,32 +112,30 @@ const SearchBar = memo(() => {
       // @ts-ignore
       ref={wrapperRef}
     >
-      <a
-        href="#"
-        className={classNames(
-          "absolute",
-          !isLoadingSearchSuggestions ? "left-[15px]" : "left-[5px]"
+      <div className="absolute left-1">
+        {searchText.length !== 0 && !isLoadingSearchSuggestions && (
+          <CloseIcon
+            className="w-5 h-5 ml-3 cursor-pointer text-primary hover:text-primary-hover"
+            onClick={resetState}
+          />
         )}
-      >
-        {isLoadingSearchSuggestions ? (
-          <div className="spinner-small"></div>
-        ) : (
-          <img src="/assets/searchicon.svg" alt="search" />
-        )}
-      </a>
+        {isLoadingSearchSuggestions && <div className="spinner-small"></div>}
+        {searchText.length === 0 && <SearchIcon className="w-5 h-5 ml-3" />}
+      </div>
       <input
         type="text"
         onChange={onChangeSearch}
         value={searchText}
         placeholder={searchTextPlaceholder}
-        className="w-full min-h-[42px] border border-[#BEC9D3] pl-[45px] pr-[15px] text-[16px] text-black rounded-[5px]"
+        className="w-full h-10 border border-gray-300 pl-11 pr-4 text-base text-black rounded-md"
         onFocus={onFocus}
         id="search-bar"
+        autoComplete="off"
       />
       <div
-        className="absolute left-0 bg-white shadow-xl rounded-[4px] w-full top-[42px] max-h-[400px] overflow-y-scroll border border-[#BEC9D3]"
+        className="absolute left-0 top-10 bg-white shadow-xl rounded-md w-full max-h-[400px] overflow-y-scroll border border-gray-secondary"
         style={
-          debouncedSearchText.length !== 0 && !isLoadingSearchSuggestions
+          debouncedSearchText.length !== 0 && showSuggestions
             ? { display: "block" }
             : { display: "none" }
         }
diff --git a/src/components/SearchBarItem/SearchBarItem.tsx b/src/components/SearchBarItem/SearchBarItem.tsx
index 9ab0f4b..e890c36 100644
--- a/src/components/SearchBarItem/SearchBarItem.tsx
+++ b/src/components/SearchBarItem/SearchBarItem.tsx
@@ -26,13 +26,13 @@ const SearchBarItem = (props: SearchBarItemProps) => {
   if (type === "folder" && folder) {
     return (
       <div
-        className="flex flex-row items-center p-2 overflow-hidden text-ellipsis hover:bg-[#f6f5fd] cursor-pointer border-y"
+        className="flex flex-row items-center py-2 px-4 overflow-hidden text-ellipsis hover:bg-gray-secondary cursor-pointer border-y"
         key={folder._id}
         onClick={() => folderClick(folder)}
       >
         <div>
           <svg
-            className="w-[30px] h-[30px] text-[#3c85ee]"
+            className="w-7 h-7 text-primary"
             aria-hidden="true"
             focusable="false"
             data-prefix="fas"
@@ -48,7 +48,7 @@ const SearchBarItem = (props: SearchBarItemProps) => {
             ></path>
           </svg>
         </div>
-        <span className="text-sm ml-4 text-ellipsis overflow-hidden whitespace-nowrap max-w-[50%]">
+        <span className="text-sm ml-3 text-ellipsis overflow-hidden whitespace-nowrap">
           {folder.name}
         </span>
       </div>
@@ -56,14 +56,14 @@ const SearchBarItem = (props: SearchBarItemProps) => {
   } else if (type === "file" && file) {
     return (
       <div
-        className="flex flex-row items-center p-2 overflow-hidden text-ellipsis hover:bg-[#f6f5fd] cursor-pointer border-y"
+        className="flex flex-row items-center py-2 px-4 overflow-hidden text-ellipsis hover:bg-gray-secondary cursor-pointer border-y"
         key={file._id}
         onClick={() => fileClick(file)}
       >
         <div>
-          <span className="inline-flex items-center max-w-[27px] min-w-[27px] min-h-[27px] max-h-[27px]">
+          <span className="inline-flex items-center">
             <div
-              className="h-[27px] w-[27px] bg-red-500 rounded-[3px] flex flex-row justify-center items-center"
+              className="h-7 w-7 bg-red-500 rounded-md flex flex-row justify-center items-center"
               style={{ background: imageColor }}
             >
               <span className="font-semibold text-[9.5px] text-white">
@@ -72,7 +72,7 @@ const SearchBarItem = (props: SearchBarItemProps) => {
             </div>
           </span>
         </div>
-        <span className="text-sm ml-4 text-ellipsis overflow-hidden whitespace-nowrap">
+        <span className="text-sm ml-3 text-ellipsis overflow-hidden whitespace-nowrap">
           {file.filename}
         </span>
       </div>
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index d4ea031..b30007e 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,7 +1,3 @@
 import React from "react";
 
-export default () => (
-    <div className="spinner-image spinner-image-grey">
-    
-    </div>
-)
\ No newline at end of file
+export default () => <div className="spinner-image spinner-image-grey"></div>;
diff --git a/src/icons/SearchIcon.tsx b/src/icons/SearchIcon.tsx
new file mode 100644
index 0000000..d1c16f4
--- /dev/null
+++ b/src/icons/SearchIcon.tsx
@@ -0,0 +1,30 @@
+type SearchIconType = React.SVGAttributes<SVGSVGElement>;
+
+const SearchIcon: React.FC<SearchIconType> = (props) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="Group 5">
+        <path
+          id="Shape"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0 8.77551C0 3.93682 3.93682 0 8.77551 0C13.6145 0 17.551 3.93682 17.551 8.77551C17.551 13.6145 13.6145 17.551 8.77551 17.551C3.93682 17.551 0 13.6145 0 8.77551ZM1.6201 8.77555C1.6201 12.721 4.83004 15.931 8.77551 15.931C12.721 15.931 15.9309 12.721 15.9309 8.77551C15.9309 4.83004 12.721 1.6201 8.77551 1.6201C4.83004 1.6201 1.6201 4.83008 1.6201 8.77555Z"
+          fill="currentColor"
+        />
+        <path
+          id="Path"
+          d="M19.7603 18.6036L15.0699 13.9133C14.7503 13.5937 14.2328 13.5937 13.9132 13.9133C13.5936 14.2326 13.5936 14.7507 13.9132 15.0701L18.6035 19.7604C18.7633 19.9202 18.9725 20.0001 19.1819 20.0001C19.391 20.0001 19.6005 19.9202 19.7603 19.7604C20.0799 19.4411 20.0799 18.923 19.7603 18.6036Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default SearchIcon;