diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index 843341092..e601d547b 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
diff --git a/client/components/main/myCards.jade b/client/components/main/myCards.jade
index a91364376..c9cbdb785 100644
--- a/client/components/main/myCards.jade
+++ b/client/components/main/myCards.jade
@@ -12,31 +12,19 @@ template(name="myCardsModalTitle")
 template(name="myCards")
   .wrapper
     each board in cardsFind
-      .board-title
-        ul
-          li
-            | {{_ 'board' }}:
-          li
+      .my-cards-board-wrapper
+        .board-title
+          +viewer
+            = board.title
+        each swimlane in board.swimlanes
+          .swimlane-title(class=swimlane.colorClass)
             +viewer
-              = board.title
-      each swimlane in board.swimlanes
-        .swimlane-title
-          ul
-            li
-              | {{_ 'swimlane' }}:
-            li
-              +viewer
-                = swimlane.title
-        each list in swimlane.lists
-          .list-title
-            ul
-              li
-                | {{_ 'list' }}:
-              li
+              = swimlane.title
+          each list in swimlane.lists
+            .my-cards-list-wrapper
+              .list-title(class=list.colorClass)
                 +viewer
                   = list.title
-            ul
               each card in list.cards
-                li
-                  a.minicard-wrapper.card-title(href="{{pathFor 'card' boardId=board.id slug=board.slug cardId=card._id }}")
-                    +minicard(card)
+                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..db5ed6815 100644
--- a/client/components/main/myCards.js
+++ b/client/components/main/myCards.js
@@ -69,6 +69,7 @@ BlazeComponent.extendComponent({
           l = {
             _id: card.listId,
             title: 'undefined list',
+            colorClass: '',
           };
         }
         // eslint-disable-next-line no-console
@@ -76,6 +77,7 @@ BlazeComponent.extendComponent({
         list = {
           id: l._id,
           title: l.title,
+          colorClass: l.colorClass(),
           cards: [card],
         };
         newList = true;
@@ -87,6 +89,7 @@ BlazeComponent.extendComponent({
         if (!s) {
           s = {
             _id: card.swimlaneId,
+            colorClass: '',
             title: 'undefined swimlane',
           };
         }
@@ -94,6 +97,9 @@ BlazeComponent.extendComponent({
         // console.log('swimlane:', s);
         swimlane = {
           id: s._id,
+          colorClass: s.colorClass()
+            ? s.colorClass()
+            : 'swimlane-default-color',
           title: s.title,
           lists: [list],
         };
@@ -107,6 +113,7 @@ BlazeComponent.extendComponent({
         // console.log('board:', b, b._id, b.title);
         board = {
           id: b._id,
+          colorClass: b.colorClass(),
           title: b.title,
           slug: b.slug,
           swimlanes: [swimlane],
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/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..ba3b0ca01 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,
@@ -62,7 +63,9 @@ Meteor.publish('mySwimlanes', function() {
       fields: {
         _id: 1,
         title: 1,
+        boardId: 1,
         type: 1,
+        color: 1,
         sort: 1,
       },
       // sort: {
@@ -91,7 +94,10 @@ Meteor.publish('myLists', function() {
     {
       fields: {
         _id: 1,
+        boardId: 1,
+        swimlaneId: 1,
         title: 1,
+        color: 1,
         type: 1,
         sort: 1,
       },