diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index d979718f1..1f05e9c03 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -5,43 +5,52 @@ const Wrapper = styled.div`
     border-radius: ${(props) => props.theme.border.radius.base};
     padding: 0.25rem 0.5rem 0.25rem 0.75rem;
     user-select: none;
-    background-color: transparent;
-    border: 1px solid ${(props) => props.theme.dropdown.selectedColor};
+    background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.bg};
+    border: 1px solid ${(props) => props.theme.app.collection.toolbar.environmentSelector.border};
     line-height: 1rem;
+    transition: all 0.15s ease;
+
+    &:hover {
+      border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBorder};
+      background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBg};
+    }
 
     .caret {
       margin-left: 0.25rem;
-      color: rgb(140, 140, 140);
-      fill: rgb(140, 140, 140);
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};
+      fill: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};
+      align-self: center;
     }
 
     .env-icon {
       margin-right: 0.25rem;
-      color: ${(props) => props.theme.dropdown.selectedColor};
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.icon};
     }
 
     .env-text {
-      color: ${(props) => props.theme.dropdown.selectedColor};
-      font-size: ${(props) => props.theme.font.size.base};
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.text};
       display: block;
     }
 
     .env-separator {
-      color: #8c8c8c;
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator};
       margin: 0 0.25rem;
-      opacity: 0.7;
     }
 
     .env-text-inactive {
-      color: ${(props) => props.theme.dropdown.color};
-      font-size: ${(props) => props.theme.font.size.base};
-      opacity: 0.7;
+      color: ${(props) => props.theme.colors.text.muted};
+      font-size: ${(props) => props.theme.font.size.sm};
     }
 
     &.no-environments {
-      background-color: ${(props) => props.theme.sidebar.badge.bg};
-      border: 1px solid transparent;
-      color: ${(props) => props.theme.dropdown.secondaryText};
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.text};
+      background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.bg};
+      border: 1px dashed ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.border};
+
+      &:hover {
+        border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.hoverBorder};
+        background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.hoverBg};
+      }
     }
   }
 
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
index eb7bbc5e0..924fcaba3 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -162,7 +162,7 @@ const EnvironmentSelector = ({ collection }) => {
         )}
       </>
     ) : (
-      <span className="env-text-inactive max-w-36 truncate no-wrap">No environments</span>
+      <span className="env-text-inactive max-w-36 truncate no-wrap">No Environment</span>
     );
 
     return (
@@ -174,7 +174,7 @@ const EnvironmentSelector = ({ collection }) => {
         data-testid="environment-selector-trigger"
       >
         {displayContent}
-        <IconCaretDown className="caret" size={14} strokeWidth={2} />
+        <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
       </div>
     );
   });
diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
index fe88ee9cc..438c76807 100644
--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
@@ -49,22 +49,24 @@ const CollectionToolBar = ({ collection }) => {
           <span className="ml-2 mr-4 font-medium">{collection?.name}</span>
         </div>
         <div className="flex flex-3 items-center justify-end">
-          <span className="mr-2">
-            <JsSandboxMode collection={collection} />
-          </span>
           <span className="mr-3">
             <ToolHint text="Runner" toolhintId="RunnnerToolhintId" place="bottom">
-              <IconRun className="cursor-pointer" size={18} strokeWidth={1.5} onClick={handleRun} />
+              <IconRun className="cursor-pointer" size={16} strokeWidth={1.5} onClick={handleRun} />
             </ToolHint>
           </span>
           <span className="mr-3">
             <ToolHint text="Variables" toolhintId="VariablesToolhintId">
-              <IconEye className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewVariables} />
+              <IconEye className="cursor-pointer" size={16} strokeWidth={1.5} onClick={viewVariables} />
             </ToolHint>
           </span>
           <span className="mr-3">
             <ToolHint text="Collection Settings" toolhintId="CollectionSettingsToolhintId">
-              <IconSettings className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewCollectionSettings} />
+              <IconSettings className="cursor-pointer" size={16} strokeWidth={1.5} onClick={viewCollectionSettings} />
+            </ToolHint>
+          </span>
+          <span className="mr-2">
+            <ToolHint text="Javascript Sandbox" toolhintId="JavascriptSandboxToolhintId" place="bottom">
+              <JsSandboxMode collection={collection} />
             </ToolHint>
           </span>
           <span>
diff --git a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js
index cad253fd9..915edceb3 100644
--- a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js
@@ -1,15 +1,29 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  .safe-mode {
-    padding: 0.15rem 0.3rem;
-    color: ${(props) => props.theme.colors.text.green};
-    border: solid 1px ${(props) => props.theme.colors.text.green} !important;
+  .sandbox-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.375rem;
+    height: 1.375rem;
+    border-radius: ${(props) => props.theme.border.radius.base};
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
+
+  .safe-mode {
+    background-color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.safeMode.bg};
+    color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.safeMode.color};
+  }
+
   .developer-mode {
-    padding: 0.15rem 0.3rem;
-    color: ${(props) => props.theme.colors.text.yellow};
-    border: solid 1px ${(props) => props.theme.colors.text.yellow} !important;
+    background-color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.developerMode.bg};
+    color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.developerMode.color};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js
index 9c7fb679c..2524f09ef 100644
--- a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js
+++ b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js
@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux';
-import { IconShieldLock } from '@tabler/icons';
+import { IconShieldCheck, IconCode } from '@tabler/icons';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { uuid } from 'utils/common/index';
 import JsSandboxModeModal from '../JsSandboxModeModal';
@@ -23,18 +23,20 @@ const JsSandboxMode = ({ collection }) => {
     <StyledWrapper className="flex">
       {jsSandboxMode === 'safe' && (
         <div
-          className="flex items-center border rounded-md text-xs cursor-pointer safe-mode"
+          className="sandbox-icon safe-mode"
           onClick={viewSecuritySettings}
+          title="Safe Mode"
         >
-          Safe Mode
+          <IconShieldCheck size={14} strokeWidth={2} />
         </div>
       )}
       {jsSandboxMode === 'developer' && (
         <div
-          className="flex items-center border rounded-md text-xs cursor-pointer developer-mode"
+          className="sandbox-icon developer-mode"
           onClick={viewSecuritySettings}
+          title="Developer Mode"
         >
-          Developer Mode
+          <IconCode size={14} strokeWidth={2} />
         </div>
       )}
       {!jsSandboxMode ? <JsSandboxModeModal collection={collection} /> : null}
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 1a3439850..6dc631a41 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -1,12 +1,17 @@
 const colors = {
-  BRAND: '#546de5',
+  BRAND: '#d9a342',
   TEXT: '#d4d4d4',
+  TEXT_MUTED: '#858585',
   TEXT_LINK: '#569cd6',
-  BACKGROUND: '#1e1e1e',
+  BG: '#1e1e1e',
+
+  GREEN: '#4ec9b0',
+  YELLOW: '#d9a342',
 
   GRAY_1: '#666666',
   GRAY_2: '#444444',
-  GRAY_3: '#252526',
+  GRAY_3: '#3D3D3D',
+  GRAY_4: '#252526',
 
   CODEMIRROR_TOKENS: {
     DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast
@@ -25,7 +30,7 @@ const darkTheme = {
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
-  bg: colors.BACKGROUND,
+  bg: colors.BG,
 
   font: {
     size: {
@@ -56,11 +61,11 @@ const darkTheme = {
 
   colors: {
     text: {
-      green: 'rgb(11 178 126)',
+      green: colors.GREEN,
       danger: '#f06f57',
-      muted: '#9d9d9d',
+      muted: colors.TEXT_MUTED,
       purple: '#cd56d6',
-      yellow: '#d9a342'
+      yellow: colors.YELLOW
     },
     bg: {
       danger: '#d03544'
@@ -96,19 +101,19 @@ const darkTheme = {
   sidebar: {
     color: '#ccc',
     muted: '#9d9d9d',
-    bg: colors.GRAY_3,
+    bg: colors.GRAY_4,
     dragbar: {
       border: 'transparent',
       activeBorder: colors.GRAY_1
     },
 
     badge: {
-      bg: '#3D3D3D'
+      bg: colors.GRAY_3
     },
 
     search: {
       border: '1px solid transparent',
-      bg: '#3D3D3D'
+      bg: colors.GRAY_3
     },
 
     collection: {
@@ -151,7 +156,7 @@ const darkTheme = {
 
   listItem: {
     hoverBg: '#2A2D2F',
-    activeBg: '#3D3D3D'
+    activeBg: colors.GRAY_3
   },
 
   workspace: {
@@ -177,7 +182,7 @@ const darkTheme = {
       indentBorder: 'solid 1px #313131',
       activeBg: '#37373c',
       search: {
-        bg: '#3D3D3D'
+        bg: colors.GRAY_3
       }
     }
   },
@@ -200,7 +205,7 @@ const darkTheme = {
 
   requestTabPanel: {
     url: {
-      bg: colors.BACKGROUND,
+      bg: colors.BG,
       icon: 'rgb(204, 204, 204)',
       iconDanger: '#fa5343',
       errorHoverBg: '#4a2a2a',
@@ -232,7 +237,7 @@ const darkTheme = {
       bg: '#252526',
       table: {
         thead: {
-          bg: '#3D3D3D',
+          bg: colors.GRAY_3,
           color: '#ccc'
         }
       }
@@ -245,12 +250,12 @@ const darkTheme = {
 
   collection: {
     environment: {
-      bg: '#3D3D3D',
+      bg: colors.GRAY_3,
 
       settings: {
-        bg: '#3D3D3D',
+        bg: colors.GRAY_3,
         sidebar: {
-          bg: '#3D3D3D',
+          bg: colors.GRAY_3,
           borderRight: '#4f4f4f'
         },
         item: {
@@ -267,7 +272,7 @@ const darkTheme = {
   },
 
   notifications: {
-    bg: '#3D3D3D',
+    bg: colors.GRAY_3,
     list: {
       bg: '3D3D3D',
       borderRight: '#4f4f4f',
@@ -354,25 +359,25 @@ const darkTheme = {
       hoverBg: '#1e1e1e'
     },
     active: {
-      bg: '#3D3D3D'
+      bg: colors.GRAY_3
     },
     shortTab: {
       color: '#ccc',
       bg: 'transparent',
       hoverColor: '#ccc',
-      hoverBg: '#3D3D3D'
+      hoverBg: colors.GRAY_3
     }
   },
 
   codemirror: {
-    bg: colors.BACKGROUND,
-    border: colors.BACKGROUND,
+    bg: colors.BG,
+    border: colors.BG,
     placeholder: {
       color: '#a2a2a2',
       opacity: 0.5
     },
     gutter: {
-      bg: colors.BACKGROUND
+      bg: colors.BG
     },
     variable: {
       valid: 'rgb(11 178 126)',
@@ -384,11 +389,11 @@ const darkTheme = {
         boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
         editorBg: '#292929',
         iconColor: '#989898',
-        editorBorder: '#3D3D3D',
+        editorBorder: colors.GRAY_3,
         editorFocusBorder: '#CCCCCC',
         editableDisplayHoverBg: 'rgba(255,255,255,0.03)',
         border: '#4F4F4F',
-        editorBorder: '#3D3D3D'
+        editorBorder: colors.GRAY_3
       }
     },
     tokens: {
@@ -419,7 +424,7 @@ const darkTheme = {
   },
 
   plainGrid: {
-    hoverBg: '#3D3D3D'
+    hoverBg: colors.GRAY_3
   },
 
   scrollbar: {
@@ -593,7 +598,7 @@ const darkTheme = {
     buttonIconColor: '#fff',
     border: '#444',
     urlBar: {
-      border: '#3D3D3D',
+      border: colors.GRAY_3,
       bg: '#292929'
     },
     table: {
@@ -605,6 +610,41 @@ const darkTheme = {
     checkbox: {
       color: '#000'
     }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BG,
+          border: colors.GRAY_2,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.TEXT_MUTED,
+          separator: colors.GRAY_2,
+          hoverBg: colors.BG,
+          hoverBorder: colors.GRAY_1,
+
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.BG,
+            border: colors.GRAY_2,
+            hoverBg: colors.BG,
+            hoverBorder: colors.GRAY_1
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(78, 201, 176, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgb(217, 163, 66, 0.11)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
   }
 };
 
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 623713ee1..d9265aa72 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -1,14 +1,21 @@
 const colors = {
-  BRAND: '#546de5',
+  BRAND: '#cf8730',
   TEXT: 'rgb(52, 52, 52)',
+  TEXT_MUTED: '#838383',
   TEXT_LINK: '#1663bb',
   BACKGROUND: '#fff',
+
   WHITE: '#fff',
   BLACK: '#000',
+  GREEN: '#047857',
+  YELLOW: '#cf8730',
+
   GRAY_1: '#f8f8f8',
-  GRAY_2: '#eaeaea',
-  GRAY_3: '#e5e5e5',
-  GRAY_4: '#cbcbcb',
+  GRAY_2: '#f3f3f3',
+  GRAY_3: '#eaeaea',
+  GRAY_4: '#e5e5e5',
+  GRAY_5: '#cbcbcb',
+  GRAY_6: '#b0b0b0',
 
   CODEMIRROR_TOKENS: {
     DEFINITION: '#566f4e', // Deep moss
@@ -58,12 +65,12 @@ const lightTheme = {
 
   colors: {
     text: {
-      green: '#047857',
+      green: colors.GREEN,
       danger: '#B91C1C',
       warning: '#f57c00',
       muted: '#838383',
       purple: '#8e44ad',
-      yellow: '#cf8730'
+      yellow: colors.YELLOW
     },
     bg: {
       danger: '#dc3545'
@@ -101,8 +108,8 @@ const lightTheme = {
     muted: '#4b5563',
     bg: colors.GRAY_1,
     dragbar: {
-      border: colors.GRAY_3,
-      activeBorder: colors.GRAY_4
+      border: colors.GRAY_4,
+      activeBorder: colors.GRAY_5
     },
 
     badge: {
@@ -116,12 +123,12 @@ const lightTheme = {
 
     collection: {
       item: {
-        bg: colors.GRAY_2,
-        hoverBg: colors.GRAY_2,
-        focusBorder: colors.GRAY_4,
-        indentBorder: `solid 1px ${colors.GRAY_3}`,
+        bg: colors.GRAY_3,
+        hoverBg: colors.GRAY_3,
+        focusBorder: colors.GRAY_5,
+        indentBorder: `solid 1px ${colors.GRAY_4}`,
         active: {
-          indentBorder: `solid 1px ${colors.GRAY_3}`
+          indentBorder: `solid 1px ${colors.GRAY_4}`
         }
       }
     },
@@ -207,7 +214,7 @@ const lightTheme = {
       icon: '#515151',
       iconDanger: '#d91f11',
       errorHoverBg: '#fef2f2',
-      border: `solid 1px ${colors.GRAY_3}`
+      border: `solid 1px ${colors.GRAY_4}`
     },
     dragbar: {
       border: '#efefef',
@@ -615,6 +622,41 @@ const lightTheme = {
     checkbox: {
       color: '#fff'
     }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.WHITE,
+          border: colors.GRAY_4,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.GRAY_6,
+          separator: colors.GRAY_4,
+          hoverBg: colors.WHITE,
+          hoverBorder: colors.GRAY_5,
+
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.WHITE,
+            border: colors.GRAY_5,
+            hoverBg: colors.WHITE,
+            hoverBorder: colors.GRAY_6
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(4, 120, 87, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(204, 145, 73, 0.15)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
   }
 };