diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4b2861f..f2771cb 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -2,17 +2,33 @@ import "./App.css";
 import { Route } from "wouter";
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
-import { UserContextProvider } from "./contexts/UserContext";
 import LogoutPage from "./pages/LogoutPage";
+import RegisterPage from "./pages/RegisterPage";
+import AuthenticatedRoute from "./components/AuthenticatedRoute";
 
 function App() {
   return (
     <div className="App">
-      <UserContextProvider>
-        <Route path="/" component={HomePage} />
-        <Route path="/login" component={LoginPage} />
-        <Route path="/logout" component={LogoutPage} />
-      </UserContextProvider>
+      <Route path="/login">
+        <AuthenticatedRoute isAuthenticated={false}>
+          <LoginPage />
+        </AuthenticatedRoute>
+      </Route>
+      <Route path="/logout">
+        <AuthenticatedRoute isAuthenticated={false}>
+          <LogoutPage />
+        </AuthenticatedRoute>
+      </Route>
+      <Route path="/register">
+        <AuthenticatedRoute isAuthenticated={false}>
+          <RegisterPage />
+        </AuthenticatedRoute>
+      </Route>
+      <Route path="/">
+        <AuthenticatedRoute isAuthenticated={true}>
+          <HomePage />
+        </AuthenticatedRoute>
+      </Route>
     </div>
   );
 }
diff --git a/frontend/src/components/AuthenticatedRoute.jsx b/frontend/src/components/AuthenticatedRoute.jsx
new file mode 100644
index 0000000..9d7b5bc
--- /dev/null
+++ b/frontend/src/components/AuthenticatedRoute.jsx
@@ -0,0 +1,20 @@
+import { useContext, useEffect } from "react";
+import { useLocation } from "wouter";
+import UserContext from "../contexts/UserContext";
+
+const AuthenticatedRoute = ({ children, isAuthenticated }) => {
+  const { currentUser } = useContext(UserContext);
+  const [location, setLocation] = useLocation();
+
+  useEffect(() => {
+    if (isAuthenticated && !currentUser?.id) {
+      setLocation("/login");
+    } else if (!isAuthenticated && currentUser?.id) {
+      setLocation("/");
+    }
+  }, [currentUser]);
+
+  return children;
+};
+
+export default AuthenticatedRoute;
diff --git a/frontend/src/components/MyNavbar.jsx b/frontend/src/components/MyNavbar.jsx
index 1cd46ff..d63cf7a 100644
--- a/frontend/src/components/MyNavbar.jsx
+++ b/frontend/src/components/MyNavbar.jsx
@@ -1,20 +1,30 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { Nav, Container, Navbar } from "react-bootstrap";
+import { Link } from "wouter";
 import UserContext from "../contexts/UserContext";
 
 const MyNavbar = () => {
   const { currentUser } = useContext(UserContext);
+
+  const MyLink = ({ children, ...rest }) => {
+    return (
+      <Nav.Link as={Link} {...rest}>
+        {children}
+      </Nav.Link>
+    );
+  };
+
   return (
     <Navbar variant="dark" bg="dark" expand="lg">
       <Container>
-        <Navbar.Brand href="/">LearningTree</Navbar.Brand>
+        <Navbar.Brand as={Link} href="/">LearningTree</Navbar.Brand>
         <Navbar.Toggle aria-controls="navbar-nav" />
         <Navbar.Collapse id="navbar-nav">
           <Nav className="ms-auto">
-            <Nav.Link href="/">Home</Nav.Link>
-            {(currentUser?.id && (
-              <Nav.Link href="/logout">Logout</Nav.Link>
-            )) || <Nav.Link href="/login">Login</Nav.Link>}
+            <MyLink href="/">Home</MyLink>
+            {(currentUser?.id && <MyLink href="/logout">Logout</MyLink>) || (
+              <MyLink href="/login">Login</MyLink>
+            )}
           </Nav>
         </Navbar.Collapse>
       </Container>
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 06f12b9..61fef7d 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,14 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { UserContextProvider } from "./contexts/UserContext";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <UserContextProvider>
+      <App />
+    </UserContextProvider>
   </React.StrictMode>
 );
 
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index ebc5b5d..467f6d8 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { Container } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
@@ -6,18 +6,12 @@ import UserContext from "../contexts/UserContext";
 const HomePage = () => {
   const { currentUser } = useContext(UserContext);
 
-  useEffect(() => {
-    if (!currentUser?.id) {
-      window.location.replace("/login");
-    }
-  }, [currentUser]);
-
   return (
     <div>
       <MyNavbar />
-      <Container>
+      <Container className="p-5">
         <div>
-          <h1>This is the home page</h1>
+          <h1>Welcome back {currentUser?.username}!</h1>
         </div>
       </Container>
     </div>
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 21ef318..5f55e96 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
+import { Link, useLocation } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
 import { makeRequest } from "../utils.ts";
@@ -10,16 +11,16 @@ const LoginPage = () => {
   const [error, setError] = useState(null);
 
   const { currentUser, setCurrentUser } = useContext(UserContext);
+  const [location, setLocation] = useLocation();
 
   useEffect(() => {
-    console.log(currentUser);
     if (currentUser?.id) {
       gotoHome();
     }
   }, [currentUser]);
 
   const gotoHome = () => {
-    window.location.href = "/";
+    setLocation("/");
   };
 
   const sendLoginRequest = async (e) => {
@@ -42,14 +43,16 @@ const LoginPage = () => {
   return (
     <React.Fragment>
       <MyNavbar />
-      {error && (
-        <Container>
-          <Alert variant="danger" className="m-4 mx-auto w-50 text-center">
-            {error.message}
-          </Alert>
-        </Container>
-      )}
       <Container className="p-5">
+        {error && (
+          <Container>
+            <Alert variant="danger" className="mx-auto w-50 text-center">
+              {error.message}
+            </Alert>
+          </Container>
+        )}
+        <h2>Login</h2>
+        <br />
         <Form onSubmit={sendLoginRequest}>
           <Form.Group as={Row} className="mb-3" controlId="username">
             <Form.Label column sm={2} className="me-2">
@@ -87,7 +90,7 @@ const LoginPage = () => {
           </Form.Group>
           <Form.Group as={Row}>
             <p>
-              Don't have an account? <a href="/register">Register here</a>
+              Don't have an account? <Link href="/register">Register here</Link>
             </p>
           </Form.Group>
         </Form>
diff --git a/frontend/src/pages/RegisterPage.jsx b/frontend/src/pages/RegisterPage.jsx
new file mode 100644
index 0000000..37796d5
--- /dev/null
+++ b/frontend/src/pages/RegisterPage.jsx
@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
+import { Link, useLocation } from "wouter";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const RegisterPage = () => {
+  const [role, setRole] = useState("student");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [password2, setPassword2] = useState("");
+
+  const [error, setError] = useState(null);
+  const [location, setLocation] = useLocation();
+
+  const sendRegisterRequest = (e) => {
+    e?.preventDefault();
+    makeRequest({
+      url: "http://localhost:5000/register",
+      method: "POST",
+      body: {
+        role,
+        email,
+        username,
+        password,
+        password2,
+      },
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data.error) {
+          setError(data);
+          return;
+        }
+        setLocation("/login");
+      });
+  };
+
+  return (
+    <React.Fragment>
+      <MyNavbar />
+      <Container className="p-5">
+        {error && (
+          <Container>
+            <Alert variant="danger" className="mx-auto w-50 text-center">
+              {error.message}
+            </Alert>
+          </Container>
+        )}
+        <h2>Register</h2>
+        <br />
+        <Form onSubmit={sendRegisterRequest}>
+          <Form.Group as={Row} className="mb-3" controlId="role">
+            <Form.Label column sm={2} className="me-2">
+              Role
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Select
+                onChange={(e) => {
+                  setRole(e.target.value);
+                }}
+              >
+                <option value="student">Student</option>
+                <option value="teacher">Teacher</option>
+              </Form.Select>
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="username">
+            <Form.Label column sm={2} className="me-2">
+              Username
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="username"
+                placeholder="username"
+                onChange={(e) => {
+                  setUsername(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="email">
+            <Form.Label column sm={2} className="me-2">
+              Email
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="email"
+                placeholder="email"
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="password">
+            <Form.Label column sm={2} className="me-2">
+              Password
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="password"
+                placeholder="password"
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="password2">
+            <Form.Label column sm={2} className="me-2">
+              Confirm Password
+            </Form.Label>
+            <Col sm={9}>
+              <Form.Control
+                type="password"
+                placeholder="password"
+                onChange={(e) => {
+                  setPassword2(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="submit">
+            <Col sm={2}></Col>
+            <Col sm={2}>
+              <Button
+                type="submit"
+                disabled={!password || password !== password2}
+              >
+                Submit
+              </Button>
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row}>
+            <p>
+              Already have an account? <Link href="/login">Login here</Link>
+            </p>
+          </Form.Group>
+        </Form>
+      </Container>
+    </React.Fragment>
+  );
+};
+
+export default RegisterPage;