diff --git a/src/plays/random-avatar/RandomAvatar.js b/src/plays/random-avatar/RandomAvatar.js
index 19e9e5968..e104a75fc 100644
--- a/src/plays/random-avatar/RandomAvatar.js
+++ b/src/plays/random-avatar/RandomAvatar.js
@@ -1,9 +1,36 @@
 import PlayHeader from 'common/playlists/PlayHeader';
+import { useState } from 'react';
 import './styles.css';
 
-// WARNING: Do not change the entry componenet name
+// WARNING: Do not change the entry component name
 function RandomAvatar(props) {
   // Your Code Start below.
+  const getRandomCharacter = () => {
+    const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 4; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+
+    return result;
+  };
+
+  const getRandomGender = () => {
+    return Math.random() < 0.5 ? 'boy' : 'girl';
+  };
+
+  function generateAvatar() {
+    const gender = getRandomGender();
+    const username = getRandomCharacter();
+
+    return `https://avatar.iran.liara.run/public/${gender}?username=${username}`;
+  }
+
+  const [avatarUrl, setAvatarUrl] = useState(generateAvatar());
+
+  const handleClick = () => {
+    setAvatarUrl(generateAvatar());
+  };
 
   return (
     <>
@@ -11,13 +38,22 @@ function RandomAvatar(props) {
         <PlayHeader play={props} />
         <div className="play-details-body">
           {/* Your Code Starts Here */}
-          <div>
-            <h1>Play Details - Random Avatar</h1>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu
-              tincidunt consectetur, nisi nunc ultricies nisi, eget consectetur nunc nisi euismod
-              nunc.
-            </p>
+          <div className="super-body super-selection">
+            <div className="super-container">
+              <main className="main">
+                <h1 className="fancy-heading">Random Avatar</h1>
+                <img alt="Random Avatar" className="circle" src={avatarUrl} />
+              </main>
+              <div>
+                <button
+                  aria-label="Re-generate random avatar"
+                  className="button-89"
+                  onClick={handleClick}
+                >
+                  Re-Generate
+                </button>
+              </div>
+            </div>
           </div>
           {/* Your Code Ends Here */}
         </div>
diff --git a/src/plays/random-avatar/Readme.md b/src/plays/random-avatar/Readme.md
index 5cc238a9c..9a3560acf 100644
--- a/src/plays/random-avatar/Readme.md
+++ b/src/plays/random-avatar/Readme.md
@@ -11,8 +11,8 @@ A play to generate random avatars while clicking the Regenerate button
 
 - User: hamzathul
 - Gihub Link: https://github.com/hamzathul
-- Blog: 
-- Video: 
+- Blog:
+- Video:
 
 ## Implementation Details
 
diff --git a/src/plays/random-avatar/styles.css b/src/plays/random-avatar/styles.css
index 5fd508fa9..78f030aab 100644
--- a/src/plays/random-avatar/styles.css
+++ b/src/plays/random-avatar/styles.css
@@ -1 +1,126 @@
 /* enter stlyes here */
+/* Dark Mode Styles */
+.super-body {
+  background: #121212;
+  color: #e0e0e0;
+  font-family: 'PT Serif', sans-serif;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.super-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main {
+  background: rgba(33, 33, 33, 0.9);
+  color: #e0e0e0;
+  padding: 20px;
+  text-align: center;
+  border-radius: 10px;
+  max-width: 90%;
+  box-sizing: border-box;
+}
+
+.fancy-heading {
+  color: #ffffff;
+  text-transform: uppercase;
+  font-size: 4vw; /* Responsive size based on viewport width */
+  font-weight: 700;
+  letter-spacing: 1px;
+  margin: 0 auto;
+  position: relative;
+  display: inline-block;
+  padding: 0 20px;
+}
+
+.fancy-heading::before {
+  content: '';
+  background: #444;
+  height: 1px;
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  left: 0;
+}
+
+.fancy-heading::after {
+  content: '';
+  background: #222;
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 20%;
+  top: 0;
+  z-index: -1;
+}
+
+.circle {
+  display: inline-block;
+  margin: 10px;
+  border: 4px solid rgba(200, 200, 200, 0.4);
+  border-radius: 50%;
+  transition: border 0.25s linear;
+  width: 40vw;
+  height: 40vw; /* Responsive size based on viewport width */
+  max-width: 228px;
+  max-height: 228px;
+}
+
+.circle img {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+
+.circle:hover {
+  border: 4px solid rgba(255, 255, 255, 0.5);
+}
+
+.button-89 {
+  --b: 3px;
+  --s: 0.45em;
+  --color: #e0e0e0;
+  --hover-color: #bb86fc;
+
+  padding: calc(0.5em + var(--s)) calc(0.9em + var(--s));
+  color: var(--color);
+  background: conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p)
+    var(--_p) / calc(100% - var(--b) - 2 * var(--_p)) calc(100% - var(--b) - 2 * var(--_p));
+  transition:
+    background-color 0.3s linear,
+    color 0.3s;
+  outline: var(--b) solid transparent;
+  outline-offset: 0.6em;
+  font-size: 16px;
+  background-color: #333;
+  border: 0;
+  user-select: none;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+.button-89:hover,
+.button-89:focus-visible {
+  background-color: var(--hover-color);
+  color: #ffffff;
+}
+
+.button-89:active {
+  background-color: #6200ee;
+}
+
+/* Selection color */
+.super-selection ::-moz-selection {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.super-selection ::selection {
+  background: rgba(255, 255, 255, 0.1);
+}