diff --git a/todolist-app-5-v2/src/App.vue b/todolist-app-5-v2/src/App.vue
index 72ccdf2..637233b 100644
--- a/todolist-app-5-v2/src/App.vue
+++ b/todolist-app-5-v2/src/App.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import Navbar from "@/components/Navbar"
+import Navbar from "@/components/Navbar";
 export default {
   components: {
-    Navbar
-  }
-}
+    Navbar,
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "~materialize-css/dist/css/materialize.min.css";
+@import "~materialize-css/dist/css/materialize.min.css";
 </style>
diff --git a/todolist-app-5-v2/src/components/Navbar.vue b/todolist-app-5-v2/src/components/Navbar.vue
index 14bb6a4..9be009d 100644
--- a/todolist-app-5-v2/src/components/Navbar.vue
+++ b/todolist-app-5-v2/src/components/Navbar.vue
@@ -1,23 +1,129 @@
 <template>
-  <nav class="blue darken-3">
-    <div class="nav-wrapper">
-      <router-link to="/" class="brand-logo">Tasks</router-link>
-      <ul class="right">
-        <li><router-link to="/" exact active-class="active"><a href="#">Create</a></router-link></li>
-        <li><router-link to="/list" active-class="active"><a href="#">List</a></router-link></li>
-      </ul>
-    </div>
-  </nav>
+  <div>
+    <nav class="blue darken-3">
+      <div class="nav-wrapper">
+        <ul>
+          <li>
+            <a href="#" @click.prevent="openSidenav">Lists</a>
+          </li>
+          <li>
+            <router-link to="/all-tasks/" active-class="active">
+              All tasks
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <a href="#" data-target="slide-out" class="sidenav-trigger"
+      ><i class="material-icons">menu</i></a
+    >
+    <ul id="slide-out" class="sidenav">
+      <li><a class="subheader">Lists:</a></li>
+      <li v-for="list of lists" :key="list.id">
+        <router-link
+          :to="'/list/' + list.id"
+          active-class="active"
+          class="listtitle"
+        >
+          <i class="material-icons">{{ list.icon }}</i>
+          [{{ list.tasks.length }}] {{ list.title }}
+        </router-link>
+      </li>
+      <li><div class="divider"></div></li>
+      <li><a class="subheader">All tasks:</a></li>
+      <li>
+        <router-link to="/all-tasks/" active-class="active">
+          All tasks
+        </router-link>
+      </li>
+      <li><div class="divider"></div></li>
+      <li><a class="subheader">Add new list:</a></li>
+      <li>
+        <div class="input-field" style="margin: 0px 10px">
+          <input
+            id="newtitle"
+            ref="newtitle"
+            type="text"
+            data-length="30"
+            v-model="addListTitle"
+            @keyup.enter="createList"
+          />
+          <label for="newtitle">Title (maximum of 30 characters)</label>
+          <a class="waves-effect waves-light btn-small" @click="createList"
+            >add</a
+          >
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      sidenav: null,
+      sidenav2: null,
+      addListTitle: "",
+    };
+  },
+  computed: {
+    lists() {
+      return this.$store.getters.lists;
+    },
+  },
+  mounted() {
+    document.addEventListener("DOMContentLoaded", function () {
+      var elem = document.querySelector(".sidenav");
+      this.sidenav = M.Sidenav.init(elem);
+    });
 
-}
+    setTimeout(() => {
+      M.updateTextFields();
+      M.CharacterCounter.init(this.$refs.newtitle);
+    }, 0);
+  },
+  unmounted() {
+    if (this.sidenav) {
+      this.sidenav.destroy();
+    }
+  },
+  methods: {
+    openSidenav() {
+      var elem = document.querySelector(".sidenav");
+      this.sidenav = M.Sidenav.getInstance(elem);
+      this.sidenav.open();
+    },
+
+    createList() {
+      if (this.addListTitle.trim() == "" || this.addListTitle.length > 30)
+        return;
+
+      const list = {
+        id: Date.now(),
+        title: this.addListTitle,
+        tasks: [],
+      };
+
+      this.$store.dispatch("createList", list);
+      this.addListTitle = "";
+    },
+  },
+};
 </script>
 
 <style>
-  nav {
-    padding: 0 2rem;
-  }
+nav {
+  padding: 0px 10px;
+}
+.listtitle {
+  padding: 0px 16px !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+.material-icons {
+  margin-right: 5px !important;
+}
 </style>
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/components/Tasks.vue b/todolist-app-5-v2/src/components/Tasks.vue
new file mode 100644
index 0000000..f45ae42
--- /dev/null
+++ b/todolist-app-5-v2/src/components/Tasks.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="row">
+    <div v-if="tasks[0] != null">
+      <div v-if="viewStyle">
+        <!-- Cards View -->
+        <div
+          class="card col l3"
+          style="margin: 5px"
+          v-for="task of filteredTasks"
+          :key="task.id"
+          @dblclick="$router.push('/task/' + task.id)"
+        >
+          <div class="card-content">
+            <span class="card-title activator grey-text text-darken-4">
+              <label>
+                <input
+                  type="checkbox"
+                  class="filled-in"
+                  :checked="task.isCompleted"
+                  @click="toggleCompleteStatus(task.id)"
+                />
+                <span></span>
+              </label>
+              <span>{{ task.title }}</span>
+              <i class="material-icons right">more_vert</i>
+            </span>
+            <p>
+              Date: {{ new Date(task.date).toLocaleDateString() }} &nbsp;|&nbsp;
+              Tags: {{ task.tags.length }}
+            </p>
+            <p>Description:</p>
+            <p class="text" style="width: 250px">
+              {{ task.desc }}
+            </p>
+
+            <hr />
+            <router-link
+              tag="button"
+              class="btn btn-small"
+              :to="'/task/' + task.id"
+            >
+              <i class="small material-icons">edit</i>
+            </router-link>
+            <button class="btn btn-small red" @click="deleteTask(task.id)">
+              <i class="small material-icons">delete</i>
+            </button>
+          </div>
+          <div class="card-reveal">
+            <span class="card-title grey-text text-darken-4">
+              <i class="material-icons right">close</i>
+            </span>
+            <div class="input-field">
+              <textarea
+                disabled
+                style="min-height: 150px"
+                :value="task.desc"
+                id="desc"
+                class="materialize-textarea"
+              ></textarea>
+              <span
+                class="character-counter"
+                style="float: right; font-size: 12px"
+              >
+                {{ task.desc.length }}/1024
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <!-- Table View -->
+        <table class="tasks">
+          <thead>
+            <tr>
+              <th><i class="tiny material-icons">check</i></th>
+              <th>
+                <a href="#" @click.prevent="setSortBy('title', $event)"
+                  >Title</a
+                >
+              </th>
+              <th>
+                <a href="#" @click.prevent="setSortBy('desc', $event)"
+                  >Description</a
+                >
+              </th>
+              <th>Tags</th>
+              <th>
+                <a href="#" @click.prevent="setSortBy('date', $event)">Date</a>
+              </th>
+              <th>
+                <a href="#" @click.prevent="setSortBy('status', $event)"
+                  >Status</a
+                >
+              </th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="task of sortedTasks"
+              :key="task.id"
+              @dblclick="$router.push('/task/' + task.id)"
+              :style="
+                task.status == 'outdated'
+                  ? styleOutdated
+                  : task.status == 'completed'
+                  ? styleCompleted
+                  : 'none'
+              "
+            >
+              <td>
+                <label>
+                  <input
+                    type="checkbox"
+                    class="filled-in"
+                    :checked="task.isCompleted"
+                    @click="toggleCompleteStatus(task.id)"
+                  />
+                  <span></span>
+                </label>
+              </td>
+              <td>{{ task.title }}</td>
+
+              <td>
+                <div class="text">{{ task.desc }}</div>
+              </td>
+              <td>
+                {{ task.tags.length }}
+              </td>
+              <td>{{ new Date(task.date).toLocaleDateString() }}</td>
+              <td>{{ task.status }}</td>
+              <td>
+                <router-link
+                  tag="button"
+                  class="btn btn-small"
+                  :to="'/task/' + task.id"
+                >
+                  <i class="small material-icons">edit</i>
+                </router-link>
+                <button class="btn btn-small red" @click="deleteTask(task.id)">
+                  <i class="small material-icons">delete</i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <p v-else>No task in this list</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    viewStyle: {
+      type: Boolean,
+      default: false,
+    },
+
+    filterStatus: {
+      type: String,
+      default: "",
+    },
+
+    filterText: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      sortBy: "title",
+      sortOrderAsc: true, // ascending or descending
+      styleOutdated: { color: "red" },
+      styleCompleted: { "text-decoration": "line-through", color: "green" },
+    };
+  },
+  computed: {
+    tasks() {
+      if (this.$route.name == "all-tasks") return this.$store.getters.tasks;
+      return this.$store.getters.tasksFromListId(this.$route.params.id);
+    },
+
+    filteredTasks() {
+      return this.tasks.filter((t) => {
+        return (
+          (this.filterStatus != "" ? this.filterStatus == t.status : true) &&
+          (this.filterText != ""
+            ? t.title.includes(this.filterText) ||
+              t.desc.includes(this.filterText)
+            : true)
+        );
+      });
+    },
+
+    sortedTasks() {
+      return this.filteredTasks.sort((a, b) => {
+        var a1, b1;
+
+        switch (this.sortBy) {
+          case "title":
+            a1 = a.title;
+            b1 = b.title;
+            break;
+          case "desc":
+            a1 = a.desc;
+            b1 = b.desc;
+            break;
+          case "date":
+            a1 = a.date;
+            b1 = b.date;
+            break;
+          case "status":
+            a1 = a.status;
+            b1 = b.status;
+            break;
+          case "":
+            return 0;
+        }
+
+        if (a1 == b1) {
+          return 0;
+        } else if (a1 < b1) {
+          return this.sortOrderAsc ? 1 : -1;
+        } else if (a1 > b1) {
+          return this.sortOrderAsc ? -1 : 1;
+        }
+      });
+    },
+  },
+  methods: {
+    deleteTask(taskId) {
+      this.$store.dispatch("deleteTask", taskId);
+      M.toast({ html: "Task deleted!", displayLength: 2000 });
+    },
+
+    toggleCompleteStatus(id) {
+      this.$store.dispatch("toggleCompleteStatus", id);
+    },
+
+    setSortBy(colum, event) {
+      const columStr = event.target.innerText;
+      const lastSymbol = columStr[columStr.length - 1];
+
+      if (lastSymbol == "↓") {
+        event.target.innerText = columStr.slice(0, -1) + "↑";
+      } else if (lastSymbol == "↑") {
+        event.target.innerText = columStr.slice(0, -1) + "↓";
+      } else {
+        event.target.innerText = columStr + "↓";
+      }
+
+      this.sortOrderAsc = colum == this.sortBy ? !this.sortOrderAsc : true;
+      this.sortBy = colum;
+    },
+  },
+};
+</script>
+
+<style>
+.tasks tr:hover {
+  background-color: lightgreen;
+}
+.text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/directives/markdown.js b/todolist-app-5-v2/src/directives/markdown.js
new file mode 100644
index 0000000..4bf21eb
--- /dev/null
+++ b/todolist-app-5-v2/src/directives/markdown.js
@@ -0,0 +1,28 @@
+const rules = [
+    [/^#{6}\s?(.*$)/gim, '<h6>$1</h6>'], // ######  ->  <h6>
+    [/^#{5}\s?(.*$)/gim, '<h5>$1</h5>'], // #####  ->  <h5>
+    [/^#{4}\s?(.*$)/gim, '<h4>$1</h4>'], // ####  ->  <h4>
+    [/^#{3}\s?(.*$)/gim, '<h3>$1</h3>'], // ###  ->  <h3>
+    [/^#{2}\s?(.*$)/gim, '<h2>$1</h2>'], // ##  ->  <h2>
+    [/^#{1}\s?(.*$)/gim, '<h1>$1</h1>'], // #  ->  <h1>
+    [/(\*\*|__)(.*)(\*\*|__)/gim, '<b>$2</b>'], // ** X ** | __ X __ ->   <b>
+    [/(\*|_)(.*)(\*|_)/gim, '<i>$2</i>'], // * X * | _ X _ ->   <i>
+    // [/((\n\d\..+)+)/g, '<ol>$1</ol>'],
+    // [/((\n\*.+)+)/g, '<ul>$1</ul>'],
+    // [/\n\d\.([^\n]+)/g, '<li>$1</li>'],
+    // [/^\*([^\n]+)/g, '<li>$1</li>'],
+    // [/^(\*|\+|-) .*$/g, '<li>$1</li>'],
+    [/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />"],  // ![]()  ->   <img>
+    [/\[(.*?)\]\((.*?)\)/gim,  "<a href='$2' target='_blank'>$1</a>"],  // []()  ->   <a>
+    [/^\> (.*$)/gim, '<blockquote>$1</blockquote>'],  //  > X   ->   <blockquote>
+    //[/\n$/gim, '<br />'],
+    [/([^\n]+\n)/g, '<p>$1</p>'],          //  \n -> <p>
+];
+
+export default {
+    mounted(el) {
+        let html = el.textContent;
+        rules.forEach(([rule, template]) => html = html.replace(rule, template))
+        el.innerHTML = html.trim();
+      }
+}
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/main.js b/todolist-app-5-v2/src/main.js
index 3bc5611..f7bb54d 100644
--- a/todolist-app-5-v2/src/main.js
+++ b/todolist-app-5-v2/src/main.js
@@ -2,7 +2,8 @@ import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import markdown from './directives/markdown.js'
 import 'materialize-css/dist/js/materialize.min'
 import './registerServiceWorker'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(store).use(router).directive('markdown', markdown).mount('#app')
diff --git a/todolist-app-5-v2/src/router/index.js b/todolist-app-5-v2/src/router/index.js
index 0d5116f..c2e3346 100644
--- a/todolist-app-5-v2/src/router/index.js
+++ b/todolist-app-5-v2/src/router/index.js
@@ -2,19 +2,24 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 const routes = [
   {
-    path: '/',
-    name: 'create',
-    component: () => import('@/views/Create.vue')
+    path: '/list/:id',
+    name: 'list',
+    component: () => import('@/views/List.vue')
   },
   {
-    path: '/list',
-    name: 'list',
+    path: '/all-tasks/',
+    name: 'all-tasks',
     component: () => import('@/views/List.vue')
   },
+  {
+    path: '/',
+    name: 'unselect',
+    component: () => import('@/views/ListNotSelected.vue')
+  },
   {
     path: '/task/:id',
     name: 'task',
-    component: () => import('@/views/Task.vue')
+    component: () => import('@/views/EditTask.vue')
   }
 ]
 
@@ -23,31 +28,4 @@ const router = createRouter({
   routes
 })
 
-export default router
-
-// import Vue from 'vue'
-// import Router from 'vue-router'
-
-// Vue.use(Router)
-
-// export default new Router({
-//   mode: 'history',
-//   base: process.env.BASE_URL,
-//   routes: [
-//     {
-//       path: '/',
-//       name: 'create',
-//       component: () => import('@/views/Create.vue')
-//     },
-//     {
-//       path: '/list',
-//       name: 'list',
-//       component: () => import('@/views/List.vue')
-//     },
-//     {
-//       path: '/task/:id',
-//       name: 'task',
-//       component: () => import('@/views/Task.vue')
-//     }
-//   ]
-// })
+export default router
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/store/index.js b/todolist-app-5-v2/src/store/index.js
index ffa7ef9..e4eb9bd 100644
--- a/todolist-app-5-v2/src/store/index.js
+++ b/todolist-app-5-v2/src/store/index.js
@@ -3,51 +3,131 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     tasks: JSON.parse(localStorage.getItem('tasks') || '[]').map(task => {
-      if (new Date(task.date) < new Date()) {
-        task.status = 'outdated';
+      if (task.status == "active" && new Date(task.date) < new Date()) {
+        task.status = "outdated";
       }
 
       return task;
-    })
+    }),
+    lists: JSON.parse(localStorage.getItem('lists') || '[]'),
+
+    icons: ["fiber_new", "monetization_on", "work", "assignment", "favorite", "add_shopping_cart"],
+
+    // lists: [
+    //         { id: 1, title: "List 1", icon: "fiber_new", tasks: [1617574933864]},
+    //         { id: 2, title: "Finance", icon: "monetization_on", tasks: [1618331961444]},
+    //         { id: 3, title: "Work", icon: "work", tasks: [1617575867688, 1617574935120, 1618320657442]},
+    //         { id: 4, title: "Projects", icon: "assignment", tasks: [1618320657442]},
+    //         { id: 5, title: "Health", icon: "favorite", tasks: [1617574935120]},
+    //         { id: 6, title: "Shopping", icon: "add_shopping_cart", tasks: [1618331838965]},
+    //        ]
   },
   mutations: {
-    createTask(state, task) {
+    createTask(state, {listId, task}) {
       state.tasks.push(task);
+      state.lists.find(l => l.id == listId).tasks.push(task.id);
       localStorage.setItem('tasks', JSON.stringify(state.tasks));
+      localStorage.setItem('lists', JSON.stringify(state.lists));
     },
-    updateTask(state, {id, desc, date}) {
-      const tasks = state.tasks.concat();
 
-      const idx = tasks.findIndex(t => t.id === id);
-      const task = tasks[idx];
+    deleteTask(state, taskId) {
+      let tid = state.tasks.findIndex(t => t.id == taskId);
+      if (tid == -1) return;
 
-      const status = new Date(date) > new Date() ? 'active' : 'outdated';
+      state.tasks.splice(tid,1);
+      localStorage.setItem('tasks', JSON.stringify(state.tasks));
+
+      let list = state.lists.find(l => l.tasks.includes(taskId));
+      if (!list) return;
       
-      tasks[idx] = {...task, date, desc, status };
+      tid = list.tasks.findIndex(id => id == taskId);
+      if (tid == -1) return;
+
+      list.tasks.splice(tid,1);
+      localStorage.setItem('lists', JSON.stringify(state.lists));
+    },
 
+    updateTask(state, {id, title, desc, notesMD, status, isCompleted, tags, date }) {
+      const tasks = state.tasks.concat();
+      const idx = tasks.findIndex(t => t.id === id);
+      if (idx == -1) return;
+
+      const task = tasks[idx];
+      tasks[idx] = {...task, title, desc, notesMD, status, isCompleted, tags, date };
       state.tasks = tasks;
       localStorage.setItem('tasks', JSON.stringify(state.tasks));
     },
-    completeTask(state, id) {
+
+    createList(state, list) {      
+      list.icon = state.icons[Math.trunc(Math.random()*6)];
+      state.lists.push(list);
+      localStorage.setItem('lists', JSON.stringify(state.lists));
+    },
+
+    renameList(state, {id, title}) {
+      const idx = state.lists.findIndex(l => l.id == id);
+      if (idx == -1 || title.trim() === "") return;
+
+      state.lists.find(l => l.id == id).title = title;
+      localStorage.setItem('lists', JSON.stringify(state.lists));
+    },
+
+    deleteList(state, id) {
+      const idx = state.lists.findIndex(l => l.id == id);
+      if (idx == -1) return;
+
+      state.lists.splice(idx,1);
+      localStorage.setItem('lists', JSON.stringify(state.lists));
+    },
+
+    toggleCompleteStatus(state, id) {
       const idx = state.tasks.findIndex(t => t.id === id);
+      if (idx == -1) return;
+      
+      if (state.tasks[idx].status == "completed") {
+        state.tasks[idx].status = (new Date(state.tasks[idx].date) < new Date()) ? "outdated" : "active";
+      } else {
+        state.tasks[idx].status = "completed";
+      }
 
-      state.tasks[idx].status = 'completed';
+      state.tasks[idx].isCompleted = !state.tasks[idx].isCompleted;
       localStorage.setItem('tasks', JSON.stringify(state.tasks));
     }
   },
   actions: {
-    createTask({commit}, task) {
-      commit('createTask', task);
+    createTask({commit}, {listId, task}) {
+      commit('createTask', {listId, task});
+    },
+
+    deleteTask({commit}, taskId) {
+      commit('deleteTask', taskId);
     },
+
     updateTask({commit}, task) {
       commit('updateTask', task);
     },
-    completeTask({commit}, id) {
-      commit('completeTask', id);
+
+    createList({commit}, list) {
+      commit('createList', list);
+    },
+
+    renameList({commit}, {id, title}) {
+      commit('renameList', {id, title});
+    },
+
+    deleteList({commit}, id) {
+      commit('deleteList', id);
+    },
+    
+    toggleCompleteStatus({commit}, id) {
+      commit('toggleCompleteStatus', id);
     }
   },
   getters: {
     tasks: s => s.tasks,
-    taskById: s=> id => s.tasks.find(t => t.id === id)
+    taskById: s => id => s.tasks.find(t => t.id == id),
+    tasksFromListId: (s, getters) => id => s.lists.find(l => l.id == id).tasks.map(i => getters.taskById(i)),
+    lists: s => s.lists,
+    listById: s => id => s.lists.find(l => l.id == id),
   }
 })
diff --git a/todolist-app-5-v2/src/views/Create.vue b/todolist-app-5-v2/src/views/Create.vue
deleted file mode 100644
index 8083f40..0000000
--- a/todolist-app-5-v2/src/views/Create.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col s6 offset-s3">
-      <h1>Create task</h1>
-
-      <form @submit.prevent="submitHandler">
-        <div class="input-field">
-          <input v-model="title" id="title" type="text" class="validate" required>
-          <label for="title">Title</label>
-          <span class="helper-text" data-error="Title is required"></span>
-        </div>
-
-        <div class="chips" ref="chips"></div>
-
-        <div class="input-field">
-            <textarea v-model="desc" id="desc" class="materialize-textarea"></textarea>
-            <label for="desc">Description</label>
-            <span class="character-counter" style="float: right; font-size: 12px;">{{desc.length}}/1024</span>
-        </div>
-
-        <input type="text" ref="datepicker">
-
-        <button class="btn" type="submit">Create Task</button>
-      </form>
-    </div>
-    
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'create',
-  data: () => ({
-    desc: '',
-    title: '',
-    chips: null,
-    date: null
-  }),
-  mounted() {
-    this.chips = M.Chips.init(this.$refs.chips, {
-      placeholder: 'Task tags'
-    });
-
-    this.date = M.Datepicker.init(this.$refs.datepicker, {
-      format: 'dd.mm.yyyy',
-      defaultDate: new Date(),
-      setDefaultDate: true
-    });
-  },
-  methods: {
-    submitHandler() {
-      const task = {
-        title: this.title,
-        desc: this.desc,
-        id: Date.now(),
-        status: 'active',
-        tags: this.chips.chipsData,
-        date: this.date.date
-      }
-
-      console.log(this.chips.chipsData);
-      this.$store.dispatch('createTask', task);
-      this.$router.push('/list');
-    }
-  },
-  unmounted() {
-    if (this.date && this.date.destroy) {
-      this.date.destroy;
-    }
-
-    if (this.chips && this.chips.destroy) {
-      this.chips.destroy;
-    }
-  }
-}
-</script>
diff --git a/todolist-app-5-v2/src/views/EditTask.vue b/todolist-app-5-v2/src/views/EditTask.vue
new file mode 100644
index 0000000..0377321
--- /dev/null
+++ b/todolist-app-5-v2/src/views/EditTask.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="row">
+    <div v-if="task" class="col s6 offset-s3">
+      <form @submit.prevent="submitHandler">
+        <div class="input-field">
+          <input id="title" type="text" v-model="title" />
+          <label for="title">Title</label>
+        </div>
+
+        <div class="chips" ref="chips"></div>
+
+        <div class="input-field">
+          <textarea
+            style="min-height: 150px"
+            v-model="desc"
+            id="desc"
+            ref="desc"
+            class="materialize-textarea"
+            data-length="1000"
+          ></textarea>
+          <label for="desc">Description</label>
+        </div>
+
+        <ul ref="tabs" class="tabs">
+          <li class="tab">
+            <a class="active" href="#test-swipe-1">Notes (Markdown)</a>
+          </li>
+          <li class="tab"><a href="#test-swipe-2">Preview</a></li>
+        </ul>
+        <div id="test-swipe-1">
+          <div class="input-field">
+            <textarea
+              v-model="notesMD"
+              id="notes"
+              ref="notes"
+              class="materialize-textarea"
+              data-length="1000"
+            ></textarea>
+            <label for="notes">Notes</label>
+          </div>
+        </div>
+        <div id="test-swipe-2" :key="notesMD" v-markdown>{{ notesMD }}</div>
+
+        <input type="text" ref="datepicker" />
+
+        <div class="switch">
+          <label>
+            active
+            <input type="checkbox" v-model="isCompleted" />
+            <span class="lever"></span>
+            completed
+          </label>
+        </div>
+        <hr />
+        <button class="btn" type="submit">Update</button>
+        <button class="btn grey" type="button" @click="$router.go(-1)">
+          Cancel
+        </button>
+        <button class="btn red" type="button" @click="deleteTask">
+          Delete
+        </button>
+      </form>
+    </div>
+    <h5 v-else>Task not found!</h5>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    task() {
+      return this.$store.getters.taskById(+this.$route.params.id);
+    },
+  },
+  data() {
+    return {
+      title: "",
+      desc: "",
+      notesMD: "",
+      chips: null,
+      date: null,
+      isCompleted: false,
+    };
+  },
+  mounted() {
+    this.title = this.task.title;
+    this.desc = this.task.desc;
+    this.notesMD = this.task.notesMD;
+
+    this.chips = M.Chips.init(this.$refs.chips, {
+      placeholder: "Task tags",
+      data: this.task.tags,
+    });
+
+    this.date = M.Datepicker.init(this.$refs.datepicker, {
+      format: "dd.mm.yyyy",
+      defaultDate: new Date(this.task.date),
+      setDefaultDate: true,
+    });
+
+    this.isCompleted = this.task.isCompleted;
+
+    this.tabs = M.Tabs.init(this.$refs.tabs, {
+      duration: 200,
+      swipeable: false,
+    });
+
+    // M.updateTextFields();
+    setTimeout(() => {
+      M.updateTextFields();
+      M.CharacterCounter.init(this.$refs.desc);
+      M.CharacterCounter.init(this.$refs.notes);
+      M.textareaAutoResize(this.$refs.desc);
+      M.textareaAutoResize(this.$refs.notes);
+    }, 0);
+  },
+  methods: {
+    submitHandler() {
+      let newStatus = this.isCompleted
+        ? "completed"
+        : new Date(this.date.date) < new Date()
+        ? "outdated"
+        : "active";
+
+      this.$store.dispatch("updateTask", {
+        id: this.task.id,
+        title: this.title,
+        desc: this.desc,
+        notesMD: this.notesMD,
+        status: newStatus,
+        isCompleted: this.isCompleted,
+        tags: this.chips.chipsData,
+        date: this.date.date,
+      });
+      this.$router.go(-1);
+    },
+
+    deleteTask() {
+      this.$store.dispatch("deleteTask", this.task.id);
+      this.$router.go(-1);
+      M.toast({ html: "Task deleted!", displayLength: 2000 });
+    },
+  },
+  unmounted() {
+    if (this.date) {
+      this.date.destroy();
+    }
+
+    if (this.chips) {
+      this.chips.destroy();
+    }
+
+    if (this.tabs) {
+      this.tabs.destroy();
+    }
+  },
+};
+</script>
+
+<style>
+button {
+  margin-right: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/views/List.vue b/todolist-app-5-v2/src/views/List.vue
index 1fd1310..76f772e 100644
--- a/todolist-app-5-v2/src/views/List.vue
+++ b/todolist-app-5-v2/src/views/List.vue
@@ -1,82 +1,183 @@
 <template>
   <div>
-      <h1>List</h1>
+    <div v-if="list">
       <div class="row">
-        <div class="input-field col s6">
-          <select ref="select" v-model="filter">
-            <option value="" disabled selected>Choose your option</option>
-            <option value="active">Active</option>
-            <option value="outdated">Outdated</option>
-            <option value="completed">Completed</option>
-          </select>
-          <label>Status filter</label>
+        <h3>
+          <i class="small material-icons">{{ list.icon }}</i>
+          {{ list.title }}
+          <span v-if="$route.name != 'all-tasks'">
+            [{{ list.tasks.length }}]
+            <button class="btn btn-small" @click="renameList">
+              <i class="small material-icons">edit</i>
+            </button>
+            <button class="btn btn-small red" @click="deleteList">
+              <i class="small material-icons">delete</i>
+            </button>
+          </span>
+        </h3>
+
+        <div class="col l6">
+          <div v-if="$route.name != 'all-tasks'">
+            <strong>Quick add task:</strong>
+            <div class="input-field">
+              <input
+                id="title"
+                type="text"
+                v-model="addTaskTitle"
+                @keyup.enter="quickAddTask"
+              />
+              <label for="title">Enter task title and press enter key</label>
+            </div>
+          </div>
+
+          <strong>Toggle view style: </strong>
+          <a class="waves-effect waves-light btn" @click="toggleView">
+            <i class="material-icons left">view_list</i>
+            <i class="material-icons left">&sol; &nbsp; view_module</i>
+          </a>
         </div>
-      </div>
 
-      <button v-if="filter" class="btn btn-small red" @click="filter = null">Clear filter</button>
-
-      <hr>
-
-      <table v-if="tasks.length">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Title</th>
-            <th>Date</th>
-            <th>Description</th>
-            <th>Status</th>
-            <th>Open</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(task, index) of displayTasks" :key="task.id">
-            <td>{{index + 1}}</td>
-            <td>{{task.title}}</td>
-            <td>{{new Date(task.date).toLocaleDateString()}}</td>
-            <td><div class="text">{{task.desc}}</div></td>
-            <td>{{task.status}}</td>
-            <td>
-              <router-link tag="button" class="btn btn-small" :to="'/task/' + task.id">
-                Open
-              </router-link>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p v-else>No tasks</p>
+        <div class="col l6">
+          <p>
+            <strong>Filter by status: </strong>
+            <a href="#" @click.prevent="changeFilter('')">All</a> |
+            <a href="#" @click.prevent="changeFilter('active')">Active</a> |
+            <a href="#" @click.prevent="changeFilter('outdated')">Outdated</a> |
+            <a href="#" @click.prevent="changeFilter('completed')">Completed</a>
+          </p>
+          <div>
+            <strong>Filter by text (in title or description):</strong>
+            <div class="input-field">
+              <input id="filter" type="text" v-model.trim="filterText" />
+              <label for="filter">Enter text for search/filter</label>
+            </div>
+          </div>
+
+          <strong>{{ currentFilters }} </strong>
+          <a
+            href="#"
+            @click.prevent="resetFilters()"
+            v-if="filterText || filterStatus"
+          >
+            Reset</a
+          >
+        </div>
+      </div>
+      <Tasks
+        :filter-status="filterStatus"
+        :filter-text="filterText"
+        :view-style="isCardsView"
+      />
+    </div>
+    <div v-else>List not found! Please select the list in the left panel.</div>
   </div>
 </template>
 
 <script>
+import Tasks from "@/components/Tasks";
 export default {
-  data: () => ({
-    filter: null,
-  }),
+  data() {
+    return {
+      addTaskTitle: "",
+      filterStatus: "",
+      filterText: "",
+      isCardsView: false,
+    };
+  },
+  components: {
+    Tasks,
+  },
   computed: {
-    tasks() {
-      return this.$store.getters.tasks;
+    list() {
+      if (this.$route.name == "all-tasks")
+        return { title: "All Tasks", icon: "format_list_bulleted" };
+      else return this.$store.getters.listById(this.$route.params.id);
+    },
+
+    currentFilters() {
+      return this.filterStatus || this.filterText
+        ? `Current filters: ${this.filterStatus || "all"} ${
+            !this.filterText ? "" : "+ text: '" + this.filterText + "'"
+          }`
+        : "";
     },
-    displayTasks() {
-      return this.tasks.filter(t => {
-        if (!this.filter) {
-          return true
-        }
-
-        return t.status === this.filter;
-      })
-    }
   },
-  mounted() {
-    M.FormSelect.init(this.$refs.select);
-  }
-}
+  methods: {
+    quickAddTask() {
+      const task = {
+        title: this.addTaskTitle,
+        desc: "",
+        notesMD: "",
+        id: Date.now(),
+        status: "active",
+        isCompleted: false,
+        tags: "",
+        date: Date.now(),
+      };
+
+      this.$store.dispatch("createTask", {
+        listId: this.$route.params.id,
+        task,
+      });
+      this.addTaskTitle = "";
+    },
+
+    renameList() {
+      const newTitle = prompt(
+        "Enter new title (maximum of 30 characters):",
+        this.list.title
+      );
+
+      if (newTitle.length > 30) {
+        alert("You input " + newTitle.length + " characters. Maximum - 30.");
+      }
+
+      if (
+        newTitle === this.list.title ||
+        newTitle.trim() === "" ||
+        newTitle.length > 30
+      ) {
+        return;
+      }
+
+      this.$store.dispatch("renameList", {
+        id: this.$route.params.id,
+        title: newTitle,
+      });
+    },
+
+    deleteList() {
+      if (
+        confirm(
+          "Do you really want to delete this list? \
+        \nTasks will remain in the general list (All tasks)."
+        )
+      ) {
+        this.$store.dispatch("deleteList", this.$route.params.id);
+        this.resetFilters();
+        this.$router.push("/all-tasks/");
+        M.toast({ html: "List deleted!", displayLength: 2000 });
+      }
+    },
+
+    changeFilter(filter) {
+      this.filterStatus = filter;
+    },
+
+    resetFilters() {
+      this.filterStatus = "";
+      this.filterText = "";
+    },
+
+    toggleView() {
+      this.isCardsView = !this.isCardsView;
+    },
+  },
+};
 </script>
 
 <style>
-  .text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 400px;
-  }
+button {
+  margin: 0px 3px;
+}
 </style>
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/views/ListNotSelected.vue b/todolist-app-5-v2/src/views/ListNotSelected.vue
new file mode 100644
index 0000000..cc21886
--- /dev/null
+++ b/todolist-app-5-v2/src/views/ListNotSelected.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <span>List not selected.</span> <br />
+    <span
+      >Please select the list in the left panel. Or open list "All tasks"</span
+    >
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/todolist-app-5-v2/src/views/Task.vue b/todolist-app-5-v2/src/views/Task.vue
deleted file mode 100644
index 482a651..0000000
--- a/todolist-app-5-v2/src/views/Task.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="row">
-    <div v-if="task" class="col s6 offset-s3">
-      <h1>{{task.title}}</h1>
-
-      <form @submit.prevent="submitHandler">
-
-        <div class="chips" ref="chips"></div>
-
-        <div class="input-field">
-            <textarea style="min-height: 150px;" v-model="desc" id="desc" class="materialize-textarea"></textarea>
-            <label for="desc">Description</label>
-            <span class="character-counter" style="float: right; font-size: 12px;">{{desc.length}}/1024</span>
-        </div>
-
-        <input type="text" ref="datepicker">
-
-        <div v-if="task.status !== 'completed'">
-          <button class="btn" type="submit" style="margin-right: 1rem;">Update</button>
-          <button class="btn blue" type="button" @click="completeTask">Complete task</button>
-        </div>
-      </form>
-    </div>
-    <h5 v-else>Task not found!</h5>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    task() {
-      return this.$store.getters.taskById(+this.$route.params.id);
-    }
-  },
-  data: () => ({
-    desc: '',
-    chips: null,
-    date: null
-  }),
-  mounted() {
-    this.desc = this.task.desc;
-    this.chips = M.Chips.init(this.$refs.chips, {
-      placeholder: 'Task tags',
-      data: this.task.tags,
-    });
-    this.date = M.Datepicker.init(this.$refs.datepicker, {
-      format: 'dd.mm.yyyy',
-      defaultDate: new Date(this.task.date),
-      setDefaultDate: true
-    });
-    setTimeout(() => {
-      M.updateTextFields()
-    }, 0)
-  },
-  methods: {
-    submitHandler() {
-      this.$store.dispatch('updateTask', {
-        id: this.task.id,
-        desc: this.desc,
-        date: this.date.date
-      });
-      this.$router.push('/list');
-    },
-    completeTask() {
-      this.$store.dispatch('completeTask', this.task.id);
-      this.$router.push('/list');
-    }
-  },
-  unmounted() {
-    if (this.date && this.date.destroy) {
-      this.date.destroy;
-    }
-
-    if (this.chips && this.chips.destroy) {
-      this.chips.destroy;
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/todolist-app-5-v2/vue.config.js b/todolist-app-5-v2/vue.config.js
deleted file mode 100644
index afcefef..0000000
--- a/todolist-app-5-v2/vue.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  publicPath: process.env.NODE_ENV === 'production'
-    ? './'
-    : 'http://localhost:8080/'
-}
\ No newline at end of file