diff --git a/src/common/playlists/DynamicBanner.jsx b/src/common/playlists/DynamicBanner.jsx
new file mode 100644
index 000000000..f90dcf3f1
--- /dev/null
+++ b/src/common/playlists/DynamicBanner.jsx
@@ -0,0 +1,61 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import thumbPlay from 'images/thumb-play.png';
+import { Link } from 'react-router-dom';
+import { MdArrowRightAlt } from 'react-icons/md';
+
+const DynamicBanner = ({ randomPlay }) => {
+  const [coverImage, setCoverImage] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    if (loading && randomPlay && randomPlay.cover) {
+      setCoverImage(randomPlay.cover);
+      setLoading(false);
+    } else {
+      setLoading(true);
+      import(`plays/${randomPlay.slug}/cover.png`)
+        .then((Cover) => {
+          setCoverImage(Cover.default);
+          setLoading(false);
+        })
+        .catch((err) => {
+          setCoverImage(thumbPlay);
+
+          return {
+            success: false,
+            error: err,
+            message: `Cover image not found for the play ${randomPlay.name}. Setting the default cover image...`
+          };
+        });
+    }
+  }, [randomPlay]);
+
+  if (loading) return <p>loading...</p>;
+
+  return (
+    <Fragment>
+      <div
+        className="dynamic-banner-container"
+        style={{
+          background: `linear-gradient(rgba(0,0,0,0.5), #020808),url(${coverImage} ) center/cover no-repeat`,
+          minHeight: '50vh'
+        }}
+      >
+        <div className="dynamic-banner-body md:pl-14 px-4 py-2 md:py-3">
+          <h1 className="text-white text-3xl md:text-4xl lg:text-5xl">{randomPlay.name}</h1>
+          <p className="text-gray-400 mt-2 text-xs md:text-base ">{randomPlay.description}</p>
+          <Link to={`/plays/${encodeURI(randomPlay?.github?.toLowerCase())}/${randomPlay.slug}`}>
+            <button className="banner-button rounded-full font-extrabold uppercase px-8 md:px-12 md:py-1">
+              Let's Play <MdArrowRightAlt className="right-arrow-icon" size={40} />
+            </button>
+          </Link>
+
+          {/* <Link to={``}><button className='banner-button'>See Creator's profile</button></Link> */}
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default DynamicBanner;
diff --git a/src/common/playlists/PlayList.jsx b/src/common/playlists/PlayList.jsx
index 92cf55414..d1671eb1a 100644
--- a/src/common/playlists/PlayList.jsx
+++ b/src/common/playlists/PlayList.jsx
@@ -1,6 +1,6 @@
 import PlayThumbnail from './PlayThumbnail';
 import { ReactComponent as ImageOops } from 'images/img-oops.svg';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } 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';
@@ -8,9 +8,22 @@ import useGetPlays from 'common/hooks/useGetPlays';
 
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
+import DynamicBanner from './DynamicBanner';
 
 const PlayList = () => {
+  const [randomPlay, setRandomPlay] = useState({});
   const [loading, error, plays] = useGetPlays();
+  useEffect(() => {
+    const filteredPlays = plays.filter(
+      (play) => all_plays[play.component ? play.component : toSanitized(play.title_name)]
+    );
+    // If the filtered array has at least one item, select a random play from the filtered array
+    if (filteredPlays && filteredPlays.length > 0) {
+      // generate a random index to select a random play
+      const randomIndex = Math.floor(Math.random() * filteredPlays.length);
+      setRandomPlay(filteredPlays[randomIndex]);
+    }
+  }, [plays]);
 
   if (loading) {
     return <Loader />;
@@ -28,6 +41,7 @@ const PlayList = () => {
 
   return (
     <Fragment>
+      <DynamicBanner randomPlay={randomPlay} />
       <ol className="list-plays">
         {plays?.map((play, index) => (
           <React.Fragment key={index}>
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index d1b00ab94..613b2b643 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -760,3 +760,45 @@
     height: var(--play-thumb-size-h-mobile);
   }
 }
+
+/* dynamic banner */
+.dynamic-banner-container {
+  color: white;
+  position: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.dynamic-banner-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  font-weight: bold;
+  max-width: 600px;
+}
+
+.banner-button{
+  margin-right: 10px;
+  background-color: rgba(255, 255, 255, 0.947);
+  border: none;
+  outline: none;
+  transition-timing-function: 0.5s;
+  transition: all;
+  cursor: pointer;
+  color: black;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.banner-button:hover{
+  background-color: #e6e6e6c3;
+  color: black;
+
+}
+.right-arrow-icon {
+  color: #25A0A7;
+}
+