diff --git a/client/public/index.html b/client/public/index.html
index 59bf85d0a..d5814b15e 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -32,6 +32,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link href="https://fonts.googleapis.com/css?family=Saira+Condensed:300,600|Saira:300,600&amp;subset=latin-ext,vietnamese" rel="stylesheet">
         <!-- font awesome -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
         <!-- default font of Material-UI -->
@@ -52,15 +53,5 @@
     </noscript>
 
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/client/src/App.js b/client/src/App.js
index 37711c7ae..3cc637415 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -12,6 +12,7 @@ import { Route, BrowserRouter, Switch } from 'react-router-dom'
 // Material UI
 
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
+import theme from './theme'
 
 // Components
 
@@ -70,15 +71,6 @@ export const client = new ApolloClient({
 
 export const auth = new Auth(result => console.log('auth result', result), client)
 
-/* Here we change the default Material UI theme for Advanced Algos brand colors. */
-
-const theme = createMuiTheme({
-  palette: {
-    primary: { main: '#303036' }, // DARK.
-    secondary: { main: '#CC5835' } // RUSTED_RED.
-  }
-})
-
 class App extends Component {
   render () {
     return (
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index 73572c700..6983aa808 100644
--- a/client/src/components/Home.js
+++ b/client/src/components/Home.js
@@ -5,6 +5,7 @@ import {LineChart} from 'react-easy-chart'
 import Paper from '@material-ui/core/Paper'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
+import CssBaseline from '@material-ui/core/CssBaseline'
 
 const styles = theme => ({
   root: {
@@ -19,6 +20,26 @@ const styles = theme => ({
     width: '100%',
     marginTop: 20,
     marginBottom: 20
+  },
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  layout: {
+    width: 'auto',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3,
+    [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
+      width: 900,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  },
+  heroContent: {
+    maxWidth: 600,
+    margin: '0 auto',
+    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
   }
 })
 
@@ -27,41 +48,63 @@ class Home extends Component {
   render () {
     const { classes } = this.props
     return (
-      <Paper className={classes.root}>
+      <React.Fragment>
+        <CssBaseline />
+        <main className={classes.layout}>
+          <div className={classes.heroContent}>
+            <Typography
+              variant='display3'
+              align='center'
+              color='textPrimary'
+              gutterBottom
+            >
+              Collaborate. Innovate. Evolve.
+            </Typography>
+            <Typography
+              variant='title'
+              align='center'
+              color='textSecondary'
+              component='h3'
+            >
+              Welcome to Advanced Algos Users Module
+            </Typography>
+          </div>
+        </main>
+
         <Grid container justify='center' spacing={24}>
           <Grid className={classes.grid} item>
             <Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
-            Welcome to the Users Module
-            </Typography>
+          Intro
+          </Typography>
             <Typography className={classes.typography} component='p'>
-            This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in.
-            </Typography>
+          This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in.
+          </Typography>
             <Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
-            Development Status
-            </Typography>
+          Development Status
+          </Typography>
             <Typography className={classes.typography} component='p'>
-            This module is is currently under heavy development. Implementation started 1st of September 2018 and this is the result of the 1st sprint of 2 weeks of work.
-            </Typography>
+          This module is is currently under heavy development. Implementation started 1st of September 2018 and this is the result of the 1st sprint of 2 weeks of work.
+          </Typography>
             <Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
-            What can you do?
-            </Typography>
+          What can you do?
+          </Typography>
             <Typography className={classes.typography} component='p'>
-            Currently you can use the Browse section to list all registered users. Clicking on View Profile you can see some more info about that user. You can signup with your Github account and manage your profile information while logged in. You will find all features under develpment with a dialog indicating it is not ready.
-            </Typography>
+          Currently you can use the Browse section to list all registered users. Clicking on View Profile you can see some more info about that user. You can signup with your Github account and manage your profile information while logged in. You will find all features under develpment with a dialog indicating it is not ready.
+          </Typography>
             <Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
-            What is next?
-            </Typography>
+          What is next?
+          </Typography>
             <Typography className={classes.typography} component='p'>
-            The major features for the next sprint are:
-            </Typography>
+          The major features for the next sprint are:
+          </Typography>
             <ul>
               <li>1. Managing profile images.</li>
               <li>2. Making sure that Auth0 integration server side is working well.</li>
               <li>3. Making sure that mutations can not be impersonated.</li>
             </ul>
             <Typography className={classes.typography} component='p' >
-            Below, you can see some usage statistics of this module, in this case, the total amount of users over time. [data is not real yet.]
-            </Typography>
+          Below, you can see some usage statistics of this module, in this case, the total amount of users over time. [data is not real yet.]
+          </Typography>
             <LineChart
               xType={'time'}
               axes
@@ -70,18 +113,18 @@ class Home extends Component {
               height={250}
               data={[
                 [
-              { x: '1-Sep-17', y: 2 },
-              { x: '2-Sep-17', y: 4 },
-              { x: '3-Sep-17', y: 5 },
-              { x: '4-Sep-17', y: 6 },
-              { x: '5-Sep-17', y: 7 }
+            { x: '1-Sep-17', y: 2 },
+            { x: '2-Sep-17', y: 4 },
+            { x: '3-Sep-17', y: 5 },
+            { x: '4-Sep-17', y: 6 },
+            { x: '5-Sep-17', y: 7 }
                 ]
               ]}
-        />
+      />
           </Grid>
         </Grid>
 
-      </Paper>
+      </React.Fragment>
 
     )
   }
diff --git a/client/src/theme.js b/client/src/theme.js
new file mode 100644
index 000000000..5f9ff7569
--- /dev/null
+++ b/client/src/theme.js
@@ -0,0 +1,72 @@
+import { createMuiTheme } from '@material-ui/core/styles'
+import indigo from '@material-ui/core/colors/indigo'
+// import red from '@material-ui/core/colors/red'
+
+export const theme = createMuiTheme({
+  palette: {
+    primary: { main: '#303036' }, // DARK.
+    secondary: { main: '#CC5835' } // RUSTED_RED.
+  },
+  typography: {
+    fontFamily: '"Saira","Saira Condenses", sans-serif'
+  },
+  overrides: {
+    Paper: {
+      root: {
+        backgroundColor: '#ffffff'
+      },
+      elevation: 0,
+      square: true
+    }
+  }
+})
+
+export const globalStyles = theme => ({
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  appBar: {
+    position: 'relative'
+  },
+  toolbarTitle: {
+    flex: 1
+  },
+  layout: {
+    width: 'auto',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3,
+    [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
+      width: 900,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  },
+  heroContent: {
+    maxWidth: 600,
+    margin: '0 auto',
+    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
+  },
+  cardHeader: {
+    backgroundColor: theme.palette.grey[200]
+  },
+  cardPricing: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'baseline',
+    marginBottom: theme.spacing.unit * 2
+  },
+  cardActions: {
+    [theme.breakpoints.up('sm')]: {
+      paddingBottom: theme.spacing.unit * 2
+    }
+  },
+  footer: {
+    marginTop: theme.spacing.unit * 8,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    padding: `${theme.spacing.unit * 6}px 0`
+  }
+})
+
+export default theme