diff --git a/src/components/EmptyMessage.vue b/src/components/EmptyMessage.vue
new file mode 100644
index 0000000..ea6747c
--- /dev/null
+++ b/src/components/EmptyMessage.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-flex xs12 md6 class="empty-message"   style="margin:auto"   :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">
+    <v-layout row fill-height>
+      <v-flex xs12>
+        <v-icon :size="iconSize"  :color="(darkMode) ? `grey darken-2` : `grey lighten-4`">{{ icon }}</v-icon>
+      </v-flex>
+    </v-layout>
+    <v-layout row fill-height>
+      <v-flex xs12>
+        <span class="text-xs-center" :class="fontSize">{{ message }}</span>
+      </v-flex>
+    </v-layout>
+  </v-flex>
+</template>
+
+<script>
+export default {
+  name: "EmptyMessage",
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    iconSize: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    darkMode() {
+      return this.$store.state.settings.darkMode;
+    }
+  }
+};
+</script>
+<style lang="css" scoped>
+.empty-message{
+  margin: auto;
+  text-align: center;
+  border: 3px solid;
+  border-style: dashed;
+  padding: 5%;
+}
+</style>
diff --git a/src/views/Issues.vue b/src/views/Issues.vue
index bf82317..20e3929 100644
--- a/src/views/Issues.vue
+++ b/src/views/Issues.vue
@@ -7,9 +7,12 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have created any issue...</span>
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have created any issue..."
+        icon="bug_report"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -17,11 +20,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Issue from "@/components/Issue.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "issues",
   components: {
-    Issue
+    Issue,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index feb5f1d..166b73e 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -7,9 +7,12 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>No projects to show...</span>
-      </v-flex>
+      <empty-message
+        message="No projects to show..."
+        icon="lightbulb"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -17,11 +20,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Project from "@/components/Project.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "projects",
   components: {
-    Project
+    Project,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
diff --git a/src/views/Runners.vue b/src/views/Runners.vue
index 8b9cb47..02796c2 100644
--- a/src/views/Runners.vue
+++ b/src/views/Runners.vue
@@ -7,9 +7,12 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have enough rights to access the runners Gitlab API.</span>
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have enough rights to access the runners Gitlab API."
+        icon="directions_run"
+        iconSize="100"
+        fontSize="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -17,11 +20,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Runner from "@/components/Runner.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "runners",
   components: {
-    Runner
+    Runner,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({
diff --git a/src/views/Todos.vue b/src/views/Todos.vue
index 3495696..3adaf6f 100644
--- a/src/views/Todos.vue
+++ b/src/views/Todos.vue
@@ -13,9 +13,12 @@
       </template>
     </v-list>
     <v-layout v-else ma-4>
-      <v-flex>
-        <span>Looks like you do not have anything to do...</span>
-      </v-flex>
+      <empty-message
+        message="Looks like you do not have anything to do..."
+        icon="list"
+        icon-size="100"
+        font-size="display-1"
+      ></empty-message>
     </v-layout>
   </div>
 </template>
@@ -23,11 +26,13 @@
 <script>
 import { mapGetters } from "vuex";
 import Todo from "@/components/Todo.vue";
+import EmptyMessage from "@/components/EmptyMessage.vue";
 
 export default {
   name: "todos",
   components: {
-    Todo
+    Todo,
+    EmptyMessage
   },
   computed: {
     ...mapGetters({