diff --git a/ui/src/api/sessions.js b/ui/src/api/sessions.js
index 2aa6fb8717c..17bbc190d41 100644
--- a/ui/src/api/sessions.js
+++ b/ui/src/api/sessions.js
@@ -3,4 +3,8 @@ import http from '@/helpers/http'
 export const
     fetchSessions = async () => {
         return http().get('/sessions')
-    }
\ No newline at end of file
+    },
+    getSession = async (uid) => {
+        return http().get(`/session/${uid}`)
+    }
+
diff --git a/ui/src/components/AddDevice.vue b/ui/src/components/device/AddDevice.vue
similarity index 100%
rename from ui/src/components/AddDevice.vue
rename to ui/src/components/device/AddDevice.vue
diff --git a/ui/src/components/DeviceFeature.vue b/ui/src/components/device/DetailsDevice.vue
similarity index 95%
rename from ui/src/components/DeviceFeature.vue
rename to ui/src/components/device/DetailsDevice.vue
index c0c80ff116b..16f2406ec8e 100644
--- a/ui/src/components/DeviceFeature.vue
+++ b/ui/src/components/device/DetailsDevice.vue
@@ -84,7 +84,7 @@ import TerminalDialog from "@/components/TerminalDialog.vue";
 import moment from 'moment'
 
 export default {
-  name: "DeviceFeature",
+  name: "DetailsDevice",
 
   components: {
     TerminalDialog,
@@ -97,12 +97,6 @@ export default {
   },
 
   computed: {
-    // format_date(value){
-    //   if (value) {
-    //     return moment(String(value)).format('YYYYMMDD')
-    //   }
-    // },
-
   },
 
   methods: {
@@ -160,14 +154,12 @@ export default {
 .item-description {
   font-size: 14px;
   /* display:inline; */
-
 }
 
 .item-title{
   margin-bottom: -4px;
   margin-left: 15px;
   width: 350%;
-  
 }
 
 .item-title-name{
@@ -196,11 +188,4 @@ export default {
   float: right;
 }
 
-
-
-/* .mt-2{
-  padding: 32px;
-} */
-
-
 </style>
\ No newline at end of file
diff --git a/ui/src/components/DeviceList.vue b/ui/src/components/device/ListDevice.vue
similarity index 96%
rename from ui/src/components/DeviceList.vue
rename to ui/src/components/device/ListDevice.vue
index 6a36b25099b..ef04c89f37c 100644
--- a/ui/src/components/DeviceList.vue
+++ b/ui/src/components/device/ListDevice.vue
@@ -56,7 +56,7 @@
                 </template>
 
                 <template v-slot:item.actions="{ item }">
-                    <v-icon class="icons" @click="featureDevice(item)">
+                    <v-icon class="icons" @click="detailsDevice(item)">
                         info
                     </v-icon>
 
@@ -75,7 +75,7 @@
 
 <script>
 import TerminalDialog from "@/components/TerminalDialog.vue";
-import AddDevice from "@/components/AddDevice.vue";
+import AddDevice from "@/components/device/AddDevice.vue";
 
 export default {
   components: {
@@ -94,8 +94,8 @@ export default {
   },
 
   methods: {
-    featureDevice(value){
-      this.$router.push('/devices/'+value.uid) 
+    detailsDevice(value){
+      this.$router.push('/device/'+value.uid) 
     },
 
     address(item) {
diff --git a/ui/src/components/session/DetailsSession.vue b/ui/src/components/session/DetailsSession.vue
new file mode 100644
index 00000000000..f7360703c1c
--- /dev/null
+++ b/ui/src/components/session/DetailsSession.vue
@@ -0,0 +1,154 @@
+<template>
+<fragment>
+
+  <div class="d-flex pa-0 align-center">
+  <h1>Session Details</h1>
+  <v-spacer/>
+  <v-spacer/>
+  <!-- <AddDevice/> -->
+  <!-- <v-btn outlined @click="$store.dispatch('modals/showAddDevice', true)">Add Device</v-btn> -->
+  </div>
+    <v-card class="mt-2">
+        <v-app-bar flat color="transparent">
+
+          <div class="item-title">
+              
+              <div class="item-title-name">
+                  {{ this.session.device }}
+              </div>
+
+              <div class="status">
+                <div class="status-online" v-if="this.session.active">
+                  Online
+                </div>
+                <div class="status-offline" v-else>
+                  Offline
+                </div>
+              </div>
+                    
+          </div>
+
+        </v-app-bar>
+        
+
+        <v-divider></v-divider>
+        <v-card-text>
+          
+          <div class="item">
+            <div class="item-name">Uid</div>
+            <div class="item-description">{{this.session.uid}}</div>
+          </div>
+
+          <div class="item">
+            <div class="item-name">User</div>
+            <div class="item-description">{{this.session.username}}</div>
+          </div>
+
+          <div class="item"> 
+            <div class="item-name">Ip Address</div>
+            <div class="item-description">{{this.session.ip_address}}</div>
+          </div>
+
+          <div class="item">
+            <div class="item-name">Started</div>
+            <div class="item-description">{{this.session.started_at | moment("dddd, MMMM Do YYYY, h:mm:ss a")}}</div>
+          </div>
+
+          <div class="item">
+            <div class="item-name">Last Seen</div>
+            <div class="item-description">{{this.session.last_seen | moment("dddd, MMMM Do YYYY, h:mm:ss a")}}</div>
+          </div>
+
+        </v-card-text>
+        <v-snackbar v-model="copySnack" :timeout=3000>Device SSHID copied to clipboard</v-snackbar>
+    </v-card>
+</fragment>
+</template>
+
+<script>
+// import moment from 'moment'
+
+export default {
+  name: "DetailsSession",
+
+  components: {
+  },
+
+  async created() {
+      this.uid = this.$route.params.id
+      await this.$store.dispatch("sessions/get", this.uid);
+      this.session = this.$store.getters["sessions/get"];
+  },
+
+  computed: {
+  },
+
+  methods: {
+  },
+
+  data() {
+    return {
+      uid: '',
+      session: [],
+      copySnack: false
+    };
+  }
+};
+</script>
+<style scoped>
+
+.mt-2{
+  /* position: relative; */
+  width:100%;
+}
+
+.item {
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+}
+.item-name {
+  font-size: 14px;
+  color: #FFFFFF; 
+  display:inline;
+}
+
+.item-description {
+  font-size: 14px;
+  /* display:inline; */
+}
+
+.item-title{
+  margin-bottom: -4px;
+  margin-left: 15px;
+  width: 350%;
+}
+
+.item-title-name{
+  font-size: 28px;
+  font-weight: 500;
+  display:inline;
+}
+
+.status{
+  margin-top: -5px;
+  font-size: 12px;
+  font-weight: bold;
+}
+.status-online{
+  color: rgb(162, 250, 163);
+}
+
+.status-offline{
+  color: red;
+}
+
+.item-action{
+  margin-left: 10px;
+  /* display:inline; */
+  width: 20%;
+  float: right;
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/src/components/session/ListSession.vue b/ui/src/components/session/ListSession.vue
new file mode 100644
index 00000000000..d6e0602e492
--- /dev/null
+++ b/ui/src/components/session/ListSession.vue
@@ -0,0 +1,128 @@
+<template>
+<fragment>
+    <h1>Sessions</h1>
+    <v-card class="mt-2">
+        <v-app-bar flat color="transparent">
+            <v-toolbar-title></v-toolbar-title>
+        </v-app-bar>
+        <v-divider></v-divider>
+        <v-card-text class="pa-0">
+            <v-data-table :headers="headers" :items="$store.getters['sessions/list']" item-key="uid" :sort-by="['started_at']" :sort-desc="[true]" disable-pagination hide-default-footer>
+                
+                <template v-slot:item.active="{ item }">
+                    <v-icon color="success" v-if="item.active">check_circle</v-icon>
+                    <v-tooltip bottom v-else>
+                        <template #activator="{ on }">
+                            <v-icon v-on="on">check_circle</v-icon>
+                        </template>
+                        <span>active {{ item.last_seen | moment("from", "now") }}</span>
+                    </v-tooltip>
+                </template>
+
+                <template v-slot:item.device="{ item }">
+                    <v-chip class="short">
+                        <span>{{item.device}}</span>
+                        <v-icon small @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
+                    </v-chip>
+                </template>
+
+                <template v-slot:item.ip_address="{ item }">
+                    <code>{{ item.ip_address }}</code>
+                </template>
+
+                <template v-slot:item.started="{ item }">
+                    {{ item.started_at | moment("ddd, MMM Do YYY, h:mm:ss a")}}
+                </template>
+
+                <template v-slot:item.last_seen="{ item }">
+                    {{ item.last_seen | moment("ddd, MMM Do YYY, h:mm:ss a")}}
+                </template>
+
+                <template v-slot:item.actions="{ item }">
+                    <v-icon class="icons" @click="detailsSession(item)">
+                        info
+                    </v-icon>
+                </template>
+
+            </v-data-table>
+        </v-card-text>
+    </v-card>
+    <v-snackbar v-model="copySnack" :timeout=3000>Device UID copied to clipboard</v-snackbar>
+</fragment>
+</template>
+
+<script>
+export default {
+    methods: {
+        showCopySnack() {
+            this.copySnack = true;
+        },
+        detailsSession(session){
+            this.$router.push('/session/'+session.uid) 
+        },
+    },
+
+    data() {
+        return {
+            copySnack: false,
+
+            headers: [
+                {
+                    text: "Active",
+                    value: "active",
+                    align: "center"
+                },
+                {
+                    text: "Device",
+                    value: "device",
+                    align: "center"
+                },
+                {
+                    text: "Username",
+                    value: "username",
+                    align: "center"
+                },
+                {
+                    text: "IP Address",
+                    value: "ip_address",
+                    align: "center"
+                },
+                {
+                    text: "Started",
+                    value: "started",
+                    align: "center"
+                },
+                {
+                    text: "Last Seen",
+                    value: "last_seen",
+                    align: "center"
+                },
+                {
+                    text: "Actions",
+                    value: "actions",
+                    align: "center"
+                },
+            ]
+        };
+    },
+
+    created() {
+        this.$store.dispatch("sessions/fetch");
+    },
+
+
+};
+</script>
+
+<style>
+
+.short{
+  width:300px;
+}
+.short span{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+</style>
diff --git a/ui/src/modules/sessions.js b/ui/src/modules/sessions.js
index 729d26db174..209f3cfb9e9 100644
--- a/ui/src/modules/sessions.js
+++ b/ui/src/modules/sessions.js
@@ -1,20 +1,26 @@
 import Vue from 'vue'
-import { fetchSessions } from '@/api/sessions'
+import { fetchSessions, getSession } from '@/api/sessions'
 
 export default {
     namespaced: true,
 
     state: {
-        sessions: []
+        sessions: [],
+        session: []
+
     },
 
     getters: {
-        list: state => state.sessions
+        list: state => state.sessions,
+        get: state => state.session
     },
 
     mutations: {
         setSessions: (state, data) => {
             Vue.set(state, 'sessions', data)
+        },
+        setSession: (state, data) => {
+            Vue.set(state, 'session', data)
         }
     },
 
@@ -23,6 +29,11 @@ export default {
             let res = await fetchSessions()
 
             context.commit('setSessions', res.data)
+        },
+        get: async (context,uid)  => {
+            let res = await getSession(uid)
+            context.commit('setSession', res.data)
         }
+
     }
 }
\ No newline at end of file
diff --git a/ui/src/router.js b/ui/src/router.js
index 8b1b0a6d578..eb01e170396 100644
--- a/ui/src/router.js
+++ b/ui/src/router.js
@@ -22,10 +22,10 @@ const router = new Router({
                 import(/* webpackChunkName: "devices" */ "./views/Devices.vue")
         },
         {
-            path: "/devices/:id",
-            name: "featureDevice",
+            path: "/device/:id",
+            name: "detailsDevice",
             component: () =>
-                import("./views/FeatureDevice.vue") 
+                import(/* webpackChunkName: "details-device" */ "./views/DetailsDevice.vue") 
         },
         {
             path: "/sessions",
@@ -33,6 +33,12 @@ const router = new Router({
             component: () =>
                 import("./views/Sessions.vue")
         },
+        {
+            path: "/session/:id",
+            name: "detailsSession",
+            component: () =>
+                import(/* webpackChunkName: "details-session" */ "./views/DetailsSession.vue") 
+        },
         {
             path: "/login",
             name: "login",
diff --git a/ui/src/views/Dashboard.vue b/ui/src/views/Dashboard.vue
index dd98a5a4bbb..e03a110bb9d 100644
--- a/ui/src/views/Dashboard.vue
+++ b/ui/src/views/Dashboard.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import AddDevice from "@/components/AddDevice.vue";
+import AddDevice from "@/components/device/AddDevice.vue";
 
 export default {
   components: {
diff --git a/ui/src/views/DetailsDevice.vue b/ui/src/views/DetailsDevice.vue
new file mode 100644
index 00000000000..2c435f42759
--- /dev/null
+++ b/ui/src/views/DetailsDevice.vue
@@ -0,0 +1,16 @@
+
+<template>
+  <div>
+    <DetailsDevice/>
+  </div>
+</template>
+
+<script>
+import DetailsDevice from "@/components/device/DetailsDevice.vue";
+
+export default {
+  components: {
+    DetailsDevice
+  }
+};
+</script>
\ No newline at end of file
diff --git a/ui/src/views/DetailsSession.vue b/ui/src/views/DetailsSession.vue
new file mode 100644
index 00000000000..b367e50e022
--- /dev/null
+++ b/ui/src/views/DetailsSession.vue
@@ -0,0 +1,16 @@
+
+<template>
+  <div>
+    <DetailsSession/>
+  </div>
+</template>
+
+<script>
+import DetailsSession from "@/components/session/DetailsSession.vue";
+
+export default {
+  components: {
+    DetailsSession
+  }
+};
+</script>
\ No newline at end of file
diff --git a/ui/src/views/Devices.vue b/ui/src/views/Devices.vue
index 7615bf4de65..ae9d17f5a1a 100644
--- a/ui/src/views/Devices.vue
+++ b/ui/src/views/Devices.vue
@@ -1,16 +1,16 @@
 
 <template>
   <div>
-    <DeviceList/>
+    <ListDevice/>
   </div>
 </template>
 
 <script>
-import DeviceList from "@/components/DeviceList.vue";
+import ListDevice from "@/components/device/ListDevice.vue";
 
 export default {
   components: {
-    DeviceList
+    ListDevice
   }
 };
 </script>
\ No newline at end of file
diff --git a/ui/src/views/FeatureDevice.vue b/ui/src/views/FeatureDevice.vue
deleted file mode 100644
index 876519739b8..00000000000
--- a/ui/src/views/FeatureDevice.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
-<template>
-  <div>
-    <DeviceFeature/>
-  </div>
-</template>
-
-<script>
-import DeviceFeature from "@/components/DeviceFeature.vue";
-
-export default {
-  components: {
-    DeviceFeature
-  }
-};
-</script>
\ No newline at end of file
diff --git a/ui/src/views/Sessions.vue b/ui/src/views/Sessions.vue
index f549e926f4c..19842f95a74 100644
--- a/ui/src/views/Sessions.vue
+++ b/ui/src/views/Sessions.vue
@@ -1,105 +1,16 @@
-<template>
-<fragment>
-    <h1>Sessions</h1>
-    <v-card class="mt-2">
-        <v-app-bar flat color="transparent">
-            <v-toolbar-title></v-toolbar-title>
-        </v-app-bar>
-        <v-divider></v-divider>
-        <v-card-text class="pa-0">
-            <v-data-table :headers="headers" :items="$store.getters['sessions/list']" item-key="uid" :sort-by="['started_at']" :sort-desc="[true]" disable-pagination hide-default-footer>
-                
-                <template v-slot:item.device="{ item }">
-                    <v-chip class="short">
-                        <span>{{item.device}}</span>
-                        <v-icon small @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
-                    </v-chip>
-                </template>
-
-                <template v-slot:item.ip_address="{ item }">
-                    <code>{{ item.ip_address }}</code>
-                </template>
-
-                <template v-slot:item.started="{ item }">
-                    {{ item.started_at | moment("ddd, MMM Do YYY, h:mm:ss a")}}
-                </template>
-
-                <template v-slot:item.last_seen="{ item }">
-                    {{ item.last_seen | moment("ddd, MMM Do YYY, h:mm:ss a")}}
-                </template>
 
-                <template v-slot:item.active="{ item }">
-                    <v-icon color="success" v-if="item.active">check_circle</v-icon>
-                    <v-tooltip bottom v-else>
-                        <template #activator="{ on }">
-                            <v-icon v-on="on">check_circle</v-icon>
-                        </template>
-                        <span>active {{ item.last_seen | moment("from", "now") }}</span>
-                    </v-tooltip>
-                </template>
-
-            </v-data-table>
-        </v-card-text>
-    </v-card>
-    <v-snackbar v-model="copySnack" :timeout=3000>Device UID copied to clipboard</v-snackbar>
-</fragment>
+<template>
+  <div>
+    <ListSession/>
+  </div>
 </template>
 
 <script>
-export default {
-    methods: {
-        showCopySnack() {
-            this.copySnack = true;
-        }
-    },
+import ListSession from "@/components/session/ListSession.vue";
 
-    data() {
-        return {
-            copySnack: false,
-
-            headers: [{
-                    text: "Device",
-                    value: "device"
-                },
-                {
-                    text: "Username",
-                    value: "username"
-                },
-                {
-                    text: "IP Address",
-                    value: "ip_address"
-                },
-                {
-                    text: "Started",
-                    value: "started"
-                },
-                {
-                    text: "Last Seen",
-                    value: "last_seen"
-                },
-                {
-                    text: "Active",
-                    value: "active"
-                },
-            ]
-        };
-    },
-
-    created() {
-        this.$store.dispatch("sessions/fetch");
-    }
+export default {
+  components: {
+    ListSession
+  }
 };
-</script>
-
-<style>
-
-.short{
-  width:300px;
-}
-.short span{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-</style>
+</script>
\ No newline at end of file