diff --git a/package-lock.json b/package-lock.json
index 0781d09b..5f27695c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "0.16.1",
+  "version": "0.20.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oaknational/oak-components",
-      "version": "0.16.1",
+      "version": "0.20.0",
       "devDependencies": {
         "@commitlint/cli": "^18.4.4",
         "@commitlint/config-conventional": "^18.4.4",
diff --git a/package.json b/package.json
index c37572fa..bcb1959d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "0.16.1",
+  "version": "0.20.0",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",
diff --git a/src/components/atoms/InternalCheckBoxLabel/InternalCheckBoxLabel.tsx b/src/components/atoms/InternalCheckBoxLabel/InternalCheckBoxLabel.tsx
index c663bdd8..4c55fa96 100644
--- a/src/components/atoms/InternalCheckBoxLabel/InternalCheckBoxLabel.tsx
+++ b/src/components/atoms/InternalCheckBoxLabel/InternalCheckBoxLabel.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { OakLabel, OakLabelProps } from "@/components/atoms";
 import { responsiveStyle } from "@/styles/utils/responsiveStyle";
@@ -9,6 +9,7 @@ export type InternalCheckBoxLabelProps = {
   labelAlignItems?: FlexStyleProps["$alignItems"];
   labelGap?: FlexStyleProps["$gap"];
   disabled?: boolean;
+  pointerEvents?: CSSProperties["pointerEvents"];
   "data-testid"?: string;
 } & OakLabelProps;
 
@@ -27,14 +28,10 @@ export const InternalCheckBoxLabel = styled(
 `;
 
 export const InternalCheckBoxLabelHoverDecor = styled(InternalCheckBoxLabel)`
-  ${(props) =>
-    props.disabled
-      ? css`
-          pointer-events: none;
-        `
-      : css`
-          cursor: pointer;
-        `}
+  ${(props) => `
+    ${props.pointerEvents ? `pointer-events: ${props.pointerEvents};` : ""}
+    ${props.disabled ? `pointer-events: none;` : `cursor: pointer;`}
+  `}
   @media (hover: hover) {
     &:hover {
       text-decoration: ${(props) => (props.disabled ? "none" : "underline")};
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 01d4a902..5a2d8333 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -1,4 +1,5 @@
 export * from "./pupil";
+export * from "./teacher";
 export * from "./OakSubjectIcon";
 export * from "./OakPrimaryNavItem";
 export * from "./OakPrimaryNav";
diff --git a/src/components/organisms/pupil/OakQuizCheckBox/OakQuizCheckBox.tsx b/src/components/organisms/pupil/OakQuizCheckBox/OakQuizCheckBox.tsx
index b9ca234b..617d596f 100644
--- a/src/components/organisms/pupil/OakQuizCheckBox/OakQuizCheckBox.tsx
+++ b/src/components/organisms/pupil/OakQuizCheckBox/OakQuizCheckBox.tsx
@@ -32,12 +32,6 @@ const StyledInternalCheckBox = styled(InternalCheckBox)`
   }
 `;
 
-const StyledInternalCheckBoxLabelHoverDecor = styled(
-  InternalCheckBoxLabelHoverDecor,
-)`
-  pointer-events: none; // To prevent the label from stealing the click event from the input
-`;
-
 type StyledFlexBoxProps = OakFlexProps & {
   $overlayBorderColor: OakCombinedColorToken;
   $feedbackBgColor?: OakCombinedColorToken;
@@ -69,7 +63,7 @@ const StyledFlexBox = styled(OakFlex)<StyledFlexBoxProps>`
   }
 
   @media (hover: hover) {
-    &:hover:has(input:not(:disabled)){
+    &:hover:has(input:not(:disabled)) {
       background-color: ${parseColor("bg-decorative1-subdued")};
     }
 
@@ -82,7 +76,8 @@ const StyledFlexBox = styled(OakFlex)<StyledFlexBoxProps>`
     }
 
     &:hover:has(
-        ${InternalCheckBoxLabelHoverDecor} input:not(:focus-visible):not(:checked):not(:disabled)
+        ${InternalCheckBoxLabelHoverDecor}
+          input:not(:focus-visible):not(:checked):not(:disabled)
       )::after {
       content: "";
       inset: 0;
@@ -96,31 +91,32 @@ const StyledFlexBox = styled(OakFlex)<StyledFlexBoxProps>`
       box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
         ${parseDropShadow("drop-shadow-centered-grey")};
     }
-    
+
     &:has(input:checked:not(:disabled)) {
       outline: ${parseBorder("border-solid-xl")};
-   }
+    }
 
-   &:has(input:checked:disabled) {
-    outline-color: ${(props) => css`
-      ${parseColor(props.$overlayBorderColor)}
-    `};
-  }
+    &:has(input:checked:disabled) {
+      outline-color: ${(props) => css`
+        ${parseColor(props.$overlayBorderColor)}
+      `};
+    }
 
-  &:has(input:disabled:not(:checked)) {
-     ${(props) =>
-       props.$feedbackBgColor
-         ? css`
-             background-color: ${props.$feedbackBgColor};
-           `
-         : undefined}
-  }
+    &:has(input:disabled:not(:checked)) {
+      ${(props) =>
+        props.$feedbackBgColor
+          ? css`
+              background-color: ${props.$feedbackBgColor};
+            `
+          : undefined}
+    }
 
-  &:has(input:disabled:checked) {
-    ${(props) => css`
-      background-color: ${parseColor(props.$feedbackBgColor)};
-    `};
- }
+    &:has(input:disabled:checked) {
+      ${(props) => css`
+        background-color: ${parseColor(props.$feedbackBgColor)};
+      `};
+    }
+  }
 `;
 
 export type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
@@ -204,7 +200,8 @@ export const OakQuizCheckBox = (props: OakQuizCheckBoxProps) => {
         isHighlighted ? "border-decorative5-stronger" : "transparent"
       }
     >
-      <StyledInternalCheckBoxLabelHoverDecor
+      <InternalCheckBoxLabelHoverDecor
+        pointerEvents="none"
         htmlFor={id}
         labelGap={"space-between-s"}
         labelAlignItems={"center"}
@@ -249,7 +246,7 @@ export const OakQuizCheckBox = (props: OakQuizCheckBoxProps) => {
           }
         />
         {image ? imageContainer : displayValue}
-      </StyledInternalCheckBoxLabelHoverDecor>
+      </InternalCheckBoxLabelHoverDecor>
       {isFeedback && (showTick || showCross) && (
         <OakFlex
           className="feedbackIconWrapper"
diff --git a/src/components/organisms/pupil/OakQuizCheckBox/__snapshots__/OakQuizCheckBox.test.tsx.snap b/src/components/organisms/pupil/OakQuizCheckBox/__snapshots__/OakQuizCheckBox.test.tsx.snap
index baa2ae8d..10f68678 100644
--- a/src/components/organisms/pupil/OakQuizCheckBox/__snapshots__/OakQuizCheckBox.test.tsx.snap
+++ b/src/components/organisms/pupil/OakQuizCheckBox/__snapshots__/OakQuizCheckBox.test.tsx.snap
@@ -20,14 +20,14 @@ exports[`OakQuizCheckBox matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c10 {
+.c9 {
   position: relative;
   width: 2rem;
   height: 2rem;
   font-family: Lexend,sans-serif;
 }
 
-.c14 {
+.c13 {
   position: absolute;
   top: 0rem;
   left: 0rem;
@@ -37,14 +37,14 @@ exports[`OakQuizCheckBox matches snapshot 1`] = `
   font-family: Lexend,sans-serif;
 }
 
-.c16 {
+.c15 {
   width: 100%;
   height: 100%;
   background: #222222;
   font-family: Lexend,sans-serif;
 }
 
-.c17 {
+.c16 {
   width: 100%;
   height: 100%;
   border: 0.125rem solid;
@@ -82,12 +82,12 @@ exports[`OakQuizCheckBox matches snapshot 1`] = `
   color: #222222;
 }
 
-.c15 {
+.c14 {
   pointer-events: none;
   opacity: 0;
 }
 
-input:checked + .c13 {
+input:checked + .c12 {
   opacity: 1;
 }
 
@@ -108,10 +108,11 @@ input:checked + .c13 {
 }
 
 .c8 {
+  pointer-events: none;
   cursor: pointer;
 }
 
-.c11 {
+.c10 {
   -webkit-appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -127,24 +128,20 @@ input:checked + .c13 {
   height: 2rem;
 }
 
-.c11:disabled {
+.c10:disabled {
   pointer-events: none;
 }
 
-.c12:checked:not(:disabled) {
+.c11:checked:not(:disabled) {
   border: 0.188rem solid;
   border-color: #222222;
 }
 
-.c12:checked:disabled {
+.c11:checked:disabled {
   border: 0.188rem solid;
   border-color: #808080;
 }
 
-.c9 {
-  pointer-events: none;
-}
-
 .c4:not(:focus-within) {
   outline: 0.25rem solid transparent;
 }
@@ -174,7 +171,7 @@ input:checked + .c13 {
 }
 
 @media (hover:hover) {
-  .c12:hover:not(:disabled) {
+  .c11:hover:not(:disabled) {
     background: #ffffff;
   }
 }
@@ -223,14 +220,15 @@ input:checked + .c13 {
       onClick={[Function]}
     >
       <label
-        className="c5 c6 c7 c8 c9"
+        className="c5 c6 c7 c8"
         htmlFor="checkbox-1"
+        pointerEvents="none"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <input
-            className="c11 c12"
+            className="c10 c11"
             disabled={false}
             id="checkbox-1"
             name="checkbox-1"
@@ -240,13 +238,13 @@ input:checked + .c13 {
             value="Option 1"
           />
           <div
-            className="c13 c14 c15"
+            className="c12 c13 c14"
           >
             <div
-              className="c16"
+              className="c15"
             >
               <div
-                className="c17"
+                className="c16"
               />
             </div>
           </div>
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/OaKSearchFilterCheckBox.test.tsx b/src/components/organisms/teacher/OakSearchFilterCheckBox/OaKSearchFilterCheckBox.test.tsx
new file mode 100644
index 00000000..6107e2bc
--- /dev/null
+++ b/src/components/organisms/teacher/OakSearchFilterCheckBox/OaKSearchFilterCheckBox.test.tsx
@@ -0,0 +1,147 @@
+import React, { createRef } from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+import { fireEvent } from "@testing-library/react";
+
+import { OakSearchFilterCheckBox } from "./OakSearchFilterCheckBox";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+import { OakThemeProvider } from "@/components/atoms";
+import { oakDefaultTheme } from "@/styles";
+
+describe("OakSearchFilterCheckBox", () => {
+  it("renders a checkbox", () => {
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        data-testid="test-1"
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    expect(getByRole("checkbox")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(
+      <OakThemeProvider theme={oakDefaultTheme}>
+        <OakSearchFilterCheckBox
+          id="checkbox-1"
+          value="Option 1"
+          icon={"subject-history"}
+          displayValue="Option 1"
+        />
+        ,
+      </OakThemeProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("has a label", () => {
+    const { getByLabelText } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        displayValue="Option 1"
+        value="1"
+        icon={"subject-history"}
+      />,
+    );
+    expect(getByLabelText("Option 1")).toBeInTheDocument();
+  });
+
+  it("calls onChange when clicked", () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        onChange={onChange}
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    getByRole("checkbox").click();
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("calls onFocus when focused", () => {
+    const onFocus = jest.fn();
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        onFocus={onFocus}
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    getByRole("checkbox").focus();
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it("calls onBlur when blurred", () => {
+    const onBlur = jest.fn();
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        onBlur={onBlur}
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    getByRole("checkbox").focus();
+    getByRole("checkbox").blur();
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it("calls onHovered when mouse entered and left", () => {
+    const onHovered = jest.fn();
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        onHovered={onHovered}
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    fireEvent.mouseEnter(getByRole("checkbox"));
+    fireEvent.mouseLeave(getByRole("checkbox"));
+    expect(onHovered).toHaveBeenCalled();
+  });
+
+  it("is not clickable when disabled", () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        onChange={onChange}
+        disabled
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    getByRole("checkbox").click();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("can be checked and unchecked using a ref", () => {
+    const ref = createRef<HTMLInputElement>();
+    const { getByRole } = renderWithTheme(
+      <OakSearchFilterCheckBox
+        id="checkbox-1"
+        value="Option 1"
+        innerRef={ref}
+        icon={"subject-history"}
+        displayValue="Option 1"
+      />,
+    );
+    ref.current?.click();
+    expect(getByRole("checkbox")).toBeChecked();
+    ref.current?.click();
+    expect(getByRole("checkbox")).not.toBeChecked();
+  });
+});
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx
new file mode 100644
index 00000000..d3eb9e77
--- /dev/null
+++ b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { OakSearchFilterCheckBox } from "./OakSearchFilterCheckBox";
+
+const meta: Meta<typeof OakSearchFilterCheckBox> = {
+  component: OakSearchFilterCheckBox,
+  tags: ["autodocs"],
+  title: "components/organisms/teacher/OakSearchFilterCheckBox",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+    controls: {
+      include: ["disabled", "defaultChecked", "displayValue", "value", "icon"],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof OakSearchFilterCheckBox>;
+
+export const Default: Story = {
+  render: (args) => <OakSearchFilterCheckBox {...args} />,
+  args: {
+    id: "checkbox-test-default",
+    value: "a test value",
+    displayValue: "Art and design",
+    icon: "subject-art",
+    "aria-label": "Art and design",
+  },
+  parameters: {
+    controls: {
+      include: ["disabled", "defaultChecked", "displayValue", "value", "icon"],
+    },
+  },
+};
+
+export const NoIcon: Story = {
+  render: (args) => <OakSearchFilterCheckBox {...args} />,
+  args: {
+    id: "checkbox-test-default",
+    value: "a test value",
+    displayValue: "Art and design",
+    "aria-label": "Art and design",
+  },
+  parameters: {
+    controls: {
+      include: ["disabled", "defaultChecked", "displayValue", "value", "icon"],
+    },
+  },
+};
+
+export const KeepIconColor: Story = {
+  render: (args) => <OakSearchFilterCheckBox {...args} />,
+  args: {
+    id: "checkbox-test-default",
+    value: "a test value",
+    displayValue: "Lessons",
+    "aria-label": "Art and design",
+    icon: "teacher-unit",
+    keepIconColor: true,
+  },
+  parameters: {
+    controls: {
+      include: ["disabled", "defaultChecked", "displayValue", "value", "icon"],
+    },
+  },
+};
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.tsx b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.tsx
new file mode 100644
index 00000000..e2ca45a5
--- /dev/null
+++ b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.tsx
@@ -0,0 +1,158 @@
+import React, { useRef } from "react";
+import styled from "styled-components";
+
+import { OakFlex, OakIcon, OakIconName } from "@/components/atoms";
+import { InternalCheckBoxLabelHoverDecor } from "@/components/atoms/InternalCheckBoxLabel";
+import {
+  BaseCheckBoxProps,
+  InternalCheckBox,
+} from "@/components/atoms/InternalCheckBox/InternalCheckBox";
+import { parseColor } from "@/styles/helpers/parseColor";
+import { parseBorder } from "@/styles/helpers/parseBorder";
+import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
+import { parseColorFilter } from "@/styles/helpers/parseColorFilter";
+
+// Converted to styled-component so it can be used in '&:checked:not(:disabled) + ${StyledOakIcon}' to change svg color.
+const StyledOakIcon = styled(OakIcon)``;
+
+const StyledInternalCheckBox = styled(InternalCheckBox)<{
+  keepIconColor?: boolean;
+}>`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+
+  &:checked:not(:disabled) + ${StyledOakIcon} {
+    filter: ${(props) =>
+      props.keepIconColor ? "none" : parseColorFilter("white")};
+  }
+
+  &:checked:not(:disabled) {
+    border: ${parseBorder("border-solid-l")};
+    border-color: ${parseColor("border-primary")};
+  }
+
+  &:checked:disabled {
+    border: ${parseBorder("border-solid-l")};
+    border-color: ${parseColor("text-disabled")};
+  }
+
+  &:hover:not(:disabled) {
+    background: ${parseColor("bg-primary")};
+  }
+`;
+
+const StyledFlexBox = styled(OakFlex)`
+  &:has(input:not(:disabled)) {
+    cursor: pointer;
+  }
+
+  &:has(input:disabled) {
+    pointer-events: none;
+    cursor: none;
+  }
+
+  &:hover:has(input:not(:disabled)) ${InternalCheckBoxLabelHoverDecor} {
+    text-decoration: underline;
+  }
+
+  &:hover:has(input:not(:disabled)) {
+    background-color: ${parseColor("bg-neutral")};
+  }
+
+  &:focus-within {
+    box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
+      ${parseDropShadow("drop-shadow-centered-grey")};
+  }
+
+  &:has(input:checked:not(:disabled)) {
+    background-color: ${parseColor("black")};
+    color: ${parseColor("white")};
+  }
+`;
+
+export type OakSearchFilterCheckBoxProps = Omit<
+  BaseCheckBoxProps,
+  "defaultChecked"
+> & {
+  innerRef?: React.RefObject<HTMLInputElement>;
+  displayValue: string;
+  icon?: OakIconName;
+  keepIconColor?: boolean;
+};
+
+/**
+ * A checkbox for search filters.
+ *
+ * Takes a displayValue and optional icon, for subject icons 'subject-[subjectSlug]' should be used.
+ *
+ * ## Events
+ * The following callbacks are available for tracking focus events:
+ *
+ * ### onChange
+ * onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+ *
+ * ### onFocus
+ *   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+ *
+ * ### onBlur
+ *    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+ *
+ * ### onHovered
+ *  `onHovered?: (id, value, duration: number) => void;`<br>
+ *  called after a mouseEnter and mouseLeave event has happened
+ *
+ */
+export const OakSearchFilterCheckBox = (
+  props: OakSearchFilterCheckBoxProps,
+) => {
+  const { id, value, disabled, innerRef, displayValue, icon, ...rest } = props;
+
+  const defaultRef = useRef<HTMLInputElement>(null);
+  const inputRef = innerRef ?? defaultRef;
+
+  const handleContainerClick = (
+    e:
+      | React.MouseEvent<HTMLDivElement>
+      | React.MouseEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLLabelElement>,
+  ) => {
+    const inputId = (e.target as HTMLInputElement).id;
+
+    if (inputId !== id) {
+      inputRef.current?.click();
+    }
+  };
+
+  return (
+    <OakFlex $minHeight={"all-spacing-8"} $position={"relative"}>
+      <StyledFlexBox
+        $borderRadius={"border-radius-s"}
+        $borderColor={"border-neutral-lighter"}
+        $ba="border-solid-s"
+        $background={"white"}
+        onClick={handleContainerClick}
+        $ph={"inner-padding-s"}
+        $pv={"inner-padding-ssx"}
+        $gap={"space-between-sssx"}
+      >
+        <StyledInternalCheckBox
+          id={id}
+          value={value}
+          disabled={disabled}
+          ref={inputRef}
+          {...rest}
+        />
+        {icon && <StyledOakIcon alt="" iconName={icon} />}
+        <InternalCheckBoxLabelHoverDecor
+          pointerEvents="none"
+          htmlFor={id}
+          $font={"heading-7"}
+          disabled={disabled}
+        >
+          {displayValue}
+        </InternalCheckBoxLabelHoverDecor>
+      </StyledFlexBox>
+    </OakFlex>
+  );
+};
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap b/src/components/organisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap
new file mode 100644
index 00000000..c577fc57
--- /dev/null
+++ b/src/components/organisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap
@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
+[
+  .c0 {
+  position: relative;
+  min-height: 2.5rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c2 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background: #ffffff;
+  border: 0.063rem solid;
+  border-color: #cacaca;
+  border-radius: 0.25rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c2:hover {
+  cursor: pointer;
+}
+
+.c7 {
+  position: relative;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.c8 {
+  object-fit: contain;
+}
+
+.c10 {
+  font-family: Lexend,sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0.0115rem;
+  -moz-letter-spacing: 0.0115rem;
+  -ms-letter-spacing: 0.0115rem;
+  letter-spacing: 0.0115rem;
+}
+
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c12 {
+  pointer-events: none;
+  cursor: pointer;
+}
+
+.c5 {
+  -webkit-appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  border: 0.125rem solid;
+  border-color: #222222;
+  border-radius: 0.125rem;
+}
+
+.c5:checked {
+  background: #222222;
+}
+
+.c5:disabled {
+  pointer-events: none;
+}
+
+.c6 {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.c6:checked:not(:disabled) {
+  border: 0.188rem solid;
+  border-color: #222222;
+}
+
+.c6:checked:disabled {
+  border: 0.188rem solid;
+  border-color: #808080;
+}
+
+.c6:hover:not(:disabled) {
+  background: #ffffff;
+}
+
+.c4:has(input:not(:disabled)) {
+  cursor: pointer;
+}
+
+.c4:has(input:disabled) {
+  pointer-events: none;
+  cursor: none;
+}
+
+.c4:hover:has(input:not(:disabled)) .c9 {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c4:hover:has(input:not(:disabled)) {
+  background-color: #f2f2f2;
+}
+
+.c4:focus-within {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
+.c4:has(input:checked:not(:disabled)) {
+  background-color: #222222;
+  color: #ffffff;
+}
+
+@media (hover:hover) {
+  .c12:hover {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+  }
+}
+
+@media (hover:hover) {
+  .c5:hover:not(:disabled) {
+    border-color: #222222;
+  }
+}
+
+<div
+    className="c0 c1"
+  >
+    <div
+      className="c2 c3 c4"
+      onClick={[Function]}
+    >
+      <input
+        className="c5 c6"
+        id="checkbox-1"
+        name="checkbox-1"
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="checkbox"
+        value="Option 1"
+      />
+      <div
+        className="c7 "
+      >
+        <img
+          alt=""
+          className="c8"
+          data-nimg="fill"
+          decoding="async"
+          loading="lazy"
+          onError={[Function]}
+          onLoad={[Function]}
+          src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/subject-icons/history.svg"
+          style={
+            {
+              "bottom": 0,
+              "color": "transparent",
+              "height": "100%",
+              "left": 0,
+              "objectFit": undefined,
+              "objectPosition": undefined,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": "100%",
+            }
+          }
+        />
+      </div>
+      <label
+        className="c9 c10 c11 c12"
+        htmlFor="checkbox-1"
+        pointerEvents="none"
+      >
+        Option 1
+      </label>
+    </div>
+  </div>,
+  ",",
+]
+`;
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/index.ts b/src/components/organisms/teacher/OakSearchFilterCheckBox/index.ts
new file mode 100644
index 00000000..c7b54532
--- /dev/null
+++ b/src/components/organisms/teacher/OakSearchFilterCheckBox/index.ts
@@ -0,0 +1 @@
+export * from "./OakSearchFilterCheckBox";
diff --git a/src/components/organisms/teacher/index.ts b/src/components/organisms/teacher/index.ts
new file mode 100644
index 00000000..c7b54532
--- /dev/null
+++ b/src/components/organisms/teacher/index.ts
@@ -0,0 +1 @@
+export * from "./OakSearchFilterCheckBox";
diff --git a/src/image-map.ts b/src/image-map.ts
index 266d5097..7042d708 100644
--- a/src/image-map.ts
+++ b/src/image-map.ts
@@ -48,15 +48,21 @@ export const icons = {
   quiz: "v1705416077/icons/kaaizjcudy0jfgfrrdel.svg",
   video: "v1705416078/icons/wzey1zfxrvv3apeebbf5.svg",
   intro: "v1705662092/icons/pl7bnmb13txese9yxkjv.svg",
+  "teacher-lesson": "icons/teacher-lesson.svg",
+  "teacher-unit": "icons/teacher-unit.svg",
   "move-arrows": "v1709052869/icons/hoddjsgpzkszgvnmn91q.svg",
   "subject-art": "subject-icons/art.svg",
   "subject-biology": "subject-icons/biology.svg",
   "subject-chemistry": "subject-icons/chemistry.svg",
   "subject-citizenship": "subject-icons/citizenship.svg",
+  "subject-gcse-citizenship": "subject-icons/citizenship.svg",
+  "subject-core-citizenship": "subject-icons/citizenship.svg",
   "subject-combined-science": "subject-icons/science.svg",
   "subject-communication-and-language":
     "subject-icons/communication-and-language.svg",
   "subject-computing": "subject-icons/computing.svg",
+  "subject-computer-science": "subject-icons/computing.svg",
+  "subject-core-computing": "subject-icons/computing.svg",
   "subject-computing-non-gcse": "subject-icons/computing.svg",
   "subject-creative-arts": "subject-icons/creative-arts.svg",
   "subject-design-technology": "subject-icons/design-technology.svg",
@@ -65,28 +71,40 @@ export const icons = {
   "subject-english-grammar": "subject-icons/english-grammar.svg",
   "subject-english-reading-for-pleasure": "subject-icons/literature.svg",
   "subject-english-spelling": "subject-icons/english-spelling.svg",
+  "subject-expressive-arts-and-design": "subject-icons/creative-arts.svg",
   "subject-french": "subject-icons/french.svg",
   "subject-geography": "subject-icons/geography.svg",
   "subject-german": "subject-icons/german.svg",
   "subject-history": "subject-icons/history.svg",
   "subject-independent-living": "subject-icons/independent-living.svg",
   "subject-latin": "subject-icons/latin.svg",
+  "subject-literacy": "subject-icons/english.svg",
   "subject-maths": "subject-icons/maths.svg",
   "subject-music": "subject-icons/music-hollow.svg",
   "subject-numeracy": "subject-icons/numeracy.svg",
   "occupational-therapy": "subject-icons/therapy.svg",
+  "subject-personal-social-and-emotional-development":
+    "subject-icons/rshe-pshe.svg",
   "subject-physical-development": "subject-icons/physical-development.svg",
   "subject-physical-education": "subject-icons/physical-education.svg",
+  "subject-core-physical-education": "subject-icons/physical-education.svg",
+  "subject-gcse-physical-education": "subject-icons/physical-education.svg",
   "subject-physical-therapy": "subject-icons/physical-therapy.svg",
   "subject-physics": "subject-icons/physics.svg",
   "subject-religious-education": "subject-icons/religious-education.svg",
+  "subject-core-religious-education": "subject-icons/religious-education.svg",
+  "subject-gcse-religious-education": "subject-icons/religious-education.svg",
   "subject-rshe-pshe": "subject-icons/rshe-pshe.svg",
+  "subject-rshe": "subject-icons/rshe-pshe.svg",
   "subject-science": "subject-icons/science.svg",
   "subject-sensory-integration": "subject-icons/sensory-integration.svg",
   "subject-spanish": "subject-icons/spanish.svg",
   "subject-speech-and-language-therapy":
     "subject-icons/speech-and-language.svg",
+  "subject-specialist": "subject-icons/communication-and-language.svg",
   "subject-therapy": "subject-icons/therapy.svg",
+  "subject-therapies": "subject-icons/therapy.svg",
+  "subject-occupational-therapy": "subject-icons/therapy.svg",
   "subject-understanding-the-world":
     "subject-icons/understanding-the-world.svg",
 } as const;