3 files changed, 17 insertions, 2 deletions
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 066e52ec..77593a74 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -74,7 +74,7 @@ BlazeComponent.extendComponent({
       helper: 'clone',
       handle: '.checklist-title',
       items: '.js-checklist',
-      placeholder: 'js-checklist placeholder',
+      placeholder: 'checklist placeholder',
       distance: 7,
       start(evt, ui) {
         ui.placeholder.height(ui.helper.height());
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index 4753c2c6..c79eb5aa 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -18,7 +18,7 @@ template(name="checklists")
         | {{_ 'add-checklist'}}...
 
 template(name="checklistDetail")
-  .js-checklist
+  .js-checklist.checklist
     +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
       +editChecklistItemForm(checklist = checklist)
     else
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index 3f4445ab..7b35488f 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -78,12 +78,27 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   bottom: -600px
   right: 0
 
+.checklist
+  background: darken(white, 3%)
+
+  &.placeholder
+    background: darken(white, 20%)
+    border-radius: 2px
+
+  &.ui-sortable-helper
+    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
+                0 0 1px rgba(0, 0, 0, .5)
+    transform: rotate(4deg)
+    cursor: grabbing
+
+
 .checklist-item
   margin: 0 0 0.5em 1.33em
   line-height: 25px
   font-size: 1.1em
   margin-top: 3px
   display: flex
+  background: darken(white, 3%)
 
   &.placeholder
     background: darken(white, 20%)