diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
index 6c2e281d..d03b99c3 100644
--- a/src/components/TaskList.vue
+++ b/src/components/TaskList.vue
@@ -1,9 +1,20 @@
 <template>
   <div>
-    <div class="list-items" v-if="loading"> loading </div>
-    <div class="list-items" v-if="noTasks && !this.loading">empty </div>
+    <div class="loading-item" v-if="loading" v-for="(n, index) in 5" :key="index">
+      <span class="glow-checkbox" />
+      <span class="glow-text">
+        <span>Loading</span> <span>cool</span> <span>state</span>
+      </span>
+    </div>
+    <div class="list-items" v-if="noTasks && !this.loading">
+      <div class="wrapper-message">
+        <span class="icon-check" />
+        <div class="title-message">You have no tasks</div>
+        <div class="subtitle-message">Sit back and relax</div>
+      </div>
+    </div>
     <div class="list-items" v-if="showTasks">
-      <task v-for="(task, index) in tasks" :key="index" :task="task" 
+      <task v-for="(task, index) in tasksInOrder" :key="index" :task="task" 
         @archiveTask="$emit('archiveTask', $event)" @pinTask="$emit('pinTask', $event)"/>
     </div>
   </div>
@@ -12,7 +23,7 @@
 <script>
 import Task from "@/components/Task";
 export default {
-  name: "task-list",
+  name: "pure-task-list",
   props: {
     loading: {
       type: Boolean,
@@ -34,6 +45,12 @@ export default {
     },
     showTasks() {
       return !this.loading && !this.noTasks;
+    },
+    tasksInOrder() {
+      return [
+        ...this.tasks.filter(t => t.state === "TASK_PINNED"),
+        ...this.tasks.filter(t => t.state !== "TASK_PINNED")
+      ];
     }
   }
 };