diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 120b659..34704da 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -36,7 +36,7 @@ export default function Navbar() {
                   viewBox="0 0 16 16"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="evenodd"
                     d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
                   />
                 </svg>
diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
index b8b177c..0bc5bfe 100644
--- a/components/ui/Card.tsx
+++ b/components/ui/Card.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image'
 
 interface CardProps {
   title: string;
@@ -9,7 +10,7 @@ interface CardProps {
 const Card: React.FC<CardProps> = ({ title, description, imageUrl }) => {
   return (
     <div className={`flex grow-0 flex-col gap-4 max-w-xs h-96 text-white rounded-3xl overflow-hidden shadow-lg p-4 ${title === 'Shipyard' ? 'lg:mt-24' : ''}`} style={{ backgroundColor: 'rgba(255, 255, 255, 0.08)' }}>
-     <img className="w-full" src={imageUrl} alt={title} />
+     <Image className="w-full" src={imageUrl} alt={title} width={400} height={300} />
       <div className="flex flex-col gap-2">
         <div className="font-bold text-3xl">{title}</div>
         <p className="text-base">{description}</p>