diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..447daea
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
diff --git a/backend/src/routes/aiCalculator.js b/backend/src/routes/aiCalculator.js
new file mode 100644
index 0000000..8d79df0
--- /dev/null
+++ b/backend/src/routes/aiCalculator.js
@@ -0,0 +1,32 @@
+const express = require('express');
+const router = express.Router();
+const { LocalAIApi } = require('../ai/LocalAIApi');
+
+router.post('/calculate', async (req, res) => {
+  const { input, type } = req.body;
+  const prompt = `Calculate the following expression: ${input}. Provide the result in ${type} format. Return only the result.`;
+
+  try {
+    const resp = await LocalAIApi.createResponse(
+      {
+        input: [
+          { role: 'system', content: 'You are a precise calculator that provides results in requested formats.' },
+          { role: 'user', content: prompt },
+        ],
+      },
+      { poll_interval: 5, poll_timeout: 300 }
+    );
+
+    if (resp.success) {
+      const text = LocalAIApi.extractText(resp);
+      res.json({ result: text });
+    } else {
+      res.status(500).json({ error: 'AI calculation failed' });
+    }
+  } catch (error) {
+    console.error('Calculation error:', error);
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+});
+
+module.exports = router;
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..4f6366c
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
diff --git a/frontend/src/components/AICalculator.tsx b/frontend/src/components/AICalculator.tsx
new file mode 100644
index 0000000..faa3449
--- /dev/null
+++ b/frontend/src/components/AICalculator.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+const AICalculator: React.FC = () => {
+  const [input, setInput] = useState('');
+  const [type, setType] = useState<'DEC' | 'HEX' | 'OCT' | 'BIN'>('DEC');
+  const [result, setResult] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+
+  const handleCalculate = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch('/api/ai/calculate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ input, type }),
+      });
+      const data = await response.json();
+      setResult(data.result);
+    } catch (error) {
+      console.error('Calculation error:', error);
+      setResult('Error performing AI calculation.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-4 border rounded shadow-md bg-white">
+      <h2 className="text-xl font-bold mb-4">AI Numerical Calculator</h2>
+      <input
+        type="text"
+        className="border p-2 w-full mb-2"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Enter expression (e.g. 10 + 20)"
+      />
+      <select className="border p-2 w-full mb-2" value={type} onChange={(e) => setType(e.target.value as any)}>
+        <option value="DEC">DEC</option>
+        <option value="HEX">HEX</option>
+        <option value="OCT">OCT</option>
+        <option value="BIN">BIN</option>
+      </select>
+      <button className="bg-blue-500 text-white p-2 w-full" onClick={handleCalculate} disabled={loading}>
+        {loading ? 'Calculating...' : 'Calculate with AI'}
+      </button>
+      {result && <div className="mt-4 p-2 bg-gray-100">{result}</div>}
+    </div>
+  );
+};
+
+export default AICalculator;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
new file mode 100644
index 0000000..6a4976d
--- /dev/null
+++ b/frontend/src/pages/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import AICalculator from '../components/AICalculator';
+
+const HomePage: React.FC = () => {
+  return (
+    <div className="flex justify-center items-center h-screen">
+      <AICalculator />
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/package.json b/package.json
index cf4ff37..2709f8c 100644
--- a/package.json
+++ b/package.json
@@ -4,5 +4,10 @@
   "scripts": {
     "build:production": "cd ./frontend && yarn install && yarn run build && rm -rf ./node_modules && cd ../backend && yarn install",
     "start:production": "cd ./backend && NODE_ENV=production yarn start"
-  }
+  },
+  "description": "- Frontend: [React.js](https://flatlogic.com/templates?framework%5B%5D=react&sort=default)",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }