diff --git a/.env b/.env
index ef88b81b..0abe4844 100644
--- a/.env
+++ b/.env
@@ -36,3 +36,4 @@ ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
+MERCHANDISE_2U_LOB_EXP_ID=''
diff --git a/.env.development b/.env.development
index 44ed398d..cc166dce 100644
--- a/.env.development
+++ b/.env.development
@@ -43,3 +43,4 @@ ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
+MERCHANDISE_2U_LOB_EXP_ID=''
diff --git a/src/App.jsx b/src/App.jsx
index 50f71fe0..ecdea905 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,6 +28,7 @@ import track from 'tracking';
 import fakeData from 'data/services/lms/fakeData/courses';
 
 import messages from './messages';
+import getOptimizely from './optimizely';
 
 import './App.scss';
 
@@ -78,6 +79,7 @@ export const App = () => {
     <Router>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
+        <script {...getOptimizely()} />
       </Helmet>
       <div>
         <LearnerDashboardHeader />
diff --git a/src/containers/Dashboard/DashboardLayout.jsx b/src/containers/Dashboard/DashboardLayout.jsx
index f17e4adf..e468210a 100644
--- a/src/containers/Dashboard/DashboardLayout.jsx
+++ b/src/containers/Dashboard/DashboardLayout.jsx
@@ -16,7 +16,7 @@ export const columnConfig = {
   },
 };
 
-export const DashboardLayout = ({ children, sidebar }) => {
+export const DashboardLayout = ({ bottomWidgetContainer, children, sidebar }) => {
   const isCollapsed = hooks.useIsDashboardCollapsed();
 
   return (
@@ -30,10 +30,16 @@ export const DashboardLayout = ({ children, sidebar }) => {
           {sidebar}
         </Col>
       </Row>
+      <Row>
+        <Col className="my-5.5">
+          {bottomWidgetContainer}
+        </Col>
+      </Row>
     </Container>
   );
 };
 DashboardLayout.propTypes = {
+  bottomWidgetContainer: PropTypes.node.isRequired,
   children: PropTypes.node.isRequired,
   sidebar: PropTypes.node.isRequired,
 };
diff --git a/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap b/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap
index a622da47..7d1370cb 100644
--- a/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap
+++ b/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap
@@ -41,6 +41,11 @@ exports[`DashboardLayout collapsed snapshot 1`] = `
       test-sidebar-content
     </Col>
   </Row>
+  <Row>
+    <Col
+      className="my-5.5"
+    />
+  </Row>
 </Container>
 `;
 
@@ -90,5 +95,10 @@ exports[`DashboardLayout not collapsed snapshot 1`] = `
       test-sidebar-content
     </Col>
   </Row>
+  <Row>
+    <Col
+      className="my-5.5"
+    />
+  </Row>
 </Container>
 `;
diff --git a/src/containers/Dashboard/__snapshots__/index.test.jsx.snap b/src/containers/Dashboard/__snapshots__/index.test.jsx.snap
index 6e673bd7..a3d13e65 100644
--- a/src/containers/Dashboard/__snapshots__/index.test.jsx.snap
+++ b/src/containers/Dashboard/__snapshots__/index.test.jsx.snap
@@ -15,6 +15,7 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail
     id="dashboard-content"
   >
     <DashboardLayout
+      bottomWidgetContainer={<BottomWidgetContainer />}
       sidebar={<LoadedWidgetSidebar />}
     >
       <CourseList />
@@ -56,6 +57,7 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
     id="dashboard-content"
   >
     <DashboardLayout
+      bottomWidgetContainer={<BottomWidgetContainer />}
       sidebar={<NoCoursesWidgetSidebar />}
     >
       <CourseList />
diff --git a/src/containers/Dashboard/index.jsx b/src/containers/Dashboard/index.jsx
index 629c9641..7ad12bce 100644
--- a/src/containers/Dashboard/index.jsx
+++ b/src/containers/Dashboard/index.jsx
@@ -6,6 +6,7 @@ import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CourseList from 'containers/CourseList';
 
+import BottomWidgetContainer from 'containers/WidgetContainers/BottomWidgetContainer';
 import LoadedSidebar from 'containers/WidgetContainers/LoadedSidebar';
 import NoCoursesSidebar from 'containers/WidgetContainers/NoCoursesSidebar';
 
@@ -34,7 +35,10 @@ export const Dashboard = () => {
         {initIsPending
           ? (<LoadingView />)
           : (
-            <DashboardLayout sidebar={hasCourses ? <LoadedSidebar /> : <NoCoursesSidebar />}>
+            <DashboardLayout
+              sidebar={hasCourses ? <LoadedSidebar /> : <NoCoursesSidebar />}
+              bottomWidgetContainer={<BottomWidgetContainer />}
+            >
               <CourseList />
             </DashboardLayout>
           )}
diff --git a/src/containers/Dashboard/index.test.jsx b/src/containers/Dashboard/index.test.jsx
index 5e6bbd81..e61deb51 100644
--- a/src/containers/Dashboard/index.test.jsx
+++ b/src/containers/Dashboard/index.test.jsx
@@ -6,6 +6,7 @@ import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CourseList from 'containers/CourseList';
 
+import BottomWidgetContainer from 'containers/WidgetContainers/BottomWidgetContainer';
 import LoadedWidgetSidebar from 'containers/WidgetContainers/LoadedSidebar';
 import NoCoursesWidgetSidebar from 'containers/WidgetContainers/NoCoursesSidebar';
 
@@ -121,7 +122,12 @@ describe('Dashboard', () => {
           showSelectSessionModal: true,
         },
         content: ['LoadedView', (
-          <DashboardLayout sidebar={<LoadedWidgetSidebar />}><CourseList /></DashboardLayout>
+          <DashboardLayout
+            sidebar={<LoadedWidgetSidebar />}
+            bottomWidgetContainer={<BottomWidgetContainer />}
+          >
+            <CourseList />
+          </DashboardLayout>
         )],
         showEnterpriseModal: false,
         showSelectSessionModal: true,
@@ -137,7 +143,12 @@ describe('Dashboard', () => {
           showSelectSessionModal: false,
         },
         content: ['Dashboard layout with no courses sidebar and content', (
-          <DashboardLayout sidebar={<NoCoursesWidgetSidebar />}><CourseList /></DashboardLayout>
+          <DashboardLayout
+            sidebar={<NoCoursesWidgetSidebar />}
+            bottomWidgetContainer={<BottomWidgetContainer />}
+          >
+            <CourseList />
+          </DashboardLayout>
         )],
         showEnterpriseModal: true,
         showSelectSessionModal: false,
diff --git a/src/containers/WidgetContainers/BottomWidgetContainer/__snapshots__/index.test.jsx.snap b/src/containers/WidgetContainers/BottomWidgetContainer/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..7033ab56
--- /dev/null
+++ b/src/containers/WidgetContainers/BottomWidgetContainer/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomWidgetContainer snapshots default 1`] = `<StaticCallouts />`;
diff --git a/src/containers/WidgetContainers/BottomWidgetContainer/index.jsx b/src/containers/WidgetContainers/BottomWidgetContainer/index.jsx
new file mode 100644
index 00000000..cfa08bfa
--- /dev/null
+++ b/src/containers/WidgetContainers/BottomWidgetContainer/index.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import TwoUWidget from 'widgets/TwoUWidget';
+
+export const BottomWidgetContainer = () => (
+  <TwoUWidget />
+);
+
+export default BottomWidgetContainer;
diff --git a/src/containers/WidgetContainers/BottomWidgetContainer/index.test.jsx b/src/containers/WidgetContainers/BottomWidgetContainer/index.test.jsx
new file mode 100644
index 00000000..5b55d8e8
--- /dev/null
+++ b/src/containers/WidgetContainers/BottomWidgetContainer/index.test.jsx
@@ -0,0 +1,12 @@
+import { shallow } from 'enzyme';
+
+import BottomWidgetContainer from '.';
+
+describe('BottomWidgetContainer', () => {
+  describe('snapshots', () => {
+    test('default', () => {
+      const wrapper = shallow(<BottomWidgetContainer />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/data/services/segment/utils.js b/src/data/services/segment/utils.js
index 65f30642..fd73ef84 100755
--- a/src/data/services/segment/utils.js
+++ b/src/data/services/segment/utils.js
@@ -9,8 +9,11 @@ export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
   { ...options, app_name: appName },
 );
 
-export const createLinkTracker = (tracker, href) => (e) => {
+export const createLinkTracker = (tracker, href, openInNewTab = false) => (e) => {
   e.preventDefault();
   tracker();
+  if (openInNewTab) {
+    return setTimeout(() => { global.open(href, '_blank'); }, LINK_TIMEOUT);
+  }
   return setTimeout(() => { global.location.href = href; }, LINK_TIMEOUT);
 };
diff --git a/src/optimizely.js b/src/optimizely.js
new file mode 100644
index 00000000..15751f4c
--- /dev/null
+++ b/src/optimizely.js
@@ -0,0 +1,12 @@
+const getOptimizely = () => {
+  const prodSrc = `${process.env.MARKETING_SITE_BASE_URL}/optimizelyjs/${process.env.OPTIMIZELY_PROJECT_ID}.js`;
+  const devSrc = `https://cdn.optimizely.com/js/${process.env.OPTIMIZELY_PROJECT_ID}.js`;
+  const src = process.env.NODE_ENV === 'development' ? devSrc : prodSrc;
+
+  return {
+    src,
+    async: true,
+  };
+};
+
+export default getOptimizely;
diff --git a/src/widgets/TwoUWidget/LoadedView.jsx b/src/widgets/TwoUWidget/LoadedView.jsx
new file mode 100644
index 00000000..95b33bff
--- /dev/null
+++ b/src/widgets/TwoUWidget/LoadedView.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Badge, Hyperlink, Icon } from '@edx/paragon';
+import { ArrowForward } from '@edx/paragon/icons';
+
+import { useIsMediumScreen } from './hooks';
+import { getMerchandisingItems, countryCodeUS } from './constants';
+import messages from './messages';
+import track from './track';
+
+export const LoadedView = ({ countryCode, show2ULobs }) => {
+  const { formatMessage } = useIntl();
+  const merchandisingItems = getMerchandisingItems(countryCode);
+  const isMediumScreen = useIsMediumScreen();
+  const markup = { markup: children => <span className="d-inline-flex mb-0 text-brand-500">{children}</span> };
+
+  const onClickHandler = (program, href) => {
+    track.twoUWidgetCardClicked(program, href);
+  };
+
+  const items = merchandisingItems.map(item => (
+    <Hyperlink
+      destination={item.itemURL}
+      key={item.key}
+      onClick={() => onClickHandler(item.key, item.itemURL)}
+      target="_blank"
+      showLaunchIcon={false}
+      className={classNames('static-callouts-item', {
+        'static-callouts-item-md': isMediumScreen && countryCode === countryCodeUS,
+      })}
+    >
+      <Badge variant="warning" className="item-badge mb-2">{formatMessage(messages.badgeTitle)}</Badge>
+      <h3>
+        {formatMessage(item.title)}
+      </h3>
+      <div className="card-description">
+        {formatMessage(item.description)}
+        <Icon className="d-inline-block align-middle mx-1" src={ArrowForward} />
+      </div>
+    </Hyperlink>
+  ));
+
+  return (
+    show2ULobs && (
+      <div className="callouts-container">
+        <div>
+          <h2>
+            {formatMessage(messages.heading, markup)}
+          </h2>
+          <p className="mb-0 text-gray-700">
+            {formatMessage(messages.subheading)}
+          </p>
+        </div>
+        <div className={classNames('static-callouts-container', {
+          'static-callouts-container-md': isMediumScreen && countryCode === countryCodeUS,
+        })}
+        >
+          {items}
+        </div>
+      </div>
+    )
+  );
+};
+
+LoadedView.propTypes = {
+  countryCode: PropTypes.string.isRequired,
+  show2ULobs: PropTypes.bool.isRequired,
+};
+
+export default LoadedView;
diff --git a/src/widgets/TwoUWidget/LoadedView.test.jsx b/src/widgets/TwoUWidget/LoadedView.test.jsx
new file mode 100644
index 00000000..f7f91358
--- /dev/null
+++ b/src/widgets/TwoUWidget/LoadedView.test.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import LoadedView from './LoadedView';
+
+jest.mock('./hooks', () => ({
+  useIsMediumScreen: jest.fn(() => false),
+  useOptimizelyExperiment: jest.fn(),
+  useTwoUWidgetData: jest.fn(),
+}));
+
+describe('LoadedView tests', () => {
+  it('Do not display static LOB cards if the experiment is not active', () => {
+    const wrapper = shallow(<LoadedView countryCode="PK" show2ULobs={false} />);
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+  it('Display 4 static LOB cards for US users', () => {
+    const wrapper = shallow(<LoadedView countryCode="US" show2ULobs />);
+    expect(wrapper.find('div.static-callouts-container').children()).toHaveLength(4);
+  });
+  it('Display 3 static LOB cards for non-US users', () => {
+    const wrapper = shallow(<LoadedView countryCode="PK" show2ULobs />);
+    expect(wrapper.find('div.static-callouts-container').children()).toHaveLength(3);
+  });
+});
diff --git a/src/widgets/TwoUWidget/LoadingView.jsx b/src/widgets/TwoUWidget/LoadingView.jsx
new file mode 100644
index 00000000..9dbd6b6f
--- /dev/null
+++ b/src/widgets/TwoUWidget/LoadingView.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Skeleton } from '@edx/paragon';
+
+export const LoadingView = () => (
+  <div className="loading-callouts-container">
+    <h2 className="skeleton-title-width"><Skeleton /></h2>
+    <p><Skeleton /></p>
+  </div>
+);
+
+export default LoadingView;
diff --git a/src/widgets/TwoUWidget/LoadingView.test.jsx b/src/widgets/TwoUWidget/LoadingView.test.jsx
new file mode 100644
index 00000000..457fe185
--- /dev/null
+++ b/src/widgets/TwoUWidget/LoadingView.test.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import LoadingView from './LoadingView';
+
+describe('TwoUWidget LoadingView', () => {
+  test('snapshot', () => {
+    expect(shallow(<LoadingView />)).toMatchSnapshot();
+  });
+});
diff --git a/src/widgets/TwoUWidget/__snapshots__/LoadingView.test.jsx.snap b/src/widgets/TwoUWidget/__snapshots__/LoadingView.test.jsx.snap
new file mode 100644
index 00000000..78c453b4
--- /dev/null
+++ b/src/widgets/TwoUWidget/__snapshots__/LoadingView.test.jsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TwoUWidget LoadingView snapshot 1`] = `
+<div
+  className="loading-callouts-container"
+>
+  <h2
+    className="skeleton-title-width"
+  >
+    <Component />
+  </h2>
+  <p>
+    <Component />
+  </p>
+</div>
+`;
diff --git a/src/widgets/TwoUWidget/__snapshots__/index.test.jsx.snap b/src/widgets/TwoUWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..e3a13e2b
--- /dev/null
+++ b/src/widgets/TwoUWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TwoUWidget tests TwoUWidget snapshot 1`] = `""`;
diff --git a/src/widgets/TwoUWidget/api.js b/src/widgets/TwoUWidget/api.js
new file mode 100644
index 00000000..6a501cd6
--- /dev/null
+++ b/src/widgets/TwoUWidget/api.js
@@ -0,0 +1,10 @@
+import { get, stringifyUrl } from 'data/services/lms/utils';
+import urls from 'data/services/lms/urls';
+
+export const fetchUrl = `${urls.api}/learner_home/twou_widget_context/`;
+
+const fetchTwoUWidgetContext = () => get(stringifyUrl(fetchUrl));
+
+export default {
+  fetchTwoUWidgetContext,
+};
diff --git a/src/widgets/TwoUWidget/api.test.js b/src/widgets/TwoUWidget/api.test.js
new file mode 100644
index 00000000..1585516d
--- /dev/null
+++ b/src/widgets/TwoUWidget/api.test.js
@@ -0,0 +1,17 @@
+import { get, stringifyUrl } from 'data/services/lms/utils';
+import api, { fetchUrl } from './api';
+
+jest.mock('data/services/lms/utils', () => ({
+  stringifyUrl: (...args) => ({ stringifyUrl: args }),
+  get: (...args) => ({ get: args }),
+}));
+
+describe('twoUWidgetContext api', () => {
+  describe('fetchTwoUWidgetContext', () => {
+    it('call gets the country code of the user', () => {
+      expect(api.fetchTwoUWidgetContext()).toEqual(
+        get(stringifyUrl(fetchUrl)),
+      );
+    });
+  });
+});
diff --git a/src/widgets/TwoUWidget/constants.js b/src/widgets/TwoUWidget/constants.js
new file mode 100644
index 00000000..f9acbeee
--- /dev/null
+++ b/src/widgets/TwoUWidget/constants.js
@@ -0,0 +1,91 @@
+/* eslint-disable quotes */
+import { StrictDict } from 'utils';
+
+const countryCodeUS = 'US';
+
+const merchandisingKeys = StrictDict({
+  execed: 'execed',
+  execedDescription: 'execedDescription',
+  masters: 'masters',
+  mastersDescription: 'mastersDescription',
+  bachelors: 'bachelors',
+  bachelorsDescription: 'bachelorsDescription',
+  bootcamps: 'bootcamps',
+  bootcampsDescription: 'bootcampsDescription',
+});
+
+const messages = StrictDict({
+  [merchandisingKeys.execed]: {
+    id: 'TwoUWidget.execed',
+    defaultMessage: 'Executive Education',
+    description: 'The title for the link to the executive education page.',
+  },
+  [merchandisingKeys.execedDescription]: {
+    id: 'TwoUWidget.execedDescription',
+    defaultMessage: 'Short courses to develop leadership skills',
+    description: 'The description for the link to the executive education page.',
+  },
+  [merchandisingKeys.masters]: {
+    id: 'TwoUWidget.masters',
+    defaultMessage: `Master's Degrees`,
+    description: 'The title for the link to the masters page.',
+  },
+  [merchandisingKeys.mastersDescription]: {
+    id: 'TwoUWidget.mastersDescription',
+    defaultMessage: 'Online degree programs from top universities',
+    description: 'The description for the link to the masters page.',
+  },
+  [merchandisingKeys.bachelors]: {
+    id: 'TwoUWidget.bachelors',
+    defaultMessage: `Bachelor's Degrees`,
+    description: 'The title for the link to the bachelors page.',
+  },
+  [merchandisingKeys.bachelorsDescription]: {
+    id: 'TwoUWidget.bachelorsDescription',
+    defaultMessage: 'Begin or complete a degree; fully online',
+    description: 'The description for the link to the bachelors page.',
+  },
+  [merchandisingKeys.bootcamps]: {
+    id: 'TwoUWidget.bootcamps',
+    defaultMessage: 'Boot Camps',
+    description: 'The title for the link to the boot camps page.',
+  },
+  [merchandisingKeys.bootcampsDescription]: {
+    id: 'TwoUWidget.bootcampsDescription',
+    defaultMessage: 'Intensive, hands-on, project-based training',
+    description: 'The description for the link to the boot camps page.',
+  },
+});
+
+const merchandisingItems = [
+  {
+    key: merchandisingKeys.execed,
+    title: messages[merchandisingKeys.execed],
+    description: messages[merchandisingKeys.execedDescription],
+    itemURL: 'https://www.edx.org/executive-education?vanguards_click=execed',
+  },
+  {
+    key: merchandisingKeys.masters,
+    title: messages[merchandisingKeys.masters],
+    description: messages[merchandisingKeys.mastersDescription],
+    itemURL: 'https://www.edx.org/masters?vanguards_click=masters',
+  },
+  {
+    key: merchandisingKeys.bachelors,
+    title: messages[merchandisingKeys.bachelors],
+    description: messages[merchandisingKeys.bachelorsDescription],
+    itemURL: 'https://www.edx.org/bachelors?vanguards_click=bachelors',
+  },
+  {
+    key: merchandisingKeys.bootcamps,
+    title: messages[merchandisingKeys.bootcamps],
+    description: messages[merchandisingKeys.bootcampsDescription],
+    itemURL: 'https://www.edx.org/boot-camps?vanguards_click=bootcamps',
+  },
+];
+
+const getMerchandisingItems = (countryCode) => (
+  countryCode === countryCodeUS ? merchandisingItems : merchandisingItems.slice(0, 3)
+);
+
+export { getMerchandisingItems, countryCodeUS };
diff --git a/src/widgets/TwoUWidget/experiment.js b/src/widgets/TwoUWidget/experiment.js
new file mode 100644
index 00000000..8c1ce0ef
--- /dev/null
+++ b/src/widgets/TwoUWidget/experiment.js
@@ -0,0 +1,25 @@
+const activateExperiment = (isEnterpriseUser) => {
+  if (window.optimizely) {
+    window.optimizely.push({
+      type: 'user',
+      attributes: {
+        isEnterpriseUser,
+      },
+    });
+    window.optimizely.push({
+      type: 'page',
+      pageName: 'van_1225_merchandise_2u_lobs_on_learner_home',
+    });
+  }
+};
+
+const isUserInVariation = () => {
+  const experimentId = process.env.MERCHANDISE_2U_LOB_EXP_ID;
+  if (window.optimizely) {
+    const selectedVariant = window.optimizely.get('state').getVariationMap()[experimentId];
+    return selectedVariant?.name === 'dashboard_with_2u_lobs';
+  }
+  return false;
+};
+
+export { activateExperiment, isUserInVariation };
diff --git a/src/widgets/TwoUWidget/hooks.js b/src/widgets/TwoUWidget/hooks.js
new file mode 100644
index 00000000..0cc0a533
--- /dev/null
+++ b/src/widgets/TwoUWidget/hooks.js
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+
+import { breakpoints, useWindowSize } from '@edx/paragon';
+
+import { StrictDict } from 'utils';
+import { RequestStates } from 'data/constants/requests';
+import { hooks as appHooks } from 'data/redux';
+
+import { activateExperiment, isUserInVariation } from './experiment';
+import * as module from './hooks';
+import api from './api';
+
+export const state = StrictDict({
+  requestState: (val) => useState(val), // eslint-disable-line
+  data: (val) => useState(val), // eslint-disable-line
+});
+
+const useIsMediumScreen = () => {
+  const { width } = useWindowSize();
+  return width >= breakpoints.medium.minWidth && width < breakpoints.medium.maxWidth;
+};
+
+const useOptimizelyExperiment = () => {
+  const [show2ULobs, setShow2ULobs] = useState(false);
+  const [isExperimentLoaded, setIsExperimentLoaded] = useState(false);
+
+  const enterpriseData = appHooks.useEnterpriseDashboardData();
+  const isEnterpriseUser = !!enterpriseData;
+
+  useEffect(() => {
+    activateExperiment(isEnterpriseUser);
+    const timer = setTimeout(() => {
+      const inVariation = isUserInVariation();
+      setShow2ULobs(inVariation);
+      setIsExperimentLoaded(true);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [isEnterpriseUser]);
+
+  return { show2ULobs, isExperimentLoaded };
+};
+
+export const useFetchTwoUWidgetContext = (setRequestState, setData) => {
+  useEffect(() => {
+    let isMounted = true;
+    api.fetchTwoUWidgetContext().then((response) => {
+      if (isMounted) {
+        setRequestState(RequestStates.completed);
+        setData(response.data);
+      }
+    }).catch(() => {
+      if (isMounted) {
+        setRequestState(RequestStates.failed);
+      }
+    });
+    return () => { isMounted = false; };
+    /* eslint-disable */
+  }, []);
+};
+
+const useTwoUWidgetData = () => {
+  const [requestState, setRequestState] = module.state.requestState(RequestStates.pending);
+  const [data, setData] = module.state.data({});
+  module.useFetchTwoUWidgetContext(setRequestState, setData);
+
+  return {
+    countryCode: data?.countryCode || "",
+    isLoaded: requestState === RequestStates.completed,
+    isFailed: requestState === RequestStates.failed,
+    isLoading: requestState === RequestStates.pending,
+  };
+};
+
+export { useIsMediumScreen, useOptimizelyExperiment, useTwoUWidgetData };
diff --git a/src/widgets/TwoUWidget/hooks.test.js b/src/widgets/TwoUWidget/hooks.test.js
new file mode 100644
index 00000000..8f1a7ea7
--- /dev/null
+++ b/src/widgets/TwoUWidget/hooks.test.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { MockUseState } from 'testUtils';
+import { RequestStates } from 'data/constants/requests';
+
+import api from './api';
+import * as hooks from './hooks';
+
+jest.mock('./api', () => ({
+  fetchTwoUWidgetContext: jest.fn(),
+}));
+
+const state = new MockUseState(hooks);
+
+const countryCode = 'US';
+let out;
+describe('TwoUStaticCallOut hooks', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  describe('state fields', () => {
+    state.testGetter(state.keys.requestState);
+  });
+  describe('useFetchTwoUWidgetContext', () => {
+    describe('behavior', () => {
+      describe('useEffect call', () => {
+        let calls;
+        let cb;
+        const response = 'test-response';
+        const setRequestState = jest.fn();
+        const setData = jest.fn();
+        beforeEach(() => {
+          out = hooks.useFetchTwoUWidgetContext(setRequestState, setData);
+          ({ calls } = React.useEffect.mock);
+          ([[cb]] = calls);
+        });
+        it('calls useEffect once', () => {
+          expect(calls.length).toEqual(1);
+        });
+        it('calls fetchTwoUWidgetContext', () => {
+          api.fetchTwoUWidgetContext.mockReturnValueOnce(Promise.resolve(response));
+          cb();
+          expect(api.fetchTwoUWidgetContext).toHaveBeenCalledWith();
+        });
+      });
+    });
+  });
+  describe('useTwoUWidgetData', () => {
+    let fetchSpy;
+    beforeEach(() => {
+      state.mock();
+      fetchSpy = jest.spyOn(hooks, 'useFetchTwoUWidgetContext').mockImplementationOnce(() => {});
+      out = hooks.useTwoUWidgetData();
+    });
+    it('calls useFetchTwoUWidgetContext with setRequestState and setData', () => {
+      expect(fetchSpy).toHaveBeenCalledWith(state.setState.requestState, state.setState.data);
+    });
+    it('initializes requestState as RequestStates.pending', () => {
+      state.expectInitializedWith(state.keys.requestState, RequestStates.pending);
+    });
+    describe('output', () => {
+      describe('request is completed, with returned country code', () => {
+        beforeEach(() => {
+          state.mockVal(state.keys.requestState, RequestStates.completed);
+          state.mockVal(state.keys.data, { countryCode });
+          out = hooks.useTwoUWidgetData();
+        });
+        it('is not loading', () => {
+          expect(out.isLoading).toEqual(false);
+        });
+        it('is loaded', () => {
+          expect(out.isLoaded).toEqual(true);
+        });
+        it('is not failed', () => {
+          expect(out.isFailed).toEqual(false);
+        });
+        it('returns country code', () => {
+          expect(out.countryCode).toEqual(countryCode);
+        });
+      });
+    });
+  });
+});
diff --git a/src/widgets/TwoUWidget/index.jsx b/src/widgets/TwoUWidget/index.jsx
new file mode 100644
index 00000000..570c9226
--- /dev/null
+++ b/src/widgets/TwoUWidget/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import './index.scss';
+import { countryCodeUS } from './constants';
+import LoadingView from './LoadingView';
+import LoadedView from './LoadedView';
+import { useTwoUWidgetData, useOptimizelyExperiment } from './hooks';
+import track from './track';
+
+export const TwoUWidget = () => {
+  // TODO [VAN-1225] this will be removed after experiment.
+  const { show2ULobs, isExperimentLoaded } = useOptimizelyExperiment();
+  const { isLoading, isLoaded, countryCode } = useTwoUWidgetData();
+
+  if (isExperimentLoaded && isLoaded && countryCode) {
+    track.twoUWidgetExperimentViewed(show2ULobs, countryCode === countryCodeUS);
+  }
+  if (isLoading) {
+    return <LoadingView />;
+  }
+  if (isLoaded && show2ULobs) {
+    return <LoadedView countryCode={countryCode} show2ULobs={show2ULobs} />;
+  }
+  return '';
+};
+
+export default TwoUWidget;
diff --git a/src/widgets/TwoUWidget/index.scss b/src/widgets/TwoUWidget/index.scss
new file mode 100644
index 00000000..d9666966
--- /dev/null
+++ b/src/widgets/TwoUWidget/index.scss
@@ -0,0 +1,92 @@
+@import "@edx/paragon/scss/core/core";
+
+.callouts-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 3rem;
+}
+
+.loading-callouts-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeleton-title-width {
+  max-width: 34rem;
+}
+
+.item-badge {
+  width: fit-content;
+}
+
+.card-description {
+  font-size: 0.875rem;
+  color: $gray-500;
+}
+
+.static-callouts-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.static-callouts-item {
+  @include hover() {
+    text-decoration: none;
+  }
+  display: flex;
+  flex-direction: column;
+  flex-basis: fit-content;
+  flex-grow: 1;
+  padding: 0 50px;
+  position: relative;
+}
+
+.static-callouts-item:not(:last-child)::after {
+  position: absolute;
+  right: -12px;
+  content: ' ';
+  height: 100%;
+  border-right: 4px solid $light-400;
+  transform: skew(-12deg);
+}
+
+.static-callouts-item:first-child {
+  padding-left: 0;
+}
+
+.static-callouts-item:last-child {
+  padding-right: 0;
+}
+
+@include media-breakpoint-down(sm) {
+  .static-callouts-container {
+    flex-direction: column;
+    row-gap: 1.5rem !important;
+  }
+
+  .static-callouts-item {
+    padding: 0 !important;
+  }
+
+  .static-callouts-item::after {
+    border: none !important;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .static-callouts-container-md {
+    flex-wrap: wrap;
+    row-gap: 3.125rem;
+  }
+
+  .static-callouts-item-md {
+    padding: 0;
+  }
+  .static-callouts-item-md:nth-child(even) {
+    padding-left: 3.125rem;
+  }
+
+  .static-callouts-item-md:nth-child(even)::after {
+    border: none !important;
+  }
+}
diff --git a/src/widgets/TwoUWidget/index.test.jsx b/src/widgets/TwoUWidget/index.test.jsx
new file mode 100644
index 00000000..c1647440
--- /dev/null
+++ b/src/widgets/TwoUWidget/index.test.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import hooks from './hooks';
+import TwoUWidget from '.';
+import LoadedView from './LoadedView';
+import LoadingView from './LoadingView';
+
+jest.mock('./hooks', () => ({
+  useIsMediumScreen: jest.fn(() => false),
+  useTwoUWidgetData: jest.fn(),
+  useOptimizelyExperiment: jest.fn(() => ({ show2ULobs: false, isExperimentLoaded: false })),
+}));
+jest.mock('./LoadingView', () => 'LoadingView');
+jest.mock('./LoadedView', () => 'LoadedView');
+
+describe('TwoUWidget tests', () => {
+  const twoUWidgetDefaultValues = {
+    isLoaded: false,
+    isLoading: false,
+    countryCode: '',
+  };
+  it('TwoUWidget snapshot', () => {
+    hooks.useTwoUWidgetData.mockReturnValueOnce({
+      ...twoUWidgetDefaultValues,
+      isLoaded: true,
+    });
+    expect(shallow(<TwoUWidget />)).toMatchSnapshot();
+  });
+  it('displays LoadingView if request is loading', () => {
+    hooks.useTwoUWidgetData.mockReturnValueOnce({
+      ...twoUWidgetDefaultValues,
+      isLoading: true,
+    });
+    expect(shallow(<TwoUWidget />)).toMatchObject(shallow(<LoadingView />));
+  });
+  it('displays LoadedView if request is done', () => {
+    hooks.useTwoUWidgetData.mockReturnValueOnce({
+      ...twoUWidgetDefaultValues,
+      isLoaded: true,
+    });
+    hooks.useOptimizelyExperiment.mockReturnValueOnce({
+      show2ULobs: true,
+      isExperimentLoaded: true,
+    });
+    expect(shallow(<TwoUWidget />)).toMatchObject(shallow(<LoadedView countryCode="" show2ULobs />));
+  });
+});
diff --git a/src/widgets/TwoUWidget/messages.js b/src/widgets/TwoUWidget/messages.js
new file mode 100644
index 00000000..a3bf197b
--- /dev/null
+++ b/src/widgets/TwoUWidget/messages.js
@@ -0,0 +1,22 @@
+/* eslint-disable quotes */
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  badgeTitle: {
+    id: 'TwoUWidget.badgeTitle',
+    defaultMessage: 'New',
+    description: 'The title for item badge.',
+  },
+  heading: {
+    id: 'TwoUWidget.heading',
+    defaultMessage: 'More opportunities for you <markup>to learn</markup>',
+    description: 'The heading for static callouts.',
+  },
+  subheading: {
+    id: 'TwoUWidget.subheading',
+    defaultMessage: `We've added 500+ learning opportunities to create one of the world's most comprehensive free-to-degree online learning platforms.`,
+    description: 'The subheading for static callouts.',
+  },
+});
+
+export default messages;
diff --git a/src/widgets/TwoUWidget/track.js b/src/widgets/TwoUWidget/track.js
new file mode 100644
index 00000000..e5bda285
--- /dev/null
+++ b/src/widgets/TwoUWidget/track.js
@@ -0,0 +1,25 @@
+import { StrictDict } from 'utils';
+import { createEventTracker, createLinkTracker } from 'data/services/segment/utils';
+
+export const eventNames = StrictDict({
+  experimentViewed: 'learner-home.experiment.viewed',
+  cardClicked: 'learner-home.2ulobcallout.clicked',
+});
+
+export const twoUWidgetExperimentViewed = (viewed, showBootcamp) => createEventTracker(eventNames.experimentViewed, {
+  twoU_lob_callout: viewed,
+  show_bootcamp: showBootcamp,
+});
+
+export const twoUWidgetCardClicked = (program, href) => createLinkTracker(
+  createEventTracker(eventNames.cardClicked, {
+    program,
+  }),
+  href,
+  true,
+);
+
+export default {
+  twoUWidgetExperimentViewed,
+  twoUWidgetCardClicked,
+};