diff --git a/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx b/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
index e8d2a5ca..04fbef9c 100644
--- a/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+++ b/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
 import Card from '@/components/Card';
 import { formatNumber } from '@/lib/helper';
+import { Icon } from '@iconify/react';
 
 interface UniformityGaugeChartProps {
   value: number;
@@ -9,6 +10,9 @@ interface UniformityGaugeChartProps {
   week?: string;
   currentValue?: number;
   totalValue?: number;
+  onWeekChange?: (direction: 'prev' | 'next') => void;
+  hasPrevWeek?: boolean;
+  hasNextWeek?: boolean;
 }
 
 const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
@@ -17,6 +21,9 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
   week,
   currentValue,
   totalValue,
+  onWeekChange,
+  hasPrevWeek = false,
+  hasNextWeek = false,
 }) => {
   const numberOfSegments = 50;
   const filledSegments = Math.round((value / 100) * numberOfSegments);
@@ -70,29 +77,49 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
           </div>
         </div>
       </div>
-      <Card
-        variant='bordered'
-        className={{
-          wrapper: 'max-w-max mx-auto',
-        }}
-      >
-        <section className='flex items-center justify-center gap-4'>
-          <div className='grid grid-cols-1 min-w-0 text-center'>
-            <div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
-              <span className='text-[#0069E0] font-semibold truncate text-center flex justify-center'>
-                {week}
-              </span>
+      <div className='flex items-center justify-center gap-2 w-full'>
+        <button
+          onClick={() => onWeekChange?.('prev')}
+          disabled={!hasPrevWeek}
+          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          aria-label='Previous week'
+        >
+          <Icon icon='heroicons:chevron-left' width={20} height={20} />
+        </button>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'max-w-xs',
+          }}
+        >
+          <section className='flex items-center justify-center gap-4'>
+            <div className='grid grid-cols-1 min-w-0 text-center'>
+              <div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
+                <span className='text-[#0069E0] font-semibold truncate'>
+                  {week}
+                </span>
+              </div>
+              <div className='text-xl font-bold text-[#18181B80]'>
+                <span className='text-[#0069E0] break-all'>
+                  {formatNumber(currentValue ?? 0)}
+                </span>
+                <span className='mx-1 text-gray-400 text-base'>From</span>
+                <span className='break-all'>
+                  {formatNumber(totalValue ?? 0)}
+                </span>
+              </div>
             </div>
-            <div className='text-xl font-bold text-[#18181B80]'>
-              <span className='text-[#0069E0] break-all'>
-                {formatNumber(currentValue ?? 0)}
-              </span>
-              <span className='mx-1 text-gray-400 text-base'>From</span>
-              <span className='break-all'>{formatNumber(totalValue ?? 0)}</span>
-            </div>
-          </div>
-        </section>
-      </Card>
+          </section>
+        </Card>
+        <button
+          onClick={() => onWeekChange?.('next')}
+          disabled={!hasNextWeek}
+          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          aria-label='Next week'
+        >
+          <Icon icon='heroicons:chevron-right' width={20} height={20} />
+        </button>
+      </div>
     </div>
   );
 };