diff --git a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
index 606a8e057..3518cdc4a 100644
--- a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
+++ b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
@@ -1,6 +1,6 @@
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
@@ -26,11 +26,12 @@ export default function CustomerCaseEmployeeCard({
     employee.email && (
       <div key={employee.email} className={styles.employee}>
         <div className={styles.employeeImage}>
-          <SanityImage
-            image={{
-              src: { src: employee.imageUrl ?? employee.imageThumbUrl },
-              alt: employee.name,
-            }}
+          <Image
+            src={employee.imageUrl ?? employee.imageThumbUrl}
+            alt={employee.name}
+            width={300}
+            height={300}
+            style={{ objectFit: "cover", height: "100%", width: "100%" }}
           />
         </div>
         <div className={styles.employeeInfo}>
diff --git a/src/components/employeePage/EmployeePage.tsx b/src/components/employeePage/EmployeePage.tsx
index f1643a1f7..03a42e980 100644
--- a/src/components/employeePage/EmployeePage.tsx
+++ b/src/components/employeePage/EmployeePage.tsx
@@ -1,6 +1,6 @@
+import Image from "next/image";
 import { getTranslations } from "next-intl/server";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
@@ -30,11 +30,12 @@ export default async function EmployeePage({
           <div className={styles.employee}>
             {image != null && (
               <div className={styles.employeeImage}>
-                <SanityImage
-                  image={{
-                    src: { src: image },
-                    alt: employee.name,
-                  }}
+                <Image
+                  src={image}
+                  alt={employee.name}
+                  width={300}
+                  height={300}
+                  style={{ objectFit: "cover", height: "100%", width: "100%" }}
                 />
               </div>
             )}
diff --git a/studio/lib/interfaces/media.ts b/studio/lib/interfaces/media.ts
index 6cbd3348d..f11b4fd96 100644
--- a/studio/lib/interfaces/media.ts
+++ b/studio/lib/interfaces/media.ts
@@ -28,7 +28,6 @@ export interface IImage {
   _key?: string;
   _type?: string;
   asset?: SanityImageSource; // image from Sanity
-  src?: { src: string }; // Mock URL for Storybook
   alt?: string;
   crop?: ICrop;
   hotspot?: IHotspot;