diff --git a/src/api/__tests__/validations.test.js b/src/api/__tests__/validations.test.js
deleted file mode 100644
index cdb9774..0000000
--- a/src/api/__tests__/validations.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import nock from 'nock';
-import { conchApi } from '@src/config';
-import { getValidations } from '../validations';
-
-// Fixture
-import validations from '@src/__fixtures__/validations.js';
-
-localStorage.setItem('token', 'my-token');
-
-describe('validations API', () => {
-  describe('getValidations', () => {
-    let response;
-
-    beforeEach(() => {
-      response = {};
-
-      nock(conchApi)
-        .get('/validation')
-        .reply(200, validations);
-    });
-
-    test('should return a status of 200', async () => {
-      expect.assertions(1);
-      response = await getValidations();
-      expect(response.status).toEqual(200);
-    });
-
-    test('should return valid data', async () => {
-      expect.assertions(2);
-      response = await getValidations();
-      const validations = response.data;
-      expect(typeof validations).toBe('object');
-      expect(Array.isArray(validations)).toBeTruthy();
-    });
-  });
-});
diff --git a/src/api/validations.js b/src/api/validations.js
deleted file mode 100644
index 866cce3..0000000
--- a/src/api/validations.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { requestWithToken } from './request.js';
-
-export const getValidations = () => {
-  return requestWithToken({
-    method: 'GET',
-    url: '/validation',
-  });
-};
-
-export default {
-  getValidations,
-};
diff --git a/src/router.js b/src/router.js
index 56520a9..732e65d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import Devices from './views/Devices/Devices.vue';
+import Device from './views/Devices/Device.vue';
 import DataCenters from './views/DataCenterBrowser/DataCenters.vue';
 import SignIn from './views/SignIn/SignIn.vue';
 import UserManagement from './views/UserManagement/UserManagement.vue';
@@ -47,7 +48,7 @@ export default new Router({
           // when /device/:deviceId is matched
           path: ':deviceId',
           name: 'device',
-          component: Devices,
+          component: Device,
         },
       ],
     },
diff --git a/src/store/__tests__/actions.test.js b/src/store/__tests__/actions.test.js
index 807c685..513f971 100644
--- a/src/store/__tests__/actions.test.js
+++ b/src/store/__tests__/actions.test.js
@@ -149,11 +149,4 @@ describe('actions', () => {
       expect(commit).toHaveBeenCalledWith('setUsers', []);
     });
   });
-
-  describe('setValidations', () => {
-    test('it sets the validations', () => {
-      actions.setValidations({ commit }, {});
-      expect(commit).toHaveBeenCalledWith('setValidations', {});
-    });
-  });
 });
diff --git a/src/store/__tests__/mutations.test.js b/src/store/__tests__/mutations.test.js
index fe6bab2..76fab2a 100644
--- a/src/store/__tests__/mutations.test.js
+++ b/src/store/__tests__/mutations.test.js
@@ -12,7 +12,6 @@ import rackLayout from '@src/__fixtures__/rackLayout.js';
 import rackRooms from '@src/__fixtures__/rackRooms.js';
 import userAuthTokens from '@src/__fixtures__/userAuthTokens.js';
 import users from '@src/__fixtures__/users.js';
-import validations from '@src/__fixtures__/validations.js';
 
 describe('mutations', () => {
   let state;
@@ -217,13 +216,4 @@ describe('mutations', () => {
       expect(state).toMatchObject({ users });
     });
   });
-
-  describe('setValidations', () => {
-    test('it adds validations to the state', () => {
-      state = { validations: [] };
-
-      mutations.setValidations(state, validations);
-      expect(state).toMatchObject({ validations });
-    });
-  });
 });
diff --git a/src/store/actions.js b/src/store/actions.js
index 6154c18..cc630b0 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -149,10 +149,6 @@ export const setUsers = ({ commit }, users) => {
   commit('setUsers', users);
 };
 
-export const setValidations = ({ commit }, validations) => {
-  commit('setValidations', validations);
-};
-
 export default {
   clearActiveDevice,
   clearActiveRoomName,
@@ -191,5 +187,4 @@ export default {
   setShowDeviceInRack,
   setUserAuthTokens,
   setUsers,
-  setValidations,
 };
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 315682f..19e12ee 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -151,10 +151,6 @@ export const setUsers = (state, users) => {
   state.users = users;
 };
 
-export const setValidations = (state, validations) => {
-  state.validations = validations;
-};
-
 export default {
   clearActiveDevice,
   clearActiveRoomName,
@@ -193,5 +189,4 @@ export default {
   setShowDeviceInRack,
   setUserAuthTokens,
   setUsers,
-  setValidations,
 };
diff --git a/src/store/state.js b/src/store/state.js
index ff080b4..5ddee54 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -31,7 +31,6 @@ export const initialState = () => {
     userAuthTokens: [],
     userOrganizations: [],
     users: [],
-    validations: [],
   };
 };
 
@@ -67,7 +66,6 @@ export const state = {
   userAuthTokens: [],
   userOrganizations: [],
   users: [],
-  validations: [],
 };
 
 export default {
diff --git a/src/styles/components/_cards.scss b/src/styles/components/_cards.scss
new file mode 100644
index 0000000..79efced
--- /dev/null
+++ b/src/styles/components/_cards.scss
@@ -0,0 +1,19 @@
+.card {
+  &.is-rounded-1 {
+    border-radius: 3px;
+
+    .card-footer {
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+  }
+
+  &.is-rounded-2 {
+    border-radius: 4px;
+
+    .card-footer {
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+  }
+}
diff --git a/src/styles/components/_device-browser.scss b/src/styles/components/_device-browser.scss
index 53dd0ec..12edc50 100644
--- a/src/styles/components/_device-browser.scss
+++ b/src/styles/components/_device-browser.scss
@@ -1,66 +1,76 @@
 .device-browser {
-	.device-search {
-		flex-grow: 1;
+  .device-search {
+    flex-grow: 1;
 
-		input.search {
-			background-color: $dark;
-			border-color: $grey;
-			border-radius: 4px;
-			color: #bdcbdb;
-			height: 46px;
-			margin-bottom: 20px;
-			min-width: 350px;
+    input.search {
+      background-color: $dark;
+      border-color: $grey;
+      border-radius: 4px;
+      color: #bdcbdb;
+      margin-bottom: 20px;
+      min-width: 350px;
 
-			&::placeholder {
-				color: $grey-light;
-			}
+      &::placeholder {
+        color: #bdcbdb;
+      }
 
-			&:focus {
-				border: 1px solid $blue;
-				box-shadow: none;
-			}
-		}
+      &:focus {
+        border: 1px solid $blue;
+        box-shadow: none;
+      }
+    }
+  }
 
-		span.icon.is-left {
-			top: 6px;
-			left: 2px;
+  .button.search {
+    font-weight: bold;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
 
-			.material-icons {
-				font-size: 28px;
-			}
-		}
-	}
+  .device-details {
+    position: sticky;
+    top: 0;
 
-	.button.search {
-		font-weight: bold;
-		height: 46px;
-		padding-right: 20px;
-		padding-left: 20px;
-	}
+    .box.serial-number {
+      background-color: $dark;
+    }
+  }
 
-	.device-details {
-		position: sticky;
-		top: 0;
+  .card {
+    cursor: pointer;
 
-		.box.serial-number {
-			background-color: $dark;
-		}
-	}
+    &.is-parent {
+      background-color: #1a2531;
+      transition: all 0.1s ease;
 
-	.empty-state {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+      &:hover {
+        background-color: #1f2a36;
+        border: 1px solid #5a6977;
+        // transform: scale(1.02);
+        transition: all 0.1s ease;
+      }
+    }
 
-		img {
-			margin: 30px auto;
-		}
+    .card-content {
+      padding: 20px;
 
-		.empty-state-heading {
-			color: $white;
-			font-size: 24px;
-			margin-bottom: 30px;
-		}
-	}
+      .content {
+        .card {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
+          padding: 10px;
+
+          &:not(:last-of-type) {
+            margin-bottom: 12px;
+          }
+
+          p.is-title {
+            font-weight: bold;
+            margin-bottom: 0.2em;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f872429..d54edb2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -37,6 +37,7 @@
 @import './components/base-modal';
 @import './components/build';
 @import './components/builds';
+@import './components/cards';
 @import './components/confirmation-modal';
 @import './components/create-build-modal';
 @import './components/create-token-modal';
diff --git a/src/views/DeviceInspector/__tests__/DeviceInspector.test.js b/src/views/DeviceInspector/__tests__/DeviceInspector.test.js
deleted file mode 100644
index b991264..0000000
--- a/src/views/DeviceInspector/__tests__/DeviceInspector.test.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import Vuex from 'vuex';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import DeviceInspector from '../DeviceInspector.vue';
-
-// Fixture
-import activeDevice from '@src/__fixtures__/activeDevice.js';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-jest.mock('../../../api/request.js');
-
-describe('DeviceInspector.vue', () => {
-  let actions;
-  let getters;
-  let state;
-  let store;
-  let wrapper;
-
-  beforeEach(() => {
-    actions = {
-      clearShowDeviceInRack: jest.fn(),
-      setActiveDeviceDetails: jest.fn(),
-      setActiveDeviceSettings: jest.fn(),
-      setActiveDeviceValidations: jest.fn(),
-      setActiveRoomName: jest.fn(),
-      setRackLayout: jest.fn(),
-      setValidations: jest.fn(),
-    };
-    getters = { activeDeviceId: jest.fn() };
-    state = { activeDevice };
-    store = new Vuex.Store({ actions, getters, state });
-    wrapper = shallowMount(DeviceInspector, { localVue, store });
-  });
-
-  test('should display a loading indicator if there is no activeDevice', () => {
-    state.activeDevice = {};
-
-    expect(wrapper.find('spinner-stub').exists()).toBeTruthy();
-    expect(wrapper.find('.tabs-container').exists()).toBeFalsy();
-  });
-
-  test('should display tabs if there is an activeDevice', () => {
-    expect(wrapper.find('.tabs-container').exists()).toBeTruthy();
-  });
-
-  test('should display the Overview Tab by default on inital render', () => {
-    expect(wrapper.find('overviewtab-stub').exists()).toBeTruthy();
-  });
-
-  test('should call setActiveTab method with new active tab when tab is clicked', () => {
-    const spy = jest.spyOn(wrapper.vm, 'setActiveTab');
-    const settingsTab = wrapper.findAll('a').at(2);
-
-    settingsTab.trigger('click');
-
-    expect(spy).toHaveBeenCalledWith('SettingsTab');
-  });
-
-  test('should call clearShowDeviceInRack if showDeviceInRack is true on mount', () => {
-    state.showDeviceInRack = true;
-    shallowMount(DeviceInspector, { localVue, store });
-
-    expect(actions.clearShowDeviceInRack).toHaveBeenCalled();
-  });
-});
diff --git a/src/views/DeviceInspector/DeviceInspector.vue b/src/views/Devices/Device.vue
similarity index 50%
rename from src/views/DeviceInspector/DeviceInspector.vue
rename to src/views/Devices/Device.vue
index 2a4d28a..32a2a36 100644
--- a/src/views/DeviceInspector/DeviceInspector.vue
+++ b/src/views/Devices/Device.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="device-inspector">
-    <section class="section" v-if="!hasActiveDevice">
-      <Spinner />
-    </section>
-    <div class="tabs-container" v-else>
+  <div class="device">
+    <div class="tabs-container">
       <div class="tabs is-toggle is-centered">
         <ul>
           <li
@@ -31,14 +28,7 @@ import SettingsTab from './SettingsTab.vue';
 import Spinner from '@views/components/Spinner.vue';
 import StorageTab from './StorageTab.vue';
 import ValidationTab from './ValidationTab.vue';
-import isEmpty from 'lodash/isEmpty';
-import { mapActions, mapGetters, mapState } from 'vuex';
-import {
-  getDeviceDetails,
-  getDeviceSettings,
-  getDeviceValidations,
-} from '@api/devices.js';
-import { getValidations } from '@api/validations.js';
+import { mapActions, mapState } from 'vuex';
 
 export default {
   components: {
@@ -87,63 +77,21 @@ export default {
     };
   },
   methods: {
-    ...mapActions([
-      'clearShowDeviceInRack',
-      'setActiveDeviceDetails',
-      'setActiveDeviceSettings',
-      'setActiveDeviceValidations',
-      'setActiveRoomName',
-      'setRackLayout',
-      'setValidations',
-    ]),
-    setActiveDeviceData() {
-      getDeviceSettings(this.activeDeviceId).then(response => {
-        this.setActiveDeviceSettings(response.data);
-      });
-
-      getDeviceDetails(this.activeDeviceId).then(response => {
-        const deviceDetails = response.data;
-        this.setActiveDeviceDetails(deviceDetails);
-
-        if (deviceDetails.location) {
-          const { datacenter_room } = deviceDetails.location;
-
-          if (datacenter_room && datacenter_room.az) {
-            this.setActiveRoomName(datacenter_room.az);
-          }
-        }
-      });
-
-      getDeviceValidations(this.activeDeviceId).then(response => {
-        this.setActiveDeviceValidations(response.data);
-      });
-
-      if (isEmpty(this.validations)) {
-        getValidations().then(response => {
-          this.setValidations(response.data);
-        });
-      }
-    },
+    ...mapActions(['clearShowDeviceInRack', 'setActiveDeviceDetails']),
     setActiveTab(tab) {
       this.activeTab = tab;
     },
   },
   computed: {
-    ...mapGetters(['activeDeviceId']),
-    ...mapState(['activeDevice', 'showDeviceInRack', 'validations']),
-    hasActiveDevice() {
-      return !isEmpty(this.activeDevice);
-    },
+    ...mapState(['showDeviceInRack']),
   },
   mounted() {
-    if (!this.showDeviceInRack && this.activeDeviceId) {
-      this.setActiveDeviceData();
-    } else if (this.showDeviceInRack) {
+    if (this.showDeviceInRack) {
       this.clearShowDeviceInRack();
     }
   },
-  updated() {
-    this.setActiveDeviceData();
+  destroyed() {
+    this.setActiveDeviceDetails({});
   },
 };
 </script>
diff --git a/src/views/DeviceInspector/DeviceLinksTab.vue b/src/views/Devices/DeviceLinksTab.vue
similarity index 100%
rename from src/views/DeviceInspector/DeviceLinksTab.vue
rename to src/views/Devices/DeviceLinksTab.vue
diff --git a/src/views/Devices/Devices.vue b/src/views/Devices/Devices.vue
index 95fbfdd..489e98b 100644
--- a/src/views/Devices/Devices.vue
+++ b/src/views/Devices/Devices.vue
@@ -1,72 +1,190 @@
 <template>
   <div class="device-browser">
-    <article class="message is-danger" v-if="showError">
-      <div class="message-header">
-        <p>Invalid Serial Number</p>
-        <button
-          class="delete"
-          aria-label="delete"
-          @click="showError = false"
-        ></button>
-      </div>
-    </article>
-    <div class="field has-addons">
-      <div class="control has-icons-left device-search">
-        <input
-          type="text"
-          class="input search"
-          placeholder="Enter Device Serial Number..."
-          v-model.trim="serialNumber"
-          @keyup.enter="searchDevice()"
-        />
-        <span class="icon is-small is-left">
-          <i class="material-icons">search</i>
-        </span>
+    <div
+      class="page-heading"
+      style="display: flex; align-items: center; margin-bottom: 20px"
+    >
+      <span class="icon material-icons">dns</span>
+      <h1 class="title is-4 has-text-weight-bold" style="margin-left: 8px;">
+        {{
+          `${
+            this.activeDeviceDetails && this.activeDeviceDetails.id
+              ? this.activeDeviceDetails.serial_number ||
+                this.activeDeviceDetails.id
+              : 'Devices'
+          }`
+        }}
+      </h1>
+    </div>
+    <template v-if="!$route.params.deviceId">
+      <div class="field has-addons">
+        <div class="control has-icons-left device-search">
+          <input
+            type="text"
+            class="input search is-medium"
+            placeholder="Search by serial number or ID..."
+            v-model.trim="serialNumber"
+            @keyup.enter="isLoading ? null : searchDevice()"
+          />
+          <span class="icon is-small is-left">
+            <i class="material-icons">search</i>
+          </span>
+        </div>
+        <div class="control">
+          <a
+            class="button is-info is-medium search"
+            :class="{ 'is-loading': isLoading }"
+            @click="isLoading ? null : searchDevice()"
+          >
+            Search
+          </a>
+        </div>
       </div>
-      <div class="control">
-        <a
-          class="button is-info search"
-          :class="{ 'is-loading': isLoading }"
-          @click="searchDevice()"
+      <div class="columns" style="justify-content: center; margin-top: 80px;">
+        <div
+          class="column is-one-third-widescreen is-half-desktop is-full-mobile"
         >
-          Search
-        </a>
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column is-12">
-        <div class="device-details" v-if="!isEmpty(activeDevice)">
-          <div class="box has-text-centered serial-number">
-            <div class="subtitle has-text-white">
-              {{ activeDevice.serial_number }}
+          <router-link
+            :to="{ name: 'builds' }"
+            class="card is-rounded-2 is-parent"
+            tag="div"
+          >
+            <div class="card-content">
+              <p class="is-size-5 has-text-centered" style="margin-bottom: 6px;"
+                >Device part of a build?</p
+              >
+              <p
+                class="has-text-centered"
+                style="margin-bottom: 25px; display: flex; align-items: center; justify-content: center"
+              >
+                <span class="is-size-6">Visit the builds page</span>
+                <span class="material-icons" style="margin-left: 8px;"
+                  >arrow_forward</span
+                >
+              </p>
+              <div class="content">
+                <div class="card is-rounded-1">
+                  <div class="build-info">
+                    <p class="is-size-5 is-title">stardust-v1</p>
+                    <p class="is-family-monospace is-size-7"
+                      >ab719a4f-1b70-4726-9b8d-35ae177483ef</p
+                    >
+                  </div>
+                  <span
+                    class="material-icons has-text-success"
+                    style="font-size: 32px;"
+                  >
+                    check_circle
+                  </span>
+                </div>
+                <div class="card is-rounded-1">
+                  <div class="build-info">
+                    <p class="is-size-5 is-title">stardust-spare-servers</p>
+                    <p class="is-family-monospace is-size-7"
+                      >cd0deabe-12a2-4ae9-a4cb-c6e1c861c40e</p
+                    >
+                  </div>
+                  <span
+                    class="material-icons has-text-danger"
+                    style="font-size: 32px;"
+                  >
+                    cancel
+                  </span>
+                </div>
+                <div class="card is-rounded-1">
+                  <div class="build-info">
+                    <p class="is-size-5 is-title">stardust-demo-lab</p>
+                    <p class="is-family-monospace is-size-7"
+                      >efa250a6-799e-49cd-88d8-2218ab5d4bbd</p
+                    >
+                  </div>
+                  <span class="material-icons" style="font-size: 32px;">
+                    autorenew
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
-          <DeviceInspector />
+          </router-link>
         </div>
-        <div class="empty-state" v-else>
-          <p class="empty-state-heading">Search for a Device</p>
-          <img src="../../assets/artificial-intelligence.svg" width="500" />
+        <div
+          class="column is-one-third-widescreen is-half-desktop is-full-mobile"
+        >
+          <router-link
+            :to="{ name: 'datacenters' }"
+            class="card is-rounded-2 is-parent"
+            tag="div"
+          >
+            <div class="card-content">
+              <p class="is-size-5 has-text-centered" style="margin-bottom: 6px;"
+                >Looking for devices in a data center?</p
+              >
+              <p
+                class="has-text-centered"
+                style="margin-bottom: 25px; display: flex; align-items: center; justify-content: center"
+              >
+                <span class="is-size-6">Check out the data centers</span>
+                <span class="material-icons" style="margin-left: 8px;"
+                  >arrow_forward</span
+                >
+              </p>
+              <div class="content">
+                <div class="card is-rounded-1">
+                  <div class="build-info">
+                    <p class="is-size-5 is-title is-uppercase"
+                      >fulcrum-lab--secret</p
+                    >
+                    <p class="is-family-monospace is-size-7"
+                      >ca719a4f-1b70-4726-9b8d-35ae177483ef</p
+                    >
+                  </div>
+                  <span class="material-icons" style="font-size: 32px;">
+                    business
+                  </span>
+                </div>
+                <div class="card is-rounded-1">
+                  <div class="build-info">
+                    <p class="is-size-5 is-title">isd-interdictor-servers</p>
+                    <p class="is-family-monospace is-size-7"
+                      >360deabe-12a2-4ae9-a4cb-c6e1c861c40e</p
+                    >
+                  </div>
+                  <span class="material-icons" style="font-size: 32px;">
+                    dns
+                  </span>
+                </div>
+                <div class="card is-rounded-1">
+                  <div class="build-info">
+                    <p class="is-size-5 is-title">wayfinder-demo-device</p>
+                    <p class="is-family-monospace is-size-7"
+                      >1ea250a6-799e-49cd-88d8-2218ab5d4bbd</p
+                    >
+                  </div>
+                  <span class="material-icons" style="font-size: 32px;">
+                    developer_board
+                  </span>
+                </div>
+              </div>
+            </div>
+          </router-link>
         </div>
       </div>
-    </div>
+    </template>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import DeviceInspector from '@views/DeviceInspector/DeviceInspector.vue';
 import isEmpty from 'lodash/isEmpty';
 import { EventBus } from '@src/eventBus.js';
 import { mapActions, mapState } from 'vuex';
 import { getDeviceDetails } from '@api/devices.js';
 
 export default {
-  components: { DeviceInspector },
   data() {
     return {
       isLoading: false,
       serialNumber: '',
       showDeviceInRack: false,
-      showError: false,
     };
   },
   methods: {
@@ -74,7 +192,7 @@ export default {
       'clearActiveDevice',
       'clearActiveRoomName',
       'clearRackLayout',
-      'setActiveDevice',
+      'setActiveDeviceDetails',
     ]),
     clearActiveData() {
       this.clearActiveDevice();
@@ -87,19 +205,55 @@ export default {
         await getDeviceDetails(identifier)
           .then(response => {
             const device = response.data;
-            this.setActiveDevice(device);
-            this.isLoading = false;
+            this.setActiveDeviceDetails(device);
+
+            if (device.location) {
+              const { datacenter_room } = device.location;
+
+              if (datacenter_room && datacenter_room.az) {
+                this.setActiveRoomName(datacenter_room.az);
+              }
+            }
+
+            this.$router.push({
+              name: 'device',
+              params: { deviceId: device.id },
+            });
           })
           .catch(error => {
             this.isLoading = false;
 
             if (error.status === 404) {
-              this.showError = true;
+              this.setError(error);
             }
           });
       } catch (error) {
-        this.showError = true;
+        this.setError(error);
+      }
+    },
+    setError(error) {
+      let errorMessage;
+
+      if (error && error.data && error.data.error) {
+        errorMessage = `Error: ${error.data.error}`;
+      } else {
+        errorMessage = 'Error: Invalid serial number';
       }
+
+      this.$toasted.error(errorMessage, {
+        action: [
+          {
+            icon: 'close',
+            onClick: (e, toastObject) => {
+              toastObject.goAway(0);
+            },
+          },
+        ],
+        duration: 3000,
+        icon: 'error',
+      });
+
+      this.isLoading = false;
     },
     searchDevice() {
       const serialNumber = this.serialNumber;
@@ -110,7 +264,7 @@ export default {
         getDeviceDetails(serialNumber)
           .then(response => {
             const device = response.data;
-            this.setActiveDevice(device);
+            this.setActiveDeviceDetails(device);
 
             this.$router.push({
               name: 'device',
@@ -118,27 +272,25 @@ export default {
                 deviceId: device.id,
               },
             });
-
-            this.isLoading = false;
           })
           .catch(error => {
             this.isLoading = false;
 
             if (error.status === 404) {
-              this.showError = true;
+              this.setError(error);
             }
           });
       } else {
-        this.showError = true;
+        this.setError();
       }
     },
   },
   computed: {
-    ...mapState(['activeDevice']),
+    ...mapState(['activeDeviceDetails']),
   },
   mounted() {
     if (this.$route.params && this.$route.params.deviceId) {
-      if (!this.activeDevice || !this.activeDevice.id) {
+      if (!this.activeDeviceDetails || !this.activeDeviceDetails.id) {
         this.getDevice(this.$route.params.deviceId);
       }
     }
diff --git a/src/views/DeviceInspector/NetworkingTab.vue b/src/views/Devices/NetworkingTab.vue
similarity index 100%
rename from src/views/DeviceInspector/NetworkingTab.vue
rename to src/views/Devices/NetworkingTab.vue
diff --git a/src/views/DeviceInspector/OverviewTab.vue b/src/views/Devices/OverviewTab.vue
similarity index 83%
rename from src/views/DeviceInspector/OverviewTab.vue
rename to src/views/Devices/OverviewTab.vue
index 3b882fa..81e1f6e 100644
--- a/src/views/DeviceInspector/OverviewTab.vue
+++ b/src/views/Devices/OverviewTab.vue
@@ -125,8 +125,9 @@ import moment from 'moment';
 import TimeToBurnin from './TimeToBurnin.vue';
 import PhaseUpdateModal from '@src/views/components/PhaseUpdateModal.vue';
 import { EventBus } from '@src/eventBus.js';
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import { getHardwareProducts } from '@api/hardwareProduct.js';
+import { getDeviceSettings } from '@api/devices.js';
 
 export default {
   components: {
@@ -136,19 +137,53 @@ export default {
   data() {
     return {
       errorMessage: '',
-      hardwareProducts: [],
       updatingPhase: false,
     };
   },
   methods: {
     ...mapActions([
+      'setActiveDeviceSettings',
       'setActiveRoomName',
+      'setHardwareProducts',
       'setHighlightDeviceId',
       'setShowDeviceInRack',
     ]),
     closeModal() {
       this.updatingPhase = false;
     },
+    async fetchData() {
+      let deviceSettingsResponse;
+      const deviceId =
+        (this.activeDeviceDetails && this.activeDeviceDetails.id) ||
+        this.$route.params.deviceId;
+
+      if (this.hardwareProducts && this.hardwareProducts.length) {
+        try {
+          deviceSettingsResponse = await getDeviceSettings(deviceId);
+          this.setActiveDeviceSettings(deviceSettingsResponse.data);
+        } catch (error) {
+          this.setError(error);
+        }
+      } else {
+        let hardwareProductsResponse;
+
+        try {
+          [
+            deviceSettingsResponse,
+            hardwareProductsResponse,
+          ] = await Promise.all([
+            getDeviceSettings(deviceId),
+            getHardwareProducts(),
+          ]);
+
+          const hardwareProducts = hardwareProductsResponse.data;
+          this.setHardwareProducts(hardwareProducts);
+          this.setActiveDeviceSettings(deviceSettingsResponse.data);
+        } catch (error) {
+          this.setError(error);
+        }
+      }
+    },
     getHardwareProductName(id) {
       const product = this.hardwareProducts.find(product => product.id === id);
 
@@ -184,8 +219,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['activeDeviceId']),
-    ...mapState(['activeDeviceDetails', 'activeDeviceSettings']),
+    ...mapState([
+      'activeDeviceDetails',
+      'activeDeviceSettings',
+      'hardwareProducts',
+    ]),
     deviceTags() {
       const tags = [];
       let health;
@@ -211,6 +249,11 @@ export default {
             style: 'is-warning health-unknown',
             title: 'No Report',
           });
+        } else if (health === 'error') {
+          tags.push({
+            style: 'is-danger health-error',
+            title: 'Error',
+          });
         }
       }
 
@@ -258,14 +301,7 @@ export default {
     },
   },
   async mounted() {
-    let response;
-
-    try {
-      response = await getHardwareProducts();
-      this.hardwareProducts = response.data;
-    } catch (error) {
-      this.setError(error);
-    }
+    this.fetchData();
 
     EventBus.$on('closeModal:baseModal', () => {
       this.closeModal();
diff --git a/src/views/DeviceInspector/ReportTab.vue b/src/views/Devices/ReportTab.vue
similarity index 100%
rename from src/views/DeviceInspector/ReportTab.vue
rename to src/views/Devices/ReportTab.vue
diff --git a/src/views/DeviceInspector/SettingsTab.vue b/src/views/Devices/SettingsTab.vue
similarity index 100%
rename from src/views/DeviceInspector/SettingsTab.vue
rename to src/views/Devices/SettingsTab.vue
diff --git a/src/views/DeviceInspector/StorageTab.vue b/src/views/Devices/StorageTab.vue
similarity index 100%
rename from src/views/DeviceInspector/StorageTab.vue
rename to src/views/Devices/StorageTab.vue
diff --git a/src/views/DeviceInspector/TimeToBurnin.vue b/src/views/Devices/TimeToBurnin.vue
similarity index 100%
rename from src/views/DeviceInspector/TimeToBurnin.vue
rename to src/views/Devices/TimeToBurnin.vue
diff --git a/src/views/DeviceInspector/ValidationTab.vue b/src/views/Devices/ValidationTab.vue
similarity index 71%
rename from src/views/DeviceInspector/ValidationTab.vue
rename to src/views/Devices/ValidationTab.vue
index 5e0def6..5b170af 100644
--- a/src/views/DeviceInspector/ValidationTab.vue
+++ b/src/views/Devices/ValidationTab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="validation-tab">
-    <Spinner v-if="!activeDeviceValidations.length && !validations.length" />
+    <Spinner v-if="isEmpty(deviceValidationState)" />
     <table class="table is-narrow is-marginless is-fullwidth" v-else>
       <thead>
         <tr>
@@ -8,8 +8,7 @@
           <th>Status</th>
           <th>Name</th>
           <th>Description</th>
-          <th>Version</th>
-          <th></th>
+          <th class="has-text-centered">Version</th>
         </tr>
       </thead>
       <tbody>
@@ -32,7 +31,7 @@
                 <i class="fas fa-caret-right" v-else></i>
               </div>
             </td>
-            <td class="has-text-centered">
+            <td>
               <template
                 v-for="(result, resultIndex) in resultCount(validation.results)"
               >
@@ -58,34 +57,21 @@
             <td class="has-text-centered">
               {{ validation.version }}
             </td>
-            <td>
-              <span
-                class="icon is-medium has-text-success tooltip is-tooltip-left is-tooltip-success"
-                v-if="validation.deactivated == null"
-                data-tooltip="Active Validation"
-              >
-                <i class="fas fa-lg fa-check-circle"></i>
-              </span>
-              <span
-                class="icon is-medium has-text-warning tooltip is-tooltip-left is-tooltip-warning"
-                v-else
-                data-tooltip="Inactive Validation"
-              >
-                <i class="fas fa-lg fa-exclamation-triangle"></i>
-              </span>
-            </td>
           </tr>
           <tr
             v-if="isRowSelected(validationIndex)"
             :key="`${validationIndex}a`"
           >
-            <td></td>
-            <td colspan="3">
+            <td colspan="6">
               <div class="content">
-                <table class="table is-narrow is-marginless is-fullwidth">
+                <table
+                  class="table is-narrow is-marginless is-fullwidth"
+                  style="background-color: #1a2531"
+                >
                   <thead>
                     <tr>
-                      <th>Component / Category</th>
+                      <th>Component</th>
+                      <th>Category</th>
                       <th>Results</th>
                       <th>Message</th>
                       <th>Hint</th>
@@ -100,9 +86,8 @@
                       v-for="(result, index) in validation.results"
                       :key="index"
                     >
-                      <td>{{
-                        result.component ? result.component : result.category
-                      }}</td>
+                      <td>{{ `${result.component || 'N/A'}` }}</td>
+                      <td>{{ `${result.category || 'N/A'}` }}</td>
                       <td>{{ result.status }}</td>
                       <td>{{ result.message }}</td>
                       <td v-if="result.hint">{{ result.hint }}</td>
@@ -123,8 +108,7 @@
           <th>Status</th>
           <th>Name</th>
           <th>Description</th>
-          <th>Version</th>
-          <th></th>
+          <th class="has-text-centered">Version</th>
         </tr>
       </tfoot>
     </table>
@@ -132,11 +116,12 @@
 </template>
 
 <script>
-import sortBy from 'lodash/sortBy';
 import countBy from 'lodash/countBy';
 import groupBy from 'lodash/groupBy';
+import isEmpty from 'lodash/isEmpty';
+import sortBy from 'lodash/sortBy';
 import Spinner from '@views/components/Spinner.vue';
-import { mapState } from 'vuex';
+import { getDeviceValidations } from '@api/devices.js';
 
 export default {
   components: {
@@ -144,15 +129,47 @@ export default {
   },
   data() {
     return {
+      deviceValidationState: {},
       validationDetailsRows: [],
     };
   },
   methods: {
-    getValidation(validationId) {
-      return this.validations.find(validation => {
-        return validation.id === validationId;
-      });
+    async fetchData() {
+      let validationsResponse;
+
+      try {
+        validationsResponse = await getDeviceValidations(
+          this.$route.params.deviceId
+        );
+        this.deviceValidationState = validationsResponse.data;
+      } catch (error) {
+        let errorMessage;
+
+        if (
+          error.response &&
+          error.response.data &&
+          error.response.data.error
+        ) {
+          errorMessage = `Error: ${error.response.data.error}`;
+        } else {
+          errorMessage = 'An error occurred';
+        }
+
+        this.$toasted.error(errorMessage, {
+          action: [
+            {
+              icon: 'close',
+              onClick: (e, toastObject) => {
+                toastObject.goAway(0);
+              },
+            },
+          ],
+          duration: 6000,
+          icon: 'error',
+        });
+      }
     },
+    isEmpty,
     isRowSelected(index) {
       return this.validationDetailsRows.indexOf(index) >= 0;
     },
@@ -181,30 +198,18 @@ export default {
     },
   },
   computed: {
-    ...mapState(['activeDeviceValidations', 'validations']),
     deviceValidations() {
       const validations = [];
       const validationStateResultsById = this.validationStateResultsById;
 
       Object.keys(validationStateResultsById).map(validationId => {
-        let {
-          created,
-          deactivated,
-          description,
-          id,
-          name,
-          updated,
-          version,
-        } = this.getValidation(validationId);
+        const results = validationStateResultsById[validationId];
+        const { name, description, version } = results[0];
 
         validations.push({
-          results: validationStateResultsById[validationId],
-          created,
-          deactivated,
+          results,
           description,
-          id,
           name,
-          updated,
           version,
         });
       });
@@ -212,8 +217,11 @@ export default {
       return sortBy(validations, validation => validation.name);
     },
     validationStateResultsById() {
-      return groupBy(this.activeDeviceValidations.results, 'validation_id');
+      return groupBy(this.deviceValidationState.results, 'validation_id');
     },
   },
+  mounted() {
+    this.fetchData();
+  },
 };
 </script>
diff --git a/src/views/DeviceInspector/__tests__/NetworkingTab.test.js b/src/views/Devices/__tests__/NetworkingTab.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/NetworkingTab.test.js
rename to src/views/Devices/__tests__/NetworkingTab.test.js
diff --git a/src/views/DeviceInspector/__tests__/OverviewTab.test.js b/src/views/Devices/__tests__/OverviewTab.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/OverviewTab.test.js
rename to src/views/Devices/__tests__/OverviewTab.test.js
diff --git a/src/views/DeviceInspector/__tests__/ReportTab.test.js b/src/views/Devices/__tests__/ReportTab.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/ReportTab.test.js
rename to src/views/Devices/__tests__/ReportTab.test.js
diff --git a/src/views/DeviceInspector/__tests__/SettingsTab.test.js b/src/views/Devices/__tests__/SettingsTab.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/SettingsTab.test.js
rename to src/views/Devices/__tests__/SettingsTab.test.js
diff --git a/src/views/DeviceInspector/__tests__/StorageTab.test.js b/src/views/Devices/__tests__/StorageTab.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/StorageTab.test.js
rename to src/views/Devices/__tests__/StorageTab.test.js
diff --git a/src/views/DeviceInspector/__tests__/TimeToBurnin.test.js b/src/views/Devices/__tests__/TimeToBurnin.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/TimeToBurnin.test.js
rename to src/views/Devices/__tests__/TimeToBurnin.test.js
diff --git a/src/views/DeviceInspector/__tests__/ValidationTab.test.js b/src/views/Devices/__tests__/ValidationTab.test.js
similarity index 100%
rename from src/views/DeviceInspector/__tests__/ValidationTab.test.js
rename to src/views/Devices/__tests__/ValidationTab.test.js
diff --git a/yarn.lock b/yarn.lock
index 4a76c00..a6b217b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4515,7 +4515,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
+debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -5622,11 +5622,6 @@ follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
   integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
 
-follow-redirects@^1.10.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
-  integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6439,7 +6434,7 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.4, ini@^1.3.5:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
   integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==