diff --git a/index.html b/index.html
index 01be493..32a574b 100644
--- a/index.html
+++ b/index.html
@@ -17,72 +17,78 @@
             Ternary Graph Generator
         </div>
         <hr/>
-        <div class="group">
-        <h3>Axis 1</h3>
-            <div class="input">
-                <p>Title:</p>
-                <input id="axis-1-title" value="axis 1"/>
-            </div>
-            <div class="input">
-                <p>Start value:</p>
-                E<input type="number" id="axis-1-start" value="0"/>
-                <button id="axis-1-start-down">▼</button>
-                <button id="axis-1-start-up">▲</button>
+        <div id="main-content">
+            <div id="controls">
+                <div class="group">
+                <h3>Axis 1</h3>
+                    <div class="input">
+                        <p>Title:</p>
+                        <input id="axis-1-title" value="axis 1"/>
+                    </div>
+                    <div class="input">
+                        <p>Start value:</p>
+                        E<input type="number" id="axis-1-start" value="0"/>
+                        <button id="axis-1-start-down">▼</button>
+                        <button id="axis-1-start-up">▲</button>
+                    </div>
+                </div>
+                <div class="group">
+                <h3>Axis 2</h3>
+                    <div class="input">
+                        <p>Title:</p>
+                        <input id="axis-2-title" value="axis 2"/>
+                    </div>
+                    <div class="input">
+                        <p>Start value:</p>
+                        E<input type="number" id="axis-2-start" value="0"/>
+                        <button id="axis-2-start-down">▼</button>
+                        <button id="axis-2-start-up">▲</button>
+                    </div>
+                </div>
+                <div class="group">
+                <h3>Axis 3</h3>
+                    <div class="input">
+                        <p>Title:</p>
+                        <input id="axis-3-title" value="axis 3"/>
+                    </div>
+                    <div class="input">
+                        <p>Start value:</p>
+                        E<input type="number" id="axis-3-start" value="0"/>
+                        <button id="axis-3-start-down">▼</button>
+                        <button id="axis-3-start-up">▲</button>
+                    </div>
+                </div>
+                
+                <div class="input">
+                    <p>Axis title text size (px):</p>
+                    <input type="number" id="axis-title-size" value="16"/>
+                    <button id="axis-title-size-down">▼</button>
+                    <button id="axis-title-size-up">▲</button>
+                </div>
+                <div class="input">
+                    <p>Tick label text size (px):</p>
+                    <input type="number" id="tick-label-size" value="12"/>
+                    <button id="tick-label-size-down">▼</button>
+                    <button id="tick-label-size-up">▲</button>
+                </div>
+                <div class="input">
+                    <p>Ticks:</p>
+                    <input type="number" id="ticks" value="10"/>
+                    <button id="ticks-down">▼</button>
+                    <button id="ticks-up">▲</button>
+                </div>
+                <div class="input">
+                    <p>Tick size (px):</p>
+                    <input type="number" id="tick-size" value="5"/>
+                    <button id="tick-size-down">▼</button>
+                    <button id="tick-size-up">▲</button>
+                </div>
+                <a id="download-button">
+                    <button>Download SVG</button>
+                </a>
             </div>
+            <div id="svg-container" class="my-class"></div>
         </div>
-        <div class="group">
-        <h3>Axis 2</h3>
-            <div class="input">
-                <p>Title:</p>
-                <input id="axis-2-title" value="axis 2"/>
-            </div>
-            <div class="input">
-                <p>Start value:</p>
-                E<input type="number" id="axis-2-start" value="0"/>
-                <button id="axis-2-start-down">▼</button>
-                <button id="axis-2-start-up">▲</button>
-            </div>
-        </div>
-        <div class="group">
-        <h3>Axis 3</h3>
-            <div class="input">
-                <p>Title:</p>
-                <input id="axis-3-title" value="axis 3"/>
-            </div>
-            <div class="input">
-                <p>Start value:</p>
-                E<input type="number" id="axis-3-start" value="0"/>
-                <button id="axis-3-start-down">▼</button>
-                <button id="axis-3-start-up">▲</button>
-            </div>
-        </div>
-        
-        <div class="input">
-            <p>Axis title text size (px):</p>
-            <input type="number" id="axis-title-size" value="16"/>
-            <button id="axis-title-size-down">▼</button>
-            <button id="axis-title-size-up">▲</button>
-        </div>
-        <div class="input">
-            <p>Tick label text size (px):</p>
-            <input type="number" id="tick-label-size" value="12"/>
-            <button id="tick-label-size-down">▼</button>
-            <button id="tick-label-size-up">▲</button>
-        </div>
-        <div class="input">
-            <p>Ticks:</p>
-            <input type="number" id="ticks" value="10"/>
-            <button id="ticks-down">▼</button>
-            <button id="ticks-up">▲</button>
-        </div>
-        <div class="input">
-            <p>Tick size (px):</p>
-            <input type="number" id="tick-size" value="5"/>
-            <button id="tick-size-down">▼</button>
-            <button id="tick-size-up">▲</button>
-        </div>
-        <button onclick="downloadSVG">Download SVG</button>
-        <div id="svg-container" class="my-class"></div>
     </body>
     <script src="index.js"></script>
 </html>
\ No newline at end of file
diff --git a/spago.dhall b/spago.dhall
index a331c25..7393622 100644
--- a/spago.dhall
+++ b/spago.dhall
@@ -19,6 +19,7 @@ to generate this file without the comments in this block.
   , "exceptions"
   , "foldable-traversable"
   , "integers"
+  , "js-uri"
   , "lists"
   , "maybe"
   , "numbers"
diff --git a/src/Main.purs b/src/Main.purs
index 724d8b9..e55f97e 100644
--- a/src/Main.purs
+++ b/src/Main.purs
@@ -15,6 +15,7 @@ import Effect (Effect)
 import Effect.Console (log)
 import Effect.Class (liftEffect)
 import Effect.Exception (throw)
+import JSURI (encodeURIComponent)
 import TernaryGraph (Dimension, svgTextID, ternaryGraph, ternaryGraphSvg, TextStyle, tickLabelStrings)
 import TernaryGraph as TernaryGraph
 import Web.DOM.Document (contentType
@@ -228,6 +229,15 @@ update = do
   newNode <- importNode svgNode true document
   appendChild newNode svgContainer
 
+  -- Set SVG content to download button
+  downloadButtonEl <- myGetElementById document "download-button"
+  encodedSVG <- case encodeURIComponent mySVG of
+    Nothing -> throw "Failed to encode SVG"
+    Just encoded -> pure encoded
+  let downloadText = "data:xml/svg;charset=utf-8," <> encodedSVG
+  Element.setAttribute "href" downloadText downloadButtonEl
+  Element.setAttribute "download" "ternary-graph.svg" downloadButtonEl 
+
 addUpdateListener :: Document -> String -> Effect Unit
 addUpdateListener doc id = do
   listener <- eventListener updateEvent
@@ -251,8 +261,6 @@ registerInputIncButton doc inputID buttonID inc = do
   element <- myGetElementById doc buttonID
   addEventListener (EventType "click") listener true (Element.toEventTarget element)
 
-
-
 main :: Effect Unit
 main = do
   w <- window
diff --git a/ternary-graph.css b/ternary-graph.css
index 6e9feb8..3523226 100644
--- a/ternary-graph.css
+++ b/ternary-graph.css
@@ -6,6 +6,11 @@ button {
   border-top-color: #E3E3E3;
 }
 
+#controls {
+  display: flex;
+  flex-direction: column;
+}
+
 .group {
   display: flex;
   flex-direction: column;
@@ -28,10 +33,16 @@ input[type="number"] {
 }
 
 .input {
+  display: flex;
+  flex-direction: row;
   height: 1.5em;
   margin-bottom: 0.4em;
 }
 
+#main-content {
+    flex-direction: row;
+}
+
 p {
     margin: auto;
     margin-right: 0.5em;