diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index 843341092..0660e1b2d 100644
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@@ -1,7 +1,7 @@
 template(name="listHeader")
   .list-header.js-list-header(
     class="{{#if limitToShowCardsCount}}list-header-card-count{{/if}}"
-    class="{{#if colorClass}}list-header-{{colorClass}}{{/if}}")
+    class=colorClass)
     +inlinedForm
       +editListTitleForm
     else
@@ -153,7 +153,7 @@ template(name="setListColorPopup")
   form.edit-label
     .palette-colors: each colors
       // note: we use the swimlane palette to have more than just the border
-      span.card-label.palette-color.js-palette-color(class="swimlane-{{color}}")
+      span.card-label.palette-color.js-palette-color(class=colorClass)
         if(isSelected color)
           i.fa.fa-check
     button.primary.confirm.js-submit {{_ 'save'}}
diff --git a/client/components/main/myCards.jade b/client/components/main/myCards.jade
index e5ba58631..3baa77662 100644
--- a/client/components/main/myCards.jade
+++ b/client/components/main/myCards.jade
@@ -11,21 +11,20 @@ template(name="myCardsModalTitle")
 
 template(name="myCards")
   .wrapper
-    each board in cardsFind
-      .board-title
-        | {{_ 'board' }}:
-        +viewer
-          = board.title
-      each swimlane in board.swimlanes
-        .swimlane-title
-          | {{_ 'swimlane' }}:
+    each board in myBoards
+      .my-cards-board-wrapper
+        .board-title
           +viewer
-            = swimlane.title
-        each list in swimlane.lists
-          .list-title
-            | {{_ 'list' }}:
+            = board.title
+        each swimlane in board.mySwimlanes
+          .swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
             +viewer
-              = list.title
-            each card in list.cards
-              a.minicard-wrapper.card-title(href="{{pathFor 'card' boardId=board.id slug=board.slug cardId=card._id }}")
-                +minicard(card)
+              = swimlane.title
+          each list in swimlane.myLists
+            .my-cards-list-wrapper
+              .list-title(class=list.colorClass)
+                +viewer
+                  = list.title
+              each card in list.myCards
+                a.minicard-wrapper.card-title(href=card.absoluteUrl)
+                  +minicard(card)
diff --git a/client/components/main/myCards.js b/client/components/main/myCards.js
index 91d5d5f72..cf2a7fe7c 100644
--- a/client/components/main/myCards.js
+++ b/client/components/main/myCards.js
@@ -30,7 +30,7 @@ BlazeComponent.extendComponent({
     // subManager.subscribe('myCards');
   },
 
-  cardsFind() {
+  myBoards() {
     const userId = Meteor.userId();
     const boards = [];
     let board = null;
@@ -39,8 +39,8 @@ BlazeComponent.extendComponent({
 
     const cursor = Cards.find(
       {
-        archived: false,
         $or: [{ members: userId }, { assignees: userId }],
+        archived: false,
       },
       {
         sort: {
@@ -51,8 +51,6 @@ BlazeComponent.extendComponent({
         },
       },
     );
-    // eslint-disable-next-line no-console
-    // console.log('cursor:', cursor);
 
     let newBoard = false;
     let newSwimlane = false;
@@ -61,67 +59,50 @@ BlazeComponent.extendComponent({
     cursor.forEach(card => {
       // eslint-disable-next-line no-console
       // console.log('card:', card.title);
-      if (list === null || list.id !== card.listId) {
+      if (list === null || card.listId !== list._id) {
         // eslint-disable-next-line no-console
         // console.log('new list');
-        let l = Lists.findOne(card.listId);
-        if (!l) {
-          l = {
-            _id: card.listId,
-            title: 'undefined list',
-          };
+        list = card.list();
+        if (list.archived) {
+          list = null;
+          return;
         }
-        // eslint-disable-next-line no-console
-        // console.log('list:', l);
-        list = {
-          id: l._id,
-          title: l.title,
-          cards: [card],
-        };
+        list.myCards = [card];
         newList = true;
       }
-      if (swimlane === null || card.swimlaneId !== swimlane.id) {
+      if (swimlane === null || card.swimlaneId !== swimlane._id) {
         // eslint-disable-next-line no-console
         // console.log('new swimlane');
-        let s = Swimlanes.findOne(card.swimlaneId);
-        if (!s) {
-          s = {
-            _id: card.swimlaneId,
-            title: 'undefined swimlane',
-          };
+        swimlane = card.swimlane();
+        if (swimlane.archived) {
+          swimlane = null;
+          return;
         }
-        // eslint-disable-next-line no-console
-        // console.log('swimlane:', s);
-        swimlane = {
-          id: s._id,
-          title: s.title,
-          lists: [list],
-        };
+        swimlane.myLists = [list];
         newSwimlane = true;
       }
-      if (board === null || card.boardId !== board.id) {
+      if (board === null || card.boardId !== board._id) {
         // eslint-disable-next-line no-console
         // console.log('new board');
-        const b = Boards.findOne(card.boardId);
+        board = card.board();
+        if (board.archived) {
+          board = null;
+          return;
+        }
         // eslint-disable-next-line no-console
         // console.log('board:', b, b._id, b.title);
-        board = {
-          id: b._id,
-          title: b.title,
-          slug: b.slug,
-          swimlanes: [swimlane],
-        };
+        board.mySwimlanes = [swimlane];
         newBoard = true;
       }
 
       if (newBoard) {
         boards.push(board);
       } else if (newSwimlane) {
-        board.swimlanes.push(swimlane);
+        board.mySwimlanes.push(swimlane);
       } else if (newList) {
-        swimlane.lists.push(list);
+        swimlane.myLists.push(list);
       } else {
-        list.cards.push(card);
+        list.myCards.push(card);
       }
 
       newBoard = false;
@@ -129,6 +110,36 @@ BlazeComponent.extendComponent({
       newList = false;
     });
 
+    // sort the data structure
+    boards.forEach(board => {
+      board.mySwimlanes.forEach(swimlane => {
+        swimlane.myLists.forEach(list => {
+          list.myCards.sort((a, b) => {
+            return a.sort - b.sort;
+          });
+        });
+        swimlane.myLists.sort((a, b) => {
+          return a.sort - b.sort;
+        });
+      });
+      board.mySwimlanes.sort((a, b) => {
+        return a.sort - b.sort;
+      });
+    });
+
+    boards.sort((a, b) => {
+      let x = a.sort;
+      let y = b.sort;
+
+      // show the template board last
+      if (a.type === 'template-container') {
+        x = 99999999;
+      } else if (b.type === 'template-container') {
+        y = 99999999;
+      }
+      return x - y;
+    });
+
     // eslint-disable-next-line no-console
     // console.log('boards:', boards);
     return boards;
diff --git a/client/components/main/myCards.styl b/client/components/main/myCards.styl
index a139a17dc..7075c6fbb 100644
--- a/client/components/main/myCards.styl
+++ b/client/components/main/myCards.styl
@@ -19,22 +19,58 @@
       font-size: 1.4em
       margin: 5px
 
+.my-cards-board-wrapper
+  border-radius: 8px
+  //padding: 0.5rem
+  max-width: 400px
+  border-width: 8px
+  border-color: grey
+  border-style: solid
+  margin-bottom: 2rem
+  margin-right: auto
+  margin-left: auto
+
 .board-title
   font-size: 1.4rem
   font-weight: bold
+  padding: 0.5rem
+  background-color: grey
+  color: white
 
 .swimlane-title
-  font-size: 1.2rem
+  font-size: 1.1rem
   font-weight: bold
-  margin-left: 1em
-  margin-top: 10px
+  padding: 0.5rem
+  padding-bottom: 0.4rem
+  margin-top: 0
+  margin-bottom: 0.5rem
+  //border-top: black 1px solid
+  //border-bottom: black 1px solid
+  text-align: center
+
+.swimlane-default-color
+  background-color: lightgrey
 
 .list-title
-  margin-top: 5px
   font-weight: bold
-  margin-left: 1.6rem
+  font-size: 1.1rem
+  //padding-bottom: 0
+  //margin-bottom: 0
+  text-align: center
+  margin-bottom: 0.7rem
+
+.list-color-bar
+  //height: 0.3rem
+  margin-bottom: 0.3rem
+  margin-top: 0
+  padding-top: 0
+
+.my-cards-list-wrapper
+  margin: 1rem
+  margin-top: 1rem
+  border-radius: 5px
+  padding: 1.5rem
+  padding-top: 0.75rem
 
 .card-title
   margin-top: 5px
-  margin-left: 1.8rem
-  max-width: 350px;
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index c7c9381e5..1653ba4ba 100644
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/client/components/swimlanes/swimlaneHeader.jade
@@ -1,5 +1,5 @@
 template(name="swimlaneHeader")
-  .swimlane-header-wrap.js-swimlane-header(class='{{#if colorClass}}swimlane-{{colorClass}}{{/if}}')
+  .swimlane-header-wrap.js-swimlane-header(class=colorClass)
     if this.isTemplateContainer
         +swimlaneFixedHeader(this)
     else
diff --git a/models/cards.js b/models/cards.js
index 7cd274a31..8475db937 100644
--- a/models/cards.js
+++ b/models/cards.js
@@ -461,6 +461,10 @@ Cards.helpers({
     return Lists.findOne(this.listId);
   },
 
+  swimlane() {
+    return Swimlanes.findOne(this.swimlaneId);
+  },
+
   board() {
     return Boards.findOne(this.boardId);
   },
diff --git a/models/lists.js b/models/lists.js
index b123ab4f7..0fc2a24bc 100644
--- a/models/lists.js
+++ b/models/lists.js
@@ -257,7 +257,7 @@ Lists.helpers({
   },
 
   colorClass() {
-    if (this.color) return this.color;
+    if (this.color) return `list-header-${this.color}`;
     return '';
   },
 
diff --git a/models/swimlanes.js b/models/swimlanes.js
index aa7016f7e..2e200454a 100644
--- a/models/swimlanes.js
+++ b/models/swimlanes.js
@@ -216,7 +216,7 @@ Swimlanes.helpers({
   },
 
   colorClass() {
-    if (this.color) return this.color;
+    if (this.color) return `swimlane-${this.color}`;
     return '';
   },
 
diff --git a/server/publications/boards.js b/server/publications/boards.js
index 27b034662..e538f9c72 100644
--- a/server/publications/boards.js
+++ b/server/publications/boards.js
@@ -27,6 +27,7 @@ Meteor.publish('boards', function() {
     {
       fields: {
         _id: 1,
+        boardId: 1,
         archived: 1,
         slug: 1,
         title: 1,
@@ -55,14 +56,16 @@ Meteor.publish('mySwimlanes', function() {
 
   return Swimlanes.find(
     {
-      archived: false,
+      // archived: false,
       _id: { $in: swimlanes },
     },
     {
       fields: {
         _id: 1,
         title: 1,
+        boardId: 1,
         type: 1,
+        color: 1,
         sort: 1,
       },
       // sort: {
@@ -85,13 +88,16 @@ Meteor.publish('myLists', function() {
 
   return Lists.find(
     {
-      archived: false,
+      // archived: false,
       _id: { $in: lists },
     },
     {
       fields: {
         _id: 1,
+        boardId: 1,
+        swimlaneId: 1,
         title: 1,
+        color: 1,
         type: 1,
         sort: 1,
       },