diff --git a/src/life-game/LifeGameFunctions/PlayAndPause.js b/src/life-game/LifeGameFunctions/PlayAndPause.js
new file mode 100644
index 0000000..d200c54
--- /dev/null
+++ b/src/life-game/LifeGameFunctions/PlayAndPause.js
@@ -0,0 +1,5 @@
+window.addEventListener("message", (event) => {
+  if (event.data.type === "play-pause") {
+    console.log("Play/Pause toggled");
+  }
+});
diff --git a/src/life-game/LifeGameFunctions/index.js b/src/life-game/LifeGameFunctions/index.js
new file mode 100644
index 0000000..99570f5
--- /dev/null
+++ b/src/life-game/LifeGameFunctions/index.js
@@ -0,0 +1 @@
+export { default as PlayAndPause } from "./PlayAndPause.js";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5f89241..8277def 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,23 +1,17 @@
 <script lang="ts">
   import * as icons from "$lib/icons/index.js";
+  import lghtml from "../life-game/life-game.html?raw";
+  import lgjs from "../life-game/life-game.js?raw";
+  import PlayandPause from "../life-game/LifeGameFunctions/PlayAndPause.js?raw";
 
   let code = $state(
-    `<!DOCTYPE html>
-<html>
-<body>
-  <h1>Life Game</h1>
-</body>
-</html>
-<script>
-  console.log('実行されました');
-  
-  window.addEventListener("message", (event) => {
-    if (event.data.type === "play-pause") {
-      console.log("Play/Pause toggled");
-    }
-  });
-<\/script>
-`,
+    lghtml.replace(
+      /<script src="\.\/life-game\.js"><\/script>/,
+      `<script>
+      \n${lgjs}\n
+      \n${PlayandPause}\n
+      <\/script>`,
+    ),
   );
 
   let previewDoc = $derived(code);
