diff --git a/leaky-ships/components/FogImages.tsx b/leaky-ships/components/FogImages.tsx
index 193b68b..248c392 100644
--- a/leaky-ships/components/FogImages.tsx
+++ b/leaky-ships/components/FogImages.tsx
@@ -1,8 +1,10 @@
+import Image from "next/image";
+
 function FogImages() {
     return <>
-        <img className='fog left' src={`/fog/fog2.png`} alt={`fog1.png`} />
-        <img className='fog right' src={`/fog/fog2.png`} alt={`fog1.png`} />
-        <img className='fog middle' src={`/fog/fog4.png`} alt={`fog4.png`} />
+        <Image className='fog left' src={`/fog/fog2.png`} alt={`fog1.png`} />
+        <Image className='fog right' src={`/fog/fog2.png`} alt={`fog1.png`} />
+        <Image className='fog middle' src={`/fog/fog4.png`} alt={`fog4.png`} />
     </>
 }
 
diff --git a/leaky-ships/components/Ships.tsx b/leaky-ships/components/Ships.tsx
index 11b2fa5..11513b2 100644
--- a/leaky-ships/components/Ships.tsx
+++ b/leaky-ships/components/Ships.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { CSSProperties } from 'react'
 
 function Ships() {
@@ -10,7 +11,7 @@ function Ships() {
     return <>
         {shipIndexes.map(i =>
             <div key={i} className={`ship s${i}`} style={{'--x': i+3} as CSSProperties}>
-                <img src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
+                <Image src={`/svgs/${i}.svg`} alt={`${i}.svg`}/>
             </div>
         )}
     </>