diff --git a/src/App.css b/src/App.css
index e69de29..a3894b1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,101 @@
+body{
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+}
+.container{   
+     text-align: center;
+    padding-top: 14%;
+    height: 35vw;
+    width: 100%;
+
+}
+.child {
+    background-color: #354f52;
+    display: inline-block;
+    padding: 20px 100px;
+    border: 3px black solid;
+    border-radius: 30px;
+
+
+}
+
+.header {
+    background-color: #457b9d;
+    display: inline-block;
+    padding: 0px 10px;
+    border: 2px solid black;
+    border-radius: 10px;
+    color: #f2f2f2;
+}
+
+.label-height {
+    font-size: 20px;
+    color: #f2f2f2;
+    font-family: sans-serif;
+}
+
+
+.label-height>input {
+    padding: 3px 25px;
+    text-align: center;
+    font-size: 15px;
+    border: 1px solid;
+    border-radius: 10px;
+    background-color: antiquewhite;
+    outline: 1px solid black;
+    margin-left: 5px;
+
+}
+
+.label-weight {
+    font-size: 20px;
+    color: #f2f2f2;
+    font-family:  sans-serif;
+}
+
+.label-weight>input {
+    padding: 3px 25px;
+    text-align: center;
+    font-size: 15px;
+    border: 1px solid;
+    border-radius: 10px;
+    background-color: antiquewhite;
+    outline: 1px solid black;
+    margin-left: 5px;
+    margin-top: 10px;
+
+}
+
+
+
+.btn {
+    margin-top: 20px;
+    padding: 10px 14px;
+    border-radius: 15px;
+    border: 0.5px solid black;
+    cursor: pointer;
+}
+
+.btn>span {
+    font-size: 14px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: bolder;
+
+}
+
+
+.result {
+    color: white;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 20px;
+    padding-top: 20px;
+}
+
+.result>span {
+    font-family: cursive;
+    color: #f4a261;
+    font-style: italic;
+}
+
diff --git a/src/App.js b/src/App.js
index 93624ea..6f2c8a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,45 @@
-import "./App.css";
+import React from 'react';
+import {useState} from 'react';
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+      // creating states 
+
+function Apps() {
+  const[inputh, setInputh]=useState()
+  const[inputw, setInputw]= useState()
+  const[bmi, setBmi]= useState()
+
+
+        // calculatin function 
+
+  function calculateBmi(){
+    let bim= (inputw)/ (inputh* inputh)
+    setBmi(bmi)
+  }
 
-function App() {
   return (
     <div>
-      <h1>Hello World</h1>
+        <div class="container">
+          <div class="child">
+          <h1> CALCULATE  YOUR BMI</h1>
+            <div class="input">
+              <label class="hieght">
+               <input type="number" placeholder="enter your hieght" onChange={(e)=> setInputh(e.target.value)}>input your hight</input>
+              </label>
+              <br/>
+              <label  class="wieght">
+               <input  type="number" placeholder="enter your wieght" onChange={(e)=> setInputw(e.target.value)}>input your hight</input>
+              </label>
+              <br/>
+               <button  class="btn" onClick={calculateBmi}><span>Calculate</span> </button>
+                <h2 class="result">YOUR BMI IS : <span>{bmi}</span></h2>
+            </div>
+      </div>  
+      </div>
     </div>
   );
 }
 
-export default App;
+    export default App;
+
diff --git a/src/index.js b/src/index.js
index 8db5acb..bd365f0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,4 +7,4 @@ root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);
\ No newline at end of file