diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index f0216cb2a6..4974934198 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -15,6 +15,7 @@ import Button from 'react-bootstrap/Button'
 import './app.css'
 import { CustomTooltip } from '@remix-ui/helper'
 import { Form } from 'react-bootstrap'
+import { CompileErrorCard } from './components/CompileErrorCard'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -68,6 +69,9 @@ const App = () => {
 
   useEffect(() => {
     remixClient.eventEmitter.on('setOutput', (payload) => {
+      if (payload.status === 'failed') {
+        console.error('Error in the compiler', payload)
+      }
       setOutput(payload)
     })
 
@@ -95,6 +99,7 @@ const App = () => {
     setOutput(remixClient.compilerOutput)
   }
 
+  console.log('output', output)
   return (
     <main id="vyper-plugin">
       <header>
@@ -161,7 +166,7 @@ const App = () => {
               <>
                 <VyperResult output={output} plugin={remixClient} />
               </>
-            ) : null
+            ) : output.status === 'failed' ? <CompileErrorCard output={output} /> : null
           }
         </article>
       </section>
diff --git a/apps/vyper/src/app/components/CompileErrorCard.tsx b/apps/vyper/src/app/components/CompileErrorCard.tsx
new file mode 100644
index 0000000000..53f2486c70
--- /dev/null
+++ b/apps/vyper/src/app/components/CompileErrorCard.tsx
@@ -0,0 +1,19 @@
+import Reaact from 'react'
+
+export function CompileErrorCard(props: any) {
+  return (
+    <div id="vyperErrorResult" className="px-2 mx-3 alert alert-danger error" title={props.output.message}>
+      <i className="fas fa-exclamation-circle text-danger"></i>
+      <span
+        data-id="error-message"
+        className=""
+        style={{
+          overflowX: 'hidden',
+          textOverflow: 'ellipsis'
+        }}
+      >
+        {props.output.message.trim()}
+      </span>
+    </div>
+  )
+}
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index a1f799cfb0..3234ef0cdc 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -59,7 +59,7 @@ function VyperResult({ output, plugin }: VyperResultProps) {
   return (
     <>
       <div className="border border-top"></div>
-      <div className="d-flex justify-content-center px-2 w-100 flex-column">
+      <div className="d-flex justify-content-center px-2 w-100 flex-column border border-bottom">
         <button data-id="compilation-details" className="btn btn-secondary w-100" onClick={async () => {
           await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 3b624211ec..fcb32a5b7a 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -181,16 +181,15 @@ export async function compileContract(contract: string, compilerUrl: string, set
     try {
       _contract = await remixClient.getContract()
     } catch (e: any) {
-      if (setOutput === null || setOutput === undefined) {
-        const compileResult = {
-          status: 'failed',
-          message: e.message
-        }
-        const compileResultKey = ''
-        remixClient.eventEmitter.emit('setOutput', { compileResultKey, compileResult })
-      } else {
-        setOutput('', {status: 'failed', message: e.message})
+      // if (setOutput === null || setOutput === undefined) {
+      const compileResult = {
+        status: 'failed',
+        message: e.message
       }
+      remixClient.eventEmitter.emit('setOutput', compileResult)
+      // } else {
+      //   setOutput('', {status: 'failed', message: e.message})
+      // }
       return
     }
     remixClient.changeStatus({
@@ -201,12 +200,16 @@ export async function compileContract(contract: string, compilerUrl: string, set
     let output
     try {
       output = await compile(compilerUrl, _contract)
+      console.log('checking compile result', output)
+      remixClient.eventEmitter.emit('setOutput', output)
     } catch (e: any) {
       remixClient.changeStatus({
         key: 'failed',
         type: 'error',
-        title: e.message
+        title: `${e.message} debugging`
       })
+      // setOutput !== null || setOutput !== undefined && setOutput('', {status: 'failed', message: e.message})
+      remixClient.eventEmitter.emit('setOutput', {status: 'failed', message: e.message})
       return
     }
     const compileReturnType = () => {
@@ -288,6 +291,7 @@ export async function compileContract(contract: string, compilerUrl: string, set
       type: 'error',
       title: err.message
     })
+    remixClient.eventEmitter.emit('setOutput', {status: 'failed', message: err.message})
   }
 }