diff --git a/content/schulchronik/2004.md b/content/schulchronik/2004.md
index 8a724387..78c8b1a4 100644
--- a/content/schulchronik/2004.md
+++ b/content/schulchronik/2004.md
@@ -13,7 +13,7 @@ pretext: >
   Nur der Cantorpreis wurde hauptsächlich für andere Leistungen vergeben. Der Preisträger dieses Jahres ist sehr engagiert und initiierte im November 2003 als Schülersprecher den Schülerstreik. Marcus Syring hat diesen Preis auf jeden Fall verdient und schließt sich mit seiner außergewöhnlichen Arbeit für die Schule als neunter Preisträger in die Reihe großer Cantorianer an.
 topics:
   - title: Franziska Flegel bei der internationalen Olympiade für
-      Nachwuchswissenschaftler
+      Nachwuchs­wissenschaftler
     content: |
       {{< image src="/media/schulchronik/2004/franziska-flegel.webp" >}}
   - title: Wettbewerbserfolge
diff --git a/layouts/schulchronik/single.html b/layouts/schulchronik/single.html
index 397f67a6..ce940efd 100644
--- a/layouts/schulchronik/single.html
+++ b/layouts/schulchronik/single.html
@@ -32,6 +32,7 @@
           </div>
       </div>
       {{ end }}
+    </div>
   {{ end }}
     {{ range .Params.topics }}
       {{ partial "modal" . }}
@@ -39,21 +40,78 @@
     {{ if and .Params.pretext (ne .Params.pretext "\n\n\n") }}
       {{ partial "modal" (dict "title" .Title "content" .Params.pretext) }}
     {{ end }}
-    <div id="wc-canvas"></div>
-    {{ $topics := slice }}
-    {{ if .Params.pretext }}
-      {{ $topics = $topics | append (dict "Title" .Params.Title "Size" (int 200) "ID" (md5 .Title)) }}
-    {{ else }}
-      {{ $topics = $topics | append (dict "Title" .Params.Title "Size" (int 200)) }}
-    {{ end }}
-    {{ range .Params.topics }}
-      {{ if .superhaufen.enable }}
-        {{ $topics  = $topics | append (dict "Title" .title "Size" 30 "ID" (.superhaufen.link | urlize)  "Superhaufen" true ) }}
-      {{ else }}
-        {{ $topics  = $topics | append (dict "Title" .title "Size" 30 "ID" (md5 .title)) }}
+    <!--div id="wc-canvas"></div-->
+    <style>
+      .kh-parent {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        justify-content: space-between;
+        align-content: space-between;
+      }
+      .kh-jahr {
+        grid-column: 2 / 4;
+        grid-row: 2 / 2;
+        justify-self: center;
+        // align-self: center;
+        rotate: -25deg;
+        color: #ffbc3b;
+        margin: 0
+      }
+      .kh-jahr-active {
+        cursor: pointer;
+      }
+      .kh-jahr-active:hover {
+        text-decoration: 3px underline;
+      }
+      .kh-jahr-inner {
+        font-size: 3em;
+      }
+      .kh-0 {
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
+      }
+      .kh-1 {
+        grid-column: 3 / 5;
+        grid-row: 3 / 4;
+      }
+      .kh-2 {
+        grid-column: 1 / 3;
+        grid-row: 3 / 4;
+      }
+      .kh-3 {
+        grid-column: 3 / 5;
+        grid-row: 1 / 2;
+      }
+      .kh {
+        color: #1a1a37;
+        text-align: center;
+        align-self: center;
+        hyphens: manual;
+        cursor: pointer;
+      }
+      .kh:hover {
+        text-decoration: underline;
+      }
+      @media (min-width: 1200px) {
+        .kh-inner {
+          font-size: 1.5em;
+        }
+      }
+    </style>
+    <div class="kh-parent">
+      <div class="kh-jahr h1 {{ if and .Params.pretext (ne .Params.pretext "\n\n\n") }}kh-jahr-active" onclick="$('{{ print `#` (md5 .Title) }}').modal('show')"{{ else }}"{{ end }}><div class="kh-jahr-inner">{{ .Title }}</div></div>
+      {{ $topics := slice }}
+      {{ range .Params.topics }}
+        {{ $topics = $topics | append (dict "titleLength" (len .title) "topic" .) }}
       {{ end }}
-    {{ end }}
-    <script>
+
+      {{ range $id, $topic := sort $topics "titleLength" "desc" }}
+        <div class="kh kh-{{ $id }} h3" onclick="{{ if not $topic.topic.superhaufen.enable }}$('{{ print `#` (md5 $topic.topic.title) }}').modal('show'){{ else }}window.location = '{{ print (`/superhaufen/` | relURL ) ($topic.topic.superhaufen.link | urlize) }}'{{ end }}"><div class="kh-inner">{{ $topic.topic.title | safeHTML }}</div></div>
+      {{ end }}
+    </div>
+    
+    <!--script>
       WordCloud(
         document.getElementById('wc-canvas'),
         {
@@ -62,7 +120,7 @@
               if (item[3])  {
                 window.location.href = "{{ `/superhaufen/` | relURL }}" + item[2];
               } else {
-                $('#' + item[2]).modal('show');
+                ;
               }
             }
           },
@@ -86,7 +144,7 @@
           clearCanvas: true
         } 
       );
-    </script>
+    </script-->
     {{ .Content }}
   </div>
   </div>