From 59514127d53ba669a1e411d9112a3a24d5ba3ce9 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Thu, 27 Nov 2025 22:19:35 +0530
Subject: [PATCH] Merge pull request #6171 from
 abhishek-bruno/style/update-font-size

style: updated font size to 13px using theme props.
---
 .../CodeMirrorSearch/StyledWrapper.js         |  6 +-
 .../Auth/ApiKeyAuth/StyledWrapper.js          |  2 +-
 .../Auth/AuthMode/StyledWrapper.js            |  2 +-
 .../Auth/AwsV4Auth/StyledWrapper.js           |  2 +-
 .../Auth/BasicAuth/StyledWrapper.js           |  2 +-
 .../Auth/BearerAuth/StyledWrapper.js          |  2 +-
 .../Auth/DigestAuth/StyledWrapper.js          |  2 +-
 .../Auth/NTLMAuth/StyledWrapper.js            |  2 +-
 .../Auth/OAuth2/StyledWrapper.js              |  2 +-
 .../Auth/WsseAuth/StyledWrapper.js            |  2 +-
 .../ClientCertSettings/index.js               |  4 +-
 .../Headers/StyledWrapper.js                  |  6 +-
 .../CollectionSettings/Overview/Info/index.js | 20 ++---
 .../CollectionSettings/Overview/index.js      |  6 +-
 .../CollectionSettings/Protobuf/index.js      | 12 +--
 .../Vars/VarsTable/StyledWrapper.js           |  6 +-
 .../Cookies/ModifyCookieModal/index.js        | 30 +++----
 .../src/components/Cookies/StyledWrapper.js   |  2 +-
 .../bruno-app/src/components/Cookies/index.js | 22 ++---
 .../Console/DebugTab/StyledWrapper.js         | 18 ++--
 .../ErrorDetailsPanel/StyledWrapper.js        | 22 ++---
 .../Console/NetworkTab/StyledWrapper.js       | 36 ++++----
 .../RequestDetailsPanel/StyledWrapper.js      | 32 +++----
 .../Devtools/Console/StyledWrapper.js         | 30 +++----
 .../src/components/Devtools/Console/index.js  |  2 +-
 .../Devtools/Performance/StyledWrapper.js     | 16 ++--
 .../src/components/Dropdown/StyledWrapper.js  |  2 +-
 .../Common/ExportEnvironmentModal/index.js    | 10 +--
 .../Common/ImportEnvironmentModal/index.js    |  2 +-
 .../EnvironmentSelector/StyledWrapper.js      | 18 ++--
 .../CopyEnvironment/index.js                  |  2 +-
 .../CreateEnvironment/index.js                |  2 +-
 .../DeleteEnvironment/index.js                |  2 +-
 .../EnvironmentList/ConfirmSwitchEnv.js       |  2 +-
 .../EnvironmentVariables/StyledWrapper.js     |  8 +-
 .../EnvironmentDetails/index.js               |  2 +-
 .../RenameEnvironment/index.js                |  2 +-
 .../Environments/EnvironmentSettings/index.js |  4 +-
 .../FolderSettings/Auth/StyledWrapper.js      |  2 +-
 .../FolderSettings/AuthMode/StyledWrapper.js  |  2 +-
 .../FolderSettings/Headers/StyledWrapper.js   |  6 +-
 .../Vars/VarsTable/StyledWrapper.js           |  6 +-
 .../CopyEnvironment/index.js                  |  2 +-
 .../CreateEnvironment/index.js                |  2 +-
 .../DeleteEnvironment/index.js                |  2 +-
 .../EnvironmentList/ConfirmSwitchEnv.js       |  2 +-
 .../EnvironmentVariables/StyledWrapper.js     |  8 +-
 .../EnvironmentDetails/index.js               |  2 +-
 .../RenameEnvironment/index.js                |  2 +-
 .../EnvironmentSettings/index.js              |  4 +-
 .../GlobalSearchModal/StyledWrapper.js        | 26 +++---
 .../src/components/Help/StyledWrapper.js      |  2 +-
 .../src/components/MarkDown/StyledWrapper.js  | 12 +--
 .../src/components/Modal/StyledWrapper.js     |  4 +-
 .../MultiLineEditor/StyledWrapper.js          |  2 +-
 .../components/Notifications/StyleWrapper.js  |  2 +-
 .../src/components/Notifications/index.js     |  2 +-
 .../components/PathDisplay/StyledWrapper.js   |  2 +-
 .../src/components/Preferences/Beta/index.js  |  4 +-
 .../Preferences/Display/Font/index.js         |  2 +-
 .../Preferences/Keybindings/StyledWrapper.js  |  5 +-
 .../RequestPane/Assertions/StyledWrapper.js   |  6 +-
 .../Auth/ApiKeyAuth/StyledWrapper.js          |  2 +-
 .../Auth/AuthMode/StyledWrapper.js            |  2 +-
 .../Auth/AwsV4Auth/StyledWrapper.js           |  2 +-
 .../Auth/BasicAuth/StyledWrapper.js           |  2 +-
 .../Auth/BearerAuth/StyledWrapper.js          |  2 +-
 .../Auth/DigestAuth/StyledWrapper.js          |  2 +-
 .../Auth/NTLMAuth/StyledWrapper.js            |  2 +-
 .../OAuth2/AdditionalParams/StyledWrapper.js  |  7 +-
 .../Auth/OAuth2/AdditionalParams/index.js     |  4 +-
 .../OAuth2/AuthorizationCode/StyledWrapper.js |  2 +-
 .../Auth/OAuth2/AuthorizationCode/index.js    |  8 +-
 .../OAuth2/ClientCredentials/StyledWrapper.js |  2 +-
 .../Auth/OAuth2/ClientCredentials/index.js    |  8 +-
 .../OAuth2/GrantTypeSelector/StyledWrapper.js |  4 +-
 .../Auth/OAuth2/GrantTypeSelector/index.js    |  2 +-
 .../Auth/OAuth2/Implicit/StyledWrapper.js     |  2 +-
 .../RequestPane/Auth/OAuth2/Implicit/index.js |  6 +-
 .../Auth/OAuth2/Oauth2TokenViewer/index.js    |  6 +-
 .../PasswordCredentials/StyledWrapper.js      |  2 +-
 .../Auth/OAuth2/PasswordCredentials/index.js  |  8 +-
 .../RequestPane/Auth/OAuth2/StyledWrapper.js  |  2 +-
 .../Auth/WsseAuth/StyledWrapper.js            |  2 +-
 .../RequestPane/FileBody/StyledWrapper.js     |  6 +-
 .../FormUrlEncodedParams/StyledWrapper.js     |  6 +-
 .../RequestPane/GraphQLSchemaActions/index.js |  2 +-
 .../components/RequestPane/GrpcBody/index.js  |  6 +-
 .../GrpcQueryUrl/MethodDropdown/index.js      |  2 +-
 .../GrpcQueryUrl/ProtoFileDropdown/index.js   |  4 +-
 .../Tabs/ImportPathsTab/StyledWrapper.js      | 12 +--
 .../Tabs/ProtoFilesTab/StyledWrapper.js       | 14 ++--
 .../MultipartFormParams/StyledWrapper.js      |  6 +-
 .../PromptVariablesModal/index.js             |  2 +-
 .../RequestPane/QueryParams/StyledWrapper.js  |  6 +-
 .../HttpMethodSelector/StyledWrapper.js       |  2 +-
 .../RequestBodyMode/StyledWrapper.js          |  2 +-
 .../RequestHeaders/StyledWrapper.js           |  6 +-
 .../Vars/VarsTable/StyledWrapper.js           |  6 +-
 .../WSSettingsPane/StyledWrapper.js           |  2 +-
 .../WsBody/BodyMode/StyledWrapper.js          |  2 +-
 .../components/RequestPane/WsBody/index.js    |  4 +-
 .../RequestTabs/CollectionToolBar/index.js    |  4 +-
 .../ConfirmCollectionClose/index.js           |  4 +-
 .../RequestTab/ConfirmFolderClose/index.js    |  4 +-
 .../RequestTab/ConfirmRequestClose/index.js   |  4 +-
 .../RequestTabs/RequestTab/StyledWrapper.js   |  4 +
 .../RequestTabs/RequestTab/index.js           |  2 +-
 .../components/RequestTabs/StyledWrapper.js   |  3 +-
 .../CreateExampleModal/index.js               |  6 +-
 .../ResponseExampleBody/StyledWrapper.js      |  2 +-
 .../ResponseExampleBodyRenderer/index.js      |  4 +-
 .../StyledWrapper.js                          |  2 +-
 .../ResponseExampleFileBody/StyledWrapper.js  |  8 +-
 .../StyledWrapper.js                          |  6 +-
 .../ResponseExampleHeaders/StyledWrapper.js   |  2 +-
 .../StyledWrapper.js                          |  6 +-
 .../ResponseExampleParams/StyledWrapper.js    |  6 +-
 .../ResponseExampleUrlBar/index.js            |  2 +-
 .../StyledWrapper.js                          |  2 +-
 .../StyledWrapper.js                          |  2 +-
 .../StyledWrapper.js                          |  6 +-
 .../ResponseExampleTopBar/StyledWrapper.js    |  6 +-
 .../ResponseExampleTopBar/index.js            |  6 +-
 .../ClearTimeline/StyledWrapper.js            |  2 +-
 .../GrpcError/StyledWrapper.js                |  4 +-
 .../GrpcResponseHeaders/StyledWrapper.js      |  4 +-
 .../GrpcStatusCode/StyledWrapper.js           |  4 +-
 .../ResponseTrailers/StyledWrapper.js         |  4 +-
 .../LargeResponseWarning/StyledWrapper.js     |  2 +-
 .../ResponsePane/NetworkError/index.js        |  4 +-
 .../QueryResult/QueryResultFilter/index.js    |  4 +-
 .../ResponseClear/StyledWrapper.js            |  2 +-
 .../ResponseHeaders/StyledWrapper.js          |  4 +-
 .../ResponseSave/StyledWrapper.js             |  2 +-
 .../ResponseSize/ResponseSize.spec.js         |  5 ++
 .../ResponseSize/StyledWrapper.js             |  4 +-
 .../ResponseStopWatch/StyledWrapper.js        |  4 +-
 .../ResponseTime/StyledWrapper.js             |  4 +-
 .../RunnerTimeline/StyledWrapper.js           | 18 ++--
 .../ResponsePane/ScriptError/StyledWrapper.js |  4 +-
 .../ResponsePane/StatusCode/StyledWrapper.js  |  4 +-
 .../Timeline/GrpcTimelineItem/index.js        | 30 +++----
 .../ResponsePane/Timeline/StyledWrapper.js    | 18 ++--
 .../TimelineItem/Common/Headers/index.js      |  4 +-
 .../Timeline/TimelineItem/Response/index.js   |  4 +-
 .../Timeline/TimelineItem/index.js            | 84 ++++++++++---------
 .../WsResponsePane/WSMessagesList/index.js    |  2 +-
 .../WSResponseHeaders/StyledWrapper.js        |  4 +-
 .../WSResponseSortOrder/StyledWrapper.js      |  2 +-
 .../WSStatusCode/StyledWrapper.js             |  4 +-
 .../RunConfigurationPanel/StyledWrapper.jsx   | 12 +--
 .../components/RunnerResults/StyledWrapper.js |  4 +
 .../src/components/RunnerResults/index.jsx    | 16 ++--
 .../src/components/SearchInput/index.js       |  4 +-
 .../JsSandboxModeModal/index.js               |  4 +-
 .../src/components/SecuritySettings/index.js  |  6 +-
 .../SensitiveFieldWarning/StyledWrapper.js    |  2 +-
 .../Collection/CloneCollection/index.js       |  9 +-
 .../CloneCollectionItem/index.js              |  4 +-
 .../DeleteCollectionItem/index.js             |  2 +-
 .../DeleteResponseExampleModal/index.js       |  2 +-
 .../ExampleItem/StyledWrapper.js              |  2 +-
 .../CollectionItem/ExampleItem/index.js       |  2 +-
 .../CodeView/StyledWrapper.js                 |  4 +-
 .../CodeViewToolbar/StyledWrapper.js          |  6 +-
 .../GenerateCodeItem/StyledWrapper.js         |  4 +-
 .../RenameCollectionItem/index.js             |  4 +-
 .../RequestMethod/StyledWrapper.js            |  2 +-
 .../CollectionItem/StyledWrapper.js           |  2 +-
 .../ConfirmCollectionCloseDrafts.js           |  2 +-
 .../Collection/RemoveCollection/index.js      |  4 +-
 .../Collection/RenameCollection/index.js      |  2 +-
 .../Collections/Collection/StyledWrapper.js   |  3 +-
 .../RemoveCollectionsModal/StyledWrapper.js   |  2 +-
 .../RemoveCollectionsModal/index.js           |  4 +-
 .../components/Sidebar/Collections/index.js   |  4 +-
 .../Sidebar/CreateCollection/index.js         | 11 +--
 .../components/Sidebar/GoldenEdition/index.js | 12 +--
 .../FullscreenLoader/index.js                 |  2 +-
 .../Sidebar/ImportCollection/index.js         |  4 +-
 .../Sidebar/ImportCollectionLocation/index.js | 10 +--
 .../src/components/Sidebar/NewFolder/index.js |  4 +-
 .../components/Sidebar/NewRequest/index.js    | 10 +--
 .../src/components/Sidebar/TitleBar/index.js  |  2 +-
 .../SingleLineEditor/StyledWrapper.js         |  2 +-
 .../src/components/StatusBar/StyledWrapper.js |  4 +-
 .../src/components/TagList/StyledWrapper.js   | 10 +--
 .../src/components/VariablesEditor/index.js   |  6 +-
 .../src/components/Welcome/StyledWrapper.js   |  4 +-
 .../bruno-app/src/components/Welcome/index.js |  6 +-
 packages/bruno-app/src/globalStyles.js        | 25 +++---
 .../src/pages/Bruno/StyledWrapper.js          |  2 +-
 .../src/pages/ErrorBoundary/index.js          |  2 +-
 .../App/ConfirmAppClose/SaveRequestsModal.js  |  2 +-
 packages/bruno-app/src/styles/globals.css     |  8 +-
 packages/bruno-app/src/themes/dark.js         | 11 +++
 packages/bruno-app/src/themes/light.js        | 11 +++
 .../bruno-electron/src/store/preferences.js   | 24 +++++-
 199 files changed, 640 insertions(+), 588 deletions(-)

diff --git a/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js b/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
index b50bb222b..d6265fe3e 100644
--- a/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
@@ -27,7 +27,7 @@ const StyledWrapper = styled.div`
     border: none;
     outline: none;
     padding: 1px 2px;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     margin: 0 1px;
     height: 28px;
   }
@@ -50,7 +50,7 @@ const StyledWrapper = styled.div`
   .searchbar-result-count {
     min-width: 28px;
     text-align: center;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     color: #aaa;
     margin: 0 8px 0 1px; 
     white-space: nowrap;
@@ -74,7 +74,7 @@ const StyledWrapper = styled.div`
     color: inherit;
     border: none;
     outline: none;
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     padding: 1px 2px;
     min-width: 80px;
   }
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 aaa30d7f8..79d16da14 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
index cdbdf8424..9cf2c5fa4 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .auth-mode-selector {
     background: transparent;
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 c2bb5d207..eeaf2d45a 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 c2bb5d207..eeaf2d45a 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 c2bb5d207..eeaf2d45a 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 c2bb5d207..eeaf2d45a 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/StyledWrapper.js
index 856f35b9b..65cb5cba9 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .single-line-editor-wrapper {
     max-width: 400px;
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 c2bb5d207..eeaf2d45a 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
index 083380c58..c1707801c 100644
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
@@ -146,7 +146,7 @@ const ClientCertSettings = ({ collection }) => {
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
 
-      <h1 className="font-semibold">Client Certificates</h1>
+      <h1 className="font-medium">Client Certificates</h1>
       <ul className="mt-4">
         {!clientCertConfig.length
           ? 'No client certificates added'
@@ -169,7 +169,7 @@ const ClientCertSettings = ({ collection }) => {
           ))}
       </ul>
 
-      <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
+      <h1 className="font-medium mt-8 mb-2">Add Client Certificate</h1>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="domain">
diff --git a/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
index c4d03c5ed..405ca5d78 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
@@ -6,7 +6,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -33,7 +33,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-header {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
index eb42be7cb..2a09512de 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
+import { IconBox, IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
 import { areItemsLoading, getItemsLoadStats } from "utils/collections/index";
 import { useState } from "react";
 import ShareCollection from "components/ShareCollection/index";
@@ -19,15 +19,15 @@ const Info = ({ collection }) => {
   return (
     <div className="w-full flex flex-col h-fit">
       <div className="rounded-lg py-6">
-        <div className="grid gap-6">
+        <div className="grid gap-5">
           {/* Location Row */}
           <div className="flex items-start">
             <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
               <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-semibold text-sm">Location</div>
-              <div className="mt-1 text-sm text-muted break-all">
+              <div className="font-medium">Location</div>
+              <div className="mt-1 text-muted break-all text-xs">
                 {collection.pathname}
               </div>
             </div>
@@ -39,8 +39,8 @@ const Info = ({ collection }) => {
               <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-semibold text-sm">Environments</div>
-              <div className="mt-1 text-sm text-muted">
+              <div className="font-medium">Environments</div>
+              <div className="mt-1 text-muted text-xs">
                 {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
               </div>
             </div>
@@ -52,8 +52,8 @@ const Info = ({ collection }) => {
               <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted">
+              <div className="font-medium">Requests</div>
+              <div className="mt-1 text-muted text-xs">
                 {
                   isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
                 }
@@ -66,8 +66,8 @@ const Info = ({ collection }) => {
               <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
             </div>
             <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-semibold text-sm h-fit my-auto">Share</div>
-              <div className="mt-1 text-sm group-hover:underline text-link">
+              <div className="font-medium h-fit my-auto">Share</div>
+              <div className="group-hover:underline text-link text-xs">
                 Share Collection
               </div>
             </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
index 87b461e9c..9792c224c 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
@@ -7,10 +7,10 @@ import RequestsNotLoaded from "./RequestsNotLoaded";
 const Overview = ({ collection }) => {
   return (
     <div className="h-full">
-      <div className="grid grid-cols-5 gap-4 h-full">
+      <div className="grid grid-cols-5 gap-5 h-full">
         <div className="col-span-2">
-          <div className="text-xl font-semibold flex items-center gap-2">
-            <IconBox size={24} stroke={1.5} />
+          <div className="text-lg font-medium flex items-center gap-2">
+            <IconBox size={20} stroke={1.5} />
             {collection?.name}
           </div>
           <Info collection={collection} />
diff --git a/packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js b/packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js
index 10385f6e7..36a88d54b 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js
@@ -112,7 +112,7 @@ const ProtobufSettings = ({ collection }) => {
       <div className="mb-6" data-testid="protobuf-proto-files-section">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center">
-            <label className="font-semibold text-sm flex items-center" htmlFor="protoFiles">
+            <label className="font-medium flex items-center" htmlFor="protoFiles">
               Proto Files (
               {protoFiles.length}
               )
@@ -156,7 +156,7 @@ const ProtobufSettings = ({ collection }) => {
                   <td colSpan="3" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
                     <div className="flex flex-col items-center">
                       <IconFile size={24} className="text-gray-400 mb-2" />
-                      <span className="text-sm text-gray-500 dark:text-gray-400">No proto files added</span>
+                      <span className="text-gray-500 dark:text-gray-400">No proto files added</span>
                     </div>
                   </td>
                 </tr>
@@ -169,7 +169,7 @@ const ProtobufSettings = ({ collection }) => {
                       <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
                         <div className="flex items-center">
                           <IconFile size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
-                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100" data-testid="protobuf-proto-file-name">
+                          <span className="font-medium text-gray-900 dark:text-gray-100" data-testid="protobuf-proto-file-name">
                             {getBasename(collection.pathname, file.path)}
                           </span>
                           {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
@@ -219,7 +219,7 @@ const ProtobufSettings = ({ collection }) => {
       <div className="mb-6" data-testid="protobuf-import-paths-section">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center">
-            <label className="font-semibold text-sm flex items-center" htmlFor="importPaths">
+            <label className="font-medium flex items-center" htmlFor="importPaths">
               Import Paths (
               {importPaths.length}
               )
@@ -265,7 +265,7 @@ const ProtobufSettings = ({ collection }) => {
                   <td colSpan="4" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
                     <div className="flex flex-col items-center">
                       <IconFolder size={24} className="text-gray-400 mb-2" />
-                      <span className="text-sm text-gray-500 dark:text-gray-400">No import paths added</span>
+                      <span className="text-gray-500 dark:text-gray-400">No import paths added</span>
                     </div>
                   </td>
                 </tr>
@@ -288,7 +288,7 @@ const ProtobufSettings = ({ collection }) => {
                       <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
                         <div className="flex items-center">
                           <IconFolder size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
-                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          <span className="font-medium text-gray-900 dark:text-gray-100">
                             {getBasename(collection.pathname, importPath.path)}
                           </span>
                           {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
diff --git a/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/StyledWrapper.js
index efacc8288..a44141c79 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -31,7 +31,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-var {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
index 5f7f66867..b35c360ee 100644
--- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
+++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
@@ -210,7 +210,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
       handleConfirm={onSubmit}
       customHeader={
         <div className="flex items-center justify-between w-full">
-          <h2 className="text-sm font-bold">{title}</h2>
+          <h2 className="font-bold">{title}</h2>
           <div className="ml-auto flex items-center ">
             <ToggleSwitch
               className="mr-2"
@@ -220,7 +220,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                 setIsRawMode(e.target.checked);
               }}
             />
-            <label className="text-sm font-normal mr-4 normal-case">Edit Raw</label>
+            <label className="font-normal mr-4 normal-case">Edit Raw</label>
           </div>
         </div>
       }
@@ -229,7 +229,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
         {isRawMode ? (
           <div>
             <div className="flex items-center gap-2 mb-1">
-              <label className="block text-sm">Set-Cookie String</label>
+              <label className="block">Set-Cookie String</label>
               <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="text-gray-400" />
               <Tooltip
                 anchorId="cookie-raw-info"
@@ -248,7 +248,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm mb-1">
+                <label className="block mb-1">
                   Domain<span className="text-red-600">*</span>{' '}
                 </label>
                 <input
@@ -262,11 +262,11 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   disabled={!!cookie}
                 />
                 {formik.touched.domain && formik.errors.domain && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.domain}</div>
+                  <div className="text-red-500 mt-1">{formik.errors.domain}</div>
                 )}
               </div>
               <div>
-                <label className="block text-sm mb-1">Path</label>
+                <label className="block mb-1">Path</label>
                 <input
                   type="text"
                   name="path"
@@ -276,11 +276,11 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   disabled={!!cookie}
                 />
                 {formik.touched.path && formik.errors.path && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.path}</div>
+                  <div className="text-red-500 mt-1">{formik.errors.path}</div>
                 )}
               </div>
               <div>
-                <label className="block text-sm mb-1">
+                <label className="block mb-1">
                   Key<span className="text-red-600">*</span>{' '}
                 </label>
                 <input
@@ -294,12 +294,12 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   disabled={!!cookie}
                 />
                 {formik.touched.key && formik.errors.key && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.key}</div>
+                  <div className="text-red-500 mt-1">{formik.errors.key}</div>
                 )}
               </div>
 
               <div>
-                <label className="block text-sm mb-1">
+                <label className="block mb-1">
                   Value<span className="text-red-600">*</span>{' '}
                 </label>
                 <input
@@ -312,7 +312,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   className="block textbox non-passphrase-input w-full"
                 />
                 {formik.touched.value && formik.errors.value && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.value}</div>
+                  <div className="text-red-500 mt-1">{formik.errors.value}</div>
                 )}
               </div>
             </div>
@@ -320,7 +320,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
             {/* Date Picker */}
             <div className="w-full flex items-end">
               <div>
-                <label className="block text-sm mb-1">Expiration ({moment.tz.guess()})</label>
+                <label className="block mb-1">Expiration ({moment.tz.guess()})</label>
                 <input
                   type="datetime-local"
                   name="expires"
@@ -332,7 +332,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                   min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
                 />
                 {formik.touched.expires && formik.errors.expires && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.expires}</div>
+                  <div className="text-red-500 mt-1">{formik.errors.expires}</div>
                 )}
               </div>
 
@@ -346,7 +346,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                     onChange={formik.handleChange}
                     className="mr-2"
                   />
-                  <span className="text-sm">Secure</span>
+                  <span>Secure</span>
                 </label>
 
                 <label className="flex items-center">
@@ -357,7 +357,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
                     onChange={formik.handleChange}
                     className="mr-2"
                   />
-                  <span className="text-sm">HTTP Only</span>
+                  <span>HTTP Only</span>
                 </label>
               </div>
             </div>
diff --git a/packages/bruno-app/src/components/Cookies/StyledWrapper.js b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
index 5e3cdd125..7ccc622fe 100644
--- a/packages/bruno-app/src/components/Cookies/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
   }
diff --git a/packages/bruno-app/src/components/Cookies/index.js b/packages/bruno-app/src/components/Cookies/index.js
index 2afa3d37d..b00bd5a48 100644
--- a/packages/bruno-app/src/components/Cookies/index.js
+++ b/packages/bruno-app/src/components/Cookies/index.js
@@ -14,7 +14,7 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
   <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
     <div className="flex items-center font-normal">
       <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+      <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
     </div>
     <div className="font-normal mt-4">
       Are you sure you want to clear all cookies for the domain {domain}?
@@ -39,7 +39,7 @@ const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
   <Modal onClose={onClose} handleCancel={onClose} title="Delete Cookie" hideFooter={true}>
     <div className="flex items-center font-normal">
       <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+      <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
     </div>
     <div className="font-normal mt-4">
       Are you sure you want to delete the cookie {cookieName}?
@@ -157,7 +157,7 @@ const CollectionProperties = ({ onClose }) => {
             // No cookies found
             <div className="flex items-center justify-center flex-col">
               <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
-              <h2 className="text-lg font-semibold mt-4">No cookies found</h2>
+              <h2 className="text-lg font-medium mt-4">No cookies found</h2>
               <p className="text-gray-500 mt-2">Add cookies to get started</p>
               <button
                 type="submit"
@@ -175,7 +175,7 @@ const CollectionProperties = ({ onClose }) => {
             // No search results
             <div className="flex items-center justify-center flex-col">
               <IconSearch size={48} />
-              <h2 className="text-lg font-semibold mt-4">No search results</h2>
+              <h2 className="text-lg font-medium mt-4">No search results</h2>
               <p className="text-gray-500 mt-2">Try a different search term</p>
             </div>
           ) : (
@@ -219,13 +219,13 @@ const CollectionProperties = ({ onClose }) => {
                         <table className="w-full">
                           <thead>
                             <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
-                              <th className="py-2 px-4 font-semibold w-32">Name</th>
-                              <th className="py-2 px-4 font-semibold w-52">Value</th>
-                              <th className="py-2 px-4 font-semibold">Path</th>
-                              <th className="py-2 px-4 font-semibold">Expires</th>
-                              <th className="py-2 px-4 font-semibold text-center">Secure</th>
-                              <th className="py-2 px-4 font-semibold text-center">HTTP Only</th>
-                              <th className="py-2 px-4 font-semibold text-right w-24">Actions</th>
+                              <th className="py-2 px-4 font-medium w-32">Name</th>
+                              <th className="py-2 px-4 font-medium w-52">Value</th>
+                              <th className="py-2 px-4 font-medium">Path</th>
+                              <th className="py-2 px-4 font-medium">Expires</th>
+                              <th className="py-2 px-4 font-medium text-center">Secure</th>
+                              <th className="py-2 px-4 font-medium text-center">HTTP Only</th>
+                              <th className="py-2 px-4 font-medium text-right w-24">Actions</th>
                             </tr>
                           </thead>
                           <tbody>
diff --git a/packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js b/packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js
index a9c71b8c2..e8e95b070 100644
--- a/packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js
@@ -22,12 +22,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
 
     .error-count {
       color: ${(props) => props.theme.console.countColor};
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       font-weight: 400;
     }
   }
@@ -73,12 +73,12 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.font.size.base};
       font-weight: 500;
     }
 
     span {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       opacity: 0.7;
     }
   }
@@ -98,8 +98,8 @@ const StyledWrapper = styled.div`
     padding: 8px 16px;
     background: ${(props) => props.theme.console.headerBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 11px;
-    font-weight: 600;
+    font-size: ${(props) => props.theme.font.size.xs};
+    font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -121,7 +121,7 @@ const StyledWrapper = styled.div`
     border-bottom: 1px solid ${(props) => props.theme.console.border};
     cursor: pointer;
     transition: background-color 0.1s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     align-items: center;
 
     &:hover {
@@ -149,13 +149,13 @@ const StyledWrapper = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
   }
 
   .error-time {
     color: ${(props) => props.theme.console.timestampColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     text-align: right;
   }
 `;
diff --git a/packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/StyledWrapper.js b/packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/StyledWrapper.js
index 94900df8f..c7d4360ac 100644
--- a/packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/ErrorDetailsPanel/StyledWrapper.js
@@ -26,12 +26,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
 
     .error-time {
       color: ${(props) => props.theme.console.countColor};
-      font-size: 11px;
+      font-size: ${(props) => props.theme.font.size.xs};
       font-weight: 400;
     }
   }
@@ -73,7 +73,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
 
     &:hover {
@@ -111,8 +111,8 @@ const StyledWrapper = styled.div`
 
     h4 {
       margin: 0 0 12px 0;
-      font-size: 13px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
       color: ${(props) => props.theme.console.titleColor};
       text-transform: uppercase;
       letter-spacing: 0.5px;
@@ -131,15 +131,15 @@ const StyledWrapper = styled.div`
     gap: 4px;
 
     label {
-      font-size: 11px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.xs};
+      font-weight: 500;
       color: ${(props) => props.theme.console.titleColor};
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
 
     span {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       color: ${(props) => props.theme.console.messageColor};
       font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
       word-break: break-all;
@@ -167,7 +167,7 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       color: ${(props) => props.theme.console.messageColor};
       line-height: 1.4;
     }
@@ -184,7 +184,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     text-decoration: none;
     align-self: flex-start;
@@ -212,7 +212,7 @@ const StyledWrapper = styled.div`
   .arguments {
     margin: 0;
     padding: 16px;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     line-height: 1.5;
     color: ${(props) => props.theme.console.messageColor};
     background: transparent;
diff --git a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
index 2fc45bafe..eb2fe4549 100644
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
@@ -22,12 +22,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
 
     .request-count {
       color: ${(props) => props.theme.console.countColor};
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       font-weight: 400;
     }
   }
@@ -59,12 +59,12 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.font.size.base};
       font-weight: 500;
     }
 
     span {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       opacity: 0.7;
     }
   }
@@ -84,8 +84,8 @@ const StyledWrapper = styled.div`
     padding: 8px 16px;
     background: ${(props) => props.theme.console.headerBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 11px;
-    font-weight: 600;
+    font-size: ${(props) => props.theme.font.size.xs};
+    font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -107,7 +107,7 @@ const StyledWrapper = styled.div`
     border-bottom: 1px solid ${(props) => props.theme.console.border};
     cursor: pointer;
     transition: background-color 0.1s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     align-items: center;
 
     &:hover {
@@ -127,7 +127,7 @@ const StyledWrapper = styled.div`
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 10px;
-    font-weight: 600;
+    font-weight: 500;
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -135,8 +135,8 @@ const StyledWrapper = styled.div`
   }
 
   .status-badge {
-    font-weight: 600;
-    font-size: 12px;
+    font-weight: 500;
+    font-size: ${(props) => props.theme.font.size.sm};
   }
 
   .request-domain {
@@ -158,20 +158,20 @@ const StyledWrapper = styled.div`
   .request-time {
     color: ${(props) => props.theme.console.timestampColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
   }
 
   .request-duration {
     color: ${(props) => props.theme.console.messageColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     text-align: right;
   }
 
   .request-size {
     color: ${(props) => props.theme.console.messageColor};
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     text-align: right;
   }
 
@@ -190,7 +190,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
 
     &:hover {
       background: ${(props) => props.theme.console.buttonHoverBg};
@@ -225,7 +225,7 @@ const StyledWrapper = styled.div`
     padding: 8px 12px;
     background: ${(props) => props.theme.console.dropdownHeaderBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
   }
@@ -235,7 +235,7 @@ const StyledWrapper = styled.div`
     border: none;
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     font-weight: 500;
     padding: 2px 4px;
     border-radius: 2px;
@@ -278,13 +278,13 @@ const StyledWrapper = styled.div`
 
   .filter-option-label {
     color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 400;
   }
 
   .filter-option-count {
     color: ${(props) => props.theme.console.optionCountColor};
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     font-weight: 400;
     margin-left: auto;
   }
diff --git a/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js b/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
index 3cc9ba03d..d750a3248 100644
--- a/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
@@ -26,12 +26,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
 
     .request-time {
       color: ${(props) => props.theme.console.countColor};
-      font-size: 11px;
+      font-size: ${(props) => props.theme.font.size.xs};
       font-weight: 400;
     }
   }
@@ -73,7 +73,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
 
     &:hover {
@@ -111,8 +111,8 @@ const StyledWrapper = styled.div`
 
     h4 {
       margin: 0;
-      font-size: 13px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
       color: ${(props) => props.theme.console.titleColor};
       padding-bottom: 4px;
       border-bottom: 1px solid ${(props) => props.theme.console.border};
@@ -131,15 +131,15 @@ const StyledWrapper = styled.div`
     gap: 2px;
 
     .label {
-      font-size: 11px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.xs};
+      font-weight: 500;
       color: ${(props) => props.theme.console.countColor};
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
 
     .value {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       color: ${(props) => props.theme.console.messageColor};
       font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
       word-break: break-all;
@@ -160,7 +160,7 @@ const StyledWrapper = styled.div`
     table {
       width: 100%;
       border-collapse: collapse;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       background: ${(props) => props.theme.console.headerBg};
 
       thead {
@@ -171,10 +171,10 @@ const StyledWrapper = styled.div`
         
         td {
           padding: 8px 12px;
-          font-weight: 600;
+          font-weight: 500;
           color: ${(props) => props.theme.console.titleColor};
           text-transform: uppercase;
-          font-size: 11px;
+          font-size: ${(props) => props.theme.font.size.xs};
           letter-spacing: 0.5px;
           border-bottom: 1px solid ${(props) => props.theme.console.border};
         }
@@ -209,7 +209,7 @@ const StyledWrapper = styled.div`
   .header-name,
   .timeline-phase {
     color: ${(props) => props.theme.console.countColor};
-    font-weight: 600;
+    font-weight: 500;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
     min-width: 120px;
   }
@@ -234,7 +234,7 @@ const StyledWrapper = styled.div`
     border-radius: 4px;
     padding: 12px;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     line-height: 1.4;
     color: ${(props) => props.theme.console.messageColor};
     overflow: auto;
@@ -249,7 +249,7 @@ const StyledWrapper = styled.div`
     text-align: center;
     color: ${(props) => props.theme.console.emptyColor};
     font-style: italic;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     background: ${(props) => props.theme.console.headerBg};
     border: 1px solid ${(props) => props.theme.console.border};
     border-radius: 4px;
@@ -285,7 +285,7 @@ const StyledWrapper = styled.div`
       
       > div {
         color: ${(props) => props.theme.console.buttonColor};
-        font-size: 12px !important;
+        font-size: ${(props) => props.theme.font.size.sm} !important;
         padding: 6px 12px !important;
         border-radius: 4px;
         transition: all 0.2s ease;
@@ -336,7 +336,7 @@ const StyledWrapper = styled.div`
       
       pre {
         color: ${(props) => props.theme.console.messageColor} !important;
-        font-size: 11px !important;
+        font-size: ${(props) => props.theme.font.size.xs} !important;
         line-height: 1.4 !important;
         padding: 12px !important;
       }
diff --git a/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js b/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js
index 117d176e6..cfbf6e22b 100644
--- a/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js
@@ -37,7 +37,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     border-radius: 4px 4px 0 0;
 
@@ -89,12 +89,12 @@ const StyledWrapper = styled.div`
     align-items: center;
     gap: 8px;
     color: ${(props) => props.theme.console.titleColor};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
 
     .log-count {
       color: ${(props) => props.theme.console.countColor};
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       font-weight: 400;
     }
   }
@@ -194,7 +194,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
     transition: all 0.2s ease;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
 
     &:hover {
       background: ${(props) => props.theme.console.buttonHoverBg};
@@ -235,7 +235,7 @@ const StyledWrapper = styled.div`
     padding: 8px 12px;
     background: ${(props) => props.theme.console.dropdownHeaderBg};
     border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
   }
@@ -245,7 +245,7 @@ const StyledWrapper = styled.div`
     border: none;
     color: ${(props) => props.theme.console.buttonColor};
     cursor: pointer;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     font-weight: 500;
     padding: 2px 4px;
     border-radius: 2px;
@@ -288,13 +288,13 @@ const StyledWrapper = styled.div`
 
   .filter-option-label {
     color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 400;
   }
 
   .filter-option-count {
     color: ${(props) => props.theme.console.optionCountColor};
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     font-weight: 400;
     margin-left: auto;
   }
@@ -312,12 +312,12 @@ const StyledWrapper = styled.div`
 
     p {
       margin: 0;
-      font-size: 14px;
+      font-size: ${(props) => props.theme.font.size.base};
       font-weight: 500;
     }
 
     span {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       opacity: 0.7;
     }
   }
@@ -333,7 +333,7 @@ const StyledWrapper = styled.div`
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 10px;
-    font-weight: 600;
+    font-weight: 500;
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -346,7 +346,7 @@ const StyledWrapper = styled.div`
     gap: 12px;
     padding: 4px 16px;
     font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     line-height: 1.4;
     border-left: 2px solid transparent;
     transition: background-color 0.1s ease;
@@ -431,13 +431,13 @@ const StyledWrapper = styled.div`
 
   .log-timestamp {
     color: ${(props) => props.theme.console.timestampColor};
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     font-weight: 400;
   }
 
   .log-level {
     font-size: 9px;
-    font-weight: 600;
+    font-weight: 500;
     padding: 2px 4px;
     border-radius: 2px;
     text-transform: uppercase;
@@ -465,7 +465,7 @@ const StyledWrapper = styled.div`
         background: transparent !important;
         
         .object-key-val {
-          font-size: 12px !important;
+          font-size: ${(props) => props.theme.font.size.sm} !important;
         }
         
         .object-key {
diff --git a/packages/bruno-app/src/components/Devtools/Console/index.js b/packages/bruno-app/src/components/Devtools/Console/index.js
index 72bdf3487..669fbf925 100644
--- a/packages/bruno-app/src/components/Devtools/Console/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/index.js
@@ -84,7 +84,7 @@ const LogMessage = ({ message, args }) => {
                 name={false}
                 style={{
                   backgroundColor: 'transparent',
-                  fontSize: '12px',
+                  fontSize: '${(props) => props.theme.font.size.sm}',
                   fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
                 }}
               />
diff --git a/packages/bruno-app/src/components/Devtools/Performance/StyledWrapper.js b/packages/bruno-app/src/components/Devtools/Performance/StyledWrapper.js
index 7f6cb79a8..ea6c00caf 100644
--- a/packages/bruno-app/src/components/Devtools/Performance/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Performance/StyledWrapper.js
@@ -35,13 +35,13 @@ const StyledWrapper = styled.div`
     h3 {
       margin: 0 0 4px 0;
       font-size: 16px;
-      font-weight: 600;
+      font-weight: 500;
       color: ${(props) => props.theme.console.titleColor};
     }
 
     p {
       margin: 0;
-      font-size: 13px;
+      font-size: ${(props) => props.theme.font.size.base};
       color: ${(props) => props.theme.console.textMuted};
     }
   }
@@ -51,8 +51,8 @@ const StyledWrapper = styled.div`
 
     h2 {
       margin: 0 0 8px 0;
-      font-size: 14px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
       color: ${(props) => props.theme.console.titleColor};
     }
   }
@@ -80,19 +80,19 @@ const StyledWrapper = styled.div`
   }
 
   .resource-title {
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
   }
 
   .resource-value {
     font-size: 18px;
-    font-weight: 600;
+    font-weight: 500;
     color: ${(props) => props.theme.console.titleColor};
     margin-bottom: 2px;
   }
 
   .resource-subtitle {
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     color: ${(props) => props.theme.console.buttonColor};
   }
 
@@ -100,7 +100,7 @@ const StyledWrapper = styled.div`
     display: flex;
     align-items: center;
     gap: 4px;
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     margin-top: 8px;
 
     &.up {
diff --git a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
index 3da7f2d34..cb97c16ae 100644
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
 
   .tippy-box {
     min-width: 135px;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     color: ${(props) => props.theme.dropdown.color};
     background-color: ${(props) => props.theme.dropdown.bg};
     box-shadow: ${(props) => props.theme.dropdown.shadow};
diff --git a/packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js b/packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js
index fab282b64..58f197b1c 100644
--- a/packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js
+++ b/packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js
@@ -146,7 +146,7 @@ const ExportEnvironmentModal = ({ onClose, environments = [], environmentType })
               {environments && environments.length > 0 ? (
                 <div className="flex flex-col h-full">
                   <div className="flex justify-between items-center mb-2 pb-1">
-                    <h3 className="font-semibold text-sm text-theme">
+                    <h3 className="font-medium text-theme">
                       {environmentType === 'global' ? 'Global Environments' : 'Collection Environments'}
                     </h3>
                     <button
@@ -175,7 +175,7 @@ const ExportEnvironmentModal = ({ onClose, environments = [], environmentType })
               ) : (
                 <div className="flex flex-col h-full">
                   <div className="flex justify-between items-center mb-2 pb-1">
-                    <h3 className="font-semibold text-sm text-theme">
+                    <h3 className="font-medium text-theme">
                       {environmentType === 'global' ? 'Global Environments' : 'Collection Environments'}
                     </h3>
                   </div>
@@ -191,7 +191,7 @@ const ExportEnvironmentModal = ({ onClose, environments = [], environmentType })
             {/* Export Format Section */}
             {selectedCount > 0 && (
               <div className="mb-4">
-                <label className="block text-sm font-medium mb-2 text-theme">
+                <label className="block font-medium mb-2 text-theme">
                   Export Format
                 </label>
                 <div className="space-y-2">
@@ -207,7 +207,7 @@ const ExportEnvironmentModal = ({ onClose, environments = [], environmentType })
                         className={`mt-0.5 mr-3 w-4 h-4 ${option.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                       />
                       <div>
-                        <div className={`text-sm font-medium ${option.disabled ? 'text-muted' : 'text-theme'}`}>{option.label}</div>
+                        <div className={`font-medium ${option.disabled ? 'text-muted' : 'text-theme'}`}>{option.label}</div>
                         <div className="text-xs text-muted">{option.description}</div>
                       </div>
                     </label>
@@ -218,7 +218,7 @@ const ExportEnvironmentModal = ({ onClose, environments = [], environmentType })
 
             {/* Location Input Section */}
             <div className="mb-4">
-              <label htmlFor="export-location" className="block text-sm font-medium mb-2 text-theme">
+              <label htmlFor="export-location" className="block font-medium mb-2 text-theme">
                 Location
               </label>
               <div className="flex flex-col relative items-center">
diff --git a/packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js b/packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js
index 5617dd435..b14f536a7 100644
--- a/packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js
+++ b/packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/index.js
@@ -150,7 +150,7 @@ const ImportEnvironmentModal = ({ type = 'collection', collection, onClose, onEn
             data-testid={importTestId}
           >
             <IconFileImport size={64} />
-            <span className="mt-2 block text-sm font-semibold">
+            <span className="mt-2 block font-medium">
               {isDragOver ? 'Drop your environment files here' : 'Import your environments'}
             </span>
             <span className="mt-1 block text-xs text-muted">
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index 3f8fa7490..34dc6e914 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -22,7 +22,7 @@ const Wrapper = styled.div`
 
     .env-text {
       color: ${(props) => props.theme.dropdown.selectedColor};
-      font-size: 0.875rem;
+      font-size: ${(props) => props.theme.font.size.base};
       display: block;
     }
 
@@ -34,7 +34,7 @@ const Wrapper = styled.div`
 
     .env-text-inactive {
       color: ${(props) => props.theme.dropdown.color};
-      font-size: 0.875rem;
+      font-size: ${(props) => props.theme.font.size.base};
       opacity: 0.7;
     }
 
@@ -51,7 +51,7 @@ const Wrapper = styled.div`
     max-width: 650px !important;
     min-height: 15.5rem;
     max-height: 75vh;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     position: relative;
     overflow: hidden;
   }
@@ -67,7 +67,7 @@ const Wrapper = styled.div`
       align-items: center;
       padding: 0.35rem 0.6rem;
       cursor: pointer;
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       color: ${(props) => props.theme.dropdown.primaryText};
 
       &:hover:not(:disabled) {
@@ -111,7 +111,7 @@ const Wrapper = styled.div`
 
   .tab-button {
     color: var(--color-tab-inactive);
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
 
     .tab-content-wrapper {
       position: relative;
@@ -163,7 +163,7 @@ const Wrapper = styled.div`
     h3 {
       color: ${(props) => props.theme.dropdown.primaryText};
       font-size: 1rem;
-      font-weight: 600;
+      font-weight: 500;
       margin-bottom: 0.5rem;
       line-height: 1.4;
     }
@@ -171,7 +171,7 @@ const Wrapper = styled.div`
     p {
       color: ${(props) => props.theme.dropdown.primaryText};
       opacity: 0.75;
-      font-size: 0.6875rem;
+      font-size: ${(props) => props.theme.font.size.xs};
       line-height: 1.5;
       margin-bottom: 1rem;
       max-width: 11.875rem;
@@ -192,7 +192,7 @@ const Wrapper = styled.div`
       border-radius: 0.375rem;
       width: 100%;
       margin-bottom: 0.5rem;
-      font-size: 0.75rem;
+      font-size: ${(props) => props.theme.font.size.sm};
       font-weight: 500;
       display: flex;
       align-items: center;
@@ -216,7 +216,7 @@ const Wrapper = styled.div`
     justify-content: center;
     padding: 2rem 1rem;
     color: ${(props) => props.theme.dropdown.primaryText};
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 1.5;
     text-align: center;
     opacity: 0.75;
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CopyEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CopyEnvironment/index.js
index 586f874bb..9602293e2 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CopyEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CopyEnvironment/index.js
@@ -46,7 +46,7 @@ const CopyEnvironment = ({ collection, environment, onClose }) => {
       <Modal size="sm" title={'Copy Environment'} confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
         <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-semibold">
+            <label htmlFor="name" className="block font-medium">
               New Environment Name
             </label>
             <input
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
index 3b86f599d..91bc1fac2 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -67,7 +67,7 @@ const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
       >
         <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-semibold">
+            <label htmlFor="name" className="block font-medium">
               Environment Name
             </label>
             <div className="flex items-center mt-2">
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
index 8ca6fc41d..f9e03afb9 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -27,7 +27,7 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
           handleConfirm={onConfirm}
           handleCancel={onClose}
         >
-          Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
+          Are you sure you want to delete <span className="font-medium">{environment.name}</span> ?
         </Modal>
       </StyledWrapper>
     </Portal>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
index 715bf9e75..6a587b4fc 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
@@ -22,7 +22,7 @@ const ConfirmSwitchEnv = ({ onCancel }) => {
     >
       <div className="flex items-center font-normal">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
 
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
index 5f4e34d8f..751e56dd7 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -27,7 +27,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     thead td {
@@ -36,11 +36,11 @@ const Wrapper = styled.div`
   }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .tooltip-mod {
-    font-size: 11px !important;
+    font-size: ${(props) => props.theme.font.size.xs} !important;
     width: 150px !important;
   }
 
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
index 72418f693..d1033f511 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -29,7 +29,7 @@ const EnvironmentDetails = ({ environment, collection, setIsModified, onClose })
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
-          <span className="ml-1 font-semibold break-all">{environment.name}</span>
+          <span className="ml-1 font-medium break-all">{environment.name}</span>
         </div>
         <div className="flex gap-x-2 pl-2">
           <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
index fee403d8a..408257b49 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
@@ -60,7 +60,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
       >
         <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-semibold">
+            <label htmlFor="name" className="block font-medium">
               Environment Name
             </label>
             <input
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
index 419db7c41..8690f7053 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -12,7 +12,7 @@ export const SharedButton = ({ children, className, onClick }) => {
     <button
       type="button"
       onClick={onClick}
-      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-semibold text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
+      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-medium text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
         ${className}`}
     >
       {children}
@@ -24,7 +24,7 @@ const DefaultTab = ({ setTab }) => {
   return (
     <div className="text-center items-center flex flex-col">
       <IconFileAlert size={64} strokeWidth={1} />
-      <span className="font-semibold mt-2">No environments found</span>
+      <span className="font-medium mt-2">No environments found</span>
       <span className="font-extralight mt-2 text-zinc-500 dark:text-zinc-400">
         Get started by using the following buttons :
       </span>
diff --git a/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js
index ba243d42b..336948add 100644
--- a/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .single-line-editor-wrapper {
     max-width: 400px;
diff --git a/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
index 2a42257eb..f705fbb06 100644
--- a/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
@@ -5,7 +5,7 @@ const StyledWrapper = styled.div`
     border: 1px solid ${({ theme }) => theme.colors.border};
     padding: 4px 8px;
     border-radius: 4px;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .auth-mode-label {
diff --git a/packages/bruno-app/src/components/FolderSettings/Headers/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Headers/StyledWrapper.js
index 9f723cb81..ccb53cb5f 100644
--- a/packages/bruno-app/src/components/FolderSettings/Headers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Headers/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -31,7 +31,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-header {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/StyledWrapper.js
index efacc8288..a44141c79 100644
--- a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -31,7 +31,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-var {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CopyEnvironment/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CopyEnvironment/index.js
index ed9ea40b0..550f31739 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CopyEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CopyEnvironment/index.js
@@ -49,7 +49,7 @@ const CopyEnvironment = ({ environment, onClose }) => {
       <Modal size="sm" title={'Copy Global Environment'} confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
         <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-semibold">
+            <label htmlFor="name" className="block font-medium">
               New Environment Name
             </label>
             <input
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
index 68d7a8b44..6a1c865cc 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
@@ -69,7 +69,7 @@ const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
       >
         <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-semibold">
+            <label htmlFor="name" className="block font-medium">
               Environment Name
             </label>
             <div className="flex items-center mt-2">
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/index.js
index 2edab3be8..4132d632b 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -27,7 +27,7 @@ const DeleteEnvironment = ({ onClose, environment }) => {
           handleConfirm={onConfirm}
           handleCancel={onClose}
         >
-          Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
+          Are you sure you want to delete <span className="font-medium">{environment.name}</span> ?
         </Modal>
       </StyledWrapper>
     </Portal>
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
index 715bf9e75..6a587b4fc 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
@@ -22,7 +22,7 @@ const ConfirmSwitchEnv = ({ onCancel }) => {
     >
       <div className="flex items-center font-normal">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
 
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
index 5f4e34d8f..751e56dd7 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -27,7 +27,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     thead td {
@@ -36,11 +36,11 @@ const Wrapper = styled.div`
   }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .tooltip-mod {
-    font-size: 11px !important;
+    font-size: ${(props) => props.theme.font.size.xs} !important;
     width: 150px !important;
   }
 
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
index 3cabf04c2..d88cb9c65 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -28,7 +28,7 @@ const EnvironmentDetails = ({ environment, setIsModified, collection, allEnviron
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
-          <span className="ml-1 font-semibold break-all">{environment.name}</span>
+          <span className="ml-1 font-medium break-all">{environment.name}</span>
         </div>
         <div className="flex gap-x-2 pl-2">
           <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js
index 581abd27c..d96f0665e 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js
@@ -63,7 +63,7 @@ const RenameEnvironment = ({ onClose, environment }) => {
       >
         <form className="bruno-form" onSubmit={e => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-semibold">
+            <label htmlFor="name" className="block font-medium">
               Environment Name
             </label>
             <input
diff --git a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
index c49cacbf5..37eace0a9 100644
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
@@ -12,7 +12,7 @@ export const SharedButton = ({ children, className, onClick }) => {
     <button
       type="button"
       onClick={onClick}
-      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-semibold text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
+      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-medium text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
         ${className}`}
     >
       {children}
@@ -24,7 +24,7 @@ const DefaultTab = ({ setTab }) => {
   return (
     <div className="text-center items-center flex flex-col">
       <IconFileAlert size={64} strokeWidth={1} />
-      <span className="font-semibold mt-2">No Global Environments found</span>
+      <span className="font-medium mt-2">No Global Environments found</span>
       <div className="flex items-center justify-center mt-6">
         <SharedButton onClick={() => setTab('create')}>
           <span>Create Global Environment</span>
diff --git a/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js b/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js
index 0900e1502..620b6cc94 100644
--- a/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js
@@ -102,7 +102,7 @@ const StyledWrapper = styled.div`
     border: none;
     outline: none;
     color: ${(props) => props.theme.text};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     width: 100%;
     padding: 0;
     &::placeholder {
@@ -179,7 +179,7 @@ const StyledWrapper = styled.div`
     flex-shrink: 0;
   }
   .result-name {
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
     margin-bottom: 3px;
     white-space: nowrap;
     overflow: hidden;
@@ -188,7 +188,7 @@ const StyledWrapper = styled.div`
     letter-spacing: 0.2px;
   }
   .result-path {
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.muted};
     white-space: nowrap;
     overflow: hidden;
@@ -196,7 +196,7 @@ const StyledWrapper = styled.div`
     letter-spacing: 0.1px;
   }
   .method-badge {
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     font-weight: 500;
     padding: 3px 8px;
     border-radius: 4px;
@@ -236,27 +236,27 @@ const StyledWrapper = styled.div`
     &.unary {
       color: #27ae60;
       background: rgba(39, 174, 96, 0.12);
-      font-weight: 600;
+      font-weight: 500;
     }
     &.client-streaming {
       color: #2980b9;
       background: rgba(41, 128, 185, 0.12);
-      font-weight: 600;
+      font-weight: 500;
     }
     &.server-streaming {
       color: #f39c12;
       background: rgba(243, 156, 18, 0.12);
-      font-weight: 600;
+      font-weight: 500;
     }
     &.bidirectional-streaming,
     &.bidi-streaming {
       color: #8e44ad;
       background: rgba(142, 68, 173, 0.12);
-      font-weight: 600;
+      font-weight: 500;
     }
   }
   .result-type {
-    font-size: 11px;
+    font-size: ${(props) => props.theme.font.size.xs};
     color: ${(props) => props.theme.colors.text.muted};
     padding: 2px 6px;
     border-radius: 3px;
@@ -272,7 +272,7 @@ const StyledWrapper = styled.div`
       opacity: 0.8;
     }
     .result-path {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       color: ${(props) => props.theme.colors.text.muted};
       white-space: nowrap;
       overflow: hidden;
@@ -289,7 +289,7 @@ const StyledWrapper = styled.div`
     padding: 24px 16px;
     text-align: center;
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 13px;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .command-k-footer {
     padding: 8px 12px;
@@ -301,7 +301,7 @@ const StyledWrapper = styled.div`
     justify-content: center;
     gap: 24px;
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     letter-spacing: 0.2px;
     span {
       display: flex;
@@ -323,7 +323,7 @@ const StyledWrapper = styled.div`
         border-radius: 4px;
         background: ${(props) =>
           props.theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
-        font-size: 11px;
+        font-size: ${(props) => props.theme.font.size.xs};
         font-weight: 500;
         font-family: inherit;
         line-height: 1;
diff --git a/packages/bruno-app/src/components/Help/StyledWrapper.js b/packages/bruno-app/src/components/Help/StyledWrapper.js
index f4a69fe40..952e26744 100644
--- a/packages/bruno-app/src/components/Help/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Help/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   font-weight: 400;
-  font-size: 0.75rem;
+  font-size: ${(props) => props.theme.font.size.sm};
   background-color: ${props => props.theme.infoTip.bg};
   border: 1px solid ${props => props.theme.infoTip.border};
   box-shadow: ${props => props.theme.infoTip.boxShadow};
diff --git a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
index 08467632d..6e51bfa81 100644
--- a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
@@ -9,36 +9,36 @@ const StyledMarkdownBodyWrapper = styled.div`
     box-sizing: border-box;
     height: 100%;
     margin: 0 auto;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
 
     h1 {
       margin: 0.67em 0;
       font-weight: var(--base-text-weight-semibold, 600);
       padding-bottom: 0.3em;
-      font-size: 1.3em;
+      font-size: 1.4em;
       border-bottom: 1px solid var(--color-border-muted);
     }
 
     h2 {
       font-weight: var(--base-text-weight-semibold, 600);
       padding-bottom: 0.3em;
-      font-size: 1.2em;
+      font-size: 1.3em;
       border-bottom: 1px solid var(--color-border-muted);
     }
 
     h3 {
       font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 1.1em;
+      font-size: 1.2em;
     }
 
     h4 {
       font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 1em;
+      font-size: 1.1em;
     }
 
     h5 {
       font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 0.95em;
+      font-size: 1em;
     }
 
     h6 {
diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js
index f26d811f5..7f157dd74 100644
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -71,9 +71,9 @@ const Wrapper = styled.div`
     text-transform: uppercase;
     color: ${(props) => props.theme.modal.title.color};
     background-color: ${(props) => props.theme.modal.title.bg};
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     padding: 12px;
-    font-weight: 600;
+    font-weight: 500;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 
diff --git a/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
index fe532a6c1..cb50c6612 100644
--- a/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
@@ -23,7 +23,7 @@ const StyledWrapper = styled.div`
   .CodeMirror {
     background: transparent;
     height: fit-content;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 30px;
     display: flex;
     flex-direction: column;
diff --git a/packages/bruno-app/src/components/Notifications/StyleWrapper.js b/packages/bruno-app/src/components/Notifications/StyleWrapper.js
index 4a52fb7de..ba42b5892 100644
--- a/packages/bruno-app/src/components/Notifications/StyleWrapper.js
+++ b/packages/bruno-app/src/components/Notifications/StyleWrapper.js
@@ -59,7 +59,7 @@ const StyledWrapper = styled.div`
       }
 
       .notification-date {
-        font-size: 0.6875rem;
+        font-size: ${(props) => props.theme.font.size.xs};
       }
     }
   }
diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js
index 951cb5f6e..03aeadd27 100644
--- a/packages/bruno-app/src/components/Notifications/index.js
+++ b/packages/bruno-app/src/components/Notifications/index.js
@@ -140,7 +140,7 @@ const Notifications = () => {
         >
           <div className="notifications-modal">
             {notifications?.length > 0 ? (
-              <div className="grid grid-cols-4 flex flex-row text-sm">
+                <div className="grid grid-cols-4 flex flex-row">
                 <div className="col-span-1 flex flex-col">
                   <ul
                     className="notifications w-full flex flex-col h-[50vh] max-h-[50vh] overflow-y-auto"
diff --git a/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js b/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js
index 326e9f8da..20d570437 100644
--- a/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js
+++ b/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.requestTabPanel.url.bg};
     border-radius: 4px;
     padding: 8px 12px;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     border: 1px solid rgba(0, 0, 0, 0.08);
     
     .icon-column {
diff --git a/packages/bruno-app/src/components/Preferences/Beta/index.js b/packages/bruno-app/src/components/Preferences/Beta/index.js
index 4092216d9..264bc2715 100644
--- a/packages/bruno-app/src/components/Preferences/Beta/index.js
+++ b/packages/bruno-app/src/components/Preferences/Beta/index.js
@@ -76,9 +76,9 @@ const Beta = ({ close }) => {
         <div className="mb-6">
           <div className="flex items-center mb-2">
             <IconFlask size={20} className="mr-2 text-orange-500" />
-            <h2 className="text-lg font-semibold">Beta Features</h2>
+            <h2 className="text-lg font-medium">Beta Features</h2>
           </div>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 text-wrap">
+          <p className="text-gray-500 dark:text-gray-400 mb-4 text-wrap">
             Beta features are experimental previews that may change before full release. Try them and share feedback.
           </p>
         </div>
diff --git a/packages/bruno-app/src/components/Preferences/Display/Font/index.js b/packages/bruno-app/src/components/Preferences/Display/Font/index.js
index e6bbf9c3f..ac9cef5f0 100644
--- a/packages/bruno-app/src/components/Preferences/Display/Font/index.js
+++ b/packages/bruno-app/src/components/Preferences/Display/Font/index.js
@@ -10,7 +10,7 @@ const Font = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
 
   const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default'));
-  const [codeFontSize, setCodeFontSize] = useState(get(preferences, 'font.codeFontSize', '14'));
+  const [codeFontSize, setCodeFontSize] = useState(get(preferences, 'font.codeFontSize', '13'));
 
   const handleCodeFontChange = (event) => {
     setCodeFont(event.target.value);
diff --git a/packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js
index 1a1fe7f01..d9741dce5 100644
--- a/packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js
@@ -12,16 +12,17 @@ const StyledWrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 1rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
 
     td {
       padding: 4px 8px;
+      font-size: ${(props) => props.theme.font.size.sm};
     }
 
     thead th {
-      font-weight: 600;
+      font-weight: 500;
       padding: 10px;
       text-align: left;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
index efb860893..1b86ef66a 100644
--- a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -27,7 +27,7 @@ const Wrapper = styled.div`
     }
 
   .btn-add-assertion {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
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 3ef007f81..08185d048 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
index cdbdf8424..9cf2c5fa4 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .auth-mode-selector {
     background: transparent;
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
index 712367fd7..814b48ad7 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
@@ -5,7 +5,7 @@ const StyledWrapper = styled.div`
     .tab {
       cursor: pointer;
       padding: 4px 8px !important;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       border-radius: 4px;
       
       &:hover {
@@ -15,7 +15,6 @@ const StyledWrapper = styled.div`
       &.active {
         background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(99, 102, 241, 0.1)'};
         color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
-        font-weight: 500;
       }
     }
   }
@@ -23,7 +22,7 @@ const StyledWrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -33,7 +32,7 @@ const StyledWrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
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 93b519464..f14bb73d7 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
@@ -170,7 +170,7 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection, handleS
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Additional Parameters
         </span>
       </div>
@@ -279,7 +279,7 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection, handleS
         onClick={addButtonDisabled ? null : handleAddNewAdditionalParam}
       >
         <IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
-        <span className="ml-1 text-sm text-gray-500">Add Parameter</span>
+        <span className="ml-1 text-gray-500">Add Parameter</span>
       </div>
     </StyledWrapper>
   )
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 b06deaedf..a162decf9 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .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 7c890513e..b82de8107 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
@@ -129,7 +129,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">
+        <span className="font-medium">
           Configuration
         </span>
       </div>
@@ -195,7 +195,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
         </span>
       </div>
@@ -272,7 +272,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
         </span>
       </div>
@@ -295,7 +295,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">Settings</span>
+        <span className="font-medium">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}
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 b06deaedf..a162decf9 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .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 253adeac0..a0aca39fe 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
@@ -95,7 +95,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">
+        <span className="font-medium">
           Configuration
         </span>
       </div>
@@ -152,7 +152,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
         </span>
       </div>
@@ -229,7 +229,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
         </span>
       </div>
@@ -252,7 +252,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">Settings</span>
+        <span className="font-medium">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
index bb42bdb49..5807de3c2 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .grant-type-mode-selector {
     padding: 0.5rem 0px;
@@ -47,7 +47,7 @@ const Wrapper = styled.div`
     fill: rgb(140 140 140);
   }
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
index f89aa9579..9455bc1d5 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
@@ -77,7 +77,7 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">
+        <span className="font-medium">
           Grant Type
         </span>
       </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 273806001..bcd68a036 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .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 9715aa3ce..f7311ffa4 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
@@ -84,7 +84,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">
+        <span className="font-medium">
           Configuration
         </span>
       </div>
@@ -113,7 +113,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
         </span>
       </div>
@@ -195,7 +195,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">
+        <span className="font-medium">
           Advanced Options
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
index 7692b5891..bf7c3a89b 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
@@ -44,13 +44,13 @@ const TokenSection = ({ title, token }) => {
             <IconChevronRight size={18} className="text-gray-500" />
           }
           <div className="flex flex-row justify-between w-full">
-            <h3 className="text-sm font-medium">{title}</h3>
+            <h3 className="font-medium">{title}</h3>
             {decodedToken?.exp && <ExpiryTimer expiresIn={decodedToken?.exp} />}
           </div>
         </div>
       </div>
       {isExpanded && (
-        <div className="p-3 text-sm">
+        <div className="p-3">
           <div className="relative group">
             <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
               <button
@@ -163,7 +163,7 @@ const Oauth2TokenViewer = ({ collection, item, url, credentialsId, handleRun })
           </div>
         )     
       ) : (
-        <div className="text-sm text-gray-500 dark:text-gray-400">No token found</div>
+        <div className="text-gray-500 dark:text-gray-400">No token found</div>
       )}
     </StyledWrapper>
   );
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 b06deaedf..a162decf9 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .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 f048183e6..5b6b4abd7 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
@@ -98,7 +98,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">
+        <span className="font-medium">
           Configuration
         </span>
       </div>
@@ -155,7 +155,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Token
         </span>
       </div>
@@ -232,7 +232,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+        <span className="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
         </span>
       </div>
@@ -255,7 +255,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
           <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
         </div>
-        <span className="text-sm font-medium">Settings</span>
+        <span className="font-medium">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
index 856f35b9b..65cb5cba9 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
   .single-line-editor-wrapper {
     max-width: 400px;
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 316d3a7c5..c2901f80b 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,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .single-line-editor-wrapper {
diff --git a/packages/bruno-app/src/components/RequestPane/FileBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/FileBody/StyledWrapper.js
index 35adfcc1f..1853f1c5e 100644
--- a/packages/bruno-app/src/components/RequestPane/FileBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/FileBody/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -39,7 +39,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
index 517415935..70a8edfc4 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
     }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js
index 3b1cc6109..6faef5924 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js
@@ -40,7 +40,7 @@ const GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) =>
   });
 
   return (
-    <div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
+    <div className="flex flex-grow justify-end items-center">
       <div className="flex items-center cursor-pointer hover:underline" onClick={toggleDocs}>
         <IconBook size={18} strokeWidth={1.5} />
         <span className="ml-1">Docs</span>
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
index 499c235ac..e50a3cce5 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
@@ -159,7 +159,7 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
           {isCollapsed
             ? <IconChevronDown size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
             : <IconChevronUp size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />}
-          <span className="font-medium text-sm">{`Message ${canClientStream ? index + 1 : ''}`}</span>
+          <span className="font-medium">{`Message ${canClientStream ? index + 1 : ''}`}</span>
         </div>
         <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
           <ToolHint text="Format JSON with proper indentation and spacing" toolhintId={`prettify-msg-${index}`}>
@@ -287,7 +287,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
               className="flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors"
             >
               <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add First Message</span>
+              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add First Message</span>
             </button>
           </ToolHint>
         </div>
@@ -330,7 +330,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
               data-testid="grpc-add-message-button"
             >
               <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add Message</span>
+              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add Message</span>
             </button>
           </ToolHint>
         </div>
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js
index 18814db39..bf1c2b21a 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js
@@ -162,7 +162,7 @@ const MethodDropdown = ({
         <div ref={listRef} className="max-h-96 overflow-y-auto w-96 min-w-60" data-testid="grpc-methods-list">
           {Object.entries(groupedMethods).map(([serviceName, methods], serviceIndex) => (
             <div key={serviceIndex} className="service-group mb-2" onKeyDown={handleKeyDown} tabIndex={0}>
-              <div className="service-header px-3 py-1 bg-neutral-100 dark:bg-neutral-800 text-sm font-medium truncate sticky top-0 z-10">
+              <div className="service-header px-3 py-1 bg-neutral-100 dark:bg-neutral-800 font-medium truncate sticky top-0 z-10">
                 {serviceName || 'Default Service'}
               </div>
               <div className="service-methods">
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
index 6d23f042d..5e1983e54 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
@@ -147,7 +147,7 @@ const ProtoFileDropdown = ({
         <div className="max-h-fit overflow-y-auto w-[30rem]">
           <div className="px-3 py-2 border-b border-neutral-200 dark:border-neutral-700" data-testid="grpc-mode-toggle">
             <div className="flex items-center justify-between">
-              <span className="text-sm">Mode</span>
+              <span>Mode</span>
               <div className="flex items-center gap-2">
                 <span className={`text-xs ${!isReflectionMode ? 'font-medium' : 'text-neutral-500'}`} style={{ color: !isReflectionMode ? theme.colors.text.yellow : undefined }}>
                   Proto File
@@ -203,7 +203,7 @@ const ProtoFileDropdown = ({
 
           {isReflectionMode && (
             <div className="px-3 py-2">
-              <div className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
+              <div className="text-neutral-600 dark:text-neutral-400 mb-2">
                 Using server reflection to discover gRPC methods.
               </div>
             </div>
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.js
index f7d7afefa..f2a21a891 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ImportPathsTab/StyledWrapper.js
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
   }
 
   .header-text {
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.grpc.importPaths.header.text};
   }
 
@@ -36,7 +36,7 @@ const Wrapper = styled.div`
     padding: 0.5rem;
     background-color: ${(props) => props.theme.grpc.importPaths.error.bg};
     border-radius: 0.25rem;
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.grpc.importPaths.error.text};
   }
 
@@ -104,13 +104,13 @@ const Wrapper = styled.div`
   .item-text {
     display: flex;
     align-items: center;
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     white-space: nowrap;
   }
 
   .invalid-icon {
     color: ${(props) => props.theme.grpc.importPaths.item.invalid.text};
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     display: flex;
     align-items: center;
   }
@@ -121,7 +121,7 @@ const Wrapper = styled.div`
 
   .empty-text {
     color: ${(props) => props.theme.grpc.importPaths.empty.text};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-style: italic;
     text-align: center;
     padding: 0.5rem 0;
@@ -141,7 +141,7 @@ const Wrapper = styled.div`
     border: 1px solid ${(props) => props.theme.grpc.importPaths.button.border};
     padding: 0.5rem 1rem;
     border-radius: 0.25rem;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     cursor: pointer;
     transition: border-color 0.2s ease;
 
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ProtoFilesTab/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ProtoFilesTab/StyledWrapper.js
index 05e535f7c..f4610374c 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ProtoFilesTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/Tabs/ProtoFilesTab/StyledWrapper.js
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
   }
 
   .header-text {
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.grpc.protoFiles.header.text};
   }
 
@@ -36,7 +36,7 @@ const Wrapper = styled.div`
     padding: 0.5rem;
     background-color: ${(props) => props.theme.grpc.protoFiles.error.bg};
     border-radius: 0.25rem;
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.grpc.protoFiles.error.text};
   }
 
@@ -110,14 +110,14 @@ const Wrapper = styled.div`
   }
 
   .item-title {
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     display: flex;
     align-items: center;
     color: ${(props) => props.theme.grpc.protoFiles.item.text};
   }
 
   .item-path {
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.grpc.protoFiles.item.secondaryText};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -127,7 +127,7 @@ const Wrapper = styled.div`
 
   .invalid-icon {
     color: ${(props) => props.theme.grpc.protoFiles.item.invalid.text};
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     display: flex;
     align-items: center;
     margin-left: 0.5rem;
@@ -139,7 +139,7 @@ const Wrapper = styled.div`
 
   .empty-text {
     color: ${(props) => props.theme.grpc.protoFiles.empty.text};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-style: italic;
     text-align: center;
     padding: 0.5rem 0;
@@ -159,7 +159,7 @@ const Wrapper = styled.div`
     border: 1px solid ${(props) => props.theme.grpc.protoFiles.button.border};
     padding: 0.5rem 1rem;
     border-radius: 0.25rem;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     cursor: pointer;
     transition: border-color 0.2s ease;
 
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
index f7b6e5d13..44bf208c5 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js b/packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js
index 32583c7fe..486ab8d4a 100644
--- a/packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js
+++ b/packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js
@@ -29,7 +29,7 @@ export default function PromptVariablesModal({ title = 'Input Required', prompts
           <div className="space-y-5 mt-2">
             {prompts.map((prompt, index) => (
               <div key={prompt} data-testid="prompt-variable-input-container">
-                <label htmlFor={`prompt-${index}`} className="block font-semibold">
+                <label htmlFor={`prompt-${index}`} className="block font-medium">
                   {prompt}
                 </label>
                 <input
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
index 9a23f2f9c..618575a97 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -32,7 +32,7 @@ const Wrapper = styled.div`
   }
 
   .btn-action {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     &:hover span {
       text-decoration: underline;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
index c649f740f..f96403125 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .dropdown {
     width: 100%;
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
index 3d571b4bf..983ab3cf7 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .body-mode-selector {
     background: transparent;
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
index 86cb4e365..8a47eb68e 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
   }
 
   .btn-action {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     &:hover span {
       text-decoration: underline;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js
index c8ec78387..561a18f4e 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
     }
 
   .btn-add-var {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/RequestPane/WSSettingsPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WSSettingsPane/StyledWrapper.js
index e04c6d331..c1cd7afd1 100644
--- a/packages/bruno-app/src/components/RequestPane/WSSettingsPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WSSettingsPane/StyledWrapper.js
@@ -13,7 +13,7 @@ const StyledWrapper = styled.div`
   }
 
   .tooltip-mod {
-    font-size: 11px !important;
+    font-size: ${(props) => props.theme.font.size.xs} !important;
     width: 150px !important;
 
     & ul {
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js
index 3d571b4bf..983ab3cf7 100644
--- a/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .body-mode-selector {
     background: transparent;
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/index.js b/packages/bruno-app/src/components/RequestPane/WsBody/index.js
index 1938fe595..22bc91594 100644
--- a/packages/bruno-app/src/components/RequestPane/WsBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/index.js
@@ -62,7 +62,7 @@ const WSBody = ({ item, collection, handleRun }) => {
               className="flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors"
             >
               <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add First Message</span>
+              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add First Message</span>
             </button>
           </ToolHint>
         </div>
@@ -104,7 +104,7 @@ const WSBody = ({ item, collection, handleRun }) => {
               className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
             >
               <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add Message</span>
+              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add Message</span>
             </button>
           </ToolHint>
         </div>
diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
index ced3da6d5..7c803cf4c 100644
--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
@@ -43,10 +43,10 @@ const CollectionToolBar = ({ collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="flex items-center p-2">
+      <div className="flex items-center py-2 px-4">
         <div className="flex flex-1 items-center cursor-pointer hover:underline" onClick={viewCollectionSettings}>
           <IconFiles size={18} strokeWidth={1.5} />
-          <span className="ml-2 mr-4 font-semibold">{collection?.name}</span>
+          <span className="ml-2 mr-4 font-medium">{collection?.name}</span>
         </div>
         <div className="flex flex-3 items-center justify-end">
           <span className="mr-2">
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js
index 729e10c52..ad951e8be 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js
@@ -21,10 +21,10 @@ const ConfirmCollectionClose = ({ collection, onCancel, onCloseWithoutSave, onSa
     >
       <div className="flex items-center font-normal">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <div className="font-normal mt-4">
-        You have unsaved changes in <span className="font-semibold">{collection.name}</span> collection settings.
+        You have unsaved changes in <span className="font-medium">{collection.name}</span> collection settings.
       </div>
 
       <div className="flex justify-between mt-6">
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js
index 42e4cad23..bc9ec9c6d 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js
@@ -21,10 +21,10 @@ const ConfirmFolderClose = ({ folder, onCancel, onCloseWithoutSave, onSaveAndClo
     >
       <div className="flex items-center font-normal">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <div className="font-normal mt-4">
-        You have unsaved changes in <span className="font-semibold">{folder.name}</span> folder settings.
+        You have unsaved changes in <span className="font-medium">{folder.name}</span> folder settings.
       </div>
 
       <div className="flex justify-between mt-6">
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js
index 293ebb3a6..6cf02bcd7 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js
@@ -25,10 +25,10 @@ const ConfirmRequestClose = ({ item, example, onCancel, onCloseWithoutSave, onSa
     >
       <div className="flex items-center font-normal">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <div className="font-normal mt-4">
-        You have unsaved changes in {itemType} <span className="font-semibold">{itemName}</span>.
+        You have unsaved changes in {itemType} <span className="font-medium">{itemName}</span>.
       </div>
 
       <div className="flex justify-between mt-6">
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
index 49d37f001..16f67cecf 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -34,6 +34,10 @@ const StyledWrapper = styled.div`
     .has-changes-icon {
       height: 24px;
     }
+
+    .tab-method {
+      font-size: ${(props) => props.theme.font.size.sm};
+    }
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 446cb2b98..10ca52199 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -282,7 +282,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
           }
         }}
       >
-        <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
+        <span className="tab-method uppercase" style={{ color: getMethodColor(method) }}>
           {method}
         </span>
         <span className="ml-1 tab-name" title={item.name}>
diff --git a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
index 93829cca9..f555615da 100644
--- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
@@ -25,7 +25,7 @@ const Wrapper = styled.div`
       padding-left: 0;
       padding-right: 0;
       cursor: pointer;
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       height: 38px;
 
       margin-right: 6px;
@@ -39,7 +39,6 @@ const Wrapper = styled.div`
 
       &.active {
         background: ${(props) => props.theme.requestTabs.active.bg};
-        font-weight: 500;
       }
 
       &.active {
diff --git a/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js b/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
index 636d61b4a..aaa28551a 100644
--- a/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
@@ -60,7 +60,7 @@ const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response
       >
         <div className="space-y-4">
           <div>
-            <label htmlFor="exampleName" className="block font-semibold">
+            <label htmlFor="exampleName" className="block font-medium">
               Example Name<span className="text-red-600">*</span>
             </label>
             <input
@@ -74,14 +74,14 @@ const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response
               data-testid="create-example-name-input"
             />
             {nameError && (
-              <div className="text-red-500 text-sm mt-1" data-testid="name-error">
+              <div className="text-red-500 mt-1" data-testid="name-error">
                 {nameError}
               </div>
             )}
           </div>
 
           <div>
-            <label htmlFor="exampleDescription" className="block font-semibold">
+            <label htmlFor="exampleDescription" className="block font-medium">
               Description
             </label>
             <textarea
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
index 4ab2ce15e..95804cba2 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.text};
   }
 
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
 
   .body-mode-selector {
     background: transparent;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js
index cac4c5239..64fdc12ef 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js
@@ -51,7 +51,7 @@ const ResponseExampleBodyRenderer = ({
     switch (bodyMode) {
       case 'none':
         return (
-          <div className="text-sm no-body-text">
+          <div className="no-body-text">
             No Body
           </div>
         );
@@ -91,7 +91,7 @@ const ResponseExampleBodyRenderer = ({
 
       default:
         return (
-          <div className="text-sm no-body-text">
+          <div className="no-body-text">
             No Body
           </div>
         );
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js
index 9d2bc703c..adc907b78 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js
@@ -5,7 +5,7 @@ const StyledWrapper = styled.div`
     background-color: transparent;
     color: ${(props) => props.theme.text};
     font-family: inherit;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 1.5;
     border: 1px solid transparent;
     padding: 0;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js
index a1a444d6b..8a93b6c77 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
     }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
@@ -49,7 +49,7 @@ const Wrapper = styled.div`
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     color: ${(props) => props.theme.colors.text.muted};
     
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js
index b85d411f5..ac4e4f7de 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js
index e56183dab..d12ef342b 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js
@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     transition: opacity 0.2s ease;
     color: ${(props) => props.theme.colors.text.muted};
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js
index 4e44a60cb..793cc04e6 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js
@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-param {
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   input[type='text'] {
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
index 67f57387e..e566a1390 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     transition: opacity 0.2s ease;
     color: ${(props) => props.theme.colors.text.muted};
@@ -31,8 +31,8 @@ const StyledWrapper = styled.div`
     
     thead {
       td {
-        font-weight: 600;
-        font-size: 12px;
+        font-weight: 500;
+        font-size: ${(props) => props.theme.font.size.sm};
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 8px 0;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
index 50553123d..7346fb148 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
@@ -55,7 +55,7 @@ const ResponseExampleUrlBar = ({ item, collection, editMode, onSave, exampleUid
   return (
     <StyledWrapper className="flex items-center">
       <div className="url-bar-container w-full flex p-2 text-xs rounded-md items-center justify-between" data-testid="url-bar-container">
-        <div className={`method flex text-xs items-center justify-center px-2 rounded h-6 flex-shrink-0 mr-2 overflow-hidden whitespace-nowrap font-semibold uppercase ${getMethodClass()}`}>
+        <div className={`method flex text-xs items-center justify-center px-2 rounded h-6 flex-shrink-0 mr-2 overflow-hidden whitespace-nowrap font-medium uppercase ${getMethodClass()}`}>
           {method || 'GET'}
         </div>
 
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
index 0d164d615..cf5a4d068 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
   height: 300px;
 
   .body-mode-selector {
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js
index f271a3a4a..b46ab83c0 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.colors.text.muted};
     border: none;
     cursor: pointer;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     transition: opacity 0.2s ease;
     
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 50aeb8e8f..46a0b9a78 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
     border: 1px solid ${(props) => props.theme.modal.input.border};
     border-radius: 3px;
     padding: 0.35rem 0.6rem;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
     color: ${(props) => props.theme.text.primary};
     min-width: 120px;
@@ -60,7 +60,7 @@ const StyledWrapper = styled.div`
       margin: 0;
       cursor: pointer;
       transition: background-color 0.15s ease;
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       color: ${(props) => props.theme.dropdown.primaryText};
       width: 100%;
       box-sizing: border-box;
@@ -70,7 +70,7 @@ const StyledWrapper = styled.div`
       }
 
       .status {
-        font-weight: 600;
+        font-weight: 500;
         color: inherit;
         margin-right: 0.5rem;
         min-width: 40px;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
index 7a9e2f73a..83bab2dd5 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
@@ -34,7 +34,7 @@ const StyledWrapper = styled.div`
 
   .example-input-label {
     display: block;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
     color: ${(props) => props.theme.text};
     margin-bottom: 4px;
@@ -48,7 +48,7 @@ const StyledWrapper = styled.div`
     background-color: transparent;
     color: ${(props) => props.theme.text};
     font-family: inherit;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 1.5;
     transition: all 0.2s ease;
     outline: none;
@@ -74,7 +74,7 @@ const StyledWrapper = styled.div`
   }
 
   .example-input-description {
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 1.6;
     resize: none;
     min-height: 80px;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
index 9bf2ef3f0..5140ff42d 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
@@ -156,9 +156,9 @@ const ResponseExampleTopBar = ({
   return (
     <StyledWrapper className="p-4">
       <div className="max-w-full">
-        <div className="flex items-start justify-between gap-6 md:flex-row flex-col">
+        <div className="flex items-center justify-between gap-6 md:flex-row flex-col">
           <div className="flex-1 min-w-0">
-            <h2 className="response-example-title font-semibold mb-2 leading-tight" data-testid="response-example-title">
+            <h2 className="response-example-title font-medium leading-tight" data-testid="response-example-title">
               <span className="opacity-60">{item.name}</span>
               {' / '}
               <span>{example.name}</span>
@@ -168,7 +168,7 @@ const ResponseExampleTopBar = ({
                 text={example.description}
                 maxLines={2}
                 className="response-example-description-container"
-                textClassName="response-example-description text-sm leading-relaxed max-w-fit"
+                textClassName="response-example-description leading-relaxed max-w-fit"
                 buttonClassName="text-blue-600 hover:text-blue-800 font-medium"
                 viewMoreText="View More"
                 viewLessText="View Less"
diff --git a/packages/bruno-app/src/components/ResponsePane/ClearTimeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ClearTimeline/StyledWrapper.js
index 8c32a8bab..73c1ba290 100644
--- a/packages/bruno-app/src/components/ResponsePane/ClearTimeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ClearTimeline/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
index f302b86dd..a6942c2df 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
@@ -26,14 +26,14 @@ const StyledWrapper = styled.div`
   }
 
   .error-title {
-    font-weight: 600;
+    font-weight: 500;
     margin-bottom: 0.375rem;
     color: ${(props) => props.theme.colors.text.danger};
   }
 
   .error-message {
     font-family: monospace;
-    font-size: 0.6875rem;
+    font-size: ${(props) => props.theme.font.size.xs};
     line-height: 1.25rem;
     white-space: pre-wrap;
     word-break: break-all;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
index d42e77f7f..141057784 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
@@ -7,8 +7,8 @@ const StyledWrapper = styled.div`
 
     thead {
       color: #777777;
-      font-size: 0.75rem;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.sm};
+      font-weight: 500;
       text-transform: uppercase;
     }
 
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js
index bed367559..db90d65f0 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: ${(props) => props.theme.font.size.sm};
+  font-weight: 500;
   display: flex;
   align-items: center;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
index d42e77f7f..141057784 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
@@ -7,8 +7,8 @@ const StyledWrapper = styled.div`
 
     thead {
       color: #777777;
-      font-size: 0.75rem;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.sm};
+      font-weight: 500;
       text-transform: uppercase;
     }
 
diff --git a/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.js
index 0a5339df8..aeb696381 100644
--- a/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/StyledWrapper.js
@@ -21,7 +21,7 @@ const StyledWrapper = styled.div`
   }
 
   .warning-title {
-    font-weight: 600;
+    font-weight: 500;
     color: ${(props) => props.theme.text};
     margin-bottom: 1rem;
   }
diff --git a/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js b/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js
index 2969e8dcf..3184736ee 100644
--- a/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js
@@ -6,14 +6,14 @@ const NetworkError = ({ onClose }) => {
       <div className="flex-1 w-0 p-4">
         <div className="flex items-start">
           <div className="ml-3 flex-1">
-            <p className="text-sm font-medium text-red-800">Network Error</p>
+            <p className="font-medium text-red-800">Network Error</p>
           </div>
         </div>
       </div>
       <div className="flex">
         <button
           onClick={onClose}
-          className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium focus:outline-none"
+          className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center font-medium focus:outline-none"
         >
           Close
         </button>
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js
index bd52c410a..db6ee72f6 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js
@@ -60,12 +60,12 @@ const QueryResultFilter = ({ filter, onChange, mode }) => {
         autoCorrect="off"
         autoCapitalize="off"
         spellCheck="false"
-        className={`block ml-14 p-2 py-1 sm:text-sm transition-all duration-200 ease-in-out border border-gray-300 rounded-md ${
+        className={`block ml-14 p-2 py-1 transition-all duration-200 ease-in-out border border-gray-300 rounded-md ${
           isExpanded ? 'w-full opacity-100 pointer-events-auto' : 'w-[0] opacity-0'
         }`}
         onChange={onChange}
       />
-      <div className="text-gray-500 sm:text-sm cursor-pointer pointer-events-auto" id="request-filter-icon" onClick={handleFilterClick}>
+      <div className="text-gray-500 cursor-pointer pointer-events-auto" id="request-filter-icon" onClick={handleFilterClick}>
         {isExpanded ? <IconX size={20} strokeWidth={1.5} /> : <IconFilter size={20} strokeWidth={1.5} />}
       </div>
     </div>
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
index 8c32a8bab..73c1ba290 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseClear/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
index e136256ba..ced0f0904 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
@@ -7,8 +7,8 @@ const Wrapper = styled.div`
 
     thead {
       color: #777777;
-      font-size: 0.75rem;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.sm};
+      font-weight: 500;
       text-transform: uppercase;
     }
 
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseSave/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseSave/StyledWrapper.js
index 8c32a8bab..73c1ba290 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseSave/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseSave/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseSize/ResponseSize.spec.js b/packages/bruno-app/src/components/ResponsePane/ResponseSize/ResponseSize.spec.js
index 7ef288417..11aa35d13 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseSize/ResponseSize.spec.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseSize/ResponseSize.spec.js
@@ -8,6 +8,11 @@ import ResponseSize from './index';
 const theme = {
   requestTabPanel: {
     responseStatus: '#666'
+  },
+  font: {
+    size: {
+      sm: '0.75rem'
+    }
   }
 };
 
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseSize/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseSize/StyledWrapper.js
index ea9701178..13bf109f6 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseSize/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseSize/StyledWrapper.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: ${(props) => props.theme.font.size.sm};
+  font-weight: 500;
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js
index c2fe19cfb..ba919c56f 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: ${(props) => props.theme.font.size.sm};
+  font-weight: 500;
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
   text-align: center;
 `;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js
index ea9701178..13bf109f6 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: ${(props) => props.theme.font.size.sm};
+  font-weight: 500;
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js
index 4b7cb28a7..ed248cc11 100644
--- a/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.js
@@ -17,27 +17,27 @@ const StyledWrapper = styled.div`
   }
 
   .method-label {
-    font-weight: 600;
+    font-weight: 500;
   }
 
   .status-code {
-    font-weight: 600;
+    font-weight: 500;
   }
 
   .url-text {
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     margin-top: 0.25rem;
   }
 
   .timestamp {
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .meta-info {
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .oauth-section {
@@ -45,7 +45,7 @@ const StyledWrapper = styled.div`
       display: flex;
       align-items: center;
       color: ${(props) => props.theme.text};
-      font-weight: 600;
+      font-weight: 500;
 
       span {
         margin-left: 0.5rem;
@@ -119,7 +119,7 @@ const StyledWrapper = styled.div`
   }
     
   .request-label {
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.base};
     padding: 2px 6px;
     border-radius: 3px;
     margin-left: 8px;
@@ -129,7 +129,7 @@ const StyledWrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -139,7 +139,7 @@ const StyledWrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
diff --git a/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js
index c4a38e80f..87880db4a 100644
--- a/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js
@@ -37,14 +37,14 @@ const StyledWrapper = styled.div`
   }
   
   .error-title {
-    font-weight: 600;
+    font-weight: 500;
     margin-bottom: 0.375rem;
     color: ${(props) => props.theme.colors.text.danger};
   }
   
   .error-message {
     font-family: monospace;
-    font-size: 0.6875rem;
+    font-size: ${(props) => props.theme.font.size.xs};
     line-height: 1.25rem;
     white-space: pre-wrap;
     word-break: break-all;
diff --git a/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
index 0633fac1e..a4a03f82d 100644
--- a/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: ${(props) => props.theme.font.size.sm};
+  font-weight: 500;
 
   &.text-ok {
     color: ${(props) => props.theme.requestTabPanel.responseOk};
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js
index 0f5c848f5..6dcdbcf99 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js
@@ -115,7 +115,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
       case 'message':
         return (
           <div className="mt-2 bg-orange-50 dark:bg-orange-900/10 rounded p-2">
-            <div className="font-semibold mb-1 text-orange-700 dark:text-orange-400">Message</div>
+            <div className="font-medium mb-1 text-orange-700 dark:text-orange-400">Message</div>
             <pre className="text-xs bg-white dark:bg-gray-800 p-2 rounded overflow-auto max-h-[200px]">
                 {typeof eventData === 'string' 
                   ? eventData 
@@ -127,7 +127,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
       case 'metadata':
         return (
           <div className="mt-2 bg-blue-50 dark:bg-blue-900/10 rounded p-2">
-            <div className="font-semibold mb-1 text-blue-700 dark:text-blue-400">Metadata Headers</div>
+            <div className="font-medium mb-1 text-blue-700 dark:text-blue-400">Metadata Headers</div>
             {response.metadata && response.metadata.length > 0 ? (
               <div className="grid grid-cols-2 gap-1">
                 {response.metadata.map((header, idx) => (
@@ -138,7 +138,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
                 ))}
               </div>
             ) : (
-              <div className="text-sm italic text-gray-500">No metadata headers</div>
+              <div className="italic text-gray-500">No metadata headers</div>
             )}
           </div>
         );
@@ -147,7 +147,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
         // For message responses, show the response data
         return (
           <div className="mt-2 bg-green-50 dark:bg-green-900/10 rounded p-2">
-            <div className="font-semibold mb-1 text-green-700 dark:text-green-400">
+            <div className="font-medium mb-1 text-green-700 dark:text-green-400">
               Response Message #{(response?.responses?.length) || 0}
             </div>
             {response?.responses && response.responses.length > 0 ? (
@@ -155,7 +155,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
                 {JSON.stringify(response.responses[response.responses.length - 1], null, 2)}
               </pre>
             ) : (
-              <div className="text-sm italic text-gray-500">Empty message</div>
+              <div className="italic text-gray-500">Empty message</div>
             )}
           </div>
         );
@@ -169,12 +169,12 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
             </div>
             
             {response.statusDescription && (
-              <div className="text-sm mb-2">{response.statusDescription}</div>
+              <div className="mb-2">{response.statusDescription}</div>
             )}
             
             {response.trailers && response.trailers.length > 0 && (
               <>
-                <div className="font-semibold text-sm mt-2 mb-1 text-purple-700 dark:text-purple-400">Trailers</div>
+                <div className="font-medium mt-2 mb-1 text-purple-700 dark:text-purple-400">Trailers</div>
                 <div className="grid grid-cols-2 gap-1">
                   {response.trailers.map((trailer, idx) => (
                     <div key={idx} className="contents">
@@ -192,8 +192,8 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
         // For error events, show error details
         return (
           <div className="mt-2 bg-red-50 dark:bg-red-900/10 rounded p-2">
-            <div className="font-semibold mb-1 text-red-700 dark:text-red-400">Error</div>
-            <div className="text-sm mb-2">{response.error || "Unknown error"}</div>
+            <div className="font-medium mb-1 text-red-700 dark:text-red-400">Error</div>
+            <div className="mb-2">{response.error || 'Unknown error'}</div>
             
             <div className="flex items-center gap-2">
               <Status statusCode={statusCode} statusText={statusText} />
@@ -201,7 +201,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
             
             {response.trailers && response.trailers.length > 0 && (
               <>
-                <div className="font-semibold text-sm mt-2 mb-1 text-red-700 dark:text-red-400">Error Metadata</div>
+                <div className="font-medium mt-2 mb-1 text-red-700 dark:text-red-400">Error Metadata</div>
                 <div className="grid grid-cols-2 gap-1">
                   {response.trailers.map((trailer, idx) => (
                     <div key={idx} className="contents">
@@ -219,8 +219,8 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
         // For end events, show summary
         return (
           <div className="mt-2 bg-gray-50 dark:bg-gray-700/30 rounded p-2">
-            <div className="font-semibold mb-1">Stream Ended</div>
-            <div className="text-sm">
+            <div className="font-medium mb-1">Stream Ended</div>
+            <div>
               Total messages: {(response?.responses?.length) || 0}
             </div>
           </div>
@@ -230,8 +230,8 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
         // For cancel events, show cancellation info
         return (
           <div className="mt-2 bg-amber-50 dark:bg-amber-900/10 rounded p-2">
-            <div className="font-semibold mb-1 text-amber-700 dark:text-amber-400">Stream Cancelled</div>
-            <div className="text-sm">{response.statusDescription || "The gRPC stream was cancelled"}</div>
+            <div className="font-medium mb-1 text-amber-700 dark:text-amber-400">Stream Cancelled</div>
+            <div>{response.statusDescription || 'The gRPC stream was cancelled'}</div>
           </div>
         );
         
@@ -245,7 +245,7 @@ const GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData,
       <div className={`flex items-center gap-2 cursor-pointer`} onClick={toggleCollapse}>
         {isCollapsed ? <IconChevronRight size={16} strokeWidth={1.5} /> : <IconChevronDown size={16} strokeWidth={1.5} />}
         {eventIcon}
-        <span className="font-medium text-sm">{eventName}</span>
+        <span className="font-medium">{eventName}</span>
         {eventType === 'request' && effectiveRequest.methodType && (
           <span className="px-2 py-0.5 text-xs rounded bg-orange-100 dark:bg-orange-800/30 text-orange-700 dark:text-orange-300">
             {effectiveRequest.methodType}
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
index 263d45245..1c4ed9a82 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
@@ -26,27 +26,27 @@ const StyledWrapper = styled.div`
   }
 
   .method-label {
-    font-weight: 600;
+    font-weight: 500;
   }
 
   .status-code {
-    font-weight: 600;
+    font-weight: 500;
   }
 
   .url-text {
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     margin-top: 0.25rem;
   }
 
   .timestamp {
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .meta-info {
     color: ${(props) => props.theme.colors.text.muted};
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .oauth-section {
@@ -54,7 +54,7 @@ const StyledWrapper = styled.div`
       display: flex;
       align-items: center;
       color: ${(props) => props.theme.text};
-      font-weight: 600;
+      font-weight: 500;
 
       span {
         margin-left: 0.5rem;
@@ -128,7 +128,7 @@ const StyledWrapper = styled.div`
   }
     
   .request-label {
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.base};
     padding: 2px 6px;
     border-radius: 3px;
     margin-left: 8px;
@@ -138,7 +138,7 @@ const StyledWrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
+    font-weight: 500;
     table-layout: fixed;
 
     thead,
@@ -148,7 +148,7 @@ const StyledWrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
+      font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
     }
     td {
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
index bb8448f70..425bbf0d0 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
@@ -28,7 +28,7 @@ const HeadersBlock = ({ headers, type }) => {
 const Headers = ({ headers, type }) => {
   if (Array.isArray(headers)) {
     return (
-      <div className="mt-1 text-sm">
+      <div className="mt-1">
         {headers.map((header, index) => (
           <pre key={index} className="mb-1 whitespace-pre-wrap">
             {type === 'request' ? '>' : '<'}&nbsp;<span className="opacity-60">{header?.name}:</span>
@@ -39,7 +39,7 @@ const Headers = ({ headers, type }) => {
     );
   } else {
     return (
-      <div className="mt-1 text-sm">
+      <div className="mt-1">
         {Object.entries(headers).map(([key, value], index) => (
           <pre key={index} className="mb-1 whitespace-pre-wrap">
             {type === 'request' ? '>' : '<'}&nbsp;<span className="opacity-60">{key}:</span>
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
index 9a72c8856..70acf0aa2 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
@@ -27,8 +27,8 @@ const Response = ({ collection, response, item }) => {
     {/* Status */}
     <div className="mb-1">
       <Status statusCode={status || statusCode} statusText={statusText} />
-      {response.duration && <span className="text-sm text-gray-400 ml-2">{response.duration}ms</span>}
-      {response.size && <span className="text-sm text-gray-400 ml-2">{response.size}B</span>}
+        {response.duration && <span className="text-gray-400 ml-2">{response.duration}ms</span>}
+        {response.size && <span className="text-gray-400 ml-2">{response.size}B</span>}
     </div>
 
     {/* Headers */}
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
index c5fc91295..8d6081f47 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
@@ -26,58 +26,60 @@ const TimelineItem = ({ timestamp, request, response, item, collection, isOauth2
             {!hideTimestamp && (
               <>
                 <pre className="opacity-70">[{new Date(timestamp).toISOString()}]</pre>
-                <span className="text-sm text-gray-400 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap">
+                <span className="text-gray-400 flex-shrink-0 overflow-hidden text-ellipsis whitespace-nowrap">
                   <RelativeTime timestamp={timestamp} />
                 </span>
               </>
             )}
           </div>
         </div>
-        <div className="truncate text-sm mt-1">{url}</div>
+        <div className="truncate mt-1">{url}</div>
       </div>
-      {isCollapsed && (<div className="text-sm overflow-hidden">
-        {/* Tabs */}
-        <div className="tabs-switcher flex mb-4">
-          <button
-            className={`mr-4 ${activeTab === 'request' ? 'active' : 'text-gray-400'}`}
-            onClick={() => setActiveTab('request')}
-          >
-            Request
-          </button>
-          <button
-            className={`mr-4 ${activeTab === 'response' ? 'active' : 'text-gray-400'}`}
-            onClick={() => setActiveTab('response')}
-          >
-            Response
-          </button>
-          {showNetworkLogs && (
+      {isCollapsed && (
+        <div className="overflow-hidden">
+          {/* Tabs */}
+          <div className="tabs-switcher flex mb-4">
             <button
-              className={`${activeTab === 'networkLogs' ? 'active' : 'text-gray-400'}`}
-              onClick={() => setActiveTab('networkLogs')}
+              className={`mr-4 ${activeTab === 'request' ? 'active' : 'text-gray-400'}`}
+              onClick={() => setActiveTab('request')}
             >
-              Network Logs
+              Request
             </button>
-          )}
+            <button
+              className={`mr-4 ${activeTab === 'response' ? 'active' : 'text-gray-400'}`}
+              onClick={() => setActiveTab('response')}
+            >
+              Response
+            </button>
+            {showNetworkLogs && (
+              <button
+                className={`${activeTab === 'networkLogs' ? 'active' : 'text-gray-400'}`}
+                onClick={() => setActiveTab('networkLogs')}
+              >
+                Network Logs
+              </button>
+            )}
+          </div>
+
+          {/* Tab Content */}
+          <div className="tab-content break-all">
+            {/* Request Tab */}
+            {activeTab === 'request' && (
+              <Request request={request} item={item} collection={collection} />
+            )}
+
+            {/* Response Tab */}
+            {activeTab === 'response' && (
+              <Response response={response} item={item} collection={collection} />
+            )}
+
+            {/* Network Logs Tab */}
+            {activeTab === 'networkLogs' && showNetworkLogs && (
+              <Network logs={response?.timeline} />
+            )}
+          </div>
         </div>
-
-        {/* Tab Content */}
-        <div className="tab-content break-all">
-          {/* Request Tab */}
-          {activeTab === 'request' && (
-            <Request request={request} item={item} collection={collection} />
-          )}
-
-          {/* Response Tab */}
-          {activeTab === 'response' && (
-            <Response response={response} item={item} collection={collection} />
-          )}
-
-          {/* Network Logs Tab */}
-          {activeTab === 'networkLogs' && showNetworkLogs && (
-            <Network logs={response?.timeline} />
-          )}
-        </div>
-      </div>)}
+      )}
     </div>
   );
 };
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
index ce1e51f70..ca560189f 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
@@ -117,7 +117,7 @@ const WSMessageItem = ({ message, inFocus }) => {
       >
         <div className="flex min-w-0 shrink">
           <span
-            className={classnames('font-semibold flex items-center gap-1',
+            className={classnames('font-medium flex items-center gap-1',
               {
                 'text-green-700': isIncoming,
                 'text-yellow-700': isOutgoing,
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js
index d42e77f7f..141057784 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js
@@ -7,8 +7,8 @@ const StyledWrapper = styled.div`
 
     thead {
       color: #777777;
-      font-size: 0.75rem;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.sm};
+      font-weight: 500;
       text-transform: uppercase;
     }
 
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseSortOrder/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseSortOrder/StyledWrapper.js
index 8c32a8bab..73c1ba290 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseSortOrder/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseSortOrder/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  font-size: 0.8125rem;
+  font-size: ${(props) => props.theme.font.size.base};
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSStatusCode/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSStatusCode/StyledWrapper.js
index 510a40f01..7c8ffe964 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSStatusCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSStatusCode/StyledWrapper.js
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: ${(props) => props.theme.font.size.sm};
+  font-weight: 500;
   display: flex;
   align-items: center;
 
diff --git a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
index 0a6dbeea2..d04cc68ba 100644
--- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
@@ -17,7 +17,7 @@ const StyledWrapper = styled.div`
     margin-bottom: 0.5rem;
 
     .counter {
-      font-size: 0.875rem;
+      font-size: ${(props) => props.theme.font.size.base};
       font-weight: 500;
     }
 
@@ -32,7 +32,7 @@ const StyledWrapper = styled.div`
       display: flex;
       align-items: center;
       gap: 0.25rem;
-      font-size: 0.75rem;
+      font-size: ${(props) => props.theme.font.size.base};
       color: ${props => props.theme.textLink};
       background: none;
       border: none;
@@ -66,7 +66,7 @@ const StyledWrapper = styled.div`
     .empty-message {
       padding: 0.75rem;
       color: ${props => props.theme.colors.text.muted};
-      font-size: 0.875rem;
+      font-size: ${(props) => props.theme.font.size.base};
     }
     
     .requests-container {
@@ -177,7 +177,7 @@ const StyledWrapper = styled.div`
     
     .method {
       font-family: monospace;
-      font-size: 0.75rem;
+      font-size: ${(props) => props.theme.font.size.base};
       font-weight: 500;
       margin-right: 0.5rem;
       min-width: 3rem;
@@ -214,14 +214,14 @@ const StyledWrapper = styled.div`
     
     .request-name {
       flex: 1;
-      font-size: 0.875rem;
+      font-size: ${(props) => props.theme.font.size.base};
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       
       .folder-path {
         margin-left: 0.5rem;
-        font-size: 0.75rem;
+        font-size: ${(props) => props.theme.font.size.base};
         color: ${props => props.theme.sidebar.muted};
       }
     }
diff --git a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
index b3fbaaebd..3473126f2 100644
--- a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
@@ -43,6 +43,10 @@ const Wrapper = styled.div`
   .skipped-request {
     color: ${(props) => props.theme.colors.text.muted};
   }
+
+  .button-sm {
+    font-size: ${(props) => props.theme.font.size.sm};
+  }
 `;
 
 export default Wrapper;
diff --git a/packages/bruno-app/src/components/RunnerResults/index.jsx b/packages/bruno-app/src/components/RunnerResults/index.jsx
index ba6521be5..d1adc4df1 100644
--- a/packages/bruno-app/src/components/RunnerResults/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/index.jsx
@@ -72,7 +72,7 @@ const FilterButton = ({ label, count, active, onClick }) => (
         ? 'text-[#343434] dark:text-[#CCCCCC] border-[#F59E0B]'
         : 'text-[#989898] dark:text-[#CCCCCC80] border-transparent'
     }`}
-    style={{ fontFamily: 'Inter', fontSize: '14px', fontWeight: 500, lineHeight: '100%', letterSpacing: '0%' }}
+    style={{ fontFamily: 'Inter', fontWeight: 500, lineHeight: '100%', letterSpacing: '0%' }}
   >
     {label}
     <span
@@ -278,7 +278,7 @@ export default function RunnerResults({ collection }) {
             <div className="mt-6">
               You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
               {isCollectionLoading && (
-                <span className="ml-2 text-sm text-gray-500">
+                <span className="ml-2 text-gray-500">
                   (Loading...)
                 </span>
               )}
@@ -355,7 +355,7 @@ export default function RunnerResults({ collection }) {
       <div className="flex items-center justify-between mb-4 pt-[14px] gap-4">
         <div className="flex items-stretch rounded-lg border border-[#EFEFEF] dark:border-[#92929233] max-h-[35px] flex-shrink-0" style={{ borderWidth: '1px' }}>
           <div className="flex items-center px-3 py-2 rounded-l-lg bg-[#F3F3F3] dark:bg-[#2B2D2F]">
-            <span className="text-gray-600 dark:text-gray-400" style={{ fontFamily: 'Inter', fontSize: '14px', fontWeight: 400 }}>
+            <span className="text-gray-600 dark:text-gray-400" style={{ fontFamily: 'Inter', fontWeight: 400 }}>
               Filter by:
             </span>
           </div>
@@ -380,16 +380,16 @@ export default function RunnerResults({ collection }) {
           <div className="flex items-center gap-3 flex-shrink-0">
             <button
               type="button"
-              className="px-3 py-1.5 rounded-md bg-transparent border border-[#989898] dark:border-[#444444] text-[#989898] hover:opacity-80 transition-colors"
-              style={{ fontFamily: 'Inter', fontSize: '12px', fontWeight: 500 }}
+              className="px-3 py-1.5 rounded-md bg-transparent border border-[#989898] dark:border-[#444444] text-[#989898] hover:opacity-80 transition-colors button-sm"
+              style={{ fontFamily: 'Inter', fontWeight: 500 }}
               onClick={runAgain}
             >
               Run Again
             </button>
             <button
               type="button"
-              className="px-3 py-1.5 rounded-md bg-transparent border border-[#989898] dark:border-[#444444] text-[#989898] hover:opacity-80 transition-colors"
-              style={{ fontFamily: 'Inter', fontSize: '12px', fontWeight: 500 }}
+              className="px-3 py-1.5 rounded-md bg-transparent border border-[#989898] dark:border-[#444444] text-[#989898] hover:opacity-80 transition-colors button-sm"
+              style={{ fontFamily: 'Inter', fontWeight: 500 }}
               onClick={resetRunner}
             >
               Reset
@@ -588,7 +588,7 @@ export default function RunnerResults({ collection }) {
               <div className="mb-4 text-gray-400 dark:text-gray-500">
                 <IconExternalLink size={64} strokeWidth={1.5} />
               </div>
-              <p className="text-gray-600 dark:text-gray-400 text-sm">
+              <p className="text-gray-600 dark:text-gray-400">
                 Click on the status code to view the response
               </p>
             </div>
diff --git a/packages/bruno-app/src/components/SearchInput/index.js b/packages/bruno-app/src/components/SearchInput/index.js
index 9b3bab639..dd8a3d227 100644
--- a/packages/bruno-app/src/components/SearchInput/index.js
+++ b/packages/bruno-app/src/components/SearchInput/index.js
@@ -19,7 +19,7 @@ const SearchInput = ({
   return (
     <div className={`relative px-2 ${className}`}>
       <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-        <span className="text-gray-500 sm:text-sm">
+        <span className="text-gray-500">
           <IconSearch size={16} strokeWidth={1.5} />
         </span>
       </div>
@@ -32,7 +32,7 @@ const SearchInput = ({
         autoCorrect="off"
         autoCapitalize="off"
         spellCheck="false"
-        className="block w-full pl-7 py-2 sm:text-sm rounded-md"
+        className="block w-full pl-7 py-2 rounded-md"
         value={searchText}
         onChange={handleChange}
         {...props}
diff --git a/packages/bruno-app/src/components/SecuritySettings/JsSandboxModeModal/index.js b/packages/bruno-app/src/components/SecuritySettings/JsSandboxModeModal/index.js
index 4cbbc80ea..2b3abbc53 100644
--- a/packages/bruno-app/src/components/SecuritySettings/JsSandboxModeModal/index.js
+++ b/packages/bruno-app/src/components/SecuritySettings/JsSandboxModeModal/index.js
@@ -62,7 +62,7 @@ const JsSandboxModeModal = ({ collection }) => {
                 Safe Mode
               </span>
             </label>
-            <p className='text-sm text-muted mt-1'>
+            <p className="text-muted mt-1">
               JavaScript code is executed in a secure sandbox and cannot access your filesystem or execute system commands.
             </p>
 
@@ -81,7 +81,7 @@ const JsSandboxModeModal = ({ collection }) => {
                 <span className='ml-1 developer-mode-warning'>(use only if you trust the authors of the collection)</span>
               </span>
             </label>
-            <p className='text-sm text-muted mt-1'>
+            <p className="text-muted mt-1">
               JavaScript code has access to the filesystem, can execute system commands and access sensitive information.
             </p>
           </div>
diff --git a/packages/bruno-app/src/components/SecuritySettings/index.js b/packages/bruno-app/src/components/SecuritySettings/index.js
index f7738cfa8..cf8d44df1 100644
--- a/packages/bruno-app/src/components/SecuritySettings/index.js
+++ b/packages/bruno-app/src/components/SecuritySettings/index.js
@@ -26,7 +26,7 @@ const SecuritySettings = ({ collection }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
-      <div className='font-semibold mt-2'>JavaScript Sandbox</div>
+      <div className="font-medium mt-2">JavaScript Sandbox</div>
 
       <div className='mt-4'>
       The collection might include JavaScript code in Variables, Scripts, Tests, and Assertions.
@@ -48,7 +48,7 @@ const SecuritySettings = ({ collection }) => {
               Safe Mode
             </span>
           </label>
-          <p className='text-sm text-muted mt-1'>
+          <p className="text-muted mt-1">
             JavaScript code is executed in a secure sandbox and cannot access your filesystem or execute system commands.
           </p>
 
@@ -67,7 +67,7 @@ const SecuritySettings = ({ collection }) => {
               <span className='ml-1 developer-mode-warning'>(use only if you trust the authors of the collection)</span>
             </span>
           </label>
-          <p className='text-sm text-muted mt-1'>
+          <p className="text-muted mt-1">
             JavaScript code has access to the filesystem, can execute system commands and access sensitive information.
           </p>
         </div>
diff --git a/packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js b/packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js
index 97a9389d8..ab1ff4424 100644
--- a/packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .tooltip-mod {
-    font-size: 11px !important;
+    font-size: ${(props) => props.theme.font.size.xs} !important;
     width: 150px !important;
   }
 `;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
index 30169bcd2..4cd9af13f 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
@@ -88,7 +88,7 @@ const CloneCollection = ({ onClose, collectionUid }) => {
     <Modal size="sm" title="Clone Collection" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
       <form className="bruno-form" onSubmit={e => e.preventDefault()}>
         <div>
-          <label htmlFor="collection-name" className="flex items-center font-semibold">
+          <label htmlFor="collection-name" className="flex items-center font-medium">
             Name
           </label>
           <input
@@ -111,7 +111,7 @@ const CloneCollection = ({ onClose, collectionUid }) => {
             <div className="text-red-500">{formik.errors.collectionName}</div>
           ) : null}
 
-          <label htmlFor="collection-location" className="block font-semibold mt-3">
+          <label htmlFor="collection-location" className="block font-medium mt-3">
             Location
           </label>
           <input
@@ -133,9 +133,6 @@ const CloneCollection = ({ onClose, collectionUid }) => {
           <div className="mt-1">
             <span
               className="text-link cursor-pointer hover:underline" onClick={browse}
-              style={{
-                fontSize: '0.8125rem'
-              }}
             >
               Browse
             </span>
@@ -143,7 +140,7 @@ const CloneCollection = ({ onClose, collectionUid }) => {
 
           <div className="mt-4">
             <div className="flex items-center justify-between">
-              <label htmlFor="filename" className="flex items-center font-semibold">
+              <label htmlFor="filename" className="flex items-center font-medium">
                 Folder Name
                 <Help width="300">
                   <p>
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
index 3a4e2e9c8..762588e6c 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
@@ -91,7 +91,7 @@ const CloneCollectionItem = ({ collectionUid, item, onClose }) => {
         >
           <form className="bruno-form" onSubmit={formik.handleSubmit}>
             <div>
-              <label htmlFor="name" className="block font-semibold">
+              <label htmlFor="name" className="block font-medium">
                 {isFolder ? 'Folder' : 'Request'} Name
               </label>
               <input
@@ -117,7 +117,7 @@ const CloneCollectionItem = ({ collectionUid, item, onClose }) => {
             {showFilesystemName && (
               <div className="mt-4">
                 <div className="flex items-center justify-between">
-                  <label htmlFor="filename" className="flex items-center font-semibold">
+                  <label htmlFor="filename" className="flex items-center font-medium">
                     {isFolder ? 'Folder' : 'File'} Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
                     { isFolder ? (
                       <Help width="300">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
index 46ddc563e..cfe528088 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
@@ -46,7 +46,7 @@ const DeleteCollectionItem = ({ onClose, item, collectionUid }) => {
         handleConfirm={onConfirm}
         handleCancel={onClose}
       >
-        Are you sure you want to delete <span className="font-semibold">{item.name}</span> ?
+        Are you sure you want to delete <span className="font-medium">{item.name}</span> ?
       </Modal>
     </StyledWrapper>
   );
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
index 1f4eaf104..af54aeb03 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
@@ -28,7 +28,7 @@ const DeleteResponseExampleModal = ({ onClose, example, item, collection }) => {
         handleCancel={onClose}
         confirmButtonClass="btn-danger"
       >
-        Are you sure you want to delete the example <span className="font-semibold">{example.name}</span>?
+        Are you sure you want to delete the example <span className="font-medium">{example.name}</span>?
       </Modal>
     </Portal>
   );
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
index d6b889abb..f45013809 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
@@ -21,7 +21,7 @@ const StyledWrapper = styled.div`
   }
 
   .collection-item-name {
-    height: 1.875rem;
+    height: 1.75rem;
     cursor: pointer;
     user-select: none;
     position: relative;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
index b9b96539c..f174e6ed1 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
@@ -212,7 +212,7 @@ const ExampleItem = ({ example, item, collection }) => {
           confirmDisabled={!editName.trim()}
         >
           <div>
-            <label htmlFor="renameExampleName" className="block font-semibold">
+            <label htmlFor="renameExampleName" className="block font-medium">
               Example Name
             </label>
             <input
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
index 181a258ae..a5cfc082d 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
 
     .CodeMirror {
       height: 100%;
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       line-height: 1.5;
       padding: 0;
 
@@ -20,7 +20,7 @@ const StyledWrapper = styled.div`
 
       .CodeMirror-linenumber {
         color: ${props => props.theme.colors.text.muted};
-        font-size: 11px;
+        font-size: ${(props) => props.theme.font.size.xs};
         padding: 0 3px 0 5px;
       }
 
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeViewToolbar/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeViewToolbar/StyledWrapper.js
index c73d2ae39..2d0525e41 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeViewToolbar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeViewToolbar/StyledWrapper.js
@@ -38,7 +38,7 @@ const StyledWrapper = styled.div`
     border: 1px solid ${props => props.theme.input.border};
     border-radius: 3px;
     color: ${props => props.theme.text};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     padding: 6px 28px 6px 10px;
     min-width: 140px;
     height: 32px;
@@ -75,7 +75,7 @@ const StyledWrapper = styled.div`
     border: 1px solid ${props => props.theme.input.border};
     border-radius: 3px;
     color: ${props => props.theme.text};
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     cursor: pointer;
     transition: all 0.15s ease;
     display: flex;
@@ -99,7 +99,7 @@ const StyledWrapper = styled.div`
       align-items: center;
       gap: 8px;
       cursor: pointer;
-      font-size: 13px;
+      font-size: ${(props) => props.theme.font.size.base};
       color: ${props => props.theme.text};
 
       input[type="checkbox"] {
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
index 324e9ec3c..df690e313 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
@@ -31,13 +31,13 @@ const StyledWrapper = styled.div`
     padding: 20px;
 
     h1 {
-      font-size: 14px;
+      font-size: ${(props) => props.theme.font.size.base};
       margin-bottom: 8px;
       color: ${props => props.theme.text};
     }
 
     p {
-      font-size: 12px;
+      font-size: ${(props) => props.theme.font.size.sm};
       opacity: 0.8;
     }
   }
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
index 6b0cb086a..ecef1f383 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
@@ -111,7 +111,7 @@ const RenameCollectionItem = ({ collectionUid, item, onClose }) => {
         >
           <form className="bruno-form" onSubmit={formik.handleSubmit}>
             <div className='flex flex-col mt-2'>
-              <label htmlFor="name" className="block font-semibold">
+              <label htmlFor="name" className="block font-medium">
                 {isFolder ? 'Folder' : 'Request'} Name
               </label>
               <input
@@ -136,7 +136,7 @@ const RenameCollectionItem = ({ collectionUid, item, onClose }) => {
             {showFilesystemName && (
               <div className="mt-4">
                 <div className="flex items-center justify-between">
-                  <label htmlFor="filename" className="flex items-center font-semibold">
+                  <label htmlFor="filename" className="flex items-center font-medium">
                     {isFolder ? 'Folder' : 'File'} Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
                     { isFolder ? (
                       <Help width="300">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
index 608d3b422..7b2eafd5b 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: 0.6875rem;
+  font-size: ${(props) => props.theme.font.size.xs};
   display: flex;
   align-self: stretch;
   align-items: center;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
index 4e3525df9..69f9777c9 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@@ -20,7 +20,7 @@ const Wrapper = styled.div`
   }
 
   .collection-item-name {
-    height: 1.875rem;
+    height: 1.75rem;
     cursor: pointer;
     user-select: none;
     position: relative;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js
index 2e4c7dc55..ef107d493 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js
@@ -76,7 +76,7 @@ const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) =>
     >
       <div className="flex items-center">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <p className="mt-4">
         Do you want to save the changes you made to the following{' '}
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
index 44007deb6..cd95d8cfc 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
@@ -38,11 +38,11 @@ const RemoveCollection = ({ onClose, collectionUid }) => {
     <Modal size="sm" title="Close Collection" confirmText="Close" handleConfirm={onConfirm} handleCancel={onClose}>
       <div className="flex items-center">
         <IconFiles size={18} strokeWidth={1.5} />
-        <span className="ml-2 mr-4 font-semibold">{collection.name}</span>
+        <span className="ml-2 mr-4 font-medium">{collection.name}</span>
       </div>
       <div className="break-words text-xs mt-1">{collection.pathname}</div>
       <div className="mt-4">
-        Are you sure you want to close collection <span className="font-semibold">{collection.name}</span> in Bruno?
+        Are you sure you want to close collection <span className="font-medium">{collection.name}</span> in Bruno?
       </div>
       <div className="mt-4">
         It will still be available in the file system at the above location and can be re-opened later.
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
index 0d3a4c34a..608c9d00e 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
@@ -45,7 +45,7 @@ const RenameCollection = ({ collectionUid, onClose }) => {
     <Modal size="sm" title="Rename Collection" confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
       <form className="bruno-form" onSubmit={e => e.preventDefault()}>
         <div>
-          <label htmlFor="name" className="block font-semibold">
+          <label htmlFor="name" className="block font-medium">
             Name
           </label>
           <input
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
index dc2e05251..3598f3744 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
@@ -2,11 +2,10 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .collection-name {
-    height: 1.875rem;
+    height: 1.75rem;
     cursor: pointer;
     user-select: none;
     padding-left: 8px;
-    font-weight: 600;
     border: ${(props) => props.theme.dragAndDrop.borderStyle} transparent;
 
     .rotate-90 {
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js
index 54ef650cb..c45141ee0 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js
@@ -28,7 +28,7 @@ const StyledWrapper = styled.div`
     background-color: ${(props) => props.theme.requestTabs.active.bg};
     border: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
     border-radius: 4px;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     color: ${(props) => props.theme.text};
     white-space: nowrap;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js
index ba12cc6e4..1c0715e52 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js
@@ -180,7 +180,7 @@ const RemoveCollectionsModal = ({ collectionUids, onClose }) => {
       className={`${showAllCollections ? 'show-less-link' : 'show-more-link'} w-fit flex items-center mt-2 cursor-pointer`}
       onClick={() => setShowAllCollections(!showAllCollections)}
     >
-      <span className="text-sm text-link">
+      <span className="text-link">
         {showAllCollections ? 'Show less' : `Show ${hiddenCollectionsCount} more`}
       </span>
     </span>
@@ -201,7 +201,7 @@ const RemoveCollectionsModal = ({ collectionUids, onClose }) => {
             <>
               <div className="flex items-center font-normal">
                 <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-                <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+                <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
               </div>
               <div className="font-normal mt-4">
                 Do you want to save changes you made to the following{' '}
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/index.js b/packages/bruno-app/src/components/Sidebar/Collections/index.js
index 5bc8e8754..3eed809f8 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/index.js
@@ -32,7 +32,7 @@ const Collections = () => {
 
       <div className="mt-4 relative collection-filter px-2">
         <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-          <span className="text-gray-500 sm:text-sm">
+          <span className="text-gray-500">
             <IconSearch size={16} strokeWidth={1.5} />
           </span>
         </div>
@@ -45,7 +45,7 @@ const Collections = () => {
           autoCorrect="off"
           autoCapitalize="off"
           spellCheck="false"
-          className="block w-full pl-7 py-1 sm:text-sm"
+          className="block w-full pl-7 py-1"
           value={searchText}
           onChange={(e) => setSearchText(e.target.value.toLowerCase())}
         />
diff --git a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
index 2a3f759ce..216261fc5 100644
--- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
@@ -106,7 +106,7 @@ const CreateCollection = ({ onClose }) => {
         <Modal size="sm" title="Create Collection" hideFooter={true} handleCancel={onClose}>
           <form className="bruno-form" onSubmit={formik.handleSubmit}>
             <div>
-              <label htmlFor="collection-name" className="flex items-center font-semibold">
+              <label htmlFor="collection-name" className="flex items-center font-medium">
                 Name
               </label>
               <input
@@ -129,7 +129,7 @@ const CreateCollection = ({ onClose }) => {
                 <div className="text-red-500">{formik.errors.collectionName}</div>
               ) : null}
 
-              <label htmlFor="collection-location" className="font-semibold mt-3 flex items-center">
+              <label htmlFor="collection-location" className="font-medium mt-3 flex items-center">
                 Location
                 <Help>
                   <p>
@@ -162,9 +162,6 @@ const CreateCollection = ({ onClose }) => {
                 <span
                   className="text-link cursor-pointer hover:underline"
                   onClick={browse}
-                  style={{
-                    fontSize: '0.8125rem'
-                  }}
                 >
                   Browse
                 </span>
@@ -172,7 +169,7 @@ const CreateCollection = ({ onClose }) => {
               {formik.values.collectionName?.trim()?.length > 0 && (
                 <div className="mt-4">
                   <div className="flex items-center justify-between">
-                    <label htmlFor="filename" className="flex items-center font-semibold">
+                    <label htmlFor="filename" className="flex items-center font-medium">
                       Folder Name
                       <Help width="300">
                         <p>
@@ -227,7 +224,7 @@ const CreateCollection = ({ onClose }) => {
 
               {showAdvanced && (
                 <div className="mt-4">
-                  <label htmlFor="format" className="flex items-center font-semibold">
+                  <label htmlFor="format" className="flex items-center font-medium">
                     File Format
                     <Help width="300">
                       <p>
diff --git a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js
index d238fd206..c6fe55753 100644
--- a/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js
+++ b/packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js
@@ -121,14 +121,14 @@ const GoldenEdition = ({ onClose }) => {
       <Modal size="sm" title={'Golden Edition'} handleCancel={onClose} hideFooter={true}>
         <div className={`flex flex-col w-full ${themeBasedContainerClassNames}`}>
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold">Golden Edition</h3>
+            <h3 className="text-lg font-medium">Golden Edition</h3>
             <a
               onClick={() => {
                 goldenEditionBuyClick();
                 window.open('https://www.usebruno.com/pricing', '_blank');
               }}
               target="_blank"
-              className="flex text-white bg-yellow-600 hover:bg-yellow-700 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer"
+              className="flex text-white bg-yellow-600 hover:bg-yellow-700 font-medium rounded-lg px-4 py-2 text-center cursor-pointer"
             >
               <IconHeart size={18} strokeWidth={1.5} /> <span className="ml-2">Buy</span>
             </a>
@@ -138,8 +138,8 @@ const GoldenEdition = ({ onClose }) => {
               <div className="my-4">
                 <span className="text-3xl font-extrabold">$19</span>
               </div>
-              <p className="bg-yellow-200 text-black rounded-md px-2 py-1 mb-2 inline-flex text-sm">One Time Payment</p>
-              <p className="text-sm">perpetual license for 2 devices, with 2 years of updates</p>
+              <p className="bg-yellow-200 text-black rounded-md px-2 py-1 mb-2 inline-flex">One Time Payment</p>
+              <p>perpetual license for 2 devices, with 2 years of updates</p>
             </div>
           ) : (
             <div>
@@ -147,8 +147,8 @@ const GoldenEdition = ({ onClose }) => {
                 <span className="text-3xl font-extrabold">$49</span>
                 <span className="ml-2">/&nbsp;user</span>
               </div>
-              <p className="bg-yellow-200 text-black rounded-md px-2 py-1 mb-2 inline-flex text-sm">One Time Payment</p>
-              <p className="text-sm">perpetual license with 2 years of updates</p>
+              <p className="bg-yellow-200 text-black rounded-md px-2 py-1 mb-2 inline-flex">One Time Payment</p>
+              <p>perpetual license with 2 years of updates</p>
             </div>
           )}
           <div
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollection/FullscreenLoader/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollection/FullscreenLoader/index.js
index d5a26ad22..4c5b10bd6 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/FullscreenLoader/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/FullscreenLoader/index.js
@@ -32,7 +32,7 @@ const FullscreenLoader = ({ isLoading }) => {
       <div className="flex flex-col items-center p-8 rounded-lg bg-white dark:bg-zinc-800 shadow-lg max-w-md text-center">
         <IconLoader2 className="animate-spin h-12 w-12 mb-4" strokeWidth={1.5} />
         <h3 className="text-lg font-medium text-zinc-900 dark:text-zinc-50 mb-2">{loadingMessage}</h3>
-        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+        <p className="text-zinc-500 dark:text-zinc-400">
           This may take a moment depending on the collection size
         </p>
       </div>
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
index f0760f7e4..e5b90d7d2 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -126,7 +126,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
     <Modal size="sm" title="Import Collection" hideFooter={true} handleCancel={onClose} dataTestId="import-collection-modal">
       <div className="flex flex-col">
         <div className="mb-4">
-          <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Import from file</h3>
+          <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-2">Import from file</h3>
           <div
             onDragEnter={handleDrag}
             onDragOver={handleDrag}
@@ -149,7 +149,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
                 onChange={handleFileInputChange}
                 accept={acceptedFileTypes.join(',')}
               />
-              <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
+              <p className="text-gray-600 dark:text-gray-300 mb-2">
                 Drop file to import or{' '}
                 <button
                   className="text-blue-500 underline cursor-pointer"
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
index ffd543bf6..581ff9847 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -116,7 +116,7 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, rawData, format }) =>
     return (
       <div ref={ref} className="flex items-center justify-between w-full current-group" data-testid="grouping-dropdown">
         <div>
-          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{selectedOption.label}</div>
+          <div className="font-medium text-gray-900 dark:text-gray-100">{selectedOption.label}</div>
         </div>
         <IconCaretDown size={16} className="text-gray-400 ml-[0.25rem]" fill="currentColor" />
       </div>
@@ -155,13 +155,13 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, rawData, format }) =>
       >
         <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
           <div>
-            <label htmlFor="collectionName" className="block font-semibold">
+            <label htmlFor="collectionName" className="block font-medium">
               Name
             </label>
             <div className="mt-2">{collectionName}</div>
 
             <>
-              <label htmlFor="collectionLocation" className="font-semibold mt-4 flex items-center">
+              <label htmlFor="collectionLocation" className="font-medium mt-4 flex items-center">
                 Location
                 <Help>
                   <p>Bruno stores your collections on your computer's filesystem.</p>
@@ -198,10 +198,10 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, rawData, format }) =>
           {isOpenApi && (
             <div className="mt-4 flex gap-4 items-center">
               <div>
-                <label htmlFor="groupingType" className="block font-semibold mt-4">
+                <label htmlFor="groupingType" className="block font-medium mt-4">
                   Folder arrangement
                 </label>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-2">
+                <p className="text-gray-600 dark:text-gray-400 mt-1 mb-2">
                   Select whether to create folders according to the spec's paths or tags.
                 </p>
               </div>
diff --git a/packages/bruno-app/src/components/Sidebar/NewFolder/index.js b/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
index d7a7e6998..56d4e1464 100644
--- a/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewFolder/index.js
@@ -86,7 +86,7 @@ const NewFolder = ({ collectionUid, item, onClose }) => {
       <StyledWrapper>
         <Modal size="md" title="New Folder" hideFooter={true} handleCancel={onClose}>
           <form className="bruno-form" onSubmit={formik.handleSubmit}>
-            <label htmlFor="folderName" className="block font-semibold">
+            <label htmlFor="folderName" className="block font-medium">
               Folder Name
             </label>
             <input
@@ -112,7 +112,7 @@ const NewFolder = ({ collectionUid, item, onClose }) => {
             {showFilesystemName && (
               <div className="mt-4">
                 <div className="flex items-center justify-between">
-                  <label htmlFor="directoryName" className="flex items-center font-semibold">
+                  <label htmlFor="directoryName" className="flex items-center font-medium">
                     Folder Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
                     <Help width="300">
                       <p>
diff --git a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
index afb460344..95bf78b9c 100644
--- a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
@@ -321,7 +321,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
             }}
           >
             <div>
-              <label htmlFor="requestName" className="block font-semibold">
+              <label htmlFor="requestName" className="block font-medium">
                 Type
               </label>
 
@@ -408,7 +408,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
               </div>
             </div>
             <div className="mt-4">
-              <label htmlFor="requestName" className="block font-semibold">
+              <label htmlFor="requestName" className="block font-medium">
                 Request Name
               </label>
               <input
@@ -436,7 +436,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
             {showFilesystemName && (
               <div className="mt-4">
                 <div className="flex items-center justify-between">
-                  <label htmlFor="filename" className="flex items-center font-semibold">
+                  <label htmlFor="filename" className="flex items-center font-medium">
                     File Name <small className="font-normal text-muted ml-1">(on filesystem)</small>
                     <Help width="300">
                       <p>Bruno saves each request as a file in your collection's folder.</p>
@@ -495,7 +495,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
             {formik.values.requestType !== 'from-curl' ? (
               <>
                 <div className="mt-4">
-                  <label htmlFor="request-url" className="block font-semibold">
+                  <label htmlFor="request-url" className="block font-medium">
                     URL
                   </label>
                   <div className="flex items-center mt-2 ">
@@ -538,7 +538,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
             ) : (
               <div className="mt-4">
                 <div className="flex justify-between">
-                  <label htmlFor="request-url" className="block font-semibold">
+                  <label htmlFor="request-url" className="block font-medium">
                     cURL Command
                   </label>
                   <Dropdown className="dropdown" onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
diff --git a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
index 4388b26d7..96806e664 100644
--- a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
@@ -82,7 +82,7 @@ const TitleBar = () => {
       ) : null}
 
       <div className="flex items-center">
-        <button className="bruno-logo flex items-center gap-2 text-sm font-medium" onClick={handleTitleClick}>
+        <button className="bruno-logo flex items-center gap-2 font-medium" onClick={handleTitleClick}>
           <span aria-hidden>
             <Bruno width={30} />
           </span>
diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index 728cdeb25..c1dbb4686 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -15,7 +15,7 @@ const StyledWrapper = styled.div`
   .CodeMirror {
     background: transparent;
     height: 34px;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 30px;
     overflow: hidden;
 
diff --git a/packages/bruno-app/src/components/StatusBar/StyledWrapper.js b/packages/bruno-app/src/components/StatusBar/StyledWrapper.js
index 4304f37dc..c52693b73 100644
--- a/packages/bruno-app/src/components/StatusBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/StatusBar/StyledWrapper.js
@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.sidebar.bg};
     border-top: 1px solid ${(props) => props.theme.statusBar.border};
     color: ${(props) => props.theme.statusBar.color};
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     user-select: none;
     position: relative;
   }
@@ -51,7 +51,7 @@ const StyledWrapper = styled.div`
 
   .error-count-inline {
     font-size: 10px;
-    font-weight: 600;
+    font-weight: 500;
     color: ${(props) => props.theme.colors.text.danger};
     background: ${(props) => props.theme.colors.bg.danger}20;
     padding: 1px 4px;
diff --git a/packages/bruno-app/src/components/TagList/StyledWrapper.js b/packages/bruno-app/src/components/TagList/StyledWrapper.js
index 97fbdf920..8eab4d965 100644
--- a/packages/bruno-app/src/components/TagList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/TagList/StyledWrapper.js
@@ -17,7 +17,7 @@ const StyledWrapper = styled.div`
     background-color: ${(props) => props.theme.sidebar.bg};
     border: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
     border-radius: 3px;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
     color: ${(props) => props.theme.text};
     max-width: 200px;
@@ -101,15 +101,15 @@ const StyledWrapper = styled.div`
   }
 
   .empty-title {
-    font-weight: 600;
+    font-weight: 500;
     margin: 0 0 4px 0;
-    font-size: 14px;
+    font-size: ${(props) => props.theme.font.size.base};
     color: ${(props) => props.theme.text};
   }
 
   .empty-subtitle {
     margin: 0;
-    font-size: 12px;
+    font-size: ${(props) => props.theme.font.size.sm};
     opacity: 0.8;
     line-height: 1.5;
     color: ${(props) => props.theme.textSecondary || props.theme.text};
@@ -123,7 +123,7 @@ const StyledWrapper = styled.div`
     
     .tag-item {
       padding: 4px 8px;
-      font-size: 11px;
+      font-size: ${(props) => props.theme.font.size.xs};
     }
     
     .empty-state {
diff --git a/packages/bruno-app/src/components/VariablesEditor/index.js b/packages/bruno-app/src/components/VariablesEditor/index.js
index 322d2f3a1..ea02b1615 100644
--- a/packages/bruno-app/src/components/VariablesEditor/index.js
+++ b/packages/bruno-app/src/components/VariablesEditor/index.js
@@ -38,7 +38,7 @@ const EnvVariables = ({ collection, theme }) => {
   if (!environment) {
     return (
       <>
-        <h1 className="font-semibold mt-4 mb-2">Environment Variables</h1>
+        <h1 className="font-medium mt-4 mb-2">Environment Variables</h1>
         <div className="muted text-xs">No environment selected</div>
       </>
     );
@@ -50,7 +50,7 @@ const EnvVariables = ({ collection, theme }) => {
   return (
     <>
       <div className="flex items-center mt-4 mb-2">
-        <h1 className="font-semibold">Environment Variables</h1>
+        <h1 className="font-medium">Environment Variables</h1>
         <span className="muted ml-2">({environment.name})</span>
       </div>
       {enabledEnvVars.length > 0 ? (
@@ -73,7 +73,7 @@ const RuntimeVariables = ({ collection, theme }) => {
 
   return (
     <>
-      <h1 className="font-semibold mb-2">Runtime Variables</h1>
+      <h1 className="font-medium mb-2">Runtime Variables</h1>
       {runtimeVariablesFound ? (
         <KeyValueExplorer data={runtimeVariableArray} theme={theme} />
       ) : (
diff --git a/packages/bruno-app/src/components/Welcome/StyledWrapper.js b/packages/bruno-app/src/components/Welcome/StyledWrapper.js
index 886ae15ab..d586f7782 100644
--- a/packages/bruno-app/src/components/Welcome/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Welcome/StyledWrapper.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   .heading {
     color: ${(props) => props.theme.welcome.heading};
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.base};
   }
 
   .muted {
@@ -34,7 +34,7 @@ const StyledWrapper = styled.div`
     border-radius: 4px;
     background: ${(props) =>
       props.theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-weight: 500;
     font-family: inherit;
     line-height: 1;
diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index 0374b6600..24982aae8 100644
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@@ -68,10 +68,10 @@ const Welcome = () => {
       <div aria-hidden className="">
         <Bruno width={50} />
       </div>
-      <div className="text-xl font-semibold select-none">bruno</div>
+      <div className="text-xl font-medium select-none">bruno</div>
       <div className="mt-4">{t('WELCOME.ABOUT_BRUNO')}</div>
 
-      <div className="uppercase font-semibold heading mt-10">{t('COMMON.COLLECTIONS')}</div>
+      <div className="uppercase font-medium heading mt-10">{t('COMMON.COLLECTIONS')}</div>
       <div className="mt-4 flex items-center collection-options select-none">
         <button
           className="flex items-center"
@@ -101,7 +101,7 @@ const Welcome = () => {
         </button>
       </div>
 
-      <div className="uppercase font-semibold heading mt-10 pt-6">{t('WELCOME.LINKS')}</div>
+      <div className="uppercase font-medium heading mt-10 pt-6">{t('WELCOME.LINKS')}</div>
       <div className="mt-4 flex flex-col collection-options select-none">
         <div className="flex items-center mt-2">
           <a
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 3c55175cc..5e3e98491 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -1,6 +1,11 @@
 import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
+
+  body {
+    font-size: ${(props) => props.theme.font.size.base};
+  }
+
   .CodeMirror-gutters {
     background-color: ${(props) => props.theme.codemirror.gutter.bg} !important;
     border-right: solid 1px ${(props) => props.theme.codemirror.border};
@@ -248,7 +253,7 @@ const GlobalStyle = createGlobalStyle`
     border-radius: 0.375rem;
     box-shadow: ${(props) => props.theme.codemirror.variable.info.boxShadow};
     box-sizing: border-box;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     line-height: 1.25rem;
     margin: 0;
     min-width: 18.1875rem;
@@ -286,9 +291,9 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .CodeMirror-brunoVarInfo .var-name {
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     color: ${(props) => props.theme.codemirror.variable.info.color};
-    font-weight: 600;
+    font-weight: 500;
   }
 
   /* Scope Badge */
@@ -297,7 +302,7 @@ const GlobalStyle = createGlobalStyle`
     padding: 0.125rem 0.375rem;
     background: #D977061A;
     border-radius: 0.25rem;
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.sm};
     color: #D97706;
     letter-spacing: 0.03125rem;
   }
@@ -317,7 +322,7 @@ const GlobalStyle = createGlobalStyle`
   /* Value Display (Read-only) */
   .CodeMirror-brunoVarInfo .var-value-display {
     padding: 0.375rem 1.5rem 0.375rem 0.5rem;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-family: Inter, sans-serif;
     font-weight: 400;
     word-break: break-word;
@@ -340,7 +345,7 @@ const GlobalStyle = createGlobalStyle`
     height: 100%;
     min-height: 1.75rem;
     max-height: 11.125rem;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-family: Inter, sans-serif;
     font-weight: 400;
     line-height: 1.25rem;
@@ -375,7 +380,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror pre {
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-family: Inter, sans-serif;
     font-weight: 400;
     line-height: 1.25rem;
@@ -390,7 +395,7 @@ const GlobalStyle = createGlobalStyle`
     padding: 0;
     max-width: 13.1875rem;
     line-height: 1.25rem;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-family: Inter, sans-serif;
     font-weight: 400;
     word-break: break-all;
@@ -410,7 +415,7 @@ const GlobalStyle = createGlobalStyle`
     width: 17.1875rem;
     max-width: 13.1875rem;
     padding: 0.375rem 1.5rem 0.375rem 0.5rem;
-    font-size: 0.875rem;
+    font-size: ${(props) => props.theme.font.size.base};
     font-family: Inter, sans-serif;
     font-weight: 400;
     word-break: break-all;
@@ -459,7 +464,7 @@ const GlobalStyle = createGlobalStyle`
 
   /* Read-only Note */
   .CodeMirror-brunoVarInfo .var-readonly-note {
-    font-size: 0.625rem;
+    font-size: ${(props) => props.theme.font.size.xs};
     color: ${(props) => props.theme.colors.text.muted};
     opacity: 0.6;
     margin-top: 0.25rem;
diff --git a/packages/bruno-app/src/pages/Bruno/StyledWrapper.js b/packages/bruno-app/src/pages/Bruno/StyledWrapper.js
index c570cbf0b..403aacaac 100644
--- a/packages/bruno-app/src/pages/Bruno/StyledWrapper.js
+++ b/packages/bruno-app/src/pages/Bruno/StyledWrapper.js
@@ -19,7 +19,7 @@ const Wrapper = styled.div`
   }
 
   .fw-600 {
-    font-weight: 600;
+    font-weight: 500;
   }
 `;
 
diff --git a/packages/bruno-app/src/pages/ErrorBoundary/index.js b/packages/bruno-app/src/pages/ErrorBoundary/index.js
index e0550bf48..9a9ccb151 100644
--- a/packages/bruno-app/src/pages/ErrorBoundary/index.js
+++ b/packages/bruno-app/src/pages/ErrorBoundary/index.js
@@ -40,7 +40,7 @@ class ErrorBoundary extends React.Component {
               <Bruno width={256} />
             </div>
 
-            <h1 className="text-2xl font-semibold text-red-600 mb-2">Oops! Something went wrong</h1>
+            <h1 className="text-2xl font-medium text-red-600 mb-2">Oops! Something went wrong</h1>
             <p className="text-red-500 mb-2">
               If you are using an official production build: the above error is most likely a bug!
               <br />
diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
index fe532e006..b4d1d2014 100644
--- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
+++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
@@ -124,7 +124,7 @@ const SaveRequestsModal = ({ onClose }) => {
     >
       <div className="flex items-center">
         <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
       </div>
       <p className="mt-4">
         Do you want to save the changes you made to the following{' '}
diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
index de18baa3d..7f0b49d31 100644
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@@ -48,7 +48,7 @@
   --font-family-mono: 'Fira Code', monospace;
   --font-size-hint: .75rem;
   --font-size-inline-code: .8125rem;
-  --font-size-body: .8rem;
+  --font-size-body: 1rem; 
   --font-size-h4: 1.125rem;
   --font-size-h3: 1.375rem;
   --font-size-h2: 1.8125rem;
@@ -99,7 +99,7 @@
   --font-family-mono: 'Fira Code', monospace;
   --font-size-hint: .75rem;
   --font-size-inline-code: .8125rem;
-  --font-size-body: .9375rem;
+  --font-size-body: 1rem; 
   --font-size-h4: 1.125rem;
   --font-size-h3: 1.375rem;
   --font-size-h2: 1.8125rem;
@@ -153,10 +153,6 @@ body {
   overflow-x: hidden;
 }
 
-body {
-  font-size: 0.875rem;
-}
-
 body::-webkit-scrollbar,
 .CodeMirror-vscrollbar::-webkit-scrollbar {
   width: 0.6rem;
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 0461ec8cc..ab9a09166 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -4,6 +4,17 @@ const darkTheme = {
   textLink: '#569cd6',
   bg: '#1e1e1e',
 
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
   colors: {
     text: {
       green: 'rgb(11 178 126)',
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index fcb1af8da..e16ee1339 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -4,6 +4,17 @@ const lightTheme = {
   textLink: '#1663bb',
   bg: '#fff',
 
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
   colors: {
     text: {
       green: '#047857',
diff --git a/packages/bruno-electron/src/store/preferences.js b/packages/bruno-electron/src/store/preferences.js
index f904b957c..0e899d263 100644
--- a/packages/bruno-electron/src/store/preferences.js
+++ b/packages/bruno-electron/src/store/preferences.js
@@ -24,7 +24,7 @@ const defaultPreferences = {
   },
   font: {
     codeFont: 'default',
-    codeFontSize: 14
+    codeFontSize: 13
   },
   proxy: {
     mode: 'off',
@@ -120,6 +120,28 @@ class PreferencesStore {
       delete preferences.proxy.enabled;
     }
 
+    // Migrate font size from 14px to 13px for existing users
+    // Only migrate once if codeFont is 'default' (or not set) and codeFontSize is 14
+    // This ensures the migration only happens once and doesn't override user's explicit choices
+    // If user explicitly sets it to 14px after migration, it won't be migrated again
+    const fontSizeMigrated = get(preferences, '_migrations.codeFontSize14to13', false);
+    if (!fontSizeMigrated) {
+      const codeFont = get(preferences, 'font.codeFont', 'default');
+      const codeFontSize = get(preferences, 'font.codeFontSize');
+
+      // Only migrate if it's the old default combination (codeFont is default and size is 14)
+      if (codeFont === 'default' && codeFontSize === 14) {
+        preferences.font.codeFontSize = 13;
+        // Mark migration as complete
+        if (!preferences._migrations) {
+          preferences._migrations = {};
+        }
+        preferences._migrations.codeFontSize14to13 = true;
+        // Save the migrated preferences back to the store
+        this.store.set('preferences', preferences);
+      }
+    }
+
     return merge({}, defaultPreferences, preferences);
   }