diff --git a/frontend/src/components/AICalculator.tsx b/frontend/src/components/AICalculator.tsx
new file mode 100644
index 0000000..eba36d1
--- /dev/null
+++ b/frontend/src/components/AICalculator.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import CardBox from './CardBox';
+import BaseButton from './BaseButton';
+
+const AICalculator = () => {
+    const [input, setInput] = useState('');
+    const [result, setResult] = useState(null);
+    const [type, setType] = useState('DEC');
+
+    const handleCalculate = async () => {
+        // Mock AI interaction
+        setResult(`AI Analysis: Input ${input} is ${parseInt(input, 10).toString(type === 'HEX' ? 16 : type === 'OCT' ? 8 : type === 'BIN' ? 2 : 10).toUpperCase()}`);
+    };
+
+    return (
+        <CardBox className="mt-6">
+            <h3 className="text-xl font-bold mb-4">AI Numerical Calculator</h3>
+            <div className="flex gap-4 mb-4">
+                <input 
+                    className="p-2 border rounded flex-grow"
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Enter number"
+                />
+                <select className="p-2 border rounded" value={type} onChange={(e) => setType(e.target.value)}>
+                    <option value="DEC">DEC</option>
+                    <option value="HEX">HEX</option>
+                    <option value="OCT">OCT</option>
+                    <option value="BIN">BIN</option>
+                </select>
+            </div>
+            <BaseButton label="Calculate with AI" color="info" onClick={handleCalculate} />
+            {result && <p className="mt-4 p-2 bg-gray-100 rounded">{result}</p>}
+        </CardBox>
+    );
+};
+
+export default AICalculator;
diff --git a/frontend/src/pages/lottery_prediction.tsx b/frontend/src/pages/lottery_prediction.tsx
index f126751..e28b441 100644
--- a/frontend/src/pages/lottery_prediction.tsx
+++ b/frontend/src/pages/lottery_prediction.tsx
@@ -1,4 +1,4 @@
-import { mdiBrain } from '@mdi/js'
+import { mdiBrain, mdiCalculator } from '@mdi/js'
 import Head from 'next/head'
 import React, { ReactElement, useState, useEffect } from 'react'
 import axios from 'axios'
@@ -8,7 +8,7 @@ import SectionMain from '../components/SectionMain'
 import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
 import { getPageTitle } from '../config'
 import BaseButton from '../components/BaseButton'
-import { SelectField } from '../components/SelectField'
+import AICalculator from '../components/AICalculator'
 
 const LotteryPrediction = () => {
     const [prediction, setPrediction] = useState(null)
@@ -70,6 +70,9 @@ const LotteryPrediction = () => {
                         </div>
                     )}
                 </CardBox>
+                
+                <AICalculator />
+
             </SectionMain>
         </>
     )
@@ -79,4 +82,4 @@ LotteryPrediction.getLayout = function getLayout(page: ReactElement) {
     return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
-export default LotteryPrediction
+export default LotteryPrediction
\ No newline at end of file