diff --git a/frontend/package.json b/frontend/package.json
index d2f18a9..2d0d218 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,10 +17,13 @@
     "vite-plugin-solid": "^2.8.2"
   },
   "dependencies": {
+    "@solid-primitives/keyboard": "^1.2.8",
     "@solidjs/router": "^0.13.2",
+    "@thisbeyond/solid-select": "^0.14.0",
     "@vercel/analytics": "^1.2.0",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.8.11",
     "solid-toast": "^0.5.0"
-  }
+  },
+  "packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 2268d4d..0cb58ee 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,12 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@solid-primitives/keyboard':
+        specifier: ^1.2.8
+        version: 1.2.8(solid-js@1.8.11)
       '@solidjs/router':
         specifier: ^0.13.2
         version: 0.13.2(solid-js@1.8.11)
+      '@thisbeyond/solid-select':
+        specifier: ^0.14.0
+        version: 0.14.0(solid-js@1.8.11)
       '@vercel/analytics':
         specifier: ^1.2.0
-        version: 1.2.0
+        version: 1.2.0(react@18.3.1)
       solid-icons:
         specifier: ^1.1.0
         version: 1.1.0(solid-js@1.8.11)
@@ -29,7 +35,7 @@ importers:
         version: 1.70.0
       solid-devtools:
         specifier: ^0.29.2
-        version: 0.29.2(solid-js@1.8.11)(vite@4.5.3)
+        version: 0.29.2(solid-js@1.8.11)(vite@4.5.3(sass@1.70.0))
       typescript:
         specifier: ^5.3.3
         version: 5.3.3
@@ -38,7 +44,7 @@ importers:
         version: 4.5.3(sass@1.70.0)
       vite-plugin-solid:
         specifier: ^2.8.2
-        version: 2.8.2(solid-js@1.8.11)(vite@4.5.3)
+        version: 2.8.2(solid-js@1.8.11)(vite@4.5.3(sass@1.70.0))
 
 packages:
 
@@ -408,8 +414,13 @@ packages:
     peerDependencies:
       solid-js: ^1.6.12
 
-  '@solid-primitives/keyboard@1.2.6':
-    resolution: {integrity: sha512-ZbXkzAwFs+6hyaZ2hT9uQ38iPZzGTjV6kWvVvJ3BDfKASg0dDDuhEZRKmpkmpLfnqOabV58BUkASJWMAA4dZCg==}
+  '@solid-primitives/event-listener@2.3.3':
+    resolution: {integrity: sha512-DAJbl+F0wrFW2xmcV8dKMBhk9QLVLuBSW+TR4JmIfTaObxd13PuL7nqaXnaYKDWOYa6otB00qcCUIGbuIhSUgQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/keyboard@1.2.8':
+    resolution: {integrity: sha512-pJtcbkjozS6L1xvTht9rPpyPpX55nAkfBzbFWdf3y0Suwh6qClTibvvObzKOf7uzQ+8aZRDH4LsoGmbTKXtJjQ==}
     peerDependencies:
       solid-js: ^1.6.12
 
@@ -438,6 +449,11 @@ packages:
     peerDependencies:
       solid-js: ^1.6.12
 
+  '@solid-primitives/rootless@1.4.5':
+    resolution: {integrity: sha512-GFJE9GC3ojx0aUKqAUZmQPyU8fOVMtnVNrkdk2yS4kd17WqVSpXpoTmo9CnOwA+PG7FTzdIkogvfLQSLs4lrww==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
   '@solid-primitives/scheduled@1.4.2':
     resolution: {integrity: sha512-duKaugDQtPk0v6MnkBuEalWk66/vA2G7zzoimQEvmUdh2+K2o8t908HIfI2NdBfwakQMQBV4epE3TFeN2Vsveg==}
     peerDependencies:
@@ -463,11 +479,21 @@ packages:
     peerDependencies:
       solid-js: ^1.6.12
 
+  '@solid-primitives/utils@6.2.3':
+    resolution: {integrity: sha512-CqAwKb2T5Vi72+rhebSsqNZ9o67buYRdEJrIFzRXz3U59QqezuuxPsyzTSVCacwS5Pf109VRsgCJQoxKRoECZQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
   '@solidjs/router@0.13.2':
     resolution: {integrity: sha512-zPlQUXaaUMFzz70SNN8scITooBaJyvIJci3ilyHUBXr9+mzEJGCUSohRJx/VXKo9+p+HEBHY48GnChiPYfLsjg==}
     peerDependencies:
       solid-js: ^1.8.6
 
+  '@thisbeyond/solid-select@0.14.0':
+    resolution: {integrity: sha512-ecq4U3Vnc/nJbU84ARuPg2scNuYt994ljF5AmBlzuZW87x43mWiGJ5hEWufIJJMpDT6CcnCIx/xbrdDkaDEHQw==}
+    peerDependencies:
+      solid-js: ^1.5
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -634,6 +660,10 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -667,6 +697,10 @@ packages:
     resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -1125,7 +1159,7 @@ snapshots:
       '@solid-primitives/cursor': 0.0.112(solid-js@1.8.11)
       '@solid-primitives/event-bus': 1.0.9(solid-js@1.8.11)
       '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11)
-      '@solid-primitives/keyboard': 1.2.6(solid-js@1.8.11)
+      '@solid-primitives/keyboard': 1.2.8(solid-js@1.8.11)
       '@solid-primitives/platform': 0.1.1(solid-js@1.8.11)
       '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11)
       '@solid-primitives/scheduled': 1.4.2(solid-js@1.8.11)
@@ -1169,11 +1203,16 @@ snapshots:
       '@solid-primitives/utils': 6.2.2(solid-js@1.8.11)
       solid-js: 1.8.11
 
-  '@solid-primitives/keyboard@1.2.6(solid-js@1.8.11)':
+  '@solid-primitives/event-listener@2.3.3(solid-js@1.8.11)':
     dependencies:
-      '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11)
-      '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11)
-      '@solid-primitives/utils': 6.2.2(solid-js@1.8.11)
+      '@solid-primitives/utils': 6.2.3(solid-js@1.8.11)
+      solid-js: 1.8.11
+
+  '@solid-primitives/keyboard@1.2.8(solid-js@1.8.11)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.3.3(solid-js@1.8.11)
+      '@solid-primitives/rootless': 1.4.5(solid-js@1.8.11)
+      '@solid-primitives/utils': 6.2.3(solid-js@1.8.11)
       solid-js: 1.8.11
 
   '@solid-primitives/media@2.2.6(solid-js@1.8.11)':
@@ -1206,6 +1245,11 @@ snapshots:
       '@solid-primitives/utils': 6.2.2(solid-js@1.8.11)
       solid-js: 1.8.11
 
+  '@solid-primitives/rootless@1.4.5(solid-js@1.8.11)':
+    dependencies:
+      '@solid-primitives/utils': 6.2.3(solid-js@1.8.11)
+      solid-js: 1.8.11
+
   '@solid-primitives/scheduled@1.4.2(solid-js@1.8.11)':
     dependencies:
       solid-js: 1.8.11
@@ -1230,10 +1274,18 @@ snapshots:
     dependencies:
       solid-js: 1.8.11
 
+  '@solid-primitives/utils@6.2.3(solid-js@1.8.11)':
+    dependencies:
+      solid-js: 1.8.11
+
   '@solidjs/router@0.13.2(solid-js@1.8.11)':
     dependencies:
       solid-js: 1.8.11
 
+  '@thisbeyond/solid-select@0.14.0(solid-js@1.8.11)':
+    dependencies:
+      solid-js: 1.8.11
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.22.5
@@ -1255,9 +1307,11 @@ snapshots:
     dependencies:
       '@babel/types': 7.22.5
 
-  '@vercel/analytics@1.2.0':
+  '@vercel/analytics@1.2.0(react@18.3.1)':
     dependencies:
       server-only: 0.0.1
+    optionalDependencies:
+      react: 18.3.1
 
   ansi-styles@3.2.1:
     dependencies:
@@ -1401,6 +1455,11 @@ snapshots:
 
   json5@2.2.3: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+    optional: true
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -1427,6 +1486,11 @@ snapshots:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+    optional: true
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -1451,7 +1515,7 @@ snapshots:
 
   server-only@0.0.1: {}
 
-  solid-devtools@0.29.2(solid-js@1.8.11)(vite@4.5.3):
+  solid-devtools@0.29.2(solid-js@1.8.11)(vite@4.5.3(sass@1.70.0)):
     dependencies:
       '@babel/core': 7.23.7
       '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7)
@@ -1459,6 +1523,7 @@ snapshots:
       '@solid-devtools/debugger': 0.23.3(solid-js@1.8.11)
       '@solid-devtools/shared': 0.13.1(solid-js@1.8.11)
       solid-js: 1.8.11
+    optionalDependencies:
       vite: 4.5.3(sass@1.70.0)
     transitivePeerDependencies:
       - supports-color
@@ -1506,7 +1571,7 @@ snapshots:
 
   validate-html-nesting@1.2.2: {}
 
-  vite-plugin-solid@2.8.2(solid-js@1.8.11)(vite@4.5.3):
+  vite-plugin-solid@2.8.2(solid-js@1.8.11)(vite@4.5.3(sass@1.70.0)):
     dependencies:
       '@babel/core': 7.23.7
       '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7)
@@ -1516,7 +1581,7 @@ snapshots:
       solid-js: 1.8.11
       solid-refresh: 0.6.3(solid-js@1.8.11)
       vite: 4.5.3(sass@1.70.0)
-      vitefu: 0.2.5(vite@4.5.3)
+      vitefu: 0.2.5(vite@4.5.3(sass@1.70.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -1525,12 +1590,12 @@ snapshots:
       esbuild: 0.18.20
       postcss: 8.4.33
       rollup: 3.29.4
-      sass: 1.70.0
     optionalDependencies:
       fsevents: 2.3.3
+      sass: 1.70.0
 
-  vitefu@0.2.5(vite@4.5.3):
-    dependencies:
+  vitefu@0.2.5(vite@4.5.3(sass@1.70.0)):
+    optionalDependencies:
       vite: 4.5.3(sass@1.70.0)
 
   yallist@3.1.1: {}
diff --git a/frontend/src/components/PDFTableBody.tsx b/frontend/src/components/PDFTableBody.tsx
new file mode 100644
index 0000000..5229e6e
--- /dev/null
+++ b/frontend/src/components/PDFTableBody.tsx
@@ -0,0 +1,110 @@
+import { AiFillCloseCircle } from "solid-icons/ai";
+import { FaSolidFilePdf as PDFIcon } from "solid-icons/fa";
+import COURSE_CODE_MAP from "../data/courses.json";
+import { Component } from "solid-js";
+import { createStore } from "solid-js/store";
+import { IAdminQuestionPaperResult, approvalStatus } from "../types/types";
+import { IoCheckmarkCircle } from "solid-icons/io";
+import { Select, createOptions } from "@thisbeyond/solid-select";
+import { fileNamer } from "../utils/fileNamer";
+import { getCodefromCourse, getCourseFromCode } from "../utils/autofillData";
+
+type props = {
+    questionPaper: IAdminQuestionPaperResult;
+}
+
+export const ListElement: Component<props> = (props) => {
+    const [questionPaperDetails, setQuestionPaperDetails] = createStore<IAdminQuestionPaperResult>(props.questionPaper);
+
+    function toggleApproval(approvalStatus: boolean) {
+        let confirmed = confirm(`Are you sure you want to ${approvalStatus ? 'DISAPPROVE' : 'APPROVE'} this paper?`);
+        if (confirmed) setQuestionPaperDetails("approval", !approvalStatus);
+    };
+
+    function whichButton (approvalStatus: boolean) {
+        if (approvalStatus) {
+            return (
+                <><IoCheckmarkCircle size="1.4rem"/> Approved</>
+            )
+        } else {
+            return (
+                <><AiFillCloseCircle  size="1.4rem"/> Not Approved</>
+            )
+        }
+    }
+
+    return (
+        <tr classList={{["qp-table-tr-pending"]: questionPaperDetails.approval === null ? true : false, ["qp-table-tr-approve"]: questionPaperDetails.approval === true, ["qp-table-tr-reject"]: questionPaperDetails.approval === false}}>
+            <td><Select
+                disabled={questionPaperDetails.approval}
+                class="select"
+                {...createOptions(Object.keys(COURSE_CODE_MAP))}
+                initialValue={questionPaperDetails.course_code}
+                onChange={(value) => {
+                    setQuestionPaperDetails("course_code", value);
+                    setQuestionPaperDetails("course_name", getCourseFromCode(value)!);
+                }}
+                />
+            </td>
+            <td><Select
+                disabled={questionPaperDetails.approval}
+                class="select"
+                {...createOptions(Object.values(COURSE_CODE_MAP))}
+                initialValue={questionPaperDetails.course_name}
+                onChange={(value) => {
+                    setQuestionPaperDetails("course_name", value);
+                    setQuestionPaperDetails("course_code", getCodefromCourse(value));
+                }}
+                />
+            </td>
+            <td><Select
+                disabled={questionPaperDetails.approval}
+                class="select"
+                // returns every year since 1951 till today as options for year dropdown
+                {...createOptions([...Array.from({length: new Date().getFullYear() - 1950}, (e, i) => (new Date().getFullYear() - i).toString())])}
+                initialValue={questionPaperDetails.year}
+                onChange={(value) => {
+                    setQuestionPaperDetails("year", value);
+                }}
+                />
+            </td>
+            <td><Select
+                disabled={questionPaperDetails.approval}
+                class="select"
+                {...createOptions(["endsem", "midsem"])}
+                initialValue={questionPaperDetails.exam}
+                onChange={(value) => {
+                    setQuestionPaperDetails("exam", value)
+                }}
+                />
+            </td>
+            <td><Select
+                disabled={questionPaperDetails.approval}
+                class="select"
+                {...createOptions(["autumn", "spring"])}
+                initialValue={questionPaperDetails.semester}
+                onChange={(value) => {
+                    setQuestionPaperDetails("semester", value)
+                }}
+                />
+            </td>
+            <td>
+                <a href={props.questionPaper.file_link} target="_blank" class="pdf-link">
+                    <PDFIcon size="1.4rem" />
+                    {fileNamer(questionPaperDetails)}
+                </a>
+            </td>
+            <td>
+                <button
+                    classList={{
+                        ["approve-button"]: questionPaperDetails.approval,
+                        ["reject-button"]: !questionPaperDetails.approval
+                    }}
+                    onClick={() => {
+                        toggleApproval(questionPaperDetails.approval);
+                    }}
+                >{whichButton(questionPaperDetails.approval)}</button>
+            </td>
+        </tr>
+    )
+}
diff --git a/frontend/src/components/PDFTableHead.tsx b/frontend/src/components/PDFTableHead.tsx
new file mode 100644
index 0000000..2ccea26
--- /dev/null
+++ b/frontend/src/components/PDFTableHead.tsx
@@ -0,0 +1,67 @@
+import { Component, For, createSignal } from "solid-js";
+import { IAdminQuestionPaperResult } from "../types/types";
+import { ListElement } from "./PDFTableBody";
+import { createStore } from "solid-js/store";
+
+type props =  {
+    QuestionPapers: IAdminQuestionPaperResult[];
+}
+
+export const PDFLister: Component<props> = (props) => {
+    const [reviewList, setReviewList] = createStore<IAdminQuestionPaperResult[]>(props.QuestionPapers);
+
+    const columns = [
+        {label: "Code", accessor: "course_code"},
+        {label: "Course Name", accessor: "course_name"},
+        {label: "Year", accessor: "year"},
+        {label: "Exam", accessor: "exam"},
+        {label: "Semester", accessor: "semester"},
+        {label: "FIle", accessor: "file_link"},
+        {label: "Approval", accessor: "approval"}
+    ]
+
+    const [sortField, setSortField] = createSignal<string>("");
+    const [order, setOrder] = createSignal<"asc" | "desc">("asc");
+
+    const handleSorting = (sortField: string, sortOrder: "asc" | "desc") => {
+      if (sortField) {
+          const sorted = [...reviewList].sort((a, b) => {
+            return (
+              a[sortField].toString().localeCompare(b[sortField].toString(), "en", {
+                numeric: true,
+              }) * (sortOrder === "asc" ? 1 : -1)
+            );
+          });
+          setReviewList(sorted);
+      }
+     }
+
+    const handleSortingChange = (accessor) => {
+        const sortOrder: "asc" | "desc" = ((accessor === sortField()) && (order() === "asc") ? "desc" : "asc");
+        setSortField(accessor);
+        setOrder(sortOrder);
+        handleSorting(accessor, sortOrder);
+    }
+
+    return (
+        <div class="pdf-lister">
+            <table class="qp-table">
+                <thead>
+                    <tr class="qp-table-row">
+                        <For each={columns}>{(column) => {
+                            return (
+                                <th id={column.accessor} onClick={() => handleSortingChange(column.accessor)}>{column.label}</th>
+                            )
+                        }}</For>
+                    </tr>
+                </thead>
+                <tbody>
+                     <For each={reviewList}>{(item) => (
+                         <ListElement questionPaper={item} />
+                     )}
+                     </For>
+                </tbody>
+            </table>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/data/courses.json b/frontend/src/data/courses.json
index 367e44f..e803ac1 100644
--- a/frontend/src/data/courses.json
+++ b/frontend/src/data/courses.json
@@ -226,7 +226,7 @@
     "GG31006": "IGNEOUS PETROLOGY",
     "GG38202": "FIELD GEOLOGY II",
     "CE68521": "SUMMER INTERNSHIP",
-    "CS10003": "PROGAMMING AND DATA STRUCTURES",
+    "CS10003": "PROGRAMMING AND DATA STRUCTURES",
     "AG60032": "CROP BREEDING AND BIOTECHNOLOGICAL APPLICATION",
     "AR60220": "PLANNING INFORMATICS",
     "BM63010": "MARKETING RESEARCH",
@@ -471,7 +471,7 @@
     "EE69205": "SIGNAL PROCESSING SYSTEMS DESIGN LABORATORY",
     "IM21008": "WORK SYSTEM DESIGN",
     "PH29202": "THERMAL PHYSICS LABORATORY",
-    "CS19003": "PROGAMMING AND DATA STRUCTURES LABORATORY",
+    "CS19003": "PROGRAMMING AND DATA STRUCTURES LABORATORY",
     "EC69218": "ANTENNA AND EMI/EMC LABORATORY",
     "EE68121": "SUMMER INTERNSHIP",
     "GG31004": "SEDIMENTOLOGY",
diff --git a/frontend/src/data/dummyQPs.ts b/frontend/src/data/dummyQPs.ts
new file mode 100644
index 0000000..ce025a2
--- /dev/null
+++ b/frontend/src/data/dummyQPs.ts
@@ -0,0 +1,27 @@
+import { IAdminQuestionPaperResult } from "../types/types";
+import { getCourseFromCode } from "../utils/autofillData";
+import COURSE_CODE_MAP from "./courses.json"
+
+const dataElements = 50;
+
+let files = ["./dummyPDFs/sample1.pdf", "./dummyPDFs/sample2.pdf", "./dummyPDFs/sample3.pdf", "./dummyPDFs/sample4.pdf", "./dummyPDFs/sample5.pdf"]
+
+const courses = Object.keys(COURSE_CODE_MAP);
+
+export let arr: IAdminQuestionPaperResult[] = [];
+
+for ( let i: number = 0; i < dataElements; i++){
+    let courseIndex = Math.floor(Math.random() * courses.length);
+    let qp: IAdminQuestionPaperResult = {
+        course_code: courses[courseIndex],
+        course_name: getCourseFromCode(courses[courseIndex])!,
+        id: i,
+        year: new Date().getFullYear() - (1 + Math.floor(Math.random() * 4)),
+        semester: Math.floor(Math.random() * 2) ? "spring" : "autumn",
+        exam: Math.floor(Math.random() * 2) ? "midsem" : "endsem",
+        approval: false,
+        reviewedBy: null,
+        file_link: files[Math.floor(Math.random() * 5)],
+    };
+    arr.push(qp);
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 87b41df..f0011de 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -8,6 +8,7 @@ import "./styles/styles.scss";
 
 import UploadPage from "./pages/UploadPage";
 import { OAuthPage } from "./pages/OAuth";
+import { AdminPage } from "./pages/AdminDashboard";
 
 const root = document.getElementById("root");
 
@@ -26,6 +27,7 @@ render(() => (
       <Route path="/" component={App} />
       <Route path="/upload" component={UploadPage} />
       <Route path="/oauth" component={OAuthPage} />
+      <Route path="/admin" component={AdminPage}/>
     </Router>
     <h3 class="meta-footer">Made with ❤️ and {"</>"} by <a href="https://github.com/metakgp/iqps-go" target="_blank">MetaKGP</a></h3>
   </>
diff --git a/frontend/src/pages/AdminDashboard.tsx b/frontend/src/pages/AdminDashboard.tsx
new file mode 100644
index 0000000..d0160b6
--- /dev/null
+++ b/frontend/src/pages/AdminDashboard.tsx
@@ -0,0 +1,24 @@
+import { Component } from "solid-js";
+import { PDFLister } from "../components/PDFTableHead";
+import { arr } from "../data/dummyQPs";
+import { A } from "@solidjs/router";
+
+export const AdminPage: Component = () => {
+  let user = "User";
+
+  return (
+    <div class="admin-page">
+      <div class="title">
+        <header>
+          <A href="#" class="admin">IQPS Admin Page</A>
+          <A href="/" class="search">Search</A>
+          <A href="/upload" class="upload">Upload</A>
+          <span class="user">Welcome {user}</span>
+        </header>
+      </div>
+      <div>
+        <PDFLister QuestionPapers={arr}/>
+      </div>
+     </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/styles/admin_page.scss b/frontend/src/styles/admin_page.scss
new file mode 100644
index 0000000..e1b7aa2
--- /dev/null
+++ b/frontend/src/styles/admin_page.scss
@@ -0,0 +1,158 @@
+@use "sass:color";
+
+.admin-page {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 5rem;
+
+    .select {
+        padding: 0.15rem 0.2rem;
+        margin: 0;
+        border-width: 1px;
+        border-color: rgba($fg-color, 0.23);
+
+        .solid-select-option {
+            &:hover {
+                background-color: $surface-2;
+            }
+
+            &[data-focused=true] {
+                color: $accent-complementary-lighter;
+                background-color: $surface-1;
+            }
+        }
+
+        .solid-select-list {
+            background-color: $surface-1;
+            border-radius: 10px;
+        }
+
+        &[data-disabled="true"] {
+            border: none;
+            background-color: transparent;
+            padding: 0;
+
+            .solid-select-control {
+                padding: 0;
+                background-color: transparent !important;
+            }
+        }
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .qp-table {
+        background-color: rgba($surface-1, 0.2);
+        border-radius: 10px;
+
+        table-layout: auto;
+        border-collapse: collapse;
+        margin-left: auto;
+        margin-right: auto;
+
+        caption {
+            padding-bottom: 10px;
+            font-weight: light;
+        }
+
+        th {
+            padding: 0.5rem;
+            text-align: left;
+            border-bottom: 1px solid rgba($fg-color, 0.2);
+
+            &:nth-child(1) {
+                border-radius: 5px 0 0 5px;
+            }
+
+            &:nth-last-child(1) {
+                border-radius: 0 5px 5px 0;
+            }
+        }
+
+        td {
+            :nth-child(1) {
+                text-align: left;
+            }
+
+            text-align: center;
+            padding: 0.5rem;
+        }
+
+        tr {
+            border: 1px solid transparent;
+            border-radius: 8px;
+        }
+    }
+
+    .approve-button, .reject-button {
+        background-color: inherit;
+        border: none;
+        padding: 0.2rem 0.5rem 0.2rem 0.35rem;
+        border-radius: 5px;
+
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .approve-button {
+        background-color: $approved-color;
+        color: black;
+
+        &:hover {
+            background-color: $approved-color-darker;
+        }
+    }
+
+    .reject-button {
+        color: $fg-color;
+        background-color: $rejected-color;
+
+        &:hover {
+            background-color: $rejected-color-darker;
+        }
+    }
+
+    .pdf-link {
+        display: flex;
+        gap: 5px;
+        align-items: center;
+
+        background-color: $accent-color;
+        color: $fg-color;
+        padding: 0.2rem 0.5rem;
+        border-radius: 5px;
+    }
+
+    .title {
+        overflow: hidden;
+        A {
+            float: left;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+            font-size: 17px;
+        }
+        A:hover {
+            text-decoration: underline;
+        }
+        A.admin {
+            background-color: $accent-color-darker;
+            color: $fg-color;
+        }
+        span.user {
+            float: right;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+            font-size: 17px;
+        }
+    }
+}
+
diff --git a/frontend/src/styles/styles.scss b/frontend/src/styles/styles.scss
index 9553928..b291a27 100644
--- a/frontend/src/styles/styles.scss
+++ b/frontend/src/styles/styles.scss
@@ -6,6 +6,8 @@
 @import "./search_results.scss";
 @import "./upload_page.scss";
 @import "./modal.scss";
+@import "@thisbeyond/solid-select/style.css";
+@import "../styles/admin_page.scss";
 
 .toast {
   background-color: $surface-1 !important;
@@ -92,7 +94,8 @@ a {
 }
 
 input,
-select {
+select,
+.select {
   width: 100%;
   padding: 8px 10px;
   margin-bottom: 1rem;
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index 3551658..5268d45 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -2,6 +2,18 @@ $accent-color: hsl(217, 80%, 40%);
 $accent-color-lighter: hsl(217, 80%, 60%);
 $accent-color-darker: hsl(217, 80%, 30%);
 $accent-color-disabled: hsl(217, 40%, 40%);
+
+$accent-complementary: hsl(37, 80%, 40%);
+$accent-complementary-lighter: hsl(37, 80%, 60%);
+$accent-complementary-darker: hsl(37, 80%, 30%);
+$accent-complementary-disabled: hsl(37, 40%, 30%);
+
+$approved-color: hsl(149, 80%, 40%);
+$approved-color-darker: hsl(149, 80%, 35%);
+
+$rejected-color: hsl(349, 70%, 45%);
+$rejected-color-darker: hsl(349, 70%, 40%);
+
 $bg-color: #0d0d0d;
 $surface-1: #413e3f;
 $surface-2: #4b4b4b;
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index 46f939d..d1ae251 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -34,3 +34,12 @@ interface IUploadResult {
 };
 
 export type UploadResults = IUploadResult[];
+
+export interface IAdminQuestionPaperResult extends IQuestionPaper {
+    id: number;
+    file_link: string;
+    approval: boolean;
+    reviewedBy: string | null;
+}
+
+export type QuestionPaperReviewResults = IAdminQuestionPaperResult[];
\ No newline at end of file
diff --git a/frontend/src/utils/autofillData.ts b/frontend/src/utils/autofillData.ts
index 36cad9e..efd0307 100644
--- a/frontend/src/utils/autofillData.ts
+++ b/frontend/src/utils/autofillData.ts
@@ -30,6 +30,10 @@ export function getCourseFromCode<K extends keyof typeof COURSE_CODE_MAP>(code:
     }
 };
 
+export function getCodefromCourse<K extends keyof typeof COURSE_CODE_MAP>(course: string): typeof COURSE_CODE_MAP[K] | null {
+    return Object.keys(COURSE_CODE_MAP).find((key) => COURSE_CODE_MAP[key] === course);
+};
+
 export const autofillData = (
     filename: string
 ): IQuestionPaper => {
diff --git a/frontend/src/utils/fileNamer.ts b/frontend/src/utils/fileNamer.ts
new file mode 100644
index 0000000..1c08ffe
--- /dev/null
+++ b/frontend/src/utils/fileNamer.ts
@@ -0,0 +1,7 @@
+import { IAdminQuestionPaperResult } from "../types/types";
+
+export function fileNamer (qp: IAdminQuestionPaperResult) {
+    let exam = qp.exam === "endsem" ? "E" : "M";
+    let sem = qp.semester === "autumn" ? "A" : "S";
+    return `${qp.course_code}_${exam}${sem}_${qp.year}.pdf`;
+}
\ No newline at end of file