diff --git a/src/app/hooks/useInfinityScroll.ts b/src/app/hooks/useInfinityScroll.ts
new file mode 100644
index 000000000..0857f1592
--- /dev/null
+++ b/src/app/hooks/useInfinityScroll.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+type LoadDataFunction = (searchStr: string, sortBy: string) => void;
+
+export const useInfinityScroll = (
+  callback: LoadDataFunction,
+  observerTarget: React.MutableRefObject<null>,
+  searchStr: string,
+  sortByStr: string
+) => {
+  useEffect(() => {
+    //handle infinity scroll with IntersectionObserver api
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          callback(searchStr, sortByStr);
+        }
+      },
+      { threshold: 1 }
+    );
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
+    return () => {
+      if (observerTarget.current) {
+        observer.unobserve(observerTarget.current);
+      }
+    };
+  }, []);
+};
diff --git a/src/app/modules/home-module/components/Charts/chartsGrid.tsx b/src/app/modules/home-module/components/Charts/chartsGrid.tsx
index 04d259b4b..939350db4 100644
--- a/src/app/modules/home-module/components/Charts/chartsGrid.tsx
+++ b/src/app/modules/home-module/components/Charts/chartsGrid.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import axios from "axios";
 import find from "lodash/find";
 import Box from "@material-ui/core/Box";
@@ -10,6 +10,7 @@ import { HomepageTable } from "app/modules/home-module/components/Table";
 import { coloredEchartTypes } from "app/modules/chart-module/routes/chart-type/data";
 import ReformedGridItem from "app/modules/home-module/components/Charts/reformedGridItem";
 import ChartAddnewCard from "./chartAddNewCard";
+import { useInfinityScroll } from "app/hooks/useInfinityScroll";
 
 interface Props {
   sortBy: string;
@@ -19,10 +20,15 @@ interface Props {
 }
 
 export default function ChartsGrid(props: Props) {
+  const observerTarget = useRef(null);
   const [cardId, setCardId] = React.useState<number>(0);
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
+  const [loadedCharts, setLoadedCharts] = React.useState<any[]>([]);
 
+  const limit = 15;
+  //used over usestate to get current offset value in the IntersectionObserver api, as it is not updated in usestate.
+  const offset = useRef(0);
   const charts = useStoreState(
     (state) => (state.charts.ChartGetList.crudData ?? []) as any[]
   );
@@ -30,6 +36,9 @@ export default function ChartsGrid(props: Props) {
   const loadCharts = useStoreActions(
     (actions) => actions.charts.ChartGetList.fetch
   );
+  const chartsLoadSuccess = useStoreState(
+    (state) => state.charts.ChartGetList.success
+  );
 
   const handleDelete = (index?: number) => {
     setModalDisplay(false);
@@ -94,15 +103,27 @@ export default function ChartsGrid(props: Props) {
         : "";
     loadCharts({
       storeInCrudData: true,
-      filterString: `filter={${value}"order":"${sortByStr} desc"}`,
+      filterString: `filter={${value}"order":"${sortByStr} desc","limit":${limit},"offset":${offset.current}}`,
     });
+    offset.current = offset.current + limit;
   }
+  useInfinityScroll(loadData, observerTarget, props.searchStr, props.sortBy);
 
   React.useEffect(() => {
     if (props.searchStr.length === 0) {
       loadData(props.searchStr, props.sortBy);
     }
   }, [props.sortBy]);
+  React.useEffect(() => {
+    if (!chartsLoadSuccess) {
+      return;
+    }
+    //update the loaded reports
+    setLoadedCharts((prevCharts) => {
+      const f = charts.filter((report, i) => prevCharts[i]?.id !== report.id);
+      return [...prevCharts, ...f];
+    });
+  }, [chartsLoadSuccess]);
 
   const [,] = useDebounce(
     () => {
@@ -119,7 +140,7 @@ export default function ChartsGrid(props: Props) {
       {!props.tableView && (
         <Grid container spacing={2}>
           {props.addCard && <ChartAddnewCard />}
-          {charts.map((c, index) => (
+          {loadedCharts.map((c, index) => (
             <Grid item key={c.id} xs={12} sm={6} md={6} lg={3}>
               <ReformedGridItem
                 id={c.id}
@@ -137,7 +158,7 @@ export default function ChartsGrid(props: Props) {
       )}
       {props.tableView && (
         <HomepageTable
-          data={charts.map((data) => ({
+          data={loadedCharts.map((data) => ({
             id: data.id,
             name: data.name,
             description: data.title,
@@ -145,6 +166,9 @@ export default function ChartsGrid(props: Props) {
           }))}
         />
       )}
+      <Box height={100} />
+
+      <div ref={observerTarget} />
       <DeleteChartDialog
         cardId={cardId}
         modalDisplay={modalDisplay}
diff --git a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
index e259b534d..c2694521d 100644
--- a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
+++ b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import axios from "axios";
 import get from "lodash/get";
 import Box from "@material-ui/core/Box";
@@ -10,6 +10,7 @@ import DeleteDatasetDialog from "app/components/Dialogs/deleteDatasetDialog";
 import { DatasetListItemAPIModel } from "app/modules/data-themes-module/sub-modules/list";
 import ReformedGridItem from "app/modules/home-module/components/Datasets/reformedGridItem";
 import DatasetAddnewCard from "./datasetAddNewCard";
+import { useInfinityScroll } from "app/hooks/useInfinityScroll";
 
 interface Props {
   sortBy: string;
@@ -19,9 +20,32 @@ interface Props {
 }
 
 export default function DatasetsGrid(props: Props) {
+  const observerTarget = useRef(null);
   const [cardId, setCardId] = React.useState<string>("");
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
+  const limit = 15;
+  //used over usestate to get current offset value in the IntersectionObserver api, as it is not updated in usestate.
+  const offset = useRef(0);
+  const [loadedDatasets, setLoadedDatasets] = React.useState<
+    DatasetListItemAPIModel[]
+  >([]);
+
+  const loadDatasets = useStoreActions(
+    (actions) => actions.dataThemes.DatasetGetList.fetch
+  );
+  const clearDatasets = useStoreActions(
+    (actions) => actions.dataThemes.DatasetGetList.clear
+  );
+  const loadDatasetCount = useStoreActions(
+    (actions) => actions.dataThemes.DatasetCount.fetch
+  );
+  const datasetLoadSuccess = useStoreState(
+    (state) => state.dataThemes.DatasetGetList.success
+  );
+  const datasetCount = useStoreState(
+    (state) => get(state, "dataThemes.DatasetCount.data.count", 0) as number
+  );
 
   const handleDelete = (id: string) => {
     deleteDataset(id);
@@ -42,10 +66,6 @@ export default function DatasetsGrid(props: Props) {
     setModalDisplay(true);
   };
 
-  const loadDatasets = useStoreActions(
-    (actions) => actions.dataThemes.DatasetGetList.fetch
-  );
-
   const datasets = useStoreState(
     (state) =>
       get(
@@ -67,23 +87,46 @@ export default function DatasetsGrid(props: Props) {
       .catch((error) => console.log(error));
   }
 
-  function loadData(searchStr: string, sortByStr: string) {
+  const loadData = (searchStr: string, sortByStr: string) => {
     const value =
       searchStr.length > 0
         ? `"where":{"name":{"like":"${searchStr}.*","options":"i"}},`
         : "";
     loadDatasets({
       storeInCrudData: true,
-      filterString: `filter={${value}"order":"${sortByStr} desc"}`,
+      filterString: `filter={${value}"order":"${sortByStr} desc","limit":${limit},"offset":${offset.current}}`,
     });
-  }
+    offset.current = offset.current + limit;
+  };
+  useInfinityScroll(loadData, observerTarget, props.searchStr, props.sortBy);
 
   React.useEffect(() => {
+    loadDatasetCount({});
     if (props.searchStr.length === 0) {
       loadData(props.searchStr, props.sortBy);
     }
   }, [props.searchStr, props.sortBy]);
 
+  React.useEffect(() => {
+    clearDatasets();
+    setLoadedDatasets([]);
+  }, []);
+  React.useEffect(() => {
+    if (datasets === null) {
+      setLoadedDatasets([]);
+    }
+  }, [datasets]);
+
+  React.useEffect(() => {
+    if (!datasetLoadSuccess) {
+      return;
+    }
+    //update the loaded datasets
+    setLoadedDatasets((prevDatasets) => {
+      return [...prevDatasets, ...datasets];
+    });
+  }, [datasetLoadSuccess]);
+
   const [,] = useDebounce(
     () => {
       if (props.searchStr.length > 0) {
@@ -99,7 +142,7 @@ export default function DatasetsGrid(props: Props) {
       {!props.tableView && (
         <Grid container spacing={2}>
           {props.addCard && <DatasetAddnewCard />}
-          {(datasets || []).map((data, index) => (
+          {(loadedDatasets || []).map((data, index) => (
             <Grid item key={data.id} xs={12} sm={6} md={4} lg={3}>
               <ReformedGridItem
                 date={data.createdDate}
@@ -110,14 +153,16 @@ export default function DatasetsGrid(props: Props) {
                 handleDuplicate={() => {}}
                 handleDelete={() => {}}
               />
+
               <Box height={16} />
             </Grid>
           ))}
         </Grid>
       )}
+
       {props.tableView && (
         <HomepageTable
-          data={datasets.map((data) => ({
+          data={loadedDatasets.map((data) => ({
             id: data.id,
             name: data.name,
             description: data.description,
@@ -125,6 +170,14 @@ export default function DatasetsGrid(props: Props) {
           }))}
         />
       )}
+      <Box height={100} />
+
+      <div
+        ref={observerTarget}
+        css={`
+          height: 10px;
+        `}
+      />
       <DeleteDatasetDialog
         cardId={cardId}
         enableButton={enableButton}
diff --git a/src/app/modules/home-module/components/Reports/reportsGrid.tsx b/src/app/modules/home-module/components/Reports/reportsGrid.tsx
index 3fcd1cd4d..05ced4f61 100644
--- a/src/app/modules/home-module/components/Reports/reportsGrid.tsx
+++ b/src/app/modules/home-module/components/Reports/reportsGrid.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import axios from "axios";
 import get from "lodash/get";
 import Box from "@material-ui/core/Box";
@@ -11,6 +11,7 @@ import { HomepageTable } from "app/modules/home-module/components/Table";
 import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
 import ReformedGridItem from "app/modules/home-module/components/Reports/reformedGridItem";
 import ReportAddnewCard from "./reportAddNewCard";
+import { useInfinityScroll } from "app/hooks/useInfinityScroll";
 
 interface Props {
   sortBy: string;
@@ -21,17 +22,23 @@ interface Props {
 }
 
 export default function ReportsGrid(props: Props) {
+  const observerTarget = useRef(null);
   const [cardId, setCardId] = React.useState<number>(0);
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
-
+  const [loadedReports, setLoadedReports] = React.useState<ReportModel[]>([]);
+  const limit = 15;
+  //used over usestate to get current offset value in the IntersectionObserver api, as it is not updated in usestate.
+  const offset = useRef(0);
   const reports = useStoreState(
     (state) => (state.reports.ReportGetList.crudData ?? []) as ReportModel[]
   );
-
   const loadReports = useStoreActions(
     (actions) => actions.reports.ReportGetList.fetch
   );
+  const reportsLoadSuccess = useStoreState(
+    (state) => state.reports.ReportGetList.success
+  );
 
   const handleDelete = (index?: number) => {
     setModalDisplay(false);
@@ -87,9 +94,11 @@ export default function ReportsGrid(props: Props) {
         : "";
     loadReports({
       storeInCrudData: true,
-      filterString: `filter={${value}"order":"${sortByStr} desc"}`,
+      filterString: `filter={${value}"order":"${sortByStr} desc","limit":${limit},"offset":${offset.current}}`,
     });
+    offset.current = offset.current + limit;
   }
+  useInfinityScroll(loadData, observerTarget, props.searchStr, props.sortBy);
 
   React.useEffect(() => {
     if (props.searchStr.length === 0) {
@@ -97,6 +106,17 @@ export default function ReportsGrid(props: Props) {
     }
   }, [props.searchStr, props.sortBy]);
 
+  React.useEffect(() => {
+    if (!reportsLoadSuccess) {
+      return;
+    }
+    //update the loaded reports
+    setLoadedReports((prevReports) => {
+      const f = reports.filter((report, i) => prevReports[i]?.id !== report.id);
+      return [...prevReports, ...f];
+    });
+  }, [reportsLoadSuccess]);
+
   const [,] = useDebounce(
     () => {
       if (props.searchStr.length > 0) {
@@ -112,7 +132,7 @@ export default function ReportsGrid(props: Props) {
       {!props.tableView && (
         <Grid container spacing={2}>
           {props.addCard && <ReportAddnewCard />}
-          {reports.map((data, index) => (
+          {loadedReports.map((data, index) => (
             <Grid item key={data.id} xs={12} sm={6} md={4} lg={3}>
               <ReformedGridItem
                 id={data.id}
@@ -135,7 +155,7 @@ export default function ReportsGrid(props: Props) {
       )}
       {props.tableView && (
         <HomepageTable
-          data={reports.map((data) => ({
+          data={loadedReports.map((data) => ({
             id: data.id,
             name: data.name,
             description: data.title,
@@ -143,6 +163,9 @@ export default function ReportsGrid(props: Props) {
           }))}
         />
       )}
+      <Box height={100} />
+
+      <div ref={observerTarget} />
       <DeleteReportDialog
         cardId={cardId}
         modalDisplay={modalDisplay}
diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx
index 5436bc9e2..9da2538f5 100644
--- a/src/app/modules/home-module/index.tsx
+++ b/src/app/modules/home-module/index.tsx
@@ -3,15 +3,7 @@ import React from "react";
 import { useRecoilState, useResetRecoilState } from "recoil";
 import { Link } from "react-router-dom";
 import useTitle from "react-use/lib/useTitle";
-import {
-  Box,
-  Grid,
-  Tabs,
-  Container,
-  withStyles,
-  IconButton,
-  Popover,
-} from "@material-ui/core";
+import { Box, Grid, Container, IconButton, Popover } from "@material-ui/core";
 /* project */
 import {
   createChartFromReportAtom,
@@ -67,7 +59,7 @@ export default function HomeModule() {
   const [tableView, setTableView] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState("");
   const [openSearch, setOpenSearch] = React.useState(false);
-  const [sortValue, setSortValue] = React.useState("updatedDate");
+  const [sortValue, setSortValue] = React.useState("createdDate");
   const [sortPopoverAnchorEl, setSortPopoverAnchorEl] =
     React.useState<HTMLButtonElement | null>(null);
 
@@ -389,7 +381,17 @@ export default function HomeModule() {
           </Grid>
           <Box height={20} />
         </Box>
-        <div>{displayGrid(searchValue, sortValue)}</div>
+        <div
+          id="scrollableDiv"
+          css={`
+            ::-webkit-scrollbar {
+              width: 0px;
+              background: transparent;
+            }
+          `}
+        >
+          {displayGrid(searchValue, sortValue)}
+        </div>
       </Container>
       <Box height={100} />
       <HomeFooter />
diff --git a/src/app/state/api/action-reducers/data-themes/index.ts b/src/app/state/api/action-reducers/data-themes/index.ts
index 74a69fb6d..367f72c2a 100644
--- a/src/app/state/api/action-reducers/data-themes/index.ts
+++ b/src/app/state/api/action-reducers/data-themes/index.ts
@@ -32,3 +32,7 @@ export const DatasetGetList: ApiCallModel = {
 export const DatasetCreate: ApiCallModel = {
   ...APIModel(`${process.env.REACT_APP_API}/datasets`),
 };
+
+export const DatasetCount: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/datasets/count`),
+};
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index c69056062..c472725f3 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -358,6 +358,7 @@ export interface StoreModel {
     DataThemeDuplicate: ApiCallModel;
     DataThemeGetList: ApiCallModel;
     DatasetGetList: ApiCallModel;
+    DatasetCount: ApiCallModel;
     DatasetCreate: ApiCallModel;
   };
   charts: {
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 4227faf8b..0ab522ce0 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -191,6 +191,7 @@ import {
   DataThemeUpdate,
   DatasetGetList,
   DatasetCreate,
+  DatasetCount,
 } from "app/state/api/action-reducers/data-themes";
 import countrySummary from "../api/action-reducers/cms/countrySummary";
 import notesAndDisclaimers from "../api/action-reducers/cms/notesAndDisclaimers";
@@ -452,6 +453,7 @@ const storeContent: StoreModel = {
     DataThemeDuplicate: persist(DataThemeDuplicate),
     DataThemeGetList: persist(DataThemeGetList),
     DatasetGetList: persist(DatasetGetList),
+    DatasetCount: persist(DatasetCount),
     DatasetCreate: persist(DatasetCreate),
   },
   charts: {
diff --git a/src/index.css b/src/index.css
index 4c8244028..fe1f29fb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,8 +79,10 @@ body {
   transition: background 0.2s ease-in-out;
   font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f2f7fd 100%);
+  
 }
 
+
 #root {
   width: 100vw;
   height: 100vh;