diff --git a/src/App.css b/src/App.css
index e69de29..680908a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,75 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.main {
+    height: 100vh;
+    background-image: linear-gradient(190deg, rgba(249, 138, 158, 0.635), rgba(9, 9, 246, 0.251));
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    background-color: rgb(251, 146, 164);
+    height: 400px;
+    width: 400px;
+    box-shadow: 0px 0px  20px rgb(255, 255, 255);
+    border-radius: 50px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+}
+h1{
+    margin-top: 25px;
+}
+
+    
+
+
+
+input {
+    margin-top: 20px;
+    height: 50px;
+    width: 200px;
+    text-align: center;
+    border-radius: 10px;
+    border: 2px solid rgb(246, 83, 83);
+}
+
+p {
+    margin-top: 15px;
+    color: white;
+    text-align: center;
+
+}
+
+button {
+    margin-top: 20px;
+    height: 50px;
+    width: 200px;
+    text-align: center;
+    border-radius: 10px;
+    border: 2px solid rgb(246, 83, 83);
+}
+.total {
+    margin-top: 20px;
+    height: 40px;
+    width: 130px;
+    text-align: center;
+    border-radius: 10px;
+border: 2px solid rgb(246, 83, 83);
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.25rem;
+    background-color: white;
+    color: rgb(0, 0, 0);
+}
diff --git a/src/App.js b/src/App.js
index 93624ea..6a34568 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,44 @@
 import "./App.css";
+import { useState } from "react";
 
 function App() {
+
+ 
+  const [bill,setBill] = useState(0)
+ 
+  
+   const [tip,setTip] = useState()
+  const [total,setTotal] = useState(bill + tip )
+
+  
+   
+  function tipCalc(){
+  
+   
+  if( bill >= 50 && bill <= 300 ){
+    setTip(0.15 * bill);
+    setTotal(bill + tip)
+
+  } else {
+    setTip(0.20 * bill);
+    setTotal(bill + tip)
+     
+  }};
+
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div className='main'>
+      <div className="container">
+        <h1>Tip Calculator</h1>
+        <input type='text' placeholder="Enter your bill" onChange={(e)=>{
+           setBill(+e.target.value)
+        
+        }}/>
+        
+        <button onClick={tipCalc}>Calculate</button>
+        <p>Your bill  was {bill}, the tip was {tip}, and the total value is </p>
+        <div className="total"> {total}</div>
+      </div>
+      
     </div>
   );
 }