diff --git a/test/api/unit/libs/highlightMentions.test.js b/test/api/unit/libs/highlightMentions.test.js
index 30fb34c72c..266bfbaaa6 100644
--- a/test/api/unit/libs/highlightMentions.test.js
+++ b/test/api/unit/libs/highlightMentions.test.js
@@ -47,6 +47,12 @@ describe('highlightMentions', () => {
     expect(result[0]).to.equal('[@user-dash](/profile/444): message [@user_underscore](/profile/555)');
   });
 
+  it('highlights users with case-insensitive matching', async () => {
+    const text = '@USER: message @User2 @USER3';
+    const result = await highlightMentions(text);
+    expect(result[0]).to.equal('[@USER](/profile/111): message [@User2](/profile/222) [@USER3](/profile/333)');
+  });
+
   it('doesn\'t highlight nonexisting users', async () => {
     const text = '@nouser message';
     const result = await highlightMentions(text);
diff --git a/test/api/v3/integration/chat/POST-chat.test.js b/test/api/v3/integration/chat/POST-chat.test.js
index ba4ac00ed0..f16cbea6f9 100644
--- a/test/api/v3/integration/chat/POST-chat.test.js
+++ b/test/api/v3/integration/chat/POST-chat.test.js
@@ -238,6 +238,18 @@ describe('POST /chat', () => {
     expect(groupMessages[0].id).to.exist;
   });
 
+  it('creates a chat with case-insensitive mentions', async () => {
+    const originalUsername = member.auth.local.username;
+    const uppercaseUsername = originalUsername.toUpperCase();
+    const messageWithMentions = `hi @${uppercaseUsername}`;
+    const newMessage = await user.post(`/groups/${groupWithChat._id}/chat`, { message: messageWithMentions });
+    const groupMessages = await user.get(`/groups/${groupWithChat._id}/chat`);
+
+    expect(newMessage.message.id).to.exist;
+    expect(newMessage.message.text).to.include(`[@${uppercaseUsername}](/profile/${member._id})`);
+    expect(groupMessages[0].id).to.exist;
+  });
+
   it('creates a chat with a max length of 3000 chars', async () => {
     const veryLongMessage = `
     123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789.
diff --git a/website/client/src/assets/images/gifts_bg.svg b/website/client/src/assets/images/gifts_bg.svg
new file mode 100644
index 0000000000..3f77f4d3ee
--- /dev/null
+++ b/website/client/src/assets/images/gifts_bg.svg
@@ -0,0 +1,9 @@
+<svg width="378" height="176" viewBox="0 0 378 176" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H378V174C378 175.105 377.105 176 376 176H1.99999C0.895423 176 0 175.105 0 174V0Z" fill="url(#paint0_linear_2257_239)"/>
+<defs>
+<linearGradient id="paint0_linear_2257_239" x1="378" y1="0" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#925CF3"/>
+<stop offset="1" stop-color="#34B5C1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/website/client/src/assets/images/gifts_start.svg b/website/client/src/assets/images/gifts_start.svg
new file mode 100644
index 0000000000..72cc108b69
--- /dev/null
+++ b/website/client/src/assets/images/gifts_start.svg
@@ -0,0 +1,37 @@
+<svg width="48" height="96" viewBox="0 0 48 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.10104 12.0483C-2.82088 9.43721 -3.53422 6.57214 -5.6115 5.24584C-7.68877 3.91954 -9.89543 4.92709 -10.1422 6.808C-10.3891 8.68891 -9.06061 9.83066 -4.97737 13.9337C-3.81821 15.0985 -3.3812 14.6594 -3.10104 12.0483Z" stroke="#FFA624" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.34089 15.2054C4.45116 13.6561 7.27707 12.8443 9.45877 13.9889C11.6405 15.1334 11.8754 17.5575 10.3778 18.7127C8.88016 19.868 7.23193 19.2828 1.65411 17.781C0.0706697 17.3546 0.230624 16.7548 2.34089 15.2054Z" stroke="#FFBE5D" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.549002 12.0098C-3.61871 9.59194 -3.87667 15.8322 -2.20457 16.8023C-0.532473 17.7724 4.71671 14.4277 0.549002 12.0098Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.76917 16.0445L13.637 24.9825L9.18965 32.7229L-6.21656 23.785L-1.76917 16.0445Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-6.90457 13.0652L3.36623 19.0238L-1.08116 26.7643L-11.352 20.8057L-6.90457 13.0652Z" fill="#FFBE5D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.76917 16.0445L3.36623 19.0238L1.88377 21.604L-3.25163 18.6247L-1.76917 16.0445Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-6.21656 23.785L6.62195 31.2333L-3.75529 49.2944L-16.5938 41.8461L-6.21656 23.785Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.64886 25.2747L6.62195 31.2333L5.13948 33.8134L-5.13132 27.8548L-3.64886 25.2747Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.401307 24.1842L10.6721 30.1428L9.18965 32.7229L-1.08116 26.7643L0.401307 24.1842Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7924 38.4607L17.9387 42.0519L21.31 40.5834L24.8838 41.4413L23.4225 38.0537L24.2762 34.4625L20.9049 35.9309L17.3311 35.0731L18.7924 38.4607Z" fill="white" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-3.93867 71.2331L-4.79238 74.8243L-1.42111 73.3559L2.15271 74.2137L0.691383 70.8261L1.54509 67.2349L-1.82618 68.7033L-5.4 67.8455L-3.93867 71.2331Z" fill="white" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8949 25.3807L35.0583 29.8802L37.9424 26.2452L42.4202 25.0761L38.8028 22.178L37.6393 17.6786L34.7552 21.3135L30.2775 22.4826L33.8949 25.3807Z" fill="white" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2596 71.999L40.579 68.1435L45.9507 88.2881L31.6312 92.1436L26.2596 71.999Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9401 75.8545L26.2589 71.9966L31.6273 92.1421L17.3084 96L11.9401 75.8545Z" fill="#DDF3F3"/>
+<rect width="2.96589" height="20.8485" transform="matrix(0.965611 -0.25999 0.257652 0.966238 23.3957 72.7701)" fill="#FFA624"/>
+<rect width="2.96589" height="20.8485" transform="matrix(0.965611 -0.25999 0.257652 0.966238 26.2596 71.999)" fill="#FFBE5D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9999 90.0369L30.8638 89.2658L31.6312 92.1436L28.7673 92.9147L27.9999 90.0369Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3957 72.7701L26.2596 71.999L27.0269 74.8768L24.163 75.6479L23.3957 72.7701Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9401 75.8545L23.3951 72.7682L24.162 75.6461L12.707 78.7325L11.9401 75.8545Z" fill="#C1E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5443 93.1213L27.9999 90.0369L28.7673 92.9147L17.3117 95.9991L16.5443 93.1213Z" fill="#C1E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1235 71.2279L40.579 68.1435L41.3464 71.0213L29.8908 74.1057L29.1235 71.2279Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7277 88.4947L45.1833 85.4103L45.9507 88.2881L34.4951 91.3725L33.7277 88.4947Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8638 89.2658L33.7277 88.4947L34.4951 91.3725L31.6312 92.1436L30.8638 89.2658Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2596 71.999L29.1235 71.2279L29.8908 74.1057L27.0269 74.8768L26.2596 71.999Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5224 56.3076C25.8087 53.7812 24.0792 51.3933 21.6588 50.9455C19.2383 50.4977 17.5679 52.2625 18.0403 54.0994C18.5126 55.9363 20.17 56.4948 25.4855 58.7621C26.9945 59.4057 27.236 58.834 26.5224 56.3076Z" stroke="#FFA624" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.745 57.1864C34.124 54.9555 36.4415 53.1391 38.8911 53.3791C41.3406 53.6191 42.4621 55.7782 41.5042 57.413C40.5463 59.0479 38.7999 59.1258 33.0684 59.8329C31.4413 60.0337 31.366 59.4173 32.745 57.1864Z" stroke="#FFBE5D" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.8923 54.898C25.1267 54.225 27.2139 60.108 29.1258 60.378C31.0378 60.648 34.6579 55.571 29.8923 54.898Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.247 59.5115L46.8635 61.9994L45.6255 70.8503L28.0091 68.3625L29.247 59.5115Z" fill="#F8F9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6306 57.0236L29.247 59.5114L28.0091 68.3624L10.3927 65.8745L11.6306 57.0236Z" fill="#DDF3F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3749 58.6822L35.1192 60.3408L33.8813 69.1917L22.137 67.5332L23.3749 58.6822Z" fill="#FFBE5D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3749 58.6822L29.247 59.5115L28.0091 68.3625L22.137 67.5332L23.3749 58.6822Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.247 59.5115L35.1192 60.3408L34.7065 63.2911L28.8344 62.4618L29.247 59.5115Z" fill="#FFA624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3749 58.6822L29.247 59.5115L28.8344 62.4618L22.9622 61.6326L23.3749 58.6822Z" fill="#EE9109"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8053 62.9241L22.5496 64.5827L22.137 67.533L10.3927 65.8745L10.8053 62.9241Z" fill="#C1E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2939 66.2414L46.0382 67.9L45.6255 70.8503L33.8813 69.1917L34.2939 66.2414Z" fill="#DDF3F3"/>
+</svg>
diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index 2777f81bdf..1ee69d8d19 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -30,12 +30,23 @@
     cursor: default;
     color: $gray-200;
     opacity: 1;
-    box-shadow: none;
-    background-color: $gray-700;
+    background-color: transparent;
     border: 2px solid transparent;
-
+    box-shadow:
+      0 1px 3px 0 rgba($black, 0.12),
+      0 1px 2px 0 rgba($black, 0.24);
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 4px 12px;
+    min-height: 32px;
+    max-height: 32px;
+    gap: 8px;
+    border-radius: 4px;
+    
     .svg {
-      color: $gray-300;
+      color: $gray-200;
     }
   }
 
diff --git a/website/client/src/assets/svg/close-white.svg b/website/client/src/assets/svg/close-white.svg
new file mode 100644
index 0000000000..15b3087598
--- /dev/null
+++ b/website/client/src/assets/svg/close-white.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#FFFFFF" fill-rule="nonzero">
+            <polygon points="12.1973467 2 14 3.80265326 9.80187117 8 14 12.1973467 12.1973467 14 8 9.80187117 3.80265326 14 2 12.1973467 6.19812883 8 2 3.80265326 3.80265326 2 8 6.19812883"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/website/client/src/assets/svg/for-css/end_challenge_badge.svg b/website/client/src/assets/svg/for-css/end_challenge_badge.svg
new file mode 100644
index 0000000000..e7beb8115a
--- /dev/null
+++ b/website/client/src/assets/svg/for-css/end_challenge_badge.svg
@@ -0,0 +1,9 @@
+<svg width="48" height="52" viewBox="0 0 48 52" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="48" height="52" fill="url(#pattern0_2201_101)"/>
+<defs>
+<pattern id="pattern0_2201_101" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2201_101" transform="scale(0.0208333 0.0192308)"/>
+</pattern>
+<image id="image0_2201_101" width="48" height="52" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg b/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg
new file mode 100644
index 0000000000..1b9f48d5a5
--- /dev/null
+++ b/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1792 31.6843L46.8536 22.3769L23.918 28.6988L18.861 42.5218L44.341 58.5813L58.1792 31.6843Z" fill="#FF944C"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L46.1108 26.1328L36.2812 28.8422L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M30.2393 39.0304L26.4518 31.5515L36.2813 28.8422L30.2393 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L36.2813 28.8422L30.2393 39.0304L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.1108 26.1328L46.6218 34.5148L53.8301 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L26.4518 31.5516L30.2393 39.0304L23.0309 41.0173Z" fill="#FA8537"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.6218 34.5148L43.0424 53.79L53.8301 32.5279Z" fill="#FA8537"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L30.2393 39.0304L43.0425 53.79L23.0309 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L30.2393 39.0304L43.0425 53.79L46.6218 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.555 4.15937L47.026 0.420004L38.7773 1.59601L36.4144 6.17539L44.5675 12.8919L50.555 4.15937Z" fill="#FFBE5D"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L46.6034 1.6924L43.0682 2.1964L46.414 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M40.5221 5.46854L39.5331 2.7004L43.0682 2.1964L40.5221 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L43.0683 2.1964L40.5221 5.46855L46.414 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25894L46.6034 1.6924L46.414 4.62854L49.0064 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M37.9296 5.83815L39.5331 2.70041L40.5221 5.46855L37.9296 5.83815Z" fill="#FFA624"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25893L46.414 4.62853L44.3259 11.1688L49.0064 4.25893Z" fill="#FFA624"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M37.9297 5.83815L40.5221 5.46855L44.326 11.1688L37.9297 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L40.5221 5.46855L44.326 11.1688L46.414 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2986 16.7775L24.6513 8.36623L11.1016 3.94533L4.07056 9.19883L11.614 25.6769L27.2986 16.7775Z" fill="#FF6165"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L23.0573 10.0026L17.2502 8.10789L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.908 11.2141L11.4432 6.21322L17.2502 8.10789L10.908 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L17.2502 8.10789L10.9081 11.2141L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L23.0573 10.0026L20.5864 14.3719L24.8449 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M6.64955 9.82464L11.4432 6.21321L10.908 11.2141L6.64955 9.82464Z" fill="#F23035"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L20.5864 14.3719L12.5221 22.8464L24.8449 15.7613Z" fill="#F23035"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.64959 9.82464L10.9081 11.2141L12.5221 22.8463L6.64959 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L10.9081 11.2141L12.5221 22.8463L20.5864 14.3719Z" fill="white"/>
+</svg>
diff --git a/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg b/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg
new file mode 100644
index 0000000000..7c38566dc4
--- /dev/null
+++ b/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82083 31.6843L17.1464 22.3769L40.082 28.6988L45.139 42.5218L19.659 58.5813L5.82083 31.6843Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L17.8892 26.1328L27.7188 28.8422L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.7607 39.0304L37.5482 31.5515L27.7187 28.8422L33.7607 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L27.7187 28.8422L33.7607 39.0304L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.8892 26.1328L17.3782 34.5148L10.1699 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L37.5482 31.5516L33.7607 39.0304L40.9691 41.0173Z" fill="#1CA372"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.3782 34.5148L20.9576 53.79L10.1699 32.5279Z" fill="#1CA372"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L33.7607 39.0304L20.9575 53.79L40.9691 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L33.7607 39.0304L20.9575 53.79L17.3782 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.445 4.15937L16.974 0.420004L25.2227 1.59601L27.5856 6.17539L19.4325 12.8919L13.445 4.15937Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L17.3966 1.6924L20.9318 2.1964L17.586 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M23.4779 5.46854L24.4669 2.7004L20.9318 2.1964L23.4779 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L20.9317 2.1964L23.4779 5.46855L17.586 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25894L17.3966 1.6924L17.586 4.62854L14.9936 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M26.0704 5.83815L24.4669 2.70041L23.4779 5.46855L26.0704 5.83815Z" fill="#4F2A93"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25893L17.586 4.62853L19.6741 11.1688L14.9936 4.25893Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M26.0703 5.83815L23.4779 5.46855L19.674 11.1688L26.0703 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L23.4779 5.46855L19.674 11.1688L17.586 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7014 16.7775L39.3487 8.36623L52.8984 3.94533L59.9294 9.19883L52.386 25.6769L36.7014 16.7775Z" fill="#50B5E9"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L40.9427 10.0026L46.7498 8.10789L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M53.092 11.2141L52.5568 6.21322L46.7498 8.10789L53.092 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L46.7498 8.10789L53.0919 11.2141L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L40.9427 10.0026L43.4136 14.3719L39.1551 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L52.5568 6.21321L53.092 11.2141L57.3504 9.82464Z" fill="#46A7D9"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L43.4136 14.3719L51.4779 22.8464L39.1551 15.7613Z" fill="#46A7D9"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L53.0919 11.2141L51.4779 22.8463L57.3504 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L53.0919 11.2141L51.4779 22.8463L43.4136 14.3719Z" fill="white"/>
+</svg>
diff --git a/website/client/src/components/achievements/onboardingComplete.vue b/website/client/src/components/achievements/onboardingComplete.vue
index b7fb595191..6b8ccedaf4 100644
--- a/website/client/src/components/achievements/onboardingComplete.vue
+++ b/website/client/src/components/achievements/onboardingComplete.vue
@@ -117,7 +117,7 @@ export default {
     closeWithAction () {
       this.close();
       setTimeout(() => {
-        this.$router.push({ name: 'achievements' });
+        this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
       }, 200);
     },
   },
diff --git a/website/client/src/components/challenges/challengeDetail.vue b/website/client/src/components/challenges/challengeDetail.vue
index f6d146249f..38f78e6158 100644
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/website/client/src/components/challenges/challengeDetail.vue
@@ -72,32 +72,40 @@
         </div>
         <div class="col-12 col-md-6 text-right">
           <div
-            class="box member-count"
+            class="box member-count p-2"
             @click="showMemberModal()"
           >
-            <div
-              class="svg-icon member-icon"
-              v-html="icons.memberIcon"
-            ></div>
-            {{ challenge.memberCount }}
-            <div
-              v-once
-              class="details"
-            >
-              {{ $t('participantsTitle') }}
+            <div class="box-content">
+              <div class="icon-number-row">
+                <div
+                  class="svg-icon member-icon"
+                  v-html="icons.memberIcon"
+                ></div>
+                <span class="number">{{ challenge.memberCount }}</span>
+              </div>
+              <div
+                v-once
+                class="details"
+              >
+                {{ $t('participantsTitle') }}
+              </div>
             </div>
           </div>
-          <div class="box">
-            <div
-              class="svg-icon gem-icon"
-              v-html="icons.gemIcon"
-            ></div>
-            {{ challenge.prize || 0 }}
-            <div
-              v-once
-              class="details"
-            >
-              {{ $t('prize') }}
+          <div class="box prize-count p-2">
+            <div class="box-content">
+              <div class="icon-number-row">
+                <div
+                  class="svg-icon gem-icon"
+                  v-html="icons.gemIcon"
+                ></div>
+                <span class="number">{{ challenge.prize || 0 }}</span>
+              </div>
+              <div
+                v-once
+                class="details"
+              >
+                {{ $t('prize') }}
+              </div>
             </div>
           </div>
         </div>
@@ -304,7 +312,6 @@
 
   .box {
     display: inline-block;
-    padding: 1em;
     border-radius: 2px;
     background-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -314,22 +321,88 @@
     text-align: center;
     font-size: 20px;
     vertical-align: bottom;
+    overflow: hidden;
+    position: relative;
 
     &.member-count:hover {
       cursor: pointer;
     }
 
+    .box-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    .icon-number-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.1em;
+
+      .number {
+        font-size: 20px;
+        font-weight: normal;
+        margin-left: 0.2em;
+      }
+    }
+
     .svg-icon {
       width: 30px;
       display: inline-block;
-      margin-right: .2em;
       vertical-align: bottom;
     }
 
     .details {
       font-size: 12px;
-      margin-top: 0.4em;
       color: $gray-200;
+      width: 100%;
+      padding: 0 4px;
+      line-height: 1.15;
+      word-break: break-word;
+      max-height: 2.3em;
+      overflow: visible;
+    }
+
+    &.member-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
+    }
+
+    &.prize-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
     }
   }
 
diff --git a/website/client/src/components/challenges/closeChallengeModal.vue b/website/client/src/components/challenges/closeChallengeModal.vue
index 2bee9a2b70..c0472b0a2b 100644
--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/website/client/src/components/challenges/closeChallengeModal.vue
@@ -4,6 +4,7 @@
       id="close-challenge-modal"
       :title="$t('endChallenge')"
       size="md"
+      :hide-header="false"
     >
       <div
         slot="modal-header"
@@ -15,6 +16,9 @@
         >
           {{ $t('endChallenge') }}
         </h2>
+        <close-x
+          @close="$root.$emit('bv::hide::modal', 'close-challenge-modal')"
+        />
       </div>
       <div class="row text-center">
         <span
@@ -28,28 +32,67 @@
           class="col-12"
         >
           <div class="col-12">
-            <div class="support-habitica">
-              <!-- @TODO: Add challenge achievement badge here-->
+            <div class="badge-section">
+              <div
+                class="gems-left"
+                v-html="icons.gemsOrange"
+              ></div>
+              <div
+                class="challenge-badge"
+                v-html="icons.endChallengeBadge"
+              ></div>
+              <div
+                class="gems-right"
+                v-html="icons.gemsPurple"
+              ></div>
             </div>
           </div>
           <div class="col-12">
             <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
           </div>
-          <div class="col-12">
-            <member-search-dropdown
-              :text="winnerText"
-              :members="members"
-              :challenge-id="challengeId"
-              @member-selected="selectMember"
-            />
+          <div class="col-12 search-input-container">
+            <div class="search-input-wrapper">
+              <div
+                class="search-icon"
+                v-html="icons.search"
+              ></div>
+              <input
+                v-model="searchTerm"
+                class="search-input"
+                type="text"
+                placeholder="@Username"
+                @input="searchMembers"
+                @focus="showResults = true"
+                @blur="handleBlur"
+              >
+              <div
+                v-if="showResults && filteredMembers.length > 0"
+                class="search-results"
+              >
+                <div
+                  v-for="member in filteredMembers"
+                  :key="member._id"
+                  class="search-result-item"
+                  @mousedown="selectMember(member)"
+                >
+                  {{ getMemberDisplayName(member) }}
+                </div>
+              </div>
+            </div>
           </div>
           <div class="col-12">
             <button
-              v-once
-              class="btn btn-primary"
+              class="btn award-winner-btn"
+              :class="{'has-winner': winner._id}"
+              :disabled="!winner._id"
               @click="closeChallenge"
             >
-              {{ $t('awardWinners') }}
+              <span>{{ $t('awardWinners') }}</span>
+              <div
+                class="gem-icon"
+                v-html="icons.gem"
+              ></div>
+              <span>{{ prize }} {{ prize === 1 ? $t('gem') : $t('gems') }}</span>
             </button>
           </div>
         </span>
@@ -60,14 +103,27 @@
           </div>
         </div>
         <div class="col-12">
-          <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+          <strong
+            v-once
+            class="delete-challenge-text"
+          >{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+        </div>
+        <div
+          v-once
+          class="col-12 refund-text"
+        >
+          {{ $t('deleteChallengeRefundDescription') }}
         </div>
         <div class="col-12">
           <button
             v-once
-            class="btn btn-danger"
+            class="btn btn-danger delete-challenge-btn"
             @click="deleteChallenge()"
           >
+            <div
+              class="svg-icon color delete-icon"
+              v-html="icons.deleteIcon"
+            ></div>
             {{ $t('deleteChallenge') }}
           </button>
         </div>
@@ -82,6 +138,7 @@
 
 <style lang='scss'>
   @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/button.scss';
 
   #close-challenge-modal {
     h2 {
@@ -94,26 +151,190 @@
 
     .header-wrap {
       width: 100%;
-      padding-top: 2em;
+      padding-top: 32px;
+      position: relative;
     }
 
-    .support-habitica {
-      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
-      width: 325px;
-      height: 89px;
+    .modal-close {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      padding: 0;
+      margin: 0;
+    }
+
+    .search-input-container {
+      margin-top: 1em !important;
+    }
+
+    .search-input-wrapper {
+      position: relative;
+      width: 384px;
       margin: 0 auto;
+
+      .search-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-55%);
+        width: 16px;
+        height: 16px;
+        color: $gray-200;
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+      }
+
+      .search-input {
+        width: 100%;
+        height: 32px;
+        padding-left: 36px;
+        padding-right: 12px;
+        border: 1px solid $gray-400;
+        border-radius: 4px;
+        font-size: 14px;
+        transition: border-color 0.2s ease, border-width 0.2s ease;
+
+        &:focus {
+          outline: none;
+          border: 2px solid $purple-400;
+        }
+
+        &::placeholder {
+          color: $gray-300;
+        }
+      }
+
+      .search-results {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: $white;
+        border: 1px solid $gray-400;
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 1000;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+        .search-result-item {
+          padding: 8px 16px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          text-align: left;
+
+          &:hover {
+            background-color: $purple-600;
+            color: $purple-300;
+          }
+        }
+      }
+    }
+
+    .delete-challenge-text {
+      color: $maroon-50;
+    }
+
+    .refund-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $gray-50;
+      margin-top: 0.5em !important;
+    }
+
+    .delete-challenge-btn {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 24px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+
+      .delete-icon {
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+      }
+    }
+
+    .award-winner-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 32px;
+      padding: 4px 12px;
+      transition: all 0.2s ease;
+
+      &:not(:disabled) {
+        background-color: $white;
+        color: $gray-200;
+        border: 1px solid $gray-400;
+        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+
+        &.has-winner {
+          background-color: $purple-200;
+          color: $white;
+          border-color: $purple-200;
+        }
+
+        &:hover:not(.has-winner) {
+          background-color: $gray-700;
+        }
+      }
+
+      .gem-icon {
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        color: $gems-color;
+      }
+    }
+
+    .badge-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1.5rem;
+      margin: -24px auto 0;
+      padding: 0.5rem 0;
+
+      .gems-left, .gems-right {
+        width: 64px;
+        height: 64px;
+        flex-shrink: 0;
+      }
+
+      .challenge-badge {
+        width: 48px;
+        height: 52px;
+        flex-shrink: 0;
+      }
     }
 
     .modal-footer, .modal-header {
       border: none !important;
     }
 
+    .modal-header {
+      padding: 0 !important;
+    }
+
     .footer-wrap {
       display: none;
     }
 
     .col-12 {
-      margin-top: 2em;
+      margin-top: 1.5em;
+    }
+
+    .col-12:first-child {
+      margin-top: 0;
     }
 
     .or {
@@ -123,21 +344,39 @@
       margin-right: auto;
       margin-left: auto;
       font-weight: bold;
+      color: $gray-100;
     }
   }
 </style>
 
 <script>
-import memberSearchDropdown from '@/components/members/memberSearchDropdown';
+import searchIcon from '@/assets/svg/for-css/search.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import endChallengeBadge from '@/assets/svg/for-css/end_challenge_badge.svg?raw';
+import gemsOrange from '@/assets/svg/for-css/orange100_red100_yellow100_gems.svg?raw';
+import gemsPurple from '@/assets/svg/for-css/purple200_green10_blue100_gems.svg?raw';
+import closeX from '@/components/ui/closeX';
 
 export default {
   components: {
-    memberSearchDropdown,
+    closeX,
   },
   props: ['challengeId', 'members', 'prize', 'flagCount'],
   data () {
     return {
       winner: {},
+      searchTerm: '',
+      showResults: false,
+      filteredMembers: [],
+      icons: Object.freeze({
+        search: searchIcon,
+        deleteIcon,
+        gem: gemIcon,
+        endChallengeBadge,
+        gemsOrange,
+        gemsPurple,
+      }),
     };
   },
   computed: {
@@ -150,8 +389,35 @@ export default {
     },
   },
   methods: {
+    searchMembers () {
+      if (!this.searchTerm) {
+        this.filteredMembers = [];
+        return;
+      }
+
+      const searchLower = this.searchTerm.toLowerCase().replace('@', '');
+      this.filteredMembers = this.members.filter(member => {
+        const username = member.auth?.local?.username || '';
+        const displayName = member.profile?.name || '';
+        return username.toLowerCase().includes(searchLower)
+               || displayName.toLowerCase().includes(searchLower);
+      }).slice(0, 10);
+    },
+    getMemberDisplayName (member) {
+      if (member.auth?.local?.username) {
+        return `@${member.auth.local.username}`;
+      }
+      return member.profile?.name || '';
+    },
     selectMember (member) {
       this.winner = member;
+      this.searchTerm = this.getMemberDisplayName(member);
+      this.showResults = false;
+    },
+    handleBlur () {
+      setTimeout(() => {
+        this.showResults = false;
+      }, 200);
     },
     async closeChallenge () {
       this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {
diff --git a/website/client/src/components/header/notifications/g1g1.vue b/website/client/src/components/header/notifications/g1g1.vue
index 1edf280019..ad3afc59e7 100644
--- a/website/client/src/components/header/notifications/g1g1.vue
+++ b/website/client/src/components/header/notifications/g1g1.vue
@@ -1,37 +1,43 @@
 <template>
   <div
-    class="notification d-flex flex-column justify-content-center text-center"
+    class="notification d-flex justify-content-center align-items-center"
   >
-    <strong
-      v-once
-      class="mx-auto mb-2"
+    <img
+      src="@/assets/images/gifts_start.svg"
+      class="gift-start"
+      alt=""
     >
-      {{ $t('g1g1') }}
-    </strong>
-    <small
-      v-once
-      class="mx-4 mb-3"
-    >
-      {{ $t('g1g1Details') }}
-    </small>
-    <div
-      class="btn-secondary mx-auto d-flex"
-      @click="showSelectUser()"
-    >
-      <div
+    <div class="content-wrapper d-flex flex-column justify-content-center text-center">
+      <strong
         v-once
-        class="m-auto"
+        class="mx-auto mb-2"
+      >
+        {{ $t('g1g1') }}
+      </strong>
+      <small
+        v-once
+        class="mx-4 mb-3"
+      >
+        {{ $t('g1g1Details') }}
+      </small>
+      <button
+        class="btn btn-secondary mx-auto"
+        @click="showSelectUser()"
       >
         {{ $t('sendGift') }}
-      </div>
+      </button>
     </div>
+    <img
+      src="@/assets/images/gifts_start.svg"
+      class="gift-end"
+      alt=""
+    >
     <div
-      class="notification-remove"
-      @click.stop="remove()"
+      class="close-x"
+      @click="remove()"
     >
       <div
-        v-once
-        class="svg-icon"
+        class="svg-icon svg-close"
         v-html="icons.close"
       ></div>
     </div>
@@ -41,51 +47,89 @@
 <style lang='scss' scoped>
   @import '@/assets/scss/colors.scss';
 
-  small, strong {
+  small {
     color: $white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: 0;
+  }
+
+  strong {
+    color: $white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 1.714;
   }
 
   .notification {
-    background-image: url('@/assets/images/g1g1-notif.png');
+    background-image: url('@/assets/images/gifts_bg.svg');
+    background-size: cover;
+    background-position: center;
     height: 10rem;
-    padding: 3rem;
+    padding: 0;
     position: relative;
     overflow: hidden;
     white-space: normal;
     cursor: pointer;
   }
 
-  .notification-remove {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 24px;
-    top: 24px;
-
-    .svg-icon {
-      width: 10px;
-      height: 10px;
-    }
+  .content-wrapper {
+    flex: 1;
+    padding: 2rem;
+    z-index: 1;
   }
 
-  .btn-secondary {
-    width: 5.75rem;
-    min-height: 1.5rem;
-    border-radius: 2px;
-    border-color: $white;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    font-size: 12px;
-    font-weight: bold;
+  .gift-start {
+    height: 96px;
+    width: auto;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 0;
+  }
+
+  .gift-end {
+    height: 96px;
+    width: auto;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%) scaleX(-1);
+    z-index: 0;
+  }
+
+  .close-x {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+    z-index: 2;
+
+    &:hover .svg-close {
+      opacity: 0.75;
+    }
+
+    .svg-close {
+      width: 18px;
+      height: 18px;
+      opacity: 0.5;
+      transition: opacity 0.2s ease;
+      pointer-events: none;
+    }
   }
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close-teal.svg?raw';
-import { mapActions } from '@/libs/store';
+import closeIcon from '@/assets/svg/close-white.svg?raw';
 
 export default {
-  props: ['notification'],
+  props: ['notification', 'eventKey'],
   data () {
     return {
       icons: Object.freeze({
@@ -94,11 +138,11 @@ export default {
     };
   },
   methods: {
-    ...mapActions({
-      readNotification: 'notifications:readNotification',
-    }),
     remove () {
-      this.readNotification({ notificationId: this.notification.id });
+      if (this.eventKey) {
+        window.sessionStorage.setItem(`hide-g1g1-${this.eventKey}`, 'true');
+      }
+      this.$emit('notification-removed');
     },
     showSelectUser () {
       this.$root.$emit('bv::show::modal', 'select-user-modal');
diff --git a/website/client/src/components/header/notifications/onboardingComplete.vue b/website/client/src/components/header/notifications/onboardingComplete.vue
index 9ad68ba316..b30dacf152 100644
--- a/website/client/src/components/header/notifications/onboardingComplete.vue
+++ b/website/client/src/components/header/notifications/onboardingComplete.vue
@@ -71,7 +71,7 @@ export default {
   props: ['notification', 'canRemove'],
   methods: {
     action () {
-      this.$router.push({ name: 'achievements' });
+      this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
     },
   },
 };
diff --git a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
index 1fd8964fff..b15dc35c1c 100644
--- a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
+++ b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
@@ -43,7 +43,7 @@ export default {
   },
   methods: {
     action () {
-      this.$router.push({ name: 'stats' });
+      this.$router.push(`/profile/${this.$store.state.user.data._id}#stats`);
     },
   },
 };
diff --git a/website/client/src/components/header/notificationsDropdown.vue b/website/client/src/components/header/notificationsDropdown.vue
index 24d2c9d327..b9822cf822 100644
--- a/website/client/src/components/header/notificationsDropdown.vue
+++ b/website/client/src/components/header/notificationsDropdown.vue
@@ -49,6 +49,12 @@
         v-if="showOnboardingGuide"
         :never-seen="hasSpecialBadge"
       />
+      <gift-one-get-one-notification
+        v-if="shouldShowG1g1"
+        :notification="g1g1Notification"
+        :event-key="g1g1EventKey"
+        @notification-removed="handleG1g1Removed"
+      />
       <component
         :is="notification.type"
         v-for="notification in notifications"
@@ -114,6 +120,7 @@
 <script>
 import * as quests from '@/../../common/script/content/quests';
 import { hasCompletedOnboarding } from '@/../../common/script/libs/onboarding';
+import find from 'lodash/find';
 import { mapState, mapActions } from '@/libs/store';
 import notificationsIcon from '@/assets/svg/notifications.svg?raw';
 import MenuDropdown from '../ui/customMenuDropdown';
@@ -151,6 +158,7 @@ export default {
     CARD_RECEIVED,
     CHALLENGE_INVITATION,
     GIFT_ONE_GET_ONE,
+    GiftOneGetOneNotification: GIFT_ONE_GET_ONE,
     GROUP_TASK_ASSIGNED,
     GROUP_TASK_CLAIMED,
     GROUP_TASK_NEEDS_WORK,
@@ -178,17 +186,14 @@ export default {
       hasSpecialBadge: false,
       quests,
       openStatus: undefined,
+      g1g1Hidden: false,
       actionableNotifications: [
         'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
         'QUEST_INVITATION',
       ],
-      // A list of notifications handled by this component,
-      // listed in the order they should appear in the notifications panel.
-      // NOTE: Those not listed here won't be shown in the notification panel!
       handledNotifications: [
         'NEW_STUFF',
         'ITEM_RECEIVED',
-        'GIFT_ONE_GET_ONE',
         'GROUP_TASK_NEEDS_WORK',
         'GUILD_INVITATION',
         'PARTY_INVITATION',
@@ -207,7 +212,10 @@ export default {
     };
   },
   computed: {
-    ...mapState({ user: 'user.data' }),
+    ...mapState({
+      user: 'user.data',
+      currentEventList: 'worldState.data.currentEventList',
+    }),
     notificationsOrder () {
       // Returns a map of NOTIFICATION_TYPE -> POSITION
       const orderMap = {};
@@ -286,9 +294,9 @@ export default {
 
       return notifications;
     },
-    // The total number of notification, shown inside the dropdown
     notificationsCount () {
-      return this.notifications.length;
+      const g1g1Count = this.shouldShowG1g1 ? 1 : 0;
+      return this.notifications.length + g1g1Count;
     },
     hasUnseenNotifications () {
       return this.notifications.some(notification => (notification.seen === false));
@@ -299,6 +307,30 @@ export default {
     showOnboardingGuide () {
       return !hasCompletedOnboarding(this.user);
     },
+    currentG1g1Event () {
+      return find(this.currentEventList, event => event.promo === 'g1g1');
+    },
+    g1g1EventKey () {
+      if (!this.currentG1g1Event || !this.currentG1g1Event.start) return null;
+      const startDate = new Date(this.currentG1g1Event.start);
+      return `${startDate.getFullYear()}-${startDate.getMonth()}`;
+    },
+    shouldShowG1g1 () {
+      if (!this.currentG1g1Event) return false;
+      const eventKey = this.g1g1EventKey;
+      if (eventKey && window.sessionStorage.getItem(`hide-g1g1-${eventKey}`) === 'true') {
+        return false;
+      }
+      return !this.g1g1Hidden;
+    },
+    g1g1Notification () {
+      return {
+        type: 'GIFT_ONE_GET_ONE',
+        id: `g1g1-event-${this.currentG1g1Event?.start || 'default'}`,
+        data: {},
+        seen: false,
+      };
+    },
   },
   mounted () {
     const onboardingPanelState = getLocalSetting(CONSTANTS.keyConstants.ONBOARDING_PANEL_STATE);
@@ -364,6 +396,9 @@ export default {
     isActionable (notification) {
       return this.actionableNotifications.indexOf(notification.type) !== -1;
     },
+    handleG1g1Removed () {
+      this.g1g1Hidden = true;
+    },
   },
 
 };
diff --git a/website/client/src/components/header/userDropdown.vue b/website/client/src/components/header/userDropdown.vue
index efaec0a534..ea565996f3 100644
--- a/website/client/src/components/header/userDropdown.vue
+++ b/website/client/src/components/header/userDropdown.vue
@@ -176,7 +176,12 @@ export default {
       }
     },
     showProfile (startingPage) {
-      this.$router.push({ name: startingPage });
+      const userId = this.$store.state.user.data._id;
+      let path = `/profile/${userId}`;
+      if (startingPage !== 'profile') {
+        path += `#${startingPage}`;
+      }
+      this.$router.push(path);
     },
     toLearnMore () {
       this.$router.push({ name: 'subscription' });
diff --git a/website/client/src/components/messages/messageCard.vue b/website/client/src/components/messages/messageCard.vue
index bcc6f882e7..ebe1916d3f 100644
--- a/website/client/src/components/messages/messageCard.vue
+++ b/website/client/src/components/messages/messageCard.vue
@@ -454,17 +454,14 @@ export default {
     },
     isUserMentioned () {
       const message = this.msg;
-
       if (message.highlight) {
         return true;
       }
-
       const { user } = this;
-      const displayName = user.profile.name;
       const { username } = user.auth.local;
-      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
-      message.highlight = new RegExp(pattern, 'i').test(message.text);
-
+      if (!username) return false;
+      const usernamePattern = new RegExp(`@${escapeRegExp(username)}(?:\\b|(?=[^a-zA-Z0-9_]))`, 'i');
+      message.highlight = usernamePattern.test(message.text);
       return message.highlight;
     },
     flagCountDescription () {
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index c85e69f968..d42713d4a0 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -1126,7 +1126,12 @@ export default {
     this.loadUser();
     this.oldTitle = this.$store.state.title;
     this.handleExternalLinks();
-    this.selectPage(this.startingPage);
+    // Check if there's a hash in the URL to determine the starting page
+    let pageToSelect = this.startingPage;
+    if (window.location.hash && (window.location.hash === '#stats' || window.location.hash === '#achievements')) {
+      pageToSelect = window.location.hash.substring(1);
+    }
+    this.selectPage(pageToSelect);
     this.$root.$on('habitica:report-profile-result', () => {
       this.loadUser();
     });
@@ -1211,10 +1216,15 @@ export default {
     },
     selectPage (page) {
       this.selectedPage = page || 'profile';
-      window.history.replaceState(null, null, '');
+      const profileUserId = this.userId || this.userLoggedIn._id;
+      let newPath = `/profile/${profileUserId}`;
+      if (page !== 'profile') {
+        newPath += `#${page}`;
+      }
+      window.history.replaceState(null, null, newPath);
       this.$store.dispatch('common:setTitle', {
         section: this.$t('user'),
-        subSection: this.$t(this.startingPage),
+        subSection: this.$t(page),
       });
     },
     getNextIncentive () {
diff --git a/website/client/src/libs/renderWithMentions.js b/website/client/src/libs/renderWithMentions.js
index e5e86fcdf3..cd4f11bce4 100644
--- a/website/client/src/libs/renderWithMentions.js
+++ b/website/client/src/libs/renderWithMentions.js
@@ -1,7 +1,16 @@
 import habiticaMarkdown from 'habitica-markdown/withMentions';
+import escapeRegExp from 'lodash/escapeRegExp';
 
 export default function renderWithMentions (text, user) {
   if (!text) return null;
-  const env = { userName: user.auth.local.username, displayName: user.profile.name };
-  return habiticaMarkdown.render(String(text), env);
+  const env = { userName: user.auth.local.username };
+  let html = habiticaMarkdown.render(String(text), env);
+
+  if (user.auth.local.username) {
+    const username = escapeRegExp(user.auth.local.username);
+    const regex = new RegExp(`(<span class="at-text">@)(${username})(</span>)`, 'gi');
+    html = html.replace(regex, (match, p1, p2, p3) => `${p1.replace('at-text', 'at-text at-highlight')}${p2}${p3}`);
+  }
+
+  return html;
 }
diff --git a/website/client/src/router/index.js b/website/client/src/router/index.js
index ecca6389d0..820e560c96 100644
--- a/website/client/src/router/index.js
+++ b/website/client/src/router/index.js
@@ -90,6 +90,9 @@ const router = new VueRouter({
       path: '/profile/:userId',
       props: true,
     },
+    { name: 'profile', path: '/user/profile' },
+    { name: 'stats', path: '/user/stats' },
+    { name: 'achievements', path: '/user/achievements' },
     {
       path: '/inventory',
       component: InventoryContainer,
@@ -369,6 +372,10 @@ router.beforeEach(async (to, from, next) => {
     if (to.params.startingPage !== undefined) {
       startingPage = to.params.startingPage;
     }
+    // Check if there's a hash in the URL for stats or achievements
+    if (to.hash === '#stats' || to.hash === '#achievements') {
+      startingPage = to.hash.substring(1);
+    }
     if (from.name === null) {
       store.state.postLoadModal = `profile/${to.params.userId}`;
       return next({ name: 'tasks' });
@@ -389,10 +396,18 @@ router.beforeEach(async (to, from, next) => {
   }
 
   if ((to.name === 'stats' || to.name === 'achievements' || to.name === 'profile') && from.name !== null) {
+    const userId = store.state.user.data._id;
+    let redirectPath = `/profile/${userId}`;
+    if (to.name === 'stats') {
+      redirectPath += '#stats';
+    } else if (to.name === 'achievements') {
+      redirectPath += '#achievements';
+    }
     router.app.$emit('habitica:show-profile', {
+      userId,
       startingPage: to.name,
       fromPath: from.path,
-      toPath: to.path,
+      toPath: redirectPath,
     });
     return null;
   }
diff --git a/website/client/tests/unit/libs/renderWithMentions.spec.js b/website/client/tests/unit/libs/renderWithMentions.spec.js
index e92bf85181..ca3cfb5d88 100644
--- a/website/client/tests/unit/libs/renderWithMentions.spec.js
+++ b/website/client/tests/unit/libs/renderWithMentions.spec.js
@@ -12,12 +12,12 @@ describe('renderWithMentions', () => {
     expect(result).to.be.null;
   });
 
-  test('highlights displayname', () => {
+  test('does not highlight displayname to prevent impersonation', () => {
     const text = 'hello @displayedUser with text after';
 
     const result = renderMarkdown(text, user('user', 'displayedUser'));
-
-    expect(result).to.contain('<span class="at-text at-highlight">@displayedUser</span>');
+    expect(result).to.contain('<span class="at-text">@displayedUser</span>');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@displayedUser</span>');
   });
 
   test('highlights username', () => {
@@ -56,7 +56,8 @@ describe('renderWithMentions', () => {
 
     const result = renderMarkdown(plainText, user('use', 'mentions'));
 
-    expect(result).to.contain('<span class="at-text at-highlight">@mentions</span>');
+    expect(result).to.contain('<span class="at-text">@mentions</span>');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>');
     expect(result).to.contain('<span class="at-text at-highlight">@use</span>');
     expect(result).to.contain('<span class="at-text">@mail</span>');
     expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>.com');
diff --git a/website/common/locales/en/challenge.json b/website/common/locales/en/challenge.json
index f5dcfecd08..b525ef7386 100644
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -69,6 +69,7 @@
   "awardWinners": "Award Winner",
   "doYouWantedToDeleteChallenge": "Do you want to delete this Challenge?",
   "deleteChallenge": "Delete Challenge",
+  "deleteChallengeRefundDescription": "If you delete this Challenge, you will be refunded the Gem prize and the Challenge tasks will remain on the participants' task boards.",
   "challengeNamePlaceholder": "What is your Challenge name?",
   "challengeSummary": "Summary",
   "challengeSummaryPlaceholder": "Write a short description advertising your Challenge to other Habiticans. What is the main purpose of your Challenge and why should people join it? Try to include useful keywords in the description so that Habiticans can easily find it when they search!",
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index 0f05f49288..97f0023ba2 100644
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -51,6 +51,7 @@
   "notEnoughGems": "Not enough Gems",
   "alreadyHave": "Whoops! You already have this item. No need to buy it again!",
   "delete": "Delete",
+  "gem": "Gem",
   "gems": "Gems",
   "needMoreGems": "Need More Gems?",
   "needMoreGemsInfo": "Purchase Gems now, or become a subscriber to buy Gems with Gold, get monthly mystery items, enjoy increased drop caps and more!",
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 2de39ea075..b1ae6565bd 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -116,7 +116,7 @@
   "needsTextPlaceholder": "Type your message here.",
   "messageCopiedToClipboard": "Message copied to clipboard.",
   "leaderOnlyChallenges": "Only group leader can create challenges",
-  "sendGift": "Send a Gift",
+  "sendGift": "Send Gift",
   "selectGift": "Select Gift",
   "selectSubscription": "Select Subscription",
   "sendGiftToWhom": "Who would you like to send a gift to?",
diff --git a/website/server/libs/highlightMentions.js b/website/server/libs/highlightMentions.js
index ccb074590e..ae2ca5d293 100644
--- a/website/server/libs/highlightMentions.js
+++ b/website/server/libs/highlightMentions.js
@@ -164,18 +164,24 @@ export default async function highlightMentions (text) {
 
   if (mentions && mentions.length <= 5) {
     const usernames = mentions.map(mention => mention.substr(1));
+    const usernameRegexes = usernames.map(username => new RegExp(`^${escapeRegExp(username)}$`, 'i'));
     members = await User
-      .find({ 'auth.local.username': { $in: usernames }, 'flags.verifiedUsername': true })
+      .find({
+        $or: usernameRegexes.map(regex => ({ 'auth.local.username': regex })),
+        'flags.verifiedUsername': true,
+      })
       .select(['auth.local.username', '_id', 'preferences.pushNotifications', 'pushDevices', 'party', 'guilds'])
       .lean()
       .exec();
     const baseUrl = determineBaseUrl();
     members.forEach(member => {
       const { username } = member.auth.local;
-      const regex = new RegExp(`@${username}(?![\\-\\w])`, 'g');
-      const replacement = `[@${username}](${baseUrl}/profile/${member._id})`;
+      const regex = new RegExp(`@${escapeRegExp(username)}(?![\\-\\w])`, 'gi');
 
-      textBlocks.transformValidBlocks(blockText => blockText.replace(regex, replacement));
+      textBlocks.transformValidBlocks(blockText => blockText.replace(regex, match => {
+        const mentionedUsername = match.substr(1);
+        return `[@${mentionedUsername}](${baseUrl}/profile/${member._id})`;
+      }));
     });
   }