diff --git a/styles.css b/styles.css
index aa1d93b..ee327fc 100644
--- a/styles.css
+++ b/styles.css
@@ -10,21 +10,19 @@ body.path-admin-report-customsql a.view-category {
 .region-content .csql_category h3 {
     font-weight: bold;
 }
-.csql_category .categoryname {
-    padding-left: 18px;
+.csql_category__button-container > div:first-child {
+    margin-right: 10px;
 }
-.csql_category.csql_categoryhidden .categoryname {
-    background-image: url([[pix:moodle|t/collapsed]]);
-    background-repeat: no-repeat;
-    background-position: center left;
+.csql_category.csql_categoryshown a.categoryname > i.fa-angle-right {
+    transform: rotate(90deg);
 }
-.csql_category.csql_categoryshown .categoryname {
-    background-image: url([[pix:moodle|t/expanded]]);
-    background-repeat: no-repeat;
-    background-position: center left;
+
+.csql_category a.categoryname > i.fa-angle-right {
+    font-size: 28px;
 }
+
 .csql_category .csql_category_reports {
-    margin-left: 18px;
+    margin-left: 30px;
 }
 .csql_category.csql_categoryshown .csql_category_reports {
     display: block;
diff --git a/templates/category.mustache b/templates/category.mustache
index 65792f2..44d4345 100644
--- a/templates/category.mustache
+++ b/templates/category.mustache
@@ -50,7 +50,7 @@
 <div class="csql_category csql_category{{#expandable}}{{show}}{{/expandable}}">
     <h2>
         {{#expandable}}
-            <a href="{{linkref}}" class="categoryname">{{name}}</a>
+            <a href="{{linkref}}" class="categoryname"><i class="fa fa-angle-right mr-2"></i>{{name}}</a>
         {{/expandable}}
         {{^expandable}}
             {{{name}}}
diff --git a/templates/expand_collapse_link.mustache b/templates/expand_collapse_link.mustache
index 190339e..eb37c09 100644
--- a/templates/expand_collapse_link.mustache
+++ b/templates/expand_collapse_link.mustache
@@ -31,8 +31,8 @@
     }
 }}
 
-<div class="csql_expandcollapseallcontainer">
-    <a href="#" class="csql_expandcollapseall" data-expandalltext="{{#str}}expandall{{/str}}" data-collapsealltext="{{#str}}collapseall{{/str}}">
+<div class="csql_expandcollapseallcontainer mb-3">
+    <a href="#" class="csql_expandcollapseall text-muted" data-expandalltext="{{#str}}expandall{{/str}}" data-collapsealltext="{{#str}}collapseall{{/str}}">
         {{#str}}expandall{{/str}}
     </a>
 </div>
diff --git a/templates/index_page.mustache b/templates/index_page.mustache
index 1d83d3b..d587e6d 100644
--- a/templates/index_page.mustache
+++ b/templates/index_page.mustache
@@ -47,8 +47,10 @@
     {{>report_customsql/expand_collapse_link}}
 {{/expandcollapselinkattheend}}
 
-{{{addquerybutton}}}
-{{{managecategorybutton}}}
+<div class="csql_category__button-container mt-3 d-flex flex-row justify-content-start">
+    {{{addquerybutton}}}
+    {{{managecategorybutton}}}
+</div>
 
 {{#js}}
     require(['report_customsql/reportcategories'], function(reportcategories) {