diff --git a/tem/html/pages/game.html b/tem/html/pages/game.html
new file mode 100644
index 0000000..2030d76
--- /dev/null
+++ b/tem/html/pages/game.html
@@ -0,0 +1,66 @@
+{{ template "head.html" .}}
+
+<div id="top_img">
+  <!-- <div
+    style="
+      background-image: url(/public/img/hack.jpg);
+      background-position: bottom;
+      background-size: cover;
+      height: 100vh;
+      position: relative;
+    "
+  ></div> -->
+  <video src='/public/games/{{ .Data.Hash }}.webm' autoplay loop muted
+    style="
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: bottom;
+    "
+  >
+  </video>
+  <div
+    style="
+      position: absolute;
+      top: 66.66%; left: 0; right: 0; bottom: 0;
+      background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
+      mix-blend-mode: color;
+    "
+  ></div>
+</div>
+
+<div
+  style="
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+  "
+>
+  <h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
+    {{ .Title }}
+    <p>
+      {{ .Desc }}
+    </p>
+  </h1>
+  <!-- {{ template "title_desc.html" .}} -->
+  <!-- <img src='https://media.dof.dev/kit/logotype.svg?v22' width='66.6%'>
+  <div
+    style="
+      color: var(--col-01);
+      background-color: #ffffff80;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      padding: 6px 12px;
+      border-radius: 24px;
+      margin-top: -32px;
+    "
+  >degrees of freedom development</div> -->
+</div>
+
+<h2>notes</h2>
+<pre>{{ .Data.Game.Notes }}</pre>
+
+<div style='height: 44px; width: 100%;'></div>
diff --git a/tem/html/pages/move.html b/tem/html/pages/move.html
new file mode 100644
index 0000000..af6b11d
--- /dev/null
+++ b/tem/html/pages/move.html
@@ -0,0 +1,64 @@
+{{ template "head.html" .}}
+
+
+<div id="top_img">
+  <!-- <div
+    style="
+      background-image: url(/public/img/hack.jpg);
+      background-position: bottom;
+      background-size: cover;
+      height: 100vh;
+      position: relative;
+    "
+  ></div> -->
+  <video src='/public/moves/{{ .Data.Hash }}.webm' autoplay loop muted
+    style="
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: bottom;
+    "
+  >
+  </video>
+  <div
+    style="
+      position: absolute;
+      top: 66.66%; left: 0; right: 0; bottom: 0;
+      background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
+      mix-blend-mode: color;
+    "
+  ></div>
+</div>
+
+<div
+  style="
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+  "
+>
+  <h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
+    {{ .Title }}
+    <p>
+      {{ .Desc }}
+    </p>
+  </h1>
+  <!-- {{ template "title_desc.html" .}} -->
+  <!-- <img src='https://media.dof.dev/kit/logotype.svg?v22' width='66.6%'>
+  <div
+    style="
+      color: var(--col-01);
+      background-color: #ffffff80;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      padding: 6px 12px;
+      border-radius: 24px;
+      margin-top: -32px;
+    "
+  >degrees of freedom development</div> -->
+</div>
+
+<div style='height: 44px; width: 100%;'></div>
diff --git a/tem/html/pages/project.html b/tem/html/pages/project.html
new file mode 100644
index 0000000..31550e1
--- /dev/null
+++ b/tem/html/pages/project.html
@@ -0,0 +1,18 @@
+{{ template "head.html" .}}
+
+<div style='height: 44px; width: 100%;'></div>
+
+<div
+  style="
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    justify-content: left;
+    padding-left: 12px;
+  "
+>
+  <h1 style='word-wrap: break-word; hyphens: auto;'>
+    {{ .Title }}
+  </h1>
+  <p>{{ .Desc }}</p>
+</div>
\ No newline at end of file