diff --git a/example/src/Chess/gameConfig/gameConfig.tsx b/example/src/Chess/gameConfig/gameConfig.tsx
index 43c1c6a..fcf6551 100644
--- a/example/src/Chess/gameConfig/gameConfig.tsx
+++ b/example/src/Chess/gameConfig/gameConfig.tsx
@@ -7,7 +7,8 @@ import { isZoneAvailable } from '../gameLogic';
 const zones = createGridZones({
   rows: 8,
   columns: 8,
-  gridSize: 45,
+  gridSizeX: 45,
+  gridSizeY: 45,
   offsetX: 20,
   offsetY: 20,
 });
diff --git a/src/Piece/Piece.tsx b/src/Piece/Piece.tsx
index 1c044d9..3c3905d 100644
--- a/src/Piece/Piece.tsx
+++ b/src/Piece/Piece.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useRef, useState, memo } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -280,4 +280,4 @@ function Piece(props: PieceProps) {
   );
 }
 
-export default memo(Piece);
+export default Piece;
diff --git a/src/Zone/Zone.tsx b/src/Zone/Zone.tsx
index 29976af..bc9c983 100644
--- a/src/Zone/Zone.tsx
+++ b/src/Zone/Zone.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useState, memo } from 'react';
+import React, { useEffect, useState } from 'react';
+import { type StyleProp, type View, Image } from 'react-native';
 import styled from 'styled-components/native';
+
 import { ZONE_TYPE, type ZoneType } from './types';
-import { type StyleProp, type View } from 'react-native';
 import { ZONE_SPACING } from './zoneSpacing';
 
 const Container = styled.TouchableOpacity<Partial<ZoneProps>>`
@@ -19,6 +20,8 @@ export type ZoneProps = ZoneType & {
   available?: boolean;
   ctx: any;
   moves: any;
+  zoneImageSource?: any;
+  zoneImageProps?: any;
 };
 
 enum COMPONENT_STATE {
@@ -27,8 +30,18 @@ enum COMPONENT_STATE {
 }
 
 function Zone(props: ZoneProps) {
-  const { x, y, width, height, devMode, onPress, availableStyle, available } =
-    props;
+  const {
+    x,
+    y,
+    width,
+    height,
+    devMode,
+    onPress,
+    availableStyle,
+    available,
+    zoneImageSource,
+    zoneImageProps,
+  } = props;
 
   let [xCoord, setXCoord] = useState(
     typeof x === 'number' ? x : ZONE_SPACING[x](width)
@@ -79,8 +92,12 @@ function Zone(props: ZoneProps) {
           borderRadius: 5,
         },
       ]}
-    />
+    >
+      {zoneImageSource ?? (
+        <Image source={zoneImageSource} {...zoneImageProps} />
+      )}
+    </Container>
   );
 }
 
-export default memo(Zone);
+export default Zone;
diff --git a/src/Zone/createGridZones.ts b/src/Zone/createGridZones.ts
index 8176d73..43abacb 100644
--- a/src/Zone/createGridZones.ts
+++ b/src/Zone/createGridZones.ts
@@ -7,9 +7,11 @@ export function createGridZones({
   offsetY = 0,
   gapX = 0,
   gapY = 0,
-  gridSize,
+  gridSizeX,
+  gridSizeY,
 }: {
-  gridSize: number;
+  gridSizeX: number;
+  gridSizeY: number;
   rows: number;
   columns: number;
   offsetX?: number;
@@ -22,10 +24,10 @@ export function createGridZones({
     for (let y = 0; y < columns; y++) {
       zones.push({
         zType: ZONE_TYPE.single,
-        x: x * gridSize + offsetX + x * gapX,
-        y: y * gridSize + offsetY + y * gapY,
-        width: gridSize,
-        height: gridSize,
+        x: x * gridSizeX + offsetX + x * gapX,
+        y: y * gridSizeY + offsetY + y * gapY,
+        width: gridSizeX,
+        height: gridSizeY,
         id: `${x}-${y}`,
         meta: {
           gridX: x,