diff --git a/src/common/createplay/CreatePlay.jsx b/src/common/createplay/CreatePlay.jsx
index 93c2a31223..212a252755 100644
--- a/src/common/createplay/CreatePlay.jsx
+++ b/src/common/createplay/CreatePlay.jsx
@@ -10,26 +10,34 @@ import "./create-play.scss";
 import Loader from "common/spinner/spinner";
 import { Plays } from "common/services/plays";
 import { useNavigate } from "react-router-dom";
-import { useSearchParams } from "react-router-dom";
-import { ReactComponent as NotAllowedImage } from "../../images/img-403.svg"
+import { ReactComponent as NotAllowedImage } from "../../images/img-403.svg";
 
 const NoCreationInProdScreen = () => {
-  return <div className="w-full h-full flex flex-col justify-center items-center gap-8">
-    <div>
-      <NotAllowedImage width={550} />
-    </div>
+  return (
+    <div className="w-full h-full flex flex-col justify-center items-center gap-8">
+      <div>
+        <NotAllowedImage width={550} />
+      </div>
 
-    <div className="text-center">
-      You can't create plays in production
-      <br />
-      <a className="text-link-default" href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md" target="_blank" rel="noopener noreferrer">read this</a> for more details
+      <div className="text-center">
+        You can't create plays in production
+        <br />
+        <a
+          className="text-link-default"
+          href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          read this
+        </a>{" "}
+        for more details
+      </div>
     </div>
-  </div>
-}
+  );
+};
 
 const CreatePlay = () => {
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
-  const [searchParams] = useSearchParams();
 
   const userData = useUserData();
   let navigate = useNavigate();
@@ -102,7 +110,7 @@ const CreatePlay = () => {
   };
 
   if (process.env.NODE_ENV !== "development") {
-    return <NoCreationInProdScreen />
+    return <NoCreationInProdScreen />;
   }
 
   if (isLoading || isDataLoading) {
@@ -115,7 +123,11 @@ const CreatePlay = () => {
   }
 
   if (!isAuthenticated) {
-    window.location = NHOST.AUTH_URL(`http://localhost:${process.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create`);
+    window.location = NHOST.AUTH_URL(
+      `http://localhost:${
+        process.env.RAECT_APP_DEV_PORT ?? "3000"
+      }/plays/create`
+    );
     return null;
   } else {
     initializeData();
diff --git a/src/common/footer/ExtendedFooter.jsx b/src/common/footer/ExtendedFooter.jsx
index d2bd4cd403..8ca2d76229 100644
--- a/src/common/footer/ExtendedFooter.jsx
+++ b/src/common/footer/ExtendedFooter.jsx
@@ -11,20 +11,20 @@ const ExtendedFooter = () => {
   const { showShareModal, setShowShareModal } = useContext(SearchContext);
 
   return (
-    <div className='app-footer--home app-footer'>
-      <div className='app-footer-body'>
-        <div className='body-primary'>
+    <div className="app-footer--home app-footer">
+      <div className="app-footer-body">
+        <div className="body-primary">
           <h3>
-            <span className='sr-only'>ReactPlay</span>
-            <img src={LogoLight} alt='Logo of ReactPlay' />
+            <span className="sr-only">ReactPlay</span>
+            <img src={LogoLight} alt="Logo of ReactPlay" />
           </h3>
-          <p className='p-lg'>
+          <p className="p-lg">
             An open-source project made with ❤️ by{" "}
             <a
-              href='https://tapasadhikary.com'
-              className='text-link-default'
-              target='_blank'
-              rel='noopener noreferrer'
+              href="https://tapasadhikary.com"
+              className="text-link-default"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Tapas Adhikary
             </a>{" "}
@@ -32,49 +32,49 @@ const ExtendedFooter = () => {
           </p>
           <p>
             <small>Connect with us</small>
-            <ul className='social-links'>
+            <ul className="social-links">
               <li>
                 <a
-                  href='https://twitter.com/reactplayio'
-                  className='social-link'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  href="https://twitter.com/reactplayio"
+                  className="social-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  <BsTwitter className='icon' />
-                  <span className='sr-only'>Twitter</span>
+                  <BsTwitter className="icon" />
+                  <span className="sr-only">Twitter</span>
                 </a>
               </li>
               <li>
                 <a
-                  href='https://github.com/reactplay'
-                  className='social-link'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  href="https://github.com/reactplay"
+                  className="social-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  <BsGithub className='icon' />
-                  <span className='sr-only'>Github</span>
+                  <BsGithub className="icon" />
+                  <span className="sr-only">Github</span>
                 </a>
               </li>
               <li>
                 <a
-                  href='https://discord.gg/vrTxWUP8Am'
-                  className='social-link'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  href="https://discord.gg/vrTxWUP8Am"
+                  className="social-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  <FaDiscord className='icon' />
-                  <span className='sr-only'>Discord</span>
+                  <FaDiscord className="icon" />
+                  <span className="sr-only">Discord</span>
                 </a>
               </li>
               <li>
                 <a
-                  href='https://blog.reactplay.io/'
-                  className='social-link'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  href="https://blog.reactplay.io/"
+                  className="social-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  <IoLogoRss className='icon' />
-                  <span className='sr-only'>BlogPost</span>
+                  <IoLogoRss className="icon" />
+                  <span className="sr-only">BlogPost</span>
                 </a>
               </li>
             </ul>
@@ -83,10 +83,10 @@ const ExtendedFooter = () => {
             <small>Email us</small>{" "}
             <div>
               <a
-                href='mailto:contact@reactplay.io'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='text-link-default'
+                href="mailto:contact@reactplay.io"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-link-default"
               >
                 contact@reactplay.io
               </a>
@@ -96,70 +96,71 @@ const ExtendedFooter = () => {
             <a href="https://www.netlify.com" className="inline-block"> <img src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" /> </a>
           </p>
         </div>
-        <div className='body-secondary'>
-          <h3 className='section-title mt-3'>About</h3>
-          <p className='mb-4'>
+        <div className="body-secondary">
+          <h3 className="section-title mt-3">About</h3>
+          <p className="mb-4">
             ReactPlay is an opensource platform that helps you learn, create and
             share ReactJS projects with the developer community.
           </p>
-          <div className='flex flex-wrap gap-1'>
+          <div className="flex flex-wrap gap-1">
             <a
-              href='https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md'
-              target='_blank'
-              rel='noopener noreferrer'
-              className='btn-primary mr-2'
+              href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-primary mr-2"
             >
-              <IoAddSharp className='icon' />
-              <span className='btn-label'>Create</span>
+              <IoAddSharp className="icon" />
+              <span className="btn-label">Create</span>
             </a>
-            <Link to='/plays' className='btn-default-light'>
-              <MdManageSearch className='icon' />
-              <span className='btn-label'>Browse</span>
+            <Link to="/plays" className="btn-default-light">
+              <MdManageSearch className="icon" />
+              <span className="btn-label">Browse</span>
             </Link>
           </div>
-          <p className='mt-10'>
+          <p className="mt-10">
             Not sure how to get started? <br />
             We have a lot of ideas for you to get started.
-            <div className='mt-2'>
-              <Link to='/ideas' className='home-anchor home-anchor-sm'>
-                <span className='text'>Get started</span>
+            <div className="mt-2">
+              <Link to="/ideas" className="home-anchor home-anchor-sm">
+                <span className="text">Get started</span>
               </Link>
             </div>
-            <div className='mt-2'>
+            <div className="mt-2">
               <a
-                href='https://blog.reactplay.io/'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='home-anchor home-anchor-sm'
+                href="https://blog.reactplay.io/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="home-anchor home-anchor-sm"
               >
-                <span className='text'>Read our blog posts</span>
+                <span className="text">Read our blog posts</span>
               </a>
             </div>
           </p>
         </div>
-        <div className='body-tertiary'>
-          <h3 className='section-title'>Show love</h3>
-          <p className='mb-2'>
+        <div className="body-tertiary">
+          <h3 className="section-title">Show love</h3>
+          <p className="mb-2">
             Enjoying ReactPlay? Please help us spreading the word You can share
             about ReactPlay on any of your favorite social media platforms.
           </p>
           <button
             onClick={() => setShowShareModal(!showShareModal)}
-            className='home-anchor home-anchor-sm'
-            href='#'
+            className="home-anchor home-anchor-sm"
+            href="#"
           >
-            <span className='text'>Share about ReactPlay</span>
+            <span className="text">Share about ReactPlay</span>
           </button>
-          <p className='mt-10 mb-2'>
+          <p className="mt-10 mb-2">
             Your support means a lot to us. Want to be our Sponsor and support
             us?
           </p>
           <a
-            target='_blank'
-            className='home-anchor home-anchor-sm'
-            href='https://github.com/sponsors/reactplay'
+            target="_blank"
+            rel="noopener noreferrer"
+            className="home-anchor home-anchor-sm"
+            href="https://github.com/sponsors/reactplay"
           >
-            <span className='text'>Sponsor ReactPlay</span>
+            <span className="text">Sponsor ReactPlay</span>
           </a>
         </div>
       </div>
diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx
index b7a65fb540..845f284f7a 100644
--- a/src/common/footer/Footer.jsx
+++ b/src/common/footer/Footer.jsx
@@ -1,13 +1,17 @@
 import { Link } from "react-router-dom";
 
-const Footer = () => {  return (
-    <footer className='app-footer text-center'>
-      <hr className='separater' />
-      <div className='flex justify-center items-center py-2'>
-        <Link to='/tech-stacks'>
+const Footer = () => {
+  return (
+    <footer className="app-footer text-center">
+      <hr className="separater" />
+      <div className="flex justify-center items-center py-2">
+        <Link to="/tech-stacks">
           ReactPlay - The MIT License (MIT) Copyright &copy;
           {new Date().getFullYear()} . Powered by{" "}
-          <a className='text-link-default'>Top Notch Tech Stacks</a>.
+          <a href="/" className="text-link-default">
+            Top Notch Tech Stacks
+          </a>
+          .
         </Link>
       </div>
     </footer>
diff --git a/src/common/playcreated/PlayCreated.jsx b/src/common/playcreated/PlayCreated.jsx
index 3fbc2b7544..69fd3e7b67 100644
--- a/src/common/playcreated/PlayCreated.jsx
+++ b/src/common/playcreated/PlayCreated.jsx
@@ -1,67 +1,102 @@
-import { submit } from 'common/services/request';
-import { FetchPlaysByID } from 'common/services/request/query/fetch-plays';
-import { toKebabCase } from 'common/services/string';
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import './play-created.scss'
+import { submit } from "common/services/request";
+import { FetchPlaysByID } from "common/services/request/query/fetch-plays";
+import { toKebabCase } from "common/services/string";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import "./play-created.scss";
 
 const PlayCreated = () => {
-  const {playid} = useParams()
-  const [play, setPlay] =useState();
-  const [loading, setLoading] =useState(true)
+  const { playid } = useParams();
+  const [play, setPlay] = useState();
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
-    submit(FetchPlaysByID(playid)).then(res => {
-      setPlay(res[0])
-      
-    }).finally(() => {
-      setLoading(false)
-    })
-  }, [playid])
-  
-  if(loading) {
-    return <div></div>
+    submit(FetchPlaysByID(playid))
+      .then((res) => {
+        setPlay(res[0]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [playid]);
+
+  if (loading) {
+    return <div></div>;
   }
   return (
-
     <div className="w-full h-full flex flex-col justify-center items-center create-plays-wrapper">
       <div>
-      <span className='title-primary'>
-        <strong>{play.name}</strong> Created
-      </span>
+        <span className="title-primary">
+          <strong>{play.name}</strong> Created
+        </span>
       </div>
-    <div className="w-full max-w-6xl flex flex-col bg-white shadow-md rounded px-8 pt-6 pb-8 mb-6">
-      <div>
-     Congratulations! Your play has been created
-     </div>
-     <div>
-     <ol className="ordered-list">
-      <li className="ordered-nav--link">
-        Fork <a className="play-create-anchor" href="https://github.com/reactplay/react-play" target="_blank" >reactplay</a> repository
-      </li>
-      <li>
-        Open command line console of your choice
-      </li>
-      <li>
-        Run following command on your <a className="play-create-anchor" href="https://github.com/reactplay/react-play" target="_blank" >reactplay</a> project folder<code className="console-wrapper">npx create-react-play -c {play.id}</code>
-      </li>
-      <li>
-        Install dependencies<code className="console-wrapper">npm install <br/># OR <br/> yarn </code>
-      </li>
-      <li>
-        Start application<code className="console-wrapper">npm start <br/># OR <br/> yarn start</code>
-      </li>
-      <li>
-        Find your play under <code className="console-wrapper">&lt;reactplay-directory&gt;/src/plays/{toKebabCase(play.name)}</code>
-      </li>
-     </ol>
-     <div>
-      Refer <a className="play-create-anchor" href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md" target="_blank">play creation guide</a> for more information
-      </div><div>
-      Happy coding!!
-     </div>
-     </div>
-    </div></div>
-  )
+      <div className="w-full max-w-6xl flex flex-col bg-white shadow-md rounded px-8 pt-6 pb-8 mb-6">
+        <div>Congratulations! Your play has been created</div>
+        <div>
+          <ol className="ordered-list">
+            <li className="ordered-nav--link">
+              Fork{" "}
+              <a
+                className="play-create-anchor"
+                href="https://github.com/reactplay/react-play"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                reactplay
+              </a>{" "}
+              repository
+            </li>
+            <li>Open command line console of your choice</li>
+            <li>
+              Run following command on your{" "}
+              <a
+                className="play-create-anchor"
+                href="https://github.com/reactplay/react-play"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                reactplay
+              </a>{" "}
+              project folder
+              <code className="console-wrapper">
+                npx create-react-play -c {play.id}
+              </code>
+            </li>
+            <li>
+              Install dependencies
+              <code className="console-wrapper">
+                npm install <br /># OR <br /> yarn{" "}
+              </code>
+            </li>
+            <li>
+              Start application
+              <code className="console-wrapper">
+                npm start <br /># OR <br /> yarn start
+              </code>
+            </li>
+            <li>
+              Find your play under{" "}
+              <code className="console-wrapper">
+                &lt;reactplay-directory&gt;/src/plays/{toKebabCase(play.name)}
+              </code>
+            </li>
+          </ol>
+          <div>
+            Refer{" "}
+            <a
+              className="play-create-anchor"
+              href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              play creation guide
+            </a>{" "}
+            for more information
+          </div>
+          <div>Happy coding!!</div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default PlayCreated;
diff --git a/src/common/playlists/PlayList.jsx b/src/common/playlists/PlayList.jsx
index 751c47293d..5e49ed56a0 100644
--- a/src/common/playlists/PlayList.jsx
+++ b/src/common/playlists/PlayList.jsx
@@ -1,31 +1,27 @@
 import PlayThumbnail from "./PlayThumbnail";
 import { ReactComponent as ImageOops } from "images/img-oops.svg";
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment } from "react";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "common/spinner/spinner";
 import * as all_plays from "plays";
-import { useParams } from "react-router-dom";
-import useGetPlays from 'common/hooks/useGetPlays'
+import useGetPlays from "common/hooks/useGetPlays";
 
 import "./playlist.css";
 import { toSanitized } from "common/services/string";
 
 const PlayList = () => {
   const [loading, error, plays] = useGetPlays();
-  const [allPlays, setAllPlays] = useState([])
 
-  let { playid } = useParams(); // return the parameter of url
-  
   if (loading) {
-   return <Loader />;
+    return <Loader />;
   }
 
-  if (plays?.length === 0) {
+  if (plays?.length === 0 || error) {
     return (
-      <div className='play-not-found'>
-        <ImageOops className='play-not-found-image' />
-        <p className='page-404-lead'>Play not found</p>
-        <p className='page-404-desc'>
+      <div className="play-not-found">
+        <ImageOops className="play-not-found-image" />
+        <p className="page-404-lead">Play not found</p>
+        <p className="page-404-desc">
           Please change your search or adjust filters to find plays.
         </p>
       </div>
@@ -33,15 +29,13 @@ const PlayList = () => {
   }
   return (
     <Fragment>
-      <ol className='list-plays'>
+      <ol className="list-plays">
         {plays?.map((play, index) => (
-          
           <React.Fragment key={index}>
-          {
-            all_plays[play.component ? play.component : toSanitized(play.title_name)] && <PlayThumbnail key={play.id} play={play}/>
-          }
+            {all_plays[
+              play.component ? play.component : toSanitized(play.title_name)
+            ] && <PlayThumbnail key={play.id} play={play} />}
           </React.Fragment>
-          
         ))}
       </ol>
     </Fragment>
diff --git a/src/common/services/issues.js b/src/common/services/issues.js
index 6dd95a2d85..8151724336 100644
--- a/src/common/services/issues.js
+++ b/src/common/services/issues.js
@@ -1,5 +1,3 @@
-import { submit } from "./request";
-import { fetchAllTags } from "./request/query";
 import { GitAPI } from "git-repo-api";
 import { GIT } from "../const";
 
diff --git a/src/common/services/plays.js b/src/common/services/plays.js
index f38950f2f8..14fa6af0b0 100644
--- a/src/common/services/plays.js
+++ b/src/common/services/plays.js
@@ -1,5 +1,4 @@
-import { submit, submitMutation } from "./request";
-import { createATagQuery, fetchAllTags } from "./request/query";
+import { submitMutation } from "./request";
 import {
   associatePlayWithTagQuery,
   createPlayQuery,
diff --git a/src/common/services/request/index.js b/src/common/services/request/index.js
index 0dcf6670f9..91015a67d5 100644
--- a/src/common/services/request/index.js
+++ b/src/common/services/request/index.js
@@ -4,11 +4,6 @@ import {
 } from "json-graphql-parser/v2/index.js";
 
 const BACKEND_URL = `${process.env.REACT_APP_NHOST_BACKEND_URL}/${process.env.REACT_APP_NHOST_VERSION}/${process.env.REACT_APP_NHOST_ENDPOINT}`;
-const header = {
-  headers: {
-    "Content-Type": "application/json",
-  },
-};
 
 /**
  * Run GraphQL queries using Axios using multiple  JSON object
diff --git a/src/common/techstack/TechStacks.jsx b/src/common/techstack/TechStacks.jsx
index 8e830c2093..1518d6f995 100644
--- a/src/common/techstack/TechStacks.jsx
+++ b/src/common/techstack/TechStacks.jsx
@@ -2,20 +2,24 @@ import { TechStackInfo } from "./TechStackInfo";
 
 const TechStack = () => {
   return (
-    <div className='app-body'>
-      <h2 className="section-title text-center pt-8 mt-48">ReactPlay is proudly powered by</h2>
-      <div className='list-brand-tech-stack'>
-      {/* <div className='md:w-[800px] 2xl:w-[1000px] w-full flex flex-wrap m-8'> */}
+    <div className="app-body">
+      <h2 className="section-title text-center pt-8 mt-48">
+        ReactPlay is proudly powered by
+      </h2>
+      <div className="list-brand-tech-stack">
+        {/* <div className='md:w-[800px] 2xl:w-[1000px] w-full flex flex-wrap m-8'> */}
         {TechStackInfo.map((Item, idx) => {
           if (Item.type === "icon") {
             return (
               <a
                 key={idx}
-                target='_blank'
+                target="_blank"
+                rel="noreferrer"
                 href={Item.link}
-                className='brand-tech-stack'
+                className="brand-tech-stack"
               >
-                <Item.comp size='80' className='icon' />
+                {/* eslint-disable-next-line react/jsx-pascal-case */}
+                <Item.comp size="80" className="icon" />
                 <p>{Item.text}</p>
               </a>
             );
@@ -23,14 +27,17 @@ const TechStack = () => {
             return (
               <a
                 key={idx}
-                target='_blank'
+                target="_blank"
+                rel="noreferrer"
                 href={Item.link}
-                className='brand-tech-stack'
+                className="brand-tech-stack"
               >
                 <img src={Item.comp} alt={Item.comp} />
-                <p className='text-center'>{Item.text}</p>
+                <p className="text-center">{Item.text}</p>
               </a>
             );
+          } else {
+            return null;
           }
         })}
       </div>
@@ -39,4 +46,3 @@ const TechStack = () => {
 };
 
 export default TechStack;
-
diff --git a/src/plays/context-with-real-usecases/ContextWithRealUsecases.jsx b/src/plays/context-with-real-usecases/ContextWithRealUsecases.jsx
index 78d9d88a6a..b8a559a5a9 100644
--- a/src/plays/context-with-real-usecases/ContextWithRealUsecases.jsx
+++ b/src/plays/context-with-real-usecases/ContextWithRealUsecases.jsx
@@ -1,4 +1,4 @@
-import { createContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import PlayHeader from "common/playlists/PlayHeader";
 import "./contextWithRealUsecases.css";
 import ContextInfoSlider from "./components/ContextInfoSlider";
@@ -35,22 +35,18 @@ function ContextWithRealUsecases(props) {
 
   //prev slide
   const handlePrev = () => {
-    if (index > 1) {
-      setIndex(index - 1);
-    } else setIndex(5);
+    setIndex((preV) => (preV > 1 ? preV - 1 : 5));
   };
 
   //next slide
-  const handleNext = () => {
-    if (index < 5) {
-      setIndex(index + 1);
-    } else setIndex(1);
-  };
+  const handleNext = useCallback(() => {
+    setIndex((preV) => (preV < 5 ? preV + 1 : 1));
+  }, []);
 
   //As the we click the menu, it will change the slider
   useEffect(() => {
     handleNext();
-  }, [activeCuisine]);
+  }, [activeCuisine, handleNext]);
   return (
     <>
       <div className="play-details">
diff --git a/src/plays/countries-statics/Country.jsx b/src/plays/countries-statics/Country.jsx
index fa3fc1454a..3da5868647 100644
--- a/src/plays/countries-statics/Country.jsx
+++ b/src/plays/countries-statics/Country.jsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 export default function Country({ activeGeo }) {
   const [country, setCountry] = useState();
   const [isloading, setIsLoading] = useState(false);
   const [errorInfo, setErrorInfo] = useState(null);
-  const getCountry = () => {
+  const getCountry = useCallback((activeGeoVal) => {
     setIsLoading(true);
-    fetch(`https://restcountries.com/v3.1/alpha/${activeGeo}`)
+    fetch(`https://restcountries.com/v3.1/alpha/${activeGeoVal}`)
       .then((response) => {
         if (!response.ok) {
           throw Error("Something went wrong");
@@ -23,10 +23,10 @@ export default function Country({ activeGeo }) {
         setCountry();
         setErrorInfo(e.message);
       });
-  };
+  }, []);
   useEffect(() => {
-    getCountry();
-  }, [activeGeo]);
+    getCountry(activeGeo);
+  }, [activeGeo, getCountry]);
   return (
     <div className="w-[100%] xl:w-[40%] my-8">
       {errorInfo && (
@@ -47,6 +47,7 @@ export default function Country({ activeGeo }) {
               </h1>
               <div className="md:flex md:w-[70%] md:mx-auto  xl:block">
                 <img
+                  alt="country-flag"
                   src={country.flags.png}
                   className="w-[350px] h-[200px] my-2 mx-auto md:mt-6"
                 />
diff --git a/src/plays/countries-statics/Map.jsx b/src/plays/countries-statics/Map.jsx
index 1f7a67f5ca..a7367966b5 100644
--- a/src/plays/countries-statics/Map.jsx
+++ b/src/plays/countries-statics/Map.jsx
@@ -1,10 +1,4 @@
-import { useEffect, useState } from "react";
-import {
-  ComposableMap,
-  ZoomableGroup,
-  Geographies,
-  Geography,
-} from "react-simple-maps";
+import { ComposableMap, Geographies, Geography } from "react-simple-maps";
 import mapdata from "./featues.json";
 export default function Map({ activeGeo, handleClickMap }) {
   const activeStyle = {
diff --git a/src/plays/fun-quiz/QuizScreen.jsx b/src/plays/fun-quiz/QuizScreen.jsx
index 0289ab5c72..70af719450 100644
--- a/src/plays/fun-quiz/QuizScreen.jsx
+++ b/src/plays/fun-quiz/QuizScreen.jsx
@@ -12,7 +12,11 @@ const answerState = {
 };
 
 function QuizScreen({ category, getQuizSummary }) {
-  const [quizData, setQuizData] = useState({ loading: false, data: [], error: false });
+  const [quizData, setQuizData] = useState({
+    loading: false,
+    data: [],
+    error: false,
+  });
   const [answer, setAnswer] = useState({ ...answerState });
   const [result, setResult] = useState([]);
   const [questionNumber, setQuestionNumber] = useState(0);
@@ -30,7 +34,7 @@ function QuizScreen({ category, getQuizSummary }) {
         );
         const { results } = await response.json();
         // if there is no data coming from api but status 200 is returned then we want to end up in catch block
-        if (!results.length) throw new Error(); 
+        if (!results.length) throw new Error();
         const createOptions = results.map((result) => {
           const { incorrect_answers, correct_answer } = result;
           const options = [...incorrect_answers];
@@ -41,12 +45,16 @@ function QuizScreen({ category, getQuizSummary }) {
           );
           return { ...result, options };
         });
-        return setQuizData({ data: createOptions, loading: false, error: false });
+        return setQuizData({
+          data: createOptions,
+          loading: false,
+          error: false,
+        });
       } catch (err) {
         setQuizData({ ...quizData, loading: false, error: true });
       }
     })();
-  }, []);
+  }, [formatCategoryText, quizData]);
 
   // select and deselect the answer
   const handleAnswerClick = (val) => (e) => {
@@ -102,7 +110,7 @@ function QuizScreen({ category, getQuizSummary }) {
       }, 1000);
       return () => clearInterval(setTiming);
     } else if (!!quizData.data.length) {
-      setAnswer('')
+      setAnswer("");
       handleConfirm(true);
     }
   }, [timer, handleConfirm, quizData.data]);
@@ -129,29 +137,29 @@ function QuizScreen({ category, getQuizSummary }) {
 
   // if there is an no data we display this message.
   if (quizData?.error) {
-    return (<div>We Apologize! Something Error Occured!</div>)
+    return <div>We Apologize! Something Error Occured!</div>;
   }
 
   return (
-    <div className='fun-quiz-screen'>
+    <div className="fun-quiz-screen">
       {quizData.loading && (
-        <div className='loading-overlay'>
-          <img src={confuseIcon} alt='loading' />
+        <div className="loading-overlay">
+          <img src={confuseIcon} alt="loading" />
         </div>
       )}
       {!quizData.loading && (
-        <div className='section'>
+        <div className="section">
           <div className={`timer ${timer <= 5 && "caution"}`}>{timer}</div>
-          <div className='question-info'>Question: {questionNumber + 1}</div>
-          <div className='question'>
+          <div className="question-info">Question: {questionNumber + 1}</div>
+          <div className="question">
             <h1
               dangerouslySetInnerHTML={{ __html: currentQuestion?.question }}
             />
           </div>
-          <div className='options'>
+          <div className="options">
             {currentQuestion?.options?.map((option, index) => {
               return (
-                <div key={index} className='single-opt'>
+                <div key={index} className="single-opt">
                   <div
                     onClick={handleAnswerClick(option)}
                     className={itemClassDisplayController(option)}
@@ -161,17 +169,20 @@ function QuizScreen({ category, getQuizSummary }) {
               );
             })}
           </div>
-          <div className='footer'>
-            <button className='link' onClick={() => handleConfirm(true)}>
+          <div className="footer">
+            <button className="link" onClick={() => handleConfirm(true)}>
               Skip
             </button>
             {answer.answer && !answer.cheat && (
-              <button onClick={() => handleConfirm()} className='confirm-button'>
+              <button
+                onClick={() => handleConfirm()}
+                className="confirm-button"
+              >
                 {questionNumber === 19 ? "Submit" : "Confirm"}
               </button>
             )}
             {!answer.answer && (
-              <button onClick={cheatHandler} className='cheat-button'>
+              <button onClick={cheatHandler} className="cheat-button">
                 I want to Cheat
               </button>
             )}
diff --git a/src/plays/image-carousel/ImageCarousel.tsx b/src/plays/image-carousel/ImageCarousel.tsx
index dde88c942b..7ad9f13c79 100644
--- a/src/plays/image-carousel/ImageCarousel.tsx
+++ b/src/plays/image-carousel/ImageCarousel.tsx
@@ -1,100 +1,123 @@
-import React,{useEffect, useState} from 'react';
-import PlayHeader from 'common/playlists/PlayHeader';
-import data from './common/data';
-import './styles.css';
-
-function ImageCarousel(props:any) {
+import React, { useCallback, useEffect, useState } from "react";
+import PlayHeader from "common/playlists/PlayHeader";
+import data from "./common/data";
+import "./styles.css";
 
+function ImageCarousel(props: any) {
   // Your Code Start below.
-  const [activeSlide,setActiveSlide]=useState<number>(Math.floor(data.length/2)|| 0);
-  const [startPos,setStartPos]=useState<number>(0);
-  const [endPos,setEndPos]=useState<number>(0);
-  const totalSlides:number=data.length;
-  const threshold:number = 100;
-  
-  const isSwipe=()=>Math.abs(endPos-startPos)>=threshold;
+  const [activeSlide, setActiveSlide] = useState<number>(
+    Math.floor(data.length / 2) || 0
+  );
+  const [startPos, setStartPos] = useState<number>(0);
+  const [endPos, setEndPos] = useState<number>(0);
+  const totalSlides: number = data.length;
+  const threshold: number = 100;
 
+  const isSwipe = useCallback(
+    () => Math.abs(endPos - startPos) >= threshold,
+    [endPos, startPos]
+  );
 
-  const touchEnd = (e:TouchEvent) => {
+  const touchEnd = (e: TouchEvent) => {
     setEndPos(e.changedTouches[0].clientX);
   };
-  const touchStart=(e:TouchEvent)=>{
+  const touchStart = (e: TouchEvent) => {
     setStartPos(e.touches[0].clientX);
-  }
-  
-  const handleActiveSlide=(direction:number=0)=>{
-    // 0 -> right 1-> left
-    if(direction===0){
-      if(activeSlide===data.length-1){
-        setActiveSlide(0);
-        return;
+  };
+
+  const handleActiveSlide = useCallback(
+    (direction: number = 0) => {
+      // 0 -> right 1-> left
+      if (direction === 0) {
+        setActiveSlide((preV) =>
+          activeSlide === data.length - 1 ? 0 : preV + 1
+        );
       }
-      setActiveSlide(prev=>prev+1);
-    }
-    if(direction===1){
-      if(activeSlide===0){
-        setActiveSlide(totalSlides-1);
-        return;
+      if (direction === 1) {
+        setActiveSlide((preV) =>
+          activeSlide === 0 ? totalSlides - 1 : preV - 1
+        );
       }
-      setActiveSlide(prev=>prev-1);
-    }
-  }
+    },
+    [activeSlide, totalSlides]
+  );
 
-  useEffect(()=>{
-    const sliderContainer=document.querySelector('.image-slider') as HTMLElement;
-    const width:number=sliderContainer.offsetWidth;
+  useEffect(() => {
+    const sliderContainer = document.querySelector(
+      ".image-slider"
+    ) as HTMLElement;
+    const width: number = sliderContainer.offsetWidth;
 
-    console.log("image",width,activeSlide )
-    if(!sliderContainer)return;
+    console.log("image", width, activeSlide);
+    if (!sliderContainer) return;
 
-    sliderContainer.style.transform=`
-      translateX(-${activeSlide*width}px)
-    `
-  },[activeSlide]);
+    sliderContainer.style.transform = `
+      translateX(-${activeSlide * width}px)
+    `;
+  }, [activeSlide, handleActiveSlide]);
 
-  useEffect(()=>{
-    const wrapperContainer=document.querySelector('.wrapper') as HTMLElement;
-    wrapperContainer.addEventListener('touchstart',touchStart,{passive:true});
-    wrapperContainer.addEventListener('touchend',touchEnd,{passive:true});
-  },[]);
+  useEffect(() => {
+    const wrapperContainer = document.querySelector(".wrapper") as HTMLElement;
+    wrapperContainer.addEventListener("touchstart", touchStart, {
+      passive: true,
+    });
+    wrapperContainer.addEventListener("touchend", touchEnd, { passive: true });
+  }, []);
 
-  useEffect(()=>{
-    console.log(endPos,startPos,isSwipe())
-    if(!isSwipe())return;
+  useEffect(() => {
+    console.log(endPos, startPos, isSwipe());
+    if (!isSwipe()) return;
 
-    if(endPos-startPos<0){
+    if (endPos - startPos < 0) {
       handleActiveSlide(0);
     }
 
-    if(endPos-startPos>0){
+    if (endPos - startPos > 0) {
       handleActiveSlide(1);
     }
-  },[endPos]);
+  }, [endPos, handleActiveSlide, isSwipe, startPos]);
 
   return (
     <>
       <div className="play-details image-carousel">
         <PlayHeader play={props} />
         <div className="play-details-body">
-          <div className='wrapper'>
-            <div className='image-element'>
+          <div className="wrapper">
+            <div className="image-element">
               <div className="image-slider-body">
-              <div className='image-slider'>
-                {
-                  data.map(({id,imgSrc,alt})=>(
-                    <img className='image' src={imgSrc} alt={alt} data-id={id} key={`image${id}`}/>
-                  ))
-                }
+                <div className="image-slider">
+                  {data.map(({ id, imgSrc, alt }) => (
+                    <img
+                      className="image"
+                      src={imgSrc}
+                      alt={alt}
+                      data-id={id}
+                      key={`image${id}`}
+                    />
+                  ))}
+                </div>
               </div>
+              <div
+                className="right-arrow arrow"
+                onClick={() => handleActiveSlide(0)}
+              >
+                &#8594;
               </div>
-              <div className='right-arrow arrow' onClick={()=>handleActiveSlide(0)}>&#8594;</div>
-              <div className='left-arrow arrow' onClick={()=>handleActiveSlide(1)}>&#8592;</div>
+              <div
+                className="left-arrow arrow"
+                onClick={() => handleActiveSlide(1)}
+              >
+                &#8592;
+              </div>
+            </div>
+            <div className="dots">
+              {data.map((_, index) => (
+                <div
+                  className={`dot ${index === activeSlide && "active"}`}
+                  onClick={() => setActiveSlide(index)}
+                ></div>
+              ))}
             </div>
-            <div className='dots'>
-              {
-                data.map((_,index)=><div className={`dot ${index===activeSlide && "active"}`} onClick={()=>setActiveSlide(index)}></div>)
-              }
-            </div> 
           </div>
         </div>
       </div>
diff --git a/src/plays/password-generator/PasswordGenerator.jsx b/src/plays/password-generator/PasswordGenerator.jsx
index c62bae6766..521b599a0c 100644
--- a/src/plays/password-generator/PasswordGenerator.jsx
+++ b/src/plays/password-generator/PasswordGenerator.jsx
@@ -1,5 +1,5 @@
 import PlayHeader from "common/playlists/PlayHeader";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import "./password-generator-style.css";
 import data from "./data.json";
@@ -13,7 +13,6 @@ const config = {
 };
 
 function PasswordGenerator(props) {
-
   // Your Code Start below.
   const [password, setPassword] = useState({ status: false, password: "" });
   const [passwordConfig, setPasswordConfig] = useState({ ...config });
@@ -33,7 +32,7 @@ function PasswordGenerator(props) {
   };
 
   // arrange data to feed the generatePassword function
-  const arrangeData = () => {
+  const arrangeData = useCallback(() => {
     const { numbers, special, uppercase, lowercase } = passwordConfig;
     const parseData = (val, key) => {
       if (val) return data[key];
@@ -46,10 +45,10 @@ function PasswordGenerator(props) {
       ...parseData(lowercase, "lowercase"),
     ];
     return concated;
-  };
+  }, [passwordConfig]);
 
   // Generate a random password
-  const generatePassword = () => {
+  const generatePassword = useCallback(() => {
     setError(false);
     const concated = arrangeData();
     let finalPassword = "";
@@ -57,13 +56,13 @@ function PasswordGenerator(props) {
       finalPassword += concated[randomNumberGenerator(concated.length)];
     }
     return finalPassword;
-  };
+  }, [arrangeData, passwordConfig]);
 
   // generate password button click handler
-  const generateHander = () => {
+  const generateHander = useCallback(() => {
     const finalPassword = generatePassword();
     setPassword({ status: false, password: finalPassword });
-  };
+  }, [generatePassword]);
 
   // Copy the password to the clipboard
   const onCopyClick = (e) => {
@@ -73,7 +72,7 @@ function PasswordGenerator(props) {
   };
 
   const ErrorBox = () => {
-    return <p className='error'>You cannot Uncheck All At Once.</p>;
+    return <p className="error">You cannot Uncheck All At Once.</p>;
   };
 
   const checkhandler = (id, inputCheckbox) => (e) => {
@@ -91,107 +90,107 @@ function PasswordGenerator(props) {
 
   useEffect(() => {
     generateHander();
-  }, []);
+  }, [generateHander]);
 
   const setLength = (value) => {
-    setPasswordConfig({ ...passwordConfig, ["length"]: value });
+    setPasswordConfig({ ...passwordConfig, length: value });
     setError(false);
   };
 
   return (
-    <div className='play-details'>
+    <div className="play-details">
       <PlayHeader play={props} />
-      <div className='play-details-body password-generator'>
-        <div className='main'>
-          <h1 className='title'>Password Generator</h1>
+      <div className="play-details-body password-generator">
+        <div className="main">
+          <h1 className="title">Password Generator</h1>
           {error && <ErrorBox />}
-          <div className='inputfield'>
+          <div className="inputfield">
             <input
-              type='text'
-              className='text'
+              type="text"
+              className="text"
               disabled
               value={password.password}
               readOnly
             />
-            <button className='copy copybtn' onClick={onCopyClick}>
+            <button className="copy copybtn" onClick={onCopyClick}>
               {password?.status ? "Copied" : "Copy"}
             </button>
           </div>
-          <div className='block'>
+          <div className="block">
             <input
-              type='checkbox'
-              name='lowercase'
-              id='lowercaseToggle'
+              type="checkbox"
+              name="lowercase"
+              id="lowercaseToggle"
               hidden
               checked={passwordConfig.lowercase}
               readOnly
             />
             <div
-              className='select lowercase'
-              id='lower'
+              className="select lowercase"
+              id="lower"
               onClick={checkhandler("lowercase", passwordConfig.lowercase)}
             >
               <h3>Lowercase</h3>
-              <div className='bigCircle'>
-                <div className='smallCircle'></div>
+              <div className="bigCircle">
+                <div className="smallCircle"></div>
               </div>
             </div>
             <input
-              type='checkbox'
-              id='uppercaseToggle'
+              type="checkbox"
+              id="uppercaseToggle"
               hidden
               checked={passwordConfig.uppercase}
               readOnly
             />
             <div
-              className='select uppercase'
+              className="select uppercase"
               onClick={checkhandler("uppercase", passwordConfig.uppercase)}
             >
               <h3>Uppercase</h3>
-              <div className='bigCircle'>
-                <div className='smallCircle'></div>
+              <div className="bigCircle">
+                <div className="smallCircle"></div>
               </div>
             </div>
           </div>
-          <div className='block'>
+          <div className="block">
             <input
-              type='checkbox'
-              id='numberToggle'
+              type="checkbox"
+              id="numberToggle"
               hidden
               checked={passwordConfig.numbers}
               readOnly
             />
             <div
-              className='select number'
+              className="select number"
               onClick={checkhandler("numbers", passwordConfig.numbers)}
             >
               <h3>Number</h3>
-              <div className='bigCircle'>
-                <div className='smallCircle'></div>
+              <div className="bigCircle">
+                <div className="smallCircle"></div>
               </div>
             </div>
             <input
-              type='checkbox'
-              id='specialCharToggle'
+              type="checkbox"
+              id="specialCharToggle"
               hidden
               checked={passwordConfig.special}
               readOnly
             />
             <div
-              className='select specialchar'
+              className="select specialchar"
               onClick={checkhandler("special", passwordConfig.special)}
             >
               <h3>Special Char</h3>
-              <div className='bigCircle'>
-                <div className='smallCircle'></div>
+              <div className="bigCircle">
+                <div className="smallCircle"></div>
               </div>
             </div>
           </div>
-          <div className='block length'>
-            <div className='flexlength'>
+          <div className="block length">
+            <div className="flexlength">
               <h3>Length</h3>
               <select
-                className='select'
+                className="select"
                 onChange={(e) => setLength(e.target.value)}
                 value={passwordConfig.length}
               >
@@ -205,13 +204,13 @@ function PasswordGenerator(props) {
               </select>
             </div>
           </div>
-          <div className='block generate'>
-            <div className='sub'>
+          <div className="block generate">
+            <div className="sub">
               <input
-                type='submit'
+                type="submit"
                 onClick={generateHander}
-                className='generate'
-                value='Generate Password'
+                className="generate"
+                value="Generate Password"
               />
             </div>
           </div>
diff --git a/src/plays/quote-generator/QuoteGenerator.jsx b/src/plays/quote-generator/QuoteGenerator.jsx
index ce42a41fcc..5ad963c381 100644
--- a/src/plays/quote-generator/QuoteGenerator.jsx
+++ b/src/plays/quote-generator/QuoteGenerator.jsx
@@ -8,7 +8,6 @@ const fetchQuote = () => {
 };
 
 function QuoteGenerator(props) {
-
   // Your Code Start below.
   const [quoteArray, setQuoteArray] = useState([]);
   const [current, setCurrent] = useState(0);
@@ -87,12 +86,13 @@ function QuoteGenerator(props) {
                 {quoteArray.length > 0 && <p>{quoteArray[current][0]}</p>}
               </div>
               <div className="page-author">
-                {quoteArray.length > 0 && 
-                <span className="page">
-                  <p>
-                    {current + 1}/{quoteArray.length}
-                  </p>
-                </span>}
+                {quoteArray.length > 0 && (
+                  <span className="page">
+                    <p>
+                      {current + 1}/{quoteArray.length}
+                    </p>
+                  </span>
+                )}
                 <span className="quote-author">
                   {quoteArray.length > 0 && (
                     <p className="author">- {quoteArray[current][1]}</p>