diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index e9d7adb843..0675c65f46 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -23,10 +23,7 @@
 
   const login = async () => {
     loading = true
-    const response = await _bb.api.post("/api/authenticate", {
-      username,
-      password,
-    })
+    const response = await _bb.api.post("/api/authenticate", { username, password })
     if (response.status === 200) {
       const json = await response.json()
       localStorage.setItem("budibase:token", json.token)
@@ -39,39 +36,47 @@
   }
 </script>
 
-<div class="container">
-  <div class="root">
-    <div class="content">
-      {#if logo}
-        <div class="logo-container">
-          <img src={logo} alt="logo" />
-        </div>
-      {/if}
+<div class="root">
+  <div class="content">
+    {#if logo}
+      <div class="logo-container">
+        <img src={logo} alt="logo" />
+      </div>
+    {/if}
 
-      <div class="login-button-container">
-        <button disabled={loading} on:click={login} class={_buttonClass}>
-          Log in to {name}
-        </button>
+    <h1 class="header-content">Log in to {name}</h1>
+
+    <div class="form-root">
+      <div class="control">
+        <input
+          bind:value={username}
+          type="text"
+          placeholder="Username"
+          class={_inputClass} />
       </div>
 
-      {#if error}
-        <div class="incorrect-details-panel">
-          Incorrect username or password
-        </div>
-      {/if}
+      <div class="control">
+        <input
+          bind:value={password}
+          type="password"
+          placeholder="Password"
+          class={_inputClass} />
+      </div>
     </div>
+
+    <div class="login-button-container">
+      <button disabled={loading} on:click={login} class={_buttonClass}>
+        Log in to {name}
+      </button>
+    </div>
+
+    {#if error}
+      <div class="incorrect-details-panel">Incorrect username or password</div>
+    {/if}
   </div>
 </div>
 
 <style>
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-  }
   .root {
     height: 100%;
     display: flex;
@@ -102,7 +107,7 @@
 
   .header-content {
     font-family: Inter;
-    font-weight: 600;
+    font-weight: 700;
     color: #1f1f1f;
     font-size: 48px;
     line-height: 72px;