diff --git a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
index 52d5931834..1db215c50f 100644
--- a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
+++ b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
@@ -46,6 +46,8 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
 
   async showDetails(sentPayload: any) {
     console.log({ sentPayload })
+    const contractName = Object.entries(sentPayload).find(([key, value]) =>  key )
+    this.profile.displayName = `${contractName}`
     await this.call('tabs', 'focus', 'vyperCompilationDetails')
     this.payload = sentPayload
     this.renderComponent()
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 603b342e98..bc3a789ad4 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) {
       <div className="border border-top"></div>
       <div className="d-flex justify-content-center px-2 w-100">
         <button className="btn btn-secondary w-100" onClick={async () => {
-          await plugin?.call('vyperCompilationDetails', 'showDetails', {})
+          await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
           <span>Compilation Details</span>
         </button>