diff --git a/index.html b/index.html
index 3f46430..280c24c 100644
--- a/index.html
+++ b/index.html
@@ -29,11 +29,12 @@
             justify-content: center;
             min-height: 100vh;
             margin: 0;
+            flex-direction: column;
         }
         .page {
             display: none;
             text-align: center;
-            width: 80%;
+            width: 100%;
             max-width: 600px;
             padding: 20px;
             border-radius: 10px;
@@ -66,7 +67,7 @@
             border-color: var(--primary-neon);
             text-shadow: var(--neon-shadow-text);
         }
-        input[type="email"], input[type="text"], input[type="tel"], textarea {
+        input[type="email"], input[type="text"], input[type="tel"], input[type="number"], textarea {
             width: calc(100% - 40px);
             padding: 10px;
             border-radius: 5px;
@@ -164,7 +165,7 @@
             }
             95% {
                 box-shadow: var(--neon-shadow);
-                border-color: var(--primary-neon);
+                border-color: var (--primary-neon);
             }
             95.01% {
                 box-shadow: none;
@@ -216,6 +217,7 @@
             display: none;
             flex-direction: column;
             z-index: 40; /* Ensures it is above the chat button */
+            overflow-y: scroll; /* Enable scrolling */
         }
         .live-chat-popup.active {
             display: flex;
@@ -282,23 +284,27 @@
     <div id="page3" class="page">
         <h2 class="text-xl text-center mb-4">Choose your avatar</h2>
         <div class="avatars flex justify-center gap-4">
-            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYGG5wQxwQh8ZwAf-6K84NnUZ_lngQxgMSiw&s" alt="Avatar 1" onclick="selectAvatar('avatar1')">
-            <img src="https://cdn.icon-icons.com/icons2/1368/PNG/512/-avatar_89781.png" alt="Avatar 2" onclick="selectAvatar('avatar2')">
-            <img src="https://icons.iconarchive.com/icons/iconarchive/incognito-animals/512/Bear-Avatar-icon.png" alt="Avatar 3" onclick="selectAvatar('avatar3')">
-            <img src="https://icons.iconarchive.com/icons/iconarchive/incognito-animals/512/Lama-Avatar-icon.png" alt="Avatar 4" onclick="selectAvatar('avatar4')">
+            <!-- Avatars will be dynamically generated here -->
         </div>
         <button class="btn-place" onclick="navigateTo('page4')">Next</button>
     </div>
-    <!-- Page 4: Video and Bet Buttons -->
+    <!-- Page 4: Set Default Bet Size -->
     <div id="page4" class="page">
+        <h2 class="text-xl text-center mb-4">Set Default Bet Size</h2>
+        <input type="number" id="defaultBetSize" placeholder="Enter default bet size" required>
+        <button class="btn-place" onclick="navigateTo('page5')">Next</button>
+    </div>
+    <!-- Page 5: Video, Bet Buttons, and Balance -->
+    <div id="page5" class="page">
+        <h2 class="text-xl text-center mb-4">Your Balance: $<span id="userBalance">0</span></h2>
         <div class="video-frame mb-4">
             <div class="countdown" id="countdown">5</div>
             <div class="live-indicator">LIVE</div>
             <!-- iframe is now dynamically added by the script to control timing -->
         </div>
         <div class="bet-buttons">
-            <button class="btn-place" onclick="bet('Lion')">Bet Lion</button>
-            <button class="btn-confirm" onclick="bet('Giraffe')">Bet Giraffe</button>
+            <button class="btn-place" onclick="placeBet('Lion')">Bet Lion</button>
+            <button class="btn-confirm" onclick="placeBet('Giraffe')">Bet Giraffe</button>
         </div>
     </div>
 
@@ -314,6 +320,8 @@
 
     <script>
         const WORKER_URL = 'https://instinct-api.yazdani.dev/user'; // Updated API URL
+        let userEmail = '';
+        let defaultBetSize = 0;
 
         async function navigateTo(pageId) {
             document.querySelectorAll('.page').forEach(page => {
@@ -324,8 +332,13 @@
                 if (!document.getElementById('bypassValidation').checked) {
                     await fetchUserData();
                 }
-            } else if (pageId === 'page4') {
+            } else if (pageId === 'page3') {
+                generateRandomAvatars();
+            } else if (pageId === 'page5') {
+                userEmail = document.getElementById('email').value;
+                defaultBetSize = document.getElementById('defaultBetSize').value;
                 startCountdown(5);
+                await fetchUserBalance();
             }
         }
 
@@ -411,8 +424,47 @@
             console.log('Selected avatar:', avatarId);
         }
 
-        function bet(option) {
-            console.log('Bet on:', option);
+        async function placeBet(team) {
+            const response = await fetch('https://instinct-api.yazdani.dev/bet', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    email: userEmail,
+                    event: 2,
+                    team: team === 'Lion' ? 1 : 2,
+                    amount: defaultBetSize
+                })
+            });
+            if (response.ok) {
+                console.log('Bet placed successfully');
+                await fetchUserBalance();
+            } else {
+                console.error('Failed to place bet');
+            }
+        }
+
+        async function fetchUserBalance() {
+            const response = await fetch(`${WORKER_URL}?email=${encodeURIComponent(userEmail)}`, { method: 'GET' });
+            if (response.ok) {
+                const userData = await response.json();
+                document.getElementById('userBalance').textContent = userData.balance || '0';
+            } else {
+                console.error('Failed to fetch user balance');
+            }
+        }
+
+        function generateRandomAvatars() {
+            const avatarsContainer = document.querySelector('.avatars');
+            avatarsContainer.innerHTML = ''; // Clear existing avatars
+
+            for (let i = 0; i < 4; i++) {
+                const avatarId = Math.floor(Math.random() * 1000000);
+                const img = document.createElement('img');
+                img.src = `https://api.multiavatar.com/${avatarId}.png`;
+                img.alt = `Avatar ${i + 1}`;
+                img.onclick = () => selectAvatar(avatarId);
+                avatarsContainer.appendChild(img);
+            }
         }
 
         // Add to Home Screen Prompt
@@ -453,7 +505,6 @@
                 });
             });
         }
-
     </script>
 </body>
 </html>