diff --git a/bun.lock b/bun.lock
index 119e83c..d7feb7a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -239,7 +239,7 @@
 
     "@sindresorhus/is": ["@sindresorhus/is@7.1.0", "", {}, "sha512-7F/yz2IphV39hiS2zB4QYVkivrptHHh0K8qJJd9HhuWSdvf8AN7NpebW3CcDZDBQsUPMoDKWsY2WWgW7bqOcfA=="],
 
-    "@speed-highlight/core": ["@speed-highlight/core@1.2.7", "", {}, "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g=="],
+    "@speed-highlight/core": ["@speed-highlight/core@1.2.8", "", {}, "sha512-IGytNtnUnPIobIbOq5Y6LIlqiHNX+vnToQIS7lj6L5819C+rA8TXRDkkG8vePsiBOGcoW9R6i+dp2YBUKdB09Q=="],
 
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
 
diff --git a/src/lib/icons/bars_3.svg b/src/lib/icons/bars_3.svg
new file mode 100644
index 0000000..351f39f
--- /dev/null
+++ b/src/lib/icons/bars_3.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+</svg>
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index ae11fd3..9041ea1 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -4,3 +4,6 @@ export { default as Play } from "./Play.svg";
 export { default as Pause } from "./Pause.svg";
 export { default as CodeBracket } from "./CodeBracket.svg";
 export { default as utcode } from "./utcode.svg";
+export { default as bars_3 } from "./bars_3.svg";
+export { default as language } from "./language.svg";
+export { default as reset } from "./reset.svg";
diff --git a/src/lib/icons/language.svg b/src/lib/icons/language.svg
new file mode 100644
index 0000000..e7b60c6
--- /dev/null
+++ b/src/lib/icons/language.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
+</svg>
diff --git a/src/lib/icons/reset.svg b/src/lib/icons/reset.svg
new file mode 100644
index 0000000..12a2dc4
--- /dev/null
+++ b/src/lib/icons/reset.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgba(200, 25, 25, 1)" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 856f2b6..0000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/life-game/life-game.js b/src/life-game/life-game.js
index ecab855..6751695 100644
--- a/src/life-game/life-game.js
+++ b/src/life-game/life-game.js
@@ -45,7 +45,6 @@ const generation = document.getElementById("generation"); //世代を表す文
 const randomButton = document.getElementById("randombutton");
 const resetButton = document.getElementById("resetbutton");
 const sizeChangeButton = document.getElementById("sizeChangeButton");
-const patternButtonContainer = document.getElementById("pattern-button-container");
 //サイズ入力欄
 const sizeInput = document.getElementById("sizeInput");
 const sizeLabel = document.getElementById("sizeLabel");
@@ -59,16 +58,19 @@ sizeLabel.textContent = `(${boardSizeMin}〜${boardSizeMax})`;
 //Boardの初期化
 let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
 const table = document.getElementById("game-board");
+table.style.borderCollapse = "collapse";
 function renderBoard() {
   //盤面をBoardに従って変更する関数(Boardを変更したら必ず実行する)
   table.innerHTML = "";
   for (let i = 0; i < boardSize; i++) {
     const tr = document.createElement("tr");
+    tr.style.padding = "0";
     for (let j = 0; j < boardSize; j++) {
       const td = document.createElement("td");
+      td.style.padding = "0";
       const button = document.createElement("button");
       button.style.backgroundColor = board[i][j] ? "black" : "white"; //Boardの対応する値によって色を変更
-      button.style.border = "1px solid black";
+      button.style.border = "0.5px solid black";
       button.style.width = `${cellSize}px`;
       button.style.height = `${cellSize}px`;
       button.style.padding = "0"; //cellSizeが小さいとき、セルが横長になることを防ぐ
@@ -180,482 +182,6 @@ on.resize = (newBoardSize) => {
   boardSize = newBoardSize;
 };
 
-//以下パターンデータ
-//(注)minBoardSizeは、パターンが余裕をもって変形できるために必要なボードのサイズを表し、パターン自体より大きい。
-
-const patterns = {
-  //振動子, Oscillators
-  pulsar: {
-    //周期３
-    names: {
-      en: "Pulsar",
-      ja: "パルサー",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
-      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
-      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
-    ],
-  },
-  pentadecathlon: {
-    //周期１５
-    names: {
-      en: "Pentadecathlon",
-      ja: "ペンタデカスロン",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
-      [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
-      [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
-    ],
-  },
-  galaxy: {
-    //周期８
-    names: {
-      en: "Galaxy",
-      ja: "銀河",
-    },
-    minBoardSize: 20,
-    shape: [
-      [1, 1, 1, 1, 1, 1, 0, 1, 1],
-      [1, 1, 1, 1, 1, 1, 0, 1, 1],
-      [0, 0, 0, 0, 0, 0, 0, 1, 1],
-      [1, 1, 0, 0, 0, 0, 0, 1, 1],
-      [1, 1, 0, 0, 0, 0, 0, 1, 1],
-      [1, 1, 0, 0, 0, 0, 0, 1, 1],
-      [1, 1, 0, 0, 0, 0, 0, 0, 0],
-      [1, 1, 0, 1, 1, 1, 1, 1, 1],
-      [1, 1, 0, 1, 1, 1, 1, 1, 1],
-    ],
-  },
-  octagon: {
-    //周期５
-    names: {
-      en: "Octagon",
-      ja: "八角形",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 0, 1, 1, 0, 0, 0],
-      [0, 0, 1, 0, 0, 1, 0, 0],
-      [0, 1, 0, 0, 0, 0, 1, 0],
-      [1, 0, 0, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 0, 0, 1],
-      [0, 1, 0, 0, 0, 0, 1, 0],
-      [0, 0, 1, 0, 0, 1, 0, 0],
-      [0, 0, 0, 1, 1, 0, 0, 0],
-    ],
-  },
-  figureEight: {
-    //周期８
-    names: {
-      en: "Figure eight",
-      ja: "８の字",
-    },
-    minBoardSize: 20,
-    shape: [
-      [1, 1, 1, 0, 0, 0],
-      [1, 1, 1, 0, 0, 0],
-      [1, 1, 1, 0, 0, 0],
-      [0, 0, 0, 1, 1, 1],
-      [0, 0, 0, 1, 1, 1],
-      [0, 0, 0, 1, 1, 1],
-    ],
-  },
-  tumbler: {
-    //周期１４
-    names: {
-      en: "Tumbler",
-      ja: "タンブラー",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 1, 1, 0, 1, 1, 0],
-      [0, 1, 1, 0, 1, 1, 0],
-      [0, 0, 1, 0, 1, 0, 0],
-      [1, 0, 1, 0, 1, 0, 1],
-      [1, 0, 1, 0, 1, 0, 1],
-      [1, 1, 0, 0, 0, 1, 1],
-    ],
-  },
-  barberPole: {
-    //周期２
-    names: {
-      en: "Barber's pole",
-      ja: "床屋の看板",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    ],
-  },
-  clock: {
-    //周期４
-    names: {
-      en: "Clock",
-      ja: "時計",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
-      [0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1],
-      [0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1],
-      [1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0],
-      [1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0],
-      [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
-    ],
-  },
-
-  //移動物体, Spaceships
-  glider: {
-    names: {
-      en: "Glider",
-      ja: "グライダー",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 1, 0],
-      [0, 0, 1],
-      [1, 1, 1],
-    ],
-  },
-  lightweightSpaceship: {
-    names: {
-      en: "Lightweight Spaceship",
-      ja: "軽量級宇宙船",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 1, 0, 0, 1],
-      [1, 0, 0, 0, 0],
-      [1, 0, 0, 0, 1],
-      [1, 1, 1, 1, 0],
-    ],
-  },
-  middleweightSpaceship: {
-    names: {
-      en: "Middleweight Spaceship",
-      ja: "中量級宇宙船",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 0, 1, 0, 0],
-      [0, 1, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 0],
-      [1, 0, 0, 0, 0, 1],
-      [1, 1, 1, 1, 1, 0],
-    ],
-  },
-  heavyweightSpaceship: {
-    names: {
-      en: "Heavyweight Spaceship",
-      ja: "重量級宇宙船",
-    },
-    minBoardSize: 20,
-    shape: [
-      [0, 0, 0, 1, 1, 0, 0],
-      [0, 1, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 0, 0],
-      [1, 0, 0, 0, 0, 0, 1],
-      [1, 1, 1, 1, 1, 1, 0],
-    ],
-  },
-  shuttle: {
-    names: {
-      en: "Shuttle",
-      ja: "シャトル",
-    },
-    minBoardSize: 30,
-    shape: [
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
-      [1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
-      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    ],
-  },
-  Pufferfish: {
-    names: {
-      en: "Pufferfish",
-      ja: "パファーフィッシュ",
-    },
-    minBoardSize: 40,
-    shape: [
-      [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
-      [0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
-      [0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0],
-      [0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
-      [0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
-      [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
-      [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1],
-      [0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0],
-      [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
-    ],
-  },
-
-  //繁殖型, Breeders
-  gosperGliderGun: {
-    names: {
-      en: "Gosper Glider Gun",
-      ja: "グライダー銃",
-    },
-    minBoardSize: 40,
-    shape: [
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 1, 1,
-      ],
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 1, 1,
-      ],
-      [
-        1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-      [
-        1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-      [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0,
-      ],
-    ],
-  },
-  Max: {
-    names: {
-      en: "Max",
-      ja: "マックス",
-    },
-    minBoardSize: 60,
-    shape: [
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0],
-      [1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0],
-      [1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
-      [1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
-      [0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1],
-      [1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
-      [1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0],
-      [1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
-      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1],
-      [0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
-      [0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    ],
-  },
-
-  //長寿型, Methuselah
-  Thunderbird: {
-    //寿命２４３
-    names: {
-      en: "Thunderbird",
-      ja: "サンダーバード",
-    },
-    minBoardSize: 60,
-    shape: [
-      [1, 1, 1],
-      [0, 0, 0],
-      [0, 1, 0],
-      [0, 1, 0],
-      [0, 1, 0],
-    ],
-  },
-  //寿命１２８
-  Herschel: {
-    names: {
-      en: "Herschel",
-      ja: "ハーシェル",
-    },
-    minBoardSize: 60,
-    shape: [
-      [1, 0, 0],
-      [1, 1, 1],
-      [1, 0, 1],
-      [0, 0, 1],
-    ],
-  },
-  //寿命１４８
-  BHeptomino: {
-    names: {
-      en: "B-Heptomino",
-      ja: "Bヘプトミノ",
-    },
-    minBoardSize: 60,
-    shape: [
-      [1, 0, 1, 1],
-      [1, 1, 1, 0],
-      [0, 1, 0, 0],
-    ],
-  },
-  //寿命１３０
-  DieHard: {
-    names: {
-      en: "Die Hard",
-      ja: "ダイハード",
-    },
-    minBoardSize: 60,
-    shape: [
-      [0, 0, 0, 0, 0, 0, 1, 0],
-      [1, 1, 0, 0, 0, 0, 0, 0],
-      [0, 1, 0, 0, 0, 1, 1, 1],
-    ],
-  },
-  /*↓minBoardSizeが大きすぎるので保留
-  //寿命１１０３
-  RPentomino: {
-    names: {
-      en: "R-Pentomino",
-      ja: "Rペントミノ"
-    },
-    minBoardSize: 150,
-    shape: [
-      [0, 1, 1],
-      [1, 1, 0],
-      [0, 1, 0]
-    ]
-  },
-  Acorn: {
-    //寿命５２０６
-    names: {
-      en: "Acorn",
-      ja: "どんぐり"
-    },
-    minBoardSize: 300,
-    shape: [
-      [0, 1, 0, 0, 0, 0, 0],
-      [0, 0, 0, 1, 0, 0, 0],
-      [1, 1, 0, 0, 1, 1, 1]
-    ]
-  }
-  */
-};
-
-function placePattern(patternKey) {
-  const newBoard = Array.from({ length: boardSize }, () =>
-    Array.from({ length: boardSize }, () => false),
-  );
-  const patternData = patterns[patternKey];
-  const patternShape = patternData.shape;
-  const patternHeight = patternShape.length;
-  const patternWidth = patternShape[0].length;
-  //↓パターンがボードの中央に来るよう、パターンの右上のセルの位置(startrow,startCol)を調整
-  const startRow = Math.floor((boardSize - patternHeight) / 2);
-  const startCol = Math.floor((boardSize - patternWidth) / 2);
-  for (let r = 0; r < patternHeight; r++) {
-    for (let c = 0; c < patternWidth; c++) {
-      const boardRow = startRow + r;
-      const boardCol = startCol + c;
-      newBoard[boardRow][boardCol] = patternShape[r][c] === 1;
-    }
-  }
-  board = newBoard;
-  renderBoard();
-  generationChange(0);
-  stop();
-}
-
-function createPatternButtons() {
-  patternButtonContainer.innerHTML = "";
-  for (const patternKey in patterns) {
-    const patternData = patterns[patternKey];
-    const button = document.createElement("button");
-    button.textContent = patternData.names["ja"];
-    button.dataset.patternKey = patternKey; // data-pattern-key属性にキーを保存
-    button.onclick = () => {
-      placePattern(patternKey);
-    };
-    patternButtonContainer.appendChild(button);
-  }
-}
-createPatternButtons();
-
-function updatePatternButtons() {
-  const buttons = patternButtonContainer.getElementsByTagName("button");
-  //↓ボードに収まるパターンのみクリック可能にする
-  for (const button of buttons) {
-    const patternKey = button.dataset.patternKey; // data-pattern-key 属性からキーを取得
-    const patternData = patterns[patternKey];
-    const requiredSize = patternData.minBoardSize || 0;
-    if (boardSize < requiredSize) {
-      button.disabled = true;
-      button.title = `このパターンには ${requiredSize}x${requiredSize} 以上の盤面が必要です`;
-    } else {
-      button.disabled = false;
-      button.title = "";
-    }
-  }
-}
-updatePatternButtons();
-
 sizeChangeButton.onclick = () => {
   const newSize = parseInt(sizeInput.value, 10);
   if (isNaN(newSize) || newSize < boardSizeMin || boardSizeMax < newSize) {
diff --git a/src/life-game/life-game_template.js b/src/life-game/life-game_template.js
new file mode 100644
index 0000000..9bb858f
--- /dev/null
+++ b/src/life-game/life-game_template.js
@@ -0,0 +1,439 @@
+import * as patternImages from "./patterns_img";
+
+const patterns = {
+  //振動子, Oscillators
+  pulsar: {
+    //周期３
+    names: {
+      en: "Pulsar",
+      ja: "パルサー",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
+      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
+      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0],
+    ],
+    image: patternImages.pulsar,
+  },
+  pentadecathlon: {
+    //周期１５
+    names: {
+      en: "Pentadecathlon",
+      ja: "ペンタデカスロン",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
+      [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
+      [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
+    ],
+    image: patternImages.pentadecathlon,
+  },
+  galaxy: {
+    //周期８
+    names: {
+      en: "Galaxy",
+      ja: "銀河",
+    },
+    minBoardSize: 20,
+    shape: [
+      [1, 1, 1, 1, 1, 1, 0, 1, 1],
+      [1, 1, 1, 1, 1, 1, 0, 1, 1],
+      [0, 0, 0, 0, 0, 0, 0, 1, 1],
+      [1, 1, 0, 0, 0, 0, 0, 1, 1],
+      [1, 1, 0, 0, 0, 0, 0, 1, 1],
+      [1, 1, 0, 0, 0, 0, 0, 1, 1],
+      [1, 1, 0, 0, 0, 0, 0, 0, 0],
+      [1, 1, 0, 1, 1, 1, 1, 1, 1],
+      [1, 1, 0, 1, 1, 1, 1, 1, 1],
+    ],
+    image: patternImages.galaxy,
+  },
+  octagon: {
+    //周期５
+    names: {
+      en: "Octagon",
+      ja: "八角形",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 0, 1, 1, 0, 0, 0],
+      [0, 0, 1, 0, 0, 1, 0, 0],
+      [0, 1, 0, 0, 0, 0, 1, 0],
+      [1, 0, 0, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 0, 0, 1],
+      [0, 1, 0, 0, 0, 0, 1, 0],
+      [0, 0, 1, 0, 0, 1, 0, 0],
+      [0, 0, 0, 1, 1, 0, 0, 0],
+    ],
+    image: patternImages.octagon,
+  },
+  figureEight: {
+    //周期８
+    names: {
+      en: "Figure eight",
+      ja: "８の字",
+    },
+    minBoardSize: 20,
+    shape: [
+      [1, 1, 1, 0, 0, 0],
+      [1, 1, 1, 0, 0, 0],
+      [1, 1, 1, 0, 0, 0],
+      [0, 0, 0, 1, 1, 1],
+      [0, 0, 0, 1, 1, 1],
+      [0, 0, 0, 1, 1, 1],
+    ],
+    image: patternImages.figureEight,
+  },
+  tumbler: {
+    //周期１４
+    names: {
+      en: "Tumbler",
+      ja: "タンブラー",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 1, 1, 0, 1, 1, 0],
+      [0, 1, 1, 0, 1, 1, 0],
+      [0, 0, 1, 0, 1, 0, 0],
+      [1, 0, 1, 0, 1, 0, 1],
+      [1, 0, 1, 0, 1, 0, 1],
+      [1, 1, 0, 0, 0, 1, 1],
+    ],
+    image: patternImages.tumbler,
+  },
+  barberPole: {
+    //周期２
+    names: {
+      en: "Barber's pole",
+      ja: "床屋の看板",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ],
+    image: patternImages.barberPole,
+  },
+  clock: {
+    //周期４
+    names: {
+      en: "Clock",
+      ja: "時計",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
+      [0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1],
+      [0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1],
+      [1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0],
+      [1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0],
+      [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
+    ],
+    image: patternImages.clock,
+  },
+
+  //移動物体, Spaceships
+  glider: {
+    names: {
+      en: "Glider",
+      ja: "グライダー",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 1, 0],
+      [0, 0, 1],
+      [1, 1, 1],
+    ],
+    image: patternImages.glider,
+  },
+  lightweightSpaceship: {
+    names: {
+      en: "Lightweight Spaceship",
+      ja: "軽量級宇宙船",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 1, 0, 0, 1],
+      [1, 0, 0, 0, 0],
+      [1, 0, 0, 0, 1],
+      [1, 1, 1, 1, 0],
+    ],
+    image: patternImages.lightweightSpaceship,
+  },
+  middleweightSpaceship: {
+    names: {
+      en: "Middleweight Spaceship",
+      ja: "中量級宇宙船",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 0, 1, 0, 0],
+      [0, 1, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 0],
+      [1, 0, 0, 0, 0, 1],
+      [1, 1, 1, 1, 1, 0],
+    ],
+    image: patternImages.middleweightSpaceship,
+  },
+  heavyweightSpaceship: {
+    names: {
+      en: "Heavyweight Spaceship",
+      ja: "重量級宇宙船",
+    },
+    minBoardSize: 20,
+    shape: [
+      [0, 0, 0, 1, 1, 0, 0],
+      [0, 1, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 0, 0],
+      [1, 0, 0, 0, 0, 0, 1],
+      [1, 1, 1, 1, 1, 1, 0],
+    ],
+    image: patternImages.heavyweightSpaceship,
+  },
+  shuttle: {
+    names: {
+      en: "Shuttle",
+      ja: "シャトル",
+    },
+    minBoardSize: 30,
+    shape: [
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
+      [1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
+      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ],
+    image: patternImages.shuttle,
+  },
+  Pufferfish: {
+    names: {
+      en: "Pufferfish",
+      ja: "パファーフィッシュ",
+    },
+    minBoardSize: 40,
+    shape: [
+      [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
+      [0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
+      [0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0],
+      [0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
+      [0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0],
+      [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1],
+      [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1],
+      [0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0],
+      [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
+    ],
+    image: patternImages.Pufferfish,
+  },
+
+  //繁殖型, Breeders
+  gosperGliderGun: {
+    names: {
+      en: "Gosper Glider Gun",
+      ja: "グライダー銃",
+    },
+    minBoardSize: 40,
+    shape: [
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 1, 1,
+      ],
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 1, 1,
+      ],
+      [
+        1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+      [
+        1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+      [
+        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+      ],
+    ],
+    image: patternImages.gosperGliderGun,
+  },
+  Max: {
+    names: {
+      en: "Max",
+      ja: "マックス",
+    },
+    minBoardSize: 60,
+    shape: [
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0],
+      [1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0],
+      [1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
+      [1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
+      [0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1],
+      [1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
+      [1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0],
+      [1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1],
+      [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1],
+      [0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
+      [0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ],
+    image: patternImages.Max,
+  },
+
+  //長寿型, Methuselah
+  Thunderbird: {
+    //寿命２４３
+    names: {
+      en: "Thunderbird",
+      ja: "サンダーバード",
+    },
+    minBoardSize: 60,
+    shape: [
+      [1, 1, 1],
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+    image: patternImages.Thunderbird,
+  },
+  //寿命１２８
+  Herschel: {
+    names: {
+      en: "Herschel",
+      ja: "ハーシェル",
+    },
+    minBoardSize: 60,
+    shape: [
+      [1, 0, 0],
+      [1, 1, 1],
+      [1, 0, 1],
+      [0, 0, 1],
+    ],
+    image: patternImages.Herschel,
+  },
+  //寿命１４８
+  BHeptomino: {
+    names: {
+      en: "B-Heptomino",
+      ja: "Bヘプトミノ",
+    },
+    minBoardSize: 60,
+    shape: [
+      [1, 0, 1, 1],
+      [1, 1, 1, 0],
+      [0, 1, 0, 0],
+    ],
+    image: patternImages.BHeptomino,
+  },
+  //寿命１３０
+  DieHard: {
+    names: {
+      en: "Die Hard",
+      ja: "ダイハード",
+    },
+    minBoardSize: 60,
+    shape: [
+      [0, 0, 0, 0, 0, 0, 1, 0],
+      [1, 1, 0, 0, 0, 0, 0, 0],
+      [0, 1, 0, 0, 0, 1, 1, 1],
+    ],
+    image: patternImages.DieHard,
+  },
+  /*↓minBoardSizeが大きすぎるので保留
+  //寿命１１０３
+  RPentomino: {
+    names: {
+      en: "R-Pentomino",
+      ja: "Rペントミノ"
+    },
+    minBoardSize: 150,
+    shape: [
+      [0, 1, 1],
+      [1, 1, 0],
+      [0, 1, 0]
+    ]
+  },
+  Acorn: {
+    //寿命５２０６
+    names: {
+      en: "Acorn",
+      ja: "どんぐり"
+    },
+    minBoardSize: 300,
+    shape: [
+      [0, 1, 0, 0, 0, 0, 0],
+      [0, 0, 0, 1, 0, 0, 0],
+      [1, 1, 0, 0, 1, 1, 1]
+    ]
+  }
+  */
+};
+
+export default patterns;
diff --git a/src/life-game/patterns_img/BHeptomino.png b/src/life-game/patterns_img/BHeptomino.png
new file mode 100644
index 0000000..866f875
Binary files /dev/null and b/src/life-game/patterns_img/BHeptomino.png differ
diff --git a/src/life-game/patterns_img/DieHard.png b/src/life-game/patterns_img/DieHard.png
new file mode 100644
index 0000000..e9ceebd
Binary files /dev/null and b/src/life-game/patterns_img/DieHard.png differ
diff --git a/src/life-game/patterns_img/Herschel.png b/src/life-game/patterns_img/Herschel.png
new file mode 100644
index 0000000..da776ad
Binary files /dev/null and b/src/life-game/patterns_img/Herschel.png differ
diff --git a/src/life-game/patterns_img/Max.png b/src/life-game/patterns_img/Max.png
new file mode 100644
index 0000000..42dfe5a
Binary files /dev/null and b/src/life-game/patterns_img/Max.png differ
diff --git a/src/life-game/patterns_img/Pufferfish.png b/src/life-game/patterns_img/Pufferfish.png
new file mode 100644
index 0000000..060a7ea
Binary files /dev/null and b/src/life-game/patterns_img/Pufferfish.png differ
diff --git a/src/life-game/patterns_img/Thunderbird.png b/src/life-game/patterns_img/Thunderbird.png
new file mode 100644
index 0000000..9f86d7f
Binary files /dev/null and b/src/life-game/patterns_img/Thunderbird.png differ
diff --git a/src/life-game/patterns_img/barberPole.png b/src/life-game/patterns_img/barberPole.png
new file mode 100644
index 0000000..6117015
Binary files /dev/null and b/src/life-game/patterns_img/barberPole.png differ
diff --git a/src/life-game/patterns_img/clock.png b/src/life-game/patterns_img/clock.png
new file mode 100644
index 0000000..a6f85d0
Binary files /dev/null and b/src/life-game/patterns_img/clock.png differ
diff --git a/src/life-game/patterns_img/figureEight.png b/src/life-game/patterns_img/figureEight.png
new file mode 100644
index 0000000..f5530b3
Binary files /dev/null and b/src/life-game/patterns_img/figureEight.png differ
diff --git a/src/life-game/patterns_img/galaxy.png b/src/life-game/patterns_img/galaxy.png
new file mode 100644
index 0000000..a9d26e1
Binary files /dev/null and b/src/life-game/patterns_img/galaxy.png differ
diff --git a/src/life-game/patterns_img/glider.png b/src/life-game/patterns_img/glider.png
new file mode 100644
index 0000000..e576be6
Binary files /dev/null and b/src/life-game/patterns_img/glider.png differ
diff --git a/src/life-game/patterns_img/gosperGliderGun.png b/src/life-game/patterns_img/gosperGliderGun.png
new file mode 100644
index 0000000..feb801a
Binary files /dev/null and b/src/life-game/patterns_img/gosperGliderGun.png differ
diff --git a/src/life-game/patterns_img/heavyweightSpaceship.png b/src/life-game/patterns_img/heavyweightSpaceship.png
new file mode 100644
index 0000000..b0df52a
Binary files /dev/null and b/src/life-game/patterns_img/heavyweightSpaceship.png differ
diff --git a/src/life-game/patterns_img/index.js b/src/life-game/patterns_img/index.js
new file mode 100644
index 0000000..7ff3939
--- /dev/null
+++ b/src/life-game/patterns_img/index.js
@@ -0,0 +1,20 @@
+export { default as pulsar } from "./pulsar.png";
+export { default as pentadecathlon } from "./pentadecathlon.png";
+export { default as galaxy } from "./galaxy.png";
+export { default as octagon } from "./octagon.png";
+export { default as figureEight } from "./figureEight.png";
+export { default as tumbler } from "./tumbler.png";
+export { default as barberPole } from "./barberPole.png";
+export { default as clock } from "./clock.png";
+export { default as glider } from "./glider.png";
+export { default as lightweightSpaceship } from "./lightweightSpaceship.png";
+export { default as middleweightSpaceship } from "./middleweightSpaceship.png";
+export { default as heavyweightSpaceship } from "./heavyweightSpaceship.png";
+export { default as shuttle } from "./shuttle.png";
+export { default as Pufferfish } from "./Pufferfish.png";
+export { default as gosperGliderGun } from "./gosperGliderGun.png";
+export { default as Max } from "./Max.png";
+export { default as Thunderbird } from "./Thunderbird.png";
+export { default as Herschel } from "./Herschel.png";
+export { default as BHeptomino } from "./BHeptomino.png";
+export { default as DieHard } from "./DieHard.png";
diff --git a/src/life-game/patterns_img/lightweightSpaceship.png b/src/life-game/patterns_img/lightweightSpaceship.png
new file mode 100644
index 0000000..f0e9c2e
Binary files /dev/null and b/src/life-game/patterns_img/lightweightSpaceship.png differ
diff --git a/src/life-game/patterns_img/middleweightSpaceship.png b/src/life-game/patterns_img/middleweightSpaceship.png
new file mode 100644
index 0000000..c44c810
Binary files /dev/null and b/src/life-game/patterns_img/middleweightSpaceship.png differ
diff --git a/src/life-game/patterns_img/octagon.png b/src/life-game/patterns_img/octagon.png
new file mode 100644
index 0000000..323723f
Binary files /dev/null and b/src/life-game/patterns_img/octagon.png differ
diff --git a/src/life-game/patterns_img/pentadecathlon.png b/src/life-game/patterns_img/pentadecathlon.png
new file mode 100644
index 0000000..fa9485e
Binary files /dev/null and b/src/life-game/patterns_img/pentadecathlon.png differ
diff --git a/src/life-game/patterns_img/pulsar.png b/src/life-game/patterns_img/pulsar.png
new file mode 100644
index 0000000..95085fa
Binary files /dev/null and b/src/life-game/patterns_img/pulsar.png differ
diff --git a/src/life-game/patterns_img/shuttle.png b/src/life-game/patterns_img/shuttle.png
new file mode 100644
index 0000000..765a72c
Binary files /dev/null and b/src/life-game/patterns_img/shuttle.png differ
diff --git a/src/life-game/patterns_img/tumbler.png b/src/life-game/patterns_img/tumbler.png
new file mode 100644
index 0000000..c987c88
Binary files /dev/null and b/src/life-game/patterns_img/tumbler.png differ
diff --git a/src/life-game/place_template.js b/src/life-game/place_template.js
new file mode 100644
index 0000000..a4f016f
--- /dev/null
+++ b/src/life-game/place_template.js
@@ -0,0 +1,37 @@
+window.addEventListener("message", (event) => {
+  if (event.data.type === "setPattern") {
+    const newBoard = Array.from({ length: boardSize }, () =>
+      Array.from({ length: boardSize }, () => false),
+    );
+    const patternData = event.data.pattern;
+
+    if (boardSize < (patternData.minBoardSize || 0)) {
+      window.parent.postMessage(
+        {
+          type: "patternError",
+          message: `このパターンには ${patternData.minBoardSize}x${patternData.minBoardSize} 以上の盤面が必要です`,
+        },
+        "*",
+      );
+      return;
+    } else {
+      const patternShape = patternData.shape;
+      const patternHeight = patternShape.length;
+      const patternWidth = patternShape[0].length;
+      //↓パターンがボードの中央に来るよう、パターンの右上のセルの位置(startrow,startCol)を調整
+      const startRow = Math.floor((boardSize - patternHeight) / 2);
+      const startCol = Math.floor((boardSize - patternWidth) / 2);
+      for (let r = 0; r < patternHeight; r++) {
+        for (let c = 0; c < patternWidth; c++) {
+          const boardRow = startRow + r;
+          const boardCol = startCol + c;
+          newBoard[boardRow][boardCol] = patternShape[r][c] === 1;
+        }
+      }
+      board = newBoard;
+      renderBoard();
+      generationChange(0);
+      stop();
+    }
+  }
+});
diff --git a/src/life-game/play-pause.js b/src/life-game/play-pause.js
deleted file mode 100644
index e592e9d..0000000
--- a/src/life-game/play-pause.js
+++ /dev/null
@@ -1,11 +0,0 @@
-let timerId = 0;
-
-window.addEventListener("message", (event) => {
-  if (event.data.type === "play") {
-    timer = "start";
-    timerId = setInterval(progressBoard, 1000);
-  } else if (event.data.type === "pause") {
-    timer = "stop";
-    clearInterval(timerId);
-  }
-});
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ee92c09..ab74c26 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,10 @@
   import * as icons from "$lib/icons/index.ts";
   import lghtml from "../life-game/life-game.html?raw";
   import lgjs from "../life-game/life-game.js?raw";
+  import placetemplate from "../life-game/place_template.js?raw";
+  // @ts-expect-error -- for jsfile import
+  import patterns from "../life-game/life-game_template.js";
+  import { onMount } from "svelte";
   import event from "../life-game/event.js?raw";
 
   let code = $state(lgjs);
@@ -12,6 +16,7 @@
       `<script>
       \n${event}\n
       \n${lgjs}\n
+      \n${placetemplate}\n
       <\/script>`,
     ),
   );
@@ -19,6 +24,17 @@
   let showEditor = $state(true);
   let preview_iframe: HTMLIFrameElement | undefined = $state();
   let isProgress = $state(false);
+  let drawerOpen = $state(false);
+  let resetModalOpen = $state(false);
+  let bottomDrawerOpen = $state(false);
+
+  onMount(() => {
+    window.addEventListener("message", (event) => {
+      if (event.data.type === "patternError") {
+        alert(event.data.message);
+      }
+    });
+  });
 
   function sendEvent(event: string, message?: unknown) {
     preview_iframe?.contentWindow?.postMessage({ type: event, date: message }, "*");
@@ -26,39 +42,91 @@
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
+  <button
+    class="btn btn-sm btn-ghost btn-circle bg-[#E0E0E0] mx-5 w-8 rounded border-none"
+    onclick={() => {
+      drawerOpen = !drawerOpen;
+    }}
+  >
+    <img src={icons.bars_3} alt="settings" />
+  </button>
+
   <div class="mx-5 avatar w-8 rounded">
     <img src={icons.utcode} alt="ut.code();_Logo" />
   </div>
 
   <div class="font-semibold text-black text-[20px]">Life code</div>
 
-  <div class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-20">
-    <img class="size-6" src={icons.LeftArrow} alt="Left Arrow" />
-  </div>
-
   <button
-    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5"
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] ml-auto"
     onclick={() => {
-      const eventName = isProgress ? "pause" : "play";
-      sendEvent(eventName);
-      isProgress = !isProgress;
+      resetModalOpen = true;
     }}
   >
-    <input type="checkbox" bind:checked={isProgress} />
-    <img class="size-6 swap-on" src={icons.Pause} alt="Pause" />
-    <img class="size-6 swap-off" src={icons.Play} alt="Play" />
+    <img class="size-6" src={icons.reset} alt="Reset" />
   </button>
 
-  <div class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5">
-    <img class="size-6" src={icons.RightArrow} alt="Right Arrow" />
-  </div>
-
-  <label class="swap ml-auto mr-5">
+  <label class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap mx-5">
     <input type="checkbox" bind:checked={showEditor} />
     <div class="text-black">
       <img class="size-6" src={icons.CodeBracket} alt="Code Bracket" />
     </div>
   </label>
+
+  <div class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] mx-5">
+    <img class="size-6" src={icons.language} alt="Language" />
+  </div>
+</div>
+
+<div
+  class="fixed inset-x-0 bottom-0 z-40 transition-transform duration-300 bg-black pb-16"
+  class:translate-y-full={!bottomDrawerOpen}
+  class:translate-y-0={bottomDrawerOpen}
+>
+  <div class="bg-base-200 shadow-lg p-4 h-48 w-full overflow-x-auto">
+    <div class="flex gap-4">
+      {#each Object.keys(patterns) as patternName (patternName)}
+        <div class="text-center flex-shrink-0">
+          <p class="font-bold mb-2">{patterns[patternName].names.ja}</p>
+          <button
+            class="btn overflow-hidden p-0 w-24 h-24"
+            onclick={() => {
+              preview_iframe?.contentWindow?.postMessage(
+                { type: "setPattern", pattern: patterns[patternName] },
+                "*",
+              );
+              bottomDrawerOpen = false;
+            }}
+          >
+            <img
+              src={patterns[patternName].image}
+              alt={patterns[patternName].names.ja}
+              class="w-full h-full object-cover rounded"
+            />
+          </button>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<input type="checkbox" class="modal-toggle" bind:checked={resetModalOpen} />
+<div class="modal" class:modal-open={resetModalOpen}>
+  <div class="modal-box">
+    <h3 class="font-bold text-lg">リセット確認</h3>
+    <p class="py-4">本当にリセットしますか？この操作は取り消せません。</p>
+    <div class="modal-action">
+      <button class="btn" onclick={() => (resetModalOpen = false)}>キャンセル</button>
+      <button
+        class="btn btn-error"
+        onclick={() => {
+          // ここにリセット処理を記述
+          console.log("Reset executed");
+          resetModalOpen = false;
+        }}>リセット</button
+      >
+    </div>
+  </div>
 </div>
 
 <div class="flex h-screen box-border">
@@ -87,3 +155,37 @@
     ></textarea>
   </div>
 </div>
+
+<div class="bg-[#E0E0E0] shadow-sm fixed bottom-0 left-0 right-0 z-50 h-12 p-0">
+  <button
+    class="btn rounded-none h-12 justify-start"
+    onclick={() => (bottomDrawerOpen = !bottomDrawerOpen)}
+  >
+    {bottomDrawerOpen ? "▼" : "▲ テンプレート"}
+  </button>
+
+  <div
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 -ml-15 bottom-1"
+  >
+    <img class="size-6" src={icons.LeftArrow} alt="Left Arrow" />
+  </div>
+
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 bottom-1"
+    onclick={() => {
+      const eventName = isProgress ? "pause" : "play";
+      sendEvent(eventName);
+      isProgress = !isProgress;
+    }}
+  >
+    <input type="checkbox" bind:checked={isProgress} />
+    <img class="size-6 swap-on" src={icons.Pause} alt="Pause" />
+    <img class="size-6 swap-off" src={icons.Play} alt="Play" />
+  </button>
+
+  <div
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 ml-15 bottom-1"
+  >
+    <img class="size-6" src={icons.RightArrow} alt="Right Arrow" />
+  </div>
+</div>