diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index bd51544..0da35ac 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -38,7 +38,11 @@
     <mat-card>
         <h2>Websites</h2>
         <p>
-            I personally created this website you are currently looking at using <a href="https://angular.io">Angular</a> and the <a href="https://material.io/design">Material design theme</a>. Additionally, I also created <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a>            and host an instance of <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
+            I personally created this website you are currently looking at using
+            <a href="https://angular.io">Angular</a> and the
+            <a href="https://material.io/design">Material design theme</a>. Additionally, I also created
+            <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a> and host an instance of
+            <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
         </p>
         <p>
             The backend is made using <a href="https://rubyonrails.org/">Ruby on rails</a>.
@@ -55,15 +59,18 @@
             </div>
         </ng-template>
     </mat-card>
-    <mat-card *ngIf="userStatuses.length > 0">
+    <mat-card *ngIf="statuses.length > 0">
         <h2>User statuses:</h2>
         <div class="flex-center" *ngIf="loadingStatuses; else statusesTemplate">
             <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
         </div>
         <ng-template #statusesTemplate>
-            <div *ngFor="let userStatus of userStatuses">
+            <div *ngFor="let userStatus of statuses">
                 <h4 style="text-align: left;"> {{userStatus.user}} </h4>
-                <p> {{userStatus.message}} </p>
+                <p> {{userStatus.message}} <br>
+                    <i> (created {{userStatus.postTime.toString(true)}} ago,
+                    visible for {{userStatus.lifetime.toString()}})</i>
+                </p>
             </div>
         </ng-template>
     </mat-card>

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index bd51544..0da35ac 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -38,7 +38,11 @@
     <mat-card>
         <h2>Websites</h2>
         <p>
-            I personally created this website you are currently looking at using <a href="https://angular.io">Angular</a> and the <a href="https://material.io/design">Material design theme</a>. Additionally, I also created <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a>            and host an instance of <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
+            I personally created this website you are currently looking at using
+            <a href="https://angular.io">Angular</a> and the
+            <a href="https://material.io/design">Material design theme</a>. Additionally, I also created
+            <a href="https://www.mpe.mpg.de/~eisenhau/">Frank Eisenhauer's webpage</a> and host an instance of
+            <a href="https://lukas-eisenhauer.de/git">gitBucket</a>.
         </p>
         <p>
             The backend is made using <a href="https://rubyonrails.org/">Ruby on rails</a>.
@@ -55,15 +59,18 @@
             </div>
         </ng-template>
     </mat-card>
-    <mat-card *ngIf="userStatuses.length > 0">
+    <mat-card *ngIf="statuses.length > 0">
         <h2>User statuses:</h2>
         <div class="flex-center" *ngIf="loadingStatuses; else statusesTemplate">
             <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
         </div>
         <ng-template #statusesTemplate>
-            <div *ngFor="let userStatus of userStatuses">
+            <div *ngFor="let userStatus of statuses">
                 <h4 style="text-align: left;"> {{userStatus.user}} </h4>
-                <p> {{userStatus.message}} </p>
+                <p> {{userStatus.message}} <br>
+                    <i> (created {{userStatus.postTime.toString(true)}} ago,
+                    visible for {{userStatus.lifetime.toString()}})</i>
+                </p>
             </div>
         </ng-template>
     </mat-card>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 28dfbaa..82a5137 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,14 +1,67 @@
-import { FormStyle } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { interval } from 'rxjs';
 import { environment } from 'src/environments/environment';
 
+class Time {
+  seconds: number
+  minutes: number
+  hours: number
+
+  constructor(time: number) {
+    this.seconds = time % 60
+    this.minutes = Math.floor(time / 60) % 60
+    this.hours = Math.floor(time / 3600)
+  }
+
+  toString(short: boolean = false) {
+    var result = ""
+    if (this.hours > 0) {
+      result += ` ${this.hours} hours`
+      if (short) {
+        return result
+      }
+    }
+    if (this.minutes > 0) {
+      result += ` ${this.minutes} minutes`
+      if (short) {
+        return result
+      }
+    }
+    if (this.seconds > 0) {
+      result += ` ${this.seconds} seconds`
+      if (short) {
+        return result
+      }
+    }
+    return result
+  }
+}
+
 class Status {
-  constructor(public user: string, public message: string) {}
+  user: string
+  message: string
+  postTime: Time
+  lifetime: Time
+
+  constructor(
+    statusInterface: StatusInterface
+  ) {
+    this.user = statusInterface.user
+    this.message = statusInterface.message
+    var postedAgo = Math.floor(Date.now()/1000) - statusInterface.createdAt
+    this.postTime = new Time(postedAgo)
+    this.lifetime = new Time(statusInterface.lifetime)
+  }
+}
+interface StatusInterface {
+  user: string
+  message: string
+  createdAt: number
+  lifetime: number
 }
 class StatusAnswer {
-  constructor(public success: boolean = false, public userStatuses: Status[] = []) {}
+  constructor(public success: boolean = false, public userStatuses: StatusInterface[] = []) {}
 }
 
 class Quote {
@@ -24,7 +77,7 @@
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
-  userStatuses: Status[] = []
+  statuses: Status[] = []
   quotes: Quote[] = []
   loadingStatuses = true
   loadingQuotes = true
@@ -43,7 +96,10 @@
       var userStatusAnswer = Object.assign(new StatusAnswer(), answer)
       this.loadingStatuses &&= !userStatusAnswer.success
       if (userStatusAnswer.success) {
-        this.userStatuses = userStatusAnswer.userStatuses
+        this.statuses = []
+        userStatusAnswer.userStatuses.forEach(status => {
+          this.statuses.push(new Status(status))
+        })
       }
     })
     this.http.get(`${environment.apiURL}/users/quotes`).subscribe((answer) => {
@@ -54,4 +110,4 @@
       }
     })
   }
-}
+}
\ No newline at end of file