diff --git a/calculator_app/__pycache__/circle.cpython-311.pyc b/calculator_app/__pycache__/circle.cpython-311.pyc
new file mode 100644
index 0000000..d37fc28
Binary files /dev/null and b/calculator_app/__pycache__/circle.cpython-311.pyc differ
diff --git a/calculator_app/__pycache__/circle.cpython-312.pyc b/calculator_app/__pycache__/circle.cpython-312.pyc
new file mode 100644
index 0000000..5d586d8
Binary files /dev/null and b/calculator_app/__pycache__/circle.cpython-312.pyc differ
diff --git a/calculator_app/__pycache__/flask_app.cpython-311.pyc b/calculator_app/__pycache__/flask_app.cpython-311.pyc
new file mode 100644
index 0000000..3c95cad
Binary files /dev/null and b/calculator_app/__pycache__/flask_app.cpython-311.pyc differ
diff --git a/calculator_app/__pycache__/helper.cpython-311.pyc b/calculator_app/__pycache__/helper.cpython-311.pyc
new file mode 100644
index 0000000..66fad66
Binary files /dev/null and b/calculator_app/__pycache__/helper.cpython-311.pyc differ
diff --git a/calculator_app/__pycache__/helper.cpython-312.pyc b/calculator_app/__pycache__/helper.cpython-312.pyc
new file mode 100644
index 0000000..ab6b8e5
Binary files /dev/null and b/calculator_app/__pycache__/helper.cpython-312.pyc differ
diff --git a/calculator_app/__pycache__/test_circle.cpython-311.pyc b/calculator_app/__pycache__/test_circle.cpython-311.pyc
new file mode 100644
index 0000000..74a2c5b
Binary files /dev/null and b/calculator_app/__pycache__/test_circle.cpython-311.pyc differ
diff --git a/calculator_app/circle.py b/calculator_app/circle.py
new file mode 100644
index 0000000..1919608
--- /dev/null
+++ b/calculator_app/circle.py
@@ -0,0 +1,51 @@
+# create function to calculate the perimeter of a circle by inputting the radius
+import math 
+import unittest
+    
+
+# create helper functions for calculations
+
+
+def circle_calculation(value1: float, operation: str) -> float:
+    """
+    Perform a mathematical operation on two values.
+
+    Parameters:
+        value1 (float): radius 
+        
+        operation (str): The operation to perform. Can be 'area', 'perimeter"
+
+    Returns:
+        float: The result of the operation.
+
+    Raises:
+        ZeroDivisionError: If attempting to divide by zero.
+    """
+    if operation == 'Area':
+        result = math.pi * value1 ** 2 # πr^2
+    else:
+        result = 2 * math.pi * value1 # 2πr
+
+    return result
+
+
+def convert_to_float(value: str) -> float:
+    """
+    Convert string to floating point number.
+
+    Parameters:
+        value (str): The value to convert.
+
+    Returns:
+        float: The converted float value of input value.
+
+    Raises:
+        ValueError: If value cannot be converted to a float.
+    """
+
+    float_value = float(value)
+
+    return float_value
+
+
+
diff --git a/calculator_app/flask_app.py b/calculator_app/flask_app.py
new file mode 100644
index 0000000..0a7c546
--- /dev/null
+++ b/calculator_app/flask_app.py
@@ -0,0 +1,70 @@
+from flask import Flask, render_template, request
+
+from helper import perform_calculation, convert_to_float
+from circle import circle_calculation, convert_to_float
+
+
+app = Flask(__name__)  # create the instance of the flask class
+
+
+@app.route('/')
+@app.route('/home')
+def home():
+    return render_template('home.html')
+
+
+@app.route('/calculate', methods=['GET', 'POST'])  # associating the GET and POST method with this route
+def calculate():
+    if request.method == 'POST':
+        # using the request method from flask to request the values that were sent to the server through the POST method
+        value1 = request.form['value1']
+        value2 = request.form['value2']
+        operation = str(request.form['operation'])
+
+        # make sure the input is one of the allowed inputs (not absolutely necessary in the drop-down case)
+        if operation not in ['add', 'subtract', 'divide', 'multiply']:
+            return render_template('calculator.html',
+                                   printed_result='Operation must be one of "add", "subtract", "divide", or "multiply".')
+
+        try:
+            value1 = convert_to_float(value=value1)
+            value2 = convert_to_float(value=value2)
+        except ValueError:
+            return render_template('calculator.html', printed_result="Cannot perform operation with this input")
+
+        try:
+            result = perform_calculation(value1=value1, value2=value2, operation=operation)
+            #result = perform_calculation(value1=value1,  operation=operation)
+            return render_template('calculator.html', printed_result=str(result))
+
+        except ZeroDivisionError:
+            return render_template('calculator.html', printed_result="You cannot divide by zero")
+
+    return render_template('calculator.html')
+
+
+@app.route('/perimeter', methods=['GET', 'POST'])  # associating the GET and POST method with this route
+def perimeter():
+    if request.method == 'POST':
+        # using the request method from flask to request the values that were sent to the server through the POST method
+        value1 = request.form['value1'] 
+        operation = str(request.form['operation'])
+
+        # make sure the input is one of the allowed inputs (not absolutely necessary in the drop-down case)
+        if operation not in ['Area', 'Perimeter']:
+            return render_template('perimeter.html',
+                                   printed_result='Operation must be one of "Area", "Perimeter".')
+
+        try:
+            value1 = convert_to_float(value=value1)
+        except ValueError:
+            return render_template('perimeter.html', printed_result="Cannot perform operation with this input")
+
+        try:
+            result = circle_calculation(value1=value1, operation=operation)
+            return render_template('perimeter.html', printed_result=str(result))
+
+        except ZeroDivisionError:
+            return render_template('perimeter.html', printed_result="You cannot divide by zero")
+
+    return render_template('perimeter.html')
diff --git a/calculator_app/helper.py b/calculator_app/helper.py
new file mode 100644
index 0000000..5f21aed
--- /dev/null
+++ b/calculator_app/helper.py
@@ -0,0 +1,47 @@
+# create helper functions for calculations
+
+
+def perform_calculation(value1: float, value2: float, operation: str) -> float:
+    """
+    Perform a mathematical operation on two values.
+
+    Parameters:
+        value1 (float): The first value.
+        value2 (float): The second value.
+        operation (str): The operation to perform. Can be 'add', 'subtract', 'divide', or 'multiply'.
+
+    Returns:
+        float: The result of the operation.
+
+    Raises:
+        ZeroDivisionError: If attempting to divide by zero.
+    """
+    if operation == 'add':
+        result = value1 + value2
+    elif operation == 'subtract':
+        result = value1 - value2
+    elif operation == 'divide':
+        result = value1 / value2
+    else:
+        result = value1 * value2
+
+    return result
+
+
+def convert_to_float(value: str) -> float:
+    """
+    Convert string to floating point number.
+
+    Parameters:
+        value (str): The value to convert.
+
+    Returns:
+        float: The converted float value of input value.
+
+    Raises:
+        ValueError: If value cannot be converted to a float.
+    """
+
+    float_value = float(value)
+
+    return float_value
diff --git a/calculator_app/static/main.css b/calculator_app/static/main.css
new file mode 100644
index 0000000..776cbb4
--- /dev/null
+++ b/calculator_app/static/main.css
@@ -0,0 +1,99 @@
+/* Global Styles */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f8f9fa;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header Styles */
+header {
+    background-color: #343a40; /* Dark neutral color for header */
+    color: #fff; /* Light text color for header */
+    padding: 10px 0;
+}
+
+#navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.logo {
+    margin: 0;
+    font-size: 24px;
+}
+
+.menu {
+    list-style-type: none;
+    padding: 0;
+}
+
+.menu li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+.menu li a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 18px;
+}
+
+h1 a {
+    color: #ffc8dd;
+}
+
+h1 a:hover {
+    color: #ffafcc;
+}
+
+.menu li a:hover {
+    color: #bde0fe; /* Light pastel color on hover */
+}
+
+/* Calculator Styles */
+h1 {
+    text-align: center;
+    margin-top: 0;
+    font-size: 36px;
+    color: #343a40; /* Dark neutral color for heading */
+}
+
+form {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+input[type="text"],
+select,
+button {
+    margin: 10px 0;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
+button {
+    background-color: #343a40; /* Dark neutral color for button */
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease; /* Smooth transition for background color change */
+}
+
+button:hover {
+    background-color: #23272b; /* Slightly darker color on hover */
+}
diff --git a/calculator_app/templates/calculator.html b/calculator_app/templates/calculator.html
new file mode 100644
index 0000000..998ccdf
--- /dev/null
+++ b/calculator_app/templates/calculator.html
@@ -0,0 +1,23 @@
+{% extends 'layout.html' %}
+{% block content %}
+	<h1>Calculator</h1>
+    <form method="post">
+        <input type="text" name="value1" placeholder="Enter the first number" required="required" />
+        <input type="text" name="value2" placeholder="Enter the second number" required="required" />
+
+        <label for="operation">Operation</label>
+        <select id="operation" name="operation">
+            <option value="add">Add</option>
+            <option value="subtract">Subtract</option>
+            <option value="divide">Divide</option>
+            <option value="multiply">Multiply</option>
+        </select>
+
+        <button type="submit">Calculate</button>
+    </form>
+
+   <br>
+
+   {{ printed_result }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/calculator_app/templates/home.html b/calculator_app/templates/home.html
new file mode 100644
index 0000000..8a634f3
--- /dev/null
+++ b/calculator_app/templates/home.html
@@ -0,0 +1,5 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <h1>Welcome!</h1>
+    <p>Use the navigation bar, to find the calculator you need.</p>
+{% endblock %}
\ No newline at end of file
diff --git a/calculator_app/templates/layout.html b/calculator_app/templates/layout.html
new file mode 100644
index 0000000..3e5b534
--- /dev/null
+++ b/calculator_app/templates/layout.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
+</head>
+  <body>
+    <header>
+      <div id="navbar">
+        <h1 class="logo"><a href="{{ url_for('home') }}">Home</a></h1>
+        <strong><nav>
+          <ul class="menu">
+            <li><a href="{{ url_for('calculate') }}">General Calculator</a></li>
+            <li><a href="{{ url_for('perimeter') }}">Circle Calculator</a></li> 
+          </ul>
+        </nav></strong>
+      </div>
+    </header>
+      <div class="container">
+      {% block content %}
+      {% endblock %}
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/calculator_app/templates/perimeter.html b/calculator_app/templates/perimeter.html
new file mode 100644
index 0000000..d4785f6
--- /dev/null
+++ b/calculator_app/templates/perimeter.html
@@ -0,0 +1,21 @@
+{% extends 'layout.html' %}
+{% block content %}
+	<h1>Calculator</h1>
+    <form method="post">
+        <input type="text" name="value1" placeholder="Enter the Radius" required="required" />
+
+        <label for="operation">Operation</label>
+        <select id="operation" name="operation">
+            <option value="Area">Area</option> 
+            <option value="Perimeter">Perimeter</option>
+        </select>
+
+        <button type="submit">Calculate</button>
+    </form>
+
+   <br>
+
+   {{ printed_result }}
+
+{% endblock %}
+
diff --git a/calculator_app/test_circle.py b/calculator_app/test_circle.py
new file mode 100644
index 0000000..7e038bd
--- /dev/null
+++ b/calculator_app/test_circle.py
@@ -0,0 +1,16 @@
+import unittest
+from circle import circle_calculation
+
+class TestCircleCalculations(unittest.TestCase):
+    def test_area(self):
+        # Testing area calculation
+        result = circle_calculation(value1=5, operation='Area')
+        self.assertAlmostEqual(result, 78.53981633974483, places=5)
+
+    def test_perimeter(self):
+        # Testing perimeter calculation
+        result = circle_calculation(value1=5, operation='Perimeter')
+        self.assertAlmostEqual(result, 31.41592653589793, places=5)
+
+if __name__ == '_main_':
+    unittest.main()