diff --git a/src/plays/git-hub-profile-search/GithubProfileSearch.js b/src/plays/git-hub-profile-search/GithubProfileSearch.js
new file mode 100644
index 000000000..c6d5341ec
--- /dev/null
+++ b/src/plays/git-hub-profile-search/GithubProfileSearch.js
@@ -0,0 +1,36 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import Input from './components/Input';
+import Results from './components/Results';
+import { ResultContextProvider } from './context/ResultContextProvider';
+
+// WARNING: Do not change the entry componenet name
+function GithubProfileSearch(props) {
+
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details nirban-github-profile">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className='play-body nirban-github-profile-body'>
+            <ResultContextProvider>
+              <h1 className='play-heading nirban-github-profile-heading'>
+                Github Profile Search
+              </h1>
+              <Input />
+              <div className='nirban-github-profile-result'>
+                <Results />
+              </div>
+            </ResultContextProvider>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default GithubProfileSearch;
\ No newline at end of file
diff --git a/src/plays/git-hub-profile-search/Readme.md b/src/plays/git-hub-profile-search/Readme.md
new file mode 100644
index 000000000..67099ff3c
--- /dev/null
+++ b/src/plays/git-hub-profile-search/Readme.md
@@ -0,0 +1,22 @@
+# GitHub Profile Search
+
+A play where you can search anybody's public github profile. I have made it using Context Api for showing basic implementation which you can practice in order to get comfortable with using Context Api for bigger projects.
+
+The search result provides you with one user whose username matches with his/her profile link, bio, followers, as well as the current 5 public repositories made by the user starting from the latest.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: nirban256
+- Gihub Link: https://github.com/nirban256
+- Blog: NA
+- Video: NA
+
+
+## Resources
+
+[GitHub RESST API](https://docs.github.com/rest)
diff --git a/src/plays/git-hub-profile-search/components/Input.jsx b/src/plays/git-hub-profile-search/components/Input.jsx
new file mode 100644
index 000000000..671199f63
--- /dev/null
+++ b/src/plays/git-hub-profile-search/components/Input.jsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { useResultContext } from '../context/ResultContextProvider';
+
+const Input = () => {
+
+    const { getRepos, getUser } = useResultContext();
+    const [username, setUsername] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        getUser(username);
+        getRepos(username);
+        setUsername('');
+    }
+
+    return (
+        <form className='nirban-github-profile-form'>
+            <input tabIndex={0} autoFocus value={username} placeholder="Search Username" onChange={(e) => setUsername(e.target.value)} className="nirban-github-profile-search" />
+            <button type="submit" onClick={handleSubmit} className="nirban-github-profile-btn">
+                Search
+            </button>
+        </form>
+    )
+}
+
+export default Input
\ No newline at end of file
diff --git a/src/plays/git-hub-profile-search/components/Results.jsx b/src/plays/git-hub-profile-search/components/Results.jsx
new file mode 100644
index 000000000..9e67947b1
--- /dev/null
+++ b/src/plays/git-hub-profile-search/components/Results.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useResultContext } from '../context/ResultContextProvider';
+
+const Results = () => {
+
+    const { results, repoDetails } = useResultContext();
+
+    const showRepo = (repo) => {
+        return (
+            <div key={repo.id}>
+                <h2 className='nirban-github-profile-repo-link'>
+                    <strong>
+                        <a href={`${repo.html_url}`} target="_blank" rel='noreferrer'>
+                            {repo.name.length > 15 ? repo.name.slice(0, 15) : repo.name}
+                        </a>
+                    </strong>
+                </h2>
+            </div>
+        )
+    }
+
+    return (
+
+        <div>
+            {results ? (
+                <div className="nirban-github-profile-results" >
+                    <div className='nirban-github-profile-results-body'>
+                        <div>
+                            <div className='nirban-github-profile-details'>
+                                <img src={`${results.avatar_url}`} alt={`${results.name}`} className="nirban-github-profile-avatar" />
+                                <a href={`${results.html_url}`} target="_blank" rel='noreferrer'>
+                                    <h2 className='nirban-github-profile-link'>{results.name === '' ? results.login : results.name}</h2>
+                                </a>
+                            </div>
+                            <div className="nirban-github-profile-results-info">
+                                <div>
+                                    {results.bio === '' ? '' : <h2 className='nirban-github-profile-bio'><strong>Bio:</strong> {results.bio}</h2>}
+                                    {results.location === '' ? '' : <p className='nirban-github-profile-location'><strong>Location:</strong> {results.location}</p>}
+                                    {results.twitter_username === '' ? '' : <p className='nirban-github-profile-twitter'><strong>Twitter:</strong> <a href={`https://twitter.com/${results.twitter_username}`} target="_blank" rel='noreferrer'>{results.twitter_username}</a></p>}
+                                    <ul className='nirban-github-profile-socials'>
+                                        <li><strong>{results.followers}</strong> Followers</li>
+                                        <li><strong>{results.following}</strong> Following</li>
+                                        <li><strong>{results.public_repos}</strong> Repos</li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <h2 className='nirban-github-profile-repos-heading'>
+                                        Latest repositories
+                                    </h2>
+                                    <div className='nirban-github-profile-repos'>
+                                        {repoDetails?.map(showRepo).slice(0, 5)}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )
+                :
+                (
+                    <div className='nirban-github-profile-no-user'>
+                        <p>
+                            No users to show
+                        </p >
+                    </div >
+                )}
+        </div>
+    )
+}
+
+export default Results
\ No newline at end of file
diff --git a/src/plays/git-hub-profile-search/context/ResultContextProvider.jsx b/src/plays/git-hub-profile-search/context/ResultContextProvider.jsx
new file mode 100644
index 000000000..e58f6bad8
--- /dev/null
+++ b/src/plays/git-hub-profile-search/context/ResultContextProvider.jsx
@@ -0,0 +1,37 @@
+import { createContext, useState, useContext } from "react";
+import axios from "axios";
+
+const ResultContext = createContext();
+const baseUrl = 'https://api.github.com/users/';
+
+export const ResultContextProvider = ({ children }) => {
+
+    const [results, setResults] = useState('');
+    const [repoDetails, setRepoDetails] = useState([]);
+
+    const getUser = (user) => {
+        axios({
+            method: "get",
+            url: `${baseUrl}${user}`,
+        }).then(res => {
+            setResults(res.data);
+        })
+    }
+
+    const getRepos = (user) => {
+        axios({
+            method: "get",
+            url: `${baseUrl}${user}/repos?sort=created`
+        }).then(res => {
+            setRepoDetails(res.data);
+        })
+    }
+
+    return (
+        <ResultContext.Provider value={{ getRepos, getUser, results, repoDetails }}>
+            {children}
+        </ResultContext.Provider>
+    )
+}
+
+export const useResultContext = () => useContext(ResultContext);
\ No newline at end of file
diff --git a/src/plays/git-hub-profile-search/cover.png b/src/plays/git-hub-profile-search/cover.png
new file mode 100644
index 000000000..ec3335a45
Binary files /dev/null and b/src/plays/git-hub-profile-search/cover.png differ
diff --git a/src/plays/git-hub-profile-search/styles.css b/src/plays/git-hub-profile-search/styles.css
new file mode 100644
index 000000000..a69b8477e
--- /dev/null
+++ b/src/plays/git-hub-profile-search/styles.css
@@ -0,0 +1,190 @@
+/* enter stlyes here */
+.nirban-github-profile-heading {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+    font-size: 2rem;
+    color: #010326;
+    font-weight: 600;
+}
+
+.nirban-github-profile-form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2rem;
+    flex-direction: column;
+}
+
+.nirban-github-profile-search {
+    border: none;
+    outline: none;
+    margin-bottom: 1.5rem;
+    padding: 10px;
+    border-radius: 6px;
+    box-shadow: 0px 0px 4px 4px #01032609;
+}
+
+.nirban-github-profile-search ::placeholder {
+    color: #010326;
+}
+
+.nirban-github-profile-search:focus {
+    box-shadow: 0px 0px 4px 4px #01032638;
+}
+
+.nirban-github-profile-btn {
+    background-color: #00f1feab;
+    color: #010326;
+    padding: 4px 15px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 4px 4px rgba(173, 169, 169, 0.377);
+}
+
+.nirban-github-profile-btn:hover {
+    background-color: #00f1fe;
+}
+
+.nirban-github-profile-result {
+    display: flex;
+    justify-content: center;
+}
+
+.nirban-github-profile-results {
+    max-width: 500px;
+    background: #ffff;
+    padding: 1rem;
+    border-radius: 25px;
+    box-shadow: 0px 0px 4px 4px rgba(173, 169, 169, 0.377);
+    color: #010326;
+    font-weight: 500;
+}
+
+.nirban-github-profile-results-info {
+    padding-left: 1rem;
+}
+
+.nirban-github-profile-bio,
+.nirban-github-profile-location,
+.nirban-github-profile-twitter {
+    margin-bottom: 0.5rem;
+}
+
+.nirban-github-profile-details {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.nirban-github-profile-link {
+    font-size: x-large;
+    font-weight: 600;
+    text-decoration: underline;
+}
+
+.nirban-github-profile-avatar {
+    border-radius: 50%;
+    border: 10px solid #fff;
+    max-height: 125px;
+    max-width: 125px;
+}
+
+.nirban-github-profile-socials {
+    display: flex;
+    margin-bottom: 1rem;
+}
+
+.nirban-github-profile-socials>:first-child {
+    margin-right: 1rem;
+}
+
+.nirban-github-profile-socials>:nth-child(2) {
+    margin: 0 1rem;
+}
+
+.nirban-github-profile-socials>:last-child {
+    margin-left: 1rem;
+}
+
+.nirban-github-profile-repos-heading {
+    font-size: 1.4rem;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 0.25rem;
+    margin-top: 1rem;
+}
+
+.nirban-github-profile-repos {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.nirban-github-profile-repo-link {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    text-align: center;
+    text-decoration: underline;
+}
+
+.nirban-github-profile-no-user {
+    color: #010326;
+    font-weight: 400;
+    font-size: 1.2rem;
+    margin-top: 2rem;
+    background: #fff;
+    padding: 1rem 1.5rem;
+    border-radius: 10px;
+}
+
+/* Media Queries */
+
+@media screen and (max-width: 600px) {
+
+    .nirban-github-profile-results {
+        max-width: 450px;
+    }
+
+    .nirban-github-profile-details {
+        flex-direction: column;
+    }
+
+    .nirban-github-profile-repos-heading {
+        text-align: left;
+    }
+
+    .nirban-github-profile-repos {
+        display: block;
+    }
+
+    .nirban-github-profile-repo-link {
+        text-align: left;
+    }
+}
+
+@media screen and (max-width: 450px) {
+
+    .nirban-github-profile-top {
+        text-align: center;
+    }
+
+    .nirban-github-profile-results {
+        max-width: 300px;
+    }
+
+    .nirban-github-profile-socials {
+        display: block;
+    }
+
+    .nirban-github-profile-socials>:first-child {
+        margin-right: 0;
+    }
+
+    .nirban-github-profile-socials>:nth-child(2) {
+        margin: 0;
+    }
+
+    .nirban-github-profile-socials>:last-child {
+        margin-left: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/plays/navbar/NavBar.css b/src/plays/navbar/NavBar.css
index cd1872ac5..06a3f7d11 100644
--- a/src/plays/navbar/NavBar.css
+++ b/src/plays/navbar/NavBar.css
@@ -1,9 +1,9 @@
-.contain {
+.navbar-play-contain {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 20rem));
 }
 
-.card {
+.navbar-side-card {
   position: relative;
   top: -18rem;
   left: 8rem;
@@ -23,7 +23,7 @@
   box-shadow: 0px 0px 100px rgba(88, 199, 250, .15);
 }
 
-.images {
+.nav-card-images {
   position: relative;
   font-size: 33px;
   font-family: roboto;
@@ -36,12 +36,12 @@
   border-radius: 15px;
 }
 
-.card:hover .images {
+.navbar-side-card:hover .nav-card-images {
   transform: translateY(-150px);
   opacity: 0
 }
 
-.text1 {
+.nav-side-card-description {
   color: #dbf9ff;
   font-family: roboto;
   font-weight: 100;
@@ -53,7 +53,7 @@
   opacity: 0
 }
 
-.heading {
+.nav-side-card-heading {
   font-size: 38px;
   font-family: roboto;
   color: rgb(88 199 250);
@@ -66,7 +66,7 @@
   opacity: 0
 }
 
-.button {
+.nav-card-button {
   transform: translatey(200px);
   transition: .88s;
   opacity: 0;
@@ -85,35 +85,35 @@
   cursor: pointer
 }
 
-.card:hover .hover {
+.navbar-side-card:hover .nav-side-card-hover {
   display: block
 }
 
-.card:hover .heading {
+.navbar-side-card:hover .nav-side-card-heading {
   transform: translatey(-170px);
   opacity: 1
 }
 
-.card:hover .text1 {
+.navbar-side-card:hover .nav-side-card-description {
   transform: translatey(-150px);
   opacity: 1
 }
 
-.card:hover .button {
+.navbar-side-card:hover .nav-card-button {
   transform: translatey(-100px);
   opacity: 1
 }
 
-.card:hover {
+.navbar-side-card:hover {
   transform: scale(110%);
   box-shadow: 0px 0px 100px rgb(88 199 250);
 }
 
-.button:active {
+.nav-card-button:active {
   color: #0beef9
 }
 
-h1.headings {
+h1.side-animated-heading {
   color: #333;
   font-family: tahoma;
   font-size: 3rem;
@@ -126,12 +126,12 @@ h1.headings {
   width: 610px;
 }
 
-h1.headings span {
+h1.side-animated-heading span {
   font-size: 40px;
   margin-left: 2px;
 }
 
-.message {
+.nav-side-message-box {
   background-color: #76cfe5;
   color: #333;
   display: block;
@@ -144,9 +144,9 @@ h1.headings span {
   animation: openclose 5s ease-in-out infinite;
 }
 
-.word1,
-.word2,
-.word3 {
+.side-box-animated-word1,
+.side-box-animated-word2,
+.side-box-animated-word3 {
   font-family: tahoma;
 }
 
@@ -229,7 +229,7 @@ h1.headings span {
   }
 }
 
-.contentiner-box {
+.side-box-contentiner {
   background-color: #485461;
   background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
   color: white;
@@ -243,40 +243,40 @@ h1.headings span {
   height: 200px;
 }
 
-p.contentiner-box-sub {
+p.side-box-contentiner-sub {
   padding: 2rem;
   text-align: center;
 }
 
-button#neon {
+button#side-box-neon {
   font-size: 29px;
 }
 
-#neon:hover span {
+#side-box-neon:hover span {
   animation: flicker 1s linear forwards;
 }
 
-#neon:hover #a {
+#side-box-neon:hover #a {
   animation-delay: .2s;
 }
 
-#neon:hover #c {
+#side-box-neon:hover #c {
   animation-delay: .5s;
 }
 
-#neon:hover #t {
+#side-box-neon:hover #t {
   animation-delay: .6s;
 }
 
-#neon:hover #pl {
+#side-box-neon:hover #pl {
   animation-delay: .8s;
 }
 
-#neon:hover #a2 {
+#side-box-neon:hover #a2 {
   animation-delay: .9s;
 }
 
-#neon:hover #y {
+#side-box-neon:hover #y {
   animation-delay: .9s;
 }
 
@@ -301,33 +301,33 @@ button#neon {
   }
 }
 
-#neon:focus {
+#side-box-neon:focus {
   outline: none;
 }
 
-.allIcons {
+.side-box-twt-icon {
   width: 70px;
   cursor: pointer;
   color: #19d2ef;
   font-size: 20px;
 }
 
-.allIcons:hover {
+.side-box-twt-icon:hover {
   font-size: 26px;
   transition: 0.3s ease-in-out;
 }
 
 /* Media Query */
 @media(max-width: 990px) {
-  h1.headings span {
+  h1.side-animated-heading span {
     font-size: 29px;
   }
 
-  .message {
+  .nav-side-message-box {
     left: 168px;
   }
 
-  h1.headings {
+  h1.side-animated-heading {
     font-size: 2rem;
     width: 478px;
   }
@@ -413,15 +413,15 @@ button#neon {
 }
 
 @media (max-width: 790px) {
-  h1.headings span {
+  h1.side-animated-heading span {
     font-size: 19px;
   }
 
-  .message {
+  .nav-side-message-box {
     left: 109px;
   }
 
-  h1.headings {
+  h1.side-animated-heading {
     font-size: 22px;
     width: 291px;
   }
@@ -507,43 +507,43 @@ button#neon {
 }
 
 @media(max-width:713px) {
-  .card {
+  .navbar-side-card {
     height: 220px;
     width: 180px;
     left: 4rem;
     top: -17rem;
   }
 
-  .card:hover .heading {
-    transform: translatey(-122px);
+  .navbar-side-card:hover .nav-side-card-heading {
+    transform: translatey(-101px);
     opacity: 1;
   }
 
-  .card:hover .text1 {
-    transform: translatey(-118px);
+  .navbar-side-card:hover .nav-side-card-description {
+    transform: translatey(-105px);
     opacity: 1;
   }
 
-  .text1 {
+  .nav-side-card-description {
     font-size: 11px;
   }
 }
 
 @media (max-width: 620px) {
-  .contentiner-box {
+  .side-box-contentiner {
 
     margin-top: 30px;
     height: 137px;
     width: 243px;
   }
 
-  p.contentiner-box-sub {
+  p.side-box-contentiner-sub {
     padding: 0rem;
     text-align: center;
     font-size: 12px;
   }
 
-  .allIcons {
+  .side-box-twt-icon {
     width: 26px;
   }
 }
@@ -560,7 +560,7 @@ button#neon {
     visibility: hidden;
   }
 
-  h1.headings.text-white.origin-left.font-medium.text-xl.duration-300.false {
+  h1.side-animated-heading.text-white.origin-left.font-medium.text-xl.duration-300.false {
     visibility: hidden;
   }
 
@@ -572,16 +572,16 @@ button#neon {
     visibility: hidden;
   }
 
-  .contentiner-box {
+  .side-box-contentiner {
     position: relative;
     left: -6rem;
   }
 
-  h1.headings {
+  h1.side-animated-heading {
     left: -7rem;
   }
 
-  .card {
+  .navbar-side-card {
     top: -10rem;
   }
 }
@@ -591,7 +591,7 @@ button#neon {
     width: 5rem;
   }
 
-  .card {
+  .navbar-side-card {
     height: 195px;
     width: 180px;
     left: -1rem;
@@ -621,41 +621,41 @@ button#neon {
 }
 
 @media(max-width:418px) {
-  .contentiner-box {
+  .side-box-contentiner {
     padding: 3rem 1rem;
     height: 211px;
     width: 174px;
     left: -3rem;
   }
 
-  .message {
+  .nav-side-message-box {
     left: 60px;
   }
 
-  h1.headings span {
+  h1.side-animated-heading span {
     visibility: hidden;
   }
 }
 
 @media(max-width: 341px) {
-  .text1 {
+  .nav-side-card-description {
     font-size: 10px;
     text-align: center;
   }
 
-  .card {
+  .navbar-side-card {
     width: 158px;
     left: -3rem;
     top: -16rem;
   }
 
-  .heading {
+  .nav-side-card-heading {
     font-size: 28px;
   }
 }
 
 @media(max-width:292px) {
-  .card {
+  .navbar-side-card {
     left: -1.5rem;
   }
 }
diff --git a/src/plays/navbar/navListItems.js b/src/plays/navbar/navListItems.js
index 41c3462b9..7941c0c7b 100644
--- a/src/plays/navbar/navListItems.js
+++ b/src/plays/navbar/navListItems.js
@@ -38,7 +38,7 @@ const NavListItems = (props) => {
     return (
         <>
             {/* Code Starts Here */}
-            <div className='contain'>
+            <div className='navbar-play-contain'>
                 <div className={`${open ? 'w-64' : 'w-20'} duration-500 h-screen p-5 pt-8 bg-slate-900 relative md:w-30`}>
                     <img src={Collasp}
                         alt='collasp'
@@ -104,10 +104,10 @@ mt-2  menu-items`} onClick={() => filterResult('search')} >
                 <div>
                     {/* Fetching Values */}
                     <div className={`${hide ? "opacity-1" : "opacity-0"} card-content`}>
-                        <div class="contentiner-box">
-                            <p class="contentiner-box-sub">It is a responsive NavBar that helps you to navigate
-                                <button id='neon'>
-                                    <span id="n"> Re</span>
+                        <div class="side-box-contentiner">
+                            <p class="side-box-contentiner-sub">It is a responsive NavBar that helps you to navigate
+                                <button id='side-box-neon'>
+                                    <span id="re">Re</span>
                                     <span id="a">a</span>
                                     <span id="c">c</span>
                                     <span id="t">t</span>
@@ -116,14 +116,14 @@ mt-2  menu-items`} onClick={() => filterResult('search')} >
                                     <span id="y">y</span>
                                 </button>
                                 .</p>
-                            <a href='https://twitter.com/Shivamkatare_27'><FaTwitterSquare className='allIcons' /></a>
+                            <a href='https://twitter.com/Shivamkatare_27'><FaTwitterSquare className='side-box-twt-icon' /></a>
                         </div>
-                        <h1 className='headings'>
+                        <h1 className='side-animated-heading'>
                             <span>Made with</span>
-                            <div class="message">
-                                <div class="word1">CSS3</div>
-                                <div class="word2">React JS</div>
-                                <div class="word3">Tailwind CSS</div>
+                            <div class="nav-side-message-box">
+                                <div class="side-box-animated-word1">CSS3</div>
+                                <div class="side-box-animated-word2">React JS</div>
+                                <div class="side-box-animated-word3">Tailwind CSS</div>
                             </div>
                         </h1>
                     </div>
@@ -131,12 +131,12 @@ mt-2  menu-items`} onClick={() => filterResult('search')} >
                         const { id, image, title, discription, statement, url } = values
                         return (
                             <>
-                                <div className={`card ${show} ${hide ? "invisible" : "visible"}`} key={id}>
-                                    <img src={image} alt={"card-images"} className={`images`} />
-                                    <div className='hover'>
-                                        <h2 className='heading'>{title}</h2>
-                                        <div className='text1'>{discription}</div>
-                                        <a href={url}> <button className='button'>{statement}</button></a>
+                                <div className={`navbar-side-card ${show} ${hide ? "invisible" : "visible"}`} key={id}>
+                                    <img src={image} alt={"nav-card-images"} className={`nav-card-images`} />
+                                    <div className='nav-side-card-hover'>
+                                        <h2 className='nav-side-card-heading'>{title}</h2>
+                                        <div className='nav-side-card-description'>{discription}</div>
+                                        <a href={url}> <button className='nav-card-button'>{statement}</button></a>
                                     </div>
                                 </div>
                             </>