diff --git a/apps/circuit-compiler/src/app/components/versions.tsx b/apps/circuit-compiler/src/app/components/versions.tsx
index 7b6dc549754..a5688d9b202 100644
--- a/apps/circuit-compiler/src/app/components/versions.tsx
+++ b/apps/circuit-compiler/src/app/components/versions.tsx
@@ -8,7 +8,7 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
   return (
     <Dropdown>
       <Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border form-select">
-        <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
+        <div className="font-sm" style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           { versionList[currentVersion].name }
         </div>
       </Dropdown.Toggle>
diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index 4a8bed91212..a3f12a9d155 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -41,7 +41,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex">
-        <div className="me-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
+        <div className="me-auto text-nowrap text-truncate overflow-hidden font-sm" data-id={`dropdown-content`}>{children}</div>
         {icon && (
           <div className="pe-1">
             <i className={`${icon} pe-1`}></i>
diff --git a/apps/remix-ide-e2e/src/tests/editor.test.ts b/apps/remix-ide-e2e/src/tests/editor.test.ts
index bfd6767f9a7..3161dfbe20f 100644
--- a/apps/remix-ide-e2e/src/tests/editor.test.ts
+++ b/apps/remix-ide-e2e/src/tests/editor.test.ts
@@ -110,13 +110,13 @@ module.exports = {
       .executeScriptInTerminal('remix.exeCurrent()')
       .scrollToLine(33)
       .waitForElementPresent('.highlightLine34', 60000)
-      .checkElementStyle('.highlightLine34', 'background-color', 'rgba(0, 0, 0, 0)')
+      .checkElementStyle('.highlightLine34', 'background-color', 'rgb(52, 152, 219)')
       .scrollToLine(40)
       .waitForElementPresent('.highlightLine41', 60000)
-      .checkElementStyle('.highlightLine41', 'background-color', 'rgba(0, 0, 0, 0)')
+      .checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
       .scrollToLine(50)
       .waitForElementPresent('.highlightLine51', 60000)
-      .checkElementStyle('.highlightLine51', 'background-color', 'rgba(0, 0, 0, 0)')
+      .checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
   },
 
   'Should remove 1 highlight from source code #group1':
@@ -132,8 +132,8 @@ module.exports = {
         .waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
         .click('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
         .waitForElementNotPresent('.highlightLine33', 60000)
-        .checkElementStyle('.highlightLine41', 'background-color', 'rgba(0, 0, 0, 0)')
-        .checkElementStyle('.highlightLine51', 'background-color', 'rgba(0, 0, 0, 0)')
+        .checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
+        .checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
     },
 
   'Should remove all highlights from source code #group1': function (browser: NightwatchBrowser) {
diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
index 6d2e5bf8115..7896e534708 100644
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
@@ -361,7 +361,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                 classList='TSCellStyle'
               >
                 <div className='d-flex justify-content-between h-100 flex-column'>
-                  <span className='pt-4 px-1 h6 text-dark'>{template.description}</span>
+                  <span className='pt-2 px-1 h6 text-dark'>{template.description}</span>
                   <span style={{ cursor: 'pointer' }} className='mt-2 mb-1 btn btn-sm border align-items-left' onClick={() => template.onClick()}>{template.onClickLabel}</span>
                 </div>
               </RemixUIGridCell>}
@@ -409,7 +409,7 @@ const createModalMessage = async (
         <label
           htmlFor="initGitRepository"
           data-id="initGitRepositoryLabel"
-          className="m-0 form-check-label udapp_checkboxAlign"
+          className="ms-1 form-check-label udapp_checkboxAlign"
           title={window._intl.formatMessage({ id: 'filePanel.initGitRepoTitle' })}
         >
           <FormattedMessage id="filePanel.initGitRepositoryLabel" />
@@ -442,7 +442,7 @@ const createOptionsModal = (
       {['mintable', 'burnable', 'pausable'].map((feature) => (
         <div key={feature} className="d-flex ms-2 form-check">
           <input className="form-check-input" type="checkbox" name="feature" value={feature} id={feature} onChange={onChangeCheckBoxRefs} />
-          <label className="form-check-label" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
+          <label className="form-check-label ms-1" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
             <FormattedMessage id={`filePanel.${feature}`} />
           </label>
         </div>
@@ -456,7 +456,7 @@ const createOptionsModal = (
       {['transparent', 'uups'].map((type) => (
         <div key={type} className="d-flex ms-2 form-check">
           <input className="form-check-input" type="radio" name="upgradeability" value={type} id={type} onChange={onChangeRadioRefs} />
-          <label className="form-check-label" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
+          <label className="form-check-label ms-1" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
             {type.toUpperCase()}
           </label>
         </div>
diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
index 095f4238d4e..d9c6a58ee00 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
@@ -103,7 +103,7 @@
   --bs-tertiary-color-rgb: 255, 255, 255;
   --bs-tertiary-bg: #f8f9fa;
   --bs-tertiary-bg-rgb: 248, 249, 250;
-  --bs-heading-color: inherit;
+  --bs-heading-color: #fff;
   --bs-link-color: #747b90;
   --bs-link-color-rgb: 116, 123, 144;
   --bs-link-decoration: underline;
@@ -139,6 +139,10 @@
   --custom-onsurface-layer-3:#3b3c4d;
   --custom-onsurface-layer-4:#434454;
   --custom-ai-color: #2de7f3;
+  --custom-border-light: #51536b;
+  --custom-border-light-rgb: 81, 83, 107;
+  --custom-border-dark: #2c3244;
+  --custom-border-dark-rgb: 44, 50, 68;
 }
 
 [data-bs-theme=dark] {
@@ -181,7 +185,7 @@
   --bs-danger-border-subtle: #8b2e24;
   --bs-light-border-subtle: #444;
   --bs-dark-border-subtle: #303030;
-  --bs-heading-color: inherit;
+  --bs-heading-color: #fff;
   --bs-link-color: #a2a3bd;
   --bs-link-hover-color: #b6b8d4;
   --bs-link-color-rgb: 162, 163, 189;
@@ -200,6 +204,10 @@
   --custom-onsurface-layer-3:#3b3c4d;
   --custom-onsurface-layer-4:#434454;
   --custom-ai-color: #2de7f3;
+  --custom-border-light: #51536b;
+  --custom-border-light-rgb: 81, 83, 107;
+  --custom-border-dark: #2c3244;
+  --custom-border-dark-rgb: 44, 50, 68;
 }
 
 *,
@@ -241,6 +249,10 @@ body {
   color: var(--custom-ai-color) !important;
 }
 
+.font-sm {
+  font-size: 0.875em;
+}
+
 hr {
   margin: 1rem 0;
   color: inherit;
@@ -252,7 +264,8 @@ hr {
 h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
-  font-weight: 500;
+  font-weight: 400;
+  font-family: inherit;
   line-height: 1.2;
   color: var(--bs-heading-color);
 }
@@ -358,7 +371,7 @@ strong {
 }
 
 small, .small {
-  font-size: 0.875em;
+  font-size: 80%;
 }
 
 mark, .mark {
@@ -2346,7 +2359,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: .875rem;
   font-weight: 400;
   line-height: 1.5;
   color: #fff;
@@ -3092,15 +3105,15 @@ textarea.form-control-lg {
   --bs-btn-color: var(--bs-body-bg);
   --bs-btn-bg: #64c4ff;
   --bs-btn-border-color: #64c4ff;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #2f4d6c;
-  --bs-btn-hover-border-color: #2c4866;
+  --bs-btn-hover-color: var(--bs-body-bg);
+  --bs-btn-hover-bg: #64c4ff;
+  --bs-btn-hover-border-color: #64c4ff;
   --bs-btn-focus-shadow-rgb: 85, 115, 146;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #2c4866;
-  --bs-btn-active-border-color: #29445f;
+  --bs-btn-active-color: var(--bs-body-bg);
+  --bs-btn-active-bg: #64c4ff;
+  --bs-btn-active-border-color: #64c4ff;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-color: var(--bs-body-bg);
   --bs-btn-disabled-bg: #64c4ff;
   --bs-btn-disabled-border-color: #64c4ff;
 }
@@ -3108,18 +3121,18 @@ textarea.form-control-lg {
 .btn-secondary {
   --bs-btn-color: #fff;
   --bs-btn-bg: #595c76;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #595c76;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #676a83;
-  --bs-btn-hover-border-color: #363636;
+  --bs-btn-hover-border-color: #676a83;
   --bs-btn-focus-shadow-rgb: 96, 96, 96;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #4d516f;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-active-border-color: #4d516f;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #596b76;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #596b76;
 }
 
 .btn-success {
@@ -3159,35 +3172,35 @@ textarea.form-control-lg {
 .btn-warning {
   --bs-btn-color: #fff;
   --bs-btn-bg: #c97539;
-  --bs-btn-border-color: #f39c12;
+  --bs-btn-border-color: #c97539;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #d2844b;
-  --bs-btn-hover-border-color: #c27d0e;
+  --bs-btn-hover-border-color: #d2844b;
   --bs-btn-focus-shadow-rgb: 245, 171, 54;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #c56F31;
-  --bs-btn-active-border-color: #b6750e;
+  --bs-btn-active-border-color: #c56F31;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #c97539;
-  --bs-btn-disabled-border-color: #f39c12;
+  --bs-btn-disabled-border-color: #c97539;
 }
 
 .btn-danger {
   --bs-btn-color: #fff;
   --bs-btn-bg: #b84040;
-  --bs-btn-border-color: #e74c3c;
+  --bs-btn-border-color: #b84040;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #c44949;
-  --bs-btn-hover-border-color: #b93d30;
+  --bs-btn-hover-border-color: #c44949;
   --bs-btn-focus-shadow-rgb: 235, 103, 89;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #b13838;
-  --bs-btn-active-border-color: #ad392d;
+  --bs-btn-active-border-color: #b13838;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #b84040;
-  --bs-btn-disabled-border-color: #e74c3c;
+  --bs-btn-disabled-border-color: #b84040;
 }
 
 .btn-light {
@@ -3465,7 +3478,7 @@ textarea.form-control-lg {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 1rem;
+  --bs-dropdown-font-size: .875rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: var(--custom-onsurface-layer-1);
   --bs-dropdown-border-color: #444;
@@ -7621,12 +7634,12 @@ textarea.form-control-lg {
 
 .border-light {
   --bs-border-opacity: 1;
-  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
+  border-color: rgba(var(--custom-border-light-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-dark {
   --bs-border-opacity: 1;
-  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
+  border-color: rgba(var(--custom-border-dark-rgb), var(--bs-border-opacity)) !important;
 }
 
 .border-black {
diff --git a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
index b2f361f0263..c2de4d165d5 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
@@ -238,6 +238,10 @@ body {
   color: var(--custom-ai-color) !important;
 }
 
+.font-sm {
+  font-size: 0.875em;
+}
+
 hr {
   margin: 1rem 0;
   color: inherit;
@@ -2342,7 +2346,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: .875rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
@@ -3459,7 +3463,7 @@ textarea.form-control-lg {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 1rem;
+  --bs-dropdown-font-size: .875rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: var(--bs-body-bg);
   --bs-dropdown-border-color: #ced4da;
diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
index 9ffa6710ad7..3ed2b9fe9ea 100644
--- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
@@ -77,12 +77,12 @@ export const ButtonNavigation = ({
         >
           <button
             id="overback"
-            className="btn btn-link btn-sm stepButton m-0 p-0"
+            className="btn btn-primary btn-sm stepButton m-0 p-0"
             onClick={() => {
               stepOverBack && stepOverBack()
             }}
             disabled={state.overBackDisabled}
-            style={{ pointerEvents: 'none', color: 'white' }}
+            style={{ pointerEvents: 'none' }}
           >
             <span className="fas fa-reply"></span>
           </button>
@@ -105,12 +105,12 @@ export const ButtonNavigation = ({
           <button
             id="intoback"
             data-id="buttonNavigatorIntoBack"
-            className="btn btn-link btn-sm stepButton m-0 p-0"
+            className="btn btn-primary btn-sm stepButton m-0 p-0"
             onClick={() => {
               stepIntoBack && stepIntoBack()
             }}
             disabled={state.intoBackDisabled}
-            style={{ pointerEvents: 'none', color: 'white' }}
+            style={{ pointerEvents: 'none' }}
           >
             <span className="fas fa-level-up-alt"></span>
           </button>
@@ -134,12 +134,12 @@ export const ButtonNavigation = ({
           <button
             id="intoforward"
             data-id="buttonNavigatorIntoForward"
-            className="btn btn-link btn-sm stepButton m-0 p-0"
+            className="btn btn-primary btn-sm stepButton m-0 p-0"
             onClick={() => {
               stepIntoForward && stepIntoForward()
             }}
             disabled={state.intoForwardDisabled}
-            style={{ pointerEvents: 'none', color: 'white' }}
+            style={{ pointerEvents: 'none' }}
           >
             <span className="fas fa-level-down-alt"></span>
           </button>
@@ -161,12 +161,12 @@ export const ButtonNavigation = ({
         >
           <button
             id="overforward"
-            className="btn btn-link btn-sm stepButton m-0 p-0"
+            className="btn btn-primary btn-sm stepButton m-0 p-0"
             onClick={() => {
               stepOverForward && stepOverForward()
             }}
             disabled={state.overForwardDisabled}
-            style={{ pointerEvents: 'none', color: 'white' }}
+            style={{ pointerEvents: 'none' }}
           >
             <span className="fas fa-share"></span>
           </button>
@@ -189,7 +189,7 @@ export const ButtonNavigation = ({
           data-id="buttonNavigatorJumpPreviousBreakpoint"
         >
           <button
-            className="btn btn-link btn-sm m-0 p-0"
+            className="btn btn-primary btn-sm m-0 p-0"
             id="jumppreviousbreakpoint"
             data-id="buttonNavigatorJumpPreviousBreakpoint"
             onClick={() => {
@@ -199,7 +199,6 @@ export const ButtonNavigation = ({
             style={{
               pointerEvents: 'none',
               backgroundColor: 'inherit',
-              color: 'white'
             }}
           >
             <span className="fas fa-step-backward"></span>
@@ -221,7 +220,7 @@ export const ButtonNavigation = ({
           id="buttonNavigatorJumpOutContainer"
         >
           <button
-            className="btn btn-link btn-sm m-0 p-0"
+            className="btn btn-primary btn-sm m-0 p-0"
             id="jumpout"
             onClick={() => {
               jumpOut && jumpOut()
@@ -230,7 +229,6 @@ export const ButtonNavigation = ({
             style={{
               pointerEvents: 'none',
               backgroundColor: 'inherit',
-              color: 'white'
             }}
             data-id="buttonNavigatorJumpOut"
           >
@@ -253,14 +251,14 @@ export const ButtonNavigation = ({
           id="buttonNavigatorJumpNextBreakpointContainer"
         >
           <button
-            className={`${state.jumpNextBreakpointDisabled ? 'disabled' : ''} btn btn-link btn-sm m-0 p-0`}
+            className={`${state.jumpNextBreakpointDisabled ? 'disabled' : ''} btn btn-primary btn-sm m-0 p-0`}
             id="jumpnextbreakpoint"
             data-id="buttonNavigatorJumpNextBreakpoint"
             onClick={() => {
               jumpNextBreakpoint && jumpNextBreakpoint()
             }}
             disabled={state.jumpNextBreakpointDisabled}
-            style={{ pointerEvents: 'none', color: 'white' }}
+            style={{ pointerEvents: 'none' }}
           >
             <span className="fas fa-step-forward"></span>
           </button>
diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
index 0fa8d2f753b..f0fbd5e11a1 100644
--- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
@@ -58,12 +58,12 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
       className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-primary btn-sm btn-block text-decoration-none`}
     >
       <button
-        className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-link btn-sm btn-block h-100 p-0 m-0 text-decoration-none`}
+        className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-primary btn-sm btn-block h-100 p-0 m-0 text-decoration-none`}
         id="load"
         onClick={handleSubmit}
         data-id="debuggerTransactionStartButton"
         disabled={!state.txNumber || !state.isTxNumberValid}
-        style={{ pointerEvents: 'none', color: 'white' }}
+        style={{ pointerEvents: 'none' }}
       >
         <span>
           <FormattedMessage id={`debugger.${debugging ? 'stopDebugging' : 'startDebugging'}`} />
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
index f9a09e95ab9..36b0afe9beb 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
@@ -104,6 +104,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
                   >
                     <label
                       className='m-0 p-0 text-uppercase align-items-left fw-bold text-truncate overflow-hidden whitespace-nowrap'
+                      style={{ fontSize: '11px', lineHeight: '12px' }}
                     >{ props.title }
                     </label>
                   </CustomTooltip>
diff --git a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
index 40da92e9aa9..c38418ed026 100644
--- a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
@@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex align-items-center">
-        <div className="me-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
+        <div className="me-auto text-nowrap text-truncate overflow-hidden font-sm" data-id={`dropdown-content`}>{children}</div>
         {icon && (
           <div className="pe-1">
             <i className={`${icon} pe-1`}></i>
diff --git a/libs/remix-ui/helper/src/lib/components/feedback.tsx b/libs/remix-ui/helper/src/lib/components/feedback.tsx
index 626cc5ff7e8..444d7c2fd61 100644
--- a/libs/remix-ui/helper/src/lib/components/feedback.tsx
+++ b/libs/remix-ui/helper/src/lib/components/feedback.tsx
@@ -19,7 +19,7 @@ export function CompilerFeedback ({ feedback, filePathToId, hideWarnings, openEr
             <RenderIf condition={ (typeof feedback === "string") && showException }>
               <div className="circuit_feedback error alert alert-danger" data-id="circuit_feedback">
                 <span> <>{ feedback }</> </span>
-                <div className="btn-close" data-id="renderer" onClick={handleCloseException}>
+                <div className="close" data-id="renderer" onClick={handleCloseException}>
                   <i className="fas fa-times"></i>
                 </div>
                 <div className="d-flex pt-1 flex-row-reverse">
diff --git a/libs/remix-ui/helper/src/lib/components/feedbackAlert.tsx b/libs/remix-ui/helper/src/lib/components/feedbackAlert.tsx
index 949fbc88092..a24080ba5c4 100644
--- a/libs/remix-ui/helper/src/lib/components/feedbackAlert.tsx
+++ b/libs/remix-ui/helper/src/lib/components/feedbackAlert.tsx
@@ -14,7 +14,7 @@ export function FeedbackAlert ({ message, askGPT }: FeedbackAlertProps) {
     <RenderIf condition={showAlert}>
       <>
         <span> { message } </span>
-        <div className="btn-close" data-id="renderer" onClick={handleCloseAlert}>
+        <div className="close" data-id="renderer" onClick={handleCloseAlert}>
           <i className="fas fa-times"></i>
         </div>
         <div className="d-flex pt-1 flex-row-reverse">
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index 46f787d12a1..6e2a5de01d4 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -103,7 +103,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon && (
-              <span data-id={`${props.id}-modal-close`} className="btn-close" aria-label="Close" onClick={() => handleHide()}>
+              <span data-id={`${props.id}-modal-close`} className="close" aria-label="Close" onClick={() => handleHide()}>
               </span>
             )}
           </div>
diff --git a/libs/remix-ui/renderer/src/lib/renderer.tsx b/libs/remix-ui/renderer/src/lib/renderer.tsx
index 9980ee82166..8a3f56653e8 100644
--- a/libs/remix-ui/renderer/src/lib/renderer.tsx
+++ b/libs/remix-ui/renderer/src/lib/renderer.tsx
@@ -118,7 +118,7 @@ export const Renderer = ({ message, opt, plugin, context }: RendererProps) => {
               <span>{messageText}</span>
             </pre>
           )}
-          <div className="btn-close" data-id="renderer" onClick={handleClose}>
+          <div className="close" data-id="renderer" onClick={handleClose}>
             <i className="fas fa-times"></i>
           </div>
           <div className="d-flex pt-1 flex-row-reverse">
@@ -131,7 +131,7 @@ export const Renderer = ({ message, opt, plugin, context }: RendererProps) => {
             >
             </span>
             <span
-              className="button border ask-remix-ai-button text-ai btn-sm"
+              className="btn btn-sm text-ai"
               onClick={(event) => { event.preventDefault(); askGtp() }}
               style={{ borderColor: "var(--custom-ai-color)" }}
             >
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 3dbe8c2fd6e..6df5b4a8dfc 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -417,7 +417,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             value={currentContract}
             name={contractOptions.title.toString()}
             onChange={handleContractChange}
-            className="udapp_contractNames w-100 form-select p-2"
+            className="udapp_contractNames w-100 form-select p-2 border"
             disabled={contractOptions.disabled}
             style={{
               display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block',
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index 9d33d15e536..dc26a6a35fe 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -62,7 +62,7 @@ export function ContractGUI(props: ContractGUIProps) {
       setButtonOptions({
         title: title + ' - call',
         content: 'call',
-        classList: 'btn-info',
+        classList: 'btn-primary',
         dataId: title + ' - call'
       })
     } else if (props.funcABI.stateMutability === 'payable' || props.funcABI.payable) {
@@ -331,7 +331,7 @@ export function ContractGUI(props: ContractGUIProps) {
           </div>
         </CustomTooltip>
         <input
-          className="form-control"
+          className="form-control border"
           data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}
           placeholder={props.inputs}
           onChange={handleBasicInput}
@@ -366,7 +366,7 @@ export function ContractGUI(props: ContractGUIProps) {
                       ref={(el) => {
                         multiFields.current[index] = el
                       }}
-                      className="form-control"
+                      className="form-control border"
                       placeholder={inp.type}
                       data-id={`multiParamManagerInput${inp.name}`}
                       onChange={handleBasicInput}
diff --git a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
index c43b8584607..1c44a0ce70b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
@@ -20,7 +20,7 @@ export function DeployInput(props: DeployInputProps) {
         tooltipText={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
       >
         <input
-          className="form-control"
+          className="form-control border"
           data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}
           placeholder={props.inputs}
           onChange={props.handleBasicInput}
diff --git a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
index e18f541881e..84a550a525f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
@@ -25,7 +25,7 @@ export function MultiDeployInput(props: MultiDeployInputProps) {
                     ref={(el) => {
                       multiFields.current[index] = el
                     }}
-                    className="form-control"
+                    className="form-control border"
                     placeholder={inp.type}
                     data-id={`multiParamManagerInput${inp.name}`}
                   />
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 5df5cb4686a..f370836d825 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -221,7 +221,7 @@ export function UniversalDappUI(props: UdappProps) {
 
   const label = (key: string | number, value: string) => {
     return (
-      <div className="d-flex mt-2 flex-row label_item">
+      <div className="d-flex mt-2 flex-row label_item align-items-baseline">
         <label className="small fw-bold mb-0 pe-1 label_key">{key}:</label>
         <label className="m-0 label_value">{value}</label>
       </div>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx b/libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx
index 55f7d0d050d..7540ac28122 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx
@@ -29,7 +29,7 @@ export const CompilerDropdown = (props: compilerDropdownProps) => {
     <Dropdown id="versionSelector" data-id="versionSelector">
       <Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light w-100 d-inline-block border form-select" icon={null}>
         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
-          <div className="text-truncate">
+          <div className="text-truncate font-sm">
             {customVersions.map((url, i) => {
               if (selectedVersion === url) return (<span data-id="selectedVersion" key={i}>custom</span>)
             })}
diff --git a/libs/remix-ui/tabs/src/lib/components/DropdownMenu.css b/libs/remix-ui/tabs/src/lib/components/DropdownMenu.css
index 99da28f21ba..d2ebc8d8704 100644
--- a/libs/remix-ui/tabs/src/lib/components/DropdownMenu.css
+++ b/libs/remix-ui/tabs/src/lib/components/DropdownMenu.css
@@ -5,7 +5,7 @@
 }
 
 .custom-dropdown-trigger {
-    color: var(--text);
+    /* color: var(--text); */
     /* background: var(--custom-select, #2d2f3b); */
     padding: 4px 8px;
     border-left: 1px solid var(--bs-secondary);
diff --git a/libs/remix-ui/tabs/src/lib/components/DropdownMenu.tsx b/libs/remix-ui/tabs/src/lib/components/DropdownMenu.tsx
index ab64655ff3d..0735b23b6cf 100644
--- a/libs/remix-ui/tabs/src/lib/components/DropdownMenu.tsx
+++ b/libs/remix-ui/tabs/src/lib/components/DropdownMenu.tsx
@@ -49,7 +49,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({ items, disabled, onOpen, tr
         disabled={disabled}
         data-id={triggerDataId || 'custom-dropdown-trigger'}
       >
-        <i className="fas fa-angle-down" style={{ color: 'white' }}></i>
+        <i className="fas fa-angle-down"></i>
       </button>
 
       {open && (