diff --git a/app/components/document_advanced_search_component.rb b/app/components/document_advanced_search_component.rb
new file mode 100644
index 0000000..838e3a5
--- /dev/null
+++ b/app/components/document_advanced_search_component.rb
@@ -0,0 +1,7 @@
+class DocumentAdvancedSearhComponent < BaseComponent
+  attr_reader :opts
+
+  def initialize(current_user: opts: {})
+    @opts = opts
+  end
+end
\ No newline at end of file
diff --git a/app/components/document_advanced_search_component/document_advanced_search_component.html.erb b/app/components/document_advanced_search_component/document_advanced_search_component.html.erb
new file mode 100644
index 0000000..bef69f3
--- /dev/null
+++ b/app/components/document_advanced_search_component/document_advanced_search_component.html.erb
@@ -0,0 +1,24 @@
+<%= form_tag(documents_path, method: :get) do %>
+  <div class="row">
+    <%= text_field_tag :q, params[:q], placeholder:  'Full text search',  class: "form-control" %>
+  </div>
+
+  <div class="row">
+    <%= text_field_tag :reference_number, params[:reference_number], placeholder: 'G.R. Number',  class: "form-control" %>
+  </div>
+
+  <div class="row">
+    <%= text_field_tag :title, params[:short_title], placeholder: 'short_title',  class: "form-control" %>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-12 p-2">
+      <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "Citation Finder" %>
+    </div>
+  </div>
+
+  <div class="row">
+    <button type="submit" class="btn btn-primary">Search</button>
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+  </div>
+<% end %>
\ No newline at end of file
diff --git a/app/components/sidenav_component/sidenav_component.html.erb b/app/components/sidenav_component/sidenav_component.html.erb
index 3a9df63..2a1cab6 100644
--- a/app/components/sidenav_component/sidenav_component.html.erb
+++ b/app/components/sidenav_component/sidenav_component.html.erb
@@ -1,74 +1,118 @@
 <% if current_user.present? %>
   <% if opts[:is_sidenav].present? %>
-    <div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
-      <ul class="nav flex-column text-white w-100">
-        <a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
-          PJET
-        </a>
-        <hr/>
+    <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
+      <div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
+        <ul class="nav flex-column text-white w-100">
+          <a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
+            PJET
+          </a>
+          <hr/>
 
-        <li class="nav-link d-flex align-items-center d-flex align-items-center">
-            <i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %>
-        </li> 
+          <li class="nav-link d-flex align-items-center d-flex align-items-center">
+              <i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %>
+          </li> 
 
-        <li class="nav-link d-flex align-items-center">
-          <i class="fas fa-search"></i> <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100"  %>
-        </li>
+          <li class="nav-link d-flex align-items-center">
+            <i class="fas fa-search"></i> <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100"  %>
+          </li>
 
-        <li class="nav-link">
-          <div class="accordion-item accordion-body bg-transparent ">
-            <div class="accordion-header bg-transparent">
-              <button class="accordion-button collapsed  bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
-                <i class="fas fa-indent"></i> <%= link_to "Subjects", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
-              </button>
+          <li class="nav-link">
+            <div class="accordion-item accordion-body bg-transparent ">
+              <div class="accordion-header bg-transparent">
+                <button class="accordion-button collapsed  bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
+                  <i class="fas fa-indent"></i> <%= link_to "Subjects", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
+                </button>
+              </div>
+
+              <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
             </div>
+          </li>
 
-            <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
-          </div>
-        </li>
+          <li class="nav-link ">
+            <div class="accordion-item accordion-body bg-transparent">
+              <div class="accordion-header">
+                <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
+                  <i class="fas fa-book"></i> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
+                </button>
+              </div>
 
-        <li class="nav-link ">
-          <div class="accordion-item accordion-body bg-transparent">
-            <div class="accordion-header">
-              <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
-                <i class="fas fa-book"></i> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
-              </button>
+              <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
             </div>
+          </li>
 
-            <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
-          </div>
-        </li>
-
-        <li class="nav-link d-flex align-items-center">
-          <i class="fas fa-map-signs"></i> <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
-        </li>
+          <li class="nav-link d-flex align-items-center">
+            <i class="fas fa-map-signs"></i> <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
+          </li>
 
-        <li class="nav-link">
-          <div class="accordion-item accordion-body bg-transparent ">
-            <div class="accordion-header bg-transparent">
-              <button class="accordion-button collapsed  bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#settings">
-                <i class="fas fa-cog"></i> <%= link_to "Settings", "#", class: "accordion-link text-decoration-none mx-2 text-white" %>
-              </button>
-            </div>
+          <li class="nav-link">
+            <div class="accordion-item accordion-body bg-transparent ">
+              <div class="accordion-header bg-transparent">
+                <button class="accordion-button collapsed  bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#settings">
+                  <i class="fas fa-cog"></i> <%= link_to "Settings", "#", class: "accordion-link text-decoration-none mx-2 text-white" %>
+                </button>
+              </div>
 
-            <div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav">
-              <div class="accordion-body pb-0 pe-0 pt-0"> 
-                <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
-                  <div class="accordion-item bg-transparent">
-                    <div class="accordion-header bg-transparent">
-                      <%= link_to "Subjects", subject_indexes_path, class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
+              <div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav">
+                <div class="accordion-body pb-0 pe-0 pt-0"> 
+                  <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
+                    <div class="accordion-item bg-transparent">
+                      <div class="accordion-header bg-transparent">
+                        <%= link_to "Subjects", subject_indexes_path, class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </li>
+          </li>
 
-        <li class="nav-link d-flex align-items-center">
-          <i class="fas fa-sign-out-alt"></i> <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %>
-        </li>
-      </ul>
+          <li class="nav-link d-flex align-items-center">
+            <i class="fas fa-sign-out-alt"></i> <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %>
+          </li>
+        </ul>
+      </div>
     </div>
+  <% elsif opts[:is_nav_bar].present? %>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
+      <div class="container-fluid">
+        <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
+          <div>
+            <a class="navbar-brand" href="#"><%= image_pack_tag 'application/cdasiaonline_logo.png', class:"nav-bar-app-logo" %></a>
+          </div>
+          <form class="d-flex">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item p-2">
+                <%= link_to ' <i class="fas fa-home me-2"></i>Home'.html_safe, root_path, class: "nav-link" %>
+              </li>
+              <li class="nav-item p-2">
+                <%= 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">
+                <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">
+                <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" %>
+              </li>
+              <li class="nav-item p-2">
+                <%= link_to '<i class="fas fa-cog me-2"></i>Settings'.html_safe, "#", class: "nav-link" %>
+              </li>
+              <li class="nav-item p-2 active-red">
+               <%= link_to '<i class="fas fa-sign-out-alt"></i> Sign Out'.html_safe, destroy_user_session_path, class:" text-white nav-link" %>
+ 
+              </li>
+            </ul>
+          </form>
+        </div>
+      </div>
+    </nav>
+
+
   <% end %>
 <% end %>
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/javascript/src/application.scss b/app/javascript/src/application.scss
index 6091053..fb38700 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -3,6 +3,7 @@
 @import "./application/sessions";
 @import "./application/pagination";
 @import "./application/table";
+@import "./application/nav-bar";
 
 .tableFixHead { 
     overflow: auto;
diff --git a/app/javascript/src/application/nav-bar.scss b/app/javascript/src/application/nav-bar.scss
new file mode 100644
index 0000000..ac72c41
--- /dev/null
+++ b/app/javascript/src/application/nav-bar.scss
@@ -0,0 +1,11 @@
+img.nav-bar-app-logo {
+    width: 220px;
+}
+
+.active-red {
+    background: #f75353;
+}
+
+.active-red a:hover {
+    background: transparent;
+}
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8d2a90a..73be0e1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -12,15 +12,20 @@
   </head>
 
   <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">
-    
-    <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' %>">
-  
-      <% if current_user.present? %>
-        <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
-          <%= render(SidenavComponent.new(current_user: current_user, opts: { is_sidenav: true }))%>
-        </div>
-      <% end %>
+    <%= 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" %>
       </div>