diff --git a/components/buybutton.js b/components/buybutton.js
new file mode 100644
index 0000000..7124d87
--- /dev/null
+++ b/components/buybutton.js
@@ -0,0 +1,41 @@
+import React from 'react';
+/**
+ *
+ *
+ * @export
+ * @class BuyNow
+ * @augments {React.PureComponent<BuyNowProps>}
+ */
+export default class BuyNow extends React.PureComponent {
+  /**
+   * @typedef {object} BuyNowProps
+   * @property {function} onClick
+   * 
+   *  @static
+   * @memberof BuyNow
+   */
+
+
+  render() {
+    return (
+      <React.Fragment>
+        <style jsx>{`
+          button {
+            background-color: #e33812;
+            color: white;
+            padding: 15px 32px;
+            text-align: center;
+            display: inline-block;
+            font-size: 16px;
+            border-radius: 12px;
+    
+          }
+        `}</style>
+        
+        <button onClick={this.props.onClick}>
+          {this.props.children}
+        </button>
+      </React.Fragment>
+    );
+  }
+}
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index e735dc9..9cbe97f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Item from '../components/Item';
 import NavBar from '../components/NavBar';
 import links from '../constants/links';
+import buybutton from '../components/buybutton';
 
 /**
  * Home page
@@ -50,11 +51,18 @@ export default class IndexPage extends React.PureComponent {
               <Item id={id} name={name} />
             ))}
           </ul>
+<<<<<<< HEAD
         </main>
+        
+=======
+          <h2>Buy Now Button</h2>
+          <buybutton/>
+      </main>
+      
+>>>>>>> 1f4ffb7... buy now button
       </React.Fragment>
     );
   }
-
   /**
    * This is for demo purposes.
    * Once the component has mounted, we fetch items from our API and sets them to state.