diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
index 5c16277d2ea..103957dc538 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
@@ -5632,7 +5632,7 @@ a.close.disabled {
   vertical-align: text-top !important;
 }
 .bg-primary {
-  background-color: #28282D !important;
+  background-color: var(--primary) !important;
 }
 a.bg-primary:focus,
 a.bg-primary:hover,
diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index de21208e3f0..04880bec3b4 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -19,7 +19,7 @@ export class WalkthroughService extends Plugin {
     introJs().setOptions({
       steps: [{
         title: 'Transactions Recorder',
-        intro: 'Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider.Click to launch the Home tab that contains links, tips, and shortcuts..',
+        intro: 'Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider. Click to launch the Home tab that contains links, tips, and shortcuts.',
         element: document.querySelector('#udappRecorderCard'),
         tooltipClass: 'bg-light text-dark',
         position: 'right',
@@ -28,7 +28,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderUseLatest'),
         title: 'Transactions Recorder',
-        intro: 'If set the recorder will run transactions using the latest compilation result.',
+        intro: 'If selected the recorder will run transactions using the latest compilation result.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'
@@ -36,7 +36,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderSave'),
         title: 'Transactions Recorder',
-        intro: 'Once there is a one or a few transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
+        intro: 'Once one or more transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index c83e0331361..450bc251d61 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -35,9 +35,9 @@ export function RecorderUI(props: RecorderProps) {
 
   return (
     <div className="udapp_cardContainer py-1 list-group-item border-top border-bottom" id="udappRecorderCard">
-      <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
+      <div className="udapp_recorderSection d-flex justify-content-between">
         <div className="d-flex justify-content-center align-items-center">
-          <label className="mt-1 udapp_recorderSectionLabel">
+          <label className="text-nowrap mt-1 udapp_recorderSectionLabel" onClick={toggleClass}>
             <FormattedMessage id="udapp.transactionsRecorded" />
           </label>
           <CustomTooltip
@@ -46,7 +46,7 @@ export function RecorderUI(props: RecorderProps) {
             tooltipId="recordedTransactionsCounttooltip"
             tooltipText={<FormattedMessage id="udapp.transactionsCountTooltip" />}
           >
-            <div className="ml-2 badge badge-pill badge-primary text-center" data-title="The number of recorded transactions">
+            <div className="pl-3 badge badge-pill badge-primary text-center" style={{cursor:"default"}} data-title="The number of recorded transactions">
               {props.count}
             </div>
           </CustomTooltip>
@@ -66,6 +66,7 @@ export function RecorderUI(props: RecorderProps) {
             </i>
           </CustomTooltip>
         </div>
+        <div className="w-100" onClick={toggleClass}></div>
         <div className="p-3">
           <span data-id="udappRecorderTitleExpander" onClick={toggleClass}>
             <i className={!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down'} aria-hidden="true"></i>