diff --git a/.changeset/new-ligers-drum.md b/.changeset/new-ligers-drum.md
new file mode 100644
index 0000000000..0edee17b4d
--- /dev/null
+++ b/.changeset/new-ligers-drum.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-xcmetrics': patch
+---
+
+Enable browsing detailed build information such as host configuration, errors, warnings, metadata and a timeline for all targets
diff --git a/plugins/xcmetrics/package.json b/plugins/xcmetrics/package.json
index 11153ab6b5..83e57acf70 100644
--- a/plugins/xcmetrics/package.json
+++ b/plugins/xcmetrics/package.json
@@ -30,7 +30,8 @@
     "luxon": "^2.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "recharts": "^1.8.5"
   },
   "devDependencies": {
     "@backstage/cli": "^0.7.8",
diff --git a/plugins/xcmetrics/src/api/XcmetricsClient.ts b/plugins/xcmetrics/src/api/XcmetricsClient.ts
index 81b3e78a31..37baa949d4 100644
--- a/plugins/xcmetrics/src/api/XcmetricsClient.ts
+++ b/plugins/xcmetrics/src/api/XcmetricsClient.ts
@@ -20,9 +20,14 @@ import { DateTime } from 'luxon';
 import {
   Build,
   BuildCount,
+  BuildError,
   BuildFilters,
+  BuildHost,
+  BuildMetadata,
+  BuildResponse,
   BuildStatusResult,
   BuildTime,
+  BuildWarning,
   PaginationResult,
   XcmetricsApi,
 } from './types';
@@ -38,25 +43,13 @@ export class XcmetricsClient implements XcmetricsApi {
     this.discoveryApi = options.discoveryApi;
   }
 
-  async getBuild(id: string): Promise<Build> {
-    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(`${baseUrl}/build/${id}`);
-
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
-    }
-
-    return ((await response.json()) as Record<'build', Build>).build;
+  async getBuild(id: string): Promise<BuildResponse> {
+    const response = await this.get(`/build/${id}`);
+    return (await response.json()) as BuildResponse;
   }
 
   async getBuilds(limit: number = 10): Promise<Build[]> {
-    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(`${baseUrl}/build?per=${limit}`);
-
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
-    }
-
+    const response = await this.get(`/build?per=${limit}`);
     return ((await response.json()) as PaginationResult<Build>).items;
   }
 
@@ -65,80 +58,88 @@ export class XcmetricsClient implements XcmetricsApi {
     page?: number,
     perPage?: number,
   ): Promise<PaginationResult<Build>> {
+    const response = await this.post('/build/filter', {
+      from: DateTime.fromISO(filters.from)
+        .startOf('day')
+        .toISO({ suppressMilliseconds: true }),
+      to: DateTime.fromISO(filters.to)
+        .endOf('day')
+        .startOf('second')
+        .toISO({ suppressMilliseconds: true }),
+      status: filters.buildStatus,
+      projectName: filters.project,
+      page,
+      per: perPage,
+    });
+
+    return (await response.json()) as PaginationResult<Build>;
+  }
+
+  async getBuildCounts(days: number): Promise<BuildCount[]> {
+    const response = await this.get(`/statistics/build/count?days=${days}`);
+    return (await response.json()) as BuildCount[];
+  }
+
+  async getBuildErrors(buildId: string): Promise<BuildError[]> {
+    const response = await this.get(`/build/error/${buildId}`);
+    return (await response.json()) as BuildError[];
+  }
+
+  async getBuildHost(buildId: string): Promise<BuildHost> {
+    const response = await this.get(`/build/host/${buildId}`);
+    return (await response.json()) as BuildHost;
+  }
+
+  async getBuildMetadata(buildId: string): Promise<BuildMetadata> {
+    const response = await this.get(`/build/metadata/${buildId}`);
+    return ((await response.json()) as Record<'metadata', BuildMetadata>)
+      .metadata;
+  }
+
+  async getBuildTimes(days: number): Promise<BuildTime[]> {
+    const response = await this.get(`/statistics/build/time?days=${days}`);
+    return (await response.json()) as BuildTime[];
+  }
+
+  async getBuildStatuses(limit: number): Promise<BuildStatusResult[]> {
+    const response = await this.get(`/statistics/build/status?per=${limit}`);
+    return ((await response.json()) as PaginationResult<BuildStatusResult>)
+      .items;
+  }
+
+  async getBuildWarnings(buildId: string): Promise<BuildWarning[]> {
+    const response = await this.get(`/build/warning/${buildId}`);
+    return (await response.json()) as BuildWarning[];
+  }
+
+  async getProjects(): Promise<string[]> {
+    const response = await this.get('/build/project');
+    return (await response.json()) as string[];
+  }
+
+  private async get(path: string): Promise<Response> {
     const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(`${baseUrl}/build/filter`, {
+    const response = await fetch(`${baseUrl}${path}`);
+
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+
+    return response;
+  }
+
+  private async post(path: string, body: Object): Promise<Response> {
+    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
+    const response = await fetch(`${baseUrl}${path}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        from: DateTime.fromISO(filters.from)
-          .startOf('day')
-          .toISO({ suppressMilliseconds: true }),
-        to: DateTime.fromISO(filters.to)
-          .endOf('day')
-          .startOf('second')
-          .toISO({ suppressMilliseconds: true }),
-        status: filters.buildStatus,
-        projectName: filters.project,
-        page,
-        per: perPage,
-      }),
+      body: JSON.stringify(body),
     });
 
     if (!response.ok) {
       throw await ResponseError.fromResponse(response);
     }
 
-    return (await response.json()) as PaginationResult<Build>;
-  }
-
-  async getBuildCounts(days: number): Promise<BuildCount[]> {
-    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(
-      `${baseUrl}/statistics/build/count?days=${days}`,
-    );
-
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
-    }
-
-    return (await response.json()) as BuildCount[];
-  }
-
-  async getBuildTimes(days: number): Promise<BuildTime[]> {
-    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(
-      `${baseUrl}/statistics/build/time?days=${days}`,
-    );
-
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
-    }
-
-    return (await response.json()) as BuildTime[];
-  }
-
-  async getBuildStatuses(limit: number): Promise<BuildStatusResult[]> {
-    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(
-      `${baseUrl}/statistics/build/status?per=${limit}`,
-    );
-
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
-    }
-
-    return ((await response.json()) as PaginationResult<BuildStatusResult>)
-      .items;
-  }
-
-  async getProjects(): Promise<string[]> {
-    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
-    const response = await fetch(`${baseUrl}/build/project`);
-
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
-    }
-
-    return (await response.json()) as string[];
+    return response;
   }
 }
diff --git a/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts b/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts
index 430fbb1006..765be721c6 100644
--- a/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts
+++ b/plugins/xcmetrics/src/api/__mocks__/XcmetricsClient.ts
@@ -14,9 +14,24 @@
  * limitations under the License.
  */
 
-import { Build, BuildFilters, XcmetricsApi } from '../types';
+import {
+  Build,
+  BuildCount,
+  BuildError,
+  BuildFilters,
+  BuildHost,
+  BuildMetadata,
+  BuildStatusResult,
+  BuildTime,
+  BuildWarning,
+  Target,
+  XcmetricsApi,
+  Xcode,
+} from '../types';
 
-export const mockBuild = {
+const MOCK_BUILD_ID = 'buildId';
+
+export const mockBuild: Build = {
   userid: 'userid1',
   warningCount: 1,
   duration: 1,
@@ -31,29 +46,140 @@ export const mockBuild = {
   projectName: 'ProjectName',
   compilationEndTimestampMicroseconds: 1,
   errorCount: 1,
-  id: 'buildId',
+  id: MOCK_BUILD_ID,
   buildStatus: 'succeeded',
   compilationDuration: 1,
-  schema: 'Schema',
+  schema: 'SchemaName',
   compiledCount: 1,
   endTimestamp: '2021-01-01T00:00:01Z',
   userid256: 'userId256',
   machineName: 'Example_Machine',
   wasSuspended: true,
-} as Build;
+};
 
-export const mockBuildCount = { day: '2021-07-10', builds: 10, errors: 1 };
-export const mockBuildTime = {
+export const mockBuildCount: BuildCount = {
+  day: '2021-07-10',
+  builds: 10,
+  errors: 1,
+};
+
+export const mockBuildError: BuildError = {
+  detail: `\/Users\/<redacted>\/myproject\/Sources\/MyClass.m:241:97:// /  error: instance method 'fetch' not found ; did you mean 'fetchIt'?\r
+  myclass:[self.myService fetch]\r                                                                                                ^~~~~~~~~~~~~~\r                                                                                                fetch\r
+  1 error generated.\r"`,
+  characterRangeEnd: 13815,
+  id: '3E6EF185-6AC1-4E95-87E8-E305F41916E9',
+  endingColumn: 97,
+  parentIdentifier: 'MyMac_34580469-5792-40F3-BEFB-7C5925996F23_8860',
+  day: '2020-11-02T00:00:00Z',
+  type: 'clangError',
+  title: 'Instance method "fetch" not found ; did you mean "fetchIt"?',
+  endingLine: 241,
+  severity: 2,
+  startingLine: 241,
+  parentType: 'step',
+  buildIdentifier: MOCK_BUILD_ID,
+  startingColumn: 97,
+  characterRangeStart: 0,
+  documentURL: 'file:///Users/<redacted>/myproject/Sources/MyClass.m',
+};
+
+export const mockBuildHost: BuildHost = {
+  id: '9DD5508D-4AD9-4C1C-AB7C-45BC2183EC51',
+  swapFreeMb: 1615.25,
+  hostOsFamily: 'Darwin',
+  isVirtual: false,
+  uptimeSeconds: 1602055187,
+  hostModel: 'MacBookPro14,2',
+  hostOsVersion: '10.15.7',
+  day: '2020-10-26T00:00:00Z',
+  cpuCount: 4,
+  swapTotalMb: 7168,
+  hostOs: 'Mac OS X',
+  hostArchitecture: 'x86_64',
+  memoryTotalMb: 16384,
+  timezone: 'CET',
+  cpuModel: 'Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz',
+  buildIdentifier: MOCK_BUILD_ID,
+  memoryFreeMb: 24.5234375,
+  cpuSpeedGhz: 3.5,
+};
+
+export const mockBuildMetadata: BuildMetadata = {
+  anotherKey: '42',
+  thirdKey: 'Third value',
+  aKey: 'value1',
+};
+
+export const mockBuildTime: BuildTime = {
   day: '2021-07-10',
   durationP50: 1.1,
   durationP95: 2.1,
   totalDuration: 3.1,
 };
-export const mockBuildStatus = { id: 'build_id', status: 'succeeded' };
+export const mockBuildStatus: BuildStatusResult = {
+  id: MOCK_BUILD_ID,
+  buildStatus: 'succeeded',
+};
+
+export const mockBuildWarning: BuildWarning = {
+  detail: null,
+  characterRangeEnd: 9817,
+  documentURL: 'file:///Users/<redacted>/myproject/Sources/MyViewController.m',
+  endingColumn: 22,
+  id: '5F2011AC-F87F-4EDC-BBC6-2BBA3D789EB3',
+  parentIdentifier: 'MyMac_34580469-5792-40F3-BEFB-7C5925996F23_1845',
+  day: '2020-11-02T00:00:00Z',
+  type: 'deprecatedWarning',
+  title:
+    "'dimsBackgroundDuringPresentation' is deprecated: first deprecated in iOS 12.0",
+  endingLine: 235,
+  severity: 1,
+  startingLine: 235,
+  parentType: 'step',
+  clangFlag: '[-Wdeprecated-declarations]',
+  startingColumn: 22,
+  buildIdentifier: MOCK_BUILD_ID,
+  characterRangeStart: 0,
+};
+
+export const mockTarget: Target = {
+  id: 'MyMac_34580469-5792-40F3-BEFB-7C5925996F23_1992',
+  category: 'noop',
+  startTimestamp: '2020-11-02T10:59:09Z',
+  compilationEndTimestampMicroseconds: 1604314749.2909288,
+  endTimestampMicroseconds: 1604314982.298002,
+  endTimestamp: '2020-11-02T11:03:02Z',
+  fetchedFromCache: false,
+  errorCount: 0,
+  day: '2020-11-02T00:00:00Z',
+  warningCount: 0,
+  compilationEndTimestamp: '2020-11-02T10:59:09Z',
+  compilationDuration: 0,
+  compiledCount: 0,
+  duration: 0.000233007,
+  buildIdentifier: MOCK_BUILD_ID,
+  name: 'Model',
+  startTimestampMicroseconds: 1604314749.2909288,
+};
+
+export const mockXcode: Xcode = {
+  buildNumber: '12A7209',
+  id: '6354C87F-0ADC-4354-929C-02EBE545E099',
+  buildIdentifier: MOCK_BUILD_ID,
+  day: '2020-11-02T00:00:00Z',
+  version: '1200',
+};
+
+export const mockBuildResponse = {
+  build: mockBuild,
+  targets: [mockTarget],
+  xcode: mockXcode,
+};
 
 export const XcmetricsClient: XcmetricsApi = {
-  getBuild: (id: string) => {
-    return Promise.resolve({ ...mockBuild, id });
+  getBuild: (_id: string) => {
+    return Promise.resolve(mockBuildResponse);
   },
   getBuilds: () => {
     return Promise.resolve([
@@ -78,15 +204,27 @@ export const XcmetricsClient: XcmetricsApi = {
       },
     });
   },
+  getBuildErrors: (buildId: string) => {
+    return Promise.resolve([{ ...mockBuildError, buildIdentifier: buildId }]);
+  },
   getBuildCounts: () => {
     return Promise.resolve([mockBuildCount, mockBuildCount]);
   },
+  getBuildHost: (buildId: string) => {
+    return Promise.resolve({ ...mockBuildHost, buildIdentifier: buildId });
+  },
+  getBuildMetadata: (_buildId: string) => {
+    return Promise.resolve(mockBuildMetadata);
+  },
   getBuildStatuses: (limit: number) => {
     return Promise.resolve([mockBuild].slice(0, limit));
   },
   getBuildTimes: (days: number) => {
     return Promise.resolve([mockBuildTime, mockBuildTime].slice(0, days));
   },
+  getBuildWarnings: (buildId: string) => {
+    return Promise.resolve([{ ...mockBuildWarning, buildIdentifier: buildId }]);
+  },
   getProjects: () => {
     return Promise.resolve([mockBuild.projectName]);
   },
diff --git a/plugins/xcmetrics/src/api/types.ts b/plugins/xcmetrics/src/api/types.ts
index c018a67056..44f27872ca 100644
--- a/plugins/xcmetrics/src/api/types.ts
+++ b/plugins/xcmetrics/src/api/types.ts
@@ -52,6 +52,50 @@ export type BuildCount = {
   builds: number;
 };
 
+export type BuildError = {
+  detail: string;
+  characterRangeEnd: number;
+  id: string;
+  endingColumn: number;
+  parentIdentifier: string;
+  day: string;
+  type: string;
+  title: string;
+  endingLine: number;
+  severity: number;
+  startingLine: number;
+  parentType: string;
+  buildIdentifier: string;
+  startingColumn: number;
+  characterRangeStart: number;
+  documentURL: string;
+};
+
+export type BuildHost = {
+  id: string;
+  swapFreeMb: number;
+  hostOsFamily: string;
+  isVirtual: boolean;
+  uptimeSeconds: number;
+  hostModel: string;
+  hostOsVersion: string;
+  day: string;
+  cpuCount: number;
+  swapTotalMb: number;
+  hostOs: string;
+  hostArchitecture: string;
+  memoryTotalMb: number;
+  timezone: string;
+  cpuModel: string;
+  buildIdentifier: string;
+  memoryFreeMb: number;
+  cpuSpeedGhz: number;
+};
+
+export type BuildMetadata = {
+  [key: string]: string;
+};
+
 export type BuildTime = {
   day: string;
   durationP50: number;
@@ -59,6 +103,26 @@ export type BuildTime = {
   totalDuration: number;
 };
 
+export type BuildWarning = {
+  detail: string | null;
+  characterRangeEnd: number;
+  documentURL: string;
+  endingColumn: number;
+  id: string;
+  parentIdentifier: string;
+  day: string;
+  type: string;
+  title: string;
+  endingLine: number;
+  severity: number;
+  startingLine: number;
+  parentType: string;
+  clangFlag: string;
+  startingColumn: number;
+  buildIdentifier: string;
+  characterRangeStart: number;
+};
+
 export type PaginationResult<T> = {
   items: T[];
   metadata: {
@@ -68,6 +132,40 @@ export type PaginationResult<T> = {
   };
 };
 
+export type Target = {
+  id: string;
+  category: string;
+  startTimestamp: string;
+  compilationEndTimestampMicroseconds: number;
+  endTimestampMicroseconds: number;
+  endTimestamp: string;
+  fetchedFromCache: boolean;
+  errorCount: number;
+  day: string;
+  warningCount: number;
+  compilationEndTimestamp: string;
+  compilationDuration: number;
+  compiledCount: number;
+  duration: number;
+  buildIdentifier: string;
+  name: string;
+  startTimestampMicroseconds: number;
+};
+
+export type Xcode = {
+  buildNumber: string;
+  id: string;
+  buildIdentifier: string;
+  day: string;
+  version: string;
+};
+
+export type BuildResponse = {
+  build: Build;
+  targets: Target[];
+  xcode: Xcode;
+};
+
 export type BuildFilters = {
   from: string; // ISO Date (e.g. "2021-01-01")
   to: string; // ISO Date (e.g. "2021-01-02")
@@ -76,16 +174,20 @@ export type BuildFilters = {
 };
 
 export interface XcmetricsApi {
-  getBuild(id: string): Promise<Build>;
+  getBuild(id: string): Promise<BuildResponse>;
   getBuilds(limit?: number): Promise<Build[]>;
   getFilteredBuilds(
     filters: BuildFilters,
     page?: number,
     perPage?: number,
   ): Promise<PaginationResult<Build>>;
+  getBuildErrors(buildId: string): Promise<BuildError[]>;
   getBuildCounts(days: number): Promise<BuildCount[]>;
+  getBuildHost(buildId: string): Promise<BuildHost>;
+  getBuildMetadata(buildId: string): Promise<BuildMetadata>;
   getBuildTimes(days: number): Promise<BuildTime[]>;
   getBuildStatuses(limit: number): Promise<BuildStatusResult[]>;
+  getBuildWarnings(buildId: string): Promise<BuildWarning[]>;
   getProjects(): Promise<string[]>;
 }
 
diff --git a/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.test.tsx b/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.test.tsx
new file mode 100644
index 0000000000..baa8c0e5f2
--- /dev/null
+++ b/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { AccordionComponent } from './AccordionComponent';
+import userEvent from '@testing-library/user-event';
+
+describe('AccordionComponent', () => {
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <AccordionComponent
+        id="accordionId"
+        heading="heading"
+        secondaryHeading="secondaryHeading"
+      />,
+    );
+
+    expect(rendered.getByText('heading')).toBeInTheDocument();
+    expect(rendered.getByText('secondaryHeading')).toBeInTheDocument();
+  });
+
+  it('should show content when clicked', async () => {
+    const rendered = await renderInTestApp(
+      <AccordionComponent
+        id="accordionId"
+        heading="heading"
+        secondaryHeading="secondaryHeading"
+      >
+        Content
+      </AccordionComponent>,
+    );
+
+    expect(rendered.getByText('Content')).not.toBeVisible();
+
+    userEvent.click(rendered.getByRole('button'));
+    expect(await rendered.findByText('Content')).toBeVisible();
+  });
+});
diff --git a/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx b/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx
new file mode 100644
index 0000000000..9afe736a2a
--- /dev/null
+++ b/plugins/xcmetrics/src/components/AccordionComponent/AccordionComponent.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  Accordion,
+  AccordionSummary,
+  Typography,
+  AccordionDetails,
+  makeStyles,
+  createStyles,
+} from '@material-ui/core';
+import React, { PropsWithChildren } from 'react';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { BackstageTheme } from '@backstage/theme';
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    heading: {
+      flexBasis: '33.33%',
+      flexShrink: 0,
+    },
+    secondaryHeading: {
+      color: theme.palette.text.secondary,
+    },
+  }),
+);
+
+interface AccordionProps {
+  id: string;
+  heading: string;
+  secondaryHeading?: string | number;
+  disabled?: boolean;
+  unmountOnExit?: boolean;
+}
+
+export const AccordionComponent = (
+  props: PropsWithChildren<AccordionProps>,
+) => {
+  const classes = useStyles();
+
+  return (
+    <Accordion
+      disabled={props.disabled}
+      TransitionProps={{ unmountOnExit: props.unmountOnExit ?? false }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls={`${props.id}-content`}
+        id={`${props.id}-header`}
+      >
+        <Typography className={classes.heading}>{props.heading}</Typography>
+        <Typography className={classes.secondaryHeading}>
+          {props.secondaryHeading}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>{props.children}</AccordionDetails>
+    </Accordion>
+  );
+};
diff --git a/plugins/xcmetrics/src/components/AccordionComponent/index.ts b/plugins/xcmetrics/src/components/AccordionComponent/index.ts
new file mode 100644
index 0000000000..33632d6828
--- /dev/null
+++ b/plugins/xcmetrics/src/components/AccordionComponent/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { AccordionComponent } from './AccordionComponent';
diff --git a/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx
new file mode 100644
index 0000000000..15b8720a1d
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.test.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
+import { BuildDetailsComponent, withRequest } from './BuildDetailsComponent';
+import { xcmetricsApiRef } from '../../api';
+
+jest.mock('../../api/XcmetricsClient');
+const client = require('../../api/XcmetricsClient');
+
+jest.mock('../AccordionComponent', () => ({
+  AccordionComponent: ({ heading }: { heading: string }) => (
+    <div>accordion-{heading}</div>
+  ),
+}));
+
+jest.mock('../BuildTimelineComponent', () => ({
+  BuildTimelineComponent: () => 'BuildTimelineComponent',
+}));
+
+describe('BuildDetailsComponent', () => {
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <ApiProvider
+        apis={ApiRegistry.with(xcmetricsApiRef, client.XcmetricsClient)}
+      >
+        <BuildDetailsComponent buildData={client.mockBuildResponse} />
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText('accordion-Host')).toBeInTheDocument();
+    expect(rendered.getByText('accordion-Errors')).toBeInTheDocument();
+    expect(rendered.getByText('accordion-Warnings')).toBeInTheDocument();
+    expect(rendered.getByText('accordion-Metadata')).toBeInTheDocument();
+    expect(rendered.getByText('accordion-Timeline')).toBeInTheDocument();
+
+    expect(rendered.getByText(client.mockBuild.id)).toBeInTheDocument();
+    expect(
+      rendered.getByText(client.mockBuild.projectName),
+    ).toBeInTheDocument();
+    expect(rendered.getByText(client.mockBuild.schema)).toBeInTheDocument();
+  });
+});
+
+describe('BuildDetailsComponent with request', () => {
+  const BuildDetails = withRequest(BuildDetailsComponent);
+
+  it('should fetch the build and render', async () => {
+    const rendered = await renderInTestApp(
+      <ApiProvider
+        apis={ApiRegistry.with(xcmetricsApiRef, client.XcmetricsClient)}
+      >
+        <BuildDetails buildId={client.mockBuild.id} />
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText(client.mockBuild.id)).toBeInTheDocument();
+  });
+
+  it('should show an error when API not responding', async () => {
+    const errorMessage = 'MockErrorMessage';
+    client.XcmetricsClient.getBuild = jest
+      .fn()
+      .mockRejectedValue({ message: errorMessage });
+
+    const rendered = await renderInTestApp(
+      <ApiProvider
+        apis={ApiRegistry.with(xcmetricsApiRef, client.XcmetricsClient)}
+      >
+        <BuildDetails buildId={client.mockBuild.id} />
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('should show a message when no build is returned from the API', async () => {
+    client.XcmetricsClient.getBuild = jest.fn().mockReturnValue(undefined);
+
+    const rendered = await renderInTestApp(
+      <ApiProvider
+        apis={ApiRegistry.with(xcmetricsApiRef, client.XcmetricsClient)}
+      >
+        <BuildDetails buildId={client.mockBuild.id} />
+      </ApiProvider>,
+    );
+
+    expect(
+      rendered.getByText(`Could not load build ${client.mockBuild.id}`),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx
new file mode 100644
index 0000000000..44f43a268b
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildDetailsComponent/BuildDetailsComponent.tsx
@@ -0,0 +1,202 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createStyles, Divider, Grid, makeStyles } from '@material-ui/core';
+import React from 'react';
+import { BuildResponse, xcmetricsApiRef } from '../../api';
+import { Progress, StructuredMetadataTable } from '@backstage/core-components';
+import { Alert } from '@material-ui/lab';
+import { useAsync } from 'react-use';
+import { useApi } from '@backstage/core-plugin-api';
+import { formatDuration, formatStatus, formatTime } from '../../utils';
+import { StatusIconComponent as StatusIcon } from '../StatusIconComponent';
+import { BackstageTheme } from '@backstage/theme';
+import { AccordionComponent } from '../AccordionComponent';
+import { BuildTimelineComponent } from '../BuildTimelineComponent';
+import { PreformattedTextComponent } from '../PreformattedTextComponent';
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    divider: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+  }),
+);
+
+interface BuildDetailsProps {
+  buildData: BuildResponse;
+  showId?: boolean;
+}
+
+export const BuildDetailsComponent = ({
+  buildData: { build, targets, xcode },
+  showId,
+}: BuildDetailsProps) => {
+  const classes = useStyles();
+  const client = useApi(xcmetricsApiRef);
+  const hostResult = useAsync(
+    async () => client.getBuildHost(build.id),
+    [build.id],
+  );
+  const errorsResult = useAsync(
+    async () => client.getBuildErrors(build.id),
+    [build.id],
+  );
+  const warningsResult = useAsync(
+    async () => client.getBuildWarnings(build.id),
+    [build.id],
+  );
+  const metadataResult = useAsync(
+    async () => client.getBuildMetadata(build.id),
+    [build.id],
+  );
+
+  const buildDetails = {
+    project: build.projectName,
+    schema: build.schema,
+    category: build.category,
+    userId: build.userid,
+    'started at': formatTime(build.startTimestamp),
+    'ended at': formatTime(build.endTimestamp),
+    duration: formatDuration(build.duration),
+    status: (
+      <>
+        <StatusIcon buildStatus={build.buildStatus} />
+        {formatStatus(build.buildStatus)}
+      </>
+    ),
+    xcode: `${xcode.version} (${xcode.buildNumber})`,
+    CI: build.isCi,
+  };
+
+  return (
+    <Grid container item direction="row">
+      <Grid item xs={4}>
+        <StructuredMetadataTable
+          metadata={
+            showId === false ? buildDetails : { id: build.id, ...buildDetails }
+          }
+        />
+      </Grid>
+      <Grid item xs={8}>
+        <AccordionComponent
+          id="buildHost"
+          heading="Host"
+          secondaryHeading={build.machineName}
+        >
+          {hostResult.loading && <Progress />}
+          {!hostResult.loading && hostResult.value && (
+            <StructuredMetadataTable metadata={hostResult.value} />
+          )}
+        </AccordionComponent>
+
+        <AccordionComponent
+          id="buildErrors"
+          heading="Errors"
+          secondaryHeading={build.errorCount}
+          disabled={build.errorCount === 0}
+        >
+          <div>
+            {errorsResult.loading && <Progress />}
+            {!errorsResult.loading &&
+              errorsResult.value?.map((error, idx) => (
+                <div key={error.id}>
+                  <PreformattedTextComponent
+                    title="Error Details"
+                    text={error.detail}
+                    maxChars={190}
+                    expandable
+                  />
+                  {idx !== errorsResult.value.length - 1 && (
+                    <Divider className={classes.divider} />
+                  )}
+                </div>
+              ))}
+          </div>
+        </AccordionComponent>
+
+        <AccordionComponent
+          id="buildWarnings"
+          heading="Warnings"
+          secondaryHeading={build.warningCount}
+          disabled={build.warningCount === 0}
+        >
+          <div>
+            {warningsResult.loading && <Progress />}
+            {!warningsResult.loading &&
+              warningsResult.value?.map((warning, idx) => (
+                <div key={warning.id}>
+                  <PreformattedTextComponent
+                    title="Warning Details"
+                    text={warning.detail ?? warning.title}
+                    maxChars={190}
+                    expandable
+                  />
+                  {idx !== warningsResult.value.length - 1 && (
+                    <Divider className={classes.divider} />
+                  )}
+                </div>
+              ))}
+          </div>
+        </AccordionComponent>
+
+        <AccordionComponent
+          id="buildMetadata"
+          heading="Metadata"
+          disabled={!metadataResult.loading && !metadataResult.value}
+        >
+          {metadataResult.loading && <Progress />}
+          {!metadataResult.loading && metadataResult.value && (
+            <StructuredMetadataTable metadata={metadataResult.value} />
+          )}
+        </AccordionComponent>
+
+        <AccordionComponent id="buildTimeline" heading="Timeline" unmountOnExit>
+          <BuildTimelineComponent targets={targets} />
+        </AccordionComponent>
+      </Grid>
+    </Grid>
+  );
+};
+
+type WithRequestProps = Omit<BuildDetailsProps, 'buildData'> & {
+  buildId: string;
+};
+
+export const withRequest =
+  (Component: typeof BuildDetailsComponent) =>
+  ({ buildId, ...props }: WithRequestProps) => {
+    const client = useApi(xcmetricsApiRef);
+    const {
+      value: buildResponse,
+      loading,
+      error,
+    } = useAsync(async () => client.getBuild(buildId), []);
+
+    if (loading) {
+      return <Progress />;
+    }
+
+    if (error) {
+      return <Alert severity="error">{error.message}</Alert>;
+    }
+
+    if (!buildResponse) {
+      return <Alert severity="error">Could not load build {buildId}</Alert>;
+    }
+
+    return <Component {...props} buildData={buildResponse} />;
+  };
diff --git a/plugins/xcmetrics/src/components/BuildDetailsComponent/index.ts b/plugins/xcmetrics/src/components/BuildDetailsComponent/index.ts
new file mode 100644
index 0000000000..4e50cf23a0
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildDetailsComponent/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { BuildDetailsComponent, withRequest } from './BuildDetailsComponent';
diff --git a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx
index 3818d51a16..761c08a711 100644
--- a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx
+++ b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.test.tsx
@@ -18,6 +18,7 @@ import { renderInTestApp } from '@backstage/test-utils';
 import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 import { BuildListComponent } from './BuildListComponent';
 import { xcmetricsApiRef } from '../../api';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('../../api/XcmetricsClient');
 const client = require('../../api/XcmetricsClient');
@@ -26,6 +27,11 @@ jest.mock('../BuildListFilterComponent', () => ({
   BuildListFilterComponent: () => 'BuildListFilterComponent',
 }));
 
+jest.mock('../BuildDetailsComponent', () => ({
+  withRequest: (component: any) => component,
+  BuildDetailsComponent: () => 'BuildDetailsComponent',
+}));
+
 describe('BuildListComponent', () => {
   it('should render', async () => {
     const rendered = await renderInTestApp(
@@ -42,6 +48,23 @@ describe('BuildListComponent', () => {
     ).toBeInTheDocument();
   });
 
+  it('should show build details', async () => {
+    const rendered = await renderInTestApp(
+      <ApiProvider
+        apis={ApiRegistry.with(xcmetricsApiRef, client.XcmetricsClient)}
+      >
+        <BuildListComponent />
+      </ApiProvider>,
+    );
+
+    userEvent.click(
+      (await rendered.findAllByLabelText('Detail panel visiblity toggle'))[0],
+    );
+    expect(
+      await rendered.findByText('BuildDetailsComponent'),
+    ).toBeInTheDocument();
+  });
+
   it('should show errors', async () => {
     const message = 'error';
     client.XcmetricsClient.getFilteredBuilds = jest
diff --git a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx
index c9ab028359..42f6bf4414 100644
--- a/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx
+++ b/plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx
@@ -17,12 +17,24 @@ import React, { useRef, useState } from 'react';
 import { Table } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { BuildFilters, xcmetricsApiRef } from '../../api';
-import { Grid } from '@material-ui/core';
+import { createStyles, Grid, makeStyles } from '@material-ui/core';
 import { BuildListFilterComponent as Filters } from '../BuildListFilterComponent';
 import { DateTime } from 'luxon';
 import { buildPageColumns } from '../BuildTableColumns';
+import { BuildDetailsComponent, withRequest } from '../BuildDetailsComponent';
+import { BackstageTheme } from '@backstage/theme';
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    detailPanel: {
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.background.paper,
+    },
+  }),
+);
 
 export const BuildListComponent = () => {
+  const classes = useStyles();
   const client = useApi(xcmetricsApiRef);
   const tableRef = useRef<any>();
 
@@ -68,6 +80,14 @@ export const BuildListComponent = () => {
               .catch(reason => reject(reason));
           });
         }}
+        detailPanel={rowData => {
+          const BuildDetails = withRequest(BuildDetailsComponent);
+          return (
+            <div className={classes.detailPanel}>
+              <BuildDetails buildId={(rowData as any).rowData.id} />
+            </div>
+          );
+        }}
       />
     </Grid>
   );
diff --git a/plugins/xcmetrics/src/components/BuildTableColumns.tsx b/plugins/xcmetrics/src/components/BuildTableColumns.tsx
index 95c82ef372..a8bfd0166e 100644
--- a/plugins/xcmetrics/src/components/BuildTableColumns.tsx
+++ b/plugins/xcmetrics/src/components/BuildTableColumns.tsx
@@ -15,26 +15,16 @@
  */
 
 import { Chip } from '@material-ui/core';
-import React, { ReactChild } from 'react';
-import {
-  StatusOK,
-  StatusError,
-  StatusWarning,
-  TableColumn,
-} from '@backstage/core-components';
-import { Build, BuildStatus } from '../api';
+import React from 'react';
+import { TableColumn } from '@backstage/core-components';
+import { Build } from '../api';
 import { formatTime, formatDuration } from '../utils';
-
-const STATUS_ICONS: { [key in BuildStatus]: ReactChild } = {
-  succeeded: <StatusOK />,
-  failed: <StatusError />,
-  stopped: <StatusWarning />,
-};
+import { StatusIconComponent as StatusIcon } from './StatusIconComponent';
 
 const baseColumns: TableColumn<Build>[] = [
   {
     field: 'buildStatus',
-    render: data => STATUS_ICONS[data.buildStatus],
+    render: data => <StatusIcon buildStatus={data.buildStatus} />,
   },
   {
     title: 'Project',
diff --git a/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx
new file mode 100644
index 0000000000..3adb1ede58
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.test.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { BuildTimelineComponent } from './BuildTimelineComponent';
+
+jest.mock('../../api/XcmetricsClient');
+const client = require('../../api/XcmetricsClient');
+
+describe('BuildTimelineComponent', () => {
+  it('should render', async () => {
+    const rendered = await renderInTestApp(
+      <BuildTimelineComponent
+        targets={[client.mockTarget]}
+        height={100}
+        width={100}
+      />,
+    );
+    expect(
+      await rendered.findByText(client.mockTarget.name),
+    ).toBeInTheDocument();
+  });
+
+  it('should render a message if no targets are provided', async () => {
+    const rendered = await renderInTestApp(
+      <BuildTimelineComponent targets={[]} />,
+    );
+    expect(rendered.getByText('No Targets')).toBeInTheDocument();
+  });
+});
diff --git a/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx
new file mode 100644
index 0000000000..0d0f249a95
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildTimelineComponent/BuildTimelineComponent.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createStyles, makeStyles, useTheme } from '@material-ui/core';
+import React from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { BackstageTheme } from '@backstage/theme';
+import { Target } from '../../api';
+import { formatSecondsInterval, formatPercentage } from '../../utils';
+
+const EMPTY_HEIGHT = 100;
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    toolTip: {
+      backgroundColor: theme.palette.background.paper,
+      opacity: 0.8,
+      padding: 8,
+    },
+  }),
+);
+
+const TargetToolTip = ({ active, payload, label }: any) => {
+  const classes = useStyles();
+
+  if (active && payload && payload.length === 2) {
+    const buildTime = payload[0].value[1] - payload[0].value[0];
+    const compileTime = payload[1].value[1] - payload[1].value[0];
+    return (
+      <div className={classes.toolTip}>
+        {`${label}: ${formatSecondsInterval(payload[0].value)}`}
+        <br />
+        {buildTime > 0 &&
+          `Compile time: ${formatPercentage(compileTime / buildTime)}`}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+const getTimelineData = (targets: Target[]) => {
+  const min = targets[0].startTimestampMicroseconds;
+
+  return targets
+    .filter(target => target.fetchedFromCache === false)
+    .map(target => ({
+      name: target.name,
+      buildTime: [
+        target.startTimestampMicroseconds - min,
+        target.endTimestampMicroseconds - min,
+      ],
+      compileTime: [
+        target.startTimestampMicroseconds - min,
+        target.compilationEndTimestampMicroseconds - min,
+      ],
+    }));
+};
+
+export interface BuildTimelineProps {
+  targets: Target[];
+  height?: number;
+  width?: number;
+}
+
+export const BuildTimelineComponent = ({
+  targets,
+  height,
+  width,
+}: BuildTimelineProps) => {
+  const theme = useTheme();
+  if (!targets.length) return <p>No Targets</p>;
+
+  const data = getTimelineData(targets);
+
+  return (
+    <ResponsiveContainer
+      height={height}
+      width={width}
+      minHeight={EMPTY_HEIGHT + targets.length * 5}
+    >
+      <BarChart layout="vertical" data={data} maxBarSize={10} barGap={0}>
+        <CartesianGrid strokeDasharray="2 2" />
+        <XAxis type="number" domain={[0, 'dataMax']} />
+        <YAxis type="category" dataKey="name" padding={{ top: 0, bottom: 0 }} />
+        <Tooltip content={<TargetToolTip />} />
+        <Legend />
+        <Bar
+          dataKey="buildTime"
+          fill={theme.palette.grey[400]}
+          minPointSize={1}
+        />
+        <Bar dataKey="compileTime" fill={theme.palette.primary.main} />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
diff --git a/plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts b/plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts
new file mode 100644
index 0000000000..fe294f8467
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildTimelineComponent/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { BuildTimelineComponent } from './BuildTimelineComponent';
diff --git a/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.test.tsx b/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.test.tsx
new file mode 100644
index 0000000000..601f3ea6a2
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.test.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { BuildsPage } from './BuildsPage';
+
+jest.mock('../BuildDetailsComponent', () => ({
+  withRequest: (component: any) => component,
+  BuildDetailsComponent: () => 'BuildDetailsComponent',
+}));
+
+jest.mock('../BuildListComponent', () => ({
+  BuildListComponent: () => 'BuildListComponent',
+}));
+
+describe('BuildPageComponent', () => {
+  it('should render BuildDetailsWithDataComponent if build id is provided in path', async () => {
+    const rendered = await renderInTestApp(<BuildsPage />, {
+      routeEntries: [`/buildId`],
+    });
+
+    expect(rendered.getByText('BuildDetailsComponent')).toBeInTheDocument();
+  });
+
+  it('should render BuildListComponent if no build id is provided in path', async () => {
+    const rendered = await renderInTestApp(<BuildsPage />);
+
+    expect(rendered.getByText('BuildListComponent')).toBeInTheDocument();
+  });
+});
diff --git a/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx b/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx
new file mode 100644
index 0000000000..ca3f023ff5
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildsPage/BuildsPage.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useRouteRefParams } from '@backstage/core-plugin-api';
+import { buildsRouteRef } from '../../routes';
+import { BuildListComponent } from '../BuildListComponent';
+import { BuildDetailsComponent, withRequest } from '../BuildDetailsComponent';
+import { InfoCard } from '@backstage/core-components';
+
+export const BuildsPage = () => {
+  const { '*': buildId } = useRouteRefParams(buildsRouteRef) ?? { '*': '' };
+
+  if (buildId) {
+    const BuildDetails = withRequest(BuildDetailsComponent);
+
+    return (
+      <InfoCard title="Build Details" subheader={buildId}>
+        <BuildDetails buildId={buildId} showId={false} />
+      </InfoCard>
+    );
+  }
+
+  return <BuildListComponent />;
+};
diff --git a/plugins/xcmetrics/src/components/BuildsPage/index.ts b/plugins/xcmetrics/src/components/BuildsPage/index.ts
new file mode 100644
index 0000000000..47fe9166df
--- /dev/null
+++ b/plugins/xcmetrics/src/components/BuildsPage/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { BuildsPage } from './BuildsPage';
diff --git a/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx b/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx
index 6877340a5b..854fbbd87f 100644
--- a/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx
+++ b/plugins/xcmetrics/src/components/DatePickerComponent/DatePickerComponent.tsx
@@ -18,6 +18,7 @@ import {
   createStyles,
   InputBase,
   InputProps,
+  makeStyles,
   Theme,
   Typography,
   withStyles,
@@ -50,6 +51,13 @@ const BootstrapInput = withStyles((theme: Theme) =>
   }),
 )(InputBase);
 
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
 interface DatePickerProps {
   label: string;
   onDateChange?: (date: string) => void;
@@ -59,15 +67,19 @@ export const DatePickerComponent = ({
   label,
   onDateChange,
   ...inputProps
-}: InputProps & DatePickerProps) => (
-  <>
-    <Typography variant="button">{label}</Typography>
-    <BootstrapInput
-      inputProps={{ 'aria-label': label }}
-      type="date"
-      fullWidth
-      onChange={event => onDateChange?.(event.target.value)}
-      {...inputProps}
-    />
-  </>
-);
+}: InputProps & DatePickerProps) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="button">{label}</Typography>
+      <BootstrapInput
+        inputProps={{ 'aria-label': label }}
+        type="date"
+        fullWidth
+        onChange={event => onDateChange?.(event.target.value)}
+        {...inputProps}
+      />
+    </div>
+  );
+};
diff --git a/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx b/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx
new file mode 100644
index 0000000000..b73e2cead5
--- /dev/null
+++ b/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Button,
+  createStyles,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  makeStyles,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { useState } from 'react';
+import { BackstageTheme } from '@backstage/theme';
+import { cn } from '../../utils';
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    pre: {
+      whiteSpace: 'pre-line',
+      wordBreak: 'break-all',
+    },
+    expandable: {
+      cursor: 'pointer',
+    },
+    fullPre: {
+      whiteSpace: 'pre-wrap',
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500],
+    },
+  }),
+);
+
+interface PreformattedTextProps {
+  text: string;
+  maxChars: number;
+}
+
+interface ExpandableProps extends PreformattedTextProps {
+  expandable: boolean;
+  title: string;
+}
+
+interface NonExpandableProps extends PreformattedTextProps {
+  expandable?: never;
+  title?: string;
+}
+
+export const PreformattedTextComponent = ({
+  text,
+  maxChars,
+  expandable,
+  title,
+}: NonExpandableProps | ExpandableProps) => {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (expandable && event.key === 'Enter') {
+      setOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <div
+        role={expandable ? 'button' : undefined}
+        onClick={() => expandable && setOpen(true)}
+        onKeyUp={handleKeyUp}
+        tabIndex={expandable ? 0 : undefined}
+      >
+        <pre className={cn(classes.pre, expandable && classes.expandable)}>
+          {text.slice(0, maxChars - 1).trim()}
+          {text.length > maxChars - 1 && '…'}
+        </pre>
+      </div>
+
+      {expandable && (
+        <Dialog
+          open={open}
+          onClose={() => setOpen(false)}
+          aria-labelledby="dialog-title"
+          aria-describedby="dialog-description"
+          maxWidth="xl"
+          fullWidth
+        >
+          <DialogTitle id="dialog-title">
+            {title}
+            <IconButton
+              aria-label="close"
+              className={classes.closeButton}
+              onClick={() => setOpen(false)}
+            >
+              <CloseIcon />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent>
+            <pre className={classes.fullPre}>{text}</pre>
+          </DialogContent>
+          <DialogActions>
+            <Button color="primary" onClick={() => setOpen(false)}>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+    </>
+  );
+};
diff --git a/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts b/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts
new file mode 100644
index 0000000000..dbc27dd869
--- /dev/null
+++ b/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { PreformattedTextComponent } from './PreformattedTextComponent';
diff --git a/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx b/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx
index 1ecc324683..201cb4febf 100644
--- a/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx
+++ b/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx
@@ -28,15 +28,16 @@ interface TooltipContentProps {
 
 const TooltipContent = ({ buildId }: TooltipContentProps) => {
   const client = useApi(xcmetricsApiRef);
-  const {
-    value: build,
-    loading,
-    error,
-  } = useAsync(async () => client.getBuild(buildId), []);
+  const { value, loading, error } = useAsync(
+    async () => client.getBuild(buildId),
+    [],
+  );
 
   if (error) {
     return <div>{error.message}</div>;
-  } else if (loading || !build) {
+  }
+
+  if (loading || !value?.build) {
     return <Progress style={{ width: 100 }} />;
   }
 
@@ -45,15 +46,15 @@ const TooltipContent = ({ buildId }: TooltipContentProps) => {
       <tbody>
         <tr>
           <td>Started</td>
-          <td>{new Date(build.startTimestamp).toLocaleString()}</td>
+          <td>{new Date(value.build.startTimestamp).toLocaleString()}</td>
         </tr>
         <tr>
           <td>Duration</td>
-          <td>{formatDuration(build.duration)}</td>
+          <td>{formatDuration(value.build.duration)}</td>
         </tr>
         <tr>
           <td>Status</td>
-          <td>{formatStatus(build.buildStatus)}</td>
+          <td>{formatStatus(value.build.buildStatus)}</td>
         </tr>
       </tbody>
     </table>
diff --git a/plugins/xcmetrics/src/components/StatusIconComponent/StatusIconComponent.test.tsx b/plugins/xcmetrics/src/components/StatusIconComponent/StatusIconComponent.test.tsx
new file mode 100644
index 0000000000..8833d828f0
--- /dev/null
+++ b/plugins/xcmetrics/src/components/StatusIconComponent/StatusIconComponent.test.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { StatusIconComponent } from './StatusIconComponent';
+
+describe('StatusIconComponent', () => {
+  it('should render', async () => {
+    let rendered = await renderInTestApp(
+      <StatusIconComponent buildStatus="succeeded" />,
+    );
+    expect(rendered.getByLabelText('Status ok')).toBeInTheDocument();
+
+    rendered = await renderInTestApp(
+      <StatusIconComponent buildStatus="failed" />,
+    );
+    expect(rendered.getByLabelText('Status error')).toBeInTheDocument();
+
+    rendered = await renderInTestApp(
+      <StatusIconComponent buildStatus="stopped" />,
+    );
+    expect(rendered.getByLabelText('Status warning')).toBeInTheDocument();
+  });
+});
diff --git a/plugins/xcmetrics/src/components/StatusIconComponent/StatusIconComponent.tsx b/plugins/xcmetrics/src/components/StatusIconComponent/StatusIconComponent.tsx
new file mode 100644
index 0000000000..f680003ff4
--- /dev/null
+++ b/plugins/xcmetrics/src/components/StatusIconComponent/StatusIconComponent.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import {
+  StatusError,
+  StatusOK,
+  StatusWarning,
+} from '@backstage/core-components';
+import { BuildStatus } from '../../api';
+
+const STATUS_ICONS: { [key in BuildStatus]: JSX.Element } = {
+  succeeded: <StatusOK />,
+  failed: <StatusError />,
+  stopped: <StatusWarning />,
+};
+
+interface StatusIconProps {
+  buildStatus: BuildStatus;
+}
+
+export const StatusIconComponent = ({ buildStatus }: StatusIconProps) =>
+  STATUS_ICONS[buildStatus];
diff --git a/plugins/xcmetrics/src/components/StatusIconComponent/index.ts b/plugins/xcmetrics/src/components/StatusIconComponent/index.ts
new file mode 100644
index 0000000000..b69415bd78
--- /dev/null
+++ b/plugins/xcmetrics/src/components/StatusIconComponent/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { StatusIconComponent } from './StatusIconComponent';
diff --git a/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.test.tsx b/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.test.tsx
index 2ce634dc11..b0d81757a9 100644
--- a/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.test.tsx
+++ b/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.test.tsx
@@ -18,6 +18,7 @@ import { renderInTestApp } from '@backstage/test-utils';
 import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 import { XcmetricsLayout } from './XcmetricsLayout';
 import { xcmetricsApiRef } from '../../api';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('../../api/XcmetricsClient');
 const client = require('../../api/XcmetricsClient');
@@ -44,5 +45,7 @@ describe('XcmetricsLayout', () => {
     expect(rendered.getByText('Builds')).toBeInTheDocument();
 
     expect(rendered.getByText('OverviewComponent')).toBeInTheDocument();
+    userEvent.click(rendered.getByText('Builds'));
+    expect(await rendered.findByText('BuildListComponent')).toBeInTheDocument();
   });
 });
diff --git a/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.tsx b/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.tsx
index 48faaaa3a6..33e9d64c6b 100644
--- a/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.tsx
+++ b/plugins/xcmetrics/src/components/XcmetricsLayout/XcmetricsLayout.tsx
@@ -24,7 +24,7 @@ import {
 import { OverviewComponent } from '../OverviewComponent';
 import { buildsRouteRef, rootRouteRef } from '../../routes';
 import { RouteRef, SubRouteRef } from '@backstage/core-plugin-api';
-import { BuildListComponent } from '../BuildListComponent';
+import { BuildsPage } from '../BuildsPage';
 
 export interface TabConfig {
   routeRef: RouteRef | SubRouteRef;
@@ -41,7 +41,7 @@ const TABS: TabConfig[] = [
   {
     routeRef: buildsRouteRef,
     title: 'Builds',
-    component: <BuildListComponent />,
+    component: <BuildsPage />,
   },
 ];
 
diff --git a/plugins/xcmetrics/src/utils/format.ts b/plugins/xcmetrics/src/utils/format.ts
index 8c6dadb768..e21e95a7b2 100644
--- a/plugins/xcmetrics/src/utils/format.ts
+++ b/plugins/xcmetrics/src/utils/format.ts
@@ -18,8 +18,12 @@ import { BuildStatus } from '../api';
 
 export const formatDuration = (seconds: number) => {
   const duration = Duration.fromObject({
-    seconds: Math.round(seconds),
-  }).shiftTo('hours', 'minutes', 'seconds');
+    seconds: seconds,
+  }).shiftTo('hours', 'minutes', 'seconds', 'milliseconds');
+
+  if (duration.hours + duration.minutes + duration.seconds === 0) {
+    return `${Math.round(duration.milliseconds)} ms`;
+  }
 
   const h = duration.hours ? `${duration.hours} h` : '';
   const m = duration.minutes ? `${duration.minutes} m` : '';
@@ -28,6 +32,12 @@ export const formatDuration = (seconds: number) => {
   return `${h} ${m} ${s}`;
 };
 
+export const formatSecondsInterval = ([start, end]: [number, number]) => {
+  return `${Math.round(start * 100) / 100} s - ${
+    Math.round(end * 100) / 100
+  } s`;
+};
+
 export const formatTime = (timestamp: string) => {
   return DateTime.fromISO(timestamp).toLocaleString(
     DateTime.DATETIME_SHORT_WITH_SECONDS,