diff --git a/src/App.tsx b/src/App.tsx
index 9ac66f8..75c0885 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,34 +1,25 @@
-
 import React from 'react';
-import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
-import RegisterPage from './pages/registerpage';
-import LoginPage from './pages/loginpage';
-import GoogleSignInPage from './pages/googlepage';
+import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from "./pages/RegisterPage";
+import AboutPage from "./pages/AboutPage";
+import HomePage from './pages/HomePage';
 
-const Home: React.FC = () => {
-  const navigate = useNavigate();
+// Nishil
+const App: React.FC = () => {
 
-  return (
-    <div>
-      <h2>Home Page</h2>
-      <button onClick={() => navigate('/register')}>Go to Register</button>
-      <button onClick={() => navigate('/login')}>Go to Login</button>
-      <button onClick={() => navigate('/google-signin')}>Go to Google Sign-In</button>
-    </div>
-  );
+    return (
+        <Router>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/login" element={<LoginPage/>} />
+                <Route path="/register" element={<RegisterPage />} />
+                <Route path="/about" element={<AboutPage />} />
+            </Routes>
+        </Router>
+    );
 };
 
-const App: React.FC = () => {
-  return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/register" element={<RegisterPage />} />
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/google-signin" element={<GoogleSignInPage />} />
-      </Routes>
-    </Router>
-  );
-};
 
-export default App;
+
+export default App;
\ No newline at end of file
diff --git a/src/components/googlelog.tsx b/src/Components/GoogleSSO.tsx
similarity index 88%
rename from src/components/googlelog.tsx
rename to src/Components/GoogleSSO.tsx
index 131a953..db11429 100644
--- a/src/components/googlelog.tsx
+++ b/src/Components/GoogleSSO.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { signInWithPopup } from 'firebase/auth';
 import { auth, googleProvider } from '../firebaseconfig';
 
-const GoogleSignIn: React.FC = () => {
+// Justin
+const GoogleSSO: React.FC = () => {
   const handleGoogleSignIn = async () => {
     try {
       await signInWithPopup(auth, googleProvider);
@@ -21,4 +22,4 @@ const GoogleSignIn: React.FC = () => {
   );
 };
 
-export default GoogleSignIn;
+export default GoogleSSO;
diff --git a/src/Components/TopNavBar.tsx b/src/Components/TopNavBar.tsx
index a751d93..c041aaf 100644
--- a/src/Components/TopNavBar.tsx
+++ b/src/Components/TopNavBar.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
 import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
 
+// Nishil
+// Implements the top navigation bar
 const TopNavBar: React.FC = () => {
     return (
-        <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
-            <Heading level={1}>Metroll</Heading>
-            <MenuTrigger>
-                <ActionButton>☰</ActionButton>
-                <Menu onAction={(key) => alert(key)}>
-                    <Item key="auth">Login/Sign In</Item>
-                    <Item key="home">Home</Item>
-                    <Item key="about">About</Item>
-                </Menu>
-            </MenuTrigger>
-        </Flex>
+
+            <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
+                <Heading level={1}>Metroll</Heading>
+                <MenuTrigger>
+                    <ActionButton>☰</ActionButton>
+                    <Menu /*onAction={(key) => alert(key)}*/>
+                        <Item href="/login" key="login" >Login/Sign In</Item>
+                        <Item href="/" key="">Home</Item>
+                        <Item href="/about" key="about">About</Item>
+                    </Menu>
+                </MenuTrigger>
+            </Flex>
     );
 }
 
diff --git a/src/Components/TransitBar.tsx b/src/Components/TransitBar.tsx
index 4ada4ec..b222715 100644
--- a/src/Components/TransitBar.tsx
+++ b/src/Components/TransitBar.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item, ActionGroup} from '@adobe/react-spectrum';
+import {Flex, Item, ActionGroup} from '@adobe/react-spectrum';
 
+// Nishil
+// Implements the three transit use case buttons
 const TransitBar: React.FC = () => {
     return (
         <Flex margin="auto" alignItems="center" justifyContent="center" height="100%">
@@ -9,7 +11,6 @@ const TransitBar: React.FC = () => {
                 <Item key="planner">Trip Planner</Item>
                 <Item key="routes">Routes</Item>
             </ActionGroup>
-
         </Flex>
     );
 }
diff --git a/src/components/login.tsx b/src/components/Login.tsx
similarity index 99%
rename from src/components/login.tsx
rename to src/components/Login.tsx
index 09db5a3..38d81d7 100644
--- a/src/components/login.tsx
+++ b/src/components/Login.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { signInWithEmailAndPassword } from 'firebase/auth';
 import { auth } from '../firebaseconfig';
 
+// Justin
 const Login: React.FC = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
diff --git a/src/components/register.tsx b/src/components/Register.tsx
similarity index 99%
rename from src/components/register.tsx
rename to src/components/Register.tsx
index ab0e20b..f64197e 100644
--- a/src/components/register.tsx
+++ b/src/components/Register.tsx
@@ -4,6 +4,7 @@ import { createUserWithEmailAndPassword } from 'firebase/auth';
 import { auth } from '../firebaseconfig';
 import { useNavigate } from 'react-router-dom';
 
+// Justin
 const Register: React.FC = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
diff --git a/src/components/TopNavBar.tsx b/src/components/TopNavBar.tsx
new file mode 100644
index 0000000..c041aaf
--- /dev/null
+++ b/src/components/TopNavBar.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {Flex, Heading, MenuTrigger, ActionButton, Menu, Item} from '@adobe/react-spectrum';
+
+// Nishil
+// Implements the top navigation bar
+const TopNavBar: React.FC = () => {
+    return (
+
+            <Flex margin="auto" justifyContent="space-between" alignItems="center" width="95%" height="100%">
+                <Heading level={1}>Metroll</Heading>
+                <MenuTrigger>
+                    <ActionButton>☰</ActionButton>
+                    <Menu /*onAction={(key) => alert(key)}*/>
+                        <Item href="/login" key="login" >Login/Sign In</Item>
+                        <Item href="/" key="">Home</Item>
+                        <Item href="/about" key="about">About</Item>
+                    </Menu>
+                </MenuTrigger>
+            </Flex>
+    );
+}
+
+export default TopNavBar;
diff --git a/src/components/TransitBar.tsx b/src/components/TransitBar.tsx
new file mode 100644
index 0000000..b222715
--- /dev/null
+++ b/src/components/TransitBar.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {Flex, Item, ActionGroup} from '@adobe/react-spectrum';
+
+// Nishil
+// Implements the three transit use case buttons
+const TransitBar: React.FC = () => {
+    return (
+        <Flex margin="auto" alignItems="center" justifyContent="center" height="100%">
+            <ActionGroup selectionMode="single" width="fit-content" defaultSelectedKeys={['planner']}>
+                <Item key="departures">Departures</Item>
+                <Item key="planner">Trip Planner</Item>
+                <Item key="routes">Routes</Item>
+            </ActionGroup>
+        </Flex>
+    );
+}
+
+export default TransitBar;
diff --git a/src/index.tsx b/src/index.tsx
index a19046d..f449765 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import Home from './Home';
+import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
@@ -9,7 +9,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <Home />
+    <App />
   </React.StrictMode> 
 );
 
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
new file mode 100644
index 0000000..70266da
--- /dev/null
+++ b/src/pages/AboutPage.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {defaultTheme, Provider} from "@adobe/react-spectrum";
+import {useNavigate} from "react-router-dom";
+
+const AboutPage: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Provider theme={defaultTheme}>
+            <div>
+                <button onClick={() => navigate('/')}>Home</button>
+                <h2>About Page</h2>
+                <p>This is the about page</p>
+            </div>
+        </Provider>
+    );
+};
+
+export default AboutPage;
+export {};
\ No newline at end of file
diff --git a/src/Home.tsx b/src/pages/HomePage.tsx
similarity index 84%
rename from src/Home.tsx
rename to src/pages/HomePage.tsx
index f665df4..3aea0b3 100644
--- a/src/Home.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import TopNavBar from './Components/TopNavBar';
+import TopNavBar from '../components/TopNavBar';
 import {Provider, defaultTheme, Grid, View} from "@adobe/react-spectrum";
-import TransitBar from "./Components/TransitBar";
+import TransitBar from "../components/TransitBar";
 
-function Home() {
+// Nishil
+// Arranges home page layout using react-spectrum and grid
+const HomePage: React.FC = () => {
     return (
         <Provider theme={defaultTheme}>
             <Grid
@@ -32,4 +34,4 @@ function Home() {
     );
 }
 
-export default Home;
+export default HomePage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..245219f
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,21 @@
+// src/LoginPage.tsx
+import React from 'react';
+import Login from '../components/Login';
+import {useNavigate} from "react-router-dom";
+import GoogleSignIn from "../components/GoogleSSO";
+
+// Nishil & Justin
+const LoginPage: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+            <button onClick={() => navigate('/')}>Home</button>
+            <Login />
+            <GoogleSignIn />
+            <button onClick={() => navigate('/register')}>Go to Register</button>
+        </div>
+    );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..eb1ecfa
--- /dev/null
+++ b/src/pages/RegisterPage.tsx
@@ -0,0 +1,20 @@
+// src/RegisterPage.tsx
+import React from 'react';
+import Register from '../components/Register';
+import {useNavigate} from "react-router-dom";
+
+// Nishil & Justin
+const RegisterPage: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+            <button onClick={() => navigate('/')}>Home</button>
+            <Register />
+            <button onClick={() => navigate('/login')}>Go to Login</button>
+        </div>
+    );
+};
+
+export default RegisterPage;
+
diff --git a/src/pages/googlepage.tsx b/src/pages/googlepage.tsx
deleted file mode 100644
index 4a0b4bb..0000000
--- a/src/pages/googlepage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// src/GoogleSignInPage.tsx
-import React from 'react';
-import GoogleSignIn from '../components/googlelog';
-
-const GoogleSignInPage: React.FC = () => {
-  return (
-    <div>
-      <h2>Google Sign-In Page</h2>
-      <GoogleSignIn />
-    </div>
-  );
-};
-
-export default GoogleSignInPage;
-export {};
\ No newline at end of file
diff --git a/src/pages/loginpage.tsx b/src/pages/loginpage.tsx
deleted file mode 100644
index a7edda3..0000000
--- a/src/pages/loginpage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// src/LoginPage.tsx
-import React from 'react';
-import Login from '../components/login';
-
-const LoginPage: React.FC = () => {
-  return (
-    <div>
-      <h2>Login Page</h2>
-      <Login />
-    </div>
-  );
-};
-
-export default LoginPage;
-export {};
\ No newline at end of file
diff --git a/src/pages/registerpage.tsx b/src/pages/registerpage.tsx
deleted file mode 100644
index 9141430..0000000
--- a/src/pages/registerpage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// src/RegisterPage.tsx
-import React from 'react';
-import Register from '../components/register';
-
-const RegisterPage: React.FC = () => {
-  return (
-    <div>
-      <h2>Register Page</h2>
-      <Register />
-    </div>
-  );
-};
-
-export default RegisterPage;
-export {};