diff --git a/app/javascript/src/application/pagination.scss b/app/javascript/src/application/pagination.scss
index f1e6c09..29fc6a4 100644
--- a/app/javascript/src/application/pagination.scss
+++ b/app/javascript/src/application/pagination.scss
@@ -19,4 +19,13 @@
 
 .breadcrumb-item.active h4 {
   color: darkred !important;
+}
+
+.subject-index-body-show h4 a {
+  color: #1d1a1a !important;
+  font-size: 20px !important;
+}
+
+.subject-index-body-show h4 a:hover {
+  color: darkred !important;
 }
\ No newline at end of file
diff --git a/app/views/subject_indexes/show.html.erb b/app/views/subject_indexes/show.html.erb
index bb62866..4818332 100644
--- a/app/views/subject_indexes/show.html.erb
+++ b/app/views/subject_indexes/show.html.erb
@@ -1,5 +1,5 @@
 <div>
-  <div class="card-header" style="border-bottom: 1px solid darkred;"> 
+  <div class="card-header pb-0" style="border-bottom: 1px solid darkred;"> 
     <div class="row">
       <div class="col-sm-10">
         <% if @subject_index.is_root? %>
@@ -9,11 +9,11 @@
             </li> 
           </ol>
         <% else %>
-          <ol class="breadcrumb">
+          <ol class="breadcrumb subject-index-body-show mb-0">
             <% @subject_index.ancestors.each do |ancestor| %>
               <li class="breadcrumb-item d-inline-flex"> 
-                <h4> <%= link_to ancestor.name, search_doctrines_path(subject_ids: [ancestor.id]) %> </h4> 
-              </li>
+                <h4> <%= link_to ancestor.name, subject_index_path(ancestor.id), class: "text-decoration-none text-black" %> </h4> 
+                </li>
             <% end %>
 
             <li class="breadcrumb-item d-inline-flex active"> 
@@ -23,8 +23,8 @@
         <% end %>
       </div>
 
-      <div class="col-sm-2 d-flex justify-content-end ">
-        <a class="btn btn-secondary me-3 btn-sm" href="<%= edit_subject_index_path(@subject_index) %>"> Edit </a>
+      <div class="col-sm-2 d-flex justify-content-end align-items-center pe-0">
+        <a class="btn btn-secondary me-3 btn-sm mb-1" href="<%= edit_subject_index_path(@subject_index) %>"> Edit </a>
         
         <% if !@subject_index.has_children? %>
           <a class="btn btn-danger btn-sm" href="<%= subject_index_path(@subject_index) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
@@ -34,13 +34,13 @@
   </div>
   <div class="card-body">
     <div>
-      <div class="card-header" style="border-bottom: 1px solid darkred;">
+      <div class="" style="border-bottom: 1px solid #b2b2b2;">
         <div class="row">
-          <div class="col-sm-11"> <h4 class="mb-0"> Sub Levels </h4> </div>
-          <div class="col-sm-1 d-flex justify-content-end align-items-end"> <a class="btn btn-success p-1 btn-sm ps-3 pe-3" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
+          <div class="col-sm-11"> <h5 class="mb-0"> Sub Levels </h5> </div>
+          <div class="col-sm-1 d-flex justify-content-end align-items-end"> <a class="btn btn-success p-1 btn-sm ps-3 pe-3 mb-1" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
         </div>
       </div>
-      <div class="card-body">
+      <div class="card-body subject-body-index" style="position: relative;">
 				<div class="accordion accordion-flush subject-index-body" id="mainPanelBody" >
 					<% @subject_index.children.order(name: :asc).each do |root| %>
 						<div class="accordion-item">