diff --git a/app/services/discourse_rewind/rewind/action/reactions.rb b/app/services/discourse_rewind/rewind/action/reactions.rb
index e154661..b94b4bb 100644
--- a/app/services/discourse_rewind/rewind/action/reactions.rb
+++ b/app/services/discourse_rewind/rewind/action/reactions.rb
@@ -4,52 +4,41 @@
 module DiscourseRewind
   class Rewind::Action::Reactions < Rewind::Action::BaseReport
     def call
-      post_used_reactions = {}
-      post_received_reactions = {}
-      chat_used_reactions = {}
-      chat_received_reactions = {}
+      data = {}
 
       if defined?(DiscourseReactions::Reaction)
         # This is missing heart reactions (default like)
-        post_used_reactions =
-          DiscourseReactions::Reaction
-            .by_user(user)
-            .where(created_at: date)
-            .group(:reaction_value)
-            .count
+        data[:post_used_reactions] = DiscourseReactions::Reaction
+          .by_user(user)
+          .where(created_at: date)
+          .group(:reaction_value)
+          .count
 
-        post_received_reactions =
-          DiscourseReactions::Reaction
-            .includes(:post)
-            .where(posts: { user_id: user.id })
-            .where(created_at: date)
-            .group(:reaction_value)
-            .limit(5)
-            .count
+        data[:post_received_reactions] = DiscourseReactions::Reaction
+          .includes(:post)
+          .where(posts: { user_id: user.id })
+          .where(created_at: date)
+          .group(:reaction_value)
+          .limit(5)
+          .count
       end
 
       if SiteSetting.chat_enabled
-        chat_used_reactions =
-          Chat::MessageReaction.where(user: user).where(created_at: date).group(:emoji).count
+        data[:chat_used_reactions] = Chat::MessageReaction
+          .where(user: user)
+          .where(created_at: date)
+          .group(:emoji)
+          .count
 
-        chat_received_reactions =
-          Chat::MessageReaction
-            .includes(:chat_message)
-            .where(chat_message: { user_id: user.id })
-            .where(created_at: date)
-            .group(:emoji)
-            .count
+        data[:chat_received_reactions] = Chat::MessageReaction
+          .includes(:chat_message)
+          .where(chat_message: { user_id: user.id })
+          .where(created_at: date)
+          .group(:emoji)
+          .count
       end
 
-      {
-        data: {
-          post_used_reactions: sort_and_limit(post_used_reactions),
-          post_received_reactions: sort_and_limit(post_received_reactions),
-          chat_used_reactions: sort_and_limit(chat_used_reactions),
-          chat_received_reactions: sort_and_limit(chat_received_reactions),
-        },
-        identifier: "reactions",
-      }
+      { data:, identifier: "reactions" }
     end
 
     def enabled?
diff --git a/assets/javascripts/discourse/components/reports/activity-calendar.gjs b/assets/javascripts/discourse/components/reports/activity-calendar.gjs
index 993ae5a..0deed08 100644
--- a/assets/javascripts/discourse/components/reports/activity-calendar.gjs
+++ b/assets/javascripts/discourse/components/reports/activity-calendar.gjs
@@ -41,7 +41,7 @@ export default class ActivityCalendar extends Component {
   <template>
     <div class="rewind-report-page -activity-calendar">
       <div class="rewind-card">
-        <h3>Activity Calendar</h3>
+        <h3 class="rewind-report-title">Activity Calendar</h3>
         <table class="rewind-calendar">
           <thead>
             <tr>
diff --git a/assets/javascripts/discourse/components/reports/introduction.gjs b/assets/javascripts/discourse/components/reports/introduction.gjs
new file mode 100644
index 0000000..deaf5ca
--- /dev/null
+++ b/assets/javascripts/discourse/components/reports/introduction.gjs
@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+
+export default class Rewind extends Component {
+  @service siteSettings;
+
+  <template>
+    <div class="rewind-report-page">
+      <h1>{{this.siteSettings.title}} 2024 rewind</h1>
+    </div>
+  </template>
+}
diff --git a/assets/javascripts/discourse/components/reports/reactions.gjs b/assets/javascripts/discourse/components/reports/reactions.gjs
index 329e823..f5f3951 100644
--- a/assets/javascripts/discourse/components/reports/reactions.gjs
+++ b/assets/javascripts/discourse/components/reports/reactions.gjs
@@ -28,18 +28,21 @@ export default class Reactions extends Component {
 
   <template>
     <div class="rewind-report-page -post-received-reactions">
-      {{#each-in @report.data.post_received_reactions as |emojiName count|}}
-        <div class="rewind-card">
-          <span>{{replaceEmoji (concat ":" emojiName ":")}}</span>
-          <span>{{this.cleanEmoji emojiName}}</span>
-          <span>{{count}} times</span>
-        </div>
-      {{/each-in}}
+      <h3 class="rewind-report-title">Most received reactions in topics</h3>
+      <div class="rewind-report-container">
+        {{#each-in @report.data.post_received_reactions as |emojiName count|}}
+          <div class="rewind-card scale">
+            <span>{{replaceEmoji (concat ":" emojiName ":")}}</span>
+            <span>{{this.cleanEmoji emojiName}}</span>
+            <span>{{count}} times</span>
+          </div>
+        {{/each-in}}
+      </div>
     </div>
 
     <div class="rewind-report-page -post-used-reactions">
       <div class="rewind-card">
-        <h3>Most used reactions in topics</h3>
+        <h3 class="rewind-report-title">Most used reactions in topics</h3>
         <div class="rewind-reactions-chart">
           {{#each-in @report.data.post_used_reactions as |emojiName count|}}
             <div class="rewind-reactions-row">
@@ -50,13 +53,15 @@ export default class Reactions extends Component {
               <div
                 class="rewind-reactions-bar"
                 style={{this.computePercentageStyle count}}
+                title={{count}}
               ></div>
             </div>
           {{/each-in}}
 
-          <span class="rewind-total-reactions">Percentage of total number of
-            reactions:
-            {{this.totalPostUsedReactions}}</span>
+          <span class="rewind-total-reactions">
+            Total number of reactions:
+            {{this.totalPostUsedReactions}}
+          </span>
         </div>
       </div>
     </div>
diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs
index 665b7d8..693323b 100644
--- a/assets/javascripts/discourse/components/rewind.gjs
+++ b/assets/javascripts/discourse/components/rewind.gjs
@@ -4,6 +4,7 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { schedule } from "@ember/runloop";
+import { service } from "@ember/service";
 import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
@@ -15,11 +16,14 @@ import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/
 import FavoriteCategories from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-categories";
 import FavoriteTags from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-tags";
 import FBFF from "discourse/plugins/discourse-rewind/discourse/components/reports/fbff";
+import Introduction from "discourse/plugins/discourse-rewind/discourse/components/reports/introduction";
 import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
 import ReadingTime from "discourse/plugins/discourse-rewind/discourse/components/reports/reading-time";
 import WordCloud from "discourse/plugins/discourse-rewind/discourse/components/reports/word-cloud";
 
 export default class Rewind extends Component {
+  @service siteSettings;
+
   @tracked rewind = [];
 
   @tracked fullScreen = true;
@@ -64,6 +68,7 @@ export default class Rewind extends Component {
       {{on "keydown" this.handleEscape}}
       tabindex="0"
     >
+
       <div class="rewind">
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
@@ -71,6 +76,24 @@ export default class Rewind extends Component {
             <div class="rewind-loader__text">Crunching your data...</div>
           </div>
         {{else}}
+
+          <img
+            src="/plugins/discourse-rewind/images/blue_blob.svg"
+            class="blob_1"
+          />
+          <img
+            src="/plugins/discourse-rewind/images/yellow_blob.svg"
+            class="blob_2"
+          />
+          <img
+            src="/plugins/discourse-rewind/images/red_blob.svg"
+            class="blob_3"
+          />
+          <img
+            src="/plugins/discourse-rewind/images/discourse_blob_1.svg"
+            class="blob_4"
+          />
+
           <DButton
             class="rewind__exit-fullscreen-btn"
             @icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
@@ -81,9 +104,12 @@ export default class Rewind extends Component {
             class="rewind__scroll-wrapper"
             {{didInsert this.registerScrollWrapper}}
           >
+            <div class="rewind-report">
+              <Introduction />
+            </div>
+
             {{#each this.rewind as |report|}}
-              {{log report.identifier}}
-              <div class="rewind-report">
+              <div class={{concatClass "rewind-report" report.identifier}}>
                 {{#if (eq report.identifier "reactions")}}
                   <Reactions @report={{report}} />
                 {{else if (eq report.identifier "activity-calendar")}}
diff --git a/assets/stylesheets/common/blobs.scss b/assets/stylesheets/common/blobs.scss
new file mode 100644
index 0000000..f3f57e7
--- /dev/null
+++ b/assets/stylesheets/common/blobs.scss
@@ -0,0 +1,28 @@
+.blob_1 {
+  position: absolute;
+  top: 5px;
+  left: -50px;
+  width: 200px;
+}
+
+.blob_2 {
+  position: absolute;
+  top: 200px;
+  right: -50px;
+  width: 200px;
+  rotate: 180deg;
+}
+
+.blob_3 {
+  position: absolute;
+  top: 500px;
+  left: 500px;
+  width: 200px;
+}
+
+.blob_4 {
+  position: absolute;
+  top: 805px;
+  left: -50px;
+  width: 200px;
+}
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 6751925..0baa675 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -8,4 +8,5 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
+  background: var(--secondary);
 }
diff --git a/assets/stylesheets/common/index.scss b/assets/stylesheets/common/index.scss
index da9a1c2..41cfe7f 100644
--- a/assets/stylesheets/common/index.scss
+++ b/assets/stylesheets/common/index.scss
@@ -4,8 +4,4 @@
 @import "post-received-reactions";
 @import "post-used-reactions";
 @import "activity-calendar";
-
-.rewind h3 {
-  font-size: var(--font-down-1);
-  text-align: left;
-}
+@import "blobs";
diff --git a/assets/stylesheets/common/post-received-reactions.scss b/assets/stylesheets/common/post-received-reactions.scss
index bf6b60f..022af0a 100644
--- a/assets/stylesheets/common/post-received-reactions.scss
+++ b/assets/stylesheets/common/post-received-reactions.scss
@@ -1,16 +1,32 @@
-.rewind-report-page.-post-received-reactions {
-  .rewind-reactions-chart {
-    display: flex;
-    gap: 1em;
-  }
-
+.-post-received-reactions {
   .rewind-card {
     width: 177px;
     height: 190px;
+    background: var(--secondary);
 
     .emoji {
       width: 72px;
       height: 72px;
     }
   }
+
+  .scale:nth-child(1) {
+    scale: 0.6;
+  }
+  .scale:nth-child(2) {
+    scale: 0.7;
+    margin-left: -70px;
+  }
+  .scale:nth-child(3) {
+    scale: 0.8;
+    margin-left: -50px;
+  }
+  .scale:nth-child(4) {
+    scale: 0.9;
+    margin-left: -30px;
+  }
+  .scale:nth-child(5) {
+    scale: 1;
+    margin-left: -10px;
+  }
 }
diff --git a/assets/stylesheets/common/post-used-reactions.scss b/assets/stylesheets/common/post-used-reactions.scss
index e9321c3..1c4c3b2 100644
--- a/assets/stylesheets/common/post-used-reactions.scss
+++ b/assets/stylesheets/common/post-used-reactions.scss
@@ -1,10 +1,6 @@
-.rewind-report-page.-post-used-reactions {
-  display: flex;
-  gap: 1em;
-  width: 50%;
-
+.-post-used-reactions {
   .rewind-card {
-    width: 100%;
+    width: 50%;
   }
 
   .rewind-reactions-chart {
diff --git a/assets/stylesheets/common/report.scss b/assets/stylesheets/common/report.scss
index 38f1ffd..825d6d9 100644
--- a/assets/stylesheets/common/report.scss
+++ b/assets/stylesheets/common/report.scss
@@ -1,6 +1,3 @@
-.rewind-report {
-}
-
 .rewind-report-page {
   display: flex;
   align-items: center;
@@ -9,4 +6,22 @@
   box-sizing: border-box;
   font-weight: 700;
   font-size: var(--font-up-2);
+  width: 100%;
+  gap: 1em;
+  flex-direction: column;
+}
+
+.rewind-report {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+}
+
+.rewind-report-container {
+  display: flex;
+}
+
+.rewind-report-title {
+  font-size: var(--font-down-1);
+  text-align: left;
 }
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index 1f5e845..68cf44b 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2em 4em;
+  padding: 2em;
 
   &.-fullscreen {
     top: 0;
@@ -17,7 +17,6 @@
     height: 100vh;
     position: fixed;
     background: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(4.9px);
     -webkit-backdrop-filter: blur(4.9px);
   }
@@ -29,10 +28,12 @@
   max-height: 100%;
   max-width: 100%;
   background-color: var(--secondary);
-  box-shadow: 0 0 0 1px var(--primary-300), 0 0 0 4px var(--primary-100);
+  border: 1px solid var(--primary-300);
   border-radius: calc(var(--d-border-radius) / 2);
   container-type: size;
   position: relative;
+  overflow: hidden;
+  max-width: 960px;
 }
 
 .rewind__scroll-wrapper {
@@ -41,6 +42,9 @@
   height: 100%;
   width: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
 }
 
 .rewind__exit-fullscreen-btn {
diff --git a/public/images/blue_blob.svg b/public/images/blue_blob.svg
new file mode 100644
index 0000000..6dae9e6
--- /dev/null
+++ b/public/images/blue_blob.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1210 610 140 130" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1283.24 614.914C1316.55 616.934 1344.6 650.011 1342.58 683.318C1340.56 716.624 1314.47 738.03 1281.16 736.01C1247.85 733.99 1218.41 709.181 1221.97 676.003C1225.38 644.136 1249.93 612.894 1283.24 614.914Z" fill="#28ABE2"/>
+</svg>
diff --git a/public/images/discourse_blob_1.svg b/public/images/discourse_blob_1.svg
new file mode 100644
index 0000000..86ec00f
--- /dev/null
+++ b/public/images/discourse_blob_1.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1270 290 30 40" fill="none">
+<path d="M1282.88 303.406C1282.55 303.406 1282.22 303.433 1281.88 303.487C1278.11 304.091 1274.7 307.828 1275.53 313.038C1276.36 318.248 1281.23 321.188 1285.04 320.581C1286.85 320.289 1288.21 319.345 1289.08 317.767C1290.02 316.058 1290.31 313.679 1289.89 311.073C1289.48 308.513 1288.41 306.349 1286.86 304.973C1285.7 303.939 1284.34 303.406 1282.88 303.406ZM1283.93 326.071C1277.36 326.071 1271.31 320.883 1270.19 313.893C1268.97 306.233 1273.73 299.317 1281.03 298.148C1284.47 297.6 1287.82 298.588 1290.45 300.934C1292.93 303.135 1294.62 306.434 1295.23 310.216C1295.84 314.062 1295.35 317.574 1293.81 320.372C1292.15 323.4 1289.34 325.367 1285.89 325.916C1285.24 326.022 1284.58 326.071 1283.93 326.071Z" fill="black"/>
+</svg>
diff --git a/public/images/discourse_blob_2.svg b/public/images/discourse_blob_2.svg
new file mode 100644
index 0000000..b5eeceb
--- /dev/null
+++ b/public/images/discourse_blob_2.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="190 330 40 40" fill="none">
+<path d="M211.877 344.406C211.549 344.406 211.216 344.433 210.882 344.487C207.106 345.091 203.697 348.828 204.531 354.038C205.363 359.248 210.226 362.188 214.04 361.581C215.852 361.289 217.21 360.345 218.077 358.767C219.019 357.058 219.308 354.679 218.893 352.073C218.481 349.513 217.408 347.349 215.86 345.973C214.698 344.939 213.335 344.406 211.877 344.406ZM212.933 367.071C206.364 367.071 200.309 361.883 199.192 354.893C197.967 347.233 202.727 340.317 210.027 339.148C213.473 338.6 216.817 339.588 219.452 341.934C221.926 344.135 223.623 347.434 224.229 351.216C224.845 355.062 224.355 358.574 222.814 361.372C221.148 364.4 218.337 366.367 214.891 366.916C214.236 367.022 213.584 367.071 212.933 367.071Z" fill="black"/>
+</svg>
diff --git a/public/images/large-yellow-blob.svg b/public/images/large-yellow-blob.svg
new file mode 100644
index 0000000..95762dc
--- /dev/null
+++ b/public/images/large-yellow-blob.svg
@@ -0,0 +1,3 @@
+<svg width="960" height="320" viewBox="0 0 960 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M960 116.354C960 203.4 663 319.384 459 319.385C255 319.385 0 280.065 0 193.029C0 105.983 133.31 -27.7899 434.155 5.60498C735 38.9999 960 29.3086 960 116.354Z" fill="#FBF5AF"/>
+</svg>
diff --git a/public/images/orange_blob.svg b/public/images/orange_blob.svg
new file mode 100644
index 0000000..952bdb2
--- /dev/null
+++ b/public/images/orange_blob.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M224.036 82.9766C224.036 105.821 196.974 129.299 175.822 129.299C154.671 129.299 131 109.736 131 86.8915C131 64.0469 160.478 36.0002 181.629 36.0002C202.781 36.0002 224.036 60.132 224.036 82.9766Z" fill="#F0794A"/>
+</svg>
diff --git a/public/images/red_blob.svg b/public/images/red_blob.svg
new file mode 100644
index 0000000..3ff0f39
--- /dev/null
+++ b/public/images/red_blob.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 170 50 50" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3373 213.134C32.5994 206.47 33.0421 197.279 38.463 186.324C42.9735 177.209 56.221 177.09 64.6731 180.156C74.1634 183.601 73.8346 197.973 63.8052 211.816C57.8382 220.051 46.5675 220.286 39.3373 213.134Z" fill="#E84A51"/>
+</svg>
diff --git a/public/images/wave-orange.svg b/public/images/wave-orange.svg
new file mode 100644
index 0000000..a9e91de
--- /dev/null
+++ b/public/images/wave-orange.svg
@@ -0,0 +1,3 @@
+<svg width="1652" height="70" viewBox="0 0 1652 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M750 16.4996C328 -20.6245 70 16.4996 0 16.4996V70H1652V16.4996C1652 16.4996 1172 53.6238 750 16.4996Z" fill="#F0794A"/>
+</svg>
diff --git a/public/images/wave-yellow.svg b/public/images/wave-yellow.svg
new file mode 100644
index 0000000..2ffa705
--- /dev/null
+++ b/public/images/wave-yellow.svg
@@ -0,0 +1,3 @@
+<svg width="1652" height="155" viewBox="0 0 1652 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M750 30.8091C154 -51.3817 46.5 63.6928 0 30.8091V155H1652V30.8091C1652 30.8091 1346 113 750 30.8091Z" fill="#FFFFE5"/>
+</svg>
diff --git a/public/images/yellow_blob.svg b/public/images/yellow_blob.svg
new file mode 100644
index 0000000..569e43c
--- /dev/null
+++ b/public/images/yellow_blob.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1050 10 300 250" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1114.01 198.933C1076.72 152.566 1071.43 59.1169 1117.79 21.82C1164.16 -15.4746 1238.98 10.0209 1276.28 56.3873C1313.57 102.751 1316.16 171.357 1268.13 206.477C1221.99 240.208 1151.31 245.299 1114.01 198.933Z" fill="#FBF5AF"/>
+</svg>