diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index be1b0f0..deda917 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -12,5 +12,10 @@
         </value>
       </option>
     </inspection_tool>
+    <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <Languages>
+        <language minSize="63" name="JavaScript" />
+      </Languages>
+    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/darkmode.css b/darkmode.css
new file mode 100644
index 0000000..9bcd48c
--- /dev/null
+++ b/darkmode.css
@@ -0,0 +1,229 @@
+/* Default */
+.theme {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-tap-highlight-color: transparent;
+}
+.icon,
+.toggle {
+    z-index: 1;
+}
+.icon,
+.icon-part {
+    position: absolute;
+}
+.icon {
+    display: block;
+    top: 0.75em;
+    left: 0.75em;
+    width: 1.5em;
+    height: 1.5em;
+    -webkit-transition: var(--trans-dur);
+    transition: var(--trans-dur);
+}
+.icon-part {
+    border-radius: 50%;
+    -webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
+    box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+    width: 1em;
+    height: 1em;
+    -webkit-transition: opacity var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: opacity var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: box-shadow var(--trans-dur) ease-in-out,
+    opacity var(--trans-dur) ease-in-out,
+    transform var(--trans-dur) ease-in-out;
+    transition: box-shadow var(--trans-dur) ease-in-out,
+    opacity var(--trans-dur) ease-in-out,
+    transform var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    -webkit-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    transform: scale(0.5);
+}
+.icon-part ~ .icon-part {
+    background-color: var(--white);
+    border-radius: 0.05em;
+    top: 50%;
+    left: calc(50% - 0.05em);
+    -webkit-transform: rotate(0deg) translateY(0.5em);
+    -ms-transform: rotate(0deg) translateY(0.5em);
+    transform: rotate(0deg) translateY(0.5em);
+    -webkit-transform-origin: 50% 0;
+    -ms-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+    width: 0.1em;
+    height: 0.2em;
+}
+.icon-part:nth-child(3) {
+    -webkit-transform: rotate(45deg) translateY(0.45em);
+    -ms-transform: rotate(45deg) translateY(0.45em);
+    transform: rotate(45deg) translateY(0.45em);
+}
+.icon-part:nth-child(4) {
+    -webkit-transform: rotate(90deg) translateY(0.45em);
+    -ms-transform: rotate(90deg) translateY(0.45em);
+    transform: rotate(90deg) translateY(0.45em);
+}
+.icon-part:nth-child(5) {
+    -webkit-transform: rotate(135deg) translateY(0.45em);
+    -ms-transform: rotate(135deg) translateY(0.45em);
+    transform: rotate(135deg) translateY(0.45em);
+}
+.icon-part:nth-child(6) {
+    -webkit-transform: rotate(180deg) translateY(0.45em);
+    -ms-transform: rotate(180deg) translateY(0.45em);
+    transform: rotate(180deg) translateY(0.45em);
+}
+.icon-part:nth-child(7) {
+    -webkit-transform: rotate(225deg) translateY(0.45em);
+    -ms-transform: rotate(225deg) translateY(0.45em);
+    transform: rotate(225deg) translateY(0.45em);
+}
+.icon-part:nth-child(8) {
+    -webkit-transform: rotate(270deg) translateY(0.5em);
+    -ms-transform: rotate(270deg) translateY(0.5em);
+    transform: rotate(270deg) translateY(0.5em);
+}
+.icon-part:nth-child(9) {
+    -webkit-transform: rotate(315deg) translateY(0.5em);
+    -ms-transform: rotate(315deg) translateY(0.5em);
+    transform: rotate(315deg) translateY(0.5em);
+}
+.label,
+.toggle,
+.toggle-wrap {
+    position: relative;
+}
+.toggle,
+.toggle:before {
+    display: block;
+}
+.toggle {
+    background-color: hsl(48,90%,85%);
+    border-radius: 25% / 50%;
+    -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
+    box-shadow: 0 0 0 0.125em var(--secondary);
+    padding: 0.25em !important;
+    width: 6em;
+    height: 3em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    transform var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+}
+.toggle:before {
+    background-color: var(--yellow);
+    border-radius: 50%;
+    content: "";
+    width: 2.5em;
+    height: 2.5em;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+}
+.toggle:focus {
+    -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
+    box-shadow: 0 0 0 0.125em var(--theme-blue);
+    outline: transparent;
+}
+/* Checked */
+.toggle:checked {
+    background-color: var(--theme-dark-blue);
+}
+.toggle:checked:before,
+.toggle:checked ~ .icon {
+    -webkit-transform: translateX(3em);
+    -ms-transform: translateX(3em);
+    transform: translateX(3em);
+}
+.toggle:checked:before {
+    background-color: var(--theme-blue);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(1) {
+    -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
+    box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    top: 0.25em;
+    left: 0.25em;
+}
+.toggle:checked ~ .icon .icon-part ~ .icon-part {
+    opacity: 0;
+}
+.toggle:checked ~ .icon .icon-part:nth-child(2) {
+    -webkit-transform: rotate(45deg) translateY(0.8em);
+    -ms-transform: rotate(45deg) translateY(0.8em);
+    transform: rotate(45deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(3) {
+    -webkit-transform: rotate(90deg) translateY(0.8em);
+    -ms-transform: rotate(90deg) translateY(0.8em);
+    transform: rotate(90deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(4) {
+    -webkit-transform: rotate(135deg) translateY(0.8em);
+    -ms-transform: rotate(135deg) translateY(0.8em);
+    transform: rotate(135deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(5) {
+    -webkit-transform: rotate(180deg) translateY(0.8em);
+    -ms-transform: rotate(180deg) translateY(0.8em);
+    transform: rotate(180deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(6) {
+    -webkit-transform: rotate(225deg) translateY(0.8em);
+    -ms-transform: rotate(225deg) translateY(0.8em);
+    transform: rotate(225deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(7) {
+    -webkit-transform: rotate(270deg) translateY(0.8em);
+    -ms-transform: rotate(270deg) translateY(0.8em);
+    transform: rotate(270deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(8) {
+    -webkit-transform: rotate(315deg) translateY(0.8em);
+    -ms-transform: rotate(315deg) translateY(0.8em);
+    transform: rotate(315deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(9) {
+    -webkit-transform: rotate(360deg) translateY(0.8em);
+    -ms-transform: rotate(360deg) translateY(0.8em);
+    transform: rotate(360deg) translateY(0.8em);
+}
+.toggle-wrap {
+    margin: 0 0.75em;
+}
+@supports selector(:focus-visible) {
+    .toggle:focus {
+        -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
+        box-shadow: 0 0 0 0.125em var(--secondary);
+    }
+    .toggle:focus-visible {
+        -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
+        box-shadow: 0 0 0 0.125em var(--theme-blue);
+    }
+}
\ No newline at end of file
diff --git a/darkmode.js b/darkmode.js
new file mode 100644
index 0000000..d3dd910
--- /dev/null
+++ b/darkmode.js
@@ -0,0 +1,35 @@
+document.getElementById("theme").addEventListener("click", toggleDarkMode, false)
+
+refreshDarkMode()
+
+function toggleDarkMode() {
+    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
+    else document.cookie = "darkMode=on";
+    refreshDarkMode();
+}
+
+function refreshDarkMode() {
+    let darkMode = getCookie("darkMode") === "on";
+    if (darkMode) {
+        document.body.classList.add("dark-theme");
+        document.getElementById("theme").checked = true;
+    } else {
+        if (document.body.classList.contains("dark-theme")) {
+            document.body.classList.remove("dark-theme");
+        }
+        document.getElementById("theme").checked = false;
+    }
+}
+
+function getCookie(cookieName) {
+    let cookieArray = document.cookie.split(";");
+    for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i].split("=");
+        if (cookie[0].trim() === cookieName) {
+            return cookie[1];
+        }
+    }
+    console.warn("Cookie \"" + cookieName + "\" does not exist");
+    document.cookie = cookieName + "=";
+    return "";
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..a752343
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
index 9b53a25..65d19ee 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="darkmode.css">
     <title>CAIU Signature Card</title>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
@@ -20,46 +21,48 @@
 </head>
 <body>
 
-    <nav id="navbar" class="navbar navbar-light">
+    <header>
         <a class="navbar-brand" href="#">
-            <img src="logo.png" alt="CAIU Logo">
+            <img class="logo" src="logo.png" alt="CAIU Logo">
         </a>
-        <div class="nav-container">
-            <label class="nav-align" for="existingFile">Edit Existing VCard</label>
-            <input type="file" accept="image/png" class="nav-align" id="existingFile" name="existingFile">
-            <button class="btn btn-primary nav-align" id="getFileDataBtn">Edit</button>
-        </div>
-        <div class="nav-container">
-            <label for="theme" class="theme nav-align">
-                <span class="toggle-wrap">
-                    <input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
-                    <span class="icon">
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                        <span class="icon-part"></span>
-                    </span>
-                </span>
+        <div style="margin-right: 0.5em;">
+            <label for="theme" class="theme">
+            <span class="toggle-wrap">
+              <input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
+              <span class="icon">
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+              </span>
+            </span>
             </label>
         </div>
+    </header>
+    <nav class="navbar">
+        <ul>
+            <li><a class="active" href="#">Home</a></li>
+            <li><a href="install/">Install</a></li>
+            <li class="float-right"><a href="javascript:getCardToEdit()">Edit Card</a></li>
+        </ul>
     </nav>
 
     <main class="page contact-page">
         <section class="portfolio-block contact">
             <div class="container">
-                <h1 class="text-center mt-5 mb-5 h1">Signature Card Creator</h1>
+                <h1 class="text-center mt mb h1">Signature Card Creator</h1>
                 <div class="card">
                     <a id="vcard" href="#" style="display: none">
-                        <img class="card" id="cardImg"/>
+                        <img class="card" id="cardImg" alt="card"/>
                     </a>
                 </div>
                 <label for="vcard" class="text-center"></label>
-                <div class="form-group mt-5">
+                <div class="form-group mt">
                     <div class="form-group">
                         <label for="full_name">Full Name &amp; Credentials</label>
                         <input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
@@ -105,14 +108,21 @@
         </section>
     </main>
 
+    <footer>Made by the best intern!</footer>
+
+    <div class="hidden fade" id="fade"></div>
+    <div class="upload hidden" id="uploadDiv">
+        <div class="dotted">
+            <label for="existingFile">Click or drag here to edit existing card</label>
+        </div>
+    </div>
+    <input style="display: none" id="existingFile" type="file" accept="image/png" name="existingFile">
     <script src="script.js"></script>
+    <script src="darkmode.js"></script>
     <script>
-        refreshDarkMode();
         loadLocations();
 
-        document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
         document.getElementById("formSubmit").addEventListener("click", submitForm, false);
-        document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/install/index.html b/install/index.html
new file mode 100644
index 0000000..691025d
--- /dev/null
+++ b/install/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="stylesheet" href="../stylesheet.css">
+  <link rel="stylesheet" href="../darkmode.css">
+  <title>Install Card</title>
+</head>
+<body>
+
+  <header>
+    <a class="navbar-brand" href="#">
+      <img class="logo" src="../logo.png" alt="CAIU Logo">
+    </a>
+    <div style="margin-right: 0.5em;">
+      <label for="theme" class="theme">
+        <span class="toggle-wrap">
+          <input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
+          <span class="icon">
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+            <span class="icon-part"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+  </header>
+  <nav class="navbar">
+    <ul>
+      <li><a href="../">Home</a></li>
+      <li><a class="active" href="#">Install</a></li>
+    </ul>
+  </nav>
+
+
+
+  <main>
+    <article>
+      <h1 class="text-center">Signature Card Installation Guide</h1>
+      <figure>Fig</figure>
+      <p>P</p>
+    </article>
+    <section>Sec</section>
+  </main>
+
+
+
+  <footer>Made by the best intern!</footer>
+  <script src="../darkmode.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/prod/favicon.ico b/prod/favicon.ico
new file mode 100644
index 0000000..a752343
Binary files /dev/null and b/prod/favicon.ico differ
diff --git a/prod/index.html b/prod/index.html
new file mode 100644
index 0000000..97d3453
--- /dev/null
+++ b/prod/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" href="stylesheet.css">
+  <title>CAIU Signature Card</title>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const inputs = Array.from(
+              document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directLine]')
+      );
+      const inputListener = e => {
+        inputs.filter(i => i !== e.target).forEach(i => (i.required = !e.target.value.length));
+      };
+
+      inputs.forEach(i => i.addEventListener('input', inputListener));
+    });
+  </script>
+</head>
+<body>
+
+<nav id="navbar" class="navbar navbar-light">
+  <a class="navbar-brand" href="#">
+    <img src="logo.png" alt="CAIU Logo">
+  </a>
+  <div class="nav-container">
+    <label class="nav-align" for="existingFile">Edit Existing Card</label>
+    <input type="file" accept="image/png" class="nav-align" id="existingFile" name="existingFile">
+    <button class="btn btn-primary nav-align" id="getFileDataBtn">Edit</button>
+  </div>
+  <div class="nav-container">
+    <label for="theme" class="theme nav-align">
+                <span class="toggle-wrap">
+                    <input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
+                    <span class="icon">
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                        <span class="icon-part"></span>
+                    </span>
+                </span>
+    </label>
+  </div>
+</nav>
+
+<main class="page contact-page">
+  <section class="portfolio-block contact">
+    <div class="container">
+      <h1 class="text-center mt-5 mb-5 h1">Signature Card Creator</h1>
+      <div class="card">
+        <a id="vcard" href="#" style="display: none">
+          <img class="card" id="cardImg"/>
+        </a>
+      </div>
+      <label for="vcard" class="text-center"></label>
+      <div class="form-group mt-5">
+        <div class="form-group">
+          <label for="full_name">Full Name &amp; Credentials</label>
+          <input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
+        </div>
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input type="text" class="form-control" id="title" name="title" maxlength="48" required="">
+        </div>
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" class="form-control" id="email" name="email" required="">
+        </div>
+        <div class="form-group">
+          <label for="location">Location:</label>
+          <select class="form-control" id="location" name="location"></select>
+        </div>
+        <div class="form-group">
+          <input type="checkbox" id="directLineCheckbox" onclick="handleCheckbox()">
+          <label for="directLineCheckbox">Direct Line</label>
+        </div>
+        <div class="form-group" id="directLineInput" style="display:none">
+          <label for="directLine">Direct Line:</label>
+          <input type="text" class="form-control" id="directLine" name="directLine" maxlength="15" required="">
+        </div>
+        <div class="form-group" id="extensionInput">
+          <label for="extension">Extension</label>
+          <input type="tel" class="form-control" id="extension" name="extension" required="">
+        </div>
+        <div class="form-group">
+          <label for="cellNumber">Cell Number</label>
+          <input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
+        </div>
+        <div class="form-group">
+          <input type="radio" id="o365" name="outlookVer" value="1">
+          <label id="o365Label" for="o365">MS Office 365</label>
+          <br>
+          <input type="radio" id="o2016" name="outlookVer" value="0">
+          <label id="o2016Label" for="o2016">MS Office 2016</label>
+        </div>
+        <button class="btn btn-primary" id="formSubmit">Generate VCard</button>
+      </div>
+    </div>
+  </section>
+</main>
+
+<script src="script.js"></script>
+<script>
+  refreshDarkMode();
+  loadLocations();
+
+  document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
+  document.getElementById("formSubmit").addEventListener("click", submitForm, false);
+  document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/prod/logo.png b/prod/logo.png
new file mode 100644
index 0000000..0930e72
Binary files /dev/null and b/prod/logo.png differ
diff --git a/prod/script.js b/prod/script.js
new file mode 100644
index 0000000..576c9c1
--- /dev/null
+++ b/prod/script.js
@@ -0,0 +1,160 @@
+function handleCheckbox() {
+    const extensionInput = document.getElementById("extensionInput");
+    const directLineInput = document.getElementById("directLineInput");
+    if (document.getElementById("directLineCheckbox").checked) {
+        extensionInput.style.display = "none";
+        directLineInput.style.display = "block";
+        document.getElementById("extension").value = "";
+    } else {
+        extensionInput.style.display = "block";
+        directLineInput.style.display = "none";
+        document.getElementById("directLine").value = "";
+    }
+}
+
+let backendUrl = "https://vcard.caiu.org/backend"
+let locations = JSON.parse("{}");
+
+function loadLocations() {
+    let locationsList = document.getElementById("location");
+
+    fetchWithTimeout(backendUrl + "/data/locations", {
+        timeout: 5000,
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+            'Accept': 'application/json'
+        }
+    }).then(response => {
+        response.text().then(text => {
+            locations = JSON.parse(text);
+            locationsList.innerText = "";
+            for (let i = 0; i < locations.length; i++) {
+                locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
+            }
+        })
+    });
+}
+
+function submitForm() {
+    let body =
+        "{" +
+        "\"name\":\"" + document.getElementById("full_name").value + "\"," +
+        "\"title\":\"" + document.getElementById("title").value + "\"," +
+        "\"email\":\"" + document.getElementById("email").value + "\"," +
+        "\"locationId\":\"" + document.getElementById("location").value + "\"," +
+        "\"extension\":\"" + document.getElementById("extension").value + "\"," +
+        "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," +
+        "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
+        "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
+        "}";
+
+    fetchWithTimeout(backendUrl + "/generate", {
+        timeout: 5000,
+        method: 'POST',
+        mode: 'cors',
+        Headers: {
+            'Accept': 'image/png',
+        },
+        body: body
+    }).then(async response => {
+        downloadImage(await response.arrayBuffer());
+    });
+
+    document.getElementById("full_name").value = "";
+    document.getElementById("title").value = "";
+    document.getElementById("email").value = "";
+    document.getElementById("extension").value = "";
+    document.getElementById("directLine").value = "";
+    document.getElementById("cellNumber").value = "";
+}
+
+function downloadImage(arrayBuffer) {
+    const blob = new Blob([arrayBuffer], { type: "image/png" });
+    const cardElement = document.getElementById("vcard");
+    const imgElement = document.getElementById("cardImg");
+
+    let urlCreator = window.URL || window.webkitURL;
+    let imageUrl = urlCreator.createObjectURL(blob);
+
+    cardElement.href = imageUrl;
+    cardElement.style.display = 'unset';
+    imgElement.src = imageUrl;
+    cardElement.download = "card.png";
+    cardElement.click();
+}
+
+function loadFromExistingCard() {
+    const data = new FormData();
+    data.append("card", document.getElementById("existingFile").files[0]);
+
+    fetchWithTimeout(backendUrl + "/edit", {
+        timeout: 5000,
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Accept': 'application/json'
+        },
+        body: data
+    }).then(response => response.json()).then(json => {
+        document.getElementById("full_name").value = json.Name;
+        document.getElementById("title").value = json.Title;
+        document.getElementById("email").value = json.Email;
+        document.getElementById("location").value = json.Location;
+        if (json.Extension === "") {
+            let directLineCheckbox = document.getElementById("directLineCheckbox");
+            if (directLineCheckbox.value === "on") {
+                document.getElementById("directLine").value = json.DirectNumber;
+            }
+        } else {
+            document.getElementById("extension").value = json.Extension;
+        }
+        document.getElementById("cellNumber").value = json.CellNumber;
+    });
+}
+
+function toggleDarkMode() {
+    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
+    else document.cookie = "darkMode=on";
+    refreshDarkMode();
+}
+
+function refreshDarkMode() {
+    let darkMode = getCookie("darkMode") === "on";
+    if (darkMode) {
+        document.body.classList.add("dark-theme");
+        document.getElementById("theme").checked = true;
+    } else {
+        if (document.body.classList.contains("dark-theme")) {
+            document.body.classList.remove("dark-theme");
+        }
+        document.getElementById("theme").checked = false;
+    }
+}
+
+async function fetchWithTimeout(resource, options = {}) {
+    const { timeout = 8000 } = options;
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), timeout);
+
+    const response = await fetch(resource, {
+        ...options,
+        signal: controller.signal
+    });
+    clearTimeout(id);
+
+    return response;
+}
+
+function getCookie(cookieName) {
+    let cookieArray = document.cookie.split(";");
+    for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i].split("=");
+        if (cookie[0].trim() === cookieName) {
+            return cookie[1];
+        }
+    }
+    console.warn("Cookie \"" + cookieName + "\" does not exist");
+    document.cookie = cookieName + "=";
+    return "";
+}
\ No newline at end of file
diff --git a/prod/stylesheet.css b/prod/stylesheet.css
new file mode 100644
index 0000000..4f544e9
--- /dev/null
+++ b/prod/stylesheet.css
@@ -0,0 +1,538 @@
+:root {
+    --blue: #007bff;
+    --indigo: #6610f2;
+    --purple: #6f42c1;
+    --pink: #e83e8c;
+    --red: #dc3545;
+    --orange: #fd7e14;
+    --yellow: #ffc107;
+    --green: #28a745;
+    --teal: #20c997;
+    --cyan: #17a2b8;
+    --white: #fff;
+    --gray: #6c757d;
+    --gray-dark: #343a40;
+    --secondary: #6c757d;
+    --success: #28a745;
+    --info: #17a2b8;
+    --warning: #ffc107;
+    --danger: #dc3545;
+    --light: #f8f9fa;
+    --dark: #343a40;
+
+    --theme-blue: #007bff;
+    --theme-dark-blue: hsl(198,90%,15%);
+
+    --breakpoint-xs: 0;
+    --breakpoint-sm: 576px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 992px;
+    --breakpoint-xl: 1200px;
+    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    --text-color: #212529;
+    --background-color: #ffffff;
+    --secondary-color: #f8f9fa !important;
+    --secondary-accent: #495057;
+    --trans-dur: 0.3s;
+}
+* {
+    -webkit-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
+    -moz-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
+    -ms-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
+    -o-transition: background-color ease .5s, text-color ease .5s, color ease .5s;
+    transition: background-color ease .5s, text-color ease .5s, color ease .5s;
+}
+html {
+    font-family: sans-serif;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+}
+body {
+    margin: 0;
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    color: var(--text-color);
+    background-color: var(--background-color);
+}
+
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+
+article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+    display: block;
+}
+
+button, input, optgroup, select, textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+button, input {
+    overflow: visible;
+}
+
+button, select {
+    text-transform: none;
+}
+
+label {
+    display: inline-block;
+    margin-bottom: .5rem;
+}
+
+input, textarea {
+    background-color: var(--secondary-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: .5rem;
+}
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+    margin-bottom: .5rem;
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.2;
+    color: inherit;
+}
+.h1, h1 {
+    font-size: 2.5rem;
+}
+.h2, h2 {
+    font-size: 2rem;
+}
+
+.btn {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+.btn-primary {
+    color: #fff;
+    background-color: var(--theme-blue);
+    border-color: var(--theme-blue);
+}
+.btn:not(:disabled):not(.disabled) {
+    cursor: pointer;
+}
+
+select.form-control:not([size]):not([multiple]) {
+    height: calc(2.25rem + 2px);
+}
+
+input[type="checkbox"], input[type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+}
+
+[type="reset"], [type="submit"], button, html [type="button"] {
+    -webkit-appearance: button;
+}
+
+/*--------------------------------------*/
+
+.dark-theme {
+    --text-color: #ffffff;
+    --background-color: #28272d;
+    --secondary-color: #1f1e23 !important;
+    --secondary-accent: #181818;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.mt-5, .my-5 {
+    margin-top: 1rem !important;
+}
+
+.mb-5 {
+    margin-bottom: 1rem !important;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+.form-control {
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--text-color);
+    background-color: var(--secondary-color);
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+
+    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
+    -moz-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
+    -ms-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
+    -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color ease .5s, text-color ease .5s, color ease .5s;
+}
+
+.navbar {
+    background-color: var(--secondary-color);
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    padding: .5rem 1rem;
+}
+
+.navbar-brand{
+    display:inline-block;
+    padding-top:.3125rem;
+    padding-bottom:.3125rem;
+    margin-right:1rem;
+    font-size:1.25rem;
+    line-height:inherit;
+    white-space:nowrap
+}
+
+.navbar-brand:focus, .navbar-brand:hover {
+    text-decoration:none;
+}
+
+.nav-align {
+    width: fit-content;
+    vertical-align: middle;
+    padding-left: 20px;
+    padding-right: 20px;
+    float: right;
+    margin: 0;
+}
+
+.nav-container {
+    display: inline-flex;
+    position: relative;
+    float: right;
+    align-items: center;
+}
+
+.card {
+    margin: auto;
+    width: 24em;
+}
+
+.circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    margin-right: 15px;
+    padding: 0 !important;
+}
+
+.loading {
+    width: 40px;
+    height: 40px;
+    border: 5px solid var(--white );
+    border-top: 5px solid var(--theme-blue);
+    border-radius: 50%;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    animation: spin 1.25s ease-in-out infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg) }
+    100% { transform: rotate(360deg) }
+}
+
+.connected {
+    background: var(--success);
+}
+.disconnected {
+    background: var(--danger);
+}
+
+/*--------------------------------------*/
+
+.container {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+@media (min-width: 576px) {
+    .container {
+        max-width: 540px;
+    }
+}
+@media (min-width: 768px) {
+    .container {
+        max-width: 720px;
+    }
+}
+@media (min-width: 992px) {
+    .container {
+        max-width: 960px;
+    }
+}
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px;
+    }
+}
+
+/*---------------------------------------------*/
+
+/* Default */
+.theme {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-tap-highlight-color: transparent;
+}
+.icon,
+.toggle {
+    z-index: 1;
+}
+.icon,
+.icon-part {
+    position: absolute;
+}
+.icon {
+    display: block;
+    top: 0.75em;
+    left: 0.75em;
+    width: 1.5em;
+    height: 1.5em;
+    -webkit-transition: var(--trans-dur);
+    transition: var(--trans-dur);
+}
+.icon-part {
+    border-radius: 50%;
+    -webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
+    box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+    width: 1em;
+    height: 1em;
+    -webkit-transition: opacity var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: opacity var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: box-shadow var(--trans-dur) ease-in-out,
+    opacity var(--trans-dur) ease-in-out,
+    transform var(--trans-dur) ease-in-out;
+    transition: box-shadow var(--trans-dur) ease-in-out,
+    opacity var(--trans-dur) ease-in-out,
+    transform var(--trans-dur) ease-in-out,
+    -webkit-box-shadow var(--trans-dur) ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    -webkit-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    transform: scale(0.5);
+}
+.icon-part ~ .icon-part {
+    background-color: var(--white);
+    border-radius: 0.05em;
+    top: 50%;
+    left: calc(50% - 0.05em);
+    -webkit-transform: rotate(0deg) translateY(0.5em);
+    -ms-transform: rotate(0deg) translateY(0.5em);
+    transform: rotate(0deg) translateY(0.5em);
+    -webkit-transform-origin: 50% 0;
+    -ms-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+    width: 0.1em;
+    height: 0.2em;
+}
+.icon-part:nth-child(3) {
+    -webkit-transform: rotate(45deg) translateY(0.45em);
+    -ms-transform: rotate(45deg) translateY(0.45em);
+    transform: rotate(45deg) translateY(0.45em);
+}
+.icon-part:nth-child(4) {
+    -webkit-transform: rotate(90deg) translateY(0.45em);
+    -ms-transform: rotate(90deg) translateY(0.45em);
+    transform: rotate(90deg) translateY(0.45em);
+}
+.icon-part:nth-child(5) {
+    -webkit-transform: rotate(135deg) translateY(0.45em);
+    -ms-transform: rotate(135deg) translateY(0.45em);
+    transform: rotate(135deg) translateY(0.45em);
+}
+.icon-part:nth-child(6) {
+    -webkit-transform: rotate(180deg) translateY(0.45em);
+    -ms-transform: rotate(180deg) translateY(0.45em);
+    transform: rotate(180deg) translateY(0.45em);
+}
+.icon-part:nth-child(7) {
+    -webkit-transform: rotate(225deg) translateY(0.45em);
+    -ms-transform: rotate(225deg) translateY(0.45em);
+    transform: rotate(225deg) translateY(0.45em);
+}
+.icon-part:nth-child(8) {
+    -webkit-transform: rotate(270deg) translateY(0.5em);
+    -ms-transform: rotate(270deg) translateY(0.5em);
+    transform: rotate(270deg) translateY(0.5em);
+}
+.icon-part:nth-child(9) {
+    -webkit-transform: rotate(315deg) translateY(0.5em);
+    -ms-transform: rotate(315deg) translateY(0.5em);
+    transform: rotate(315deg) translateY(0.5em);
+}
+.label,
+.toggle,
+.toggle-wrap {
+    position: relative;
+}
+.toggle,
+.toggle:before {
+    display: block;
+}
+.toggle {
+    background-color: hsl(48,90%,85%);
+    border-radius: 25% / 50%;
+    -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
+    box-shadow: 0 0 0 0.125em var(--secondary);
+    padding: 0.25em !important;
+    width: 6em;
+    height: 3em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    transform var(--trans-dur) ease-in-out;
+    transition: background-color var(--trans-dur) ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    transform var(--trans-dur) ease-in-out,
+    -webkit-box-shadow 0.15s ease-in-out,
+    -webkit-transform var(--trans-dur) ease-in-out;
+}
+.toggle:before {
+    background-color: var(--yellow);
+    border-radius: 50%;
+    content: "";
+    width: 2.5em;
+    height: 2.5em;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+}
+.toggle:focus {
+    -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
+    box-shadow: 0 0 0 0.125em var(--theme-blue);
+    outline: transparent;
+}
+/* Checked */
+.toggle:checked {
+    background-color: var(--theme-dark-blue);
+}
+.toggle:checked:before,
+.toggle:checked ~ .icon {
+    -webkit-transform: translateX(3em);
+    -ms-transform: translateX(3em);
+    transform: translateX(3em);
+}
+.toggle:checked:before {
+    background-color: var(--theme-blue);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(1) {
+    -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
+    box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    top: 0.25em;
+    left: 0.25em;
+}
+.toggle:checked ~ .icon .icon-part ~ .icon-part {
+    opacity: 0;
+}
+.toggle:checked ~ .icon .icon-part:nth-child(2) {
+    -webkit-transform: rotate(45deg) translateY(0.8em);
+    -ms-transform: rotate(45deg) translateY(0.8em);
+    transform: rotate(45deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(3) {
+    -webkit-transform: rotate(90deg) translateY(0.8em);
+    -ms-transform: rotate(90deg) translateY(0.8em);
+    transform: rotate(90deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(4) {
+    -webkit-transform: rotate(135deg) translateY(0.8em);
+    -ms-transform: rotate(135deg) translateY(0.8em);
+    transform: rotate(135deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(5) {
+    -webkit-transform: rotate(180deg) translateY(0.8em);
+    -ms-transform: rotate(180deg) translateY(0.8em);
+    transform: rotate(180deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(6) {
+    -webkit-transform: rotate(225deg) translateY(0.8em);
+    -ms-transform: rotate(225deg) translateY(0.8em);
+    transform: rotate(225deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(7) {
+    -webkit-transform: rotate(270deg) translateY(0.8em);
+    -ms-transform: rotate(270deg) translateY(0.8em);
+    transform: rotate(270deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(8) {
+    -webkit-transform: rotate(315deg) translateY(0.8em);
+    -ms-transform: rotate(315deg) translateY(0.8em);
+    transform: rotate(315deg) translateY(0.8em);
+}
+.toggle:checked ~ .icon .icon-part:nth-child(9) {
+    -webkit-transform: rotate(360deg) translateY(0.8em);
+    -ms-transform: rotate(360deg) translateY(0.8em);
+    transform: rotate(360deg) translateY(0.8em);
+}
+.toggle-wrap {
+    margin: 0 0.75em;
+}
+@supports selector(:focus-visible) {
+    .toggle:focus {
+        -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
+        box-shadow: 0 0 0 0.125em var(--secondary);
+    }
+    .toggle:focus-visible {
+        -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
+        box-shadow: 0 0 0 0.125em var(--theme-blue);
+    }
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index 3ccff6e..5004795 100644
--- a/script.js
+++ b/script.js
@@ -77,6 +77,14 @@ function downloadImage(arrayBuffer) {
     cardElement.click();
 }
 
+function getCardToEdit() {
+    let uploadDiv = document.getElementById("uploadDiv")
+    let fadeDiv = document.getElementById("fade")
+    uploadDiv.classList.remove("hidden")
+    fadeDiv.classList.remove("hidden")
+
+}
+
 function loadFromExistingCard() {
     const data = new FormData();
     data.append("card", document.getElementById("existingFile").files[0]);
@@ -106,25 +114,6 @@ function loadFromExistingCard() {
     });
 }
 
-function toggleDarkMode() {
-    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
-    else document.cookie = "darkMode=on";
-    refreshDarkMode();
-}
-
-function refreshDarkMode() {
-    let darkMode = getCookie("darkMode") === "on";
-    if (darkMode) {
-        document.body.classList.add("dark-theme");
-        document.getElementById("theme").checked = true;
-    } else {
-        if (document.body.classList.contains("dark-theme")) {
-            document.body.classList.remove("dark-theme");
-        }
-        document.getElementById("theme").checked = false;
-    }
-}
-
 async function fetchWithTimeout(resource, options = {}) {
     const { timeout = 8000 } = options;
     const controller = new AbortController();
@@ -137,17 +126,4 @@ async function fetchWithTimeout(resource, options = {}) {
     clearTimeout(id);
 
     return response;
-}
-
-function getCookie(cookieName) {
-    let cookieArray = document.cookie.split(";");
-    for (let i = 0; i < cookieArray.length; i++) {
-        let cookie = cookieArray[i].split("=");
-        if (cookie[0].trim() === cookieName) {
-            return cookie[1];
-        }
-    }
-    console.warn("Cookie \"" + cookieName + "\" does not exist");
-    document.cookie = cookieName + "=";
-    return "";
 }
\ No newline at end of file
diff --git a/stylesheet.css b/stylesheet.css
index a1d3d05..a1dc5f9 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -21,7 +21,9 @@
   --dark: #343a40;
 
   --theme-blue: #007bff;
+  --theme-blue-hover: #0064d9;
   --theme-dark-blue: hsl(198,90%,15%);
+  --theme-active: #002872;
 
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -31,11 +33,17 @@
   --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
   --text-color: #212529;
+  --text-color-neg: #ffffff;
   --background-color: #ffffff;
   --secondary-color: #f8f9fa !important;
   --secondary-accent: #495057;
   --trans-dur: 0.3s;
 }
+
+*, ::after, ::before {
+  box-sizing: inherit;
+}
+
 html {
   font-family: sans-serif;
   line-height: 1.15;
@@ -51,27 +59,49 @@ body {
   color: var(--text-color);
   background-color: var(--background-color);
 }
-
-*, ::after, ::before {
-  box-sizing: border-box;
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--secondary-color);
 }
 
-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block;
+footer {
+  text-align: center;
+  font-size: 12px;
 }
 
-button, input, optgroup, select, textarea {
+button {
   margin: 0;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
-}
-
-button, input {
   overflow: visible;
+  text-transform: none;
 }
 
-button, select {
+input {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  background-color: var(--secondary-color);
+}
+
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background-color: var(--secondary-color);
+}
+
+select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
   text-transform: none;
 }
 
@@ -80,10 +110,6 @@ label {
   margin-bottom: .5rem;
 }
 
-input, textarea {
-  background-color: var(--secondary-color);
-}
-
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: .5rem;
@@ -145,6 +171,7 @@ input[type="checkbox"], input[type="radio"] {
 
 .dark-theme {
   --text-color: #ffffff;
+  --text-color-neg: #212529;
   --background-color: #28272d;
   --secondary-color: #1f1e23 !important;
   --secondary-accent: #181818;
@@ -154,11 +181,11 @@ input[type="checkbox"], input[type="radio"] {
   text-align: center !important;
 }
 
-.mt-5, .my-5 {
+.mt {
   margin-top: 1rem !important;
 }
 
-.mb-5 {
+.mb {
   margin-bottom: 1rem !important;
 }
 
@@ -179,25 +206,53 @@ input[type="checkbox"], input[type="radio"] {
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
+.logo {
+  display: inline-block;
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  padding-left: 0.5em;
+}
+
 .navbar {
-  background-color: var(--secondary-color);
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding: .5rem 1rem;
+  margin-top: -5px;
+}
+.navbar ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--theme-blue);
+}
+.navbar li {
+  float: left;
+}
+.navbar li:first-child {
+  margin-left: 10em;
+}
+.navbar li:last-child {
+  margin-right: 10em;
+}
+.navbar li a {
+  display: block;
+  color: var(--white);
+  text-align: center;
+  padding: 1.5em;
+  text-decoration: none;
+}
+.navbar li a:hover:not(.active) {
+  background-color: var(--theme-blue-hover);
+}
+.active {
+  background-color: var(--theme-active);
+}
+.float-left {
+  float:left !important;
+}
+.float-right {
+  float: right !important;
 }
 
 .navbar-brand{
-  display:inline-block;
   padding-top:.3125rem;
   padding-bottom:.3125rem;
   margin-right:1rem;
@@ -210,57 +265,46 @@ input[type="checkbox"], input[type="radio"] {
   text-decoration:none;
 }
 
-.nav-align {
-  width: fit-content;
-  vertical-align: middle;
-  padding-left: 20px;
-  padding-right: 20px;
-  float: right;
-  margin: 0;
-}
-
-.nav-container {
-  display: inline-flex;
-  position: relative;
-  float: right;
-  align-items: center;
-}
-
 .card {
   margin: auto;
   width: 24em;
 }
 
-.circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  margin-right: 15px;
-  padding: 0 !important;
+.fade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  opacity: 50%;
 }
 
-.loading {
-  width: 40px;
-  height: 40px;
-  border: 5px solid var(--white );
-  border-top: 5px solid var(--theme-blue);
-  border-radius: 50%;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  animation: spin 1.25s ease-in-out infinite;
-}
-@keyframes spin {
-  0% { transform: rotate(0deg) }
-  100% { transform: rotate(360deg) }
+.upload {
+  opacity: 100% !important;
+  border-radius: .5rem;
+  padding: 1em;
+  border: solid 2px var(--theme-dark-blue);
+  background-color: var(--background-color);
+  position: absolute;
+  width: 16em;
+  height: 9em;
+  left: 50%;
+  top: 14em;
+  margin-left: -9em;
 }
 
-.connected {
-  background: var(--success);
+.hidden {
+  display: none;
 }
-.disconnected {
-  background: var(--danger);
+
+.dotted {
+  display: flex;
+  border: dotted 2px var(--theme-dark-blue);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  align-items: center;
 }
 
 /*--------------------------------------*/
@@ -292,235 +336,3 @@ input[type="checkbox"], input[type="radio"] {
     max-width: 1140px;
   }
 }
-
-/*---------------------------------------------*/
-
-/* Default */
-.theme {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-tap-highlight-color: transparent;
-}
-.icon,
-.toggle {
-  z-index: 1;
-}
-.icon,
-.icon-part {
-  position: absolute;
-}
-.icon {
-  display: block;
-  top: 0.75em;
-  left: 0.75em;
-  width: 1.5em;
-  height: 1.5em;
-  -webkit-transition: var(--trans-dur);
-  transition: var(--trans-dur);
-}
-.icon-part {
-  border-radius: 50%;
-  -webkit-box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
-  box-shadow: 0.4em -0.4em 0 0.5em var(--white) inset;
-  top: calc(50% - 0.5em);
-  left: calc(50% - 0.5em);
-  width: 1em;
-  height: 1em;
-  -webkit-transition: opacity var(--trans-dur) ease-in-out,
-  -webkit-box-shadow var(--trans-dur) ease-in-out,
-  -webkit-transform var(--trans-dur) ease-in-out;
-  transition: opacity var(--trans-dur) ease-in-out,
-  -webkit-box-shadow var(--trans-dur) ease-in-out,
-  -webkit-transform var(--trans-dur) ease-in-out;
-  transition: box-shadow var(--trans-dur) ease-in-out,
-  opacity var(--trans-dur) ease-in-out,
-  transform var(--trans-dur) ease-in-out;
-  transition: box-shadow var(--trans-dur) ease-in-out,
-  opacity var(--trans-dur) ease-in-out,
-  transform var(--trans-dur) ease-in-out,
-  -webkit-box-shadow var(--trans-dur) ease-in-out,
-  -webkit-transform var(--trans-dur) ease-in-out;
-  -webkit-transform: scale(0.5);
-  -ms-transform: scale(0.5);
-  transform: scale(0.5);
-}
-.icon-part ~ .icon-part {
-  background-color: var(--white);
-  border-radius: 0.05em;
-  top: 50%;
-  left: calc(50% - 0.05em);
-  -webkit-transform: rotate(0deg) translateY(0.5em);
-  -ms-transform: rotate(0deg) translateY(0.5em);
-  transform: rotate(0deg) translateY(0.5em);
-  -webkit-transform-origin: 50% 0;
-  -ms-transform-origin: 50% 0;
-  transform-origin: 50% 0;
-  width: 0.1em;
-  height: 0.2em;
-}
-.icon-part:nth-child(3) {
-  -webkit-transform: rotate(45deg) translateY(0.45em);
-  -ms-transform: rotate(45deg) translateY(0.45em);
-  transform: rotate(45deg) translateY(0.45em);
-}
-.icon-part:nth-child(4) {
-  -webkit-transform: rotate(90deg) translateY(0.45em);
-  -ms-transform: rotate(90deg) translateY(0.45em);
-  transform: rotate(90deg) translateY(0.45em);
-}
-.icon-part:nth-child(5) {
-  -webkit-transform: rotate(135deg) translateY(0.45em);
-  -ms-transform: rotate(135deg) translateY(0.45em);
-  transform: rotate(135deg) translateY(0.45em);
-}
-.icon-part:nth-child(6) {
-  -webkit-transform: rotate(180deg) translateY(0.45em);
-  -ms-transform: rotate(180deg) translateY(0.45em);
-  transform: rotate(180deg) translateY(0.45em);
-}
-.icon-part:nth-child(7) {
-  -webkit-transform: rotate(225deg) translateY(0.45em);
-  -ms-transform: rotate(225deg) translateY(0.45em);
-  transform: rotate(225deg) translateY(0.45em);
-}
-.icon-part:nth-child(8) {
-  -webkit-transform: rotate(270deg) translateY(0.5em);
-  -ms-transform: rotate(270deg) translateY(0.5em);
-  transform: rotate(270deg) translateY(0.5em);
-}
-.icon-part:nth-child(9) {
-  -webkit-transform: rotate(315deg) translateY(0.5em);
-  -ms-transform: rotate(315deg) translateY(0.5em);
-  transform: rotate(315deg) translateY(0.5em);
-}
-.label,
-.toggle,
-.toggle-wrap {
-  position: relative;
-}
-.toggle,
-.toggle:before {
-  display: block;
-}
-.toggle {
-  background-color: hsl(48,90%,85%);
-  border-radius: 25% / 50%;
-  -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
-  box-shadow: 0 0 0 0.125em var(--secondary);
-  padding: 0.25em !important;
-  width: 6em;
-  height: 3em;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-transition: background-color var(--trans-dur) ease-in-out,
-  -webkit-box-shadow 0.15s ease-in-out,
-  -webkit-transform var(--trans-dur) ease-in-out;
-  transition: background-color var(--trans-dur) ease-in-out,
-  -webkit-box-shadow 0.15s ease-in-out,
-  -webkit-transform var(--trans-dur) ease-in-out;
-  transition: background-color var(--trans-dur) ease-in-out,
-  box-shadow 0.15s ease-in-out,
-  transform var(--trans-dur) ease-in-out;
-  transition: background-color var(--trans-dur) ease-in-out,
-  box-shadow 0.15s ease-in-out,
-  transform var(--trans-dur) ease-in-out,
-  -webkit-box-shadow 0.15s ease-in-out,
-  -webkit-transform var(--trans-dur) ease-in-out;
-}
-.toggle:before {
-  background-color: var(--yellow);
-  border-radius: 50%;
-  content: "";
-  width: 2.5em;
-  height: 2.5em;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-.toggle:focus {
-  -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
-  box-shadow: 0 0 0 0.125em var(--theme-blue);
-  outline: transparent;
-}
-/* Checked */
-.toggle:checked {
-  background-color: var(--theme-dark-blue);
-}
-.toggle:checked:before,
-.toggle:checked ~ .icon {
-  -webkit-transform: translateX(3em);
-  -ms-transform: translateX(3em);
-  transform: translateX(3em);
-}
-.toggle:checked:before {
-  background-color: var(--theme-blue);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(1) {
-  -webkit-box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
-  box-shadow: 0.2em -0.2em 0 0.2em var(--white) inset;
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
-  top: 0.25em;
-  left: 0.25em;
-}
-.toggle:checked ~ .icon .icon-part ~ .icon-part {
-  opacity: 0;
-}
-.toggle:checked ~ .icon .icon-part:nth-child(2) {
-  -webkit-transform: rotate(45deg) translateY(0.8em);
-  -ms-transform: rotate(45deg) translateY(0.8em);
-  transform: rotate(45deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(3) {
-  -webkit-transform: rotate(90deg) translateY(0.8em);
-  -ms-transform: rotate(90deg) translateY(0.8em);
-  transform: rotate(90deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(4) {
-  -webkit-transform: rotate(135deg) translateY(0.8em);
-  -ms-transform: rotate(135deg) translateY(0.8em);
-  transform: rotate(135deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(5) {
-  -webkit-transform: rotate(180deg) translateY(0.8em);
-  -ms-transform: rotate(180deg) translateY(0.8em);
-  transform: rotate(180deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(6) {
-  -webkit-transform: rotate(225deg) translateY(0.8em);
-  -ms-transform: rotate(225deg) translateY(0.8em);
-  transform: rotate(225deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(7) {
-  -webkit-transform: rotate(270deg) translateY(0.8em);
-  -ms-transform: rotate(270deg) translateY(0.8em);
-  transform: rotate(270deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(8) {
-  -webkit-transform: rotate(315deg) translateY(0.8em);
-  -ms-transform: rotate(315deg) translateY(0.8em);
-  transform: rotate(315deg) translateY(0.8em);
-}
-.toggle:checked ~ .icon .icon-part:nth-child(9) {
-  -webkit-transform: rotate(360deg) translateY(0.8em);
-  -ms-transform: rotate(360deg) translateY(0.8em);
-  transform: rotate(360deg) translateY(0.8em);
-}
-.toggle-wrap {
-  margin: 0 0.75em;
-}
-@supports selector(:focus-visible) {
-  .toggle:focus {
-    -webkit-box-shadow: 0 0 0 0.125em var(--secondary);
-    box-shadow: 0 0 0 0.125em var(--secondary);
-  }
-  .toggle:focus-visible {
-    -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
-    box-shadow: 0 0 0 0.125em var(--theme-blue);
-  }
-}
\ No newline at end of file