diff --git a/src/app/page.tsx b/src/app/page.tsx
index dde3d73a..c0e9b6de 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -37,10 +37,11 @@ export default async function HomePage() {
             itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
             getNextComponent={async (offset, limit) => {
               'use server';
-              // console.log('Getting next component', { offset, limit });
               const photos = await getPhotosCached({ limit: offset + limit });
-              const nextPhotos = photos.slice(-limit);
-              console.log(`Sending ${nextPhotos.length} photos`);
+              console.log(photos.length);
+              const nextPhotos = photos.slice(offset);
+              console.log('Getting next component', { offset, limit });
+              console.log(`Sending: ${nextPhotos.map(p => p.id).join(', ')}`);
               return {
                 nextComponent: <PhotosLarge photos={nextPhotos} />,
                 isFinished: offset + limit >= count,
diff --git a/src/components/MoreComponents.tsx b/src/components/MoreComponents.tsx
index acb2d547..1a80856c 100644
--- a/src/components/MoreComponents.tsx
+++ b/src/components/MoreComponents.tsx
@@ -35,16 +35,21 @@ export default function MoreComponents({
     if (
       !isLoading &&
       // (lastIndexToLoad === undefined || indexToLoad <= lastIndexToLoad) &&
+      // indexToLoad >= 1 &&
       indexToLoad > indexToView &&
       indexToLoad > indexLoaded
     ) {
       setIsLoading(true);
       getNextComponent(
-        initialOffset + indexToLoad * itemsPerRequest,
+        initialOffset + (indexToLoad - 1) * itemsPerRequest,
         itemsPerRequest,
       )
         .then(({ nextComponent, isFinished }) => {
-          setComponents(current => [...current, nextComponent]);
+          setComponents(current => {
+            const updatedComponents = [...current];
+            updatedComponents[indexToLoad] = nextComponent;
+            return updatedComponents;
+          });
           setIndexLoaded(indexToLoad);
           if (isFinished) {
             setLastIndexToLoad(indexToLoad);
@@ -89,10 +94,17 @@ export default function MoreComponents({
     }
   }, [triggerOnView, advance]);
 
-  console.log({ indexToLoad, indexToView, indexLoaded, lastIndexToLoad });
+  // console.log({
+  //   indexToLoad,
+  //   indexToView,
+  //   // indexLoaded,
+  //   lastIndexToLoad,
+  //   componentsLength: components.length,
+  //   componentsToView: components.slice(0, indexToView + 1).length,
+  // });
 
   return <>
-    {components.slice(0, indexToView)}
+    {components.slice(0, indexToView + 1)}
     {indexToView < indexLoaded &&
       <SiteGrid
         contentMain={