diff --git a/dashboard/src/components/Accordion/Accordion.stories.tsx b/dashboard/src/components/Accordion/Accordion.stories.tsx
deleted file mode 100644
index ef8ebec..0000000
--- a/dashboard/src/components/Accordion/Accordion.stories.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Accordion, { IAccordionItems } from './Accordion';
-
-const meta = {
-  title: 'Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const itemsBuild: IAccordionItems[] = [
-  {
-    trigger: {
-      config: 'config',
-      compiler: 'compiler',
-      date: 'dd/mm/yyyy',
-      buildErrors: 5,
-      buildTime: '500 seconds',
-      status: 'valid',
-    },
-    content: <span>AAAAa</span>,
-  },
-  {
-    trigger: {
-      config: 'config',
-      compiler: 'compiler',
-      date: 'dd/mm/yyyy',
-      buildErrors: 5,
-      buildTime: '500 seconds',
-      status: 'valid',
-    },
-    content: <span>AAAAa</span>,
-  },
-  {
-    trigger: {
-      config: 'config',
-      compiler: 'compiler',
-      date: 'dd/mm/yyyy',
-      buildErrors: 5,
-      buildTime: '500 seconds',
-      status: 'valid',
-    },
-    content: <span>AAAAa</span>,
-  },
-];
-
-const headersBuild = [
-  'config',
-  'compiler',
-  'date',
-  'build errors',
-  'build time',
-  'status',
-];
-
-const itemsTest: IAccordionItems[] = [
-  {
-    trigger: {
-      testPlans: 'aaaaaaa',
-      testErrors: 5,
-      testSuccessfull: 12,
-      status: 'invalid',
-    },
-    content: <span>AAAAa</span>,
-  },
-  {
-    trigger: {
-      testPlans: 'aaaaaaasdkjmla',
-      testErrors: 5,
-      testSuccessfull: 12,
-      status: 'valid',
-    },
-    content: <span>BBB</span>,
-  },
-];
-const headersTest = ['test plan', 'test results', 'status'];
-
-export const Builds: Story = {
-  args: {
-    items: itemsBuild,
-    headers: headersBuild,
-    type: 'build',
-  },
-};
-
-export const Tests: Story = {
-  args: {
-    items: itemsTest,
-    headers: headersTest,
-    type: 'test',
-  },
-};
diff --git a/dashboard/src/components/Accordion/Accordion.tsx b/dashboard/src/components/Accordion/Accordion.tsx
index 1193964..6114ecc 100644
--- a/dashboard/src/components/Accordion/Accordion.tsx
+++ b/dashboard/src/components/Accordion/Accordion.tsx
@@ -1,7 +1,9 @@
-import { ReactNode, useMemo } from 'react';
+import { ReactElement, ReactNode, useMemo } from 'react';
 
 import { MdCheck, MdClose } from 'react-icons/md';
 
+import { FormattedMessage } from 'react-intl';
+
 import { TableBody, TableCell, TableRow } from '../ui/table';
 import BaseTable from '../Table/BaseTable';
 import {
@@ -13,7 +15,7 @@ import ColoredCircle from '../ColoredCircle/ColoredCircle';
 import { ItemType } from '../ListingItem/ListingItem';
 
 export interface IAccordion {
-  headers: string[];
+  headers?: ReactElement[];
   items: IAccordionItems[];
   type: 'build' | 'test';
 }
@@ -44,11 +46,20 @@ export type AccordionItemTestsTrigger = {
   status?: 'valid' | 'invalid';
 };
 
-const Accordion = ({ headers, items, type }: IAccordion): JSX.Element => {
-  const accordionTableHeader = useMemo(
-    () => headers.map(header => <span key={header}>{header}</span>),
-    [headers],
-  );
+const headersBuilds = [
+  <FormattedMessage key="treeDetails.config" id="treeDetails.config" />,
+  <FormattedMessage key="treeDetails.compiler" id="treeDetails.compiler" />,
+  <FormattedMessage key="treeDetails.date" id="treeDetails.date" />,
+  <FormattedMessage
+    key="treeDetails.buildErrors"
+    id="treeDetails.buildErrors"
+  />,
+  <FormattedMessage key="treeDetails.buildTime" id="treeDetails.buildTime" />,
+  <FormattedMessage key="treeDetails.status" id="treeDetails.status" />,
+];
+
+const Accordion = ({ items, type }: IAccordion): JSX.Element => {
+  const accordionTableHeader = type === 'build' ? headersBuilds : [];
 
   return (
     <BaseTable
diff --git a/dashboard/src/components/Table/TableInfo.tsx b/dashboard/src/components/Table/TableInfo.tsx
new file mode 100644
index 0000000..53fda16
--- /dev/null
+++ b/dashboard/src/components/Table/TableInfo.tsx
@@ -0,0 +1,63 @@
+import {
+  MdExpandMore,
+  MdArrowBackIos,
+  MdArrowForwardIos,
+} from 'react-icons/md';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '../ui/button';
+
+interface ITableInformation {
+  startIndex: number;
+  endIndex: number;
+  totalTrees: number;
+  itemsPerPage: number;
+  onClickForward: () => void;
+  onClickBack: () => void;
+}
+
+export 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>
+  );
+};
diff --git a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
index 612659c..6459b0c 100644
--- a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
+++ b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
@@ -1,12 +1,16 @@
 import { FormattedMessage } from 'react-intl';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import CardsGroup from '@/components/CardsGroup/CardsGroup';
 import { Colors, IStatusChart } from '@/components/StatusChart/StatusCharts';
 import { ITreeDetails } from '@/routes/TreeDetails/TreeDetails';
-import { ISummary } from '@/components/Summary/Summary';
+import { TableInfo } from '@/components/Table/TableInfo';
+import { usePagination } from '@/hooks/usePagination';
+import Accordion from '@/components/Accordion/Accordion';
+import { Button } from '@/components/ui/button';
 import { IListingContent } from '@/components/ListingContent/ListingContent';
+import { ISummary } from '@/components/Summary/Summary';
 
 interface ITreeDetailsBuildTab {
   treeDetailsData?: ITreeDetails;
@@ -15,30 +19,66 @@ interface ITreeDetailsBuildTab {
 const TreeDetailsBuildTab = ({
   treeDetailsData,
 }: ITreeDetailsBuildTab): JSX.Element => {
+  const [filterBy, setFilterBy] = useState<'error' | 'success' | 'all'>('all');
+  const accordionContent = useMemo(() => {
+    return treeDetailsData?.builds.map(row => ({
+      trigger: {
+        ...row,
+        config: row.config ?? '-',
+        compiler: row.compiler ?? '-',
+        buildTime: row.buildTime ? (
+          <span>
+            {typeof row.buildTime === 'number'
+              ? Math.floor(row.buildTime) + ' '
+              : row.buildTime}
+            <FormattedMessage id="global.seconds" />
+          </span>
+        ) : (
+          '-'
+        ),
+        date: row.date?.split('T')[0],
+      },
+      content: <></>,
+    }));
+  }, [treeDetailsData?.builds]);
+
+  const filteredContent =
+    filterBy === 'error'
+      ? accordionContent?.filter(
+          row => row.trigger.buildErrors && row.trigger.buildErrors > 0,
+        )
+      : filterBy === 'success'
+        ? accordionContent?.filter(
+            row => row.trigger.status && row.trigger.status === 'valid',
+          )
+        : accordionContent;
+
+  const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
+    usePagination(filteredContent?.length ?? 0, ITEMS_PER_PAGE);
   const cards = useMemo(
     () => [
       {
         title: <FormattedMessage id="treeDetails.buildStatus" />,
         type: 'chart',
         pieCentralLabel: `${
-          (treeDetailsData?.builds.invalid ?? 0) +
-          (treeDetailsData?.builds.valid ?? 0) +
-          (treeDetailsData?.builds.null ?? 0)
+          (treeDetailsData?.buildsSummary.invalid ?? 0) +
+          (treeDetailsData?.buildsSummary.valid ?? 0) +
+          (treeDetailsData?.buildsSummary.null ?? 0)
         }`,
         pieCentralDescription: <FormattedMessage id="treeDetails.executed" />,
         elements: [
           {
-            value: treeDetailsData?.builds.valid ?? 0,
+            value: treeDetailsData?.buildsSummary.valid ?? 0,
             label: 'Valid',
             color: Colors.Green,
           },
           {
-            value: treeDetailsData?.builds.invalid ?? 0,
+            value: treeDetailsData?.buildsSummary.invalid ?? 0,
             label: 'Invalid',
             color: Colors.Red,
           },
           {
-            value: treeDetailsData?.builds.null ?? 0,
+            value: treeDetailsData?.buildsSummary.null ?? 0,
             label: 'Null',
             color: Colors.Gray,
           },
@@ -64,17 +104,78 @@ const TreeDetailsBuildTab = ({
     ],
     [
       treeDetailsData?.archs,
-      treeDetailsData?.builds.invalid,
-      treeDetailsData?.builds.null,
-      treeDetailsData?.builds.valid,
+      treeDetailsData?.buildsSummary.invalid,
+      treeDetailsData?.buildsSummary.null,
+      treeDetailsData?.buildsSummary.valid,
       treeDetailsData?.configs,
     ],
   );
+
+  const onClickFilter = useCallback((type: 'error' | 'success' | 'all') => {
+    setFilterBy(type);
+  }, []);
+
   return (
-    <div className="pt-4">
+    <div className="flex flex-col gap-8 pt-4">
       <CardsGroup cards={cards} />
+      {filteredContent && (
+        <div className="flex flex-col gap-4">
+          <div className="text-lg">
+            <FormattedMessage id="treeDetails.builds" />
+          </div>
+          <div className="flex flex-row justify-between">
+            <div>
+              <Button
+                variant="outline"
+                className="rounded-l-full border border-black"
+                onClick={() => onClickFilter('all')}
+              >
+                <FormattedMessage id="global.all" />
+              </Button>
+              <Button
+                variant="outline"
+                className="rounded-none border border-black"
+                onClick={() => onClickFilter('success')}
+              >
+                <FormattedMessage id="global.successful" />
+              </Button>
+              <Button
+                variant="outline"
+                className="rounded-r-full border border-black"
+                onClick={() => onClickFilter('error')}
+              >
+                <FormattedMessage id="global.errors" />
+              </Button>
+            </div>
+            <TableInfo
+              startIndex={startIndex + 1}
+              endIndex={endIndex}
+              totalTrees={accordionContent?.length ?? 0}
+              itemsPerPage={ITEMS_PER_PAGE}
+              onClickBack={onClickGoBack}
+              onClickForward={onClickGoForward}
+            />
+          </div>
+          <Accordion
+            type="build"
+            items={filteredContent.slice(startIndex, endIndex)}
+          />
+          <div className="flex justify-end">
+            <TableInfo
+              startIndex={startIndex + 1}
+              endIndex={endIndex}
+              totalTrees={accordionContent?.length ?? 0}
+              itemsPerPage={ITEMS_PER_PAGE}
+              onClickBack={onClickGoBack}
+              onClickForward={onClickGoForward}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
+const ITEMS_PER_PAGE = 10;
+
 export default TreeDetailsBuildTab;
diff --git a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
index a7fba81..882a406 100644
--- a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
+++ b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
@@ -1,77 +1,21 @@
 import { FormattedMessage } from 'react-intl';
 
-import {
-  MdArrowBackIos,
-  MdArrowForwardIos,
-  MdExpandMore,
-} from 'react-icons/md';
+import { MdExpandMore } from 'react-icons/md';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
+
+import { usePagination } from '@/hooks/usePagination';
 
 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;
-}
+import { TableInfo } from '../Table/TableInfo';
 
 interface ITreeListingPage {
   inputFilter: string;
 }
 
-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
@@ -127,32 +71,8 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
     }
   }, [data, inputFilter]);
 
-  const [startIndex, setStartIndex] = useState(0);
-  const [endIndex, setEndIndex] = useState(0);
-
-  useEffect(() => {
-    setEndIndex(
-      listItems.length > ITEMS_PER_PAGE ? ITEMS_PER_PAGE : listItems.length,
-    );
-  }, [listItems]);
-
-  const onClickGoForward = useCallback(() => {
-    setStartIndex(endIndex);
-    setEndIndex(
-      endIndex + ITEMS_PER_PAGE >= listItems.length
-        ? listItems.length
-        : endIndex + ITEMS_PER_PAGE,
-    );
-  }, [endIndex, listItems]);
-
-  const onClickGoBack = useCallback(() => {
-    setStartIndex(startIndex - ITEMS_PER_PAGE);
-    setEndIndex(
-      endIndex % ITEMS_PER_PAGE !== 0
-        ? endIndex - (endIndex % ITEMS_PER_PAGE)
-        : endIndex - ITEMS_PER_PAGE,
-    );
-  }, [startIndex, endIndex]);
+  const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
+    usePagination(listItems.length, ITEMS_PER_PAGE);
 
   return (
     <div className="flex flex-col gap-6">
diff --git a/dashboard/src/hooks/usePagination.tsx b/dashboard/src/hooks/usePagination.tsx
new file mode 100644
index 0000000..bd36c57
--- /dev/null
+++ b/dashboard/src/hooks/usePagination.tsx
@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export const usePagination = (
+  totalItems: number,
+  itemsPerPage: number,
+): {
+  startIndex: number;
+  endIndex: number;
+  onClickGoForward: () => void;
+  onClickGoBack: () => void;
+} => {
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(0);
+
+  useEffect(() => {
+    setEndIndex(totalItems > itemsPerPage ? itemsPerPage : totalItems);
+  }, [itemsPerPage, totalItems]);
+
+  const onClickGoForward = useCallback(() => {
+    setStartIndex(endIndex);
+    setEndIndex(
+      endIndex + itemsPerPage >= totalItems
+        ? totalItems
+        : endIndex + itemsPerPage,
+    );
+  }, [endIndex, itemsPerPage, totalItems]);
+
+  const onClickGoBack = useCallback(() => {
+    setStartIndex(startIndex - itemsPerPage);
+    setEndIndex(
+      endIndex % itemsPerPage !== 0
+        ? endIndex - (endIndex % itemsPerPage)
+        : endIndex - itemsPerPage,
+    );
+  }, [startIndex, itemsPerPage, endIndex]);
+
+  return { startIndex, endIndex, onClickGoForward, onClickGoBack };
+};
diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
index 7151176..9e8c264 100644
--- a/dashboard/src/locales/messages/index.ts
+++ b/dashboard/src/locales/messages/index.ts
@@ -3,8 +3,12 @@ import { LOCALES } from '../constants';
 export const messages = {
   [LOCALES.EN_US]: {
     global: {
-      filters: 'Filters',
+      all: 'All',
       cleanAll: 'Clean all',
+      errors: 'Errors',
+      filters: 'Filters',
+      seconds: 'sec',
+      successful: 'Successful',
     },
     routes: {
       deviceMonitor: 'Devices',
@@ -21,11 +25,16 @@ export const messages = {
       arch: 'Arch',
       boots: 'Boots',
       builds: 'Builds',
+      buildErrors: 'Build errors',
       buildStatus: 'Build status',
+      buildTime: 'BuildTime',
+      config: 'Config',
       configs: 'Configs',
       compiler: 'Compiler',
+      date: 'Date',
       executed: 'Executed',
       summary: 'Summary',
+      status: 'Status',
       tests: 'Tests',
     },
     treeTable: {
diff --git a/dashboard/src/routes/TreeDetails/TreeDetails.tsx b/dashboard/src/routes/TreeDetails/TreeDetails.tsx
index 6ac2e2d..81dddf4 100644
--- a/dashboard/src/routes/TreeDetails/TreeDetails.tsx
+++ b/dashboard/src/routes/TreeDetails/TreeDetails.tsx
@@ -13,11 +13,13 @@ import { useTreeDetails } from '@/api/TreeDetails';
 import { IListingItem } from '@/components/ListingItem/ListingItem';
 import { ISummaryItem } from '@/components/Summary/Summary';
 import { Results } from '@/types/tree/TreeDetails';
+import { AccordionItemBuildsTrigger } from '@/components/Accordion/Accordion';
 
 export interface ITreeDetails {
   archs: ISummaryItem[];
   configs: IListingItem[];
-  builds: Results;
+  buildsSummary: Results;
+  builds: AccordionItemBuildsTrigger[];
 }
 
 const TreeDetails = (): JSX.Element => {
@@ -49,10 +51,22 @@ const TreeDetails = (): JSX.Element => {
         null: data.summary.builds.null,
       };
 
+      const buildsData: AccordionItemBuildsTrigger[] = Object.entries(
+        data.builds,
+      ).map(([, value]) => ({
+        config: value.config_name,
+        date: value.start_time,
+        buildTime: value.duration,
+        compiler: value.compiler,
+        buildErrors: value.test_status?.error ?? 0,
+        status: value.valid ? 'valid' : 'invalid',
+      }));
+
       setTreeDetailsData({
         archs: archData,
         configs: configsData,
-        builds: buildSummaryData,
+        buildsSummary: buildSummaryData,
+        builds: buildsData,
       });
     }
   }, [data]);