diff --git a/.eslintrc b/.eslintrc
index 933aa11..3d946ff 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,13 +2,14 @@
   "settings": {
     "react": {
       "pragma": "React",
-      "version": "16.0"
+      "version": "latest"
     }
   },
   "extends": ["standard", "standard-react", "plugin:jest/recommended"],
-  "plugins": ["jest"],
+  "plugins": ["react","jest"],
   rules: {
     'jest/valid-expect': 0,
     'react/jsx-boolean-value': 0
-  }
+  },
+  parser: "babel-eslint"
 }
diff --git a/package-lock.json b/package-lock.json
index c2a0724..c47d4ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16993,6 +16993,19 @@
         }
       }
     },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
     "react-side-effect": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
diff --git a/package.json b/package.json
index ab961a4..22b6b4a 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "storybook": "start-storybook -p 6006",
     "dev": "NODE_ENV=development PORT=3333 webpack-serve --config ./webpack.config.js",
     "build": "NODE_ENV=production webpack --mode production --config ./webpack.config.js",
-    "lint": "prettier-standard 'packages/*/src/**/*.js'",
+    "lint": "prettier-standard 'src/**/*.js'",
     "build-storybook": "build-storybook"
   },
   "peerDependencies": {
@@ -45,7 +45,7 @@
     "react-dom": "^16.6.3",
     "react-dropzone": "^5.1.0",
     "react-helmet": "^5.2.0",
-    "react-router": "^4.3.1"
+    "react-router-dom": "^4.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.0",
diff --git a/src/image-upload/__tests__/CropperDialog.test.js b/src/image-upload/__tests__/CropperDialog.test.js
index 1c9a7c8..6af9a1d 100644
--- a/src/image-upload/__tests__/CropperDialog.test.js
+++ b/src/image-upload/__tests__/CropperDialog.test.js
@@ -13,25 +13,29 @@ const cropPreview = {
   width: 350,
   height: 350
 }
-const placeHolder = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EAvatar%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+const placeHolder =
+  'https://aadevelop.blob.core.windows.net/module-web-components/assets/aa-logo.png'
 
 const ComponentNaked = unwrap(CropperDialog)
 
 describe('CropperDialog tests', () => {
   it('with shallow', () => {
-    const wrapper = shallow(<ComponentNaked open={false}
-      imgSrc={placeHolder}
-      handleClose={handleCloseMock}
-      handleCrop={handleCropMock}
-      handleCancel={handleCancelMock}
-      cropImagePreview={cropPreview}
-      cropperRef={(e) => this.instance()}
-      cropRatio={1}
-      classes={{
-        dialogContainer: '',
-        cropImageBox: ''
-      }}
-    />)
+    const wrapper = shallow(
+      <ComponentNaked
+        open={false}
+        imgSrc={placeHolder}
+        handleClose={handleCloseMock}
+        handleCrop={handleCropMock}
+        handleCancel={handleCancelMock}
+        cropImagePreview={cropPreview}
+        cropperRef={e => this.instance()}
+        cropRatio={1}
+        classes={{
+          dialogContainer: '',
+          cropImageBox: ''
+        }}
+      />
+    )
     console.log('shallow', wrapper.debug())
     expect(wrapper.find('CropperDialog')).toBeDefined()
   })
@@ -46,7 +50,7 @@ describe('CropperDialog tests', () => {
           handleCrop={handleCropMock}
           handleCancel={handleCancelMock}
           cropImagePreview={cropPreview}
-          cropperRef={(e) => this.instance()}
+          cropperRef={e => this.instance()}
           cropRatio={1}
           classes={{
             dialogContainer: '',
@@ -68,7 +72,7 @@ describe('CropperDialog tests', () => {
           handleCrop={handleCropMock}
           handleCancel={handleCancelMock}
           cropImagePreview={cropPreview}
-          cropperRef={(e) => this.instance()}
+          cropperRef={e => this.instance()}
           cropRatio={1}
           classes={{
             dialogContainer: '',
@@ -89,7 +93,7 @@ describe('CropperDialog tests', () => {
         handleCrop={handleCropMock}
         handleCancel={handleCancelMock}
         cropImagePreview={cropPreview}
-        cropperRef={(e) => this.instance()}
+        cropperRef={e => this.instance()}
         cropRatio={1}
         classes={{
           dialogContainer: '',
diff --git a/src/image-upload/components/CropperDialog.js b/src/image-upload/components/CropperDialog.js
index 5876ca1..c773725 100644
--- a/src/image-upload/components/CropperDialog.js
+++ b/src/image-upload/components/CropperDialog.js
@@ -29,7 +29,14 @@ class CropperDialog extends Component {
   }
 
   render () {
-    const { classes, open, handleClose, imgSrc, handleCancel, cropRatio } = this.props
+    const {
+      classes,
+      open,
+      handleClose,
+      imgSrc,
+      handleCancel,
+      cropRatio
+    } = this.props
     return (
       <Dialog
         open={open}
@@ -38,10 +45,8 @@ class CropperDialog extends Component {
       >
         <div classes={classes.dialogContainer}>
           <DialogContent>
-            <div className={classes.cropImageBox} >
-              {imgSrc === null && (
-                <div>Loading...</div>
-              )}
+            <div className={classes.cropImageBox}>
+              {imgSrc === null && <div>Loading...</div>}
               {imgSrc !== null && (
                 <Cropper
                   rate={cropRatio}
@@ -60,10 +65,7 @@ class CropperDialog extends Component {
             <Button onClick={handleCancel} color='primary'>
               Cancel
             </Button>
-            <Button
-              onClick={this.handleCrop}
-              color='primary'
-            >
+            <Button onClick={this.handleCrop} color='primary'>
               Crop Image
             </Button>
           </DialogActions>
diff --git a/src/image-upload/components/DropZone.js b/src/image-upload/components/DropZone.js
index 31f4617..135864e 100644
--- a/src/image-upload/components/DropZone.js
+++ b/src/image-upload/components/DropZone.js
@@ -36,12 +36,14 @@ export const DropZone = ({ classes, onDrop, handleCancel, dropzoneStyle }) => (
   <React.Fragment>
     <Dropzone
       accept='image/jpeg, image/png'
-      onDrop={(e) => onDrop(e)}
+      onDrop={e => onDrop(e)}
       className={classes.dropzone}
       multiple={false}
       style={{ height: dropzoneStyle.height ? dropzoneStyle.height : 200 }}
     >
-      <p className={classes.dropzoneText}>Drag *.jpeg or *.png image here or click to select</p>
+      <p className={classes.dropzoneText}>
+        Drag *.jpeg or *.png image here or click to select
+      </p>
     </Dropzone>
     <Button
       size='small'
diff --git a/src/image-upload/components/ImagePreview.js b/src/image-upload/components/ImagePreview.js
index 5fc30e3..cae56ef 100644
--- a/src/image-upload/components/ImagePreview.js
+++ b/src/image-upload/components/ImagePreview.js
@@ -66,12 +66,18 @@ const styles = theme => ({
     position: 'relative',
     textTransform: 'uppercase',
     fontWeight: 700,
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit + 6}px`,
+    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme
+      .spacing.unit + 6}px`,
     fontFamily: '"Saira","Saira Condensed", "Arial Narrow", Arial, sans-serif'
   }
 })
 
-export const ImagePreview = ({ classes, handleChangeImage, image, imagePreview }) => (
+export const ImagePreview = ({
+  classes,
+  handleChangeImage,
+  image,
+  imagePreview
+}) => (
   <React.Fragment>
     <ButtonBase
       focusRipple
diff --git a/src/image-upload/index.js b/src/image-upload/index.js
index 94c7c31..d7d7da6 100644
--- a/src/image-upload/index.js
+++ b/src/image-upload/index.js
@@ -79,12 +79,30 @@ class ImageUpload extends Component {
     this.saveImage = this.saveImage.bind(this)
     this.debug = this.props.debug
 
-    let containerStyleConfig = props.containerStyle !== undefined ? props.containerStyle : containerStyleDefault
-    let previewConfig = props.imagePreviewConfig !== undefined ? props.imagePreviewConfig : imagePreviewDefault
-    let cropConfig = props.cropContainerConfig !== undefined ? props.cropContainerConfig : cropConfigDefault
-    let saveConfig = props.saveImageConfig !== undefined ? props.saveImageConfig : saveImageConfigDefault
-    let cropPreview = props.cropPreviewBox !== undefined ? props.cropPreviewBox : cropPreviewBoxDefault
-    let dropzoneStyleConfig = props.dropzoneStyle !== undefined ? props.dropzoneStyle : dropzoneStyleDefault
+    let containerStyleConfig =
+      props.containerStyle !== undefined
+        ? props.containerStyle
+        : containerStyleDefault
+    let previewConfig =
+      props.imagePreviewConfig !== undefined
+        ? props.imagePreviewConfig
+        : imagePreviewDefault
+    let cropConfig =
+      props.cropContainerConfig !== undefined
+        ? props.cropContainerConfig
+        : cropConfigDefault
+    let saveConfig =
+      props.saveImageConfig !== undefined
+        ? props.saveImageConfig
+        : saveImageConfigDefault
+    let cropPreview =
+      props.cropPreviewBox !== undefined
+        ? props.cropPreviewBox
+        : cropPreviewBoxDefault
+    let dropzoneStyleConfig =
+      props.dropzoneStyle !== undefined
+        ? props.dropzoneStyle
+        : dropzoneStyleDefault
     this.containerStyleConfig = containerStyleConfig
     this.previewConfig = previewConfig
     this.cropConfig = cropConfig
@@ -105,12 +123,7 @@ class ImageUpload extends Component {
   }
 
   render () {
-    const {
-      classes,
-      existingImage,
-      cropRatio,
-      fileName
-    } = this.props
+    const { classes, existingImage, cropRatio, fileName } = this.props
 
     let image = null
     if (this.debug) console.log('Image Upload existingImage: ', existingImage)
@@ -126,19 +139,33 @@ class ImageUpload extends Component {
         style={this.containerStyleConfig}
       >
         {this.state.event === 'cropping' && (
-          <Typography variant='h6' color='primary' >Cropping...</Typography>
+          <Typography variant='h6' color='primary'>
+            Cropping...
+          </Typography>
         )}
         {this.state.event !== 'cropping' && (
           <React.Fragment>
             <div>
-              { (this.state.event === 'preview' || this.state.event === 'uploaded') && this.state.event !== 'choose' && (
-                <ImagePreview handleChangeImage={this.handleChangeImage} image={image} imagePreview={this.previewConfig} />
+              {(this.state.event === 'preview' ||
+                this.state.event === 'uploaded') &&
+                this.state.event !== 'choose' && (
+                <ImagePreview
+                  handleChangeImage={this.handleChangeImage}
+                  image={image}
+                  imagePreview={this.previewConfig}
+                />
               )}
-              { this.state.event === 'choose' && (
-                <DropZone onDrop={this.onDrop} handleCancel={this.handleCancel} dropzoneStyle={this.dropzoneStyleConfig} />
+              {this.state.event === 'choose' && (
+                <DropZone
+                  onDrop={this.onDrop}
+                  handleCancel={this.handleCancel}
+                  dropzoneStyle={this.dropzoneStyleConfig}
+                />
               )}
-              { this.state.event === 'uploaded' && (
-                <Typography variant='h6' color='primary' >Save profile to save image changes</Typography>
+              {this.state.event === 'uploaded' && (
+                <Typography variant='h6' color='primary'>
+                  Save profile to save image changes
+                </Typography>
               )}
             </div>
             <CropperDialog
@@ -183,23 +210,44 @@ class ImageUpload extends Component {
     const croppedBlob = await imgSrcToBlob(cropped, 'image/png', 'Anonymous')
     let resizedBlob = await readAndCompressImage(croppedBlob, this.saveConfig)
 
-    return this.setState({ editedImage: resizedBlob, event: 'cropping', open: false }, () => {
-      this.saveImage()
-    })
+    return this.setState(
+      { editedImage: resizedBlob, event: 'cropping', open: false },
+      () => {
+        this.saveImage()
+      }
+    )
   }
 
   async saveImage () {
-    const { AzureStorageUrl, AzureSASURL, containerName, fileName, handleUrl } = this.props
+    const {
+      AzureStorageUrl,
+      AzureSASURL,
+      containerName,
+      fileName,
+      handleUrl
+    } = this.props
     const SASurl = `${AzureStorageUrl}?${AzureSASURL}`
 
     // create Azure BlockBlobURL to save image to
-    const pipeline = Azure.StorageURL.newPipeline(new Azure.AnonymousCredential())
+    const pipeline = Azure.StorageURL.newPipeline(
+      new Azure.AnonymousCredential()
+    )
     const serviceURL = new Azure.ServiceURL(SASurl, pipeline)
 
-    const containerURL = Azure.ContainerURL.fromServiceURL(serviceURL, containerName)
-    const blockBlobURL = Azure.BlockBlobURL.fromContainerURL(containerURL, fileName)
+    const containerURL = Azure.ContainerURL.fromServiceURL(
+      serviceURL,
+      containerName
+    )
+    const blockBlobURL = Azure.BlockBlobURL.fromContainerURL(
+      containerURL,
+      fileName
+    )
 
-    await Azure.uploadBrowserDataToBlockBlob(Azure.Aborter.None, this.state.editedImage, blockBlobURL)
+    await Azure.uploadBrowserDataToBlockBlob(
+      Azure.Aborter.None,
+      this.state.editedImage,
+      blockBlobURL
+    )
 
     const image = `${AzureStorageUrl}${containerName}/${fileName}`
     handleUrl(image) // pass image URL up to be save to DB
diff --git a/src/image-upload/stories/image-upload.stories.js b/src/image-upload/stories/image-upload.stories.js
index cd20087..4779f2a 100644
--- a/src/image-upload/stories/image-upload.stories.js
+++ b/src/image-upload/stories/image-upload.stories.js
@@ -9,7 +9,8 @@ import { withKnobs, text } from '@storybook/addon-knobs'
 import ImageUpload from '../index'
 import { CropperDialog, DropZone, ImagePreview } from '../components'
 
-const placeholder = 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-avatar-default.png'
+const placeholder =
+  'https://aadevelop.blob.core.windows.net/module-web-components/assets/aa-logo.png'
 
 storiesOf('ImageUpload', module)
   .addDecorator(withKnobs)
@@ -19,8 +20,13 @@ storiesOf('ImageUpload', module)
       fileName={text('fileName', 'test-avatar.jpg')}
       containerName={text('containerName', 'test-team')}
       existingImage={placeholder}
-      cropRatio={4/1}
-      imagePreviewConfig={{ width: 400, height: 100, title: 'Change Avatar', fontSize: '1em' }}
+      cropRatio={4 / 1}
+      imagePreviewConfig={{
+        width: 400,
+        height: 100,
+        title: 'Change Avatar',
+        fontSize: '1em'
+      }}
       cropContainerConfig={{ x: 10, y: 10, width: 200, height: 200 }}
       cropPreviewBox={{ width: 350, height: 350 }}
       saveImageConfig={{
@@ -38,8 +44,14 @@ storiesOf('ImageUpload', module)
         overflow: 'visible'
       }}
       dropzoneStyle={{ height: 200 }}
-      AzureStorageUrl={text('AzureStorageUrl', 'https://algobotcommstorage.blob.core.windows.net/')}
-      AzureSASURL={text('AzureSASURL', '?sv=2017-11-09&ss=b&srt=co&sp=rwlac&se=2019-01-01T14:53:55Z&st=2018-09-20T05:53:55Z&spr=https&sig=sDFrTdrN3hbTT1ugyFoDRjT4D1xZ%2BCz%2Bwouv50hHraA%3D')}
+      AzureStorageUrl={text(
+        'AzureStorageUrl',
+        'https://algobotcommstorage.blob.core.windows.net/'
+      )}
+      AzureSASURL={text(
+        'AzureSASURL',
+        '?sv=2017-11-09&ss=b&srt=co&sp=rwlac&se=2019-01-01T14:53:55Z&st=2018-09-20T05:53:55Z&spr=https&sig=sDFrTdrN3hbTT1ugyFoDRjT4D1xZ%2BCz%2Bwouv50hHraA%3D'
+      )}
     />
   ))
 
@@ -52,9 +64,9 @@ var options = {
   cache: 'default'
 }
 const request = new window.Request(placeholder)
-const downloadedImg = window.fetch(request, options).then((response) => {
+const downloadedImg = window.fetch(request, options).then(response => {
   console.log('downloadedImg: ', response)
-  return response.arrayBuffer().then((buffer) => {
+  return response.arrayBuffer().then(buffer => {
     var base64Flag = 'data:image/jpeg;base64,'
     var imageStr = arrayBufferToBase64(buffer)
 
@@ -62,11 +74,13 @@ const downloadedImg = window.fetch(request, options).then((response) => {
   })
 })
 
-const arrayBufferToBase64 = (buffer) => {
+const arrayBufferToBase64 = buffer => {
   var binary = ''
   var bytes = [].slice.call(new Uint8Array(buffer))
 
-  bytes.forEach((b) => { binary += String.fromCharCode(b) })
+  bytes.forEach(b => {
+    binary += String.fromCharCode(b)
+  })
 
   return window.btoa(binary)
 }
@@ -89,10 +103,17 @@ class LoadImage extends React.Component {
 storiesOf('ImageUpload Components', module)
   .addDecorator(withKnobs)
   .add('Image Preview component', () => (
-    <ImagePreview handleChangeImage={action('Change clicked')} image={placeholder} imagePreview={{ width: 400, title: 'Change Avatar' }} />
+    <ImagePreview
+      handleChangeImage={action('Change clicked')}
+      image={placeholder}
+      imagePreview={{ width: 400, title: 'Change Avatar' }}
+    />
   ))
   .add('DropZone component', () => (
-    <DropZone onDrop={action('Image dropped or selected')} handleCancel={action('Change image cancelled')} />
+    <DropZone
+      onDrop={action('Image dropped or selected')}
+      handleCancel={action('Change image cancelled')}
+    />
   ))
   .add('Cropper Dialog component: open', () => (
     <LoadImage>
@@ -110,7 +131,6 @@ storiesOf('ImageUpload Components', module)
             cropRatio={1}
           />
         )
-      }
-      }
+      }}
     </LoadImage>
   ))
diff --git a/src/message-card/__tests__/MessageCard.test.js b/src/message-card/__tests__/MessageCard.test.js
index b8026af..d48b8a6 100644
--- a/src/message-card/__tests__/MessageCard.test.js
+++ b/src/message-card/__tests__/MessageCard.test.js
@@ -19,6 +19,12 @@ describe('MessageCard tests', () => {
 
     // Expect the wrapper object to be defined
     expect(wrapper.find('MessageCard')).toBeDefined()
-    expect(wrapper.dive().dive().dive().find('h1'))
+    expect(
+      wrapper
+        .dive()
+        .dive()
+        .dive()
+        .find('h1')
+    )
   })
 })
diff --git a/src/message-card/stories/message-card.stories.js b/src/message-card/stories/message-card.stories.js
index 766e6ee..76ab5dc 100644
--- a/src/message-card/stories/message-card.stories.js
+++ b/src/message-card/stories/message-card.stories.js
@@ -8,4 +8,6 @@ import MessageCard from '../index'
 
 storiesOf('MessageCard', module)
   .addDecorator(withKnobs)
-  .add('with text', () => <MessageCard message={text('Message', 'This is a message')} />)
+  .add('with text', () => (
+    <MessageCard message={text('Message', 'This is a message')} />
+  ))
diff --git a/src/page/index.js b/src/page/index.js
index 6fe957d..e7aea22 100644
--- a/src/page/index.js
+++ b/src/page/index.js
@@ -1,45 +1,130 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { withRouter } from 'react-router-dom'
+import Helmet from 'react-helmet'
 
-import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/core/styles'
-
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-
-const styles = theme => ({
-  card: {
-    display: 'flex',
-    width: '100%',
-    margin: '1.5em',
-    padding: '3em'
-  },
-  cardDetails: {
-    display: 'flex',
-    flex: 1
-  },
-  cardContent: {
-    flex: 1
+const PORT = process.env.PORT ? process.env.PORT : 6101
+
+let SITE_URL =
+  process.env.NODE_ENV === 'development'
+    ? `http://localhost:${PORT}`
+    : 'https://platform.advancedalgos.net'
+
+SITE_URL = process.env.SITE_URL ? process.env.SITE_URL : SITE_URL
+
+const FACEBOOK_APP_ID = process.env.FACEBOOK_APP_ID ? process.env.FACEBOOK_APP_ID : null
+
+const defaultTitle = 'Advanced Algos Platform'
+const defaultDescription =
+  'The Advanced Algos Web Platform is the central hub for developing Financial Beings'
+const defaultImage = 'https://aadevelop.blob.core.windows.net/module-web-components/assets/aa-logo.png'
+const defaultTwitter = '@advancedalgos'
+const defaultSep = ' | '
+
+class Page extends Component {
+  getMetaTags (
+    {
+      title,
+      subtitle,
+      description,
+      image,
+      contentType,
+      twitter,
+      facebook,
+      noCrawl,
+      published,
+      updated,
+      category,
+      tags
+    },
+    pathname
+  ) {
+    const theTitle = title
+      ? (title + defaultSep + defaultTitle).substring(0, 60)
+      : defaultTitle
+    const theDescription = description
+      ? description.substring(0, 155)
+      : defaultDescription
+    const theImage = image || defaultImage
+
+    const metaTags = [
+      { itemprop: 'name', content: theTitle },
+      { itemprop: 'description', content: theDescription },
+      { itemprop: 'image', content: theImage },
+      { name: 'description', content: theDescription }
+    ]
+
+    if (facebook) {
+      metaTags.push({ property: 'fb:app_id', content: FACEBOOK_APP_ID })
+      metaTags.push({ property: 'og:title', content: theTitle })
+      metaTags.push({ property: 'og:type', content: contentType || 'website' })
+      metaTags.push({ property: 'og:url', content: SITE_URL + pathname })
+      metaTags.push({ property: 'og:image', content: theImage })
+      metaTags.push({ property: 'og:description', content: theDescription })
+      metaTags.push({ property: 'og:site_name', content: defaultTitle })
+    }
+
+    if (twitter) {
+      metaTags.push({ name: 'twitter:card', content: 'summary_large_image' })
+      metaTags.push({ name: 'twitter:site', content: defaultTwitter })
+      metaTags.push({ name: 'twitter:title', content: theTitle })
+      metaTags.push({ name: 'twitter:description', content: theDescription })
+      metaTags.push({ name: 'twitter:creator', content: twitter || defaultTwitter })
+      metaTags.push({ name: 'twitter:image:src', content: theImage })
+    }
+
+    if (noCrawl) {
+      metaTags.push({ name: 'robots', content: 'noindex, nofollow' })
+    }
+
+    if (published) {
+      metaTags.push({ name: 'article:published_time', content: published })
+    }
+    if (updated) {
+      metaTags.push({ name: 'article:modified_time', content: updated })
+    }
+    if (category) {
+      metaTags.push({ name: 'article:section', content: category })
+    }
+    if (tags) {
+      metaTags.push({ name: 'article:tag', content: tags })
+    }
+
+    return metaTags
   }
-})
-
-export const MessageCard = ({ classes, message, children }) => (
-  <Card className={classes.card}>
-    <div className={classes.cardDetails}>
-      <CardContent className={classes.cardContent}>
-        <Typography variant='h5' align='center' gutterBottom>
-          {message}
-        </Typography>
+
+  render () {
+    const { children, location, ...rest } = this.props
+
+    return (
+      <div className={`page-${rest.title}`}>
+        <Helmet
+          htmlAttributes={{
+            lang: 'en',
+            itemscope: undefined,
+            itemtype: `http://schema.org/${rest.schema || 'WebPage'}`
+          }}
+          title={
+            (rest.title && rest.subtitle) ? rest.title + defaultSep + rest.subtitle : defaultTitle
+          }
+          link={[
+            {
+              rel: 'canonical',
+              href: SITE_URL + this.props.location.pathname
+            }
+          ]}
+          meta={this.getMetaTags(rest, this.props.location.pathname)}
+        />
         {children}
-      </CardContent>
-    </div>
-  </Card>
-)
+      </div>
+    )
+  }
+}
 
-MessageCard.propTypes = {
+Page.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object.isRequired,
-  message: PropTypes.string
+  location: PropTypes.object
 }
 
-export default withStyles(styles)(MessageCard)
+export default withRouter(Page)
diff --git a/src/page/stories/page.stories.js b/src/page/stories/page.stories.js
index 766e6ee..3e7688a 100644
--- a/src/page/stories/page.stories.js
+++ b/src/page/stories/page.stories.js
@@ -1,11 +1,26 @@
 /* eslint react/prop-types: 0 */
 import React from 'react'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
 
 import { storiesOf } from '@storybook/react'
 import { withKnobs, text } from '@storybook/addon-knobs'
 
-import MessageCard from '../index'
+import Page from '../index'
+import MessageCard from '../../message-card/'
 
-storiesOf('MessageCard', module)
+storiesOf('Page', module)
   .addDecorator(withKnobs)
-  .add('with text', () => <MessageCard message={text('Message', 'This is a message')} />)
+  .add('with text', () => (
+    <Router>
+      <Route path='/' component={props => (
+        <Page
+          title='Advanced Algos'
+          subtitile='Development Platform'
+          description='This is a description of the Advanced Algos Development Platform'
+        >
+          {console.log(props)}
+          <MessageCard message={text('Message', 'This message is wrapped by a page component')} />
+        </Page>
+      )} />
+    </Router>
+  ))