diff --git a/.changelog/1186.bugfix.md b/.changelog/1186.bugfix.md
new file mode 100644
index 000000000..ca128c084
--- /dev/null
+++ b/.changelog/1186.bugfix.md
@@ -0,0 +1 @@
+Fix Safari buggy display of block fill
diff --git a/src/app/components/Blocks/index.tsx b/src/app/components/Blocks/index.tsx
index 820a41985..927da23e6 100644
--- a/src/app/components/Blocks/index.tsx
+++ b/src/app/components/Blocks/index.tsx
@@ -72,9 +72,7 @@ export const Blocks: FC<BlocksProps> = ({
       key: block.hash,
       data: [
         {
-          content: (
-            <VerticalProgressBar variant="determinate" value={(100 * block.gas_used) / blockGasLimit} />
-          ),
+          content: <VerticalProgressBar value={(100 * block.gas_used) / blockGasLimit} />,
           key: 'fill',
         },
         {
diff --git a/src/app/components/ProgressBar/index.ts b/src/app/components/ProgressBar/index.ts
deleted file mode 100644
index 325237cc6..000000000
--- a/src/app/components/ProgressBar/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import MuiLinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
-import { styled } from '@mui/material/styles'
-import { COLORS } from 'styles/theme/colors'
-
-export const VerticalProgressBar = styled(MuiLinearProgress)(() => ({
-  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
-    backgroundColor: COLORS.brandDark,
-  },
-  height: 36,
-  width: 36,
-  transform: 'rotate(-90deg)',
-}))
-
-export const ProgressBar = styled(MuiLinearProgress)(() => ({
-  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
-    backgroundColor: COLORS.eucalyptus,
-  },
-  borderColor: COLORS.eucalyptus,
-  backgroundColor: COLORS.honeydew,
-  height: '12px',
-  width: '85px',
-}))
diff --git a/src/app/components/ProgressBar/index.tsx b/src/app/components/ProgressBar/index.tsx
new file mode 100644
index 000000000..39098f3b1
--- /dev/null
+++ b/src/app/components/ProgressBar/index.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react'
+import Box from '@mui/material/Box'
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
+import { styled } from '@mui/material/styles'
+import { COLORS } from 'styles/theme/colors'
+
+type VerticalProgressBarProps = {
+  value: number
+}
+
+const barSize = 36
+
+export const VerticalProgressBar: FC<VerticalProgressBarProps> = ({ value }) => {
+  return (
+    <Box sx={{ width: barSize, height: barSize, transform: 'rotate(-90deg)' }}>
+      <StyledLinearProgress variant="determinate" value={value} />
+    </Box>
+  )
+}
+
+const StyledLinearProgress = styled(LinearProgress)(() => ({
+  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
+    backgroundColor: COLORS.brandDark,
+  },
+  height: barSize,
+  width: barSize,
+}))
+
+export const ProgressBar = styled(LinearProgress)(() => ({
+  [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: {
+    backgroundColor: COLORS.eucalyptus,
+  },
+  borderColor: COLORS.eucalyptus,
+  backgroundColor: COLORS.honeydew,
+  height: '12px',
+  width: '85px',
+}))