diff --git a/libs/remix-ui/terminal/src/lib/components/RenderCall.tsx b/libs/remix-ui/terminal/src/lib/components/RenderCall.tsx
index 408dcb9eb8..9fd8f9aab7 100644
--- a/libs/remix-ui/terminal/src/lib/components/RenderCall.tsx
+++ b/libs/remix-ui/terminal/src/lib/components/RenderCall.tsx
@@ -9,19 +9,24 @@ const remixLib = require('@remix-project/remix-lib')
 var typeConversion = remixLib.execution.typeConversion
 
 const RenderCall = ({ tx, resolvedData, logs, index, plugin, showTableHash, txDetails }) => {
+  const [hideModal, setHideModal] = useState(true)
   const to = resolvedData.contractName + '.' + resolvedData.fn
   const from = tx.from ? tx.from : ' - '
   const input = tx.input ? helper.shortenHexData(tx.input) : ''
   const txType = 'call'
 
+  const handleHideModal = () => {
+    setHideModal(false)
+  }
+
   const debug = (event, tx) => {
     event.stopPropagation()
     if (tx.isCall && tx.envMode !== 'vm') {
-      return (<ModalDialog
-        hide={false}
-        handleHide={() => {} }
+      return <ModalDialog
+        hide={hideModal}
+        handleHide={ handleHideModal }
         message="Cannot debug this call. Debugging calls is only possible in JavaScript VM mode."
-      />)
+      />
     } else {
       plugin.event.trigger('debuggingRequested', [tx.hash])
     }
@@ -40,7 +45,7 @@ const RenderCall = ({ tx, resolvedData, logs, index, plugin, showTableHash, txDe
         <div className='buttons'>
           <div className="debug btn btn-primary btn-sm" onClick={(event) => debug(event, tx)}>Debug</div>
         </div>
-        <i className="arrow fas fa-angle-down"></i>
+        <i className="terminal_arrow fas fa-angle-down"></i>
       </div>
       {showTableHash.includes(tx.hash) ? showTable({
         hash: tx.hash,
diff --git a/libs/remix-ui/terminal/src/lib/components/RenderKnownTransactions.tsx b/libs/remix-ui/terminal/src/lib/components/RenderKnownTransactions.tsx
index 8c6835f5f8..2ea8528425 100644
--- a/libs/remix-ui/terminal/src/lib/components/RenderKnownTransactions.tsx
+++ b/libs/remix-ui/terminal/src/lib/components/RenderKnownTransactions.tsx
@@ -9,12 +9,18 @@ const remixLib = require('@remix-project/remix-lib')
 const typeConversion = remixLib.execution.typeConversion
 
 const RenderKnownTransactions = ({ tx, receipt, resolvedData, logs, index, plugin, showTableHash, txDetails }) => {
+  const [hideModal, setHideModal] = useState(true)
+
+  const handleHideModal = () => {
+    setHideModal(false)
+  }
+
   const debug = (event, tx) => {
     event.stopPropagation()
     if (tx.isCall && tx.envMode !== 'vm') {
       return (<ModalDialog
-        hide={false}
-        handleHide={() => {} }
+        hide={hideModal}
+        handleHide={ handleHideModal }
         message="Cannot debug this call. Debugging calls is only possible in JavaScript VM mode."
       />)
     } else {
diff --git a/libs/remix-ui/terminal/src/lib/components/RenderUnknownTransactions.tsx b/libs/remix-ui/terminal/src/lib/components/RenderUnknownTransactions.tsx
index 7d372ff44b..92dd397f7e 100644
--- a/libs/remix-ui/terminal/src/lib/components/RenderUnknownTransactions.tsx
+++ b/libs/remix-ui/terminal/src/lib/components/RenderUnknownTransactions.tsx
@@ -5,12 +5,14 @@ import Context from './Context' // eslint-disable-line
 import showTable from './Table'
 
 const RenderUnKnownTransactions = ({ tx, receipt, index, plugin, showTableHash, txDetails }) => {
+  const [hideModal, setHideModal] = useState(true)
+
   const debug = (event, tx) => {
     event.stopPropagation()
     if (tx.isCall && tx.envMode !== 'vm') {
       return (<ModalDialog
-        hide={false}
-        handleHide={() => {} }
+        hide={hideModal}
+        handleHide={ handleHideModal }
         message="Cannot debug this call. Debugging calls is only possible in JavaScript VM mode."
       />)
     } else {
@@ -18,6 +20,10 @@ const RenderUnKnownTransactions = ({ tx, receipt, index, plugin, showTableHash,
     }
   }
 
+  const handleHideModal = () => {
+    setHideModal(false)
+  }
+
   const from = tx.from
   const to = tx.to
   // const obj = { from, to }
@@ -31,7 +37,7 @@ const RenderUnKnownTransactions = ({ tx, receipt, index, plugin, showTableHash,
         <div className='buttons'>
           <div className='debug btn btn-primary btn-sm' data-shared='txLoggerDebugButton' data-id={`txLoggerDebugButton${tx.hash}`} onClick={(event) => debug(event, tx)}>Debug</div>
         </div>
-        <i className = {`arrow fas ${(showTableHash.includes(tx.hash)) ? 'fa-angle-up' : 'fa-angle-down'}`}></i>
+        <i className = {`terminal_arrow fas ${(showTableHash.includes(tx.hash)) ? 'fa-angle-up' : 'fa-angle-down'}`}></i>
       </div>
       {showTableHash.includes(tx.hash) ? showTable({
         hash: tx.hash,
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
index 4353a23ea6..6c3d777539 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
@@ -279,6 +279,17 @@ element.style {
   .failed {
     color: var(--danger);
   }
+
+  .terminal_arrow {
+    color: var(--text-info);
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    margin-left: 10px;
+  }
+  .terminal_arrow:hover {
+    color: var(--secondary);
+  }
   .notavailable {
   }
   .call {
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index b7cb5cf9fd..ce0e99431e 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useReducer, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line
-import { useWindowResize } from 'beautiful-react-hooks'
 import { registerCommandAction, registerLogScriptRunnerAction, registerInfoScriptRunnerAction, registerErrorScriptRunnerAction, registerWarnScriptRunnerAction, listenOnNetworkAction, initListeningOnNetwork } from './actions/terminalAction'
 import { initialState, registerCommandReducer, addCommandHistoryReducer, registerScriptRunnerReducer } from './reducers/terminalReducer'
 import { getKeyOf, getValueOf, Objectfilter, matched } from './utils/utils'
@@ -28,7 +27,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
-  const [, setWindowHeight] = useState(window.innerHeight)
+
   // dragable state
   const [leftHeight, setLeftHeight] = useState<undefined | number>(undefined)
   const [separatorYPosition, setSeparatorYPosition] = useState<undefined | number>(undefined)
@@ -37,7 +36,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const [newstate, dispatch] = useReducer(registerCommandReducer, initialState)
   const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState)
   const [, scriptRunnerDispatch] = useReducer(registerScriptRunnerReducer, initialState)
-  const [, setIsListeningOnNetwork] = useState(false)
+
   const [clearConsole, setClearConsole] = useState(false)
   const [paste, setPaste] = useState(false)
   const [autoCompletState, setAutoCompleteState] = useState({
@@ -61,14 +60,13 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const [searchInput, setSearchInput] = useState('')
   const [showTableHash, setShowTableHash] = useState([])
 
-  useWindowResize(() => {
-    setWindowHeight(window.innerHeight)
-  })
-
   // terminal inputRef
   const inputEl = useRef(null)
   const messagesEndRef = useRef(null)
 
+  // terminal dragable
+  const leftRef = useRef(null)
+
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
   }
@@ -266,9 +264,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const mousedown = (event: MouseEvent) => {
     setSeparatorYPosition(event.clientY)
-    const leftRef = document.getElementById('dragId')
-    leftRef.style.backgroundColor = '#007AA6'
-    leftRef.style.border = '2px solid #007AA6'
+    leftRef.current.style.backgroundColor = '#007AA6'
+    leftRef.current.style.border = '2px solid #007AA6'
     setDragging(true)
   }
 
@@ -283,9 +280,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   const onMouseUp = () => {
-    const leftRef = document.getElementById('dragId')
-    leftRef.style.backgroundColor = ''
-    leftRef.style.border = ''
+    leftRef.current.style.backgroundColor = ''
+    leftRef.current.style.border = ''
     setDragging(false)
   }
 
@@ -343,7 +339,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           return val
         })
         if (values.length) {
-          return `<span class="${mode}" >${values}</span>`
+          return values
         }
       }
     } else {
@@ -362,7 +358,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const listenOnNetwork = (e: any) => {
     const isListening = e.target.checked
-    setIsListeningOnNetwork(isListening)
+    // setIsListeningOnNetwork(isListening)
     listenOnNetworkAction(event, isListening)
   }
 
@@ -445,15 +441,13 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel'>
       <div className="bar">
-        <div className="dragbarHorizontal" onMouseDown={mousedown} id='dragId'></div>
+        <div className="dragbarHorizontal" onMouseDown={mousedown} ref={leftRef}></div>
         <div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
-          {/* ${self._view.icon} */}
           <i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
           <div className="mx-2 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >
             <i className="fas fa-ban" aria-hidden="true" title="Clear console"
             ></i>
           </div>
-          {/* ${self._view.pendingTxCount} */}
           <div className="mx-2" title='Pending Transactions'>0</div>
           <div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork custom-control custom-checkbox">
             <input
@@ -473,7 +467,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           </div>
           <div className="search">
             <i className="fas fa-search searchIcon bg-light" aria-hidden="true"></i>
-            {/* ${self._view.inputSearch} */}
             <input
               // spellcheck = "false"
               onChange={(event) => setSearchInput(event.target.value.trim()) }
@@ -544,6 +537,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           </div>
         </div>
       </div>
+
     </div>
   )
 }