diff --git a/Gemfile b/Gemfile
index fb86cab..47ebd95 100644
--- a/Gemfile
+++ b/Gemfile
@@ -12,6 +12,9 @@ group :assets do
 end
 
 gem 'jquery-rails'
+gem 'omniauth'
+gem 'omniauth-google'
+gem 'omniauth-google-oauth2'
 
 group :development do
   gem 'sqlite3'
@@ -19,5 +22,5 @@ end
 
 group :production do
   gem 'pg'
-  gem 'psych'
-end  
\ No newline at end of file
+  # gem 'psych'
+end
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
index e578e30..32ca89e 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,6 +1,6 @@
 GIT
   remote: git://github.com/maccman/spine-rails.git
-  revision: 0825b5ba0f44725cc026601a1c88808f19037627
+  revision: fc469c14379d57af842794d211044cce495fc9c0
   specs:
     spine-rails (0.0.9)
       rails (>= 3.1.0)
@@ -37,6 +37,7 @@ GEM
     activesupport (3.2.0.rc1)
       i18n (~> 0.6)
       multi_json (~> 1.0)
+    addressable (2.2.6)
     arel (3.0.0.rc1)
     builder (3.0.0)
     coffee-rails (3.2.0)
@@ -56,6 +57,11 @@ GEM
     eventmachine (0.12.10)
     execjs (1.2.13)
       multi_json (~> 1.0)
+    faraday (0.7.5)
+      addressable (~> 2.2.6)
+      multipart-post (~> 1.1.3)
+      rack (>= 1.1.0, < 2)
+    hashie (1.2.0)
     hike (1.2.1)
     i18n (0.6.0)
     journey (1.0.0.rc4)
@@ -69,10 +75,22 @@ GEM
       treetop (~> 1.4.8)
     mime-types (1.17.2)
     multi_json (1.0.4)
+    multipart-post (1.1.4)
+    oauth2 (0.5.1)
+      faraday (~> 0.7.4)
+      multi_json (~> 1.0.3)
+    omniauth (1.0.1)
+      hashie (~> 1.2)
+      rack
+    omniauth-google-oauth2 (0.1.8)
+      omniauth (~> 1.0)
+      omniauth-oauth2
+    omniauth-oauth2 (1.0.0)
+      oauth2 (~> 0.5.0)
+      omniauth (~> 1.0)
     pg (0.12.0)
       rake-compiler (~> 0.7)
     polyglot (0.3.3)
-    psych (1.2.2)
     rack (1.3.6)
     rack-cache (1.1)
       rack (>= 0.4)
@@ -130,8 +148,9 @@ DEPENDENCIES
   coffee-rails (~> 3.2.0)
   eco
   jquery-rails
+  omniauth
+  omniauth-google-oauth2
   pg
-  psych
   rails (= 3.2.0.rc1)
   spine-rails!
   sqlite3
diff --git a/app/assets/images/blacky.png b/app/assets/images/blacky.png
new file mode 100644
index 0000000..d125b4b
Binary files /dev/null and b/app/assets/images/blacky.png differ
diff --git a/app/assets/images/larrow.png b/app/assets/images/larrow.png
index ab800b3..2156abe 100644
Binary files a/app/assets/images/larrow.png and b/app/assets/images/larrow.png differ
diff --git a/app/assets/images/new.png b/app/assets/images/new.png
index 1c10d24..7918876 100755
Binary files a/app/assets/images/new.png and b/app/assets/images/new.png differ
diff --git a/app/assets/images/rarrow.png b/app/assets/images/rarrow.png
index 8c77f83..090790e 100644
Binary files a/app/assets/images/rarrow.png and b/app/assets/images/rarrow.png differ
diff --git a/app/assets/images/star.png b/app/assets/images/star.png
new file mode 100755
index 0000000..e4c2a34
Binary files /dev/null and b/app/assets/images/star.png differ
diff --git a/app/assets/images/starb.png b/app/assets/images/starb.png
new file mode 100755
index 0000000..86167bb
Binary files /dev/null and b/app/assets/images/starb.png differ
diff --git a/app/assets/images/stard.png b/app/assets/images/stard.png
new file mode 100755
index 0000000..d4198a4
Binary files /dev/null and b/app/assets/images/stard.png differ
diff --git a/app/assets/images/whitey.png b/app/assets/images/whitey.png
new file mode 100644
index 0000000..365c61a
Binary files /dev/null and b/app/assets/images/whitey.png differ
diff --git a/app/assets/javascripts/app/controllers/activity.js.coffee b/app/assets/javascripts/app/controllers/activity.js.coffee
new file mode 100644
index 0000000..b337733
--- /dev/null
+++ b/app/assets/javascripts/app/controllers/activity.js.coffee
@@ -0,0 +1,10 @@
+class App.Activity extends Spine.Controller
+  # elements:
+  #   '.items': items
+  # 
+  # events:
+  #   'click .item': 'itemClick'
+
+  constructor: ->
+    super
+    # ...
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/messages.js.coffee b/app/assets/javascripts/app/controllers/messages.js.coffee
new file mode 100644
index 0000000..4d53ae8
--- /dev/null
+++ b/app/assets/javascripts/app/controllers/messages.js.coffee
@@ -0,0 +1,13 @@
+$ = Spine.$
+  
+class App.Messages extends Spine.Controller
+  className: 'messages'
+  
+  constructor: ->
+    super
+    @render()
+    
+  render: ->
+    @append new App.Messages.Aside
+    @append $('<div />').addClass('vdivide')
+    @append new App.Messages.Article
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/messages/article.js.coffee b/app/assets/javascripts/app/controllers/messages/article.js.coffee
new file mode 100644
index 0000000..1a6ce4b
--- /dev/null
+++ b/app/assets/javascripts/app/controllers/messages/article.js.coffee
@@ -0,0 +1,50 @@
+records = [
+  {
+    subject: 'New Email idea',
+    body: 'This is the new email idea',
+    avatar_url: 'https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69'
+  },
+  
+  {
+    subject: 'New Email idea',
+    body: 'This is the new email idea',
+    avatar_url: 'https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69',
+    me: true
+  }
+]
+
+compose = {
+  avatar_url: 'https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69'
+}
+
+class Item extends Spine.Controller
+  className: 'item'
+
+  render: ->
+    @el.toggleClass('me', @record.me or false)
+    @html @view('messages/article/item')(@record)
+  
+class Compose extends Spine.Controller
+  className: 'item me compose'
+    
+  constructor: ->
+    super
+    @render()
+    
+  render: ->
+    @html @view('messages/article/compose')(compose)
+
+class App.Messages.Article extends Spine.Controller
+  elements:
+    '.items': 'items'
+  
+  constructor: ->
+    super
+    
+    @replace @view('messages/article')()
+    
+    @add(records)
+    
+  add: (records) ->
+    for record in records
+      @items.append(new Item(record: record).render())
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/messages/aside.js.coffee b/app/assets/javascripts/app/controllers/messages/aside.js.coffee
new file mode 100644
index 0000000..c6e75f4
--- /dev/null
+++ b/app/assets/javascripts/app/controllers/messages/aside.js.coffee
@@ -0,0 +1,26 @@
+records = [
+  {
+    subject: 'New Email idea',
+    body: 'This is the new email idea',
+    avatar_url: 'https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69'
+  }
+]
+
+class Item extends Spine.Controller
+  className: 'item active'
+  
+  render: ->
+    @html @view('messages/aside/item')(@record)
+
+class App.Messages.Aside extends Spine.Controller
+  elements:
+    '.items': 'items'
+    
+  constructor: ->
+    super
+    @replace @view('messages/aside')()
+    @add(records)
+    
+  add: (records) ->
+    for record in records
+      @items.append(new Item(record: record).render())
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/nav.js.coffee b/app/assets/javascripts/app/controllers/nav.js.coffee
new file mode 100644
index 0000000..08f2885
--- /dev/null
+++ b/app/assets/javascripts/app/controllers/nav.js.coffee
@@ -0,0 +1,7 @@
+class App.Nav extends Spine.Controller
+  constructor: ->
+    super
+    @render()
+    
+  render: ->
+    @replace @view('nav')()
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/starred.js.coffee b/app/assets/javascripts/app/controllers/starred.js.coffee
new file mode 100644
index 0000000..6615198
--- /dev/null
+++ b/app/assets/javascripts/app/controllers/starred.js.coffee
@@ -0,0 +1,10 @@
+class App.Starred extends Spine.Controller
+  # elements:
+  #   '.items': items
+  # 
+  # events:
+  #   'click .item': 'itemClick'
+
+  constructor: ->
+    super
+    # ...
\ No newline at end of file
diff --git a/app/assets/javascripts/app/index.js.coffee b/app/assets/javascripts/app/index.js.coffee
index 660b5f2..c41e7ec 100644
--- a/app/assets/javascripts/app/index.js.coffee
+++ b/app/assets/javascripts/app/index.js.coffee
@@ -4,6 +4,8 @@
 #= require spine/manager
 #= require spine/ajax
 #= require spine/route
+#= require gfx
+#= require gfx/effects
 
 #= require_tree ./lib
 #= require_self
@@ -15,10 +17,23 @@ class App extends Spine.Controller
   constructor: ->
     super
     
-    # Initialize controllers:
-    #  @append(@items = new App.Items)
-    #  ...
+    @append new App.Nav
+    @append new App.Stack
     
-    Spine.Route.setup()    
+    Spine.Route.setup()
+
+class App.Stack extends Spine.Stack
+  constructor: ->
+    super
+
+    @activity = new App.Activity(stack: @)
+    @messages = new App.Messages(stack: @)
+    @starred  = new App.Starred(stack: @)
+
+    @add(@activity)
+    @add(@messages)
+    @add(@starred)
+
+    @messages.active()
 
 window.App = App
\ No newline at end of file
diff --git a/app/assets/javascripts/app/models/conversation.js.coffee b/app/assets/javascripts/app/models/conversation.js.coffee
new file mode 100644
index 0000000..db03ecb
--- /dev/null
+++ b/app/assets/javascripts/app/models/conversation.js.coffee
@@ -0,0 +1,3 @@
+class App.Conversation extends Spine.Model
+  @configure 'Conversation', 'from'
+  @extend Spine.Model.Ajax
\ No newline at end of file
diff --git a/app/assets/javascripts/app/models/message.js.coffee b/app/assets/javascripts/app/models/message.js.coffee
new file mode 100644
index 0000000..5a555bf
--- /dev/null
+++ b/app/assets/javascripts/app/models/message.js.coffee
@@ -0,0 +1,3 @@
+class App.Message extends Spine.Model
+  @configure 'Message', 'subject', 'body'
+  @extend Spine.Model.Ajax
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/messages/article.jst.eco b/app/assets/javascripts/app/views/messages/article.jst.eco
new file mode 100644
index 0000000..b148e6f
--- /dev/null
+++ b/app/assets/javascripts/app/views/messages/article.jst.eco
@@ -0,0 +1,8 @@
+<article>
+  <header>
+    <span data-type="archive">Archive</span>
+    <span data-type="activity">Activity</span>
+  </header>
+  
+  <div class="items"></div>
+</article>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/messages/article/compose.jst.eco b/app/assets/javascripts/app/views/messages/article/compose.jst.eco
new file mode 100644
index 0000000..10b0937
--- /dev/null
+++ b/app/assets/javascripts/app/views/messages/article/compose.jst.eco
@@ -0,0 +1,5 @@
+<img src="<%= @avatar_url %>">
+
+<div class="body">
+  <textarea autofocus></textarea>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/messages/article/item.jst.eco b/app/assets/javascripts/app/views/messages/article/item.jst.eco
new file mode 100644
index 0000000..bd0f2fe
--- /dev/null
+++ b/app/assets/javascripts/app/views/messages/article/item.jst.eco
@@ -0,0 +1,3 @@
+<img src="<%= @avatar_url %>" />
+<div class="body"><%= @body %></div>
+<nav><a class="favourite"></a></nav>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/messages/aside.jst.eco b/app/assets/javascripts/app/views/messages/aside.jst.eco
new file mode 100644
index 0000000..6b3c5d9
--- /dev/null
+++ b/app/assets/javascripts/app/views/messages/aside.jst.eco
@@ -0,0 +1,12 @@
+<aside>
+  <header>
+    <h2>Hermes</h2>
+    <img src="/assets/new.png">
+  </header>
+  
+  <div class="search">
+    <input type="search" results="0" placeholder="Search..." incremental="true">
+  </div>
+  
+  <div class="items"></div>
+</aside>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/messages/aside/item.jst.eco b/app/assets/javascripts/app/views/messages/aside/item.jst.eco
new file mode 100644
index 0000000..02e5b23
--- /dev/null
+++ b/app/assets/javascripts/app/views/messages/aside/item.jst.eco
@@ -0,0 +1,6 @@
+<img src="<%= @avatar_url %>">
+
+<div>
+  <span class="subject"><%= @subject %></span>
+  <span class="body"><%= @body %></span>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/nav.jst.eco b/app/assets/javascripts/app/views/nav.jst.eco
new file mode 100644
index 0000000..921da84
--- /dev/null
+++ b/app/assets/javascripts/app/views/nav.jst.eco
@@ -0,0 +1,17 @@
+<nav class="nav">
+  <div class="avatar">
+    <img src="https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c">
+  </div>
+  
+  <div class="item">
+    <img src="/assets/messages.png">
+  </div>
+
+  <div class="item">
+    <img src="/assets/starred.png">
+  </div>
+  
+  <div class="item">
+    <img src="/assets/broadcast.png">
+  </div>
+</nav>
\ No newline at end of file
diff --git a/app/assets/stylesheets/app/messages.css.styl b/app/assets/stylesheets/app/messages.css.styl
new file mode 100644
index 0000000..b164a5b
--- /dev/null
+++ b/app/assets/stylesheets/app/messages.css.styl
@@ -0,0 +1,5 @@
+@import 'mixins'
+
+#app .messages
+  box-flex(1)
+  hbox()
diff --git a/app/assets/stylesheets/app/messages/article.css.styl b/app/assets/stylesheets/app/messages/article.css.styl
new file mode 100644
index 0000000..ea1aa8d
--- /dev/null
+++ b/app/assets/stylesheets/app/messages/article.css.styl
@@ -0,0 +1,123 @@
+@import 'mixins'
+
+#app .messages > article
+  box-flex(1)
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1)
+  background: #F4F4F4
+  
+  > header
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2)
+    vbg-gradient(lighten(#F4F4F4, 10%), darken(#F4F4F4, 5%))
+    box-shadow(1px, 1px, 2px, rgba(0, 0, 0, 0.1))
+    height: 35px
+    line-height: 35px
+    
+    font-weight: bold
+    text-shadow: 0 1px 1px white
+    font-size: 14px
+    
+    span
+      display: block
+      float: left
+      padding: 0 20px
+      cursor: pointer
+      border-right: 1px solid rgba(0, 0, 0, 0.15)
+      inset-box-shadow(1px, 0, 1px, rgba(255, 255, 255, 0.5))
+      color: lighten(#52585D, 20%)
+      
+      &:active
+        box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3)
+        border-right: 1px solid rgba(0, 0, 0, 0.2)
+        border-bottom: 1px solid rgba(0, 0, 0, 0.04)
+  
+  .items
+    padding: 25px 30px
+  
+  .item
+    position: relative
+    margin: 0 65px 15px
+    
+    img
+      position: absolute
+      top: 0
+      left: -70px
+      width: 48px
+      height: 48px
+      border-radius(5px)
+      box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.4))
+      
+    nav
+      position: absolute
+      right: 0
+      top: 0
+      padding: 5px
+      opacity: 0
+      transition(0.2s)
+      
+      .favourite
+        display: block
+        width: 15px
+        height: 15px
+        opacity: 0.7
+        background: url(/assets/star.png) center center no-repeat
+        background-size: 15px 15px
+        
+        &:active
+          background-image: url(/assets/stard.png)
+        
+    &:hover nav
+      opacity: 1
+    
+    .body
+      border-box()
+      padding: 12px
+      background: #FFF
+      box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.2))
+      border-radius(5px)
+      -webkit-user-select: text
+      outline: none
+      
+      &::before
+        content: ''
+        background: url(/assets/larrow.png) no-repeat center center
+        width: 12px
+        height: 22px
+        position: absolute
+        left: -12px
+        top: 10px
+        
+    &.compose
+      .body
+        background: lighten(#F4F4F4, 70%)
+        
+    textarea
+      height: 28px
+      border-box()
+      width: 100%
+      border: 0
+      resize: none
+      box-shadow: none
+      background: transparent
+      padding: 0
+      color: #000
+      text-rendering: optimizeLegibility
+      -webkit-font-smoothing: antialiased
+      font: 15px "helvetica neue", helvetica, arial, sans-serif        
+        
+  .item.me  
+    img
+      left: auto
+      right: -70px
+      
+    .body
+      &::before
+        display: none
+    
+      &::after
+        content: ''
+        background: url(/assets/rarrow.png) no-repeat center center
+        width: 12px
+        height: 22px
+        position: absolute
+        right: -12px
+        top: 10px
\ No newline at end of file
diff --git a/app/assets/stylesheets/app/messages/aside.css.styl b/app/assets/stylesheets/app/messages/aside.css.styl
new file mode 100644
index 0000000..d1d3efa
--- /dev/null
+++ b/app/assets/stylesheets/app/messages/aside.css.styl
@@ -0,0 +1,78 @@
+@import 'mixins'
+
+#app .messages > aside
+  display: block
+  background: #FFF
+  width: 250px
+  overflow: auto
+  
+  .item
+    border-bottom: 1px solid lighten(#D1D1D1, 20%)
+    padding: 14px
+    overflow: hidden
+    cursor: pointer
+    
+    img
+      width: 38px
+      height: 38px
+      border-radius(5px)
+      box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.3))
+      float: left
+      margin-right: 13px
+      
+    .subject
+      ellipsis()
+      margin: 1px 0 2px
+      
+    .body
+      ellipsis()
+      color: lighten(#52585D, 30%)
+    
+    span
+      display: block
+            
+    &.active
+      background: lighten(#F4F4F4, 20%)
+      -webkit-box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.1), inset -1px 0 2px rgba(0, 0, 0, 0.1)
+      text-shadow: 0 1px #FFF
+
+  header
+    inset-line(0.7)
+    vbg-gradient(lighten(#F4F4F4, 10%), darken(#F4F4F4, 5%))
+    border-bottom: 1px solid lighten(#CCCCCC, 10%)
+    height: 35px
+    line-height: 35px
+    padding: 0 10px
+    -webkit-border-radius: 3px 3px 0 0
+  
+    h2
+      margin: 0
+      font: 20px arial,lucida,helvetica,arial,sans-serif
+      font-weight: normal
+      text-shadow: 0 1px 0 #FFF
+      float: left
+      line-height: 36px
+      
+    img
+      width: 20px
+      height: 20px
+      float: right
+      margin: 8px 0
+      cursor: pointer
+      
+  .search
+    padding: 8px 8px
+    border-bottom: 1px solid lighten(#CCCCCC, 10%)
+    vbg-gradient(darken(#F4F4F4, 5%), darken(#F4F4F4, 10%))
+    inset-line()
+    display: none
+    
+    input[type=search]
+      box-layout()
+      width: 100%
+      outline: none
+      opacity: 0.6
+      transition()
+      
+      &:hover
+        opacity: 1
\ No newline at end of file
diff --git a/app/assets/stylesheets/app/nav.css.styl b/app/assets/stylesheets/app/nav.css.styl
new file mode 100644
index 0000000..24e1981
--- /dev/null
+++ b/app/assets/stylesheets/app/nav.css.styl
@@ -0,0 +1,28 @@
+@import 'mixins'
+
+#app > nav.nav
+  display: block
+  width: 60px
+  border-box()
+  padding: 10px
+  box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.3)
+  border-right: 1px solid rgba(0, 0, 0, 0.2)
+  background: rgba(255, 255, 255, 0.2)
+  text-align: center
+  
+  .avatar 
+    cursor: pointer
+  
+    img
+      width: 38px
+      height: 38px
+      border-radius(5px)
+      box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.3))
+    
+  .item 
+    margin: 12px 0
+    cursor: pointer
+    
+    img      
+      width: 25px
+      height: 25px
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.styl b/app/assets/stylesheets/application.css.styl
index b24cacb..ee93edf 100644
--- a/app/assets/stylesheets/application.css.styl
+++ b/app/assets/stylesheets/application.css.styl
@@ -1,15 +1,17 @@
 /*
  *= require theme
  *= require_self
+ *= require_tree ./app
 */
 
 @import 'mixins'
 
-.stack > *:not(.active)
-  display: none
+// .stack > *:not(.active)
+//   display: none
   
 body, html
   vbox()
+  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.08)), to(rgba(255, 255, 255, 0.08))), url(/assets/blacky.png) repeat
   
 #app
   margin: 10px
@@ -17,213 +19,14 @@ body, html
   box-flex(1)
   hbox()
   overflow: hidden
-  
-  nav.menu
-    display: block
-    width: 60px
-    border-box()
-    padding: 10px
-    box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.2)
-    border-right: 1px solid rgba(0, 0, 0, 0.2)
-    background: #5E5E5E
-    text-align: center
-    
-    .avatar 
-      cursor: pointer
-    
-      img
-        width: 38px
-        height: 38px
-        border-radius(5px)
-        box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.3))
-      
-    .item 
-      margin: 12px 0
-      cursor: pointer
-      
-      img      
-        width: 25px
-        height: 25px
-  
-  nav.list
-    display: block
-    background: #FFF
-    width: 250px
-    overflow: auto
-    
-    .item
-      border-bottom: 1px solid lighten(#D1D1D1, 20%)
-      padding: 14px
-      overflow: hidden
-      cursor: pointer
-      
-      img
-        width: 38px
-        height: 38px
-        border-radius(5px)
-        box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.3))
-        float: left
-        margin-right: 13px
-        
-      .subject
-        ellipsis()
-        margin: 1px 0 2px
-        
-      .body
-        ellipsis()
-        color: lighten(#52585D, 30%)
-      
-      span
-        display: block
-              
-      &.active
-        background: lighten(#F4F4F4, 20%)
-        -webkit-box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.1), inset -1px 0 2px rgba(0, 0, 0, 0.1)
-        text-shadow: 0 1px #FFF
-  
-    header
-      inset-line(0.7)
-      vbg-gradient(lighten(#F4F4F4, 10%), darken(#F4F4F4, 5%))
-      border-bottom: 1px solid lighten(#CCCCCC, 10%)
-      height: 35px
-      line-height: 35px
-      padding: 0 10px
-      -webkit-border-radius: 3px 3px 0 0
-    
-      h2
-        margin: 0
-        font: 20px arial,lucida,helvetica,arial,sans-serif
-        font-weight: normal
-        text-shadow: 0 1px 0 #FFF
-        float: left
-        line-height: 36px
-        
-      img
-        width: 20px
-        height: 20px
-        float: right
-        margin: 8px 0
-        cursor: pointer
       
   .vdivide
     hbg-gradient(lighten(#F4F4F4, 10%), darken(#F4F4F4, 5%))
-    // hbg-gradient(#F9F9F9, #DFE0E1)
     width: 6px;
     border: 1px solid rgba(0, 0, 0, 0.1)
     border-width: 0 1px 0 1px
     border-right-color: rgba(0, 0, 0, 0.2)
-    // box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.4))
     
-  article
+  > .stack
     box-flex(1)
-    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1)
-    background: #F4F4F4
-    
-    .items
-      padding: 25px 30px
-    
-    .item
-      position: relative
-      margin: 0 65px 15px
-      
-      img
-        position: absolute
-        top: 0
-        left: -70px
-        width: 48px
-        height: 48px
-        border-radius(5px)
-        box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.4))
-      
-      .body
-        border-box()
-        padding: 12px
-        background: #FFF
-        box-shadow(0px, 1px, 2px, rgba(0, 0, 0, 0.2))
-        border-radius(5px)
-        -webkit-user-select: text
-        outline: none
-        
-        &::before
-          content: ''
-          background: url(/assets/larrow.png) no-repeat center center
-          width: 12px
-          height: 22px
-          position: absolute
-          left: -12px
-          top: 10px
-          
-      &.compose
-        .body
-          background: lighten(#F4F4F4, 80%)
-          
-      textarea
-        height: 28px
-        border-box()
-        width: 100%
-        border: 0
-        resize: none
-        box-shadow: none
-        background: transparent
-        padding: 0
-        color: #000
-        text-rendering: optimizeLegibility
-        -webkit-font-smoothing: antialiased
-        font: 15px "helvetica neue", helvetica, arial, sans-serif        
-          
-    .item.me    
-      img
-        left: auto
-        right: -70px
-        
-      .body
-        &::before
-          display: none
-      
-        &::after
-          content: ''
-          background: url(/assets/rarrow.png) no-repeat center center
-          width: 12px
-          height: 22px
-          position: absolute
-          right: -12px
-          top: 10px
-        
-      
-    header
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2)
-      vbg-gradient(lighten(#F4F4F4, 10%), darken(#F4F4F4, 5%))
-      box-shadow(1px, 1px, 2px, rgba(0, 0, 0, 0.1))
-      height: 35px
-      line-height: 35px
-      
-      font-weight: bold
-      text-shadow: 0 1px 1px white
-      font-size: 14px
-    
-      span
-        display: block
-        float: left
-        padding: 0 20px
-        cursor: pointer
-        border-right: 1px solid rgba(0, 0, 0, 0.15)
-        inset-box-shadow(1px, 0, 1px, rgba(255, 255, 255, 0.5))
-        color: lighten(#52585D, 20%)
-        
-        &:active
-          box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3)
-          border-right: 1px solid rgba(0, 0, 0, 0.2)
-          border-bottom: 1px solid rgba(0, 0, 0, 0.04)
-
-  // background: #FFF
-  // border-radius(3px)
-  // 
-  // // background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.9, #FFF), to(lighten(#F4F4F4, 20%)))
-  // 
-  // overflow: hidden
-  //  
-  //     
-  // article.article
-  //   display: block
-  //   padding: 15px 15px 5px 15px
-  //   overflow: hidden
\ No newline at end of file
+    hbox()
\ No newline at end of file
diff --git a/app/assets/stylesheets/scaffold.css b/app/assets/stylesheets/scaffold.css
new file mode 100644
index 0000000..1ae7000
--- /dev/null
+++ b/app/assets/stylesheets/scaffold.css
@@ -0,0 +1,56 @@
+body { background-color: #fff; color: #333; }
+
+body, p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size:   13px;
+  line-height: 18px;
+}
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px;
+}
+
+a { color: #000; }
+a:visited { color: #666; }
+a:hover { color: #fff; background-color:#000; }
+
+div.field, div.actions {
+  margin-bottom: 10px;
+}
+
+#notice {
+  color: green;
+}
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+}
+
+#error_explanation h2 {
+  text-align: left;
+  font-weight: bold;
+  padding: 5px 5px 5px 15px;
+  font-size: 12px;
+  margin: -7px;
+  margin-bottom: 0px;
+  background-color: #c00;
+  color: #fff;
+}
+
+#error_explanation ul li {
+  font-size: 12px;
+  list-style: square;
+}
diff --git a/app/controllers/authorize_controller.rb b/app/controllers/authorize_controller.rb
new file mode 100644
index 0000000..55e9b39
--- /dev/null
+++ b/app/controllers/authorize_controller.rb
@@ -0,0 +1,16 @@
+class AuthorizeController < ApplicationController
+  def create
+    auth = request.env["omniauth.auth"]
+    # cookies.permanent.signed[:handle] = auth.info.nickname
+    redirect_to "/"
+  end
+  
+  def failure
+    raise "OAuth failure - #{params[:message]}"
+  end
+  
+  def destroy
+    reset_session
+    render :text => "Logged out"
+  end
+end
\ No newline at end of file
diff --git a/app/controllers/messages_controller.rb b/app/controllers/messages_controller.rb
new file mode 100644
index 0000000..f8d41fa
--- /dev/null
+++ b/app/controllers/messages_controller.rb
@@ -0,0 +1,48 @@
+class MessagesController < ApplicationController
+  # GET /messages.json
+  def index
+    @messages = Message.all
+    render json: @messages
+  end
+
+  # GET /messages/1.json
+  def show
+    @message = Message.find(params[:id])
+    render json: @message
+  end
+
+  # GET /messages/new.json
+  def new
+    @message = Message.new
+    render json: @message
+  end
+
+  # POST /messages.json
+  def create
+    @message = Message.new(params[:message])
+
+    if @message.save
+      render json: @message, status: :created, location: @message
+    else
+      render json: @message.errors, status: :unprocessable_entity
+    end
+  end
+
+  # PUT /messages/1.json
+  def update
+    @message = Message.find(params[:id])
+
+    if @message.update_attributes(params[:message])
+      head :no_content
+    else
+      render json: @message.errors, status: :unprocessable_entity
+    end
+  end
+
+  # DELETE /messages/1.json
+  def destroy
+    @message = Message.find(params[:id])
+    @message.destroy
+    head :no_content
+  end
+end
diff --git a/app/helpers/authorize_helper.rb b/app/helpers/authorize_helper.rb
new file mode 100644
index 0000000..05569d8
--- /dev/null
+++ b/app/helpers/authorize_helper.rb
@@ -0,0 +1,2 @@
+module AuthorizeHelper
+end
diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb
new file mode 100644
index 0000000..f1bca9f
--- /dev/null
+++ b/app/helpers/messages_helper.rb
@@ -0,0 +1,2 @@
+module MessagesHelper
+end
diff --git a/app/models/message.rb b/app/models/message.rb
new file mode 100644
index 0000000..590e3e3
--- /dev/null
+++ b/app/models/message.rb
@@ -0,0 +1,2 @@
+class Message < ActiveRecord::Base
+end
diff --git a/app/views/app/index.html.erb b/app/views/app/index.html.erb
index a959383..2a2b2bb 100644
--- a/app/views/app/index.html.erb
+++ b/app/views/app/index.html.erb
@@ -1,94 +1,4 @@
-<div id="app">
-  <nav class="menu">
-    <div class="avatar">
-      <%= image_tag "https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c" %>
-    </div>
-    
-    <div class="item">
-      <%= image_tag "messages.png" %>
-    </div>
-
-    <div class="item">
-      <%= image_tag "starred.png" %>
-    </div>
-    
-    <div class="item">
-      <%= image_tag "broadcast.png" %>
-    </div>
-  </nav>
-  
-  <nav class="list">
-    <header>
-      <h2><%= Rails.config.name %></h2>
-      <%= image_tag "new.png" %>
-    </header>
-    
-    <div class="item">
-      <%= image_tag "https://secure.gravatar.com/avatar/b8b1657e3d9725114383b2763d367a3a" %>
-      <div>
-        <span class="subject">280 North</span>
-        <span class="body">You should really check this stuff out.</span>
-      </div>
-    </div>
-    
-    <div class="item active">
-      <%= image_tag "https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69" %>
-      <div>
-        <span class="subject">New email idea</span>
-        <span class="body">This is the best idea in the whole world.</span>
-      </div>
-    </div>
-    
-    <div class="item">
-      <%= image_tag "https://secure.gravatar.com/avatar/af54a0871600db7fbdbb5c558a6e29a3" %>
-      <div>
-        <span class="subject">Speaking</span>
-        <span class="body">Can you do a talk on Spine this week?</span>
-      </div>
-    </div>
-    
-    <div class="item">
-      <%= image_tag "https://secure.gravatar.com/avatar/a2beb162438985ede0a49b240aa17ca1" %>
-      <div>
-        <span class="subject">Open Source</span>
-        <span class="body">Yes, let me know where to send the patch.</span>
-      </div>
-    </div>
-  </nav>
-  
-  <div class="vdivide"></div>
-  
-  <article>
-    <header>
-      <span>Archive</span>
-      <span>Convert...</span>
-    </header>
-    
-    <div class="items">
-      <div class="item">
-        <%= image_tag "https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69" %>
-        <div class="body">Is this your new email conversation idea?</div>
-      </div>
-      
-      <div class="item me">
-        <%= image_tag "https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c" %>
-        <div class="body">Yup, this is it. What do you think?</div>
-      </div>
-      
-      <div class="item">
-        <%= image_tag "https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69" %>
-        <div class="body">This is the best idea in the whole world.</div>
-      </div>
-      
-      <div class="item me compose">
-        <%= image_tag "https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c" %>
-        <div class="body">
-          <textarea autofocus></textarea>
-        </div>
-      </div>
-    </div>
-  </article>
-</div>
+<div id="app"></div>
 
 <script type="text/javascript" charset="utf-8">
   jQuery(function($){
diff --git a/app/views/app/static.html.erb b/app/views/app/static.html.erb
new file mode 100644
index 0000000..157d0de
--- /dev/null
+++ b/app/views/app/static.html.erb
@@ -0,0 +1,98 @@
+<div id="app">
+  <nav class="menu">
+    <div class="avatar">
+      <%= image_tag "https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c" %>
+    </div>
+    
+    <div class="item">
+      <%= image_tag "messages.png" %>
+    </div>
+
+    <div class="item">
+      <%= image_tag "starred.png" %>
+    </div>
+    
+    <div class="item">
+      <%= image_tag "broadcast.png" %>
+    </div>
+  </nav>
+  
+  <nav class="list">
+    <header>
+      <h2><%= Rails.config.name %></h2>
+      <%= image_tag "new.png" %>
+    </header>
+    
+    <div class="search">
+      <input type="search" results="0" placeholder="Search..." incremental="true">
+    </div>
+    
+    <div class="item">
+      <%= image_tag "https://secure.gravatar.com/avatar/b8b1657e3d9725114383b2763d367a3a" %>
+      <div>
+        <span class="subject">280 North</span>
+        <span class="body">You should really check this stuff out.</span>
+      </div>
+    </div>
+    
+    <div class="item active">
+      <%= image_tag "https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69" %>
+      <div>
+        <span class="subject">New email idea</span>
+        <span class="body">This is the best idea in the whole world.</span>
+      </div>
+    </div>
+    
+    <div class="item">
+      <%= image_tag "https://secure.gravatar.com/avatar/af54a0871600db7fbdbb5c558a6e29a3" %>
+      <div>
+        <span class="subject">Speaking</span>
+        <span class="body">Can you do a talk on Spine this week?</span>
+      </div>
+    </div>
+    
+    <div class="item">
+      <%= image_tag "https://secure.gravatar.com/avatar/a2beb162438985ede0a49b240aa17ca1" %>
+      <div>
+        <span class="subject">Open Source</span>
+        <span class="body">Yes, let me know where to send the patch.</span>
+      </div>
+    </div>
+  </nav>
+  
+  <div class="vdivide"></div>
+  
+  <article>
+    <header>
+      <span>Archive</span>
+      <span>Activity</span>
+    </header>
+    
+    <div class="items">
+      <div class="item">
+        <%= image_tag "https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69" %>
+        <div class="body">Is this your new email conversation idea?</div>
+        <nav><a class="favourite"></a></nav>
+      </div>
+      
+      <div class="item me">
+        <%= image_tag "https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c" %>
+        <div class="body">Yup, this is it. What do you think?</div>
+        <nav><a class="favourite"></a></nav>
+      </div>
+      
+      <div class="item">
+        <%= image_tag "https://secure.gravatar.com/avatar/11d44fdc7a81963600d079813ede2b69" %>
+        <div class="body">This is the best idea in the whole world.</div>
+        <nav><a class="favourite"></a></nav>
+      </div>
+      
+      <div class="item me compose">
+        <%= image_tag "https://secure.gravatar.com/avatar/baf018e2cc4616e4776d323215c7136c" %>
+        <div class="body">
+          <textarea autofocus></textarea>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
\ No newline at end of file
diff --git a/config/application.yml b/config/application.yml
index 2f32e0c..20619bc 100644
--- a/config/application.yml
+++ b/config/application.yml
@@ -2,6 +2,10 @@ defaults: &defaults
   users:
     dragon: slayer
   name: Hermes
+  
+  google:
+    token: 995984426783.apps.googleusercontent.com
+    secret: sRIHAkNpxVdZrTONFFtjM-o4
 
 development:
   <<: *defaults
diff --git a/config/initializers/omniauth.rb b/config/initializers/omniauth.rb
new file mode 100644
index 0000000..cf8a909
--- /dev/null
+++ b/config/initializers/omniauth.rb
@@ -0,0 +1,4 @@
+Rails.application.config.middleware.use OmniAuth::Builder do  
+  provider :google, Rails.config.google.token, Rails.config.google.secret
+  provider :google_oauth2, Rails.config.google.token, Rails.config.google.secret
+end
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index db59e84..81011fc 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,6 +1,13 @@
 Hermes::Application.routes.draw do
+  resources :messages
+
   root :to => 'app#index'
   
+  match '/auth/google_oauth2/callback' => 'authorize#create'
+  match '/auth/failure' => 'authorize#failure'
+  match '/logout' => 'authorize#destroy', :as => :logout
+  match '/authorize' => redirect('/auth/google_oauth2'), :as => :authorize
+  
   # The priority is based upon order of creation:
   # first created -> highest priority.
 
diff --git a/db/migrate/20120101190943_create_messages.rb b/db/migrate/20120101190943_create_messages.rb
new file mode 100644
index 0000000..06d3093
--- /dev/null
+++ b/db/migrate/20120101190943_create_messages.rb
@@ -0,0 +1,11 @@
+class CreateMessages < ActiveRecord::Migration
+  def change
+    create_table :messages do |t|
+      t.text :subject
+      t.text :body
+      t.string :avatar_url
+
+      t.timestamps
+    end
+  end
+end
diff --git a/doc/TODO.md b/doc/TODO.md
index 87bc37b..30eae8e 100644
--- a/doc/TODO.md
+++ b/doc/TODO.md
@@ -3,7 +3,6 @@ Email conversation style, with an integrated workflow.
 
 # Types
 
-* One bucket for incoming
-* One bucket for to-dos
-* One bucket for everything else
-* Activity feed for activity
\ No newline at end of file
+* Everything - archives after a day
+* Starred - todo list
+* Activity feed - broadcast emails
\ No newline at end of file
diff --git a/test/fixtures/messages.yml b/test/fixtures/messages.yml
new file mode 100644
index 0000000..a59010f
--- /dev/null
+++ b/test/fixtures/messages.yml
@@ -0,0 +1,11 @@
+# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
+
+one:
+  subject: MyText
+  body: MyText
+  avatar_url: MyString
+
+two:
+  subject: MyText
+  body: MyText
+  avatar_url: MyString
diff --git a/test/functional/authorize_controller_test.rb b/test/functional/authorize_controller_test.rb
new file mode 100644
index 0000000..0ff2506
--- /dev/null
+++ b/test/functional/authorize_controller_test.rb
@@ -0,0 +1,7 @@
+require 'test_helper'
+
+class AuthorizeControllerTest < ActionController::TestCase
+  # test "the truth" do
+  #   assert true
+  # end
+end
diff --git a/test/functional/messages_controller_test.rb b/test/functional/messages_controller_test.rb
new file mode 100644
index 0000000..ca1aa3e
--- /dev/null
+++ b/test/functional/messages_controller_test.rb
@@ -0,0 +1,49 @@
+require 'test_helper'
+
+class MessagesControllerTest < ActionController::TestCase
+  setup do
+    @message = messages(:one)
+  end
+
+  test "should get index" do
+    get :index
+    assert_response :success
+    assert_not_nil assigns(:messages)
+  end
+
+  test "should get new" do
+    get :new
+    assert_response :success
+  end
+
+  test "should create message" do
+    assert_difference('Message.count') do
+      post :create, message: @message.attributes
+    end
+
+    assert_redirected_to message_path(assigns(:message))
+  end
+
+  test "should show message" do
+    get :show, id: @message
+    assert_response :success
+  end
+
+  test "should get edit" do
+    get :edit, id: @message
+    assert_response :success
+  end
+
+  test "should update message" do
+    put :update, id: @message, message: @message.attributes
+    assert_redirected_to message_path(assigns(:message))
+  end
+
+  test "should destroy message" do
+    assert_difference('Message.count', -1) do
+      delete :destroy, id: @message
+    end
+
+    assert_redirected_to messages_path
+  end
+end
diff --git a/test/unit/helpers/authorize_helper_test.rb b/test/unit/helpers/authorize_helper_test.rb
new file mode 100644
index 0000000..9b19af3
--- /dev/null
+++ b/test/unit/helpers/authorize_helper_test.rb
@@ -0,0 +1,4 @@
+require 'test_helper'
+
+class AuthorizeHelperTest < ActionView::TestCase
+end
diff --git a/test/unit/helpers/messages_helper_test.rb b/test/unit/helpers/messages_helper_test.rb
new file mode 100644
index 0000000..caba605
--- /dev/null
+++ b/test/unit/helpers/messages_helper_test.rb
@@ -0,0 +1,4 @@
+require 'test_helper'
+
+class MessagesHelperTest < ActionView::TestCase
+end
diff --git a/test/unit/message_test.rb b/test/unit/message_test.rb
new file mode 100644
index 0000000..11e5db0
--- /dev/null
+++ b/test/unit/message_test.rb
@@ -0,0 +1,7 @@
+require 'test_helper'
+
+class MessageTest < ActiveSupport::TestCase
+  # test "the truth" do
+  #   assert true
+  # end
+end
diff --git a/vendor/assets/javascripts/gfx.js b/vendor/assets/javascripts/gfx.js
new file mode 100644
index 0000000..ec98ea7
--- /dev/null
+++ b/vendor/assets/javascripts/gfx.js
@@ -0,0 +1,82 @@
+(function() {
+  var $, defaults, n, prefix, transformTypes, vendor, vendorNames,
+    __indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+  $ = typeof jQuery !== "undefined" && jQuery !== null ? jQuery : require('jqueryify');
+
+  if (!$) throw 'jQuery required';
+
+  defaults = {
+    duration: 400,
+    queue: true,
+    easing: ''
+  };
+
+  vendor = $.browser.mozilla ? 'moz' : void 0;
+
+  vendor || (vendor = 'webkit');
+
+  prefix = "-" + vendor + "-";
+
+  vendorNames = n = {
+    transition: "" + prefix + "transition",
+    transform: "" + prefix + "transform",
+    transitionEnd: "" + vendor + "TransitionEnd"
+  };
+
+  transformTypes = ['scale', 'scaleX', 'scaleY', 'scale3d', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'rotate3d', 'translate', 'translateX', 'translateY', 'translateZ', 'translate3d', 'skew', 'skewX', 'skewY', 'matrix', 'matrix3d', 'perspective'];
+
+  $.fn.queueNext = function(callback, type) {
+    type || (type = "fx");
+    return this.queue(function() {
+      var redraw;
+      callback.apply(this, arguments);
+      redraw = this.offsetHeight;
+      return jQuery.dequeue(this, type);
+    });
+  };
+
+  $.fn.emulateTransitionEnd = function(duration) {
+    var callback, called,
+      _this = this;
+    called = false;
+    $(this).one(n.transitionEnd, function() {
+      return called = true;
+    });
+    callback = function() {
+      if (!called) return $(_this).trigger(n.transitionEnd);
+    };
+    return setTimeout(callback, duration);
+  };
+
+  $.fn.transform = function(properties) {
+    var key, transforms, value;
+    transforms = [];
+    for (key in properties) {
+      value = properties[key];
+      if (!(__indexOf.call(transformTypes, key) >= 0)) continue;
+      transforms.push("" + key + "(" + value + ")");
+      delete properties[key];
+    }
+    if (transforms.length) properties[n.transform] = transforms.join(' ');
+    return $(this).css(properties);
+  };
+
+  $.fn.gfx = function(properties, options) {
+    var callback, opts;
+    opts = $.extend({}, defaults, options);
+    properties[n.transition] = "all " + opts.duration + "ms " + opts.easing;
+    callback = function() {
+      var _ref;
+      $(this).css(n.transition, '');
+      if ((_ref = opts.complete) != null) _ref.apply(this, arguments);
+      return $(this).dequeue();
+    };
+    return this[opts.queue === false ? 'each' : 'queue'](function() {
+      $(this).one(n.transitionEnd, callback);
+      $(this).transform(properties);
+      return $(this).emulateTransitionEnd(opts.duration + 50);
+    });
+  };
+
+}).call(this);
diff --git a/vendor/assets/javascripts/gfx/effects.js b/vendor/assets/javascripts/gfx/effects.js
new file mode 100644
index 0000000..34a6dfd
--- /dev/null
+++ b/vendor/assets/javascripts/gfx/effects.js
@@ -0,0 +1,296 @@
+(function() {
+
+  $.fn.gfxPopIn = function(options) {
+    if (options == null) options = {};
+    if (options.scale == null) options.scale = '.2';
+    $(this).queueNext(function() {
+      return $(this).transform({
+        '-webkit-transform-origin': '50% 50%',
+        '-moz-transform-origin': '50% 50%',
+        scale: options.scale,
+        opacity: '0',
+        display: 'block'
+      });
+    });
+    return $(this).gfx({
+      scale: '1',
+      opacity: '1'
+    }, options);
+  };
+
+  $.fn.gfxPopOut = function(options) {
+    $(this).queueNext(function() {
+      return $(this).transform({
+        '-webkit-transform-origin': '50% 50%',
+        '-moz-transform-origin': '50% 50%',
+        scale: '1',
+        opacity: '1'
+      });
+    });
+    $(this).gfx({
+      scale: '.2',
+      opacity: '0'
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).transform({
+        display: 'none',
+        opacity: '1',
+        scale: '1'
+      });
+    });
+  };
+
+  $.fn.gfxFadeIn = function(options) {
+    if (options == null) options = {};
+    if (options.duration == null) options.duration = 1000;
+    $(this).queueNext(function() {
+      return $(this).css({
+        opacity: '0'
+      }).show();
+    });
+    return $(this).gfx({
+      opacity: 1
+    }, options);
+  };
+
+  $.fn.gfxFadeOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).css({
+        opacity: 1
+      });
+    });
+    $(this).gfx({
+      opacity: 0
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).hide().css({
+        opacity: 1
+      });
+    });
+  };
+
+  $.fn.gfxShake = function(options) {
+    var distance;
+    if (options == null) options = {};
+    if (options.duration == null) options.duration = 100;
+    if (options.easing == null) options.easing = 'ease-out';
+    distance = options.distance || 20;
+    $(this).gfx({
+      translateX: "-" + distance + "px"
+    }, options);
+    $(this).gfx({
+      translateX: "" + distance + "px"
+    }, options);
+    $(this).gfx({
+      translateX: "-" + distance + "px"
+    }, options);
+    $(this).gfx({
+      translateX: "" + distance + "px"
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).transform({
+        translateX: 0
+      });
+    });
+  };
+
+  $.fn.gfxBlip = function(options) {
+    if (options == null) options = {};
+    options.scale || (options.scale = '1.15');
+    $(this).gfx({
+      scale: options.scale
+    }, options);
+    return $(this).gfx({
+      scale: '1'
+    }, options);
+  };
+
+  $.fn.gfxExplodeIn = function(options) {
+    if (options == null) options = {};
+    options.scale || (options.scale = '3');
+    $(this).queueNext(function() {
+      return $(this).transform({
+        scale: options.scale,
+        opacity: '0',
+        display: 'block'
+      });
+    });
+    return $(this).gfx({
+      scale: '1',
+      opacity: '1'
+    }, options);
+  };
+
+  $.fn.gfxExplodeOut = function(options) {
+    if (options == null) options = {};
+    options.scale || (options.scale = '3');
+    $(this).queueNext(function() {
+      return $(this).transform({
+        scale: '1',
+        opacity: '1'
+      });
+    });
+    $(this).gfx({
+      scale: options.scale,
+      opacity: '0'
+    }, options);
+    if (options.reset !== false) {
+      $(this).queueNext(function() {
+        return $(this).transform({
+          scale: '1',
+          opacity: '1',
+          display: 'none'
+        });
+      });
+    }
+    return this;
+  };
+
+  $.fn.gfxFlipIn = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: '180deg',
+        scale: '.8',
+        display: 'block'
+      });
+    });
+    return $(this).gfx({
+      rotateY: 0,
+      scale: 1
+    }, options);
+  };
+
+  $.fn.gfxFlipOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: 0,
+        scale: 1
+      });
+    });
+    $(this).gfx({
+      rotateY: '-180deg',
+      scale: '.8'
+    }, options);
+    if (options.reset !== false) {
+      $(this).queueNext(function() {
+        return $(this).transform({
+          scale: 1,
+          rotateY: 0,
+          display: 'none'
+        });
+      });
+    }
+    return this;
+  };
+
+  $.fn.gfxRotateOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: 0
+      }).fix();
+    });
+    $(this).gfx({
+      rotateY: '-180deg'
+    }, options);
+    if (options.reset !== false) {
+      $(this).queueNext(function() {
+        return $(this).transform({
+          rotateY: 0,
+          display: 'none'
+        }).unfix();
+      });
+    }
+    return this;
+  };
+
+  $.fn.gfxRotateIn = function(options) {
+    var $;
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: '180deg',
+        display: 'block'
+      }).fix();
+    });
+    $(this).gfx({
+      rotateY: 0
+    }, options);
+    $(this).queueNext(function() {
+      return $(this).unfix();
+    });
+    return $ = jQuery;
+  };
+
+  $.fn.gfxSlideOut = function(options) {
+    var distance, opacity;
+    if (options == null) options = {};
+    options.direction || (options.direction = 'right');
+    distance = options.distance || 100;
+    if (options.direction === 'left') distance *= -1;
+    distance += "%";
+    opacity = options.fade ? 0 : 1;
+    $(this).queueNext(function() {
+      return $(this).show();
+    });
+    $(this).gfx({
+      translate3d: "" + distance + ",0,0",
+      opacity: opacity
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).transform({
+        translate3d: "0,0,0",
+        opacity: 1
+      }).hide();
+    });
+  };
+
+  $.fn.gfxSlideIn = function(options) {
+    var distance, opacity;
+    if (options == null) options = {};
+    options.direction || (options.direction = 'right');
+    distance = options.distance || 100;
+    if (options.direction === 'left') distance *= -1;
+    distance += "%";
+    opacity = options.fade ? 0 : 1;
+    $(this).queueNext(function() {
+      return $(this).transform({
+        translate3d: "" + distance + ",0,0",
+        opacity: opacity
+      }).show();
+    });
+    return $(this).gfx({
+      translate3d: "0,0,0",
+      opacity: 1
+    }, options);
+  };
+
+  $.fn.fix = function() {
+    return $(this).each(function() {
+      var element, parentOffset, styles;
+      element = $(this);
+      styles = element.offset();
+      parentOffset = element.parent().offset();
+      styles.left -= parentOffset.left;
+      styles.top -= parentOffset.top;
+      styles.position = 'absolute';
+      return element.css(styles);
+    });
+  };
+
+  $.fn.unfix = function() {
+    return $(this).each(function() {
+      var element;
+      element = $(this);
+      return element.css({
+        position: '',
+        top: '',
+        left: ''
+      });
+    });
+  };
+
+}).call(this);
diff --git a/vendor/assets/javascripts/gfx/overlay.js b/vendor/assets/javascripts/gfx/overlay.js
new file mode 100644
index 0000000..eeb85fa
--- /dev/null
+++ b/vendor/assets/javascripts/gfx/overlay.js
@@ -0,0 +1,81 @@
+(function() {
+  var $, close, isOpen, overlayStyles, panelCSS;
+
+  $ = jQuery;
+
+  isOpen = function() {
+    return !!$('#gfxOverlay').length;
+  };
+
+  close = function() {
+    var overlay;
+    overlay = $('#gfxOverlay');
+    overlay.find('#gfxOverlayPanel').gfx({
+      scale: '1.1',
+      opacity: 0
+    });
+    overlay.gfx({
+      background: 'rgba(0,0,0,0)'
+    });
+    return overlay.queueNext(function() {
+      return overlay.remove();
+    });
+  };
+
+  panelCSS = {
+    opacity: 0,
+    scale: 0.5
+  };
+
+  overlayStyles = {
+    display: 'block',
+    position: 'fixed',
+    zIndex: 99,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: 'rgba(0,0,0,0)'
+  };
+
+  $.gfxOverlay = function(element, options) {
+    var overlay, panel;
+    if (options == null) options = {};
+    if (isOpen()) close();
+    element = $(element);
+    if (element[0].tagName === 'SCRIPT') {
+      element = element.html();
+    } else {
+      element = element.clone();
+    }
+    options.css || (options.css = {});
+    if (options.width) options.css.width = options.width;
+    if (options.height) options.css.height = options.height;
+    overlay = $('<div />').attr({
+      'id': 'gfxOverlay'
+    });
+    overlay.css(overlayStyles);
+    overlay.click(close);
+    overlay.delegate('.close', 'click', close);
+    overlay.bind('close', close);
+    panel = $('<div />').attr({
+      'id': 'gfxOverlayPanel'
+    });
+    panel.transform($.extend({}, panelCSS, options.css));
+    panel.append(element);
+    overlay.append(panel);
+    $('body').append(overlay);
+    overlay.delay().gfx({
+      background: 'rgba(0,0,0,0.5)'
+    }, {
+      duration: options.duration
+    });
+    return panel.delay().gfx({
+      scale: 1,
+      opacity: 1
+    }, {
+      duration: options.duration
+    });
+  };
+
+}).call(this);