diff --git a/src/components/SponsorRewards.tsx b/src/components/SponsorRewards.tsx
index 67d236c..a88a281 100644
--- a/src/components/SponsorRewards.tsx
+++ b/src/components/SponsorRewards.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 
 interface SponsorReward {
@@ -9,6 +9,12 @@ interface SponsorReward {
 }
 
 const SponsorRewards: React.FC = () => {
+  const [flippedCards, setFlippedCards] = useState<Record<number, boolean>>({});
+
+  const toggleFlip = (index: number) => {
+    setFlippedCards(prev => ({ ...prev, [index]: !prev[index] }));
+  };
+
   const sponsorRewards: SponsorReward[] = [
     {
       name: "n8n",
@@ -27,27 +33,73 @@ const SponsorRewards: React.FC = () => {
       logo: "/logos/codecraft.svg",
       rewardValue: "$3,780",
       description: "VIP Membership for Codecrafters"
+    },
+    {
+      name: "Render",
+      logo: "/logos/render.png",
+      rewardValue: "$950",
+      description: "$50 credits for all attendees • Best Use of Render: 1st $500 · 2nd $300 · 3rd $100 • Valid for 1 year"
     }
   ];
 
   return (
     <div className="relative w-full mt-20 md:mt-24">
       <style>{`
-        /* ── Card shell ── */
-        .sponsor-card {
+        /* ── 3D Flip Container ── */
+        .flip-perspective {
+          perspective: 1200px;
+        }
+
+        .flip-card {
           position: relative;
           width: 100%;
           max-width: 320px;
           margin: 0 auto;
-          transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           cursor: pointer;
+          transform-style: preserve-3d;
+          transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
         }
 
-        .sponsor-card:hover {
-          transform: translateY(-5px);
+        .flip-card.flipped {
+          transform: rotateY(180deg);
         }
 
-        /* ── Polaroid frame built with CSS (no background-image) ── */
+        /* ── Desktop hover flip ── */
+        @media (hover: hover) {
+          .flip-card:hover {
+            transform: rotateY(180deg);
+          }
+          .flip-card.flipped:hover {
+            transform: rotateY(180deg);
+          }
+        }
+
+        /* ── Face common styles ── */
+        .flip-face {
+          backface-visibility: hidden;
+          -webkit-backface-visibility: hidden;
+          border-radius: 6px;
+          overflow: hidden;
+          transform-style: preserve-3d;
+        }
+
+        .flip-front {
+          position: relative;
+          z-index: 2;
+          transform: rotateY(0deg);
+        }
+
+        .flip-back {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform: rotateY(180deg);
+          z-index: 1;
+        }
+
+        /* ── Polaroid frame (front) ── */
         .frame-container {
           position: relative;
           width: 100%;
@@ -64,7 +116,7 @@ const SponsorRewards: React.FC = () => {
         /* ── Photo area (dark zone) ── */
         .frame-photo-area {
           position: relative;
-          width: calc(100% - 28px);   /* 14px padding each side */
+          width: calc(100% - 28px);
           aspect-ratio: 1 / 1;
           margin: 14px auto 0;
           background: #0a0a0a;
@@ -76,7 +128,7 @@ const SponsorRewards: React.FC = () => {
           overflow: visible;
         }
 
-        /* ── Logo + amount wrapper (fills black area) ── */
+        /* ── Logo + amount wrapper ── */
         .frame-logo-amount {
           position: relative;
           display: flex;
@@ -88,7 +140,7 @@ const SponsorRewards: React.FC = () => {
           padding: 0 20px;
         }
 
-        /* ── Sponsor logo (pinned to top) ── */
+        /* ── Sponsor logo ── */
         .sponsor-logo {
           position: absolute;
           top: 0;
@@ -104,7 +156,7 @@ const SponsorRewards: React.FC = () => {
           top: 12px;
         }
 
-        /* ── Reward amount (centered focal point) ── */
+        /* ── Reward amount ── */
         .sponsor-reward-value {
           background: linear-gradient(135deg, #FFE55C 0%, #FFD700 30%, #FFF8DC 60%, #FFD700 100%);
           -webkit-background-clip: text;
@@ -116,43 +168,138 @@ const SponsorRewards: React.FC = () => {
           font-family: 'Caprasimo', sans-serif;
           letter-spacing: 0.02em;
           filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
-          transition: filter 0.3s ease;
           line-height: 1.1;
           margin-top: 20px;
           padding: 4px 0;
         }
 
-        .sponsor-card:hover .sponsor-reward-value {
-          filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 24px rgba(255, 215, 0, 0.3));
-        }
-
-        /* ── Caption area (white zone at bottom) ── */
+        /* ── Front caption area (sponsor name) ── */
         .frame-caption-area {
           width: 100%;
-          min-height: 80px;
-          padding: 14px 16px 18px;
+          min-height: 60px;
+          padding: 12px 16px 14px;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
           box-sizing: border-box;
         }
 
-        /* ── Description text ── */
-        .sponsor-description {
+        .sponsor-name-label {
           color: #1a1a1a;
-          font-size: 1.0rem;
-          line-height: 1.35;
+          font-size: 1.05rem;
           text-align: center;
-          font-weight: 600;
+          font-weight: 700;
           font-family: 'Caprasimo', sans-serif;
-          letter-spacing: 0.005em;
+          letter-spacing: 0.01em;
+        }
+
+        .flip-hint {
+          color: #1a1a1a;
+          font-size: 0.65rem;
+          text-align: center;
+          font-family: 'Inter', sans-serif;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          opacity: 0.45;
+          margin-top: 4px;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+
+        .flip-hint-icon {
+          display: inline-block;
+          animation: flipHintPulse 2s ease-in-out infinite;
+        }
+
+        @keyframes flipHintPulse {
+          0%, 100% { transform: rotateY(0deg); }
+          50% { transform: rotateY(180deg); }
+        }
+
+        /* ── Back face ── */
+        .back-container {
           width: 100%;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
+          height: 100%;
+          background: #f0ede6;
+          border-radius: 6px;
+          box-shadow:
+            0 2px 12px rgba(0, 0, 0, 0.15),
+            0 8px 30px rgba(0, 0, 0, 0.08);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 24px 20px;
+          box-sizing: border-box;
+          position: relative;
           overflow: hidden;
         }
 
+        .back-container::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 4px;
+          background: linear-gradient(90deg, #FFD700, #f97028, #FFD700);
+        }
+
+        .back-container::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 4px;
+          background: linear-gradient(90deg, #FFD700, #f97028, #FFD700);
+        }
+
+        .back-logo {
+          width: 60px;
+          height: 48px;
+          object-fit: contain;
+          margin-bottom: 12px;
+          background: #1a1a1a;
+          border-radius: 10px;
+          padding: 8px 12px;
+        }
+
+        .back-title {
+          font-family: 'Caprasimo', sans-serif;
+          font-size: 0.75rem;
+          color: #f97028;
+          text-transform: uppercase;
+          letter-spacing: 0.15em;
+          margin-bottom: 14px;
+        }
+
+        .back-description {
+          color: #1a1a1a;
+          font-size: 0.95rem;
+          line-height: 1.6;
+          text-align: center;
+          font-weight: 500;
+          font-family: 'Inter', 'Caprasimo', sans-serif;
+          letter-spacing: 0.005em;
+          width: 100%;
+        }
+
+        .back-value-badge {
+          margin-top: 16px;
+          padding: 8px 22px;
+          background: #1a1a1a;
+          border-radius: 20px;
+          font-family: 'Caprasimo', sans-serif;
+          font-size: 1.15rem;
+          color: #FFD700;
+          font-weight: 700;
+          letter-spacing: 0.02em;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+
         /* ── Divider line ── */
         .divider-line {
           height: 2px;
@@ -163,7 +310,7 @@ const SponsorRewards: React.FC = () => {
 
         /* ── Responsive adjustments ── */
         @media (max-width: 1024px) {
-          .sponsor-card {
+          .flip-card {
             max-width: 280px;
           }
 
@@ -187,17 +334,21 @@ const SponsorRewards: React.FC = () => {
           }
 
           .frame-caption-area {
-            min-height: 72px;
-            padding: 12px 18px 16px;
+            min-height: 56px;
+            padding: 10px 18px 12px;
           }
 
-          .sponsor-description {
-            font-size: 0.95rem;
+          .back-container {
+            padding: 20px 18px;
+          }
+
+          .back-description {
+            font-size: 0.9rem;
           }
         }
 
         @media (max-width: 768px) {
-          .sponsor-card {
+          .flip-card {
             max-width: 260px;
           }
 
@@ -221,17 +372,25 @@ const SponsorRewards: React.FC = () => {
           }
 
           .frame-caption-area {
-            min-height: 66px;
-            padding: 10px 16px 14px;
+            min-height: 50px;
+            padding: 8px 16px 10px;
           }
 
-          .sponsor-description {
-            font-size: 0.9rem;
+          .back-container {
+            padding: 18px 16px;
+          }
+
+          .back-description {
+            font-size: 0.85rem;
+          }
+
+          .sponsor-name-label {
+            font-size: 0.95rem;
           }
         }
 
         @media (max-width: 640px) {
-          .sponsor-card {
+          .flip-card {
             max-width: 240px;
           }
 
@@ -255,14 +414,21 @@ const SponsorRewards: React.FC = () => {
           }
 
           .frame-caption-area {
-            min-height: 60px;
-            padding: 8px 14px 12px;
+            min-height: 46px;
+            padding: 8px 14px 10px;
           }
 
-          .sponsor-description {
-            font-size: 0.85rem;
-            line-height: 1.3;
-            -webkit-line-clamp: 3;
+          .back-container {
+            padding: 16px 14px;
+          }
+
+          .back-description {
+            font-size: 0.8rem;
+            line-height: 1.5;
+          }
+
+          .sponsor-name-label {
+            font-size: 0.88rem;
           }
         }
       `}</style>
@@ -276,59 +442,61 @@ const SponsorRewards: React.FC = () => {
       />
 
       {/* Sponsor Rewards Title */}
-  <div className="text-center mb-12">
-   {/* Decorative top line */}
-          <motion.div
-            initial={{ opacity: 0, scaleX: 0 }}
-            whileInView={{ opacity: 1, scaleX: 1 }}
-            transition={{ type: "spring", stiffness: 200, delay: 0.1 }}
-            className="mx-auto mb-5 h-[3px] w-24 md:w-32 bg-[#1a1a1a]"
-          />
-
-          <motion.h2
-            initial={{ opacity: 0, y: 40, letterSpacing: "0.4em" }}
-            whileInView={{ opacity: 1, y: 0, letterSpacing: "0.05em" }}
-            transition={{ duration: 1, ease: "easeOut" }}
-           className="font-display text-white uppercase mb-3 drop-shadow-lg"
-            style={{
-              fontSize: 'clamp(2.3rem, 6vw, 4rem)',
-              lineHeight: 1,
-            }}
-          >
-            SPONSOR REWARD
-          </motion.h2>
-        </div>
+      <div className="text-center mb-12">
+        {/* Decorative top line */}
+        <motion.div
+          initial={{ opacity: 0, scaleX: 0 }}
+          whileInView={{ opacity: 1, scaleX: 1 }}
+          transition={{ type: "spring", stiffness: 200, delay: 0.1 }}
+          className="mx-auto mb-5 h-[3px] w-24 md:w-32 bg-[#1a1a1a]"
+        />
+
+        <motion.h2
+          initial={{ opacity: 0, y: 40, letterSpacing: "0.4em" }}
+          whileInView={{ opacity: 1, y: 0, letterSpacing: "0.05em" }}
+          transition={{ duration: 1, ease: "easeOut" }}
+          className="font-display text-white uppercase mb-3 drop-shadow-lg"
+          style={{
+            fontSize: 'clamp(2.3rem, 6vw, 4rem)',
+            lineHeight: 1,
+          }}
+        >
+          SPONSOR REWARD
+        </motion.h2>
+      </div>
 
       {/* Grid Layout */}
       <div
-        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 lg:gap-12 max-w-6xl mx-auto px-4 sm:px-6 md:px-8"
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10 lg:gap-12 max-w-6xl mx-auto px-4 sm:px-6 md:px-8"
       >
         {sponsorRewards.map((sponsor, index) => {
-          // Directional entrance per card position
           const entranceVariants = [
-            // Left card: slides in from left
             {
               initial: { opacity: 0, x: -60, scale: 0.95 },
               mobileInitial: { opacity: 0, x: -35, scale: 0.95 },
               delay: 0,
             },
-            // Center card: rises from below
             {
               initial: { opacity: 0, y: 40, scale: 0.95 },
               mobileInitial: { opacity: 0, y: 30, scale: 0.95 },
               delay: 0.25,
             },
-            // Right card: slides in from right
             {
               initial: { opacity: 0, x: 60, scale: 0.95 },
               mobileInitial: { opacity: 0, x: 35, scale: 0.95 },
               delay: 0.5,
             },
+            {
+              initial: { opacity: 0, x: 80, scale: 0.95 },
+              mobileInitial: { opacity: 0, x: 40, scale: 0.95 },
+              delay: 0.65,
+            },
           ];
 
           const variant = entranceVariants[index] || entranceVariants[1];
           const isMobileView = typeof window !== 'undefined' && window.innerWidth < 768;
           const initialState = isMobileView ? variant.mobileInitial : variant.initial;
+          const isFlipped = flippedCards[index] || false;
 
           return (
             <motion.div
@@ -341,44 +509,73 @@ const SponsorRewards: React.FC = () => {
                 ease: [0.25, 0.46, 0.45, 0.94],
                 delay: variant.delay,
               }}
-              className="flex justify-center"
+              className="flex justify-center flip-perspective"
             >
-              <div className="sponsor-card">
-                <div className="frame-container">
-                  {/* ── Photo Area: logo + reward amount, vertically centered ── */}
-                  <div className="frame-photo-area">
-                    <div className="frame-logo-amount">
-                      <img
-                        src={sponsor.logo}
-                        alt={sponsor.name}
-                        className={`sponsor-logo ${sponsor.name === ".xyz" ? "logo-xyz" : ""}`}
-                        loading="lazy"
-                        style={{
-                          width:
-                            sponsor.name === "n8n"
-                              ? "110px"
-                              : sponsor.name === "Codecrafters"
-                                ? "135px"
-                                : undefined,
-                          height:
-                            sponsor.name === "n8n"
-                              ? "88px"
-                              : sponsor.name === "Codecrafters"
-                                ? "108px"
-                                : undefined,
-                        }}
-                      />
-                      <div className="sponsor-reward-value">
-                        {sponsor.rewardValue}
+              <div
+                className={`flip-card ${isFlipped ? 'flipped' : ''}`}
+                onClick={() => toggleFlip(index)}
+              >
+                {/* ═══════ FRONT FACE ═══════ */}
+                <div className="flip-face flip-front">
+                  <div className="frame-container">
+                    <div className="frame-photo-area">
+                      <div className="frame-logo-amount">
+                        <img
+                          src={sponsor.logo}
+                          alt={sponsor.name}
+                          className={`sponsor-logo ${sponsor.name === ".xyz" ? "logo-xyz" : ""}`}
+                          loading="lazy"
+                          style={{
+                            width:
+                              sponsor.name === "n8n"
+                                ? "110px"
+                                : sponsor.name === "Codecrafters"
+                                  ? "135px"
+                                  : sponsor.name === "Render"
+                                    ? "110px"
+                                    : undefined,
+                            height:
+                              sponsor.name === "n8n"
+                                ? "88px"
+                                : sponsor.name === "Codecrafters"
+                                  ? "108px"
+                                  : sponsor.name === "Render"
+                                    ? "88px"
+                                    : undefined,
+                          }}
+                        />
+                        <div className="sponsor-reward-value">
+                          {sponsor.rewardValue}
+                        </div>
                       </div>
                     </div>
+
+                    {/* Caption: sponsor name + flip hint */}
+                    <div className="frame-caption-area">
+                      <span className="sponsor-name-label">{sponsor.name}</span>
+                      <span className="flip-hint">
+                        <span className="flip-hint-icon">↻</span> Tap to flip
+                      </span>
+                    </div>
                   </div>
+                </div>
 
-                  {/* ── Caption Area: description text ── */}
-                  <div className="frame-caption-area">
-                    <p className="sponsor-description">
+                {/* ═══════ BACK FACE ═══════ */}
+                <div className="flip-face flip-back">
+                  <div className="back-container">
+                    <img
+                      src={sponsor.logo}
+                      alt={sponsor.name}
+                      className="back-logo"
+                      loading="lazy"
+                    />
+                    <span className="back-title">Reward Details</span>
+                    <p className="back-description">
                       {sponsor.description}
                     </p>
+                    <div className="back-value-badge">
+                      {sponsor.rewardValue}
+                    </div>
                   </div>
                 </div>
               </div>