diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
new file mode 100644
index 00000000..93d6c6c4
--- /dev/null
+++ b/models/doctype/Kanban/Kanban.js
@@ -0,0 +1,40 @@
+module.exports = {
+  name: 'Kanban',
+  doctype: 'DocType',
+  naming: 'random',
+  keywordFields: ['kanbanname', 'referencedoctype', 'sortby'],
+  fields: [
+    {
+      fieldname: 'kanbanname',
+      label: 'Kanban Name',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'referencedoctype',
+      label: 'Reference Doctype',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'sortby',
+      label: 'Sort By',
+      fieldtype: 'Select',
+      options: [],
+      required: 1
+    },
+    {
+      fieldname: 'lists',
+      label: 'Lists',
+      fieldtype: 'Table',
+      childtype: 'KanbanList'
+    },
+    {
+      fieldname: 'titlefield',
+      label: 'Title Field for Cards',
+      fieldtype: 'Select',
+      options: [],
+      required: 1
+    }
+  ]
+};
diff --git a/models/doctype/KanbanCard/KanbanCard.js b/models/doctype/KanbanCard/KanbanCard.js
new file mode 100644
index 00000000..037a01a7
--- /dev/null
+++ b/models/doctype/KanbanCard/KanbanCard.js
@@ -0,0 +1,44 @@
+module.exports = {
+  name: 'KanbanCard',
+  doctype: 'DocType',
+  naming: 'random',
+  keywordFields: ['cardtitle', 'carddescription', 'assignee'],
+  titleField: 'cardtitle',
+  fields: [
+    {
+      fieldname: 'cardtitle',
+      label: 'Card Title',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'listname',
+      label: 'Add To List',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'boardname',
+      label: 'Kanban board',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'referencedoctype',
+      label: 'Reference Doctype Name',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'carddescription',
+      label: 'Card Description',
+      fieldtype: 'Text'
+    },
+    {
+      fieldname: 'assignee',
+      label: 'Assignee',
+      fieldtype: 'Link',
+      target: 'User'
+    }
+  ]
+};
diff --git a/models/doctype/KanbanList/KanbanList.js b/models/doctype/KanbanList/KanbanList.js
new file mode 100644
index 00000000..4b25838b
--- /dev/null
+++ b/models/doctype/KanbanList/KanbanList.js
@@ -0,0 +1,19 @@
+module.exports = {
+  name: 'KanbanList',
+  doctype: 'DocType',
+  isChild: 1,
+  naming: 'random',
+  fields: [
+    {
+      label: 'List Name',
+      fieldname: 'listname',
+      fieldtype: 'Data'
+    },
+    {
+      label: 'Archived',
+      fieldname: 'archived',
+      fieldtype: 'Int',
+      default: 0
+    }
+  ]
+};
diff --git a/models/index.js b/models/index.js
index 4e0abb23..16f912d1 100644
--- a/models/index.js
+++ b/models/index.js
@@ -1,17 +1,20 @@
 module.exports = {
-    models: {
-        FilterItem: require('./doctype/FilterItem/FilterItem.js'),
-        FilterGroup: require('./doctype/FilterGroup/FilterGroup.js'),
-        FilterSelector: require('./doctype/FilterSelector/FilterSelector.js'),
-        NumberSeries: require('./doctype/NumberSeries/NumberSeries.js'),
-        PrintFormat: require('./doctype/PrintFormat/PrintFormat.js'),
-        Role: require('./doctype/Role/Role.js'),
-        Session: require('./doctype/Session/Session.js'),
-        SingleValue: require('./doctype/SingleValue/SingleValue.js'),
-        SystemSettings: require('./doctype/SystemSettings/SystemSettings.js'),
-        ToDo: require('./doctype/ToDo/ToDo.js'),
-        User: require('./doctype/User/User.js'),
-        UserRole: require('./doctype/UserRole/UserRole.js'),
-        File: require('./doctype/File/File.js'),
-    }
-}
+  models: {
+    FilterItem: require('./doctype/FilterItem/FilterItem.js'),
+    FilterGroup: require('./doctype/FilterGroup/FilterGroup.js'),
+    FilterSelector: require('./doctype/FilterSelector/FilterSelector.js'),
+    NumberSeries: require('./doctype/NumberSeries/NumberSeries.js'),
+    PrintFormat: require('./doctype/PrintFormat/PrintFormat.js'),
+    Role: require('./doctype/Role/Role.js'),
+    Session: require('./doctype/Session/Session.js'),
+    SingleValue: require('./doctype/SingleValue/SingleValue.js'),
+    SystemSettings: require('./doctype/SystemSettings/SystemSettings.js'),
+    ToDo: require('./doctype/ToDo/ToDo.js'),
+    User: require('./doctype/User/User.js'),
+    UserRole: require('./doctype/UserRole/UserRole.js'),
+    File: require('./doctype/File/File.js'),
+    Kanban: require('./doctype/Kanban/Kanban.js'),
+    KanbanList: require('./doctype/KanbanList/KanbanList.js'),
+    KanbanCard: require('./doctype/KanbanCard/KanbanCard.js')
+  }
+};
diff --git a/ui/components/Form/Form.vue b/ui/components/Form/Form.vue
index e9ac15f0..fe3d5372 100644
--- a/ui/components/Form/Form.vue
+++ b/ui/components/Form/Form.vue
@@ -56,7 +56,10 @@ export default {
     try {
       this.doc = await frappe.getDoc(this.doctype, this.name);
 
-      if (this.doc._notInserted && this.meta.fields.map(df => df.fieldname).includes('name')) {
+      if (
+        this.doc._notInserted &&
+        this.meta.fields.map(df => df.fieldname).includes('name')
+      ) {
         // For a user editable name field,
         // it should be unset since it is autogenerated
         this.doc.set('name', '');
@@ -89,7 +92,6 @@ export default {
         }
 
         this.$emit('save', this.doc);
-
       } catch (e) {
         console.error(e);
         return;
diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue
index 58048f5f..e4ac6d05 100644
--- a/ui/components/Form/FormLayout.vue
+++ b/ui/components/Form/FormLayout.vue
@@ -26,7 +26,6 @@ export default {
     const dataObj = {};
     for (let df of this.fields) {
       dataObj[df.fieldname] = this.doc[df.fieldname];
-
       if (df.fieldtype === 'Table' && !dataObj[df.fieldname]) {
         dataObj[df.fieldname] = [];
       }
@@ -80,15 +79,17 @@ export default {
 
       if (!layout) {
         const fields = this.fields.map(df => df.fieldname);
-        layout = [{
-          columns: [{ fields }]
-        }];
+        layout = [
+          {
+            columns: [{ fields }]
+          }
+        ];
       }
 
       if (Array.isArray(layout)) {
         layout = {
           sections: layout
-        }
+        };
       }
       return layout;
     }
diff --git a/ui/components/Kanban/CreateKanbanModal.vue b/ui/components/Kanban/CreateKanbanModal.vue
new file mode 100644
index 00000000..46224301
--- /dev/null
+++ b/ui/components/Kanban/CreateKanbanModal.vue
@@ -0,0 +1,194 @@
+<template>
+  <custom-modal v-if="showCreateKanbanModal" :header="'Create Kanban for' + refdoctype" @closeModal="closeCreateKanbanModal">
+    <form>
+      <div :key="key" v-for="(field,key) in fields">
+        <label>
+          {{field.label}}
+          <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
+          <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata[field.fieldname]" @change="updateLists">
+            <option v-for="(option) in options[field.fieldname]" :key="option" :value="option">
+              {{option}}
+            </option>
+          </select>
+        </label>
+      </div>
+      <div>
+        <button class="btn btn-primary btn-lg" @click="submit" type="submit" value="submit" :disabled="submitdisabled">
+          submit
+        </button>
+      </div>
+    </form>
+  </custom-modal>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import FormLayout from '../Form/FormLayout';
+import Observable from '../../../utils/observable';
+import CustomModal from './CustomModal';
+
+export default {
+  name: 'CreateKanbanModal',
+  props: ['refdoctype', 'showCreateKanbanModal'],
+  components: {
+    CustomModal
+  },
+  data() {
+    return {
+      configdata: {
+        kanbanname: '',
+        referencedoctype: this.refdoctype,
+        sortby: '',
+        lists: [],
+        titlefield: ''
+      }
+    };
+  },
+  created() {
+    this.doc = new Observable();
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta('Kanban');
+    },
+    fields() {
+      console.log(this.meta.fields);
+      return this.meta.fields;
+    },
+    fieldtypes() {
+      return {
+        Select: 'select',
+        Data: 'text',
+        Table: 'table'
+      };
+    },
+    options() {
+      const refdoctypemeta = frappe.getMeta(this.refdoctype);
+      const options = {
+        sortby: [],
+        titlefield: []
+      };
+      refdoctypemeta.fields.forEach(field => {
+        if (field.fieldtype === 'Select') options.sortby.push(field.fieldname);
+        else if (field.fieldtype === 'Data')
+          options.titlefield.push(field.fieldname);
+      });
+      return options;
+    },
+    disabled() {
+      return field => {
+        return field.fieldname === 'referencedoctype' ? true : false;
+      };
+    },
+    submitdisabled() {
+      let isInvalid = false;
+      const configFields = Object.keys(this.configdata);
+      configFields.forEach(field => {
+        if (this.configdata[field] === '') isInvalid = true;
+      });
+      return isInvalid;
+    }
+  },
+  methods: {
+    async submit(e) {
+      e.preventDefault();
+      const newDoc = await frappe.getNewDoc('Kanban');
+      console.log('here', newDoc);
+      Object.keys(this.configdata).forEach(field => {
+        newDoc[field] = this.configdata[field];
+      });
+      newDoc._meta.fields.forEach(field => {
+        if (field.fieldtype === 'Select') field.options = this.options;
+      });
+      console.log('newdoc', newDoc);
+      newDoc.insert();
+      this.initCards();
+      this.closeCreateKanbanModal();
+    },
+    async updateLists() {
+      const refdoctypemeta = await frappe.getMeta(this.refdoctype);
+      const sortField = refdoctypemeta.fields.find(
+        field =>
+          field.fieldtype === 'Select' &&
+          field.fieldname === this.configdata.sortby
+      );
+      const columns = sortField.options.map(column => {
+        const newColumn = frappe.getNewDoc('KanbanList');
+        return newColumn.then(doc => {
+          doc.listname = column;
+          doc.archived = false;
+          return doc;
+        });
+      });
+      console.log(columns);
+      Promise.all(columns).then(kanbanColumns => {
+        console.log(kanbanColumns);
+        this.configdata.lists = kanbanColumns;
+        console.log(this.configdata.lists);
+      });
+    },
+    async initCards() {
+      const refdoctypemeta = await frappe.getMeta(this.refdoctype);
+      const refdoctypefields = refdoctypemeta.fields.map(
+        field => field.fieldname
+      );
+      console.log('refdoctypefields', refdoctypefields);
+      const allItems = await frappe.db.getAll({
+        doctype: this.refdoctype,
+        fields: ['name', ...refdoctypefields]
+      });
+      console.log('allitems', allItems);
+      console.log(this.configdata.kanbanname);
+      const board = await frappe.db.getAll({
+        doctype: 'Kanban',
+        fields: ['name'],
+        filters: { kanbanname: this.configdata.kanbanname }
+      });
+      console.log(board);
+      allItems.forEach(item => {
+        const newCard = frappe.getNewDoc('KanbanCard');
+        newCard.then(doc => {
+          doc.boardname = board[0].name;
+          doc.referencedoctype = this.configdata.referencedoctype;
+          doc.listname = item[this.configdata.sortby];
+          doc.cardtitle = item[this.configdata.titlefield];
+          doc.insert();
+        });
+      });
+    },
+    closeCreateKanbanModal() {
+      this.showCreateKanbanModal = false;
+    }
+  }
+};
+</script>
+
+<style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  max-width: 80%;
+  min-height: 30%;
+  background-color: white;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+
+.modal-body {
+  display: block;
+}
+</style>
diff --git a/ui/components/Kanban/CustomModal.vue b/ui/components/Kanban/CustomModal.vue
new file mode 100644
index 00000000..f1a82249
--- /dev/null
+++ b/ui/components/Kanban/CustomModal.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="modal-mask">
+        <div class="modal-wrapper">
+            <div class="modal-container">
+                <h3 class="modal-header">
+                    {{header}}
+                </h3>
+                <div class="modal-body">
+                    <slot></slot>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-danger" @click="$emit('closeModal')">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomModal',
+  props: ['header']
+};
+</script>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  max-width: 80%;
+  min-height: 30%;
+  background-color: white;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+
+.modal-body {
+  display: block;
+}
+</style>
+
diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
new file mode 100644
index 00000000..2a402409
--- /dev/null
+++ b/ui/components/Kanban/Kanban.vue
@@ -0,0 +1,307 @@
+<template>
+  <div v-if="kanban !== null" class="kanban-container">
+    <div class="kanban-list" v-for="list in kanban.lists" v-if="!list.archived" :id="list.listname" :key="list.listname" v-on:dragover="dragover" v-on:drop="drophandler">
+      <list-actions :doctype="list.listname" :showDelete="checklist.length" @delete="deleteCards" :showNew="false" :showArchive="true" @archiveList="archiveList(list.listname)" />
+      <ul class="list-group">
+        <div v-for="card in cards" :key="card.cardtitle" v-if="card.listname === list.listname" :name="card.name" draggable="true" v-on:dragstart="dragstart">
+          <list-item v-if="card.listname === list.listname" :id="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)" @clickItem="displayCardDetails(card.name)">
+            <span class="card-title">{{card.cardtitle}}</span>
+          </list-item>
+        </div>
+        <button class="btn btn-lg" @click="addCard" :listname="list.listname">Add a card</button>
+      </ul>
+    </div>
+    <div>
+      <button class="btn btn-lg btn-block mt-16" @click="addList">Add a List</button>
+    </div>
+    <custom-modal v-if="showCreateListModal" @closeModal="closeCreateListModal" header="Create List">
+      <form @submit.prevent="onSubmit">
+        <label for="listname">
+          List Name
+          <input class="form-control" type="text" name="listname" v-model="newListName" required />
+        </label>
+        <input class="btn btn-primary" type="submit" value="submit" />
+      </form>
+    </custom-modal>
+    <custom-modal v-if="showCreateCardModal" @closeModal="closeCreateCardModal" header="Create Card">
+      <form @submit.prevent="onCardSubmit">
+        <label for="card">
+          Card Name
+          <input class="form-control" type="text" name="cardname" v-model="cardconfig['cardname']" required />
+        </label>
+        <label for="listname">
+          List Name
+          <input class="form-control" type="text" name="listname" v-model="cardconfig['listname']" value="cardconfig['listname']" disabled />
+        </label>
+        <input class="btn btn-primary" type="submit" value="submit" />
+      </form>
+    </custom-modal>
+    <custom-modal v-if="showCardInfoModal" @closeModal="closeCardInfoModal" header="Card Details">
+      <form-actions class="p-3 border-bottom" v-if="currentCard !== null" :doc="currentCard" @save="saveCardChanges" @submit="submitCardChanges" :links="links" @revert="revert" @print="print" />
+      <form-layout class="p-3" :doc="currentCard" :fields="cardmeta.fields" :layout="cardmeta.layout" v-if="currentCard !== null" />
+    </custom-modal>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import CustomModal from './CustomModal';
+import ListItem from '../List/ListItem';
+import ListActions from '../List/ListActions';
+import FormLayout from '../Form/FormLayout';
+import FormActions from '../Form/FormActions';
+
+export default {
+  name: 'Kanban',
+  components: {
+    CustomModal,
+    ListItem,
+    ListActions,
+    FormLayout,
+    FormActions
+  },
+  data: function() {
+    return {
+      kanban: null,
+      draggedItemName: '',
+      doctype: 'Kanban',
+      cards: [],
+      showCreateListModal: false,
+      newListName: '',
+      showCreateCardModal: '',
+      cardconfig: {
+        listname: '',
+        cardname: '',
+        carddescription: ''
+      },
+      checklist: [],
+      showCardInfoModal: false,
+      currentCard: null,
+      links: []
+    };
+  },
+  computed: {
+    name() {
+      return this.$route.params.name;
+    },
+    cardmeta() {
+      return frappe.getMeta('KanbanCard');
+    },
+    fields() {
+      return this.cardmeta.fields.map(field => field.fieldname);
+    },
+    referencedoctypemeta() {
+      return frappe.getMeta(this.kanban.referencedoctype);
+    },
+    referencedoctypefields() {
+      return this.referencedoctypemeta.fields.map(field => field.fieldname);
+    }
+  },
+  filters: {
+    capitalize(value) {
+      if (!value) return '';
+      value = value.toString();
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+  },
+  created() {
+    frappe.db.on(`change:${this.doctype}`, () => {
+      this.initKanbanBoard();
+    });
+    frappe.db.on(`change:KanbanCard`, () => {
+      this.getCards();
+    });
+  },
+  mounted() {
+    this.initKanbanBoard();
+  },
+  methods: {
+    dragstart: function(e) {
+      console.log('hereh', e);
+      e.dataTransfer.effectAllowed = 'move';
+      let attribute, draggedItemName;
+      draggedItemName = e.target.getAttribute('name');
+      this.draggedItemName = draggedItemName;
+      console.log(this.draggedItemName);
+    },
+    drophandler: function(e) {
+      const destinationListName = e.target.id;
+      const draggedItem = this.cards.filter(
+        card => card.name === this.draggedItemName
+      )[0];
+      draggedItem.listname = destinationListName;
+      this.updateItem(destinationListName);
+    },
+    dragover: function(e) {
+      e.preventDefault();
+    },
+    async updateItem(destinationListName) {
+      console.log(this.draggedItemName);
+      const sourceItem = await frappe.getDoc(
+        'KanbanCard',
+        this.draggedItemName
+      );
+      sourceItem.listname = destinationListName;
+      sourceItem.update();
+    },
+    onSubmit: function() {
+      console.log(this.doctype, this.field);
+      if (this.doctype === 'ToDo') this.updateListsForTodos();
+      else if (this.doctype === 'Party') this.updateListsForParty();
+    },
+    async initKanbanBoard() {
+      const kanban = await frappe.getDoc(this.doctype, this.name);
+      this.kanban = kanban;
+      this.getCards();
+    },
+    async getCards() {
+      const allCards = await frappe.db.getAll({
+        doctype: 'KanbanCard',
+        filters: { boardname: this.name },
+        fields: [...this.fields, 'name']
+      });
+      this.cards = allCards;
+      console.log(this.cards);
+    },
+    addList() {
+      console.log('adding list');
+      this.showCreateListModal = true;
+    },
+    closeCreateListModal() {
+      this.showCreateListModal = false;
+    },
+    async onSubmit() {
+      console.log('form submitted', this.newListName);
+      const newList = await frappe.getNewDoc('KanbanList');
+      newList.listname = this.newListName;
+      const Kanban = await frappe.getDoc(this.doctype, this.name);
+      Kanban.lists.push(newList);
+      Kanban.update();
+      this.updateKanban(Kanban);
+      this.showCreateListModal = false;
+    },
+    async updateKanban(Kanban) {
+      this.Kanban = Kanban;
+    },
+    async addCard(e) {
+      const targetList = e.target.getAttribute('listname');
+      this.cardconfig.listname = targetList;
+      console.log(this.cardconfig);
+      this.showCreateCardModal = true;
+    },
+    closeCreateCardModal() {
+      this.showCreateCardModal = false;
+    },
+    async onCardSubmit() {
+      console.log('submitting card', this.cardconfig['cardname']);
+      const newCard = await frappe.getNewDoc('KanbanCard');
+      newCard.cardtitle = this.cardconfig.cardname;
+      newCard.boardname = this.kanban.name;
+      newCard.listname = this.cardconfig.listname;
+      newCard.referencedoctype = this.kanban.referencedoctype;
+      newCard.insert();
+      await this.getCards();
+      this.closeCreateCardModal();
+    },
+    toggleCheck(name) {
+      if (this.checklist.includes(name)) {
+        this.checklist = this.checklist.filter(docname => docname !== name);
+      } else {
+        this.checklist = this.checklist.concat(name);
+      }
+    },
+    isChecked(name) {
+      return this.checklist.includes(name);
+    },
+    async deleteCards() {
+      await frappe.db.deleteMany('KanbanCard', this.checklist);
+      this.checklist = [];
+    },
+    async archiveList(listname) {
+      const Kanban = await frappe.getDoc(this.doctype, this.name);
+      Kanban.lists.forEach(
+        list =>
+          list.listname === listname
+            ? (list.archived = 1)
+            : (list.archived = list.archived)
+      );
+      Kanban.update();
+      this.updateKanban(Kanban);
+    },
+    async displayCardDetails(cardName) {
+      this.showCardInfoModal = true;
+      const card = await frappe.getDoc('KanbanCard', cardName);
+      this.currentCard = card;
+    },
+    closeCardInfoModal() {
+      this.showCardInfoModal = false;
+    },
+    async saveCardChanges() {
+      console.log('save');
+      await this.currentCard.update();
+    },
+    submitCardChanges() {
+      console.log('save');
+    },
+    revert() {
+      console.log('save');
+    },
+    print() {
+      console.log('print');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+.kanban-container {
+  display: flex;
+  margin: 0 auto;
+  justify-content: space-around;
+  overflow-x: scroll;
+}
+.kanban-list {
+  margin: 1rem 0.5rem;
+  border-radius: 5px;
+  min-height: calc(100vh - 5rem);
+  min-width: 300px;
+  background-color: #e8ebed;
+  box-shadow: -1px 1px 16px -3px rgba(0, 0, 0, 0.75);
+  overflow-y: auto;
+}
+/* .list-name {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.card-item {
+  background: #fff;
+  margin: 0.5rem;
+  padding: 1rem;
+  border-radius: 5px;
+}
+.card-item:hover {
+  box-shadow: -1px 10px 12px -7px rgba(0, 0, 0, 0.75);
+}
+.card-title {
+  color: #2066d6;
+  font-size: 1.2rem;
+  font-weight: bold;
+} */
+</style>
diff --git a/ui/components/Kanban/KanbanDetails.vue b/ui/components/Kanban/KanbanDetails.vue
new file mode 100644
index 00000000..603f07fc
--- /dev/null
+++ b/ui/components/Kanban/KanbanDetails.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <form>
+      <div :key="key" v-for="(field,key) in fields">
+        <label>
+          {{field.label}}
+          <input class="form-control form-control-lg" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
+          <select class="form-control form-control-lg" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
+            <option v-for="(option) in options" :key="option" :value="option">
+              {{option}}
+            </option>
+          </select>
+          <div v-if="field.fieldname === 'lists'">
+            <div v-for="(list,key) in configdata['lists']" :key="key">
+              {{list.listname}}
+            </div>
+          </div>
+        </label>
+      </div>
+      <div>
+        <button class="btn btn-primary btn-lg" @click="update" type="submit" value="submit">
+          submit
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+
+export default {
+  name: 'KanbanDetails',
+  data() {
+    return {
+      doctype: 'Kanban',
+      configdata: {
+        kanbanname: '',
+        referencedoctype: '',
+        sortby: '',
+        lists: []
+      },
+      doc: null
+    };
+  },
+  computed: {
+    name() {
+      return this.$route.params.name;
+    },
+    options() {
+      const options = [];
+      if (this.configdata.referencedoctype) {
+        const refdoctypemeta = frappe.getMeta(this.configdata.referencedoctype);
+        console.log(refdoctypemeta);
+        refdoctypemeta.fields.forEach(field => {
+          if (field.fieldtype === 'Select') options.push(field.fieldname);
+        });
+      }
+      return options;
+    },
+    meta() {
+      return frappe.getMeta(this.doctype);
+    },
+    fields() {
+      console.log(this.meta.fields);
+      return this.meta.fields;
+    },
+    disabled() {
+      return field => {
+        return field.fieldname === 'referencedoctype' ? true : false;
+      };
+    },
+    fieldtypes() {
+      return {
+        Select: 'select',
+        Data: 'text'
+      };
+    }
+  },
+  created() {
+    const doc = this.getDetails();
+    doc.then(data => {
+      console.log(data);
+      Object.keys(this.configdata).forEach(
+        field => (this.configdata[field] = data[field])
+      );
+      console.log(this.configdata);
+    });
+  },
+  methods: {
+    async getDetails() {
+      const doc = await frappe.getDoc(this.doctype, this.name);
+      console.log('doc', doc);
+      this.doc = doc;
+      return doc;
+    },
+    async update(e) {
+      e.preventDefault();
+      const doc = await frappe.getDoc(this.doctype, this.name);
+      console.log(doc);
+      Object.keys(this.configdata).forEach(
+        field => (doc[field] = this.configdata[field])
+      );
+      doc.update();
+    }
+  }
+};
+</script>
+
diff --git a/ui/components/Kanban/KanbanTable.vue b/ui/components/Kanban/KanbanTable.vue
new file mode 100644
index 00000000..9f2cd557
--- /dev/null
+++ b/ui/components/Kanban/KanbanTable.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <list-actions :doctype="doctype" :showNew="false" :showDelete="checkList.length" @delete="deleteCheckedItems" />
+    <ul class="list-group">
+      <list-item v-for="board in kanbanBoards" :key="board.name" :id="board.name" :isChecked="isChecked(board.name)" @checkItem="toggleCheck(board.name)" @clickItem="editKanban(board.name)">
+        <span class="d-inline-block ml-2">
+          {{board.kanbanname}}
+        </span>
+        <button class="btn btn-sm btn-primary" @click="showKanban($event,board.name)">Show Kanban</button>
+      </list-item>
+    </ul>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import ListActions from '../List/ListActions';
+import ListItem from '../List/ListItem';
+
+export default {
+  name: 'KanbanTable',
+  components: {
+    ListActions,
+    ListItem
+  },
+  created() {
+    frappe.db.on(`change:${this.doctype}`, () => {
+      this.updateList();
+    });
+  },
+  mounted() {
+    this.updateList();
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta('Kanban');
+    }
+  },
+  data() {
+    return {
+      doctype: 'Kanban',
+      kanbanBoards: [],
+      columns: [
+        { name: 'name', field: 'kanbanname' },
+        { name: 'reference doctype', field: 'referencedoctype' }
+      ],
+      checkList: []
+    };
+  },
+  filters: {
+    capitalize: function(value) {
+      if (!value) return '';
+      value = value.toString();
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+  },
+  methods: {
+    editKanban(name) {
+      // console.log(e);
+      this.$router.push(`/Kanban/${name}`);
+    },
+    showKanban(e, name) {
+      e.stopPropagation();
+      console.log('name', name);
+      this.$router.push(`/Kanban/view/${name}`);
+    },
+    async deleteCheckedItems() {
+      await frappe.db.deleteMany(this.doctype, this.checkList);
+      this.checkList = [];
+    },
+    toggleCheck(name) {
+      if (this.checkList.includes(name)) {
+        this.checkList = this.checkList.filter(docname => docname !== name);
+      } else {
+        this.checkList = this.checkList.concat(name);
+      }
+    },
+    isChecked(name) {
+      return this.checkList.includes(name);
+    },
+    async updateList() {
+      const kanbanBoards = await frappe.db.getAll({
+        doctype: 'Kanban',
+        fields: ['name', ...this.meta.keywordFields]
+      });
+      this.kanbanBoards = kanbanBoards;
+      console.log(this.kanbanBoards);
+      console.log(this.meta);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
+.list-group-item {
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+  display: flex;
+  justify-content: space-between;
+  &:hover {
+    cursor: pointer;
+    background-color: $light;
+  }
+}
+
+.list-group-item:first-child {
+  border-top: none;
+}
+</style>
diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
index 9e99ba85..2c9a7783 100644
--- a/ui/components/List/List.vue
+++ b/ui/components/List/List.vue
@@ -1,44 +1,38 @@
 <template>
-        <div class="frappe-list">
-            <list-actions
-              :doctype="doctype"
-              :showDelete="checkList.length"
-              @new="$emit('newDoc')"
-              @delete="deleteCheckedItems"
-            />
-            <ul class="list-group">
-                <list-item v-for="doc of data" :key="doc.name"
-                    :id="doc.name"
-                    :isActive="doc.name === $route.params.name"
-                    :isChecked="isChecked(doc.name)"
-                    @clickItem="openForm(doc.name)"
-                    @checkItem="toggleCheck(doc.name)"
-                >
-                    <indicator v-if="hasIndicator" :color="getIndicatorColor(doc)" />
-                    <span class="d-inline-block ml-2">
-                        {{ doc[meta.titleField || 'name'] }}
-                    </span>
-                </list-item>
-            </ul>
-        </div>
+  <div class="frappe-list">
+    <list-actions :doctype="doctype" :showDelete="checkList.length" @new="$emit('newDoc')" :showCreateKanban="hasItems" @delete="deleteCheckedItems" @createKanban="createKanban" />
+    <ul class="list-group">
+      <list-item v-for="doc of data" :key="doc.name" :id="doc.name" :isActive="doc.name === $route.params.name" :isChecked="isChecked(doc.name)" @clickItem="openForm(doc.name)" @checkItem="toggleCheck(doc.name)">
+        <indicator v-if="hasIndicator" :color="getIndicatorColor(doc)" />
+        <span class="d-inline-block ml-2">
+          {{ doc[meta.titleField || 'name'] }}
+        </span>
+      </list-item>
+    </ul>
+    <create-kanban-modal :showCreateKanbanModal="showCreateKanbanModal" :refdoctype="doctype" />
+  </div>
 </template>
 <script>
 import frappe from 'frappejs';
 import ListActions from './ListActions';
 import ListItem from './ListItem';
+import KanbanModel from '../../../models/doctype/Kanban/Kanban';
+import CreateKanbanModal from '../Kanban/CreateKanbanModal';
 
 export default {
   name: 'List',
   props: ['doctype'],
   components: {
     ListActions,
-    ListItem
+    ListItem,
+    CreateKanbanModal
   },
   data() {
     return {
       data: [],
       checkList: [],
-      activeItem: ''
+      activeItem: '',
+      showCreateKanbanModal: false
     };
   },
   computed: {
@@ -47,6 +41,14 @@ export default {
     },
     hasIndicator() {
       return Boolean(this.meta.indicators);
+    },
+    hasItems() {
+      const fields = this.meta.fields;
+      const isSelectFieldPresent = fields.find(
+        field => field.fieldtype === 'Select'
+      );
+      if (isSelectFieldPresent && this.data.length > 0) return true;
+      else return false;
     }
   },
   created() {
@@ -108,6 +110,10 @@ export default {
     },
     getIndicatorColor(doc) {
       return this.meta.getIndicatorColor(doc);
+    },
+    createKanban() {
+      console.log('creating kanban');
+      this.showCreateKanbanModal = true;
     }
   }
 };
diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
index 9901dea0..41a09dbc 100644
--- a/ui/components/List/ListActions.vue
+++ b/ui/components/List/ListActions.vue
@@ -1,12 +1,26 @@
 <template>
-    <div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
-        <h5 class="m-0">{{ doctype }} List</h5>
-        <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
-        <button v-else class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
-    </div>
+  <div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+    <h5 class="m-0">{{ doctype }} List</h5>
+    <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
+    <button v-if="showNew" class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
+    <button v-if="showArchive" class="btn btn-primary btn-sm" @click="$emit('archiveList')">Archive</button>
+    <button v-if="showCreateKanban" class="btn btn-primary btn-sm" @click="$emit('createKanban')">Create Kanban</button>
+  </div>
 </template>
 <script>
 export default {
-    props: ['doctype', 'showDelete']
-}
+  props: {
+    doctype: String,
+    showDelete: Number,
+    showCreateKanban: Boolean,
+    showNew: {
+      type: Boolean,
+      default: true
+    },
+    showArchive: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
 </script>
diff --git a/ui/components/List/ListItem.vue b/ui/components/List/ListItem.vue
index 8eb43d96..6dbaf5b4 100644
--- a/ui/components/List/ListItem.vue
+++ b/ui/components/List/ListItem.vue
@@ -1,9 +1,7 @@
 <template>
     <div :class="classList" @click.self="$emit('clickItem')">
         <div class="custom-control custom-checkbox d-flex">
-            <input type="checkbox" class="custom-control-input" :id="id"
-                :value="isChecked" @change="$emit('checkItem', isChecked)"
-            >
+            <input type="checkbox" class="custom-control-input" :id="id" :value="isChecked" @change="$emit('checkItem', isChecked)">
             <label class="custom-control-label" :for="id"></label>
         </div>
         <div @click="$emit('clickItem')">
@@ -13,11 +11,14 @@
 </template>
 <script>
 export default {
-    props: ['id', 'isActive', 'isChecked'],
-    computed: {
-        classList() {
-            return ['list-group-item d-flex align-items-center', this.isActive ? 'bg-light' : ''];
-        }
+  props: ['id', 'isActive', 'isChecked'],
+  computed: {
+    classList() {
+      return [
+        'list-group-item d-flex align-items-center',
+        this.isActive ? 'bg-light' : ''
+      ];
     }
-}
+  }
+};
 </script>
diff --git a/ui/routes/index.js b/ui/routes/index.js
index 3ba36c89..614c6292 100644
--- a/ui/routes/index.js
+++ b/ui/routes/index.js
@@ -1,6 +1,9 @@
 import ListAndForm from '../pages/ListAndForm';
 import ListAndPrintView from '../pages/ListAndPrintView';
 import Tree from '../components/Tree';
+import KanbanTable from '../components/Kanban/KanbanTable';
+import KanbanDetails from '../components/Kanban/KanbanDetails';
+import Kanban from '../components/Kanban/Kanban';
 
 export default [
   {
@@ -26,5 +29,20 @@ export default [
     name: 'PrintView',
     component: ListAndPrintView,
     props: true
+  },
+  {
+    path: '/kanban',
+    name: 'Kanban',
+    component: KanbanTable
+  },
+  {
+    path: '/kanban/:name',
+    name: 'Edit Kanban',
+    component: KanbanDetails
+  },
+  {
+    path: '/kanban/view/:name',
+    name: 'Show Kanban',
+    component: Kanban
   }
 ];