diff --git a/src/app/accessManagement/page.tsx b/src/app/accessManagement/page.tsx
index f9a7fcb..f50aaf3 100644
--- a/src/app/accessManagement/page.tsx
+++ b/src/app/accessManagement/page.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/app/systems/page.tsx b/src/app/systems/page.tsx
index 4868ac4..817c283 100644
--- a/src/app/systems/page.tsx
+++ b/src/app/systems/page.tsx
@@ -24,7 +24,7 @@ function Systems() {
           </div>
 
           <div className=" flex flex-1  justify-end ">
-            <img
+            <Image
               src={"/systemspage.png"}
               className="bg-cover"
               alt="gridphotos"
@@ -32,13 +32,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/components/Customize.tsx b/src/components/Customize.tsx
index 4cd4cfa..7bffa99 100644
--- a/src/components/Customize.tsx
+++ b/src/components/Customize.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import React from "react";
 
 export default function Customize() {
@@ -48,7 +49,7 @@ export default function Customize() {
             <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"
@@ -70,7 +71,7 @@ export default function Customize() {
             <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 @@ export default function Customize() {
             <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"
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 521f070..c59e9b4 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -6,6 +6,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ChevronDown, LogOut, PersonStanding } from "lucide-react";
+import Image from "next/image";
 import * as React from "react";
 
 export function AccountDropdown() {
diff --git a/src/components/LandingHero.tsx b/src/components/LandingHero.tsx
index 8bf5215..4e5c3ce 100644
--- a/src/components/LandingHero.tsx
+++ b/src/components/LandingHero.tsx
@@ -16,16 +16,15 @@ export default function LandingHero() {
         height={isMobile ? "50vh" : "60rem"}
         isMobile={!!isMobile}
       />
-
       {/*Hero Heading*/}
-      <h1 className="absolute left-10 top-28 z-10 w-fit p-0 text-left text-4xl font-extrabold text-white mix-blend-exclusion md:left-20 md:top-64 md:text-7xl">
+      <h1 className="absolute left-10 top-28 z-10 w-fit p-0 text-left text-4xl font-extrabold text-white mix-blend-exclusion md:left-20 md:top-56 md:text-7xl">
         TrustAuthX <br />
         Low-Code Auth <br />
         Infra for the Web.
       </h1>
 
       {/*CTA*/}
-      <div className="left-20 top-[32rem] z-10 mt-6 flex flex-col-reverse items-center gap-10 text-left text-white md:absolute md:mt-0 md:flex-row md:gap-20">
+      <div className="left-20 top-[30rem] z-10 mt-6 flex flex-col-reverse items-center gap-10 text-left text-white md:absolute md:mt-0 md:flex-row md:gap-20">
         <Link href="https://app.trustauthx.com/">
           <button className="z-10 flex items-center gap-3 rounded-full border-2 border-[#F35815] bg-black fill-black px-5 py-3 mix-blend-exclusion">
             Let’s Get Started for Free{" "}
diff --git a/src/components/Showcase.tsx b/src/components/Showcase.tsx
index 844f15f..95c9651 100644
--- a/src/components/Showcase.tsx
+++ b/src/components/Showcase.tsx
@@ -108,7 +108,7 @@ const isMobile = useMediaQuery("(max-width: 768px)");
             </div>
 
             <div className="relative hidden   h-[205px] w-full items-center justify-center bg-transparent sm:flex ">
-              <img
+              <Image
                 src="/showcase/2.png"
                 alt=""
                 width={1000}
@@ -178,14 +178,14 @@ const isMobile = useMediaQuery("(max-width: 768px)");
                 <p className="underline underline-offset-[12px]">Depl</p>
               </div>
 
-              <img
+              <Image
                 src="/showcase/4.png"
                 alt=""
                 width={1000}
                 height={1000}
                 className="absolute -left-10 bottom-0 bg-cover"
               />
-              <img
+              <Image
                 src="/showcase/4-2.png"
                 alt=""
                 width={1000}
@@ -326,14 +326,14 @@ const isMobile = useMediaQuery("(max-width: 768px)");
             </div>
 
             {/* things to make the background */}
-            <img
+            <Image
               src="/showcase/code-section/cone.svg"
               className="absolute bottom-[40%] left-0 "
               alt=""
               width={1000}
               height={1000}
             />
-            <img
+            <Image
               src="/showcase/code-section/circle-1.svg"
               className="absolute bottom-0 left-0 "
               alt=""
@@ -341,7 +341,7 @@ const isMobile = useMediaQuery("(max-width: 768px)");
               height={1000}
             />
 
-            <img
+            <Image
               src="/showcase/code-section/circle-2.svg"
               className="absolute bottom-28 left-20 "
               alt=""
@@ -349,7 +349,7 @@ const isMobile = useMediaQuery("(max-width: 768px)");
               height={1000}
             />
 
-            <img
+            <Image
               src="/showcase/code-section/circle-3.svg"
               className="absolute right-0 top-1/2 -translate-y-1/2 "
               alt=""
@@ -500,7 +500,7 @@ const isMobile = useMediaQuery("(max-width: 768px)");
               className=" relative -mx-10   hidden   h-[325px] w-full items-center 
             justify-center bg-transparent sm:flex "
             >
-              <img
+              <Image
                 src="/showcase/9.svg"
                 alt=""
                 width={1000}
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 0b36967..8e88640 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -8,25 +8,26 @@ import { TimelineCard } from "./timeline/TimelineCard";
 import { Information } from "./timeline/Information";
 import Carousel from "./timeline/CarouselSlider";
 import ArrowIcon from "./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" alt="" />
+          <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>
 
diff --git a/src/components/interactivePrism/index.tsx b/src/components/interactivePrism/index.tsx
index 9a3790b..4b02c04 100644
--- a/src/components/interactivePrism/index.tsx
+++ b/src/components/interactivePrism/index.tsx
@@ -68,7 +68,7 @@ export default function InteractivePrism({
     triggerOnce: false, // Change to true if you want to render only once
   });
   return (
-    <div id="hero-prism" style={{ width, height }} ref={ref}>
+    <div id="hero-prism" className="h-[58rem]" ref={ref}>
       {inView && (
         <Canvas
           dpr={dpr}