diff --git a/app/components/doctrine_index_component/doctrine_index_component.html.erb b/app/components/doctrine_index_component/doctrine_index_component.html.erb
index 203832a..a6a7a15 100644
--- a/app/components/doctrine_index_component/doctrine_index_component.html.erb
+++ b/app/components/doctrine_index_component/doctrine_index_component.html.erb
@@ -1,4 +1,4 @@
-<div class="row-flex m-3 mt-0 doctrine-content-body clickable-link" href="<%= jurisprudence.present? ? document_doctrine_path(jurisprudence.id, id, is_index_table: false, section_ids: opts[:subject_ids].reject(&:blank?)) : doctrine_path(id, is_index_table: false)%>">
+<div class="row-flex m-3 mt-0 doctrine-content-body clickable-link" href="<%= jurisprudence.present? ? document_doctrine_path(jurisprudence.id, id, is_index_table: false, subject_ids: opts[:subject_ids].reject(&:blank?)) : doctrine_path(id, is_index_table: false)%>">
   <% if opts[:subject_ids].reject(&:blank?).present? %>
     <h5 style="color: darkred;"> <%= subjects.where(id: opts[:subject_ids].map(&:to_i)).map(&:lineage_name).join("") %> </h5>
   <% else %>
diff --git a/app/views/document/doctrines/show.html.erb b/app/views/document/doctrines/show.html.erb
index ab57f60..ad2ef0f 100644
--- a/app/views/document/doctrines/show.html.erb
+++ b/app/views/document/doctrines/show.html.erb
@@ -1,20 +1,43 @@
-<div class="card mt-1 g-3">
-  <div class="card-header mb-0 col-sm-12">
-    <table class="table table-borderless mb-0">
-      <tbody>
-        <tr>
-          <td class="text-start" style="width: 160px;"> Reference Number: </td>
-          <td class="text-start"> <strong> <%= @document.reference_number %> </strong> </td>
-          <td class="text-end" style="width: 50px;" > Date: </td>
-          <td class="text-end" style="width: 160px;"> <strong> <%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </strong> </td>
-        </tr>
+<div class="card mt-1 g-3" style="width: 98%; margin: 0 auto;">
+  <div class="card-header mb-0 p-0">
+    <div class="container-fluid p-2 card-header">
+      <div class="row">
+        <div class="col-lg-12"> 
+          <div class="row">
+            <div class="col-lg-6">
+              <a href="<%= search_doctrines_path(is_index_table: params[:is_index_table], subject_ids: params[:subject_ids] )%>"> <i class="fas fa-angle-double-left" style="font-size: 20px;color: darkred;" data-bs-toggle="tooltip" data-bs-placement="right" title="Back to index"></i> </a>
+            </div>
+            <div class="col-lg-3 text-end"> 
+            <b>Date : </b>
+            </div>
+            <div class="col-lg-3 text-end"> 
+              <b><%= @document.docdate.present? ? @document.docdate.strftime("%m/%d/%Y") : @document.year %> </b>
+            </div>
+          </div>
+        </div>
 
-        <tr>
-          <td style="width: 160px;" class="text-start"> Title: </td>
-          <td colspan="3" class="text-start"> <strong> <%= @document.title %> </strong> </td>
-        </tr>
-      </tbody>
-    </table>
+        <div class="col-lg-12 mt-2 mb-2"> 
+          <div class="row"> 
+            <div class="col-lg-3"> 
+              Reference Number :
+            </div>
+            <div class="col-lg-9"> 
+              <b><%= @document.reference_number %></b>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-12  mb-2"> 
+          <div class="row">
+            <div class="col-lg-3"> 
+              Title : 
+            </div>
+            <div class="col-lg-9"> 
+            <strong> <%= @document.short_title || @document.title %> </strong> 
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="card-body pt-0">