diff --git a/index.html b/index.html
index a4e5245..800c218 100644
--- a/index.html
+++ b/index.html
@@ -444,22 +444,18 @@ <h4>A Beginner's Guide to Starting Your Running Journey</h4>
     </div>
   </section>
 
-  <section class="section__container bmi__container">
+  
+  <div class="bmi-calculator">
+    <h2>BMI Calculator</h2>
+    <label for="height">Height (cm):</label>
+    <input type="number" id="height" placeholder="Enter your height">
 
-    <div class="wrapper">
-      <h2 class="bmi__header">BMI CALCULATOR</h2>
-      <p>Height in CM:
-        <input type="text" id="height"><br><span id="height_error"></span>
-      </p>
+    <label for="weight">Weight (kg):</label>
+    <input type="number" id="weight" placeholder="Enter your weight">
 
-      <p>Weight in KG:
-        <input type="text" id="weight"><br><span id="weight_error"></span>
-      </p>
+    <button id="calculate">Calculate</button>
+</div>
 
-      <button class="btn" id="btn">Calculate</button>
-      <p id="output"></p>
-    </div>
-  </section>
 
   <!-- Protein Intake Calculator -->
   <section class="section__container protein__container">
diff --git a/style.css b/style.css
index 2c66587..a96e2cd 100644
--- a/style.css
+++ b/style.css
@@ -1069,3 +1069,48 @@ url("assets/banner-2.png");
     margin-right: 200px;
   }
 }
+/* General Body Styles */
+body {
+  font-family: Arial, sans-serif; /* Change to your website's font */
+  background-color: #f9f9f9; /* Background color */
+  color: #333; /* Text color */
+}
+
+/* Container Styles */
+.bmi-calculator {
+  max-width: 400px; /* Maximum width of the calculator */
+  margin: 20px auto; /* Center the calculator */
+  padding: 20px; /* Padding inside the container */
+  background-color: #ffffff; /* Background color for the calculator */
+  border-radius: 8px; /* Rounded corners */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
+}
+
+/* Input Field Styles */
+input[type="number"] {
+  width: 100%; /* Full width */
+  padding: 10px; /* Padding inside the input */
+  margin: 10px 0; /* Margin around the input */
+  border: 1px solid #ccc; /* Border color */
+  border-radius: 4px; /* Rounded corners */
+  font-size: 16px; /* Font size */
+}
+
+/* Calculate Button Styles */
+button {
+  width: 100%; /* Full width */
+  padding: 10px; /* Padding inside the button */
+  margin-top: 10px; /* Margin above the button */
+  background-color: black; /* Button background color */
+  color: white; /* Text color */
+  border: none; /* No border */
+  border-radius: 4px; /* Rounded corners */
+  font-size: 18px; /* Font size */
+  cursor: pointer; /* Pointer cursor on hover */
+  transition: background-color 0.3s; /* Smooth transition for hover effect */
+}
+
+/* Button Hover Effect */
+button:hover {
+  background-color: grey; /* Darker blue on hover */
+}