diff --git a/src/components/Card.js b/src/components/Card.js
index f16f445d6..3790b44e3 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -38,12 +38,14 @@ class Card extends Component {
   })
 
   render() {
-    const {id, index, cardStyle, editable, customCardLayout, ...otherProps} = this.props
+    const {id, index, cardStyle, draggable, editable, customCardLayout, ...otherProps} = this.props
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
+    const isDragDisabled = !draggable
     return (
-      <Draggable key={id} draggableId={id} index={index}>
+      <Draggable key={id} draggableId={id} index={index} isDragDisabled={isDragDisabled}>
         {(dragProvided, dragSnapshot) => {
-          const dragStyle = this.getItemStyle(dragSnapshot.isDragging, dragProvided.draggableProps.style)
+          const draggablePropsStyle = dragProvided.draggableProps && dragProvided.draggableProps.style
+          const dragStyle = this.getItemStyle(dragSnapshot.isDragging, draggablePropsStyle)
           return (
             <div>
               <MovableCardWrapper
diff --git a/stories/BoardStyling.story.js b/stories/BoardStyling.story.js
index d8f3b2c2c..1e3e68cb7 100644
--- a/stories/BoardStyling.story.js
+++ b/stories/BoardStyling.story.js
@@ -11,6 +11,6 @@ const data = require('./data.json')
 storiesOf('Advanced Features', module).add(
   'Board Styling',
   withInfo('Change the background and other css styles for the board container')(() =>
-    <Board data={data} style={{}} className='boardContainer' />
+    <Board data={data} style={{padding: '30px 20px'}} className='boardContainer' />
   )
 )