diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 4cd4f49f4..7e2cf4969 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -56,6 +56,7 @@ define([
                         footLink('/code/', 'main_code'),
                         footLink('/slide/', 'main_slide'),
                         footLink('/poll/', 'main_poll'),
+                        footLink('/kanban/', 'main_kanban'),
                         footLink('/whiteboard/', null, Msg.type.whiteboard)
                     ]),
                     footerCol('footer_aboutUs', [
@@ -557,6 +558,7 @@ define([
                 [ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ],
                 [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
                 [ 'poll', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
+                [ 'kanban', '/kanban/', Msg.main_kanbanPad, 'fa-calendar' ],
                 [ 'whiteboard', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
                 [ 'recent', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
             ].filter(function (x) {
@@ -884,5 +886,12 @@ define([
         ];
     };
 
+    Pages['/kanban/'] = Pages['/kanban/index.html'] = function () {
+        return [
+            appToolbar(),
+            h('div#cp-app-kanban-content', [])
+        ];
+    };
+
     return Pages;
 });
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 1bdb69291..e2406653d 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -61,6 +61,13 @@
 @colortheme_poll-th-fg: #fff;
 @colortheme_poll-warn: #ffade3;
 
+@colortheme_kanban-bg: #006304;
+@colortheme_kanban-color: #fff;
+@colortheme_kanban-help-bg: #bbffbb;
+@colortheme_kanban-th-bg: #005bef;
+@colortheme_kanban-th-fg: #fff;
+@colortheme_kanban-warn: #ffade3;
+
 @colortheme_whiteboard-bg: #800080;
 @colortheme_whiteboard-color: #fff;
 @colortheme_whiteboard-warn: #ffae00;
diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less
index dadbef539..68f1ca9c8 100644
--- a/customize.dist/src/less2/main.less
+++ b/customize.dist/src/less2/main.less
@@ -34,6 +34,7 @@ body.cp-app-file { @import "../../../file/app-file.less"; }
 body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
 body.cp-app-contacts {   @import "../../../contacts/app-contacts.less";    }
 body.cp-app-poll { @import "../../../poll/app-poll.less"; }
+body.cp-app-kanban { @import "../../../kanban/app-kanban.less"; }
 body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 body.cp-app-todo { @import "../../../todo/app-todo.less"; }
 body.cp-app-profile { @import "../../../profile/app-profile.less"; }
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 55671f913..6ddee6349 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -154,6 +154,7 @@ h4 {
 .cp-callout-code .fa { background-color: @colortheme_code-bg; }
 .cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
 .cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
+.cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; }
 .cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
 .cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
 .cp-hidden { display: none !important; }
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 868d107cd..d6d186a15 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -8,6 +8,7 @@ define(function () {
     out.type.pad = 'Rich text';
     out.type.code = 'Code';
     out.type.poll = 'Poll';
+    out.type.kanban = 'Kanban';
     out.type.slide = 'Presentation';
     out.type.drive = 'CryptDrive';
     out.type.whiteboard = 'Whiteboard';
@@ -21,6 +22,7 @@ define(function () {
     out.button_newpoll = 'New Poll';
     out.button_newslide = 'New Presentation';
     out.button_newwhiteboard = 'New Whiteboard';
+    out.button_newkanban = 'New Kanban';
 
     // NOTE: Remove updated_0_ if we need an updated_1_
     out.updated_0_common_connectionLost = "<b>Server Connection Lost</b><br>You're now in read-only mode until the connection is back.";
@@ -245,6 +247,9 @@ define(function () {
     out.pad_mediatagWidth = "Width (px)";
     out.pad_mediatagHeight = "Height (px)";
 
+    // Kanban
+    out.kanban_title = "Kanban";
+
     // Polls
 
     out.poll_title = "Zero Knowledge Date Picker";
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
new file mode 100644
index 000000000..a52ade01c
--- /dev/null
+++ b/www/kanban/app-kanban.less
@@ -0,0 +1,671 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/tools.less';
+@import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/creation.less';
+
+.toolbar_main(
+    @bg-color: @colortheme_kanban-bg,
+    @warn-color: @colortheme_kanban-warn,
+    @color: @colortheme_kanban-color
+);
+.fileupload_main();
+.alertify_main();
+.tokenfield_main();
+.creation_main();
+
+@kanban-fore: #555;
+
+@kanban-th-bg: @colortheme_kanban-th-bg;
+@kanban-th-fg: @colortheme_kanban-th-fg;
+@kanban-th-user-bg: darken(@kanban-th-bg, 10%);
+@kanban-editing: lighten(@kanban-th-bg, 10%);
+@kanban-winner: darken(@kanban-th-bg, 15%);
+@kanban-td-bg: @kanban-th-bg;
+@kanban-td-fg: @kanban-th-fg;
+
+@kanban-help-bg: @colortheme_kanban-help-bg;
+
+@kanban-uncommitted-cell: #eee;
+@kanban-uncommitted-bg: #ddd; //lighten(@kanban-th-bg, 50%);
+@kanban-uncommitted-text: black;
+
+@kanban-placeholder: #fff;
+@kanban-border-color: #555;
+@kanban-cover-color: #000;
+@kanban-fg: #000;
+@kanban-option-yellow: #ff5;
+@kanban-option-gray: #ccc;
+
+@kanban-add-color: #fff;
+@kanban-add-bg: #777;
+@kanban-add-bg-alt: #444;
+
+.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
+.top-left(@s: 5px) { border-top-left-radius: @s; }
+
+display: flex;
+flex-flow: column;
+overflow-x: hidden;
+
+#cp-app-kanban-content {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    #cp-app-kanban-form {
+        flex: 1;
+        overflow-y: auto;
+        &.cp-app-kanban-readonly {
+            #cp-app-kanban-table-scroll {
+                max-width: ~"calc(75% - 30px - 100px)";
+            }
+            table {
+                width: 100%;
+            }
+            table tr td:last-child {
+                margin-left: 0; // uncommitted is hidden
+            }
+            td.cp-app-kanban-table-uncommitted {
+                display: none;
+            }
+        }
+        &.cp-app-kanban-published {
+            #cp-app-kanban-create-option {
+                display: none;
+            }
+            .cp-app-kanban-table-remove[data-rt-id^="y"], .cp-app-kanban-table-edit[data-rt-id^="y"] {
+                display: none;
+            }
+            tr.cp-app-kanban-table-uncommitted {
+                display: none;
+            }
+        }
+    }
+}
+
+input[type="text"], textarea {
+    background-color: white;
+    color: black;
+    border: 0;
+}
+
+input[type="text"][disabled], textarea[disabled] {
+    background-color: transparent;
+    border: 0px;
+}
+
+// The placeholder color only seems to effect Safari when not set
+
+input[type="text"][disabled]::placeholder {
+    color: @kanban-placeholder;
+    opacity: 1;
+}
+
+table#cp-app-kanban-table {
+    margin: 0px;
+    overflow: hidden;
+}
+#cp-app-kanban-table-container {
+    position: relative;
+    margin: 20px;
+}
+#cp-app-kanban-table-container button {
+    border-radius: 0;
+    border: 0;
+}
+#cp-app-kanban-create-user {
+    display: inline-flex;
+    height: 20px;
+    padding: 0 5px;
+    margin: 2px auto;
+    width: auto;
+    overflow: hidden;
+    color: @kanban-add-color;
+    background: @kanban-add-bg;
+    &:hover {
+        background: @kanban-add-bg-alt;
+    }
+}
+#cp-app-kanban-create-option {
+    order: 3;
+    display: inline-flex;
+    width: 46px;
+    height: 20px;
+    margin: 2px;
+    padding: 0;
+    color: @kanban-add-color;
+    background: @kanban-add-bg;
+    &:hover {
+        background: @kanban-add-bg-alt;
+    }
+}
+#cp-app-kanban-table-scroll {
+    overflow-y: hidden;
+    overflow-x: auto;
+    margin-left: 25%;
+    max-width: ~"calc(75% - 100px - 100px)";
+    width: auto;
+    display: inline-block;
+}
+.cp-markdown-toolbar {
+    margin: auto;
+    min-width: 80%;
+    width: 80%;
+}
+#cp-app-kanban-description {
+    &~ .CodeMirror {
+        margin: auto;
+        min-width: 80%;
+        width: 80%;
+        min-height: 200px;
+        height: 200px;
+        border: 1px solid black;
+        .CodeMirror-placeholder {
+            color: #777;
+        }
+    }
+}
+#cp-app-kanban-description-published {
+    display: none;
+    padding: 15px;
+    margin: auto;
+
+    min-width: 80%;
+    width: 80%;
+    min-height: 7em;
+    color: #000;
+    border: 1px solid transparent;
+    background-color: #eeeeee;
+    font: @colortheme_app-font;
+    text-align: left;
+    media-tag > * {
+        max-width: 100%;
+        max-height: 20em;
+    }
+}
+div.cp-app-kanban-published {
+    div.cp-app-kanban-realtime {
+        #cp-app-kanban-description {
+            display: none;
+            &~ .CodeMirror {
+                display: none;
+            }
+        }
+        #cp-app-kanban-description-published {
+            display: block;
+            &:empty {
+                display: none;
+            }
+        }
+        #cp-app-kanban-nocomments {
+            display: none;
+        }
+        #cp-app-kanban-comments {
+            display: block;
+        }
+    }
+}
+
+#cp-app-kanban-help {
+    width: 100%;
+    margin: auto;
+    padding: 20px 10%;
+    background: @kanban-help-bg;
+}
+
+// from cryptpad.less
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: 20px;
+}
+tbody {
+    * {
+        box-sizing: border-box;
+    }
+    tr {
+        text-align: center;
+    }
+
+    td {
+        .tools_unselectable();
+        border-right: 1px solid @kanban-border-color;
+        padding: 12px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        &:last-child {
+            border-right: none;
+        }
+    }
+}
+
+div.cp-app-kanban-realtime {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+
+    input {
+        &[type="text"] {
+            height: 1em;
+            margin: 0px;
+        }
+    }
+    > textarea {
+        width: 50%;
+        height: 15vh;
+    }
+
+    padding: 0px;
+    margin: 0px;
+
+    .cp-app-kanban-table-scrolled {
+        tr td:last-child {
+            right: 0;
+        }
+        tr td:nth-last-child(2) {
+            right: 100px;
+        }
+    }
+
+    table {
+        border-collapse: collapse;
+        width: ~"calc(100% - 1px)";
+        .cp-app-kanban-table-editing {
+            background-color: @kanban-editing;
+        }
+        .cp-app-kanban-table-uncommitted {
+            .cp-app-kanban-table-cover {
+                background-color: @kanban-uncommitted-cell !important;
+            }
+            div.cp-app-kanban-table-text-cell {
+                background-color: @kanban-uncommitted-bg !important;
+                color: @kanban-uncommitted-text !important;
+            }
+            text-align: center;
+            background-color: @kanban-uncommitted-bg !important;
+            color: @kanban-uncommitted-text !important;
+        }
+        tr {
+            height: 28px;
+            /* Options */
+            td:first-child {
+                position:absolute;
+                left: 0;
+                top: auto;
+                width: 25%;
+            }
+            /* Uncommitted column */
+            td:nth-last-child(2) {
+                position: absolute;
+                top: auto;
+                width: 100px;
+                min-width: unset !important;
+                height: auto !important;
+            }
+            /* Results */
+            td:last-child {
+                color: @kanban-th-fg;
+                position:absolute;
+                top: auto;
+                margin-left: 100px;
+                width: 100px;
+                min-width: unset !important;
+                background-color: @kanban-th-bg;
+            }
+            td {
+                padding: 0px;
+                margin: 0px;
+
+                div.cp-app-kanban-table-text-cell {
+                    height: 28px;
+                    padding: 0px;
+                    margin: 0px;
+                    display: flex;
+                    align-items: center;
+                    .cp-app-kanban-table-remove {
+                        order: 1;
+                    }
+                    .cp-app-kanban-table-edit {
+                        order: 3;
+                    }
+                    input {
+                        min-width: 0;
+                        order: 2;
+                        flex: 1;
+                        height: 24px;
+                        border: 0px;
+                        margin: 2px;
+                        &[disabled] {
+                            background-color: transparent;
+                            color: @kanban-td-fg;
+                            //font-weight: bold;
+                        }
+                    }
+                }
+
+                &.cp-app-kanban-table-checkbox-cell {
+                    margin: 0px;
+                    padding: 0px;
+                    height: 100%;
+                    min-width: 100px;
+
+                    div.cp-app-kanban-table-checkbox-contain {
+                        display: inline-block;
+                        height: 100%;
+                        width: 100%;
+                        position: relative;
+
+                        label {
+                            background-color: transparent;
+                            display: block;
+                            position: absolute;
+                            top: 0px;
+                            left: 0px;
+                            height: 100%;
+                            width: 100%;
+                        }
+
+                        input {
+                            &[type="number"] {
+                                &:not(.editable) {
+                                    display: none;
+
+                                    ~ .cp-app-kanban-table-cover {
+                                        line-height: 28px;
+                                        display: block;
+                                        font-weight: bold;
+                                        height: 100%;
+                                        display: block;
+
+                                        color: @kanban-cover-color;
+
+                                        &:after {
+                                            height: 100%;
+                                        }
+
+                                    }
+                                }
+                            }
+                        }
+
+                        input[type="number"][value="0"] {
+                            ~ .cp-app-kanban-table-cover {
+                                background-color: @colortheme_cp-red;
+                                &:after { content: "✖"; }
+                            }
+                        }
+                        input[type="number"][value="1"] {
+                            ~ .cp-app-kanban-table-cover {
+                                background-color: @colortheme_cp-green;
+                                &:after { content: "✔"; }
+                            }
+                        }
+                        input[type="number"][value="2"] {
+                            ~ .cp-app-kanban-table-cover {
+                                background-color: @kanban-option-yellow;
+                                &:after { content: "~"; }
+                            }
+                        }
+                        input[type="number"][value="3"] {
+                            ~ .cp-app-kanban-table-cover {
+                                background-color: @kanban-option-gray;
+                                &:after { content: "?"; }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        input {
+            &[type="text"] {
+                height: auto;
+                width: 80%;
+            }
+        }
+        span {
+            .tools_unselectable();
+        }
+        thead {
+            height: 52px;
+            tr {
+                height: 52px;
+            }
+            td {
+                padding: 0px 5px;
+                background: @kanban-th-bg;
+                color: @kanban-th-fg;
+                &:not(:last-child) {
+                    border-right: 1px solid rgba(255,255,255,0.2);
+                }
+                &:last-child {
+                    height: 52px;
+                    line-height: 52px;
+                    text-align: center;
+                }
+                &:nth-last-child(2) {
+                    border-right: 1px solid @kanban-border-color;
+                }
+                &.cp-app-kanban-table-own {
+                    background: @kanban-th-user-bg;
+                    .cp-app-kanban-table-lock {
+                        cursor: default;
+                    }
+                }
+                .cp-app-kanban-table-buttons {
+                    display: flex;
+                    justify-content: space-between;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    span {
+                        cursor: pointer;
+                        width: 1em;
+                        text-align: center;
+                    }
+                    .cp-app-kanban-table-bookmark {
+                        color: darken(@kanban-th-fg, 30%);
+                        &.cp-app-kanban-table-bookmark-full {
+                            color: @kanban-th-fg;
+                        }
+                    }
+                }
+                input {
+                    &[type="text"] {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        break-after: always;
+                        width: ~"calc(100% - 2px)"; // borders...
+                        box-sizing: border-box;
+                        padding: 1px 5px;
+                        margin: 1px;
+                        &[disabled] {
+                            color: @kanban-th-fg;
+                        }
+                    }
+                }
+            }
+        }
+
+        tbody {
+            td:first-child {
+                background: @kanban-td-bg;
+                color: @kanban-td-fg;
+            }
+            td.cp-app-kanban-table-winner {
+                background-color: @kanban-winner;
+                &:last-child { font-weight: bold; }
+            }
+            .cp-app-kanban-table-text-cell {
+                input[type="text"] {
+                    width: ~"calc(100% - 50px)";
+                    padding: 0 0.5em;
+                }
+                .cp-app-kanban-table-edit {
+                    float:right;
+                    margin: 2px 10px 0 0;
+                }
+                .cp-app-kanban-table-remove {
+                    float: left;
+                    margin: 2px 0 0 10px;
+                }
+            }
+            tr:not(:first-child) {
+                td:not(:first-child) {
+                    label {
+                        border-top: 1px solid @kanban-border-color;
+                    }
+                }
+            }
+        }
+        .cp-app-kanban-table-edit {
+            //color: @kanban-cover-color;
+            cursor: pointer;
+            float: left;
+            margin-left: 10px;
+        }
+
+        thead {
+            tr {
+                th {
+                    input[type="text"][disabled] {
+                        background-color: transparent;
+                        color: @kanban-fore;
+                        font-weight: bold;
+                    }
+                    .cp-app-kanban-table-remove {
+                        cursor: pointer;
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+
+                }
+            }
+        }
+        tfoot {
+            display: none;
+        }
+    }
+    #cp-app-kanban-nocomments {
+        color: #999;
+        text-align: center;
+        margin: 20px;
+        font: @colortheme_app-font;
+    }
+    #cp-app-kanban-comments {
+        width: 50%;
+        margin: 20px auto;
+        min-width: 400px;
+        padding-bottom: 5px;
+        display: none;
+        button {
+            border-radius: 0;
+        }
+        #cp-app-kanban-comments-add {
+            input, textarea {
+                border: 1px solid black;
+                width: 90%;
+                margin: 5px 5%;
+            }
+            input {
+                padding: 5px;
+                height: 26px;
+                &[disabled] {
+                    background: #eee;
+                }
+            }
+            textarea {
+                padding: 5px;
+                height: 8em;
+                line-height: 1.5em;
+            }
+            button {
+                padding: 10px;
+            }
+            text-align: center;
+        }
+        #cp-app-kanban-comments-list {
+            .cp-app-kanban-comments-list-el {
+                width: 90%;
+                margin: 5px 5%;
+            }
+            .cp-app-kanban-comments-list-msg {
+                display: flex;
+                background: #eee;
+                padding: 5px 10px;
+                .cp-app-kanban-comments-list-msg-text {
+                    flex: 1;
+                    white-space: pre-wrap;
+                }
+                .cp-app-kanban-comments-list-msg-actions {
+                    button {
+                        padding: 0;
+                        width: 25px;
+                        line-height: 20px;
+                    }
+                }
+            }
+            .cp-app-kanban-comments-list-data {
+                background: #ddd;
+                padding: 5px 10px;
+                display: flex;
+                align-items: center;
+                .cp-app-kanban-comments-list-data-name {
+                    margin-left: 10px;
+                    flex: 1;
+                }
+                .cp-app-kanban-comments-list-data-avatar { .avatar_main(30px); }
+            }
+        }
+    }
+
+    @media screen and (max-width: 500px) {
+        #cp-app-kanban-table-scroll {
+            max-width: 100%;
+            padding: 0;
+            margin: 0;
+            table {
+                tr {
+                    td {
+                        &:first-child {
+                            position: unset;
+                            min-width: 100px;
+                            &:hover:not(:empty) {
+                                position: absolute;
+                                min-width: 100px;
+                                width: auto;
+                                z-index: 100;
+                            }
+                        }
+                        &:nth-last-child(2) {
+                            position: unset;
+                        }
+                        &:last-child {
+                            position: unset;
+                        }
+                    }
+                }
+            }
+        }
+        #cp-app-kanban-comments {
+            min-width: 90%;
+        }
+    }
+}
+
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
diff --git a/www/kanban/index.html b/www/kanban/index.html
new file mode 100644
index 000000000..e3f7eacc4
--- /dev/null
+++ b/www/kanban/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
+</head>
+<body>
+<iframe id="sbox-iframe">
diff --git a/www/kanban/inner.html b/www/kanban/inner.html
new file mode 100644
index 000000000..d201fce79
--- /dev/null
+++ b/www/kanban/inner.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="cp-app-noscroll">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/kanban/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        #editor1 { display: none; }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0px;
+            padding: 0px;
+            border: 0px;
+        }
+            margin: 0;
+            padding: 0;
+        }
+
+        #myKanban {
+            overflow-x: auto;
+            padding: 20px 0;
+        }
+
+        .success {
+            background: #00B961;
+        }
+
+        .info {
+            background: #2A92BF;
+        }
+
+        .warning {
+            background: #F4CE46;
+        }
+
+        .error {
+            background: #FB7D44;
+        }
+</head>
+<body class="cp-app-kanban">
+</body>
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
new file mode 100644
index 000000000..14ba346f7
--- /dev/null
+++ b/www/kanban/inner.js
@@ -0,0 +1,628 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/toolbar3.js',
+    'json.sortify',
+    '/common/common-util.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-interface.js',
+    '/api/config',
+    '/common/common-realtime.js',
+    '/customize/pages.js',
+    '/customize/messages.js',
+    '/customize/application_config.js',
+    '/common/common-thumbnail.js',
+    '/bower_components/chainpad/chainpad.dist.js',
+
+    '/bower_components/secure-fabric.js/dist/fabric.min.js',
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less2/main.less',
+    'css!/kanban/jkanban.css',
+    '/kanban/jkanban.js',
+], function (
+    $,
+    Crypto,
+    Toolbar,
+    JSONSortify,
+    Util,
+    nThen,
+    SFCommon,
+    UI,
+    ApiConfig,
+    CommonRealtime,
+    Pages,
+    Messages,
+    AppConfig,
+    Thumb,
+    ChainPad)
+{
+    var saveAs = window.saveAs;
+
+    var APP = window.APP = {
+        $: $
+    };
+    var Fabric = APP.Fabric = window.fabric;
+
+    var stringify = function (obj) {
+        return JSONSortify(obj);
+    };
+
+    var toolbar;
+
+    var andThen = function (common) {
+        var config = {};
+        /* Initialize Fabric */
+        var canvas = APP.canvas = null;
+        var $canvas = $('canvas');
+        var readOnly = false;
+
+        var setEditable = function (bool) {
+            APP.editable = bool;
+            if (readOnly && bool) { return; }
+        };
+
+        var saveImage = APP.saveImage = function () {
+        };
+
+        APP.FM = common.createFileManager({});
+        APP.upload = function (title) {            
+        };
+
+        var initializing = true;
+        var $bar = $('#cp-toolbar');
+        var Title;
+        var cpNfInner;
+        var metadataMgr;
+
+        config = {
+            readOnly: readOnly,
+            patchTransformer: ChainPad.NaiveJSONTransformer,
+            // cryptpad debug logging (default is 1)
+            // logLevel: 0,
+            validateContent: function (content) {
+                try {
+                    JSON.parse(content);
+                    return true;
+                } catch (e) {
+                    console.log("Failed to parse, rejecting patch");
+                    return true;
+                }
+            }
+        };
+
+        var stringifyInner = function (textValue) {
+            var obj = {
+                content: textValue,
+                metadata: metadataMgr.getMetadataLazy()
+            };
+            // stringify the json and send it into chainpad
+            return stringify(obj);
+        };
+
+        var onLocal = config.onLocal = function () {
+            if (initializing) { return; }
+            if (readOnly) { return; }
+
+            var content = stringifyInner(Kanban.getBoardsJSON());
+            console.log("Updating content " + content);
+
+            try {
+                APP.realtime.contentUpdate(content);
+            } catch (e) {
+                APP.unrecoverable = true;
+                setEditable(false);
+                APP.toolbar.errorState(true, e.message);
+                var msg = Messages.chainpadError;
+                UI.errorLoadingScreen(msg, true, true);
+                console.error(e);
+            }
+        };
+
+        var initThumbnails = function () {
+            var oldThumbnailState;
+            var privateDat = metadataMgr.getPrivateData();
+            if (!privateDat.thumbnails) { return; }
+            var hash = privateDat.availableHashes.editHash ||
+                       privateDat.availableHashes.viewHash;
+            var href = privateDat.pathname + '#' + hash;
+            var mkThumbnail = function () {
+                if (!hash) { return; }
+                if (initializing) { return; }
+                if (!APP.realtime) { return; }
+                var content = APP.realtime.getUserDoc();
+                if (content === oldThumbnailState) { return; }
+                /*
+                var D = Thumb.getResizedDimensions($canvas[0], 'pad');
+                Thumb.fromCanvas($canvas[0], D, function (err, b64) {
+                    oldThumbnailState = content;
+                    Thumb.setPadThumbnail(common, href, b64);
+                });
+                */
+            };
+            window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL);
+            window.setTimeout(mkThumbnail, Thumb.UPDATE_FIRST);
+        };
+
+        config.onInit = function (info) {
+            readOnly = metadataMgr.getPrivateData().readOnly;
+
+            Title = common.createTitle({});
+
+            var configTb = {
+                displayed: [
+                    'userlist',
+                    'title',
+                    'useradmin',
+                    'spinner',
+                    'newpad',
+                    'share',
+                    'limit',
+                    'unpinnedWarning'
+                ],
+                title: Title.getTitleConfig(),
+                metadataMgr: metadataMgr,
+                readOnly: readOnly,
+                realtime: info.realtime,
+                sfCommon: common,
+                $container: $bar,
+                $contentContainer: $('#cp-app-kanban-content')
+            };
+            toolbar = APP.toolbar = Toolbar.create(configTb);
+            Title.setToolbar(toolbar);
+
+            var $rightside = toolbar.$rightside;
+            var $drawer = toolbar.$drawer;
+
+            /* save as template */
+            if (!metadataMgr.getPrivateData().isTemplate) {
+                var templateObj = {
+                    rt: info.realtime,
+                    getTitle: function () { return metadataMgr.getMetadata().title; }
+                };
+                var $templateButton = common.createButton('template', true, templateObj);
+                $rightside.append($templateButton);
+            }
+
+            /* add an export button */
+            var $export = common.createButton('export', true, {}, saveImage);
+            $drawer.append($export);
+
+            if (common.isLoggedIn()) {
+                common.createButton('savetodrive', true, {}, function () {})
+                .click(function () {
+                    UI.prompt(Messages.exportPrompt, document.title + '.png',
+                    function (name) {
+                        if (name === null || !name.trim()) { return; }
+                        APP.upload(name);
+                    });
+                }).appendTo($rightside);
+
+                common.createButton('hashtag', true).appendTo($rightside);
+            }
+
+            var $forget = common.createButton('forget', true, {}, function (err) {
+                if (err) { return; }
+                setEditable(false);
+            });
+            $rightside.append($forget);
+
+            var $properties = common.createButton('properties', true);
+            toolbar.$drawer.append($properties);
+
+            var $appContainer = $('#cp-app-kanban-container');
+            var helpMenu = common.createHelpMenu(['kanban']);
+            $appContainer.prepend(helpMenu.menu);
+            toolbar.$drawer.append(helpMenu.button);
+
+            metadataMgr.onChange(function () {
+                var md = metadataMgr.getMetadata();
+            });
+            
+        };
+
+        config.onReady = function (info) {
+            if (APP.realtime !== info.realtime) {
+                APP.realtime = info.realtime;
+            }
+
+            var userDoc = APP.realtime.getUserDoc();
+            var isNew = false;
+            var newDoc = '';
+            if (userDoc === "" || userDoc === "{}") { isNew = true; }
+
+            if (userDoc !== "") {
+                var hjson = JSON.parse(userDoc);
+
+                if (hjson && hjson.metadata) {
+                    metadataMgr.updateMetadata(hjson.metadata);
+                }
+                if (typeof (hjson) !== 'object' || Array.isArray(hjson) ||
+                    (hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
+                     hjson.metadata.type !== 'kanban')) {
+                    var errorText = Messages.typeError;
+                    UI.errorLoadingScreen(errorText);
+                    throw new Error(errorText);
+                }
+                newDoc = hjson.content;
+
+                // launch the kanban code
+                config.initKanban(newDoc);
+
+            } else {
+                Title.updateTitle(Title.defaultTitle);
+                config.initKanban();
+            }
+
+            nThen(function (waitFor) {
+                if (newDoc) {
+                }
+            }).nThen(function () {
+                setEditable(!readOnly);
+                initializing = false;
+                config.onLocal();
+                UI.removeLoadingScreen();
+
+                initThumbnails();
+
+
+                if (readOnly) { return; }
+
+                var privateDat = metadataMgr.getPrivateData();
+                var skipTemp = Util.find(privateDat,
+                    ['settings', 'general', 'creation', 'noTemplate']);
+                var skipCreation = Util.find(privateDat, ['settings', 'general', 'creation', 'skip']);
+                if (isNew && (!AppConfig.displayCreationScreen || (!skipTemp && skipCreation))) {
+                    common.openTemplatePicker();
+                }
+            });
+        };
+
+        config.onRemote = function () {
+            if (initializing) { return; }
+            var userDoc = APP.realtime.getUserDoc();
+
+            console.log("Received content: " + userDoc);
+
+            var json = JSON.parse(userDoc);
+            var remoteDoc = json.content;
+            
+            var currentContent = stringify(Kanban.getBoardsJSON());
+            var remoteContent = stringify(json.content);
+
+            
+            if (currentContent !== remoteContent) { 
+               // reinit kanban (TODO: optimize to diff only)
+               console.log("Content is different.. Applying content");
+               config.Kanban.setBoards(remoteDoc);
+               common.notify(); 
+            }
+            if (readOnly) { setEditable(false); }
+        };
+
+        config.onAbort = function () {
+            if (APP.unrecoverable) { return; }
+            // inform of network disconnect
+            setEditable(false);
+            toolbar.failed();
+            UI.alert(Messages.common_connectionLost, undefined, true);
+        };
+
+        config.onConnectionChange = function (info) {
+            if (APP.unrecoverable) { return; }
+            setEditable(info.state);
+            if (info.state) {
+                initializing = true;
+                //UI.findOKButton().click();
+            } else {
+                //UI.alert(Messages.common_connectionLost, undefined, true);
+            }
+        };
+
+        config.onError = function (err) {
+            common.onServerError(err, toolbar, function () {
+                APP.unrecoverable = true;
+                setEditable(false);
+            });
+        };
+              
+        config.initKanban = function(boards) { 
+          var defaultBoards = [
+   {
+	"id": "todo",
+	"title": "To Do",
+	"color": "blue",
+	"item": [
+	{
+		"title": "Item 1"
+	},
+	{
+		"title": "Item 2"
+	}
+	]
+   },
+   {
+	"id": "working",
+	"title": "Working",
+	"color": "orange",
+	"item": [
+	{
+		"title": "Item 3",
+	},
+	{
+		"title": "Item 4",
+	}
+	]
+   },
+   {
+	"id": "done",
+	"title": "Done",
+	"color": "green",
+	"item": [
+	{
+		"title": "Item 5",
+	},
+	{
+		"title": "Item 6",
+	}
+	]
+   }];
+   
+    if (boards==null) {
+        console.log("Initializing with default boards content");
+        boards = defaultBoards; 
+    } else {
+        console.log("Initializing with boards content " + boards);
+    } 
+    
+    // Remove any existing elements
+    $(".kanban-container-outer").remove();
+    
+    window.Kanban = config.Kanban = new jKanban({
+element: '#cp-app-kanban-content',
+gutter: '15px',
+widthBoard: '300px',
+onChange: function() {
+console.log("Board object has changed");
+config.onLocal();
+}
+,click: function (el) { 
+    if (Kanban.inEditMode) {
+      console.log("An edit is already active");
+      return;
+    }
+    Kanban.inEditMode = true;
+    var name = $(el).text();
+    $(el).html('');
+    $('<input></input>')
+        .attr({
+            'type': 'text',
+            'name': 'text',
+            'id': 'kanban_edit',
+            'size': '30',
+            'value': name
+        })
+        .appendTo(el);
+    $('#kanban_edit').focus();
+    $('#kanban_edit').blur(function() {
+      var name = $('#kanban_edit').val();
+      $(el).text(name); 
+      var board = $(el.parentNode.parentNode).attr("data-id");
+      var pos = Kanban.findElementPosition(el);
+      console.log(pos);
+      console.log(board);
+      Kanban.getBoardJSON(board).item[pos].title = name;
+      Kanban.onChange();
+      Kanban.inEditMode = false;  
+    });
+
+},
+boardTitleClick: function (el) { 
+    if (Kanban.inEditMode) {
+      console.log("An edit is already active");
+      return;
+    }
+    Kanban.inEditMode = true;
+    var name = $(el).text();
+    $(el).html('');
+    $('<input></input>')
+        .attr({
+            'type': 'text',
+            'name': 'text',
+            'id': 'kanban_edit',
+            'size': '30',
+            'value': name
+        })
+        .appendTo(el);
+    $('#kanban_edit').focus();
+    $('#kanban_edit').blur(function() {
+      var name = $('#kanban_edit').val();
+      $(el).text(name); 
+      var board = $(el.parentNode.parentNode).attr("data-id");
+      Kanban.getBoardJSON(board).title = name;
+      Kanban.onChange();
+      Kanban.inEditMode = false;  
+    });
+
+},
+colorClick: function (el, boardId) {
+    console.log("in color click");
+    var board = $(el.parentNode).attr("data-id");
+    var boardJSON = Kanban.getBoardJSON(board);
+    var currentColor = boardJSON.color;
+    console.log("Current color " + currentColor);
+    var index = Kanban.options.colors.findIndex(function(element) { return (element==currentColor) }) + 1;
+    console.log("Next index " + index);
+    if (index>=Kanban.options.colors.length)
+      index = 0;
+    var nextColor = Kanban.options.colors[index];
+    console.log("Next color " + nextColor);   
+    boardJSON.color = nextColor;
+    $(el).removeClass("kanban-header-" + currentColor);
+    $(el).addClass("kanban-header-" + nextColor);
+    Kanban.onChange();
+     
+},
+removeClick: function(el, boardId) {
+    if (confirm("Do you want to delete this board?")) {
+     console.log("Delete board");
+     var boardName = $(el.parentNode.parentNode).attr("data-id");
+     for (index in Kanban.options.boards) {
+       if (Kanban.options.boards[index].id == boardName) {
+          break;
+       }
+       index++;
+     }
+     Kanban.options.boards.splice(index, 1);
+     Kanban.removeBoard(boardName);
+     Kanban.onChange();
+    }
+},
+buttonClick: function (el, boardId) {
+console.log(el);
+console.log(boardId);
+// create a form to enter element 
+var formItem = document.createElement('form');
+formItem.setAttribute("class", "itemform");
+formItem.innerHTML = '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>'
+
+Kanban.addForm(boardId, formItem);
+formItem.addEventListener("submit", function (e) {
+		e.preventDefault();
+		var text = e.target[0].value
+		Kanban.addElement(boardId, {
+				"title": text,
+				})
+		formItem.parentNode.removeChild(formItem);
+		});
+document.getElementById('CancelBtn').onclick = function () {
+	formItem.parentNode.removeChild(formItem)
+}
+},
+addItemButton: true,
+	boards: boards
+});
+
+var addBoardDefault = document.getElementById('kanban-addboard');
+addBoardDefault.addEventListener('click', function () {
+        var counter = 1;
+        found = false;
+        while (found) {
+         for (var board in Kanban.options.boards) {
+           if (board.id == "board" + counter) {
+             counter++;
+             break;
+           }
+         }
+         found = true;
+        }
+
+   		Kanban.addBoards(
+				[{
+				"id" : "board" + counter,
+				"title": "New Board",
+				"color": "yellow",
+				"item": [
+				{
+				"title": "Item 1",
+				}
+				]
+				}]
+				)
+		Kanban.onChange();
+		});
+		
+/*
+var toDoButton = document.getElementById('addToDo');
+toDoButton.addEventListener('click', function () {
+		Kanban.addElement(
+				"_todo",
+				{
+				"title": "Test Add",
+				}
+				);
+		});
+
+var addBoardDefault = document.getElementById('addDefault');
+addBoardDefault.addEventListener('click', function () {
+		Kanban.addBoards(
+				[{
+				"id": "_default",
+				"title": "Kanban Default",
+				"item": [
+				{
+				"title": "Default Item",
+				},
+				{
+				"title": "Default Item 2",
+				},
+				{
+				"title": "Default Item 3",
+				}
+				]
+				}]
+				)
+		});
+
+var removeBoard = document.getElementById('removeBoard');
+removeBoard.addEventListener('click', function () {
+		Kanban.removeBoard('_done');
+		});
+
+var removeElement = document.getElementById('removeElement');
+removeElement.addEventListener('click', function () {
+		Kanban.removeElement('_test_delete');
+		});
+
+var allEle = Kanban.getBoardElements('_todo');
+allEle.forEach(function (item, index) {
+		//console.log(item);
+		});
+*/
+};
+
+        cpNfInner = common.startRealtime(config);
+        metadataMgr = cpNfInner.metadataMgr;
+
+        cpNfInner.onInfiniteSpinner(function () {
+            if (APP.unrecoverable) { return; }
+            setEditable(false);
+            UI.confirm(Messages.realtime_unrecoverableError, function (yes) {
+                if (!yes) { return; }
+                common.gotoURL();
+            });
+        });
+
+        $('#save').on('click', function () {
+        });
+
+
+        common.onLogout(function () { setEditable(false); });
+    };
+    
+        
+
+    var main = function () {
+        var common;
+
+        nThen(function (waitFor) {
+            $(waitFor(function () {
+                UI.addLoadingScreen();
+                var $div = $('<div>').append(Pages['/kanban/']());
+                $('body').append($div.html());
+                $('body').addClass("cp-app-kanban");
+            }));
+            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+        }).nThen(function (waitFor) {
+            common.getSframeChannel().onReady(waitFor());
+        }).nThen(function (waitFor) {
+            common.handleNewFile(waitFor);
+        }).nThen(function (/*waitFor*/) {
+            andThen(common);
+        });
+    };
+    main();
+});
diff --git a/www/kanban/jkanban.css b/www/kanban/jkanban.css
new file mode 100644
index 000000000..13e89c27d
--- /dev/null
+++ b/www/kanban/jkanban.css
@@ -0,0 +1,151 @@
+
+.kanban-container-outer {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: scroll;
+}
+
+.kanban-container {
+    width: 200%;
+    padding: 15px;
+}
+
+.kanban-container * {
+    box-sizing: border-box;
+}
+
+.kanban-container:after {
+    clear: both;
+    display: block;
+    content: "";
+}
+
+.kanban-board {
+    position: relative;
+    float: left;
+    background: #E2E4E6;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    margin: 10px;
+    vertical-align: top;
+}
+
+.kanban-board.disabled-board{
+    opacity: .3;
+}
+
+.kanban-board.is-moving.gu-mirror {
+    transform: rotate(3deg);
+}
+
+.kanban-board.is-moving.gu-mirror .kanban-drag {
+    overflow: hidden;
+    padding-right: 50px;
+}
+
+.kanban-board header {
+    font-size: 16px;
+    padding: 10px;
+}
+
+.kanban-board header .kanban-title-board {
+    font-weight: 700;
+    margin: 0;
+    padding: 0;
+    display: inline;
+}
+
+.kanban-board header .kanban-title-button {
+    float: right;
+    line-height: 1;
+    padding: .25rem .5rem;
+}
+
+.kanban-board .kanban-drag {
+    min-height: 200px;
+    padding: 20px;
+}
+
+.kanban-board:after {
+    clear: both;
+    display: block;
+    content: "";
+}
+
+.kanban-item {
+    background: #fff;
+    padding: 15px;
+    margin-bottom: 20px;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.kanban-item:hover {
+    cursor: move;
+}
+
+.kanban-item:last-child {
+    margin: 0;
+}
+
+.kanban-item.is-moving.gu-mirror {
+    transform: rotate(3deg);
+    height: auto !important;
+}
+
+.kanban-header-yellow { background: #FC3; }
+.kanban-header-orange { background: #F91; }
+.kanban-header-blue   { background: #0AC; }
+.kanban-header-red    { background: #E43; }
+.kanban-header-green  { background: #8C4; }
+
+#kanban-addboard {
+  float: left;
+  margin: 30px;
+  margin-right: 10px;
+  padding: 5px;
+  padding-top: 3;
+  padding-bottom: 3px;
+  border: 1px solid;
+  width: 30px;
+  text-align: center;
+  background: #d4d4e8;
+  font-weight: bold;
+}
+
+.kanban-removeboard {
+  float: right;
+  margin: 10px;
+  padding: 3px;
+  width: 30px;
+  text-align: center;
+  background: #eee;
+  font-weight: bold;
+}
+
+/* Dragula CSS  */
+.gu-mirror {
+    position: fixed !important;
+    margin: 0 !important;
+    z-index: 9999 !important;
+}
+
+.gu-hide {
+    display: none !important;
+}
+
+.gu-unselectable {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
+.gu-transit {
+    opacity: 0.2 !important;
+    transform: rotate(0deg) !important;
+}
+
+.form-group {
+    text-align: right;
+    margin-button: 5px;
+}
diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js
new file mode 100644
index 000000000..60ca1dcdd
--- /dev/null
+++ b/www/kanban/jkanban.js
@@ -0,0 +1,1398 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/**
+ * jKanban
+ * Vanilla Javascript plugin for manage kanban boards
+ *
+ * @site: http://www.riccardotartaglia.it/jkanban/
+ * @author: Riccardo Tartaglia
+ */
+
+//Require dragula
+var dragula = require('dragula');
+
+(function () {
+
+    this.jKanban = function () {
+        var self = this;
+        this.element = '';
+        this.container = '';
+        this.boardContainer = [];
+        this.dragula = dragula;
+        this.drake = '';
+        this.drakeBoard = '';
+        this.addItemButton = false;
+        this.buttonContent = '+';
+        defaults = {
+            element: '',
+            gutter: '15px',
+            widthBoard: '250px',
+            responsive: '700',
+            colors: [ "yellow", "green", "blue" , "red" , "orange" ],
+            boards: [],
+            dragBoards: true,
+            addItemButton: false,
+            buttonContent: '+',
+            dragEl: function (el, source) {
+            },
+            dragendEl: function (el) {
+            },
+            dropEl: function (el, target, source, sibling) {
+            },
+            dragBoard: function (el, source) {
+            },
+            dragendBoard: function (el) {
+            },
+            dropBoard: function (el, target, source, sibling) {
+            },
+            click: function (el) {
+            },
+            boardTitleclick: function (el, boardId) {
+            },
+            buttonClick: function (el, boardId) {
+            },
+            colorClick: function (el, boardId) {
+            },
+            removeClick: function(el, boardId) {
+            },
+            onChange: function() {
+            }
+        };
+
+        if (arguments[0] && typeof arguments[0] === "object") {
+            this.options = __extendDefaults(defaults, arguments[0]);
+        }
+
+        this.init = function () {
+            // set initial boards
+            __setBoard();
+            //set drag with dragula
+            if (window.innerWidth > self.options.responsive) {
+
+                //Init Drag Board
+                self.drakeBoard = self.dragula([self.container], {
+                    moves: function (el, source, handle, sibling) {
+                        if (!self.options.dragBoards) return false;
+                        return (handle.classList.contains('kanban-board-header') || handle.classList.contains('kanban-title-board'));
+                    },
+                    accepts: function (el, target, source, sibling) {
+                        return target.classList.contains('kanban-container');
+                    },
+                    revertOnSpill: true,
+                    direction: 'horizontal',
+                })
+                    .on('drag', function (el, source) {
+                        el.classList.add('is-moving');
+                        self.options.dragBoard(el, source);
+                        if (typeof(el.dragfn) === 'function')
+                            el.dragfn(el, source);
+                    })
+                    .on('dragend', function (el) {
+                        el.classList.remove('is-moving');
+                        self.options.dragendBoard(el);
+                        if (typeof(el.dragendfn) === 'function')
+                            el.dragendfn(el);
+                    })
+                    .on('drop', function (el, target, source, sibling) {
+                        el.classList.remove('is-moving');
+                        self.options.dropBoard(el, target, source, sibling);
+                        if (typeof(el.dropfn) === 'function')
+                            el.dropfn(el, target, source, sibling);
+                        
+                        // TODO: update board object board order
+                        console.log("Drop " + $(el).attr("data-id") + " just before " + (sibling ? $(sibling).attr("data-id") : " end "));
+                        var index1 = self.options.boards.findIndex(function(element) { return element.id==$(el).attr("data-id"); });
+                        var index2 = sibling ? self.options.boards.findIndex(function(element) { return element.id==$(sibling).attr("data-id"); }) : self.options.boards.length;
+                        console.log("Switch " + index1 + " and " + index2);
+                        if (index1<index2)
+                         index2 = index2 - 1;
+                        self.options.boards.splice(index2, 0, self.options.boards.splice(index1, 1)[0]);
+                        // send event that board has changed
+                        self.onChange();
+
+                    });
+
+                //Init Drag Item
+                self.drake = self.dragula(self.boardContainer, function () {
+                    revertOnSpill: true
+                })
+                    .on('drag', function (el, source) {
+                        // we need to calculate the position before starting to drag
+                        self.dragItemPos = self.findElementPosition(el);                  
+                    
+                        el.classList.add('is-moving');
+                        var boardJSON = __findBoardJSON(source.parentNode.dataset.id);
+                        if (boardJSON.dragTo !== undefined) {
+                            self.options.boards.map(function (board) {
+                                if (boardJSON.dragTo.indexOf(board.id) === -1 && board.id !== source.parentNode.dataset.id) {
+                                    self.findBoard(board.id).classList.add('disabled-board');
+                                }
+                            })
+                        }
+
+                        self.options.dragEl(el, source);
+                        if (el !== null && typeof(el.dragfn) === 'function')
+                            el.dragfn(el, source);
+                    })
+                    .on('dragend', function (el) {
+                        console.log("In dragend");
+                        self.options.dragendEl(el);
+                        if (el !== null && typeof(el.dragendfn) === 'function')
+                            el.dragendfn(el);
+                    })
+                    .on('cancel', function (el, container, source) {
+                        console.log("In cancel");
+                        if (confirm("Do you want to remove this item?")) {
+                           var board1 = self.options.boards.find(function(element) { return element.id==$(source.parentNode).attr("data-id"); });
+                           var pos1 = self.dragItemPos;                     
+                           board1.item.splice(pos1, 1);
+                           $(el).remove();
+                           self.onChange();
+                        }
+                    })
+                    .on('drop', function (el, target, source, sibling) {
+                        console.log("In drop");
+
+                       // TODO: update board object board order
+                        var board1 = self.options.boards.find(function(element) { return element.id==$(source.parentNode).attr("data-id"); });
+                        var board2 = self.options.boards.find(function(element) { return element.id==$(target.parentNode).attr("data-id"); }); 
+                        var pos1 = self.dragItemPos;                     
+                        var pos2 = (sibling) ? self.findElementPosition(sibling) : (board2.item.length+1);
+                        console.log("Drop element " + pos1 + " before " + pos2);
+                        
+                        // TODO: update board object item order
+  
+                        var allB = document.querySelectorAll('.kanban-board');
+                        if (allB.length > 0 && allB !== undefined) {
+                            for (var i = 0; i < allB.length; i++) {
+                                allB[i].classList.remove('disabled-board');
+                            }
+                        }
+                        var boardJSON = __findBoardJSON(source.parentNode.dataset.id);
+                        if (boardJSON.dragTo !== undefined) {
+                            if (boardJSON.dragTo.indexOf(target.parentNode.dataset.id) === -1 && target.parentNode.dataset.id !== source.parentNode.dataset.id) {
+                                self.drake.cancel(true)
+                            }
+                        }
+                        if (el !== null) {
+                            self.options.dropEl(el, target, source, sibling);
+                            el.classList.remove('is-moving');
+                            if (typeof(el.dropfn) === 'function')
+                                el.dropfn(el, target, source, sibling);
+                        }
+                        
+                        var item = board1.item[pos1];                                               
+                        // if (board1==board2 && pos2<pos1)
+                        //   pos2 = pos2;
+                         
+                        // moving element to target array   
+                        board1.item.splice(pos1, 1);
+                        board2.item.splice(pos2-1, 0, item);
+                           
+                        // send event that board has changed
+                        self.onChange();
+
+                    })
+            }
+        };
+
+        this.addElement = function (boardID, element) {
+        
+            // add Element to JSON        
+            var boardJSON = __findBoardJSON(boardID);
+            boardJSON.item.push({ title : element.title });
+            var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
+            var nodeItem = document.createElement('div');
+            nodeItem.classList.add('kanban-item');
+            if (element.id) {
+              nodeItem.setAttribute('data-eid', element.id)
+            }
+            nodeItem.innerHTML = element.title;
+            //add function
+            nodeItem.clickfn = element.click;
+            nodeItem.dragfn = element.drag;
+            nodeItem.dragendfn = element.dragend;
+            nodeItem.dropfn = element.drop;
+            __onclickHandler(nodeItem);
+            board.appendChild(nodeItem);
+            // send event that board has changed
+            self.onChange();
+            return self;
+        };
+
+        this.addForm = function (boardID, formItem) {
+            var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
+            board.appendChild(formItem);
+            return self;
+        };
+
+        this.addBoards = function (boards) {
+            var boardWidth = self.options.widthBoard;
+            var addButton = self.options.addItemButton;
+            var buttonContent = self.options.buttonContent;
+
+
+            //for on all the boards
+            for (var boardkey in boards) {
+                // single board
+                var board = boards[boardkey];
+                if (self.options.boards!==boards)
+                 self.options.boards.push(board);
+
+                //add width to container
+                /*if (self.container.style.width === '') {
+                    self.container.style.width = parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
+                } else {
+                    self.container.style.width = parseInt(self.container.style.width) + parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
+                }*/
+                
+                //create node
+                var boardNode = document.createElement('div');
+                boardNode.dataset.id = board.id;
+                boardNode.classList.add('kanban-board');
+                //set style
+                boardNode.style.width = boardWidth;
+                boardNode.style.marginLeft = self.options.gutter;
+                boardNode.style.marginRight = self.options.gutter;
+                // header board
+                var headerBoard = document.createElement('header');
+                if (board.class !== '' && board.class !== undefined)
+                    var allClasses = board.class.split(",");
+                else allClasses = [];
+                headerBoard.classList.add('kanban-board-header');
+                allClasses.map(function (value) {
+                    headerBoard.classList.add(value);
+                });
+                if (board.color !== '' && board.color !== undefined) {
+                    headerBoard.classList.add("kanban-header-" + board.color);
+                }
+                titleBoard = document.createElement('div');
+                titleBoard.classList.add('kanban-title-board');
+                titleBoard.innerHTML = board.title;
+                titleBoard.clickfn = board.boardTitleClick;
+                __onboardTitleClickHandler(titleBoard);
+                headerBoard.appendChild(titleBoard);
+                __onColorClickHandler(headerBoard);
+                
+                // if add button is true, add button to the board
+                if (addButton) {
+                    var btn = document.createElement("BUTTON");
+                    var t = document.createTextNode(buttonContent);
+                    btn.setAttribute("class", "kanban-title-button btn btn-default btn-xs");
+                    btn.appendChild(t);
+                    //var buttonHtml = '<button class="kanban-title-button btn btn-default btn-xs">'+buttonContent+'</button>'
+                    headerBoard.appendChild(btn);
+                    __onButtonClickHandler(btn, board.id);
+                }
+                //content board
+                var contentBoard = document.createElement('main');
+                contentBoard.classList.add('kanban-drag');
+                //add drag to array for dragula
+                self.boardContainer.push(contentBoard);
+                for (var itemkey in board.item) {
+                    //create item
+                    var itemKanban = board.item[itemkey];
+                    var nodeItem = document.createElement('div');
+                    nodeItem.classList.add('kanban-item');
+                    nodeItem.dataset.eid = itemKanban.id;
+                    nodeItem.innerHTML = itemKanban.title;
+                    //add function
+                    nodeItem.clickfn = itemKanban.click;
+                    nodeItem.dragfn = itemKanban.drag;
+                    nodeItem.dragendfn = itemKanban.dragend;
+                    nodeItem.dropfn = itemKanban.drop;
+                    //add click handler of item
+                    __onclickHandler(nodeItem);
+                    contentBoard.appendChild(nodeItem);
+                }
+                //footer board
+                var footerBoard = document.createElement('footer');
+                //remove button
+                var removeBoard = document.createElement('div');
+                $(removeBoard).text("-")
+                $(removeBoard).addClass("kanban-removeboard");
+                footerBoard.appendChild(removeBoard);
+                __onRemoveClickHandler(removeBoard);
+                
+                //board assembly
+                boardNode.appendChild(headerBoard);
+                boardNode.appendChild(contentBoard);
+                boardNode.appendChild(footerBoard);
+                //board add
+                self.container.appendChild(boardNode);
+            }
+
+            // send event that board has changed
+            self.onChange();
+
+            return self;
+        }
+        
+        this.setBoards = function (boards) {
+            for (var boardkey in boards) {
+                // single board
+                var board = boards[boardkey];
+                this.removeBoard(board.id);
+            }
+            this.options.boards = [];
+            this.addBoards(boards);
+        }
+    
+        this.findBoard = function (id) {
+            var el = self.element.querySelector('[data-id="' + id + '"]');
+            return el;
+        }
+
+        this.findElement = function (id) {
+            var el = self.element.querySelector('[data-eid="' + id + '"]');
+            return el;
+        }
+        
+        this.findElementPosition = function (el) {
+            // we are looking at the element position in the child array
+            return $(el.parentNode.children).index(el);
+        }
+
+        this.getBoardElements = function (id) {
+            var board = self.element.querySelector('[data-id="' + id + '"] .kanban-drag');
+            return (board.childNodes);
+        }
+
+        this.removeElement = function (el) {
+            if (typeof(el) === 'string')
+                el = self.element.querySelector('[data-eid="' + el + '"]');
+            el.remove();
+            
+            // send event that board has changed
+            self.onChange();
+
+            return self;
+        };
+
+        this.removeBoard = function (board) {
+            if (typeof(board) === 'string')
+                board = self.element.querySelector('[data-id="' + board + '"]');
+            if (board) {
+             board.remove();
+            
+             // send event that board has changed
+             self.onChange();
+            }
+            
+            return self;
+        }
+
+        // board button on click function
+        this.onButtonClick = function (el) {
+
+        }
+        
+        this.onChange = function() {
+            self.options.onChange();
+        }
+
+        this.getBoardsJSON = function (id) {
+           return self.options.boards;
+        }       
+        
+        this.getBoardJSON = function (id) {
+           return __findBoardJSON(id);
+        }       
+        
+        //PRIVATE FUNCTION
+        function __extendDefaults(source, properties) {
+            var property;
+            for (property in properties) {
+                if (properties.hasOwnProperty(property)) {
+                    source[property] = properties[property];
+                }
+            }
+            return source;
+        }
+
+        function __setBoard() {
+            self.element = document.querySelector(self.options.element);
+            //create container
+            var boardContainerOuter = document.createElement('div');
+            boardContainerOuter.classList.add('kanban-container-outer');
+            var boardContainer = document.createElement('div');
+            boardContainer.classList.add('kanban-container');
+            boardContainerOuter.appendChild(boardContainer);
+            var addBoard = document.createElement('div');
+            addBoard.id = 'kanban-addboard';
+            $(addBoard).text("+");
+            boardContainerOuter.appendChild(addBoard);
+     
+            self.container = boardContainer;
+            //add boards
+            self.addBoards(self.options.boards);
+            //appends to container
+            self.element.appendChild(boardContainerOuter);
+            
+            // send event that board has changed
+            self.onChange();
+        };
+
+        function __onclickHandler(nodeItem, clickfn) {
+            nodeItem.addEventListener('click', function (e) {
+                e.preventDefault;
+                self.options.click(this);
+                if (typeof(this.clickfn) === 'function')
+                    this.clickfn(this);
+            });
+        }
+
+        function __onboardTitleClickHandler(nodeItem, clickfn) {
+            nodeItem.addEventListener('click', function (e) {
+                e.preventDefault;
+                self.options.boardTitleClick(this);
+                if (typeof(this.clickfn) === 'function')
+                    this.clickfn(this);
+            });
+        }
+
+        function __onColorClickHandler(nodeItem, clickfn) {
+            nodeItem.addEventListener('click', function (e) {
+                e.preventDefault;
+                self.options.colorClick(this);
+                if (typeof(this.clickfn) === 'function')
+                    this.clickfn(this);
+            });
+        }
+
+       function __onRemoveClickHandler(nodeItem, clickfn) {
+            nodeItem.addEventListener('click', function (e) {
+                e.preventDefault;
+                self.options.removeClick(this);
+                if (typeof(this.clickfn) === 'function')
+                    this.clickfn(this);
+            });
+        }
+
+        function __onButtonClickHandler(nodeItem, boardId) {
+            nodeItem.addEventListener('click', function (e) {
+                e.preventDefault;
+                self.options.buttonClick(this, boardId);
+                // if(typeof(this.clickfn) === 'function')
+                //     this.clickfn(this);
+            });
+        }
+
+        function __findBoardJSON(id) {
+            var el = []
+            self.options.boards.map(function (board) {
+                if (board.id === id) {
+                    return el.push(board)
+                }
+            })
+            return el[0]
+        }
+
+
+        //init plugin
+        this.init();
+    };
+}());
+
+
+},{"dragula":9}],2:[function(require,module,exports){
+module.exports = function atoa (a, n) { return Array.prototype.slice.call(a, n); }
+
+},{}],3:[function(require,module,exports){
+'use strict';
+
+var ticky = require('ticky');
+
+module.exports = function debounce (fn, args, ctx) {
+  if (!fn) { return; }
+  ticky(function run () {
+    fn.apply(ctx || null, args || []);
+  });
+};
+
+},{"ticky":10}],4:[function(require,module,exports){
+'use strict';
+
+var atoa = require('atoa');
+var debounce = require('./debounce');
+
+module.exports = function emitter (thing, options) {
+  var opts = options || {};
+  var evt = {};
+  if (thing === undefined) { thing = {}; }
+  thing.on = function (type, fn) {
+    if (!evt[type]) {
+      evt[type] = [fn];
+    } else {
+      evt[type].push(fn);
+    }
+    return thing;
+  };
+  thing.once = function (type, fn) {
+    fn._once = true; // thing.off(fn) still works!
+    thing.on(type, fn);
+    return thing;
+  };
+  thing.off = function (type, fn) {
+    var c = arguments.length;
+    if (c === 1) {
+      delete evt[type];
+    } else if (c === 0) {
+      evt = {};
+    } else {
+      var et = evt[type];
+      if (!et) { return thing; }
+      et.splice(et.indexOf(fn), 1);
+    }
+    return thing;
+  };
+  thing.emit = function () {
+    var args = atoa(arguments);
+    return thing.emitterSnapshot(args.shift()).apply(this, args);
+  };
+  thing.emitterSnapshot = function (type) {
+    var et = (evt[type] || []).slice(0);
+    return function () {
+      var args = atoa(arguments);
+      var ctx = this || thing;
+      if (type === 'error' && opts.throws !== false && !et.length) { throw args.length === 1 ? args[0] : args; }
+      et.forEach(function emitter (listen) {
+        if (opts.async) { debounce(listen, args, ctx); } else { listen.apply(ctx, args); }
+        if (listen._once) { thing.off(type, listen); }
+      });
+      return thing;
+    };
+  };
+  return thing;
+};
+
+},{"./debounce":3,"atoa":2}],5:[function(require,module,exports){
+(function (global){
+'use strict';
+
+var customEvent = require('custom-event');
+var eventmap = require('./eventmap');
+var doc = global.document;
+var addEvent = addEventEasy;
+var removeEvent = removeEventEasy;
+var hardCache = [];
+
+if (!global.addEventListener) {
+  addEvent = addEventHard;
+  removeEvent = removeEventHard;
+}
+
+module.exports = {
+  add: addEvent,
+  remove: removeEvent,
+  fabricate: fabricateEvent
+};
+
+function addEventEasy (el, type, fn, capturing) {
+  return el.addEventListener(type, fn, capturing);
+}
+
+function addEventHard (el, type, fn) {
+  return el.attachEvent('on' + type, wrap(el, type, fn));
+}
+
+function removeEventEasy (el, type, fn, capturing) {
+  return el.removeEventListener(type, fn, capturing);
+}
+
+function removeEventHard (el, type, fn) {
+  var listener = unwrap(el, type, fn);
+  if (listener) {
+    return el.detachEvent('on' + type, listener);
+  }
+}
+
+function fabricateEvent (el, type, model) {
+  var e = eventmap.indexOf(type) === -1 ? makeCustomEvent() : makeClassicEvent();
+  if (el.dispatchEvent) {
+    el.dispatchEvent(e);
+  } else {
+    el.fireEvent('on' + type, e);
+  }
+  function makeClassicEvent () {
+    var e;
+    if (doc.createEvent) {
+      e = doc.createEvent('Event');
+      e.initEvent(type, true, true);
+    } else if (doc.createEventObject) {
+      e = doc.createEventObject();
+    }
+    return e;
+  }
+  function makeCustomEvent () {
+    return new customEvent(type, { detail: model });
+  }
+}
+
+function wrapperFactory (el, type, fn) {
+  return function wrapper (originalEvent) {
+    var e = originalEvent || global.event;
+    e.target = e.target || e.srcElement;
+    e.preventDefault = e.preventDefault || function preventDefault () { e.returnValue = false; };
+    e.stopPropagation = e.stopPropagation || function stopPropagation () { e.cancelBubble = true; };
+    e.which = e.which || e.keyCode;
+    fn.call(el, e);
+  };
+}
+
+function wrap (el, type, fn) {
+  var wrapper = unwrap(el, type, fn) || wrapperFactory(el, type, fn);
+  hardCache.push({
+    wrapper: wrapper,
+    element: el,
+    type: type,
+    fn: fn
+  });
+  return wrapper;
+}
+
+function unwrap (el, type, fn) {
+  var i = find(el, type, fn);
+  if (i) {
+    var wrapper = hardCache[i].wrapper;
+    hardCache.splice(i, 1); // free up a tad of memory
+    return wrapper;
+  }
+}
+
+function find (el, type, fn) {
+  var i, item;
+  for (i = 0; i < hardCache.length; i++) {
+    item = hardCache[i];
+    if (item.element === el && item.type === type && item.fn === fn) {
+      return i;
+    }
+  }
+}
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./eventmap":6,"custom-event":7}],6:[function(require,module,exports){
+(function (global){
+'use strict';
+
+var eventmap = [];
+var eventname = '';
+var ron = /^on/;
+
+for (eventname in global) {
+  if (ron.test(eventname)) {
+    eventmap.push(eventname.slice(2));
+  }
+}
+
+module.exports = eventmap;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{}],7:[function(require,module,exports){
+(function (global){
+
+var NativeCustomEvent = global.CustomEvent;
+
+function useNative () {
+  try {
+    var p = new NativeCustomEvent('cat', { detail: { foo: 'bar' } });
+    return  'cat' === p.type && 'bar' === p.detail.foo;
+  } catch (e) {
+  }
+  return false;
+}
+
+/**
+ * Cross-browser `CustomEvent` constructor.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent.CustomEvent
+ *
+ * @public
+ */
+
+module.exports = useNative() ? NativeCustomEvent :
+
+// IE >= 9
+'function' === typeof document.createEvent ? function CustomEvent (type, params) {
+  var e = document.createEvent('CustomEvent');
+  if (params) {
+    e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
+  } else {
+    e.initCustomEvent(type, false, false, void 0);
+  }
+  return e;
+} :
+
+// IE <= 8
+function CustomEvent (type, params) {
+  var e = document.createEventObject();
+  e.type = type;
+  if (params) {
+    e.bubbles = Boolean(params.bubbles);
+    e.cancelable = Boolean(params.cancelable);
+    e.detail = params.detail;
+  } else {
+    e.bubbles = false;
+    e.cancelable = false;
+    e.detail = void 0;
+  }
+  return e;
+}
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{}],8:[function(require,module,exports){
+'use strict';
+
+var cache = {};
+var start = '(?:^|\\s)';
+var end = '(?:\\s|$)';
+
+function lookupClass (className) {
+  var cached = cache[className];
+  if (cached) {
+    cached.lastIndex = 0;
+  } else {
+    cache[className] = cached = new RegExp(start + className + end, 'g');
+  }
+  return cached;
+}
+
+function addClass (el, className) {
+  var current = el.className;
+  if (!current.length) {
+    el.className = className;
+  } else if (!lookupClass(className).test(current)) {
+    el.className += ' ' + className;
+  }
+}
+
+function rmClass (el, className) {
+  el.className = el.className.replace(lookupClass(className), ' ').trim();
+}
+
+module.exports = {
+  add: addClass,
+  rm: rmClass
+};
+
+},{}],9:[function(require,module,exports){
+(function (global){
+'use strict';
+
+var emitter = require('contra/emitter');
+var crossvent = require('crossvent');
+var classes = require('./classes');
+var doc = document;
+var documentElement = doc.documentElement;
+
+function dragula (initialContainers, options) {
+  var len = arguments.length;
+  if (len === 1 && Array.isArray(initialContainers) === false) {
+    options = initialContainers;
+    initialContainers = [];
+  }
+  var _mirror; // mirror image
+  var _source; // source container
+  var _item; // item being dragged
+  var _offsetX; // reference x
+  var _offsetY; // reference y
+  var _moveX; // reference move x
+  var _moveY; // reference move y
+  var _initialSibling; // reference sibling when grabbed
+  var _currentSibling; // reference sibling now
+  var _copy; // item used for copying
+  var _renderTimer; // timer for setTimeout renderMirrorImage
+  var _lastDropTarget = null; // last container item was over
+  var _grabbed; // holds mousedown context until first mousemove
+
+  var o = options || {};
+  if (o.moves === void 0) { o.moves = always; }
+  if (o.accepts === void 0) { o.accepts = always; }
+  if (o.invalid === void 0) { o.invalid = invalidTarget; }
+  if (o.containers === void 0) { o.containers = initialContainers || []; }
+  if (o.isContainer === void 0) { o.isContainer = never; }
+  if (o.copy === void 0) { o.copy = false; }
+  if (o.copySortSource === void 0) { o.copySortSource = false; }
+  if (o.revertOnSpill === void 0) { o.revertOnSpill = false; }
+  if (o.removeOnSpill === void 0) { o.removeOnSpill = false; }
+  if (o.direction === void 0) { o.direction = 'vertical'; }
+  if (o.ignoreInputTextSelection === void 0) { o.ignoreInputTextSelection = true; }
+  if (o.mirrorContainer === void 0) { o.mirrorContainer = doc.body; }
+
+  var drake = emitter({
+    containers: o.containers,
+    start: manualStart,
+    end: end,
+    cancel: cancel,
+    remove: remove,
+    destroy: destroy,
+    canMove: canMove,
+    dragging: false
+  });
+
+  if (o.removeOnSpill === true) {
+    drake.on('over', spillOver).on('out', spillOut);
+  }
+
+  events();
+
+  return drake;
+
+  function isContainer (el) {
+    return drake.containers.indexOf(el) !== -1 || o.isContainer(el);
+  }
+
+  function events (remove) {
+    var op = remove ? 'remove' : 'add';
+    touchy(documentElement, op, 'mousedown', grab);
+    touchy(documentElement, op, 'mouseup', release);
+  }
+
+  function eventualMovements (remove) {
+    var op = remove ? 'remove' : 'add';
+    touchy(documentElement, op, 'mousemove', startBecauseMouseMoved);
+  }
+
+  function movements (remove) {
+    var op = remove ? 'remove' : 'add';
+    crossvent[op](documentElement, 'selectstart', preventGrabbed); // IE8
+    crossvent[op](documentElement, 'click', preventGrabbed);
+  }
+
+  function destroy () {
+    events(true);
+    release({});
+  }
+
+  function preventGrabbed (e) {
+    if (_grabbed) {
+      e.preventDefault();
+    }
+  }
+
+  function grab (e) {
+    _moveX = e.clientX;
+    _moveY = e.clientY;
+
+    var ignore = whichMouseButton(e) !== 1 || e.metaKey || e.ctrlKey;
+    if (ignore) {
+      return; // we only care about honest-to-god left clicks and touch events
+    }
+    var item = e.target;
+    var context = canStart(item);
+    if (!context) {
+      return;
+    }
+    _grabbed = context;
+    eventualMovements();
+    if (e.type === 'mousedown') {
+      if (isInput(item)) { // see also: https://github.com/bevacqua/dragula/issues/208
+        item.focus(); // fixes https://github.com/bevacqua/dragula/issues/176
+      } else {
+        e.preventDefault(); // fixes https://github.com/bevacqua/dragula/issues/155
+      }
+    }
+  }
+
+  function startBecauseMouseMoved (e) {
+    if (!_grabbed) {
+      return;
+    }
+    if (whichMouseButton(e) === 0) {
+      release({});
+      return; // when text is selected on an input and then dragged, mouseup doesn't fire. this is our only hope
+    }
+    // truthy check fixes #239, equality fixes #207
+    if (e.clientX !== void 0 && e.clientX === _moveX && e.clientY !== void 0 && e.clientY === _moveY) {
+      return;
+    }
+    if (o.ignoreInputTextSelection) {
+      var clientX = getCoord('clientX', e);
+      var clientY = getCoord('clientY', e);
+      var elementBehindCursor = doc.elementFromPoint(clientX, clientY);
+      if (isInput(elementBehindCursor)) {
+        return;
+      }
+    }
+
+    var grabbed = _grabbed; // call to end() unsets _grabbed
+    eventualMovements(true);
+    movements();
+    end();
+    start(grabbed);
+
+    var offset = getOffset(_item);
+    _offsetX = getCoord('pageX', e) - offset.left;
+    _offsetY = getCoord('pageY', e) - offset.top;
+
+    classes.add(_copy || _item, 'gu-transit');
+    renderMirrorImage();
+    drag(e);
+  }
+
+  function canStart (item) {
+    if (drake.dragging && _mirror) {
+      return;
+    }
+    if (isContainer(item)) {
+      return; // don't drag container itself
+    }
+    var handle = item;
+    while (getParent(item) && isContainer(getParent(item)) === false) {
+      if (o.invalid(item, handle)) {
+        return;
+      }
+      item = getParent(item); // drag target should be a top element
+      if (!item) {
+        return;
+      }
+    }
+    var source = getParent(item);
+    if (!source) {
+      return;
+    }
+    if (o.invalid(item, handle)) {
+      return;
+    }
+
+    var movable = o.moves(item, source, handle, nextEl(item));
+    if (!movable) {
+      return;
+    }
+
+    return {
+      item: item,
+      source: source
+    };
+  }
+
+  function canMove (item) {
+    return !!canStart(item);
+  }
+
+  function manualStart (item) {
+    var context = canStart(item);
+    if (context) {
+      start(context);
+    }
+  }
+
+  function start (context) {
+    if (isCopy(context.item, context.source)) {
+      _copy = context.item.cloneNode(true);
+      drake.emit('cloned', _copy, context.item, 'copy');
+    }
+
+    _source = context.source;
+    _item = context.item;
+    _initialSibling = _currentSibling = nextEl(context.item);
+
+    drake.dragging = true;
+    drake.emit('drag', _item, _source);
+  }
+
+  function invalidTarget () {
+    return false;
+  }
+
+  function end () {
+    if (!drake.dragging) {
+      return;
+    }
+    var item = _copy || _item;
+    drop(item, getParent(item));
+  }
+
+  function ungrab () {
+    _grabbed = false;
+    eventualMovements(true);
+    movements(true);
+  }
+
+  function release (e) {
+    ungrab();
+
+    if (!drake.dragging) {
+      return;
+    }
+    var item = _copy || _item;
+    var clientX = getCoord('clientX', e);
+    var clientY = getCoord('clientY', e);
+    var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY);
+    var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY);
+    if (dropTarget && ((_copy && o.copySortSource) || (!_copy || dropTarget !== _source))) {
+      drop(item, dropTarget);
+    } else if (o.removeOnSpill) {
+      remove();
+    } else {
+      cancel();
+    }
+  }
+
+  function drop (item, target) {
+    var parent = getParent(item);
+    if (_copy && o.copySortSource && target === _source) {
+      parent.removeChild(_item);
+    }
+    if (isInitialPlacement(target)) {
+      drake.emit('cancel', item, _source, _source);
+    } else {
+      drake.emit('drop', item, target, _source, _currentSibling);
+    }
+    cleanup();
+  }
+
+  function remove () {
+    if (!drake.dragging) {
+      return;
+    }
+    var item = _copy || _item;
+    var parent = getParent(item);
+    if (parent) {
+      parent.removeChild(item);
+    }
+    drake.emit(_copy ? 'cancel' : 'remove', item, parent, _source);
+    cleanup();
+  }
+
+  function cancel (revert) {
+    if (!drake.dragging) {
+      return;
+    }
+    var reverts = arguments.length > 0 ? revert : o.revertOnSpill;
+    var item = _copy || _item;
+    var parent = getParent(item);
+    var initial = isInitialPlacement(parent);
+    if (initial === false && reverts) {
+      if (_copy) {
+        if (parent) {
+          parent.removeChild(_copy);
+        }
+      } else {
+        _source.insertBefore(item, _initialSibling);
+      }
+    }
+    if (initial || reverts) {
+      drake.emit('cancel', item, _source, _source);
+    } else {
+      drake.emit('drop', item, parent, _source, _currentSibling);
+    }
+    cleanup();
+  }
+
+  function cleanup () {
+    var item = _copy || _item;
+    ungrab();
+    removeMirrorImage();
+    if (item) {
+      classes.rm(item, 'gu-transit');
+    }
+    if (_renderTimer) {
+      clearTimeout(_renderTimer);
+    }
+    drake.dragging = false;
+    if (_lastDropTarget) {
+      drake.emit('out', item, _lastDropTarget, _source);
+    }
+    drake.emit('dragend', item);
+    _source = _item = _copy = _initialSibling = _currentSibling = _renderTimer = _lastDropTarget = null;
+  }
+
+  function isInitialPlacement (target, s) {
+    var sibling;
+    if (s !== void 0) {
+      sibling = s;
+    } else if (_mirror) {
+      sibling = _currentSibling;
+    } else {
+      sibling = nextEl(_copy || _item);
+    }
+    return target === _source && sibling === _initialSibling;
+  }
+
+  function findDropTarget (elementBehindCursor, clientX, clientY) {
+    var target = elementBehindCursor;
+    while (target && !accepted()) {
+      target = getParent(target);
+    }
+    return target;
+
+    function accepted () {
+      var droppable = isContainer(target);
+      if (droppable === false) {
+        return false;
+      }
+
+      var immediate = getImmediateChild(target, elementBehindCursor);
+      var reference = getReference(target, immediate, clientX, clientY);
+      var initial = isInitialPlacement(target, reference);
+      if (initial) {
+        return true; // should always be able to drop it right back where it was
+      }
+      return o.accepts(_item, target, _source, reference);
+    }
+  }
+
+  function drag (e) {
+    if (!_mirror) {
+      return;
+    }
+    e.preventDefault();
+
+    var clientX = getCoord('clientX', e);
+    var clientY = getCoord('clientY', e);
+    var x = clientX - _offsetX;
+    var y = clientY - _offsetY;
+
+    _mirror.style.left = x + 'px';
+    _mirror.style.top = y + 'px';
+
+    var item = _copy || _item;
+    var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY);
+    var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY);
+    var changed = dropTarget !== null && dropTarget !== _lastDropTarget;
+    if (changed || dropTarget === null) {
+      out();
+      _lastDropTarget = dropTarget;
+      over();
+    }
+    var parent = getParent(item);
+    if (dropTarget === _source && _copy && !o.copySortSource) {
+      if (parent) {
+        parent.removeChild(item);
+      }
+      return;
+    }
+    var reference;
+    var immediate = getImmediateChild(dropTarget, elementBehindCursor);
+    if (immediate !== null) {
+      reference = getReference(dropTarget, immediate, clientX, clientY);
+    } else if (o.revertOnSpill === true && !_copy) {
+      reference = _initialSibling;
+      dropTarget = _source;
+    } else {
+      if (_copy && parent) {
+        parent.removeChild(item);
+      }
+      return;
+    }
+    if (
+      (reference === null && changed) ||
+      reference !== item &&
+      reference !== nextEl(item)
+    ) {
+      _currentSibling = reference;
+      dropTarget.insertBefore(item, reference);
+      drake.emit('shadow', item, dropTarget, _source);
+    }
+    function moved (type) { drake.emit(type, item, _lastDropTarget, _source); }
+    function over () { if (changed) { moved('over'); } }
+    function out () { if (_lastDropTarget) { moved('out'); } }
+  }
+
+  function spillOver (el) {
+    classes.rm(el, 'gu-hide');
+  }
+
+  function spillOut (el) {
+    if (drake.dragging) { classes.add(el, 'gu-hide'); }
+  }
+
+  function renderMirrorImage () {
+    if (_mirror) {
+      return;
+    }
+    var rect = _item.getBoundingClientRect();
+    _mirror = _item.cloneNode(true);
+    _mirror.style.width = getRectWidth(rect) + 'px';
+    _mirror.style.height = getRectHeight(rect) + 'px';
+    classes.rm(_mirror, 'gu-transit');
+    classes.add(_mirror, 'gu-mirror');
+    o.mirrorContainer.appendChild(_mirror);
+    touchy(documentElement, 'add', 'mousemove', drag);
+    classes.add(o.mirrorContainer, 'gu-unselectable');
+    drake.emit('cloned', _mirror, _item, 'mirror');
+  }
+
+  function removeMirrorImage () {
+    if (_mirror) {
+      classes.rm(o.mirrorContainer, 'gu-unselectable');
+      touchy(documentElement, 'remove', 'mousemove', drag);
+      getParent(_mirror).removeChild(_mirror);
+      _mirror = null;
+    }
+  }
+
+  function getImmediateChild (dropTarget, target) {
+    var immediate = target;
+    while (immediate !== dropTarget && getParent(immediate) !== dropTarget) {
+      immediate = getParent(immediate);
+    }
+    if (immediate === documentElement) {
+      return null;
+    }
+    return immediate;
+  }
+
+  function getReference (dropTarget, target, x, y) {
+    var horizontal = o.direction === 'horizontal';
+    var reference = target !== dropTarget ? inside() : outside();
+    return reference;
+
+    function outside () { // slower, but able to figure out any position
+      var len = dropTarget.children.length;
+      var i;
+      var el;
+      var rect;
+      for (i = 0; i < len; i++) {
+        el = dropTarget.children[i];
+        rect = el.getBoundingClientRect();
+        if (horizontal && (rect.left + rect.width / 2) > x) { return el; }
+        if (!horizontal && (rect.top + rect.height / 2) > y) { return el; }
+      }
+      return null;
+    }
+
+    function inside () { // faster, but only available if dropped inside a child element
+      var rect = target.getBoundingClientRect();
+      if (horizontal) {
+        return resolve(x > rect.left + getRectWidth(rect) / 2);
+      }
+      return resolve(y > rect.top + getRectHeight(rect) / 2);
+    }
+
+    function resolve (after) {
+      return after ? nextEl(target) : target;
+    }
+  }
+
+  function isCopy (item, container) {
+    return typeof o.copy === 'boolean' ? o.copy : o.copy(item, container);
+  }
+}
+
+function touchy (el, op, type, fn) {
+  var touch = {
+    mouseup: 'touchend',
+    mousedown: 'touchstart',
+    mousemove: 'touchmove'
+  };
+  var pointers = {
+    mouseup: 'pointerup',
+    mousedown: 'pointerdown',
+    mousemove: 'pointermove'
+  };
+  var microsoft = {
+    mouseup: 'MSPointerUp',
+    mousedown: 'MSPointerDown',
+    mousemove: 'MSPointerMove'
+  };
+  if (global.navigator.pointerEnabled) {
+    crossvent[op](el, pointers[type], fn);
+  } else if (global.navigator.msPointerEnabled) {
+    crossvent[op](el, microsoft[type], fn);
+  } else {
+    crossvent[op](el, touch[type], fn);
+    crossvent[op](el, type, fn);
+  }
+}
+
+function whichMouseButton (e) {
+  if (e.touches !== void 0) { return e.touches.length; }
+  if (e.which !== void 0 && e.which !== 0) { return e.which; } // see https://github.com/bevacqua/dragula/issues/261
+  if (e.buttons !== void 0) { return e.buttons; }
+  var button = e.button;
+  if (button !== void 0) { // see https://github.com/jquery/jquery/blob/99e8ff1baa7ae341e94bb89c3e84570c7c3ad9ea/src/event.js#L573-L575
+    return button & 1 ? 1 : button & 2 ? 3 : (button & 4 ? 2 : 0);
+  }
+}
+
+function getOffset (el) {
+  var rect = el.getBoundingClientRect();
+  return {
+    left: rect.left + getScroll('scrollLeft', 'pageXOffset'),
+    top: rect.top + getScroll('scrollTop', 'pageYOffset')
+  };
+}
+
+function getScroll (scrollProp, offsetProp) {
+  if (typeof global[offsetProp] !== 'undefined') {
+    return global[offsetProp];
+  }
+  if (documentElement.clientHeight) {
+    return documentElement[scrollProp];
+  }
+  return doc.body[scrollProp];
+}
+
+function getElementBehindPoint (point, x, y) {
+  var p = point || {};
+  var state = p.className;
+  var el;
+  p.className += ' gu-hide';
+  el = doc.elementFromPoint(x, y);
+  p.className = state;
+  return el;
+}
+
+function never () { return false; }
+function always () { return true; }
+function getRectWidth (rect) { return rect.width || (rect.right - rect.left); }
+function getRectHeight (rect) { return rect.height || (rect.bottom - rect.top); }
+function getParent (el) { return el.parentNode === doc ? null : el.parentNode; }
+function isInput (el) { return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT' || isEditable(el); }
+function isEditable (el) {
+  if (!el) { return false; } // no parents were editable
+  if (el.contentEditable === 'false') { return false; } // stop the lookup
+  if (el.contentEditable === 'true') { return true; } // found a contentEditable element in the chain
+  return isEditable(getParent(el)); // contentEditable is set to 'inherit'
+}
+
+function nextEl (el) {
+  return el.nextElementSibling || manually();
+  function manually () {
+    var sibling = el;
+    do {
+      sibling = sibling.nextSibling;
+    } while (sibling && sibling.nodeType !== 1);
+    return sibling;
+  }
+}
+
+function getEventHost (e) {
+  // on touchend event, we have to use `e.changedTouches`
+  // see http://stackoverflow.com/questions/7192563/touchend-event-properties
+  // see https://github.com/bevacqua/dragula/issues/34
+  if (e.targetTouches && e.targetTouches.length) {
+    return e.targetTouches[0];
+  }
+  if (e.changedTouches && e.changedTouches.length) {
+    return e.changedTouches[0];
+  }
+  return e;
+}
+
+function getCoord (coord, e) {
+  var host = getEventHost(e);
+  var missMap = {
+    pageX: 'clientX', // IE8
+    pageY: 'clientY' // IE8
+  };
+  if (coord in missMap && !(coord in host) && missMap[coord] in host) {
+    coord = missMap[coord];
+  }
+  return host[coord];
+}
+
+module.exports = dragula;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./classes":8,"contra/emitter":4,"crossvent":5}],10:[function(require,module,exports){
+var si = typeof setImmediate === 'function', tick;
+if (si) {
+  tick = function (fn) { setImmediate(fn); };
+} else {
+  tick = function (fn) { setTimeout(fn, 0); };
+}
+
+module.exports = tick;
+},{}]},{},[1]);
diff --git a/www/kanban/kanban.css b/www/kanban/kanban.css
new file mode 100644
index 000000000..ae001b198
--- /dev/null
+++ b/www/kanban/kanban.css
@@ -0,0 +1,25 @@
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
diff --git a/www/kanban/main.js b/www/kanban/main.js
new file mode 100644
index 000000000..7f2197b24
--- /dev/null
+++ b/www/kanban/main.js
@@ -0,0 +1,43 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
+define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
+    '/common/dom-ready.js',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js',
+], function (nThen, ApiConfig, DomReady, RequireConfig, SFCommonO) {
+    var requireConfig = RequireConfig();
+
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        DomReady.onReady(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
+        };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        document.getElementById('sbox-iframe').setAttribute('src',
+            ApiConfig.httpSafeOrigin + '/kanban/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
+        };
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        SFCommonO.start({
+            useCreationScreen: true
+        });
+    });
+});