diff --git a/app/(root)/page.js b/app/(root)/page.js
index ba688b8..8e6294d 100644
--- a/app/(root)/page.js
+++ b/app/(root)/page.js
@@ -1,6 +1,6 @@
 "use client";
 import ReactFullpage from "@fullpage/react-fullpage";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import "../globals.css";
 import { motion } from "framer-motion";
 import Link from "next/link";
@@ -45,11 +45,10 @@ const MyPage = () => {
 										type: "spring",
 									}}>
 									<div className="block md:hidden col-span-1 mx-auto my-10">
-										<div className="bg-slate-500 rounded-full h-60 w-60">
+										<div className="bg-slate-500 rounded-full h-full">
 											<Image
 												src={Me}
-												width={500}
-												height={500}
+												layout="fill"
 												className="rounded-full w-full h-full object-cover "
 												alt="Alvalens"
 												placeholder="blur"
diff --git a/app/about/page.js b/app/about/page.js
index cc7b77e..1763d25 100644
--- a/app/about/page.js
+++ b/app/about/page.js
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
diff --git a/app/projects/page.js b/app/projects/page.js
index 3543b1b..010cada 100644
--- a/app/projects/page.js
+++ b/app/projects/page.js
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
-import Image from "next/image";
+import Image from "next/legacy/image";
 
 // images
 import Me1 from "@/public/img/me1.jpg";