diff --git a/client/src/pages/candidateInfo/index.tsx b/client/src/pages/candidateInfo/index.tsx
index ac3b64d6..112ba048 100644
--- a/client/src/pages/candidateInfo/index.tsx
+++ b/client/src/pages/candidateInfo/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import SubscribePopup from '../../components/subscribePopup/SubscribePopup';
 
 interface Candidate {
     id: number;
@@ -27,6 +28,7 @@ export default function CandidateInfo() {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [filteredCandidates, setFilteredCandidates] = useState<Candidate[]>([]);
+    const [showPopup, setShowPopup] = useState(false);
     const [filters, setFilters] = useState({
         party: '',
         electionType: '',
@@ -71,8 +73,22 @@ export default function CandidateInfo() {
         };
 
         fetchCandidateData();
+
+
+        // Show popup after a delay (e.g., 10 seconds)
+        const popupTimer = setTimeout(() => {
+            setShowPopup(true);
+        }, 10000);
+
+        // Cleanup timer when component unmounts
+        return () => clearTimeout(popupTimer);
     }, []);
 
+    const handleClosePopup = () => {
+        setShowPopup(false);
+    };
+
+
     const handleCandidateClick = (name: string) => {
         const formattedName = name.replace(/\s+/g, '').toLowerCase(); // Ensure it matches profile URL structure
         router.push(`/candidateInfo/${formattedName}`); // Navigate to the candidate's profile page
@@ -110,73 +126,73 @@ export default function CandidateInfo() {
     return (
         <div style={{ display: 'flex', paddingTop: '120px', paddingLeft: '60px' }}>
             {/* Sidebar for Filters */}
-            <div style={{ width: '25%', padding: '20px', backgroundColor: 'transparent'}}>
-            <h2 style={{color: '#1D4ED8', fontFamily: 'Inter', fontSize: '24px', fontStyle: 'normal', fontWeight: '700', lineHeight: '28px', letterSpacing: '0.1px', width: '390px', height: '28px', flexShrink: '0'}}>Filter Candidates</h2>
+            <div style={{ width: '25%', padding: '20px', backgroundColor: 'transparent' }}>
+                <h2 style={{ color: '#1D4ED8', fontFamily: 'Inter', fontSize: '24px', fontStyle: 'normal', fontWeight: '700', lineHeight: '28px', letterSpacing: '0.1px', width: '390px', height: '28px', flexShrink: '0' }}>Filter Candidates</h2>
                 <div>
-                <label htmlFor="party-filter" style={{display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', paddingTop:'30px', paddingLeft:'10px',paddingRight:'10px',paddingBottom:'10px', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px'}}>Political Affiliation:</label>
-                <select id="party-filter" name="party" value={filters.party} onChange={handleFilterChange} style={{ display: 'flex', height: '60px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF',width: '100%' }}><option value="">All</option>{parties.map(party => (<option key={party} value={party}>{party}</option>))}</select>
+                    <label htmlFor="party-filter" style={{ display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', paddingTop: '30px', paddingLeft: '10px', paddingRight: '10px', paddingBottom: '10px', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px' }}>Political Affiliation:</label>
+                    <select id="party-filter" name="party" value={filters.party} onChange={handleFilterChange} style={{ display: 'flex', height: '60px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF', width: '100%' }}><option value="">All</option>{parties.map(party => (<option key={party} value={party}>{party}</option>))}</select>
                 </div>
-                
+
                 <div style={{ marginTop: '10px' }}>
-                    <label htmlFor="election-filter" style={{display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px'}}>Election Type:</label>
-                    <select id="election-filter" name="electionType" value={filters.electionType} onChange={handleFilterChange} style={{width: '100%',display: 'flex', height: '60px', padding: '10px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF'}}>
-                    <option value="">All</option>
+                    <label htmlFor="election-filter" style={{ display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px' }}>Election Type:</label>
+                    <select id="election-filter" name="electionType" value={filters.electionType} onChange={handleFilterChange} style={{ width: '100%', display: 'flex', height: '60px', padding: '10px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF' }}>
+                        <option value="">All</option>
                         {electionTypes.map(type => (
                             <option key={type} value={type}>{type}</option>
                         ))}
                     </select>
                 </div>
-                
+
                 <div style={{ marginTop: '10px' }}>
-                    <label htmlFor="district-filter" style={{display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px'}}>District:</label>
-                    <select id="district-filter" name="district" value={filters.district} onChange={handleFilterChange} style={{width: '100%', display: 'flex', height: '60px', padding: '10px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF'}}>
-                    <option value="">All</option>
+                    <label htmlFor="district-filter" style={{ display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px' }}>District:</label>
+                    <select id="district-filter" name="district" value={filters.district} onChange={handleFilterChange} style={{ width: '100%', display: 'flex', height: '60px', padding: '10px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF' }}>
+                        <option value="">All</option>
                         {districts.map(district => (
                             <option key={district} value={district}>{district}</option>
                         ))}
                     </select>
                 </div>
-    
+
                 {/* Reset Filters Button */}
-                <button 
-                    style={{ 
-                        marginTop: '20px', 
-                        padding: '10px', 
-                        backgroundColor: '#007bff', 
-                        color: '#fff', 
-                        border: 'none', 
-                        borderRadius: '5px', 
+                <button
+                    style={{
+                        marginTop: '20px',
+                        padding: '10px',
+                        backgroundColor: '#007bff',
+                        color: '#fff',
+                        border: 'none',
+                        borderRadius: '5px',
                         cursor: 'pointer',
                         width: '100%',
-                    }} 
+                    }}
                     onClick={handleResetFilters}
                 >
                     Reset Filters
                 </button>
             </div>
-    
+
             {/* Main Content */}
             <div style={{ width: '75%', padding: '20px' }}>
                 {filteredCandidates.length > 0 ? (
                     filteredCandidates.map(candidate => (
-                        <div 
-                            key={candidate.id} 
-                            className="candidate-card" 
-                            style={{ 
+                        <div
+                            key={candidate.id}
+                            className="candidate-card"
+                            style={{
                                 backgroundColor: 'White',
                                 boxShadow: '0px 4px 5px rgba(0, 0, 0, 0.5)',
-                                border: '2px solid #ccc', 
-                                padding: '10px', 
-                                margin: '10px', 
+                                border: '2px solid #ccc',
+                                padding: '10px',
+                                margin: '10px',
                                 borderRadius: '5px',
                             }}
                         >
                             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                 <div style={{ display: 'flex', alignItems: 'center' }}>
                                     {candidate.attributes.PhotoURL && (
-                                        <img 
-                                            src={candidate.attributes.PhotoURL} 
-                                            alt={candidate.attributes.Name} 
+                                        <img
+                                            src={candidate.attributes.PhotoURL}
+                                            alt={candidate.attributes.Name}
                                             style={{ width: '80px', height: '80px', objectFit: 'cover', borderRadius: '5px', marginRight: '10px' }}
                                         />
                                     )}
@@ -198,7 +214,7 @@ export default function CandidateInfo() {
                                         </div>
                                     </div>
                                 </div>
-                                <button 
+                                <button
                                     style={{
                                         backgroundColor: '#007bff',
                                         color: '#fff',
@@ -218,6 +234,12 @@ export default function CandidateInfo() {
                     <p>No candidates match the selected filters.</p>
                 )}
             </div>
+
+
+            {/* Subscribe Popup */}
+            {showPopup && <SubscribePopup onClose={handleClosePopup} />}
+
+
         </div>
     );
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ea9ae991..6cc68957 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
         "@mui/material": "^5.16.1"
       },
       "devDependencies": {
-        "@playwright/test": "^1.49.0",
+        "@playwright/test": "^1.49.1",
         "@types/node": "^22.10.1"
       }
     },
@@ -626,12 +626,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.0.tgz",
-      "integrity": "sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==",
+      "version": "1.49.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz",
+      "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.49.0"
+        "playwright": "1.49.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -840,6 +841,7 @@
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1027,12 +1029,13 @@
       "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/playwright": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0.tgz",
-      "integrity": "sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==",
+      "version": "1.49.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
+      "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.49.0"
+        "playwright-core": "1.49.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1045,10 +1048,11 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0.tgz",
-      "integrity": "sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==",
+      "version": "1.49.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
+      "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
       },
diff --git a/package.json b/package.json
index 7cb6ba89..988f4454 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "@mui/material": "^5.16.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.1"
   },
   "scripts": {}