diff --git a/src/App.tsx b/src/App.tsx
index b183a8b..fb8a7e4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,10 +4,12 @@ import {
   createSignal,
   ErrorBoundary,
   For,
+  onMount,
   Show,
 } from "solid-js";
 import { openDatabase } from "./data";
 import Graph from "./Graph";
+import { render, renderToString, renderToStringAsync } from "solid-js/web";
 
 type Unit = "kg" | "lb";
 
@@ -17,6 +19,7 @@ export default function App() {
   const [entries, { refetch }] = createResource(database, async (database) => {
     const entries = await database.getAll("entries");
 
+    console.debug("entries", entries);
     return entries;
   });
 
@@ -33,7 +36,6 @@ export default function App() {
     const weight = input.valueAsNumber;
 
     const currentDatabase = database();
-    console.debug("currentDatabase", currentDatabase);
     const now = new Date();
     currentDatabase?.add(
       "entries",
@@ -78,8 +80,33 @@ export default function App() {
         : weightInput.valueAsNumber * 2.2046226218;
   });
 
+  const [main, setMain] = createSignal<HTMLElement>();
+
+  const width = () => {
+    const element = main();
+    if (element === undefined) return;
+    const clientWidth = element.clientWidth;
+
+    const styles = getComputedStyle(element);
+    return (
+      clientWidth -
+      parseFloat(styles.paddingLeft) -
+      parseFloat(styles.paddingRight)
+    );
+  };
+
+  const properties = () => {
+    const currentWidth = width();
+    const currentEntries = entries();
+    if (currentWidth === undefined || currentEntries === undefined) return;
+
+    return { width: () => currentWidth, entries: () => currentEntries };
+  };
   return (
-    <main class="max-w-xl mx-auto bg-gray-200 h-full p-4 text-emerald-950">
+    <main
+      class="max-w-xl mx-auto bg-gray-200 h-full p-4 text-emerald-950"
+      ref={setMain}
+    >
       <h1 class="text-2xl font-light mb-3">Waight</h1>
       <ErrorBoundary
         fallback={(error, reset) => (
@@ -94,7 +121,9 @@ export default function App() {
           </article>
         )}
       >
-        <Graph entries={() => entries() ?? []} />
+        <Show when={properties()}>
+          {(properties) => <Graph {...properties()} />}
+        </Show>
       </ErrorBoundary>
       <ol class="grid grid-cols-[auto_1fr_auto_auto] gap-y-2">
         <For each={entries()}>
diff --git a/src/Graph.tsx b/src/Graph.tsx
index b4a8786..6fa50f2 100644
--- a/src/Graph.tsx
+++ b/src/Graph.tsx
@@ -15,7 +15,7 @@ import {
   startOfMonth,
 } from "./date";
 
-type Properties = { entries: Accessor<Entry[]> };
+type Properties = { entries: Accessor<Entry[]>; width: Accessor<number> };
 
 type TrendLine = Required<
   Pick<JSX.LineSVGAttributes<SVGLineElement>, "x1" | "x2" | "y1" | "y2">
@@ -266,7 +266,7 @@ function Path({
   );
 }
 
-export default function Graph({ entries }: Properties) {
+export default function Graph({ entries, width }: Properties) {
   // Need to curb time stamp or we get overflow
   const now = new Date();
 
@@ -299,13 +299,13 @@ export default function Graph({ entries }: Properties) {
     to: days,
   });
 
-  const width = 100;
+  // const width = 100;
   const height = 100;
 
   function projectX(x: number) {
     const percentage = x / days;
 
-    const inSvg = percentage * width;
+    const inSvg = percentage * width();
     return inSvg;
   }
 
@@ -374,6 +374,7 @@ export default function Graph({ entries }: Properties) {
         return (
           <svg
             viewBox={`0 0 ${width} ${height}`}
+            xmlns="http://www.w3.org/2000/svg"
             overflow="visible"
             class="w-full"
           >