diff --git a/package.json b/package.json
index b9e13f2..14d41a8 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "lucide-react": "^0.306.0",
     "next": "14.0.4",
     "react": "^18",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/_temp_types/homeAttributes.ts b/src/_temp_types/homeAttributes.ts
new file mode 100644
index 0000000..94fd01d
--- /dev/null
+++ b/src/_temp_types/homeAttributes.ts
@@ -0,0 +1,8 @@
+export interface Attribute {
+    name: string;
+}
+
+export interface InfoItem {
+    label: string;
+    value: string | number;
+}
diff --git a/src/_temp_types/user.ts b/src/_temp_types/user.ts
index 00da8b1..715cc7b 100644
--- a/src/_temp_types/user.ts
+++ b/src/_temp_types/user.ts
@@ -5,7 +5,7 @@ export interface AuthUser {
   last_name: string;
   email: string;
   is_staff: boolean;
-  course_memberships: Array<{ course: number }>;
+  course_memberships: Array<{ id: number, name: string } >;
 }
 
 export interface AnonUser {
diff --git a/src/app/(app)/course/[courseId]/home/(components)/AttributesUsed.tsx b/src/app/(app)/course/[courseId]/home/(components)/AttributesUsed.tsx
new file mode 100644
index 0000000..8c7b3be
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(components)/AttributesUsed.tsx
@@ -0,0 +1,40 @@
+import { Attribute } from "@/_temp_types/homeAttributes"
+
+const AttributesUsed = ({ attributes }: { attributes: Attribute[] }) => {
+  const displayedAttributes = attributes.slice(0, 15)
+  const hasMoreAttributes = attributes.length > 15
+
+  return (
+    <div className="mb-8">
+      <h3 className="text-lg font-semibold mb-2">Attributes Used</h3>
+      <div className="border border-gray-300 p-4 rounded-md">
+        <div className={`grid gap-2 ${attributes.length > 0 ? "grid-cols-1 sm:grid-cols-4" : ""}`}>
+          {attributes.length > 0 ? (
+            <>
+              {displayedAttributes.map((attribute, index) => (
+                <ul key={index} className="list-disc pl-5">
+                  <li>{attribute.name}</li>
+                </ul>
+              ))}
+              {hasMoreAttributes && (
+                <ul className="list-disc pl-5">
+                  <li>...</li>
+                </ul>
+              )}
+            </>
+          ) : (
+            <ul className="list-disc pl-5">
+              <li>No attributes used</li>
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+AttributesUsed.defaultProps = {
+  attributes: [],
+}
+
+export default AttributesUsed
diff --git a/src/app/(app)/course/[courseId]/home/(components)/InfoSection.tsx b/src/app/(app)/course/[courseId]/home/(components)/InfoSection.tsx
new file mode 100644
index 0000000..84f3e4f
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(components)/InfoSection.tsx
@@ -0,0 +1,36 @@
+import { InfoItem } from "@/_temp_types/homeAttributes"
+
+const InfoSection = ({
+  title,
+  items = [],
+}: {
+  title: string;
+  items?: InfoItem[];
+}) => (
+  <div className="mb-8">
+    <h3 className="text-lg font-semibold mb-2">{title}</h3>
+    <div className="border border-gray-300 p-4 rounded-md">
+      {items.length > 0 ? (
+        <ul className="space-y-2">
+          {items.map((item, index) => (
+            <li
+              key={index}
+              className="flex justify-between items-center"
+            >
+              <span>{item.label}:</span>
+              <b>{item.value}</b>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No data available</p>
+      )}
+    </div>
+  </div>
+)
+
+InfoSection.defaultProps = {
+  items: [],
+}
+
+export default InfoSection
diff --git a/src/app/(app)/course/[courseId]/home/(components)/OnboardingProgress.tsx b/src/app/(app)/course/[courseId]/home/(components)/OnboardingProgress.tsx
new file mode 100644
index 0000000..95ec8c3
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(components)/OnboardingProgress.tsx
@@ -0,0 +1,60 @@
+import CircularProgressBar from "@/components/ui/circular-progress-bar"
+
+interface OnboardingProgressProps {
+  completionPercentage: number;
+  nextStepTitle: string;
+  courseId: string | number;
+}
+
+const OnboardingProgress = ({
+  completionPercentage,
+  nextStepTitle,
+  courseId,
+}: OnboardingProgressProps) => {
+  return (
+    <>
+      <h2 className="text-lg font-semibold mb-4">
+        Welcome back!{" "}
+        {completionPercentage === 100 ? (
+          <a
+            href={`/course/${courseId}/setup`}
+            className="text-gray-500 hover:underline"
+          >
+            Wanting to start a new team formation?
+          </a>
+        ) : (
+          <span className="text-gray">
+            Your onboarding process is incomplete...
+          </span>
+        )}
+      </h2>
+
+      {completionPercentage !== 100 && (
+        <div className="flex flex-col sm:flex-row items-center sm:items-start sm:space-x-4 space-y-4 sm:space-y-0 mb-8">
+          <div className="w-20 h-20 md:w-12 md:h-12">
+            <CircularProgressBar
+              value={completionPercentage}
+              text={`${completionPercentage}`}
+            />
+          </div>
+          <div className="text-sm text-center sm:text-left">
+            <p>
+              You are <b>{completionPercentage}%</b> done with your current onboarding process.
+            </p>
+            <p className="font-semibold">
+              <span className="text-gray-800">Next step: </span>
+              <a
+                href={`/course/${courseId}/setup`}
+                className="underline hover:font-bold"
+              >
+                {nextStepTitle}
+              </a>
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default OnboardingProgress
diff --git a/src/app/(app)/course/[courseId]/home/(hooks)/calculateOnboardingCompletion.tsx b/src/app/(app)/course/[courseId]/home/(hooks)/calculateOnboardingCompletion.tsx
new file mode 100644
index 0000000..2ea0cfb
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(hooks)/calculateOnboardingCompletion.tsx
@@ -0,0 +1,18 @@
+import { useSetupSteps } from "@/app/(app)/course/[courseId]/setup/(hooks)/useSetupSteps"
+
+export const CalculateOnboardingCompletion = () => {
+  const { steps, isLoading } = useSetupSteps()
+  const enabledSteps = steps.filter((step) => step.enabled)
+
+  const completedSteps = enabledSteps.filter((step) => step.completed)
+
+  const completionPercentage = Math.round((completedSteps.length / enabledSteps.length) * 100)
+
+  const firstIncompleteStep = enabledSteps.find((step) => !step.completed)
+
+  return {
+    completionPercentage,
+    nextStepTitle: firstIncompleteStep ? firstIncompleteStep.title : null,
+    isLoading,
+  }
+}
diff --git a/src/app/(app)/course/[courseId]/home/(hooks)/useAttributes.tsx b/src/app/(app)/course/[courseId]/home/(hooks)/useAttributes.tsx
new file mode 100644
index 0000000..afb57c4
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(hooks)/useAttributes.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
+import { useQuery } from "@tanstack/react-query"
+
+interface PastAttributesResponse {
+  team_set_name: string;
+  formation_date: string;
+  total_attributes_used: number;
+  attributes: { name: string }[];
+}
+
+const usePastAttributesQuery = ({ courseId }: { courseId: number }) => {
+  const attributeQuery = useQuery<unknown, unknown, PastAttributesResponse>({
+    queryKey: [`courses/${courseId}/previous-attributes`],
+  })
+
+  return {
+    getPastAttributes: attributeQuery.refetch,
+    ...attributeQuery,
+  }
+}
+
+export const usePastAttributes = () => {
+  const { courseId } = useCourse()
+  const { data, isLoading, error, getPastAttributes } = usePastAttributesQuery({
+    courseId: Number(courseId),
+  })
+
+  const formattedData = data
+    ? {
+      ...data,
+      formation_date: new Date(data.formation_date)
+        .toISOString()
+        .split("T")[0]
+        .replace(/-/g, "/"),
+    }
+    : undefined
+
+  return {
+    data: formattedData,
+    isLoading,
+    error,
+    refetch: getPastAttributes,
+  }
+}
diff --git a/src/app/(app)/course/[courseId]/home/(hooks)/useHandleErrors.ts b/src/app/(app)/course/[courseId]/home/(hooks)/useHandleErrors.ts
new file mode 100644
index 0000000..56fd2df
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(hooks)/useHandleErrors.ts
@@ -0,0 +1,26 @@
+import { useToast } from "@/hooks/use-toast"
+import { useEffect } from "react"
+
+interface ErrorState {
+  totalStudentsError?: any;
+  pastAttributesError?: any;
+}
+
+export const useHandleErrors = ({ totalStudentsError, pastAttributesError }: ErrorState) => {
+  const { toast } = useToast()
+
+  useEffect(() => {
+    if (totalStudentsError) {
+      toast({
+        title: "Error fetching students",
+        description: "There was an error fetching the number of students enrolled on your LMS.",
+      })
+    }
+    if (pastAttributesError) {
+      toast({
+        title: "Error fetching attributes",
+        description: "There was an error fetching the attributes used in previous team formation.",
+      })
+    }
+  }, [totalStudentsError, pastAttributesError, toast])
+}
diff --git a/src/app/(app)/course/[courseId]/home/(hooks)/useTotalStudents.tsx b/src/app/(app)/course/[courseId]/home/(hooks)/useTotalStudents.tsx
new file mode 100644
index 0000000..3968b75
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/(hooks)/useTotalStudents.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
+import { useQuery } from "@tanstack/react-query"
+
+const useTotalStudentsQuery = ({ courseId }: { courseId: number }) => {
+  const studentQuery = useQuery<
+    unknown,
+    unknown,
+    { total_students: number; opted_in_students: number }
+  >({
+    queryKey: [`courses/${courseId}/student-counts`],
+  })
+
+  return {
+    getTotalStudentsAsync: studentQuery.refetch,
+    ...studentQuery,
+  }
+}
+
+export const useTotalStudents = () => {
+  const { courseId } = useCourse()
+  const { data, isLoading, error, getTotalStudentsAsync } = useTotalStudentsQuery({
+    courseId: Number(courseId),
+  })
+
+  return {
+    totalStudents: data?.total_students ?? 0,
+    optedInStudents: data?.opted_in_students ?? 0,
+    isLoading,
+    error,
+    refetch: getTotalStudentsAsync,
+  }
+}
diff --git a/src/app/(app)/course/[courseId]/home/page.tsx b/src/app/(app)/course/[courseId]/home/page.tsx
new file mode 100644
index 0000000..6cc629a
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/home/page.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { formatDate } from "@/../utils/format-date"
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
+import PageView from "@/components/views/Page"
+import { ReloadIcon } from "@radix-ui/react-icons"
+import AttributesUsed from "./(components)/AttributesUsed"
+import InfoSection from "./(components)/InfoSection"
+import OnboardingProgress from "./(components)/OnboardingProgress"
+import { CalculateOnboardingCompletion } from "./(hooks)/calculateOnboardingCompletion"
+import { usePastAttributes } from "./(hooks)/useAttributes"
+import { useHandleErrors } from "./(hooks)/useHandleErrors"
+import { useTotalStudents } from "./(hooks)/useTotalStudents"
+
+const HomePage = () => {
+  const { courseId } = useCourse()
+  const { completionPercentage, nextStepTitle, isLoading: isLoadingOnboarding } = CalculateOnboardingCompletion()
+  const { totalStudents, optedInStudents, isLoading: isLoadingStudents, error: totalStudentsError } = useTotalStudents()
+  const { data: pastAttributes, isLoading: isLoadingAttributes, error: pastAttributesError } = usePastAttributes()
+  useHandleErrors({ totalStudentsError, pastAttributesError })
+
+  const isLoading = isLoadingOnboarding || isLoadingStudents || isLoadingAttributes
+
+  const signUpStats = [
+    { label: "Students Enrolled on Your LMS", value: totalStudents },
+    { label: "Total Team Formation Acceptions", value: optedInStudents },
+  ]
+
+  const previousTeamFormation = [
+    { label: "Number of Adopted Attributes", value: pastAttributes?.total_attributes_used || 0 },
+    { label: "Team Formation Date", value: pastAttributes ? formatDate(pastAttributes.formation_date) : "N/A" },
+  ]
+
+  return (
+    <PageView title={"Your dashboard,"}>
+      {isLoading ? (
+        <div className="flex justify-center items-center h-48">
+          <ReloadIcon className="mr-2 h-10 w-10 animate-spin text-gray-500" />
+        </div>
+      ) : (
+        <>
+          <OnboardingProgress
+            completionPercentage={completionPercentage}
+            nextStepTitle={nextStepTitle ?? "No next step"}
+            courseId={courseId}
+          />
+          <InfoSection title="Sign up Stats" items={signUpStats} />
+          <InfoSection title="Previous Team Formation" items={previousTeamFormation} />
+          <AttributesUsed attributes={pastAttributes?.attributes ?? []} />
+        </>
+      )}
+    </PageView>
+  )
+}
+
+export default HomePage
diff --git a/src/app/(app)/course/[courseId]/page.tsx b/src/app/(app)/course/[courseId]/page.tsx
index becb379..d3ecb63 100644
--- a/src/app/(app)/course/[courseId]/page.tsx
+++ b/src/app/(app)/course/[courseId]/page.tsx
@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation"
 
 const CourseHomepage = async ({ params }: { params: { courseId: string } }) => {
-  redirect(`/course/${params.courseId}/setup`)
+  redirect(`/course/${params.courseId}/home`)
 }
 
 export default CourseHomepage
diff --git a/src/app/(app)/course/[courseId]/setup/page.tsx b/src/app/(app)/course/[courseId]/setup/page.tsx
index 30b3dd2..2d51fba 100644
--- a/src/app/(app)/course/[courseId]/setup/page.tsx
+++ b/src/app/(app)/course/[courseId]/setup/page.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import React from "react"
-import PageView from "@/components/views/Page"
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
 import { SetupStepDetailCard } from "@/app/(app)/course/[courseId]/setup/(components)/SetupStepDetailCard"
 import { useSetupSteps } from "@/app/(app)/course/[courseId]/setup/(hooks)/useSetupSteps"
-import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
+import PageView from "@/components/views/Page"
+
 
 const SetupPage = () => {
   const { steps, addedComponents } = useSetupSteps()
@@ -13,7 +13,7 @@ const SetupPage = () => {
     <PageView
       title={"Onboarding"}
       breadcrumbs={[
-        { title: "Home", href: "/" },
+        { title: "Home", href: `/course/${courseId}/home` },
         { title: "Onboarding", href: `course/${courseId}/setup` },
       ]}
     >
diff --git a/src/app/(app)/course/[courseId]/students/page.tsx b/src/app/(app)/course/[courseId]/students/page.tsx
index c0dd196..ef2f091 100644
--- a/src/app/(app)/course/[courseId]/students/page.tsx
+++ b/src/app/(app)/course/[courseId]/students/page.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
 import PageView from "@/components/views/Page"
 import { useImportStudentGradebookData } from "@/hooks/use-import-student-gradebook-data"
 import { useImportStudentsFromLms } from "@/hooks/use-import-students-from-lms"
@@ -15,6 +16,7 @@ export default function StudentsPage() {
 }
 
 const StudentsPageView = () => {
+  const { courseId } = useCourse()
   const { refetch } = useStudents()
 
   const {
@@ -32,7 +34,7 @@ const StudentsPageView = () => {
     <PageView
       title="Students"
       breadcrumbs={[
-        { title: "Home", href: "/" },
+        { title: "Home", href: `/course/${courseId}/home` },
         { title: "Students", href: "/students" },
       ]}
       actions={[
diff --git a/src/app/(app)/course/[courseId]/team-sets/page.tsx b/src/app/(app)/course/[courseId]/team-sets/page.tsx
index bf7744d..8a5821d 100644
--- a/src/app/(app)/course/[courseId]/team-sets/page.tsx
+++ b/src/app/(app)/course/[courseId]/team-sets/page.tsx
@@ -1,15 +1,15 @@
 "use client"
 
-import PageView from "@/components/views/Page"
-import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
-import { useListTeamSets } from "@/hooks/use-list-team-sets"
-import { DataTable } from "@/components/ui/data-table"
-import React, { useState } from "react"
 import { TeamSet } from "@/_temp_types/teamSet"
+import { useCourse } from "@/app/(app)/course/[courseId]/(hooks)/useCourse"
+import { GenerateTeamsAttributeSelector } from "@/app/(app)/course/[courseId]/components/GenerateTeamsAttributeSelector"
 import { columns } from "@/app/(app)/course/[courseId]/team-sets/columns"
-import { useRouter } from "next/navigation"
+import { DataTable } from "@/components/ui/data-table"
+import PageView from "@/components/views/Page"
 import { useGenerateTeams } from "@/hooks/use-generate-teams"
-import { GenerateTeamsAttributeSelector } from "@/app/(app)/course/[courseId]/components/GenerateTeamsAttributeSelector"
+import { useListTeamSets } from "@/hooks/use-list-team-sets"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
 
 export default function TeamSetListPage() {
   const { courseId } = useCourse()
@@ -29,7 +29,7 @@ export default function TeamSetListPage() {
     <PageView
       title={"Team sets"}
       breadcrumbs={[
-        { title: "Home", href: "/" },
+        { title: "Home", href: `/course/${courseId}/home` },
         { title: "Team sets", href: `/course/${courseId}/team-sets/` },
       ]}
       actions={[
diff --git a/src/app/courses/page.tsx b/src/app/courses/page.tsx
new file mode 100644
index 0000000..35ed77b
--- /dev/null
+++ b/src/app/courses/page.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import { useAuthUser } from "@/app/(providers)/auth-user-provider"
+import Logo from "@/components/Logo"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  NavigationMenu,
+} from "@/components/ui/navigation-menu"
+import { Separator } from "@/components/ui/separator"
+import { Text } from "@/components/ui/text"
+import { useLogout } from "@/hooks/use-logout"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+
+import { ReloadIcon } from "@radix-ui/react-icons"
+
+export default function CoursesPage() {
+  const { authUser } = useAuthUser()
+  const { logoutSync } = useLogout()
+  const router = useRouter()
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (authUser?.course_memberships) {
+      setLoading(false)
+    }
+  }, [authUser])
+
+  return (
+    <>
+      <NavigationMenu className="container my-4 mx-0 min-w-full flex justify-between gap-4 sticky border-1">
+        <div className="flex gap-2 items-center">
+          <Link href="/">
+            <Logo />
+          </Link>
+          <Text element="p">|</Text>
+          <h2>Teamable</h2>
+        </div>
+        <div className="flex gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              {authUser ? (
+                <Avatar>
+                  <AvatarFallback>
+                    {authUser.username[0].toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+              ) : (
+                <Avatar className="animate-pulse">
+                  <AvatarFallback></AvatarFallback>
+                </Avatar>
+              )}
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={8}>
+              <DropdownMenuItem onClick={logoutSync}>Logout</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </NavigationMenu>
+      <Separator />
+      <div className="w-full h-screen px-6 sm:px-0">
+        <div className="hidden md:block m-12">
+          <div className="min-h-screen pb-8">
+            <h1 className="text-foreground scroll-m-20 pb-2 font-semibold tracking-tight first:mt-0 text-2xl lg:text-3xl border-0 mb-4">Your Courses</h1>
+            {loading ? (
+              <div className="flex justify-center items-center h-48">
+                <ReloadIcon className="mr-2 h-10 w-10 animate-spin text-gray-500" />
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
+                {authUser?.course_memberships.map((membership) => (
+                  <Card
+                    key={membership.id}
+                    className="w-full h-full pb-14 cursor-pointer hover:bg-gray-100 transition"
+                    onClick={() => router.push(`/course/${membership.id}/home`)}
+                  >
+                    <CardHeader>
+                      <CardTitle className="font-semibold text-base lg:text-xl">
+                        {membership.name}
+                      </CardTitle>
+                    </CardHeader>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="md:hidden mt-4">
+          <h1 className="text-foreground scroll-m-20 pb-2 font-semibold tracking-tight first:mt-0 text-2xl lg:text-3xl border-0 m-4">Your Courses</h1>
+          {loading ? (
+            <div className="flex justify-center items-center h-48">
+              <ReloadIcon className="mr-2 h-10 w-10 animate-spin text-gray-500" />
+            </div>
+          ) : (
+            <div className="w-full flex flex-col items-center">
+              {authUser?.course_memberships.map((membership) => (
+                <Card
+                  key={membership.id}
+                  className="w-[350px] m-2 pb-14"
+                  onClick={() => router.push(`/course/${membership.id}/home`)}
+                >
+                  <CardHeader>
+                    <CardTitle className="font-semibold text-lg lg:text-2xl">
+                      {membership.name}
+                    </CardTitle>
+                  </CardHeader>
+                </Card>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f463bc5..dff0144 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
-import { redirect } from "next/navigation"
-import { ROUTES } from "@/routes"
 import { authUserQueryFn } from "@/hooks/use-auth-user-query"
+import { ROUTES } from "@/routes"
+import { redirect } from "next/navigation"
 import { getTokenAuthHeaderServer } from "../../utils/auth-server"
 
 export default async function Home() {
@@ -10,5 +10,5 @@ export default async function Home() {
   if (!user) redirect(ROUTES.SIGN_UP)
   if (!user.course_memberships.length) redirect(ROUTES.AUTH_ERROR)
 
-  redirect(`/course/${user.course_memberships[0].course}/setup`)
+  redirect(`/courses`)
 }
diff --git a/src/components/ui/circular-progress-bar.tsx b/src/components/ui/circular-progress-bar.tsx
new file mode 100644
index 0000000..e363047
--- /dev/null
+++ b/src/components/ui/circular-progress-bar.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import React from "react"
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar"
+import "react-circular-progressbar/dist/styles.css"
+
+const progressBarStyles = buildStyles({
+  rotation: -0.5,
+  strokeLinecap: "round",
+  textSize: "24px",
+  pathColor: "#000",
+  textColor: "#000",
+  trailColor: "#e6e6e6",
+})
+
+interface CircularProgressProps {
+  value: number;
+  text: string;
+}
+
+const CircularProgressBar: React.FC<CircularProgressProps> = ({ value, text }) => {
+  return (
+    <CircularProgressbar value={value} text={text} styles={progressBarStyles} />
+  )
+}
+
+export default CircularProgressBar
diff --git a/src/hooks/use-auth-user-query.ts b/src/hooks/use-auth-user-query.ts
index 7eee83d..ea987a7 100644
--- a/src/hooks/use-auth-user-query.ts
+++ b/src/hooks/use-auth-user-query.ts
@@ -1,5 +1,5 @@
-import { useQuery } from "@tanstack/react-query"
 import { AuthUser } from "@/_temp_types/user"
+import { useQuery } from "@tanstack/react-query"
 import { getTokenAuthHeader } from "../../utils/auth"
 
 export const useAuthUserQuery = () => {
@@ -25,6 +25,7 @@ export const authUserQueryFn = async ({
       },
     },
   )
+
   if (res.status === 401) return null
   const data = await res.json()
   if (!res.ok) throw data
diff --git a/utils/format-date.ts b/utils/format-date.ts
new file mode 100644
index 0000000..c716e74
--- /dev/null
+++ b/utils/format-date.ts
@@ -0,0 +1,2 @@
+export const formatDate = (dateString: string) =>
+  dateString.split("T")[0].replace(/-/g, "/")
diff --git a/yarn.lock b/yarn.lock
index d42542f..bd4890e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6381,6 +6381,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-circular-progressbar@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz#99e5ae499c21de82223b498289e96f66adb8fa3a"
+  integrity sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==
+
 react-dom@^18:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"