diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 0483f0e..094a64a 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -7,7 +7,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className="bg-game-show">{children}</body>
+      <body className="bg-game-show animate h-screen">{children}</body>
     </html>
   );
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 8701b97..27bbcb3 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -2,9 +2,8 @@ import Image from "next/image";
 
 export default function Page() {
   return (
-    <>
-      <h1>Hallo mooie wereld!</h1>
+    <div className="flex items-center justify-center h-full">
       <Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
-    </>
+    </div>
   );
 }
diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css
index c256eb9..661acf9 100644
--- a/frontend/src/app/style.css
+++ b/frontend/src/app/style.css
@@ -1,12 +1,29 @@
 @import "tailwindcss";
 
+@property --angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0deg;
+}
+
 .bg-game-show {
     background: repeating-conic-gradient(
-        from 0deg,
-        var(--color-sky-500) 0deg 30deg,
-        var(--color-sky-800) 30deg 60deg,
-        var(--color-sky-500) 60deg 90deg,
-        var(--color-sky-800) 90deg 120deg
+        from var(--angle),
+        var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
+        var(--color-sky-700) calc(var(--angle) + 30deg)
+            calc(var(--angle) + 60deg)
     );
-    height: 100vh;
+}
+
+.bg-game-show.animate {
+    animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite;
+}
+
+@keyframes rotate_bg {
+    from {
+        --angle: 00deg;
+    }
+    to {
+        --angle: 30deg;
+    }
 }
