diff --git a/src/widgets/ProductRecommendations/api.js b/src/widgets/ProductRecommendations/api.js
new file mode 100644
index 0000000..b6285e3
--- /dev/null
+++ b/src/widgets/ProductRecommendations/api.js
@@ -0,0 +1,10 @@
+import { get, stringifyUrl } from 'data/services/lms/utils';
+import urls from 'data/services/lms/urls';
+
+export const getCrossProductRecommendationsUrl = (courseId) => `${urls.api}/learner_recommendations/cross_product/${courseId}`;
+
+const fetchCrossProductCourses = (courseId) => get(stringifyUrl(getCrossProductRecommendationsUrl(courseId)));
+
+export default {
+  fetchCrossProductCourses,
+};
diff --git a/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx b/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx
index 96c2d20..388c0b6 100644
--- a/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx
@@ -4,24 +4,28 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import './index.scss';
 import messages from '../messages';
+import useFetchCrossProductCourses from '../hooks';
 import ProductCardContainer from './ProductCardContainer';
 import mockCrossProductRecommendations from '../mockData';
 
 const ProductRecommendationsContainer = () => {
   const { formatMessage } = useIntl();
   const mockRecommendations = mockCrossProductRecommendations.courses;
+  const { productRecommendations, isProductRecommendationsLoading } = useFetchCrossProductCourses();
 
   return (
     <div className="bg-light-200">
-      <Container
-        size="lg"
-        className="recommendations-container pt-sm-5 pt-4.5 pb-2 pb-sm-4.5"
-      >
-        <h2 className="mb-4">
-          {formatMessage(messages.recommendationsHeading)}
-        </h2>
-        <ProductCardContainer courses={mockRecommendations} />
-      </Container>
+      {!isProductRecommendationsLoading && (
+        <Container
+          size="lg"
+          className="recommendations-container pt-sm-5 pt-4.5 pb-2 pb-sm-4.5"
+        >
+          <h2 className="mb-4">
+            {formatMessage(messages.recommendationsHeading)}
+          </h2>
+          <ProductCardContainer courses={productRecommendations} />
+        </Container>
+      )}
     </div>
   );
 };
diff --git a/src/widgets/ProductRecommendations/hooks.js b/src/widgets/ProductRecommendations/hooks.js
new file mode 100644
index 0000000..8e14cef
--- /dev/null
+++ b/src/widgets/ProductRecommendations/hooks.js
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { StrictDict } from 'utils';
+
+import api from './api';
+import * as module from './hooks';
+
+// export const state = StrictDict({
+//   requestState: (val) => useState(val), // eslint-disable-line
+//   courses: (val) => useState(val), // eslint-disable-line
+// });
+
+const useFetchMostRecentCourse = () => {
+  // Gets the most recent course a user is enrolled in
+  // Goes through the courses enrollment property and checks the lastEnrolled property?
+  // Can we assume that the order the courses are listed on the Dashbaord is the order that the course was enrolled in?
+};
+
+const useFetchCrossProductCourses = () => {
+  const [productRecommendations, setProductRecommendations] = useState([]);
+  const [isProductRecommendationsLoading, setIsProductRecommendationsLoading] = useState(false);
+
+  // Uses the data from the most recently enrolled course to get the courseId to query our cross product endpoint
+  // const mostRecentCourse = useFetchMostRecentCourse()
+  useEffect(() => {
+    let isMounted = true;
+    setIsProductRecommendationsLoading(true);
+    if (isMounted) {
+      api
+        .fetchCrossProductCourses('course-v1:IBM+IBMBCC001+1T2022')
+        .then((response) => {
+          if (response.status === 200) {
+            setIsProductRecommendationsLoading(false);
+            setProductRecommendations(response.data.courses);
+          }
+        });
+    }
+    return () => { isMounted = false; };
+  }, []); // most recent course ID will be the dependancy
+
+  return {
+    productRecommendations,
+    isProductRecommendationsLoading,
+  };
+};
+
+const useFetchAlgoliaRecommendations = () => {
+  // This hook will fetch algolia reccs and return the reccs
+}
+
+export default useFetchCrossProductCourses;