diff --git a/src/address/ABI.tsx b/src/address/ABI.tsx
new file mode 100644
index 0000000..7190f4e
--- /dev/null
+++ b/src/address/ABI.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import hljs from "highlight.js";
+import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
+
+import hljsDefineSolidity from "highlightjs-solidity";
+hljsDefineSolidity(hljs);
+
+type ABIProps = {
+  abi: any[];
+};
+
+const ABI: React.FC<ABIProps> = ({ abi }) => (
+  <SyntaxHighlighter
+    className="w-full h-60 border font-code text-base"
+    language="json"
+    style={docco}
+    showLineNumbers
+  >
+    {JSON.stringify(abi, null, "  ") ?? ""}
+  </SyntaxHighlighter>
+);
+
+export default React.memo(ABI);
diff --git a/src/address/Contract.tsx b/src/address/Contract.tsx
index 0fd7c89..8a18d86 100644
--- a/src/address/Contract.tsx
+++ b/src/address/Contract.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import hljs from "highlight.js";
 import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
+import { useContract } from "../useSourcify";
 
 import hljsDefineSolidity from "highlightjs-solidity";
-import { useContract } from "../useSourcify";
 hljsDefineSolidity(hljs);
 
 type ContractProps = {
diff --git a/src/address/Contracts.tsx b/src/address/Contracts.tsx
index 470da58..94f25c4 100644
--- a/src/address/Contracts.tsx
+++ b/src/address/Contracts.tsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
+import ABI from "./ABI";
 import Contract from "./Contract";
 import { RuntimeContext } from "../useRuntime";
 import { Metadata } from "../useSourcify";
@@ -82,57 +83,67 @@ const Contracts: React.FC<ContractsProps> = ({
           </span>
         )}
         {rawMetadata !== undefined && rawMetadata !== null && (
-          <div>
-            <Menu>
-              <div className="flex space-x-2 justify-between items-baseline">
-                <Menu.Button className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
-                  <span>{selected}</span>
-                  <span className="self-center">
-                    <FontAwesomeIcon icon={faChevronDown} size="xs" />
-                  </span>
-                </Menu.Button>
-                {provider && (
-                  <div className="text-sm">
-                    <ExternalLink
-                      href={openInRemixURL(
-                        checksummedAddress,
-                        provider.network.chainId
-                      )}
-                    >
-                      Open in Remix
-                    </ExternalLink>
-                  </div>
-                )}
+          <>
+            {rawMetadata.output.abi && (
+              <div className="mb-3">
+                <div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
+                  ABI
+                </div>
+                <ABI abi={rawMetadata.output.abi} />
               </div>
-              <div className="relative">
-                <Menu.Items className="absolute border p-1 rounded-b bg-white flex flex-col">
-                  {Object.entries(rawMetadata.sources).map(([k]) => (
-                    <Menu.Item key={k}>
-                      <button
-                        className={`flex text-sm px-2 py-1 ${
-                          selected === k
-                            ? "font-bold bg-gray-200 text-gray-500"
-                            : "hover:border-orange-200 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75"
-                        }`}
-                        onClick={() => setSelected(k)}
-                      >
-                        {k}
-                      </button>
-                    </Menu.Item>
-                  ))}
-                </Menu.Items>
-              </div>
-            </Menu>
-            {selected && (
-              <Contract
-                checksummedAddress={checksummedAddress}
-                networkId={provider!.network.chainId}
-                filename={selected}
-                source={rawMetadata.sources[selected]}
-                useIPFS={useIPFS}
-              />
             )}
-          </div>
+            <div>
+              <Menu>
+                <div className="flex space-x-2 justify-between items-baseline">
+                  <Menu.Button className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
+                    <span>{selected}</span>
+                    <span className="self-center">
+                      <FontAwesomeIcon icon={faChevronDown} size="xs" />
+                    </span>
+                  </Menu.Button>
+                  {provider && (
+                    <div className="text-sm">
+                      <ExternalLink
+                        href={openInRemixURL(
+                          checksummedAddress,
+                          provider.network.chainId
+                        )}
+                      >
+                        Open in Remix
+                      </ExternalLink>
+                    </div>
+                  )}
+                </div>
+                <div className="relative">
+                  <Menu.Items className="absolute border p-1 rounded-b bg-white flex flex-col">
+                    {Object.entries(rawMetadata.sources).map(([k]) => (
+                      <Menu.Item key={k}>
+                        <button
+                          className={`flex text-sm px-2 py-1 ${
+                            selected === k
+                              ? "font-bold bg-gray-200 text-gray-500"
+                              : "hover:border-orange-200 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75"
+                          }`}
+                          onClick={() => setSelected(k)}
+                        >
+                          {k}
+                        </button>
+                      </Menu.Item>
+                    ))}
+                  </Menu.Items>
+                </div>
+              </Menu>
+              {selected && (
+                <Contract
+                  checksummedAddress={checksummedAddress}
+                  networkId={provider!.network.chainId}
+                  filename={selected}
+                  source={rawMetadata.sources[selected]}
+                  useIPFS={useIPFS}
+                />
+              )}
+            </div>
+          </>
         )}
       </div>
     </ContentFrame>