diff --git a/package-lock.json b/package-lock.json
index 98c8330..1d70a11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
 				"@types/react-router-dom": "^5.1.7",
 				"axios": "^0.21.1",
 				"bootstrap": "^4.6.0",
+				"dotenv": "^8.2.0",
 				"jquery": "^3.6.0",
 				"popper.js": "^1.16.1",
 				"react": "^17.0.2",
diff --git a/package.json b/package.json
index c605cfc..38478c7 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
 		"@types/react-router-dom": "^5.1.7",
 		"axios": "^0.21.1",
 		"bootstrap": "^4.6.0",
+		"dotenv": "^8.2.0",
 		"jquery": "^3.6.0",
 		"popper.js": "^1.16.1",
 		"react": "^17.0.2",
diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx
index 04172e2..d1c9aca 100644
--- a/src/components/CreatePool.tsx
+++ b/src/components/CreatePool.tsx
@@ -1,6 +1,16 @@
 import { FormEventHandler } from 'react';
+import { makeAPIPostCall } from '../api/utils';
+import React, { useState, useEffect } from 'react';
 
 const CreatePool = () => {
+	const [title, setTitle] = useState('No Title');
+	const [capacity, setCapacity] = useState(0);
+	const [start, setStart] = useState('');
+	const [end, setEnd] = useState('');
+	const [direction, setDirection] = useState('pickup');
+	const [type, setType] = useState('offer');
+	const [description, setDescription] = useState('');
+
 	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
 		e.preventDefault();
 
@@ -10,6 +20,27 @@ const CreatePool = () => {
 				console.log(data);
 			});
 	};
+	const onClick = () => {
+		console.log({
+			title: title,
+			description: description,
+			start_time: start,
+			end_time: end,
+			capacity,
+			direction,
+			type,
+		});
+		makeAPIPostCall('/pool', {
+			title: title,
+			description: description,
+			start_time: start,
+			end_time: end,
+			capacity,
+			direction,
+			type,
+		});
+	};
+	useEffect(() => {}, []);
 	return (
 		<div
 			className="bg-dark"
@@ -33,6 +64,7 @@ const CreatePool = () => {
 							name="title"
 							className="form-control d-flex"
 							placeholder="Enter title here..."
+							onChange={(event) => setTitle(event.target.value)}
 						></input>
 					</div>
 					<div className="form-group">
@@ -44,7 +76,8 @@ const CreatePool = () => {
 							id="capacity"
 							name="capacity"
 							className="form-control d-flex"
-							placeholder="5"
+							placeholder="0"
+							onChange={(event) => setCapacity(parseInt(event.target.value))}
 						></input>
 					</div>
 					<div className="form-group">
@@ -57,6 +90,7 @@ const CreatePool = () => {
 							name="pool_start"
 							className="form-control"
 							placeholder=""
+							onChange={(event) => setStart(event.target.value)}
 						></input>
 					</div>
 					<div className="form-group">
@@ -69,13 +103,41 @@ const CreatePool = () => {
 							name="pool_end"
 							className="form-control"
 							placeholder="Enter text here..."
+							onChange={(event) => setEnd(event.target.value)}
 						></input>
 					</div>
+					<div className="form-group">
+						<label className="" htmlFor="pool_direction">
+							Direction:
+						</label>
+						<select
+							id="direction"
+							name="direction"
+							onChange={(event) => setDirection(event.target.value)}
+						>
+							<option value="pickup">Picking Up</option>
+							<option value="dropoff">Dropping Off</option>
+						</select>
+					</div>
+					<div className="form-group">
+						<label className="" htmlFor="pool_type">
+							Type:
+						</label>
+						<select
+							id="type"
+							name="type"
+							onChange={(event) => setType(event.target.value)}
+						>
+							<option value="offer">Offering carpool</option>
+							<option value="request">Requesting carpooll</option>
+						</select>
+					</div>
 					<div className="form-group">
 						<label className="" htmlFor="title">
 							Pool Description:
 						</label>
 						<textarea
+							onChange={(event) => setDescription(event.target.value)}
 							id="Pool-text"
 							name="Pool-text"
 							style={{ height: '200px' }}
@@ -84,11 +146,9 @@ const CreatePool = () => {
 						/>
 					</div>
 
-					<input
-						className="btn btn-success text-left"
-						type="submit"
-						value="Submit"
-					/>
+					<button className="btn btn-success text-left" onClick={onClick}>
+						Submit
+					</button>
 					<br />
 				</form>
 			</div>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 1a3ca59..9123166 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -60,7 +60,7 @@ export default function Home() {
 							<u>About Us</u>
 						</h1>
 						<p className="d-flex justify-content-center m-2 p-2">
-							NAME is an app aimed to help communities find safe ways to
+							Wheelshare is an app aimed to help communities find safe ways to
 							carpool. The app has groups where people must be approved before
 							joining. Upon joining, users can create their own car pool inside
 							that communitiy or join others.
diff --git a/yarn.lock b/yarn.lock
index 7074bc6..62cd161 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4436,7 +4436,7 @@
   "resolved" "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz"
   "version" "5.1.0"
 
-"dotenv@8.2.0":
+"dotenv@^8.2.0", "dotenv@8.2.0":
   "integrity" "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
   "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
   "version" "8.2.0"