diff --git a/src/components/cart/add-to-cart.js b/src/components/cart/add-to-cart.js
new file mode 100644
index 0000000..6067096
--- /dev/null
+++ b/src/components/cart/add-to-cart.js
@@ -0,0 +1,54 @@
+import { isEmpty } from 'lodash';
+
+import axios from 'axios';
+import { ADD_TO_CART_ENDPOINT } from '../../utils/constants/endpoints';
+import { getSession, storeSession } from '../../utils/cart/session';
+import { getAddOrViewCartConfig, getAddToCartConfig } from '../../utils/cart/api';
+
+const AddToCart = ( { product } ) => {
+	
+	if ( isEmpty( product ) ) {
+		return null;
+	}
+	
+	const addToCart = ( productId, qty = 1 ) => {
+		const storedSession = getSession();
+		const addOrViewCartConfig = getAddOrViewCartConfig();
+		axios.post( ADD_TO_CART_ENDPOINT, {
+				product_id: productId,
+				quantity: qty,
+			},
+			addOrViewCartConfig,
+		)
+			.then( ( res ) => {
+				
+				if ( ! isEmpty( storedSession ) ) {
+					storeSession( res?.headers?.[ 'x-wc-session' ] );
+				}
+				viewCart();
+			} )
+			.catch( err => {
+				console.log( 'err', err );
+			} );
+	};
+	
+	const viewCart = () => {
+		const addOrViewCartConfig = getAddOrViewCartConfig();
+		axios.get( ADD_TO_CART_ENDPOINT, addOrViewCartConfig )
+			.then( ( res ) => {
+				console.log( 'res', res );
+			} )
+			.catch( err => {
+				console.log( 'err', err );
+			} );
+	};
+	
+	
+	return (
+		<button
+			className="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
+			onClick={ () => addToCart( product?.id ) }>Add to cart</button>
+	);
+};
+
+export default AddToCart;
diff --git a/src/components/products/index.js b/src/components/products/index.js
index b0c4526..ca40149 100644
--- a/src/components/products/index.js
+++ b/src/components/products/index.js
@@ -1,7 +1,5 @@
 import { isArray, isEmpty } from 'lodash';
-import Link from 'next/link';
-import Image from '../image';
-import { sanitize } from '../../utils/miscellaneous';
+import Product from './product';
 
 const Products = ({ products }) => {
 	
@@ -9,27 +7,14 @@ const Products = ({ products }) => {
 		return null;
 	}
 	
+	console.log( 'products', products );
+	
 	return (
 		<div className="flex flex-wrap -mx-2 overflow-hidden">
 			
 			{ products.length ? products.map( product => {
-				const img = product?.images?.[0] ?? {};
 				return (
-					<div key={ product?.id } className="my-2 px-2 w-full overflow-hidden sm:w-1/2 md:w-1/3 xl:w-1/4">
-						<Link href={product?.permalink ?? '/'}>
-							<a>
-								<Image
-									sourceUrl={ img?.src ?? '' }
-									altText={ img?.alt ?? ''}
-									title={ product?.name ?? '' }
-									width="380"
-									height="380"
-								/>
-								<h3 className="font-bold uppercase">{ product?.name ?? '' }</h3>
-								<div dangerouslySetInnerHTML={{ __html: sanitize( product?.price_html ?? '' ) }}/>
-							</a>
-						</Link>
-					</div>
+					<Product key={ product?.id } product={product} />
 				)
 			} ) : null }
 		
diff --git a/src/components/products/product.js b/src/components/products/product.js
new file mode 100644
index 0000000..af82602
--- /dev/null
+++ b/src/components/products/product.js
@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import Image from '../image';
+import { sanitize } from '../../utils/miscellaneous';
+import AddToCart from '../cart/add-to-cart';
+import { isEmpty } from 'lodash';
+
+const Product = ( { product } ) => {
+	
+	if ( isEmpty( product ) ) {
+		return null;
+	}
+	
+	const img = product?.images?.[0] ?? {};
+	const productType = product?.type ?? '';
+	
+	return (
+		<div className="my-2 px-2 w-full overflow-hidden sm:w-1/2 md:w-1/3 xl:w-1/4">
+			<Link href={product?.permalink ?? '/'}>
+				<a>
+					<Image
+						sourceUrl={ img?.src ?? '' }
+						altText={ img?.alt ?? ''}
+						title={ product?.name ?? '' }
+						width="380"
+						height="380"
+					/>
+					<h3 className="font-bold uppercase my-2">{ product?.name ?? '' }</h3>
+					<div className="mb-4" dangerouslySetInnerHTML={{ __html: sanitize( product?.price_html ?? '' ) }}/>
+				</a>
+			</Link>
+			
+			{ 'simple' === productType ? <AddToCart product={product}/> : null }
+		</div>
+	)
+}
+
+export default Product;
diff --git a/src/utils/cart/api.js b/src/utils/cart/api.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/cart/index.js b/src/utils/cart/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/cart/session.js b/src/utils/cart/session.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/constants/endpoints.js b/src/utils/constants/endpoints.js
index eaf5abd..96c919b 100644
--- a/src/utils/constants/endpoints.js
+++ b/src/utils/constants/endpoints.js
@@ -1,2 +1,8 @@
 export const HEADER_FOOTER_ENDPOINT = `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer`;
 export const GET_PRODUCTS_ENDPOINT = `${process.env.NEXT_PUBLIC_SITE_URL}/api/get-products`;
+
+/**
+ * Cart
+ * @type {string}
+ */
+export const ADD_TO_CART_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/cart/items/`;