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..8081780 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -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..de5215a 100644
--- a/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
+++ b/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
@@ -1,4 +1,4 @@
-<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>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
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..9996861
--- /dev/null
+++ b/app/javascript/src/application/offcanvas.scss
@@ -0,0 +1,22 @@
+.offcanvas-contents {
+    width: auto !important;
+    min-width: 400px !important;
+}
+
+.offcanvas-contents .accordion, .accordion-item {
+    border: none !important;
+}
+
+.offcanvas-contents .accordion-button:not(.collapsed) {
+    color: #0c63e4;
+    background-color: #fff;
+    box-shadow: none;
+}
+
+
+.sub-body1{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+    max-width: 500px;
+}