diff --git a/apps/remix-ide/src/index.css b/apps/remix-ide/src/index.css
index 8396f022e70..c8e34313c1d 100644
--- a/apps/remix-ide/src/index.css
+++ b/apps/remix-ide/src/index.css
@@ -19,4 +19,4 @@
   font-size: 0.8rem;
   font-weight: normal;
   max-width: 300px;
-}
\ No newline at end of file
+}
diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index 67bb850a8c5..8eda4f74340 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -7,14 +7,14 @@ const profile = {
   displayName: 'Walkthrough',
   description: 'Remix walkthrough for beginner',
   version: packageJson.version,
-  methods: ['start']
+  methods: ['start', 'startRecorderW']
 }
 
 export class WalkthroughService extends Plugin {
   constructor (appManager, showWalkthrough) {
     super(profile)
-    let readyToStart = 0;
-    /*appManager.event.on('activate', (plugin) => {
+    /*let readyToStart = 0;
+    appManager.event.on('activate', (plugin) => {
       if (plugin.name === 'udapp') readyToStart++
       if (readyToStart == 2 && showWalkthrough) {
         this.start()
@@ -28,6 +28,58 @@ export class WalkthroughService extends Plugin {
     })*/
   }
 
+  startRecorderW () {
+    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..',
+        element: document.querySelector('#udappRecorderCard'),
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      },
+      {
+        element: document.querySelector('#udappRecorderUseLatest'),
+        title: 'Transactions Recorder',
+        intro: 'If set the recorder will run transactions using the latest compilation result.',
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      },
+      {
+        element: document.querySelector('#udappRecorderSave'),
+        title: 'Transactions Recorder',
+        intro: 'Once there is a transaction, click the button Save to save the scenario.',
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      },
+      {
+        element: document.querySelector('#udappRecorderRun'),
+        title: 'Transactions Recorder',
+        intro: 'Run previously saved scenario over any environment.',
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      }
+      ]
+    }).onafterchange((targetElement) => {
+      const header = document.getElementsByClassName('introjs-tooltip-header')[0]
+      if (header) {
+        header.classList.add('d-flex')
+        header.classList.add('justify-content-between')
+        header.classList.add('text-nowrap')
+        header.classList.add('pr-0')
+      }
+      const skipbutton = document.getElementsByClassName('introjs-skipbutton')[0]
+      if (skipbutton) {
+        skipbutton.classList.add('ml-3')
+        skipbutton.classList.add('text-decoration-none')
+        skipbutton.id = 'remixTourSkipbtn'
+      }
+    }).start()
+  }
+
   start () {
     if (!localStorage.getItem('hadTour_initial')) {
       introJs().setOptions({
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 14714c4a443..5a59befec92 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -514,7 +514,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             <CustomTooltip placement={'top-end'} tooltipClasses="text-wrap text-left" tooltipId="runAndDeployAddresstooltip" tooltipText={atAddressOptions.title}>
               <div id="runAndDeployAtAdressButtonContainer" data-title={atAddressOptions.title}>
                 <button
-                  className="udapp_atAddress btn-sm py-2 btn-primary"
+                  className={atAddressOptions.disabled ? "disabled udapp_atAddress btn btn-sm py-2 btn-primary"  : "udapp_atAddress btn btn-sm py-2 btn-primary"}
                   id="runAndDeployAtAdressButton"
                   disabled={atAddressOptions.disabled}
                   style={{ border: 'none' }}
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 eb446e9f7f6..4071c709f7f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -28,8 +28,13 @@ export function RecorderUI(props: RecorderProps) {
     setToggleExpander(!toggleExpander)
   }
 
+  const startWalkthrough = async () => {
+    setToggleExpander(true)
+    await props.plugin.call('walkthrough', 'startRecorderW')
+  }
+
   return (
-    <div className="udapp_cardContainer py-1 list-group-item border-top border-bottom">
+    <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="d-flex justify-content-center align-items-center">
           <label className="mt-1 udapp_recorderSectionLabel">
@@ -45,18 +50,7 @@ export function RecorderUI(props: RecorderProps) {
               {props.count}
             </div>
           </CustomTooltip>
-          <CustomTooltip
-            placement={'right'}
-            tooltipClasses="text-wrap"
-            tooltipId="info-recorder"
-            tooltipText={
-              <span>
-                <FormattedMessage id="udapp.infoRecorderTooltip" values={{br: <br />}} />
-              </span>
-            }
-          >
-            <i style={{fontSize: 'medium'}} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
-          </CustomTooltip>
+          <i style={{fontSize: 'medium'}} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true" onClick={() => startWalkthrough()}></i>
         </div>
         <div className="p-3">
           <span data-id="udappRecorderTitleExpander" onClick={toggleClass}>
@@ -65,7 +59,7 @@ export function RecorderUI(props: RecorderProps) {
         </div>
       </div>
       <div className={`pb-2 flex-column ${toggleExpander ? 'd-flex' : 'd-none'}`}>
-        <div className="mb-1 mt-1 custom-control custom-checkbox mb-1">
+        <div className="mb-1 mt-1 custom-control custom-checkbox mb-1" id='udappRecorderUseLatest'>
           <input ref={inputLive} type="checkbox" id="livemode-recorder" className="custom-control-input custom-select" name="input-livemode" />
           <CustomTooltip
             placement={'right'}
@@ -95,29 +89,27 @@ export function RecorderUI(props: RecorderProps) {
                   : intl.formatMessage({id: 'udapp.transactionSaveTooltip3'}, {count: props.count})
             }
           >
-            <span>
-              <button
-                className="btn btn-sm btn-info savetransaction udapp_recorder"
-                disabled={props.count === 0 ? true : false}
-                onClick={triggerRecordButton}
-                style={{pointerEvents: props.count === 0 ? 'none' : 'auto'}}
-              >
-                <FormattedMessage id="udapp.save" />
-              </button>
-            </span>
+            <button
+              className="btn btn-sm btn-secondary savetransaction udapp_recorder"
+              disabled={props.count === 0 ? true : false}
+              onClick={triggerRecordButton}
+              style={{pointerEvents: props.count === 0 ? 'none' : 'auto'}}
+              id="udappRecorderSave"
+            >
+              <FormattedMessage id="udapp.save" />
+            </button>
           </CustomTooltip>
           <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="tooltip-run-recorder" tooltipText={<FormattedMessage id="udapp.runRecorderTooltip" />}>
-            <span>
-              <button
-                className="btn btn-sm btn-info runtransaction udapp_runTxs"
-                data-id="runtransaction"
-                disabled={enableRunButton}
-                onClick={handleClickRunButton}
-                style={{pointerEvents: enableRunButton ? 'none' : 'auto'}}
-              >
-                <FormattedMessage id="udapp.run" />
-              </button>
-            </span>
+            <button
+              className={enableRunButton ? "btn btn-sm btn-secondary runtransaction udapp_runTxs" : "btn btn-sm btn-secondary runtransaction udapp_runTxs disabled"}
+              data-id="runtransaction"
+              disabled={enableRunButton}
+              onClick={handleClickRunButton}
+              style={{pointerEvents: enableRunButton ? 'none' : 'auto'}}
+              id="udappRecorderRun"
+            >
+              <FormattedMessage id="udapp.run" />
+            </button>
           </CustomTooltip>
         </div>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index f716bbd9a82..9f68cc99448 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -301,6 +301,7 @@ export function RunTabUI(props: RunTabProps) {
             proxy={runTab.proxy}
           />
           <RecorderUI
+            plugin={plugin}
             gasEstimationPrompt={gasEstimationPrompt}
             passphrasePrompt={passphrasePrompt}
             mainnetPrompt={mainnetPrompt}
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index b674a4987e9..93ac6990b1d 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -279,6 +279,7 @@ export interface RecorderProps {
   scenarioPrompt: (msg: string, defaultValue: string) => JSX.Element,
   count: number
   currentFile: string
+  plugin: RunTab
 }
 
 export interface InstanceContainerProps {