diff --git a/README.md b/README.md
index 8a94593..77cff1e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,28 @@
-# TaskManager
-A small application written to demonstrate basic kubernetes concepts
+## About TaskManager
+
+TaskManager is an application that allows you to create lists and add tasks to that list which you can then mark as done when it's done. It is written primarily for demonstrating microservice architecture and kubernetes. It can be used as a _sample or reference_ project for building similar projects. The backend is written in *Python* using the *Flask* lightweight web framework. It uses *Flask-SQLAlchemy* for the ORM and it uses *Alembic* migration tool which is built on top of SQLAlchemy. The UI is written in *Vue.js* and the state management is handled using *Vuex*. The router is handled using *vue-router*. 
+
+## Screenshots
+
+- Creating a list
+
+[![create_list.gif](https://s1.gifyu.com/images/create_list.gif)](https://gifyu.com/image/eIPA)
+
+- Deleting a list
+
+[![delete_list.gif](https://s1.gifyu.com/images/delete_list.gif)](https://gifyu.com/image/eIXI)
+
+## Installation
+
+- Install docker if you don't already have it.
+- Install minikube if you don't already have it.
+- run ```minikube start``` to start the cluster
+- run ```minikube ip``` to get the node's IP address
+- open `/etc/hosts` file and add an entry ```{minikube_ip} taskmanagerbackend```. Replace `{minikube_ip}` with the ip we found with ```minikube ip``` command
+- clone the repository
+- run ```sh deploy.sh``` and it should deploy the application to minikube
+- to access the application, go to `http://taskmanagerbackend:8080`
+
+## If the installation steps didn't work
+
+Please create an issue on the repository
diff --git a/frontend/taskmanager/src/assets/list.png b/frontend/taskmanager/src/assets/list.png
index 82cd93f..21d1a14 100644
Binary files a/frontend/taskmanager/src/assets/list.png and b/frontend/taskmanager/src/assets/list.png differ
diff --git a/frontend/taskmanager/src/assets/stylesheets/_base.scss b/frontend/taskmanager/src/assets/stylesheets/_base.scss
index 267bfef..1788dcc 100644
--- a/frontend/taskmanager/src/assets/stylesheets/_base.scss
+++ b/frontend/taskmanager/src/assets/stylesheets/_base.scss
@@ -2,6 +2,8 @@ $primary_color: #72a5cf;
 $primary_color_dark_1: #5f8aad;
 $secondary_color: white;
 $accent: black;
+$warning_red: #cf274b;
+$warning_red_dark_1: #ad2340;
 $screen_width: 1960px;
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
diff --git a/frontend/taskmanager/src/components/ListEntry.vue b/frontend/taskmanager/src/components/ListEntry.vue
index b1121aa..fd5f339 100644
--- a/frontend/taskmanager/src/components/ListEntry.vue
+++ b/frontend/taskmanager/src/components/ListEntry.vue
@@ -1,19 +1,42 @@
 <template>
-	<div class="list_entry" >
+	<div v-bind:class="[current_list_selected ? 'list_entry_selected' : 'list_entry']" 
+	@click="selectList" >
 		<img src="../assets/list.png" class="list_image" />
 		<div class="list_text" >{{ value }}</div>
 	</div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
 	name: "list-entry",
 	data () {
-		return {}
+		return {
+			current_list_selected: 0
+		}
 	},
 	props: [
-		"value"
-	]
+		"value",
+		"list_id"
+	],
+	computed: {
+		...mapState(['selected_list'])
+	},
+	watch: {
+		selected_list () {
+			if (this.list_id == this.$store.state.selected_list.id) {
+				this.current_list_selected = 1;
+			} else {
+				this.current_list_selected = 0;
+			}
+		}
+	},
+	methods: {
+		selectList: function () {
+			this.$store.commit("select_list", {id: this.list_id, name: this.value});
+			this.$router.push('/list/selected');
+		}
+	}
 }
 </script>
 
@@ -28,6 +51,17 @@ export default {
 	height: 35px;
 	display: block;
 	margin-top: 15px;
+	cursor: pointer;
+}
+
+.list_entry_selected {
+	background-color: $secondary_color;
+	color: $accent;
+	width: 100%;
+	height: 35px;
+	display: block;
+	margin-top: 15px;
+	cursor: pointer;
 }
 
 .list_image {
@@ -41,7 +75,7 @@ export default {
 
 .list_text {
 	background: inherit;
-	color: white;
+	color: inherit;
 	padding-left: 15px;
 	line-height: 35px;
 	vertical-align: middle;
@@ -49,4 +83,8 @@ export default {
 	font-size: 18px;
 	font-family: 'Roboto', sans-serif;
 }
+
+.list_entry:hover {
+	background-color: $primary_color_dark_1;
+}
 </style>
diff --git a/frontend/taskmanager/src/components/ListSelected.vue b/frontend/taskmanager/src/components/ListSelected.vue
new file mode 100644
index 0000000..652195d
--- /dev/null
+++ b/frontend/taskmanager/src/components/ListSelected.vue
@@ -0,0 +1,67 @@
+<template>
+	<list-window :title="selected_list.name" >
+		<button class="red_button" @click="deleteList" >Delete</button>	
+	</list-window>
+</template>
+
+<script>
+import ListWindow from "./ListWindow";
+import { baseUrl, listsUri, backendPort } from "../util/apiUtil";
+import { mapState } from "vuex";
+
+export default {
+	name: 'list-selected',
+	data () {
+		return {}
+	},
+	computed: {
+		...mapState(['selected_list'])
+	},
+	methods: {
+		deleteList: function () {
+			fetch("http://" + baseUrl + backendPort + listsUri +
+			"/" + this.selected_list.id, {
+				method: "DELETE"
+			})
+			.then((res) => { return res.json(); })
+			.then((data) => {
+				if (data.message.includes("List deleted")) {
+					this.$store.commit('trigger_fetch_lists')
+					this.$router.push('/list/create')
+					console.log("deleted");
+				}
+			})
+			.catch((error) => { console.log(error); });
+			
+		}
+	},
+	components: {
+		ListWindow
+	}
+}
+</script>
+
+<style lang="scss" >
+@import "../assets/stylesheets/base";
+
+.red_button {
+	padding: 5px;
+	background-color: $warning_red;
+	color: $secondary_color;
+	width: 15%;
+	height: 35px;
+	font-family: 'Roboto', sans-serif;
+	font-size: 18px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 15px;
+	margin-bottom: 15px;
+	border: none;
+	outline: none; 
+}
+
+.red_button:hover {
+	background-color: $warning_red_dark_1;
+}
+</style>
diff --git a/frontend/taskmanager/src/components/ListsColumn.vue b/frontend/taskmanager/src/components/ListsColumn.vue
index 9b16b21..92cdf1e 100644
--- a/frontend/taskmanager/src/components/ListsColumn.vue
+++ b/frontend/taskmanager/src/components/ListsColumn.vue
@@ -5,7 +5,8 @@
 		<div class="your_list" >Your lists
 			<button class="add_list_button" @click="triggerFetchLists" >+</button>
 		</div>
-		<list-entry v-for="list in lists" :key="list" :value="list" />
+		<list-entry v-for="list in lists" :key="list"
+			:list_id="list.id" :value="list.name" />
 	</div>
 </template>
 
@@ -48,7 +49,7 @@ export default {
 			.then((res) => { return res.json(); })
 			.then((data) => {
 				data.lists.forEach((list) => {
-					this.lists.push(list.name);
+					this.lists.push(list);
 				});
 			})
 			.catch((error) => { console.log(error); });
@@ -69,7 +70,7 @@ export default {
 .lists_container {
 	background-color: $primary_color;
 	color: $secondary_color;
-	width: 100vw * (25 / 100);
+	width: 100% * (25 / 100);
 	min-height: 100vh;
 	float:left;
 }
diff --git a/frontend/taskmanager/src/router.js b/frontend/taskmanager/src/router.js
index 4e0f749..e76560e 100644
--- a/frontend/taskmanager/src/router.js
+++ b/frontend/taskmanager/src/router.js
@@ -1,9 +1,11 @@
 import { createRouter, createWebHistory } from "vue-router"
 import ListCreate from "./components/ListCreate"
+import ListSelected from "./components/ListSelected"
 
 export const router = createRouter({
 	history: createWebHistory(),
 	routes: [
-		{ path: '/list/create', component: ListCreate }
+		{ path: '/list/create', component: ListCreate },
+		{ path: '/list/selected', component: ListSelected }
 	]
 });
diff --git a/frontend/taskmanager/src/store.js b/frontend/taskmanager/src/store.js
index d3522de..a3ee8c5 100644
--- a/frontend/taskmanager/src/store.js
+++ b/frontend/taskmanager/src/store.js
@@ -3,7 +3,11 @@ import { createStore } from "vuex";
 export const store = createStore({
 	state () {
 		return {
-			fetch_lists: 0
+			fetch_lists: 0,
+			selected_list: {
+				id: 0,
+				name: ""
+			}
 		}
 	},
 	mutations: {	
@@ -12,6 +16,9 @@ export const store = createStore({
 		},
 		stop_fetch_lists (state) {
 			state.fetch_lists = 0
+		},
+		select_list (state, selected_list_object) {
+			state.selected_list = selected_list_object
 		}
 	}
 });