diff --git a/apps/circuit-compiler/src/app/services/circomPluginClient.ts b/apps/circuit-compiler/src/app/services/circomPluginClient.ts
index 44d69b9314..48aa9f942f 100644
--- a/apps/circuit-compiler/src/app/services/circomPluginClient.ts
+++ b/apps/circuit-compiler/src/app/services/circomPluginClient.ts
@@ -119,6 +119,7 @@ export class CircomPluginClient extends PluginClient {
         } else {
           // @ts-ignore
           await this.call('editor', 'clearErrorMarkers', [path])
+          this.emit('statusChanged', { key: 'none' })
         }
       }
 
@@ -130,6 +131,7 @@ export class CircomPluginClient extends PluginClient {
 
   async compile(path: string, compilationConfig?: CompilationConfig): Promise<void> {
     this.internalEvents.emit('circuit_compiling_start')
+    this.emit('statusChanged', { key: 'loading', title: 'Compiling...', type: 'info' })
     // @ts-ignore
     this.call('terminal', 'log', { type: 'log', value: 'Compiling ' + path })
     const [parseErrors, filePathToId] = await this.parse(path)
@@ -145,6 +147,7 @@ export class CircomPluginClient extends PluginClient {
       }
     } else {
       this.internalEvents.emit('circuit_parsing_done', parseErrors, filePathToId)
+      this.emit('statusChanged', { key: 'succeed', title: 'circuit compiled successfully', type: 'success' })
     }
     if (compilationConfig) {
       const { prime, version } = compilationConfig
@@ -188,6 +191,7 @@ export class CircomPluginClient extends PluginClient {
 
   async generateR1cs (path: string, compilationConfig?: CompilationConfig): Promise<void> {
     this.internalEvents.emit('circuit_generating_r1cs_start')
+    this.emit('statusChanged', { key: 'loading', title: 'Generating...', type: 'info' })
     // @ts-ignore
     this.call('terminal', 'log', { type: 'log', value: 'Generating R1CS for ' + path })
     const [parseErrors, filePathToId] = await this.parse(path)
@@ -203,6 +207,7 @@ export class CircomPluginClient extends PluginClient {
       }
     } else {
       this.internalEvents.emit('circuit_parsing_done', parseErrors, filePathToId)
+      this.emit('statusChanged', { key: 'succeed', title: 'r1cs generated successfully', type: 'success' })
     }
     if (compilationConfig) {
       const { prime, version } = compilationConfig
@@ -235,6 +240,7 @@ export class CircomPluginClient extends PluginClient {
 
   async computeWitness (input: string): Promise<void> {
     this.internalEvents.emit('circuit_computing_witness_start')
+    this.emit('statusChanged', { key: 'loading', title: 'Computing...', type: 'info' })
     const wasmPath = this.lastCompiledCircuitPath
 
     if (!wasmPath) throw new Error('No wasm file found')
@@ -245,6 +251,7 @@ export class CircomPluginClient extends PluginClient {
     // @ts-ignore
     await this.call('fileManager', 'writeFile', wasmPath.replace('.wasm', '.wtn'), witness, true)
     this.internalEvents.emit('circuit_computing_witness_done')
+    this.emit('statusChanged', { key: 'succeed', title: 'witness computed successfully', type: 'success' })
   }
 
   async resolveDependencies(filePath: string, fileContent: string, output?: Record<string, string>, depPath: string = '', blackPath: string[] = []): Promise<Record<string, string>> {
@@ -403,7 +410,13 @@ export class CircomPluginClient extends PluginClient {
 
   async logCompilerReport (report: CompilerReport[]): Promise<void> {
     this.call('terminal', 'log', { type: 'log', value: JSON.stringify(report, null, 2) })
-    if (report[0].type === 'Error') this.call('terminal', 'log', { type: 'error', value: 'previous errors were found' })
-    if (report[0].type === 'Warning') this.call('terminal', 'log', { type: 'log', value: 'previous warnings were found' })
+    if (report[0].type === 'Error') {
+      this.call('terminal', 'log', { type: 'error', value: 'previous errors were found' })
+      this.emit('statusChanged', { key: report.length, title: `You have ${report.length} problem${report.length === 1 ? '' : 's'}`, type: 'error' })
+    }
+    if (report[0].type === 'Warning') {
+      this.call('terminal', 'log', { type: 'log', value: 'previous warnings were found' })
+      this.emit('statusChanged', { key: report.length, title: `You have ${report.length} problem${report.length === 1 ? '' : 's'}`, type: 'warning' })
+    }
   }
 }
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
index 81597d56a6..e61dd3282f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
@@ -16,7 +16,7 @@ function Badge({ badgeStatus }: BadgeProps) {
    * @param {Object} key
    * @param {Object} type
    */
-  function resolveClasses(key: string, type: string) {
+  function resolveClasses(key: string | number, type: string) {
     let classes = 'remixui_status'
     switch (key) {
     case 'succeed':
@@ -38,7 +38,7 @@ function Badge({ badgeStatus }: BadgeProps) {
     return classes
   }
 
-  function checkStatusKeyValue(value: any, type: string) {
+  function checkStatusKeyValue(value: any, type: BadgeStatus['type']) {
     if (
       value === 'succeed' ||
       value === 'edited' ||
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index a7de212b38..d1c5ab8c40 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -9,14 +9,14 @@ import { IconRecord } from '../types'
 import { CustomTooltip } from '@remix-ui/helper'
 
 export interface IconStatus {
-  key: string
+  key: string | number
   title: string
-  type: string
+  type: 'danger' | 'error' | 'success' | 'info' | 'warning'
   pluginName?: string
 }
 
 export interface BadgeStatus extends IconStatus {
-  text: string
+  text: string | number
 }
 
 interface IconProps {
@@ -30,7 +30,7 @@ const initialState = {
   text: '',
   key: '',
   title: '',
-  type: '',
+  type: null,
   pluginName: ''
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
index 0eeed6dc22..87dd211af5 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
@@ -15,14 +15,14 @@ export type IconBadgeReducerAction = {
 function setIconStatus(name: string, status: IconStatus) {
   if (status.key === 'none') return { ...status, text: '' } // remove status
 
-  let text = ''
-  let key = ''
+  let text: string | number
+  let key: string | number
   if (typeof status.key === 'number') {
     key = status.key
     text = key
   } else key = checkSpecialChars(status.key) ? bleach.sanitize(status.key) : status.key
 
-  let thisType = ''
+  let thisType: IconStatus['type']
   if (status.type === 'error') {
     thisType = 'danger' // to use with bootstrap
   } else thisType = checkSpecialChars(status.type) ? bleach.sanitize(status.type) : status.type