diff --git a/dashboard/src/components/Dashboard/Dashboard.tsx b/dashboard/src/components/Dashboard/Dashboard.tsx
index 44775a5..34ca64f 100644
--- a/dashboard/src/components/Dashboard/Dashboard.tsx
+++ b/dashboard/src/components/Dashboard/Dashboard.tsx
@@ -1,6 +1,6 @@
 import SideMenu from "../SideMenu/SideMenu";
 import TopBar from "../TopBar/TopBar";
-import TreeMonitorListingPage from "../TreeMonitorListingPage/TreeMonitorListingPage";
+import TreeListingPage from "../TreeListingPage/TreeListingPage";
 
 const Dashboard = () : JSX.Element => {
   return (
@@ -9,7 +9,7 @@ const Dashboard = () : JSX.Element => {
         <SideMenu />
         <TopBar />
         <div className="w-full px-16 pt-24 bg-lightGray">
-          <TreeMonitorListingPage />
+          <TreeListingPage />
         </div>
       </div>
     </div>
diff --git a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
new file mode 100644
index 0000000..2c6bb9d
--- /dev/null
+++ b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
@@ -0,0 +1,129 @@
+import { FormattedMessage } from "react-intl";
+
+import { MdArrowBackIos, MdArrowForwardIos, MdExpandMore } from "react-icons/md";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import TreeTable from "../Table/TreeTable";
+import { Button } from "../ui/button";
+import { Tree, TreeTableBody } from "../../types/tree/Tree";
+import { useTreeTable } from "../../api/Tree";
+
+
+interface ITableInformation {
+  startIndex: number;
+  endIndex: number;
+  totalTrees: number;
+  itemsPerPage: number;
+  onClickForward: () => void;
+  onClickBack: () => void; 
+}
+
+const TableInfo = ({
+  startIndex,
+  endIndex,
+  totalTrees,
+  itemsPerPage,
+  onClickForward,
+  onClickBack,
+}: ITableInformation): JSX.Element => {
+  const buttonsClassName = "text-lightBlue font-bold"
+  const groupsClassName = "flex flex-row items-center gap-2"
+  return (
+    <div className="flex flex-row gap-4 text-sm text-black">
+      <div className={groupsClassName}>
+        <FormattedMessage id="table.showing"/>
+        <span className="font-bold">{startIndex} - {endIndex}</span>
+        <FormattedMessage id="table.of"/>
+        <span className="font-bold">{totalTrees}</span>
+        <FormattedMessage id="table.tree"/>
+      </div>
+      <div className={groupsClassName}>
+        <FormattedMessage id="table.itemsPerPage"/>
+        <span className="font-bold">{itemsPerPage}</span>
+        <MdExpandMore className={buttonsClassName}/>
+      </div>
+      <div className="flex flex-row gap-2 items-center">
+        <Button variant="outline" onClick={onClickBack} disabled={startIndex === 1}>
+          <MdArrowBackIos className={buttonsClassName}/>    
+        </Button>
+        <Button variant="outline" onClick={onClickForward} disabled={endIndex === totalTrees}>
+          <MdArrowForwardIos className={buttonsClassName}/>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const FilterButton = (): JSX.Element => {
+  return(
+    <Button variant="outline" className="rounded-full w-[128px] border-black">
+      <div className="flex flex-row gap-1 items-center">
+        <FormattedMessage id="global.filters" />
+        <MdExpandMore />
+      </div>
+    </Button>
+  );
+};
+
+const TreeListingPage = (): JSX.Element => {
+
+  const { data } = useTreeTable();
+
+  const listItems: TreeTableBody[] = useMemo(() => {
+    return data ? (data as Tree[]).map(tree => ({
+      name: tree.tree_name ?? '',
+      branch: tree.git_repository_branch ?? '',
+      commit: tree.git_commit_hash ?? tree.patchset_hash ?? '',
+      buildStatus: `${tree.build_status.valid} / ${tree.build_status.total}`,
+      testStatus: `${tree.test_status.done ?? 0}`,
+    })) : [];
+  }, [data]);
+
+  const itemsPerPage = 10;
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(0);
+
+  useEffect(() => {
+    setEndIndex(listItems.length > itemsPerPage ? itemsPerPage : listItems.length);
+  }, [listItems]);
+
+  const onClickGoForward = useCallback(() => {
+    setStartIndex(endIndex);
+    setEndIndex(endIndex+itemsPerPage >= listItems.length ? listItems.length : endIndex+itemsPerPage)
+  }, [endIndex, listItems]);
+
+  const onClickGoBack = useCallback(() => {
+    setStartIndex(startIndex-itemsPerPage);
+    setEndIndex(endIndex % itemsPerPage !== 0 ? endIndex - endIndex % itemsPerPage : endIndex - itemsPerPage);
+  }, [startIndex, endIndex]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col items-end gap-4">
+      <FilterButton />
+      <TableInfo 
+        startIndex={startIndex+1}
+        endIndex={endIndex}
+        totalTrees={listItems.length}
+        itemsPerPage={itemsPerPage}
+        onClickBack={onClickGoBack}
+        onClickForward={onClickGoForward}
+      />
+      </div>
+      <TreeTable treeTableRows={listItems.slice(startIndex, endIndex)}/>
+      <div className="flex flex-col items-end">
+        <TableInfo
+          startIndex={startIndex+1}
+          endIndex={endIndex}
+          totalTrees={listItems.length}
+          itemsPerPage={itemsPerPage}
+          onClickBack={onClickGoBack}
+          onClickForward={onClickGoForward}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TreeListingPage;
diff --git a/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx b/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
deleted file mode 100644
index 9f267e0..0000000
--- a/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { FormattedMessage } from "react-intl";
-
-import { MdArrowBackIos, MdArrowForwardIos, MdExpandMore } from "react-icons/md";
-
-import { useCallback, useState } from "react";
-
-import TreeTable, { ITreeTableBody } from "../Table/TreeTable";
-import { Button } from "../ui/button";
-
-
-interface ITableInformation {
-  startIndex: number;
-  endIndex: number;
-  totalTrees: number;
-  itemsPerPage: number;
-  onClickForward: () => void;
-  onClickBack: () => void; 
-}
-
-const TableInfo = ({
-  startIndex,
-  endIndex,
-  totalTrees,
-  itemsPerPage,
-  onClickForward,
-  onClickBack,
-}: ITableInformation): JSX.Element => {
-  const buttonsClassName = "text-lightBlue font-bold"
-  const groupsClassName = "flex flex-row items-center gap-2"
-  return (
-    <div className="flex flex-row gap-4 text-sm">
-      <div className={groupsClassName}>
-        <FormattedMessage id="table.showing"/>
-        <span className="font-bold">{startIndex} - {endIndex}</span>
-        <FormattedMessage id="table.of"/>
-        <span className="font-bold">{totalTrees}</span>
-        <FormattedMessage id="table.tree"/>
-      </div>
-      <div className={groupsClassName}>
-        <FormattedMessage id="table.itemsPerPage"/>
-        <span className="font-bold">{itemsPerPage}</span>
-        <MdExpandMore className={buttonsClassName}/>
-      </div>
-      <div className="flex flex-row gap-2 items-center">
-        <Button variant="outline" onClick={onClickBack}>
-          <MdArrowBackIos className={buttonsClassName}/>    
-        </Button>
-        <Button variant="outline" onClick={onClickForward}>
-          <MdArrowForwardIos className={buttonsClassName}/>
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const TreeMonitorListingPage = (): JSX.Element => {
-  const listItems = treeTableRows;
-  const itemsPerPage = 10;
-  const [startIndex, setStartIndex] = useState(0);
-  const [endIndex, setEndIndex] = useState(listItems.length+1 > itemsPerPage ? itemsPerPage : listItems.length+1);
-
-  const onClickGoForward = useCallback(() => {
-    setStartIndex(endIndex);
-    setEndIndex(endIndex+itemsPerPage >= listItems.length ? listItems.length : endIndex+itemsPerPage)
-  }, [endIndex, listItems]);
-
-  const onClickGoBack = useCallback(() => {
-    setStartIndex(startIndex-itemsPerPage);
-    setEndIndex(endIndex % itemsPerPage !== 0 ? endIndex - endIndex % itemsPerPage : endIndex - itemsPerPage);
-  }, [startIndex, endIndex]);
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col items-end gap-4">
-      <Button variant="outline" className="rounded-full w-[128px] border-black">
-        <div className="flex flex-row gap-1 items-center">
-          <FormattedMessage id="global.filters" />
-          <MdExpandMore />
-        </div>
-      </Button>
-      <TableInfo 
-        startIndex={startIndex+1}
-        endIndex={endIndex}
-        totalTrees={listItems.length}
-        itemsPerPage={itemsPerPage}
-        onClickBack={onClickGoBack}
-        onClickForward={onClickGoForward}
-      />
-      </div>
-      <TreeTable treeTableRows={listItems.slice(startIndex, endIndex)}/>
-      <div className="flex flex-col items-end">
-      <TableInfo
-        startIndex={startIndex+1}
-        endIndex={endIndex}
-        totalTrees={listItems.length}
-        itemsPerPage={itemsPerPage}
-        onClickBack={onClickGoBack}
-        onClickForward={onClickGoForward}
-      />
-      </div>
-    </div>
-  );
-};
-
-const treeTableRows: ITreeTableBody[] = [
-    {
-      name: "stable-rc1",
-      branch: "linux-5.15",
-      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-      buildStatus: "150 completed",
-      testStatus: "80 completed"
-    },
-    {
-      name: "stable-rc2",
-      branch: "linux-5.15",
-      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-      buildStatus: "10 completed",
-      testStatus: "150 completed"
-    },
-    {
-      name: "stable-rc3",
-      branch: "linux-5.15",
-      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-      buildStatus: "10 completed",
-      testStatus: "150 completed"
-    },
-    {
-      name: "stable-rc4",
-      branch: "linux-5.15",
-      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-      buildStatus: "10 completed",
-      testStatus: "150 completed"
-    },
-    {
-      name: "stable-rc5",
-      branch: "linux-5.15",
-      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-      buildStatus: "10 completed",
-      testStatus: "150 completed"
-    },
-    {
-        name: "stable-rc6",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "150 completed",
-        testStatus: "80 completed"
-      },
-      {
-        name: "stable-rc7",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "10 completed",
-        testStatus: "150 completed"
-      },
-      {
-        name: "stable-rc8",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "10 completed",
-        testStatus: "150 completed"
-      },
-      {
-        name: "stable-rc9",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "10 completed",
-        testStatus: "150 completed"
-      },
-      {
-        name: "stable-rc10",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "10 completed",
-        testStatus: "150 completed"
-      },
-      {
-        name: "stable-rc11",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "10 completed",
-        testStatus: "150 completed"
-      },
-      {
-        name: "stable-rc12",
-        branch: "linux-5.15",
-        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-        buildStatus: "10 completed",
-        testStatus: "150 completed"
-      }
-  ];
-
-export default TreeMonitorListingPage;