diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 8d4b06d1..bb80f4c6 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -214,6 +214,7 @@ const config: Config = {
           subtle: { value: '{colors.amber.100}' },
           'subtle-text': { value: '{colors.amber.700}' },
         },
+        focusRing: { value: 'rgb(74, 121, 199)' },
       },
       shadows: {
         box: { value: '{shadows.sm}' },
diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css
index b081c857..1d08e3f0 100644
--- a/src/frontend/src/styles/index.css
+++ b/src/frontend/src/styles/index.css
@@ -11,10 +11,11 @@ body,
   outline: none;
 }
 
-[data-rac][data-focus-visible],
-:is(a, button, input, select, textarea):not([data-rac]):focus-visible {
+[data-rac][data-focus-visible]:not(label),
+:is(a, button, input[type='text'], select, textarea):not(
+    [data-rac]
+  ):focus-visible {
   outline: 2px solid black;
   outline-offset: 1px;
-  outline-color: Highlight;
-  outline-color: -webkit-focus-ring-color;
+  outline-color: var(--colors-focus-ring);
 }