diff --git a/website/client/assets/less/semantic-ui/semantic.less b/website/client/assets/less/semantic-ui/semantic.less
index 0b947d151c..c283520fc9 100644
--- a/website/client/assets/less/semantic-ui/semantic.less
+++ b/website/client/assets/less/semantic-ui/semantic.less
@@ -17,7 +17,7 @@
 & { @import "~semantic-ui-less/definitions/globals/site"; }
 
 /* Elements */
-// & { @import "~semantic-ui-less/definitions/elements/button"; }
+& { @import "~semantic-ui-less/definitions/elements/button"; }
 // & { @import "~semantic-ui-less/definitions/elements/container"; }
 // & { @import "~semantic-ui-less/definitions/elements/divider"; }
 // & { @import "~semantic-ui-less/definitions/elements/flag"; }
@@ -26,7 +26,7 @@
 // & { @import "~semantic-ui-less/definitions/elements/image"; }
 // & { @import "~semantic-ui-less/definitions/elements/input"; }
 // & { @import "~semantic-ui-less/definitions/elements/label"; }
-// & { @import "~semantic-ui-less/definitions/elements/list"; }
+& { @import "~semantic-ui-less/definitions/elements/list"; }
 // & { @import "~semantic-ui-less/definitions/elements/loader"; }
 // & { @import "~semantic-ui-less/definitions/elements/rail"; }
 // & { @import "~semantic-ui-less/definitions/elements/reveal"; }
@@ -35,7 +35,7 @@
 
 /* Collections */
 // & { @import "~semantic-ui-less/definitions/collections/breadcrumb"; }
-// & { @import "~semantic-ui-less/definitions/collections/form"; }
+& { @import "~semantic-ui-less/definitions/collections/form"; }
 & { @import "~semantic-ui-less/definitions/collections/grid"; }
 & { @import "~semantic-ui-less/definitions/collections/menu"; }
 // & { @import "~semantic-ui-less/definitions/collections/message"; }
@@ -43,8 +43,8 @@
 
 /* Views */
 // & { @import "~semantic-ui-less/definitions/views/ad"; }
-// & { @import "~semantic-ui-less/definitions/views/card"; }
-// & { @import "~semantic-ui-less/definitions/views/comment"; }
+& { @import "~semantic-ui-less/definitions/views/card"; }
+& { @import "~semantic-ui-less/definitions/views/comment"; }
 // & { @import "~semantic-ui-less/definitions/views/feed"; }
 // & { @import "~semantic-ui-less/definitions/views/item"; }
 // & { @import "~semantic-ui-less/definitions/views/statistic"; }
diff --git a/website/client/components/Inbox/InboxConversationPage.vue b/website/client/components/Inbox/InboxConversationPage.vue
new file mode 100644
index 0000000000..d0d0e14cf0
--- /dev/null
+++ b/website/client/components/Inbox/InboxConversationPage.vue
@@ -0,0 +1,58 @@
+<template lang="pug">
+.ui.internally.celled.grid
+  .row
+    .sixteen.wide.column
+      .ui.comments
+        h2.ui.dividing.header Conversation
+        .comment(v-for="message in messages")
+          a.avatar
+            img(src='http://semantic-ui.com/images/avatar/small/matt.jpg')
+          .content
+            a.author {{message.from}}
+            .metadata
+              span.date {{message.date}}
+            .text
+              | {{message.message}}
+        .field
+          textarea(v-model='newMessage')
+        .ui.blue.labeled.submit.icon.button(v-on:click='reply')
+          i.icon.edit
+          |  Add Reply
+</template>
+
+<script>
+export default {
+  data () {
+    // @TODO: Abstract to Store
+    let messages = [
+      {
+        from: 'Paglias',
+        fromUserId: 1234,
+        to: 'TheHollidayInn',
+        message: 'I love the Gang of Four',
+        date: new Date(),
+      },
+    ];
+
+    return {
+      messages,
+      newMessage: '',
+    };
+  },
+
+  methods: {
+    reply: function reply () {
+      // @TODO: This will be default values based on the conversation and current user
+      let messageToSend = {
+        from: 'TheHollidayInn',
+        fromUserId: 3211,
+        to: 'Paglias',
+        message: this.newMessage,
+        date: new Date(),
+      };
+      this.messages.push(messageToSend);
+      this.newMessage = '';
+    },
+  },
+};
+</script>
diff --git a/website/client/components/Inbox/InboxPage.vue b/website/client/components/Inbox/InboxPage.vue
new file mode 100644
index 0000000000..30ebb6fa5b
--- /dev/null
+++ b/website/client/components/Inbox/InboxPage.vue
@@ -0,0 +1,39 @@
+<template lang="pug">
+.ui.internally.celled.grid
+  .row
+    .sixteen.wide.colum
+      h2.ui.dividing.header Inbox
+      .ui.middle.aligned.selection.list
+        .item(v-for="conversation in conversations")
+          img.ui.avatar.image(src='http://semantic-ui.com/images/avatar/small/daniel.jpg')
+          .content
+            .header
+              router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
+                | {{ conversation.from }}
+
+</template>
+
+<script>
+export default {
+  data () {
+    // @TODO: Abstract to Store
+    let messages = [
+      {
+        from: 'Paglias',
+        fromUserId: 1234,
+        to: 'TheHollidayInn',
+        message: 'I love the Gang of Four',
+      },
+    ];
+
+    let conversations = {};
+    for (let message of messages) {
+      if (!conversations[message.fromUserId]) conversations[message.fromUserId] = message;
+    }
+
+    return {
+      conversations,
+    };
+  },
+};
+</script>
diff --git a/website/client/components/Social/TavernPage.vue b/website/client/components/Social/TavernPage.vue
new file mode 100644
index 0000000000..60a933e2b2
--- /dev/null
+++ b/website/client/components/Social/TavernPage.vue
@@ -0,0 +1,211 @@
+<template lang="pug">
+.ui.grid
+  .four.wide.column
+    h2.ui.dividing.header SideMenu
+
+    .ui.card
+      .content
+        .header Daniel
+      .content
+        h4.ui.sub.header Activity
+        | Description
+      .extra.content
+        button.ui.button Rest at the Inn
+
+    .ui.card
+      .content
+        .header Resources
+      .content
+        ul
+          li Community Guidelines
+          li Looking for Group (Party Wanted) Posts
+          li FAQ
+          li Glossary
+          li Wiki
+          li Data Display Tool
+          li Report a Problem
+          li Request a Feature
+          li Community Forum
+          li Ask a Question (Newbies Guild)
+
+    .ui.card
+      .content
+        .header Resources
+      .content
+        small
+          a(href='/#/options/groups/hall') Visit the Hall of Heroes (contributors and backers)
+          br
+          a(href='http://habitica.wikia.com/wiki/Contributor_Rewards', target='_blank') Learn more about contributor rewards
+          br
+          a(href='http://habitica.wikia.com/wiki/Contributing_to_Habitica', target='_blank') Learn how to contribute to Habitica
+        table.table.table-striped.panel-tiers
+          tbody
+            tr
+              td
+                a.label.label-contributor-1(ng-click='toggleUserTier($event)') Tier 1 (Friend)
+                div
+                  p
+                    span.achievement.achievement-boot
+                    | When your
+                    strong first
+                    |  set of submissions is deployed, you will receive the Habitica Contributor's badge. Your name in Tavern chat will proudly display that you are a contributor. As a bounty for your work, you will also receive
+                    strong 3 Gems
+                    | .
+            tr
+              td
+                a.label.label-contributor-2(ng-click='toggleUserTier($event)') Tier 2 (Friend)
+                div
+                  p
+                    span.shop-sprite.item-img.shop_armor_special_1
+                    | When your
+                    strong second
+                    |  set of submissions is deployed, the
+                    strong Crystal Armor
+                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
+                    strong 3 Gems.
+            tr
+              td
+                a.label.label-contributor-3(ng-click='toggleUserTier($event)') Tier 3 (Elite)
+                div
+                  p
+                    span.shop-sprite.item-img.shop_head_special_1
+                    | When your
+                    strong third
+                    |  set of submissions is deployed, the
+                    strong Crystal Helmet
+                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
+                    strong 3 Gems
+                    | .
+            tr
+              td
+                a.label.label-contributor-4(ng-click='toggleUserTier($event)') Tier 4 (Elite)
+                div
+                  p
+                    span.shop-sprite.item-img.shop_weapon_special_1
+                    | When your
+                    strong fourth
+                    |  set of submissions is deployed, the
+                    strong Crystal Sword
+                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
+                    strong 4 Gems
+                    | .
+            tr
+              td
+                a.label.label-contributor-5(ng-click='toggleUserTier($event)') Tier 5 (Champion)
+                div
+                  p
+                    span.shop-sprite.item-img.shop_shield_special_1
+                    | When your
+                    strong fifth
+                    |  set of submissions is deployed, the
+                    strong Crystal Shield
+                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
+                    strong 4 Gems
+                    | .
+            tr
+              td
+                a.label.label-contributor-6(ng-click='toggleUserTier($event)') Tier 6 (Champion)
+                div
+                  p
+                    span.shop-sprite.item-img.Pet-Dragon-Hydra
+                    | When your
+                    strong sixth
+                    |  set of submissions is deployed, you will receive a
+                    strong Hydra Pet
+                    | . You will also receive
+                    strong 4 Gems
+                    | .
+            tr
+              td
+                a.label.label-contributor-7(ng-click='toggleUserTier($event)') Tier 7 (Legendary)
+                div
+                  p
+                  | When your
+                  strong seventh
+                  |  set of submissions is deployed, you will receive
+                  strong 4 Gems
+                  |  and become a member of the honored Contributor's Guild and be privy to the behind-the-scenes details of Habitica! Further contributions do not increase your tier, but you may continue to earn Gem bounties and titles.
+            tr
+              td
+                a.label.label-contributor-8(ng-click='toggleUserTier($event)') Moderator (Guardian)
+                div
+                  p
+                    | Moderators were selected carefully from high tier contributors, so please give them your respect and listen to their suggestions.
+            tr
+              td
+                a.label.label-contributor-9(ng-click='toggleUserTier($event)') Staff (Heroic)
+                div
+                  p
+                    | The Heroic tier contains Habitica staff and staff-level contributors. If you have this title, you were appointed to it (or hired!).
+            tr
+              td
+                a.label.label-npc(ng-click='toggleUserTier($event)') NPC
+                div
+                  p
+                    | NPCs backed Habitica's Kickstarter at the highest tier. You can find their avatars watching over site features!
+
+    .ui.card
+      .content
+        .header Challenges
+      .content
+        ul
+          li Challenge 1
+
+  .twelve.wide.column
+    h2.ui.dividing.header Tavern Chat
+    .ui.comments
+
+      .field
+        textarea(v-model='newMessage')
+      .ui.blue.labeled.submit.icon.button(v-on:click='sendChat')
+        i.icon.edit
+        |  Send Chat
+
+      .comment(v-for="message in messages")
+        a.avatar
+          img(src='http://semantic-ui.com/images/avatar/small/matt.jpg')
+        .content
+          a.author {{message.from}}
+          .metadata
+            span.date {{message.date}}
+          .text
+            | {{message.message}}
+
+</template>
+
+<script>
+export default {
+  data () {
+    // @TODO: Abstract to Store
+    let messages = [
+      {
+        from: 'Paglias',
+        fromUserId: 1234,
+        to: 'TheHollidayInn',
+        message: 'I love the Gang of Four',
+        date: new Date(),
+      },
+    ];
+
+    return {
+      messages,
+      newMessage: '',
+    };
+  },
+
+  methods: {
+    sendChat: function sendChat () {
+      // @TODO: This will be default values based on the conversation and current user
+      let messageToSend = {
+        from: 'TheHollidayInn',
+        fromUserId: 3211,
+        to: 'Paglias',
+        message: this.newMessage,
+        date: new Date(),
+      };
+      this.messages.push(messageToSend);
+      this.newMessage = '';
+    },
+  },
+};
+</script>
diff --git a/website/client/components/SocialPage.vue b/website/client/components/SocialPage.vue
new file mode 100644
index 0000000000..3b8b1ca6a1
--- /dev/null
+++ b/website/client/components/SocialPage.vue
@@ -0,0 +1,40 @@
+<template lang="pug">
+.row
+
+  .sixteen.wide.column
+    .ui.secondary.menu
+      a.item
+        router-link(:to="{ name: 'tavern' }")
+          | Tavern
+      a.item
+        router-link(:to="{ name: 'inbox' }")
+          | Inbox
+
+  .sixteen.wide.column
+    router-view
+</template>
+
+<script>
+export default {
+  data () {
+    // @TODO: Abstract to Store
+    let messages = [
+      {
+        from: 'Paglias',
+        fromUserId: 1234,
+        to: 'TheHollidayInn',
+        message: 'I love the Gang of Four',
+      },
+    ];
+
+    let conversations = {};
+    for (let message of messages) {
+      if (!conversations[message.fromUserId]) conversations[message.fromUserId] = message;
+    }
+
+    return {
+      conversations,
+    };
+  },
+};
+</script>
diff --git a/website/client/components/parentPage.vue b/website/client/components/parentPage.vue
index 2c5dc626f1..9dfd1b7d4d 100644
--- a/website/client/components/parentPage.vue
+++ b/website/client/components/parentPage.vue
@@ -1,11 +1,10 @@
 <template lang="pug">
 .row
   .sixteen.wide.column
-    h2 Parent Page
     router-view.row
 </template>
 
 <script>
 export default {
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/website/client/readme.md b/website/client/readme.md
new file mode 100644
index 0000000000..f553bbd3a4
--- /dev/null
+++ b/website/client/readme.md
@@ -0,0 +1,20 @@
+#Running
+ - Open a terminal and type `npm run client:dev`
+ - Open a second terminal and type `npm start`
+
+#Preparation Reading
+- Vue 2 (https://vuejs.org)
+
+- Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/
+
+- We’re using `.vue` files that make it possible to have HTML, JS and CSS for each component together in a single location. They’re implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/
+
+- SemanticUI is the UI framework http://semantic-ui.com/. So far I’ve only used the CSS part, it also has JS plugins but I’ve yet to use them. It supports theming so if it’s not too difficult we’ll want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.
+
+The code is in `/website/client`. We’re using something very similar to Vuex (equivalent of React’s Redux) for state management http://vuex.vuejs.org/en/index.html
+
+The API is almost the same except that we don’t use mutations but only actions because it would make it difficult to work with common code
+
+The project is developed directly in the `develop` branch as long as we’ll be able to avoid splitting it into a different branch.
+
+So far most of the work has been on the template, so there’s no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it’s basically a Flux implementation: there’s a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.
diff --git a/website/client/router.js b/website/client/router.js
index 2bcc108866..018d4266ef 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -4,6 +4,13 @@ import UserTasks from './components/userTasks';
 import ParentPage from './components/parentPage';
 import Page from './components/page';
 
+// Social
+import SocialPage from './components/SocialPage';
+import TavernPage from './components/Social/TavernPage';
+import InboxPage from './components/Inbox/InboxPage';
+import InboxConversationPage from './components/Inbox/InboxConversationPage';
+
+
 Vue.use(VueRouter);
 
 export default new VueRouter({
@@ -23,10 +30,22 @@ export default new VueRouter({
     { path: '/market', component: Page },
     {
       path: '/social',
-      component: ParentPage,
+      component: SocialPage,
       children: [
-        {path: 'tavern', component: Page},
-        {path: 'inbox', component: Page},
+        { name: 'tavern', path: 'tavern', component: TavernPage },
+        {
+          name: 'inbox',
+          path: 'inbox',
+          component: ParentPage,
+          children: [
+            {path: '', component: InboxPage},
+            {
+              name: 'conversation',
+              path: 'conversation/:id',
+              component: InboxConversationPage,
+            },
+          ],
+        },
         {path: 'challenges', component: Page},
         {path: 'party', component: Page},
         {path: 'guilds', component: Page},
@@ -43,4 +62,4 @@ export default new VueRouter({
       ],
     },
   ],
-});
\ No newline at end of file
+});