diff --git a/src/components/chat/ChatProfile.vue b/src/components/chat/ChatProfile.vue
index dfae01d3918391e516573aebe75a3888ce33978e..87dfbaf68a743c987a7d02147c0618853ed731a3 100644
--- a/src/components/chat/ChatProfile.vue
+++ b/src/components/chat/ChatProfile.vue
@@ -1,45 +1,54 @@
 <template>
   <a
-    class="hover:bg-gray-100 border-b border-gray-300 px-3 py-2 cursor-pointer flex items-center text-sm focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out"
+    v-on:click="selectUser" class="hover:bg-gray-100 border-b border-gray-300 px-3 py-2 cursor-pointer flex items-center text-sm focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out"
   >
     <img
       class="h-10 w-10 rounded-full object-cover"
-      src="{avatar}"
-      alt="{name}"
+      src="https://www.mintface.xyz/content/images/2021/08/QmTndiF423kjdXsNzsip1QQkBQqDuzDhJnGuJAXtv4XXiZ-1.png"
+      :alt="{name}"
     />
     <div class="w-full pb-2">
       <div class="flex justify-between">
         <span class="block ml-2 font-semibold text-base text-gray-600"
-          >{name}</span
+          >{{name}}</span
         >
-        <span class="block ml-2 text-sm text-gray-600">{lastMessageTime}</span>
+        <span class="block ml-2 text-sm text-gray-600">{{lastMessageTime}}</span>
       </div>
-      <span class="block ml-2 text-sm text-gray-600">{lastMessage}</span>
+      <span class="block ml-2 text-sm text-gray-600">{{lastMessage}}</span>
     </div>
   </a>
 </template>
 
 <script>
+//TODO fix avatar
 export default {
   props: {
-    profile: {
-      type: Object,
-      required: true,
-    },
-    lastMessage: {
-      type: Object,
-      required: true,
+    conversation: {
+      type: Object, 
+      required: true
     },
+    recipient: Function
   },
   data: () => {
     return {
-      user: {
-        name: "",
-        avatar: "",
-        lastMessage: "",
-        lastMessageTime: "5min",
-      },
     };
   },
+  computed: {
+    lastMessage () {
+      return this.conversation.lastMessage.content;
+    },
+    name() {
+      return this.conversation.recipient.firstName + " " + this.conversation.recipient.lastName;
+    },
+    lastMessageTime() {
+      return "5 min";
+    }
+  },
+  methods: {
+    selectUser() {
+      console.log(this.conversation.recipient.userId)
+      this.$emit("recipient",this.conversation.recipient.userId);
+    }
+  }
 };
 </script>
diff --git a/src/components/chat/CurrentChat.vue b/src/components/chat/CurrentChat.vue
index 5fafab082da10694b544eda5f59cdaee396de543..a564490dbaed57075a8188fb24bf8a921380a54f 100644
--- a/src/components/chat/CurrentChat.vue
+++ b/src/components/chat/CurrentChat.vue
@@ -9,9 +9,9 @@
                 </div>
                 <div class="relative flex items-center p-3">
                     <img class="object-cover w-10 h-10 rounded-full"
-                        src="https://gitlab.stud.idi.ntnu.no/uploads/-/system/user/avatar/4168/avatar.png?width=400"
-                        alt="username" />
-                    <span class="block ml-2 font-bold text-gray-600">Sid</span>
+                        src="https://www.mintface.xyz/content/images/2021/08/QmTndiF423kjdXsNzsip1QQkBQqDuzDhJnGuJAXtv4XXiZ-1.png"
+                        alt="{{name}}" />
+                    <span class="block ml-2 font-bold text-gray-600">{{name}}</span>
                 </div>
                 <div></div>
             </div>
@@ -48,6 +48,9 @@ import ws from '@/services/ws';
 
 
 export default {
+    props: {
+        recipient: Object,
+    },
     data: () => {
         return {
             messages: [],
@@ -61,7 +64,10 @@ export default {
             return parseCurrentUser().account_id;
         },
         recipientID() {
-            return this.userid == 1 ? 2 : 1;
+            return this.recipient.userId;
+        },
+        name() {
+            return this.recipient.firstName + " " + this.recipient.lastName;
         }
     },
     methods: {
@@ -96,9 +102,7 @@ export default {
         }
     },
     async created() {
-        console.log(this.$store.state.user, " hello")
         const token = this.$store.state.user.token;
-        console.log(process.env.VUE_APP_BASEURL);
         // Fetch /chats/users/{userId}/messages from api
         const response = await fetch(`${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`, {
             method: "GET",
diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue
index e2419600b8f0ea4f9ee7c326461845da00c34729..9b70f36f0dcc5ff455c9ca70145473b462cf6c1b 100644
--- a/src/views/ChatView.vue
+++ b/src/views/ChatView.vue
@@ -5,11 +5,11 @@
                 <ul class="hidden sm:block overflow-auto h-full">
                     <h2 class="my-2 mb-2 ml-2 text-lg text-gray-600">Chats</h2>
                     <li>
-                        <ChatProfile></ChatProfile>
+                        <ChatProfile v-for="(conversation, i) in conversations" :conversation="conversation" :key="i" @recipient="selectUser"></ChatProfile>
                     </li>
                 </ul>
             </div>
-            <CurrentChat></CurrentChat>
+            <CurrentChat v-if="selected" :recipient="selected" :key="key"></CurrentChat>
         </div>
     </div>
 </template>
@@ -26,15 +26,40 @@ export default {
     },
     data() {
         return {
-            ws: null
+            conversations: null,
+            selected: null
         };
     },
     computed: {
         userID() {
             return parseCurrentUser().account_id;
+        },
+        key() {
+            return this.selected.userId || "ERROR" ;
+        }
+    },
+    methods: {
+        selectUser(value) {
+            const userid = value
+            this.conversations.find(conversation => {
+                return conversation.recipient.userId == userid;  
+            })
+            this.selected = this.conversations.find(conversation => conversation.recipient.userId == userid).recipient;
+            console.log(this.selected)
         }
     },
     async created() {
+        const token = this.$store.state.user.token;
+        // Get all conversations from api with /chats/users
+        const response = await fetch(`${process.env.VUE_APP_BASEURL}chats/users`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${token}`
+            }
+        }) // TODO add error handling
+        const res = await response.json();
+        this.conversations = res;
     }
 }
 </script>