diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
index e61dc03..b550167 100644
--- a/frontend/src/components/app-sidebar.tsx
+++ b/frontend/src/components/app-sidebar.tsx
@@ -4,6 +4,7 @@ import {
   IconDashboard,
   IconFileAi,
   IconFileDescription,
+  IconList,
   IconServer,
 } from "@tabler/icons-react";
 
@@ -34,6 +35,11 @@ const data = {
       url: "/server_list",
       icon: IconServer,
     },
+    {
+      title: "Job List",
+      url: "/job_event_list",
+      icon: IconList,
+    },
   ],
   navClouds: [
     {
diff --git a/frontend/src/models/job_event.ts b/frontend/src/models/job_event.ts
new file mode 100644
index 0000000..8641673
--- /dev/null
+++ b/frontend/src/models/job_event.ts
@@ -0,0 +1,7 @@
+export interface JobEvent {
+  id: number;
+  job_name: string;
+  event_type: string;
+  event_data?: string | null;
+  created_at?: string | null;
+}
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index 57311f4..1795782 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as Server_listRouteImport } from './routes/server_list'
+import { Route as Job_event_listRouteImport } from './routes/job_event_list'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ServerServerIdRouteImport } from './routes/server.$serverId'
 
@@ -18,6 +19,11 @@ const Server_listRoute = Server_listRouteImport.update({
   path: '/server_list',
   getParentRoute: () => rootRouteImport,
 } as any)
+const Job_event_listRoute = Job_event_listRouteImport.update({
+  id: '/job_event_list',
+  path: '/job_event_list',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -31,30 +37,39 @@ const ServerServerIdRoute = ServerServerIdRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/job_event_list': typeof Job_event_listRoute
   '/server_list': typeof Server_listRoute
   '/server/$serverId': typeof ServerServerIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/job_event_list': typeof Job_event_listRoute
   '/server_list': typeof Server_listRoute
   '/server/$serverId': typeof ServerServerIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/job_event_list': typeof Job_event_listRoute
   '/server_list': typeof Server_listRoute
   '/server/$serverId': typeof ServerServerIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/server_list' | '/server/$serverId'
+  fullPaths: '/' | '/job_event_list' | '/server_list' | '/server/$serverId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/server_list' | '/server/$serverId'
-  id: '__root__' | '/' | '/server_list' | '/server/$serverId'
+  to: '/' | '/job_event_list' | '/server_list' | '/server/$serverId'
+  id:
+    | '__root__'
+    | '/'
+    | '/job_event_list'
+    | '/server_list'
+    | '/server/$serverId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  Job_event_listRoute: typeof Job_event_listRoute
   Server_listRoute: typeof Server_listRoute
   ServerServerIdRoute: typeof ServerServerIdRoute
 }
@@ -68,6 +83,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof Server_listRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/job_event_list': {
+      id: '/job_event_list'
+      path: '/job_event_list'
+      fullPath: '/job_event_list'
+      preLoaderRoute: typeof Job_event_listRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -87,6 +109,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  Job_event_listRoute: Job_event_listRoute,
   Server_listRoute: Server_listRoute,
   ServerServerIdRoute: ServerServerIdRoute,
 }
diff --git a/frontend/src/routes/job_event_list.tsx b/frontend/src/routes/job_event_list.tsx
new file mode 100644
index 0000000..c26de1f
--- /dev/null
+++ b/frontend/src/routes/job_event_list.tsx
@@ -0,0 +1,62 @@
+import { Card } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { JobEvent } from "@/models/job_event";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/job_event_list")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { data: jobEvents } = useQuery({
+    queryKey: ["job_events"],
+    queryFn: async () => {
+      const response = await fetch("/api/job_events");
+      return (await response.json()) as JobEvent[];
+    },
+  });
+
+  return (
+    <div className="p-2 flex justify-center items-center w-full">
+      <Card className="w-full max-w-225 p-2">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Job Name</TableHead>
+              <TableHead>Event Type</TableHead>
+              <TableHead>Event Data</TableHead>
+              <TableHead className="text-right">Date</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {jobEvents?.map((job) => (
+              <TableRow key={job.id} className="cursor-pointer">
+                <TableCell className="font-medium">{job.job_name}</TableCell>
+                <TableCell>{job.event_type}</TableCell>
+                <TableCell>{job.event_data}</TableCell>
+                <TableCell className="text-right">
+                  {new Date(job.created_at ?? "0").toLocaleString()}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total Jobs</TableCell>
+              <TableCell className="text-right">{jobEvents?.length}</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </Card>
+    </div>
+  );
+}