diff --git a/src/App.css b/src/App.css
index b890913..7e5defd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,13 +3,24 @@
   width: 100%;
 }
 
+h1 {
+  font-size: 24px;
+  margin: 0;
+}
+
 .container {
   display: flex;
 }
 
 .controls {
+  padding-top: 10px;
+
+}
+
+.sidebar {
   width: 25%;
-  padding: 1rem;
+  min-width: 250px;
+  padding: 10px;
 }
 
 #map {
@@ -19,4 +30,60 @@
 
 .faq {
   font-size: 12px;
+}
+
+.input {
+  display: flex;
+}
+
+.label {
+  min-width: 100px;
+  width: 30%;
+  padding: 10px;
+}
+
+.text {
+  padding: 10px;
+  border-top: solid 1px #f1f1f1;
+  margin-top: 10px;
+}
+
+.input input,
+.input select {
+  width: 70%;
+  text-align: center;
+  margin-right: 10px;
+  box-sizing: border-box;
+  border: solid 1px #d0d0d0;
+  height: 30px;
+  display: flex;
+  align-self: center;
+}
+
+
+
+@media screen and (max-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    flex-flow: column-reverse;
+  }
+
+  #map {
+    width: 100%;
+    height: 50vh;
+  }
+
+  .sidebar {
+    width: calc(100% - 20px);
+  }
+
+  .faq {
+    font-size: 10px;
+  }
+
+  .text {
+    height: 20vh;
+    overflow: scroll;
+  }
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 8697561..a3fc1c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -190,80 +190,78 @@ function App() {
 
   return (
     <div class="container">
-      <div class="controls">
-        <select
-          onChange={(e) => {
-            if (draw) {
-              draw.setMode(e.target.value);
-            }
-          }}
-        >
-          <option value="rectangle">rectangle mode</option>
-          <option value="polygon">polygon mode</option>
-          <option value="angled-rectangle">angled rectangle mode</option>
-          <option value="circle">circle mode</option>
-        </select>
-        <p>
-          max cells:{" "}
-          <input
-            type="text"
-            value={maxCells()}
-            onInput={(e) => {
-              setMaxCells(+e.target.value || 1);
-            }}
-          />
-        </p>
-        <p>
-          max level:{" "}
-          <input
-            type="text"
-            value={maxLevel()}
-            onInput={(e) => {
-              setMaxLevel(+e.target.value || 1);
-            }}
-          />
-        </p>
-        <button onClick={clear}>clear</button>
-        <p>
-          Visual demo of{" "}
-          <a target="_blank" href="https://github.com/missinglink/s2js">
-            s2js
-          </a>
-          , a pure TypeScript implementation of{" "}
-          <a href="http://s2geometry.io" target="_blank">
-            S2 Geometry.
-          </a>
-          <br />
-          Draw any region to see its cell covering.
-          <br />
-          Built with{" "}
-          <a target="_blank" href="http://terradraw.io">
-            Terra Draw
-          </a>
-          ,{" "}
-          <a target="_blank" href="http://maplibre.org">
-            MapLibre
-          </a>{" "}
-          and{" "}
-          <a target="_blank" href="https://github.com/protomaps">
-            Protomaps
-          </a>{" "}
-          tiles.
-        </p>
-        <p class="faq">
-          <strong>Why are there gaps between cells?</strong> The visual cells
-          are approximated by trapezoids; in reality they are geodesics, or
-          straight on great circles.
-        </p>
-        <p class="faq">
-          <strong>Why don't the cells cover my region?</strong> The library
-          interprets edges in the input also as geodesics; this can be mitigated
-          by shorter distances between boundary vertices.
-        </p>
-        <a href="https://github.com/bdon/s2js-demos">Fork me on GitHub</a>
+      <div class="sidebar">
+        <div class="controls">
+          <div class="input">
+            <div class="label">
+              <label>
+                draw mode:
+              </label>
+            </div>
+            <select
+              onChange={(e) => {
+                if (draw) {
+                  draw.setMode(e.target.value);
+                }
+              }}
+            >
+              <option value="rectangle">rectangle mode</option>
+              <option value="polygon">polygon mode</option>
+              <option value="angled-rectangle">angled rectangle mode</option>
+              <option value="circle">circle mode</option>
+            </select>
+          </div>
+
+          <div class="input">
+            <div class="label">
+              <label>
+                max cells:
+              </label>
+            </div>
+            <input
+              type="text"
+              value={maxCells()}
+              onInput={(e) => {
+                setMaxCells(+e.target.value || 1);
+              }}
+            />
+          </div>
+          <div class="input">
+            <div class="label">
+              <label>
+                max level:
+              </label>
+            </div>
+            <input
+              type="text"
+              value={maxLevel()}
+              onInput={(e) => {
+                setMaxLevel(+e.target.value || 1);
+              }}
+            />
+          </div>
+          <button onClick={clear}>clear</button>
+        </div>
+        <div class="text">
+          <h1>s2js Demo</h1>
+          <p>
+            Visual demo of <a target="_blank" href="https://github.com/missinglink/s2js">s2js</a>, a pure TypeScript implementation of <a href="http://s2geometry.io" target="_blank">S2 Geometry.</a><br />
+
+            Draw any region to see its cell covering.<br />
+
+            Built with <a target="_blank" href="http://terradraw.io">Terra Draw</a>, <a target="_blank" href="http://maplibre.org">MapLibre</a> and <a target="_blank" href="https://github.com/protomaps">Protomaps</a> tiles.
+          </p>
+          <p class="faq">
+            <strong>Why are there gaps between cells?</strong> The visual cells are approximated by trapezoids; in reality they are geodesics, or straight on great circles.
+          </p>
+          <p class="faq">
+            <strong>Why don't the cells cover my region?</strong> The library interprets edges in the input also as geodesics; this can be mitigated by shorter distances between boundary vertices.
+          </p>
+          <a href="https://github.com/bdon/s2js-demos">Fork me on GitHub</a>
+        </div>
       </div>
       <div id="map"></div>
-    </div>
+    </div >
   );
 }
 
diff --git a/src/index.css b/src/index.css
index a99eb32..74a5226 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,16 +18,13 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {
@@ -46,9 +43,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -59,11 +58,12 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }
-}
-
+}
\ No newline at end of file