From 14eac461be88aeba31987366ee66f348dc2611fa Mon Sep 17 00:00:00 2001
From: "Cal H." <hendersoncal117@gmail.com>
Date: Mon, 18 Aug 2025 18:59:19 +0100
Subject: [PATCH] feat: medal promotion on servers page (#4117)

* feat: medal promotion on servers page

* feat: medal server card

* fix: styling changes

* fix: colors for dark mode only

* fix: light mode medal promotion

* feat: finish server card layout

* feat: countdown on server panel

* fix: lint

* feat: use same gradient as promo

* fix: scale for medal bg

* fix: border around server icon

* feat: medal subscr expiry date stuff

* feat: progress on plans within the modal

* feat: finalize plan modal stage

* fix: unused scss

* feat: remove buttons from cards

* feat: upgrade button opens modal on server panel

* feat: billing endpoint

* fix: lint issues

* fix: lint issues

* fix: lint issues

* feat: better handling of downgrades + existing plan checks

* feat: update medal url

* feat: proration visual in modal

* feat: standardize upgrade modal into ServersUpgradeModalWrapper

* feat: replace upgrade PurchaseModal with ServersUpgradeModalWrapper

* feat: allow server region

* fix: lint

* fix: lint

* fix: medal frontend completion

* fix: lint issues

* feat: ad

* fix: hover tooltip + orange new server sparkle

* feat: ad

* fix: lint issues new eslint

* feat: match ad

* feat: support for ?dry=true

* fix: lint isuses

* fix: lint issues

* fix: TeleportDropdownMenu imports

* fix: hash nav issues

* feat: clarify confirm changes btn

* fix: lint issues

* fix: "Using new payment method"

* fix: lint

* fix: re-add -mt-2

---------

Signed-off-by: Cal H. <hendersoncal117@gmail.com>
---
 .../src/components/ui/PromotionWrapper.vue    |   6 +-
 .../illustrations/medal_promo_background.svg  | 490 ++++++++++++++++++
 .../images/servers/medal_server_icon.svg      |  12 +
 apps/frontend/src/assets/styles/global.scss   |  10 +
 .../src/components/ui/AdPlaceholder.vue       |   6 +-
 .../src/components/ui/servers/ServerIcon.vue  |   2 +-
 .../components/ui/servers/ServerListing.vue   | 137 +++--
 .../ui/servers/ServersUpgradeModalWrapper.vue | 261 ++++++++++
 .../servers/marketing/MedalPlanPromotion.vue  |  75 +++
 .../marketing/MedalServerCountdown.vue        | 161 ++++++
 .../servers/marketing/MedalServerListing.vue  | 251 +++++++++
 apps/frontend/src/composables/featureFlags.ts |   1 +
 .../composables/servers/modules/general.ts    |   2 +
 apps/frontend/src/pages/servers/index.vue     |  45 +-
 .../src/pages/servers/manage/[id].vue         |  16 +-
 .../servers/manage/[id]/options/index.vue     |   2 +-
 .../src/pages/servers/manage/index.vue        |  63 ++-
 .../src/pages/settings/billing/index.vue      | 266 ++++++----
 packages/assets/generated-icons.ts            |   4 +
 packages/assets/icons/clock.svg               |   1 +
 packages/assets/icons/rocket.svg              |   1 +
 .../ui/src/components/base/OptionGroup.vue    | 128 +++++
 .../billing/ModalBasedServerPlan.vue          | 138 +++++
 .../billing/ModrinthServersPurchaseModal.vue  | 140 ++++-
 .../billing/ServersPurchase0Plan.vue          | 226 ++++++++
 .../billing/ServersPurchase1Region.vue        |   2 +-
 .../billing/ServersPurchase3Review.vue        | 169 ++++--
 .../src/components/billing/ServersSpecs.vue   |  20 +-
 packages/ui/src/components/index.ts           |   1 +
 packages/ui/src/composables/stripe.ts         |  56 +-
 packages/ui/src/locales/en-US/index.json      |  33 ++
 packages/utils/servers/types/common.ts        |   3 +
 packages/utils/servers/types/server.ts        |   1 +
 packages/utils/types.ts                       |  32 ++
 34 files changed, 2476 insertions(+), 285 deletions(-)
 create mode 100644 apps/frontend/src/assets/images/illustrations/medal_promo_background.svg
 create mode 100644 apps/frontend/src/assets/images/servers/medal_server_icon.svg
 create mode 100644 apps/frontend/src/components/ui/servers/ServersUpgradeModalWrapper.vue
 create mode 100644 apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
 create mode 100644 apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
 create mode 100644 apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
 create mode 100644 packages/assets/icons/clock.svg
 create mode 100644 packages/assets/icons/rocket.svg
 create mode 100644 packages/ui/src/components/base/OptionGroup.vue
 create mode 100644 packages/ui/src/components/billing/ModalBasedServerPlan.vue
 create mode 100644 packages/ui/src/components/billing/ServersPurchase0Plan.vue

diff --git a/apps/app-frontend/src/components/ui/PromotionWrapper.vue b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
index c8a2f1ca6..2a44681c5 100644
--- a/apps/app-frontend/src/components/ui/PromotionWrapper.vue
+++ b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
@@ -34,17 +34,17 @@ function updateAdPosition() {
 <template>
 	<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
 		<a
-			href="https://modrinth.gg?from=app-placeholder"
+			href="https://modrinth.gg/medal?app"
 			target="_blank"
 			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
 		>
 			<img
-				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="hidden light-image rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="dark-image rounded-[inherit]"
 			/>
diff --git a/apps/frontend/src/assets/images/illustrations/medal_promo_background.svg b/apps/frontend/src/assets/images/illustrations/medal_promo_background.svg
new file mode 100644
index 000000000..53efcfedd
--- /dev/null
+++ b/apps/frontend/src/assets/images/illustrations/medal_promo_background.svg
@@ -0,0 +1,490 @@
+<svg width="1120" height="116" viewBox="0 0 1120 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="path-1-inside-1_9092_23263" fill="white">
+        <path
+            d="M460.704 -89.7906L418.995 -98.1936C415.591 -98.8731 412.786 -95.5784 414.023 -92.3281L429.187 -52.2419C430.194 -49.5896 433.662 -48.9476 435.498 -51.081L463.062 -83.0993C465.103 -85.4707 463.796 -89.1809 460.711 -89.7994L460.704 -89.7906Z" />
+        <path
+            d="M375.343 -163.469L389.792 -123.4C390.965 -120.129 388.124 -116.865 384.731 -117.612L342.9 -126.719C340.131 -127.327 338.986 -130.666 340.823 -132.799L368.386 -164.818C370.428 -167.189 374.284 -166.442 375.351 -163.478L375.343 -163.469Z" />
+        <path
+            d="M263.038 -121.213L274.559 -86.7584C275.398 -84.2678 277.512 -82.397 280.082 -81.8845L360.91 -65.7792C363.48 -65.2665 365.6 -63.437 366.485 -60.9671L394.325 16.7081C395.21 19.1779 397.363 21.0052 399.953 21.4584L435.687 27.8069C438.261 28.2613 440.866 27.3445 442.558 25.3785L498.485 -39.587C500.094 -41.456 500.626 -44.0395 499.897 -46.4205L490.583 -76.5881C490.392 -77.2139 489.995 -78.4479 489.551 -79.861C488.599 -82.849 484.745 -83.6556 482.737 -81.2863C481.871 -80.2812 481.082 -79.3643 480.596 -78.8001L430.703 -21.059C428.062 -17.991 423.057 -18.9759 421.68 -22.8226L395.993 -94.9369C395.064 -97.5367 392.837 -99.4584 390.141 -99.9873L315.122 -114.797C311.119 -115.594 309.418 -120.397 312.05 -123.473L361.73 -181.398C362.171 -181.909 362.966 -182.852 363.868 -183.917C365.861 -186.269 364.49 -189.942 361.417 -190.428C360.039 -190.649 358.786 -190.854 358.073 -190.963L326.901 -195.74C324.442 -196.111 321.976 -195.212 320.359 -193.335L264.433 -128.369C262.74 -126.403 262.211 -123.678 263.047 -121.205L263.038 -121.213Z" />
+        <path
+            d="M268.307 204.958L310.016 213.361C313.42 214.041 316.226 210.746 314.988 207.496L299.825 167.41C298.817 164.757 295.349 164.115 293.513 166.249L265.949 198.267C263.908 200.639 265.215 204.349 268.3 204.967L268.307 204.958Z" />
+        <path
+            d="M353.668 278.637L339.219 238.568C338.046 235.297 340.887 232.033 344.28 232.78L386.111 241.887C388.88 242.495 390.025 245.834 388.189 247.967L360.625 279.986C358.584 282.357 354.727 281.61 353.66 278.646L353.668 278.637Z" />
+        <path
+            d="M465.973 236.381L454.452 201.926C453.613 199.436 451.499 197.565 448.93 197.052L368.101 180.947C365.531 180.434 363.411 178.605 362.526 176.135L334.686 98.4597C333.801 95.9899 331.648 94.1626 329.058 93.7094L293.324 87.3609C290.75 86.9065 288.145 87.8232 286.453 89.7892L230.526 154.755C228.917 156.624 228.385 159.207 229.114 161.588L238.428 191.756C238.619 192.382 239.016 193.616 239.46 195.029C240.412 198.017 244.266 198.823 246.274 196.454C247.14 195.449 247.929 194.532 248.415 193.968L298.308 136.227C300.95 133.159 305.954 134.144 307.331 137.99L333.018 210.105C333.947 212.704 336.174 214.626 338.87 215.155L413.889 229.965C417.892 230.762 419.593 235.565 416.961 238.64L367.281 296.566C366.84 297.077 366.045 298.019 365.143 299.085C363.15 301.436 364.521 305.11 367.594 305.596C368.972 305.817 370.225 306.022 370.938 306.131L402.11 310.908C404.569 311.279 407.035 310.38 408.652 308.502L464.579 243.537C466.271 241.571 466.8 238.846 465.964 236.373L465.973 236.381Z" />
+        <path
+            d="M440.999 55.1022L399.29 46.6992C395.886 46.0197 393.08 49.3145 394.318 52.5647L409.482 92.6509C410.489 95.3032 413.957 95.9452 415.793 93.8118L443.357 61.7935C445.398 59.4221 444.091 55.7119 441.006 55.0934L440.999 55.1022Z" />
+        <path
+            d="M355.638 -18.5761L370.087 21.4924C371.26 24.7638 368.419 28.0279 365.026 27.2811L323.195 18.1735C320.426 17.5658 319.281 14.2267 321.117 12.0934L348.681 -19.925C350.723 -22.2964 354.579 -21.5491 355.646 -18.5849L355.638 -18.5761Z" />
+        <path
+            d="M243.333 23.6798L254.854 58.1344C255.693 60.6251 257.807 62.4958 260.376 63.0083L341.205 79.1136C343.775 79.6263 345.895 81.4558 346.78 83.9257L374.62 161.601C375.505 164.071 377.658 165.898 380.248 166.351L415.982 172.7C418.555 173.154 421.161 172.237 422.853 170.271L478.78 105.306C480.389 103.437 480.921 100.853 480.192 98.4723L470.878 68.3047C470.687 67.6789 470.29 66.4449 469.846 65.0319C468.894 62.0438 465.04 61.2373 463.032 63.6066C462.166 64.6116 461.377 65.5285 460.891 66.0927L410.998 123.834C408.357 126.902 403.352 125.917 401.975 122.07L376.288 49.9559C375.359 47.3562 373.132 45.4345 370.436 44.9055L295.417 30.0955C291.414 29.2991 289.713 24.496 292.345 21.4203L342.025 -36.5052C342.466 -37.0165 343.261 -37.9588 344.163 -39.0243C346.156 -41.3759 344.785 -45.049 341.712 -45.535C340.334 -45.7564 339.081 -45.9615 338.368 -46.07L307.196 -50.8473C304.737 -51.2181 302.271 -50.3195 300.654 -48.4417L244.727 16.5238C243.035 18.4898 242.506 21.2145 243.342 23.6875L243.333 23.6798Z" />
+        <path
+            d="M693.703 -89.7894L651.995 -98.1924C648.59 -98.8719 645.785 -95.5771 647.023 -92.3269L662.186 -52.2407C663.194 -49.5884 666.661 -48.9464 668.498 -51.0798L696.061 -83.0981C698.103 -85.4695 696.795 -89.1797 693.711 -89.7982L693.703 -89.7894Z" />
+        <path
+            d="M608.342 -163.468L622.791 -123.399C623.964 -120.128 621.123 -116.864 617.73 -117.611L575.899 -126.718C573.13 -127.326 571.985 -130.665 573.822 -132.798L601.385 -164.817C603.427 -167.188 607.283 -166.441 608.35 -163.477L608.342 -163.468Z" />
+        <path
+            d="M496.037 -121.212L507.559 -86.7572C508.397 -84.2665 510.511 -82.3958 513.081 -81.8833L593.909 -65.778C596.48 -65.2653 598.599 -63.4358 599.484 -60.9659L627.324 16.7093C628.209 19.1791 630.362 21.0064 632.952 21.4596L668.686 27.8081C671.26 28.2625 673.865 27.3458 675.558 25.3798L731.485 -39.5858C733.094 -41.4548 733.626 -44.0383 732.897 -46.4193L723.582 -76.5869C723.392 -77.2127 722.995 -78.4467 722.55 -79.8598C721.599 -82.8478 717.745 -83.6543 715.736 -81.285C714.871 -80.28 714.081 -79.3631 713.596 -78.7989L663.702 -21.0578C661.061 -17.9897 656.056 -18.9746 654.68 -22.8213L628.992 -94.9357C628.063 -97.5354 625.837 -99.4571 623.141 -99.9861L548.121 -114.796C544.118 -115.593 542.417 -120.396 545.05 -123.471L594.73 -181.397C595.17 -181.908 595.966 -182.85 596.867 -183.916C598.861 -186.267 597.49 -189.941 594.416 -190.427C593.038 -190.648 591.785 -190.853 591.072 -190.962L559.901 -195.739C557.441 -196.11 554.975 -195.211 553.359 -193.333L497.432 -128.368C495.739 -126.402 495.211 -123.677 496.046 -121.204L496.037 -121.212Z" />
+        <path
+            d="M501.308 204.961L543.017 213.364C546.421 214.043 549.227 210.748 547.989 207.498L532.826 167.412C531.818 164.76 528.35 164.118 526.514 166.251L498.95 198.269C496.909 200.641 498.216 204.351 501.301 204.969L501.308 204.961Z" />
+        <path
+            d="M586.669 278.639L572.221 238.57C571.047 235.299 573.888 232.035 577.282 232.782L619.112 241.889C621.882 242.497 623.026 245.836 621.19 247.969L593.626 279.988C591.585 282.359 587.728 281.612 586.662 278.648L586.669 278.639Z" />
+        <path
+            d="M698.974 236.383L687.453 201.928C686.615 199.438 684.501 197.567 681.931 197.054L601.102 180.949C598.532 180.436 596.412 178.607 595.527 176.137L567.687 98.4619C566.802 95.9921 564.649 94.1648 562.059 93.7116L526.325 87.3631C523.752 86.9087 521.146 87.8254 519.454 89.7914L463.527 154.757C461.918 156.626 461.386 159.209 462.115 161.59L471.429 191.758C471.62 192.384 472.017 193.618 472.461 195.031C473.413 198.019 477.267 198.826 479.276 196.456C480.141 195.451 480.93 194.534 481.416 193.97L531.309 136.229C533.951 133.161 538.955 134.146 540.332 137.993L566.02 210.107C566.948 212.707 569.175 214.628 571.871 215.157L646.89 229.967C650.893 230.764 652.594 235.567 649.962 238.643L600.282 296.568C599.842 297.079 599.046 298.022 598.144 299.087C596.151 301.439 597.522 305.112 600.595 305.598C601.973 305.819 603.226 306.024 603.939 306.133L635.111 310.91C637.57 311.281 640.036 310.382 641.653 308.504L697.58 243.539C699.272 241.573 699.801 238.848 698.965 236.375L698.974 236.383Z" />
+        <path
+            d="M674 55.1032L632.291 46.7001C628.887 46.0206 626.082 49.3155 627.319 52.5657L642.483 92.6519C643.49 95.3041 646.958 95.9462 648.795 93.8128L676.358 61.7945C678.4 59.4231 677.092 55.7129 674.008 55.0944L674 55.1032Z" />
+        <path
+            d="M588.639 -18.5751L603.088 21.4934C604.261 24.7648 601.42 28.0289 598.027 27.2821L556.196 18.1745C553.427 17.5667 552.282 14.2277 554.119 12.0943L581.682 -19.924C583.724 -22.2954 587.58 -21.5481 588.647 -18.584L588.639 -18.5751Z" />
+        <path
+            d="M476.334 23.6808L487.856 58.1354C488.694 60.626 490.808 62.4968 493.378 63.0093L574.206 79.1146C576.776 79.6273 578.896 81.4568 579.781 83.9267L607.621 161.602C608.506 164.072 610.659 165.899 613.249 166.352L648.983 172.701C651.557 173.155 654.162 172.238 655.855 170.272L711.781 105.307C713.39 103.438 713.922 100.854 713.193 98.4733L703.879 68.3057C703.688 67.6799 703.291 66.4459 702.847 65.0328C701.896 62.0448 698.041 61.2382 696.033 63.6075C695.168 64.6126 694.378 65.5295 693.893 66.0937L643.999 123.835C641.358 126.903 636.353 125.918 634.977 122.071L609.289 49.9569C608.36 47.3571 606.134 45.4354 603.438 44.9065L528.418 30.0964C524.415 29.3 522.714 24.4969 525.346 21.4212L575.027 -36.5042C575.467 -37.0156 576.262 -37.9578 577.164 -39.0234C579.158 -41.3749 577.786 -45.048 574.713 -45.5341C573.335 -45.7554 572.082 -45.9606 571.369 -46.069L540.198 -50.8463C537.738 -51.2171 535.272 -50.3185 533.656 -48.4407L477.729 16.5248C476.036 18.4908 475.508 21.2154 476.343 23.6885L476.334 23.6808Z" />
+        <path
+            d="M931.704 -89.7906L889.995 -98.1936C886.591 -98.8731 883.785 -95.5784 885.023 -92.3281L900.186 -52.2419C901.194 -49.5896 904.662 -48.9476 906.498 -51.081L934.062 -83.0993C936.103 -85.4707 934.796 -89.1809 931.711 -89.7994L931.704 -89.7906Z" />
+        <path
+            d="M846.343 -163.469L860.791 -123.4C861.964 -120.129 859.124 -116.865 855.73 -117.612L813.9 -126.719C811.13 -127.327 809.986 -130.666 811.822 -132.799L839.386 -164.818C841.427 -167.189 845.284 -166.442 846.35 -163.478L846.343 -163.469Z" />
+        <path
+            d="M734.038 -121.213L745.559 -86.7584C746.397 -84.2678 748.511 -82.397 751.081 -81.8845L831.91 -65.7792C834.48 -65.2665 836.6 -63.437 837.485 -60.9671L865.325 16.7081C866.21 19.1779 868.362 21.0052 870.953 21.4584L906.687 27.8069C909.26 28.2613 911.866 27.3445 913.558 25.3785L969.485 -39.587C971.094 -41.456 971.626 -44.0395 970.897 -46.4205L961.583 -76.5881C961.392 -77.2139 960.995 -78.4479 960.551 -79.861C959.599 -82.849 955.745 -83.6556 953.736 -81.2863C952.871 -80.2812 952.082 -79.3643 951.596 -78.8001L901.703 -21.059C899.061 -17.991 894.057 -18.9759 892.68 -22.8226L866.992 -94.9369C866.064 -97.5367 863.837 -99.4584 861.141 -99.9873L786.122 -114.797C782.119 -115.594 780.418 -120.397 783.05 -123.473L832.73 -181.398C833.17 -181.909 833.966 -182.852 834.868 -183.917C836.861 -186.269 835.49 -189.942 832.417 -190.428C831.039 -190.649 829.786 -190.854 829.073 -190.963L797.901 -195.74C795.442 -196.111 792.976 -195.212 791.359 -193.335L735.432 -128.369C733.74 -126.403 733.211 -123.678 734.047 -121.205L734.038 -121.213Z" />
+        <path
+            d="M739.307 204.957L781.016 213.36C784.42 214.04 787.225 210.745 785.988 207.495L770.824 167.409C769.817 164.756 766.349 164.114 764.513 166.248L736.949 198.266C734.907 200.638 736.215 204.348 739.299 204.966L739.307 204.957Z" />
+        <path
+            d="M824.668 278.636L810.219 238.567C809.046 235.296 811.887 232.032 815.28 232.779L857.111 241.886C859.88 242.494 861.025 245.833 859.188 247.966L831.625 279.985C829.583 282.356 825.727 281.609 824.66 278.645L824.668 278.636Z" />
+        <path
+            d="M936.973 236.38L925.452 201.925C924.613 199.435 922.499 197.564 919.929 197.051L839.101 180.946C836.531 180.433 834.411 178.604 833.526 176.134L805.686 98.4587C804.801 95.9889 802.648 94.1616 800.058 93.7084L764.324 87.3599C761.75 86.9055 759.145 87.8223 757.452 89.7883L701.526 154.754C699.917 156.623 699.385 159.206 700.114 161.587L709.428 191.755C709.619 192.381 710.016 193.615 710.46 195.028C711.411 198.016 715.266 198.822 717.274 196.453C718.139 195.448 718.929 194.531 719.415 193.967L769.308 136.226C771.949 133.158 776.954 134.143 778.331 137.989L804.018 210.104C804.947 212.703 807.174 214.625 809.87 215.154L884.889 229.964C888.892 230.761 890.593 235.564 887.961 238.639L838.281 296.565C837.84 297.076 837.045 298.018 836.143 299.084C834.15 301.436 835.521 305.109 838.594 305.595C839.972 305.816 841.225 306.021 841.938 306.13L873.109 310.907C875.569 311.278 878.035 310.379 879.652 308.501L935.578 243.536C937.271 241.57 937.8 238.845 936.964 236.372L936.973 236.38Z" />
+        <path
+            d="M911.999 55.102L870.29 46.6989C866.886 46.0194 864.08 49.3142 865.318 52.5645L880.481 92.6507C881.489 95.3029 884.957 95.9449 886.793 93.8116L914.357 61.7933C916.398 59.4218 915.091 55.7117 912.006 55.0932L911.999 55.102Z" />
+        <path
+            d="M826.638 -18.5764L841.086 21.4922C842.259 24.7636 839.418 28.0277 836.025 27.2808L794.195 18.1733C791.425 17.5655 790.281 14.2265 792.117 12.0931L819.681 -19.9252C821.722 -22.2966 825.579 -21.5494 826.645 -18.5852L826.638 -18.5764Z" />
+        <path
+            d="M714.333 23.6796L725.854 58.1342C726.692 60.6248 728.806 62.4956 731.376 63.0081L812.205 79.1134C814.775 79.6261 816.895 81.4556 817.78 83.9254L845.62 161.601C846.505 164.07 848.657 165.898 851.248 166.351L886.981 172.699C889.555 173.154 892.161 172.237 893.853 170.271L949.78 105.306C951.389 103.437 951.921 100.853 951.192 98.4721L941.878 68.3045C941.687 67.6787 941.29 66.4447 940.846 65.0316C939.894 62.0436 936.04 61.237 934.031 63.6063C933.166 64.6113 932.377 65.5283 931.891 66.0925L881.997 123.834C879.356 126.902 874.352 125.917 872.975 122.07L847.287 49.9557C846.359 47.3559 844.132 45.4342 841.436 44.9053L766.417 30.0952C762.414 29.2988 760.713 24.4957 763.345 21.42L813.025 -36.5054C813.465 -37.0168 814.261 -37.959 815.163 -39.0246C817.156 -41.3761 815.785 -45.0493 812.712 -45.5353C811.333 -45.7567 810.081 -45.9618 809.368 -46.0702L778.196 -50.8475C775.737 -51.2183 773.271 -50.3197 771.654 -48.4419L715.727 16.5236C714.035 18.4896 713.506 21.2142 714.342 23.6873L714.333 23.6796Z" />
+        <path
+            d="M1164.7 -89.7906L1122.99 -98.1936C1119.59 -98.8731 1116.78 -95.5784 1118.02 -92.3281L1133.19 -52.2419C1134.19 -49.5896 1137.66 -48.9476 1139.5 -51.081L1167.06 -83.0993C1169.1 -85.4707 1167.79 -89.1809 1164.71 -89.7994L1164.7 -89.7906Z" />
+        <path
+            d="M1079.34 -163.469L1093.79 -123.4C1094.96 -120.129 1092.12 -116.865 1088.73 -117.612L1046.9 -126.719C1044.13 -127.327 1042.98 -130.666 1044.82 -132.799L1072.39 -164.818C1074.43 -167.189 1078.28 -166.442 1079.35 -163.478L1079.34 -163.469Z" />
+        <path
+            d="M967.037 -121.213L978.558 -86.7584C979.397 -84.2678 981.511 -82.397 984.081 -81.8845L1064.91 -65.7792C1067.48 -65.2665 1069.6 -63.437 1070.48 -60.9671L1098.32 16.7081C1099.21 19.1779 1101.36 21.0052 1103.95 21.4584L1139.69 27.8069C1142.26 28.2613 1144.87 27.3445 1146.56 25.3785L1202.48 -39.587C1204.09 -41.456 1204.63 -44.0395 1203.9 -46.4205L1194.58 -76.5881C1194.39 -77.2139 1193.99 -78.4479 1193.55 -79.861C1192.6 -82.849 1188.74 -83.6556 1186.74 -81.2863C1185.87 -80.2812 1185.08 -79.3643 1184.6 -78.8001L1134.7 -21.059C1132.06 -17.991 1127.06 -18.9759 1125.68 -22.8226L1099.99 -94.9369C1099.06 -97.5367 1096.84 -99.4584 1094.14 -99.9873L1019.12 -114.797C1015.12 -115.594 1013.42 -120.397 1016.05 -123.473L1065.73 -181.398C1066.17 -181.909 1066.97 -182.852 1067.87 -183.917C1069.86 -186.269 1068.49 -189.942 1065.42 -190.428C1064.04 -190.649 1062.79 -190.854 1062.07 -190.963L1030.9 -195.74C1028.44 -196.111 1025.97 -195.212 1024.36 -193.335L968.432 -128.369C966.739 -126.403 966.21 -123.678 967.046 -121.205L967.037 -121.213Z" />
+        <path
+            d="M972.308 204.959L1014.02 213.362C1017.42 214.042 1020.23 210.747 1018.99 207.497L1003.83 167.411C1002.82 164.758 999.35 164.116 997.514 166.25L969.95 198.268C967.908 200.639 969.216 204.35 972.3 204.968L972.308 204.959Z" />
+        <path
+            d="M1057.67 278.638L1043.22 238.569C1042.05 235.298 1044.89 232.034 1048.28 232.78L1090.11 241.888C1092.88 242.496 1094.03 245.835 1092.19 247.968L1064.63 279.987C1062.58 282.358 1058.73 281.611 1057.66 278.647L1057.67 278.638Z" />
+        <path
+            d="M1169.97 236.382L1158.45 201.927C1157.61 199.437 1155.5 197.566 1152.93 197.053L1072.1 180.948C1069.53 180.435 1067.41 178.606 1066.53 176.136L1038.69 98.4607C1037.8 95.9908 1035.65 94.1636 1033.06 93.7104L997.325 87.3618C994.751 86.9075 992.146 87.8242 990.453 89.7902L934.527 154.756C932.918 156.625 932.386 159.208 933.115 161.589L942.429 191.757C942.62 192.383 943.017 193.617 943.461 195.03C944.413 198.018 948.267 198.824 950.275 196.455C951.14 195.45 951.93 194.533 952.416 193.969L1002.31 136.228C1004.95 133.16 1009.95 134.145 1011.33 137.991L1037.02 210.106C1037.95 212.705 1040.17 214.627 1042.87 215.156L1117.89 229.966C1121.89 230.763 1123.59 235.566 1120.96 238.641L1071.28 296.567C1070.84 297.078 1070.05 298.02 1069.14 299.086C1067.15 301.437 1068.52 305.111 1071.6 305.597C1072.97 305.818 1074.23 306.023 1074.94 306.132L1106.11 310.909C1108.57 311.28 1111.04 310.381 1112.65 308.503L1168.58 243.538C1170.27 241.572 1170.8 238.847 1169.96 236.374L1169.97 236.382Z" />
+        <path
+            d="M1145 55.102L1103.29 46.6989C1099.89 46.0194 1097.08 49.3142 1098.32 52.5645L1113.48 92.6507C1114.49 95.3029 1117.96 95.9449 1119.79 93.8116L1147.36 61.7933C1149.4 59.4218 1148.09 55.7117 1145.01 55.0932L1145 55.102Z" />
+        <path
+            d="M1059.64 -18.5764L1074.09 21.4922C1075.26 24.7636 1072.42 28.0277 1069.03 27.2808L1027.2 18.1733C1024.43 17.5655 1023.28 14.2265 1025.12 12.0931L1052.68 -19.9252C1054.72 -22.2966 1058.58 -21.5494 1059.65 -18.5852L1059.64 -18.5764Z" />
+        <path
+            d="M947.334 23.6796L958.855 58.1342C959.694 60.6248 961.808 62.4956 964.377 63.0081L1045.21 79.1134C1047.78 79.6261 1049.9 81.4556 1050.78 83.9254L1078.62 161.601C1079.51 164.07 1081.66 165.898 1084.25 166.351L1119.98 172.699C1122.56 173.154 1125.16 172.237 1126.85 170.271L1182.78 105.306C1184.39 103.437 1184.92 100.853 1184.19 98.4721L1174.88 68.3045C1174.69 67.6787 1174.29 66.4447 1173.85 65.0316C1172.9 62.0436 1169.04 61.237 1167.03 63.6063C1166.17 64.6113 1165.38 65.5283 1164.89 66.0925L1115 123.834C1112.36 126.902 1107.35 125.917 1105.98 122.07L1080.29 49.9557C1079.36 47.3559 1077.13 45.4342 1074.44 44.9053L999.418 30.0952C995.415 29.2988 993.714 24.4957 996.346 21.42L1046.03 -36.5054C1046.47 -37.0168 1047.26 -37.959 1048.16 -39.0246C1050.16 -41.3761 1048.79 -45.0493 1045.71 -45.5353C1044.33 -45.7567 1043.08 -45.9618 1042.37 -46.0702L1011.2 -50.8475C1008.74 -51.2183 1006.27 -50.3197 1004.66 -48.4419L948.728 16.5236C947.036 18.4896 946.507 21.2142 947.343 23.6873L947.334 23.6796Z" />
+        <path
+            d="M-10.2954 -89.7842L-52.0041 -98.1873C-55.4084 -98.8668 -58.2138 -95.572 -56.976 -92.3217L-41.8127 -52.2355C-40.805 -49.5833 -37.3374 -48.9413 -35.5009 -51.0746L-7.93733 -83.093C-5.89584 -85.4644 -7.20342 -89.1745 -10.2878 -89.7931L-10.2954 -89.7842Z" />
+        <path
+            d="M-95.6563 -163.463L-81.2076 -123.394C-80.0346 -120.123 -82.8755 -116.859 -86.2686 -117.605L-128.099 -126.713C-130.869 -127.321 -132.013 -130.66 -130.177 -132.793L-102.613 -164.811C-100.572 -167.183 -96.7151 -166.436 -95.6487 -163.471L-95.6563 -163.463Z" />
+        <path
+            d="M-207.961 -121.207L-196.44 -86.7521C-195.602 -84.2614 -193.488 -82.3906 -190.918 -81.8782L-110.089 -65.7728C-107.519 -65.2602 -105.399 -63.4306 -104.514 -60.9608L-76.6744 16.7144C-75.7891 19.1843 -73.6365 21.0115 -71.0462 21.4648L-35.3125 27.8132C-32.7387 28.2676 -30.1333 27.3509 -28.4408 25.3849L27.486 -39.5807C29.0949 -41.4496 29.627 -44.0332 28.898 -46.4142L19.5838 -76.5818C19.3929 -77.2076 18.996 -78.4415 18.5516 -79.8546C17.6002 -82.8427 13.746 -83.6492 11.7374 -81.2799C10.8722 -80.2749 10.0828 -79.358 9.59708 -78.7937L-40.2965 -21.0526C-42.9377 -17.9846 -47.9423 -18.9695 -49.3189 -22.8162L-75.0067 -94.9306C-75.9355 -97.5303 -78.1619 -99.452 -80.8578 -99.9809L-155.877 -114.791C-159.88 -115.587 -161.581 -120.391 -158.949 -123.466L-109.269 -181.392C-108.829 -181.903 -108.033 -182.845 -107.131 -183.911C-105.138 -186.262 -106.509 -189.935 -109.582 -190.422C-110.961 -190.643 -112.213 -190.848 -112.926 -190.956L-144.098 -195.734C-146.557 -196.105 -149.023 -195.206 -150.64 -193.328L-206.567 -128.363C-208.259 -126.397 -208.788 -123.672 -207.952 -121.199L-207.961 -121.207Z" />
+        <path
+            d="M-202.692 204.964L-160.984 213.367C-157.579 214.046 -154.774 210.752 -156.012 207.501L-171.175 167.415C-172.183 164.763 -175.65 164.121 -177.487 166.254L-205.05 198.272C-207.092 200.644 -205.784 204.354 -202.7 204.973L-202.692 204.964Z" />
+        <path
+            d="M-117.331 278.642L-131.78 238.574C-132.953 235.302 -130.112 232.038 -126.719 232.785L-84.8883 241.892C-82.119 242.5 -80.9743 245.839 -82.8109 247.973L-110.374 279.991C-112.416 282.362 -116.273 281.615 -117.339 278.651L-117.331 278.642Z" />
+        <path
+            d="M-5.0264 236.386L-16.5478 201.932C-17.386 199.441 -19.5 197.57 -22.0699 197.058L-102.898 180.952C-105.469 180.44 -107.588 178.61 -108.474 176.14L-136.313 98.4651C-137.198 95.9952 -139.351 94.168 -141.941 93.7148L-177.675 87.3662C-180.249 86.9119 -182.854 87.8286 -184.547 89.7946L-240.474 154.76C-242.083 156.629 -242.615 159.213 -241.886 161.594L-232.571 191.761C-232.381 192.387 -231.984 193.621 -231.539 195.034C-230.588 198.022 -226.734 198.829 -224.725 196.459C-223.86 195.454 -223.07 194.537 -222.585 193.973L-172.691 136.232C-170.05 133.164 -165.045 134.149 -163.669 137.996L-137.981 210.11C-137.052 212.71 -134.826 214.631 -132.13 215.16L-57.1103 229.971C-53.1076 230.767 -51.4064 235.57 -54.0387 238.646L-103.719 296.571C-104.159 297.083 -104.955 298.025 -105.856 299.09C-107.85 301.442 -106.479 305.115 -103.405 305.601C-102.027 305.822 -100.775 306.028 -100.061 306.136L-68.8898 310.913C-66.4306 311.284 -63.9642 310.385 -62.3477 308.508L-6.42088 243.542C-4.72842 241.576 -4.19972 238.852 -5.03531 236.378L-5.0264 236.386Z" />
+        <path
+            d="M-30.0004 55.1083L-71.7092 46.7053C-75.1135 46.0258 -77.9188 49.3206 -76.6811 52.5708L-61.5178 92.657C-60.5101 95.3093 -57.0425 95.9513 -55.206 93.8179L-27.6424 61.7996C-25.6009 59.4282 -26.9085 55.7181 -29.9929 55.0995L-30.0004 55.1083Z" />
+        <path
+            d="M-115.361 -18.57L-100.913 21.4985C-99.7397 24.7699 -102.581 28.034 -105.974 27.2872L-147.804 18.1796C-150.574 17.5719 -151.718 14.2328 -149.882 12.0995L-122.318 -19.9189C-120.277 -22.2903 -116.42 -21.543 -115.354 -18.5788L-115.361 -18.57Z" />
+        <path
+            d="M-227.666 23.6859L-216.145 58.1405C-215.307 60.6312 -213.193 62.5019 -210.623 63.0144L-129.794 79.1198C-127.224 79.6324 -125.104 81.4619 -124.219 83.9318L-96.3795 161.607C-95.4942 164.077 -93.3416 165.904 -90.7513 166.357L-55.0176 172.706C-52.4438 173.16 -49.8384 172.243 -48.1459 170.277L7.78091 105.312C9.38986 103.443 9.9219 100.859 9.19295 98.4784L-0.121262 68.3108C-0.312151 67.685 -0.709083 66.451 -1.15346 65.038C-2.10493 62.0499 -5.95909 61.2434 -7.96773 63.6127C-8.83292 64.6177 -9.62228 65.5346 -10.108 66.0988L-60.0016 123.84C-62.6428 126.908 -67.6474 125.923 -69.0239 122.076L-94.7117 49.962C-95.6405 47.3623 -97.8669 45.4406 -100.563 44.9116L-175.582 30.1016C-179.585 29.3052 -181.286 24.5021 -178.654 21.4264L-128.974 -36.4991C-128.534 -37.0104 -127.738 -37.9527 -126.836 -39.0182C-124.843 -41.3698 -126.214 -45.0429 -129.288 -45.5289C-130.666 -45.7503 -131.918 -45.9554 -132.631 -46.0639L-163.803 -50.8412C-166.262 -51.212 -168.728 -50.3134 -170.345 -48.4356L-226.272 16.5299C-227.964 18.4959 -228.493 21.2206 -227.657 23.6936L-227.666 23.6859Z" />
+        <path
+            d="M222.706 -89.7842L180.997 -98.1873C177.593 -98.8668 174.787 -95.572 176.025 -92.3217L191.188 -52.2355C192.196 -49.5833 195.663 -48.9413 197.5 -51.0746L225.064 -83.093C227.105 -85.4644 225.798 -89.1745 222.713 -89.7931L222.706 -89.7842Z" />
+        <path
+            d="M137.345 -163.463L151.793 -123.394C152.966 -120.123 150.125 -116.859 146.732 -117.605L104.902 -126.713C102.132 -127.321 100.988 -130.66 102.824 -132.793L130.388 -164.811C132.429 -167.183 136.286 -166.436 137.352 -163.471L137.345 -163.463Z" />
+        <path
+            d="M25.0397 -121.207L36.5611 -86.7521C37.3993 -84.2614 39.5133 -82.3906 42.0832 -81.8782L122.912 -65.7728C125.482 -65.2602 127.602 -63.4306 128.487 -60.9608L156.327 16.7144C157.212 19.1843 159.364 21.0115 161.955 21.4648L197.688 27.8132C200.262 28.2676 202.868 27.3509 204.56 25.3849L260.487 -39.5807C262.096 -41.4496 262.628 -44.0332 261.899 -46.4142L252.585 -76.5818C252.394 -77.2076 251.997 -78.4415 251.553 -79.8546C250.601 -82.8427 246.747 -83.6492 244.738 -81.2799C243.873 -80.2749 243.084 -79.358 242.598 -78.7937L192.704 -21.0526C190.063 -17.9846 185.059 -18.9695 183.682 -22.8162L157.994 -94.9306C157.066 -97.5303 154.839 -99.452 152.143 -99.9809L77.1236 -114.791C73.1209 -115.587 71.4197 -120.391 74.052 -123.466L123.732 -181.392C124.172 -181.903 124.968 -182.845 125.87 -183.911C127.863 -186.262 126.492 -189.935 123.418 -190.422C122.04 -190.643 120.788 -190.848 120.075 -190.956L88.9031 -195.734C86.4439 -196.105 83.9776 -195.206 82.361 -193.328L26.4342 -128.363C24.7417 -126.397 24.213 -123.672 25.0486 -121.199L25.0397 -121.207Z" />
+        <path
+            d="M30.3106 204.966L72.0193 213.369C75.4237 214.048 78.229 210.753 76.9913 207.503L61.828 167.417C60.8203 164.765 57.3527 164.123 55.5162 166.256L27.9526 198.274C25.9111 200.646 27.2187 204.356 30.303 204.975L30.3106 204.966Z" />
+        <path
+            d="M115.672 278.644L101.223 238.576C100.05 235.304 102.891 232.04 106.284 232.787L148.115 241.894C150.884 242.502 152.029 245.841 150.192 247.975L122.628 279.993C120.587 282.364 116.73 281.617 115.664 278.653L115.672 278.644Z" />
+        <path
+            d="M227.977 236.388L216.455 201.934C215.617 199.443 213.503 197.572 210.933 197.06L130.104 180.954C127.534 180.442 125.415 178.612 124.529 176.142L96.6897 98.467C95.8044 95.9972 93.6518 94.17 91.0615 93.7167L55.3278 87.3682C52.754 86.9138 50.1486 87.8306 48.4561 89.7966L-7.47073 154.762C-9.07968 156.631 -9.61172 159.215 -8.88277 161.596L0.431442 191.763C0.622332 192.389 1.01926 193.623 1.46364 195.036C2.41511 198.024 6.26927 198.831 8.27791 196.461C9.1431 195.456 9.93247 194.539 10.4182 193.975L60.3118 136.234C62.953 133.166 67.9575 134.151 69.3341 137.998L95.0219 210.112C95.9507 212.712 98.1771 214.633 100.873 215.162L175.893 229.972C179.895 230.769 181.597 235.572 178.964 238.648L129.284 296.573C128.844 297.084 128.048 298.027 127.147 299.092C125.153 301.444 126.524 305.117 129.598 305.603C130.976 305.824 132.228 306.029 132.942 306.138L164.113 310.915C166.572 311.286 169.039 310.387 170.655 308.51L226.582 243.544C228.274 241.578 228.803 238.853 227.968 236.38L227.977 236.388Z" />
+        <path
+            d="M203.002 55.1083L161.294 46.7053C157.889 46.0258 155.084 49.3206 156.322 52.5708L171.485 92.657C172.493 95.3093 175.96 95.9513 177.797 93.8179L205.361 61.7996C207.402 59.4282 206.094 55.7181 203.01 55.0995L203.002 55.1083Z" />
+        <path
+            d="M117.642 -18.57L132.09 21.4985C133.263 24.7699 130.422 28.034 127.029 27.2872L85.1985 18.1796C82.4292 17.5719 81.2845 14.2328 83.121 12.0995L110.685 -19.9189C112.726 -22.2903 116.583 -21.543 117.649 -18.5788L117.642 -18.57Z" />
+        <path
+            d="M5.33659 23.6859L16.858 58.1405C17.6961 60.6312 19.8102 62.5019 22.3801 63.0144L103.209 79.1198C105.779 79.6324 107.898 81.4619 108.784 83.9318L136.623 161.607C137.509 164.077 139.661 165.904 142.252 166.357L177.985 172.706C180.559 173.16 183.165 172.243 184.857 170.277L240.784 105.312C242.393 103.443 242.925 100.859 242.196 98.4784L232.882 68.3108C232.691 67.685 232.294 66.451 231.849 65.038C230.898 62.0499 227.044 61.2434 225.035 63.6127C224.17 64.6177 223.381 65.5346 222.895 66.0988L173.001 123.84C170.36 126.908 165.356 125.923 163.979 122.076L138.291 49.962C137.362 47.3623 135.136 45.4406 132.44 44.9116L57.4205 30.1016C53.4178 29.3052 51.7166 24.5021 54.3488 21.4264L104.029 -36.4991C104.469 -37.0104 105.265 -37.9527 106.167 -39.0182C108.16 -41.3698 106.789 -45.0429 103.715 -45.5289C102.337 -45.7503 101.085 -45.9554 100.372 -46.0639L69.2 -50.8412C66.7408 -51.212 64.2744 -50.3134 62.6579 -48.4356L6.73106 16.5299C5.0386 18.4959 4.5099 21.2206 5.34549 23.6936L5.33659 23.6859Z" />
+    </mask>
+    <path
+        d="M460.704 -89.7906L418.995 -98.1936C415.591 -98.8731 412.786 -95.5784 414.023 -92.3281L429.187 -52.2419C430.194 -49.5896 433.662 -48.9476 435.498 -51.081L463.062 -83.0993C465.103 -85.4707 463.796 -89.1809 460.711 -89.7994L460.704 -89.7906Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M375.343 -163.469L389.792 -123.4C390.965 -120.129 388.124 -116.865 384.731 -117.612L342.9 -126.719C340.131 -127.327 338.986 -130.666 340.823 -132.799L368.386 -164.818C370.428 -167.189 374.284 -166.442 375.351 -163.478L375.343 -163.469Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M263.038 -121.213L274.559 -86.7584C275.398 -84.2678 277.512 -82.397 280.082 -81.8845L360.91 -65.7792C363.48 -65.2665 365.6 -63.437 366.485 -60.9671L394.325 16.7081C395.21 19.1779 397.363 21.0052 399.953 21.4584L435.687 27.8069C438.261 28.2613 440.866 27.3445 442.558 25.3785L498.485 -39.587C500.094 -41.456 500.626 -44.0395 499.897 -46.4205L490.583 -76.5881C490.392 -77.2139 489.995 -78.4479 489.551 -79.861C488.599 -82.849 484.745 -83.6556 482.737 -81.2863C481.871 -80.2812 481.082 -79.3643 480.596 -78.8001L430.703 -21.059C428.062 -17.991 423.057 -18.9759 421.68 -22.8226L395.993 -94.9369C395.064 -97.5367 392.837 -99.4584 390.141 -99.9873L315.122 -114.797C311.119 -115.594 309.418 -120.397 312.05 -123.473L361.73 -181.398C362.171 -181.909 362.966 -182.852 363.868 -183.917C365.861 -186.269 364.49 -189.942 361.417 -190.428C360.039 -190.649 358.786 -190.854 358.073 -190.963L326.901 -195.74C324.442 -196.111 321.976 -195.212 320.359 -193.335L264.433 -128.369C262.74 -126.403 262.211 -123.678 263.047 -121.205L263.038 -121.213Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M268.307 204.958L310.016 213.361C313.42 214.041 316.226 210.746 314.988 207.496L299.825 167.41C298.817 164.757 295.349 164.115 293.513 166.249L265.949 198.267C263.908 200.639 265.215 204.349 268.3 204.967L268.307 204.958Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M353.668 278.637L339.219 238.568C338.046 235.297 340.887 232.033 344.28 232.78L386.111 241.887C388.88 242.495 390.025 245.834 388.189 247.967L360.625 279.986C358.584 282.357 354.727 281.61 353.66 278.646L353.668 278.637Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M465.973 236.381L454.452 201.926C453.613 199.436 451.499 197.565 448.93 197.052L368.101 180.947C365.531 180.434 363.411 178.605 362.526 176.135L334.686 98.4597C333.801 95.9899 331.648 94.1626 329.058 93.7094L293.324 87.3609C290.75 86.9065 288.145 87.8232 286.453 89.7892L230.526 154.755C228.917 156.624 228.385 159.207 229.114 161.588L238.428 191.756C238.619 192.382 239.016 193.616 239.46 195.029C240.412 198.017 244.266 198.823 246.274 196.454C247.14 195.449 247.929 194.532 248.415 193.968L298.308 136.227C300.95 133.159 305.954 134.144 307.331 137.99L333.018 210.105C333.947 212.704 336.174 214.626 338.87 215.155L413.889 229.965C417.892 230.762 419.593 235.565 416.961 238.64L367.281 296.566C366.84 297.077 366.045 298.019 365.143 299.085C363.15 301.436 364.521 305.11 367.594 305.596C368.972 305.817 370.225 306.022 370.938 306.131L402.11 310.908C404.569 311.279 407.035 310.38 408.652 308.502L464.579 243.537C466.271 241.571 466.8 238.846 465.964 236.373L465.973 236.381Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M440.999 55.1022L399.29 46.6992C395.886 46.0197 393.08 49.3145 394.318 52.5647L409.482 92.6509C410.489 95.3032 413.957 95.9452 415.793 93.8118L443.357 61.7935C445.398 59.4221 444.091 55.7119 441.006 55.0934L440.999 55.1022Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M355.638 -18.5761L370.087 21.4924C371.26 24.7638 368.419 28.0279 365.026 27.2811L323.195 18.1735C320.426 17.5658 319.281 14.2267 321.117 12.0934L348.681 -19.925C350.723 -22.2964 354.579 -21.5491 355.646 -18.5849L355.638 -18.5761Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M243.333 23.6798L254.854 58.1344C255.693 60.6251 257.807 62.4958 260.376 63.0083L341.205 79.1136C343.775 79.6263 345.895 81.4558 346.78 83.9257L374.62 161.601C375.505 164.071 377.658 165.898 380.248 166.351L415.982 172.7C418.555 173.154 421.161 172.237 422.853 170.271L478.78 105.306C480.389 103.437 480.921 100.853 480.192 98.4723L470.878 68.3047C470.687 67.6789 470.29 66.4449 469.846 65.0319C468.894 62.0438 465.04 61.2373 463.032 63.6066C462.166 64.6116 461.377 65.5285 460.891 66.0927L410.998 123.834C408.357 126.902 403.352 125.917 401.975 122.07L376.288 49.9559C375.359 47.3562 373.132 45.4345 370.436 44.9055L295.417 30.0955C291.414 29.2991 289.713 24.496 292.345 21.4203L342.025 -36.5052C342.466 -37.0165 343.261 -37.9588 344.163 -39.0243C346.156 -41.3759 344.785 -45.049 341.712 -45.535C340.334 -45.7564 339.081 -45.9615 338.368 -46.07L307.196 -50.8473C304.737 -51.2181 302.271 -50.3195 300.654 -48.4417L244.727 16.5238C243.035 18.4898 242.506 21.2145 243.342 23.6875L243.333 23.6798Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M693.703 -89.7894L651.995 -98.1924C648.59 -98.8719 645.785 -95.5771 647.023 -92.3269L662.186 -52.2407C663.194 -49.5884 666.661 -48.9464 668.498 -51.0798L696.061 -83.0981C698.103 -85.4695 696.795 -89.1797 693.711 -89.7982L693.703 -89.7894Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M608.342 -163.468L622.791 -123.399C623.964 -120.128 621.123 -116.864 617.73 -117.611L575.899 -126.718C573.13 -127.326 571.985 -130.665 573.822 -132.798L601.385 -164.817C603.427 -167.188 607.283 -166.441 608.35 -163.477L608.342 -163.468Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M496.037 -121.212L507.559 -86.7572C508.397 -84.2665 510.511 -82.3958 513.081 -81.8833L593.909 -65.778C596.48 -65.2653 598.599 -63.4358 599.484 -60.9659L627.324 16.7093C628.209 19.1791 630.362 21.0064 632.952 21.4596L668.686 27.8081C671.26 28.2625 673.865 27.3458 675.558 25.3798L731.485 -39.5858C733.094 -41.4548 733.626 -44.0383 732.897 -46.4193L723.582 -76.5869C723.392 -77.2127 722.995 -78.4467 722.55 -79.8598C721.599 -82.8478 717.745 -83.6543 715.736 -81.285C714.871 -80.28 714.081 -79.3631 713.596 -78.7989L663.702 -21.0578C661.061 -17.9897 656.056 -18.9746 654.68 -22.8213L628.992 -94.9357C628.063 -97.5354 625.837 -99.4571 623.141 -99.9861L548.121 -114.796C544.118 -115.593 542.417 -120.396 545.05 -123.471L594.73 -181.397C595.17 -181.908 595.966 -182.85 596.867 -183.916C598.861 -186.267 597.49 -189.941 594.416 -190.427C593.038 -190.648 591.785 -190.853 591.072 -190.962L559.901 -195.739C557.441 -196.11 554.975 -195.211 553.359 -193.333L497.432 -128.368C495.739 -126.402 495.211 -123.677 496.046 -121.204L496.037 -121.212Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M501.308 204.961L543.017 213.364C546.421 214.043 549.227 210.748 547.989 207.498L532.826 167.412C531.818 164.76 528.35 164.118 526.514 166.251L498.95 198.269C496.909 200.641 498.216 204.351 501.301 204.969L501.308 204.961Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M586.669 278.639L572.221 238.57C571.047 235.299 573.888 232.035 577.282 232.782L619.112 241.889C621.882 242.497 623.026 245.836 621.19 247.969L593.626 279.988C591.585 282.359 587.728 281.612 586.662 278.648L586.669 278.639Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M698.974 236.383L687.453 201.928C686.615 199.438 684.501 197.567 681.931 197.054L601.102 180.949C598.532 180.436 596.412 178.607 595.527 176.137L567.687 98.4619C566.802 95.9921 564.649 94.1648 562.059 93.7116L526.325 87.3631C523.752 86.9087 521.146 87.8254 519.454 89.7914L463.527 154.757C461.918 156.626 461.386 159.209 462.115 161.59L471.429 191.758C471.62 192.384 472.017 193.618 472.461 195.031C473.413 198.019 477.267 198.826 479.276 196.456C480.141 195.451 480.93 194.534 481.416 193.97L531.309 136.229C533.951 133.161 538.955 134.146 540.332 137.993L566.02 210.107C566.948 212.707 569.175 214.628 571.871 215.157L646.89 229.967C650.893 230.764 652.594 235.567 649.962 238.643L600.282 296.568C599.842 297.079 599.046 298.022 598.144 299.087C596.151 301.439 597.522 305.112 600.595 305.598C601.973 305.819 603.226 306.024 603.939 306.133L635.111 310.91C637.57 311.281 640.036 310.382 641.653 308.504L697.58 243.539C699.272 241.573 699.801 238.848 698.965 236.375L698.974 236.383Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M674 55.1032L632.291 46.7001C628.887 46.0206 626.082 49.3155 627.319 52.5657L642.483 92.6519C643.49 95.3041 646.958 95.9462 648.795 93.8128L676.358 61.7945C678.4 59.4231 677.092 55.7129 674.008 55.0944L674 55.1032Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M588.639 -18.5751L603.088 21.4934C604.261 24.7648 601.42 28.0289 598.027 27.2821L556.196 18.1745C553.427 17.5667 552.282 14.2277 554.119 12.0943L581.682 -19.924C583.724 -22.2954 587.58 -21.5481 588.647 -18.584L588.639 -18.5751Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M476.334 23.6808L487.856 58.1354C488.694 60.626 490.808 62.4968 493.378 63.0093L574.206 79.1146C576.776 79.6273 578.896 81.4568 579.781 83.9267L607.621 161.602C608.506 164.072 610.659 165.899 613.249 166.352L648.983 172.701C651.557 173.155 654.162 172.238 655.855 170.272L711.781 105.307C713.39 103.438 713.922 100.854 713.193 98.4733L703.879 68.3057C703.688 67.6799 703.291 66.4459 702.847 65.0328C701.896 62.0448 698.041 61.2382 696.033 63.6075C695.168 64.6126 694.378 65.5295 693.893 66.0937L643.999 123.835C641.358 126.903 636.353 125.918 634.977 122.071L609.289 49.9569C608.36 47.3571 606.134 45.4354 603.438 44.9065L528.418 30.0964C524.415 29.3 522.714 24.4969 525.346 21.4212L575.027 -36.5042C575.467 -37.0156 576.262 -37.9578 577.164 -39.0234C579.158 -41.3749 577.786 -45.048 574.713 -45.5341C573.335 -45.7554 572.082 -45.9606 571.369 -46.069L540.198 -50.8463C537.738 -51.2171 535.272 -50.3185 533.656 -48.4407L477.729 16.5248C476.036 18.4908 475.508 21.2154 476.343 23.6885L476.334 23.6808Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M931.704 -89.7906L889.995 -98.1936C886.591 -98.8731 883.785 -95.5784 885.023 -92.3281L900.186 -52.2419C901.194 -49.5896 904.662 -48.9476 906.498 -51.081L934.062 -83.0993C936.103 -85.4707 934.796 -89.1809 931.711 -89.7994L931.704 -89.7906Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M846.343 -163.469L860.791 -123.4C861.964 -120.129 859.124 -116.865 855.73 -117.612L813.9 -126.719C811.13 -127.327 809.986 -130.666 811.822 -132.799L839.386 -164.818C841.427 -167.189 845.284 -166.442 846.35 -163.478L846.343 -163.469Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M734.038 -121.213L745.559 -86.7584C746.397 -84.2678 748.511 -82.397 751.081 -81.8845L831.91 -65.7792C834.48 -65.2665 836.6 -63.437 837.485 -60.9671L865.325 16.7081C866.21 19.1779 868.362 21.0052 870.953 21.4584L906.687 27.8069C909.26 28.2613 911.866 27.3445 913.558 25.3785L969.485 -39.587C971.094 -41.456 971.626 -44.0395 970.897 -46.4205L961.583 -76.5881C961.392 -77.2139 960.995 -78.4479 960.551 -79.861C959.599 -82.849 955.745 -83.6556 953.736 -81.2863C952.871 -80.2812 952.082 -79.3643 951.596 -78.8001L901.703 -21.059C899.061 -17.991 894.057 -18.9759 892.68 -22.8226L866.992 -94.9369C866.064 -97.5367 863.837 -99.4584 861.141 -99.9873L786.122 -114.797C782.119 -115.594 780.418 -120.397 783.05 -123.473L832.73 -181.398C833.17 -181.909 833.966 -182.852 834.868 -183.917C836.861 -186.269 835.49 -189.942 832.417 -190.428C831.039 -190.649 829.786 -190.854 829.073 -190.963L797.901 -195.74C795.442 -196.111 792.976 -195.212 791.359 -193.335L735.432 -128.369C733.74 -126.403 733.211 -123.678 734.047 -121.205L734.038 -121.213Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M739.307 204.957L781.016 213.36C784.42 214.04 787.225 210.745 785.988 207.495L770.824 167.409C769.817 164.756 766.349 164.114 764.513 166.248L736.949 198.266C734.907 200.638 736.215 204.348 739.299 204.966L739.307 204.957Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M824.668 278.636L810.219 238.567C809.046 235.296 811.887 232.032 815.28 232.779L857.111 241.886C859.88 242.494 861.025 245.833 859.188 247.966L831.625 279.985C829.583 282.356 825.727 281.609 824.66 278.645L824.668 278.636Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M936.973 236.38L925.452 201.925C924.613 199.435 922.499 197.564 919.929 197.051L839.101 180.946C836.531 180.433 834.411 178.604 833.526 176.134L805.686 98.4587C804.801 95.9889 802.648 94.1616 800.058 93.7084L764.324 87.3599C761.75 86.9055 759.145 87.8223 757.452 89.7883L701.526 154.754C699.917 156.623 699.385 159.206 700.114 161.587L709.428 191.755C709.619 192.381 710.016 193.615 710.46 195.028C711.411 198.016 715.266 198.822 717.274 196.453C718.139 195.448 718.929 194.531 719.415 193.967L769.308 136.226C771.949 133.158 776.954 134.143 778.331 137.989L804.018 210.104C804.947 212.703 807.174 214.625 809.87 215.154L884.889 229.964C888.892 230.761 890.593 235.564 887.961 238.639L838.281 296.565C837.84 297.076 837.045 298.018 836.143 299.084C834.15 301.436 835.521 305.109 838.594 305.595C839.972 305.816 841.225 306.021 841.938 306.13L873.109 310.907C875.569 311.278 878.035 310.379 879.652 308.501L935.578 243.536C937.271 241.57 937.8 238.845 936.964 236.372L936.973 236.38Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M911.999 55.102L870.29 46.6989C866.886 46.0194 864.08 49.3142 865.318 52.5645L880.481 92.6507C881.489 95.3029 884.957 95.9449 886.793 93.8116L914.357 61.7933C916.398 59.4218 915.091 55.7117 912.006 55.0932L911.999 55.102Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M826.638 -18.5764L841.086 21.4922C842.259 24.7636 839.418 28.0277 836.025 27.2808L794.195 18.1733C791.425 17.5655 790.281 14.2265 792.117 12.0931L819.681 -19.9252C821.722 -22.2966 825.579 -21.5494 826.645 -18.5852L826.638 -18.5764Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M714.333 23.6796L725.854 58.1342C726.692 60.6248 728.806 62.4956 731.376 63.0081L812.205 79.1134C814.775 79.6261 816.895 81.4556 817.78 83.9254L845.62 161.601C846.505 164.07 848.657 165.898 851.248 166.351L886.981 172.699C889.555 173.154 892.161 172.237 893.853 170.271L949.78 105.306C951.389 103.437 951.921 100.853 951.192 98.4721L941.878 68.3045C941.687 67.6787 941.29 66.4447 940.846 65.0316C939.894 62.0436 936.04 61.237 934.031 63.6063C933.166 64.6113 932.377 65.5283 931.891 66.0925L881.997 123.834C879.356 126.902 874.352 125.917 872.975 122.07L847.287 49.9557C846.359 47.3559 844.132 45.4342 841.436 44.9053L766.417 30.0952C762.414 29.2988 760.713 24.4957 763.345 21.42L813.025 -36.5054C813.465 -37.0168 814.261 -37.959 815.163 -39.0246C817.156 -41.3761 815.785 -45.0493 812.712 -45.5353C811.333 -45.7567 810.081 -45.9618 809.368 -46.0702L778.196 -50.8475C775.737 -51.2183 773.271 -50.3197 771.654 -48.4419L715.727 16.5236C714.035 18.4896 713.506 21.2142 714.342 23.6873L714.333 23.6796Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M1164.7 -89.7906L1122.99 -98.1936C1119.59 -98.8731 1116.78 -95.5784 1118.02 -92.3281L1133.19 -52.2419C1134.19 -49.5896 1137.66 -48.9476 1139.5 -51.081L1167.06 -83.0993C1169.1 -85.4707 1167.79 -89.1809 1164.71 -89.7994L1164.7 -89.7906Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M1079.34 -163.469L1093.79 -123.4C1094.96 -120.129 1092.12 -116.865 1088.73 -117.612L1046.9 -126.719C1044.13 -127.327 1042.98 -130.666 1044.82 -132.799L1072.39 -164.818C1074.43 -167.189 1078.28 -166.442 1079.35 -163.478L1079.34 -163.469Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M967.037 -121.213L978.558 -86.7584C979.397 -84.2678 981.511 -82.397 984.081 -81.8845L1064.91 -65.7792C1067.48 -65.2665 1069.6 -63.437 1070.48 -60.9671L1098.32 16.7081C1099.21 19.1779 1101.36 21.0052 1103.95 21.4584L1139.69 27.8069C1142.26 28.2613 1144.87 27.3445 1146.56 25.3785L1202.48 -39.587C1204.09 -41.456 1204.63 -44.0395 1203.9 -46.4205L1194.58 -76.5881C1194.39 -77.2139 1193.99 -78.4479 1193.55 -79.861C1192.6 -82.849 1188.74 -83.6556 1186.74 -81.2863C1185.87 -80.2812 1185.08 -79.3643 1184.6 -78.8001L1134.7 -21.059C1132.06 -17.991 1127.06 -18.9759 1125.68 -22.8226L1099.99 -94.9369C1099.06 -97.5367 1096.84 -99.4584 1094.14 -99.9873L1019.12 -114.797C1015.12 -115.594 1013.42 -120.397 1016.05 -123.473L1065.73 -181.398C1066.17 -181.909 1066.97 -182.852 1067.87 -183.917C1069.86 -186.269 1068.49 -189.942 1065.42 -190.428C1064.04 -190.649 1062.79 -190.854 1062.07 -190.963L1030.9 -195.74C1028.44 -196.111 1025.97 -195.212 1024.36 -193.335L968.432 -128.369C966.739 -126.403 966.21 -123.678 967.046 -121.205L967.037 -121.213Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M972.308 204.959L1014.02 213.362C1017.42 214.042 1020.23 210.747 1018.99 207.497L1003.83 167.411C1002.82 164.758 999.35 164.116 997.514 166.25L969.95 198.268C967.908 200.639 969.216 204.35 972.3 204.968L972.308 204.959Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M1057.67 278.638L1043.22 238.569C1042.05 235.298 1044.89 232.034 1048.28 232.78L1090.11 241.888C1092.88 242.496 1094.03 245.835 1092.19 247.968L1064.63 279.987C1062.58 282.358 1058.73 281.611 1057.66 278.647L1057.67 278.638Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M1169.97 236.382L1158.45 201.927C1157.61 199.437 1155.5 197.566 1152.93 197.053L1072.1 180.948C1069.53 180.435 1067.41 178.606 1066.53 176.136L1038.69 98.4607C1037.8 95.9908 1035.65 94.1636 1033.06 93.7104L997.325 87.3618C994.751 86.9075 992.146 87.8242 990.453 89.7902L934.527 154.756C932.918 156.625 932.386 159.208 933.115 161.589L942.429 191.757C942.62 192.383 943.017 193.617 943.461 195.03C944.413 198.018 948.267 198.824 950.275 196.455C951.14 195.45 951.93 194.533 952.416 193.969L1002.31 136.228C1004.95 133.16 1009.95 134.145 1011.33 137.991L1037.02 210.106C1037.95 212.705 1040.17 214.627 1042.87 215.156L1117.89 229.966C1121.89 230.763 1123.59 235.566 1120.96 238.641L1071.28 296.567C1070.84 297.078 1070.05 298.02 1069.14 299.086C1067.15 301.437 1068.52 305.111 1071.6 305.597C1072.97 305.818 1074.23 306.023 1074.94 306.132L1106.11 310.909C1108.57 311.28 1111.04 310.381 1112.65 308.503L1168.58 243.538C1170.27 241.572 1170.8 238.847 1169.96 236.374L1169.97 236.382Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M1145 55.102L1103.29 46.6989C1099.89 46.0194 1097.08 49.3142 1098.32 52.5645L1113.48 92.6507C1114.49 95.3029 1117.96 95.9449 1119.79 93.8116L1147.36 61.7933C1149.4 59.4218 1148.09 55.7117 1145.01 55.0932L1145 55.102Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M1059.64 -18.5764L1074.09 21.4922C1075.26 24.7636 1072.42 28.0277 1069.03 27.2808L1027.2 18.1733C1024.43 17.5655 1023.28 14.2265 1025.12 12.0931L1052.68 -19.9252C1054.72 -22.2966 1058.58 -21.5494 1059.65 -18.5852L1059.64 -18.5764Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M947.334 23.6796L958.855 58.1342C959.694 60.6248 961.808 62.4956 964.377 63.0081L1045.21 79.1134C1047.78 79.6261 1049.9 81.4556 1050.78 83.9254L1078.62 161.601C1079.51 164.07 1081.66 165.898 1084.25 166.351L1119.98 172.699C1122.56 173.154 1125.16 172.237 1126.85 170.271L1182.78 105.306C1184.39 103.437 1184.92 100.853 1184.19 98.4721L1174.88 68.3045C1174.69 67.6787 1174.29 66.4447 1173.85 65.0316C1172.9 62.0436 1169.04 61.237 1167.03 63.6063C1166.17 64.6113 1165.38 65.5283 1164.89 66.0925L1115 123.834C1112.36 126.902 1107.35 125.917 1105.98 122.07L1080.29 49.9557C1079.36 47.3559 1077.13 45.4342 1074.44 44.9053L999.418 30.0952C995.415 29.2988 993.714 24.4957 996.346 21.42L1046.03 -36.5054C1046.47 -37.0168 1047.26 -37.959 1048.16 -39.0246C1050.16 -41.3761 1048.79 -45.0493 1045.71 -45.5353C1044.33 -45.7567 1043.08 -45.9618 1042.37 -46.0702L1011.2 -50.8475C1008.74 -51.2183 1006.27 -50.3197 1004.66 -48.4419L948.728 16.5236C947.036 18.4896 946.507 21.2142 947.343 23.6873L947.334 23.6796Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-10.2954 -89.7842L-52.0041 -98.1873C-55.4084 -98.8668 -58.2138 -95.572 -56.976 -92.3217L-41.8127 -52.2355C-40.805 -49.5833 -37.3374 -48.9413 -35.5009 -51.0746L-7.93733 -83.093C-5.89584 -85.4644 -7.20342 -89.1745 -10.2878 -89.7931L-10.2954 -89.7842Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-95.6563 -163.463L-81.2076 -123.394C-80.0346 -120.123 -82.8755 -116.859 -86.2686 -117.605L-128.099 -126.713C-130.869 -127.321 -132.013 -130.66 -130.177 -132.793L-102.613 -164.811C-100.572 -167.183 -96.7151 -166.436 -95.6487 -163.471L-95.6563 -163.463Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-207.961 -121.207L-196.44 -86.7521C-195.602 -84.2614 -193.488 -82.3906 -190.918 -81.8782L-110.089 -65.7728C-107.519 -65.2602 -105.399 -63.4306 -104.514 -60.9608L-76.6744 16.7144C-75.7891 19.1843 -73.6365 21.0115 -71.0462 21.4648L-35.3125 27.8132C-32.7387 28.2676 -30.1333 27.3509 -28.4408 25.3849L27.486 -39.5807C29.0949 -41.4496 29.627 -44.0332 28.898 -46.4142L19.5838 -76.5818C19.3929 -77.2076 18.996 -78.4415 18.5516 -79.8546C17.6002 -82.8427 13.746 -83.6492 11.7374 -81.2799C10.8722 -80.2749 10.0828 -79.358 9.59708 -78.7937L-40.2965 -21.0526C-42.9377 -17.9846 -47.9423 -18.9695 -49.3189 -22.8162L-75.0067 -94.9306C-75.9355 -97.5303 -78.1619 -99.452 -80.8578 -99.9809L-155.877 -114.791C-159.88 -115.587 -161.581 -120.391 -158.949 -123.466L-109.269 -181.392C-108.829 -181.903 -108.033 -182.845 -107.131 -183.911C-105.138 -186.262 -106.509 -189.935 -109.582 -190.422C-110.961 -190.643 -112.213 -190.848 -112.926 -190.956L-144.098 -195.734C-146.557 -196.105 -149.023 -195.206 -150.64 -193.328L-206.567 -128.363C-208.259 -126.397 -208.788 -123.672 -207.952 -121.199L-207.961 -121.207Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-202.692 204.964L-160.984 213.367C-157.579 214.046 -154.774 210.752 -156.012 207.501L-171.175 167.415C-172.183 164.763 -175.65 164.121 -177.487 166.254L-205.05 198.272C-207.092 200.644 -205.784 204.354 -202.7 204.973L-202.692 204.964Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-117.331 278.642L-131.78 238.574C-132.953 235.302 -130.112 232.038 -126.719 232.785L-84.8883 241.892C-82.119 242.5 -80.9743 245.839 -82.8109 247.973L-110.374 279.991C-112.416 282.362 -116.273 281.615 -117.339 278.651L-117.331 278.642Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-5.0264 236.386L-16.5478 201.932C-17.386 199.441 -19.5 197.57 -22.0699 197.058L-102.898 180.952C-105.469 180.44 -107.588 178.61 -108.474 176.14L-136.313 98.4651C-137.198 95.9952 -139.351 94.168 -141.941 93.7148L-177.675 87.3662C-180.249 86.9119 -182.854 87.8286 -184.547 89.7946L-240.474 154.76C-242.083 156.629 -242.615 159.213 -241.886 161.594L-232.571 191.761C-232.381 192.387 -231.984 193.621 -231.539 195.034C-230.588 198.022 -226.734 198.829 -224.725 196.459C-223.86 195.454 -223.07 194.537 -222.585 193.973L-172.691 136.232C-170.05 133.164 -165.045 134.149 -163.669 137.996L-137.981 210.11C-137.052 212.71 -134.826 214.631 -132.13 215.16L-57.1103 229.971C-53.1076 230.767 -51.4064 235.57 -54.0387 238.646L-103.719 296.571C-104.159 297.083 -104.955 298.025 -105.856 299.09C-107.85 301.442 -106.479 305.115 -103.405 305.601C-102.027 305.822 -100.775 306.028 -100.061 306.136L-68.8898 310.913C-66.4306 311.284 -63.9642 310.385 -62.3477 308.508L-6.42088 243.542C-4.72842 241.576 -4.19972 238.852 -5.03531 236.378L-5.0264 236.386Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-30.0004 55.1083L-71.7092 46.7053C-75.1135 46.0258 -77.9188 49.3206 -76.6811 52.5708L-61.5178 92.657C-60.5101 95.3093 -57.0425 95.9513 -55.206 93.8179L-27.6424 61.7996C-25.6009 59.4282 -26.9085 55.7181 -29.9929 55.0995L-30.0004 55.1083Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-115.361 -18.57L-100.913 21.4985C-99.7397 24.7699 -102.581 28.034 -105.974 27.2872L-147.804 18.1796C-150.574 17.5719 -151.718 14.2328 -149.882 12.0995L-122.318 -19.9189C-120.277 -22.2903 -116.42 -21.543 -115.354 -18.5788L-115.361 -18.57Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M-227.666 23.6859L-216.145 58.1405C-215.307 60.6312 -213.193 62.5019 -210.623 63.0144L-129.794 79.1198C-127.224 79.6324 -125.104 81.4619 -124.219 83.9318L-96.3795 161.607C-95.4942 164.077 -93.3416 165.904 -90.7513 166.357L-55.0176 172.706C-52.4438 173.16 -49.8384 172.243 -48.1459 170.277L7.78091 105.312C9.38986 103.443 9.9219 100.859 9.19295 98.4784L-0.121262 68.3108C-0.312151 67.685 -0.709083 66.451 -1.15346 65.038C-2.10493 62.0499 -5.95909 61.2434 -7.96773 63.6127C-8.83292 64.6177 -9.62228 65.5346 -10.108 66.0988L-60.0016 123.84C-62.6428 126.908 -67.6474 125.923 -69.0239 122.076L-94.7117 49.962C-95.6405 47.3623 -97.8669 45.4406 -100.563 44.9116L-175.582 30.1016C-179.585 29.3052 -181.286 24.5021 -178.654 21.4264L-128.974 -36.4991C-128.534 -37.0104 -127.738 -37.9527 -126.836 -39.0182C-124.843 -41.3698 -126.214 -45.0429 -129.288 -45.5289C-130.666 -45.7503 -131.918 -45.9554 -132.631 -46.0639L-163.803 -50.8412C-166.262 -51.212 -168.728 -50.3134 -170.345 -48.4356L-226.272 16.5299C-227.964 18.4959 -228.493 21.2206 -227.657 23.6936L-227.666 23.6859Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M222.706 -89.7842L180.997 -98.1873C177.593 -98.8668 174.787 -95.572 176.025 -92.3217L191.188 -52.2355C192.196 -49.5833 195.663 -48.9413 197.5 -51.0746L225.064 -83.093C227.105 -85.4644 225.798 -89.1745 222.713 -89.7931L222.706 -89.7842Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M137.345 -163.463L151.793 -123.394C152.966 -120.123 150.125 -116.859 146.732 -117.605L104.902 -126.713C102.132 -127.321 100.988 -130.66 102.824 -132.793L130.388 -164.811C132.429 -167.183 136.286 -166.436 137.352 -163.471L137.345 -163.463Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M25.0397 -121.207L36.5611 -86.7521C37.3993 -84.2614 39.5133 -82.3906 42.0832 -81.8782L122.912 -65.7728C125.482 -65.2602 127.602 -63.4306 128.487 -60.9608L156.327 16.7144C157.212 19.1843 159.364 21.0115 161.955 21.4648L197.688 27.8132C200.262 28.2676 202.868 27.3509 204.56 25.3849L260.487 -39.5807C262.096 -41.4496 262.628 -44.0332 261.899 -46.4142L252.585 -76.5818C252.394 -77.2076 251.997 -78.4415 251.553 -79.8546C250.601 -82.8427 246.747 -83.6492 244.738 -81.2799C243.873 -80.2749 243.084 -79.358 242.598 -78.7937L192.704 -21.0526C190.063 -17.9846 185.059 -18.9695 183.682 -22.8162L157.994 -94.9306C157.066 -97.5303 154.839 -99.452 152.143 -99.9809L77.1236 -114.791C73.1209 -115.587 71.4197 -120.391 74.052 -123.466L123.732 -181.392C124.172 -181.903 124.968 -182.845 125.87 -183.911C127.863 -186.262 126.492 -189.935 123.418 -190.422C122.04 -190.643 120.788 -190.848 120.075 -190.956L88.9031 -195.734C86.4439 -196.105 83.9776 -195.206 82.361 -193.328L26.4342 -128.363C24.7417 -126.397 24.213 -123.672 25.0486 -121.199L25.0397 -121.207Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M30.3106 204.966L72.0193 213.369C75.4237 214.048 78.229 210.753 76.9913 207.503L61.828 167.417C60.8203 164.765 57.3527 164.123 55.5162 166.256L27.9526 198.274C25.9111 200.646 27.2187 204.356 30.303 204.975L30.3106 204.966Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M115.672 278.644L101.223 238.576C100.05 235.304 102.891 232.04 106.284 232.787L148.115 241.894C150.884 242.502 152.029 245.841 150.192 247.975L122.628 279.993C120.587 282.364 116.73 281.617 115.664 278.653L115.672 278.644Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M227.977 236.388L216.455 201.934C215.617 199.443 213.503 197.572 210.933 197.06L130.104 180.954C127.534 180.442 125.415 178.612 124.529 176.142L96.6897 98.467C95.8044 95.9972 93.6518 94.17 91.0615 93.7167L55.3278 87.3682C52.754 86.9138 50.1486 87.8306 48.4561 89.7966L-7.47073 154.762C-9.07968 156.631 -9.61172 159.215 -8.88277 161.596L0.431442 191.763C0.622332 192.389 1.01926 193.623 1.46364 195.036C2.41511 198.024 6.26927 198.831 8.27791 196.461C9.1431 195.456 9.93247 194.539 10.4182 193.975L60.3118 136.234C62.953 133.166 67.9575 134.151 69.3341 137.998L95.0219 210.112C95.9507 212.712 98.1771 214.633 100.873 215.162L175.893 229.972C179.895 230.769 181.597 235.572 178.964 238.648L129.284 296.573C128.844 297.084 128.048 298.027 127.147 299.092C125.153 301.444 126.524 305.117 129.598 305.603C130.976 305.824 132.228 306.029 132.942 306.138L164.113 310.915C166.572 311.286 169.039 310.387 170.655 308.51L226.582 243.544C228.274 241.578 228.803 238.853 227.968 236.38L227.977 236.388Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M203.002 55.1083L161.294 46.7053C157.889 46.0258 155.084 49.3206 156.322 52.5708L171.485 92.657C172.493 95.3093 175.96 95.9513 177.797 93.8179L205.361 61.7996C207.402 59.4282 206.094 55.7181 203.01 55.0995L203.002 55.1083Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M117.642 -18.57L132.09 21.4985C133.263 24.7699 130.422 28.034 127.029 27.2872L85.1985 18.1796C82.4292 17.5719 81.2845 14.2328 83.121 12.0995L110.685 -19.9189C112.726 -22.2903 116.583 -21.543 117.649 -18.5788L117.642 -18.57Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M5.33659 23.6859L16.858 58.1405C17.6961 60.6312 19.8102 62.5019 22.3801 63.0144L103.209 79.1198C105.779 79.6324 107.898 81.4619 108.784 83.9318L136.623 161.607C137.509 164.077 139.661 165.904 142.252 166.357L177.985 172.706C180.559 173.16 183.165 172.243 184.857 170.277L240.784 105.312C242.393 103.443 242.925 100.859 242.196 98.4784L232.882 68.3108C232.691 67.685 232.294 66.451 231.849 65.038C230.898 62.0499 227.044 61.2434 225.035 63.6127C224.17 64.6177 223.381 65.5346 222.895 66.0988L173.001 123.84C170.36 126.908 165.356 125.923 163.979 122.076L138.291 49.962C137.362 47.3623 135.136 45.4406 132.44 44.9116L57.4205 30.1016C53.4178 29.3052 51.7166 24.5021 54.3488 21.4264L104.029 -36.4991C104.469 -37.0104 105.265 -37.9527 106.167 -39.0182C108.16 -41.3698 106.789 -45.0429 103.715 -45.5289C102.337 -45.7503 101.085 -45.9554 100.372 -46.0639L69.2 -50.8412C66.7408 -51.212 64.2744 -50.3134 62.6579 -48.4356L6.73106 16.5299C5.0386 18.4959 4.5099 21.2206 5.34549 23.6936L5.33659 23.6859Z"
+        fill="currentColor" fill-opacity="0.08" />
+    <path
+        d="M460.704 -89.7906L418.995 -98.1936C415.591 -98.8731 412.786 -95.5784 414.023 -92.3281L429.187 -52.2419C430.194 -49.5896 433.662 -48.9476 435.498 -51.081L463.062 -83.0993C465.103 -85.4707 463.796 -89.1809 460.711 -89.7994L460.704 -89.7906Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M375.343 -163.469L389.792 -123.4C390.965 -120.129 388.124 -116.865 384.731 -117.612L342.9 -126.719C340.131 -127.327 338.986 -130.666 340.823 -132.799L368.386 -164.818C370.428 -167.189 374.284 -166.442 375.351 -163.478L375.343 -163.469Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M263.038 -121.213L274.559 -86.7584C275.398 -84.2678 277.512 -82.397 280.082 -81.8845L360.91 -65.7792C363.48 -65.2665 365.6 -63.437 366.485 -60.9671L394.325 16.7081C395.21 19.1779 397.363 21.0052 399.953 21.4584L435.687 27.8069C438.261 28.2613 440.866 27.3445 442.558 25.3785L498.485 -39.587C500.094 -41.456 500.626 -44.0395 499.897 -46.4205L490.583 -76.5881C490.392 -77.2139 489.995 -78.4479 489.551 -79.861C488.599 -82.849 484.745 -83.6556 482.737 -81.2863C481.871 -80.2812 481.082 -79.3643 480.596 -78.8001L430.703 -21.059C428.062 -17.991 423.057 -18.9759 421.68 -22.8226L395.993 -94.9369C395.064 -97.5367 392.837 -99.4584 390.141 -99.9873L315.122 -114.797C311.119 -115.594 309.418 -120.397 312.05 -123.473L361.73 -181.398C362.171 -181.909 362.966 -182.852 363.868 -183.917C365.861 -186.269 364.49 -189.942 361.417 -190.428C360.039 -190.649 358.786 -190.854 358.073 -190.963L326.901 -195.74C324.442 -196.111 321.976 -195.212 320.359 -193.335L264.433 -128.369C262.74 -126.403 262.211 -123.678 263.047 -121.205L263.038 -121.213Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M268.307 204.958L310.016 213.361C313.42 214.041 316.226 210.746 314.988 207.496L299.825 167.41C298.817 164.757 295.349 164.115 293.513 166.249L265.949 198.267C263.908 200.639 265.215 204.349 268.3 204.967L268.307 204.958Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M353.668 278.637L339.219 238.568C338.046 235.297 340.887 232.033 344.28 232.78L386.111 241.887C388.88 242.495 390.025 245.834 388.189 247.967L360.625 279.986C358.584 282.357 354.727 281.61 353.66 278.646L353.668 278.637Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M465.973 236.381L454.452 201.926C453.613 199.436 451.499 197.565 448.93 197.052L368.101 180.947C365.531 180.434 363.411 178.605 362.526 176.135L334.686 98.4597C333.801 95.9899 331.648 94.1626 329.058 93.7094L293.324 87.3609C290.75 86.9065 288.145 87.8232 286.453 89.7892L230.526 154.755C228.917 156.624 228.385 159.207 229.114 161.588L238.428 191.756C238.619 192.382 239.016 193.616 239.46 195.029C240.412 198.017 244.266 198.823 246.274 196.454C247.14 195.449 247.929 194.532 248.415 193.968L298.308 136.227C300.95 133.159 305.954 134.144 307.331 137.99L333.018 210.105C333.947 212.704 336.174 214.626 338.87 215.155L413.889 229.965C417.892 230.762 419.593 235.565 416.961 238.64L367.281 296.566C366.84 297.077 366.045 298.019 365.143 299.085C363.15 301.436 364.521 305.11 367.594 305.596C368.972 305.817 370.225 306.022 370.938 306.131L402.11 310.908C404.569 311.279 407.035 310.38 408.652 308.502L464.579 243.537C466.271 241.571 466.8 238.846 465.964 236.373L465.973 236.381Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M440.999 55.1022L399.29 46.6992C395.886 46.0197 393.08 49.3145 394.318 52.5647L409.482 92.6509C410.489 95.3032 413.957 95.9452 415.793 93.8118L443.357 61.7935C445.398 59.4221 444.091 55.7119 441.006 55.0934L440.999 55.1022Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M355.638 -18.5761L370.087 21.4924C371.26 24.7638 368.419 28.0279 365.026 27.2811L323.195 18.1735C320.426 17.5658 319.281 14.2267 321.117 12.0934L348.681 -19.925C350.723 -22.2964 354.579 -21.5491 355.646 -18.5849L355.638 -18.5761Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M243.333 23.6798L254.854 58.1344C255.693 60.6251 257.807 62.4958 260.376 63.0083L341.205 79.1136C343.775 79.6263 345.895 81.4558 346.78 83.9257L374.62 161.601C375.505 164.071 377.658 165.898 380.248 166.351L415.982 172.7C418.555 173.154 421.161 172.237 422.853 170.271L478.78 105.306C480.389 103.437 480.921 100.853 480.192 98.4723L470.878 68.3047C470.687 67.6789 470.29 66.4449 469.846 65.0319C468.894 62.0438 465.04 61.2373 463.032 63.6066C462.166 64.6116 461.377 65.5285 460.891 66.0927L410.998 123.834C408.357 126.902 403.352 125.917 401.975 122.07L376.288 49.9559C375.359 47.3562 373.132 45.4345 370.436 44.9055L295.417 30.0955C291.414 29.2991 289.713 24.496 292.345 21.4203L342.025 -36.5052C342.466 -37.0165 343.261 -37.9588 344.163 -39.0243C346.156 -41.3759 344.785 -45.049 341.712 -45.535C340.334 -45.7564 339.081 -45.9615 338.368 -46.07L307.196 -50.8473C304.737 -51.2181 302.271 -50.3195 300.654 -48.4417L244.727 16.5238C243.035 18.4898 242.506 21.2145 243.342 23.6875L243.333 23.6798Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M693.703 -89.7894L651.995 -98.1924C648.59 -98.8719 645.785 -95.5771 647.023 -92.3269L662.186 -52.2407C663.194 -49.5884 666.661 -48.9464 668.498 -51.0798L696.061 -83.0981C698.103 -85.4695 696.795 -89.1797 693.711 -89.7982L693.703 -89.7894Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M608.342 -163.468L622.791 -123.399C623.964 -120.128 621.123 -116.864 617.73 -117.611L575.899 -126.718C573.13 -127.326 571.985 -130.665 573.822 -132.798L601.385 -164.817C603.427 -167.188 607.283 -166.441 608.35 -163.477L608.342 -163.468Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M496.037 -121.212L507.559 -86.7572C508.397 -84.2665 510.511 -82.3958 513.081 -81.8833L593.909 -65.778C596.48 -65.2653 598.599 -63.4358 599.484 -60.9659L627.324 16.7093C628.209 19.1791 630.362 21.0064 632.952 21.4596L668.686 27.8081C671.26 28.2625 673.865 27.3458 675.558 25.3798L731.485 -39.5858C733.094 -41.4548 733.626 -44.0383 732.897 -46.4193L723.582 -76.5869C723.392 -77.2127 722.995 -78.4467 722.55 -79.8598C721.599 -82.8478 717.745 -83.6543 715.736 -81.285C714.871 -80.28 714.081 -79.3631 713.596 -78.7989L663.702 -21.0578C661.061 -17.9897 656.056 -18.9746 654.68 -22.8213L628.992 -94.9357C628.063 -97.5354 625.837 -99.4571 623.141 -99.9861L548.121 -114.796C544.118 -115.593 542.417 -120.396 545.05 -123.471L594.73 -181.397C595.17 -181.908 595.966 -182.85 596.867 -183.916C598.861 -186.267 597.49 -189.941 594.416 -190.427C593.038 -190.648 591.785 -190.853 591.072 -190.962L559.901 -195.739C557.441 -196.11 554.975 -195.211 553.359 -193.333L497.432 -128.368C495.739 -126.402 495.211 -123.677 496.046 -121.204L496.037 -121.212Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M501.308 204.961L543.017 213.364C546.421 214.043 549.227 210.748 547.989 207.498L532.826 167.412C531.818 164.76 528.35 164.118 526.514 166.251L498.95 198.269C496.909 200.641 498.216 204.351 501.301 204.969L501.308 204.961Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M586.669 278.639L572.221 238.57C571.047 235.299 573.888 232.035 577.282 232.782L619.112 241.889C621.882 242.497 623.026 245.836 621.19 247.969L593.626 279.988C591.585 282.359 587.728 281.612 586.662 278.648L586.669 278.639Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M698.974 236.383L687.453 201.928C686.615 199.438 684.501 197.567 681.931 197.054L601.102 180.949C598.532 180.436 596.412 178.607 595.527 176.137L567.687 98.4619C566.802 95.9921 564.649 94.1648 562.059 93.7116L526.325 87.3631C523.752 86.9087 521.146 87.8254 519.454 89.7914L463.527 154.757C461.918 156.626 461.386 159.209 462.115 161.59L471.429 191.758C471.62 192.384 472.017 193.618 472.461 195.031C473.413 198.019 477.267 198.826 479.276 196.456C480.141 195.451 480.93 194.534 481.416 193.97L531.309 136.229C533.951 133.161 538.955 134.146 540.332 137.993L566.02 210.107C566.948 212.707 569.175 214.628 571.871 215.157L646.89 229.967C650.893 230.764 652.594 235.567 649.962 238.643L600.282 296.568C599.842 297.079 599.046 298.022 598.144 299.087C596.151 301.439 597.522 305.112 600.595 305.598C601.973 305.819 603.226 306.024 603.939 306.133L635.111 310.91C637.57 311.281 640.036 310.382 641.653 308.504L697.58 243.539C699.272 241.573 699.801 238.848 698.965 236.375L698.974 236.383Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M674 55.1032L632.291 46.7001C628.887 46.0206 626.082 49.3155 627.319 52.5657L642.483 92.6519C643.49 95.3041 646.958 95.9462 648.795 93.8128L676.358 61.7945C678.4 59.4231 677.092 55.7129 674.008 55.0944L674 55.1032Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M588.639 -18.5751L603.088 21.4934C604.261 24.7648 601.42 28.0289 598.027 27.2821L556.196 18.1745C553.427 17.5667 552.282 14.2277 554.119 12.0943L581.682 -19.924C583.724 -22.2954 587.58 -21.5481 588.647 -18.584L588.639 -18.5751Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M476.334 23.6808L487.856 58.1354C488.694 60.626 490.808 62.4968 493.378 63.0093L574.206 79.1146C576.776 79.6273 578.896 81.4568 579.781 83.9267L607.621 161.602C608.506 164.072 610.659 165.899 613.249 166.352L648.983 172.701C651.557 173.155 654.162 172.238 655.855 170.272L711.781 105.307C713.39 103.438 713.922 100.854 713.193 98.4733L703.879 68.3057C703.688 67.6799 703.291 66.4459 702.847 65.0328C701.896 62.0448 698.041 61.2382 696.033 63.6075C695.168 64.6126 694.378 65.5295 693.893 66.0937L643.999 123.835C641.358 126.903 636.353 125.918 634.977 122.071L609.289 49.9569C608.36 47.3571 606.134 45.4354 603.438 44.9065L528.418 30.0964C524.415 29.3 522.714 24.4969 525.346 21.4212L575.027 -36.5042C575.467 -37.0156 576.262 -37.9578 577.164 -39.0234C579.158 -41.3749 577.786 -45.048 574.713 -45.5341C573.335 -45.7554 572.082 -45.9606 571.369 -46.069L540.198 -50.8463C537.738 -51.2171 535.272 -50.3185 533.656 -48.4407L477.729 16.5248C476.036 18.4908 475.508 21.2154 476.343 23.6885L476.334 23.6808Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M931.704 -89.7906L889.995 -98.1936C886.591 -98.8731 883.785 -95.5784 885.023 -92.3281L900.186 -52.2419C901.194 -49.5896 904.662 -48.9476 906.498 -51.081L934.062 -83.0993C936.103 -85.4707 934.796 -89.1809 931.711 -89.7994L931.704 -89.7906Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M846.343 -163.469L860.791 -123.4C861.964 -120.129 859.124 -116.865 855.73 -117.612L813.9 -126.719C811.13 -127.327 809.986 -130.666 811.822 -132.799L839.386 -164.818C841.427 -167.189 845.284 -166.442 846.35 -163.478L846.343 -163.469Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M734.038 -121.213L745.559 -86.7584C746.397 -84.2678 748.511 -82.397 751.081 -81.8845L831.91 -65.7792C834.48 -65.2665 836.6 -63.437 837.485 -60.9671L865.325 16.7081C866.21 19.1779 868.362 21.0052 870.953 21.4584L906.687 27.8069C909.26 28.2613 911.866 27.3445 913.558 25.3785L969.485 -39.587C971.094 -41.456 971.626 -44.0395 970.897 -46.4205L961.583 -76.5881C961.392 -77.2139 960.995 -78.4479 960.551 -79.861C959.599 -82.849 955.745 -83.6556 953.736 -81.2863C952.871 -80.2812 952.082 -79.3643 951.596 -78.8001L901.703 -21.059C899.061 -17.991 894.057 -18.9759 892.68 -22.8226L866.992 -94.9369C866.064 -97.5367 863.837 -99.4584 861.141 -99.9873L786.122 -114.797C782.119 -115.594 780.418 -120.397 783.05 -123.473L832.73 -181.398C833.17 -181.909 833.966 -182.852 834.868 -183.917C836.861 -186.269 835.49 -189.942 832.417 -190.428C831.039 -190.649 829.786 -190.854 829.073 -190.963L797.901 -195.74C795.442 -196.111 792.976 -195.212 791.359 -193.335L735.432 -128.369C733.74 -126.403 733.211 -123.678 734.047 -121.205L734.038 -121.213Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M739.307 204.957L781.016 213.36C784.42 214.04 787.225 210.745 785.988 207.495L770.824 167.409C769.817 164.756 766.349 164.114 764.513 166.248L736.949 198.266C734.907 200.638 736.215 204.348 739.299 204.966L739.307 204.957Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M824.668 278.636L810.219 238.567C809.046 235.296 811.887 232.032 815.28 232.779L857.111 241.886C859.88 242.494 861.025 245.833 859.188 247.966L831.625 279.985C829.583 282.356 825.727 281.609 824.66 278.645L824.668 278.636Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M936.973 236.38L925.452 201.925C924.613 199.435 922.499 197.564 919.929 197.051L839.101 180.946C836.531 180.433 834.411 178.604 833.526 176.134L805.686 98.4587C804.801 95.9889 802.648 94.1616 800.058 93.7084L764.324 87.3599C761.75 86.9055 759.145 87.8223 757.452 89.7883L701.526 154.754C699.917 156.623 699.385 159.206 700.114 161.587L709.428 191.755C709.619 192.381 710.016 193.615 710.46 195.028C711.411 198.016 715.266 198.822 717.274 196.453C718.139 195.448 718.929 194.531 719.415 193.967L769.308 136.226C771.949 133.158 776.954 134.143 778.331 137.989L804.018 210.104C804.947 212.703 807.174 214.625 809.87 215.154L884.889 229.964C888.892 230.761 890.593 235.564 887.961 238.639L838.281 296.565C837.84 297.076 837.045 298.018 836.143 299.084C834.15 301.436 835.521 305.109 838.594 305.595C839.972 305.816 841.225 306.021 841.938 306.13L873.109 310.907C875.569 311.278 878.035 310.379 879.652 308.501L935.578 243.536C937.271 241.57 937.8 238.845 936.964 236.372L936.973 236.38Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M911.999 55.102L870.29 46.6989C866.886 46.0194 864.08 49.3142 865.318 52.5645L880.481 92.6507C881.489 95.3029 884.957 95.9449 886.793 93.8116L914.357 61.7933C916.398 59.4218 915.091 55.7117 912.006 55.0932L911.999 55.102Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M826.638 -18.5764L841.086 21.4922C842.259 24.7636 839.418 28.0277 836.025 27.2808L794.195 18.1733C791.425 17.5655 790.281 14.2265 792.117 12.0931L819.681 -19.9252C821.722 -22.2966 825.579 -21.5494 826.645 -18.5852L826.638 -18.5764Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M714.333 23.6796L725.854 58.1342C726.692 60.6248 728.806 62.4956 731.376 63.0081L812.205 79.1134C814.775 79.6261 816.895 81.4556 817.78 83.9254L845.62 161.601C846.505 164.07 848.657 165.898 851.248 166.351L886.981 172.699C889.555 173.154 892.161 172.237 893.853 170.271L949.78 105.306C951.389 103.437 951.921 100.853 951.192 98.4721L941.878 68.3045C941.687 67.6787 941.29 66.4447 940.846 65.0316C939.894 62.0436 936.04 61.237 934.031 63.6063C933.166 64.6113 932.377 65.5283 931.891 66.0925L881.997 123.834C879.356 126.902 874.352 125.917 872.975 122.07L847.287 49.9557C846.359 47.3559 844.132 45.4342 841.436 44.9053L766.417 30.0952C762.414 29.2988 760.713 24.4957 763.345 21.42L813.025 -36.5054C813.465 -37.0168 814.261 -37.959 815.163 -39.0246C817.156 -41.3761 815.785 -45.0493 812.712 -45.5353C811.333 -45.7567 810.081 -45.9618 809.368 -46.0702L778.196 -50.8475C775.737 -51.2183 773.271 -50.3197 771.654 -48.4419L715.727 16.5236C714.035 18.4896 713.506 21.2142 714.342 23.6873L714.333 23.6796Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M1164.7 -89.7906L1122.99 -98.1936C1119.59 -98.8731 1116.78 -95.5784 1118.02 -92.3281L1133.19 -52.2419C1134.19 -49.5896 1137.66 -48.9476 1139.5 -51.081L1167.06 -83.0993C1169.1 -85.4707 1167.79 -89.1809 1164.71 -89.7994L1164.7 -89.7906Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M1079.34 -163.469L1093.79 -123.4C1094.96 -120.129 1092.12 -116.865 1088.73 -117.612L1046.9 -126.719C1044.13 -127.327 1042.98 -130.666 1044.82 -132.799L1072.39 -164.818C1074.43 -167.189 1078.28 -166.442 1079.35 -163.478L1079.34 -163.469Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M967.037 -121.213L978.558 -86.7584C979.397 -84.2678 981.511 -82.397 984.081 -81.8845L1064.91 -65.7792C1067.48 -65.2665 1069.6 -63.437 1070.48 -60.9671L1098.32 16.7081C1099.21 19.1779 1101.36 21.0052 1103.95 21.4584L1139.69 27.8069C1142.26 28.2613 1144.87 27.3445 1146.56 25.3785L1202.48 -39.587C1204.09 -41.456 1204.63 -44.0395 1203.9 -46.4205L1194.58 -76.5881C1194.39 -77.2139 1193.99 -78.4479 1193.55 -79.861C1192.6 -82.849 1188.74 -83.6556 1186.74 -81.2863C1185.87 -80.2812 1185.08 -79.3643 1184.6 -78.8001L1134.7 -21.059C1132.06 -17.991 1127.06 -18.9759 1125.68 -22.8226L1099.99 -94.9369C1099.06 -97.5367 1096.84 -99.4584 1094.14 -99.9873L1019.12 -114.797C1015.12 -115.594 1013.42 -120.397 1016.05 -123.473L1065.73 -181.398C1066.17 -181.909 1066.97 -182.852 1067.87 -183.917C1069.86 -186.269 1068.49 -189.942 1065.42 -190.428C1064.04 -190.649 1062.79 -190.854 1062.07 -190.963L1030.9 -195.74C1028.44 -196.111 1025.97 -195.212 1024.36 -193.335L968.432 -128.369C966.739 -126.403 966.21 -123.678 967.046 -121.205L967.037 -121.213Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M972.308 204.959L1014.02 213.362C1017.42 214.042 1020.23 210.747 1018.99 207.497L1003.83 167.411C1002.82 164.758 999.35 164.116 997.514 166.25L969.95 198.268C967.908 200.639 969.216 204.35 972.3 204.968L972.308 204.959Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M1057.67 278.638L1043.22 238.569C1042.05 235.298 1044.89 232.034 1048.28 232.78L1090.11 241.888C1092.88 242.496 1094.03 245.835 1092.19 247.968L1064.63 279.987C1062.58 282.358 1058.73 281.611 1057.66 278.647L1057.67 278.638Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M1169.97 236.382L1158.45 201.927C1157.61 199.437 1155.5 197.566 1152.93 197.053L1072.1 180.948C1069.53 180.435 1067.41 178.606 1066.53 176.136L1038.69 98.4607C1037.8 95.9908 1035.65 94.1636 1033.06 93.7104L997.325 87.3618C994.751 86.9075 992.146 87.8242 990.453 89.7902L934.527 154.756C932.918 156.625 932.386 159.208 933.115 161.589L942.429 191.757C942.62 192.383 943.017 193.617 943.461 195.03C944.413 198.018 948.267 198.824 950.275 196.455C951.14 195.45 951.93 194.533 952.416 193.969L1002.31 136.228C1004.95 133.16 1009.95 134.145 1011.33 137.991L1037.02 210.106C1037.95 212.705 1040.17 214.627 1042.87 215.156L1117.89 229.966C1121.89 230.763 1123.59 235.566 1120.96 238.641L1071.28 296.567C1070.84 297.078 1070.05 298.02 1069.14 299.086C1067.15 301.437 1068.52 305.111 1071.6 305.597C1072.97 305.818 1074.23 306.023 1074.94 306.132L1106.11 310.909C1108.57 311.28 1111.04 310.381 1112.65 308.503L1168.58 243.538C1170.27 241.572 1170.8 238.847 1169.96 236.374L1169.97 236.382Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M1145 55.102L1103.29 46.6989C1099.89 46.0194 1097.08 49.3142 1098.32 52.5645L1113.48 92.6507C1114.49 95.3029 1117.96 95.9449 1119.79 93.8116L1147.36 61.7933C1149.4 59.4218 1148.09 55.7117 1145.01 55.0932L1145 55.102Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M1059.64 -18.5764L1074.09 21.4922C1075.26 24.7636 1072.42 28.0277 1069.03 27.2808L1027.2 18.1733C1024.43 17.5655 1023.28 14.2265 1025.12 12.0931L1052.68 -19.9252C1054.72 -22.2966 1058.58 -21.5494 1059.65 -18.5852L1059.64 -18.5764Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M947.334 23.6796L958.855 58.1342C959.694 60.6248 961.808 62.4956 964.377 63.0081L1045.21 79.1134C1047.78 79.6261 1049.9 81.4556 1050.78 83.9254L1078.62 161.601C1079.51 164.07 1081.66 165.898 1084.25 166.351L1119.98 172.699C1122.56 173.154 1125.16 172.237 1126.85 170.271L1182.78 105.306C1184.39 103.437 1184.92 100.853 1184.19 98.4721L1174.88 68.3045C1174.69 67.6787 1174.29 66.4447 1173.85 65.0316C1172.9 62.0436 1169.04 61.237 1167.03 63.6063C1166.17 64.6113 1165.38 65.5283 1164.89 66.0925L1115 123.834C1112.36 126.902 1107.35 125.917 1105.98 122.07L1080.29 49.9557C1079.36 47.3559 1077.13 45.4342 1074.44 44.9053L999.418 30.0952C995.415 29.2988 993.714 24.4957 996.346 21.42L1046.03 -36.5054C1046.47 -37.0168 1047.26 -37.959 1048.16 -39.0246C1050.16 -41.3761 1048.79 -45.0493 1045.71 -45.5353C1044.33 -45.7567 1043.08 -45.9618 1042.37 -46.0702L1011.2 -50.8475C1008.74 -51.2183 1006.27 -50.3197 1004.66 -48.4419L948.728 16.5236C947.036 18.4896 946.507 21.2142 947.343 23.6873L947.334 23.6796Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-10.2954 -89.7842L-52.0041 -98.1873C-55.4084 -98.8668 -58.2138 -95.572 -56.976 -92.3217L-41.8127 -52.2355C-40.805 -49.5833 -37.3374 -48.9413 -35.5009 -51.0746L-7.93733 -83.093C-5.89584 -85.4644 -7.20342 -89.1745 -10.2878 -89.7931L-10.2954 -89.7842Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-95.6563 -163.463L-81.2076 -123.394C-80.0346 -120.123 -82.8755 -116.859 -86.2686 -117.605L-128.099 -126.713C-130.869 -127.321 -132.013 -130.66 -130.177 -132.793L-102.613 -164.811C-100.572 -167.183 -96.7151 -166.436 -95.6487 -163.471L-95.6563 -163.463Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-207.961 -121.207L-196.44 -86.7521C-195.602 -84.2614 -193.488 -82.3906 -190.918 -81.8782L-110.089 -65.7728C-107.519 -65.2602 -105.399 -63.4306 -104.514 -60.9608L-76.6744 16.7144C-75.7891 19.1843 -73.6365 21.0115 -71.0462 21.4648L-35.3125 27.8132C-32.7387 28.2676 -30.1333 27.3509 -28.4408 25.3849L27.486 -39.5807C29.0949 -41.4496 29.627 -44.0332 28.898 -46.4142L19.5838 -76.5818C19.3929 -77.2076 18.996 -78.4415 18.5516 -79.8546C17.6002 -82.8427 13.746 -83.6492 11.7374 -81.2799C10.8722 -80.2749 10.0828 -79.358 9.59708 -78.7937L-40.2965 -21.0526C-42.9377 -17.9846 -47.9423 -18.9695 -49.3189 -22.8162L-75.0067 -94.9306C-75.9355 -97.5303 -78.1619 -99.452 -80.8578 -99.9809L-155.877 -114.791C-159.88 -115.587 -161.581 -120.391 -158.949 -123.466L-109.269 -181.392C-108.829 -181.903 -108.033 -182.845 -107.131 -183.911C-105.138 -186.262 -106.509 -189.935 -109.582 -190.422C-110.961 -190.643 -112.213 -190.848 -112.926 -190.956L-144.098 -195.734C-146.557 -196.105 -149.023 -195.206 -150.64 -193.328L-206.567 -128.363C-208.259 -126.397 -208.788 -123.672 -207.952 -121.199L-207.961 -121.207Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-202.692 204.964L-160.984 213.367C-157.579 214.046 -154.774 210.752 -156.012 207.501L-171.175 167.415C-172.183 164.763 -175.65 164.121 -177.487 166.254L-205.05 198.272C-207.092 200.644 -205.784 204.354 -202.7 204.973L-202.692 204.964Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-117.331 278.642L-131.78 238.574C-132.953 235.302 -130.112 232.038 -126.719 232.785L-84.8883 241.892C-82.119 242.5 -80.9743 245.839 -82.8109 247.973L-110.374 279.991C-112.416 282.362 -116.273 281.615 -117.339 278.651L-117.331 278.642Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-5.0264 236.386L-16.5478 201.932C-17.386 199.441 -19.5 197.57 -22.0699 197.058L-102.898 180.952C-105.469 180.44 -107.588 178.61 -108.474 176.14L-136.313 98.4651C-137.198 95.9952 -139.351 94.168 -141.941 93.7148L-177.675 87.3662C-180.249 86.9119 -182.854 87.8286 -184.547 89.7946L-240.474 154.76C-242.083 156.629 -242.615 159.213 -241.886 161.594L-232.571 191.761C-232.381 192.387 -231.984 193.621 -231.539 195.034C-230.588 198.022 -226.734 198.829 -224.725 196.459C-223.86 195.454 -223.07 194.537 -222.585 193.973L-172.691 136.232C-170.05 133.164 -165.045 134.149 -163.669 137.996L-137.981 210.11C-137.052 212.71 -134.826 214.631 -132.13 215.16L-57.1103 229.971C-53.1076 230.767 -51.4064 235.57 -54.0387 238.646L-103.719 296.571C-104.159 297.083 -104.955 298.025 -105.856 299.09C-107.85 301.442 -106.479 305.115 -103.405 305.601C-102.027 305.822 -100.775 306.028 -100.061 306.136L-68.8898 310.913C-66.4306 311.284 -63.9642 310.385 -62.3477 308.508L-6.42088 243.542C-4.72842 241.576 -4.19972 238.852 -5.03531 236.378L-5.0264 236.386Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-30.0004 55.1083L-71.7092 46.7053C-75.1135 46.0258 -77.9188 49.3206 -76.6811 52.5708L-61.5178 92.657C-60.5101 95.3093 -57.0425 95.9513 -55.206 93.8179L-27.6424 61.7996C-25.6009 59.4282 -26.9085 55.7181 -29.9929 55.0995L-30.0004 55.1083Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-115.361 -18.57L-100.913 21.4985C-99.7397 24.7699 -102.581 28.034 -105.974 27.2872L-147.804 18.1796C-150.574 17.5719 -151.718 14.2328 -149.882 12.0995L-122.318 -19.9189C-120.277 -22.2903 -116.42 -21.543 -115.354 -18.5788L-115.361 -18.57Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M-227.666 23.6859L-216.145 58.1405C-215.307 60.6312 -213.193 62.5019 -210.623 63.0144L-129.794 79.1198C-127.224 79.6324 -125.104 81.4619 -124.219 83.9318L-96.3795 161.607C-95.4942 164.077 -93.3416 165.904 -90.7513 166.357L-55.0176 172.706C-52.4438 173.16 -49.8384 172.243 -48.1459 170.277L7.78091 105.312C9.38986 103.443 9.9219 100.859 9.19295 98.4784L-0.121262 68.3108C-0.312151 67.685 -0.709083 66.451 -1.15346 65.038C-2.10493 62.0499 -5.95909 61.2434 -7.96773 63.6127C-8.83292 64.6177 -9.62228 65.5346 -10.108 66.0988L-60.0016 123.84C-62.6428 126.908 -67.6474 125.923 -69.0239 122.076L-94.7117 49.962C-95.6405 47.3623 -97.8669 45.4406 -100.563 44.9116L-175.582 30.1016C-179.585 29.3052 -181.286 24.5021 -178.654 21.4264L-128.974 -36.4991C-128.534 -37.0104 -127.738 -37.9527 -126.836 -39.0182C-124.843 -41.3698 -126.214 -45.0429 -129.288 -45.5289C-130.666 -45.7503 -131.918 -45.9554 -132.631 -46.0639L-163.803 -50.8412C-166.262 -51.212 -168.728 -50.3134 -170.345 -48.4356L-226.272 16.5299C-227.964 18.4959 -228.493 21.2206 -227.657 23.6936L-227.666 23.6859Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M222.706 -89.7842L180.997 -98.1873C177.593 -98.8668 174.787 -95.572 176.025 -92.3217L191.188 -52.2355C192.196 -49.5833 195.663 -48.9413 197.5 -51.0746L225.064 -83.093C227.105 -85.4644 225.798 -89.1745 222.713 -89.7931L222.706 -89.7842Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M137.345 -163.463L151.793 -123.394C152.966 -120.123 150.125 -116.859 146.732 -117.605L104.902 -126.713C102.132 -127.321 100.988 -130.66 102.824 -132.793L130.388 -164.811C132.429 -167.183 136.286 -166.436 137.352 -163.471L137.345 -163.463Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M25.0397 -121.207L36.5611 -86.7521C37.3993 -84.2614 39.5133 -82.3906 42.0832 -81.8782L122.912 -65.7728C125.482 -65.2602 127.602 -63.4306 128.487 -60.9608L156.327 16.7144C157.212 19.1843 159.364 21.0115 161.955 21.4648L197.688 27.8132C200.262 28.2676 202.868 27.3509 204.56 25.3849L260.487 -39.5807C262.096 -41.4496 262.628 -44.0332 261.899 -46.4142L252.585 -76.5818C252.394 -77.2076 251.997 -78.4415 251.553 -79.8546C250.601 -82.8427 246.747 -83.6492 244.738 -81.2799C243.873 -80.2749 243.084 -79.358 242.598 -78.7937L192.704 -21.0526C190.063 -17.9846 185.059 -18.9695 183.682 -22.8162L157.994 -94.9306C157.066 -97.5303 154.839 -99.452 152.143 -99.9809L77.1236 -114.791C73.1209 -115.587 71.4197 -120.391 74.052 -123.466L123.732 -181.392C124.172 -181.903 124.968 -182.845 125.87 -183.911C127.863 -186.262 126.492 -189.935 123.418 -190.422C122.04 -190.643 120.788 -190.848 120.075 -190.956L88.9031 -195.734C86.4439 -196.105 83.9776 -195.206 82.361 -193.328L26.4342 -128.363C24.7417 -126.397 24.213 -123.672 25.0486 -121.199L25.0397 -121.207Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M30.3106 204.966L72.0193 213.369C75.4237 214.048 78.229 210.753 76.9913 207.503L61.828 167.417C60.8203 164.765 57.3527 164.123 55.5162 166.256L27.9526 198.274C25.9111 200.646 27.2187 204.356 30.303 204.975L30.3106 204.966Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M115.672 278.644L101.223 238.576C100.05 235.304 102.891 232.04 106.284 232.787L148.115 241.894C150.884 242.502 152.029 245.841 150.192 247.975L122.628 279.993C120.587 282.364 116.73 281.617 115.664 278.653L115.672 278.644Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M227.977 236.388L216.455 201.934C215.617 199.443 213.503 197.572 210.933 197.06L130.104 180.954C127.534 180.442 125.415 178.612 124.529 176.142L96.6897 98.467C95.8044 95.9972 93.6518 94.17 91.0615 93.7167L55.3278 87.3682C52.754 86.9138 50.1486 87.8306 48.4561 89.7966L-7.47073 154.762C-9.07968 156.631 -9.61172 159.215 -8.88277 161.596L0.431442 191.763C0.622332 192.389 1.01926 193.623 1.46364 195.036C2.41511 198.024 6.26927 198.831 8.27791 196.461C9.1431 195.456 9.93247 194.539 10.4182 193.975L60.3118 136.234C62.953 133.166 67.9575 134.151 69.3341 137.998L95.0219 210.112C95.9507 212.712 98.1771 214.633 100.873 215.162L175.893 229.972C179.895 230.769 181.597 235.572 178.964 238.648L129.284 296.573C128.844 297.084 128.048 298.027 127.147 299.092C125.153 301.444 126.524 305.117 129.598 305.603C130.976 305.824 132.228 306.029 132.942 306.138L164.113 310.915C166.572 311.286 169.039 310.387 170.655 308.51L226.582 243.544C228.274 241.578 228.803 238.853 227.968 236.38L227.977 236.388Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M203.002 55.1083L161.294 46.7053C157.889 46.0258 155.084 49.3206 156.322 52.5708L171.485 92.657C172.493 95.3093 175.96 95.9513 177.797 93.8179L205.361 61.7996C207.402 59.4282 206.094 55.7181 203.01 55.0995L203.002 55.1083Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M117.642 -18.57L132.09 21.4985C133.263 24.7699 130.422 28.034 127.029 27.2872L85.1985 18.1796C82.4292 17.5719 81.2845 14.2328 83.121 12.0995L110.685 -19.9189C112.726 -22.2903 116.583 -21.543 117.649 -18.5788L117.642 -18.57Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+    <path
+        d="M5.33659 23.6859L16.858 58.1405C17.6961 60.6312 19.8102 62.5019 22.3801 63.0144L103.209 79.1198C105.779 79.6324 107.898 81.4619 108.784 83.9318L136.623 161.607C137.509 164.077 139.661 165.904 142.252 166.357L177.985 172.706C180.559 173.16 183.165 172.243 184.857 170.277L240.784 105.312C242.393 103.443 242.925 100.859 242.196 98.4784L232.882 68.3108C232.691 67.685 232.294 66.451 231.849 65.038C230.898 62.0499 227.044 61.2434 225.035 63.6127C224.17 64.6177 223.381 65.5346 222.895 66.0988L173.001 123.84C170.36 126.908 165.356 125.923 163.979 122.076L138.291 49.962C137.362 47.3623 135.136 45.4406 132.44 44.9116L57.4205 30.1016C53.4178 29.3052 51.7166 24.5021 54.3488 21.4264L104.029 -36.4991C104.469 -37.0104 105.265 -37.9527 106.167 -39.0182C108.16 -41.3698 106.789 -45.0429 103.715 -45.5289C102.337 -45.7503 101.085 -45.9554 100.372 -46.0639L69.2 -50.8412C66.7408 -51.212 64.2744 -50.3134 62.6579 -48.4356L6.73106 16.5299C5.0386 18.4959 4.5099 21.2206 5.34549 23.6936L5.33659 23.6859Z"
+        stroke="currentColor" stroke-opacity="0.18" stroke-width="2"
+        mask="url(#path-1-inside-1_9092_23263)" />
+</svg>
\ No newline at end of file
diff --git a/apps/frontend/src/assets/images/servers/medal_server_icon.svg b/apps/frontend/src/assets/images/servers/medal_server_icon.svg
new file mode 100644
index 000000000..c0c85308f
--- /dev/null
+++ b/apps/frontend/src/assets/images/servers/medal_server_icon.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="72" height="72" rx="12" fill="currentColor" fill-opacity="0.12" />
+    <path
+        d="M22.562 46.8959L31.189 42.2804C31.8922 41.9026 31.8873 40.9333 31.1763 40.558L22.426 35.9147C21.8463 35.6082 21.1377 36.0016 21.1373 36.6321L21.1319 46.0958C21.1315 46.7967 21.9244 47.2404 22.562 46.8985L22.562 46.8959Z"
+        fill="currentColor" />
+    <path
+        d="M48.7804 47.0911L40.1588 42.3472C39.4561 41.9589 39.4621 40.9896 40.1735 40.625L48.9288 36.112C49.5092 35.8141 50.2172 36.218 50.2168 36.8485L50.2114 46.3122C50.211 47.0131 49.4178 47.445 48.7804 47.0937L48.7804 47.0911Z"
+        fill="currentColor" />
+    <path
+        d="M62.1735 23.588L54.919 19.3778C54.3937 19.0742 53.7374 19.0615 53.2066 19.3468L36.5152 28.3219C35.9844 28.6072 35.3333 28.6024 34.8028 28.3092L18.1193 19.0882C17.5888 18.7951 16.9323 18.7954 16.4069 19.0937L9.14477 23.1933C8.62214 23.4891 8.30179 24.0235 8.30145 24.6046L8.29042 43.8064C8.2901 44.3589 8.58797 44.877 9.07744 45.1777L15.2929 48.9763C15.4214 49.0554 15.6784 49.2085 15.971 49.3853C16.5917 49.7573 17.3935 49.3359 17.3884 48.6401C17.3886 48.3431 17.3887 48.0721 17.3888 47.9053L17.4315 30.8117C17.432 29.9049 18.4636 29.3471 19.2894 29.8041L34.7506 38.3879C35.3084 38.697 35.9922 38.7021 36.5477 38.4013L52.0186 30.0477C52.845 29.603 53.8731 30.1762 53.8753 31.083L53.8983 48.177C53.8982 48.3282 53.9008 48.6044 53.9033 48.9171C53.9084 49.6077 54.707 50.0358 55.3225 49.6729C55.599 49.5108 55.8509 49.3642 55.9931 49.2792L62.2128 45.5732C62.7025 45.2798 63.0011 44.7687 63.0014 44.2137L63.0125 25.0118C63.0128 24.4307 62.693 23.8889 62.1707 23.588L62.1735 23.588Z"
+        fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index e5c5b5514..1dc07d5df 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -131,6 +131,11 @@ html {
 
 	--landing-raw-bg: #fff;
 
+	--medal-promotion-bg: #fff;
+	--medal-promotion-bg-orange: #f0b051;
+	--medal-promotion-text-orange: #faa624;
+	--medal-promotion-bg-gradient: linear-gradient(90deg, rgba(255, 200, 118, 0.15) 0%, #fff 100%);
+
 	--banner-error-bg: #fee2e2;
 	--banner-error-text: #991b1b;
 	--banner-error-border: #ef4444;
@@ -237,6 +242,11 @@ html {
 
 	--landing-raw-bg: #000;
 
+	--medal-promotion-bg: #000;
+	--medal-promotion-bg-orange: #ffb84b54;
+	--medal-promotion-text-orange: #ffb84b;
+	--medal-promotion-bg-gradient: linear-gradient(90deg, #ffb74b21, transparent 50%, #000 100%);
+
 	--hover-filter: brightness(120%);
 	--active-filter: brightness(140%);
 
diff --git a/apps/frontend/src/components/ui/AdPlaceholder.vue b/apps/frontend/src/components/ui/AdPlaceholder.vue
index 70c713a74..d5afe393e 100644
--- a/apps/frontend/src/components/ui/AdPlaceholder.vue
+++ b/apps/frontend/src/components/ui/AdPlaceholder.vue
@@ -1,16 +1,16 @@
 <template>
 	<div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
 		<nuxt-link
-			to="/servers"
+			to="/servers?plan&ref=medal"
 			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
 		>
 			<img
-				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="light-image hidden rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
 				alt="Host your next server with Modrinth Servers"
 				class="dark-image rounded-[inherit]"
 			/>
diff --git a/apps/frontend/src/components/ui/servers/ServerIcon.vue b/apps/frontend/src/components/ui/servers/ServerIcon.vue
index 9cc7132b9..c0eae785a 100644
--- a/apps/frontend/src/components/ui/servers/ServerIcon.vue
+++ b/apps/frontend/src/components/ui/servers/ServerIcon.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="experimental-styles-within flex size-24 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+		class="experimental-styles-within flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
 		<client-only>
 			<img
diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
index c5a05c92b..0fc22e31b 100644
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -4,26 +4,23 @@
 		:to="status === 'suspended' ? '' : `/servers/manage/${props.server_id}`"
 	>
 		<div
-			v-tooltip="
-				status === 'suspended'
-					? suspension_reason === 'upgrading'
-						? 'This server is being transferred to a new node. It will be unavailable until this process finishes.'
-						: 'This server has been suspended. Please visit your billing settings or contact Modrinth Support for more information.'
-					: ''
-			"
-			class="flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100"
-			:class="status === 'suspended' ? '!rounded-b-none opacity-75' : 'active:scale-95'"
+			class="-mb-2 flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-button-bg bg-bg-raised p-4 transition-transform duration-100"
+			:class="{
+				'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
+				'opacity-75': status === 'suspended',
+				'active:scale-95': status !== 'suspended' && !pendingChange,
+			}"
 			data-pyro-server-listing
 			:data-pyro-server-listing-id="server_id"
 		>
 			<ServerIcon v-if="status !== 'suspended'" :image="image" />
 			<div
 				v-else
-				class="bg-bg-secondary flex size-24 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				class="bg-bg-secondary flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 			>
-				<LockIcon class="size-20 text-secondary" />
+				<LockIcon class="size-12 text-secondary" />
 			</div>
-			<div class="ml-8 flex flex-col gap-2.5">
+			<div class="ml-4 flex flex-col gap-2.5">
 				<div class="flex flex-row items-center gap-2">
 					<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
 					<ChevronRightIcon />
@@ -41,7 +38,6 @@
 					/>
 					Using {{ projectData?.title || 'Unknown' }}
 				</div>
-				<div v-else class="min-h-[20px]"></div>
 
 				<div
 					v-if="isConfiguring"
@@ -59,50 +55,67 @@
 				/>
 			</div>
 		</div>
-		<div
-			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
-			class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-blue p-4 text-sm font-bold text-contrast"
-		>
-			<PanelSpinner />
-			Your server's hardware is currently being upgraded and will be back online shortly.
-		</div>
-		<div
-			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
-			class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
-		>
-			<div class="flex flex-row gap-2">
-				<PanelErrorIcon class="!size-5" /> Your server has been cancelled. Please update your
-				billing information or contact Modrinth Support for more information.
-			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-		</div>
-		<div
-			v-else-if="status === 'suspended' && suspension_reason"
-			class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
-		>
-			<div class="flex flex-row gap-2">
-				<PanelErrorIcon class="!size-5" /> Your server has been suspended: {{ suspension_reason }}.
-				Please update your billing information or contact Modrinth Support for more information.
-			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-		</div>
-		<div
-			v-else-if="status === 'suspended'"
-			class="relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
-		>
-			<div class="flex flex-row gap-2">
-				<PanelErrorIcon class="!size-5" /> Your server has been suspended. Please update your
-				billing information or contact Modrinth Support for more information.
-			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-		</div>
 	</NuxtLink>
+	<div
+		v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+		class="relative -mt-2 flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
+	>
+		<PanelSpinner />
+		Your server's hardware is currently being upgraded and will be back online shortly.
+	</div>
+	<div
+		v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+		class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+	>
+		<div class="flex flex-row gap-2">
+			<PanelErrorIcon class="!size-5" /> Your server has been cancelled. Please update your billing
+			information or contact Modrinth Support for more information.
+		</div>
+		<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+	</div>
+	<div
+		v-else-if="status === 'suspended' && suspension_reason"
+		class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+	>
+		<div class="flex flex-row gap-2">
+			<PanelErrorIcon class="!size-5" /> Your server has been suspended: {{ suspension_reason }}.
+			Please update your billing information or contact Modrinth Support for more information.
+		</div>
+		<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+	</div>
+	<div
+		v-else-if="status === 'suspended'"
+		class="-mt-2flex relative w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+	>
+		<div class="flex flex-row gap-2">
+			<PanelErrorIcon class="!size-5" /> Your server has been suspended. Please update your billing
+			information or contact Modrinth Support for more information.
+		</div>
+		<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+	</div>
+	<div
+		v-if="pendingChange && status !== 'suspended'"
+		class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-orange bg-bg-orange p-4 text-sm font-bold text-contrast"
+	>
+		<div>
+			Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{ pendingChange.planSize }}"
+			plan on {{ formatDate(pendingChange.date) }}.
+		</div>
+		<ServersSpecs
+			class="!font-normal !text-contrast"
+			:ram="Math.round((pendingChange.ramGb ?? 0) * 1024)"
+			:storage="Math.round((pendingChange.storageGb ?? 0) * 1024)"
+			:cpus="pendingChange.cpuBurst"
+			bursting-link="https://docs.modrinth.com/servers/bursting"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { ChevronRightIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
-import { Avatar, CopyCode } from '@modrinth/ui'
+import { Avatar, CopyCode, ServersSpecs } from '@modrinth/ui'
 import type { Project, Server } from '@modrinth/utils'
+import dayjs from 'dayjs'
 
 import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
 
@@ -111,7 +124,19 @@ import PanelSpinner from './PanelSpinner.vue'
 import ServerIcon from './ServerIcon.vue'
 import ServerInfoLabels from './ServerInfoLabels.vue'
 
-const props = defineProps<Partial<Server>>()
+type PendingChange = {
+	planSize: string
+	cpu: number
+	cpuBurst: number
+	ramGb: number
+	swapGb?: number
+	storageGb?: number
+	date: string | number | Date
+	intervalChange?: string | null
+	verb: string
+}
+
+const props = defineProps<Partial<Server> & { pendingChange?: PendingChange }>()
 
 if (props.server_id && props.status === 'available') {
 	// Necessary only to get server icon
@@ -138,4 +163,12 @@ if (props.upstream) {
 const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined)
 const iconUrl = computed(() => projectData.value?.icon_url || undefined)
 const isConfiguring = computed(() => props.flows?.intro)
+
+const formatDate = (d: unknown) => {
+	try {
+		return dayjs(d as any).format('MMMM D, YYYY')
+	} catch {
+		return ''
+	}
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServersUpgradeModalWrapper.vue b/apps/frontend/src/components/ui/servers/ServersUpgradeModalWrapper.vue
new file mode 100644
index 000000000..4874339af
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/ServersUpgradeModalWrapper.vue
@@ -0,0 +1,261 @@
+<template>
+	<ModrinthServersPurchaseModal
+		v-if="customer"
+		ref="purchaseModal"
+		:publishable-key="config.public.stripePublishableKey"
+		:initiate-payment="async (body) => await initiatePayment(body)"
+		:available-products="pyroProducts"
+		:on-error="handleError"
+		:customer="customer"
+		:payment-methods="paymentMethods"
+		:currency="selectedCurrency"
+		:return-url="`${config.public.siteUrl}/servers/manage`"
+		:pings="regionPings"
+		:regions="regions"
+		:refresh-payment-methods="fetchPaymentData"
+		:fetch-stock="fetchStock"
+		:plan-stage="true"
+		:existing-plan="currentPlanFromSubscription"
+		:existing-subscription="subscription || undefined"
+		:on-finalize-no-payment-change="finalizeDowngrade"
+		@hide="
+			() => {
+				subscription = null
+			}
+		"
+	/>
+</template>
+
+<script setup lang="ts">
+import { injectNotificationManager, ModrinthServersPurchaseModal } from '@modrinth/ui'
+import type { ServerPlan } from '@modrinth/ui/src/utils/billing'
+import type { UserSubscription } from '@modrinth/utils'
+import { computed, onMounted, ref } from 'vue'
+
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
+import { products } from '~/generated/state.json'
+
+const { addNotification } = injectNotificationManager()
+
+const config = useRuntimeConfig()
+const purchaseModal = ref<InstanceType<typeof ModrinthServersPurchaseModal> | null>(null)
+const customer = ref<any>(null)
+const paymentMethods = ref<any[]>([])
+const selectedCurrency = ref<string>('USD')
+const regions = ref<any[]>([])
+const regionPings = ref<any[]>([])
+
+const pyroProducts = (products as any[])
+	.filter((p) => p?.metadata?.type === 'pyro')
+	.sort((a, b) => (a?.metadata?.ram ?? 0) - (b?.metadata?.ram ?? 0))
+
+function handleError(err: any) {
+	console.error('Purchase modal error:', err)
+}
+
+async function fetchPaymentData() {
+	try {
+		const [customerData, paymentMethodsData] = await Promise.all([
+			useBaseFetch('billing/customer', { internal: true }),
+			useBaseFetch('billing/payment_methods', { internal: true }),
+		])
+		customer.value = customerData as any
+		paymentMethods.value = paymentMethodsData as any[]
+	} catch (error) {
+		console.error('Error fetching payment data:', error)
+	}
+}
+
+function fetchStock(region: any, request: any) {
+	return useServersFetch(`stock?region=${region.shortcode}`, {
+		method: 'POST',
+		body: {
+			...request,
+		},
+		bypassAuth: true,
+	}).then((res: any) => res.available as number)
+}
+
+function pingRegions() {
+	useServersFetch('regions', {
+		method: 'GET',
+		version: 1,
+		bypassAuth: true,
+	}).then((res: any) => {
+		regions.value = res as any[]
+		;(regions.value as any[]).forEach((region: any) => {
+			runPingTest(region)
+		})
+	})
+}
+
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
+
+function runPingTest(region: any, index = 1) {
+	if (index > 10) {
+		regionPings.value.push({
+			region: region.shortcode,
+			ping: -1,
+		})
+		return
+	}
+
+	const wsUrl = `wss://${region.shortcode}${index}.${region.zone}/pingtest`
+	try {
+		const socket = new WebSocket(wsUrl)
+		const pings: number[] = []
+
+		socket.onopen = () => {
+			for (let i = 0; i < PING_COUNT; i++) {
+				setTimeout(() => {
+					socket.send(String(performance.now()))
+				}, i * PING_INTERVAL)
+			}
+			setTimeout(
+				() => {
+					socket.close()
+					const median = Math.round([...pings].sort((a, b) => a - b)[Math.floor(pings.length / 2)])
+					if (median) {
+						regionPings.value.push({
+							region: region.shortcode,
+							ping: median,
+						})
+					}
+				},
+				PING_COUNT * PING_INTERVAL + MAX_PING_TIME,
+			)
+		}
+
+		socket.onmessage = (event) => {
+			const start = Number(event.data)
+			pings.push(performance.now() - start)
+		}
+
+		socket.onerror = () => {
+			runPingTest(region, index + 1)
+		}
+	} catch {
+		// ignore
+	}
+}
+
+const subscription = ref<UserSubscription | null>(null)
+// Dry run state
+const dryRunResponse = ref<{
+	requires_payment: boolean
+	required_payment_is_proration: boolean
+} | null>(null)
+const pendingDowngradeBody = ref<any | null>(null)
+const currentPlanFromSubscription = computed<ServerPlan | undefined>(() => {
+	return subscription.value
+		? (pyroProducts.find(
+				(p) =>
+					p.prices.filter((price: { id: string }) => price.id === subscription.value?.price_id)
+						.length > 0,
+			) ?? undefined)
+		: undefined
+})
+
+async function initiatePayment(body: any): Promise<any> {
+	if (subscription.value) {
+		const transformedBody = {
+			interval: body.charge?.interval,
+			payment_method: body.id,
+			product: body.charge?.product_id,
+			region: body.metadata?.server_region,
+		}
+
+		try {
+			const dry = await useBaseFetch(`billing/subscription/${subscription.value.id}?dry=true`, {
+				internal: true,
+				method: 'PATCH',
+				body: transformedBody,
+			})
+
+			if (dry && typeof dry === 'object' && 'requires_payment' in dry) {
+				dryRunResponse.value = dry as any
+				pendingDowngradeBody.value = transformedBody
+				if (dry.requires_payment) {
+					return await finalizeImmediate(transformedBody)
+				} else {
+					return null
+				}
+			} else {
+				// Fallback if dry run not supported
+				return await finalizeImmediate(transformedBody)
+			}
+		} catch (e) {
+			console.error('Dry run failed, attempting immediate patch', e)
+			return await finalizeImmediate(transformedBody)
+		}
+	} else {
+		addNotification({
+			title: 'Unable to determine subscription ID.',
+			text: 'Please contact support.',
+			type: 'error',
+		})
+		return Promise.reject(new Error('Unable to determine subscription ID.'))
+	}
+}
+
+async function finalizeImmediate(body: any) {
+	const result = await useBaseFetch(`billing/subscription/${subscription.value?.id}`, {
+		internal: true,
+		method: 'PATCH',
+		body,
+	})
+
+	return result
+}
+
+async function finalizeDowngrade() {
+	if (!subscription.value || !pendingDowngradeBody.value) return
+	try {
+		await finalizeImmediate(pendingDowngradeBody.value)
+		addNotification({
+			title: 'Subscription updated',
+			text: 'Your plan has been downgraded and will take effect next billing cycle.',
+			type: 'success',
+		})
+	} catch (e) {
+		addNotification({
+			title: 'Failed to apply subscription changes',
+			text: 'Please try again or contact support.',
+			type: 'error',
+		})
+		throw e
+	} finally {
+		dryRunResponse.value = null
+		pendingDowngradeBody.value = null
+	}
+}
+
+async function open(id?: string) {
+	if (id) {
+		const subscriptions = (await useBaseFetch(`billing/subscriptions`, {
+			internal: true,
+		})) as any[]
+		for (const sub of subscriptions) {
+			if (sub?.metadata?.id === id) {
+				subscription.value = sub
+				break
+			}
+		}
+	} else {
+		subscription.value = null
+	}
+
+	purchaseModal.value?.show('quarterly')
+}
+
+defineExpose({
+	open,
+})
+
+onMounted(() => {
+	fetchPaymentData()
+	pingRegions()
+})
+</script>
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
new file mode 100644
index 000000000..626580014
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
@@ -0,0 +1,75 @@
+<template>
+	<div
+		id="medal"
+		class="medal-promotion flex w-full flex-row justify-between rounded-xl p-6 shadow-xl"
+	>
+		<div class="overlay"></div>
+		<MedalPromoBackground class="background-pattern shadow-xl" />
+		<div class="z-10 flex flex-col gap-2">
+			<div class="flex items-center gap-2 text-2xl font-semibold text-contrast">
+				<ClockIcon class="clock-glow text-medal-orange size-6" /><span>
+					Try a free
+					<span class="text-medal-orange">3GB server</span> for 5 days powered by
+					<span class="text-medal-orange">Medal</span>
+				</span>
+			</div>
+			<div class="flex items-center">
+				<span class="text-sm text-secondary"
+					>Limited-time offer. No credit card required. Available for US servers.</span
+				>
+			</div>
+		</div>
+		<ButtonStyled color="orange" type="outlined" size="large">
+			<nuxt-link to="https://medal.tv/modrinth" class="z-10 my-auto"
+				>Learn more <ExternalIcon
+			/></nuxt-link>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ClockIcon, ExternalIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
+
+import MedalPromoBackground from '~/assets/images/illustrations/medal_promo_background.svg?component'
+</script>
+
+<style scoped lang="scss">
+.medal-promotion {
+	position: relative;
+	border: 1px solid var(--medal-promotion-bg-orange);
+	overflow: hidden;
+}
+
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--medal-promotion-bg-gradient);
+	z-index: 1;
+	border-radius: inherit;
+}
+
+.background-pattern {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	background-color: var(--medal-promotion-bg);
+	border-radius: inherit;
+	color: var(--color-orange);
+}
+
+.clock-glow {
+	filter: drop-shadow(0 0 72px var(--color-orange)) drop-shadow(0 0 36px var(--color-orange))
+		drop-shadow(0 0 18px var(--color-orange));
+}
+
+.text-medal-orange {
+	color: var(--medal-promotion-text-orange);
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue b/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
new file mode 100644
index 000000000..f3c8939c6
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
@@ -0,0 +1,161 @@
+<template>
+	<div
+		class="medal-promotion flex w-full flex-row items-center justify-between rounded-2xl p-4 shadow-xl"
+	>
+		<div class="overlay"></div>
+		<MedalPromoBackground class="background-pattern scale-[125%]" />
+
+		<div class="z-10 mr-2 flex flex-col gap-1">
+			<Transition
+				enter-from-class="opacity-0 translate-y-1"
+				enter-active-class="transition-all duration-300"
+				enter-to-class="opacity-100 translate-y-0"
+				leave-from-class="opacity-100 translate-y-0"
+				leave-active-class="transition-all duration-150"
+				leave-to-class="opacity-0 -translate-y-1"
+			>
+				<div
+					v-if="expiryDate"
+					class="flex items-center gap-2 whitespace-nowrap font-semibold text-contrast"
+				>
+					<ClockIcon class="clock-glow text-medal-orange size-5 shrink-0" />
+					<span class="w-full text-wrap text-lg">
+						Your <span class="text-medal-orange">Medal</span> powered Modrinth Server will expire in
+						<span class="text-medal-orange font-bold">{{ timeLeftCountdown.days }}</span> days
+						<span class="text-medal-orange font-bold">{{ timeLeftCountdown.hours }}</span> hours
+						<span class="text-medal-orange font-bold">{{ timeLeftCountdown.minutes }}</span> minutes
+						<span class="text-medal-orange font-bold">{{ timeLeftCountdown.seconds }}</span>
+						seconds.
+					</span>
+				</div>
+			</Transition>
+		</div>
+
+		<ButtonStyled color="orange" type="outlined" size="large">
+			<button class="z-10 my-auto" @click="openUpgradeModal"><RocketIcon /> Upgrade</button>
+		</ButtonStyled>
+	</div>
+	<ServersUpgradeModalWrapper ref="upgradeModal" />
+</template>
+
+<script setup lang="ts">
+import { ClockIcon, RocketIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
+import type { UserSubscription } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import dayjsDuration from 'dayjs/plugin/duration'
+import type { ComponentPublicInstance } from 'vue'
+
+import MedalPromoBackground from '~/assets/images/illustrations/medal_promo_background.svg?component'
+
+import ServersUpgradeModalWrapper from '../ServersUpgradeModalWrapper.vue'
+
+dayjs.extend(dayjsDuration)
+
+type UpgradeWrapperRef = ComponentPublicInstance<{ open: (id?: string) => void | Promise<void> }>
+const upgradeModal = ref<UpgradeWrapperRef | null>(null)
+
+const props = defineProps<{
+	serverId?: string
+}>()
+
+const { data: subscriptions } = await useLazyAsyncData(
+	'countdown-subscriptions',
+	() =>
+		useBaseFetch(`billing/subscriptions`, {
+			internal: true,
+		}) as Promise<UserSubscription[]>,
+)
+
+const expiryDate = computed(() => {
+	for (const subscription of subscriptions.value || []) {
+		if (subscription.metadata?.id === props.serverId) {
+			return dayjs(subscription.created).add(5, 'days')
+		}
+	}
+
+	return undefined
+})
+
+function openUpgradeModal() {
+	upgradeModal.value?.open(props.serverId)
+}
+
+const timeLeftCountdown = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+
+function updateCountdown() {
+	if (!expiryDate.value) {
+		timeLeftCountdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+
+	const now = dayjs()
+	const diff = expiryDate.value.diff(now)
+
+	if (diff <= 0) {
+		timeLeftCountdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+
+	const duration = dayjs.duration(diff)
+	timeLeftCountdown.value = {
+		days: duration.days(),
+		hours: duration.hours(),
+		minutes: duration.minutes(),
+		seconds: duration.seconds(),
+	}
+}
+
+updateCountdown()
+
+const intervalId = ref<NodeJS.Timeout | null>(null)
+onMounted(() => {
+	intervalId.value = setInterval(updateCountdown, 1000)
+})
+
+onUnmounted(() => {
+	if (intervalId.value) clearInterval(intervalId.value)
+})
+</script>
+
+<style scoped lang="scss">
+.medal-promotion {
+	position: relative;
+	border: 1px solid var(--medal-promotion-bg-orange);
+	background: inherit; // allows overlay + pattern to take over
+	overflow: hidden;
+}
+
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--medal-promotion-bg-gradient);
+	z-index: 1;
+	border-radius: inherit;
+}
+
+.background-pattern {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	background-color: var(--medal-promotion-bg);
+	border-radius: inherit;
+	color: var(--medal-promotion-text-orange);
+}
+
+.clock-glow {
+	filter: drop-shadow(0 0 72px var(--color-orange)) drop-shadow(0 0 36px var(--color-orange))
+		drop-shadow(0 0 18px var(--color-orange));
+}
+
+.text-medal-orange {
+	color: var(--medal-promotion-text-orange);
+	font-weight: bold;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue b/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
new file mode 100644
index 000000000..81c4b2b40
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalServerListing.vue
@@ -0,0 +1,251 @@
+<template>
+	<div>
+		<div
+			class="medal-promotion flex flex-row items-center overflow-x-hidden rounded-2xl p-4 shadow-xl transition-transform duration-100"
+			:class="status === 'suspended' ? '!rounded-b-none border-b-0 opacity-75' : ''"
+			data-pyro-server-listing
+			:data-pyro-server-listing-id="server_id"
+		>
+			<div class="overlay"></div>
+			<MedalPromoBackground class="background-pattern scale-[125%]" />
+
+			<NuxtLink
+				:to="status === 'suspended' ? '' : `/servers/manage/${props.server_id}`"
+				class="z-10 flex flex-grow flex-row items-center overflow-x-hidden"
+				:class="status !== 'suspended' && 'active:scale-95'"
+			>
+				<MedalServerIcon
+					v-if="status !== 'suspended'"
+					class="border-medal-orange z-10 size-16 shrink-0 rounded-xl border-[1px] border-solid bg-bg text-orange"
+				/>
+				<div
+					v-else
+					class="bg-bg-secondary z-10 flex size-16 shrink-0 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+				>
+					<LockIcon class="size-12 text-secondary" />
+				</div>
+
+				<div class="z-10 ml-4 flex min-w-0 flex-col gap-2.5">
+					<div class="flex flex-row items-center gap-2">
+						<h2 class="m-0 truncate text-xl font-bold text-contrast">{{ name }}</h2>
+						<ChevronRightIcon />
+
+						<span class="truncate">
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.days }}
+							</span>
+							days
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.hours }}
+							</span>
+							hours
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.minutes }}
+							</span>
+							minutes
+							<span class="text-medal-orange">
+								{{ timeLeftCountdown.seconds }}
+							</span>
+							seconds remaining...
+						</span>
+					</div>
+
+					<div
+						v-if="projectData?.title"
+						class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
+					>
+						<Avatar
+							:src="iconUrl"
+							no-shadow
+							style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
+							alt="Server Icon"
+						/>
+						Using {{ projectData?.title || 'Unknown' }}
+					</div>
+
+					<div
+						v-if="isConfiguring"
+						class="text-medal-orange flex min-w-0 items-center gap-2 truncate text-sm font-semibold"
+					>
+						<SparklesIcon class="size-5 shrink-0" /> New server
+					</div>
+					<ServerInfoLabels
+						v-else
+						:server-data="{ game, mc_version, loader, loader_version, net }"
+						:show-game-label="showGameLabel"
+						:show-loader-label="showLoaderLabel"
+						:linked="false"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex"
+					/>
+				</div>
+			</NuxtLink>
+
+			<div class="z-10 ml-auto mr-6">
+				<ButtonStyled color="orange" type="outlined" size="large">
+					<button class="my-auto" @click="handleUpgrade"><RocketIcon /> Upgrade</button>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<div
+			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
+			class="relative -mt-2 flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
+		>
+			<PanelSpinner />
+			Your server's hardware is currently being upgraded and will be back online shortly.
+		</div>
+		<div
+			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
+			class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<PanelErrorIcon class="!size-5" /> Your server has been cancelled. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+		<div
+			v-else-if="status === 'suspended' && suspension_reason"
+			class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<PanelErrorIcon class="!size-5" /> Your server has been suspended: {{ suspension_reason }}.
+				Please update your billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+		<div
+			v-else-if="status === 'suspended'"
+			class="relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
+		>
+			<div class="flex flex-row gap-2">
+				<PanelErrorIcon class="!size-5" /> Your server has been suspended. Please update your
+				billing information or contact Modrinth Support for more information.
+			</div>
+			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ChevronRightIcon, LockIcon, RocketIcon, SparklesIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, CopyCode } from '@modrinth/ui'
+import type { Project, Server } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import dayjsDuration from 'dayjs/plugin/duration'
+
+import MedalPromoBackground from '~/assets/images/illustrations/medal_promo_background.svg?component'
+import MedalServerIcon from '~/assets/images/servers/medal_server_icon.svg?component'
+
+import PanelErrorIcon from '../icons/PanelErrorIcon.vue'
+import PanelSpinner from '../PanelSpinner.vue'
+import ServerInfoLabels from '../ServerInfoLabels.vue'
+
+dayjs.extend(dayjsDuration)
+
+const props = defineProps<Partial<Server>>()
+const emit = defineEmits<{ (e: 'upgrade'): void }>()
+
+const showGameLabel = computed(() => !!props.game)
+const showLoaderLabel = computed(() => !!props.loader)
+
+let projectData: Ref<Project | null>
+if (props.upstream) {
+	const { data } = await useAsyncData<Project>(
+		`server-project-${props.server_id}`,
+		async (): Promise<Project> => {
+			const result = await useBaseFetch(`project/${props.upstream?.project_id}`)
+			return result as Project
+		},
+	)
+	projectData = data
+} else {
+	projectData = ref(null)
+}
+
+const iconUrl = computed(() => projectData.value?.icon_url || undefined)
+const isConfiguring = computed(() => props.flows?.intro)
+
+const timeLeftCountdown = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+const expiryDate = computed(() => (props.medal_expires ? dayjs(props.medal_expires) : null))
+
+function handleUpgrade(event: Event) {
+	event.stopPropagation()
+	emit('upgrade')
+}
+
+function updateCountdown() {
+	if (!expiryDate.value) {
+		timeLeftCountdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+
+	const now = dayjs()
+	const diff = expiryDate.value.diff(now)
+
+	if (diff <= 0) {
+		timeLeftCountdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+
+	const duration = dayjs.duration(diff)
+	timeLeftCountdown.value = {
+		days: duration.days(),
+		hours: duration.hours(),
+		minutes: duration.minutes(),
+		seconds: duration.seconds(),
+	}
+}
+
+watch(expiryDate, () => updateCountdown(), { immediate: true })
+
+const intervalId = ref<NodeJS.Timeout | null>(null)
+onMounted(() => {
+	intervalId.value = setInterval(updateCountdown, 1000)
+})
+
+onUnmounted(() => {
+	if (intervalId.value) clearInterval(intervalId.value)
+})
+</script>
+
+<style scoped lang="scss">
+.medal-promotion {
+	position: relative;
+	border: 1px solid var(--medal-promotion-bg-orange);
+	background: inherit; // allows overlay + pattern to take over
+	overflow: hidden;
+}
+
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--medal-promotion-bg-gradient);
+	z-index: 1;
+	border-radius: inherit;
+}
+
+.background-pattern {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	background-color: var(--medal-promotion-bg);
+	border-radius: inherit;
+	color: var(--medal-promotion-text-orange);
+}
+
+.text-medal-orange {
+	color: var(--medal-promotion-text-orange);
+	font-weight: bold;
+}
+
+.border-medal-orange {
+	border-color: var(--medal-promotion-bg-orange);
+}
+</style>
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 790546494..7d6d48272 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -25,6 +25,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 
 	// Feature toggles
 	projectTypesPrimaryNav: false,
+	enableMedalPromotion: true,
 	hidePlusPromoInUserMenu: false,
 	oldProjectCards: true,
 	newProjectCards: false,
diff --git a/apps/frontend/src/composables/servers/modules/general.ts b/apps/frontend/src/composables/servers/modules/general.ts
index 8ab0bd6a0..0562e38c2 100644
--- a/apps/frontend/src/composables/servers/modules/general.ts
+++ b/apps/frontend/src/composables/servers/modules/general.ts
@@ -34,6 +34,8 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
 	node!: { token: string; instance: string }
 	flows?: { intro?: boolean }
 
+	is_medal?: boolean
+
 	async fetch(): Promise<void> {
 		const data = await useServersFetch<ServerGeneral>(`servers/${this.serverId}`, {}, 'general')
 
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index 507584899..58017c218 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -392,7 +392,7 @@
 				<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
 					<h1 class="m-0 text-lg font-bold">Frequently Asked Questions</h1>
 					<div class="details-hide flex flex-col gap-1">
-						<details pyro-hash="cpus" class="group" :open="$route.hash === '#cpus'">
+						<details nav-hash="cpus" class="group" :open="$route.hash === '#cpus'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -404,7 +404,7 @@
 								GHz, paired with DDR5 memory.
 							</p>
 						</details>
-						<details pyro-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
+						<details nav-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -420,7 +420,7 @@
 							</p>
 						</details>
 
-						<details pyro-hash="ddos" class="group" :open="$route.hash === '#ddos'">
+						<details nav-hash="ddos" class="group" :open="$route.hash === '#ddos'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -433,7 +433,7 @@
 							</p>
 						</details>
 
-						<details pyro-hash="region" class="group" :open="$route.hash === '#region'">
+						<details nav-hash="region" class="group" :open="$route.hash === '#region'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -447,7 +447,7 @@
 							</p>
 						</details>
 
-						<details pyro-hash="storage" class="group" :open="$route.hash === '#storage'">
+						<details nav-hash="storage" class="group" :open="$route.hash === '#storage'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -460,7 +460,7 @@
 							</p>
 						</details>
 
-						<details pyro-hash="performance" class="group" :open="$route.hash === '#performance'">
+						<details nav-hash="performance" class="group" :open="$route.hash === '#performance'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -481,7 +481,7 @@
 							</p>
 						</details>
 
-						<details pyro-hash="prices" class="group" :open="$route.hash === '#prices'">
+						<details nav-hash="prices" class="group" :open="$route.hash === '#prices'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -493,7 +493,7 @@
 							</p>
 						</details>
 
-						<details pyro-hash="versions" class="group" :open="$route.hash === '#versions'">
+						<details nav-hash="versions" class="group" :open="$route.hash === '#versions'">
 							<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
 								<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
 									<RightArrowIcon />
@@ -516,12 +516,13 @@
 		</section>
 
 		<section
-			id="plan"
-			pyro-hash="plan"
 			class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
 		>
 			<div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
-			<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-8 text-center">
+			<div
+				nav-hash="plan"
+				class="mx-auto flex w-full max-w-7xl flex-col items-center gap-8 text-center"
+			>
 				<h1 class="relative m-0 text-4xl leading-[120%] md:text-7xl">
 					There's a server for everyone
 				</h1>
@@ -551,6 +552,8 @@
 					<span v-else></span>
 				</div>
 
+				<MedalPlanPromotion v-if="flags.enableMedalPromotion" />
+
 				<ul class="m-0 flex w-full grid-cols-3 flex-col gap-8 p-0 lg:grid">
 					<ServerPlanSelector
 						:capacity="capacityStatuses?.small?.available"
@@ -651,12 +654,14 @@ import { computed } from 'vue'
 import { useBaseFetch } from '@/composables/fetch.js'
 import OptionGroup from '~/components/ui/OptionGroup.vue'
 import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
+import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'
 
 const { addNotification } = injectNotificationManager()
 const { locale } = useVIntl()
+const flags = useFeatureFlags()
 
 const billingPeriods = ref(['monthly', 'quarterly'])
 const billingPeriod = ref(billingPeriods.value.includes('quarterly') ? 'quarterly' : 'monthly')
@@ -850,8 +855,8 @@ const isAtCapacity = computed(
 
 const scrollToFaq = () => {
 	if (route.hash) {
-		// where pyro-hash === route.hash
-		const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`)
+		// where nav-hash === route.hash
+		const faq = document.querySelector(`[nav-hash="${route.hash.slice(1)}"]`)
 		if (faq) {
 			faq.open = true
 			const top = faq.getBoundingClientRect().top
@@ -923,16 +928,20 @@ const selectProduct = async (product) => {
 	await nextTick()
 
 	if (product === 'custom') {
-		purchaseModal.value?.show(billingPeriod.value, undefined, selectedProjectId.value)
+		purchaseModal.value?.show(billingPeriod.value, null, selectedProjectId.value)
 	} else {
 		purchaseModal.value?.show(billingPeriod.value, selectedProduct.value, selectedProjectId.value)
 	}
 }
 
-const planQuery = () => {
-	if (route.query.plan) {
-		document.getElementById('plan').scrollIntoView()
-		selectProduct(route.query.plan)
+const planQuery = async () => {
+	if ('plan' in route.query) {
+		await nextTick()
+		const planElement = document.querySelector(`[nav-hash="plan"]`)
+		if (planElement) {
+			planElement.scrollIntoView({ behavior: 'smooth' })
+			await selectProduct(route.query.plan)
+		}
 	}
 }
 
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index 0955e91ab..7674be16c 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -116,7 +116,15 @@
 		}"
 	>
 		<div class="flex w-full min-w-0 select-none flex-col items-center gap-6 pt-4 sm:flex-row">
-			<ServerIcon :image="serverData.image" class="drop-shadow-lg sm:drop-shadow-none" />
+			<ServerIcon
+				v-if="!serverData.is_medal"
+				:image="serverData.image"
+				class="drop-shadow-lg sm:drop-shadow-none"
+			/>
+			<MedalServerIcon
+				v-else
+				class="border-medal-orange z-10 size-16 shrink-0 rounded-xl border-[1px] border-solid bg-bg text-orange"
+			/>
 			<div
 				class="flex min-w-0 flex-1 flex-col-reverse items-center gap-2 sm:flex-col sm:items-start"
 			>
@@ -290,6 +298,10 @@
 					</div>
 				</div>
 
+				<div class="mb-4">
+					<MedalServerCountdown :server-id="server.serverId" />
+				</div>
+
 				<div
 					v-if="!isConnected && !isReconnecting && !isLoading"
 					data-pyro-server-ws-error
@@ -382,9 +394,11 @@ import DOMPurify from 'dompurify'
 import { computed, onMounted, onUnmounted, type Reactive, ref } from 'vue'
 
 import { reloadNuxtApp } from '#app'
+import MedalServerIcon from '~/assets/images/servers/medal_server_icon.svg?component'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import PanelErrorIcon from '~/components/ui/servers/icons/PanelErrorIcon.vue'
 import InstallingTicker from '~/components/ui/servers/InstallingTicker.vue'
+import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
 import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
 import PanelSpinner from '~/components/ui/servers/PanelSpinner.vue'
 import ServerIcon from '~/components/ui/servers/ServerIcon.vue'
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
index c711a9303..f8edefd91 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -61,7 +61,7 @@
 					</div>
 				</div>
 
-				<div class="card flex flex-col gap-4">
+				<div v-if="!data.is_medal" class="card flex flex-col gap-4">
 					<label for="server-icon-field" class="flex flex-col gap-2">
 						<span class="text-lg font-bold text-contrast">Server icon</span>
 						<span> This icon will be visible on the Minecraft server list and on Modrinth. </span>
diff --git a/apps/frontend/src/pages/servers/manage/index.vue b/apps/frontend/src/pages/servers/manage/index.vue
index 14ecf856e..91fb4cb98 100644
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -3,6 +3,7 @@
 		data-pyro-server-list-root
 		class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
 	>
+		<ServersUpgradeModalWrapper ref="upgradeModal" />
 		<div
 			v-if="hasError || fetchError"
 			class="mx-auto flex h-full min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4 text-left"
@@ -93,8 +94,17 @@
 				v-if="filteredData.length > 0 || isPollingForNewServers"
 				class="m-0 flex flex-col gap-4 p-0"
 			>
-				<ServerListing v-for="server in filteredData" :key="server.server_id" v-bind="server" />
-				<ServerListingSkeleton v-if="isPollingForNewServers" />
+				<ServerListing
+					v-for="server in filteredData.filter((s) => !s.is_medal)"
+					:key="server.server_id"
+					v-bind="server"
+				/>
+				<MedalServerListing
+					v-for="server in filteredData.filter((s) => s.is_medal)"
+					:key="server.server_id"
+					v-bind="server"
+					@upgrade="openUpgradeModal(server.server_id)"
+				/>
 			</ul>
 			<div v-else class="flex h-full items-center justify-center">
 				<p class="text-contrast">No servers found.</p>
@@ -107,13 +117,16 @@
 import { HammerIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import { ButtonStyled, CopyCode } from '@modrinth/ui'
 import type { ModrinthServersFetchError, Server } from '@modrinth/utils'
+import dayjs from 'dayjs'
 import Fuse from 'fuse.js'
+import type { ComponentPublicInstance } from 'vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { reloadNuxtApp } from '#app'
+import MedalServerListing from '~/components/ui/servers/marketing/MedalServerListing.vue'
 import ServerListing from '~/components/ui/servers/ServerListing.vue'
-import ServerListingSkeleton from '~/components/ui/servers/ServerListingSkeleton.vue'
 import ServerManageEmptyState from '~/components/ui/servers/ServerManageEmptyState.vue'
+import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 definePageMeta({
@@ -137,15 +150,40 @@ const {
 	data: serverResponse,
 	error: fetchError,
 	refresh,
-} = await useAsyncData<ServerResponse>('ServerList', () =>
-	useServersFetch<ServerResponse>('servers'),
-)
+} = await useAsyncData<ServerResponse>('ServerList', async () => {
+	const serverResponse = await useServersFetch<ServerResponse>('servers')
+
+	let subscriptions: any[] | undefined
+
+	for (const server of serverResponse.servers) {
+		if (server.is_medal) {
+			// Inject end date into server object.
+			const serverID = server.server_id
+
+			if (!subscriptions) {
+				subscriptions = (await useBaseFetch(`billing/subscriptions`, {
+					internal: true,
+				})) as any[]
+			}
+
+			for (const subscription of subscriptions) {
+				if (subscription.metadata?.id === serverID) {
+					server.medal_expires = dayjs(subscription.created as string)
+						.add(5, 'days')
+						.toISOString()
+				}
+			}
+		}
+	}
+
+	return serverResponse
+})
 
 watch([fetchError, serverResponse], ([error, response]) => {
 	hasError.value = !!error || !response
 })
 
-const serverList = computed(() => {
+const serverList = computed<Server[]>(() => {
 	if (!serverResponse.value) return []
 	return serverResponse.value.servers
 })
@@ -167,7 +205,7 @@ function introToTop(array: Server[]): Server[] {
 	})
 }
 
-const filteredData = computed(() => {
+const filteredData = computed<Server[]>(() => {
 	if (!searchInput.value.trim()) {
 		return introToTop(serverList.value)
 	}
@@ -207,4 +245,13 @@ onUnmounted(() => {
 		clearInterval(intervalId)
 	}
 })
+
+type ServersUpgradeModalWrapperRef = ComponentPublicInstance<{
+	open: (id: string) => void | Promise<void>
+}>
+
+const upgradeModal = ref<ServersUpgradeModalWrapperRef | null>(null)
+function openUpgradeModal(serverId: string) {
+	upgradeModal.value?.open(serverId)
+}
 </script>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index a24fef48f..ec48f7902 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -1,4 +1,5 @@
 <template>
+	<ServersUpgradeModalWrapper ref="upgradeModal" />
 	<section class="universal-card experimental-styles-within">
 		<h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
 		<p>{{ formatMessage(messages.subscriptionDescription) }}</p>
@@ -51,18 +52,35 @@
 								{{
 									formatPrice(
 										vintl.locale,
-										midasSubscriptionPrice.prices.intervals[midasCharge.subscription_interval],
+										midasSubscriptionPrice.prices.intervals[midasSubscription.interval],
 										midasSubscriptionPrice.currency_code,
 									)
 								}}
 								/
-								{{ midasCharge.subscription_interval }}
+								{{ midasSubscription.interval }}
 							</template>
 							<template v-else>
 								{{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}
 								/ month
 							</template>
 						</span>
+						<!-- Next charge preview for Midas when interval is changing -->
+						<div
+							v-if="
+								midasCharge &&
+								midasCharge.status === 'open' &&
+								midasSubscription &&
+								midasSubscription.interval &&
+								midasCharge.subscription_interval !== midasSubscription.interval
+							"
+							class="-mt-1 flex items-baseline gap-2 text-sm text-secondary"
+						>
+							<span class="opacity-70">Next:</span>
+							<span class="font-semibold text-contrast">
+								{{ formatPrice(vintl.locale, midasCharge.amount, midasCharge.currency_code) }}
+							</span>
+							<span>/{{ midasCharge.subscription_interval.replace('ly', '') }}</span>
+						</div>
 						<template v-if="midasCharge">
 							<span
 								v-if="
@@ -88,12 +106,24 @@
 							<span v-else-if="midasCharge.status === 'cancelled'" class="text-sm text-secondary">
 								Expires {{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
 							</span>
+							<span
+								v-if="
+									midasCharge.status === 'open' &&
+									midasSubscription &&
+									midasSubscription.interval &&
+									midasCharge.subscription_interval !== midasSubscription.interval
+								"
+								class="text-sm text-secondary"
+							>
+								Switches to {{ midasCharge.subscription_interval }} billing on
+								{{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
+							</span>
 						</template>
 
 						<span v-else class="text-sm text-secondary">
 							Or
-							{{ formatPrice(vintl.locale, price.prices.intervals.yearly, price.currency_code) }}
-							/ year (save
+							{{ formatPrice(vintl.locale, price.prices.intervals.yearly, price.currency_code) }} /
+							year (save
 							{{
 								calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly)
 							}}%)!
@@ -168,8 +198,7 @@
 								@click="switchMidasInterval(oppositeInterval)"
 							>
 								<SpinnerIcon v-if="changingInterval" class="animate-spin" />
-								<TransferIcon v-else />
-								{{ changingInterval ? 'Switching' : 'Switch' }} to
+								<TransferIcon v-else /> {{ changingInterval ? 'Switching' : 'Switch' }} to
 								{{ oppositeInterval }}
 							</button>
 						</ButtonStyled>
@@ -207,7 +236,11 @@
 					<div class="flex flex-col gap-4">
 						<ModrinthServersIcon class="flex h-8 w-fit" />
 						<div class="flex flex-col gap-2">
-							<ServerListing v-if="subscription.serverInfo" v-bind="subscription.serverInfo" />
+							<ServerListing
+								v-if="subscription.serverInfo"
+								v-bind="subscription.serverInfo"
+								:pending-change="getPendingChange(subscription)"
+							/>
 							<div v-else class="w-fit">
 								<p>
 									A linked server couldn't be found for this subscription. There are a few possible
@@ -233,9 +266,8 @@
 									<div class="flex items-center gap-2">
 										<CheckCircleIcon class="h-5 w-5 text-brand" />
 										<span>
-											{{ getPyroProduct(subscription)?.metadata?.cpu / 2 }}
-											Shared CPUs (Bursts up to
-											{{ getPyroProduct(subscription)?.metadata?.cpu }} CPUs)
+											{{ getPyroProduct(subscription)?.metadata?.cpu / 2 }} Shared CPUs (Bursts up
+											to {{ getPyroProduct(subscription)?.metadata?.cpu }} CPUs)
 										</span>
 									</div>
 									<div class="flex items-center gap-2">
@@ -285,16 +317,60 @@
 											</span>
 											<span>/{{ subscription.interval.replace('ly', '') }}</span>
 										</div>
+										<div
+											v-if="
+												getPyroCharge(subscription) &&
+												getPyroCharge(subscription).status === 'open' &&
+												((getPyroCharge(subscription).price_id &&
+													getPyroCharge(subscription).price_id !== subscription.price_id) ||
+													(getPyroCharge(subscription).subscription_interval &&
+														getPyroCharge(subscription).subscription_interval !==
+															subscription.interval))
+											"
+											class="-mt-1 flex items-baseline gap-2 text-sm text-secondary"
+										>
+											<span class="opacity-70">Next:</span>
+											<span class="font-semibold text-contrast">
+												{{
+													formatPrice(
+														vintl.locale,
+														getPyroCharge(subscription).amount,
+														getPyroCharge(subscription).currency_code,
+													)
+												}}
+											</span>
+											<span>
+												/
+												{{
+													(
+														getPyroCharge(subscription).subscription_interval ||
+														subscription.interval
+													).replace('ly', '')
+												}}
+											</span>
+										</div>
 										<div v-if="getPyroCharge(subscription)" class="mb-4 flex flex-col items-end">
 											<span class="text-sm text-secondary">
-												Since
-												{{ $dayjs(subscription.created).format('MMMM D, YYYY') }}
+												Since {{ $dayjs(subscription.created).format('MMMM D, YYYY') }}
 											</span>
 											<span
 												v-if="getPyroCharge(subscription).status === 'open'"
 												class="text-sm text-secondary"
 											>
-												Renews
+												Renews {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+											</span>
+											<span
+												v-if="
+													getPyroCharge(subscription).status === 'open' &&
+													getPyroCharge(subscription).subscription_interval &&
+													getPyroCharge(subscription).subscription_interval !==
+														subscription.interval
+												"
+												class="text-sm text-secondary"
+											>
+												Switches to
+												{{ getPyroCharge(subscription).subscription_interval }}
+												billing on
 												{{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
 											</span>
 											<span
@@ -308,8 +384,7 @@
 												v-else-if="getPyroCharge(subscription).status === 'cancelled'"
 												class="text-sm text-secondary"
 											>
-												Expires
-												{{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+												Expires {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
 											</span>
 											<span
 												v-else-if="getPyroCharge(subscription).status === 'failed'"
@@ -404,37 +479,6 @@
 			:payment-methods="paymentMethods"
 			:return-url="`${config.public.siteUrl}/settings/billing`"
 		/>
-		<PurchaseModal
-			ref="pyroPurchaseModal"
-			:product="upgradeProducts"
-			:country="country"
-			custom-server
-			:existing-subscription="currentSubscription"
-			:existing-plan="currentProduct"
-			:publishable-key="config.public.stripePublishableKey"
-			:send-billing-request="
-				async (body) =>
-					await useBaseFetch(`billing/subscription/${currentSubscription.id}`, {
-						internal: true,
-						method: `PATCH`,
-						body: body,
-					})
-			"
-			:renewal-date="currentSubRenewalDate"
-			:on-error="
-				(err) =>
-					addNotification({
-						title: 'An error occurred',
-						type: 'error',
-						text: err.message ?? (err.data ? err.data.description : err),
-					})
-			"
-			:fetch-capacity-statuses="fetchCapacityStatuses"
-			:customer="customer"
-			:payment-methods="paymentMethods"
-			:return-url="`${config.public.siteUrl}/servers/manage`"
-			:server-name="`${auth?.user?.username}'s server`"
-		/>
 		<AddPaymentMethodModal
 			ref="addPaymentMethodModal"
 			:publishable-key="config.public.stripePublishableKey"
@@ -588,6 +632,7 @@ import { computed, ref } from 'vue'
 import { useBaseFetch } from '@/composables/fetch.js'
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
 import ServerListing from '~/components/ui/servers/ServerListing.vue'
+import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'
 
@@ -903,6 +948,12 @@ const getPyroProduct = (subscription) => {
 	return productsData.value.find((p) => p.prices?.some((x) => x.id === subscription.price_id))
 }
 
+// Get product by a price ID (useful for pending next-charge changes)
+const getProductFromPriceId = (priceId) => {
+	if (!priceId || !productsData.value) return null
+	return productsData.value.find((p) => p.prices?.some((x) => x.id === priceId))
+}
+
 const getPyroCharge = (subscription) => {
 	if (!subscription || !charges.value) return null
 	return charges.value.find(
@@ -931,76 +982,18 @@ const getProductPrice = (product, interval) => {
 	)
 }
 
-const modalCancel = ref(null)
+const getPlanChangeVerb = (currentProduct, nextProduct) => {
+	const curRam = currentProduct?.metadata?.ram ?? 0
+	const nextRam = nextProduct?.metadata?.ram ?? 0
 
-const pyroPurchaseModal = ref()
-const currentSubscription = ref(null)
-const currentProduct = ref(null)
-const upgradeProducts = ref([])
-upgradeProducts.value.metadata = { type: 'pyro' }
-
-const currentSubRenewalDate = ref()
-
-const showPyroUpgradeModal = async (subscription) => {
-	currentSubscription.value = subscription
-	currentSubRenewalDate.value = getPyroCharge(subscription).due
-	currentProduct.value = getPyroProduct(subscription)
-	upgradeProducts.value = products.filter(
-		(p) =>
-			p.metadata.type === 'pyro' &&
-			(!currentProduct.value || p.metadata.ram > currentProduct.value.metadata.ram),
-	)
-	upgradeProducts.value.metadata = { type: 'pyro' }
-
-	await nextTick()
-
-	if (!currentProduct.value) {
-		console.error('Could not find product for current subscription')
-		addNotification({
-			title: 'An error occurred',
-			text: 'Could not find product for current subscription',
-			type: 'error',
-		})
-		return
-	}
-
-	if (!pyroPurchaseModal.value) {
-		console.error('pyroPurchaseModal ref is undefined')
-		return
-	}
-
-	pyroPurchaseModal.value.show()
+	return nextRam < curRam ? 'downgrade' : 'upgrade'
 }
 
-async function fetchCapacityStatuses(serverId, product) {
-	if (product) {
-		try {
-			return {
-				custom: await useServersFetch(`servers/${serverId}/upgrade-stock`, {
-					method: 'POST',
-					body: {
-						cpu: product.metadata.cpu,
-						memory_mb: product.metadata.ram,
-						swap_mb: product.metadata.swap,
-						storage_mb: product.metadata.storage,
-					},
-				}),
-			}
-		} catch (error) {
-			console.error('Error checking server capacities:', error)
-			addNotification({
-				title: 'Error checking server capacities',
-				text: error,
-				type: 'error',
-			})
-			return {
-				custom: { available: 0 },
-				small: { available: 0 },
-				medium: { available: 0 },
-				large: { available: 0 },
-			}
-		}
-	}
+const modalCancel = ref(null)
+
+const upgradeModal = ref(null)
+const showPyroUpgradeModal = (subscription) => {
+	upgradeModal.value?.open(subscription?.metadata?.id)
 }
 
 const resubscribePyro = async (subscriptionId, wasSuspended) => {
@@ -1093,6 +1086,7 @@ function showCancellationSurvey(subscription) {
 			window.Tally.openPopup(formId, popupOptions)
 		} else {
 			console.warn('Tally script not yet loaded')
+			cancelSubscription(subscription.id, true)
 		}
 	} catch (e) {
 		console.error('Error opening Tally popup:', e)
@@ -1107,4 +1101,50 @@ useHead({
 		},
 	],
 })
+
+const getPendingChange = (subscription) => {
+	const charge = getPyroCharge(subscription)
+	if (!charge || charge.status !== 'open') return null
+
+	const nextProduct = getProductFromPriceId(charge.price_id)
+	if (!nextProduct || charge.price_id === subscription.price_id) {
+		// Not a plan change, but interval could change
+		if (charge.subscription_interval && charge.subscription_interval !== subscription.interval) {
+			return {
+				planSize: getProductSize(getPyroProduct(subscription)),
+				cpu: getPyroProduct(subscription)?.metadata?.cpu / 2,
+				cpuBurst: getPyroProduct(subscription)?.metadata?.cpu,
+				ramGb: (getPyroProduct(subscription)?.metadata?.ram || 0) / 1024,
+				swapGb: (getPyroProduct(subscription)?.metadata?.swap || 0) / 1024 || undefined,
+				storageGb: (getPyroProduct(subscription)?.metadata?.storage || 0) / 1024 || undefined,
+				date: charge.due,
+				intervalChange: charge.subscription_interval,
+				verb: 'Switches',
+			}
+		}
+		return null
+	}
+
+	const curProduct = getPyroProduct(subscription)
+	const verb = getPlanChangeVerb(curProduct, nextProduct)
+	const cpu = nextProduct?.metadata?.cpu ?? 0
+	const ram = nextProduct?.metadata?.ram ?? 0
+	const swap = nextProduct?.metadata?.swap ?? 0
+	const storage = nextProduct?.metadata?.storage ?? 0
+
+	return {
+		planSize: getProductSize(nextProduct),
+		cpu: cpu / 2,
+		cpuBurst: cpu,
+		ramGb: ram / 1024,
+		swapGb: swap ? swap / 1024 : undefined,
+		storageGb: storage ? storage / 1024 : undefined,
+		date: charge.due,
+		intervalChange:
+			charge.subscription_interval && charge.subscription_interval !== subscription.interval
+				? charge.subscription_interval
+				: null,
+		verb,
+	}
+}
 </script>
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index f0f66b100..4adb0cf0e 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -33,6 +33,7 @@ import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _ClearIcon from './icons/clear.svg?component'
 import _ClientIcon from './icons/client.svg?component'
 import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
+import _ClockIcon from './icons/clock.svg?component'
 import _CloudIcon from './icons/cloud.svg?component'
 import _CodeIcon from './icons/code.svg?component'
 import _CoffeeIcon from './icons/coffee.svg?component'
@@ -139,6 +140,7 @@ import _ReplyIcon from './icons/reply.svg?component'
 import _ReportIcon from './icons/report.svg?component'
 import _RestoreIcon from './icons/restore.svg?component'
 import _RightArrowIcon from './icons/right-arrow.svg?component'
+import _RocketIcon from './icons/rocket.svg?component'
 import _RotateClockwiseIcon from './icons/rotate-clockwise.svg?component'
 import _RotateCounterClockwiseIcon from './icons/rotate-counter-clockwise.svg?component'
 import _RssIcon from './icons/rss.svg?component'
@@ -229,6 +231,7 @@ export const ChevronRightIcon = _ChevronRightIcon
 export const ClearIcon = _ClearIcon
 export const ClientIcon = _ClientIcon
 export const ClipboardCopyIcon = _ClipboardCopyIcon
+export const ClockIcon = _ClockIcon
 export const CloudIcon = _CloudIcon
 export const CodeIcon = _CodeIcon
 export const CoffeeIcon = _CoffeeIcon
@@ -335,6 +338,7 @@ export const ReplyIcon = _ReplyIcon
 export const ReportIcon = _ReportIcon
 export const RestoreIcon = _RestoreIcon
 export const RightArrowIcon = _RightArrowIcon
+export const RocketIcon = _RocketIcon
 export const RotateClockwiseIcon = _RotateClockwiseIcon
 export const RotateCounterClockwiseIcon = _RotateCounterClockwiseIcon
 export const RssIcon = _RssIcon
diff --git a/packages/assets/icons/clock.svg b/packages/assets/icons/clock.svg
new file mode 100644
index 000000000..98c2fac7c
--- /dev/null
+++ b/packages/assets/icons/clock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-icon lucide-clock"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/rocket.svg b/packages/assets/icons/rocket.svg
new file mode 100644
index 000000000..df6c40f36
--- /dev/null
+++ b/packages/assets/icons/rocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-icon lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
\ No newline at end of file
diff --git a/packages/ui/src/components/base/OptionGroup.vue b/packages/ui/src/components/base/OptionGroup.vue
new file mode 100644
index 000000000..556e2cdbb
--- /dev/null
+++ b/packages/ui/src/components/base/OptionGroup.vue
@@ -0,0 +1,128 @@
+<template>
+	<nav
+		ref="scrollContainer"
+		class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+	>
+		<button
+			v-for="(option, index) in options"
+			:key="`option-group-${index}`"
+			ref="optionButtons"
+			class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
+			:class="{
+				'text-button-textSelected': modelValue === option,
+				'text-primary': modelValue !== option,
+			}"
+			@click="setOption(option)"
+		>
+			<slot :option="option" :selected="modelValue === option" />
+		</button>
+		<div
+			class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
+			:style="{
+				left: sliderLeftPx,
+				top: sliderTopPx,
+				right: sliderRightPx,
+				bottom: sliderBottomPx,
+				opacity: initialized ? 1 : 0,
+			}"
+			aria-hidden="true"
+		></div>
+	</nav>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, onMounted, ref } from 'vue'
+
+const modelValue = defineModel<T>({ required: true })
+
+const props = defineProps<{
+	options: T[]
+}>()
+
+const scrollContainer = ref<HTMLElement | null>(null)
+
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
+
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
+
+const optionButtons = ref()
+
+const initialized = ref(false)
+
+function setOption(option: T) {
+	modelValue.value = option
+}
+
+watch(modelValue, () => {
+	startAnimation(props.options.indexOf(modelValue.value))
+})
+
+function startAnimation(index: number) {
+	const el = optionButtons.value[index]
+
+	if (!el || !el.offsetParent) return
+
+	const newValues = {
+		left: el.offsetLeft,
+		top: el.offsetTop,
+		right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
+		bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
+	}
+
+	if (sliderLeft.value === 4 && sliderRight.value === 4) {
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
+	} else {
+		const delay = 200
+
+		if (newValues.left < sliderLeft.value) {
+			sliderLeft.value = newValues.left
+			setTimeout(() => {
+				sliderRight.value = newValues.right
+			}, delay)
+		} else {
+			sliderRight.value = newValues.right
+			setTimeout(() => {
+				sliderLeft.value = newValues.left
+			}, delay)
+		}
+
+		if (newValues.top < sliderTop.value) {
+			sliderTop.value = newValues.top
+			setTimeout(() => {
+				sliderBottom.value = newValues.bottom
+			}, delay)
+		} else {
+			sliderBottom.value = newValues.bottom
+			setTimeout(() => {
+				sliderTop.value = newValues.top
+			}, delay)
+		}
+	}
+	initialized.value = true
+}
+
+onMounted(() => {
+	startAnimation(props.options.indexOf(modelValue.value))
+})
+</script>
+
+<style scoped>
+.navtabs-transition {
+	transition:
+		all 150ms cubic-bezier(0.4, 0, 0.2, 1),
+		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+}
+
+.card-shadow {
+	box-shadow: var(--shadow-card);
+}
+</style>
diff --git a/packages/ui/src/components/billing/ModalBasedServerPlan.vue b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
new file mode 100644
index 000000000..5df813207
--- /dev/null
+++ b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import { formatPrice } from '@modrinth/utils'
+import { type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { Menu } from 'floating-vue'
+import { computed, inject, type Ref } from 'vue'
+
+import { monthsInInterval, type ServerBillingInterval, type ServerPlan } from '../../utils/billing'
+import ServersSpecs from './ServersSpecs.vue'
+
+const props = withDefaults(
+	defineProps<{
+		plan: ServerPlan
+		title: MessageDescriptor
+		description: MessageDescriptor
+		buttonColor?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+		mostPopular?: boolean
+		selected?: boolean
+	}>(),
+	{
+		buttonColor: 'standard',
+		mostPopular: false,
+		selected: false,
+	},
+)
+
+const emit = defineEmits<{
+	(e: 'select', plan: ServerPlan): void
+}>()
+
+const { formatMessage, locale } = useVIntl()
+
+// TODO: Use DI framework when merged.
+const selectedInterval = inject<Ref<ServerBillingInterval>>('selectedInterval')
+const currency = inject<string>('currency')
+
+const perMonth = computed(() => {
+	if (!props.plan || !currency || !selectedInterval?.value) return undefined
+	const total = props.plan.prices?.find((x) => x.currency_code === currency)?.prices?.intervals?.[
+		selectedInterval.value
+	]
+	if (!total) return undefined
+	return total / monthsInInterval[selectedInterval.value]
+})
+
+const mostPopularStyle = computed(() => {
+	if (!props.mostPopular) return undefined
+	const style: Record<string, string> = {
+		backgroundImage:
+			'radial-gradient(86.12% 101.64% at 95.97% 94.07%, rgba(27, 217, 106, 0.23) 0%, rgba(14, 115, 56, 0.2) 100%)',
+		boxShadow: '0px 12px 38.1px rgba(27, 217, 106, 0.13)',
+	}
+
+	if (!props.selected) {
+		style.borderColor = 'rgba(12, 107, 52, 0.55)'
+	}
+
+	return style
+})
+</script>
+
+<template>
+	<div
+		class="rounded-2xl p-4 font-semibold transition-all duration-300 experimental-styles-within h-full border-2 border-solid cursor-pointer select-none"
+		:class="{
+			'bg-brand-highlight border-brand': selected,
+			'bg-button-bg border-transparent': !selected,
+			'!bg-bg': mostPopular,
+		}"
+		:style="mostPopularStyle"
+		role="button"
+		tabindex="0"
+		:aria-pressed="selected"
+		@click="emit('select', plan)"
+		@keydown.enter.prevent="emit('select', plan)"
+		@keydown.space.prevent="emit('select', plan)"
+	>
+		<div class="flex h-full flex-col justify-between gap-2">
+			<div class="flex flex-col">
+				<div class="flex items-center justify-between">
+					<span class="text-2xl font-semibold text-contrast">
+						{{ formatMessage(title) }}
+					</span>
+					<div
+						v-if="mostPopular"
+						class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+					>
+						Most Popular
+					</div>
+				</div>
+				<span class="m-0 text-lg font-bold text-contrast">
+					{{ formatPrice(locale, perMonth, currency, true) }}
+					<span class="text-sm font-semibold text-secondary">
+						/ month{{ selectedInterval !== 'monthly' ? `, billed ${selectedInterval}` : '' }}
+					</span>
+				</span>
+			</div>
+
+			<span class="text-sm">{{ formatMessage(description) }}</span>
+
+			<div class="flex flex-col gap-2">
+				<Menu
+					placement="bottom-start"
+					:triggers="['hover', 'focus']"
+					:auto-hide="true"
+					:delay="{ show: 100, hide: 120 }"
+					:distance="8"
+				>
+					<template #default="{ shown }">
+						<div
+							class="flex justify-between text-sm cursor-default select-none outline-none"
+							role="button"
+							tabindex="0"
+							aria-haspopup="true"
+							:aria-expanded="shown"
+						>
+							<span>View plan details</span>
+							<DropdownIcon
+								class="ml-auto my-auto size-4 transition-transform duration-300 shrink-0"
+								:class="{ 'rotate-180': shown }"
+							/>
+						</div>
+					</template>
+
+					<template #popper>
+						<div class="w-72 rounded-md border border-contrast/10 bg-bg p-3 shadow-lg">
+							<ServersSpecs
+								:ram="plan.metadata.ram!"
+								:storage="plan.metadata.storage!"
+								:cpus="plan.metadata.cpu!"
+							/>
+						</div>
+					</template>
+				</Menu>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index ed0b89a5f..a9662ea12 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -7,6 +7,7 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
+import type { UserSubscription } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
@@ -26,6 +27,7 @@ import type {
 import { ButtonStyled } from '../index'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import NewModal from '../modal/NewModal.vue'
+import PlanSelector from './ServersPurchase0Plan.vue'
 import RegionSelector from './ServersPurchase1Region.vue'
 import PaymentMethodSelector from './ServersPurchase2PaymentMethod.vue'
 import ConfirmPurchase from './ServersPurchase3Review.vue'
@@ -46,12 +48,16 @@ const props = defineProps<{
 	pings: RegionPing[]
 	regions: ServerRegion[]
 	availableProducts: ServerPlan[]
+	planStage?: boolean
+	existingPlan?: ServerPlan
+	existingSubscription?: UserSubscription
 	refreshPaymentMethods: () => Promise<void>
 	fetchStock: (region: ServerRegion, request: ServerStockRequest) => Promise<number>
 	initiatePayment: (
 		body: CreatePaymentIntentRequest | UpdatePaymentIntentRequest,
-	) => Promise<UpdatePaymentIntentResponse | CreatePaymentIntentResponse>
+	) => Promise<UpdatePaymentIntentResponse | CreatePaymentIntentResponse | null>
 	onError: (err: Error) => void
+	onFinalizeNoPaymentChange?: () => Promise<void>
 }>()
 
 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
@@ -78,6 +84,7 @@ const {
 	hasPaymentMethod,
 	submitPayment,
 	completingPurchase,
+	noPaymentRequired,
 } = useStripe(
 	props.publishableKey,
 	props.customer,
@@ -95,11 +102,14 @@ const customServer = ref<boolean>(false)
 const acceptedEula = ref<boolean>(false)
 const skipPaymentMethods = ref<boolean>(true)
 
-type Step = 'region' | 'payment' | 'review'
+type Step = 'plan' | 'region' | 'payment' | 'review'
 
-const steps: Step[] = ['region', 'payment', 'review']
+const steps: Step[] = props.planStage
+	? (['plan', 'region', 'payment', 'review'] as Step[])
+	: (['region', 'payment', 'review'] as Step[])
 
 const titles: Record<Step, MessageDescriptor> = {
+	plan: defineMessage({ id: 'servers.purchase.step.plan.title', defaultMessage: 'Plan' }),
 	region: defineMessage({ id: 'servers.purchase.step.region.title', defaultMessage: 'Region' }),
 	payment: defineMessage({
 		id: 'servers.purchase.step.payment.title',
@@ -132,12 +142,26 @@ const nextStep = computed(() =>
 
 const canProceed = computed(() => {
 	switch (currentStep.value) {
+		case 'plan':
+			console.log('Plan step:', {
+				customServer: customServer.value,
+				selectedPlan: selectedPlan.value,
+				existingPlan: props.existingPlan,
+			})
+			return (
+				customServer.value ||
+				(!!selectedPlan.value &&
+					(!props.existingPlan || selectedPlan.value.id !== props.existingPlan.id))
+			)
 		case 'region':
 			return selectedRegion.value && selectedPlan.value && selectedInterval.value
 		case 'payment':
 			return selectedPaymentMethod.value || !loadingElements.value
 		case 'review':
-			return acceptedEula.value && hasPaymentMethod.value && !completingPurchase.value
+			return (
+				(noPaymentRequired.value || (acceptedEula.value && hasPaymentMethod.value)) &&
+				!completingPurchase.value
+			)
 		default:
 			return false
 	}
@@ -145,6 +169,8 @@ const canProceed = computed(() => {
 
 async function beforeProceed(step: string) {
 	switch (step) {
+		case 'plan':
+			return true
 		case 'region':
 			return true
 		case 'payment':
@@ -160,6 +186,9 @@ async function beforeProceed(step: string) {
 			}
 			return true
 		case 'review':
+			if (noPaymentRequired.value) {
+				return true
+			}
 			if (selectedPaymentMethod.value) {
 				return true
 			} else {
@@ -200,12 +229,31 @@ async function setStep(step: Step | undefined, skipValidation = false) {
 }
 
 watch(selectedPlan, () => {
-	console.log(selectedPlan.value)
+	if (currentStep.value === 'plan') {
+		customServer.value = !selectedPlan.value
+	}
+})
+
+const defaultPlan = computed<ServerPlan | undefined>(() => {
+	return (
+		props.availableProducts.find((p) => p?.metadata?.type === 'pyro' && p.metadata.ram === 6144) ??
+		props.availableProducts.find((p) => p?.metadata?.type === 'pyro') ??
+		props.availableProducts[0]
+	)
 })
 
 function begin(interval: ServerBillingInterval, plan?: ServerPlan, project?: string) {
 	loading.value = false
-	selectedPlan.value = plan
+
+	if (plan === null) {
+		// Explicitly open in custom mode
+		selectedPlan.value = undefined
+		customServer.value = true
+	} else {
+		selectedPlan.value = plan ?? defaultPlan.value
+		customServer.value = !selectedPlan.value
+	}
+
 	selectedInterval.value = interval
 	customServer.value = !selectedPlan.value
 	selectedPaymentMethod.value = undefined
@@ -218,16 +266,42 @@ function begin(interval: ServerBillingInterval, plan?: ServerPlan, project?: str
 defineExpose({
 	show: begin,
 })
+
+defineEmits<{
+	(e: 'hide'): void
+}>()
+
+function handleChooseCustom() {
+	customServer.value = true
+	selectedPlan.value = undefined
+}
+
+// When the user explicitly wants to change or add a payment method from Review
+// we must disable the auto-skip behavior, clear any selected method, and
+// navigate to the Payment step so Stripe Elements can mount.
+async function changePaymentMethod() {
+	skipPaymentMethods.value = false
+	selectedPaymentMethod.value = undefined
+	await setStep('payment', true)
+}
+
+function goToBreadcrumbStep(id: string) {
+	if (id === 'payment') {
+		return changePaymentMethod()
+	}
+
+	return setStep(id as Step, true)
+}
 </script>
 <template>
-	<NewModal ref="modal">
+	<NewModal ref="modal" @hide="$emit('hide')">
 		<template #title>
 			<div class="flex items-center gap-1 font-bold text-secondary">
 				<template v-for="(title, id, index) in titles" :key="id">
 					<button
 						v-if="index < currentStepIndex"
 						class="bg-transparent active:scale-95 font-bold text-secondary p-0"
-						@click="setStep(id, true)"
+						@click="goToBreadcrumbStep(id as string)"
 					>
 						{{ formatMessage(title) }}
 					</button>
@@ -248,8 +322,17 @@ defineExpose({
 			</div>
 		</template>
 		<div class="w-[40rem] max-w-full">
+			<PlanSelector
+				v-if="currentStep === 'plan'"
+				v-model:plan="selectedPlan"
+				v-model:interval="selectedInterval"
+				:existing-plan="existingPlan"
+				:available-products="availableProducts"
+				:currency="currency"
+				@choose-custom="handleChooseCustom"
+			/>
 			<RegionSelector
-				v-if="currentStep === 'region'"
+				v-else-if="currentStep === 'region'"
 				v-model:region="selectedRegion"
 				v-model:plan="selectedPlan"
 				:regions="regions"
@@ -271,7 +354,7 @@ defineExpose({
 			<ConfirmPurchase
 				v-else-if="
 					currentStep === 'review' &&
-					hasPaymentMethod &&
+					(hasPaymentMethod || noPaymentRequired) &&
 					currentRegion &&
 					selectedInterval &&
 					selectedPlan
@@ -284,14 +367,13 @@ defineExpose({
 				:ping="currentPing"
 				:loading="paymentMethodLoading"
 				:selected-payment-method="selectedPaymentMethod || inputtedPaymentMethod"
+				:has-payment-method="hasPaymentMethod"
 				:tax="tax"
 				:total="total"
-				@change-payment-method="
-					() => {
-						skipPaymentMethods = false
-						setStep('payment', true)
-					}
-				"
+				:no-payment-required="noPaymentRequired"
+				:existing-plan="existingPlan"
+				:existing-subscription="existingSubscription"
+				@change-payment-method="changePaymentMethod"
 				@reload-payment-intent="reloadPaymentIntent"
 			/>
 			<div v-else>Something went wrong</div>
@@ -329,17 +411,33 @@ defineExpose({
 			<ButtonStyled color="brand">
 				<button
 					v-tooltip="
-						currentStep === 'review' && !acceptedEula
+						currentStep === 'review' && !acceptedEula && !noPaymentRequired
 							? 'You must accept the Minecraft EULA to proceed.'
 							: undefined
 					"
 					:disabled="!canProceed"
-					@click="setStep(nextStep)"
+					@click="
+						noPaymentRequired && currentStep === 'review'
+							? (async () => {
+									if (props.onFinalizeNoPaymentChange) {
+										try {
+											await props.onFinalizeNoPaymentChange()
+										} catch (e) {
+											return
+										}
+									}
+									modal?.hide()
+								})()
+							: setStep(nextStep)
+					"
 				>
 					<template v-if="currentStep === 'review'">
-						<SpinnerIcon v-if="completingPurchase" class="animate-spin" />
-						<CheckCircleIcon v-else />
-						Subscribe
+						<template v-if="noPaymentRequired"><CheckCircleIcon /> Confirm Change</template>
+						<template v-else>
+							<SpinnerIcon v-if="completingPurchase" class="animate-spin" />
+							<CheckCircleIcon v-else />
+							Subscribe
+						</template>
 					</template>
 					<template v-else>
 						{{ formatMessage(commonMessages.nextButton) }} <RightArrowIcon />
diff --git a/packages/ui/src/components/billing/ServersPurchase0Plan.vue b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
new file mode 100644
index 000000000..1b4269f98
--- /dev/null
+++ b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { formatPrice } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, provide } from 'vue'
+
+import { monthsInInterval, type ServerBillingInterval, type ServerPlan } from '../../utils/billing'
+import OptionGroup from '../base/OptionGroup.vue'
+import ModalBasedServerPlan from './ModalBasedServerPlan.vue'
+
+const { formatMessage, locale } = useVIntl()
+
+const props = defineProps<{
+	availableProducts: ServerPlan[]
+	currency: string
+	existingPlan?: ServerPlan
+}>()
+
+const availableBillingIntervals = ['monthly', 'quarterly']
+
+const selectedPlan = defineModel<ServerPlan>('plan')
+const selectedInterval = defineModel<ServerBillingInterval>('interval')
+const emit = defineEmits<{
+	(e: 'choose-custom'): void
+}>()
+
+const messages = defineMessages({
+	title: {
+		id: 'servers.purchase.step.plan.prompt',
+		defaultMessage: 'Choose a plan',
+	},
+	subtitle: {
+		id: 'servers.purchase.step.plan.subtitle',
+		defaultMessage: 'Pick the amount of RAM and specs that fit your needs.',
+	},
+	selectPlan: {
+		id: 'servers.purchase.step.plan.select',
+		defaultMessage: 'Select Plan',
+	},
+	getStarted: {
+		id: 'servers.purchase.step.plan.get-started',
+		defaultMessage: 'Get started',
+	},
+	billed: {
+		id: 'servers.purchase.step.plan.billed',
+		defaultMessage: 'billed {interval}',
+	},
+	smallDesc: {
+		id: 'servers.purchase.step.plan.small.desc',
+		defaultMessage: 'Perfect for 1–5 friends with a few light mods.',
+	},
+	mediumDesc: {
+		id: 'servers.purchase.step.plan.medium.desc',
+		defaultMessage: 'Great for 6–15 players and multiple mods.',
+	},
+	largeDesc: {
+		id: 'servers.purchase.step.plan.large.desc',
+		defaultMessage: 'Ideal for 15–25 players, modpacks, or heavy modding.',
+	},
+	customDesc: {
+		id: 'servers.purchase.step.plan.custom.desc',
+		defaultMessage: 'Pick a customized plan with just the specs you need.',
+	},
+	mostPopular: {
+		id: 'servers.purchase.step.plan.most-popular',
+		defaultMessage: 'Most Popular',
+	},
+})
+
+const isSameAsExistingPlan = computed(() => {
+	return !!(
+		props.existingPlan &&
+		selectedPlan.value &&
+		props.existingPlan.id === selectedPlan.value.id
+	)
+})
+
+const plansByRam = computed(() => {
+	const byName: Record<'small' | 'medium' | 'large', ServerPlan | undefined> = {
+		small: undefined,
+		medium: undefined,
+		large: undefined,
+	}
+	for (const p of props.availableProducts) {
+		if (p?.metadata?.type !== 'pyro') continue
+		if (p.metadata.ram === 4096) byName.small = p
+		else if (p.metadata.ram === 6144) byName.medium = p
+		else if (p.metadata.ram === 8192) byName.large = p
+	}
+	return byName
+})
+
+function handleCustomPlan() {
+	emit('choose-custom')
+}
+
+function pricePerMonth(plan?: ServerPlan) {
+	if (!plan) return undefined
+	const total = plan.prices?.find((x) => x.currency_code === props.currency)?.prices?.intervals?.[
+		selectedInterval.value!
+	]
+	if (!total) return undefined
+	return total / monthsInInterval[selectedInterval.value!]
+}
+
+const customPricePerGb = computed(() => {
+	// Calculate lowest price per GB among products for current interval
+	let min: number | undefined
+	for (const p of props.availableProducts) {
+		const perMonth = pricePerMonth(p)
+		const ramGb = (p?.metadata?.ram ?? 0) / 1024
+		if (perMonth && ramGb > 0) {
+			const perGb = perMonth / ramGb
+			if (min === undefined || perGb < min) min = perGb
+		}
+	}
+	return min
+})
+
+const customStartingPrice = computed(() => {
+	let min: number | undefined
+	for (const p of props.availableProducts) {
+		const perMonth = pricePerMonth(p)
+		if (perMonth && (min === undefined || perMonth < min)) min = perMonth
+	}
+	return min
+})
+
+provide('currency', props.currency)
+provide('selectedInterval', selectedInterval)
+</script>
+
+<template>
+	<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-3 mb-5 !mt-0">
+		<span></span>
+		<OptionGroup
+			v-slot="{ option }"
+			v-model="selectedInterval"
+			class="!bg-button-bg !shadow-none"
+			:options="availableBillingIntervals"
+		>
+			<template v-if="option === 'monthly'"> Pay monthly </template>
+			<span v-else-if="option === 'quarterly'"> Pay quarterly </span>
+			<span v-else-if="option === 'yearly'"> Pay yearly </span>
+		</OptionGroup>
+		<span class="bg-transparent p-0 text-sm text-xs font-bold text-brand">
+			{{ selectedInterval !== 'quarterly' ? 'Save' : 'Saving' }} 16% with quarterly billing!
+		</span>
+	</div>
+	<Transition
+		enter-active-class="transition-all duration-300 ease-out"
+		enter-from-class="opacity-0 max-h-0"
+		enter-to-class="opacity-100 max-h-20"
+		leave-active-class="transition-all duration-200 ease-in"
+		leave-from-class="opacity-100 max-h-20"
+		leave-to-class="opacity-0 max-h-0"
+	>
+		<div v-if="isSameAsExistingPlan" class="text-orange mb-5 text-center" role="alert">
+			Your server is already on this plan, choose a different plan.
+		</div>
+	</Transition>
+	<div class="grid grid-cols-1 sm:grid-cols-2 !gap-4">
+		<ModalBasedServerPlan
+			v-if="plansByRam.small"
+			:plan="plansByRam.small"
+			:title="{ id: 'servers.purchase.step.plan.small', defaultMessage: 'Small' }"
+			:description="messages.smallDesc"
+			:button-color="'blue'"
+			:selected="selectedPlan?.id === plansByRam.small.id"
+			@select="selectedPlan = $event"
+		/>
+		<ModalBasedServerPlan
+			v-if="plansByRam.medium"
+			:plan="plansByRam.medium"
+			:title="{ id: 'servers.purchase.step.plan.medium', defaultMessage: 'Medium' }"
+			:description="messages.mediumDesc"
+			most-popular
+			:button-color="'brand'"
+			:selected="selectedPlan?.id === plansByRam.medium.id"
+			@select="selectedPlan = $event"
+		/>
+		<ModalBasedServerPlan
+			v-if="plansByRam.large"
+			:plan="plansByRam.large"
+			:title="{ id: 'servers.purchase.step.plan.large', defaultMessage: 'Large' }"
+			:description="messages.largeDesc"
+			:button-color="'purple'"
+			:selected="selectedPlan?.id === plansByRam.large.id"
+			@select="selectedPlan = $event"
+		/>
+		<div
+			v-if="customStartingPrice"
+			class="rounded-2xl p-4 font-semibold transition-all duration-300 experimental-styles-within h-full border-2 border-solid cursor-pointer select-none"
+			:class="!selectedPlan ? 'bg-brand-highlight border-brand' : 'bg-button-bg border-transparent'"
+			role="button"
+			tabindex="0"
+			:aria-pressed="!selectedPlan"
+			@click="handleCustomPlan"
+			@keydown.enter.prevent="handleCustomPlan"
+			@keydown.space.prevent="handleCustomPlan"
+		>
+			<div class="flex h-full flex-col justify-between">
+				<div class="flex flex-col gap-2">
+					<div class="flex items-center justify-between">
+						<span class="text-2xl font-semibold text-contrast">Custom</span>
+					</div>
+					<span class="m-0 text-lg font-bold text-contrast">
+						{{ formatPrice(locale, customStartingPrice, currency, true) }}
+						<span class="text-sm font-semibold text-secondary">
+							/ month<template v-if="selectedInterval !== 'monthly'"
+								>, billed {{ selectedInterval }}</template
+							>
+						</span>
+					</span>
+					<span class="text-sm">{{ formatMessage(messages.customDesc) }}</span>
+				</div>
+				<div class="flex flex-col gap-2">
+					<div class="flex items-center gap-3">
+						<span v-if="customPricePerGb" class="text-sm text-secondary">
+							From {{ formatPrice(locale, customPricePerGb, currency, true) }} / GB
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index 0980b8aff..34bb0fc04 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -237,7 +237,7 @@ onMounted(() => {
 						>{{ formatPrice(locale, selectedPrice, currency, true) }} / month</span
 					><span v-if="interval !== 'monthly'">, billed {{ interval }}</span>
 				</p>
-				<div class="bg-bg rounded-xl p-4 mt-2 text-secondary">
+				<div class="bg-bg rounded-xl p-4 mt-2 text-secondary h-14">
 					<div v-if="checkingCustomStock" class="flex gap-2 items-center">
 						<SpinnerIcon class="size-5 shrink-0 animate-spin" /> Checking availability...
 					</div>
diff --git a/packages/ui/src/components/billing/ServersPurchase3Review.vue b/packages/ui/src/components/billing/ServersPurchase3Review.vue
index 1a6d78fd6..4548d7d79 100644
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -9,8 +9,9 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { formatPrice, getPingLevel } from '@modrinth/utils'
+import { formatPrice, getPingLevel, type UserSubscription } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
+import dayjs from 'dayjs'
 import type Stripe from 'stripe'
 import { computed } from 'vue'
 
@@ -45,6 +46,10 @@ const props = defineProps<{
 	ping?: number
 	loading?: boolean
 	selectedPaymentMethod: Stripe.PaymentMethod | undefined
+	hasPaymentMethod?: boolean
+	noPaymentRequired?: boolean
+	existingPlan?: ServerPlan
+	existingSubscription?: UserSubscription
 }>()
 
 const interval = defineModel<ServerBillingInterval>('interval', { required: true })
@@ -54,6 +59,75 @@ const prices = computed(() => {
 	return props.plan.prices.find((x) => x.currency_code === props.currency)
 })
 
+const selectedPlanPriceForInterval = computed<number | undefined>(() => {
+	return prices.value?.prices?.intervals?.[interval.value as keyof typeof monthsInInterval]
+})
+
+const existingPlanPriceForInterval = computed<number | undefined>(() => {
+	if (!props.existingPlan) return undefined
+	const p = props.existingPlan.prices.find((x) => x.currency_code === props.currency)
+	return p?.prices?.intervals?.[interval.value as keyof typeof monthsInInterval]
+})
+
+const upgradeDeltaPrice = computed<number | undefined>(() => {
+	if (selectedPlanPriceForInterval.value == null || existingPlanPriceForInterval.value == null)
+		return undefined
+	return selectedPlanPriceForInterval.value - existingPlanPriceForInterval.value
+})
+
+const isUpgrade = computed<boolean>(() => {
+	return (upgradeDeltaPrice.value ?? 0) > 0
+})
+
+const estimatedDaysInInterval = computed<number>(() => {
+	return monthsInInterval[interval.value] * 30
+})
+
+const estimatedProrationDays = computed<number | undefined>(() => {
+	if (!isUpgrade.value) return undefined
+	if (props.total == null || props.tax == null) return undefined
+	const subtotal = props.total - props.tax
+	const delta = upgradeDeltaPrice.value ?? 0
+	if (delta <= 0) return undefined
+	const fraction = Math.max(0, Math.min(1, subtotal / delta))
+	return Math.round(fraction * estimatedDaysInInterval.value)
+})
+
+const isProratedCharge = computed<boolean>(() => {
+	return isUpgrade.value && (props.total ?? 0) > 0
+})
+
+const exactProrationDays = computed<number | undefined>(() => {
+	if (!props.existingSubscription) return undefined
+	const created = dayjs(props.existingSubscription.created)
+	if (!created.isValid()) return undefined
+	let next = created
+	const now = dayjs()
+	if (props.existingSubscription.interval === 'monthly') {
+		const cycles = now.diff(created, 'month')
+		next = created.add(cycles + 1, 'month')
+	} else if (props.existingSubscription.interval === 'quarterly') {
+		const months = now.diff(created, 'month')
+		const cycles = Math.floor(months / 3)
+		next = created.add((cycles + 1) * 3, 'month')
+	} else if (props.existingSubscription.interval === 'yearly') {
+		const cycles = now.diff(created, 'year')
+		next = created.add(cycles + 1, 'year')
+	} else if (props.existingSubscription.interval === 'five-days') {
+		const days = now.diff(created, 'day')
+		const cycles = Math.floor(days / 5)
+		next = created.add((cycles + 1) * 5, 'day')
+	} else {
+		return undefined
+	}
+	const days = next.diff(now, 'day')
+	return Math.max(0, days)
+})
+
+const prorationDays = computed<number | undefined>(
+	() => exactProrationDays.value ?? estimatedProrationDays.value,
+)
+
 const planName = computed(() => {
 	if (!props.plan || !props.plan.metadata || props.plan.metadata.type !== 'pyro') return 'Unknown'
 	const ram = props.plan.metadata.ram
@@ -198,57 +272,88 @@ function setInterval(newInterval: ServerBillingInterval) {
 		</button>
 	</div>
 	<div class="mt-2">
-		<ExpandableInvoiceTotal
-			:period="period"
-			:currency="currency"
-			:loading="loading"
-			:total="total ?? -1"
-			:billing-items="
-				total !== undefined && tax !== undefined
-					? [
-							{
-								title: `Modrinth Servers (${planName})`,
-								amount: total - tax,
-							},
-							{
-								title: 'Tax',
-								amount: tax,
-							},
-						]
-					: []
-			"
-		/>
+		<template v-if="!noPaymentRequired">
+			<ExpandableInvoiceTotal
+				:period="isProratedCharge ? undefined : period"
+				:currency="currency"
+				:loading="loading"
+				:total="total ?? -1"
+				:billing-items="
+					total !== undefined && tax !== undefined
+						? [
+								{
+									title:
+										isProratedCharge && prorationDays
+											? `Modrinth Servers (${planName}) — prorated for ${prorationDays} day${
+													prorationDays === 1 ? '' : 's'
+												}`
+											: `Modrinth Servers (${planName})`,
+									amount: total - tax,
+								},
+								{
+									title: 'Tax',
+									amount: tax,
+								},
+							]
+						: []
+				"
+			/>
+		</template>
+		<div
+			v-else
+			class="p-4 rounded-2xl bg-table-alternateRow text-sm text-secondary leading-relaxed"
+		>
+			No payment required. Your downgrade will apply at the end of the current billing period.
+		</div>
 	</div>
-	<div class="mt-2 flex items-center pl-4 pr-2 py-3 bg-bg rounded-2xl gap-2 text-secondary">
+	<div
+		v-if="!noPaymentRequired"
+		class="mt-2 flex items-center pl-4 pr-2 py-3 bg-bg rounded-2xl gap-2 text-secondary"
+	>
 		<template v-if="selectedPaymentMethod">
 			<FormattedPaymentMethod :method="selectedPaymentMethod" />
 		</template>
 		<template v-else>
-			<div class="flex items-center gap-2 text-red">
+			<div v-if="hasPaymentMethod" class="flex items-center gap-2 text-secondary">
+				<RadioButtonCheckedIcon class="text-brand" />
+				Using new payment method
+			</div>
+			<div v-else class="flex items-center gap-2 text-red">
 				<XIcon />
 				No payment method selected
 			</div>
 		</template>
 		<ButtonStyled size="small" type="transparent">
 			<button class="ml-auto" @click="emit('changePaymentMethod')">
-				<template v-if="selectedPaymentMethod"> <EditIcon /> Change </template>
+				<template v-if="selectedPaymentMethod || hasPaymentMethod"> <EditIcon /> Change </template>
 				<template v-else> Select payment method <RightArrowIcon /> </template>
 			</button>
 		</ButtonStyled>
 	</div>
-	<p class="m-0 mt-4 text-sm text-secondary">
+	<p v-if="!noPaymentRequired" class="m-0 mt-4 text-sm text-secondary">
+		<template v-if="isUpgrade && (total ?? 0) > 0">
+			Today, you will be charged a prorated amount for the remainder of your current billing cycle.
+			<br />
+			Your subscription will renew at
+			{{ formatPrice(locale, selectedPlanPriceForInterval, currency) }} / {{ period }} plus
+			applicable taxes at the end of your current billing interval, until you cancel. You can cancel
+			anytime from your settings page.
+		</template>
+		<template v-else>
+			You'll be charged
+			<SpinnerIcon v-if="loading" class="animate-spin relative top-0.5 mx-2" /><template v-else>{{
+				formatPrice(locale, total, currency)
+			}}</template>
+			every {{ period }} plus applicable taxes starting today, until you cancel. You can cancel
+			anytime from your settings page.
+		</template>
+		<br />
 		<span class="font-semibold"
 			>By clicking "Subscribe", you are purchasing a recurring subscription.</span
 		>
 		<br />
-		You'll be charged
-		<SpinnerIcon v-if="loading" class="animate-spin relative top-0.5 mx-2" /><template v-else>{{
-			formatPrice(locale, total, currency)
-		}}</template>
-		every {{ period }} plus applicable taxes starting today, until you cancel. You can cancel
-		anytime from your settings page.
 	</p>
-	<div class="mt-2 flex items-center gap-1 text-sm">
+	<div v-if="!noPaymentRequired" class="mt-2 flex items-center gap-1 text-sm">
 		<Checkbox
 			v-model="acceptedEula"
 			label="I acknowledge that I have read and agree to the"
diff --git a/packages/ui/src/components/billing/ServersSpecs.vue b/packages/ui/src/components/billing/ServersSpecs.vue
index ae584e2a0..d621ab84e 100644
--- a/packages/ui/src/components/billing/ServersSpecs.vue
+++ b/packages/ui/src/components/billing/ServersSpecs.vue
@@ -8,17 +8,11 @@ const emit = defineEmits<{
 	(e: 'click-bursting-link'): void
 }>()
 
-const props = withDefaults(
-	defineProps<{
-		ram: number
-		storage: number
-		cpus: number
-		burstingLink?: string
-	}>(),
-	{
-		burstingLink: undefined,
-	},
-)
+const props = defineProps<{
+	ram: number
+	storage: number
+	cpus: number
+}>()
 
 const formattedRam = computed(() => {
 	return props.ram / 1024
@@ -46,12 +40,12 @@ const sharedCpus = computed(() => {
 		<li class="flex items-center gap-2">
 			<SparklesIcon class="h-5 w-5 shrink-0" /> Bursts up to {{ cpus }} CPUs
 			<AutoLink
-				v-if="burstingLink"
 				v-tooltip="
 					`CPU bursting allows your server to temporarily use additional threads to help mitigate TPS spikes. Click for more info.`
 				"
 				class="flex"
-				:to="burstingLink"
+				to="https://modrinth.com/servers#cpu-burst"
+				target="_blank"
 				@click="() => emit('click-bursting-link')"
 			>
 				<UnknownIcon class="h-4 w-4 text-secondary opacity-80" />
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 5c41bb1c2..5810d5ba6 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -25,6 +25,7 @@ export { default as HeadingLink } from './base/HeadingLink.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
+export { default as OptionGroup } from './base/OptionGroup.vue'
 export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
 export { default as OverflowMenu } from './base/OverflowMenu.vue'
 export { default as Page } from './base/Page.vue'
diff --git a/packages/ui/src/composables/stripe.ts b/packages/ui/src/composables/stripe.ts
index 111375c78..94b8e164c 100644
--- a/packages/ui/src/composables/stripe.ts
+++ b/packages/ui/src/composables/stripe.ts
@@ -35,7 +35,7 @@ export const useStripe = (
 	project: Ref<string | undefined>,
 	initiatePayment: (
 		body: CreatePaymentIntentRequest | UpdatePaymentIntentRequest,
-	) => Promise<CreatePaymentIntentResponse | UpdatePaymentIntentResponse>,
+	) => Promise<CreatePaymentIntentResponse | UpdatePaymentIntentResponse | null>,
 	onError: (err: Error) => void,
 ) => {
 	const stripe = ref<StripeJs | null>(null)
@@ -55,17 +55,22 @@ export const useStripe = (
 	const inputtedPaymentMethod = ref<Stripe.PaymentMethod>()
 	const clientSecret = ref<string>()
 	const completingPurchase = ref<boolean>(false)
+	const noPaymentRequired = ref<boolean>(false)
 
 	async function initialize() {
 		stripe.value = await loadStripe(publishableKey)
 	}
 
-	function createIntent(body: CreatePaymentIntentRequest): Promise<CreatePaymentIntentResponse> {
-		return initiatePayment(body) as Promise<CreatePaymentIntentResponse>
+	function createIntent(
+		body: CreatePaymentIntentRequest,
+	): Promise<CreatePaymentIntentResponse | null> {
+		return initiatePayment(body) as Promise<CreatePaymentIntentResponse | null>
 	}
 
-	function updateIntent(body: UpdatePaymentIntentRequest): Promise<UpdatePaymentIntentResponse> {
-		return initiatePayment(body) as Promise<UpdatePaymentIntentResponse>
+	function updateIntent(
+		body: UpdatePaymentIntentRequest,
+	): Promise<UpdatePaymentIntentResponse | null> {
+		return initiatePayment(body) as Promise<UpdatePaymentIntentResponse | null>
 	}
 
 	const planPrices = computed(() => {
@@ -222,7 +227,7 @@ export const useStripe = (
 				interval: interval.value,
 			}
 
-			let result: BasePaymentIntentResponse
+			let result: BasePaymentIntentResponse | null = null
 
 			const metadata: CreatePaymentIntentRequest['metadata'] = {
 				type: 'pyro',
@@ -241,26 +246,34 @@ export const useStripe = (
 					existing_payment_intent: paymentIntentId.value,
 					metadata,
 				})
-				console.log(`Updated payment intent: ${interval.value} for ${result.total}`)
+				if (result) console.log(`Updated payment intent: ${interval.value} for ${result.total}`)
 			} else {
-				;({
-					payment_intent_id: paymentIntentId.value,
-					client_secret: clientSecret.value,
-					...result
-				} = await createIntent({
+				const created = await createIntent({
 					...requestType,
 					charge,
 					metadata: metadata,
-				}))
-				console.log(`Created payment intent: ${interval.value} for ${result.total}`)
+				})
+				if (created) {
+					paymentIntentId.value = created.payment_intent_id
+					clientSecret.value = created.client_secret
+					result = created
+					console.log(`Created payment intent: ${interval.value} for ${created.total}`)
+				}
 			}
 
-			tax.value = result.tax
-			total.value = result.total
+			if (!result) {
+				tax.value = 0
+				total.value = 0
+				noPaymentRequired.value = true
+			} else {
+				tax.value = result.tax
+				total.value = result.total
+				noPaymentRequired.value = false
+			}
 
 			if (confirmation) {
 				confirmationToken.value = id
-				if (result.payment_method) {
+				if (result && result.payment_method) {
 					inputtedPaymentMethod.value = result.payment_method
 				}
 			}
@@ -346,6 +359,10 @@ export const useStripe = (
 	const loadingElements = computed(() => elementsLoaded.value < 2)
 
 	async function submitPayment(returnUrl: string) {
+		if (noPaymentRequired.value) {
+			completingPurchase.value = false
+			return true
+		}
 		completingPurchase.value = true
 		const secert = clientSecret.value
 
@@ -387,7 +404,9 @@ export const useStripe = (
 		}
 	}
 
-	const hasPaymentMethod = computed(() => selectedPaymentMethod.value || confirmationToken.value)
+	const hasPaymentMethod = computed(
+		() => selectedPaymentMethod.value || confirmationToken.value || noPaymentRequired.value,
+	)
 
 	return {
 		initializeStripe: initialize,
@@ -406,5 +425,6 @@ export const useStripe = (
 		total,
 		submitPayment,
 		completingPurchase,
+		noPaymentRequired,
 	}
 }
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 23e95048c..ac9498967 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -506,6 +506,39 @@
   "servers.purchase.step.payment.title": {
     "defaultMessage": "Payment method"
   },
+  "servers.purchase.step.plan.billed": {
+    "defaultMessage": "billed {interval}"
+  },
+  "servers.purchase.step.plan.custom.desc": {
+    "defaultMessage": "Pick a customized plan with just the specs you need."
+  },
+  "servers.purchase.step.plan.get-started": {
+    "defaultMessage": "Get started"
+  },
+  "servers.purchase.step.plan.large.desc": {
+    "defaultMessage": "Ideal for 15–25 players, modpacks, or heavy modding."
+  },
+  "servers.purchase.step.plan.medium.desc": {
+    "defaultMessage": "Great for 6–15 players and multiple mods."
+  },
+  "servers.purchase.step.plan.most-popular": {
+    "defaultMessage": "Most Popular"
+  },
+  "servers.purchase.step.plan.prompt": {
+    "defaultMessage": "Choose a plan"
+  },
+  "servers.purchase.step.plan.select": {
+    "defaultMessage": "Select Plan"
+  },
+  "servers.purchase.step.plan.small.desc": {
+    "defaultMessage": "Perfect for 1–5 friends with a few light mods."
+  },
+  "servers.purchase.step.plan.subtitle": {
+    "defaultMessage": "Pick the amount of RAM and specs that fit your needs."
+  },
+  "servers.purchase.step.plan.title": {
+    "defaultMessage": "Plan"
+  },
   "servers.purchase.step.region.title": {
     "defaultMessage": "Region"
   },
diff --git a/packages/utils/servers/types/common.ts b/packages/utils/servers/types/common.ts
index f54a5199c..edc0bec33 100644
--- a/packages/utils/servers/types/common.ts
+++ b/packages/utils/servers/types/common.ts
@@ -52,6 +52,9 @@ export interface Server {
 	flows: {
 		intro?: boolean
 	}
+
+	is_medal?: boolean
+	medal_expires?: string
 }
 
 export interface Servers {
diff --git a/packages/utils/servers/types/server.ts b/packages/utils/servers/types/server.ts
index fad190f3e..e0b8a2243 100644
--- a/packages/utils/servers/types/server.ts
+++ b/packages/utils/servers/types/server.ts
@@ -37,6 +37,7 @@ export interface ServerGeneral {
 	flows?: {
 		intro?: boolean
 	}
+	is_medal?: boolean
 }
 
 export interface Allocation {
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index ab877f93a..3d62b28a7 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -513,6 +513,38 @@ export interface ModerationJudgements {
 	[sha1: string]: ModerationJudgement
 }
 
+// Subscriptions
+export interface UserSubscription {
+	id: string
+	user_id: string
+	price_id: string
+	interval: 'five-days' | 'monthly' | 'quarterly' | 'yearly'
+	status: 'provisioned' | 'unprovisioned'
+	created: string // ISO date string
+	metadata?: SubscriptionMetadata
+}
+
+export interface Charge {
+	id: string
+	user_id: string
+	price_id: string
+	amount: number
+	currency_code: string
+	status: 'open' | 'processing' | 'succeeded' | 'failed' | 'cancelled' | 'expiring'
+	due: string // ISO date string
+	last_attempt?: string // ISO date string
+	type: 'one-time' | 'subscription' | 'proration' | 'refund'
+	subscription_id?: string
+	subscription_interval?: 'five-days' | 'monthly' | 'quarterly' | 'yearly'
+	platform: 'stripe' | 'none'
+	parent_charge_id?: string
+	net?: number
+}
+
+export type SubscriptionMetadata =
+	| { type: 'pyro'; id: string; region?: string }
+	| { type: 'medal'; id: string }
+
 // Delphi
 export interface DelphiReport {
 	id: string