--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Userdetail.vue	Tue Aug 07 18:00:35 2018 +0200
@@ -0,0 +1,58 @@
+<template>
+  <div class="userdetails card shadow" style="width: 35rem;">
+    <div class="card" style="width: 35rem;">
+      <div class="card-header text-white bg-info mb-3">
+        {{ currentUser.user }}
+      </div>
+      <div class="card-body">
+        <form>
+          <div class="form-group">
+            <label for="country">Country</label>
+            <select v-model="currentUser.country">
+              <option disabled value="">Please select one</option>
+              <option>AT</option>
+              <option>RO</option>
+              <option>BG</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="email">Email address</label>
+            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" v-model="currentUser.email">
+          </div>
+          <div class="form-group">
+            <label for="role">Role</label>
+             <select v-model="currentUser.role">
+              <option disabled value="">Please select one</option>
+              <option value="sys_admin">Sysadmin</option>
+              <option value="waterway_admin">Waterway Admin</option>
+              <option value="waterway_user">Waterway User</option>
+            </select>
+          </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+    </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../assets/application.scss";
+
+.userdetails {
+  margin-top: 20px;
+  width: 50vw;
+}
+
+.shadow {
+  box-shadow: $basic-shadow-light !important;
+}
+</style>
+<script>
+export default {
+  name: "userdetail",
+  props: ["currentUser"],
+  data() {},
+  computed: {},
+  methods: {}
+};
+</script>

--- a/client/src/views/Users.vue	Tue Aug 07 13:57:31 2018 +0200
+++ b/client/src/views/Users.vue	Tue Aug 07 18:00:35 2018 +0200
@@ -6,8 +6,8 @@
         <div>
           <h1>User Management</h1>
         </div>
-        <div class="userlist">
-          <div class="card shadow" style="width: 85rem;">
+        <div class="userlist shadow">
+          <div class="card" style="width: 85rem;">
               <div class="card-header text-white bg-info mb-3">
                 users
               </div>
@@ -33,6 +33,7 @@
             </div>
           </div>
         </div>
+        <Userdetail v-bind:currentUser="currentUser"></Userdetail>
       </div>
     </div>
   </div>
@@ -69,14 +70,21 @@
 
 <script>
 import Sidebar from "../components/Sidebar";
+import Userdetail from "../components/Userdetail";
 import store from "../store";
 import { mapGetters } from "vuex";
 import app from "../main";
 
 export default {
   name: "userview",
+  data() {
+    return {
+      currentUser: null
+    };
+  },
   components: {
-    Sidebar
+    Sidebar,
+    Userdetail
   },
   computed: {
     ...mapGetters("usermanagement", ["users"])
@@ -84,7 +92,7 @@
   methods: {
     selectUser(name) {
       const user = this.$store.getters["usermanagement/getUserByName"](name);
-      console.log(user);
+      this.currentUser = user;
     }
   },
   beforeRouteEnter(to, from, next) {