diff --git a/.eslintrc.json b/.eslintrc.json
index e1fa319af..440e3dde0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,8 +9,7 @@
     },
     "ignorePatterns": [
         "modules/*/tests/*",
-        "node_modules/*",
-        "frontend/*"
+        "node_modules/*"
     ],
     "rules": {
         "arrow-spacing": [
@@ -45,9 +44,11 @@
             2
         ],
         "space-unary-ops": [
-            2, {
+            2,
+            {
                 "words": true,
                 "nonwords": false
-            }]
+            }
+        ]
     }
-}
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 01bbb8edb..a5a257819 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -5635,8 +5635,7 @@
     "date-fns": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
-      "dev": true
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
     "de-indent": {
       "version": "1.0.2",
@@ -9625,8 +9624,7 @@
     "moment": {
       "version": "2.25.3",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
-      "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==",
-      "dev": true
+      "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg=="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -14174,6 +14172,14 @@
         }
       }
     },
+    "vue-moment": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
+      "integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
+      "requires": {
+        "moment": "^2.19.2"
+      }
+    },
     "vue-router": {
       "version": "3.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
@@ -14213,6 +14219,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-timeago": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/vue-timeago/-/vue-timeago-5.1.2.tgz",
+      "integrity": "sha512-K74EdER1WO1XX+EIsf5ZeHucZjconfncOTlKxntC7s7q0QAAgiZt5BYenJ/GPHEEcxfmrGsiFWJPYmLHyNzDRg==",
+      "requires": {
+        "date-fns": "^1.29.0"
+      }
+    },
     "vuetify": {
       "version": "2.3.12",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.12.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5bbbad25a..f269295d8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.4",
     "vue-router": "^3.4.5",
+    "vue-timeago": "^5.1.2",
     "vuetify": "^2.3.12",
     "vuex": "^3.5.1"
   },
diff --git a/frontend/src/AppFrontend.vue b/frontend/src/AppFrontend.vue
index 6ac03561e..dd6dcc0f9 100644
--- a/frontend/src/AppFrontend.vue
+++ b/frontend/src/AppFrontend.vue
@@ -2,11 +2,16 @@
   <v-app id="inspire">
     <v-app-bar app color="white" flat>
       <v-container class="py-0 fill-height">
-        <v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
-        <v-toolbar-title class="mr-5" style="margin-top: -4px">
-          <span class="primary--text caption"><b>SPECKLE</b></span
-          >&nbsp;<span class="caption">ADMIN</span>
-        </v-toolbar-title>
+        
+
+
+        <v-btn text>
+          <v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
+          <div class="mt-1">
+            <span class="primary--text"><b>SPECKLE</b></span>&nbsp;<span class="font-weight-light">ADMIN</span>
+          </div>
+          
+        </v-btn>
 
         <v-btn v-for="link in links" :key="link" text>
           {{ link }}
@@ -56,11 +61,11 @@
           </v-col>
 
           <v-col>
-            <v-sheet min-height="70vh" rounded="lg">
-              <v-main>
-                <router-view></router-view>
+            <!-- <v-sheet min-height="70vh" rounded="lg"> -->
+              <v-main class="pt-0">
+                <router-view :user="user"></router-view>
               </v-main>
-            </v-sheet>
+            <!-- </v-sheet> -->
           </v-col>
         </v-row>
       </v-container>
@@ -113,6 +118,12 @@ export default {
   data: () => ( {
     user: {},
     links: [ "streams", "projects", "profile", "settings", "help" ],
-  } )
+  } ),
+  
+  watch:{
+    user( val ){
+      console.log( val )
+    }
+  }
 }
 </script>
diff --git a/frontend/src/main-frontend.js b/frontend/src/main-frontend.js
index 7ad4ca59c..be37c923a 100644
--- a/frontend/src/main-frontend.js
+++ b/frontend/src/main-frontend.js
@@ -3,9 +3,10 @@ import App from './AppFrontend.vue'
 import router from './router'
 import store from './store'
 import vuetify from './plugins/vuetify';
-import { createProvider, onLogin } from './vue-apollo'
+import { createProvider, } from './vue-apollo'
 import { signIn } from './auth-helpers'
-import crs from 'crypto-random-string'
+import VueTimeago from 'vue-timeago'
+
 
 Vue.config.productionTip = false
 
@@ -13,10 +14,16 @@ Vue.config.productionTip = false
 ;
 /* Semicolon of Doom */
 
+
+
 ( async ( ) => {
   let result = await signIn( )
   if ( !result ) return
-  let app = new Vue( {
+
+  Vue.use( VueTimeago, {
+    locale: 'en' } )
+
+  new Vue( {
     router,
     store,
     vuetify,
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 56d9b906f..e9bdf3db8 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,8 +1,39 @@
 <template>
-  <div>
-    <h1>
+  <div v-if="user.streams && user.streams.items">
+    <v-card class="mb-5" elevation="0" rounded="lg">
+      <v-subheader class="text-uppercase"> Recent activity: </v-subheader>
+      <v-chip class="ml-3 mb-3" small color="indigo" text-color="white">
+        all activity
+      </v-chip>
+      <v-chip class="ml-3 mb-3" small color="orange" text-color="white">
+        your activity
+      </v-chip>
+      <v-chip class="ml-3 mb-3" small color="green" text-color="white">
+        team activity
+      </v-chip>
+    </v-card>
 
-    </h1>
+    <v-card
+      v-for="(stream, i) in user.streams.items"
+      :key="i"
+      class="mb-2"
+      elevation="0"
+      rounded="lg"
+    >
+      <v-row class="caption pl-4 pr-4 grey--text text--lighten-1">
+        <v-col><strong>You</strong> created a new stream</v-col>
+        <v-spacer></v-spacer>
+        
+        <v-col class="text-right"><timeago :datetime="parseInt(stream.createdAt)"></timeago></v-col>
+      </v-row>
+      <v-divider></v-divider>
+      <v-card-title>
+        {{ stream.name }}
+      </v-card-title>
+      <v-card-subtitle>
+        {{ stream.description }}
+      </v-card-subtitle>
+    </v-card>
   </div>
 </template>
 <script>
@@ -15,4 +46,4 @@ export default {
   data: () => ( {} ),
   props: [ "user" ],
 }
-</script>
\ No newline at end of file
+</script>