From 6e5f56dbdecaf8c915bd0fcd6a247b1e4878fb56 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Mon, 29 Dec 2025 22:12:56 +0530
Subject: [PATCH] feat: dark mode input revamp

---
 .../Auth/ApiKeyAuth/StyledWrapper.js          |   3 +-
 .../Auth/ApiKeyAuth/index.js                  |  12 +-
 .../Auth/AwsV4Auth/StyledWrapper.js           |   3 +-
 .../Auth/AwsV4Auth/index.js                   |  30 ++--
 .../Auth/BasicAuth/StyledWrapper.js           |   3 +-
 .../Auth/BasicAuth/index.js                   |   8 +-
 .../Auth/BearerAuth/StyledWrapper.js          |   3 +-
 .../Auth/BearerAuth/index.js                  |   3 +-
 .../Auth/DigestAuth/StyledWrapper.js          |   3 +-
 .../Auth/DigestAuth/index.js                  |   8 +-
 .../Auth/NTLMAuth/StyledWrapper.js            |   3 +-
 .../CollectionSettings/Auth/NTLMAuth/index.js |  13 +-
 .../Auth/WsseAuth/StyledWrapper.js            |   3 +-
 .../CollectionSettings/Auth/WsseAuth/index.js |   8 +-
 .../ClientCertSettings/StyledWrapper.js       |   6 +-
 .../Presets/StyledWrapper.js                  |   6 +-
 .../ProxySettings/StyledWrapper.js            |   6 +-
 .../src/components/Cookies/StyledWrapper.js   |   6 +-
 .../src/components/Dropdown/StyledWrapper.js  |   4 +-
 .../EnvironmentSelector/StyledWrapper.js      |   2 +-
 .../Environments/EnvironmentSelector/index.js |   2 +-
 .../GlobalSearchModal/StyledWrapper.js        | 131 +++++++++---------
 .../InheritableSettingsInput/index.js         |  12 +-
 .../src/components/Modal/StyledWrapper.js     |   6 +-
 .../ProxySettings/StyledWrapper.js            |   6 +-
 .../Auth/ApiKeyAuth/StyledWrapper.js          |   3 +-
 .../RequestPane/Auth/ApiKeyAuth/index.js      |  12 +-
 .../Auth/AwsV4Auth/StyledWrapper.js           |   3 +-
 .../RequestPane/Auth/AwsV4Auth/index.js       |  30 ++--
 .../Auth/BasicAuth/StyledWrapper.js           |   3 +-
 .../RequestPane/Auth/BasicAuth/index.js       |   8 +-
 .../Auth/BearerAuth/StyledWrapper.js          |   3 +-
 .../RequestPane/Auth/BearerAuth/index.js      |   3 +-
 .../Auth/DigestAuth/StyledWrapper.js          |   3 +-
 .../RequestPane/Auth/DigestAuth/index.js      |   8 +-
 .../Auth/NTLMAuth/StyledWrapper.js            |   3 +-
 .../RequestPane/Auth/NTLMAuth/index.js        |  13 +-
 .../Auth/OAuth2/AdditionalParams/index.js     |   1 +
 .../OAuth2/AuthorizationCode/StyledWrapper.js |   3 +-
 .../Auth/OAuth2/AuthorizationCode/index.js    |   8 +-
 .../OAuth2/ClientCredentials/StyledWrapper.js |   3 +-
 .../Auth/OAuth2/ClientCredentials/index.js    |   7 +-
 .../Auth/OAuth2/Implicit/StyledWrapper.js     |   3 +-
 .../RequestPane/Auth/OAuth2/Implicit/index.js |   5 +
 .../PasswordCredentials/StyledWrapper.js      |   3 +-
 .../Auth/OAuth2/PasswordCredentials/index.js  |   7 +-
 .../Auth/WsseAuth/StyledWrapper.js            |   3 +-
 .../RequestPane/Auth/WsseAuth/index.js        |   8 +-
 .../StyledWrapper.js                          |   4 +-
 .../RunnerTimeline/StyledWrapper.js           |   2 +-
 .../ResponsePane/Timeline/StyledWrapper.js    |   2 +-
 .../components/RunnerResults/StyledWrapper.js |   9 +-
 .../src/components/SettingsInput/index.js     |   4 +-
 .../Sidebar/NewRequest/StyledWrapper.js       |  10 +-
 .../SingleLineEditor/StyledWrapper.js         |  14 +-
 .../src/components/SingleLineEditor/index.js  |   1 +
 .../src/themes/dark/catppuccin-frappe.js      |   8 +-
 .../src/themes/dark/catppuccin-macchiato.js   |   8 +-
 .../src/themes/dark/catppuccin-mocha.js       |   8 +-
 .../src/themes/dark/dark-monochrome.js        |  16 +--
 .../bruno-app/src/themes/dark/dark-pastel.js  |   8 +-
 packages/bruno-app/src/themes/dark/dark.js    |  24 ++--
 packages/bruno-app/src/themes/dark/nord.js    |  10 +-
 packages/bruno-app/src/themes/dark/vscode.js  |   6 +-
 64 files changed, 327 insertions(+), 240 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js
index 1c69bffe0..05d6c25d9 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js
index b2f70923f..683ea3d79 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js
@@ -57,29 +57,31 @@ const ApiKeyAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Key</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={apikeyAuth.key || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('key', val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Value</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Value</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={apikeyAuth.value || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('value', val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Add To</label>
+      <label className="block mb-1">Add To</label>
       <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
index eeaf2d45a..10524b15a 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
index 6d7682414..5dcf4f116 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
@@ -123,19 +123,20 @@ const AwsV4Auth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.accessKeyId || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAccessKeyIdChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2 flex items-center">
+      <label className="block mb-1">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -143,51 +144,56 @@ const AwsV4Auth = ({ collection }) => {
           onChange={(val) => handleSecretAccessKeyChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block font-medium mb-2">Session Token</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Session Token</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.sessionToken || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleSessionTokenChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Service</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Service</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.service || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleServiceChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Region</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Region</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.region || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleRegionChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Profile Name</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Profile Name</label>
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={awsv4Auth.profileName || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleProfileNameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
index eeaf2d45a..10524b15a 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
index 4464ef2ee..d214935e0 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
@@ -47,18 +47,19 @@ const BasicAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={basicAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
@@ -67,6 +68,7 @@ const BasicAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
index eeaf2d45a..10524b15a 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
index 2806f1df0..72e8c3c5e 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
@@ -33,7 +33,7 @@ const BearerAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Token</label>
+      <label className="block mb-1">Token</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
@@ -42,6 +42,7 @@ const BearerAuth = ({ collection }) => {
           onChange={(val) => handleTokenChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js
index eeaf2d45a..10524b15a 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
index ed85ca436..0624aac40 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
@@ -47,18 +47,19 @@ const DigestAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={digestAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
@@ -67,6 +68,7 @@ const DigestAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
index a967ccb48..d7e3df0cd 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
@@ -64,19 +64,20 @@ const NTLMAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={ntlmAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <label className="block mb-1">Password</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -84,11 +85,12 @@ const NTLMAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block font-medium mb-2">Domain</label>
+      <label className="block mb-1">Domain</label>
       <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={ntlmAuth.domain || ''}
@@ -96,6 +98,7 @@ const NTLMAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handleDomainChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js
index eeaf2d45a..10524b15a 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js
index a90923e74..9582de434 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js
@@ -47,18 +47,19 @@ const WsseAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={wsseAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUserChange(val)}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
@@ -67,6 +68,7 @@ const WsseAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
index 34773ac0d..eea1fe5fd 100644
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
@@ -30,11 +30,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
       outline: none !important;
     }
   }
diff --git a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
index db26e863b..5c0923c09 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
@@ -16,11 +16,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
       outline: none !important;
     }
   }
diff --git a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
index c8f1241c5..316e36c91 100644
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
@@ -14,11 +14,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
       outline: none !important;
     }
   }
diff --git a/packages/bruno-app/src/components/Cookies/StyledWrapper.js b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
index 7ccc622fe..9d26fa428 100644
--- a/packages/bruno-app/src/components/Cookies/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
@@ -28,11 +28,11 @@ const Wrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
       outline: none !important;
     }
   }
diff --git a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
index e3438c2de..b41ca2b7c 100644
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -3,7 +3,7 @@ import { rgba } from 'polished';
 
 const Wrapper = styled.div`
   min-width: 160px;
-  font-size: ${(props) => props.theme.font.size.base};
+  font-size: ${(props) => props.theme.font.size.sm};
   color: ${(props) => props.theme.dropdown.color};
   background-color: ${(props) => props.theme.dropdown.bg};
   ${(props) =>
@@ -53,7 +53,7 @@ const Wrapper = styled.div`
     cursor: pointer;
     border-radius: 6px;
     margin: 0.0625rem 0;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.sm};
 
     &.active {
       color: ${(props) => props.theme.colors.text.yellow} !important;
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index a82724469..d36b5a8ee 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -91,7 +91,7 @@ const Wrapper = styled.div`
 
   .tab-button {
     color: ${(props) => props.theme.colors.text.subtext0};
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
 
     .tab-content-wrapper {
       position: relative;
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
index 53438c459..8b454afb5 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -186,7 +186,7 @@ const EnvironmentSelector = ({ collection }) => {
       <div className="environment-selector flex align-center cursor-pointer">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           {/* Tab Headers */}
-          <div className="tab-header flex p-[0.75rem]">
+          <div className="tab-header flex pt-3 pb-2 px-3">
             {tabs.map((tab) => (
               <button
                 key={tab.id}
diff --git a/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js b/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js
index 70dfa41cf..d1a61e80c 100644
--- a/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   /* Screen reader only content */
@@ -40,9 +41,9 @@ const StyledWrapper = styled.div`
   }
   .command-k-modal {
     background: ${(props) => props.theme.modal.body.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border: 1px solid ${(props) => props.theme.border.border1};
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: ${(props) => props.theme.shadow.md};
     width: 90%;
     max-width: 600px;
     max-height: 70vh;
@@ -55,8 +56,7 @@ const StyledWrapper = styled.div`
   }
   .command-k-header {
     padding: 12px;
-    border-bottom: 1px solid ${(props) => props.theme.modal.input.border};
-    background: ${(props) => props.theme.modal.title.bg};
+    border-bottom: 1px solid ${(props) => props.theme.border.border1};
   }
   .search-input-container {
     position: relative;
@@ -64,13 +64,11 @@ const StyledWrapper = styled.div`
     align-items: center;
     width: 100%;
     padding: 8px 12px;
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border: 1px solid ${(props) => props.theme.input.border};
     border-radius: 6px;
-    background: ${(props) => props.theme.modal.input.bg};
     transition: all 0.2s ease;
     &:focus-within {
-      border-color: ${(props) => props.theme.colors.text.muted};
-      box-shadow: 0 0 0 1px ${(props) => props.theme.colors.text.muted}40;
+      border: 1px solid ${(props) => props.theme.input.focusBorder};
     }
     .search-icon {
       color: ${(props) => props.theme.colors.text.muted};
@@ -92,7 +90,7 @@ const StyledWrapper = styled.div`
       border-radius: 4px;
       flex-shrink: 0;
       &:hover {
-        background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
+        background: ${(props) => rgba(props.theme.text, 0.1)};
       }
     }
   }
@@ -114,9 +112,8 @@ const StyledWrapper = styled.div`
     flex: 1;
     overflow-y: auto;
     max-height: 400px;
-    background: ${(props) => props.theme.modal.body.bg};
     scrollbar-width: thin;
-    padding: 4px;
+    padding: 6px 0;
     scroll-behavior: smooth;
     /* Webkit scrollbar styling */
     &::-webkit-scrollbar {
@@ -127,26 +124,27 @@ const StyledWrapper = styled.div`
       background: transparent;
     }
     &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'};
+      background: ${(props) => rgba(props.theme.text, 0.2)};
       border-radius: 4px;
       &:hover {
-        background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)'};
+        background: ${(props) => rgba(props.theme.text, 0.3)};
       }
     }
   }
   .result-item {
     display: flex;
     align-items: center;
-    padding: 8px 12px;
-    gap: 8px;
+    padding: 10px 12px;
+    margin: 2px 8px;
+    gap: 10px;
     cursor: pointer;
-    border-left: 2px solid transparent;
-    &:hover {
-      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
+    border-radius: ${(props) => props.theme.border.radius.base};
+    transition: background 0.1s ease;
+    &:hover:not(.selected) {
+      background: ${(props) => rgba(props.theme.text, 0.05)};
     }
     &.selected {
-      background: ${(props) => `${props.theme.colors.text.yellow}15`};
-      border-left: 2px solid ${(props) => props.theme.colors.text.yellow};
+      background: ${(props) => props.theme.dropdown.hoverBg};
     }
   }
   .result-icon {
@@ -196,74 +194,82 @@ const StyledWrapper = styled.div`
     letter-spacing: 0.1px;
   }
   .method-badge {
-    font-size: ${(props) => props.theme.font.size.xs};
+    font-size: 0.625rem;
     font-weight: 500;
-    padding: 3px 8px;
+    padding: 2px 6px;
     border-radius: 4px;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.3px;
     flex-shrink: 0;
-    min-width: 55px;
+    min-width: 48px;
     text-align: center;
     &.get {
-      color: #2ecc71;
-      background: rgba(46, 204, 113, 0.1);
+      color: ${(props) => props.theme.request.methods.get};
+      background: ${(props) => rgba(props.theme.request.methods.get, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.get, 0.2)};
     }
     &.post {
-      color: #3498db;
-      background: rgba(52, 152, 219, 0.1);
+      color: ${(props) => props.theme.request.methods.post};
+      background: ${(props) => rgba(props.theme.request.methods.post, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.post, 0.2)};
     }
     &.put {
-      color: #e67e22;
-      background: rgba(230, 126, 34, 0.1);
+      color: ${(props) => props.theme.request.methods.put};
+      background: ${(props) => rgba(props.theme.request.methods.put, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.put, 0.2)};
     }
     &.delete {
-      color: #e74c3c;
-      background: rgba(231, 76, 60, 0.1);
+      color: ${(props) => props.theme.request.methods.delete};
+      background: ${(props) => rgba(props.theme.request.methods.delete, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.delete, 0.2)};
     }
     &.patch {
-      color: #9b59b6;
-      background: rgba(155, 89, 182, 0.1);
+      color: ${(props) => props.theme.request.methods.patch};
+      background: ${(props) => rgba(props.theme.request.methods.patch, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.patch, 0.2)};
     }
     &.head {
-      color: #2980b9;
-      background: rgba(41, 128, 185, 0.1);
+      color: ${(props) => props.theme.request.methods.head};
+      background: ${(props) => rgba(props.theme.request.methods.head, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.head, 0.2)};
     }
     &.options {
-      color: #f1c40f;
-      background: rgba(241, 196, 15, 0.1);
+      color: ${(props) => props.theme.request.methods.options};
+      background: ${(props) => rgba(props.theme.request.methods.options, 0.1)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.options, 0.2)};
     }
     &.unary {
-      color: #27ae60;
-      background: rgba(39, 174, 96, 0.12);
-      font-weight: 500;
+      color: ${(props) => props.theme.request.methods.get};
+      background: ${(props) => rgba(props.theme.request.methods.get, 0.12)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.get, 0.2)};
     }
     &.client-streaming {
-      color: #2980b9;
-      background: rgba(41, 128, 185, 0.12);
-      font-weight: 500;
+      color: ${(props) => props.theme.request.methods.post};
+      background: ${(props) => rgba(props.theme.request.methods.post, 0.12)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.post, 0.2)};
     }
     &.server-streaming {
-      color: #f39c12;
-      background: rgba(243, 156, 18, 0.12);
-      font-weight: 500;
+      color: ${(props) => props.theme.request.methods.put};
+      background: ${(props) => rgba(props.theme.request.methods.put, 0.12)};
+      border: 1px solid ${(props) => rgba(props.theme.request.methods.put, 0.2)};
     }
     &.bidirectional-streaming,
     &.bidi-streaming {
-      color: #8e44ad;
-      background: rgba(142, 68, 173, 0.12);
-      font-weight: 500;
+      color: ${(props) => props.theme.colors.text.purple};
+      background: ${(props) => rgba(props.theme.colors.text.purple, 0.12)};
+      border: 1px solid ${(props) => rgba(props.theme.colors.text.purple, 0.2)};
     }
   }
   .result-type {
-    font-size: ${(props) => props.theme.font.size.xs};
-    color: ${(props) => props.theme.colors.text.muted};
+    font-size: 0.625rem;
+    color: ${(props) => props.theme.textLink};
     padding: 2px 6px;
-    border-radius: 3px;
+    border-radius: 4px;
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)'};
-    opacity: 0.8;
+    font-weight: 500;
+    background: ${(props) => rgba(props.theme.textLink, 0.1)};
+    border: 1px solid ${(props) => rgba(props.theme.textLink, 0.2)};
     flex-shrink: 0;
   }
   .result-item[data-type="documentation"] {
@@ -280,9 +286,6 @@ const StyledWrapper = styled.div`
       letter-spacing: 0.1px;
       opacity: 0.8;
     }
-    &:hover:not(.selected) {
-      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
-    }
   }
   .no-results,
   .empty-state {
@@ -293,7 +296,7 @@ const StyledWrapper = styled.div`
   }
   .command-k-footer {
     padding: 8px 12px;
-    border-top: 1px solid ${(props) => props.theme.modal.input.border};
+    border-top: 1px solid ${(props) => props.theme.border.border1};
     background: ${(props) => props.theme.colors.surface};
   }
   .keyboard-hints {
@@ -319,10 +322,9 @@ const StyledWrapper = styled.div`
         align-items: center;
         justify-content: center;
         padding: 2px 6px;
-        border: 1px solid ${(props) => props.theme.modal.input.border};
+        border: 1px solid ${(props) => props.theme.border.border2};
         border-radius: 4px;
-        background: ${(props) =>
-          props.theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
+        background: ${(props) => rgba(props.theme.text, 0.08)};
         font-size: ${(props) => props.theme.font.size.xs};
         font-weight: 500;
         font-family: inherit;
@@ -332,11 +334,10 @@ const StyledWrapper = styled.div`
     }
   }
   .highlight {
-    background: ${(props) => `${props.theme.colors.text.yellow}30`};
+    color: ${(props) => props.theme.brand};
     border-radius: 2px;
-    padding: 0 2px;
+    padding: 1px 2px;
     margin: 0 -1px;
-    font-weight: 500;
   }
   @keyframes fade-in {
     from {
diff --git a/packages/bruno-app/src/components/InheritableSettingsInput/index.js b/packages/bruno-app/src/components/InheritableSettingsInput/index.js
index 0d88bbf20..d1e15eae3 100644
--- a/packages/bruno-app/src/components/InheritableSettingsInput/index.js
+++ b/packages/bruno-app/src/components/InheritableSettingsInput/index.js
@@ -36,9 +36,9 @@ const InheritableSettingsInput = ({
                 type="button"
                 className="px-2 py-1 text-xs rounded-sm outline-none transition-colors duration-100 w-24 h-8 flex items-center justify-between"
                 style={{
-                  backgroundColor: theme.modal.input.bg,
-                  border: `1px solid ${theme.modal.input.border}`,
-                  color: theme.modal.input.text
+                  backgroundColor: theme.input.bg,
+                  border: `1px solid ${theme.input.border}`,
+                  color: theme.input.text
                 }}
               >
                 <span>Inherit</span>
@@ -60,9 +60,9 @@ const InheritableSettingsInput = ({
               type="text"
               className="block px-2 py-1 pr-6 rounded-sm outline-none transition-colors duration-100 w-24 h-8"
               style={{
-                backgroundColor: theme.modal.input.bg,
-                border: `1px solid ${theme.modal.input.border}`,
-                color: theme.modal.input.text
+                backgroundColor: theme.input.bg,
+                border: `1px solid ${theme.input.border}`,
+                color: theme.input.text
               }}
               autoComplete="off"
               autoCorrect="off"
diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js
index f0df844a0..6ab8daaee 100644
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -118,11 +118,11 @@ const Wrapper = styled.div`
       box-shadow: none;
       transition: border-color ease-in-out 0.1s;
       border-radius: ${(props) => props.theme.border.radius.sm};
-      background-color: ${(props) => props.theme.modal.input.bg};
-      border: 1px solid ${(props) => props.theme.modal.input.border};
+      background-color: ${(props) => props.theme.input.bg};
+      border: 1px solid ${(props) => props.theme.input.border};
 
       &:focus {
-        border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+        border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
         outline: none !important;
       }
     }
diff --git a/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
index ed5724c7c..69eecfb12 100644
--- a/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
@@ -12,11 +12,11 @@ const StyledWrapper = styled.div`
     outline: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
       outline: none !important;
     }
   }
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.js
index cabc1bd72..91ed58c17 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js
index afa5c063e..7a2d36c9f 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js
@@ -62,8 +62,8 @@ const ApiKeyAuth = ({ item, collection, updateAuth, request, save }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Key</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={apikeyAuth.key || ''}
           theme={storedTheme}
@@ -71,11 +71,12 @@ const ApiKeyAuth = ({ item, collection, updateAuth, request, save }) => {
           onChange={(val) => handleAuthChange('key', val)}
           onRun={handleRun}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Value</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Value</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={apikeyAuth.value || ''}
           theme={storedTheme}
@@ -83,10 +84,11 @@ const ApiKeyAuth = ({ item, collection, updateAuth, request, save }) => {
           onChange={(val) => handleAuthChange('value', val)}
           onRun={handleRun}
           collection={collection}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Add To</label>
+      <label className="block mb-1">Add To</label>
       <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
index 26a35ede9..3b582ddb9 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
@@ -133,8 +133,8 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.accessKeyId || ''}
           theme={storedTheme}
@@ -143,11 +143,12 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2 flex items-center">
+      <label className="block mb-1">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -157,13 +158,14 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           collection={collection}
           item={item}
           isSecret={true}
+          isCompact
         />
 
         {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block font-medium mb-2">Session Token</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Session Token</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.sessionToken || ''}
           theme={storedTheme}
@@ -172,11 +174,12 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Service</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Service</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.service || ''}
           theme={storedTheme}
@@ -185,11 +188,12 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Region</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Region</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={awsv4Auth.region || ''}
           theme={storedTheme}
@@ -198,11 +202,12 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Profile Name</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Profile Name</label>
+      <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={awsv4Auth.profileName || ''}
           theme={storedTheme}
@@ -211,6 +216,7 @@ const AwsV4Auth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
index dcd1798ca..ef86c876e 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
@@ -53,8 +53,8 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={basicAuth.username || ''}
           theme={storedTheme}
@@ -63,10 +63,11 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
@@ -77,6 +78,7 @@ const BasicAuth = ({ item, collection, updateAuth, request, save }) => {
           collection={collection}
           item={item}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
index 4a6fe7d29..541d8626d 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
@@ -39,7 +39,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Token</label>
+      <label className="block mb-1">Token</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
@@ -50,6 +50,7 @@ const BearerAuth = ({ item, collection, updateAuth, request, save }) => {
           collection={collection}
           item={item}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
index d068f4045..ae0a40e0f 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
@@ -52,8 +52,8 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={digestAuth.username || ''}
           theme={storedTheme}
@@ -62,10 +62,11 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
@@ -76,6 +77,7 @@ const DigestAuth = ({ item, collection, updateAuth, request, save }) => {
           collection={collection}
           item={item}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js
index 93e5a2dae..f06adefa0 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js
@@ -70,8 +70,8 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={ntlmAuth.username || ''}
           theme={storedTheme}
@@ -80,11 +80,12 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <label className="block mb-1">Password</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -94,11 +95,12 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
           collection={collection}
           item={item}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block font-medium mb-2">Domain</label>
+      <label className="block mb-1">Domain</label>
       <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={ntlmAuth.domain || ''}
@@ -108,6 +110,7 @@ const NTLMAuth = ({ item, collection, request, save, updateAuth }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
     </StyledWrapper>
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 7a5ca6fdf..b306aba4c 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
@@ -203,6 +203,7 @@ const AdditionalParams = ({ item = {}, request, updateAuth, collection, handleSa
                   })}
                   collection={collection}
                   onSave={handleSave}
+                  isCompact
                 />
               </td>
               <td>
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 a162decf9..96aa81389 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
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
   .single-line-editor-wrapper {
     max-width: 400px;
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 aa9199f7e..f0cccf621 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
@@ -173,6 +173,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
               collection={collection}
               item={item}
               placeholder={useSystemBrowser ? 'https://oauth2.usebruno.com/callback' : undefined}
+              isCompact
             />
           </div>
         </div>
@@ -215,6 +216,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
                 collection={collection}
                 item={item}
                 isSecret={isSecret}
+                isCompact
               />
               {isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
             </div>
@@ -274,6 +276,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
             onRun={handleRun}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </div>
@@ -315,13 +318,14 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
                     onChange={(val) => handleChange('tokenHeaderPrefix', val)}
                     onRun={handleRun}
                     collection={collection}
+                    isCompact
                   />
                 </div>
               </div>
             )
           : (
               <div className="flex items-center gap-4 w-full" key="input-token-query-param-key">
-                <label className="block font-medium min-w-[140px]">Query Param Key</label>
+                <label className="block min-w-[140px]">Query Param Key</label>
                 <div className="single-line-editor-wrapper flex-1">
                   <SingleLineEditor
                     value={oAuth['tokenQueryKey'] || ''}
@@ -330,6 +334,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
                     onChange={(val) => handleChange('tokenQueryKey', val)}
                     onRun={handleRun}
                     collection={collection}
+                    isCompact
                   />
                 </div>
               </div>
@@ -354,6 +359,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
             onChange={(val) => handleChange('refreshTokenUrl', val)}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </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 a162decf9..96aa81389 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
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
   .single-line-editor-wrapper {
     max-width: 400px;
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 0db7db450..4d9bcd727 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
@@ -116,6 +116,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
                 collection={collection}
                 item={item}
                 isSecret={isSecret}
+                isCompact
               />
               {isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
             </div>
@@ -166,6 +167,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
             onRun={handleRun}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </div>
@@ -207,13 +209,14 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
                     onChange={(val) => handleChange('tokenHeaderPrefix', val)}
                     onRun={handleRun}
                     collection={collection}
+                    isCompact
                   />
                 </div>
               </div>
             )
           : (
               <div className="flex items-center gap-4 w-full" key="input-token-query-param-key">
-                <label className="block font-medium min-w-[140px]">Query Param Key</label>
+                <label className="block min-w-[140px]">Query Param Key</label>
                 <div className="single-line-editor-wrapper flex-1">
                   <SingleLineEditor
                     value={oAuth['tokenQueryKey'] || ''}
@@ -222,6 +225,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
                     onChange={(val) => handleChange('tokenQueryKey', val)}
                     onRun={handleRun}
                     collection={collection}
+                    isCompact
                   />
                 </div>
               </div>
@@ -246,6 +250,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
             onChange={(val) => handleChange('refreshTokenUrl', val)}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </div>
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 5ecbd80cb..62ee6fbc9 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
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
   .oauth2-input-wrapper {
     max-width: 400px;
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 99e45cf66..93dcbb677 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
@@ -128,6 +128,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
               collection={collection}
               item={item}
               placeholder={useSystemBrowser ? 'https://oauth2.usebruno.com/callback' : undefined}
+              isCompact
             />
           </div>
         </div>
@@ -167,6 +168,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
                 collection={collection}
                 item={item}
                 isSecret={isSecret}
+                isCompact
               />
             </div>
           </div>
@@ -193,6 +195,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
             onRun={handleRun}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </div>
@@ -235,6 +238,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
               onRun={handleRun}
               collection={collection}
               item={item}
+              isCompact
             />
           </div>
         </div>
@@ -250,6 +254,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
               onRun={handleRun}
               collection={collection}
               item={item}
+              isCompact
             />
           </div>
         </div>
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 a162decf9..96aa81389 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
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
   .single-line-editor-wrapper {
     max-width: 400px;
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 dcba8be17..78a6294fa 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
@@ -120,6 +120,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
                 collection={collection}
                 item={item}
                 isSecret={isSecret}
+                isCompact
               />
               {isSecret && showWarning && <SensitiveFieldWarning fieldName={key} warningMessage={warningMessage} />}
             </div>
@@ -170,6 +171,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
             onRun={handleRun}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </div>
@@ -211,13 +213,14 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
                     onChange={(val) => handleChange('tokenHeaderPrefix', val)}
                     onRun={handleRun}
                     collection={collection}
+                    isCompact
                   />
                 </div>
               </div>
             )
           : (
               <div className="flex items-center gap-4 w-full" key="input-token-query-param-key">
-                <label className="block font-medium min-w-[140px]">Query Param Key</label>
+                <label className="block min-w-[140px]">Query Param Key</label>
                 <div className="single-line-editor-wrapper flex-1">
                   <SingleLineEditor
                     value={oAuth['tokenQueryKey'] || ''}
@@ -226,6 +229,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
                     onChange={(val) => handleChange('tokenQueryKey', val)}
                     onRun={handleRun}
                     collection={collection}
+                    isCompact
                   />
                 </div>
               </div>
@@ -250,6 +254,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
             onChange={(val) => handleChange('refreshTokenUrl', val)}
             collection={collection}
             item={item}
+            isCompact
           />
         </div>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.js
index c2901f80b..f4b811f37 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js
index 1b62fcd09..7b01b207d 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js
@@ -53,8 +53,8 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
         <SingleLineEditor
           value={wsseAuth.username || ''}
           theme={storedTheme}
@@ -63,10 +63,11 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isCompact
         />
       </div>
 
-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
@@ -77,6 +78,7 @@ const WsseAuth = ({ item, collection, updateAuth, request, save }) => {
           collection={collection}
           item={item}
           isSecret={true}
+          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
index fc2574c88..5a37d9c23 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
 
   .response-status-input {
     background: ${(props) => props.theme.requestTabPanel.url.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border: 1px solid ${(props) => props.theme.border.border1};
     border-radius: 3px;
     padding: 0.35rem 0.6rem;
     font-size: ${(props) => props.theme.font.size.base};
@@ -44,7 +44,7 @@ const StyledWrapper = styled.div`
     left: 0;
     right: 0;
     background: ${(props) => props.theme.dropdown.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border: 1px solid ${(props) => props.theme.border.border1};
     border-top: none;
     border-radius: 0 0 3px 3px;
     box-shadow: ${(props) => props.theme.dropdown.shadow};
diff --git a/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js
index ed248cc11..f1cc89780 100644
--- a/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js
@@ -54,7 +54,7 @@ const StyledWrapper = styled.div`
   }
 
   .tabs-switcher {
-    border-bottom: 1px solid ${(props) => props.theme.modal.input.border};
+    border-bottom: 1px solid ${(props) => props.theme.border.border1};
     margin-bottom: 16px;
     
     button {
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
index 1c4ed9a82..6b3d106b0 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
@@ -63,7 +63,7 @@ const StyledWrapper = styled.div`
   }
 
   .tabs-switcher {
-    border-bottom: 1px solid ${(props) => props.theme.modal.input.border};
+    border-bottom: 1px solid ${(props) => props.theme.border.border1};
     margin-bottom: 16px;
     
     button {
diff --git a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
index 3473126f2..5cdfa200b 100644
--- a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
@@ -10,8 +10,13 @@ const Wrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      outline: none !important;
+    }
   }
 
   .item-path {
diff --git a/packages/bruno-app/src/components/SettingsInput/index.js b/packages/bruno-app/src/components/SettingsInput/index.js
index 70f980652..c034a49bc 100644
--- a/packages/bruno-app/src/components/SettingsInput/index.js
+++ b/packages/bruno-app/src/components/SettingsInput/index.js
@@ -29,8 +29,8 @@ const SettingsInput = ({
         type="text"
         className={`block px-2 py-1 rounded-sm outline-none transition-colors duration-100 w-24 h-8 ${className}`}
         style={{
-          backgroundColor: theme.modal.input.bg,
-          border: `1px solid ${theme.modal.input.border}`
+          backgroundColor: theme.input.bg,
+          border: `1px solid ${theme.input.border}`
         }}
         autoComplete="off"
         autoCorrect="off"
diff --git a/packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js
index 2140df27c..85abfb21b 100644
--- a/packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js
@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.method-selector-container {
-    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border: solid 1px ${(props) => props.theme.input.border};
     border-right: none;
-    background-color: ${(props) => props.theme.modal.input.bg};
+    background-color: ${(props) => props.theme.input.bg};
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
     .method-selector {
@@ -13,15 +13,15 @@ const StyledWrapper = styled.div`
   }
   div.method-selector-container,
   div.input-container {
-    background-color: ${(props) => props.theme.modal.input.bg};
+    background-color: ${(props) => props.theme.input.bg};
     height: 2.1rem;
   }
   div.input-container {
-    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border: solid 1px ${(props) => props.theme.input.border};
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
     input {
-      background-color: ${(props) => props.theme.modal.input.bg};
+      background-color: ${(props) => props.theme.input.bg};
       outline: none;
       box-shadow: none;
       &:focus {
diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index c1dbb4686..7c4f79e19 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const StyledWrapper = styled.div`
   width: 100%;
-  height: 30px;
+  height: ${(props) => (props.$isCompact ? '1.375rem' : '1.875rem')};
   overflow-y: hidden;
   overflow-x: hidden;
 
@@ -14,14 +14,14 @@ const StyledWrapper = styled.div`
 
   .CodeMirror {
     background: transparent;
-    height: 34px;
+    height: ${(props) => (props.$isCompact ? '1.375rem' : '2.125rem')};
     font-size: ${(props) => props.theme.font.size.base};
-    line-height: 30px;
+    line-height: ${(props) => (props.$isCompact ? '1.375rem' : '1.875rem')};
     overflow: hidden;
 
     .CodeMirror-scroll {
       overflow: hidden !important;
-      padding-bottom: 50px !important;
+      padding-bottom: 3.125rem !important;
     }
 
     .CodeMirror-vscrollbar,
@@ -40,8 +40,8 @@ const StyledWrapper = styled.div`
     }
 
     .CodeMirror-cursor {
-      height: 20px !important;
-      margin-top: 5px !important;
+      height: ${(props) => (props.$isCompact ? '0.875rem' : '1.25rem')} !important;
+      margin-top: ${(props) => (props.$isCompact ? '0.25rem' : '0.3125rem')} !important;
       border-left: 1px solid ${(props) => props.theme.text} !important;
     }
 
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js
index c24338992..05caed996 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -305,6 +305,7 @@ class SingleLineEditor extends Component {
         <StyledWrapper
           ref={this.editorRef}
           className={`single-line-editor grow ${this.props.readOnly ? 'read-only' : ''}`}
+          $isCompact={this.props.isCompact}
           {...(this.props['data-testid'] ? { 'data-testid': this.props['data-testid'] } : {})}
         />
         <div className="flex items-center">
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
index 80e4ec0ce..a2aeb1fef 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
@@ -123,8 +123,8 @@ const catppuccinFrappeTheme = {
   },
 
   input: {
-    bg: colors.SURFACE0,
-    border: colors.SURFACE0,
+    bg: 'transparent',
+    border: colors.SURFACE1,
     focusBorder: colors.LAVENDER,
     placeholder: {
       color: colors.OVERLAY0,
@@ -251,8 +251,8 @@ const catppuccinFrappeTheme = {
       bg: colors.BASE
     },
     input: {
-      bg: colors.SURFACE0,
-      border: colors.SURFACE0,
+      bg: 'transparent',
+      border: colors.SURFACE1,
       focusBorder: colors.LAVENDER
     },
     backdrop: {
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
index 0cad2f27f..7c67738d4 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
@@ -123,8 +123,8 @@ const catppuccinMacchiatoTheme = {
   },
 
   input: {
-    bg: colors.SURFACE0,
-    border: colors.SURFACE0,
+    bg: 'transparent',
+    border: colors.SURFACE1,
     focusBorder: colors.LAVENDER,
     placeholder: {
       color: colors.OVERLAY0,
@@ -251,8 +251,8 @@ const catppuccinMacchiatoTheme = {
       bg: colors.BASE
     },
     input: {
-      bg: colors.SURFACE0,
-      border: colors.SURFACE0,
+      bg: 'transparent',
+      border: colors.SURFACE1,
       focusBorder: colors.LAVENDER
     },
     backdrop: {
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
index 6a0797ca4..7b1931e11 100644
--- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -123,8 +123,8 @@ const catppuccinMochaTheme = {
   },
 
   input: {
-    bg: colors.SURFACE0,
-    border: colors.SURFACE0,
+    bg: 'transparent',
+    border: colors.SURFACE1,
     focusBorder: colors.LAVENDER,
     placeholder: {
       color: colors.OVERLAY0,
@@ -251,8 +251,8 @@ const catppuccinMochaTheme = {
       bg: colors.BASE
     },
     input: {
-      bg: colors.SURFACE0,
-      border: colors.SURFACE0,
+      bg: 'transparent',
+      border: colors.SURFACE1,
       focusBorder: colors.LAVENDER
     },
     backdrop: {
diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js
index 3f32c36b1..da5c54b2d 100644
--- a/packages/bruno-app/src/themes/dark/dark-monochrome.js
+++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js
@@ -110,12 +110,12 @@ const darkMonochromeTheme = {
   },
 
   input: {
-    bg: 'rgb(65, 65, 65)',
-    border: 'rgb(65, 65, 65)',
-    focusBorder: 'rgb(65, 65, 65)',
+    bg: 'transparent',
+    border: colors.GRAY_3,
+    focusBorder: colors.BRAND,
     placeholder: {
-      color: '#a2a2a2',
-      opacity: 0.75
+      color: colors.TEXT_MUTED,
+      opacity: 0.6
     }
   },
 
@@ -238,9 +238,9 @@ const darkMonochromeTheme = {
       bg: 'rgb(48, 48, 49)'
     },
     input: {
-      bg: 'rgb(65, 65, 65)',
-      border: 'rgb(65, 65, 65)',
-      focusBorder: 'rgb(65, 65, 65)'
+      bg: 'transparent',
+      border: colors.GRAY_3,
+      focusBorder: colors.BRAND
     },
     backdrop: {
       opacity: 0.2
diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js
index 643de0889..7243f3328 100644
--- a/packages/bruno-app/src/themes/dark/dark-pastel.js
+++ b/packages/bruno-app/src/themes/dark/dark-pastel.js
@@ -131,12 +131,12 @@ const darkPastelTheme = {
   },
 
   input: {
-    bg: colors.GRAY_2,
+    bg: 'transparent',
     border: colors.GRAY_4,
     focusBorder: colors.BRAND,
     placeholder: {
-      color: colors.GRAY_6,
-      opacity: 0.8
+      color: colors.TEXT_MUTED,
+      opacity: 0.6
     }
   },
 
@@ -254,7 +254,7 @@ const darkPastelTheme = {
       bg: colors.GRAY_2
     },
     input: {
-      bg: colors.GRAY_3,
+      bg: 'transparent',
       border: colors.GRAY_4,
       focusBorder: colors.BRAND
     },
diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js
index c49ceba1c..978332d1c 100644
--- a/packages/bruno-app/src/themes/dark/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -1,6 +1,8 @@
+import { rgba } from 'polished';
+
 export const palette = {
   accents: {
-    PRIMARY: '#d9a342',
+    PRIMARY: 'hsl(39, 74%, 59%)',
     RED: 'hsl(0,   70%, 71%)',
     ROSE: 'hsl(350, 65%, 78%)',
     BROWN: 'hsl(41,  52%, 77%)',
@@ -128,12 +130,14 @@ const darkTheme = {
   },
 
   input: {
-    bg: 'rgb(65, 65, 65)',
-    border: 'rgb(65, 65, 65)',
-    focusBorder: 'rgb(65, 65, 65)',
+    bg: 'transparent',
+    border: palette.border.BORDER2,
+    // bg: palette.background.SURFACE1,
+    // border: palette.background.SURFACE1,
+    focusBorder: rgba(palette.accents.PRIMARY, 0.8),
     placeholder: {
-      color: '#a2a2a2',
-      opacity: 0.75
+      color: palette.text.SUBTEXT1,
+      opacity: 0.6
     }
   },
 
@@ -256,9 +260,9 @@ const darkTheme = {
       bg: palette.background.MANTLE
     },
     input: {
-      bg: 'rgb(65, 65, 65)',
-      border: 'rgb(65, 65, 65)',
-      focusBorder: 'rgb(65, 65, 65)'
+      bg: 'transparent',
+      border: palette.border.BORDER2,
+      focusBorder: rgba(palette.accents.PRIMARY, 0.8)
     },
     backdrop: {
       opacity: 0.2
@@ -324,7 +328,7 @@ const darkTheme = {
     active: {
       fontWeight: 400,
       color: '#CCCCCC',
-      border: '#d9a342'
+      border: palette.accents.PRIMARY
     },
     secondary: {
       active: {
diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js
index 4ddb4439d..e23400e71 100644
--- a/packages/bruno-app/src/themes/dark/nord.js
+++ b/packages/bruno-app/src/themes/dark/nord.js
@@ -130,12 +130,12 @@ const nordTheme = {
   },
 
   input: {
-    bg: colors.NORD1,
-    border: colors.NORD2,
+    bg: 'transparent',
+    border: colors.NORD3,
     focusBorder: colors.NORD8,
     placeholder: {
       color: colors.TEXT_MUTED,
-      opacity: 0.75
+      opacity: 0.6
     }
   },
 
@@ -253,8 +253,8 @@ const nordTheme = {
       bg: colors.NORD1
     },
     input: {
-      bg: colors.NORD2,
-      border: colors.NORD2,
+      bg: 'transparent',
+      border: colors.NORD3,
       focusBorder: colors.NORD8
     },
     backdrop: {
diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js
index 0ebec4064..c9592f91b 100644
--- a/packages/bruno-app/src/themes/dark/vscode.js
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -132,12 +132,12 @@ const vscodeDarkTheme = {
   },
 
   input: {
-    bg: colors.GRAY_2,
+    bg: 'transparent',
     border: colors.BORDER,
     focusBorder: colors.BRAND,
     placeholder: {
       color: colors.TEXT_MUTED,
-      opacity: 0.75
+      opacity: 0.6
     }
   },
 
@@ -255,7 +255,7 @@ const vscodeDarkTheme = {
       bg: colors.GRAY_2
     },
     input: {
-      bg: colors.GRAY_3,
+      bg: 'transparent',
       border: colors.BORDER,
       focusBorder: colors.BRAND
     },