diff --git a/.storybook/__snapshots__/storybook_snapshot.test.js.snap b/.storybook/__snapshots__/storybook_snapshot.test.js.snap
index a61e9179c0..a4dafddd99 100644
--- a/.storybook/__snapshots__/storybook_snapshot.test.js.snap
+++ b/.storybook/__snapshots__/storybook_snapshot.test.js.snap
@@ -37,7 +37,7 @@ Array [
             className="li"
           >
             <span
-              className="outer-wrapper"
+              className="outerWrapper"
               style={
                 Object {
                   "height": "20px",
@@ -46,7 +46,7 @@ Array [
               }
             >
               <span
-                className="inner-wrapper"
+                className="innerWrapper"
                 style={
                   Object {
                     "height": "20px",
@@ -83,7 +83,7 @@ Array [
             className="li"
           >
             <span
-              className="outer-wrapper"
+              className="outerWrapper"
               style={
                 Object {
                   "height": "20px",
@@ -92,7 +92,7 @@ Array [
               }
             >
               <span
-                className="inner-wrapper"
+                className="innerWrapper"
                 style={
                   Object {
                     "height": "20px",
@@ -129,7 +129,7 @@ Array [
             className="li"
           >
             <span
-              className="outer-wrapper"
+              className="outerWrapper"
               style={
                 Object {
                   "height": "20px",
@@ -138,7 +138,7 @@ Array [
               }
             >
               <span
-                className="inner-wrapper"
+                className="innerWrapper"
                 style={
                   Object {
                     "height": "20px",
@@ -186,18 +186,23 @@ Array [
       <h1>
         Buttons
       </h1>
-      <button
-        className="button background--teachers-primary variant--rounded"
+      <a
+        aria-label="Button rounded"
+        background="teachers-primary"
+        className="button primary small leadingIcon"
         href="/"
         onClick={[Function]}
+        onKeyDown={[Function]}
         onMouseEnter={[Function]}
+        role="button"
+        title="Button rounded"
       >
         <span
-          className="button-label"
+          className="labelSpan"
         >
           Button rounded
         </span>
-      </button>
+      </a>
     </div>
   </div>,
   ";",
@@ -211,22 +216,22 @@ Array [
       <h1>
         Buttons
       </h1>
-      <button
-        className="button background--pupils-secondary variant--rounded"
+      <a
+        aria-label="Button"
+        background="teachers-primary"
+        className="button secondary small leadingIcon"
         href="/"
         onClick={[Function]}
+        onKeyDown={[Function]}
         onMouseEnter={[Function]}
+        role="button"
+        title="Button"
       >
         <span
-          className="button-label"
-        >
-          Button
-        </span>
-        <span
-          className="button-icon-wrapper"
+          className="iconWrapper"
         >
           <span
-            className="outer-wrapper"
+            className="outerWrapper"
             style={
               Object {
                 "height": "16px",
@@ -235,7 +240,7 @@ Array [
             }
           >
             <span
-              className="inner-wrapper"
+              className="innerWrapper"
               style={
                 Object {
                   "height": "16px",
@@ -270,7 +275,12 @@ Array [
             </span>
           </span>
         </span>
-      </button>
+        <span
+          className="labelSpan"
+        >
+          Button
+        </span>
+      </a>
     </div>
   </div>,
   ";",
@@ -302,7 +312,7 @@ Array [
       Icon Example
     </h1>
     <span
-      className="outer-wrapper"
+      className="outerWrapper"
       style={
         Object {
           "height": "100px",
@@ -311,7 +321,7 @@ Array [
       }
     >
       <span
-        className="inner-wrapper"
+        className="innerWrapper"
         style={
           Object {
             "height": "100px",
@@ -340,7 +350,7 @@ Array [
       Available Icons
     </h2>
     <span
-      className="outer-wrapper"
+      className="outerWrapper"
       style={
         Object {
           "height": "24px",
@@ -349,7 +359,7 @@ Array [
       }
     >
       <span
-        className="inner-wrapper"
+        className="innerWrapper"
         style={
           Object {
             "height": "24px",
@@ -375,7 +385,7 @@ Array [
       </span>
     </span>
     <span
-      className="outer-wrapper"
+      className="outerWrapper"
       style={
         Object {
           "height": "24px",
@@ -384,7 +394,7 @@ Array [
       }
     >
       <span
-        className="inner-wrapper"
+        className="innerWrapper"
         style={
           Object {
             "height": "24px",
@@ -419,7 +429,7 @@ Array [
       </span>
     </span>
     <span
-      className="outer-wrapper"
+      className="outerWrapper"
       style={
         Object {
           "height": "24px",
@@ -428,7 +438,7 @@ Array [
       }
     >
       <span
-        className="inner-wrapper"
+        className="innerWrapper"
         style={
           Object {
             "height": "24px",
@@ -463,7 +473,7 @@ Array [
       </span>
     </span>
     <span
-      className="outer-wrapper"
+      className="outerWrapper"
       style={
         Object {
           "height": "24px",
@@ -472,7 +482,7 @@ Array [
       }
     >
       <span
-        className="inner-wrapper"
+        className="innerWrapper"
         style={
           Object {
             "height": "24px",
@@ -522,7 +532,7 @@ Array [
       </span>
     </span>
     <span
-      className="outer-wrapper"
+      className="outerWrapper"
       style={
         Object {
           "height": "24px",
@@ -531,7 +541,7 @@ Array [
       }
     >
       <span
-        className="inner-wrapper"
+        className="innerWrapper"
         style={
           Object {
             "height": "24px",
@@ -541,9 +551,7 @@ Array [
       >
         <svg
           fill="currentColor"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
+          viewBox="2 2 20 20"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/package.json b/package.json
index 4f0a68eb8b..f0e748e6e4 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "test": "jest --watch --collectCoverage=false",
     "test:ci": "jest",
     "test:storybook": "jest --config=jest.storybook.config.js",
+    "test:storybook:update": "npm run test:storybook -- -u",
     "test:storybook:ci": "start-server-and-test storybook:static-serve http://localhost:6006 test:storybook"
   },
   "dependencies": {
diff --git a/src/__tests__/__helpers__/MockedAuthProvider.tsx b/src/__tests__/__helpers__/MockedAuthProvider.tsx
index d86493b2f6..c0abe56222 100644
--- a/src/__tests__/__helpers__/MockedAuthProvider.tsx
+++ b/src/__tests__/__helpers__/MockedAuthProvider.tsx
@@ -14,6 +14,14 @@ export const defaultMockedAuthProviderValue = {
 export type MockedAuthProviderProps = {
   value?: Partial<OakAuth>;
 };
+export const loggedInAuthProviderProps: MockedAuthProviderProps = {
+  value: {
+    user: {
+      id: "4395834",
+      email: "2593485932@324359483u534.com",
+    },
+  },
+};
 const MockedAuthProvider: FC<MockedAuthProviderProps> = ({
   children,
   value,
diff --git a/src/__tests__/pages/__snapshots__/[lessonSlug].snapshot.test.tsx.snap b/src/__tests__/pages/__snapshots__/[lessonSlug].snapshot.test.tsx.snap
index b18996f7a6..4553a6d1b2 100644
--- a/src/__tests__/pages/__snapshots__/[lessonSlug].snapshot.test.tsx.snap
+++ b/src/__tests__/pages/__snapshots__/[lessonSlug].snapshot.test.tsx.snap
@@ -123,11 +123,11 @@ exports[`renders homepage unchanged 1`] = `
           class="li"
         >
           <span
-            class="outer-wrapper"
+            class="outerWrapper"
             style="height: 20px; width: 20px;"
           >
             <span
-              class="inner-wrapper"
+              class="innerWrapper"
               style="height: 20px; width: 20px;"
             >
               <svg
@@ -157,11 +157,11 @@ exports[`renders homepage unchanged 1`] = `
           class="li"
         >
           <span
-            class="outer-wrapper"
+            class="outerWrapper"
             style="height: 20px; width: 20px;"
           >
             <span
-              class="inner-wrapper"
+              class="innerWrapper"
               style="height: 20px; width: 20px;"
             >
               <svg
@@ -191,11 +191,11 @@ exports[`renders homepage unchanged 1`] = `
           class="li"
         >
           <span
-            class="outer-wrapper"
+            class="outerWrapper"
             style="height: 20px; width: 20px;"
           >
             <span
-              class="inner-wrapper"
+              class="innerWrapper"
               style="height: 20px; width: 20px;"
             >
               <svg
@@ -223,295 +223,137 @@ exports[`renders homepage unchanged 1`] = `
         </li>
       </ol>
     </nav>
-    <div
-      class="primary-buttons"
+    <header
+      class="header"
     >
-      <button
-        class="button background--teachers-primary variant--rounded"
-        href="/"
+      <h1>
+        Test lesson
+      </h1>
+      <div
+        class="buttonGroup"
       >
-        <span
-          class="button-label"
-        >
-          Download
-        </span>
-        <span
-          class="button-icon-wrapper"
+        <a
+          aria-label="Download Lesson"
+          class="button primary small leadingIcon"
+          href="/"
+          role="button"
+          title="Download Lesson"
         >
           <span
-            class="outer-wrapper"
-            style="height: 16px; width: 16px;"
+            class="iconWrapper"
           >
             <span
-              class="inner-wrapper"
+              class="outerWrapper"
               style="height: 16px; width: 16px;"
             >
-              <svg
-                fill="none"
-                height="100%"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2.5"
-                viewBox="0 0 24 24"
-                width="100%"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="innerWrapper"
+                style="height: 16px; width: 16px;"
               >
-                <path
-                  d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-                />
-                <polyline
-                  points="7 10 12 15 17 10"
-                />
-                <line
-                  x1="12"
-                  x2="12"
-                  y1="15"
-                  y2="3"
-                />
-              </svg>
+                <svg
+                  fill="none"
+                  height="100%"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                  viewBox="0 0 24 24"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+                  />
+                  <polyline
+                    points="7 10 12 15 17 10"
+                  />
+                  <line
+                    x1="12"
+                    x2="12"
+                    y1="15"
+                    y2="3"
+                  />
+                </svg>
+              </span>
             </span>
           </span>
-        </span>
-      </button>
-      <button
-        class="button background--teachers-primary variant--rounded"
-        href="/"
-      >
-        <span
-          class="button-label"
-        >
-          Share Lesson
-        </span>
-        <span
-          class="button-icon-wrapper"
-        >
           <span
-            class="outer-wrapper"
-            style="height: 16px; width: 16px;"
+            class="labelSpan"
           >
-            <span
-              class="inner-wrapper"
-              style="height: 16px; width: 16px;"
-            >
-              <svg
-                fill="none"
-                height="100%"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2.5"
-                viewBox="0 0 24 24"
-                width="100%"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="18"
-                  cy="5"
-                  r="3"
-                />
-                <circle
-                  cx="6"
-                  cy="12"
-                  r="3"
-                />
-                <circle
-                  cx="18"
-                  cy="19"
-                  r="3"
-                />
-                <line
-                  x1="8.59"
-                  x2="15.42"
-                  y1="13.51"
-                  y2="17.49"
-                />
-                <line
-                  x1="15.41"
-                  x2="8.59"
-                  y1="6.51"
-                  y2="10.49"
-                />
-              </svg>
-            </span>
+            Download
           </span>
-        </span>
-      </button>
-    </div>
-    <h1
-      class="title"
-    >
-      <span
-        class="lesson-overview-text"
-      >
-        Lesson overview:
-      </span>
-      <br />
-      Test lesson
-    </h1>
-    <div
-      class="secondary-buttons"
-    >
-      <button
-        class="button background--undefined"
-        href="/"
-      >
-        <span
-          class="button-label"
-        >
-          Unit Quiz
-        </span>
-      </button>
-      <button
-        class="button background--undefined"
-        href="/"
-      >
-        <span
-          class="button-label"
-        >
-          View In Classroom
-        </span>
-        <span
-          class="button-icon-wrapper"
+        </a>
+        <a
+          aria-label="Share Lesson"
+          class="button primary small leadingIcon"
+          href="/"
+          role="button"
+          title="Share Lesson"
         >
           <span
-            class="outer-wrapper"
-            style="height: 16px; width: 16px;"
+            class="iconWrapper"
           >
             <span
-              class="inner-wrapper"
+              class="outerWrapper"
               style="height: 16px; width: 16px;"
             >
-              <svg
-                fill="none"
-                height="100%"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2.5"
-                viewBox="0 0 24 24"
-                width="100%"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="innerWrapper"
+                style="height: 16px; width: 16px;"
               >
-                <path
-                  d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
-                />
-                <polyline
-                  points="15 3 21 3 21 9"
-                />
-                <line
-                  x1="10"
-                  x2="21"
-                  y1="14"
-                  y2="3"
-                />
-              </svg>
-            </span>
-          </span>
-        </span>
-      </button>
-      <button
-        class="button background--undefined"
-        href="/"
-      >
-        <span
-          class="button-label"
-        >
-          Foundation Curriculum (PDF)
-        </span>
-        <span
-          class="button-icon-wrapper"
-        >
-          <span
-            class="outer-wrapper"
-            style="height: 16px; width: 16px;"
-          >
-            <span
-              class="inner-wrapper"
-              style="height: 16px; width: 16px;"
-            >
-              <svg
-                fill="none"
-                height="100%"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2.5"
-                viewBox="0 0 24 24"
-                width="100%"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-                />
-                <polyline
-                  points="7 10 12 15 17 10"
-                />
-                <line
-                  x1="12"
-                  x2="12"
-                  y1="15"
-                  y2="3"
-                />
-              </svg>
+                <svg
+                  fill="none"
+                  height="100%"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                  viewBox="0 0 24 24"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="18"
+                    cy="5"
+                    r="3"
+                  />
+                  <circle
+                    cx="6"
+                    cy="12"
+                    r="3"
+                  />
+                  <circle
+                    cx="18"
+                    cy="19"
+                    r="3"
+                  />
+                  <line
+                    x1="8.59"
+                    x2="15.42"
+                    y1="13.51"
+                    y2="17.49"
+                  />
+                  <line
+                    x1="15.41"
+                    x2="8.59"
+                    y1="6.51"
+                    y2="10.49"
+                  />
+                </svg>
+              </span>
             </span>
           </span>
-        </span>
-      </button>
-      <button
-        class="button background--undefined"
-        href="/"
-      >
-        <span
-          class="button-label"
-        >
-          Higher Curriculum (PDF)
-        </span>
-        <span
-          class="button-icon-wrapper"
-        >
           <span
-            class="outer-wrapper"
-            style="height: 16px; width: 16px;"
+            class="labelSpan"
           >
-            <span
-              class="inner-wrapper"
-              style="height: 16px; width: 16px;"
-            >
-              <svg
-                fill="none"
-                height="100%"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2.5"
-                viewBox="0 0 24 24"
-                width="100%"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-                />
-                <polyline
-                  points="7 10 12 15 17 10"
-                />
-                <line
-                  x1="12"
-                  x2="12"
-                  y1="15"
-                  y2="3"
-                />
-              </svg>
-            </span>
+            Share
           </span>
-        </span>
-      </button>
-    </div>
+        </a>
+      </div>
+    </header>
     <div
-      class="card-primary"
-    >
-      Lesson content
-    </div>
+      class="primary-buttons"
+    />
   </main>
   <footer
     class="footer"
diff --git a/src/components/BookmarkLessonButton/BookmarkLessonButton.test.tsx b/src/components/BookmarkLessonButton/BookmarkLessonButton.test.tsx
new file mode 100644
index 0000000000..686cb964ea
--- /dev/null
+++ b/src/components/BookmarkLessonButton/BookmarkLessonButton.test.tsx
@@ -0,0 +1,91 @@
+import { PropsWithChildren } from "react";
+import userEvent from "@testing-library/user-event";
+
+import renderWithProviders from "../../__tests__/__helpers__/renderWithProviders";
+import { loggedInAuthProviderProps } from "../../__tests__/__helpers__/MockedAuthProvider";
+
+import BookmarkLessonButton from ".";
+
+const lessonId = "123";
+const addBookmark = jest.fn();
+const removeBookmark = jest.fn();
+const isBookmarked = jest.fn();
+
+jest.mock("../../hooks/useBookmarks.tsx", () => ({
+  __esModule: true,
+  default: () => ({
+    bookmarks: [],
+    addBookmark,
+    removeBookmark,
+    isBookmarked,
+  }),
+  BookmarksProvider: ({ children }: PropsWithChildren<null>) => children,
+}));
+describe("components/BookmarkLessonButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.resetModules();
+  });
+  it("if not logged, in should return null", () => {
+    const { queryByRole } = renderWithProviders(
+      <BookmarkLessonButton lessonId={lessonId} />
+    );
+    const button = queryByRole("button");
+    expect(button).not.toBeInTheDocument();
+  });
+  it("if logged in, should be a button", () => {
+    const { queryByRole } = renderWithProviders(
+      <BookmarkLessonButton lessonId={lessonId} />,
+      {},
+      { authProviderProps: loggedInAuthProviderProps }
+    );
+    const button = queryByRole("button");
+    expect(button).toBeInTheDocument();
+  });
+  it("if not bookmarked, should call 'addBookmark()' when clicked", async () => {
+    isBookmarked.mockImplementation(() => false);
+    const { getByRole } = renderWithProviders(
+      <BookmarkLessonButton lessonId={lessonId} />,
+      {},
+      { authProviderProps: loggedInAuthProviderProps }
+    );
+    const user = userEvent.setup();
+    const button = getByRole("button");
+    await user.click(button);
+    expect(addBookmark).toHaveBeenCalledWith(lessonId);
+    expect(removeBookmark).not.toHaveBeenCalled();
+  });
+  it("if not bookmarked, should have a11y label 'Add bookmark'", async () => {
+    isBookmarked.mockImplementation(() => false);
+    const { getByRole } = renderWithProviders(
+      <BookmarkLessonButton lessonId={lessonId} />,
+      {},
+      { authProviderProps: loggedInAuthProviderProps }
+    );
+    const button = getByRole("button");
+    expect(button).toHaveAccessibleName("Add Bookmark");
+  });
+  it("if bookmarked, should call 'removeBookmark()' when clicked", async () => {
+    isBookmarked.mockImplementation(() => true);
+    const { getByRole } = renderWithProviders(
+      <BookmarkLessonButton lessonId={lessonId} />,
+      {},
+      { authProviderProps: loggedInAuthProviderProps }
+    );
+    const user = userEvent.setup();
+    const button = getByRole("button");
+    await user.click(button);
+    expect(removeBookmark).toHaveBeenCalledWith(lessonId);
+    expect(addBookmark).not.toHaveBeenCalled();
+  });
+  it("if bookmarked, should have a11y label 'Remove bookmark'", async () => {
+    isBookmarked.mockImplementation(() => true);
+    const { getByRole } = renderWithProviders(
+      <BookmarkLessonButton lessonId={lessonId} />,
+      {},
+      { authProviderProps: loggedInAuthProviderProps }
+    );
+    const button = getByRole("button");
+    expect(button).toHaveAccessibleName("Remove Bookmark");
+  });
+});
diff --git a/src/components/BookmarkLessonButton/BookmarkLessonButton.tsx b/src/components/BookmarkLessonButton/BookmarkLessonButton.tsx
index 5c3e2abd83..bccdd9ad0c 100644
--- a/src/components/BookmarkLessonButton/BookmarkLessonButton.tsx
+++ b/src/components/BookmarkLessonButton/BookmarkLessonButton.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from "react";
 
 import useAuth from "../../auth/useAuth";
 import useBookmarks, { LessonId } from "../../hooks/useBookmarks";
-import Button from "../Button";
+import IconButton from "../IconButton/IconButton";
 
 type BookmarkLessonButtonProps = {
   lessonId: LessonId;
@@ -39,11 +39,14 @@ const BookmarkLessonButton: FC<BookmarkLessonButtonProps> = (props) => {
   };
 
   return (
-    <Button
+    <IconButton
       onClick={toggleBookmark}
       icon="Star"
-      label={`${isBookmarked(lessonId) ? "Remove" : "Add"} Bookmark`}
+      aria-label={`${isBookmarked(lessonId) ? "Remove" : "Add"} Bookmark`}
       disabled={loading}
+      iconColorOverride={
+        isBookmarked(lessonId) ? "color-icon-bookmarked" : undefined
+      }
     />
   );
 };
diff --git a/src/components/Breadcrumbs/__snapshots__/Breadcrumb.snapshot.test.tsx.snap b/src/components/Breadcrumbs/__snapshots__/Breadcrumb.snapshot.test.tsx.snap
index f315826e1d..f83c488838 100644
--- a/src/components/Breadcrumbs/__snapshots__/Breadcrumb.snapshot.test.tsx.snap
+++ b/src/components/Breadcrumbs/__snapshots__/Breadcrumb.snapshot.test.tsx.snap
@@ -22,11 +22,11 @@ exports[`renders <Breadcrumb> unchanged 1`] = `
         class="li"
       >
         <span
-          class="outer-wrapper"
+          class="outerWrapper"
           style="height: 20px; width: 20px;"
         >
           <span
-            class="inner-wrapper"
+            class="innerWrapper"
             style="height: 20px; width: 20px;"
           >
             <svg
@@ -56,11 +56,11 @@ exports[`renders <Breadcrumb> unchanged 1`] = `
         class="li"
       >
         <span
-          class="outer-wrapper"
+          class="outerWrapper"
           style="height: 20px; width: 20px;"
         >
           <span
-            class="inner-wrapper"
+            class="innerWrapper"
             style="height: 20px; width: 20px;"
           >
             <svg
@@ -90,11 +90,11 @@ exports[`renders <Breadcrumb> unchanged 1`] = `
         class="li"
       >
         <span
-          class="outer-wrapper"
+          class="outerWrapper"
           style="height: 20px; width: 20px;"
         >
           <span
-            class="inner-wrapper"
+            class="innerWrapper"
             style="height: 20px; width: 20px;"
           >
             <svg
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index 11b97c2162..c520907660 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -1,3 +1,5 @@
+/* button core */
+
 .button {
   composes: button-unstyle from "../../styles/button-unstyle.module.css";
   position: relative;
@@ -5,7 +7,6 @@
   justify-content: center;
   align-items: center;
   font-weight: 600;
-  margin-bottom: 12px;
   max-width: 100%;
 }
 
@@ -14,28 +15,59 @@
   cursor: not-allowed;
 }
 
-.button:not(:last-of-type) {
-  margin-right: 12px;
+/* button size */
+
+.small {
+  height: 40px;
+  border-radius: 20px;
+  padding: 0 12px;
+}
+
+.large {
+  height: 48px;
+  border-radius: 24px;
+  padding: 0 16px;
 }
 
-.button-label {
+/* button label */
+
+.labelSpan {
   composes: ellipsis from "../../styles/ellipsis.module.css";
 }
 
-.button-icon-wrapper {
-  margin-left: 8px;
+/* button icon */
+
+.leadingIcon {
+  flex-direction: row;
+}
+
+.trailingIcon {
+  flex-direction: row-reverse;
+}
+
+.iconWrapper {
   display: inline-flex;
   align-items: center;
 }
 
-.variant--rounded {
-  border-radius: 24px;
-  height: 48px;
-  padding: 0 24px;
-  background: var(--color-primary);
-  color: var(--color-primary-contrast);
+.leadingIcon .iconWrapper {
+  margin-right: 8px;
+}
+
+.trailingIcon .iconWrapper {
+  margin-left: 8px;
+}
+
+/* button variant */
+
+.primary {
+  composes: bg-primary from "../../styles/colors.module.css";
+}
+
+.secondary {
+  composes: bg-secondary from "../../styles/colors.module.css";
 }
 
-.variant--text-link:focus {
-  text-decoration: underline;
+.tertiary {
+  composes: bg-tertiary from "../../styles/colors.module.css";
 }
diff --git a/src/components/Button/Button.snapshot.test.tsx b/src/components/Button/Button.snapshot.test.tsx
index 59b2f649b0..d8cfc4da53 100644
--- a/src/components/Button/Button.snapshot.test.tsx
+++ b/src/components/Button/Button.snapshot.test.tsx
@@ -4,12 +4,7 @@ import Button from "./Button";
 
 it("renders <Button> unchanged", () => {
   const { container } = render(
-    <Button
-      background="teachers-primary"
-      href="/"
-      label="Download"
-      icon="Download"
-    >
+    <Button href="/" label="Download" icon="Download">
       Download
     </Button>
   );
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index fa3313c594..5233bead25 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -36,13 +36,12 @@ ButtonExample.args = {
   label: "Button rounded",
   children: "Button rounded",
   icon: undefined,
-  variant: "rounded",
-  background: "teachers-primary",
+  variant: "primary",
   href: "/",
 };
 
 export const ButtonExampleWithIcon = Template.bind({});
 ButtonExampleWithIcon.args = {
-  background: "pupils-secondary",
+  variant: "secondary",
   icon: "Download",
 };
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 542cdb5150..402a8f9562 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,72 +1,62 @@
-import {
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  FC,
-  MouseEventHandler,
-} from "react";
-import Link from "next/link";
+import { FC } from "react";
 import clsx from "clsx";
 
 import Icon, { IconName } from "../Icon";
+import UnstyledButtonOrLink, {
+  UnstyledButtonOrLinkProps,
+} from "../UnstyledButtonOrLink";
 
 import styles from "./Button.module.css";
 
-type Color =
-  | "teachers-primary"
-  | "teachers-secondary"
-  | "pupils-primary"
-  | "pupils-secondary";
-
-type ButtonVariant = "rounded" | "text-link";
+export type ButtonVariant = "primary" | "secondary" | "tertiary";
+type IconPosition = "leading" | "trailing";
+export type ButtonSize = "small" | "large";
+export const buttonIconSizeMap: Record<ButtonSize, number> = {
+  small: 16,
+  large: 24,
+};
+export const DEFAULT_BUTTON_SIZE: ButtonSize = "small";
+export const DEFAULT_BUTTON_VARIANT: ButtonVariant = "primary";
 
-export type ButtonProps = DetailedHTMLProps<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
+export type ButtonProps = UnstyledButtonOrLinkProps & {
   variant?: ButtonVariant;
-  href?: string;
   label: string;
+  size?: ButtonSize;
   icon?: IconName;
-  background?: Color;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
+  iconPosition?: IconPosition;
 };
 const Button: FC<ButtonProps> = (props) => {
   const {
-    variant = "rounded",
-    onClick,
-    href,
+    variant = DEFAULT_BUTTON_VARIANT,
+    size = DEFAULT_BUTTON_SIZE,
     label,
     icon,
-    background,
-    ...buttonHtmlProps
+    iconPosition = "leading",
+    "aria-label": ariaLabel,
+    title,
+    ...buttonOrLinkProps
   } = props;
 
-  const buttonInner = (
-    <button
-      onClick={onClick}
-      className={clsx(styles.button, styles[`background--${background}`], {
-        [`${styles["variant--rounded"]}`]: variant === "rounded",
-      })}
-      {...buttonHtmlProps}
+  return (
+    <UnstyledButtonOrLink
+      {...buttonOrLinkProps}
+      title={title || ariaLabel || label}
+      aria-label={ariaLabel || label}
+      className={clsx(
+        styles.button,
+        styles[variant],
+        styles[size],
+        styles[`${iconPosition}Icon`]
+      )}
     >
-      <span className={styles["button-label"]}>{label}</span>
       {icon && (
-        <span className={styles["button-icon-wrapper"]}>
-          <Icon name={icon} size={16} />
+        <span className={styles.iconWrapper}>
+          <Icon name={icon} size={buttonIconSizeMap[size]} />
         </span>
       )}
-    </button>
+      <span className={styles.labelSpan}>{label}</span>
+    </UnstyledButtonOrLink>
   );
-
-  if (href) {
-    return (
-      <Link href={href} passHref>
-        {buttonInner}
-      </Link>
-    );
-  }
-
-  return buttonInner;
 };
 
 export default Button;
diff --git a/src/components/Button/__snapshots__/Button.snapshot.test.tsx.snap b/src/components/Button/__snapshots__/Button.snapshot.test.tsx.snap
index f4c5b02c36..f8a1c09b66 100644
--- a/src/components/Button/__snapshots__/Button.snapshot.test.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.snapshot.test.tsx.snap
@@ -2,24 +2,22 @@
 
 exports[`renders <Button> unchanged 1`] = `
 <div>
-  <button
-    class="button background--teachers-primary variant--rounded"
+  <a
+    aria-label="Download"
+    class="button primary small leadingIcon"
     href="/"
+    role="button"
+    title="Download"
   >
     <span
-      class="button-label"
-    >
-      Download
-    </span>
-    <span
-      class="button-icon-wrapper"
+      class="iconWrapper"
     >
       <span
-        class="outer-wrapper"
+        class="outerWrapper"
         style="height: 16px; width: 16px;"
       >
         <span
-          class="inner-wrapper"
+          class="innerWrapper"
           style="height: 16px; width: 16px;"
         >
           <svg
@@ -49,6 +47,11 @@ exports[`renders <Button> unchanged 1`] = `
         </span>
       </span>
     </span>
-  </button>
+    <span
+      class="labelSpan"
+    >
+      Download
+    </span>
+  </a>
 </div>
 `;
diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
new file mode 100644
index 0000000000..d3a0e44c93
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -0,0 +1,12 @@
+.buttonGroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.buttonGroup > * {
+  margin-bottom: 8px;
+}
+
+.buttonGroup > *:not(:last-child) {
+  margin-right: 12px;
+}
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
new file mode 100644
index 0000000000..0b96fc25d8
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+import styles from "./ButtonGroup.module.css";
+
+/**
+ * @todo run time check that all children are Button or IconButton components
+ */
+const ButtonGroup: FC = (props) => {
+  const { children } = props;
+
+  return <div className={styles.buttonGroup}>{children}</div>;
+};
+
+export default ButtonGroup;
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index fd13991e95..ef6c5918eb 100644
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -8,14 +8,17 @@
 
 .card-primary {
   composes: card;
-  background-color: var(--color-primary);
-  color: var(--color-primary-contrast);
+  composes: bg-primary from "../../styles/colors.module.css";
 }
 
 .card-secondary {
   composes: card;
-  background-color: var(--color-secondary);
-  color: var(--color-secondary-contrast);
+  composes: bg-secondary from "../../styles/colors.module.css";
+}
+
+.card-tertiary {
+  composes: card;
+  composes: bg-tertiary from "../../styles/colors.module.css";
 }
 
 @media mobile {
diff --git a/src/components/Icon/index.module.css b/src/components/Icon/Icon.module.css
similarity index 50%
rename from src/components/Icon/index.module.css
rename to src/components/Icon/Icon.module.css
index 75cfb2bb42..6204db123d 100644
--- a/src/components/Icon/index.module.css
+++ b/src/components/Icon/Icon.module.css
@@ -1,11 +1,16 @@
-.outer-wrapper {
+.outerWrapper {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.inner-wrapper {
+.innerWrapper {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+
+/* @todo perhaps these should be utility classes */
+.color-icon-bookmarked {
+  color: var(--color-icon-bookmarked);
+}
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 6d2c8d3989..ed16ebe637 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,6 +1,9 @@
 import { FC } from "react";
+import clsx from "clsx";
 
-import styles from "./index.module.css";
+import { IconColorOverride } from "../../styles/themes/types";
+
+import styles from "./Icon.module.css";
 import ChevronRight from "./ChevronRight.icon";
 import OpenExternal from "./OpenExternal.icon";
 import Download from "./Download.icon";
@@ -33,9 +36,15 @@ type IconProps = {
   height?: number;
   outerWidth?: number;
   outerHeight?: number;
+  /**
+   * by default, the color will take the css `color` value of its closest ancester
+   * (because in the SVG, the color is set to `currentColor`). Use `color` prop to
+   * override this value.
+   */
+  color?: IconColorOverride;
 };
 const Icon: FC<IconProps> = (props) => {
-  const { name, size = 24, width, height } = props;
+  const { name, size = 24, width, height, color } = props;
   const IconComponent = icons[name];
 
   const innerWidth = width || size;
@@ -46,11 +55,11 @@ const Icon: FC<IconProps> = (props) => {
 
   return (
     <span
-      className={styles["outer-wrapper"]}
+      className={styles.outerWrapper}
       style={{ height: `${outerHeight}px`, width: `${outerWidth}px` }}
     >
       <span
-        className={styles["inner-wrapper"]}
+        className={clsx(styles.innerWrapper, color && styles[color])}
         style={{ height: `${innerHeight}px`, width: `${innerWidth}px` }}
       >
         <IconComponent />
diff --git a/src/components/Icon/Star.icon.tsx b/src/components/Icon/Star.icon.tsx
index 3ca72e1636..a4914fa023 100644
--- a/src/components/Icon/Star.icon.tsx
+++ b/src/components/Icon/Star.icon.tsx
@@ -4,9 +4,7 @@ const Star: FC = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
+      viewBox="2 2 20 20"
       fill="currentColor"
     >
       <path d="M0 0h24v24H0z" fill="none" />
diff --git a/src/components/Icon/__snapshots__/Icon.snapshot.test.tsx.snap b/src/components/Icon/__snapshots__/Icon.snapshot.test.tsx.snap
index 789410041a..fd5c06a7f3 100644
--- a/src/components/Icon/__snapshots__/Icon.snapshot.test.tsx.snap
+++ b/src/components/Icon/__snapshots__/Icon.snapshot.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`'icons' component renders <Icon> ChevronRight unchanged 1`] = `
 <div>
   <span
-    class="outer-wrapper"
+    class="outerWrapper"
     style="height: 20px; width: 20px;"
   >
     <span
-      class="inner-wrapper"
+      class="innerWrapper"
       style="height: 20px; width: 20px;"
     >
       <svg
@@ -33,11 +33,11 @@ exports[`'icons' component renders <Icon> ChevronRight unchanged 1`] = `
 exports[`'icons' component renders <Icon> Download unchanged 1`] = `
 <div>
   <span
-    class="outer-wrapper"
+    class="outerWrapper"
     style="height: 20px; width: 20px;"
   >
     <span
-      class="inner-wrapper"
+      class="innerWrapper"
       style="height: 20px; width: 20px;"
     >
       <svg
@@ -72,11 +72,11 @@ exports[`'icons' component renders <Icon> Download unchanged 1`] = `
 exports[`'icons' component renders <Icon> OpenExternal unchanged 1`] = `
 <div>
   <span
-    class="outer-wrapper"
+    class="outerWrapper"
     style="height: 20px; width: 20px;"
   >
     <span
-      class="inner-wrapper"
+      class="innerWrapper"
       style="height: 20px; width: 20px;"
     >
       <svg
@@ -111,11 +111,11 @@ exports[`'icons' component renders <Icon> OpenExternal unchanged 1`] = `
 exports[`'icons' component renders <Icon> Share unchanged 1`] = `
 <div>
   <span
-    class="outer-wrapper"
+    class="outerWrapper"
     style="height: 20px; width: 20px;"
   >
     <span
-      class="inner-wrapper"
+      class="innerWrapper"
       style="height: 20px; width: 20px;"
     >
       <svg
@@ -165,18 +165,16 @@ exports[`'icons' component renders <Icon> Share unchanged 1`] = `
 exports[`'icons' component renders <Icon> Star unchanged 1`] = `
 <div>
   <span
-    class="outer-wrapper"
+    class="outerWrapper"
     style="height: 20px; width: 20px;"
   >
     <span
-      class="inner-wrapper"
+      class="innerWrapper"
       style="height: 20px; width: 20px;"
     >
       <svg
         fill="currentColor"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
+        viewBox="2 2 20 20"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
diff --git a/src/components/IconButton/IconButton.module.css b/src/components/IconButton/IconButton.module.css
new file mode 100644
index 0000000000..c07d6fe183
--- /dev/null
+++ b/src/components/IconButton/IconButton.module.css
@@ -0,0 +1,41 @@
+.iconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small {
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+  border-radius: 20px;
+}
+
+.large {
+  height: 48px;
+  width: 48px;
+  min-width: 48px;
+  border-radius: 24px;
+}
+
+/* button variant @todo export to dedupe with Button */
+
+.primary {
+  background-color: var(--color-button-primary);
+  color: var(--color-button-primary-contrast);
+}
+
+.secondary {
+  background-color: var(--color-button-secondary);
+  color: var(--color-button-secondary-contrast);
+}
+
+.tertiary {
+  background-color: var(--color-button-tertiary);
+  color: var(--color-button-tertiary-contrast);
+}
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
new file mode 100644
index 0000000000..4f603356bf
--- /dev/null
+++ b/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+import clsx from "clsx";
+
+import Icon, { IconName } from "../Icon";
+import {
+  buttonIconSizeMap,
+  ButtonSize,
+  ButtonVariant,
+  DEFAULT_BUTTON_SIZE,
+  DEFAULT_BUTTON_VARIANT,
+} from "../Button/Button";
+import UnstyledButtonOrLink, {
+  UnstyledButtonOrLinkProps,
+} from "../UnstyledButtonOrLink";
+import { IconColorOverride } from "../../styles/themes/types";
+
+import styles from "./IconButton.module.css";
+
+type IconButtonProps = UnstyledButtonOrLinkProps & {
+  variant?: ButtonVariant;
+  icon: IconName;
+  "aria-label": string;
+  size?: ButtonSize;
+  iconColorOverride?: IconColorOverride;
+};
+
+const IconButton: FC<IconButtonProps> = (props) => {
+  const {
+    variant = DEFAULT_BUTTON_VARIANT,
+    size = DEFAULT_BUTTON_SIZE,
+    icon,
+    title,
+    className,
+    iconColorOverride,
+    "aria-label": ariaLabel,
+    ...buttonOrLinkProps
+  } = props;
+
+  return (
+    <UnstyledButtonOrLink
+      {...buttonOrLinkProps}
+      title={title || ariaLabel}
+      aria-label={ariaLabel}
+      className={clsx(
+        className,
+        styles.iconButton,
+        styles[variant],
+        styles[size]
+      )}
+    >
+      <Icon
+        name={icon}
+        size={buttonIconSizeMap[size]}
+        color={iconColorOverride}
+      />
+    </UnstyledButtonOrLink>
+  );
+};
+
+export default IconButton;
diff --git a/src/components/LessonHeader/LessonHeader.module.css b/src/components/LessonHeader/LessonHeader.module.css
new file mode 100644
index 0000000000..2a81427ee6
--- /dev/null
+++ b/src/components/LessonHeader/LessonHeader.module.css
@@ -0,0 +1,11 @@
+.header {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 900px) {
+  .header {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
diff --git a/src/components/LessonHeader/LessonHeader.tsx b/src/components/LessonHeader/LessonHeader.tsx
new file mode 100644
index 0000000000..33f955ee60
--- /dev/null
+++ b/src/components/LessonHeader/LessonHeader.tsx
@@ -0,0 +1,34 @@
+import { FC } from "react";
+
+import { LessonId } from "../../hooks/useBookmarks";
+import BookmarkLessonButton from "../BookmarkLessonButton";
+import Button from "../Button";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
+
+import styles from "./LessonHeader.module.css";
+
+type LessonHeaderProps = {
+  id: LessonId;
+  title: string;
+  slug: string;
+};
+const LessonHeader: FC<LessonHeaderProps> = (props) => {
+  const { title, id } = props;
+  return (
+    <header className={styles.header}>
+      <h1>{title}</h1>
+      <ButtonGroup>
+        <Button
+          href="/"
+          label="Download"
+          aria-label="Download Lesson"
+          icon="Download"
+        />
+        <Button href="/" label="Share" aria-label="Share Lesson" icon="Share" />
+        <BookmarkLessonButton lessonId={id} />
+      </ButtonGroup>
+    </header>
+  );
+};
+
+export default LessonHeader;
diff --git a/src/components/SearchForm/SearchForm.module.css b/src/components/SearchForm/SearchForm.module.css
index f6cf5f4659..534d3e8647 100644
--- a/src/components/SearchForm/SearchForm.module.css
+++ b/src/components/SearchForm/SearchForm.module.css
@@ -1,3 +1,4 @@
 form.search {
   display: flex;
+  flex-wrap: wrap;
 }
diff --git a/src/components/SiteHeader/SiteHeader.module.css b/src/components/SiteHeader/SiteHeader.module.css
index b997f12ae2..21b9fcbe2a 100644
--- a/src/components/SiteHeader/SiteHeader.module.css
+++ b/src/components/SiteHeader/SiteHeader.module.css
@@ -1,7 +1,6 @@
 .header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   width: 100%;
   min-height: 72px;
   padding: 12px;
@@ -20,3 +19,10 @@
   composes: button-unstyle from "../../styles/button-unstyle.module.css";
   padding-right: 24px;
 }
+
+@media (min-width: 900px) {
+  .header {
+    flex-direction: row;
+    align-items: center;
+  }
+}
diff --git a/src/components/UnstyledButton/UnstyledButton.module.css b/src/components/UnstyledButton/UnstyledButton.module.css
new file mode 100644
index 0000000000..4407765cc4
--- /dev/null
+++ b/src/components/UnstyledButton/UnstyledButton.module.css
@@ -0,0 +1,9 @@
+.unstyledButton {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
diff --git a/src/components/UnstyledButton/UnstyledButton.tsx b/src/components/UnstyledButton/UnstyledButton.tsx
new file mode 100644
index 0000000000..b90c983605
--- /dev/null
+++ b/src/components/UnstyledButton/UnstyledButton.tsx
@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
+
+import styles from "./UnstyledButton.module.css";
+
+type UnstyledButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+const UnstyledButton: FC<UnstyledButtonProps> = (props) => {
+  const { className } = props;
+  return (
+    <button {...props} className={clsx(className, styles.unstyledButton)} />
+  );
+};
+
+export default UnstyledButton;
diff --git a/src/components/UnstyledButton/index.ts b/src/components/UnstyledButton/index.ts
new file mode 100644
index 0000000000..6522cdb07a
--- /dev/null
+++ b/src/components/UnstyledButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./UnstyledButton";
diff --git a/src/components/UnstyledButtonOrLink/UnstyledButtonOrLink.tsx b/src/components/UnstyledButtonOrLink/UnstyledButtonOrLink.tsx
new file mode 100644
index 0000000000..b5fd7f302b
--- /dev/null
+++ b/src/components/UnstyledButtonOrLink/UnstyledButtonOrLink.tsx
@@ -0,0 +1,71 @@
+import Link, { LinkProps } from "next/link";
+import {
+  DetailedHTMLProps,
+  ButtonHTMLAttributes,
+  FC,
+  AnchorHTMLAttributes,
+  KeyboardEvent,
+} from "react";
+
+import createErrorHandler from "../../common-lib/error-handler";
+import OakError from "../../errors/OakError";
+import UnstyledButton from "../UnstyledButton";
+
+const errorHandler = createErrorHandler("UnstyledButtonOrLink");
+
+export type UnstyledButtonOrLinkProps = { className?: string } & (
+  | (LinkProps &
+      DetailedHTMLProps<
+        AnchorHTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+      >)
+  | DetailedHTMLProps<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >
+);
+const UnstyledButtonOrLink: FC<UnstyledButtonOrLinkProps> = (props) => {
+  if ("href" in props) {
+    const {
+      href,
+      as,
+      replace,
+      scroll,
+      shallow,
+      passHref,
+      prefetch,
+      locale,
+      ...anchorProps
+    } = props;
+    const nextLinkProps: LinkProps = {
+      href,
+      as,
+      replace,
+      scroll,
+      shallow,
+      passHref,
+      prefetch,
+      locale,
+    };
+    const onKeyDown = (e: KeyboardEvent<HTMLAnchorElement>) => {
+      if (e.code === "Space" || e.keyCode === 32) {
+        e.preventDefault();
+        // trigger the target's click event
+        if (!(e.target instanceof HTMLElement)) {
+          const error = new OakError({ code: "misc/unexpected-type" });
+          return errorHandler(error);
+        }
+        e.target.click();
+      }
+    };
+    return (
+      <Link {...nextLinkProps} passHref>
+        <a {...anchorProps} role="button" onKeyDown={onKeyDown} />
+      </Link>
+    );
+  }
+
+  return <UnstyledButton {...props} />;
+};
+
+export default UnstyledButtonOrLink;
diff --git a/src/components/UnstyledButtonOrLink/index.ts b/src/components/UnstyledButtonOrLink/index.ts
new file mode 100644
index 0000000000..50c91027f2
--- /dev/null
+++ b/src/components/UnstyledButtonOrLink/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./UnstyledButtonOrLink";
+export type { UnstyledButtonOrLinkProps } from "./UnstyledButtonOrLink";
diff --git a/src/errors/OakError.ts b/src/errors/OakError.ts
index 15577feca8..cf7c43e770 100644
--- a/src/errors/OakError.ts
+++ b/src/errors/OakError.ts
@@ -6,6 +6,7 @@
 const ERROR_CODES = [
   "misc/unknown",
   "misc/network-error",
+  "misc/unexpected-type",
   "auth/send-sign-in-link",
   "auth/token-expired",
   "auth/token-error-unknown",
@@ -52,6 +53,11 @@ const errorConfigs: Record<ErrorCode, ErrorConfig> = {
     message: "Could not send sign in link to provided email",
     shouldNotify: true,
   },
+  "misc/unexpected-type": {
+    message:
+      "An unexpected type was encountered, so action may not have completed successfully",
+    shouldNotify: true,
+  },
 };
 
 const getErrorConfig = (code: ErrorCode) => errorConfigs[code];
diff --git a/src/hooks/useBookmarks.tsx b/src/hooks/useBookmarks.tsx
index efba858691..b921fc8190 100644
--- a/src/hooks/useBookmarks.tsx
+++ b/src/hooks/useBookmarks.tsx
@@ -71,8 +71,6 @@ export const BookmarksProvider: FC = ({ children }) => {
      *
      */
     if (data?.bookmarkedLessons) {
-      console.log("setting bms ls", data.bookmarkedLessons);
-
       setBookmarks(
         data.bookmarkedLessons
           .map(({ lesson }) => lesson)
diff --git a/src/hooks/useTheme.test.ts b/src/hooks/useTheme.test.ts
index 2ce403831f..b237a6c782 100644
--- a/src/hooks/useTheme.test.ts
+++ b/src/hooks/useTheme.test.ts
@@ -101,7 +101,7 @@ describe("useTheme()", () => {
 
       await waitFor(() => {
         expect(documentStyleSetPropertySpy).toHaveBeenNthCalledWith(
-          2,
+          9,
           "--color-primary",
           "darkpurple"
         );
diff --git a/src/pages/lessons/[lessonSlug].tsx b/src/pages/lessons/[lessonSlug].tsx
index f1dfbb9621..bb7923774c 100644
--- a/src/pages/lessons/[lessonSlug].tsx
+++ b/src/pages/lessons/[lessonSlug].tsx
@@ -5,11 +5,9 @@ import {
   NextPage,
 } from "next";
 
-import BookmarkLessonButton from "../../components/BookmarkLessonButton";
 import Breadcrumbs from "../../components/Breadcrumbs";
-import Button, { ButtonProps } from "../../components/Button";
-import Card from "../../components/Card";
 import Layout from "../../components/Layout/Layout";
+import LessonHeader from "../../components/LessonHeader/LessonHeader";
 import { LessonId } from "../../hooks/useBookmarks";
 import graphqlApi from "../../node-lib/graphql";
 
@@ -20,13 +18,6 @@ const Lesson: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
 ) => {
   const { lesson } = props;
 
-  const buttons: Omit<ButtonProps, "background">[] = [
-    { href: "/", label: "Unit Quiz" },
-    { href: "/", label: "View In Classroom", icon: "OpenExternal" },
-    { href: "/", label: "Foundation Curriculum (PDF)", icon: "Download" },
-    { href: "/", label: "Higher Curriculum (PDF)", icon: "Download" },
-  ];
-
   return (
     <Layout>
       <Breadcrumbs
@@ -37,38 +28,8 @@ const Lesson: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
           { href: "/", label: "[unit-name]" },
         ]}
       />
-      <div className={styles["primary-buttons"]}>
-        <BookmarkLessonButton lessonId={lesson.id} />
-        <Button
-          background="teachers-primary"
-          href="/"
-          label="Download"
-          icon="Download"
-        />
-        <Button
-          background="teachers-primary"
-          href="/"
-          label="Share Lesson"
-          icon="Share"
-        />
-      </div>
-      <h1 className={styles["title"]}>
-        <span className={styles["lesson-overview-text"]}>Lesson overview:</span>
-        <br />
-        {lesson.title}
-      </h1>
-      <div className={styles["secondary-buttons"]}>
-        {buttons.map((buttonProps) => {
-          return (
-            <Button
-              key={buttonProps.label}
-              variant="text-link"
-              {...buttonProps}
-            />
-          );
-        })}
-      </div>
-      <Card>Lesson content</Card>
+      <LessonHeader {...lesson} />
+      <div className={styles["primary-buttons"]}></div>
     </Layout>
   );
 };
diff --git a/src/styles/colors.module.css b/src/styles/colors.module.css
index 45a6409ac6..89bb84703d 100644
--- a/src/styles/colors.module.css
+++ b/src/styles/colors.module.css
@@ -1,19 +1,14 @@
-.background--teachers-primary {
-  background-color: var(--color-teachers-primary);
-  color: var(--color-teachers-primary-contrast);
+.bg-primary {
+  background-color: var(--color-button-primary);
+  color: var(--color-button-primary-contrast);
 }
 
-.background--teachers-secondary {
-  background-color: var(--color-teachers-secondary);
-  color: var(--color-teachers-secondary-contrast);
+.bg-secondary {
+  background-color: var(--color-button-secondary);
+  color: var(--color-button-secondary-contrast);
 }
 
-.background--pupils-primary {
-  background-color: var(--color-pupils-primary);
-  color: var(--color-pupils-primary-contrast);
-}
-
-.background--pupils-secondary {
-  background-color: var(--color-pupils-secondary);
-  color: var(--color-pupils-secondary-contrast);
+.bg-tertiary {
+  background-color: var(--color-button-tertiary);
+  color: var(--color-button-tertiary-contrast);
 }
diff --git a/src/styles/themes/aus.theme.ts b/src/styles/themes/aus.theme.ts
index 985dd2b77d..228a7e39fb 100644
--- a/src/styles/themes/aus.theme.ts
+++ b/src/styles/themes/aus.theme.ts
@@ -1,10 +1,15 @@
 import { Theme } from "./types";
 
-// In theory this could be a json passed in as config
 const ausTheme: Theme = {
   common: {
     "button-border-radius": "12px",
-    // general theme, which doesn't depend on pupil/teacher
+    "color-icon-bookmarked": "pink",
+    "color-button-primary": "lightgreen",
+    "color-button-primary-contrast": "black",
+    "color-button-secondary": "lightblue",
+    "color-button-secondary-contrast": "black",
+    "color-button-tertiary": "black",
+    "color-button-tertiary-contrast": "white",
   },
   teachers: {
     "color-primary": "lightgreen",
diff --git a/src/styles/themes/default.theme.ts b/src/styles/themes/default.theme.ts
index 09ac024b48..c6fe9e351a 100644
--- a/src/styles/themes/default.theme.ts
+++ b/src/styles/themes/default.theme.ts
@@ -1,11 +1,15 @@
 import { Theme } from "./types";
 
-// In theory this could be a json passed in as config
-
 const defaultTheme: Theme = {
   common: {
     "button-border-radius": "12px",
-    // general theme, which doesn't depend on pupil/teacher
+    "color-icon-bookmarked": "pink",
+    "color-button-primary": "#1A1A1A",
+    "color-button-primary-contrast": "#fff",
+    "color-button-secondary": "#4D4D4D",
+    "color-button-secondary-contrast": "#fff",
+    "color-button-tertiary": "#808080",
+    "color-button-tertiary-contrast": "#fff",
   },
   teachers: {
     "color-primary": "#5C3CCB",
diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts
index 249b13f0e5..b9ba43bfda 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/themes/types.ts
@@ -1,18 +1,25 @@
+const iconColorOverrides = ["color-icon-bookmarked"] as const;
+export type IconColorOverride = typeof iconColorOverrides[number];
+
+const themeCommonVarKeys = [
+  ...iconColorOverrides,
+  "color-button-primary",
+  "color-button-primary-contrast",
+  "color-button-secondary",
+  "color-button-secondary-contrast",
+  "color-button-tertiary",
+  "color-button-tertiary-contrast",
+  "button-border-radius",
+] as const;
+type ThemeCommonVarKey = typeof themeCommonVarKeys[number];
+
 const themeUserVarKeys = [
   "color-primary",
   "color-primary-contrast",
   "color-secondary",
   "color-secondary-contrast",
-  "color-primary",
-  "color-primary-contrast",
-  "color-secondary",
-  "color-secondary-contrast",
 ] as const;
-
-const themeCommonVarKeys = ["button-border-radius"] as const;
-
 type ThemeUserVarKey = typeof themeUserVarKeys[number];
-type ThemeCommonVarKey = typeof themeCommonVarKeys[number];
 
 export type Theme = {
   common: Record<ThemeCommonVarKey, string>;