diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb
index a0c8e1a..fa2fd91 100644
--- a/app/components/sidenav_component/sidenav_component.html.erb
+++ b/app/components/sidenav_component/sidenav_component.html.erb
@@ -89,14 +89,14 @@
               </li>
               <li class="nav-item p-2">
                 <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" 
-                   data-controller="subjects" data-accordion-for="subjects" data-accordion-target="#subjectsAccordionBody" 
+                   data-controller="subjects" data-accordion-for="subjects" data-accordion-target="#subjectsOffCanvasAccordionBody" 
                    data-action="click->subjects#loadSubjectsAccordion">
                   <i class="fas fa-indent me-2"></i> Subjects
                 </a>
               </li>
               <li class="nav-item p-2">
                 <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#doctrinesOffCanvas" 
-                   data-controller="subjects" data-accordion-for="doctrines" data-accordion-target="#doctrinesAccordionBody" 
+                   data-controller="subjects" data-accordion-for="doctrines" data-accordion-target="#doctrinesOffCanvasAccordionBody" 
                    data-action="click->subjects#loadSubjectsAccordion">
                   <i class="fas fa-book me-2"></i> Doctrines
                 </a>
diff --git a/app/components/subject_accordion_component.rb b/app/components/subject_accordion_component.rb
index 45d10ca..ecd2501 100644
--- a/app/components/subject_accordion_component.rb
+++ b/app/components/subject_accordion_component.rb
@@ -22,8 +22,9 @@ class SubjectAccordionComponent < BaseComponent
   end
 
   def accordion_body_id
-    accordion_body = opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("subjects") ? "subjectsAccordionBody" : "doctrinesAccordionBody"
+    return ["subjectsAccordionBody", search_result["id"]].join if opts[:accordionFor].blank?
 
+    accordion_body = opts[:accordionFor].to_s.eql?("subjects") ? "subjectsOffCanvasAccordionBody" : "doctrinesOffCanvasAccordionBody"
     [accordion_body, search_result["id"]].join
   end
 
@@ -31,7 +32,7 @@ class SubjectAccordionComponent < BaseComponent
     return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: true) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("subjects")
     return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: false) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("doctrines")
 
-    return subject_index_path(search_result["id"]).blank?
+    subject_index_path(search_result["id"])
   end
 end
   
\ No newline at end of file
diff --git a/app/components/subject_accordion_component/subject_accordion_component.html.erb b/app/components/subject_accordion_component/subject_accordion_component.html.erb
index 4149cf0..b68cdf5 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -1,26 +1,56 @@
-<div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
-  <div class="accordion-item">
-    <div class="accordion-header d-flex justify-content-between">
-      <% if search_result["has_children?"].present? %>
-        <div class="accordion-button collapsed m-0 p-0 sub-label<%= search_result["heirarchy_level"] + 1 %>" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
-             data-controller="subjects" data-accordion-id="<%= children_accordion_id %>" 
-             data-accordion-for="<%= opts[:accordionFor] %>" data-subject-parent-id="<%= search_result["id"] %>" 
-             data-accordion-target="#<%= accordion_body_id %>" data-action="click->subjects#loadSubjectsAccordion"> 
-          <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark  d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
+<% if opts[:accordionFor].present? %>
+  <div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
+    <div class="accordion-item">
+      <div class="accordion-header d-flex justify-content-between">
+        <% if search_result["has_children?"].present? %>
+          <div class="accordion-button collapsed m-0 p-0 sub-label<%= search_result["heirarchy_level"] + 1 %>" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
+              data-controller="subjects" data-accordion-id="<%= children_accordion_id %>" 
+              data-accordion-for="<%= opts[:accordionFor] %>" data-subject-parent-id="<%= search_result["id"] %>" 
+              data-accordion-target="#<%= accordion_body_id %>" data-action="click->subjects#loadSubjectsAccordion"> 
+            <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
+          </div>
+        <% else %>
+          <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
+        <% end %>
+      </div>
+
+      <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
+        <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-1" id="<%= accordion_body_id %>">
+          <div class="text-center">
+            <div class="spinner-border text-danger" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
         </div>
-      <% else %>
-        <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
-      <% end %>
+      </div>
     </div>
+  </div>
+<% else %>
+  <div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
+    <div class="accordion-item">
+      <div class="accordion-header d-flex justify-content-between">
+        <% if search_result["has_children?"].present? %>
+          <div class="accordion-button collapsed m-0 p-0 sub-label<%= search_result["heirarchy_level"] + 1 %>" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
+              data-controller="subjects" data-accordion-id="<%= children_accordion_id %>" data-subject-parent-id="<%= search_result["id"] %>" 
+              data-accordion-target="#<%= accordion_body_id %>" data-action="click->subjects#loadSubjectsAccordion"> 
+            <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
+            <%= link_to "Add Sub Level", new_subject_index_path(parent_id: search_result["id"]), class: "btn btn-success text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
+          </div>
+        <% else %>
+          <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub#{search_result["heirarchy_level"] + 1} clickable-link" %>
+          <%= link_to "Add Sub Level", new_subject_index_path(parent_id: search_result["id"]), class: "btn btn-success text-decoration-none d-block sub#{search_result["heirarchy_level"]} clickable-link position-absolute end-0 me-5" %>
+        <% end %>
+      </div>
 
-    <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
-      <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-1" id="<%= accordion_body_id %>">
-        <div class="text-center">
-          <div class="spinner-border text-danger" role="status">
-            <span class="visually-hidden">Loading...</span>
+      <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
+        <div class="accordion-body pt-1 sub-body<%= search_result["heirarchy_level"] + 1 %> pb-1" id="<%= accordion_body_id %>">
+          <div class="text-center">
+            <div class="spinner-border text-danger" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 346eec0..57c5595 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,8 +14,8 @@
   <body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize">
     <%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%>
 
-    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Subjects", element_id: "subjectsOffCanvas", accordion_body_id: "subjectsAccordionBody" })) %>
-    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesAccordionBody" })) %>
+    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Subjects", element_id: "subjectsOffCanvas", accordion_body_id: "subjectsOffCanvasAccordionBody" })) %>
+    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesOffCanvasAccordionBody" })) %>
 
     <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
       <div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">
diff --git a/app/views/subject_indexes/index.html.erb b/app/views/subject_indexes/index.html.erb
index 65f9df3..b5bf9cb 100644
--- a/app/views/subject_indexes/index.html.erb
+++ b/app/views/subject_indexes/index.html.erb
@@ -2,14 +2,16 @@
 	<div class="col-sm-12">
 		<div class="card">
 			<div class="card-header"> <h2> Subjects </h2> </div>
-
 			<div class="card-body">
 				<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
 					<div class="accordion accordion-flash" id="mainPanel<%= root.id %>">
 						<div class="accordion-item">
 							<div class="accordion-header d-flex justify-content-between">
 								<% if root.children.present? %>
-									<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"> 
+									<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"
+											 data-controller="subjects" data-accordion-id="<%= ["subjectsAccordion", root.id].join %>" 
+											 data-subject-parent-id="<%= root.id %>" data-accordion-target="#<%= ['subjectsAccordionBody', root.id].join %>"
+											 data-action="click->subjects#loadSubjectsAccordion"> 
 										<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
 										<%= link_to "Add Sub Level", new_subject_index_path(parent_id: root.id), class: "btn btn-success text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
 									</div>
@@ -20,7 +22,12 @@
 							</div>
 
 							<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
-								<div class="accordion-body pt-1 pb-1">
+								<div class="accordion-body pt-1 pb-1" id="<%= ['subjectsAccordionBody', root.id].join %>">
+									<div class="text-center">
+										<div class="spinner-border text-danger" role="status">
+											<span class="visually-hidden">Loading...</span>
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>