diff --git a/public/javascripts/app/pages/post-viewer.js b/public/javascripts/app/pages/post-viewer.js
index eedadfb7b..bb868f4e9 100644
--- a/public/javascripts/app/pages/post-viewer.js
+++ b/public/javascripts/app/pages/post-viewer.js
@@ -5,7 +5,8 @@ app.pages.PostViewer = app.views.Base.extend({
   subviews : {
     "#post-content" : "postView",
     "#post-nav" : "navView",
-    "#post-feedback" : "feedbackView"
+    "#post-feedback" : "feedbackView",
+    "#header-container" : "authorView"
   },
 
   postView : function(){
@@ -25,6 +26,10 @@ app.pages.PostViewer = app.views.Base.extend({
     return new app.views.PostViewerFeedback({ model : this.model })
   },
 
+  authorView : function() {
+    return new app.views.PostViewerAuthor({ model : this.model })
+  },
+
   postRenderTemplate : function() {
     this.bindNavHooks();
   },
diff --git a/public/javascripts/app/templates/post-viewer.handlebars b/public/javascripts/app/templates/post-viewer.handlebars
index 6182ec7c4..3c690065f 100644
--- a/public/javascripts/app/templates/post-viewer.handlebars
+++ b/public/javascripts/app/templates/post-viewer.handlebars
@@ -1,31 +1,15 @@
 <!-- header to be extracted -->
 
 <div class="header">
-  <div class="header-container">
-    <div id="post-author" class="media">
-      <div class="img">
-        <a href="/people/{{author.guid}}" class="author-name">
-          <img src="{{author.avatar.small}}" class="avatar smaller"/>
-        </a>
-      </div>
-
-      <div class="bd">
-        <a href="/people/{{author.guid}}" class="author-name">
-          {{author.name}}
-        </a>
-
-        <div class="post-time">
-          <i class="icon-time"></i>
-          {{created_at}}
-        </div>
-      </div>
-    </div>
-  </div>
+  <div id="header-container"> </div>
 </div>
 
 <div id="post-content"></div>
 <div id="post-nav"></div>
 
+
+<!-- extraction needed! -->
+
 <div id="post-reactions">
   <div id="post-feedback"></div>
 
diff --git a/public/javascripts/app/templates/post-viewer/author.handlebars b/public/javascripts/app/templates/post-viewer/author.handlebars
new file mode 100644
index 000000000..904f4d0c6
--- /dev/null
+++ b/public/javascripts/app/templates/post-viewer/author.handlebars
@@ -0,0 +1,16 @@
+<div class="img">
+  <a href="/people/{{author.guid}}" class="author-name">
+    <img src="{{author.avatar.small}}" class="avatar smaller"/>
+  </a>
+</div>
+
+<div class="bd">
+  <a href="/people/{{author.guid}}" class="author-name">
+    {{author.name}}
+  </a>
+
+  <div class="post-time">
+    <i class="icon-time"></i>
+    <time datetime="{{created_at}}" />
+  </div>
+</div>
diff --git a/public/javascripts/app/views/post_author_view.js b/public/javascripts/app/views/post_author_view.js
new file mode 100644
index 000000000..4a114217a
--- /dev/null
+++ b/public/javascripts/app/views/post_author_view.js
@@ -0,0 +1,9 @@
+app.views.PostViewerAuthor = app.views.Base.extend({
+
+  id : "post-author",
+  className : "media",
+
+  templateName: "post-viewer/author"
+
+})
+
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 8f30f09ab..e57759500 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -252,7 +252,7 @@ $light-grey: #999;
   width: 100%;
 }
 
-.header-container {
+#header-container {
   padding: 20px;
 }