diff --git a/scenarios/xslt/edxml2html/css/styles.css b/scenarios/xslt/edxml2html/css/styles.css
index 28f54858db2f79b81cd6ceb4921d570711a458ff..0370eab1319e6a9afa9e6cf893c0cc2214942165 100644
--- a/scenarios/xslt/edxml2html/css/styles.css
+++ b/scenarios/xslt/edxml2html/css/styles.css
@@ -157,12 +157,21 @@ hr.metamark-line.doubleLine {
     flex-direction: row;
 }
 
-.unit-container > *:first-child {
+/*.unit-container > *:first-child {
     width: 10%;
-}
+}*/
 
 .unit-container > * {
-    width: 45%;
+    width: 40%;
+}
+
+.section-tab + .section-tab {
+  border-left: solid 1px var(--sub-blue-light);
+  padding-left: 5px;
+}
+
+.section-tab.notes {
+    width: 20%;
 }
 
 /*----------------------------------{ UNIT }--------------------------------*/
@@ -283,6 +292,32 @@ hr.metamark-line.doubleLine {
     color: var(--sub-blue);
 }
 
+/*----- Kommentare als tooltip -----*/
+
+.note {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.note .notetext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+
+  /* Position the note */
+  position: absolute;
+  z-index: 1;
+}
+
+.note:hover .notetext {
+  visibility: visible;
+}
+
 /*----------------------------------{ ITEMS: WORDS }--------------------------------*/
 
 .item.w:hover {
diff --git a/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl b/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl
index 2b267b527cc7ea7a9aa60e752a96c6d45afa36d8..492af5d74d2607bfaf393d2598d12ed6ef7a861e 100644
--- a/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl
+++ b/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl
@@ -50,6 +50,9 @@
                     </a>
                 </div>-->
                 <xsl:apply-templates />
+                <xsl:if test="not(child::notes)">
+                    <div class="notes section-tab"/>
+                </xsl:if>
             </div>
         </div>
     </xsl:template>
@@ -172,6 +175,20 @@
         </span>
     </xsl:template>
     
+    <xsl:template match="philology//notes">
+        <div class="notes section-tab">
+            <xsl:apply-templates/>
+        </div>
+    </xsl:template>
+    
+    <xsl:template match="philology//note">
+        <span class="note">📌
+            <span class="notetext">
+                <xsl:apply-templates/>
+            </span>
+        </span>        
+    </xsl:template>
+    
     
     <!-- TABLE ITEMS -->
     <xsl:template match="node()" mode="table-items">