styling:

app/services/discourse_rewind/rewind/action/best_posts.rb

@@ -11,7 +11,7 @@ module DiscourseRewind
           .where("post_number > 1")
           .order("like_count DESC NULLS LAST")
           .limit(3)
-          .pluck(:id, :topic_id, :like_count, :reply_count, :raw, :cooked)
+          .pluck(:post_number, :topic_id, :like_count, :reply_count, :raw, :cooked)
 
       { data: best_posts, identifier: "best-posts" }
     end

assets/javascripts/discourse/components/reports/activity-calendar.gjs

@@ -38,7 +38,7 @@ export default class ActivityCalendar extends Component {
   <template>
     <div class="rewind-report-page -activity-calendar">
       <div class="rewind-card">
-        <h3 class="rewind-report-title">Activity Calendar</h3>
+        <h2 class="rewind-report-title">Activity Calendar</h2>
         <table class="rewind-calendar">
           <thead>
             <tr>

assets/javascripts/discourse/components/reports/best-posts.gjs

@@ -1,19 +1,25 @@
 import Component from "@glimmer/component";
 import { get } from "@ember/object";
 import { htmlSafe } from "@ember/template";
+import dIcon from "discourse-common/helpers/d-icon";
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class BestPosts extends Component {
   <template>
     <div class="rewind-report-page -best-posts">
-      <h3 class="rewind-report-title">Your 3 best posts</h3>
+      <h2 class="rewind-report-title">Your 3 best posts</h2>
       <div class="rewind-report-container">
+        {{log @report.data}}
         {{#each @report.data as |post|}}
           <div class="rewind-card">
             <div class="best-posts__post">{{htmlSafe (get post "5")}}</div>
-            <span class="best-posts__likes">Likes:
+            <div class="best-posts__metadata">
-              {{htmlSafe (get post "2")}}</span>
+              <span class="best-posts__likes">
-            <span class="best-posts__replies">Replies:
+                {{dIcon "heart"}}{{htmlSafe (get post "2")}}</span>
-              {{htmlSafe (get post "3")}}</span>
+              <span class="best-posts__replies">
+                {{dIcon "comment"}}{{htmlSafe (get post "3")}}</span>
+              <a href="/t/{{get post '1'}}/{{get post '0'}}">View post</a>
+            </div>
           </div>
         {{/each}}
       </div>

assets/javascripts/discourse/components/reports/best-topics.gjs

@@ -1,12 +1,13 @@
 import Component from "@glimmer/component";
 import { concat } from "@ember/helper";
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class BestTopics extends Component {
   <template>
     <div class="rewind-report-page -best-topics">
-      <h3 class="rewind-report-title">Your 3 best topics</h3>
+      <h2 class="rewind-report-title">Your 3 best topics</h2>
       <div class="rewind-report-container">
-        {{log @report.data}}
+        {{!-- {{log @report.data}} --}}
         {{#each @report.data as |topic|}}
           <div class="rewind-card">
             <a

assets/javascripts/discourse/components/reports/favorite-categories.gjs

@@ -4,7 +4,7 @@ import { concat } from "@ember/helper";
 export default class FavoriteCategories extends Component {
   <template>
     <div class="rewind-report-page -favorite-categories">
-      <h3 class="rewind-report-title">Your favorite categories</h3>
+      <h2 class="rewind-report-title">Your favorite categories</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
           <div class="rewind-card">

assets/javascripts/discourse/components/reports/favorite-tags.gjs

@@ -4,7 +4,7 @@ import { concat } from "@ember/helper";
 export default class FavoriteTags extends Component {
   <template>
     <div class="rewind-report-page -favorite-tags">
-      <h3 class="rewind-report-title">Your favorite tags</h3>
+      <h2 class="rewind-report-title">Your favorite tags</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
           <div class="rewind-card">

assets/javascripts/discourse/components/reports/reactions.gjs

@@ -32,7 +32,7 @@ export default class Reactions extends Component {
 
   <template>
     <div class="rewind-report-page -post-received-reactions">
-      <h3 class="rewind-report-title">Most received reactions in topics</h3>
+      <h2 class="rewind-report-title">Most received reactions in topics</h2>
       <div class="rewind-report-container">
         {{#each-in @report.data.post_received_reactions as |emojiName count|}}
           <div
@@ -53,7 +53,7 @@ export default class Reactions extends Component {
 
     <div class="rewind-report-page -post-used-reactions">
       <div class="rewind-card">
-        <h3 class="rewind-report-title">Most used reactions in topics</h3>
+        <h2 class="rewind-report-title">Most used reactions in topics</h2>
         <div class="rewind-reactions-chart">
           {{#each-in @report.data.post_used_reactions as |emojiName count|}}
             <div class="rewind-reactions-row">

assets/javascripts/discourse/components/reports/word-cloud.gjs

@@ -7,7 +7,7 @@ export default class WordCloud extends Component {
 
   <template>
     <div class="rewind-report-page -word-cloud">
-      <h3 class="rewind-report-title">Most used words</h3>
+      <h2 class="rewind-report-title">Most used words</h2>
       <div class="rewind-report-container">
         {{#each-in @report.data as |word count|}}
           <div class="rewind-card__wrapper" style={{this.randomStyle}}>

assets/stylesheets/common/best-posts.scss

@@ -3,4 +3,35 @@
     flex-direction: column;
     gap: 1em;
   }
+  .rewind-card {
+    max-width: 700px;
+    text-align: left;
+    align-items: unset;
+  }
+  .best-posts__post {
+    font-weight: normal;
+    font-size: 16px;
+    width: 100%;
+    text-align: left;
+  }
+  .best-posts__metadata {
+    font-weight: normal;
+    font-size: 12px;
+    display: flex;
+    gap: 10px;
+    color: var(--primary-700);
+    align-items: center;
+  }
+  .best-posts__likes,
+  .best-posts__replies {
+    border: 1px solid var(--primary-200);
+    padding: 3px 8px;
+    border-radius: 5px;
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    svg {
+      color: var(--primary-700);
+    }
+  }
 }

assets/stylesheets/common/card.scss

@@ -71,8 +71,9 @@ body {
 
 .rewind-card {
   background-color: var(--secondary);
-  box-shadow: 0 0 0 1px var(--primary-300), 0 0 0 3px var(--primary-100);
+  border: 1px solid var(--primary-300);
   border-radius: var(--d-border-radius);
+  background-size: cover;
   display: flex;
   flex-direction: column;
   text-align: center;

assets/stylesheets/common/fonts.scss

@@ -10,10 +10,12 @@
   h4,
   h5 {
     font-family: var(--heading-font);
+    -webkit-font-smoothing: antialiased;
   }
 
   p,
   span {
     font-family: var(--regular-font);
+    -webkit-font-smoothing: antialiased;
   }
 }

assets/stylesheets/common/report.scss

@@ -19,6 +19,7 @@
 
 .rewind-report-container {
   display: flex;
+  max-width: 100%;
 }
 
 .rewind-report-title {

assets/stylesheets/common/rewind.scss

@@ -70,7 +70,7 @@
 
 .rewind__exit-fullscreen-btn {
   position: absolute;
-  top: 5px;
+  top: 20px;
   right: 20px;
   z-index: 1;
 }