diff --git a/package-lock.json b/package-lock.json
index 1826737bfa..998cc11629 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2731,6 +2731,15 @@
       "version": "2.2.5",
       "license": "ISC"
     },
+    "node_modules/@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "dev": true,
@@ -2820,15 +2829,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/@icons/material": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
-      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "dev": true,
@@ -15237,6 +15237,15 @@
         "react-dom": ">=16.14.0"
       }
     },
+    "node_modules/reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.0.1"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "dev": true,
@@ -15253,15 +15262,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/reactcss": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
-      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.0.1"
-      }
-    },
     "node_modules/read-config-file": {
       "version": "6.2.0",
       "dev": true,
@@ -19711,7 +19711,7 @@
     },
     "packages/bruno-electron": {
       "name": "bruno",
-      "version": "v1.21.0",
+      "version": "v1.22.0",
       "dependencies": {
         "@aws-sdk/credential-providers": "3.525.0",
         "@usebruno/common": "0.1.0",
@@ -22836,6 +22836,12 @@
     "@iarna/toml": {
       "version": "2.2.5"
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "dev": true
+    },
     "@isaacs/cliui": {
       "version": "8.0.2",
       "dev": true,
@@ -31320,6 +31326,12 @@
         }
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.14",
       "dev": true
@@ -32752,6 +32764,21 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "dev": true,
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.1.0",
       "requires": {
@@ -32840,6 +32867,15 @@
         "classnames": "^2.3.0"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "dev": true,
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
index 95f9832f2d..b6dab0f2e8 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -25,7 +25,6 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => {
   useEffect(() => {
     if (selectedEnvironment) {
       setOriginalEnvironmentVariables(selectedEnvironment.variables);
-      setSelectedEnvironment(findEnvironmentInCollection(collection, selectedEnvironment.uid));
       return;
     }
 
@@ -37,6 +36,12 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => {
     }
   }, [collection, selectedEnvironment]);
 
+  useEffect(() => {
+    if (selectedEnvironment) {
+      setSelectedEnvironment(findEnvironmentInCollection(collection, selectedEnvironment.uid));
+    }
+  }, [environments]);
+
   useEffect(() => {
     // check env add
     if (prevEnvUids?.length && envUids.length > prevEnvUids.length) {
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
index 104905987e..dc878aaec9 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -43,11 +43,12 @@ const DefaultTab = ({ setTab }) => {
 };
 
 const EnvironmentSettings = ({ collection, onClose }) => {
+  const { environments } = collection;
   const [isModified, setIsModified] = useState(false);
   const [tab, setTab] = useState('default');
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
-  if (!collection.environments?.length) {
+  if (!environments?.length) {
     return (
       <StyledWrapper>
         <Modal size="md" title="Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>