diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 094a64a..e41f38f 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,13 +1,27 @@
+"use client";
 import "./style.css";
+import { useState } from "react";
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [isAnimate, setIsAnimate] = useState(false);
+
+  const toggleAnimation = () => {
+    setIsAnimate(!isAnimate);
+  };
+
   return (
     <html lang="en">
-      <body className="bg-game-show animate h-screen">{children}</body>
+      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
+        {children}
+        <button
+          className={`absolute top-1 left-1  ${isAnimate ? "pause" : "play"}`}
+          onClick={toggleAnimation}
+        ></button>
+      </body>
     </html>
   );
 }
diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css
index 661acf9..11a5325 100644
--- a/frontend/src/app/style.css
+++ b/frontend/src/app/style.css
@@ -27,3 +27,10 @@
         --angle: 30deg;
     }
 }
+
+.play:before {
+    content: "▶️";
+}
+.pause:before {
+    content: "⏸";
+}
