diff --git a/packages/ui/skeleton/index.tsx b/packages/ui/skeleton/index.tsx
index 22f339babe..2812522716 100644
--- a/packages/ui/skeleton/index.tsx
+++ b/packages/ui/skeleton/index.tsx
@@ -18,24 +18,27 @@ interface SkeletonContainer {
   className?: string;
 }
 
-const SkeletonAvatar: React.FC<AvatarProps> = ({ width, height }) => {
+const SkeletonAvatar: React.FC<AvatarProps> = ({ width, height, className }) => {
   return (
-    <div className={`mt-1 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2 w-${width} h-${height} ${classNames}`} />
+    <div className={`mt-1 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2 w-${width} h-${height} ${className}`} />
   );
 };
 
-const SkeletonText: React.FC<SkeletonBaseProps> = ({ width, height }) => {
+const SkeletonText: React.FC<SkeletonBaseProps> = ({ width, height, className }) => {
   return (
     <div
-      className={classNames(`rounded-md bg-gray-200 dark:bg-gray-900 w-${width} h-${height}`, classNames)}
+      className={classNames(
+        `dark:white-300 animate-pulse rounded-md bg-gray-300 w-${width} h-${height}`,
+        className
+      )}
     />
   );
 };
 
-const SkeletonButton: React.FC<SkeletonBaseProps> = ({ width, height }) => {
+const SkeletonButton: React.FC<SkeletonBaseProps> = ({ width, height, className }) => {
   return (
     <SkeletonContainer>
-      <div className={`w-${width} h-${height} bg-gray-200 ${classNames}`} />
+      <div className={`w-${width} h-${height} bg-gray-200 ${className}`} />
     </SkeletonContainer>
   );
 };