diff --git a/darkmode.css b/darkmode.css
index 9bcd48c..c99c730 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -22,8 +22,8 @@
     left: 0.75em;
     width: 1.5em;
     height: 1.5em;
-    -webkit-transition: var(--trans-dur);
-    transition: var(--trans-dur);
+    -webkit-transition: var(--trans-dur-fast);
+    transition: var(--trans-dur-fast);
 }
 .icon-part {
     border-radius: 50%;
@@ -33,20 +33,20 @@
     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-transition: opacity var(--trans-dur-fast) ease-in-out,
+    -webkit-box-shadow var(--trans-dur-fast) ease-in-out,
+    -webkit-transform var(--trans-dur-fast) ease-in-out;
+    transition: opacity var(--trans-dur-fast) ease-in-out,
+    -webkit-box-shadow var(--trans-dur-fast) ease-in-out,
+    -webkit-transform var(--trans-dur-fast) ease-in-out;
+    transition: box-shadow var(--trans-dur-fast) ease-in-out,
+    opacity var(--trans-dur-fast) ease-in-out,
+    transform var(--trans-dur-fast) ease-in-out;
+    transition: box-shadow var(--trans-dur-fast) ease-in-out,
+    opacity var(--trans-dur-fast) ease-in-out,
+    transform var(--trans-dur-fast) ease-in-out,
+    -webkit-box-shadow var(--trans-dur-fast) ease-in-out,
+    -webkit-transform var(--trans-dur-fast) ease-in-out;
     -webkit-transform: scale(0.5);
     -ms-transform: scale(0.5);
     transform: scale(0.5);
@@ -120,20 +120,20 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    -webkit-transition: background-color var(--trans-dur) ease-in-out,
+    -webkit-transition: background-color var(--trans-dur-fast) 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-transform var(--trans-dur-fast) ease-in-out;
+    transition: background-color var(--trans-dur-fast) 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-transform var(--trans-dur-fast) ease-in-out;
+    transition: background-color var(--trans-dur-fast) 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,
+    transform var(--trans-dur-fast) ease-in-out;
+    transition: background-color var(--trans-dur-fast) ease-in-out,
     box-shadow 0.15s ease-in-out,
-    transform var(--trans-dur) ease-in-out,
+    transform var(--trans-dur-fast) ease-in-out,
     -webkit-box-shadow 0.15s ease-in-out,
-    -webkit-transform var(--trans-dur) ease-in-out;
+    -webkit-transform var(--trans-dur-fast) ease-in-out;
 }
 .toggle:before {
     background-color: var(--yellow);
@@ -141,8 +141,8 @@
     content: "";
     width: 2.5em;
     height: 2.5em;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
+    -webkit-transition: var(--trans-dur-fast);
+    transition: var(--trans-dur-fast);
 }
 .toggle:focus {
     -webkit-box-shadow: 0 0 0 0.125em var(--theme-blue);
@@ -151,7 +151,7 @@
 }
 /* Checked */
 .toggle:checked {
-    background-color: var(--theme-dark-blue);
+    background-color: var(--theme-gray);
 }
 .toggle:checked:before,
 .toggle:checked ~ .icon {
diff --git a/darkmode.js b/darkmode.js
index a632f52..fb4f9af 100644
--- a/darkmode.js
+++ b/darkmode.js
@@ -1,7 +1,45 @@
-document.getElementById("theme").addEventListener("click", toggleDarkMode, false)
+const themeToggle = document.getElementById("theme");
+let userPreference = getUserPreference();
 
-refreshDarkMode()
+setAppliedMode(getAppliedMode(userPreference));
 
+themeToggle.addEventListener("click", togglePreference, false)
+
+function getUserPreference() {
+    return localStorage.getItem("theme") || "light";
+}
+
+function saveUserPreference(userPreference) {
+    localStorage.setItem("theme", userPreference);
+}
+
+function getAppliedMode(userPreference) {
+    if (userPreference === "light") {
+        return "light";
+    }
+    if (userPreference === "dark") {
+        return "dark";
+    }
+    if (matchMedia("(prefers-color-scheme: light)").matches) {
+        return "light";
+    }
+    return "dark";
+}
+
+function setAppliedMode(mode) {
+    document.documentElement.dataset.appliedMode = mode;
+}
+
+function togglePreference() {
+    if (userPreference === "light") {
+        userPreference = "dark";
+    } else if (userPreference === "dark") {
+        userPreference = "light";
+    }
+    console.log(userPreference);
+    saveUserPreference(userPreference);
+    setAppliedMode(getAppliedMode(userPreference));
+}
 
 function toggleDarkMode() {
     if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/";
diff --git a/index.html b/index.html
index f708249..a3fb601 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
 
             inputs.forEach(i => i.addEventListener('input', inputListener));
         });
+        document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
     </script>
 </head>
 <body>
diff --git a/script.js b/script.js
index a79b616..320ae0f 100644
--- a/script.js
+++ b/script.js
@@ -12,7 +12,7 @@ function handleCheckbox() {
     }
 }
 
-let backendUrl = "https://vcard.caiu.org"
+let backendUrl = "https://signature.caiu.org"
 let locations = JSON.parse("{}");
 
 function loadLocations() {
@@ -167,6 +167,10 @@ function loadFromExistingCard() {
         }
         document.getElementById("cellNumber").value = json.CellNumber;
     });
+    document.getElementById("previewImg").classList.add("hidden");
+    let uploadLabel = document.getElementById("uploadLabel");
+    uploadLabel.innerText = "Click or drag here to edit existing card";
+    uploadLabel.classList.remove("with-img");
 }
 
 async function fetchWithTimeout(resource, options = {}) {
diff --git a/stylesheet.css b/stylesheet.css
index 81f2527..7cc4b43 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -20,10 +20,16 @@
   --light: #f8f9fa;
   --dark: #343a40;
 
-  --theme-blue: #007bff;
-  --theme-blue-hover: #0064d9;
-  --theme-dark-blue: hsl(198,90%,15%);
-  --theme-active: #002872;
+  --theme-green: #658D1B;
+  --theme-green-accent: #436e24;
+  --theme-yellow-green: #C4D600;
+  --theme-tan: #F2F0A1;
+  --theme-gray: #A2B2C8;
+  --theme-blue: #071D49;
+  --theme-white: #e3e3e3;
+  --theme-white-accent: #bababa;
+  --theme-black: #2D2926;
+  --theme-black-accent: #000000;
 
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -32,12 +38,24 @@
   --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;
-  --text-color-neg: #ffffff;
-  --background-color: #ffffff;
-  --secondary-color: #f8f9fa !important;
-  --secondary-accent: #495057;
-  --trans-dur: 0.3s;
+
+  --trans-dur-fast: 0.3s;
+  --trans-dur: 0.75s;
+  --trans-dur-slow: 1.5s;
+}
+
+:root[data-applied-mode="light"] {
+  color-scheme: light;
+  --text-color: var(--theme-black-accent);
+  --text-color-negative: var(--white);
+  --background-color: var(--white);
+}
+
+:root[data-applied-mode="dark"] {
+  color-scheme: dark;
+  --text-color: var(--white);
+  --text-color-negative: var(--theme-black-accent);
+  --background-color: var(--theme-black);
 }
 
 *, ::after, ::before {
@@ -58,12 +76,14 @@ body {
   text-align: left;
   color: var(--text-color);
   background-color: var(--background-color);
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--secondary-color);
+  background-color: var(--theme-blue);
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 main {
@@ -90,7 +110,7 @@ input {
   font-size: inherit;
   line-height: inherit;
   overflow: visible;
-  background-color: var(--secondary-color);
+  transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out;
 }
 
 textarea {
@@ -98,7 +118,8 @@ textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
-  background-color: var(--secondary-color);
+  background-color: var(--theme-blue);
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 select {
@@ -151,12 +172,16 @@ h1, h2, h3, h4, h5, h6 {
   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;
+  transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) 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);
+  background-color: var(--theme-green);
+  border-color: var(--theme-green-accent);
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur-fast);
+}
+.btn-primary:hover:not(:disabled):not(.disabled) {
+  background-color: var(--theme-green-accent);
 }
 .btn:not(:disabled):not(.disabled) {
   cursor: pointer;
@@ -177,14 +202,6 @@ 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;
-}
-
 .text-center {
   text-align: center !important;
 }
@@ -207,11 +224,11 @@ input[type="checkbox"], input[type="radio"] {
   font-size: 1rem;
   line-height: 1.5;
   color: var(--text-color);
-  background-color: var(--secondary-color);
+  background-color: var(--background-color);
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: .25rem;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  transition: color var(--trans-dur) ease-in-out, background-color var(--trans-dur) ease-in-out, border-color var(--trans-dur) ease-in-out, box-shadow .15s ease-in-out;
 }
 
 .logo {
@@ -229,7 +246,7 @@ input[type="checkbox"], input[type="radio"] {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  background-color: var(--theme-blue);
+  background-color: var(--theme-green);
 }
 .navbar li {
   float: left;
@@ -246,12 +263,15 @@ input[type="checkbox"], input[type="radio"] {
   text-align: center;
   padding: 1.5em;
   text-decoration: none;
+  transition: color ease-in-out var(--trans-dur-fast), background-color ease-in-out var(--trans-dur-fast);
 }
 .navbar li a:hover:not(.active) {
-  background-color: var(--theme-blue-hover);
+  color: var(--theme-black-accent);
+  background-color: var(--white);
+  transition: color ease-in-out var(--trans-dur-fast), background-color ease-in-out var(--trans-dur-fast);
 }
 .active {
-  background-color: var(--theme-active);
+  background-color: var(--theme-green-accent);
 }
 .float-left {
   float:left !important;
@@ -292,11 +312,12 @@ input[type="checkbox"], input[type="radio"] {
   border-radius: 50%;
   padding: .75em;
   background: var(--theme-blue);
-  border: 2px solid var(--theme-dark-blue);
+  border: 2px solid var(--theme-black);
   position: absolute;
   right: -1.5em;
   top: -1.5em;
   text-decoration: none;
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .x div {
@@ -304,15 +325,16 @@ input[type="checkbox"], input[type="radio"] {
   width: 16px;
   font-size: 1.5rem;
   text-align: center;
-  color: var(--text-color-neg);
+  color: var(--text-color-negative);
   line-height: 8px !important;
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .upload {
   opacity: 100% !important;
   border-radius: .5rem;
   padding: 1em;
-  border: solid 2px var(--theme-dark-blue);
+  border: solid 2px var(--theme-black);
   background-color: var(--background-color);
   position: fixed;
   flex-direction: column;
@@ -325,10 +347,11 @@ input[type="checkbox"], input[type="radio"] {
   left: 50%;
   top: 14em;
   margin-left: -20em;
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .upload img {
-  width: 100%;
+  width: 20em;
   height: fit-content;
   margin-left: 5% !important;
   margin-right: 10% !important;
@@ -341,6 +364,7 @@ input[type="checkbox"], input[type="radio"] {
 
 .disabled {
   opacity: 75%;
+  cursor: not-allowed;
 }
 
 .hovering {
@@ -354,11 +378,12 @@ input[type="checkbox"], input[type="radio"] {
 
 .dotted {
   display: flex;
-  border: dotted 2px var(--theme-dark-blue);
+  border: dotted 2px var(--theme-black);
   width: 100%;
   height: 100%;
   text-align: center;
   align-items: center;
+  transition: color ease-in-out var(--trans-dur), background-color ease-in-out var(--trans-dur);
 }
 
 .dotted label {