diff --git a/frontend/src/components/Progress.astro b/frontend/src/components/Progress.astro
new file mode 100644
index 0000000..42a49bf
--- /dev/null
+++ b/frontend/src/components/Progress.astro
@@ -0,0 +1,63 @@
+---
+type Props = {
+  id: string;
+  total: number;
+  confetti: boolean;
+};
+
+const { id, total, confetti = true } = Astro.props;
+---
+
+<x-progress data-confetti={`${confetti}`}>
+  <label for={id}>0 / {total}</label>
+  <progress {id} max={total} />
+  {import.meta.env.DEV && <button>Reset</button>}
+</x-progress>
+
+<style>
+  x-progress {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 2rem;
+    margin-bottom: -1rem;
+  }
+  progress {
+    margin: 0 !important;
+  }
+</style>
+
+<script>
+  import { subscribe, add, remove } from "./Checkpoint/checkpoint";
+
+  class Progress extends HTMLElement {
+    constructor() {
+      super();
+
+      const progress = this.querySelector("progress") as HTMLProgressElement;
+      const label = this.querySelector("label") as HTMLLabelElement;
+      const confetti: boolean = this.dataset.confetti === "true";
+      const id: string = progress.id;
+      const total: number = progress.max;
+      
+      subscribe(id, async (checkpoint) => {
+        const value = checkpoint.size < total ? checkpoint.size : total;
+        label.innerText = `${value} / ${total}`;
+        progress.value = value;
+        if (!confetti || value !== total || checkpoint.has(`${id}-confetti`)) {
+          return;
+        }
+        const confettis = await import("confettis");
+        confettis.create({ y: 2 });
+        add(`${id}-confetti`);
+      });
+
+      if (import.meta.env.DEV) {
+        const button = this.querySelector("button") as HTMLButtonElement;
+        button.addEventListener("click", () => remove(id));
+      }
+    }
+  }
+
+  customElements.define("x-progress", Progress);
+</script>
diff --git a/frontend/src/content/docs/en/first-steps/2-the-adventurers-guild.mdx b/frontend/src/content/docs/en/first-steps/2-the-adventurers-guild.mdx
index 570e82f..f508dbf 100755
--- a/frontend/src/content/docs/en/first-steps/2-the-adventurers-guild.mdx
+++ b/frontend/src/content/docs/en/first-steps/2-the-adventurers-guild.mdx
@@ -6,7 +6,7 @@ description: The hero registers into the Adventurer's Guild.
 import CodeQuestion from "@components/CodeQuestion.astro";
 import Portrait from "@components/Portrait/PortraitCard.astro";
 import Checkpoint from "@components/Checkpoint/Checkpoint.astro";
-import Progress from "@components/Progress.svelte";
+import Progress from "@components/Progress.astro";
 
 export const code_mess =
 `Seems like you've messed up the code, click the "Reset" button to return it back to its original state.
@@ -207,4 +207,4 @@ If you mess up the code, click the "Reset" button to return it to its original s
   />
 </Checkpoint>
 
-<Progress client:idle id="2" total={8} />
\ No newline at end of file
+<Progress id="2" total={8} />
\ No newline at end of file
diff --git a/frontend/src/content/docs/en/first-steps/3-the-first-quest.mdx b/frontend/src/content/docs/en/first-steps/3-the-first-quest.mdx
index 166990a..8a8426f 100644
--- a/frontend/src/content/docs/en/first-steps/3-the-first-quest.mdx
+++ b/frontend/src/content/docs/en/first-steps/3-the-first-quest.mdx
@@ -9,7 +9,7 @@ import { colors } from "@components/Portrait/portraits";
 import PText from "@components/Portrait/PortraitText.astro";
 import Highlight from "@components/Highlight.astro";
 import Checkpoint from "@components/Checkpoint/Checkpoint.astro";
-import Progress from "@components/Progress.svelte";
+import Progress from "@components/Progress.astro";
 
 export function Grocer(props) {
   return (
@@ -270,4 +270,4 @@ This seems like mission complete!
 Satisfied with your work, you return to the nearby inn and retire early to be ready for whatever comes tomorrow.
 </Checkpoint>
 
-<Progress client:idle id="3" total={5} />
\ No newline at end of file
+<Progress id="3" total={5} />
\ No newline at end of file
diff --git a/frontend/src/content/docs/en/first-steps/4-enrolling.mdx b/frontend/src/content/docs/en/first-steps/4-enrolling.mdx
index 1c03036..ba0fd1d 100644
--- a/frontend/src/content/docs/en/first-steps/4-enrolling.mdx
+++ b/frontend/src/content/docs/en/first-steps/4-enrolling.mdx
@@ -8,7 +8,7 @@ import { colors } from "@components/Portrait/portraits";
 import PText from "@components/Portrait/PortraitText.astro";
 import Highlight from "@components/Highlight.astro";
 import Checkpoint from "@components/Checkpoint/Checkpoint.astro";
-import Progress from "@components/Progress.svelte";
+import Progress from "@components/Progress.astro";
 import { Content as WIP } from "@components/WIP.mdx";
 
 export function Guild(props) {
@@ -243,4 +243,4 @@ Finally, the paperwork is over!
 You're exhausted after filling out all those forms, so you return to the inn and fall right into bed.
 </Checkpoint>
 
-<Progress client:idle id="4" total={4} />
\ No newline at end of file
+<Progress id="4" total={4} />
\ No newline at end of file