diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js
index 3b218fed58..edf7f39145 100644
--- a/apps/remix-ide/src/app/tabs/debugger-tab.js
+++ b/apps/remix-ide/src/app/tabs/debugger-tab.js
@@ -5,6 +5,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
+import modalDialogCustom from '../ui/modal-dialog-custom'
 const yo = require('yo-yo')
 const css = require('./styles/debugger-tab-styles')
 
diff --git a/libs/remix-ui/debugger-ui/src/lib/DebuggerAPI.ts b/libs/remix-ui/debugger-ui/src/lib/DebuggerAPI.ts
new file mode 100644
index 0000000000..d9f8d10ff0
--- /dev/null
+++ b/libs/remix-ui/debugger-ui/src/lib/DebuggerAPI.ts
@@ -0,0 +1,65 @@
+
+import type { CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts'
+
+export interface DebuggerUIProps {
+    debuggerAPI: DebuggerAPI  
+}
+
+interface EditorEvent {
+    event: { 
+        register(eventName: 'breakpointCleared' | 'breakpointAdded' | 'contentChanged', 
+        callback: (fileName: string, row: string | number) => void) 
+    }
+}
+
+interface LineColumnLocation {
+    start: {
+        line: number, column: number
+    }, 
+    end: {
+        line: number, column: number
+    }
+}
+
+interface RawLocation {
+    start: number, length: number
+}
+
+interface Sources {
+    [fileName: string] : {content: string}
+}
+
+interface CompilationOutput {
+    source: { sources: Sources, target: string }
+    data: CompilationResult
+    getSourceName: (id: number) => string
+}
+
+interface Asts {
+    [fileName: string] : CompilationSource // ast
+}
+
+interface TransactionReceipt {
+    blockHash: string
+    blockNumber: number
+    transactionHash: string
+    transactionIndex: number
+    from: string
+    to: string
+    contractAddress: string | null    
+  }
+
+export interface DebuggerAPI {
+    offsetToLineColumnConverter: { offsetToLineColumn: (sourceLocation: RawLocation, file: number, contents: Sources, asts: Asts) => LineColumnLocation }
+    debugHash: string
+    debugHashRequest: string
+    removeHighlights: boolean
+    editor: EditorEvent
+    discardHighlight: () => void
+    highlight: (lineColumnPos: LineColumnLocation, path: string) => void
+    fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => CompilationOutput
+    getFile: (path: string) => string
+    setFile: (path: string, content: string) => void
+    getDebugWeb3: () => any // returns an instance of web3.js
+    showMessage: (title: string, message: string) => void
+} 
\ No newline at end of file
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css
index 1bbc2026b1..7bb10333dc 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css
@@ -13,4 +13,7 @@
 }
 .debuggerConfig label {
   margin: 0;
+}
+.validationError {
+  overflow-wrap: break-word;
 }
\ No newline at end of file
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index 8b159744af..6a8833df73 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -26,7 +26,9 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       debugWithGeneratedSources: false
     },
     toastMessage: '',
-    currentDebugTransaction: ''
+    currentDebugTransaction: '',
+    validationError: '',
+    txNumberIsEmpty: true
   })
 
   useEffect(() => {
@@ -85,7 +87,9 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
               try {
                 content = await debuggerModule.getFile(path)
               } catch (e) {
-                console.log('unable to fetch generated sources, the file probably doesn\'t exist yet', e)
+                const message = 'Unable to fetch generated sources, the file probably doesn\'t exist yet.'
+                debuggerModule.showMessage('Debugging error', message)
+                console.log(message, ' ', e)
               }
               if (content !== source.contents) {
                 await debuggerModule.setFile(path, source.contents)
@@ -108,6 +112,16 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     startDebugging(blockNumber, txNumber, tx)
   }
 
+  const updateTxNumberFlag = (empty: boolean) => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        txNumberIsEmpty: empty,
+        validationError: ''
+      }
+    })
+  }
+
   const unloadRequested = (blockNumber, txIndex, tx) => {
     unLoad()
   }
@@ -144,7 +158,19 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       }
     })
     const web3 = await debuggerModule.getDebugWeb3()
-    const currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
+    let currentReceipt
+    try {
+      currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
+    } catch (e) {
+      setState(prevState => {
+        return {
+          ...prevState,
+          validationError: e.message
+        }
+      })
+      console.log(e.message)
+    }
+
     const debuggerInstance = new Debugger({
       web3,
       offsetToLineColumnConverter: debuggerModule.offsetToLineColumnConverter,
@@ -153,6 +179,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           const ret = await debuggerModule.fetchContractAndCompile(address, currentReceipt)
           return ret
         } catch (e) {
+          debuggerModule.showMessage('Debugging error', 'Unable to fetch a transaction.')
           console.error(e)
         }
         return null
@@ -169,21 +196,33 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           debugging: true,
           currentReceipt,
           debugger: debuggerInstance,
-          toastMessage: `debugging ${txNumber}`
+          toastMessage: `debugging ${txNumber}`,
+          validationError: ''
         }
       })
     }).catch((error) => {
-      setState(prevState => {
-        return {
-          ...prevState,
-          toastMessage: JSON.stringify(error)
-        }
-      })
+      if (JSON.stringify(error) !== '{}') {
+        let message = 'Error: ' + JSON.stringify(error)
+        message = message.split(`\\"`).join(`'`)
+        setState(prevState => {
+          return {
+            ...prevState,
+            validationError: message
+          }
+        })
+        console.log(message)
+      }
       unLoad()
     })
   }
 
   const debug = (txHash) => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        validationError: ''
+      }
+    })
     startDebugging(null, txHash, null)
   }
 
@@ -208,8 +247,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     <div>
       <Toaster message={state.toastMessage} />
       <div className="px-2">
-        <div className="mt-3">
-          <p className="mt-2 debuggerLabel">Debugger Configuration</p>
+        <div>
+          <p className="my-2 debuggerLabel">Debugger Configuration</p>
           <div className="mt-2 debuggerConfig custom-control custom-checkbox">
             <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
@@ -218,8 +257,9 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             }} type="checkbox" title="Debug with generated sources" />
             <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (from Solidity v0.7.2)</label>
           </div>
+          { (state.validationError && !state.txNumberIsEmpty) && <span className="w-100 py-1 text-danger validationError">{state.validationError}</span> }
         </div>
-        <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
+        <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } updateTxNumberFlag={ updateTxNumberFlag } transactionNumber={ state.txNumber } debugging={ state.debugging } />
         { state.debugging && <StepManager stepManager={ stepManager } /> }
         { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </div>
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 46b937f795..dd1b76030d 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
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef } from 'react'
 import './tx-browser.css'
 
-export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, debugging }) => {
+export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, transactionNumber, debugging }) => {
   const [state, setState] = useState({
     txNumber: ''
   })
 
+  const inputValue = useRef(null)
   useEffect(() => {
     setState(prevState => {
       return {
@@ -41,35 +42,41 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de
     })
   }
 
+  const txInputOnInput = () => {
+    updateTxNumberFlag(!inputValue.current.value)
+  }
+
   return (
-    <div className="container px-0">
-      <div className="txContainer">
-        <div className="py-1 d-flex justify-content-center w-100 input-group">
+    <div className='container px-0'>
+      <div className='txContainer'>
+        <div className='py-1 d-flex justify-content-center w-100 input-group'>
           <input
+            ref={inputValue}
             value={state.txNumber}
-            className="form-control m-0 txinput"
+            className='form-control m-0 txinput'
             id='txinput'
             type='text'
             onChange={({ target: { value } }) => txInputChanged(value)}
+            onInput={txInputOnInput}
             placeholder={'Transaction hash, should start with 0x'}
-            data-id="debuggerTransactionInput"
+            data-id='debuggerTransactionInput'
             disabled={debugging}
           />
         </div>
-        <div className="d-flex justify-content-center w-100 btn-group py-1">
+        <div className='d-flex justify-content-center w-100 btn-group py-1'>
           <button
-            className="btn btn-primary btn-sm txbutton"
-            id="load"
+            className='btn btn-primary btn-sm txbutton'
+            id='load'
             title={debugging ? 'Stop debugging' : 'Start debugging'}
             onClick={handleSubmit}
-            data-id="debuggerTransactionStartButton"
+            data-id='debuggerTransactionStartButton'
             disabled={!state.txNumber }
           >
             { debugging ? 'Stop' : 'Start' } debugging
           </button>
         </div>
       </div>
-      <span id='error'></span>
+      <span id='error' />
     </div>
   )
 }