diff --git a/src/App.css b/src/App.css
index e69de29..60c7b04 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,95 @@
+*{
+ 
+    padding: 0;
+    margin: 0;
+    background-color: rgb(142, 45, 45);
+}
+
+.header{
+   
+    height: 400px;
+    width: 400px;
+    margin: 40px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    background-image: none;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+.header-tittle{
+    height: 30px;
+    width: 300px;
+    background-color: rgb(248, 224, 9);
+ 
+    padding: 20px 60px;
+    background-image: none;
+    border-radius:  20px 20px 0 0 ;
+   
+}
+.header-Tip{
+  display: flex; 
+  flex-direction: column ;
+  background-color: rgb(125, 189, 254);
+  background-image: none;
+   height: 300px;
+   width: 380px;
+   padding: 20px;
+   border-radius: 0 0 20px  20px;
+   margin-top: 20px;
+
+}
+.header-Tip-label{
+    background-color: rgb(125, 189, 254);
+    margin: 0 auto;
+    background-image: none;
+    font-weight: 500;
+    padding-top: 30px;
+    font-weight: 600;
+}
+.header-Tip-input{
+    background-color: rgb(125, 189, 254);
+    margin: 0 auto;
+    margin-bottom: 10px;
+    height: 25px;
+    width: 150px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    background-image: none;
+    padding-left: 100px;
+    font-weight: bold;
+    color: rgb(61, 61, 2);
+}
+.header-Tip-input:focus{
+    outline: none;
+}
+.header-Tip-btn{
+ 
+    margin: 0 auto;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    height: 40px;
+    width: 110px;
+    border-radius: 20px;
+    background-color: rgb(248, 224, 9) ;
+    background-image: none;
+    color:black;
+    font-weight: 700;
+    border: rgb(209, 177, 177) solid 2px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+.header-result{
+    background-color: rgb(125, 189, 254);
+    margin: 0 auto;
+    background-image: none;
+    margin-top: 10px;
+   font-size: larger;
+   font-weight: lighter;
+}
+.header-result-output{
+    font-family:     Arial, sans-serif;
+    font-weight: 600;
+    background-image: none;
+    color: rgb(165, 15, 15);
+    background-color: rgb(125, 189, 254);
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 93624ea..9a14348 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,36 @@
+import { useState } from "react";
 import "./App.css";
 
 function App() {
+  const [Bill, setBill] = useState("");
+   const [Input, setInput] = useState("");
+  const [Tip, setTip] = useState("")
+  function TipCalculate() {
+    if(Input >= 50 && Input <=300 ){
+      const newTip =  (15/100)*Input;
+      setTip(newTip);
+      setBill(parseInt(Input) + parseInt(Tip))
+    }
+    else if(Input > 300){
+      const newTip =  (20/100)*Input;
+      setTip(newTip);
+      setBill(parseInt(Input) + parseInt(Tip))
+    }
+  }
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div className="header">
+      <h1 className="header-tittle">Tip Calculator💴</h1>
+      <div className="header-Tip">
+
+        <label className="header-Tip-label ">Enter Your bill Here</label>
+        <input className="header-Tip-input" onChange={(e) => { setInput(e.target.value) }} ></input>
+        <button   className="header-Tip-btn" onClick={TipCalculate}>calculate</button>
+
+        {Input && <h4 className="header-result">Your bill is <span className="header-result-output">{Input}</span> , your tip is <span className="header-result-output"> {Tip}</span>, and your total bill value is   <span className="header-result-output">{Bill}</span> </h4>}
+      </div>
     </div>
   );
 }
 
 export default App;
+