diff --git a/src/interface/web/app/globals.css b/src/interface/web/app/globals.css
index d5025a06..8461026b 100644
--- a/src/interface/web/app/globals.css
+++ b/src/interface/web/app/globals.css
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
 
 @layer base {
     :root {
@@ -35,11 +35,11 @@
         pre code.hljs {
             display: block;
             overflow-x: auto;
-            padding: 1em
+            padding: 1em;
         }
 
         code.hljs {
-            padding: 3px 5px
+            padding: 3px 5px;
         }
 
         /*!
@@ -54,7 +54,7 @@
           */
         .hljs {
             color: #24292e;
-            background: #ffffff
+            background: #ffffff;
         }
 
         .hljs-doctag,
@@ -65,7 +65,7 @@
         .hljs-type,
         .hljs-variable.language_ {
             /* prettylights-syntax-keyword */
-            color: #d73a49
+            color: #d73a49;
         }
 
         .hljs-title,
@@ -73,7 +73,7 @@
         .hljs-title.class_.inherited__,
         .hljs-title.function_ {
             /* prettylights-syntax-entity */
-            color: #6f42c1
+            color: #6f42c1;
         }
 
         .hljs-attr,
@@ -87,27 +87,27 @@
         .hljs-selector-class,
         .hljs-selector-id {
             /* prettylights-syntax-constant */
-            color: #005cc5
+            color: #005cc5;
         }
 
         .hljs-regexp,
         .hljs-string,
         .hljs-meta .hljs-string {
             /* prettylights-syntax-string */
-            color: #032f62
+            color: #032f62;
         }
 
         .hljs-built_in,
         .hljs-symbol {
             /* prettylights-syntax-variable */
-            color: #e36209
+            color: #e36209;
         }
 
         .hljs-comment,
         .hljs-code,
         .hljs-formula {
             /* prettylights-syntax-comment */
-            color: #6a737d
+            color: #6a737d;
         }
 
         .hljs-name,
@@ -115,47 +115,47 @@
         .hljs-selector-tag,
         .hljs-selector-pseudo {
             /* prettylights-syntax-entity-tag */
-            color: #22863a
+            color: #22863a;
         }
 
         .hljs-subst {
             /* prettylights-syntax-storage-modifier-import */
-            color: #24292e
+            color: #24292e;
         }
 
         .hljs-section {
             /* prettylights-syntax-markup-heading */
             color: #005cc5;
-            font-weight: bold
+            font-weight: bold;
         }
 
         .hljs-bullet {
             /* prettylights-syntax-markup-list */
-            color: #735c0f
+            color: #735c0f;
         }
 
         .hljs-emphasis {
             /* prettylights-syntax-markup-italic */
             color: #24292e;
-            font-style: italic
+            font-style: italic;
         }
 
         .hljs-strong {
             /* prettylights-syntax-markup-bold */
             color: #24292e;
-            font-weight: bold
+            font-weight: bold;
         }
 
         .hljs-addition {
             /* prettylights-syntax-markup-inserted */
             color: #22863a;
-            background-color: #f0fff4
+            background-color: #f0fff4;
         }
 
         .hljs-deletion {
             /* prettylights-syntax-markup-deleted */
             color: #b31d28;
-            background-color: #ffeef0
+            background-color: #ffeef0;
         }
 
         .hljs-char.escape_,
@@ -165,7 +165,6 @@
         .hljs-punctuation,
         .hljs-tag {
             /* purposely ignored */
-
         }
     }
 
@@ -195,11 +194,11 @@
         pre code.hljs {
             display: block;
             overflow-x: auto;
-            padding: 1em
+            padding: 1em;
         }
 
         code.hljs {
-            padding: 3px 5px
+            padding: 3px 5px;
         }
 
         /*!
@@ -214,7 +213,7 @@
           */
         .hljs {
             color: #c9d1d9;
-            background: #0d1117
+            background: #0d1117;
         }
 
         .hljs-doctag,
@@ -225,7 +224,7 @@
         .hljs-type,
         .hljs-variable.language_ {
             /* prettylights-syntax-keyword */
-            color: #ff7b72
+            color: #ff7b72;
         }
 
         .hljs-title,
@@ -233,7 +232,7 @@
         .hljs-title.class_.inherited__,
         .hljs-title.function_ {
             /* prettylights-syntax-entity */
-            color: #d2a8ff
+            color: #d2a8ff;
         }
 
         .hljs-attr,
@@ -247,27 +246,27 @@
         .hljs-selector-class,
         .hljs-selector-id {
             /* prettylights-syntax-constant */
-            color: #79c0ff
+            color: #79c0ff;
         }
 
         .hljs-regexp,
         .hljs-string,
         .hljs-meta .hljs-string {
             /* prettylights-syntax-string */
-            color: #a5d6ff
+            color: #a5d6ff;
         }
 
         .hljs-built_in,
         .hljs-symbol {
             /* prettylights-syntax-variable */
-            color: #ffa657
+            color: #ffa657;
         }
 
         .hljs-comment,
         .hljs-code,
         .hljs-formula {
             /* prettylights-syntax-comment */
-            color: #8b949e
+            color: #8b949e;
         }
 
         .hljs-name,
@@ -275,47 +274,47 @@
         .hljs-selector-tag,
         .hljs-selector-pseudo {
             /* prettylights-syntax-entity-tag */
-            color: #7ee787
+            color: #7ee787;
         }
 
         .hljs-subst {
             /* prettylights-syntax-storage-modifier-import */
-            color: #c9d1d9
+            color: #c9d1d9;
         }
 
         .hljs-section {
             /* prettylights-syntax-markup-heading */
             color: #1f6feb;
-            font-weight: bold
+            font-weight: bold;
         }
 
         .hljs-bullet {
             /* prettylights-syntax-markup-list */
-            color: #f2cc60
+            color: #f2cc60;
         }
 
         .hljs-emphasis {
             /* prettylights-syntax-markup-italic */
             color: #c9d1d9;
-            font-style: italic
+            font-style: italic;
         }
 
         .hljs-strong {
             /* prettylights-syntax-markup-bold */
             color: #c9d1d9;
-            font-weight: bold
+            font-weight: bold;
         }
 
         .hljs-addition {
             /* prettylights-syntax-markup-inserted */
             color: #aff5b4;
-            background-color: #033a16
+            background-color: #033a16;
         }
 
         .hljs-deletion {
             /* prettylights-syntax-markup-deleted */
             color: #ffdcd7;
-            background-color: #67060c
+            background-color: #67060c;
         }
 
         .hljs-char.escape_,
@@ -325,7 +324,6 @@
         .hljs-punctuation,
         .hljs-tag {
             /* purposely ignored */
-
         }
     }
 }
@@ -354,4 +352,8 @@
     a {
         text-decoration: underline;
     }
+
+    input {
+        background-color: hsla(var(--background) / 0.1);
+    }
 }