diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 9105cdc342..727ec9f9d5 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -110,7 +110,7 @@ const App: React.FC = () => {
           {
             output && Object.keys(output).length > 0 ? (
               <>
-                <VyperResult output={output} />
+                <VyperResult output={output} plugin={remixClient} />
               </>
             ) : null
           }
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 8218aa3be3..603b342e98 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -10,6 +10,7 @@ import { VyperCompilationResult } from '../utils/types'
 
 interface VyperResultProps {
   output?: any
+  plugin?: any
 }
 
 export type ExampleContract = {
@@ -24,7 +25,7 @@ type TabContentMembers = {
   className: string
 }
 
-function VyperResult({ output }: VyperResultProps) {
+function VyperResult({ output, plugin }: VyperResultProps) {
   // const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
@@ -56,9 +57,9 @@ function VyperResult({ output }: VyperResultProps) {
   return (
     <>
       <div className="border border-top"></div>
-      <div>
-        <button className="btn btn-secondary btn-block mx-2" onClick={() => {
-
+      <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', {})
         }}>
           <span>Compilation Details</span>
         </button>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 1d6ae34ae0..b9b6fc3dd2 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -1,6 +1,5 @@
 import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
 import axios from 'axios'
-import { VyperCompilationResultType, CompileFormat, ETHPM3Format, CompilerInformationObject } from './types'
 
 export interface Contract {
   name: string
diff --git a/libs/remix-ui/vyper-compile-details/src/index.ts b/libs/remix-ui/vyper-compile-details/src/index.ts
index e69de29bb2..830ec8dc6a 100644
--- a/libs/remix-ui/vyper-compile-details/src/index.ts
+++ b/libs/remix-ui/vyper-compile-details/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/vyper-compile-details'
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
index f7eef8f84e..5bfb4543c4 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 
 export function RemixUiVyperCompileDetails() {