diff --git a/src/pages/Admin/Charity/Members/List.tsx b/src/pages/Admin/Charity/Members/List.tsx
new file mode 100644
index 0000000000..205c5d434b
--- /dev/null
+++ b/src/pages/Admin/Charity/Members/List.tsx
@@ -0,0 +1,67 @@
+import { useAdminContext } from "pages/Admin/Context";
+import { useUsersQuery } from "services/aws/users";
+import QueryLoader from "components/QueryLoader";
+import TableSection, { Cells } from "components/TableSection";
+
+export default function Loader() {
+  const { id } = useAdminContext();
+  const queryState = useUsersQuery(id);
+  return (
+    <QueryLoader
+      queryState={queryState}
+      classes={{ container: "mt-4 border-t pt-4 border-prim" }}
+      messages={{
+        loading: "Loading members...",
+        error: "Failed to get members",
+        empty: "No members found.",
+      }}
+    >
+      {(members) => (
+        <div className="grid col-span-full overflow-x-auto">
+          <Table members={members} />
+        </div>
+      )}
+    </QueryLoader>
+  );
+}
+
+type TableProps = {
+  classes?: string;
+  members: string[];
+};
+function Table({ members, classes = "" }: TableProps) {
+  return (
+    <table
+      className={`${classes} w-full text-sm rounded border border-separate border-spacing-0 border-prim`}
+    >
+      <TableSection
+        type="thead"
+        rowClass="bg-orange-l6 dark:bg-blue-d7 divide-x divide-prim"
+      >
+        <Cells
+          type="th"
+          cellClass="px-3 py-4 text-xs uppercase font-semibold text-left first:rounded-tl last:rounded-tr"
+        >
+          <></>
+          <>Email</>
+        </Cells>
+      </TableSection>
+      <TableSection
+        type="tbody"
+        rowClass="even:bg-orange-l6 dark:odd:bg-blue-d6 dark:even:bg-blue-d7 divide-x divide-prim"
+        selectedClass="bg-orange-l5 dark:bg-blue-d4"
+      >
+        {members.map((member) => (
+          <Cells
+            key={member}
+            type="td"
+            cellClass="p-3 border-t border-prim max-w-[256px] truncate first:rounded-bl last:rounded-br"
+          >
+            <>--</>
+            <>{member}</>
+          </Cells>
+        ))}
+      </TableSection>
+    </table>
+  );
+}
diff --git a/src/pages/Admin/Charity/Members/Members.tsx b/src/pages/Admin/Charity/Members/Members.tsx
index 7505072ea4..f9b7885f27 100644
--- a/src/pages/Admin/Charity/Members/Members.tsx
+++ b/src/pages/Admin/Charity/Members/Members.tsx
@@ -1,9 +1,10 @@
+import List from "./List";
+
 export default function Members() {
   return (
     <div className="grid content-start gap-y-6 @lg:gap-y-8 @container">
       <h3 className="text-[2rem]">Manage Members</h3>
-      {/* <Members /> */}
-      {/* <Settings /> */}
+      <List />
     </div>
   );
 }