diff --git a/libs/remix-ui/renderer/src/lib/renderer.css b/libs/remix-ui/renderer/src/lib/renderer.css
index e69de29bb2..67e6d5b82f 100644
--- a/libs/remix-ui/renderer/src/lib/renderer.css
+++ b/libs/remix-ui/renderer/src/lib/renderer.css
@@ -0,0 +1,47 @@
+.remixui_sol.success,
+.remixui_sol.error,
+.remixui_sol.warning {
+    white-space: pre-line;
+    word-wrap: break-word;
+    cursor: pointer;
+    position: relative;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
+}
+
+.remixui_sol.success pre,
+.remixui_sol.error pre,
+.remixui_sol.warning pre {
+    white-space: pre-line;
+    overflow-y: hidden;
+    background-color: transparent;
+    margin: 0;
+    font-size: 12px;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.remixui_sol.success .close,
+.remixui_sol.error .close,
+.remixui_sol.warning .close {
+    white-space: pre-line;
+    font-weight: bold;
+    position: absolute;
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+}
+
+.remixui_sol.error {
+}
+
+.remixui_sol.warning {
+}
+
+.remixui_sol.success {
+  /* background-color:  // styles.rightPanel.message_Success_BackgroundColor; */
+}
diff --git a/libs/remix-ui/renderer/src/lib/renderer.tsx b/libs/remix-ui/renderer/src/lib/renderer.tsx
index 4b0de1e452..62426e6235 100644
--- a/libs/remix-ui/renderer/src/lib/renderer.tsx
+++ b/libs/remix-ui/renderer/src/lib/renderer.tsx
@@ -1,14 +1,61 @@
-import React from 'react' //eslint-disable-line
-
+import React, { useEffect, useState } from 'react' //eslint-disable-line
+import './renderer.css'
 interface RendererProps {
   message: any;
-  opt: any,
-  editor: any
+  opt?: any,
+  plugin: any,
+  config: any
 }
 
-export const Renderer = ({ message, opt, editor }: RendererProps) => {
-  console.log('message: ', message)
-  console.log('opt: ', opt)
+export const Renderer = ({ message, opt = {}, plugin, config }: RendererProps) => {
+  const [messageText, setMessageText] = useState(null)
+  const [editorOptions, setEditorOptions] = useState({
+    useSpan: false,
+    type: ''
+  })
+  const [classList] = useState(opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning')
+  const [close, setClose] = useState(false)
+
+  useEffect(() => {
+    if (!message) return
+    let text
+
+    if (typeof message === 'string') {
+      text = message
+    } else if (message.innerText) {
+      text = message.innerText
+    }
+
+    // ^ e.g:
+    // browser/gm.sol: Warning: Source file does not specify required compiler version! Consider adding "pragma solidity ^0.6.12
+    // https://github.com/OpenZeppelin/openzeppelin-contracts/blob/release-v3.2.0/contracts/introspection/IERC1820Registry.sol:3:1: ParserError: Source file requires different compiler version (current compiler is 0.7.4+commit.3f05b770.Emscripten.clang) - note that nightly builds are considered to be strictly less than the released version
+    let positionDetails = getPositionDetails(text)
+    const options = opt
+
+    if (!positionDetails.errFile || (opt.errorType && opt.errorType === positionDetails.errFile)) {
+      // Updated error reported includes '-->' before file details
+      const errorDetails = text.split('-->')
+      // errorDetails[1] will have file details
+      if (errorDetails.length > 1) positionDetails = getPositionDetails(errorDetails[1])
+    }
+    options.errLine = positionDetails.errLine
+    options.errCol = positionDetails.errCol
+    options.errFile = positionDetails.errFile.trim()
+
+    if (!opt.noAnnotations && opt.errFile) {
+      addAnnotation(opt.errFile, {
+        row: opt.errLine,
+        column: opt.errCol,
+        text: text,
+        type: opt.type
+      })
+    }
+
+    setMessageText(text)
+    setEditorOptions(options)
+    setClose(false)
+  }, [message])
+
   const getPositionDetails = (msg: any) => {
     const result = { } as Record<string, number | string>
 
@@ -16,49 +63,42 @@ export const Renderer = ({ message, opt, editor }: RendererProps) => {
     if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
 
     // extract line / column
-    let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
-    result.errLine = position ? parseInt(position[2]) - 1 : -1
-    result.errCol = position ? parseInt(position[3]) : -1
+    let pos = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
+    result.errLine = pos ? parseInt(pos[2]) - 1 : -1
+    result.errCol = pos ? parseInt(pos[3]) : -1
 
     // extract file
-    position = msg.match(/^(https:.*?|http:.*?|.*?):/)
-    result.errFile = position ? position[1] : ''
+    pos = msg.match(/^(https:.*?|http:.*?|.*?):/)
+    result.errFile = pos ? pos[1] : ''
     return result
   }
 
+  const addAnnotation = (file, error) => {
+    if (file === config.get('currentFile')) {
+      plugin.call('editor', 'addAnnotation', error, file)
+    }
+  }
+
   const handlePointToErrorOnClick = (location, fileName) => {
-    editor.call('editor', 'discardHighlight')
-    editor.call('editor', 'highlight', location, fileName)
+    plugin.call('editor', 'discardHighlight')
+    plugin.call('editor', 'highlight', location, fileName)
   }
 
-  if (!message) return
-  let position = getPositionDetails(message)
-  if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
-    // Updated error reported includes '-->' before file details
-    const errorDetails = message.split('-->')
-    // errorDetails[1] will have file details
-    if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1])
+  const handleClose = () => {
+    setClose(true)
   }
-  opt.errLine = position.errLine
-  opt.errCol = position.errCol
-  opt.errFile = position.errFile.trim()
-  const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
+
   return (
-    <div>
-      <div className={`sol ${opt.type} ${classList}`}>
-        <div className="close" data-id="renderer">
-          <i className="fas fa-times"></i>
-        </div>
-        <span className='d-flex flex-column' onClick={() => handlePointToErrorOnClick(opt.location, opt.fileName)}>
-          <span className='h6 font-weight-bold'>{opt.name}</span>
-          { opt.item && opt.item.warning }
-          { opt.item && opt.item.more
-            ? <span><a href={opt.item.more} target='_blank'>more</a></span>
-            : <span> </span>
-          }
-          <span title={`Position in ${opt.errFile}`}>Pos: {opt.locationString}</span>
-        </span>
-      </div>
-    </div>
+    <>
+      {
+        messageText && !close && (
+          <div className={`sol ${editorOptions.type} ${classList}`} data-id={opt.errFile} onClick={() => handlePointToErrorOnClick(opt.location, opt.fileName)}>
+            { editorOptions.useSpan ? <span> { messageText } </span> : <pre><span>{ messageText }</span></pre> }
+            <div className="close" data-id="renderer" onClick={handleClose}>
+              <i className="fas fa-times"></i>
+            </div>
+          </div>)
+      }
+    </>
   )
 }
diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
index 583f2ca3c6..42732f6e83 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
@@ -28,9 +28,6 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
       handleHide: null
     }
   })
-  useEffect(() => {
-    console.log('compileErrors: ', compileErrors)
-  }, [compileErrors])
   const [currentVersion, setCurrentVersion] = useState('') 
 
   const toast = (message: string) => {
@@ -88,15 +85,15 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
         <ContractSelection contractMap={contractMap} fileProvider={fileProvider} fileManager={fileManager} contractsDetails={contractsDetails} modal={modal} />
         <div className="remixui_errorBlobs p-4" data-id="compiledErrors">
           <span data-id={`compilationFinishedWith_${currentVersion}`}></span>
-          { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} editor={plugin} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} /> }
+          { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={plugin} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} config={config} /> }
           { compileErrors.error && (compileErrors.error.mode === 'panic') && modal('Error', panicMessage(compileErrors.error.formattedMessage), 'Close', null) }
           { compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err) => {
             if (config.get('hideWarnings')) {
               if (err.severity !== 'warning') {
-                return <Renderer message={err.formattedMessage} editor={plugin} opt={{ type: err.severity, errorType: err.type }} />
+                return <Renderer message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
               }
             } else {
-              return <Renderer message={err.formattedMessage} editor={plugin} opt={{ type: err.severity, errorType: err.type }} />
+              return <Renderer message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
             }
           }) }
         </div>