diff --git a/Open-Source/package-lock.json b/Open-Source/package-lock.json
index 610dbee..819b419 100644
--- a/Open-Source/package-lock.json
+++ b/Open-Source/package-lock.json
@@ -12,7 +12,8 @@
         "leaflet": "^1.9.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-leaflet": "^4.2.1"
+        "react-leaflet": "^4.2.1",
+        "react-scroll": "^1.8.9"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -2317,6 +2318,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2374,7 +2380,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2624,7 +2629,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -2686,8 +2690,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-leaflet": {
       "version": "4.2.1",
@@ -2702,6 +2705,19 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -4874,6 +4890,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4912,8 +4933,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -5083,7 +5103,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5122,8 +5141,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-leaflet": {
       "version": "4.2.1",
@@ -5133,6 +5151,15 @@
         "@react-leaflet/core": "^2.1.0"
       }
     },
+    "react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
diff --git a/Open-Source/package.json b/Open-Source/package.json
index fb15fd1..6c9a29c 100644
--- a/Open-Source/package.json
+++ b/Open-Source/package.json
@@ -14,7 +14,8 @@
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "react-scroll": "^1.8.9"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/Open-Source/src/App.jsx b/Open-Source/src/App.jsx
index 1d882f0..4058fe7 100644
--- a/Open-Source/src/App.jsx
+++ b/Open-Source/src/App.jsx
@@ -1,5 +1,6 @@
 import CampusMap from './Components/CampusMap'
 import Building from './Components/Building'
+import NavBar from './Components/NavBar';
 import './App.css'
 
 function App() {
@@ -8,10 +9,13 @@ function App() {
   return (
     <>
       <div className="App">
-        <h1> Interactive Map made with React and Leaflet</h1>
-        <CampusMap />
-        <Building buildingName="Library" numberOfFloors={[1, 2, 3, 4, 5, 6]} />
-       
+          <NavBar />
+        <div id="campus-map">
+          <CampusMap />
+        </div>
+        <div id="building">
+          <Building buildingName="Library" numberOfFloors={[1, 2, 3, 4, 5, 6]} />
+        </div>
       </div>
     </>
   )
diff --git a/Open-Source/src/Components.css b/Open-Source/src/Components.css
index 0147aa0..a56d50d 100644
--- a/Open-Source/src/Components.css
+++ b/Open-Source/src/Components.css
@@ -70,11 +70,13 @@ img {
 }
 
 h3 {
+    color: black;
     padding-bottom: 0;
     margin-bottom: 0;
 }
 
 .floor-title {
+    color:black;
     padding-top: 0;
     margin-top: 0;
     margin-bottom: auto;
@@ -134,4 +136,33 @@ header {
 /*Center's the building image */
 .building {
     display: center;
-}
\ No newline at end of file
+}
+
+
+/* Nav Bar */
+
+.navbar {
+    display: flex;
+    justify-content: center;
+    background-color: #333;
+    padding: 10px 0;
+}
+
+.nav-item {
+    margin: 0 20px;
+}
+
+.nav-item a {
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.nav-item a:hover {
+    background-color: #555;
+}
+
+
diff --git a/Open-Source/src/Components/Building.jsx b/Open-Source/src/Components/Building.jsx
index 7a01c49..10bd03d 100644
--- a/Open-Source/src/Components/Building.jsx
+++ b/Open-Source/src/Components/Building.jsx
@@ -1,4 +1,12 @@
 import Floor from './Floor'
+import { Element } from 'react-scroll';
+import PropTypes from 'prop-types';
+
+
+Building.propTypes = {
+    buildingName: PropTypes.string.isRequired,
+    numberOfFloors: PropTypes.arrayOf(PropTypes.number).isRequired
+};
 
 function Building({buildingName, numberOfFloors}){
     // numberOfFloors must be an array
@@ -36,18 +44,19 @@ function Building({buildingName, numberOfFloors}){
     })
     
     return (
-        <div className="building">
-            <header>
-                <h1 className="buildingName">QC's {buildingName} Bathroom Status</h1>
-                <a>Issue? Report here</a>
-            </header>
-            <div className="ListView">
-                {floors}
+        <Element name="buildingView">
+            <div className="building">
+                <header>
+                    <h1 className="buildingName">QC&apos;s {buildingName} Bathroom Status</h1>
+                    <a>Issue? Report here</a>
+                </header>
+                <div className="ListView">
+                    {floors}
+                </div>  
             </div>
-            
-        </div>
+        </Element>
     )
 
 }
 
-export default Building
\ No newline at end of file
+export default Building;
\ No newline at end of file
diff --git a/Open-Source/src/Components/CampusMap.jsx b/Open-Source/src/Components/CampusMap.jsx
index ed8da16..763485e 100644
--- a/Open-Source/src/Components/CampusMap.jsx
+++ b/Open-Source/src/Components/CampusMap.jsx
@@ -1,4 +1,4 @@
-
+import { Link } from 'react-scroll';
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 
@@ -12,8 +12,15 @@ const CampusMap = () => {
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             />
             <Marker position={center}>
-                <Popup>
-                    A sample marker!
+                <Popup position={center}>
+                    Library
+                    <Link 
+                        className="libraryLink"
+                        to="buildingView" 
+                        smooth={true} 
+                        duration={500}>
+                            Library
+                    </Link>
                 </Popup>
             </Marker>
         </MapContainer>
diff --git a/Open-Source/src/Components/Floor.jsx b/Open-Source/src/Components/Floor.jsx
index a2b77d4..786b2a8 100644
--- a/Open-Source/src/Components/Floor.jsx
+++ b/Open-Source/src/Components/Floor.jsx
@@ -1,6 +1,12 @@
 import Button from './Button.jsx'
+import PropTypes from 'prop-types';
+
 // import { useState } from 'react'
 
+Floor.propTypes = {
+    floorNumber: PropTypes.number.isRequired,
+    hasBathrooms: PropTypes.bool.isRequired
+};
 
 function Floor({floorNumber, hasBathrooms}){
     
@@ -32,15 +38,16 @@ function Floor({floorNumber, hasBathrooms}){
 
         return (
             <div className="floor-container">
+                    
                 <h1 className='floor-title'>Floor {floorNumber} </h1>
                 <div className="floor">
                     <section>
-                        <h3>Women's</h3>
+                        <h3>Women&rsquo;s</h3>
                         <Button status={currentWStatus}></Button>
                         <Button status={currentWCleanliness}></Button>
                     </section>
                     <section>
-                        <h3>Men's:</h3>
+                        <h3>Men&rsquo;s:</h3>
                         <Button status={currentMStatus}></Button>
                         <Button status={currentMCleanliness}></Button>
                     </section>
@@ -57,7 +64,9 @@ function Floor({floorNumber, hasBathrooms}){
             </div>
         )
     }
+
 }
 
 
+
 export default Floor
\ No newline at end of file
diff --git a/Open-Source/src/Components/NavBar.jsx b/Open-Source/src/Components/NavBar.jsx
new file mode 100644
index 0000000..8a12fe7
--- /dev/null
+++ b/Open-Source/src/Components/NavBar.jsx
@@ -0,0 +1,16 @@
+
+
+function NavBar() {
+    return (
+        <div className="navbar">
+            <div className="nav-item">
+                <a href="#campus-map">Campus Map</a>
+            </div>
+            <div className="nav-item">
+                <a href="#building">Building</a>
+            </div>
+        </div>
+    );
+}
+
+export default NavBar;