diff --git a/src/App.js b/src/App.js
index e6919f7..7c121bd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,15 +3,154 @@ import Card from "./components/Card.js";
 import Stripe from "./components/Strip.js";
 import "./components/Card.css";
 import POMO from "./components/PomoText.js";
+import { useState } from "react";
 function App() {
+  const [focusTime, setfocusTime] = useState(["25", "00"]);
+  const [shortTime, setShortTime] = useState(["05", "00"]);
+  const [longTime, setLongTime] = useState(["15", "00"]);
+  const focusTimerHandler = async () => {
+    for (let minute = 0; minute < 25; minute++) {
+      await new Promise((resolve) => {
+        let secondsPassed = 0;
+        if (secondsPassed === 0) {
+          setfocusTime((prevState) => {
+            let arr = [...prevState];
+            arr[0] = parseInt(arr[0]) - 1;
+            arr[1] = 60;
+            return arr;
+          });
+        }
+        const intervalId = setInterval(() => {
+          setfocusTime((prevState) => {
+            let arr = [...prevState];
+            if (arr[1] === "00") {
+              arr[1] = "59";
+            }
+            arr[1] = parseInt(arr[1]) - 1;
+            return arr;
+          });
+          secondsPassed++;
+          if (secondsPassed >= 60) {
+            clearInterval(intervalId);
+            resolve();
+          }
+        }, 1000);
+      });
+      if (minute !== 24) {
+        setfocusTime((prevState) => {
+          let arr = [...prevState];
+          arr[0] = parseInt(arr[0]) - 1;
+          arr[1] = 60;
+          return arr;
+        });
+      }
+    }
+  };
+  const shortBreakTimerHandler = async () => {
+    for (let minute = 0; minute < 1; minute++) {
+      await new Promise((resolve) => {
+        let secondsPassed = 0;
+        if (secondsPassed === 0) {
+          setShortTime((prevState) => {
+            let arr = [...prevState];
+            arr[0] = parseInt(arr[0]) - 1;
+            arr[1] = 60;
+            return arr;
+          });
+        }
+        const intervalId = setInterval(() => {
+          setShortTime((prevState) => {
+            let arr = [...prevState];
+            if (arr[1] === "00") {
+              arr[1] = "59";
+            }
+            arr[1] = parseInt(arr[1]) - 1;
+            return arr;
+          });
+          secondsPassed++;
+          if (secondsPassed >= 60) {
+            clearInterval(intervalId);
+            resolve();
+          }
+        }, 1000);
+      });
+      if (minute !== 4) {
+        setShortTime((prevState) => {
+          let arr = [...prevState];
+          arr[0] = parseInt(arr[0]) - 1;
+          arr[1] = 60;
+          return arr;
+        });
+      }
+    }
+  };
+  const longBreakTimerHandler = async () => {
+    for (let minute = 0; minute < 15; minute++) {
+      await new Promise((resolve) => {
+        let secondsPassed = 0;
+        if (secondsPassed === 0) {
+          setLongTime((prevState) => {
+            let arr = [...prevState];
+            arr[0] = parseInt(arr[0]) - 1;
+            arr[1] = 60;
+            return arr;
+          });
+        }
+        const intervalId = setInterval(() => {
+          setLongTime((prevState) => {
+            let arr = [...prevState];
+            if (arr[1] === "00") {
+              arr[1] = "59";
+            }
+            arr[1] = parseInt(arr[1]) - 1;
+            return arr;
+          });
+          secondsPassed++;
+          if (secondsPassed >= 60) {
+            clearInterval(intervalId);
+            resolve();
+          }
+        }, 1000);
+      });
+      if (minute !== 14) {
+        setLongTime((prevState) => {
+          let arr = [...prevState];
+          arr[0] = parseInt(arr[0]) - 1;
+          arr[1] = 60;
+          return arr;
+        });
+      }
+    }
+  };
   return (
     <>
       <Card>
         {/* <Pomo className={"normal-box"}></Pomo> */}
         <POMO></POMO>
-        <Stripe color={"#fff2f2"} chipValue={"🧠 Focus"}></Stripe>
-        <Stripe color={"#f2fff5"} chipValue={"🍵 Short Break"}></Stripe>
-        <Stripe color={"#f2f9ff"} chipValue={"🍴 Long Break"} />
+        <Stripe
+          color={"#fff2f2"}
+          chipValue={"🧠 Focus"}
+          timeValue={focusTime}
+          focusHandler={focusTimerHandler}
+          // shortBreakHandler={shortBreakTimerHandler}
+          // longBreakTimerHandler={longBreakTimerHandler}
+        ></Stripe>
+        <Stripe
+          color={"#f2fff5"}
+          chipValue={"🍵 Short Break"}
+          timeValue={shortTime}
+          // focusHandler={focusTimerHandler}
+          shortBreakHandler={shortBreakTimerHandler}
+          // longBreakTimerHandler={longBreakTimerHandler}
+        ></Stripe>
+        <Stripe
+          color={"#f2f9ff"}
+          chipValue={"🍴 Long Break"}
+          timeValue={longTime}
+          // focusHandler={focusTimerHandler}
+          // shortBreakHandler={shortBreakTimerHandler}
+          longBreakTimerHandler={longBreakTimerHandler}
+        />
       </Card>
     </>
   );
diff --git a/src/components/Strip.js b/src/components/Strip.js
index 5e87af5..16fe66b 100644
--- a/src/components/Strip.js
+++ b/src/components/Strip.js
@@ -1,20 +1,34 @@
 import React from "react";
 import "./Strip.css";
 import Chip from "./Chip";
+import Timer from "./timer";
 const Stripe = (props) => {
   const color = props.color;
+  const clickHandler = (props1) => {
+    console.log(props1);
+    if (props1.target.value === "◀") {
+      props.focusHandler();
+    }
+    if (props1.target.value === "||") {
+      props.shortBreakHandler();
+    }
+    if (props1.target.value === "▶") {
+      props.longBreakTimerHandler();
+    }
+  };
   return (
     <div className="strip" style={{ backgroundColor: color }}>
       <Chip value={props.chipValue}></Chip>
+      <Timer timeValue={props.timeValue}></Timer>
       <div className="box flex-container">
-        <button className="chip-button" value={"||"}>
-          ||
+        <button className="chip-button" value={"◀"} onClick={clickHandler}>
+          ◀
         </button>
-        <button className="chip-button" value={"||"}>
+        <button className="chip-button" value={"||"} onClick={clickHandler}>
           ||
         </button>
-        <button className="chip-button" value={"||"}>
-          ||
+        <button className="chip-button" value={"▶"} onClick={clickHandler}>
+          ▶
         </button>
       </div>
     </div>
diff --git a/src/components/time.css b/src/components/time.css
new file mode 100644
index 0000000..5011483
--- /dev/null
+++ b/src/components/time.css
@@ -0,0 +1,8 @@
+.timer {
+  display: flex;
+  justify-content: center;
+  font-size: 100px;
+  font-weight: bold;
+
+  /* background-color: black; */
+}
diff --git a/src/components/timer.js b/src/components/timer.js
new file mode 100644
index 0000000..4490892
--- /dev/null
+++ b/src/components/timer.js
@@ -0,0 +1,13 @@
+import React from "react";
+import "./time.css";
+
+const Timer = (props) => {
+  return (
+    <div>
+      <div className="timer">{props.timeValue[0]}</div>
+      <div className="timer">{props.timeValue[1]}</div>
+    </div>
+  );
+};
+
+export default Timer;