diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
new file mode 100644
index 0000000..4329a10
--- /dev/null
+++ b/app/assets/javascripts/group.js
@@ -0,0 +1,78 @@
+(function() {
+    "use strict";
+
+    var doc = document;
+
+    var group = {
+        // Detect and change the top position of the cycle navs
+        cycleFix: function() {
+          if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) {
+              var imgs = doc.querySelectorAll( ".group-post-banner-image" ),
+                  imgHeight = imgs[ 0 ].clientHeight,
+                  cycleNav = doc.querySelectorAll( ".cycle-nav" ),
+                  cycleNavHeight = cycleNav[ 0 ].clientHeight,
+                  len = cycleNav.length,
+                  i = -1;
+
+              // Hide the navs when there's noly one slide
+              if( imgs.length <= 1 ) {
+                  for( i = 0; i < len; i++ ) {
+                      cycleNav[ i ].classList.add( "hide" );
+                  }
+              } else {
+              // Change nav top positions which are calculating by JavaScript
+                  for ( i = 0; i < len; i++ ) {
+                      cycleNav[ i ].style.top = ( ( imgHeight / 2 ) - ( cycleNavHeight / 2 ) )  + "px";
+                  }
+              }
+          }
+        },
+        // Create the tool tip wrap and get the seen counts and then inject them into DOM
+        createToolTip: function() {
+          if( doc.querySelectorAll( ".group-post-seen-by-name" ).length >= 1 ) {
+              var container = doc.querySelector( ".group-post-seen-by" ),
+                  names = doc.querySelectorAll( ".group-post-seen-by-name" ),
+                  namesLen = names.length,
+                  span = doc.createElement( "span" ),
+                  wrap = doc.createElement( "div" ),
+                  frag = document.createDocumentFragment();
+
+              // Get the seen counts and append them
+              span.className = "group-post-seen-by-count";
+              span.textContent = namesLen;
+              names[ 0 ].parentNode.appendChild( span );
+
+              // Create the tool tip and save them in the document fragment
+              wrap.className = "group-post-seen-by-names tool-tip";
+              Array.prototype.slice.call( names ).forEach( function( el ) {
+                  frag.appendChild( el );
+              });
+
+              // Append the final result to DOM
+              wrap.appendChild( frag );
+              container.appendChild( wrap );
+          }
+        },
+        scrollEffect: function() {
+            var page = doc.querySelector( ".group-page" ),
+                wrap = doc.querySelector( ".group-page-banner-image-wrap" ),
+                scrollClass = "scroll";
+
+            function stickyScroll( e ) {
+              if( window.pageYOffset > 210 ) {
+                  page.classList.add( scrollClass );
+              }
+            }
+
+            window.addEventListener( "scroll", stickyScroll);
+        }
+    }
+
+    // When DOM is completely loaded
+    document.addEventListener( "DOMContentLoaded", function( event ) {
+        group.cycleFix();  
+        group.createToolTip();
+        group.scrollEffect();
+    });
+
+})();
diff --git a/app/assets/stylesheets/group_page.css b/app/assets/stylesheets/group_page.css
deleted file mode 100644
index 358927f..0000000
--- a/app/assets/stylesheets/group_page.css
+++ /dev/null
@@ -1,249 +0,0 @@
-@charset "utf-8";
-body {
-    background: #f3f3f3;
-}	
-
-#main-wrap {
-    padding-top: 0;
-}
-
-*,
-*:before,
-*:after {
-    box-sizing: border-box;
-}
-
-.group-page {}
-
-.group-page-banner-image-wrap {
-    position: relative;
-    max-height: 280px;
-    overflow: hidden;
-}
-
-.group-page-view-switch {
-    position: absolute;
-    right: 2rem;
-    top: 2rem;
-}
-
-.group-page-banner-image {
-    max-width: 100%;
-    width: 100%;
-    height: auto;
-}
-
-.group-page-bar {
-    overflow: hidden;
-    background: #171717;
-    padding: 20px 2rem;
-    text-align: center;
-}
-
-.group-page-title {
-    padding: 6px 0;
-    color: #fff;
-    margin-bottom: 12px;
-}
-
-.group-page-setion {
-    padding: 30px 2rem;
-    overflow: hidden;
-    max-width: 1350px;
-    margin: auto;
-}
-
-.gorup-page-info-wrap {
-    display: block;
-    font-size: .9rem;
-    float: right;
-    padding: 5px .5rem;
-    border: 2px solid #cdcdcd;
-    cursor: pointer;
-}
-
-.group-page-description-wrap {
-    clear: both;
-}
-
-.gorup-page-info-wrap {
-    text-align: right;
-    margin-bottom: 10px;
-}
-
-.group-page-status-wrap {
-    float: right;
-    font-size: 0.75rem;
-    color: #fff;
-    background: #1d9e20;
-    padding: 2px .4rem;
-    border-radius: .2rem;
-    margin-bottom: 10px;
-}
-.group-page-status-wrap.close-eye{
-  background: #c71932;
-  margin-left: 5px;
-}
-
-.group-page-description-wrap {
-    padding: 16px 1.2rem 16px;
-    margin-bottom: 15px;
-    box-shadow: inset 0 0 8px #aaa;
-    border-radius: .2rem;
-}
-
-.group-page-description {
-    clear: both;
-    text-align: justify;
-}
-
-.group-page-post {
-    clear: both;
-    text-align: center;
-    overflow: hidden;
-    margin-bottom: 40px;
-    background: #fff;
-    padding: 28px 1.5rem;
-    border-radius: .2rem;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
-}
-
-.group-page-post-link{
-	text-decoration: none;
-	color: #000;
-}
-
-.group-page-post:hover {
-    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, .2);
-}
-
-.group-page-post-link:hover {
-	color: #000;
-	text-decoration: none;
-}
-
-.group-page-post-image-wrap {
-    display: inline-block;
-    margin-bottom: 12px;
-}
-
-.group-page-post-image {
-    max-width: 100%;
-    width: 100%;
-    margin-top: 12px;
-    /*border-radius: 50%;*/
-    height: auto;
-}
-
-.group-page-post-content {
-    margin-bottom: .5rem;
-}
-
-.group-page-post-title {
-    font-weight: normal;
-    font-size: 1.5rem;
-    line-height: 1;
-    margin-bottom: 12px;
-}
-
-.group-page-post-meta-wrap {
-    color: #aaa;
-}
-
-.group-page-post-author,
-.group-page-post-postdate {
-    margin-right: .5rem;
-}
-/* scroll view */
-.group-page.scroll {
-	padding-top: 7rem;
-}
-.group-page.scroll .group-page-banner-image-wrap {
-    height: 70px;
-    overflow: hidden;
-    position: fixed;
-    top: 0;
-}
-
-.group-page.scroll .group-page-title {
-    margin-bottom: 0;
-}
-
-.group-page.scroll .group-page-title {
-    font-size: 18px;
-}
-
-.group-page.scroll .group-page-new-post {
-    margin-top: 6px;
-}
-
-.group-page.scroll .group-page-new-post {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.group-page.scroll .group-page-view-switch {
-    position: static;
-    display: inline-block;
-    margin: 6px .5rem 0 0;
-}
-
-.group-page.scroll .btn {
-    padding: 2px 5px;
-}
-
-.group-page li a {
-    text-decoration: none;
-}
-
-.group-page .group-page-feed-view .active {
-    color: #fff;
-}
-/* 600px */
-
-@media screen and (min-width: 37.5rem) {
-    .group-page-post {
-        text-align: left;
-        margin-bottom: 15px;
-    }
-    .group-page-post-image-wrap {
-        float: left;
-        width: 12%;
-        margin-right: 4%;
-        min-width: 100px;
-    }
-    .group-page-post-content-wrap {
-        float: left;
-        width: 72%;
-    }
-    .group-page.scroll .group-page-view-switch {
-        margin: 6px .5rem 0 0;
-    }
-    .group-page.scroll .group-page-bar {
-        padding: 0 5rem 0 2rem;
-	    position: fixed;
-	    top: 70px;
-	    width: 100%;
-    }
-}
-/* 760px */
-
-@media screen and (min-width: 47.5rem) {
-    .group-page-post-content-wrap {
-        width: 80%;
-    }
-    .group-page-bar {
-        text-align: left;
-    }
-    .group-page-title {
-        float: left;
-        margin: 0;
-        padding: 0;
-    }
-    .group-page-new-post {
-        float: right;
-    }
-    .group-page-view-switch {
-        float: right;
-    }
-}
diff --git a/app/assets/stylesheets/group_show.css.scss b/app/assets/stylesheets/group_show.css.scss
new file mode 100644
index 0000000..c2f01dd
--- /dev/null
+++ b/app/assets/stylesheets/group_show.css.scss
@@ -0,0 +1,511 @@
+@charset "utf-8";
+
+@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
+
+// Font stacks
+
+$main-font: "Maven Pro", "微軟正黑體" sans-serif;
+$gray: #f3f3f3;
+$dark-gray: #aaaaaa;
+$light-gray: #cdcdcd;
+$white: white;
+$black: black;
+$green: #1d9e20;
+$blue: #0056cc;
+$red: #c71932;
+$group-page-bar-color: #171717;
+
+// General style
+body {
+    background: $gray;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+.screen-reader {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.button {
+    padding: 8px .75rem;
+    color: $gray;
+    border: none;
+    border: 1px solid #38b7ea;
+    border-radius: 10rem;
+    background: $white;
+}
+
+img {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+.tool-tip-parent {
+  position: relative;
+  &:hover {
+    .tool-tip {
+      display: block;
+    }
+  }
+}
+.tool-tip {
+    padding: 10px 0.75rem;
+    border-radius: .2rem;
+    color: $white;
+    background: rgba($black, 0.85);
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    z-index: 150;
+    &:after {
+        border: 5px solid transparent;
+        border-top-color: rgba($black, 0.85);
+        content: "";
+        position: absolute;
+        left: 10px;
+        bottom: -10px;
+    }
+}
+
+.topnav {
+    display: none;
+}
+
+// Group page
+#main-wrap {
+    padding-top: 0;
+}
+
+.group-page-banner-image-wrap {
+    position: relative;
+    overflow: hidden;
+    max-height: 280px;
+}
+
+.group-page-view-switch {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+}
+
+.group-page-banner-image {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+
+.group-page-bar {
+    overflow: hidden;
+    padding: 20px 2rem;
+    text-align: center;
+    background: $group-page-bar-color;
+}
+
+.group-page-title {
+    margin-bottom: 12px;
+    padding: 6px 0;
+    color: $white;
+}
+
+.group-page-setion {
+    overflow: hidden;
+    max-width: 1350px;
+    margin: auto;
+    padding: 30px 2rem;
+}
+
+.gorup-page-info-wrap {
+    font-size: .9rem;
+    display: block;
+    float: right;
+    padding: 5px .5rem;
+    cursor: pointer;
+    border: 2px solid $light-gray;
+}
+
+.group-page-description-wrap {
+    clear: both;
+}
+
+.gorup-page-info-wrap {
+    margin-bottom: 10px;
+    text-align: right;
+}
+
+.group-page-status-wrap {
+    font-size: .75rem;
+    float: right;
+    margin-bottom: 10px;
+    padding: 2px .4rem;
+    color: $white;
+    border-radius: .2rem;
+    background: $green;
+}
+
+.group-page-status-wrap.close-eye {
+    margin-left: 5px;
+    background: $red;
+}
+
+.group-page-description-wrap {
+    margin-bottom: 15px;
+    padding: 16px 1.2rem 16px;
+    border-radius: .2rem;
+    box-shadow: inset 0 0 8px $dark-gray;
+}
+
+.group-page-description {
+    clear: both;
+    text-align: justify;
+}
+
+.group-page-post {
+    clear: both;
+    overflow: hidden;
+    margin-bottom: 40px;
+    padding: 28px 1.5rem;
+    text-align: center;
+    border-radius: .2rem;
+    background: $white;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+}
+
+.group-page-post-link {
+    text-decoration: none;
+    color: $black;
+}
+
+.group-page-post:hover {
+    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2);
+}
+
+.group-page-post-link:hover {
+    text-decoration: none;
+    color: $black;
+}
+
+.group-page-post-image-wrap {
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
+.group-page-post-image {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    margin-top: 12px;
+}
+
+.group-page-post-content {
+    margin-bottom: .5rem;
+}
+
+.group-page-post-title {
+    font-size: 1.5rem;
+    font-weight: normal;
+    line-height: 1;
+    margin-bottom: 12px;
+}
+
+.group-page-post-meta-wrap {
+    color: $dark-gray;
+}
+
+.group-page-post-author,
+.group-page-post-postdate {
+    margin-right: .5rem;
+}
+
+/* scroll view */
+
+.group-page.scroll {
+    padding-top: 7rem;
+}
+
+.group-page.scroll .group-page-banner-image-wrap {
+    position: fixed;
+    top: 0;
+    overflow: hidden;
+    height: 70px;
+}
+
+.group-page.scroll .group-page-title {
+    margin-bottom: 0;
+}
+
+.group-page.scroll .group-page-title {
+    font-size: 18px;
+}
+
+.group-page.scroll .group-page-new-post {
+    margin-top: 6px;
+}
+
+.group-page.scroll .group-page-new-post {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.group-page.scroll .group-page-view-switch {
+    position: static;
+    display: inline-block;
+    margin: 6px .5rem 0 0;
+}
+
+.group-page.scroll .btn {
+    padding: 2px 5px;
+}
+
+.group-page li a {
+    text-decoration: none;
+}
+
+.group-page .group-page-feed-view .active {
+    color: $white;
+}
+
+/* 600px */
+
+@media screen and (min-width: 37.5rem) {
+    .group-page-post {
+        margin-bottom: 15px;
+        text-align: left;
+    }
+    .group-page-post-image-wrap {
+        float: left;
+        width: 12%;
+        min-width: 100px;
+        margin-right: 4%;
+    }
+    .group-page-post-content-wrap {
+        float: left;
+        width: 70%;
+    }
+    .group-page.scroll .group-page-view-switch {
+        margin: 6px .5rem 0 0;
+    }
+    .group-page.scroll .group-page-bar {
+        position: fixed;
+        top: 70px;
+        width: 100%;
+        padding: 0 5rem 0 2rem;
+    }
+}
+
+/* 760px */
+
+@media screen and (min-width: 47.5rem) {
+    .group-page-post-content-wrap {
+        width: 70%;
+    }
+    .group-page-bar {
+        text-align: left;
+    }
+    .group-page-title {
+        float: left;
+        margin: 0;
+        padding: 0;
+    }
+    .group-page-new-post {
+        float: right;
+    }
+    .group-page-view-switch {
+        float: right;
+    }
+}
+
+// 900px
+@media screen and (min-width: 56.25rem) {
+  .group-page-post-content-wrap {
+    width: 80%;
+  }
+}
+
+// Group post
+.group-post {
+    width: 980px;
+    margin: auto;
+}
+
+.group-post-meta {
+    margin-bottom: 15px;
+}
+
+.group-post-heading-wrap {
+}
+
+.group-post-title {
+    font-family: $main-font;
+    float: left;
+}
+
+.group-post-avatar-wrap {
+    float: right;
+}
+.group-post-avatar-username-toggle {
+  display: block
+}
+
+.group-post-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+}
+
+.group-post-username {
+    display: none;
+    top: 100%;
+    padding-bottom: 30px;
+    right: 0;
+    left: auto;
+    &:after {
+      border-top-color: transparent;
+      border-bottom-color: rgba(0, 0, 0, 0.85);
+      top: -10px;
+      left: auto;
+      right: 20px;
+      bottom: auto;
+    }
+}
+
+.group-post-postdate {
+    display: inline-block;
+    margin-right: 1rem;
+    clear: both;
+}
+
+
+.group-post-image-wrap {
+    position: relative;
+}
+
+.group-post-image-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.cycle-nav {
+    font-size: 1.2rem;
+    position: absolute;
+    line-height: 2.7rem;
+    z-index: 500;
+    width: 2.5rem;
+    height: 2.5rem;
+    cursor: pointer;
+    -webkit-transition: .3s all;
+    transition: .3s all;
+    text-align: center;
+    opacity: .5;
+    color: $white;
+    border-radius: 50%;
+    background-color: rgba($white, 0.2);
+    &:hover {
+        opacity: 1;
+        background-color: $blue;
+    }
+}
+
+.group-post-cycle-prev {
+    left: 2rem;
+}
+
+.group-post-cycle-next {
+    right: 2rem;
+}
+
+.group-post-content {
+    font-family: $main-font;
+    font-size: .8125rem;
+    margin: 15px 0;
+}
+
+.group-post-attachment-wrap {
+  float: left;
+  width: 90%;
+}
+
+.group-post-attachment-icon {
+    font-size: 1rem;
+    padding: 6px 4px 0 0;
+    float: left;
+}
+
+.group-post-attachments {
+  display: inline-block;
+  padding-left: 0.5rem;
+  float: left;
+  width: 95%;
+   a {
+    margin-bottom: 10px;
+   }
+}
+
+
+.group-post-seen-by {
+    float: right;
+    cursor: pointer;
+    &:hover {
+        .group-post-seen-by-names {
+            display: block;
+        }
+    }
+    .group-post-seen-by-name {
+        display: block;
+        color: #fff;
+    }
+}
+
+.group-post-seen-by-lead {
+    margin-right: 4px;
+}
+
+.group-post-seen-by-names {
+    display: none;
+}
+
+.comments {
+  clear: both
+}
+
+.group-post-respond-comment {
+    width: 100%;
+}
+
+.group-post-comment-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.group-post-comment-wrap {
+    overflow: hidden;
+    margin-bottom: 25px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid $light-gray;
+}
+
+.group-post-comment-avatar {
+    float: left;
+    width: 8%;
+    img {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+    }
+}
+
+.group-post-comment-author {
+    font-size: .9375rem;
+}
+
+.group-post-comment-body {
+    float: left;
+    width: 80%;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/lib/group.css b/app/assets/stylesheets/lib/group.css
new file mode 100644
index 0000000..47e1dc8
--- /dev/null
+++ b/app/assets/stylesheets/lib/group.css
@@ -0,0 +1,2 @@
+body {
+}
\ No newline at end of file
diff --git a/app/views/admin/groups/_group_form.html.erb b/app/views/admin/groups/_group_form.html.erb
index a649d73..dc62166 100644
--- a/app/views/admin/groups/_group_form.html.erb
+++ b/app/views/admin/groups/_group_form.html.erb
@@ -2,6 +2,7 @@
   <%= stylesheet_link_tag "lib/main-forms" %>
   <%= stylesheet_link_tag "lib/fileupload" %>
   <%= stylesheet_link_tag "lib/main-list" %>
+  <%= stylesheet_link_tag "lib/group" %>
   <%= stylesheet_link_tag "select2/select2" %>
   <style>
   .select2-container{
diff --git a/app/views/admin/groups/show.html.erb b/app/views/admin/groups/show.html.erb
index 1853d04..8be8f51 100644
--- a/app/views/admin/groups/show.html.erb
+++ b/app/views/admin/groups/show.html.erb
@@ -1,8 +1,10 @@
 <% content_for :page_specific_css do -%>
-    <%= stylesheet_link_tag "group_page" %>
+    <%= stylesheet_link_tag "group_show" %>
 <% end -%>
-
-<div class="group-page scroll">
+<% content_for :page_specific_javascript do -%>
+    <%= javascript_include_tag "group.js" %>
+<% end -%>
+<div class="group-page">
 <div class="group-page-banner-image-wrap">
   <img class="group-page-banner-image" src="<%= @group.image.url %>" alt="<%= @group.title %>">
   <ul class="group-page-view-switch btn-group">
@@ -39,37 +41,34 @@
 </div>
 
 <script>
-(function($) {
-  $( document ).ready( function() {
+  (function($) {
+    $( document ).ready( function() {
 
-      var doc = document,
-          viewSwitch = doc.querySelector( ".group-page-view-switch" ),
-          bar = doc.querySelector( ".group-page-bar" );
+        var doc = document,
+            viewSwitch = doc.querySelector( ".group-page-view-switch" ),
+            bar = doc.querySelector( ".group-page-bar" );
 
-      if( $( ".group-page" ).hasClass( "scroll" ) ) {
-          $( ".group-page-new-post" ).removeClass( "btn-large" );
-          bar.appendChild( viewSwitch );
+        if( $( ".group-page" ).hasClass( "scroll" ) ) {
+            $( ".group-page-new-post" ).removeClass( "btn-large" );
+            bar.appendChild( viewSwitch );
+        }
+    });
+
+    var group_info_area = $("#group_info_area"),
+        orbit_bar = $("#orbit-bar");
+    $("#group_info_button").on("click",function(){
+      if(!group_info_area.hasClass("expanded")){
+        group_info_area.slideDown();
+        group_info_area.addClass("expanded");
+      }else{
+        group_info_area.slideUp();
+        group_info_area.removeClass("expanded");
       }
-  });
-
-  var group_info_area = $("#group_info_area"),
-      orbit_bar = $("#orbit-bar");
-  $("#group_info_button").on("click",function(){
-    if(!group_info_area.hasClass("expanded")){
-      group_info_area.slideDown();
-      group_info_area.addClass("expanded");
-    }else{
-      group_info_area.slideUp();
-      group_info_area.removeClass("expanded");
-    }
-  })
-
-  $(document).on("scroll",function(){
-    orbit_bar.slideUp();
-  })
-
-}(jQuery));
-
+    })
 
+    $(document).on("scroll",function(){
+      orbit_bar.slideUp();
+    })
 
+  }(jQuery));
 </script>
diff --git a/app/views/admin/groups/showpost.html.erb b/app/views/admin/groups/showpost.html.erb
index 5adc4b3..bff5d2f 100644
--- a/app/views/admin/groups/showpost.html.erb
+++ b/app/views/admin/groups/showpost.html.erb
@@ -1 +1,141 @@
-this is post for <%= params[:id] %>
\ No newline at end of file
+<% content_for :page_specific_css do -%>
+    <%= stylesheet_link_tag "group_show" %>
+<% end -%>
+<% content_for :page_specific_javascript do -%>
+    <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js" %>
+    <%= javascript_include_tag "group.js" %>
+<% end -%>
+
+<article class="group-post">
+  <header class="group-post-meta">
+    <div class="group-post-heading-wrap clearfix">
+      <h2 class="group-post-title">My Awesome Post!</h2>
+      <div class="group-post-avatar-wrap">
+        <a class="group-post-avatar-username-toggle tool-tip-parent" href="#">
+          <img class="group-post-avatar" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="">
+          <span class="group-post-username tool-tip">Isaac</span>
+        </a>
+      </div>
+    </div>
+    
+    <div class="group-post-sub-wrap">
+      <span class="group-post-postdate">
+        <i class="group-post-postdate-icon icon-time"></i> 26 March
+      </span>
+    </div>
+  </header>
+  <section class="group-post-image-wrap">
+    <ul class="group-post-image-list cycle-slideshow" 
+              data-cycle-slides="li" 
+              data-cycle-prev=".group-post-cycle-prev" 
+              data-cycle-next=".group-post-cycle-next" 
+              data-cycle-fx="fade"
+              data-cycle-log="false"
+    > 
+      <li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
+      <li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
+      <li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
+    </ul>
+    <div class="group-post-cycle-prev cycle-nav"><i class="icon-chevron-left"></i></div>
+    <div class="group-post-cycle-next cycle-nav"><i class="icon-chevron-right"></i></div>
+  </section>
+  <section class="group-post-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt repellendus quibusdam vel dignissimos, nihil numquam ex impedit error cupiditate reprehenderit mollitia repudiandae, aliquid aut pariatur suscipit porro voluptatem magnam rem obcaecati nam et iste inventore facere. Recusandae unde natus molestias aut odit soluta quibusdam. Quidem dignissimos natus nobis expedita ea ratione quod cupiditate repellat quis iusto, nulla architecto excepturi a qui, dolores molestiae culpa voluptas! Vitae eum alias fugiat eius ab, aliquid possimus, impedit odit eaque ad magnam, molestiae natus ex. Sed placeat consectetur eveniet culpa accusamus tempora earum unde debitis dolor eum fugit minus perspiciatis veniam id quod voluptate alias minima iure ipsam, natus molestiae. Quas dicta fugit nisi aspernatur, fugiat veniam, aut commodi mollitia quam consequatur aperiam vitae odio itaque tempore error iste tempora corporis nostrum nobis accusamus. Delectus dicta, voluptatibus repellendus? Dolor consequuntur minus, mollitia, quod aspernatur suscipit et quae quam omnis obcaecati laudantium dolore nisi ab!</p>
+  </section>
+  <div class="group-post-attachment-wrap">
+      <i class="group-post-attachment-icon icon-paper-clip"></i>
+      <span class="group-post-attachments">
+        <a href="#" class="btn btn-default">My-Awesome-file</a>
+        <a href="#" class="btn btn-default">My-fantastic-file</a>
+        <a href="#" class="btn btn-default">My-lovely-file</a>
+        <a href="#" class="btn btn-default">My-stunning-file</a>
+        <a href="#" class="btn btn-default">My-Awesome-file</a>
+        <a href="#" class="btn btn-default">My-fantastic-file</a>
+        <a href="#" class="btn btn-default">My-lovely-file</a>
+        <a href="#" class="btn btn-default">My-stunning-file</a>
+      </span>
+  </div>
+  <div class="group-post-seen-by tool-tip-parent">
+    <em class="group-post-seen-by-lead">Seen by: </em>
+    <span class="group-post-seen-by-name">Harry</span>
+    <span class="group-post-seen-by-name">Ika</span>
+    <span class="group-post-seen-by-name">Joshua</span>
+    <span class="group-post-seen-by-name">Mason</span>
+    <span class="group-post-seen-by-name">Tina</span>
+    <span class="group-post-seen-by-name">Shelley</span>
+    <span class="group-post-seen-by-name">Anna</span>
+    <span class="group-post-seen-by-name">Poke</span>
+    <span class="group-post-seen-by-name">Moses</span>
+  </div>
+  <section class="comments">
+    <div class="grou-post-respond">
+      <form action="">
+        <h3 class="group-post-respond-title">
+            Leave a comment
+        </h3>
+        <div class="group-post-respond-wrap">
+          <label for="comment" class="screen-reader">Comment</label>
+          <textarea name="comment" id="comment" class="group-post-respond-comment" cols="100" rows="2" placeholder="Your comment here."></textarea>
+        </div>
+        <div class="grou-post-submit-wrap">
+          <input type="submit" name="submit" class="grou-post-respond-submit btn btn-primary" id="submit" value="Submit Comment">
+        </div>
+      </form>
+    </div>
+
+    <h3 class="group-post-comment-title">
+      Comments
+    </h3>
+    <ol class="group-post-comment-list">
+      <li class="group-post-comment">
+        <div class="group-post-comment-wrap">
+          <div class="group-post-comment-avatar">
+            <img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
+          </div>
+          <div class="group-post-comment-body">
+            <div class="group-post-comment-author-wrap">
+              <div class="group-post-comment-author">Joshua Milton</div>
+              <div class="group-post-comment-time muted">24 March</div>
+            </div>
+            <div class="group-post-comment-content">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
+            </div>
+          </div>
+        </div>
+      </li>
+      <li class="group-post-comment">
+        <div class="group-post-comment-wrap">
+          <div class="group-post-comment-avatar">
+            <img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
+          </div>
+          <div class="group-post-comment-body">
+            <div class="group-post-comment-author-wrap">
+              <div class="group-post-comment-author">Joshua Milton</div>
+              <div class="group-post-comment-time muted">24 March</div>
+            </div>
+            <div class="group-post-comment-content">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
+            </div>
+          </div>
+        </div>
+      </li>
+      <li class="group-post-comment">
+        <div class="group-post-comment-wrap">
+          <div class="group-post-comment-avatar">
+            <img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
+          </div>
+          <div class="group-post-comment-body">
+            <div class="group-post-comment-author-wrap">
+              <div class="group-post-comment-author">Joshua Milton</div>
+              <div class="group-post-comment-time muted">24 March</div>
+            </div>
+            <div class="group-post-comment-content">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
+            </div>
+          </div>
+        </div>
+      </li>
+    </ol>
+  </section>
+</article>
+</div>
\ No newline at end of file
diff --git a/app/views/admin/members/_side_bar.html.erb b/app/views/admin/members/_side_bar.html.erb
index 97539fc..84a36af 100644
--- a/app/views/admin/members/_side_bar.html.erb
+++ b/app/views/admin/members/_side_bar.html.erb
@@ -10,7 +10,7 @@
           <%= link_to( ( content_tag(:span, content_tag(:i, nil, :class => 'icons-user'))), admin_members_path) %>
         <% end -%>
          <%= content_tag :li, :class => active_for_controllers('groups') do -%>
-            <%= link_to( ( content_tag(:span, content_tag(:i, nil, :class => 'icons-layout'))), admin_groups_path) %>
+            <%= link_to( ( content_tag(:span, content_tag(:i, nil, :class => 'icon-group'))), admin_groups_path) %>
           <% end -%>
         <% if (current_user.is_admin? rescue false) %>
           <%= content_tag :li, :class => active_for_controllers('plugins') do -%>
diff --git a/app/views/admin/members/edit.html.erb b/app/views/admin/members/edit.html.erb
index 5dc3ec9..fc8c666 100644
--- a/app/views/admin/members/edit.html.erb
+++ b/app/views/admin/members/edit.html.erb
@@ -4,6 +4,7 @@
     <%= stylesheet_link_tag "lib/main-forms.css" %>
     <%= stylesheet_link_tag "lib/fileupload.css" %>
     <%= stylesheet_link_tag "lib/togglebox.css" %>
+    <%= stylesheet_link_tag "lib/group.css" %>
 <% end -%>
 <% content_for :page_specific_javascript do -%>
     <%= javascript_include_tag "lib/jquery-ui-1.10.3.custom.min.js" %>
@@ -16,7 +17,6 @@
     <%= javascript_include_tag "lib/member/role-forms.js" %>
 <% end -%>
 
-
 <%= form_for @member, :url => admin_member_path(@member), :html => { :multipart => true , :class=>"form-horizontal main-forms", :id=>"user-forms"} do |f| %>
   <%= f.error_messages %>