diff --git a/src/App.js b/src/App.js
index 91847a1..0655d57 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,7 +27,8 @@ function HomePage({
   showedModal,
   setShowedModal,
   productSectionRef,
-  courseSectionRef
+  courseSectionRef,
+  setWillDo
 }) {
   return (
     <>
@@ -41,6 +42,7 @@ function HomePage({
         setHoveredCard={setHoveredCard}
         setSelectedProduct={setSelectedProduct}
         setShowedModal={setShowedModal}
+        setWillDo={setWillDo}
       />
       <AcademySection
         courseSectionRef={courseSectionRef}
@@ -48,6 +50,7 @@ function HomePage({
         setHoveredCard={setHoveredCard}
         setSelectedProduct={setSelectedProduct}
         setShowedModal={setShowedModal}
+        setWillDo={setWillDo}
       />
       <KnowledgeBaseSection />
       <ClientsSection />
@@ -84,6 +87,7 @@ function App() {
   const courseSectionRef = useRef(null);
 
   const [productModalRequest, setProductModalRequest] = useState(null);
+  const [willDo, setWillDo] = useState('');
 
 
   const scrollToProduct = () => {
@@ -307,6 +311,7 @@ function App() {
                 setShowedModal={setShowedModal}
                 productSectionRef={productSectionRef}
                 courseSectionRef={courseSectionRef}
+                setWillDo={setWillDo}
               />
             }
           />
@@ -348,6 +353,8 @@ function App() {
                   requestLogin={requestLogin}
                   product={selectedProduct}
                   setShowedModal={setShowedModal}
+                  willDo={willDo}
+                  setWillDo={setWillDo}
                 />
               )}
               {showedModal === 'create-item' && (
diff --git a/src/components/AcademySection.js b/src/components/AcademySection.js
index 67842c4..3c4a5d6 100644
--- a/src/components/AcademySection.js
+++ b/src/components/AcademySection.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import styles from './Styles.module.css';
 
-const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setShowedModal, courseSectionRef}) => {
+const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setShowedModal, courseSectionRef, setWillDo}) => {
   const [products, setProducts] = useState([]);
 
   useEffect(() => {
@@ -68,6 +68,12 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
                           : `Rp ${product.price.toLocaleString('id-ID')}`}
                       </span>
                     </div>
+                    <button className="px-4 py-2 rounded-pill text-white" style={{ background: 'linear-gradient(to right, #6a59ff, #8261ee)', border: 'none' }} 
+                    onClick={() => {
+                    setSelectedProduct(product);
+                    setShowedModal('product');
+                    setWillDo('checkout');
+                  }}>Beli</button>
                   </div>
                 </div>
               ))}
diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index 0c1c0b0..f024a08 100644
--- a/src/components/ProductDetailPage.js
+++ b/src/components/ProductDetailPage.js
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './ProductDetail.module.css';
 
-const ProductDetail = ({ subscriptions, product, requestLogin, setShowedModal }) => {
+const ProductDetail = ({ willDo, setWillDo, subscriptions, product, requestLogin, setShowedModal }) => {
   const [showChildSelector, setShowChildSelector] = useState(false);
   const [selectedChildIds, setSelectedChildIds] = useState([]);
 
@@ -139,6 +139,13 @@ const ProductDetail = ({ subscriptions, product, requestLogin, setShowedModal })
     }
   };
 
+  useEffect(() => {
+    if (willDo === 'checkout') {
+      onCheckout();
+    }
+    if(setWillDo) setWillDo(''); // Reset willDo after handling
+  }, []);
+
   const priceColor = product.price === 0 ? '#059669' : '#2563eb';
   console.log(product)
   return (
diff --git a/src/components/ProductSection.js b/src/components/ProductSection.js
index e0a0337..0f5a410 100644
--- a/src/components/ProductSection.js
+++ b/src/components/ProductSection.js
@@ -4,7 +4,7 @@ import styles from './Styles.module.css';
 import processProducts from '../helper/processProducts';
 
 
-const ProductSection = ({ hoveredCard, setHoveredCard, setSelectedProduct, setShowedModal, productSectionRef }) => {
+const ProductSection = ({ hoveredCard, setHoveredCard, setSelectedProduct, setShowedModal, productSectionRef, setWillDo }) => {
   const [products, setProducts] = useState([]);
 // Define this function outside useEffect so it can be called anywhere
 
@@ -75,6 +75,12 @@ useEffect(() => {
                           : `Rp ${product.price.toLocaleString('id-ID')}`}
                       </span>
                     </div>
+                    <button className="px-4 py-2 rounded-pill text-white" style={{ background: 'linear-gradient(to right, #6a59ff, #8261ee)', border: 'none' }} 
+                    onClick={() => {
+                    setSelectedProduct(product);
+                    setShowedModal('product');
+                    setWillDo('checkout');
+                  }}>Beli</button>
                   </div>
                 </div>
               ))}
diff --git a/src/components/Styles.module.css b/src/components/Styles.module.css
index 38e6675..a00a110 100644
--- a/src/components/Styles.module.css
+++ b/src/components/Styles.module.css
@@ -256,6 +256,8 @@
     padding: 1rem;
     padding-top: 0;
     text-align: left;
+    display: flex;
+    justify-content: space-between;
 }
 
 .courseCategory {