diff --git a/src/sass/style.scss b/src/sass/style.scss
index f6dbc57e7..6846b3567 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -2570,9 +2570,10 @@ key {
       margin: 0;
     }
 
-    .text {
+    & > .text {
       align-self: normal;
       color: var(--text-color);
+      grid-area: text;
     }
 
     .buttons {
@@ -2770,9 +2771,10 @@ key {
       grid-template-columns: 2fr 1fr;
       grid-template-areas:
         "title tabs"
+        "text text"
         "buttons buttons";
       column-gap: 2rem;
-      row-gap: 0.5rem;
+      // row-gap: 0.5rem;
 
       .tabs {
         display: grid;
@@ -2811,6 +2813,7 @@ key {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 0.5rem;
+        margin-top: 0.5rem;
       }
     }
   }
diff --git a/static/index.html b/static/index.html
index 83dce88ef..fe4e5a408 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1916,6 +1916,11 @@
               </div>
               <div class="section funbox">
                 <h1>funbox</h1>
+                <div class="text">
+                  These are special modes that change the website in some
+                  special way (by altering the word generation, behaviour of the
+                  website or the looks). Give each one of them a try!
+                </div>
                 <div class="buttons"></div>
               </div>
               <div class="sectionSpacer"></div>
@@ -2129,6 +2134,11 @@
               </div>
               <div class="section layout">
                 <h1>layout override</h1>
+                <div class="text">
+                  With this setting you can emulate other layouts. This setting
+                  is best kept default, as it can break things like dead keys
+                  and alt layers.
+                </div>
                 <div class="buttons"></div>
               </div>
               <div class="sectionSpacer"></div>