diff --git a/src/Components/Logo/Logo.tsx b/src/Components/Logo/Logo.tsx
index 12178880..5831a892 100644
--- a/src/Components/Logo/Logo.tsx
+++ b/src/Components/Logo/Logo.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 
 interface LogoProps {
@@ -8,7 +9,10 @@ function Logo({ classNames = '' }: LogoProps) {
   return (
     <Link
       to={'/'}
-      className={`flex items-center font-serif text-2xl text-zinc-600 ${classNames}`}
+      className={clsx(
+        'flex items-center font-serif text-2xl text-zinc-600',
+        classNames
+      )}
     >
       Employee Pulse
     </Link>
diff --git a/src/Layouts/GlobalLoader/GlobalLoader.tsx b/src/Layouts/GlobalLoader/GlobalLoader.tsx
index 920aac9e..0310586d 100644
--- a/src/Layouts/GlobalLoader/GlobalLoader.tsx
+++ b/src/Layouts/GlobalLoader/GlobalLoader.tsx
@@ -7,7 +7,7 @@ export default function GlobalLoader() {
     <motion.div
       exit={{ opacity: 0 }}
       transition={{ duration: 0.6, type: 'tween' }}
-      className="bg-zinc-100 w-screen h-screen fixed top-0 left-0 z-50 tran"
+      className="bg-zinc-100 w-screen h-screen fixed top-0 left-0 z-50"
     >
       <div className="fixed text-center left-[50%] top-[45%] -translate-x-[50%] -translate-y-[50%]">
         <Logo classNames="text-6xl mb-10 leading-[80px]" />