diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 62b74df..d490c26 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -5,6 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import Image from 'next/image';
 import { ChevronDown, LogOut, PersonStanding } from "lucide-react";
 import * as React from "react";
 
@@ -14,7 +15,7 @@ export function AccountDropdown() {
     <div>
       <div className=" showcase-9-dropdown-shadow mt-2 w-96 max-w-[80vw] cursor-pointer overflow-hidden rounded-2xl bg-white py-6">
         <div className="sticky top-0 flex items-center gap-1 bg-white px-6 pb-4">
-          <img
+          <Image
             src="https://github.com/shadcn.png"
             className="h-10 w-10 rounded-full"
             alt="@shadcn"
diff --git a/src/components/Showcase.tsx b/src/components/Showcase.tsx
index 3c8afc4..ddd4ff0 100644
--- a/src/components/Showcase.tsx
+++ b/src/components/Showcase.tsx
@@ -9,6 +9,7 @@ import {
   RedirectButton,
   ShowcaseSocialConnectionCard,
 } from "./showcase/Components";
+import Image from 'next/image';
 import CodeTabs from "./showcase/CodeTabs";
 
 function Showcase() {
@@ -53,7 +54,7 @@ function Showcase() {
           className="showcase-1  w-full  "
         >
           <div className="relative  mt-10 flex h-[300px] w-full items-center justify-center bg-transparent ">
-            <img
+            <Image
               src="/showcase/1.png"
               alt=""
               className="absolute  bottom-0 left-0 bg-cover"
@@ -101,7 +102,7 @@ function Showcase() {
             </div>
 
             <div className="relative hidden   h-[205px] w-full items-center justify-center bg-transparent sm:flex ">
-              <img
+              <Image
                 src="/showcase/2.png"
                 alt=""
                 className="absolute  bottom-0 left-0  w-full bg-cover"
@@ -169,12 +170,12 @@ function Showcase() {
                 <p className="underline underline-offset-[12px]">Depl</p>
               </div>
 
-              <img
+              <Image
                 src="/showcase/4.png"
                 alt=""
                 className="absolute -left-10 bottom-0 bg-cover"
               />
-              <img
+              <Image
                 src="/showcase/4-2.png"
                 alt=""
                 className="absolute bottom-0 right-20 bg-cover"
@@ -216,24 +217,24 @@ function Showcase() {
             </div>
 
             {/* things to make the background */}
-            <img
+            <Image
               src="/showcase/code-section/cone.svg"
               className="absolute bottom-[40%] left-0 "
               alt=""
             />
-            <img
+            <Image
               src="/showcase/code-section/circle-1.svg"
               className="absolute bottom-0 left-0 "
               alt=""
             />
 
-            <img
+            <Image
               src="/showcase/code-section/circle-2.svg"
               className="absolute bottom-28 left-20 "
               alt=""
             />
 
-            <img
+            <Image
               src="/showcase/code-section/circle-3.svg"
               className="absolute right-0 top-1/2 -translate-y-1/2 "
               alt=""
@@ -382,7 +383,7 @@ function Showcase() {
               className=" relative -mx-10   hidden   h-[325px] w-full items-center 
             justify-center bg-transparent sm:flex "
             >
-              <img
+              <Image
                 src="/showcase/9.svg"
                 alt=""
                 className="absolute -bottom-8   left-0   w-full max-w-[95%] bg-cover"
diff --git a/src/pages/access-management.tsx b/src/pages/access-management.tsx
index e775fb1..05c41c0 100644
--- a/src/pages/access-management.tsx
+++ b/src/pages/access-management.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Footer from "../components/Footer";
+import Image from 'next/image';
 
 function AccessManagement() {
   return (
@@ -29,13 +30,13 @@ function AccessManagement() {
             </div>
 
             <div className="flex-1">
-              <img src="./images/image1.svg" alt="" />
+              <Image src="./images/image1.svg" alt="" />
             </div>
           </div>
 
           <div className=" ud-row row1 flex flex-col  items-center gap-32   md:flex-row">
             <div className="col-md-5 flex flex-[0.5] items-center justify-center">
-              <img src="./images/image2.svg" alt="" />
+              <Image src="./images/image2.svg" alt="" />
             </div>
 
             <div className=" flex-1 ">
@@ -77,13 +78,13 @@ function AccessManagement() {
               </div>
             </div>
             <div className=" col-md-5 flex-1">
-              <img src="./images/image3.svg" alt="" className="w-100" />
+              <Image src="./images/image3.svg" alt="" className="w-100" />
             </div>
           </div>
 
           <div className=" ud-row row1 flex flex-col items-center  gap-32 md:flex-row">
             <div className="col-md-5 flex flex-1 items-center justify-center">
-              <img src="./images/image4.svg" alt="" className="w-100" />
+              <Image src="./images/image4.svg" alt="" className="w-100" />
             </div>
 
             <div className="col-md-6 flex-1">
diff --git a/src/pages/new.tsx b/src/pages/new.tsx
index 3d3afd5..65f0275 100644
--- a/src/pages/new.tsx
+++ b/src/pages/new.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Footer from ".";
 import AnimatedGradient from "../components/gradients/AnimatedGradient";
 import ArrowIcon from '../components/ArrowIcon'
+import Image from 'next/image';
 
 function New() {
   return (
@@ -50,7 +51,7 @@ function New() {
             <div className="  left-16 top-5  w-[316px] border border-[#9900FF] p-8 2xl:hidden">
               <div className="flex items-center gap-3">
                 {/* replace thsi with shadcn avatar compnent in regular codebase */}
-                <img
+                <Image alt=""
                   src="https://s3-alpha-sig.figma.com/img/da73/1fd7/dc33e93cde3509aa78e24c0e19c74daa?Expires=1694390400&Signature=lTUbdJnWxxAKiJf3qsXeEttE4ZMV5EL~mbpsgtxv353l2ZGhD42sQ30g14TCItAQTrfEijaoua6qUqW1O5N7G6GQVl3DPkbcIuYl7S5T7SRfQT~aXHHsJsqfPDWczZtHylKzxh42sA7gyPhsrYZrvTO9c1iXU~Gb0Xs8N1X4TMv3888I10jV7pmCrXawdTFZSpSdOEgbQe0EhxcSTfkhnDB75TvLshvg~3yaxc6Vx4~vkngv7KZ1zKWqFHjLNIlPuYgi2oZMDPAh5IV7YHkkZXj7N-uVnTgBBsuJBSc0Grv3IZ9mzXe-N-Xg-bjAfcPmcEoGGKPyu64mnz2S3kkSOQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                   className="h-[50px] rounded-full bg-cover"
                 />
@@ -71,7 +72,7 @@ function New() {
             <div className=" bottom-5  right-32  w-[316px] border border-[#0099FF] p-8 2xl:hidden">
               <div className="flex items-center gap-3">
                 {/* replace thsi with shadcn avatar compnent in regular codebase */}
-                <img
+                <Image alt=""
                   src="https://s3-alpha-sig.figma.com/img/6e37/c23a/796cbd72327de48bed1e14b67a46f98e?Expires=1694390400&Signature=XAjvLPT0q9h2Ntmw6QZqCU-qJUOFkwdeS61MkTtGScCIord4F1CC1dZ3Ks2qEAWI73m70jZkgcbZ0GJXzhVoTssTg1isxULF2ThmSKRylHblRHnKhWWiyHAScp-OaZZHeTbki0lXHHQbzsGCHEIEJTCXdtCK8sbZCLs28R-XvsRiky5kjHkvWqqwjEBi0HCeDJMfD0kfnn14XH9b1G8S~qx7eJdVfnrw~U8d9jAcMvEe2mnld0Jq5Kr2Y7qi-vJFCc9zPrid1beNPbKg4vY4A1yeUEPtI5mrQTx6CaKS7t8IMj-OyRe-WW12dxz-xq5qzIh-E3GrimHatRIwh37oWw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                   className="h-[50px] rounded-full bg-cover"
                 />
@@ -90,7 +91,7 @@ function New() {
             <div className=" right-16 top-16  w-[316px] border border-[#9900FF] p-8 2xl:hidden">
               <div className="flex items-center gap-3">
                 {/* replace thsi with shadcn avatar compnent in regular codebase */}
-                <img
+                <Image alt=""
                   src="https://s3-alpha-sig.figma.com/img/0393/bb53/1342dd46a5307c8fad2d3835d2242ce1?Expires=1694390400&Signature=LoHEzBgRrNzK61xk0Afvq6lXsM81cKSXcaH7RXJH2ZDwZISkawOZJpSqzcpF-13fKQCZTmvsXKnlp9yb681U3y8Zg~VswI5H6ugTyzu37kiFy3ZNJQobRr-iXkh-v7qKKD8VCrb4~8Ui7pXynIKL0OQ8wOpJRdZVjO7FnBNxAp9HjbezLwAGzqZ1C-NJd3h84ubjwxwQG2xAlNJFMLzcz8jwEySf0j1YjDW1xN6VrqtSjo2LD9m5CaC6ZjBfZJK32F1sOlMjL-te8YOSVOMr3w~CaPpRcUPSa6CwvfW5D~M21GgvaOQtTGdPmm1DvZv3r3W0n1w~hPzNf9fHdDwEJQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                   className="h-[50px] rounded-full bg-cover"
                 />
@@ -128,7 +129,7 @@ function AbsolutePart() {
       <div className="absolute  left-16 top-5 hidden w-[316px] border border-[#9900FF] p-8 2xl:block">
         <div className="flex items-center gap-3">
           {/* replace thsi with shadcn avatar compnent in regular codebase */}
-          <img
+          <Image alt=""
             src="https://s3-alpha-sig.figma.com/img/da73/1fd7/dc33e93cde3509aa78e24c0e19c74daa?Expires=1694390400&Signature=lTUbdJnWxxAKiJf3qsXeEttE4ZMV5EL~mbpsgtxv353l2ZGhD42sQ30g14TCItAQTrfEijaoua6qUqW1O5N7G6GQVl3DPkbcIuYl7S5T7SRfQT~aXHHsJsqfPDWczZtHylKzxh42sA7gyPhsrYZrvTO9c1iXU~Gb0Xs8N1X4TMv3888I10jV7pmCrXawdTFZSpSdOEgbQe0EhxcSTfkhnDB75TvLshvg~3yaxc6Vx4~vkngv7KZ1zKWqFHjLNIlPuYgi2oZMDPAh5IV7YHkkZXj7N-uVnTgBBsuJBSc0Grv3IZ9mzXe-N-Xg-bjAfcPmcEoGGKPyu64mnz2S3kkSOQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
             className="h-[50px] rounded-full bg-cover"
           />
@@ -148,7 +149,7 @@ function AbsolutePart() {
       <div className="absolute bottom-5 right-32 hidden w-[316px] border border-[#0099FF] p-8 2xl:block">
         <div className="flex items-center gap-3">
           {/* replace thsi with shadcn avatar compnent in regular codebase */}
-          <img
+          <Image alt=""
             src="https://s3-alpha-sig.figma.com/img/6e37/c23a/796cbd72327de48bed1e14b67a46f98e?Expires=1694390400&Signature=XAjvLPT0q9h2Ntmw6QZqCU-qJUOFkwdeS61MkTtGScCIord4F1CC1dZ3Ks2qEAWI73m70jZkgcbZ0GJXzhVoTssTg1isxULF2ThmSKRylHblRHnKhWWiyHAScp-OaZZHeTbki0lXHHQbzsGCHEIEJTCXdtCK8sbZCLs28R-XvsRiky5kjHkvWqqwjEBi0HCeDJMfD0kfnn14XH9b1G8S~qx7eJdVfnrw~U8d9jAcMvEe2mnld0Jq5Kr2Y7qi-vJFCc9zPrid1beNPbKg4vY4A1yeUEPtI5mrQTx6CaKS7t8IMj-OyRe-WW12dxz-xq5qzIh-E3GrimHatRIwh37oWw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
             className="h-[50px] rounded-full bg-cover"
           />
@@ -166,7 +167,7 @@ function AbsolutePart() {
       <div className="absolute right-16 top-16 hidden w-[316px] border border-[#9900FF] p-8 2xl:block">
         <div className="flex items-center gap-3">
           {/* replace thsi with shadcn avatar compnent in regular codebase */}
-          <img
+          <Image alt=""
             src="https://s3-alpha-sig.figma.com/img/0393/bb53/1342dd46a5307c8fad2d3835d2242ce1?Expires=1694390400&Signature=LoHEzBgRrNzK61xk0Afvq6lXsM81cKSXcaH7RXJH2ZDwZISkawOZJpSqzcpF-13fKQCZTmvsXKnlp9yb681U3y8Zg~VswI5H6ugTyzu37kiFy3ZNJQobRr-iXkh-v7qKKD8VCrb4~8Ui7pXynIKL0OQ8wOpJRdZVjO7FnBNxAp9HjbezLwAGzqZ1C-NJd3h84ubjwxwQG2xAlNJFMLzcz8jwEySf0j1YjDW1xN6VrqtSjo2LD9m5CaC6ZjBfZJK32F1sOlMjL-te8YOSVOMr3w~CaPpRcUPSa6CwvfW5D~M21GgvaOQtTGdPmm1DvZv3r3W0n1w~hPzNf9fHdDwEJQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
             className="h-[50px] rounded-full bg-cover"
           />
@@ -183,9 +184,8 @@ function AbsolutePart() {
         </p>
       </div>
       <div className="absolute -left-1 top-[60%] hidden w-[316px] border border-[#9900FF] 2xl:block  ">
-        <img
+        <Image alt=""
           src="https://s3-alpha-sig.figma.com/img/bc99/b9c0/a1b4a8e3119bcd7b0245ab6a195f4dda?Expires=1694390400&Signature=ZkuRetKwxQ~5LzbnmpTOtsQTfWvH98Nsz-C933Jx-BAlARkK9CUhopaQMoar5eTDl1~UjIKvYsutNuJLAkPIhYrqJ26dwFR5hz-fE9NIB9op9Hwheezs76n7B-y7NaarZ4Lhf-cfyETjwGjjstTctbjpfzKGXBW-j5BaULrezzzy3OisT~PNRQeZmfCuC7t~ZlOJUDVp6pv4sQYPZXHQz78FcW5REX-FLM0IZ6YCrCt4G-0VNG3TT3sVOichpM8I4~iEandugIssZxxqnpUBh0j1Ab3ZGWjkUQTGgWL95AWPSmix1Qdxcw9ihMwRV3KpZM1~th3Ze34sM65G3KXLsQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
-          alt=""
         />
       </div>
     </>
@@ -218,7 +218,7 @@ export const CanvasPart = () => {
       <div className="relative">
         <div className="flex items-center justify-center px-4">
           <div className=" relative  z-10 mt-6  h-full max-h-[738px] w-2/3 rounded-3xl  border border-white border-opacity-25 bg-white bg-opacity-5 p-12 shadow-inner">
-            <img src="/page3.png" alt="imagetrustauthx" className="bg-cover" />
+            <Image src="/page3.png" alt="imagetrustauthx" className="bg-cover" />
           </div>
         </div>
         <AnimatedGradient />
diff --git a/src/pages/systems.tsx b/src/pages/systems.tsx
index d2e8a22..1e6574e 100644
--- a/src/pages/systems.tsx
+++ b/src/pages/systems.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import React from "react";
 import Footer from "../components/Footer";
 
+
 function Systems() {
   return (
     <div className="max-w-screen relative flex flex-col items-center justify-center p-10 md:p-40 md:pb-10">
@@ -25,7 +26,7 @@ function Systems() {
           </div>
 
           <div className=" flex flex-1  justify-end ">
-            <img
+            <Image
               src={"/systemspage.png"}
               className="bg-cover"
               alt="gridphotos"
@@ -33,13 +34,13 @@ function Systems() {
           </div>
         </div>
 
-        <img
+        <Image
           src={"/systemsgradientside.svg"}
           className="absolute left-0 top-12"
           alt="gridphotos"
         />
 
-        <img
+        <Image
           src={"/systemsgradienttop.svg"}
           className="absolute top-0"
           alt="gridphotos"
diff --git a/src/pages/timeline.tsx b/src/pages/timeline.tsx
index 02c1fa4..baf1ff1 100644
--- a/src/pages/timeline.tsx
+++ b/src/pages/timeline.tsx
@@ -8,25 +8,26 @@ import { TimelineCard } from "../components/timeline/TimelineCard";
 import { Information } from "../components/timeline/Information";
 import Carousel from "../components/timeline/CarouselSlider";
 import ArrowIcon from "../components/ArrowIcon";
+import Image from 'next/image';
 
 function Timeline() {
   return (
     <>
       <div className="flex px-12 py-12 2xl:py-0 2xl:pl-44 2xl:pr-[130px]">
         <div className="flex max-w-[160px] flex-col items-center justify-center">
-          <img src="/timeline/first.svg" alt="" />
+          <Image src="/timeline/first.svg" alt="" />
 
-          <img src="/timeline/8-icon.svg" alt="" />
+          <Image src="/timeline/8-icon.svg" alt="" />
 
-          <img src="/timeline/8.svg" alt="" />
+          <Image src="/timeline/8.svg" alt="" />
 
-          <img src="/timeline/7-icon.svg" alt="" />
+          <Image src="/timeline/7-icon.svg" alt="" />
 
-          <img src="/timeline/7.svg" alt="" />
+          <Image src="/timeline/7.svg" alt="" />
 
-          <img src="/timeline/6-icon.svg" alt="" />
+          <Image src="/timeline/6-icon.svg" alt="" />
 
-          <img src="/timeline/6.svg" alt="" />
+          <Image src="/timeline/6.svg" alt="" />
         </div>
 
         <div className="mt-[750px] flex-1">
@@ -162,24 +163,24 @@ function Timeline() {
       <div className="timeline-radial-gradient flex flex-1 px-12 py-12 2xl:py-0 2xl:pl-44 2xl:pr-[130px]">
         <div className="flex max-w-[160px] flex-col items-center justify-center">
           <div className="relative ">
-            <img src="/timeline/glow.svg" className=" " alt="" />
+            <Image src="/timeline/glow.svg" className=" " alt="" />
 
-            <img
+            <Image
               src="/timeline/5-icon.svg"
               className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
               alt=""
             />
           </div>
-          <img src="/timeline/4.svg" alt="" />
+          <Image src="/timeline/4.svg" alt="" />
 
-          <img src="/timeline/3-icon.svg" alt="" />
+          <Image src="/timeline/3-icon.svg" alt="" />
 
-          <img src="/timeline/3.svg" alt="" />
+          <Image src="/timeline/3.svg" alt="" />
 
-          <img src="/timeline/2-icon.svg" alt="" />
-          <img src="/timeline/2.svg" alt="" />
-          <img src="/timeline/1-icon.svg" alt="" />
-          <img src="/timeline/1.svg" alt="" />
+          <Image src="/timeline/2-icon.svg" alt="" />
+          <Image src="/timeline/2.svg" alt="" />
+          <Image src="/timeline/1-icon.svg" alt="" />
+          <Image src="/timeline/1.svg" alt="" />
         </div>
         {/* required
          */}
@@ -331,15 +332,15 @@ function Timeline() {
                 </div>
 
                 <div className="flex flex-col gap-3 pb-6">
-                  <img src="/timeline/speedCard/1.svg" alt="" />
-                  <img src="/timeline/speedCard/2.svg" alt="" />
-                  <img src="/timeline/speedCard/3.svg" alt="" />
-                  <img src="/timeline/speedCard/4.svg" alt="" />
+                  <Image src="/timeline/speedCard/1.svg" alt="" />
+                  <Image src="/timeline/speedCard/2.svg" alt="" />
+                  <Image src="/timeline/speedCard/3.svg" alt="" />
+                  <Image src="/timeline/speedCard/4.svg" alt="" />
                 </div>
               </div>
 
               <div className="shad rounded-2xl bg-black shadow-lg shadow-zinc-800 ">
-                <img src="/timeline/lastcard.svg" className="" alt="" />
+                <Image src="/timeline/lastcard.svg" className="" alt="" />
 
                 <div className=" rounded-b-2xl bg-[#1A1A1A] px-12 py-7">
                   <div className=" w-96 text-lg font-bold leading-loose text-neutral-50">
@@ -363,8 +364,8 @@ function Timeline() {
 
       <div className="flex px-12 2xl:pl-44 2xl:pr-[130px]">
         <div className="flex max-w-[160px] flex-col items-center ">
-          <img src="/timeline/last-icon.svg" alt="" />
-          <img src="/timeline/last.svg" />
+          <Image src="/timeline/last-icon.svg" alt="" />
+          <Image src="/timeline/last.svg" alt="" />
         </div>
 
         <div className=" mt-40 flex flex-1 flex-col gap-9">
@@ -470,7 +471,7 @@ function GradientCard({
   return (
     <div className="timeline-gradientcard-gradient rounded-2xl p-10">
       <div className="flex items-center justify-between">
-        <img
+        <Image
           src="https://s3-alpha-sig.figma.com/img/9d6d/cfc1/fb8cd40116ca161e463af1ee400a729e?Expires=1694995200&Signature=h1x8zYIEcksM6fh5RDvQ4ECeihTfQdeHloWbzDadukMpZBhws9lPBpMFh-9XIsh2k3CKZCczKPLoIxMJ89vpq8As2DCiADJsSbOXBta1gsOFEXhmuZIO638pHgvaiGW-T-tD4RQEWmWp9Q~rhQYxDM7EuRFbVF6nim-zphAKrdfJXTsqypezfRZonQvppbMt35BOVo81-yGeDBtfmg1FJln3jr-AwlpSa95SZHA4~M4nd-FcwqDG00g5NDx~koYZpLylO-J2UTHAlxnHN6QGkuVfhCmGTvCOb9gAo9Nrp-Hw9Vsgz6gYT8WQYKeIP-3TWBZnTLX5mFgaiCfEks2u4Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
           className="h-16 w-16 rounded-full"
           alt=""
@@ -480,7 +481,7 @@ function GradientCard({
       </div>
 
       <div className="mt-14 flex flex-col gap-4">
-        <img src={logo} className="max-w-[240px]" alt="" />
+        <Image src={logo} className="max-w-[240px]" alt="" />
 
         <div className="   text-5xl font-bold  text-white">{header}</div>