diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index fe7f9aff..8d5994b2 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -1,4 +1,3 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 const LeftLegend = () => {
@@ -65,26 +64,32 @@ const ChartArea = () => {
 
 const EmptyState = () => {
   return (
-    <>
-      <div className='absolute inset-0 flex flex-col items-center justify-center z-10'>
-        <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-2.5'>
-          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
-            <Icon
-              fontSize={26}
-              icon={'heroicons:funnel'}
-              className='text-white'
-            />
-          </Button>
+    <div className='absolute inset-0 flex items-center justify-center z-10'>
+      <div className='flex flex-col items-center justify-center'>
+        {/* Filter icon */}
+        <div className='mb-2'>
+          <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+            <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            </div>
+          </div>
         </div>
-        <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
+
+        {/* Empty state text */}
+        <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
           No Filters Selected
-        </span>
-        <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
+        </h3>
+        <p className='text-base-content/50 text-xs text-center max-w-xs'>
           Please choose filters to narrow down your results and make your search
           easier.
-        </span>
+        </p>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
index a72875f5..f49ebc85 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
@@ -1,4 +1,3 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import React from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
@@ -55,23 +54,29 @@ const UniformityGaugeChartSkeleton: React.FC<
               </Pie>
             </PieChart>
           </ResponsiveContainer>
-          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
-            <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mt-5 mb-2.5'>
-              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
-                <Icon
-                  fontSize={26}
-                  icon={'heroicons:funnel'}
-                  className='text-white'
-                />
-              </Button>
+          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center mt-4'>
+            {/* Filter icon */}
+            <div className='mb-2 mt-5'>
+              <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+                <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+                  <Icon
+                    icon='heroicons:funnel'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                </div>
+              </div>
             </div>
-            <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
+
+            {/* Empty state text */}
+            <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
               No Filters Selected
-            </span>
-            <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
+            </h3>
+            <p className='text-base-content/50 text-xs text-center max-w-xs'>
               Please choose filters to narrow down your results and make your
               search easier.
-            </span>
+            </p>
           </div>
         </div>
       </div>
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
index 08c1e0b5..f70b23e1 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityTableSkeleton.tsx
@@ -1,25 +1,30 @@
-import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 const UniformityTableSkeleton = () => {
   return (
-    <div className='flex flex-col items-center justify-center gap-2 my-20'>
-      <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-9'>
-        <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
-          <Icon
-            fontSize={26}
-            icon={'heroicons:document-text'}
-            className='text-white'
-          />
-        </Button>
+    <div className='flex flex-col items-center justify-center my-20'>
+      {/* Document icon */}
+      <div className='mb-2'>
+        <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
+          <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+            <Icon
+              icon='heroicons:document-text'
+              className='text-white'
+              width={20}
+              height={20}
+            />
+          </div>
+        </div>
       </div>
-      <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
+
+      {/* Empty state text */}
+      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
         No Data Available
-      </span>
-      <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
+      </h3>
+      <p className='text-base-content/50 text-xs text-center max-w-xs'>
         There is no uniformity data displayed. Enter uniformity check data to
         get started.
-      </span>
+      </p>
     </div>
   );
 };