diff --git a/src/App.js b/src/App.js
index 0eb065d..e7f2e16 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,35 +1,37 @@
-import React, { useState } from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import Nav from "./components/Nav";
-import Signin from "./components/auth/Signin";
-import Signup from "./components/auth/Signup";
-import Pools from "./components/Pools";
-import Pool from "./components/Pool";
-import Profile from "./components/Profile";
-import CreatePool from "./components/CreatePool";
-import Main from "./components/Main";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.bundle.min";
-import "./App.css";
-import ProtectedRoute from "./components/ProtectedRoute.js";
+import React, { useState } from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import Nav from './components/Nav';
+import Signin from './components/auth/Signin';
+import Signup from './components/auth/Signup';
+import Pools from './components/Pools';
+import Pool from './components/Pool';
+import Profile from './components/Profile';
+import CreatePool from './components/CreatePool';
+import UpdatePool from './components/UpdatePool';
+import Main from './components/Main';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+import './App.css';
+import ProtectedRoute from './components/ProtectedRoute.js';
 
 function App() {
-  return (
-    <div className="App">
-      <BrowserRouter>
-        <Nav />
-        <Switch>
-          <Route component={Signup} path="/register" />
-          <Route component={Signin} path="/login" />
-          <Route component={Main} path="/about" />
-          <ProtectedRoute component={CreatePool} path="/create_pool" />
-          <ProtectedRoute component={Pools} path="/pool" />
-          <ProtectedRoute component={Pool} path="/pool/:id" />
-          <ProtectedRoute component={Profile} path="/profile" />
-        </Switch>
-      </BrowserRouter>
-    </div>
-  );
+	return (
+		<div className="App">
+			<BrowserRouter>
+				<Nav />
+				<Switch>
+					<Route component={Signup} path="/register" />
+					<Route component={Signin} path="/login" />
+					<Route component={Main} path="/about" />
+					<ProtectedRoute component={CreatePool} path="/create_pool" />
+					<ProtectedRoute component={UpdatePool} path="/update_pool" />
+					<ProtectedRoute component={Pools} path="/pools" />
+					<ProtectedRoute component={Pool} path="/pool/:id" />
+					<ProtectedRoute component={Profile} path="/profile" />
+				</Switch>
+			</BrowserRouter>
+		</div>
+	);
 }
 
 export default App;
diff --git a/src/components/CreatePool.js b/src/components/CreatePool.js
index f322464..9e210bb 100644
--- a/src/components/CreatePool.js
+++ b/src/components/CreatePool.js
@@ -1,83 +1,107 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 
 const CreatePool = (props) => {
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const requestOptions = {
-      method: "Pool",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-      body: JSON.stringify({ Poolid: props.id }),
-    };
-    fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
-      .then((response) => response.json())
-      .then((data) => {
-        console.log(data);
-      });
-  };
-  return (
-    <div
-      className="bg-dark"
-      style={{ minHeight: "100vh", fontFamily: "Courier New" }}
-    >
-      <div
-        className="container card card-body text-left "
-        style={{ backgroundColor: "#F1EAE8" }}
-      >
-        <form onSubmit={onSubmit}>
-          <div className="form-group">
-            <h1 className="form-title" style={{ fontFamily: "Impact" }}>
-              Create Pool
-            </h1>
-            <label className="" for="title">
-              Pool Title:{" "}
-            </label>
-            <input
-              type="text"
-              id="title"
-              name="title"
-              className="form-control d-flex"
-              placeholder="Enter title here..."
-            ></input>
-          </div>
-          <div className="form-group">
-            <label className="" for="title">
-              Pool Capacity:
-            </label>
-            <input
-              type="number"
-              id="capacity"
-              name="capacity"
-              className="form-control d-flex"
-              placeholder="5"
-            ></input>
-          </div>
-          <div className="form-group">
-            <label className="" for="title">
-              Pool Description:
-            </label>
-            <textarea
-              type="text"
-              id="Pool-text"
-              name="Pool-text"
-              style={{ height: "200px" }}
-              className="form-control"
-              placeholder="Enter text here..."
-            ></textarea>
-          </div>
+	const onSubmit = (e) => {
+		e.preventDefault();
+		const requestOptions = {
+			method: 'Pool',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${localStorage.getItem('token')}`,
+			},
+			body: JSON.stringify({ Poolid: props.id }),
+		};
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(data);
+			});
+	};
+	return (
+		<div
+			className="bg-dark"
+			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
+		>
+			<div
+				className="container card card-body text-left "
+				style={{ backgroundColor: '#F1EAE8' }}
+			>
+				<form onSubmit={onSubmit}>
+					<div className="form-group">
+						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+							Create Pool
+						</h1>
+						<label className="" for="title">
+							Pool Title:{' '}
+						</label>
+						<input
+							type="text"
+							id="title"
+							name="title"
+							className="form-control d-flex"
+							placeholder="Enter title here..."
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="capacity">
+							Pool Capacity:
+						</label>
+						<input
+							type="number"
+							id="capacity"
+							name="capacity"
+							className="form-control d-flex"
+							placeholder="5"
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="pool_start">
+							Start Time:
+						</label>
+						<input
+							type="datetime-local"
+							id="pool_start"
+							name="pool_start"
+							className="form-control"
+							placeholder=""
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="pool_end">
+							End Time:
+						</label>
+						<input
+							type="datetime-local"
+							id="pool_end"
+							name="pool_end"
+							className="form-control"
+							placeholder="Enter text here..."
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="title">
+							Pool Description:
+						</label>
+						<textarea
+							type="text"
+							id="Pool-text"
+							name="Pool-text"
+							style={{ height: '200px' }}
+							className="form-control"
+							placeholder="Enter text here..."
+						></textarea>
+					</div>
 
-          <input
-            className="btn btn-success text-left"
-            type="submit"
-            value="Submit"
-          />
-          <br />
-        </form>
-      </div>
-    </div>
-  );
+					<input
+						className="btn btn-success text-left"
+						type="submit"
+						value="Submit"
+					/>
+					<br />
+				</form>
+			</div>
+		</div>
+	);
 };
 
 export default CreatePool;
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 3051b39..1fc371e 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -1,40 +1,40 @@
-import React from "react";
+import React from 'react';
 
 const Nav = (props) => {
-  return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
-      <button
-        className="navbar-toggler"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbarNavDropdown"
-        aria-controls="navbarNavDropdown"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span className="navbar-toggler-icon"></span>
-      </button>
-      <div className="collapse navbar-collapse" id="navbarNavDropdown">
-        <ul className="navbar-nav mr-auto">
-          <li className="nav-item">
-            <a className="nav-link text-white" href="/about">
-              Carpool <span className="sr-only">(current)</span>
-            </a>
-          </li>
-          <li className="nav-item">
-            <a className="nav-link text-white" href="/profile">
-              Profile <span className="sr-only">(current)</span>
-            </a>
-          </li>
-          <li className="nav-item">
-            <a className="nav-link text-white" href="/posts">
-              Posts
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-  );
+	return (
+		<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+			<button
+				className="navbar-toggler"
+				type="button"
+				data-toggle="collapse"
+				data-target="#navbarNavDropdown"
+				aria-controls="navbarNavDropdown"
+				aria-expanded="false"
+				aria-label="Toggle navigation"
+			>
+				<span className="navbar-toggler-icon"></span>
+			</button>
+			<div className="collapse navbar-collapse" id="navbarNavDropdown">
+				<ul className="navbar-nav mr-auto">
+					<li className="nav-item">
+						<a className="nav-link text-white" href="/">
+							Carpool <span className="sr-only">(current)</span>
+						</a>
+					</li>
+					<li className="nav-item">
+						<a className="nav-link text-white" href="/profile">
+							Profile <span className="sr-only">(current)</span>
+						</a>
+					</li>
+					<li className="nav-item">
+						<a className="nav-link text-white" href="/pools">
+							Pools
+						</a>
+					</li>
+				</ul>
+			</div>
+		</nav>
+	);
 };
 
 export default Nav;
diff --git a/src/components/Pool.js b/src/components/Pool.js
index e69de29..ed95c0d 100644
--- a/src/components/Pool.js
+++ b/src/components/Pool.js
@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+
+const Pool = (props) => {
+	const id = props.match.params.id;
+	const [state, setState] = useState({
+		pool_title: 'TJ Carpool',
+		id: 1,
+		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 requestOptions = {
+		method: 'GET',
+		headers: {
+			Authorization: `Bearer ${localStorage.getItem('token')}`,
+		},
+	};
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
+	const onComment = (e) => {
+		e.preventDefault();
+		const requestOptions = {
+			method: 'pool',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${localStorage.getItem('token')}`,
+			},
+			body: JSON.stringify({ poolid: props.id }),
+		};
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(data);
+			});
+	};
+	useEffect(() => {
+		callAPI();
+	}, []);
+	return (
+		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+			<h1
+				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+				className=" d-flex justify-content-center p-4"
+			>
+				Pool {id}
+			</h1>
+			<div className="container " style={{ fontFamily: 'Courier New' }}>
+				<div className="card card-body " style={{ backgroundColor: '#F1EAE8' }}>
+					<h1 className="card-title">{state.pool_title}</h1>
+					<p className="text-left">
+						Capacity: {state.participants.length} / {state.capacity}
+					</p>
+					<p className="text-left">Start Time: {state.start_time}</p>
+					<p className="text-left">End Time: {state.end_time}</p>
+					<p className="text-left">{state.pool_text}</p>
+				</div>
+				<form onSubmit={onComment}>
+					<div id="form-group" className="text-left">
+						<textarea
+							className="form-control"
+							id="comment"
+							type="text"
+							placeholder="Enter comment here..."
+						/>
+						<input className="btn btn-primary" type="submit" value="Submit" />
+					</div>
+					<br />
+				</form>
+				<div className="text-left">
+					<h4 className="text-white">Comments:</h4>
+					{state.comments.map((comment) => {
+						return (
+							<div
+								className="card card-body"
+								style={{ backgroundColor: '#D6D1D0' }}
+							>
+								<p className="card-text">{comment}</p>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Pool;
diff --git a/src/components/Pools.js b/src/components/Pools.js
index e69de29..62c28ba 100644
--- a/src/components/Pools.js
+++ b/src/components/Pools.js
@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from 'react';
+
+const Pools = (props) => {
+	const [state, setState] = useState({
+		Pools: [
+			{
+				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 requestOptions = {
+		method: 'GET',
+		headers: {
+			Authorization: `Bearer ${localStorage.getItem('token')}`,
+		},
+	};
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/Pools/`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
+
+	useEffect(() => {
+		callAPI();
+	}, []);
+	const maybePluralize = (count, noun, suffix = 's') =>
+		`${count} ${noun}${count !== 1 ? suffix : ''}`;
+	return (
+		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+			<h1
+				className="d-flex justify-content-center p-4"
+				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+			>
+				Pools
+			</h1>
+			<a
+				className="btn btn-large btn-success"
+				href="/create_pool"
+				style={{ fontFamily: 'Courier New' }}
+			>
+				Create Pool
+			</a>
+			<div className="container" style={{ fontFamily: 'Courier New' }}>
+				<br></br>
+				{state.Pools.map((Pool, el) => {
+					let background;
+					if (el % 2 == 0) {
+						background = '#F1EAE8';
+					} else {
+						background = '#FFFFFF';
+					}
+					return (
+						<div
+							className="card card-body text-left"
+							style={{ backgroundColor: background }}
+						>
+							<a href={'/Pool/' + Pool.id} className="card-title">
+								{Pool.pool_title}
+							</a>
+							<p className="text-left">
+								Capacity: {Pool.participants.length} / {Pool.capacity}
+							</p>
+							<p className="text-left">Start Time: {Pool.start_time}</p>
+							<p className="text-left">End Time: {Pool.end_time}</p>
+							<p className="text-warning">
+								{maybePluralize(Pool.comments.length, 'comment')}
+							</p>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default Pools;
diff --git a/src/components/Profile.js b/src/components/Profile.js
index e69de29..f085c07 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile.js
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+
+const Profile = (props) => {
+	const [state, setState] = useState({
+		user: { username: 'HyperionLegion' },
+		pools: [
+			{
+				pool_title: 'TJ Carpool',
+				pool_text: 'Carpool from TJ track to homes',
+				start_time: '4/10/2021 3:00 PM',
+				id: 1,
+				end_time: '4/10/2021 4:00 PM',
+				capacity: 2,
+				participants: [],
+				comments: [
+					'What is the covid vaccination status of all the participants?',
+				],
+			},
+			{
+				pool_title: 'TJ Carpool',
+				pool_text: 'Carpool from TJ track to homes',
+				start_time: '4/10/2021 3:00 PM',
+				id: 2,
+				end_time: '4/10/2021 4:00 PM',
+				capacity: 2,
+				participants: [],
+				comments: [
+					'What is the covid vaccination status of all the participants?',
+				],
+			},
+			{
+				pool_title: 'TJ Carpool',
+				pool_text: 'Carpool from TJ track to homes',
+				start_time: '4/10/2021 3:00 PM',
+				id: 3,
+				end_time: '4/10/2021 4:00 PM',
+				capacity: 2,
+				participants: [],
+				comments: [
+					'What is the covid vaccination status of all the participants?',
+				],
+			},
+		],
+		groups: [],
+	});
+	const [stocks, setStocks] = useState([]);
+
+	const requestOptions = {
+		method: 'GET',
+		headers: {
+			Authorization: `Bearer ${localStorage.getItem('token')}`,
+		},
+	};
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
+
+	useEffect(() => {
+		callAPI();
+	}, []);
+	return (
+		<div className="" style={{ minHeight: '100vh' }}>
+			<h1
+				className="d-flex justify-content-center p-4"
+				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+			>
+				Profile
+			</h1>
+			<div className="container" style={{ fontFamily: 'Courier New' }}>
+				<h1>Hello {state.user.username}!</h1>
+				<h2>Your Pools:</h2>
+				<div className="">
+					{state.pools.map((pool) => {
+						return (
+							<div
+								className="text-left m-2 p-1"
+								style={{ backgroundColor: '#D6D1D0' }}
+							>
+								<a href={'pool/' + pool.id}>{pool.pool_title}</a>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Profile;
diff --git a/src/components/UpdatePool.js b/src/components/UpdatePool.js
index e69de29..a9e8b26 100644
--- a/src/components/UpdatePool.js
+++ b/src/components/UpdatePool.js
@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+
+const UpdatePool = (props) => {
+	const id = props.match.params.id;
+	const [state, setState] = useState({
+		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 requestOptions = {
+		method: 'GET',
+		headers: {
+			Authorization: `Bearer ${localStorage.getItem('token')}`,
+		},
+	};
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
+	const onSubmit = (e) => {
+		e.preventDefault();
+		const requestOptions = {
+			method: 'Pool',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${localStorage.getItem('token')}`,
+			},
+			body: JSON.stringify({ Poolid: props.id }),
+		};
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(data);
+			});
+	};
+	useEffect(() => {
+		callAPI();
+	}, []);
+	return (
+		<div
+			className="bg-dark"
+			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
+		>
+			<div
+				className="container card card-body text-left "
+				style={{ backgroundColor: '#F1EAE8' }}
+			>
+				<form onSubmit={onSubmit}>
+					<div className="form-group">
+						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+							Create Pool
+						</h1>
+						<label className="" for="title">
+							Pool Title:{' '}
+						</label>
+						<input
+							type="text"
+							id="title"
+							name="title"
+							className="form-control d-flex"
+							placeholder="Enter title here..."
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="capacity">
+							Pool Capacity:
+						</label>
+						<input
+							type="number"
+							id="capacity"
+							name="capacity"
+							className="form-control d-flex"
+							placeholder="5"
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="pool_start">
+							Start Time:
+						</label>
+						<input
+							type="datetime-local"
+							id="pool_start"
+							name="pool_start"
+							className="form-control"
+							placeholder=""
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="pool_end">
+							End Time:
+						</label>
+						<input
+							type="datetime-local"
+							id="pool_end"
+							name="pool_end"
+							className="form-control"
+							placeholder="Enter text here..."
+						></input>
+					</div>
+					<div className="form-group">
+						<label className="" for="title">
+							Pool Description:
+						</label>
+						<textarea
+							type="text"
+							id="Pool-text"
+							name="Pool-text"
+							style={{ height: '200px' }}
+							className="form-control"
+							placeholder="Enter text here..."
+						></textarea>
+					</div>
+
+					<input
+						className="btn btn-success text-left"
+						type="submit"
+						value="Submit"
+					/>
+					<br />
+				</form>
+			</div>
+		</div>
+	);
+};
+
+export default UpdatePool;