diff --git a/src/it/java/org/jenkinsci/account/ui/admin/AdminPage.java b/src/it/java/org/jenkinsci/account/ui/admin/AdminPage.java
index a3d0f8ec..1f10ea64 100644
--- a/src/it/java/org/jenkinsci/account/ui/admin/AdminPage.java
+++ b/src/it/java/org/jenkinsci/account/ui/admin/AdminPage.java
@@ -13,7 +13,7 @@ public class AdminPage {
     @FindBy(name = "word")
     private WebElement searchInput;
 
-    @FindBy(xpath = "//input[@value=\"Search\"]")
+    @FindBy(xpath = "//button[contains(text(), 'Search')]")
     private WebElement searchButton;
     private final WebDriver driver;
 
@@ -24,7 +24,7 @@ public AdminPage(WebDriver driver) {
 
     public void verifyOnPage() {
         assertThat(driver.getTitle())
-                .contains("Manage Users");
+                .contains("Admin");
     }
 
     public void search(String query) {
diff --git a/src/it/java/org/jenkinsci/account/ui/myaccount/MyAccountPage.java b/src/it/java/org/jenkinsci/account/ui/myaccount/MyAccountPage.java
index 4f7cc031..90ba8cb2 100644
--- a/src/it/java/org/jenkinsci/account/ui/myaccount/MyAccountPage.java
+++ b/src/it/java/org/jenkinsci/account/ui/myaccount/MyAccountPage.java
@@ -8,10 +8,10 @@
 
 // page_url = http://localhost:8080/
 public class MyAccountPage {
-    @FindBy(xpath = "//a[@href=\"./admin\"]")
+    @FindBy(xpath = "//a[@href=\"/admin\"]")
     private WebElement administerLink;
 
-    @FindBy(xpath = "//a[@href=\"./myself\"]")
+    @FindBy(xpath = "//a[@href=\"/myself\"]")
     private WebElement profileLink;
 
     public MyAccountPage(WebDriver driver) {
diff --git a/src/main/java/org/jenkinsci/account/Application.java b/src/main/java/org/jenkinsci/account/Application.java
index 0d0dfdbb..2fe349d5 100644
--- a/src/main/java/org/jenkinsci/account/Application.java
+++ b/src/main/java/org/jenkinsci/account/Application.java
@@ -1395,4 +1395,13 @@ public AdminUI getAdmin() {
 
     // Somewhat cryptic name for cookie, so prying eyes don't know its use.
     public static final String ALREADY_SIGNED_UP = "JENKINSACCOUNT";
+
+    /**
+     * Returns true if the provided url is the active url
+     */
+    public boolean isActive(String url) {
+        StaplerRequest req = Stapler.getCurrentRequest();
+        String currentUrl = StringUtils.strip(req.getRequestURI(), "/");
+        return currentUrl.equals(url);
+    }
 }
diff --git a/src/main/resources/org/jenkinsci/account/AdminUI/index.jelly b/src/main/resources/org/jenkinsci/account/AdminUI/index.jelly
index e376167b..38b979c0 100644
--- a/src/main/resources/org/jenkinsci/account/AdminUI/index.jelly
+++ b/src/main/resources/org/jenkinsci/account/AdminUI/index.jelly
@@ -1,40 +1,40 @@
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Manage Users">
-    <div class="row">
-      <div class="col-md-6">
-        <h1>Manage Users</h1>
-        <p class="description">
+  <t:layout title="Admin">
+      <h1>Admin</h1>
+        <h2>Manage users</h2>
+        <p class="ac-description">
           Type the username or email address to find the user.
         </p>
         <form method="post" action="search">
-          <div class="form-group">
+          <div class="ac-form-group">
             <label for="word">Username or email address</label>
             <input type="text" name="word" class="form-control text"/>
           </div>
 
-          <input type="submit" class="btn btn-primary" value="Search"/>
+          <button type="submit" class="app-button app-button--primary">
+            Search
+          </button>
         </form>
 
-        <h2>Set Circuit Breaker</h2>
-        <p class="description">
+        <h2>Set circuit breaker</h2>
+        <p class="ac-description">
           Temporarily disable sign-up to fight spam until a certain time.
           All times are in UTC.
         </p>
         <j:if test="${it.circuitBreaker.isOn()}">
-          <p class="description">
+          <p class="ac-description">
             Circuit breaker is currently on until ${it.circuitBreaker.date}.
             To disable it, set it to the time in the past, such as 2000/01/01 00:00.
           </p>
         </j:if>
         <form method="post" action="circuitBreaker/set">
-          <div class="form-group">
+          <div class="ac-form-group">
             <label for="time">Circuit breaker is on until when? (YYYY/MM/DD HH:MM)</label>
             <input type="text" name="time" class="form-control text"/>
           </div>
-
-          <input type="submit" class="btn btn-secondary" value="Save"/>
+          <button type="submit" class="app-button">
+            Save
+          </button>
         </form>
-      </div>
-    </div>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/AdminUI/search.jelly b/src/main/resources/org/jenkinsci/account/AdminUI/search.jelly
index 346a7889..837e8608 100644
--- a/src/main/resources/org/jenkinsci/account/AdminUI/search.jelly
+++ b/src/main/resources/org/jenkinsci/account/AdminUI/search.jelly
@@ -1,15 +1,23 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Search results">
+  <t:layout title="Search results" hideNavigation="true">
+    <div class="app-!-display-flex">
+      <a class="app-back-link" href="/admin">
+        Back to Admin
+      </a>
+    </div>
     <h1>Search results</h1>
-    <table class="table">
+    <div class="ac-description">
+      To delete, type "YES" to the text field left of "Delete" then click the Delete button.
+    </div>
+    <table class="ac-table">
       <thead>
         <tr>
-          <td>User ID</td>
-          <td>Email address</td>
-          <td>Reset password</td>
-          <td>Update email</td>
-          <td>Delete user</td>
+          <th>User ID</th>
+          <th>Email address</th>
+          <th>Reset password</th>
+          <th>Update email</th>
+          <th>Delete user</th>
         </tr>
       </thead>
       <j:forEach var="u" items="${all}">
@@ -19,29 +27,26 @@
           <td>
             <form method="post" action="passwordReset" style="margin:0">
               <input type="hidden" name="id" value="${u.id}" />
-              <input type="submit" value="Reset password" class="btn btn-secondary" />
+              <input type="submit" value="Reset password" class="app-button" />
             </form>
           </td>
-          <td style="padding-left:1em">
+          <td>
             <form method="post" action="emailReset" style="margin:0">
               <input type="hidden" name="id" value="${u.id}" />
-              <input type="text" name="email" value="${u.mail}" class="form-control mb-1" />
-              <input type="submit" value="Update" class="btn btn-secondary" />
+              <input type="text" name="email" value="${u.mail}" class="form-control" />
+              <input type="submit" value="Update" class="app-button" style="margin-left: 0.5rem" />
             </form>
           </td>
 
-          <td style="padding-left:1em">
+          <td>
             <form method="post" action="delete" style="margin:0">
               <input type="hidden" name="id" value="${u.id}" />
-              <input type="text" name="confirm" style="width:3em" class="form-control mb-1" />
-              <input type="submit" value="Delete" class="btn btn-danger" />
+              <input type="text" name="confirm" style="width:4em" class="form-control" />
+              <input type="submit" value="Delete" class="app-button" style="margin-left: 0.5rem" />
             </form>
           </td>
         </tr>
       </j:forEach>
     </table>
-    <p>
-      To delete, type "YES" to the text field left of "Delete" then click the Delete button.
-    </p>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/AdminUI/signup.jelly b/src/main/resources/org/jenkinsci/account/AdminUI/signup.jelly
index c506d53b..c7d1370c 100644
--- a/src/main/resources/org/jenkinsci/account/AdminUI/signup.jelly
+++ b/src/main/resources/org/jenkinsci/account/AdminUI/signup.jelly
@@ -1,40 +1,32 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
   <t:layout title="Administration">
-  <div class="row">
-  <div class="col-sm-4">
-
     <p>
       Confirm creating the following user
     </p>
-    <form method="post" action="doSignup" class="d-grid gap-2">
-      <div class="form-group">
+    <form method="post" action="doSignup">
+      <div class="ac-form-group">
         <label>User ID</label>
         <input type="text" name="userid" value="${request.getParameter('userId')}" class="form-control text" placeholder="Userid" />
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>First Name</label>
         <input type="text" name="firstName" value="${request.getParameter('firstName')}" class="form-control text" placeholder="First Name" />
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>Last Name</label>
         <input type="text" name="lastName" value="${request.getParameter('lastName')}" class="form-control text" placeholder="Last Name"/>
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>Email</label>
         <input type="email" name="email" value="${request.getParameter('email')}" class="form-control text" placeholder="Last Name"/>
       </div>
 
-      <button type="submit" class="btn btn-default">Sign Up</button>
+      <button type="submit" class="app-button">Sign Up</button>
 
     </form>
-  </div>
-  <div class="col-sm-8">
-  </div>
-  </div>
-
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/index.jelly b/src/main/resources/org/jenkinsci/account/Application/index.jelly
index c2536da1..a854a82f 100644
--- a/src/main/resources/org/jenkinsci/account/Application/index.jelly
+++ b/src/main/resources/org/jenkinsci/account/Application/index.jelly
@@ -1,31 +1,21 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
   <t:layout title="Account">
-    <h1>Account</h1>
-    <p>
-    You can create/manage your user account that you use for accessing
-    <a href="https://issues.jenkins.io/" target="_blank">Jira</a>,
-    <a href="https://repo.jenkins-ci.org/" target="_blank">Artifactory</a>,
-    VPN and other services within the <a href="https://www.jenkins.io/projects/infrastructure" target="_top">Jenkins Infrastructure</a>.
-    </p>
+    <j:if test="${it.isLoggedIn()}">
+      <h1>Hey ${it.myself.firstName}</h1>
 
-    <div id="account-menu">
-      <j:if test="${not it.isLoggedIn()}">
-        <script type="text/javascript">
-            window.location.href = "login"
-        </script>
-      </j:if>
-      <j:if test="${it.isLoggedIn()}">
-        <ul>
-          <j:if test="${it.isAdmin() or app.isAdmin()}">
-            <li><a href="./admin">Administer</a> - Manage other accounts</li>
-          </j:if>
-          <li><a href="./myself">Profile</a> - View and edit profile, change password, etc.</li>
-
-          <li><a href="./logout">Logout</a></li>
-        </ul>
-      </j:if>
-    </div>
+      <p class="app-description">
+        You can create/manage your user account that you use for accessing
+        <a href="https://issues.jenkins.io/" target="_blank">Jira</a>,
+        <a href="https://repo.jenkins-ci.org/" target="_blank">Artifactory</a>,
+        VPN and other services within the <a href="https://www.jenkins.io/projects/infrastructure" target="_top">Jenkins Infrastructure</a>.
+      </p>
+    </j:if>
 
+    <j:if test="${not it.isLoggedIn()}">
+      <script type="text/javascript">
+          window.location.href = "login"
+      </script>
+    </j:if>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/login.jelly b/src/main/resources/org/jenkinsci/account/Application/login.jelly
index 6b6c7bc4..3a80c8ee 100644
--- a/src/main/resources/org/jenkinsci/account/Application/login.jelly
+++ b/src/main/resources/org/jenkinsci/account/Application/login.jelly
@@ -1,32 +1,28 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Login">
-<div class="row">
-  <div class="col-md-6 mx-auto">
-    <div class="logo">
-      <img height="40px" src="/logo.svg" alt="Jenkins logo" />
-    </div>
-
-    <h1 class="text-center">Login</h1>
+  <t:layout title="Sign in" class="ac-small-width">
+    <h1>Sign in</h1>
 
-    <form method="post" action="doLogin" class="d-grid gap-2">
-      <div class="form-group">
+    <form method="post" action="doLogin">
+      <div class="ac-form-group">
         <label for="userid">Username</label>
-        <input autofocus="autofocus" type="text" name="userid" class="form-control text" id="userid" placeholder="Enter your username"/>
+        <input autofocus="autofocus" type="text" name="userid" class="form-control text" id="userid" />
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label for="login_password">Password</label>
-        <input type="password" id="login_password" name="password" placeholder="Enter your password" class="form-control text"/>
+        <input type="password" id="login_password" name="password" class="form-control text"/>
       </div>
 
       <input type="hidden" name="from" value="${request.getParameter('from')}"/>
 
-      <button type="submit" class="btn btn-primary btn-lg">Login</button>
+      <button type="submit" class="app-button app-button--primary ac-button--large">Sign in</button>
     </form>
 
-    <small><a href="signup">Sign up?</a> - <a href="passwordReset">Forgot password</a></small>
-  </div>
-</div>
+    <div class="ac-login__controls">
+      <a href="signup">Register</a>
+      <span class="ac-description">-</span>
+      <a href="passwordReset">Forgot password</a>
+    </div>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/passwordReset.jelly b/src/main/resources/org/jenkinsci/account/Application/passwordReset.jelly
index 5b5a285f..5a7ee272 100644
--- a/src/main/resources/org/jenkinsci/account/Application/passwordReset.jelly
+++ b/src/main/resources/org/jenkinsci/account/Application/passwordReset.jelly
@@ -1,25 +1,19 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Reset password">
-  <div class="row">
-  <div class="col-md-6 mx-auto">
-
+  <t:layout title="Reset password" class="ac-small-width">
     <h1>Reset password</h1>
 
-    <form method="post" action="doPasswordReset" class="d-grid gap-2">
-      <div class="form-group">
-        <label>Username or Email</label>
+    <form method="post" action="doPasswordReset">
+      <div class="ac-form-group">
+        <label>Username or email</label>
         <input type="text" name="id" class="form-control text"/>
       </div>
 
-      <button type="submit" class="btn btn-primary btn-lg">Reset</button>
+      <button type="submit" class="app-button app-button--primary ac-button--large">Reset</button>
 
-      <p class="mt-1 description">
+      <p class="ac-description">
         If you can't figure this out, <a href="https://github.com/jenkins-infra/helpdesk/issues/new?template=2-account-issue.yml&amp;labels=triage,accounts&amp;url=account.jenkins.io%2FpasswordReset">contact us</a> to get your account recovered.
       </p>
     </form>
-  </div>
-  </div>
-
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Application/signup.jelly b/src/main/resources/org/jenkinsci/account/Application/signup.jelly
index 534034e7..648b52c6 100644
--- a/src/main/resources/org/jenkinsci/account/Application/signup.jelly
+++ b/src/main/resources/org/jenkinsci/account/Application/signup.jelly
@@ -1,43 +1,36 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
+  <t:layout title="Register" class="ac-small-width">
+    <h1>Register</h1>
 
-  <t:layout title="Sign up">
-  <div class="row">
-  <div class="col-md-6 mx-auto">
-    <div class="logo">
-      <img height="40px" src="/logo.svg" alt="Jenkins logo" />
-    </div>
+    <div class="ac-description">All fields are required</div>
 
-    <h1 class="text-center">Sign up</h1>
-
-    <p class="description">All fields are required</p>
-
-    <form method="post" action="doSignup" class="d-grid gap-2">
-      <div class="form-group">
+    <form method="post" action="doSignup">
+      <div class="ac-form-group">
         <label for="userid">Username</label>
-        <p id="helpBlock" class="help-block description">
+        <div class="ac-description">
           Only letters, numbers, and '_' is allowed.
-        </p>
+        </div>
         <input autofocus="autofocus" autocomplete="username" type="text" name="userid" id="userid" class="form-control text"/>
       </div>
 
-      <div class="form-group">
-        <label for="firstname">First Name</label>
+      <div class="ac-form-group">
+        <label for="firstname">First name</label>
         <input autocomplete="given-name" type="text" name="firstName" id="firstname" class="form-control text" />
       </div>
 
-      <div class="form-group">
-        <label for="lastname" >Last Name</label>
+      <div class="ac-form-group">
+        <label for="lastname">Last name</label>
         <input autocomplete="family-name" type="text" id='lastname' name="lastName" class="form-control text" />
       </div>
 
-      <div class="form-group">
-        <label for="email">Email address</label>
+      <div class="ac-form-group">
+        <label for="email">Email</label>
         <input type="email" name="email" id="email" class="form-control text"/>
       </div>
 
-      <div class="form-group">
-        <label for="emailconfirm">Confirm your Email address</label>
+      <div class="ac-form-group">
+        <label for="emailconfirm">Confirm your email</label>
         <input type="email" name="emailconfirm" id="emailconfirm" class="form-control text"/>
       </div>
 
@@ -47,16 +40,13 @@
         <![CDATA[document.getElementById("hp").style.display = "none";]]>
       </script>
 
-      <div class="form-group">
+      <div class="ac-form-group">
           <label for="captchaCode">Captcha</label>
           <j:out value="${it.showCaptcha('signUpCaptcha')}"/>
           <input type="text" name="captchaCode" id="captchaCode" class="form-control text mt-2"/>
       </div>
 
-      <button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
+      <button type="submit" class="app-button app-button--primary ac-button--large">Create account</button>
     </form>
-  </div>
-</div>
-
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/Myself/index.jelly b/src/main/resources/org/jenkinsci/account/Myself/index.jelly
index b956afe9..4ef7b0bb 100644
--- a/src/main/resources/org/jenkinsci/account/Myself/index.jelly
+++ b/src/main/resources/org/jenkinsci/account/Myself/index.jelly
@@ -1,64 +1,61 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:t="/org/jenkinsci/account/taglib">
-  <t:layout title="Your Profile">
-  <div class="row">
-  <div class="col-md-6">
-    <h1>Your Profile</h1>
+  <t:layout title="Your profile">
+    <h1>Your profile</h1>
 
-    <form method="post" action="update" class="d-grid gap-2">
-    <div class="form-group">
+    <form method="post" action="update">
+    <div class="ac-form-group">
       <label>Username</label>
       <input type="text" readonly="true" value="${it.userId}" class="form-control text" disabled="true"/>
     </div>
 
-    <div class="form-group">
-      <label>First Name</label>
+    <div class="ac-form-group">
+      <label>First name</label>
       <input type="text" name="firstName" value="${it.firstName}" class="form-control text"/>
     </div>
 
-    <div class="form-group">
-      <label>Last Name</label>
+    <div class="ac-form-group">
+      <label>Last name</label>
       <input type="text" name="lastName" value="${it.lastName}" class="form-control text"/>
     </div>
 
-    <div class="form-group">
+    <div class="ac-form-group">
       <label>Email</label>
       <input type="email" name="email" value="${it.email}" class="form-control text"/>
     </div>
 
-    <div class="form-group">
+    <div class="ac-form-group">
       <label>GitHub username</label>
       <input type="text" name="githubId" value="${it.githubId}" class="form-control text"/>
     </div>
 
-    <div class="form-group">
+    <div class="ac-form-group">
       <label>SSH Public Keys</label>
       <textarea class="form-control" rows="3">${it.sshKeys}</textarea>
     </div>
 
-     <legend>Change Password</legend>
-     <p class="description">
+     <h3>Change Password</h3>
+     <p class="ac-description">
        To update your password, please type your current password as well as new one for security.
        Leave this empty to keep the current password.
      </p>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>Current password</label>
         <input autocomplete="current-password" type="password" name="password" value="" class="form-control text"/>
       </div>
-      <div class="form-group">
+
+      <div class="ac-form-group">
         <label>New password</label>
         <input autocomplete="new-password" type="password" name="newPassword1" class="form-control text"/>
       </div>
 
-      <div class="form-group">
+      <div class="ac-form-group">
         <label>Confirm new password</label>
         <input autocomplete="new-password" type="password" name="newPassword2" class="form-control text"/>
       </div>
 
-      <button type="submit" class="btn btn-primary btn-lg btn-block">Update</button>
+      <button type="submit" class="app-button app-button--primary">Update</button>
     </form>
-      </div>
-</div>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/openid/JenkinsOpenIDSession/confirm.jelly b/src/main/resources/org/jenkinsci/account/openid/JenkinsOpenIDSession/confirm.jelly
index b4ad4abe..3f9deac3 100644
--- a/src/main/resources/org/jenkinsci/account/openid/JenkinsOpenIDSession/confirm.jelly
+++ b/src/main/resources/org/jenkinsci/account/openid/JenkinsOpenIDSession/confirm.jelly
@@ -6,7 +6,9 @@
     </div>
 
     <form method="post" action="verify">
-      <input type="submit" value="Proceed"/>
+      <button type="submit">
+        Proceed
+      </button>
     </form>
   </t:layout>
 </j:jelly>
diff --git a/src/main/resources/org/jenkinsci/account/taglib/layout.jelly b/src/main/resources/org/jenkinsci/account/taglib/layout.jelly
index 30d257f2..d3892d50 100644
--- a/src/main/resources/org/jenkinsci/account/taglib/layout.jelly
+++ b/src/main/resources/org/jenkinsci/account/taglib/layout.jelly
@@ -2,6 +2,8 @@
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
   <st:documentation>
     <st:attribute name="title" use="required"/>
+    <st:attribute name="class" />
+    <st:attribute name="hideNavigation" />
   </st:documentation>
   <st:contentType value="text/html;charset=UTF-8" />
 <html style="height:100%;min-height:100%;">
@@ -29,64 +31,63 @@
 <meta content='Jenkins – Continuous Delivery for every team' property='og:description'/>
 <!-- Don't index internal tooling in search engines -->
 <meta name="robots" content="noindex"/>
-<link href='/webjars/fontawesome/4.7.0/css/font-awesome.min.css' media='screen' rel='stylesheet'/>
-<link href='/style.css' media='screen' rel='stylesheet'/>
-<link href='https://www.jenkins.io/assets/bower/bootstrap/css/bootstrap.min.css' media='screen' rel='stylesheet'/>
-<link href='https://www.jenkins.io/css/font-icons.css' media='screen' rel='stylesheet'/>
-<link href='https://www.jenkins.io/css/jenkins.css' media='screen' rel='stylesheet'/>
-<!-- Non-obtrusive CSS styles -->
-<link href='https://www.jenkins.io/assets/bower/ionicons/css/ionicons.min.css' media='screen' rel='stylesheet'/>
-<link href='https://www.jenkins.io/css/footer.css' media='screen' rel='stylesheet'/>
-    <script src="/webjars/jquery/3.7.1/jquery.js"/>
-    <script src="/webjars/jquery-ui/1.13.2/jquery-ui.js"/>
+    <link href='https://www.jenkins.io/css/jenkins.css' media='screen' rel='stylesheet'/>
+    <link href='https://www.jenkins.io/stylesheets/styles.css' media='screen' rel='stylesheet'/>
+    <link href='/style.css' media='screen' rel='stylesheet'/>
+    <link href='https://www.jenkins.io/assets/bower/ionicons/css/ionicons.min.css' media='screen' rel='stylesheet'/>
 </head>
-<body style="padding-top:72px">
+<body>
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule="" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/lit@2.6.1/polyfill-support.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.7.0/webcomponents-loader.js"></script>
     <script defer="" src="https://cdn.jsdelivr.net/npm/@jenkinsci/jenkins-io-components/+esm" type="module"></script>
     <script defer="" nomodule="" src="https://cdn.jsdelivr.net/npm/@jenkinsci/jenkins-io-components/"></script>
 
-    <jio-navbar class="fixed-top" property="https://accounts.jenkins.io"/>
+    <jio-navbar class="fixed-top" property="https://accounts.jenkins.io" theme="auto" />
 
-    <div class='container pb-5'>
-        <j:if test="${app.isLoggedIn() or it.isLoggedIn()}">
-            <nav class='navbar navbar-expand-md navbar-light' id="ji-toolbar">
-                <a class='navbar-brand' href='/'>
-                    My Account
-                </a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse"
-                        data-target="#navbarSupportedContent"
-                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"/>
-                </button>
-                <div class='collapse navbar-collapse' id='CollapsingNavbar2'>
-
-                    <ul class='navbar-nav mr-auto'>
+    <j:set var="showNavigation" value="${(app.isLoggedIn() or it.isLoggedIn()) and attrs.hideNavigation != true}" />
+    <div class='app-container ${attrs.class} ${showNavigation ? "ac-sidepanel-layout" : ""}'>
+        <j:if test="${showNavigation}">
+            <nav class='ac-navbar'>
+                <p class="h1">Account</p>
+                    <ul>
+                        <li>
+                            <a href='/' class="${app.isActive('') ? 'active' : ''}">
+                                <ion-icon name="home-outline"></ion-icon>
+                                Account
+                            </a>
+                        </li>
                         <j:if test="${it.isAdmin() or app.isAdmin()}">
-                            <li class="nav-item">
-                                <a href="/admin" class="active nav-link">Admin</a>
+                            <li>
+                                <a href="/admin" class="${app.isActive('admin') ? 'active' : ''}">
+                                    <ion-icon name="shield-outline"></ion-icon>
+                                    Admin
+                                </a>
                             </li>
                         </j:if>
-                        <li class="nav-item">
-                            <a href="/myself" class="active nav-link">Profile</a>
+                        <li>
+                            <a href="/myself" class="${app.isActive('myself') ? 'active' : ''}">
+                                <ion-icon name="person-outline"></ion-icon>
+                                Profile
+                            </a>
                         </li>
-
-                        <li class="nav-item">
-                            <a href="/logout" class="active nav-link">
+                        <li>
+                            <a href="/logout">
+                                <ion-icon name="log-out-outline"></ion-icon>
                                 Logout
-                                <i class="fa fa-sign-out" aria-hidden="true"/>
                             </a>
                         </li>
                     </ul>
-                </div>
             </nav>
         </j:if>
 
-        <d:invokeBody/>
+        <div class="ac-main-content">
+            <d:invokeBody/>
+        </div>
     </div>
 
     <script src='https://www.jenkins.io/assets/bower/anchor-js/anchor.min.js'></script>
-<script src='https://www.jenkins.io/assets/bower/bootstrap/js/bootstrap.min.js'></script>
 <jio-footer property="https://accounts.jenkins.io"
             reportAProblemTemplate="1-bug.yml" githubRepo="jenkins-infra/account-app" githubBranch="main"></jio-footer>
 <script>
diff --git a/src/main/webapp/logo.svg b/src/main/webapp/logo.svg
deleted file mode 100644
index d3bd9c12..00000000
--- a/src/main/webapp/logo.svg
+++ /dev/null
@@ -1,84 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2" version="1.1" inkscape:version="0.48.0 r9654" width="1032.1804" height="331.85538" xml:space="preserve" sodipodi:docname="logo+title.svg">
-		<metadata id="metadata8">
-			<rdf:RDF>
-				<cc:Work rdf:about="">
-					<dc:format>image/svg+xml</dc:format>
-          <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-          <dc:title />
-				</cc:Work>
-			</rdf:RDF>
-		</metadata>
-  <defs id="defs6">
-			<clipPath clipPathUnits="userSpaceOnUse" id="clipPath18">
-				<path d="M 0,2494.84 0,0 l 1804.34,0 0,2494.84 -1804.34,0 z" id="path20" inkscape:connector-curvature="0" />
-			</clipPath>
-		</defs>
-  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1881" inkscape:window-height="824" id="namedview4" showgrid="false" inkscape:zoom="1" inkscape:cx="604.50836" inkscape:cy="182.53093" inkscape:window-x="2091" inkscape:window-y="541" inkscape:window-maximized="0" inkscape:current-layer="g10" fit-margin-top="10" fit-margin-left="10" fit-margin-right="10" fit-margin-bottom="10" />
-  <g id="g10" inkscape:groupmode="layer" inkscape:label="ink_ext_XXXXXX" transform="matrix(1.25,0,0,-1.25,10,321.85516)">
-			<g id="g3393">
-				<path d="m 177.718,129.264 c 0,-49.4288 -39.175,-89.4992 -87.5,-89.4992 -48.3242,0 -87.49925,40.0704 -87.49925,89.4992 0,49.43 39.17505,89.501 87.49925,89.501 48.325,0 87.5,-40.071 87.5,-89.501" style="fill:#d33833;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path22" inkscape:connector-curvature="0" />
-        <path d="m 6.28438,107.098 c 0,0 -6.33438,93.333 79.66602,96 l -5.9996,10 -46.6664,-15.667 -13.3336,-15.333 -11.66642,-22.334 -6.66719,-26 2,-17.333" style="fill:#ef3d3a;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path24" inkscape:connector-curvature="0" />
-        <path d="M 30.2883,190.319 C 14.9363,174.611 5.43633,152.923 5.43633,128.93 l 0,0 c 0,-23.988 9.49997,-45.6788 24.85197,-61.3839 l 0,0 C 45.6477,51.841 66.8152,42.15 90.2168,42.15 l 0,0 c 23.4022,0 44.5712,9.691 59.9292,25.3961 l 0,0 c 15.351,15.7051 24.853,37.3959 24.853,61.3839 l 0,0 c 0,23.993 -9.502,45.681 -24.853,61.389 l 0,0 c -15.358,15.702 -36.527,25.393 -59.9292,25.395 l 0,0 C 66.8152,215.712 45.6477,206.021 30.2883,190.319 l 0,0 z M 26.4023,63.7469 C 10.0867,80.4328 0,103.493 0,128.93 l 0,0 c 0,25.441 10.0867,48.499 26.4023,65.186 l 0,0 c 16.3118,16.69 38.8915,27.035 63.8145,27.032 l 0,0 c 24.9232,0.003 47.5052,-10.342 63.8142,-27.032 l 0,0 c 16.317,-16.687 26.405,-39.747 26.403,-65.186 l 0,0 c 0.002,-25.437 -10.086,-48.4972 -26.403,-65.1831 l 0,0 C 137.722,47.0578 115.14,36.7141 90.2168,36.7141 l 0,0 c -24.923,0 -47.5027,10.3437 -63.8145,27.0328 l 0,0" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path26" inkscape:connector-curvature="0" />
-        <path d="m 127.051,128.768 -13.334,-2 -18.0002,-2 -11.6672,-0.333 -11.3328,0.333 -8.6672,2.667 -7.6668,8.333 -6,17 -1.3332,3.667 -8,2.666 -4.6668,7.667 -3.3332,11 3.6672,9.667 8.666,3 7,-3.334 3.334,-7.333 4,0.667 1.3328,1.666 -1.3328,7.667 -0.334,9.667 2,13.333 -0.0781,7.616 6.0781,9.717 10.6668,7.667 18.6672,8 20.6662,-3 18,-13 8.334,-13.333 5.333,-9.667 1.333,-24 -4,-20.667 -7.333,-18.333 -7,-9.667" style="fill:#f0d6b7;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path28" inkscape:connector-curvature="0" />
-        <path d="m 115.717,71.102 -47.6674,-2 0,-8 4,-28 -2,-2.334 -33.3328,11.334 -2.334,4 -3.3332,37.666 -7.6656,22.667 -1.6672,5.333 26.666,18.333 8.334,3.334 7.3328,-9 6.3332,-5.667 7.334,-2.333 3.3328,-1 4,-17.333 3,-3.6668 7.6672,2.6668 -5.334,-10.334 29.0002,-13.666 -3.666,-2" style="fill:#335061;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path30" inkscape:connector-curvature="0" />
-        <path d="m 36.7168,187.435 8.666,3 7,-3.334 3.334,-7.333 4,0.667 1,4 -2,7.666 2,18.334 -1.6672,10 6,7 13,10.333 -3.6668,5 -18.3332,-9 -7.6668,-6 -4.3332,-9.333 -6.6668,-9 -2,-10.667 1.334,-11.333" style="fill:#6d6b6d;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path32" inkscape:connector-curvature="0" />
-        <path d="m 50.3828,218.768 c 0,0 5,12.333 25,18.333 20,6 1,4.334 1,4.334 l -21.666,-8.334 -8.334,-8.333 -3.666,-6.667 7.666,0.667" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path34" inkscape:connector-curvature="0" />
-        <path d="m 40.3828,189.768 c 0,0 -7,23.334 19.6668,26.667 l -1,4 -18.3328,-4.334 -5.334,-17.333 1.334,-11.333 3.666,2.333" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path36" inkscape:connector-curvature="0" />
-        <path d="m 51.0496,158.768 4.3645,4.229 c 0,0 1.9699,-0.229 2.3027,-2.562 0.3328,-2.334 1.3328,-23.334 15.666,-34.668 1.3074,-1.034 -10.666,1.668 -10.666,1.668 l -10.6672,16.666" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path38" inkscape:connector-curvature="0" />
-        <path d="m 112.385,165.101 c 0,0 0.777,10.104 3.498,9.327 2.721,-0.777 2.721,-3.498 2.721,-3.498 0,0 -6.608,-4.275 -6.219,-5.829" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path40" inkscape:connector-curvature="0" />
-        <path d="m 140.05,202.101 c 0,0 -5.494,-1.16 -6,-6 -0.506,-4.841 6,-1 7,-0.667" style="fill:#f7e4cd;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path42" inkscape:connector-curvature="0" />
-        <path d="m 99.7168,201.767 c 0,0 -7.334,-1 -7.334,-5.666 0,-4.667 8.3342,-4.334 10.6672,-2.334" style="fill:#f7e4cd;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path44" inkscape:connector-curvature="0" />
-        <path d="m 54.3828,180.101 c 0,0 -12.6672,7.667 -14,0.333 -1.3332,-7.333 -4.334,-12.667 2,-20.333 l -4.3332,1.333 -4,10.333 -1.3328,10 7.666,8.001 8.6668,-0.667 5,-4 0.3332,-5" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path46" inkscape:connector-curvature="0" />
-        <path d="m 60.3828,201.101 c 0,0 5.6668,29.333 34.334,35 23.6012,4.665 35.9992,-1 40.6662,-6.333 0,0 -21,24.999 -41.0002,17.333 -20,-7.667 -34.666,-21.667 -34.3332,-30.666 0.5676,-15.328 0.3332,-15.334 0.3332,-15.334" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path48" inkscape:connector-curvature="0" />
-        <path d="m 137.717,226.435 c 0,0 -9.666,0.333 -10,-8.334 0,0 -0.001,-1.333 0.666,-2.666 0,0 7.668,8.667 12.334,4" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path50" inkscape:connector-curvature="0" />
-        <path d="m 95.3887,214.532 c 0,0 -1.6641,13.303 -13.0059,5.569 -7.3332,-5 -6.666,-12 -5.3332,-13.333 1.3332,-1.334 0.9707,-4.019 1.9856,-2.176 1.0144,1.843 0.6804,7.843 4.3476,9.509 3.6668,1.667 9.6777,3.529 12.0059,0.431" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path52" inkscape:connector-curvature="0" />
-        <path d="m 64.0496,124.435 -31.3328,-14 c 0,0 13,-51.667 6.3328,-67.667 l -4.6668,1.666 -0.3332,19.6672 -8.6656,37.3328 -3.6672,10.334 32.666,21.999 9.6668,-9.332" style="fill:#49728b;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path54" inkscape:connector-curvature="0" />
-        <path d="m 67.2715,95.8578 4.4453,-5.4238 0,-20 -5.334,0 c 0,0 -0.666,14 -0.666,15.6672 0,1.6668 0.666,7.6668 0.666,7.6668" style="fill:#49728b;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path56" inkscape:connector-curvature="0" />
-        <path d="m 67.3828,67.434 -15,-0.666 4.334,-3 10.666,-1.6668" style="fill:#49728b;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path58" inkscape:connector-curvature="0" />
-        <path d="m 118.717,70.768 12.333,0.3332 3,-30.6672 -12.667,-1.666 -2.666,32" style="fill:#335061;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path60" inkscape:connector-curvature="0" />
-        <path d="m 122.05,70.768 18.667,1 c 0,0 7.666,19.3332 7.666,20.3332 0,1 6.667,27.9998 6.667,27.9998 l -15,15.666 -3,2.667 -8,-8 0,-31 -7,-28.666" style="fill:#335061;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path62" inkscape:connector-curvature="0" />
-        <path d="m 130.383,73.1012 -11.666,-2.3332 1.666,-9.334 c 4.333,-2 11.667,3.334 11.667,3.334" style="fill:#49728b;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path64" inkscape:connector-curvature="0" />
-        <path d="m 130.717,131.434 23.333,-17.333 0.667,8 -17.667,16.333 -6.333,-7" style="fill:#49728b;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path66" inkscape:connector-curvature="0" />
-        <path d="M 78.9508,5.09805 72.0496,33.102 68.6172,53.7648 68.0496,69.102 l 31.2348,1.6628 19.4326,0.0032 -1.767,-35.0032 3,-26.99996 -0.333,-5 -25.3326,-2 -15.3336,3.33321" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path68" inkscape:connector-curvature="0" />
-        <path d="m 114.383,71.1012 c 0,0 -1.666,-34.6672 3.334,-59.3332 0,0 -10,-6.33402 -24.6674,-8.00003 l 28.0004,1 3.333,2 -4,54.66603 -1,11.668" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path70" inkscape:connector-curvature="0" />
-        <path d="m 134.618,43.098 13,3.6668 24.666,1.3332 3.667,11.3329 -6.667,19.6671 -7.666,1 -10.667,-3.3332 -10.234,-4.9968 -5.433,0.9968 -4.234,-1.6636" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path72" inkscape:connector-curvature="0" />
-        <path d="m 134.383,49.768 c 0,0 8.666,3.9992 10,3.666 l -3.666,18.334 4.333,1.666 c 0,0 3,-17.3328 3,-19.3328 0,0 18.666,-1 20.333,-1 0,0 4,7.6668 3,15.6668 l 3.667,-10.6668 0.333,-6 -5.333,-8 -6,-1.3332 -10,0.3332 -3.333,4.3328 -11.667,-1.666 -3.667,-1.334" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path74" inkscape:connector-curvature="0" />
-        <path d="m 121.284,73.4309 -7.333,18.6671 -7.667,11 c 0,0 1.666,4.667 4,4.667 2.334,0 7.667,0 7.667,0 l 7.333,-2.667 -0.666,-12.3332 -3.334,-19.3339" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path76" inkscape:connector-curvature="0" />
-        <path d="m 122.717,79.768 c 0,0 -9.334,17.9992 -9.334,20.666 0,0 1.666,4 4,3 2.334,-1 7.334,-3.666 7.334,-3.666 l 0,6.333 -11.334,2.334 -7.666,-1 13,-30.667 2.666,-0.334" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path78" inkscape:connector-curvature="0" />
-        <path d="m 81.9512,123.764 -9.2344,1.004 -8.6672,2.667 0,-3 4.2348,-4.67 13.3332,-6" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path80" inkscape:connector-curvature="0" />
-        <path d="m 67.0508,122.765 c 0,0 10.334,-4.334 13.6672,-3.334 l 0.3316,-3.996 -9.3316,1.996 -5.6672,4 1,1.334" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path82" inkscape:connector-curvature="0" />
-        <path d="m 134.582,106.63 c -5.656,0.166 -10.766,0.838 -15.24,2.1 0.304,1.834 -0.265,3.634 0.192,4.955 1.247,0.898 3.337,0.884 5.222,1.095 -1.63,0.801 -3.92,1.118 -5.801,0.655 -0.044,1.273 -0.615,2.062 -0.961,3.058 3.18,1.135 10.687,8.576 14.91,6.112 2.012,-1.172 2.867,-7.866 3.023,-11.121 0.13,-2.7 -0.245,-5.424 -1.345,-6.854" style="fill:#d33833;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path84" inkscape:connector-curvature="0" />
-        <path d="m 134.582,106.63 c -5.656,0.166 -10.766,0.838 -15.24,2.1 0.304,1.834 -0.265,3.634 0.192,4.955 1.247,0.898 3.337,0.884 5.222,1.095 -1.63,0.801 -3.92,1.118 -5.801,0.655 -0.044,1.273 -0.615,2.062 -0.961,3.058 3.18,1.135 10.687,8.576 14.91,6.112 2.012,-1.172 2.867,-7.866 3.023,-11.121 0.13,-2.7 -0.245,-5.424 -1.345,-6.854 z" style="fill:none;stroke:#d33833;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" id="path86" inkscape:connector-curvature="0" />
-        <path d="m 107.535,115.876 c -0.015,-0.428 -0.033,-0.859 -0.05,-1.291 -1.766,-1.16 -4.617,-1.146 -6.555,-2.121 2.857,-0.125 5.106,-0.813 7.052,-1.783 -0.043,-1.078 -0.084,-2.155 -0.126,-3.233 -3.237,-2.216 -6.194,-5.516 -10.0052,-7.5941 -1.802,-0.9828 -8.1262,-3.5117 -10.0434,-3.0648 -1.0847,0.2519 -1.1824,1.598 -1.616,2.8668 -0.9238,2.7171 -3.0508,7.0421 -3.2363,11.1321 -0.2363,5.166 -0.7578,13.824 4.8094,12.76 4.4914,-0.857 9.7152,-2.926 13.1925,-4.826 2.125,-1.162 3.354,-2.598 6.578,-2.846" style="fill:#d33833;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path88" inkscape:connector-curvature="0" />
-        <path d="m 107.535,115.876 c -0.015,-0.428 -0.033,-0.859 -0.05,-1.291 -1.766,-1.16 -4.617,-1.146 -6.555,-2.121 2.857,-0.125 5.106,-0.813 7.052,-1.783 -0.043,-1.078 -0.084,-2.155 -0.126,-3.233 -3.237,-2.216 -6.194,-5.516 -10.0052,-7.5941 -1.802,-0.9828 -8.1262,-3.5117 -10.0434,-3.0648 -1.0847,0.2519 -1.1824,1.598 -1.616,2.8668 -0.9238,2.7171 -3.0508,7.0421 -3.2363,11.1321 -0.2363,5.166 -0.7578,13.824 4.8094,12.76 4.4914,-0.857 9.7152,-2.926 13.1925,-4.826 2.125,-1.162 3.354,-2.598 6.578,-2.846 z" style="fill:none;stroke:#d33833;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" id="path90" inkscape:connector-curvature="0" />
-        <path d="m 110.75,109.712 c -0.494,2.814 -1.065,3.617 -0.844,6.072 7.505,5.004 8.914,-8.595 0.844,-6.072" style="fill:#d33833;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path92" inkscape:connector-curvature="0" />
-        <path d="m 110.75,109.712 c -0.494,2.814 -1.065,3.617 -0.844,6.072 7.505,5.004 8.914,-8.595 0.844,-6.072 z" style="fill:none;stroke:#d33833;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" id="path94" inkscape:connector-curvature="0" />
-        <path d="m 121.617,107.431 c 0,0 -2.334,3.334 -0.667,4.334 1.667,1 3.334,-0.001 4.334,1.666 1,1.667 0,2.667 0.333,4.667 0.333,2 2.001,2.334 3.667,2.667 1.666,0.333 6.334,1 7,-0.667 l -2,6 -4,1.333 -12.667,-7.333 -0.667,-3.667 0,-7.333" style="fill:#ef3d3a;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path96" inkscape:connector-curvature="0" />
-        <path d="m 86.6172,96.4309 c -0.4004,5.2021 -0.8242,10.3971 -1.2957,15.5941 -0.7055,7.76 1.864,6.406 8.5906,6.406 1.0274,0 6.3259,-1.225 6.7049,-2 1.818,-3.713 -3.04,-2.888 2.094,-5.688 4.334,-2.363 11.99,1.435 10.239,6.688 -0.98,1.168 -5.106,0.364 -6.585,1.131 -2.604,1.35 -5.208,2.7 -7.8123,4.05 -3.3132,1.719 -10.9707,4.225 -14.5031,1.823 -8.9504,-6.087 0.5649,-21.296 3.7578,-27.6459" style="fill:#ef3d3a;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path98" inkscape:connector-curvature="0" />
-        <path d="m 95.3887,214.532 c -9.0852,2.116 -13.5996,-3.802 -16.3535,-9.94 -2.459,0.596 -1.4805,3.94 -0.8594,5.644 1.6262,4.472 8.1797,10.425 13.5344,9.618 2.3043,-0.347 5.4226,-2.454 3.6785,-5.322" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path100" inkscape:connector-curvature="0" />
-        <path d="m 139.655,204.186 c 0.143,-0.006 0.288,-0.011 0.431,-0.017 2.053,-4.265 3.83,-8.783 6.42,-12.548 -1.735,-4.041 -13.138,-7.617 -12.962,-0.361 2.466,1.078 6.723,0.22 8.909,1.597 -1.264,3.469 -3.088,6.422 -2.798,11.329" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path102" inkscape:connector-curvature="0" />
-        <path d="m 100.04,204.075 c 1.948,-3.571 2.582,-7.323 5.351,-10.022 1.247,-1.215 3.672,-2.696 2.47,-6.075 -0.281,-0.797 -2.334,-2.574 -3.519,-2.923 -4.329,-1.278 -14.4162,-0.264 -11.0002,5.133 3.5801,-0.167 8.3922,-2.325 11.0682,0.274 -2.055,3.285 -5.7186,9.784 -4.37,13.613" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path104" inkscape:connector-curvature="0" />
-        <path d="m 138.03,167.781 c -6.518,-4.187 -13.786,-8.74 -24.466,-7.684 -2.282,1.984 -3.152,6.399 -0.935,9.315 1.154,-1.984 0.429,-5.633 3.645,-6.182 6.06,-1.037 13.113,3.707 17.472,5.365 2.703,4.557 -0.233,6.233 -2.668,9.166 -4.985,6.009 -11.672,13.457 -11.429,22.453 2.015,1.461 2.189,-2.23 2.478,-2.902 2.603,-6.092 9.154,-13.883 13.935,-19.097 1.174,-1.284 3.107,-2.516 3.322,-3.365 0.62,-2.469 -1.613,-5.427 -1.354,-7.069" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path106" inkscape:connector-curvature="0" />
-        <path d="m 52.1016,172.189 c -2.043,1.166 -2.5293,6.302 -4.9278,6.448 -3.4277,0.208 -2.8027,-6.663 -2.789,-10.681 -2.3594,2.142 -2.7743,8.737 -1.041,12.124 -1.9754,0.97 -2.8575,-1.07 -3.9532,-1.789 1.4082,10.23 14.9649,4.745 12.711,-6.102" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path108" inkscape:connector-curvature="0" />
-        <path d="m 142.18,163.521 c -3.034,-5.775 -7.326,-12.135 -16.229,-12.32 -0.181,1.865 -0.32,4.703 0.01,5.826 6.806,0.654 11.008,4.118 16.219,6.494" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path110" inkscape:connector-curvature="0" />
-        <path d="m 99.5266,159.777 c 5.6784,-2.986 16.1144,-3.307 23.8324,-3.081 0.414,-1.691 0.404,-3.78 0.42,-5.842 -9.921,-0.495 -21.651,1.96 -24.2524,8.923" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path112" inkscape:connector-curvature="0" />
-        <path d="m 98.4473,154.209 c 3.9267,-9.859 17.4227,-8.724 28.8037,-8.452 -0.501,-1.28 -1.587,-2.792 -2.937,-3.339 -3.647,-1.484 -13.706,-2.61 -18.769,0.079 -3.211,1.707 -5.274,5.564 -7.0333,7.825 -0.8496,1.092 -5.0801,3.881 -0.0644,3.887" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path114" inkscape:connector-curvature="0" />
-        <path d="m 137.556,99.8262 c -4.608,-7.8922 -9.017,-15.9981 -14.484,-22.9594 2.292,6.7391 3.273,18.0184 3.619,26.6172 4.795,2.244 8.901,-0.505 10.865,-3.6578" style="fill:#81b0c4;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path116" inkscape:connector-curvature="0" />
-        <path d="m 162.352,71.4609 c -5.159,-1.0328 -8.784,-6.0468 -13.817,-5.725 2.766,3.8993 7.613,5.543 13.817,5.725" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path118" inkscape:connector-curvature="0" />
-        <path d="m 164.628,63.3871 c -4.205,-0.4441 -9.144,-1.125 -13.409,-0.7742 2.019,3.084 9.798,2.0199 13.409,0.7742" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path120" inkscape:connector-curvature="0" />
-        <path d="m 166.085,56.4262 c -4.726,-0.1024 -10.6,-0.0082 -15.092,0.3687 2.657,2.8539 12.027,1.059 15.092,-0.3687" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path122" inkscape:connector-curvature="0" />
-        <path d="m 128.664,37.377 c 0.678,-5.9352 3.031,-11.9489 2.736,-18.4489 -2.613,-0.8812 -4.114,-1.6519 -7.615,-1.6472 -0.247,5.5242 -0.986,13.9691 -0.765,19.2351 1.722,-0.114 4.261,1.2301 5.644,0.861" style="fill:#dcd9d8;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path124" inkscape:connector-curvature="0" />
-        <path d="m 121.045,124.849 c -2.373,-1.549 -4.394,-3.483 -6.673,-5.137 -5.054,-0.25 -7.812,0.35 -11.525,3.252 0.061,0.233 0.434,0.129 0.448,0.415 5.41,-2.411 12.287,0.982 17.75,1.47" style="fill:#f0d6b7;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path126" inkscape:connector-curvature="0" />
-        <path d="m 92.6445,87.9711 c 1.4864,6.441 7.3106,9.7769 12.5995,13.3239 5.459,-6.9282 8.779,-15.838 12.435,-24.436 -8.638,2.6039 -17.464,6.8289 -25.0345,11.1121" style="fill:#81b0c4;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path128" inkscape:connector-curvature="0" />
-        <path d="m 123.02,36.516 c -0.221,-5.266 0.518,-13.7109 0.765,-19.2351 3.501,-0.0047 5.002,0.766 7.615,1.6472 0.295,6.5 -2.058,12.5137 -2.736,18.4489 -1.383,0.3691 -3.922,-0.975 -5.644,-0.861 z M 68.5059,66.4648 C 70.8145,45.2418 74.1582,27.4012 80.291,8.60781 93.9023,4.475 110.311,4.11484 122.342,7.84414 120.133,18.4512 121.098,31.3648 119.807,42.684 c -0.973,8.5078 -0.477,17.068 -1.811,25.748 -14.578,3.0328 -35.1835,0.709 -49.4901,-1.9672 z m 52.9371,1.834 c -0.123,-9.1148 0.408,-18.1058 1.104,-27.232 3.5,0.5254 5.875,0.8762 9.127,1.5891 -1.056,8.7859 -0.926,18.6722 -3.077,26.4441 -2.486,-0.0238 -4.675,0.0289 -7.154,-0.8012 z m 17.755,1.4692 c -1.661,0.3808 -3.595,0.0148 -5.182,-0.016 0.746,-7.4301 2.556,-15.629 3.193,-23.4282 2.497,-0.0777 3.831,1.1 5.885,1.4961 0.11,6.8461 -0.598,16.2781 -3.896,21.9481 z m 26.884,-24.5629 c 5.205,1.264 8.478,7.639 7.022,14.1859 -0.977,4.4 -2.717,12.6852 -4.579,15.5 -1.376,2.082 -5.107,4.8078 -8.086,2.9 -4.846,-3.1031 -13.383,-4.0039 -16.917,-7.7601 1.772,-5.9 2.322,-14.0039 3.053,-21.4797 6.054,-0.3774 13.503,1.666 18.538,-0.5024 -3.515,-1.1386 -8.076,-1.1476 -11.113,-2.807 2.482,-1.1988 8.293,-0.9566 12.082,-0.0367 z M 117.679,76.859 c -3.656,8.598 -6.976,17.5078 -12.435,24.436 C 99.9551,97.748 94.1309,94.4121 92.6445,87.9711 100.215,83.6879 109.041,79.4629 117.679,76.859 z m 9.012,26.625 c -0.346,-8.5988 -1.327,-19.8781 -3.619,-26.6172 5.467,6.9613 9.876,15.0672 14.484,22.9594 -1.964,3.1528 -6.07,5.9018 -10.865,3.6578 z m -10.216,3.63 c -2.071,0.223 -3.829,-2.381 -6.522,-1.255 -0.617,-0.682 -1.178,-1.421 -1.807,-2.087 5.948,-7.1681 8.651,-17.338 13.245,-25.7618 2.465,8.0918 2.181,16.957 2.724,25.7888 -3.387,-0.215 -5.266,3.063 -7.64,3.315 z m -6.569,8.67 c -0.221,-2.455 0.35,-3.258 0.844,-6.072 8.07,-2.523 6.661,11.076 -0.844,6.072 z m -8.949,2.938 c -3.4773,1.9 -8.7011,3.969 -13.1925,4.826 -5.5672,1.065 -5.0457,-7.594 -4.8094,-12.76 0.1855,-4.09 2.3125,-8.415 3.2363,-11.1321 0.4336,-1.2688 0.5313,-2.6149 1.616,-2.8668 1.9172,-0.4469 8.2414,2.082 10.0434,3.0648 3.8112,2.0781 6.7682,5.3781 10.0052,7.5941 0.042,1.078 0.083,2.155 0.126,3.233 -1.946,0.97 -4.195,1.658 -7.052,1.783 1.938,0.975 4.789,0.961 6.555,2.121 0.017,0.432 0.035,0.863 0.05,1.291 -3.224,0.248 -4.453,1.684 -6.578,2.846 z m -33.2136,6.033 c -2.886,-2.93 8.0945,-6.924 11.5906,-7.139 -0.0195,1.854 1.0566,3.602 0.8398,4.932 -4.1523,0.729 -9.6093,0.248 -12.4304,2.207 z m 35.5516,-1.376 c -0.014,-0.286 -0.387,-0.182 -0.448,-0.415 3.713,-2.902 6.471,-3.502 11.525,-3.252 2.279,1.654 4.3,3.588 6.673,5.137 -5.463,-0.488 -12.34,-3.881 -17.75,-1.47 z m 32.632,-9.895 c -0.156,3.255 -1.011,9.949 -3.023,11.121 -4.223,2.465 -11.73,-4.977 -14.91,-6.112 0.346,-0.996 0.917,-1.785 0.961,-3.058 1.881,0.463 4.171,0.146 5.801,-0.655 -1.885,-0.211 -3.975,-0.197 -5.222,-1.095 -0.457,-1.321 0.112,-3.121 -0.192,-4.955 4.474,-1.262 9.584,-1.934 15.24,-2.1 1.1,1.43 1.475,4.154 1.345,6.854 z m -73.0422,8.437 c -0.9063,0.646 -7.0371,8.623 -7.877,8.292 C 43.9141,125.838 33.541,118.273 24.2715,111.118 33.1094,92.1539 36.677,68.9199 37.3074,46.5262 47.4316,41.791 56.3242,34.9648 70.0625,34.252 68.4727,45.5 67.0215,55.5352 66.1191,66.125 c -3.4519,1.4551 -8.4043,-0.066 -11.6347,0.4512 -0.0274,3.8929 4.9336,1.7047 5.3468,4.3226 0.3114,1.9801 -2.7296,2.1301 -1.7394,5.2481 2.5254,-0.918 3.8516,-2.9457 6.5449,-3.7071 2.461,5.384 -0.0344,14.9102 0.3203,19.4102 0.0672,0.8449 0.4219,4.6809 2.3145,4.0078 1.675,-0.5957 -0.0957,-10.2019 0.0879,-14.4609 0.1672,-3.9239 -0.4739,-7.7207 1.1152,-10.184 13.2754,1.807 26.7656,2.975 41.1294,3.3691 -3.16,1.3559 -6.914,2.6391 -11.0298,4.959 -2.2312,1.2578 -9.2644,3.875 -9.9082,5.9942 -1.0273,3.3769 2.6953,5.1757 3.332,8.0707 -6.7011,-3.6547 -8.0085,3.5031 -9.5937,8.5741 -1.4363,4.593 -2.2539,8.024 -2.6063,10.673 -5.7726,2.752 -11.9445,5.539 -16.9132,9.068 z m 67.1792,7.327 c 9.243,4.482 10.909,-16.751 7.286,-23.591 0.56,-2.04 2.486,-2.821 3.272,-4.655 -5.158,-9.2399 -10.887,-17.8649 -16.15,-26.9961 3.915,2.4371 9.507,0.4359 14.114,2.2601 1.684,0.666 2.903,4.5211 4.178,7.6051 3.507,8.4848 7.189,19.1819 8.827,27.2789 0.37,1.845 1.378,5.865 1.152,7.507 -0.403,2.94 -4.392,5.12 -6.421,6.938 -3.738,3.358 -6.092,6.313 -9.991,9.453 -1.581,-2.334 -4.974,-3.902 -6.267,-5.8 z m -88.3179,81.968 c -4.4043,-4.846 -3.4824,-13.926 -2.9492,-20.386 7.9609,5.008 18.5273,-0.396 18.4277,-8.914 3.8008,0.101 1.4199,4.747 0.7324,7.74 -2.2468,9.776 3.7852,20.397 0.2735,29.337 -6.8184,-0.517 -12.42,-3.302 -16.4844,-7.777 z m 31.5137,28.126 c -9.9707,-2.826 -22.7493,-10.071 -26.8465,-19.028 3.1726,0.461 5.375,2.061 8.5047,2.259 1.1828,0.077 2.7324,-0.496 4.0918,-0.158 2.709,0.672 4.9953,6.746 7.039,9.006 1.9922,2.207 4.3867,3.15 6.0254,5.162 1.0528,0.508 2.6094,0.473 2.6692,2.054 -0.4563,0.488 -0.9368,0.86 -1.4836,0.705 z m 51.9032,-2.658 c -10.349,5.839 -27.8661,10.231 -38.8747,4.743 -8.8828,-4.429 -20.8899,-11.757 -24.9836,-21.043 3.8242,-8.961 -1.1328,-17.172 -1.4492,-26.27 -0.168,-4.841 2.2793,-9.067 2.4668,-14.337 -1.3086,-2.159 -5.3067,-2.425 -8.0743,-2.277 -0.9316,4.662 -2.5625,9.902 -7.3632,10.428 -6.793,0.743 -11.7598,-4.879 -12.0684,-10.754 -0.3652,-6.909 5.3066,-18.36 13.3457,-17.565 3.1055,0.307 3.8684,3.42 7.252,3.388 1.8339,-3.659 -2.8289,-4.808 -3.3086,-7.425 -0.125,-0.676 0.3867,-3.318 0.6843,-4.557 1.4602,-6.033 4.7153,-13.841 7.9192,-18.434 4.0664,-5.826 12.0555,-6.704 20.6504,-7.275 1.5351,3.307 7.1902,3.035 10.875,2.17 -4.416,1.749 -8.5215,5.989 -11.9239,9.742 -3.9082,4.306 -7.8671,8.925 -8.0671,14.553 7.3855,-10.246 13.4871,-19.194 26.9168,-23.701 10.1618,-3.408 22.0298,1.562 29.8378,7.045 3.24,2.279 5.174,5.895 7.477,9.205 8.617,12.395 12.638,30.087 11.754,47.235 -0.364,7.072 -0.348,14.12 -2.721,18.878 -2.48,4.975 -10.868,9.426 -15.778,4.926 -0.91,4.838 4.083,7.83 9.948,6.089 -4.182,5.397 -8.571,11.882 -14.515,15.236 z M 144.444,77.1168 c 8.087,4.0203 23.197,10.8211 28.267,-0.0148 1.871,-3.9942 4.066,-10.7461 5.035,-14.8692 1.369,-5.8168 -1.484,-18.043 -7.463,-19.9949 -5.281,-1.7238 -11.443,-1.6188 -17.804,-0.341 -0.749,0.623 -1.583,1.709 -2.166,2.841 -4.542,0.1762 -8.795,-0.2438 -12.383,-2.1109 0.34,-3.359 -1.932,-3.8981 -4.062,-4.5899 -1.579,-6.2609 3.159,-14.4371 2.025,-20.1461 -0.809,-4.0672 -5.813,-4.6961 -9.491,-5.457 -0.12,-2.2602 0.161,-4.14689 0.412,-6.059 -0.841,-3.09883 -4.613,-4.86289 -8.187,-5.29492 -11.759,-1.414064 -29.6133,-2.049221 -40.9239,2.01797 -3.1562,7.74175 -5.6426,17.15785 -8.2715,25.99805 -11.0312,-1.1781 -19.9531,4.7598 -28.364,8.65 -2.9121,1.35 -6.9406,2.0937 -8.0285,4.4117 -1.0547,2.2442 -0.6231,6.5453 -0.8848,10.6082 -0.666,10.377 -1.2363,20.386 -3.9766,31.011 -1.2304,4.7679 -3.375,8.975 -4.8711,13.5691 -1.3828,4.2579 -3.7988,9.5199 -4.4289,13.7659 -0.9343,6.293 4.9914,6.643 8.7805,9.37 5.8574,4.217 10.4551,6.549 16.7988,10.355 1.8789,1.127 7.545,3.98 8.1895,5.294 1.2812,2.605 -2.1992,6.278 -3.1297,8.32 -1.4719,3.229 -2.2395,5.972 -2.4504,9.158 -5.3215,0.841 -9.3555,4.008 -11.7922,7.579 -4.0308,5.91 -6.8262,16.844 -3.3387,25.161 0.2735,0.655 1.6375,1.943 1.8387,2.949 0.3969,1.981 -0.7469,4.615 -0.818,6.722 -0.3664,10.81 1.829,20.124 9.1063,23.384 2.9543,11.769 13.5281,15.682 23.4902,21.531 3.7239,2.186 7.8289,3.583 12.0684,5.143 15.2082,5.597 38.5419,4.543 51.1639,-5.003 5.352,-4.048 13.907,-12.595 16.967,-18.783 8.082,-16.337 7.508,-43.64 1.855,-63.513 -0.76,-2.668 -1.862,-6.59 -3.401,-9.795 -1.073,-2.238 -4.408,-6.716 -4.003,-8.692 0.417,-2.043 7.604,-7.5 9.145,-8.986 2.775,-2.677 8.047,-6.23 8.474,-9.608 0.459,-3.595 -1.584,-8.513 -2.619,-11.982 -3.46,-11.5769 -6.836,-22.2781 -10.759,-32.5992" style="fill:#231f20;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path130" inkscape:connector-curvature="0" />
-        <path d="m 90.491,157.255 c 0.4387,0.584 2.8508,1.471 6.2258,-0.154 0,0 -4,-0.667 -3.6672,-7.336 l -1.6668,0.334 c 0,0 -1.7226,6.047 -0.8918,7.156" style="fill:#f7e4cd;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path132" inkscape:connector-curvature="0" />
-        <path d="m 119.717,99.934 c 0,-1.0121 -0.821,-1.8328 -1.834,-1.8328 -1.012,0 -1.833,0.8207 -1.833,1.8328 0,1.012 0.821,1.834 1.833,1.834 1.013,0 1.834,-0.822 1.834,-1.834" style="fill:#1d1919;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path134" inkscape:connector-curvature="0" />
-        <path d="m 121.55,91.434 c 0,-1.0121 -0.821,-1.8328 -1.834,-1.8328 -1.012,0 -1.833,0.8207 -1.833,1.8328 0,1.0121 0.821,1.834 1.833,1.834 1.013,0 1.834,-0.8219 1.834,-1.834" style="fill:#1d1919;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path136" inkscape:connector-curvature="0" />
-			</g>
-    <text xml:space="preserve" style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Georgia" x="231.70523" y="-71.714066" id="text5675" sodipodi:linespacing="100%" transform="scale(1,-1)">
-				<tspan sodipodi:role="line" fill="#242925" id="tspan5677" x="231.70523" y="-71.714066" style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Georgia">Jenkins</tspan>
-			</text>
-		</g>
-</svg>
diff --git a/src/main/webapp/style.css b/src/main/webapp/style.css
index 88019b5b..7be72b8d 100644
--- a/src/main/webapp/style.css
+++ b/src/main/webapp/style.css
@@ -1,17 +1,256 @@
-h5 {
-  margin-bottom: 0;
+:root {
+  --bs-navbar-brand-color: var(--color) !important;
 }
-input.text {
+
+.ac-description {
+  color: var(--color--secondary);
+}
+
+.ac-form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.ac-sidepanel-layout {
+  margin-inline: auto;
+  display: inline-grid;
+  grid-template-columns: 280px 840px;
+  gap: 3.75rem;
+  width: unset;
+
+  h1 {
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+    font-weight: 600;
+  }
+}
+
+input[type='text'], input[type='password'], input[type='email'], textarea {
+  --background: color-mix(in srgb, var(--color) 1%, transparent);
+  --border: color-mix(in srgb, var(--color) 5%, transparent);
+
+  appearance: none;
+  font-size: 1rem;
+  background: var(--background);
+  border: 2px solid var(--border);
+  padding: 0.6rem 0.7rem;
+  border-radius: 0.66rem;
+  color: var(--color);
+  transition: 0.2s ease;
+  box-shadow: 0 0 0 10px transparent;
+  outline: none;
+
+  &:not(:disabled) {
+    &:hover {
+      --background: color-mix(in srgb, var(--color) 5%, transparent);
+      --border: color-mix(in srgb, var(--color) 10%, transparent);
+    }
+
+    &:active, &:focus {
+      --background: color-mix(in srgb, var(--color) 10%, transparent);
+      --border: var(--accent-color);
+      box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 20%, transparent);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.ac-small-width {
+  max-width: 550px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  form, .ac-main-content {
+    display: contents;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+h1 {
+  margin: 0;
+}
+
+.ac-button--large {
+  display: flex !important;
+  padding: 0.75rem !important;
+  font-size: 1rem !important;
   width: 100%;
+  cursor: pointer;
+}
+
+.ac-main-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  font-size: 1rem;
+
+  form {
+    display: contents;
+  }
+
+  h1, h2, p {
+    margin: 0;
+  }
 }
 
-p.description {
-  margin-top: 0;
-  color: gray;
-  font-size: 0.8em;
+.ac-navbar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+
+  .h1 {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    margin-left: 0.85rem;
+    font-size: 1.8rem;
+    font-weight: 600;
+  }
+
+  ul {
+    display: contents;
+
+    li {
+      display: contents;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        gap: 0.65rem;
+        color: var(--color);
+        border-radius: 0.66rem;
+        padding: 0.65rem 0.85rem;
+        text-decoration: none;
+        line-height: 1;
+        font-size: 0.865rem;
+        font-weight: 450;
+        transition: 0.2s ease;
+
+        ion-icon {
+          font-size: 1.125rem;
+        }
+
+        &:hover {
+          background: color-mix(in srgb, var(--color--secondary) 5%, transparent);
+        }
+
+        &:active, &:focus, &.active {
+          background: color-mix(in srgb, var(--color--secondary) 10%, transparent);
+          font-weight: 500;
+        }
+      }
+    }
+  }
 }
 
-nav.navbar {
-  padding-left: 0;
-  padding-top: 0;
+.ac-login__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.ac-table {
+  --table-background: color-mix(in srgb, var(--color--secondary) 5%, transparent);
+  --table-border-radius: 0.75rem;
+  --table-row-border-radius: 0.25rem;
+  --table-padding: 0.45rem;
+
+  position: relative;
+  width: 100%;
+  background: var(--table-background);
+  border-radius: calc(var(--table-border-radius) + 4px);
+  border: 4px solid var(--table-background);
+  border-bottom-width: 2px;
+  border-spacing: 0 2px;
+  background-clip: padding-box;
+
+  * {
+    -webkit-border-horizontal-spacing: 0;
+    -webkit-border-vertical-spacing: 0;
+  }
+
+  & > thead {
+    & > tr {
+      & > th {
+        color: var(--color);
+        text-align: left;
+        padding-top: calc(var(--table-padding) * 0.9);
+        padding-bottom: calc(var(--table-padding) * 1.3);
+        padding-left: 1.25rem;
+        font-weight: 500;
+        font-size: 0.875rem;
+
+        &:first-of-type {
+          padding-left: calc(var(--table-padding) * 2);
+        }
+
+        &:last-of-type {
+          padding-right: var(--table-padding);
+        }
+      }
+    }
+  }
+
+  & > tbody {
+    & > tr {
+      color: var(--color);
+
+      & > td {
+        background: var(--background);
+        vertical-align: middle;
+        padding: var(--table-padding) 0 var(--table-padding) 1.25rem;
+        height: 3rem;
+
+        &:first-of-type {
+          padding-left: calc(var(--table-padding) * 2);
+        }
+
+        &:last-of-type {
+          padding-right: var(--table-padding);
+        }
+      }
+
+      & > td:first-of-type {
+        border-top-left-radius: var(--table-row-border-radius);
+        border-bottom-left-radius: var(--table-row-border-radius);
+      }
+
+      & > td:last-of-type {
+        border-top-right-radius: var(--table-row-border-radius);
+        border-bottom-right-radius: var(--table-row-border-radius);
+      }
+
+      &:first-of-type {
+        & > td:first-of-type {
+          border-top-left-radius: var(--table-border-radius);
+        }
+
+        & > td:last-of-type {
+          border-top-right-radius: var(--table-border-radius);
+        }
+      }
+
+      &:last-of-type {
+        & > td:first-of-type {
+          border-bottom-left-radius: var(--table-border-radius);
+        }
+
+        & > td:last-of-type {
+          border-bottom-right-radius: var(--table-border-radius);
+        }
+      }
+    }
+  }
 }