diff --git a/web/Navigation.tsx b/web/Navigation.tsx
index f39a48302..926e1e928 100644
--- a/web/Navigation.tsx
+++ b/web/Navigation.tsx
@@ -184,10 +184,10 @@ const Navigation: Component = () => {
                 aria-label="Agnaistic main page"
               >
                 <div
-                  class="flex h-8 w-full items-center justify-center rounded-lg font-bold"
+                  class="flex h-8 w-full items-center justify-center rounded-lg text-lg font-bold tracking-wide"
                   aria-hidden="true"
                 >
-                  Agn<span class="text-[var(--hl-500)]">ai</span>
+                  Agn<span class="text-[var(--hl-400)]">ai</span>
                   {suffix()}
                 </div>
               </A>
diff --git a/web/app.css b/web/app.css
index dfaed5b61..663a953eb 100644
--- a/web/app.css
+++ b/web/app.css
@@ -59,6 +59,7 @@ html {
   transition: 400ms ease;
   @apply bg-[var(--bg-800)] sm:top-0 sm:clear-none;
   @apply z-20 sm:z-0;
+  @apply border-r border-[var(--bg-600)];
 }
 
 #main-content {
@@ -94,7 +95,8 @@ html {
 }
 
 .drawer > * > a.active {
-  @apply bg-[var(--hl-900)];
+  @apply bg-[var(--hl-800)] border-l-2 border-[var(--hl-400)];
+  padding-left: calc(0.5rem - 2px);
 }
 
 @keyframes hideDrawer {
diff --git a/web/tailwind.css b/web/tailwind.css
index a56f7fae8..0f2f01037 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -6,6 +6,11 @@
 *:focus {
   @apply outline-none;
 }
+*:focus-visible {
+  outline: 2px solid var(--hl-500);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
 
 * > code {
   @apply rounded-md bg-[var(--bg-600)] p-1 text-[var(--text-900)];
@@ -231,7 +236,7 @@ body {
    */
 
   ::-webkit-scrollbar {
-    @apply h-1 w-1;
+    @apply h-1.5 w-1.5;
   }
   ::-webkit-scrollbar-track {
     @apply bg-[var(--bg-700)];
@@ -247,14 +252,14 @@ body {
    * Focus/accessibility-related utilities.
    */
   ._focusable-base {
-    @apply transition-all duration-100;
+    @apply transition-all duration-150;
   }
 
   .focusable-field {
     @apply _focusable-base;
     @apply bg-[var(--bg-800)] hover:bg-[var(--bg-700)];
     @apply placeholder:text-[var(--text-600)];
-    @apply border-[var(--bg-700)];
+    @apply border border-[var(--bg-600)] focus:border-[var(--hl-600)];
   }
 
   .focusable-icon-button,
@@ -289,8 +294,8 @@ body {
    */
   .btn-base {
     @apply flex h-fit gap-1;
-    @apply transition-colors duration-100;
-    @apply rounded-md px-3;
+    @apply transition-colors duration-150;
+    @apply rounded-lg px-3;
     @apply disabled:cursor-not-allowed;
   }