diff --git a/core/installer/welcome/create-account-success.html b/core/installer/welcome/create-account-success.html
index 2872a43..9c647ac 100644
--- a/core/installer/welcome/create-account-success.html
+++ b/core/installer/welcome/create-account-success.html
@@ -2,6 +2,8 @@
 <html lang="en" data-theme="light">
     <head>
         <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
+        <link rel="stylesheet" href="/static/welcome.css?v=0.0.1">
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" >
         <title>Successful Registration</title>
diff --git a/core/installer/welcome/create-account.html b/core/installer/welcome/create-account.html
index a3f1b26..f95ca55 100644
--- a/core/installer/welcome/create-account.html
+++ b/core/installer/welcome/create-account.html
@@ -2,23 +2,22 @@
 <html lang="en" data-theme="light">
 <head>
     <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
-    <link rel="stylesheet" href="/static/welcome.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
+    <link rel="stylesheet" href="/static/welcome.css?v=0.0.1">
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
     <main class="container">
         <div class="form-container">
+            <div class="logo">
+                <span>do</span><span>do:</span>
+            </div>
             <form action="" method="POST">
-                <input class="input-field"
-                type="text"
-                name="username"
-                placeholder="Username"
-                aria-label="Username"
-                value="{{ .Data.Username }}"
-				aria-invalid="{{ if .UsernameErrors }}true{{ else }}undefined{{ end }}"
-                required
-                />
+                <label>
+                    username
+                    <input type="text" name="username" aria-label="Username" value="{{ .Data.Username }}" aria-invalid="{{ if .UsernameErrors }}true{{ else }}undefined{{ end }}" required/>
+                </label>
 				{{ if .UsernameErrors }}
 					{{ range .UsernameErrors }}
 						<small class="error-message" aria-live="assertive">
@@ -26,15 +25,10 @@
 						</small>
 					{{ end }}
 				{{ end }}
-                <input class="input-field"
-                type="password"
-                name="password"
-                placeholder="Password"
-                aria-label="Password"
-                value="{{ .Data.Password }}"
-				aria-invalid="{{ if .PasswordErrors }}true{{ else }}undefined{{ end }}"
-				required
-				/>
+                <label>
+                    password
+                    <input type="password" name="password" aria-label="Password" value="{{ .Data.Password }}" aria-invalid="{{ if .PasswordErrors }}true{{ else }}undefined{{ end }}" required/>
+                </label>
 				{{ if .PasswordErrors }}
 					{{ range .PasswordErrors }}
 						<small class="error-message" aria-live="assertive">
@@ -42,15 +36,11 @@
 						</small>
 					{{ end }}
 				{{ end }}
-                <input class="input-field"
-                type="text"
-                name="secret-token"
-                placeholder="Secret Token"
-                aria-label="Secret Token"
-                value="{{ .Data.SecretToken }}"
-                required
-                />
-                <button type="submit">Create Account</button>
+                <label>
+                    secret token
+                    <input type="text" name="secret-token" aria-label="Secret Token" value="{{ .Data.SecretToken }}" required/>
+                </label>
+                <button type="submit">create Account</button>
             </form>
         </div>
     </main>
diff --git a/core/installer/welcome/static/welcome.css b/core/installer/welcome/static/welcome.css
index 8aaa411..6098d88 100644
--- a/core/installer/welcome/static/welcome.css
+++ b/core/installer/welcome/static/welcome.css
@@ -1,18 +1,92 @@
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --pico-font-family: Hack, monospace;
+  --pico-font-size: 14px;
+  --pico-background-color: #d6d6d6;
+  --pico-border-radius: 0;
+  --pico-form-element-border-color: #ffffff;
+  --pico-form-element-active-border-color: #7f9f7f;
+  --pico-form-element-focus-color: #7f9f7f;
+  --pico-form-element-background-color: #3a3a3a;
+  --pico-form-element-active-background-color: #3a3a3a;
+  --pico-form-element-selected-background-color: #3a3a3a;
+  --pico-primary: #7f9f7f;
+  --pico-primary-background: #7f9f7f;
+  --pico-primary-hover: #d4888d;
+  --pico-primary-hover-background: #d4888d;
+  --pico-grid-spacing-horizontal: 0;
+}
+
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .container {
-    position: relative; 
+  max-width: 500px !important;
+  width: 100%;
+}
+
+form {
+  padding: 10px;
+  background-color: var(--pico-form-element-background-color);
+  width: 100%;
+}
+
+input {
+  background: var(--pico-form-element-background-color);
+  color: white;
+  padding: 10px;
+  text-align: left;
+  font-family: var(--pico-font-family) !important;
+  margin-bottom: 0 !important;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: white !important;
+  transition: background-color 5000s ease-in-out 0s;
+  background-color: var(--pico-form-element-background-color) !important;
+}
+
+&:-webkit-autofill::first-line {
+  font-family: var(--pico-font-family) !important;
+}
+
+.logo span:first-child {
+  color: white;
+  font-size: 24px;
+  padding-left: 10px;
+}
+
+.logo span:nth-child(2) {
+  color: var(--pico-primary-hover);
+  font-size: 24px;
+}
+
+.logo {
+  padding-top: var(--pico-spacing);
+  background-color: var(--pico-form-element-background-color);
+}
+
+label {
+  color: white;
+  margin-top: 14px;
+}
+
+label:first-of-type {
+  margin-top: 0;
+}
+
+label:last-of-type {
+  margin-bottom: 14px;
 }
 
 .error-message {
-    position: relative; 
-    left: 2px;
-    width: 100%;
-    margin-bottom: 1px;
-}
-
-.input-field {
-    margin-bottom: 14px;
-}
-
-.form-container {
-    margin-top: 0px; 
+  color: var(--pico-primary-hover);
 }