diff --git a/src/App.css b/src/App.css
index e69de29..0c437d6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,40 @@
+body{
+  height: 100vh;
+  background-color: rgb(241, 155, 241);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family:Verdana, Geneva, Tahoma, sans-serif ;
+  color: white;
+}
+.tip {
+  gap: 10px;
+  width: 15rem;
+  height: 30;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: rgb(252, 104, 252);
+  padding: 20px;
+
+}
+.tip > input{
+  padding: 5px;
+  background: rgb(252, 104, 252);
+  border: 1px solid rgb(105, 2, 105);
+}
+.tip > input:focus{
+  border: 1px dashed rgb(105, 2, 105);
+  outline: 0;
+}
+.tip > button{
+  padding: 5px;
+  width: 5rem;
+  border: 1px solid rgb(105, 2, 105);
+  border-radius: 10px;
+  background: rgb(252, 104, 252);
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 93624ea..7e696ec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,35 @@
+import { useState } from "react";
+import React from "react";
+import { ReactDOM } from "react";
 import "./App.css";
 
 function App() {
+   
+        const [bill,setBill] = useState()
+        const [tips,setTips] = useState("")
+        const [result,setResult]=  useState("")
+      
+        function CheckBill(){
+
+          let tip = ""
+          if(bill > 50 && bill < 300){
+            tip = bill * 0.15
+            setTips(tip)
+          }else 
+          tip = bill * 0.20
+          
+          setResult(`Your bill was ${bill} and tip is ${tips} and the Total value is ${bill + tips}`)
+        }
+          
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div className="tip">
+      <h2>Tip Calculator</h2>
+     <span>Enter your Bill</span> <input type="number" placeholder="Bill" onChange={(e) => setBill(e.target.value *1)}/>
+       
+       <button onClick={(CheckBill)}>Check</button>
+ 
+       <p>{result}</p>
+  
     </div>
   );
 }