diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
index 7d4fec1c2f..7bf93fd1bf 100644
--- a/CHANGE_LOG.md
+++ b/CHANGE_LOG.md
@@ -1,3 +1,17 @@
+# [1.81.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.80.0...v1.81.0) (2022-12-01)
+
+
+### Features
+
+* **mux:** zero-rate Mux event calls to Litix ([b3b5cd8](https://github.com/oaknational/Oak-Web-Application/commit/b3b5cd86613f228fa4bde8875dbaaab5aa786936))
+
+# [1.80.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.79.0...v1.80.0) (2022-12-01)
+
+
+### Features
+
+* unit list and list item ([cd67b96](https://github.com/oaknational/Oak-Web-Application/commit/cd67b96d8e3e68134c9cc498e2683f8579051008))
+
 # [1.79.0](https://github.com/oaknational/Oak-Web-Application/compare/v1.78.0...v1.79.0) (2022-12-01)
 
 
diff --git a/package-lock.json b/package-lock.json
index 7736b2aac8..68943f49a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80856,7 +80856,7 @@
         "kleur": "~4.1.4",
         "node.extend": "~2.0.2",
         "p-timeout": "~4.1.0",
-        "puppeteer": "~9.1.1",
+        "puppeteer": "^19.2.2",
         "semver": "~7.3.5"
       },
       "dependencies": {
@@ -80898,7 +80898,7 @@
         "node-fetch": "~2.6.1",
         "pa11y": "~6.1.0",
         "protocolify": "~3.0.0",
-        "puppeteer": "~9.1.1",
+        "puppeteer": "^19.2.2",
         "wordwrap": "~1.0.0"
       },
       "dependencies": {
diff --git a/src/common-lib/urls/urls.ts b/src/common-lib/urls/urls.ts
index d972186be8..4cc6d13682 100644
--- a/src/common-lib/urls/urls.ts
+++ b/src/common-lib/urls/urls.ts
@@ -85,8 +85,16 @@ export type UnitIndexLinkProps = {
   subject: string;
   search?: {
     ["learning-theme"]?: string | null;
+    ["tier"]?: string | null;
   };
 };
+export type LessonIndexLinkProps = {
+  page: "lesson-index";
+  keyStage: string;
+  subject: string;
+  slug: string;
+};
+
 export type ResolveOakHrefProps =
   | {
       page: Exclude<OakPageName, "blog-index" | "webinars-index">;
@@ -96,7 +104,8 @@ export type ResolveOakHrefProps =
       slug: string;
     }
   | PostIndexLinkProps
-  | UnitIndexLinkProps;
+  | UnitIndexLinkProps
+  | LessonIndexLinkProps;
 
 /**
  * Pass readable props which are unlikely to need to change, and return an href.
@@ -153,6 +162,9 @@ export const resolveOakHref = (props: ResolveOakHrefProps) => {
 
       return `${path}?${queryString}`;
     }
+    case "lesson-index": {
+      return `/beta/teachers/key-stage/${props.keyStage}/subject/${props.subject}/units/${props.slug}`;
+    }
 
     default:
       return OAK_PAGES[props.page];
diff --git a/src/components/Filters/LearningThemeFilters/LearningThemeFilters.tsx b/src/components/Filters/LearningThemeFilters/LearningThemeFilters.tsx
index 8eb3f44216..b543f034de 100644
--- a/src/components/Filters/LearningThemeFilters/LearningThemeFilters.tsx
+++ b/src/components/Filters/LearningThemeFilters/LearningThemeFilters.tsx
@@ -2,7 +2,7 @@ import { UnitIndexLinkProps } from "../../../common-lib/urls";
 import CategoryFilterList from "../CategoryFilterList";
 import useCategoryFilterList from "../CategoryFilterList/useCategoryFilterList";
 
-type LearningThemeFiltersProps = {
+export type LearningThemeFiltersProps = {
   labelledBy: string;
   selectedThemeSlug: string;
   learningThemes: { label: string; slug: string | null }[];
diff --git a/src/components/UnitList/UnitList.stories.tsx b/src/components/UnitList/UnitList.stories.tsx
new file mode 100644
index 0000000000..d0199773a1
--- /dev/null
+++ b/src/components/UnitList/UnitList.stories.tsx
@@ -0,0 +1,93 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { UnitListProps } from "./UnitList";
+
+import Component from ".";
+
+const currentPageItems: UnitListProps = {
+  units: [
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: true,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+    {
+      title:
+        "1, To build knowledge of the historical context of the play ‘Macbeth’",
+      slug: "To-build-knowledge",
+      learningThemeTitle: "MacBeth",
+      lessonCount: 4,
+      hasUnitQuiz: false,
+      subjectSlug: "english",
+      keyStageSlug: "2",
+    },
+  ],
+  keyStageSlug: "4",
+  subjectSlug: "computing",
+  headingTag: "h1",
+  paginationProps: {
+    currentPage: 1,
+    totalPages: 2,
+  },
+};
+
+const tiers = [
+  { title: "Foundation", slug: "foundation", unitCount: 14 },
+  { title: "Core", slug: "core", unitCount: 14 },
+  { title: "Higher", slug: "higher", unitCount: 14 },
+];
+
+export default {
+  title: "Lists/Unit list",
+  component: Component,
+} as ComponentMeta<typeof Component>;
+
+const Template: ComponentStory<typeof Component> = (args) => {
+  return <Component {...args} />;
+};
+
+export const UnitList = Template.bind({});
+
+UnitList.args = currentPageItems;
+
+export const UnitListTiers = Template.bind({});
+
+UnitListTiers.args = {
+  ...currentPageItems,
+  tiers: tiers,
+};
diff --git a/src/components/UnitList/UnitList.test.tsx b/src/components/UnitList/UnitList.test.tsx
new file mode 100644
index 0000000000..45b11e2bc7
--- /dev/null
+++ b/src/components/UnitList/UnitList.test.tsx
@@ -0,0 +1,33 @@
+import renderWithProviders from "../../__tests__/__helpers__/renderWithProviders";
+import { mockPaginationProps } from "../Pagination/Pagination.test";
+
+import UnitList from ".";
+
+describe("components/UnitList", () => {
+  test("renders the list items", () => {
+    const { getByRole } = renderWithProviders(
+      <UnitList
+        paginationProps={mockPaginationProps}
+        subjectSlug={"computing"}
+        keyStageSlug={"2"}
+        headingTag={"h1"}
+        units={[
+          {
+            title:
+              "1, To build knowledge of the historical context of the play ‘Macbeth’",
+            slug: "To-build-knowledge",
+            learningThemeTitle: "MacBeth",
+            lessonCount: 4,
+            hasUnitQuiz: false,
+            subjectSlug: "english",
+            keyStageSlug: "2",
+          },
+        ]}
+      />
+    );
+
+    const listHeading = getByRole("heading", { level: 1 });
+
+    expect(listHeading).toBeInTheDocument();
+  });
+});
diff --git a/src/components/UnitList/UnitList.tsx b/src/components/UnitList/UnitList.tsx
new file mode 100644
index 0000000000..2867988afe
--- /dev/null
+++ b/src/components/UnitList/UnitList.tsx
@@ -0,0 +1,89 @@
+import { FC } from "react";
+
+import Box from "../Box";
+import Flex from "../Flex";
+import Pagination, { PaginationProps } from "../Pagination";
+import { Heading, LI, Span, UL } from "../Typography";
+import { HeadingTag } from "../Typography/Heading";
+import OakLink from "../OakLink";
+
+import UnitListItem from "./UnitListItem";
+import { UnitListItemProps } from "./UnitListItem/UnitListItem";
+
+export type Tier = {
+  title: string;
+  slug: string;
+  unitCount: number;
+};
+
+export type UnitListProps = {
+  units: UnitListItemProps[];
+  keyStageSlug: string;
+  subjectSlug: string;
+  paginationProps: PaginationProps;
+  headingTag: HeadingTag;
+  tiers?: Tier[];
+};
+/**
+ * Contains a list of units
+ *
+ * ## Usage
+ * Used on subject, unit and search results page
+ */
+const UnitList: FC<UnitListProps> = (props) => {
+  const {
+    units,
+    paginationProps,
+    headingTag,
+    tiers,
+    keyStageSlug,
+    subjectSlug,
+  } = props;
+
+  return (
+    <Flex $flexDirection="column">
+      <Flex $flexDirection={["column-reverse", "column"]}>
+        <Heading $font={["heading-6", "heading-5"]} $mb={24} tag={headingTag}>
+          Units
+        </Heading>
+
+        {tiers && (
+          <Flex $mb={[24, 32]}>
+            {tiers.map(({ title, slug, unitCount }) => (
+              <OakLink
+                keyStage={keyStageSlug}
+                subject={subjectSlug}
+                search={{ tier: slug }}
+                page={"unit-index"}
+              >
+                <Span
+                  $font={"heading-7"}
+                  $mr={[12, 32]}
+                >{`${title} (${unitCount})`}</Span>
+              </OakLink>
+            ))}
+          </Flex>
+        )}
+      </Flex>
+
+      {units.length ? (
+        <>
+          <UL $reset>
+            {units.map((item) => (
+              <LI key={`UnitList-UnitListItem-${item.slug}`}>
+                <UnitListItem {...item} />
+              </LI>
+            ))}
+          </UL>
+        </>
+      ) : null}
+      {units.length > 20 && (
+        <Box $width="100%" $mt={[0, "auto"]} $pt={48}>
+          <Pagination {...paginationProps} />
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default UnitList;
diff --git a/src/components/UnitList/UnitListItem/UnitListItem.tsx b/src/components/UnitList/UnitListItem/UnitListItem.tsx
new file mode 100644
index 0000000000..5a194242fb
--- /dev/null
+++ b/src/components/UnitList/UnitListItem/UnitListItem.tsx
@@ -0,0 +1,116 @@
+import { FC } from "react";
+
+import useClickableCard from "../../../hooks/useClickableCard";
+import Flex from "../../Flex";
+import Icon from "../../Icon";
+import { Heading, Span } from "../../Typography";
+import BoxBorders from "../../SpriteSheet/BrushSvgs/BoxBorders";
+import Card from "../../Card";
+import OakLink from "../../OakLink";
+
+export type UnitListItemProps = {
+  title: string;
+  slug: string;
+  learningThemeTitle?: string;
+  lessonCount: number;
+  hasUnitQuiz: boolean;
+  subjectSlug: string;
+  keyStageSlug: string;
+};
+
+/**
+ * Contains an title, icon, leaning theme, number of lessons and optional Unit Quiz .
+ * Links to a lesson-index page
+ *
+ *
+ */
+const UnitListItem: FC<UnitListItemProps> = (props) => {
+  const {
+    title,
+    learningThemeTitle,
+    lessonCount,
+    hasUnitQuiz,
+    subjectSlug,
+    keyStageSlug,
+    slug,
+  } = props;
+
+  const { containerProps, isHovered, primaryTargetProps } =
+    useClickableCard<HTMLAnchorElement>();
+
+  return (
+    <Card
+      $justifyContent={"space-between"}
+      $flexDirection={"row"}
+      $mb={16}
+      $overflow={"hidden"}
+      {...containerProps}
+      $pa={0}
+    >
+      <Flex
+        $transform={isHovered ? "translateY(-4px)" : null}
+        $transition={"all 0.4s ease-out"}
+        $width={"100%"}
+        $position={"relative"}
+        $flexDirection={"row"}
+        $justifyContent={"space-between"}
+        $dropShadow={isHovered ? "subjectCardHover" : "subjectCard"}
+        $alignItems={"center"}
+      >
+        <Flex $mh={[16, 24]} $flexDirection={"column"}>
+          <OakLink
+            keyStage={keyStageSlug}
+            subject={subjectSlug}
+            slug={slug}
+            page={"lesson-index"}
+            {...primaryTargetProps}
+          >
+            <Heading
+              $mt={24}
+              $mb={12}
+              $font={["heading-7", "heading-6"]}
+              tag={"h3"}
+            >
+              {title}
+            </Heading>
+          </OakLink>
+          <Flex $mb={24} $flexDirection={["column", "row"]}>
+            {learningThemeTitle && (
+              <Span $mr={16} $mb={[4, 0]} $font={["body-3", "heading-light-7"]}>
+                {learningThemeTitle}
+              </Span>
+            )}
+            <Flex>
+              <Span $mr={16} $font={["body-3", "heading-light-7"]}>
+                {`${lessonCount} lessons`}
+              </Span>
+              {hasUnitQuiz && (
+                <Span $mr={16} $font={["body-3", "heading-light-7"]}>
+                  Unit quiz
+                </Span>
+              )}
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Flex
+        $justifyContent={"center"}
+        $alignItems={"center"}
+        $minHeight={110}
+        $minWidth={[72, 130]}
+        $background={"teachersLilac"}
+        $position={"relative"}
+        $dropShadow={isHovered ? "subjectCardHover" : "subjectCard"}
+        $transform={isHovered ? "translateY(-4px)" : null}
+        $transition={"all 0.4s ease-out"}
+      >
+        <Icon size={[50, 92]} name={"Rocket"}>
+          {title}
+        </Icon>
+      </Flex>
+      <BoxBorders gapPosition="bottomRight" />
+    </Card>
+  );
+};
+
+export default UnitListItem;
diff --git a/src/components/UnitList/UnitListItem/index.tsx b/src/components/UnitList/UnitListItem/index.tsx
new file mode 100644
index 0000000000..0afb53c8ff
--- /dev/null
+++ b/src/components/UnitList/UnitListItem/index.tsx
@@ -0,0 +1 @@
+export { default } from "./UnitListItem";
diff --git a/src/components/UnitList/index.tsx b/src/components/UnitList/index.tsx
new file mode 100644
index 0000000000..bbb4351c79
--- /dev/null
+++ b/src/components/UnitList/index.tsx
@@ -0,0 +1 @@
+export { default } from "./UnitList";
diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx
index 884d782109..b12c817e69 100644
--- a/src/components/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/VideoPlayer/VideoPlayer.tsx
@@ -108,6 +108,7 @@ const VideoPlayer: FC<VideoPlayerProps> = (props) => {
         playbackId={playbackId}
         thumbnailTime={thumbTime || undefined}
         customDomain={"video.thenational.academy"}
+        beaconCollectionDomain={"mux-litix.thenational.academy"}
         debug={debug}
         primaryColor={theme.colors.white}
         secondaryColor={theme.colors.black}