diff --git a/api/src/types/fragments.js b/api/src/types/fragments.js
index 45f9afc2..b5aab488 100644
--- a/api/src/types/fragments.js
+++ b/api/src/types/fragments.js
@@ -15,6 +15,7 @@ export const didIndexFragment = `
 export const profileFragment = `
   ... on Profile {
     id
+    bio
     name
     avatar
     createdAt
@@ -116,7 +117,7 @@ export const teamFragment = `
           updatedAt
       }
   }
-`
+`;
 
 export const modelBundleFragment = `
   id
@@ -208,7 +209,6 @@ export const modelBundleFragment = `
   }
 `;
 
-
 export const indexItemFragment = `
   ... on IndexItem {
     id
@@ -232,4 +232,4 @@ export const indexItemFragment = `
       deletedAt
     }
   }
-`
+`;
diff --git a/web-app/package.json b/web-app/package.json
index 61a62c02..e74bd283 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -35,6 +35,7 @@
     "@reduxjs/toolkit": "^1.8.2",
     "@self.id/web": "^0.5.0",
     "@stablelib/random": "^1.0.1",
+    "@types/react-infinite-scroll-component": "^5.0.0",
     "add": "^2.0.6",
     "ai": "^2.1.19",
     "axios": "^1.6.2",
@@ -65,7 +66,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-images-uploading": "^3.1.7",
-    "react-infinite-scroller": "^1.2.6",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-intersection-observer": "^9.5.2",
     "react-lazyload": "^3.2.0",
     "react-lottie-player": "^1.4.3",
diff --git a/web-app/src/app/[id]/page.tsx b/web-app/src/app/[id]/page.tsx
index 86b71409..39eaea1d 100644
--- a/web-app/src/app/[id]/page.tsx
+++ b/web-app/src/app/[id]/page.tsx
@@ -8,17 +8,12 @@ import UserConversationSection from "components/sections/UserConversation";
 import { useRouteParams } from "hooks/useRouteParams";
 import { useEffect } from "react";
 import "../../styles/main.scss";
-import { useRouter } from "next/navigation";
 
 const Discovery = () => {
   const { discoveryType, indexes } = useApp();
   const { id } = useRouteParams();
-  const router = useRouter();
 
   useEffect(() => {
-    console.log("discoveryType in page.tsx:", discoveryType, id);
-    console.log("indexes in page.tsx:", indexes);
-
     // if (typeof window !== "undefined") {
     //   window.ethereum.on("message", (message: any) => {
     //     console.log("eth: ", message);
diff --git a/web-app/src/components/ai/no-indexes.tsx b/web-app/src/components/ai/no-indexes.tsx
index 353a9e01..6ff6724b 100644
--- a/web-app/src/components/ai/no-indexes.tsx
+++ b/web-app/src/components/ai/no-indexes.tsx
@@ -14,7 +14,7 @@ export default function NoIndexesChat({ isSelfDid }: { isSelfDid?: boolean }) {
         textAlign: "center",
         flexDirection: "column",
         alignItems: "center",
-        padding: "4rem 0",
+        padding: "8rem 0 0 0",
       }}
     >
       <Image
diff --git a/web-app/src/components/base/SearchInput/index.tsx b/web-app/src/components/base/SearchInput/index.tsx
index e436777e..7a610c34 100644
--- a/web-app/src/components/base/SearchInput/index.tsx
+++ b/web-app/src/components/base/SearchInput/index.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useState } from "react";
 import debounce from "lodash.debounce";
+import React, { useCallback, useEffect, useState } from "react";
+import IconClose from "../Icon/IconClose";
 import IconSearch from "../Icon/IconSearch";
 import Input, { InputProps } from "../Input";
-import IconClose from "../Icon/IconClose";
 import Spin from "../Spin";
 
 export interface SearchInputProps extends InputProps {
@@ -59,7 +59,15 @@ const SearchInput = ({
     <Input
       {...inputProps}
       inputSize={"lg"}
-      addOnBefore={<IconSearch width={20} height={20} />}
+      addOnBefore={
+        <span
+          style={{
+            marginRight: "6px",
+          }}
+        >
+          <IconSearch width={20} height={20} />
+        </span>
+      }
       addOnAfter={
         loading ? (
           <Spin active={true} thickness="light" theme="secondary" />
diff --git a/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx b/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx
index 75d3def1..5b9f3ef9 100644
--- a/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx
+++ b/web-app/src/components/sections/IndexConversation/IndexConversationContext.tsx
@@ -74,7 +74,7 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
         }
 
         const response = await api!.getItems(viewedIndex.id, itemParams);
-
+        console.log(response.endCursor, "endCursor");
         if (response) {
           setItemsState((prevState) => ({
             items:
@@ -98,7 +98,7 @@ export const IndexConversationProvider = ({ children }: { children: any }) => {
   const fetchInitial = useCallback(async () => {
     await fetchIndex();
     fetchIndexItems(true);
-  }, [viewedIndex, fetchIndex, fetchIndexItems]);
+  }, [fetchIndex]);
 
   useEffect(() => {
     fetchInitial();
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx
index d3642ee3..5ebe49e2 100644
--- a/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx
+++ b/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx
@@ -34,7 +34,6 @@ export default function IndexItemsTabSection() {
 
   useEffect(() => {
     if (addedItem) {
-      console.log("addedItem", addedItem, progress);
       setItemsState({
         items: [addedItem, ...itemsState.items],
         cursor: itemsState.cursor,
@@ -174,23 +173,13 @@ export default function IndexItemsTabSection() {
         </FlexRow>
       )}
 
-      <div
-        key={viewedIndex?.id}
-        className={"scrollable-container mb-4 mt-6"}
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          overflowY: "auto",
-          maxHeight: "calc(100vh - 34rem)",
-        }}
-      >
+      <div key={viewedIndex?.id} className={"mb-4 mt-6"}>
         <IndexItemList
           items={itemsState.items}
           search={search}
           hasMore={!!itemsState.cursor}
           removeItem={handleRemove}
-          // loadMore={fetchIndexItems}
-          loadMore={() => {}}
+          loadMore={() => fetchIndexItems(false)}
         />
       </div>
     </Flex>
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx
index 80338512..6b3aa94b 100644
--- a/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx
+++ b/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/SettingsModal.tsx
@@ -36,10 +36,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
     header = (
       <div>
         <h2>Waiting for transaction</h2>
-        <p>
-          Please wait while the transaction is being processed. This may take a
-          few minutes.
-        </p>
+        <p>Please wait while the transaction is being processed.</p>
       </div>
     );
   } else if (step === "done") {
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx
index 5af4336c..2fcdd869 100644
--- a/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx
+++ b/web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/WaitingForTransaction.tsx
@@ -1,4 +1,3 @@
-import Button from "@/components/base/Button";
 import { FC } from "react";
 
 interface WaitingForTransactionProps {
@@ -41,7 +40,7 @@ const WaitingForTransaction: FC<WaitingForTransactionProps> = ({
         </video>
       </div>
 
-      <div
+      {/* <div
         style={{
           display: "flex",
           justifyContent: "space-between",
@@ -65,7 +64,7 @@ const WaitingForTransaction: FC<WaitingForTransactionProps> = ({
         >
           Loading
         </Button>
-      </div>
+      </div> */}
     </div>
   </div>
 );
diff --git a/web-app/src/components/site/index-details/IndexItemList/index.tsx b/web-app/src/components/site/index-details/IndexItemList/index.tsx
index b362676c..5267dccb 100644
--- a/web-app/src/components/site/index-details/IndexItemList/index.tsx
+++ b/web-app/src/components/site/index-details/IndexItemList/index.tsx
@@ -1,10 +1,11 @@
-import React from "react";
 import List from "components/base/List";
-import InfiniteScroll from "react-infinite-scroller";
-import { IndexItem } from "types/entity";
+import { FC, memo } from "react";
 import { useRole } from "hooks/useRole";
-import LinkItem from "../LinkItem";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { IndexItem } from "types/entity";
+
 import NoLinks from "../../indexes/NoLinks";
+import LinkItem from "../LinkItem";
 
 export interface IndexItemListProps {
   search: string;
@@ -14,9 +15,9 @@ export interface IndexItemListProps {
   loadMore: () => void;
 }
 
-const MemoLinkItem = React.memo(LinkItem);
+const MemoLinkItem = memo(LinkItem);
 
-const IndexItemList: React.VFC<IndexItemListProps> = ({
+const IndexItemList: FC<IndexItemListProps> = ({
   search,
   items,
   hasMore,
@@ -31,18 +32,20 @@ const IndexItemList: React.VFC<IndexItemListProps> = ({
         <NoLinks isOwner={isOwner} tabKey="items" search={search} />
       ) : (
         <InfiniteScroll
-          className="scrollable-area idxflex-grow-1 pb-6"
-          useWindow={false}
           hasMore={hasMore}
-          loadMore={loadMore}
-          marginHeight={50}
+          next={loadMore}
+          dataLength={items.length}
+          height={"calc(100vh - 36rem)"}
+          loader={<div className="loader" key={0}></div>}
         >
           <List
             listClass="index-item-list"
             render={(item: IndexItem) => (
               <MemoLinkItem
                 handleRemove={() => removeItem(item)}
-                search={!!search} item={item} />
+                search={!!search}
+                item={item}
+              />
             )}
             divided
             data={items}
diff --git a/web-app/src/components/site/indexes/AskIndexes/index.tsx b/web-app/src/components/site/indexes/AskIndexes/index.tsx
index 58f5cd71..a5715b4e 100644
--- a/web-app/src/components/site/indexes/AskIndexes/index.tsx
+++ b/web-app/src/components/site/indexes/AskIndexes/index.tsx
@@ -163,7 +163,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
 
   useEffect(() => {
     scrollToBottom();
-  }, [messages, isLoading]);
+  }, [messages, isLoading, scrollToBottom]);
 
   if (leftSectionIndexes.length === 0) {
     return <NoIndexes tabKey={leftTabKey} />;
@@ -192,6 +192,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, did, indexIds }) => {
               height: "100%",
               justifyContent: "stretch",
               width: "100%",
+              flexDirection: "column",
             }}
           >
             {messages.length ? (
diff --git a/web-app/src/components/site/input/LinkInput/index.tsx b/web-app/src/components/site/input/LinkInput/index.tsx
index 008890f6..cdb28cf0 100644
--- a/web-app/src/components/site/input/LinkInput/index.tsx
+++ b/web-app/src/components/site/input/LinkInput/index.tsx
@@ -61,7 +61,7 @@ const LinkInput: React.FC<LinkInputProps> = ({
         className={cc(["link-input__input", `link-input-${size}`])}
         disabled={disabled}
         addOnBefore={
-          <IconAdd style={{ marginRight: "4px" }} width={20} height={20} />
+          <IconAdd style={{ marginRight: "6px" }} width={20} height={20} />
         }
         addOnAfter={
           loading ? (
diff --git a/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx b/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx
index 5c54e217..4a5570c8 100644
--- a/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx
+++ b/web-app/src/components/site/modal/Common/ConfirmTransaction/index.tsx
@@ -1,8 +1,5 @@
-import React from "react";
 import Text from "components/base/Text";
-import Col from "components/layout/base/Grid/Col";
 import Modal from "components/base/Modal";
-import Button from "components/base/Button";
 import Row from "components/layout/base/Grid/Row";
 import Header from "components/base/Header";
 import Flex from "components/layout/base/Grid/Flex";
@@ -19,7 +16,12 @@ const ConfirmTransaction = ({ handleCancel, ...modalProps }: any) => {
       body={
         <>
           <Row></Row>
-          <Flex alignitems="center">
+          <Flex
+            alignitems="center"
+            style={{
+              paddingBottom: "2.4rem",
+            }}
+          >
             <video
               autoPlay
               loop
@@ -40,37 +42,37 @@ const ConfirmTransaction = ({ handleCancel, ...modalProps }: any) => {
         <>
           <Header level={2}>Waiting for network confirmation</Header>
           <Text className={"mt-4"} element={"p"}>
-          Please wait for a few seconds.
+            Please wait for a few seconds.
           </Text>
         </>
       }
-      footer={
-        <>
-          <Row>
-            <Col pullLeft>
-              <Button
-                onClick={handleCancel}
-                className="pl-8 pr-8 "
-                size="lg"
-                theme="clear"
-              >
-                Cancel
-              </Button>
-            </Col>
-            <Col pullRight>
-              <Button
-                theme="primary"
-                size="lg"
-                className="pl-6 pr-6"
-                loading={true}
-                disabled={true}
-              >
-                Loading
-              </Button>
-            </Col>
-          </Row>
-        </>
-      }
+      // footer={
+      //   <>
+      //     <Row>
+      //       <Col pullLeft>
+      //         <Button
+      //           onClick={handleCancel}
+      //           className="pl-8 pr-8 "
+      //           size="lg"
+      //           theme="clear"
+      //         >
+      //           Cancel
+      //         </Button>
+      //       </Col>
+      //       <Col pullRight>
+      //         <Button
+      //           theme="primary"
+      //           size="lg"
+      //           className="pl-6 pr-6"
+      //           loading={true}
+      //           disabled={true}
+      //         >
+      //           Loading
+      //         </Button>
+      //       </Col>
+      //     </Row>
+      //   </>
+      // }
     ></Modal>
   );
 };
diff --git a/web-app/src/context/AppContext.tsx b/web-app/src/context/AppContext.tsx
index b84f3161..7228c404 100644
--- a/web-app/src/context/AppContext.tsx
+++ b/web-app/src/context/AppContext.tsx
@@ -147,7 +147,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
       console.error("Error fetching index", error);
       toast.error("Error fetching index, please refresh the page");
     }
-  }, [id, viewedIndex, isIndex, apiReady]);
+  }, [id, viewedIndex, isIndex, apiReady, api]);
 
   const handleTransactionCancel = useCallback(() => {
     setTransactionApprovalWaiting(false);
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index df4e1f3d..1104b3ac 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -3007,6 +3007,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-infinite-scroll-component@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-infinite-scroll-component/-/react-infinite-scroll-component-5.0.0.tgz#f460f99f5c2f1b0eda482704505789100e0aaa6b"
+  integrity sha512-1DrmAOFfiy6nchA/KiXCAEzXxG4VHsEGJGlRyMZYy8A9WGfr0fAVe+MXep+VkjIPnNPf06qDbJGSNiPzt67wJg==
+  dependencies:
+    react-infinite-scroll-component "*"
+
 "@types/react-infinite-scroller@^1.2.3":
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.5.tgz#7c770be59465f3aaa1b86377d792d52de5e74047"
@@ -8637,7 +8644,7 @@ progress-events@^1.0.0:
   resolved "https://registry.yarnpkg.com/progress-events/-/progress-events-1.0.0.tgz#34f5e8fdb5dae3561837b22672d1e02277bb2109"
   integrity sha512-zIB6QDrSbPfRg+33FZalluFIowkbV5Xh1xSuetjG+rlC5he6u2dc6VQJ0TbMdlN3R1RHdpOqxEFMKTnQ+itUwA==
 
-prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8790,12 +8797,12 @@ react-images-uploading@^3.1.7:
   resolved "https://registry.yarnpkg.com/react-images-uploading/-/react-images-uploading-3.1.7.tgz#a53bf0d08624802dc6b74db4ec5695b0bfaf5a5c"
   integrity sha512-woET50eCezm645iIeP4gCoN7HjdR3T64UXC5l53yd+2vHFp+pwABH8Z/aAO5IXDeC1aP6doQ+K738L701zswAw==
 
-react-infinite-scroller@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz#8b80233226dc753a597a0eb52621247f49b15f18"
-  integrity sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==
+react-infinite-scroll-component@*, react-infinite-scroll-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
+  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
   dependencies:
-    prop-types "^15.5.8"
+    throttle-debounce "^2.1.0"
 
 react-intersection-observer@^9.5.2:
   version "9.8.0"
@@ -9810,6 +9817,11 @@ thread-stream@^0.15.1:
   dependencies:
     real-require "^0.1.0"
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 through@2, through@2.3.x:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"