diff --git a/package-lock.json b/package-lock.json
index 7cfc5c4..2bba870 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7299,6 +7299,11 @@
         "easy-stack": "^1.0.0"
       }
     },
+    "js-search": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/js-search/-/js-search-2.0.0.tgz",
+      "integrity": "sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8251,8 +8256,7 @@
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-      "dev": true
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
     "move-concurrently": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index c62af5e..7d51276 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "firebase": "^7.14.1",
+    "js-search": "^2.0.0",
     "minireset.css": "0.0.6",
+    "moment": "^2.24.0",
     "sweetalert": "^2.1.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
diff --git a/src/App.vue b/src/App.vue
index 2386b07..7a35d65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,18 @@
           <h1 class="heading">Hyphen-Hacks 2020</h1>
         </div>
         <router-link class="nav__link" :class="{active: $route.path == '/'}" to="/">Statistics</router-link>
-        <router-link class="nav__link" :class="{active: $route.path == '/review'}" to="/review">Applications in review</router-link>
+        <router-link class="nav__link" :class="{active: $route.path == '/review'}" to="/review">Applications in review
+          <span class="notification" v-if="$store.getters.applications.length > 0"><i class="fas fa-bell"></i>{{$store.getters.applications.length}}</span></router-link>
         <router-link class="nav__link" :class="{active: $route.path == '/mentors'}" to="/mentors">Mentors</router-link>
-        <router-link class="nav__link" :class="{active: $route.path == '/attendees'}" to="/attendees">Attendees</router-link>
-        <router-link class="nav__link" :class="{active: $route.path == '/volunteers'}" to="/volunteers">Volunteers</router-link>
-        <router-link class="nav__link" :class="{active: $route.path == '/notifications'}" to="/notifications">Notifications</router-link>
-        <router-link class="nav__link" :class="{active: $route.path == '/schedule'}" to="/schedule">Schedule</router-link>
+        <router-link class="nav__link" :class="{active: $route.path == '/attendees'}" to="/attendees">Attendees
+        </router-link>
+        <router-link class="nav__link" :class="{active: $route.path == '/volunteers'}" to="/volunteers">Volunteers
+        </router-link>
+        <router-link class="nav__link" :class="{active: $route.path == '/notifications'}" to="/notifications">
+          Notifications
+        </router-link>
+        <router-link class="nav__link" :class="{active: $route.path == '/schedule'}" to="/schedule">Schedule
+        </router-link>
         <div class="nav__user">
           <p class="bold">{{user.displayName}}</p>
           <p>{{user.email}}</p>
@@ -25,9 +31,12 @@
       <div class="card">
         <h1 class="heading">Login</h1>
         <p>Please login to access the Hyphen-Hacks 2020 Admin Dashboard</p>
-        <p>For security reasons, please use your Hyphen-Hacks email address. If you need help signing in please email Ronan
+        <p>For security reasons, please use your Hyphen-Hacks email address. If you need help signing in please email
+          Ronan
           <a href="mailto:ronan.furuta@hyphen-hacks.com">ronan.furuta@hyphen-hacks.com</a></p>
-        <p>Non Hyphen-Hacks team members need to be authorized directly, please email <a href="mailto:ronan.furuta@hyphen-hacks.com">Ronan</a> from the email you would like authorized. (this can take up to 24 hours)</p>
+        <p>Non Hyphen-Hacks team members need to be authorized directly, please email <a
+            href="mailto:ronan.furuta@hyphen-hacks.com">Ronan</a> from the email you would like authorized. (this can
+          take up to 24 hours)</p>
         <button @click="login" class="btn mt-1"><i class="fa fa-google"></i>Login With Google</button>
       </div>
 
@@ -51,7 +60,8 @@
       </div>
       <div class="loader__row">
 
-        <p>Something not working right? Get tech support <a href="mailto:ronan.furuta@hyphen-hacks.com">ronan.furuta@hyphen-hacks.com</a></p>
+        <p>Something not working right? Get tech support <a href="mailto:ronan.furuta@hyphen-hacks.com">ronan.furuta@hyphen-hacks.com</a>
+        </p>
       </div>
 
     </div>
@@ -59,13 +69,13 @@
   </div>
 </template>
 <script>
-
+let focus, blur, tokenRefresh
   export default {
-    name: "App Container",
+    name: "AppContainer",
     data() {
       return {
-version: require("../package").version,
-firebaseLoaded: false,
+        version: require("../package").version,
+        firebaseLoaded: false,
         noAccess: false
       }
     },
@@ -75,6 +85,24 @@ firebaseLoaded: false,
       }
     },
     methods: {
+
+      loadBasicData() {
+        if (this.$route.path != "/review") {
+          fetch(this.$store.getters.api + "/api/v1/admin/applications", {
+            method: "get",
+            headers: {
+              "Authorization": this.$store.getters.token
+            }
+          }).then(async res => {
+            let json = await res.json()
+            console.log(json, res.status)
+            if (json.applicants) {
+              this.$store.commit("applications", json.applicants)
+            }
+          })
+        }
+
+      },
       login() {
         var provider = new this.$firebase.auth.GoogleAuthProvider();
         provider.setCustomParameters({
@@ -87,16 +115,43 @@ firebaseLoaded: false,
       }
     },
     mounted() {
-      this.$firebase.auth().onAuthStateChanged((user) =>{
-       this.firebaseLoaded = true
+     let getToken = (trig) => {
+        console.log('token trigger', trig)
+        if (this.$firebase.currentUser) {
+          this.$firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then((idToken) => {
+
+            this.$store.commit("token", idToken)
+
+
+          })
+        }
+
+      }
+      this.$firebase.auth().onAuthStateChanged((user) => {
+
         if (user) {
           // User is signed in.
           let email = user.email
           console.log(email.endsWith("hyphen-hacks.com"))
           if (email.endsWith("hyphen-hacks.com")) {
-            this.$store.commit("user", user)
+            this.$firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then((idToken) => {
+              // Send token to your backend via HTTPS
+              // ...
+              this.$store.commit("user", user)
+              this.$store.commit("token", idToken)
+              this.firebaseLoaded = true
+              tokenRefresh =   window.setInterval(getToken("interval"), 900000)
+             focus = window.addEventListener("focus", getToken("focus"), false);
+              blur = window.addEventListener("blur", getToken("blur"), false);
+
+          this.loadBasicData()
+            }).catch(function (error) {
+              // Handle error
+            });
+
           } else {
             this.$store.commit("user", false)
+            this.firebaseLoaded = true
             this.noAccess = true
             console.log("no acess")
             this.$swal({
@@ -107,6 +162,7 @@ firebaseLoaded: false,
           }
         } else {
           this.$store.commit("user", false)
+          this.firebaseLoaded = true
           // No user is signed in.
         }
       });
diff --git a/src/assets/main.scss b/src/assets/main.scss
index d2a434a..bd9166c 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -37,15 +37,25 @@ html, body, #app, .app__container {
 
 .nav__link {
   @include transition;
+
   color: $text;
   font-weight: bold;
-  display: block;
+  display: flex;
   padding: $spacing;
   text-decoration: none;
 
   &:hover {
     background: $bg--hover;
   }
+
+  .notification {
+    margin-left: auto;
+    color: $brand;
+
+    i {
+      margin-right: 0.5rem;
+    }
+  }
 }
 
 .nav__link.active {
@@ -63,14 +73,17 @@ html, body, #app, .app__container {
 
   }
 }
+
 .columns {
   display: grid;
   grid-template-columns: auto 25rem;
+
   .column {
     @include shadow;
     background: $bg;
   }
 }
+
 .page {
   padding: $spacing;
   height: 100vh;
@@ -81,9 +94,11 @@ html, body, #app, .app__container {
   display: flex;
   justify-content: center;
   align-items: center;
+
   .card {
     max-width: 500px;
   }
+
   h1 {
     margin-bottom: 1rem;
   }
@@ -103,6 +118,7 @@ html, body, #app, .app__container {
     }
   }
 }
+
 .loader--full {
   position: fixed;
   width: 100vw;
@@ -111,13 +127,125 @@ html, body, #app, .app__container {
   display: grid;
   z-index: 99999999;
   grid-template-rows: 1fr 1fr 1fr;
+
   .loader__row {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
+
   .sk-cube-grid {
     margin-bottom: 1rem;
   }
-}
\ No newline at end of file
+}
+
+.searchBox {
+  @include card;
+
+  .searchRow {
+    display: flex;
+
+    input {
+      width: 100%;
+      margin-right: 1rem;
+    }
+
+    select {
+      padding-right: 2vw;
+    }
+  }
+
+  .reviewHeader {
+    display: grid;
+    padding-top: 2rem;
+    grid-template-columns: 2fr 1.75fr 1fr 1fr;
+
+    .right {
+      text-align: right;
+    }
+
+  }
+
+}
+
+.people {
+  height: 87%;
+  width: 100%;
+  overflow-y: scroll;
+}
+
+.appliedPerson {
+  @include card;
+  @include transition;
+  margin: 1rem 0;
+  display: grid;
+  grid-template-columns: 2fr 1.75fr 1fr 1fr;
+
+  .right {
+    text-align: right;
+  }
+}
+
+.appliedPerson:hover {
+  @include card--hover;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing;
+  height: 100vh;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    padding-bottom: $spacing;
+    border-bottom: 1px solid $text;
+  }
+
+  .sectionTitle {
+    margin-top: 2rem;
+    font-weight: bold;
+  }
+
+  .appData {
+    overflow-y: scroll;
+  }
+
+  .info {
+    margin: 0.5rem 0;
+    span {
+      font-weight: bold;
+    }
+  }
+
+  .question {
+    margin: 0.5rem 0;
+    span {
+      font-weight: bold;
+      display: block;
+    }
+  }
+
+  .actions {
+    margin-top: auto;
+
+    button {
+      margin-top: 1rem;
+      width: 100%;
+    }
+
+  }
+}
+
+.column.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
diff --git a/src/assets/vars.scss b/src/assets/vars.scss
index 05d7b9f..5673df1 100644
--- a/src/assets/vars.scss
+++ b/src/assets/vars.scss
@@ -63,6 +63,13 @@ $text: white;
 }
 
 @mixin input {
+  background: $dark;
+  border: none;
+  @include rounding;
+  padding: 1rem;
+  font-size: 1rem;
+  color: $text;
+  appearance: none;
   @apply bg-gray p-2 border-4 border-gray rounded-sm duration-200 text-white font-normal;
 }
 @mixin input--hover {
@@ -132,7 +139,7 @@ select.input {
   font-size: 1.5rem;
   font-weight: bold;
 }
-.card {
+@mixin card {
   @include shadow;
   @include rounding;
   background: $bg;
@@ -140,6 +147,16 @@ select.input {
   display: flex;
   flex-direction: column;
 }
+@mixin card--hover {
+  @include transition;
+
+    background: color.adjust($bg, $lightness: 10);
+
+
+}
+.card {
+@include card;
+}
 .mt-1 {
   margin-top: 1rem;
 }
diff --git a/src/main.js b/src/main.js
index 7d2dd77..f40598b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,8 @@ import router from './router'
 import store from './store'
 import firebase from 'firebase/app'
 import swal from 'sweetalert'
+import moment from 'moment'
+import * as JsSearch from 'js-search';
 import 'firebase/auth'
 import 'firebase/performance'
 import 'firebase/remote-config'
@@ -24,6 +26,8 @@ const firebaseConfig = {
 firebase.initializeApp(firebaseConfig)
 Vue.prototype.$firebase = firebase
 Vue.prototype.$swal = swal
+Vue.prototype.$moment = moment
+Vue.prototype.$JsSearch = JsSearch
 new Vue({
   router,
   store,
diff --git a/src/store/index.js b/src/store/index.js
index fd5c999..f69fc3b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,13 +7,31 @@ export default new Vuex.Store({
   state: {
     user: false,
     token: false,
+    api: "https://2020.hyphen-hacks.com",
+    applications: []
   },
   getters: {
+    applications(state) {
+      return state.applications
+    },
+    applicationsObject(state) {
+      let result = {}
+      state.applications.forEach(app => {
+        result[app["_id"]] = app
+      })
+      return result
+    },
     user(state) {
       return state.user
     },
     token(state) {
       return state.token
+    },
+    api(state) {
+      if (window.location.hostname == "localhost") {
+        return "http://localhost:3005"
+      }
+      return state.api
     }
   },
   mutations: {
@@ -22,6 +40,9 @@ export default new Vuex.Store({
     },
     token(state, token) {
       state.token = token
+    },
+    applications(state, apps) {
+      state.applications = apps
     }
   },
   actions: {
diff --git a/src/views/Review.vue b/src/views/Review.vue
index 30fd104..a415798 100644
--- a/src/views/Review.vue
+++ b/src/views/Review.vue
@@ -2,9 +2,91 @@
   <div class="columns">
 
     <div class="page">
+      <div class="searchBox">
+        <form @submit.prevent class="searchRow">
+          <input v-model="searchTerm" type="search" class="input" placeholder="Search">
+          <select v-model="type" class="input" name="" id="">
+            <option value="all">All</option>
+            <option value="mentor">Mentors</option>
+            <option value="attendee">Attendees</option>
+            <option value="volunteer">Volunteers</option>
+          </select>
+        </form>
+        <div class="reviewHeader">
+          <p>Name</p>
+          <p>School/Work</p>
+          <p class="right">Role</p>
+          <p class="right">Applied</p>
+        </div>
 
+      </div>
+      <div class="people">
+        <div @click="openPerson(app)" :key="app['_id']" v-for="app in searched" class="appliedPerson">
+          <p>{{app.firstName}} {{app.lastName}}</p>
+          <p>{{app.application.school? app.application.school : app.application.company}}</p>
+          <p class="right">{{app.role}}</p>
+          <p class="right">{{relativeTime(app.applied)}}</p>
+        </div>
+      </div>
+    </div>
+    <div v-if="chosen" class="column">
+      <div class="name">
+        <div>
+
+          <h1 class="heading">{{focusedApp.firstName}} {{focusedApp.lastName}}</h1>
+          <p>{{focusedApp.application.school ? `${focusedApp.application.school}, ${focusedApp.application.graduation}
+            `: focusedApp.application.company}}</p>
+        </div>
+        <p>{{focusedApp.role}}</p>
+      </div>
+      <div class="appData">
+        <p class="sectionTitle">Info</p>
+        <p class="info">email: <span>{{focusedApp.email}}</span></p>
+        <div v-if="focusedApp.role == 'attendee'">
+          <p class="info">Zipcode: <span>{{focusedApp.application.zip}}</span></p>
+          <p class="info">Birthday: <span>{{focusedApp.application.birthday}}</span></p>
+          <p class="info">Gender: <span>{{focusedApp.application.gender}}</span></p>
+          <p class="question">Race: <span>{{objList(focusedApp.application.race)}}</span></p>
+        </div>
+        <div v-if="focusedApp.role == 'mentor'">
+          <p class="info">Phone: <span>{{focusedApp.application.phoneNumber}}</span></p>
+          <p class="info">Company: <span>{{focusedApp.application.company}}</span></p>
+          <p class="info">Position: <span>{{focusedApp.application.companyPosition}}</span></p>
+        </div>
+        <p class="sectionTitle">Questions</p>
+        <div v-if="focusedApp.role == 'mentor'">
+          <p class="question">Experience Attending Hackathons: <span>{{focusedApp.application.expAttending}}</span></p>
+          <p class="question">Experience Mentoring or Judging Hackathons: <span>{{focusedApp.application.expMentoringJudging}}</span></p>
+          <p class="question">Experience Working with High School Students: <span>{{focusedApp.application.expWorkingWithStudents}}</span></p>
+          <p class="question">Areas of expertise: <span>{{focusedApp.application.areasOfExpertise}}</span></p>
+        </div>
+        <div v-if="focusedApp.role == 'attendee'">
+          <p class="question">Why do you want to attend?: <span>{{focusedApp.application.whyDoYouWantToAttend}}</span></p>
+          <p class="question">Experience with software development: <span>{{focusedApp.application.experienceSoftware}}</span></p>
+          <p class="question">Experience with hardware development: <span>{{focusedApp.application.experienceHardware}}</span></p>
+          <p class="question">Experience with hackathons: <span>{{focusedApp.application.experienceHackathon}}</span></p>
+          <p class="question">Experience with team coding: <span>{{focusedApp.application.experienceTeamCoding}}</span></p>
+          <p class="question">Description of computer science experience: <span>{{focusedApp.application.descriptionCompSciExp}}</span></p>
+          <p class="info">Coming with team: <span>{{focusedApp.application.team? "Yes" : "No"}}</span></p>
+
+        </div>
+        <p class="sectionTitle">Logistics</p>
+        <p v-if="focusedApp.role == 'attendee'" class="info">Laptop: <span>{{focusedApp.application.laptop? "Yes" : "No"}}</span></p>
+        <p class="question">Food Allergies: <span>{{objList(focusedApp.application.foodAllergies)}}</span></p>
+        <p class="question">Dietary Restrictions: <span>{{objList(focusedApp.application.dietaryRestrictions)}}</span></p>
+        <p class="question">Accommodations: <span>{{focusedApp.application.accommodations}}</span></p>
+        <p class="info">Shirt Size: <span>{{focusedApp.application.shirtSize}}</span></p>
+        <p class="question">Referrers: <span>{{objList(focusedApp.application.referrers)}}</span></p>
+        <p class="question">Comments: <span>{{focusedApp.application.comments}}</span></p>
+      </div>
+      <div class="actions">
+        <button class="btn">Accept</button>
+        <button class="btn--dark">Decline</button>
+      </div>
+    </div>
+    <div v-if="!chosen" class="column empty">
+      <p>Click on someone to get details about their application</p>
     </div>
-    <div class="column"></div>
   </div>
 </template>
 
@@ -16,6 +98,108 @@
     name: 'Home',
     components: {
       HelloWorld
+    },
+    data() {
+      return {
+        chosen: false,
+        search: new this.$JsSearch.Search('_id'),
+        "searchTerm": "",
+        type: "all"
+
+      }
+    },
+    methods: {
+      objList(obj) {
+        let terms = []
+        Object.keys(obj).forEach(i => {
+          if (i === "otherEnabled" && obj.otherEnabled) {
+           // console.log(obj.otherEnabled, obj.other)
+            terms.push(obj.other)
+          } else {
+            if (obj[i] && i != "other") {
+              terms.push(i)
+            }
+          }
+
+        })
+        return String(terms)
+      },
+      relativeTime(time) {
+        return this.$moment.unix(time).fromNow()
+      },
+      openPerson(app) {
+        this.chosen = app["_id"]
+      }
+    },
+    computed: {
+      focusedApp() {
+        if (this.chosen) {
+          return this.applicationsObject[this.chosen]
+        } else {
+          return false
+        }
+
+      },
+      applications() {
+        this.search = new this.$JsSearch.Search('_id')
+        this.search.addIndex('firstName');
+        this.search.addIndex('lastName');
+        this.search.addIndex('email');
+        this.search.addIndex('role');
+        this.search.addIndex(['application', 'school']);
+        this.search.addIndex(['application', 'company']);
+        this.search.addDocuments(this.$store.getters.applications)
+        return this.$store.getters.applications.sort((a, b) => {
+          return a.applied - b.applied
+        })
+      },
+      searched() {
+        console.log(this.type)
+        if (this.searchTerm.length >= 1) {
+
+          return this.search.search(this.searchTerm).filter(a => {
+            if (this.type == "all") {
+              return true
+            } else {
+              return a.role == this.type
+            }
+          })
+
+
+        } else {
+
+          return this.applications.filter(a => {
+            if (this.type == "all") {
+              return true
+            } else {
+              return a.role == this.type
+            }
+          })
+
+        }
+
+      },
+      applicationsObject() {
+        return this.$store.getters.applicationsObject
+      }
+    },
+    mounted() {
+
+      fetch(this.$store.getters.api + "/api/v1/admin/applications", {
+        method: "get",
+        headers: {
+          "Authorization": this.$store.getters.token
+        }
+      }).then(async res => {
+        let json = await res.json()
+        console.log(json, res.status)
+        if (json.applicants) {
+          this.$store.commit("applications", json.applicants)
+        } else {
+          this.$swal("Error fetching applications")
+        }
+      })
     }
+
   }
 </script>