diff --git a/src/components/ChatComponents/ChatComponent.vue b/src/components/ChatComponents/ChatComponent.vue
index a5e36d1261e04def67965731d519adc01b2eaabb..56aa69895176e1f41d4543b10ad59e90e801bce3 100644
--- a/src/components/ChatComponents/ChatComponent.vue
+++ b/src/components/ChatComponents/ChatComponent.vue
@@ -20,7 +20,7 @@
             v-for="(message, i) in messages"
             v-bind:key="i"
         >
-            <rental-message v-if="message?.createdAt"></rental-message>
+            <rental-message v-if="message?.createdAt" :rent="message"></rental-message>
             <ChatMessage
                 v-else
                 :message="message"
@@ -176,7 +176,6 @@ export default {
         }
       );
       this.rents = await response.json();
-      console.log("rents", this.rents);
     },
     async getRecipient() {
       const token = this.$store.state.user.token;
@@ -196,6 +195,8 @@ export default {
   },
   watch: {
     async 'recipientID'() {
+        this.rents = [];
+        this.msgs = [];
       await this.reloadMessages();
       await this.getRecipient();
       await this.reloadRents();
diff --git a/src/components/ChatComponents/ChatProfile.vue b/src/components/ChatComponents/ChatProfile.vue
index 1e98dd15316f8891484adabf095fce86592a5159..9e1caa0a2d87881bf1035af9c7bb05bf49ccdece 100644
--- a/src/components/ChatComponents/ChatProfile.vue
+++ b/src/components/ChatComponents/ChatProfile.vue
@@ -47,7 +47,30 @@ export default {
       );
     },
     lastMessageTime() {
-      return "5 min";
+      // Calculate time since last message
+      const time = this.conversation.lastMessage.timestamp;
+      const now = new Date();
+      const diff = now - time;
+      const seconds = Math.floor(diff / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+      const days = Math.floor(hours / 24);
+      const months = Math.floor(days / 30);
+      const years = Math.floor(months / 12);
+
+      if (seconds < 60) {
+        return "Just now";
+      } else if (minutes < 60) {
+        return minutes + " minutes ago";
+      } else if (hours < 24) {
+        return hours + " hours ago";
+      } else if (days < 30) {
+        return days + " days ago";
+      } else if (months < 12) {
+        return months + " months ago";
+      } else {
+        return years + " years ago";
+      }
     },
     src() {
       return this.conversation.recipient.picture ? this.conversation.recipient.picture : require("@/assets/defaultUserProfileImage.jpg");
diff --git a/src/components/ChatComponents/ChatsComponent.vue b/src/components/ChatComponents/ChatsComponent.vue
index cc979e963f2f07ab27f286c06878b9e66098e21a..a297175de8644d7537c033c46a587b6a19d0bc94 100644
--- a/src/components/ChatComponents/ChatsComponent.vue
+++ b/src/components/ChatComponents/ChatsComponent.vue
@@ -9,8 +9,9 @@
           :key="i"
           @recipient="selectUser"
         ></ChatProfile>
-        <div class="button">
-          <colored-button text="Ny Samtale"></colored-button>
+        <!-- If no conversatiosn show no conversations found -->
+        <div v-if="conversations.length === 0" class="no-conversations">
+          <p>Ingen samtaler</p>
         </div>
       </div>
       <div class="current-chat">
@@ -25,7 +26,6 @@ import ChatProfile from './ChatProfile.vue';
 import ChatComponent from './ChatComponent.vue';
 import { parseCurrentUser } from "@/utils/token-utils";
 import ws from "@/services/ws";
-import ColoredButton from '../BaseComponents/ColoredButton.vue';
 
 export default {
   props: {
@@ -49,7 +49,7 @@ export default {
       recipientID: null
     };
   },
-  components: { ChatProfile, ChatComponent, ColoredButton},
+  components: { ChatProfile, ChatComponent},
   computed: {
     userid() {
       return parseCurrentUser().accountId;
@@ -107,6 +107,15 @@ export default {
     width: 100%;
 }
 
+  .no-conversations {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+  }
+
 .nothing-selected p {
     font-size: 2rem;
     font-weight: bold;
diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue
index 6fc53f85494dbd873a4507422e84d18fd2380ae3..23b3a73eb1d04fc9bc401340b9859debc27643bc 100644
--- a/src/components/ChatComponents/RentalMessage.vue
+++ b/src/components/ChatComponents/RentalMessage.vue
@@ -27,15 +27,48 @@
 
 <script>
 export default {
+    props: {
+        rent: {
+            type: Object,
+            default () {
+                return {
+                    createdAd: 0,
+                    fromTime: 0,
+                    isAccepted: false,
+                    listingId: 0,
+                    message: "",
+                    rentId: 0,
+                    renterId: 0,
+                    toTime: 0
+                }
+            }
+        },
+    },
     data() {
         return {
-            img: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80',
-            extra: 'hello',
-            to: '',
-            from: '',
-            price: '200'
+
         }
-    }
+    },
+    computed: {
+        img() {
+            return 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80'//this.rent.listing.imageUrl;
+        },
+        from() {
+            // take ms and turn into date and return date
+            return new Date(this.rent.fromTime).toLocaleDateString();
+        },
+        to() {
+            return new Date(this.rent.toTime).toLocaleDateString();
+        },
+        price() {
+            // Calculate price from price * days
+            return this.rent.listing.pricePerDay * Math.ceil((this.rent.toTime - this.rent.fromTime) / (1000 * 60 * 60 * 24));
+        },
+        extra() {
+            return this.rent.message || "Ingen Melding";
+        }
+    },
+
 }
 </script>