diff --git a/src/components/auth/user-menu.tsx b/src/components/auth/user-menu.tsx
index 7e08eaa..91ee081 100644
--- a/src/components/auth/user-menu.tsx
+++ b/src/components/auth/user-menu.tsx
@@ -7,6 +7,7 @@
 'use client'
 
 import Link from 'next/link'
+import Image from 'next/image'
 import { User, SignOut, GearSix } from '@phosphor-icons/react'
 import { useAuth } from '@/hooks/use-auth'
 import {
@@ -48,12 +49,11 @@ export function UserMenu() {
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground ring-offset-background transition-colors hover:bg-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          className="relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground ring-offset-background transition-colors hover:bg-card-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           aria-label="User menu"
         >
           {user.avatarUrl ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src={user.avatarUrl} alt="" className="h-full w-full object-cover" />
+            <Image src={user.avatarUrl} alt="" fill className="object-cover" />
           ) : (
             <User size={16} weight="bold" aria-hidden="true" />
           )}
diff --git a/src/components/image-upload.tsx b/src/components/image-upload.tsx
index 6486096..121224e 100644
--- a/src/components/image-upload.tsx
+++ b/src/components/image-upload.tsx
@@ -8,6 +8,7 @@
 'use client'
 
 import { useRef, useState, useCallback } from 'react'
+import Image from 'next/image'
 import { cn } from '@/lib/utils'
 import { UploadSimple, TrashSimple, User, Image as ImageIcon } from '@phosphor-icons/react'
 
@@ -99,8 +100,7 @@ export function ImageUpload({
         style={{ aspectRatio }}
       >
         {currentUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img src={currentUrl} alt={label} className="h-full w-full object-cover" />
+          <Image src={currentUrl} alt={label} fill className="object-cover" />
         ) : (
           <div className="flex h-full w-full items-center justify-center text-muted-foreground">
             {isAvatar ? (
diff --git a/src/components/user-profile-card.tsx b/src/components/user-profile-card.tsx
index 6f12a7e..74008b7 100644
--- a/src/components/user-profile-card.tsx
+++ b/src/components/user-profile-card.tsx
@@ -8,6 +8,7 @@
 
 import { useState, useRef, useCallback, useEffect } from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import { User, CalendarBlank, ChatCircle } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
 import { ReputationBadge } from './reputation-badge'
@@ -91,10 +92,9 @@ export function UserProfileCard({ user, className }: UserProfileCardProps) {
           role="tooltip"
         >
           <div className="flex items-start gap-3">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
+            <div className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
               {user.avatarUrl ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img src={user.avatarUrl} alt="" className="h-full w-full object-cover" />
+                <Image src={user.avatarUrl} alt="" fill className="object-cover" />
               ) : (
                 <User size={20} className="text-muted-foreground" aria-hidden="true" />
               )}