diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index 92749d0..4eddc1c 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -1,77 +1,51 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { API_ENDPOINT } from '../api/api';
+import Typography from '@material-ui/core/Typography';
+import { makeAPIGetCall } from '../api/utils';
 
 const maybePluralize = (count: number, noun: string, suffix = 's') =>
 	`${count} ${noun}${count !== 1 ? suffix : ''}`;
 
-const Group = () => {
+const SAMPLE_POOLS: Carpool.Pool[] = [
+	{
+		id: '1234',
+		title: 'TJ Carpool',
+		description: 'Carpool from TJ track to homes',
+		start_time: '4/10/2021 3:00 PM',
+		end_time: '4/10/2021 4:00 PM',
+		capacity: 2,
+		participant_ids: [],
+		comments: [
+			{
+				author_id: 'joshua_hsueh',
+				body: 'What is the covid vaccination status of all the participants?',
+				id: 'comment_0',
+			},
+		],
+		driver_id: 'michael',
+		create_time: '0',
+		update_time: '0',
+		group_id: 'test_group',
+		status: 'pending',
+		direction: 'dropoff',
+		author_id: 'michael',
+		type: 'offer',
+	},
+];
+
+export default function Group() {
 	// eslint-disable-next-line
 	const { id } = useParams<{ id: string }>();
-	const [pools, setPools] = useState([
-		{
-			id: 1,
-			pool_title: 'TJ Carpool',
-			pool_text: 'Carpool from TJ track to homes',
-			start_time: '4/10/2021 3:00 PM',
-			end_time: '4/10/2021 4:00 PM',
-			capacity: 2,
-			participants: [],
-			comments: [
-				'What is the covid vaccination status of all the participants?',
-			],
-		},
-		{
-			id: 2,
-			pool_title: 'TJ Carpool',
-			pool_text: 'Carpool from TJ track to homes',
-			start_time: '4/10/2021 3:00 PM',
-			end_time: '4/10/2021 4:00 PM',
-			capacity: 2,
-			participants: [],
-			comments: [
-				'What is the covid vaccination status of all the participants?',
-			],
-		},
-		{
-			id: 3,
-			pool_title: 'TJ Carpool',
-			pool_text: 'Carpool from TJ track to homes',
-			start_time: '4/10/2021 3:00 PM',
-			end_time: '4/10/2021 4:00 PM',
-			capacity: 2,
-			participants: [],
-			comments: [
-				'What is the covid vaccination status of all the participants?',
-			],
-		},
-		{
-			id: 4,
-			pool_title: 'TJ Carpool',
-			pool_text: 'Carpool from TJ track to homes',
-			start_time: '4/10/2021 3:00 PM',
-			end_time: '4/10/2021 4:00 PM',
-			capacity: 2,
-			participants: [],
-			comments: [
-				'What is the covid vaccination status of all the participants?',
-			],
-		},
-	]);
+	const [group, setGroup] = useState<Carpool.Group>();
+	const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
 
 	useEffect(() => {
-		console.log(process.env);
-		fetch(`${API_ENDPOINT}/my_pools`)
-			.then((response) => response.json())
-			.then((json) => {
-				if (json) {
-					setPools(json.data);
-				}
-			});
-	}, []);
+		makeAPIGetCall('/group', { id }).then((res) => setGroup(res.data.data));
+	}, [id]);
 
 	return (
-		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+		<div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+			<Typography variant="h1">Group</Typography>
 			<h1
 				className="d-flex justify-content-center p-4"
 				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
@@ -100,10 +74,10 @@ const Group = () => {
 							style={{ backgroundColor: background }}
 						>
 							<a href={'/Pool/' + pool.id} className="card-title">
-								{pool.pool_title}
+								{pool.title}
 							</a>
 							<p className="text-left">
-								Capacity: {pool.participants.length} / {pool.capacity}
+								Capacity: {pool.participant_ids.length} / {pool.capacity}
 							</p>
 							<p className="text-left">Start Time: {pool.start_time}</p>
 							<p className="text-left">End Time: {pool.end_time}</p>
@@ -116,6 +90,4 @@ const Group = () => {
 			</div>
 		</div>
 	);
-};
-
-export default Group;
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 56bc356..1adb69f 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -22,6 +22,7 @@ const useStyles = makeStyles({
 });
 const navLinks = [
 	{ title: `Profile`, path: `/profile` },
+	{ title: `Create Pool`, path: `/create_pool` },
 	// { title: `Groups`, path: `/groups` },
 	// { title: `MyGroups`, path: `/mygroups` },
 ];
diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx
index 80896ce..58644b8 100644
--- a/src/components/Pool.tsx
+++ b/src/components/Pool.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { useParams } from 'react-router';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
@@ -6,33 +6,38 @@ import Textarea from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import Comment from './Comment';
 import { makeAPIPostCall } from '../api/utils';
+import AuthenticationContext from './AuthenticationContext';
 
-export default function Pool({ registered = false }: { registered?: boolean }) {
+// eslint-disable-next-line
+const SAMPLE_POOL = {
+	id: '123',
+	title: 'TJ Carpool',
+	description: 'Carpool from TJ track to homes',
+	start_time: '4/10/2021 3:00 PM',
+	end_time: '4/10/2021 4:00 PM',
+	capacity: 2,
+	participant_ids: [],
+	comments: [
+		{
+			author_id: 'myfatemi04',
+			id: '1234',
+			body: "what's the vaccination status of everyone?",
+		},
+	],
+	driver_id: 'None',
+	create_time: '1234',
+	update_time: '1234',
+	group_id: 'tj',
+	status: 'pending',
+	direction: 'dropoff',
+	author_id: 'michael',
+	type: 'offer',
+};
+
+export default function Pool() {
 	const id = useParams<{ id: string }>().id;
-	const [pool, setPool] = useState<Carpool.Pool>({
-		id: '123',
-		title: 'TJ Carpool',
-		description: 'Carpool from TJ track to homes',
-		start_time: '4/10/2021 3:00 PM',
-		end_time: '4/10/2021 4:00 PM',
-		capacity: 2,
-		participant_ids: [],
-		comments: [
-			{
-				author_id: 'myfatemi04',
-				id: '1234',
-				body: "what's the vaccination status of everyone?",
-			},
-		],
-		driver_id: 'None',
-		create_time: '1234',
-		update_time: '1234',
-		group_id: 'tj',
-		status: 'pending',
-		direction: 'dropoff',
-		author_id: 'michael',
-		type: 'offer',
-	});
+	const [pool, setPool] = useState<Carpool.Pool>();
+	const { user } = useContext(AuthenticationContext);
 
 	const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
 	const [commentStatus, setCommentStatus] = useState<
@@ -69,6 +74,20 @@ export default function Pool({ registered = false }: { registered?: boolean }) {
 		[]
 	);
 
+	const onRegister = useCallback(() => {
+		if (user) {
+			let userID = user.id;
+			makeAPIPostCall('/join_pool', { id }).then(() => {
+				if (pool) {
+					setPool({
+						...pool,
+						participant_ids: [...pool.participant_ids, userID],
+					});
+				}
+			});
+		}
+	}, [user]);
+
 	useEffect(() => {
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
 			.then((response) => response.json())
@@ -81,50 +100,59 @@ export default function Pool({ registered = false }: { registered?: boolean }) {
 
 	return (
 		<Card style={{ margin: '3rem auto', padding: '1rem 1rem', width: '50%' }}>
-			<Typography variant="h2" align="center">
-				{pool.title}
-			</Typography>
-			<Typography variant="subtitle1">
-				<b>Capacity</b>: {pool.participant_ids.length} / {pool.capacity}
-			</Typography>
-			<Typography variant="subtitle1">
-				<b>Start Time</b>: {pool.start_time}
-			</Typography>
-			<Typography variant="subtitle1">
-				<b>End Time</b>: {pool.end_time}
-			</Typography>
-			<Typography variant="body1">{pool.description}</Typography>
-			<Button
-				variant="contained"
-				color="primary"
-				style={{ marginTop: '0.5rem' }}
-			>
-				{registered ? 'Unregister' : 'Register'}
-			</Button>
-			<hr />
-			<Textarea
-				cols={80}
-				ref={commentTextareaRef}
-				placeholder="Post a comment..."
-				disabled={commentStatus === 'pending'}
-				style={{ margin: '0.5rem 0rem' }}
-			/>
-			<Button
-				variant="contained"
-				onClick={onComment}
-				style={{ margin: '0.5rem 0rem' }}
-				disabled={commentStatus === 'pending'}
-			>
-				Post Comment
-			</Button>
-			<Typography variant="subtitle1">
-				{commentStatus === 'errored' && 'Error posting comment'}
-			</Typography>
-			<div style={{ display: 'flex', flexDirection: 'column' }}>
-				{pool.comments.map((comment) => (
-					<Comment comment={comment} key={comment.id} />
-				))}
-			</div>
+			{pool && (
+				<>
+					<Typography variant="h2" align="center">
+						{pool.title}
+					</Typography>
+					<Typography variant="subtitle1">
+						<b>Capacity</b>: {pool.participant_ids.length} / {pool.capacity}
+					</Typography>
+					<Typography variant="subtitle1">
+						<b>Start Time</b>: {pool.start_time}
+					</Typography>
+					<Typography variant="subtitle1">
+						<b>End Time</b>: {pool.end_time}
+					</Typography>
+					<Typography variant="body1">{pool.description}</Typography>
+					{user && (
+						<Button
+							variant="contained"
+							color="primary"
+							style={{ marginTop: '0.5rem' }}
+							onClick={onRegister}
+						>
+							{pool.participant_ids.includes(user.id)
+								? 'Unregister'
+								: 'Register'}
+						</Button>
+					)}
+					<hr />
+					<Textarea
+						cols={80}
+						ref={commentTextareaRef}
+						placeholder="Post a comment..."
+						disabled={commentStatus === 'pending'}
+						style={{ margin: '0.5rem 0rem' }}
+					/>
+					<Button
+						variant="contained"
+						onClick={onComment}
+						style={{ margin: '0.5rem 0rem' }}
+						disabled={commentStatus === 'pending'}
+					>
+						Post Comment
+					</Button>
+					<Typography variant="subtitle1">
+						{commentStatus === 'errored' && 'Error posting comment'}
+					</Typography>
+					<div style={{ display: 'flex', flexDirection: 'column' }}>
+						{pool.comments.map((comment) => (
+							<Comment comment={comment} key={comment.id} />
+						))}
+					</div>
+				</>
+			)}
 		</Card>
 	);
 }