diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..637d3c5fb
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+[*.scss]
+indent_size = 2
+
+[{
+    tangerine.scss,
+    login.scss,
+    **/tangerine/*.scss
+}]
+indent_size = 4
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/styles/login.scss b/app/javascript/flavours/glitch/styles/login.scss
index b4184febd..f8848ebea 100644
--- a/app/javascript/flavours/glitch/styles/login.scss
+++ b/app/javascript/flavours/glitch/styles/login.scss
@@ -5,88 +5,76 @@
 @import 'basics';
 
 body {
-    height: 100vh;
-
-    a {
-        color: #89caff;
-    }
+    font-family: ui-rounded, 'mastodon-font-sans-serif', sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
 }
 
 .login-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    max-width: 30rem;
+    --login-row-gap: 10px;
+
+    display: grid;
+    row-gap: var(--login-row-gap);
+    margin: 50px auto;
     padding: 1rem;
-    margin: auto;
+    max-width: 30rem;
     box-sizing: border-box;
 }
 
 header {
     display: flex;
     justify-content: center;
-    margin-bottom: 1rem;
-}
 
-.mascot {
-    height: 10rem;
+    img {
+        height: 150px;
+    }
 }
 
 main {
     display: flex;
-    position: relative;
     flex-direction: column;
-    row-gap: 10px;
+    row-gap: var(--login-row-gap);
 }
 
-.login {
-    display: flex;
-    position: relative;
-    column-gap: 10px;
+h1 {
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
 }
 
-.instance {
-    background: #282c37;
-    border: 0;
-    border-radius: 4px;
-    box-shadow: none;
-    box-sizing: border-box;
-    color: #9baec8;
-    display: block;
+label {
     font-family: inherit;
-    font-size: 16px;
-    line-height: 18px;
-    margin: 0;
-    outline: 0;
-    padding: 15px;
-    padding-inline-end: 30px;
-    width: 100%;
+    color: $primary-text-color;
+    display: block;
+    word-wrap: break-word;
+    font-weight: 500;
+    grid-column: 1 / -1;
 }
 
-.button {
-    display: flex;
-    column-gap: .5rem;
-    align-items: center;
-    justify-content: center;
-    background-color: #66befe;
-    border: 0 none;
+form {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 1fr min-content;
+}
+
+:focus-visible,
+button:focus-visible {
+    outline: 2px solid #66befe;
+    outline-offset: 3px;
+}
+
+button {
+    padding: 7px 10px;
+    border: 1px solid lighten(#66befe, 7%);
     border-radius: 4px;
     box-sizing: border-box;
     color: #2a2b2f;
-    cursor: pointer;
-    font-size: 16px;
-    letter-spacing: 0;
-    line-height: 22px;
-    font-family: inherit;
+    font-size: inherit;
     font-weight: 500;
-    padding: 7px 10px;
-    position: relative;
     text-align: center;
-    text-decoration: none;
     white-space: nowrap;
-    flex-basis: auto;
+    background-color: #66befe;
 
     &:hover {
         background-color: #89caff;
@@ -98,21 +86,35 @@ main {
     }
 }
 
-.content {
-    background-color: #444b5d;
+input[type='text'] {
+    display: block;
+    marhing: 0;
     padding: 15px;
-    font-size: 1rem;
-    line-height: 1.5rem;
+    border: 1px solid lighten(#282c37, 7%);
     border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    row-gap: .75rem;
+    box-sizing: border-box;
+    box-shadow: none;
+    color: #9baec8;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 18px;
+    background: #282c37;
+}
+
+.content {
+    padding: 20px 15px 20px;
+    border-radius: 4px;
+    border: 1px solid lighten(#39404f, 7%);
+    color: #fff;
+    background-color: #39404f;
 }
 
 .link-footer {
-    padding: 10px;
+    padding-inline: 10px;
+    color: #97a8b4;
+    font-size: 0.875rem;
 
-    p, a {
-        color: #97A8B4;
+    a {
+        color: inherit;
     }
-}
\ No newline at end of file
+}
diff --git a/public/auth.js b/public/auth.js
index 75234e65a..641ecfdd4 100644
--- a/public/auth.js
+++ b/public/auth.js
@@ -1,5 +1,11 @@
 document.addEventListener("DOMContentLoaded", async function() {
   await ready();
+  
+  const form = document.querySelector('#login')
+  form?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    auth();
+  });
 });
 
 async function ready() {
diff --git a/public/login.html b/public/login.html
index eb3a14e80..8750fc9fe 100644
--- a/public/login.html
+++ b/public/login.html
@@ -5,35 +5,31 @@
     <meta charset="UTF-8">
     <title>Login | Masto-FE (🦥 flavour)</title>
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <link rel="stylesheet" media="all" href="/packs/css/core/common.css" />
     <link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/login.css" />
     <script src="/auth.js"></script>
 </head>
 
-<body>
+<body class="app-body">
     <div class="login-container">
         <header>
-            <img class="mascot" alt src="images/mascot.svg" />
+            <img  alt="a friendly smiling sloth" src="images/mascot.svg" />
         </header>
         <main>
-            <div class="login">
-                <input class="instance" id="instance" placeholder="Instance URL" aria-label="Instance URL" value="" onkeypress="if (event.keyCode == 13) auth()">
-                <button type="submit" class="button" id="btn" onclick="auth()">
+            <h1>Log into your instance</h1>
+            <form method="post" id="login">
+                <label for="instance">Instance URL</label>
+                <input type="text" id="instance" value="" class="input instance">
+                <button type="submit" class="button" id="btn">
                     <span id="message">Authorize</span>
                 </button>
-            </div>
-            <div class="content">
+            </form>
+            <aside class="content">
                 <p>
-                    This is a standalone version of the Mastodon front-end that offers compatibility with GoToSocial instances. It is based
-                    on <a href="https://iceshrimp.dev/iceshrimp/masto-fe-standalone" rel="nofollow">Iceshrimp's Masto-FE Standalone</a>,
-                    which is itself a fork of <a href="https://github.com/glitch-soc/mastodon" rel="nofollow">Mastodon Glitch Edition</a>,
-                    which in turn forks <a href="https://github.com/mastodon/mastodon/" rel="nofollow">Mastodon</a>. Phew!
+                    <strong>Note:</strong>
+                    this application is completely client-side, meaning everything happens in the browser on your machine.
+                    It does not store information anywhere else than your browser's local storage.
                 </p>
-                <p>
-                    The application is completely client-side, meaning everything happens in the browser on your machine. It does not store
-                    information anywhere else than your browser's local storage.
-                </p>
-            </div>
+            </aside>
         </main>
         <footer class="link-footer">
             <p>