diff --git a/website/src/components/card.js b/website/src/components/card.js
index 9eb597b7b..14e5d9f67 100644
--- a/website/src/components/card.js
+++ b/website/src/components/card.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import ImageNext from 'next/image'
 
 import Link from './link'
 import { H5 } from './typography'
@@ -18,8 +19,7 @@ export default function Card({ title, to, image, header, small, onClick, childre
                 <H5 className={classes.title}>
                     {image && (
                         <div className={classes.image}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={image} width={35} alt="" />
+                            <ImageNext src={image} height={35} width={35} alt="" />
                         </div>
                     )}
                     {title && (
diff --git a/website/src/components/title.js b/website/src/components/title.js
index 0aab4b5ba..65fe3fb6a 100644
--- a/website/src/components/title.js
+++ b/website/src/components/title.js
@@ -51,8 +51,7 @@ export default function Title({
 
                     {image && (
                         <div className={classes.image}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={image} width={100} height={100} alt="" />
+                            <Image src={image} width={100} height={100} alt="" />
                         </div>
                     )}
                 </div>
diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js
index fcd433823..4a95606e8 100644
--- a/website/src/templates/universe.js
+++ b/website/src/templates/universe.js
@@ -81,10 +81,11 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
                                     }
                                     const url = `/universe/project/${id}`
                                     const header = youtube && (
-                                        // eslint-disable-next-line @next/next/no-img-element
-                                        <img
+                                        <Image
                                             src={`https://img.youtube.com/vi/${youtube}/0.jpg`}
                                             alt=""
+                                            width="480"
+                                            height="360"
                                             style={{
                                                 clipPath: 'inset(12.9% 0)',
                                                 marginBottom: 'calc(-12.9% + 1rem)',