diff --git a/src/pages/Dashboard/UptimeChart/ConsensusUptimeCard.tsx b/src/pages/Dashboard/UptimeChart/ConsensusUptimeCard.tsx
index 2b1167b1..3889559e 100644
--- a/src/pages/Dashboard/UptimeChart/ConsensusUptimeCard.tsx
+++ b/src/pages/Dashboard/UptimeChart/ConsensusUptimeCard.tsx
@@ -17,9 +17,11 @@ const ConsensusUptimeCard = () => {
                     <Text size={27} weight={'semibold'}>98%</Text>
                     <Text size={13} color='$red'>-2%</Text>
                 </XStack>
-                <Stack width={'100%'} height={'50%'}>
-                    <UptimeChart />
-                </Stack>
+                <XStack width={'100%'} height={'50%'} justifyContent="center" alignItems="center">
+                    <Stack style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '80%', height: '100%' }}>
+                        <UptimeChart />
+                    </Stack>
+                </XStack>
             </YStack>
 
         </Shadow >
diff --git a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
index 460fe509..fa30cdd3 100644
--- a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
+++ b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
@@ -55,10 +55,8 @@ interface DataItem {
 
 const UptimeChart = () => {
     return (
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer  >
             <BarChart
-                width={500}
-                height={300}
                 data={data}
                 margin={{
                     top: 5,
@@ -66,6 +64,7 @@ const UptimeChart = () => {
                     left: 20,
                     bottom: 5,
                 }}
+                style={{ backgroundColor: '#F0F2F5' }}
             >
                 <Bar dataKey="pv" barSize={2} fill="#E95460" />
             </BarChart>