diff --git a/components/form/Field.tsx b/components/form/Field.tsx
index 3edc313..7a33cb0 100644
--- a/components/form/Field.tsx
+++ b/components/form/Field.tsx
@@ -9,6 +9,7 @@ import get from "lodash.get";
 import { getNumber } from "@/lib/utils/getNumber";
 import { useLocal } from "@/lib/utils/use-local";
 import { FieldRadio } from "./field/TypeRadio";
+import { cn } from "@/lib/utils";
 
 export const Field: React.FC<{
   fm: any;
@@ -155,7 +156,7 @@ export const Field: React.FC<{
           <></>
         )}
         <div
-          className={cx(
+          className={cn(
             error
               ? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
               : "flex flex-row rounded-md flex-grow  items-center",
@@ -338,7 +339,8 @@ export const Field: React.FC<{
                       padding-right: ${getNumber(
                         get(suffixRef, "current.clientWidth")
                       ) + 10}px;
-                    `
+                    `,
+                  className
                 )}
               />
             </>
diff --git a/components/form/field/TypeInput.tsx b/components/form/field/TypeInput.tsx
index 22d0845..a15555c 100644
--- a/components/form/field/TypeInput.tsx
+++ b/components/form/field/TypeInput.tsx
@@ -9,6 +9,7 @@ import { FaRegEye, FaRegEyeSlash } from "react-icons/fa6";
 import { Rating } from "../../ui/ratings";
 import { getNumber } from "@/lib/utils/getNumber";
 import MaskedInput from "../../ui/MaskedInput";
+import { cn } from "@/lib/utils";
 
 export const TypeInput: React.FC<any> = ({
   name,
@@ -247,7 +248,7 @@ export const TypeInput: React.FC<any> = ({
             id={name}
             name={name}
             disabled={disabled}
-            className={cx(
+            className={cn(
               "text-sm text-right	",
               error
                 ? css`
diff --git a/components/tablist/TabHeader.tsx b/components/tablist/TabHeader.tsx
index 180f249..9200e37 100644
--- a/components/tablist/TabHeader.tsx
+++ b/components/tablist/TabHeader.tsx
@@ -1,30 +1,6 @@
 "use client";
-import {
-  ColumnDef,
-  ColumnResizeDirection,
-  ColumnResizeMode,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  SortingState,
-  useReactTable,
-} from "@tanstack/react-table";
-import React, { FC, useEffect } from "react";
-import {
-  Breadcrumb,
-  Button,
-  Checkbox,
-  Label,
-  Modal,
-  Table,
-  TextInput,
-} from "flowbite-react";
-import { FaArrowDownLong, FaArrowUp } from "react-icons/fa6";
-
-import { init_column } from "../tablelist/lib/column";
+import React, { useEffect } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import TabSlider from "../ui/tabslider";
 import { useLocal } from "@/lib/utils/use-local";
 
 export const TabHeader: React.FC<any> = ({
diff --git a/components/tablist/Tablist.tsx b/components/tablist/Tablist.tsx
index 514c378..0379587 100644
--- a/components/tablist/Tablist.tsx
+++ b/components/tablist/Tablist.tsx
@@ -1,30 +1,6 @@
 "use client";
-import { makeData } from "@/lib/utils/makeData";
-import {
-  ColumnDef,
-  ColumnResizeDirection,
-  ColumnResizeMode,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  SortingState,
-  useReactTable,
-} from "@tanstack/react-table";
-import React, { FC, useEffect } from "react";
-import {
-  Breadcrumb,
-  Button,
-  Checkbox,
-  Label,
-  Modal,
-  Table,
-  TextInput,
-} from "flowbite-react";
+import React, { useEffect } from "react";
 import { useLocal } from "@/lib/utils/use-local";
-import { FaArrowDownLong, FaArrowUp } from "react-icons/fa6";
-
-import { init_column } from "../tablelist/lib/column";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import TabSlider from "../ui/tabslider";
 
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 92e765c..25f87e1 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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-gray-100/20  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}