diff --git a/index.html b/index.html
index e4b9d86..c7bb5e4 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,9 @@
             background: #fafafa;
             border-radius: .5rem;
             border-spacing: 10px;
+            font-feature-settings: normal;
+            font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
+            font-variation-settings: normal;
         }
     </style>
 </head>
@@ -22,7 +25,10 @@
         import { createElement, div, table, thead, tbody, tr, th, td } from '@laniakeasupercluster/widgets'
 
         const rest = await fetch('http://localhost:2000/api').then(res => res.json())
-        document.body.appendChild(div.childs([
+        const metrics = await fetch('http://localhost:2000/api/metrics').then(res => res.json())
+        const context = createElement({ width: '1000px', height: '300px' }, 'canvas')
+
+        document.body.appendChild(div.w(1000).childs([
             table.childs([
                 thead.childs([
                     tr.childs([
@@ -44,11 +50,11 @@
                         td.text(row.shuju)
                     ]))
                 )
-            ])
+            ]),
+            context
         ]))
 
-        const metrics = await fetch('http://localhost:2000/api/metrics').then(res => res.json())
-        const context = createElement({ width: 800, height: 200 }, 'canvas')
+
 
         new Chart(context, {
             type: 'line',
@@ -71,8 +77,6 @@
             }
         })
 
-        document.body.appendChild(context)
-
     </script>
 </body>