diff --git a/.env b/.env
index 90bddb6..0a4ed7d 100644
--- a/.env
+++ b/.env
@@ -22,18 +22,10 @@ VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-asset
 VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club
 VITE_LINK_PYTHON_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip
 VITE_LINK_IMPACT_REPORT_2023=https://storage.googleapis.com/codeforlife-assets/impact_reports/impact_report_2023.pdf
+VITE_LINK_IDEAS_BOX=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
+VITE_LINK_HOME_LEARNING_BEGINNER=https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/beginner
+VITE_LINK_HOME_LEARNING_INTERMEDIATE=https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/intermediate
+VITE_LINK_HOME_LEARNING_ADVANCED=https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/advanced
 
-# TODO: determine which of these we need.
+# TODO: determine if this is needed.
 # REACT_APP_CONTAINER_MAX_WIDTH=lg
-# REACT_APP_IDEAS_BOX_HREF=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
-# REACT_APP_INDEPENDENT_BEGINNER_HREF=https://code-for-life.gitbook.io/independent-student-resources/beginner/
-# REACT_APP_INDEPENDENT_INTERMEDIATE_HREF=https://code-for-life.gitbook.io/independent-student-resources/intermediate/
-# REACT_APP_INDEPENDENT_ADVANCED_HREF=https://code-for-life.gitbook.io/independent-student-resources/advanced/
-# REACT_APP_API_BASE_URL=http://localhost:8000/api/
-# REACT_APP_RAPID_ROUTER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/w0Pw_XikQSs
-# REACT_APP_BLOCKLY_GUIDE_SRC=https://docs.codeforlife.education/rapid-router/blockly-guide
-# REACT_APP_TEACHER_RESOURCES_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/tM5nKPYlz74
-# REACT_APP_RR_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/hv0fM0twrOE
-# REACT_APP_INTRO_TO_CODING_ENGLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-england
-# REACT_APP_INTRO_TO_CODING_SCOTLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland
-# REACT_APP_RR_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/welcome-to-rapid-router
diff --git a/package.json b/package.json
index 8e2bf89..557c4e8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.8",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.10",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {
diff --git a/src/app/env.ts b/src/app/env.ts
index 65c0313..cfa8eaa 100644
--- a/src/app/env.ts
+++ b/src/app/env.ts
@@ -24,3 +24,8 @@ export const LINK_PRIMARY_PACK_DOWNLOAD = env.VITE_LINK_PRIMARY_PACK_DOWNLOAD
 export const LINK_PYTHON_PACK_GITBOOK = env.VITE_LINK_PYTHON_PACK_GITBOOK
 export const LINK_PYTHON_PACK_DOWNLOAD = env.VITE_LINK_PYTHON_PACK_DOWNLOAD
 export const LINK_IMPACT_REPORT_2023 = env.VITE_LINK_IMPACT_REPORT_2023
+export const LINK_IDEAS_BOX = env.VITE_LINK_IDEAS_BOX
+export const LINK_HOME_LEARNING_BEGINNER = env.VITE_LINK_HOME_LEARNING_BEGINNER
+export const LINK_HOME_LEARNING_INTERMEDIATE =
+  env.VITE_LINK_HOME_LEARNING_INTERMEDIATE
+export const LINK_HOME_LEARNING_ADVANCED = env.VITE_LINK_HOME_LEARNING_ADVANCED
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 25d7821..daeaa1d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,7 +1,4 @@
-import { type AnchorHTMLAttributes, type FC } from "react"
 import {
-  Button,
-  type ButtonProps,
   CardActions,
   CardContent,
   CardMedia,
@@ -10,25 +7,34 @@ import {
   type CardProps as MuiCardProps,
   Typography,
 } from "@mui/material"
+import { LinkButton, type LinkButtonProps } from "codeforlife/components/router"
 
-export interface CardProps extends MuiCardProps {
+export type CardProps<
+  Override extends "delta" | "to",
+  State extends Record<string, unknown> = Record<string, unknown>,
+> = MuiCardProps & {
   title: string
   description: string
   mediaProps: {
     image: NonNullable<CardMediaProps["image"]>
     title: NonNullable<CardMediaProps["title"]>
   }
-  buttonProps: ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>
+  linkButtonProps: LinkButtonProps<Override, State>
 }
 
-const Card: FC<CardProps> = ({
+const Card: {
+  (props: CardProps<"delta">): JSX.Element
+  <State extends Record<string, unknown> = Record<string, unknown>>(
+    props: CardProps<"to", State>,
+  ): JSX.Element
+} = ({
   title,
   description,
   mediaProps,
-  buttonProps,
+  linkButtonProps,
   style,
   ...otherCardProps
-}) => {
+}: CardProps<"delta"> | CardProps<"to">) => {
   return (
     <MuiCard
       style={{
@@ -46,7 +52,8 @@ const Card: FC<CardProps> = ({
         <Typography mb={0}>{description}</Typography>
       </CardContent>
       <CardActions>
-        <Button {...buttonProps} />
+        {/* @ts-expect-error props */}
+        <LinkButton {...linkButtonProps} />
       </CardActions>
     </MuiCard>
   )
diff --git a/src/features/footer/RegisterToNewsletterForm.tsx b/src/features/footer/RegisterToNewsletterForm.tsx
index a670358..c26ab01 100644
--- a/src/features/footer/RegisterToNewsletterForm.tsx
+++ b/src/features/footer/RegisterToNewsletterForm.tsx
@@ -15,7 +15,7 @@ const RegisterToNewsletterForm: FC<RegisterToNewsletterFormProps> = () => {
   const navigate = useNavigate()
 
   return (
-    <Stack>
+    <Stack id="register-to-newsletter-form">
       <FormHelperText>
         Sign up to receive updates about Code for Life games and teaching
         resources.
diff --git a/src/images/home_learning_hero_hexagon.png b/src/images/home_learning_hero_hexagon.png
new file mode 100644
index 0000000..1728504
Binary files /dev/null and b/src/images/home_learning_hero_hexagon.png differ
diff --git a/src/images/rr_advanced.png b/src/images/rr_advanced.png
new file mode 100644
index 0000000..8d9cbab
Binary files /dev/null and b/src/images/rr_advanced.png differ
diff --git a/src/images/rr_beginner.png b/src/images/rr_beginner.png
new file mode 100644
index 0000000..0c14ae3
Binary files /dev/null and b/src/images/rr_beginner.png differ
diff --git a/src/images/rr_intermediate.png b/src/images/rr_intermediate.png
new file mode 100644
index 0000000..da8e1f0
Binary files /dev/null and b/src/images/rr_intermediate.png differ
diff --git a/src/pages/getInvolved/GetInvolved.tsx b/src/pages/getInvolved/GetInvolved.tsx
index 4c9096e..654a8b6 100644
--- a/src/pages/getInvolved/GetInvolved.tsx
+++ b/src/pages/getInvolved/GetInvolved.tsx
@@ -2,7 +2,6 @@ import * as page from "codeforlife/components/page"
 import { ChevronRightRounded as ChevronRightRoundedIcon } from "@mui/icons-material"
 import { type FC } from "react"
 import { Unstable_Grid2 as Grid } from "@mui/material"
-import { useNavigate } from "react-router-dom"
 
 import Card from "../../components/Card"
 import ClubsImg from "../../images/clubs.png"
@@ -13,72 +12,65 @@ import { paths } from "../../routes"
 
 export interface GetInvolvedProps {}
 
-const GetInvolved: FC<GetInvolvedProps> = () => {
-  const navigate = useNavigate()
-
-  return (
-    <page.Page>
-      <page.Banner
-        header="Get involved"
-        subheader="How you can get involved with the creation of Code for Life products and resources"
-        imageProps={{
-          title: "Adult teaching two children",
-          alt: "Adult teaching two children",
-          src: GetInvolvedHero,
-        }}
-      />
-      <page.Section>
-        <Grid container spacing={4}>
-          <Grid xs={12} md={6} lg={4}>
-            <Card
-              title="Starting a coding club of your own"
-              description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page."
-              mediaProps={{
-                title: "Student showing their work to teacher",
-                image: ClubsImg,
-              }}
-              buttonProps={{
-                onClick: () => {
-                  navigate(paths.codingClubs._)
-                },
-                children: "Read more",
-                endIcon: <ChevronRightRoundedIcon />,
-              }}
-            />
-          </Grid>
-          <Grid xs={12} md={6} lg={4}>
-            <Card
-              title="Contribute through code"
-              description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects."
-              mediaProps={{ title: "Github repository page", image: GithubImg }}
-              buttonProps={{
-                onClick: () => {
-                  navigate(paths.contribute._)
-                },
-                children: "Read more",
-                endIcon: <ChevronRightRoundedIcon />,
-              }}
-            />
-          </Grid>
-          <Grid xs={12} md={6} lg={4}>
-            <Card
-              title="University partnerships"
-              description="Please get in touch at codeforlife@ocado.com if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design."
-              mediaProps={{
-                title: "Three students looking at laptops",
-                image: UniversitiesImg,
-              }}
-              buttonProps={{
-                href: "mailto:codeforlife@ocado.com",
-                children: "Get in touch",
-                endIcon: <ChevronRightRoundedIcon />,
-              }}
-            />
-          </Grid>
+const GetInvolved: FC<GetInvolvedProps> = () => (
+  <page.Page>
+    <page.Banner
+      header="Get involved"
+      subheader="How you can get involved with the creation of Code for Life products and resources"
+      imageProps={{
+        title: "Adult teaching two children",
+        alt: "Adult teaching two children",
+        src: GetInvolvedHero,
+      }}
+    />
+    <page.Section>
+      <Grid container spacing={4}>
+        <Grid xs={12} md={6} lg={4}>
+          <Card
+            title="Starting a coding club of your own"
+            description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page."
+            mediaProps={{
+              title: "Student showing their work to teacher",
+              image: ClubsImg,
+            }}
+            linkButtonProps={{
+              to: paths.codingClubs._,
+              children: "Read more",
+              endIcon: <ChevronRightRoundedIcon />,
+            }}
+          />
+        </Grid>
+        <Grid xs={12} md={6} lg={4}>
+          <Card
+            title="Contribute through code"
+            description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects."
+            mediaProps={{ title: "Github repository page", image: GithubImg }}
+            linkButtonProps={{
+              to: paths.contribute._,
+              children: "Read more",
+              endIcon: <ChevronRightRoundedIcon />,
+            }}
+          />
+        </Grid>
+        <Grid xs={12} md={6} lg={4}>
+          <Card
+            title="University partnerships"
+            description="Please get in touch at codeforlife@ocado.com if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design."
+            mediaProps={{
+              title: "Three students looking at laptops",
+              image: UniversitiesImg,
+            }}
+            linkButtonProps={{
+              to: "mailto:codeforlife@ocado.com",
+              target: "_blank",
+              children: "Get in touch",
+              endIcon: <ChevronRightRoundedIcon />,
+            }}
+          />
         </Grid>
-      </page.Section>
-    </page.Page>
-  )
-}
+      </Grid>
+    </page.Section>
+  </page.Page>
+)
 
 export default GetInvolved
diff --git a/src/pages/homeLearning/AboutRR.tsx b/src/pages/homeLearning/AboutRR.tsx
new file mode 100644
index 0000000..3446e31
--- /dev/null
+++ b/src/pages/homeLearning/AboutRR.tsx
@@ -0,0 +1,57 @@
+import { Unstable_Grid2 as Grid, Typography } from "@mui/material"
+import { type FC } from "react"
+import { LinkButton } from "codeforlife/components/router"
+import { ScrollIntoViewLink } from "codeforlife/components"
+
+import { paths } from "../../routes"
+
+export interface AboutRRProps {}
+
+const AboutRR: FC<AboutRRProps> = () => (
+  <Grid container columnSpacing={4}>
+    <Grid xs={12}>
+      <Typography variant="h4" textAlign="center">
+        About Rapid Router
+      </Typography>
+    </Grid>
+    <Grid xs={12} md={6}>
+      <Typography>
+        Rapid Router is our shopping delivery game that teaches children aged
+        5-14 to learn how to code using Blockly. The pupils can then progress to
+        Python Den to continue to build up their skills.
+      </Typography>
+      <Typography>
+        The game and lessons support the English National Curriculum Computing
+        strand, and teachers across the world love them.
+      </Typography>
+      <Typography>
+        Now, we&apos;ve made lessons available for parents and caregivers to
+        teach at home, so we can #KeepKidsCoding. They&apos;re free and easy,
+        but most of all, they&apos;re fun!
+      </Typography>
+    </Grid>
+    <Grid xs={12} md={6}>
+      <Typography>
+        Read our learning guide and start at Level 1, unless your child has
+        played before. To start playing, you need to first register as an
+        independent student. This will ensure that the level progress is saved.
+      </Typography>
+      <Typography>
+        If you would like to keep updated on our products and receive emails
+        about Code for Life, please{" "}
+        <ScrollIntoViewLink
+          elementId="register-to-newsletter-form"
+          options={{ behavior: "smooth" }}
+        >
+          sign up to our updates
+        </ScrollIntoViewLink>
+        .
+      </Typography>
+    </Grid>
+    <Grid xs={12} className="flex-end-x">
+      <LinkButton to={paths.register._}>Register now</LinkButton>
+    </Grid>
+  </Grid>
+)
+
+export default AboutRR
diff --git a/src/pages/homeLearning/Advanced.tsx b/src/pages/homeLearning/Advanced.tsx
new file mode 100644
index 0000000..cbea458
--- /dev/null
+++ b/src/pages/homeLearning/Advanced.tsx
@@ -0,0 +1,60 @@
+import { type FC } from "react"
+
+import { LINK_HOME_LEARNING_ADVANCED } from "../../app/env"
+import Levels from "./Levels"
+import { Link } from "codeforlife/components/router"
+import RRAdvancedImage from "../../images/rr_advanced.png"
+import { paths } from "../../routes"
+
+export interface AdvancedProps {}
+
+const Advanced: FC<AdvancedProps> = () => (
+  <Levels
+    banner={{
+      difficulty: "Advanced",
+      color: "White",
+      bgcolor: "teacher.main",
+    }}
+    cardProps={{
+      mediaProps: { title: "RR advanced image", image: RRAdvancedImage },
+      title: "Advanced",
+      description:
+        "Let's get advanced! Learn about repeat loops and selection, variables, and how to create efficient code. Designed for children aged 12-14, but open to all.",
+      linkButtonProps: { to: LINK_HOME_LEARNING_ADVANCED },
+    }}
+    text={{
+      levels: "29-67",
+      sessions: [
+        {
+          ids: [1],
+          body: "Recap earlier levels before looking at repeat loops. Encourage your child to plan ahead on the printable worksheet before writing more complex programs. If they're unsure about using loops, ask them to write the code without loops and then look for repeating patterns.",
+        },
+        {
+          ids: [2],
+          body: "A video and printable resources support this lesson, which builds your child's understanding of loops with a new loop, repeat-until.",
+        },
+        {
+          ids: [3, 4],
+          body: "Extra tasks for children who want a challenge! Watch the if...do video to learn about selection statements. Ask your child to explain how their finished program works!",
+        },
+        {
+          ids: [5],
+          body: "Learn more about if...else through traffic lights. In the Traffic Lights levels in Rapid Router, traffic light is a variable that either contains red or green.",
+        },
+        {
+          ids: "Extended",
+          body: (
+            <>
+              Build on everything learned so far with traffic lights, limited
+              blocks, procedures and brain teasers. Older children might even
+              like to start learning to program using the Python language using{" "}
+              <Link to={paths.pythonDen._}>Python Den</Link>.
+            </>
+          ),
+        },
+      ],
+    }}
+  />
+)
+
+export default Advanced
diff --git a/src/pages/homeLearning/Beginner.tsx b/src/pages/homeLearning/Beginner.tsx
new file mode 100644
index 0000000..91ca2f9
--- /dev/null
+++ b/src/pages/homeLearning/Beginner.tsx
@@ -0,0 +1,47 @@
+import { type FC } from "react"
+
+import { LINK_HOME_LEARNING_BEGINNER } from "../../app/env"
+import Levels from "./Levels"
+import RRBeginnerImage from "../../images/rr_beginner.png"
+
+export interface BeginnerProps {}
+
+const Beginner: FC<BeginnerProps> = () => (
+  <Levels
+    banner={{
+      difficulty: "Beginner",
+      color: "White",
+      bgcolor: "student.main",
+    }}
+    cardProps={{
+      mediaProps: { title: "RR beginner image", image: RRBeginnerImage },
+      title: "Beginner",
+      description:
+        "Teach your child about problem-solving and logical reasoning as they play. They'll explore algorithms, and learn how to create and debug simple programs. Designed for children aged 5-7, but start here if you've never played Rapid Router.",
+      linkButtonProps: { to: LINK_HOME_LEARNING_BEGINNER },
+    }}
+    text={{
+      levels: "1-16",
+      sessions: [
+        {
+          ids: [1],
+          body: "Print off the worksheets, and cut them out to play offline. This helps children see that they need to give the computer clear instructions so it can understand how to move the van.",
+        },
+        {
+          ids: [2],
+          body: "Explore Rapid Router online and learn how to play. Print the left-right van on page 6, to help avoid any confusion between left and right. Once a child has understood the basics, they can work on levels 1 to 5.",
+        },
+        {
+          ids: [3],
+          body: "Plan longer routes with more turns to learn how to create more complex algorithms. The direct drive buttons make things a little easier for younger children, or those with learning difficulties while they build confidence.",
+        },
+        {
+          ids: [4, 5],
+          body: "Print off worksheets focusing on efficient routes and planning using levels 13 and 14. Levels 15-16 include routes where there is more than one delivery to make and some complex and tangled routes.",
+        },
+      ],
+    }}
+  />
+)
+
+export default Beginner
diff --git a/src/pages/homeLearning/HomeLearning.tsx b/src/pages/homeLearning/HomeLearning.tsx
new file mode 100644
index 0000000..db11462
--- /dev/null
+++ b/src/pages/homeLearning/HomeLearning.tsx
@@ -0,0 +1,46 @@
+import * as pages from "codeforlife/components/page"
+import { type FC } from "react"
+import { LinkButton } from "codeforlife/components/router"
+import { Send as SendIcon } from "@mui/icons-material"
+
+import AboutRR from "./AboutRR"
+import Advanced from "./Advanced"
+import Beginner from "./Beginner"
+import HomeLearningHeroImage from "../../images/home_learning_hero_hexagon.png"
+import Intermediate from "./Intermediate"
+import { LINK_IDEAS_BOX } from "../../app/env"
+import { paths } from "../../routes"
+
+export interface HomeLearningProps {}
+
+const HomeLearning: FC<HomeLearningProps> = () => {
+  return (
+    <pages.Page>
+      <pages.Banner
+        imageProps={{ alt: "homeLearningHero", src: HomeLearningHeroImage }}
+        header="Home learning"
+        subheader="Whether you're a parent, a caregiver, or a curious student — our Rapid Router game is easy to use and free - forever."
+      />
+      <pages.Section>
+        <AboutRR />
+      </pages.Section>
+      <Beginner />
+      <Intermediate />
+      <Advanced />
+      <pages.Section className="flex-end-x">
+        <LinkButton to={paths.register._}>Register now</LinkButton>
+      </pages.Section>
+      <pages.Section
+        boxProps={{ bgcolor: "tertiary.main" }}
+        className="flex-center-x"
+        sx={{ paddingY: theme => theme.spacing(2) }}
+      >
+        <LinkButton endIcon={<SendIcon />} to={LINK_IDEAS_BOX} target="_blank">
+          Let us know your feedback
+        </LinkButton>
+      </pages.Section>
+    </pages.Page>
+  )
+}
+
+export default HomeLearning
diff --git a/src/pages/homeLearning/Intermediate.tsx b/src/pages/homeLearning/Intermediate.tsx
new file mode 100644
index 0000000..dc096a7
--- /dev/null
+++ b/src/pages/homeLearning/Intermediate.tsx
@@ -0,0 +1,51 @@
+import { type FC } from "react"
+
+import { LINK_HOME_LEARNING_INTERMEDIATE } from "../../app/env"
+import Levels from "./Levels"
+import RRIntermediateImage from "../../images/rr_intermediate.png"
+
+export interface IntermediateProps {}
+
+const Intermediate: FC<IntermediateProps> = () => (
+  <Levels
+    direction="row-reverse"
+    banner={{
+      difficulty: "Intermediate",
+      color: "Black",
+      bgcolor: "indy.main",
+    }}
+    cardProps={{
+      mediaProps: {
+        title: "RR intermediate image",
+        image: RRIntermediateImage,
+      },
+      title: "Intermediate",
+      description:
+        "Children confident with coding can move up to the next challenge — more complex maps and new programming constructs. Designed for children aged 8-11, but anyone can progress here if ready.",
+      linkButtonProps: { to: LINK_HOME_LEARNING_INTERMEDIATE },
+    }}
+    text={{
+      levels: "17-28",
+      sessions: [
+        {
+          ids: [1],
+          body: "Start delivering shopping to lots of different places. It can be easier to plan routes on the paper worksheets before trying on a computer.",
+        },
+        {
+          ids: [2],
+          body: "Print out the three lesson worksheets. Then, watch the video together to learn about repeat loops. Encourage your child to look for patterns in their code. If they spot a repeated pattern, they can use a repeat loop to make it shorter. Talk about repeated patterns away from the world of computers with poems and exercises.",
+        },
+        {
+          ids: [3],
+          body: "Get stuck in with more complex loops - even loops inside loops! The printable worksheets help your child plan their code before trying it in Rapid Router. Printable left-right vans can help overcome any confusions between left and right.",
+        },
+        {
+          ids: [4, 5],
+          body: "Guide your child through creating their own routes in Rapid Router. Perhaps you can join in and try each other's routes?",
+        },
+      ],
+    }}
+  />
+)
+
+export default Intermediate
diff --git a/src/pages/homeLearning/Levels.tsx b/src/pages/homeLearning/Levels.tsx
new file mode 100644
index 0000000..9ad7180
--- /dev/null
+++ b/src/pages/homeLearning/Levels.tsx
@@ -0,0 +1,85 @@
+import * as pages from "codeforlife/components/page"
+import {
+  Box,
+  Unstable_Grid2 as Grid,
+  type Grid2Props,
+  Typography,
+} from "@mui/material"
+import { type FC, type ReactNode } from "react"
+import { OpenInNew as OpenInNewIcon } from "@mui/icons-material"
+
+import { Card, type CardProps } from "../../components"
+
+export interface LevelsProps extends Pick<Grid2Props, "direction"> {
+  banner: {
+    difficulty: string
+    color: string
+    bgcolor: string
+  }
+  cardProps: CardProps<"to">
+  text: {
+    levels: string
+    sessions: Array<{
+      ids: number[] | string
+      body: ReactNode
+    }>
+  }
+}
+
+const Levels: FC<LevelsProps> = ({ direction, banner, cardProps, text }) => {
+  return (
+    <>
+      <pages.Section
+        sx={{ paddingY: theme => theme.spacing(2) }}
+        boxProps={{ bgcolor: banner.bgcolor }}
+      >
+        <Typography variant="h4" color={banner.color} mb={0}>
+          &lt; {banner.difficulty} &gt;
+        </Typography>
+      </pages.Section>
+      <pages.Section>
+        <Grid
+          container
+          rowSpacing={{ xs: 2, md: 0 }}
+          columnSpacing={{ xs: 0, md: 4 }}
+          direction={direction}
+        >
+          <Grid xs={12} md={4}>
+            <Card
+              {...cardProps}
+              style={{
+                ...cardProps.style,
+                minHeight: "auto",
+              }}
+              linkButtonProps={{
+                children: "Go to lessons",
+                endIcon: <OpenInNewIcon />,
+                target: "_blank",
+                ...cardProps.linkButtonProps,
+              }}
+            />
+          </Grid>
+          <Grid xs={12} md={8}>
+            <Typography variant="h5">Levels {text.levels}</Typography>
+            {text.sessions.map((session, index) => (
+              <Box key={`session-${index}`}>
+                <Typography variant="h6">
+                  {typeof session.ids === "string"
+                    ? session.ids
+                    : "Session " + session.ids.join(" & ")}
+                </Typography>
+                <Typography
+                  mb={index === text.sessions.length - 1 ? 0 : undefined}
+                >
+                  {session.body}
+                </Typography>
+              </Box>
+            ))}
+          </Grid>
+        </Grid>
+      </pages.Section>
+    </>
+  )
+}
+
+export default Levels
diff --git a/src/pages/studentDashboard/Games.tsx b/src/pages/studentDashboard/Games.tsx
index c2d6280..2273169 100644
--- a/src/pages/studentDashboard/Games.tsx
+++ b/src/pages/studentDashboard/Games.tsx
@@ -7,28 +7,26 @@ import { paths } from "../../routes"
 
 export interface GamesProps {}
 
-const Games: FC<GamesProps> = () => {
-  return (
-    <Stack spacing={4} alignItems="center">
-      <Typography variant="h4" textAlign="center">
-        Your games
-      </Typography>
-      <Stack direction="row" gap={5}>
-        <Card
-          title="Rapid Router"
-          description="Rapid Router guides you, and makes learning to code easy and great fun. Using Blockly, you can advance through the levels to become an Ocado delivery hero."
-          mediaProps={{
-            title: "RapidRouter logo",
-            image: RRLogoGreenImage,
-          }}
-          buttonProps={{
-            children: "Play",
-            href: paths.rapidRouter._,
-          }}
-        />
-      </Stack>
+const Games: FC<GamesProps> = () => (
+  <Stack spacing={4} alignItems="center">
+    <Typography variant="h4" textAlign="center">
+      Your games
+    </Typography>
+    <Stack direction="row" gap={5}>
+      <Card
+        title="Rapid Router"
+        description="Rapid Router guides you, and makes learning to code easy and great fun. Using Blockly, you can advance through the levels to become an Ocado delivery hero."
+        mediaProps={{
+          title: "RapidRouter logo",
+          image: RRLogoGreenImage,
+        }}
+        linkButtonProps={{
+          children: "Play",
+          to: paths.rapidRouter._,
+        }}
+      />
     </Stack>
-  )
-}
+  </Stack>
+)
 
 export default Games
diff --git a/src/routes/general.tsx b/src/routes/general.tsx
index 4d811ad..b4d8877 100644
--- a/src/routes/general.tsx
+++ b/src/routes/general.tsx
@@ -1,12 +1,12 @@
 import { Route } from "react-router-dom"
 
 // import Contribute from '../pages/contribute/Contribute';
-// import HomeLearning from '../pages/homeLearning/HomeLearning';
 // import TermsOfUse from '../pages/termsOfUse/TermsOfUse';
 import AboutUs from "../pages/aboutUs/AboutUs"
 import CodingClubs from "../pages/codingClubs/CodingClubs"
 import GetInvolved from "../pages/getInvolved/GetInvolved"
 import Home from "../pages/home/Home"
+import HomeLearning from "../pages/homeLearning/HomeLearning"
 import PrivacyNotice from "../pages/privacyNotice/PrivacyNotice"
 import paths from "./paths"
 
@@ -16,7 +16,7 @@ const general = (
     <Route path={paths.aboutUs._} element={<AboutUs />} />
     <Route path={paths.privacyNotice.tab._} element={<PrivacyNotice />} />
     {/* <Route path={paths.termsOfUse.tab._} element={<TermsOfUse />} /> */}
-    {/* <Route path={paths.homeLearning._} element={<HomeLearning />} /> */}
+    <Route path={paths.homeLearning._} element={<HomeLearning />} />
     <Route path={paths.getInvolved._} element={<GetInvolved />} />
     <Route path={paths.codingClubs._} element={<CodingClubs />} />
     {/* <Route path={paths.contribute._} element={<Contribute />} /> */}
diff --git a/src/routes/paths.ts b/src/routes/paths.ts
index 5bafe37..87b4bba 100644
--- a/src/routes/paths.ts
+++ b/src/routes/paths.ts
@@ -107,6 +107,7 @@ const paths = _("", {
   rapidRouter: _("/rapid-router", {
     scoreboard: _("/scoreboard"),
   }),
+  pythonDen: _("/python-den"),
 })
 
 export default paths
diff --git a/yarn.lock b/yarn.lock
index bd97dfd..b1ddbdd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2609,9 +2609,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001663:
-  version "1.0.30001666"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz#112d77e80f1762f62a1b71ba92164e0cb3f3dd13"
-  integrity sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==
+  version "1.0.30001667"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz#99fc5ea0d9c6e96897a104a8352604378377f949"
+  integrity sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==
 
 chai@^4.3.10:
   version "4.5.0"
@@ -2699,9 +2699,9 @@ clsx@^2.1.0, clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.3.8":
-  version "2.3.8"
-  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/6729cfc43532038147710b7ba312367d5ffdc324"
+"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.3.10":
+  version "2.3.10"
+  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/6683ccc85cc8c250db3f8b46fe626e0581086442"
   dependencies:
     "@emotion/react" "^11.10.6"
     "@emotion/styled" "^11.10.6"
@@ -3048,9 +3048,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.5.28:
-  version "1.5.31"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.31.tgz#b1478418769dec72ea70d9fdf147a81491857f10"
-  integrity sha512-QcDoBbQeYt0+3CWcK/rEbuHvwpbT/8SV9T3OSgs6cX1FlcUAkgrkqbg9zLnDrMM/rLamzQwal4LYFCiWk861Tg==
+  version "1.5.32"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz#4a05ee78e29e240aabaf73a67ce9fe73f52e1bc7"
+  integrity sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"