diff --git a/components/cart/add-to-cart-button.tsx b/components/cart/add-to-cart-button.tsx
index 90ec4758..fabffa58 100644
--- a/components/cart/add-to-cart-button.tsx
+++ b/components/cart/add-to-cart-button.tsx
@@ -4,10 +4,11 @@ import clsx from 'clsx';
 // import { addItem } from 'components/cart/actions';
 import { Product, ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
-import { useFormStatus } from 'react-dom';
 import { useAppDispatch } from 'store/hooks';
 import { cartActions } from 'store/actions/cart.action';
 import { v4 as uuidv4 } from 'uuid';
+import { trackEvent } from 'utils/mixpanel';
+import { useFormStatus } from 'react-dom';
 
 function SubmitButton({
   availableForSale,
@@ -65,6 +66,16 @@ function SubmitButton({
             tempId: uuidv4()
           })
         );
+        trackEvent('Add To Cart', {
+          Product_Name: product.title,
+          Product_Url: '',
+          Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+          Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+          Source: '',
+          Category: '',
+          Tags: product.tags,
+          Variant_SKU: ''
+        });
       }}
       aria-label="Add to cart"
       aria-disabled={pending}
@@ -87,7 +98,7 @@ export function AddToCartButton({
   variants: any[];
   availableForSale: boolean;
   buttonClasses: string;
-  product: Product;
+  product: any;
 }) {
   const searchParams = useSearchParams();
   const defaultVariantId = variants[0]?.id;
diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index 52aa92c3..bf191853 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -7,14 +7,25 @@ import clsx from 'clsx';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
 import { useFormStatus } from 'react-dom';
+import { trackEvent } from 'utils/mixpanel';
 
-function SubmitButton({ removeIcon, item }: { removeIcon?: boolean; item?: CartItem }) {
+function SubmitButton({ removeIcon, product }: { removeIcon?: boolean; product?: any }) {
   const { pending } = useFormStatus();
   const dispatch = useAppDispatch();
   return (
     <button
       type="submit"
       onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        trackEvent('Removed From Cart', {
+          Product_Name: product.title,
+          Product_Url: '',
+          Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+          Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+          Source: '',
+          Category: '',
+          Tags: product.tags,
+          Variant_SKU: ''
+        });
         if (pending) e.preventDefault();
         dispatch(cartActions.removeCart({ lineId: item?.id }));
       }}
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 2ed4ab92..f1394c10 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -14,7 +14,7 @@ import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
 import { ShoppingBagIcon } from '@heroicons/react/24/outline';
 import { useAppSelector } from 'store/hooks';
-
+import { trackEvent } from 'utils/mixpanel';
 import { useCart } from '@/lib/hooks/use-cart';
 
 type MerchandiseSearchParams = {
@@ -184,12 +184,16 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                       />
                     </div>
                   </div>
-                  <a
+                  <Link
                     href={carts.checkoutUrl}
                     className="block w-full  bg-black p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      trackEvent('Checkout Started');
+                    }}
                   >
                     Proceed to Checkout
-                  </a>
+                  </Link>
                 </div>
               )}
             </Dialog.Panel>
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index e05a09a7..7570ea37 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -1,8 +1,10 @@
+'use client';
 import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import { AddToCartButton } from '@/components/cart/add-to-cart-button';
+import { trackEvent } from 'utils/mixpanel';
 
 export function GridTileImage({
   isInteractive = true,
@@ -40,7 +42,21 @@ export function GridTileImage({
           <div className="flex h-full w-full flex-col">
             <div className="relative">
               <div className=" h-full w-full overflow-hidden object-cover">
-                <Link href={`/product/${product?.handle}`}>
+                <Link
+                  href={`/product/${product?.handle}`}
+                  onClick={() => {
+                    trackEvent('Product Clicked', {
+                      Product_Name: product.title,
+                      Product_Url: '',
+                      Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+                      Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+                      Source: '',
+                      Category: '',
+                      Tags: product.tags,
+                      Variant_SKU: ''
+                    });
+                  }}
+                >
                   <Image
                     className={clsx(
                       ' relative aspect-square h-full min-h-[200px] w-full object-cover  md:min-h-[300px]',
@@ -104,7 +120,7 @@ export function GridTileImage({
               <Suspense fallback={null}>
                 <AddToCartButton
                   product={product}
-                  variants={product.variants}
+                  variants={product?.variants}
                   availableForSale={product?.availableForSale || false}
                   buttonClasses={
                     'relative flex  flex-1 text-sm hover:text-purple-400  items-center justify-center text-base bg-black border border-black text-white  md:px-8 uppercase tracking-wide font-normal md:font-semibold'
diff --git a/components/product/product-card.tsx b/components/product/product-card.tsx
index c7babff0..fb1be91e 100644
--- a/components/product/product-card.tsx
+++ b/components/product/product-card.tsx
@@ -1,6 +1,8 @@
+'use client';
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
+import { trackEvent } from 'utils/mixpanel';
 
 const ProductCard = ({ product }: { product: any }) => {
   return (
@@ -72,7 +74,21 @@ const ProductCard = ({ product }: { product: any }) => {
         </div>
       </div>
       <div className="flex w-full items-center justify-center overflow-hidden rounded-b-sm bg-black p-4">
-        <Link href="/products/purify-glow-cleanser-mask">
+        <Link
+          href="/products/purify-glow-cleanser-mask"
+          onClick={() => {
+            trackEvent('Add to cart', {
+              Product_Name: product.title,
+              Product_Url: '',
+              Product_Price: product?.priceRange?.maxVariantPrice?.amount,
+              Price_Currency: product?.priceRange?.maxVariantPrice?.currencyCode,
+              Source: '',
+              Category: '',
+              Tags: product.tags,
+              Variant_SKU: ''
+            });
+          }}
+        >
           <span className=" flex self-center text-center text-[8px] font-semibold uppercase text-white md:text-xs">
             Add to cart
           </span>
diff --git a/package-lock.json b/package-lock.json
index f8a270c7..ce67a04e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "Foxtale-Fe",
+  "name": "custom-frontend",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -19,6 +19,7 @@
         "embla-carousel-autoplay": "^8.0.2",
         "embla-carousel-react": "^8.0.2",
         "geist": "^1.3.0",
+        "mixpanel-browser": "^2.50.0",
         "next": "^14.3.0-canary.30",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -32,6 +33,7 @@
       "devDependencies": {
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/typography": "^0.5.12",
+        "@types/mixpanel-browser": "^2.49.0",
         "@types/node": "20.12.7",
         "@types/react": "18.2.79",
         "@types/react-dom": "18.2.25",
@@ -1209,6 +1211,14 @@
         }
       }
     },
+    "node_modules/@rrweb/types": {
+      "version": "2.0.0-alpha.13",
+      "resolved": "https://registry.npmjs.org/@rrweb/types/-/types-2.0.0-alpha.13.tgz",
+      "integrity": "sha512-ytq+MeVm/vP2ybw+gTAN3Xvt7HN2yS+wlbfnwHpQMftxrwzq0kEZHdw+Jp5WUvvpONWzXriNAUU9dW0qLGkzNg==",
+      "dependencies": {
+        "rrweb-snapshot": "^2.0.0-alpha.13"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -1349,12 +1359,23 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@types/css-font-loading-module": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
+      "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q=="
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/mixpanel-browser": {
+      "version": "2.49.0",
+      "resolved": "https://registry.npmjs.org/@types/mixpanel-browser/-/mixpanel-browser-2.49.0.tgz",
+      "integrity": "sha512-StmgUnS58d44DmIAEX9Kk8qwisAYCl6E2qulIjYyHXUPuJCPOuyUMTTKBp+aU2F2do+kxAzCxiBtsB4fnBT9Fg==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
@@ -2016,6 +2037,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3468,6 +3497,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5148,6 +5182,19 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
+    "node_modules/mixpanel-browser": {
+      "version": "2.50.0",
+      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.50.0.tgz",
+      "integrity": "sha512-iP4sbSRMemjWbnH+KQZRxZ360bcXtFpoQuUiWjjdw9AsURn0MrR9/2RnPOJ8J8tt1dMm7kTKwOjGV8pkbWbmAA==",
+      "dependencies": {
+        "rrweb": "2.0.0-alpha.4"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@@ -6514,6 +6561,39 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rrdom": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/rrdom/-/rrdom-0.1.7.tgz",
+      "integrity": "sha512-ZLd8f14z9pUy2Hk9y636cNv5Y2BMnNEY99wxzW9tD2BLDfe1xFxtLjB4q/xCBYo6HRe0wofzKzjm4JojmpBfFw==",
+      "dependencies": {
+        "rrweb-snapshot": "^2.0.0-alpha.4"
+      }
+    },
+    "node_modules/rrweb": {
+      "version": "2.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/rrweb/-/rrweb-2.0.0-alpha.4.tgz",
+      "integrity": "sha512-wEHUILbxDPcNwkM3m4qgPgXAiBJyqCbbOHyVoNEVBJzHszWEFYyTbrZqUdeb1EfmTRC2PsumCIkVcomJ/xcOzA==",
+      "dependencies": {
+        "@rrweb/types": "^2.0.0-alpha.4",
+        "@types/css-font-loading-module": "0.0.7",
+        "@xstate/fsm": "^1.4.0",
+        "base64-arraybuffer": "^1.0.1",
+        "fflate": "^0.4.4",
+        "mitt": "^3.0.0",
+        "rrdom": "^0.1.7",
+        "rrweb-snapshot": "^2.0.0-alpha.4"
+      }
+    },
+    "node_modules/rrweb-snapshot": {
+      "version": "2.0.0-alpha.13",
+      "resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.13.tgz",
+      "integrity": "sha512-slbhNBCYjxLGCeH95a67ECCy5a22nloXp1F5wF7DCzUNw80FN7tF9Lef1sRGLNo32g3mNqTc2sWLATlKejMxYw=="
+    },
+    "node_modules/rrweb/node_modules/@xstate/fsm": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@xstate/fsm/-/fsm-1.6.5.tgz",
+      "integrity": "sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index cbcba068..748d13ab 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "embla-carousel-autoplay": "^8.0.2",
     "embla-carousel-react": "^8.0.2",
     "geist": "^1.3.0",
+    "mixpanel-browser": "^2.50.0",
     "next": "^14.3.0-canary.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -63,6 +64,7 @@
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.12",
+    "@types/mixpanel-browser": "^2.49.0",
     "@types/node": "20.12.7",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
diff --git a/utils/mixpanel.ts b/utils/mixpanel.ts
new file mode 100644
index 00000000..849aa7a8
--- /dev/null
+++ b/utils/mixpanel.ts
@@ -0,0 +1,17 @@
+// utils/mixpanel.ts
+import mixpanel from 'mixpanel-browser';
+
+mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN!, {
+  debug: true,
+  loaded: () => {
+    console.log('Mixpanel loaded!');
+  }
+});
+
+export const trackEvent = (name: string, props?: Record<string, unknown>): void => {
+  if (typeof window !== 'undefined') {
+    mixpanel.track(name, props);
+  }
+};
+
+export default mixpanel;