diff --git a/index.html b/index.html
index a9a66c9..c45d585 100644
--- a/index.html
+++ b/index.html
@@ -7,14 +7,13 @@
         <script>
             /*
              * TODO:
-             * - rewrite functions to not use copied functions 
-             * - add UI
-             * - add style
-             * - make everything not look like made at 0:41 on a phone
+             * - [ ] rewrite functions to not use copied functions 
+             * - [x] add UI
+             * - [x] add style
+             * - [ ] make everything not look like made at 0:41 on a phone
              */
-            function hex2Bytes(hexdata) {
+            function hexToBytes(hexdata) {
                 // https://stackoverflow.com/a/39396866
-
                 var arr = hexdata.replace(/[^0-9a-fA-F]/g, '')
                     .match(/[0-9a-fA-F]{2}/g);
                 for(var i = 0; i<arr.length; i++) {
@@ -24,7 +23,7 @@
                 return arr;
             }
             
-            function bytes2Base64(byteArray) {
+            function bytesToBase64(byteArray) {
                 // https://stackoverflow.com/a/11562550
                 return btoa(
                     String.fromCharCode.apply(
@@ -43,26 +42,145 @@
                     return bytes;
             }
 
-            function bytes2Hex(byteArray) {
+            function bytesToHex(byteArray) {
                 // https://stackoverflow.com/a/34310051
                 return Array.from(byteArray, function(byte) {
                     return ('0' + (byte & 0xFF).toString(16)).slice(-2);
                 }).join('');
             }
 
-            function infohash2Base64(infohash) {
-                return bytes2Base64(
-                    hex2Bytes(infohash)
+            function infohashToBase64(infohash) {
+                return bytesToBase64(
+                    hexToBytes(infohash)
                 );
             }
-            function base642Infohash(b64) {
-                return bytes2Hex(
+            function base64ToInfohash(b64) {
+                return bytesToHex(
                     base64ToArray(b64)
                 );
             }
+            
+            // Everything for the UI itself
+
+            // Holds the state of tabs.
+            // Intended values are "encode" and "decode"
+            let tabOpen = "encode"
+
+            function switchTab(name) {
+                // Switches the tab
+                // only "encode" and "decode" values are supported
+                if (name === "encode") {
+                    document.getElementById("encode").style.display = "block"
+                    document.getElementById("decode").style.display = "none"
+                } else if (name === "decode") {
+                    document.getElementById("encode").style.display = "none"
+                    document.getElementById("decode").style.display = "block"
+
+                }
+            }
+
+            addEventListener("DOMContentLoaded", (event) => {
+                // Get the current query params
+                const urlParams = new URLSearchParams(window.location.search);
+                if (
+                    urlParams.has("tab") && 
+                    ["encode", "decode"].includes(urlParams.get("tab"))
+                ) {
+                    // Check if tab parameter is set up and is correct
+                    // If not, an default value will be used
+                    tabOpen = urlParams.get("tab")
+                }
+                switchTab(tabOpen)
+                
+                // Show the result of the action performed before reloading
+                if (urlParams.get("tab") === "encode" && urlParams.has("infohashv1")) {
+                    document.getElementById("encodeResult").innerText = infohashToBase64(urlParams.get("infohashv1"))
+                } else if (urlParams.get("tab") === "decode" && urlParams.has("base64value")) {
+                    document.getElementById("decodeResult").innerText = base64ToInfohash(urlParams.get("base64value"))
+                }
+            });
         </script>
+        <style>
+            body {
+                display: flex; flex-direction: column;
+                justify-content: center; text-align: center;
+                background-color: #10101a;
+                color: white;
+                font-family: monospace;
+            }
+            main {
+                padding: 1em;
+                border: 1px solid white;
+                width: 50%; border-radius: 1em;
+            }
+            input {
+                color: white;
+                background-color: transparent;
+                border: 1px solid #50505a;
+            }
+            label {
+                margin-right: 0.5rem;
+            }
+            .tab {
+                border: 1px solid white;
+                padding: 0.5em;
+                border-radius: 0em 1em 1em 1em;
+            }
+            .result:empty { display: none;}
+            .result {
+                background-color: rgba(32, 32, 42, 0.5);
+                margin-top: 1em;
+                padding: 0.5rem;
+                border: 1px solid gray;
+                border-radius: 1em;
+            }
+            .tabBar {
+                display: flex;
+                border-collapse: collapse;
+            }
+            .button {
+                padding: 0.5em;
+                border: 1px solid white;
+                border-bottom: none;
+                transition: box-shadow 200ms ease;
+            }
+            .button:hover {
+                box-shadow: 1px 5px 15px black;
+            }
+            .button:active {
+                background-color: rgba(255,255,255, 0.2);
+            }
+        </style>
     </head>
     <body>
-        open your console 
+        <main>
+            <h1>infohash ↔ base64</h1>
+            <noscript>
+                This tool requires JavaScript to function.
+                You can use DevTools in your browser to look at the code (it's intended to be easily readable).
+            </noscript>
+            <div class="tabBar">
+                <div onclick="switchTab('encode')" class="button">Encode</div>
+                <div onclick="switchTab('decode')" class="button">Decode</div>
+            </div>
+            <div class="tab" id="encode">
+                <form>
+                    <h2>Encode</h2>
+                    <input type="hidden" name="tab" value="encode" />
+                    <label for="infohashv1">infohash v1</label><input type="text" id="infohashv1" name="infohashv1" pattern="[0-9a-f]*" />
+                    <input type="submit" method="get" value="convert"/>
+                </form>
+                <div class="result" id="encodeResult"></div>
+            </div>
+            <div class="tab" id="decode">
+                <form>
+                    <h2>Decode</h2>
+                    <input type="hidden" name="tab" value="decode" />
+                    <label for="base64value">base64 value</label><input type="text" id="base64value" name="base64value" />
+                    <input type="submit" method="get" value="convert"/>
+                </form>
+                <div class="result" id="decodeResult"></div>
+            </div>
+        </main>
     </body>
 </html>