diff --git a/assets/css/app.scss b/assets/css/app.scss
index 2d53fbc..736649a 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -892,6 +892,12 @@ section[role="main-content"]{
   
           }
         }
+        section.tocitem{
+          &[level="1"]:not([type="front"]),
+          &[level="2"]{
+            padding-top: 0.4em;
+          }
+        }
 
         .toc-title{
           @include title4grey;
@@ -912,7 +918,13 @@ section[role="main-content"]{
             pointer-events: none;
           }
         }
-        h2.toc-title{font-size: 1.1em;}
+        h2.toc-title{
+          font-size: 1.1em;
+          color: $bleuroilight;
+          &:hover, &.loaded{
+            color: $bleuroi;
+          }
+        }
         h3.toc-title{font-size: 1em;}
         h4.toc-title{font-size: 0.9em;}
         h5.toc-title{font-size: 0.8em;}
diff --git a/src/components/Content/TocItem.vue b/src/components/Content/TocItem.vue
index 92e9073..67734aa 100644
--- a/src/components/Content/TocItem.vue
+++ b/src/components/Content/TocItem.vue
@@ -26,15 +26,16 @@
         opened: isOpened,
         disabled: isDisabled
       }"
+      :type="item.type"
+      :level="level"
     >
       <a
         :href="'/texts/'+editionid+'/'+item.uuid"
         :uuid="item.uuid"
+        v-html="title"
         @click.prevent="onclick"
         @keyup.enter="onclick"
-      >
-        {{ title }}
-      </a>
+      />
     </component>
     <ul
       v-if="children.length"
@@ -96,7 +97,7 @@ export default {
     title () {
       // this shoudn't be necessary
       if (this.item.title && Array.isArray(this.item.title)) {
-        return this.truncate(this.item.title.join(' '), 50, true)
+        return this.truncate(this.item.title.join(' '), 80, true)
       } else if (this.item.title) {
         return this.truncate(this.item.title, 80, true)
       } else {
@@ -150,6 +151,7 @@ export default {
     }
   },
   created () {
+    console.log('TocItem created', this.item)
     this.flat_indexes = []
     Object.keys(this.item.indexes[0]).forEach(index => {
       this.item.indexes[0][index].forEach(element => {
@@ -181,7 +183,7 @@ export default {
       const subString = str.slice(0, n - 1) // the original check
       return (useWordBoundary
         ? subString.slice(0, subString.lastIndexOf(' '))
-        : subString) + ' ...'
+        : subString) + '&nbsp;...'
     },
     onclick (e) {
       console.log('clicked on toc text', this.item, e)