diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 46b038c..20378f0 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -36,6 +36,8 @@ $(document).on("ready turbolinks:load", function () {
     $('#sidenav').toggleClass('active');
   });
 
+  $(".spinner-border").hide();
+  
   var default_config = { altFormat: "m/d/Y", altInput: true, enableTime: false, dateFormat: "Y-m-d", isMobile: true };
   $('.default-flatpickr').flatpickr(default_config);
 
diff --git a/app/javascript/src/application/subject-accordion.scss b/app/javascript/src/application/subject-accordion.scss
index 8f3476b..7b8066c 100644
--- a/app/javascript/src/application/subject-accordion.scss
+++ b/app/javascript/src/application/subject-accordion.scss
@@ -26,4 +26,13 @@
   .non-toggle {
     margin-right: 65px !important;
   }
+
+  .sub-icon-add a {
+    font-size: large;
+    color: #4caf50;
+  }
+  
+  .sub-icon-add a:hover {
+    color: darkred;
+  }
   
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 1b4aa1c..1df3968 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -54,11 +54,18 @@
     <%= render(DoctrinesOffcanvasComponent.new(current_user: current_user, opts: { is_render: true })) %>
 
     <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-7 login-logo' %>">
         <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
       </div>
+      <div class="text-center" style="margin-top: 100px;position: absolute;">
+        <div class="spinner-border loading" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
       <div class="<%= current_user.present? ? 'col py-3 main-content-body mt-5' : 'col-sm-5 login-body-box' %>">
-        <div class="content-body">
+     
+      <div class="content-body">
           <%= yield %>
         </div>
       </div>
diff --git a/app/views/subject_indexes/show.html.erb b/app/views/subject_indexes/show.html.erb
index c921df3..0922422 100644
--- a/app/views/subject_indexes/show.html.erb
+++ b/app/views/subject_indexes/show.html.erb
@@ -36,9 +36,9 @@
   <div class="card-body">
     <div>
       <div class="" style="border-bottom: 1px solid #b2b2b2;">
-        <div class="row">
-          <div class="col-sm-11"> <h5 class="mb-0"> Sub Levels </h5> </div>
-          <div class="col-sm-1 d-flex justify-content-end align-items-end"> <a class="btn btn-success p-1 btn-sm ps-3 pe-3 mb-1" href="<%= new_subject_index_path(parent_id: @subject_index) %>"> Add </a> </div>
+        <div class="d-flex">
+          <div > <h5 class="mb-0"> Sub Levels </h5> </div>
+          <div class="sub-icon-add"> <a class="p-1 btn-sm ps-3 pe-3 mb-1" href="<%= new_subject_index_path(parent_id: @subject_index) %>"><i class="fas fa-plus-circle"></i></a> </div>
         </div>
       </div>
       <div class="card-body subject-body-index" style="position: relative;">