diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index 27727dbba5..02eb350a80 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -1,24 +1,32 @@
-import { useState, useEffect } from "react";
-import useFetch from 'common/hooks/useFetch';
+import { useState, useEffect, useContext } from "react";
+import useFetch from "common/hooks/useFetch";
 import { Link } from "react-router-dom";
 import "./home.css";
 import { RiSlideshow4Line } from "react-icons/ri";
 import { BiShareAlt, BiAddToQueue } from "react-icons/bi";
-import { BsGithub } from 'react-icons/bs';
+import { BsGithub } from "react-icons/bs";
 import { FiStar } from "react-icons/fi";
 import { ReactComponent as Flower } from "images/icon-flower.svg";
 import { MdManageSearch } from "react-icons/md";
 import YoutubeVideoEmbed from 'common/components/YouTubeEmbed';
 import FeaturedPlays from "common/playlists/FeaturedPlays";
 import Contributors from "./Contributors";
+import { SearchContext } from "common/search/search-context";
 
 const Home = () => {
-  const [gitHubStars, setGitHubStars] = useState('...');
-  const { data } = useFetch('https://api.github.com/repos/atapas/react-play');
-  
+  const [gitHubStars, setGitHubStars] = useState("...");
+  const { data } = useFetch("https://api.github.com/repos/atapas/react-play");
+  const { setSearchTerm, searchTerm, setFilterQuery } =
+    useContext(SearchContext);
   useEffect(() => {
     setGitHubStars(data.stargazers_count);
-  }, [data]);
+    setSearchTerm("");
+    setFilterQuery({
+      level: "",
+      tags: [],
+      creator: "",
+    });
+  }, [data, setSearchTerm, searchTerm]);
 
   return (
     <div>
@@ -34,8 +42,9 @@ const Home = () => {
             with ReactPlay
           </h2>
           <p className="body-desc">
-            ReactPlay is an open-source application to learn, create and share ReactJS 
-            projects with the developer community. Start by browsing the plays or exploring the source code.
+            ReactPlay is an open-source application to learn, create and share
+            ReactJS projects with the developer community. Start by browsing the
+            plays or exploring the source code.
           </p>
           <div className="body-c2a">
             <Link to="/plays" className="body-c2a-btn body-c2a-btn--primary">
@@ -49,7 +58,12 @@ const Home = () => {
               className="body-c2a-btn"
             >
               <BsGithub className="icon" />
-              <span className="btn-label">GitHub <div className="label-info-more"><FiStar /> <div className="more-label">{gitHubStars}</div></div> </span>
+              <span className="btn-label">
+                GitHub{" "}
+                <div className="label-info-more">
+                  <FiStar /> <div className="more-label">{gitHubStars}</div>
+                </div>{" "}
+              </span>
             </a>
           </div>          
           <div className="video">
@@ -70,8 +84,8 @@ const Home = () => {
             <p className="item-desc">
               Learn how to "Think in React" and build applications inspired by
               several plays(source code & demos). Get to the source code of it,
-              find related article, or even a YouTube video. Learn from the expert 
-              code reviews.
+              find related article, or even a YouTube video. Learn from the
+              expert code reviews.
             </p>
           </li>
           <li className="home-features-item">
@@ -80,10 +94,10 @@ const Home = () => {
             </div>
             <h3 className="item-title">Create </h3>
             <p className="item-desc">
-              Create your own plays and own them by following a few simple steps.
-              Learned something new? Perfect to present as a play. You can also
-              contribute to the existing plays. Your play will be reviewed by the
-              experts before being made public.
+              Create your own plays and own them by following a few simple
+              steps. Learned something new? Perfect to present as a play. You
+              can also contribute to the existing plays. Your play will be
+              reviewed by the experts before being made public.
             </p>
           </li>
           <li className="home-features-item">
@@ -92,8 +106,8 @@ const Home = () => {
             </div>
             <h3 className="item-title">Socialize </h3>
             <p className="item-desc">
-              Share your plays with the community. The best way of building in public
-              is by sharing the learning. You can share your plays on
+              Share your plays with the community. The best way of building in
+              public is by sharing the learning. You can share your plays on
               social media platforms like Facebook, Twitter, LinkedIn, to name a
               few, just with a single click.
             </p>
diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx
index 26c83d92aa..238e0acf5f 100644
--- a/src/common/routing/RouteDefs.jsx
+++ b/src/common/routing/RouteDefs.jsx
@@ -1,14 +1,14 @@
 import App from "App";
 import { Footer, Header, Home, PageNotFound } from "common";
-import PlayList from 'common/playlists/PlayList';
-import { getAllPlays } from 'meta/play-meta-util';
+import PlayList from "common/playlists/PlayList";
+import { getAllPlays } from "meta/play-meta-util";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 const RouteDefs = () => {
   const plays = getAllPlays();
   return (
     <BrowserRouter>
-      <Header/>
+      <Header />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/plays" element={<App />}>
@@ -19,7 +19,7 @@ const RouteDefs = () => {
         </Route>
         <Route path="/*" element={<PageNotFound />} />
       </Routes>
-      <Footer/>
+      <Footer />
     </BrowserRouter>
   );
 };
diff --git a/src/common/routing/hooks/useBackListener.js b/src/common/routing/hooks/useBackListener.js
new file mode 100644
index 0000000000..ba536d25ad
--- /dev/null
+++ b/src/common/routing/hooks/useBackListener.js
@@ -0,0 +1,23 @@
+//the code is inspired from
+//https://stackoverflow.com/questions/71369320/how-to-controling-browser-back-button-with-react-router-dom-v6
+
+import { useContext, useEffect } from "react";
+import { UNSAFE_NavigationContext } from "react-router-dom";
+
+const useBackListener = (callback) => {
+  const { navigator } = useContext(UNSAFE_NavigationContext);
+  useEffect(() => {
+    const listener = ({ location, action }) => {
+      if (action === "POP") {
+        callback({ location, action });
+      }
+      if (action === "PUSH") {
+        callback({ location, action });
+      }
+    };
+    const unlisten = navigator.listen(listener);
+    return unlisten;
+  }, [callback, navigator]);
+};
+
+export default useBackListener;
diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 1d7813b292..bbd95e9de6 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -6,8 +6,9 @@ import { SearchContext } from "./search-context";
 import "./search.css";
 
 import { RiFilterFill } from "react-icons/ri";
+import useBackListener from "common/routing/hooks/useBackListener";
 
-const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
+const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
   const tags = getAllTags();
   const labels = getAllLevels();
   const creators = getAllCreators();
@@ -40,9 +41,9 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
           }
           value={filterQuery.tags[0]}
         >
-          <option value="">All</option> 
-         {tags.map(tag => (
-           <option key={tag} value={tag}>
+          <option value="">All</option>
+          {tags.map((tag) => (
+            <option key={tag} value={tag}>
               {tag}
             </option>
           ))}
@@ -64,7 +65,7 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
             </option>
           ))}
         </select>
-      </div>      
+      </div>
     </>
   );
 };
@@ -72,19 +73,45 @@ const FilterPlaysModalBody = ({filterQuery, setFilterQuery}) => {
 const FilterPlays = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const { setFilterQuery, filterQuery } =
-    useContext(SearchContext);
+  const { setFilterQuery, filterQuery } = useContext(SearchContext);
   const [showModal, setShowModal] = useState(false);
   const [modifiedFilterQuery, setModifiedFilterQuery] = useState({
     tags: [],
     labels: [],
     creators: [],
   });
-
+  useBackListener(({ action }) => {
+    if (action === "POP") {
+      console.log("POP");
+      setModifiedFilterQuery({
+        level: "",
+        tags: [],
+        creator: "",
+      });
+      setFilterQuery({
+        level: "",
+        tags: [],
+        creator: "",
+      });
+    }
+    if (action === "PUSH") {
+      console.log("PUSH");
+      setModifiedFilterQuery({
+        level: "",
+        tags: [],
+        creator: "",
+      });
+      setFilterQuery({
+        level: "",
+        tags: [],
+        creator: "",
+      });
+    }
+  });
   const handleFilter = (event) => {
     event.preventDefault();
-    console.log('filterQuery', filterQuery);
-    console.log('modifiedFilterQuery', modifiedFilterQuery);
+    console.log("filterQuery", filterQuery);
+    console.log("modifiedFilterQuery", modifiedFilterQuery);
     setFilterQuery(modifiedFilterQuery);
     if (location.pathname !== "/plays") {
       navigate("/plays", { replace: true });
@@ -94,24 +121,32 @@ const FilterPlays = () => {
 
   return (
     <div className="search-filter">
-        <Modal
-          title="Filter Plays"
-          onClose={() => setShowModal(false)}
-          onSubmit={handleFilter}
-          show={showModal}
-          cname="filter"
-          children={
-            <FilterPlaysModalBody
-              filterQuery={modifiedFilterQuery}
-              setFilterQuery={setModifiedFilterQuery}
-            />
-          }
-        />
+      <Modal
+        title="Filter Plays"
+        onClose={() => setShowModal(false)}
+        onSubmit={handleFilter}
+        show={showModal}
+        cname="filter"
+        children={
+          <FilterPlaysModalBody
+            filterQuery={modifiedFilterQuery}
+            setFilterQuery={setModifiedFilterQuery}
+          />
+        }
+      />
 
-        <button onClick={() => setShowModal(true)} className="btn-filter" title="Filter Plays">
-          {/*<div className="badge">8</div>*/}
-          <RiFilterFill className="icon" size="28px" color="var(--color-neutral-30" />
-        </button>
+      <button
+        onClick={() => setShowModal(true)}
+        className="btn-filter"
+        title="Filter Plays"
+      >
+        {/*<div className="badge">8</div>*/}
+        <RiFilterFill
+          className="icon"
+          size="28px"
+          color="var(--color-neutral-30"
+        />
+      </button>
     </div>
   );
 };
diff --git a/src/common/search/SearchPlays.jsx b/src/common/search/SearchPlays.jsx
index f1fa642d47..b437d75e10 100644
--- a/src/common/search/SearchPlays.jsx
+++ b/src/common/search/SearchPlays.jsx
@@ -1,36 +1,48 @@
-
-import { useContext } from 'react';
+import { useContext, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { SearchContext } from './search-context';
-import './search.css';
+import { SearchContext } from "./search-context";
+import "./search.css";
 import { BiSearch } from "react-icons/bi";
+import useBackListener from "common/routing/hooks/useBackListener";
 
 const SearchPlays = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const {setSearchTerm} = useContext(SearchContext);
-  
+  const { setSearchTerm } = useContext(SearchContext);
+  const inputRef = useRef(null);
+  useBackListener(({ action }) => {
+    if (action === "POP") {
+      inputRef.current.value = "";
+      setSearchTerm("");
+    }
+    if (action === "PUSH") {
+      inputRef.current.value = "";
+      setSearchTerm("");
+    }
+  });
+
   const handleSearch = (event) => {
     event.preventDefault();
-    if(event.key === 'Enter') {
+    if (event.key === "Enter") {
       setSearchTerm(event.target.value);
-      if(location.pathname !== '/plays') {
-        navigate('/plays', { replace: true});
+      if (location.pathname !== "/plays") {
+        navigate("/plays", { replace: true });
       }
     }
-  }
- 
+  };
+
   return (
     <>
-    <div className="search-input">
-      <BiSearch className="search-input-icon" size="24px" />
-      <input
-        className="search-input-text"
-        type="text"
-        placeholder="Search for a play..."
-        onKeyUp={ handleSearch }
-      />
-    </div>
+      <div className="search-input">
+        <BiSearch className="search-input-icon" size="24px" />
+        <input
+          className="search-input-text"
+          type="text"
+          placeholder="Search for a play..."
+          onKeyUp={handleSearch}
+          ref={inputRef}
+        />
+      </div>
     </>
   );
 };