diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 96767c40d749315814dffc72b452c374fe65b261..6c0e5a6c04a75a2575e3385e23a2960c816c1b37 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,21 +1,28 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+
+export function Home() {
+  {/* debug */}
+  const [ isVisible ] = React.useState();
+  const domRef = useRef(null)!;
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => console.log(entry.isIntersecting));
+    });
+    observer.observe(domRef.current!);
+  }, []);
 
-export function Home() {  
-  const [isVisible, setVisible] = React.useState(false);
-    const domRef = React.useRef(null)!;
-    React.useEffect(() => {
-      const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => setVisible(entry.isIntersecting));
-        entries.forEach(entry => console.log(entry.isIntersecting));
-      });
-      observer.observe(domRef.current!);
-    }, []);
   return (
     <>
-    <div className={`content-block${isVisible ? '.is-visible' : ''}`}
+      <div className='row col'
+        style={{
+          'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
+          'opacity': `${isVisible ? '1' : '0'}`,
+          'transform': `${isVisible ? 'none' : 'translateY(20vh)'}`,
+          'visibility': `${isVisible ? 'visible' : 'hidden'}`
+        }}
         ref={domRef}>
-                <img src="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></img>
-        </div>
-      </>
+          <img src="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></img>
+      </div>
+    </>
   );
 }