diff --git a/deepfence_frontend/apps/dashboard/package.json b/deepfence_frontend/apps/dashboard/package.json
index b41c482ef2..20d1d4c0b3 100644
--- a/deepfence_frontend/apps/dashboard/package.json
+++ b/deepfence_frontend/apps/dashboard/package.json
@@ -25,7 +25,6 @@
     "@suspensive/react": "^1.11.2",
     "@suspensive/react-query": "^1.11.2",
     "@tanstack/react-query": "^4.29.17",
-    "classnames": "^2.3.2",
     "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "lodash-es": "^4.17.21",
@@ -35,7 +34,6 @@
     "react-router-dom": "^6.14.0",
     "react-use": "^17.4.0",
     "sonner": "^0.1.1",
-    "tailwind-merge": "^1.13.2",
     "tailwind-preset": "workspace:*",
     "ui-components": "workspace:*"
   },
diff --git a/deepfence_frontend/apps/dashboard/src/components/AppHeader.tsx b/deepfence_frontend/apps/dashboard/src/components/AppHeader.tsx
index 1f4e7d2491..b80e7b1f6b 100644
--- a/deepfence_frontend/apps/dashboard/src/components/AppHeader.tsx
+++ b/deepfence_frontend/apps/dashboard/src/components/AppHeader.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import { useFetcher, useRouteLoaderData } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import { Dropdown, DropdownItem } from 'ui-components';
 
 import { DFLink } from '@/components/DFLink';
@@ -12,12 +12,12 @@ export function AppHeader() {
   const { email } = useRouteLoaderData('root') as { email: string };
   return (
     <header
-      className={classNames(
+      className={cn(
         'fixed z-10 top-0 bg-white dark:bg-bg-left-nav h-[56px] w-full border-b border-gray-200 dark:border-bg-top-header',
       )}
     >
       <div className="h-full flex items-center">
-        <div className={classNames('mr-auto ml-3')}>
+        <div className="mr-auto ml-3">
           <DFLink
             to="/"
             style={{
diff --git a/deepfence_frontend/apps/dashboard/src/components/LinkButton.tsx b/deepfence_frontend/apps/dashboard/src/components/LinkButton.tsx
index b04cab8b87..9947ae469e 100644
--- a/deepfence_frontend/apps/dashboard/src/components/LinkButton.tsx
+++ b/deepfence_frontend/apps/dashboard/src/components/LinkButton.tsx
@@ -1,5 +1,5 @@
-import cx from 'classnames';
 import React from 'react';
+import { cn } from 'tailwind-preset';
 
 import { DFLink } from '@/components/DFLink';
 
@@ -15,7 +15,7 @@ export const LinkButton = ({
   return (
     <DFLink
       to={to}
-      className={cx(
+      className={cn(
         'flex items-center hover:no-underline focus:no-underline active:no-underline',
         'text-gray-800 dark:text-gray-100 hover:text-blue-600 hover:dark:text-blue-500',
         'visited:text-gray-800 dark:visited:text-gray-100',
diff --git a/deepfence_frontend/apps/dashboard/src/components/ScanStatusMessage.tsx b/deepfence_frontend/apps/dashboard/src/components/ScanStatusMessage.tsx
index 78af550e03..328b28bff4 100644
--- a/deepfence_frontend/apps/dashboard/src/components/ScanStatusMessage.tsx
+++ b/deepfence_frontend/apps/dashboard/src/components/ScanStatusMessage.tsx
@@ -1,4 +1,3 @@
-import cx from 'classnames';
 import { CircleSpinner, Tooltip } from 'ui-components';
 
 import { ErrorStandardLineIcon } from '@/components/icons/common/ErrorStandardLine';
@@ -6,7 +5,7 @@ import { ErrorStandardSolidIcon } from '@/components/icons/common/ErrorStandardS
 
 export const ScanStatusInProgress = () => {
   return (
-    <div className={cx('flex items-center justify-center gap-x-2')}>
+    <div className="flex items-center justify-center gap-x-2">
       <CircleSpinner size="md" />
       <span className="text-h3 font-medium dark:text-text-text-and-icon">
         Scan is in progress, please wait...
@@ -17,7 +16,7 @@ export const ScanStatusInProgress = () => {
 
 export const ScanStatusInError = ({ errorMessage }: { errorMessage: string }) => {
   return (
-    <div className={cx('flex items-center justify-center gap-x-2')}>
+    <div className="flex items-center justify-center gap-x-2">
       {errorMessage ? (
         <Tooltip content={errorMessage}>
           <div className="w-6 h-6 dark:text-status-error  rounded-full">
diff --git a/deepfence_frontend/apps/dashboard/src/components/error/404.tsx b/deepfence_frontend/apps/dashboard/src/components/error/404.tsx
index 108e2cb466..dd41540128 100644
--- a/deepfence_frontend/apps/dashboard/src/components/error/404.tsx
+++ b/deepfence_frontend/apps/dashboard/src/components/error/404.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { useLocation, useRouteError } from 'react-router-dom';
 
 const SVG404 = () => {
@@ -435,7 +434,7 @@ export const FourZeroFourAuthenticated = () => {
   }
 
   return (
-    <main className={classNames('pt-[64px] h-screen')}>
+    <main className="pt-[64px] h-screen">
       <PageNotFoundComponent />
     </main>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/components/error/500.tsx b/deepfence_frontend/apps/dashboard/src/components/error/500.tsx
index bdd4092cdc..4103d25fc5 100644
--- a/deepfence_frontend/apps/dashboard/src/components/error/500.tsx
+++ b/deepfence_frontend/apps/dashboard/src/components/error/500.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import { useLocation, useRouteError } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 
 import { AppHeader } from '@/components/AppHeader';
 import { getSideNavigationState, SideNavigation } from '@/components/SideNavigation';
@@ -1367,13 +1367,10 @@ export const FiveZeroZero = () => {
             onExpandedChange={(state) => setSideNavExpanded(state)}
           />
           <main
-            className={classNames(
-              'pt-[56px] h-screen overflow-auto transition-[margin-left]',
-              {
-                'ml-[60px]': !sideNavExpanded,
-                'ml-[240px]': sideNavExpanded,
-              },
-            )}
+            className={cn('pt-[56px] h-screen overflow-auto transition-[margin-left]', {
+              'ml-[60px]': !sideNavExpanded,
+              'ml-[240px]': sideNavExpanded,
+            })}
           >
             <ErrorComponent />
           </main>
diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/FilterHeader.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/FilterHeader.tsx
deleted file mode 100644
index 0d18b884a7..0000000000
--- a/deepfence_frontend/apps/dashboard/src/components/forms/FilterHeader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import cx from 'classnames';
-import { Separator } from 'ui-components';
-
-export const FilterHeader = ({ onReset }: { onReset: () => void }) => {
-  return (
-    <div>
-      <h3 className="flex font-medium text-lg dark:text-gray-100 px-4 py-2">
-        Filters
-        <button
-          className={cx(
-            'px-2 rounded-lg',
-            'ml-auto text-sm dark:text-gray-100',
-            'hover:text-blue-600 dark:hover:text-blue-500',
-            'focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700',
-          )}
-          onClick={onReset}
-        >
-          Reset
-        </button>
-      </h3>
-      <Separator className="h-px block bg-gray-200 dark:bg-gray-600" />
-    </div>
-  );
-};
diff --git a/deepfence_frontend/apps/dashboard/src/features/auth/pages/Login.tsx b/deepfence_frontend/apps/dashboard/src/features/auth/pages/Login.tsx
index a4d04a54f3..c16147df39 100644
--- a/deepfence_frontend/apps/dashboard/src/features/auth/pages/Login.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/auth/pages/Login.tsx
@@ -1,4 +1,3 @@
-import cx from 'classnames';
 import { useFetcher } from 'react-router-dom';
 import { Button, TextInput } from 'ui-components';
 
@@ -41,9 +40,7 @@ export const Login = () => {
           <DFLink
             unstyled
             to="/auth/forgot-password"
-            className={cx(
-              'ml-auto text-p5 underline text-blue-600 dark:text-accent-accent',
-            )}
+            className="ml-auto text-p5 underline text-blue-600 dark:text-accent-accent"
           >
             Forgot password?
           </DFLink>
diff --git a/deepfence_frontend/apps/dashboard/src/features/common/RootLayout.tsx b/deepfence_frontend/apps/dashboard/src/features/common/RootLayout.tsx
index 9d9c0a9632..e6aa634fec 100644
--- a/deepfence_frontend/apps/dashboard/src/features/common/RootLayout.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/common/RootLayout.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 
 import { AppHeader } from '@/components/AppHeader';
 import { getSideNavigationState, SideNavigation } from '@/components/SideNavigation';
@@ -17,13 +17,10 @@ export const RootLayout = () => {
         onExpandedChange={(state) => setSideNavExpanded(state)}
       />
       <main
-        className={classNames(
-          'pt-[56px] h-screen overflow-auto transition-[margin-left]',
-          {
-            'ml-[60px]': !sideNavExpanded,
-            'ml-[240px]': sideNavExpanded,
-          },
-        )}
+        className={cn('pt-[56px] h-screen overflow-auto transition-[margin-left]', {
+          'ml-[60px]': !sideNavExpanded,
+          'ml-[240px]': sideNavExpanded,
+        })}
       >
         <Outlet />
       </main>
diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
index 514695f0de..395d0c4491 100644
--- a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
@@ -1,6 +1,5 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { useIsFetching } from '@tanstack/react-query';
-import cx from 'classnames';
 import { capitalize } from 'lodash-es';
 import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import {
@@ -9,6 +8,7 @@ import {
   useFetcher,
   useSearchParams,
 } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import {
   Badge,
   Breadcrumb,
@@ -273,15 +273,9 @@ const ActionDropdown = ({
                 e.preventDefault();
                 onDownloadAction();
               }}
+              disabled={!isScanComplete(scanStatus)}
             >
-              <span
-                className={cx('flex items-center gap-x-2', {
-                  'opacity-60 dark:opacity-30 cursor-default':
-                    !isScanComplete(scanStatus),
-                })}
-              >
-                Download report
-              </span>
+              <span>Download report</span>
             </DropdownItem>
             <DropdownItem
               onClick={(e) => {
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
index 2628c9f29b..bcec89bea0 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
@@ -1,6 +1,5 @@
-import cx from 'classnames';
 import { useLocation } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 import { Breadcrumb, BreadcrumbLink } from 'ui-components';
 
 type ConnectorHeaderProps = {
@@ -40,17 +39,15 @@ export const ConnectorHeader = ({
         <Breadcrumb>
           <BreadcrumbLink isLink>
             <span
-              className={twMerge(
-                cx(
-                  'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
-                  'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
-                ),
+              className={cn(
+                'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
+                'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
               )}
             >
               1
             </span>
             <span
-              className={cx('flex items-center ml-2 cursor-default', {
+              className={cn('flex items-center ml-2 cursor-default', {
                 ['dark:text-text-text-and-icon']: !isAddConnectorRoutePath(),
               })}
             >
@@ -59,18 +56,16 @@ export const ConnectorHeader = ({
           </BreadcrumbLink>
           <BreadcrumbLink className="cursor-auto">
             <span
-              className={twMerge(
-                cx(
-                  'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
-                  'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
-                ),
+              className={cn(
+                'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
+                'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
               )}
             >
               2
             </span>
 
             <span
-              className={cx('cursor-auto ml-2', {
+              className={cn('cursor-auto ml-2', {
                 ['dark:text-text-link']: isScanRoutePath(),
               })}
             >
@@ -79,17 +74,15 @@ export const ConnectorHeader = ({
           </BreadcrumbLink>
           <BreadcrumbLink>
             <span
-              className={twMerge(
-                cx(
-                  'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
-                  'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
-                ),
+              className={cn(
+                'w-6 h-6 rounded-full dark:bg-df-gray-200 text-p7 flex items-center justify-center',
+                'dark:bg-gray-700 dark:text-df-gray-100 cursor-default',
               )}
             >
               3
             </span>
             <span
-              className={cx('cursor-auto ml-2', {
+              className={cn('cursor-auto ml-2', {
                 ['dark:text-text-link']: isViewScanSummaryRoutePath(),
               })}
             >
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
index 6e849cc207..58c9f11c2b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
@@ -1,8 +1,8 @@
-import cx from 'classnames';
 import { useRef } from 'react';
 import { useState } from 'react';
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import { Button, Card, Tabs } from 'ui-components';
 
 import { ACCOUNT_CONNECTOR } from '@/components/hosts-connector/NoConnectors';
@@ -42,7 +42,7 @@ const CardConnect = ({ label, path, icon }: CardConnectProps) => {
   return (
     <div className="px-6">
       <button
-        className={cx(
+        className={cn(
           'text-sm text-left flex items-center w-full gap-5',
           'border-b dark:border-bg-grid-border border-gray-200 h-[72px]  dark:hover:text-text-input-value dark:bg-transparent',
         )}
diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx
index 6d2838c4d3..551a91c5e7 100644
--- a/deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/ConnectorInstructions.tsx
@@ -1,6 +1,6 @@
-import cx from 'classnames';
 import { startCase } from 'lodash-es';
 import { generatePath, useParams } from 'react-router-dom';
+import { cn } from 'tailwind-preset';
 import { Card } from 'ui-components';
 
 import { AWSCloudFormation } from '@/components/clouds-connector/AWSCloudFormation';
@@ -52,7 +52,7 @@ const CardConnect = ({ label, path, icon }: CardConnectProps) => {
   return (
     <div className="px-6">
       <button
-        className={cx(
+        className={cn(
           'text-sm text-left flex items-center w-full gap-5',
           'border-b dark:border-gray-700 border-gray-200 h-[72px] dark:text-gray-300 dark:bg-transparent',
         )}
@@ -103,16 +103,10 @@ const Cloud = () => {
           Connect an AWS, GCP, or Azure cloud account to check for compliance
           misconfigurations.
         </p>
-        <div className="flex flex-col">
+        <div className="flex flex-col dark:text-text-text-and-icon">
           {connectors.map((connector) => {
             return (
-              <div
-                key={connector.label}
-                className={cx(
-                  'hover:bg-[linear-gradient(270deg,_#EBF5FF_-0.07%,_#FFFFFF_100%)]',
-                  'dark:hover:bg-[linear-gradient(270deg,_#1c2431_-0.07%,_#1f2937_100%)]',
-                )}
-              >
+              <div key={connector.label} className="dark:hover:bg-bg-hover-2">
                 <CardConnect {...connector} />
               </div>
             );
@@ -158,16 +152,10 @@ const Host = () => {
           Connect a K8s cluster, Docker container, or Linux host to check for
           vulnerabilities, secrets, malware, and compliance misconfigurations.
         </p>
-        <div className="flex flex-col">
+        <div className="flex flex-col dark:text-text-text-and-icon">
           {connectors.map((connector) => {
             return (
-              <div
-                key={connector.label}
-                className={cx(
-                  'hover:bg-[linear-gradient(270deg,_#EBF5FF_-0.07%,_#FFFFFF_100%)]',
-                  'dark:hover:bg-[linear-gradient(270deg,_#1c2431_-0.07%,_#1f2937_100%)]',
-                )}
-              >
+              <div key={connector.label} className="dark:hover:bg-bg-hover-2">
                 <CardConnect {...connector} />
               </div>
             );
diff --git a/deepfence_frontend/packages/ui-components/package.json b/deepfence_frontend/packages/ui-components/package.json
index 6da3ce3aff..c4bc51f881 100644
--- a/deepfence_frontend/packages/ui-components/package.json
+++ b/deepfence_frontend/packages/ui-components/package.json
@@ -39,11 +39,9 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-table": "^8.9.3",
-    "classnames": "^2.3.2",
     "cva": "npm:class-variance-authority@^0.6.0",
     "lodash-es": "^4.17.21",
     "react-use": "^17.4.0",
-    "tailwind-merge": "^1.13.2",
     "tailwind-preset": "workspace:*"
   },
   "peerDependencies": {
diff --git a/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx b/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx
index eaad9e69aa..6976594228 100644
--- a/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx
@@ -1,22 +1,19 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import cx from 'classnames';
 import React from 'react';
 import { HiOutlineChevronDown } from 'react-icons/hi';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 
 export const Accordion = React.forwardRef<
   HTMLDivElement,
   AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps
 >(({ children, className, ...rest }, forwardedRef) => (
   <AccordionPrimitive.Root
-    className={twMerge(
-      cx(
-        'w-full overflow-hidden',
-        'rounded-b-lg rounded-t-lg',
-        'border border-gray-200 dark:border-gray-700 dark:border-opacity-50', // border of container
-        'drop-shadow-[0px_1px_2px_rgba(0,_0,_0,_0.8),_0px_1px_2px_-1px_rgba(0,_0,_0,_0.1)]',
-        className,
-      ),
+    className={cn(
+      'w-full overflow-hidden',
+      'rounded-b-lg rounded-t-lg',
+      'border border-gray-200 dark:border-gray-700 dark:border-opacity-50', // border of container
+      'drop-shadow-[0px_1px_2px_rgba(0,_0,_0,_0.8),_0px_1px_2px_-1px_rgba(0,_0,_0,_0.1)]',
+      className,
     )}
     ref={forwardedRef}
     {...rest}
@@ -35,12 +32,10 @@ export const AccordionItem = (props: AccordionItemProps) => {
   return (
     <AccordionPrimitive.Item
       value={value}
-      className={twMerge(
-        cx(
-          'w-full overflow-hidden text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 border-b last:border-b-0', // border bottom on each header trigger except last
-          'border-gray-200 dark:border-gray-700 dark:border-opacity-50',
-          className,
-        ),
+      className={cn(
+        'w-full overflow-hidden text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 border-b last:border-b-0', // border bottom on each header trigger except last
+        'border-gray-200 dark:border-gray-700 dark:border-opacity-50',
+        className,
       )}
       {...rest}
     >
@@ -55,7 +50,7 @@ export const AccordionTrigger = React.forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Header>
     <AccordionPrimitive.Trigger
-      className={cx(
+      className={cn(
         'flex outline-none p-5 place-items-center',
         'w-full group',
         'text-p2',
@@ -84,7 +79,7 @@ export const AccordionContent = React.forwardRef<
   AccordionPrimitive.AccordionContentProps
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
-    className={cx(
+    className={cn(
       'bg-white dark:bg-gray-900 w-full text-gray-500 dark:text-gray-400 leading-6',
       'data-[state=open:border-t dark:data-[state=open]:border-gray-700 dark:data-[state=open]:border-opacity-50', // border top of its content
       'data-[state=open]:animate-accordion-open',
diff --git a/deepfence_frontend/packages/ui-components/src/components/avatar/Avatar.tsx b/deepfence_frontend/packages/ui-components/src/components/avatar/Avatar.tsx
index 8e84e98577..6ddd407af0 100644
--- a/deepfence_frontend/packages/ui-components/src/components/avatar/Avatar.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/avatar/Avatar.tsx
@@ -1,8 +1,7 @@
-import cx from 'classnames';
 import { forwardRef } from 'react';
 import { IconContext } from 'react-icons';
 import { HiOutlineUser } from 'react-icons/hi';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 
 type AvatarType = {
   alt?: string;
@@ -15,7 +14,7 @@ type AvatarType = {
 const DefaultIcon = () => (
   <IconContext.Provider
     value={{
-      className: cx(`w-6 h-6`, {}),
+      className: 'w-6 h-6',
     }}
   >
     <HiOutlineUser />
@@ -28,12 +27,10 @@ export const Avatar = forwardRef<HTMLButtonElement, AvatarType>(
       <button
         ref={ref}
         onClick={onClick}
-        className={twMerge(
-          cx(
-            `inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600`,
-            `text-gray-700 dark:text-gray-100 text-lg`,
-            'outline-none focus-visible:ring-1 focus-visible:ring-gray-900 dark:focus-visible:ring-2 dark:focus-visible:ring-gray-400',
-          ),
+        className={cn(
+          `inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600`,
+          `text-gray-700 dark:text-gray-100 text-lg`,
+          'outline-none focus-visible:ring-1 focus-visible:ring-gray-900 dark:focus-visible:ring-2 dark:focus-visible:ring-gray-400',
           className,
         )}
       >
diff --git a/deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx b/deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx
index 58d6bf6233..ea04e718b2 100644
--- a/deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/badge/Badge.tsx
@@ -1,7 +1,7 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, VariantProps } from 'cva';
 import React, { ComponentProps, forwardRef, useId } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 
 import { ObjectWithNonNullableValues } from '@/types/utils';
 
@@ -163,7 +163,7 @@ export const Badge = forwardRef<HTMLLabelElement, BadgeProps>(
     return (
       <>
         <LabelPrimitive.Label
-          className={twMerge(badgeCVA({ color, variant, size }), className)}
+          className={cn(badgeCVA({ color, variant, size }), className)}
           id={_id}
           data-testid={`badge-${_id}`}
           ref={ref}
diff --git a/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx b/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx
index 181126c55f..ecf825d9c4 100644
--- a/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/breadcrumb/Breadcrumb.tsx
@@ -1,7 +1,6 @@
 import { Slot, Slottable } from '@radix-ui/react-slot';
-import cx from 'classnames';
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 
 type BreadcrumbLinkType = {
   children: React.ReactNode;
@@ -42,15 +41,13 @@ export const BreadcrumbLink = React.forwardRef<
     <>
       <Comp
         {...props}
-        className={twMerge(
-          cx(
-            `inline-flex items-center`,
-            'text-gray-700 dark:text-text-text-and-icon text-[14px] font-normal leading-[30px]',
-            {
-              'dark:text-text-link': isLink,
-            },
-            className,
-          ),
+        className={cn(
+          `inline-flex items-center`,
+          'text-gray-700 dark:text-text-text-and-icon text-[14px] font-normal leading-[30px]',
+          {
+            'dark:text-text-link': isLink,
+          },
+          className,
         )}
         ref={forwardedRef}
       >
@@ -90,5 +87,5 @@ export const Breadcrumb = ({ children }: BreadCrumbProps) => {
     },
   );
 
-  return <div className={cx('flex w-fit items-center bg-transparent')}>{childrenEl}</div>;
+  return <div className="flex w-fit items-center bg-transparent">{childrenEl}</div>;
 };
diff --git a/deepfence_frontend/packages/ui-components/src/components/card/Card.tsx b/deepfence_frontend/packages/ui-components/src/components/card/Card.tsx
index 26c327c620..9508dc5480 100644
--- a/deepfence_frontend/packages/ui-components/src/components/card/Card.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/card/Card.tsx
@@ -1,5 +1,4 @@
-import cx from 'classnames';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'tailwind-preset';
 
 type CardType = {
   children: React.ReactNode;
@@ -8,8 +7,6 @@ type CardType = {
 export const Card = (props: CardType) => {
   const { className = '' } = props;
   return (
-    <div className={twMerge(cx(`rounded-[5px] dark:bg-bg-card`), className)}>
-      {props.children}
-    </div>
+    <div className={cn('rounded-[5px] dark:bg-bg-card', className)}>{props.children}</div>
   );
 };
diff --git a/deepfence_frontend/packages/ui-components/src/components/checkbox/Checkbox.tsx b/deepfence_frontend/packages/ui-components/src/components/checkbox/Checkbox.tsx
index dc0a678685..108294b217 100644
--- a/deepfence_frontend/packages/ui-components/src/components/checkbox/Checkbox.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/checkbox/Checkbox.tsx
@@ -1,8 +1,8 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import cx from 'classnames';
 import { isNil } from 'lodash-es';
 import React, { useEffect, useId } from 'react';
+import { cn } from 'tailwind-preset';
 
 export type CheckboxProps = CheckboxPrimitive.CheckboxProps & {
   label?: React.ReactNode;
@@ -27,7 +27,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
     <div className="flex items-center">
       <CheckboxPrimitive.Root
         id={_id}
-        className={cx(
+        className={cn(
           'flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] peer group',
           'data-[state=unchecked]:bg-gray-50 data-[state=unchecked]:dark:bg-transparent data-[state=unchecked]:border border-gray-300 dark:border-text-text-and-icon',
           'data-[state=checked]:dark:bg-accent-accent',
@@ -69,7 +69,7 @@ export const Checkbox: React.FC<CheckboxProps> = (props) => {
       {!isNil(label) ? (
         <LabelPrimitive.Label
           htmlFor={_id}
-          className={cx(
+          className={cn(
             'pl-1.5 text-p4 dark:text-text-input-value dark:peer-disabled:text-gray-600 peer-disabled:cursor-not-allowed',
           )}
         >
diff --git a/deepfence_frontend/packages/ui-components/src/components/indicator/CountIndicator.tsx b/deepfence_frontend/packages/ui-components/src/components/indicator/CountIndicator.tsx
index 221ce95677..b1606dff45 100644
--- a/deepfence_frontend/packages/ui-components/src/components/indicator/CountIndicator.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/indicator/CountIndicator.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { cn } from 'tailwind-preset';
 
 export interface CountIndicatorProps {
   count: number;
@@ -8,7 +8,7 @@ export interface CountIndicatorProps {
 export const CountIndicator = ({ count, color = 'default' }: CountIndicatorProps) => {
   return (
     <span
-      className={classNames(
+      className={cn(
         'leading-none py-[0.3125rem] px-2.5 rounded-full text-sm font-medium',
         {
           ['bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200']:
diff --git a/deepfence_frontend/packages/ui-components/src/components/input/TextInputArea.tsx b/deepfence_frontend/packages/ui-components/src/components/input/TextInputArea.tsx
index 4d01a3c87b..50ba6422d6 100644
--- a/deepfence_frontend/packages/ui-components/src/components/input/TextInputArea.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/input/TextInputArea.tsx
@@ -1,5 +1,4 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
-import cx from 'classnames';
 import { cva, VariantProps } from 'cva';
 import { isNil } from 'lodash-es';
 import { ComponentProps, forwardRef, useId } from 'react';
@@ -80,7 +79,7 @@ export const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>
     const _id = id ? id : internalId;
 
     return (
-      <div className={cx('flex flex-col gap-2')}>
+      <div className="flex flex-col gap-2">
         {label && (
           <LabelPrimitive.Root
             htmlFor={_id}
diff --git a/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx b/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx
index 467b0d772b..7806a11064 100644
--- a/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/modal/Modal.tsx
@@ -1,7 +1,7 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import cx from 'classnames';
 import { cva, VariantProps } from 'cva';
 import React, { FC, useEffect } from 'react';
+import { cn } from 'tailwind-preset';
 
 import { useUpdateStateIfMounted } from '@/components/hooks/useUpdateStateIfMounted';
 import { ObjectWithNonNullableValues } from '@/types/utils';
@@ -27,13 +27,13 @@ const ModalHeader: FC<{ title?: React.ReactNode }> = ({ title }) => {
   return (
     <>
       <div
-        className={cx('pt-5', {
+        className={cn('pt-5', {
           'pb-[32px]': !title,
           'pb-[22px]': title,
         })}
       >
         <DialogPrimitive.Title
-          className={cx('text-h2 dark:text-text-input-value')}
+          className="text-h2 dark:text-text-input-value"
           data-testid="modal-title"
         >
           {title}
@@ -42,7 +42,7 @@ const ModalHeader: FC<{ title?: React.ReactNode }> = ({ title }) => {
 
       <DialogPrimitive.Close
         aria-label="Close"
-        className={cx(
+        className={cn(
           'absolute top-[30px] right-6 cursor-pointer',
           // text
           'text-gray-400 dark:text-[#ADBBC4]',
@@ -91,7 +91,7 @@ const CloseIcon = () => {
 };
 const contentCva = cva(
   [
-    cx(
+    cn(
       'max-h-[90vh] relative flex flex-col overflow-x-hidden focus:outline-none',
       // border
       'border rounded dark:border-bg-grid-border',
@@ -146,7 +146,7 @@ export const Modal: FC<ModalProps> = ({
     <DialogPrimitive.Root open={wasOpen} {...rest}>
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay
-          className={cx(
+          className={cn(
             'fixed inset-0 bg-black/50 dark:bg-bg-left-nav/80 flex justify-center items-center',
           )}
         >
@@ -159,7 +159,7 @@ export const Modal: FC<ModalProps> = ({
           >
             <ModalHeader title={title} />
             <div
-              className={cx('overflow-y-auto h-full', {
+              className={cn('overflow-y-auto h-full', {
                 'pb-3': footer,
                 'pb-[24px]': !footer,
               })}
diff --git a/deepfence_frontend/packages/ui-components/src/components/popover/Popover.tsx b/deepfence_frontend/packages/ui-components/src/components/popover/Popover.tsx
index 2f828e4aeb..f49a95e314 100644
--- a/deepfence_frontend/packages/ui-components/src/components/popover/Popover.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/popover/Popover.tsx
@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import cx from 'classnames';
+import { cn } from 'tailwind-preset';
 
 interface FocusableElement {
   focus(options?: FocusOptions): void;
@@ -35,7 +35,7 @@ export const Popover: React.FC<PopoverProps> = (props) => {
           sideOffset={4}
           align={align}
           onCloseAutoFocus={() => elementToFocusOnCloseRef?.current?.focus()}
-          className={cx(
+          className={cn(
             'data-[side=top]:animate-slide-up data-[side=bottom]:animate-slide-down',
             'shadow-md bg-white dark:bg-gray-700 min-w-[195px]',
             'rounded-md overflow-hidden',
diff --git a/deepfence_frontend/packages/ui-components/src/components/stepper/Stepper.tsx b/deepfence_frontend/packages/ui-components/src/components/stepper/Stepper.tsx
index 5ee754e942..3b635718c4 100644
--- a/deepfence_frontend/packages/ui-components/src/components/stepper/Stepper.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/stepper/Stepper.tsx
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { cn } from 'tailwind-preset';
 
 type StepProps = {
   indicator: React.ReactNode;
@@ -9,15 +9,15 @@ type StepProps = {
 export const Step = ({ indicator, title, children }: StepProps) => {
   return (
     <div
-      className={cx(
+      className={cn(
         'relative p-1 flex flex-col dark:text-text-text-and-icon',
         `after:content-[' '] after:absolute after:left-5 after:top-10 after:bottom-0 after:w-0 after:h-auto after:border-l after:border-gray-200 dark:after:border-gray-700`,
         'last:after:hidden',
       )}
     >
-      <div className={cx('inline relative')}>
+      <div className="inline relative">
         <div
-          className={cx(
+          className={cn(
             'absolute flex items-center justify-center w-8 h-8 border rounded-full text-h4',
             'border-gray-100 dark:border-bg-card bg-gray-100 dark:bg-bg-card',
           )}
diff --git a/deepfence_frontend/packages/ui-components/src/components/switch/Switch.tsx b/deepfence_frontend/packages/ui-components/src/components/switch/Switch.tsx
index 321f4e290b..6e6bde5685 100644
--- a/deepfence_frontend/packages/ui-components/src/components/switch/Switch.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/switch/Switch.tsx
@@ -1,7 +1,7 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import cx from 'classnames';
 import { useId } from 'react';
+import { cn } from 'tailwind-preset';
 
 type SizeType = 'md';
 
@@ -15,11 +15,11 @@ const Switch = (props: SwitchProps) => {
   const internalId = useId();
   const _id = id ? id : internalId;
   return (
-    <div className={cx('flex items-center')}>
+    <div className="flex items-center">
       <SwitchPrimitive.Root
         id={_id}
         disabled={disabled}
-        className={cx(
+        className={cn(
           'group peer items-center disabled:cursor-not-allowed',
           'dark:data-[state=checked]:bg-[#60B515]',
           'dark:disabled:data-[state=checked]:bg-gray-600',
@@ -38,7 +38,7 @@ const Switch = (props: SwitchProps) => {
         {...rest}
       >
         <SwitchPrimitive.Thumb
-          className={cx(
+          className={cn(
             'translate-x-[2px] dark:bg-bg-left-nav',
             'pointer-events-none inline-block transform rounded-full',
             'transition duration-200 ease-in-out',
@@ -54,7 +54,7 @@ const Switch = (props: SwitchProps) => {
       {label?.length && (
         <LabelPrimitive.Label
           htmlFor={_id}
-          className={cx(
+          className={cn(
             'pl-2 text-p4 dark:text-text-text-and-icon cursor-default',
             'dark:peer-disabled:text-gray-600 dark:peer-disabled:cursor-not-allowed',
           )}
diff --git a/deepfence_frontend/pnpm-lock.yaml b/deepfence_frontend/pnpm-lock.yaml
index d29326bd90..2f96832b9b 100644
--- a/deepfence_frontend/pnpm-lock.yaml
+++ b/deepfence_frontend/pnpm-lock.yaml
@@ -36,7 +36,6 @@ importers:
       '@vitejs/plugin-react': ^3.0.1
       '@vitest/coverage-c8': ^0.32.2
       autoprefixer: ^10.4.14
-      classnames: ^2.3.2
       dayjs: ^1.11.8
       echarts: ^5.4.2
       eslint: ^8.43.0
@@ -58,7 +57,6 @@ importers:
       resize-observer-polyfill: ^1.5.1
       rollup-plugin-visualizer: ^5.9.0
       sonner: ^0.1.1
-      tailwind-merge: ^1.13.2
       tailwind-preset: workspace:*
       tailwindcss: ^3.3.2
       typescript: ^4.9.5
@@ -75,7 +73,6 @@ importers:
       '@suspensive/react': 1.11.2_react@18.2.0
       '@suspensive/react-query': 1.11.2_r75tbvf5dlmmubzfpdmfqdf67m
       '@tanstack/react-query': 4.29.17_biqbaboplfbrettd7655fr4n2y
-      classnames: 2.3.2
       dayjs: 1.11.8
       echarts: 5.4.2
       lodash-es: 4.17.21
@@ -85,7 +82,6 @@ importers:
       react-router-dom: 6.14.0_biqbaboplfbrettd7655fr4n2y
       react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
       sonner: 0.1.1_react@18.2.0
-      tailwind-merge: 1.13.2
       tailwind-preset: link:../../packages/tailwind-preset
       ui-components: link:../../packages/ui-components
     devDependencies:
@@ -172,7 +168,6 @@ importers:
       '@vitejs/plugin-react': ^3.0.1
       '@vitest/coverage-c8': ^0.32.2
       autoprefixer: ^10.4.14
-      classnames: ^2.3.2
       cva: npm:class-variance-authority@^0.6.0
       eslint: ^8.43.0
       eslint-config-prettier: ^8.8.0
@@ -192,7 +187,6 @@ importers:
       resize-observer-polyfill: ^1.5.1
       rollup-plugin-visualizer: ^5.9.2
       storybook: ^7.0.23
-      tailwind-merge: ^1.13.2
       tailwind-preset: workspace:*
       tailwindcss: ^3.3.2
       typescript: ^4.9.5
@@ -214,11 +208,9 @@ importers:
       '@radix-ui/react-tabs': 1.0.4_hrrtw4it2dqo6rzcqzvl36ff7i
       '@radix-ui/react-tooltip': 1.0.6_hrrtw4it2dqo6rzcqzvl36ff7i
       '@tanstack/react-table': 8.9.3_biqbaboplfbrettd7655fr4n2y
-      classnames: 2.3.2
       cva: /class-variance-authority/0.6.0_typescript@4.9.5
       lodash-es: 4.17.21
       react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
-      tailwind-merge: 1.13.2
       tailwind-preset: link:../tailwind-preset
     devDependencies:
       '@storybook/addon-a11y': 7.0.23_biqbaboplfbrettd7655fr4n2y
@@ -11936,10 +11928,6 @@ packages:
       tslib: 2.5.0
     dev: true
 
-  /tailwind-merge/1.13.2:
-    resolution: {integrity: sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==}
-    dev: false
-
   /tailwind-merge/1.9.0:
     resolution: {integrity: sha512-coziXxViLHbVtFvD1+jwSu+UmDJSFX4dhj9ZuqHCuhTzu9Wk5wMedAz5AVY3uUYw95TaO7NwgUS/dLGcWvtgqw==}
     dev: false