diff --git a/frontend/src/components/Quota.tsx b/frontend/src/components/Quota.tsx
new file mode 100644
index 0000000..71def44
--- /dev/null
+++ b/frontend/src/components/Quota.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { useAuth } from "react-oidc-context";
+import { useEffect, useState } from "react";
+import { Nunito } from "next/font/google";
+import { api, Profile } from "muzak/data/fetcher";
+const nunito = Nunito({
+  subsets: ["latin"],
+});
+
+export default function Quota({
+  quota,
+  setQuota,
+}: {
+  quota: number | null;
+  setQuota: React.Dispatch<React.SetStateAction<number | null>>;
+}) {
+  const auth = useAuth();
+  async function getProfile() {
+    if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+      const { data: profile } = await api?.profiles?.me({});
+      setQuota(profile?.quota);
+    }
+  }
+  useEffect(() => {
+    getProfile();
+  }, [auth]);
+
+  if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+    return (
+      <h1
+        className={`${nunito.className} text-outline absolute right-0 bottom-0 p-6 text-[96px] font-bold tracking-tighter text-yellow-500`}
+      >
+        {quota}
+      </h1>
+    );
+  }
+}