diff --git a/web/components/atoms/BackButton.tsx b/web/components/atoms/BackButton.tsx
new file mode 100644
index 00000000..06d5a604
--- /dev/null
+++ b/web/components/atoms/BackButton.tsx
@@ -0,0 +1,37 @@
+import { MouseEventHandler } from "react";
+
+interface Props {
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+}
+
+export default function BackButton({ onClick, disabled }: Props) {
+  return (
+    <button
+      className="group flex items-center gap-[2px] text-medium-gray"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M15 18L9 12L15 6"
+          className={`stroke-medium-gray ${disabled ? "stroke-dark-gray" : "group-hover:stroke-dark-gray"}`}
+          strokeWidth="3"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <div
+        className={`${disabled ? "text-dark-gray" : "group-hover:text-dark-gray"}`}
+      >
+        Back
+      </div>
+    </button>
+  );
+}
diff --git a/web/components/atoms/ProgressBar.tsx b/web/components/atoms/ProgressBar.tsx
new file mode 100644
index 00000000..ad0e33bc
--- /dev/null
+++ b/web/components/atoms/ProgressBar.tsx
@@ -0,0 +1,15 @@
+interface Props {
+  /** A number between 0 and 100 indicating the progress percentage */
+  progress: number;
+}
+
+export default function ProgressBar({ progress }: Props) {
+  return (
+    <div className="h-[6px] relative rounded-full bg-empty-gray">
+      <div
+        style={{ width: `${progress}%` }}
+        className="rounded-full bg-mbb-pink absolute top-0 left-0 bottom-0 transition-all"
+      />
+    </div>
+  );
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 907a87c4..ebe698ae 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -25,6 +25,7 @@ module.exports = {
         "dark-gray": "#666666",
         "icon-gray": "#BFBFBF",
         "icon-light-gray": "#DFE3E8",
+        "empty-gray": "#E3E3E3",
         dark: {
           100: "#BFBFBF",
           400: "#666666",