diff --git a/src/App.css b/src/App.css
index e69de29..949a02d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,48 @@
+body{
+  background-color: rgb(154, 240, 240);
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+font-family:monospace;
+}
+.bmi{
+  display: flex;
+  flex-direction:column;
+  align-items: center;
+  justify-content: center;
+  width: 20rem;
+  height: 22rem;
+  padding: 20px;
+  background-color: rgb(68, 216, 216);
+  color: white;
+}
+
+.bmi > input{
+  margin: 10px;
+  padding: 5px;
+  width: 20rem;
+  background: transparent;
+  color: rgb(5, 42, 255);
+  
+  
+}
+::-webkit-input-placeholder {
+  color: white;
+  font-size: 15px;
+  font-family: monospace;
+}
+.bmi > button {
+  padding: 10px;
+  background-color: rgb(32, 80, 80);
+  border: 1px solid rgb(68, 216, 216) ;
+  font-weight: 700;
+  border-radius: 10px;
+  font-size: 17px;
+  cursor: pointer;
+  color: white;
+  font-family: monospace;
+}
+.bmi > label, h4{
+  font-size: 18px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 93624ea..b02080a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,30 @@
 import "./App.css";
+import React from "react";
+import { useState } from "react";
+import { ReactDOM } from "react";
+
 
 function App() {
+
+  const [input,setInput] = useState("")
+  const [inputtwo, setInputtwo] = useState("")
+  const [result,setResult] = useState("")
+ function check(){
+     let BMI = input / inputtwo ** 2;
+     setResult(BMI);
+
+ }
+
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div className="bmi">
+      <h1>BMI Calculator</h1>
+      <label>Enter your Weight</label>
+      <input type="number" placeholder="Weight" onChange={(e) => setInput(e.target.value) }/>
+      <label>Enter your Height</label>
+      <input type="number" placeholder="Height"  onChange={(e) => setInputtwo(e.target.value) } />
+         <button onClick={check}>CHECK BMI</button>
+
+         <h4>Your BMI🏋️‍♂️ is {result}</h4>
     </div>
   );
 }