diff --git a/components/aside/index.cjsx b/components/aside/index.cjsx
index 31842157..d5695966 100644
--- a/components/aside/index.cjsx
+++ b/components/aside/index.cjsx
@@ -7,7 +7,7 @@ module.exports = React.createClass
     active      : React.PropTypes.bool
     className   : React.PropTypes.string
     hideable    : React.PropTypes.bool
-    type        : React.PropTypes.string.required
+    type        : React.PropTypes.string
 
   getDefaultProps: ->
     className   : ""
diff --git a/components/autocomplete/index.cjsx b/components/autocomplete/index.cjsx
index 1340fc6b..3fb346c3 100644
--- a/components/autocomplete/index.cjsx
+++ b/components/autocomplete/index.cjsx
@@ -7,7 +7,7 @@ module.exports = React.createClass
   propTypes:
     className   : React.PropTypes.string
     colors      : React.PropTypes.object
-    dataSource  : React.PropTypes.object
+    dataSource  : React.PropTypes.any
     disabled    : React.PropTypes.bool
     error       : React.PropTypes.string
     exact       : React.PropTypes.bool
@@ -16,7 +16,7 @@ module.exports = React.createClass
     onChange    : React.PropTypes.func
     required    : React.PropTypes.bool
     type        : React.PropTypes.string
-    value       : React.PropTypes.string
+    value       : React.PropTypes.any
 
   getDefaultProps: ->
     className   : ""
@@ -52,8 +52,17 @@ module.exports = React.createClass
     @setState focus: false if Object.keys(suggestions).length is 0
 
   onKeyPress: (event) ->
+    key_ascii = event.which
     query = @refs.input.getValue().trim()
-    if event.which is 13 and query isnt ""
+
+    if @state.focus
+      children = @refs.suggestions.getDOMNode().children
+      for child, index in children when child.classList.contains "active"
+        child.classList.remove "active"
+        query = child.getAttribute "id"
+        break
+
+    if key_ascii is 13 and query isnt ""
       for key, label of @state.suggestions when query.toLowerCase() is label.toLowerCase()
         suggestion = {"#{key}": label}
         break
@@ -62,6 +71,13 @@ module.exports = React.createClass
       else if suggestion
         @_addValue suggestion
 
+    else if @state.focus and key_ascii in [40, 38]
+      if key_ascii is 40
+        index = if index >= children.length - 1 then 0 else index + 1
+      else
+        index = if index is 0 then children.length - 1 else index - 1
+      children[index].classList.add "active"
+
   onBlur: (event) ->
     setTimeout (=> @setState focus: false, suggestions: {}), 300
 
@@ -69,6 +85,12 @@ module.exports = React.createClass
     key = event.target.getAttribute "id"
     @_addValue {"#{key}": @state.suggestions[key]}
 
+  onRefreshSelection: (event) ->
+    children = @refs.suggestions.getDOMNode().children
+    for child, index in children when child.classList.contains "active"
+      child.classList.remove "active"
+      break
+
   onDelete: (event) ->
     delete @state.values[event.target.getAttribute "id"]
     @setState focus: false, values: @state.values
@@ -76,21 +98,27 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
-    <div data-component-autocomplete={@props.type}
-         className={"focus" if @state.focus}>
+    className = "focus" if @state.focus
+    <div data-component-autocomplete={@props.type} className={className}>
+      { <label>{@props.label}</label> if @props.label }
       {
         if @props.multiple
           <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
             {
               for key, label of @state.values
-                <li id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
+                <li key={key} id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
             }
           </ul>
       }
-      <Input {...@props} value="" ref="input" onFocus={@onFocus}
-             onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
-      <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
-        {<li id={key}>{label}</li> for key, label of @state.suggestions}
+      <Input {...@props} ref="input" value="" label=""
+             onBlur={@onBlur}
+             onChange={@onChange}
+             onFocus={@onFocus}
+             onKeyDown={@onKeyPress}
+             />
+      <ul ref="suggestions" data-role="suggestions"
+        onClick={@onSelect} onMouseEnter={@onRefreshSelection}>
+        {<li key={key} id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>
     </div>
 
diff --git a/components/autocomplete/style.styl b/components/autocomplete/style.styl
index 087e6720..e6628385 100644
--- a/components/autocomplete/style.styl
+++ b/components/autocomplete/style.styl
@@ -2,9 +2,10 @@
 
 [data-component-autocomplete]
   position                                      : relative
-  // -- Children
+  > label
+    font-size                                   : FONT_SIZE_TINY
+    color                                       : PRIMARY
   > [data-role] > *
-    font-size                                   : FONT_SIZE_SMALL
     cursor                                      : pointer
   > [data-role="values"]
     > *
@@ -13,28 +14,33 @@
       padding                                   : (SPACE / 4) (SPACE / 2)
       font-size                                 : FONT_SIZE_SMALL
       color                                     : WHITE
-      background-color                          : THEME
+      background-color                          : PRIMARY
       border-radius                             : (SPACE / 8)
   > [data-role="suggestions"]
-    z-index                                     : 10
+    z-index                                     : 2
     position                                    : absolute
     width                                       : 100%
+    height                                      : 0
+    max-height                                  : 50vh
     overflow-x                                  : hidden
     overflow-y                                  : scroll
-    max-height                                  : 0
     margin-top                                  : -(SPACE)
     background-color                            : WHITE
-    visibility                                  : hidden
-    box-shadow                                  : ZDEPTH_SHADOW_1
-    transition                                    max-height ANIMATION_DURATION ANIMATION_EASE
+    opacity                                     : 0
+    transform                                     translateY(-(INPUT_HEIGHT / 2))
+    transition-property                           height, box-shadow, opacity, transform
+    transition-duration                           ANIMATION_DURATION
+    transition-timing-function                    ANIMATION_EASE
     > *
       padding                                   : (SPACE / 2)
-      &:hover
+      &:hover, &.active
         color                                   : WHITE
-        background-color                        : THEME
+        background-color                        : PRIMARY_LIGHT
 
   // -- Styles
   &.focus
     > [data-role="suggestions"]
-      max-height                                : 25vh
-      visibility                                : visible
+      height                      : auto
+      opacity                     : 1
+      transform                     translateY(0%)
+      box-shadow                    ZDEPTH_SHADOW_1
diff --git a/components/button/button.md b/components/button/button.md
index 25aa1fbc..86b55d23 100644
--- a/components/button/button.md
+++ b/components/button/button.md
@@ -5,12 +5,12 @@ var Button = require('react-toolbox/components/button');
 
 <Button caption="Login" />
 <Button caption="Primary" className="primary" icon="access_alarm" />
-<Button caption="Secondary" className="secondary" />
+<Button caption="Secondary" className="accent" />
 <Button caption="Disabled" disabled />
 
 <Button type="circle" icon="access_alarm" />
 <Button type="circle" icon="explore" className="primary" />
-<Button type="circle" icon="zoom_in" className="secondary" />
+<Button type="circle" icon="zoom_in" className="accent" />
 <Button type="circle" icon="input" disabled={true} />
 ```
 
diff --git a/components/button/style.styl b/components/button/style.styl
index 46fcc735..4892e1ff 100644
--- a/components/button/style.styl
+++ b/components/button/style.styl
@@ -21,41 +21,40 @@
       outline                   : 0
     &:not(.transparent)
       box-shadow                  ZDEPTH_SHADOW_1
-      &:not(.primary):not(.secondary)
-        color                   : COLOR
+      &:not(.primary):not(.accent)
+        color                   : TEXT
         background-color        : WHITE
       &:hover
         box-shadow                ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
-      &.primary, &.secondary
+      &.primary, &.accent
         color                   : WHITE
       &.primary
         background-color        : PRIMARY
-      &.secondary
-        background-color        : SECONDARY
+      &.accent
+        background-color        : ACCENT
 
     &.transparent
       background-color          : transparent
-      &:not(.primary):not(.secondary)
+      &:not(.primary):not(.accent)
         &:hover
-          background-color      : alpha(COLOR, 12.5%)
+          background-color      : alpha(TEXT, 12.5%)
       &.primary
         color                   : PRIMARY
         &:hover
           background-color      : alpha(PRIMARY, 12.5%)
-      &.secondary
-        color                   : SECONDARY
+      &.accent
+        color                   : ACCENT
         &:hover
-          background-color      : alpha(SECONDARY, 12.5%)
-
+          background-color      : alpha(ACCENT, 12.5%)
+    &:not(.primary):not(.accent) > [data-component-ripple]
+      background-color          : DIVIDER
   &[disabled]
+    color                       : darken(DIVIDER, 25%)
     &:not(.transparent)
-      color                     : darken(BACKGROUND, 35%)
-      background-color          : darken(BACKGROUND, 7.5%)
+      background-color          : DIVIDER
     &.transparent
-      color                     : darken(BACKGROUND, 25%)
       background-color          : transparent
 
-
   // -- Layout
   &:not(.transparent) ~ &:not(:last-child)
     margin-left                 : SPACE
@@ -72,6 +71,9 @@
   > .icon
     font-size                   : FONT_SIZE_BIG
     margin-right                : (SPACE / 2)
+  > abbr
+    font-weight                 : FONT_WEIGHT_BOLD
+
   &.anchor
     width                       : 100%
 
diff --git a/components/card/card.md b/components/card/card.md
new file mode 100644
index 00000000..8ceb18cb
--- /dev/null
+++ b/components/card/card.md
@@ -0,0 +1,28 @@
+# Card
+
+```
+var Card = require('react-toolbox/components/card');
+
+<Card title="Default Card" />
+<Card title="Default Card with text" text={text} />
+<Card title="Default Card with legend" legend={legend} />
+<Card title="Default Card with actions" actions={actions} />
+<Card title="Defaulr Card with text & image" text={text} image="http://" />
+<Card title="Default Card with text, color & onClick event" text={text}
+    color="#e91e63" onClick={@onClick} />
+<Card type="small" title="Small Card with text & onClick event"
+    text={text} color="#00bcd4" onClick={@onClick} />
+```
+
+## Properties
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **className**     | String        |                 | Sets the class-styles of the Component.|
+| **color**         | String        |                 | Sets HEX of the Component.|
+| **image**         | String        |                 | Sets a background image url.|
+| **text**          | String        |                 | Sets a complementary text.|
+| **legend**        | String        |                 | Sets a legend text.|
+| **onClick**       | Function      |                 | Callback function that is fired when the components's is clicked.|
+| **title**         | String        | "text"          | Sets the title of the component.|
+| **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
diff --git a/components/card/index.cjsx b/components/card/index.cjsx
new file mode 100644
index 00000000..ea0bb7dd
--- /dev/null
+++ b/components/card/index.cjsx
@@ -0,0 +1,62 @@
+require './style'
+Navigation  = require "../navigation"
+Ripple      = require "../ripple"
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    className   : React.PropTypes.string
+    color       : React.PropTypes.string
+    image       : React.PropTypes.string
+    text        : React.PropTypes.string
+    legend      : React.PropTypes.string
+    onClick     : React.PropTypes.func
+    title       : React.PropTypes.string
+    type        : React.PropTypes.string
+
+  getDefaultProps: ->
+    className   : ""
+    type        : "default"
+
+  getInitialState: ->
+    loading     : @props.loading
+    ripple      : undefined
+
+  # -- Lifecycle
+  componentWillReceiveProps: ->
+    @setState ripple: undefined
+
+  # -- Events
+  onClick: (event) ->
+    event.preventDefault() if @props.onClick?
+    client = event.target.getBoundingClientRect?()
+    @setState ripple:
+                left  : event.pageX - client?.left
+                top   : event.pageY - client?.top
+                width : (client?.width * 2.5)
+    @props.onClick? event, @
+
+  # -- Render
+  render: ->
+    className = @props.className
+    className += " touch" if @props.onClick?
+    className += " image" if @props.image?
+    className += " color" if @props.color?
+    style = {}
+    style.backgroundImage = "url(#{@props.image})" if @props.image?
+    style.backgroundColor = @props.color if @props.color
+
+    <div data-component-card={@props.type} className={className} onClick={@onClick}>
+      {
+        if @props.title or @props.image
+          <figure style={style}>
+            { <small>{@props.subtitle}</small> if @props.subtitle }
+            { <h2>{@props.title}</h2> if @props.title }
+          </figure>
+      }
+      { <p>{@props.text}</p> if @props.text }
+      { <small>{@props.legend}</small> if @props.legend }
+      { <Navigation actions={@props.actions} /> if @props.actions }
+      { <Ripple origin={@state.ripple} loading={@state.loading} /> }
+    </div>
diff --git a/components/card/style.styl b/components/card/style.styl
new file mode 100644
index 00000000..b23024e0
--- /dev/null
+++ b/components/card/style.styl
@@ -0,0 +1,62 @@
+@import "../constants.styl"
+
+SIZE                            = (5 * UNIT)
+OFFSET                          = (SPACE / 1.25)
+[data-component-card]
+  display-flex()
+  flex-direction                    column
+  position                        : relative
+  overflow                        : hidden
+  width                           : SIZE
+  box-shadow                      : ZDEPTH_SHADOW_1
+  background                      : WHITE
+
+  // -- Children
+  *:not([data-component-button])
+    pointer-events                : none
+  > *:not([data-component-ripple]):not([data-component-navigation])
+    padding                       : OFFSET
+  &:not(.color):not(.image) > [data-component-ripple]
+    background-color              : DIVIDER
+  &:not(.color) > *:not(figure), > *:not(:last-child)
+    box-shadow                    : 0 1px darken(BACKGROUND, 5%)
+  > figure
+    display-flex()
+    flex-direction                  column
+    justify-content                 flex-end
+    flex-grow                       2
+    min-height                    : (SIZE / 2)
+    background-size               : cover
+    > *
+      font-weight                 : FONT_WEIGHT_NORMAL
+
+  > [data-component-navigation]
+    padding                       : OFFSET = (OFFSET / 2)
+    > *
+      pointer-events              : all
+      padding-left                : OFFSET
+      padding-right               : OFFSET
+      box-shadow                  : none !important
+      &:hover
+        background-color          : rgba(0,0,0,0.1) !important
+
+  // -- ClassNames
+  &.touch
+    cursor                        : pointer
+    &:hover, &:active
+      box-shadow                  : ZDEPTH_SHADOW_2
+  &.image
+    > figure
+      text-shadow                 : ZDEPTH_SHADOW_1
+  &.image, &.color
+    > figure
+      color                       : WHITE
+
+// -- Extends
+[data-component-card="small"]
+  > figure
+    min-height                    : 0px
+[data-component-card="square"]
+  height                          : SIZE
+[data-component-card="wide"]
+  width                           : (SIZE * 2)
diff --git a/components/constants.styl b/components/constants.styl
index b658f468..7b938e9f 100644
--- a/components/constants.styl
+++ b/components/constants.styl
@@ -1,17 +1,20 @@
 @import './vendor.styl'
 
 // -- Colors
-COLOR                       = #222222
-BACKGROUND                  = #f5f5f5
-THEME                       = #cccccc
+PRIMARY                     = #E91E63
+PRIMARY_DARK                = darken(PRIMARY, 25%)
+PRIMARY_LIGHT               = lighten(PRIMARY, 25%)
+ACCENT                      = #03A9F4
+
+TEXT                        = #212121
+TEXT_ACCENT                 = #727272
+
+DIVIDER                     = lighten(#B6B6B6, 75%)
+BACKGROUND                  = #ffffff
 WHITE                       = #ffffff
-PRIMARY                     = #e91e63
-SECONDARY                   = #00bcd4
-SUCCESS                     = #259b24
-CANCEL                      = #e51c23
-WARNING                     = #ff9800
-FORM_COLOR                  = COLOR
-FORM_BORDER_COLOR           = lighten(FORM_COLOR, 75%)
+SUCCESS                     = #4CAF50
+CANCEL                      = #F44336
+WARNING                     = #FFC107
 
 // -- Fonts
 FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
index 47fbe557..e15361e2 100644
--- a/components/dropdown/index.cjsx
+++ b/components/dropdown/index.cjsx
@@ -13,9 +13,9 @@ module.exports = React.createClass
   propTypes:
     className   : React.PropTypes.string
     dataSource  : React.PropTypes.array
-    disabled    : React.PropTypes.disabled
+    disabled    : React.PropTypes.bool
     label       : React.PropTypes.string
-    onChange    : React.PropTypes.func
+    onChange    : React.PropTypes.funca
     template    : React.PropTypes.func
     type        : React.PropTypes.string
     value       : React.PropTypes.string
@@ -23,7 +23,6 @@ module.exports = React.createClass
   getDefaultProps: ->
     className   : ""
     dataSource  : []
-    disabled    : false
     type        : "normal"
 
   getInitialState: ->
@@ -69,8 +68,8 @@ module.exports = React.createClass
       { <label>{@props.label}</label> if @props.label }
       <ul ref="values" style={stylesheet} onClick={@onItem}>
       {
-        for item in @props.dataSource
-          <li id={item.value} className={"selected" if item.value is @state.selected.value}>
+        for item, index in @props.dataSource
+          <li id={item.value} key={index} className={"selected" if item.value is @state.selected.value}>
             { if @props.template then @props.template item else item.label }
             { <Ripple origin={@state.ripple}/> if item.value is @state.selected.value }
           </li>
diff --git a/components/dropdown/style.styl b/components/dropdown/style.styl
index eb98d8dc..565b5249 100644
--- a/components/dropdown/style.styl
+++ b/components/dropdown/style.styl
@@ -4,8 +4,8 @@
   position                        : relative
   margin-bottom                   : SPACE
   width                           : inherit
-  color                           : FORM_COLOR
-  border-bottom                   : 1px solid FORM_BORDER_COLOR
+  color                           : TEXT
+  border-bottom                   : 1px solid DIVIDER
 
   // -- Class
   &.active
@@ -28,7 +28,7 @@
       transition-delay              ANIMATION_DURATION
 
   &.disabled
-    color                         : FORM_BORDER_COLOR
+    color                         : TEXT_SECONDARY
     border-bottom-style           : dotted
     > div:after
       transform                     scale(0)
@@ -46,7 +46,7 @@
     position                      : relative
     bottom                        : -(SPACE / 4)
     font-size                     : FONT_SIZE_TINY
-    color                         : FORM_BORDER_COLOR
+    color                         : TEXT_SECONDARY
   > ul
     z-index                       : 2
     position                      : absolute
@@ -76,7 +76,7 @@
       > *
         pointer-events            : none
       > [data-component-ripple]
-        background-color          : lighten(FORM_BORDER_COLOR, 50%)
+        background-color          : DIVIDER
   > div
     display                       : block
     > span
@@ -95,6 +95,5 @@
       height                      : 0
       border-left                 : BORDER = SIZE solid transparent
       border-right                : BORDER
-      border-top                  : SIZE solid FORM_BORDER_COLOR
+      border-top                  : SIZE solid DIVIDER
       transition                    transform ANIMATION_DURATION ANIMATION_EASE
-
diff --git a/components/form/index.cjsx b/components/form/index.cjsx
index 8c1b8831..c944e0e9 100644
--- a/components/form/index.cjsx
+++ b/components/form/index.cjsx
@@ -59,15 +59,15 @@ module.exports = React.createClass
       {
         for attribute, index in @state.attributes
           if attribute.type is "submit"
-            <Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
+            <Button key={index} {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
           else if attribute.type is "autocomplete"
-            <Autocomplete {...attribute} onChange={@onChange}/>
+            <Autocomplete key={index} {...attribute} onChange={@onChange}/>
           else if attribute.type is "dropdown"
-            <Dropdown {...attribute} onChange={@onChange}/>
+            <Dropdown key={index} {...attribute} onChange={@onChange}/>
           else if attribute.type is "switch"
-            <Switch {...attribute} onChange={@onChange}/>
+            <Switch key={index} {...attribute} onChange={@onChange}/>
           else
-            <Input {...attribute} />
+            <Input key={index} {...attribute} />
       }
       { @props.children }
     </form>
diff --git a/components/input/index.cjsx b/components/input/index.cjsx
index 5267fca8..c4170b43 100644
--- a/components/input/index.cjsx
+++ b/components/input/index.cjsx
@@ -16,7 +16,7 @@ module.exports = React.createClass
     onBlur      : React.PropTypes.func
     required    : React.PropTypes.bool
     type        : React.PropTypes.string
-    value       : React.PropTypes.string
+    value       : React.PropTypes.any
 
   getDefaultProps: ->
     className   : ''
@@ -30,8 +30,14 @@ module.exports = React.createClass
     error       : @props.error
     touch       : @props.type in ['checkbox', 'radio']
     value       : @props.value
+    focus       : false
+    valid       : false
 
   # -- Events
+  onBlur: (event) ->
+    @setState focus: false
+    @props.onBlur? event, @
+
   onChange: (event) ->
     if @state.touch
       @setState checked: event.target.checked, error: undefined
@@ -39,29 +45,41 @@ module.exports = React.createClass
       @setState value: event.target.value, error: undefined
     @props.onChange? event, @
 
+  onFocus: (event) ->
+    @setState focus: true
+    @props.onFocus? event, @
+
+  onKeyPress: (event) ->
+    @setState focus: true
+    @props.onKeyPress? event, @
+
   # -- Render
   render: ->
     className = @props.className
-    className += ' disabled' if @props.disabled
-    className += ' error' if @state.error
-    className += ' touch' if @state.touch
-    className += ' radio' if @props.type is 'radio'
-    className += ' checked' if @state.checked
+    className += ' checked'   if @state.checked
+    className += ' disabled'  if @props.disabled
+    className += ' error'     if @state.error
+    className += ' focus'     if @state.focus
+    className += ' hidden'    if @props.type is 'hidden'
+    className += ' touch'     if @state.touch
+    className += ' radio'     if @props.type is 'radio'
+    className += ' valid'     if @state.value? and @state.value.length > 0
 
     <div data-component-input={@props.type} className={className}>
       {
         if @props.multiline
           <textarea ref='input' {...@props} value={@state.value}
+                    onBlur={@onBlur}
                     onChange={@onChange}
-                    onKeyPress={@props.onKeyPress}
-                    onFocus={@props.onFocus}
-                    onBlur={@props.onBlur}>{@state.value}</textarea>
+                    onFocus={@onFocus}
+                    onKeyPress={@onKeyPress} />
         else
-          <input ref='input' {...@props} value={@state.value} checked={@state.checked} 
+          <input ref='input' {...@props} value={@state.value}
+                 checked={@state.checked} 
+                 onBlur={@onBlur}
                  onChange={@onChange}
-                 onKeyPress={@props.onKeyPress}
-                 onFocus={@props.onFocus}
-                 onBlur={@props.onBlur}/>
+                 onFocus={@onFocus}
+                 onKeyPress={@onKeyPress} />
       }
       <span className='bar'></span>
       { <label>{@props.label}</label> if @props.label }
diff --git a/components/input/style.styl b/components/input/style.styl
index ff69bf97..4dfee047 100644
--- a/components/input/style.styl
+++ b/components/input/style.styl
@@ -28,7 +28,7 @@
       height                          : SPACE
       margin-right                    : (SPACE / 1.32)
       border-radius                   : RADIUS
-      box-shadow                      : inset 0 0 0 RADIUS FORM_COLOR
+      box-shadow                      : inset 0 0 0 RADIUS TEXT
       transition-property               background-color, box-shadow
       transition-duration               ANIMATION_DURATION
       transition-timing-function        ANIMATION_EASE
@@ -52,23 +52,23 @@
         transition                      transform ANIMATION_DURATION ANIMATION_DELAY ANIMATION_EASE
     label
       font-size                       : FONT_SIZE_SMALL
-      color                           : FORM_COLOR
+      color                           : TEXT
     // -- Style
     &:not(.radio) .bar:after
       content                         : "✓"
     &.radio .bar
       border-radius                   : 50%
     &.disabled .bar
-      box-shadow                        inset 0 0 0 RADIUS FORM_BORDER_COLOR
+      box-shadow                        inset 0 0 0 RADIUS DIVIDER
     &.checked
       &.radio .bar
-        box-shadow                      : inset 0 0 0 RADIUS SECONDARY, inset 0 0 0 (RADIUS * 2.5) WHITE
+        box-shadow                      : inset 0 0 0 RADIUS ACCENT, inset 0 0 0 (RADIUS * 2.5) WHITE
       &:not(.radio) .bar
         box-shadow                      : none
       .bar
-        background-color                : SECONDARY
+        background-color                : ACCENT
         &:before
-          background-color              : alpha(SECONDARY, .5)
+          background-color              : alpha(ACCENT, .5)
           animation-name                  ripple-touch
           animation-iteration-count       1
           animation-timing-function       ANIMATION_EASE
@@ -77,42 +77,59 @@
           transform                       scale(1)
 
   &:not(.touch)
+    // -- Stylesheets
+    &.focus
+      input, textarea
+        outline                       : none
+        ~ .bar:before, ~ .bar:after
+          width                       : 50%
+        &:invalid
+          &  ~ label
+            color                     : CANCEL
+          & ~ .bar:before, & ~ .bar:after
+            background-color          : CANCEL
+    &.focus , &.valid
+      input, textarea
+        & ~ label
+          top                         : -(SPACE / 2)
+          font-size                   : FONT_SIZE_TINY
+          color                       : PRIMARY
+    input[type="date"]
+      & ~ label
+          top                         : -(SPACE / 2)
+          font-size                   : FONT_SIZE_TINY
+          color                       : PRIMARY
+    &:not(.focus)
+      input, textarea
+          &:invalid:not(:required)
+            border-bottom-color       : CANCEL
+    &.error
+      input, textarea
+        border-bottom-color           : CANCEL
+
+    // -- Children
     input, textarea
       display                         : block
       padding                         : (SPACE / 2) 0
       width                           : 100%
-      color                           : FORM_COLOR
+      color                           : TEXT
       background-color                : transparent
       border                          : none
-      border-bottom                   : 1px solid FORM_BORDER_COLOR
+      border-bottom                   : 1px solid DIVIDER
       // -- Attributes
-      &:focus
-        outline                       : none
-        ~ .bar:before, ~ .bar:after
-          width                       : 50%
-      &:focus ~ label, &:valid ~ label
-        top                           : -(SPACE / 2)
-        font-size                     : FONT_SIZE_TINY
-        // color                         : THEME
       &:disabled
-        color                         : FORM_BORDER_COLOR
+        color                         : TEXT_SECONDARY
         border-bottom-style           : dotted
-      &:invalid
-        &:not(:required):not(:focus)
-          border-bottom-color         : CANCEL
-        &:focus  ~ label
-          color                       : CANCEL
-        ~ .bar:before, ~ .bar:after
-          background-color            : CANCEL
 
     label
       position                        : absolute
       left                            : 0
       top                             : (SPACE / 2)
-      color                           : FORM_BORDER_COLOR
+      color                           : TEXT_SECONDARY
       transition-property               top, font-size, color
       transition-duration               ANIMATION_DURATION
       transition-timing-function        ANIMATION_EASE
+
     .bar
       position                        : relative
       display                         : block
@@ -123,7 +140,7 @@
         height                        : 2px
         width                         : 0
         bottom                        : 0
-        background-color              : THEME
+        background-color              : PRIMARY
         transition-property             width, background-color
         transition-duration             ANIMATION_DURATION
         transition-timing-function      ANIMATION_EASE
@@ -132,11 +149,8 @@
       &:after
         right                         : 50%
 
-  &.error
-    input, textarea
-      border-bottom-color             : CANCEL
-
-
+  &.hidden
+    display                           : none
 
   // -- Children
   label
diff --git a/components/list/index.cjsx b/components/list/index.cjsx
index 4e9f15ae..70badf9b 100644
--- a/components/list/index.cjsx
+++ b/components/list/index.cjsx
@@ -5,7 +5,7 @@ module.exports = React.createClass
   # -- States & Properties
   propTypes:
     className   : React.PropTypes.string
-    dataSource  : React.PropTypes.Array
+    dataSource  : React.PropTypes.array
     ItemFactory : React.PropTypes.func
     onClick     : React.PropTypes.func
     type        : React.PropTypes.string
diff --git a/components/list/style.styl b/components/list/style.styl
index 2b1caff8..715d9ae7 100644
--- a/components/list/style.styl
+++ b/components/list/style.styl
@@ -3,7 +3,7 @@
 [data-component-list]
   list-style                      : none
   &, a
-    color                         : COLOR
+    color                         : TEXT
   > li
     overflow                      : hidden
     background-color              : WHITE
diff --git a/components/loading/style.styl b/components/loading/style.styl
index 1c5b542c..df54249c 100644
--- a/components/loading/style.styl
+++ b/components/loading/style.styl
@@ -28,7 +28,7 @@
         position                    : absolute
         width                       : SIZE
         height                      : SIZE
-        background-color            : THEME
+        background-color            : PRIMARY
         transform                     scale(0.0)
       &:nth-child(n+1)
         margin-top                  : -(SIZE)
diff --git a/components/modules/mixins/touch.coffee b/components/modules/mixins/touch.coffee
new file mode 100644
index 00000000..e69de29b
diff --git a/components/navigation/index.cjsx b/components/navigation/index.cjsx
index eaf348e7..ef610af0 100644
--- a/components/navigation/index.cjsx
+++ b/components/navigation/index.cjsx
@@ -20,7 +20,7 @@ module.exports = React.createClass
   # -- Render
   render: ->
     <nav data-component-navigation={@props.type}>
-      { <Link {...route} /> for route in @props.routes }
-      { <Button {...action} /> for action in @props.actions }
+      { <Link key={index} {...route} /> for route, index in @props.routes }
+      { <Button key={index} {...action} /> for action, index in @props.actions }
       { @props.children }
     </nav>
diff --git a/components/navigation/navigation.md b/components/navigation/navigation.md
index 534850d4..b90a6669 100644
--- a/components/navigation/navigation.md
+++ b/components/navigation/navigation.md
@@ -7,7 +7,7 @@ var routes = [
   {route:'http://google.com', caption='Go to Google.com'},
 ];
 var actions = [
- {caption:"Primary", style:"primary", icon="access_alarm"}
+ {caption: "Primary", style: "primary", icon: "access_alarm"}
 ];
 
 <Navigation routes={routes} actions={actions} />
diff --git a/components/progress_bar/style.styl b/components/progress_bar/style.styl
index 052094fd..bb2a1ee7 100644
--- a/components/progress_bar/style.styl
+++ b/components/progress_bar/style.styl
@@ -25,10 +25,10 @@ SCALE_RATIO                  = CIRCLE_RADIUS/20
   transition-timing-function : ANIMATION_EASE
 
 :local(.valueBar)
-  background-color           : SECONDARY
+  background-color           : ACCENT
 
 :local(.bufferBar)
-  background-color           : alpha(SECONDARY, 15%)
+  background-color           : alpha(ACCENT, 15%)
 
 :local(.linearBar).indeterminate :local(.valueBar)
   transform-origin           : center center
@@ -52,7 +52,7 @@ SCALE_RATIO                  = CIRCLE_RADIUS/20
   stroke-linecap             : round
   stroke-miterlimit          : 20
   stroke-width               : 4
-  stroke                     : SECONDARY
+  stroke                     : ACCENT
   fill                       : none
   transition                 : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
 
diff --git a/components/slider/style.styl b/components/slider/style.styl
index c5f95e22..5990b085 100644
--- a/components/slider/style.styl
+++ b/components/slider/style.styl
@@ -27,7 +27,7 @@ RANGE_SIDE_SEPARATION = 20px
   z-index                     : 5
 
 :local(.knobInner)
-  background-color            : SECONDARY
+  background-color            : ACCENT
   border-radius               : 50%
   height                      : 12px
   transition-duration         : 0.1s
@@ -84,7 +84,7 @@ RANGE_SIDE_SEPARATION = 20px
 
 // When its focused
 :local(.root):focus :local(.knob):before
-  background-color            : SECONDARY
+  background-color            : ACCENT
   border-radius               : 50%
   bottom                      : 0
   content                     : ""
@@ -106,7 +106,7 @@ RANGE_SIDE_SEPARATION = 20px
     content                   : ""
     position                  : absolute
     top                       : 0
-    background-color          : SECONDARY
+    background-color          : ACCENT
     left                      : 0
     width                     : 26px
     height                    : 26px
diff --git a/components/switch/style.styl b/components/switch/style.styl
index 2b7e64e6..0e080fee 100644
--- a/components/switch/style.styl
+++ b/components/switch/style.styl
@@ -5,7 +5,7 @@
   margin-bottom                       : SPACE
   height                              : SIZE = (SPACE / 1.25)
   width                               : WIDTH = (2.5 * SIZE)
-  background-color                    : FORM_BORDER_COLOR
+  background-color                    : DIVIDER
   border-radius                       : SPACE
   transition                            background-color ANIMATION_DURATION ANIMATION_EASE
 
@@ -27,7 +27,7 @@
     display                           : block
     margin-left                       : WIDTH + (SPACE / 2)
     font-size                         : FONT_SIZE_SMALL
-    color                             : FORM_COLOR
+    color                             : FORM_TEXT
   > [data-component-ripple]
     z-index                           : -1
     overflow                          : hidden
@@ -35,7 +35,7 @@
     max-height                        : (SIZE * 2.7)
     top                               : (SIZE / 2)
     left                              : (SIZE * 2)
-    background-color                  : alpha(COLOR, 10%)
+    background-color                  : alpha(TEXT, 10%)
     opacity                           : 0
     animation-duration                  (1.0 * ANIMATION_DURATION)
 
@@ -45,16 +45,16 @@
     > span
       box-shadow                      : ZDEPTH_SHADOW_1
   &.disabled
-    background-color                  : lighten(FORM_BORDER_COLOR, 50%)
+    background-color                  : lighten(DIVIDER, 50%)
     > span
-      background-color                : FORM_BORDER_COLOR
+      background-color                : DIVIDER
 
   &.checked
-    background-color                  : alpha(THEME, 25%)
+    background-color                  : alpha(PRIMARY, 25%)
     > span
-      background-color                : THEME
+      background-color                : PRIMARY
       right                           : 0
       box-shadow                      : ZDEPTH_SHADOW_2
     > [data-component-ripple]
       left                            : 0
-      background-color                : alpha(THEME, 15%)
+      background-color                : alpha(PRIMARY, 15%)
diff --git a/example/src/app.cjsx b/example/src/app.cjsx
index 8ad21ea7..45358c81 100644
--- a/example/src/app.cjsx
+++ b/example/src/app.cjsx
@@ -26,7 +26,7 @@ App = React.createClass
       <h1>Hello React-Toolbox</h1>
       <Form attributes={@state.fields} />
       <Button caption="Hello world!" type="square" style="primary"/>
-      <Button icon="adb" type="circle" style="secondary" />
+      <Button icon="adb" type="circle" style="accent" />
     </app>
 
 React.render <App/>, document.body
diff --git a/package.json b/package.json
index ec80b9da..1a2c1ebe 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
     "postcss-loader"              : "^0.4.3",
     "style-loader"                : "^0.12.3",
     "stylus-loader"               : "^1.2.0",
-    "webpack"                     : "^1.9.10"
+    "webpack"                     : "^1.9.10",
+    "webpack-dev-server"          : "*"
   },
   "repository"                    : "github:soyjavi/react-toolbox"
 }
diff --git a/spec/components/autocomplete.cjsx b/spec/components/autocomplete.cjsx
index 6bf9f4f9..091a373f 100644
--- a/spec/components/autocomplete.cjsx
+++ b/spec/components/autocomplete.cjsx
@@ -30,6 +30,7 @@ module.exports = React.createClass
       <p>lorem ipsum...</p>
 
       <Autocomplete ref="autocomplete_multiple"
+                    label="Choose a country"
                     placeholder="elements is up to you..."
                     dataSource={@state.countries}
                     value={countries_selected}/>
diff --git a/spec/components/button.cjsx b/spec/components/button.cjsx
index 1d2e1e89..05432919 100644
--- a/spec/components/button.cjsx
+++ b/spec/components/button.cjsx
@@ -18,12 +18,12 @@ module.exports = React.createClass
       <p>lorem ipsum...</p>
       <Button caption="Login" disabled=false />
       <Button caption="Primary" className="primary" icon="access_alarm" />
-      <Button caption="Secondary" className="secondary" />
+      <Button caption="Secondary" className="accent" />
       <Button caption="Disabled" disabled={true} />
 
       <Button type="circle" icon="access_alarm" />
       <Button type="circle" icon="explore" className="primary" />
-      <Button type="circle" icon="zoom_in" className="secondary" />
+      <Button type="circle" icon="zoom_in" className="accent" />
       <Button type="circle" icon="input" disabled={true} />
 
     </section>
diff --git a/spec/components/card.cjsx b/spec/components/card.cjsx
new file mode 100644
index 00000000..da5e5810
--- /dev/null
+++ b/spec/components/card.cjsx
@@ -0,0 +1,48 @@
+###
+@todo
+###
+
+Card           = require '../../components/card'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+
+  # -- Events
+  onClick: (event, card) ->
+    console.log "onClick", arguments
+
+  onActionClick: ->
+    console.log "onClick", arguments
+
+  # -- Render
+  render: ->
+    actions = [
+      caption: "Save", icon: "add", onClick: @onActionClick
+    ,
+      caption: "Close", onClick: @onActionClick
+    ]
+    text  = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+    legend = "Lorem Ipsum is simply dummy text"
+    <section>
+      <h2>Cards</h2>
+
+      <h3>Basic properties</h3>
+      <Card title="Default Card" />
+      <Card title="Default Card with text" text={text} />
+      <Card title="Default Card with legend" legend={legend} />
+      <Card title="Default Card with actions" actions={actions} />
+      <Card title="Defaulr Card with text & image" text={text}
+            image="http://cdn.tapquo.com/photos/soyjavi.jpg" />
+      <Card title="Default Card with text, color & onClick event" text={text}
+            color="#e91e63" onClick={@onClick} />
+
+      <h3>Sizes using type property</h3>
+      <Card type="small" title="Small Card with text & onClick event"
+            text={text} color="#00bcd4" onClick={@onClick} />
+      <Card type="square" title="Square Card with text & onClick event"
+            text={text} color="#00bcd4" onClick={@onClick} />
+      <Card type="wide" title="Wide card with text & onClick event"
+            text={text} color="#00bcd4" onClick={@onClick} />
+
+    </section>
diff --git a/spec/components/font_icon.cjsx b/spec/components/font_icon.cjsx
new file mode 100644
index 00000000..33334ebc
--- /dev/null
+++ b/spec/components/font_icon.cjsx
@@ -0,0 +1,24 @@
+###
+@todo
+###
+
+FontIcon = require '../../components/font_icon'
+
+module.exports = React.createClass
+
+  # -- Events
+  onEvent: (type, event, form) ->
+    console.log "[form.#{type}]", form.getValue()
+
+  # -- Render
+  render: ->
+    <section>
+      <h2>Font Icon</h2>
+      <p>lorem ipsum...</p>
+
+      <FontIcon value="add"/>
+      <FontIcon value="access_alarm"/>
+      <FontIcon value="explore"/>
+      <FontIcon value="zoom_in"/>
+      <FontIcon value="input"/>
+    </section>
diff --git a/spec/index.cjsx b/spec/index.cjsx
index c463f0f2..b4d99e54 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -4,35 +4,30 @@
 Aside         = require './components/aside'
 Autocomplete  = require './components/autocomplete'
 Button        = require './components/button'
+Card          = require './components/card'
 Dialog        = require './components/dialog'
 Dropdown      = require './components/dropdown'
+FontIcon      = require './components/font_icon'
 Form          = require './components/form'
 Progress      = require './components/progress'
 Slider        = require './components/slider'
 Switch        = require './components/switch'
 
-# React           = require('react/addons')
-# TestUtils       = React.addons.TestUtils
-# shallowRenderer = TestUtils.createRenderer()
-
-# shallowRenderer.render(React.createElement(MyComponent, { className: 'MyComponent' }, 'some child text'))
-#
-# component = shallowRenderer.getRenderOutput();
-
-
 Test = React.createClass
 
   # -- Render
   render: ->
     <app data-toolbox={true}>
-      <h1>React-Kit <small>New way for create</small></h1>
+      <h1>React-Toolbox <small>New way for create</small></h1>
 
+      <Card />
       <Switch />
       <Aside />
       <Autocomplete />
       <Button />
       <Dialog />
       <Dropdown />
+      <FontIcon />
       <Form />
       <Progress />
       <Slider />
diff --git a/spec/index.html b/spec/index.html
index cf966833..2d108904 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -15,7 +15,10 @@
     <meta http-equiv="cleartype" content="on">
     <link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
     <link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
-    <style> app > h1, app > section { margin: 2rem; } </style>
+    <style>
+      app > h1, app > section { margin: 2rem; }
+      app [data-component-card] { margin: 0 1rem 1rem 0;}
+    </style>
   </head>
   <body>
     <script src="../node_modules/react/dist/react-with-addons.js"></script>