diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index 16a2d24e0..d584ac43e 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -13,6 +13,12 @@
   --feedback-form-button-bg: var(--dark-color);
   --sidebar-search-bg: var(--dark-color);
   --sidebar-search-text: var(--white-color);
+  --sidebar-tab-inactive-bg: var(--light-color);
+  --sidebar-tab-inactive-text: var(--dark-color);
+  --sidebar-tab-active-bg: var(--dark-color);
+  --sidebar-tab-active-text: var(--white-color);
+  --sidebar-scrollbar-bg: var(--light-color);
+  --sidebar-scrollbar-thumb: var(--secondary-medium-color);
   --vocab-bg: var(--white-color);
   --vocab-table-border: var(--medium-color);
   --vocab-link: var(--secondary-dark-color);
@@ -70,6 +76,7 @@ body {
   #main-container.vocabpage .fa-arrow-right, #main-container.termpage .fa-arrow-right {
     color: var(--vocab-text);
     font-size: 12px;
+    margin: 0 5px;
   }
 
   #main-container.termpage .fa-copy {
@@ -377,12 +384,25 @@ body {
   }
 
   /*** Sidebar termpage & vocabpage ***/
-  #main-container.vocabpage #sidebar .nav-item, #main-container.termpage #sidebar .nav-item {
+  #main-container.vocabpage #sidebar-col, #main-container.termpage #sidebar-col {
+    background-color: var(--vocab-bg);
+    background-clip: content-box, padding-box;
+  }
+
+  #main-container.vocabpage #sidebar, #main-container.termpage #sidebar {
+    background-color: var(--vocab-bg);
+  }
+
+  #main-container.vocabpage #sidebar .nav, #main-container.termpage #sidebar .nav {
     background-color: var(--sidebar-tab-inactive-bg);
   }
 
   #main-container.vocabpage #sidebar .nav-link, #main-container.termpage #sidebar .nav-link {
     color: var(--sidebar-tab-inactive-text) !important;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: none;
   }
 
@@ -407,45 +427,50 @@ body {
     border-radius: 0 !important;
     margin: 0 !important;
     transition: none;
+    width: 35px;
+  }
+
+  #main-container.vocabpage #sidebar .page-link, #main-container.termpage #sidebar .page-link {
+    display: flex;
+    align-content: center;
+    text-align: center;
   }
 
-  /* Not sure what these should be, probably something though */
-  #main-container.vocabpage #sidebar .page-link:hover, #main-container.vocabpage #sidebar .page-link:active, #main-container.vocabpage #sidebar .page-link:focus
+  /* what to do with these */
+  #main-container.vocabpage #sidebar .page-link:hover, #main-container.vocabpage #sidebar .page-link:active, #main-container.vocabpage #sidebar .page-link:focus,
   #main-container.termpage #sidebar .page-link:hover, #main-container.termpage #sidebar .page-link:active, #main-container.termpage #sidebar .page-link:focus {
     background-color: var(--sidebar-tab-active-bg);
     color: var(--sidebar-tab-active-text);
     box-shadow: none;
   }
 
-  #alpha-list {
+  .sidebar-list {
     padding: 2rem 1rem;
-    overflow: hidden;
     overflow-y: scroll;
     scrollbar-color: var(--sidebar-scrollbar-thumb) var(--sidebar-scrollbar-bg);
-    height: 600px; /*remove*/
+    max-height: 1000px; /* needs to be changed */
   }
 
-  #alpha-list::-webkit-scrollbar {
+  .sidebar-list::-webkit-scrollbar {
     background: var(--sidebar-scrollbar-bg);
   }
 
-  #alpha-list::-webkit-scrollbar-thumb {
+  .sidebar-list::-webkit-scrollbar-thumb {
     background: var(--sidebar-scrollbar-thumb);
   }
 
-  #alpha-list li {
+  .sidebar-list li {
     border: none;
     border-radius: none;
   }
 
-  #alpha-list .list-group-item.selected a {
-    color: var(--vocab-text);
-    font-size: 18px;
+  .sidebar-list a {
+    font-weight: bold !important;
   }
 
-  #tab-hierarchy {
-    background-color: var(--sidebar-tab-active-bg);
-    color: var(--sidebar-tab-active-text);
+  .sidebar-list .list-group-item a.selected {
+    color: var(--vocab-text) !important;
+    font-weight: bold !important;
   }
 
   /*** sidebar serachpage ***/
@@ -698,12 +723,14 @@ body {
   #alphabetical-menu > .list-group > .list-group-item {
     border: none !important;
   }
+  
+  /*** Sidebar ***/
+  /*
   #sidebar > div > .nav-tabs > .nav-item {
     border: none !important;
     border-image: none !important;
     transition: none;
   }
-  /*** Sidebar ***/
   #sidebar .nav-item {
     background-color: var(--light-color);
   }
@@ -749,6 +776,7 @@ body {
     margin: 0 !important;
     transition: none;
   }
+  */
   tr > td {
     color: var(--dark-color);
   }
diff --git a/resource/js/tab-alpha.js b/resource/js/tab-alpha.js
index cda87de0b..12d67681b 100644
--- a/resource/js/tab-alpha.js
+++ b/resource/js/tab-alpha.js
@@ -7,7 +7,9 @@ const tabAlphaApp = Vue.createApp({
     return {
       indexLetters: [],
       indexConcepts: [],
-      selectedLetter: ''
+      selectedConcept: '',
+      loadingLetters: false,
+      loadingConcepts: false
     }
   },
   provide () {
@@ -18,39 +20,55 @@ const tabAlphaApp = Vue.createApp({
   },
   mounted () {
     // load alphabetical index if alphabetical tab is active when the page is first opened (otherwise only load the index when the tab is clicked)
-    // this should probably be done differently
     if (document.querySelector('#alphabetical > a').classList.contains('active')) {
       this.loadLetters()
     }
   },
   methods: {
-    loadLetters () {
-      // only load index the first time the page is opened or the alphabetical tab is clicked
-      if (this.indexLetters.length === 0) {
-        fetch('rest/v1/' + SKOSMOS.vocab + '/index/?lang=' + SKOSMOS.lang)
-          .then(data => {
-            return data.json()
-          })
-          .then(data => {
-            this.indexLetters = data.indexLetters
-            this.loadConcepts(this.indexLetters[0])
-          })
+    handleClickAlphabeticalEvent () {
+      // only load index the first time the page is opened or if selected concept has changed
+      if (this.indexLetters.length === 0 || this.selectedConcept !== SKOSMOS.uri) {
+        this.selectedConcept = ''
+        this.indexLetters = []
+        this.indexConcepts = []
+        this.loadLetters()
       }
     },
+    loadLetters () {
+      this.loadingLetters = true
+      fetch('rest/v1/' + SKOSMOS.vocab + '/index/?lang=' + SKOSMOS.lang)
+        .then(data => {
+          return data.json()
+        })
+        .then(data => {
+          this.indexLetters = data.indexLetters
+          this.loadingLetters = false
+          this.loadConcepts(this.indexLetters[0])
+        })
+    },
     loadConcepts (letter) {
-      this.selectedLetter = letter
-      fetch('rest/v1/' + SKOSMOS.vocab + '/index/' + this.selectedLetter + '?lang=' + SKOSMOS.lang + '&limit=50')
+      this.loadingConcepts = true
+      fetch('rest/v1/' + SKOSMOS.vocab + '/index/' + letter + '?lang=' + SKOSMOS.lang + '&limit=50')
         .then(data => {
           return data.json()
         })
         .then(data => {
           this.indexConcepts = data.indexConcepts
+          this.loadingConcepts = false
         })
     }
   },
   template: `
-    <div v-click-tab-alphabetical="loadLetters">
-      <tab-alpha :index-letters="indexLetters" :index-concepts="indexConcepts" v-if="indexLetters" @load-concepts="loadConcepts($event)"></tab-alpha>
+    <div v-click-tab-alphabetical="handleClickAlphabeticalEvent">
+      <tab-alpha
+        :index-letters="indexLetters"
+        :index-concepts="indexConcepts"
+        :selected-concept="selectedConcept"
+        :loading-letters="loadingLetters"
+        :loading-concepts="loadingConcepts"
+        @load-concepts="loadConcepts($event)"
+        @select-concept="selectedConcept = $event"
+      ></tab-alpha>
     </div>
   `
 })
@@ -69,28 +87,51 @@ tabAlphaApp.directive('click-tab-alphabetical', {
 })
 
 tabAlphaApp.component('tab-alpha', {
-  props: ['indexLetters', 'indexConcepts'],
-  emits: ['loadConcepts'],
+  props: ['indexLetters', 'indexConcepts', 'selectedConcept', 'loadingLetters', 'loadingConcepts'],
+  emits: ['loadConcepts', 'selectConcept'],
   inject: ['partialPageLoad', 'getConceptURL'],
   methods: {
     loadConcepts (event, letter) {
       event.preventDefault()
       this.$emit('loadConcepts', letter)
+    },
+    loadConcept (event, uri) {
+      partialPageLoad(event, getConceptURL(uri))
+      this.$emit('selectConcept', uri)
     }
   },
   template: `
-    <ul class="pagination">
-      <li v-for="letter in indexLetters" class="page-item">
-        <a class="page-link" href="#" @click="loadConcepts($event, letter)" style="background-color: darkblue;">{{ letter }}</a>
-      </li>
-    </ul>
-
-    <ul class="list-group" id="alpha-list">
-      <li v-for="concept in indexConcepts" class="list-group-item py-1">
-        <template v-if="concept.altLabel">{{ concept.altLabel }} -> </template>
-        <a :href="getConceptURL(concept.uri)" @click="partialPageLoad($event, getConceptURL(concept.uri))">{{ concept.prefLabel }}</a>
-      </li>
-    </ul>
+    <template v-if="loadingLetters">
+      <div>
+        Loading...
+      </div>
+    </template>
+    <template v-else>
+      <ul class="pagination" v-if="indexLetters.length !== 0">
+        <li v-for="letter in indexLetters" class="page-item">
+          <a class="page-link" href="#" @click="loadConcepts($event, letter)">{{ letter }}</a>
+        </li>
+      </ul>
+    </template>
+    
+    <template v-if="loadingConcepts">
+      <div>
+        Loading...
+      </div>
+    </template>
+    <template v-else>
+      <ul class="list-group sidebar-list" v-if="indexConcepts.length !== 0">
+        <li v-for="concept in indexConcepts" class="list-group-item py-1 px-2">
+          <template v-if="concept.altLabel">
+            <span class="fst-italic">{{ concept.altLabel }}</span>
+            <i class="fa-solid fa-arrow-right"></i>
+          </template>
+          <a :class="{ 'selected': selectedConcept === concept.uri }"
+            :href="getConceptURL(concept.uri)" @click="loadConcept($event, concept.uri)"
+          >{{ concept.prefLabel }}</a>
+        </li>
+      </ul>
+    </template>
   `
 })
 
diff --git a/resource/js/tab-hierarchy.js b/resource/js/tab-hierarchy.js
index f4499dd10..ab8fd0379 100644
--- a/resource/js/tab-hierarchy.js
+++ b/resource/js/tab-hierarchy.js
@@ -6,7 +6,8 @@ const tabHierApp = Vue.createApp({
   data () {
     return {
       hierarchy: [],
-      loading: false
+      loading: false,
+      selectedConcept: ''
     }
   },
   provide () {
@@ -121,6 +122,7 @@ const tabHierApp = Vue.createApp({
           }
 
           this.loading = false
+          this.selectedConcept = SKOSMOS.uri
           console.log(this.hierarchy)
         })
     },
@@ -143,9 +145,14 @@ const tabHierApp = Vue.createApp({
   },
   template: `
     <div v-click-tab-hierarchy="handleClickHierarchyEvent">
-      <ul v-if="!loading">
+      <ul class="list-group sidebar-list" v-if="!loading">
         <template v-for="c in hierarchy">
-          <tab-hier :concept="c" @load-children="loadChildren($event)"></tab-hier>
+          <tab-hier
+            :concept="c"
+            :selectedConcept="selectedConcept"
+            @load-children="loadChildren($event)"
+            @select-concept="selectedConcept = $event"
+          ></tab-hier>
         </template>
       </ul>
       <template v-else>Loading...</template><!-- Add a spinner or equivalent -->
@@ -166,8 +173,8 @@ tabHierApp.directive('click-tab-hierarchy', {
 })
 
 tabHierApp.component('tab-hier', {
-  props: ['concept'],
-  emits: ['loadChildren'],
+  props: ['concept', 'selectedConcept'],
+  emits: ['loadChildren', 'selectConcept'],
   inject: ['partialPageLoad', 'getConceptURL'],
   methods: {
     handleClickOpenEvent (concept) {
@@ -177,23 +184,34 @@ tabHierApp.component('tab-hier', {
     handleClickConceptEvent (event, concept) {
       concept.isOpen = true
       this.$emit('loadChildren', concept)
+      this.$emit('selectConcept', concept.uri)
       this.partialPageLoad(event, this.getConceptURL(concept.uri))
     },
     loadChildrenRecursive (concept) {
       this.$emit('loadChildren', concept)
+    },
+    selectConceptRecursive (concept) {
+      this.$emit('selectConcept', concept)
     }
   },
   template: `
-    <li>
+    <li class="list-group-item">
       <div>
         <button v-if="concept.hasChildren" @click="handleClickOpenEvent(concept)"></button>
-        <a :href="getConceptURL(concept.uri)" @click="handleClickConceptEvent($event, concept)">
-          {{ concept.label }}
-        </a>
+        <a 
+          :class="{ 'selected': selectedConcept === concept.uri }"
+          :href="getConceptURL(concept.uri)"
+          @click="handleClickConceptEvent($event, concept)"
+        >{{ concept.label }}</a>
       </div>
-      <ul v-if="concept.children.length !== 0 && concept.isOpen">
+      <ul class="list-group" v-if="concept.children.length !== 0 && concept.isOpen">
         <template v-for="c in concept.children">
-          <tab-hier :concept="c" @load-children="loadChildrenRecursive($event)"></tab-hier>
+          <tab-hier
+            :concept="c"
+            :selectedConcept="selectedConcept"
+            @load-children="loadChildrenRecursive($event)"
+            @select-concept="selectConceptRecursive($event)"
+          ></tab-hier>
         </template>
       </ul>
     </li>
diff --git a/src/view/sidebar.inc b/src/view/sidebar.inc
index 55922def4..ee01a6e13 100644
--- a/src/view/sidebar.inc
+++ b/src/view/sidebar.inc
@@ -1,5 +1,5 @@
-<div class="col-md-4">
-  <div class="bg-light" id="sidebar">
+<div class="col-md-4" id="sidebar-col">
+  <div id="sidebar">
   {% block sidebar %}
     <div class="sidebar-buttons">
       <h2 class="visually-hidden">{{'Sidebar listing: list and traverse vocabulary contents by a criterion' | trans}}</h2>
@@ -33,9 +33,7 @@
         {# active_class is used to set initial active tab #}
         {# On vocab page active tab is set to defaultSidebarView, on concept page active tab is set to defaultConceptSidebarView #}
         {% set active_class = (request.page == 'vocab' and view == vocab.config.defaultSidebarView) or (request.page == 'page' and view == vocab.config.defaultConceptSidebarView) %}
-        <div class="tab-pane{% if active_class %} active{% endif %}" id="tab-{{ view }}" role="tabpanel">
-          {{ view }} {# should be removed #}
-        </div>
+        <div class="tab-pane{% if active_class %} active{% endif %}" id="tab-{{ view }}" role="tabpanel"></div>
       {% endfor %}
     </div>