diff --git a/ui/src/components/table-data-table/story.js b/ui/src/components/table-data-table/story.js
index 7fd33496..bdaaa917 100644
--- a/ui/src/components/table-data-table/story.js
+++ b/ui/src/components/table-data-table/story.js
@@ -7,35 +7,36 @@ const {
 
 const Table = require('./');
 
+const memberDetail = (name) => {
+  return (
+    <div>
+      <h4>{name}</h4>
+      <small>{name}@biztech.com</small>
+    </div>
+  );
+};
+
 const columns = [{
   title: 'Memeber',
-  dataID: 'member',
-  dataKey: 'member',
-  width: ''
+  width: '50%'
 }, {
   title: 'Status',
-  dataID: 'status',
-  dataKey: 'status',
-  width: ''
+  width: '10%'
 }, {
   title: 'Role',
-  dataID: 'role',
-  dataKey: 'role',
-  width: ''
+  width: '20%'
 }, {
   title: '',
-  dataID: 'delete',
-  dataKey: 'delete',
-  width: ''
+  width: '20%'
 }];
 
 const data = [{
-  name: 'Nicola',
+  name: memberDetail('Nicola'),
   status: 'Active',
   role: 'Owner',
   key: 1
 }, {
-  name: 'Alex',
+  name: memberDetail('Alex'),
   status: 'Inactive',
   role: 'Read Only',
   key: 2
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index 50e231e1..13590e2a 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -15,7 +15,7 @@ const StyledRow = styled.tr`
   border: solid ${remcalc(1)} #d8d8d8;
 `;
 
-const StyledTaleItem = styled.td`
+const StyledTableItem = styled.td`
   padding: ${remcalc(24)};
 `;
 
@@ -27,7 +27,7 @@ const Row = ({
   const rowItems = Object.keys(_dataItem).map( (item, i) => {
     const value = _dataItem[item];
 
-    return <StyledTaleItem key={i}>{value}</StyledTaleItem>;
+    return <StyledTableItem key={i}>{value}</StyledTableItem>;
   });
 
   return (