diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
index 378dcbbf4..677304eba 100644
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -45,7 +45,7 @@
     "@oakai/exports": "*",
     "@oakai/logger": "*",
     "@oakai/prettier-config": "*",
-    "@oaknational/oak-components": "^1.44.0",
+    "@oaknational/oak-components": "^1.51.0",
     "@oaknational/oak-consent-client": "^2.1.0",
     "@portabletext/react": "^3.1.0",
     "@prisma/client": "5.16.1",
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
index bdcf5d158..7b0203479 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
@@ -3,22 +3,25 @@
 import * as React from "react";
 import { useEffect } from "react";
 
-import { OakIcon, OakModal, OakModalFooter } from "@oaknational/oak-components";
+import {
+  OakBox,
+  OakIcon,
+  OakLink,
+  OakModal,
+  OakModalFooter,
+  OakSpan,
+} from "@oaknational/oak-components";
 import { usePathname } from "next/navigation";
 
 import { SidebarList } from "@/components/AppComponents/Chat/sidebar-list";
 
+import { useDialog } from "../DialogContext";
 import { ClearHistory } from "./clear-history";
 import ChatButton from "./ui/chat-button";
 
-export function ChatHistory({
-  openSidebar,
-  setOpenSidebar,
-}: {
-  openSidebar: boolean;
-  setOpenSidebar: (value: boolean) => void;
-}) {
+export function ChatHistory() {
   const ailaId = usePathname().split("aila/")[1];
+  const { openSidebar, setOpenSidebar } = useDialog();
   useEffect(() => {
     if (openSidebar) {
       const style = document.createElement("style");
@@ -34,8 +37,11 @@ export function ChatHistory({
       };
     }
   }, [openSidebar]);
+
   return (
     <OakModal
+      data-testid="sidebar"
+      isLeftHandSide={false}
       zIndex={0}
       isOpen={openSidebar}
       onClose={() => setOpenSidebar(false)}
@@ -45,39 +51,55 @@ export function ChatHistory({
         </OakModalFooter>
       }
     >
-      <div className="flex h-full flex-col">
-        <div className="my-10 flex flex-col px-7">
-          <ChatButton href="/aila" variant="text-link" onClick={() => {}}>
-            <span className="rotate-45">
-              <OakIcon
-                iconName="cross"
-                $width="all-spacing-6"
-                $height="all-spacing-6"
-              />
-            </span>
-            <span>Create new lesson</span>
-          </ChatButton>
+      <>
+        <OakBox
+          $position="absolute"
+          $top="all-spacing-6"
+          $right="all-spacing-3"
+          $borderRadius="border-radius-circle"
+          $height="space-between-xxl"
+        >
+          <OakLink element="button" onClick={() => setOpenSidebar(false)}>
+            <OakSpan $opacity="transparent" $font="body-3">
+              Close
+            </OakSpan>
+          </OakLink>
+        </OakBox>
+
+        <div className="flex h-full flex-col">
+          <div className="my-10 flex flex-col px-7">
+            <ChatButton href="/aila" variant="text-link" onClick={() => {}}>
+              <span className="rotate-45">
+                <OakIcon
+                  iconName="cross"
+                  $width="all-spacing-6"
+                  $height="all-spacing-6"
+                />
+              </span>
+              <span>Create new lesson</span>
+            </ChatButton>
 
-          <ChatButton href="/" variant="text-link">
-            <span className="scale-90">
-              <OakIcon iconName="home" />
-            </span>
-            AI experiments page
-          </ChatButton>
-          <ChatButton
-            href={ailaId ? `/aila/help/?ailaId=${ailaId}` : "/aila/help"}
-            variant="text-link"
-          >
-            <span className="scale-90">
-              <OakIcon iconName="question-mark" />
-            </span>
-            Help
-          </ChatButton>
+            <ChatButton href="/" variant="text-link">
+              <span className="scale-90">
+                <OakIcon iconName="home" />
+              </span>
+              AI experiments page
+            </ChatButton>
+            <ChatButton
+              href={ailaId ? `/aila/help/?ailaId=${ailaId}` : "/aila/help"}
+              variant="text-link"
+            >
+              <span className="scale-90">
+                <OakIcon iconName="question-mark" />
+              </span>
+              Help
+            </ChatButton>
+          </div>
+          <React.Suspense>
+            <SidebarList />
+          </React.Suspense>
         </div>
-        <React.Suspense>
-          <SidebarList />
-        </React.Suspense>
-      </div>
+      </>
     </OakModal>
   );
 }
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx
index 2ee600b2c..beca62fdc 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx
@@ -20,9 +20,6 @@ export function SidebarList() {
           {chats?.length ? <SidebarItems chats={chats} /> : null}
         </div>
       </div>
-      <div className="relative flex w-full items-center justify-start p-10">
-        <ClearHistory isEnabled={chats ? chats?.length > 0 : false} />
-      </div>
     </div>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e64b2e226..47bdb3ebd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,8 +132,8 @@ importers:
         specifier: '*'
         version: link:../../packages/prettier-config
       '@oaknational/oak-components':
-        specifier: ^1.44.0
-        version: 1.47.0(next-cloudinary@5.20.0)(next@14.2.18)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11)
+        specifier: ^1.51.0
+        version: 1.51.0(next-cloudinary@5.20.0)(next@14.2.18)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11)
       '@oaknational/oak-consent-client':
         specifier: ^2.1.0
         version: 2.1.1(react-dom@18.2.0)(react@18.2.0)(zod@3.23.8)
@@ -5776,8 +5776,8 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  /@oaknational/oak-components@1.47.0(next-cloudinary@5.20.0)(next@14.2.18)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11):
-    resolution: {integrity: sha512-jT7dCrFBq7bGUKShhon1Q7L1w9nFaDm2L2qFPEquz6UodAyEk1d9gqu+GXbS6ICrnnhsnhe1l0h22S8x2BjzPQ==}
+  /@oaknational/oak-components@1.51.0(next-cloudinary@5.20.0)(next@14.2.18)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11):
+    resolution: {integrity: sha512-447ikR3goofAR/sS5oTVQ1UPoyyODOGidNnSCZyVG7O1HvyJeAKII1zaP9GmUgQ0JKonGisfYAgcxRbTvx/PmQ==}
     peerDependencies:
       next: ^14.2.12
       next-cloudinary: ^5.20.0