diff --git a/package.json b/package.json
index 93d4f78def..e65fc3fa7e 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
     "plop": "^3.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index 02eb350a80..c406413eea 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -26,7 +26,7 @@ const Home = () => {
       tags: [],
       creator: "",
     });
-  }, [data, setSearchTerm, searchTerm]);
+  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
   return (
     <div>
diff --git a/src/index.js b/src/index.js
index bfdeb0880e..0eba3eb35d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import RouteDefs from "common/routing/RouteDefs";
 import { SearchContext } from "common/search/search-context";
 import "index.css";
 import React, { useState } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot } from 'react-dom/client';
 import reportWebVitals from "reportWebVitals";
 
 const Index = () => {
diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 7ad09d69bd..22057fdc9a 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -8,6 +8,7 @@ import {
   States,
   SocialCard,
   RandomMemeGenerator,
+  Keeper,
   ReactTodoApp,
   ExpandingCards,
   AnalogClock,
@@ -81,69 +82,64 @@ export const plays = [
     tags: "Recursion, Tree",
     github: "green-roots",
     featured: true,
-  },
-  {
-    id: "pl-counter",
-    name: "Counter",
-    description:
-      "A simple counter which increments the value upto a certain limit!",
-    component: () => {
-      return <CounterApp />;
-    },
-    path: "/plays/counter",
-    level: "Beginner",
-    tags: "JSX, State, Props",
-    github: "murtuzaalisurti"
-  },
-  {
-    id: "pl-states",
-    name: "States",
-    description: "States in Functional Components",
-    component: () => {
-      return <States />;
-    },
-    path: "/plays/states",
-    level: "Beginner",
-    tags: "Hooks,State,JSX",
-    github: "Abhishek-90",
-    cover: "",
-    blog: "https://abhishek-90.github.io/My-Portfolio/",
-  },
-  {
-    id: "pl-social-card",
-    name: "Social Card",
-    description:
-      "The Social Card helps you telling who you are using photo, name, and other social footprints.",
-    component: () => {
-      return <SocialCard />;
-    },
-    path: "/plays/social-card",
-    level: "Intermediate",
-    tags: "Form,Events,Complex State",
-    github: "atapas",
-    featured: true,
-    cover: "",
-    blog: "https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler",
-    video: "",
-  },
-  {
-    id: "pl-random-meme-generator",
-    name: "Random Meme Generator",
-    description:
-      "A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!",
-    component: () => {
-      return <RandomMemeGenerator />;
-    },
-    path: "/plays/random-meme-generator",
-    level: "Beginner",
-    tags: "JSX,Hooks,API,EventHandling",
-    github: "murtuzaalisurti",
-    featured: true,
-    cover: "",
-    blog: "",
-    video: "",
-  },
-  {
+  }, {
+    id: 'pl-counter', 
+    name: 'Counter', 
+    description: 'A simple counter which increments the value upto a certain limit!',
+    component: () => {return <CounterApp />},
+    path: '/plays/counter',
+    level: 'Beginner',
+    tags: 'JSX, State, Props',
+    github: 'murtuzaalisurti',
+    featured: true
+  }, {
+    id: 'pl-states', 
+    name: 'States', 
+    description: 'States in Functional Components',
+    component: () => {return <States />},
+    path: '/plays/states',
+    level: 'Beginner',
+    tags: 'Hooks,State,JSX',
+    github: 'Abhishek-90',
+    cover: '',
+    blog: 'https://abhishek-90.github.io/My-Portfolio/'
+  }, {
+    id: 'pl-social-card', 
+    name: 'Social Card', 
+    description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.',
+    component: () => {return <SocialCard />},
+    path: '/plays/social-card',
+    level: 'Intermediate',
+    tags: 'Form,Events,Complex State',
+    github: 'atapas',
+    cover: '',
+    blog: 'https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler',
+    video: ''
+  }, {
+    id: 'pl-random-meme-generator', 
+    name: 'Random Meme Generator', 
+    description: 'A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!',
+    component: () => {return <RandomMemeGenerator />},
+    path: '/plays/random-meme-generator',
+    level: 'Beginner',
+    tags: 'JSX,Hooks,API,EventHandling',
+    github: 'murtuzaalisurti',
+    cover: '',
+    blog: '',
+    video: ''
+  }, {
+    id: 'pl-keeper', 
+    name: 'Keeper', 
+    description: 'Keeper is the clone of google keep where we can save and delete our notes',
+    component: () => {return <Keeper />},
+    path: '/plays/keeper',
+    level: 'Intermediate',
+    tags: 'JSX,Hooks,ReactDOM',
+    github: 'Shivam-Katare',
+    cover: 'https://res.cloudinary.com/dbjmy6wdu/image/upload/v1651678725/keepicon_jsn5bh.png',
+    blog: '',
+    video: ''
+  }, {
     id: "pl-react-todo-app",
     name: "React Todo App",
     description:
@@ -159,8 +155,7 @@ export const plays = [
       "https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png",
     blog: "",
     video: "",
-  },
-  {
+  }, {
     id: "pl-expanding-cards",
     name: "Expanding-Cards",
     description:
@@ -176,8 +171,7 @@ export const plays = [
     cover: "",
     blog: "",
     video: "",
-  },
-  {
+  }, {
     id: "pl-analog-clock",
     name: "Analog-Clock",
     description: "A beautiful wall clock",
diff --git a/src/plays/index.js b/src/plays/index.js
index 051813d34c..1353b6d97b 100644
--- a/src/plays/index.js
+++ b/src/plays/index.js
@@ -9,7 +9,9 @@ export { default as CounterApp } from 'plays/counter/CounterApp';
 export { default as States } from 'plays/states/States';
 export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
+export { default as Keeper } from 'plays/keeper/Keeper';
 export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
 export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards';
 export { default as AnalogClock } from 'plays/analog-clock/AnalogClock';
+
 //add export here
diff --git a/src/plays/keeper/CreateArea.jsx b/src/plays/keeper/CreateArea.jsx
new file mode 100644
index 0000000000..e6cd70ed5a
--- /dev/null
+++ b/src/plays/keeper/CreateArea.jsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { FaPlusCircle } from 'react-icons/fa';
+
+function CreateArea(props) {
+  const [note, setNote] = useState({
+    title: "",
+    content: ""
+  });
+  function handleChange(event) {
+    const { name, value } = event.target;
+    setNote(prevNote => {
+      return {
+        ...prevNote,
+        [name]: value
+      };
+    });
+  }
+  function submitNote(event) {
+    props.onAdd(note);
+    setNote({
+      title: "",
+      content: ""
+    });
+    event.preventDefault();
+  }
+  return (
+    <div>
+      <form className="create-note">
+        {(
+          <input
+            className="create-input"
+            name="title"
+            onChange={handleChange}
+            value={note.title}
+            placeholder="Title"
+          />
+        )
+        }
+        <textarea
+          className="create-text"
+          name="content"
+          onChange={handleChange}
+          value={note.content}
+          placeholder="Take a note..."
+        />
+        <button className="create-button" onClick={submitNote}>< FaPlusCircle /></button>
+      </form>
+    </div>
+  );
+}
+export default CreateArea;
diff --git a/src/plays/keeper/Header.jsx b/src/plays/keeper/Header.jsx
new file mode 100644
index 0000000000..0fe0a07d7e
--- /dev/null
+++ b/src/plays/keeper/Header.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { FaMedapps } from 'react-icons/fa';
+function Header() {
+    return <>
+        <header className="head">
+        <h1 className="headsHeading"> <FaMedapps /> KEEPER </h1>  
+        </header>
+    </>
+}
+export default Header;
\ No newline at end of file
diff --git a/src/plays/keeper/Hooks/useLocalStorage.js b/src/plays/keeper/Hooks/useLocalStorage.js
new file mode 100644
index 0000000000..da842b6fb8
--- /dev/null
+++ b/src/plays/keeper/Hooks/useLocalStorage.js
@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+function useLocalStorage(key, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}
+export default useLocalStorage;
\ No newline at end of file
diff --git a/src/plays/keeper/Keeper.css b/src/plays/keeper/Keeper.css
new file mode 100644
index 0000000000..47f4ec4dc1
--- /dev/null
+++ b/src/plays/keeper/Keeper.css
@@ -0,0 +1,121 @@
+.head {
+  background-color: #f5ba13;
+  margin: auto -16px;
+  padding: 16px 32px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+}
+
+.headsHeading {
+  color: #fff;
+  font-weight: 200;
+}
+
+.note {
+  background: #fff;
+  border-radius: 7px;
+  box-shadow: 0 2px 5px #ccc;
+  padding: 10px;
+  width: 240px;
+  margin: 16px;
+  float: left;
+}
+
+.notesHeading {
+  font-size: 1.1em;
+  margin-bottom: 6px;
+}
+
+.notesPara {
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.notesButton {
+  position: relative;
+  float: right;
+  margin-right: 10px;
+  color: #f5ba13;
+  border: none;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  outline: none;
+}
+
+.create-note {
+  position: relative;
+  width: 480px;
+  margin: 30px auto 20px auto;
+  background: #fff;
+  padding: 15px;
+  border-radius: 7px;
+  box-shadow: 0 1px 5px rgb(138, 137, 137);
+}
+
+.create-note .create-input,
+.create-note .create-text {
+  width: 100%;
+  border: none;
+  padding: 4px;
+  outline: none;
+  font-size: 1.2em;
+  resize: none;
+}
+
+.create-note .create-button {
+  position: absolute;
+  right: 18px;
+  bottom: -18px;
+  background: #f5ba13;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  outline: none;
+}
+
+.create-button:hover {
+  background-color: black;
+}
+
+/* Media Query */
+
+@media(max-width: 514px) {
+  .create-note {
+    width: 21rem;
+  }
+}
+@media(max-width: 358px) {
+  .create-note {
+    width: 13rem;
+  }
+}
+@media(max-width: 304px) {
+  .create-note {
+    width: 12rem;
+  }
+  .note{
+    width:205px;
+  }
+}
+@media(max-width: 269px) {
+  .create-note {
+    width: 11rem;
+  }
+  .note{
+    width:182px;
+  }
+}
+@media(max-width: 269px) {
+  .create-note {
+    width: 9rem;
+  }
+  .note{
+    width:170px;
+  }
+}
diff --git a/src/plays/keeper/Keeper.jsx b/src/plays/keeper/Keeper.jsx
new file mode 100644
index 0000000000..b63b58203d
--- /dev/null
+++ b/src/plays/keeper/Keeper.jsx
@@ -0,0 +1,59 @@
+import { getPlayById } from 'meta/play-meta-util';
+import PlayHeader from 'common/playlists/PlayHeader';
+import './Keeper.css'
+import Header from './Header';
+import CreateArea from './CreateArea';
+import Note from './Notes';
+import useLocalStorage from './Hooks/useLocalStorage';
+
+function Keeper(props) {
+  // Do not remove the below lines. 
+  // The following code is to fetch the current play from the URL
+  const { id } = props;
+  const play = getPlayById(id);
+  //code starts here
+  const [notes, setNotes] = useLocalStorage("notes", [
+    {
+      id: 0,
+      title: "Write Your Title",
+      content: "And, content here. :)"
+    }
+  ]); //notes array
+  //adding notes
+  function addNote(newNote) {
+    setNotes((prevNotes) => {
+      return [...prevNotes, newNote];
+    });
+  }
+  //deleting notes
+  function deleteNote(id) {
+    setNotes(prevNotes => {
+      return prevNotes.filter((noteItem, index) => {
+        return index !== id;
+      })
+    })
+  }
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <Header />
+          <CreateArea onAdd={addNote} />
+          {notes.map((noteItem, index) => {
+            return <Note
+              key={index}
+              id={index}
+              title={noteItem.title}
+              content={noteItem.content}
+              onDelete={deleteNote}
+            />
+          })}
+        </div>
+      </div>
+      {/* Your Code Ends Here */}
+    </>
+  );
+}
+export default Keeper;
\ No newline at end of file
diff --git a/src/plays/keeper/Notes.jsx b/src/plays/keeper/Notes.jsx
new file mode 100644
index 0000000000..6dc383f76d
--- /dev/null
+++ b/src/plays/keeper/Notes.jsx
@@ -0,0 +1,14 @@
+import { FaTrashAlt } from 'react-icons/fa';
+function Note(props) {
+    function handleClick() {
+        props.onDelete(props.id);
+    }
+    return <>
+        <div className="note">
+            <h1 className='notesHeading'>{props.title}</h1>
+            <p className='notesPara'>{props.content}</p>
+            <button className='notesButton' onClick={handleClick}><FaTrashAlt /></button>
+        </div>
+    </>
+}
+export default Note;
\ No newline at end of file
diff --git a/src/plays/keeper/README.md b/src/plays/keeper/README.md
new file mode 100644
index 0000000000..e7cd6a1cc2
--- /dev/null
+++ b/src/plays/keeper/README.md
@@ -0,0 +1,8 @@
+The `Keeper` demonstrates the following concepts in React:
+1.  State & State Management in functional components.
+2.  useState Hook
+3.  useEffect Hook
+3.  React DOM
+4.  JSX
+
+This play has two input fields, one for `Title`, and another one for `Description`. After writing your notes you can click on the `add` button, and your notes will be added and will be save too until you `delete` them.