diff --git a/src/components/MemberRow.tsx b/src/components/MemberRow.tsx
new file mode 100644
index 0000000..a31a946
--- /dev/null
+++ b/src/components/MemberRow.tsx
@@ -0,0 +1,24 @@
+import imageUrl from '../imageUrl';
+
+export default function MemberRow({ member }: { member: SGA.MemberDocument }) {
+	let thumbUrl: string | null = null;
+	if (member.profile_photo) {
+		thumbUrl = imageUrl(member.profile_photo).url();
+	}
+
+	return (
+		<div className='row'>
+			<div className='article-row-thumbnail'>
+				{thumbUrl ? (
+					<img className='mb-4' src={thumbUrl} alt={member.name} />
+				) : null}
+			</div>
+			<div className='article-row-content'>
+				<h3>{member.name}</h3>
+				<i>{member.role}, {member.year}</i>
+				<br />
+				<p>{member.bio}</p>
+			</div>
+		</div>
+	);
+}
diff --git a/src/pages/committee.tsx b/src/pages/committee.tsx
new file mode 100644
index 0000000..cfec114
--- /dev/null
+++ b/src/pages/committee.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Hero from '../components/Hero';
+import MemberRow from '../components/MemberRow';
+import useQuery from '../hooks/useInitiatives';
+
+export default function Committee() {
+	let excomm = useQuery<SGA.MemberDocument[]>(
+		`*[_type == 'member' && committee == 'excomm'] | order (role, year desc)`
+	);
+	// year desc because seniority 8)
+
+	if (!excomm) {
+		return null;
+	}
+
+	return (
+		<>
+			<Hero heading='Executive Committee' />
+			<div>
+				{excomm.map((member) => {
+					return <MemberRow member={member} />;
+				})}
+			</div>
+		</>
+	);
+}
diff --git a/src/pages/officers.tsx b/src/pages/officers.tsx
new file mode 100644
index 0000000..d3ff930
--- /dev/null
+++ b/src/pages/officers.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Hero from '../components/Hero';
+import MemberRow from '../components/MemberRow';
+import useQuery from '../hooks/useInitiatives';
+
+export default function Officers() {
+	let officers = useQuery<SGA.MemberDocument[]>(
+		`*[_type == 'member' && committee == 'officer']`
+	);
+
+	if (!officers) {
+		return null;
+	}
+
+	return (
+		<>
+			<Hero heading='Officers' />
+			<div>
+				{officers.map((officer) => {
+					return <MemberRow member={officer} />;
+				})}
+			</div>
+		</>
+	);
+}