diff --git a/webapp/src/components/Board.tsx b/webapp/src/components/Board.tsx
index 1caa2cd..f60ffbf 100644
--- a/webapp/src/components/Board.tsx
+++ b/webapp/src/components/Board.tsx
@@ -556,10 +556,10 @@ class Board extends Component<Props, State> {
                                                       })}
 
                                                       {this.props.viewOnly && !this.props.demo ?
-                                                        <div className="flex mt-1 w-2 h-16  flex-no-shrink justify-center">
+                                                        <div className="flex mt-1 w-2 h-24  flex-no-shrink justify-center">
                                                         </div>
                                                         :
-                                                        <div className="flex mt-1 w-2 h-16  flex-no-shrink justify-center">
+                                                        <div className="flex mt-1 w-2 h-24  flex-no-shrink justify-center">
                                                           <div className="flex font-bold text-xl showme"><button className=" hover:text-gray-800 text-gray-500" onClick={() => this.setState({ showCreateSubWorkflowModal: true, createSubWorkflowWorkflowId: w.id })}>+</button></div>
                                                         </div>
                                                       }
@@ -749,7 +749,7 @@ class Board extends Component<Props, State> {
                                 )
                             }
                             {providedDroppable.placeholder}
-                            <div className="flex flex-col  p-2  text-sm ">
+                            <div className="flex flex-col  p-2  text-xs ">
 
                               <div>
                                 {!viewOnly && <NewCard>
diff --git a/webapp/src/components/Card.tsx b/webapp/src/components/Card.tsx
index c5e54c6..e5ea848 100644
--- a/webapp/src/components/Card.tsx
+++ b/webapp/src/components/Card.tsx
@@ -25,21 +25,21 @@ class Card extends Component<Props, State> {
 
     const color = this.props.color && (this.props.color !== Color.WHITE) ? this.props.color : null
 
-    const title = this.props.title.length > 50 ? this.props.title.substring(0, 50) + " (...)" : this.props.title
+    const title = this.props.title
 
     return (
       <div>
-        <div style={{ fontSize: '.70rem' }} className={"flex flex-row flex-no-shrink w-32   bg-white  overflow-hidden border   " + (this.props.small ? " " : " h-16 ") + (color ? " border-l-4 " + colorToBorderColorClass(color) + " " : " " + colorToBorderColorClass(Color.WHITE) + " ")}>
+        <div style={{ fontSize: '12px' }} className={"flex flex-row flex-no-shrink w-36 rounded-sm   bg-white  overflow-hidden border   " + (this.props.small ? " " : " h-24 ") + (color ? " border-l-4 " + colorToBorderColorClass(color) + " " : " " + colorToBorderColorClass(Color.WHITE) + " ")}>
 
           <Link className="flex flex-col flex-grow" to={this.props.link}>
 
 
-            <div className="flex-grow p-1 overflow-hidden">
+            <div className="flex-grow p-2 font-normal     overflow-hidden ">
               <span className={this.props.status === "CLOSED" ? "line-through" : ""}> {title} </span>
             </div>
 
 
-            <div className=" flex p-1 flex-row">
+            <div className=" flex p-2 flex-row">
               {this.props.nbrOfItems && !(this.props.nbrOfItems === 0) ?
                 <div className=" flex ">
                   <div>{this.props.nbrOfItems} items</div>
@@ -81,7 +81,7 @@ class Card extends Component<Props, State> {
 
         </div>
         {this.props.bottomLink &&
-          <div className=" flex w-32 h-6  flex-no-shrink -mt-1 -mb-2  justify-center">
+          <div className=" flex w-36 h-6  flex-no-shrink -mt-1 -mb-2  justify-center">
             <div className="flex showme font-bold text-xl   "><button className=" hover:text-gray-800 text-gray-500" onClick={this.props.bottomLink}>+</button></div>
           </div>
         }
diff --git a/webapp/src/components/EmptyCard.tsx b/webapp/src/components/EmptyCard.tsx
index 8080f9c..aa876ef 100644
--- a/webapp/src/components/EmptyCard.tsx
+++ b/webapp/src/components/EmptyCard.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 class EmptyCard extends Component {
   render() {
     return (
-      <div className="p-1 w-32 h-16  ">
+      <div className="p-1 w-36 h-24  ">
 
       </div>
     );
diff --git a/webapp/src/components/NewCard.tsx b/webapp/src/components/NewCard.tsx
index cc754c6..d823cd2 100644
--- a/webapp/src/components/NewCard.tsx
+++ b/webapp/src/components/NewCard.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 class NewCard extends Component {
   render() {
     return (
-      <div className="p-1 w-32 h-16  border border-dashed border-gray-800 rounded items-center justify-center ">
+      <div className="p-1 w-36 h-24  border border-dashed border-gray-300 rounded-sm items-center justify-center ">
         <div className="flex h-full">
           {this.props.children}
         </div>
diff --git a/webapp/src/components/NewDimCard.tsx b/webapp/src/components/NewDimCard.tsx
index 66a7cc0..265ab7f 100644
--- a/webapp/src/components/NewDimCard.tsx
+++ b/webapp/src/components/NewDimCard.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 class NewDimCard extends Component {
   render() {
     return (
-      <div className="flex p-1 w-32 h-16  border border-dashed border-gray-200 rounded items-center justify-center ">
+      <div className="flex p-1 w-36 h-24  border border-dashed border-gray-200 rounded items-center justify-center ">
         <div className="flex">
           {this.props.children}
         </div>