diff --git a/client/.gitignore b/client/.gitignore
index 7c1f225e5..4cdf4b15a 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -70,3 +70,7 @@ dist/
 
 #Mac specific files
 .DS_Store
+
+#yalc npm link
+.yalc
+yalc.lock
diff --git a/client/package-lock.json b/client/package-lock.json
index 6287ce90a..0599e95aa 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@advancedalgos/teams-client",
-	"version": "0.0.13",
+	"version": "0.0.16",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/client/src/graphql/teams/GetAllTeamsQuery.js b/client/src/graphql/teams/GetAllTeamsQuery.js
index 859e6c20b..084a0715b 100644
--- a/client/src/graphql/teams/GetAllTeamsQuery.js
+++ b/client/src/graphql/teams/GetAllTeamsQuery.js
@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 
 export const GET_ALL_TEAMS_QUERY = gql`
   query teamsQuery {
-    teams {
+    TeamsModuleTeams {
       edges {
         node {
           id
diff --git a/client/src/views/dashboard/FinancialBeings.js b/client/src/views/dashboard/FinancialBeings.js
index 447d85789..fba9ce00d 100644
--- a/client/src/views/dashboard/FinancialBeings.js
+++ b/client/src/views/dashboard/FinancialBeings.js
@@ -14,7 +14,7 @@ const styles = theme => ({
 
 const FinancialBeings = ({ classes }) => (
   <div>
-    <Typography variant='display1' gutterBottom>
+    <Typography variant='h4' gutterBottom>
       Financial Beings
     </Typography>
     <ManageFBList />
diff --git a/client/src/views/dashboard/ManageTeams.js b/client/src/views/dashboard/ManageTeams.js
index 7eceeb1ca..e6582254f 100644
--- a/client/src/views/dashboard/ManageTeams.js
+++ b/client/src/views/dashboard/ManageTeams.js
@@ -14,7 +14,7 @@ const styles = theme => ({
 
 const ManageTeams = ({ classes }) => (
   <div>
-    <Typography variant='display1' gutterBottom>
+    <Typography variant='h4' gutterBottom>
       Manage Your Teams
     </Typography>
     <ManageTeamsList />
diff --git a/client/src/views/dashboard/TeamMembers.js b/client/src/views/dashboard/TeamMembers.js
index 3ce25fdf4..7c450150f 100644
--- a/client/src/views/dashboard/TeamMembers.js
+++ b/client/src/views/dashboard/TeamMembers.js
@@ -15,7 +15,7 @@ const styles = theme => ({
 
 const TeamMembers = ({ classes }) => (
   <div>
-    <Typography variant='display1' gutterBottom>
+    <Typography variant='h4' gutterBottom>
       Team Members
       <MessageCard message='Coming soon. Invite and manage team members.' />
     </Typography>
diff --git a/client/src/views/dashboard/components/CreateTeamDialog.js b/client/src/views/dashboard/components/CreateTeamDialog.js
index 0c11a21f9..6da04291b 100644
--- a/client/src/views/dashboard/components/CreateTeamDialog.js
+++ b/client/src/views/dashboard/components/CreateTeamDialog.js
@@ -80,7 +80,7 @@ export class CreateTeamDialog extends Component {
           let loader = null
           if (loading) {
             loader = (
-              <Typography variant='subheading'>Submitting team...</Typography>
+              <Typography variant='subtitle1'>Submitting team...</Typography>
             )
           }
           if (error) {
@@ -116,7 +116,7 @@ export class CreateTeamDialog extends Component {
                       required
                       error={this.state.nameError !== '' || this.state.botNameError !== '' || error !== null}
                     >
-                      <Typography variant='subheading' align='center'>Create a name for your team</Typography>
+                      <Typography variant='subtitle1' align='center'>Create a name for your team</Typography>
                       <TextField
                         autoFocus
                         margin='dense'
@@ -132,7 +132,7 @@ export class CreateTeamDialog extends Component {
                       {this.state.nameError !== '' && (
                         <FormHelperText>{this.state.nameError}</FormHelperText>
                       )}
-                      <Typography variant='subheading' align='center' ><br />
+                      <Typography variant='subtitle1' align='center' ><br />
                         Create a name for your teams bot.
                       </Typography>
                       <Typography align='center' >
diff --git a/client/src/views/dashboard/components/CreateTeamForm.js b/client/src/views/dashboard/components/CreateTeamForm.js
index 6a0b90297..75df97b5d 100644
--- a/client/src/views/dashboard/components/CreateTeamForm.js
+++ b/client/src/views/dashboard/components/CreateTeamForm.js
@@ -60,7 +60,7 @@ export class CreateTeamDialog extends Component {
           onClick={this.handleClickOpen}
         >
           <AddIcon className={this.props.classes.extendedIcon} />
-          <Typography variant='subheading'>Create A Team</Typography>
+          <Typography variant='subtitle1'>Create A Team</Typography>
         </Button>
         <Dialog
           open={this.state.open}
@@ -69,7 +69,7 @@ export class CreateTeamDialog extends Component {
         >
           <DialogTitle id='form-dialog-title'>Subscribe</DialogTitle>
           <DialogContent>
-            <Typography variant='subheading'>Team Creation</Typography>
+            <Typography variant='subtitle1'>Team Creation</Typography>
             <DialogContentText>Name your team!</DialogContentText>
             <TextField
               autoFocus
diff --git a/client/src/views/dashboard/components/DashEditor.js b/client/src/views/dashboard/components/DashEditor.js
index 246a921f0..e985ef4aa 100644
--- a/client/src/views/dashboard/components/DashEditor.js
+++ b/client/src/views/dashboard/components/DashEditor.js
@@ -13,7 +13,7 @@ import aaweb from '../../../assets/AlgonetWebPlatform.jpg'
 
 export const DashEditor = ({ classes }) => (
   <Grid item md={6}>
-    <Typography variant='display1' gutterBottom>
+    <Typography variant='h4' gutterBottom>
       Develop
     </Typography>
     <Grid container spacing={24}>
@@ -25,7 +25,7 @@ export const DashEditor = ({ classes }) => (
             title='Image title'
           />
           <CardActions>
-            <Typography variant='title' color='inherit' aligh='right'>
+            <Typography variant='h6' color='inherit' aligh='right'>
               <Button>Start Developing ></Button>
             </Typography>
           </CardActions>
diff --git a/client/src/views/dashboard/components/DashTeam.js b/client/src/views/dashboard/components/DashTeam.js
index 32fa0c54a..cbd5eedbd 100644
--- a/client/src/views/dashboard/components/DashTeam.js
+++ b/client/src/views/dashboard/components/DashTeam.js
@@ -29,7 +29,7 @@ export const DashTeam = ({ classes, user = null }) => {
   if (authId === undefined || authId === null) {
     return (
       <Grid item md={6}>
-        <Typography variant='display1' gutterBottom>
+        <Typography variant='h4' gutterBottom>
           Teams
         </Typography>
         <Typography variant='caption'>Loading...</Typography>
@@ -38,7 +38,7 @@ export const DashTeam = ({ classes, user = null }) => {
   }
   return (
     <Grid item md={6} style={{ position: 'relative' }}>
-      <Typography variant='display1' gutterBottom>
+      <Typography variant='h4' gutterBottom>
         Teams{' '}
         <Link to='/manage-teams' className={classes.dashLink}>
           Manage Teams
@@ -84,7 +84,7 @@ export const DashTeam = ({ classes, user = null }) => {
           } else {
             return (
               <Grid container spacing={24}>
-                <Typography variant='subheading' gutterBottom>
+                <Typography variant='subtitle1' gutterBottom>
                   Loading...
                 </Typography>
                 {queryLoader}
diff --git a/client/src/views/dashboard/components/DashTeamItem.js b/client/src/views/dashboard/components/DashTeamItem.js
index db7f1b481..9f45155bd 100644
--- a/client/src/views/dashboard/components/DashTeamItem.js
+++ b/client/src/views/dashboard/components/DashTeamItem.js
@@ -47,11 +47,11 @@ export const DashTeamItem = ({ classes, team }) => (
           title='Image title'
         />
         <CardContent className={classes.cardContent}>
-          <Typography variant='headline'>{team.name}</Typography>
-          <Typography variant='subheading' color='textSecondary'>
+          <Typography variant='h5'>{team.name}</Typography>
+          <Typography variant='subtitle1' color='textSecondary'>
             {team.createdAt}
           </Typography>
-          <Typography variant='subheading' paragraph>
+          <Typography variant='subtitle1' paragraph>
             Members: {team.members.length}
           </Typography>
         </CardContent>
diff --git a/client/src/views/dashboard/components/InviteMemberDialog.js b/client/src/views/dashboard/components/InviteMemberDialog.js
index f34b8c9ee..422eab16c 100644
--- a/client/src/views/dashboard/components/InviteMemberDialog.js
+++ b/client/src/views/dashboard/components/InviteMemberDialog.js
@@ -65,7 +65,7 @@ export class InviteMemberDialog extends Component {
             let loader = null
             if (loading) {
               loader = (
-                <Typography variant='subheading'>Submitting invitation...</Typography>
+                <Typography variant='subtitle1'>Submitting invitation...</Typography>
               )
             }
             if (error) {
@@ -120,7 +120,7 @@ export class InviteMemberDialog extends Component {
                       </FormControl>
                     )}
                     {data !== undefined && data.sendMemberInviteSG === 'Success' && (
-                      <Typography variant='subheading'>Invitation successfully sent!</Typography>
+                      <Typography variant='subtitle1'>Invitation successfully sent!</Typography>
                     )}
                   </DialogContent>
                   <DialogActions>
diff --git a/client/src/views/dashboard/components/ManageFBItem.js b/client/src/views/dashboard/components/ManageFBItem.js
index 466f43f95..26920ecff 100644
--- a/client/src/views/dashboard/components/ManageFBItem.js
+++ b/client/src/views/dashboard/components/ManageFBItem.js
@@ -28,7 +28,7 @@ export const ManageFBItem = ({ classes, team, authId }) => {
             title={team.name}
           />
           <CardContent className={classes.cardContent}>
-            <Typography gutterBottom variant='headline' component='h2'>
+            <Typography gutterBottom variant='h5' component='h2'>
               {team.fb[0].name}
             </Typography>
             <Typography variant='caption' color='textSecondary'>
diff --git a/client/src/views/dashboard/components/ManageMemberDelete.js b/client/src/views/dashboard/components/ManageMemberDelete.js
index b3ee25d1b..cc75e3df1 100644
--- a/client/src/views/dashboard/components/ManageMemberDelete.js
+++ b/client/src/views/dashboard/components/ManageMemberDelete.js
@@ -100,10 +100,10 @@ export class ManageMemberDelete extends Component {
                     Remove Team Member
                   </DialogTitle>
                   <DialogContent>
-                    <Typography variant='subheading' color='primary'>
+                    <Typography variant='subtitle1' color='primary'>
                       DANGER - Removing your team cannot be undone
                     </Typography>
-                    <Typography variant='subheading'>
+                    <Typography variant='subtitle1'>
                       Are you sure you want to remove this team member?
                     </Typography>
                     {loader}
diff --git a/client/src/views/dashboard/components/ManageMemberRole.js b/client/src/views/dashboard/components/ManageMemberRole.js
index 6edf5ddf1..f428ebbb6 100644
--- a/client/src/views/dashboard/components/ManageMemberRole.js
+++ b/client/src/views/dashboard/components/ManageMemberRole.js
@@ -108,7 +108,7 @@ export class ManageMemberRole extends Component {
                     Set Team Member Role
                   </DialogTitle>
                   <DialogContent>
-                    <Typography variant='subheading'>
+                    <Typography variant='subtitle1'>
                       Admin members can approve new team members, send team invitations, and remove team members.
                     </Typography>
                     <TextField
diff --git a/client/src/views/dashboard/components/ManageMemberStatus.js b/client/src/views/dashboard/components/ManageMemberStatus.js
index a6f1f6e8f..fba5880ee 100644
--- a/client/src/views/dashboard/components/ManageMemberStatus.js
+++ b/client/src/views/dashboard/components/ManageMemberStatus.js
@@ -67,12 +67,12 @@ export class ManageMemberStatus extends Component {
           <div classes={classes.dialogContainer}>
             <Card className={classes.card}>
               <CardContent>
-                <Typography variant='title' id='form-dialog-title'>
+                <Typography variant='h6' id='form-dialog-title'>
                   Member Status Details
                 </Typography>
                 {status !== null && status.map(stat => {
                   return (
-                    <Typography variant='title' id='form-dialog-title' key={stat.createdAt}>
+                    <Typography variant='h6' id='form-dialog-title' key={stat.createdAt}>
                       {stat.status} | {stat.reason} | {stat.createdAt}
                     </Typography>
                   )
diff --git a/client/src/views/dashboard/components/ManageMembersItem.js b/client/src/views/dashboard/components/ManageMembersItem.js
index cb9b8bdbd..daad67f3e 100644
--- a/client/src/views/dashboard/components/ManageMembersItem.js
+++ b/client/src/views/dashboard/components/ManageMembersItem.js
@@ -25,7 +25,7 @@ export const ManageMembersItem = ({ classes, member, teamId, authId }) => {
     return (
       <Grid container className={classes.memberContainer}>
         <Grid item xs={4}>
-          <Typography gutterBottom variant='subheading' component='h2' align='left' >
+          <Typography gutterBottom variant='subtitle1' component='h2' align='left' >
             {profile !== null ? profile.alias : email}
           </Typography>
         </Grid>
diff --git a/client/src/views/dashboard/components/ManageMembersTeamItem.js b/client/src/views/dashboard/components/ManageMembersTeamItem.js
index 068d06904..f8bdbf102 100644
--- a/client/src/views/dashboard/components/ManageMembersTeamItem.js
+++ b/client/src/views/dashboard/components/ManageMembersTeamItem.js
@@ -79,7 +79,7 @@ export const ManageMembersTeamItem = ({ classes, team, authId }) => {
                     />
                   </Grid>
                   <Grid item xs={9}>
-                    <Typography gutterBottom variant='headline' component='h2'>
+                    <Typography gutterBottom variant='h5' component='h2'>
                       {team.name}
                     </Typography>
                   </Grid>
diff --git a/client/src/views/dashboard/components/ManageTeamDelete.js b/client/src/views/dashboard/components/ManageTeamDelete.js
index 95a80a883..c4cb26614 100644
--- a/client/src/views/dashboard/components/ManageTeamDelete.js
+++ b/client/src/views/dashboard/components/ManageTeamDelete.js
@@ -105,10 +105,10 @@ export class ManageTeamDelete extends Component {
                     Delete Team Team
                   </DialogTitle>
                   <DialogContent>
-                    <Typography variant='subheading' color='primary'>
+                    <Typography variant='subtitle1' color='primary'>
                       DANGER - Deleting your team cannot be undone
                     </Typography>
-                    <Typography variant='subheading'>
+                    <Typography variant='subtitle1'>
                       Are you sure you want to delete this team?
                     </Typography>
                     {loader}
diff --git a/client/src/views/dashboard/components/ManageTeamDetails.js b/client/src/views/dashboard/components/ManageTeamDetails.js
index dd1eb10f5..2d5ff36f9 100644
--- a/client/src/views/dashboard/components/ManageTeamDetails.js
+++ b/client/src/views/dashboard/components/ManageTeamDetails.js
@@ -95,7 +95,7 @@ export class ManageTeamDetails extends Component {
           <div classes={classes.dialogContainer}>
             <Card className={classes.card}>
               <CardContent>
-                <Typography variant='title' id='form-dialog-title'>
+                <Typography variant='h6' id='form-dialog-title'>
                   {name} Team Details
                 </Typography>
                 <CardMedia
@@ -109,26 +109,26 @@ export class ManageTeamDetails extends Component {
                   title={`${name} ${avatar}`}
                 />
                 <Typography
-                  variant='display3'
+                  variant='h2'
                   align='center'
                   color='textPrimary'
                   gutterBottom
                 >
                   {name}
                 </Typography>
-                <Typography variant='subheading' color='textSecondary'>
+                <Typography variant='subtitle1' color='textSecondary'>
                   {createdAt}
                 </Typography>
-                <Typography variant='subheading' color='textSecondary'>
+                <Typography variant='subtitle1' color='textSecondary'>
                   Motto: {profile.motto}
                 </Typography>
-                <Typography variant='subheading' color='textSecondary'>
+                <Typography variant='subtitle1' color='textSecondary'>
                   Description: {profile.description}
                 </Typography>
-                <Typography variant='subheading' paragraph gutterBottom>
+                <Typography variant='subtitle1' paragraph gutterBottom>
                   Members: {members.length}
                 </Typography>
-                <Typography variant='subheading' color='primary'>
+                <Typography variant='subtitle1' color='primary'>
                   Team Admin:&nbsp;
                   {members.map(member => {
                     if (member.role === 'OWNER' || member.role === 'ADMIN') {
diff --git a/client/src/views/dashboard/components/ManageTeamsItem.js b/client/src/views/dashboard/components/ManageTeamsItem.js
index 47aca6eff..9360b74c7 100644
--- a/client/src/views/dashboard/components/ManageTeamsItem.js
+++ b/client/src/views/dashboard/components/ManageTeamsItem.js
@@ -30,7 +30,7 @@ export const ManageTeamsItem = ({ classes, team, authId }) => {
             title={team.name}
           />
           <CardContent className={classes.cardContent}>
-            <Typography gutterBottom variant='headline' component='h2'>
+            <Typography gutterBottom variant='h5' component='h2'>
               {team.name}
             </Typography>
             <Typography variant='caption' color='textSecondary'>
diff --git a/client/src/views/dashboard/settings.js b/client/src/views/dashboard/settings.js
index f427a01e2..8dc1d315f 100644
--- a/client/src/views/dashboard/settings.js
+++ b/client/src/views/dashboard/settings.js
@@ -14,7 +14,7 @@ const styles = theme => ({
 
 export const Settings = ({ classes }) => (
   <div>
-    <Typography variant='display1' gutterBottom>
+    <Typography variant='h4' gutterBottom>
       Settings
     </Typography>
     <div className={classes.tableContainer}>
diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js
index 5de7a2765..61d00de40 100644
--- a/client/src/views/teams/components/TeamsDetails.js
+++ b/client/src/views/teams/components/TeamsDetails.js
@@ -79,23 +79,23 @@ const TeamsDetails = ({ classes, team }) => {
             <img src={banner} alt={team.name} className={classes.banner} />
             <img src={avatar} alt={team.name} className={classes.avatar} />
             <Typography
-              variant='display3'
+              variant='h2'
               align='center'
               color='textPrimary'
               gutterBottom
             >
               {team.name}
             </Typography>
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               {team.createdAt}
             </Typography>
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Motto: {team.profile.motto}
             </Typography>
-            <Typography variant='subheading' color='textSecondary'>
+            <Typography variant='subtitle1' color='textSecondary'>
               Description: {team.profile.description}
             </Typography>
-            <Typography variant='subheading' paragraph gutterBottom>
+            <Typography variant='subtitle1' paragraph gutterBottom>
               Members: {team.members.length}
             </Typography>
           </div>
diff --git a/client/src/views/teams/components/TeamsItem.js b/client/src/views/teams/components/TeamsItem.js
index b82242757..31dd696dc 100644
--- a/client/src/views/teams/components/TeamsItem.js
+++ b/client/src/views/teams/components/TeamsItem.js
@@ -35,7 +35,7 @@ export const TeamsItem = ({ classes, team }) => {
             title={team.name}
           />
           <CardContent className={classes.cardContent}>
-            <Typography gutterBottom variant='headline' component='h2'>
+            <Typography gutterBottom variant='h5' component='h2'>
               {team.name}
             </Typography>
             <Typography variant='caption' color='textSecondary'>
@@ -44,7 +44,7 @@ export const TeamsItem = ({ classes, team }) => {
             <Typography variant='caption' paragraph gutterBottom>
               Members: 1
             </Typography>
-            <Typography variant='subheading' color='primary'>
+            <Typography variant='subtitle1' color='primary'>
               Now recruiting!
             </Typography>
           </CardContent>
diff --git a/client/src/views/teams/components/TeamsList.js b/client/src/views/teams/components/TeamsList.js
index 8b628e2c3..5d2a3693f 100644
--- a/client/src/views/teams/components/TeamsList.js
+++ b/client/src/views/teams/components/TeamsList.js
@@ -5,6 +5,7 @@ import { Query } from 'react-apollo'
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
 import { withStyles } from '@material-ui/core/styles'
+import { MessageCard } from '@advancedalgos/web-components'
 
 import GET_ALL_TEAMS_QUERY from '../../../graphql/teams/GetAllTeamsQuery'
 
@@ -78,7 +79,7 @@ export const TeamsList = ({ classes, match }) => (
               <React.Fragment>
                 <div className={classes.heroContent}>
                   <Typography
-                    variant='display3'
+                    variant='h3'
                     align='center'
                     color='textPrimary'
                     gutterBottom
@@ -105,9 +106,7 @@ export const TeamsList = ({ classes, match }) => (
       } else {
         return (
           <Grid container spacing={40}>
-            <Typography variant='subheading' gutterBottom>
-              Loading...
-            </Typography>
+            <MessageCard message='Loading...' />
             {queryLoader}
             {errors}
           </Grid>