diff --git a/backend/src/routes/lottery_ai.js b/backend/src/routes/lottery_ai.js
index 4ca4035..3042851 100644
--- a/backend/src/routes/lottery_ai.js
+++ b/backend/src/routes/lottery_ai.js
@@ -1,23 +1,28 @@
 const express = require('express');
 const wrapAsync = require('../helpers').wrapAsync;
 const predictionService = require('../services/predictionService');
-const { draws, lottery_games } = require('../db/models');
+const { draws, lottery_games, countries } = require('../db/models');
 
 const router = express.Router();
 
 router.post('/generate-prediction', wrapAsync(async (req, res) => {
-    const { gameId } = req.body;
-    const game = await lottery_games.findByPk(gameId);
+    const { gameId, countryId } = req.body;
+    
+    let whereClause = { status: 'active' };
+    if (gameId) whereClause.id = gameId;
+    if (countryId) whereClause.countryId = countryId;
+
+    const game = await lottery_games.findOne({ where: whereClause });
     if (!game) return res.status(404).send({ success: false, error: 'Game not found' });
     
     const history = await draws.findAll({
-        where: { gameId, status: 'completed' },
+        where: { gameId: game.id, status: 'completed' },
         order: [['draw_number', 'DESC']],
         limit: 20
     });
     
     const prediction = await predictionService.predictNextDraw(game, history);
-    res.status(200).send({ success: true, prediction });
+    res.status(200).send({ success: true, prediction, game: game.name });
 }));
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;
diff --git a/backend/src/services/predictionService.js b/backend/src/services/predictionService.js
index 8825673..de8b32f 100644
--- a/backend/src/services/predictionService.js
+++ b/backend/src/services/predictionService.js
@@ -2,14 +2,17 @@ const { LocalAIApi } = require('../ai/LocalAIApi');
 
 class PredictionService {
     async predictNextDraw(game, history) {
-        // Prepare numbers string for the AI
         const drawHistory = history.map(d => d.winning_numbers).join(', ');
+        const constraints = `Game: ${game.name} (${game.numbers_per_ticket} numbers out of ${game.max_number}${game.bonus_numbers_count > 0 ? `, Bonus: ${game.bonus_numbers_count} of ${game.bonus_max_number}` : ''})`;
+        
         const prompt = `As an expert in statistical analysis for lottery systems, analyze the following sequence of recent winning numbers for the ${game.name} lottery: 
 [${drawHistory}]
 
-Based on these patterns, generate a statistically plausible set of ${game.numbers_per_ticket} numbers for the next draw. 
+Constraints: ${constraints}
 
-IMPORTANT: Only return the numbers separated by commas, no other text.`;
+Based on these patterns, generate a statistically plausible set of numbers for the next draw. 
+
+IMPORTANT: Only return the numbers separated by commas for the main set (and bonus if applicable, e.g., "1,2,3,4,5,6" or "1,2,3,4,5|6"), no other text.`;
 
         const response = await LocalAIApi.createResponse(
             { input: [{ role: 'user', content: prompt }] },
@@ -19,7 +22,7 @@ IMPORTANT: Only return the numbers separated by commas, no other text.`;
         if (response.success) {
             return LocalAIApi.extractText(response);
         }
-        throw new Error('AI prediction failed');
+        throw new Error('AI prediction failed: ' + (response.error || 'Unknown'));
     }
 }
 
diff --git a/frontend/src/pages/lottery_prediction.tsx b/frontend/src/pages/lottery_prediction.tsx
new file mode 100644
index 0000000..f126751
--- /dev/null
+++ b/frontend/src/pages/lottery_prediction.tsx
@@ -0,0 +1,82 @@
+import { mdiBrain } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useState, useEffect } from 'react'
+import axios from 'axios'
+import CardBox from '../components/CardBox'
+import LayoutAuthenticated from '../layouts/Authenticated'
+import SectionMain from '../components/SectionMain'
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
+import { getPageTitle } from '../config'
+import BaseButton from '../components/BaseButton'
+import { SelectField } from '../components/SelectField'
+
+const LotteryPrediction = () => {
+    const [prediction, setPrediction] = useState(null)
+    const [loading, setLoading] = useState(false)
+    const [gameId, setGameId] = useState('')
+    const [lotteries, setLotteries] = useState([])
+
+    useEffect(() => {
+        axios.get('/lottery_games').then(res => {
+            setLotteries(res.data.rows || [])
+        })
+    }, [])
+
+    const handleGenerate = async () => {
+        setLoading(true)
+        try {
+            const res = await axios.post('/lottery_ai/generate-prediction', { gameId })
+            setPrediction(res.data.prediction)
+        } catch (err) {
+            console.error(err)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <>
+            <Head>
+                <title>{getPageTitle('Lottery Prediction')}</title>
+            </Head>
+            <SectionMain>
+                <SectionTitleLineWithButton icon={mdiBrain} title="AI Lottery Combinations" main>
+                    {''}
+                </SectionTitleLineWithButton>
+                <CardBox>
+                    <div className="mb-6">
+                        <label className="block mb-2">Select Lottery Game</label>
+                        <select 
+                            className="w-full p-2 border rounded" 
+                            value={gameId} 
+                            onChange={(e) => setGameId(e.target.value)}
+                        >
+                            <option value="">Select a game...</option>
+                            {lotteries.map(l => (
+                                <option key={l.id} value={l.id}>{l.name} ({l.country ? l.country.name : 'Unknown'})</option>
+                            ))}
+                        </select>
+                    </div>
+                    <BaseButton 
+                        label={loading ? 'Generating...' : 'Generate Prediction'} 
+                        color="info" 
+                        onClick={handleGenerate} 
+                        disabled={loading || !gameId}
+                    />
+                    {prediction && (
+                        <div className="mt-6 p-4 bg-emerald-50 border border-emerald-200 rounded">
+                            <h3 className="font-bold text-emerald-800">Generated Combination:</h3>
+                            <p className="text-xl font-mono">{prediction}</p>
+                        </div>
+                    )}
+                </CardBox>
+            </SectionMain>
+        </>
+    )
+}
+
+LotteryPrediction.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutAuthenticated>{page}</LayoutAuthenticated>
+}
+
+export default LotteryPrediction