diff --git a/index.html b/index.html
index c6fdf07..f4279a2 100644
--- a/index.html
+++ b/index.html
@@ -6,17 +6,61 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Thi.ng rdom</title>
     <style>
-     html, body { padding: 0; margin: 0; min-height: 100vh; }
+     :root {
+         --background-color: #eee;
+         --primary-color: #225;
+         --secondary-color: #99b;
+     }
+
+     html, body {
+         padding: 0;
+         margin: 0;
+         min-height: 100vh;
+     }
+
      body {
-       background: #eee;
-       color: #222;
+       background: var(--background-color);
+       color: var(--primary-color);
        font-family: sans-serif;
        padding: 40px;
+       font-size: 14px;
      }
 
      canvas {
-       border: 1px solid #99b;
+       border: 1px solid var(--primary-color);
      }
+
+     h1, h2 {
+         margin: 0.6rem 0;
+     }
+
+     h1:first-child, h2:first-child {
+         margin-top: 0
+     }
+
+     label {
+         display: block;
+         margin: 0.2rem 0;
+     }
+
+     @media screen and (min-width: 1024px) {
+         div.container {
+             display: grid;
+             grid-template: 'canvas settings';
+             grid-template-columns: auto minmax(0, 1fr);
+             grid-gap: 40px;
+         }
+
+         main {
+             grid-area: canvas;
+         }
+
+         aside {
+             grid-area: settings;
+             align-self: center;
+         }
+     }
+
     </style>
   </head>
   <body>
diff --git a/src/main.ts b/src/main.ts
index 398dc04..806f576 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,6 +18,10 @@ const cellSize = reactive(cellSize_).map(num => {
   return Number.isNaN(next)|| next < 5 ? 5 : next
 })
 
+// const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color')
+const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
+const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color')
+
 // available size for a2: 420 * 594
 const width = 420
 const height = 594
@@ -52,7 +56,7 @@ const stitches = (seed: number, maxCells: number) =>
 const scene = sync({
   src: { cellSize, xs, ys, }
 }).map(({ cellSize, xs, ys }) => {
-  console.log({ cellSize, xs, ys })
+  // console.log({ cellSize, xs, ys })
 
   const minPadding = cellSize
 
@@ -80,7 +84,7 @@ const scene = sync({
 
   const scene = translate(
     group(
-      { __background: '#eee', stroke: '#222' },
+      { __background: primaryColor, stroke: secondaryColor },
       [...yLines, ...xLines]
     ),
     [xPadding, yPadding]
@@ -90,36 +94,35 @@ const scene = sync({
 })
 
 $compile(
-  ["main",
-   {},
-   ["h1", {}, "Hitomezashi Patterns"],
-   $canvas(scene, size),
-   ["h2", {}, "Settings"],
-   ["div", {}, ["label", {}, "Grid size: ",
-                ["input", {
-                  type: "number",
-                  min: "5",
-                  value: cellSize.deref()!,
-                  oninput: $input(cellSize)
-                }]]],
-   ["div", {}, ["label", {}, "X Pattern: ",
-                ["input", {
-                  type: "text",
-                  value: xs_,
-                  oninput: $input(ys)
-                }]]],
-   ["div", {}, ["label", {}, "Y Pattern: ",
-                ["input", {
-                  type: "text",
-                  value: ys_,
-                  oninput: $input(ys)
-                }]]],
-   ["h2", {}, "SVG Export"],
-   ["div", {},
-    ["textarea", {
+  ["div.container", {},
+   ["main", {},
+    ["h1", {}, "Hitomezashi Patterns"],
+    $canvas(scene, size)],
+   ["aside", {},
+    ["h2", {}, "Settings"],
+    ["div", {}, ["label", {}, "Grid size: ",
+                 ["input", {
+                   type: "number",
+                   min: "5",
+                   value: cellSize.deref()!,
+                   oninput: $input(cellSize)
+                 }]]],
+    ["div", {}, ["label", {}, "X Pattern: ",
+                 ["input", {
+                   type: "text",
+                   value: xs_,
+                   oninput: $input(ys)
+                 }]]],
+    ["div", {}, ["label", {}, "Y Pattern: ",
+                 ["input", {
+                   type: "text",
+                   value: ys_,
+                   oninput: $input(ys)
+                 }]]],
+    ["h2", {}, "SVG Export"],
+    ["div", {}, ["textarea", {
       value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),
       cols: 80,
       rows: 20
-    }]]
-  ]
+    }]]]]
 ).mount(document.body)
