diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index db19bd4aa..c5b92d101 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -588,6 +588,12 @@ body {
     border-bottom: none;
   }
 
+  /* no border for children of the last concept */
+  #tab-hierarchy .sidebar-list .list-group-item span.last + ul > li {
+    border: none;
+    margin-left: 1px !important; /* add a 1px margin to offset missing border */
+  }
+
   #tab-hierarchy .sidebar-list .list-group-item a.selected {
     color: var(--vocab-text) !important;
   }
@@ -606,19 +612,23 @@ body {
   }
 
   .hierarchy-button i {
+    position: absolute;
+    left: 11px;
+    top: 7px;
+  }
+
+  .hierarchy-button img {
     transform: rotate(-45deg);
     position: absolute;
-    top: 4px;
-    left: 5px;
-    width: 15px;
+    top: 9px;
+    left: 10px;
+    width: 7px;
     z-index: 1;
   }
 
-  .hierarchy-button.open i {
+  .hierarchy-button.open img {
     transform: rotate(0deg);
-    top: 1px;
-    left: 5px;
-    width: 20px;
+    left: 12px;
   }
 
   /*** sidebar serachpage ***/
diff --git a/resource/js/tab-hierarchy.js b/resource/js/tab-hierarchy.js
index 14304820c..b0833a81c 100644
--- a/resource/js/tab-hierarchy.js
+++ b/resource/js/tab-hierarchy.js
@@ -236,7 +236,7 @@ tabHierApp.component('tab-hier-wrapper', {
         :concept="c"
         :selectedConcept="selectedConcept"
         :isTopConcept="true"
-        :isLast="i == hierarchy.length - 1 && !c.isOpen"
+        :isLast="i == hierarchy.length - 1"
         :loadingChildren="loadingChildren"
         @load-children="loadChildren($event)"
         @select-concept="selectConcept($event)"
@@ -269,7 +269,7 @@ tabHierApp.component('tab-hier', {
   },
   template: `
     <li class="list-group-item p-0" :class="{ 'top-concept': isTopConcept }">
-      <button type="button" class="hierarchy-button btn btn-primary"
+      <button type="button" class="hierarchy-button btn btn-primary" aria-label="Open"
         :class="{ 'open': concept.isOpen }"
         v-if="concept.hasChildren"
         @click="handleClickOpenEvent(concept)"
@@ -278,7 +278,8 @@ tabHierApp.component('tab-hier', {
           <i class="fa-solid fa-spinner fa-spin-pulse"></i>
         </template>
         <template v-else>
-          <i>{{ concept.isOpen ? '&#x25E2;' : '&#x25FF;' }}</i>
+          <img v-if="concept.isOpen" alt="" src="resource/pics/black-lower-right-triangle.png">
+          <img v-else alt="" src="resource/pics/lower-right-triangle.png">
         </template>
       </button>
       <span :class="{ 'last': isLast }">
@@ -287,13 +288,13 @@ tabHierApp.component('tab-hier', {
           @click="handleClickConceptEvent($event, concept)"
           aria-label="Go to the concept page">{{ concept.label }}</a>
       </span>
-      <ul class="list-group px-3" v-if="concept.children.length !== 0 && concept.isOpen">
+      <ul class="list-group ps-3" v-if="concept.children.length !== 0 && concept.isOpen">
         <template v-for="(c, i) in concept.children">
           <tab-hier
             :concept="c"
             :selectedConcept="selectedConcept"
             :isTopConcept="false"
-            :isLast="i == concept.children.length - 1 && !c.isOpen"
+            :isLast="i == concept.children.length - 1"
             :loadingChildren="loadingChildren"
             @load-children="loadChildrenRecursive($event)"
             @select-concept="selectConceptRecursive($event)"
diff --git a/resource/pics/black-lower-right-triangle.png b/resource/pics/black-lower-right-triangle.png
new file mode 100644
index 000000000..89a10c0e3
Binary files /dev/null and b/resource/pics/black-lower-right-triangle.png differ
diff --git a/resource/pics/lower-right-triangle.png b/resource/pics/lower-right-triangle.png
new file mode 100644
index 000000000..f0f90b12d
Binary files /dev/null and b/resource/pics/lower-right-triangle.png differ