diff --git a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
index f36fcc55..f9548dad 100644
--- a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
@@ -66,7 +66,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -79,7 +81,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -105,7 +109,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
index 999687fd..7dd21539 100644
--- a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
@@ -37,7 +37,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -50,7 +52,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -74,7 +78,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -92,7 +98,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx
index 31cf3909..0ed01ede 100644
--- a/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx
@@ -23,7 +23,9 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -36,7 +38,9 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -54,7 +58,9 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>