diff --git a/Django Calculator App/Calculator/__pycache__/__init__.cpython-310.pyc b/Django Calculator App/Calculator/__pycache__/__init__.cpython-310.pyc
new file mode 100644
index 0000000..6c551ca
Binary files /dev/null and b/Django Calculator App/Calculator/__pycache__/__init__.cpython-310.pyc differ
diff --git a/Django Calculator App/Calculator/__pycache__/settings.cpython-310.pyc b/Django Calculator App/Calculator/__pycache__/settings.cpython-310.pyc
new file mode 100644
index 0000000..8321a80
Binary files /dev/null and b/Django Calculator App/Calculator/__pycache__/settings.cpython-310.pyc differ
diff --git a/Django Calculator App/Calculator/__pycache__/urls.cpython-310.pyc b/Django Calculator App/Calculator/__pycache__/urls.cpython-310.pyc
new file mode 100644
index 0000000..bf324ec
Binary files /dev/null and b/Django Calculator App/Calculator/__pycache__/urls.cpython-310.pyc differ
diff --git a/Django Calculator App/Calculator/__pycache__/wsgi.cpython-310.pyc b/Django Calculator App/Calculator/__pycache__/wsgi.cpython-310.pyc
new file mode 100644
index 0000000..d1f0249
Binary files /dev/null and b/Django Calculator App/Calculator/__pycache__/wsgi.cpython-310.pyc differ
diff --git a/Django Calculator App/Calculator/urls.py b/Django Calculator App/Calculator/urls.py
index 4be2e74..edb23f4 100644
--- a/Django Calculator App/Calculator/urls.py	
+++ b/Django Calculator App/Calculator/urls.py	
@@ -14,10 +14,10 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
-from django.conf.urls import url, include
+from django.urls import path, include
+
 
 urlpatterns = [
-    url(r'^$', include('calc.urls')),
+    path('', include('calc.urls')),
     path('admin/', admin.site.urls),
 ]
diff --git a/Django Calculator App/calc/__pycache__/__init__.cpython-310.pyc b/Django Calculator App/calc/__pycache__/__init__.cpython-310.pyc
new file mode 100644
index 0000000..020e618
Binary files /dev/null and b/Django Calculator App/calc/__pycache__/__init__.cpython-310.pyc differ
diff --git a/Django Calculator App/calc/__pycache__/admin.cpython-310.pyc b/Django Calculator App/calc/__pycache__/admin.cpython-310.pyc
new file mode 100644
index 0000000..5360472
Binary files /dev/null and b/Django Calculator App/calc/__pycache__/admin.cpython-310.pyc differ
diff --git a/Django Calculator App/calc/__pycache__/apps.cpython-310.pyc b/Django Calculator App/calc/__pycache__/apps.cpython-310.pyc
new file mode 100644
index 0000000..f3eaebc
Binary files /dev/null and b/Django Calculator App/calc/__pycache__/apps.cpython-310.pyc differ
diff --git a/Django Calculator App/calc/__pycache__/models.cpython-310.pyc b/Django Calculator App/calc/__pycache__/models.cpython-310.pyc
new file mode 100644
index 0000000..378d8dc
Binary files /dev/null and b/Django Calculator App/calc/__pycache__/models.cpython-310.pyc differ
diff --git a/Django Calculator App/calc/__pycache__/urls.cpython-310.pyc b/Django Calculator App/calc/__pycache__/urls.cpython-310.pyc
new file mode 100644
index 0000000..00d8ea8
Binary files /dev/null and b/Django Calculator App/calc/__pycache__/urls.cpython-310.pyc differ
diff --git a/Django Calculator App/calc/__pycache__/views.cpython-310.pyc b/Django Calculator App/calc/__pycache__/views.cpython-310.pyc
new file mode 100644
index 0000000..554ec48
Binary files /dev/null and b/Django Calculator App/calc/__pycache__/views.cpython-310.pyc differ
diff --git a/Django Calculator App/calc/urls.py b/Django Calculator App/calc/urls.py
index 12012a2..55f023b 100644
--- a/Django Calculator App/calc/urls.py	
+++ b/Django Calculator App/calc/urls.py	
@@ -1,6 +1,6 @@
-from django.conf.urls import url
-from calc import views
+from . import views
+from django.urls import path
 
 urlpatterns = [
-    url(r'^$', views.index, name='index'),
+    path('', views.index, name='index'),
 ]
diff --git a/Django Calculator App/db.sqlite3 b/Django Calculator App/db.sqlite3
new file mode 100644
index 0000000..e69de29
diff --git a/Django Calculator App/static/css/calc.css b/Django Calculator App/static/css/calc.css
index 34f6edc..b765f1f 100644
--- a/Django Calculator App/static/css/calc.css	
+++ b/Django Calculator App/static/css/calc.css	
@@ -1,17 +1,21 @@
-table{
-    margin-left:auto; 
-    margin-right:auto;
+textarea {
+    resize: none;
+    border: none;
+    background: transparent;
 }
-
-textarea{
-	display: block;
- 	margin-bottom: 8px;
- 	margin-left:auto; 
-    margin-right:auto;
-    border-radius: 5px;
- }
-
- button{
- 	height: 40px;
- 	width: 40px;
- }
\ No newline at end of file
+.btn {
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    padding: 0.75rem 0;
+    transition: transform 0.15s ease;
+}
+.btn:hover {
+    transform: translateY(-2px);
+}
+.row.g-2 .btn {
+    box-shadow: none;
+}
+.card {
+    border: none;
+    border-radius: 1rem;
+}
\ No newline at end of file
diff --git a/Django Calculator App/templates/index.html b/Django Calculator App/templates/index.html
index c06f90c..5743618 100644
--- a/Django Calculator App/templates/index.html	
+++ b/Django Calculator App/templates/index.html	
@@ -1,63 +1,91 @@
 <!DOCTYPE html>
-{% load staticfiles %}
-<html>
+{% load static %}
+<html lang="en" data-bs-theme="light">
 <head>
-	<title>Calculator</title>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="{% static "css/calc.css" %}">
-	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
-  			integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-  			crossorigin="anonymous">
-  	</script>
-</head>
-<body>
-	<div class="container">
-		<div class="jumbotron">
-			<h1 class="display-3">Calculator App</h1>
-			<p class="lead">This is a simple calculator application developed by Cavin Dsouza.</p>
-			<hr class="my-4">
-		</div>
-
+    <meta charset="UTF-8">
+    <title>Calculator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<textarea id="resultArea" readonly rows="3" cols="21"></textarea>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
-		<table>
-			<tr>
-				<td></td>
-				<td></td>
-				<td><button id="clrTxt" class="btn btn-danger">C</button></td>
-				<td><button id="del" class="btn btn-default">&#9746;</button></td>
-			</tr>
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
 
-			<tr>
-				<td><button id="num7" class="btn btn-default">7</button></td>
-				<td><button id="num8" class="btn btn-default">8</button></td>
-				<td><button id="num9" class="btn btn-default">9</button></td>
-				<td><button id="op3" class="btn btn-default">&div;</button></td>
-			</tr>
-
-			<tr>
-				<td><button id="num4" class="btn btn-default">4</button></td>
-				<td><button id="num5" class="btn btn-default">5</button></td>
-				<td><button id="num6" class="btn btn-default">6</button></td>
-				<td><button id="op2" class="btn btn-default">&times;</button></td>
-			</tr>
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'css/calc.css' %}">
+</head>
+<body class="bg-body text-body">
 
-			<tr>
-				<td><button id="num1" class="btn btn-default">1</button></td>
-				<td><button id="num2" class="btn btn-default">2</button></td>
-				<td><button id="num3" class="btn btn-default">3</button></td>
-				<td><button id="op1" class="btn btn-default">&minus;</button></td>
-			</tr>
+	<div class="container min-vh-100 d-flex flex-column justify-content-center align-items-center">
 
-			<tr>
-				<td><button id="decp" class="btn btn-default">.</button></td>
-				<td><button id="num0" class="btn btn-default">0</button></td>
-				<td><button id="eq" class="btn btn-default">=</button></td>
-				<td><button id="op0" class="btn btn-default">&plus;</button></td>
-			</tr>
-		</table>
+		<!-- Card wrapper for cleaner look -->
+		<div class="card shadow-sm" style="max-width: 420px; width: 100%;">
+			<div class="card-body p-4">
+				<!-- Header -->
+				<div class="jumbotron">
+					<div class="position-fixed top-0 end-0 m-5" style="z-index: 1050;">
+						<div class="form-check form-switch bg-light bg-opacity-75 p-2 rounded shadow-sm">
+							<i class="bi bi-sun-fill text-warning"></i>
+							<input class="form-check-input ms-2 me-2" type="checkbox" id="themeToggle">
+							<i class="bi bi-moon-fill text-secondary"></i>
+						</div>
+					</div>
+					<h1 class="display-5">Calculator App</h1>
+					<p class="lead">This is a simple calculator application developed by Cavin Dsouza.</p>
+					<hr class="my-4">
+				</div>
+				<div class="d-flex justify-content-between align-items-center mb-3">
+				
+					
+				</div>
+	
+				<!-- Display -->
+				<div class="mb-4">
+					<textarea id="resultArea" readonly rows="2" class="form-control text-end fs-4" placeholder="0"></textarea>
+				</div>
+	
+				<!-- Buttons grid -->
+				<div class="row g-2">
+					<div class="col-6">
+						<button id="clrTxt" class="btn btn-danger w-100">C</button>
+					</div>
+					<div class="col-6">
+						<button id="del" class="btn btn-secondary w-100"><i class="bi bi-backspace-fill"></i></button>
+					</div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num7">7</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num8">8</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num9">9</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op3">÷</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num4">4</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num5">5</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num6">6</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op2">×</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num1">1</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num2">2</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num3">3</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op1">−</button></div>
+					<div class="col-3"><button class="btn btn-outline-secondary w-100" id="decp">.</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num0">0</button></div>
+					<div class="col-3"><button class="btn btn-success w-100" id="eq">=</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op0">+</button></div>
+				</div>
+			</div>
+		</div>
+	
 	</div>
-	<script type="text/javascript" src="{% static "js/calc.js" %}"></script>
+	
+	<!-- Scripts -->
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+	<script src="{% static 'js/calc.js' %}"></script>
+	<script>
+		const toggle = document.getElementById('themeToggle');
+		const html = document.documentElement;
+		toggle.addEventListener('change', () => {
+			const mode = html.getAttribute('data-bs-theme') === 'light' ? 'dark' : 'light';
+			html.setAttribute('data-bs-theme', mode);
+		});
+	</script>
+	
 </body>
 </html>
diff --git a/README.md b/README.md
index f45e369..91e7362 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,8 @@
 # A Simple Calculator Web application
 A simple calculator application using HTML, CSS, Javascript. <br>
 Check out the Django project folder to view the files created for the calculator app using Django. <br>
-![alt text](https://github.com/CAVIND46016/Simple-Calculator-Web-app/blob/master/calculator.png)
+
+![Calculator Screenshot](calculator.png)
+
+
+
diff --git a/calc.css b/calc.css
index ad35935..b765f1f 100644
--- a/calc.css
+++ b/calc.css
@@ -1,25 +1,21 @@
-table{
-    margin-left:auto; 
-    margin-right:auto;
+textarea {
+    resize: none;
+    border: none;
+    background: transparent;
 }
-
-textarea{
-    display: block;
-    margin-bottom: 8px;
-    margin-left:auto; 
-    margin-right:auto;
-    border-radius: 5px;
- }
-
- button{
-    height: 40px;
-    width: 40px;
- }
- #opac{
-    opacity: 0.25;
-    /* margin-left: 32%; */
-    /* margin-bottom: 3px; */
-    height: 19px;
-    width: 87px;
-    margin: auto;
+.btn {
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    padding: 0.75rem 0;
+    transition: transform 0.15s ease;
+}
+.btn:hover {
+    transform: translateY(-2px);
+}
+.row.g-2 .btn {
+    box-shadow: none;
+}
+.card {
+    border: none;
+    border-radius: 1rem;
 }
\ No newline at end of file
diff --git a/calc.html b/calc.html
index 11333d1..5743618 100644
--- a/calc.html
+++ b/calc.html
@@ -1,63 +1,91 @@
 <!DOCTYPE html>
-<html>
+{% load static %}
+<html lang="en" data-bs-theme="light">
 <head>
-	<title>Calculator</title>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="calc.css">
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  
-	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
-  			integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-  			crossorigin="anonymous">
-  	</script>
-</head>
-<body>
-	<div class="container">
-		<div class="jumbotron">
-			<h1 class="display-3">Calculator App</h1>
-			<p class="lead">This is a simple calculator application developed by Cavin Dsouza.</p>
-			<hr class="my-4">
-		</div>
-
+    <meta charset="UTF-8">
+    <title>Calculator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<textarea id="resultArea" readonly rows="1" cols="21"></textarea>
-		<div id="opac"></div>
-		<table>
-			<tr>
-				<td></td>
-				<td></td>
-				<td><button id="clrTxt" class="btn btn-danger">C</button></td>
-				<td><button id="del" class="btn btn-default"><i class="material-icons" style="color:red">backspace</i></button></td>
-			</tr>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
-			<tr>
-				<td><button id="num7" class="btn btn-default">7</button></td>
-				<td><button id="num8" class="btn btn-default">8</button></td>
-				<td><button id="num9" class="btn btn-default">9</button></td>
-				<td><button id="op3" class="btn btn-default">&div;</button></td>
-			</tr>
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
 
-			<tr>
-				<td><button id="num4" class="btn btn-default">4</button></td>
-				<td><button id="num5" class="btn btn-default">5</button></td>
-				<td><button id="num6" class="btn btn-default">6</button></td>
-				<td><button id="op2" class="btn btn-default">&times;</button></td>
-			</tr>
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'css/calc.css' %}">
+</head>
+<body class="bg-body text-body">
 
-			<tr>
-				<td><button id="num1" class="btn btn-default">1</button></td>
-				<td><button id="num2" class="btn btn-default">2</button></td>
-				<td><button id="num3" class="btn btn-default">3</button></td>
-				<td><button id="op1" class="btn btn-default">&minus;</button></td>
-			</tr>
+	<div class="container min-vh-100 d-flex flex-column justify-content-center align-items-center">
 
-			<tr>
-				<td><button id="decp" class="btn btn-default">.</button></td>
-				<td><button id="num0" class="btn btn-default">0</button></td>
-				<td><button id="eq" class="btn btn-default">=</button></td>
-				<td><button id="op0" class="btn btn-default">&plus;</button></td>
-			</tr>
-		</table>
+		<!-- Card wrapper for cleaner look -->
+		<div class="card shadow-sm" style="max-width: 420px; width: 100%;">
+			<div class="card-body p-4">
+				<!-- Header -->
+				<div class="jumbotron">
+					<div class="position-fixed top-0 end-0 m-5" style="z-index: 1050;">
+						<div class="form-check form-switch bg-light bg-opacity-75 p-2 rounded shadow-sm">
+							<i class="bi bi-sun-fill text-warning"></i>
+							<input class="form-check-input ms-2 me-2" type="checkbox" id="themeToggle">
+							<i class="bi bi-moon-fill text-secondary"></i>
+						</div>
+					</div>
+					<h1 class="display-5">Calculator App</h1>
+					<p class="lead">This is a simple calculator application developed by Cavin Dsouza.</p>
+					<hr class="my-4">
+				</div>
+				<div class="d-flex justify-content-between align-items-center mb-3">
+				
+					
+				</div>
+	
+				<!-- Display -->
+				<div class="mb-4">
+					<textarea id="resultArea" readonly rows="2" class="form-control text-end fs-4" placeholder="0"></textarea>
+				</div>
+	
+				<!-- Buttons grid -->
+				<div class="row g-2">
+					<div class="col-6">
+						<button id="clrTxt" class="btn btn-danger w-100">C</button>
+					</div>
+					<div class="col-6">
+						<button id="del" class="btn btn-secondary w-100"><i class="bi bi-backspace-fill"></i></button>
+					</div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num7">7</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num8">8</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num9">9</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op3">÷</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num4">4</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num5">5</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num6">6</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op2">×</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num1">1</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num2">2</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num3">3</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op1">−</button></div>
+					<div class="col-3"><button class="btn btn-outline-secondary w-100" id="decp">.</button></div>
+					<div class="col-3"><button class="btn btn-outline-primary w-100" id="num0">0</button></div>
+					<div class="col-3"><button class="btn btn-success w-100" id="eq">=</button></div>
+					<div class="col-3"><button class="btn btn-outline-warning w-100" id="op0">+</button></div>
+				</div>
+			</div>
+		</div>
+	
 	</div>
-	<script type="text/javascript" src="calc.js"></script>
+	
+	<!-- Scripts -->
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+	<script src="{% static 'js/calc.js' %}"></script>
+	<script>
+		const toggle = document.getElementById('themeToggle');
+		const html = document.documentElement;
+		toggle.addEventListener('change', () => {
+			const mode = html.getAttribute('data-bs-theme') === 'light' ? 'dark' : 'light';
+			html.setAttribute('data-bs-theme', mode);
+		});
+	</script>
+	
 </body>
 </html>
diff --git a/calculator.png b/calculator.png
index 47b33ba..56ceb0e 100644
Binary files a/calculator.png and b/calculator.png differ