diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
index d55fd00c3..b259ea26f 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   .tabs {
     .tab {
       cursor: pointer;
@@ -9,12 +18,16 @@ const StyledWrapper = styled.div`
       border-radius: 4px;
       
       &:hover {
-        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.1)' : 'rgba(99, 102, 241, 0.1)'};
+        background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
       }
       
       &.active {
-        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(99, 102, 241, 0.1)'};
-        color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+        background-color: ${(props) => {
+          return props.theme.mode === 'dark'
+            ? rgba(props.theme.primary.solid, 0.2)
+            : rgba(props.theme.primary.solid, 0.1);
+        }};
+        color: ${(props) => props.theme.primary.solid};
       }
     }
   }
@@ -50,14 +63,14 @@ const StyledWrapper = styled.div`
       
       &:focus {
         outline: none;
-        border-color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+        border-color: ${(props) => props.theme.primary.solid};
       }
     }
   }
   
   .add-additional-param-actions {
     &:hover {
-      color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+      color: ${(props) => props.theme.primary.solid};
     }
   }
 `;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
index b306aba4c..8cf746ed9 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
@@ -167,8 +167,8 @@ const AdditionalParams = ({ item = {}, request, updateAuth, collection, handleSa
   return (
     <StyledWrapper className="mt-4">
       <div className="flex items-center gap-2.5 mb-3">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Additional Parameters
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
index 96aa81389..edb6f9381 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
index f0cccf621..5a9c1ef9b 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -153,8 +153,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">
           Configuration
@@ -258,8 +258,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         />
       </div>
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconKey size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -341,8 +341,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
             )
       }
       <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
@@ -365,8 +365,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
       </div>
 
       <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">Settings</span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
index 96aa81389..ab8f0f90b 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};
@@ -33,7 +42,7 @@ const Wrapper = styled.div`
         max-width: none !important;
         min-width: 100px;
 
-        .tippy-content: {
+        .tippy-content {
           width: fit-content;
           max-width: none !important;
           min-width: 100px;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
index 4d9bcd727..fb01a3694 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
@@ -91,8 +91,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">
           Configuration
@@ -149,8 +149,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         </div>
       </div>
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconKey size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -232,8 +232,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
             )
       }
       <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
@@ -256,8 +256,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
       </div>
 
       <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">Settings</span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
index dbcb1dfe7..36dcc0534 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   font-size: ${(props) => props.theme.font.size.base};
 
   .grant-type-mode-selector {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
index 888b495d6..1ef99963f 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
@@ -74,8 +74,8 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
   return (
     <StyledWrapper>
       <div className="flex items-center gap-2.5 my-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconKey size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">
           Grant Type
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
index 62ee6fbc9..8d4ff3ab0 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
index 93dcbb677..d89360162 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
@@ -108,8 +108,8 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
     <Wrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={authorizationUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">
           Configuration
@@ -176,8 +176,8 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
       })}
 
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconKey size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -261,8 +261,8 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
       )}
 
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">
           Advanced Options
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js
index 80d13c0e5..9644871d2 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-copy-button {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+    
+    &:hover {
+      background-color: ${(props) => rgba(props.theme.primary.solid, 0.2)};
+    }
+  }
+
   ol[role="tree"] {
     overflow: hidden;
   }
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
index 55c7da274..2aa413295 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
@@ -54,7 +54,7 @@ const TokenSection = ({ title, token }) => {
             <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
               <button
                 onClick={() => handleCopy(token)}
-                className="p-1 bg-indigo-100 dark:hover:bg-indigo-200 rounded"
+                className="p-1 oauth2-copy-button rounded"
                 title="Copy token"
               >
                 {copied
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
index 96aa81389..edb6f9381 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
index 78a6294fa..3391d31c2 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
@@ -95,8 +95,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">
           Configuration
@@ -153,8 +153,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         </div>
       </div>
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconKey size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -236,8 +236,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
             )
       }
       <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
@@ -260,8 +260,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
       </div>
 
       <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
+          <IconSettings size={14} className="oauth2-icon" />
         </div>
         <span className="font-medium">Settings</span>
       </div>