From b0147bcccf886cb31ca1face32157a6424e53329 Mon Sep 17 00:00:00 2001
From: Miguel Campos <amodestduck@gmail.com>
Date: Mon, 15 Jan 2024 00:33:50 -0800
Subject: [PATCH] wip: ui placeholders for tokens, referrals, and friends list

---
 .eslintignore                                 |   1 +
 .eslintrc.json                                |  13 +-
 .vscode/settings.json                         |   1 +
 libs/icons/valentines/src/index.ts            |  10 +
 libs/icons/valentines/src/lib/calendar.tsx    |  73 +++
 libs/icons/valentines/src/lib/diamond.tsx     |   2 -
 libs/icons/valentines/src/lib/hand.tsx        |  75 +++
 libs/icons/valentines/src/lib/heart.tsx       |  58 ++
 libs/icons/valentines/src/lib/heartbreak.tsx  | 159 ++++++
 libs/icons/valentines/src/lib/hearts.tsx      | 123 ++++
 libs/icons/valentines/src/lib/letter.tsx      | 142 +++++
 libs/icons/valentines/src/lib/mail.tsx        |   2 -
 libs/icons/valentines/src/lib/mailbox.tsx     | 165 ++++++
 libs/icons/valentines/src/lib/wings.tsx       | 133 +++++
 libs/icons/valentines/src/lib/world.tsx       | 245 ++++++++
 libs/prisma/src/schemas/main.prisma           |   3 +-
 .../lib/server/routers/usage/contributions.ts |   8 +-
 .../ui/game-grid/src/lib/mixed-grid-items.tsx |  14 +-
 libs/ui/inputs/src/index.ts                   |   1 +
 libs/ui/inputs/src/lib/clipboard-text.tsx     |  53 ++
 libs/ui/pages/account/src/index.ts            |   4 +
 .../src/lib/__hooks__/use-time-until.ts       |  16 +
 .../account/src/lib/__mocks__/friends.ts      |  52 ++
 .../pages/account/src/lib/__mocks__/index.ts  |   2 +
 .../account/src/lib/__mocks__/referrals.ts    |  47 ++
 .../src/lib/bullet-points/bullet-points.tsx   |  21 +
 .../account/src/lib/bullet-points/index.ts    |   2 +
 .../src/lib/bullet-points/title-text.tsx      |  20 +
 .../collapsible-section.tsx                   | 121 ++++
 .../src/lib/collapsible-section/index.ts      |   1 +
 libs/ui/pages/account/src/lib/const.ts        |  16 +
 .../friends-panel/friends-panel.stories.tsx   |  59 ++
 .../src/lib/friends-panel/friends-panel.tsx   |  63 +++
 .../friends-table/friends-table.stories.tsx   |  53 ++
 .../friends-table/friends-table.tsx           | 248 +++++++++
 .../lib/friends-panel/friends-table/index.ts  |   1 +
 .../account/src/lib/friends-panel/index.ts    |   1 +
 .../sections/add-friends-section.stories.tsx  |  33 ++
 .../sections/add-friends-section.tsx          | 131 +++++
 .../src/lib/friends-panel/sections/index.ts   |   1 +
 .../sections/send-gifts-section.stories.tsx   |  55 ++
 .../sections/send-gifts-section.tsx           | 119 ++++
 .../lib/modals/add-friend-modal.stories.tsx   |  22 +
 .../src/lib/modals/add-friend-modal.tsx       |  64 +++
 .../lib/modals/claim-gift-modal.stories.tsx   |  21 +
 .../src/lib/modals/claim-gift-modal.tsx       |  67 +++
 libs/ui/pages/account/src/lib/modals/index.ts |   1 +
 .../modals/remove-friend-modal.stories.tsx    |  21 +
 .../src/lib/modals/remove-friend-modal.tsx    |  64 +++
 .../lib/modals/send-gift-modal.stories.tsx    |  21 +
 .../src/lib/modals/send-gift-modal.tsx        |  64 +++
 .../account/src/lib/panel-footer/index.ts     |   1 +
 .../src/lib/panel-footer/panel-footer.tsx     |  43 ++
 .../account/src/lib/panel-header/index.ts     |   1 +
 .../src/lib/panel-header/panel-header.tsx     |  32 ++
 .../lib/referral-info/how-referrals-work.tsx  |  27 +
 .../account/src/lib/referral-info/index.ts    |   1 +
 .../src/lib/referral-info/referral-info.tsx   |  73 +++
 .../account/src/lib/referrals-panel/index.ts  |   1 +
 .../referrals-panel/referral-table/index.ts   |   1 +
 .../referrals-table.stories.tsx               |  40 ++
 .../referral-table/referrals-table.tsx        | 104 ++++
 .../referrals-panel.stories.tsx               |  49 ++
 .../lib/referrals-panel/referrals-panel.tsx   |  65 +++
 .../src/lib/referrals-panel/sections/index.ts |   1 +
 .../sections/referred-accounts-section.tsx    |  62 +++
 .../sections/referred-plays-section.tsx       | 132 +++++
 .../sections/share-your-link-section.tsx      |  62 +++
 .../account/src/lib/rewards-timer/index.ts    |   1 +
 .../src/lib/rewards-timer/rewards-timer.tsx   |  27 +
 .../account/src/lib/tokens-panel/index.ts     |   1 +
 .../sections/daily-reward-section.stories.tsx |  46 ++
 .../sections/daily-reward-section.tsx         | 213 +++++++
 .../sections/gift-box-section.stories.tsx     |  39 ++
 .../sections/gift-box-section.tsx             | 126 +++++
 .../src/lib/tokens-panel/sections/index.ts    |   4 +
 .../invite-friends-section.stories.tsx        |  35 ++
 .../sections/invite-friends-section.tsx       |  79 +++
 .../sections/play-games-section.stories.tsx   |  46 ++
 .../sections/play-games-section.tsx           | 159 ++++++
 .../lib/tokens-panel/tokens-panel.stories.tsx |  66 +++
 .../src/lib/tokens-panel/tokens-panel.tsx     |  93 ++++
 .../account/src/lib/tokens-panel/types.ts     |   5 +
 libs/ui/pages/account/src/lib/types.ts        |  17 +
 .../src/lib/modals/share-game/share-game.tsx  |  22 +-
 .../lib/modals/share-game/social-buttons.tsx  |  49 --
 libs/ui/pills/src/index.ts                    |   1 -
 .../pills/src/lib/progress-pill.stories.tsx   |  45 --
 libs/ui/pills/src/lib/progress-pill.tsx       |  65 ---
 libs/ui/social-media/.babelrc                 |  12 +
 libs/ui/social-media/.eslintrc.json           |  18 +
 libs/ui/social-media/README.md                |   7 +
 libs/ui/social-media/jest.config.ts           |  11 +
 libs/ui/social-media/project.json             |  30 +
 libs/ui/social-media/src/index.ts             |   2 +
 libs/ui/social-media/src/lib/intents.ts       |  12 +
 .../social-media/src/lib/social-buttons.tsx   |  30 +
 libs/ui/social-media/tsconfig.json            |  20 +
 libs/ui/social-media/tsconfig.lib.json        |  23 +
 libs/ui/social-media/tsconfig.spec.json       |  20 +
 libs/util/auth/src/lib/prisma-adapter.ts      |   3 +
 libs/util/numbers/src/lib/numbers.ts          |   8 +-
 libs/util/time/src/lib/time.spec.ts           |  60 +-
 libs/util/time/src/lib/time.ts                |  83 +--
 libs/util/types/src/index.ts                  |  18 +-
 libs/util/types/src/lib/game-info.ts          |   1 +
 libs/util/types/src/lib/index.ts              |  16 -
 libs/util/urls/src/index.ts                   |   2 +
 package-lock.json                             | 523 +++++++++---------
 package.json                                  |   1 -
 tsconfig.base.json                            |   1 +
 types/@mui.d.ts                               |   1 +
 112 files changed, 4885 insertions(+), 543 deletions(-)
 create mode 100644 libs/icons/valentines/src/lib/calendar.tsx
 create mode 100644 libs/icons/valentines/src/lib/hand.tsx
 create mode 100644 libs/icons/valentines/src/lib/heart.tsx
 create mode 100644 libs/icons/valentines/src/lib/heartbreak.tsx
 create mode 100644 libs/icons/valentines/src/lib/hearts.tsx
 create mode 100644 libs/icons/valentines/src/lib/letter.tsx
 create mode 100644 libs/icons/valentines/src/lib/mailbox.tsx
 create mode 100644 libs/icons/valentines/src/lib/wings.tsx
 create mode 100644 libs/icons/valentines/src/lib/world.tsx
 create mode 100644 libs/ui/inputs/src/lib/clipboard-text.tsx
 create mode 100644 libs/ui/pages/account/src/lib/__hooks__/use-time-until.ts
 create mode 100644 libs/ui/pages/account/src/lib/__mocks__/friends.ts
 create mode 100644 libs/ui/pages/account/src/lib/__mocks__/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/__mocks__/referrals.ts
 create mode 100644 libs/ui/pages/account/src/lib/bullet-points/bullet-points.tsx
 create mode 100644 libs/ui/pages/account/src/lib/bullet-points/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/bullet-points/title-text.tsx
 create mode 100644 libs/ui/pages/account/src/lib/collapsible-section/collapsible-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/collapsible-section/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/const.ts
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/friends-panel.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/friends-panel.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/friends-table/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/sections/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/add-friend-modal.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/add-friend-modal.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/claim-gift-modal.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/claim-gift-modal.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/modals/remove-friend-modal.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/remove-friend-modal.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/send-gift-modal.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/modals/send-gift-modal.tsx
 create mode 100644 libs/ui/pages/account/src/lib/panel-footer/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/panel-footer/panel-footer.tsx
 create mode 100644 libs/ui/pages/account/src/lib/panel-header/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/panel-header/panel-header.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referral-info/how-referrals-work.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referral-info/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/referral-info/referral-info.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/referral-table/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/sections/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/sections/referred-accounts-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/sections/referred-plays-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/referrals-panel/sections/share-your-link-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/rewards-timer/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/rewards-timer/rewards-timer.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/index.ts
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.stories.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.tsx
 create mode 100644 libs/ui/pages/account/src/lib/tokens-panel/types.ts
 delete mode 100644 libs/ui/pages/game/src/lib/modals/share-game/social-buttons.tsx
 delete mode 100644 libs/ui/pills/src/lib/progress-pill.stories.tsx
 delete mode 100644 libs/ui/pills/src/lib/progress-pill.tsx
 create mode 100644 libs/ui/social-media/.babelrc
 create mode 100644 libs/ui/social-media/.eslintrc.json
 create mode 100644 libs/ui/social-media/README.md
 create mode 100644 libs/ui/social-media/jest.config.ts
 create mode 100644 libs/ui/social-media/project.json
 create mode 100644 libs/ui/social-media/src/index.ts
 create mode 100644 libs/ui/social-media/src/lib/intents.ts
 create mode 100644 libs/ui/social-media/src/lib/social-buttons.tsx
 create mode 100644 libs/ui/social-media/tsconfig.json
 create mode 100644 libs/ui/social-media/tsconfig.lib.json
 create mode 100644 libs/ui/social-media/tsconfig.spec.json
 create mode 100644 libs/util/types/src/lib/game-info.ts
 delete mode 100644 libs/util/types/src/lib/index.ts

diff --git a/.eslintignore b/.eslintignore
index 3c3629e64..4cbee9a25 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
 node_modules
+package.json
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
index a6e2ccff0..80ed9909f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,13 @@
 {
   "root": true,
-  "ignorePatterns": ["**/*"],
+  "ignorePatterns": [
+    "**/*",
+    "/package.json",
+    "package-lock.json",
+    "node_modules",
+    "dist",
+    "coverage"
+  ],
   "plugins": ["@nx", "simple-import-sort"],
   "overrides": [
     {
@@ -38,6 +45,10 @@
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
       "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "rules": {}
     }
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4b9fb97f8..a5667c059 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -27,6 +27,7 @@
     "fullstory",
     "gamemonetize",
     "Gamu",
+    "Giftcard",
     "hackathon",
     "iframed",
     "itchio",
diff --git a/libs/icons/valentines/src/index.ts b/libs/icons/valentines/src/index.ts
index 4bf5fdf4a..81bdddaa9 100644
--- a/libs/icons/valentines/src/index.ts
+++ b/libs/icons/valentines/src/index.ts
@@ -1,7 +1,17 @@
 // https://www.svgrepo.com/collection/valentines-day-21/
+// https://www.svgrepo.com/collection/valentines-day-20/
 
 export * from './lib/ticket';
 export * from './lib/mail';
 export * from './lib/diamond';
 export * from './lib/gift';
 export * from './lib/chat';
+export * from './lib/letter';
+export * from './lib/calendar';
+export * from './lib/heart';
+export * from './lib/hearts';
+export * from './lib/mailbox';
+export * from './lib/heartbreak';
+export * from './lib/world';
+export * from './lib/hand';
+export * from './lib/wings';
diff --git a/libs/icons/valentines/src/lib/calendar.tsx b/libs/icons/valentines/src/lib/calendar.tsx
new file mode 100644
index 000000000..ca3a5cec7
--- /dev/null
+++ b/libs/icons/valentines/src/lib/calendar.tsx
@@ -0,0 +1,73 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesCalendar';
+
+export const ValentinesCalendar = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <polygon
+      fill="#FFE29E"
+      points="503.83,128 503.83,503.83 471.149,503.83 449.362,99.034 "
+    />
+    <polygon
+      fill="#FFF1CF"
+      points="471.149,128 471.149,503.83 8.17,503.83 8.17,128 239.66,73.532 "
+    />
+    <g>
+      <circle fill="#FFE29E" cx="381.734" cy="452.085" r="8.17" />
+      <circle fill="#FFE29E" cx="64.904" cy="265.042" r="8.17" />
+      <circle fill="#FFE29E" cx="414.415" cy="419.404" r="8.17" />
+    </g>
+    <path
+      fill="#E44670"
+      d="M318.682,193.362c-2.941,0-5.85,0.174-8.704,0.523l-53.956,244.573
+   c2.07-1.133,134.34-73.793,134.34-173.415C390.362,225.454,358.269,193.362,318.682,193.362z"
+    />
+    <path
+      fill="#FF6288"
+      d="M309.978,193.885c26.875,4.259,47.703,34.5,47.703,71.157c0,99.622-100.101,172.283-101.659,173.415
+   c-0.022,0.011-134.384-73.009-134.384-173.415c0-39.587,32.093-71.68,71.68-71.68c26.994,0,50.459,14.946,62.682,36.984
+   C266.883,210.715,286.687,196.717,309.978,193.885z"
+    />
+    <polygon
+      fill="#6CDFB4"
+      points="503.83,8.17 503.83,128 471.149,128 438.468,68.085 471.149,8.17 "
+    />
+    <path
+      fill="#7BFFCD"
+      d="M471.149,8.17V128H8.17V8.17H471.149z M382.181,68.085c0-9.02-7.31-16.34-16.34-16.34
+   c-9.02,0-16.34,7.321-16.34,16.34s7.321,16.34,16.34,16.34C374.871,84.426,382.181,77.105,382.181,68.085z M162.5,68.085
+   c0-9.02-7.321-16.34-16.34-16.34c-9.031,0-16.34,7.321-16.34,16.34s7.31,16.34,16.34,16.34C155.18,84.426,162.5,77.105,162.5,68.085
+   z"
+    />
+    <path
+      d="M318.682,185.191c-24.645,0-47.677,11.411-62.682,30.451c-15.005-19.04-38.037-30.451-62.682-30.451
+   c-44.031,0-79.853,35.823-79.853,79.854c0,43.405,24.148,88.49,69.831,130.385c33.94,31.125,67.397,49.452,68.804,50.216
+   c1.217,0.661,2.559,0.991,3.901,0.991c1.342,0,2.684-0.33,3.901-0.991c1.407-0.765,34.863-19.091,68.804-50.216
+   c45.683-41.895,69.831-86.981,69.831-130.385C398.535,221.014,362.713,185.191,318.682,185.191z M255.997,429.045
+   c-21.692-12.802-126.192-78.92-126.192-164c0-35.021,28.492-63.513,63.513-63.513c23.047,0,44.327,12.56,55.536,32.78
+   c1.44,2.597,4.176,4.209,7.146,4.209c2.971,0,5.706-1.611,7.146-4.209c11.208-20.22,32.489-32.78,55.536-32.78
+   c35.021,0,63.513,28.492,63.513,63.513C382.195,350.018,277.68,416.23,255.997,429.045z"
+    />
+    <path
+      d="M503.83,0H8.17C3.658,0,0,3.658,0,8.17v495.66c0,4.512,3.658,8.17,8.17,8.17h495.66c4.512,0,8.17-3.658,8.17-8.17V8.17
+   C512,3.658,508.342,0,503.83,0z M16.34,495.66V136.17h57.191c4.512,0,8.17-3.658,8.17-8.17c0-4.512-3.658-8.17-8.17-8.17H16.34
+   V16.34H495.66V119.83H106.213c-4.512,0-8.17,3.658-8.17,8.17c0,4.512,3.658,8.17,8.17,8.17H495.66V495.66H16.34z"
+    />
+    <path
+      d="M146.156,92.596c13.516,0,24.511-10.996,24.511-24.511s-10.996-24.511-24.511-24.511c-13.515,0-24.511,10.996-24.511,24.511
+   S132.641,92.596,146.156,92.596z M146.156,59.915c4.506,0,8.17,3.666,8.17,8.17c0,4.505-3.665,8.17-8.17,8.17
+   c-4.506,0-8.17-3.666-8.17-8.17S141.651,59.915,146.156,59.915z"
+    />
+    <path
+      d="M365.844,92.596c13.516,0,24.511-10.996,24.511-24.511s-10.995-24.511-24.511-24.511s-24.511,10.996-24.511,24.511
+   S352.329,92.596,365.844,92.596z M365.844,59.915c4.506,0,8.17,3.666,8.17,8.17c0,4.505-3.665,8.17-8.17,8.17s-8.17-3.666-8.17-8.17
+   S361.339,59.915,365.844,59.915z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/diamond.tsx b/libs/icons/valentines/src/lib/diamond.tsx
index aeb7aa946..8485ea38c 100644
--- a/libs/icons/valentines/src/lib/diamond.tsx
+++ b/libs/icons/valentines/src/lib/diamond.tsx
@@ -4,8 +4,6 @@ const name = 'ValentinesDiamond';
 
 export const ValentinesDiamond = createSvgIcon(
   <svg
-    height="800px"
-    width="800px"
     version="1.1"
     id="Layer_1"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/libs/icons/valentines/src/lib/hand.tsx b/libs/icons/valentines/src/lib/hand.tsx
new file mode 100644
index 000000000..dd5bae322
--- /dev/null
+++ b/libs/icons/valentines/src/lib/hand.tsx
@@ -0,0 +1,75 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesHand';
+
+export const ValentinesHand = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path
+      fill="#FFE29E"
+      d="M401.05,418.228h-32.681l1.307,50.71l31.374,0.033c14.009,0,25.371-11.362,25.371-25.371
+   C426.421,429.59,415.059,418.228,401.05,418.228z"
+    />
+    <path
+      fill="#FFF1CF"
+      d="M368.369,418.228c14.009,0,25.371,11.362,25.371,25.371c0,13.573-10.665,24.663-24.064,25.339
+   c-0.065,0-0.12,0.011-0.185,0l-128.392-0.109v-50.601H368.369z"
+    />
+    <path
+      fill="#FFA4A9"
+      d="M401.05,453.087h-32.681l1.307,50.71l31.374,0.033c14.009,0,25.371-11.362,25.371-25.371
+   S415.059,453.087,401.05,453.087z"
+    />
+    <path
+      fill="#FFC5BB"
+      d="M368.369,453.087c14.009,0,25.371,11.362,25.371,25.371c0,13.573-10.665,24.663-24.064,25.339
+   c-0.065,0-0.12,0.011-0.185,0l-128.392-0.109c-5.785,0-14.652-2.331-19.696-5.164L58.663,398.031
+   c-5.044-2.843-13.911-5.164-19.707-5.164H8.171V291.404H125.79l132.02,161.683L368.369,453.087L368.369,453.087z"
+    />
+    <path
+      fill="#FFA4A9"
+      d="M179.705,313.735l96.047,96.047c9.908,9.908,9.908,25.97,0,35.878c-9.908,9.908-25.97,9.908-35.878,0
+   l-78.059-78.059h-43.667c-42.082,0-76.196-34.114-76.196-76.196h83.843C143.163,291.404,167.423,301.454,179.705,313.735z"
+    />
+    <path
+      fill="#E44670"
+      d="M407.932,8.17c-2.843,0-5.654,0.12-8.432,0.37l-75.395,327.506
+   c2.767-1.503,179.723-98.707,179.723-231.98C503.829,51.102,460.897,8.17,407.932,8.17z"
+    />
+    <path
+      fill="#FF6288"
+      d="M399.501,8.541c40.143,4.216,71.647,45.372,71.647,95.526c0,133.142-144.504,230.28-147.042,231.98
+   c-0.033,0.022-179.777-97.661-179.777-231.98c0-52.965,42.932-95.897,95.897-95.897c36.101,0,67.497,19.99,83.848,49.479
+   C339.139,30.48,366.972,11.373,399.501,8.541z"
+    />
+    <path
+      d="M401.045,410.061h-83.79c-4.512,0-8.17,3.657-8.17,8.17c0,4.513,3.658,8.17,8.17,8.17h83.79
+   c9.484,0,17.199,7.715,17.199,17.199c0,1.912-0.331,3.776-0.932,5.543c-4.822-2.686-10.367-4.222-16.266-4.222H286.608
+   c7.69-12.877,5.999-29.839-5.079-40.916l-96.047-96.047c-13.864-13.863-40.083-24.723-59.689-24.723H8.17
+   c-4.512,0-8.17,3.657-8.17,8.17c0,4.513,3.658,8.17,8.17,8.17h117.623c15.284,0,37.327,9.131,48.136,19.939l96.047,96.047
+   c6.706,6.705,6.706,17.618,0,24.323c-6.707,6.706-17.618,6.707-24.324,0l-78.059-78.06c-3.19-3.19-8.363-3.19-11.554,0
+   c-3.191,3.192-3.191,8.364,0,11.555l78.059,78.06c6.397,6.397,14.756,9.656,23.159,9.794c0.185,0.013,0.369,0.028,0.558,0.028
+   h143.231c9.484,0,17.199,7.716,17.199,17.2s-7.715,17.199-17.191,17.199l-159.943-0.142c-4.342-0.004-11.711-1.924-15.577-4.047
+   L62.954,391.073c-0.095-0.059-0.191-0.114-0.289-0.17c-6.294-3.538-16.485-6.206-23.707-6.206H8.17c-4.512,0-8.17,3.657-8.17,8.17
+   c0,4.513,3.658,8.17,8.17,8.17h30.789c4.341,0,11.705,1.915,15.569,4.037l162.579,100.397c0.095,0.06,0.192,0.115,0.289,0.171
+   c6.292,3.537,16.481,6.209,23.7,6.216L401.046,512c18.494,0,33.539-15.046,33.539-33.539c0-6.377-1.79-12.342-4.891-17.423
+   c3.18-5.211,4.891-11.212,4.891-17.437C434.585,425.106,419.539,410.061,401.045,410.061z"
+    />
+    <path
+      d="M407.933,0c-33.327,0-64.393,16.016-83.855,42.534C304.617,16.016,273.551,0,240.224,0
+   c-57.383,0-104.067,46.684-104.067,104.067c0,32.142,9.842,64.818,29.254,97.124c15.313,25.487,36.601,50.81,63.271,75.267
+   c45.158,41.413,89.626,65.771,91.497,66.789c1.217,0.66,2.559,0.991,3.901,0.991c1.342,0,2.684-0.331,3.901-0.991
+   c1.87-1.017,46.339-25.376,91.497-66.789c26.67-24.457,47.957-49.781,63.27-75.267C502.158,168.885,512,136.208,512,104.067
+   C512,46.684,465.316,0,407.933,0z M408.688,264.181c-36.178,33.23-72.824,55.629-84.611,62.488
+   c-11.751-6.831-48.198-29.098-84.351-62.253c-39.793-36.493-87.227-93.935-87.227-160.349c0-48.372,39.354-87.726,87.726-87.726
+   c31.834,0,61.228,17.348,76.71,45.275c1.44,2.597,4.176,4.208,7.146,4.208s5.706-1.611,7.146-4.208
+   c15.479-27.928,44.872-45.276,76.706-45.276c48.372,0,87.726,39.354,87.726,87.726C495.66,170.378,448.364,227.739,408.688,264.181z
+   "
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/heart.tsx b/libs/icons/valentines/src/lib/heart.tsx
new file mode 100644
index 000000000..2dc2b998e
--- /dev/null
+++ b/libs/icons/valentines/src/lib/heart.tsx
@@ -0,0 +1,58 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesHeart';
+
+export const ValentinesHeart = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512.001 512.001"
+  >
+    <path
+      fill="#FF6465"
+      d="M255.999,481.082c433.24-254.98,206.466-538.165,0-424.214
+	C49.534-57.082-177.24,226.103,255.999,481.082z"
+    />
+    <path
+      fill="#E65A5B"
+      d="M255.999,415.158c-74.542-47.582-130.055-98.879-161.536-149.493
+	c-25.947-41.717-34.916-81.185-25.937-114.141c10.656-39.114,46.609-64.387,91.596-64.387c22.488,0,46.248,6.553,68.712,18.951
+	l27.165,14.993l27.165-14.993c22.464-12.398,46.224-18.951,68.713-18.951c44.976,0,80.921,25.273,91.578,64.387
+	c8.978,32.958,0.011,72.429-25.934,114.146C386.045,316.286,330.535,367.579,255.999,415.158z"
+    />
+    <g opacity="0.1">
+      <path
+        d="M144.215,275.078c-26.301-53.008-32.506-101.363-17.944-139.841c7.625-20.147,20.848-36.489,37.87-48.026
+		c-1.344-0.046-2.685-0.073-4.02-0.073c-44.987,0-80.94,25.273-91.595,64.387c-8.98,32.956-0.01,72.425,25.936,114.141
+		c30.363,48.817,83.088,98.268,153.673,144.408C201.249,364.644,166.019,319.023,144.215,275.078z"
+      />
+    </g>
+    <path
+      d="M385.086,25.045c-42.308-8.039-86.818-0.554-129.025,21.643c-44.143-23.166-92.19-30.35-135.812-20.21
+	C76.742,36.589,41.166,62.53,20.077,99.522c-16.549,29.031-37.84,90.566,5.521,176.513c17.926,35.533,45.013,70.932,80.508,105.216
+	c38.734,37.412,87.653,73.614,145.399,107.599c1.407,0.828,2.981,1.242,4.557,1.242s3.151-0.413,4.557-1.242
+	c34.185-20.118,65.579-41.223,93.31-62.728c3.921-3.042,4.635-8.686,1.595-12.607c-3.041-3.921-8.687-4.634-12.606-1.595
+	c-25.895,20.081-55.092,39.828-86.855,58.744c-104.911-62.486-179-132.513-214.421-202.724
+	c-29.334-58.145-31.448-114.796-5.953-159.518c18.58-32.59,50.055-55.476,88.629-64.441c40.727-9.465,85.974-2.088,127.404,20.778
+	c2.703,1.492,5.981,1.492,8.684,0c39.78-21.955,81.738-29.581,121.327-22.06c36.813,6.994,68.217,26.812,88.431,55.802
+	c23.77,34.09,30.029,78.381,17.627,124.713c-14.729,55.025-55.306,112.492-117.342,166.187c-3.752,3.248-4.162,8.922-0.914,12.674
+	c3.247,3.752,8.922,4.161,12.674,0.914c64.767-56.058,107.28-116.616,122.942-175.129c13.796-51.537,6.606-101.127-20.245-139.637
+	C461.99,55.357,426.541,32.921,385.086,25.045z"
+    />
+    <path
+      d="M93.9,123.345c3.326-3.683,3.037-9.365-0.645-12.691c-3.679-3.325-9.362-3.038-12.691,0.646
+	c-9.807,10.857-16.752,23.605-20.643,37.889c-9.654,35.427-0.325,77.355,26.977,121.249
+	c32.004,51.455,88.829,104.127,164.331,152.321c1.474,0.942,3.155,1.411,4.834,1.411c1.68,0,3.361-0.471,4.834-1.411
+	c75.501-48.195,132.321-100.864,164.319-152.316c27.298-43.895,36.624-85.824,26.972-121.254
+	c-11.753-43.137-51.102-71.01-100.247-71.01c-24.005,0-49.267,6.939-73.056,20.069l-22.823,12.597l-22.823-12.597
+	c-23.788-13.13-49.049-20.069-73.054-20.069c-17.045,0-33.032,3.325-47.521,9.884c-4.52,2.046-6.527,7.371-4.481,11.891
+	c2.049,4.52,7.369,6.527,11.892,4.481c12.144-5.497,25.638-8.285,40.11-8.285c20.975,0,43.233,6.167,64.37,17.832l27.165,14.993
+	c2.703,1.492,5.981,1.492,8.684,0l27.165-14.993c21.138-11.666,43.397-17.832,64.373-17.832c40.804,0,73.348,22.674,82.907,57.763
+	c8.306,30.483-0.303,67.496-24.894,107.038c-29.914,48.099-83.056,97.657-153.892,143.55
+	c-70.839-45.894-123.986-95.452-153.906-143.555c-24.593-39.54-33.202-76.552-24.896-107.034
+	C80.404,142.374,86.003,132.089,93.9,123.345z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/heartbreak.tsx b/libs/icons/valentines/src/lib/heartbreak.tsx
new file mode 100644
index 000000000..e1f426efd
--- /dev/null
+++ b/libs/icons/valentines/src/lib/heartbreak.tsx
@@ -0,0 +1,159 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesHeartbreak';
+
+export const ValentinesHeartbreak = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path
+      fill="#FF8163"
+      d="M256,360.696c-5.82,0-11.394-2.325-15.514-6.453L89.148,202.085
+	c-21.398-21.489-33.181-50.065-33.181-80.459s11.782-58.973,33.181-80.461c21.392-21.489,49.835-33.328,80.105-33.328
+	c30.257,0,58.7,11.839,80.102,33.328L256,47.847l6.647-6.682c21.391-21.489,49.836-33.328,80.101-33.328
+	c30.259,0,58.704,11.839,80.105,33.328c21.389,21.487,33.182,50.067,33.182,80.461s-11.794,58.97-33.182,80.459L271.512,354.243
+	C267.393,358.372,261.818,360.696,256,360.696z"
+    />
+    <path
+      fill="#F9F4E1"
+      d="M342.747,7.837c-30.264,0-58.709,11.839-80.101,33.328l-4.485,4.509l159.991,161.136l4.699-4.724
+	c21.389-21.489,33.182-50.065,33.182-80.459s-11.794-58.973-33.182-80.461C401.451,19.675,373.006,7.837,342.747,7.837z"
+    />
+    <g>
+      <path
+        fill="#F9EEB7"
+        d="M281.839,25.644c-6.86,4.412-13.295,9.597-19.193,15.521l-4.485,4.509l159.991,161.136l4.699-4.724
+		c5.824-5.851,10.93-12.231,15.287-19.027L281.839,25.644z"
+      />
+      <path
+        fill="#F9EEB7"
+        d="M342.747,7.837c-10.566,0-20.909,1.448-30.809,4.241l139.788,140.787
+		c2.836-10.035,4.308-20.522,4.308-31.239c0-2.894-0.109-5.769-0.32-8.625L351.639,8.186C348.696,7.956,345.731,7.837,342.747,7.837
+		z"
+      />
+    </g>
+    <g>
+      <path
+        fill="#E2F7F6"
+        d="M189.436,234.71c-5.943-0.019-11.531-2.314-15.735-6.464c-8.253-8.154-8.35-20.584-0.241-30.946
+		l13.885-18.836c0.488-0.662,1.271-1.055,2.101-1.055l0,0c0.831,0,1.613,0.393,2.102,1.055l13.889,18.847
+		c8.03,10.43,7.932,22.86-0.243,30.936c-4.202,4.149-9.792,6.445-15.74,6.464c-0.002,0-0.006,0-0.008,0
+		C189.441,234.71,189.437,234.71,189.436,234.71z"
+      />
+      <path
+        fill="#E2F7F6"
+        d="M315.118,434.049c-5.943-0.018-11.531-2.314-15.735-6.463c-8.253-8.154-8.35-20.586-0.24-30.946
+		l13.885-18.836c0.488-0.664,1.271-1.055,2.101-1.055l0,0c0.831,0,1.613,0.392,2.102,1.055l13.889,18.846
+		c8.03,10.43,7.932,22.86-0.243,30.936c-4.202,4.148-9.793,6.445-15.74,6.463c-0.002,0-0.006,0-0.008,0
+		C315.123,434.049,315.119,434.049,315.118,434.049z"
+      />
+      <path
+        fill="#E2F7F6"
+        d="M196.917,427.027c-5.943-0.018-11.531-2.314-15.735-6.463c-8.253-8.155-8.35-20.586-0.241-30.947
+		l13.886-18.836c0.488-0.662,1.27-1.055,2.101-1.055l0,0c0.831,0,1.614,0.393,2.102,1.055l13.889,18.847
+		c8.03,10.43,7.932,22.86-0.243,30.936c-4.202,4.148-9.792,6.445-15.74,6.463c-0.001,0-0.006,0-0.008,0
+		C196.923,427.027,196.918,427.027,196.917,427.027z"
+      />
+      <path
+        fill="#E2F7F6"
+        d="M256.018,504.163c-5.943-0.018-11.531-2.314-15.735-6.463c-8.253-8.154-8.35-20.586-0.241-30.947
+		l13.885-18.836c0.488-0.662,1.271-1.055,2.101-1.055l0,0c0.831,0,1.613,0.393,2.102,1.055l13.889,18.847
+		c8.03,10.43,7.932,22.86-0.243,30.936c-4.202,4.148-9.792,6.445-15.74,6.463c-0.002,0-0.006,0-0.008,0
+		C256.023,504.163,256.019,504.163,256.018,504.163z"
+      />
+    </g>
+    <g opacity="0.1">
+      <path
+        d="M128.266,202.085c-21.398-21.489-33.181-50.065-33.181-80.459s11.782-58.973,33.181-80.461
+		c16.709-16.785,37.72-27.681,60.541-31.649c-6.395-1.112-12.932-1.679-19.555-1.679c-30.269,0-58.713,11.839-80.105,33.328
+		c-21.4,21.488-33.181,50.068-33.181,80.461s11.782,58.97,33.181,80.459l151.339,152.157c4.12,4.128,9.694,6.453,15.514,6.453
+		c5.818,0,11.393-2.325,15.512-6.453l4.047-4.07L128.266,202.085z"
+      />
+    </g>
+    <path
+      opacity="0.1"
+      d="M316.559,427.587c-8.253-8.154-8.35-20.586-0.24-30.946l7.398-10.035
+	l-6.486-8.801c-0.488-0.664-1.272-1.055-2.102-1.055c-0.831,0-1.613,0.392-2.101,1.055l-13.885,18.836
+	c-8.108,10.36-8.011,22.792,0.24,30.946c4.204,4.148,9.792,6.445,15.735,6.463c0.001,0,0.005,0,0.008,0c0.001,0,0.006,0,0.008,0
+	c2.996-0.008,5.899-0.598,8.583-1.709C321.074,431.246,318.646,429.645,316.559,427.587z"
+    />
+    <path
+      opacity="0.1"
+      d="M198.358,420.564c-8.253-8.155-8.35-20.586-0.241-30.947l7.398-10.035
+	l-6.486-8.801c-0.488-0.662-1.271-1.055-2.102-1.055s-1.613,0.393-2.101,1.055l-13.886,18.836
+	c-8.108,10.361-8.011,22.792,0.241,30.947c4.203,4.148,9.792,6.445,15.735,6.463c0.001,0,0.005,0,0.008,0c0.001,0,0.006,0,0.008,0
+	c2.996-0.008,5.899-0.598,8.583-1.709C202.873,424.223,200.445,422.623,198.358,420.564z"
+    />
+    <path
+      opacity="0.1"
+      d="M257.459,497.701c-8.253-8.154-8.35-20.586-0.241-30.947l7.398-10.035
+	l-6.486-8.801c-0.488-0.662-1.271-1.055-2.102-1.055s-1.613,0.393-2.101,1.055l-13.885,18.836
+	c-8.108,10.361-8.011,22.792,0.241,30.947c4.204,4.148,9.792,6.445,15.735,6.463c0.001,0,0.005,0,0.008,0c0.001,0,0.006,0,0.008,0
+	c2.996-0.008,5.899-0.598,8.583-1.709C261.974,501.36,259.545,499.759,257.459,497.701z"
+    />
+    <path
+      d="M221.582,278.504c4.328,0,7.837-3.508,7.837-7.837c0-14.793,11.924-26.829,26.581-26.829
+	c14.657,0,26.582,12.036,26.582,26.829c0,4.329,3.509,7.837,7.837,7.837c4.328,0,7.837-3.508,7.837-7.837
+	c0-23.436-18.956-42.502-42.256-42.502s-42.255,19.066-42.255,42.502C213.745,274.996,217.254,278.504,221.582,278.504z"
+    />
+    <path
+      d="M463.518,112.28v-0.002c-2.178-28.953-14.451-55.883-35.113-76.642C405.52,12.655,375.1,0,342.747,0
+	c-32.359,0-62.78,12.656-85.657,35.638L256,36.734l-1.093-1.099C232.022,12.655,201.602,0,169.253,0
+	c-32.362,0-62.783,12.656-85.658,35.635C60.724,58.6,48.13,89.139,48.13,121.626c0,32.484,12.595,63.022,35.462,85.986
+	l151.347,152.166c5.634,5.645,13.113,8.754,21.061,8.754s15.427-3.11,21.068-8.764l70.694-71.075
+	c3.052-3.069,3.039-8.031-0.029-11.083c-3.068-3.053-8.03-3.04-11.082,0.029l-70.685,71.067c-2.672,2.678-6.21,4.152-9.964,4.152
+	c-3.755,0-7.294-1.474-9.958-4.143L94.7,196.556c-19.924-20.009-30.898-46.619-30.898-74.93c0-28.314,10.974-54.924,30.899-74.933
+	c19.914-20.004,46.389-31.02,74.551-31.02c28.152,0,54.626,11.017,74.545,31.019L345.95,149.694
+	c-2.853,10.323-12.245,17.919-23.368,17.919c-13.379,0-24.264-10.988-24.264-24.492c0-4.329-3.509-7.837-7.837-7.837
+	s-7.837,3.508-7.837,7.837c0,22.148,17.916,40.166,39.937,40.166c15.333,0,28.667-8.737,35.354-21.522l46.942,47.277l-45.366,45.61
+	c-3.052,3.069-3.04,8.031,0.029,11.082c3.068,3.052,8.03,3.039,11.082-0.029l57.782-58.092
+	c22.87-22.977,35.465-53.515,35.465-85.988C463.871,118.49,463.75,115.373,463.518,112.28z M436.476,170.263l-67.68-68.163
+	c-3.05-3.071-8.011-3.088-11.083-0.04c-3.071,3.05-3.089,8.011-0.04,11.083l70.341,70.843c-3.217,4.42-6.791,8.627-10.719,12.573
+	l-1.365,1.372L266.984,47.917l1.217-1.224c3.978-3.996,8.221-7.627,12.684-10.89l57.081,57.489c1.532,1.542,3.546,2.315,5.561,2.315
+	c1.997,0,3.994-0.759,5.521-2.276c3.072-3.05,3.09-8.011,0.04-11.083l-54.527-54.918c4.87-2.519,9.923-4.653,15.126-6.372
+	l133.175,134.1C441.137,160.289,438.999,165.37,436.476,170.263z M447.088,137.073L327.624,16.753
+	c4.966-0.712,10.016-1.079,15.124-1.079c1.815,0,3.623,0.048,5.422,0.139l53.067,53.445c1.532,1.542,3.546,2.315,5.561,2.315
+	c1.997,0,3.994-0.759,5.522-2.276c3.071-3.05,3.089-8.011,0.039-11.082L375.167,20.76c15.713,5.08,30.115,13.87,42.13,25.934
+	c12.081,12.136,20.865,26.701,25.913,42.593l-9.062-9.127c-3.05-3.071-8.011-3.088-11.083-0.04c-3.071,3.05-3.089,8.011-0.04,11.082
+	l25.046,25.227c0.083,1.725,0.125,3.459,0.125,5.198C448.197,126.843,447.821,132.002,447.088,137.073z"
+    />
+    <path
+      d="M168.195,233.824c5.674,5.6,13.209,8.698,21.249,8.723h0.008c0.008,0,0.017,0,0.024,0
+	c8.013-0.024,15.551-3.122,21.223-8.725c10.93-10.797,11.337-27.737,0.999-41.222l-8.642-11.728
+	c15.326-5.617,26.298-20.419,26.298-37.752c0-4.329-3.509-7.837-7.837-7.837c-4.328,0-7.837,3.508-7.837,7.837
+	c0,13.505-10.885,24.492-24.264,24.492s-24.264-10.988-24.264-24.492c0-4.329-3.509-7.837-7.837-7.837
+	c-4.328,0-7.837,3.508-7.837,7.837c0,17.349,10.993,32.161,26.342,37.767l-8.608,11.679
+	C156.776,205.984,157.173,222.934,168.195,233.824z M179.632,202.13c0.046-0.06,0.092-0.119,0.137-0.18l9.678-13.129l9.683,13.139
+	c0.032,0.044,0.066,0.089,0.099,0.132c5.588,7.257,5.768,15.336,0.459,20.578c-2.728,2.695-6.366,4.187-10.242,4.204
+	c-3.872-0.017-7.508-1.508-10.236-4.2C173.846,217.373,174.012,209.311,179.632,202.13z"
+    />
+    <path
+      d="M323.541,373.158c-1.957-2.658-5.102-4.246-8.414-4.246c-3.311,0-6.455,1.588-8.409,4.242l-13.821,18.751
+	c-10.439,13.418-10.043,30.368,0.98,41.26c5.676,5.6,13.211,8.697,21.248,8.721h0.008c0.007,0,0.016,0,0.023,0
+	c8.012-0.023,15.549-3.121,21.225-8.724c10.929-10.797,11.335-27.738,0.999-41.224L323.541,373.158z M325.37,422.01
+	c-2.73,2.695-6.368,4.187-10.243,4.202c-3.871-0.016-7.508-1.507-10.236-4.201c-5.362-5.299-5.197-13.361,0.422-20.541
+	c0.046-0.061,0.092-0.12,0.137-0.181l9.678-13.13l9.682,13.138c0.032,0.044,0.066,0.088,0.099,0.132
+	C330.496,408.689,330.677,416.767,325.37,422.01z"
+    />
+    <path
+      d="M219.181,384.916l-13.842-18.783c-1.958-2.658-5.102-4.245-8.412-4.245c-3.309,0-6.453,1.586-8.409,4.242l-13.822,18.75
+	c-10.437,13.419-10.041,30.369,0.981,41.261c5.675,5.601,13.21,8.698,21.248,8.722h0.008c0.007,0,0.016,0,0.023,0
+	c8.012-0.023,15.549-3.121,21.225-8.724C229.111,415.343,229.517,398.402,219.181,384.916z M207.169,414.987
+	c-2.73,2.695-6.368,4.187-10.243,4.202c-3.871-0.016-7.507-1.507-10.235-4.201c-5.362-5.299-5.197-13.362,0.422-20.543
+	c0.046-0.06,0.092-0.119,0.137-0.18l9.678-13.129l9.682,13.139c0.032,0.044,0.066,0.088,0.099,0.132
+	C212.295,401.666,212.476,409.745,207.169,414.987z"
+    />
+    <path
+      d="M264.438,443.268c-1.958-2.656-5.102-4.242-8.409-4.242c-3.308,0-6.451,1.586-8.409,4.242l-13.821,18.751
+	c-10.439,13.42-10.041,30.37,0.981,41.26c5.675,5.601,13.21,8.698,21.248,8.722h0.008c0.007,0,0.016,0,0.023,0
+	c8.012-0.023,15.549-3.121,21.225-8.724c10.929-10.797,11.335-27.738,0.999-41.223L264.438,443.268z M266.269,492.124
+	c-2.73,2.695-6.368,4.187-10.243,4.203c-3.871-0.016-7.507-1.507-10.236-4.2c-5.362-5.299-5.197-13.362,0.422-20.543
+	c0.046-0.06,0.092-0.119,0.137-0.18l9.678-13.129l9.683,13.139c0.032,0.044,0.066,0.088,0.099,0.132
+	C271.396,478.803,271.576,486.882,266.269,492.124z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/hearts.tsx b/libs/icons/valentines/src/lib/hearts.tsx
new file mode 100644
index 000000000..fec75163b
--- /dev/null
+++ b/libs/icons/valentines/src/lib/hearts.tsx
@@ -0,0 +1,123 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesHearts';
+
+export const ValentinesHearts = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path
+      fill="#FF8163"
+      d="M427.152,149.653c-18.932-18.941-44.102-29.372-70.874-29.372c-26.777,0-51.946,10.431-70.879,29.372
+	l-5.881,5.884l-5.883-5.884c-18.93-18.941-44.104-29.372-70.877-29.372c-26.77,0-51.943,10.431-70.872,29.372
+	c-18.932,18.94-29.359,44.123-29.359,70.906c0,8.227,0.987,16.302,2.9,24.094c4.947-1.281,10.086-1.951,15.331-1.951
+	c16.234,0,31.495,6.324,42.974,17.809l3.566,3.567l3.565-3.567c11.479-11.485,26.74-17.809,42.974-17.809
+	c16.233,0,31.496,6.324,42.973,17.809c11.477,11.482,17.802,26.753,17.802,42.991c0,16.242-6.325,31.511-17.802,42.994
+	l-34.985,35.031l43.968,44.027c3.639,3.641,8.575,5.69,13.725,5.69c5.149,0,10.084-2.049,13.725-5.69l133.909-134.086
+	c18.928-18.94,29.358-44.123,29.358-70.908C456.51,193.777,446.08,168.593,427.152,149.653z"
+    />
+    <path
+      fill="#E84731"
+      d="M167.299,431.247c-3.121,0-6.116-1.242-8.322-3.451l-81.191-81.3
+	c-11.477-11.482-17.801-26.751-17.801-42.993c0-16.238,6.324-31.508,17.801-42.991c11.477-11.485,26.741-17.809,42.972-17.809
+	c16.234,0,31.495,6.324,42.974,17.809l3.566,3.567l3.565-3.567c11.479-11.485,26.74-17.809,42.974-17.809
+	c16.233,0,31.496,6.324,42.973,17.809c11.477,11.482,17.802,26.753,17.802,42.991c0,16.242-6.325,31.511-17.802,42.994
+	l-81.192,81.299C173.413,430.003,170.422,431.247,167.299,431.247z"
+    />
+    <g opacity="0.1">
+      <path
+        d="M120.758,242.703c9.873,0,19.38,2.352,27.901,6.769c-8.887-15.177-13.631-32.501-13.631-50.557
+		c0-26.784,10.427-51.967,29.359-70.906c0.083-0.083,0.168-0.163,0.252-0.246c-12.105,4.977-23.222,12.354-32.753,21.891
+		c-18.932,18.94-29.359,44.123-29.359,70.906c0,8.227,0.987,16.302,2.9,24.094C110.375,243.374,115.515,242.703,120.758,242.703z"
+      />
+      <path
+        d="M298.295,403.909l-49.409-49.477l-27.061,27.095l43.968,44.027c3.639,3.641,8.575,5.69,13.725,5.69
+		c5.149,0,10.084-2.049,13.725-5.69l16.136-16.158C305.208,408.824,301.306,406.922,298.295,403.909z"
+      />
+    </g>
+    <path
+      opacity="0.1"
+      d="M191.478,406.15l-81.191-81.3c-11.477-11.482-17.801-26.752-17.801-42.993
+	c0-13.611,4.459-26.534,12.656-37.124c-10.254,2.709-19.658,8.076-27.356,15.78c-11.477,11.482-17.801,26.753-17.801,42.991
+	c0,16.242,6.324,31.511,17.801,42.993l81.191,81.3c2.206,2.208,5.2,3.451,8.322,3.451c3.122,0,6.115-1.242,8.32-3.451l19.263-19.288
+	C193.63,407.93,192.471,407.143,191.478,406.15z"
+    />
+    <path
+      fill="#FFC529"
+      d="M425.191,192.746c-12.76,8.222-19.427,14.888-27.649,27.649
+	c-8.222-12.761-14.889-19.427-27.649-27.649c12.76-8.222,19.427-14.888,27.649-27.649
+	C405.764,177.858,412.431,184.523,425.191,192.746z"
+    />
+    <rect
+      x="363.88"
+      y="245.843"
+      transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 460.6448 709.0905)"
+      fill="#FFED84"
+      width="26.599"
+      height="26.598"
+    />
+    <path
+      d="M356.278,112.445c-28.867,0-56.008,11.247-76.422,31.67l-0.339,0.339l-0.339-0.339c-20.411-20.422-47.551-31.67-76.42-31.67
+	c-28.867,0-56.005,11.247-76.415,31.669c-20.411,20.42-31.653,47.569-31.653,76.447c0,6.367,0.559,12.645,1.63,18.788
+	c-8.928,3.4-17.122,8.663-24.077,15.623c-12.958,12.964-20.094,30.198-20.094,48.53c0,18.334,7.137,35.569,20.092,48.531
+	l81.192,81.301c3.704,3.707,8.628,5.749,13.866,5.749c5.237,0,10.161-2.042,13.866-5.75l40.662-40.715l38.426,38.477
+	c5.148,5.151,11.991,7.988,19.267,7.988s14.12-2.837,19.269-7.989l92.109-92.232c3.058-3.063,3.055-8.025-0.007-11.082
+	c-3.062-3.06-8.024-3.055-11.082,0.007l-92.107,92.23c-2.188,2.189-5.093,3.394-8.181,3.394s-5.993-1.205-8.179-3.392l-38.437-38.49
+	l29.453-29.492c12.959-12.965,20.095-30.201,20.095-48.534c0-11.794-3.023-23.403-8.74-33.577
+	c-2.121-3.773-6.898-5.114-10.671-2.992c-3.773,2.121-5.113,6.899-2.992,10.671c4.403,7.832,6.73,16.787,6.73,25.897
+	c0,14.147-5.508,27.449-15.51,37.457l-81.191,81.298c-0.743,0.744-1.728,1.152-2.776,1.152c-1.032,0-2.045-0.42-2.776-1.152
+	l-81.193-81.302c-10-10.005-15.507-23.306-15.507-37.454c0-14.146,5.508-27.446,15.507-37.451
+	c9.995-10.003,23.288-15.512,37.429-15.512c14.139,0,27.434,5.509,37.432,15.513l3.566,3.567c1.469,1.47,3.463,2.296,5.543,2.296
+	c2.078,0,4.072-0.827,5.542-2.297l3.565-3.567c9.997-10.003,23.292-15.512,37.431-15.512c9.812,0,19.36,2.679,27.615,7.749
+	c3.683,2.263,8.512,1.112,10.778-2.577c2.265-3.687,1.112-8.515-2.577-10.779c-10.724-6.586-23.108-10.068-35.817-10.068
+	c-17.411,0-33.831,6.444-46.539,18.203c-12.709-11.759-29.129-18.203-46.54-18.203c-3.103,0-6.169,0.222-9.194,0.625
+	c-0.79-4.891-1.2-9.879-1.2-14.93c0-24.693,9.612-47.907,27.065-65.367c17.45-17.46,40.65-27.075,65.329-27.075
+	c24.68,0,47.883,9.615,65.335,27.076l5.883,5.884c1.469,1.47,3.464,2.296,5.543,2.296c2.078,0,4.073-0.827,5.542-2.297l5.881-5.883
+	c17.453-17.461,40.657-27.076,65.336-27.076c24.677,0,47.879,9.615,65.331,27.075c17.453,17.463,27.064,40.678,27.064,65.367
+	c0,24.691-9.611,47.906-27.066,65.37l-16.755,16.778c-3.058,3.063-3.055,8.025,0.007,11.082c3.063,3.06,8.025,3.055,11.082-0.007
+	l16.753-16.776c20.411-20.423,31.652-47.573,31.652-76.448c0-28.874-11.241-56.023-31.652-76.446
+	C412.281,123.692,385.143,112.445,356.278,112.445z"
+    />
+    <path
+      d="M455.517,125.498c-8.062-8.068-17.072-15.068-26.781-20.811c-3.723-2.202-8.529-0.972-10.734,2.755
+	c-2.204,3.725-0.971,8.532,2.755,10.734c8.576,5.073,16.542,11.264,23.674,18.401c8.34,8.343,15.35,17.776,20.841,28.034
+	c1.413,2.638,4.118,4.141,6.916,4.141c1.247,0,2.513-0.299,3.691-0.93c3.815-2.042,5.254-6.791,3.211-10.607
+	C472.877,145.601,464.944,134.929,455.517,125.498z"
+    />
+    <path
+      d="M511.306,154.531c-7.981-17.718-19.072-33.751-32.966-47.65c-14.073-14.08-30.323-25.277-48.3-33.284
+	c-3.952-1.761-8.586,0.017-10.346,3.972c-1.761,3.953,0.018,8.586,3.972,10.346c16.216,7.221,30.881,17.329,43.59,30.046
+	c12.55,12.553,22.562,27.023,29.762,43.006c1.306,2.902,4.161,4.62,7.149,4.62c1.076,0,2.169-0.223,3.214-0.694
+	C511.325,163.118,513.084,158.477,511.306,154.531z"
+    />
+    <path
+      d="M60.504,236.353c-3.062-3.06-8.024-3.059-11.082,0.003c-8.679,8.683-15.492,18.765-20.25,29.965
+	c-1.692,3.984,0.165,8.585,4.149,10.278c1,0.424,2.039,0.626,3.062,0.626c3.049,0,5.949-1.791,7.216-4.774
+	c3.968-9.342,9.657-17.759,16.909-25.014C63.566,244.375,63.565,239.414,60.504,236.353z"
+    />
+    <path
+      d="M49.336,218.824c3.438-2.629,4.093-7.547,1.463-10.986c-2.628-3.436-7.546-4.094-10.986-1.463
+	c-4.294,3.284-8.425,6.904-12.273,10.756c-11.807,11.81-20.885,25.582-26.984,40.937c-1.597,4.023,0.368,8.579,4.391,10.176
+	c0.949,0.376,1.928,0.555,2.891,0.555c3.117,0,6.065-1.872,7.286-4.945c5.306-13.358,13.213-25.35,23.503-35.642
+	C41.987,224.846,45.59,221.688,49.336,218.824z"
+    />
+    <path
+      d="M390.954,224.639c1.443,2.239,3.925,3.592,6.588,3.592c2.663,0,5.145-1.353,6.588-3.592
+	c7.6-11.793,13.511-17.706,25.306-25.306c2.239-1.443,3.592-3.925,3.592-6.588s-1.353-5.145-3.592-6.588
+	c-11.795-7.599-17.707-13.514-25.306-25.306c-1.443-2.239-3.925-3.592-6.588-3.592s-5.145,1.353-6.588,3.592
+	c-7.599,11.793-13.511,17.706-25.306,25.306c-2.239,1.443-3.592,3.925-3.592,6.588s1.353,5.145,3.592,6.588
+	C377.444,206.933,383.356,212.846,390.954,224.639z M397.542,178.689c4.245,5.416,8.642,9.813,14.057,14.057
+	c-5.416,4.245-9.813,8.642-14.057,14.057c-4.245-5.416-8.641-9.813-14.057-14.057C388.901,188.5,393.297,184.103,397.542,178.689z"
+    />
+    <path
+      d="M350.563,259.137c0,2.078,0.825,4.072,2.296,5.542l18.81,18.808c1.53,1.53,3.536,2.295,5.541,2.295
+	c2.005,0,4.011-0.765,5.542-2.296l18.807-18.808c3.06-3.06,3.06-8.023-0.001-11.082l-18.809-18.808
+	c-3.059-3.059-8.022-3.059-11.082,0l-18.808,18.808C351.388,255.065,350.563,257.058,350.563,259.137z M377.207,251.411l7.727,7.726
+	l-7.724,7.726l-7.728-7.726L377.207,251.411z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/letter.tsx b/libs/icons/valentines/src/lib/letter.tsx
new file mode 100644
index 000000000..877dc2c2b
--- /dev/null
+++ b/libs/icons/valentines/src/lib/letter.tsx
@@ -0,0 +1,142 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesLetter';
+
+export const ValentinesLetter = createSvgIcon(
+  <svg version="1.1" id="Layer_1" viewBox="0 0 512 512">
+    <g>
+      <path
+        fill="#FFE1DE"
+        d="M494.662,39.8H150.775c-5.222,0-9.498,4.293-9.498,9.545v188.073h219.948
+       c5.224,0,9.499,4.293,9.499,9.543v27.621h123.938c5.226,0,9.501-4.296,9.501-9.544V49.345
+       C504.163,44.093,499.888,39.8,494.662,39.8z"
+      />
+      <path
+        fill="#FFE1DE"
+        d="M374.688,180.089c-4.641-3.388-11.755-2.825-15.808,1.249l-23.736,23.867
+       c-4.053,4.075-8.79,8.356-10.526,9.514c0,0,0,0-1.898,0s-1.898,0-1.898,0c-1.737-1.158-6.473-5.439-10.525-9.514l-23.735-23.868
+       c-4.053-4.075-11.166-4.637-15.808-1.249l-70.103,51.171c-4.641,3.388-3.738,6.16,2.009,6.16h148.116
+       c5.747,0,12.586,0.967,15.198,2.147c2.612,1.181,4.75,12.098,4.75,17.845v6.723c0,5.747,4.702,10.449,10.449,10.449h103.039
+       c5.747,0,11.475-0.202,12.731-0.45c1.255-0.248,0.155-4.692-4.487-8.079L374.688,180.089z"
+      />
+    </g>
+    <path
+      fill="#FF8163"
+      d="M322.72,214.718c-1.898,0-3.716-0.759-5.056-2.105l-49.338-49.613
+   c-6.977-7.008-10.819-16.322-10.819-26.233s3.842-19.227,10.819-26.234c6.975-7.006,16.249-10.866,26.112-10.866
+   c9.865,0,19.139,3.86,26.114,10.866l2.167,2.177l2.167-2.177c6.976-7.006,16.249-10.866,26.114-10.866
+   c9.863,0,19.136,3.86,26.112,10.866c6.976,7.007,10.818,16.323,10.818,26.234s-3.843,19.225-10.818,26.237l-49.338,49.609
+   C326.436,213.96,324.617,214.718,322.72,214.718z"
+    />
+    <path
+      fill="#FFAA99"
+      d="M268.326,110.531c6.975-7.006,16.249-10.866,26.112-10.866c9.865,0,17.429,5.058,17.429,5.058
+   c4.777,3.195,9.173,6.298,9.77,6.897c0.596,0.598,1.572,0.598,2.167,0c0.596-0.599,4.991-3.702,9.77-6.897
+   c0,0,7.563-5.058,17.429-5.058c9.863,0,19.136,3.86,26.112,10.866c4.583,4.603,5.449,6.675,5.449,6.675
+   c2.217,5.302,7.828,6.868,12.471,3.481l98.151-71.644c4.641-3.388,7.492-6.855,6.334-7.701c-1.158-0.847-9.558-1.541-15.305-1.541
+   H161.224c-5.747,0-11.623,0.269-13.06,0.597c-1.436,0.329-0.55,5.257,4.092,8.645l98.151,71.644
+   c4.641,3.388,10.254,1.821,12.471-3.481C262.876,117.206,263.743,115.135,268.326,110.531z"
+    />
+    <path
+      fill="#FFCCC5"
+      d="M370.724,462.654c0,5.249-4.275,9.545-9.499,9.545H17.338c-5.226,0-9.501-4.296-9.501-9.545V246.961
+   c0-5.249,4.276-9.543,9.501-9.543h343.886c5.224,0,9.499,4.293,9.499,9.543L370.724,462.654L370.724,462.654z"
+    />
+    <path
+      opacity="0.1"
+      d="M39.706,462.654V246.961c0-5.249,4.276-9.543,9.501-9.543H17.338
+   c-5.226,0-9.501,4.293-9.501,9.543v215.694c0,5.249,4.276,9.545,9.501,9.545h31.869C43.982,472.199,39.706,467.904,39.706,462.654z"
+    />
+    <path
+      fill="#E84731"
+      d="M94.523,361.126c-1.486,0-2.908-0.596-3.958-1.65l-38.631-38.844
+   c-5.462-5.486-8.469-12.782-8.469-20.542c0-7.758,3.007-15.052,8.469-20.542c5.462-5.486,12.722-8.51,20.446-8.51
+   s14.986,3.024,20.447,8.51l1.696,1.705l1.697-1.705c5.463-5.486,12.722-8.51,20.447-8.51c7.723,0,14.984,3.024,20.446,8.51
+   c5.461,5.49,8.469,12.783,8.469,20.542c0,7.76-3.009,15.056-8.469,20.542l-38.629,38.844
+   C97.432,360.53,96.007,361.126,94.523,361.126z"
+    />
+    <rect
+      x="295.675"
+      y="262.885"
+      fill="#FFFFFF"
+      width="46.651"
+      height="52.983"
+    />
+    <path
+      fill="#FF8163"
+      d="M142.776,361.126c-1.026,0-2.009-0.411-2.735-1.139l-26.676-26.827
+   c-3.771-3.788-5.848-8.825-5.848-14.186c0-5.356,2.076-10.394,5.848-14.181c3.772-3.79,8.788-5.878,14.12-5.878
+   c5.334,0,10.35,2.088,14.12,5.878l1.172,1.177l1.171-1.177c3.772-3.79,8.786-5.878,14.12-5.878s10.347,2.088,14.121,5.878
+   c3.77,3.788,5.848,8.825,5.848,14.181c0,5.36-2.077,10.398-5.848,14.188l-26.678,26.825
+   C144.784,360.716,143.801,361.126,142.776,361.126z"
+    />
+    <path
+      d="M134.488,365.516c2.212,2.223,5.157,3.446,8.288,3.446c3.088,0,6.11-1.257,8.289-3.449l26.678-26.824
+   c5.242-5.269,8.128-12.271,8.128-19.715c0-7.443-2.888-14.443-8.131-19.711c-5.255-5.278-12.242-8.185-19.673-8.185
+   c-1.913,0-3.794,0.205-5.627,0.582c-1.534-6.623-4.865-12.706-9.774-17.642c-6.944-6.975-16.178-10.816-25.999-10.816
+   c-8.098,0-15.797,2.612-22.142,7.439c-6.346-4.827-14.043-7.439-22.143-7.439c-9.821,0-19.055,3.842-26.001,10.819
+   c-6.933,6.967-10.751,16.226-10.751,26.069c0,9.849,3.818,19.107,10.75,26.068l38.635,38.848c2.541,2.551,5.918,3.956,9.511,3.956
+   c3.54,0,7.007-1.442,9.516-3.96l14.969-15.052L134.488,365.516z M94.524,352.343l-37.036-37.241
+   c-3.988-4.006-6.186-9.337-6.186-15.012c0-5.672,2.198-11.004,6.187-15.013c3.98-3.999,9.269-6.201,14.892-6.201
+   s10.912,2.202,14.891,6.199c4.801,5.012,9.816,4.964,14.502,0.003c3.983-3.999,9.271-6.203,14.894-6.203
+   c5.622,0,10.91,2.203,14.89,6.199c2.144,2.156,3.751,4.7,4.797,7.466c-2.822-0.95-5.804-1.461-8.869-1.461
+   c-7.432,0-14.42,2.907-19.672,8.185c-5.244,5.266-8.131,12.266-8.131,19.711c0,7.447,2.888,14.449,8.127,19.711l0.149,0.15
+   L94.524,352.343z M115.353,318.975c0-3.271,1.266-6.344,3.565-8.653c2.29-2.302,5.333-3.569,8.565-3.569
+   c3.234,0,6.276,1.267,8.568,3.573c4.477,4.384,9.102,4.314,13.449-0.003c2.291-2.302,5.333-3.569,8.565-3.569
+   c3.233,0,6.275,1.268,8.566,3.569c2.299,2.31,3.565,5.382,3.565,8.653c0,3.273-1.266,6.349-3.567,8.661l-23.856,23.987
+   l-23.857-23.992C116.619,325.323,115.353,322.248,115.353,318.975z"
+    />
+    <path
+      d="M299.442,146.756h46.555c4.329,0,7.837-3.508,7.837-7.837c0-4.329-3.508-7.837-7.837-7.837h-46.555
+   c-4.329,0-7.837,3.508-7.837,7.837S295.114,146.756,299.442,146.756z"
+    />
+    <path
+      d="M336.539,154.471h-27.64c-4.329,0-7.837,3.508-7.837,7.837c0,4.329,3.508,7.837,7.837,7.837h27.64
+   c4.329,0,7.837-3.508,7.837-7.837C344.375,157.979,340.868,154.471,336.539,154.471z"
+    />
+    <path
+      d="M218.516,357.646c0,4.329,3.508,7.837,7.837,7.837h115.974c4.329,0,7.837-3.508,7.837-7.837
+   c0-4.329-3.508-7.837-7.837-7.837H226.353C222.024,349.809,218.516,353.318,218.516,357.646z"
+    />
+    <path
+      d="M226.353,394.011h115.974c4.329,0,7.837-3.508,7.837-7.837c0-4.329-3.508-7.837-7.837-7.837H226.353
+   c-4.329,0-7.837,3.508-7.837,7.837C218.516,390.503,222.024,394.011,226.353,394.011z"
+    />
+    <path
+      d="M342.327,406.866h-85.368c-4.329,0-7.837,3.508-7.837,7.837c0,4.329,3.508,7.837,7.837,7.837h85.368
+   c4.329,0,7.837-3.508,7.837-7.837C350.164,410.374,346.656,406.866,342.327,406.866z"
+    />
+    <path
+      d="M342.327,323.709c4.329,0,7.837-3.508,7.837-7.837V262.89c0-4.329-3.508-7.837-7.837-7.837h-46.65
+   c-4.329,0-7.837,3.508-7.837,7.837v52.983c0,4.329,3.508,7.837,7.837,7.837H342.327z M303.514,270.726h30.977v37.309h-30.977
+   V270.726z"
+    />
+    <path
+      d="M494.662,31.963h-78.793c-4.329,0-7.837,3.509-7.837,7.837c0,4.329,3.508,7.837,7.837,7.837h65.948l-91.831,67.03
+   c-1.973-3.494-4.417-6.747-7.321-9.665c-8.457-8.495-19.703-13.173-31.666-13.173c-10.429,0-20.314,3.555-28.281,10.096
+   c-7.966-6.54-17.851-10.096-28.281-10.096c-11.963,0-23.209,4.679-31.666,13.173c-2.905,2.917-5.349,6.171-7.322,9.665l-91.83-67.03
+   h218.812c4.329,0,7.837-3.508,7.837-7.837s-3.508-7.837-7.837-7.837H150.775c-9.558,0-17.335,7.797-17.335,17.382v180.237H17.338
+   C7.777,229.581,0,237.378,0,246.961v215.694c0,9.585,7.777,17.382,17.338,17.382h61.029c4.329,0,7.837-3.508,7.837-7.837
+   s-3.508-7.837-7.837-7.837H17.338c-0.902,0-1.665-0.783-1.665-1.708V246.961c0-0.925,0.762-1.706,1.665-1.706h343.886
+   c0.901,0,1.662,0.782,1.662,1.706v215.694c0,0.926-0.762,1.708-1.662,1.708H112.849c-4.329,0-7.837,3.508-7.837,7.837
+   s3.508,7.837,7.837,7.837h248.375c9.559,0,17.336-7.797,17.336-17.382V282.418h116.102c9.56,0,17.338-7.797,17.338-17.381V49.345
+   C512,39.76,504.223,31.963,494.662,31.963z M273.879,116.059c5.494-5.518,12.795-8.558,20.558-8.558
+   c7.765,0,15.066,3.04,20.561,8.559c4.952,5.449,10.489,5.449,15.44,0c5.496-5.519,12.798-8.559,20.562-8.559
+   c7.763,0,15.063,3.04,20.558,8.558c5.503,5.53,8.536,12.883,8.536,20.706c0,7.821-3.031,15.176-8.538,20.711l-48.837,49.106
+   l-48.84-49.112c-5.503-5.53-8.536-12.883-8.536-20.705C265.343,128.942,268.376,121.588,273.879,116.059
+   C279.373,110.541,268.376,121.588,273.879,116.059z M378.56,266.744v-19.783c0-9.583-7.776-17.38-17.336-17.38H216.241l8.853-6.463
+   c3.496-2.551,4.261-7.454,1.709-10.949c-2.553-3.497-7.455-4.261-10.951-1.709l-26.197,19.122h-40.543V56.45l101.03,73.747
+   c-0.312,2.157-0.473,4.35-0.473,6.568c0,11.995,4.653,23.275,13.098,31.76l4.429,4.455l-28.357,20.7
+   c-3.496,2.552-4.261,7.454-1.709,10.951c2.553,3.497,7.455,4.262,10.951,1.709l30.298-22.115l33.729,33.917
+   c2.833,2.846,6.601,4.414,10.61,4.414c4.011,0,7.78-1.568,10.612-4.416l33.729-33.915l113.053,82.521H378.56V266.744z
+    M496.327,259.174l-118.084-86.193l4.426-4.451c8.447-8.491,13.099-19.773,13.099-31.764c0-2.218-0.161-4.412-0.474-6.568
+   L496.327,56.45V259.174z"
+    />
+    <path
+      opacity="0.1"
+      d="M173.146,237.418V49.345c0-5.251,4.276-9.545,9.498-9.545h-31.869
+   c-5.222,0-9.498,4.293-9.498,9.545v188.073L173.146,237.418L173.146,237.418z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/mail.tsx b/libs/icons/valentines/src/lib/mail.tsx
index 11a7ccdac..966c61346 100644
--- a/libs/icons/valentines/src/lib/mail.tsx
+++ b/libs/icons/valentines/src/lib/mail.tsx
@@ -4,8 +4,6 @@ const name = 'ValentinesMail';
 
 export const ValentinesMail = createSvgIcon(
   <svg
-    height="800px"
-    width="800px"
     version="1.1"
     id="Layer_1"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/libs/icons/valentines/src/lib/mailbox.tsx b/libs/icons/valentines/src/lib/mailbox.tsx
new file mode 100644
index 000000000..e0d8ee219
--- /dev/null
+++ b/libs/icons/valentines/src/lib/mailbox.tsx
@@ -0,0 +1,165 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesMailbox';
+
+export const ValentinesMailbox = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path
+      fill="#EDD7BE"
+      d="M327.616,379.207c-2.873,0-5.224,2.351-5.224,5.224v108.986c0,2.873,2.351,5.224,5.224,5.224h37.126
+	c2.873,0,5.224-2.351,5.224-5.224V384.431c0-2.873-2.351-5.224-5.224-5.224H327.616z"
+    />
+    <g opacity="0.1">
+      <path
+        d="M327.616,379.207c-2.873,0-5.224,2.351-5.224,5.224v108.986c0,2.873,2.351,5.224,5.224,5.224h11.421
+		c2.873,0,5.224-2.351,5.224-5.224V384.431c0-2.873-2.351-5.224-5.224-5.224H327.616z"
+      />
+    </g>
+    <path
+      fill="#A5B8C4"
+      d="M261.131,347.382v24.592c0,3.979,3.216,7.233,7.147,7.233h155.803c3.931,0,7.147-3.254,7.147-7.233
+	v-24.592H261.131z"
+    />
+    <path
+      opacity="0.1"
+      d="M304.287,371.974v-24.592h-43.155v24.592c0,3.979,3.216,7.233,7.147,7.233
+	h43.155C307.503,379.207,304.287,375.953,304.287,371.974z"
+    />
+    <path
+      fill="#F9EEB7"
+      d="M188.565,315.274L188.565,315.274c1.019-6.669,4.609-12.476,9.713-16.356
+	c-0.001,0.001-0.002,0.001-0.003,0.002V194.045H31.781c-2.949,0-5.362,2.451-5.362,5.449v115.781h162.147V315.274z"
+    />
+    <path
+      opacity="0.1"
+      d="M48.192,315.274v-115.78c0-2.998,2.414-5.449,5.362-5.449H31.781
+	c-2.949,0-5.362,2.451-5.362,5.449v115.781h21.774V315.274z"
+    />
+    <path
+      fill="#E84731"
+      d="M128.786,293.616c-1.111,0-2.173-0.449-2.956-1.248l-28.86-29.371
+	c-4.081-4.147-6.329-9.663-6.329-15.529c0-5.868,2.247-11.384,6.329-15.533c4.078-4.148,9.504-6.432,15.273-6.432
+	c5.769,0,11.195,2.285,15.275,6.432l1.267,1.289l1.268-1.289c4.079-4.148,9.505-6.432,15.275-6.432
+	c5.768,0,11.194,2.285,15.272,6.432c4.08,4.15,6.329,9.665,6.329,15.533c0,5.866-2.248,11.382-6.329,15.531l-28.858,29.369
+	C130.959,293.166,129.894,293.616,128.786,293.616z"
+    />
+    <path
+      fill="#FF8163"
+      d="M446.987,150.649H205.423c-3.948,0-7.147,3.238-7.147,7.233v141.039
+	c4.181-3.178,9.377-5.063,15.008-5.063c13.816,0,25.014,11.335,25.014,25.316v28.208h258.719c3.948,0,7.147-3.238,7.147-7.233
+	V208.512C504.163,176.606,478.514,150.649,446.987,150.649z"
+    />
+    <path
+      opacity="0.1"
+      d="M446.987,150.649H205.423c-3.948,0-7.147,3.238-7.147,7.233v141.039
+	c4.181-3.178,9.377-5.063,15.008-5.063c6.884,0,13.117,2.814,17.639,7.368V179.64c0-3.995,3.198-7.233,7.147-7.233h241.566
+	c4.545,0,8.962,0.555,13.204,1.575C482.405,159.83,465.737,150.649,446.987,150.649z"
+    />
+    <path
+      fill="#B8D1DD"
+      d="M188.565,315.274H14.984c-3.931,0-7.147,3.255-7.147,7.233v17.642c0,3.978,3.216,7.233,7.147,7.233
+	H188.27v-28.208C188.27,317.848,188.371,316.546,188.565,315.274z"
+    />
+    <path
+      opacity="0.1"
+      d="M51.2,340.149v-17.642c0-3.978,3.216-7.233,7.147-7.233H14.984
+	c-3.931,0-7.147,3.255-7.147,7.233v17.642c0,3.978,3.216,7.233,7.147,7.233h43.363C54.416,347.382,51.2,344.127,51.2,340.149z"
+    />
+    <g>
+      <ellipse fill="#FFFFFF" cx="281.182" cy="236.857" rx="37.742" ry="38.2" />
+      <ellipse
+        fill="#FFFFFF"
+        cx="281.182"
+        cy="236.857"
+        rx="14.507"
+        ry="14.681"
+      />
+    </g>
+    <path
+      fill="#E84731"
+      d="M363.961,26.692h-82.782v50.629h82.782c3.932,0,7.147-3.254,7.147-7.233V33.925
+	C371.108,29.947,367.893,26.692,363.961,26.692z"
+    />
+    <rect x="281.182" y="26.692" opacity="0.1" width="21.774" height="50.625" />
+    <g>
+      <path
+        fill="#FFAA99"
+        d="M155.438,155.037c-0.722,0-1.415-0.293-1.925-0.812l-18.783-19.116
+		c-2.656-2.698-4.118-6.288-4.118-10.106c0-3.819,1.462-7.409,4.118-10.11c2.655-2.7,6.186-4.187,9.941-4.187
+		c3.755,0,7.286,1.487,9.942,4.187l0.824,0.84l0.825-0.84c2.655-2.7,6.186-4.187,9.942-4.187c3.753,0,7.285,1.487,9.94,4.187
+		c2.655,2.701,4.118,6.291,4.118,10.11c0,3.817-1.463,7.408-4.118,10.108l-18.782,19.114
+		C156.852,154.745,156.16,155.037,155.438,155.037z"
+      />
+      <path
+        fill="#FFAA99"
+        d="M205.593,90.172c-0.598,0-1.17-0.242-1.593-0.673l-15.548-15.826
+		c-2.2-2.234-3.411-5.205-3.411-8.366c0-3.162,1.21-6.134,3.411-8.37c2.197-2.235,5.119-3.466,8.229-3.466
+		c3.11,0,6.032,1.232,8.231,3.466l0.682,0.695l0.683-0.695c2.196-2.235,5.121-3.466,8.231-3.466c3.108,0,6.03,1.232,8.228,3.466
+		c2.2,2.236,3.411,5.208,3.411,8.37c0,3.162-1.211,6.133-3.411,8.369l-15.547,15.824C206.763,89.929,206.192,90.172,205.593,90.172z
+		"
+      />
+    </g>
+    <path
+      opacity="0.1"
+      d="M224.225,296.405c-3.305-1.63-7.016-2.546-10.941-2.546
+	c-13.816,0-25.014,11.335-25.014,25.316v28.208h21.881v-28.208C210.151,309.165,215.893,300.513,224.225,296.405z"
+    />
+    <path
+      d="M147.922,159.717c1.972,2.006,4.71,3.157,7.515,3.157c2.802,0,5.54-1.149,7.515-3.157l18.78-19.112
+	c4.106-4.175,6.368-9.718,6.368-15.603s-2.261-11.428-6.368-15.604c-4.14-4.21-9.654-6.529-15.527-6.529
+	c-3.837,0-7.519,0.988-10.768,2.848c-3.246-1.859-6.931-2.848-10.767-2.848c-5.873,0-11.388,2.319-15.528,6.529
+	c-4.106,4.175-6.368,9.718-6.368,15.604c0,5.89,2.262,11.431,6.366,15.599L147.922,159.717z M140.318,120.387
+	c1.187-1.207,2.692-1.845,4.353-1.845c1.661,0,3.167,0.638,4.35,1.84l0.824,0.84c1.472,1.502,3.487,2.346,5.59,2.347
+	c0,0,0.001,0,0.002,0c2.102,0,4.115-0.844,5.589-2.343l0.824-0.839c1.187-1.207,2.692-1.845,4.354-1.845
+	c1.66,0,3.165,0.637,4.351,1.844c1.224,1.244,1.87,2.841,1.87,4.616c0,1.749-0.665,3.388-1.871,4.615l-15.117,15.385l-15.124-15.392
+	c-1.204-1.223-1.866-2.859-1.866-4.608C138.449,123.227,139.095,121.631,140.318,120.387z"
+    />
+    <path
+      d="M198.419,95.001c1.884,1.912,4.499,3.008,7.174,3.008c2.712,0,5.257-1.066,7.185-3.018l15.544-15.822
+	c3.65-3.71,5.66-8.634,5.66-13.864s-2.01-10.154-5.658-13.864c-3.682-3.746-8.59-5.81-13.817-5.81c-3.154,0-6.193,0.751-8.914,2.169
+	c-2.722-1.418-5.761-2.169-8.913-2.169c-5.228,0-10.134,2.064-13.815,5.806c-3.651,3.71-5.661,8.635-5.661,13.867
+	c0,5.234,2.011,10.157,5.656,13.858L198.419,95.001z M194.04,62.431c0.722-0.735,1.635-1.123,2.639-1.123
+	c1.005,0,1.919,0.389,2.639,1.121l0.682,0.695c1.473,1.499,3.487,2.344,5.588,2.345c0.001,0,0.002,0,0.003,0
+	c2.101,0,4.113-0.843,5.587-2.341l0.685-0.697c1.444-1.467,3.833-1.471,5.283,0.001c0.76,0.772,1.16,1.766,1.16,2.875
+	c0,1.108-0.401,2.101-1.163,2.877l-11.55,11.757l-11.56-11.767c-0.758-0.768-1.157-1.761-1.157-2.867
+	C192.878,64.198,193.279,63.204,194.04,62.431z"
+    />
+    <path
+      d="M504.163,284.734c4.329,0,7.837-3.508,7.837-7.837v-68.385c0-36.228-29.164-65.7-65.012-65.7H289.017V85.159h74.945
+	c8.262,0,14.984-6.76,14.984-15.07V33.925c0-8.309-6.722-15.07-14.984-15.07h-74.945v-5.498c0-4.329-3.508-7.837-7.837-7.837
+	s-7.837,3.508-7.837,7.837v129.454h-67.92c-8.262,0-14.984,6.76-14.984,15.07v28.327h-77.591c-4.329,0-7.837,3.508-7.837,7.837
+	c0,4.329,3.508,7.837,7.837,7.837h77.591v13.199l-20.896,15.436c-0.99-1.441-2.104-2.81-3.353-4.079
+	c-5.564-5.658-12.972-8.775-20.86-8.775c-5.99,0-11.704,1.797-16.544,5.139c-4.84-3.342-10.553-5.139-16.543-5.139
+	c-7.889,0-15.297,3.116-20.861,8.775c-1.249,1.27-2.364,2.636-3.353,4.079l-38.759-28.635h31.188c4.329,0,7.837-3.508,7.837-7.837
+	c0-4.329-3.508-7.837-7.837-7.837H31.781c-7.278,0-13.199,5.96-13.199,13.286v107.944h-3.598c-8.262,0-14.984,6.76-14.984,15.07
+	v17.642c0,8.309,6.722,15.069,14.984,15.069h238.311v16.755c0,8.309,6.722,15.07,14.984,15.07h46.276v111.598
+	c0,4.329,3.508,7.837,7.837,7.837s7.837-3.508,7.837-7.837V387.043h31.902v111.598c0,4.329,3.508,7.837,7.837,7.837
+	s7.837-3.508,7.837-7.837V387.043h1.494c4.329,0,7.837-3.508,7.837-7.837c0-4.329-3.508-7.837-7.837-7.837h-110.33v-16.151h154.423
+	v16.151h-12.747c-4.329,0-7.837,3.508-7.837,7.837c0,4.329,3.508,7.837,7.837,7.837h13.436c8.262,0,14.984-6.76,14.984-15.07
+	v-16.755h57.951c8.262,0,14.984-6.76,14.984-15.07v-32.95c0-4.329-3.508-7.837-7.837-7.837s-7.837,3.508-7.837,7.837v32.346H246.135
+	v-20.371c0-18.28-14.737-33.153-32.851-33.153c-2.464,0-4.861,0.289-7.171,0.811V158.485h67.231v33.027
+	c-21.41,3.765-37.745,22.658-37.745,45.341c0,25.385,20.448,46.037,45.582,46.037c25.134,0,45.582-20.652,45.582-46.037
+	c0-22.684-16.335-41.576-37.745-45.341v-33.027H446.99c27.205,0,49.339,22.442,49.339,50.027v68.385
+	C496.327,281.226,499.834,284.734,504.163,284.734z M289.017,34.529h74.255v34.956h-74.255V34.529z M102.557,237.428
+	c2.593-2.637,6.033-4.091,9.686-4.091c3.653,0,7.093,1.453,9.686,4.089l1.267,1.289c1.473,1.499,3.487,2.344,5.588,2.344
+	c0.001,0,0.001,0,0.001,0c2.102,0,4.115-0.844,5.589-2.342l1.267-1.289c2.594-2.637,6.035-4.091,9.689-4.091
+	c3.652,0,7.091,1.453,9.684,4.091c2.631,2.676,4.079,6.241,4.079,10.038c0,3.797-1.449,7.362-4.081,10.038l-26.226,26.691
+	l-26.231-26.697c-2.63-2.672-4.077-6.235-4.077-10.033C98.477,243.668,99.927,240.102,102.557,237.428z M180.433,339.545H15.673
+	v-16.434h164.76V339.545z M190.439,295.392c-3.43,3.358-6.146,7.457-7.873,12.046H34.255v-97.161l48.579,35.891
+	c-0.018,0.432-0.03,0.864-0.03,1.299c0,7.938,3.047,15.405,8.575,21.022l28.852,29.363c2.241,2.288,5.359,3.601,8.555,3.601
+	c3.191,0,6.306-1.31,8.548-3.592l28.856-29.367c5.532-5.625,8.578-13.092,8.578-21.026c0-0.435-0.014-0.867-0.03-1.299l15.702-11.6
+	L190.439,295.392L190.439,295.392z M213.284,301.695c9.471,0,17.177,7.841,17.177,17.479v20.371h-34.354v-20.371
+	C196.106,309.536,203.813,301.695,213.284,301.695z M281.18,230.011c3.678,0,6.67,3.07,6.67,6.842c0,3.774-2.992,6.846-6.67,6.846
+	c-3.679,0-6.672-3.071-6.672-6.846C274.508,233.08,277.501,230.011,281.18,230.011z M311.088,236.854
+	c0,16.741-13.417,30.364-29.908,30.364s-29.908-13.621-29.908-30.364c0-13.989,9.37-25.792,22.071-29.297v8.238
+	c-8.462,3.208-14.508,11.425-14.508,21.058c0,12.418,10.024,22.52,22.345,22.52c12.319,0,22.343-10.102,22.343-22.52
+	c0-9.634-6.047-17.849-14.506-21.058v-8.238C301.718,211.062,311.088,222.865,311.088,236.854z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/wings.tsx b/libs/icons/valentines/src/lib/wings.tsx
new file mode 100644
index 000000000..4901c3c52
--- /dev/null
+++ b/libs/icons/valentines/src/lib/wings.tsx
@@ -0,0 +1,133 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesWings';
+
+export const ValentinesWings = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path
+      fill="#FFE29E"
+      d="M471.149,62.223c18.051,0,32.681,14.63,32.681,32.681c0,18.04-14.63,32.681-32.681,32.681
+   c18.051,0,32.681,14.63,32.681,32.681c0,18.04-14.63,32.681-32.681,32.681c18.051,0,32.681,14.63,32.681,32.681
+   c0,18.04-14.63,32.681-32.681,32.681c18.051,0,32.681,14.63,32.681,32.681c0,18.04-14.63,32.681-32.681,32.681h-32.681
+   l-32.681-130.723l44.37-128.556C456.955,62.963,463.97,62.223,471.149,62.223z"
+    />
+    <path
+      fill="#FFF1CF"
+      d="M450.157,64.391c12.277,4.684,20.992,16.58,20.992,30.513c0,18.04-14.63,32.681-32.681,32.681
+   c18.051,0,32.681,14.63,32.681,32.681c0,18.04-14.63,32.681-32.681,32.681c18.051,0,32.681,14.63,32.681,32.681
+   c0,18.04-14.63,32.681-32.681,32.681c18.051,0,32.681,14.63,32.681,32.681c0,18.04-14.63,32.681-32.681,32.681h-0.588
+   c0,36.091-29.271,65.362-65.362,65.362H139.482c-36.091,0-65.362-29.271-65.362-65.362H40.851
+   c-18.051,0-32.681-14.641-32.681-32.681c0-18.051,14.63-32.681,32.681-32.681c-18.051,0-32.681-14.641-32.681-32.681
+   c0-18.051,14.63-32.681,32.681-32.681c-18.051,0-32.681-14.641-32.681-32.681c0-18.051,14.63-32.681,32.681-32.681
+   c-18.051,0-32.681-14.641-32.681-32.681c0-18.051,14.63-32.681,32.681-32.681c43.585,0,81.375,27.441,97.345,65.209l65.111,162.729
+   h105.385l65.111-162.729C387.148,95.884,415.7,71.548,450.157,64.391z"
+    />
+    <path
+      fill="#E44670"
+      d="M309.335,241.133c-2.429,0-4.837,0.142-7.19,0.425L256,449.778
+   c1.754-0.959,114.361-62.813,114.361-147.619C370.361,268.454,343.04,241.133,309.335,241.133z"
+    />
+    <path
+      fill="#FF6288"
+      d="M302.145,241.558c23.084,3.584,40.982,29.347,40.982,60.601c0,84.665-85.526,146.465-87.127,147.619
+   c-0.022,0.011-114.405-62.148-114.405-147.619c0-33.705,27.321-61.026,61.026-61.026c22.975,0,42.954,12.724,53.357,31.493
+   C265.281,255.85,282.232,243.9,302.145,241.558z"
+    />
+    <path
+      d="M512,160.262c0-13.348-6.435-25.221-16.365-32.681C505.565,120.121,512,108.248,512,94.9
+   c0-22.526-18.325-40.851-40.851-40.851c-22.676,0-44.687,6.874-63.649,19.876c-18.372,12.597-32.627,30.001-41.225,50.326
+   c-0.021,0.049-0.041,0.099-0.061,0.148l-34.389,85.952c-1.677,4.19,0.362,8.945,4.55,10.62c4.19,1.679,8.944-0.363,10.621-4.55
+   l34.358-85.875c15.254-35.984,51.331-60.158,89.794-60.158c13.516,0,24.511,10.996,24.511,24.511s-10.995,24.511-24.511,24.511
+   c-4.512,0-8.17,3.657-8.17,8.17c0,4.513,3.658,8.17,8.17,8.17c13.516,0,24.511,10.996,24.511,24.511s-10.995,24.511-24.511,24.511
+   c-4.512,0-8.17,3.657-8.17,8.17s3.658,8.17,8.17,8.17c13.516,0,24.511,10.996,24.511,24.511c0,13.515-10.995,24.511-24.511,24.511
+   c-4.512,0-8.17,3.657-8.17,8.17c0,4.513,3.658,8.17,8.17,8.17c13.516,0,24.511,10.996,24.511,24.511
+   c0,13.515-10.995,24.511-24.511,24.511h-33.273c-4.512,0-8.17,3.657-8.17,8.17c0,31.535-25.656,57.191-57.191,57.191h-23.452
+   c19.399-25.966,29.491-52.676,29.491-78.709c0-38.153-31.04-69.194-69.193-69.194c-20.837,0-40.348,9.418-53.36,25.201
+   c-13.012-15.784-32.522-25.201-53.36-25.201c-38.153,0-69.193,31.04-69.193,69.194c0,26.032,10.092,52.743,29.491,78.709h-23.452
+   c-31.536,0-57.191-25.657-57.191-57.191c0-4.513-3.658-8.17-8.17-8.17H40.851c-13.516,0-24.511-10.996-24.511-24.511
+   c0-13.515,10.995-24.511,24.511-24.511c4.512,0,8.17-3.657,8.17-8.17c0-4.513-3.658-8.17-8.17-8.17
+   c-13.516,0-24.511-10.996-24.511-24.511c0-13.515,10.995-24.511,24.511-24.511c4.512,0,8.17-3.657,8.17-8.17s-3.658-8.17-8.17-8.17
+   c-13.516,0-24.511-10.996-24.511-24.511s10.995-24.511,24.511-24.511c4.512,0,8.17-3.657,8.17-8.17c0-4.513-3.658-8.17-8.17-8.17
+   c-13.516,0-24.511-10.996-24.511-24.511s10.995-24.511,24.511-24.511c38.464,0,74.54,24.173,89.794,60.158l34.358,85.875
+   c1.677,4.19,6.428,6.231,10.621,4.55c4.19-1.675,6.227-6.43,4.55-10.62L145.786,124.4c-0.02-0.049-0.04-0.099-0.061-0.148
+   c-8.597-20.325-22.853-37.729-41.225-50.326C85.538,60.923,63.527,54.049,40.851,54.049C18.325,54.049,0,72.374,0,94.9
+   c0,13.348,6.435,25.221,16.365,32.681C6.435,135.041,0,146.914,0,160.262c0,13.348,6.435,25.221,16.365,32.681
+   C6.435,200.403,0,212.276,0,225.624c0,13.348,6.435,25.221,16.365,32.681C6.435,265.764,0,277.637,0,290.985
+   c0,22.526,18.325,40.851,40.851,40.851h25.554c4.077,36.714,35.296,65.362,73.081,65.362h36.973
+   c5.164,5.67,10.774,11.289,16.827,16.842c29.002,26.596,57.609,42.266,58.812,42.92c1.217,0.66,2.559,0.991,3.901,0.991
+   s2.684-0.331,3.901-0.991c1.204-0.655,29.81-16.324,58.812-42.92c6.055-5.552,11.665-11.171,16.827-16.842h36.973
+   c37.784,0,69.003-28.648,73.081-65.362h25.554c22.526,0,40.851-18.325,40.851-40.851c0-13.348-6.435-25.221-16.365-32.681
+   c9.931-7.46,16.365-19.333,16.365-32.681c0-13.348-6.435-25.221-16.365-32.681C505.565,185.484,512,173.61,512,160.262z
+    M256,440.347c-19.609-11.676-106.213-67.278-106.213-138.196c0-29.144,23.71-52.854,52.853-52.854
+   c19.177,0,36.886,10.453,46.214,27.28c1.44,2.597,4.176,4.208,7.146,4.208s5.706-1.611,7.146-4.208
+   c9.328-16.826,27.037-27.28,46.214-27.28c29.143,0,52.853,23.71,52.853,52.854C362.213,373.069,275.608,428.671,256,440.347z"
+    />
+    <g>
+      <path
+        fill="#FFFFFF"
+        d="M89.872,184.773c-13.516,0-24.511-10.996-24.511-24.511c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17c0,4.506,3.665,8.17,8.17,8.17s8.17-3.665,8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17C114.383,173.777,103.388,184.773,89.872,184.773z"
+      />
+      <path
+        fill="#FFFFFF"
+        d="M106.213,233.794c-13.516,0-24.511-10.996-24.511-24.511c0-4.513,3.658-8.17,8.17-8.17
+       s8.17,3.657,8.17,8.17c0,4.506,3.665,8.17,8.17,8.17s8.17-3.665,8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17C130.723,222.798,119.728,233.794,106.213,233.794z"
+      />
+      <path
+        fill="#FFFFFF"
+        d="M89.872,282.815c-13.516,0-24.511-10.996-24.511-24.511c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17c0,4.506,3.665,8.17,8.17,8.17s8.17-3.665,8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17C114.383,271.819,103.388,282.815,89.872,282.815z"
+      />
+    </g>
+    <path
+      d="M372.514,397.198h-40.596c-4.512,0-8.17-3.657-8.17-8.17c0-4.513,3.658-8.17,8.17-8.17h40.596
+   c31.536,0,57.191-25.657,57.191-57.191c0-4.513,3.658-8.17,8.17-8.17h33.273c13.516,0,24.511-10.996,24.511-24.511
+   c0-13.515-10.995-24.511-24.511-24.511c-4.512,0-8.17-3.657-8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+   c13.516,0,24.511-10.996,24.511-24.511c0-13.515-10.995-24.511-24.511-24.511c-4.512,0-8.17-3.657-8.17-8.17s3.658-8.17,8.17-8.17
+   c13.516,0,24.511-10.996,24.511-24.511c0-13.515-10.995-24.511-24.511-24.511c-4.512,0-8.17-3.657-8.17-8.17s3.658-8.17,8.17-8.17
+   c13.516,0,24.511-10.996,24.511-24.511S484.665,70.39,471.149,70.39c-38.464,0-74.54,24.173-89.794,60.158l-34.358,85.875
+   c-1.677,4.188-6.431,6.229-10.621,4.55c-4.19-1.675-6.227-6.43-4.55-10.62l34.389-85.952c0.02-0.049,0.04-0.099,0.061-0.148
+   c8.597-20.325,22.853-37.729,41.225-50.326c18.964-13.004,40.973-19.876,63.649-19.876C493.675,54.05,512,72.376,512,94.901
+   c0,13.348-6.435,25.221-16.365,32.681c9.931,7.46,16.365,19.333,16.365,32.681c0,13.348-6.435,25.221-16.365,32.681
+   c9.931,7.46,16.365,19.333,16.365,32.681s-6.435,25.221-16.365,32.681c9.931,7.46,16.365,19.333,16.365,32.681
+   c0,22.526-18.325,40.851-40.851,40.851h-25.554C441.517,368.55,410.298,397.198,372.514,397.198z"
+    />
+    <g>
+      <path
+        fill="#FFFFFF"
+        d="M422.128,184.773c-13.516,0-24.511-10.996-24.511-24.511c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17c0,4.506,3.665,8.17,8.17,8.17s8.17-3.665,8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17C446.638,173.777,435.643,184.773,422.128,184.773z"
+      />
+      <path
+        fill="#FFFFFF"
+        d="M405.787,233.794c-13.516,0-24.511-10.996-24.511-24.511c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17c0,4.506,3.665,8.17,8.17,8.17s8.17-3.665,8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17C430.298,222.798,419.303,233.794,405.787,233.794z"
+      />
+      <path
+        fill="#FFFFFF"
+        d="M422.128,282.815c-13.516,0-24.511-10.996-24.511-24.511c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17c0,4.506,3.665,8.17,8.17,8.17s8.17-3.665,8.17-8.17c0-4.513,3.658-8.17,8.17-8.17
+       c4.512,0,8.17,3.657,8.17,8.17C446.638,271.819,435.643,282.815,422.128,282.815z"
+      />
+    </g>
+    <path
+      fill="#FFD764"
+      d="M256,182.742c-19.054,0-37.077-5.02-50.75-14.136c-14.691-9.793-22.782-23.151-22.782-37.609
+   c0-14.458,8.091-27.815,22.782-37.609c13.673-9.115,31.696-14.136,50.75-14.136s37.078,5.02,50.75,14.136
+   c14.691,9.794,22.782,23.151,22.782,37.609c0,14.458-8.091,27.816-22.782,37.609C293.078,177.722,275.054,182.742,256,182.742z
+    M256,95.593c-31.001,0-57.191,16.213-57.191,35.404s26.19,35.404,57.191,35.404s57.191-16.213,57.191-35.404
+   S287.001,95.593,256,95.593z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/icons/valentines/src/lib/world.tsx b/libs/icons/valentines/src/lib/world.tsx
new file mode 100644
index 000000000..8b3656f6e
--- /dev/null
+++ b/libs/icons/valentines/src/lib/world.tsx
@@ -0,0 +1,245 @@
+import { createSvgIcon } from '@mui/material';
+
+const name = 'ValentinesWorld';
+
+export const ValentinesWorld = createSvgIcon(
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512.001 512.001"
+  >
+    <path
+      fill="#6CDFB4"
+      d="M256.001,111.115l0.229,8.595L359.25,267.385L400.886,256
+	C400.886,175.986,336.014,111.115,256.001,111.115z"
+    />
+    <path
+      fill="#7BFFCD"
+      d="M359.61,256c0,3.835-0.12,7.626-0.359,11.384l-67.475,18.432l-35.775,115.069
+	c-80.014,0-144.885-64.871-144.885-144.885l115.069-35.775l30.045-100.515C313.345,119.873,359.61,180.823,359.61,256z"
+    />
+    <path
+      fill="#5DC09A"
+      d="M359.61,256L256.001,392.29v8.595c80.014,0,144.885-64.871,144.885-144.885H359.61z"
+    />
+    <path
+      fill="#6CDFB4"
+      d="M256.001,256H359.61c0,75.275-46.385,136.29-103.609,136.29L256.001,256L256.001,256z"
+    />
+    <path
+      fill="#CAFFEB"
+      d="M256.001,111.115V256H111.115C111.115,175.986,175.987,111.115,256.001,111.115z"
+    />
+    <g>
+      <path
+        fill="#FF6288"
+        d="M240.755,8.17c6.566,0,12.273,3.634,15.246,8.997c2.973-5.362,8.68-8.997,15.246-8.997
+		c9.629,0,17.435,7.806,17.435,17.435c0,24.421-32.681,42.18-32.681,42.18s-32.681-17.76-32.681-42.18
+		C223.32,15.977,231.126,8.17,240.755,8.17z"
+      />
+      <path
+        fill="#FF6288"
+        d="M118.883,48.996c5.685-3.282,12.446-2.989,17.701,0.169c-0.107-6.13,3.019-12.131,8.705-15.414
+		c8.339-4.815,19.002-1.958,23.817,6.381c12.211,21.149-7.213,52.87-7.213,52.87s-37.182,0.96-49.393-20.189
+		C107.686,64.474,110.544,53.81,118.883,48.996z"
+      />
+      <path
+        fill="#FF6288"
+        d="M33.751,145.288c3.282-5.685,9.285-8.812,15.414-8.705c-3.157-5.255-3.451-12.016-0.169-17.701
+		c4.815-8.339,15.478-11.196,23.817-6.381c21.149,12.211,20.189,49.393,20.189,49.393s-31.721,19.422-52.87,7.213
+		C31.794,164.291,28.936,153.627,33.751,145.288z"
+      />
+      <path
+        fill="#FF6288"
+        d="M8.171,271.246c0-6.566,3.634-12.273,8.997-15.246c-5.362-2.973-8.997-8.68-8.997-15.246
+		c0-9.629,7.806-17.435,17.435-17.435c24.421,0,42.18,32.681,42.18,32.681s-17.76,32.681-42.18,32.681
+		C15.977,288.681,8.171,280.874,8.171,271.246z"
+      />
+      <path
+        fill="#FF6288"
+        d="M48.997,393.118c-3.282-5.685-2.989-12.446,0.169-17.701c-6.13,0.107-12.131-3.019-15.414-8.705
+		c-4.815-8.339-1.958-19.002,6.381-23.817c21.149-12.211,52.87,7.213,52.87,7.213s0.96,37.182-20.189,49.393
+		C64.474,404.314,53.811,401.457,48.997,393.118z"
+      />
+      <path
+        fill="#FF6288"
+        d="M145.289,478.249c-5.685-3.282-8.812-9.285-8.705-15.414c-5.255,3.157-12.016,3.451-17.701,0.169
+		c-8.339-4.815-11.196-15.478-6.381-23.817c12.211-21.149,49.393-20.189,49.393-20.189s19.422,31.721,7.213,52.87
+		C164.292,480.207,153.628,483.064,145.289,478.249z"
+      />
+      <path
+        fill="#FF6288"
+        d="M271.246,503.83c-6.566,0-12.273-3.634-15.246-8.997c-2.973,5.362-8.68,8.997-15.246,8.997
+		c-9.629,0-17.435-7.806-17.435-17.435c0-24.421,32.681-42.18,32.681-42.18s32.681,17.76,32.681,42.18
+		C288.681,496.023,280.875,503.83,271.246,503.83z"
+      />
+      <path
+        fill="#FF6288"
+        d="M393.118,463.004c-5.685,3.282-12.446,2.989-17.701-0.169c0.107,6.13-3.019,12.131-8.705,15.414
+		c-8.339,4.815-19.002,1.958-23.817-6.382c-12.211-21.149,7.213-52.87,7.213-52.87s37.182-0.96,49.393,20.189
+		C404.315,447.526,401.458,458.19,393.118,463.004z"
+      />
+      <path
+        fill="#FF6288"
+        d="M478.25,366.712c-3.282,5.685-9.285,8.812-15.414,8.705c3.157,5.255,3.451,12.016,0.169,17.701
+		c-4.815,8.339-15.478,11.196-23.817,6.381c-21.149-12.211-20.189-49.393-20.189-49.393s31.721-19.422,52.87-7.213
+		C480.208,347.709,483.065,358.373,478.25,366.712z"
+      />
+      <path
+        fill="#FF6288"
+        d="M503.83,240.754c0,6.566-3.634,12.273-8.997,15.246c5.362,2.973,8.997,8.68,8.997,15.246
+		c0,9.629-7.806,17.435-17.435,17.435c-24.421,0-42.18-32.681-42.18-32.681s17.76-32.681,42.18-32.681
+		C496.024,223.319,503.83,231.126,503.83,240.754z"
+      />
+      <path
+        fill="#FF6288"
+        d="M463.004,118.882c3.282,5.685,2.989,12.446-0.169,17.701c6.13-0.107,12.131,3.019,15.414,8.705
+		c4.815,8.339,1.958,19.002-6.382,23.817c-21.149,12.211-52.87-7.213-52.87-7.213s-0.96-37.182,20.189-49.393
+		C447.527,107.686,458.19,110.543,463.004,118.882z"
+      />
+      <path
+        fill="#FF6288"
+        d="M366.712,33.751c5.685,3.282,8.812,9.285,8.705,15.414c5.255-3.157,12.016-3.451,17.701-0.169
+		c8.339,4.815,11.196,15.478,6.381,23.817c-12.211,21.149-49.393,20.189-49.393,20.189s-19.422-31.721-7.213-52.87
+		C347.71,31.793,358.373,28.936,366.712,33.751z"
+      />
+    </g>
+    <path
+      d="M102.945,256c0,84.395,68.66,153.055,153.055,153.055S409.056,340.395,409.056,256s-68.66-153.055-153.055-153.055
+	S102.945,171.605,102.945,256z M392.715,256c0,75.385-61.33,136.715-136.715,136.715S119.286,331.385,119.286,256
+	s61.33-136.715,136.715-136.715S392.715,180.615,392.715,256z"
+    />
+    <path
+      d="M247.83,143.78V196.9c-16.217-0.955-31.974-4.731-46.679-11.186c2.393-8.26,5.205-16.07,8.443-23.262
+	c1.852-4.115,0.019-8.952-4.097-10.803c-4.111-1.852-8.951-0.019-10.803,4.097c-3.142,6.98-5.924,14.468-8.333,22.354
+	c-2.699-1.604-5.359-3.291-7.96-5.088c-3.716-2.564-8.802-1.634-11.367,2.077c-2.564,3.713-1.634,8.801,2.077,11.367
+	c4.194,2.898,8.518,5.548,12.936,7.994c-3.793,16.758-6.027,34.826-6.535,53.38h-31.731c-4.513,0-8.17,3.657-8.17,8.17
+	s3.657,8.17,8.17,8.17h31.729c0.507,18.588,2.726,36.652,6.517,53.392c-4.409,2.441-8.725,5.087-12.91,7.98
+	c-3.711,2.564-4.643,7.654-2.077,11.367c1.586,2.294,4.136,3.526,6.73,3.526c1.601,0,3.219-0.471,4.637-1.449
+	c2.604-1.799,5.265-3.488,7.967-5.093c2.657,8.69,5.756,16.912,9.305,24.502c1.388,2.969,4.332,4.712,7.407,4.712
+	c1.158,0,2.337-0.248,3.455-0.771c4.087-1.911,5.852-6.774,3.94-10.862c-3.613-7.728-6.729-16.186-9.339-25.184
+	c14.709-6.457,30.469-10.236,46.692-11.19v53.119c0,4.513,3.657,8.17,8.17,8.17c4.513,0,8.17-3.657,8.17-8.17V315.1
+	c16.223,0.955,31.983,4.733,46.692,11.19c-2.61,9-5.728,17.46-9.342,25.19c-1.912,4.087-0.147,8.951,3.94,10.862
+	c1.119,0.523,2.296,0.771,3.455,0.771c3.073,0,6.018-1.744,7.407-4.711c3.549-7.592,6.649-15.818,9.307-24.508
+	c2.699,1.604,5.359,3.291,7.96,5.088c3.711,2.564,8.801,1.634,11.366-2.078c2.565-3.713,1.634-8.801-2.078-11.366
+	c-4.184-2.89-8.497-5.534-12.902-7.974c3.791-16.74,6.01-34.805,6.517-53.393h31.728c4.513,0,8.17-3.657,8.17-8.17
+	s-3.657-8.17-8.17-8.17h-31.728c-0.507-18.588-2.726-36.652-6.517-53.392c4.41-2.442,8.726-5.089,12.913-7.982
+	c3.711-2.565,4.643-7.654,2.077-11.367c-2.564-3.711-7.652-4.642-11.367-2.077c-2.605,1.8-5.266,3.489-7.97,5.095
+	c-2.657-8.69-5.757-16.912-9.305-24.502c-1.912-4.088-6.775-5.855-10.862-3.94c-4.087,1.911-5.852,6.774-3.94,10.862
+	c3.613,7.728,6.729,16.186,9.339,25.184c-14.709,6.458-30.469,10.236-46.692,11.19V143.78c0-4.513-3.657-8.17-8.17-8.17
+	C251.488,135.61,247.83,139.268,247.83,143.78z M197.166,201.762c16.025,6.684,33.106,10.579,50.664,11.503v34.565h-55.97
+	C192.321,231.839,194.128,216.284,197.166,201.762z M197.16,310.241c-3.035-14.507-4.842-30.051-5.301-46.071h55.971v34.565
+	C230.27,299.659,213.186,303.555,197.16,310.241z M314.841,310.241c-16.027-6.687-33.11-10.582-50.671-11.506V264.17h55.971
+	C319.684,280.19,317.876,295.734,314.841,310.241z M314.841,201.758c3.035,14.507,4.842,30.051,5.301,46.071h-55.971v-34.565
+	C281.731,212.341,298.815,208.445,314.841,201.758z"
+    />
+    <path
+      d="M252.1,74.964c1.216,0.66,2.559,0.991,3.901,0.991c1.342,0,2.685-0.331,3.901-0.991c1.509-0.82,36.95-20.412,36.95-49.36
+	C296.852,11.486,285.365,0,271.246,0c-5.582,0-10.906,1.825-15.246,5.046C251.661,1.825,246.337,0,240.755,0
+	c-14.119,0-25.605,11.486-25.605,25.605C215.149,54.552,250.591,74.145,252.1,74.964z M240.755,16.34c3.36,0,6.463,1.834,8.1,4.788
+	c1.439,2.598,4.176,4.209,7.146,4.209c2.971,0,5.706-1.611,7.146-4.209c1.637-2.953,4.741-4.788,8.1-4.788
+	c5.108,0,9.265,4.156,9.265,9.265c0,13.726-15.189,26.544-24.466,32.613c-7.767-5.125-24.555-17.91-24.555-32.613
+	C231.49,20.496,235.646,16.34,240.755,16.34z"
+    />
+    <path
+      d="M161.157,101.179c0.615,0,0.947-0.01,0.947-0.01c2.76-0.077,5.315-1.546,6.757-3.901
+	c0.897-1.464,21.794-36.154,7.321-61.221c-4.561-7.899-13.064-12.805-22.191-12.805c-4.473,0-8.895,1.187-12.786,3.433
+	c-4.832,2.791-8.53,7.031-10.679,11.988c-5.389-0.623-10.979,0.517-15.728,3.257c-12.227,7.059-16.431,22.75-9.373,34.977
+	C118.767,100.009,154.191,101.179,161.157,101.179z M122.968,56.072c1.425-0.822,2.972-1.24,4.597-1.24
+	c1.693,0,3.356,0.463,4.812,1.337c2.545,1.529,5.72,1.558,8.292,0.072c2.571-1.484,4.135-4.247,4.084-7.217
+	c-0.059-3.377,1.711-6.518,4.62-8.197c1.411-0.814,3.008-1.244,4.617-1.244c3.308,0,6.389,1.776,8.041,4.635
+	c6.872,11.902,0.101,30.63-4.897,40.507c-12.41-0.687-30.975-4.594-37.558-15.995C117.022,64.303,118.543,58.625,122.968,56.072z"
+    />
+    <path
+      d="M76.897,105.424c-3.89-2.246-8.312-3.433-12.785-3.433c-9.128,0-17.631,4.906-22.191,12.805
+	c-2.792,4.836-3.874,10.362-3.252,15.734c-4.965,2.156-9.214,5.857-11.994,10.674c-7.058,12.227-2.854,27.918,9.373,34.976
+	c5.89,3.401,12.786,5.125,20.494,5.125c20.167,0,39.897-11.938,40.727-12.446c2.362-1.446,3.83-3.989,3.901-6.757
+	C101.214,160.387,101.967,119.898,76.897,105.424z M56.542,164.966c-4.803,0-8.95-0.987-12.324-2.936
+	c-4.425-2.555-5.946-8.232-3.391-12.656c1.647-2.851,4.726-4.622,8.036-4.622l0.161,0.001c2.95,0.034,5.732-1.512,7.217-4.084
+	c1.485-2.572,1.458-5.746-0.072-8.292c-1.74-2.894-1.776-6.5-0.097-9.409c1.651-2.86,4.732-4.635,8.041-4.635
+	c1.633,0,3.186,0.418,4.616,1.244c11.895,6.868,15.399,26.455,16.013,37.511C78.871,160.04,67.448,164.966,56.542,164.966z"
+    />
+    <path
+      d="M74.965,259.901c1.322-2.433,1.322-5.369,0-7.802c-0.82-1.509-20.412-36.95-49.36-36.95
+	c-14.118,0-25.604,11.486-25.604,25.605c0,5.582,1.825,10.906,5.046,15.246c-3.221,4.34-5.046,9.664-5.046,15.246
+	c0,14.119,11.486,25.605,25.605,25.605C54.553,296.851,74.146,261.41,74.965,259.901z M16.341,271.246c0-3.36,1.834-6.463,4.788-8.1
+	c2.598-1.439,4.209-4.176,4.209-7.146s-1.611-5.706-4.209-7.146c-2.953-1.637-4.788-4.741-4.788-8.101
+	c0-5.108,4.156-9.265,9.265-9.265c13.729,0,26.55,15.197,32.613,24.465c-5.125,7.767-17.91,24.556-32.613,24.556
+	C20.497,280.511,16.341,276.355,16.341,271.246z"
+    />
+    <path
+      d="M97.27,343.139c-0.831-0.508-20.558-12.446-40.728-12.446c-7.708,0-14.604,1.724-20.494,5.125
+	c-12.227,7.058-16.431,22.75-9.373,34.977c2.78,4.815,7.03,8.517,11.994,10.672c-0.621,5.373,0.46,10.898,3.252,15.734
+	c4.561,7.899,13.064,12.805,22.191,12.805c4.473,0,8.895-1.187,12.786-3.433c25.068-14.473,24.316-54.963,24.271-56.678
+	C101.099,347.128,99.63,344.585,97.27,343.139z M68.729,392.424c-1.411,0.814-3.008,1.244-4.617,1.244
+	c-3.308,0-6.389-1.776-8.041-4.635c-1.679-2.909-1.643-6.513,0.097-9.409c1.529-2.546,1.558-5.72,0.072-8.292
+	c-1.461-2.531-4.159-4.085-7.074-4.085c-0.048,0-0.096,0-0.143,0.001l-0.161,0.001c-3.311,0.001-6.389-1.771-8.036-4.621
+	c-2.555-4.426-1.033-10.103,3.391-12.657c3.375-1.949,7.521-2.936,12.324-2.936c10.909,0,22.334,4.927,28.198,7.879
+	C84.125,365.978,80.621,385.559,68.729,392.424z"
+    />
+    <path
+      d="M162.105,410.831c0,0-0.331-0.01-0.948-0.01c-6.966,0-42.389,1.17-55.732,24.282c-7.058,12.227-2.854,27.917,9.373,34.976
+	c4.747,2.741,10.333,3.886,15.728,3.257c2.149,4.958,5.847,9.199,10.68,11.988c3.89,2.246,8.312,3.433,12.785,3.433
+	c9.128,0,17.631-4.906,22.191-12.805c14.473-25.068-6.423-59.757-7.321-61.221C167.419,412.377,164.865,410.908,162.105,410.831z
+	 M162.03,467.783c-1.651,2.86-4.732,4.635-8.041,4.635c-1.633,0-3.186-0.418-4.616-1.244c-2.91-1.68-4.68-4.822-4.621-8.197
+	c0.051-2.97-1.513-5.733-4.084-7.217c-1.265-0.731-2.675-1.095-4.085-1.095c-1.458,0-2.914,0.389-4.207,1.167
+	c-1.455,0.874-3.119,1.337-4.812,1.337c-1.625,0-3.172-0.417-4.597-1.24c-4.425-2.555-5.946-8.232-3.391-12.656
+	c6.573-11.385,25.092-15.297,37.503-15.993C161.247,435.614,169.376,455.06,162.03,467.783z"
+    />
+    <path
+      d="M259.902,437.036c-2.431-1.321-5.371-1.321-7.802,0c-1.509,0.82-36.95,20.412-36.95,49.36
+	c0,14.119,11.486,25.605,25.605,25.605c5.582,0,10.906-1.825,15.246-5.046c4.34,3.221,9.664,5.046,15.246,5.046
+	c14.119,0,25.605-11.486,25.605-25.605C296.852,457.448,261.41,437.856,259.902,437.036z M271.246,495.66
+	c-3.36,0-6.463-1.834-8.1-4.788c-1.439-2.598-4.176-4.209-7.146-4.209c-2.971,0-5.706,1.611-7.146,4.209
+	c-1.637,2.953-4.741,4.788-8.101,4.788c-5.108,0-9.265-4.156-9.265-9.265c0-13.729,15.197-26.55,24.465-32.613
+	c7.767,5.125,24.556,17.91,24.556,32.613C280.511,491.504,276.355,495.66,271.246,495.66z"
+    />
+    <path
+      d="M350.844,410.821c-0.616,0-0.947,0.01-0.947,0.01c-2.76,0.077-5.315,1.546-6.757,3.901
+	c-0.897,1.464-21.794,36.154-7.321,61.221c4.561,7.899,13.064,12.807,22.191,12.805c4.474,0,8.896-1.187,12.786-3.433
+	c4.832-2.791,8.53-7.031,10.679-11.988c5.388,0.625,10.98-0.517,15.728-3.257c12.227-7.059,16.431-22.75,9.373-34.977
+	C393.234,411.991,357.81,410.821,350.844,410.821z M389.033,455.928c-1.425,0.822-2.972,1.24-4.597,1.24
+	c-1.693,0-3.356-0.463-4.812-1.337c-2.545-1.528-5.719-1.556-8.292-0.072c-2.571,1.484-4.135,4.247-4.084,7.217
+	c0.059,3.377-1.711,6.518-4.62,8.197c-1.411,0.814-3.008,1.244-4.618,1.244c-3.307,0-6.388-1.776-8.04-4.635
+	c-6.872-11.902-0.101-30.63,4.897-40.507c12.41,0.687,30.975,4.594,37.558,15.995C394.979,447.697,393.458,453.375,389.033,455.928z
+	"
+    />
+    <path
+      d="M475.954,335.819c-5.89-3.401-12.786-5.125-20.494-5.125c-20.167,0-39.897,11.938-40.727,12.446
+	c-2.362,1.446-3.83,3.989-3.901,6.757c-0.045,1.716-0.796,42.205,24.272,56.678c3.89,2.247,8.312,3.433,12.786,3.433
+	c9.128,0,17.63-4.908,22.19-12.805c2.792-4.836,3.874-10.362,3.252-15.734c4.965-2.156,9.214-5.858,11.994-10.674
+	C492.384,358.569,488.181,342.878,475.954,335.819z M471.175,362.627c-1.647,2.851-4.726,4.622-8.036,4.622l-0.161-0.001
+	c-2.997-0.057-5.733,1.512-7.217,4.084c-1.485,2.572-1.458,5.746,0.072,8.292c1.74,2.894,1.776,6.5,0.097,9.409
+	c-1.651,2.858-4.732,4.635-8.041,4.635c-1.633,0-3.186-0.418-4.616-1.244c-11.895-6.868-15.399-26.455-16.013-37.511
+	c5.87-2.954,17.293-7.879,28.199-7.879c4.803,0,8.95,0.987,12.324,2.936C472.208,352.524,473.729,358.202,471.175,362.627z"
+    />
+    <path
+      d="M512.001,240.754c0-14.119-11.486-25.605-25.605-25.605c-28.947,0-48.54,35.441-49.36,36.95
+	c-1.322,2.433-1.322,5.369,0,7.802c0.82,1.509,20.412,36.95,49.36,36.95c14.119,0,25.605-11.486,25.605-25.605
+	c0-5.582-1.825-10.906-5.046-15.246C510.176,251.66,512.001,246.336,512.001,240.754z M490.872,263.146
+	c2.953,1.637,4.788,4.741,4.788,8.1c0,5.108-4.156,9.265-9.265,9.265c-13.729,0-26.55-15.197-32.613-24.465
+	c5.125-7.767,17.91-24.556,32.613-24.556c5.108,0,9.265,4.156,9.265,9.265c0,3.36-1.834,6.463-4.788,8.1
+	c-2.598,1.439-4.209,4.176-4.209,7.146C486.663,258.973,488.275,261.706,490.872,263.146z"
+    />
+    <path
+      d="M414.731,168.861c0.831,0.508,20.558,12.446,40.728,12.446c7.708,0,14.604-1.724,20.494-5.125
+	c12.227-7.058,16.431-22.75,9.373-34.977c-2.78-4.815-7.029-8.517-11.994-10.672c0.621-5.373-0.46-10.898-3.252-15.734
+	c-4.561-7.899-13.064-12.805-22.191-12.805c-4.473,0-8.895,1.187-12.786,3.433c-25.068,14.473-24.316,54.963-24.271,56.678
+	C410.902,164.872,412.371,167.415,414.731,168.861z M443.272,119.576c1.411-0.814,3.008-1.244,4.617-1.244
+	c3.308,0,6.389,1.776,8.041,4.635c1.679,2.909,1.643,6.513-0.097,9.409c-1.529,2.546-1.558,5.72-0.072,8.292
+	c1.484,2.572,4.286,4.118,7.217,4.084l0.161-0.001c3.311,0,6.389,1.771,8.036,4.621c2.555,4.426,1.033,10.103-3.391,12.657
+	c-3.375,1.949-7.521,2.936-12.324,2.936c-10.909,0-22.334-4.927-28.198-7.879C427.876,146.022,431.38,126.441,443.272,119.576z"
+    />
+    <path
+      d="M397.204,41.92c-4.747-2.741-10.339-3.881-15.728-3.257c-2.149-4.958-5.847-9.199-10.68-11.988
+	c-3.89-2.246-8.312-3.433-12.785-3.433c-9.128,0-17.631,4.906-22.191,12.805c-14.473,25.068,6.423,59.757,7.321,61.221
+	c1.442,2.355,3.997,3.824,6.756,3.901c0,0,0.331,0.01,0.948,0.01c6.966,0,42.389-1.17,55.732-24.282
+	C413.634,64.67,409.431,48.98,397.204,41.92z M392.425,68.728c-6.573,11.385-25.092,15.297-37.503,15.993
+	c-4.167-8.334-12.297-27.781-4.951-40.504c1.651-2.86,4.732-4.635,8.041-4.635c1.633,0,3.186,0.418,4.616,1.244
+	c2.91,1.68,4.68,4.822,4.621,8.197c-0.051,2.97,1.513,5.733,4.084,7.217c2.572,1.486,5.746,1.456,8.292-0.072
+	c1.455-0.874,3.119-1.337,4.812-1.337c1.625,0,3.172,0.417,4.597,1.24C393.458,58.625,394.979,64.303,392.425,68.728z"
+    />
+  </svg>,
+  name
+);
diff --git a/libs/prisma/src/schemas/main.prisma b/libs/prisma/src/schemas/main.prisma
index 72eda7fed..b761d315c 100644
--- a/libs/prisma/src/schemas/main.prisma
+++ b/libs/prisma/src/schemas/main.prisma
@@ -113,7 +113,8 @@ model Email {
 model Profile {
   id                String    @id @default(cuid())
   // basic settings
-  username          String    @unique
+  // TODO: handle unique usernames, return an error if the username is taken.
+  username          String?    @unique @db.VarChar(63)
   bio               String?
   // publisher settings
   isPublisher       Boolean   @default(false)
diff --git a/libs/trpc/charity/src/lib/server/routers/usage/contributions.ts b/libs/trpc/charity/src/lib/server/routers/usage/contributions.ts
index 4cc5fc069..55b546b81 100644
--- a/libs/trpc/charity/src/lib/server/routers/usage/contributions.ts
+++ b/libs/trpc/charity/src/lib/server/routers/usage/contributions.ts
@@ -1,7 +1,4 @@
-import {
-  gameMonetizeGames,
-  games,
-} from '@worksheets/data-access/charity-games';
+import { games } from '@worksheets/data-access/charity-games';
 import { basicWebsiteStatisticsSchema } from '@worksheets/util/types';
 
 import { publicProcedure } from '../../procedures';
@@ -10,7 +7,6 @@ export default publicProcedure
   .output(basicWebsiteStatisticsSchema)
   .query(async ({ ctx: { db } }) => {
     // donated games exclude game monetize games
-    const countGameMonetizeGames = gameMonetizeGames.length;
     const allGames = games.length;
 
     // game plays is the sum of all game plays
@@ -26,7 +22,7 @@ export default publicProcedure
     }, 0);
 
     return {
-      donatedGames: allGames - countGameMonetizeGames,
+      donatedGames: allGames,
       totalGamePlays: totalGamePlays,
       uniqueGames: gamesPlayed.length,
       uniquePlayers: 500,
diff --git a/libs/ui/game-grid/src/lib/mixed-grid-items.tsx b/libs/ui/game-grid/src/lib/mixed-grid-items.tsx
index c7e8f7e9f..ab23adafd 100644
--- a/libs/ui/game-grid/src/lib/mixed-grid-items.tsx
+++ b/libs/ui/game-grid/src/lib/mixed-grid-items.tsx
@@ -8,8 +8,6 @@ import {
   CategoryPillProps,
   ImagePill,
   ImagePillProps,
-  ProgressPill,
-  ProgressPillProps,
   TextPill,
   TextPillProps,
 } from '@worksheets/ui/pills';
@@ -21,7 +19,6 @@ export type MixedGridItem =
   | (GameIconProps & { type: 'game'; span?: number })
   | (CategoryPillProps & { type: 'category' })
   | (TextPillProps & { type: 'text'; width?: BoxProps['gridColumn'] })
-  | (ProgressPillProps & { type: 'progress' })
   | (ImagePillProps & { type: 'image' })
   | (ButtonPillProps & { type: 'button'; width?: BoxProps['gridColumn'] })
   | (AdvertisementPillProps & {
@@ -67,16 +64,7 @@ export const MixedGridItems: FC<MixedGridItemProps> = ({ items, size }) => {
               <TextPill {...item} />
             </Box>
           )}
-          {item.type === 'progress' && (
-            <Box
-              key={item.current}
-              gridColumn={{ xs: `span 2`, sm: `span 3` }}
-              gridRow={`span 1`}
-              height={size}
-            >
-              <ProgressPill {...item} />
-            </Box>
-          )}
+
           {item.type === 'image' && (
             <Box
               key={item.alt}
diff --git a/libs/ui/inputs/src/index.ts b/libs/ui/inputs/src/index.ts
index 38b3494e7..9032edc16 100644
--- a/libs/ui/inputs/src/index.ts
+++ b/libs/ui/inputs/src/index.ts
@@ -1,2 +1,3 @@
 export * from './lib/text-area-auto-size';
 export * from './lib/prefix-text-field';
+export * from './lib/clipboard-text';
diff --git a/libs/ui/inputs/src/lib/clipboard-text.tsx b/libs/ui/inputs/src/lib/clipboard-text.tsx
new file mode 100644
index 000000000..6275ba068
--- /dev/null
+++ b/libs/ui/inputs/src/lib/clipboard-text.tsx
@@ -0,0 +1,53 @@
+import { ContentCopy } from '@mui/icons-material';
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useState } from 'react';
+
+export const ClipboardText: React.FC<{
+  text: string;
+  label: string;
+  helperText?: string;
+  onCopy?: () => void;
+}> = ({ text, label, helperText, onCopy }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    onCopy && onCopy();
+  };
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      label={label}
+      value={text}
+      helperText={
+        copied ? (
+          <Typography variant="body3" color="success.main" fontWeight={700}>
+            Copied to clipboard!
+          </Typography>
+        ) : (
+          helperText
+        )
+      }
+      onChange={(e) => {
+        // Ignore input
+      }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton onClick={handleCopyToClipboard} edge="end" size="small">
+              <ContentCopy />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+};
diff --git a/libs/ui/pages/account/src/index.ts b/libs/ui/pages/account/src/index.ts
index 82a0ded30..3fda23978 100644
--- a/libs/ui/pages/account/src/index.ts
+++ b/libs/ui/pages/account/src/index.ts
@@ -1,4 +1,8 @@
 export * from './lib/account-screen';
 export * from './lib/profile-panel';
 export * from './lib/submissions-panel';
+export * from './lib/tokens-panel';
+export * from './lib/referrals-panel';
+export * from './lib/friends-panel';
 export * from './lib/types';
+export * from './lib/modals';
diff --git a/libs/ui/pages/account/src/lib/__hooks__/use-time-until.ts b/libs/ui/pages/account/src/lib/__hooks__/use-time-until.ts
new file mode 100644
index 000000000..bdc2d85d5
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/__hooks__/use-time-until.ts
@@ -0,0 +1,16 @@
+import { useInterval } from '@worksheets/ui-core';
+import {
+  millisecondsToDuration,
+  timeUntil as timeUntilUtil,
+} from '@worksheets/util/time';
+import { useState } from 'react';
+
+export const useTimeUntil = (timestamp: number) => {
+  const [timeUntil, setTimeUntil] = useState('??:??:??');
+
+  useInterval(() => {
+    setTimeUntil(millisecondsToDuration(Math.max(0, timeUntilUtil(timestamp))));
+  }, 1000);
+
+  return timeUntil;
+};
diff --git a/libs/ui/pages/account/src/lib/__mocks__/friends.ts b/libs/ui/pages/account/src/lib/__mocks__/friends.ts
new file mode 100644
index 000000000..b3c85baf0
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/__mocks__/friends.ts
@@ -0,0 +1,52 @@
+import {
+  daysAgo,
+  hoursAgo,
+  minutesAgo,
+  monthsAgo,
+  weeksAgo,
+} from '@worksheets/util/time';
+
+import { Friend } from '../types';
+
+export const mockFriends: Friend[] = [
+  {
+    id: '1',
+    username: 'mighty-mouse',
+    lastSeen: minutesAgo(1).getTime(),
+    gamesPlayed: 128,
+    isFavorite: true,
+    hasSentGiftToday: false,
+  },
+  {
+    id: '2',
+    username: 'joey-jo-jo-junior-shabadoo-iii-esquire',
+    lastSeen: hoursAgo(21).getTime(),
+    gamesPlayed: 128,
+    isFavorite: true,
+    hasSentGiftToday: true,
+  },
+  {
+    id: '3',
+    username: 'test-user',
+    lastSeen: daysAgo(5).getTime(),
+    gamesPlayed: 0,
+    isFavorite: false,
+    hasSentGiftToday: false,
+  },
+  {
+    id: '4',
+    username: 'kyle-the-bard',
+    lastSeen: weeksAgo(2).getTime(),
+    gamesPlayed: 1615,
+    isFavorite: false,
+    hasSentGiftToday: true,
+  },
+  {
+    id: '5',
+    username: 'shrek',
+    lastSeen: monthsAgo(1).getTime(),
+    gamesPlayed: 61346,
+    isFavorite: false,
+    hasSentGiftToday: false,
+  },
+];
diff --git a/libs/ui/pages/account/src/lib/__mocks__/index.ts b/libs/ui/pages/account/src/lib/__mocks__/index.ts
new file mode 100644
index 000000000..806eb29e4
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/__mocks__/index.ts
@@ -0,0 +1,2 @@
+export * from './referrals';
+export * from './friends';
diff --git a/libs/ui/pages/account/src/lib/__mocks__/referrals.ts b/libs/ui/pages/account/src/lib/__mocks__/referrals.ts
new file mode 100644
index 000000000..23d809a70
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/__mocks__/referrals.ts
@@ -0,0 +1,47 @@
+import {
+  daysAgo,
+  hoursAgo,
+  minutesAgo,
+  monthsAgo,
+  weeksAgo,
+} from '@worksheets/util/time';
+
+import { Referral } from '../types';
+
+export const mockReferrals: Referral[] = [
+  {
+    id: '1',
+    username: 'test',
+    createdAt: minutesAgo(23145).getTime(),
+    gamesRemaining: 10,
+    tokensEarned: 234,
+  },
+  {
+    id: '2',
+    username: 'high-score-girl',
+    createdAt: hoursAgo(31567).getTime(),
+    gamesRemaining: 3,
+    tokensEarned: 5155,
+  },
+  {
+    id: '3',
+    username: 'sailor-moon',
+    gamesRemaining: 4,
+    createdAt: daysAgo(53).getTime(),
+    tokensEarned: 235,
+  },
+  {
+    id: '4',
+    username: 'nice-guy-123',
+    createdAt: weeksAgo(2).getTime(),
+    gamesRemaining: 2,
+    tokensEarned: 1,
+  },
+  {
+    id: '5',
+    username: 'super-mario',
+    createdAt: monthsAgo(3).getTime(),
+    gamesRemaining: 0,
+    tokensEarned: 23,
+  },
+];
diff --git a/libs/ui/pages/account/src/lib/bullet-points/bullet-points.tsx b/libs/ui/pages/account/src/lib/bullet-points/bullet-points.tsx
new file mode 100644
index 000000000..5f91b8cc5
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/bullet-points/bullet-points.tsx
@@ -0,0 +1,21 @@
+import { Box } from '@mui/material';
+import { ListItem, UnorderedList } from '@worksheets/ui-core';
+
+import { TitleText } from './title-text';
+
+export const BulletPoints: React.FC<{
+  icon: React.ReactNode;
+  title: string;
+  points: React.ReactNode[];
+}> = ({ title, icon, points }) => (
+  <Box>
+    <TitleText icon={icon} title={title} />
+    <UnorderedList>
+      {points.map((point, index) => (
+        <ListItem key={index} disablePadding variant="body2">
+          {point}
+        </ListItem>
+      ))}
+    </UnorderedList>
+  </Box>
+);
diff --git a/libs/ui/pages/account/src/lib/bullet-points/index.ts b/libs/ui/pages/account/src/lib/bullet-points/index.ts
new file mode 100644
index 000000000..16d05ef85
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/bullet-points/index.ts
@@ -0,0 +1,2 @@
+export * from './bullet-points';
+export * from './title-text';
diff --git a/libs/ui/pages/account/src/lib/bullet-points/title-text.tsx b/libs/ui/pages/account/src/lib/bullet-points/title-text.tsx
new file mode 100644
index 000000000..8df1cd775
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/bullet-points/title-text.tsx
@@ -0,0 +1,20 @@
+import { Typography } from '@mui/material';
+import { ReactNode } from 'react';
+
+export type TitleTextProps = {
+  icon: ReactNode;
+  title: string;
+};
+
+export const TitleText: React.FC<TitleTextProps> = ({ icon, title }) => (
+  <Typography
+    sx={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1,
+    }}
+  >
+    {icon}
+    <strong>{title}</strong>
+  </Typography>
+);
diff --git a/libs/ui/pages/account/src/lib/collapsible-section/collapsible-section.tsx b/libs/ui/pages/account/src/lib/collapsible-section/collapsible-section.tsx
new file mode 100644
index 000000000..808561448
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/collapsible-section/collapsible-section.tsx
@@ -0,0 +1,121 @@
+import {
+  ChevronRight,
+  ExpandLess,
+  ExpandMore,
+  SvgIconComponent,
+} from '@mui/icons-material';
+import {
+  Box,
+  ButtonBase,
+  Collapse,
+  SvgIconOwnProps,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { FC, ReactNode, useState } from 'react';
+
+export const CollapsibleSection: FC<{
+  text: string;
+  description: string;
+  children: ReactNode;
+  status: ReactNode;
+  Icon: SvgIconComponent;
+  open?: boolean;
+}> = ({
+  text,
+  description,
+  status,
+  children,
+  Icon,
+  open: defaultOpen = false,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [open, setOpen] = useState(defaultOpen); // TODO: default to false after testing
+
+  return (
+    <Box
+      sx={{
+        border: (theme) => `4px solid ${theme.palette.divider}`,
+        borderRadius: (theme) => theme.shape.borderRadius,
+        overflow: 'hidden',
+      }}
+    >
+      <ButtonBase
+        onClick={() => setOpen((o) => !o)}
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          justifyContent: 'space-between',
+          alignItems: { xs: 'flex-start', sm: 'center' },
+          p: 2,
+          gap: 1,
+          '&:hover': {
+            backgroundColor: (theme) => theme.palette.action.hover,
+          },
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            alignItems: { xs: 'flex-start', sm: 'center' },
+            gap: { xs: 1, sm: 3 },
+          }}
+        >
+          <Icon
+            sx={{
+              height: { xs: 48, sm: 64 },
+              width: { xs: 48, sm: 64 },
+            }}
+          />
+          <Box textAlign="start">
+            <Typography variant={isMobile ? 'h6' : 'h5'}>{text}</Typography>
+            <Typography variant={isMobile ? 'body3' : 'body2'}>
+              {description}
+            </Typography>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          {status}
+          <RewardPanelAction open={open} />
+        </Box>
+      </ButtonBase>
+      <Collapse in={open}>
+        <Box
+          sx={{
+            p: 2,
+            borderTop: (theme) => `4px solid ${theme.palette.divider}`,
+          }}
+        >
+          {children}
+        </Box>
+      </Collapse>
+    </Box>
+  );
+};
+
+const RewardPanelAction: FC<{ open: boolean }> = ({ open }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const actionSx: SvgIconOwnProps['sx'] = {
+    fontSize: { xs: '2rem', sm: '3rem' },
+  };
+
+  if (isMobile) {
+    if (open) return <ExpandLess sx={actionSx} />;
+    return <ExpandMore sx={actionSx} />;
+  } else {
+    if (open) return <ExpandLess sx={actionSx} />;
+    return <ChevronRight sx={actionSx} />;
+  }
+};
diff --git a/libs/ui/pages/account/src/lib/collapsible-section/index.ts b/libs/ui/pages/account/src/lib/collapsible-section/index.ts
new file mode 100644
index 000000000..002c961ed
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/collapsible-section/index.ts
@@ -0,0 +1 @@
+export * from './collapsible-section';
diff --git a/libs/ui/pages/account/src/lib/const.ts b/libs/ui/pages/account/src/lib/const.ts
new file mode 100644
index 000000000..8960aeff5
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/const.ts
@@ -0,0 +1,16 @@
+// game play
+export const MAX_TOKENS_PER_GAME = 5;
+export const MAX_TOKENS_PER_DAY = 100;
+// daily rewards
+export const BASE_DAILY_REWARD = 20;
+export const MOMENTUM_MULTIPLIER = 0.5;
+export const MAX_MOMENTUM = 10;
+// referrals
+export const TOKENS_PER_REFERRAL_PLAY = 1;
+export const MAX_TOKENS_FROM_REFERRAL_PLAYS = 100;
+export const TOKENS_PER_REFERRAL_ACCOUNT = 100;
+export const TOKENS_PER_REFERRAL_PURCHASE = 100;
+// gift boxes
+export const GIFT_BOX_DROP_RATE = 2.5;
+export const MAX_TOKENS_IN_GIFT_BOX = 20;
+export const MAX_DAILY_GIFT_BOX_SHARES = 5;
diff --git a/libs/ui/pages/account/src/lib/friends-panel/friends-panel.stories.tsx b/libs/ui/pages/account/src/lib/friends-panel/friends-panel.stories.tsx
new file mode 100644
index 000000000..6b18c2cc1
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/friends-panel.stories.tsx
@@ -0,0 +1,59 @@
+import Paper from '@mui/material/Paper';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { mockFriends } from '../__mocks__';
+import { FriendsPanel } from './friends-panel';
+
+type Story = Meta<typeof FriendsPanel>;
+
+const Default: Story = {
+  component: FriendsPanel,
+  args: {
+    onRemove: action('onRemove'),
+    onFavorite: action('onFavorite'),
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    friends: [],
+    refreshTimestamp: Date.now() + 1000 * 60 * 60 * 3,
+    friendCode: 'ABC123',
+    giftsRemaining: 5,
+  },
+};
+
+export const WithFriends: Story = {
+  args: {
+    friends: mockFriends,
+    refreshTimestamp: Date.now() + 1000 * 60 * 60 * 12,
+    friendCode: 'ABC123',
+    giftsRemaining: 5,
+  },
+};
+
+export const SentGifts: Story = {
+  args: {
+    friends: mockFriends,
+    refreshTimestamp: Date.now() + 1000 * 60 * 60 * 12,
+    friendCode: 'ABC123',
+    giftsRemaining: 0,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/friends-panel/friends-panel.tsx b/libs/ui/pages/account/src/lib/friends-panel/friends-panel.tsx
new file mode 100644
index 000000000..5c3c33e48
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/friends-panel.tsx
@@ -0,0 +1,63 @@
+import { InfoOutlined } from '@mui/icons-material';
+import { Box, Divider, Link, Typography } from '@mui/material';
+import { ValentinesHeart } from '@worksheets/icons/valentines';
+
+import { PanelFooter } from '../panel-footer';
+import { PanelHeader } from '../panel-header';
+import { Friend } from '../types';
+import { SendGiftsSection } from './sections';
+import { AddFriendsSection } from './sections/add-friends-section';
+
+export const FriendsPanel: React.FC<{
+  friends: Friend[];
+  refreshTimestamp: number;
+  giftsRemaining: number;
+  friendCode: string;
+  onRemove: (friend: Friend) => void;
+  onFavorite: (friend: Friend) => void;
+}> = (props) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <PanelHeader
+        primary="Friends"
+        secondary={`${props.friends.length} friends`}
+        icon={<ValentinesHeart fontSize="large" />}
+      />
+
+      <Divider />
+
+      <AddFriendsSection friendCode={props.friendCode} />
+
+      <SendGiftsSection
+        friends={props.friends}
+        giftsRemaining={props.giftsRemaining}
+        refreshTimestamp={props.refreshTimestamp}
+        onRemove={props.onRemove}
+        onFavorite={props.onFavorite}
+      />
+
+      <Divider />
+
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        <InfoOutlined color="info" fontSize="small" />
+        <Typography>
+          Earn tokens when people play games with our{' '}
+          <Link href="/account/referrals">Referral Program</Link>.
+        </Typography>
+      </Box>
+      <PanelFooter learn={{ text: 'Friends', href: '/help/friends' }} />
+    </Box>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.stories.tsx b/libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.stories.tsx
new file mode 100644
index 000000000..0a497cbcc
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.stories.tsx
@@ -0,0 +1,53 @@
+import Paper from '@mui/material/Paper';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { mockFriends } from '../../__mocks__';
+import { FriendsTable } from './friends-table';
+
+type Story = Meta<typeof FriendsTable>;
+
+const Default: Story = {
+  component: FriendsTable,
+  args: {
+    onRemove: action('onRemove'),
+    onFavorite: action('onFavorite'),
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '2rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    friends: [],
+    canSendGifts: true,
+  },
+};
+
+export const WithPeople: Story = {
+  args: {
+    friends: mockFriends,
+    canSendGifts: true,
+  },
+};
+
+export const SentGifts: Story = {
+  args: {
+    friends: mockFriends,
+    canSendGifts: false,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.tsx b/libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.tsx
new file mode 100644
index 000000000..7104242b7
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/friends-table/friends-table.tsx
@@ -0,0 +1,248 @@
+import {
+  AccessTime,
+  Cancel,
+  Favorite,
+  FavoriteBorderOutlined,
+} from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  IconButton,
+  Link,
+  styled,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { ValentinesGift } from '@worksheets/icons/valentines';
+import { WebGamepad } from '@worksheets/icons/web';
+import { shorthandNumber } from '@worksheets/util/numbers';
+import { printRelativeDate } from '@worksheets/util/time';
+import * as React from 'react';
+
+import { MAX_DAILY_GIFT_BOX_SHARES } from '../../const';
+import { Friend } from '../../types';
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'hidden',
+}));
+
+export type FriendsTableProps = {
+  friends: Friend[];
+  canSendGifts: boolean;
+  onRemove: (friend: Friend) => void;
+  onFavorite: (friend: Friend) => void;
+};
+
+export const FriendsTable: React.FC<FriendsTableProps> = ({
+  friends,
+  canSendGifts,
+  onRemove,
+  onFavorite,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  if (friends.length === 0) {
+    return <EmptyFriendsPlaceholder />;
+  }
+
+  return (
+    <TableContainer component={StyledBox}>
+      <Table
+        size="small"
+        sx={{
+          minWidth: 400,
+        }}
+      >
+        <TableHead>
+          <TableRow sx={{ th: { textWrap: 'nowrap' } }}>
+            <TableCell align="left" width={32}>
+              <Tooltip title="Favorites are shown at the top of the list">
+                <span>
+                  <IconButton size="small" disabled>
+                    <Favorite color="love" fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </TableCell>
+            <TableCell align="left" width={32}>
+              <Tooltip title="Remove friends from your friends list">
+                <span>
+                  <IconButton size="small" disabled>
+                    <Cancel color="error" fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </TableCell>
+            <TableCell width="60%">Username</TableCell>
+            {/* Total Games */}
+            <TableCell
+              align="left"
+              sx={{
+                display: isMobile ? 'none' : 'table-cell',
+              }}
+            >
+              <Tooltip title="Total games played by this user">
+                <WebGamepad fontSize="small" sx={{ mb: '-6px' }} />
+              </Tooltip>
+            </TableCell>
+            {/* Last Seen */}
+            <TableCell
+              align="left"
+              sx={{
+                display: isMobile ? 'none' : 'table-cell',
+              }}
+            >
+              <Tooltip title="When the user was last seen">
+                <AccessTime
+                  fontSize="small"
+                  color="primary"
+                  sx={{ mb: '-4px' }}
+                />
+              </Tooltip>
+            </TableCell>
+            {/* Gift Sent */}
+            <TableCell align="center" width={50}></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {friends.map((friend) => (
+            <TableRow
+              key={friend.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell align="left" width={32}>
+                <IconButton size="small" onClick={() => onFavorite(friend)}>
+                  {friend.isFavorite ? (
+                    <Favorite color="love" fontSize="small" />
+                  ) : (
+                    <FavoriteBorderOutlined color="love" fontSize="small" />
+                  )}
+                </IconButton>
+              </TableCell>
+
+              <TableCell align="left" width={32}>
+                <Tooltip
+                  title="Unfavorite this friend to remove them from your friends list"
+                  disableHoverListener={!friend.isFavorite}
+                >
+                  <span>
+                    <IconButton
+                      size="small"
+                      disabled={friend.isFavorite}
+                      color="error"
+                      onClick={() => onRemove(friend)}
+                    >
+                      <Cancel fontSize="small" />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </TableCell>
+
+              <TableCell>{friend.username ?? friend.id}</TableCell>
+
+              <TableCell
+                align="left"
+                sx={{
+                  display: isMobile ? 'none' : 'table-cell',
+                  fontSize: '0.8rem',
+                }}
+              >
+                {shorthandNumber(friend.gamesPlayed)}
+              </TableCell>
+
+              <TableCell
+                align="left"
+                sx={{
+                  textWrap: 'nowrap',
+                  display: isMobile ? 'none' : 'table-cell',
+                  fontSize: '0.8rem',
+                }}
+              >
+                {printRelativeDate({
+                  stamp: friend.lastSeen,
+                  includeTime: false,
+                })}
+              </TableCell>
+
+              <TableCell
+                align="center"
+                sx={{
+                  textWrap: 'nowrap',
+                }}
+              >
+                <Tooltip
+                  title={
+                    !canSendGifts
+                      ? 'All gifts sent today'
+                      : 'Gift already sent today'
+                  }
+                  disableHoverListener={
+                    !friend.hasSentGiftToday && canSendGifts
+                  }
+                >
+                  <span>
+                    <Button
+                      size="small"
+                      variant="round"
+                      color="love"
+                      disabled={!canSendGifts || friend.hasSentGiftToday}
+                    >
+                      Send Gift
+                    </Button>
+                  </span>
+                </Tooltip>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const EmptyFriendsPlaceholder = () => (
+  <Box
+    sx={{
+      width: '100%',
+      display: 'grid',
+      placeItems: 'center',
+      flexDirection: 'column',
+      border: (theme) => `1px solid ${theme.palette.divider}`,
+      padding: 3,
+    }}
+  >
+    <ValentinesGift
+      sx={{
+        height: 150,
+        width: 150,
+        py: 2,
+      }}
+    />
+    <Typography variant="h4" color="error">
+      Add Friends
+    </Typography>
+    <Box my={1} mb={2} textAlign="center">
+      <Typography variant="body2">
+        Share up to <b>{MAX_DAILY_GIFT_BOX_SHARES}</b> gift boxes with your
+        friends every day.
+      </Typography>
+      <Typography variant="body2">
+        <Link href="/help/vip">VIP Members</Link> can share 3x gift boxes.
+      </Typography>
+    </Box>
+    <Link href="/help/friends" variant="dangrek" color="error">
+      Learn More
+    </Link>
+  </Box>
+);
diff --git a/libs/ui/pages/account/src/lib/friends-panel/friends-table/index.ts b/libs/ui/pages/account/src/lib/friends-panel/friends-table/index.ts
new file mode 100644
index 000000000..e6b21b19c
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/friends-table/index.ts
@@ -0,0 +1 @@
+export * from './friends-table';
diff --git a/libs/ui/pages/account/src/lib/friends-panel/index.ts b/libs/ui/pages/account/src/lib/friends-panel/index.ts
new file mode 100644
index 000000000..4bb2e0790
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/index.ts
@@ -0,0 +1 @@
+export * from './friends-panel';
diff --git a/libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.stories.tsx b/libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.stories.tsx
new file mode 100644
index 000000000..9ff1859d5
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.stories.tsx
@@ -0,0 +1,33 @@
+import { Paper } from '@mui/material';
+import type { Meta } from '@storybook/react';
+
+import { AddFriendsSection } from './add-friends-section';
+
+type Story = Meta<typeof AddFriendsSection>;
+
+const Default: Story = {
+  component: AddFriendsSection,
+  args: {
+    friendCode: 'ABC123',
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 1 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.tsx b/libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.tsx
new file mode 100644
index 000000000..66d3a9ed3
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/sections/add-friends-section.tsx
@@ -0,0 +1,131 @@
+import {
+  Add,
+  Diversity1Outlined,
+  FavoriteBorder,
+  InfoOutlined,
+} from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  Divider,
+  Link,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { ValentinesHearts } from '@worksheets/icons/valentines';
+import { ClipboardText } from '@worksheets/ui/inputs';
+import { SocialButtons } from '@worksheets/ui/social-media';
+import { useRouter } from 'next/router';
+
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import { PanelFooter } from '../../panel-footer';
+
+export const AddFriendsSection: React.FC<{ friendCode: string }> = (props) => {
+  const { query } = useRouter();
+  const { open } = query;
+  const isOpen = open === 'add';
+
+  return (
+    <CollapsibleSection
+      text="Add Friends"
+      description="Play with friends and earn more tokens for prizes."
+      Icon={ValentinesHearts}
+      status={<Diversity1Outlined fontSize="large" color="error" />}
+      open={isOpen}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box
+            sx={{
+              mb: 1,
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: { xs: 'flex-start', sm: 'flex-start' },
+              gap: 1,
+              flexDirection: { xs: 'column', sm: 'row' },
+            }}
+          >
+            <Typography variant="h6">Share your Friend Code</Typography>
+            <SocialButtons
+              facebook={'#TODO'}
+              twitter={'#TODO'}
+              reddit={'#TODO'}
+            />
+          </Box>
+          <ClipboardText text={props.friendCode} label="My Friend Code" />
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          <FavoriteBorder color="love" fontSize="small" />
+          <Typography variant="body2">
+            Your friend code is unique to you and can be shared with anyone.
+          </Typography>
+        </Box>
+        <Divider />
+        <Box>
+          <Typography variant="h6" mb={-0.8}>
+            Add Friends
+          </Typography>
+          <Typography variant="body3">
+            Don't be shy! Ask your friends for their friend code and earn tokens
+            together.
+          </Typography>
+        </Box>
+        <TextField
+          fullWidth
+          placeholder="awesome-friend-code-1234"
+          size="small"
+          label="Friend Code"
+        />
+        <Button
+          variant="round"
+          color="love"
+          startIcon={<Add sx={{ mt: '-2px' }} />}
+          sx={{
+            width: { xs: '100%', sm: 'fit-content' },
+          }}
+        >
+          Add Friend
+        </Button>
+        <Divider />
+        <BulletPoints
+          title="How It Works"
+          icon={<InfoOutlined color="info" fontSize="small" />}
+          points={[
+            `Ask your friends for their friend code and enter it above.`,
+            `If your friend has an account, you'll get a confirmation screen.`,
+            <>
+              If your friend doesn't have an account, get a{' '}
+              <Link href="/account/referral"> Referral Link</Link> to send them.
+              You'll both get tokens!
+            </>,
+          ]}
+        />
+        <PanelFooter
+          learn={{
+            text: 'Friends',
+            href: '/help/friends',
+          }}
+          action={{ text: 'Referrals', href: '/account/referrals?open=share' }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/friends-panel/sections/index.ts b/libs/ui/pages/account/src/lib/friends-panel/sections/index.ts
new file mode 100644
index 000000000..287a54698
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/sections/index.ts
@@ -0,0 +1 @@
+export * from './send-gifts-section';
diff --git a/libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.stories.tsx b/libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.stories.tsx
new file mode 100644
index 000000000..940d92507
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.stories.tsx
@@ -0,0 +1,55 @@
+import { Paper } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+import { hoursFromNow } from '@worksheets/util/time';
+
+import { mockFriends } from '../../__mocks__';
+import { SendGiftsSection } from './send-gifts-section';
+
+type Story = Meta<typeof SendGiftsSection>;
+
+const Default: Story = {
+  component: SendGiftsSection,
+  args: {
+    refreshTimestamp: hoursFromNow(10).getTime(),
+    onRemove: action('onRemove'),
+    onFavorite: action('onFavorite'),
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 1 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    friends: [],
+    giftsRemaining: 5,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    friends: mockFriends,
+    giftsRemaining: 3,
+  },
+};
+
+export const NoMoreGifts: Story = {
+  args: {
+    friends: mockFriends,
+    giftsRemaining: 0,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.tsx b/libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.tsx
new file mode 100644
index 000000000..8a6cde453
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/friends-panel/sections/send-gifts-section.tsx
@@ -0,0 +1,119 @@
+import { CheckCircleOutline, InfoOutlined } from '@mui/icons-material';
+import { Box, Divider, Link, Typography } from '@mui/material';
+import {
+  ValentinesGift,
+  ValentinesMailbox,
+} from '@worksheets/icons/valentines';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { useTimeUntil } from '../../__hooks__/use-time-until';
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import { MAX_DAILY_GIFT_BOX_SHARES } from '../../const';
+import { PanelFooter } from '../../panel-footer';
+import { RewardsTimer } from '../../rewards-timer';
+import { Friend } from '../../types';
+import { FriendsTable } from '../friends-table';
+
+export const SendGiftsSection: React.FC<{
+  giftsRemaining: number;
+  friends: Friend[];
+  refreshTimestamp: number;
+  onRemove: (friend: Friend) => void;
+  onFavorite: (friend: Friend) => void;
+}> = (props) => {
+  const { query } = useRouter();
+  const { open } = query;
+
+  const isOpen = open === 'send';
+
+  const timeRemaining = useTimeUntil(props.refreshTimestamp);
+
+  const addFriendsLink = '/account/friends?open=add';
+
+  const canSendGifts = props.giftsRemaining > 0;
+
+  return (
+    <CollapsibleSection
+      text="Send Gifts"
+      description="Earn a gift box for every friend you send a gift to."
+      Icon={ValentinesMailbox}
+      open={isOpen}
+      status={
+        canSendGifts ? (
+          <InfoOutlined fontSize="large" color="info" />
+        ) : (
+          <CheckCircleOutline fontSize="large" color="success" />
+        )
+      }
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            mb: -1,
+            gap: 1,
+          }}
+        >
+          <Typography variant="h6">Share The Love</Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
+            <ValentinesGift />
+            <Typography variant="h6">
+              {props.giftsRemaining} Gifts Available
+            </Typography>
+          </Box>
+        </Box>
+
+        <FriendsTable
+          friends={props.friends}
+          canSendGifts={canSendGifts}
+          onRemove={props.onRemove}
+          onFavorite={props.onFavorite}
+        />
+
+        <RewardsTimer timeRemaining={timeRemaining} />
+
+        <Divider />
+
+        <BulletPoints
+          title="How It Works"
+          icon={<InfoOutlined color="info" fontSize="small" />}
+          points={[
+            <>
+              Add friends by sharing your{' '}
+              <Link href={addFriendsLink}>Friend Code</Link>.
+            </>,
+            `You can send a gift to ${MAX_DAILY_GIFT_BOX_SHARES} friends per day.`,
+            `You earn a gift box for every friend you send a gift to.`,
+            <>
+              Open gift boxes on the{' '}
+              <Link href="/account/tokens">Tokens Page</Link>.
+            </>,
+            `Your favorite friends are listed at the top of the table.`,
+          ]}
+        />
+
+        <PanelFooter
+          learn={{ text: 'Gift Boxes', href: '/help/gift-boxes' }}
+          action={{ text: 'Add Friends', href: addFriendsLink }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/modals/add-friend-modal.stories.tsx b/libs/ui/pages/account/src/lib/modals/add-friend-modal.stories.tsx
new file mode 100644
index 000000000..8a44d8921
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/add-friend-modal.stories.tsx
@@ -0,0 +1,22 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { AddFriendModal } from './add-friend-modal';
+
+type Story = Meta<typeof AddFriendModal>;
+
+const Default: Story = {
+  component: AddFriendModal,
+  args: {
+    onClose: action('onClose'),
+    onAdd: action('onAdd'),
+  },
+};
+export default Default;
+
+export const Primary: Story = {
+  args: {
+    open: true,
+    friendUsername: 'my-friend',
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/modals/add-friend-modal.tsx b/libs/ui/pages/account/src/lib/modals/add-friend-modal.tsx
new file mode 100644
index 000000000..334add79c
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/add-friend-modal.tsx
@@ -0,0 +1,64 @@
+import { Add, Cancel } from '@mui/icons-material';
+import { Box, Button, IconButton, Typography } from '@mui/material';
+import { ValentinesHeart } from '@worksheets/icons/valentines';
+import { BaseModal, ModalWrapper } from '@worksheets/ui-core';
+
+export const AddFriendModal: React.FC<
+  ModalWrapper<{ friendUsername: string; onAdd: () => void }>
+> = ({ open, onClose, onAdd, friendUsername }) => {
+  const handleClose = () => onClose && onClose({}, 'escapeKeyDown');
+  const handleAdd = () => {
+    onAdd();
+    handleClose();
+  };
+  return (
+    <BaseModal open={open} onClose={onClose}>
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 2,
+          p: 4,
+          minWidth: 300,
+          maxWidth: 500,
+        }}
+      >
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            position: 'absolute',
+            right: 6,
+            top: 6,
+          }}
+        >
+          <Cancel />
+        </IconButton>
+        <Typography variant="h4" color="error" pt={2}>
+          Add Friend
+        </Typography>
+
+        <Typography textAlign="center">
+          We found them!
+          <br />
+          Would you like to add <b>{friendUsername}</b> to your friends list?
+        </Typography>
+
+        <ValentinesHeart sx={{ width: 128, height: 128, mt: 2, mb: 4 }} />
+
+        <Button
+          onClick={handleAdd}
+          fullWidth
+          variant="round"
+          size="large"
+          color="error"
+          startIcon={<Add fontSize="small" />}
+        >
+          Confirm
+        </Button>
+      </Box>
+    </BaseModal>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/modals/claim-gift-modal.stories.tsx b/libs/ui/pages/account/src/lib/modals/claim-gift-modal.stories.tsx
new file mode 100644
index 000000000..ffc9d5786
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/claim-gift-modal.stories.tsx
@@ -0,0 +1,21 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { ClaimGiftModal } from './claim-gift-modal';
+
+type Story = Meta<typeof ClaimGiftModal>;
+
+const Default: Story = {
+  component: ClaimGiftModal,
+  args: {
+    onClose: action('onClose'),
+  },
+};
+export default Default;
+
+export const Primary: Story = {
+  args: {
+    open: true,
+    amount: 637,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/modals/claim-gift-modal.tsx b/libs/ui/pages/account/src/lib/modals/claim-gift-modal.tsx
new file mode 100644
index 000000000..0a725df0f
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/claim-gift-modal.tsx
@@ -0,0 +1,67 @@
+import { Cancel } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
+import { Box, Button, IconButton, Typography } from '@mui/material';
+import { ValentinesGift } from '@worksheets/icons/valentines';
+import { BaseModal, ModalWrapper } from '@worksheets/ui-core';
+
+export const ClaimGiftModal: React.FC<ModalWrapper<{ amount: number }>> = ({
+  open,
+  onClose,
+  amount,
+}) => {
+  const handleClose = () => onClose && onClose({}, 'escapeKeyDown');
+  return (
+    <BaseModal open={open} onClose={onClose}>
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 2,
+          p: 4,
+          minWidth: 300,
+          maxWidth: 500,
+        }}
+      >
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            position: 'absolute',
+            right: 6,
+            top: 6,
+          }}
+        >
+          <Cancel />
+        </IconButton>
+        <Typography variant="h4" color="error" pt={2}>
+          Gift Box
+        </Typography>
+
+        <Typography textAlign="center">
+          <b>Congratulations!</b>
+          <br />
+          You've earned{' '}
+          <u>
+            <b>{amount}</b>
+          </u>{' '}
+          tokens.
+        </Typography>
+
+        <ValentinesGift sx={{ width: 128, height: 128, mt: 2, mb: 4 }} />
+
+        <Button
+          onClick={handleClose}
+          fullWidth
+          variant="round"
+          size="large"
+          color="error"
+          startIcon={<Add fontSize="small" />}
+        >
+          Claim Tokens
+        </Button>
+      </Box>
+    </BaseModal>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/modals/index.ts b/libs/ui/pages/account/src/lib/modals/index.ts
new file mode 100644
index 000000000..4affd7c29
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/index.ts
@@ -0,0 +1 @@
+export * from './claim-gift-modal';
diff --git a/libs/ui/pages/account/src/lib/modals/remove-friend-modal.stories.tsx b/libs/ui/pages/account/src/lib/modals/remove-friend-modal.stories.tsx
new file mode 100644
index 000000000..424722e01
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/remove-friend-modal.stories.tsx
@@ -0,0 +1,21 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { RemoveFriendModal } from './remove-friend-modal';
+
+type Story = Meta<typeof RemoveFriendModal>;
+
+const Default: Story = {
+  component: RemoveFriendModal,
+  args: {
+    onClose: action('onClose'),
+    onRemove: action('onRemove'),
+  },
+};
+export default Default;
+
+export const Primary: Story = {
+  args: {
+    open: true,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/modals/remove-friend-modal.tsx b/libs/ui/pages/account/src/lib/modals/remove-friend-modal.tsx
new file mode 100644
index 000000000..1c4d06b4e
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/remove-friend-modal.tsx
@@ -0,0 +1,64 @@
+import { Cancel, HeartBroken } from '@mui/icons-material';
+import { Box, Button, IconButton, Typography } from '@mui/material';
+import { ValentinesHeartbreak } from '@worksheets/icons/valentines';
+import { BaseModal, ModalWrapper } from '@worksheets/ui-core';
+
+export const RemoveFriendModal: React.FC<
+  ModalWrapper<{ onRemove: () => void }>
+> = ({ open, onClose, onRemove }) => {
+  const handleClose = () => onClose && onClose({}, 'escapeKeyDown');
+  const handleRemove = () => {
+    onRemove();
+    handleClose();
+  };
+  return (
+    <BaseModal open={open} onClose={onClose}>
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 2,
+          p: 4,
+          minWidth: 300,
+          maxWidth: 500,
+        }}
+      >
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            position: 'absolute',
+            right: 6,
+            top: 6,
+          }}
+        >
+          <Cancel />
+        </IconButton>
+        <Typography variant="h4" color="error" pt={2}>
+          Remove Friend
+        </Typography>
+
+        <Typography textAlign="center">
+          Splitting up isn't easy.
+          <br />
+          Are you <b>sure</b> you want to remove this friend?
+        </Typography>
+
+        <ValentinesHeartbreak sx={{ width: 128, height: 128, mt: 2, mb: 4 }} />
+
+        <Button
+          onClick={handleRemove}
+          fullWidth
+          variant="round"
+          size="large"
+          color="error"
+          startIcon={<HeartBroken fontSize="small" />}
+        >
+          Remove Friend
+        </Button>
+      </Box>
+    </BaseModal>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/modals/send-gift-modal.stories.tsx b/libs/ui/pages/account/src/lib/modals/send-gift-modal.stories.tsx
new file mode 100644
index 000000000..246ac9a9a
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/send-gift-modal.stories.tsx
@@ -0,0 +1,21 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { SendGiftModal } from './send-gift-modal';
+
+type Story = Meta<typeof SendGiftModal>;
+
+const Default: Story = {
+  component: SendGiftModal,
+  args: {
+    onClose: action('onClose'),
+    onRemove: action('onRemove'),
+  },
+};
+export default Default;
+
+export const Primary: Story = {
+  args: {
+    open: true,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/modals/send-gift-modal.tsx b/libs/ui/pages/account/src/lib/modals/send-gift-modal.tsx
new file mode 100644
index 000000000..b17beb642
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/modals/send-gift-modal.tsx
@@ -0,0 +1,64 @@
+import { Cancel, MailOutline } from '@mui/icons-material';
+import { Box, Button, IconButton, Typography } from '@mui/material';
+import { ValentinesMailbox } from '@worksheets/icons/valentines';
+import { BaseModal, ModalWrapper } from '@worksheets/ui-core';
+
+export const SendGiftModal: React.FC<
+  ModalWrapper<{ onRemove: () => void }>
+> = ({ open, onClose, onRemove }) => {
+  const handleClose = () => onClose && onClose({}, 'escapeKeyDown');
+  const handleRemove = () => {
+    onRemove();
+    handleClose();
+  };
+  return (
+    <BaseModal open={open} onClose={onClose}>
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 2,
+          p: 4,
+          minWidth: 300,
+          maxWidth: 500,
+        }}
+      >
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            position: 'absolute',
+            right: 6,
+            top: 6,
+          }}
+        >
+          <Cancel />
+        </IconButton>
+        <Typography variant="h4" color="error" pt={2}>
+          Send Gift
+        </Typography>
+
+        <Typography textAlign="center">
+          You get a gift box for every friend you send a gift to.
+          <br />
+          We'll let them know you sent it.
+        </Typography>
+
+        <ValentinesMailbox sx={{ width: 128, height: 128, mt: 2, mb: 4 }} />
+
+        <Button
+          onClick={handleRemove}
+          fullWidth
+          variant="round"
+          size="large"
+          color="error"
+          startIcon={<MailOutline fontSize="small" />}
+        >
+          Send Gift
+        </Button>
+      </Box>
+    </BaseModal>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/panel-footer/index.ts b/libs/ui/pages/account/src/lib/panel-footer/index.ts
new file mode 100644
index 000000000..7d81997ef
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/panel-footer/index.ts
@@ -0,0 +1 @@
+export * from './panel-footer';
diff --git a/libs/ui/pages/account/src/lib/panel-footer/panel-footer.tsx b/libs/ui/pages/account/src/lib/panel-footer/panel-footer.tsx
new file mode 100644
index 000000000..afaa47c5a
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/panel-footer/panel-footer.tsx
@@ -0,0 +1,43 @@
+import { ArrowRightAlt } from '@mui/icons-material';
+import { Box, Button, Link, Typography } from '@mui/material';
+import React from 'react';
+
+export const PanelFooter: React.FC<{
+  learn: {
+    text: string;
+    href: string;
+  };
+  action?: {
+    text: string;
+    href: string;
+  };
+}> = ({ learn, action }) => (
+  <Box
+    sx={{
+      mt: 1,
+      display: 'flex',
+      justifyContent: 'space-between',
+      gap: 1,
+      alignItems: { xs: 'flex-start', sm: 'flex-end' },
+      flexDirection: { xs: 'column', sm: 'row' },
+    }}
+  >
+    <Typography variant="body3" color="text.secondary">
+      Learn more about <b>{learn.text}</b> in the{' '}
+      <Box component="span" color="primary.main">
+        <Link href={learn.href}>Help Center</Link>
+      </Box>
+    </Typography>
+    {action && (
+      <Button
+        endIcon={<ArrowRightAlt sx={{ ml: '-2px', mt: '-3px' }} />}
+        color="primary"
+        variant="round"
+        disableElevation
+        href={action.href}
+      >
+        {action.text}
+      </Button>
+    )}
+  </Box>
+);
diff --git a/libs/ui/pages/account/src/lib/panel-header/index.ts b/libs/ui/pages/account/src/lib/panel-header/index.ts
new file mode 100644
index 000000000..a07286330
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/panel-header/index.ts
@@ -0,0 +1 @@
+export * from './panel-header';
diff --git a/libs/ui/pages/account/src/lib/panel-header/panel-header.tsx b/libs/ui/pages/account/src/lib/panel-header/panel-header.tsx
new file mode 100644
index 000000000..aa892d86a
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/panel-header/panel-header.tsx
@@ -0,0 +1,32 @@
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+
+export const PanelHeader: React.FC<{
+  primary: string;
+  secondary: string;
+  icon: React.ReactNode;
+}> = (props) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 1,
+      }}
+    >
+      <Typography variant={isMobile ? 'h5' : 'h4'}>{props.primary}</Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 1,
+          alignItems: 'center',
+        }}
+      >
+        {props.icon}
+        <Typography variant="h6">{props.secondary}</Typography>
+      </Box>
+    </Box>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/referral-info/how-referrals-work.tsx b/libs/ui/pages/account/src/lib/referral-info/how-referrals-work.tsx
new file mode 100644
index 000000000..00d477d80
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referral-info/how-referrals-work.tsx
@@ -0,0 +1,27 @@
+import { Box, Link, Typography } from '@mui/material';
+import { ListItem, UnorderedList } from '@worksheets/ui-core';
+
+import {
+  TOKENS_PER_REFERRAL_PLAY,
+  TOKENS_PER_FRIEND_PLAY_DAILY_LIMIT,
+  TOKENS_PER_REFERRAL_ACCOUNT,
+} from '../const';
+
+export const HowReferralsWork = () => (
+  <Box>
+    <Typography>
+      <strong>How It Works</strong>
+    </Typography>
+    <UnorderedList>
+      <ListItem disablePadding variant="body2">
+        Earn {TOKENS_PER_REFERRAL_PLAY} tokens every time someone{' '}
+        <Link href="/play">plays a game</Link> with your referral link. (Up{' '}
+        {TOKENS_PER_FRIEND_PLAY_DAILY_LIMIT} tokens per day.)
+      </ListItem>
+      <ListItem disablePadding variant="body2">
+        Earn {TOKENS_PER_REFERRAL_ACCOUNT} tokens when someone makes an account
+        using your referral link.
+      </ListItem>
+    </UnorderedList>
+  </Box>
+);
diff --git a/libs/ui/pages/account/src/lib/referral-info/index.ts b/libs/ui/pages/account/src/lib/referral-info/index.ts
new file mode 100644
index 000000000..130d8c057
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referral-info/index.ts
@@ -0,0 +1 @@
+export * from './referral-info';
diff --git a/libs/ui/pages/account/src/lib/referral-info/referral-info.tsx b/libs/ui/pages/account/src/lib/referral-info/referral-info.tsx
new file mode 100644
index 000000000..8961fc7a6
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referral-info/referral-info.tsx
@@ -0,0 +1,73 @@
+import { Diversity1Outlined } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { ValentinesTicket } from '@worksheets/icons/valentines';
+import { ClipboardText } from '@worksheets/ui/inputs';
+import { SocialButtons } from '@worksheets/ui/social-media';
+import { shorthandNumber } from '@worksheets/util/numbers';
+
+export const ReferralInfo: React.FC<{
+  referrals: number;
+  link: string;
+  tokens: number;
+}> = ({ referrals, link, tokens }) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <Box width="100%">
+        <Box
+          sx={{
+            mb: '4px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: { xs: 'flex-start', sm: 'flex-start' },
+            gap: 1,
+            flexDirection: { xs: 'column', sm: 'row' },
+          }}
+        >
+          <Typography variant="h6">Share your link</Typography>
+          <SocialButtons facebook={'#'} twitter={'#'} reddit={'#'} />
+        </Box>
+        <ClipboardText text={link} label="My Referral Link" />
+      </Box>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: 1,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          <Diversity1Outlined color="error" />
+          <Typography variant="body2" fontWeight={900}>
+            {shorthandNumber(referrals)} Accounts Referred
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          <ValentinesTicket />
+          <Typography variant="body2" fontWeight={900}>
+            {shorthandNumber(tokens)} Tokens Earned
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/index.ts b/libs/ui/pages/account/src/lib/referrals-panel/index.ts
new file mode 100644
index 000000000..d611dc1ea
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/index.ts
@@ -0,0 +1 @@
+export * from './referrals-panel';
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/referral-table/index.ts b/libs/ui/pages/account/src/lib/referrals-panel/referral-table/index.ts
new file mode 100644
index 000000000..bee75be4f
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/referral-table/index.ts
@@ -0,0 +1 @@
+export * from './referrals-table';
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.stories.tsx b/libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.stories.tsx
new file mode 100644
index 000000000..f672b5791
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.stories.tsx
@@ -0,0 +1,40 @@
+import Paper from '@mui/material/Paper';
+import type { Meta } from '@storybook/react';
+
+import { mockReferrals } from '../../__mocks__';
+import { ReferralsTable } from './referrals-table';
+
+type Story = Meta<typeof ReferralsTable>;
+
+const Default: Story = {
+  component: ReferralsTable,
+  args: {},
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '2rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    referrals: [],
+  },
+};
+
+export const WithPeople: Story = {
+  args: {
+    referrals: mockReferrals,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.tsx b/libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.tsx
new file mode 100644
index 000000000..ce58f3a27
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/referral-table/referrals-table.tsx
@@ -0,0 +1,104 @@
+import { Box, Link, styled, Typography } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { ValentinesLetter } from '@worksheets/icons/valentines';
+import { printShortDate } from '@worksheets/util/time';
+import * as React from 'react';
+
+import { Referral } from '../../types';
+
+export type ReferralsTableProps = {
+  referrals: Referral[];
+};
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'hidden',
+}));
+
+export const ReferralsTable: React.FC<ReferralsTableProps> = ({
+  referrals,
+}) => {
+  if (referrals.length === 0) {
+    return <EmptyReferralsPlaceholder />;
+  }
+  return (
+    <TableContainer component={StyledBox}>
+      <Table
+        size="small"
+        sx={{
+          minWidth: 400,
+        }}
+      >
+        <TableHead>
+          <TableRow>
+            <TableCell width="64%">Username</TableCell>
+            {/* Created On */}
+            <TableCell align="right">Created On</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {referrals.map((referral) => (
+            <TableRow
+              key={referral.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {referral.username ?? referral.id}
+              </TableCell>
+
+              <TableCell
+                align="right"
+                sx={{
+                  textWrap: 'nowrap',
+                }}
+              >
+                {printShortDate(referral.createdAt)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const EmptyReferralsPlaceholder = () => (
+  <Box
+    sx={{
+      width: '100%',
+      display: 'grid',
+      placeItems: 'center',
+      flexDirection: 'column',
+      border: (theme) => `1px solid ${theme.palette.divider}`,
+      padding: 3,
+    }}
+  >
+    <ValentinesLetter
+      sx={{
+        height: 150,
+        width: 150,
+        py: 2,
+      }}
+    />
+    <Typography variant="h4" color="error">
+      Invite your friends
+    </Typography>
+    <Box my={1} mb={2} textAlign="center">
+      <Typography variant="body2">
+        Earn tokens when someone plays games with your link.
+      </Typography>
+      <Typography variant="body2">
+        When they sign up, you'll both get a bonus!
+      </Typography>
+    </Box>
+    <Link href="/help/referrals" variant="dangrek" color="error">
+      Learn More
+    </Link>
+  </Box>
+);
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.stories.tsx b/libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.stories.tsx
new file mode 100644
index 000000000..eafaeb24f
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.stories.tsx
@@ -0,0 +1,49 @@
+import Paper from '@mui/material/Paper';
+import type { Meta } from '@storybook/react';
+
+import { mockReferrals } from '../__mocks__';
+import { ReferralsPanel } from './referrals-panel';
+
+type Story = Meta<typeof ReferralsPanel>;
+
+const Default: Story = {
+  component: ReferralsPanel,
+  args: {},
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    referrals: [],
+    link: 'https://www.worksheets.dev',
+    tokens: 0,
+    refreshTimestamp: Date.now() + 1000 * 60 * 60 * 23,
+    gamesPlayed: 0,
+  },
+};
+
+export const WithReferrals: Story = {
+  args: {
+    referrals: mockReferrals,
+    link: 'https://www.worksheets.dev',
+    tokens: 123561,
+    refreshTimestamp: Date.now() + 1000 * 60 * 60 * 23,
+    gamesPlayed: 33,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.tsx b/libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.tsx
new file mode 100644
index 000000000..c9a2e5f86
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/referrals-panel.tsx
@@ -0,0 +1,65 @@
+import { FavoriteBorder } from '@mui/icons-material';
+import { Box, Divider, Typography } from '@mui/material';
+import { ValentinesWorld } from '@worksheets/icons/valentines';
+
+import { PanelFooter } from '../panel-footer';
+import { PanelHeader } from '../panel-header';
+import { Referral } from '../types';
+import { ReferredAccountsSection } from './sections';
+import { ReferredPlaysSection } from './sections/referred-plays-section';
+import { ShareYourLinkSection } from './sections/share-your-link-section';
+
+export const ReferralsPanel: React.FC<{
+  referrals: Referral[];
+  link: string;
+  tokens: number;
+  refreshTimestamp: number;
+  gamesPlayed: number;
+}> = ({ referrals, link, tokens, refreshTimestamp, gamesPlayed }) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <PanelHeader
+        primary="Referrals"
+        secondary={`${referrals.length} referrals`}
+        icon={<ValentinesWorld fontSize="large" />}
+      />
+
+      <Divider />
+
+      <ReferredAccountsSection referrals={referrals} />
+
+      <ReferredPlaysSection
+        tokensEarned={gamesPlayed}
+        refreshTimestamp={refreshTimestamp}
+      />
+
+      <ShareYourLinkSection
+        referralLink={link}
+        numReferrals={referrals.length}
+        tokensEarned={tokens}
+      />
+      <Divider />
+
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        <FavoriteBorder fontSize="small" color="love" />
+        <Typography>
+          Help us grow by sharing your referral link with friends and family.
+        </Typography>
+      </Box>
+
+      <PanelFooter learn={{ text: 'Referrals', href: '/help/referrals' }} />
+    </Box>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/sections/index.ts b/libs/ui/pages/account/src/lib/referrals-panel/sections/index.ts
new file mode 100644
index 000000000..c44f06448
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/sections/index.ts
@@ -0,0 +1 @@
+export * from './referred-accounts-section';
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/sections/referred-accounts-section.tsx b/libs/ui/pages/account/src/lib/referrals-panel/sections/referred-accounts-section.tsx
new file mode 100644
index 000000000..fc0c54698
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/sections/referred-accounts-section.tsx
@@ -0,0 +1,62 @@
+import { AccountCircleOutlined, InfoOutlined } from '@mui/icons-material';
+import { Box, Link, Typography } from '@mui/material';
+import { ValentinesWings } from '@worksheets/icons/valentines';
+import React from 'react';
+
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import { TOKENS_PER_REFERRAL_ACCOUNT } from '../../const';
+import { PanelFooter } from '../../panel-footer';
+import { Referral } from '../../types';
+import { ReferralsTable } from '../referral-table';
+
+export const ReferredAccountsSection: React.FC<{
+  referrals: Referral[];
+}> = ({ referrals }) => {
+  return (
+    <CollapsibleSection
+      text="Referred Accounts"
+      description="Earn tokens whenever someone makes an account using your referral link."
+      status={<AccountCircleOutlined fontSize="large" color="info" />}
+      Icon={ValentinesWings}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Typography variant="h6">My Referrals</Typography>
+
+        <ReferralsTable referrals={referrals} />
+
+        <BulletPoints
+          icon={<InfoOutlined fontSize="small" color="info" />}
+          title={'How It Works'}
+          points={[
+            `Earn ${TOKENS_PER_REFERRAL_ACCOUNT} tokens, when someone makes an account using your referral link.`,
+            <>
+              Earn {TOKENS_PER_REFERRAL_ACCOUNT} tokens when someone spends
+              money at the <Link href="/store">Charity Store</Link> using your
+              referral link.
+            </>,
+            `Users cannot remove their referral link once they've created an account.`,
+            `Users can add a referral link to their account if they don't have one.`,
+          ]}
+        />
+
+        <PanelFooter
+          learn={{
+            text: 'Referred Accounts',
+            href: '/account/referrals#referred-accounts',
+          }}
+          action={{
+            text: 'Friends List',
+            href: '/account/friends',
+          }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/sections/referred-plays-section.tsx b/libs/ui/pages/account/src/lib/referrals-panel/sections/referred-plays-section.tsx
new file mode 100644
index 000000000..f74df8126
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/sections/referred-plays-section.tsx
@@ -0,0 +1,132 @@
+import {
+  CheckCircleOutline,
+  InfoOutlined,
+  PendingOutlined,
+} from '@mui/icons-material';
+import {
+  Box,
+  LinearProgress,
+  Link,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { ValentinesDiamond } from '@worksheets/icons/valentines';
+import { calculatePercentage, toPercentage } from '@worksheets/util/numbers';
+import React from 'react';
+
+import { useTimeUntil } from '../../__hooks__/use-time-until';
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import { MAX_TOKENS_FROM_REFERRAL_PLAYS } from '../../const';
+import { RewardsTimer } from '../../rewards-timer';
+
+export const ReferredPlaysSection: React.FC<{
+  tokensEarned: number;
+  refreshTimestamp: number;
+}> = ({ tokensEarned, refreshTimestamp }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const timeRemaining = useTimeUntil(refreshTimestamp);
+  const isMax = tokensEarned >= MAX_TOKENS_FROM_REFERRAL_PLAYS;
+  return (
+    <CollapsibleSection
+      text="Games Played"
+      description="Get extra tokens when someone plays a game using your referral link."
+      status={
+        isMax ? (
+          <CheckCircleOutline fontSize="large" color="success" />
+        ) : (
+          <PendingOutlined fontSize="large" color="info" />
+        )
+      }
+      Icon={ValentinesDiamond}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 1,
+          }}
+        >
+          <Typography variant="h6" fontSize={{ xs: '1rem', sm: '1.25rem' }}>
+            {tokensEarned} / {MAX_TOKENS_FROM_REFERRAL_PLAYS} Tokens Earned
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}
+          >
+            {isMax ? (
+              <CheckCircleOutline
+                fontSize="small"
+                color="success"
+                sx={{
+                  mt: '-2px',
+                }}
+              />
+            ) : (
+              <PendingOutlined
+                fontSize="small"
+                color="info"
+                sx={{
+                  mt: '-2px',
+                }}
+              />
+            )}
+
+            <Typography variant={isMobile ? 'body3' : 'body2'} fontWeight={900}>
+              {toPercentage(tokensEarned, MAX_TOKENS_FROM_REFERRAL_PLAYS)}
+            </Typography>
+          </Box>
+        </Box>
+        <LinearProgress
+          variant="determinate"
+          color={isMax ? 'success' : 'primary'}
+          value={calculatePercentage(
+            tokensEarned,
+            MAX_TOKENS_FROM_REFERRAL_PLAYS
+          )}
+          sx={{
+            my: { xs: -1, sm: -1.5 },
+            height: 16,
+            borderRadius: (theme) => theme.shape.borderRadius,
+          }}
+        />
+
+        <Typography variant="body2">
+          {isMax
+            ? `You have received all your tokens today!`
+            : `${MAX_TOKENS_FROM_REFERRAL_PLAYS - tokensEarned} more 
+            tokens until you reach your daily limit.`}
+        </Typography>
+
+        <RewardsTimer timeRemaining={timeRemaining} />
+
+        <BulletPoints
+          icon={<InfoOutlined fontSize="small" color="info" />}
+          title={'How It Works'}
+          points={[
+            `Users don't need to make an account for you to get tokens.`,
+            `Earn 1 token for every game someone plays with your referral link.`,
+            `You can earn a maximum of ${MAX_TOKENS_FROM_REFERRAL_PLAYS} tokens per day.`,
+            <>
+              <Link href="/learn/vip">VIP Members</Link> earn x2 tokens when
+              someone plays a game, and have no daily limit.
+            </>,
+          ]}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/referrals-panel/sections/share-your-link-section.tsx b/libs/ui/pages/account/src/lib/referrals-panel/sections/share-your-link-section.tsx
new file mode 100644
index 000000000..8cdbb7537
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/referrals-panel/sections/share-your-link-section.tsx
@@ -0,0 +1,62 @@
+import { InfoOutlined, LinkOutlined } from '@mui/icons-material';
+import { Box, Divider, Link } from '@mui/material';
+import { ValentinesWorld } from '@worksheets/icons/valentines';
+import React from 'react';
+
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import { TOKENS_PER_REFERRAL_ACCOUNT } from '../../const';
+import { PanelFooter } from '../../panel-footer';
+import { ReferralInfo } from '../../referral-info';
+
+export const ShareYourLinkSection: React.FC<{
+  referralLink: string;
+  numReferrals: number;
+  tokensEarned: number;
+}> = ({ referralLink, numReferrals, tokensEarned }) => {
+  return (
+    <CollapsibleSection
+      text="Share Your Link"
+      description="Get a copy of your link and share it with friends or on social media."
+      status={<LinkOutlined fontSize="large" color="info" />}
+      Icon={ValentinesWorld}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <ReferralInfo
+          referrals={numReferrals}
+          tokens={tokensEarned}
+          link={referralLink}
+        />
+
+        <Divider />
+        <BulletPoints
+          icon={<InfoOutlined fontSize="small" color="info" />}
+          title="How It Works"
+          points={[
+            `When a user clicks your referral link, they will be redirected to the website.`,
+            `If a user does not make an account, you can still earn tokens as long as they don't clear their cache.`,
+            `If they make an account, you will earn ${TOKENS_PER_REFERRAL_ACCOUNT} tokens.`,
+            <>
+              <Link href="/help/vip">VIP Members</Link> get a significant boost
+              to their referral earnings.
+            </>,
+          ]}
+        />
+
+        <PanelFooter
+          learn={{ text: 'VIP Benefits', href: '/help/vip' }}
+          action={{
+            text: 'Become a VIP',
+            href: '/account/vip',
+          }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/rewards-timer/index.ts b/libs/ui/pages/account/src/lib/rewards-timer/index.ts
new file mode 100644
index 000000000..6a3c95d3f
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/rewards-timer/index.ts
@@ -0,0 +1 @@
+export * from './rewards-timer';
diff --git a/libs/ui/pages/account/src/lib/rewards-timer/rewards-timer.tsx b/libs/ui/pages/account/src/lib/rewards-timer/rewards-timer.tsx
new file mode 100644
index 000000000..78025d775
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/rewards-timer/rewards-timer.tsx
@@ -0,0 +1,27 @@
+import { Box, Typography } from '@mui/material';
+import { WebHourglass } from '@worksheets/icons/web';
+import { FC } from 'react';
+
+export const RewardsTimer: FC<{ timeRemaining: string }> = ({
+  timeRemaining,
+}) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: { xs: 'flex-start', sm: 'center' },
+        flexDirection: { xs: 'column', sm: 'row' },
+        gap: 1,
+      }}
+    >
+      <Typography fontStyle="italic" variant="body2" color="text.secondary">
+        Rewards refresh every 24 hours.
+      </Typography>
+      <Box display="flex" alignItems="center" gap={1}>
+        <WebHourglass />
+        <Typography variant="h6">{timeRemaining}</Typography>
+      </Box>
+    </Box>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/index.ts b/libs/ui/pages/account/src/lib/tokens-panel/index.ts
new file mode 100644
index 000000000..f1843c7ee
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/index.ts
@@ -0,0 +1 @@
+export * from './tokens-panel';
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.stories.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.stories.tsx
new file mode 100644
index 000000000..d7ab7364d
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.stories.tsx
@@ -0,0 +1,46 @@
+import { Paper } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { DailyRewardSection } from './daily-reward-section';
+
+type Story = Meta<typeof DailyRewardSection>;
+
+const Default: Story = {
+  component: DailyRewardSection,
+  args: {
+    onClaim: action('onClaim'),
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 1 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Unclaimed: Story = {
+  args: {
+    timeRemaining: '00:01:43',
+    claimed: false,
+    momentum: 2.5,
+  },
+};
+
+export const Claimed: Story = {
+  args: {
+    timeRemaining: '00:01:43',
+    claimed: true,
+    momentum: 3.5,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.tsx
new file mode 100644
index 000000000..8475d1172
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/daily-reward-section.tsx
@@ -0,0 +1,213 @@
+import {
+  AccessTime,
+  AccessTimeOutlined,
+  CardGiftcardOutlined,
+  CheckCircleOutline,
+  InfoOutlined,
+  LocalFireDepartment,
+} from '@mui/icons-material';
+import { Box, Button, Link, Typography } from '@mui/material';
+import { ValentinesMail, ValentinesTicket } from '@worksheets/icons/valentines';
+import React from 'react';
+
+import { BulletPoints, TitleText } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import {
+  BASE_DAILY_REWARD,
+  MAX_MOMENTUM,
+  MOMENTUM_MULTIPLIER,
+} from '../../const';
+import { PanelFooter } from '../../panel-footer';
+
+export const DailyRewardSection: React.FC<{
+  claimed: boolean;
+  momentum: number;
+  timeRemaining: string;
+  onClaim: () => void;
+}> = ({ claimed, momentum, timeRemaining, onClaim }) => {
+  const isComplete = claimed;
+
+  return (
+    <CollapsibleSection
+      text="Daily Reward"
+      description="Get extra tokens every time you claim the daily reward."
+      Icon={ValentinesMail}
+      status={
+        isComplete ? (
+          <CheckCircleOutline fontSize="large" color="success" />
+        ) : (
+          <AccessTimeOutlined fontSize="large" color="info" />
+        )
+      }
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Typography
+          variant="h5"
+          textAlign="center"
+          color={isComplete ? 'success.main' : 'primary.main'}
+        >
+          {isComplete ? 'Come Back Later' : 'Daily Reward Available'}!
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          {isComplete ? (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}
+            >
+              <AccessTime
+                fontSize="small"
+                sx={{ mt: '-2px' }}
+                color="success"
+              />
+              <Typography
+                variant="body3"
+                textAlign="center"
+                color="success.main"
+              >
+                Next Daily Reward in {timeRemaining}
+              </Typography>
+              <AccessTime
+                fontSize="small"
+                sx={{ mt: '-2px' }}
+                color="success"
+              />
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}
+            >
+              <AccessTime fontSize="small" sx={{ mt: '-2px' }} color="error" />
+              <Typography variant="body3" textAlign="center">
+                Your reward expires in {timeRemaining}
+              </Typography>
+              <AccessTime fontSize="small" sx={{ mt: '-2px' }} color="error" />
+            </Box>
+          )}
+
+          <Button
+            fullWidth
+            variant="round"
+            size="large"
+            color="primary"
+            disabled={isComplete}
+            startIcon={isComplete ? <AccessTime /> : <CardGiftcardOutlined />}
+            onClick={onClaim}
+          >
+            {isComplete
+              ? timeRemaining
+              : `Claim ${BASE_DAILY_REWARD * momentum} Tokens`}
+          </Button>
+
+          <Typography
+            variant="body3"
+            textAlign="center"
+            color={isComplete ? 'success.main' : 'text.primary'}
+          >
+            {isComplete ? (
+              'You have claimed your daily reward'
+            ) : (
+              <Box component="span">
+                Gain{' '}
+                <LocalFireDepartment
+                  color="error"
+                  fontSize="small"
+                  sx={{
+                    mb: '-5px',
+                  }}
+                />{' '}
+                momentum every time you claim the daily reward
+              </Box>
+            )}
+          </Typography>
+        </Box>
+
+        <Box mt={2}>
+          <TitleText
+            icon={<LocalFireDepartment fontSize="small" color="error" />}
+            title="Momentum"
+          />
+          <TokenPrizeMessage momentum={momentum} />
+        </Box>
+
+        <BulletPoints
+          title="How It Works"
+          icon={<InfoOutlined fontSize="small" color="info" />}
+          points={[
+            'Rewards are available every 24 hours and reset at 12:00 AM UTC.',
+            `Gain ${MOMENTUM_MULTIPLIER}x momentum every time you claim a daily reward up to a maximum of ${MAX_MOMENTUM}x.`,
+            `Each daily reward is worth ${BASE_DAILY_REWARD} tokens multiplied by your current momentum ${momentum}.`,
+            `If you miss a claim, you won't be able to claim the reward and you will lose momentum.`,
+            <>
+              <Link href="/help/vip">VIP members</Link> earn x2 the daily reward
+              and x2 the momentum.
+            </>,
+          ]}
+        />
+
+        <PanelFooter
+          learn={{
+            text: 'Daily Rewards',
+            href: '/help/daily-rewards',
+          }}
+          action={{
+            text: 'Play Games',
+            href: '/play',
+          }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
+
+const TokenPrizeMessage: React.FC<{ momentum: number }> = ({ momentum }) => (
+  <Typography
+    component="span"
+    variant="body2"
+    textAlign="center"
+    color={'text.primary'}
+  >
+    Get{' '}
+    <ValentinesTicket
+      fontSize="small"
+      sx={{
+        mb: '-5px',
+      }}
+    />{' '}
+    <b>{BASE_DAILY_REWARD} x </b>
+    <LocalFireDepartment
+      fontSize="small"
+      color="error"
+      sx={{
+        mb: '-5px',
+      }}
+    />
+    <b>{momentum} = </b>
+    <ValentinesTicket
+      fontSize="small"
+      sx={{
+        mb: '-5px',
+      }}
+    />{' '}
+    <b>{BASE_DAILY_REWARD * momentum} tokens</b> for today's reward.
+  </Typography>
+);
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.stories.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.stories.tsx
new file mode 100644
index 000000000..a8e49436b
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.stories.tsx
@@ -0,0 +1,39 @@
+import { Paper } from '@mui/material';
+import type { Meta } from '@storybook/react';
+
+import { GiftBoxSection } from './gift-box-section';
+
+type Story = Meta<typeof GiftBoxSection>;
+
+const Default: Story = {
+  component: GiftBoxSection,
+  args: {},
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 1 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    amount: 0,
+  },
+};
+
+export const Available: Story = {
+  args: {
+    amount: 12,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.tsx
new file mode 100644
index 000000000..d9cd4a171
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/gift-box-section.tsx
@@ -0,0 +1,126 @@
+import {
+  CardGiftcardOutlined,
+  CheckCircleOutline,
+  InfoOutlined,
+  NewReleasesOutlined,
+  RemoveCircleOutline,
+} from '@mui/icons-material';
+import { Box, Button, Link, Typography } from '@mui/material';
+import { ValentinesGift } from '@worksheets/icons/valentines';
+
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import {
+  GIFT_BOX_DROP_RATE,
+  MAX_DAILY_GIFT_BOX_SHARES,
+  MAX_TOKENS_IN_GIFT_BOX,
+} from '../../const';
+import { PanelFooter } from '../../panel-footer';
+
+export const GiftBoxSection: React.FC<{
+  amount: number;
+  onClaim: () => void;
+}> = ({ amount, onClaim }) => {
+  const isComplete = amount === 0;
+
+  return (
+    <CollapsibleSection
+      text="Gift Boxes"
+      description="Open gift boxes to win bonus tokens and prizes."
+      Icon={ValentinesGift}
+      status={
+        isComplete ? (
+          <CheckCircleOutline fontSize="large" color="success" />
+        ) : (
+          <NewReleasesOutlined fontSize="large" color="info" />
+        )
+      }
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Typography
+          variant="h5"
+          textAlign="center"
+          color={isComplete ? 'success.main' : 'primary.main'}
+        >
+          {isComplete ? 'No' : amount} Gift Boxes Available
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          <Typography
+            variant="body3"
+            textAlign="center"
+            color={isComplete ? 'success.main' : 'text.primary'}
+          >
+            {isComplete
+              ? 'You have opened all of your gift boxes so far.'
+              : `You will earn 1 to ${MAX_TOKENS_IN_GIFT_BOX} tokens for each gift box you open.`}
+          </Typography>
+
+          <Button
+            onClick={onClaim}
+            fullWidth
+            variant="round"
+            size="large"
+            color={'primary'}
+            disabled={isComplete}
+            startIcon={
+              isComplete ? <RemoveCircleOutline /> : <CardGiftcardOutlined />
+            }
+          >
+            Open Gift Box
+          </Button>
+
+          <Typography
+            variant="body3"
+            textAlign="center"
+            color={isComplete ? 'success.main' : 'text.primary'}
+          >
+            {GIFT_BOX_DROP_RATE}% chance to win a gift box while playing games.
+          </Typography>
+        </Box>
+        <BulletPoints
+          title="How It Works"
+          icon={<InfoOutlined color="info" fontSize="small" />}
+          points={[
+            `Each gift box contains a random amount of tokens between 1 and ${MAX_TOKENS_IN_GIFT_BOX} tokens.`,
+            `Each game has a ${GIFT_BOX_DROP_RATE}% chance to drop a bonus gift box. Play games to earn gift boxes.`,
+            `Send up to ${MAX_DAILY_GIFT_BOX_SHARES} gift boxes every day and Get a free gift box every time you send a gift box to a friend.`,
+            <>
+              {' '}
+              Buy more gift boxes from the{' '}
+              <Link href="/store">Charity Store</Link>.
+            </>,
+            <>
+              {' '}
+              <Link href="/help/vip">VIP members</Link> get x2 tokens per gift
+              box, x2 drop rates while playing games, and can send x2 gift
+              boxes.
+            </>,
+          ]}
+        />
+        <PanelFooter
+          learn={{
+            text: 'Gift Boxes',
+            href: '/help/gift-boxes',
+          }}
+          action={{
+            text: 'Send Gift Boxes',
+            href: '/account/friends',
+          }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/index.ts b/libs/ui/pages/account/src/lib/tokens-panel/sections/index.ts
new file mode 100644
index 000000000..7fe3a3e2b
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/index.ts
@@ -0,0 +1,4 @@
+export * from './daily-reward-section';
+export * from './gift-box-section';
+export * from './invite-friends-section';
+export * from './play-games-section';
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.stories.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.stories.tsx
new file mode 100644
index 000000000..39ccfba34
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.stories.tsx
@@ -0,0 +1,35 @@
+import { Paper } from '@mui/material';
+import type { Meta } from '@storybook/react';
+
+import { InviteFriendsSection } from './invite-friends-section';
+
+type Story = Meta<typeof InviteFriendsSection>;
+
+const Default: Story = {
+  component: InviteFriendsSection,
+  args: {},
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Primary: Story = {
+  args: {
+    referrals: 30,
+    tokens: 513,
+    link: 'https://charity.games/referral/137647813',
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.tsx
new file mode 100644
index 000000000..f5bbd1641
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/invite-friends-section.tsx
@@ -0,0 +1,79 @@
+import { AccountCircleOutlined, InfoOutlined } from '@mui/icons-material';
+import { Box, Link } from '@mui/material';
+import { ValentinesChat } from '@worksheets/icons/valentines';
+import React from 'react';
+
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import {
+  MAX_TOKENS_FROM_REFERRAL_PLAYS,
+  TOKENS_PER_REFERRAL_ACCOUNT,
+  TOKENS_PER_REFERRAL_PLAY,
+  TOKENS_PER_REFERRAL_PURCHASE,
+} from '../../const';
+import { PanelFooter } from '../../panel-footer';
+import { ReferralInfo } from '../../referral-info';
+import { ReferralProgress } from '../types';
+
+export const InviteFriendsSection: React.FC<ReferralProgress> = ({
+  link,
+  tokens,
+  referrals,
+}) => (
+  <CollapsibleSection
+    text="Invite Friends"
+    description="Refer your friends and get extra tokens when they play our games."
+    Icon={ValentinesChat}
+    status={<AccountCircleOutlined color="primary" fontSize="large" />}
+  >
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <ReferralInfo tokens={tokens} link={link} referrals={referrals} />
+
+      <BulletPoints
+        icon={<InfoOutlined fontSize="small" color="info" />}
+        title="How It Works"
+        points={[
+          <>
+            Earn {TOKENS_PER_REFERRAL_PLAY} token when someone{' '}
+            <Link href="/play">plays a game</Link> using your referral link.
+          </>,
+          <>
+            Your referrals can earn you up to {MAX_TOKENS_FROM_REFERRAL_PLAYS}{' '}
+            tokens every day when they <Link href="/play">play games</Link> with
+            your link.
+          </>,
+          <>
+            Earn {TOKENS_PER_REFERRAL_ACCOUNT} tokens when someone makes an
+            account using your referral link.
+          </>,
+          <>
+            Earn {TOKENS_PER_REFERRAL_PURCHASE} tokens when someone spends money
+            at the <Link href="/store">Charity Store</Link> using your referral
+            link.
+          </>,
+          <>
+            <Link href="/help/vip">VIP Members</Link> earn 2x tokens from
+            referrals and have no daily limit.
+          </>,
+        ]}
+      />
+
+      <PanelFooter
+        learn={{
+          text: 'Referrals',
+          href: '/help/referrals',
+        }}
+        action={{
+          text: 'View Referrals',
+          href: '/account/referrals',
+        }}
+      />
+    </Box>
+  </CollapsibleSection>
+);
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.stories.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.stories.tsx
new file mode 100644
index 000000000..97677355f
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.stories.tsx
@@ -0,0 +1,46 @@
+import { Paper } from '@mui/material';
+import type { Meta } from '@storybook/react';
+
+import { MAX_TOKENS_PER_DAY } from '../../const';
+import { PlayGamesSection } from './play-games-section';
+
+type Story = Meta<typeof PlayGamesSection>;
+
+const Default: Story = {
+  component: PlayGamesSection,
+  args: {},
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const NoProgress: Story = {
+  args: {
+    tokens: 0,
+  },
+};
+
+export const PartialProgress: Story = {
+  args: {
+    tokens: 123,
+  },
+};
+
+export const CompleteProgress: Story = {
+  args: {
+    tokens: MAX_TOKENS_PER_DAY,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.tsx b/libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.tsx
new file mode 100644
index 000000000..8cf9425fd
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/sections/play-games-section.tsx
@@ -0,0 +1,159 @@
+import {
+  CheckCircleOutline,
+  InfoOutlined,
+  NewReleasesOutlined,
+  PendingOutlined,
+  Star,
+} from '@mui/icons-material';
+import {
+  Box,
+  LinearProgress,
+  Link,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { WebGamepad } from '@worksheets/icons/web';
+import { calculatePercentage, toPercentage } from '@worksheets/util/numbers';
+
+import { BulletPoints } from '../../bullet-points';
+import { CollapsibleSection } from '../../collapsible-section';
+import { MAX_TOKENS_PER_DAY, MAX_TOKENS_PER_GAME } from '../../const';
+import { PanelFooter } from '../../panel-footer';
+
+export const PlayGamesSection: React.FC<{ tokens: number }> = ({ tokens }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const isComplete = tokens >= MAX_TOKENS_PER_DAY;
+  const isFresh = tokens === 0;
+
+  const percentProgress: string = toPercentage(tokens, MAX_TOKENS_PER_DAY);
+
+  return (
+    <CollapsibleSection
+      text="Play Games"
+      description="Win tokens every time you play a game."
+      Icon={WebGamepad}
+      status={
+        isFresh ? (
+          <NewReleasesOutlined fontSize="large" color="info" />
+        ) : isComplete ? (
+          <CheckCircleOutline fontSize="large" color="success" />
+        ) : (
+          <PendingOutlined fontSize="large" color="info" />
+        )
+      }
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 1,
+          }}
+        >
+          <Typography variant="h6" fontSize={{ xs: '1rem', sm: '1.25rem' }}>
+            {tokens} / {MAX_TOKENS_PER_DAY} Tokens Earned
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}
+          >
+            {isFresh ? (
+              <NewReleasesOutlined
+                fontSize="small"
+                color="info"
+                sx={{ mt: '-2px' }}
+              />
+            ) : isComplete ? (
+              <CheckCircleOutline
+                fontSize="small"
+                color="success"
+                sx={{
+                  mt: '-2px',
+                }}
+              />
+            ) : (
+              <PendingOutlined
+                fontSize="small"
+                color="info"
+                sx={{
+                  mt: '-2px',
+                }}
+              />
+            )}
+
+            <Typography variant={isMobile ? 'body3' : 'body2'} fontWeight={900}>
+              {percentProgress}
+            </Typography>
+          </Box>
+        </Box>
+        <LinearProgress
+          variant="determinate"
+          color={isComplete ? 'success' : 'primary'}
+          value={calculatePercentage(tokens, MAX_TOKENS_PER_DAY)}
+          sx={{
+            my: { xs: -1, sm: -1.5 },
+            height: 16,
+            borderRadius: (theme) => theme.shape.borderRadius,
+          }}
+        />
+
+        <Typography variant="body2">
+          {isComplete
+            ? `You have received all your tokens today. Play again tomorrow!`
+            : `Play more games to earn ${MAX_TOKENS_PER_DAY - tokens} 
+            tokens.`}
+        </Typography>
+        <BulletPoints
+          title="How It Works"
+          icon={<InfoOutlined fontSize="small" color="info" />}
+          points={[
+            <>
+              Select a game from the <Link href="/play">Arcade</Link>, bonus
+              games earn x2 tokens.
+            </>,
+            `Press the play game button and you'll immediately earn ${MAX_TOKENS_PER_GAME} tokens.`,
+            `There is no time limit or score requirement to earn tokens.`,
+            <>
+              <Link href="/help/vip">VIP Members</Link> earn twice as many
+              tokens per game and have no daily limit.
+            </>,
+          ]}
+        />
+        <BulletPoints
+          title="Bonus Games"
+          icon={<Star fontSize="small" color="highlight" />}
+          points={[
+            <Link href="/play">Sudoku</Link>,
+            <Link href="/play">Solitaire 2048</Link>,
+            <Link href="/play">Emoji War</Link>,
+            <Link href="/play">Hyper Wheel</Link>,
+          ]}
+        />
+
+        <PanelFooter
+          learn={{
+            text: 'Playing Games',
+            href: '/help/playing-games',
+          }}
+          action={{
+            text: 'Play Games',
+            href: '/play',
+          }}
+        />
+      </Box>
+    </CollapsibleSection>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.stories.tsx b/libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.stories.tsx
new file mode 100644
index 000000000..eaf0eb3aa
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.stories.tsx
@@ -0,0 +1,66 @@
+import { Paper } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+
+import { MAX_TOKENS_PER_DAY } from '../const';
+import { TokensPanel } from './tokens-panel';
+
+type Story = Meta<typeof TokensPanel>;
+
+const Default: Story = {
+  component: TokensPanel,
+  args: {
+    onClaimDailyGift: action('onClaimDailyGift'),
+    onClaimGiftBox: action('onClaimGiftBox'),
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'lightblue',
+          height: '100%',
+          padding: '1rem',
+        }}
+      >
+        <Paper sx={{ p: 3 }}>
+          <Story />
+        </Paper>
+      </div>
+    ),
+  ],
+};
+export default Default;
+
+export const Empty: Story = {
+  args: {
+    tokens: 0,
+    // 5 minutes from now, in milliseconds
+    refreshTimestamp: Date.now() + 1000 * 60 * 300,
+    gameProgressTokens: 0,
+    giftBoxes: 0,
+    dailyGiftMomentum: 1,
+    referralProgress: {
+      referrals: 0,
+      tokens: 0,
+      link: 'https://www.charity.games/referral/137647813',
+    },
+    claimedDailyGift: false,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    tokens: 100,
+    // 5 minutes from now, in milliseconds
+    refreshTimestamp: Date.now() + 1000 * 60 * 5,
+    gameProgressTokens: MAX_TOKENS_PER_DAY - 23,
+    giftBoxes: 3,
+    dailyGiftMomentum: 2.5,
+    referralProgress: {
+      referrals: 30,
+      tokens: 513,
+      link: 'https://charity.games/referral/137647813',
+    },
+    claimedDailyGift: false,
+  },
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.tsx b/libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.tsx
new file mode 100644
index 000000000..bb02a1e28
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/tokens-panel.tsx
@@ -0,0 +1,93 @@
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { Box, Divider, Link, Typography } from '@mui/material';
+import { ValentinesTicket } from '@worksheets/icons/valentines';
+import { FC } from 'react';
+
+import { useTimeUntil } from '../__hooks__/use-time-until';
+import { PanelHeader } from '../panel-header';
+import { RewardsTimer } from '../rewards-timer';
+import {
+  DailyRewardSection,
+  GiftBoxSection,
+  InviteFriendsSection,
+  PlayGamesSection,
+} from './sections';
+import { ReferralProgress } from './types';
+
+export const TokensPanel: FC<{
+  tokens: number;
+  refreshTimestamp: number;
+  gameProgressTokens: number;
+  referralProgress: ReferralProgress;
+  giftBoxes: number;
+  claimedDailyGift: boolean;
+  dailyGiftMomentum: number;
+  onClaimDailyGift: () => void;
+  onClaimGiftBox: () => void;
+}> = ({
+  tokens,
+  refreshTimestamp,
+  gameProgressTokens,
+  giftBoxes,
+  referralProgress,
+  dailyGiftMomentum,
+  claimedDailyGift,
+  onClaimGiftBox,
+  onClaimDailyGift,
+}) => {
+  const timeRemaining = useTimeUntil(refreshTimestamp);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <PanelHeader
+        primary="Tokens"
+        secondary={`${tokens} tokens`}
+        icon={<ValentinesTicket fontSize="large" />}
+      />
+
+      <Divider />
+
+      <RewardsTimer timeRemaining={timeRemaining} />
+
+      <PlayGamesSection tokens={gameProgressTokens} />
+
+      <DailyRewardSection
+        momentum={dailyGiftMomentum}
+        claimed={claimedDailyGift}
+        timeRemaining={timeRemaining}
+        onClaim={onClaimDailyGift}
+      />
+
+      <GiftBoxSection amount={giftBoxes} onClaim={onClaimGiftBox} />
+
+      <InviteFriendsSection {...referralProgress} />
+
+      <Divider sx={{ mt: 1 }} />
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 1,
+          alignItems: 'center',
+          mt: 1,
+        }}
+      >
+        <InfoOutlinedIcon fontSize="small" color="primary" />
+        <Typography>
+          Redeem tokens for real world rewards at the{' '}
+          <Link href="/prizes">prize wall</Link> or at the{' '}
+          <Link href="/auctions">auction house</Link>.
+        </Typography>
+      </Box>
+      <Typography variant="body3" color="text.secondary" mt={1}>
+        Learn more about tokens and rewards in the{' '}
+        <Link href="/help/tokens">Help Center</Link>.
+      </Typography>
+    </Box>
+  );
+};
diff --git a/libs/ui/pages/account/src/lib/tokens-panel/types.ts b/libs/ui/pages/account/src/lib/tokens-panel/types.ts
new file mode 100644
index 000000000..79253d6aa
--- /dev/null
+++ b/libs/ui/pages/account/src/lib/tokens-panel/types.ts
@@ -0,0 +1,5 @@
+export type ReferralProgress = {
+  referrals: number;
+  tokens: number;
+  link: string;
+};
diff --git a/libs/ui/pages/account/src/lib/types.ts b/libs/ui/pages/account/src/lib/types.ts
index 752e671da..5f2e4b4ec 100644
--- a/libs/ui/pages/account/src/lib/types.ts
+++ b/libs/ui/pages/account/src/lib/types.ts
@@ -11,3 +11,20 @@ export const basicGameSubmissionSchema = z.object({
 });
 
 export type BasicGameSubmission = z.infer<typeof basicGameSubmissionSchema>;
+
+export type Referral = {
+  id: string;
+  username?: string;
+  createdAt: number;
+  gamesRemaining: number;
+  tokensEarned: number;
+};
+
+export type Friend = {
+  id: string;
+  username?: string;
+  lastSeen: number;
+  gamesPlayed: number;
+  isFavorite: boolean;
+  hasSentGiftToday: boolean;
+};
diff --git a/libs/ui/pages/game/src/lib/modals/share-game/share-game.tsx b/libs/ui/pages/game/src/lib/modals/share-game/share-game.tsx
index 778b9d5f5..9cf2626f0 100644
--- a/libs/ui/pages/game/src/lib/modals/share-game/share-game.tsx
+++ b/libs/ui/pages/game/src/lib/modals/share-game/share-game.tsx
@@ -3,12 +3,12 @@ import Box from '@mui/material/Box';
 import Button, { ButtonProps } from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
+import { shareGame, SocialButtons } from '@worksheets/ui/social-media';
 import { BaseModal, ModalWrapper } from '@worksheets/ui-core';
 import { SerializableGameSchema } from '@worksheets/util/types';
 import { FC } from 'react';
 
 import { ClipboardText } from './clipboard-text';
-import { SocialButtons } from './social-buttons';
 
 export const ShareGameModal: FC<
   ModalWrapper<{
@@ -42,7 +42,7 @@ export const ShareGameModal: FC<
           <Typography variant="h5" fontSize={{ xs: '2rem', sm: '2.5rem' }}>
             Share this game
           </Typography>
-          <SocialButtons title={gameTitle} url={gameUrl} />
+          <SocialButtonsWrapper title={gameTitle} url={gameUrl} />
           <Box mt={1} mb={3}>
             <ClipboardText url={gameUrl} />
           </Box>
@@ -53,6 +53,24 @@ export const ShareGameModal: FC<
   );
 };
 
+const SocialButtonsWrapper: FC<{ title: string; url: string }> = ({
+  title,
+  url,
+}) => {
+  const encodedProps = {
+    title: encodeURIComponent(title),
+    url: encodeURIComponent(url),
+  };
+
+  return (
+    <SocialButtons
+      twitter={shareGame.twitter(encodedProps)}
+      facebook={shareGame.facebook(encodedProps)}
+      reddit={shareGame.reddit(encodedProps)}
+    />
+  );
+};
+
 const CustomButton: FC<Omit<ButtonProps, 'sx'>> = (props) => {
   return (
     <Button
diff --git a/libs/ui/pages/game/src/lib/modals/share-game/social-buttons.tsx b/libs/ui/pages/game/src/lib/modals/share-game/social-buttons.tsx
deleted file mode 100644
index afa6ba720..000000000
--- a/libs/ui/pages/game/src/lib/modals/share-game/social-buttons.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import {
-  ColoredFacebook,
-  ColoredReddit,
-  ColoredTwitter,
-} from '@worksheets/icons/companies';
-import { FC } from 'react';
-
-const CHARITY_GAMES_TWITTER_HANDLE = 'charitydotgames';
-
-export type GameInfo = { title: string; url: string };
-
-export const SocialButtons: FC<GameInfo> = (props) => {
-  const encodedProps = {
-    title: encodeURIComponent(props.title),
-    url: encodeURIComponent(props.url),
-  };
-  return (
-    <Box>
-      <IconButton
-        href={getTwitterIntent(encodedProps)}
-        target="_blank"
-        size="large"
-      >
-        <ColoredTwitter fontSize="large" />
-      </IconButton>
-      <IconButton
-        href={getFacebookIntent(encodedProps)}
-        target="_blank"
-        size="large"
-      >
-        <ColoredFacebook fontSize="large" />
-      </IconButton>
-      <IconButton href={getRedditIntent(encodedProps)}>
-        <ColoredReddit fontSize="large" />
-      </IconButton>
-    </Box>
-  );
-};
-
-const getTwitterIntent = ({ title, url }: GameInfo) =>
-  `https://twitter.com/intent/tweet?url=${url}&text=${title}&hashtags=browsergames%20%23html5games&via=${CHARITY_GAMES_TWITTER_HANDLE}`;
-
-const getFacebookIntent = ({ url }: GameInfo) =>
-  `https://www.facebook.com/sharer.php?u=${url}`;
-
-const getRedditIntent = ({ title, url }: GameInfo) =>
-  `https://www.reddit.com/r/webgames/submit?url=${url}&title=${title}`;
diff --git a/libs/ui/pills/src/index.ts b/libs/ui/pills/src/index.ts
index 9d3f1ddc2..e731bcbfc 100644
--- a/libs/ui/pills/src/index.ts
+++ b/libs/ui/pills/src/index.ts
@@ -1,7 +1,6 @@
 export * from './lib/category-pill';
 export * from './lib/game-pill';
 export * from './lib/text-pill';
-export * from './lib/progress-pill';
 export * from './lib/image-pill';
 export * from './lib/advertisement-pill';
 export * from './lib/button-pill';
diff --git a/libs/ui/pills/src/lib/progress-pill.stories.tsx b/libs/ui/pills/src/lib/progress-pill.stories.tsx
deleted file mode 100644
index ed48992b5..000000000
--- a/libs/ui/pills/src/lib/progress-pill.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Decorator, Meta, StoryObj } from '@storybook/react';
-
-import { ProgressPill } from './progress-pill';
-
-type Story = StoryObj<typeof ProgressPill>;
-type StoryDecorator = Decorator<Story>;
-
-const basic: StoryDecorator = (Story) => (
-  <div style={{ backgroundColor: 'orange', padding: 10, height: 80 }}>
-    <Story />
-  </div>
-);
-
-const smallWidth: StoryDecorator = (Story) => (
-  <div
-    style={{
-      width: 288,
-    }}
-  >
-    <Story />
-  </div>
-);
-
-const meta: Meta<typeof ProgressPill> = {
-  component: ProgressPill,
-  title: 'Pills/ProgressPill',
-};
-
-export default meta;
-
-export const Primary = {
-  args: {
-    current: 1374,
-    required: 2000,
-  },
-  decorators: [basic],
-};
-
-export const Overflow = {
-  args: {
-    current: 30,
-    required: 100,
-  },
-  decorators: [basic, smallWidth],
-};
diff --git a/libs/ui/pills/src/lib/progress-pill.tsx b/libs/ui/pills/src/lib/progress-pill.tsx
deleted file mode 100644
index 53cfb8ea5..000000000
--- a/libs/ui/pills/src/lib/progress-pill.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Box from '@mui/material/Box';
-import LinearProgress, {
-  LinearProgressProps,
-} from '@mui/material/LinearProgress';
-import { styled } from '@mui/material/styles';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import { FC, JSXElementConstructor } from 'react';
-
-import { ReferencePillSkeleton } from './reference-pill-skeleton';
-
-export type ProgressPillProps = {
-  current: number;
-  required: number;
-  color?: LinearProgressProps['color'];
-};
-export const ProgressPill: FC<ProgressPillProps> = ({
-  color,
-  current,
-  required,
-}) => (
-  <ReferencePillSkeleton href="/charity">
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 1,
-        width: '100%',
-        userSelect: 'none',
-      }}
-    >
-      <LinearProgress
-        variant="determinate"
-        color={color ?? 'success'}
-        value={(current / required) * 100}
-        sx={{ width: '100%', height: 8 }}
-      />
-      <Box
-        sx={{
-          textAlign: 'center',
-        }}
-      >
-        <CurrentProgressText color={color ?? 'success.main'}>
-          ${current}.00
-        </CurrentProgressText>
-        <RequiredFundingText>raised of ${required} goal</RequiredFundingText>
-      </Box>
-    </Box>
-  </ReferencePillSkeleton>
-);
-
-const CurrentProgressText = styled(Typography)(({ theme }) => ({
-  fontWeight: 700,
-  fontSize: '1.75rem',
-  lineHeight: 1,
-}));
-
-const RequiredFundingText = styled<JSXElementConstructor<TypographyProps>>(
-  (props) => <Typography variant="body3" {...props} />
-)(({ theme }) => ({
-  fontWeight: 500,
-  color: theme.palette.text.secondary,
-  paddingLeft: '2px',
-}));
diff --git a/libs/ui/social-media/.babelrc b/libs/ui/social-media/.babelrc
new file mode 100644
index 000000000..1ea870ead
--- /dev/null
+++ b/libs/ui/social-media/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/ui/social-media/.eslintrc.json b/libs/ui/social-media/.eslintrc.json
new file mode 100644
index 000000000..75b85077d
--- /dev/null
+++ b/libs/ui/social-media/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/ui/social-media/README.md b/libs/ui/social-media/README.md
new file mode 100644
index 000000000..6bf9de5f6
--- /dev/null
+++ b/libs/ui/social-media/README.md
@@ -0,0 +1,7 @@
+# ui-social-media
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-social-media` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/ui/social-media/jest.config.ts b/libs/ui/social-media/jest.config.ts
new file mode 100644
index 000000000..84b96b4c6
--- /dev/null
+++ b/libs/ui/social-media/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'ui-social-media',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/libs/ui/social-media',
+};
diff --git a/libs/ui/social-media/project.json b/libs/ui/social-media/project.json
new file mode 100644
index 000000000..ebea4f555
--- /dev/null
+++ b/libs/ui/social-media/project.json
@@ -0,0 +1,30 @@
+{
+  "name": "ui-social-media",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/social-media/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/ui/social-media/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/ui/social-media/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}
diff --git a/libs/ui/social-media/src/index.ts b/libs/ui/social-media/src/index.ts
new file mode 100644
index 000000000..344ad62b5
--- /dev/null
+++ b/libs/ui/social-media/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/social-buttons';
+export * from './lib/intents';
diff --git a/libs/ui/social-media/src/lib/intents.ts b/libs/ui/social-media/src/lib/intents.ts
new file mode 100644
index 000000000..94c5c2d94
--- /dev/null
+++ b/libs/ui/social-media/src/lib/intents.ts
@@ -0,0 +1,12 @@
+import { GameInfo } from '@worksheets/util/types';
+
+const CHARITY_GAMES_TWITTER_HANDLE = 'charitydotgames';
+
+export const shareGame = {
+  twitter: ({ title, url }: GameInfo) =>
+    `https://twitter.com/intent/tweet?url=${url}&text=${title}&hashtags=browsergames%20%23html5games&via=${CHARITY_GAMES_TWITTER_HANDLE}`,
+  facebook: ({ url }: GameInfo) =>
+    `https://www.facebook.com/sharer.php?u=${url}`,
+  reddit: ({ title, url }: GameInfo) =>
+    `https://www.reddit.com/r/webgames/submit?url=${url}&title=${title}`,
+};
diff --git a/libs/ui/social-media/src/lib/social-buttons.tsx b/libs/ui/social-media/src/lib/social-buttons.tsx
new file mode 100644
index 000000000..6d513349e
--- /dev/null
+++ b/libs/ui/social-media/src/lib/social-buttons.tsx
@@ -0,0 +1,30 @@
+import { Box, IconButton } from '@mui/material';
+import {
+  ColoredFacebook,
+  ColoredReddit,
+  ColoredTwitter,
+} from '@worksheets/icons/companies';
+
+export const SocialButtons: React.FC<{
+  twitter?: string;
+  facebook?: string;
+  reddit?: string;
+}> = ({ twitter, facebook, reddit }) => (
+  <Box>
+    {twitter && (
+      <IconButton href={'#'} target="_blank" size="large">
+        <ColoredTwitter fontSize="large" />
+      </IconButton>
+    )}
+    {facebook && (
+      <IconButton href={facebook} target="_blank" size="large">
+        <ColoredFacebook fontSize="large" />
+      </IconButton>
+    )}
+    {reddit && (
+      <IconButton href={reddit} target="_blank" size="large">
+        <ColoredReddit fontSize="large" />
+      </IconButton>
+    )}
+  </Box>
+);
diff --git a/libs/ui/social-media/tsconfig.json b/libs/ui/social-media/tsconfig.json
new file mode 100644
index 000000000..4daaf45cd
--- /dev/null
+++ b/libs/ui/social-media/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/libs/ui/social-media/tsconfig.lib.json b/libs/ui/social-media/tsconfig.lib.json
new file mode 100644
index 000000000..7b862025e
--- /dev/null
+++ b/libs/ui/social-media/tsconfig.lib.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/libs/ui/social-media/tsconfig.spec.json b/libs/ui/social-media/tsconfig.spec.json
new file mode 100644
index 000000000..25b7af8f6
--- /dev/null
+++ b/libs/ui/social-media/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/util/auth/src/lib/prisma-adapter.ts b/libs/util/auth/src/lib/prisma-adapter.ts
index 4cead6c9d..eaf894d53 100644
--- a/libs/util/auth/src/lib/prisma-adapter.ts
+++ b/libs/util/auth/src/lib/prisma-adapter.ts
@@ -7,6 +7,9 @@ export const customPrismaAdapter = (prisma: PrismaClient): Adapter =>
     ...PrismaAdapter(prisma),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     async createUser(data: any) {
+      // TODO: when a user is created automatically by next-auth add a referrer field and create an empty profile for them.
+      // https://next-auth.js.org/getting-started/client#additional-parameters
+
       // TODO: apply custom logic here
       return prisma.user.create({ data });
     },
diff --git a/libs/util/numbers/src/lib/numbers.ts b/libs/util/numbers/src/lib/numbers.ts
index be36c49ac..dc15b39ff 100644
--- a/libs/util/numbers/src/lib/numbers.ts
+++ b/libs/util/numbers/src/lib/numbers.ts
@@ -21,10 +21,16 @@ export function shorthandNumber(n: number): string {
   return `${n}`;
 }
 
+/**
+ * Does a simple calculation to get a percentage. Does not work with negative numbers.
+ * @param current
+ * @param max
+ * @returns A number between 0 and 100.
+ */
 export function calculatePercentage(current?: number, max?: number) {
   if (!current || !max) return 0;
-  if (current > max) return 0;
   if (current < 0 || max < 0) return 0;
+  if (current > max) return 100;
 
   return Math.min(Math.round((current / max) * 100), 100);
 }
diff --git a/libs/util/time/src/lib/time.spec.ts b/libs/util/time/src/lib/time.spec.ts
index cb809fd51..87d37097c 100644
--- a/libs/util/time/src/lib/time.spec.ts
+++ b/libs/util/time/src/lib/time.spec.ts
@@ -16,65 +16,63 @@ describe('printRelativeDate', () => {
   const dayInMs = 86400000;
 
   it('process 2 days ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 2);
+    const stamp = new Date(now.getTime() - dayInMs * 2);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      '2 days ago at 3:30 PM'
-    );
+    expect(printRelativeDate({ stamp, now })).toBe('2 days ago at 3:30 PM');
   });
 
   it('process 7 days ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 7);
+    const stamp = new Date(now.getTime() - dayInMs * 7);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      'Last week at 3:30 PM'
-    );
+    expect(printRelativeDate({ stamp, now })).toBe('Last week at 3:30 PM');
   });
 
   it('process 8 days ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 8);
+    const stamp = new Date(now.getTime() - dayInMs * 8);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      'Last week at 3:30 PM'
-    );
+    expect(printRelativeDate({ stamp, now })).toBe('Last week at 3:30 PM');
   });
 
   it('process 2 weeks ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 7 * 2);
+    const stamp = new Date(now.getTime() - dayInMs * 7 * 2);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      '2 weeks ago at 3:30 PM'
-    );
+    expect(printRelativeDate({ stamp, now })).toBe('2 weeks ago at 3:30 PM');
   });
 
   it('process 29 days ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 29);
+    const stamp = new Date(now.getTime() - dayInMs * 29);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      'Last month at 3:30 PM'
-    );
+    expect(printRelativeDate({ stamp, now })).toBe('Last month at 3:30 PM');
   });
 
   it('process 2 months ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 30 * 2);
+    const stamp = new Date(now.getTime() - dayInMs * 30 * 2);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      '2 months ago at 4:30 PM'
-    );
+    expect(printRelativeDate({ stamp, now })).toBe('2 months ago at 4:30 PM');
   });
 
   it('process 365 days ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 365);
+    const stamp = new Date(now.getTime() - dayInMs * 365);
+
+    expect(printRelativeDate({ stamp, now })).toBe('Last year at 3:30 PM');
+  });
+  it('process 3 years ago', () => {
+    const stamp = new Date(now.getTime() - dayInMs * 365 * 3);
+
+    expect(printRelativeDate({ stamp, now })).toBe('3 years ago at 3:30 PM');
+  });
+  it('does not include time for a 3 days ago', () => {
+    const stamp = new Date(now.getTime() - dayInMs * 3);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      'Last year at 3:30 PM'
+    expect(printRelativeDate({ stamp, now, includeTime: false })).toBe(
+      '3 days ago'
     );
   });
-  it('process 3 years ago ago', () => {
-    const timestamp = new Date(now.getTime() - dayInMs * 365 * 3);
+  it('does not include time for 3 years ago', () => {
+    const stamp = new Date(now.getTime() - dayInMs * 365 * 3);
 
-    expect(printRelativeDate(timestamp, 'en-US', now)).toBe(
-      '3 years ago at 3:30 PM'
+    expect(printRelativeDate({ stamp, now, includeTime: false })).toBe(
+      '3 years ago'
     );
   });
 });
diff --git a/libs/util/time/src/lib/time.ts b/libs/util/time/src/lib/time.ts
index 57a6b91c9..810b5b30b 100644
--- a/libs/util/time/src/lib/time.ts
+++ b/libs/util/time/src/lib/time.ts
@@ -21,6 +21,27 @@ export function convertSecondsToMilliseconds(seconds: number): number {
   return seconds * 1000;
 }
 
+export const minutesFromNow = (minutes: number) =>
+  new Date(Date.now() + 60000 * minutes);
+export const hoursFromNow = (hours: number) =>
+  new Date(Date.now() + 3600000 * hours);
+export const daysFromNow = (days: number) =>
+  new Date(Date.now() + 86400000 * days);
+export const weeksFromNow = (weeks: number) =>
+  new Date(Date.now() + 604800000 * weeks);
+export const monthsFromNow = (months: number) =>
+  new Date(Date.now() + 2629800000 * months);
+
+export const minutesAgo = (minutes: number) =>
+  new Date(Date.now() - 60000 * minutes);
+export const hoursAgo = (hours: number) =>
+  new Date(Date.now() - 3600000 * hours);
+export const daysAgo = (days: number) => new Date(Date.now() - 86400000 * days);
+export const weeksAgo = (weeks: number) =>
+  new Date(Date.now() - 604800000 * weeks);
+export const monthsAgo = (months: number) =>
+  new Date(Date.now() - 2629800000 * months);
+
 export const printDate = (stamp: string | Date | number, locale = 'en-US') => {
   const options: Intl.DateTimeFormatOptions = {
     weekday: 'long',
@@ -51,11 +72,17 @@ export const printDate = (stamp: string | Date | number, locale = 'en-US') => {
  *
  * @todo we're currently estimating months as 30 days and years as 365 days, this is not accurate.
  */
-export const printRelativeDate = (
-  stamp: string | Date | number,
+export const printRelativeDate = ({
+  stamp,
   locale = 'en-US',
-  now = new Date()
-) => {
+  now = new Date(),
+  includeTime = true,
+}: {
+  stamp: string | Date | number;
+  locale?: string;
+  now?: Date;
+  includeTime?: boolean;
+}) => {
   const options: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
     minute: 'numeric',
@@ -77,48 +104,36 @@ export const printRelativeDate = (
     diffInMilliseconds / (1000 * 60 * 60 * 24 * 365)
   );
 
+  const printTime = (text: string) =>
+    includeTime
+      ? `${text} at ${date.toLocaleTimeString(locale, options)}`
+      : text;
+
   if (diffInMinutes < 60) {
-    return `${diffInMinutes} minutes ago at ${date.toLocaleTimeString(
-      locale,
-      options
-    )}`;
+    return printTime(`${diffInMinutes} minutes ago`);
   } else if (diffInHours < 24) {
-    return `${diffInHours} hours ago at ${date.toLocaleTimeString(
-      locale,
-      options
-    )}`;
+    return printTime(`${diffInHours} hours ago`);
   } else if (diffInDays < 7) {
-    return `${diffInDays} days ago at ${date.toLocaleTimeString(
-      locale,
-      options
-    )}`;
+    return printTime(`${diffInDays} days ago`);
   } else if (diffInWeeks === 1) {
-    return `Last week at ${date.toLocaleTimeString(locale, options)}`;
+    return printTime(`Last week`);
   } else if (diffInWeeks < 4) {
-    return `${diffInWeeks} weeks ago at ${date.toLocaleTimeString(
-      locale,
-      options
-    )}`;
+    return printTime(`${diffInWeeks} weeks ago`);
   } else if (diffInMonths === 1) {
-    return `Last month at ${date.toLocaleTimeString(locale, options)}`;
+    return printTime(`Last month`);
   } else if (diffInMonths < 12) {
-    return `${diffInMonths} months ago at ${date.toLocaleTimeString(
-      locale,
-      options
-    )}`;
+    return printTime(`${diffInMonths} months ago`);
   } else if (diffInYears === 1) {
-    return `Last year at ${date.toLocaleTimeString(locale, options)}`;
-  } else if (diffInYears === 0) {
-    return `on ${date.toLocaleDateString(locale, options)}`;
+    return printTime(`Last year`);
   } else {
-    return `${diffInYears} years ago at ${date.toLocaleTimeString(
-      locale,
-      options
-    )}`;
+    return printTime(`${diffInYears} years ago`);
   }
 };
 
-export const printShortDate = (stamp: string | Date, locale = 'en-US') => {
+export const printShortDate = (
+  stamp: number | string | Date,
+  locale = 'en-US'
+) => {
   const options: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'numeric',
diff --git a/libs/util/types/src/index.ts b/libs/util/types/src/index.ts
index f41a696fd..d1598514c 100644
--- a/libs/util/types/src/index.ts
+++ b/libs/util/types/src/index.ts
@@ -1 +1,17 @@
-export * from './lib';
+export * from './lib/tag-schema';
+export * from './lib/game-schema';
+export * from './lib/developer-schema';
+export * from './lib/author';
+export * from './lib/recommendations';
+export * from './lib/donations';
+export * from './lib/types';
+export * from './lib/game-icon';
+export * from './lib/game-qualifier';
+export * from './lib/game-definition';
+export * from './lib/recently-played-schema';
+export * from './lib/user-vote-schema';
+export * from './lib/website-statistics';
+export * from './lib/question-answer';
+export * from './lib/terms-approval';
+export * from './lib/mocks';
+export * from './lib/game-info';
diff --git a/libs/util/types/src/lib/game-info.ts b/libs/util/types/src/lib/game-info.ts
new file mode 100644
index 000000000..3672fcb22
--- /dev/null
+++ b/libs/util/types/src/lib/game-info.ts
@@ -0,0 +1 @@
+export type GameInfo = { title: string; url: string };
diff --git a/libs/util/types/src/lib/index.ts b/libs/util/types/src/lib/index.ts
deleted file mode 100644
index 994ca4c69..000000000
--- a/libs/util/types/src/lib/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export * from './tag-schema';
-export * from './game-schema';
-export * from './developer-schema';
-export * from './author';
-export * from './recommendations';
-export * from './donations';
-export * from './types';
-export * from './game-icon';
-export * from './game-qualifier';
-export * from './game-definition';
-export * from './recently-played-schema';
-export * from './user-vote-schema';
-export * from './website-statistics';
-export * from './question-answer';
-export * from './terms-approval';
-export * from './mocks';
diff --git a/libs/util/urls/src/index.ts b/libs/util/urls/src/index.ts
index 46d2f65c2..375cdfe00 100644
--- a/libs/util/urls/src/index.ts
+++ b/libs/util/urls/src/index.ts
@@ -1,3 +1,5 @@
+import { GameInfo } from '@worksheets/util/types';
+
 const urls = {
   charityGames: process.env['NEXT_PUBLIC_CHARITY_GAMES_BASE_URL'],
   email: {
diff --git a/package-lock.json b/package-lock.json
index 735df2c5c..df93f3477 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
         "@google-cloud/storage": "^7.7.0",
         "@mui/icons-material": "^5.11.16",
         "@mui/material": "^5.15.4",
-        "@mui/material-nextjs": "^5.15.3",
         "@next/bundle-analyzer": "^14.0.3",
         "@nx/next": "16.1.4",
         "@prisma/client": "^5.5.2",
@@ -5292,37 +5291,6 @@
         }
       }
     },
-    "node_modules/@mui/material-nextjs": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-5.15.3.tgz",
-      "integrity": "sha512-4JkJ/w3XY8nvGQzGAr9v8SDlAfvo/nDxm6/hh9KPhTnkUdyQTZc8uSOOO1o30z12XzMdQ0NRivQTZGcK8sFk8g==",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/cache": "^11.11.0",
-        "@emotion/server": "^11.11.0",
-        "@mui/material": "^5.0.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "next": "^13.0.0 || ^14.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/cache": {
-          "optional": true
-        },
-        "@emotion/server": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/material/node_modules/clsx": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
@@ -10821,11 +10789,11 @@
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.7.tgz",
-      "integrity": "sha512-+6EZvhIeKEqG/RNsU3R5DxOrd60BL5GEvmzE2w60s2eKaNNxtyilDjiO1g4z2s2zDNyr7JL/Ft03pJ0Jgo0lew==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.8.tgz",
+      "integrity": "sha512-/KQlr/nLsAazJuSVUoMjQdwAeeXkKEtElKdqXrqI1LVOi5a7kMgB+bmn9aKX+7VBQLfQ36Btyty+FaY7bRtehQ==",
       "dependencies": {
-        "@storybook/core-events": "7.6.7",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "@types/uuid": "^9.0.1",
         "dequal": "^2.0.2",
@@ -11812,19 +11780,19 @@
       }
     },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.6.7.tgz",
-      "integrity": "sha512-b5AaWXOHwIXl5Q1iRRl6eRhljId0Zsg0ANawDoubK1y1jsBoQtWal7c4TQPMeLAd2G30fc3sW5zCdb9rCo2Vrg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.6.8.tgz",
+      "integrity": "sha512-g4gYcHrrV/8Xve4Q/DJfXk8Bxkq5cxzy7KIBkb8PK5h+MFUiS/xoZc5qXk/WuX256zj2JnZRV//2yf61OhNd6g==",
       "dependencies": {
         "@babel/core": "^7.23.2",
-        "@storybook/channels": "7.6.7",
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-common": "7.6.7",
-        "@storybook/core-events": "7.6.7",
-        "@storybook/core-webpack": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/preview": "7.6.7",
-        "@storybook/preview-api": "7.6.7",
+        "@storybook/channels": "7.6.8",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-common": "7.6.8",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/core-webpack": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/preview": "7.6.8",
+        "@storybook/preview-api": "7.6.8",
         "@swc/core": "^1.3.82",
         "@types/node": "^18.0.0",
         "@types/semver": "^7.3.4",
@@ -12195,12 +12163,12 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/channels": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
-      "integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.8.tgz",
+      "integrity": "sha512-aPgQcSjeyZDhAfr/slCphVfYGCihxuFCaCVlZuJA4uTaGEUkn+kPW2jP0yLtlSN33J79wFXsMLPQYwIS3aQ4Ew==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -12212,9 +12180,9 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/client-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
-      "integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.8.tgz",
+      "integrity": "sha512-WyK+RNSYk+sy0pxk8np1MnUXSWFdy54WqtT7u64vDFs9Jxfa1oMZ+Vl6XhaFQYR++tKC7VabLcI6vZ0pOoE9Jw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -12224,13 +12192,13 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/core-common": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz",
-      "integrity": "sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.8.tgz",
+      "integrity": "sha512-TRbiv5AF2m88ixyh31yqn6FgWDYZO6e6IxbJolRvEKD4b9opfPJ5e1ocb/QPz9sBUmsrX59ghMjO8R6dDYzdwA==",
       "dependencies": {
-        "@storybook/core-events": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/find-cache-dir": "^3.2.1",
         "@types/node": "^18.0.0",
         "@types/node-fetch": "^2.6.4",
@@ -12258,25 +12226,25 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/node-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.7.tgz",
-      "integrity": "sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.8.tgz",
+      "integrity": "sha512-SVvwZAcOLdkstqnAbE5hVYsriXh6OXjLcwFEBpAYi1meQ0R70iNALVSPEfIDK1r7M163Jngsq2hRnHvbLoQNkg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/preview-api": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz",
-      "integrity": "sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.8.tgz",
+      "integrity": "sha512-rtP9Yo8ZV1NWhtA3xCOAb1vU70KCV3D2U4E3rOb2prqJ2CEQ/MQbrB7KUTDRSQdT7VFbjsLQWVCTUcNo29U8JQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/channels": "7.6.8",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.7",
+        "@storybook/types": "7.6.8",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -12292,11 +12260,11 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@storybook/types": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
-      "integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.8.tgz",
+      "integrity": "sha512-+mABX20OhwJjqULocG5Betfidwrlk+Kq+grti+LAYwYsdBwxctBNSrqK8P9r8XDFL6PbppZeExGiHKwGu6WsKQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
+        "@storybook/channels": "7.6.8",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -12602,12 +12570,12 @@
       }
     },
     "node_modules/@storybook/core-client": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.7.tgz",
-      "integrity": "sha512-ZQivyEzYsZok8vRj5Qan7LbiMUnO89rueWzTnZs4IS6JIaQtjoPI1rGVq+h6qOCM6tki478hic8FS+zwGQ6q+w==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.8.tgz",
+      "integrity": "sha512-Avt0R0F9U+PEndPS23LHyIBxbwVCeF/VCIuIfD1eTYwE9nSLzvJXqlxARfFyhYV43LQcC5fIKjxfrsyUjM5vbQ==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/preview-api": "7.6.7"
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/preview-api": "7.6.8"
       },
       "funding": {
         "type": "opencollective",
@@ -12615,12 +12583,12 @@
       }
     },
     "node_modules/@storybook/core-client/node_modules/@storybook/channels": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
-      "integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.8.tgz",
+      "integrity": "sha512-aPgQcSjeyZDhAfr/slCphVfYGCihxuFCaCVlZuJA4uTaGEUkn+kPW2jP0yLtlSN33J79wFXsMLPQYwIS3aQ4Ew==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -12632,9 +12600,9 @@
       }
     },
     "node_modules/@storybook/core-client/node_modules/@storybook/client-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
-      "integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.8.tgz",
+      "integrity": "sha512-WyK+RNSYk+sy0pxk8np1MnUXSWFdy54WqtT7u64vDFs9Jxfa1oMZ+Vl6XhaFQYR++tKC7VabLcI6vZ0pOoE9Jw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -12644,16 +12612,16 @@
       }
     },
     "node_modules/@storybook/core-client/node_modules/@storybook/preview-api": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz",
-      "integrity": "sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.8.tgz",
+      "integrity": "sha512-rtP9Yo8ZV1NWhtA3xCOAb1vU70KCV3D2U4E3rOb2prqJ2CEQ/MQbrB7KUTDRSQdT7VFbjsLQWVCTUcNo29U8JQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/channels": "7.6.8",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.7",
+        "@storybook/types": "7.6.8",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -12669,11 +12637,11 @@
       }
     },
     "node_modules/@storybook/core-client/node_modules/@storybook/types": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
-      "integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.8.tgz",
+      "integrity": "sha512-+mABX20OhwJjqULocG5Betfidwrlk+Kq+grti+LAYwYsdBwxctBNSrqK8P9r8XDFL6PbppZeExGiHKwGu6WsKQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
+        "@storybook/channels": "7.6.8",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -13228,9 +13196,9 @@
       }
     },
     "node_modules/@storybook/core-events": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.7.tgz",
-      "integrity": "sha512-KZ5d03c47pnr5/kY26pJtWq7WpmCPXLbgyjJZDSc+TTY153BdZksvlBXRHtqM1yj2UM6QsSyIuiJaADJNAbP2w==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.8.tgz",
+      "integrity": "sha512-c1onJHG71JKbU4hMZC31rVTSbcfhcXaB0ikGnb7rJzlUZ1YkWnb0wf0/ikQR0seDOpR3HS+WQ0M3FIpqANyETg==",
       "dependencies": {
         "ts-dedent": "^2.0.0"
       },
@@ -13391,13 +13359,13 @@
       "dev": true
     },
     "node_modules/@storybook/core-webpack": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.6.7.tgz",
-      "integrity": "sha512-+UpjJc1fXs9KPIRbTzsBVDgsGQb+VlU3Z7w7XJM1M6ERQrvNAX3oj0iLdDK/AO1ks1qTg+meLFnVwpgKxcTTqg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.6.8.tgz",
+      "integrity": "sha512-UOTW2WhKmB8baCLc1eRssmz11sBv+iDRyS2WFK+WONkiGy3pQrpxfq2OVXXMFYkSHGXqj/jSKfKXSmNQBbkyAQ==",
       "dependencies": {
-        "@storybook/core-common": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-common": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/node": "^18.0.0",
         "ts-dedent": "^2.0.0"
       },
@@ -13737,12 +13705,12 @@
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@storybook/channels": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
-      "integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.8.tgz",
+      "integrity": "sha512-aPgQcSjeyZDhAfr/slCphVfYGCihxuFCaCVlZuJA4uTaGEUkn+kPW2jP0yLtlSN33J79wFXsMLPQYwIS3aQ4Ew==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -13754,9 +13722,9 @@
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@storybook/client-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
-      "integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.8.tgz",
+      "integrity": "sha512-WyK+RNSYk+sy0pxk8np1MnUXSWFdy54WqtT7u64vDFs9Jxfa1oMZ+Vl6XhaFQYR++tKC7VabLcI6vZ0pOoE9Jw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -13766,13 +13734,13 @@
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@storybook/core-common": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz",
-      "integrity": "sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.8.tgz",
+      "integrity": "sha512-TRbiv5AF2m88ixyh31yqn6FgWDYZO6e6IxbJolRvEKD4b9opfPJ5e1ocb/QPz9sBUmsrX59ghMjO8R6dDYzdwA==",
       "dependencies": {
-        "@storybook/core-events": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/find-cache-dir": "^3.2.1",
         "@types/node": "^18.0.0",
         "@types/node-fetch": "^2.6.4",
@@ -13800,20 +13768,20 @@
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@storybook/node-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.7.tgz",
-      "integrity": "sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.8.tgz",
+      "integrity": "sha512-SVvwZAcOLdkstqnAbE5hVYsriXh6OXjLcwFEBpAYi1meQ0R70iNALVSPEfIDK1r7M163Jngsq2hRnHvbLoQNkg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@storybook/types": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
-      "integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.8.tgz",
+      "integrity": "sha512-+mABX20OhwJjqULocG5Betfidwrlk+Kq+grti+LAYwYsdBwxctBNSrqK8P9r8XDFL6PbppZeExGiHKwGu6WsKQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
+        "@storybook/channels": "7.6.8",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -14124,9 +14092,9 @@
       "dev": true
     },
     "node_modules/@storybook/nextjs": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-7.6.7.tgz",
-      "integrity": "sha512-oaqHsxKCaseCHRuLp9mNwYS9vSo4vlMfn3LJx9lHcgup1j143Z6jaQ9FSSQfDSBm6QqbSh/Otzh8Hqh1mOQmkw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-7.6.8.tgz",
+      "integrity": "sha512-17n2k7h5Eg6LGZpQbEpBXa949+QY5Zv0u5zvtXpMShpnrcuX2E3e9AQabwUmIvU7WiLaRw9rxNC0HrW6GUB3zg==",
       "dependencies": {
         "@babel/core": "^7.23.2",
         "@babel/plugin-syntax-bigint": "^7.8.3",
@@ -14141,14 +14109,14 @@
         "@babel/preset-react": "^7.22.15",
         "@babel/preset-typescript": "^7.23.2",
         "@babel/runtime": "^7.23.2",
-        "@storybook/addon-actions": "7.6.7",
-        "@storybook/builder-webpack5": "7.6.7",
-        "@storybook/core-common": "7.6.7",
-        "@storybook/core-events": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/preset-react-webpack": "7.6.7",
-        "@storybook/preview-api": "7.6.7",
-        "@storybook/react": "7.6.7",
+        "@storybook/addon-actions": "7.6.8",
+        "@storybook/builder-webpack5": "7.6.8",
+        "@storybook/core-common": "7.6.8",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/preset-react-webpack": "7.6.8",
+        "@storybook/preview-api": "7.6.8",
+        "@storybook/react": "7.6.8",
         "@types/node": "^18.0.0",
         "@types/semver": "^7.3.4",
         "css-loader": "^6.7.3",
@@ -14527,12 +14495,12 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@storybook/channels": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
-      "integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.8.tgz",
+      "integrity": "sha512-aPgQcSjeyZDhAfr/slCphVfYGCihxuFCaCVlZuJA4uTaGEUkn+kPW2jP0yLtlSN33J79wFXsMLPQYwIS3aQ4Ew==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -14544,9 +14512,9 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@storybook/client-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
-      "integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.8.tgz",
+      "integrity": "sha512-WyK+RNSYk+sy0pxk8np1MnUXSWFdy54WqtT7u64vDFs9Jxfa1oMZ+Vl6XhaFQYR++tKC7VabLcI6vZ0pOoE9Jw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -14556,13 +14524,13 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@storybook/core-common": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz",
-      "integrity": "sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.8.tgz",
+      "integrity": "sha512-TRbiv5AF2m88ixyh31yqn6FgWDYZO6e6IxbJolRvEKD4b9opfPJ5e1ocb/QPz9sBUmsrX59ghMjO8R6dDYzdwA==",
       "dependencies": {
-        "@storybook/core-events": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/find-cache-dir": "^3.2.1",
         "@types/node": "^18.0.0",
         "@types/node-fetch": "^2.6.4",
@@ -14590,25 +14558,25 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@storybook/node-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.7.tgz",
-      "integrity": "sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.8.tgz",
+      "integrity": "sha512-SVvwZAcOLdkstqnAbE5hVYsriXh6OXjLcwFEBpAYi1meQ0R70iNALVSPEfIDK1r7M163Jngsq2hRnHvbLoQNkg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@storybook/preview-api": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz",
-      "integrity": "sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.8.tgz",
+      "integrity": "sha512-rtP9Yo8ZV1NWhtA3xCOAb1vU70KCV3D2U4E3rOb2prqJ2CEQ/MQbrB7KUTDRSQdT7VFbjsLQWVCTUcNo29U8JQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/channels": "7.6.8",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.7",
+        "@storybook/types": "7.6.8",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -14624,11 +14592,11 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@storybook/types": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
-      "integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.8.tgz",
+      "integrity": "sha512-+mABX20OhwJjqULocG5Betfidwrlk+Kq+grti+LAYwYsdBwxctBNSrqK8P9r8XDFL6PbppZeExGiHKwGu6WsKQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
+        "@storybook/channels": "7.6.8",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -14907,17 +14875,17 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.7.tgz",
-      "integrity": "sha512-olKTivJmbyuiPIa99/4Gx3zxbBplyXgbNso9ZAXHnSf7rBD0irV5oRqk+gFlEFJDHkK9vnpWMenly7vzX8QCXQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.8.tgz",
+      "integrity": "sha512-S7z2IKonfZyvaETPwDHaOsw2hnG6Kny6aVnWj1/oAMHLRkAo08v/uxXc3of27HmCng3sKoPtEKypQa6yV863MA==",
       "dependencies": {
         "@babel/preset-flow": "^7.22.15",
         "@babel/preset-react": "^7.22.15",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-        "@storybook/core-webpack": "7.6.7",
-        "@storybook/docs-tools": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/react": "7.6.7",
+        "@storybook/core-webpack": "7.6.8",
+        "@storybook/docs-tools": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/react": "7.6.8",
         "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
         "@types/node": "^18.0.0",
         "@types/semver": "^7.3.4",
@@ -15281,12 +15249,12 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/channels": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
-      "integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.8.tgz",
+      "integrity": "sha512-aPgQcSjeyZDhAfr/slCphVfYGCihxuFCaCVlZuJA4uTaGEUkn+kPW2jP0yLtlSN33J79wFXsMLPQYwIS3aQ4Ew==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -15298,9 +15266,9 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/client-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
-      "integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.8.tgz",
+      "integrity": "sha512-WyK+RNSYk+sy0pxk8np1MnUXSWFdy54WqtT7u64vDFs9Jxfa1oMZ+Vl6XhaFQYR++tKC7VabLcI6vZ0pOoE9Jw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -15310,13 +15278,13 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/core-common": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz",
-      "integrity": "sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.8.tgz",
+      "integrity": "sha512-TRbiv5AF2m88ixyh31yqn6FgWDYZO6e6IxbJolRvEKD4b9opfPJ5e1ocb/QPz9sBUmsrX59ghMjO8R6dDYzdwA==",
       "dependencies": {
-        "@storybook/core-events": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/find-cache-dir": "^3.2.1",
         "@types/node": "^18.0.0",
         "@types/node-fetch": "^2.6.4",
@@ -15344,13 +15312,13 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/docs-tools": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.7.tgz",
-      "integrity": "sha512-enTO/xVjBqwUraGCYTwdyjMvug3OSAM7TPPUEJ3KPieJNwAzcYkww/qNDMIAR4S39zPMrkAmtS3STvVadlJz7g==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.8.tgz",
+      "integrity": "sha512-zIbrje4JLFpfK05y3SkDNtIth/vTOEaJVa/zaHuwS1gUX73Pq3jwF2eMGVabeVWi6hvxGeZXhnIsymh/Hpbn5w==",
       "dependencies": {
-        "@storybook/core-common": "7.6.7",
-        "@storybook/preview-api": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-common": "7.6.8",
+        "@storybook/preview-api": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/doctrine": "^0.0.3",
         "assert": "^2.1.0",
         "doctrine": "^3.0.0",
@@ -15362,25 +15330,25 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/node-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.7.tgz",
-      "integrity": "sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.8.tgz",
+      "integrity": "sha512-SVvwZAcOLdkstqnAbE5hVYsriXh6OXjLcwFEBpAYi1meQ0R70iNALVSPEfIDK1r7M163Jngsq2hRnHvbLoQNkg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/preview-api": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz",
-      "integrity": "sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.8.tgz",
+      "integrity": "sha512-rtP9Yo8ZV1NWhtA3xCOAb1vU70KCV3D2U4E3rOb2prqJ2CEQ/MQbrB7KUTDRSQdT7VFbjsLQWVCTUcNo29U8JQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/channels": "7.6.8",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.7",
+        "@storybook/types": "7.6.8",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -15396,11 +15364,11 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@storybook/types": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
-      "integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.8.tgz",
+      "integrity": "sha512-+mABX20OhwJjqULocG5Betfidwrlk+Kq+grti+LAYwYsdBwxctBNSrqK8P9r8XDFL6PbppZeExGiHKwGu6WsKQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
+        "@storybook/channels": "7.6.8",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -15595,9 +15563,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/@storybook/preview": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.7.tgz",
-      "integrity": "sha512-/ddKIyT+6b8CKGJAma1wood4nwCAoi/E1olCqgpCmviMeUtAiMzgK0xzPwvq5Mxkz/cPeXVi8CQgaQZCa4yvNA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.8.tgz",
+      "integrity": "sha512-f54EXmJcIkc5A7nQmtnCUtNFNfEOoTuPYFK7pDfcK/bVU+g63zzWhBAeIUZ8yioLKGqZPTzFEhXkpa+OqsT0Jg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -15643,17 +15611,17 @@
       }
     },
     "node_modules/@storybook/react": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.6.7.tgz",
-      "integrity": "sha512-uT9IBPDM1SQg6FglWqb7IemOJ1Z8kYB5rehIDEDToi0u5INihSY8rHd003TxG4Wx4REp6J+rfbDJO2aVui/gxA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.6.8.tgz",
+      "integrity": "sha512-yMqcCNskCxqoYSGWO1qu6Jdju9zhEEwd8tOC7AgIC8sAB7K8FTxZu0d6+QFpeg9fGq+hyAmRM4GrT9Fq9IKwwQ==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-client": "7.6.7",
-        "@storybook/docs-tools": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-client": "7.6.8",
+        "@storybook/docs-tools": "7.6.8",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.6.7",
-        "@storybook/react-dom-shim": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/preview-api": "7.6.8",
+        "@storybook/react-dom-shim": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^18.0.0",
@@ -16216,12 +16184,12 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/channels": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
-      "integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.8.tgz",
+      "integrity": "sha512-aPgQcSjeyZDhAfr/slCphVfYGCihxuFCaCVlZuJA4uTaGEUkn+kPW2jP0yLtlSN33J79wFXsMLPQYwIS3aQ4Ew==",
       "dependencies": {
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -16233,9 +16201,9 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/client-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
-      "integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.8.tgz",
+      "integrity": "sha512-WyK+RNSYk+sy0pxk8np1MnUXSWFdy54WqtT7u64vDFs9Jxfa1oMZ+Vl6XhaFQYR++tKC7VabLcI6vZ0pOoE9Jw==",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -16245,13 +16213,13 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/core-common": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz",
-      "integrity": "sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.8.tgz",
+      "integrity": "sha512-TRbiv5AF2m88ixyh31yqn6FgWDYZO6e6IxbJolRvEKD4b9opfPJ5e1ocb/QPz9sBUmsrX59ghMjO8R6dDYzdwA==",
       "dependencies": {
-        "@storybook/core-events": "7.6.7",
-        "@storybook/node-logger": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-events": "7.6.8",
+        "@storybook/node-logger": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/find-cache-dir": "^3.2.1",
         "@types/node": "^18.0.0",
         "@types/node-fetch": "^2.6.4",
@@ -16279,13 +16247,13 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/docs-tools": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.7.tgz",
-      "integrity": "sha512-enTO/xVjBqwUraGCYTwdyjMvug3OSAM7TPPUEJ3KPieJNwAzcYkww/qNDMIAR4S39zPMrkAmtS3STvVadlJz7g==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.8.tgz",
+      "integrity": "sha512-zIbrje4JLFpfK05y3SkDNtIth/vTOEaJVa/zaHuwS1gUX73Pq3jwF2eMGVabeVWi6hvxGeZXhnIsymh/Hpbn5w==",
       "dependencies": {
-        "@storybook/core-common": "7.6.7",
-        "@storybook/preview-api": "7.6.7",
-        "@storybook/types": "7.6.7",
+        "@storybook/core-common": "7.6.8",
+        "@storybook/preview-api": "7.6.8",
+        "@storybook/types": "7.6.8",
         "@types/doctrine": "^0.0.3",
         "assert": "^2.1.0",
         "doctrine": "^3.0.0",
@@ -16297,25 +16265,25 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/node-logger": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.7.tgz",
-      "integrity": "sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.8.tgz",
+      "integrity": "sha512-SVvwZAcOLdkstqnAbE5hVYsriXh6OXjLcwFEBpAYi1meQ0R70iNALVSPEfIDK1r7M163Jngsq2hRnHvbLoQNkg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/preview-api": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz",
-      "integrity": "sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.8.tgz",
+      "integrity": "sha512-rtP9Yo8ZV1NWhtA3xCOAb1vU70KCV3D2U4E3rOb2prqJ2CEQ/MQbrB7KUTDRSQdT7VFbjsLQWVCTUcNo29U8JQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
-        "@storybook/client-logger": "7.6.7",
-        "@storybook/core-events": "7.6.7",
+        "@storybook/channels": "7.6.8",
+        "@storybook/client-logger": "7.6.8",
+        "@storybook/core-events": "7.6.8",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.7",
+        "@storybook/types": "7.6.8",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -16331,9 +16299,9 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/react-dom-shim": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.7.tgz",
-      "integrity": "sha512-b/rmy/YzVrwP+ifyZG4yXVIdeFVdTbmziodHUlbrWiUNsqtTZZur9kqkKRUH/7ofji9MFe81nd0MRlcTNFomqg==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.8.tgz",
+      "integrity": "sha512-NIvtjdXCTwd0VA/zCaCuCYv7L35nze7qDsFW6JhSHyqB7fKyIEMSbluktO2VISotHOSkgZ2zA+rGpk3O8yh6lg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -16344,11 +16312,11 @@
       }
     },
     "node_modules/@storybook/react/node_modules/@storybook/types": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
-      "integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.8.tgz",
+      "integrity": "sha512-+mABX20OhwJjqULocG5Betfidwrlk+Kq+grti+LAYwYsdBwxctBNSrqK8P9r8XDFL6PbppZeExGiHKwGu6WsKQ==",
       "dependencies": {
-        "@storybook/channels": "7.6.7",
+        "@storybook/channels": "7.6.8",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -20781,9 +20749,9 @@
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
     },
     "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+      "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
     },
     "node_modules/buffer-xor": {
       "version": "1.0.3",
@@ -23580,9 +23548,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.629",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.629.tgz",
-      "integrity": "sha512-5UUkr3k3CZ/k+9Sw7vaaIMyOzMC0XbPyprKI3n0tbKDqkzTDOjK4izm7DxlkueRMim6ZZQ1ja9F7hoFVplHihA=="
+      "version": "1.4.630",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.630.tgz",
+      "integrity": "sha512-osHqhtjojpCsACVnuD11xO5g9xaCyw7Qqn/C2KParkMv42i8jrJJgx3g7mkHfpxwhy9MnOJr8+pKOdZ7qzgizg=="
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
@@ -25517,9 +25485,9 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "funding": [
         {
           "type": "individual",
@@ -26983,11 +26951,6 @@
         "html-tokenize": "bin/cmd.js"
       }
     },
-    "node_modules/html-tokenize/node_modules/buffer-from": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
-      "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
-    },
     "node_modules/html-tokenize/node_modules/isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
@@ -29598,6 +29561,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/jest-runner/node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "node_modules/jest-runner/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -39760,6 +39729,11 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/source-map-support/node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
     "node_modules/source-map-support/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -40804,6 +40778,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/terser/node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
diff --git a/package.json b/package.json
index 8de8e0dfa..1a5355488 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,6 @@
     "@google-cloud/storage": "^7.7.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.15.4",
-    "@mui/material-nextjs": "^5.15.3",
     "@next/bundle-analyzer": "^14.0.3",
     "@nx/next": "16.1.4",
     "@prisma/client": "^5.5.2",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index d55735bf4..c27a9152f 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -80,6 +80,7 @@
       "@worksheets/ui/qa-section": ["libs/ui/qa-section/src/index.ts"],
       "@worksheets/ui/qa-section/server": ["libs/ui/qa-section/src/server.ts"],
       "@worksheets/ui/snackbar": ["libs/ui/snackbar/src/index.ts"],
+      "@worksheets/ui/social-media": ["libs/ui/social-media/src/index.ts"],
       "@worksheets/ui/theme": ["libs/ui/theme/src/index.ts"],
       "@worksheets/ui/widgets": ["libs/ui/widgets/src/index.ts"],
       "@worksheets/util-devices": ["libs/util/devices/src/index.ts"],
diff --git a/types/@mui.d.ts b/types/@mui.d.ts
index 8a21250d4..37cbdffe8 100644
--- a/types/@mui.d.ts
+++ b/types/@mui.d.ts
@@ -105,6 +105,7 @@ declare module '@mui/material/Typography' {
     primary: true;
     title: true;
     body3: true;
+    dangrek: true;
   }
 }