diff --git a/pages/base.html b/pages/base.html
deleted file mode 100644
index 9aefb50..0000000
--- a/pages/base.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<blockstart>
-
-</blockstart>
diff --git a/pages/game/index.html b/pages/game/index.html
index 23b11a9..a016b80 100644
--- a/pages/game/index.html
+++ b/pages/game/index.html
@@ -2,31 +2,26 @@
   let Games = new PaginateTable("/api/game");
 </script>
 
-<blockstart>
-<block style="--w: 100%; --value: 7">
+<block class="bg-gray-800">
   <h1 id="page-title">Zed's Trash Ass Games</h1>
 
   <p>More fun than a barrel full of monkeys with syphilus.
   </p>
 </block>
 
-<hr/>
-<grid x-data="Games" style="--cols: 2">
+<hr class="h-10"/>
+<grid x-data="Games" class="grid-cols-2">
   <template x-for="item in contents">
-    <shape style="--h: 200px" class="vertical">
-    <a data-testid="game-link" x-text="item.title" x-bind:href="`/game/${item.id}/${item.slug}/`"></a>
-    <p x-text="item.description"></p>
+    <shape class="xs">
+      <a data-testid="game-link" x-text="item.title" x-bind:href="`/game/${item.id}/${item.slug}/`"></a>
+      <p x-text="item.description"></p>
     </shape>
   </template>
 </grid>
 
-<block>
-  <h2>Description</h2>
-</block>
 
-<block style="--value: 2; --text: 9">
+<block class="bg-gray-800">
   <h2>Read The Code</h2>
   <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
   <button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
 </block>
-</blockstart>
diff --git a/pages/index.html b/pages/index.html
index 0e2e032..bd0e4ce 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -1,36 +1,36 @@
-<blockstart>
 <h1>Zed's Game Dev Website</h1>
+<div class="flex flex-col flex-start">
+  <shape class="video">
+    <button><a id="streams" href="/stream/">View Past Streams</a></button>
+    <button><a id="live" href="/live/">Watch Today's Livestream</a></button>
+  </shape>
+</div>
 
-<shape style="--w: 100%; --h: 300px">
-<button><a id="streams" href="/stream/">View Past Streams</a></button>
-<button><a id="live" href="/live/">Watch Today's Livestream</a></button>
-</shape>
-
-<block data-testid="clickblock">
+<block class="bg-gray-800" data-testid="clickblock">
 <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
 </p>
 </block>
 
-<block style="--value: 7; --border: 1px;" class="horizontal">
-<grid style="--cols: 2">
-<shape>Left Image</shape>
-<div>
-  <h3>I stream on Twitch.</h3>
+<block>
+<grid class="grid-cols-2">
+  <shape class="xs">Left Image</shape>
+  <div>
+    <h3>I stream on Twitch.</h3>
 
-  <p>I stream every day at 10AM/10PM EST time.  60% of the time it's a chill laid back stream with only programming and a bit of talking about programming.  30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.</p>
+    <p>I stream every day at 10AM/10PM EST time.  60% of the time it's a chill laid back stream with only programming and a bit of talking about programming.  30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.</p>
 
-  <a href="https://twitch.tv/zedashaw"><button style="--value: 2; --text: 9">Watch me on Twitch</button></a>
-</div>
+    <a href="https://twitch.tv/zedashaw"><button style="--value: 2; --text: 9">Watch me on Twitch</button></a>
+  </div>
 </grid>
 </block>
 
-<block>
+<block class="bg-gray-800">
 <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
 </p>
 </block>
 
-<block style="--value: 7">
-<grid style="--cols: 2">
+<block>
+<grid class="grid-cols-2">
 <div>
 <h2>Zed's Trash Ass Games</h2>
 <p>Are you a fan of retro styled half-assed but fun games?  Me too, so here's my games I've made with that theme.  Think "it's the late 80s and nobody knows how to make a game" when you play these and you'll enjoy every minute of it.</p>
@@ -41,14 +41,14 @@
 </grid>
 </block>
 
-<block>
+<block class="bg-gray-800">
 <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
 </p>
 </block>
 
-<block style="--value: 7">
-<grid style="--cols: 2">
-<shape>Left Image</shape>
+<block>
+<grid class="grid-cols-2">
+<shape class="shape-xs hover:bg-gray-950 bg-gray-400">Left Image</shape>
 <div>
 <h2>Checkout my Git</h2>
 <p>I put al of my code online for people to read and study.  If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.</p>
@@ -58,8 +58,7 @@
 </grid>
 </block>
 
-<block>
+<block class="bg-gray-800">
 <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
 </p>
 </block>
-</blockstart>
diff --git a/pages/layouts/main.html b/pages/layouts/main.html
index 11d6cc4..1fe43b1 100644
--- a/pages/layouts/main.html
+++ b/pages/layouts/main.html
@@ -29,9 +29,7 @@
 
   <footer>
     <div class="flex-1">
-      <shape>
-        <img class="size-12 shrink-0" src="/logo.png" />
-      </shape>
+      <img class="size-12 shrink-0" src="/logo.png" />
       <div>
         <p>Blah blah about me.</p>
       </div>
diff --git a/pages/login/index.html b/pages/login/index.html
index 97931ad..5509c18 100644
--- a/pages/login/index.html
+++ b/pages/login/index.html
@@ -9,8 +9,8 @@
         <input id="password" name="password" placeholder="Password" type="password">
       </middle>
       <bottom>
-        <button type="button">Cancel</button>
-        <button id="login-submit" type="submit">Login</button>
+        <button class="hover:btn-alert" type="button">Cancel</button>
+        <button class="hover:btn-hover" id="login-submit" type="submit">Login</button>
       </bottom>
     </card>
   </form>
diff --git a/pages/register/index.html b/pages/register/index.html
index 7e7a16f..6f4c67b 100644
--- a/pages/register/index.html
+++ b/pages/register/index.html
@@ -11,8 +11,8 @@
         <input id="password" name="password" placeholder="Password" type="password">
       </middle>
       <bottom>
-        <button type="button">Cancel</button>
-        <button id="register-submit" type="submit">Register</button>
+        <button class="hover:btn-alert" type="button">Cancel</button>
+        <button class="hover:btn-hover" id="register-submit" type="submit">Register</button>
       </bottom>
     </card>
   </form>
diff --git a/pages/stream/index.html b/pages/stream/index.html
index 9a6da98..b8fa216 100644
--- a/pages/stream/index.html
+++ b/pages/stream/index.html
@@ -1,16 +1,16 @@
 <script>
   let Streams = new PaginateTable("/api/stream");
 </script>
-<blockstart>
-<block style="--value: 7">
+
+<block>
   <h1 id="page-title">Past Streams</h1>
   <p>This is where you can checkout information we dropped in a past stream. Did I post a link and you need to remember it? Did someone in chat mention something?  Here's where you find it.</p>
 </block>
 
-<block x-data="Streams">
+<block x-data="Streams" class="gap-4">
   <template x-for="item in contents">
-    <stream class="horizontal">
-      <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
+    <stream class="flex p-3 gap-4 bg-gray-800">
+      <shape class="xxs">Stream Thumbnail</shape>
       <info>
         <date x-text="item.date"></date>
         <p x-text="item.description"></p>
@@ -19,4 +19,3 @@
     </stream>
   </template>
 </block>
-</blockstart>
diff --git a/static/input_style.css b/static/input_style.css
index 4e7ffe7..a65bfb2 100644
--- a/static/input_style.css
+++ b/static/input_style.css
@@ -45,7 +45,7 @@ card > middle {
 }
 
 label {
-  @apply font-bold text-950 dark:text-white;
+  @apply font-bold text-gray-950 dark:text-white;
 }
 
 input {
@@ -57,5 +57,90 @@ input::placeholder {
 }
 
 button {
-  @apply rounded-sm shadow-sm bg-gray-100 text-gray-950 p-3;
+  @apply rounded-sm shadow-sm bg-gray-300 text-gray-950 p-3;
+}
+
+@utility btn-hover {
+  @apply bg-gray-900! text-gray-50!;
+}
+
+@utility btn-alert {
+  @apply bg-red-800! text-gray-50!;
+}
+
+@utility btn-warning {
+  @apply bg-yellow-800! text-gray-50!;
+}
+
+shape {
+  @apply bg-gray-300 flex flex-col justify-center items-center aspect-square p-1 text-gray-950;
+}
+
+shape.tiny {
+  @apply min-w-15 w-15 max-w-15 p-0;
+}
+
+shape.xxs {
+  @apply min-w-30 w-30 max-w-30 p-0;
+}
+
+shape.xs {
+  @apply min-w-xs w-xs max-w-xs;
+}
+
+shape.sm {
+  @apply min-w-sm w-sm max-w-sm;
+}
+
+shape.md {
+  @apply min-w-md w-md max-w-md;
+}
+
+shape.lg {
+  @apply min-w-lg w-lg max-w-lg;
+}
+
+shape.xl {
+  @apply min-w-xl w-xl max-w-xl;
+}
+
+shape.video {
+  @apply w-full aspect-video;
+}
+
+
+block {
+  @apply flex flex-col pl-4 pr-4 pb-10 pt-4;
+}
+
+block.horizontal {
+  @apply flex flex-row p-4 gap-4;
+}
+
+stack {
+  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "cover";
+}
+
+stack > * {
+  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+  width: 100%;
+  height: 100%;
+  position: relative;
+  grid-area: cover;
+}
+
+stack > .top {
+  z-index: 10;
+}
+
+grid {
+  @apply grid gap-2 p-4;
+}
+
+hr {
+  visibility: hidden;
 }
diff --git a/static/style.css b/static/style.css
index 1bcdbc3..809eef4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -7,6 +7,7 @@
     'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
+    --color-red-800: oklch(44.4% 0.177 26.899);
     --color-yellow-900: oklch(42.1% 0.095 57.708);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -14,13 +15,18 @@
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-gray-950: oklch(13% 0.028 261.692);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -226,6 +232,9 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -244,6 +253,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -253,12 +265,33 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+  .bg-gray-950 {
+    background-color: var(--color-gray-950);
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -269,21 +302,91 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
   .text-gray-950 {
     color: var(--color-gray-950);
   }
-  .underline {
-    text-decoration-line: underline;
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .\*\:border-2 {
+    :is(& > *) {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\*\:border-x {
+    :is(& > *) {
+      border-inline-style: var(--tw-border-style);
+      border-inline-width: 1px;
+    }
+  }
+  .\*\:border-black {
+    :is(& > *) {
+      border-color: var(--color-black);
+    }
+  }
+  .\*\:p-1 {
+    :is(& > *) {
+      padding: calc(var(--spacing) * 1);
+    }
+  }
+  .hover\:btn-alert {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-800) !important;
+        color: var(--color-gray-50) !important;
+      }
+    }
+  }
+  .hover\:btn-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-900) !important;
+        color: var(--color-gray-50) !important;
+      }
+    }
+  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+  .hover\:bg-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-300);
+      }
+    }
+  }
+  .hover\:bg-gray-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-800);
+      }
+    }
+  }
+  .hover\:bg-gray-950 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-950);
+      }
+    }
+  }
+  .hover\:text-gray-950 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-950);
+      }
+    }
+  }
   .dark\:bg-gray-900 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-900);
@@ -380,7 +483,10 @@ card > middle {
 label {
   --tw-font-weight: var(--font-weight-bold);
   font-weight: var(--font-weight-bold);
-  color: var(--color-white);
+  color: var(--color-gray-950);
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-white);
+  }
 }
 input {
   border-radius: var(--radius-sm);
@@ -395,14 +501,110 @@ input {
     color: var(--color-gray-950);
   }
 }
+input::placeholder {
+  color: var(--color-gray-700);
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-gray-700);
+  }
+}
 button {
   border-radius: var(--radius-sm);
-  background-color: var(--color-gray-100);
+  background-color: var(--color-gray-300);
   padding: calc(var(--spacing) * 3);
   color: var(--color-gray-950);
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+shape {
+  display: flex;
+  aspect-ratio: 1 / 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-gray-300);
+  padding: calc(var(--spacing) * 1);
+  color: var(--color-gray-950);
+}
+shape.tiny {
+  width: calc(var(--spacing) * 15);
+  max-width: calc(var(--spacing) * 15);
+  min-width: calc(var(--spacing) * 15);
+  padding: calc(var(--spacing) * 0);
+}
+shape.xxs {
+  width: calc(var(--spacing) * 30);
+  max-width: calc(var(--spacing) * 30);
+  min-width: calc(var(--spacing) * 30);
+  padding: calc(var(--spacing) * 0);
+}
+shape.xs {
+  width: var(--container-xs);
+  max-width: var(--container-xs);
+  min-width: var(--container-xs);
+}
+shape.sm {
+  width: var(--container-sm);
+  max-width: var(--container-sm);
+  min-width: var(--container-sm);
+}
+shape.md {
+  width: var(--container-md);
+  max-width: var(--container-md);
+  min-width: var(--container-md);
+}
+shape.lg {
+  width: var(--container-lg);
+  max-width: var(--container-lg);
+  min-width: var(--container-lg);
+}
+shape.xl {
+  width: var(--container-xl);
+  max-width: var(--container-xl);
+  min-width: var(--container-xl);
+}
+shape.video {
+  aspect-ratio: var(--aspect-video);
+  width: 100%;
+}
+block {
+  display: flex;
+  flex-direction: column;
+  padding-top: calc(var(--spacing) * 4);
+  padding-right: calc(var(--spacing) * 4);
+  padding-bottom: calc(var(--spacing) * 10);
+  padding-left: calc(var(--spacing) * 4);
+}
+block.horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: calc(var(--spacing) * 4);
+  padding: calc(var(--spacing) * 4);
+}
+stack {
+  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-areas: "cover";
+}
+stack > * {
+  color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
+  width: 100%;
+  height: 100%;
+  position: relative;
+  grid-area: cover;
+}
+stack > .top {
+  z-index: 10;
+}
+grid {
+  display: grid;
+  gap: calc(var(--spacing) * 2);
+  padding: calc(var(--spacing) * 4);
+}
+hr {
+  visibility: hidden;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -423,10 +625,6 @@ button {
   syntax: "*";
   inherits: false;
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -492,11 +690,20 @@ button {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -505,7 +712,6 @@ button {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -520,7 +726,9 @@ button {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-border-style: solid;
       --tw-outline-style: solid;
+      --tw-font-weight: initial;
     }
   }
 }
diff --git a/views/admin/table/contents.html b/views/admin/table/contents.html
index ccea31b..f6bc1b4 100644
--- a/views/admin/table/contents.html
+++ b/views/admin/table/contents.html
@@ -2,7 +2,6 @@
   let thePage = new PaginateTable("/api/admin/table/{{ .Table }}");
 </script>
 
-<blockstart>
 <h1><a href="/admin/table/">&laquo;</a> Admin {{ .Table }}</h1>
 
 <block x-data="thePage">
@@ -12,15 +11,16 @@
     <button type="button" @click="page += 1">Next</button>
     <input type="text" x-model.debounce="search_query" name="search" size="40" placeholder="Search" />
   </block>
-  <table>
-    <tr>
+
+  <table class="bg-gray-800 shadow-lg rounded-sm">
+    <tr class="bg-gray-950 *:border-x *:border-black">
       <th>#</th>
       <template x-for="header in headers">
         <th x-text="header"></th>
       </template>
     </tr>
     <template x-for="item in contents" :key="item.id">
-        <tr>
+        <tr class="*:border-2 *:border-black *:p-1 hover:bg-gray-100 hover:text-gray-950">
           <td>
             <a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'">
               #
@@ -33,4 +33,3 @@
     </template>
   </table>
 </block>
-</blockstart>
diff --git a/views/admin/table/index.html b/views/admin/table/index.html
index c2bab02..fa30432 100644
--- a/views/admin/table/index.html
+++ b/views/admin/table/index.html
@@ -2,18 +2,18 @@
   let Data = new PaginateTable("/api/admin/table")
 </script>
 
-<blockstart>
-<h1>Admin Rows</h1>
+<div class="p-4">
+  <h1>Admin Rows</h1>
 
-<block x-data="Data">
-  <ul>
-    <template x-for="item in contents">
-      <li>
-        <a x-bind:href="`/admin/table/${item}`">
-          <span x-text="item"></span>
-        </a>
-      </li>
-    </template>
-  </ul>
-</block>
-</blockstart>
+  <block x-data="Data">
+    <ul>
+      <template x-for="item in contents">
+        <li>
+          <a x-bind:href="`/admin/table/${item}`">
+            <span x-text="item"></span>
+          </a>
+        </li>
+      </template>
+    </ul>
+  </block>
+</div>
diff --git a/views/admin/table/new.html b/views/admin/table/new.html
index 3b445ea..d005f4a 100644
--- a/views/admin/table/new.html
+++ b/views/admin/table/new.html
@@ -2,7 +2,6 @@
   let Data = new GetJson("/api/admin/new/table/{{ .Table }}");
 </script>
 
-<blockstart>
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
 <block x-data="Data">
@@ -18,13 +17,10 @@
       </template>
     </middle>
     <bottom>
-      <button-group>
         <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
-        <button type="submit">Insert</button>
-        <button type="button">Clear</button>
-      </button-group>
+        <button class="hover:btn-alert" type="button">Clear</button>
+        <button class="hover:btn-hover" type="submit">Insert</button>
     </bottom>
     </card>
   </form>
 </block>
-</blockstart>
diff --git a/views/admin/table/view.html b/views/admin/table/view.html
index df2e342..bc3f37c 100644
--- a/views/admin/table/view.html
+++ b/views/admin/table/view.html
@@ -2,7 +2,6 @@
   let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}");
 </script>
 
-<blockstart>
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
 <block x-data="Data">
@@ -18,13 +17,10 @@
       </template>
     </middle>
     <bottom>
-      <button-group>
-        <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
-        <button type="submit">Update</button>
-        <button type="button" @click.prevent="ConfirmDelete('{{ .Table }}', item.id)">Delete</button>
-      </button-group>
+      <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
+      <button class="hover:btn-alert" type="button" @click.prevent="ConfirmDelete('{{ .Table }}', item.id)">Delete</button>
+      <button class="hover:btn-hover" type="submit">Update</button>
     </bottom>
     </card>
   </form>
 </block>
-</blockstart>
diff --git a/views/game.html b/views/game.html
index 8a0dfc7..58264ea 100644
--- a/views/game.html
+++ b/views/game.html
@@ -2,15 +2,15 @@
   let Game = new GetJson("/api/game/1");
 </script>
 
-<shape style="--w: 100%; --h: 300px">Gameplay Demo Video</shape>
+<shape class="video">Gameplay Demo Video</shape>
 
-<block style="--value: 7"
+<block class="bg-gray-800"
        x-data="{item: {}}"
        x-init="item = await Game.item()">
   <h1 x-text="item.title"></h1>
 
   <block class="horizontal">
-    <shape style="--w: 200px; --h: 200px;">Some Image</shape>
+    <shape class="xxs">Some Image</shape>
 
     <p x-text="item.description"></p>
   </block>
@@ -21,7 +21,7 @@
   <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
 </block>
 
-<block style="--value: 7;">
+<block class="bg-gray-800">
   <h2>Current Status</h2>
   <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
 </block>
@@ -31,7 +31,7 @@
   <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
 </block>
 
-<block style="--value: 2; --text: 9">
+<block class="bg-gray-800">
   <h2>Read The Code</h2>
   <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
   <button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
diff --git a/views/layouts/main.html b/views/layouts/main.html
index 8f228eb..1fe43b1 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -23,15 +23,13 @@
     <a id="login" href="/login/">Login</a>
   </header>
 
-  <div class="p-0 min-h-screen">
+  <div class="p-0 min-h-screen dark:bg-gray-900">
     {{embed}}
   </div>
 
   <footer>
     <div class="flex-1">
-      <shape>
-        <img class="size-12 shrink-0" src="/logo.png" />
-      </shape>
+      <img class="size-12 shrink-0" src="/logo.png" />
       <div>
         <p>Blah blah about me.</p>
       </div>
diff --git a/views/partials/footer.html b/views/partials/footer.html
deleted file mode 100644
index 7771c7f..0000000
--- a/views/partials/footer.html
+++ /dev/null
@@ -1 +0,0 @@
-</h2>Footer</h2>
diff --git a/views/partials/header.html b/views/partials/header.html
deleted file mode 100644
index 78e5a6a..0000000
--- a/views/partials/header.html
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Header</h1>
diff --git a/views/stream.html b/views/stream.html
index 069cb1b..51c4593 100644
--- a/views/stream.html
+++ b/views/stream.html
@@ -12,11 +12,7 @@
     </div>
   </block>
 
-  <block>
-    <p>Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror.</p>
-  </block>
-
-  <block>
+  <block class="bg-gray-800">
     <h2>Links Posted</h2>
 
     <ul x-data="Links">
@@ -26,9 +22,9 @@
     </ul>
   </block>
 
-  <block style="--value: 7; --border: 1px;" class="horizontal">
-  <grid style="--cols: 2">
-  <shape>Left Image</shape>
+  <block class="horizontal">
+  <grid class="grid-cols-2">
+  <shape class="xs">Left Image</shape>
   <div>
     <h3>I stream on Twitch.</h3>