diff --git a/scripts/boxesserver b/scripts/boxesserver
index 038bdbc..87f8ce8 100755
--- a/scripts/boxesserver
+++ b/scripts/boxesserver
@@ -333,10 +333,12 @@ class BServer:
 <div class="menu" style="width: 100%">
 """ ]
         for nr, group in enumerate(self.groups):
-            result.append('''<h3 id="h-%s" class="open" onclick="showHide('%s')">%s</h3>\n<div id="%s">\n''' % (nr, nr, _(group.title), nr))
-            result.append("""
-            <img style="width: 200px;" id="sample-%s" src="static/nothing.png" alt="" />
-            <ul>\n""" % (group.name))
+            result.append(f'''
+<h3 id="h-{nr}" class="open" onclick="showHide('{nr}')">{_(group.title)}</h3>\n  <div id="{nr}">
+''')
+            result.append(f"""
+    <img style="width: 200px;" id="sample-{group.name}" src="static/nothing.png" alt="" />
+    <ul>\n""")
             for box in group.generators:
                 name = box.__name__
                 if name in ("TrayLayout2", ):
@@ -344,9 +346,12 @@ class BServer:
                 docs = ""
                 if box.__doc__:
                     docs = " - " + _(box.__doc__)
-                result.append("""  <li onmouseenter="change('%s', 'static/samples/%s-thumb.jpg')" onmouseleave="changeback('%s')"><a href="%s%s">%s</a>%s</li>\n""" % (
-                    group.name, name, group.name, name, langparam,  _(name), docs))
-            result.append("</ul>\n</div>\n")
+                result.append(f"""
+         <li onmouseenter="change('{group.name}', 'static/samples/{name}-thumb.jpg')" onmouseleave="changeback('{group.name}')"><a href="{name}{langparam}">{_(name)}</a>{docs}</li>\n""")
+            result.append("""
+    </ul>
+  </div>
+""")
         result.append("""
 </div>