diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 4565604..44c61f1 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -6,6 +6,7 @@ interface ButtonProps {
     primary?: boolean
     link?: boolean
     href?: string
+    onClick?: any
 }
 
 export default class Button extends PureComponent<ButtonProps, any> {
diff --git a/src/pages/Details.tsx b/src/pages/Details.tsx
index f02e65f..5725b62 100644
--- a/src/pages/Details.tsx
+++ b/src/pages/Details.tsx
@@ -1,5 +1,6 @@
 import { Logger } from '@oceanprotocol/squid'
 import React, { Component } from 'react'
+import Button from '../components/atoms/Button'
 import { User } from '../context/User'
 
 interface DetailsState {
@@ -12,7 +13,7 @@ interface DetailsProps {
     match: any
 }
 
-class Details extends Component<DetailsProps, DetailsState> {
+export default class Details extends Component<DetailsProps, DetailsState> {
     public state = { ddo: null, metadata: null }
 
     public async componentDidMount() {
@@ -23,18 +24,6 @@ class Details extends Component<DetailsProps, DetailsState> {
         this.setState({ ddo, metadata })
     }
 
-    public render() {
-        return (
-            <>
-                {this.state.metadata ? (
-                    this.showDetails(this.state.ddo)
-                ) : (
-                    <div>Loading</div>
-                )}
-            </>
-        )
-    }
-
     private purchaseAsset = async (ddo: any) => {
         const account = await this.context.ocean.getAccounts()
         const service = ddo.findServiceByType('Access')
@@ -65,13 +54,25 @@ class Details extends Component<DetailsProps, DetailsState> {
         return (
             <>
                 <div>{JSON.stringify(this.state.metadata)}</div>
-                <button onClick={this.purchaseAsset(ddo)}>
+
+                <Button onClick={this.purchaseAsset(ddo)}>
                     Purchase asset
-                </button>
+                </Button>
+            </>
+        )
+    }
+
+    public render() {
+        return (
+            <>
+                {this.state.metadata ? (
+                    this.showDetails(this.state.ddo)
+                ) : (
+                    <div>Loading</div>
+                )}
             </>
         )
     }
 }
 
 Details.contextType = User
-export default Details