diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 91c12570e09889987c80985c342311f184e86d81..b3a2386bbf309197af51af039cb0ccfa01413fd7 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -6,6 +6,7 @@
 //= require_tree ./services
 //= require_tree ./mixins
 //= require ./components/board
+//= require ./components/board_sidebar
 //= require ./components/new_list_dropdown
 //= require ./vue_resource_interceptor
 
@@ -22,7 +23,8 @@ $(() => {
   gl.IssueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      'board': gl.issueBoards.Board
+      'board': gl.issueBoards.Board,
+      'board-sidebar': gl.issueBoards.BoardSidebar
     },
     data: {
       state: Store.state,
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 4a7cfeaeab22e29c46982ac1129f6eba76835aa1..1bd0b19b6da28dce98f14b61a536778867f60b03 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -37,6 +37,10 @@
         $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
 
         Store.updateFiltersUrl();
+      },
+      showIssue () {
+        Store.state.detailIssue = this.issue;
+        console.log(Store.state.detailIssue);
       }
     }
   });
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
new file mode 100644
index 0000000000000000000000000000000000000000..e26c8209b69de71bff8c7c4326c91f906a594fa2
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -0,0 +1,25 @@
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardSidebar = Vue.extend({
+    data() {
+      return {
+        issue: Store.state.detailIssue
+      };
+    },
+    ready: function () {
+      console.log(this.issue);
+    },
+    watch: {
+      issue: {
+        handler () {
+          console.log('a');
+        },
+        deep: true
+      }
+    }
+  });
+})();
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index bd07ee0c161e50f79fe469a043398df1b0d7dcf7..126e3f49fc835fb6dd02a5a15b8f71cf19a6aa6b 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -4,7 +4,9 @@
 
   gl.issueBoards.BoardsStore = {
     disabled: false,
-    state: {},
+    state: {
+      detailIssue: {}
+    },
     moving: {
       issue: {},
       list: {}
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index d8f16022407217ea793e71be35d549b371431f1f..71f64d7827c291bdd9354fabd3a8b2d6bf4c08b6 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -8,7 +8,8 @@
   ":disabled" => "disabled",
   "track-by" => "id" }
   %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id }",
-    ":index" => "index" }
+    ":index" => "index",
+    "@click" => "showIssue" }
     %h4.card-title
       = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
       %a{ ":href" => "issueLinkBase + '/' + issue.id",
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..6cec833d6dc4bb25a833ccf099c56e9c99b1146c
--- /dev/null
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -0,0 +1,40 @@
+%board-sidebar{ "inline-template" => true }
+  %aside.right-sidebar.right-sidebar-expanded{ "v-if" => "showSidebar" }
+    .issuable-sidebar
+      .block.issuable-sidebar-header
+        %span.issuable-header-text.hide-collapsed.pull-left
+          %strong Test
+          %br/
+          %span #13
+        %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", aria: { label: "Toggle sidebar" } }
+          = icon("times")
+      .block.assignee
+        .title.hide-collapsed
+          Assignee
+          = icon("spinner spin", class: "block-loading")
+          = link_to "Edit", "#", class: "edit-link pull-right"
+        .value.hide-collapsed
+          %span.assign-yourself.no-value
+            No assignee
+            \-
+            %a.js-assign-yourself{ href: "#" }
+              assign yourself
+      .block.milestone
+        .title.hide-collapsed
+          Milestone
+          = icon("spinner spin", class: "block-loading")
+        .value.hide-collapsed
+          %span.no-value
+            None
+      .block.due_date
+        .title.hide-collapsed
+          Due date
+          = icon("spinner spin", class: "block-loading")
+        .value.hide-collapsed
+          %span.no-value No due date
+      .block.labels
+        .title.hide-collapsed
+          Labels
+          = icon("spinner spin", class: "block-loading")
+        .value.issuable-show-labels.hide-collapsed
+          %span.no-value None
diff --git a/app/views/projects/boards/show.html.haml b/app/views/projects/boards/show.html.haml
index edbbd3f3d2a01c90f1ed151aacebd1c1a9f0af4f..10b495363a638cacc020b6e9d0ae650b2a0c5778 100644
--- a/app/views/projects/boards/show.html.haml
+++ b/app/views/projects/boards/show.html.haml
@@ -10,10 +10,12 @@
 
 = render 'shared/issuable/filter', type: :boards
 
-.boards-list#board-app{ "v-cloak" => true,
+#board-app{ "v-cloak" => true,
   "data-endpoint" => "#{namespace_project_board_path(@project.namespace, @project)}",
   "data-disabled" => "#{!can?(current_user, :admin_list, @project)}",
   "data-issue-link-base" => "#{namespace_project_issues_path(@project.namespace, @project)}" }
-  .boards-app-loading.text-center{ "v-if" => "loading" }
-    = icon("spinner spin")
-  = render "projects/boards/components/board"
+  .boards-list
+    .boards-app-loading.text-center{ "v-if" => "loading" }
+      = icon("spinner spin")
+    = render "projects/boards/components/board"
+  = render "projects/boards/components/sidebar"