diff --git a/src/App.vue b/src/App.vue
index 55df315..548043f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,39 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <HelloWorld @updated="logger" />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from "./components/HelloWorld.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    HelloWorld
-  }
-}
+    HelloWorld,
+  },
+  methods: {
+    logger(val) {
+      console.log(val);
+    },
+  },
+};
 </script>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  -moz-osx-font-smoothing: grayscale; */
+  /* text-align: center; */
+  color: azure;
+}
+
+* {
+  background: #2a2a2a;
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 879051a..3363249 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,58 +1,230 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+  <div class="main">
+    <HistoryList />
+    <div class="top">
+      <div class="header">
+        DNS Lookup Tool
+        <div class="flexRow">
+          <button @click="getRecordsFromDomain(newDomain)" class="btn input">
+            Lookup
+          </button>
+          <input
+            id="domainEnter"
+            type="text"
+            v-model="newDomain"
+            class="input text"
+            @keyup.enter="getRecordsFromDomain(newDomain)"
+          />
+          <label style="margin: 10px;" for="domainEnter">Domain: </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="center">
+      <h2 class="title" v-if="!data">Please enter a domain</h2>
+      <div v-if="data">
+        <h2 class="title">
+          Domain:
+          <a :href="domain">{{ data[0]["dns"]["domain"] }}</a>
+        </h2>
+        <h3 class="title">Whois</h3>
+        <ul>
+          <li v-for="reg in data[0]['whois']['registrar']" :key="reg.id">
+            Registrar: {{ reg }}
+          </li>
+          <li v-for="stat in data[0]['whois']['status']" :key="stat.id">
+            Status: {{ stat }}
+          </li>
+          <div v-if="data[0]['whois']['registrant']['registrantID'] != null">
+            <li
+              v-for="reg in data[0]['whois']['registrant']['registrantName']"
+              :key="reg.id"
+            >
+              Registrant Name: {{ reg }}
+            </li>
+            <li
+              v-for="reg in data[0]['whois']['registrant']['registrantID']"
+              :key="reg.id"
+            >
+              Eligibility ID: {{ reg }}
+            </li>
+            <li
+              v-for="reg in data[0]['whois']['registrant']['eligibilityType']"
+              :key="reg.id"
+            >
+              Eligibility Type: {{ reg }}
+            </li>
+          </div>
+          <li v-for="cd in data[0]['whois']['createDate']" :key="cd.id">
+            Creation Date: {{ cd }}
+          </li>
+          <li v-for="ns in data[0]['whois']['nameservers']" :key="ns.id">
+            Nameserver: {{ ns }}
+          </li>
+        </ul>
+        <h3 class="title">DNS Records</h3>
+        <ul>
+          <li v-for="a in data[0]['dns']['a']" :key="a.id">A: {{ a }}</li>
+          <li v-for="aaaa in data[0]['dns']['aaaa']" :key="aaaa.id">
+            AAAA: {{ aaaa }}
+          </li>
+          <li v-for="mx in data[0]['dns']['mx']" :key="mx.id">
+            MX: {{ mx[1] }} PRI: {{ mx[0] }}
+          </li>
+          <li v-for="txt in data[0]['dns']['txt']" :key="txt.id">
+            TXT: {{ txt }}
+          </li>
+          <li v-for="ns in data[0]['dns']['ns']" :key="ns.id">NS: {{ ns }}</li>
+          <li v-for="soa in data[0]['dns']['soa']" :key="soa.id">
+            SOA: {{ soa }}
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import getRecords from "@/services/doRequest";
+import HistoryList from "@/components/HistoryList.vue";
 export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
+  name: "HelloWorld",
+  props: ["value"],
+  components: {
+    HistoryList,
+  },
+  data() {
+    return {
+      data: [],
+      domain: [],
+      newDomain: "",
+    };
+  },
+  methods: {
+    getRecordsFromDomain(id) {
+      if (id.includes("http")) {
+        id = id.split(/https?:\/\//)[1];
+      }
+      if (id.includes("/")) {
+        id = id.split("/")[0];
+      }
+      id = id.trim();
+      console.log(id);
+      if (
+        /^[a-zA-Z0-9][a-zA-Z0-9-.]{1,100}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/.test(
+          id
+        )
+      ) {
+        getRecords(id)
+          .then((records) => {
+            this.data = JSON.parse(records);
+            this.domain = "http://" + this.data[0]["dns"]["domain"];
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      } else {
+        console.log(this.newDomain + " is not a domain aparently");
+        this.newDomain = "";
+      }
+    },
+  },
+  created: function() {
+    this.data = this.getRecordsFromDomain("blank");
+  },
+  computed: {
+    inputValue: {
+      set(text) {
+        this.$emit("updated", text);
+      },
+      get() {
+        return this.value;
+      },
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h3 {
-  margin: 40px 0 0;
+a {
+  background: rgb(66, 66, 66);
+}
+a:link,
+a:visited {
+  color: azure;
+}
+* {
+  background: rgb(66, 66, 66);
+  color: azure;
+}
+h3,
+h2 {
+  background: rgb(66, 66, 66);
+  margin-left: 2%;
 }
 ul {
-  list-style-type: none;
-  padding: 0;
+  background: rgb(66, 66, 66);
+  margin-left: 5%;
+  margin-top: 20px;
 }
 li {
-  display: inline-block;
-  margin: 0 10px;
+  background: rgb(66, 66, 66);
+  padding: 5px;
+  font-family: "Roboto Mono", monospace;
+  list-style: none;
+  font-size: medium;
 }
-a {
-  color: #42b983;
+.top {
+  position: absolute;
+  border: 1px lightgrey;
+  border-style: solid;
+  border-radius: 15px;
+  left: 20%;
+  top: 10px;
+  width: 70%;
+  background: rgb(66, 66, 66);
+}
+.center {
+  position: absolute;
+  border: 1px lightgrey;
+  border-radius: 15px;
+  border-style: solid;
+  left: 20%;
+  top: 107px;
+  width: 70%;
+  background: rgb(66, 66, 66);
+  min-height: 100px;
+}
+.input {
+  color: azure;
+  background: rgb(66, 66, 66);
+  padding-left: 10px;
+}
+.title {
+  font-family: "Arial", bold;
+}
+.header {
+  margin: 1em;
+  display: flex;
+  flex-direction: row;
+}
+.btn {
+  min-width: 100px;
+  min-height: 35px;
+  font-size: 24px;
+  display: flex;
+  align-content: flex-end;
+  margin-left: 2em;
+  border-radius: 5px;
+}
+.text {
+  width: 400px;
+  border-radius: 10px;
+}
+.flexRow {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
 }
 </style>
diff --git a/src/components/HistoryList.vue b/src/components/HistoryList.vue
new file mode 100644
index 0000000..efc9121
--- /dev/null
+++ b/src/components/HistoryList.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="side">
+    <ul>
+      <li>Lookup 1</li>
+      <li>Lookup 2</li>
+      <li>Lookup 3</li>
+      <li>Lookup 4</li>
+      <li>Lookup 5</li>
+      <li>Lookup 6</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.side {
+  position: absolute;
+  left: 2em;
+  border: 1px lightgrey;
+  border-radius: 15px;
+  border-style: solid;
+  width: 15%;
+  height: 80vh;
+  margin-top: 100px;
+  background: rgb(66, 66, 66);
+}
+ul {
+  background: rgb(66, 66, 66);
+  margin-left: 5%;
+  margin-top: 20px;
+}
+li {
+  background: rgb(66, 66, 66);
+  padding: 5px;
+  font-family: "Roboto Mono", monospace;
+  list-style: none;
+  font-size: medium;
+}
+</style>
diff --git a/src/services/doRequest.js b/src/services/doRequest.js
new file mode 100644
index 0000000..2328498
--- /dev/null
+++ b/src/services/doRequest.js
@@ -0,0 +1,25 @@
+function getRecords(id) {
+  let URL = "http://10.6.9.42:5000/lookup/";
+  // id = "mmorison.com";
+
+  let domain = URL + id;
+  let request = new XMLHttpRequest();
+
+  return new Promise(function(resolve, reject) {
+    request.onreadystatechange = function() {
+      if (request.readyState !== 4) return;
+      if (request.status >= 200 && request.status <= 300) {
+        resolve(request.responseText);
+      } else {
+        reject({
+          status: request.status,
+          statusText: request.statusText,
+        });
+      }
+    };
+    request.open("GET", domain, true);
+    request.send();
+  });
+}
+
+module.exports = getRecords;