diff --git a/index.css b/index.css
new file mode 100644
index 0000000..1b64a1f
--- /dev/null
+++ b/index.css
@@ -0,0 +1,169 @@
+body {
+    color: hsl(186, 14%, 43%);
+    background-color: hsl(185, 41%, 84%);
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    margin: 0; 
+    padding: 0;
+}
+
+.firstContainer {
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    margin: auto; /*center the elements in the container*/
+    text-align: center;
+    padding: 2rem;
+    width: 90%; 
+    max-width: 50rem; 
+}
+
+.calculator {
+    margin-top: 2rem;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap; /*responsive*/
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-radius: 0.625rem;
+}
+
+.input-bill {
+    flex: 1;
+    min-width: 15rem; /* adjust to smaller screens */
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: left;
+    padding: 1rem;
+}
+
+.output-bill{
+    flex: 1;
+    min-width: 15rem; /*adjust to smaller screens*/
+}
+
+
+.input-icon {
+    position: relative;
+    width: 100%;
+}
+
+.input-icon input {
+    background-color: hsl(189, 41%, 97%);
+    width: 70%;
+    padding-left: 2.5rem;
+    padding-right: 1rem;
+    height: 2rem; 
+    font-size: 1rem;
+    border: 0.063rem solid #ccc;
+    border-radius: 0.5rem;
+} 
+
+.input-icon img {
+    position: absolute;
+    top: 50%;
+    left: 0.625rem;
+    height: 1rem;
+    transform: translateY(-50%);
+    width: auto;
+    pointer-events: none;
+}
+
+.tip-btn {
+    display: inline-flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    width: 6rem;
+    height: 2.5rem;
+    cursor: pointer;
+    background-color: hsl(183, 100%, 15%);
+    color: white;
+    border: none;
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    border-radius: 0.5rem;
+    justify-content: center;
+    padding: 0.5rem;
+}
+
+.tip-btn:hover {
+    background-color: hsl(172, 67%, 45%);
+}
+
+#custom-btn:hover {
+    background-color: hsl(172, 67%, 45%);
+}
+
+#custom-btn {
+    background-color: hsl(189, 41%, 97%);
+    color: hsl(186, 14%, 43%);
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.output-bill{
+    text-align: left;
+    background-color: hsl(183, 100%, 15%);
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+#reset-btn {
+    text-align: center;
+    width: 90%;
+    height: 2.5rem;
+    border: none;
+    cursor: pointer;
+    background-color: hsl(172, 67%, 45%);
+    color: hsl(183, 100%, 15%);
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    display: block;
+    margin: 1rem auto; /* center the button*/
+    border-radius: 0.5rem;
+}
+
+div h2 {
+    color: hsl(172, 67%, 45%);
+}
+
+div p span {
+    color: hsl(186, 14%, 43%);
+}
+
+.results {
+    display: flex;
+    justify-content: space-between;
+}
+
+.reset {
+    margin-top: 5rem;
+}
+
+
+@media (max-width: 375px) {
+    .container {
+        padding: 1rem; 
+        width: 100%; /* full size in smaller screens */
+    }
+
+    .calculator {
+        flex-direction: column; 
+        gap: 1rem; 
+    }
+
+    .output-bill,
+    .input-section {
+        min-width: 100%; /*  maximize the space*/
+    }
+
+    .tip-btn {
+        width: 100%; 
+    }
+}
diff --git a/index.html b/index.html
index 5c09e8d..4d14b7c 100644
--- a/index.html
+++ b/index.html
@@ -5,35 +5,64 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-  
+  <link rel="stylesheet" href="index.css">
   <title>Frontend Mentor | Tip calculator app</title>
 
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
+  <!---------font----------------->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+  <!---------font----------------->
 </head>
-<body>
-
-  Bill
 
-  Select Tip %
-  5%
-  10%
-  15%
-  25%
-  50%
-  Custom
-
-  Number of People
+<body>
+  <!-- FirstContainer-->
+  <div class="firstContainer">
+    <img src="/images/logo.svg" alt="logo">
+    <div class="calculator">
+        <!-- Left things-->
+        <div class="input-bill">
+            <label for="bill">Bill</label>
+            <div class="input-icon">
+                <input type="number" id="bill" placeholder="0">
+                <img src="/images/icon-dollar.svg" alt="dollar icon">
+            </div>
+            
+            <label for="tips">Select Tip %</label>
+            <div class="tip-buttons">
+                <button class="tip-btn" onclick="calcTip(5)" >5%</button>
+                <button class="tip-btn" onclick="calcTip(10)" >10% </button>
+                <button class="tip-btn" onclick="calcTip(15)">15%</button>
+                <button class="tip-btn" onclick="calcTip(25)">25%</button>
+                <button class="tip-btn" onclick="calcTip(50)">50%</button>
+                <button class="tip-btn" id="custom-btn" >Custom</button>
+            </div>
 
-  Tip Amount
-  / person
+            <label for="amount people">Number of People</label>
+            <div class="input-icon">
+                <input type="number" id="people" placeholder="0">
+                <img src="/images/icon-person.svg" alt="person icon">
+            </div>
+             <button class="tip-btn" id="submit-btn" >submit</button>
 
-  Total
-  / person
+        </div>
 
-  Reset
+        <!-- Right things -->
+        <div class="output-bill">
+            <div class="results">
+                <p>Tip Amount <br> <span>/ person</span></p>
+                <h2 id="tip-amount">$0.00</h2>
+            </div>
+            <div class="results">
+                <p>Total <br> <span>/ person</span></p>
+                <h2 id="total">$0.00</h2>
+            </div>
+            <div class="reset">
+                 <button id="reset-btn">RESET</button>
+            </div> 
+        </div>
+    </div>
+</div>
+<script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..22de4f0
--- /dev/null
+++ b/index.js
@@ -0,0 +1,37 @@
+let bill = 0;
+let numberPeople = 0;
+let tip = 0;
+
+// ההזנה ללחצן טיפ
+const calcTip = (t) => {
+    tip = t;
+}
+// מה שהמשתמש הכניס ידנית (כמות ומספר חשבון)
+const allUpdate = () => {
+    bill = document.getElementById("bill").value;
+    numberPeople = document.getElementById("people").value;
+}
+
+
+const test = () => {
+    if (isNaN(bill) || bill <= 0) {
+        alert("Please enter a valid bill amount");
+        return;
+    }
+    //הכנסת מספר שלילי של אנשים
+    if (isNaN(numberPeople) || numberPeople <= 0) {
+        alert("Please enter a valid number of people");
+        return;
+    }
+    const tipAmount = ((bill * tip) / 100) / numberPeople; // לכל בנאדם- חישוב התשלום עם האחוז-TIP AMOUNT
+    const totalofperson = (bill / numberPeople) + tipAmount;
+
+    document.getElementById("tip-amount").innerHTML = `$${tipAmount.toFixed(2)}`;//התוצאה עם שתי ספרות אחרי הנקודה
+    document.getElementById("total").innerHTML = `$${totalofperson.toFixed(2)}`;
+}
+
+//הקשבה לבחירת המשתמש
+document.getElementById("bill").addEventListener("input", allUpdate);
+document.getElementById("people").addEventListener("input", allUpdate);
+document.getElementById("submit-btn").addEventListener("click", test);
+