diff --git a/app/components/UI/DataRow.js b/app/components/UI/DataRow.js
index 77c62f14..ae02f481 100644
--- a/app/components/UI/DataRow.js
+++ b/app/components/UI/DataRow.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import { Flex } from 'rebass'
 import { Text } from 'components/UI'
 
-const DataRow = ({ left, right }) => (
-  <Flex alignItems="center" py={3}>
-    <Text width={1 / 2} fontWeight="normal">
+const DataRow = ({ left, right, ...rest }) => (
+  <Flex alignItems="center" py={3} {...rest} justifyContent="space-between">
+    <Text width={2 / 5} fontWeight="normal">
       {left}
     </Text>
-    <Text width={1 / 2} textAlign="right">
+    <Text width={3 / 5} textAlign="right">
       {right}
     </Text>
   </Flex>
diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js
index 8e27fc07..6081ddb0 100644
--- a/app/components/UI/GlobalStyle.js
+++ b/app/components/UI/GlobalStyle.js
@@ -41,6 +41,15 @@ const GlobalStyle = createGlobalStyle`
     font-size: 13px;
   }
 
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  pre {
+    font-family: "Lucida Console", Monaco, monospace;
+  }
+
   #root {
     height: 100%;
   }
diff --git a/app/components/UI/Header.js b/app/components/UI/Header.js
index 535e6016..e53f4068 100644
--- a/app/components/UI/Header.js
+++ b/app/components/UI/Header.js
@@ -3,23 +3,29 @@ import PropTypes from 'prop-types'
 import { Flex } from 'rebass'
 import { Heading, Text } from 'components/UI'
 
-const Header = ({ title, subtitle, logo }) => (
-  <Flex alignItems="center" as="header" flexDirection="column">
+const Header = ({ title, subtitle, align, logo }) => (
+  <Flex alignItems={align} as="header" flexDirection="column" justifyContent={align}>
     {logo && (
-      <Flex alignItems="center" justifyContent="center">
-        <Text fontSize="50px" lineHeight="1em" css={{ height: '50px' }}>
-          {logo}
-        </Text>
-      </Flex>
+      <Text textAlign={align} fontSize="50px" lineHeight="1em" css={{ height: '50px' }}>
+        {logo}
+      </Text>
     )}
-    {title && <Heading.h1>{title}</Heading.h1>}
-    {subtitle && <Heading.h4>{subtitle}</Heading.h4>}
+    {title && (
+      <Heading.h1 textAlign={align} mb={1}>
+        {title}
+      </Heading.h1>
+    )}
+    {subtitle && <Heading.h4 textAlign={align}>{subtitle}</Heading.h4>}
   </Flex>
 )
 Header.propTypes = {
   title: PropTypes.node,
   subtitle: PropTypes.node,
-  logo: PropTypes.node
+  logo: PropTypes.node,
+  align: PropTypes.string
+}
+Header.defaultProps = {
+  align: 'center'
 }
 
 export default Header
diff --git a/app/components/UI/Heading.js b/app/components/UI/Heading.js
index cf82c2ce..0d235008 100644
--- a/app/components/UI/Heading.js
+++ b/app/components/UI/Heading.js
@@ -14,7 +14,7 @@ class Heading extends React.PureComponent {
     return (
       <BaseHeading
         as="h2"
-        lineHeight="1.4"
+        lineHeight="1.2"
         fontWeight="light"
         fontSize={5}
         color="primaryText"
diff --git a/app/components/UI/Input.js b/app/components/UI/Input.js
index 3482b0af..9c30da16 100644
--- a/app/components/UI/Input.js
+++ b/app/components/UI/Input.js
@@ -1,10 +1,13 @@
+/* eslint-disable react/no-multi-comp */
+
 import React from 'react'
 import { asField } from 'informed'
 import { withTheme } from 'styled-components'
 import system from '@rebass/components'
 import { styles } from 'styled-system'
+import * as yup from 'yup'
 import { Flex } from 'rebass'
-import { Message } from 'components/UI'
+import { Message, Label, Span, Text } from 'components/UI'
 
 // Create an html input element that accepts all style props from styled-system.
 const SystemInput = system(
@@ -21,7 +24,15 @@ const SystemInput = system(
     p: 3,
     width: 1
   },
-  ...Object.keys(styles)
+  'space',
+  'color',
+  'borders',
+  'borderColor',
+  'borderRadius',
+  'fontFamily',
+  'fontSize',
+  'fontWeight',
+  'width'
 )
 
 /**
@@ -33,6 +44,12 @@ const SystemInput = system(
 class Input extends React.Component {
   static displayName = 'Input'
 
+  static defaultProps = {
+    description: null,
+    label: null,
+    showMessage: true
+  }
+
   state = {
     hasFocus: false
   }
@@ -46,16 +63,33 @@ class Input extends React.Component {
   render() {
     const {
       css,
+      description,
       onChange,
       onBlur,
       onFocus,
       forwardedRef,
+      label,
+      required,
       theme,
+      field,
       fieldApi,
       fieldState,
       justifyContent,
+      showMessage,
+      validate,
+      variant,
       ...rest
     } = this.props
+
+    // Extract any styled-system space props so that we can apply them directly to the wrapper.
+    const spaceProps = {}
+    Object.keys(rest).forEach(key => {
+      if ([...Object.keys(styles.space.propTypes), 'width'].includes(key)) {
+        spaceProps[key] = rest[key]
+        delete rest[key]
+      }
+    })
+
     const { readOnly } = this.props
     const { hasFocus } = this.state
     const { setValue, setTouched } = fieldApi
@@ -66,15 +100,28 @@ class Input extends React.Component {
     let borderColor
     if (readOnly) {
       borderColor = theme.colors.gray
-    } else if (fieldState.error) {
+    } else if (fieldState.error || fieldState.asyncError) {
       borderColor = theme.colors.superRed
-    } else if (value && !fieldState.error) {
+    } else if (value && (!fieldState.error && !fieldState.asyncError)) {
       borderColor = theme.colors.superGreen
     }
 
     return (
-      <Flex flexDirection="column" justifyContent={justifyContent}>
+      <Flex flexDirection="column" justifyContent={justifyContent} {...spaceProps}>
+        {label && (
+          <Label htmlFor={field} mb={2}>
+            {label}
+            {required && (
+              <Span fontSize="s" css={{ 'vertical-align': 'super' }}>
+                {' '}
+                *
+              </Span>
+            )}
+          </Label>
+        )}
         <SystemInput
+          p={variant === 'thin' ? 2 : 3}
+          width={1}
           borderColor={borderColor || theme.colors.gray}
           css={Object.assign(
             {
@@ -88,6 +135,7 @@ class Input extends React.Component {
             css
           )}
           {...rest}
+          field={field}
           ref={this.inputRef}
           value={!value && value !== 0 ? '' : value}
           onChange={e => {
@@ -117,16 +165,51 @@ class Input extends React.Component {
               onFocus(e)
             }
           }}
-          error={fieldState.error}
+          required={required}
         />
-        {fieldState.error && (
-          <Message variant={hasFocus ? 'warning' : 'error'} justifyContent={justifyContent} mt={2}>
-            {fieldState.error}
-          </Message>
+        {description && (
+          <Text color="gray" fontSize="s" mt={1}>
+            {description}
+          </Text>
         )}
+        {showMessage &&
+          (fieldState.error || fieldState.asyncError) && (
+            <Message variant={hasFocus ? 'warning' : 'error'} mt={1}>
+              {fieldState.error || fieldState.asyncError}
+            </Message>
+          )}
       </Flex>
     )
   }
 }
 
-export default asField(withTheme(Input))
+const InputAsField = asField(Input)
+
+class WrappedInputAsField extends React.Component {
+  validate = value => {
+    const { disabled, required } = this.props
+    if (disabled) {
+      return
+    }
+    try {
+      if (required) {
+        const validator = yup.string().required()
+        validator.validateSync(value)
+      }
+    } catch (error) {
+      return error.message
+    }
+
+    // Run any additional validation provided by the caller.
+    const { validate } = this.props
+    if (validate) {
+      return validate(value)
+    }
+  }
+
+  render() {
+    return <InputAsField validate={this.validate} {...this.props} />
+  }
+}
+
+export default withTheme(WrappedInputAsField)
diff --git a/app/components/UI/Label.js b/app/components/UI/Label.js
index a375a24e..66885bd6 100644
--- a/app/components/UI/Label.js
+++ b/app/components/UI/Label.js
@@ -10,7 +10,6 @@ const SystemLabel = system(
     color: 'primaryText',
     fontSize: 'm',
     fontWeight: 'normal',
-    width: 1,
     mb: 1
   },
   ...Object.keys(styles)
diff --git a/app/components/UI/MainContent.js b/app/components/UI/MainContent.js
index d7ec0fa5..c8f92cf0 100644
--- a/app/components/UI/MainContent.js
+++ b/app/components/UI/MainContent.js
@@ -7,6 +7,19 @@ import { BackgroundPrimary } from 'components/UI'
  * @example
  * <MainContent>Some content</MainContent>
  */
-const MainContent = props => <BackgroundPrimary as="article" width={1} {...props} />
+const MainContent = ({ css, ...rest }) => (
+  <BackgroundPrimary
+    as="article"
+    width={1}
+    {...rest}
+    css={Object.assign(
+      {
+        position: 'relative',
+        'overflow-y': 'scroll'
+      },
+      css
+    )}
+  />
+)
 
 export default MainContent
diff --git a/app/components/UI/Message.js b/app/components/UI/Message.js
index ce4189d9..28204d35 100644
--- a/app/components/UI/Message.js
+++ b/app/components/UI/Message.js
@@ -25,19 +25,26 @@ class Message extends React.Component {
     children: PropTypes.node
   }
 
+  renderIcon = () => {
+    const { variant } = this.props
+    return (
+      <Box mr={1} width="14px" css={{ height: '14px' }}>
+        {variant === 'success' && <Success height="14px" width="14px" />}
+        {variant === 'warning' && <Warning height="14px" width="14px" />}
+        {variant === 'error' && <Error height="14px" width="14px" />}
+      </Box>
+    )
+  }
+
   render() {
     const { children, variant, ...rest } = this.props
     return (
-      <StyledMessage {...rest} variant={variant} alignItems="center">
-        <Box mr={1}>
-          {variant === 'success' && <Success />}
-          {variant === 'warning' && <Warning />}
-          {variant === 'error' && <Error />}
-        </Box>
-        <Text fontSize="s" fontWeight="normal">
+      <Text fontSize="s" fontWeight="normal" {...rest}>
+        <StyledMessage variant={variant} alignItems="center">
+          {this.renderIcon()}
           {children}
-        </Text>
-      </StyledMessage>
+        </StyledMessage>
+      </Text>
     )
   }
 }
diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js
index 770eed1c..40ae7fab 100644
--- a/app/components/UI/Modal.js
+++ b/app/components/UI/Modal.js
@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass'
 import X from 'components/Icon/X'
+import ZapLogo from 'components/Icon/ZapLogo'
+import { Panel, Text } from 'components/UI'
 
 /**
  * @render react
@@ -14,42 +16,50 @@ class Modal extends React.Component {
 
   static propTypes = {
     children: PropTypes.node,
-    onClose: PropTypes.func
+    onClose: PropTypes.func,
+    withClose: PropTypes.bool,
+    withHeader: PropTypes.bool
   }
 
-  state = {
-    hover: false
-  }
-
-  hoverOn = () => {
-    this.setState({ hover: true })
-  }
-
-  hoverOff = () => {
-    this.setState({ hover: false })
+  static defaultProps = {
+    withClose: true,
+    withHeader: false
   }
 
   render() {
-    const { hover } = this.state
-    const { children, onClose } = this.props
+    const { children, onClose, withClose, withHeader, ...rest } = this.props
     return (
-      <Flex flexDirection="column" width={1} p={3} bg="primaryColor" css={{ height: '100%' }}>
-        <Flex justifyContent="flex-end" as="header" color="primaryText">
-          <Box
-            css={{ cursor: 'pointer', opacity: hover ? 0.6 : 1 }}
-            ml="auto"
-            onClick={onClose}
-            onMouseEnter={this.hoverOn}
-            onMouseLeave={this.hoverOff}
-            p={2}
-          >
-            <X width="2em" height="2em" />
-          </Box>
-        </Flex>
-        <Box as="section" p={3} pt={1} css={{ flex: 1 }}>
+      <Panel width={1} bg="primaryColor" color="primaryText">
+        <Panel.Header p={3}>
+          <Flex justifyContent="space-between">
+            <Box
+              css={{ height: '40px', cursor: 'pointer', opacity: 0.6, '&:hover': { opacity: 1 } }}
+              ml="auto"
+              onClick={onClose}
+              p={2}
+            >
+              {withClose && <X width={20} height={20} />}
+            </Box>
+          </Flex>
+          {withHeader && (
+            <Flex justifyContent="space-between" px={3}>
+              <Box color="primaryText">
+                <ZapLogo width="70px" height="32px" />
+              </Box>
+              <Text
+                fontWeight="normal"
+                css={{ cursor: 'pointer', opacity: 0.6, '&:hover': { opacity: 1 } }}
+              >
+                Need Help?
+              </Text>
+            </Flex>
+          )}
+        </Panel.Header>
+        <Panel.Body px={4} pb={4} {...rest}>
+          {' '}
           {children}
-        </Box>
-      </Flex>
+        </Panel.Body>
+      </Panel>
     )
   }
 }
diff --git a/app/components/UI/Page.js b/app/components/UI/Page.js
index e686645a..9880f8ae 100644
--- a/app/components/UI/Page.js
+++ b/app/components/UI/Page.js
@@ -14,9 +14,9 @@ const Page = ({ css, ...rest }) => (
     css={Object.assign(
       {
         height: '100%',
+        overflow: 'hidden',
         'min-width': '950px',
         'min-height': '600px',
-        'overflow-y': 'hidden',
         'box-shadow': '0 20px 70px rgba(0, 0, 0, 0.55)'
       },
       css
diff --git a/app/components/UI/Panel.js b/app/components/UI/Panel.js
index fbe6c9be..ae292e98 100644
--- a/app/components/UI/Panel.js
+++ b/app/components/UI/Panel.js
@@ -9,8 +9,17 @@ const PanelHeader = ({ children, ...rest }) => (
 )
 PanelHeader.propTypes = { children: PropTypes.node }
 
-const PanelBody = ({ children, ...rest }) => (
-  <Box {...rest} as="section" css={{ flex: 1 }}>
+const PanelBody = ({ children, css, ...rest }) => (
+  <Box
+    {...rest}
+    as="section"
+    css={Object.assign(
+      {
+        flex: 1
+      },
+      css
+    )}
+  >
     {children}
   </Box>
 )
diff --git a/app/components/UI/PasswordInput.js b/app/components/UI/PasswordInput.js
new file mode 100644
index 00000000..35288730
--- /dev/null
+++ b/app/components/UI/PasswordInput.js
@@ -0,0 +1,48 @@
+/* eslint-disable react/no-multi-comp */
+
+import React from 'react'
+import { asField } from 'informed'
+import * as yup from 'yup'
+import Input from 'components/UI/Input'
+
+/**
+ * @render react
+ * @name PasswordInput
+ */
+class PasswordInput extends React.Component {
+  render() {
+    return <Input {...this.props} type="password" />
+  }
+}
+
+const PasswordInputAsField = asField(PasswordInput)
+
+class WrappedPasswordInputAsField extends React.Component {
+  validate = value => {
+    const { disabled, required } = this.props
+    if (disabled) {
+      return
+    }
+    try {
+      let validator = yup.string().min(8)
+      if (required) {
+        validator = validator.required()
+      }
+      validator.validateSync(value)
+    } catch (error) {
+      return error.message
+    }
+
+    // Run any additional validation provided by the caller.
+    const { validate } = this.props
+    if (validate) {
+      return validate(value)
+    }
+  }
+
+  render() {
+    return <PasswordInputAsField validate={this.validate} {...this.props} />
+  }
+}
+
+export default WrappedPasswordInputAsField
diff --git a/app/components/UI/Sidebar.js b/app/components/UI/Sidebar.js
index 0a6be03d..c498949e 100644
--- a/app/components/UI/Sidebar.js
+++ b/app/components/UI/Sidebar.js
@@ -7,7 +7,20 @@ import { BackgroundTertiary } from 'components/UI'
  * @example
  * <Sidebar>Some content</Sidebar>
  */
-const Sidebar = props => <BackgroundTertiary as="aside" width={4 / 12} {...props} />
+const Sidebar = ({ css, ...rest }) => (
+  <BackgroundTertiary
+    as="aside"
+    width={4 / 12}
+    {...rest}
+    css={Object.assign(
+      {
+        position: 'relative',
+        'overflow-y': 'scroll'
+      },
+      css
+    )}
+  />
+)
 
 Sidebar.small = props => <Sidebar {...props} width={3 / 12} />
 Sidebar.medium = props => <Sidebar {...props} width={4 / 12} />
diff --git a/app/components/UI/Span.js b/app/components/UI/Span.js
new file mode 100644
index 00000000..8b02ffaa
--- /dev/null
+++ b/app/components/UI/Span.js
@@ -0,0 +1,13 @@
+import system from '@rebass/components'
+
+const Span = system(
+  {
+    as: 'span'
+  },
+  'space',
+  'color',
+  'fontSize',
+  'fontWeight'
+)
+
+export default Span
diff --git a/app/components/UI/TextArea.js b/app/components/UI/TextArea.js
index 88319eba..0ed050ef 100644
--- a/app/components/UI/TextArea.js
+++ b/app/components/UI/TextArea.js
@@ -4,7 +4,7 @@ import system from '@rebass/components'
 import { styles } from 'styled-system'
 import { withTheme } from 'styled-components'
 import { Flex } from 'rebass'
-import { Message } from 'components/UI'
+import { Message, Label, Span, Text } from 'components/UI'
 
 // Create an html textarea element that accepts all style props from styled-system.
 const SystemTextArea = system(
@@ -34,6 +34,12 @@ const SystemTextArea = system(
 class TextArea extends React.PureComponent {
   static displayName = 'TextArea'
 
+  static defaultProps = {
+    description: null,
+    label: null,
+    showMessage: true
+  }
+
   state = {
     hasFocus: false
   }
@@ -47,14 +53,19 @@ class TextArea extends React.PureComponent {
   render() {
     const {
       css,
+      description,
       onChange,
       onBlur,
       onFocus,
       forwardedRef,
+      label,
+      required,
       theme,
+      field,
       fieldApi,
       fieldState,
       justifyContent,
+      showMessage,
       ...rest
     } = this.props
     const { readOnly } = this.props
@@ -67,14 +78,34 @@ class TextArea extends React.PureComponent {
     let borderColor
     if (readOnly) {
       borderColor = theme.colors.gray
-    } else if (fieldState.error) {
+    } else if (fieldState.error || fieldState.asyncError) {
       borderColor = theme.colors.superRed
-    } else if (value && !fieldState.error) {
+    } else if (value && (!fieldState.error && !fieldState.asyncError)) {
       borderColor = theme.colors.superGreen
     }
 
+    // Extract any styled-system space props so that we can apply them directly to the wrapper.
+    const spaceProps = {}
+    Object.keys(rest).forEach(key => {
+      if ([...Object.keys(styles.space.propTypes), 'width'].includes(key)) {
+        spaceProps[key] = rest[key]
+        delete rest[key]
+      }
+    })
+
     return (
-      <Flex flexDirection="column" justifyContent={justifyContent}>
+      <Flex flexDirection="column" justifyContent={justifyContent} {...spaceProps}>
+        {label && (
+          <Label htmlFor={field} mb={2}>
+            {label}
+            {required && (
+              <Span fontSize="s" css={{ 'vertical-align': 'super' }}>
+                {' '}
+                *
+              </Span>
+            )}
+          </Label>
+        )}
         <SystemTextArea
           borderColor={borderColor || theme.colors.gray}
           opacity={readOnly ? 0.6 : null}
@@ -90,6 +121,7 @@ class TextArea extends React.PureComponent {
             css
           )}
           {...rest}
+          field={field}
           ref={this.inputRef}
           value={!value && value !== 0 ? '' : value}
           onChange={e => {
@@ -119,13 +151,27 @@ class TextArea extends React.PureComponent {
               onFocus(e)
             }
           }}
+          required={required}
           error={fieldState.error}
         />
-        {fieldState.error && (
-          <Message variant={hasFocus ? 'warning' : 'error'} justifyContent={justifyContent} mt={2}>
-            {fieldState.error}
-          </Message>
-        )}
+        <Flex>
+          {description && (
+            <Text color="gray" fontSize="s" mt={1} mr="auto">
+              {description}
+            </Text>
+          )}
+          {showMessage &&
+            (fieldState.error || fieldState.asyncError) && (
+              <Message
+                variant={hasFocus ? 'warning' : 'error'}
+                justifyContent={justifyContent}
+                mt={1}
+                ml="auto"
+              >
+                {fieldState.error || fieldState.asyncError}
+              </Message>
+            )}
+        </Flex>
       </Flex>
     )
   }
diff --git a/app/components/UI/Truncate.js b/app/components/UI/Truncate.js
index 645d8615..d01ef267 100644
--- a/app/components/UI/Truncate.js
+++ b/app/components/UI/Truncate.js
@@ -1,20 +1,22 @@
 import PropTypes from 'prop-types'
 
 const Truncate = ({ text, maxlen = 12 }) => {
-  if (!text) {
+  if (text === null || typeof text === 'undefined' || text === '') {
     return null
   }
 
+  const textString = text.toString()
+
   const truncatedText =
-    text.length < maxlen
-      ? text
-      : text.substr(0, maxlen / 2) + '...' + text.substr(text.length - maxlen / 2)
+    textString.length < maxlen
+      ? textString
+      : textString.substr(0, maxlen / 2) + '...' + textString.substr(textString.length - maxlen / 2)
 
   return truncatedText
 }
 
 Truncate.propTypes = {
-  text: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxlen: PropTypes.number
 }
 
diff --git a/app/components/UI/index.js b/app/components/UI/index.js
index 8b2960d7..f626e5a8 100644
--- a/app/components/UI/index.js
+++ b/app/components/UI/index.js
@@ -25,12 +25,14 @@ export Modal from './Modal'
 export Notification from './Notification'
 export Panel, { PanelHeader, PanelBody, PanelFooter } from './Panel'
 export Page from './Page'
+export PasswordInput from './PasswordInput'
 export QRCode from './QRCode'
 export Radio from './Radio'
 export RadioGroup from './RadioGroup'
 export Range from './Range'
 export Select from './Select'
 export Sidebar from './Sidebar'
+export Span from './Span'
 export Spinner from './Spinner'
 export Text from './Text'
 export TextArea from './TextArea'
diff --git a/stories/forms/form.stories.js b/stories/forms/form.stories.js
index 89388543..3b4848d9 100644
--- a/stories/forms/form.stories.js
+++ b/stories/forms/form.stories.js
@@ -2,12 +2,12 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { Box } from 'rebass'
-import { Form } from 'informed'
 import {
   CryptoAmountInput,
   FiatAmountInput,
   Page,
   MainContent,
+  Form,
   Input,
   Label,
   LightningInvoiceInput,
@@ -35,9 +35,22 @@ const selectItems = [
 
 storiesOf('Forms', module)
   .add('Input', () => (
-    <Form>
-      <Input field="fieldName" id="field-name" />
-    </Form>
+    <>
+      <Form mb={4}>
+        <Input field="fieldName" id="field-name" />
+      </Form>
+      <Form mb={4}>
+        <Input field="fieldName" id="field-name" label="Field with Label" />
+      </Form>
+      <Form mb={4}>
+        <Input
+          field="fieldName"
+          id="field-name"
+          label="Field with Label and description"
+          description="This field also has a description."
+        />
+      </Form>
+    </>
   ))
   .add('Label', () => (
     <Form>
@@ -52,64 +65,48 @@ storiesOf('Forms', module)
   .add('CryptoAmountInput', () => (
     <Form>
       <Box my={4}>
-        <Box>
-          <Label htmlFor="cryptoBtc">BTC</Label>
-        </Box>
-        <CryptoAmountInput field="cryptoBtc" currency="btc" width={150} />
+        <CryptoAmountInput field="cryptoBtc" currency="btc" width={150} label="BTC" />
       </Box>
 
       <Box my={4}>
-        <Box>
-          <Label htmlFor="cryptoBits">Bits</Label>
-        </Box>
-        <CryptoAmountInput field="cryptoBits" currency="bits" width={150} />
+        <CryptoAmountInput field="cryptoBits" currency="bits" width={150} label="Bits" />
       </Box>
 
       <Box my={4}>
-        <Box>
-          <Label htmlFor="cryptoSats">Sats</Label>
-        </Box>
-        <CryptoAmountInput field="cryptoSats" currency="sats" width={150} />
+        <CryptoAmountInput field="cryptoSats" currency="sats" width={150} label="Sats" />
       </Box>
     </Form>
   ))
   .add('FiatAmountInput', () => (
     <Form>
       <Box my={4}>
-        <Box>
-          <Label htmlFor="fiat">USD</Label>
-        </Box>
-        <FiatAmountInput field="fiat" currency="usd" width={150} />
+        <FiatAmountInput field="fiat" currency="usd" width={150} label="USD" />
       </Box>
     </Form>
   ))
   .add('Lightning Invoice Textarea', () => (
     <React.Fragment>
       <Box my={4}>
-        <Box>
-          <Label htmlFor="testnet">Bitcoin or Lightning address (testnet)</Label>
-        </Box>
         <Form id="testnet">
           <LightningInvoiceInput
             chain="bitcoin"
             network="testnet"
             field="testnet"
             id="testnet"
+            label="Bitcoin or Lightning address (testnet)"
             validateOnBlur
             validateOnChange
           />
         </Form>
       </Box>
       <Box>
-        <Box>
-          <Label htmlFor="mainnet">Bitcoin or Lightning address (mainnet)</Label>
-        </Box>
         <Form id="testnet">
           <LightningInvoiceInput
             chain="bitcoin"
             network="mainnet"
             field="mainnet"
             id="mainnet"
+            label="Bitcoin or Lightning address (mainnet)"
             validateOnBlur
             validateOnChange
           />
@@ -148,56 +145,44 @@ storiesOf('Forms', module)
           {({ formState }) => (
             <React.Fragment>
               <Box my={4}>
-                <Box>
-                  <Label htmlFor="input1">Example Field</Label>
-                </Box>
-                <Box>
-                  <Input
-                    field="input1"
-                    id="field-name"
-                    placeholder="Type here"
-                    validate={validate}
-                    validateOnBlur
-                  />
-                </Box>
+                <Input
+                  field="input1"
+                  id="field-name"
+                  label="Example Field"
+                  placeholder="Type here"
+                  validate={validate}
+                  validateOnBlur
+                />
               </Box>
 
               <Box my={4}>
-                <Box>
-                  <Label htmlFor="textarea1">Example Textarea</Label>
-                </Box>
-                <Box>
-                  <TextArea
-                    field="textarea1"
-                    placeholder="Type here"
-                    validate={validate}
-                    validateOnBlur
-                  />
-                </Box>
+                <TextArea
+                  field="textarea1"
+                  placeholder="Type here"
+                  label="Example TextArea"
+                  validate={validate}
+                  validateOnBlur
+                />
               </Box>
 
               <Box my={4}>
-                <Box>
-                  <Label htmlFor="testnet">Bitcoin or Lightning address (testnet)</Label>
-                </Box>
                 <LightningInvoiceInput
                   chain="bitcoin"
                   network="testnet"
                   field="testnet"
                   id="testnet"
+                  label="Bitcoin or Lightning address (testnet)"
                   validateOnBlur
                   validateOnChange
                 />
               </Box>
               <Box>
-                <Box>
-                  <Label htmlFor="mainnet">Bitcoin or Lightning address (mainnet)</Label>
-                </Box>
                 <LightningInvoiceInput
                   chain="bitcoin"
                   network="mainnet"
                   field="mainnet"
                   id="mainnet"
+                  label="Bitcoin or Lightning address (mainnet)"
                   validateOnBlur
                   validateOnChange
                 />
@@ -205,7 +190,9 @@ storiesOf('Forms', module)
 
               <Box my={4}>
                 <Box>
-                  <Label htmlFor="selectfield1">Example Select</Label>
+                  <Label htmlFor="selectfield1" mb={2}>
+                    Example Select
+                  </Label>
                 </Box>
                 <Box>
                   <Select
@@ -228,16 +215,20 @@ storiesOf('Forms', module)
 
               <Box my={4}>
                 <Box>
-                  <Label htmlFor="checkbox1">Example Toggle</Label>
+                  <Label htmlFor="checkbox1" mb={2}>
+                    Example Toggle
+                  </Label>
                 </Box>
                 <Box>
-                  <Toggle field="checkbox1" onChange={action('change')} />
+                  <Toggle field="checkbox1" onChange={action('change')} label="Example Toggle" />
                 </Box>
               </Box>
 
               <Box my={4}>
                 <Box>
-                  <Label htmlFor="slider1">Example Range</Label>
+                  <Label htmlFor="slider1" mb={2}>
+                    Example Range
+                  </Label>
                 </Box>
                 <Box>
                   <Range field="slider1" initialValue={25} onChange={action('change')} />
diff --git a/test/unit/components/Pay/__snapshots__/PayHeader.spec.js.snap b/test/unit/components/Pay/__snapshots__/PayHeader.spec.js.snap
index 9bcd9f1a..ff6fb28e 100644
--- a/test/unit/components/Pay/__snapshots__/PayHeader.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PayHeader.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`component.Pay.PayHeader generic should render correctly 1`] = `
 <Header
+  align="center"
   logo={
     <SvgPaperPlane
       height="38px"
@@ -19,6 +20,7 @@ exports[`component.Pay.PayHeader generic should render correctly 1`] = `
 
 exports[`component.Pay.PayHeader offchain should render correctly 1`] = `
 <Header
+  align="center"
   logo={
     <SvgLightning
       height="45px"
@@ -38,6 +40,7 @@ exports[`component.Pay.PayHeader offchain should render correctly 1`] = `
 
 exports[`component.Pay.PayHeader onchain should render correctly 1`] = `
 <Header
+  align="center"
   logo={
     <SvgOnchain
       height="45px"
diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
index 0af1a460..6c985586 100644
--- a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
@@ -3,17 +3,18 @@
 exports[`component.Form.DataRow should render correctly 1`] = `
 <Styled(styled.div)
   alignItems="center"
+  justifyContent="space-between"
   py={3}
 >
   <Text
     fontWeight="normal"
-    width={0.5}
+    width={0.4}
   >
     left contnet
   </Text>
   <Text
     textAlign="right"
-    width={0.5}
+    width={0.6}
   >
     right content
   </Text>
diff --git a/test/unit/components/UI/__snapshots__/Header.spec.js.snap b/test/unit/components/UI/__snapshots__/Header.spec.js.snap
index d6dfa9bf..d6eca35e 100644
--- a/test/unit/components/UI/__snapshots__/Header.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Header.spec.js.snap
@@ -5,6 +5,7 @@ exports[`component.UI.Header should render correctly with default props 1`] = `
   alignItems="center"
   as="header"
   flexDirection="column"
+  justifyContent="center"
 />
 `;
 
@@ -13,23 +14,20 @@ exports[`component.UI.Header should render correctly with logo 1`] = `
   alignItems="center"
   as="header"
   flexDirection="column"
+  justifyContent="center"
 >
-  <Styled(styled.div)
-    alignItems="center"
-    justifyContent="center"
-  >
-    <Text
-      css={
-        Object {
-          "height": "50px",
-        }
+  <Text
+    css={
+      Object {
+        "height": "50px",
       }
-      fontSize="50px"
-      lineHeight="1em"
-    >
-      logo here
-    </Text>
-  </Styled(styled.div)>
+    }
+    fontSize="50px"
+    lineHeight="1em"
+    textAlign="center"
+  >
+    logo here
+  </Text>
 </Styled(styled.div)>
 `;
 
@@ -38,8 +36,11 @@ exports[`component.UI.Header should render correctly with subtitle 1`] = `
   alignItems="center"
   as="header"
   flexDirection="column"
+  justifyContent="center"
 >
-  <Heading4>
+  <Heading4
+    textAlign="center"
+  >
     subtitle here
   </Heading4>
 </Styled(styled.div)>
@@ -50,8 +51,12 @@ exports[`component.UI.Header should render correctly with title 1`] = `
   alignItems="center"
   as="header"
   flexDirection="column"
+  justifyContent="center"
 >
-  <Heading1>
+  <Heading1
+    mb={1}
+    textAlign="center"
+  >
     title here
   </Heading1>
 </Styled(styled.div)>
@@ -62,27 +67,29 @@ exports[`component.UI.Header should render correctly with title, subtitle, and l
   alignItems="center"
   as="header"
   flexDirection="column"
+  justifyContent="center"
 >
-  <Styled(styled.div)
-    alignItems="center"
-    justifyContent="center"
-  >
-    <Text
-      css={
-        Object {
-          "height": "50px",
-        }
+  <Text
+    css={
+      Object {
+        "height": "50px",
       }
-      fontSize="50px"
-      lineHeight="1em"
-    >
-      logo here
-    </Text>
-  </Styled(styled.div)>
-  <Heading1>
+    }
+    fontSize="50px"
+    lineHeight="1em"
+    textAlign="center"
+  >
+    logo here
+  </Text>
+  <Heading1
+    mb={1}
+    textAlign="center"
+  >
     title here
   </Heading1>
-  <Heading4>
+  <Heading4
+    textAlign="center"
+  >
     logo here
   </Heading4>
 </Styled(styled.div)>
diff --git a/test/unit/components/UI/__snapshots__/Heading.spec.js.snap b/test/unit/components/UI/__snapshots__/Heading.spec.js.snap
index 9d58c6ac..d73cae25 100644
--- a/test/unit/components/UI/__snapshots__/Heading.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Heading.spec.js.snap
@@ -6,7 +6,7 @@ exports[`component.UI.Heading should render correctly 1`] = `
   font-size: 32px;
   color: primaryText;
   font-weight: light;
-  line-height: 1.4;
+  line-height: 1.2;
 }
 
 <h2
diff --git a/test/unit/components/UI/__snapshots__/Input.spec.js.snap b/test/unit/components/UI/__snapshots__/Input.spec.js.snap
index 46b07a3b..9a77a4d5 100644
--- a/test/unit/components/UI/__snapshots__/Input.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Input.spec.js.snap
@@ -13,18 +13,15 @@ exports[`component.UI.Input should render correctly 1`] = `
 
 .c1 {
   padding: 16px;
-  width: 100%;
-  font-size: 13px;
-  color: #ffffff;
-  background-color: transparent;
   color: #ffffff;
   background-color: transparent;
-  font-family: Roboto,system-ui,sans-serif;
-  font-weight: 300;
-  border: 1px solid;
   border: 1px solid;
   border-color: #959595;
   border-radius: 5px;
+  font-family: Roboto,system-ui,sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  width: 100%;
   outline: none;
 }
 
diff --git a/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap b/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap
index 6de45d8d..9e38e21b 100644
--- a/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/LightningInvoiceInput.spec.js.snap
@@ -11,6 +11,13 @@ exports[`component.UI.LightningInvoiceInput should render correctly 1`] = `
   flex-direction: column;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c1 {
   padding: 16px;
   width: 100%;
@@ -56,6 +63,9 @@ exports[`component.UI.LightningInvoiceInput should render correctly 1`] = `
       value=""
       width={1}
     />
+    <div
+      className="c2"
+    />
   </div>
 </form>
 `;
diff --git a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap
index bbb868a8..ed741244 100644
--- a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap
@@ -5,6 +5,8 @@ exports[`component.UI.MainContent should render correctly 1`] = `
   width: 100%;
   color: primaryText;
   background-color: primaryColor;
+  position: relative;
+  overflow-y: scroll;
 }
 
 <article
diff --git a/test/unit/components/UI/__snapshots__/Message.spec.js.snap b/test/unit/components/UI/__snapshots__/Message.spec.js.snap
index 5e5a9465..6495138e 100644
--- a/test/unit/components/UI/__snapshots__/Message.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Message.spec.js.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component.UI.Message should render correctly with default props 1`] = `
-<Styled(Styled(styled.div))
-  alignItems="center"
+<Styled(styled.div)
+  fontSize="s"
+  fontWeight="normal"
 >
-  <styled.div
-    mr={1}
-  />
-  <Styled(styled.div)
-    fontSize="s"
-    fontWeight="normal"
+  <Styled(Styled(styled.div))
+    alignItems="center"
   >
+    <styled.div
+      css={
+        Object {
+          "height": "14px",
+        }
+      }
+      mr={1}
+      width="14px"
+    />
     A message
-  </Styled(styled.div)>
-</Styled(Styled(styled.div))>
+  </Styled(Styled(styled.div))>
+</Styled(styled.div)>
 `;
diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
index ee2eadd0..f9a886e2 100644
--- a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
@@ -1,24 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component.UI.Modal should render correctly 1`] = `
-.c2 {
+.c1 {
+  padding: 16px;
+}
+
+.c3 {
   margin-left: auto;
   padding: 8px;
+  height: 40px;
   cursor: pointer;
+  opacity: 0.6;
+}
+
+.c3:hover {
   opacity: 1;
 }
 
-.c3 {
-  padding: 16px;
-  padding-top: 4px;
+.c4 {
+  padding-bottom: 32px;
+  padding-left: 32px;
+  padding-right: 32px;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
 }
 
 .c0 {
-  padding: 16px;
   width: 100%;
+  color: primaryText;
   background-color: primaryColor;
   height: 100%;
   display: -webkit-box;
@@ -30,56 +40,59 @@ exports[`component.UI.Modal should render correctly 1`] = `
   flex-direction: column;
 }
 
-.c1 {
-  color: primaryText;
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-<div
+<article
   className="c0"
+  color="primaryText"
   width={1}
 >
   <header
     className="c1"
-    color="primaryText"
   >
     <div
       className="c2"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
     >
-      <svg
-        height="2em"
-        viewBox="0 0 22 20"
-        width="2em"
+      <div
+        className="c3"
       >
-        <defs>
-          <path
-            d="M10 10L0 20l10-10L0 0l10 10L20 0l-8.394 8.394L10 10l1.606 1.606L20 20 10 10z"
-            id="x_svg__a"
+        <svg
+          height={20}
+          viewBox="0 0 22 20"
+          width={20}
+        >
+          <defs>
+            <path
+              d="M10 10L0 20l10-10L0 0l10 10L20 0l-8.394 8.394L10 10l1.606 1.606L20 20 10 10z"
+              id="x_svg__a"
+            />
+          </defs>
+          <use
+            fill="none"
+            fillRule="evenodd"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            transform="translate(1)"
+            xlinkHref="#x_svg__a"
           />
-        </defs>
-        <use
-          fill="none"
-          fillRule="evenodd"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          transform="translate(1)"
-          xlinkHref="#x_svg__a"
-        />
-      </svg>
+        </svg>
+      </div>
     </div>
   </header>
   <section
-    className="c3"
-  />
-</div>
+    className="c4"
+  >
+     
+  </section>
+</article>
 `;
diff --git a/test/unit/components/UI/__snapshots__/Page.spec.js.snap b/test/unit/components/UI/__snapshots__/Page.spec.js.snap
index 3f26aa95..5fea134f 100644
--- a/test/unit/components/UI/__snapshots__/Page.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Page.spec.js.snap
@@ -4,9 +4,9 @@ exports[`component.UI.Page should render correctly 1`] = `
 .c0 {
   background-color: primaryColor;
   height: 100%;
+  overflow: hidden;
   min-width: 950px;
   min-height: 600px;
-  overflow-y: hidden;
   box-shadow: 0 20px 70px rgba(0,0,0,0.55);
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/test/unit/components/UI/__snapshots__/Radio.spec.js.snap b/test/unit/components/UI/__snapshots__/Radio.spec.js.snap
index 8943890e..f3d06e1f 100644
--- a/test/unit/components/UI/__snapshots__/Radio.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Radio.spec.js.snap
@@ -16,7 +16,6 @@ exports[`component.UI.Radio should render correctly 1`] = `
 
 .c1 {
   margin-bottom: 16px;
-  width: 100%;
   font-size: 13px;
   color: #ffffff;
   color: #ffffff;
@@ -94,7 +93,6 @@ exports[`component.UI.Radio should render correctly 1`] = `
       fontWeight="light"
       htmlFor="item1"
       opacity={null}
-      width={1}
     >
       <div
         className="c2"
@@ -134,7 +132,6 @@ exports[`component.UI.Radio should render correctly 1`] = `
       fontWeight="light"
       htmlFor="item2"
       opacity={null}
-      width={1}
     >
       <div
         className="c2"
@@ -174,7 +171,6 @@ exports[`component.UI.Radio should render correctly 1`] = `
       fontWeight="light"
       htmlFor="item3"
       opacity={null}
-      width={1}
     >
       <div
         className="c2"
diff --git a/test/unit/components/UI/__snapshots__/Select.spec.js.snap b/test/unit/components/UI/__snapshots__/Select.spec.js.snap
index 8b9cce19..6dcdb1e5 100644
--- a/test/unit/components/UI/__snapshots__/Select.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Select.spec.js.snap
@@ -13,18 +13,15 @@ exports[`component.UI.Toggle should render correctly 1`] = `
 
 .c2 {
   padding: 16px;
-  width: 100%;
-  font-size: 13px;
-  color: #ffffff;
-  background-color: transparent;
   color: #ffffff;
   background-color: transparent;
-  font-family: Roboto,system-ui,sans-serif;
-  font-weight: 300;
-  border: 1px solid;
   border: 1px solid;
   border-color: #959595;
   border-radius: 5px;
+  font-family: Roboto,system-ui,sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  width: 100%;
   outline: none;
 }
 
diff --git a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
index 0d16e81c..977da21c 100644
--- a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
@@ -5,6 +5,8 @@ exports[`component.UI.Sidebar should render correctly 1`] = `
   width: 33.33333333333333%;
   color: primaryText;
   background-color: tertiaryColor;
+  position: relative;
+  overflow-y: scroll;
 }
 
 <aside
diff --git a/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap b/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap
index 46b07a3b..9a77a4d5 100644
--- a/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap
@@ -13,18 +13,15 @@ exports[`component.UI.Input should render correctly 1`] = `
 
 .c1 {
   padding: 16px;
-  width: 100%;
-  font-size: 13px;
-  color: #ffffff;
-  background-color: transparent;
   color: #ffffff;
   background-color: transparent;
-  font-family: Roboto,system-ui,sans-serif;
-  font-weight: 300;
-  border: 1px solid;
   border: 1px solid;
   border-color: #959595;
   border-radius: 5px;
+  font-family: Roboto,system-ui,sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  width: 100%;
   outline: none;
 }