diff --git a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
new file mode 100644
index 0000000..612659c
--- /dev/null
+++ b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
@@ -0,0 +1,80 @@
+import { FormattedMessage } from 'react-intl';
+
+import { useMemo } 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 { IListingContent } from '@/components/ListingContent/ListingContent';
+
+interface ITreeDetailsBuildTab {
+  treeDetailsData?: ITreeDetails;
+}
+
+const TreeDetailsBuildTab = ({
+  treeDetailsData,
+}: ITreeDetailsBuildTab): JSX.Element => {
+  const cards = useMemo(
+    () => [
+      {
+        title: <FormattedMessage id="treeDetails.buildStatus" />,
+        type: 'chart',
+        pieCentralLabel: `${
+          (treeDetailsData?.builds.invalid ?? 0) +
+          (treeDetailsData?.builds.valid ?? 0) +
+          (treeDetailsData?.builds.null ?? 0)
+        }`,
+        pieCentralDescription: <FormattedMessage id="treeDetails.executed" />,
+        elements: [
+          {
+            value: treeDetailsData?.builds.valid ?? 0,
+            label: 'Valid',
+            color: Colors.Green,
+          },
+          {
+            value: treeDetailsData?.builds.invalid ?? 0,
+            label: 'Invalid',
+            color: Colors.Red,
+          },
+          {
+            value: treeDetailsData?.builds.null ?? 0,
+            label: 'Null',
+            color: Colors.Gray,
+          },
+        ],
+      } as IStatusChart,
+      {
+        items: treeDetailsData?.configs ?? [],
+        title: <FormattedMessage id="treeDetails.configs" />,
+        type: 'listing',
+      } as IListingContent,
+      {
+        summaryBody: treeDetailsData?.archs ?? [],
+        title: <FormattedMessage id="treeDetails.summary" />,
+        summaryHeaders: [
+          <FormattedMessage key="treeDetails.arch" id="treeDetails.arch" />,
+          <FormattedMessage
+            key="treeDetails.compiler"
+            id="treeDetails.compiler"
+          />,
+        ],
+        type: 'summary',
+      } as ISummary,
+    ],
+    [
+      treeDetailsData?.archs,
+      treeDetailsData?.builds.invalid,
+      treeDetailsData?.builds.null,
+      treeDetailsData?.builds.valid,
+      treeDetailsData?.configs,
+    ],
+  );
+  return (
+    <div className="pt-4">
+      <CardsGroup cards={cards} />
+    </div>
+  );
+};
+
+export default TreeDetailsBuildTab;
diff --git a/dashboard/src/components/Tabs/TreeDetailsTab.tsx b/dashboard/src/components/Tabs/TreeDetailsTab.tsx
index b3630f5..084f3e9 100644
--- a/dashboard/src/components/Tabs/TreeDetailsTab.tsx
+++ b/dashboard/src/components/Tabs/TreeDetailsTab.tsx
@@ -1,27 +1,36 @@
 import Tabs, { ITabItem } from '@/components/Tabs/Tabs';
+import { ITreeDetails } from '@/routes/TreeDetails/TreeDetails';
 
-const TreeDetailsTab = (): JSX.Element => {
-  return <Tabs tabs={treeDetailsTab} defaultTab={treeDetailsTab[0]} />;
-};
+import TreeDetailsBuildTab from './TreeDetails/TreeDetailsBuildTab';
 
-const bootsTab: ITabItem = {
-  name: 'treeDetails.boots',
-  content: <></>,
-  disabled: true,
-};
+export interface ITreeDetailsBuildTab {
+  treeDetailsData?: ITreeDetails;
+}
 
-const testsTab: ITabItem = {
-  name: 'treeDetails.tests',
-  content: <></>,
-  disabled: true,
-};
+const TreeDetailsTab = ({
+  treeDetailsData,
+}: ITreeDetailsBuildTab): JSX.Element => {
+  const buildsTab: ITabItem = {
+    name: 'treeDetails.builds',
+    content: <TreeDetailsBuildTab treeDetailsData={treeDetailsData} />,
+    disabled: false,
+  };
 
-const buildsTab: ITabItem = {
-  name: 'treeDetails.builds',
-  content: <></>,
-  disabled: false,
-};
+  const bootsTab: ITabItem = {
+    name: 'treeDetails.boots',
+    content: <></>,
+    disabled: true,
+  };
 
-const treeDetailsTab = [buildsTab, bootsTab, testsTab];
+  const testsTab: ITabItem = {
+    name: 'treeDetails.tests',
+    content: <></>,
+    disabled: true,
+  };
+
+  const treeDetailsTab = [buildsTab, bootsTab, testsTab];
+
+  return <Tabs tabs={treeDetailsTab} defaultTab={treeDetailsTab[0]} />;
+};
 
 export default TreeDetailsTab;
diff --git a/dashboard/src/routes/TreeDetails/TreeDetails.tsx b/dashboard/src/routes/TreeDetails/TreeDetails.tsx
index 7c45fc2..6ac2e2d 100644
--- a/dashboard/src/routes/TreeDetails/TreeDetails.tsx
+++ b/dashboard/src/routes/TreeDetails/TreeDetails.tsx
@@ -12,11 +12,9 @@ import { useTreeDetails } from '@/api/TreeDetails';
 
 import { IListingItem } from '@/components/ListingItem/ListingItem';
 import { ISummaryItem } from '@/components/Summary/Summary';
-import CardsGroup from '@/components/CardsGroup/CardsGroup';
-import { Colors } from '@/components/StatusChart/StatusCharts';
 import { Results } from '@/types/tree/TreeDetails';
 
-interface ITreeDetails {
+export interface ITreeDetails {
   archs: ISummaryItem[];
   configs: IListingItem[];
   builds: Results;
@@ -61,67 +59,14 @@ const TreeDetails = (): JSX.Element => {
 
   return (
     <div className="flex flex-col pt-8">
-      <div className="flex flex-row pb-2 border-b border-darkGray">
-        <TreeDetailsTab />
-        <ButtonWithIcon
-          icon={<MdExpandMore />}
-          label={<FormattedMessage id="global.filters" />}
-        />
-      </div>
-      <div className="pt-4">
-        <CardsGroup
-          cards={[
-            {
-              title: <FormattedMessage id="treeDetails.buildStatus" />,
-              type: 'chart',
-              pieCentralLabel: `${
-                (treeDetailsData?.builds.invalid ?? 0) +
-                (treeDetailsData?.builds.valid ?? 0) +
-                (treeDetailsData?.builds.null ?? 0)
-              }`,
-              pieCentralDescription: (
-                <FormattedMessage id="treeDetails.executed" />
-              ),
-              elements: [
-                {
-                  value: treeDetailsData?.builds.valid ?? 0,
-                  label: 'Valid',
-                  color: Colors.Green,
-                },
-                {
-                  value: treeDetailsData?.builds.invalid ?? 0,
-                  label: 'Invalid',
-                  color: Colors.Red,
-                },
-                {
-                  value: treeDetailsData?.builds.null ?? 0,
-                  label: 'Null',
-                  color: Colors.Gray,
-                },
-              ],
-            },
-            {
-              items: treeDetailsData?.configs ?? [],
-              title: <FormattedMessage id="treeDetails.configs" />,
-              type: 'listing',
-            },
-            {
-              summaryBody: treeDetailsData?.archs ?? [],
-              title: <FormattedMessage id="treeDetails.summary" />,
-              summaryHeaders: [
-                <FormattedMessage
-                  key="treeDetails.arch"
-                  id="treeDetails.arch"
-                />,
-                <FormattedMessage
-                  key="treeDetails.compiler"
-                  id="treeDetails.compiler"
-                />,
-              ],
-              type: 'summary',
-            },
-          ]}
-        />
+      <div className="flex flex-col pb-2">
+        <div className="flex justify-end">
+          <ButtonWithIcon
+            icon={<MdExpandMore />}
+            label={<FormattedMessage id="global.filters" />}
+          />
+        </div>
+        <TreeDetailsTab treeDetailsData={treeDetailsData} />
       </div>
     </div>
   );