diff --git a/app/controllers/settings/base_controller.rb b/app/controllers/settings/base_controller.rb
index 6f5c825..a245122 100644
--- a/app/controllers/settings/base_controller.rb
+++ b/app/controllers/settings/base_controller.rb
@@ -157,7 +157,9 @@ class Settings::BaseController < InertiaController
         profile_url: (@user.username.present? ? "https://hackati.me/#{@user.username}" : nil),
         markscribe_template: '{{ wakatimeDoubleCategoryBar "Languages:" wakatimeData.Languages "Projects:" wakatimeData.Projects 5 }}',
         markscribe_reference_url: "https://github.com/taciturnaxolotl/markscribe#your-wakatime-languages-formated-as-a-bar",
-        markscribe_preview_image_url: "https://cdn.fluff.pw/slackcdn/524e293aa09bc5f9115c0c29c18fb4bc.png"
+        markscribe_preview_image_url: "https://cdn.fluff.pw/slackcdn/524e293aa09bc5f9115c0c29c18fb4bc.png",
+        heatmap_badge_url: "https://heatmap.shymike.dev/?id=#{@user.id}&timezone=#{@user.timezone}",
+        heatmap_config_url: "https://hackatime-heatmap.shymike.dev/?id=#{@user.id}&timezone=#{@user.timezone}"
       },
       config_file: {
         content: generated_wakatime_config(@latest_api_key_token),
diff --git a/app/javascript/pages/Users/Settings/Badges.svelte b/app/javascript/pages/Users/Settings/Badges.svelte
index a15a05d..6a8976e 100644
--- a/app/javascript/pages/Users/Settings/Badges.svelte
+++ b/app/javascript/pages/Users/Settings/Badges.svelte
@@ -155,5 +155,29 @@
         class="mt-4 w-full max-w-3xl rounded-md border border-surface-200"
       />
     </section>
+
+    <section id="user_heatmap">
+      <h2 class="text-xl font-semibold text-surface-content">
+        Activity Heatmap
+      </h2>
+      <p class="mt-1 text-sm text-muted">
+        A <a
+          class="text-primary underline"
+          href={badges.heatmap_config_url}
+          target="_blank">customizable</a
+        > heatmap for your coding activity.
+      </p>
+      <div class="mt-4 pb-3 rounded-md border border-surface-200 bg-darker p-4">
+        <a href={badges.heatmap_config_url} target="_blank" class="block">
+          <img
+            src={badges.heatmap_badge_url}
+            alt="Heatmap badge preview"
+            class="max-w-full"
+          />
+        </a>
+        <pre
+          class="mt-2 overflow-x-auto text-xs text-surface-content">{badges.heatmap_badge_url}</pre>
+      </div>
+    </section>
   </div>
 </SettingsShell>
diff --git a/app/javascript/pages/Users/Settings/types.ts b/app/javascript/pages/Users/Settings/types.ts
index e2d5bf0..619a40a 100644
--- a/app/javascript/pages/Users/Settings/types.ts
+++ b/app/javascript/pages/Users/Settings/types.ts
@@ -103,6 +103,8 @@ export type BadgesProps = {
   markscribe_template: string;
   markscribe_reference_url: string;
   markscribe_preview_image_url: string;
+  heatmap_badge_url: string;
+  heatmap_config_url: string;
 };
 
 export type ConfigFileProps = {
@@ -279,6 +281,7 @@ const hashSectionMap: Record<string, SectionId> = {
   user_email_addresses: "integrations",
   user_stats_badges: "badges",
   user_markscribe: "badges",
+  user_heatmap: "badges",
   user_migration_assistant: "data",
   download_user_data: "data",
   delete_account: "data",