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/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;">