diff --git a/website/src/Home/Home.js b/website/src/Home/Home.js
index e3ae828..d780ee7 100644
--- a/website/src/Home/Home.js
+++ b/website/src/Home/Home.js
@@ -13,7 +13,7 @@ export class Home extends Component {
     this.props.onChangeTitle('Home')
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     this.props.onChangeTitle('')
   }
 
diff --git a/website/src/Modal/MessageModal.js b/website/src/Modal/MessageModal.js
index 7c2c6ba..f01209a 100644
--- a/website/src/Modal/MessageModal.js
+++ b/website/src/Modal/MessageModal.js
@@ -37,7 +37,7 @@ export class MessageModal extends React.Component {
         <form onSubmit={this.onSubmit} id='messageModal'>
           <Row>
             <Row.Item>
-              <Icon name={icon} size={sizeInfo.messageModalIcon} />
+              <Icon name={icon} size={sizeInfo.modalMessageIcon} />
             </Row.Item>
             <Row.Item grow>
               <Column height='100%'>
diff --git a/website/src/Modal/YesNoMessageModal.js b/website/src/Modal/YesNoMessageModal.js
index e9efb73..c5c6190 100644
--- a/website/src/Modal/YesNoMessageModal.js
+++ b/website/src/Modal/YesNoMessageModal.js
@@ -35,7 +35,7 @@ export class YesNoMessageModal extends React.Component {
         <form onSubmit={this.onSubmit} id='messageModal'>
           <Row>
             <Row.Item>
-              <Icon name='help' size={sizeInfo.messageModalIcon} />
+              <Icon name='help' size={sizeInfo.modalMessageIcon} />
             </Row.Item>
             <Row.Item grow>
               <Column height='100%'>
diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js
index 03ccb50..f8b7fe2 100644
--- a/website/src/ui/Button.js
+++ b/website/src/ui/Button.js
@@ -49,7 +49,7 @@ class Button extends Component {
     return (
       <input name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'}
         disabled={disabled} form={submit}
-        style={[Button.style.button, { width, minWidth: sizeInfo.minButtonWidth }]}
+        style={[Button.style.button, { width, minWidth: sizeInfo.buttonMinWidth }]}
         onClick={onClick} value={text} />
     )
   }
diff --git a/website/src/ui/HeaderButton.js b/website/src/ui/HeaderButton.js
index e637be2..ab5b82a 100644
--- a/website/src/ui/HeaderButton.js
+++ b/website/src/ui/HeaderButton.js
@@ -12,18 +12,16 @@ class HeaderButton extends Component {
   }
 
   static style = {
-    button: {
-      background: colorInfo.headerButtonBackground,
-      verticalAlign: 'middle',
-      borderWidth: 0,
-      padding: '0 0 0 0',
-      outline: 'none',
-      ':hover': {
-        background: colorInfo.headerButtonBackgroundHover,
-      },
-      ':active': {
-        background: colorInfo.headerButtonBackgroundActive,
-      }
+    background: colorInfo.headerButtonBackground,
+    verticalAlign: 'middle',
+    borderWidth: 0,
+    padding: '0 0 0 0',
+    outline: 'none',
+    ':hover': {
+      background: colorInfo.headerButtonBackgroundHover,
+    },
+    ':active': {
+      background: colorInfo.headerButtonBackgroundActive,
     }
   }
 
@@ -33,13 +31,13 @@ class HeaderButton extends Component {
     let content = null
 
     if (image) {
-      content = (<Image source={image} width={size} height={size} />)
+      content = (<Image source={image} width={size} height={size} margin={sizeInfo.headerButtonMargin} />)
     } else if (icon) {
-      content = (<Icon name={icon} size={size} />)
+      content = (<Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />)
     }
 
     return (
-      <button type='button' style={[{ height: size, width: size }, HeaderButton.style.button]} onClick={onClick}>
+      <button type='button' style={[{ height: size, width: size }, HeaderButton.style]} onClick={onClick}>
         {content}
       </button>
     )
diff --git a/website/src/ui/HeaderText.js b/website/src/ui/HeaderText.js
index 0d59c17..7b6a3be 100644
--- a/website/src/ui/HeaderText.js
+++ b/website/src/ui/HeaderText.js
@@ -10,16 +10,16 @@ class HeaderText extends Component {
 
   static style = {
     position: 'relative',
-    top: 3,
+    top: sizeInfo.headerTextOffset,
     display: 'inline-block',
-    fontSize: fontInfo.size.huge,
+    fontSize: fontInfo.size.header,
     fontFamily: fontInfo.family,
     color: fontInfo.color.normal,
     textAlign: 'left',
     background: 'transparent',
     verticalAlign: 'middle',
     borderWidth: 0,
-    paddingLeft: 10,
+    paddingLeft: sizeInfo.headerPaddingLeft,
   }
 
   render() {
diff --git a/website/src/ui/Image.js b/website/src/ui/Image.js
index ca6cf9e..f14a15b 100644
--- a/website/src/ui/Image.js
+++ b/website/src/ui/Image.js
@@ -8,11 +8,12 @@ class Image extends Component {
     source: PropTypes.string,
     width: PropTypes.number,
     height: PropTypes.number,
+    margin: PropTypes.number,
   }
 
   render() {
     let { source, width, height } = this.props
-    const margin = sizeInfo.imageDefaultMargin
+    const margin = this.props.margin || sizeInfo.imageDefaultMargin
 
     width = width ? (width - margin * 2) : null
     height = height ? (height - margin * 2) : null
diff --git a/website/src/ui/PanelButton.js b/website/src/ui/PanelButton.js
index 13e75ff..915aef0 100644
--- a/website/src/ui/PanelButton.js
+++ b/website/src/ui/PanelButton.js
@@ -45,7 +45,7 @@ class PanelButton extends Component {
           <Icon name={icon} size={sizeInfo.panelButtonIcon} margin={sizeInfo.panelButtonIconMargin} />
           <span style={{
             position: 'absolute',
-            top: sizeInfo.panelTextOffset,
+            top: sizeInfo.panelButtonTextOffset,
             left: 0,
             display: 'block',
             fontSize: fontInfo.size.huge,
diff --git a/website/src/ui/Text.js b/website/src/ui/Text.js
index 75c4ab6..2c05da4 100644
--- a/website/src/ui/Text.js
+++ b/website/src/ui/Text.js
@@ -7,7 +7,7 @@ class Text extends Component {
   static propTypes = {
     size: PropTypes.oneOf(['small', 'medium', 'large', 'huge']),
     color: PropTypes.oneOf(['normal', 'inverse', 'alert', 'dimmed']),
-    margin: PropTypes.number,
+    margin: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     children: PropTypes.node,
     width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     hidden: PropTypes.bool,
diff --git a/website/src/ui/style.js b/website/src/ui/style.js
index ad139e4..dd3ae78 100644
--- a/website/src/ui/style.js
+++ b/website/src/ui/style.js
@@ -41,41 +41,54 @@ Object.assign(colorInfo, {
 })
 
 const sizeInfo = {
-  headerHeight: 60,
   imageDefaultMargin: 5,
   iconDefaultMargin: 10,
+
+  headerHeight: 40,
   headerBorderWidth: 1,
-  listBorderWidth: 1,
+  headerPaddingLeft: 10,
+  headerTextOffset: 2,
+  headerButtonMargin: 8,
+
+  footerTextMargin: '5px 0px 5px 10px',
+
   buttonHeight: 40,
   buttonPadding: '0 15px 0 15px',
-  minButtonWidth: 100,
+
   checkboxSize: 25,
   checkmarkBorder: '0 3px 3px 0',
+
   panelButton: 200,
   panelButtonIcon: 170,
   panelButtonIconMargin: 0,
-  panelTextOffset: 120,
-  formBoxRadius: 5,
-  listTopBottomGap: 10,
-  modalWidth: 450,
-  modalShadowWidth: 25,
-  inputPadding: 5,
-  inputBorderRadius: 5,
-  listIconMargin: '5px 10px 5px 10px',
-  loaderSize: 20,
-  loaderSpacing: 5,
   panelButtonBorderRadius: 25,
   panelButtonBorderWidth: 2,
-  messageModalIcon: 150,
+  panelButtonTextOffset: 125,
+  panelButtonSpacing: 30,
+
+  formBoxRadius: 5,
   formColumnSpacing: 20,
   formRowSpacing: 20,
-  loginLogoWidth: 250,
-  footerTextMargin: 10,
-  panelButtonSpacing: 30,
   formBoundIcon: 30,
   formBoundIconMargin: 0,
-  listIcon: 25,
   formButtonLarge: 225,
+
+  listBorderWidth: 1,
+  listTopBottomGap: 10,
+  listIcon: 25,
+  listIconMargin: '5px 10px 5px 10px',
+
+  modalWidth: 450,
+  modalShadowWidth: 25,
+  modalMessageIcon: 150,
+
+  inputPadding: 5,
+  inputBorderRadius: 5,
+
+  loaderSize: 20,
+  loaderSpacing: 5,
+
+  loginLogoWidth: 250,
 }
 
 const fontInfo = {
@@ -85,6 +98,8 @@ const fontInfo = {
     medium: '12pt',
     large: '14pt',
     huge: '26pt',
+    header: '18pt',
+    footer: '8pt',
   },
   color: {
     'normal': colorInfo.text,