diff --git a/scenarios/xslt/edxml2html/css/styles.css b/scenarios/xslt/edxml2html/css/styles.css
index bb34d05cdaffaabb1eb2eb2a6599070e1116e63e..660758a1d2689d1eb59df00e5ea2a9fbd6846a42 100644
--- a/scenarios/xslt/edxml2html/css/styles.css
+++ b/scenarios/xslt/edxml2html/css/styles.css
@@ -93,12 +93,6 @@ div.column {
 }
 
 
-/*----------------------------------{ NOTES }--------------------------------*/
-.surface .note {
-
-}
-
-
 /*::::::::::::::::::::::::::::::::::{ PARTS & SEGMENTS }::::::::::::::::::::::::::::::::*/
 /*----------------------------------{ SEGMENTS }--------------------------------*/
 span.seg{
@@ -165,12 +159,8 @@ hr.metamark-line.doubleLine {
     flex-direction: row;
 }
 
-/*.unit-container > *:first-child {
-    width: 10%;
-}*/
-
-.unit-container > * {
-    width: 40%;
+.unit-container > .section-tab {
+    width: 45%;
 }
 
 .section-tab + .section-tab {
@@ -179,7 +169,8 @@ hr.metamark-line.doubleLine {
 }
 
 .section-tab.notes {
-    width: 20%;
+  text-align: center;
+  width: 10%;
 }
 
 /*----------------------------------{ UNIT }--------------------------------*/
@@ -268,7 +259,7 @@ hr.metamark-line.doubleLine {
 
 
 /*----------------------------------{ ITEMS: DISPLAY Annotations }--------------------------------*/
-.unit:focus-within .item .annotation {
+.unit-container:focus-within .item .annotation {
     transition-property: visibility, opacity;
     transition-delay: 1s;
     display: block;
@@ -277,7 +268,7 @@ hr.metamark-line.doubleLine {
     height: auto;
 }
 
-.unit:focus-within .item:hover {
+.unit-container:focus-within .item:hover {
     background-color: unset;
     color: unset;
 }
@@ -300,42 +291,88 @@ hr.metamark-line.doubleLine {
     color: var(--theme-color);
 }
 
-/*----- Kommentare als tooltip -----*/
+/*----- NOTES -----*/
 
-div:has(> .philology.section) {
-    overflow: hidden;
+.line-container span:has(> .notes-icon) {
+  float: right;
 }
 
-.note {
-    display: block;
-    position: relative;
+.notes-icon ~ input[type=checkbox] {
+  display: none;
+}
+
+.notes-icon::after {
+  content: "📔";
+  color: transparent;  
+  text-shadow: 0 0 0 var(--theme-color);
+}
+
+.notes-icon:has(~ input[type=checkbox]:checked)::after {
+  content: "📖";
+}
+
+.notes-container {
+  display: none;
+}
+
+.line-container:has(.notes-icon ~ input[type=checkbox]:checked) > .notes-container,
+.unit-container:has(.notes-icon ~ input[type=checkbox]:checked) ~ .notes-container {
+  display: block;
+}
+
+.notes-container input[type=checkbox] {
+  display: none;
+}
+
+.notes-container label {
+  cursor: pointer;
+}
+
+.notes-container > ul {
+  list-style: none;
+  margin-left: -1.5em;
+  text-indent: -0.5em;
 }
 
-.note .notetext {
-    &::-webkit-scrollbar { 
-      display: none; /* Safari and Chrome */
+.note-list > input[type=checkbox]:checked ~ ul,
+.note-item > input[type=checkbox]:checked ~ span {
+    display: none;
+}
+
+.note-list > label * {
+  all: unset !important;
+  font-style: italic !important;
+}
+
+.note-list > label *:hover {
+    *::before, *::after {
+        color: var(--theme-color-compl) !important;
     }
-    -moz-border-radius: 3px;
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    -webkit-border-radius: 3px;
-    background-color: var(--theme-color);
-    border-radius: 3px;
-    color: white;
-    font-size: small;
-    max-height: 33vh;
-    overflow: scroll;
-    padding: 5px 0;
-    position: absolute;
-    scrollbar-width: none; /* Firefox */
-    text-align: left;
-    visibility: hidden;
-    width: max(8vw, 80px);
-    word-wrap: break-word;
-    z-index: 1;
 }
 
-.note:hover .notetext {
-    visibility: visible;
+.note-list > ul {
+  list-style: none;
+  text-indent: -1em;
+  margin-left: -1em;
+}
+
+.note-list > label .annotation,
+.note-list > label .lb {
+  display: none !important;
+}
+
+.note-item {
+  text-align: justify
+}
+
+.note-item > label {
+  font-variant: small-caps;
+  font-weight: bold;
+}
+
+.unit .note-item > label:not(:has(~ input[type=checkbox]:checked))::after {
+  content: ": ";
+  font-weight: bold;
 }
 
 /*----------------------------------{ ITEMS: WORDS }--------------------------------*/
diff --git a/scenarios/xslt/edxml2html/libs/html-facsimile.lib.xsl b/scenarios/xslt/edxml2html/libs/html-facsimile.lib.xsl
index 69ef76cddb094c2e224d053cb772d241df55216f..b0d098169d830e55e0255e329a9d6460be3992e9 100644
--- a/scenarios/xslt/edxml2html/libs/html-facsimile.lib.xsl
+++ b/scenarios/xslt/edxml2html/libs/html-facsimile.lib.xsl
@@ -1,101 +1,169 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-    xmlns:xs="http://www.w3.org/2001/XMLSchema"
-    xmlns:tei="http://www.tei-c.org/ns/1.0"
-    xmlns="http://www.w3.org/1999/xhtml"
-    exclude-result-prefixes="xs"
-    version="2.0" xpath-default-namespace="http://sub.uni-goettingen.de/edxml#">
-    
+    xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tei="http://www.tei-c.org/ns/1.0"
+    xmlns:functx="http://www.functx.com" xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:uuid="java:java.util.UUID" exclude-result-prefixes="xs" version="2.0"
+    xpath-default-namespace="http://sub.uni-goettingen.de/edxml#">
+
+    <xsl:function name="functx:substring-before-if-contains" as="xs:string?">
+        <xsl:param name="arg" as="xs:string?"/>
+        <xsl:param name="delim" as="xs:string"/>
+
+        <xsl:sequence select="
+                if (contains($arg, $delim))
+                then
+                    substring-before($arg, $delim)
+                else
+                    $arg
+                "/>
+
+    </xsl:function>
+
     <xsl:template match="facsimile">
-        <div class="facsimile section" 
+        <div class="facsimile section"
             id="{if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))}">
-            <xsl:apply-templates />
+            <xsl:apply-templates/>
         </div>
     </xsl:template>
-    
+
     <xsl:template match="surface">
-        <div class="surface" 
-            id="{if(@xml:id) then (@xml:id) else ('surf_'||generate-id(.))}">
-            <xsl:apply-templates />
+        <div class="surface" id="{if(@xml:id) then (@xml:id) else ('surf_'||generate-id(.))}">
+            <xsl:apply-templates/>
         </div>
     </xsl:template>
-    
+
     <xsl:template match="column">
-        <xsl:variable name="nr" select="if(@n) then(@n) else(count(preceding::column)+1)"/>
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('colu_'||generate-id(.))"/>
-        <div class="column" 
-            id="{$id}"
-            data-n="{$nr}">
-            <xsl:apply-templates />
+        <xsl:variable name="nr" select="
+                if (@n) then
+                    (@n)
+                else
+                    (count(preceding::column) + 1)"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('colu_' || generate-id(.))"/>
+        <div class="column" id="{$id}" data-n="{$nr}">
+            <xsl:apply-templates/>
         </div>
     </xsl:template>
-    
-    <xsl:template match="line[not(@n)]|surface//note">
-        <div class="note" 
-            id="{if(@xml:id) then (@xml:id) else ('line_'||generate-id(.))}">
-            <xsl:apply-templates />
+
+    <!--<xsl:template match="line[not(@n)] | surface//note">
+        <div class="note" id="{if(@xml:id) then (@xml:id) else ('line_'||generate-id(.))}">
+            <xsl:apply-templates/>
         </div>
-    </xsl:template>
-    
+    </xsl:template>-->
+
     <xsl:template match="line[@n]">
         <xsl:variable name="nr" select="@n"/>
-        <xsl:variable name="auto-nr" select="if($nr) then($nr) else(count(preceding::line)+1)"/>
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('line_'||generate-id(.))"/>
-        <div class="line" 
-            id="{$id}">
-            <a href="#{$id}" class="line-anchor">
-                <span>
-                    <xsl:choose>
-                        <xsl:when test="@n">
-                            <xsl:attribute name="class">line-nr explicit</xsl:attribute>
-                        </xsl:when>
-                        <xsl:otherwise>
-                            <xsl:attribute name="class">line-nr calculated</xsl:attribute>
-                        </xsl:otherwise>
-                    </xsl:choose>
-                    <xsl:value-of select="$auto-nr"/>
+        <xsl:variable name="auto-nr" select="
+                if ($nr) then
+                    ($nr)
+                else
+                    (count(preceding::line) + 1)"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('line_' || generate-id(.))"/>
+        <xsl:variable name="targetIds" select=".//@xml:id"/>
+        <xsl:variable name="allFollowingNotes"
+            select="./ancestor::surface/following-sibling::notes/note"/>
+
+        <xsl:variable name="correspondingNotes">
+            <xsl:for-each select="$allFollowingNotes">
+                <xsl:if
+                    test="substring-after(functx:substring-before-if-contains(@target, ' '), '#') = $targetIds">
+                    <xsl:copy-of select="."/>
+                </xsl:if>
+            </xsl:for-each>
+        </xsl:variable>
+        <div class="line-container">
+            <div class="line" id="{$id}">
+                <a href="#{$id}" class="line-anchor">
+                    <span>
+                        <xsl:choose>
+                            <xsl:when test="@n">
+                                <xsl:attribute name="class">line-nr explicit</xsl:attribute>
+                            </xsl:when>
+                            <xsl:otherwise>
+                                <xsl:attribute name="class">line-nr calculated</xsl:attribute>
+                            </xsl:otherwise>
+                        </xsl:choose>
+                        <xsl:value-of select="$auto-nr"/>
+                    </span>
+                </a>
+                <span class="line-body">
+                    <xsl:apply-templates/>
                 </span>
-            </a>
-            <span class="line-body">
-                <xsl:apply-templates />
-            </span>
+                <xsl:if test="$correspondingNotes != ''">
+                    <span>
+                        <xsl:variable name="noteIconId" select="uuid:randomUUID()"/>
+                        <label for="{$noteIconId}" class="notes-icon"/>
+                        <input type="checkbox" id="{$noteIconId}"/>
+                    </span>
+                </xsl:if>
+            </div>
+            <xsl:if test="$correspondingNotes != ''">
+                <div class="notes-container">
+                    <ul>
+                        <xsl:for-each select="$correspondingNotes">
+                            <xsl:apply-templates/>
+                        </xsl:for-each>
+                    </ul>
+
+                </div>
+            </xsl:if>
         </div>
     </xsl:template>
-    
-    
+
     <!-- LINE-PARTS -->
-    <xsl:template match="g[not(@cert)]">        
-        <span class="g" 
-            id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
+    <xsl:template match="g[not(@cert)]">
+        <span class="g" id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
             <xsl:apply-templates/>
-        </span>    
+        </span>
     </xsl:template>
-    
-    <xsl:template match="g[@cert]">        
-        <span class="g"
-            data-cert="{@cert}"
+
+    <xsl:template match="g[@cert]">
+        <span class="g" data-cert="{@cert}"
             id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
             <xsl:apply-templates/>
-        </span>    
+        </span>
     </xsl:template>
-    
+
     <xsl:template match="metamark[contains(@rend, 'Line') or contains(@rend, 'line')]">
         <xsl:variable name="rend" select="@rend"/>
         <hr class="metamark-line {$rend}" data-rend="{$rend}"/>
     </xsl:template>
-    
+
     <xsl:template match="line//part">
-        <span class="part" 
-            id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
-            <xsl:apply-templates />
+        <span class="part" id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
+            <xsl:apply-templates/>
         </span>
     </xsl:template>
-    
+
     <xsl:template match="line//seg">
-        <span class="seg" 
-            id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
-            <xsl:apply-templates />
+        <span class="seg" id="{if(@xml:id) then (@xml:id) else ('part_'||generate-id(.))}">
+            <xsl:apply-templates/>
         </span>
     </xsl:template>
-    
-</xsl:stylesheet>
\ No newline at end of file
+
+    <!-- notes -->
+
+    <xsl:template match="facsimile/notes"/>
+
+    <xsl:template match="note">
+        <li class="note-item">
+            <xsl:variable name="noteItemId" select="uuid:randomUUID()"/>
+            <label for="{$noteItemId}">
+                <xsl:value-of select="@type"/>
+            </label>
+            <input id="{$noteItemId}" type="checkbox"/>
+            <span>
+                <xsl:apply-templates/>
+            </span>
+
+        </li>
+    </xsl:template>
+
+</xsl:stylesheet>
diff --git a/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl b/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl
index 87be5edea7fbe67a36a9ee49b58a0d5e653de3ba..ec137f785f6b05e49ab3c5ec2d0d42369fab35d0 100644
--- a/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl
+++ b/scenarios/xslt/edxml2html/libs/html-philology.lib.xsl
@@ -1,155 +1,188 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-    xmlns:xs="http://www.w3.org/2001/XMLSchema"
-    xmlns:tei="http://www.tei-c.org/ns/1.0"
-    xmlns="http://www.w3.org/1999/xhtml"
-    exclude-result-prefixes="xs"
-    version="2.0" xpath-default-namespace="http://sub.uni-goettingen.de/edxml#">
-    
+    xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:uuid="java:java.util.UUID"
+    xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xs" version="2.0"
+    xpath-default-namespace="http://sub.uni-goettingen.de/edxml#">
+
     <xsl:template match="@xml:lang">
-        <xsl:attribute name="data-lang"><xsl:value-of select="data(.)"/></xsl:attribute>
+        <xsl:attribute name="data-lang">
+            <xsl:value-of select="data(.)"/>
+        </xsl:attribute>
     </xsl:template>
-    
+
     <xsl:template match="@n">
-        <xsl:attribute name="data-n"><xsl:value-of select="data(.)"/></xsl:attribute>
+        <xsl:attribute name="data-n">
+            <xsl:value-of select="data(.)"/>
+        </xsl:attribute>
         <!--<xsl:attribute name="data-roman-n"><xsl:number value="data(.)" format="I"/></xsl:attribute>-->
     </xsl:template>
-    
+
     <xsl:template match="philology">
-        <div class="philology section" 
+        <div class="philology section"
             id="{if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))}">
-            <xsl:apply-templates />
+            <xsl:apply-templates/>
         </div>
     </xsl:template>
-    
+
     <xsl:template match="philology/units">
         <div class="units">
-            <xsl:apply-templates />
+            <xsl:apply-templates/>
             <!--<table>
                 <xsl:apply-templates mode="table"/>
             </table>-->
         </div>
     </xsl:template>
-    
+
     <xsl:template match="philology//unit">
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))"/>
-        <xsl:variable name="corresp" select="if(@corresp) then (tokenize(@corresp, ' ')) else (false())"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('facs_' || generate-id(.))"/>
+        <xsl:variable name="corresp" select="
+                if (@corresp) then
+                    (tokenize(@corresp, ' '))
+                else
+                    (false())"/>
         <div class="unit" id="{$id}" data-corresp="{$corresp}">
             <div class="unit-container">
-                <!--<div class="anchor-container">
-                    <a class="anchor" href="#{$id}">
-                        <span class="unit-label">Kolon</span>
-                        <span class="unit-nr">
-                            <xsl:apply-templates select="@n"/>
-                            <xsl:attribute name="data-count-preceding"><xsl:value-of select="count(preceding::unit)+1"/></xsl:attribute>
-                            <xsl:attribute name="data-count-preceding-sibling"><xsl:value-of select="count(preceding-sibling::unit)+1"/></xsl:attribute>
-                        </span>
-                        <span class="unit-count">
-                            <xsl:value-of select="count(preceding::unit)+1"/>
-                        </span>
-                    </a>
-                </div>-->
-                <xsl:apply-templates />
-                <xsl:if test="not(child::notes)">
-                    <div class="notes section-tab"/>
-                </xsl:if>
+                <xsl:apply-templates select="*[not(self::notes)]"/>
+                <div class="notes section-tab">
+                    <xsl:if test="child::notes">
+                        <xsl:variable name="noteIconId" select="uuid:randomUUID()"/>
+                        <label for="{$noteIconId}" class="notes-icon"/>
+                        <input type="checkbox" id="{$noteIconId}"/>
+                    </xsl:if>
+                </div>
+            </div>
+            <div class="notes-container">
+                <xsl:apply-templates select="notes"/>
             </div>
         </div>
     </xsl:template>
-    
+
     <xsl:template match="philology//unit" mode="table">
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))"/>
-        <xsl:variable name="corresp" select="if(@corresp) then (tokenize(@corresp, ' ')) else (false())"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('facs_' || generate-id(.))"/>
+        <xsl:variable name="corresp" select="
+                if (@corresp) then
+                    (tokenize(@corresp, ' '))
+                else
+                    (false())"/>
         <tr class="unit" id="{$id}" data-corresp="{$corresp}">
             <td class="head hide">
                 <a class="anchor" href="#{$id}">
                     <span class="unit-label">Kolon</span>
-                    <span class="unit-nr"><xsl:apply-templates select="@n"/></span>
+                    <span class="unit-nr">
+                        <xsl:apply-templates select="@n"/>
+                    </span>
                 </a>
             </td>
             <xsl:apply-templates mode="table" select="transcription"/>
             <xsl:apply-templates mode="table" select="translation"/>
         </tr>
     </xsl:template>
-    
-    
-    
-    
+
+
+
+
     <xsl:template match="philology//transcription">
         <div class="transcription section-tab">
-            <xsl:apply-templates select="@*|node()"/>
+            <xsl:apply-templates select="@* | node()"/>
         </div>
     </xsl:template>
-    
+
     <xsl:template match="transcription/@type">
-        <xsl:attribute name="data-type"><xsl:value-of select="data(.)"/></xsl:attribute>
+        <xsl:attribute name="data-type">
+            <xsl:value-of select="data(.)"/>
+        </xsl:attribute>
     </xsl:template>
-    
+
     <xsl:template match="philology//transcription" mode="table">
         <td class="transcription section-tab">
             <xsl:apply-templates select="@*"/>
             <table>
                 <tr>
-                <xsl:for-each select="node()[not(normalize-space(.)='')]">
-                    <xsl:apply-templates select="." mode="table-items"/>
-                </xsl:for-each>
+                    <xsl:for-each select="node()[not(normalize-space(.) = '')]">
+                        <xsl:apply-templates select="." mode="table-items"/>
+                    </xsl:for-each>
                 </tr>
             </table>
         </td>
     </xsl:template>
-    
-    
-    
-    
-    
-    
-    
+
+
+
+
+
+
+
     <xsl:template match="philology//translation">
         <div class="translation section-tab">
-            <xsl:apply-templates select="@*|node()"/>
+            <xsl:apply-templates select="@* | node()"/>
         </div>
     </xsl:template>
-    
+
     <xsl:template match="philology//translation" mode="table">
         <td class="translation section-tab">
-            <xsl:apply-templates select="@*|node()"/>
+            <xsl:apply-templates select="@* | node()"/>
         </td>
     </xsl:template>
-    
-    <xsl:template match="translation/element()|transcription/element()">
+
+    <xsl:template match="translation/element() | transcription/element()">
         <span class="{local-name()} item">
             <span class="conti">
                 <xsl:apply-templates/>
             </span>
         </span>
     </xsl:template>
-    
-    <xsl:template match="translation/text()[not(normalize-space(.)='')]|transcription/text()[not(normalize-space(.)='')]">
+
+    <xsl:template
+        match="translation/text()[not(normalize-space(.) = '')] | transcription/text()[not(normalize-space(.) = '')]">
         <span class="text item">
             <xsl:value-of select="."/>
         </span>
     </xsl:template>
-    
-    
+
+
     <xsl:template match="philology//lb[@n]">
         <span class="lb item">
             <xsl:value-of select="data(@n)"/>
         </span>
     </xsl:template>
-    
-    
+
+
     <xsl:template match="philology//phr">
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))"/>
-        <xsl:variable name="corresp" select="if(@corresp) then (tokenize(@corresp, ' ')) else (false())"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('facs_' || generate-id(.))"/>
+        <xsl:variable name="corresp" select="
+                if (@corresp) then
+                    (tokenize(@corresp, ' '))
+                else
+                    (false())"/>
         <span class="phr" id="{$id}">
             <xsl:apply-templates/>
         </span>
     </xsl:template>
-    
-    
+
+
     <xsl:template match="philology//w">
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))"/>
-        <xsl:variable name="corresp" select="if(@corresp) then (tokenize(@corresp, ' ')) else (false())"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('facs_' || generate-id(.))"/>
+        <xsl:variable name="corresp" select="
+                if (@corresp) then
+                    (tokenize(@corresp, ' '))
+                else
+                    (false())"/>
         <span class="w item" tabindex="1" id="{$id}">
             <span class="body">
                 <xsl:apply-templates/>
@@ -160,7 +193,9 @@
                         <xsl:when test="@ana">
                             <xsl:value-of select="@ana"/>
                         </xsl:when>
-                        <xsl:otherwise><xsl:text> </xsl:text></xsl:otherwise>
+                        <xsl:otherwise>
+                            <xsl:text> </xsl:text>
+                        </xsl:otherwise>
                     </xsl:choose>
                 </span>
                 <span class="lemma">
@@ -168,44 +203,80 @@
                         <xsl:when test="@lemma">
                             <xsl:value-of select="@lemma"/>
                         </xsl:when>
-                        <xsl:otherwise><xsl:text> </xsl:text></xsl:otherwise>
+                        <xsl:otherwise>
+                            <xsl:text> </xsl:text>
+                        </xsl:otherwise>
                     </xsl:choose>
                 </span>
             </span>
         </span>
     </xsl:template>
-    
+
     <xsl:template match="philology//notes">
-        <div class="notes section-tab">
-            <xsl:apply-templates/>
-        </div>
+        <xsl:variable name="targets" select="note/@target"/>
+        <xsl:variable name="targetsUnique" select="distinct-values($targets)"/>
+        <xsl:variable name="thisNotes" select="."/>
+        <ul>
+            <xsl:for-each select="$targetsUnique">
+                <li class="note-list">
+                    <xsl:variable name="targetUnique" select="."/>
+                    <xsl:variable name="noteListId" select="uuid:randomUUID()"/>
+                    <label for="{$noteListId}">
+                        <xsl:variable name="targetIds" select="tokenize($targetUnique, ' ')"/>
+                        <xsl:for-each select="$targetIds">
+                            <xsl:variable name="targetId" select="substring(., 2)"/>                            
+                            <xsl:apply-templates select="root($thisNotes)//*[@xml:id = $targetId]"/>                            
+                        </xsl:for-each>
+                    </label>
+                    <input id="{$noteListId}" type="checkbox"/>
+                    <ul>
+                        <xsl:apply-templates
+                            select="$thisNotes//note[@target = $targetUnique]"/>
+                    </ul>
+                </li>
+            </xsl:for-each>
+        </ul>
     </xsl:template>
-    
+
     <xsl:template match="philology//note">
-        <span class="note">📌
-            <span class="notetext">
+        <li class="note-item">
+            <xsl:variable name="noteItemId" select="uuid:randomUUID()"/>
+            <label for="{$noteItemId}">
+                <xsl:value-of select="@type"/>
+            </label>
+            <input id="{$noteItemId}" type="checkbox"/>
+            <span>
                 <xsl:apply-templates/>
             </span>
-        </span>        
+            
+        </li>
     </xsl:template>
-    
-    
+
+
     <!-- TABLE ITEMS -->
     <xsl:template match="node()" mode="table-items">
         <td class="{local-name()}">
             <xsl:apply-templates/>
         </td>
     </xsl:template>
-    
+
     <xsl:template match="philology//lb" mode="table-items">
         <td class="lb">
             <xsl:apply-templates select="@*"/>
         </td>
     </xsl:template>
-   
+
     <xsl:template match="philology//phr" mode="table-items">
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))"/>
-        <xsl:variable name="corresp" select="if(@corresp) then (tokenize(@corresp, ' ')) else (false())"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('facs_' || generate-id(.))"/>
+        <xsl:variable name="corresp" select="
+                if (@corresp) then
+                    (tokenize(@corresp, ' '))
+                else
+                    (false())"/>
         <td class="phr" id="{$id}">
             <table>
                 <tr>
@@ -214,17 +285,27 @@
             </table>
         </td>
     </xsl:template>
-    
+
     <xsl:template match="philology//w" mode="table-items">
-        <xsl:variable name="id" select="if(@xml:id) then (@xml:id) else ('facs_'||generate-id(.))"/>
-        <xsl:variable name="corresp" select="if(@corresp) then (tokenize(@corresp, ' ')) else (false())"/>
+        <xsl:variable name="id" select="
+                if (@xml:id) then
+                    (@xml:id)
+                else
+                    ('facs_' || generate-id(.))"/>
+        <xsl:variable name="corresp" select="
+                if (@corresp) then
+                    (tokenize(@corresp, ' '))
+                else
+                    (false())"/>
         <td class="w item" tabindex="1" id="{$id}">
             <span class="ana">
                 <xsl:choose>
                     <xsl:when test="@ana">
                         <xsl:value-of select="@ana"/>
                     </xsl:when>
-                    <xsl:otherwise><xsl:text> </xsl:text></xsl:otherwise>
+                    <xsl:otherwise>
+                        <xsl:text> </xsl:text>
+                    </xsl:otherwise>
                 </xsl:choose>
             </span>
             <span class="lemma">
@@ -232,7 +313,9 @@
                     <xsl:when test="@lemma">
                         <xsl:value-of select="@lemma"/>
                     </xsl:when>
-                    <xsl:otherwise><xsl:text> </xsl:text></xsl:otherwise>
+                    <xsl:otherwise>
+                        <xsl:text> </xsl:text>
+                    </xsl:otherwise>
                 </xsl:choose>
             </span>
             <span class="value">
@@ -240,7 +323,7 @@
             </span>
         </td>
     </xsl:template>
-    
-    
-    
-</xsl:stylesheet>
\ No newline at end of file
+
+
+
+</xsl:stylesheet>