diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index b0aa583ef5..9ae62e9394 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -108,6 +108,10 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       })
       const data = toStandardOutput(_contract.name, output)
       remixClient.compilationFinish(_contract.name, _contract.content, data)
+
+      //map data to compilation details shape
+      
+      remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
         key: 'failed',
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index a0cee65d12..070eef3055 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
@@ -18,7 +18,7 @@ export interface RemixUiCompileDetailsProps {
 const _paq = (window._paq = window._paq || [])
 
 export function RemixUiCompileDetails({ plugin, contractProperties, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
-
+  console.log({selectedContract, contractProperties})
   const intl = useIntl()
   const downloadFn = () => {
     _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
@@ -33,7 +33,7 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
         </CustomTooltip>
       </div>
       <div className="remixui_detailsJSON">
-        <TreeView>
+        {<TreeView>
           {Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => {
             const copyDetails = (
               <span className="remixui_copyDetails">
@@ -69,7 +69,7 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
               </div>
             )
           })}
-        </TreeView>
+        </TreeView>}
       </div>
     </>
   )
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index a6436db88b..f39eb74146 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -123,6 +123,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   }
 
   const insertValue = (details, propertyName: ContractPropertyName) => {
+    console.log({ details })
     let node
     if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
       node = <pre>{details[propertyName]}</pre>