diff --git a/frontend/src/components/Homepage.tsx b/frontend/src/components/Homepage.tsx
index a800fff..ea9370d 100644
--- a/frontend/src/components/Homepage.tsx
+++ b/frontend/src/components/Homepage.tsx
@@ -56,13 +56,12 @@ function Homepage() {
                 const xDiff = (x: number) => (x - posX) / 20
                 const yDiff = (y: number) => (y - posY) / 20
                 const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
-                const warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
-                // console.log(warst, params)
+                const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
 
                 setTimeout(() => {
                     setActve(false)
                     setCount(e => e + 1)
-                }, Math.max(...warst) * 1000 + 300)
+                }, Math.max(...diagonals) * 1000 + 300)
             }
 
             return (
@@ -76,7 +75,7 @@ function Homepage() {
         }
 
         return (
-            <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color1': colors[count % (colors.length - 1)], '--bg-color2': colors[(count + 1) % (colors.length - 1)] } as CSSProperties}>
+            <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color-1': colors[count % colors.length], '--bg-color-2': colors[(count + 1) % colors.length] } as CSSProperties}>
                 {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
             </div>
         )
diff --git a/frontend/src/components/Homepage2.tsx b/frontend/src/components/Homepage2.tsx
index aefb23c..c250a34 100644
--- a/frontend/src/components/Homepage2.tsx
+++ b/frontend/src/components/Homepage2.tsx
@@ -10,6 +10,7 @@ function Homepage2() {
     const [params, setParams] = useState({ columns, rows, quantity: columns * rows })
     const [position, setPosition] = useState([0, 0])
     const [active, setActve] = useState(false)
+    const [action, setAction] = useState(false)
     const [count, setCount] = useState(0)
 
     useEffect(() => {
@@ -30,13 +31,12 @@ function Homepage2() {
 
     const createTiles = useMemo(() => {
 
-        const colors = [
-            'rgb(229, 57, 53)',
-            'rgb(253, 216, 53)',
-            'rgb(244, 81, 30)',
-            'rgb(76, 175, 80)',
-            'rgb(33, 150, 243)',
-            'rgb(156, 39, 176)'
+        const sentences = [
+            'Ethem ...',
+            'hat ...',
+            'lange ...',
+            'Hörner 🐂',
+            'Grüße von Mallorca 🌊 🦦 ☀️'
         ]
 
         function createTile(index: number) {
@@ -48,27 +48,28 @@ function Homepage2() {
             const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2)
 
             const doEffect = (posX: number, posY: number) => {
-                if (active)
+                if (action)
                     return
                 setPosition([posX, posY])
-                setActve(true)
+                setActve(e => !e)
+                setAction(true)
 
-                const xDiff = (x: number) => (x - posX) / 20
-                const yDiff = (y: number) => (y - posY) / 20
+                const xDiff = (x: number) => (x - posX) / 50
+                const yDiff = (y: number) => (y - posY) / 50
                 const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
-                const warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
-                // console.log(warst, params)
+                const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
 
                 setTimeout(() => {
-                    setActve(false)
-                    setCount(e => e + 1)
-                }, Math.max(...warst) * 1000 + 1000)
+                    setAction(false)
+                    if (active)
+                        setCount(e => e + 1)
+                }, Math.max(...diagonals) * 1000 + 1000)
             }
 
             return (
                 <div
                     key={index}
-                    className={'tile ' + (active ? 'active' : '')}
+                    className={'tile ' + (active ? 'active' : 'inactive')}
                     style={{ '--delay': pos + 's' } as CSSProperties}
                     onClick={() => doEffect(x, y)}
                 ></div>
@@ -76,11 +77,14 @@ function Homepage2() {
         }
 
         return (
-            <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color1': colors[count % (colors.length - 1)], '--bg-color2': colors[(count + 1) % (colors.length - 1)] } as CSSProperties}>
+            <div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows } as CSSProperties}>
+                <div className="center-div">
+                    <h1 className={'headline ' + (!active ? 'active' : 'inactive')}>{sentences[count % sentences.length]}</h1>
+                </div>
                 {Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
-            </div>
+            </div >
         )
-    }, [params, position, active, count])
+    }, [params, position, active, action])
 
     return createTiles
 }
diff --git a/frontend/src/styles/home.scss b/frontend/src/styles/home.scss
index f38ed0d..2177422 100644
--- a/frontend/src/styles/home.scss
+++ b/frontend/src/styles/home.scss
@@ -8,7 +8,7 @@
     grid-template-rows: repeat(var(--rows), 1fr);
 
     .tile {
-        background-color: var(--bg-color1);
+        background-color: var(--bg-color-1);
 
         &.active {
             animation: bright .3s forwards;
@@ -19,18 +19,18 @@
 
 @keyframes bright {
     0% {
-        background-color: var(--bg-color1);
+        background-color: var(--bg-color-1);
     }
 
     50% {
 
-        background-color: var(--bg-color2);
+        background-color: var(--bg-color-2);
         filter: brightness(130%);
         outline: 1px solid white;
     }
 
     100% {
 
-        background-color: var(--bg-color2);
+        background-color: var(--bg-color-2);
     }
 }
\ No newline at end of file
diff --git a/frontend/src/styles/home2.scss b/frontend/src/styles/home2.scss
index 3c5499c..b405784 100644
--- a/frontend/src/styles/home2.scss
+++ b/frontend/src/styles/home2.scss
@@ -14,7 +14,6 @@ $g2: rgb(236, 64, 122);
 
     .tile {
         position: relative;
-        background-color: var(--bg-color1);
 
         &::before {
             position: absolute;
@@ -24,9 +23,43 @@ $g2: rgb(236, 64, 122);
         }
 
         &.active {
-            animation: bright 1s forwards;
+            opacity: 1;
+            animation: hide .2s forwards;
             animation-delay: var(--delay);
         }
+
+        &.inactive {
+            opacity: 0;
+            animation: show .2s forwards;
+            animation-delay: var(--delay);
+        }
+    }
+
+    .center-div {
+        position: absolute;
+        height: 100vh;
+        width: 100vw;
+        display: inherit;
+
+        .headline {
+            margin: auto;
+            font-size: 5em;
+            background-color: rgba(20, 20, 20, 0.2);
+            padding: .25em .5em;
+            border-radius: .25em;
+
+            &.active {
+                opacity: 1;
+                animation: hide 2s forwards;
+                // animation-delay: 1s;
+            }
+
+            &.inactive {
+                opacity: 0;
+                animation: show 2s forwards;
+                // animation-delay: 1s;
+            }
+        }
     }
 }
 
@@ -40,24 +73,22 @@ $g2: rgb(236, 64, 122);
     }
 }
 
-@keyframes bright {
+@keyframes hide {
     0% {
-        background-color: var(--bg-color1);
-        opacity: 0;
-    }
-
-    40% {
-        background-color: var(--bg-color2);
-        opacity: 1;
-    }
-
-    60% {
-        background-color: var(--bg-color2);
         opacity: 1;
     }
 
     100% {
-        background-color: var(--bg-color2);
+        opacity: 0;
+    }
+}
+
+@keyframes show {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
         opacity: 1;
     }
 }
\ No newline at end of file