diff --git a/src/data/content.js b/src/data/content.js
index f7129af..742bb0f 100644
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -25,6 +25,7 @@ import GKQuiz from "../pages/games/Gk_quiz"
 import { DogHttpCode } from "../pages/activities/DogHttpCode";
 import { CatHttpCode } from "../pages/activities/CatHttpCode";
 import  FlappyBird  from "../pages/games/FlappyBird";
+import RandomIdentity from "../pages/activities/RandomIdentity";
 
 export const activities = [
   {
@@ -90,6 +91,13 @@ export const activities = [
     urlTerm: "cat-http-status",
     element: <CatHttpCode />,
   },
+  {
+    title: "Zodiac Sign",
+    description:"Get to know your zodiac sign",
+    icon:"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/2a/51/52/2a5152df-66f0-fc94-6e5e-251d3b2d6ef8/AppIcon-0-0-1x_U007emarketing-0-6-0-85-220.png/1200x630wa.png",
+    urlTerm:"zodiac-sign",
+    element:<RandomIdentity/>
+  }
 ];
 
 export const games = [
diff --git a/src/pages/activities/RandomIdentity.js b/src/pages/activities/RandomIdentity.js
new file mode 100644
index 0000000..e092231
--- /dev/null
+++ b/src/pages/activities/RandomIdentity.js
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import "../../styles/pages/activities/RandomIdentity.css";
+
+const zodiacData = {
+  aries: { name: "Aries ♈", traits: ["Bold", "Energetic", "Starter"], message: "Start the thing. Your fire is useful today." },
+  taurus: { name: "Taurus ♉", traits: ["Grounded", "Patient", "Steady"], message: "Go slow and solid. Comfort-first is okay." },
+  gemini: { name: "Gemini ♊", traits: ["Curious", "Expressive", "Adaptable"], message: "Talk it out. A convo will unlock clarity." },
+  cancer: { name: "Cancer ♋", traits: ["Caring", "Intuitive", "Protective"], message: "Nurture your circle. Your care will be noticed." },
+  leo: { name: "Leo ♌", traits: ["Confident", "Creative", "Warm"], message: "Show your light. You’re the main character today." },
+  virgo: { name: "Virgo ♍", traits: ["Detail-loving", "Helpful", "Practical"], message: "Fix one tiny thing. You’ll feel aligned right away." },
+  libra: { name: "Libra ♎", traits: ["Balanced", "Charming", "Fair"], message: "Choose harmony, not speed. People will support you." },
+  scorpio: { name: "Scorpio ♏", traits: ["Intense", "Loyal", "Deep"], message: "Go deeper, not wider. Depth will give you power." },
+  sagittarius: { name: "Sagittarius ♐", traits: ["Adventurous", "Optimistic", "Honest"], message: "Say yes to something new — expansion wants you." },
+  capricorn: { name: "Capricorn ♑", traits: ["Ambitious", "Disciplined", "Patient"], message: "Keep building. Quiet consistency will pay off." },
+  aquarius: { name: "Aquarius ♒", traits: ["Original", "Big-picture", "Humanitarian"], message: "Share the weird idea. That’s the one people need." },
+  pisces: { name: "Pisces ♓", traits: ["Empathic", "Dreamy", "Creative"], message: "Create from what you feel. Soft does not mean weak." },
+};
+
+function getZodiac(month, day) {
+  if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return "aries";
+  if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return "taurus";
+  if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) return "gemini";
+  if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) return "cancer";
+  if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return "leo";
+  if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return "virgo";
+  if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) return "libra";
+  if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) return "scorpio";
+  if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) return "sagittarius";
+  if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return "capricorn";
+  if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return "aquarius";
+  return "pisces";
+}
+
+export default function RandomIdentity() {
+  const [date, setDate] = useState("");
+  const [zodiac, setZodiac] = useState(null);
+  const [showResult, setShowResult] = useState(false);
+  const [confettiKey, setConfettiKey] = useState(0);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!date) return;
+    const d = new Date(date);
+    const month = d.getMonth() + 1;
+    const day = d.getDate();
+    const zKey = getZodiac(month, day);
+    setZodiac(zodiacData[zKey]);
+    setShowResult(false);
+    setConfettiKey((k) => k + 1);
+    setTimeout(() => setShowResult(true), 15);
+  }
+
+  return (
+    <div className="identity-light-container with-anim">
+      <div className="id-bubble id-b1"></div>
+      <div className="id-bubble id-b2"></div>
+      <div className="id-bubble id-b3"></div>
+
+      {showResult && (
+        <div key={confettiKey} className="party-layer">
+          <div className="party-bomber left-bomber"></div>
+          <div className="party-bomber right-bomber"></div>
+          <div className="party-confetti c1"></div>
+          <div className="party-confetti c2"></div>
+          <div className="party-confetti c3"></div>
+          <div className="party-confetti c4"></div>
+        </div>
+      )}
+
+      <div className="identity-card-light">
+        <h2 className="identity-title-light">Your Zodiac Vibe ✨</h2>
+        <p className="identity-sub-light">Enter your birth date to see your sign, traits, and today’s message.</p>
+
+        <form className="identity-form" onSubmit={handleSubmit}>
+          <input
+            type="date"
+            className="identity-date-input"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            max={new Date().toISOString().split("T")[0]}
+            required
+          />
+          <button type="submit" className="identity-btn-rect">
+            Reveal
+          </button>
+        </form>
+
+        {showResult && zodiac && (
+          <div className="identity-result pop-in glow">
+            <p className="identity-label">Your zodiac sign</p>
+            <h3 className="identity-zodiac-name">{zodiac.name}</h3>
+            <div className="identity-traits">
+              {zodiac.traits.map((t) => (
+                <span key={t} className="identity-pill">
+                  {t}
+                </span>
+              ))}
+            </div>
+            <p className="identity-message">{zodiac.message}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles/pages/activities/RandomIdentity.css b/src/styles/pages/activities/RandomIdentity.css
new file mode 100644
index 0000000..f5052ca
--- /dev/null
+++ b/src/styles/pages/activities/RandomIdentity.css
@@ -0,0 +1,298 @@
+.identity-light-container {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
+  padding: 2.2rem 1.2rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.identity-card-light {
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
+  padding: 2.1rem 2.4rem 2.2rem;
+  max-width: 500px;
+  width: 100%;
+  text-align: center;
+  position: relative;
+  z-index: 3;
+}
+
+.identity-title-light {
+  font-size: 1.7rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 0.3rem;
+}
+
+.identity-sub-light {
+  color: #64748b;
+  font-size: 0.9rem;
+  margin-bottom: 1.1rem;
+}
+
+.identity-form {
+  display: flex;
+  gap: 0.6rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 1.1rem;
+}
+
+.identity-date-input {
+  padding: 0.6rem 0.8rem;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  font-size: 0.9rem;
+  min-width: 180px;
+  transition: 0.12s ease-in;
+}
+
+.identity-date-input:focus {
+  outline: none;
+  border-color: #93c5fd;
+  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.28);
+}
+
+/* small rectangle button */
+.identity-btn-rect {
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.55rem 1.3rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: background 0.1s ease-out, transform 0.08s ease-out;
+  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.2);
+}
+
+.identity-btn-rect:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+}
+
+.identity-btn-rect:active {
+  transform: translateY(0);
+}
+
+.identity-result {
+  background: #f8fafc;
+  border-radius: 16px;
+  padding: 1rem 0.9rem 1.1rem;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  margin-top: 1rem;
+}
+
+.pop-in {
+  animation: pop 0.35s ease-out;
+  transform-origin: center;
+}
+
+.glow {
+  box-shadow: 0 12px 35px rgba(96, 165, 250, 0.25);
+}
+
+@keyframes pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.9) translateY(5px);
+  }
+  65% {
+    opacity: 1;
+    transform: scale(1.02) translateY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.identity-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #94a3b8;
+}
+
+.identity-zodiac-name {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin-top: 0.35rem;
+}
+
+.identity-traits {
+  display: flex;
+  gap: 0.4rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 0.6rem;
+}
+
+.identity-pill {
+  background: #e0edff;
+  color: #1d4ed8;
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.identity-message {
+  margin-top: 0.8rem;
+  color: #475569;
+  font-size: 0.9rem;
+  line-height: 1.35;
+}
+
+/* floating background bubbles */
+.with-anim .id-bubble {
+  position: absolute;
+  border-radius: 999px;
+  opacity: 0.25;
+  filter: blur(2px);
+  animation: float 7s ease-in-out infinite alternate;
+  z-index: 1;
+}
+
+.id-b1 {
+  width: 180px;
+  height: 180px;
+  background: #bfdbfe;
+  top: -40px;
+  right: -30px;
+}
+
+.id-b2 {
+  width: 120px;
+  height: 120px;
+  background: #fee2e2;
+  bottom: -30px;
+  left: 10px;
+  animation-delay: 1s;
+}
+
+.id-b3 {
+  width: 90px;
+  height: 90px;
+  background: #fef9c3;
+  top: 40%;
+  left: 12%;
+  animation-delay: 2s;
+}
+
+@keyframes float {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(16px);
+  }
+}
+
+/* PARTY BOMBERS / CONFETTI */
+.party-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 4;
+}
+
+.party-bomber {
+  position: absolute;
+  top: 0;
+  width: 55px;
+  height: 110px;
+  background: radial-gradient(circle, #f97316 0%, #f97316 40%, rgba(249, 115, 22, 0) 41%);
+  opacity: 0;
+  animation: bomberIn 0.35s ease-out forwards;
+}
+
+.left-bomber {
+  left: 14px;
+  transform: rotate(-15deg);
+}
+
+.right-bomber {
+  right: 14px;
+  transform: rotate(15deg);
+  animation-delay: 0.05s;
+}
+
+@keyframes bomberIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(10px);
+  }
+}
+
+.party-confetti {
+  position: absolute;
+  width: 12px;
+  height: 26px;
+  border-radius: 5px;
+  animation: fall 0.7s ease-out forwards;
+  opacity: 0;
+}
+
+.c1 {
+  left: 40px;
+  top: 20px;
+  background: #f97316;
+  animation-delay: 0.05s;
+}
+.c2 {
+  right: 40px;
+  top: 20px;
+  background: #38bdf8;
+  animation-delay: 0.08s;
+}
+.c3 {
+  left: 90px;
+  top: 10px;
+  background: #22c55e;
+  animation-delay: 0.1s;
+}
+.c4 {
+  right: 90px;
+  top: 12px;
+  background: #f43f5e;
+  animation-delay: 0.12s;
+}
+
+@keyframes fall {
+  0% {
+    opacity: 0;
+    transform: translateY(0) rotate(0deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(120px) rotate(26deg);
+  }
+}
+
+@media (max-width: 540px) {
+  .identity-card-light {
+    padding: 1.5rem 1rem 1.6rem;
+  }
+  .identity-form {
+    flex-direction: column;
+  }
+  .identity-btn-rect {
+    width: 100%;
+  }
+  .left-bomber,
+  .right-bomber {
+    width: 50px;
+  }
+}