diff --git a/webcompat/static/css/development/components/comment.css b/webcompat/static/css/development/components/comment.css
index 146b8a2fc..fb690b7ae 100644
--- a/webcompat/static/css/development/components/comment.css
+++ b/webcompat/static/css/development/components/comment.css
@@ -167,7 +167,7 @@
   width: 100%;
   max-width: 100%;
 }
-.wc-Comment--form  .Comment-wrapper {
+.wc-Comment--form  .wc-Comment-wrapper {
   padding-top: 1em;
 }
 /* drag and drop */
diff --git a/webcompat/static/css/development/page/issues.css b/webcompat/static/css/development/components/issue-detail.css
similarity index 66%
rename from webcompat/static/css/development/page/issues.css
rename to webcompat/static/css/development/components/issue-detail.css
index 25af7e642..1dc96e1d7 100644
--- a/webcompat/static/css/development/page/issues.css
+++ b/webcompat/static/css/development/components/issue-detail.css
@@ -1,140 +1,121 @@
 /*------Issues view------*/
 
-.Issue {
-  display: none;
+.wc-IssueDetail {
   font-size:var(--base-font-size);
 }
 /* Wrapper title and date issue */
-.Issue-title {
-  font-size: 2em;
+.wc-IssueDetail-title {
+  font-size: 1.6em;
   line-height: 1em;
   margin-bottom: .5em;
   word-wrap: break-word;
 }
 @media (--viewport-450px) {
-  .Issue-title {
+  .wc-IssueDetail-title {
     font-size:1.2em;
   }
 }
-/* btn back /index */
-.Issue-linkBack {
-  display: inline-block;
-  vertical-align: middle;
-  margin:0 .8em 0 0;
-}
-@media (--viewport-450px) {
-  .Issue-linkBack {
-    display:block;
-    margin-bottom:.3em;
-  }
-}
-.Issue-linkBack:hover {
-  text-decoration: none;
-}
-.Issue-linkBack-icon {
-  display: inline-block;
-  width: 1.25em;
-  height: 1.25em;
-  line-height: 1.25em;
-  text-align: center;
-  background-color: var(--wc-variant-background-light);
-  color: #fff;;
-  border-radius:50%;
-  transition: all 0.3s linear 0s;
-}
-.Issue-linkBack:hover .Issue-linkBack-icon {
-  background-color: var(--wc-variant-background-dark);
-  transition: all 0.3s linear 0s;
-}
-
 /* Issue wrapper */
-.Issue-wrapper {
+.wc-IssueDetail-wrapper {
   margin:0 0 0 4.2em;
 }
 @media (--viewport-1180px) {
-  .Issue-wrapper {
+  .wc-IssueDetail-wrapper {
     margin:0;
   }
 }
 
 /* information issue : date / author / number of comment */
-.Issue-create {
-  font-size: 1.2em;
+.wc-IssueDetail-create {
+  font-size: 1em;
   margin:0 0 2em
 }
 /* State issue */
-.Issue-state {
+.wc-IssueDetail-state {
   display: inline-block;
-  padding: 7px 23px;
+  padding: .36458333em 1.19791667em;
   color: #fff;
 }
 @media (--viewport-450px) {
-  .Issue-state {
+  .wc-IssueDetail-state {
     font-size:.8em;
   }
 }
 /*New*/
-.Issue-state--new {
+.wc-IssueDetail-state--new {
   background-color: var(--wc-state-new);
 }
 /*Needs Diagnosis*/
-.Issue-state--need {
+.wc-IssueDetail-state--need {
   background-color: var(--wc-state-need);
 }
 /*Ready for Outreach*/
-.Issue-state--ready {
+.wc-IssueDetail-state--ready {
   background-color: var(--wc-state-ready);
 }
 /*Site wait*/
-.Issue-state--sitewait {
+.wc-IssueDetail-state--sitewait {
     background-color: var(--wc-state-sitewait);
 }
 /*Close*/
-.Issue-state--close {
+.wc-IssueDetail-state--close {
   background-color: var(--wc-state-close);
 }
 /* Date of issue */
-.Issue-date {
+.wc-IssueDetail-date {
   display: inline-block;
 }
 @media (--viewport-450px) {
-  .Issue-date {
+  .wc-IssueDetail-date {
     font-size:.9em;
   }
 }
 /* Author */
-.Issue-reporter {
+.wc-IssueDetail-reporter {
   font-weight: bold;
 }
 
 /* container details issue */
-.Issue-details {
+.wc-IssueDetail-details {
   word-wrap: break-word;
   overflow: hidden;
   position: relative;
+  line-height: 1.5em;
 }
 /* force font-size */
-.Issue-details * {
+.wc-IssueDetail-details * {
   font-size:1em !important;
 }
-.Issue-details strong {
+.wc-IssueDetail-details strong {
     font-weight: bold !important;
 }
-.Issue-details img {
+.wc-IssueDetail-details img {
     max-width: 100%;
     max-height: 100%;
 }
-.Issue-details code,
-.Comment-content code {
+.wc-IssueDetail-details code,
+.wc-Comment-content code {
   font-family: monospace;
   font-size: 90%;
 }
-.Issue-details p > code,
-.Comment-content p > code {
+.wc-IssueDetail-details p > code,
+.wc-Comment-content p > code {
   color: inherit;
   background-color: #F5F5F5;
   padding: 0.25em;
 }
+.wc-IssueDetail-details li {
+  margin-bottom: 1em;
+}
+.wc-IssueDetail-details p {
+  margin-bottom: 1em;
+}
+.wc-IssueDetail-comment {
+  margin-top:2em;
+}
+.Label-wrapper {
+  margin-bottom: 2em;
+}
 /* FullScreen LabelEditor*/
 @media (--viewport-375px) {
   .Label-wrapper {
@@ -192,12 +173,12 @@
 }
 
 /* Link to log in */
-.Issue-login {
+.wc-IssueDetail-login {
   margin-top: 2.5em;
   text-align:center;
 }
 
 /*wrapper list comment */
-.Issue-comment {
+.wc-IssueDetail-comment {
   margin:4em 0 0;
 }
diff --git a/webcompat/static/css/development/main.css b/webcompat/static/css/development/main.css
index bf252d7b6..e17cb0075 100644
--- a/webcompat/static/css/development/main.css
+++ b/webcompat/static/css/development/main.css
@@ -33,13 +33,14 @@
 @import "components/loader.css";
 @import "components/box.css";
 @import "components/report-form.css";
+@import "components/issue-detail.css";
+
 /*----------Layout----------*/
 @import "layout/body.css";
 @import "layout/utilities.css";
 
 /*----------page----------*/
 @import "page/home.css";
-@import "page/issues.css";
 @import "page/static.css";
 @import "page/contributors.css";
 @import "page/issue-list.css"
diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
index 98b3116f6..ccc0a0cc9 100644
--- a/webcompat/static/js/lib/issues.js
+++ b/webcompat/static/js/lib/issues.js
@@ -14,7 +14,7 @@ if (!window.md) {
 }
 
 issues.TitleView = Backbone.View.extend({
-  el: $('.Issue-title'),
+  el: $('.wc-IssueDetail-title'),
   events: {
     'click .js-linkBack': 'goBack'
   },
@@ -44,7 +44,7 @@ issues.TitleView = Backbone.View.extend({
 });
 
 issues.MetaDataView = Backbone.View.extend({
-  el: $('.Issue-create'),
+  el: $('.wc-IssueDetail-create'),
   initialize: function() {
     var self = this;
     this.model.on('change:issueState', function() {
@@ -59,12 +59,12 @@ issues.MetaDataView = Backbone.View.extend({
 });
 
 issues.BodyView = Backbone.View.extend({
-  el: $('.Issue-details'),
+  el: $('.wc-IssueDetail-details'),
   template: _.template($('#issue-info-tmpl').html()),
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     // hide metadata
-    $('.Issue-details')
+    $('.wc-IssueDetail-details')
       .contents()
       .filter(function() {
         //find the bare html comment-ish text nodes
@@ -140,7 +140,7 @@ issues.StateButtonView = Backbone.View.extend({
 });
 
 issues.MainView = Backbone.View.extend({
-  el: $('.Issue'),
+  el: $('.js-issue'),
   events: {
     'click .Button--default': 'addNewComment',
     'click': 'closeLabelEditor'
@@ -189,7 +189,7 @@ issues.MainView = Backbone.View.extend({
       _.each([self.title, self.metadata, self.body, self.labels, self.stateButton, self],
         function(elm) {
           elm.render();
-          _.each($('.Issue-details code'), function(elm) {
+          _.each($('.wc-IssueDetail-details code'), function(elm) {
             Prism.highlightElement(elm);
           });
         }
@@ -226,7 +226,7 @@ issues.MainView = Backbone.View.extend({
   addComment: function(comment) {
     var view = new issues.CommentView({model: comment});
     var commentElm = view.render().el;
-    $(".Issue-comment").append(commentElm);
+    $(".wc-IssueDetail-comment").append(commentElm);
     _.each($(commentElm).find('code'), function(elm){
       Prism.highlightElement(elm);
     });
diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
index 69aebfc81..5a9bedc62 100644
--- a/webcompat/templates/issue.html
+++ b/webcompat/templates/issue.html
@@ -1,41 +1,31 @@
 {% extends "layout.html" %}
 {% block body %}
-  <div class="page page--issue">
   {% include "shared/nav.html" %}
-    <main class="wc-content wc-content--body Issue" role="main">
-      <h1 class="Issue-title wc-Title--l">
-      <script type="text/template" id="title-tmpl">
-        <a class="Issue-linkBack js-linkBack" href="{{ url_for("show_issues") }}" title="All issues">
-          <span class="wc-sronly">All Issues</span>
-          <span class="Issue-linkBack-icon wc-Icon wc-Icon--arrow-left" aria-hidden="true"></span>
-        </a>
-        Issue <%= number %>: <%- title %>
-      </script>
-      </h1>
-      <div class="Issue-wrapper">
+    <main class="wc-content wc-content--body js-issue wc-hidden" role="main">
+      <div class="wc-IssueDetail">
+        <h1 class="wc-IssueDetail-title wc-Title--l">
+          <script type="text/template" id="title-tmpl">
+          Issue <%= number %>: <%- title %>
+          </script>
+        </h1>
         <!-- Issue Date -->
-        <div class="Issue-create">
-        <script type="text/template" id="metadata-tmpl">
-          <div class="Issue-state Issue-state--<%= stateClass %>"><%= issueState %></div>
-          <div class="Issue-date">Opened <%= createdAt %> by
-            <span class="Issue-reporter">
+        <div class="wc-IssueDetail-create">
+          <script type="text/template" id="metadata-tmpl">
+          <div class="wc-IssueDetail-state wc-IssueDetail-state--<%= stateClass %>"><%= issueState %></div>
+          <div class="wc-IssueDetail-date">Opened <%= createdAt %> by
+            <span class="wc-IssueDetail-reporter">
               <a href="https://github.com/<%= reporter %>"><%= reporter %></a><!--
          --></span>. <%= commentNumber %> comments
           </div>
-        </script>
-        </div>
-        <div class="Issue-details">
-        <!-- Issue Info -->
-        <script type="text/template" id="issue-info-tmpl">
-          <%= body %>
-        </script>
+          </script>
         </div>
-        <!-- Issue Labels -->
-        <div class="Label-wrapper">
+      </div>
+      <!-- Issue Labels -->
+      <div class="Label-wrapper">
         <script type="text/template" id="issue-labels-tmpl">
           <span class="Label Label--title">Labels</span>
           {% if session.user_id and session.avatar_url %}
-            <span class="LabelEditor-wrapper"><button class="LabelEditor-launcher wc-Icon wc-Icon--gear" aria-hidden="true"><span class="wc-sronly">Edit Labels</span></button></span>
+          <span class="LabelEditor-wrapper"><button class="LabelEditor-launcher wc-Icon wc-Icon--gear" aria-hidden="true"><span class="wc-sronly">Edit Labels</span></button></span>
           {% endif %}
           <span class="Label-list">
           <% _.each(labels, function(label) { %>
@@ -45,55 +35,71 @@ <h1 class="Issue-title wc-Title--l">
           <% }); %>
           </span>
         </script>
+      </div>
+      <div class="wc-Comment">
+        <div class="wc-Comment-avatar">
+          <img src="https://avatars.githubusercontent.com/u/67283?v=3" alt="">
         </div>
-        <!-- Issue Comments -->
-        <div class="Issue-comment">
-          <script type="text/template" id="comment-tmpl">
-            <div class="wc-Comment-avatar">
-              <img src="<%= avatarUrl %>" alt="">
+        <div class="wc-Comment-body wc-Comment-body--caret">
+          <div class="wc-Comment-wrapper">
+            <div class="wc-Comment-header">
+              <span class="wc-Comment-owner">
+                <a href="https://github.com/magsout">@todo autor</a>
+              </span> commented <a href="#@todo url">@todo time</a>
             </div>
-            <div class="wc-Comment-body wc-Comment-body--caret">
-              <div class="wc-Comment-wrapper">
-                <div class="wc-Comment-header">
-                  <span class="wc-Comment-owner">
-                    <a href="https://github.com/<%= commenter %>"><%= commenter %></a>
-                  </span> commented <a href="#<%= commentLinkId %>"><%= createdAt %></a>
-                </div>
-                <div class="wc-Comment-content"><%= body %></div>
+            <div class="wc-Comment-content">
+              <div class="wc-IssueDetail-details">
+                <script type="text/template" id="issue-info-tmpl"><%= body %></script>
               </div>
             </div>
-          </script>
+          </div>
         </div>
-
-        {% if session.user_id and session.avatar_url %}
-        <!-- Create issue comment -->
-        <div class="wc-Comment wc-Comment--form" data-username={{ session.username }} data-avatar-url= {{ session.avatar_url }}>
-          <div class="wc-Comment-avatar">
-            <img class="" src="{{ session.avatar_url }}" alt="Avatar"/>
+      </div>
+      <!-- Issue Comments -->
+      <div class="wc-IssueDetail-comment">
+        <script type="text/template" id="comment-tmpl">
+        <div class="wc-Comment-avatar">
+          <img src="<%= avatarUrl %>" alt="">
+        </div>
+        <div class="wc-Comment-body wc-Comment-body--caret">
+          <div class="wc-Comment-wrapper">
+            <div class="wc-Comment-header">
+              <span class="wc-Comment-owner">
+                <a href="https://github.com/<%= commenter %>"><%= commenter %></a>
+              </span> commented <a href="#<%= commentLinkId %>"><%= createdAt %></a>
+            </div>
+            <div class="wc-Comment-content"><%= body %></div>
           </div>
-          <div class="wc-Comment-body wc-Comment-body--caret">
-            <!--<div class="Comment-drag">-->
-              <!-- TODO(miket) <div class="comment__dd">Attach images by dragging &amp; dropping, <span class="comment__dd__label">selecting them</span> or pasting form the clipboad </div> -->
-              <label for="wc-Comment-text" class="wc-sronly">Comment Text</label>
-              <textarea id="Comment-text" class="wc-Comment-wrapper wc-Comment-text" placeholder="Leave a comment"></textarea>
-            <!--</div>-->
-            <div class="wc-Comment-button">
-              <button class="Button Button--action js-issue-state-button">
+        </div>
+        </script>
+      </div>
+      {% if session.user_id and session.avatar_url %}
+      <!-- Create issue comment -->
+      <div class="wc-Comment wc-Comment--form" data-username={{ session.username }} data-avatar-url= {{ session.avatar_url }}>
+        <div class="wc-Comment-avatar">
+          <img class="" src="{{ session.avatar_url }}" alt="Avatar"/>
+        </div>
+        <div class="wc-Comment-body wc-Comment-body--caret">
+        <!--<div class="Comment-drag">-->
+        <!-- TODO(miket) <div class="comment__dd">Attach images by dragging &amp; dropping, <span class="comment__dd__label">selecting them</span> or pasting form the clipboad </div> -->
+        <label for="wc-Comment-text" class="wc-sronly">Comment Text</label>
+          <textarea id="Comment-text" class="wc-Comment-wrapper wc-Comment-text" placeholder="Leave a comment"></textarea>
+        <!--</div>-->
+          <div class="wc-Comment-button">
+            <button class="Button Button--action js-issue-state-button">
               <script type="text/template" id="state-button-tmpl">
-                <%= state %>
+              <%= state %>
               </script>
-              </button>
-              <button value="comment" class="Button Button--default js-issue-comment-button" type="submit">Comment</button>
-            </div>
+            </button>
+            <button value="comment" class="Button Button--default js-issue-comment-button" type="submit">Comment</button>
           </div>
         </div>
-        {% else %}
-        <p class="Issue-login">Please <a href="{{ url_for('login') }}">login</a> to edit issues.</p>
-        {% endif %}
-        <p class="wc-margin-bottom"><span class="wc-keyhint">G</span> takes you to the <a href="https://github.com/{{ config['ISSUES_REPO_URI'] }}/{{ number }}">GitHub view</a> of this page.</p>
-       </div>
+      </div>
+      {% else %}
+      <p class="wc-IssueDetail-login">Please <a href="{{ url_for('login') }}">login</a> to edit issues.</p>
+      {% endif %}
+      <p class="wc-margin-bottom"><span class="wc-keyhint">G</span> takes you to the <a href="https://github.com/{{ config['ISSUES_REPO_URI'] }}/{{ number }}">GitHub view</a> of this page.</p>
     </main>
-  </div>
 
   <script type="text/template" id="label-editor-tmpl">
     <div class="LabelEditor-table">