diff --git a/app/controllers/discourse_rewind/rewinds_controller.rb b/app/controllers/discourse_rewind/rewinds_controller.rb
index 5d3d7aa..fb7871e 100644
--- a/app/controllers/discourse_rewind/rewinds_controller.rb
+++ b/app/controllers/discourse_rewind/rewinds_controller.rb
@@ -10,10 +10,7 @@ def show
       DiscourseRewind::FetchReports.call(service_params) do
         on_model_not_found(:year) { raise Discourse::NotFound }
         on_model_not_found(:user) { raise Discourse::NotFound }
-        on_success do |reports:|
-          @reports = reports
-          render json: MultiJson.dump(reports), status: :ok
-        end
+        on_success { |reports:| render json: MultiJson.dump(reports), status: :ok }
       end
     end
   end
diff --git a/app/services/discourse_rewind/action/invites.rb b/app/services/discourse_rewind/action/invites.rb
index dc2feae..8c720e9 100644
--- a/app/services/discourse_rewind/action/invites.rb
+++ b/app/services/discourse_rewind/action/invites.rb
@@ -13,7 +13,7 @@ def call
         return if total_invites == 0
 
         # Redeemed invites (users who actually joined)
-        redeemed_count = invites.where.not(redeemed_at: nil).count
+        redeemed_count = invites.where("redemption_count > 0").count
 
         # Get the users who were invited (via InvitedUser or redeemed invites)
         invited_user_ids = InvitedUser.where(invite: invites).pluck(:user_id).compact
@@ -22,11 +22,7 @@ def call
 
         # Calculate impact of invitees
         invitee_post_count =
-          Post
-            .where(user_id: invited_user_ids)
-            .where(created_at: date)
-            .where(deleted_at: nil)
-            .count
+          Post.where(user_id: invited_user_ids).where(created_at: date).where(deleted_at: nil).count
 
         invitee_topic_count =
           Topic
diff --git a/app/services/discourse_rewind/action/most_viewed_categories.rb b/app/services/discourse_rewind/action/most_viewed_categories.rb
index 6aa6ebe..d473306 100644
--- a/app/services/discourse_rewind/action/most_viewed_categories.rb
+++ b/app/services/discourse_rewind/action/most_viewed_categories.rb
@@ -10,7 +10,6 @@ class MostViewedCategories < BaseReport
           { category_id: 2, name: "dogs" },
           { category_id: 3, name: "countries" },
           { category_id: 4, name: "management" },
-          { category_id: 5, name: "things" },
         ],
         identifier: "most-viewed-categories",
       }
@@ -26,7 +25,7 @@ def call
             .where(categories: { id: user.guardian.allowed_category_ids })
             .group("categories.id, categories.name")
             .order("COUNT(*) DESC")
-            .limit(5)
+            .limit(4)
             .pluck("categories.id, categories.name")
             .map { |category_id, name| { category_id: category_id, name: name } }
 
diff --git a/app/services/discourse_rewind/action/most_viewed_tags.rb b/app/services/discourse_rewind/action/most_viewed_tags.rb
index a11661e..0552961 100644
--- a/app/services/discourse_rewind/action/most_viewed_tags.rb
+++ b/app/services/discourse_rewind/action/most_viewed_tags.rb
@@ -10,7 +10,6 @@ class MostViewedTags < BaseReport
           { tag_id: 2, name: "dogs" },
           { tag_id: 3, name: "countries" },
           { tag_id: 4, name: "management" },
-          { tag_id: 5, name: "things" },
         ],
         identifier: "most-viewed-tags",
       }
@@ -28,7 +27,7 @@ def call
             .where(tags: { id: Tag.visible(user.guardian).pluck(:id) })
             .group("tags.id, tags.name")
             .order("COUNT(DISTINCT topic_views.topic_id) DESC")
-            .limit(5)
+            .limit(4)
             .pluck("tags.id, tags.name")
             .map { |tag_id, name| { tag_id: tag_id, name: name } }
 
diff --git a/app/services/discourse_rewind/fetch_reports.rb b/app/services/discourse_rewind/fetch_reports.rb
index c959a24..79f0049 100644
--- a/app/services/discourse_rewind/fetch_reports.rb
+++ b/app/services/discourse_rewind/fetch_reports.rb
@@ -81,7 +81,7 @@ def fetch_reports(date:, user:, guardian:, year:)
       reports = Discourse.redis.get(key)
 
       if !reports
-        reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }
+        reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }.compact
         Discourse.redis.setex(key, CACHE_DURATION, MultiJson.dump(reports))
       else
         reports = MultiJson.load(reports, symbolize_keys: true)
diff --git a/assets/javascripts/discourse/components/reports/header.gjs b/assets/javascripts/discourse/components/reports/header.gjs
index 55ad458..9d2e373 100644
--- a/assets/javascripts/discourse/components/reports/header.gjs
+++ b/assets/javascripts/discourse/components/reports/header.gjs
@@ -1,13 +1,41 @@
+import { i18n } from "discourse-i18n";
+
 const RewindHeader = <template>
   <div class="rewind__header">
-    <img
-      class="rewind-logo -light"
-      src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
-    />
-    <img
-      class="rewind-logo -dark"
-      src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
-    />
+    <div class="rewind__header-logo">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 104 106">
+        <path
+          fill="#231f20"
+          d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87S80 0 51.87 0Z"
+        />
+        <path
+          fill="#fff9ae"
+          d="M52.37 19.74a31.62 31.62 0 0 0-27.79 46.67l-5.72 18.4 20.54-4.64a31.61 31.61 0 1 0 13-60.43Z"
+        />
+        <path
+          fill="#00aeef"
+          d="M77.45 32.12a31.6 31.6 0 0 1-38.05 48l-20.54 4.7 20.91-2.47a31.6 31.6 0 0 0 37.68-50.23Z"
+        />
+        <path
+          fill="#00a94f"
+          d="M71.63 26.29A31.6 31.6 0 0 1 38.8 78l-19.94 6.82 20.54-4.65a31.6 31.6 0 0 0 32.23-53.88Z"
+        />
+        <path
+          fill="#f15d22"
+          d="M26.47 67.11a31.61 31.61 0 0 1 51-35 31.61 31.61 0 0 0-52.89 34.3l-5.72 18.4Z"
+        />
+        <path
+          fill="#e31b23"
+          d="M24.58 66.41a31.61 31.61 0 0 1 47.05-40.12 31.61 31.61 0 0 0-49 39.63l-3.76 18.9Z"
+        />
+      </svg>
+      <div class="rewind__header-title">
+        {{i18n "discourse_rewind.title"}}
+      </div>
+      <div class="rewind__header-year">
+        {{i18n "discourse_rewind.year"}}
+      </div>
+    </div>
   </div>
 </template>;
 
diff --git a/assets/javascripts/discourse/components/reports/most-viewed-categories.gjs b/assets/javascripts/discourse/components/reports/most-viewed-categories.gjs
index 5d72a85..15c2be7 100644
--- a/assets/javascripts/discourse/components/reports/most-viewed-categories.gjs
+++ b/assets/javascripts/discourse/components/reports/most-viewed-categories.gjs
@@ -10,11 +10,12 @@ const MostViewedCategories = <template>
         }}</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
-          <a href={{concat "/c/-/" data.category_id}} class="rewind-card">
-            <p
-              class="most-viewed-categories__category"
-              href={{concat "/c/-/" data.category_id}}
-            >{{data.name}}</p>
+          <a class="folder-wrapper" href={{concat "/c/-/" data.category_id}}>
+            <span class="folder-tab"></span>
+            <div class="rewind-card">
+              <p class="most-viewed-categories__category">{{data.name}}</p>
+            </div>
+            <span class="folder-bg"></span>
           </a>
         {{/each}}
       </div>
diff --git a/assets/javascripts/discourse/components/reports/most-viewed-tags.gjs b/assets/javascripts/discourse/components/reports/most-viewed-tags.gjs
index b871ab3..cc05f7d 100644
--- a/assets/javascripts/discourse/components/reports/most-viewed-tags.gjs
+++ b/assets/javascripts/discourse/components/reports/most-viewed-tags.gjs
@@ -10,11 +10,17 @@ const MostViewedTags = <template>
         }}</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
-          <a class="rewind-card" href={{concat "/tag/" data.name}}>
-            <p
-              class="most-viewed-tags__tag"
-              href={{concat "/tag/" data.name}}
-            >#{{data.name}}</p>
+          <a class="folder-wrapper" href={{concat "/tag/" data.name}}>
+            <span class="folder-tab"></span>
+            <div class="rewind-card">
+              <p
+                class="most-viewed-tags__tag"
+                href={{concat "/tag/" data.name}}
+              >
+                #{{data.name}}
+              </p>
+            </div>
+            <span class="folder-bg"></span>
           </a>
         {{/each}}
       </div>
diff --git a/assets/javascripts/discourse/components/reports/top-words/word-card.gjs b/assets/javascripts/discourse/components/reports/top-words/word-card.gjs
index fff7965..65b8213 100644
--- a/assets/javascripts/discourse/components/reports/top-words/word-card.gjs
+++ b/assets/javascripts/discourse/components/reports/top-words/word-card.gjs
@@ -4,7 +4,6 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { htmlSafe } from "@ember/template";
 import concatClass from "discourse/helpers/concat-class";
-import emoji from "discourse/helpers/emoji";
 import discourseLater from "discourse/lib/later";
 
 const MYSTERY_EMOJIS = [
@@ -81,21 +80,12 @@ export default class WordCard extends Component {
         "rewind-card__wrapper"
         (if this.longWord "-long-word")
       }}
-      style={{this.cardStyle}}
       {{didInsert this.registerCardContainer}}
       role="button"
     >
       <div class="rewind-card__inner">
         <div class="rewind-card -front">
-          <span class="rewind-card__image tl">{{emoji
-              this.mysteryData.emoji
-            }}</span>
-          <span class="rewind-card__image cr">{{emoji
-              this.mysteryData.emoji
-            }}</span>
-          <span class="rewind-card__image br">{{emoji
-              this.mysteryData.emoji
-            }}</span>
+
         </div>
         <div class="rewind-card -back">
           <span class="rewind-card__title">{{@word}}</span>
diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs
index 168e8b9..750b5b9 100644
--- a/assets/javascripts/discourse/components/rewind.gjs
+++ b/assets/javascripts/discourse/components/rewind.gjs
@@ -3,11 +3,12 @@ import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { eq } from "discourse/truth-helpers";
+import { i18n } from "discourse-i18n";
 import ActivityCalendar from "discourse/plugins/discourse-rewind/discourse/components/reports/activity-calendar";
 import BestPosts from "discourse/plugins/discourse-rewind/discourse/components/reports/best-posts";
 import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/reports/best-topics";
@@ -54,13 +55,9 @@ export default class Rewind extends Component {
   }
 
   @action
-  handleScroll({ target }) {
-    let children = this.rewindContainer.getElementsByClassName("parallax-bg");
-
-    for (let i = 0; i < children.length; i++) {
-      children[i].style.transform = `translateY(-${
-        (target.scrollTop * (i + 1)) / 5
-      }px)`;
+  handleBackdropClick(event) {
+    if (this.fullScreen && event.target === event.currentTarget) {
+      this.fullScreen = false;
     }
   }
 
@@ -77,27 +74,28 @@ export default class Rewind extends Component {
       }}
       {{didInsert this.loadRewind}}
       {{on "keydown" this.handleEscape}}
+      {{on "click" this.handleBackdropClick}}
       {{didInsert this.registerRewindContainer}}
       tabindex="0"
     >
       <div class="rewind">
         <RewindHeader />
-        <div class="background-1 parallax-bg"></div>
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
             <div class="spinner small"></div>
-            <div class="rewind-loader__text">Crunching your data...</div>
+            <div class="rewind-loader__text">
+              {{i18n "discourse_rewind.loading"}}
+            </div>
           </div>
         {{else}}
           <DButton
-            class="rewind__exit-fullscreen-btn"
+            class="btn-default rewind__exit-fullscreen-btn --special-kbd"
             @icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
             @action={{this.toggleFullScreen}}
           />
           <div
             class="rewind__scroll-wrapper"
             {{didInsert this.registerScrollWrapper}}
-            {{on "scroll" this.handleScroll}}
           >
 
             {{#each this.rewind as |report|}}
diff --git a/assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs b/assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs
index bc2c1a1..516d298 100644
--- a/assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs
+++ b/assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs
@@ -28,7 +28,10 @@ export default class AvatarDecorator extends Component {
   }
 
   get showDecorator() {
-    return this.currentUser?.is_rewind_active && !this.dismissed;
+    return (
+      this.currentUser?.is_development_env ||
+      (this.currentUser?.is_rewind_active && !this.dismissed)
+    );
   }
 
   <template>
diff --git a/assets/javascripts/discourse/connectors/before-panel-body/rewind-callout.gjs b/assets/javascripts/discourse/connectors/before-panel-body/rewind-callout.gjs
index a0fc848..01465b9 100644
--- a/assets/javascripts/discourse/connectors/before-panel-body/rewind-callout.gjs
+++ b/assets/javascripts/discourse/connectors/before-panel-body/rewind-callout.gjs
@@ -4,6 +4,7 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import icon from "discourse/helpers/d-icon";
 import KeyValueStore from "discourse/lib/key-value-store";
+import { i18n } from "discourse-i18n";
 
 export default class RewindCallout extends Component {
   @service router;
@@ -12,7 +13,10 @@ export default class RewindCallout extends Component {
   store = new KeyValueStore("discourse_rewind_" + this.fetchYear);
 
   get showCallout() {
-    return this.currentUser?.is_rewind_active && !this.dismissed;
+    return (
+      this.currentUser?.is_rewind_active &&
+      (this.currentUser?.is_development_env || !this.dismissed)
+    );
   }
 
   // We want to show the previous year's rewind in January
@@ -47,16 +51,71 @@ export default class RewindCallout extends Component {
           @action={{this.openRewind}}
           class="rewind-callout btn-transparent"
         >
-          <img
-            class="rewind-logo -light"
-            src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
-          />
-          <img
-            class="rewind-logo -dark"
-            src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
-          />
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515.48 76.72">
+            <path d="M0 0h515.48v76.72H0z" style="fill:#faf7e4" />
+            <path
+              d="M42.27 12.67c-12.8 0-23.58 10.38-23.58 23.18v24l23.57-.02c12.8 0 23.18-10.78 23.18-23.58S55.05 12.67 42.26 12.67z"
+              style="fill:#010101"
+            />
+            <path
+              d="M42.51 21.64c-7.94 0-14.37 6.44-14.36 14.38 0 2.39.6 4.73 1.73 6.83l-2.6 8.36 9.34-2.11a14.36 14.36 0 0 0 15.85-2.73 14.371 14.371 0 0 0-9.94-24.74h-.02Z"
+              style="fill:#fcf6b2"
+            />
+            <path
+              d="M53.75 44.9a14.356 14.356 0 0 1-17.13 4.18l-9.34 2.14 9.5-1.12c6.3 3.69 14.37 2.07 18.75-3.77s3.68-14.04-1.62-19.06c3.98 5.22 3.92 12.49-.16 17.63"
+              style="fill:#29abe2"
+            />
+            <path
+              d="M52.94 42.17c-3.52 5.55-10.35 7.99-16.6 5.95l-9.06 3.1 9.34-2.11c6.65 3 14.49.54 18.24-5.72s2.2-14.34-3.59-18.77c4.51 4.78 5.2 12.01 1.68 17.55Z"
+              style="fill:#10a94d"
+            />
+            <path
+              d="M30.74 43.17c-2.6-6.27-.46-13.51 5.14-17.35S49 22.58 53.92 27.26c-4.55-5.98-12.94-7.44-19.24-3.35s-8.39 12.34-4.8 18.93l-2.6 8.36 3.46-8.04Z"
+              style="fill:#f15f25"
+            />
+            <path
+              d="M29.88 42.85a14.36 14.36 0 0 1 3.31-17.77 14.35 14.35 0 0 1 18.07-.46c-5.16-5.43-13.63-5.99-19.45-1.28-5.83 4.71-7.05 13.11-2.82 19.29l-1.71 8.59zM181.65 0l71.41 76.72h34.22L215.88 0z"
+              style="fill:#d0222b"
+            />
+            <path
+              d="m215.88 0 71.4 76.72h34.23L250.11 0z"
+              style="fill:#f15f25"
+            />
+            <path
+              d="m250.11 0 71.4 76.72h34.23L284.33 0z"
+              style="fill:#fcf6b2"
+            />
+            <path
+              d="m284.33 0 71.41 76.72h34.22L318.56 0z"
+              style="fill:#10a94d"
+            />
+            <path
+              d="m318.56 0 71.4 76.72h34.23L352.79 0z"
+              style="fill:#29abe2"
+            />
+
+            <text
+              x="108"
+              y="22"
+              text-anchor="middle"
+              dominant-baseline="middle"
+              style="font-size: 20px; transform: skewX(15deg); fill: #010101; letter-spacing: .025em;"
+            >{{i18n "discourse_rewind.title"}}</text>
+
+            <text
+              x="115"
+              y="50"
+              text-anchor="middle"
+              dominant-baseline="middle"
+              style="font-size: 32px; font-weight: bold; fill: #010101;"
+            >{{i18n "discourse_rewind.year"}}</text>
+
+          </svg>
+
+          <span class="btn no-text --special-kbd">
+            {{icon "play"}}
+          </span>
 
-          {{icon "arrow-right" class="rewind-callaout__arrow"}}
         </DButton>
       </div>
     {{/if}}
diff --git a/assets/stylesheets/common/_index.scss b/assets/stylesheets/common/_index.scss
index 4700946..172b3b2 100644
--- a/assets/stylesheets/common/_index.scss
+++ b/assets/stylesheets/common/_index.scss
@@ -15,3 +15,4 @@
 @import "fbff";
 @import "rewind-header";
 @import "rewind-callout";
+@import "folder-styles";
diff --git a/assets/stylesheets/common/activity-calendar.scss b/assets/stylesheets/common/activity-calendar.scss
index 3f1ea0c..0f0bbbe 100644
--- a/assets/stylesheets/common/activity-calendar.scss
+++ b/assets/stylesheets/common/activity-calendar.scss
@@ -26,13 +26,12 @@
     font-size: 10px;
     font-weight: normal;
     text-align: left;
+    color: #fff;
   }
 
   .rewind-calendar-cell {
     height: 10px;
     width: 10px;
-    border-radius: calc(var(--rewind-border-radius) / 2);
-    border: 1px solid rgb(var(--primary-rgb), 0.2);
 
     @media screen and (width <= 475px) {
       height: 5px;
@@ -44,15 +43,15 @@
     }
 
     &.-low {
-      background: var(--tertiary-low);
+      background: var(--success);
     }
 
     &.-medium {
-      background: var(--tertiary-medium);
+      background: var(--success-medium);
     }
 
     &.-high {
-      background: var(--tertiary-high);
+      background: var(--success-low);
     }
   }
 }
diff --git a/assets/stylesheets/common/best-posts.scss b/assets/stylesheets/common/best-posts.scss
index 8f26be1..59815d7 100644
--- a/assets/stylesheets/common/best-posts.scss
+++ b/assets/stylesheets/common/best-posts.scss
@@ -1,64 +1,80 @@
 .-best-posts {
   .rewind-report-container {
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(3, calc(32% - (1em / 3)));
     gap: 1em;
+
+    @media screen and (width <= 580px) {
+      padding: 1em;
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .rewind-report-title {
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+    border: none;
+    margin-bottom: 1em;
   }
 
   .rewind-card {
-    max-width: 700px;
-    text-align: left;
-    align-items: unset;
+    box-sizing: border-box;
+    padding: 0.5em;
     position: relative;
-
-    @include rewind-border;
+    color: var(--rewind-black);
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    max-width: 700px;
+    height: 100%;
+    background: linear-gradient(
+      225deg,
+      transparent 13px,
+      var(--rewind-white) 13px
+    );
+
+    &::before {
+      content: "";
+      display: block;
+      width: 0;
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      border: 10px solid transparent;
+      border-left: 10px solid var(--rewind-white);
+      border-bottom: 10px solid var(--rewind-white);
+      box-shadow:
+        0 2px 4px rgb(0 0 0 / 0.4),
+        -1px 1px 4px rgb(0 0 0 / 0.4);
+    }
 
     &.rank-1 {
-      --background: #ffe46a;
-      --border-color: #ffd82a;
+      &::before {
+        border-left: 10px solid #ffd82a;
+        border-bottom: 10px solid #ffd82a;
+      }
     }
 
     &.rank-2 {
-      --background: #d6d6d6;
-      --border-color: #c4c4c4;
+      &::before {
+        border-left: 10px solid #d6d6d6;
+        border-bottom: 10px solid #d6d6d6;
+      }
     }
 
     &.rank-3 {
-      --background: #dca570;
-      --border-color: #cd7f32;
-    }
-  }
-
-  .best-posts.-rank {
-    z-index: -1;
-    position: absolute;
-    top: 8px;
-    left: -20px;
-    width: 0;
-    height: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: none;
-    border-right: 28px solid var(--border-color);
-    border-top: 28px solid transparent;
-
-    &:nth-child(2) {
-      z-index: -1;
-      position: absolute;
-      top: 8px;
-      left: -20px;
-      width: 0;
-      height: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-left: 28px solid var(--border-color);
-      border-right: 0;
-      transform: rotate(180deg);
+      &::before {
+        border-left: 10px solid #cd7f32;
+        border-bottom: 10px solid #cd7f32;
+      }
     }
   }
 
   .best-posts__post {
+    width: 100%;
+
     @media screen and (width <= 475px) {
       max-height: 300px;
       text-overflow: ellipsis;
@@ -76,10 +92,10 @@
   .best-posts__post p {
     font-family: var(--pixel-text) !important;
     font-weight: normal;
-    font-size: var(--font-down-);
+    font-size: var(--font-down-2);
     width: 100%;
     text-align: left;
-    color: var(--primary-800);
+    color: var(--rewind-grey);
 
     @media screen and (width <= 475px) {
       font-size: var(--font-down-2);
@@ -118,7 +134,8 @@
   .best-posts__metadata a {
     font-family: var(--pixel-text);
     text-transform: uppercase;
-    color: var(--primary);
+    color: var(--rewind-blue);
+    text-decoration: underline;
   }
 
   .best-posts__metadata {
@@ -128,12 +145,14 @@
     gap: 10px;
     color: var(--primary-700);
     align-items: center;
+    margin-top: auto;
+    width: 100%;
   }
 
   .best-posts__likes,
   .best-posts__replies {
     font-family: var(--pixel-text);
-    border: 1px solid var(--primary-200);
+    border: 1px solid var(--rewind-light-grey);
     padding: 3px 8px;
     border-radius: var(--rewind-border-radius);
     display: flex;
diff --git a/assets/stylesheets/common/best-topics.scss b/assets/stylesheets/common/best-topics.scss
index d817cea..9d622ee 100644
--- a/assets/stylesheets/common/best-topics.scss
+++ b/assets/stylesheets/common/best-topics.scss
@@ -1,4 +1,6 @@
 .-best-topics {
+  padding-bottom: 0;
+
   .rewind-report-container {
     flex-direction: column;
     gap: 1em;
@@ -8,23 +10,43 @@
     color: var(--primary);
   }
 
+  .rewind-report-title {
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+    border: none;
+  }
+
   .rewind-card {
     gap: 1em;
-    align-items: flex-start;
     max-width: 700px;
     background: none;
-    border: none;
-    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, 33%);
+    align-items: start;
+
+    @media screen and (width <= 580px) {
+      grid-template-columns: 1fr;
+    }
   }
 
   .best-topics__header {
     font-family: var(--jersey-heading);
     margin: 0;
-    font-size: var(--font-up-3);
+    color: var(--rewind-black);
+    font-size: var(--font-up-1);
     line-height: var(--font-0);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .best-topics__topic {
+    box-sizing: border-box;
     padding: 0.5em;
     position: relative;
     color: var(--primary);
@@ -32,62 +54,62 @@
     flex-direction: column;
     text-align: left;
     max-width: 700px;
+    height: 100%;
+    background: linear-gradient(
+      225deg,
+      transparent 13px,
+      var(--rewind-white) 13px
+    );
 
-    @include rewind-border;
+    &::before {
+      content: "";
+      display: block;
+      width: 0;
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      border: 10px solid transparent;
+      border-left: 10px solid var(--rewind-white);
+      border-bottom: 10px solid var(--rewind-white);
+      box-shadow:
+        0 2px 4px rgb(0 0 0 / 0.4),
+        -1px 1px 4px rgb(0 0 0 / 0.4);
+    }
 
     &.rank-1 {
-      --background: #ffe46a;
-      --border-color: #ffd82a;
+      &::before {
+        border-left: 10px solid #ffd82a;
+        border-bottom: 10px solid #ffd82a;
+      }
     }
 
     &.rank-2 {
-      --background: #d6d6d6;
-      --border-color: #c4c4c4;
+      &::before {
+        border-left: 10px solid #d6d6d6;
+        border-bottom: 10px solid #d6d6d6;
+      }
     }
 
     &.rank-3 {
-      --background: #dca570;
-      --border-color: #cd7f32;
-    }
-    background: var(--secondary);
-  }
-
-  .best-topics.-rank {
-    z-index: -1;
-    position: absolute;
-    top: 8px;
-    left: -20px;
-    width: 0;
-    height: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: none;
-    border-right: 28px solid var(--border-color);
-    border-top: 28px solid transparent;
-
-    &:nth-child(2) {
-      z-index: -1;
-      position: absolute;
-      top: 8px;
-      left: -20px;
-      width: 0;
-      height: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-left: 28px solid var(--border-color);
-      border-right: 0;
-      transform: rotate(180deg);
+      &::before {
+        border-left: 10px solid #cd7f32;
+        border-bottom: 10px solid #cd7f32;
+      }
     }
   }
 
   .best-topics__excerpt {
     font-family: var(--pixel-text);
-    font-size: var(--font-down-1);
+    font-size: var(--font-down-2);
     font-weight: 400;
-    color: var(--primary-800);
+    color: var(--rewind-grey);
     text-align: left;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 8;
+    line-clamp: 8;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     @media screen and (width <= 475px) {
       max-width: 100%;
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 4abcf2d..02ebc12 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -10,10 +10,7 @@
 }
 
 .rewind-card {
-  background-color: var(--secondary);
-  border: 1px solid var(--primary-300);
   border-radius: var(--rewind-border-radius);
-  background-size: cover;
   display: flex;
   flex-direction: column;
   text-align: center;
diff --git a/assets/stylesheets/common/fbff.scss b/assets/stylesheets/common/fbff.scss
index 346f0c7..9a48e18 100644
--- a/assets/stylesheets/common/fbff.scss
+++ b/assets/stylesheets/common/fbff.scss
@@ -9,11 +9,18 @@
     --border-size: 3px;
   }
 
+  .rewind-report-title {
+    width: 100%;
+    text-align: center;
+    border: none;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
   .rewind-card {
     display: grid;
-    grid-template-columns: 1fr 400px 1fr;
-
-    @include rewind-border;
+    grid-template-columns: 100px 1fr 100px;
+    border: none;
 
     @media screen and (width <= 625px) {
       grid-template-columns: 1fr 1fr 1fr;
@@ -78,10 +85,13 @@
     margin: 0;
     align-self: center;
     justify-self: center;
-    margin-top: auto;
     height: min-content;
     font-size: var(--font-down-1);
     font-family: "Pixelify Sans", sans-serif;
+    color: var(--rewind-magenta);
+    margin-top: 0.5em;
+    line-height: 1;
+    word-wrap: anywhere;
 
     @media screen and (width <= 475px) {
       font-size: var(--font-down-3);
diff --git a/assets/stylesheets/common/folder-styles.scss b/assets/stylesheets/common/folder-styles.scss
new file mode 100644
index 0000000..6e3a563
--- /dev/null
+++ b/assets/stylesheets/common/folder-styles.scss
@@ -0,0 +1,73 @@
+.-most-viewed-tags,
+.-most-viewed-categories {
+  .rewind-card {
+    @include rewind-border;
+    flex-grow: 1;
+    position: relative;
+    background: var(--rewind-black);
+    border-radius: 4px;
+    z-index: 1;
+    width: 100%;
+    transition: transform 0.3s ease;
+    transform: skew(-1deg) scaleY(1);
+
+    p {
+      color: var(--rewind-white);
+    }
+  }
+
+  .folder-tab {
+    display: block;
+    content: "";
+    width: 3em;
+    height: 1em;
+    border: 2px solid var(--rewind-green);
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    position: absolute;
+    top: -1em;
+    left: 0;
+    z-index: 1;
+    transition: background-color 0.3s ease;
+    background: var(--rewind-black);
+  }
+
+  .folder-bg {
+    content: "";
+    border: 2px solid var(--rewind-green);
+    width: calc(100% - 4px);
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    border-radius: 0 4px 4px;
+    transition: background-color 0.3s ease;
+    z-index: -1;
+  }
+
+  .folder-wrapper {
+    display: flex;
+    position: relative;
+    flex: 1;
+    margin-top: 1.5em;
+
+    &:hover {
+      z-index: 4;
+
+      .folder-bg,
+      .folder-tab {
+        background-color: var(--rewind-white);
+      }
+
+      .rewind-card {
+        transform: skew(-10deg) scaleY(0.9) translateY(7px) translateX(10px);
+        box-shadow: -12px -30px 30px rgb(255 255 255 / 0.5);
+
+        p {
+          color: var(--rewind-yellow);
+        }
+      }
+    }
+  }
+}
diff --git a/assets/stylesheets/common/fonts.scss b/assets/stylesheets/common/fonts.scss
index 724c978..f665403 100644
--- a/assets/stylesheets/common/fonts.scss
+++ b/assets/stylesheets/common/fonts.scss
@@ -57,4 +57,7 @@
 
 h2.rewind-report-title {
   text-transform: uppercase;
+  color: var(--rewind-green);
+  z-index: 2;
+  line-height: 1.2;
 }
diff --git a/assets/stylesheets/common/most-viewed-categories.scss b/assets/stylesheets/common/most-viewed-categories.scss
index 6014e6f..b7c62d7 100644
--- a/assets/stylesheets/common/most-viewed-categories.scss
+++ b/assets/stylesheets/common/most-viewed-categories.scss
@@ -5,14 +5,20 @@
     flex-wrap: wrap;
   }
 
+  .rewind-report-title {
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+    border: none;
+    margin-bottom: 1em;
+  }
+
   .rewind-card {
     @include rewind-border;
     width: max-content;
     flex-grow: 1;
-
-    &:hover {
-      background-color: var(--secondary-very-high);
-    }
+    position: relative;
   }
 }
 
diff --git a/assets/stylesheets/common/most-viewed-tags.scss b/assets/stylesheets/common/most-viewed-tags.scss
index 6c9a3a1..a7d5bc6 100644
--- a/assets/stylesheets/common/most-viewed-tags.scss
+++ b/assets/stylesheets/common/most-viewed-tags.scss
@@ -1,19 +1,18 @@
 .-most-viewed-tags {
+  .rewind-report-title {
+    box-sizing: border-box;
+    border: none;
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    margin-bottom: 0.5em;
+  }
+
   .rewind-report-container {
     display: flex;
     gap: 0.5em;
     flex-wrap: wrap;
   }
-
-  .rewind-card {
-    @include rewind-border;
-    width: max-content;
-    flex-grow: 1;
-
-    &:hover {
-      background-color: var(--secondary-very-high);
-    }
-  }
 }
 
 .most-viewed-tags__tag {
diff --git a/assets/stylesheets/common/post-received-reactions.scss b/assets/stylesheets/common/post-received-reactions.scss
index a842b94..8bdd6d5 100644
--- a/assets/stylesheets/common/post-received-reactions.scss
+++ b/assets/stylesheets/common/post-received-reactions.scss
@@ -9,8 +9,14 @@
     }
   }
 
+  .rewind-report-title {
+    border: none;
+    width: 100%;
+    text-align: center;
+    margin: 0 0 0 -1em;
+  }
+
   .rewind-card {
-    background: var(--secondary);
     flex-direction: row;
     gap: 0.5em;
     height: min-content;
@@ -25,12 +31,14 @@
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
     z-index: 1;
-
-    @include rewind-border;
+    color: var(--rewind-white);
+    border: none;
 
     .emoji {
       width: 30px;
       height: 30px;
+      image-rendering: crisp-edges;
+      transform: scale(1);
     }
   }
 
diff --git a/assets/stylesheets/common/post-used-reactions.scss b/assets/stylesheets/common/post-used-reactions.scss
index 4e3b5fe..c29a2e9 100644
--- a/assets/stylesheets/common/post-used-reactions.scss
+++ b/assets/stylesheets/common/post-used-reactions.scss
@@ -13,32 +13,87 @@
     display: grid;
     grid-template-columns: 25px 50px 1fr;
     gap: 1em;
-    border-bottom: 1px solid var(--primary-low);
-    padding: 0.5em 0;
+    padding: 1em 0;
+
+    img.emoji {
+      vertical-align: baseline;
+      image-rendering: crisp-edges;
+      transform: scale(1);
+    }
+
+    &:nth-child(2) {
+      .rewind-reactions-bar {
+        animation-delay: 0.25s;
+      }
+    }
+
+    &:nth-child(3) {
+      .rewind-reactions-bar {
+        animation-delay: -0.25s;
+      }
+    }
+
+    &:nth-child(4) {
+      .rewind-reactions-bar {
+        animation-delay: 0.5s;
+      }
+    }
+
+    &:nth-child(5) {
+      .rewind-reactions-bar {
+        animation-delay: -0.5s;
+      }
+    }
   }
 
   .emoji {
     height: 25px;
     width: 25px;
+    padding-top: 2px;
   }
 
   .percentage {
     font-weight: normal;
     font-display: var(--pixel-text);
     font-size: 16px;
+    color: var(--rewind-white);
+    padding-top: 0.35em;
   }
 
   .rewind-reactions-bar {
-    background: var(--tertiary-600);
-    border: 1px solid rgb(var(--primary-rgb), 0.2);
+    background: var(--rewind-white);
     height: 25px;
-    border-radius: calc(var(--rewind-border-radius) * 0.75);
+    background-size: 50px 50px;
+    border-radius: 3px;
+    background-image: linear-gradient(
+      -45deg,
+      var(--rewind-black) 12.5%,
+      var(--rewind-white) 12.5%,
+      var(--rewind-white) 50%,
+      var(--rewind-black) 50%,
+      var(--rewind-black) 62.5%,
+      var(--rewind-white) 62.5%
+    );
+    border: 4px solid var(--rewind-black);
+    box-shadow: 0 0 0 4px var(--rewind-white);
+    animation: anim 5s linear infinite;
+  }
+
+  @keyframes anim {
+    0% {
+      background-position: 0 0;
+    }
+
+    100% {
+      background-position: 25px 25px;
+    }
   }
 
   .rewind-total-reactions {
     font-size: 12px;
     font-weight: normal;
     margin-top: 1em;
-    margin-left: auto;
+    color: var(--rewind-green);
+    text-align: start;
   }
 }
diff --git a/assets/stylesheets/common/reading-time.scss b/assets/stylesheets/common/reading-time.scss
index c1b5c0b..d4316bb 100644
--- a/assets/stylesheets/common/reading-time.scss
+++ b/assets/stylesheets/common/reading-time.scss
@@ -24,7 +24,8 @@ p.reading-time__text {
 }
 
 .reading-time code {
-  background-color: rgb(var(--primary-rgb), 0.15);
+  background-color: var(--rewind-white);
+  color: var(--rewind-black);
 }
 
 .book img {
@@ -36,7 +37,8 @@ p.reading-time__text {
   transform: translateZ(17.5px);
   background-color: #01060f;
   border-radius: 0 5px 5px 0;
-  box-shadow: 5px 5px 20px rgb(var(--primary-rgb), 0.05);
+  box-shadow: 5px 5px 20px rgb(0 0 0 / 0.05);
+  image-rendering: crisp-edges;
 
   @media screen and (width <= 475px) {
     width: 100px;
@@ -103,6 +105,7 @@ p.reading-time__text {
 }
 
 .reading-time__text {
+  color: var(--rewind-white);
   font-weight: normal;
   width: 50%;
 
@@ -117,7 +120,7 @@ p.reading-time__text {
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
-  background-color: var(--secondary);
+  text-align: left;
 
   --book-color: var(--primary-very-high);
 
diff --git a/assets/stylesheets/common/report.scss b/assets/stylesheets/common/report.scss
index 036c03e..b725008 100644
--- a/assets/stylesheets/common/report.scss
+++ b/assets/stylesheets/common/report.scss
@@ -25,6 +25,16 @@
 }
 
 .rewind-report-title {
+  align-self: start;
+  padding: 0.25em 1em 0.25em;
+  margin-bottom: -2px;
+  background: #111;
+  margin-left: 0;
+  position: relative;
   font-size: var(--font-down-1);
   text-align: left;
+  border-radius: 4px 4px 0 0;
+  border-top: 2px solid var(--rewind-green);
+  border-left: 2px solid var(--rewind-green);
+  border-right: 2px solid var(--rewind-green);
 }
diff --git a/assets/stylesheets/common/rewind-callout.scss b/assets/stylesheets/common/rewind-callout.scss
index caebe07..5c5076d 100644
--- a/assets/stylesheets/common/rewind-callout.scss
+++ b/assets/stylesheets/common/rewind-callout.scss
@@ -1,37 +1,83 @@
-.rewind-callout {
-  background: var(--primary);
-  padding: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: calc(100% - 12px);
-  border-radius: var(--d-border-radius);
-  height: calc(100% - 12px);
+.quick-access-panel {
+  > ul,
+  .empty-state__container {
+    height: 100%; // flex alignment fix
+  }
+}
+
+.rewind-callout__container {
+  height: 47px;
+  border-bottom: 1px solid var(--primary-low);
+}
+
+#rewind-vhs {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.btn.rewind-callout {
+  padding: 0;
   margin: 0 auto;
-  box-shadow: 0 0 0 6px var(--primary);
-  transition: box-shadow;
-  transition-duration: 0.5s;
-  transition-timing-function: ease-in-out;
-
-  &:hover,
-  &:focus {
-    background: var(--primary) !important;
-    box-shadow:
-      0 0 0 2px rgb(var(--d-blue), 1),
-      0 0 0 4px rgb(var(--d-green), 1),
-      0 0 0 6px rgb(var(--d-orange), 1),
-      0 0 0 8px rgb(var(--d-red), 1);
-
-    @if color-scheme-is-light {
-      box-shadow:
-        0 0 0 2px rgb(var(--d-blue-dark), 1),
-        0 0 0 4px rgb(var(--d-green-dark), 1),
-        0 0 0 6px rgb(var(--d-orange-dark), 1),
-        0 0 0 8px rgb(var(--d-red-dark), 1);
+  width: 100%;
+  transition: transform 0.3s ease;
+  transform-origin: left top;
+  z-index: 2;
+
+  svg {
+    transition: box-shadow 0.3s ease;
+  }
+
+  &:hover {
+    transform: translateX(10px) translateY(10px) scale(1.05);
+
+    svg {
+      box-shadow: -10px 10px 15px rgb(0 0 0 / 0.15);
     }
   }
+}
+
+.rewind-callout {
+  position: relative;
+  display: inline-block;
+  transition: transform 200ms ease;
 
-  .rewind-logo {
-    height: 30px;
+  .btn.no-text.--special-kbd {
+    top: 0.75em;
+    right: 1em;
+    font-size: var(--font-down-3);
   }
 }
+
+.rewind-callout::before {
+  content: "";
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0    287.46 22.28"><path d="m0 0 64.78 22.28h44.53L44.54 0z" style="fill:%23d0232b"/><path d="m44.54    0 64.77 22.28h44.54L89.08 0z" style="fill:%23f15e24"/><path d="m89.08 0 64.77    22.28h44.54L133.61 0z" style="fill:%23fdf6b0"/><path d="m133.61 0 64.78 22.28h44.54L178.15 0z"    style="fill:%230ea94e"/><path d="m178.15 0 64.78 22.28h44.53L222.69 0z"    style="fill:%232bace2"/></svg>');
+  background-repeat: no-repeat;
+  background-position: 47% 100%;
+  background-size: 139px;
+  background-blend-mode: multiply;
+  position: absolute;
+  left: -48px;
+  top: -15px;
+  z-index: -1;
+  width: 100%;
+  height: 16px;
+  background-color: #d4d1bc;
+  transform: skew(72deg, 0deg);
+  transform-origin: 50% 0% 0;
+  transition:
+    transform 200ms ease,
+    width 200ms ease;
+}
+
+.rewind-callout::after {
+  content: "";
+  position: absolute;
+  left: -10px;
+  top: -5px;
+  z-index: -1;
+  width: 10px;
+  height: calc(100% - 3px);
+  background-color: #e8e5d0;
+  transform: skew(0deg, 41deg) scale3d(1, 1, 1);
+}
diff --git a/assets/stylesheets/common/rewind-header.scss b/assets/stylesheets/common/rewind-header.scss
index 7e9fc1f..995b6ad 100644
--- a/assets/stylesheets/common/rewind-header.scss
+++ b/assets/stylesheets/common/rewind-header.scss
@@ -32,10 +32,14 @@
 
 .rewind__header {
   padding: 1em 0 1em 1em;
-  background-color: var(--primary);
-  position: sticky;
+  background-color: #fbf8e4;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0    168.7 52.42"><path d="m0 0 49.67 52.42h23.8L23.81 0z" style="fill:%23d0222b"/><path d="m23.81 0    49.66 52.42h23.81L47.62 0z" style="fill:%23f15f25"/><path d="m47.62 0 49.66 52.42h23.81L71.42    0z" style="fill:%23fcf6b2"/><path d="m71.42 0 49.67 52.42h23.8L95.23 0z"    style="fill:%2310a94d"/><path d="m95.23 0 49.66 52.42h23.81L119.04 0z"    style="fill:%2329abe2"/></svg>');
+  background-repeat: no-repeat;
+  background-position: 150px;
   top: 0;
-  z-index: 1;
+  position: sticky;
+  z-index: 3;
+  color: var(--rewind-black);
 
   .rewind-logo {
     margin-bottom: 5px;
@@ -46,6 +50,30 @@
     text-transform: uppercase;
     font-size: var(--font-up-1);
   }
+
+  &-logo {
+    display: grid;
+    grid-template-areas: "logo rewind" "logo year";
+    width: 7em;
+
+    svg {
+      grid-area: logo;
+      width: 2.5em;
+      height: 2.5em;
+    }
+  }
+
+  &-title {
+    grid-area: rewind;
+    line-height: 1;
+    transform: skewX(15deg);
+  }
+
+  &-year {
+    line-height: 1;
+    font-weight: bold;
+    font-size: 1.5em;
+  }
 }
 
 .rewind-notification-active #toggle-current-user::after {
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index b617ac2..4bdb695 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -5,7 +5,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2em;
 
   h1,
   h2 {
@@ -23,6 +22,11 @@
     position: fixed;
     background: rgb(var(--secondary-rgb), 0.5);
     backdrop-filter: blur(4.9px);
+    padding: 2em;
+
+    .rewind {
+      max-width: 1020px;
+    }
 
     @media (width <= 768px) {
       padding: 0;
@@ -34,52 +38,109 @@
   width: 100vw;
   height: 100vh;
   max-height: 100%;
-  max-width: 960px;
-  border: 1px solid var(--primary);
-  border-radius: var(--rewind-border-radius);
+  border-radius: 30px;
   container-type: size;
   position: relative;
   overflow: hidden;
-  background: var(--secondary);
 
   @media (width <= 768px) {
     border: none;
     border-radius: 0;
   }
+
+  &::before,
+  &::after {
+    display: block;
+    pointer-events: none;
+    content: "";
+    position: absolute;
+  }
+
+  &::before {
+    width: 100%;
+    height: 2px;
+    z-index: 3;
+    background: rgb(0 0 0 / 0.3);
+    opacity: 0.75;
+    animation: scanline 6s linear infinite;
+  }
+
+  &::after {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    background: linear-gradient(
+      to bottom,
+      transparent 50%,
+      rgb(0 0 0 / 0.1) 51%
+    );
+    background-size: 100% 4px;
+    animation: scanlines 1s steps(60) infinite;
+  }
 }
 
-.background-1 {
-  background: absolute-image-url(
-    "/plugins/discourse-rewind/images/blur-bg.png"
-  );
-  background-size: contain;
-  position: absolute;
-  transform: translateY(0);
-  width: 100%;
-  height: 1000%;
-  opacity: 0.45;
+@keyframes scanline {
+  0% {
+    transform: translate3d(0, 200000%, 0);
+  }
+}
 
-  @if is-dark-color-scheme() {
-    opacity: 0.15;
+@keyframes scanlines {
+  0% {
+    background-position: 0 50%;
   }
 }
 
 .rewind__scroll-wrapper {
   overflow-y: auto;
   overflow-x: hidden;
+  background: var(--rewind-black);
   height: 100%;
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   padding-bottom: var(--safe-area-inset-bottom);
+  padding-top: 2em;
 }
 
-.rewind__exit-fullscreen-btn {
+// specific to override core
+.btn.no-text.--special-kbd {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 2;
+  top: 15px;
+  right: 24px;
+  background-color: #ede9d4;
+  border-color: #d7d1b0 #c5bfa0 #d7d1b0 #c5bfa0;
+  border-width: 1px 5px 7px 4px;
+  box-shadow: -1px 1px 0 1px #c0b99b;
+  z-index: 3;
+  border-radius: 6px;
+  transition:
+    transform 0.1s ease,
+    box-shadow 0.1s ease;
+  transform: skew(3deg);
+  font-size: var(--font-down-1);
+
+  .d-icon {
+    color: #333;
+  }
+
+  .discourse-no-touch & {
+    &:hover {
+      filter: brightness(0.95);
+
+      .d-icon {
+        color: var(--rewind-grey);
+      }
+    }
+
+    &:active {
+      box-shadow: none;
+      transform: skew(3deg) translateX(-1px) translateY(1px);
+    }
+  }
 }
 
 .rewind__prev-btn {
@@ -104,9 +165,16 @@
   height: 100cqh;
   gap: 1em;
   box-sizing: border-box;
+  background: var(--rewind-black);
 
   &__text {
     font-weight: 700;
     font-size: var(--font-up-2);
+    color: var(--rewind-green);
+  }
+
+  .spinner {
+    border-color: var(--rewind-white);
+    border-right-color: transparent;
   }
 }
diff --git a/assets/stylesheets/common/top-words.scss b/assets/stylesheets/common/top-words.scss
index 337ffe1..4f63233 100644
--- a/assets/stylesheets/common/top-words.scss
+++ b/assets/stylesheets/common/top-words.scss
@@ -3,6 +3,16 @@
   background-color: transparent;
   width: 100%;
   flex-direction: column;
+  margin-bottom: 1em;
+
+  .rewind-report-title {
+    box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+    margin-left: 0;
+    border: none !important;
+    margin-bottom: 1em;
+  }
 }
 
 .cards-container {
@@ -75,6 +85,36 @@
     height: 125px;
   }
 
+  &:nth-child(1) {
+    .-front {
+      background-image: url("/plugins/discourse-rewind/images/cards/01-robot.gif");
+    }
+  }
+
+  &:nth-child(2) {
+    .-front {
+      background-image: url("/plugins/discourse-rewind/images/cards/07-beach.gif");
+    }
+  }
+
+  &:nth-child(3) {
+    .-front {
+      background-image: url("/plugins/discourse-rewind/images/cards/02-castle.gif");
+    }
+  }
+
+  &:nth-child(4) {
+    .-front {
+      background-image: url("/plugins/discourse-rewind/images/cards/06-nature.gif");
+    }
+  }
+
+  &:nth-child(5) {
+    .-front {
+      background-image: url("/plugins/discourse-rewind/images/cards/04-hand.gif");
+    }
+  }
+
   .rewind-card {
     box-shadow: 0 0 0 4px rgb(var(--mystery-color-light), 1);
     border: none;
@@ -126,6 +166,7 @@
 
   .rewind-card.-back {
     transform: rotateY(180deg);
+    background-color: var(--rewind-white);
   }
 
   .rewind-card.-front,
@@ -137,24 +178,8 @@
   }
 
   .rewind-card.-front {
+    background-size: cover;
     padding: 0.5em;
-    display: grid;
-    grid-template:
-      "tl .  . " 1fr
-      ".  .  . " 1fr
-      ".  cr . " 3fr
-      ".  .  . " 1fr
-      ".  .  br" 1fr
-      / 1fr 3fr 1fr;
-    background:
-      radial-gradient(
-          circle at 4px 4px,
-          var(--primary-100) 1px,
-          var(--secondary) 1px,
-          var(--secondary) 6px
-        )
-        0 0 / 6px 6px,
-      var(--secondary-low);
   }
 
   &.-long-word .rewind-card__title {
diff --git a/assets/stylesheets/common/variables.scss b/assets/stylesheets/common/variables.scss
index 7cf13a7..e17bfd8 100644
--- a/assets/stylesheets/common/variables.scss
+++ b/assets/stylesheets/common/variables.scss
@@ -10,14 +10,18 @@
   --d-orange-dark: 188, 105, 65;
   --d-red-dark: 183, 64, 70;
   --rewind-border-radius: 4px;
+  --rewind-green: #0f0;
+  --rewind-blue: #00f;
+  --rewind-black: #111;
+  --rewind-white: #fff;
+  --rewind-magenta: #f0f;
+  --rewind-grey: #555;
+  --rewind-light-grey: #aaa;
+  --rewind-yellow: rgb(237, 237, 84);
+  --rewind-beige: #fbf8e4;
 }
 
 @mixin rewind-border() {
-  border: 2px solid var(--primary);
+  border: 2px solid var(--rewind-green);
   border-radius: var(--rewind-border-radius);
-  box-shadow: 4px 4px 0 0 rgb(var(--primary-rgb), 0.25);
-
-  @if is-dark-color-scheme() {
-    box-shadow: 0 4px 5px -2px rgb(var(--secondary-rgb), 0.5);
-  }
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 44abf56..975ba8c 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -8,6 +8,8 @@ en:
     discourse_rewind:
       placeholder: Discourse Rewind
       title: Rewind
+      year: "2025"
+      loading: "Reticulating splines..."
       reports:
         activity_calendar:
           title: Activity Calendar
diff --git a/plugin.rb b/plugin.rb
index 1143126..7ea956b 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -27,6 +27,8 @@ def self.public_asset_path(name)
 
 after_initialize do
   add_to_serializer(:current_user, :is_rewind_active) do
-    Date.today.month == 1 || Date.today.month == 12
+    Rails.env.development? || Date.today.month == 1 || Date.today.month == 12
   end
+
+  add_to_serializer(:current_user, :is_development_env) { Rails.env.development? }
 end
diff --git a/public/images/blur-bg.png b/public/images/blur-bg.png
deleted file mode 100644
index 083cc0e..0000000
Binary files a/public/images/blur-bg.png and /dev/null differ
diff --git a/public/images/cards/01-robot.gif b/public/images/cards/01-robot.gif
new file mode 100644
index 0000000..afff05f
Binary files /dev/null and b/public/images/cards/01-robot.gif differ
diff --git a/public/images/cards/02-castle.gif b/public/images/cards/02-castle.gif
new file mode 100644
index 0000000..9ab26fa
Binary files /dev/null and b/public/images/cards/02-castle.gif differ
diff --git a/public/images/cards/04-hand.gif b/public/images/cards/04-hand.gif
new file mode 100644
index 0000000..81225c9
Binary files /dev/null and b/public/images/cards/04-hand.gif differ
diff --git a/public/images/cards/06-nature.gif b/public/images/cards/06-nature.gif
new file mode 100644
index 0000000..fc50ace
Binary files /dev/null and b/public/images/cards/06-nature.gif differ
diff --git a/public/images/cards/07-beach.gif b/public/images/cards/07-beach.gif
new file mode 100644
index 0000000..88c158e
Binary files /dev/null and b/public/images/cards/07-beach.gif differ
diff --git a/public/images/discourse-rewind-logo-dark.png b/public/images/discourse-rewind-logo-dark.png
deleted file mode 100644
index a953dc2..0000000
Binary files a/public/images/discourse-rewind-logo-dark.png and /dev/null differ
diff --git a/public/images/discourse-rewind-logo.png b/public/images/discourse-rewind-logo.png
deleted file mode 100644
index 97fce2e..0000000
Binary files a/public/images/discourse-rewind-logo.png and /dev/null differ
diff --git a/public/images/pixel-discourse-rewind.png b/public/images/pixel-discourse-rewind.png
deleted file mode 100644
index fe0743e..0000000
Binary files a/public/images/pixel-discourse-rewind.png and /dev/null differ
diff --git a/spec/services/fetch_reports_spec.rb b/spec/services/fetch_reports_spec.rb
index 10f4ef1..edaeba0 100644
--- a/spec/services/fetch_reports_spec.rb
+++ b/spec/services/fetch_reports_spec.rb
@@ -35,10 +35,11 @@
       before { freeze_time DateTime.parse("2021-12-22") }
 
       it "returns the cached reports" do
-        expect(result.reports.length).to eq(16)
+        initial_count = result.reports.length
+        expect(initial_count).to be > 0
 
         allow(DiscourseRewind::Action::TopWords).to receive(:call)
-        expect(result.reports.length).to eq(16)
+        expect(result.reports.length).to eq(initial_count)
         expect(DiscourseRewind::Action::TopWords).to_not have_received(:call)
       end
     end
@@ -51,7 +52,7 @@
 
       it "returns the reports" do
         allow(DiscourseRewind::Action::TopWords).to receive(:call)
-        expect(result.reports.length).to eq(16)
+        expect(result.reports.length).to be > 0
         expect(DiscourseRewind::Action::TopWords).to have_received(:call)
       end
     end