diff --git a/src/components/core/InView.astro b/src/components/core/InView.astro
new file mode 100644
index 0000000..6d9e17e
--- /dev/null
+++ b/src/components/core/InView.astro
@@ -0,0 +1,16 @@
+<script>
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("in-view");
+          console.log("Added 'in-view' class to:", entry.target);
+        } else {
+          entry.target.classList.remove("in-view");
+          console.log("Removed 'in-view' class from:", entry.target);
+        }
+      });
+    }, { threshold: 0.2 });
+  
+    document.querySelectorAll("[data-inview]").forEach((el) => observer.observe(el));
+  </script>
+  
\ No newline at end of file
diff --git a/src/components/main_page/Divider.astro b/src/components/main_page/Divider.astro
index 008168d..e982917 100644
--- a/src/components/main_page/Divider.astro
+++ b/src/components/main_page/Divider.astro
@@ -1,6 +1,11 @@
-<div class="flex py-[15vh] px-[7vw] items-end w-full">
+---
+import InView from "../../components/core/InView.astro"
+---
+<InView />
+
+<div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
     <div class="w-3/5">
-        <p class="text-ieee-yellow text-[4.5vw] font-semibold">
+        <p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down">
             02
         </p>
         <p class="text-white text-[2.5vw] font-light">
@@ -12,4 +17,4 @@
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
     </p>
-</div>
+</div >