diff --git a/src/components/Copyright.vue b/src/components/Copyright.vue
index f9cadf9..b0e7690 100644
--- a/src/components/Copyright.vue
+++ b/src/components/Copyright.vue
@@ -10,6 +10,13 @@
       An RCOS project
     </b-link>
     <div>
+      <b-link @click="resetAdvMode"
+        :class="[{'text-black': !isDarkMode}, {'text-gray': isDarkMode}]"
+        class="mx-3"
+        to="/about"
+      >
+        <small>About</small>
+      </b-link>
       <b-link :class="[{'text-black': !isDarkMode}, {'text-gray': isDarkMode}]"
               href="https://shuttletracker.app/swiftui/"
               target="_blank">
diff --git a/src/components/Tracker.vue b/src/components/Tracker.vue
index 978a325..795de72 100644
--- a/src/components/Tracker.vue
+++ b/src/components/Tracker.vue
@@ -11,78 +11,78 @@
               style="height: 75vh"
               :class="{ 'h-100': fullscreen }"
           ></div>
-
-          <!-- Server Status, Fullscreen Button, and Routes Legend -->
-          <div class="position-absolute" :class="[{'fullscreen-sidebar': fullscreen}, {'vh-100': fullscreen}, {'server-status': !fullscreen}, {'p-2': fullscreen}]">
-            <!-- API status -->
-            <Status></Status>
-            <!-- fullscreen button -->
-            <b-badge v-if="showFullScreen && showFSIcon" v-b-tooltip.hover :title="FullscreenDesc" role="button"
-                     variant="primary" class="mr-1"
-                     @click="toggleFullscreen(!fullscreen)">
-              <BIconFullscreen v-if="!fullscreen"></BIconFullscreen>
-              <BIconFullscreenExit v-if="fullscreen"></BIconFullscreenExit>
-              {{ fullscreen ? "Exit" : "Enter" }} Full-Screen Mode
-            </b-badge>
-            <b-badge @click="centerMap" v-b-tooltip.hover :title="RecentermapDesc" role="button" variant="primary">
-              <BIconVinyl></BIconVinyl>
-            </b-badge>
-            <!-- Routes Legend -->
-            <div v-if="routes.length > 0">
-              <div class="rounded mt-1 d-inline-block"
-                   :class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
-                <div v-for="(r, i) in routes" :key="i" class="d-flex align-items-center mx-2 my-1">
-                  <span class="mr-1 d-inline-block route-legend-marker"
-                        :style="[{'background-color': r.colorName}]"> </span> <span
-                    class="text-white">{{ r.name }}</span>
+          <div v-if="!only_map">
+            <!-- Server Status, Fullscreen Button, and Routes Legend -->
+            <div class="position-absolute" :class="[{'fullscreen-sidebar': fullscreen}, {'vh-100': fullscreen}, {'server-status': !fullscreen}, {'p-2': fullscreen}]">
+              <!-- API status -->
+              <Status></Status>
+              <!-- fullscreen button -->
+              <b-badge v-if="showFullScreen && showFSIcon" v-b-tooltip.hover :title="FullscreenDesc" role="button"
+                      variant="primary" class="mr-1"
+                      @click="toggleFullscreen(!fullscreen)">
+                <BIconFullscreen v-if="!fullscreen"></BIconFullscreen>
+                <BIconFullscreenExit v-if="fullscreen"></BIconFullscreenExit>
+                {{ fullscreen ? "Exit" : "Enter" }} Full-Screen Mode
+              </b-badge>
+              <b-badge @click="centerMap" v-b-tooltip.hover :title="RecentermapDesc" role="button" variant="primary">
+                <BIconVinyl></BIconVinyl>
+              </b-badge>
+              <!-- Routes Legend -->
+              <div v-if="routes.length > 0">
+                <div class="rounded mt-1 d-inline-block"
+                    :class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
+                  <div v-for="(r, i) in routes" :key="i" class="d-flex align-items-center mx-2 my-1">
+                    <span class="mr-1 d-inline-block route-legend-marker"
+                          :style="[{'background-color': r.colorName}]"> </span> <span
+                      class="text-white">{{ r.name }}</span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <!-- Buses Legend -->
-            <div v-if="busTypes.length > 0" >
-              <div class="rounded mt-1 d-inline-block"
-                    :class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
-                    <div class="legend-container" style="padding-top: 5px;">
-                      <div v-for="(bus, index) in busTypes" :key="index" class="d-flex align-items-center mx-2 my-1">
-                        <div class="icon-container">
-                          <span v-if="bus.color == 'mediumseagreen'" class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-success">
-                            <span class="position-absolute icon-text"> {{ bus.icon }}</span>
-                          </span>
-                          <span v-else class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-danger">
-                            <span class="position-absolute icon-text"> {{ bus.icon }}</span>
-                          </span>
+              <!-- Buses Legend -->
+              <div v-if="busTypes.length > 0" >
+                <div class="rounded mt-1 d-inline-block"
+                      :class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
+                      <div class="legend-container" style="padding-top: 5px;">
+                        <div v-for="(bus, index) in busTypes" :key="index" class="d-flex align-items-center mx-2 my-1">
+                          <div class="icon-container">
+                            <span v-if="bus.color == 'mediumseagreen'" class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-success">
+                              <span class="position-absolute icon-text"> {{ bus.icon }}</span>
+                            </span>
+                            <span v-else class="icon-parent position-relative d-inline-block rounded-circle mr-3 bg-danger">
+                              <span class="position-absolute icon-text"> {{ bus.icon }}</span>
+                            </span>
+                          </div>
+                          <span class="text-white" style="position: relative; 
+                          margin-left: -8px;
+                          padding-bottom: 5px;">{{ bus.name }}</span>
                         </div>
-                        <span class="text-white" style="position: relative; 
-                        margin-left: -8px;
-                        padding-bottom: 5px;">{{ bus.name }}</span>
-                      </div>
-                  </div>
+                    </div>
+                </div>
               </div>
-            </div>
-            <!-- Dashboard Historical Bus Trace Legend -->
-            <div v-if="(currentBuses.length > 0) && (trace_history)">
-              <div class="rounded mt-1 d-inline-block"
-                   :class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
-                <div v-for="(b, i) in currentBuses" :key="i" class="d-flex align-items-center mx-2 my-1">
-                  <span class="mr-1 d-inline-block route-legend-marker"
-                        :style="[{'background-color': trailColors[i%trailColors.length]}]"> </span> <span
-                    class="text-white">{{ b }}</span>
+              <!-- Dashboard Historical Bus Trace Legend -->
+              <div v-if="(currentBuses.length > 0) && (trace_history)">
+                <div class="rounded mt-1 d-inline-block"
+                    :class="[{'frosted-glass-dark': !isDarkMode}, {'frosted-glass': isDarkMode}]">
+                  <div v-for="(b, i) in currentBuses" :key="i" class="d-flex align-items-center mx-2 my-1">
+                    <span class="mr-1 d-inline-block route-legend-marker"
+                          :style="[{'background-color': trailColors[i%trailColors.length]}]"> </span> <span
+                      class="text-white">{{ b }}</span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <!-- Widgets -->
-            <div>
-              <Schedule v-if="fullscreen" class="mt-3"></Schedule>
-            </div>
-            <div>
-              <Fullscrn_qrcode v-if="fullscreen" class="mt-3"></Fullscrn_qrcode>
+              <!-- Widgets -->
+              <div>
+                <Schedule v-if="fullscreen" class="mt-3"></Schedule>
+              </div>
+              <div>
+                <Fullscrn_qrcode v-if="fullscreen" class="mt-3"></Fullscrn_qrcode>
+              </div>
             </div>
           </div>
-        </div>
-
-        <!-- Announcement Bar -->
-        <Announcement v-if="fullscreen"></Announcement>
 
+          <!-- Announcement Bar -->
+          <Announcement v-if="fullscreen"></Announcement>
+        </div>
       </div>
     </fullscreen>
   </div>
@@ -104,7 +104,11 @@ Vue.use(VueFullscreen);
 export default {
   name: "Tracker",
   props: {
-    trace_history: Boolean
+    trace_history: Boolean,
+    only_map: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     Status,
diff --git a/src/router/index.js b/src/router/index.js
index 4852953..d0cfe3a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import Home from '../views/Home.vue'
 import PrivacyPolicy from "../views/PrivacyPolicy";
 import PageNotFound from "../views/PageNotFound";
 import Dashboard from "../views/Dashboard";
+import About from "../views/About";
 
 Vue.use(VueRouter)
 
@@ -27,6 +28,11 @@ const routes = [
     path: '*',
     name: 'PageNotFound',
     component: PageNotFound
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About
   }
 ]
 
diff --git a/src/views/About.vue b/src/views/About.vue
new file mode 100644
index 0000000..d6b3f67
--- /dev/null
+++ b/src/views/About.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="row">
+        <div class="col" style="display: flex; justify-content: space-between; align-items: center;">
+          <Header></Header>
+          <div style="display: flex; align-items: center;">
+            <a href="https://shuttletracker.app" style="margin-right: 10px;">
+              <b-icon-house-fill class="mb-1" font-scale="1.25" :style="{ color: isDarkMode ? 'white' : 'black' }" />
+            </a>
+            <div style="margin-right: 10px;">
+              <b-icon-sun v-if="isDarkMode" @click="toLightMode" color="white" class="mb-1" font-scale="1.25" />
+              <b-icon-moon v-else @click="toDarkMode" class="mb-1" font-scale="1.25" />
+            </div>
+            <a href="https://github.com/wtg/Shuttle-Tracker-Web/tree/main">
+              <b-icon-github class="mb-1" font-scale="1.25" :style="{ color: isDarkMode ? 'white' : 'black' }" />
+            </a>
+          </div>
+        </div>
+      </div>
+      <div style="display: flex; justify-content: space-between;">
+        <div style="width: 40%; margin-left: 20px; margin-right: 20px;">
+          <div style="margin-top: 15vh;" :class="{'text-white': isDarkMode}">
+            <h1>Simplify Your <span style="color: red;">RPI</span></h1>
+            <h1>Campus Commute</h1>
+          </div>  
+          <div style="width: 100%;">
+            <div style="width:150px; display:inline-block">
+              <a href="https://shuttletracker.app/swiftui/">
+                <img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1636675200" alt="Download on the App Store" style="margin:6%;width:88%"/>
+              </a>
+            </div>
+            <div style="width:167px; display:inline-block;">
+              <a href="https://shuttletracker.app/android/">
+                <img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play"/>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div style="width: 60%; margin-left: 20px; margin-right: 20px;">
+          <Tracker only_map=true />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col" :class="{'text-white': isDarkMode}" style="max-width: 1140px;">
+          <h2>About</h2>
+          <p> 
+            Welcome to Shuttle Tracker, your go-to destination for 
+            real-time RPI shuttle tracking and navigation. Our platform 
+            is designed to make your journey around campus simpler.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from "../components/Header";
+import {BIconGithub, BIconHouseFill, BIconSun, BIconMoon} from 'bootstrap-vue'
+import mixin from "../mixins/mixins";
+import Tracker from "../components/Tracker";
+
+export default {
+  name: "About",
+  mixins: [mixin],
+  components: {
+    Header,
+    BIconGithub,
+    BIconHouseFill,
+    BIconSun,
+    BIconMoon,
+    Tracker
+  },
+  methods: {
+    toLightMode() {
+      this.$store.commit('setDarkMode', false);
+    },
+    toDarkMode() {
+      this.$store.commit('setDarkMode', true);
+    }
+  }
+}
+</script>
+
+<style scoped>
+img {
+  max-width: 100%;
+  height: auto;
+}
+</style>
\ No newline at end of file