diff --git a/client/package-lock.json b/client/package-lock.json
index 1f3eb9d..4c891dc 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11436,6 +11436,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-canvas-gauges": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/vue-canvas-gauges/-/vue-canvas-gauges-0.0.0.tgz",
+      "integrity": "sha1-0GhVYS+AgqsmLPwiRrO/7QVfTvc="
+    },
     "vue-cli-plugin-vuetify": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.5.tgz",
@@ -11500,6 +11505,11 @@
         }
       }
     },
+    "vue-gauge": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-gauge/-/vue-gauge-1.0.3.tgz",
+      "integrity": "sha512-hIjjDxAjJ5NRKeEVUpwZQ7IA+LONfNE7C51Z5TeEvIEl3jqu2aLE5RnIGQaLdLBYzbK807AiCvYt1nM0m4D6Cw=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/client/package.json b/client/package.json
index 2a72389..c203e0d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,9 +10,10 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.3",
     "core-js": "^3.6.5",
-    "socket.io-client": "2.3.1",
     "roboto-fontface": "*",
+    "socket.io-client": "2.3.1",
     "vue": "^2.6.11",
+    "vue-canvas-gauges": "0.0.0",
     "vue-router": "^3.2.0",
     "vue-socket.io-extended": "^4.1.0",
     "vuetify": "^2.4.0",
diff --git a/client/socket.config.js b/client/socket.config.js
new file mode 100644
index 0000000..8f840f7
--- /dev/null
+++ b/client/socket.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  socketUrl: "http://localhost:8080",
+};
diff --git a/client/src/App.vue b/client/src/App.vue
index 81239a1..843cb9b 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -24,7 +24,7 @@ export default {
 .shadow {
   text-shadow: #000 2px 2px 1px;
 }
-.shadow-small {
+.shadow-sm {
   text-shadow: #000 1px 1px 0px;
 }
 </style>
diff --git a/client/src/components/Layout/Header.vue b/client/src/components/Layout/Header.vue
index abc0378..94da5c2 100644
--- a/client/src/components/Layout/Header.vue
+++ b/client/src/components/Layout/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app-bar app color="primary" dark :maxHeight="50">
-    <div class="d-flex align-center"><h2 class="shadow">Speed Tester</h2></div>
+    <div class="d-flex align-center"><h3 class="shadow">Horizon Speed Tester</h3></div>
 
     <v-spacer></v-spacer>
 
diff --git a/client/src/components/Socket/SocketStatus.vue b/client/src/components/Socket/SocketStatus.vue
index dd38bb3..d5c4150 100644
--- a/client/src/components/Socket/SocketStatus.vue
+++ b/client/src/components/Socket/SocketStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center mx-2 mt-1 shadow-small">
+  <div class="d-flex align-center mx-2 mt-1 shadow-sm">
     <div class="d-flex mr-2">Connection Status</div>
     <div v-if="socketStatus" class="d-flex">
       <v-icon small color="green">fa fa-check-circle</v-icon>
diff --git a/client/src/components/Speedtest/SpeedtestPastResults.vue b/client/src/components/Speedtest/SpeedtestPastResults.vue
new file mode 100644
index 0000000..285fed3
--- /dev/null
+++ b/client/src/components/Speedtest/SpeedtestPastResults.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="text-h4">Past Results</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SpeedtestPastResults",
+};
+</script>
+
+<style scoped></style>
diff --git a/client/src/components/Speedtest/SpeedtestProgressCard.vue b/client/src/components/Speedtest/SpeedtestProgressCard.vue
new file mode 100644
index 0000000..33d3628
--- /dev/null
+++ b/client/src/components/Speedtest/SpeedtestProgressCard.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="d-flex align-center justify-center">
+    <v-card color="secondary darken-4 pa-5" rounded="10">
+      <h1 class="text-h3">{{ progressTypeLabel }}</h1>
+      <h1 class="text-h1">{{ progressSpeedValue | convertToMegabits }}<span class="text-h3 mx-4">Mbps</span></h1>
+
+      <div>
+        <h5 class="mx-3">Time Remaining:</h5>
+        <v-progress-linear :value="progressPercent" rounded striped stream height="20" buffer-value="0" />
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SpeedtestProgressCard",
+  props: {
+    progressEvent: {
+      type: [Object, Boolean],
+    },
+  },
+  components: {},
+  computed: {
+    progressTimeStamp() {
+      return this.progressEvent.timestamp;
+    },
+    progressTypeLabel() {
+      return this.progressEvent.type.toUpperCase();
+    },
+    progressPercent() {
+      return this.progressEvent.progress * 100;
+    },
+    progressSpeedValue() {
+      if (this.progressEvent.type == "upload") {
+        return this.progressEvent.upload.bandwidth;
+      }
+      if (this.progressEvent.type == "download") {
+        return this.progressEvent.download.bandwidth;
+      }
+      return 0;
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/client/src/components/Speedtest/SpeedtestResultsCard.vue b/client/src/components/Speedtest/SpeedtestResultsCard.vue
new file mode 100644
index 0000000..282c03e
--- /dev/null
+++ b/client/src/components/Speedtest/SpeedtestResultsCard.vue
@@ -0,0 +1,123 @@
+<template>
+  <v-card v-if="results" color="secondary darken-3 pa-0 ma-0" rounded="10">
+    <div class="pa-4">
+      <div class="d-flex flex-wrap align-start justify-center">
+        <div class="mx-2 d-flex order-first flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg">
+          <div class="text-h5">Download</div>
+          <div class="text-h1 font-weight-bold">
+            {{ downloadSpeed | convertToMegabits }}<span class="text-h4 mx-4">Mbps</span>
+          </div>
+        </div>
+
+        <div class="mx-4 d-flex order-last flex-column align-center secondary darken-2 pa-2 ma-3 rounded-lg mb-2">
+          <div class="d-flex align-center justify-center">
+            <div class="d-flex align-baseline justify-start">
+              <div class="font-weight-bold text-subTitle mx-2 align-baseline">Host:</div>
+              <div class="d-flex flex-column align-start justify-start">
+                <div class="font-weight-bold text-body-2 mx-2">
+                  {{ serverInfo.host }}
+                </div>
+                <div class="font-weight-bold text-body-2 mx-2">
+                  {{ serverInfo.location }}
+                </div>
+                <div class="font-weight-bold text-body-2 mx-2">
+                  {{ serverInfo.name }}
+                </div>
+                <div class="font-weight-bold text-body-2 mx-2">
+                  {{ serverInfo.ip }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="d-flex align-center justify-center mt-3">
+            <div class="d-flex align-center justify-center">
+              <div class="font-weight-bold text-heading mx-2">Ping</div>
+              <div class="font-weight-bold text-h4 mx-2">
+                {{ latency }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mx-2 d-flex flex-column align-start secondary darken-2 pa-2 ma-3 rounded-lg">
+          <div class="text-h5">Upload</div>
+          <div class="text-h1 font-weight-bold">
+            {{ uploadSpeed | convertToMegabits }}<span class="text-h4 mx-4">Mbps</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="d-flex align-start justify-space-around pa-1 secondary darken-2 ma-2 rounded-lg">
+        <div class="d-flex align-center justify-start">
+          <div class="font-weight-bold text-heading mx-2">Isp:</div>
+          <div class="d-flex flex-column align-baseline justify-start">
+            <div class="text-body-2 mx-2">
+              {{ isp }}
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex align-center justify-start">
+          <div class="font-weight-bold text-heading mx-2">External Ip:</div>
+          <div class="d-flex flex-column align-start justify-start">
+            <div class="text-body-2 mx-2">
+              {{ interfaceMeta.externalIp }}
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex align-center justify-start">
+          <div class="font-weight-bold text-heading mx-2">Internal Ip:</div>
+          <div class="d-flex flex-column align-start justify-start">
+            <div class="text-body-2 mx-2">
+              {{ interfaceMeta.internalIp }}
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex align-baseline justify-start">
+          <div class="font-weight-bold text-heading mx-2">Mac Addr:</div>
+          <div class="d-flex flex-column align-start justify-start">
+            <div class="text-body-2 mx-2">
+              {{ interfaceMeta.macAddr }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "SpeedtestResultsCard",
+  props: {
+    results: {
+      type: [Boolean, Object],
+    },
+  },
+  computed: {
+    serverInfo() {
+      return this.results.server;
+    },
+    interfaceMeta() {
+      return this.results.interface;
+    },
+    isp() {
+      return this.results.isp || "Unknown";
+    },
+    latency() {
+      return this.results.ping.latency || 0;
+    },
+    uploadSpeed() {
+      return this.results.upload.bandwidth || 0;
+    },
+    downloadSpeed() {
+      return this.results.download.bandwidth || 0;
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/client/src/components/Speedtest/SpeedtestWrapper.vue b/client/src/components/Speedtest/SpeedtestWrapper.vue
index 31ac09b..52a2182 100644
--- a/client/src/components/Speedtest/SpeedtestWrapper.vue
+++ b/client/src/components/Speedtest/SpeedtestWrapper.vue
@@ -1,12 +1,65 @@
 <template>
-  <div>
-    <p>Speedtest wrapper</p>
-  </div>
+  <v-container class="speedtestWrapper">
+    <v-row>
+      <v-col>
+        <div class="d-flex flex-column align-center">
+          <div class="my-3 text-h3">Test Our Internet Speed</div>
+
+          <div v-if="isRunning && speedTestEventData">
+            <SpeedtestProgressCard :progressEvent="speedTestEventData"></SpeedtestProgressCard>
+          </div>
+
+          <div v-if="speedTestResults" class="d-flex">
+            <SpeedtestResultsCard :results="speedTestResults"></SpeedtestResultsCard>
+          </div>
+
+          <v-btn large v-if="!isRunning" color="green" class="my-6 shadow-sm" @click="startSpeedTest"
+            ><v-icon large class="mr-2">fa-tachometer-alt</v-icon>
+            <div class="text-h5 font-weight-bold pa-2">Run A Speed Test</div></v-btn
+          >
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-divider></v-divider>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <SpeedtestPastResults />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+import SpeedtestProgressCard from "./SpeedtestProgressCard";
+import SpeedtestResultsCard from "./SpeedtestResultsCard";
+import SpeedtestPastResults from "./SpeedtestPastResults";
+
 export default {
   name: "SpeedtestWrapper",
+  components: {
+    SpeedtestProgressCard,
+    SpeedtestResultsCard,
+    SpeedtestPastResults,
+  },
+  computed: {
+    ...mapGetters({
+      speedTestEventData: "getSpeedTestEventData",
+      isRunning: "getIsSpeedTestRunning",
+      speedTestResults: "getSpeedTestResults",
+    }),
+  },
+  methods: {
+    startSpeedTest() {
+      this.$store.dispatch("socket_startSpeedTest");
+    },
+  },
 };
 </script>
 
diff --git a/client/src/main.js b/client/src/main.js
index 21b2c52..9c06b80 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -9,6 +9,12 @@ import("./plugins/vueSocketIo");
 import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 
+Vue.filter("convertToMegabits", (bytes) => {
+  const megaBits = parseFloat(bytes / 125000);
+  const formatted = +megaBits.toFixed(2);
+  return formatted;
+});
+
 Vue.config.productionTip = false;
 
 new Vue({
diff --git a/client/src/plugins/vueSocketIo.js b/client/src/plugins/vueSocketIo.js
index f5f13d0..0892922 100644
--- a/client/src/plugins/vueSocketIo.js
+++ b/client/src/plugins/vueSocketIo.js
@@ -1,7 +1,7 @@
 import Vue from "vue";
 import store from "../store";
 
-import config from "../../vue.config.js";
+import config from "../../socket.config.js";
 
 import VueSocketIOExt from "vue-socket.io-extended";
 import io from "socket.io-client";
diff --git a/client/src/store/index.js b/client/src/store/index.js
index eca7a8b..af6ae10 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -7,6 +7,12 @@ export default new Vuex.Store({
   state: {
     socketStatus: false,
     socketStatusMessage: false,
+    speedTestEventData: false,
+    speedTestEventTestStartData: false,
+    speedTestEventDownloadData: false,
+    speedTestEventUploadData: false,
+    isSpeedTestRunning: false,
+    speedTestResults: false,
   },
   getters: {
     getSocketStatus: (state) => {
@@ -15,14 +21,48 @@ export default new Vuex.Store({
     getSocketStatusMessage: (state) => {
       return state.socketStatusMessage;
     },
+    getSpeedTestEventData: (state) => {
+      return state.speedTestEventData;
+    },
+    getIsSpeedTestRunning: (state) => {
+      return state.isSpeedTestRunning;
+    },
+    getSpeedTestResults: (state) => {
+      return state.speedTestResults;
+    },
   },
   mutations: {
+    clearSpeedTestResults(state) {
+      state.speedTestResults = false;
+      state.speedTestEventData = false;
+    },
     SOCKET_STATUS(state, val) {
       state.socketStatus = val;
     },
     SOCKET_STATUS_MESSAGE(state, val) {
       state.socketStatusMessage = val;
     },
+    SOCKET_PROGRESS_EVENT(state, data) {
+      switch (data.type) {
+        case "testStart":
+          state.speedTestEventTestStartData = data;
+          break;
+        case "download":
+          state.speedTestEventDownloadData = data;
+          break;
+        case "upload":
+          state.speedTestEventUploadData = data;
+          break;
+      }
+      state.speedTestEventData = data;
+    },
+    SOCKET_RUNNING_SPEEDTEST_EVENT(state, { isRunning }) {
+      state.isSpeedTestRunning = isRunning;
+      if (isRunning) state.speedTestResults = false;
+    },
+    SOCKET_FINISHED_SPEEDTEST_EVENT(state, data) {
+      state.speedTestResults = { ...data };
+    },
   },
   actions: {
     socket_connect({ commit }) {
@@ -32,6 +72,9 @@ export default new Vuex.Store({
       commit("SOCKET_STATUS", false);
       commit("SOCKET_STATUS_MESSAGE", reason);
     },
+    socket_startSpeedTest({ commit }) {
+      commit("clearSpeedTestResults");
+      this._vm.$socket.client.emit("startSpeedTest", { start: true });
+    },
   },
-  modules: {},
 });
diff --git a/client/vue.config.js b/client/vue.config.js
index 674127c..b3db57a 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -25,8 +25,5 @@ module.exports = {
     },
     logLevel: "error",
   },
-
-  socketUrl: "http://localhost:8080",
-
   transpileDependencies: ["vuetify"],
 };
diff --git a/server/controllers/v1/logs/logsController.js b/server/controllers/v1/logs/logsController.js
index 640bc05..932e2a1 100644
--- a/server/controllers/v1/logs/logsController.js
+++ b/server/controllers/v1/logs/logsController.js
@@ -1,9 +1,10 @@
 async function home(req, res, next) {
   try {
+    res.send("We Made It");
     //
   } catch (e) {
     //correctly json handle this error message
-    logger.error("logsController | home | error=" + e);
+    logger.error("logsController | home | error=" + e.message);
   } finally {
     //
   }
diff --git a/server/routes/socket/index.js b/server/routes/socket/index.js
index 1dbfced..91aadcd 100644
--- a/server/routes/socket/index.js
+++ b/server/routes/socket/index.js
@@ -1,9 +1,17 @@
 const { logger } = require("../../util/logger");
 
+const speedtestService = require("../../services/speedtestService");
+
 module.exports = (io, em) => {
   io.on("connection", function (socket) {
-    logger.info("Speedtest Socket Connection established | socketId=" + socket.id);
+    logger.info("Speedtester Socket Connection established | socketId=" + socket.id);
+
+    //lets start a speedtest for our client, if one is running they
+    //will start recieving the values from the running test
+    socket.on("startSpeedTest", () => {
+      speedtestService.runLiveSpeedTest(em);
+    });
 
-    require("./logStream/logStream")(socket, em);
+    require("./liveTest/liveTest")(socket, em);
   });
 };
diff --git a/server/routes/socket/liveTest/liveTest.js b/server/routes/socket/liveTest/liveTest.js
new file mode 100644
index 0000000..d5a8de8
--- /dev/null
+++ b/server/routes/socket/liveTest/liveTest.js
@@ -0,0 +1,17 @@
+module.exports = async (socket, em) => {
+  //already connected so what do we want to do in here
+  em.on("progressEvent", async function (progressEvent) {
+    // console.log("emitting progress event to ", socket.id);
+    socket.emit("PROGRESS_EVENT", progressEvent);
+  });
+
+  em.on("runningSpeedTestEvent", async function (params) {
+    //console.log("runningSpeedTestEvent -  " + JSON.stringify(params) + " sending event to ", socket.id);
+    socket.emit("RUNNING_SPEEDTEST_EVENT", params);
+  });
+
+  em.on("testResults", async function (testResults) {
+    //console.log("testResults -  " + JSON.stringify(testResults) + " sending event to ", socket.id);
+    socket.emit("FINISHED_SPEEDTEST_EVENT", testResults);
+  });
+};
diff --git a/server/routes/socket/logStream/logStream.js b/server/routes/socket/logStream/logStream.js
deleted file mode 100644
index 0a65a64..0000000
--- a/server/routes/socket/logStream/logStream.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = async (socket, em) => {
-  socket.emit("eventFromSpeedTest?");
-};
diff --git a/server/routes/v1/logs/logsController.js b/server/routes/v1/logs/logsController.js
deleted file mode 100644
index 0c89976..0000000
--- a/server/routes/v1/logs/logsController.js
+++ /dev/null
@@ -1,7 +0,0 @@
-
-async function home(req,res,next){
-
-
-}
-
-module.exports = { home }
\ No newline at end of file
diff --git a/server/services/speedtestService.js b/server/services/speedtestService.js
index da6bbf5..79eda49 100644
--- a/server/services/speedtestService.js
+++ b/server/services/speedtestService.js
@@ -4,7 +4,12 @@ const { logger } = require("../util/logger");
 const mongooseService = require("../services/mongooseService.js");
 const logsModel = require("../models/logSchema.js");
 
+const events = require("events");
+const em = new events.EventEmitter();
+
 const speedtestService = {
+  liveTestRunning: false,
+
   runSpeedTestLog: async function () {
     try {
       logger.info("speedtestService | Running a speedtest");
@@ -13,11 +18,37 @@ const speedtestService = {
       const newLog = new logsModel(testResults);
       const logSaveResult = await newLog.save();
 
-      logger.info(`speedtestService | LogsModel Saved | ${logSaveResult._id}`);
+      logger.info(`speedtestService | runSpeedTestLog | LogsModel Saved | ${logSaveResult._id}`);
+    } catch (err) {
+      logger.error("speedtestService | runSpeedTestLog | error=" + err.message);
+    } finally {
+      logger.info("speedtestService | runSpeedTestLog | Test Complete");
+    }
+  },
+
+  runLiveSpeedTest: async function (em) {
+    if (this.liveTestRunning) {
+      await em.emit("runningSpeedTestEvent", { isRunning: true });
+      logger.info("speedtestService | runLiveSpeedTest | Live Test Running - Skipping Test");
+      return true;
+    }
+    try {
+      logger.info("speedtestService | runLiveSpeedTest | Running a live speedtest");
+
+      this.liveTestRunning = true;
+      await em.emit("runningSpeedTestEvent", { isRunning: true });
+      const testResults = await speedTest({
+        progress: async (progressEvent) => {
+          await em.emit("progressEvent", progressEvent);
+        },
+      });
+      await em.emit("testResults", testResults);
     } catch (err) {
-      logger.error("speedtestService | error=" + err.message);
+      logger.error("speedtestService | runLiveSpeedTest | error=" + err.message);
     } finally {
-      logger.info("speedtestService | Test Complete");
+      this.liveTestRunning = false;
+      await em.emit("runningSpeedTestEvent", { isRunning: false });
+      logger.info("speedtestService | runLiveSpeedTest | Test Complete");
     }
   },
 };