diff --git a/config/webpack-base.config.js b/config/webpack-base.config.js
index d3e19d55b46927717349d21198ddc97bf6129715..1fccc7d1901cae63d403c9192737693e9fc0b4ac 100644
--- a/config/webpack-base.config.js
+++ b/config/webpack-base.config.js
@@ -187,7 +187,6 @@ module.exports = {
     },
 
     plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
         new HtmlWebpackExcludeAssetsPlugin(),
 
         new webpack.DefinePlugin({
diff --git a/config/webpack-production.config.js b/config/webpack-production.config.js
index 4a5995bec69ffa80df0d159c5b9afaf4fbf5d8ac..6da94433a20add16f152c6b1ca46dacb4b3bcaa2 100644
--- a/config/webpack-production.config.js
+++ b/config/webpack-production.config.js
@@ -15,6 +15,8 @@ module.exports = webpackMerge(commonConfig, {
     },
 
     plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
         new webpack.LoaderOptionsPlugin({
             minimize: true,
             debug: false
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index ceb7ab8f73c2dcdc26eb58254ba3bfc5a4c08b98..2374ad4b4ddf3d08871dd7f9de65560749180de7 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -11,8 +11,8 @@ import {serverInfoRequest} from 'actions/serverInfo';
 import {setAppMounted} from 'actions/appMounted';
 
 import theme from './theme';
-import Header from './header';
-import Footer from './footer/index';
+import Header from './layout/Header';
+import Footer from './layout/Footer';
 
 const ssr: boolean = process.env.SSR === 'true';
 const token: string = typeof window !== 'undefined' && cookies.get('access_token');
diff --git a/src/ui/pages/descriptor/descriptors/DescriptorCard.tsx b/src/ui/catalog/descriptor/DescriptorCard.tsx
similarity index 97%
rename from src/ui/pages/descriptor/descriptors/DescriptorCard.tsx
rename to src/ui/catalog/descriptor/DescriptorCard.tsx
index 9fc0a061ab85bf3450dc2470cf22be5dad7e58e8..2a0efc6f019979bbbc856fd329524ef052b68f94 100644
--- a/src/ui/pages/descriptor/descriptors/DescriptorCard.tsx
+++ b/src/ui/catalog/descriptor/DescriptorCard.tsx
@@ -183,12 +183,6 @@ class DescriptorCard extends React.Component<IDescriptorCardProps, any> {
                         title: classes.titleCard,
                     } }
                     title={ descriptor.title }
-                        /*(
-                            <Link className={ `${classes.blue} ${classes.bold}` } to={ [ '/descriptors/', descriptor.uuid ] }>
-                                { descriptor.title }
-                            </Link>
-                        )
-                    }*/
                 />
                 <Divider />
                 <CardContent className={ classes.cardContent } >
@@ -228,7 +222,7 @@ class DescriptorCard extends React.Component<IDescriptorCardProps, any> {
                                 </Grid>
                                 <Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
                                     <Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
-                                        { T(`crop.${descriptor.crop}`) }
+                                        { T(`crop.${descriptor.crop}`) || descriptor.crop }
                                     </Typography>
                                 </Grid>
                               </Grid>
diff --git a/src/ui/common/DOI.tsx b/src/ui/common/DOI.tsx
index 0059dacb7e8b820ac45512dd9dfe523de76eb8ef..08b96110ee242df641d544f5c20912c765fcce12 100644
--- a/src/ui/common/DOI.tsx
+++ b/src/ui/common/DOI.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 interface IMyProps extends React.Props<any> {
 	value: string;
-  noPrefix: boolean;
+  noPrefix?: boolean;
 };
 
 /**
@@ -10,7 +10,7 @@ interface IMyProps extends React.Props<any> {
  */
 export default function DOI({
 	value,
-  noPrefix,
+  noPrefix = false,
 }: IMyProps) {
   if (value) {
 	   return (
diff --git a/src/ui/content-header/ContentHeader.tsx b/src/ui/common/heading/ContentHeader.tsx
similarity index 100%
rename from src/ui/content-header/ContentHeader.tsx
rename to src/ui/common/heading/ContentHeader.tsx
diff --git a/src/ui/content-header/ContentHeaderWithButton.tsx b/src/ui/common/heading/ContentHeaderWithButton.tsx
similarity index 100%
rename from src/ui/content-header/ContentHeaderWithButton.tsx
rename to src/ui/common/heading/ContentHeaderWithButton.tsx
diff --git a/src/ui/common/markdown/index.tsx b/src/ui/common/markdown/index.tsx
index 94645847ce555e20b72a8323b826672639d06a8c..356af29364f3d11bb88a7c55af39c7174f784bda 100644
--- a/src/ui/common/markdown/index.tsx
+++ b/src/ui/common/markdown/index.tsx
@@ -4,13 +4,14 @@ import Input from 'material-ui/Input';
 import InputLabel from 'material-ui/Input/InputLabel';
 import FormControl from 'material-ui/Form/FormControl';
 
-interface IMarkdownTextProps extends React.ClassAttributes<any> {
+interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
     source: string;
 }
 
-export default function Markdown({source}: IMarkdownTextProps) {
+export default function Markdown({source, style, className}: IMarkdownTextProps) {
+
   if (source) {
-    return ( <MarkdownComponent className="markdown" source={ source } /> );
+    return ( <div style={ style }><MarkdownComponent className={ `markdown ${className}` } source={ source } /></div> );
   } else {
     return null;
   }
diff --git a/src/ui/common/tables/index.tsx b/src/ui/common/tables/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8f4862235509afacb87493245bc2f64215df45d
--- /dev/null
+++ b/src/ui/common/tables/index.tsx
@@ -0,0 +1,60 @@
+//
+// Tables
+//
+import * as React from 'react';
+import MuiTable from 'material-ui/Table';
+import {TableBody as MuiTableBody, TableCell as MuiTableCell, TableFooter as MuiTableFooter, TableHead as MuiTableHead, TableRow as MuiTableRow} from 'material-ui/Table';
+
+interface ITableProps extends React.HTMLProps<HTMLElement> {
+  headers: string[] | any;
+  children: any;
+  widths?: string[];
+};
+
+function Table({ headers, children, widths = [] }: ITableProps) {
+  // console.log('headers are', typeof headers, headers instanceof Array);
+  return (
+      <MuiTable className="genesys-table" style={ { tableLayout: 'auto' } }>
+        { widths && (
+          <colgroup>
+          { widths.map((width, i) => <col key={ +i } width={ width } />) }
+          </colgroup>
+        ) }
+        <MuiTableHead>
+          { (! (headers instanceof Array)) && headers }
+          { headers instanceof Array && (
+            <MuiTableRow>
+            { headers.map((header) => (
+              <MuiTableCell key={ header }>{ header }</MuiTableCell>
+            ),
+            ) }
+            </MuiTableRow>
+          ) }
+        </MuiTableHead>
+        <MuiTableBody>
+          { children }
+        </MuiTableBody>
+        <MuiTableFooter>
+            <MuiTableRow style={ { height: '2rem' } } />
+        </MuiTableFooter>
+      </MuiTable>
+    );
+}
+
+function TableRow({ children, style }: React.HTMLProps<HTMLElement>) {
+  return (
+    <MuiTableRow { ...style }>
+      { children }
+    </MuiTableRow>
+    );
+}
+
+function TableCell({ children, style, className }: React.HTMLProps<HTMLElement>) {
+  return (
+    <MuiTableCell className={ className } style={ { width: 'unset', ...style } }>
+      { children }
+    </MuiTableCell>
+    );
+}
+
+export {Table, TableRow, TableCell};
diff --git a/src/ui/content/index.tsx b/src/ui/content/index.tsx
deleted file mode 100644
index 0a7517ed369546c92196a53cf6a51deee2ec2840..0000000000000000000000000000000000000000
--- a/src/ui/content/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-interface IContainerProps extends React.Props<any> {
-    routes: JSX.Element;
-};
-
-export default function Content({routes}: IContainerProps) {
-    return (
-       <div className="container">
-           { routes }
-       </div>
-    );
-}
diff --git a/src/ui/footer/index.tsx b/src/ui/layout/Footer/index.tsx
similarity index 100%
rename from src/ui/footer/index.tsx
rename to src/ui/layout/Footer/index.tsx
diff --git a/src/ui/header/leftMenu.tsx b/src/ui/layout/Header/LeftMenu.tsx
similarity index 100%
rename from src/ui/header/leftMenu.tsx
rename to src/ui/layout/Header/LeftMenu.tsx
diff --git a/src/ui/header/UserMenuComponent.tsx b/src/ui/layout/Header/UserMenuComponent.tsx
similarity index 83%
rename from src/ui/header/UserMenuComponent.tsx
rename to src/ui/layout/Header/UserMenuComponent.tsx
index 87a4f1f5b7d3bc33737a246de58c922e403f2fad..3e4c564860cea7fd59023b66ed35f07920537a48 100644
--- a/src/ui/header/UserMenuComponent.tsx
+++ b/src/ui/layout/Header/UserMenuComponent.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
+
 import {withStyles} from 'material-ui/styles';
 import Button from 'material-ui/Button';
 import Menu, { MenuItem } from 'material-ui/Menu';
@@ -8,6 +9,7 @@ interface IUserMenuComponentProps extends React.ClassAttributes<any> {
     classes: any;
     logoutRequest: () => Promise<any>;
     router: any;
+    userName: string;
 }
 
 const styles = {
@@ -43,9 +45,14 @@ class UserMenuComponent extends React.Component<IUserMenuComponentProps, any> {
         this.handleRequestClose();
     }
 
+    public goToGuiTesting = () => {
+        this.props.router.push('/gui');
+        this.handleRequestClose();
+    }
+
     public render() {
 
-        const { classes, logoutRequest } = this.props;
+        const { classes, logoutRequest, userName } = this.props;
         return (
             <div>
                 <Button
@@ -54,7 +61,7 @@ class UserMenuComponent extends React.Component<IUserMenuComponentProps, any> {
                     aria-haspopup="true"
                     onClick={ this.handleClick }
                 >
-                    User Menu
+                    { userName }
                 </Button>
                 <Menu
                     id="user-menu"
@@ -62,8 +69,9 @@ class UserMenuComponent extends React.Component<IUserMenuComponentProps, any> {
                     open={ this.state.open }
                     onClose={ this.handleRequestClose }
                 >
-                    <MenuItem onClick={ this.goToAdministratorDashboard } >Administrator Dashboard</MenuItem>
+                    <MenuItem onClick={ this.goToAdministratorDashboard } >My Dashboard</MenuItem>
                     <MenuItem onClick={ logoutRequest } >Logout</MenuItem>
+                    <MenuItem onClick={ this.goToGuiTesting }>UI Tests</MenuItem>
                 </Menu>
             </div>
         );
diff --git a/src/ui/header/index.tsx b/src/ui/layout/Header/index.tsx
similarity index 95%
rename from src/ui/header/index.tsx
rename to src/ui/layout/Header/index.tsx
index fa78316297718c8f7a49ff986be2b62b5b7173ef..b2b7d6847e27005dd3ea51ef6948b6b31187bb2c 100644
--- a/src/ui/header/index.tsx
+++ b/src/ui/layout/Header/index.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router';
 import AppBar from 'material-ui/AppBar';
 import { withStyles } from 'material-ui/styles';
 import Toolbar from 'material-ui/Toolbar';
 import IconButton from 'material-ui/IconButton';
 import MenuIcon from 'material-ui-icons/Menu';
-import LeftMenu from './leftMenu';
 
-import { Link } from 'react-router';
 import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles';
 import {saveCookies} from 'utilities';
+
 import UserMenuComponent from './UserMenuComponent';
+import LeftMenu from './LeftMenu';
 
 const styleSheet = {
     root: {
@@ -105,8 +106,9 @@ class Header extends React.Component<IHeaderProps, any> {
     }
 
     private renderLogin = (roles: string[]) => {
+        // console.log(this.props.login);
         if (this.hasRole(roles)) {
-            return <UserMenuComponent logoutRequest={ this.logout } router={ this.props.router }/>;
+            return <UserMenuComponent userName= { this.props.login.user_name } logoutRequest={ this.logout } router={ this.props.router }/>;
         } else {
             return <Link className= { this.props.classes.linkLogin } to="/login">Login</Link>;
         }
diff --git a/src/ui/pages/administrator-dashboard/DashboardButton.tsx b/src/ui/pages/dashboard/DashboardButton.tsx
similarity index 100%
rename from src/ui/pages/administrator-dashboard/DashboardButton.tsx
rename to src/ui/pages/dashboard/DashboardButton.tsx
diff --git a/src/ui/pages/dashboard/DashboardWrapper.tsx b/src/ui/pages/dashboard/DashboardWrapper.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c9feda7a61270d1c9f85f6c8cd348f19f2e10cf5
--- /dev/null
+++ b/src/ui/pages/dashboard/DashboardWrapper.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {withStyles} from 'material-ui/styles';
+
+import DataTabs from 'ui/common/administration/tabs';
+import ContentHeader from 'ui/common/heading/ContentHeader';
+
+const styles = {
+    root: {
+        width: '100%',
+    },
+    content: {
+        backgroundColor: '#D4D2C6',
+    },
+    bigNavButtonWrapper: {
+        padding: '10px 10px 10px 10px',
+    },
+    bigNavButton: {
+        width: '100%',
+        backgroundColor: '#88BC40',
+        color: '#fff',
+    },
+};
+
+class DashboardWrapper extends React.Component<any> {
+
+    public render() {
+        const { children } = this.props;
+
+        return (
+            <div>
+                <ContentHeader title="My Dashboard"
+                               subTitle="Manage data published on Genesys"
+                />
+                { children }
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles)(DashboardWrapper);
diff --git a/src/ui/pages/data-in-preparation/DataInPreparation.tsx b/src/ui/pages/dashboard/data-in-preparation/DataInPreparation.tsx
similarity index 86%
rename from src/ui/pages/data-in-preparation/DataInPreparation.tsx
rename to src/ui/pages/dashboard/data-in-preparation/DataInPreparation.tsx
index 313994f3d628763682f1a5a581c5619c584127c5..6e49516ab5101d9e47ccbc4ff8d1df687bf41c50 100644
--- a/src/ui/pages/data-in-preparation/DataInPreparation.tsx
+++ b/src/ui/pages/dashboard/data-in-preparation/DataInPreparation.tsx
@@ -6,8 +6,7 @@ import {Page} from 'model/common.model';
 import {Dataset} from 'model/dataset.model';
 import {Descriptor} from 'model/descriptors.model';
 
-import ContentHeader from 'ui/content-header/ContentHeader';
-import ContentHeaderWithButton from 'ui/content-header/ContentHeaderWithButton';
+import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 import DataTabs from 'ui/common/administration/tabs';
 
 interface IDataInPreparationProps extends React.ClassAttributes<any> {
@@ -34,10 +33,6 @@ const descriptorSortOptions = {
 
 const DataInPreparation = ({listDatasetsRequest, datasetPage, loadDescriptors, descriptorPage, classes}: IDataInPreparationProps) => (
     <div>
-        <ContentHeader
-            title="Data publication"
-            subTitle="Manage your Catalog Published Descriptors"
-        />
         <ContentHeaderWithButton
             title="Data in preparation"
             buttonName="BACK TO DASHBOARD"
diff --git a/src/ui/pages/data-in-preparation/index.tsx b/src/ui/pages/dashboard/data-in-preparation/index.tsx
similarity index 100%
rename from src/ui/pages/data-in-preparation/index.tsx
rename to src/ui/pages/dashboard/data-in-preparation/index.tsx
diff --git a/src/ui/pages/data-published/DataPublished.tsx b/src/ui/pages/dashboard/data-published/DataPublished.tsx
similarity index 86%
rename from src/ui/pages/data-published/DataPublished.tsx
rename to src/ui/pages/dashboard/data-published/DataPublished.tsx
index a1a3c1f4716d57c74516f8233c53a18bd7a4dcd4..d1b281d2f1cd4f7e0b420dc5be24806a9629bb51 100644
--- a/src/ui/pages/data-published/DataPublished.tsx
+++ b/src/ui/pages/dashboard/data-published/DataPublished.tsx
@@ -5,8 +5,7 @@ import {IDatasetFilter, IDescriptorFilter} from 'model/filter.model';
 import {Page} from 'model/common.model';
 import {Dataset} from 'model/dataset.model';
 import {Descriptor} from 'model/descriptors.model';
-import ContentHeader from 'ui/content-header/ContentHeader';
-import ContentHeaderWithButton from 'ui/content-header/ContentHeaderWithButton';
+import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 import DataTabs from 'ui/common/administration/tabs';
 
 interface IDataPublishedProps extends React.ClassAttributes<any> {
@@ -33,10 +32,6 @@ const descriptorSortOptions = {
 
 const DataPublished = ({listDatasetsRequest, datasetPage, loadDescriptors, descriptorPage, classes}: IDataPublishedProps) => (
     <div>
-        <ContentHeader
-            title="Data publication"
-            subTitle="Manage your Catalog Published Descriptors"
-        />
         <ContentHeaderWithButton
             title="Published data"
             buttonName="BACK TO DASHBOARD"
diff --git a/src/ui/pages/data-published/index.tsx b/src/ui/pages/dashboard/data-published/index.tsx
similarity index 100%
rename from src/ui/pages/data-published/index.tsx
rename to src/ui/pages/dashboard/data-published/index.tsx
diff --git a/src/ui/pages/administrator-dashboard/index.tsx b/src/ui/pages/dashboard/index.tsx
similarity index 74%
rename from src/ui/pages/administrator-dashboard/index.tsx
rename to src/ui/pages/dashboard/index.tsx
index 33a4011561b9f950fca27e3f9bddfb5afa903add..b06fc304964a05c6b348f8339bf991cea89be15a 100644
--- a/src/ui/pages/administrator-dashboard/index.tsx
+++ b/src/ui/pages/dashboard/index.tsx
@@ -10,9 +10,11 @@ import {IDatasetFilter, IDescriptorFilter} from 'model/filter.model';
 import {Page} from 'model/common.model';
 import {Dataset} from 'model/dataset.model';
 import {Descriptor} from 'model/descriptors.model';
+
+import Paper from 'material-ui/Paper';
+import {Table, TableRow, TableCell} from 'ui/common/tables';
 import DataTabs from 'ui/common/administration/tabs';
-import ContentHeader from 'ui/content-header/ContentHeader';
-import ContentHeaderWithButton from 'ui/content-header/ContentHeaderWithButton';
+import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 
 import DashboardButton from './DashboardButton';
 
@@ -97,9 +99,6 @@ class AdministrationDashboard extends React.Component<IAdministrationDashboardPr
 
         return (
             <div>
-                <ContentHeader title="Data publication"
-                               subTitle="Your published data on Genesys"
-                />
                 <ContentHeaderWithButton title="What do you want to do?"/>
                 <div className={ classes.content }>
                     <Grid container spacing={ 0 }>
@@ -123,6 +122,42 @@ class AdministrationDashboard extends React.Component<IAdministrationDashboardPr
                         </Grid>
                     </Grid>
 
+                    <Paper>
+                      <Table widths={ [ '10px', null, null, null, '200px' ] } headers={ (
+                          <TableRow>
+                            <TableCell style={ { maxWidth: '10px' } }>No.</TableCell>
+                            <TableCell>Title</TableCell>
+                            <TableCell>Created</TableCell>
+                            <TableCell>Status</TableCell>
+                            <TableCell style={ { minWidth: '200px' } } />
+                          </TableRow>
+                        ) }>
+                        <TableRow>
+                          <TableCell className="font-bold">1</TableCell>
+                          <TableCell>ha ha2</TableCell>
+                          <TableCell>ha ha3</TableCell>
+                          <TableCell>Okay</TableCell>
+                          <TableCell>ha ha4</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell>2</TableCell>
+                          <TableCell>ha ha2</TableCell>
+                          <TableCell>ha ha3</TableCell>
+                          <TableCell>Okay</TableCell>
+                          <TableCell>ha ha4</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell>3</TableCell>
+                          <TableCell>ha ha2</TableCell>
+                          <TableCell>ha ha3</TableCell>
+                          <TableCell>Nay okay</TableCell>
+                          <TableCell>ha ha4</TableCell>
+                        </TableRow>
+                      </Table>
+                    </Paper>
+
+                    <hr />
+
                     <DataTabs
                         listDatasetsRequest={ listMyDatasets }
                         datasetPage={ datasetPage }
diff --git a/src/ui/pages/data-publisher/index.tsx b/src/ui/pages/data-publisher/index.tsx
deleted file mode 100644
index f38f60ab7843b1d6bcfef29f64ae495b56e944f3..0000000000000000000000000000000000000000
--- a/src/ui/pages/data-publisher/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import {bindActionCreators} from 'redux';
-import {connect} from 'react-redux';
-import Grid from 'material-ui/Grid';
-import {withStyles} from 'material-ui/styles';
-
-import TopDataPublisherSection from './top-section';
-import MainDataPublisherSection from './main-section';
-import {createDatasetRequest} from 'actions/dataset';
-
-interface IDatasetsProps extends React.ClassAttributes<any> {
-    classes: any;
-    router: any;
-    createDatasetRequest: () => void;
-}
-
-const styles = {
-    root: {
-        margin: '0px',
-    },
-};
-
-class DataPublisher extends React.Component<IDatasetsProps, any> {
-
-    public render() {
-
-        const {classes} = this.props;
-
-        return (
-            <Grid container spacing={ 0 } className={ classes.root }>
-                <Grid item xs={ 12 }>
-                    <TopDataPublisherSection/>
-                    <MainDataPublisherSection/>
-                </Grid>
-            </Grid>
-        );
-    }
-}
-
-const StyledComponent = withStyles(styles)(DataPublisher);
-
-const mapDispatchToProps = (dispatch) => bindActionCreators({
-    createDatasetRequest,
-}, dispatch);
-
-export default connect(
-    null, mapDispatchToProps,
-)(StyledComponent);
diff --git a/src/ui/pages/data-publisher/main-section/index.tsx b/src/ui/pages/data-publisher/main-section/index.tsx
deleted file mode 100644
index cedf609829469a7f3e91f7f54e5d39f034cc1fc4..0000000000000000000000000000000000000000
--- a/src/ui/pages/data-publisher/main-section/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react';
-import {connect} from 'react-redux';
-import {Link} from 'react-router';
-import AppBar from 'material-ui/AppBar';
-import Tabs, {Tab} from 'material-ui/Tabs';
-import {withStyles} from 'material-ui/styles';
-import Button from 'material-ui/Button';
-
-import DataInPreparation from '../tabs/DataInPreparation';
-import DataPublished from '../tabs/DataPublished';
-import Grid from 'material-ui/Grid';
-
-interface IMainDataPublisherSection extends React.ClassAttributes<any> {
-    classes: any;
-    location: any;
-    params: any;
-}
-
-const styleSheet = {
-    root: {
-        borderBottom: '1px solid #B2AFA6',
-    },
-    appBar: {
-        border: 'none',
-        background: 'none',
-        boxShadow: 'none',
-    },
-    appBarrBox: {
-        backgroundColor: '#D4D2C6',
-    },
-    barButtonBox: {
-        backgroundColor: '#D4D2C6',
-    },
-    buttonPublish: {
-        color: 'white',
-        backgroundColor: '#88ba42',
-        margin: '6px',
-        float: 'right',
-    },
-};
-
-class MainDataPublisherSection extends React.Component<IMainDataPublisherSection, any> {
-    public constructor(props: any) {
-        super(props);
-
-        this.state = {
-            value: 0,
-        };
-    }
-
-    protected handleChange = (event, value) => {
-        this.setState({value});
-    }
-
-    public render() {
-
-        const {classes} = this.props;
-
-        const {value} = this.state;
-
-        return (
-            <Grid container spacing={ 0 }>
-                <Grid container spacing={ 0 } className={ classes.root }>
-                    <Grid item xs={ 6 } className={ classes.appBarrBox }>
-                        <AppBar position="static" color="default" className={ classes.appBar }>
-                            <Tabs value={ value } onChange={ this.handleChange }
-                                  indicatorColor="#88B943">
-
-                                <Tab label="DATA IN PREPARATION"/>
-                                <Tab label="DATA PUBLISHED"/>
-                            </Tabs>
-                        </AppBar>
-                    </Grid>
-                    <Grid item xs={ 6 } className={ classes.barButtonBox }>
-                        <Button className={ classes.buttonPublish }>PUBLISH PHENOTYPIC DATA</Button>
-                    </Grid>
-                </Grid>
-                <Grid container spacing={ 0 }>
-                    { value === 0 && <DataInPreparation/> }
-                    { value === 1 && <DataPublished/> }
-                </Grid>
-            </Grid>
-        );
-    };
-
-}
-
-export default withStyles(styleSheet)<{}>(MainDataPublisherSection);
diff --git a/src/ui/pages/data-publisher/tabs/DataInPreparation.tsx b/src/ui/pages/data-publisher/tabs/DataInPreparation.tsx
deleted file mode 100644
index 35bfeff9b51bd42a653d94f213c282ca347dbb68..0000000000000000000000000000000000000000
--- a/src/ui/pages/data-publisher/tabs/DataInPreparation.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {connect} from 'react-redux';
-import {Link} from 'react-router';
-import Grid from 'material-ui/Grid';
-import {withStyles} from 'material-ui/styles';
-import {bindActionCreators} from 'redux';
-
-import {Dataset} from 'model/dataset.model';
-import {Page} from 'model/common.model';
-import {IDatasetFilter} from 'model/filter.model';
-import {listDatasetsRequest} from 'actions/dataset';
-import PaginationComponent from 'ui/common/pagination';
-
-import DataInPreparationItem from './data-preparation-item';
-
-interface IDataInPreparation extends React.ClassAttributes<any> {
-    classes: any;
-    location: any;
-    params: any;
-    datasetsArr: any;
-    listDatasetsRequest: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter) => void;
-    pageObj: Page<Dataset>;
-}
-
-const styles = {
-    root: {
-        color: 'black',
-        margin: '0px',
-        backgroundColor: '#E8E5E0',
-    },
-};
-
-class DataInPreparation extends React.Component<IDataInPreparation, any> {
-
-    public componentDidMount() {
-        if (this.props.datasetsArr.length === 0) {
-            this.props.listDatasetsRequest();
-        }
-    }
-
-    public render() {
-        const { classes, datasetsArr, pageObj, listDatasetsRequest } = this.props;
-        return (
-            <Grid container className={ classes.root }>
-                <PaginationComponent pageObj={ pageObj } onChange={ listDatasetsRequest }/>
-                <DataInPreparationItem classes={ classes } datasetArr={ datasetsArr }/>
-            </Grid>
-        );
-    };
-
-}
-
-const mapStateToProps = (state, ownProps) => ({
-    datasetsArr: state.pagination.datasetPage.content ? state.pagination.datasetPage.content : [],
-    pageObj: state.pagination.datasetPage,
-});
-
-const mapDispatchToProps = (dispatch) => bindActionCreators({
-    listDatasetsRequest,
-}, dispatch);
-
-export default connect(
-    mapStateToProps, mapDispatchToProps,
-)(withStyles(styles)(DataInPreparation));
diff --git a/src/ui/pages/data-publisher/tabs/DataPublished.tsx b/src/ui/pages/data-publisher/tabs/DataPublished.tsx
deleted file mode 100644
index 9b460ecc2eb1b523b085506313e463eb5a938ae1..0000000000000000000000000000000000000000
--- a/src/ui/pages/data-publisher/tabs/DataPublished.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import {connect} from 'react-redux';
-import { Link } from 'react-router';
-import {withStyles} from 'material-ui/styles';
-
-interface IDataPublished extends React.ClassAttributes<any> {
-    classes: any;
-    location: any;
-    params: any;
-}
-
-const styleSheet = {
-    root: {
-        color: 'black',
-    },
-};
-
-class DataPublished extends React.Component<IDataPublished, any> {
-
-    public render() {
-
-        const {classes} = this.props;
-
-        return (
-            <div>
-                Data Published body
-            </div>
-        );
-    };
-
-}
-
-export default withStyles(styleSheet)<{}>(DataPublished);
diff --git a/src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx b/src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx
deleted file mode 100644
index 9e355df39b04e58eeca0ae7cf94ec1e30ccdf6f9..0000000000000000000000000000000000000000
--- a/src/ui/pages/data-publisher/tabs/data-preparation-item/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from 'react';
-import {connect} from 'react-redux';
-import {Link} from 'react-router';
-import Grid from 'material-ui/Grid';
-import Button from 'material-ui/Button';
-
-import {withStyles} from 'material-ui/styles';
-import Typography from 'material-ui/Typography';
-
-interface IDataInPreparationItem extends React.ClassAttributes<any> {
-    classes: any;
-    location: any;
-    datasetArr: any;
-}
-
-const styleSheet = {
-    root: {
-        margin: '8px',
-        backgroundColor: 'white',
-    },
-    infoText: {
-        color: '#016DB6',
-    },
-    title: {
-        borderBottom: '1px solid #D4D4D4',
-    },
-    infoTitle: {
-        color: '#016DB6',
-        padding: '8px',
-    },
-    titleEditButton: {
-        float: 'right',
-        margin: '8px',
-    },
-    infoNumber: {
-        padding: '8px',
-    },
-    infoBody: {
-        padding: '8px',
-    },
-    infoBodyRight: {
-        padding: '8px',
-    },
-};
-
-class DataInPreparationItem extends React.Component<IDataInPreparationItem, any> {
-
-    public render() {
-
-        const {classes, datasetArr} = this.props;
-
-        return (
-
-            <Grid container spacing={ 0 }>
-                {
-                    (
-                        datasetArr.map((dataset, index) => (
-                            <Grid container key={ dataset.id } spacing={ 0 } className={ classes.root }>
-                                <Grid item  xs={ 12 }>
-                                    <Grid container spacing={ 0 } className={ classes.title }>
-                                        <Grid item xs={ 1 }>
-                                            <Typography type="title" className={ classes.infoNumber }>
-                                                { dataset.id }
-                                            </Typography>
-                                        </Grid>
-                                        <Grid item xs={ 9 }>
-                                            <Typography type="title" className={ classes.infoTitle }>
-                                                { dataset.title }
-                                            </Typography>
-                                        </Grid>
-                                        <Grid item xs={ 2 }>
-                                            <Button raised className={ classes.titleEditButton }>EDIT</Button>
-                                        </Grid>
-                                    </Grid>
-                                    <Grid container spacing={ 0 }>
-                                        <Grid item xs={ 1 }/>
-                                        <Grid item xs={ 9 } className={ classes.infoBody }>
-                                            <div>
-                                                <Typography>
-                                                    <span>Description: </span><span
-                                                    className={ classes.infoText }>{ dataset.description }</span>
-                                                </Typography>
-                                            </div>
-                                            <div>
-                                                <Typography>
-                                                    <span>Dataset creators: </span><span className={ classes.infoText }>LOREM LORE, LOREM LORE</span>
-                                                </Typography>
-                                            </div>
-                                        </Grid>
-                                        <Grid item xs={ 2 } className={ classes.infoBodyRight }>
-                                            Near Completion
-                                        </Grid>
-                                    </Grid>
-                                </Grid>
-                            </Grid>
-                        ))
-                    )
-                }
-            </Grid>
-        );
-    };
-
-}
-
-export default withStyles(styleSheet)<any>(DataInPreparationItem);
diff --git a/src/ui/pages/data-publisher/top-section/index.tsx b/src/ui/pages/data-publisher/top-section/index.tsx
deleted file mode 100644
index f3321fd64da95a0fbafa8672172ba782b42ee128..0000000000000000000000000000000000000000
--- a/src/ui/pages/data-publisher/top-section/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import {connect} from 'react-redux';
-import {Link} from 'react-router';
-import Grid from 'material-ui/Grid';
-import {withStyles} from 'material-ui/styles';
-
-interface ITopDataPublisherSection extends React.ClassAttributes<any> {
-    classes: any;
-    location: any;
-    params: any;
-}
-
-const styleSheet = {
-    header: {
-        backgroundColor: '#88ba42',
-        fontSize: '24px',
-        color: '#fff',
-        padding: '8px',
-    },
-    headText: {
-        fontSize: '24px',
-        marginTop: '9px',
-        marginBottom: '5px',
-    },
-    infoText: {
-        fontSize: '12px',
-        margin: '0',
-    },
-};
-
-class TopDataPublisherSection extends React.Component<ITopDataPublisherSection, any> {
-
-    public render() {
-
-        const {classes} = this.props;
-
-        return (
-            <Grid container spacing={ 0 } className={ classes.root }>
-                <Grid item xs={ 12 } className={ classes.header }>
-                    <h1 className={ classes.headText }>Data Publisher</h1>
-                    <p className={ classes.infoText }>Manage your Catalog Published Descriptors</p>
-                </Grid>
-            </Grid>
-        );
-    };
-
-}
-
-export default withStyles(styleSheet)<{}>(TopDataPublisherSection);
diff --git a/src/ui/pages/dataset/dataset-detail/index.tsx b/src/ui/pages/dataset/dataset-detail/index.tsx
index 93db47c3168df1e7a00214349679a05ad07edc52..3d8422776a9b125e4c8577f8d91ef3f258b4b586 100644
--- a/src/ui/pages/dataset/dataset-detail/index.tsx
+++ b/src/ui/pages/dataset/dataset-detail/index.tsx
@@ -11,7 +11,7 @@ import BrowseMenu from './BrowseMenu';
 import {Dataset} from 'model/dataset.model';
 import DetailInfo from './detail-info';
 import {getDatasetRequest} from 'actions/dataset';
-import ContentHeader from 'ui/content-header/ContentHeader';
+import ContentHeader from 'ui/common/heading/ContentHeader';
 
 interface IDatasetDetailProps extends React.ClassAttributes<any> {
     classes: any;
diff --git a/src/ui/pages/dataset/dataset-stepper/steps/traits/TraitsWrap.tsx b/src/ui/pages/dataset/dataset-stepper/steps/traits/TraitsWrap.tsx
index 4cc60e3a9484c1dd8dccf89833b34a8a5dd38027..420649102d3c928b811d871a552a46e63802538e 100644
--- a/src/ui/pages/dataset/dataset-stepper/steps/traits/TraitsWrap.tsx
+++ b/src/ui/pages/dataset/dataset-stepper/steps/traits/TraitsWrap.tsx
@@ -8,7 +8,7 @@ import {Descriptor} from 'model/descriptors.model';
 import {IDescriptorFilter} from 'model/filter.model';
 import DescriptorSearchMenu from 'ui/pages/descriptor/descriptors/DescriptorSearchMenu';
 import {Page} from 'model/common.model';
-import DescriptorCard from 'ui/pages/descriptor/descriptors/DescriptorCard';
+import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
 import PaginationComponent from 'ui/common/pagination';
 import {Dataset} from 'model/dataset.model';
 
diff --git a/src/ui/pages/dataset/datset-list/index.tsx b/src/ui/pages/dataset/datset-list/index.tsx
index f50612824dbbceba7d86fc23d61b60e0f690a5b0..ef52f7bf949916922088630e2898885cfc94285c 100644
--- a/src/ui/pages/dataset/datset-list/index.tsx
+++ b/src/ui/pages/dataset/datset-list/index.tsx
@@ -7,7 +7,7 @@ import {ROLE_ADMINISTRATOR} from 'constants/userRoles';
 import {Dataset} from 'model/dataset.model';
 import {Page} from 'model/common.model';
 import PaginationComponent from 'ui/common/pagination';
-import ContentHeader from 'ui/content-header/ContentHeader';
+import ContentHeader from 'ui/common/heading/ContentHeader';
 import DatasetCard from './DatasetCard';
 import {IDatasetFilter} from 'model/filter.model';
 import DatasetSearchMenu from './DatasetSearchMenu';
diff --git a/src/ui/pages/descriptor/descriptors/index.tsx b/src/ui/pages/descriptor/descriptors/index.tsx
index f556791ecbfbe60660db6946a50ec00626cb4a3a..24538a654f5d40455dfc059e272f1ab0307cf7e9 100644
--- a/src/ui/pages/descriptor/descriptors/index.tsx
+++ b/src/ui/pages/descriptor/descriptors/index.tsx
@@ -4,14 +4,14 @@ import Grid from 'material-ui/Grid';
 import Button from 'material-ui/Button';
 import {Link} from 'react-router';
 
-import DescriptorCard from './DescriptorCard';
 import {Descriptor} from 'model/descriptors.model';
 import {ROLE_ADMINISTRATOR} from 'constants/userRoles';
 import {Page} from 'model/common.model';
+import {IDescriptorFilter} from 'model/filter.model';
 import PaginationComponent from 'ui/common/pagination';
+import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
+import ContentHeader from 'ui/common/heading/ContentHeader';
 import DescriptorSearchMenu from './DescriptorSearchMenu';
-import {IDescriptorFilter} from 'model/filter.model';
-import ContentHeader from '../../../content-header/ContentHeader';
 
 interface IDescriptorListsPageProps extends React.ClassAttributes<any> {
     login: any;
diff --git a/src/ui/common/login/Login.tsx b/src/ui/pages/login/Login.tsx
similarity index 100%
rename from src/ui/common/login/Login.tsx
rename to src/ui/pages/login/Login.tsx
diff --git a/src/ui/common/login/index.tsx b/src/ui/pages/login/index.tsx
similarity index 100%
rename from src/ui/common/login/index.tsx
rename to src/ui/pages/login/index.tsx
diff --git a/src/ui/pages/partner/partner-list/index.tsx b/src/ui/pages/partner/partner-list/index.tsx
index 0d1cf63d485b28c5caed9ed6908c57be8a233652..60142619fe4c0e2500da03f07ee17b393e752253 100644
--- a/src/ui/pages/partner/partner-list/index.tsx
+++ b/src/ui/pages/partner/partner-list/index.tsx
@@ -11,7 +11,7 @@ import {ROLE_ADMINISTRATOR} from 'constants/userRoles';
 import {Page} from 'model/common.model';
 import PaginationComponent from 'ui/common/pagination';
 import {IPartnerFilter} from 'model/filter.model';
-import ContentHeader from '../../../content-header/ContentHeader';
+import ContentHeader from 'ui/common/heading/ContentHeader';
 
 interface IPartnerListPageProps extends React.ClassAttributes<any> {
     createNewPartner: () => void;
diff --git a/src/ui/pages/ui-design/Gui.tsx b/src/ui/pages/ui-design/Gui.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c839c1f1828d5402b0e4e5007eb7108fb1904c3
--- /dev/null
+++ b/src/ui/pages/ui-design/Gui.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import { Link } from 'react-router';
+import {Route, IndexRoute, Not} from 'react-router';
+
+import Grid from 'material-ui/Grid';
+import Paper from 'material-ui/Paper';
+import Tabs, {Tab} from 'material-ui/Tabs';
+
+import ContentHeader from 'ui/common/heading/ContentHeader';
+import Markdown from 'ui/common/markdown';
+import {Table, TableRow, TableCell} from 'ui/common/tables';
+
+import { UiTestingTabs as tabs } from './index';
+
+const UiWrapper = connect((state) => ({}), (dispatch) => bindActionCreators({}, dispatch))(({ children, router }) => {
+
+    // console.log('Looking up matcher', tabs, router);
+
+    const currentTab: number = router ? tabs.findIndex((tab) => tab.path === router.location.pathname ) : 0;
+
+    const tabChange = (e, index) => {
+      // console.log('Tab changed:', index, tabs[index]);
+      router.push(tabs[index].path);
+    };
+
+    return (
+      <div>
+        <ContentHeader title="UI Component testing"
+                       subTitle="Testing graphical and functional behavior of UI components"
+        />
+
+        <Tabs value={ currentTab } indicatorColor="#88B943" onChange={ tabChange }>
+            { tabs.map((tab) => <Tab key={ tab.path } label={ tab.label } /> ) }
+        </Tabs>
+
+        { children }
+      </div>
+    );
+});
+
+const UiReadme = () => {
+  return (
+    <div>
+      <div style={ { backgroundColor: '#D4D2C7', padding: '1rem' } }>
+        <Paper style={ { padding: '1rem'} }>
+          <Markdown source={ `
+# Hello!
+
+This set of pages demonstrates common UI components used in this project. You
+should use this to inspect whether your component looks and behaves as it should.
+
+# Dynamic data?
+
+Do not connect to the API, your tests should use constants declared within the
+\`pages/ui-design/\` folder, do not escape it!
+
+# The template
+
+The GUI design template lays out the component using \`<Grid />\` component and
+sometimes \`<Paper />\` to demonstrate what it looks like in that context. We
+(or you) may add other containers: add them to the \`<UiDesignWrapper />\` component.
+
+# Don't mess up!
+` } />
+        </Paper>
+      </div>
+
+      <UiDesignWrapper>
+        <Markdown style={ { padding: '1rem' } } source={ `
+Every component will be wrapped.
+
+# Some more
+
+* Than others
+* ... or others
+
+Let's see what happens! √ Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Aliquam dolor dui, semper in maximus sed, efficitur ut ipsum. Vivamus
+ornare turpis tristique ligula aliquet, sed congue neque mattis. Nullam metus
+nulla, facilisis quis commodo in, interdum eget eros. Aliquam in dui quis tortor
+pharetra commodo.
+` } />
+      </UiDesignWrapper>
+    </div>
+  );
+};
+
+const UiDesignWrapper = ({ children }) => {
+
+  return (
+    <div>
+      <div style={ { padding: '1rem 0', backgroundColor: 'Yellow' } }>
+        <div style={ { padding: '0', backgroundColor: 'White' } }>
+          { children }
+        </div>
+      </div>
+      <div style={ { padding: '1rem', backgroundColor: 'Yellow' } }>
+        <Paper>
+          { children }
+        </Paper>
+      </div>
+      <div style={ { padding: '1rem', backgroundColor: 'Yellow' } }>
+        <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+          { children }
+        </div>
+      </div>
+      <div style={ { padding: '1rem', backgroundColor: 'Yellow' } }>
+        <Grid container>
+          <Grid item xs={ 12 } sm={ 6 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+          <Grid item xs={ 12 } sm={ 6 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+      <div style={ { padding: '1rem', backgroundColor: 'Yellow' } }>
+        <Grid container>
+          <Grid item xs={ 12 } sm={ 4 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+          <Grid item xs={ 12 } sm={ 4 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+          <Grid item xs={ 12 } sm={ 4 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+      <div style={ { padding: '1rem', backgroundColor: 'Yellow' } }>
+        <Grid container>
+          <Grid item xs={ 6 } sm={ 3 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+          <Grid item xs={ 6 } sm={ 3 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+          <Grid item xs={ 6 } sm={ 3 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+          <Grid item xs={ 6 } sm={ 3 }>
+            <div style={ { padding: '0', backgroundColor: 'White', border: 'dotted 1px #D4D2C7' } }>
+              { children }
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+    );
+};
+
+export { UiWrapper, UiDesignWrapper, UiReadme };
diff --git a/src/ui/pages/ui-design/index.tsx b/src/ui/pages/ui-design/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..659a89a2b0ecf04c68fa5c5f8b3531f1ed994b9e
--- /dev/null
+++ b/src/ui/pages/ui-design/index.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import {Route, IndexRoute, Not} from 'react-router';
+
+import { UiWrapper, UiReadme, UiDesignWrapper } from './Gui';
+
+// Add your UI testing components to the imports and then to the routes
+import UiDesignTables from './tests/UiDesignTables';
+import UiDoi from './tests/UiDoi';
+import UiDescriptorCard from './tests/UiDescriptorCard';
+
+// Register the label and the path that matches your <Route below
+const UiTestingTabs = [
+  { label: 'Instructions' , path: '/gui' },
+  { label: 'Tables', path: '/gui/tables' },
+  { label: 'Descriptor', path: '/gui/descriptor' },
+  { label: 'DOI', path: '/gui/doi' },
+];
+
+// Routes export must be a function
+// https://stackoverflow.com/questions/35048738/react-router-import-routes/35133868#35133868
+//
+// Add your test route before the blank line
+function guiTestingRoutes() {
+  return (
+    <Route path="/gui" component={ UiWrapper }>
+    <IndexRoute path="" exact component={ UiReadme } />
+    <Route component={ UiDesignWrapper }>
+      <Route path="tables" exact component={ UiDesignTables } />
+      <Route path="doi" exact component={ UiDoi } />
+      <Route path="descriptor" exact component={ UiDescriptorCard } />
+    </Route>
+  </Route>
+  );
+}
+
+export { guiTestingRoutes as default, UiTestingTabs };
diff --git a/src/ui/pages/ui-design/tests/UiDescriptorCard.tsx b/src/ui/pages/ui-design/tests/UiDescriptorCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..95c4c5dcf902ab8adbcb562d52fe68771f9d40c3
--- /dev/null
+++ b/src/ui/pages/ui-design/tests/UiDescriptorCard.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import {Descriptor} from 'model/descriptors.model';
+import {Partner} from 'model/partner.model';
+import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
+
+export default function GuiTest({ style }: React.HTMLProps<HTMLElement>) {
+  const d: Descriptor = new Descriptor({
+    title: 'This is a very long descriptor title',
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Aliquam dolor dui, semper in maximus sed, efficitur ut ipsum. Vivamus ornare
+turpis tristique ligula aliquet, sed congue neque mattis. Nullam metus nulla,
+facilisis quis commodo in, interdum eget eros. Aliquam in dui quis tortor
+pharetra commodo. Nullam in faucibus risus, quis viverra felis.
+
+Duis sit amet luctus libero. In dapibus, arcu vel pulvinar tristique, purus nisl
+fringilla eros, sit amet bibendum tortor ante sit amet felis. Praesent rhoncus
+mollis volutpat.
+
+Maecenas facilisis rutrum arcu, nec euismod purus tincidunt quis. Integer elit
+est, interdum malesuada mi non, tincidunt iaculis lorem. Praesent tristique
+turpis odio, nec congue nibh rutrum eget. Duis gravida feugiat iaculis.
+Curabitur tempus nulla non orci pharetra consectetur. Nunc id elit viverra
+est pharetra mollis. Nulla facilisi.
+
+Fusce ut mauris volutpat, volutpat erat gravida, venenatis augue. Fusce id dolor
+at elit rutrum ultrices id sagittis turpis. Duis scelerisque enim a risus
+facilisis, vel feugiat massa facilisis. Aenean ac pulvinar urna.
+`,
+    versionTag: '1.1',
+    category: 'PASSPORT',
+    dataType: 'TEXT',
+    owner: new Partner({
+      name: 'Partner name comes here',
+    }),
+  });
+
+  return (
+    <DescriptorCard descriptor={ d } />
+  );
+};
diff --git a/src/ui/pages/ui-design/tests/UiDesignTables.tsx b/src/ui/pages/ui-design/tests/UiDesignTables.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..92b3f3d7d3703ed8659e0562c40238e933f35b0b
--- /dev/null
+++ b/src/ui/pages/ui-design/tests/UiDesignTables.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import {Table, TableRow, TableCell} from 'ui/common/tables';
+
+export default function UiDesignTables({ children, style }: React.HTMLProps<HTMLElement>) {
+
+  return (
+    <div>
+      <Table widths={ [ '10px', null, null, null, '200px' ] } headers={ (
+        <TableRow>
+          <TableCell style={ { maxWidth: '10px' } }>No.</TableCell>
+          <TableCell>Title</TableCell>
+          <TableCell>Created</TableCell>
+          <TableCell>Status</TableCell>
+          <TableCell style={ { minWidth: '200px' } } />
+        </TableRow>
+        ) }>
+        <TableRow>
+          <TableCell className="font-bold">1</TableCell>
+          <TableCell>ha ha2</TableCell>
+          <TableCell>ha ha3</TableCell>
+          <TableCell>Okay</TableCell>
+          <TableCell>ha ha4</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>2</TableCell>
+          <TableCell>ha ha2</TableCell>
+          <TableCell>ha ha3</TableCell>
+          <TableCell>Okay</TableCell>
+          <TableCell>ha ha4</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>3</TableCell>
+          <TableCell>ha ha2</TableCell>
+          <TableCell>ha ha3</TableCell>
+          <TableCell>Nay okay</TableCell>
+          <TableCell>ha ha4</TableCell>
+        </TableRow>
+      </Table>
+    </div>
+    );
+};
diff --git a/src/ui/pages/ui-design/tests/UiDoi.tsx b/src/ui/pages/ui-design/tests/UiDoi.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e752d44dca9692350c33aa93e67ebd3b1e288094
--- /dev/null
+++ b/src/ui/pages/ui-design/tests/UiDoi.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import DOI from 'ui/common/DOI';
+
+export default function GuiTest({ style }: React.HTMLProps<HTMLElement>) {
+
+  return (
+    <div>
+      <div>
+        <DOI value="10.13221/asda1" />
+      </div>
+      <div>
+        <DOI value="10.13221/asda1" noPrefix />
+      </div>
+    </div>
+  );
+};
diff --git a/src/ui/routes.tsx b/src/ui/routes.tsx
index 2a79be51f6789b67790f98918dfad6bb00d6b93d..cee344f0d1b1b93b676ec0ab098094f4e4189f7f 100644
--- a/src/ui/routes.tsx
+++ b/src/ui/routes.tsx
@@ -6,10 +6,9 @@ import App from './App';
 import DescriptorListsPage from './pages/descriptor';
 import AuthorizedRouteComponent from './common/authorized/AuthorizedRouteComponent';
 import WelcomePage from './pages/welcome';
-import Login from './common/login';
+import Login from './pages/login';
 import PartnersPage from './pages/partner';
 import Datasets from './pages/dataset';
-import DataPublisher from './pages/data-publisher';
 import DatasetStepper from './pages/dataset/dataset-stepper';
 import BasicInfoStep from './pages/dataset/dataset-stepper/steps/basic-info';
 import Creators from './pages/dataset/dataset-stepper/steps/creators';
@@ -21,9 +20,13 @@ import {ROLE_ADMINISTRATOR, ROLE_USER} from 'constants/userRoles';
 import DatasetDetail from './pages/dataset/dataset-detail';
 import CreateDescriptorPage from './pages/descriptor/CreateDescriptorPage';
 import DescriptorEditPage from './pages/descriptor/DescriptorEditPage';
-import DataInPreparation from './pages/data-in-preparation';
-import AdministrationDashboard from './pages/administrator-dashboard';
-import DataPublished from './pages/data-published';
+
+import Dashboard from './pages/dashboard';
+import DashboardWrapper from './pages/dashboard/DashboardWrapper';
+import DataInPreparation from './pages/dashboard/data-in-preparation';
+import DataPublished from './pages/dashboard/data-published';
+
+import guiTestingRoutes from './pages/ui-design';
 
 export default(
     <Route name="app" component={ App } path="/">
@@ -36,10 +39,11 @@ export default(
         <Route path="/partners" component={ PartnersPage }/>
         <Route path="/datasets" component={ Datasets } />
         <Route path="/datasets/:uuid" component={ DatasetDetail } />
-        <Route path="/data-publisher" component={ DataPublisher } />
-        <Route path="/dashboard" component={ AdministrationDashboard } />
-        <Route path="/dashboard/data-in-preparation" component={ DataInPreparation } />
-        <Route path="/dashboard/data-published" component={ DataPublished } />
+        <Route path="/dashboard" component={ DashboardWrapper }>
+          <IndexRoute path="" exact component={ Dashboard }/>
+          <Route path="data-in-preparation" component={ DataInPreparation } />
+          <Route path="data-published" component={ DataPublished } />
+        </Route>
         <Route path="/datasets/:uuid/edit" component={ DatasetStepper }>
             <IndexRoute path="" component={ BasicInfoStep }/>
             <Route path="dataset-creator" component={ Creators } />
@@ -53,6 +57,7 @@ export default(
             <Route path="/profile" component={ NotFound }/>
         </Route>
         <Route path="/login" component={ Login }/>
+        { guiTestingRoutes() }
         <Route path="*" component={ NotFound }/>
     </Route>
 );
diff --git a/styles/app.styles.scss b/styles/app.styles.scss
index d0443a004bbbb6ff5c2705629a599e02650b0167..562eb93889a661f7dfb1595700113705447b22fe 100644
--- a/styles/app.styles.scss
+++ b/styles/app.styles.scss
@@ -332,6 +332,26 @@ a:visited {
 	filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.2));
 }
 
+/** Text **/
+.font-bold {
+	font-weight: bold;
+}
+.font-italic {
+	font-style: italic;
+}
+.text-left {
+	text-align: left;
+	body[dir="rtl"] & {
+		text-align: right;
+	}
+}
+.text-right {
+	text-align: right;
+	body[dir="rtl"] & {
+		text-align: left;
+	}
+}
+
 table.simple {
 	width: 100%;
 	thead {
@@ -353,3 +373,71 @@ table.simple {
 		padding: .25em 1em .25em 1em;
 	}
 }
+
+table.genesys-table {
+
+	thead {
+		tr, th {
+			font-weight: bold;
+			color: #b4b4b2;
+			font-size: 1rem;
+		}
+	}
+	// This adds the "margins" to the left and right of the table
+	tr > td, tr > th {
+		&:first-child {
+			border-left: solid 1rem White;
+		}
+		&:last-child {
+			border-right: solid 1rem White;
+		}
+	}
+
+	tbody {
+		> tr {
+			> td {
+				border-bottom-color: white;
+				border-right: solid 1px White;
+			}
+			&:last-child > td {
+			}
+			&:nth-child(odd) > td {
+				background-color: #f3f2ee;
+			}
+			&:nth-child(even) > td {
+				background-color: #f8f7f5;
+			}
+		}
+	}
+
+	tfoot {
+		tr {
+			// adds fake bottom-margin to the table
+			// height: '30px',
+		}
+	}
+}
+// Markdown
+.markdown {	
+	& > :first-child {
+		margin-top: 0;
+	}
+
+	& > :last-child {
+		margin-bottom: 0;
+	}
+
+	h1 {
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	h2 {
+		font-size: 1.3rem;
+		font-weight: bold;
+	}
+
+	p {
+		font-size: 1.1rem;
+	}
+}