diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index 73f6aff9e..6fcb22cb8 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -14,7 +14,7 @@ module.exports = {
       'error',
       {
         '**/*.{jsx,tsx}': 'KEBAB_CASE',
-        '**/*.{js,ts}': 'KEBAB_CASE',
+        '**/*.{js,ts}': '[a-z0-9.-]*',
       },
     ],
     'check-file/folder-naming-convention': [
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 82c4bf5b7..631ea2eab 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -58,6 +58,8 @@ module.exports = {
 
         'bg-base': 'var(--bg-base)',
         'bg-card': 'var(--bg-card)',
+        'bg-component': 'var(--bg-component)',
+        'bg-input': 'var(--bg-input)',
         'text-primary': 'var(--text-primary)',
         'text-secondary': 'var(--text-secondary)',
         'text-disabled': 'var(--text-disabled)',
diff --git a/web/tailwind.css b/web/tailwind.css
index b8f49af73..c7c9982f8 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -93,9 +93,12 @@
     --metallic: #46464a;
     /* design colors */
 
-    --bg-base: #f6f6f7;
+    --bg-base: #ffffff;
     /* card color , dividing line */
     --bg-card: rgba(0, 0, 0, 0.05);
+    --bg-component: #ffffff;
+    --bg-input: rgba(255, 255, 255, 0);
+    --bg-accent: rgba(76, 164, 231, 0.05);
     /* Button ,Body text, Input completed text */
     --text-primary: #161618;
     --text-secondary: #75787a;
@@ -108,7 +111,7 @@
     --border-accent: #000000;
     --border-button: rgba(0, 0, 0, 0.1);
     /* Regulators, parsing, switches, variables */
-    --accent-primary: #4ca4e7;
+    --accent-primary: #00beb4;
     /* Output Variables Box */
     --bg-accent: rgba(76, 164, 231, 0.05);
 
@@ -236,6 +239,8 @@
 
     --bg-base: #161618;
     --bg-card: rgba(255, 255, 255, 0.05);
+    --bg-component: #202025;
+    --bg-input: rgba(255, 255, 255, 0.05);
     --text-primary: #f6f6f7;
     --text-secondary: #b2b5b7;
     --text-disabled: #75787a;