diff --git a/projects/basic-calculator/index.html b/projects/basic-calculator/index.html
index 432ea60..9574f9c 100644
--- a/projects/basic-calculator/index.html
+++ b/projects/basic-calculator/index.html
@@ -1,35 +1,32 @@
-<!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Basic Calculator</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <body style="background-color:powderblue;"></body>
 </head>
 <body>
+    <h1>Calculator</h1>
     <div class="calculator">
-        <input type="text" id="result" readonly>
+        <input type="text" id="display" readonly>
         <div class="buttons">
-            <button class="clear">C</button>
-            <button class="operator">/</button>
-            <button class="operator">*</button>
-            <button class="operator">-</button>
-            <button class="number">7</button>
-            <button class="number">8</button>
-            <button class="number">9</button>
-            <button class="operator">+</button>
-            <button class="number">4</button>
-            <button class="number">5</button>
-            <button class="number">6</button>
-            <button class="equals">=</button>
-            <button class="number">1</button>
-            <button class="number">2</button>
-            <button class="number">3</button>
-            <button class="number">0</button>
-            <button class="decimal">.</button>
+            <button onclick="clearDisplay()">C</button>
+            <button onclick="appendToDisplay('7')">7</button>
+            <button onclick="appendToDisplay('8')">8</button>
+            <button onclick="appendToDisplay('9')">9</button>
+            <button onclick="appendToDisplay('+')">+</button>
+            <button onclick="appendToDisplay('4')">4</button>
+            <button onclick="appendToDisplay('5')">5</button>
+            <button onclick="appendToDisplay('6')">6</button>
+            <button onclick="appendToDisplay('-')">-</button>
+            <button onclick="appendToDisplay('1')">1</button>
+            <button onclick="appendToDisplay('2')">2</button>
+            <button onclick="appendToDisplay('3')">3</button>
+            <button onclick="appendToDisplay('*')">*</button>
+            <button onclick="appendToDisplay('0')">0</button>
+            <button onclick="appendToDisplay('.')">.</button>
+            <button onclick="calculateResult()">=</button>
+            <button onclick="appendToDisplay('/')">/</button>
         </div>
     </div>
-    <script src="index.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/projects/basic-calculator/style.css b/projects/basic-calculator/style.css
index baf4abd..977e453 100644
--- a/projects/basic-calculator/style.css
+++ b/projects/basic-calculator/style.css
@@ -1,68 +1,46 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-
 .calculator {
-  background-color: #f2f2f2;
-  padding: 20px;
-  max-width: 400px;
-  margin: 0 auto;
-  border: solid 1px #ccc;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  margin-top: 40px;
+    width: 250px;
+    margin: 0 auto;
+    text-align: center;
+    background-color: #2c3e50; /* Dark blue-gray background */
+    border: 1px solid #34495e; /* Slightly darker border color */
+    border-radius: 5px;
+    padding: 10px;
 }
 
-#result{
-    width: 100%;
-    padding: 10px;
-    font-size: 24px;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
-    border-radius: 5px;
+#display {
+    width: 95%;
+    margin: 5px;
+    padding: 5px;
+    font-size: 20px;
+    color: #ecf0f1; /* Light gray text color for better contrast */
+    background-color: #34495e; /* Slightly darker blue-gray background */
+    border: 1px solid #2c3e50; /* Matching border color */
+    border-radius: 3px;
 }
 
-.buttons{
+.buttons {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    grid-gap: 10px;
-    margin-top: 20px;
+    gap: 5px;
 }
 
-button{
+h1 {
+    text-align: center;
+    color: #2b0b11; /* Light gray text color for the heading */
+}
+
+button {
+    width: 100%;
     padding: 10px;
-    font-size: 24px;
+    font-size: 20px;
+    background-color: #3498db; /* Blue color for buttons */
+    color: #ffffff;
     border: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s ease;
-
-}
-
-button:hover{
-    background-color: #ddd;
-}
-
-.clear{
-    background-color: #ff4136;
-    color: #fff;
-}
-
-.number, .decimal{
-    background-color: #fff;
-    color: #333;
-
-}
-
-.operator{
-    background-color: #0074d9;
-    color: #fff;
 }
 
-.equals{
-    background-color: #01ff70;
-    grid-row: span 3;
-    color: #fff;
+button:hover {
+    background-color: #2980b9; /* Darker blue color on hover */
 }
\ No newline at end of file
