diff --git a/README.md b/README.md
index fa9b059..cd454bf 100644
--- a/README.md
+++ b/README.md
@@ -65,8 +65,8 @@ There are no fully required configuration variables, the app can runs minimally
 # Website refactor
 
 The website is currently in a refactor, here is what is still left on the frontend:
-- [ ] Styling for progress page
-- [ ] Styling for progress on main page
+- [x] Styling for progress page
+- [x] Styling for progress on main page
 - [ ] Account: Mii editor
 - [ ] Account: View account
 - [ ] Account: Delete account
@@ -110,8 +110,8 @@ Miscellanous tasks:
   - [x] HCaptcha
   - [x] RSS feed
   - [x] Stripe checkout
-  - [ ] Stripe donation progress
-  - [ ] Stripe webhooks (+ mailing)
+  - [x] Stripe donation progress
+  - [x] Stripe webhooks (+ mailing)
   - [x] Forgot password flow
   - [x] Delete account
   - [x] server environment changing
diff --git a/src/components/ProgressCard.vue b/src/components/ProgressCard.vue
new file mode 100644
index 0000000..26959ed
--- /dev/null
+++ b/src/components/ProgressCard.vue
@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import { TransitionPresets, useElementVisibility, useTransition } from '@vueuse/core';
+import type { ProgressItem } from '~~/shared/api-types';
+const { t } = useI18n();
+
+const props = defineProps<{
+	purple?: boolean;
+	showTitle?: boolean;
+	item: ProgressItem;
+}>();
+
+const chartRef = useTemplateRef('chart');
+const targetIsVisible = useElementVisibility(chartRef, {
+	once: true
+});
+const currentlyVisiblePercentage = computed(() => targetIsVisible.value ? props.item.completion : 0);
+const animatedPercentage = useTransition(currentlyVisiblePercentage, {
+	duration: 1000,
+	easing: TransitionPresets.easeInOutQuad
+});
+
+const completedTasks = computed(() => props.item.tasks.filter(v => v.status === 'completed'));
+const inProgressTasks = computed(() => props.item.tasks.filter(v => v.status === 'inprogress'));
+const notStartedTasks = computed(() => props.item.tasks.filter(v => v.status === 'notstarted'));
+</script>
+
+<template>
+  <div
+    class="feature-list-wrapper"
+    :class="{ 'purple': props.purple }"
+  >
+    <div class="feature-list-top">
+      <div>
+        <div class="feature-progress-chart">
+          <p class="percentage-label">
+            {{ Math.floor(animatedPercentage) }}%
+          </p>
+          <svg
+            ref="chart"
+            class="percentage-svg"
+            viewBox="-25 -25 250 250"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              r="100"
+              cx="100"
+              cy="100"
+              fill="transparent"
+              stroke="var(--progress-ring-bg)"
+              stroke-width="35px"
+            />
+            <circle
+              r="100"
+              cx="100"
+              cy="100"
+              pathLength="100"
+              stroke="var(--progress-ring-selected)"
+              stroke-width="35px"
+              stroke-dashoffset="-75"
+              fill="transparent"
+              :stroke-dasharray="`${animatedPercentage} ${100-animatedPercentage}`"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="core">
+      <div
+        v-if="props.showTitle"
+        class="progress-title"
+      >
+        <h3>{{ props.item.title }}</h3>
+        <div>
+          <a
+            v-if="props.item.githubUrl"
+            :href="props.item.githubUrl"
+            class="github"
+            target="_blank"
+          >
+            <svg
+              data-prefix="fab"
+              data-icon="github"
+              class="svg-inline--fa fa-github fa-w-16"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 496 512"
+            >
+              <path
+                fill="currentColor"
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+            <span>{{ t('progress.githubRepo') }}</span>
+          </a>
+        </div>
+      </div>
+      <div class="feature-list">
+        <div
+          v-for="task of completedTasks"
+          :key="task.title"
+          class="feature"
+        >
+          <div class="custom-checkbox done">
+            <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="feather feather-check"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </div>
+          <span>{{ task.title }}</span>
+        </div>
+
+        <div
+          v-for="task of inProgressTasks"
+          :key="task.title"
+          class="feature"
+        >
+          <div class="custom-checkbox ongoing">
+            <div class="small-dot" />
+          </div>
+          <span>{{ task.title }}</span>
+        </div>
+
+        <div
+          v-for="task of notStartedTasks"
+          :key="task.title"
+          class="feature"
+        >
+          <div class="custom-checkbox incomplete" />
+          <span>{{ task.title }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feature-list-wrapper {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-gap: 20px;
+	margin-top: 22px;
+}
+.feature-progress-chart {
+	max-width: 100px;
+}
+.feature-progress-chart canvas.percentage-chart {
+	pointer-events: none; /* Fixes issue #48 */
+}
+.feature-list-wrapper h3 {
+	margin: 0;
+}
+.feature-list-wrapper hr {
+	border: 0;
+	width: 100%;
+	height: 1px;
+	margin: 20px 0;
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.progress-title {
+	margin-bottom: 20px;
+}
+.progress-title a.github {
+	margin-top: 10px;
+	color: var(--text-shade-0);
+	display: inline-flex;
+	align-items: center;
+	opacity: .75;
+	text-decoration: none;
+	transition: color 50ms ease-in-out;
+}
+.progress-title a.github:focus, .progress-title a.github:hover, .progress-title a.github:visited {
+	color: var(--text-shade-0);
+	text-decoration: none;
+}
+.progress-title a.github:hover {
+	opacity: 1;
+}
+.progress-title a.github svg {
+	height: 1.3rem;
+	margin-right: .4rem;
+}
+
+.feature-list-wrapper.purple .progress-title a.github, .feature-list-wrapper.purple .progress-title a.github:focus, .feature-list-wrapper.purple .progress-title a.github:hover, .feature-list-wrapper.purple .progress-title a.github:visited {
+	color: var(--accent-shade-3);
+}
+.feature-list-wrapper .core > .progress-title a.github:hover {
+	color: white;
+}
+
+.feature-list-wrapper canvas {
+	width: 100px;
+	height: 100px;
+}
+
+.feature-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	grid-gap: 10px;
+}
+.feature {
+	display: grid;
+	align-items: flex-start;
+	grid-template-columns: auto 1fr;
+	grid-gap: 10px;
+}
+
+.feature-progress-chart {
+	position: relative;
+}
+.feature-progress-chart p {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -59%);
+	margin: 0;
+	font-weight: bolder;
+	font-size: 1.1rem;
+}
+
+/* Custom checkboxes */
+.custom-checkbox {
+	width: 1.5rem;
+	height: 1.5rem;
+	background: var(--bg-shade-3);
+	color: var(--text-shade-3);
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.custom-checkbox.done {
+	background: #50AC75;
+}
+.custom-checkbox.ongoing {
+	background: #DBAC5B;
+}
+.custom-checkbox svg {
+	width: 100%;
+	height: 100%;
+}
+.custom-checkbox .small-dot {
+	width: 0.5rem;
+	height: 0.5rem;
+	background: white;
+	border-radius: 50%;
+}
+
+.percentage-svg {
+	height: 100px;
+	width: 100px;
+
+	--progress-ring-bg: #31365A;
+	--progress-ring-selected: #9D6FF3;
+}
+.purple .percentage-svg {
+	--progress-ring-bg: rgba(195, 178, 227, 0.5);
+	--progress-ring-selected: white;
+}
+</style>
diff --git a/src/composables/slugify.ts b/src/composables/slugify.ts
new file mode 100644
index 0000000..bb184f8
--- /dev/null
+++ b/src/composables/slugify.ts
@@ -0,0 +1,3 @@
+export function slugify(str: string): string {
+	return str.toLowerCase().replaceAll(/ /g, '-');
+}
diff --git a/src/locales/ar_AR.json b/src/locales/ar_AR.json
index 9f386d4..d9740f6 100644
--- a/src/locales/ar_AR.json
+++ b/src/locales/ar_AR.json
@@ -252,7 +252,7 @@
 	},
 	"donation": {
 		"upgradePush": "لتصبح مشتركا والوصول إلى الامتيازات الرائعة ، تفضل بزيارة صفحة <a href=\"/account/upgrade\">upgrade</a>.",
-		"progress": "<span> $${totd} </span> من <span> $${goald} </span> / شهريًا ، <span> ${perc}٪ </span> من الهدف الشهري."
+		"progress": "<span> ${totd} </span> من <span> ${goald} </span> / شهريًا ، <span> {perc}٪ </span> من الهدف الشهري."
 	},
 	"showcase": {
 		"title": "ماذا نقوم به",
@@ -277,4 +277,4 @@
 		"confirm": "تأكيد",
 		"close": "غلق"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ast.json b/src/locales/ast.json
index 5adc835..f39466a 100644
--- a/src/locales/ast.json
+++ b/src/locales/ast.json
@@ -206,7 +206,7 @@
 		"back": "Atrás"
 	},
 	"donation": {
-		"progress": "<span>${totd}$</span> de <span>${goald}$</span>/mes, <span>${perc}%</span> de la meta mensual.",
+		"progress": "<span>{totd}$</span> de <span>{goald}$</span>/mes, <span>{perc}%</span> de la meta mensual.",
 		"upgradePush": "Pa convertise en soscriptor/a ya tener accesu a coses guais, visita la <a href=\"/account/upgrade\">páxina d'anovamientu</a>."
 	},
 	"docs": {
@@ -264,4 +264,4 @@
 		"confirm": "Confirmar",
 		"close": "Zarrar"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ca_ES.json b/src/locales/ca_ES.json
index acc5607..f32ecf7 100644
--- a/src/locales/ca_ES.json
+++ b/src/locales/ca_ES.json
@@ -307,6 +307,6 @@
 	},
 	"donation": {
 		"upgradePush": "Per esdevenir suscriptor i guanyar accés a increïbles avantatges, vés a <a href=\"/account/upgrade\">la pàgina de millores</a>.",
-		"progress": "Objectiu mensual: <span>$${totd}</span> de <span>$${goald}</span>/al mes, <span>${perc}%</span>."
+		"progress": "Objectiu mensual: <span>${totd}</span> de <span>${goald}</span>/al mes, <span>{perc}%</span>."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/cs_CZ.json b/src/locales/cs_CZ.json
index 9389212..fe8fe11 100644
--- a/src/locales/cs_CZ.json
+++ b/src/locales/cs_CZ.json
@@ -457,10 +457,10 @@
 		}
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> z měsíčního cíle <span>$${goald} </span> vybráno (<span>${perc}%</span> měsíčního cíle)",
+		"progress": "<span>${totd}</span> z měsíčního cíle <span>${goald} </span> vybráno (<span>{perc}%</span> měsíčního cíle)",
 		"upgradePush": "Abyste se stal(a) předplatitelem a získal(a) přístup k zajímavým výhodám navštivte <a href=\"/account/upgrade\">upgrade stránku</a>."
 	},
 	"notfound": {
 		"description": "Jejda! Tuto stránku jsme nenalezli."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/de_DE.json b/src/locales/de_DE.json
index 8bacbd5..16fe373 100644
--- a/src/locales/de_DE.json
+++ b/src/locales/de_DE.json
@@ -414,7 +414,7 @@
 		"changeTierConfirm": "Stufe ändern"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> von <span>$${goald}</span>/Monat, <span>${perc}%</span> des monatlichen Ziels.",
+		"progress": "<span>${totd}</span> von <span>${goald}</span>/Monat, <span>{perc}%</span> des monatlichen Ziels.",
 		"upgradePush": "Um Abonnent zu werden und Zugang zu coolen Vorteilen zu erhalten, besuche die <a href=\"/account/upgrade\">Upgrade-Seite</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Woops! Diese Seite konnte nicht gefunden werden."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/el_GR.json b/src/locales/el_GR.json
index 75c1b54..295871e 100644
--- a/src/locales/el_GR.json
+++ b/src/locales/el_GR.json
@@ -214,7 +214,7 @@
 		"changeTierPrompt": "Είσαι σίγουρος ότι θέλεις να καταργήσεις τη συνδρομή σου από <span class=\"oldtier\">oldtiername</span> και να εγγραφείς στο <span class=\"newtier\">newtiername</span>;"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> από<span>$${goald}</span>/μήνα, <span>${perc}%</span> του μηνιαίου στόχου.",
+		"progress": "<span>${totd}</span> από<span>${goald}</span>/μήνα, <span>{perc}%</span> του μηνιαίου στόχου.",
 		"upgradePush": "Για να γίνεις συνδρομητής και να αποκτήσεις πρόσβαση σε κούλ οφέλη, επισκέψου την <a href=\"/account/upgrade\">σελίδα αναβάθμισης</a>."
 	},
 	"localizationPage": {
@@ -282,4 +282,4 @@
 		"close": "Κλείσιμο",
 		"confirm": "Επιβεβαίωση"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/en@uwu.json b/src/locales/en@uwu.json
index 959df3f..03d2a19 100644
--- a/src/locales/en@uwu.json
+++ b/src/locales/en@uwu.json
@@ -448,10 +448,10 @@
 		"filePlaceholder": "mew://a.meow.site/4_jzon.jzon"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> of <span>$${goald}</span>/munth, <span>${perc}%</span> of teh monthly goal",
+		"progress": "<span>${totd}</span> of <span>${goald}</span>/munth, <span>{perc}%</span> of teh monthly goal",
 		"upgradePush": "u wanna become super kitteh and get kool perkz?? <a href=\"/account/upgrade\">upgrade now!!</a>"
 	},
 	"notfound": {
 		"description": "uh oh! we did a widdle fucky wucky! oopsie daisie! oh noes!!!!!"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/en_GB.json b/src/locales/en_GB.json
index 134887e..c96b493 100644
--- a/src/locales/en_GB.json
+++ b/src/locales/en_GB.json
@@ -414,7 +414,7 @@
 		"changeTierPrompt": "Are you sure you want to unsubscribe from <span class=\"oldtier\">oldtiername</span> and subscribe to <span class=\"newtier\">newtiername</span>?"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> of <span>$${goald}</span>/month, <span>${perc}%</span> of the monthly goal.",
+		"progress": "<span>${totd}</span> of <span>${goald}</span>/month, <span>{perc}%</span> of the monthly goal.",
 		"upgradePush": "To become a subscriber and gain access to cool perks, visit the <a href=\"/account/upgrade\">upgrade page</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Oops! We could not find this page."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/en_US.json b/src/locales/en_US.json
index 5512ddd..7ed9fdb 100644
--- a/src/locales/en_US.json
+++ b/src/locales/en_US.json
@@ -415,7 +415,7 @@
 		"back": "Back"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> of <span>$${goald}</span>/month, <span>${perc}%</span> of the monthly goal.",
+		"progress": "<span>${totd}</span> of <span>${goald}</span>/month, <span>{perc}%</span> of the monthly goal.",
 		"upgradePush": "To become a subscriber and gain access to cool perks, visit the <a href=\"/account/upgrade\">upgrade page</a>."
 	},
 	"localizationPage": {
@@ -464,4 +464,4 @@
 	"notfound": {
 		"description": "Oops! We could not find this page."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/es_ES.json b/src/locales/es_ES.json
index fcea430..f466ab0 100644
--- a/src/locales/es_ES.json
+++ b/src/locales/es_ES.json
@@ -452,7 +452,7 @@
 		"title": "Subir rango"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span>/mes, <span>${perc}%</span> del objetivo mensual.",
+		"progress": "<span>${totd}</span> de <span>${goald}</span>/mes, <span>{perc}%</span> del objetivo mensual.",
 		"upgradePush": "Para convertirse en suscriptor y obtener acceso a beneficios geniales, visita la página <a href=\"/account/upgrade\">actualizar</a>."
 	},
 	"modals": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "¡Vaya! No hemos podido encontrar esta página."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/fi_FI.json b/src/locales/fi_FI.json
index de58a80..aaeca62 100644
--- a/src/locales/fi_FI.json
+++ b/src/locales/fi_FI.json
@@ -353,7 +353,7 @@
 		"confirm": "Vahvista"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> tavoitteesta <span>$${goald}</span>/kuussa, <span>${perc}%</span> kuukausitavoitteesta.",
+		"progress": "<span>${totd}</span> tavoitteesta <span>${goald}</span>/kuussa, <span>{perc}%</span> kuukausitavoitteesta.",
 		"upgradePush": "Tullaksesi tilaajaksi ja saadaksesi siistejä etuja, vieraile <a href=\"/account/upgrade\">tilityypin korotussivulla</a>."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/fr_FR.json b/src/locales/fr_FR.json
index 96bca25..e746eac 100644
--- a/src/locales/fr_FR.json
+++ b/src/locales/fr_FR.json
@@ -454,7 +454,7 @@
 	},
 	"donation": {
 		"upgradePush": "Pour s'abonner et avoir accès à des récompenses spéciales, visitez <a href=\"/account/upgrade\">la page de mise à niveau</a>.",
-		"progress": "<span>$${totd}</span> sur <span>$${goald}</span>/mois, <span>${perc}%</span> du but mensuel."
+		"progress": "<span>${totd}</span> sur <span>${goald}</span>/mois, <span>{perc}%</span> du but mensuel."
 	},
 	"modals": {
 		"cancel": "Annuler",
@@ -464,4 +464,4 @@
 	"notfound": {
 		"description": "Oups ! Nous n'arrivons pas à trouver cette page."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/gl_ES.json b/src/locales/gl_ES.json
index 2160adc..89ded1e 100644
--- a/src/locales/gl_ES.json
+++ b/src/locales/gl_ES.json
@@ -187,7 +187,7 @@
 	},
 	"donation": {
 		"upgradePush": "Para facerte un subscritor e acceder a grandes vantaxes, visita a <a href=\"/account/upgrade\">páxina de actualización</a>.",
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span>/mes, <span>${perc}%</span> do obxectivo mensual."
+		"progress": "<span>${totd}</span> de <span>${goald}</span>/mes, <span>{perc}%</span> do obxectivo mensual."
 	},
 	"localizationPage": {
 		"description": "Pega unha ligazón a unha configuración rexional JSON de acceso público para probala no teu sitio web",
@@ -277,4 +277,4 @@
 		"changeTierPrompt": "Estás seguro de que queres cancelar a subscrición de <span class=\"oldtier\">oldtiername</span> e subscribirte a <span class=\"newtier\">newtiername</span>?",
 		"changeTierConfirm": "Cambiar rango"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/hr_HR.json b/src/locales/hr_HR.json
index 7acaf19..8d3b35b 100644
--- a/src/locales/hr_HR.json
+++ b/src/locales/hr_HR.json
@@ -414,7 +414,7 @@
 		"back": "Natrag"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> od <span>$${goald}</span>/mjesečno, <span>${perc} %</span> mjesečnog cilja.",
+		"progress": "<span>${totd}</span> od <span>${goald}</span>/mjesečno, <span>{perc} %</span> mjesečnog cilja.",
 		"upgradePush": "Za pretplatu i pristup još boljim pogodnostima, posjeti <a href=\"/account/upgrade\">stranicu za nadogradnju</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Nažalost nismo uspjeli pronaći ovu stranicu."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/hu_HU.json b/src/locales/hu_HU.json
index 8103ca0..6712535 100644
--- a/src/locales/hu_HU.json
+++ b/src/locales/hu_HU.json
@@ -414,7 +414,7 @@
 		"description": "Tekintsd meg a projekt előrehaladását és céljait! (Minden órában frissítve, így nem tükröz minden projekt célt vagy az előrehaladást."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> a <span>$${goald}</span>/hó, <span>${perc}%</span> a havi célból.",
+		"progress": "<span>${totd}</span> a <span>${goald}</span>/hó, <span>{perc}%</span> a havi célból.",
 		"upgradePush": "Hogy előfizetővé válhass, és hozzáférj király cuccokhoz, látogasd meg a <a href=\"/account/upgrade\">bővítés oldalt</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Hoppá! Nem találjuk ezt az oldalt."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/id_ID.json b/src/locales/id_ID.json
index dd50e3b..7ff9742 100644
--- a/src/locales/id_ID.json
+++ b/src/locales/id_ID.json
@@ -417,7 +417,7 @@
 		"back": "Kembali"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> dari <span>$${goald}</span> per bulan, <span>${perc}%</span> dari target bulanan.",
+		"progress": "<span>${totd}</span> dari <span>${goald}</span> per bulan, <span>{perc}%</span> dari target bulanan.",
 		"upgradePush": "Untuk menjadi pelanggan dan mendapatkan akses ke berbagai keuntungan menarik, kunjungi <a href=\"/account/upgrade\">halaman upgrade</a>."
 	},
 	"localizationPage": {
@@ -461,4 +461,4 @@
 	"notfound": {
 		"description": "Maaf! Kami tidak dapat menemukan halaman ini."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/it_IT.json b/src/locales/it_IT.json
index 4c75b5a..fbf2f3e 100644
--- a/src/locales/it_IT.json
+++ b/src/locales/it_IT.json
@@ -457,10 +457,10 @@
 		"close": "Chiudi"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> di <span>$${goald}</span>/mese, <span>${perc}%</span> del goal mensile.",
+		"progress": "<span>${totd}</span> di <span>${goald}</span>/mese, <span>{perc}%</span> del goal mensile.",
 		"upgradePush": "Per diventare un abbonato e accedere a ricompense speciali, visita la <a href=\"/account/upgrade\">pagina per fare l'upgrade</a>."
 	},
 	"notfound": {
 		"description": "Oops! Non siamo riusciti a trovare questa pagina."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ja_JP.json b/src/locales/ja_JP.json
index e200413..107bc4e 100644
--- a/src/locales/ja_JP.json
+++ b/src/locales/ja_JP.json
@@ -450,7 +450,7 @@
 		"unsubPrompt": "<span>tiername</span> から退会しますか？そのレベルに関連付けられた特典にアクセスできなくなります。"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span>/<span>$${goald}</span>(寄付額/目標) ー 月間目標の <span>${perc}%</span>の寄付を頂いています。",
+		"progress": "<span>${totd}</span>/<span>${goald}</span>(寄付額/目標) ー 月間目標の <span>{perc}%</span>の寄付を頂いています。",
 		"upgradePush": "サブスクライバーになってクールな特典にアクセスするには、<a href=\"/account/upgrade\">アップグレード ページ</a>にアクセスしてください。"
 	},
 	"modals": {
@@ -461,4 +461,4 @@
 	"notfound": {
 		"description": "おっと！このページは見つかりません。"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/kk_KZ.json b/src/locales/kk_KZ.json
index c559cbc..82c521f 100644
--- a/src/locales/kk_KZ.json
+++ b/src/locales/kk_KZ.json
@@ -219,7 +219,7 @@
 	},
 	"donation": {
 		"upgradePush": "Жазылу және керемет қондырмаларға қол жеткізу үшін <a href=\"/account/upgrade\">жаңарту бетіне</a> кіріңіз.",
-		"progress": "<span>$${totd}</span>/айына <span>$${goald}</span>, айлық мақсаттың <span>${perc}%</span>."
+		"progress": "<span>${totd}</span>/айына <span>${goald}</span>, айлық мақсаттың <span>{perc}%</span>."
 	},
 	"localizationPage": {
 		"title": "Жергілікті жерлестірейік",
@@ -264,4 +264,4 @@
 		"confirm": "Растау",
 		"close": "Жабу"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ko_KR.json b/src/locales/ko_KR.json
index 4cfd536..3241a0d 100644
--- a/src/locales/ko_KR.json
+++ b/src/locales/ko_KR.json
@@ -349,7 +349,7 @@
 		"month": "달"
 	},
 	"donation": {
-		"progress": "<span>$${goald}</span>/월 중에서 <span>$${totd}</span> , 매달 목표의 <span>${perc}%</span>.",
+		"progress": "<span>${goald}</span>/월 중에서 <span>${totd}</span> , 매달 목표의 <span>{perc}%</span>.",
 		"upgradePush": "구독자가 되고 멋진 혜택을 받으시려면, <a href=\"/account/upgrade\">업그레이드 페이지</a>를 방문하세요."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/nl_NL.json b/src/locales/nl_NL.json
index a93f2bc..d100c31 100644
--- a/src/locales/nl_NL.json
+++ b/src/locales/nl_NL.json
@@ -120,7 +120,7 @@
 		"button": "Test bestand"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> van <span>$${goald}</span>/maand, <span>${perc}%</span> van de maandelijkse doelstelling.",
+		"progress": "<span>${totd}</span> van <span>${goald}</span>/maand, <span>{perc}%</span> van de maandelijkse doelstelling.",
 		"upgradePush": "Om een abonnee te worden en toegang te krijgen tot coole voordelen, bezoek je de <a href=\"/account/upgrade\">upgradepagina</a>."
 	},
 	"upgrade": {
@@ -291,4 +291,4 @@
 			"juxt_err": "Foutcodes - Juxt"
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/pl_PL.json b/src/locales/pl_PL.json
index 61d6ce5..bfd2d9e 100644
--- a/src/locales/pl_PL.json
+++ b/src/locales/pl_PL.json
@@ -291,7 +291,7 @@
 		"description": "Osiągnięcie celu miesięcznego sprawi, że Pretendo stanie się pracą na pełen etat, zapewniając aktualizacje lepszej jakości w szybszym tempie."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> z <span>$${goald}</span>/miesiąc, <span>${perc}%</span> miesięcznego celu.",
+		"progress": "<span>${totd}</span> z <span>${goald}</span>/miesiąc, <span>{perc}%</span> miesięcznego celu.",
 		"upgradePush": "Aby zostać subskrybentem i uzyskać dostęp do fajnych bonusów, odwiedź <a href=\"/account/upgrade\">stronę ulepszeń</a>."
 	},
 	"modals": {
@@ -299,4 +299,4 @@
 		"confirm": "Potwierdż",
 		"close": "Zamknij"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/pt_BR.json b/src/locales/pt_BR.json
index 713bfcc..b8c661f 100644
--- a/src/locales/pt_BR.json
+++ b/src/locales/pt_BR.json
@@ -451,10 +451,10 @@
 		"close": "Fechar"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span> por mês, o que significa <span>${perc}%</span> do objetivo mensal.",
+		"progress": "<span>${totd}</span> de <span>${goald}</span> por mês, o que significa <span>{perc}%</span> do objetivo mensal.",
 		"upgradePush": "Para se tornar um doador e ganhar acesso a vários benefícios legais, visite a página de <a href=\"/account/upgrade\">upgrade</a>."
 	},
 	"notfound": {
 		"description": "Ops! Nós não conseguimos achar esta página."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/pt_PT.json b/src/locales/pt_PT.json
index 807e2a6..fe33829 100644
--- a/src/locales/pt_PT.json
+++ b/src/locales/pt_PT.json
@@ -274,7 +274,7 @@
 		"description": "Verifique o andamento do projeto e as suas metas! (Atualizado em média a cada uma hora, não reflete TODAS as metas ou progresso do projeto)"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span> por mês, o que significa <span>${perc}%</span> do objetivo mensal.",
+		"progress": "<span>${totd}</span> de <span>${goald}</span> por mês, o que significa <span>{perc}%</span> do objetivo mensal.",
 		"upgradePush": "Para se tornar um doador e ganhar acesso a vários benefícios legais, visite a página de <a href=\"/account/upgrade\">upgrade</a>."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ro_RO.json b/src/locales/ro_RO.json
index ebf04e8..d37aa3f 100644
--- a/src/locales/ro_RO.json
+++ b/src/locales/ro_RO.json
@@ -274,7 +274,7 @@
 		"changeTier": "Schimbă nivelul"
 	},
 	"donation": {
-		"progress": "<span>${totd}$</span> din <span>${goald}$</span>/lună, <span>${perc}%</span> din ținta lunară.",
+		"progress": "<span>{totd}$</span> din <span>{goald}$</span>/lună, <span>{perc}%</span> din ținta lunară.",
 		"upgradePush": "Pentru a te abona și să ai acces la benefici faine, vizitează <a href=\"/account/upgrade\">această pagină</a>."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ru_RU.json b/src/locales/ru_RU.json
index 61bfae5..048ff65 100644
--- a/src/locales/ru_RU.json
+++ b/src/locales/ru_RU.json
@@ -432,7 +432,7 @@
 		"unsubPrompt": "Вы уверены в том что хотите отписаться от <span>tiername</span>? Вы потеряете доступ к функциям которые были доступны на данном уровне."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> из <span>$${goald}</span>/в месяц, <span>${perc}%</span> от месячной цели.",
+		"progress": "<span>${totd}</span> из <span>${goald}</span>/в месяц, <span>{perc}%</span> от месячной цели.",
 		"upgradePush": "Чтобы стать подписчиком и получить доступ к крутым возможностям, посетите <a href=\"/account/upgrade\">upgrade page</a>."
 	},
 	"modals": {
@@ -461,4 +461,4 @@
 	"notfound": {
 		"description": "Упс! Мы не смогли найти эту страницу."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/sv_SE.json b/src/locales/sv_SE.json
index b0971a1..267c621 100644
--- a/src/locales/sv_SE.json
+++ b/src/locales/sv_SE.json
@@ -270,11 +270,11 @@
 	},
 	"donation": {
 		"upgradePush": "För att bli en prenumerant och få tillgång till coola förmåner, besök <a href=\"/account/upgrade\">uppgraderingssidan</a>.",
-		"progress": "<span>$${totd}</span> av <span>$${goald}</span>/månad, <span>${perc}%</span> av det månatliga målet."
+		"progress": "<span>${totd}</span> av <span>${goald}</span>/månad, <span>{perc}%</span> av det månatliga målet."
 	},
 	"modals": {
 		"close": "Stäng",
 		"confirm": "Bekräfta",
 		"cancel": "Avbryt"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/ta_IN.json b/src/locales/ta_IN.json
index ace37e0..9ae43f9 100644
--- a/src/locales/ta_IN.json
+++ b/src/locales/ta_IN.json
@@ -414,7 +414,7 @@
 		"back": "பின்"
 	},
 	"donation": {
-		"progress": "மாதாந்திர இலக்கில் <span>$${totd}</span> <span>$${goald}</span>/mouth, <span>${perc}%</span>.",
+		"progress": "மாதாந்திர இலக்கில் <span>${totd}</span> <span>${goald}</span>/mouth, <span>{perc}%</span>.",
 		"upgradePush": "சந்தாதாரராவதற்கும் சிறந்த சலுகைகளுக்கான அணுகலைப் பெறுவதற்கும், <a href=\"/account/upgrade\">மேம்படுத்தல் பக்கத்தைப்</a> பார்வையிடவும்."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "அச்சச்சோ! இந்தப் பக்கத்தை எங்களால் கண்டுபிடிக்க முடியவில்லை."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/tr_TR.json b/src/locales/tr_TR.json
index ef51c16..906be38 100644
--- a/src/locales/tr_TR.json
+++ b/src/locales/tr_TR.json
@@ -421,7 +421,7 @@
 	},
 	"donation": {
 		"upgradePush": "Abone olmak ve harika avantajlara erişmek için <a href=\"/account/upgrade\">yükseltme sayfasını</a> ziyaret edin.",
-		"progress": "Ayda <span>$${totd}</span>, <span>$${goald}</span>/ay, aylık hedefin <span>%${perc}</span>."
+		"progress": "Ayda <span>${totd}</span>, <span>${goald}</span>/ay, aylık hedefin <span>%{perc}</span>."
 	},
 	"blogPage": {
 		"published": "Tarafından yayınlandı",
@@ -454,4 +454,4 @@
 	"notfound": {
 		"description": "Woops! Bu sayfayı bulamadık."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/uk_UA.json b/src/locales/uk_UA.json
index e2b1a46..9a08a13 100644
--- a/src/locales/uk_UA.json
+++ b/src/locales/uk_UA.json
@@ -401,7 +401,7 @@
 		"unsubPrompt": "Ви впевнені, що бажаєте скасувати підписку на <span>tiername</span>? Ви втратите доступ до бонусів, пов’язаних із цим рівнем."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> з <span>$${goald}</span>/місяць, <span>${perc}%</span> місячної цілі.",
+		"progress": "<span>${totd}</span> з <span>${goald}</span>/місяць, <span>{perc}%</span> місячної цілі.",
 		"upgradePush": "Щоб стати передплатником і отримати доступ до цікавих бонусів, відвідайте <a href=\"/account/upgrade\">сторінку прокачки</a>."
 	},
 	"localizationPage": {
@@ -454,4 +454,4 @@
 	"notfound": {
 		"description": "Упс! Сторінка не знайдена."
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/zh_CN.json b/src/locales/zh_CN.json
index 0f6f12e..b7401f7 100644
--- a/src/locales/zh_CN.json
+++ b/src/locales/zh_CN.json
@@ -452,7 +452,7 @@
 		"back": "退回"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> <span>$${goald}</span>/月，<span>${perc}%</span> 的每月目标。",
+		"progress": "<span>${totd}</span> <span>${goald}</span>/月，<span>{perc}%</span> 的每月目标。",
 		"upgradePush": "要成为订阅者并获得超值福利，请访问<a href=\"/account/upgrade\">升级页面</a>。"
 	},
 	"modals": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "糟糕！我们找不到该页面。"
 	}
-}
+}
\ No newline at end of file
diff --git a/src/locales/zh_Hant.json b/src/locales/zh_Hant.json
index c07349e..dc17004 100644
--- a/src/locales/zh_Hant.json
+++ b/src/locales/zh_Hant.json
@@ -422,7 +422,7 @@
 		"publishedOn": "於"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span>的<span>$${goald}</span>/月，完成月度目標的<span>${perc}%</span>",
+		"progress": "<span>${totd}</span>的<span>${goald}</span>/月，完成月度目標的<span>{perc}%</span>",
 		"upgradePush": "若要成為訂閱者並獲得超棒的特權，請前往<a href=\"/account/upgrade\">升級頁面</a>。"
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 			"juxt_err": "錯誤代碼 - Juxt"
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 8b9fb65..1e434bd 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { ProgressItem } from '~~/shared/api-types';
+
 /* eslint-disable vue/no-v-html -- we might wanna avoid this by rewriting the locales to use variables */
 const { te, t, tm } = useI18n();
 const progress = await useFetch('/api/progress');
@@ -7,6 +9,19 @@ const nOfQAs = computed(() => tm<string>('faq.QAs') as string[]).value.length -
 const maxCoreStaffIndex = computed(() => tm<string>('credits.people') as string[]).value.length - 1;
 const maxContributorsIndex = computed(() => tm<string>('specialThanks.people') as string[]).value.length - 1;
 
+const summaryProgress = computed<ProgressItem>(() => {
+	return {
+		completion: progress.data.value?.completion ?? 0,
+		title: '',
+		tasks: (progress.data.value?.items ?? []).map((item) => {
+			return {
+				status: item.completion === 100 ? 'completed' : 'inprogress',
+				title: `${item.title} [${item.completion}%]`
+			};
+		})
+	};
+});
+
 function array(n: number) {
 	return Array.from({ length: n + 1 }, (_, i) => i);
 }
@@ -116,40 +131,35 @@ function titleSuffixHandler(path: string) {
     </div>
   </section>
 
-  <section class="progress column-2">
-    <div class="left sect">
-      <div class="left-meta">
-        <h2
-          id="about"
-          class="dot title"
-          :data-title-suffix="titleSuffixHandler('aboutUs.titleSuffix')"
-        >
-          {{ $t("aboutUs.title") }}
+    <section class="progress column-2">
+      <div class="left sect">
+        <div class="left-meta">
+          <h2
+            id="about"
+            class="dot title"
+            :data-title-suffix="titleSuffixHandler('aboutUs.titleSuffix')"
+          >
+            {{ $t("aboutUs.title") }}
+          </h2>
+          <p
+            v-for="i in computed(() => tm<string>('aboutUs.paragraphs') as string[]).value.length"
+            :key="i"
+            class="text"
+          >
+            {{ $t(`aboutUs.paragraphs[${i-1}]`) }}
+          </p>
+        </div>
+      </div>
+      <div class="right sect">
+        <h2 class="title">
+          <a href="/progress">{{ $t("progress.title") }}</a>
         </h2>
-        <p
-          v-for="i in computed(() => tm<string>('aboutUs.paragraphs') as string[]).value.length - 1"
-          :key="i"
-          class="text"
-        >
-          {{ $t(`aboutUs.paragraphs[${i}]`) }}
-        </p>
+        <ProgressCard
+          purple
+          :item="summaryProgress"
+        />
       </div>
-    </div>
-    <div class="right sect">
-      <h2 class="title">
-        <a href="/progress">{{ $t("progress.title") }} ({{ progress.data.value?.completion ?? 0 }}%)</a>
-      </h2>
-      <div
-        v-for="project of progress.data.value?.items ?? []"
-        :key="project.title"
-      >
-        <p>{{ project.title }} [{{ project.completion }}%]</p>
-      </div>
-      <p v-if="(progress.data.value?.items ?? []).length === 0">
-        No projects
-      </p>
-    </div>
-  </section>
+    </section>
 
   <section class="faq">
     <div class="sect-top sect">
diff --git a/src/pages/progress.vue b/src/pages/progress.vue
index 34df72b..97b18b4 100644
--- a/src/pages/progress.vue
+++ b/src/pages/progress.vue
@@ -1,34 +1,360 @@
 <script setup lang="ts">
+/* eslint-disable vue/no-v-html -- we might wanna avoid this by rewriting the locales to use variables */
+const { t } = useI18n();
+
 const progress = await useFetch('/api/progress');
 const projects = computed(() => progress.data.value?.items ?? []);
 const donations = computed(() => progress.data.value?.donations);
+const goalPercentage = computed(() => Math.floor((donations.value?.currentCents ?? 0) / (donations.value?.goalCents ?? 0) * 100));
+
+const goalText = computed(() => {
+	return t('donation.progress', {
+		totd: Math.round((donations.value?.currentCents ?? 0) / 100).toString(),
+		goald: Math.round((donations.value?.goalCents ?? 0) / 100).toString(),
+		perc: goalPercentage.value.toString()
+	});
+});
 </script>
 
 <template>
   <div>
-    <p>TODO: progress stub page</p>
-    <h1 v-if="donations">
-      {{ donations.currentCents }}¢ / {{ donations.goalCents }}¢
-    </h1>
-    <div
-      v-for="project of projects"
-      :key="project.title"
-    >
-      <h1>{{ project.title }} ({{ project.completion }}%)</h1>
-      <a
-        v-if="project.githubUrl"
-        :href="project.githubUrl"
-      >Github</a>
-      <p
-        v-for="task of project.tasks"
-        :key="task.title"
-      >
-        [{{ task.status }}] {{ task.title }}
-      </p>
-      <hr>
+    <div class="progress-hero">
+      <div class="hero-meta reduced-margin">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48.87"
+          height="71.093"
+          viewBox="0 0 48.87 71.093"
+        >
+          <g
+            id="XMLID_6_"
+            transform="translate(0)"
+          >
+            <path
+              id="XMLID_15_"
+              d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z"
+              transform="translate(-60.112 -20.086)"
+              fill="#9d6ff3"
+            />
+            <path
+              id="XMLID_14_"
+              d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z"
+              transform="translate(-54.766 -7.693)"
+              fill="#9d6ff3"
+            />
+            <path
+              id="XMLID_9_"
+              d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z"
+              transform="translate(-44.6 -33.522)"
+              fill="#9d6ff3"
+            />
+          </g>
+        </svg>
+        <h1 class="title dot">
+          {{ t('progressPage.title') }}
+        </h1>
+        <p class="text">
+          {{ t('progressPage.description') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="all-progress-lists">
+      <div class="donation-progress">
+        <h1 class="title dot">
+          <span>Donation goal</span>
+          <img
+            v-if="goalPercentage >= 100"
+            :src="'/assets/images/ganon.apng'"
+            alt="An animated image of Cucuí Ganon dancing"
+            class="cucui-dance"
+          >
+        </h1>
+        <div
+          class="progress-bar"
+          :style="{
+            '--progress-bar-width': goalPercentage + '%',
+          }"
+        >
+          <div
+            v-if="goalPercentage >= 100"
+            class="progress-bar-real"
+          />
+          <div class="progress-bar-capped" />
+        </div>
+        <p class="localeReplace">
+          <span
+            class="goal-text-content"
+            v-html="goalText"
+          />
+          {{ ' ' }}
+          <span v-html="t('donation.upgradePush')" />
+        </p>
+      </div>
+
+      <div
+        v-if="projects.length > 0"
+        id="quick-nav"
+      >
+        <h1 class="title dot">
+          Quick Nav
+        </h1>
+        <ul>
+          <li
+            v-for="project of projects"
+            :key="project.title"
+          >
+            <a :href="'#'+slugify(project.title)">{{ project.title }}</a>
+          </li>
+        </ul>
+      </div>
+      <br>
+      <div
+        v-for="project of projects"
+        :id="slugify(project.title)"
+        :key="project.title"
+        class="purple-card"
+      >
+        <ProgressCard
+          show-title
+          :item="project"
+        />
+      </div>
+      <p v-if="projects.length === 0">
+        No projects
+      </p>
     </div>
-    <p v-if="projects.length === 0">
-      No projects
-    </p>
   </div>
 </template>
+
+<style scoped>
+.purple-card {
+	padding: 50px 20px;
+	border-radius: 10px;
+	background: var(--bg-shade-0);
+}
+
+.progress-hero {
+	width: 100%;
+	display: flex;
+	justify-items: center;
+	align-items: center;
+	text-align: center;
+}
+.progress-hero svg {
+	width: 3rem;
+	height: 3rem;
+}
+.progress-hero .text {
+	max-width: 423px;
+	color: var(--text-shade-1);
+	line-height: 1.8;
+}
+.progress-hero .text a {
+	color: var(--accent-shade-1);
+	text-decoration: none;
+	font-weight: bold;
+}
+.progress-hero .text a:hover {
+	text-decoration: underline;
+}
+
+.hero-meta {
+	margin-top: 25vh;
+}
+.hero-meta.reduced-margin {
+	margin: 10vh 0;
+	width: 100%;
+}
+.hero-meta.reduced-margin h1 {
+	width: 100%;
+}
+.hero-meta.reduced-margin p {
+	margin: 0 auto;
+}
+.hero-image {
+	position: relative;
+	height: 100%;
+}
+
+.progress-bar {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 12px;
+	margin: 1rem 0;
+	border-radius: 6px;
+	background: var(--bg-shade-3);
+}
+.progress-bar-real,
+.progress-bar-capped {
+	position: absolute;
+	height: 100%;
+	border-radius: 6px;
+	width: var(--progress-bar-width);
+}
+.progress-bar-capped {
+	background-color: var(--accent-shade-0);
+	max-width: 100%;
+}
+.progress-bar-real {
+	background-color: var(--green-shade-1);
+	width: calc(var(--progress-bar-width) - 6px);
+	left: 6px;
+}
+
+.donation-progress {
+	padding: 72px 72px;
+  border-radius: 10px;
+  background: var(--bg-shade-0);
+	grid-column: span 2;
+}
+.donation-progress h1 {
+	display: inline-block;
+	margin: 0;
+}
+.donation-progress .goal-text-content :deep(span) {
+	font-weight: bold;
+}
+.donation-progress :deep(a) {
+	color: var(--accent-shade-1);
+	text-decoration: none;
+	font-weight: bold;
+}
+.donation-progress :deep(a:hover) {
+	text-decoration: underline;
+}
+
+.donation-progress .cucui-dance {
+	height: 2em;
+	margin-bottom: -0.6em;
+}
+
+.all-progress-lists {
+	margin-top: 50px;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 20px;
+}
+.feature-list-wrapper {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-gap: 20px;
+	margin-top: 22px;
+}
+.feature-progress-chart {
+	max-width: 100px;
+}
+.feature-progress-chart canvas.percentage-chart {
+	pointer-events: none; /* Fixes issue #48 */
+}
+.feature-list-wrapper h3 {
+	margin: 0;
+}
+.feature-list-wrapper hr {
+	border: 0;
+	width: 100%;
+	height: 1px;
+	margin: 20px 0;
+	background: rgba(255, 255, 255, 0.1);
+}
+.progress-title {
+	margin-bottom: 20px;
+}
+.progress-title a.github {
+	margin-top: 10px;
+	color: var(--text-shade-0);
+	display: inline-flex;
+	align-items: center;
+	opacity: .75;
+	text-decoration: none;
+	transition: color 50ms ease-in-out;
+}
+.progress-title a.github:focus, .progress-title a.github:hover, .progress-title a.github:visited {
+	color: var(--text-shade-0);
+	text-decoration: none;
+}
+.progress-title a.github:hover {
+	opacity: 1;
+}
+.progress-title a.github svg {
+	height: 1.3rem;
+	margin-right: .4rem;
+}
+.feature-list-wrapper.purple .progress-title a.github, .feature-list-wrapper.purple .progress-title a.github:focus, .feature-list-wrapper.purple .progress-title a.github:hover, .feature-list-wrapper.purple .progress-title a.github:visited {
+	color: var(--accent-shade-3);
+}
+.feature-list-wrapper .core > .progress-title a.github:hover {
+	color: white;
+}
+
+.feature-list-wrapper canvas {
+	width: 100px;
+	height: 100px;
+}
+
+.feature-progress-chart {
+	position: relative;
+}
+.feature-progress-chart p {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	margin: 0;
+	font-weight: bolder;
+	font-size: 1.3rem;
+}
+
+/* Progress: Feature list */
+.feature-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	grid-gap: 10px;
+}
+.feature {
+	display: grid;
+	align-items: flex-start;
+	grid-template-columns: auto 1fr;
+	grid-gap: 10px;
+}
+
+/* Custom checkboxes */
+.custom-checkbox {
+	width: 1.5rem;
+	height: 1.5rem;
+	background: var(--bg-shade-3);
+	color: var(--text-shade-3);
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.custom-checkbox.done {
+	background: #50AC75;
+}
+.custom-checkbox.ongoing {
+	background: #DBAC5B;
+}
+.custom-checkbox svg {
+	width: 100%;
+	height: 100%;
+}
+.custom-checkbox .small-dot {
+	width: 0.5rem;
+	height: 0.5rem;
+	background: white;
+	border-radius: 50%;
+}
+
+#quick-nav a {
+	color: var(--text-shade-1);
+	text-decoration: none;
+	width: fit-content;
+}
+
+#quick-nav a:hover {
+	color: var(--text-shade-3);
+	text-decoration: underline;
+}
+</style>