diff --git a/barcode.html b/barcode.html
index ca1eb25..6174778 100644
--- a/barcode.html
+++ b/barcode.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <title>Login Barcode Tool</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -13,10 +14,13 @@
 const sprites=[[16,16,[4294967295,4278190080],[3,[1,10],6,[1,10],6,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,8],8,[1,8],8,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,10],6,[1,10],35]],[16,16,[4294967295,4278190080],[3,[1,2],6,[1,2],6,[1,2],5,[1,3],6,[1,2],4,[1,3],7,[1,2],3,[1,3],8,[1,2],2,[1,3],9,[1,2],1,[1,3],10,[1,5],11,[1,5],11,[1,2],1,[1,3],10,[1,2],2,[1,3],9,[1,2],3,[1,3],8,[1,2],4,[1,3],7,[1,2],5,[1,3],6,[1,2],6,[1,2],35]],[16,16,[4294967295,4278190080],[5,[1,6],9,[1,8],7,[1,3],5,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,8],9,[1,6],37]],[16,16,[4294967295,4278190080],[3,[1,8],8,[1,9],7,[1,2],5,[1,3],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],5,[1,3],6,[1,9],7,[1,9],7,[1,2],5,[1,3],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],35]],[16,16,[4294967295,4278190080],[5,[1,6],9,[1,8],7,[1,3],4,[1,3],6,[1,2],6,[1,2],6,[1,2],14,[1,3],14,[1,7],10,[1,7],14,[1,3],14,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,8],9,[1,6],37]],[16,16,[4294967295,4278190080],[3,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,8],9,[1,6],37]],[16,16,[4294967295,4278190080],[3,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,2],6,[1,3],4,[1,3],7,[1,3],2,[1,3],9,[1,6],11,[1,4],13,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,2],14,[1,2],39]]].map((e=>renderSprite(e)));
 </script>
 <style>
+body{font-family: Roboto, sans-serif; font-size: 1rem;background-color:skyblue;}
 input{box-sizing: border-box; font-family: inherit; font-size: inherit;}
-input[type="text"], input[type="password"]{height: 2rem; line-height: 1.25rem;}
+input[type="text"], input[type="password"]{height: 2rem; line-height: 1.25rem; font-weight: 300;}
 button{font-family: inherit; font-size: inherit; padding: 0.5rem 0;}
-body{font-family: Roboto, sans-serif; font-size: 1rem;}
+h1{margin: 1rem 0;}
+label{font-weight: 600;}
+sub{font-weight: 300;}
 #container{max-width: 400px; margin: 0 auto; display: grid; gap: 20px;}
 #data{padding: 0 10px; display: grid; grid-template-columns: 1fr;}
 #data label, #data input, #data button, #data sub{margin-bottom: 5px; width: 100%;}
@@ -28,16 +32,19 @@
 <body>
 <div id="container">
     <div id="data">
+        <h1>Login Barcode Tool</h1>
         <label for="sso">Simple Sign-On</label>
         <sub>scan your card with a barcode app or google lens</sub>
         <input type="text" id="sso">
-        <label for="user">Account</label>
-        <sub>user@company.com</sub>
+        <label for="user">User</label>
+        <sub>user@company.com (optional)</sub>
         <input type="text" id="user">
         <label for="key">Password</label>
+        <sub>(optional)</sub>
         <input type="password" id="key">
         <br>
         <button id="button">Generate</button>
+        <br>
     </div>
 </div>
 <div id="content"></div>
