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 796d116d137..bda4bbc9a6e 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
@@ -110,7 +110,7 @@
   --bs-link-hover-color: #525765;
   --bs-link-hover-color-rgb: 82, 87, 101;
   --bs-code-color: #e83e8c;
-  --bs-highlight-color: #fff;
+  --bs-highlight-color: #222336;
   --bs-highlight-bg: #fdebd0;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -397,7 +397,7 @@ small, .small {
 }
 
 mark, .mark {
-  padding: 0.1875em;
+  padding: 0.1875em !important;
   color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
@@ -3119,7 +3119,7 @@ textarea.form-control-lg {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
   background-color: var(--bs-btn-disabled-bg);
-  border-color: var(--bs-btn-disabled-border-color);
+  /* border-color: var(--bs-btn-disabled-border-color); */
   opacity: var(--bs-btn-disabled-opacity);
 }
 
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 f48c0467cb7..c7c87781995 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
@@ -3104,7 +3104,7 @@ textarea.form-control-lg {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
   background-color: var(--bs-btn-disabled-bg);
-  border-color: var(--bs-btn-disabled-border-color);
+  /* border-color: var(--bs-btn-disabled-border-color); */
   opacity: var(--bs-btn-disabled-opacity);
 }
 
diff --git a/libs/remix-ui/git/src/components/navigation/branchedetails.tsx b/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
index 97bf47a94be..b1d5a12d4c9 100644
--- a/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
+++ b/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
@@ -68,7 +68,7 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
-          <i className="fa fa-code-branch ms-1"></i>
+          <i className="fa fa-code-branch ms-2"></i>
           <div className={`ms-1 ${context.currentBranch.name === branch.name && allowCheckout ? 'text-success' : ''}`}>{branch.name} {branch.remote ? `on ${branch.remote.name}` : ''}</div>
 
         </div>
diff --git a/libs/remix-ui/git/src/components/navigation/branches.tsx b/libs/remix-ui/git/src/components/navigation/branches.tsx
index 7c771a91f0b..959e8ff842c 100644
--- a/libs/remix-ui/git/src/components/navigation/branches.tsx
+++ b/libs/remix-ui/git/src/components/navigation/branches.tsx
@@ -22,7 +22,7 @@ export const BranchesNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-        <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/clone.tsx b/libs/remix-ui/git/src/components/navigation/clone.tsx
index 650d6c73aa3..ac5c5c583cd 100644
--- a/libs/remix-ui/git/src/components/navigation/clone.tsx
+++ b/libs/remix-ui/git/src/components/navigation/clone.tsx
@@ -16,7 +16,7 @@ export const CloneNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between pb-1  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-        <span data-id='clone-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span data-id='clone-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/commands.tsx b/libs/remix-ui/git/src/components/navigation/commands.tsx
index 7719a033ff8..3046ea66b82 100644
--- a/libs/remix-ui/git/src/components/navigation/commands.tsx
+++ b/libs/remix-ui/git/src/components/navigation/commands.tsx
@@ -21,7 +21,7 @@ export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-        <span data-id='commands-panel' onClick={() => handleClick()} role={'button'} className="nav d-flex justify-content-start align-items-center w-75">
+        <span data-id='commands-panel' onClick={() => handleClick()} role={'button'} className="nav d-flex justify-content-start align-items-center w-75 ms-1">
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/commits.tsx b/libs/remix-ui/git/src/components/navigation/commits.tsx
index 6c1251383f3..c3f5274aaf5 100644
--- a/libs/remix-ui/git/src/components/navigation/commits.tsx
+++ b/libs/remix-ui/git/src/components/navigation/commits.tsx
@@ -43,7 +43,7 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
   return (
     <>
       <div className={`d-flex justify-content-between ${activePanel === eventKey ? 'bg-light' : ''} ${ahead || behind? 'text-success':''}`}>
-        <span data-id={`commits-panel${ahead?'-ahead':''}${behind?'-behind':''}`} onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-100'>
+        <span data-id={`commits-panel${ahead?'-ahead':''}${behind?'-behind':''}`} onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-100 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/github.tsx b/libs/remix-ui/git/src/components/navigation/github.tsx
index 189c83d66f9..ba36ab927de 100644
--- a/libs/remix-ui/git/src/components/navigation/github.tsx
+++ b/libs/remix-ui/git/src/components/navigation/github.tsx
@@ -17,7 +17,7 @@ export const GitHubNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-        <span data-id='github-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span data-id='github-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/log.tsx b/libs/remix-ui/git/src/components/navigation/log.tsx
index f8e0745c93c..1d496185193 100644
--- a/libs/remix-ui/git/src/components/navigation/log.tsx
+++ b/libs/remix-ui/git/src/components/navigation/log.tsx
@@ -46,7 +46,7 @@ export const LogNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey ? 'bg-light' : '')}>
-        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/remotes.tsx b/libs/remix-ui/git/src/components/navigation/remotes.tsx
index cbc5a2e19ab..dcc1a75de62 100644
--- a/libs/remix-ui/git/src/components/navigation/remotes.tsx
+++ b/libs/remix-ui/git/src/components/navigation/remotes.tsx
@@ -19,7 +19,7 @@ export const RemotesNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between pt-1 pb-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-        <span data-id='remotes-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span data-id='remotes-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/settings.tsx b/libs/remix-ui/git/src/components/navigation/settings.tsx
index 53fcf3ff6e6..8cbd00659e0 100644
--- a/libs/remix-ui/git/src/components/navigation/settings.tsx
+++ b/libs/remix-ui/git/src/components/navigation/settings.tsx
@@ -20,7 +20,7 @@ export const SettingsNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx b/libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx
index 82f7172e583..eacb840dee1 100644
--- a/libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx
+++ b/libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx
@@ -26,7 +26,7 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
   return (
     <>
       <div className={'d-flex align-items-center justify-content-between ' + (activePanel === eventKey ? 'bg-light' : '')}>
-        <span data-id='sourcecontrol-panel' onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'
+        <span data-id='sourcecontrol-panel' onClick={() => handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'
         >
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
diff --git a/libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx b/libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx
index 814b949c363..fc750e8fad5 100644
--- a/libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx
+++ b/libs/remix-ui/git/src/components/navigation/sourcecontrolgroup.tsx
@@ -30,7 +30,7 @@ export const SourceControlGroupNavigation = (props: SourceControlGroupNavigation
   return (
     <>
       <div className={'d-flex justify-content-between  pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75 ms-1'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/panels/commands/pushpull.tsx b/libs/remix-ui/git/src/components/panels/commands/pushpull.tsx
index 088c9cb7094..18bcb801f7e 100644
--- a/libs/remix-ui/git/src/components/panels/commands/pushpull.tsx
+++ b/libs/remix-ui/git/src/components/panels/commands/pushpull.tsx
@@ -205,7 +205,7 @@ export const PushPull = () => {
 
       <div className="pt-3 d-flex align-items-center remixui_compilerConfig form-check">
         <input checked={force} onChange={e => onForceChange(e)} className="form-check-input" type="checkbox" data-id="compilerContainerAutoCompile" id="forcepush" title="Force Push" />
-        <label className="form-check-label " htmlFor="forcepush">Force push</label>
+        <label className="form-check-label ms-1" htmlFor="forcepush">Force push</label>
       </div>
 
     </>)
diff --git a/libs/remix-ui/git/src/components/panels/init.tsx b/libs/remix-ui/git/src/components/panels/init.tsx
index 37996deddd7..3bb29d0f973 100644
--- a/libs/remix-ui/git/src/components/panels/init.tsx
+++ b/libs/remix-ui/git/src/components/panels/init.tsx
@@ -19,7 +19,7 @@ export const Init = () => {
 
       <div>
         <div className='mt-1 mb-2'>
-          <h5>INITIALIZE</h5>
+          <h6>INITIALIZE</h6>
           <GitUIButton
             onClick={init}
             className="btn w-md-25 w-100 btn-primary"
diff --git a/libs/remix-ui/git/src/components/panels/setup.tsx b/libs/remix-ui/git/src/components/panels/setup.tsx
index ca1991e6eed..761fb98cd23 100644
--- a/libs/remix-ui/git/src/components/panels/setup.tsx
+++ b/libs/remix-ui/git/src/components/panels/setup.tsx
@@ -11,10 +11,10 @@ export const Setup = ({ callback }) => {
 
   return (
     <>
-      <h5>SETUP REQUIRED</h5>
+      <h6>SETUP REQUIRED</h6>
       <div>
         <div className='mt-1 mb-2'>
-          To ensure that your commits are properly attributed in Git, you need to <a href='#' onClick={startSettingUp} className='cursor-pointer me-1'>configure a username and email address or connect to GitHub.</a>
+          To ensure that your commits are properly attributed in Git, you need to <a href='#' onClick={startSettingUp} className='cursor-pointer me-1'>configure a username and email OR connect to GitHub.</a>
           These credentials will be used to identify the author of the commit.
 
           <a href='#' onClick={startSettingUp} className='ms-1 cursor-pointer'>
diff --git a/libs/remix-ui/git/src/components/panels/sourcecontrol/sourcecontrolitem.tsx b/libs/remix-ui/git/src/components/panels/sourcecontrol/sourcecontrolitem.tsx
index 9d57e27b86a..d0fca2bbb9b 100644
--- a/libs/remix-ui/git/src/components/panels/sourcecontrol/sourcecontrolitem.tsx
+++ b/libs/remix-ui/git/src/components/panels/sourcecontrol/sourcecontrolitem.tsx
@@ -52,7 +52,7 @@ export const SourceControlItem = (props: SourceControlItemProps) => {
   if (!file.statusNames || file.statusNames.length === 0) return null
 
   return (<>
-    <div data-status={file.statusNames.join('-')} data-file={file.filename} className="d-flex w-100 d-flex flex-row align-items-center">
+    <div data-status={file.statusNames.join('-')} data-file={file.filename} className="d-flex w-100 d-flex flex-row align-items-center mt-2">
       <div className='pointer gitfile long-and-truncated' onClick={async () => await fileClick(file)}>
         <span className='fw-bold long-and-truncated'>{path.basename(file.filename)}</span>
         <div className='text-secondary long-and-truncated'> {file.filename}</div>
diff --git a/libs/remix-ui/git/src/style/index.css b/libs/remix-ui/git/src/style/index.css
index 57df5f68c99..1132584034f 100644
--- a/libs/remix-ui/git/src/style/index.css
+++ b/libs/remix-ui/git/src/style/index.css
@@ -18,7 +18,7 @@
 }
 
 .commit-navigation:hover {
-    background-color: var(--custom-select);
+    background-color: var(--custom-onsurface-layer-2);
 }
 
 .commitdetailsitem {
@@ -26,11 +26,11 @@
 }
 
 .gitfile:hover              {
-    background-color             : var(--custom-select);
+    background-color             : var(--custom-onsurface-layer-2);
 }
 
 hr {
-    background-color: var(--custom-select);
+    background-color: var(--custom-onsurface-layer-2);
 }
 
 .messageTip {
diff --git a/libs/remix-ui/git/src/types/styles.ts b/libs/remix-ui/git/src/types/styles.ts
index a462108b599..32bdb07999b 100644
--- a/libs/remix-ui/git/src/types/styles.ts
+++ b/libs/remix-ui/git/src/types/styles.ts
@@ -3,39 +3,39 @@ export const selectStyles: StylesConfig = {
   option: (baseStyles, state) => {
     return {
       ...baseStyles,
-      color: 'var(--text)',
+      color: 'var(--bs-body-color)',
     }
   },
   input(base, props) {
     return {
       ...base,
-      color: 'var(--text)',
+      color: 'var(--bs-body-color)',
     }
   },
   singleValue: (baseStyles, state) => {
     return {
       ...baseStyles,
-      color: 'var(--text)',
+      color: 'var(--bs-body-color)',
     }
   },
   control: (baseStyles, state) => ({
     ...baseStyles,
-    color: 'var(--text)',
-    backgroundColor: 'var(--custom-select)',
+    color: 'var(--bs-body-color)',
+    backgroundColor: 'var(--custom-onsurface-layer-2)',
     border: 'none',
   }),
   menu: (baseStyles, state) => {
     return {
       ...baseStyles,
-      backgroundColor: 'var(--custom-select)',
-      color: 'var(--text)',
+      backgroundColor: 'var(--custom-onsurface-layer-2)',
+      color: 'var(--bs-body-color)',
     }
   },
   menuList: (baseStyles, props) => {
     return {
       ...baseStyles,
-      backgroundColor: 'var(--custom-select)',
-      color: 'var(--text)',
+      backgroundColor: 'var(--custom-onsurface-layer-2)',
+      color: 'var(--bs-body-color)',
     }
   },
 }
diff --git a/libs/remix-ui/top-bar/src/components/githubLoginSuccess.tsx b/libs/remix-ui/top-bar/src/components/githubLoginSuccess.tsx
index 4c418763128..0abe8869db9 100644
--- a/libs/remix-ui/top-bar/src/components/githubLoginSuccess.tsx
+++ b/libs/remix-ui/top-bar/src/components/githubLoginSuccess.tsx
@@ -46,7 +46,7 @@ export default function GithubLoginSuccess ({ user, handleLogout, cloneGitReposi
       </Dropdown.Toggle>
       <Dropdown.Menu
         as={CustomTopbarMenu}
-        className="custom-dropdown-items w-75 text-decoration-none"
+        className="custom-dropdown-items w-75 text-decoration-none bg-light"
       >
         <Dropdown.Item
           data-id="github-dropdown-item-clone"