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 faddf8f..4149cf0 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -2,11 +2,11 @@
   <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" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>" 
+        <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" %>
+          <%= 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" %>
@@ -14,7 +14,7 @@
     </div>
 
     <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
-      <div class="accordion-body pt-1 pb-1" id="<%= accordion_body_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>
diff --git a/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb b/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
index c806556..44e1a70 100644
--- a/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
+++ b/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
@@ -1,6 +1,7 @@
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="<%= opts[:element_id] %>" data-controller="subjects">
+<div class="offcanvas offcanvas-start offcanvas-contents" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="<%= opts[:element_id] %>" data-controller="subjects">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title">Subjects</h5>
+    <h5 class="offcanvas-title"> <%=opts[:header_title]%> </h5>
+    <hr class="m-0">
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
 
diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss
index 6689515..8e7c3e6 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -5,6 +5,7 @@
 @import "./application/table";
 @import "./application/nav-bar";
 @import "./application/document-search";
+@import "./application/offcanvas";
 
 .tableFixHead { 
     overflow: auto;
diff --git a/app/javascript/src/application/offcanvas.scss b/app/javascript/src/application/offcanvas.scss
new file mode 100644
index 0000000..3480cd6
--- /dev/null
+++ b/app/javascript/src/application/offcanvas.scss
@@ -0,0 +1,121 @@
+.offcanvas-contents {
+    width: auto !important;
+    min-width: 400px !important;
+    box-shadow: 0 0 15px -5px #000 !important;
+}
+
+.offcanvas-contents .accordion, .accordion-item {
+    border: none !important;
+}
+
+.offcanvas-contents .accordion-button:not(.collapsed) {
+    background-color: #fff;
+    a {
+        color: darkred !important;
+        font-weight: 600;
+    }
+}
+
+// .for-body-grid.sub-body1{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 500px;
+//     padding-left: 10px !important;
+// }
+
+// .for-body-grid.sub-body2{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 600px;
+//     padding-left: 20px!important;
+// }
+
+// .for-body-grid.sub-body3{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 700px;
+//     padding-left: 30px!important;
+// }
+
+// .for-body-grid.sub-body4{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 800px;
+//     padding-left: 40px!important;
+// }
+
+// .for-body-grid.sub-body5{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 900px;
+//     padding-left: 50px!important;
+// }
+
+// .for-body-grid.sub-body6{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 1000px;
+//     padding-left: 60px!important;
+// }
+
+// .for-body-grid.sub-body7{
+//     display: grid;
+//     grid-template-columns: 1fr 1fr;
+//     column-gap: 10px;
+//     max-width: 1000px;
+//     padding-left: 70px!important;
+// }
+
+.sub-body1{
+    width: auto;
+    max-width: 1000px;
+    padding-left: 10px !important;
+}
+
+.sub-body2{
+    width: auto;
+    max-width: 1000px;
+    min-width: 400px;
+    padding-left: 20px!important;
+}
+
+.sub-body3{
+    width: auto;
+    max-width: 800px;
+    padding-left: 30px!important;
+}
+
+.sub-body4{
+    width: auto;
+    max-width: 800px;
+    padding-left: 40px!important;
+}
+
+.sub-body5{
+    width: auto;
+    max-width: 900px;
+    padding-left: 50px!important;
+}
+
+.sub-body6{
+    width: auto;
+    max-width: 1000px;
+    padding-left: 60px!important;
+}
+
+.sub-body7{
+    width: auto;
+    max-width: 1000px;
+    padding-left: 70px!important;
+}
+
+.offcanvas-header {
+    border-bottom: 1px solid #0000004d;
+    color: #00000099 !important;
+}
diff --git a/app/javascript/src/application/sidenav.scss b/app/javascript/src/application/sidenav.scss
index 5346530..d0fea0e 100644
--- a/app/javascript/src/application/sidenav.scss
+++ b/app/javascript/src/application/sidenav.scss
@@ -197,33 +197,47 @@
 }
 
 .sub1 {
-  padding-left: 22px;
-  padding-top: 10px;
+  padding-left: 10px;
+  font-weight: 500;
+  padding-right: 10px;
   padding-bottom: 10px;
+  font-size: 1.1rem;
 }
 
 .sub2 {
-  padding-left: 40px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sub3 {
-  padding-left: 60px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sub4  {
-  padding-left: 80px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sub5  {
-  padding-left: 100px;
-  padding-top: 10px;
+  padding-left: 10px;
   padding-bottom: 10px;
+  padding-right: 10px;
+}
+
+.sub6  {
+  padding-left: 10px;
+  padding-bottom: 10px;
+  padding-right: 10px;
+}
+
+.sub7  {
+  padding-left: 10px;
+  padding-bottom: 10px;
+  padding-right: 10px;
 }
 
 .sidebar-body {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 77ed9c2..346eec0 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, element_id: "subjectsOffCanvas", accordion_body_id: "subjectsAccordionBody" })) %>
-    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, 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: "subjectsAccordionBody" })) %>
+    <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true, header_title: "Doctrines", element_id: "doctrinesOffCanvas", accordion_body_id: "doctrinesAccordionBody" })) %>
 
     <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' %>">