feat: dark mode input revamp

2026-06-23 20:55:41 +00:00 · 2025-12-29 22:12:56 +05:30
parent 018f39239f
commit 6e5f56dbde
64 changed files with 327 additions and 240 deletions
--- 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 {
--- 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
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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;
    }
  }
--- 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;
    }
  }
--- 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;
    }
  }
--- 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;
    }
  }
--- 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;
--- 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;
--- 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}
--- 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 {
--- 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"
--- 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;
      }
    }
--- 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;
    }
  }
--- 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 {
--- 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
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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>
--- 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;
--- 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>
--- 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;
--- 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>
--- 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;
--- 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>
--- 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;
--- 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>
--- 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 {
--- 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>
--- 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};
--- 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 {
--- 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 {
--- 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 {
--- 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"
--- 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 {
--- 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;
    }

--- 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">
--- 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: {
--- 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: {
--- 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: {
--- 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
--- 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
    },
--- 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: {
--- 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: {
--- 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
    },