diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 8167644dfe..6552d159a0 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -5,6 +5,7 @@ import {
   MovieContainer,
   WhyReact,
   CounterApp,
+States,
 SocialCard,
 //import play here
 } from "plays";
@@ -76,6 +77,17 @@ export const plays = [
     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', 
diff --git a/src/plays/index.js b/src/plays/index.js
index 03dc2a3696..6adc162ebd 100644
--- a/src/plays/index.js
+++ b/src/plays/index.js
@@ -6,5 +6,6 @@ export { default as BasicTree } from 'plays/org-tree/BasicTree';
 export { default as MovieContainer } from 'plays/movies/MovieContainer';
 export { default as WhyReact } from 'plays/why-react/WhyReact';
 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';
 //add export here
diff --git a/src/plays/states/Readme.md b/src/plays/states/Readme.md
new file mode 100644
index 0000000000..a3f9b2d62d
--- /dev/null
+++ b/src/plays/states/Readme.md
@@ -0,0 +1,9 @@
+The `States Play` demonstrates the following concepts in React:
+1.  State & State Management in functional components.
+2.  useState Hook
+3.  Event Handling
+4.  Object Destructing
+
+This play has two input fields that asks the user for a Name and the duration. Once provides the necessary inputs and click on Submit, a message is displayed on the right side. 
+Message is `Welcome to State Play, {name}` where name will be the name value provided by the user. This message will be displayed for `duration` seconds provided by the user.
+Once the `duration` amount of seconds are over, the input fields will be reset and the message on right side will disappear. If the user leaves any field blank the submit button won't be functional.
diff --git a/src/plays/states/States.css b/src/plays/states/States.css
new file mode 100644
index 0000000000..154a3759a3
--- /dev/null
+++ b/src/plays/states/States.css
@@ -0,0 +1,37 @@
+.play-area, .play-area-result{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.play-area {
+  border-right-width: 0.1rem;
+  border-right-style: solid;
+  border-right-color: rgb(125, 117, 117);
+}
+
+.input {
+  margin-top: 1rem;
+  width: 15rem;
+  height: 2.5rem;
+  margin-left: 4rem;
+}
+
+.play-area-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 3rem;
+}
+
+.submit-button {
+  height: 2rem;
+  width: 6rem;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1rem;
+  background: rgb(108, 226, 252);
+  border: none;
+  outline: none;
+  margin-top: 1.2rem;
+  margin-left: 4rem;
+  border-radius: 1rem;
+}
\ No newline at end of file
diff --git a/src/plays/states/States.jsx b/src/plays/states/States.jsx
new file mode 100644
index 0000000000..2010fcb200
--- /dev/null
+++ b/src/plays/states/States.jsx
@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { getPlayById } from "meta/play-meta-util";
+import PlayHeader from "common/playlists/PlayHeader";
+import "./states.css";
+
+function States() {
+  // Do not remove the below lines.
+  // The following code is to fetch the current play from the URL
+  const location = useLocation();
+  const { id } = location.state;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+  const [name, setName] = useState("");
+  const [display, setDisplay] = useState(false);
+  const [duration, setDuration] = useState(0);
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if(!name && !duration) {
+      return
+    }
+    setDisplay(true);
+    setTimeout(() => {
+      setDisplay(false);
+      setName("");
+      setDuration(0);
+    }, duration * 1000);
+  };
+
+  const handleNameChange = (e) => {
+    setName(e.target.value);
+  };
+
+  const handleDurationChange = (e) => {
+    setDuration(e.target.value);
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div>
+            <h1>States - Details about Component</h1>
+            <p>
+              State is an inbuilt object of React which stores data/information
+              about the component. State of the component can change over time.
+              Change in state of the component causes re-rendering of the
+              component. This change of State is Asynchronous.
+            </p>
+            <div className="play-area-container">
+              <div className="play-area">
+                <p>Enter a Name and Duration in Seconds for which you want to
+                display a Message.</p>
+                <input
+                  className="input nameInput"
+                  type="text"
+                  name="name"
+                  id="name"
+                  placeholder="Enter a Name"
+                  onChange={handleNameChange}
+                  value={name}
+                />
+                <input
+                  className="input durationInput"
+                  type="text"
+                  name="duration"
+                  id="duration"
+                  placeholder="Enter duration in seconds"
+                  onChange={handleDurationChange}
+                  value={duration}
+                />
+                <button
+                  className="submit-button"
+                  type="submit"
+                  onClick={(e) => handleSubmit(e)}
+                >
+                  Submit
+                </button>
+              </div>
+              
+              <div className="play-area-result">
+                {!display ? (
+                  <p style={{marginLeft: '2rem'}}>Enter Details of the Message</p>
+                ) : (
+                  <h3 style={{marginLeft: '2rem'}}>Welcome to State Play, {name} </h3>
+                )}
+              </div>
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default States;
diff --git a/src/plays/states/states.css b/src/plays/states/states.css
new file mode 100644
index 0000000000..154a3759a3
--- /dev/null
+++ b/src/plays/states/states.css
@@ -0,0 +1,37 @@
+.play-area, .play-area-result{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.play-area {
+  border-right-width: 0.1rem;
+  border-right-style: solid;
+  border-right-color: rgb(125, 117, 117);
+}
+
+.input {
+  margin-top: 1rem;
+  width: 15rem;
+  height: 2.5rem;
+  margin-left: 4rem;
+}
+
+.play-area-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 3rem;
+}
+
+.submit-button {
+  height: 2rem;
+  width: 6rem;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1rem;
+  background: rgb(108, 226, 252);
+  border: none;
+  outline: none;
+  margin-top: 1.2rem;
+  margin-left: 4rem;
+  border-radius: 1rem;
+}
\ No newline at end of file