diff --git a/.env.example b/.env.example
index b2893799..9cd4f17f 100644
--- a/.env.example
+++ b/.env.example
@@ -46,3 +46,20 @@ VITE_REPORT_FORM_ERROR_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_PLATFORM_ENTRY=entry.xxxxxx
 VITE_REPORT_FORM_URL_ENTRY=entry.xxxxxx
 
+#CUSTOMIZABLE ENV VARIABLES COLORS
+
+VITE_THEME_COLOR_BLACK=#0a0b0d
+VITE_THEME_COLOR_ERROR_LIGHT=rgba(232,67,12,0.1)
+VITE_THEME_COLOR_ERROR_MAIN=#e8430d
+VITE_THEME_COLOR_GREY_DARK=#78798d
+VITE_THEME_COLOR_GREY_LIGHT=#f0f1f6
+VITE_THEME_COLOR_GREY_MAIN=#e2e5ee
+VITE_THEME_COLOR_GREY_VERY_DARK=#363740
+VITE_THEME_COLOR_PRIMARY_DARK=#5a1cc3
+VITE_THEME_COLOR_PRIMARY_MAIN=#7b3fe4
+VITE_THEME_COLOR_SUCCESS_LIGHT=rgba(0,255,0,0.1)
+VITE_THEME_COLOR_SUCCESS_MAIN=#1ccc8d
+VITE_THEME_COLOR_TRANSPARENCY=rgba(8,17,50,0.5)
+VITE_THEME_COLOR_WARNING_LIGHT=rgba(225,126,38,0.1)
+VITE_THEME_COLOR_WARNING_MAIN=#e17e26
+VITE_THEME_COLOR_WHITE=#ffffff
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 688f4999..6c03f0a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2707,9 +2707,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001450",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
-      "integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==",
+      "version": "1.0.30001649",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz",
+      "integrity": "sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==",
       "dev": true,
       "funding": [
         {
@@ -2719,6 +2719,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -10162,9 +10166,9 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001450",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
-      "integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==",
+      "version": "1.0.30001649",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz",
+      "integrity": "sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==",
       "dev": true
     },
     "chalk": {
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 5a19c299..1ccce391 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 export const theme = {
   breakpoints: {
     upSm: "@media (min-width: 480px)",
@@ -5,31 +6,31 @@ export const theme = {
   hoverTransition: "all 150ms",
   maxWidth: 644,
   palette: {
-    black: "#0a0b0d",
+    black: import.meta.env.VITE_THEME_COLOR_BLACK || "#0a0b0d",
     error: {
-      light: "rgba(232,67,12,0.1)",
-      main: "#e8430d",
+      light: import.meta.env.VITE_THEME_COLOR_ERROR_LIGHT || "rgba(232,67,12,0.1)",
+      main: import.meta.env.VITE_THEME_COLOR_ERROR_MAIN || "#e8430d",
     },
     grey: {
-      dark: "#78798d",
-      light: "#f0f1f6",
-      main: "#e2e5ee",
-      veryDark: "#363740",
+      dark: import.meta.env.VITE_THEME_COLOR_GREY_DARK || "#78798d",
+      light: import.meta.env.VITE_THEME_COLOR_GREY_LIGHT || "#f0f1f6",
+      main: import.meta.env.VITE_THEME_COLOR_GREY_MAIN || "#e2e5ee",
+      veryDark: import.meta.env.VITE_THEME_COLOR_GREY_VERY_DARK || "#363740",
     },
     primary: {
-      dark: "#5a1cc3",
-      main: "#7b3fe4",
+      dark: import.meta.env.VITE_THEME_COLOR_PRIMARY_DARK || "#5a1cc3",
+      main: import.meta.env.VITE_THEME_COLOR_PRIMARY_MAIN || "#7b3fe4",
     },
     success: {
-      light: "rgba(0,255,0,0.1)",
-      main: "#1ccc8d",
+      light: import.meta.env.VITE_THEME_COLOR_SUCCESS_LIGHT || "rgba(0,255,0,0.1)",
+      main: import.meta.env.VITE_THEME_COLOR_SUCCESS_MAIN || "#54DC04",
     },
-    transparency: "rgba(8,17,50,0.5)",
+    transparency: import.meta.env.VITE_THEME_COLOR_TRANSPARENCY || "rgba(8,17,50,0.5)",
     warning: {
-      light: "rgba(225,126,38,0.1)",
-      main: "#e17e26",
+      light: import.meta.env.VITE_THEME_COLOR_WARNING_LIGHT || "rgba(225,126,38,0.1)",
+      main: import.meta.env.VITE_THEME_COLOR_WARNING_MAIN || "#e17e26",
     },
-    white: "#ffffff",
+    white: import.meta.env.VITE_THEME_COLOR_WHITE || "#ffffff",
   },
   spacing: (value: number): number => value * 8,
 };
diff --git a/src/views/bridge-confirmation/components/bridge-button/bridge-button.view.tsx b/src/views/bridge-confirmation/components/bridge-button/bridge-button.view.tsx
index ad341700..fe32fd42 100644
--- a/src/views/bridge-confirmation/components/bridge-button/bridge-button.view.tsx
+++ b/src/views/bridge-confirmation/components/bridge-button/bridge-button.view.tsx
@@ -31,7 +31,7 @@ export const BridgeButton: FC<BridgeButtonProps> = ({
       case "pending": {
         return (
           <Button onClick={onApprove}>
-            {`Allow Polygon zkEVM Bridge to spend my ${token.symbol}`}
+            {`Allow Bridge to spend my ${token.name}`}
           </Button>
         );
       }