diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 1e717ae..a7b9bef 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index 4655721..6a371b4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,28 +25,27 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
-    "@tanstack/react-query": "^5.50.1",
-    "@tanstack/react-router": "^1.43.12",
-    "@tanstack/react-table": "^8.19.2",
+    "@tanstack/react-query": "^5.51.1",
+    "@tanstack/react-router": "^1.45.0",
+    "@tanstack/react-table": "^8.19.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "ky": "^1.4.0",
-    "lucide-react": "^0.400.0",
-    "primereact": "^10.7.0",
+    "lucide-react": "^0.408.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "sonner": "^1.5.0",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@tanstack/react-query-devtools": "^5.50.1",
-    "@tanstack/router-devtools": "^1.43.12",
-    "@tanstack/router-plugin": "^1.43.12",
+    "@tanstack/react-query-devtools": "^5.51.1",
+    "@tanstack/router-devtools": "^1.45.1",
+    "@tanstack/router-plugin": "^1.45.0",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -55,7 +54,7 @@
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",
-    "vite": "^5.3.1"
+    "vite": "^5.3.3"
   },
   "prettier": "@it-incubator/prettier-config"
 }
diff --git a/frontend/src/components/db-table-view/data-table-prime.tsx b/frontend/src/components/db-table-view/data-table-prime.tsx
deleted file mode 100644
index 8ffb3eb..0000000
--- a/frontend/src/components/db-table-view/data-table-prime.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { cn, isImageUrl, isUrl } from "@/lib/utils";
-import { useTableColumnsQuery, useTableDataQuery } from "@/services/db";
-import { useSettingsStore } from "@/state";
-import { Rows3 } from "lucide-react";
-import { Column } from "primereact/column";
-import { DataTable, type SortOrder } from "primereact/datatable";
-import {
-  MultiSelect,
-  type MultiSelectChangeEvent,
-} from "primereact/multiselect";
-import { useEffect, useState } from "react";
-
-const headerTemplate = ({
-  columnName,
-  udt_name,
-}: { udt_name: string; columnName: string }) => (
-  <div className={"flex items-center gap-2"}>
-    <span>{columnName}</span>
-    <span className="text-xs text-gray-500">[{udt_name.toUpperCase()}]</span>
-  </div>
-);
-
-const columnTemplate =
-  ({
-    columnName,
-    formatDates,
-    showImagesPreview,
-    udt_name,
-    data_type,
-  }: {
-    columnName: string;
-    formatDates: boolean;
-    showImagesPreview: boolean;
-    udt_name: string;
-    data_type: string;
-  }) =>
-  (item: Record<string, any>) => {
-    const value = item[columnName] as any;
-
-    let finalValue = value;
-    if (
-      formatDates &&
-      ["timestamp", "datetime"].includes(udt_name.toLowerCase())
-    ) {
-      finalValue = new Date(value as string).toLocaleString();
-    }
-    if (showImagesPreview && typeof value === "string" && isUrl(value)) {
-      const isImage = isImageUrl(value);
-      return (
-        <a
-          href={value}
-          target={"_blank"}
-          className={cn("hover:underline")}
-          rel="noreferrer"
-        >
-          <div className={"flex items-center justify-between break-all gap-4"}>
-            {value}
-            {isImage && (
-              <img
-                src={value}
-                alt={"preview"}
-                className="size-20 object-cover"
-              />
-            )}
-          </div>
-        </a>
-      );
-    }
-    return (
-      <div
-        className={cn(
-          "break-all",
-          ["integer", "int", "tinyint", "double"].includes(data_type) &&
-            "text-right",
-        )}
-      >
-        {finalValue}
-      </div>
-    );
-  };
-
-export const DataTablePrime = ({
-  tableName,
-  dbName,
-  offset,
-  pageSize,
-  onPageSizeChange,
-  onPageIndexChange,
-}: {
-  tableName: string;
-  offset: number;
-  dbName: string;
-  pageSize: number;
-  onPageIndexChange: (pageIndex: number) => void;
-  onPageSizeChange: (pageSize: number) => void;
-}) => {
-  const formatDates = useSettingsStore.use.formatDates();
-  const showImagesPreview = useSettingsStore.use.showImagesPreview();
-  const paginationOptions = useSettingsStore.use.paginationOptions();
-  const [sorting, setSorting] = useState<
-    | {
-        sortField?: string;
-        sortOrder?: SortOrder;
-      }
-    | undefined
-  >(undefined);
-  const { data: columns } = useTableColumnsQuery({ dbName, tableName });
-  const [visibleColumns, setVisibleColumns] = useState(columns);
-
-  useEffect(() => {
-    setVisibleColumns(columns);
-  }, [columns]);
-
-  const onColumnToggle = (event: MultiSelectChangeEvent) => {
-    const selectedColumns = event.value;
-    console.log(selectedColumns);
-    const orderedSelectedColumns = columns?.filter((col) =>
-      selectedColumns.some((sCol: any) => sCol.column_name === col.column_name),
-    );
-
-    setVisibleColumns(orderedSelectedColumns);
-  };
-
-  const header = (
-    <MultiSelect
-      value={visibleColumns}
-      options={columns}
-      optionLabel="column_name"
-      onChange={onColumnToggle}
-      className="w-full sm:w-20rem"
-      display="chip"
-      filter
-    />
-  );
-
-  const { data, isFetching } = useTableDataQuery({
-    tableName,
-    dbName,
-    perPage: pageSize,
-    page: Math.floor(offset / pageSize),
-    sortDesc: sorting?.sortOrder === -1,
-    sortField: sorting?.sortField,
-  });
-
-  return (
-    <div className={"flex flex-col gap-4 flex-1 max-h-full h-full pb-3"}>
-      <div className={"flex gap-4 items-center justify-between"}>
-        <h1 className="text-2xl font-bold flex items-center gap-2">
-          <Rows3 /> {tableName}
-        </h1>
-        <p>
-          Rows: <strong>{data?.count}</strong>
-        </p>
-      </div>
-      <div className="min-h-0 h-full w-full min-w-0">
-        <DataTable
-          header={header}
-          rows={pageSize}
-          lazy
-          first={offset}
-          onPage={(e) => {
-            if (e.rows !== pageSize) {
-              onPageSizeChange(e.rows);
-            } else if (e.first !== offset) {
-              onPageIndexChange(e.first);
-            }
-          }}
-          onSort={setSorting}
-          sortField={sorting?.sortField}
-          sortOrder={sorting?.sortOrder}
-          paginator
-          totalRecords={data?.count}
-          rowsPerPageOptions={paginationOptions}
-          stripedRows
-          columnResizeMode="expand"
-          resizableColumns
-          showGridlines
-          size="small"
-          value={data?.data}
-          tableStyle={{ minWidth: "100%" }}
-          scrollable
-          scrollHeight="flex"
-          loading={isFetching}
-          removableSort
-          stateStorage="local"
-          stateKey={`dt-state-${dbName}-${tableName}`}
-        >
-          {visibleColumns?.map((col) => (
-            <Column
-              key={col.column_name}
-              sortable
-              field={col.column_name}
-              header={headerTemplate({
-                columnName: col.column_name,
-                udt_name: col.udt_name,
-              })}
-              body={columnTemplate({
-                columnName: col.column_name,
-                formatDates,
-                showImagesPreview,
-                udt_name: col.udt_name,
-                data_type: col.data_type,
-              })}
-            />
-          ))}
-        </DataTable>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index ddc81f6..0df4cb6 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,6 @@
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
-
-import { PrimeReactProvider } from "primereact/api";
-import Tailwind from "primereact/passthrough/tailwind";
-import { twMerge } from "tailwind-merge";
 import "@fontsource/inter/300.css";
 import "@fontsource/inter/400.css";
 import "@fontsource/inter/500.css";
@@ -13,8 +9,6 @@ import "@fontsource/inter/700.css";
 import "@fontsource/inter/800.css";
 import "./index.css";
 import { Toaster } from "@/components/ui";
-import { datatable } from "@/styles/datatable";
-import { multiselect } from "@/styles/multiselect";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 // Import the generated route tree
@@ -37,12 +31,6 @@ const queryClient = new QueryClient({
   },
 });
 
-const PrimeStyles = {
-  ...Tailwind,
-  datatable,
-  multiselect,
-};
-
 // Render the app
 const rootElement = document.getElementById("root");
 if (rootElement && !rootElement.innerHTML) {
@@ -54,20 +42,8 @@ if (rootElement && !rootElement.innerHTML) {
           initialIsOpen={false}
           buttonPosition={"bottom-left"}
         />
-        <PrimeReactProvider
-          value={{
-            unstyled: true,
-            pt: PrimeStyles,
-            ptOptions: {
-              mergeSections: true,
-              mergeProps: true,
-              classNameMergeFunction: twMerge,
-            },
-          }}
-        >
-          <Toaster richColors />
-          <RouterProvider router={router} />
-        </PrimeReactProvider>
+        <Toaster richColors />
+        <RouterProvider router={router} />
       </QueryClientProvider>
     </StrictMode>,
   );
diff --git a/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx b/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
index e3a72d8..a46f1e7 100644
--- a/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
+++ b/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
@@ -1,5 +1,4 @@
 import { DataTable } from "@/components/db-table-view/data-table";
-import { DataTablePrime } from "@/components/db-table-view/data-table-prime";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { z } from "zod";
 
@@ -32,12 +31,12 @@ function TableView() {
 
   return (
     <div className="p-3 h-layout w-layout">
-      <DataTablePrime
+      <DataTable
         key={tableName}
         dbName={dbName}
         tableName={tableName}
         pageSize={pageSize}
-        offset={pageIndex}
+        pageIndex={pageIndex}
         onPageIndexChange={updatePageIndex}
         onPageSizeChange={updatePageSize}
       />
diff --git a/frontend/src/styles/datatable.tsx b/frontend/src/styles/datatable.tsx
deleted file mode 100644
index 397ecaf..0000000
--- a/frontend/src/styles/datatable.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import { cn } from "@/lib/utils";
-import type { DataTablePassThroughOptions } from "primereact/datatable";
-
-const TRANSITIONS = {
-  overlay: {
-    timeout: 150,
-    classNames: {
-      enter: "opacity-0 scale-75",
-      enterActive:
-        "opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in",
-      exit: "opacity-100",
-      exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
-    },
-  },
-};
-
-export const datatable: DataTablePassThroughOptions = {
-  root: ({ props }) => ({
-    className: cn("relative", {
-      "flex flex-col h-full": props.scrollable && props.scrollHeight === "flex",
-    }),
-  }),
-  loadingoverlay: {
-    className: cn(
-      "fixed w-full h-full t-0 l-0 bg-gray-100/40",
-      "transition duration-200",
-      "absolute flex items-center justify-center z-10",
-      "dark:bg-gray-950/40", // Dark Mode
-    ),
-  },
-  loadingicon: "w-8 h-8",
-  wrapper: ({ props }) => ({
-    className: cn({
-      relative: props.scrollable,
-      "flex flex-col grow h-full":
-        props.scrollable && props.scrollHeight === "flex",
-    }),
-  }),
-  header: ({ props }) => ({
-    className: cn(
-      "font-bold p-4",
-      "dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
-      props.showGridlines
-        ? "border-x border-t border-b-0"
-        : "border-y border-x-0",
-    ),
-  }),
-  table: "w-full border-spacing-0 text-sm",
-  thead: ({ context }) => ({
-    className: cn({
-      "top-0 z-[1]": context.scrollable,
-    }),
-  }),
-  tbody: ({ props, context }) => ({
-    className: cn({
-      "sticky z-[1]": props.frozenRow && context.scrollable,
-    }),
-  }),
-  tfoot: ({ context }) => ({
-    className: cn({
-      "bg-slate-50 bottom-0 z-[1]": context.scrollable,
-    }),
-  }),
-  footer: {
-    className: cn(
-      "bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4",
-      "dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
-    ),
-  },
-  column: {
-    headercell: ({ context, props }) => ({
-      className: cn(
-        "text-left border-0 border-b border-solid font-bold",
-        "transition duration-200",
-        context?.size === "small"
-          ? "p-2"
-          : context?.size === "large"
-            ? "p-5"
-            : "p-4", // Size
-        context.sorted
-          ? "bg-blue-50 text-blue-700"
-          : "bg-muted/50 text-slate-700", // Sort
-        context.sorted
-          ? "dark:text-white/80 dark:bg-blue-300"
-          : "dark:text-white/80 dark:bg-gray-900", // Dark Mode
-        {
-          "sticky z-[1]": props.frozen || props.frozen === "", // Frozen Columns
-          "border-x border-y": context?.showGridlines,
-          "overflow-hidden space-nowrap border-y relative bg-clip-padding":
-            context.resizable, // Resizable
-        },
-      ),
-    }),
-    headercontent: "flex items-center font-medium text-muted-foreground",
-    bodycell: ({ props, context }) => ({
-      className: cn(
-        "text-left border-0 border-b border-solid border-gray-300",
-        context?.size === "small"
-          ? "p-2"
-          : context?.size === "large"
-            ? "p-5"
-            : "p-4", // Size
-        "dark:text-white/80 dark:border-blue-900/40", // Dark Mode
-        {
-          "sticky bg-inherit": props && (props.frozen || props.frozen === ""), // Frozen Columns
-          "border-x border-y": context.showGridlines,
-        },
-      ),
-    }),
-    footercell: ({ context }) => ({
-      className: cn(
-        "text-left border-0 border-b border-solid border-gray-300 font-bold",
-        "bg-slate-50 text-slate-700",
-        "transition duration-200",
-        context?.size === "small"
-          ? "p-2"
-          : context?.size === "large"
-            ? "p-5"
-            : "p-4", // Size
-        "dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40", // Dark Mode
-        {
-          "border-x border-y": context.showGridlines,
-        },
-      ),
-    }),
-    sorticon: ({ context }) => ({
-      className: cn(
-        "ml-2",
-        context.sorted
-          ? "text-blue-700 dark:text-white/80"
-          : "text-slate-700 dark:text-white/70",
-      ),
-    }),
-    sortbadge: {
-      className: cn(
-        "flex items-center justify-center align-middle",
-        "rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2",
-        "text-blue-700 bg-blue-50",
-        "dark:text-white/80 dark:bg-blue-400", // Dark Mode
-      ),
-    },
-    columnfilter: "inline-flex items-center ml-auto",
-    filteroverlay: {
-      className: cn(
-        "bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]",
-        "dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80", //Dark Mode
-      ),
-    },
-    filtermatchmodedropdown: {
-      root: "min-[0px]:flex mb-2",
-    },
-    filterrowitems: "m-0 p-0 py-3 list-none ",
-    filterrowitem: ({ context }) => ({
-      className: cn(
-        "m-0 py-3 px-5 bg-transparent",
-        "transition duration-200",
-        context?.highlighted
-          ? "text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300"
-          : "text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent",
-      ),
-    }),
-    filteroperator: {
-      className: cn(
-        "px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md",
-        "dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
-      ),
-    },
-    filteroperatordropdown: {
-      root: "min-[0px]:flex",
-    },
-    filterconstraint:
-      "p-5 border-b border-solid border-gray-300 dark:border-blue-900/40",
-    filteraddrule: "py-3 px-5",
-    filteraddrulebutton: {
-      root: "justify-center w-full min-[0px]:text-sm",
-      label: "flex-auto grow-0",
-      icon: "mr-2",
-    },
-    filterremovebutton: {
-      root: "ml-2",
-      label: "grow-0",
-    },
-    filterbuttonbar: "flex items-center justify-between p-5",
-    filterclearbutton: {
-      root: "w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3",
-    },
-    filterapplybutton: {
-      root: "w-auto min-[0px]:text-sm px-4 py-3",
-    },
-    filtermenubutton: ({ context }) => ({
-      className: cn(
-        "inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2",
-        "w-8 h-8 rounded-[50%]",
-        "transition duration-200",
-        "hover:text-slate-700 hover:bg-gray-300/20", // Hover
-        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", // Focus
-        "dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900", // Dark Mode
-        {
-          "bg-blue-50 text-blue-700": context.active,
-        },
-      ),
-    }),
-    headerfilterclearbutton: ({ context }) => ({
-      className: cn(
-        "inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative",
-        "text-left bg-transparent m-0 p-0 border-none select-none ml-2",
-        {
-          invisible: !context.hidden,
-        },
-      ),
-    }),
-    columnresizer:
-      "block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent",
-    rowreordericon: "cursor-move",
-    roweditorinitbutton: {
-      className: cn(
-        "inline-flex items-center justify-center overflow-hidden relative",
-        "text-left cursor-pointer select-none",
-        "w-8 h-8 border-0 rounded-[50%]",
-        "transition duration-200",
-        "text-slate-700 border-transparent",
-        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
-        "hover:text-slate-700 hover:bg-gray-300/20", //Hover
-        "dark:text-white/70", // Dark Mode
-      ),
-    },
-    roweditorsavebutton: {
-      className: cn(
-        "inline-flex items-center justify-center overflow-hidden relative",
-        "text-left cursor-pointer select-none",
-        "w-8 h-8 border-0 rounded-[50%]",
-        "transition duration-200",
-        "text-slate-700 border-transparent",
-        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
-        "hover:text-slate-700 hover:bg-gray-300/20", //Hover
-        "dark:text-white/70", // Dark Mode
-      ),
-    },
-    roweditorcancelbutton: {
-      className: cn(
-        "inline-flex items-center justify-center overflow-hidden relative",
-        "text-left cursor-pointer select-none",
-        "w-8 h-8 border-0 rounded-[50%]",
-        "transition duration-200",
-        "text-slate-700 border-transparent",
-        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
-        "hover:text-slate-700 hover:bg-gray-300/20", //Hover
-        "dark:text-white/70", // Dark Mode
-      ),
-    },
-    radioButton: {
-      className: cn(
-        "relative inline-flex cursor-pointer select-none align-bottom",
-        "w-6 h-6",
-      ),
-    },
-    radioButtonInput: {
-      className: cn(
-        "w-full h-full top-0 left-0 absolute appearance-none select-none",
-        "p-0 m-0 opacity-0 z-[1] rounded-[50%] outline-none",
-        "cursor-pointer peer",
-      ),
-    },
-    radioButtonBox: ({ context }) => ({
-      className: cn(
-        "flex items-center justify-center",
-        "h-6 w-6 rounded-full border-2 text-gray-700 transition duration-200 ease-in-out",
-        context.checked
-          ? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400 peer-hover:bg-blue-700 peer-hover:border-blue-700"
-          : "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 peer-hover:border-blue-500",
-        {
-          "hover:border-blue-500 focus:shadow-input-focus focus:outline-none focus:outline-offset-0 dark:hover:border-blue-400 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
-            !context.disabled,
-          "cursor-default opacity-60": context.disabled,
-        },
-      ),
-    }),
-    radioButtonIcon: ({ context }) => ({
-      className: cn(
-        "transform rounded-full",
-        "block h-3 w-3 bg-white transition duration-200 dark:bg-gray-900",
-        {
-          "backface-hidden scale-10 invisible": context.checked === false,
-          "visible scale-100 transform": context.checked === true,
-        },
-      ),
-    }),
-    headercheckboxwrapper: {
-      className: cn(
-        "cursor-pointer inline-flex relative select-none align-bottom",
-        "w-6 h-6",
-      ),
-    },
-    headercheckbox: ({ context }) => ({
-      className: cn(
-        "flex items-center justify-center",
-        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
-        context.checked
-          ? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400"
-          : "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900",
-        {
-          "hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
-            !context.disabled,
-          "cursor-default opacity-60": context.disabled,
-        },
-      ),
-    }),
-    headercheckboxicon:
-      "w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
-    checkboxwrapper: {
-      className: cn(
-        "cursor-pointer inline-flex relative select-none align-bottom",
-        "w-6 h-6",
-      ),
-    },
-    checkbox: ({ context }) => ({
-      className: cn(
-        "flex items-center justify-center",
-        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
-        context.checked
-          ? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400"
-          : "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900",
-        {
-          "hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
-            !context.disabled,
-          "cursor-default opacity-60": context.disabled,
-        },
-      ),
-    }),
-    checkboxicon:
-      "w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
-    transition: TRANSITIONS.overlay,
-  },
-  bodyrow: ({ context }) => ({
-    className: cn(
-      context.selected
-        ? "bg-blue-50 text-blue-700 dark:bg-blue-300"
-        : "bg-white text-foreground dark:bg-gray-900",
-      context.stripedRows &&
-        (context.index % 2 === 0
-          ? "bg-white text-foreground dark:bg-gray-900"
-          : "bg-muted/50 text-foreground dark:bg-gray-950"),
-      "transition duration-200",
-      "focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]", // Focus
-      "dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]", // Dark Mode
-      {
-        "cursor-pointer": context.selectable,
-        "hover:bg-gray-300/20 hover:text-gray-600":
-          context.selectable && !context.selected, // Hover
-      },
-    ),
-  }),
-  rowexpansion: "bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80",
-  rowgroupheader: {
-    className: cn(
-      "sticky z-[1]",
-      "bg-white text-gray-600",
-      "transition duration-200",
-    ),
-  },
-  rowgroupfooter: {
-    className: cn(
-      "sticky z-[1]",
-      "bg-white text-gray-600",
-      "transition duration-200",
-    ),
-  },
-  rowgrouptoggler: {
-    className: cn(
-      "text-left m-0 p-0 cursor-pointer select-none",
-      "inline-flex items-center justify-center overflow-hidden relative",
-      "w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]",
-      "transition duration-200",
-      "dark:text-white/70", // Dark Mode
-    ),
-  },
-  rowgrouptogglericon: "inline-block w-4 h-4",
-  resizehelper: "absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300",
-};
diff --git a/frontend/src/styles/multiselect.ts b/frontend/src/styles/multiselect.ts
deleted file mode 100644
index f9c38c8..0000000
--- a/frontend/src/styles/multiselect.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { cn } from "@/lib/utils";
-import type { MultiSelectPassThroughOptions } from "primereact/multiselect";
-
-const TRANSITIONS = {
-  overlay: {
-    timeout: 150,
-    classNames: {
-      enter: "opacity-0 scale-75",
-      enterActive:
-        "opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in",
-      exit: "opacity-100",
-      exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
-    },
-  },
-};
-
-export const multiselect: MultiSelectPassThroughOptions = {
-  root: ({ props }) => ({
-    className: cn(
-      "inline-flex cursor-pointer select-none",
-      "bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md",
-      "w-full md:w-80",
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ),
-  }),
-  labelContainer: "overflow-hidden flex flex-auto cursor-pointer",
-  label: ({ props }) => ({
-    className: cn(
-      "block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis",
-      "text-gray-800 dark:text-white/80",
-      "p-3 transition duration-200",
-      {
-        "!p-3":
-          props.display !== "chip" &&
-          (props.value == null || props.value === undefined),
-        "!py-1.5 px-3": props.display === "chip" && props.value !== null,
-      },
-    ),
-  }),
-  token: {
-    className: cn(
-      "py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full",
-      "cursor-default inline-flex items-center",
-    ),
-  },
-  removeTokenIcon: "ml-2",
-  trigger: {
-    className: cn(
-      "flex items-center justify-center shrink-0",
-      "bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg",
-    ),
-  },
-  panel: {
-    className: cn(
-      "bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg",
-    ),
-  },
-  header: {
-    className: cn(
-      "p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg",
-      "flex items-center justify-between",
-    ),
-  },
-  headerCheckboxContainer: {
-    className: cn(
-      "inline-flex cursor-pointer select-none align-bottom relative",
-      "mr-2",
-      "w-6 h-6",
-    ),
-  },
-  headerCheckbox: {
-    root: ({ props }) => ({
-      className: cn(
-        "asdfasdf flex items-center justify-center [&>div]:shrink-0",
-        "border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200",
-        "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
-        {
-          "border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900":
-            !props?.checked,
-          "border-blue-500 bg-blue-500": props?.checked,
-        },
-      ),
-    }),
-  },
-  headerCheckboxIcon:
-    "w-4 h-4 transition-all duration-200 text-white text-base",
-  closeButton: {
-    className: cn(
-      "flex items-center justify-center overflow-hidden relative",
-      "w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0",
-      "hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ",
-      "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
-    ),
-  },
-  closeIcon: "w-4 h-4 inline-block",
-  wrapper: {
-    className: cn(
-      "max-h-[200px] overflow-auto",
-      "bg-white text-gray-700 border-0 rounded-md shadow-lg",
-      "dark:bg-gray-900 dark:text-white/80",
-    ),
-  },
-  list: "py-3 list-none m-0",
-  item: ({ context }) => ({
-    className: cn(
-      "cursor-pointer font-normal overflow-hidden relative whitespace-nowrap",
-      "m-0 p-3 border-0  transition-shadow duration-200 rounded-none",
-      {
-        "text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800":
-          !context?.focused && !context?.selected,
-        "bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800":
-          context?.focused && !context?.selected,
-        "bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80":
-          context?.focused && context?.selected,
-        "bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80":
-          !context?.focused && context?.selected,
-      },
-    ),
-  }),
-  checkboxContainer: {
-    className: cn(
-      "inline-flex cursor-pointer select-none align-bottom relative",
-      "mr-2",
-      "w-6 h-6",
-    ),
-  },
-  checkbox: ({ context }) => ({
-    className: cn(
-      "flex items-center justify-center shrink-0",
-      "border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200",
-      "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
-      {
-        "border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900":
-          !context?.selected,
-        "border-blue-500 bg-blue-500": context?.selected,
-      },
-    ),
-  }),
-  checkboxIcon: "w-4 h-4 transition-all duration-200 text-white text-base",
-  itemGroup: {
-    className: cn(
-      "m-0 p-3 text-gray-800 bg-white font-bold",
-      "dark:bg-gray-900 dark:text-white/80",
-      "cursor-auto",
-    ),
-  },
-  filterContainer: "relative",
-  filterInput: {
-    root: {
-      className: cn(
-        "pr-7 -mr-7",
-        "w-full",
-        "font-sans text-base text-gray-700 bg-white py-3 px-3 pr-6  border border-gray-300 transition duration-200 rounded-lg appearance-none",
-        "dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80",
-        "hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]",
-      ),
-    },
-  },
-  filterIcon: "-mt-2 absolute top-1/2 right-2",
-  clearIcon: "text-gray-500 right-12 -mt-2 absolute top-1/2",
-  transition: TRANSITIONS.overlay,
-};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 59afa9f..a6dbb40 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,7 +7,6 @@ module.exports = {
     "./components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
-    "./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
   ],
   prefix: "",
   theme: {