diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index a90e94683b..322e1c4b23 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -36,6 +36,7 @@ import { InjectedArbitrumOneProvider } from './app/tabs/injected-arbitrum-one-pr
 import { FileDecorator } from './app/plugins/file-decorator'
 import { CodeFormat } from './app/plugins/code-format'
 import { SolidityUmlGen } from './app/plugins/solidity-umlgen'
+import { ContractFlattener } from './app/plugins/contractFlattener'
 
 const isElectron = require('is-electron')
 
@@ -177,6 +178,9 @@ class AppComponent {
     //---------------- Solidity UML Generator -------------------------
     const solidityumlgen = new SolidityUmlGen(appManager)
 
+    // ----------------- ContractFlattener ----------------------------
+    const contractFlattener = new ContractFlattener()
+
     // ----------------- import content service ------------------------
     const contentImport = new CompilerImports()
 
@@ -270,7 +274,8 @@ class AppComponent {
       injectedArbitrumOneProvider,
       this.walkthroughService,
       search,
-      solidityumlgen
+      solidityumlgen,
+      contractFlattener
     ])
 
     // LAYOUT & SYSTEM VIEWS
diff --git a/apps/remix-ide/src/app/plugins/contractFlattener.tsx b/apps/remix-ide/src/app/plugins/contractFlattener.tsx
new file mode 100644
index 0000000000..4433ffcf23
--- /dev/null
+++ b/apps/remix-ide/src/app/plugins/contractFlattener.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { Plugin } from '@remixproject/engine'
+import { customAction } from '@remixproject/plugin-api'
+import { concatSourceFiles, getDependencyGraph } from '@remix-ui/solidity-compiler'
+
+const profile = {
+  name: 'contractflattener',
+  displayName: 'Contract Flattener',
+  description: 'Flatten solidity contracts',
+  methods: ['flattenAContract'],
+  events: [],
+}
+
+export class ContractFlattener extends Plugin {
+  fileName: string
+  constructor() {
+    super(profile)
+    this.fileName = ''
+  }
+
+  onActivation(): void {
+    this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
+      await this.flattenContract(source, this.fileName, data)
+    })  
+  }
+
+  async flattenAContract(action: customAction) {
+    this.fileName = action.path[0]
+    this.call('solidity', 'compile', this.fileName)
+  }
+
+  /**
+   * Takes currently compiled contract that has a bunch of imports at the top
+   * and flattens them ready for UML creation. Takes the flattened result
+   * and assigns to a local property
+   * @returns {Promise<string>}
+   */
+  async flattenContract (source: any, filePath: string, data: any) {
+    const ast = data.sources
+    const dependencyGraph = getDependencyGraph(ast, filePath)
+    const sorted = dependencyGraph.isEmpty()
+        ? [filePath]
+        : dependencyGraph.sort().reverse()
+    const sources = source.sources
+    const result = concatSourceFiles(sorted, sources)
+    await this.call('fileManager', 'writeFile', `${filePath}_flattened.sol`, result)
+    return result
+  }
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
index c4fa5c9634..6937bc81fd 100644
--- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
+++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
@@ -18,7 +18,7 @@ const profile = {
     displayName: 'Solidity UML Generator',
     description: 'Generate UML diagram in svg format from last compiled contract',
     location: 'mainPanel',
-    methods: ['showUmlDiagram', 'generateUml', 'generateCustomAction'],
+    methods: ['showUmlDiagram', 'generateUml', 'generateCustomAction', 'flattenAContract'],
     events: [],
 }
 
@@ -56,13 +56,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
         const umlClasses = convertAST2UmlClasses(ast, this.currentFile)
         const umlDot = convertUmlClasses2Dot(umlClasses)
         const payload = vizRenderStringSync(umlDot)
-        // const splitArtifact = payload.split('<!-- Title: UmlClassDiagram Pages: 1 -->\n')
-        // const modified = splitArtifact[1].replace(/<svg/g, '<svg style="background-color: pink;" ')
-        // splitArtifact[1] = modified
-        // const newsvg = splitArtifact[0].concat(splitArtifact[1])
-        // console.log({ newsvg })
         console.log({ umlClasses, umlDot, payload })
-        this.call('fileManager', 'writeFile', `${this.currentFile}.svg`, payload)
         this.updatedSvg = payload
         this.renderComponent()
       } catch (error) {
@@ -80,13 +74,10 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
     const parser = new DOMParser()
     const themeQuality = await this.call('theme', 'currentTheme')
     const parsedDocument = parser.parseFromString(svgPayload, 'image/svg+xml')
-    // const svgElement = parsedDocument.getElementsByTagName('polygon')[0]
-    // svgElement.style.filter = themeQuality.quality === 'dark' ? 'invert(1)' : 'invert(0)'
     const res = parsedDocument.documentElement
     parsedDocument.bgColor = '#cccabc'
     res.style.filter = themeQuality.quality === 'dark' ? 'invert(1)' : 'invert(0)'
     const stringifiedSvg = new XMLSerializer().serializeToString(parsedDocument)
-    // themeQuality.quality === 'dark' ? svgElement.style.background = '#cccabc' : 'invert(0)'
     console.log({ parsedDocument, themeQuality, stringifiedSvg })
     return stringifiedSvg
   }
@@ -107,6 +98,15 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
     this.renderComponent()
   }
 
+  async flattenAContract(action: customAction) {
+    const fileName = action.path[0]
+    this.call('solidity', 'compile', fileName)
+    this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
+      await this.flattenContract(source, fileName, data)
+    })
+    this.off('solidity', 'compilationFinished')
+  }
+
   /**
    * Takes currently compiled contract that has a bunch of imports at the top
    * and flattens them ready for UML creation. Takes the flattened result
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index 8983387770..91c221588a 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -11,7 +11,7 @@ const requiredModules = [ // services + layout views + system views
   'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity', 'solidity-logic', 'gistHandler', 'layout',
   'notification', 'permissionhandler', 'walkthrough', 'storage', 'restorebackupzip', 'link-libraries', 'deploy-libraries', 'openzeppelin-proxy', 
   'hardhat-provider', 'ganache-provider', 'foundry-provider', 'basic-http-provider', 'injected-optimism-provider', 'injected-arbitrum-one-provider',
-  'compileAndRun', 'search', 'recorder', 'fileDecorator', 'codeParser', 'codeFormatter', 'solidityumlgen']
+  'compileAndRun', 'search', 'recorder', 'fileDecorator', 'codeParser', 'codeFormatter', 'solidityumlgen', 'contractflattener']
 
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
 const dependentModules = ['foundry', 'hardhat', 'truffle', 'slither'] 
@@ -157,8 +157,8 @@ export class RemixAppManager extends PluginManager {
 
   async registerContextMenuItems() {
     await this.call('filePanel', 'registerContextMenuItem', {
-      id: 'flattener',
-      name: 'flattenFileCustomAction',
+      id: 'contractflattener',
+      name: 'flattenAContract',
       label: 'Flatten',
       type: [],
       extension: ['.sol'],
diff --git a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
index 2c16167d4c..42f61c5d8a 100644
--- a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
+++ b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
@@ -91,12 +91,12 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
             {
               ({ zoomIn, zoomOut, resetTransform }) => (
                 <Fragment>
-                  <div className="position-relative">
+                  {/* <div className="position-relative">
                     <button className="btn position-absolute top-0 end-100 translate-middle btn-sm mr-1 rounded-circle btn-success" onClick={() => zoomIn()}>+</button>
                     <button className="btn position-absolute top-0 end-100 translate-middle btn-sm mr-1 rounded-circle btn-warning" onClick={() => zoomOut()}>-</button>
                     <button className="btn position-absolute top-0 end-100 translate-middle btn-sm mr-1 rounded-circle btn-danger" onClick={() => resetTransform()}>X</button>
                     <ActionButtons buttons={buttons}/>
-                  </div>
+                  </div> */}
                   <TransformComponent>
                     <img 
                       src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}