diff --git a/api/controller.js b/api/controller.js
index 949731c..403a0ba 100644
--- a/api/controller.js
+++ b/api/controller.js
@@ -16,6 +16,8 @@ exports.calculate = function(req, res) {
     'subtract': function(a, b) { return a - b },
     'multiply': function(a, b) { return a * b },
     'divide':   function(a, b) { return a / b },
+    'power':   function(a, b) { return Math.pow(a, b) },
+    'sqrt':    function(a) { return Math.sqrt(a) },
   };
 
   if (!req.query.operation) {
diff --git a/public/client.js b/public/client.js
index 1c60f86..10f2480 100644
--- a/public/client.js
+++ b/public/client.js
@@ -33,6 +33,13 @@ function calculate(operand1, operand2, operation) {
         case '/':
             uri += "?operation=divide";
             break;
+        case '^':
+            uri += "?operation=power";
+            break;
+        case 'sqrt':
+            uri += "?operation=sqrt";
+            operand2 = 0;
+            break;
         default:
             setError();
             return;
diff --git a/public/default.css b/public/default.css
index c652a2b..d742e06 100644
--- a/public/default.css
+++ b/public/default.css
@@ -1,186 +1,67 @@
-BODY {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    background-color: #1b4076;
-}
-
-@media screen and (min-device-width: 500px) and (min-device-height: 1024px) {
-    BODY {
-        transform: scale(1.75);
-        transform-origin: 50% 0;
-        height: 50%;
-    }
-}
-
-@media screen and (min-device-width: 1024px) and (min-device-height: 1366px) {
-    BODY {
-        transform: scale(2.0);
-        transform-origin: 50% 0;
-        height: 50%;
-    }
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f3f4f6;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
 .container {
-    min-width: 250px;
-    min-height: 531px;
-    width: 250px;
-    padding: 25px;
-    margin: 0 auto;
-    position: relative;
-    background-image: url(background.png);
-    background-size: 300px 531px;
-    background-repeat: no-repeat;
-    background-position: center top;
+  width: 100%;
+  max-width: 400px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 }
 
 #results {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
-#buttons {
-    position: relative;
-}
-
-#result {
-    background-color: #9b9b9b;
-    width: 226px;
-    height: 63px;
-    margin: 0;
-    padding: 0 12px;
-    position: absolute;
-    border: 0;
-    left: 0;
-    top: 32px;
-    font-family: system-ui;
-    font-size: 25px;
-    text-align: right;
-}
-
-/*BUTTON {
-    background-color: #d5d5d5;
-    border: 0;
-    border-radius: 0;
-    width: 55px;
-    height: 42px;
-    position: absolute;
-
-    font-size: 22px;
-}*/
-
-#sign,
-#clear {
-    font-size: 17px;
-}
-
-#clearEntry {
-    font-size: 15px;
-}
-
-#image-icon {
-    left: 0px;
-    top: 202px;
-    position: relative;
-    width: 55px;
-    height: 42px;
-}
-
-.resultchar {
-    display: inline-block;
-    width: 25px;
-    height: 45px;
-    background: url('digits.png') 0 0 no-repeat;
-    background-size: cover;
-    margin-top: 10px;
-    font: 0/0 Arial;
-    color: rgba(255, 255, 255, 0);
-    text-indent: -9999px;
-    z-index: 1;
-}
-
-.digit0 {
-    background-position: 0 0;
-}
-
-.digit1 {
-    background-position: -25px 0;
+  background-color: #1e293b;
+  color: #ffffff;
+  text-align: right;
+  padding: 20px;
+  font-size: 2rem;
+  font-weight: bold;
 }
 
-.digit2 {
-    background-position: -50px 0;
-}
-
-.digit3 {
-    background-position: -75px 0;
-}
-
-.digit4 {
-    background-position: -100px 0;
-}
-
-.digit5 {
-    background-position: -125px 0;
-}
-
-.digit6 {
-    background-position: -150px 0;
-}
-
-.digit7 {
-    background-position: -175px 0;
-}
-
-.digit8 {
-    background-position: -200px 0;
-}
-
-.digit9 {
-    background-position: -225px 0;
-}
-
-.resultchar.decimal {
-    width: 7px;
-    background-position: -250px 0;
-}
-
-.resultchar.negative {
-    background-position: -257px 0;
-    width: 17px;
+.calculator-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  padding: 20px;
 }
 
-.resultchar.exponent {
-    background-position: -275px 0;
-    width: 25px;
+.btn {
+  background-color: #e2e8f0;
+  border: none;
+  border-radius: 8px;
+  padding: 15px;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #1e293b;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.box {
-    box-sizing: border-box;
-    top: 220px;
-    width: 250px;
-    position: absolute;
+.btn:hover {
+  background-color: #cbd5e1;
 }
 
-.span-2 {
-    grid-column: span 2;
+.btn:active {
+  background-color: #94a3b8;
 }
 
-.calculator-buttons {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    border: 0;
+.btn.operation {
+  background-color: #3b82f6;
+  color: #ffffff;
 }
 
-.calculator {
-    max-width: 320px;
+.btn.operation:hover {
+  background-color: #2563eb;
 }
 
-.btn {
-    font-size: 1em;
-    height: 45px;
-    border: 1px solid black;
-    background-color: #d5d5d5;
-    margin: 4px;
+.btn.operation:active {
+  background-color: #1d4ed8;
 }
diff --git a/public/index.html b/public/index.html
index 400c454..51bfbac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,6 +41,10 @@
             <button class="btn" onClick="equalPressed()">=</button>
 
             <!-- TODO: Buttons -->
+             <!-- add a button for a power (or exponential) function --> 
+              <button class="btn" onClick="operationPressed('^')">^</button>
+            <!-- add a button for a square root function -->
+              <button class="btn" onClick="operationPressed('sqrt')">√</button>
           </div>
         </div>
       </div>
diff --git a/test/arithmetic.test.js b/test/arithmetic.test.js
index deded48..59eb76d 100644
--- a/test/arithmetic.test.js
+++ b/test/arithmetic.test.js
@@ -94,6 +94,97 @@ describe('Arithmetic', function () {
     });
 
 // TODO: Challenge #1
+// add tests for subtraction - refer to other tests in the file
+    describe('Subtraction', function () {
+        it('subtracts two positive integers', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=21&operand2=21')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 0 });
+                    done();
+                });
+        }
+        );
+        it('subtracts zero from an integer', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=42&operand2=0')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 42 });
+                    done();
+                });
+        });
+        it('subtracts a negative integer from a positive integer', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=21&operand2=-42')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 63 });
+                    done();
+                });
+        });
+        it('subtracts two negative integers', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=-21&operand2=-21')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 0 });
+                    done();
+                });
+        });
+        it('subtracts an integer from a floating point number', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=2.5&operand2=-5')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 7.5 });
+                    done();
+                });
+        });
+        it('subtracts with negative exponent', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=1.2e-5&operand2=-1.2e-5')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 2.4e-5 });
+                    done();
+                });
+        });
+        it('subtracts two floating point numbers', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=2.5&operand2=0.5')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 2 });
+                    done();
+                });
+        });
+        it('subtracts two floating point numbers with negative exponent', function (done) {
+            request.get('/arithmetic?operation=subtract&operand1=1.2e-5&operand2=0.5')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: -0.499988 });
+                    done();
+                });
+        });
+        
+    });
+
+    describe('Power', function () {
+        it('raises a positive integer to a positive integer power', function (done) {
+            request.get('/arithmetic?operation=power&operand1=2&operand2=3')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 8 });
+                    done();
+                });
+        });
+    });
+
+    describe('Square Root', function () {
+        it('calculates the square root of a positive integer', function (done) {
+            request.get('/arithmetic?operation=sqrt&operand1=4')
+                .expect(200)
+                .end(function (err, res) {
+                    expect(res.body).to.eql({ result: 2 });
+                    done();
+                });
+        });
+    });
  
 
     describe('Multiplication', function () {