diff --git a/frontend/src/pages/calculator.tsx b/frontend/src/pages/calculator.tsx
index 9a2e9d2..e723421 100644
--- a/frontend/src/pages/calculator.tsx
+++ b/frontend/src/pages/calculator.tsx
@@ -1,4 +1,4 @@
-import { mdiCalculator, mdiHistory } from '@mdi/js'
+import { mdiCalculator } from '@mdi/js'
 import Head from 'next/head'
 import React, { useState, ReactElement } from 'react'
 import CardBox from '../components/CardBox'
@@ -11,23 +11,37 @@ import BaseButtons from '../components/BaseButtons'
 import FormField from '../components/FormField'
 
 const CalculatorPage = () => {
-  const [input, setInput] = useState('')
-  const [results, setResults] = useState({ hex: '', dec: '', oct: '', bin: '' })
+  const [val1, setVal1] = useState('')
+  const [val2, setVal2] = useState('')
+  const [base, setBase] = useState<'hex' | 'dec' | 'oct' | 'bin'>('dec')
+  const [operation, setOperation] = useState<'+' | '-' | '*' | '/' | 'AND' | 'OR' | 'XOR'>('+')
+  const [result, setResult] = useState<string | null>(null)
+
+  const parseInput = (val: string, base: number) => parseInt(val, base)
 
   const handleCalculate = () => {
-    // Basic implementation for now - this should ideally call the backend
     try {
-      const decValue = parseInt(input, 10)
-      if (isNaN(decValue)) throw new Error('Invalid input')
+      const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 }
+      const v1 = parseInput(val1, baseMap[base])
+      const v2 = parseInput(val2, baseMap[base])
       
-      setResults({
-        hex: decValue.toString(16).toUpperCase(),
-        dec: decValue.toString(10),
-        oct: decValue.toString(8),
-        bin: decValue.toString(2)
-      })
+      if (isNaN(v1) || (val2 && isNaN(v2))) throw new Error('Invalid input')
+      
+      let res: number
+      switch(operation) {
+        case '+': res = v1 + v2; break
+        case '-': res = v1 - v2; break
+        case '*': res = v1 * v2; break
+        case '/': res = v1 / v2; break
+        case 'AND': res = v1 & v2; break
+        case 'OR': res = v1 | v2; break
+        case 'XOR': res = v1 ^ v2; break
+        default: res = v1
+      }
+      
+      setResult(res.toString(baseMap[base]).toUpperCase())
     } catch (e) {
-      alert('Error: Please enter a valid decimal number')
+      alert('Error: Invalid operation')
     }
   }
 
@@ -41,28 +55,29 @@ const CalculatorPage = () => {
           {''}
         </SectionTitleLineWithButton>
         <CardBox className="mb-6">
-          <FormField label="Enter Decimal Number">
-            <input 
-              type="text" 
-              value={input} 
-              onChange={(e) => setInput(e.target.value)} 
-              className="w-full p-2 border rounded"
-              placeholder="e.g. 255"
-            />
-          </FormField>
+          <div className="flex gap-2 mb-4">
+            {(['hex', 'dec', 'oct', 'bin'] as const).map(b => (
+              <BaseButton key={b} color={base === b ? 'info' : 'light'} label={b.toUpperCase()} onClick={() => setBase(b)} />
+            ))}
+          </div>
+          <div className="flex gap-4">
+            <FormField label="Value 1" className="flex-1"><input value={val1} onChange={(e) => setVal1(e.target.value)} className="w-full p-2 border rounded" /></FormField>
+            <FormField label="Operation" className="w-24">
+              <select value={operation} onChange={(e) => setOperation(e.target.value as any)} className="w-full p-2 border rounded">
+                <option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
+                <option value="AND">AND</option><option value="OR">OR</option><option value="XOR">XOR</option>
+              </select>
+            </FormField>
+            <FormField label="Value 2" className="flex-1"><input value={val2} onChange={(e) => setVal2(e.target.value)} className="w-full p-2 border rounded" /></FormField>
+          </div>
           <BaseButtons>
             <BaseButton color="info" label="Calculate" onClick={handleCalculate} />
           </BaseButtons>
         </CardBox>
 
-        {results.dec && (
+        {result !== null && (
           <CardBox>
-            <div className="grid grid-cols-2 gap-4">
-              <div><strong>Decimal:</strong> {results.dec}</div>
-              <div><strong>Hex:</strong> 0x{results.hex}</div>
-              <div><strong>Octal:</strong> {results.oct}</div>
-              <div><strong>Binary:</strong> {results.bin}</div>
-            </div>
+            <div className="text-xl font-bold">Result: {result}</div>
           </CardBox>
         )}
       </SectionMain>
@@ -70,8 +85,6 @@ const CalculatorPage = () => {
   )
 }
 
-CalculatorPage.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
-}
+CalculatorPage.getLayout = (page: ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>
 
 export default CalculatorPage