diff --git a/frontend/src/api/useExam.ts b/frontend/src/api/useExam.ts
new file mode 100644
index 0000000..0154f66
--- /dev/null
+++ b/frontend/src/api/useExam.ts
@@ -0,0 +1,17 @@
+'use client'
+import useSWR, { Fetcher } from 'swr';
+import { Exam } from '@/types';
+
+const ENDPOINT = `${process.env.API_URL}/api/exams/`;
+
+const fetcher: Fetcher<Exam, string> = (...args) => fetch(...args).then(res => res.json())
+
+export default function useExam(examId: number) {
+    const { data, error, isLoading } = useSWR(ENDPOINT + examId, fetcher)
+
+    return {
+        exam: data,
+        isLoading,
+        isError: error
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/api/useQuestions.ts b/frontend/src/api/useQuestions.ts
new file mode 100644
index 0000000..f7e81fe
--- /dev/null
+++ b/frontend/src/api/useQuestions.ts
@@ -0,0 +1,17 @@
+'use client'
+import useSWR, { Fetcher } from 'swr';
+import { Question } from '@/types';
+
+const ENDPOINT = `${process.env.API_URL}/api/exams/`;
+
+const fetcher: Fetcher<Question[], string> = (...args) => fetch(...args).then(res => res.json())
+
+export default function useQuestions(examId: number) {
+    const { data, error, isLoading } = useSWR(ENDPOINT + examId +'/questions', fetcher)
+
+    return {
+        questions: data,
+        isLoading,
+        isError: error
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/courses/[courseCode]/exams/[examId]/page.tsx b/frontend/src/app/courses/[courseCode]/exams/[examId]/page.tsx
index 5e3d614..dc69cbc 100644
--- a/frontend/src/app/courses/[courseCode]/exams/[examId]/page.tsx
+++ b/frontend/src/app/courses/[courseCode]/exams/[examId]/page.tsx
@@ -1,21 +1,29 @@
-import { useMemo } from 'react';
+'use client'
+import useExam from '@/api/useExam';
+import useQuestions from '@/api/useQuestions';
+import Link from 'next/link';
 
 export default function Exam({ params }: { params: { courseCode: string, examId: number }}) {
-    const exam = useMemo(() => {
-        // query backend here
-        return {
-            examid: params.examId,
-            examyear: 2023,
-            examsemester: 1,
-            examtype: 'Final'
-        }
-    }, [params.examId])
+    const { exam, isLoading, isError } = useExam(params.examId);
+    const { questions, isLoading: isLoadingQuestions, isError: isErrorQuestions } = useQuestions(params.examId);
 
     return (
         <main>
-            <h1>{`${params.courseCode} ${exam.examtype}`}</h1>
-            <h2>{`${exam.examyear} Semester ${exam.examsemester}`}</h2>
-            There will be some questions here
+            <h1>{`${params.courseCode} ${exam?.examtype}`}</h1>
+            <h2>{`${exam?.examyear} Semester ${exam?.examsemester}`}</h2>
+            {isLoadingQuestions && <p>Loading...</p>}
+            {!isErrorQuestions && !isLoadingQuestions && questions?.map(question => (
+                <>
+                    <hr />
+                    <div key={question.questionid}>
+                        <Link href={`/courses/${params.courseCode}/exams/${question.questionid}`}>
+                            <h2>{question.questiontype}</h2>
+                        </Link>
+                        <p>{question.questiontext}</p>
+                    </div>
+                </>
+                ))
+            }
         </main>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index eeeba62..a9d181e 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -9,4 +9,11 @@ export type Exam = {
     examyear: number
     examsemester: number
     examtype: string
+}
+
+export type Question = {
+    questionid: number
+    questiontext: string
+    questiontype: string
+    questionpng: string
 }
\ No newline at end of file