diff --git a/holi-bricks/components/image/Image.tsx b/holi-bricks/components/image/Image.tsx
index f9b772fbb5b72b93107ea9ac93c1e632fdbd0e5c..c36da20de0efd7fb10faaaed4d0d1f1a36ac0372 100644
--- a/holi-bricks/components/image/Image.tsx
+++ b/holi-bricks/components/image/Image.tsx
@@ -35,7 +35,7 @@ export const Image: React.FC<ImageProps> = ({
 }) => {
   const [hasError, setHasError] = useState(false)
   const transformedSource =
-    typeof width === 'number' && typeof height === 'number' ? setScalingParams(source, width, height) : undefined // todo
+    typeof width === 'number' && typeof height === 'number' ? setScalingParams(source, width, height) : undefined
   const isRemote = isRemoteSource(source)
   const localSvg = typeof source === 'number' && isLocalSvg(source)
   const { styles } = useStyles(stylesheet)
diff --git a/holi-bricks/components/image/Image.web.tsx b/holi-bricks/components/image/Image.web.tsx
index 9be9ad7440da35b4616b50783a59e8c9a183454d..2b476ec5949d23af8e0ab1c212d99187b9519205 100644
--- a/holi-bricks/components/image/Image.web.tsx
+++ b/holi-bricks/components/image/Image.web.tsx
@@ -1,11 +1,11 @@
-import type { ImageProps } from 'holi-bricks/components/image'
-import type React from 'react'
-import { useState } from 'react'
-import NextImage from 'next/image'
 import { accessibilityProps } from 'holi-bricks/accessibility'
+import type { ImageProps } from 'holi-bricks/components/image'
 import { setScalingParams } from 'holi-bricks/components/image/helpers'
-import { createStyleSheet } from 'holi-bricks/utils'
 import { useStyles } from 'holi-bricks/hooks'
+import { createStyleSheet } from 'holi-bricks/utils'
+import NextImage from 'next/image'
+import type React from 'react'
+import { useState } from 'react'
 import { View } from 'react-native'
 
 export const isRemoteSource = (source: string): source is string => {
@@ -27,7 +27,11 @@ export const Image: React.FC<ImageProps> = ({
 }) => {
   const [hasError, setHasError] = useState(false)
   const isRemote = isRemoteSource(source as string)
-  const transformedSource = (isRemote ? setScalingParams(source as string, width, height) : source) as string
+  const transformedSource = (
+    isRemote && typeof width === 'number' && typeof height === 'number'
+      ? setScalingParams(source as string, width, height)
+      : source
+  ) as string
   const { styles } = useStyles(stylesheet)
 
   return (
@@ -38,8 +42,8 @@ export const Image: React.FC<ImageProps> = ({
         role="img"
         aria-label={alt}
         blurDataURL={isRemote ? blurhash : undefined}
-        width={width}
-        height={height}
+        width={width as number | undefined}
+        height={height as number | undefined}
         style={{ objectFit: resizeMode }}
         onError={() => {
           setHasError(true)
diff --git a/holi-bricks/components/image/type.ts b/holi-bricks/components/image/type.ts
index 1ce12d5165c6e9ec23d57147d3071922feb4fa1e..b75bf6875683b37e7233c82bfda8dab5615645f7 100644
--- a/holi-bricks/components/image/type.ts
+++ b/holi-bricks/components/image/type.ts
@@ -1,13 +1,12 @@
 import type { ImageContentFit } from 'expo-image'
 import type { AccessibilityProps } from 'holi-bricks/accessibility'
-import type { DimensionValue } from 'react-native'
 
 export type ImageSource = string | number
 
 export interface ImageProps extends AccessibilityProps {
   source: ImageSource
-  width: DimensionValue
-  height: DimensionValue
+  width: number | `${number}%`
+  height: number | `${number}%`
   resizeMode?: ImageContentFit
   onError?: () => void
   onLoadEnd?: () => void