diff --git a/app/src/app/job-listing/page.tsx b/app/src/app/job-listing/page.tsx
new file mode 100644
index 0000000..54a28ff
--- /dev/null
+++ b/app/src/app/job-listing/page.tsx
@@ -0,0 +1,10 @@
+import JobListingTable from "@/components/JobListing";
+
+export default function JobListing() {
+  return (
+    <div>
+      {" "}
+      <JobListingTable />
+    </div>
+  );
+}
diff --git a/app/src/components/JobListing.tsx b/app/src/components/JobListing.tsx
new file mode 100644
index 0000000..aa8ef13
--- /dev/null
+++ b/app/src/components/JobListing.tsx
@@ -0,0 +1,67 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@/components/ui/table";
+import { EyeIcon, Trash, Search, ListFilter } from "lucide-react";
+
+const JobListingTable = () => {
+  return (
+    <div className="p-6 m-4  bg-[#FAFAFA]">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-xl font-semibold">Job Listing</h3>
+        <button className="px-4 py-2 bg-[#3F37C9] text-white rounded hover:bg-blue-600">
+          New Job
+        </button>
+      </div>
+
+      <div className="flex justify-between items-center mb-4">
+        <div className="relative flex items-center">
+          <span className="absolute left-3 text-gray-400 pointer-events-none">
+            <Search className="w-5 h-5" />
+          </span>
+          <input
+            type="text"
+            placeholder="Search..."
+            className="w-64 py-2 pl-10 pr-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <button className="flex items-center px-3 py-2  text-black rounded ">
+          <ListFilter className="w-5 h-5" />
+        </button>
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">ID</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead>Job Title</TableHead>
+            <TableHead className="text-right">Action</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell className="font-medium">#1234</TableCell>
+            <TableCell>12 Dec 2024</TableCell>
+            <TableCell>Data Analyst</TableCell>
+            <TableCell className="text-right flex justify-end gap-4">
+              <button>
+                <EyeIcon className="h-5 w-5 text-blue-500 hover:text-blue-700" />
+              </button>
+              <button>
+                <Trash className="w-5 h-5 text-red-500 hover:text-red-700" />
+              </button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default JobListingTable;
diff --git a/app/src/components/ui/table.tsx b/app/src/components/ui/table.tsx
new file mode 100644
index 0000000..10ed42d
--- /dev/null
+++ b/app/src/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption
+};