diff --git a/README.md b/README.md
index cd228ae60..df13d1b34 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,7 @@ More project documentation can be found on the [Repository Wiki](https://github.
 12. Run `npm install`
 13. Build the frontend using `npx vue-cli-service build --mode development`
     - _Note: if you are working on the frontend, you may instead use `npx vue-cli-service build --mode development --watch` in another terminal to continuously watch for changes and rebuild._
+    - _Note 2: if you are running the newest version of macOS and see an error involving 64-bit support, try using node version 10.16.3._
 14. Go back up to the project root directory and build Shuttle Tracker by running `go build -o shuttletracker ./cmd/shuttletracker`
 15. Start the app by running `./shuttletracker`
 16. Add yourself as an administrator by using `./shuttletracker admins --add RCS_ID`, replacing `RCS_ID` with your RCS ID. See the "Administrators" section below for more information.
diff --git a/api/api.go b/api/api.go
index 1658b4183..eddae426e 100644
--- a/api/api.go
+++ b/api/api.go
@@ -122,6 +122,9 @@ func New(cfg Config, ms shuttletracker.ModelService, msg shuttletracker.MessageS
 		})
 	})
 
+	// TV panel display 
+	r.Get("/tvpanel", api.IndexHandler)
+
 	// Fusion
 	r.Mount("/fusion", api.fm.router(cli.casauth))
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a7ed57a77..05e9b0942 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4648,6 +4648,30 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6481,7 +6505,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
       "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -9226,6 +9249,11 @@
         }
       }
     },
+    "http": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.0.tgz",
+      "integrity": "sha1-huYybSnF0Dnen6xYSkVon5KfT3I="
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -11130,8 +11158,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
diff --git a/frontend/package.json b/frontend/package.json
index ebac8d616..a18f4c364 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,8 +16,10 @@
     "@types/leaflet-routing-machine": "^3.2.1",
     "@types/webpack-env": "^1.13.9",
     "ajv": "^6.5.4",
+    "axios": "^0.19.0",
     "buefy": "^0.7.2",
     "bulma": "^0.7.2",
+    "http": "0.0.0",
     "leaflet": "^1.3.4",
     "leaflet-rotatedmarker": "^0.2.0",
     "leaflet-routing-machine": "^3.2.12",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1d0df1586..563a8e518 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,23 +5,18 @@
         <router-view id="router-view"></router-view>
       </keep-alive>
     </div>
-    <tab-bar></tab-bar>   
   </div>
 </template>
 
 
 <script lang="ts">
 import Vue from 'vue';
-import TabBar from '@/components/tabBar.vue';
 import UserLocationService from '@/structures/userlocation.service';
 
 UserLocationService.getInstance();
 
 export default Vue.extend({
   name: 'app',
-  components: {
-    TabBar,
-  },
 });
 </script>
 <style lang="scss">
diff --git a/frontend/src/components/Public.vue b/frontend/src/components/Public.vue
index 421902512..1659a7fe9 100644
--- a/frontend/src/components/Public.vue
+++ b/frontend/src/components/Public.vue
@@ -14,6 +14,7 @@
     </span>
     <bus-button id="busbutton" v-on:bus-click="busClicked()" v-if="busButtonActive" />
     <eta-message v-bind:eta-info="currentETAInfo" v-bind:show="shouldShowETAMessage"></eta-message>
+    <tab-bar></tab-bar>
   </div>
 </template>
 
@@ -36,6 +37,7 @@ import UserLocationService from '@/structures/userlocation.service';
 import BusButton from '@/components/busbutton.vue';
 import AdminMessageUpdate from '@/structures/adminMessageUpdate';
 import ETAMessage from '@/components/etaMessage.vue';
+import TabBar from './tabBar.vue';
 
 const UserSVG = require('@/assets/user.svg') as string;
 
@@ -360,6 +362,7 @@ export default Vue.extend({
     messagebox,
     BusButton,
     etaMessage: ETAMessage,
+    tabBar: TabBar,
   },
 });
 </script>
diff --git a/frontend/src/components/adminmessage.vue b/frontend/src/components/adminmessage.vue
index 7171be585..02ee1b68f 100644
--- a/frontend/src/components/adminmessage.vue
+++ b/frontend/src/components/adminmessage.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
   overflow-y: auto;
   position: relative;
   z-index: 0;
-  bottom: 0px;
+  bottom: 40px;
   left: 0;
   right: 0;
   padding: 10px 30px 10px 15px; /* leave some space for the close button */
diff --git a/frontend/src/components/tabBar.vue b/frontend/src/components/tabBar.vue
index edd6d965c..7c1fb7652 100644
--- a/frontend/src/components/tabBar.vue
+++ b/frontend/src/components/tabBar.vue
@@ -84,4 +84,9 @@ li {
   border-top: 1px solid $primary;
   color: $primary;
 }
+github-link {
+  position: absolute;
+  height: 65%;
+  width: 65%;
+}
 </style>
diff --git a/frontend/src/components/tvpanel.vue b/frontend/src/components/tvpanel.vue
new file mode 100644
index 000000000..417efa7f1
--- /dev/null
+++ b/frontend/src/components/tvpanel.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <Header />
+    <Map />
+    <div id="right-panel">
+      <TimeDisplay />
+      <ETAs />
+      <News />
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import Vue from 'vue';
+import Map from './tvpanel/Map.vue';
+import Header from './tvpanel/Header.vue';
+import News from './tvpanel/News.vue';
+import ETAs from './tvpanel/ETAs.vue';
+import TimeDisplay from './tvpanel/TimeDisplay.vue';
+import Fusion from '@/fusion';
+import messagebox from './adminmessage.vue';
+import AdminMessageUpdate from '../structures/adminMessageUpdate';
+import UserLocationService from '../structures/userlocation.service';
+import { Stop, StopSVG } from '../structures/stop';
+import ETA from '../structures/eta';
+import Route from '../structures/route';
+export default Vue.extend({
+  name: 'tvpanel',
+  data() {
+    return{
+      fusion: new Fusion(),
+    } as {
+      fusion: Fusion;
+    };
+  },
+  mounted() {
+    this.fusion.start();
+  },
+  components: {
+    Map,
+    Header,
+    News,
+    ETAs,
+    TimeDisplay,
+  },
+});
+</script>
+
+<style lang='scss'>
+
+#view-wrapper {
+  height: 100%;
+}
+
+#right-panel {
+  position: absolute;
+  right: 0px;
+  height: 100%;
+  width: 25%;
+}
+
+</style>
diff --git a/frontend/src/components/tvpanel/ETAs.vue b/frontend/src/components/tvpanel/ETAs.vue
new file mode 100644
index 000000000..cb6cef2cd
--- /dev/null
+++ b/frontend/src/components/tvpanel/ETAs.vue
@@ -0,0 +1,127 @@
+<template>
+  <div id="etas">
+    <div id="title">ETAs</div>
+      <div id="upcoming">
+        <ul id="queue">
+          <li>West Shuttle - XX:XX</li>
+          <li>East Shuttle - XX:XX</li>
+          <li>East Shuttle - XX:XX</li>
+          <li>West Shuttle - XX:XX</li>
+        </ul>
+      </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+// This component is the ETAs component for the tv panel
+import Vue from 'vue';
+import ETA from '@/structures/eta';
+import axios from 'axios';
+
+export default Vue.extend({
+  props: ['etaInfo', 'show'],
+  data() {
+     return {
+        etas: [],
+     };
+  },
+  computed: {
+    message(): string | null {
+      if (this.etaInfo === null) {
+          return null;
+      }
+      const now = new Date();
+
+      let newMessage = `${this.etaInfo.route.name} shuttle arriving at ${this.etaInfo.stop.name}`;
+      // more than 1 min 30 sec?
+      if (this.etaInfo.eta.eta.getTime() - now.getTime() > 1.5 * 60 * 1000 && !this.etaInfo.eta.arriving) {
+        newMessage += ` in ${relativeTime(now, this.etaInfo.eta.eta)}`;
+      }
+      if (newMessage.substring(newMessage.length - 1) !== '.') {
+        newMessage += '.';
+      }
+
+      return newMessage;
+    },
+  },
+  methods: {
+    changeTextColor() {
+      /* Change the color of the text depending on if the
+        display is for the East or West shuttle */
+      const liElems = document.getElementsByTagName('li');
+      for (let i = 0; i < liElems.length; i++) {
+        const etaText = liElems[i].innerHTML;
+        const subStr = etaText.substring(0, 4);
+        liElems[i].style.fontWeight = 'bold';
+        if (subStr === 'West') {
+          liElems[i].style.color = '#0080FF';
+        }
+        if (subStr === 'East') {
+          liElems[i].style.color = '#71922b';
+        }
+      }
+    },
+    retrieveEtaData() {
+      axios.get('https://shuttles.rpi.edu/eta', {
+              headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Content-Type': 'application/json',
+                'mode': 'no-cors',
+              },
+              })
+      .then((res) => console.log(res.data));
+
+   },
+  },
+  // Allow this function to be called on page load
+  mounted() {
+    this.changeTextColor();
+    this.retrieveEtaData();
+  },
+});
+
+function relativeTime(from: Date, to: Date): string {
+  const minuteMs = 60 * 1000;
+  const elapsed = to.getTime() - from.getTime();
+
+  // cap display at thirty min
+  if (elapsed < minuteMs * 30) {
+    return `${Math.round(elapsed / minuteMs)} minutes`;
+  }
+
+  return 'a while';
+}
+
+</script>
+
+<style lang="scss" scoped>
+  #etas {
+    height: 45%;
+    width: 100%;
+    text-align: center;
+    border-top: 3px solid #F8F8F8;
+    position: relative;
+    top: 10%;
+  }
+  #title {
+    margin-top: 20px;
+    font-size: 50px;
+    display: inline-block;
+    border-bottom: 2px solid #4c4c4c;
+  }
+  li {
+  border: 1px solid rgb(228, 228, 228);
+  border-radius: 3px;
+  font-size: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+// West color = #0080FF
+// Weekend late night color = #9b59b6
+// East inclement weather color = #ff9900
+// West inclement weather color = #FF0
+// East color = #96C03A
+
+
+</style>
diff --git a/frontend/src/components/tvpanel/Header.vue b/frontend/src/components/tvpanel/Header.vue
new file mode 100644
index 000000000..cce15a9e9
--- /dev/null
+++ b/frontend/src/components/tvpanel/Header.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class='header'>
+    <div id="header-content">
+      <div id='shuttle-tracker'>
+        Shuttle Tracker
+      </div>
+      <img id='shuttletrackerlogo' src="../../assets/icon.svg">
+      <div id="weblink">shuttles.rpi.edu</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+// This component is the Header component for the tv panel
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'Header',
+});
+</script>
+
+<style lang="scss" scoped>
+
+.header {
+  height: 10%;
+  width: 75%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: #F8F8F8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+}
+
+#shuttle-tracker {
+  display: inline-block;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 40px;
+}
+
+#weblink {
+  display: inline-block;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 40px;
+}
+
+#shuttletrackerlogo {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+#header-content {
+  padding: 1.35% 0;
+  display: inline-block;
+}
+
+</style>
diff --git a/frontend/src/components/tvpanel/Map.vue b/frontend/src/components/tvpanel/Map.vue
new file mode 100644
index 000000000..64d498a3f
--- /dev/null
+++ b/frontend/src/components/tvpanel/Map.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="map">
+    <div id="mymap"></div>
+    <span>
+      <messagebox ref="msgbox"/>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+
+// This component is the Map Component on the tv panel
+import Vue from 'vue';
+import messagebox from '../adminmessage.vue';
+import TabBar from '../tabBar.vue';
+import InfoService from '../../structures/serviceproviders/info.service';
+import Vehicle from '../../structures/vehicle';
+import Route from '../../structures/route';
+import {Stop} from '../../structures/stop';
+import * as L from 'leaflet';
+import Fusion from '@/fusion';
+import getMarkerString from '../../structures/leaflet/rotatedMarker';
+import { Position } from 'geojson';
+import UserLocationService from '../../structures/userlocation.service';
+const StopSVG = require('../../assets/circle.svg') as string;
+const UserSVG = require('../../assets/user.svg') as string;
+const StopIcon = L.icon({
+  iconUrl: StopSVG,
+  iconSize: [12, 12], // size of the icon
+  iconAnchor: [6, 6], // point of the icon which will correspond to marker's location
+  shadowAnchor: [6, 6], // the same for the shadow
+  popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
+});
+export default Vue.extend({
+  name: 'Map',
+  data() {
+    return {
+      vehicles: [],
+      routes: [],
+      stops: [],
+      ready: false,
+      Map: undefined,
+      existingRouteLayers: [],
+      userShuttleidCount: 0,
+      initialized: false,
+      legend: new L.Control({ position: 'bottomleft' }),
+      locationMarker: undefined,
+      currentETAInfo: null,
+    } as {
+        vehicles: Vehicle[];
+        routes: Route[];
+        stops: Stop[];
+        ready: boolean;
+        Map: L.Map | undefined; // Leaflets types are not always useful
+        existingRouteLayers: L.Polyline[];
+        initialized: boolean;
+        legend: L.Control;
+        locationMarker: L.Marker | undefined;
+        userShuttleidCount: number;
+        currentETAInfo: {} | null;
+      };
+  },
+  components: {
+    messagebox,
+  },
+  mounted() {
+    const ls = UserLocationService.getInstance();
+    const a = new InfoService();
+    Promise.all([this.$store.dispatch('grabStops'), this.$store.dispatch('grabRoutes')]);
+    this.$store.dispatch('grabVehicles');
+    this.$store.dispatch('grabAdminMesssage');
+
+    this.$nextTick(() => {
+      this.ready = true;
+      this.Map = L.map('mymap', {
+        zoomControl: false,
+        attributionControl: false,
+      });
+      this.Map.addControl(L.control.attribution({
+          position: 'bottomright',
+          prefix: '',
+        }),
+      );
+      L.tileLayer(
+        'https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png',
+        {
+          attribution:
+            'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
+            'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
+            'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under ' +
+            '<a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+          maxZoom: 17,
+          minZoom: 14,
+        },
+      ).addTo(this.Map);
+      this.Map.invalidateSize();
+      this.showUserLocation();
+    });
+    this.$store.subscribe((mutation: any, state: any) => {
+      if (mutation.type === 'setRoutes') {
+        this.renderRoutes();
+        this.updateStops();
+        this.renderStops();
+        this.updateLegend();
+      }
+      if (mutation.type === 'setVehicles') {
+        this.addVehicles();
+      }
+    });
+  },
+  methods: {
+    updateLegend() {
+      this.legend.onAdd = (map: L.Map) => {
+        const div = L.DomUtil.create('div', 'info legend');
+        let legendstring = '';
+        this.$store.state.Routes.forEach((route: Route) => {
+          if (route.shouldShow()) {
+            legendstring +=
+              `<li><img class="legend-icon" src=` +
+              getMarkerString(route.color) +
+              `
+			      width="12" height="12"> ` +
+              route.name;
+          }
+        });
+        div.innerHTML =
+          `<ul style="list-style:none">
+					<li><img class="legend-icon" src='` +
+          UserSVG +
+          `' width="12" height="12"> You</li>` +
+          legendstring +
+          `<li><img class="legend-icon" src="` +
+          StopSVG +
+          `" width="12" height="12"> Shuttle Stop</li>
+				</ul>`;
+        return div;
+      };
+      if (this.Map !== undefined) {
+        this.legend.addTo(this.Map);
+      }
+    },
+    routePolyLines(): L.Polyline[] {
+      return this.$store.getters.getRoutePolyLines;
+    },
+    renderRoutes() {
+      if (this.routePolyLines().length > 0 && !this.initialized) {
+        if (
+          this.Map !== undefined &&
+          !this.$store.getters.getBoundsPolyLine.isEmpty()
+        ) {
+          this.initialized = true;
+          this.Map.fitBounds(this.$store.getters.getBoundsPolyLine.getBounds());
+        }
+      }
+      this.existingRouteLayers.forEach((line) => {
+        if (this.Map !== undefined) {
+          this.Map.removeLayer(line);
+        }
+      });
+      this.existingRouteLayers = new Array<L.Polyline>();
+      this.routePolyLines().forEach((line: L.Polyline) => {
+        if (this.Map !== undefined) {
+          this.Map.addLayer(line);
+          this.existingRouteLayers.push(line);
+        }
+      });
+    },
+    renderStops() {
+      this.$store.state.Stops.forEach((stop: Stop) => {
+        if (this.Map !== undefined) {
+          stop.marker.bindPopup(stop.getMessage());
+          stop.marker.addTo(this.Map);
+        }
+      });
+    },
+    addVehicles() {
+      this.$store.state.Vehicles.forEach((veh: Vehicle) => {
+        console.log(veh);
+        if (this.Map !== undefined) {
+          veh.addToMap(this.Map);
+        }
+      });
+    },
+
+    showUserLocation() {
+      const userIcon = new L.Icon({
+        iconUrl: UserSVG,
+        iconSize: [12, 12], // size of the icon
+        iconAnchor: [6, 6], // point of the icon which will correspond to marker's location
+        shadowAnchor: [6, 6], // the same for the shadow
+        popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
+      });
+      UserLocationService.getInstance().registerCallback((position) => {
+        if (this.locationMarker === undefined) {
+          this.locationMarker = L.marker(
+              [position.coords.latitude, position.coords.longitude],
+              {
+                icon: userIcon,
+                zIndexOffset: 1000,
+              },
+            );
+        } else {
+          this.locationMarker.setLatLng([position.coords.latitude, position.coords.longitude]);
+        }
+        const locationMarkerOptions = {
+            name: 'You are here',
+            marker: this.locationMarker,
+          };
+        locationMarkerOptions.marker.bindPopup(locationMarkerOptions.name);
+        if (this.Map !== undefined) {
+            locationMarkerOptions.marker.addTo(this.Map);
+          }
+      });
+    },
+    updateStops() {
+      this.$store.commit('setRoutesOnStops');
+    },
+  },
+
+});
+</script>
+
+<style lang="scss" scoped>
+.map {
+  position: absolute;
+  height: 90%;
+  bottom: 0px;
+  width: 75%;
+}
+#mymap {
+  flex: 1;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+.info.legend {
+  box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 1px;
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 5px;
+  bottom: 25px;
+  & ul {
+    margin-top: 2px;
+    margin-bottom: 2px;
+    padding-left: 0px;
+  }
+}
+.shuttleusericon{
+  background-color: transparent;
+  border: none;
+  animation: fadeOutUp 2s ease;
+  display: block;
+  font-size: 20px;
+  bottom: 0px;
+  right: 0px;
+  z-index: 2000 !important;
+}
+@keyframes fadeOutUp {
+   0% {
+      opacity: 1;
+      transform: translateY(0);
+   }
+   100% {
+      opacity: 0;
+      transform: translateY(-40px);
+   }
+}
+.leaflet-div-icon {
+  background: transparent !important;
+  border: none !important;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/frontend/src/components/tvpanel/News.vue b/frontend/src/components/tvpanel/News.vue
new file mode 100644
index 000000000..d8030964c
--- /dev/null
+++ b/frontend/src/components/tvpanel/News.vue
@@ -0,0 +1,47 @@
+<template>
+  <div id="news">
+    <div id="title">News</div>
+    <ul>
+      <li>Rensselaer community unsettled by police presence on campus</li>
+      <li>Period products absent from campus, Student Government takes action</li>
+      <li>Indian dance clubs unite</li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+
+// This component is the News component for the tv panel
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'News',
+});
+</script>
+
+<style lang="scss" scoped>
+
+#news {
+  height: 50%;
+  width: 100%;
+
+  text-align: center;
+  padding: 10px;
+  border-top: 1.5px solid #F8F8F8;
+}
+
+#title {
+  font-size: 50px;
+  display: inline-block;
+  margin-bottom: 10px;
+  border-bottom: 2px solid #4c4c4c;
+}
+
+li {
+  border: 1px solid rgb(228, 228, 228);
+  border-radius: 3px;
+  margin: 10px;
+  padding: 10px;
+}
+
+</style>
diff --git a/frontend/src/components/tvpanel/TimeDisplay.vue b/frontend/src/components/tvpanel/TimeDisplay.vue
new file mode 100644
index 000000000..f0954b86f
--- /dev/null
+++ b/frontend/src/components/tvpanel/TimeDisplay.vue
@@ -0,0 +1,91 @@
+<template>
+  <!-- Display Current Time and Day -->
+  <div id='time-display'>
+    {{displayTime()}}
+  </div>
+</template>
+
+<script>
+// This component handles the Time Display on the TV panel
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'TimeDisplay',
+  data() {
+    return {
+      today: new Date(),
+    };
+  },
+  methods: {
+    // Function to display the Current Time
+    displayTime() {
+      this.today = new Date();
+      let hour = this.today.getHours();
+      const minutes = this.today.getMinutes();
+      let am_pm;
+      // Format Hours
+      if (hour < 12) {
+        if (hour === 0) {
+          hour = 12;
+        }
+        am_pm = 'AM';
+      } else if (hour === 12) {
+        am_pm = 'PM';
+      } else {
+        if (hour === 24) {
+          hour = hour - 12;
+          am_pm = 'AM';
+        }
+        hour = hour - 12;
+        am_pm = 'PM';
+      }
+      // Format minutes and return
+      if (minutes <= 9) {
+        return hour.toString() + ':0' + minutes.toString() + ' ' + am_pm;
+      }
+      return hour.toString() + ':' + minutes.toString() + ' ' + am_pm;
+    },
+    // Function to display the day of the week
+    displayDay() {
+      const today = new Date();
+      const day = today.getDay();
+      switch (day) {
+        case 0:
+          return 'Sunday';
+        case 1:
+          return 'Monday';
+        case 2:
+          return 'Tuesday';
+        case 3:
+          return 'Wednesday';
+        case 4:
+          return 'Thursday';
+        case 5:
+          return 'Friday';
+        case 6:
+          return 'Saturday';
+      }
+    },
+  },
+  mounted() {
+    // Update Time and Day every minute
+    setInterval(() => {
+      this.displayTime();
+      this.displayDay();
+      console.log('Updated Current Time/Date');
+    }, 60000);
+  },
+});
+</script>
+
+<style scoped>
+  #time-display {
+    width: 100%;
+    height: 15%;
+    position:absolute;
+    text-align: center;
+    margin-top: 22px;
+    font-size: 40px;
+    font-weight: 600;
+    top: 0;
+  }
+</style>
diff --git a/frontend/src/components/tvpanel/assets/TV Panel Wireframe.png b/frontend/src/components/tvpanel/assets/TV Panel Wireframe.png
new file mode 100644
index 000000000..66b21421e
Binary files /dev/null and b/frontend/src/components/tvpanel/assets/TV Panel Wireframe.png differ
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index 17c1535b7..9afa24019 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -5,6 +5,7 @@ import about from './components/about.vue';
 import schedules from '@/components/schedules.vue';
 import settings from '@/components/settings.vue';
 import etas from '@/components/etas.vue';
+import tvpanel from '@/components/tvpanel.vue';
 import Resources from '@/resources';
 
 Vue.use(Router);
@@ -38,5 +39,10 @@ export default new Router({
       name: 'settings',
       component: settings,
     },
+    {
+      path: '/tvpanel',
+      name: 'tvpanel',
+      component: tvpanel,
+    },
   ],
 });
diff --git a/go.mod b/go.mod
index 4f8b66c75..f0a19e304 100644
--- a/go.mod
+++ b/go.mod
@@ -21,4 +21,4 @@ require (
 	golang.org/x/sys v0.0.0-20190318195719-6c81ef8f67ca // indirect
 	gopkg.in/cas.v2 v2.1.0
 	gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 // indirect
-)
\ No newline at end of file
+)