diff --git a/src/app/_components/FrontPage/course/Choice.module.css b/src/app/_components/FrontPage/course/Choice.module.css
new file mode 100644
index 00000000..7502c227
--- /dev/null
+++ b/src/app/_components/FrontPage/course/Choice.module.css
@@ -0,0 +1,167 @@
+.courseCard {
+  display: flex;
+  flex-direction: row;
+  height: 95px;
+  width: 300px;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  /* border: 2px solid var(--warmYellow); */
+  border-radius: 16px;
+  /* box-shadow: 0px 4px 0px 0px; */
+  cursor: pointer;
+  /* background: var(--faintYellow); */
+  padding: 0 16px;
+
+  margin-top: 20px;
+  
+}
+
+.courseHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.courseTitle {
+  text-align: center;
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 700;
+  font-size: 19px;
+  color: var(--primary);
+  margin: 0;
+}
+
+.courseProgress {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--primary);
+}
+
+.progressBar {
+  position: relative;
+  width: 100px;
+  height: 12px;
+  background: var(--faintGrey);
+  border-radius: 25px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.progressWrapper {
+  display: flex;
+
+  justify-content: space-between;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--coolAccentBg);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.startBtn,
+.reviewBtn {
+  display: inline-block;
+  width: 80px;
+  height: 25px;
+  padding: 8px 16px;
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.startBtn {
+  background: var(--warm);
+  color: var(--white);
+  border: none;
+}
+
+/* .startBtn:hover {
+  background: #d9534f;
+} */
+
+.reviewBtn {
+  background: var(--warm);
+  color: var(--white);
+  border: none;
+}
+
+/* .reviewBtn:hover {
+  background: #5cb85c;
+} */
+
+
+.selectedcourseContainer {
+  display: flex;
+  flex-direction: column;
+  height: 95px;
+  width: 344px;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--coolDark);
+  border-radius: 16px;
+  box-shadow: 0px 4px 0px 0px black;
+  cursor: pointer;
+  background: var(--coolAccentBg);
+}
+
+.correctcourse {
+  background-color: var(--faintSuccess);
+  border: 2px solid var(--success);
+  box-shadow: 0px 4px 0px 0px var(--success);
+}
+
+.incorrectcourse {
+  background-color: var(--faintFailure);
+  border: 2px solid var(--failure);
+  box-shadow: 0px 4px 0px 0px var(--failure);
+}
+
+@media screen and (max-height: 840px) {
+  .courseContainer,
+  .selectedcourseContainer {
+    height: 80px;
+  }
+}
+@media screen and (max-height: 750px) {
+  .courseContainer,
+  .selectedcourseContainer {
+    height: 64px;
+  }
+}
+
+.questionLabel {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 33px;
+  color: var(--primary);
+  text-align: left;
+}
+
+.courseText {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+  color: var(--primary);
+}
+
+.selectedcourseText {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+  color: white;
+}
diff --git a/src/app/_components/FrontPage/course/Course.tsx b/src/app/_components/FrontPage/course/Course.tsx
new file mode 100644
index 00000000..739f1755
--- /dev/null
+++ b/src/app/_components/FrontPage/course/Course.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import styles from "./Choice.module.css";
+
+interface CourseProps {
+  title: string;
+  progress: number;
+  totalProgress: number;
+  urlToCourse: string;
+  bgColour: string;
+  borderColour: string;
+}
+
+export const Course: React.FC<CourseProps> = ({
+  title,
+  progress,
+  totalProgress,
+  urlToCourse,
+  bgColour,
+  borderColour,
+
+}) => {
+  const progressPercentage = (progress / totalProgress) * 100;
+  const isCompleted = progress === totalProgress;
+
+  return (
+    <div 
+    className={styles.courseCard}
+    style={
+      {
+        border: `2px solid ${borderColour}`, 
+        backgroundColor: bgColour, 
+        boxShadow: `0px 4px 0px ${borderColour}`
+        }}>
+      <div>
+          <h3 className={styles.courseTitle}>{title}</h3>
+
+
+
+        <div className={styles.courseTitle} style={{fontSize: '14px'}}>Progress</div>
+
+        <div className={styles.progressWrapper}>
+
+          <div className={styles.progressBar}>
+            <div
+              className={styles.progressFill}
+              style={{ width: `${progressPercentage}%` }}
+            />
+          </div>
+
+          <span className={styles.courseProgress}>
+          &nbsp; &nbsp; {progress}/{totalProgress}
+          </span>
+
+
+
+
+        </div>
+
+      </div>
+
+      <a href={urlToCourse} className={isCompleted ? styles.reviewBtn : styles.startBtn}>
+        {isCompleted ? "Review" : progress > 0 ? "Continue" : "Start"}
+      </a>
+    </div>
+  );
+};
+
diff --git a/src/app/_components/FrontPage/course/index.ts b/src/app/_components/FrontPage/course/index.ts
new file mode 100644
index 00000000..a880d064
--- /dev/null
+++ b/src/app/_components/FrontPage/course/index.ts
@@ -0,0 +1 @@
+export { Course } from "./Course";
diff --git a/src/app/_components/FrontPage/index.module.css b/src/app/_components/FrontPage/index.module.css
new file mode 100644
index 00000000..d3de9ed7
--- /dev/null
+++ b/src/app/_components/FrontPage/index.module.css
@@ -0,0 +1,56 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+ 
+.subContainer {
+
+  position: absolute;
+  top: 170px;
+  display: flex;
+  max-height: 723px;
+  height: calc(100% - 104px - 120px);
+  width: 100%;
+  z-index: 1;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  bottom: 120px;
+
+}
+
+/* Course{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+} */
+
+.subContainerReview {
+  position: absolute;
+  margin-top: 20px;
+  top: 104px;
+  display: flex;
+  max-height: 723px;
+  height: calc(100% - 104px - 120px);
+  width: 100%;
+  z-index: 1;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  bottom: 120px;
+}
+
+/* adjust for smaller header on very small screens (iPhone SE) */
+@media screen and (max-height: 750px) {
+  .subContainer {
+    top: 60px;
+  }
+}
diff --git a/src/app/_components/FrontPage/index.tsx b/src/app/_components/FrontPage/index.tsx
new file mode 100644
index 00000000..a4733b58
--- /dev/null
+++ b/src/app/_components/FrontPage/index.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import styles from "./index.module.css";
+import { Header } from "../shared/Header/Header";
+import { theme } from "../../../styles/index";
+import { Background } from "../shared/Background/Background";
+import { Navbar } from "../shared/Navbar/Navbar";
+import { Course } from "./course";
+export const FrontPage: React.FC = () => {
+
+
+  return (
+    <div className={styles.container}>
+      <Background />
+      <Header
+        title="Quiz"
+        subtitle="Test your knowledge!"
+        color={theme.colors.primary}
+
+      />
+
+      <div className={styles.subContainer}>
+
+
+          <Course
+            bgColour = {theme.colors.faintYellow}
+            borderColour={theme.colors.warmYellow}
+            title="Simile"
+            progress={0}
+            totalProgress={15} urlToCourse={"/quiz/simile"}
+          />
+
+          <Course
+            bgColour = {theme.colors.faintBlue}
+            borderColour={theme.colors.coolAccentBg}
+
+
+            title="Metaphor"
+            progress={2}
+            totalProgress={15} urlToCourse={"/quiz/metaphor"}
+          />
+
+          <Course
+            bgColour= {theme.colors.faintCoolDark}
+            borderColour={theme.colors.coolDark}
+
+
+            title="Idiom"
+            progress={15}
+            totalProgress={15} urlToCourse={"/quiz/idiom"}
+          />
+
+          <Course
+            bgColour = {theme.colors.white}
+            borderColour={theme.colors.coolDark}
+
+
+            title="Random"
+            progress={0}
+            totalProgress={15} urlToCourse={"/quiz/random"}
+          />
+
+      </div>
+      <Navbar />
+    </div>
+  );
+};
diff --git a/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx b/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx
index 21aac687..5546594c 100644
--- a/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx
+++ b/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx
@@ -3,6 +3,7 @@ import { IoCloseOutline } from "react-icons/io5";
 import { theme } from "../../../../styles/index";
 import { ProgressBar } from "./ProgressBar";
 import { StarInfo } from "./StarInfo";
+import Link from 'next/link'
 
 interface StatusInfoProps {
   completed: number;
@@ -12,10 +13,12 @@ interface StatusInfoProps {
 export const StatusInfo: React.FC<StatusInfoProps> = ({ completed, total }) => {
   return (
     <div className={styles.container}>
-      <IoCloseOutline
-        size={50}
-        style={{ color: `${theme.colors.secondary}` }}
-      />
+      <Link href="/quiz">
+        <IoCloseOutline
+          size={50}
+          style={{ color: `${theme.colors.secondary}` }}
+        />
+      </Link>
       <ProgressBar completed={completed} total={total} />
       <StarInfo />
     </div>
diff --git a/src/app/_components/shared/Header/Header.tsx b/src/app/_components/shared/Header/Header.tsx
index b27021ea..97d899d3 100644
--- a/src/app/_components/shared/Header/Header.tsx
+++ b/src/app/_components/shared/Header/Header.tsx
@@ -3,16 +3,24 @@ import styles from "./Header.module.css";
 interface TitleProps {
   title: string;
   color: string;
+  subtitle?: string;
   typeLabel?: JSX.Element;
 }
 
-export const Header: React.FC<TitleProps> = ({ title, color, typeLabel }) => {
+export const Header: React.FC<TitleProps> = ({ title, color, typeLabel, subtitle }) => {
   return (
     <div className={styles.container}>
       <div className={styles.subContainer}>
-        <p className={styles.text} style={{ color: color }}>
-          {title}
-        </p>
+        <div>
+          <p className={styles.text} style={{ color: color }}>
+        {title}
+          </p>
+            {subtitle && (
+            <p className={styles.text} style={{ color: color, marginTop: "30px" }}>
+              {subtitle}
+            </p>
+            )}
+        </div>
         {typeLabel}
       </div>
     </div>
diff --git a/src/app/quiz/[quiz]/layout.tsx b/src/app/quiz/[quiz]/layout.tsx
new file mode 100644
index 00000000..0b762f5c
--- /dev/null
+++ b/src/app/quiz/[quiz]/layout.tsx
@@ -0,0 +1,20 @@
+import { type Metadata } from "next";
+import { TRPCReactProvider } from "~/trpc/react";
+
+export const metadata: Metadata = {
+  title: "LiteraLingo",
+  description: "Quiz",
+  icons: [{ rel: "icon", type: "image/svg+xml", url: "/favicon.svg" }],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body>
+        <TRPCReactProvider>{children}</TRPCReactProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/quiz/[quiz]/loading.tsx b/src/app/quiz/[quiz]/loading.tsx
new file mode 100644
index 00000000..99672a08
--- /dev/null
+++ b/src/app/quiz/[quiz]/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <p>Loading...</p>;
+}
diff --git a/src/app/quiz/[quiz]/page.tsx b/src/app/quiz/[quiz]/page.tsx
new file mode 100644
index 00000000..fe2d7117
--- /dev/null
+++ b/src/app/quiz/[quiz]/page.tsx
@@ -0,0 +1,27 @@
+import { HydrateClient } from "~/trpc/server";
+import { Poppins, Baloo_2 } from "next/font/google";
+import { QuizPage } from "../../_components/QuizPage";
+
+const poppins = Poppins({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-poppins",
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
+const baloo_2 = Baloo_2({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-baloo-2",
+  weight: ["400", "500", "600", "700", "800"],
+});
+
+export default async function Home() {
+  return (
+    <HydrateClient>
+      <main className={`${poppins.variable} ${baloo_2.variable}`}>
+        <QuizPage />
+      </main>
+    </HydrateClient>
+  );
+}
diff --git a/src/app/quiz/page.tsx b/src/app/quiz/page.tsx
index b6b15df7..8aeb7665 100644
--- a/src/app/quiz/page.tsx
+++ b/src/app/quiz/page.tsx
@@ -1,6 +1,6 @@
 import { HydrateClient } from "~/trpc/server";
 import { Poppins, Baloo_2 } from "next/font/google";
-import { QuizPage } from "../_components/QuizPage";
+import { FrontPage } from "../_components/FrontPage";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -20,7 +20,7 @@ export default async function Home() {
   return (
     <HydrateClient>
       <main className={`${poppins.variable} ${baloo_2.variable}`}>
-        <QuizPage />
+        <FrontPage />
       </main>
     </HydrateClient>
   );