diff --git a/website/public/assets/movie_dither.gif b/website/public/assets/movie_dither.gif
new file mode 100644
index 0000000..427359b
Binary files /dev/null and b/website/public/assets/movie_dither.gif differ
diff --git a/website/public/assets/movie_lang.gif b/website/public/assets/movie_lang.gif
new file mode 100644
index 0000000..55772e9
Binary files /dev/null and b/website/public/assets/movie_lang.gif differ
diff --git a/website/public/assets/movie_playback.gif b/website/public/assets/movie_playback.gif
new file mode 100644
index 0000000..23a99af
Binary files /dev/null and b/website/public/assets/movie_playback.gif differ
diff --git a/website/src/components/Button.astro b/website/src/components/Button.astro
new file mode 100644
index 0000000..4adec40
--- /dev/null
+++ b/website/src/components/Button.astro
@@ -0,0 +1,45 @@
+---
+const { href, type } = Astro.props
+---
+<div class={['Button', type ? `Button--${type}` : ''].filter(Boolean).join(' ')}>
+  <a class="Button__inner" href={ href }>
+    <slot/>
+  </a>
+</div>
+
+<style lang="scss">
+  .Button {
+    margin: 5px;
+    border-radius: 15px;
+    border: 5px solid $color-bg-invert;
+    box-shadow: $shadow;
+  }
+
+  .Button__inner {
+    font-weight: bold;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+    color: $color-text-invert;
+    background: $color-bg-invert;
+    padding: 6px 20px;
+    border: 3px solid #fff;
+    border-right-color: #B3B5C1;
+    border-bottom-color: #B3B5C1;
+    border-radius: 10px;
+    appearance: none;
+  }
+
+  .Button--inverted {
+    border: 5px solid $color-bg;
+
+    .Button__inner {
+      font-weight: normal;
+      color: $color-text;
+      background: $color-bg;
+      border: 3px solid #9090a1;
+      border-right-color: #000;
+      border-bottom-color: #000;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/website/src/components/Hero.astro b/website/src/components/Hero.astro
index 47e1858..1b5a81a 100644
--- a/website/src/components/Hero.astro
+++ b/website/src/components/Hero.astro
@@ -3,6 +3,7 @@ import { Icon } from 'astro-icon';
 
 import Nav from '../components/Nav.astro';
 import Player from '../components/Player.astro';
+import Button from '../components/Button.astro';
 ---
 <header class="Hero">
   <div class="Hero__head">
@@ -18,8 +19,7 @@ import Player from '../components/Player.astro';
         <Player/>
       </div>
       <div class="Hero__sub">
-        <h2 class="Hero__tagline">Coming Soon</h2>
-        <!-- <button class="Hero__downloadButton Button">Download</button> -->
+        <Button class="Hero__downloadButton" href="#download">Download</Button>
       </div>
     </div>
   </div>
@@ -35,17 +35,8 @@ import Player from '../components/Player.astro';
     z-index: 0;
 
     height: 100vh;
-    // clamp height
     min-height: 760px;
     max-height: 1200px;
-
-    background-position: center top;
-    background-repeat: repeat;
-    background-image: url('data:image/svg+xml;charset=utf8,\
-      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\
-        <rect x="0" y="0" width="33" height="33" fill="white" stroke-width="1" stroke-dashoffset="2" stroke-dasharray="4 4" stroke="%23B5C1CE"/>\
-      </svg>\
-    ');
   }
 
   .Hero__head {
@@ -57,6 +48,7 @@ import Player from '../components/Player.astro';
   }
 
   .Hero__wrap {
+    // margin-top: -$navbar-height;
     display: grid;
     align-items: center;
     grid-template-columns: 1fr;
@@ -80,15 +72,18 @@ import Player from '../components/Player.astro';
     @include breakpoint-tablet {
       // grid-column: 1;
       margin: 0 auto;
-      max-width: 512px;
+      max-width: 480px;
+      margin-top: 1.5rem;
     }
   }
 
   .Hero__tagline {
     color: $color-text-alt;
-    font-weight: normal;
-    font-size: 1.2rem;
-    margin-bottom: .5rem;
+    // font-weight: bold;
+    font-weight: 600;
+    font-size: 1.25rem;
+    margin-top: .75rem;
+    margin-bottom: .75rem;
     max-width: 25ch;
   }
 
diff --git a/website/src/components/Nav.astro b/website/src/components/Nav.astro
index 0098d0c..81ff8ab 100644
--- a/website/src/components/Nav.astro
+++ b/website/src/components/Nav.astro
@@ -1,19 +1,33 @@
+---
+import Button from './Button.astro'
+---
 <nav class="NavBar">
   <div class="NavGroup NavGroup--left">
     <div class="NavMenuToggle">menu</div>
     <ul class="NavMenu">
       <li class="NavMenu__item">
-        <a class="NavMenu__link" href="">About</a>
+        <a class="NavMenu__link" href="#features">Features</a>
       </li>
       <li class="NavMenu__item">
-        <a class="NavMenu__link" href="">Help</a>
+        <a class="NavMenu__link" href="#download">Download</a>
       </li>
       <li class="NavMenu__item">
-        <a class="NavMenu__link" href="">Source Code</a>
+        <a class="NavMenu__link" href="#faqs">FAQs</a>
+      </li>
+      <li class="NavMenu__item">
+        <a class="NavMenu__link" href="#credits">Credits</a>
+      </li>
+      <li class="NavMenu__item">
+        <a class="NavMenu__link" href="/filehelp">Help</a>
       </li>
     </ul> 
   </div>
   <div class="NavGroup NavGroup--right">
+    <ul class="NavMenu">
+      <li class="NavMenu__item">
+        <a class="NavMenu__link" href="https://github.com/jaames/playnote-studio">Source Code</a>
+      </li>
+    </ul>
     <!-- <div class="NavItem LangMenu">
       <div class="LangMenu__button">
         <span class="LangMenu__label">English</span> v
@@ -94,7 +108,7 @@
 
   .NavMenu__item {
     margin-left: 16px;
-    font-weight: bold;
+    // font-weight: bold;
 
     @include breakpoint-phone-only {
       height: $navbar-height;
diff --git a/website/src/components/Player.astro b/website/src/components/Player.astro
index 9f84102..d0ae42b 100644
--- a/website/src/components/Player.astro
+++ b/website/src/components/Player.astro
@@ -93,6 +93,7 @@ const pxSize = `${size}px`;
     height: 100%;
     position: absolute;
     z-index: 3;
+    image-rendering: pixelated;
   }
 
   .Demo__video {
diff --git a/website/src/demo/imports/frag.glsl b/website/src/demo/imports/frag.glsl
index ae12717..5654328 100644
--- a/website/src/demo/imports/frag.glsl
+++ b/website/src/demo/imports/frag.glsl
@@ -1,12 +1,51 @@
 varying vec2 v_uv;
 varying vec2 v_px;
-
 uniform sampler2D u_bgTex;
 uniform sampler2D u_frameTex;
 uniform bool u_showFrame;
 uniform float u_fadeLevel;
 uniform vec4 u_fadeColor;
 
+uniform vec2 u_texSize;
+
+// from http://www.java-gaming.org/index.php?topic=35123.0
+vec4 cubic(float v){
+  vec4 n = vec4(1.0, 2.0, 3.0, 4.0) - v;
+  vec4 s = n * n * n;
+  float x = s.x;
+  float y = s.y - 4.0 * s.x;
+  float z = s.z - 4.0 * s.y + 6.0 * s.x;
+  float w = 6.0 - x - y - z;
+  return vec4(x, y, z, w) * (1.0/6.0);
+}
+
+vec4 textureBicubic(sampler2D sampler, vec2 texCoords, vec2 texSize){
+  vec2 invTexSize = 1.0 / texSize;
+  texCoords = texCoords * texSize - 0.5;
+  vec2 fxy = fract(texCoords);
+  texCoords -= fxy;
+
+  vec4 xcubic = cubic(fxy.x);
+  vec4 ycubic = cubic(fxy.y);
+
+  vec4 c = texCoords.xxyy + vec2 (-0.5, +1.5).xyxy;
+
+  vec4 s = vec4(xcubic.xz + xcubic.yw, ycubic.xz + ycubic.yw);
+  vec4 offset = c + vec4 (xcubic.yw, ycubic.yw) / s;
+
+  offset *= invTexSize.xxyy;
+
+  vec4 sample0 = texture2D(sampler, offset.xz);
+  vec4 sample1 = texture2D(sampler, offset.yz);
+  vec4 sample2 = texture2D(sampler, offset.xw);
+  vec4 sample3 = texture2D(sampler, offset.yw);
+
+  float sx = s.x / (s.x + s.y);
+  float sy = s.z / (s.z + s.w);
+
+  return mix(mix(sample3, sample2, sx), mix(sample1, sample0, sx), sy);
+}
+
 // https://github.com/hughsk/glsl-dither/blob/master/8x8.glsl
 float dither8x8(vec2 position, float brightness) {
   int x = int(mod(position.x, 8.0));
@@ -85,7 +124,7 @@ float dither8x8(vec2 position, float brightness) {
 }
 
 void main() {
-  vec4 foreground = texture2D(u_frameTex, v_uv);
+  vec4 foreground = textureBicubic(u_frameTex, v_uv, u_texSize);
   vec4 background = texture2D(u_bgTex, v_uv);
   vec4 frameColor = foreground * foreground.a + background * (1.0 - foreground.a);
   if (!u_showFrame && u_fadeLevel > 0.0) {
diff --git a/website/src/demo/imports/index.ts b/website/src/demo/imports/index.ts
index 9c58e41..5a58fcd 100644
--- a/website/src/demo/imports/index.ts
+++ b/website/src/demo/imports/index.ts
@@ -9,7 +9,8 @@ export {
   Uniform,
   DataTexture,
   TextureLoader,
-  LinearFilter
+  LinearFilter,
+  NearestFilter
 } from 'three';
 export { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 
diff --git a/website/src/demo/imports/vert.glsl b/website/src/demo/imports/vert.glsl
index 84dc406..7d7510f 100644
--- a/website/src/demo/imports/vert.glsl
+++ b/website/src/demo/imports/vert.glsl
@@ -1,11 +1,11 @@
 varying vec2 v_uv; // uv coord
 varying vec2 v_px; // playdate pixel coord
 
-const float PLAYDATE_WIDTH = 400.0 / 2.0;
-const float PLAYDATE_HEIGHT = 240.0 / 2.0;
+uniform vec2 u_texSize;
+uniform vec2 u_screenSize;
 
 void main() {
   v_uv = uv;
-  v_px = vec2(uv.x * PLAYDATE_WIDTH, uv.y * PLAYDATE_HEIGHT);
+  v_px = vec2(uv.x * u_texSize.x, uv.y * u_texSize.y);
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 }
\ No newline at end of file
diff --git a/website/src/demo/player.ts b/website/src/demo/player.ts
index de954a9..17cff2e 100644
--- a/website/src/demo/player.ts
+++ b/website/src/demo/player.ts
@@ -19,6 +19,7 @@ const {
   DataTexture,
   TextureLoader,
   LinearFilter,
+  NearestFilter,
   GLTFLoader,
   // shaders and such
   vertexShader,
@@ -157,6 +158,7 @@ overrideMaterials(gltf.scene, new ShaderMaterial({
     u_fadeLevel: fadeLevel,
     u_bgTex: new Uniform(screenTexture),
     u_frameTex: new Uniform(frameTexture),
+    u_texSize: new Uniform([PLAYDATE_WIDTH, PLAYDATE_HEIGHT]),
   }
 }));
 scene.add(gltf.scene);
diff --git a/website/src/icons/icon_hint.svg b/website/src/icons/icon_hint.svg
new file mode 100644
index 0000000..8767a00
--- /dev/null
+++ b/website/src/icons/icon_hint.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="9" cy="9" r="8" fill="#000"/>
+    <path fill="#FFF" fill-rule="nonzero" d="M9.36789721,11.0717357 L9.36789721,10.9772756 C9.38778021,9.83381079 9.7159049,9.32173742 10.5610745,8.79972087 C11.4509885,8.26278956 11.997863,7.50710846 11.997863,6.38850158 C11.997863,4.77273607 10.7748528,3.67898712 8.95028063,3.67898712 C7.27485609,3.67898712 5.93252783,4.65838959 5.86789721,6.44816061 L7.3792594,6.44816061 C7.43891843,5.39418434 8.18962795,4.93182683 8.95028063,4.93182683 C9.79545028,4.93182683 10.4815292,5.49361607 10.4815292,6.37358682 C10.4815292,7.11435316 10.0191717,7.63636971 9.4275529,8.00426708 C8.50283787,8.5710279 7.9559634,9.13281714 7.94602022,10.9772756 L7.94602022,11.0717357 L9.36789721,11.0717357 Z M8.69672974,14.0944601 C9.23863263,14.0944601 9.69104697,13.651989 9.69104697,13.1001429 C9.69104697,12.55824 9.23863263,12.1107973 8.69672974,12.1107973 C8.14985526,12.1107973 7.7024125,12.55824 7.7024125,13.1001429 C7.7024125,13.651989 8.14985526,14.0944601 8.69672974,14.0944601 Z"/>
+  </g>
+</svg>
diff --git a/website/src/icons/icon_warn.svg b/website/src/icons/icon_warn.svg
new file mode 100644
index 0000000..739d1fa
--- /dev/null
+++ b/website/src/icons/icon_warn.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="9" cy="9" r="8" fill="#000"/>
+    <path fill="#FFF" fill-rule="nonzero" d="M9.68856272,11.0717357 L9.81782396,3.81819153 L8.18217211,3.81819153 L8.31143336,11.0717357 L9.68856272,11.0717357 Z M8.99751225,14.0944601 C9.53941514,14.0944601 9.99182948,13.651989 9.99182948,13.1001429 C9.99182948,12.55824 9.53941514,12.1107973 8.99751225,12.1107973 C8.45063777,12.1107973 8.00319501,12.55824 8.00319501,13.1001429 C8.00319501,13.651989 8.45063777,14.0944601 8.99751225,14.0944601 Z"/>
+  </g>
+</svg>
diff --git a/website/src/icons/panel_head.svg b/website/src/icons/panel_head.svg
new file mode 100644
index 0000000..e13f79c
--- /dev/null
+++ b/website/src/icons/panel_head.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="287" height="53" viewBox="0 0 287 53">
+  <path fill-rule="evenodd" d="M607.99658,1161 L821.00342,1161 C825.327181,1161 829.316626,1163.32604 831.446503,1167.08882 L858,1214 L858,1214 L571,1214 L597.553497,1167.08882 C599.683374,1163.32604 603.672819,1161 607.99658,1161 Z" transform="translate(-571 -1161)"/>
+</svg>
diff --git a/website/src/icons/panel_head_dark.svg b/website/src/icons/panel_head_dark.svg
new file mode 100644
index 0000000..52ae1c4
--- /dev/null
+++ b/website/src/icons/panel_head_dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="287" height="53" viewBox="0 0 287 53">
+  <path fill-rule="evenodd" d="M36.9965796,0 L250.00342,0 C254.327181,-2.03341871e-14 258.316626,2.32603923 260.446503,6.08882136 L287,53 L287,53 L0,53 L26.5534973,6.08882136 C28.683374,2.32603923 32.6728192,7.942619e-16 36.9965796,0 Z"/>
+</svg>
diff --git a/website/src/icons/panel_head_light.svg b/website/src/icons/panel_head_light.svg
new file mode 100644
index 0000000..0454f83
--- /dev/null
+++ b/website/src/icons/panel_head_light.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="287" height="53" viewBox="0 0 287 53">
+  <g fill="none" fill-rule="evenodd" stroke-linejoin="square">
+    <path fill="#FFF" stroke="#000" stroke-width="9" d="M250.00342,4.5 C251.354596,4.5 252.653534,4.86344363 253.781075,5.52085461 C254.908616,6.1782656 255.86476,7.12964394 256.530362,8.30553992 L256.530362,8.30553992 L279.282303,48.5 L307.5,48.5 L307.5,88.5 L-3.5,88.5 L-3.5,48.5 L7.7176969,48.5 L30.4696532,8.30551335 C31.1352397,7.12964394 32.0913837,6.1782656 33.2189249,5.52085461 C34.3464661,4.86344363 35.6454045,4.5 36.9965796,4.5 L36.9965796,4.5 Z"/>
+    <path stroke="#FFF" stroke-width="6" d="M250.00342,3 C251.624831,3 253.183557,3.43613236 254.536606,4.22502554 C255.889655,5.01391872 257.037028,6.15557272 257.835742,7.56663373 L257.835742,7.56663373 L280.156869,47 L309,47 L309,90 L-5,90 L-5,47 L6.84313126,47 L29.1642679,7.56661602 C29.9629717,6.15557272 31.1103445,5.01391872 32.463394,4.22502554 C33.8164434,3.43613236 35.3751695,3 36.9965796,3 L36.9965796,3 Z"/>
+  </g>
+</svg>
diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..2bdf461
--- /dev/null
+++ b/website/src/layouts/BaseLayout.astro
@@ -0,0 +1,60 @@
+---
+import '../styles/global.scss';
+
+let title = 'Playnote Studio';
+let desc = 'An unofficial Flipnote animation player for the Panic Playdate';
+let websiteUrl = 'https://playnote.studio';
+let imageUrl = '';
+let faviconUrl = '';
+let imageWidth = '';
+let imageHeight = '';
+let imageAlt = '';
+let twitterHandle = '@rakujira';
+
+let locale = 'en';
+
+---
+<html lang={ locale }>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>{ title }</title>
+    <meta name="description" content={ desc }/>
+    <!-- facebook opengraph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content={ websiteUrl }>
+    <meta property="og:title" content={ title }>
+    <meta property="og:description" content={ desc }>
+    <meta property="og:image" content={ imageUrl }>
+    <meta property="og:image:width" content={ imageWidth }>
+    <meta property="og:image:height" content={ imageHeight }>
+    <meta property="og:image:alt" content={ imageAlt }>
+    <meta property="og:site_name" content={ title }>
+    <meta property="og:locale" content={ locale }>
+    <!-- {altLocales} -->
+    <!-- twitter card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content={ twitterHandle }>
+    <meta name="twitter:url" content={ websiteUrl }>
+    <meta name="twitter:title" content={ title }>
+    <meta name="twitter:description" content={ desc }>
+    <meta name="twitter:image" content={ imageUrl }>
+    <meta name="twitter:image:width" content={ imageWidth }>
+    <meta name="twitter:image:height" content={ imageHeight }>
+    <meta name="twitter:image:alt" content={ imageAlt }>
+    <!-- misc -->
+    <link rel="shortcut icon" href={ faviconUrl } type="image/png">
+    <meta name="format-detection" content="telephone=no">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800" rel="stylesheet">
+  </head>
+  <body>
+    <main class="Content">
+      <slot/>
+    </main>
+    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "19224d7a1dc44932ab159e5f8466b712"}'></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 99510a5..7b4d761 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,82 +1,573 @@
 ---
-import '../styles/global.scss';
-
+import BaseLayout from '../layouts/BaseLayout.astro';
 import Hero from '../components/Hero.astro';
+import Button from '../components/Button.astro';
+---
+<BaseLayout>
+  <Hero/>
 
-let title = 'Playnote Studio';
-let desc = 'An unofficial Flipnote animation player for the Panic Playdate console!';
-let websiteUrl = '';
-let imageUrl = '';
-let faviconUrl = '';
-let imageWidth = '';
-let imageHeight = '';
-let imageAlt = '';
-let twitterHandle = '@rakujira';
+  <section class="Section FeaturesSection" id="features">
+    <h2 class="Section__title">Features</h2>
+    <div class="Section__body">
+      <div class="FeatureGrid">
+        <div class="FeatureGrid__item">
+          <img class="FeatureGrid__itemImage screenshot" src="/assets/movie_playback.gif" alt="">
+          <p class="FeatureGrid__itemText">
+            Bundled with 24 animations kindly provided by a variety of Flipnote artists
+            <sub>(this one is by <a href="https://twitter.com/Kekeflipnote">Kéké</a>!)</sub>
+          </p>
+        </div>
+        <div class="FeatureGrid__item">
+          <img class="FeatureGrid__itemImage screenshot" src="/assets/movie_dither.gif" alt="">
+          <p class="FeatureGrid__itemText">
+            Customisable dithering makes up for the lack of colour on the Playdate's black-and-white screen!
+          </p>
+        </div>
+        <div class="FeatureGrid__item">
+          <img class="FeatureGrid__itemImage screenshot" src="/assets/movie_lang.gif" alt="">
+          <p class="FeatureGrid__itemText">
+            Available in English, Japanese, French, Spanish, German, Italian, Dutch, Polish, Russian, and Welsh!
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
 
-let locale = 'en';
-// let altLocales = ['en', 'jp'].map((locale) => <meta property="og:locale" content={locale}>);
+  <section class="Section DownloadSection" id="download">
+    <h2 class="Section__title">Download</h2>
+    <div class="Section__body">
+      <div class="DownloadCard">
+        <div class="DownloadCard__head">
+          <div class="DownloadCard__info">
+            <h3 class="DownloadCard__title">playnote.pdx</h3>
+            <div class="DownloadCard__stat">Version 1.0</div>
+            <div class="DownloadCard__stat">17.6 MB</div>
+          </div>
+          <div class="DownloadCard__buttons">
+            <Button type="inverted">Download</Button>
+          </div>
+        </div>
+        <div class="DownloadCard__body">
+          <div class="DownloadCard__desc">Includes a selection of 24 sample Flipnotes from Kéké, mrjohn, ぺきら&nbsp;(Pekira), Bee, Who&nbsp;Cares&nbsp;(bokeh&nbsp;f/2), Akemi, and Scarecrow.</div>
+          <div class="DownloadCard__sideloadNote">(?) This app can be installed by <a href="https://help.play.date/games/sideloading/">sideloading</a> it</div>
+          <div class="DownloadCard__compatNote">(!) Please note that the Playdate Simulator isn't supported</div>
+        </div>
+      </div>
+    </div>
+  </section>
 
----
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <title>{ title }</title>
-  <meta name="description" content={ desc }/>
-  <!-- facebook opengraph -->
-  <meta property="og:type" content="website">
-  <meta property="og:url" content={ websiteUrl }>
-  <meta property="og:title" content={ title }>
-  <meta property="og:description" content={ desc }>
-  <meta property="og:image" content={ imageUrl }>
-  <meta property="og:image:width" content={ imageWidth }>
-  <meta property="og:image:height" content={ imageHeight }>
-  <meta property="og:image:alt" content={ imageAlt }>
-  <meta property="og:site_name" content={ title }>
-  <meta property="og:locale" content={locale}>
-  <!-- {altLocales} -->
-  <!-- twitter card -->
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:site" content={ twitterHandle }>
-  <meta name="twitter:url" content={ websiteUrl }>
-  <meta name="twitter:title" content={ title }>
-  <meta name="twitter:description" content={ desc }>
-  <meta name="twitter:image" content={ imageUrl }>
-  <meta name="twitter:image:width" content={ imageWidth }>
-  <meta name="twitter:image:height" content={ imageHeight }>
-  <meta name="twitter:image:alt" content={ imageAlt }>
-  <!-- misc -->
-  <link rel="shortcut icon" href={ faviconUrl } type="image/png">
-  <meta name="format-detection" content="telephone=no">
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;800" rel="stylesheet">
-</head>
-<body>
-  <main class="Content">
-    <Hero/>
-  </main>
-</body>
-</html>
+  <section class="Section FaqSection" id="faqs">
+    <h2 class="Section__title">FAQs</h2>
+    <div class="Section__body">
+      <div class="FaqList">
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            What is Flipnote Studio? What are Flipnotes?
+          </div>
+          <div class="FaqList__answer">
+            <a href="https://www.nintendo.co.uk/Games/Nintendo-DSiWare/Flipnote-Studio-263126.html">Flipnote&nbsp;Studio</a> is an app for the Nintendo&nbsp;DSi where users can create flipbook-style animations using the console's touch screen, microphone, and cameras. These animations are called <b>Flipnotes</b>.
+          </div>
+        </div>
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            Who built this?
+          </div>
+          <div class="FaqList__answer">
+            That would be me, <a href="https://twitter.com/rakujira">James</a>! But this wouldn't have been remotely possible without a whole *bunch* of favours from very cool friends and members of the Flipnote and Playdate communities, you can find all of their names in the credits towards the end of this page.
+          </div>
+        </div>
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            Why make a Flipnote player for the Playdate?
+          </div>
+          <div class="FaqList__answer">
+            Little else has single-handedly fueled my penchant for making things quite as much as Flipnote&nbsp;Studio. It's left a lasting impact on me and in a roundabout way was influencial in pushing me towards a creative career, so this app is a love-letter to a weird little animation tool and community that inspired me and many others.
+            <br/>
+            <br/>
+            It also just so happens that using the Playdate's crank to scroll through one of <a href="https://twitter.com/Kekeflipnote">Kéké's</a> animations is pretty fun!
+          </div>
+        </div>
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            Can this app create Flipnotes?
+          </div>
+          <div class="FaqList__answer">
+            It can't, sorry! The Playdate doesn't have a touchscreen, so I came to the conclusion that trying to create detailed animations on it would be overly finicky, and I consider it beyond the scope of this project. That doesn't mean I'm not working on something else along those lines for the distant future, although if you want to make art on the Playdate you should keep an eye out for Dustin Mierau's <a href="https://twitter.com/dmierau/status/1372321742828412936">Playmaker</a>!
+          </div>
+        </div>
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            Can I watch Flipnotes without a Playdate or Nintendo&nbsp;DSi?
+          </div>
+          <div class="FaqList__answer">
+            Yes! I previously built a free <a href="https://flipnote.rakujira.jp/">web-based Flipnote player</a> which can play animation files from both the DSiWare version of Flipnote&nbsp;Studio and Flipnote&nbsp;Studio&nbsp;3D.
+          </div>
+        </div>
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            Why aren't Flipnote&nbsp;Studio&nbsp;3D animations supported?
+          </div>
+          <div class="FaqList__answer">
+            Flipnote&nbsp;Studio&nbsp;3D - the Nintendo&nbsp;3DS sequel to Flipnote&nbsp;Studio - uses a much more complex animation format compared to the original DSiWare version. I had to pull out a lot of tricks to get DSi Flipnotes running smoothly on the Playdate, and I have some ideas for getting the 3DS format to that point, but I'm saving that challenge for another day.
+          </div>
+        </div>
+        <div class="FaqList__item">
+          <div class="FaqList__question">
+            Will there be any updates?
+          </div>
+          <div class="FaqList__answer">
+            I would like to keep adding new features as the Playdate develops, so you should follow me on <a href="https://twitter.com/rakujira">Twitter</a> to keep up to (play)date!
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="Section CreditsSection" id="credits">
+    <h2 class="Section__title">Credits</h2>
+    <div class="Section__body Credits">
+      <div class="Credits__main">
+        <div class="CreditGroup">
+          <h5 class="CreditGroup__title">Programming and UI Design</h5>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/rakujira">James Daniel</a>
+          </div>
+        </div>
+        <div class="CreditGroup">
+          <h5 class="CreditGroup__title">Flipnote Decoding Library</h5>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/itssimontime">Simon Aarons</a>
+          </div>
+        </div>
+        <div class="CreditGroup">
+          <h5 class="CreditGroup__title">Sound & Music</h5>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Sound Design</span>
+            <a class="CreditEntry__name" href="https://NewtonsDarkRoom.com">Talon Stradley</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Credits Beat</span>
+            <a class="CreditEntry__name" href="https://madwurmz.com">madwurmz</a>
+          </div>
+        </div>
+        <div class="CreditGroup  CreditGroup--breakColumn">
+          <h5 class="CreditGroup__title">Flipnote Artists</h5>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/Kekeflipnote">Kéké</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://flipnot.es/9F990EE00074AC4D">mrjohn</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://www.instagram.com/gsupnet_">bokeh f/2 (who cares)</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/pekira1227">ぺきら (pekira)</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://beeyt.carrd.co/">Bee</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://www.instagram.com/akemixes">Melaina King (Akemi)</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://www.sudomemo.net/user/5907142059918D1F@DSi">Scarecrow</a>
+          </div>
+        </div>
+        <div class="CreditGroup">
+          <h5 class="CreditGroup__title">Translation</h5>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">日本語</span>
+            <a class="CreditEntry__name" href="http://ryusite.cyber-ninja.jp/">RYU-N</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Français</span>
+            <a class="CreditEntry__name" href="https://www.evalauren.co.uk">Eva Lauren Kelly (thejsa)</a>
+            <a class="CreditEntry__name" href="https://twitter.com/thomasnet_mc_">thomasnet</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Español</span>
+            <a class="CreditEntry__name" href="https://github.com/meemo">Meemo</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Deutsch</span>
+            <a class="CreditEntry__name" href="https://twitter.com/zothynine">Mario Zoth</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Italiano</span>
+            <a class="CreditEntry__name" href="https://www.finecurry.newgrounds.com">Curren French</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Nederlands</span>
+            <a class="CreditEntry__name" href="https://twitter.com/therealprocyon">Célistine Oosting</a>
+            <a class="CreditEntry__name" href="https://kaasiand.cool">Daniël van Melle</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Polski</span>
+            <a class="CreditEntry__name" href="https://twitter.com/twarda8">Twarda</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Русский</span>
+            <a class="CreditEntry__name" href="https://youtube.com/channel/UCbyMzNGlTGHxLRlShJDoD3Q">Denis Chernesov (Kashey)</a>
+            <a class="CreditEntry__name" href="https://youtube.com/channel/UCbyMzNGlTGHxLRlShJDoD3Q">Alina Smirnova (\m/eerkat)</a>
+          </div>
+          <div class="CreditEntry">
+            <span class="CreditEntry__title">Cymraeg</span>
+            <a class="CreditEntry__name" href="https://www.evalauren.co.uk">Eva Lauren Kelly (thejsa)</a>
+          </div>
+        </div>
+        <div class="CreditGroup">
+          <h5 class="CreditGroup__title">Special Thanks</h5>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/gingerbeardman">Matt Sephton</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/kaeru.world">Kaeru Team</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://www.sudomemo.net">Rob</a>
+          </div>
+          <div class="CreditEntry">
+            <a class="CreditEntry__name" href="https://twitter.com/AustinSudomemo">Austin Burk</a>
+          </div>
+        </div>
+      </div>
+      <div class="Credits__foot">
+        <p>Flipnote&nbsp;Studio is &copy; Nintendo. This project isn't affiliated with or endorsed by them.</p>
+        <p>Playdate is a registered trademark of Panic.</p>
+      </div>
+    </div>
+  </section>
+</BaseLayout>
 
 <style lang="scss">
-  .Downloads {
+
+  .Section {
     @include wrapper;
+    margin-top: 5rem;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .Section__title {
+    text-align: center;
+    font-size: 1.25rem;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+ 
+  .FeaturesSection {
+    margin-top: -60px;
+    max-width: 1304px;
+    
+    .Section__title {
+      color: white;
+      background: black;
+      background: url('../icons/panel_head_dark.svg');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      max-width: 15ch;
+      margin: 0 auto;
+      margin-bottom: -0.75rem;
+      padding: .75em 2em .5em 2em;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+    }
+
+    .Section__body {
+      color: white;
+      background: black;
+      border-radius: 24px;
+      padding: 20px;
+      display: inline-block;
+      box-shadow: $shadow;
+    }
   }
 
-  .DownloadGrid {
-    @include grid-column-offset-left(1, 12);
-    @include grid-column-offset-right(1, 12);
-    @include grid-row();
+  .FeatureGrid {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 20px;
+
+    @include breakpoint-desktop {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  .FeatureGrid__item {
+    max-width: 400px;
+  }
+
+  .FeatureGrid__itemImage {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
   }
 
-  .DownloadGrid__item {
-    @include grid-column(1, 2);
+  .FeatureGrid__itemText {
+    background: $color-bg-invert-alt;
+    margin-top: 1px;
+    padding: 12px 16px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  
+    sub {
+      display: block;
+      color: $color-text-invert-alt;
+      line-height: inherit;
+      margin: 0;
+      vertical-align: baseline;
+    }
+  }
+
+  .DownloadSection {
+    .Section__body {
+      @include breakpoint-tablet {
+        max-width: grid-span(8, 12);
+        margin: 0 auto;
+      }
+    }
   }
 
   .DownloadCard {
+    display: flex;
+    border-radius: 24px;
+    box-shadow: $shadow;
+
+    @include breakpoint-below-desktop {
+      flex-direction: column;
+    }
+  }
+
+  .DownloadCard__head {
+    color: $color-text-invert;
+    background: $color-bg-invert;
+    padding: 24px;
+
+    @include breakpoint-below-desktop {
+      border-top-left-radius: 16px;
+      border-top-right-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    @include breakpoint-desktop {
+      border-radius: 0;
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+      padding: 32px;
+    }
+  }
+
+  .DownloadCard__body {
+    background: $color-bg-alt;
+    flex: 1;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+
+    @include breakpoint-below-desktop {
+      border-bottom-left-radius: 16px;
+      border-bottom-right-radius: 16px;
+    }
+
+    @include breakpoint-desktop {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+      padding: 32px;
+    }
     
   }
+
+  .DownloadCard__title {
+    margin-top: -0.25em;  
+  }
+
+  .DownloadCard__stat {
+    color: $color-text-invert-alt;
+  }
+
+  .DownloadCard__buttons {
+    color: $color-text-invert-alt;
+
+    @include breakpoint-desktop {
+      margin-top: 1em;
+      margin-bottom: -.5em;
+    }
+
+    :global(.Button) {
+      display: inline-block;
+    }
+  }
+
+  .DownloadCard__desc {
+    margin-bottom: 1em;
+    @include breakpoint-desktop {
+      margin-bottom: auto;
+    }
+  }
+
+  .DownloadCard__sideloadNote {
+    font-size: .8rem;
+    @include breakpoint-desktop {
+      font-size: .9rem;
+    }
+  }
+
+  .DownloadCard__compatNote {
+    font-size: .8rem;
+    @include breakpoint-desktop {
+      font-size: .9rem;
+    }
+  }
+
+  .FaqSection {
+    .Section__body {
+      @include breakpoint-tablet {
+        max-width: grid-span(8, 12);
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .FaqList__item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .FaqList__question {
+    color: white;
+    background: black;
+    border-radius: 24px;
+    padding: 20px 24px;
+    margin-right: auto;
+    max-width: 90%;
+    position: relative;
+    // box-shadow: $shadow;
+
+    &::after {
+      position: absolute;
+      top: 100%;
+      left: 38px;
+      content: ' ';
+      display: block;
+      width: 0;
+      height: 0;
+      border-top: 20px solid black;
+      border-right: 28px solid transparent;
+    }
+  }
+
+  .FaqList__answer {
+    background: $color-bg-alt;
+    margin-left: auto;
+    border-radius: 24px;
+    padding: 20px 24px;
+    max-width: 90%;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    position: relative;
+    // box-shadow: $shadow;
+
+    &::after {
+      position: absolute;
+      top: 100%;
+      right: 38px;
+      content: ' ';
+      display: block;
+      width: 0;
+      height: 0;
+      border-top: 20px solid $color-bg-alt;
+      border-left: 28px solid transparent;
+    }
+  }
+
+  .FaqList__item {
+    // margin-bottom: 1.25rem;
+  }
+
+  .FaqList__item:last-child {
+    margin-bottom: 0;
+  }
+
+  .CreditsSection {
+    .Section__body {
+      background: white;
+      margin: 0 auto;
+      padding: 32px;
+      @include breakpoint-desktop {
+        max-width: grid-span(8, 12);
+      }
+    }
+  }
+
+  .Credits {
+    font-size: .9rem;
+  }
+  
+  .Credits__main {
+    @include breakpoint-tablet {
+      column-count: 2;
+      column-gap: 20px;
+    }
+  }
+
+  .CreditGroup {
+    margin-bottom: 1em;
+    @include breakpoint-tablet {
+      margin-bottom: 1.92em;
+    }
+  }
+
+  .CreditGroup--breakColumn {
+    break-after: column;
+    margin-bottom: 1rem;
+  }
+
+  .CreditGroup:last-of-type {
+    margin-bottom: 1rem;
+  }
+
+  .CreditGroup__title {
+    font-size: 1rem;
+    margin-bottom: .25rem;
+  }
+
+  .CreditEntry {
+    font-size: .9em;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    margin-bottom: .25rem;
+  }
+
+  .CreditEntry__title {
+  }
+
+  .CreditEntry__name {
+    grid-column: span 2;
+  }
+
+  .CreditEntry__title ~ .CreditEntry__name {
+    // color: $color-text-alt;
+    grid-column: 2 / span 1;
+  }
+
+  .Credits__foot {
+    font-size: .8rem;
+    color: $color-text-alt;
+    display: grid;
+    grid-gap: 20px;
+
+    @include breakpoint-tablet {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
 </style>
\ No newline at end of file
diff --git a/website/src/styles/global.scss b/website/src/styles/global.scss
index e87b9c3..13b9620 100644
--- a/website/src/styles/global.scss
+++ b/website/src/styles/global.scss
@@ -6,8 +6,20 @@ html, body {
   letter-spacing: 0.02em;
   line-height: $line-height-global;
   font-weight: $font-weight-global;
-  background: $color-bg;
   color: $color-text;
+  background: $color-bg;
+  background-image: url('data:image/svg+xml;charset=utf8,\
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\
+      <rect x="0" y="0" width="33" height="33" fill="white" stroke-width="1" stroke-dashoffset="2" stroke-dasharray="4 4" stroke="%23B5C1CE"/>\
+    </svg>\
+  ');
+  background-position: center top;
+  background-repeat: repeat;
+  scroll-behavior: smooth;
+
+  @include breakpoint-below-desktop {
+    font-size: $font-size-global-mobile;
+  }
 }
 
 img, svg {
@@ -16,32 +28,32 @@ img, svg {
   height: auto;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: inherit;
+  font-weight: $font-weight-header;
+}
+
 a {
   cursor: pointer;
   color: inherit;
+  font-weight: bold;
   text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: inherit;
-  font-weight: $font-weight-header;
+p {
+  margin-bottom: 1.5em;
+}
+
+p:last-of-type {
+  margin-bottom: 0;
 }
 
 .link {
   border-bottom: 0.03em solid currentColor;
 }
 
-.Button {
-  cursor: pointer;
-  font-weight: bold;
-  color: $color-text-invert;
-  background: $color-bg-invert;
-  padding: 5px 14px;
-  border: 3px solid #fff;
-  border-right-color: #B3B5C1;
-  border-bottom-color: #B3B5C1;
-  border-radius: 8px;
-  outline: 5px solid $color-bg-invert;
-  box-shadow: $shadow-button;
-  margin: 5px;
+.screenshot {
+  image-rendering: auto;
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
 }
\ No newline at end of file
diff --git a/website/src/styles/mixins/_breakpoints.scss b/website/src/styles/mixins/_breakpoints.scss
index 2437307..86d3ef3 100644
--- a/website/src/styles/mixins/_breakpoints.scss
+++ b/website/src/styles/mixins/_breakpoints.scss
@@ -22,6 +22,13 @@
   }
 }
 
+// phone and tablet
+@mixin breakpoint-below-desktop {
+  @media (max-width: 1199px) {
+    @content;
+  }
+}
+
 // desktop width and up
 @mixin breakpoint-desktop {
   @media (min-width: 1200px) {
diff --git a/website/src/styles/vars.scss b/website/src/styles/vars.scss
index fd64cfa..3df10c7 100644
--- a/website/src/styles/vars.scss
+++ b/website/src/styles/vars.scss
@@ -2,12 +2,12 @@
 $font-stack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
 $font-stack-global: 'Inter UI', $font-stack-system;
 
-$font-size-global: 18px;
+$font-size-global: 20px;
 $font-size-global-mobile: 16px;
 $font-size-header: 1.3rem;
 
 $font-weight-global: 500;
-$font-weight-header: 800;
+$font-weight-header: 500;
 
 $line-height-global: 1.36;
 
@@ -17,7 +17,9 @@ $color-text-invert: #fff;
 $color-text-invert-alt: #BFCFDF;
 
 $color-bg: #fff;
+$color-bg-alt: #E6E7EC;
 $color-bg-invert: #000;
+$color-bg-invert-alt: #6d6e76;
 
 $color-brand-playdate: #ffc833;
 $color-brand-playdate-device: #fbc651;
@@ -29,6 +31,6 @@ $wrapper-padding: 12px;
 $wrapper-width: 1208px;
 $tablet-wrapper-width: 832px;
 $mobile-wrapper-width: 384px;
-$navbar-height: 64px;
+$navbar-height: 96px;
 
 @import './mixins';
\ No newline at end of file