diff --git a/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx b/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx
index 89ce3afe..993ebca8 100644
--- a/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx
+++ b/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx
@@ -29,7 +29,14 @@ export type BaseCheckBoxProps = {
   id: string;
   disabled?: boolean;
   value: string;
+  /**
+   * Uncontrolled checked state
+   */
   defaultChecked?: boolean;
+  /**
+   * Controlled checked state
+   */
+  checked?: boolean;
   onHovered?: (value: string, id: string, duration: number) => void;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
diff --git a/src/components/molecules/OakAccordion/OakAccordion.stories.tsx b/src/components/molecules/OakAccordion/OakAccordion.stories.tsx
new file mode 100644
index 00000000..44b84e79
--- /dev/null
+++ b/src/components/molecules/OakAccordion/OakAccordion.stories.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { OakCheckBox } from "../OakCheckBox";
+
+import { OakAccordion } from "./OakAccordion";
+
+const meta: Meta<typeof OakAccordion> = {
+  component: OakAccordion,
+  tags: ["autodocs"],
+  title: "components/molecules/OakAccordion",
+  parameters: {
+    controls: {
+      include: ["header", "headerAfterSlot", "children"],
+    },
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+    headerAfterSlot: {
+      control: {
+        type: "text",
+      },
+    },
+    header: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+  args: {
+    id: "accordion-1",
+    header: "Embedded content",
+    children:
+      "Any cookies required for video or other embedded learning content to work",
+  },
+  render: (args) => <OakAccordion {...args} />,
+};
+export default meta;
+
+type Story = StoryObj<typeof OakAccordion>;
+
+export const Default: Story = {};
+
+export const WithHeaderAfterSlot: Story = {
+  args: {
+    headerAfterSlot: (
+      <OakCheckBox id="check-me" value="check-me" displayValue="" />
+    ),
+  },
+};
+
+export const MultipleAccordions: Story = {
+  parameters: {
+    controls: {
+      include: [],
+    },
+  },
+  render: () => {
+    return (
+      <>
+        <OakAccordion
+          id="necessary-accordion"
+          header="Strictly necessary"
+          headerAfterSlot={
+            <OakCheckBox
+              id="necessary"
+              value="necessary"
+              displayValue=""
+              checked
+              disabled
+            />
+          }
+        >
+          Necessary for the website to function
+        </OakAccordion>
+        <OakAccordion
+          id="embedded-accordion"
+          header="Embedded content"
+          headerAfterSlot={
+            <OakCheckBox
+              id="embedded"
+              value="embedded"
+              displayValue=""
+              checked={false}
+            />
+          }
+        >
+          Any cookies required for video or other embedded learning content to
+          work
+        </OakAccordion>
+        <OakAccordion
+          id="statistics-accordion"
+          header="Statistics"
+          headerAfterSlot={
+            <OakCheckBox
+              id="statistics"
+              value="statistics"
+              displayValue=""
+              checked
+            />
+          }
+        >
+          Any cookies that may be used to track website usage
+        </OakAccordion>
+      </>
+    );
+  },
+};
diff --git a/src/components/molecules/OakAccordion/OakAccordion.test.tsx b/src/components/molecules/OakAccordion/OakAccordion.test.tsx
new file mode 100644
index 00000000..7ef85421
--- /dev/null
+++ b/src/components/molecules/OakAccordion/OakAccordion.test.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { create } from "react-test-renderer";
+import { act, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { OakAccordion } from "./OakAccordion";
+
+import { OakThemeProvider } from "@/components/atoms";
+import { oakDefaultTheme } from "@/styles";
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+
+describe(OakAccordion, () => {
+  it("matches snapshot", () => {
+    const tree = create(
+      <OakThemeProvider theme={oakDefaultTheme}>
+        <OakAccordion
+          initialOpen
+          header="See more"
+          headerAfterSlot="After"
+          id="see-more"
+        >
+          Here it is
+        </OakAccordion>
+      </OakThemeProvider>,
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("toggles open and closed", () => {
+    const { queryByRole, queryByText, getByText } = renderWithTheme(
+      <OakAccordion header="See more" id="see-more">
+        Here it is
+      </OakAccordion>,
+    );
+
+    expect(queryByRole("region")).not.toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(getByText("See more"));
+    });
+
+    expect(queryByRole("region")).toBeVisible();
+    expect(queryByText("Here it is")).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(getByText("See more"));
+    });
+
+    expect(queryByRole("region")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/OakAccordion/OakAccordion.tsx b/src/components/molecules/OakAccordion/OakAccordion.tsx
new file mode 100644
index 00000000..044bdf3f
--- /dev/null
+++ b/src/components/molecules/OakAccordion/OakAccordion.tsx
@@ -0,0 +1,106 @@
+import React, { ReactNode, useState } from "react";
+import styled from "styled-components";
+
+import { OakBox, OakFlex, OakIcon } from "@/components/atoms";
+import { parseSpacing } from "@/styles/helpers/parseSpacing";
+import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
+
+export type OakAccordionProps = {
+  /**
+   * The header of the accordion
+   */
+  header: ReactNode;
+  /**
+   * Slot to place content after the header and outside the button
+   */
+  headerAfterSlot?: ReactNode;
+  /**
+   * Whether the accordion should be open initially
+   */
+  initialOpen?: boolean;
+  /**
+   * The content of the accordion
+   */
+  children: ReactNode;
+  /**
+   * The id of the accordion
+   */
+  id: string;
+};
+
+const StyledOakFlex = styled(OakFlex)`
+  font: inherit;
+  border: none;
+  background: none;
+  appearance: none;
+  margin: -${parseSpacing("inner-padding-m")};
+
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
+      ${parseDropShadow("drop-shadow-centered-grey")};
+  }
+`;
+
+/**
+ * An accordion component that can be used to show/hide content
+ */
+export const OakAccordion = ({
+  header,
+  headerAfterSlot,
+  children,
+  initialOpen = false,
+  id,
+}: OakAccordionProps) => {
+  const [isOpen, setOpen] = useState(initialOpen);
+
+  return (
+    <OakBox
+      $borderColor="border-neutral-lighter"
+      $ba="border-solid-s"
+      $pa="inner-padding-m"
+      $background={isOpen ? "bg-neutral" : "bg-primary"}
+    >
+      <OakFlex
+        as="h3"
+        $font="heading-light-7"
+        $textDecoration={isOpen ? "underline" : "none"}
+      >
+        <StyledOakFlex
+          as="button"
+          onClick={() => setOpen(!isOpen)}
+          $alignItems="center"
+          $pa="inner-padding-m"
+          $flexGrow={1}
+          aria-expanded={isOpen}
+          id={id}
+        >
+          <OakIcon
+            iconName="chevron-down"
+            $mr="space-between-s"
+            $width="all-spacing-6"
+            $height="all-spacing-6"
+            alt=""
+            style={{ transform: isOpen ? "rotate(180deg)" : "none" }}
+          />
+          {header}
+        </StyledOakFlex>
+        {headerAfterSlot && (
+          <OakFlex $ml="space-between-m">{headerAfterSlot}</OakFlex>
+        )}
+      </OakFlex>
+      <OakBox
+        $ml="space-between-m"
+        $pl="inner-padding-m"
+        $mt="space-between-sssx"
+        $font="body-3"
+        hidden={!isOpen}
+        aria-labelledby={id}
+        role="region"
+      >
+        {children}
+      </OakBox>
+    </OakBox>
+  );
+};
diff --git a/src/components/molecules/OakAccordion/__snapshots__/OakAccordion.test.tsx.snap b/src/components/molecules/OakAccordion/__snapshots__/OakAccordion.test.tsx.snap
new file mode 100644
index 00000000..6f0065a4
--- /dev/null
+++ b/src/components/molecules/OakAccordion/__snapshots__/OakAccordion.test.tsx.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakAccordion matches snapshot 1`] = `
+.c0 {
+  padding: 1rem;
+  background: #f2f2f2;
+  border: 0.063rem solid;
+  border-color: #cacaca;
+  font-family: Lexend,sans-serif;
+}
+
+.c1 {
+  font-family: Lexend,sans-serif;
+  font-weight: 400;
+  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;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c3 {
+  padding: 1rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c3:hover {
+  cursor: pointer;
+}
+
+.c6 {
+  position: relative;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  min-height: 1.5rem;
+  margin-right: 1rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c8 {
+  margin-left: 1.5rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c9 {
+  padding-left: 1rem;
+  margin-left: 1.5rem;
+  margin-top: 0.25rem;
+  font-family: Lexend,sans-serif;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: -0.005rem;
+  -moz-letter-spacing: -0.005rem;
+  -ms-letter-spacing: -0.005rem;
+  letter-spacing: -0.005rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c4 {
+  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;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c7 {
+  object-fit: contain;
+}
+
+.c5 {
+  font: inherit;
+  border: none;
+  background: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: -1rem;
+  outline: none;
+}
+
+.c5:focus-visible {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
+<div
+  className="c0"
+>
+  <h3
+    className="c1 c2"
+  >
+    <button
+      aria-expanded={true}
+      className="c3 c4 c5"
+      id="see-more"
+      onClick={[Function]}
+    >
+      <div
+        className="c6"
+        style={
+          {
+            "transform": "rotate(180deg)",
+          }
+        }
+      >
+        <img
+          alt=""
+          className="c7"
+          data-nimg="fill"
+          decoding="async"
+          loading="lazy"
+          onError={[Function]}
+          onLoad={[Function]}
+          src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+          style={
+            {
+              "bottom": 0,
+              "color": "transparent",
+              "height": "100%",
+              "left": 0,
+              "objectFit": undefined,
+              "objectPosition": undefined,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": "100%",
+            }
+          }
+        />
+      </div>
+      See more
+    </button>
+    <div
+      className="c8 c2"
+    >
+      After
+    </div>
+  </h3>
+  <div
+    aria-labelledby="see-more"
+    className="c9"
+    hidden={false}
+    role="region"
+  >
+    Here it is
+  </div>
+</div>
+`;
diff --git a/src/components/molecules/OakAccordion/index.ts b/src/components/molecules/OakAccordion/index.ts
new file mode 100644
index 00000000..9a270de6
--- /dev/null
+++ b/src/components/molecules/OakAccordion/index.ts
@@ -0,0 +1 @@
+export * from "./OakAccordion";
diff --git a/src/components/molecules/OakCheckBox/OakCheckBox.tsx b/src/components/molecules/OakCheckBox/OakCheckBox.tsx
index 23d7d227..b7624088 100644
--- a/src/components/molecules/OakCheckBox/OakCheckBox.tsx
+++ b/src/components/molecules/OakCheckBox/OakCheckBox.tsx
@@ -60,7 +60,8 @@ export const OakCheckBox = (props: OakCheckBoxProps) => {
     value,
     displayValue = value,
     disabled = false,
-    defaultChecked = false,
+    defaultChecked,
+    checked,
     onChange,
     onFocus,
     onBlur,
@@ -121,6 +122,7 @@ export const OakCheckBox = (props: OakCheckBoxProps) => {
             onFocus={onFocus}
             onBlur={onBlur}
             defaultChecked={defaultChecked}
+            checked={checked}
             disabled={disabled}
           />
         }
diff --git a/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap b/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap
index 5b0bc8d6..49493c81 100644
--- a/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap
+++ b/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap
@@ -118,7 +118,6 @@ input:checked + .c7 {
   >
     <input
       className="c3 c4 c5 c6"
-      defaultChecked={false}
       disabled={false}
       id="checkbox-1"
       name="checkbox-1"
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index eb90da56..5a216d15 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -22,3 +22,4 @@ export * from "./OakDragAndDropInstructions";
 export * from "./OakDraggable";
 export * from "./OakDroppable";
 export * from "./OakDraggableFeedback";
+export * from "./OakAccordion";
diff --git a/src/styles/theme/color.ts b/src/styles/theme/color.ts
index 259f6941..d457b850 100644
--- a/src/styles/theme/color.ts
+++ b/src/styles/theme/color.ts
@@ -124,6 +124,7 @@ export const oakUiRoleTokens = [
   "border-primary",
   "border-inverted",
   "border-neutral",
+  "border-neutral-lighter",
   "border-brand",
   "border-success",
   "border-error",
diff --git a/src/styles/theme/default.theme.ts b/src/styles/theme/default.theme.ts
index 5a205617..ece1e0b2 100644
--- a/src/styles/theme/default.theme.ts
+++ b/src/styles/theme/default.theme.ts
@@ -52,6 +52,7 @@ export const oakDefaultTheme: OakTheme = {
     "border-primary": "black",
     "border-inverted": "white",
     "border-neutral": "grey50",
+    "border-neutral-lighter": "grey40",
     "border-brand": "oakGreen",
     "border-success": "oakGreen",
     "border-error": "red",