diff --git a/src/App.css b/src/App.css
index d728287..be3b9e4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,6 +13,32 @@
   margin: 0;
   max-width: none;
 }
+:root {
+  --cyber-secondary: rgba(0, 255, 255, 0.2); /* Default cyber color */
+  --grid-size: 50px; /* Adjust grid spacing */
+}
+
+.grid-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(var(--cyber-secondary) 1px, transparent 1px),
+    linear-gradient(90deg, var(--cyber-secondary) 1px, transparent 1px);
+  background-size: var(--grid-size) var(--grid-size);
+  opacity: 0.3; /* Increased opacity for testing */
+  pointer-events: none;
+  z-index: 0; /* Make sure it's on top of the background */
+  animation: grid-pulse 4s infinite;
+}
+
+@keyframes grid-pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.5; } /* Increased opacity during pulse */
+}
+
 
   * {
     margin: 0;
diff --git a/src/App.jsx b/src/App.jsx
index 7ef83e9..a397391 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import Home	 from './pages/home'
 import Navbar from './Components/Navbar'
 import Footer from './Components/Footer'
 import AdminDashboard from './pages/AdminDashboard'
+import WinnersPage from './Components/Winner'
 
 
 import { Route, Routes } from 'react-router-dom';
@@ -12,21 +13,26 @@ function App() {
 
   return (
     <>
-       <div className="app-container">
+      <div className="app-container">
         <Navbar />
+        
         <main className="main-content">
+          {/* Move grid overlay outside of Routes */}
+          <div className='grid-overlay'></div>
+          
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/buy-tickets" element={<Ticket />} />
             <Route path="/admin" element={<AdminDashboard />} />
-            
-
+            <Route path="/winner" element={<WinnersPage />} />
           </Routes>
         </main>
+        
         <Footer />
       </div>
     </>
-  )
+  );
+  
 }
 
 export default App
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
index e536266..438dee3 100644
--- a/src/Components/Navbar.jsx
+++ b/src/Components/Navbar.jsx
@@ -51,7 +51,7 @@ const Navbar = () => {
   const navLinks = [
     { path: '/', label: 'Home' },
     { path: '/buy-tickets', label: 'Buy Tickets' },
-    // { path: '/winner', label: 'Winner' },
+    { path: '/winner', label: 'Winner' },
 
    
     { path: '/admin', label: 'Admin' }
diff --git a/src/Components/Winner.jsx b/src/Components/Winner.jsx
new file mode 100644
index 0000000..6f9eb68
--- /dev/null
+++ b/src/Components/Winner.jsx
@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from 'react';
+import { ethers } from 'ethers';
+import "./css/Winners.css"
+
+const CONTRACT_ADDRESS = '0xeADD42c14c50397E64b4dc94a4beD91175c1E011';
+const ABI = [
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "winner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "token",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "prize",
+        "type": "uint256"
+      }
+    ],
+    "name": "WinnerSelected",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "getTokens",
+    "outputs": [
+      {
+        "internalType": "address[]",
+        "name": "",
+        "type": "address[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "lotteryActive",
+    "outputs": [
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+];
+
+const generateBlockchainImage = (seed) => {
+  const colors = ['#1a237e', '#ffd700', '#4a90e2', '#c2185b', '#ffa726'];
+  const randomColor = colors[Math.abs(seed.charCodeAt(0)) % colors.length];
+  
+  return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+    <defs>
+      <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="${randomColor}" strokeOpacity="0.2" strokeWidth="1"/>
+      </pattern>
+      <radialGradient id="glow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+        <stop offset="0%" style="stop-color:${randomColor};stop-opacity:0.5"/>
+        <stop offset="100%" style="stop-color:${randomColor};stop-opacity:0"/>
+      </radialGradient>
+    </defs>
+    <rect width="200" height="200" fill="url(#grid)"/>
+    <circle cx="100" cy="100" r="80" fill="url(#glow)"/>
+    <polygon points="100,20 180,100 100,180 20,100" fill="${randomColor}" fillOpacity="0.3" stroke="${randomColor}" strokeWidth="2"/>
+  </svg>`;
+};
+
+const WinnersPage = () => {
+  const [winners, setWinners] = useState([]);
+  const [latestWinner, setLatestWinner] = useState(null);
+  const [showNotification, setShowNotification] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [contract, setContract] = useState(null);
+  const [account, setAccount] = useState('');
+
+  const connectWallet = async () => {
+    try {
+      if (typeof window.ethereum === 'undefined') {
+        throw new Error('MetaMask is not installed');
+      }
+
+      setLoading(true);
+      const accounts = await window.ethereum.request({ 
+        method: 'eth_requestAccounts' 
+      });
+      
+      const provider = new ethers.BrowserProvider(window.ethereum);
+      const signer = await provider.getSigner();
+      const newContract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);
+      
+      setContract(newContract);
+      setAccount(accounts[0]);
+      setIsConnected(true);
+      setLoading(false);
+      
+    } catch (err) {
+      setError(err.message || 'Failed to connect wallet');
+      setLoading(false);
+      console.error('Connection error:', err);
+    }
+  };
+
+  useEffect(() => {
+    if (!contract) return;
+
+    const handleWinnerSelected = (winner, token, prize, event) => {
+      const newWinner = {
+        address: winner,
+        token: token,
+        prize: ethers.formatUnits(prize, 18),
+        date: new Date().toLocaleDateString(),
+        image: generateBlockchainImage(winner),
+        transactionHash: event.transactionHash
+      };
+
+      setWinners(prev => [newWinner, ...prev]);
+      setLatestWinner(newWinner);
+      setShowNotification(true);
+      setTimeout(() => setShowNotification(false), 5000);
+    };
+
+    contract.on('WinnerSelected', handleWinnerSelected);
+
+    return () => {
+      contract.off('WinnerSelected', handleWinnerSelected);
+    };
+  }, [contract]);
+
+  useEffect(() => {
+    if (window.ethereum) {
+      window.ethereum.on('accountsChanged', (accounts) => {
+        if (accounts.length > 0) {
+          setAccount(accounts[0]);
+        } else {
+          setIsConnected(false);
+          setAccount('');
+        }
+      });
+    }
+
+    return () => {
+      if (window.ethereum) {
+        window.ethereum.removeListener('accountsChanged', () => {});
+      }
+    };
+  }, []);
+
+  const NoWinnersDisplay = () => (
+    <div className="no-winners-container">
+      <div className="hologram-coin"></div>
+      <h2 className="future-text">No Winners Yet... The Future Awaits!</h2>
+      <p className="scroll-text">Be the first to make history in the lottery!</p>
+      <button className="cyber-button" onClick={connectWallet} disabled={loading}>
+        {loading ? 'Initializing...' : 'Enter Now & Win Big'}
+        <span className="cyber-button-glitch"></span>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className="cyber-container">
+      <div className="grid-overlays"></div>
+      <div className="node-animation"></div>
+
+      {!isConnected && (
+        <div className="connect-section">
+          <NoWinnersDisplay />
+          {error && <div className="cyber-error">{error}</div>}
+        </div>
+      )}
+
+      {showNotification && latestWinner && (
+        <div className="winner-notification">
+          🎉 New Winner: {latestWinner.address.substring(0, 6)}...{latestWinner.address.substring(38)} 
+          won {latestWinner.prize} tokens!
+        </div>
+      )}
+
+      <h1 className="cyber-title">🏆 Cyber Lottery Winners</h1>
+
+      {isConnected && loading && (
+        <div className="loading-container">
+          <div className="cyber-loader"></div>
+          <p>Initializing blockchain connection...</p>
+        </div>
+      )}
+
+      {isConnected && !loading && winners.length === 0 && <NoWinnersDisplay />}
+
+      {isConnected && winners.length > 0 && (
+        <div className="winners-grid">
+          {winners.map((winner, index) => (
+            <div key={index} className="winner-card">
+              <div className="card-hologram">
+                <img 
+                  src={winner.image} 
+                  alt="Winner's blockchain pattern" 
+                  className="winner-image"
+                />
+              </div>
+              <div className="winner-details">
+                <h2 className="winner-address">
+                  {winner.address.substring(0, 6)}...{winner.address.substring(38)}
+                </h2>
+                <p className="winner-prize">
+                  {winner.prize} 
+                  <span className="token-address">
+                    ({winner.token.substring(0, 6)}...{winner.token.substring(38)})
+                  </span>
+                </p>
+                <p className="winner-date">{winner.date}</p>
+                <a 
+                  href={`https://etherscan.io/tx/${winner.transactionHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transaction-link"
+                >
+                  View Transaction
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WinnersPage;
\ No newline at end of file
diff --git a/src/Components/css/Winners.css b/src/Components/css/Winners.css
new file mode 100644
index 0000000..b3d7d29
--- /dev/null
+++ b/src/Components/css/Winners.css
@@ -0,0 +1,238 @@
+/* Cyber Theme Variables */
+:root {
+    --cyber-bg: #0a192f;
+    --cyber-primary: #ffd700;
+    --cyber-secondary: #4a90e2;
+    --cyber-accent: #c2185b;
+    --cyber-text: #e0e0e0;
+    --grid-size: 30px;
+    --animation-speed: 2s;
+  }
+  
+  /* Base Styles */
+  body {
+    background-color: var(--cyber-bg);
+    color: var(--cyber-text);
+    font-family: 'Share Tech Mono', monospace;
+    margin: 0;
+    overflow-x: hidden;
+  }
+  
+  /* Grid Animation */
+  .grid-overlays {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      linear-gradient(var(--cyber-secondary) 1px, transparent 1px),
+      linear-gradient(90deg, var(--cyber-secondary) 1px, transparent 1px);
+    background-size: var(--grid-size) var(--grid-size);
+    opacity: 0.1;
+    animation: grid-pulse 4s infinite;
+    pointer-events: none;
+  }
+  
+  @keyframes grid-pulse {
+    0%, 100% { opacity: 0.1; }
+    50% { opacity: 0.15; }
+  }
+  
+  /* Node Animation */
+  .node-animation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(circle, var(--cyber-primary) 1px, transparent 1px);
+    background-size: 50px 50px;
+    opacity: 0.1;
+    animation: node-pulse 3s infinite;
+    pointer-events: none;
+  }
+  
+  @keyframes node-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.1; }
+    50% { transform: scale(1.1); opacity: 0.2; }
+  }
+  
+  /* Holographic Coin */
+  .hologram-coin {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+    background: radial-gradient(circle at center, var(--cyber-primary) 0%, transparent 70%);
+    border: 2px solid var(--cyber-primary);
+    border-radius: 50%;
+    position: relative;
+    animation: coin-spin 10s linear infinite;
+  }
+  
+  .hologram-coin::before {
+    content: '₿';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 80px;
+    color: var(--cyber-primary);
+    text-shadow: 0 0 20px var(--cyber-primary);
+  }
+  
+  @keyframes coin-spin {
+    from { transform: rotateY(0deg); }
+    to { transform: rotateY(360deg); }
+  }
+  
+  /* Future Text Styles */
+  .future-text {
+    font-size: 2.5rem;
+    color: var(--cyber-primary);
+    text-align: center;
+    text-shadow: 0 0 10px var(--cyber-primary);
+    margin: 2rem 0;
+    opacity: 0;
+    animation: text-fade-in 1s forwards;
+  }
+  
+  .scroll-text {
+    font-size: 1.2rem;
+    color: var(--cyber-secondary);
+    text-align: center;
+    animation: text-scroll 15s linear infinite;
+    white-space: nowrap;
+  }
+  
+  @keyframes text-scroll {
+    from { transform: translateX(100%); }
+    to { transform: translateX(-100%); }
+  }
+  
+  /* Cyber Button */
+  .cyber-button {
+    background: transparent;
+    border: 2px solid var(--cyber-primary);
+    color: var(--cyber-primary);
+    padding: 1rem 2rem;
+    font-size: 1.2rem;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  
+  .cyber-button:hover {
+    background: var(--cyber-primary);
+    color: var(--cyber-bg);
+    text-shadow: none;
+    box-shadow: 0 0 20px var(--cyber-primary);
+  }
+  
+  .cyber-button-glitch {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--cyber-primary);
+    transform: translateX(-100%);
+    animation: button-glitch 2s infinite;
+  }
+  
+  @keyframes button-glitch {
+    0% { transform: translateX(-100%); }
+    10% { transform: translateX(100%); }
+    11% { transform: translateX(-100%); }
+  }
+  
+  /* Winner Cards */
+.winners-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+    padding: 2rem;
+  }
+  
+  .winner-card {
+    background: rgba(10, 25, 47, 0.8);
+    border: 1px solid var(--cyber-primary);
+    border-radius: 10px;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+    padding: 1.5rem;
+    text-align: center;
+    color: var(--cyber-text);
+    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+  }
+  
+  .winner-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px var(--cyber-primary);
+  }
+  
+  .winner-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent 0%, rgba(255, 215, 0, 0.1) 50%, transparent 100%);
+    animation: card-shine 3s infinite;
+  }
+  
+  @keyframes card-shine {
+    0% { left: -100%; }
+    50% { left: 100%; }
+    100% { left: -100%; }
+  }
+  
+  /* Winner Info */
+  .winner-name {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--cyber-primary);
+  }
+  
+  .winner-amount {
+    font-size: 1.2rem;
+    color: var(--cyber-secondary);
+    margin-top: 0.5rem;
+  }
+  
+  /* No Winners Yet Display */
+  .no-winners {
+    text-align: center;
+    padding: 3rem;
+  }
+  
+  .no-winners h2 {
+    font-size: 2rem;
+    color: var(--cyber-primary);
+    text-shadow: 0 0 10px var(--cyber-primary);
+    animation: text-glow 1.5s infinite alternate;
+  }
+  
+  @keyframes text-glow {
+    0% { text-shadow: 0 0 10px var(--cyber-primary); }
+    100% { text-shadow: 0 0 20px var(--cyber-primary); }
+  }
+  
+  .no-winners p {
+    font-size: 1.2rem;
+    color: var(--cyber-secondary);
+    opacity: 0.8;
+    margin-top: 0.5rem;
+  }
+  
+  /* Cyber-themed button for interaction */
+  .no-winners .cyber-button {
+    margin-top: 1.5rem;
+    display: inline-block;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/css/Home.css b/src/pages/css/Home.css
index 7f22973..fde8999 100644
--- a/src/pages/css/Home.css
+++ b/src/pages/css/Home.css
@@ -261,20 +261,21 @@
   position: relative;
   background: rgba(20, 20, 50, 0.6);
   border-radius: 12px;
-  padding: 1.5rem;
-  overflow: hidden;
+  padding: 2rem;
+  margin: 1rem;
   transition: all 0.3s ease;
-  transform: translateY(20px);
-  opacity: 0;
-  animation: feature-reveal 0.6s forwards;
-  animation-delay: var(--delay);
+  box-shadow: 0 0 15px rgba(255, 107, 0, 0.3); /* Card glowing effect */
+  overflow: hidden;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-@keyframes feature-reveal {
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+.feature-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 30px rgba(255, 107, 0, 0.5); /* Hover glow effect */
 }
 
 .feature-card .card-glow {
@@ -299,6 +300,16 @@
 .feature-card h3 {
   color: var(--neon-gold);
   margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+}
+
+.feature-card p {
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  text-align: center;
+  opacity: 0.9;
 }
 
 .hover-reveal {
@@ -313,6 +324,21 @@
   opacity: 1;
 }
 
+.hover-reveal .learn-more {
+  font-size: 1rem;
+  color: rgba(255, 107, 0, 0.8);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.feature-cards-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+  padding-top: 3rem;
+}
+
+
 .learn-more {
   color: var(--accent-blue);
   font-size: 0.8rem;
@@ -327,6 +353,7 @@
     rgba(20, 20, 50, 0.98)
   );
   padding: 4rem 2rem;
+  overflow: hidden;
 }
 
 .testimonials-grid {
@@ -337,16 +364,25 @@
 
 .testimonial-card {
   position: relative;
-  background: rgba(20, 20, 50, 0.6);
+  background: rgba(20, 20, 50, 0.8);
   border-radius: 12px;
   padding: 1.5rem;
-  transition: all 0.3s ease;
   overflow: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); /* Light screen border effect */
+  background: rgba(20, 20, 50, 0.7);
+  animation: screen-flicker 1s infinite; /* Flickering animation */
+  z-index: 1;
+}
+
+@keyframes screen-flicker {
+  0%, 100% { opacity: 0.98; }
+  50% { opacity: 0.9; }
 }
 
 .testimonial-card:hover {
   transform: scale(1.05);
-  box-shadow: 0 0 20px rgba(255, 107, 0, 0.2);
+  box-shadow: 0 0 25px rgba(255, 107, 0, 0.4); /* More intense glow */
 }
 
 .testimonial-rating {
@@ -357,12 +393,19 @@
 .star-icon {
   color: var(--neon-gold);
   margin-right: 0.25rem;
+  animation: star-glow 1.5s infinite alternate; /* Glowing star animation */
+}
+
+@keyframes star-glow {
+  0% { color: var(--neon-gold); }
+  100% { color: rgba(255, 215, 0, 1); }
 }
 
 .testimonial-content {
   font-style: italic;
   color: var(--text-primary);
   margin-bottom: 1rem;
+  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); /* Adding a glowing text effect */
 }
 
 .testimonial-author {
@@ -372,6 +415,9 @@
 
 .testimonial-author strong {
   color: var(--neon-gold);
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .testimonial-author span {
@@ -387,17 +433,39 @@
   height: 200%;
   background: radial-gradient(
     circle at center, 
-    rgba(255, 215, 0, 0.1), 
+    rgba(255, 215, 0, 0.2), 
     transparent 50%
   );
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.4s ease;
+  z-index: -1;
 }
 
 .testimonial-card:hover .testimonial-glow {
   opacity: 1;
 }
 
+/* TV screen-like border */
+.testimonial-card:before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  right: -10px;
+  bottom: -10px;
+  background: rgba(0, 255, 255, 0.2);
+  border-radius: 14px;
+  z-index: -2;
+  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+  animation: tv-border 2s infinite alternate; /* Border flicker */
+}
+
+@keyframes tv-border {
+  0% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
+  50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
+  100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
+}
+
 /* FAQ Section */
 .faq-section {
   background: linear-gradient(
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 7438d7d..91c3e34 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -143,18 +143,21 @@ const Home = () => {
 
       <section className="feature-section">
         <div className="grid-pattern" />
-        {features.map((feature, index) => (
-          <div key={index} className="feature-card" style={{ '--delay': `${index * 0.1}s` }}>
-            <div className="card-glow" />
-            <h3>{feature.title}</h3>
-            <p>{feature.description}</p>
-            <div className="hover-reveal">
-              <span className="learn-more">Explore Feature →</span>
+        <div className="feature-cards-container">
+          {features.map((feature, index) => (
+            <div key={index} className="feature-card" style={{ '--delay': `${index * 0.1}s` }}>
+              <div className="card-glow" />
+              <h3>{feature.title}</h3>
+              <p>{feature.description}</p>
+              <div className="hover-reveal">
+                {/* <span className="learn-more">Explore Feature →</span> */}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </section>
 
+
       <section className="testimonials-section">
         <h2 className="section-title">Player Experiences</h2>
         <div className="testimonials-grid">