diff --git a/react-advanced-tag1/src/App.tsx b/react-advanced-tag1/src/App.tsx
index dd728ff..d6a545e 100644
--- a/react-advanced-tag1/src/App.tsx
+++ b/react-advanced-tag1/src/App.tsx
@@ -1,4 +1,5 @@
 import './App.css'
+import EffectExercises from './components/exercises/EffectExercises'
 import Heading from './components/globals/Heading'
 import MainLayout from './layouts/MainLayout'
 
@@ -6,6 +7,7 @@ function App() {
 
   return <MainLayout>
     <Heading />
+    <EffectExercises />
     </MainLayout>
 }
 
diff --git a/react-advanced-tag1/src/components/exercises/EffectExercises/index.tsx b/react-advanced-tag1/src/components/exercises/EffectExercises/index.tsx
new file mode 100644
index 0000000..8b737d6
--- /dev/null
+++ b/react-advanced-tag1/src/components/exercises/EffectExercises/index.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react"
+
+export default function EffectExercises() {
+
+    const [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+        console.log("EffectExercises mounted");
+        const interval = setInterval(() => {
+            setCounter(prevCounter => prevCounter + 1);
+        }
+        , 1000);
+        return () => {
+            console.log("EffectExercises unmounted");
+            clearInterval(interval);
+        }
+    }, [counter]);
+    return (
+        <section>
+            <h2>Effect Exercises</h2>
+            <p>Counter: {counter}</p>
+
+            <button onClick={() => setCounter(0)}>Reset</button>
+        </section>
+    )
+}
\ No newline at end of file