diff --git a/frontend/src/components/NotificationCard/NotificationCard.tsx b/frontend/src/components/NotificationCard/NotificationCard.tsx
new file mode 100644
index 00000000..234b3d95
--- /dev/null
+++ b/frontend/src/components/NotificationCard/NotificationCard.tsx
@@ -0,0 +1,33 @@
+type UserInfo = {
+  name: string;
+  email: string;
+  account_type: string;
+};
+
+export default function NotificationCard({ name, email, account_type }: UserInfo) {
+  return (
+    <>
+      <div
+        className={
+          "flex items-center justify-between px-[40px] py-[60px] font-['Poppins'] text-[18px] "
+        }
+      >
+        <div id="person_info" className="">
+          <div className="font-['Poppins-Bold']">Name: {name}</div>
+          Email: {email}
+          <br></br>
+          Account Type: {account_type}
+        </div>
+
+        <div id="buttons" className="flex items-center space-x-[30px]">
+          <button className="h-[48px] w-[116px] rounded-full border border-pia_dark_green bg-pia_primary_white text-pia_dark_green">
+            Deny
+          </button>
+          <button className="h-[48px] w-[116px] rounded-full border bg-pia_dark_green text-pia_primary_white">
+            Approve
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/components/NotificationCard/NotificationTable.tsx b/frontend/src/components/NotificationCard/NotificationTable.tsx
new file mode 100644
index 00000000..bbeb915b
--- /dev/null
+++ b/frontend/src/components/NotificationCard/NotificationTable.tsx
@@ -0,0 +1,23 @@
+import NotificationCard from "./NotificationCard";
+
+export default function NotificationTable() {
+  return (
+    <div className="m-auto max-w-full border-collapse border-separate rounded-[15px] border-[1px] border-pia_neutral_gray bg-pia_primary_white">
+      <div>
+        <NotificationCard
+          name="Alice Anderson"
+          email="aliceanderson@gmail.com"
+          account_type="Team"
+        />
+      </div>
+      <div className="border-[1px] border-pia_neutral_gray" />
+      <div>
+        <NotificationCard name="Chloe Cai" email="chloe8cai@gmail.com" account_type="Admin" />
+      </div>
+      <div className="border-[1px] border-pia_neutral_gray" />
+      <div>
+        <NotificationCard name="Henry Harris" email="henryharris@gmail.com" account_type="Team" />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/NotificationCard/types.ts b/frontend/src/components/NotificationCard/types.ts
new file mode 100644
index 00000000..429b79f3
--- /dev/null
+++ b/frontend/src/components/NotificationCard/types.ts
@@ -0,0 +1,4 @@
+import { User } from "../../api/user";
+
+// export type Columns = ColumnDef<Student, string | Contact>[];
+export type StudentMap = User;
diff --git a/frontend/src/pages/notifications.tsx b/frontend/src/pages/notifications.tsx
index 5fb7a819..c733a674 100644
--- a/frontend/src/pages/notifications.tsx
+++ b/frontend/src/pages/notifications.tsx
@@ -1,3 +1,4 @@
+import NotificationTable from "@/components/NotificationCard/NotificationTable";
 import { useRedirectTo404IfNotAdmin, useRedirectToLoginIfNotSignedIn } from "@/hooks/redirect";
 
 export default function Notifications() {
@@ -5,7 +6,13 @@ export default function Notifications() {
   useRedirectTo404IfNotAdmin();
   return (
     <main>
-      <h1>PIA Notifications Page!</h1>
+      <div className="my-[30px] ml-[20px] mr-[80px] space-y-[20px]">
+        <div className="font-[alternate-gothic] text-4xl uppercase">Notifications</div>
+        <div className="font-[Poppins] text-[16px]">
+          Review information of new account creations below to approve or deny them.{" "}
+        </div>
+        <NotificationTable />
+      </div>
     </main>
   );
 }
diff --git a/frontend/src/styles/Poppins-Bold.otf b/frontend/src/styles/Poppins-Bold.otf
new file mode 100644
index 00000000..89cb9240
Binary files /dev/null and b/frontend/src/styles/Poppins-Bold.otf differ
diff --git a/frontend/src/styles/Poppins-Regular.otf b/frontend/src/styles/Poppins-Regular.otf
new file mode 100644
index 00000000..3b9e6cb9
Binary files /dev/null and b/frontend/src/styles/Poppins-Regular.otf differ
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index c952493c..28d66a38 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -10,6 +10,19 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "poppins";
+  src: url("./Poppins-Regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "poppins-bold";
+  src: url("./Poppins-Bold.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;