diff --git a/app/components/pagination_component.rb b/app/components/pagination_component.rb
index 61d33ee..1fb9ea7 100644
--- a/app/components/pagination_component.rb
+++ b/app/components/pagination_component.rb
@@ -10,4 +10,12 @@ class PaginationComponent < BaseComponent
 
     Cdao::Subject.where(id: opts[:subject_ids].map(&:to_i))
   end
+
+  def custom_url(id)
+    return search_doctrines_path(is_index_table: true, subject_ids: [id]) if opts[:is_index_table].present? && opts[:is_index_table].to_s.eql?("true")
+    return search_doctrines_path( is_index_table: false, subject_ids: [id]) if opts[:is_index_table].present? && opts[:is_index_table].to_s.eql?("false")
+
+    search_doctrines_path(id)
+  end
+  
 end
diff --git a/app/components/pagination_component/pagination_component.html.erb b/app/components/pagination_component/pagination_component.html.erb
index a6d80f5..37e8bfa 100644
--- a/app/components/pagination_component/pagination_component.html.erb
+++ b/app/components/pagination_component/pagination_component.html.erb
@@ -1,33 +1,30 @@
-<div class="col col-md-12">
-  <header class="header bg-white b-b clearfix">
-    <div class="row m-t-sm align-items-end pagination-body">
-      <div class="col-md-6 mb-0<%=opts[:is_subject_breadcrums].present? && subjects.present? ? '' : ' ps-0' %> ">
-        <% if opts[:is_subject_breadcrums].present? && subjects.present? %>
-          <ol class="breadcrumb mb-0">
-            <% subjects.each do |subject| %>
-              <% subject.ancestors.each do |ancestor| %>
-                <li class="breadcrumb-item d-inline-flex"> 
-                  <h4> <%= link_to ancestor.name, subject_index_path(ancestor), class: "text-decoration-none" %> </h4> 
-                </li>
-              <% end %> 
-
-              <li class="breadcrumb-item d-inline-flex active"> 
-                <h4> <%= subject.name %> </h4> 
-              </li> 
-            <% end %>
-          </ol>
-        <% else %>
-          <h4 style="color: darkred" class="m-0">Search Results</h4>
-          <small style="color: darkred">
-            <%= page_entries_info data, entry_name: 'records' if data.present? %>
-          </small>
-        <% end %>
-      </div>
-      <div class="col-md-6 position-relative">
-        <div class="text-center pagination justify-content-end">
-          <%= (paginate data) if data.present? %>
-        </div>
+<header class="header bg-white b-b clearfix">
+  <div class="row m-t-sm align-items-end pagination-body">
+    <div class="<%=data.present? ? "col-md-8  mb-0 " : "col-md-12 mb-0"%>">
+      <% if opts[:is_subject_breadcrums].present? && subjects.present? %>
+        <ol class="breadcrumb mb-0">
+          <% subjects.each do |subject| %>
+            <% subject.ancestors.each do |ancestor| %>
+              <li class="breadcrumb-item d-inline-flex"> 
+                <h4 class="label-breadcrumb"> <%= link_to ancestor.name, custom_url(ancestor.id), class: "text-decoration-none" %> </h4> 
+              </li>
+            <% end %> 
+            <li class="breadcrumb-item d-inline-flex active"> 
+              <h4> <%= subject.name %> </h4> 
+            </li> 
+          <% end %>
+        </ol>
+      <% else %>
+        <h4 style="color: darkred" class="m-0">Search Results</h4>
+        <small style="color: darkred">
+          <%= page_entries_info data, entry_name: 'records' if data.present? %>
+        </small>
+      <% end %>
+    </div>
+    <div class="<%=data.present? ? "col-md-4 position-relative" : "d-none"%>">
+      <div class="text-center pagination justify-content-end">
+        <%= (paginate data) if data.present? %>
       </div>
     </div>
-  </header>
-</div>
+  </div>
+</header>
diff --git a/app/javascript/src/application/pagination.scss b/app/javascript/src/application/pagination.scss
index e1915f9..f1e6c09 100644
--- a/app/javascript/src/application/pagination.scss
+++ b/app/javascript/src/application/pagination.scss
@@ -3,7 +3,20 @@
   }
   
 .pagination-body .pagination span.page-item.page.current.page-link {
-border: darkred;
-background: darkred !important;
-color: #fff !important;
+  border: darkred;
+  background: darkred !important;
+  color: #fff !important;
+}
+
+.label-breadcrumb a {
+  color: #1d1a1a;
+  font-size: 20px;
+}
+
+.label-breadcrumb a:hover {
+  color: darkred;
+}
+
+.breadcrumb-item.active h4 {
+  color: darkred !important;
 }
\ No newline at end of file
diff --git a/app/views/doctrines/search.html.erb b/app/views/doctrines/search.html.erb
index a7a5b61..2ca4a61 100644
--- a/app/views/doctrines/search.html.erb
+++ b/app/views/doctrines/search.html.erb
@@ -1,6 +1,6 @@
 <div class="container-fluid mt-1 p-0 doctrine-index-body"> 
-  <div class="container m-2 ps-0"> <%= render PaginationComponent.new(data: @doctrines, opts: { is_subject_breadcrums: true, subject_ids: params[:subject_ids] }) %> </div>
-  <hr class="mt-0"/>
+  <div class="container-fluid m-2 p-0"> <%= render PaginationComponent.new(data: @doctrines, opts: { is_subject_breadcrums: true, subject_ids: params[:subject_ids], is_index_table: params[:is_index_table] }) %> </div>
+  <hr class="mt-0"/>  
   <% if params[:is_index_table].to_s.eql?("true") %>
     <div class="card-body col-sm-12 tableFixHead p-0 mt-1">
       <%= render(DoctrineIndexTableComponent.new(current_user: current_user, search_results: @doctrines)) %>