diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index b1c09d5f24..6c013b684d 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-environment {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    background-color: ${(props) => props.color ?? props.theme.sidebar.badge.bg};
     border-radius: 15px;
 
     .caret {
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
index 2e93c2c693..94aef1c587 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -24,11 +24,7 @@ const EnvironmentSelector = (props) => {
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div
-        ref={ref}
-        style={{ background: activeEnvironment?.color }}
-        className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none"
-      >
+      <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
         {activeEnvironment ? activeEnvironment.name : 'No Environment'}
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
@@ -50,7 +46,7 @@ const EnvironmentSelector = (props) => {
   };
 
   return (
-    <StyledWrapper>
+    <StyledWrapper color={activeEnvironment?.color}>
       <div className="flex items-center cursor-pointer environment-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           {collection.environments?.length