diff --git a/apps/frontend/src/app/periods/[id]/columns.tsx b/apps/frontend/src/app/periods/[id]/columns.tsx
index 80eb9bf..be49049 100644
--- a/apps/frontend/src/app/periods/[id]/columns.tsx
+++ b/apps/frontend/src/app/periods/[id]/columns.tsx
@@ -18,7 +18,6 @@ import { SortableFilterableHeader } from '@/components/ui/table-headers/Sortable
 import { filterByDateRange } from '@/lib/customFilters';
 import { toast } from '@/lib/use-toast';
 import { ApplicationEntity, ApplicationStatus } from '@/types/application-entity';
-import Image from 'next/image';
 import { LuCheck, LuCircleArrowRight, LuCopy } from 'react-icons/lu';
 import PfpStatusBadge from '@/components/ui/PfpStatusBadge';
 import WarningBadge from '@/components/ui/WarningBadge';
@@ -71,7 +70,7 @@ export const columns: (
             </div>
           </HoverCardTrigger>
           <HoverCardContent>
-            <Image
+            <img
               src={`${process.env.NEXT_PUBLIC_API_URL}/users/${row.original.user.authSchId}/profile-picture`}
               alt='KEP'
               className='rounded max-w-32'
diff --git a/apps/frontend/src/app/periods/[id]/pass-export.tsx b/apps/frontend/src/app/periods/[id]/pass-export.tsx
index 6f0b5d8..fe962e7 100644
--- a/apps/frontend/src/app/periods/[id]/pass-export.tsx
+++ b/apps/frontend/src/app/periods/[id]/pass-export.tsx
@@ -1,6 +1,5 @@
 import { ApplicationEntity } from '@/types/application-entity';
 import { Document, Font, Image, Page, Text, View } from '@react-pdf/renderer';
-import React from 'react';
 
 type Props = {
   applicationData: ApplicationEntity[];
@@ -33,7 +32,7 @@ export const PassExport = ({ applicationData, periodName, periodId, cacheBuster,
       >
         {applicationData.map((a) => (
           <View key={a.id}>
-            <Image
+            <img
               src={`${process.env.NEXT_PUBLIC_API_URL}/application-periods/${periodId}/pass-bg?cb=${cacheBuster}`}
               style={{ width: '7.5cm', height: '4.3cm', position: 'absolute', top: 0, left: 0, zIndex: -1 }}
             />
diff --git a/apps/frontend/src/components/ui/AdminApplicationPeriodCard.tsx b/apps/frontend/src/components/ui/AdminApplicationPeriodCard.tsx
index e00deb6..584e2b0 100644
--- a/apps/frontend/src/components/ui/AdminApplicationPeriodCard.tsx
+++ b/apps/frontend/src/components/ui/AdminApplicationPeriodCard.tsx
@@ -24,7 +24,6 @@ import { downloadPdf, mockApplication } from '@/lib/pdf';
 import { toast } from '@/lib/use-toast';
 import { ApplicationPeriodEntity } from '@/types/application-period-entity';
 
-import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { Th2 } from '../typography/typography';
 import PictureUploadDialog from './PictureUploadDialog';
@@ -148,7 +147,7 @@ export default function AdminApplicationPeriodCard({ period, cacheBuster, setCac
           </div>
         </div>
         <div className='flex max-md:flex-col md:flex-row gap-4 max-md:items-center md:items-end'>
-          <Image
+          <img
             src={periodBackground || 'https://placehold.co/750x430/pink/white/jpeg'}
             width={75 * 4}
             height={43 * 4}
diff --git a/apps/frontend/src/components/ui/Ticket.tsx b/apps/frontend/src/components/ui/Ticket.tsx
index b4b93c3..29752eb 100644
--- a/apps/frontend/src/components/ui/Ticket.tsx
+++ b/apps/frontend/src/components/ui/Ticket.tsx
@@ -1,7 +1,6 @@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { UserEntity } from '@/types/user-entity';
 
-import Image from 'next/image';
 import { Card, CardContent, CardTitle } from './card';
 
 export default function Ticket({ user }: { user: UserEntity }) {
@@ -10,7 +9,7 @@ export default function Ticket({ user }: { user: UserEntity }) {
       <Tooltip>
         <TooltipTrigger asChild>
           <Card className='flex gap-2 p-2 bg-red-200 relative rounded-sm'>
-            <Image
+            <img
               src={`${process.env.NEXT_PUBLIC_API_URL}/users/${user.authSchId}/profile-picture?cb=${Date.now()}`}
               className='min-w-[65px] w-[65px] h-[90px] overflow-hidden rounded-sm object-cover'
               alt='kep'
diff --git a/apps/frontend/src/components/ui/UserCard.tsx b/apps/frontend/src/components/ui/UserCard.tsx
index 4b6e621..38565db 100644
--- a/apps/frontend/src/components/ui/UserCard.tsx
+++ b/apps/frontend/src/components/ui/UserCard.tsx
@@ -1,11 +1,10 @@
+import api from '@/components/network/apiSetup';
+import { Button } from '@/components/ui/button';
 import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { RoleBadgeSelector } from '@/components/ui/RoleBadgeSelector';
+import { toast } from '@/lib/use-toast';
 import { Role, UserEntity } from '@/types/user-entity';
-import Image from 'next/image';
 import { LuPencil, LuUser, LuUserCheck, LuUserMinus, LuUserSearch } from 'react-icons/lu';
-import api from '@/components/network/apiSetup';
-import { toast } from '@/lib/use-toast';
-import { Button } from '@/components/ui/button';
 
 /*admin component*/
 export default function UserCard(props: { user: UserEntity; onChange: (newRole: Role) => Promise<void> }) {
@@ -21,7 +20,7 @@ export default function UserCard(props: { user: UserEntity; onChange: (newRole:
     <Card>
       <CardHeader className='flex flex-row w-full justify-between items-center p-4 overflow-auto gap-4'>
         <div className='flex gap-8'>
-          <Image
+          <img
             src={`${process.env.NEXT_PUBLIC_API_URL}/users/${props.user.authSchId}/profile-picture`}
             alt='KEP'
             className='lg:rounded-l-lg max-lg:rounded-lg aspect-auto -m-4 max-md:-my-4'
diff --git a/apps/frontend/src/components/ui/UserProfileBanner.tsx b/apps/frontend/src/components/ui/UserProfileBanner.tsx
index d124ce9..489d232 100644
--- a/apps/frontend/src/components/ui/UserProfileBanner.tsx
+++ b/apps/frontend/src/components/ui/UserProfileBanner.tsx
@@ -1,7 +1,6 @@
 'use client';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { RiVerifiedBadgeLine } from 'react-icons/ri';
 import { useSWRConfig } from 'swr';
 
@@ -78,7 +77,7 @@ export default function UserProfileBanner(props: { user: UserEntity | undefined
   return (
     <Card className='flex max-md:flex-col md:flex-row max-md:items-center relative'>
       <div className='min-w-44 min-h-44 md:w-1/5 max-md:w-44 h-full relative'>
-        <Image
+        <img
           src={profilePicture || '/default_pfp.jpg'}
           alt='PROFIL KEP'
           className='md:rounded-l max-md:rounded-xl max-md:my-4'
diff --git a/apps/frontend/src/components/ui/body-member-tile.tsx b/apps/frontend/src/components/ui/body-member-tile.tsx
index 7d0aeb4..c2e9684 100644
--- a/apps/frontend/src/components/ui/body-member-tile.tsx
+++ b/apps/frontend/src/components/ui/body-member-tile.tsx
@@ -2,7 +2,6 @@ import { Mail } from 'lucide-react';
 
 import { MemberEntity } from '@/types/user-entity';
 
-import Image from 'next/image';
 import { Card, CardContent, CardDescription, CardTitle } from './card';
 
 type Props = {
@@ -12,7 +11,7 @@ type Props = {
 export function BodyMemberTile({ userEntity }: Props) {
   return (
     <Card style={{ wordBreak: 'break-word' }} className='p-4 flex w-full gap-4'>
-      <Image
+      <img
         src={`${process.env.NEXT_PUBLIC_API_URL}/users/${userEntity.authSchId}/profile-picture`}
         alt='PROFIL KEP'
         className='h-36 rounded'