diff --git a/apps/noir-compiler/src/app/actions/constants.ts b/apps/noir-compiler/src/app/actions/constants.ts
new file mode 100644
index 0000000000..de94fbe570
--- /dev/null
+++ b/apps/noir-compiler/src/app/actions/constants.ts
@@ -0,0 +1,8 @@
+export const DEFAULT_TOML_CONFIG = `[package]
+name = "test"
+authors = [""]
+compiler_version = ">=0.18.0"
+type = "bin"
+
+[dependencies]
+`
\ No newline at end of file
diff --git a/apps/noir-compiler/src/app/app.tsx b/apps/noir-compiler/src/app/app.tsx
index a865d7066b..4c5d396f85 100644
--- a/apps/noir-compiler/src/app/app.tsx
+++ b/apps/noir-compiler/src/app/app.tsx
@@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl'
 import { Container } from "./components/container"
 import { NoirAppContext } from "./contexts"
 import { appInitialState, appReducer } from "./reducers/state"
+import { compileNoirCircuit } from "./actions"
 
 const plugin = new NoirPluginClient()
 
@@ -31,11 +32,10 @@ function App() {
       })
       // @ts-ignore
       plugin.on('editor', 'contentChanged', async (path: string, content: string) => {
-        setIsContentChanged(true)
-        // check if autoCompile is enabled
-        // if (path.endsWith('.nr')) {
-        //   plugin.parse(path, content)
-        // }
+        if (path.endsWith('.nr')) {
+          setIsContentChanged(true)
+          plugin.parse(path, content)
+        }
       })
       // noir compiling events
       plugin.internalEvents.on('noir_compiling_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'compiling' }))
@@ -54,6 +54,15 @@ function App() {
     }
   }, [isPluginActivated])
 
+  useEffect(() => {
+    if (isContentChanged) {
+      (async () => {
+        if (appState.autoCompile) await compileNoirCircuit(plugin, appState)
+      })()
+      setIsContentChanged(false)
+    }
+  }, [appState.autoCompile, isContentChanged])
+
   const noirCompilerErrored = (err: ErrorEvent) => {
     dispatch({ type: 'SET_COMPILER_STATUS', payload: 'errored' })
     try {
diff --git a/apps/noir-compiler/src/app/services/noirPluginClient.ts b/apps/noir-compiler/src/app/services/noirPluginClient.ts
index 11c73e915e..a55a8b02a6 100644
--- a/apps/noir-compiler/src/app/services/noirPluginClient.ts
+++ b/apps/noir-compiler/src/app/services/noirPluginClient.ts
@@ -4,15 +4,7 @@ import EventManager from 'events'
 // @ts-ignore
 import { compile_program, createFileManager } from '@noir-lang/noir_wasm/default'
 import type { FileManager } from '@noir-lang/noir_wasm/dist/node/main'
-
-const DEFAULT_TOML_CONFIG = `[package]
-name = "test"
-authors = [""]
-compiler_version = ">=0.18.0"
-type = "bin"
-
-[dependencies]
-`
+import { DEFAULT_TOML_CONFIG } from '../actions/constants'
 export class NoirPluginClient extends PluginClient {
   public internalEvents: EventManager
   public fm: FileManager
@@ -23,9 +15,6 @@ export class NoirPluginClient extends PluginClient {
     createClient(this)
     this.internalEvents = new EventManager()
     this.fm = createFileManager('/')
-    const fileBytes = new TextEncoder().encode(DEFAULT_TOML_CONFIG)
-
-    this.fm.writeFile('Nargo.toml', new Blob([fileBytes]).stream())
     this.onload()
   }
 
@@ -35,6 +24,24 @@ export class NoirPluginClient extends PluginClient {
 
   onActivation(): void {
     this.internalEvents.emit('noir_activated')
+    this.setup()
+  }
+
+  async setup(): Promise<void> {
+    // @ts-ignore
+    const nargoTomlExists = await this.call('fileManager', 'exists', 'Nargo.toml')
+
+    if (!nargoTomlExists) {
+      await this.call('fileManager', 'writeFile', 'Nargo.toml', DEFAULT_TOML_CONFIG)
+      const fileBytes = new TextEncoder().encode(DEFAULT_TOML_CONFIG)
+
+      this.fm.writeFile('Nargo.toml', new Blob([fileBytes]).stream())
+    } else {
+      const nargoToml = await this.call('fileManager', 'readFile', 'Nargo.toml')
+      const fileBytes = new TextEncoder().encode(nargoToml)
+
+      this.fm.writeFile('Nargo.toml', new Blob([fileBytes]).stream())
+    }
   }
 
   async compile(path: string): Promise<void> {
@@ -43,11 +50,6 @@ export class NoirPluginClient extends PluginClient {
       this.emit('statusChanged', { key: 'loading', title: 'Compiling Noir Circuit...', type: 'info' })
       // @ts-ignore
       this.call('terminal', 'log', { type: 'log', value: 'Compiling ' + path })
-      // @ts-ignore
-      const fileContent = await this.call('fileManager', 'readFile', path)
-      const fileBytes = new TextEncoder().encode(fileContent)
-
-      this.fm.writeFile(`src/${path}`, new Blob([fileBytes]).stream())
       const program = await compile_program(this.fm)
 
       console.log('program: ', program)
@@ -60,6 +62,15 @@ export class NoirPluginClient extends PluginClient {
     }
   }
 
-  async parse(path: string): Promise<void> {
+  async parse(path: string, content?: string): Promise<void> {
+    if (!content) {
+      // @ts-ignore
+      content = await this.call('fileManager', 'readFile', path)
+    }
+    const depImports = Array.from(content.matchAll(/mod\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*(=\s*["'](.*?)["'])?\s*;/g), match => match[3] || match[1]);
+    console.log('depImports: ', depImports)
+    const fileBytes = new TextEncoder().encode(content)
+
+    this.fm.writeFile(`src/${path}`, new Blob([fileBytes]).stream())
   }
 }
diff --git a/apps/noir-compiler/src/css/app.css b/apps/noir-compiler/src/css/app.css
index b5676189ff..5d68203a99 100644
--- a/apps/noir-compiler/src/css/app.css
+++ b/apps/noir-compiler/src/css/app.css
@@ -36,12 +36,12 @@ body {
     line-height: 12px;
     text-transform: uppercase;
 }
-.noir_errors_box {
+.circuit_errors_box {
     word-break: break-word;
 }
-.noir_feedback.success,
-.noir_feedback.error,
-.noir_feedback.warning {
+.circuit_feedback.success,
+.circuit_feedback.error,
+.circuit_feedback.warning {
   white-space: pre-line;
   word-wrap: break-word;
   cursor: pointer;
@@ -52,9 +52,9 @@ body {
   padding: 8px 15px;
 }
 
-.noir_feedback.success pre,
-.noir_feedback.error pre,
-.noir_feedback.warning pre {
+.circuit_feedback.success pre,
+.circuit_feedback.error pre,
+.circuit_feedback.warning pre {
   white-space: pre-line;
   overflow-y: hidden;
   background-color: transparent;
@@ -65,9 +65,9 @@ body {
   border-radius: 0;
 }
 
-.noir_feedback.success .close,
-.noir_feedback.error .close,
-.noir_feedback.warning .close {
+.circuit_feedback.success .close,
+.circuit_feedback.error .close,
+.circuit_feedback.warning .close {
   visibility: hidden;
   white-space: pre-line;
   font-weight: bold;
@@ -78,9 +78,9 @@ body {
   padding: 0.5em;
 }
 
-.noir_feedback.success a,
-.noir_feedback.error a,
-.noir_feedback.warning a {
+.circuit_feedback.success a,
+.circuit_feedback.error a,
+.circuit_feedback.warning a {
   bottom: 0;
   right: 0;
 }
diff --git a/apps/noir-compiler/webpack.config.js b/apps/noir-compiler/webpack.config.js
index 0298a8605f..48f51d27a8 100644
--- a/apps/noir-compiler/webpack.config.js
+++ b/apps/noir-compiler/webpack.config.js
@@ -13,8 +13,6 @@ module.exports = composePlugins(withNx(), (config) => {
 
   pkgNoirWasm = pkgNoirWasm.replace(/"node"/, '"./node"').replace(/"import"/, '"./import"').replace(/"require"/, '"./require"').replace(/"types"/g, match => ++typeCount === 2 ? '"./types"' : match).replace(/"default"/, '"./default"')
   fs.writeFileSync(path.resolve(__dirname, '../../node_modules/@noir-lang/noir_wasm/package.json'), pkgNoirWasm)
-  
-  console.log('pkgNoirWasm: ', pkgNoirWasm)
 
   // add fallback for node modules
   config.resolve.fallback = {