diff --git a/flaskr/templates/projects/zzcxz_vis/index.html b/flaskr/templates/projects/zzcxz_vis/index.html
index cc6052a..e32f7be 100644
--- a/flaskr/templates/projects/zzcxz_vis/index.html
+++ b/flaskr/templates/projects/zzcxz_vis/index.html
@@ -1,5 +1,8 @@
 {% set meta={"title": "zzcxz visualizer", "desc": "Visualize the structure of <a href=https://zzcxz.citrons.xyz/>zzcxz</a>"} %}
 {% extends "/_base.html" %}
+{% block title %}
+<h1 id="title">zzcxz visualizer</h1>
+{% endblock %}
 {% block head %}
 <style>
     main, #graph {
@@ -8,6 +11,10 @@
     main {
         position: relative;
     }
+    #graph {
+        position: absolute;
+    }
+
     h1 {
         color: var(--fg);
     }
@@ -56,6 +63,7 @@
 <div id="graph" style="width: 90vw;"></div>
 
 <div class="uielems border" id="ui" hidden>
+    <h1 style="font-size: 18px;">ZZCXZ Visualizer</h1>
     <div><a href="javascript:void(0)" id="contract-link">&lt;&lt;</a></div>
     Load page: 
     <input type="text" style="width: 6ch" id="load-page" />
diff --git a/flaskr/templates/projects/zzcxz_vis/index.js b/flaskr/templates/projects/zzcxz_vis/index.js
index 8dad0ae..201f4e3 100644
--- a/flaskr/templates/projects/zzcxz_vis/index.js
+++ b/flaskr/templates/projects/zzcxz_vis/index.js
@@ -152,6 +152,8 @@ function selectNode(node) {
 }
 
 function visualize() {
+    document.getElementsByTagName("body")[0].style.width = "min(2000px, 90vw)";
+    document.getElementById("title").hidden = true;
     const zoom = d3.zoom();
     zoom.on("zoom", event => {
         const elems = d3.select("#elems")