diff --git a/frontend/components/Note.vue b/frontend/components/Note.vue
index 74c063d..eca1f48 100644
--- a/frontend/components/Note.vue
+++ b/frontend/components/Note.vue
@@ -1,46 +1,46 @@
 <template>
-    <v-card height="100%">
-        <v-card-title>{{ title }}</v-card-title>
-        <v-card-text>
-            <slot></slot>
-        </v-card-text>
+    <v-card
+        class="d-flex flex-column"
+        :class="{ hover:hover }"
+        height="100%"
+        :color="hover ? 'blue lighten-3' : 'white'"
+        :elevation="hover ? 12 : 2"
+    >
+        <div class="mb-auto">
+            <v-card-title>{{ title }}</v-card-title>
 
-        <div class="tags">
-            <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
+            <div class="tags">
+                <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
+            </div>
         </div>
 
-        <v-divider class="mt-auto"></v-divider>
-
-        <v-card-actions>
-            <v-btn
-                text
-                color="deep-purple accent-4" dark>
-                <v-icon left>mdi-eye</v-icon>
-                View
-            </v-btn>
-            <v-spacer/>
-            <v-btn
-                text
-                color="deep-purple accent-4">
-                <v-icon left>mdi-pencil</v-icon>
-                Edit
-            </v-btn>
-        </v-card-actions>
+        <div class="mt-auto" v-if="updatedAt">
+            <v-divider/>
+            <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
+        </div>
     </v-card>
 </template>
 
 <script>
     export default {
-        name: "Note",
+        name: 'Note',
         props: {
             title: {
                 type: String,
-                required: true
+                required: true,
             },
             tags: {
-                type: Array
-            }
-        }
+                type: Array,
+            },
+            hover: {
+                type: Boolean,
+                default: 'false',
+            },
+            updatedAt: {
+                type: String,
+                default: null,
+            },
+        },
     }
 </script>
 
@@ -52,4 +52,8 @@
     .tags .v-chip {
         margin: 4px 8px 4px 0;
     }
+
+    .v-card.hover {
+        cursor: pointer;
+    }
 </style>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 20684f6..29b6c67 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -8,7 +8,7 @@
         >
             <v-btn to="/" text rounded>Simple Notes</v-btn>
             <v-spacer/>
-            <v-btn to="/notes" text rounded>My notes</v-btn>
+            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
             <v-btn outlined v-if="this.$store.state.auth.loggedIn">Welcome {{this.$store.state.auth.user.username}}</v-btn>
             <v-btn v-else to="/account" text rounded>Account</v-btn>
         </v-app-bar>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index ca19d3c..59ac3ea 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -1,106 +1,48 @@
 <template>
     <v-container fluid>
-        <v-row dense
-               align-content="stretch"
-               align="stretch"
-        >
+        <v-row dense align-content="stretch" align="stretch">
             <v-col
                 v-for="(note, index) in notes"
                 :key="index"
-                cols="12" md="6" xl="3"
-                class="viewer">
-                <Note
-                    class="item"
-                    :title="note.title"
-                    :tags="note.tags"
-                >
-                    {{ note.content }}
-                </Note>
+                cols="12"
+                sm="6"
+                md="4"
+                xl="3"
+                class="viewer"
+            >
+                <v-hover v-slot:default="{ hover }">
+                    <Note
+                        :hover="hover"
+                        :title="note.title"
+                        :tags="note.tags"
+                        :updated-at="format(note.updatedAt)"
+                    >
+                        {{ note.content }}
+                    </Note>
+                </v-hover>
             </v-col>
-
         </v-row>
 
         <v-btn to="/create" fab fixed bottom right large color="accent">
             <v-icon>mdi-plus</v-icon>
         </v-btn>
-
     </v-container>
-
 </template>
 
 <script>
-    import Note from '@/components/Note'
+import Note from '@/components/Note';
+import { format } from 'timeago.js';
 
-    export default {
-        name: "notes",
-        title: "Notes",
-        components: {
-            Note,
-        },
-        data: () => ({
-            selector: ".viewer",
-            options: {
-                columnWidth: "200",
-                percentPosition: true,
-                gutter: 0,
-                itemSelector: ".item"
-            },
-            notes: [
-                {
-                    title: "Elec analogique",
-                    tags: ["Ephec"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Melvin fait du ski",
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Daniel étudie elec",
-                    tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Daniel étudie elec",
-                    tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-            ]
-        })
-    }
+export default {
+    name: 'notes',
+    title: 'Notes',
+    components: { Note },
+    data: () => ({
+        notes: [],
+    }),
+    methods: { format },
+    mounted() {
+        this.$axios.get('/notes').then(e => (this.notes = e.data));
+    },
+};
 </script>
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
new file mode 100644
index 0000000..6b209a4
--- /dev/null
+++ b/frontend/webpack.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  resolve: {
+    // for IntelliJ
+    alias: {
+      '@': path.resolve(__dirname),
+      '~': path.resolve(__dirname)
+    }
+  }
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d60c2db
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "timeago.js": "^4.0.2"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..5c69c26
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+timeago.js@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==