diff --git a/Website/webb/src/App.js b/Website/webb/src/App.js
index f8057f6..4ee8be0 100644
--- a/Website/webb/src/App.js
+++ b/Website/webb/src/App.js
@@ -1,6 +1,6 @@
 import { React } from 'react';
 import 'react-awesome-button/dist/styles.css';
-import CustomNavBar from './common/components/CustomNavBar.component.js';
+import CustomNavBar from './common/components/Navbars/VerticalNavbar.js';
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import HomePage from "./pages/HomePage.js";
 import About from "./pages/about.js";
@@ -9,7 +9,6 @@ import About from "./pages/about.js";
 function App() {
   return (
     <Router>
-      <CustomNavBar />
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/about" element={<About />} />
diff --git a/Website/webb/src/common/components/Logo.png b/Website/webb/src/assets/Logo.png
similarity index 100%
rename from Website/webb/src/common/components/Logo.png
rename to Website/webb/src/assets/Logo.png
diff --git a/Website/webb/src/common/components/BuildingDropdown.component.js b/Website/webb/src/common/components/BuildingDropdown.component.js
index 9633b53..b443adf 100644
--- a/Website/webb/src/common/components/BuildingDropdown.component.js
+++ b/Website/webb/src/common/components/BuildingDropdown.component.js
@@ -1,11 +1,9 @@
 import Select from 'react-select';
 
 const BuildingDropdown = ({ place_holder_text, building_options, setSelectedBuilding }) => {
-  // component for allowing a user to select a building from building options
-
   const handleChange = (selectedOption) => {
-    setSelectedBuilding(selectedOption)
-  }
+    setSelectedBuilding(selectedOption);
+  };
 
   return (
     <div id={place_holder_text}>
@@ -14,9 +12,15 @@ const BuildingDropdown = ({ place_holder_text, building_options, setSelectedBuil
         menuPosition={'fixed'}
         placeholder={place_holder_text}
         onChange={handleChange}
-        options={building_options} />
+        options={building_options}
+        styles={{
+          menuPortal: base => ({ ...base, zIndex: 9999 }), // Apply high z-index to the menu
+          menu: provided => ({ ...provided, zIndex: 9999 }), // Apply high z-index to the dropdown menu
+          option: provided => ({ ...provided, zIndex: 9999 }) // Apply high z-index to the dropdown options
+        }}
+      />
     </div>
   );
-}
+};
 
-export default BuildingDropdown;
\ No newline at end of file
+export default BuildingDropdown;
diff --git a/Website/webb/src/common/components/Map.js b/Website/webb/src/common/components/Map.js
index 8dd014c..9f52968 100644
--- a/Website/webb/src/common/components/Map.js
+++ b/Website/webb/src/common/components/Map.js
@@ -16,10 +16,11 @@ const Map = ({ buildingLocations, routeCordList, stairCordList, displayStairCord
     }
 
     return (
-        <MapContainer center={campus_center} zoom={17} style={{ width: "100%", height: "100vh" }}>
+        <MapContainer center={campus_center} zoom={17} style={{width:'100%', height: "100vh"}}>
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png"
+            
             />
 
             {/* Draw buildings */
diff --git a/Website/webb/src/common/components/NavBar.module.css b/Website/webb/src/common/components/NavBar.module.css
deleted file mode 100644
index 7e14466..0000000
--- a/Website/webb/src/common/components/NavBar.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/* NavBar.module.css */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
-
-.navbar {
-    font-family: 'Roboto', sans-serif;
-    text-align: center;
-    align-items: center;
-    margin-bottom: 0px;
-    border:2px solid #2397e9;
-    border-radius: 0%;
-}
-
-.navLink {
-    color: #3f3b3b;
-    font-weight: 300;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    transition: color 0.3s, background-color 0.3s;
-    text-decoration: none;
-    border-radius: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-.navLink:hover {
-    background-color: #aeccf1;
-}
-
-.navbarContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    justify-content: flex-start;
-}
\ No newline at end of file
diff --git a/Website/webb/src/common/components/Navbars/CustomNavBar.module.css b/Website/webb/src/common/components/Navbars/CustomNavBar.module.css
new file mode 100644
index 0000000..59f36f9
--- /dev/null
+++ b/Website/webb/src/common/components/Navbars/CustomNavBar.module.css
@@ -0,0 +1,34 @@
+/* NavBar.module.css */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
+
+.navbar {
+  font-family: "Roboto", sans-serif;
+  text-align: center;
+  align-items: center;
+  margin-bottom: 0px;
+  border: 2px solid #2397e9;
+  border-radius: 0%;
+}
+
+.navLink {
+  color: #3f3b3b;
+  font-weight: 300;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  transition: color 0.3s, background-color 0.3s;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.navLink:hover {
+  background-color: #aeccf1;
+}
+
+.navbarContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/Navbars/CustomNavbar.js
similarity index 86%
rename from Website/webb/src/common/components/CustomNavBar.component.js
rename to Website/webb/src/common/components/Navbars/CustomNavbar.js
index e35f45e..2c192bf 100644
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ b/Website/webb/src/common/components/Navbars/CustomNavbar.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Navbar, Nav, Container } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
-import CONFIG from '../../config.json'
+import CONFIG from '../../../config.json'
 
-import styles from './NavBar.module.css';
+import styles from './CustomNavBar.module.css';
 
 function CustomNavBar() {
   return (
     <Navbar bg="light" expand="lg" className={styles.navbar}>
       <Container className={styles.navbarContainer}>
         <Navbar.Brand as={NavLink} to="/">Accessible Routes</Navbar.Brand>
-        <img width="45px" height="40px" alt="Accessible Routes logo" src={require('./Logo.png')} />
+        <img width="45px" height="40px" alt="Accessible Routes logo" src={require('../../../assets/Logo.png')} />
           <Nav className="me-auto">
             <Nav.Link as={NavLink} to="/" className={styles.navLink}>
               Home
diff --git a/Website/webb/src/common/components/Navbars/VerticalNavBar.module.css b/Website/webb/src/common/components/Navbars/VerticalNavBar.module.css
new file mode 100644
index 0000000..3bc4060
--- /dev/null
+++ b/Website/webb/src/common/components/Navbars/VerticalNavBar.module.css
@@ -0,0 +1,41 @@
+/* NavBar.module.css */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
+
+.navbar {
+  font-family: "Roboto", sans-serif;
+  text-align: center;
+  align-items: center;
+  margin-bottom: 0px;
+  border-radius: 0%;
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar-toggler {
+  border: #ff0000;
+  top: 100px;
+}
+
+.navLink {
+  color: #3f3b3b;
+  font-weight: 300;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  transition: color 0.3s, background-color 0.3s;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.navLink:hover {
+  background-color: #aeccf1;
+}
+
+.navbarContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+}
diff --git a/Website/webb/src/common/components/Navbars/VerticalNavbar.js b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
new file mode 100644
index 0000000..b784812
--- /dev/null
+++ b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
@@ -0,0 +1,64 @@
+import React from "react";
+import { useState } from "react";
+import { Navbar, Nav, Container } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+import CONFIG from "../../../config.json";
+
+import styles from "./VerticalNavBar.module.css";
+import { flexbox } from "@mui/system";
+
+function VerticalNavBar({ toggle }) {
+  const [sidebarOpen, setSideBarOpen] = useState(toggle);
+  
+  return (
+    <Navbar bg="light" expand="lg" className={styles.navbar}>
+      {sidebarOpen && (
+        <>
+          <div>
+          <Navbar.Brand as={NavLink} to="/">
+            Accessible Routes
+          </Navbar.Brand>
+          <img
+            width="45px"
+            height="40px"
+            alt="Accessible Routes logo"
+            src={require("../../../assets/Logo.png")}
+          />
+          </div>
+          
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              
+              justifyContent:"space-around"
+
+            }}
+          >
+            <div style={{ flex: 1 }}>
+              <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+                Home
+              </Nav.Link>
+            </div>
+            <div style={{ flex: 1 }}>
+              <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+                About
+              </Nav.Link>
+            </div>
+            <div style={{ flex: 1 }}>
+              <Nav.Link
+                as={NavLink}
+                to={CONFIG.report_issue_page_link}
+                className={styles.navLink}
+              >
+                Contact Us
+              </Nav.Link>
+            </div>
+          </div>
+        </>
+      )}
+    </Navbar>
+  );
+}
+
+export default VerticalNavBar;
diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index 6dd511f..b3b5e59 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -1,14 +1,19 @@
-import './page.css';
-import { React, useState, useEffect } from 'react';
-import Button from '../common/components/Button.component';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import BuildingDropdown from '../common/components/BuildingDropdown.component';
-import { requestAllBuildings, ParseLocationsAndRoute, parseArtifacts } from '../helpers/requestHelper';
-import Map from '../common/components/Map';
-import RouteStatusPanel from '../common/components/RouteStatusPanel.component';
-
-import CONFIG from '../config.json'
+import "./page.css";
+import { React, useState, useEffect } from "react";
+import Button from "../common/components/Button.component";
+import Switch from "@mui/material/Switch";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import BuildingDropdown from "../common/components/BuildingDropdown.component";
+import {
+  requestAllBuildings,
+  ParseLocationsAndRoute,
+  parseArtifacts,
+} from "../helpers/requestHelper";
+import Map from "../common/components/Map";
+import RouteStatusPanel from "../common/components/RouteStatusPanel.component";
+
+import CONFIG from "../config.json";
+import VerticalNavBar from "../common/components/Navbars/VerticalNavbar";
 
 const HomePage = () => {
   // STATES
@@ -29,86 +34,134 @@ const HomePage = () => {
   const [displayingRoute, setDisplayingRoute] = useState(false);
   const [foundRoute, setFoundRoute] = useState(false);
 
+  const [toggle, setToggle] = useState(false);
+
   // EFFECTS
   useEffect(() => {
     // on mount
 
     // gather the name and UID of all the buildings from the backend
     requestAllBuildings(setAllBuildings).catch((err) => {
-      console.log('An error occurred. please contact developers and inform them of the following:');
-      console.log('site could not not retrieve all buildings from back-end.');
-      console.log('failed with the following error:');
-      console.log(err)
-    })
+      console.log(
+        "An error occurred. please contact developers and inform them of the following:"
+      );
+      console.log("site could not not retrieve all buildings from back-end.");
+      console.log("failed with the following error:");
+      console.log(err);
+    });
 
     // gather the location of all of the artifacts from the backend
     parseArtifacts(setStairCordList).catch((err) => {
-      console.log('An error occurred. please contact developers and inform them of the following:');
-      console.log('site could not not retrieve all stair locations from back-end.');
-      console.log('failed with the following error:');
-      console.log(err)
-    })
+      console.log(
+        "An error occurred. please contact developers and inform them of the following:"
+      );
+      console.log(
+        "site could not not retrieve all stair locations from back-end."
+      );
+      console.log("failed with the following error:");
+      console.log(err);
+    });
   }, []);
 
-
   const requestRoute = async () => {
-    const { buildings, route_details, route_found, error_found } = await ParseLocationsAndRoute(startingBuilding, destinationBuilding).catch((err) => { console.log('in the home page, the response from ParseLocationsAndRoute is: ', err) })
+    const { buildings, route_details, route_found, error_found } =
+      await ParseLocationsAndRoute(startingBuilding, destinationBuilding).catch(
+        (err) => {
+          console.log(
+            "in the home page, the response from ParseLocationsAndRoute is: ",
+            err
+          );
+        }
+      );
 
     if (!error_found) {
       if (route_found) {
-        setBuildingLocations(buildings)
-        setRouteCordList(route_details)
-        setFoundRoute(true)
+        setBuildingLocations(buildings);
+        setRouteCordList(route_details);
+        setFoundRoute(true);
       } else {
         // if there is not path route available, clear all markers and routes on map
-        setBuildingLocations([])
-        setRouteCordList([])
+        setBuildingLocations([]);
+        setRouteCordList([]);
         // display message to user that there was no route found between the buildings
       }
     }
 
     // inform user if no route was found
     if (error_found || route_found === false || !route_details?.length) {
-      setBuildingLocations([])
-      setRouteCordList([])
-      setFoundRoute(false)
+      setBuildingLocations([]);
+      setRouteCordList([]);
+      setFoundRoute(false);
     }
 
     // after a route has been selected, display the route status
     setDisplayingRoute(true);
-  }
-
+  };
 
   // RENDERING
   return (
-    <div className="Home Page">
-      <Map
-        routeCordList={routeCordList}
-        buildingLocations={buildingLocations} 
-        stairCordList={stairCordList}
-        displayStairCords={displayStairCords}
-        />
-      <div className="search-building-panel" >
-        <p class="h4">Find Route</p>
-        <BuildingDropdown
-          place_holder_text={'select starting building'}
-          building_options={allBuildings}
-          setSelectedBuilding={setStartingBuilding} />
-        <BuildingDropdown
-          place_holder_text={'select ending building'}
-          building_options={allBuildings}
-          setSelectedBuilding={setDestinationBuilding} />
-        <Button title={"find route"} onPressIn={requestRoute} />
-        <RouteStatusPanel displayPanel={displayingRoute} foundRoute={foundRoute} startingBuilding={startingBuilding} destinationBuilding={destinationBuilding} />
-        {/* TODO: replace with component: */}
-        {CONFIG.visible_display_stairs_option==="y" ? <FormControlLabel control={
-        <Switch 
-          onClick={() => {setDisplayStairCords(!displayStairCords)}}
-        />} label="Display Stairs" /> : <></>}
-        
+    <div style={{ display: "flex", flexDirection: "row" }}>
+
+      <button className = {'toggleButton'} onClick={() => setToggle(!toggle)}>{toggle ? "<" : ">"}</button>
+      {
+        toggle && (<div style={{ flex: 1 }}>
+          <VerticalNavBar toggle={toggle}></VerticalNavBar>
+        </div>
+        )}
+      
+
+      <div style={{ flex: 8, display: "flex", flexDirection: "column" }}>
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <p class="h4" style={{ flex: 1 }}>
+            Find Route
+          </p>
+          <div style={{ flex: 1, display: "flex" }}>
+            <BuildingDropdown
+              place_holder_text={"select starting building"}
+              building_options={allBuildings}
+              setSelectedBuilding={setStartingBuilding}
+            />
+            <BuildingDropdown
+              place_holder_text={"select ending building"}
+              building_options={allBuildings}
+              setSelectedBuilding={setDestinationBuilding}
+            />
+            <Button title={"find route"} onPressIn={requestRoute} />
+            <RouteStatusPanel
+              displayPanel={displayingRoute}
+              foundRoute={foundRoute}
+              startingBuilding={startingBuilding}
+              destinationBuilding={destinationBuilding}
+            />
+          </div>
+
+          {CONFIG.visible_display_stairs_option === "y" ? (
+            <FormControlLabel
+              control={
+                <Switch
+                  onClick={() => {
+                    setDisplayStairCords(!displayStairCords);
+                  }}
+                />
+              }
+              label="Display Stairs"
+            />
+          ) : (
+            <></>
+          )}
+        </div>
+
+        <div style={{ flex: 1 }}>
+          <Map
+            routeCordList={routeCordList}
+            buildingLocations={buildingLocations}
+            stairCordList={stairCordList}
+            displayStairCords={displayStairCords}
+          />
+        </div>
       </div>
     </div>
   );
-}
+};
 
 export default HomePage;
diff --git a/Website/webb/src/pages/about.js b/Website/webb/src/pages/about.js
index d2a2af0..aa4bc62 100644
--- a/Website/webb/src/pages/about.js
+++ b/Website/webb/src/pages/about.js
@@ -1,32 +1,49 @@
 import React from "react";
+import CustomNavBar from "../common/components/Navbars/CustomNavbar";
 
 const About = () => {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column", // Stack items vertically
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh",
-        padding: "0 20px", // Add padding for better readability
-        textAlign: "center", // Center-align text
-      }}
-    >
-      <img
-        src={require('../common/components/Logo.png')}
-        alt="Accessible Routes Logo"
-        style={{ width: "300px", marginBottom: "20px" }} // Adjust width as needed
-      />
-      <div style={{ maxWidth: "600px", margin: "auto" }}> {/* Center content horizontally */}
-        <h1 style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "20px" }}>
-          About Accessible Routes
-        </h1>
-        <p style={{ fontSize: "18px", lineHeight: "1.5" }}>
-          Accessible Routes was created during the summer semester of 2023 as a project in the Rensselaer Center for Open Source Software (RCOS). The goal of Accessible Routes is to help physically disabled students, staff, and faculty at RPI navigate our historic campus on a hill efficiently. This project would not be possible without the support of the Disabled Students at Rensselaer club (DSR).
-        </p>
+    <>
+      <CustomNavBar />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column", // Stack items vertically
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          padding: "0 20px", // Add padding for better readability
+          textAlign: "center", // Center-align text
+        }}
+      >
+        <img
+          src={require("../assets/Logo.png")}
+          alt="Accessible Routes Logo"
+          style={{ width: "300px", marginBottom: "20px" }} // Adjust width as needed
+        />
+        <div style={{ maxWidth: "600px", margin: "auto" }}>
+          {" "}
+          {/* Center content horizontally */}
+          <h1
+            style={{
+              fontSize: "24px",
+              fontWeight: "bold",
+              marginBottom: "20px",
+            }}
+          >
+            About Accessible Routes
+          </h1>
+          <p style={{ fontSize: "18px", lineHeight: "1.5" }}>
+            Accessible Routes was created during the summer semester of 2023 as
+            a project in the Rensselaer Center for Open Source Software (RCOS).
+            The goal of Accessible Routes is to help physically disabled
+            students, staff, and faculty at RPI navigate our historic campus on
+            a hill efficiently. This project would not be possible without the
+            support of the Disabled Students at Rensselaer club (DSR).
+          </p>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index 07fd999..16976f0 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -9,23 +9,39 @@
   color: white;
 }
 
+.CustomBar {
+  width: 90%;
+  position: relative;
+  right: 50%;
+}
 
 .Page {
-  display: flex;  
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .MyMap {
-  position: static;
+  position: relative;
+  width: 50%;
 }
 
-
 .search-building-panel {
-  width: 30%;
+  width: 100%;
+
   border: 2px solid #c6c6c6;
   border-bottom-left-radius: 80px 80px;
-  display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
-  flex-direction: column;
-  gap: 1rem;
-}
\ No newline at end of file
+  overflow: visible;
+  flex-direction: row;
+  gap: 2rem;
+  flex: 1;
+}
+
+.toggleButton {
+  background-color: #aeccf1;
+  border: none;
+  color: white;
+  font-size: 40px;
+  width: 2.4%;
+}