diff --git a/app/assets/javascripts/desktop/journal_pages.js.erb b/app/assets/javascripts/desktop/journal_pages.js.erb
index 829115844..a3880accd 100644
--- a/app/assets/javascripts/desktop/journal_pages.js.erb
+++ b/app/assets/javascripts/desktop/journal_pages.js.erb
@@ -282,15 +282,17 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
          })
           $("div[container=true]").unbind(".editype").on("click.edittype", "a.bt-edit-type", function(){
              var parent = $(this).parent().parent();
+             parent.find('.list_item_function').hide();
           $.ajax({
               url : $(this).attr("href"),
               type : "get",
               success : function(data){
-                var prev_data = parent.find("td.form_space").html();
-                parent.find("td.form_space").html(data);
+                var prev_data = parent.find(".form_space").html();
+                parent.find(".form_space").html(data);
                 $(".bt-cancel-type").click(function(){
-                  parent.find("td.form_space").html(prev_data);
-                })
+                  parent.find(".form_space").html(prev_data);
+                  parent.find('.list_item_function').show();
+                });
               }
             })
             return false;
@@ -361,7 +363,7 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
   this.initializeJournalPapers.coauthorRelationForm = function(data){
     if(data.success){
         o.notify(data.msg,"success");
-        $("#co_author_relation_table tbody").html(data.newvalue);
+        $("#co_author_relation_table").html(data.newvalue);
       }else{
         o.notify(data.msg,"alert");
     }
@@ -369,7 +371,7 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
   this.initializeJournalPapers.coauthorRelationEditForm = function(data){
     if(data.success){
         o.notify(data.msg,"success");
-        $("#co_author_relation_table tbody").html(data.newvalue);
+        $("#co_author_relation_table").html(data.newvalue);
       }else{
         o.notify(data.msg,"alert");
     }
diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css
index 465430131..48fd709cc 100644
--- a/app/assets/stylesheets/desktopmain.css
+++ b/app/assets/stylesheets/desktopmain.css
@@ -126,7 +126,7 @@ a:focus { outline: none; }
 .ini_input {
 	margin: 0;
 	padding: 0;
-	border: none;
+	border: 0;
 	}
 .ini_input:focus { outline: none; }
 #search_app { 
@@ -293,7 +293,7 @@ a:focus { outline: none; }
 	position: relative;
 	z-index: 9;
 }
-.toolbar .sdm, .toolbar .fn_g { display: inline-block; }
+.toolbar .sdm, .toolbar .fn_g { display: inline-block; vertical-align: top; }
 .toolbar .sdm_o { top: 36px; background-color: #f0f0f0; }
 .toolbar button {
 	border: none;
@@ -306,6 +306,7 @@ a:focus { outline: none; }
 }
 .toolbar .fn_btn {
 	display: inline-block;
+	vertical-align: top;
 }
 
 /* Setting Page */
@@ -815,6 +816,38 @@ a:focus { outline: none; }
 	line-height: 24px;
 	color: #333;
 }
+/* Journal Co-Author Relationship*/
+#co_author_relation_table .s_grid_con {
+	float: left;
+	width: 346px;
+	height: 456px;
+	margin-left: 12px;
+	padding-left: 12px;
+	border-left: solid 1px #EEE;
+}
+#co_author_relation_table .s_grid_con:first-child {
+	margin-left: 0;
+	padding-left: 0;
+	border: 0;
+}
+#co_author_relation_table .s_grid_row {
+	width: auto;
+	height: 64px;
+}
+#co_author_relation_table .edit_co_author_relation {
+	margin-left: -10px;
+}
+#co_author_relation_table .list_item_function a {
+	display: inline-block;
+	padding: 4px;
+	font-family: Arial, sans-serif;
+	font-size: 11px;
+}
+#co_author_relation_table .form_space {
+	margin-bottom: 10px;
+	font-size: 15px;
+	font-family: Arial, sans-serif;
+}
 
 /* App */
 .app_frame {
diff --git a/app/views/desktop/co_author_relations/_form.html.erb b/app/views/desktop/co_author_relations/_form.html.erb
index 11a2944f7..83be814ef 100644
--- a/app/views/desktop/co_author_relations/_form.html.erb
+++ b/app/views/desktop/co_author_relations/_form.html.erb
@@ -1,5 +1,5 @@
-<%= f.text_field :relation %>
-<%= f.submit "Save" %>
+<%= f.text_field :relation, class: "ini_input" %>
+<%= f.submit "Save", class: "ini_input hp hh2 thmtxt thmc2", style: "margin-left: 10px;" %>
 <% if not @co_author_relation.new_record? %>
-  <%= submit_tag "Cancel", :type => "button", class: "bt-cancel-type" %>
-<% end %>
\ No newline at end of file
+  <%= submit_tag "Cancel", :type => "button", class: "bt-cancel-type ini_input hp hh2 thmtxt" %>
+<% end %>
diff --git a/app/views/desktop/co_author_relations/_show_form.html.erb b/app/views/desktop/co_author_relations/_show_form.html.erb
index 9b478f900..a5d931a02 100644
--- a/app/views/desktop/co_author_relations/_show_form.html.erb
+++ b/app/views/desktop/co_author_relations/_show_form.html.erb
@@ -1,7 +1,17 @@
-  <% @co_author_relations.each do |co_author_relation| %>
-  <tr>
-    <td class="form_space"><%= co_author_relation.relation %></td>
-    <td><%= link_to 'Edit', edit_desktop_co_author_relation_path(co_author_relation), :class => "bt-edit-type" %></td>
-    <td><%= link_to 'Destroy', desktop_co_author_relation_path(co_author_relation), confirm: 'Are you sure?', method: :delete, :class=>"bt-delete" %></td>
-  </tr>
-  <% end %>
+  <% @co_author_relations.each_with_index do |co_author_relation,i| %>
+  <% if ( i % 6 ) == 0 %>
+  <div class="s_grid_con s_form">
+          <ul>
+            <% end %>
+            <li class="s_grid_row">
+    			<div class="form_space"><%= co_author_relation.relation %></div>
+			    <div class="list_item_function">
+			    	<%= link_to 'Edit', edit_desktop_co_author_relation_path(co_author_relation), :class => "bt-edit-type admbg2 admtxt" %>
+			    	<%= link_to 'Destroy', desktop_co_author_relation_path(co_author_relation), confirm: 'Are you sure?', method: :delete, :class=>"bt-delete admbg2 admtxt" %>
+			    </div>
+			    </li>
+            <% if ( i % 6 ) == 5 %>
+          </ul>
+          </div>
+        <% end %>
+  <% end %>
\ No newline at end of file
diff --git a/app/views/desktop/co_author_relations/index.html.erb b/app/views/desktop/co_author_relations/index.html.erb
index cc37e6a52..d457cbee2 100644
--- a/app/views/desktop/co_author_relations/index.html.erb
+++ b/app/views/desktop/co_author_relations/index.html.erb
@@ -1,17 +1,22 @@
-<h1>Listing co_author_relations</h1>
+<div class="toolbar hh2">
+  <div class="fn_g hp">
+  	<div class="hh2 sdm">
+    <div class="sdm_t hp hh2 thmc2 thmtxt">Create</div>
+    <div class="admbg sdm_o">
+      <ul>
+        <li class="vp hp s_form" style="width:282px;"><%= render 'new' %></li>
+      </ul>
+    </div>
+  </div>
+  	<%= submit_tag "Back", :type => "button", class: "bt-cancel fn_btn ini_input hp hh2 thmtxt" %>
+  </div>
+</div>
 
-<%= submit_tag "Back", :type => "button", class: "bt-cancel fn_btn hh2 thmc2 thmtxt" %>
-<%= render 'new' %>
-
-<table id="co_author_relation_table">
-<thead>
-  <tr>
-    <th>Relation</th>
-    <th></th>
-    <th></th>
-  </tr>
-</thead>
-<tbody>
+<div id="co_author_relation_table" class="tinycanvas vp">
+  <div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+  <div class="viewport">
+    <div class="overview">
     <%= render :partial => 'show_form'%>
-</tbody>
-</table>
+	</div>
+</div>
+</div>