diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb
index 8cc7953..2a1cab6 100644
--- a/app/components/sidenav_component/sidenav_component.html.erb
+++ b/app/components/sidenav_component/sidenav_component.html.erb
@@ -88,10 +88,14 @@
                 <%= link_to '<i class="fas fa-search me-2"></i>Search'.html_safe, documents_path, class: "nav-link"  %>
               </li>
               <li class="nav-item p-2">
-                <%= link_to '<i class="fas fa-indent me-2"></i> Subjects'.html_safe, "#", class: "nav-link" %>
+                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" data-controller="subjects">
+                  <i class="fas fa-indent me-2"></i> Subjects
+                </a>
               </li>
               <li class="nav-item p-2">
-                <%= link_to ' <i class="fas fa-book me-2"></i> Doctrines'.html_safe, "#", class: "nav-link"%>
+                <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas">
+                  <i class="fas fa-book me-2"></i> Doctrines
+                </a>
               </li>
               <li class="nav-item p-2">
                 <%= link_to '<i class="fas fa-map-signs me-2"></i> Desicions'.html_safe, decisions_path, class: "nav-link" %>
diff --git a/app/components/subject_accordion_component.rb b/app/components/subject_accordion_component.rb
index 20b2f3f..187ae62 100644
--- a/app/components/subject_accordion_component.rb
+++ b/app/components/subject_accordion_component.rb
@@ -1,8 +1,10 @@
 class SubjectAccordionComponent < BaseComponent
-    attr_reader :parent
+    attr_reader :parent, :subjects, :opts
   
-    def initialize(current_user:, parent:)
+    def initialize(current_user:, parent:, subjects: nil, opts: {})
       @parent = parent
+      @subjects = subjects
+      @opts = opts
     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 7a0011c..6fa8b33 100644
--- a/app/components/subject_accordion_component/subject_accordion_component.html.erb
+++ b/app/components/subject_accordion_component/subject_accordion_component.html.erb
@@ -1,76 +1,168 @@
-<% parent.children.order(name: :asc).each do |sub1| %>
-  <div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
-    <div class="accordion-item">
-      <div class="accordion-header d-flex justify-content-between">
-        <% if sub1.children.present? %>
-          <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>"> 
-            <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
-            <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub1.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
+<% if opts[:is_offcanvas].present? %>
+  <% 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 %>"> 
+              <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+            </div>
+          <% else %>
+            <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+          <% end %>
+        </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">
+            <% root.children.order(name: :asc).each do |sub1| %>
+              <div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
+                <div class="accordion-item">
+                  <div class="accordion-header d-flex justify-content-between">
+                    <% if sub1.children.present? %>
+                      <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>"> 
+                        <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
+                      </div>
+                    <% else %>
+                      <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
+                    <% end %>
+                  </div>
+
+                  <div class="accordion-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
+                    <div class="accordion-body pt-1">
+                      <% sub1.children.order(name: :asc).each do |sub2| %>
+                        <div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
+                          <div class="accordion-item">
+                            <div class="accordion-header d-flex justify-content-between">
+                              <% if sub1.children.present? %>
+                                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>"> 
+                                  <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
+                                </div>
+                              <% else %>
+                                <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
+                              <% end %>
+                            </div>
+
+                            <div class="accordion-collapse collapse" id="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>">
+                              <div class="accordion-body pt-1">
+                                <% sub2.children.order(name: :asc).each do |sub3| %>
+                                  <div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
+                                    <div class="accordion-item">
+                                      <div class="accordion-header d-flex justify-content-between">
+                                        <% if sub3.children.present? %>
+                                          <div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>"> 
+                                            <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
+                                          </div>
+                                        <% else %>
+                                          <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
+                                        <% end %>
+                                      </div>
+
+                                      <div class="accordion-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
+                                        <div class="accordion-body pt-1">
+                                          <% sub3.children.order(name: :asc).each do |sub4| %>
+                                            <div class="accordion accordion-flush ps-20">
+                                              <div class="accordion-item d-flex justify-content-between">
+                                                <div> 
+                                                  <%= link_to sub4.name, subject_index_path(sub4.id), class: "accordion-link text-decoration-none text-dark d-block sub5 clickable-link" %>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          <% end %>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                <% end %>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            <% end %>
           </div>
-        <% else %>
-          <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
-          <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub1.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
-        <% end %>
+        </div>
       </div>
+    </div>
+  <% end %>
+<% else %>
+  <% parent.children.order(name: :asc).each do |sub1| %>
+    <div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
+      <div class="accordion-item">
+        <div class="accordion-header d-flex justify-content-between">
+          <% if sub1.children.present? %>
+            <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>"> 
+              <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
+              <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub1.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
+            </div>
+          <% else %>
+            <%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
+            <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub1.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+          <% end %>
+        </div>
 
-      <div class="accordion-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
-        <div class="accordion-body pt-1">
-          <% sub1.children.order(name: :asc).each do |sub2| %>
-            <div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
-              <div class="accordion-item">
-                <div class="accordion-header d-flex justify-content-between">
-                  <% if sub1.children.present? %>
-                    <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>"> 
+        <div class="accordion-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
+          <div class="accordion-body pt-1">
+            <% sub1.children.order(name: :asc).each do |sub2| %>
+              <div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
+                <div class="accordion-item">
+                  <div class="accordion-header d-flex justify-content-between">
+                    <% if sub1.children.present? %>
+                      <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>"> 
+                        <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
+                        <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub2.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
+                      </div>
+                    <% else %>
                       <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
-                      <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub2.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
-                    </div>
-                  <% else %>
-                    <%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
-                    <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub2.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
-                  <% end %>
-                </div>
+                      <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub2.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+                    <% end %>
+                  </div>
 
-                <div class="accordion-collapse collapse" id="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>">
-                  <div class="accordion-body pt-1">
-                    <% sub2.children.order(name: :asc).each do |sub3| %>
-                      <div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
-                        <div class="accordion-item">
-                          <div class="accordion-header d-flex justify-content-between">
-                            <% if sub3.children.present? %>
-                              <div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>"> 
+                  <div class="accordion-collapse collapse" id="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>">
+                    <div class="accordion-body pt-1">
+                      <% sub2.children.order(name: :asc).each do |sub3| %>
+                        <div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
+                          <div class="accordion-item">
+                            <div class="accordion-header d-flex justify-content-between">
+                              <% if sub3.children.present? %>
+                                <div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>"> 
+                                  <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
+                                  <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub3.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
+                                </div>
+                              <% else %>
                                 <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
-                                <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub3.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
-                              </div>
-                            <% else %>
-                              <%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
-                              <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub3.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
-                            <% end %>
-                          </div>
+                                <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub3.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+                              <% end %>
+                            </div>
 
-                          <div class="accordion-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
-                            <div class="accordion-body pt-1">
-                              <% sub3.children.order(name: :asc).each do |sub4| %>
-                                <div class="accordion accordion-flush ps-20">
-                                  <div class="accordion-item d-flex justify-content-between">
-                                    <div> 
-                                      <%= link_to sub4.name, subject_index_path(sub4.id), class: "accordion-link text-decoration-none text-dark d-block sub5 clickable-link" %>
-                                      <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub4.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+                            <div class="accordion-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
+                              <div class="accordion-body pt-1">
+                                <% sub3.children.order(name: :asc).each do |sub4| %>
+                                  <div class="accordion accordion-flush ps-20">
+                                    <div class="accordion-item d-flex justify-content-between">
+                                      <div> 
+                                        <%= link_to sub4.name, subject_index_path(sub4.id), class: "accordion-link text-decoration-none text-dark d-block sub5 clickable-link" %>
+                                        <%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub4.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
+                                      </div>
                                     </div>
                                   </div>
-                                </div>
-                              <% end %>
+                                <% end %>
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                    <% end %>
+                      <% end %>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          <% end %>
+            <% end %>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/components/subject_index_form_component.rb b/app/components/subject_index_form_component.rb
index 1089cbf..e094aa2 100644
--- a/app/components/subject_index_form_component.rb
+++ b/app/components/subject_index_form_component.rb
@@ -7,10 +7,6 @@ class SubjectIndexFormComponent < BaseComponent
 		@parent_id = @opts[:parent_id]
 	end
 
-	def all_subjects
-		Cdao::Subject.all.order(name: :asc)
-	end
-
 	def current_library
 		Cdao::Library.first
 	end
diff --git a/app/components/subject_index_form_component/subject_index_form_component.html.erb b/app/components/subject_index_form_component/subject_index_form_component.html.erb
index 00f797e..e028680 100644
--- a/app/components/subject_index_form_component/subject_index_form_component.html.erb
+++ b/app/components/subject_index_form_component/subject_index_form_component.html.erb
@@ -22,4 +22,4 @@
 			<button type="button" class="btn btn-secondary" href="<%= subject_indexes_path() %>"> Back </button>
 		</div>
 	</div>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/components/subjects_offcanvas_component.rb b/app/components/subjects_offcanvas_component.rb
new file mode 100644
index 0000000..fc5047f
--- /dev/null
+++ b/app/components/subjects_offcanvas_component.rb
@@ -0,0 +1,11 @@
+class SubjectsOffcanvasComponent < BaseComponent
+  attr_reader :opts
+
+  def initialize(current_user:, opts: {})
+    @opts = opts
+  end
+
+  def render?
+    opts[:is_render].present?
+  end
+end
\ No newline at end of file
diff --git a/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb b/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
new file mode 100644
index 0000000..e1d8f00
--- /dev/null
+++ b/app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
@@ -0,0 +1,31 @@
+<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Subjects</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+
+  <div class="offcanvas-body" id="subjectsAccordion">
+    <% 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 %>"> 
+                <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+              </div>
+            <% else %>
+              <%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
+            <% end %>
+          </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">
+              
+              <%= render(SubjectAccordionComponent.new(current_user: current_user, parent: root)) %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 99eb901..73be0e1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,6 +13,18 @@
 
   <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 }))%>
+
+    <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+
+      <div class="offcanvas-body" id="subjectsAccordion">
+        <%= render(SubjectAccordionComponent.new(current_user: current_user, parent: nil, opts: { is_offcanvas: true })) %>
+      </div>
+    </div>
+
     <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' %>">
       <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>