diff --git a/assets/playnote.sketch b/assets/playnote.sketch
index 4cef869..b1aac04 100644
Binary files a/assets/playnote.sketch and b/assets/playnote.sketch differ
diff --git a/website/package.json b/website/package.json
index 2e08be0..68f3103 100644
--- a/website/package.json
+++ b/website/package.json
@@ -14,6 +14,7 @@
     "@types/three": "^0.139.0",
     "astro": "^0.25.4",
     "astro-icon": "^0.7.1",
+    "date-fns": "^2.28.0",
     "sass": "^1.49.9",
     "vite-plugin-glsl": "^0.1.2"
   },
diff --git a/website/src/components/Button.astro b/website/src/components/Button.astro
index 07421e3..8eb03d4 100644
--- a/website/src/components/Button.astro
+++ b/website/src/components/Button.astro
@@ -37,7 +37,7 @@ const { href, type } = Astro.props
       font-weight: normal;
       color: $color-text;
       background: $color-bg;
-      border: 2px solid #B3B5C1;
+      border: 3px solid #B3B5C1;
       border-right-color: #777784;
       border-bottom-color: #777784;
     }
diff --git a/website/src/pages/filehelp.astro b/website/src/pages/filehelp.astro
index 9805bd9..0195b12 100644
--- a/website/src/pages/filehelp.astro
+++ b/website/src/pages/filehelp.astro
@@ -68,24 +68,14 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     margin-top: 5rem;
   }
 
-  .Header__top {
-    background: url('/assets/panel_head_light.svg');
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    width: 15ch;
-    margin: 0 auto;
-    margin-bottom: -0.1rem;
-    padding: .75em 2em .5em 2em;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-  }
-
   .Header__main {
     background: $color-bg-alt;
-    padding: 20px;
     margin: 0 auto;
+    @include punchcard;
     @include panel;
+    padding-top: 40px;
     @include breakpoint-desktop {
+      padding-top: 40px;
       max-width: grid-span(8, 12);
     }
   }
@@ -103,8 +93,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   }
 
   .Panel {
-    color: $color-text-invert;
-    background: $color-bg-invert;
+    // color: $color-text-invert;
+    background: $color-bg-alt;
     margin: 0 auto;
     margin-bottom: 2em;
     @include panel;
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index d690127..4d61063 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -35,14 +35,18 @@ import { Icon } from 'astro-icon';
   </section>
 
   <section class="Section DownloadSection" id="download">
-    <h2 class="Section__title">Download</h2>
+    <div class="Section__head">
+      <span class="Section__headSpacer"></span>
+      <h2 class="Section__title">Latest Release</h2>
+      <a class="Section__headLink" href="/releases">Past Releases &amp; Changelog →</a>
+    </div>
     <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.1</div>
-            <div class="DownloadCard__stat">17.5 MB</div>
+            <div class="DownloadCard__stat">Version 1.1</div>
+            <div class="DownloadCard__stat">16.8 MB</div>
           </div>
           <div class="DownloadCard__buttons">
             <Button type="inverted" href="https://github.com/jaames/playnote-studio/releases/latest/download/Playnote.pdx.zip">Download</Button>
@@ -68,6 +72,10 @@ import { Icon } from 'astro-icon';
           </div>
         </div>
       </div>
+      <div class="BtwCard">
+        <p class="BtwCard__text">By the way! You can add your own Flipnotes by dropping them onto your Playdate's storage</p>
+        <Button class="BtwCard__button" href="/filehelp">Learn How</Button>
+      </div>
     </div>
   </section>
 
@@ -265,6 +273,8 @@ import { Icon } from 'astro-icon';
 
 <style lang="scss">
 
+  // this code is ugly fyi, i haven't had enough time to really polish this...
+
   .Section {
     @include wrapper;
     display: flex;
@@ -354,6 +364,48 @@ import { Icon } from 'astro-icon';
   }
 
   .DownloadSection {
+
+    .Section__head {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1rem;
+
+      @include breakpoint-tablet {
+        width: 100%;
+        max-width: grid-span(8, 12);
+        margin: 0 auto;
+        margin-bottom: 1rem;
+      }
+    }
+
+    .Section__head > * {
+      flex: 1;
+    }
+
+    .Section__title {
+      flex: 1;
+      margin-bottom: 0;
+
+      @include breakpoint-phone-only {
+        text-align: left;
+      }
+    }
+
+    .Section__headSpacer {
+
+      @include breakpoint-phone-only {
+        display: none;
+      }
+    }
+
+    .Section__headLink {
+      flex: 1;
+      font-weight: normal;
+      color: $color-text-alt;
+      text-align: right;
+      font-size: 0.9rem;
+    }
+
     .Section__body {
       @include breakpoint-tablet {
         max-width: grid-span(8, 12);
@@ -467,6 +519,27 @@ import { Icon } from 'astro-icon';
     flex: 1;
   }
 
+  .BtwCard {
+    // color: $color-text-invert;
+    background: $color-bg-alt;
+    @include punchcard;
+    @include panel;
+    padding-top: 40px;
+    padding-top: 40px;
+    margin-top: 1rem;
+    align-items: center;
+
+    display: flex;
+    @include breakpoint-desktop {
+      padding-top: 40px;
+    }
+  }
+
+  .BtwCard__text {
+    max-width: 42ch;
+    margin-right: auto;
+  }
+
   .FaqSection {
     .Section__body {
       @include breakpoint-tablet {
diff --git a/website/src/pages/releases.astro b/website/src/pages/releases.astro
new file mode 100644
index 0000000..08bbe5c
--- /dev/null
+++ b/website/src/pages/releases.astro
@@ -0,0 +1,185 @@
+---
+import { Markdown } from 'astro/components';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Button from '../components/Button.astro';
+
+import { parseISO, format } from 'date-fns';
+
+const resp = await fetch('https://api.github.com/repos/jaames/playnote-studio/releases');
+const releaseData = await resp.json();
+
+const releases = releaseData.map((release) => {
+
+  const assets = release.assets.map((asset) => ({
+    name: asset.name,
+    download: asset.browser_download_url
+  }));
+
+  return {
+    version: release.tag_name,
+    timestamp: format(parseISO(release.published_at), 'do MMMM y'),
+    notes: release.body,
+    assets
+  };
+});
+
+---
+<BaseLayout>
+
+  <header class="Header">
+    <!-- <div class="Header__top"></div> -->
+    <div class="Header__main">
+      <h1 class="Header__title">Releases</h1>
+    </div>
+  </header>
+
+  <div class="Releases">
+
+  {releases.map((release) => (
+    <div class="ReleaseCard">
+      <div class="ReleaseCard__head">
+        <div class="ReleaseCard__info">
+          <h3 class="ReleaseCard__title">{ release.version }</h3>
+          <div class="ReleaseCard__stat">{ release.timestamp }</div>
+        </div>
+        <div class="ReleaseCard__buttons">
+          <Button type="inverted" href={ release.assets[0].download }>Download</Button>
+        </div>
+      </div>
+      <div class="ReleaseCard__body">
+        <Markdown>
+          { release.notes }
+        </Markdown>
+      </div>
+    </div>
+  ))}
+
+  </div>
+
+</BaseLayout>
+
+<style lang="scss">
+
+  .Header {
+    @include wrapper;
+    margin-top: 5rem;
+    margin-bottom: 2rem;
+  }
+
+  .Header__main {
+    background: $color-bg-alt;
+    margin: 0 auto;
+    @include punchcard;
+    @include panel;
+    padding-top: 40px;
+    @include breakpoint-desktop {
+      padding-top: 40px;
+      max-width: grid-span(8, 12);
+    }
+  }
+
+  .Header__title {
+    font-size: 1.5rem;
+    max-width: 20ch;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  .Releases {
+    @include wrapper;
+  }
+
+  .ReleaseCard {
+    display: flex;
+    margin-bottom: 2rem;
+    @include breakpoint-below-desktop {
+      flex-direction: column;
+    }
+    @include breakpoint-desktop {
+      margin: 0 auto;
+      margin-bottom: 2rem;
+      max-width: grid-span(8, 12);
+    }
+  }
+
+  .ReleaseCard__head {
+    color: $color-text-invert;
+    background: $color-bg-invert;
+    padding: $padding-mobile;
+
+    @include breakpoint-below-desktop {
+      border-top-left-radius: $border-radius-mobile;
+      border-top-right-radius: $border-radius-mobile;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    @include breakpoint-desktop {
+      border-radius: 0;
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+      padding: $padding;
+    }
+  }
+
+  .ReleaseCard__body {
+    background: $color-bg-alt;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: $padding-mobile;
+
+    @include breakpoint-below-desktop {
+      border-bottom-left-radius: $border-radius-mobile;
+      border-bottom-right-radius: $border-radius-mobile;
+    }
+
+    @include breakpoint-desktop {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      padding: $padding;
+    }
+    
+  }
+
+  .ReleaseCard__title {
+    margin-top: -0.25em;  
+  }
+
+  .ReleaseCard__stat {
+    color: $color-text-invert-alt;
+  }
+
+  .ReleaseCard__buttons {
+    color: $color-text-invert-alt;
+
+    @include breakpoint-desktop {
+      margin-top: 1em;
+      margin-bottom: -.5em;
+    }
+
+    :global(.Button) {
+      display: inline-block;
+    }
+  }
+
+  // .ReleaseCard__desc {
+  //   margin-bottom: 1em;
+  //   @include breakpoint-desktop {
+  //     margin-bottom: auto;
+  //   }
+  // }
+
+  .ReleaseCard__body {
+    ul {
+      padding: 0;
+      padding-left: 1em;
+    }
+
+    ul, p {
+      margin-bottom: .5em;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/website/src/styles/vars.scss b/website/src/styles/vars.scss
index d370f32..4ff03cd 100644
--- a/website/src/styles/vars.scss
+++ b/website/src/styles/vars.scss
@@ -50,4 +50,9 @@ $text-size-title: 1.25rem;
     padding: $padding;
     border-radius: $border-radius;
   }
+}
+
+@mixin punchcard {
+  -webkit-mask-image: radial-gradient(circle at center 22px, transparent 10px, white 10px);
+  mask-image: radial-gradient(circle at center 22px, transparent 10px, white 10px);
 }
\ No newline at end of file