diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index bc15327..58b5e01 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -142,7 +142,7 @@ export default function ContactPage() {
                         x={-1}
                         y={-1}
                         strokeDasharray={"4 2"}
-                        className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
+                        className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
                     />
                 </div>
                 <div className="absolute overflow-hidden inset-0 pointer-events-none" aria-hidden="true">
diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
index c843bbb..fc95b52 100644
--- a/src/app/posts/page.tsx
+++ b/src/app/posts/page.tsx
@@ -9,10 +9,8 @@ import { BlurFade } from '@components/ui/blur-fade';
 import { NavigationBar } from "@components/navbar/navbar";
 import { PostsHero } from "@components/heros/posts-hero";
 import { useSearchParams, useRouter } from "next/navigation";
-import { Badge } from "@components/ui/badge";
 import { cn } from "@lib/utils";
 import { Button } from "src/components/ui";
-import Footer from "src/components/layouts/footer";
 
 const PostsContent = () => {
     const router = useRouter();
@@ -26,14 +24,17 @@ const PostsContent = () => {
     const [selectedTag, setSelectedTag] = useState("");
     const [availableTags, setAvailableTags] = useState<string[]>([]);
     const hasFetched = useRef(false);
+    const isFetchingRef = useRef(false);
 
     const next = useCallback(async () => {
-        if (loading) return;
+        if (isFetchingRef.current || !hasMore) return;
 
+        isFetchingRef.current = true;
         setLoading(true);
+        const currentPage = page;
 
         try {
-            const response = await fetch(`/api/posts?page=${page}&limit=${limit}`);
+            const response = await fetch(`/api/posts?page=${currentPage}&limit=${limit}`);
 
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
@@ -56,9 +57,10 @@ const PostsContent = () => {
             console.error('Error fetching posts:', error);
             setHasMore(false);
         } finally {
+            isFetchingRef.current = false;
             setLoading(false);
         }
-    }, [loading, page, limit]);
+    }, [hasMore, page, limit]);
 
     useEffect(() => {
         if (!hasFetched.current) {
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 3dca4e1..e20b564 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -3,16 +3,20 @@
 import React, { useEffect, useState, useCallback, useRef, useMemo, Suspense } from "react";
 import InfiniteScroll from "@components/infinit-scroll";
 import { Spinner } from "@components/ui/loading";
-import { ProjectHero } from "@components/heros/project-hero";
 import { ProjectCard } from "@components/cards/project-card";
 import { Project } from "../../lib/types/interfaces";
 import { BlurFade } from '@components/ui/blur-fade';
 import { NavigationBar } from "@components/navbar/navbar";
 import ProjectsStructuredData from "@components/projects-structured-data";
 import { useSearchParams, useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
 import { Button } from "src/components/ui";
 import { cn } from "@lib/utils";
-import Footer from "src/components/layouts/footer";
+
+const ProjectHero = dynamic(
+    () => import("@components/heros/project-hero").then((mod) => mod.ProjectHero),
+    { ssr: false }
+);
 
 const ProjectsContent = () => {
     const router = useRouter();
@@ -26,14 +30,17 @@ const ProjectsContent = () => {
     const [selectedTag, setSelectedTag] = useState("");
     const [availableTags, setAvailableTags] = useState<string[]>([]);
     const hasFetched = useRef(false);
+    const isFetchingRef = useRef(false);
 
     const next = useCallback(async () => {
-        if (loading) return;
+        if (isFetchingRef.current || !hasMore) return;
 
+        isFetchingRef.current = true;
         setLoading(true);
+        const currentPage = page;
 
         try {
-            const response = await fetch(`/api/projects?page=${page}&limit=${limit}`);
+            const response = await fetch(`/api/projects?page=${currentPage}&limit=${limit}`);
 
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
@@ -56,9 +63,10 @@ const ProjectsContent = () => {
             console.error('Error fetching projects:', error);
             setHasMore(false);
         } finally {
+            isFetchingRef.current = false;
             setLoading(false);
         }
-    }, [loading, page, limit]);
+    }, [hasMore, page, limit]);
 
     useEffect(() => {
         if (!hasFetched.current) {
@@ -142,7 +150,7 @@ const ProjectsContent = () => {
                 {availableTags.length > 0 && (
                     <div className="max-w-5xl mx-auto w-full px-5 mb-4">
                         <div className="flex flex-wrap max-sm:justify-center items-center gap-1.5">
-                            <p className="text-xs font-medium">Tag: </p>
+                            {/* <p className="text-xs font-medium">Tag: </p> */}
                             <Button
                                 className={cn("mt-0 py-1 sm:py-2 px-2.5 h-fit! text-xs leading-4 text-foreground/80 hover:text-primary transition-all", !selectedTag && "ring-1 px-4! bg-primary/5 text-primary")}
                                 onClick={() => handleTagChange("")}
diff --git a/src/components/heros/contact-hero.tsx b/src/components/heros/contact-hero.tsx
index 7effa47..fe88433 100644
--- a/src/components/heros/contact-hero.tsx
+++ b/src/components/heros/contact-hero.tsx
@@ -16,7 +16,7 @@ export const ContactHero = () => {
                     x={-1}
                     y={-1}
                     strokeDasharray={"4 2"}
-                    className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
+                    className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
                 />
             </div>
             <div className="w-full p-4 sm:px-5 space-y-5 flex flex-col max-w-5xl mx-auto ">
diff --git a/src/components/heros/home-hero.tsx b/src/components/heros/home-hero.tsx
index f023f58..c923f0b 100644
--- a/src/components/heros/home-hero.tsx
+++ b/src/components/heros/home-hero.tsx
@@ -71,7 +71,7 @@ export default function HeroSection({ latestPostSlug, latestPostTitle }: HeroSec
                     x={-1}
                     y={-1}
                     strokeDasharray={"4 2"}
-                    className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
+                    className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
                 />
             </div>
 
diff --git a/src/components/heros/posts-hero.tsx b/src/components/heros/posts-hero.tsx
index 56aad61..1efdc26 100644
--- a/src/components/heros/posts-hero.tsx
+++ b/src/components/heros/posts-hero.tsx
@@ -33,7 +33,7 @@ export const PostsHero = React.memo(({ searchQuery, onSearchChange, onClearSearc
                     x={-1}
                     y={-1}
                     strokeDasharray={"4 2"}
-                    className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
+                    className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
                 />
             </div>
             <div className="w-full px-4 pt-4 sm:px-5 flex flex-col max-w-5xl mx-auto ">
diff --git a/src/components/heros/project-hero.tsx b/src/components/heros/project-hero.tsx
index 70f2ee4..1f217c3 100644
--- a/src/components/heros/project-hero.tsx
+++ b/src/components/heros/project-hero.tsx
@@ -23,9 +23,9 @@ export const ProjectHero = React.memo(({ searchQuery, onSearchChange, onClearSea
     const pageDescription = "Explore my portfolio of web development projects and applications.";
 
     return (
-        <div className="min-h-36 sm:min-h-60 flex bg-gradient-to-b from-primary/10 pt-14 sm:pt-24 to-background flex-col overflow-clip relative items-start justify-center">
+        <div className="min-h-36 sm:min-h-60 flex bg-linear-to-b from-primary/10 pt-14 sm:pt-24 to-background flex-col overflow-clip relative items-start justify-center">
             <RainbowGlow className="opacity-10"/>
-            <BackgroundBeamsWithCollision className="flex items-center absolute -z-[1] pointer-events-none max-w-5xl left-1/2 -translate-x-1/2 mx-auto justify-center w-full h-full" />
+            <BackgroundBeamsWithCollision className="flex items-center absolute -z-1 pointer-events-none max-w-5xl left-1/2 -translate-x-1/2 mx-auto justify-center w-full h-full" />
             <div className="absolute inset-y-0 left-1/3 right-0 pointer-events-none" aria-hidden="true">
                 <GridPattern
                     width={30}
@@ -33,10 +33,10 @@ export const ProjectHero = React.memo(({ searchQuery, onSearchChange, onClearSea
                     x={-1}
                     y={-1}
                     strokeDasharray={"4 2"}
-                    className={"[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
+                    className={"mask-[radial-gradient(300px_circle_at_center,white,transparent)] absolute w-full "}
                 />
             </div>
-            <div className="w-full p-4 sm:px-5 flex flex-col max-w-5xl mx-auto">
+            <div className="w-full p-4 pb-0 sm:px-5 flex flex-col max-w-5xl mx-auto">
                 <BlurFade delay={0.6} inView className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 w-full">
                     <div className="space-y-2 max-w-2xl">
                         <h1 className="text-3xl -translate-x-0.5 font-bold sm:text-5xl xl:text-6xl/none"> Pro<span className="text-left bg-background  bg-clip-text bg-no-repeat text-transparent bg-gradient-to-r from-sky-500 via-teal-500 to-green-500 [text-shadow:0_0_rgba(0,0,0,0.1)]">jects</span> </h1>
@@ -70,7 +70,7 @@ export const ProjectHero = React.memo(({ searchQuery, onSearchChange, onClearSea
                     </div>
                 </BlurFade>
                 <BlurFade delay={0.5} inView className="flex max-sm:order-first max-sm:mb-5 flex-col items-start justify-start">
-                    <Button asChild>
+                    <Button asChild className="mt-5">
                         <Link href="/">
                             <ArrowLeftIcon className="w-4 h-4" /> Back to Home
                         </Link>