diff --git a/ui/eslint.config.js b/ui/eslint.config.js
index 558620e..ae000d9 100644
--- a/ui/eslint.config.js
+++ b/ui/eslint.config.js
@@ -71,7 +71,10 @@ export default [
     files: ['**/*.{ts,tsx}'],
     languageOptions: { parser: tsParser },
     plugins: { '@typescript-eslint': tsPlugin },
-    rules: tsPlugin.configs.recommended.rules,
+    rules: {
+      ...tsPlugin.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
   },
   prettier,
 ]
diff --git a/ui/src/components/layouts/AuthLayout/Cover.tsx b/ui/src/components/layouts/AuthLayout/Cover.tsx
index 1acd792..0820a39 100644
--- a/ui/src/components/layouts/AuthLayout/Cover.tsx
+++ b/ui/src/components/layouts/AuthLayout/Cover.tsx
@@ -6,6 +6,7 @@ import type { ReactNode, ReactElement } from 'react'
 import { Avatar } from '@/components/ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ROUTES_ENUM } from '@/routes/route.constant'
+import useDarkMode from '@/utils/hooks/useDarkmode'
 
 interface CoverProps extends CommonProps {
   content?: ReactNode
@@ -13,6 +14,7 @@ interface CoverProps extends CommonProps {
 
 const Cover = ({ children, content, ...rest }: CoverProps) => {
   const { translate } = useLocalization()
+  const [isDarkMode] = useDarkMode()
 
   return (
     <div className="grid lg:grid-cols-3 h-full">
@@ -26,7 +28,7 @@ const Cover = ({ children, content, ...rest }: CoverProps) => {
         <div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
 
         <div className="relative z-10 flex flex-col h-full justify-between">
-          <Logo mode="dark" url={ROUTES_ENUM.authenticated.login} />
+          <Logo mode={isDarkMode ? 'dark' : 'light'} url={ROUTES_ENUM.authenticated.login} />
           <div>
             <div className="mb-6 flex items-center gap-4">
               <Avatar className="border-2 border-white" shape="circle" src="/img/others/cto.png" />
diff --git a/ui/src/components/layouts/AuthLayout/Side.tsx b/ui/src/components/layouts/AuthLayout/Side.tsx
index 7e1471f..4700aaa 100644
--- a/ui/src/components/layouts/AuthLayout/Side.tsx
+++ b/ui/src/components/layouts/AuthLayout/Side.tsx
@@ -5,6 +5,7 @@ import { APP_NAME } from '@/constants/app.constant'
 import type { CommonProps } from '@/proxy/common'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ROUTES_ENUM } from '@/routes/route.constant'
+import useDarkMode from '@/utils/hooks/useDarkmode'
 
 interface SideProps extends CommonProps {
   content?: React.ReactNode
@@ -12,6 +13,7 @@ interface SideProps extends CommonProps {
 
 const Side = ({ children, content, ...rest }: SideProps) => {
   const { translate } = useLocalization()
+  const [isDarkMode] = useDarkMode()
 
   return ( 
     <div className="grid lg:grid-cols-3 h-full">
@@ -23,7 +25,7 @@ const Side = ({ children, content, ...rest }: SideProps) => {
       >
         <div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
         <div className="relative z-10 flex flex-col h-full justify-between">
-          <Logo className="drop-shadow-md" url={ROUTES_ENUM.authenticated.login} />
+          <Logo mode={isDarkMode ? 'dark' : 'light'} className="drop-shadow-md" url={ROUTES_ENUM.authenticated.login} />
           <div>
             <div className="mb-6 flex items-center gap-4">
               <Avatar className="border-2 border-white" shape="circle" src="/img/others/cto.png" />
diff --git a/ui/src/components/layouts/AuthLayout/Simple.tsx b/ui/src/components/layouts/AuthLayout/Simple.tsx
index 2535dea..8a5caf8 100644
--- a/ui/src/components/layouts/AuthLayout/Simple.tsx
+++ b/ui/src/components/layouts/AuthLayout/Simple.tsx
@@ -13,6 +13,7 @@ import { components } from 'react-select'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { hasSubdomain } from '@/utils/subdomain'
 import { dateLocales } from '@/constants/dateLocales.constant'
+import useDarkMode from '@/utils/hooks/useDarkmode'
 
 interface SimpleProps extends CommonProps {
   content?: ReactNode
@@ -22,6 +23,7 @@ const Simple = ({ children, content, ...rest }: SimpleProps) => {
   const { config } = useStoreState((state) => state.abpConfig)
   const { setLang } = useStoreActions((actions) => actions.locale)
   const currentCulture = config?.localization?.currentCulture?.cultureName
+  const [isDarkMode] = useDarkMode()
 
   const languageList = config?.localization.languages
 
@@ -55,7 +57,7 @@ const Simple = ({ children, content, ...rest }: SimpleProps) => {
     }
   }
 
-  const CustomSelectOption = ({ innerProps, label, data, isSelected }: any) => {
+  const CustomSelectOption = ({ innerProps, data, isSelected }: any) => {
     return (
       <div
         className={`flex items-center justify-between p-2 ${
@@ -131,7 +133,7 @@ const Simple = ({ children, content, ...rest }: SimpleProps) => {
           </div>
 
           <div className="text-center">
-            <Logo type="streamline" imgClass="mx-auto" url={ROUTES_ENUM.authenticated.login} />
+            <Logo mode={isDarkMode ? 'dark' : 'light'} type="streamline" imgClass="mx-auto" url={ROUTES_ENUM.authenticated.login} />
           </div>
 
           <div className="text-center">
diff --git a/ui/src/components/layouts/PublicLayout.tsx b/ui/src/components/layouts/PublicLayout.tsx
index 8d29c96..a32278b 100644
--- a/ui/src/components/layouts/PublicLayout.tsx
+++ b/ui/src/components/layouts/PublicLayout.tsx
@@ -184,7 +184,7 @@ const PublicLayout = () => {
         >
           <div className="container mx-auto px-6 relative grid grid-cols-[auto_1fr_auto] items-center lg:grid-cols-[1fr_auto] xl:grid-cols-[auto_1fr_auto]">
             <Logo
-              mode="dark"
+              mode={isDarkMode ? 'dark' : 'light'}
               className="relative z-10 max-w-[190px] overflow-hidden lg:hidden xl:block xl:max-w-none"
               imgClass="h-10 w-auto object-contain xl:h-auto"
             />
@@ -240,7 +240,6 @@ const PublicLayout = () => {
                 })}
             </nav>
 
-            {/* Right side: Language + Login */}
             <div className="relative z-10 hidden lg:flex lg:col-start-2 xl:col-start-3 lg:justify-self-end items-center gap-3">
               {demoButton('rounded-lg')}
               <div className="h-5 w-px bg-white/20" />
@@ -390,7 +389,7 @@ const PublicLayout = () => {
           <div className="container mx-auto px-4">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
               <div>
-                <Logo mode="dark" />
+                <Logo mode={isDarkMode ? 'dark' : 'light'} />
                 <p className="mt-4 text-gray-400 text-sm">
                   {translate('::Public.footer.companyInfo')}
                 </p>
diff --git a/ui/src/components/template/Logo.tsx b/ui/src/components/template/Logo.tsx
index ffdb218..d443680 100644
--- a/ui/src/components/template/Logo.tsx
+++ b/ui/src/components/template/Logo.tsx
@@ -25,6 +25,10 @@ const Logo = (props: LogoProps) => {
     logoWidth = 'auto',
     url = ROUTES_ENUM.protected.dashboard,
   } = props
+  const modeImgClass =
+    mode === 'dark'
+      ? 'brightness-150 contrast-105 saturate-75'
+      : 'brightness-100 contrast-110 saturate-110'
 
   return (
     <div
@@ -36,7 +40,7 @@ const Logo = (props: LogoProps) => {
     >
       <Link to={url}>
         <img
-          className={imgClass}
+          className={classNames(modeImgClass, imgClass)}
           src={`${LOGO_SRC_PATH}logo-${mode}-${type}.png`}
           alt={`${APP_NAME} logo`}
         />
diff --git a/ui/src/views/public/Logo.tsx b/ui/src/views/public/Logo.tsx
index 928f62d..615b05b 100644
--- a/ui/src/views/public/Logo.tsx
+++ b/ui/src/views/public/Logo.tsx
@@ -16,6 +16,10 @@ const LOGO_SRC_PATH = '/img/logo/'
 
 const Logo = (props: LogoProps) => {
   const { type = 'full', mode = 'light', className, imgClass, style, logoWidth = 'auto' } = props
+  const modeImgClass =
+    mode === 'dark'
+      ? 'brightness-150 contrast-105 saturate-75'
+      : 'brightness-100 contrast-110 saturate-110'
 
   return (
     <div
@@ -27,7 +31,7 @@ const Logo = (props: LogoProps) => {
     >
       <Link to={ROUTES_ENUM.public.home}>
         <img
-          className={imgClass}
+          className={classNames(modeImgClass, imgClass)}
           src={`${LOGO_SRC_PATH}logo-${mode}-${type}.png`}
           alt={`${APP_NAME} logo`}
         />