diff --git a/packages/nextjs/app/explore/Explore.tsx b/packages/nextjs/app/explore/Explore.tsx
index 5c4d7e3..431d6b1 100644
--- a/packages/nextjs/app/explore/Explore.tsx
+++ b/packages/nextjs/app/explore/Explore.tsx
@@ -1,11 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { ErrorComponent } from "./_components/ErrorComponent";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { LoadingSpinner } from "./_components/LoadingSpinner";
 import { NewsFeed } from "./_components/NewsFeed";
-import { useAccount } from "wagmi";
-import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
@@ -19,14 +16,16 @@ export interface Post extends Partial<NFTMetaData> {
 }
 
 export const Explore = () => {
-  const { address: isConnected, isConnecting } = useAccount();
-  const [listedPosts, setListedPosts] = useState<Post[]>([]);
+  const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [page, setPage] = useState(0);
+  const observer = useRef<IntersectionObserver | null>(null);
 
   const {
     data: createEvents,
-    isLoading: createIsLoadingEvents,
-    error: createErrorReadingEvents,
+    // isLoading: createIsLoadingEvents,
+    // error: createErrorReadingEvents,
   } = useScaffoldEventHistory({
     contractName: "PunkPosts",
     eventName: "PostCreated",
@@ -34,93 +33,86 @@ export const Explore = () => {
     watch: true,
   });
 
-  // const {
-  //   data: deleteEvents,
-  //   isLoading: deleteIsLoadingEvents,
-  //   error: deleteErrorReadingEvents,
-  // } = useScaffoldEventHistory({
-  //   contractName: "PunkPosts",
-  //   eventName: "PostDeleted",
-  //   fromBlock: 0n,
-  //   watch: true,
-  // });
-
-  useEffect(() => {
-    const fetchListedNFTs = async () => {
+  const fetchPosts = useCallback(
+    async (page: number) => {
       if (!createEvents) return;
 
-      const postsUpdate: Post[] = [];
-
-      for (const event of createEvents || []) {
-        try {
-          const { args } = event;
-          const user = args?.user;
-          const tokenURI = args?.tokenURI;
-
-          if (!tokenURI) continue;
-
-          const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
-          const nftMetadata: NFTMetaData = await getMetadataFromIPFS(ipfsHash);
-
-          // Temporary fix for V1
-          // Check if the image attribute is valid and does not point to [object Object]
-          if (nftMetadata.image === "https://ipfs.io/ipfs/[object Object]") {
-            console.warn(`Skipping post with invalid image URL: ${nftMetadata.image}`);
-            continue;
+      setLoadingMore(true);
+      try {
+        // Calculate the start and end indices for the current page
+        const start = (page - 1) * 8;
+        const end = page * 8;
+        const eventsToFetch = createEvents.slice(start, end);
+
+        const postsUpdate: Post[] = [];
+
+        for (const event of eventsToFetch) {
+          try {
+            const user = event.args?.user;
+            const tokenURI = event.args?.tokenURI;
+
+            if (!tokenURI) continue;
+
+            const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
+            const nftMetadata: NFTMetaData = await getMetadataFromIPFS(ipfsHash);
+
+            // Temporary fix for V1
+            // Check if the image attribute is valid and does not point to [object Object]
+            if (nftMetadata.image === "https://ipfs.io/ipfs/[object Object]") {
+              console.warn(`Skipping post with invalid image URL: ${nftMetadata.image}`);
+              continue;
+            }
+
+            postsUpdate.push({
+              listingId: undefined,
+              uri: tokenURI,
+              user: user || "",
+              ...nftMetadata,
+            });
+          } catch (e) {
+            notification.error("Error fetching posts");
+            console.error(e);
           }
-
-          postsUpdate.push({
-            listingId: undefined,
-            uri: tokenURI,
-            user: user || "",
-            ...nftMetadata,
-          });
-        } catch (e) {
-          notification.error("Error fetching posts");
-          console.error(e);
         }
-      }
 
-      setListedPosts(postsUpdate);
-    };
-
-    fetchListedNFTs();
-  }, [createEvents]);
+        setPosts(prevPosts => [...prevPosts, ...postsUpdate]);
+      } catch (error) {
+        notification.error("Failed to load posts");
+      } finally {
+        setLoadingMore(false);
+      }
+    },
+    [createEvents],
+  );
 
   useEffect(() => {
-    if (listedPosts.length > 0) {
-      setLoading(false); // Stop loading after Posts are updated
-    }
-  }, [listedPosts]);
-
-  // const filteredPosts = listedPosts.filter(Post => {
-  //   return true;
-  // });
-
-  if (createIsLoadingEvents) {
-    return <LoadingSpinner />;
-  }
+    setLoading(true);
+    fetchPosts(page).finally(() => setLoading(false));
+  }, [page, fetchPosts]);
+
+  const lastPostElementRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (loadingMore) return;
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) {
+          setPage(prevPage => prevPage + 1);
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [loadingMore],
+  );
 
-  if (loading) {
+  if (loading && page === 0) {
     return <LoadingSpinner />;
   }
 
-  if (createErrorReadingEvents) {
-    return <ErrorComponent message={createErrorReadingEvents?.message || "Error loading events"} />;
-  }
-
   return (
-    <>
-      <div className="flex justify-center">{!isConnected || isConnecting ? <RainbowKitCustomConnectButton /> : ""}</div>
-      {listedPosts.length === 0 ? (
-        <div className="flex justify-center items-center mt-10">
-          <div className="text-2xl text-primary-content">No posts found</div>
-        </div>
-      ) : loading ? (
-        <LoadingSpinner />
-      ) : (
-        <NewsFeed filteredPosts={listedPosts} />
-      )}
-    </>
+    <div>
+      <NewsFeed posts={posts} />
+      <div ref={lastPostElementRef}></div>
+      {loadingMore && <LoadingSpinner />}
+    </div>
   );
 };
diff --git a/packages/nextjs/app/explore/_components/NewsFeed.tsx b/packages/nextjs/app/explore/_components/NewsFeed.tsx
index dd13121..f514846 100644
--- a/packages/nextjs/app/explore/_components/NewsFeed.tsx
+++ b/packages/nextjs/app/explore/_components/NewsFeed.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import { Post } from "../Explore";
-import { NFTCard } from "./NFTCard";
+import { PostCard } from "./PostCard";
 
 type NewsFeedProps = {
-  filteredPosts: Post[];
+  posts: Post[];
 };
 
-export const NewsFeed: React.FC<NewsFeedProps> = ({ filteredPosts }) => {
+export const NewsFeed: React.FC<NewsFeedProps> = ({ posts }) => {
   return (
     <div className="mt-4 lg:mt-0 lg:flex lg:justify-center lg:items-center">
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 lg:my-4">
-        {filteredPosts.map(item => (
-          <NFTCard nft={item} key={item.uri} />
+        {posts.map(post => (
+          <PostCard post={post} key={post.uri} />
         ))}
       </div>
     </div>
diff --git a/packages/nextjs/app/explore/_components/NFTCard.tsx b/packages/nextjs/app/explore/_components/PostCard.tsx
similarity index 89%
rename from packages/nextjs/app/explore/_components/NFTCard.tsx
rename to packages/nextjs/app/explore/_components/PostCard.tsx
index b774171..203e23c 100644
--- a/packages/nextjs/app/explore/_components/NFTCard.tsx
+++ b/packages/nextjs/app/explore/_components/PostCard.tsx
@@ -14,7 +14,7 @@ export interface Post extends Partial<NFTMetaData> {
   date?: string;
 }
 
-export const NFTCard = ({ nft }: { nft: Post }) => {
+export const PostCard = ({ post }: { post: Post }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleOpenModal = () => {
@@ -29,11 +29,11 @@ export const NFTCard = ({ nft }: { nft: Post }) => {
     <div className="flex justify-center items-center">
       <div className={`card-compact bg-base-300 w-[75%] lg:w-[300px] relative group rounded-lg`}>
         {/* Image Section */}
-        {nft.image && nft.image !== "https://ipfs.io/ipfs/" && (
+        {post.image && post.image !== "https://ipfs.io/ipfs/" && (
           <div className="relative w-full h-0 pb-[100%] overflow-hidden">
             <figure className="absolute inset-0">
               <Image
-                src={nft.image || "/path/to/default/image.png"}
+                src={post.image || "/path/to/default/image.png"}
                 alt="NFT Image"
                 className="w-full h-full rounded-lg object-cover"
                 layout="fill" // Ensures the image fills the container
@@ -50,11 +50,11 @@ export const NFTCard = ({ nft }: { nft: Post }) => {
 
         <div className="card-body space-y-3">
           <div className="flex flex-col justify-center mt-1">
-            <p className="my-0 text-lg">{nft.description ?? "No description available."}</p>
+            <p className="my-0 text-lg">{post.description ?? "No description available."}</p>
           </div>
 
           <div className="flex space-x-3 mt-1 items-center">
-            <ProfileAddress address={nft.user} />
+            <ProfileAddress address={post.user} />
           </div>
         </div>
 
@@ -62,7 +62,7 @@ export const NFTCard = ({ nft }: { nft: Post }) => {
         {isModalOpen && (
           <Modal onClose={handleCloseModal}>
             <Image
-              src={nft.image || "/path/to/default/image.png"}
+              src={post.image || "/path/to/default/image.png"}
               alt="NFT Image"
               className="w-full h-auto rounded-lg object-cover"
               layout="responsive"
diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
index d3214f2..9a2b065 100644
--- a/packages/nextjs/app/profile/[address]/page.tsx
+++ b/packages/nextjs/app/profile/[address]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { usePathname } from "next/navigation";
 import { ErrorComponent } from "../../explore/_components/ErrorComponent";
 import { LoadingSpinner } from "../../explore/_components/LoadingSpinner";
@@ -31,8 +31,12 @@ const ProfilePage: NextPage = () => {
   const [profilePicture, setProfilePicture] = useState<string>("");
   const [website, setWebsite] = useState("");
   const [isEditing, setIsEditing] = useState(false); // New state for edit mode
-  const [listedPosts, setListedPosts] = useState<Post[]>([]);
+  const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(true);
+  const [page, setPage] = useState(1); // Start from page 1 to get the last post first
+  const [loadingProfile, setLoadingProfile] = useState(true);
+  const observer = useRef<IntersectionObserver | null>(null);
 
   const { address: connectedAddress } = useAccount();
 
@@ -50,7 +54,7 @@ const ProfilePage: NextPage = () => {
 
   const {
     data: createEvents,
-    isLoading: createIsLoadingEvents,
+    // isLoading: createIsLoadingEvents,
     error: createErrorReadingEvents,
   } = useScaffoldEventHistory({
     contractName: "PunkPosts",
@@ -82,45 +86,78 @@ const ProfilePage: NextPage = () => {
     }
   };
 
-  useEffect(() => {
-    const fetchPosts = async () => {
-      if (!createEvents) {
-        // setLoading(false);
-        return;
-      }
-
-      const postsUpdate: Post[] = [];
-
-      for (const event of createEvents || []) {
-        try {
-          const { args } = event;
-          const user = args?.user;
-          const tokenURI = args?.tokenURI;
-
-          if (args?.user !== address) continue;
-          if (!tokenURI) continue;
-
-          const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
-          const nftMetadata: NFTMetaData = await getMetadataFromIPFS(ipfsHash);
-
-          postsUpdate.push({
-            listingId: undefined,
-            uri: tokenURI,
-            user: user || "",
-            ...nftMetadata,
-          });
-        } catch (e) {
-          notification.error("Error fetching collection started NFTs");
-          console.error(e);
+  const fetchPosts = useCallback(
+    async (page: number) => {
+      if (!createEvents) return;
+
+      setLoadingMore(true);
+      try {
+        // Calculate the start and end indices for the current page
+        const start = (page - 1) * 8;
+        const end = page * 8;
+        const eventsToFetch = createEvents.slice(start, end);
+
+        const postsUpdate: Post[] = [];
+
+        for (const event of eventsToFetch) {
+          try {
+            const { args } = event;
+            const user = args?.user;
+            const tokenURI = args?.tokenURI;
+
+            if (args?.user !== address) continue;
+            if (!tokenURI) continue;
+
+            const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
+            const nftMetadata: NFTMetaData = await getMetadataFromIPFS(ipfsHash);
+
+            // Temporary fix for V1
+            // Check if the image attribute is valid and does not point to [object Object]
+            if (nftMetadata.image === "https://ipfs.io/ipfs/[object Object]") {
+              console.warn(`Skipping post with invalid image URL: ${nftMetadata.image}`);
+              continue;
+            }
+
+            postsUpdate.push({
+              listingId: undefined,
+              uri: tokenURI,
+              user: user || "",
+              ...nftMetadata,
+            });
+          } catch (e) {
+            notification.error("Error fetching posts");
+            console.error(e);
+          }
         }
-      }
 
-      setListedPosts(postsUpdate);
-      setLoading(false);
-    };
+        setPosts(prevPosts => [...prevPosts, ...postsUpdate]);
+      } catch (error) {
+        notification.error("Failed to load posts");
+      } finally {
+        setLoadingMore(false);
+      }
+    },
+    [createEvents, address],
+  );
 
-    fetchPosts();
-  }, [createEvents, address, connectedAddress]);
+  useEffect(() => {
+    setLoading(true);
+    fetchPosts(page).finally(() => setLoading(false));
+  }, [page, fetchPosts]);
+
+  const lastPostElementRef = useCallback(
+    (node: any) => {
+      if (loadingMore) return;
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) {
+          setPage(prevPage => prevPage + 1);
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [loadingMore],
+  );
 
   useEffect(() => {
     if (!isEditing && profileInfo) {
@@ -128,19 +165,10 @@ const ProfilePage: NextPage = () => {
       setBio(profileInfo[1] || "");
       setProfilePicture(profileInfo[2] ? profileInfo[2] : defaultProfilePicture);
       setWebsite(profileInfo[3] || "");
+      setLoadingProfile(false);
     }
   }, [profileInfo, isEditing]);
 
-  useEffect(() => {
-    if (listedPosts.length > 0) {
-      setLoading(false); // Stop loading after Posts are updated
-    }
-  }, [listedPosts]);
-
-  // const filteredPosts = listedPosts.filter(Post => {
-  //   return true;
-  // });
-
   // Ensure the address is available before rendering the component
   if (!address) {
     return <p>Inexistent address, try again...</p>;
@@ -150,7 +178,7 @@ const ProfilePage: NextPage = () => {
   //   return <LoadingSpinner />;
   // }
 
-  if (createIsLoadingEvents) {
+  if (loading && page === 1) {
     return <LoadingSpinner />;
   }
 
@@ -169,89 +197,96 @@ const ProfilePage: NextPage = () => {
     <>
       <div className="flex flex-col items-center">
         {/* User Profile Section */}
-        <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full m-2">
-          {/* Profile Picture */}
-          <div className="avatar ">
-            <ProfilePictureUpload
-              isEditing={isEditing}
-              profilePicture={profilePicture}
-              setProfilePicture={setProfilePicture}
-            />
+        {loadingProfile ? (
+          <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full m-2">
+            <div className="flex items-center justify-center w-full h-full">
+              <LoadingSpinner />
+            </div>
           </div>
-          {/* User Info Section */}
-          <div className="flex flex-col justify-center items-center">
+        ) : (
+          <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full m-2">
+            {/* Profile Picture */}
+            <div className="avatar ">
+              <ProfilePictureUpload
+                isEditing={isEditing}
+                profilePicture={profilePicture}
+                setProfilePicture={setProfilePicture}
+              />
+            </div>
+            {/* User Info Section */}
+            <div className="flex flex-col justify-center items-center">
+              {isEditing ? (
+                <InputBase placeholder="Your Name" value={username} onChange={setUsername} />
+              ) : (
+                <>
+                  <h2 className="text-2xl font-bold">{username || "Guest user"}</h2>
+
+                  {bio && <p className="text-base-content">{bio}</p>}
+                  {website && (
+                    <a href={website} target="_blank" rel="noopener noreferrer" className="text-blue-600">
+                      {website}
+                    </a>
+                  )}
+                  <div className="mt-2">
+                    {address == connectedAddress ? (
+                      <RainbowKitCustomConnectButton />
+                    ) : (
+                      <div className="text-base-content">
+                        <Address address={address} />
+                      </div>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+            {/* Div to align info in the center */}
+            <div></div>
+            {/* User Bio */}{" "}
             {isEditing ? (
-              <InputBase placeholder="Your Name" value={username} onChange={setUsername} />
+              <div className="flex-grow text-center md:mx-auto mt-4 md:mt-0">
+                <>
+                  <InputBase placeholder="Your Bio" value={bio} onChange={setBio} />
+                  <InputBase placeholder="Your Website" value={website} onChange={setWebsite} />
+                </>
+              </div>
             ) : (
+              <></>
+            )}
+            {/* Edit/Cancel Button */}
+            {address === connectedAddress && (
               <>
-                <h2 className="text-2xl font-bold">{username || "Guest user"}</h2>
-
-                {bio && <p className="text-base-content">{bio}</p>}
-                {website && (
-                  <a href={website} target="_blank" rel="noopener noreferrer" className="text-blue-600">
-                    {website}
-                  </a>
+                {isEditing ? (
+                  <button
+                    className="absolute top-4 right-4 btn btn-secondary btn-sm"
+                    onClick={() => setIsEditing(false)}
+                  >
+                    X Cancel
+                  </button>
+                ) : (
+                  <button className="absolute top-4 right-4 btn btn-primary btn-sm" onClick={() => setIsEditing(true)}>
+                    <PencilIcon className="h-5 w-5" />
+                    Edit
+                  </button>
+                )}
+                {isEditing && (
+                  <div className="mt-2 flex items-center gap-2">
+                    <button className="cool-button" onClick={handleEditProfile}>
+                      Save changes
+                    </button>
+                  </div>
                 )}
-                <div className="mt-2">
-                  {address == connectedAddress ? (
-                    <RainbowKitCustomConnectButton />
-                  ) : (
-                    <div className="text-base-content">
-                      <Address address={address} />
-                    </div>
-                  )}
-                </div>
               </>
             )}
           </div>
-          {/* Div to align info in the center */}
-          <div></div>
-          {/* User Bio */}{" "}
-          {isEditing ? (
-            <div className="flex-grow text-center md:mx-auto mt-4 md:mt-0">
-              <>
-                <InputBase placeholder="Your Bio" value={bio} onChange={setBio} />
-                <InputBase placeholder="Your Website" value={website} onChange={setWebsite} />
-              </>
-            </div>
-          ) : (
-            <></>
-          )}
-          {/* Edit/Cancel Button */}
-          {address === connectedAddress && (
-            <>
-              {isEditing ? (
-                <button className="absolute top-4 right-4 btn btn-secondary btn-sm" onClick={() => setIsEditing(false)}>
-                  X Cancel
-                </button>
-              ) : (
-                <button className="absolute top-4 right-4 btn btn-primary btn-sm" onClick={() => setIsEditing(true)}>
-                  <PencilIcon className="h-5 w-5" />
-                  Edit
-                </button>
-              )}
-              {isEditing && (
-                <div className="mt-2 flex items-center gap-2">
-                  <button className="cool-button" onClick={handleEditProfile}>
-                    Save changes
-                  </button>
-                </div>
-              )}
-            </>
-          )}
-        </div>
+        )}
       </div>
       {/* {loading && <LoadingSpinner />} */}
 
-      {loading ? (
-        <LoadingSpinner />
-      ) : listedPosts.length !== 0 ? (
-        <NewsFeed filteredPosts={listedPosts} />
-      ) : (
-        <div className="flex justify-center items-center mt-10">
-          <div className="text-2xl text-primary-content">No posts found</div>
-        </div>
-      )}
+      <div>
+        <NewsFeed posts={posts} />
+        <div ref={lastPostElementRef}></div>
+        {loadingMore && <LoadingSpinner />}
+      </div>
     </>
   );
 };
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 0c4236c..f3ee2be 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -110,7 +110,11 @@ export const Header = () => {
             <Cog6ToothIcon onClick={toggleSettingsMenu} className="cursor-pointer h-6 w-6" />
             {/* <Cog6ToothIcon className="h-6 w-6" /> */}
             {isSettingsMenuOpen && (
-              <div className="absolute right-5 top-10 mt-2 w-48 bg-base-300 shadow-lg rounded-lg">
+              <div
+                ref={menuRef}
+                className="absolute right-5 top-10 mt-2 w-48 bg-base-300 shadow-lg rounded-lg"
+                onClick={e => e.stopPropagation()}
+              >
                 <div className="flex flex-col justify-center items-center my-2 gap-1">
                   <RainbowKitCustomConnectButton />
                   <SwitchTheme />