diff --git a/public/client.js b/public/client.js
index 1d21fd9..35a2eda 100644
--- a/public/client.js
+++ b/public/client.js
@@ -16,7 +16,129 @@ var operand1 = 0;
 var operand2 = 0;
 var operation = null;
 
+// Theme toggle functionality
+function toggleTheme() {
+    const body = document.body;
+    const themeIcon = document.querySelector('.theme-icon');
+    
+    if (body.classList.contains('dark-theme')) {
+        body.classList.remove('dark-theme');
+        themeIcon.textContent = '🌙';
+        localStorage.setItem('theme', 'light');
+    } else {
+        body.classList.add('dark-theme');
+        themeIcon.textContent = '☀️';
+        localStorage.setItem('theme', 'dark');
+    }
+}
+
+// Load saved theme on page load
+window.addEventListener('DOMContentLoaded', function() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('dark-theme');
+        const themeIcon = document.querySelector('.theme-icon');
+        if (themeIcon) {
+            themeIcon.textContent = '☀️';
+        }
+    }
+});
+
+// Scientific calculator functions
+function scientificPressed(func) {
+    var currentValue = getValue();
+    var result;
+    
+    switch(func) {
+        case 'sin':
+            result = Math.sin(currentValue * Math.PI / 180); // Convert to radians
+            break;
+        case 'cos':
+            result = Math.cos(currentValue * Math.PI / 180);
+            break;
+        case 'tan':
+            result = Math.tan(currentValue * Math.PI / 180);
+            break;
+        case 'log':
+            result = Math.log10(currentValue);
+            break;
+        case 'ln':
+            result = Math.log(currentValue);
+            break;
+        case 'sqrt':
+            result = Math.sqrt(currentValue);
+            break;
+        case 'square':
+            result = currentValue * currentValue;
+            break;
+        case 'pow':
+            // Store for power operation
+            operand1 = currentValue;
+            operation = '^';
+            state = states.operator;
+            return;
+        case 'exp':
+            result = Math.exp(currentValue);
+            break;
+        case 'abs':
+            result = Math.abs(currentValue);
+            break;
+        case 'inverse':
+            result = 1 / currentValue;
+            break;
+        case 'percent':
+            result = currentValue / 100;
+            break;
+        default:
+            setError();
+            return;
+    }
+    
+    setValue(result);
+    state = states.complete;
+}
+
+function constantPressed(constant) {
+    var value;
+    
+    switch(constant) {
+        case 'pi':
+            value = Math.PI;
+            break;
+        case 'e':
+            value = Math.E;
+            break;
+        default:
+            return;
+    }
+    
+    setValue(value);
+    state = states.operand1;
+}
+
+function backspacePressed() {
+    var currentValue = getValue().toString();
+    if (currentValue.length > 1) {
+        setValue(currentValue.slice(0, -1));
+    } else {
+        setValue(0);
+    }
+}
+
+function parenthesisPressed(paren) {
+    // Basic parenthesis support - for now just display
+    // Full implementation would require expression parsing
+    console.log('Parenthesis pressed:', paren);
+}
+
 function calculate(operand1, operand2, operation) {
+    // Handle power operation locally (client-side)
+    if (operation === '^') {
+        var result = Math.pow(operand1, operand2);
+        setValue(result);
+        return;
+    }
+    
     var uri = location.origin + "/arithmetic";
 
     // TODO: Add operator
diff --git a/public/default.css b/public/default.css
index bd14feb..d04b25f 100644
--- a/public/default.css
+++ b/public/default.css
@@ -7,6 +7,9 @@
     --button-bg: #f8f9fa;
     --button-hover: #e9ecef;
     --button-active: #dee2e6;
+    --button-scientific: #6c757d;
+    --button-scientific-hover: #5a6268;
+    --button-scientific-active: #4e555b;
     --button-operator: #007bff;
     --button-operator-hover: #0056b3;
     --button-operator-active: #004085;
@@ -27,19 +30,20 @@
     --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    :root {
-        --primary-bg: #121212;
-        --calculator-bg: #1e1e1e;
-        --display-bg: #000000;
-        --display-text: #ffffff;
-        --button-bg: #2d2d2d;
-        --button-hover: #3d3d3d;
-        --button-active: #4d4d4d;
-        --text-primary: #ffffff;
-        --text-secondary: #adb5bd;
-    }
+/* Dark theme */
+body.dark-theme {
+    --primary-bg: #121212;
+    --calculator-bg: #1e1e1e;
+    --display-bg: #000000;
+    --display-text: #ffffff;
+    --button-bg: #2d2d2d;
+    --button-hover: #3d3d3d;
+    --button-active: #4d4d4d;
+    --button-scientific: #495057;
+    --button-scientific-hover: #5a6268;
+    --button-scientific-active: #6c757d;
+    --text-primary: #ffffff;
+    --text-secondary: #adb5bd;
 }
 
 BODY {
@@ -47,27 +51,28 @@ BODY {
     width: 100vw;
     padding: 0;
     margin: 0;
-    background: linear-gradient(135deg, var(--primary-bg) 0%, #e3e6ea 100%);
+    background: var(--primary-bg);
     font-family: var(--font-family);
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    transition: background-color var(--transition-duration) ease;
 }
 
 /* Responsive scaling for larger screens */
 @media screen and (min-width: 768px) {
-    .container {
-        padding: 3rem;
-    }
-    
     .calculator {
-        width: 360px;
+        max-width: 650px;
     }
     
     .btn {
-        height: 70px;
-        font-size: 1.5rem;
+        height: 60px;
+        font-size: 1.2rem;
+    }
+    
+    .btn-scientific {
+        font-size: 1rem;
     }
     
     #result {
@@ -77,17 +82,17 @@ BODY {
 }
 
 @media screen and (min-width: 1024px) {
-    .container {
-        padding: 4rem;
-    }
-    
     .calculator {
-        width: 400px;
+        max-width: 700px;
     }
     
     .btn {
-        height: 80px;
-        font-size: 1.75rem;
+        height: 65px;
+        font-size: 1.3rem;
+    }
+    
+    .btn-scientific {
+        font-size: 1.1rem;
     }
     
     #result {
@@ -100,12 +105,12 @@ BODY {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 2rem;
+    padding: 1rem;
     margin: 0 auto;
     position: relative;
-    width: auto;
-    min-width: auto;
-    min-height: auto;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
 }
 
 #results {
@@ -156,18 +161,43 @@ BODY {
     grid-column: span 2;
 }
 
+.span-row-2 {
+    grid-row: span 2;
+}
+
+/* Scientific button styling */
+.btn-scientific {
+    background: var(--button-scientific);
+    color: white;
+    font-size: 0.95rem;
+}
+
+.btn-scientific:hover {
+    background: var(--button-scientific-hover);
+}
+
+.btn-scientific:active {
+    background: var(--button-scientific-active);
+}
+
 .calculator-buttons {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.75rem;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 0.5rem;
     border: none;
+    flex: 1;
+    align-content: start;
+}
+
+.calculator-buttons.scientific {
+    grid-template-columns: repeat(5, 1fr);
 }
 
 .btn {
     font-family: var(--font-family);
-    font-size: 1.25rem;
+    font-size: 1.1rem;
     font-weight: 500;
-    height: 60px;
+    height: 55px;
     border: none;
     border-radius: var(--border-radius-sm);
     background: var(--button-bg);
@@ -271,16 +301,58 @@ BODY {
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-lg);
     padding: 1.5rem;
-    width: 320px;
-    max-width: 90vw;
+    width: 90vw;
+    max-width: 600px;
+    min-width: 320px;
+    max-height: 95vh;
     position: relative;
-    transition: transform var(--transition-duration) ease;
+    transition: all var(--transition-duration) ease;
+    display: flex;
+    flex-direction: column;
 }
 
 .calculator:hover {
     box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
 }
 
+.calculator-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.calculator-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.theme-toggle {
+    background: var(--button-bg);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-duration) ease;
+    box-shadow: var(--shadow-sm);
+    font-size: 1.2rem;
+}
+
+.theme-toggle:hover {
+    background: var(--button-hover);
+    transform: rotate(15deg) scale(1.1);
+}
+
+.theme-toggle:active {
+    transform: rotate(15deg) scale(0.95);
+}
+
 /* Enhanced focus management and visual feedback */
 .btn:focus-visible {
     outline: none;
@@ -309,19 +381,26 @@ BODY {
 /* Improved mobile touch targets */
 @media (max-width: 767px) {
     .btn {
-        height: 60px;
-        font-size: 1.25rem;
+        height: 50px;
+        font-size: 1rem;
         min-height: 44px; /* iOS accessibility requirement */
     }
     
+    .btn-scientific {
+        font-size: 0.85rem;
+    }
+    
     .calculator {
-        width: 100%;
-        max-width: 400px;
-        margin: 0 1rem;
+        width: 95vw;
+        padding: 1rem;
+    }
+    
+    .calculator-title {
+        font-size: 1.2rem;
     }
     
     #result {
-        font-size: 1.75rem;
+        font-size: 1.5rem;
         height: 70px;
     }
 }
diff --git a/public/index.html b/public/index.html
index eaa7da7..e44a310 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,44 +1,76 @@
 <html lang="en">
   <head>
-    <title>Modern Calculator</title>
+    <title>Scientific Calculator</title>
     <link rel="stylesheet" href="default.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <meta name="description" content="A modern, accessible calculator application">
+    <meta name="description" content="A modern, accessible scientific calculator application">
     <script src="client.js"></script>
   </head>
   <body onLoad="setValue(0)">
     <div class="container">
-      <main class="calculator" role="application" aria-label="Calculator">
+      <main class="calculator" role="application" aria-label="Scientific Calculator">
+        <div class="calculator-header">
+          <h1 class="calculator-title">Scientific Calculator</h1>
+          <button class="theme-toggle" onClick="toggleTheme()" aria-label="Toggle dark/light mode">
+            <span class="theme-icon">🌙</span>
+          </button>
+        </div>
+        
         <div id="results">
           <div id="result" role="textbox" aria-label="Calculator display" aria-live="polite" aria-readonly="true" tabindex="0"><span class="digit0">0</span></div>
         </div>
 
         <div id="loading" style="visibility:hidden" aria-hidden="true"></div>
 
-        <div class="calculator-buttons" role="grid" aria-label="Calculator buttons">
-          <button class="btn span-2" aria-label="Empty button" disabled></button>
+        <div class="calculator-buttons scientific" role="grid" aria-label="Calculator buttons">
+          <!-- Scientific functions row 1 -->
+          <button class="btn btn-scientific" onClick="scientificPressed('sin')" aria-label="Sine">sin</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('cos')" aria-label="Cosine">cos</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('tan')" aria-label="Tangent">tan</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('log')" aria-label="Logarithm base 10">log</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('ln')" aria-label="Natural logarithm">ln</button>
+
+          <!-- Scientific functions row 2 -->
+          <button class="btn btn-scientific" onClick="scientificPressed('sqrt')" aria-label="Square root">√</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('square')" aria-label="Square">x²</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('pow')" aria-label="Power">x^y</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('exp')" aria-label="Exponential">eˣ</button>
+          <button class="btn btn-scientific" onClick="constantPressed('pi')" aria-label="Pi">π</button>
+
+          <!-- Scientific functions row 3 -->
+          <button class="btn btn-scientific" onClick="constantPressed('e')" aria-label="Euler's number">e</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('abs')" aria-label="Absolute value">|x|</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('inverse')" aria-label="Reciprocal">1/x</button>
+          <button class="btn btn-scientific" onClick="scientificPressed('percent')" aria-label="Percent">%</button>
+          <button class="btn btn-scientific" onClick="signPressed()" aria-label="Plus/Minus">±</button>
+
+          <!-- Clear buttons -->
           <button class="btn" onClick="clearPressed()" aria-label="Clear all">C</button>
           <button class="btn" onClick="clearPressed()" aria-label="Clear entry">CE</button>
+          <button class="btn" onClick="backspacePressed()" aria-label="Backspace">⌫</button>
+          <button class="btn" onClick="operationPressed('/')" aria-label="Divide">&divide;</button>
+          <button class="btn" onClick="operationPressed('*')" aria-label="Multiply">×</button>
 
+          <!-- Number pad and basic operations -->
           <button class="btn" onClick="numberPressed(7)" aria-label="Seven">7</button>
           <button class="btn" onClick="numberPressed(8)" aria-label="Eight">8</button>
           <button class="btn" onClick="numberPressed(9)" aria-label="Nine">9</button>
-          <button class="btn" onClick="operationPressed('/')" aria-label="Divide">&divide;</button>
+          <button class="btn" onClick="operationPressed('-')" aria-label="Subtract">−</button>
+          <button class="btn" onClick="parenthesisPressed('(')" aria-label="Left parenthesis">(</button>
 
           <button class="btn" onClick="numberPressed(4)" aria-label="Four">4</button>
           <button class="btn" onClick="numberPressed(5)" aria-label="Five">5</button>
           <button class="btn" onClick="numberPressed(6)" aria-label="Six">6</button>
-          <button class="btn" onClick="operationPressed('*')" aria-label="Multiply">×</button>
+          <button class="btn" onClick="operationPressed('+')" aria-label="Add">+</button>
+          <button class="btn" onClick="parenthesisPressed(')')" aria-label="Right parenthesis">)</button>
 
           <button class="btn" onClick="numberPressed(1)" aria-label="One">1</button>
           <button class="btn" onClick="numberPressed(2)" aria-label="Two">2</button>
           <button class="btn" onClick="numberPressed(3)" aria-label="Three">3</button>
-          <button class="btn" onClick="operationPressed('-')" aria-label="Subtract">−</button>
+          <button class="btn btn-equals span-row-2" onClick="equalPressed()" aria-label="Equals">=</button>
 
-          <button class="btn" onClick="numberPressed(0)" aria-label="Zero">0</button>
+          <button class="btn span-2" onClick="numberPressed(0)" aria-label="Zero">0</button>
           <button class="btn" onClick="decimalPressed()" aria-label="Decimal point">.</button>
-          <button class="btn" onClick="operationPressed('+')" aria-label="Add">+</button>
-          <button class="btn" onClick="equalPressed()" aria-label="Equals">=</button>
         </div>
       </main>
     </div>