diff --git a/web/package-lock.json b/web/package-lock.json
index f43461d95..770bede35 100644
Binary files a/web/package-lock.json and b/web/package-lock.json differ
diff --git a/web/package.json b/web/package.json
index f496d8a56..ffbb140b9 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@azure/monitor-opentelemetry": "^1.11.1",
     "@opentelemetry/exporter-jaeger": "^2.0.1",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
diff --git a/web/src/app/@sheet/(.)lists/[listId]/page.tsx b/web/src/app/@sheet/(.)lists/[listId]/page.tsx
new file mode 100644
index 000000000..9f505ccf1
--- /dev/null
+++ b/web/src/app/@sheet/(.)lists/[listId]/page.tsx
@@ -0,0 +1,17 @@
+import {
+  getFilterListDetails,
+  FilterListDetails,
+} from "@/services/get-filterlist-details";
+import { SheetContentRenderer } from "@/components/sheet-content-renderer";
+
+export default async function InterceptedListDetailsPage({
+  params,
+}: {
+  params: Promise<{ listId: string }>;
+}) {
+  const { listId: rawListId } = await params;
+  const listId = parseInt(rawListId, 10);
+  const list: FilterListDetails = await getFilterListDetails(listId);
+
+  return <SheetContentRenderer list={list} />;
+}
diff --git a/web/src/app/@sheet/default.tsx b/web/src/app/@sheet/default.tsx
new file mode 100644
index 000000000..6ddf1b76f
--- /dev/null
+++ b/web/src/app/@sheet/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index b0eb9be14..dbb94f558 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -17,8 +17,10 @@ const geistMono = Geist_Mono({
 
 export default function RootLayout({
   children,
+  sheet,
 }: Readonly<{
   children: React.ReactNode;
+  sheet: React.ReactNode;
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
@@ -37,6 +39,7 @@ export default function RootLayout({
           >
             <Header />
             <div className="flex-1 flex flex-col">{children}</div>
+            {sheet}
             <Footer />
           </div>
         </ThemeProvider>
diff --git a/web/src/app/lists/[listId]/page.tsx b/web/src/app/lists/[listId]/page.tsx
new file mode 100644
index 000000000..f2966411b
--- /dev/null
+++ b/web/src/app/lists/[listId]/page.tsx
@@ -0,0 +1,26 @@
+import {
+  getFilterListDetails,
+  FilterListDetails,
+} from "@/services/get-filterlist-details";
+
+export default async function ListDetailsPage({
+  params,
+}: {
+  params: Promise<{ listId: string }>;
+}) {
+  const { listId: rawListId } = await params;
+  const listId = parseInt(rawListId, 10);
+  const list: FilterListDetails = await getFilterListDetails(listId);
+
+  return (
+    <div className="container mx-auto py-10">
+      <h1 className="text-3xl font-bold mb-4">{list.name}</h1>
+      <p className="text-lg mb-6">{list.description}</p>
+
+      <p>Maintainers: {list.maintainerIds?.join(", ")}</p>
+      <p>Syntaxes: {list.syntaxIds?.join(", ")}</p>
+      <p>Languages: {list.languageIds?.join(", ")}</p>
+      <p>License: {list.licenseId}</p>
+    </div>
+  );
+}
diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.tsx
index f436794b3..9d3910672 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/web/src/components/filterlist-table/columns.tsx
@@ -6,6 +6,7 @@ import { BadgeCloud } from "@/components/badge-cloud";
 import { FilterList } from "@/services/get-filterlists";
 import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 const SortableHeader = ({
   column,
@@ -37,7 +38,9 @@ export const columns = [
       <SortableHeader column={column}>Name</SortableHeader>
     ),
     cell: (info) => (
-      <div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">{info.getValue()}</div>
+      <div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">
+        {info.getValue()}
+      </div>
     ),
     enableSorting: true,
     size: 200,
@@ -45,7 +48,9 @@ export const columns = [
   columnHelper.accessor((row) => row.description, {
     header: "Description",
     cell: (info) => (
-      <div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">{info.getValue()}</div>
+      <div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">
+        {info.getValue()}
+      </div>
     ),
     size: 400,
   }),
@@ -172,4 +177,14 @@ export const columns = [
     },
     size: 200,
   }),
+  columnHelper.display({
+    id: "actions",
+    cell: ({ row }) => {
+      return (
+        <Link href={`/lists/${row.original.id}`}>
+          <Button variant="ghost">View Details</Button>
+        </Link>
+      );
+    },
+  }),
 ];
diff --git a/web/src/components/sheet-content-renderer.tsx b/web/src/components/sheet-content-renderer.tsx
new file mode 100644
index 000000000..2d1a49da4
--- /dev/null
+++ b/web/src/components/sheet-content-renderer.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { FilterListDetails } from "@/services/get-filterlist-details";
+
+export function SheetContentRenderer({
+  list,
+}: {
+  list: FilterListDetails | null;
+}) {
+  const router = useRouter();
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.back();
+    }
+  };
+
+  return (
+    <Sheet open={true} onOpenChange={handleOpenChange}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>{list?.name}</SheetTitle>
+        </SheetHeader>
+        {list ? (
+          <div>
+            <p>{list.description}</p>
+            {/* Render more details as needed */}
+          </div>
+        ) : (
+          <p>Loading...</p>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
new file mode 100644
index 000000000..d30779f4f
--- /dev/null
+++ b/web/src/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
