From 0e688da06ea85c3b86c0a82e73027194845b3f90 Mon Sep 17 00:00:00 2001
From: dalthecow <dalcowboiz@gmail.com>
Date: Mon, 19 May 2025 12:16:44 -0400
Subject: [PATCH 1/5] implement guidellm ui app

---
 ui/.eslintrc.json                             |   11 +-
 ui/__mocks__/@nivo/bar.tsx                    |    2 +
 ui/__mocks__/@nivo/core.tsx                   |    1 +
 ui/__mocks__/@nivo/line.tsx                   |    1 +
 ui/jest.config.js                             |    3 +
 ui/jest.setup.ts                              |   16 +
 ui/package-lock.json                          |  616 ++++++++-
 ui/package.json                               |    7 +
 ui/src/app/layout.tsx                         |   24 +
 ui/src/app/not-found.tsx                      |    4 +
 ui/src/app/page.tsx                           |   23 +-
 .../lib/components/Badge/Badge.component.tsx  |    8 +
 .../lib/components/Badge/Badge.interfaces.ts  |    3 +
 ui/src/lib/components/Badge/Badge.styles.tsx  |   11 +
 ui/src/lib/components/Badge/index.tsx         |    2 +
 .../BlockHeader/BlockHeader.component.tsx     |   26 +
 .../BlockHeader/BlockHeader.interfaces.ts     |    4 +
 .../BlockHeader/BlockHeader.styles.tsx        |    8 +
 ui/src/lib/components/BlockHeader/index.tsx   |    2 +
 .../Carousel/Carousel.component.tsx           |   48 +
 .../Carousel/Carousel.interfaces.ts           |    4 +
 .../components/Carousel/Carousel.styles.tsx   |   11 +
 ui/src/lib/components/Carousel/index.tsx      |    2 +
 .../Charts/Combined/Combined.component.tsx    |  153 +++
 .../Charts/Combined/Combined.interfaces.ts    |   11 +
 .../CustomBars/CustomBars.interfaces.ts       |    7 +
 .../Combined/components/CustomBars/index.tsx  |   50 +
 .../CustomGrid/CustomGrid.interfaces.ts       |   10 +
 .../Combined/components/CustomGrid/index.tsx  |   72 +
 .../CustomLegendLayer.interfaces.ts           |    6 +
 .../components/CustomLegendLayer/index.tsx    |   42 +
 .../CustomTick/CustomTick.interfaces.ts       |    8 +
 .../Combined/components/CustomTick/index.tsx  |   58 +
 .../DottedLines/DottedLines.interfaces.ts     |    9 +
 .../Combined/components/DottedLines/index.tsx |   33 +
 .../lib/components/Charts/Combined/index.tsx  |    2 +
 .../DashedLine/DashedLine.component.tsx       |  128 ++
 .../DashedLine/DashedLine.interfaces.ts       |   16 +
 .../CustomLegendLayer.interfaces.ts           |    5 +
 .../components/CustomLegendLayer/index.tsx    |   62 +
 .../DashedSolidLine.interfaces.ts             |    7 +
 .../components/DashedSolidLine/index.tsx      |   76 ++
 .../components/Charts/DashedLine/helpers.ts   |   76 ++
 .../components/Charts/DashedLine/index.tsx    |    2 +
 .../MetricLine/MetricLine.component.tsx       |  123 ++
 .../Charts/MetricLine/MetricLine.interface.ts |   15 +
 .../CustomAxes/CustomAxes.interfaces.ts       |    6 +
 .../components/CustomAxes/index.tsx           |   23 +
 .../CustomGrid/CustomGrid.interfaces.ts       |   10 +
 .../components/CustomGrid/index.tsx           |   72 +
 .../CustomTick/CustomTick.interfaces.ts       |    8 +
 .../components/CustomTick/index.tsx           |   65 +
 .../ThresholdBar/ThresholdBar.interfaces.ts   |    9 +
 .../components/ThresholdBar/index.tsx         |   53 +
 .../components/Charts/MetricLine/index.tsx    |    3 +
 .../MiniCombined/MiniCombined.component.tsx   |  131 ++
 .../MiniCombined/MiniCombined.interfaces.ts   |   15 +
 .../components/ContainerSizeWrapper/index.tsx |   39 +
 .../CustomBars/CustomBars.interfaces.ts       |    7 +
 .../components/CustomBars/index.tsx           |   87 ++
 .../CustomGrid/CustomGrid.interfaces.ts       |   10 +
 .../components/CustomGrid/index.tsx           |   72 +
 .../CustomTick/CustomTick.interfaces.ts       |    8 +
 .../components/CustomTick/index.tsx           |   60 +
 .../DottedLines/DottedLines.interfaces.ts     |    9 +
 .../components/DottedLines/index.tsx          |   31 +
 .../components/Charts/MiniCombined/index.tsx  |    2 +
 .../components/Charts/common/interfaces.ts    |   34 +
 .../Charts/common/useChartScales.ts           |   50 +
 .../Charts/common/useLineColors.tsx           |   14 +
 .../DataPanel/DataPanel.component.tsx         |   26 +
 .../DataPanel/DataPanel.interfaces.ts         |    7 +
 .../components/DataPanel/DataPanel.styles.tsx |   35 +
 ui/src/lib/components/DataPanel/index.tsx     |    2 +
 .../DistributionPercentiles.component.tsx     |   22 +
 .../DistributionPercentiles.interfaces.tsx    |   10 +
 .../DistributionPercentiles.styles.tsx        |    8 +
 .../DistributionPercentiles/index.tsx         |    5 +
 .../GraphTitle/GraphTitle.component.tsx       |   12 +
 .../GraphTitle/GraphTitle.interfaces.ts       |    3 +
 ui/src/lib/components/GraphTitle/index.tsx    |    2 +
 .../lib/components/Input/Input.component.tsx  |   60 +
 .../lib/components/Input/Input.interfaces.ts  |   23 +
 ui/src/lib/components/Input/Input.styles.tsx  |   60 +
 ui/src/lib/components/Input/index.tsx         |    2 +
 .../MeanMetricSummary.component.tsx           |   22 +
 .../MeanMetricSummary.interfaces.tsx          |    5 +
 .../components/MeanMetricSummary/index.tsx    |    2 +
 .../MetricsContainer.component.tsx            |   48 +
 .../MetricsContainer.interfaces.ts            |    8 +
 .../MetricsContainer.styles.tsx               |   33 +
 .../lib/components/MetricsContainer/index.tsx |    2 +
 .../MetricSummary.interfaces.ts               |    3 +
 .../MetricsSummary.component.tsx              |  303 +++++
 .../MetricsSummary/MetricsSummary.styles.tsx  |  213 +++
 .../MetricValue/MetricValue.component.tsx     |   27 +
 .../MetricValue/MetricValue.interfaces.ts     |    8 +
 .../components/MetricValue/index.tsx          |    2 +
 .../lib/components/MetricsSummary/index.tsx   |    1 +
 .../components/MetricsSummary/useSummary.ts   |  118 ++
 .../PageHeader/PageHeader.component.tsx       |  101 ++
 .../PageHeader/PageHeader.interfaces.ts       |    3 +
 .../PageHeader/PageHeader.styles.tsx          |   19 +
 ui/src/lib/components/PageHeader/index.tsx    |    1 +
 .../RequestOverTime.component.tsx             |   53 +
 .../RequestOverTime.interfaces.ts             |    9 +
 .../lib/components/RequestOverTime/index.tsx  |    2 +
 .../RowContainer/RowContainer.component.tsx   |   18 +
 .../RowContainer/RowContainer.interfaces.tsx  |    6 +
 ui/src/lib/components/RowContainer/index.tsx  |    2 +
 .../components/Section/Section.component.tsx  |   19 +
 .../components/Section/Section.interfaces.ts  |    4 +
 .../lib/components/Section/Section.styles.tsx |   10 +
 ui/src/lib/components/Section/index.tsx       |    2 +
 .../SectionContainer.component.tsx            |   65 +
 .../SectionContainer.interfaces.ts            |    5 +
 .../SectionContainer.styles.tsx               |   21 +
 .../lib/components/SectionContainer/index.tsx |    2 +
 .../SpecBadge/SpecBadge.component.tsx         |   30 +
 .../SpecBadge/SpecBadge.interfaces.ts         |   12 +
 .../components/SpecBadge/SpecBadge.styles.tsx |   21 +
 ui/src/lib/components/SpecBadge/index.tsx     |    2 +
 .../TokenLength/TokenLength.component.tsx     |   47 +
 .../TokenLength/TokenLength.interfaces.ts     |    6 +
 ui/src/lib/components/TokenLength/index.tsx   |    2 +
 .../WorkloadDetails.component.tsx             |  106 ++
 .../lib/components/WorkloadDetails/index.tsx  |    1 +
 .../WorkloadMetricSummary.interfaces.tsx      |    0
 .../WorkloadMetrics.component.tsx             |  127 ++
 .../WorkloadMetrics.styles.tsx                |    6 +
 .../lib/components/WorkloadMetrics/index.tsx  |    1 +
 ui/src/lib/hooks/useColor.ts                  |   19 +
 ui/src/lib/store/benchmarksWindowData.ts      | 1154 +++++++++++++++++
 ui/src/lib/store/index.ts                     |   33 +-
 ui/src/lib/store/mockData.ts                  |  191 +++
 ui/src/lib/store/runInfoWindowData.ts         |   11 +
 .../store/slices/benchmarks/benchmarks.api.ts |   82 ++
 .../slices/benchmarks/benchmarks.constants.ts |    7 +
 .../benchmarks/benchmarks.interfaces.ts       |   44 +
 .../slices/benchmarks/benchmarks.selectors.ts |  149 +++
 .../slices/benchmarks/benchmarks.slice.ts     |   31 +
 ui/src/lib/store/slices/benchmarks/index.ts   |    4 +
 .../store/slices/metrics/metrics.constants.ts |   10 +
 .../slices/metrics/metrics.interfaces.ts      |   13 +
 .../store/slices/metrics/metrics.selectors.ts |    3 +
 .../lib/store/slices/metrics/metrics.slice.ts |   20 +
 ui/src/lib/store/slices/runInfo/index.ts      |    4 +
 .../lib/store/slices/runInfo/runInfo.api.ts   |   21 +
 .../store/slices/runInfo/runInfo.constants.ts |    3 +
 .../slices/runInfo/runInfo.interfaces.ts      |   13 +
 .../store/slices/runInfo/runInfo.selectors.ts |    3 +
 .../lib/store/slices/runInfo/runInfo.slice.ts |   31 +
 ui/src/lib/store/slices/slo/slo.constants.ts  |   22 +
 ui/src/lib/store/slices/slo/slo.interfaces.ts |   18 +
 ui/src/lib/store/slices/slo/slo.selectors.ts  |    3 +
 ui/src/lib/store/slices/slo/slo.slice.ts      |   44 +
 .../lib/store/slices/workloadDetails/index.ts |    4 +
 .../workloadDetails/workloadDetails.api.ts    |   21 +
 .../workloadDetails.constants.ts              |   58 +
 .../workloadDetails.interfaces.ts             |   49 +
 .../workloadDetails.selectors.ts              |   71 +
 .../workloadDetails/workloadDetails.slice.ts  |   34 +
 ui/src/lib/store/workloadDetailsWindowData.ts |  167 +++
 ui/src/lib/utils/helpers.ts                   |   67 +
 ui/src/lib/utils/interpolation.ts             |   67 +
 ui/src/tests/test.helper.tsx                  |   17 +
 .../Charts/DashedLine/helpers.test.ts         |   86 ++
 ui/src/tests/unit/store/slices/slo.test.tsx   |   19 +
 ui/src/tests/unit/utils/interpolation.test.ts |   50 +
 ui/src/types/declaration.d.ts                 |   11 +
 170 files changed, 7029 insertions(+), 26 deletions(-)
 create mode 100644 ui/__mocks__/@nivo/bar.tsx
 create mode 100644 ui/__mocks__/@nivo/core.tsx
 create mode 100644 ui/__mocks__/@nivo/line.tsx
 create mode 100644 ui/src/app/not-found.tsx
 create mode 100644 ui/src/lib/components/Badge/Badge.component.tsx
 create mode 100644 ui/src/lib/components/Badge/Badge.interfaces.ts
 create mode 100644 ui/src/lib/components/Badge/Badge.styles.tsx
 create mode 100644 ui/src/lib/components/Badge/index.tsx
 create mode 100644 ui/src/lib/components/BlockHeader/BlockHeader.component.tsx
 create mode 100644 ui/src/lib/components/BlockHeader/BlockHeader.interfaces.ts
 create mode 100644 ui/src/lib/components/BlockHeader/BlockHeader.styles.tsx
 create mode 100644 ui/src/lib/components/BlockHeader/index.tsx
 create mode 100644 ui/src/lib/components/Carousel/Carousel.component.tsx
 create mode 100644 ui/src/lib/components/Carousel/Carousel.interfaces.ts
 create mode 100644 ui/src/lib/components/Carousel/Carousel.styles.tsx
 create mode 100644 ui/src/lib/components/Carousel/index.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/Combined.component.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/Combined.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomBars/CustomBars.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomBars/index.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomGrid/CustomGrid.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomGrid/index.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/index.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomTick/CustomTick.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/Combined/components/CustomTick/index.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/components/DottedLines/DottedLines.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/Combined/components/DottedLines/index.tsx
 create mode 100644 ui/src/lib/components/Charts/Combined/index.tsx
 create mode 100644 ui/src/lib/components/Charts/DashedLine/DashedLine.component.tsx
 create mode 100644 ui/src/lib/components/Charts/DashedLine/DashedLine.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/index.tsx
 create mode 100644 ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/DashedSolidLine.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/index.tsx
 create mode 100644 ui/src/lib/components/Charts/DashedLine/helpers.ts
 create mode 100644 ui/src/lib/components/Charts/DashedLine/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MetricLine/MetricLine.component.tsx
 create mode 100644 ui/src/lib/components/Charts/MetricLine/MetricLine.interface.ts
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/CustomAxes/CustomAxes.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/CustomAxes/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/CustomGrid/CustomGrid.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/CustomGrid/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/CustomTick/CustomTick.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/CustomTick/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/ThresholdBar.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MetricLine/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/MiniCombined.component.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/MiniCombined.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/ContainerSizeWrapper/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/CustomBars/CustomBars.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/CustomBars/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/CustomGrid.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/CustomTick/CustomTick.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/CustomTick/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/DottedLines/DottedLines.interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/components/DottedLines/index.tsx
 create mode 100644 ui/src/lib/components/Charts/MiniCombined/index.tsx
 create mode 100644 ui/src/lib/components/Charts/common/interfaces.ts
 create mode 100644 ui/src/lib/components/Charts/common/useChartScales.ts
 create mode 100644 ui/src/lib/components/Charts/common/useLineColors.tsx
 create mode 100644 ui/src/lib/components/DataPanel/DataPanel.component.tsx
 create mode 100644 ui/src/lib/components/DataPanel/DataPanel.interfaces.ts
 create mode 100644 ui/src/lib/components/DataPanel/DataPanel.styles.tsx
 create mode 100644 ui/src/lib/components/DataPanel/index.tsx
 create mode 100644 ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.component.tsx
 create mode 100644 ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.interfaces.tsx
 create mode 100644 ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.styles.tsx
 create mode 100644 ui/src/lib/components/DistributionPercentiles/index.tsx
 create mode 100644 ui/src/lib/components/GraphTitle/GraphTitle.component.tsx
 create mode 100644 ui/src/lib/components/GraphTitle/GraphTitle.interfaces.ts
 create mode 100644 ui/src/lib/components/GraphTitle/index.tsx
 create mode 100644 ui/src/lib/components/Input/Input.component.tsx
 create mode 100644 ui/src/lib/components/Input/Input.interfaces.ts
 create mode 100644 ui/src/lib/components/Input/Input.styles.tsx
 create mode 100644 ui/src/lib/components/Input/index.tsx
 create mode 100644 ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.component.tsx
 create mode 100644 ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.interfaces.tsx
 create mode 100644 ui/src/lib/components/MeanMetricSummary/index.tsx
 create mode 100644 ui/src/lib/components/MetricsContainer/MetricsContainer.component.tsx
 create mode 100644 ui/src/lib/components/MetricsContainer/MetricsContainer.interfaces.ts
 create mode 100644 ui/src/lib/components/MetricsContainer/MetricsContainer.styles.tsx
 create mode 100644 ui/src/lib/components/MetricsContainer/index.tsx
 create mode 100644 ui/src/lib/components/MetricsSummary/MetricSummary.interfaces.ts
 create mode 100644 ui/src/lib/components/MetricsSummary/MetricsSummary.component.tsx
 create mode 100644 ui/src/lib/components/MetricsSummary/MetricsSummary.styles.tsx
 create mode 100644 ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.component.tsx
 create mode 100644 ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.interfaces.ts
 create mode 100644 ui/src/lib/components/MetricsSummary/components/MetricValue/index.tsx
 create mode 100644 ui/src/lib/components/MetricsSummary/index.tsx
 create mode 100644 ui/src/lib/components/MetricsSummary/useSummary.ts
 create mode 100644 ui/src/lib/components/PageHeader/PageHeader.component.tsx
 create mode 100644 ui/src/lib/components/PageHeader/PageHeader.interfaces.ts
 create mode 100644 ui/src/lib/components/PageHeader/PageHeader.styles.tsx
 create mode 100644 ui/src/lib/components/PageHeader/index.tsx
 create mode 100644 ui/src/lib/components/RequestOverTime/RequestOverTime.component.tsx
 create mode 100644 ui/src/lib/components/RequestOverTime/RequestOverTime.interfaces.ts
 create mode 100644 ui/src/lib/components/RequestOverTime/index.tsx
 create mode 100644 ui/src/lib/components/RowContainer/RowContainer.component.tsx
 create mode 100644 ui/src/lib/components/RowContainer/RowContainer.interfaces.tsx
 create mode 100644 ui/src/lib/components/RowContainer/index.tsx
 create mode 100644 ui/src/lib/components/Section/Section.component.tsx
 create mode 100644 ui/src/lib/components/Section/Section.interfaces.ts
 create mode 100644 ui/src/lib/components/Section/Section.styles.tsx
 create mode 100644 ui/src/lib/components/Section/index.tsx
 create mode 100644 ui/src/lib/components/SectionContainer/SectionContainer.component.tsx
 create mode 100644 ui/src/lib/components/SectionContainer/SectionContainer.interfaces.ts
 create mode 100644 ui/src/lib/components/SectionContainer/SectionContainer.styles.tsx
 create mode 100644 ui/src/lib/components/SectionContainer/index.tsx
 create mode 100644 ui/src/lib/components/SpecBadge/SpecBadge.component.tsx
 create mode 100644 ui/src/lib/components/SpecBadge/SpecBadge.interfaces.ts
 create mode 100644 ui/src/lib/components/SpecBadge/SpecBadge.styles.tsx
 create mode 100644 ui/src/lib/components/SpecBadge/index.tsx
 create mode 100644 ui/src/lib/components/TokenLength/TokenLength.component.tsx
 create mode 100644 ui/src/lib/components/TokenLength/TokenLength.interfaces.ts
 create mode 100644 ui/src/lib/components/TokenLength/index.tsx
 create mode 100644 ui/src/lib/components/WorkloadDetails/WorkloadDetails.component.tsx
 create mode 100644 ui/src/lib/components/WorkloadDetails/index.tsx
 create mode 100644 ui/src/lib/components/WorkloadMetrics/WorkloadMetricSummary.interfaces.tsx
 create mode 100644 ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.component.tsx
 create mode 100644 ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.styles.tsx
 create mode 100644 ui/src/lib/components/WorkloadMetrics/index.tsx
 create mode 100644 ui/src/lib/hooks/useColor.ts
 create mode 100644 ui/src/lib/store/benchmarksWindowData.ts
 create mode 100644 ui/src/lib/store/mockData.ts
 create mode 100644 ui/src/lib/store/runInfoWindowData.ts
 create mode 100644 ui/src/lib/store/slices/benchmarks/benchmarks.api.ts
 create mode 100644 ui/src/lib/store/slices/benchmarks/benchmarks.constants.ts
 create mode 100644 ui/src/lib/store/slices/benchmarks/benchmarks.interfaces.ts
 create mode 100644 ui/src/lib/store/slices/benchmarks/benchmarks.selectors.ts
 create mode 100644 ui/src/lib/store/slices/benchmarks/benchmarks.slice.ts
 create mode 100644 ui/src/lib/store/slices/benchmarks/index.ts
 create mode 100644 ui/src/lib/store/slices/metrics/metrics.constants.ts
 create mode 100644 ui/src/lib/store/slices/metrics/metrics.interfaces.ts
 create mode 100644 ui/src/lib/store/slices/metrics/metrics.selectors.ts
 create mode 100644 ui/src/lib/store/slices/metrics/metrics.slice.ts
 create mode 100644 ui/src/lib/store/slices/runInfo/index.ts
 create mode 100644 ui/src/lib/store/slices/runInfo/runInfo.api.ts
 create mode 100644 ui/src/lib/store/slices/runInfo/runInfo.constants.ts
 create mode 100644 ui/src/lib/store/slices/runInfo/runInfo.interfaces.ts
 create mode 100644 ui/src/lib/store/slices/runInfo/runInfo.selectors.ts
 create mode 100644 ui/src/lib/store/slices/runInfo/runInfo.slice.ts
 create mode 100644 ui/src/lib/store/slices/slo/slo.constants.ts
 create mode 100644 ui/src/lib/store/slices/slo/slo.interfaces.ts
 create mode 100644 ui/src/lib/store/slices/slo/slo.selectors.ts
 create mode 100644 ui/src/lib/store/slices/slo/slo.slice.ts
 create mode 100644 ui/src/lib/store/slices/workloadDetails/index.ts
 create mode 100644 ui/src/lib/store/slices/workloadDetails/workloadDetails.api.ts
 create mode 100644 ui/src/lib/store/slices/workloadDetails/workloadDetails.constants.ts
 create mode 100644 ui/src/lib/store/slices/workloadDetails/workloadDetails.interfaces.ts
 create mode 100644 ui/src/lib/store/slices/workloadDetails/workloadDetails.selectors.ts
 create mode 100644 ui/src/lib/store/slices/workloadDetails/workloadDetails.slice.ts
 create mode 100644 ui/src/lib/store/workloadDetailsWindowData.ts
 create mode 100644 ui/src/lib/utils/helpers.ts
 create mode 100644 ui/src/lib/utils/interpolation.ts
 create mode 100644 ui/src/tests/test.helper.tsx
 create mode 100644 ui/src/tests/unit/components/Charts/DashedLine/helpers.test.ts
 create mode 100644 ui/src/tests/unit/store/slices/slo.test.tsx
 create mode 100644 ui/src/tests/unit/utils/interpolation.test.ts
 create mode 100644 ui/src/types/declaration.d.ts

diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
index e1b46682..c6e3094f 100644
--- a/ui/.eslintrc.json
+++ b/ui/.eslintrc.json
@@ -76,6 +76,15 @@
         "peerDependencies": false
       }
     ],
-    "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }]
+    "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn", // or "error"
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
   }
 }
diff --git a/ui/__mocks__/@nivo/bar.tsx b/ui/__mocks__/@nivo/bar.tsx
new file mode 100644
index 00000000..a99b6dec
--- /dev/null
+++ b/ui/__mocks__/@nivo/bar.tsx
@@ -0,0 +1,2 @@
+export const ResponsiveBar = () => null;
+export const BarCustomLayerProps = () => null;
diff --git a/ui/__mocks__/@nivo/core.tsx b/ui/__mocks__/@nivo/core.tsx
new file mode 100644
index 00000000..66e2da8a
--- /dev/null
+++ b/ui/__mocks__/@nivo/core.tsx
@@ -0,0 +1 @@
+export const Point = () => null;
diff --git a/ui/__mocks__/@nivo/line.tsx b/ui/__mocks__/@nivo/line.tsx
new file mode 100644
index 00000000..bf985ef3
--- /dev/null
+++ b/ui/__mocks__/@nivo/line.tsx
@@ -0,0 +1 @@
+export const ResponsiveLine = () => null;
diff --git a/ui/jest.config.js b/ui/jest.config.js
index f05bde8b..7d407467 100644
--- a/ui/jest.config.js
+++ b/ui/jest.config.js
@@ -22,6 +22,9 @@ const customJestConfig = {
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@nivo|d3|d3-.*|internmap|delaunator|robust-predicates)/)',
+  ],
 };
 
 module.exports = createJestConfig(customJestConfig);
diff --git a/ui/jest.setup.ts b/ui/jest.setup.ts
index 7b0828bf..09b64885 100644
--- a/ui/jest.setup.ts
+++ b/ui/jest.setup.ts
@@ -1 +1,17 @@
 import '@testing-library/jest-dom';
+
+jest.mock('@nivo/bar');
+jest.mock('@nivo/line');
+jest.mock('@nivo/core');
+
+jest.mock('next/dynamic', () => ({
+  __esModule: true,
+  default: (...props: any[]) => {
+    const dynamicModule = jest.requireActual('next/dynamic');
+    const dynamicActualComp = dynamicModule.default;
+    const RequiredComponent = dynamicActualComp(props[0]);
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    RequiredComponent.preload ? RequiredComponent.preload() : RequiredComponent.render.preload();
+    return RequiredComponent;
+  },
+}));
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 969d7647..e90e36f3 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13,10 +13,17 @@
         "@emotion/styled": "^11.14.0",
         "@mui/material": "^5.11.7",
         "@mui/material-nextjs": "^5.16.6",
+        "@nivo/bar": "^0.88.0",
+        "@nivo/core": "^0.88.0",
+        "@nivo/line": "^0.88.0",
+        "@nivo/scales": "^0.88.0",
+        "@nivo/tooltip": "^0.88.0",
         "@reduxjs/toolkit": "^2.2.7",
+        "filesize": "^10.1.6",
         "next": "14.2.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-material-ui-carousel": "^3.4.2",
         "react-redux": "^9.1.2"
       },
       "devDependencies": {
@@ -3018,6 +3025,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.17.1.tgz",
+      "integrity": "sha512-CN86LocjkunFGG0yPlO4bgqHkNGgaEOEc3X/jG5Bzm401qYw79/SaLrofA7yAKCCXAGdIGnLoMHohc3+ubs95A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.17.1.tgz",
@@ -3460,6 +3493,198 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nivo/annotations": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.88.0.tgz",
+      "integrity": "sha512-NXE+1oIUn+EGWMQpnpeRMLgi2wyuzhGDoJQY4OUHissCUiNotid2oNQ/PXJwN0toiu+/j9SyhzI32xr70OPi7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.88.0",
+        "@nivo/core": "0.88.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/axes": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.88.0.tgz",
+      "integrity": "sha512-jF7aIxzTNayV5cI1J/b9Q1FfpMBxTXGk3OwSigXMSfYWlliskDn2u0qGRLiYhuXFdQAWIp4oXsO1GcAQ0eRVdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.88.0",
+        "@nivo/scales": "0.88.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2",
+        "@types/d3-format": "^1.4.1",
+        "@types/d3-time-format": "^2.3.1",
+        "d3-format": "^1.4.4",
+        "d3-time-format": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/bar": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.88.0.tgz",
+      "integrity": "sha512-wckwuHWeCikxGvvdRfGL+dVFsUD9uHk1r9s7bWUfOD+p8BWhxtYqfXpHolEfgGg3UyPaHtpGA7P4zgE5vgo7gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/annotations": "0.88.0",
+        "@nivo/axes": "0.88.0",
+        "@nivo/colors": "0.88.0",
+        "@nivo/core": "0.88.0",
+        "@nivo/legends": "0.88.0",
+        "@nivo/scales": "0.88.0",
+        "@nivo/tooltip": "0.88.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-shape": "^3.1.6",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.2.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/colors": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.88.0.tgz",
+      "integrity": "sha512-IZ+leYIqAlo7dyLHmsQwujanfRgXyoQ5H7PU3RWLEn1PP0zxDKLgEjFEDADpDauuslh2Tx0L81GNkWR6QSP0Mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.88.0",
+        "@types/d3-color": "^3.0.0",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "@types/prop-types": "^15.7.2",
+        "d3-color": "^3.1.0",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/core": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.88.0.tgz",
+      "integrity": "sha512-XjUkA5MmwjLP38bdrJwn36Gj7T5SYMKD55LYQp/1nIJPdxqJ38dUfE4XyBDfIEgfP6yrHOihw3C63cUdnUBoiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/tooltip": "0.88.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2",
+        "@types/d3-shape": "^3.1.6",
+        "d3-color": "^3.1.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nivo/donate"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/legends": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.88.0.tgz",
+      "integrity": "sha512-d4DF9pHbD8LmGJlp/Gp1cF4e8y2wfQTcw3jVhbZj9zkb7ZWB7JfeF60VHRfbXNux9bjQ9U78/SssQqueVDPEmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.88.0",
+        "@nivo/core": "0.88.0",
+        "@types/d3-scale": "^4.0.8",
+        "d3-scale": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/line": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.88.0.tgz",
+      "integrity": "sha512-hFTyZ3BdAZvq2HwdwMj2SJGUeodjEW+7DLtFMIIoVIxmjZlAs3z533HcJ9cJd3it928fDm8SF/rgHs0TztYf9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/annotations": "0.88.0",
+        "@nivo/axes": "0.88.0",
+        "@nivo/colors": "0.88.0",
+        "@nivo/core": "0.88.0",
+        "@nivo/legends": "0.88.0",
+        "@nivo/scales": "0.88.0",
+        "@nivo/tooltip": "0.88.0",
+        "@nivo/voronoi": "0.88.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2",
+        "d3-shape": "^3.2.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/scales": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.88.0.tgz",
+      "integrity": "sha512-HbpxkQp6tHCltZ1yDGeqdLcaJl5ze54NPjurfGtx/Uq+H5IQoBd4Tln49bUar5CsFAMsXw8yF1HQvASr7I1SIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-time": "^1.1.1",
+        "@types/d3-time-format": "^3.0.0",
+        "d3-scale": "^4.0.2",
+        "d3-time": "^1.0.11",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/@nivo/scales/node_modules/@types/d3-time-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz",
+      "integrity": "sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg==",
+      "license": "MIT"
+    },
+    "node_modules/@nivo/tooltip": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.88.0.tgz",
+      "integrity": "sha512-iEjVfQA8gumAzg/yUinjTwswygCkE5Iwuo8opwnrbpNIqMrleBV+EAKIgB0PrzepIoW8CFG/SJhoiRfbU8jhOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.88.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
+    "node_modules/@nivo/voronoi": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/@nivo/voronoi/-/voronoi-0.88.0.tgz",
+      "integrity": "sha512-MyiNLvODthFoMjQ7Wjp693nogbTmVEx8Yn/7QkJhyPQbFyyA37TF/D1a/ox4h2OslXtP6K9QFN+42gB/zu7ixw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.88.0",
+        "@nivo/tooltip": "0.88.0",
+        "@types/d3-delaunay": "^6.0.4",
+        "@types/d3-scale": "^4.0.8",
+        "d3-delaunay": "^6.0.4",
+        "d3-scale": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">= 16.14.0 < 19.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3542,6 +3767,78 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
+      "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
@@ -4095,6 +4392,66 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz",
+      "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz",
+      "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==",
+      "license": "MIT"
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -6270,6 +6627,134 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6458,6 +6943,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -8144,6 +8638,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/filesize": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -8274,6 +8777,52 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz",
+      "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "popmotion": "9.3.6",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0",
+        "react-dom": ">=16.8 || ^17.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/framesync": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz",
+      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -8716,6 +9265,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8975,6 +9530,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -11187,7 +11751,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -12185,6 +12748,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/popmotion": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz",
+      "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -12484,6 +13059,29 @@
       "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
       "license": "MIT"
     },
+    "node_modules/react-material-ui-carousel": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
+      "integrity": "sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
+        "@mui/icons-material": "^5.4.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "framer-motion": "^4.1.17"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@mui/icons-material": "^5.0.0",
+        "@mui/material": "^5.0.0",
+        "@mui/system": "^5.0.0",
+        "react": "^17.0.1 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -12867,6 +13465,12 @@
         "node": "*"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -13569,6 +14173,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz",
+      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
+      "license": "MIT",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index ddc93d1a..37a86be1 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -18,10 +18,17 @@
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^5.11.7",
     "@mui/material-nextjs": "^5.16.6",
+    "@nivo/bar": "^0.88.0",
+    "@nivo/core": "^0.88.0",
+    "@nivo/line": "^0.88.0",
+    "@nivo/scales": "^0.88.0",
+    "@nivo/tooltip": "^0.88.0",
     "@reduxjs/toolkit": "^2.2.7",
+    "filesize": "^10.1.6",
     "next": "14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-material-ui-carousel": "^3.4.2",
     "react-redux": "^9.1.2"
   },
   "devDependencies": {
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
index 0e0af570..213dd7eb 100644
--- a/ui/src/app/layout.tsx
+++ b/ui/src/app/layout.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
 
+import { benchmarksScript } from '@/lib/store/benchmarksWindowData';
+import { runInfoScript } from '@/lib/store/runInfoWindowData';
+import { workloadDetailsScript } from '@/lib/store/workloadDetailsWindowData';
+
 import './globals.css';
 
 export default function RootLayout({
@@ -21,6 +25,26 @@ export default function RootLayout({
         <meta name="title" content="GuideLLM" />
         <link rel="manifest" href={`${assetPrefix}/manifest.json`} />
         <title>Guide LLM</title>
+        {/* <script
+          dangerouslySetInnerHTML={{
+            __html: 'window.run_info = {}; window.workload_details = {}; window.benchmarks = {};',
+          }}
+        /> */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: runInfoScript,
+          }}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: workloadDetailsScript,
+          }}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: benchmarksScript,
+          }}
+        />
       </head>
       <body>{children}</body>
     </html>
diff --git a/ui/src/app/not-found.tsx b/ui/src/app/not-found.tsx
new file mode 100644
index 00000000..60b5a096
--- /dev/null
+++ b/ui/src/app/not-found.tsx
@@ -0,0 +1,4 @@
+'use client';
+export default function Custom404() {
+  return <h1>404 - Page Not Found</h1>;
+}
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index 13102b0b..21c53304 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -1,16 +1,19 @@
 'use client';
-import { Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 import Script from 'next/script';
 import React, { ReactNode } from 'react';
 
 import { muiThemeV3Dark } from '@/app/theme';
+import { MetricsSummary } from '@/lib/components/MetricsSummary';
 import { PageFooter } from '@/lib/components/PageFooter';
-
-import { FullPageWithHeaderAndFooterLayout } from '../lib/layouts/FullPageWithHeaderAndFooterLayout';
-import { ContentCenterer } from '../lib/layouts/helpers/ContentCenterer';
-import { ReduxProvider } from '../lib/store/provider';
+import { PageHeader } from '@/lib/components/PageHeader';
+import { WorkloadDetails } from '@/lib/components/WorkloadDetails';
+import { WorkloadMetrics } from '@/lib/components/WorkloadMetrics';
+import { FullPageWithHeaderAndFooterLayout } from '@/lib/layouts/FullPageWithHeaderAndFooterLayout';
+import { ContentCenterer } from '@/lib/layouts/helpers/ContentCenterer';
+import { ReduxProvider } from '@/lib/store/provider';
 
 interface MyProps {
   children?: ReactNode;
@@ -25,9 +28,7 @@ const Content = () => {
 
   const header = (
     <ContentCenterer>
-      <Typography color="white" variant="h1">
-        Header
-      </Typography>
+      <PageHeader />
     </ContentCenterer>
   );
   const footer = (
@@ -37,9 +38,9 @@ const Content = () => {
   );
   const body = (
     <ContentCenterer>
-      <Typography color="white" variant="h3">
-        GuideLLM
-      </Typography>
+      <WorkloadDetails />
+      <MetricsSummary />
+      <WorkloadMetrics />
     </ContentCenterer>
   );
   return (
diff --git a/ui/src/lib/components/Badge/Badge.component.tsx b/ui/src/lib/components/Badge/Badge.component.tsx
new file mode 100644
index 00000000..16f6e35f
--- /dev/null
+++ b/ui/src/lib/components/Badge/Badge.component.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+import { BadgeProps } from './Badge.interfaces';
+import { StyledTypography } from './Badge.styles';
+
+export const Component: FC<BadgeProps> = ({ label }) => {
+  return <StyledTypography variant="body2">{label}</StyledTypography>;
+};
diff --git a/ui/src/lib/components/Badge/Badge.interfaces.ts b/ui/src/lib/components/Badge/Badge.interfaces.ts
new file mode 100644
index 00000000..854f38e1
--- /dev/null
+++ b/ui/src/lib/components/Badge/Badge.interfaces.ts
@@ -0,0 +1,3 @@
+export interface BadgeProps {
+  label: string;
+}
diff --git a/ui/src/lib/components/Badge/Badge.styles.tsx b/ui/src/lib/components/Badge/Badge.styles.tsx
new file mode 100644
index 00000000..e1469946
--- /dev/null
+++ b/ui/src/lib/components/Badge/Badge.styles.tsx
@@ -0,0 +1,11 @@
+import { styled, Typography } from '@mui/material';
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  borderRadius: '6px',
+  padding: '6px',
+  marginRight: '6px',
+  display: 'inline-block',
+  paddingTop: '8px',
+  color: theme.palette.surface.onSurfaceAccent,
+}));
diff --git a/ui/src/lib/components/Badge/index.tsx b/ui/src/lib/components/Badge/index.tsx
new file mode 100644
index 00000000..6ddc5f53
--- /dev/null
+++ b/ui/src/lib/components/Badge/index.tsx
@@ -0,0 +1,2 @@
+export { Component as Badge } from './Badge.component';
+export type { BadgeProps } from './Badge.interfaces';
diff --git a/ui/src/lib/components/BlockHeader/BlockHeader.component.tsx b/ui/src/lib/components/BlockHeader/BlockHeader.component.tsx
new file mode 100644
index 00000000..5f071d40
--- /dev/null
+++ b/ui/src/lib/components/BlockHeader/BlockHeader.component.tsx
@@ -0,0 +1,26 @@
+'use client';
+import { Box, Typography, useTheme } from '@mui/material';
+
+import { SvgContainer } from '@/lib/utils/SvgContainer';
+
+import { Info } from '@assets/icons';
+
+import { BlockHeaderProps } from './BlockHeader.interfaces';
+import { CustomDivider } from './BlockHeader.styles';
+
+export const Component = ({ label, withDivider = false }: BlockHeaderProps) => {
+  const theme = useTheme();
+  return (
+    <Box display="flex" alignItems="center" my={3}>
+      <Typography variant="h5" color="surface.onSurface">
+        {label}
+      </Typography>
+      <Box ml={2}>
+        <SvgContainer color={theme.palette.surface.onSurfaceAccent}>
+          <Info />
+        </SvgContainer>
+      </Box>
+      {withDivider && <CustomDivider />}
+    </Box>
+  );
+};
diff --git a/ui/src/lib/components/BlockHeader/BlockHeader.interfaces.ts b/ui/src/lib/components/BlockHeader/BlockHeader.interfaces.ts
new file mode 100644
index 00000000..fffb9e88
--- /dev/null
+++ b/ui/src/lib/components/BlockHeader/BlockHeader.interfaces.ts
@@ -0,0 +1,4 @@
+export interface BlockHeaderProps {
+  label: string;
+  withDivider?: boolean;
+}
diff --git a/ui/src/lib/components/BlockHeader/BlockHeader.styles.tsx b/ui/src/lib/components/BlockHeader/BlockHeader.styles.tsx
new file mode 100644
index 00000000..9f063d8f
--- /dev/null
+++ b/ui/src/lib/components/BlockHeader/BlockHeader.styles.tsx
@@ -0,0 +1,8 @@
+import { Divider, styled } from '@mui/material';
+
+export const CustomDivider = styled(Divider)(({ theme }) => ({
+  height: '1px',
+  flex: 1,
+  marginLeft: '48px',
+  backgroundColor: theme.palette.outline.subdued,
+}));
diff --git a/ui/src/lib/components/BlockHeader/index.tsx b/ui/src/lib/components/BlockHeader/index.tsx
new file mode 100644
index 00000000..7035c622
--- /dev/null
+++ b/ui/src/lib/components/BlockHeader/index.tsx
@@ -0,0 +1,2 @@
+export { Component as BlockHeader } from './BlockHeader.component';
+export type { BlockHeaderProps } from './BlockHeader.interfaces';
diff --git a/ui/src/lib/components/Carousel/Carousel.component.tsx b/ui/src/lib/components/Carousel/Carousel.component.tsx
new file mode 100644
index 00000000..6bec1004
--- /dev/null
+++ b/ui/src/lib/components/Carousel/Carousel.component.tsx
@@ -0,0 +1,48 @@
+import { Box, Typography, useTheme } from '@mui/material';
+import dynamic from 'next/dynamic';
+import { FC } from 'react';
+
+import { CarouselProps } from './Carousel.interfaces';
+import { PromptWrapper } from './Carousel.styles';
+
+const Carousel = dynamic(() => import('react-material-ui-carousel').then((mod) => mod.default), {
+  ssr: false,
+});
+
+function truncateString(str: string, limit: number) {
+  if (str.length <= limit) {
+    return str;
+  }
+  let cutIndex = limit;
+  while (cutIndex < str.length && (str[cutIndex] !== ' ' || /[.,!?]/.test(str[cutIndex - 1]))) {
+    cutIndex++;
+  }
+  return cutIndex < str.length ? str.slice(0, cutIndex) + '...' : str;
+}
+
+export const Component: FC<CarouselProps> = ({ label, items }) => {
+  const theme = useTheme();
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Typography variant="overline2" color="surface.onSurface" textTransform="uppercase">
+        {label}
+      </Typography>
+      <Carousel
+        interval={10000}
+        duration={1000}
+        animation="fade"
+        IndicatorIcon={null}
+        navButtonsAlwaysInvisible={true}
+        sx={{ marginTop: '6px' }}
+      >
+        {items.map((item, i) => (
+          <PromptWrapper key={i} data-id="prompt-wrapper">
+            <Typography variant="body2" color={theme.palette.primary.main}>
+              {truncateString(item, 200)}
+            </Typography>
+          </PromptWrapper>
+        ))}
+      </Carousel>
+    </Box>
+  );
+};
diff --git a/ui/src/lib/components/Carousel/Carousel.interfaces.ts b/ui/src/lib/components/Carousel/Carousel.interfaces.ts
new file mode 100644
index 00000000..5cc386f5
--- /dev/null
+++ b/ui/src/lib/components/Carousel/Carousel.interfaces.ts
@@ -0,0 +1,4 @@
+export interface CarouselProps {
+  label: string;
+  items: string[];
+}
diff --git a/ui/src/lib/components/Carousel/Carousel.styles.tsx b/ui/src/lib/components/Carousel/Carousel.styles.tsx
new file mode 100644
index 00000000..249c10d5
--- /dev/null
+++ b/ui/src/lib/components/Carousel/Carousel.styles.tsx
@@ -0,0 +1,11 @@
+import { Box, styled } from '@mui/material';
+
+export const PromptWrapper = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.primary.container,
+  borderRadius: '8px',
+  padding: '8px',
+  minWidth: '304px',
+  minHeight: '84px',
+  width: 'auto',
+  overflow: 'hidden',
+}));
diff --git a/ui/src/lib/components/Carousel/index.tsx b/ui/src/lib/components/Carousel/index.tsx
new file mode 100644
index 00000000..0f7ee7e5
--- /dev/null
+++ b/ui/src/lib/components/Carousel/index.tsx
@@ -0,0 +1,2 @@
+export { Component as Carousel } from './Carousel.component';
+export type { CarouselProps } from './Carousel.interfaces';
diff --git a/ui/src/lib/components/Charts/Combined/Combined.component.tsx b/ui/src/lib/components/Charts/Combined/Combined.component.tsx
new file mode 100644
index 00000000..68b53496
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/Combined.component.tsx
@@ -0,0 +1,153 @@
+import { useTheme } from '@mui/material';
+import { BarCustomLayerProps, ResponsiveBar } from '@nivo/bar';
+import { Point } from '@nivo/core';
+import React from 'react';
+
+import { CombinedProps } from './Combined.interfaces';
+import CustomBars from './components/CustomBars';
+import CustomGrid from './components/CustomGrid';
+import { CustomLegendLayer } from './components/CustomLegendLayer';
+import CustomTick from './components/CustomTick';
+import DottedLines from './components/DottedLines';
+import useChartScales from '../common/useChartScales';
+
+export const Component = ({
+  bars,
+  lines,
+  width,
+  height,
+  margins,
+  xLegend,
+  yLegend,
+}: CombinedProps) => {
+  const theme = useTheme();
+  const combinedGraphTheme = {
+    axis: {
+      legend: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+          fontSize: theme.typography.axisTitle.fontSize,
+          fontWeight: theme.typography.axisTitle.fontWeight,
+          fontFamily: theme.typography.axisTitle.fontFamily,
+        },
+      },
+      ticks: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+        },
+      },
+    },
+  };
+  const defaultMargins = { top: 10, left: 10, right: 10, bottom: 10 };
+  const finalMargins = {
+    ...defaultMargins,
+    ...margins,
+    bottom: (margins?.bottom || defaultMargins.bottom) + 20,
+  };
+  const { xTicks, yTicks, fnScaleX, fnScaleY, innerHeight } = useChartScales({
+    bars,
+    lines,
+    width,
+    height,
+    margins: finalMargins,
+  });
+
+  const CustomGridLayer = () => {
+    const scaledWidth = fnScaleX(xTicks[xTicks.length - 1]);
+    const scaledHeight = innerHeight - fnScaleY(yTicks[0]);
+
+    return (
+      <CustomGrid
+        xScale={(d: number) => fnScaleX(d)}
+        yScale={(d: number) => innerHeight - fnScaleY(d)}
+        width={scaledWidth}
+        height={innerHeight}
+        xTicks={xTicks}
+        yTicks={yTicks}
+        scaledHeight={scaledHeight}
+      />
+    );
+  };
+
+  const CustomBarLayer = (props: BarCustomLayerProps<Point>) => {
+    const heightOffset = innerHeight - fnScaleY(yTicks[0]);
+    return (
+      <CustomBars
+        {...props}
+        xScaleFunc={(d: number) => fnScaleX(d)}
+        yScaleFunc={(d: number) => innerHeight - fnScaleY(d)}
+        heightOffset={heightOffset}
+      />
+    );
+  };
+  return (
+    <div style={{ width: width + 'px', height: height + 'px', position: 'relative' }}>
+      <ResponsiveBar
+        animate={true}
+        data={bars}
+        keys={['y']}
+        indexBy="x"
+        margin={{
+          top: finalMargins.top,
+          right: finalMargins.right,
+          bottom: finalMargins.bottom,
+          left: finalMargins.left,
+        }}
+        padding={0.5}
+        // TODO: change colors scheme
+        // colors={{ scheme: 'category10' }}
+        colors={[theme.palette.primary.shades.B80]}
+        axisLeft={{
+          tickValues: yTicks,
+          legend: yLegend,
+          legendPosition: 'middle',
+          legendOffset: -30,
+          tickSize: 5,
+          tickPadding: 5,
+          tickRotation: 0,
+          renderTick: (tick) => (
+            <CustomTick
+              isXAxis={false}
+              scale={(d: number) => Math.abs(innerHeight - fnScaleY(d))}
+              tick={yTicks[tick.tickIndex]}
+              isFirst={tick.tickIndex === 0}
+              isLast={tick.tickIndex === yTicks.length - 1}
+            />
+          ),
+        }}
+        axisBottom={{
+          tickValues: xTicks,
+          legend: xLegend,
+          legendPosition: 'middle',
+          legendOffset: 30,
+          tickSize: 5,
+          tickPadding: 5,
+          tickRotation: 0,
+          renderTick: (tick) => (
+            <CustomTick
+              isXAxis={true}
+              scale={(d: number) => fnScaleX(d)}
+              tick={xTicks[tick.tickIndex]}
+              isFirst={tick.tickIndex === 0}
+              isLast={tick.tickIndex === xTicks.length - 1}
+            />
+          ),
+        }}
+        layers={[
+          'axes',
+          CustomGridLayer,
+          CustomBarLayer,
+          () => <CustomLegendLayer series={lines} height={height} />,
+        ]}
+        theme={combinedGraphTheme}
+      />
+      <DottedLines
+        lines={lines}
+        leftMargin={finalMargins.left}
+        topMargin={finalMargins.top}
+        innerHeight={innerHeight}
+        xScale={fnScaleX}
+      />
+    </div>
+  );
+};
diff --git a/ui/src/lib/components/Charts/Combined/Combined.interfaces.ts b/ui/src/lib/components/Charts/Combined/Combined.interfaces.ts
new file mode 100644
index 00000000..a81a9f7c
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/Combined.interfaces.ts
@@ -0,0 +1,11 @@
+import { LinesSeries, Margins, Point } from '../common/interfaces';
+
+export interface CombinedProps {
+  bars: Point[];
+  lines: LinesSeries[];
+  width: number;
+  height: number;
+  margins?: Margins;
+  xLegend: string;
+  yLegend: string;
+}
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomBars/CustomBars.interfaces.ts b/ui/src/lib/components/Charts/Combined/components/CustomBars/CustomBars.interfaces.ts
new file mode 100644
index 00000000..faad401e
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomBars/CustomBars.interfaces.ts
@@ -0,0 +1,7 @@
+import { BarCustomLayerProps } from '@nivo/bar';
+
+export interface CustomBarsProps<T> extends BarCustomLayerProps<T> {
+  xScaleFunc: (d: number) => number;
+  yScaleFunc: (d: number) => number;
+  heightOffset: number;
+}
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomBars/index.tsx b/ui/src/lib/components/Charts/Combined/components/CustomBars/index.tsx
new file mode 100644
index 00000000..f40f9682
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomBars/index.tsx
@@ -0,0 +1,50 @@
+import { ComputedBarDatum } from '@nivo/bar';
+import { Point } from '@nivo/core';
+import { useTooltip, BasicTooltip } from '@nivo/tooltip';
+import React from 'react';
+
+import { CustomBarsProps } from './CustomBars.interfaces';
+
+const CustomBars = ({ bars, xScaleFunc, yScaleFunc, heightOffset }: CustomBarsProps<Point>) => {
+  const { showTooltipFromEvent, hideTooltip } = useTooltip();
+
+  const handleMouseEnter = (
+    event: React.MouseEvent<SVGRectElement>,
+    bar: ComputedBarDatum<Point>
+  ) => {
+    showTooltipFromEvent(
+      <BasicTooltip
+        id={`x: ${bar.data.data.x}, y: ${bar.data.data.y}`}
+        enableChip={true}
+        color={bar.color}
+      />,
+      event
+    );
+  };
+
+  const handleMouseLeave = () => {
+    hideTooltip();
+  };
+
+  return (
+    <g transform={`translate(0,-${heightOffset})`}>
+      {bars.map((bar) => {
+        return (
+          <rect
+            key={bar.key}
+            x={xScaleFunc(Number(bar.data.data.x)) - bar.width / 2}
+            y={yScaleFunc(Number(bar.data.data.y))}
+            width={bar.width}
+            height={bar.height}
+            fill={bar.color}
+            onMouseEnter={(event) => handleMouseEnter(event, bar)}
+            onMouseLeave={handleMouseLeave}
+            rx={bar.height > 8 ? 8 : 1}
+          />
+        );
+      })}
+    </g>
+  );
+};
+
+export default CustomBars;
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomGrid/CustomGrid.interfaces.ts b/ui/src/lib/components/Charts/Combined/components/CustomGrid/CustomGrid.interfaces.ts
new file mode 100644
index 00000000..2e440fba
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomGrid/CustomGrid.interfaces.ts
@@ -0,0 +1,10 @@
+export interface CustomGridProps {
+  xScale: (d: number) => number;
+  yScale: (d: number) => number;
+  width: number;
+  height: number;
+  xTicks: number[];
+  yTicks: number[];
+  scaledHeight: number;
+  fullGrid?: boolean;
+}
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomGrid/index.tsx b/ui/src/lib/components/Charts/Combined/components/CustomGrid/index.tsx
new file mode 100644
index 00000000..69726062
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomGrid/index.tsx
@@ -0,0 +1,72 @@
+import { useTheme } from '@mui/material';
+
+import { CustomGridProps } from './CustomGrid.interfaces';
+
+const CustomGrid = ({
+  xScale,
+  yScale,
+  width,
+  height,
+  xTicks,
+  yTicks,
+  scaledHeight,
+  fullGrid = false,
+}: CustomGridProps) => {
+  const theme = useTheme();
+  const xTick = xTicks[0];
+  const yTick = yTicks[yTicks.length - 1];
+
+  const renderAxlesOnly = (
+    <>
+      <line
+        key={`x${xTick}`}
+        x1={xScale(xTick)}
+        x2={xScale(xTick)}
+        y1={scaledHeight}
+        y2={height}
+        stroke={theme.palette.outline.subdued}
+      />
+      <line
+        key={`y${yTick}`}
+        x1={0}
+        x2={width}
+        y1={yScale(yTick)}
+        y2={yScale(yTick)}
+        stroke={theme.palette.outline.subdued}
+      />
+    </>
+  );
+
+  const renderFullGrid = (
+    <>
+      {xTicks.map((tick) => (
+        <line
+          key={`x${tick}`}
+          x1={xScale(tick)}
+          x2={xScale(tick)}
+          y1={scaledHeight}
+          y2={height}
+          stroke={theme.palette.outline.subdued}
+        />
+      ))}
+      {yTicks.map((tick) => (
+        <line
+          key={`y${tick}`}
+          x1={0}
+          x2={width}
+          y1={yScale(tick)}
+          y2={yScale(tick)}
+          stroke={theme.palette.outline.subdued}
+        />
+      ))}
+    </>
+  );
+
+  return (
+    <g transform={`translate(0,-${scaledHeight})`} id="grid">
+      {fullGrid ? renderFullGrid : renderAxlesOnly}
+    </g>
+  );
+};
+
+export default CustomGrid;
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts b/ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts
new file mode 100644
index 00000000..de0abde5
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts
@@ -0,0 +1,6 @@
+import { LinesSeries } from '../../../common/interfaces';
+
+export interface CustomLegendLayerProps {
+  series: LinesSeries[];
+  height: number;
+}
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/index.tsx b/ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/index.tsx
new file mode 100644
index 00000000..3f390695
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomLegendLayer/index.tsx
@@ -0,0 +1,42 @@
+import { useTheme } from '@mui/material';
+
+import useLineColors from '../../../common/useLineColors';
+
+import { CustomLegendLayerProps } from './CustomLegendLayer.interfaces';
+
+const LEGEND_HEIGHT = 20;
+
+export const CustomLegendLayer = ({ series, ...rest }: CustomLegendLayerProps) => {
+  const theme = useTheme();
+  const lineColor = useLineColors();
+  return (
+    <g transform={`translate(20, ${rest.height - LEGEND_HEIGHT})`}>
+      {series.map((item, index) => (
+        <g key={item.id} transform={`translate(${index * 100}, 0)`}>
+          <line
+            x1="0"
+            y1="0"
+            x2="20"
+            y2="0"
+            stroke={lineColor[index]}
+            strokeWidth={2}
+            strokeDasharray={'4,4'}
+          />
+          <text
+            x="30"
+            y="0"
+            fill={theme.palette.surface.onSurface}
+            style={{
+              fontSize: theme.typography.caption.fontSize,
+              fontWeight: theme.typography.caption.fontWeight,
+              fontFamily: theme.typography.caption.fontFamily,
+            }}
+            alignmentBaseline="middle"
+          >
+            {item.id}
+          </text>
+        </g>
+      ))}
+    </g>
+  );
+};
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomTick/CustomTick.interfaces.ts b/ui/src/lib/components/Charts/Combined/components/CustomTick/CustomTick.interfaces.ts
new file mode 100644
index 00000000..efe5ef04
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomTick/CustomTick.interfaces.ts
@@ -0,0 +1,8 @@
+export interface CustomTickProps {
+  scale: (d: number) => number;
+  isXAxis: boolean;
+  tick: number;
+  withTicks?: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+}
diff --git a/ui/src/lib/components/Charts/Combined/components/CustomTick/index.tsx b/ui/src/lib/components/Charts/Combined/components/CustomTick/index.tsx
new file mode 100644
index 00000000..e474253a
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/CustomTick/index.tsx
@@ -0,0 +1,58 @@
+import { useTheme } from '@mui/material';
+
+import { CustomTickProps } from './CustomTick.interfaces';
+
+function CustomTick({ isXAxis, tick, scale, withTicks = false, isFirst, isLast }: CustomTickProps) {
+  const theme = useTheme();
+
+  function getGroupPosition() {
+    if (isXAxis) {
+      let x = scale(tick);
+      if (isFirst) {
+        x = 4;
+      }
+      if (isLast) {
+        x -= 4;
+      }
+      return { x, y: 0 };
+    }
+    return { x: 0, y: scale(tick) };
+  }
+
+  function renderTick() {
+    const commonProps = {
+      fontFamily: theme.typography.axisLabel.fontFamily,
+      fontWeight: theme.typography.axisLabel.fontWeight,
+      fontSize: theme.typography.axisLabel.fontSize,
+      fill: theme.palette.surface.onSurface,
+    };
+
+    return isXAxis ? (
+      <>
+        {withTicks && <line x1={0} y1={0} x2={0} y2={6} stroke={theme.palette.surface.onSurface} />}
+        <text textAnchor="middle" y={10} {...commonProps}>
+          {tick}
+        </text>
+      </>
+    ) : (
+      <>
+        {withTicks && (
+          <line x1={0} y1={0} x2={-6} y2={0} stroke={theme.palette.surface.onSurface} />
+        )}
+        <text textAnchor="end" x={-5} dominantBaseline="middle" {...commonProps}>
+          {tick}
+        </text>
+      </>
+    );
+  }
+
+  const { x, y } = getGroupPosition();
+
+  return (
+    <g key={tick} transform={`translate(${x}, ${y})`}>
+      {renderTick()}
+    </g>
+  );
+}
+
+export default CustomTick;
diff --git a/ui/src/lib/components/Charts/Combined/components/DottedLines/DottedLines.interfaces.ts b/ui/src/lib/components/Charts/Combined/components/DottedLines/DottedLines.interfaces.ts
new file mode 100644
index 00000000..9044e15b
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/DottedLines/DottedLines.interfaces.ts
@@ -0,0 +1,9 @@
+import { LinesSeries } from '../../../common/interfaces';
+
+export interface DottedLinesProps {
+  lines: LinesSeries[];
+  leftMargin: number;
+  topMargin: number;
+  innerHeight: number;
+  xScale: (d: number) => number;
+}
diff --git a/ui/src/lib/components/Charts/Combined/components/DottedLines/index.tsx b/ui/src/lib/components/Charts/Combined/components/DottedLines/index.tsx
new file mode 100644
index 00000000..6ab9b84a
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/components/DottedLines/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import useLineColors from '../../../common/useLineColors';
+
+import { DottedLinesProps } from './DottedLines.interfaces';
+
+const DottedLines = ({ lines, leftMargin, topMargin, xScale, innerHeight }: DottedLinesProps) => {
+  const lineColor = useLineColors();
+  return (
+    <svg
+      style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
+      width="100%"
+      height="100%"
+    >
+      <g transform={`translate(${leftMargin}, ${topMargin})`}>
+        {lines.map((line, i) => (
+          <line
+            key={i}
+            x1={xScale(line.x)}
+            y1="0"
+            x2={xScale(line.x)}
+            y2={innerHeight}
+            stroke={lineColor[i]}
+            strokeWidth="1.5"
+            strokeDasharray="3,3"
+          />
+        ))}
+      </g>
+    </svg>
+  );
+};
+
+export default DottedLines;
diff --git a/ui/src/lib/components/Charts/Combined/index.tsx b/ui/src/lib/components/Charts/Combined/index.tsx
new file mode 100644
index 00000000..199b1554
--- /dev/null
+++ b/ui/src/lib/components/Charts/Combined/index.tsx
@@ -0,0 +1,2 @@
+export { Component as Combined } from './Combined.component';
+export type { CombinedProps } from './Combined.interfaces';
diff --git a/ui/src/lib/components/Charts/DashedLine/DashedLine.component.tsx b/ui/src/lib/components/Charts/DashedLine/DashedLine.component.tsx
new file mode 100644
index 00000000..ae88157f
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/DashedLine.component.tsx
@@ -0,0 +1,128 @@
+import { useTheme } from '@mui/material';
+import { ResponsiveLine, Serie } from '@nivo/line';
+
+import { CustomLegendLayer } from './components/CustomLegendLayer';
+import { DashedSolidLine } from './components/DashedSolidLine';
+import { DashedLineProps, ScaleType } from './DashedLine.interfaces';
+import { spacedLogValues } from './helpers';
+
+export const getMinTick = (data: readonly Serie[]) => {
+  return Math.max(
+    ...data.map((lineData) => Math.min(...lineData.data.map((point) => point.y as number)))
+  );
+};
+
+export const getMaxTick = (data: readonly Serie[]) => {
+  return Math.max(
+    ...data.map((lineData) => Math.max(...lineData.data.map((point) => point.y as number)))
+  );
+};
+
+export const Component = ({
+  data,
+  xLegend,
+  yLegend,
+  margins,
+  minX,
+  yScaleType = ScaleType.log,
+}: DashedLineProps) => {
+  const theme = useTheme();
+  const defaultMargins = { top: 10, left: 10, right: 10, bottom: 10 };
+  const finalMargins = {
+    ...defaultMargins,
+    ...margins,
+    bottom: (margins?.bottom || defaultMargins.bottom) + 50,
+  };
+
+  const dashedLineTheme = {
+    textColor: theme.palette.surface.onSurface,
+    fontSize: 14,
+    axis: {
+      domain: {
+        line: {
+          stroke: theme.palette.outline.subdued,
+          strokeWidth: 1,
+        },
+      },
+      ticks: {
+        line: {
+          stroke: theme.palette.outline.subdued,
+          strokeWidth: 1,
+        },
+        text: {
+          fill: theme.palette.surface.onSurface,
+          fontSize: theme.typography.axisTitle.fontSize,
+          fontFamily: theme.typography.axisTitle.fontFamily,
+          fontWeight: theme.typography.axisTitle.fontWeight,
+        },
+      },
+      legend: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+          fontSize: theme.typography.axisTitle.fontSize,
+          fontFamily: theme.typography.axisTitle.fontFamily,
+          fontWeight: theme.typography.axisTitle.fontWeight,
+        },
+      },
+    },
+    grid: {
+      line: {
+        stroke: theme.palette.outline.subdued,
+        strokeWidth: 1,
+      },
+    },
+  };
+
+  let extraLeftAxisOptions = {};
+  let extraYScaleOptions = {};
+  if (yScaleType === ScaleType.log) {
+    const ticks = spacedLogValues(getMinTick(data), getMaxTick(data), 6);
+    extraLeftAxisOptions = {
+      tickValues: ticks,
+    };
+    extraYScaleOptions = {
+      max: ticks[ticks.length - 1],
+    };
+  }
+
+  return (
+    <div style={{ height: '100%', width: '100%' }}>
+      <ResponsiveLine
+        data={data}
+        enablePoints={false}
+        curve="monotoneX"
+        margin={finalMargins}
+        axisTop={null}
+        axisRight={null}
+        axisBottom={{
+          tickSize: 0,
+          tickPadding: 5,
+          tickRotation: 0,
+          legend: xLegend,
+          legendOffset: 36,
+          legendPosition: 'middle',
+        }}
+        axisLeft={{
+          tickSize: 0,
+          tickPadding: 5,
+          tickRotation: 0,
+          legend: yLegend,
+          legendOffset: -40,
+          legendPosition: 'middle',
+          ...extraLeftAxisOptions,
+        }}
+        xScale={{
+          min: minX,
+          type: 'linear',
+        }}
+        yScale={{
+          type: yScaleType,
+          ...extraYScaleOptions,
+        }}
+        colors={{ scheme: 'category10' }}
+        layers={['markers', 'axes', 'points', 'legends', DashedSolidLine, CustomLegendLayer]}
+        theme={dashedLineTheme}
+      />
+    </div>
+  );
+};
diff --git a/ui/src/lib/components/Charts/DashedLine/DashedLine.interfaces.ts b/ui/src/lib/components/Charts/DashedLine/DashedLine.interfaces.ts
new file mode 100644
index 00000000..16193ab4
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/DashedLine.interfaces.ts
@@ -0,0 +1,16 @@
+import { LineSvgProps } from '@nivo/line';
+
+import { Margins } from '../common/interfaces';
+
+export enum ScaleType {
+  log = 'symlog',
+  linear = 'linear',
+}
+
+export interface DashedLineProps extends LineSvgProps {
+  margins?: Margins;
+  xLegend: string;
+  yLegend: string;
+  minX?: number;
+  yScaleType?: ScaleType;
+}
diff --git a/ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts b/ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts
new file mode 100644
index 00000000..813bb5e2
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/CustomLegendLayer.interfaces.ts
@@ -0,0 +1,5 @@
+import { CustomLayerProps } from '@nivo/line';
+
+export interface CustomLegendLayerProps extends CustomLayerProps {
+  height?: number;
+}
diff --git a/ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/index.tsx b/ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/index.tsx
new file mode 100644
index 00000000..a43d6780
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/components/CustomLegendLayer/index.tsx
@@ -0,0 +1,62 @@
+import { useTheme } from '@mui/material';
+
+import { CustomLegendLayerProps } from './CustomLegendLayer.interfaces';
+
+const LEGEND_HEIGHT = 40;
+
+export const CustomLegendLayer = ({ series, ...rest }: CustomLegendLayerProps) => {
+  const theme = useTheme();
+  const palette = theme.palette;
+
+  const colors = [
+    palette.surface.onSurface,
+    palette.secondary.main,
+    palette.tertiary.main,
+    palette.quarternary.main,
+  ];
+  const solidColor = palette.primary.main;
+
+  const getColor = (isSolid = false) => {
+    if (isSolid) {
+      return solidColor;
+    }
+
+    if (colors.length === 0) {
+      throw new Error('No more colors available');
+    }
+
+    return colors.splice(0, 1)[0];
+  };
+  return (
+    <g transform={`translate(20, ${(rest?.height || rest.innerHeight) - LEGEND_HEIGHT})`}>
+      {series.map((item, index) => {
+        return (
+          <g key={item.id} transform={`translate(${index * 100}, 0)`}>
+            <line
+              x1="0"
+              y1="0"
+              x2="20"
+              y2="0"
+              stroke={getColor(item.solid)}
+              strokeWidth={2}
+              strokeDasharray={item?.solid ? '' : '4,4'}
+            />
+            <text
+              x="30"
+              y="0"
+              fill={theme.palette.surface.onSurface}
+              style={{
+                fontSize: theme.typography.caption.fontSize,
+                fontWeight: theme.typography.caption.fontWeight,
+                fontFamily: theme.typography.caption.fontFamily,
+              }}
+              alignmentBaseline="middle"
+            >
+              {item.id}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+};
diff --git a/ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/DashedSolidLine.interfaces.ts b/ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/DashedSolidLine.interfaces.ts
new file mode 100644
index 00000000..fdb4537a
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/DashedSolidLine.interfaces.ts
@@ -0,0 +1,7 @@
+import type { CustomLayerProps } from '@nivo/line';
+import type { ScaleLinear } from '@nivo/scales';
+
+export type DashedSolidLineProps = Omit<CustomLayerProps, 'xScale' | 'yScale'> & {
+  xScale: ScaleLinear<number>;
+  yScale: ScaleLinear<number>;
+};
diff --git a/ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/index.tsx b/ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/index.tsx
new file mode 100644
index 00000000..dd786b6a
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/components/DashedSolidLine/index.tsx
@@ -0,0 +1,76 @@
+import { useTheme } from '@mui/material';
+
+import { toNumberValue } from '../../helpers';
+
+import { DashedSolidLineProps } from './DashedSolidLine.interfaces';
+
+export const DashedSolidLine = ({
+  series,
+  lineGenerator,
+  xScale,
+  yScale,
+}: DashedSolidLineProps) => {
+  const theme = useTheme();
+  const palette = theme.palette;
+
+  const colors = [
+    palette.surface.onSurface,
+    palette.secondary.main,
+    palette.tertiary.main,
+    palette.quarternary.main,
+  ];
+  const solidColor = palette.primary.main;
+
+  const getColor = (isSolid: boolean) => {
+    if (isSolid) {
+      return solidColor;
+    }
+
+    if (colors.length === 0) {
+      throw new Error('No more colors available');
+    }
+
+    return colors.splice(0, 1)[0];
+  };
+
+  return series.map(({ id, data, solid = false }) => {
+    return (
+      <g key={id}>
+        <path
+          key={id}
+          d={(() => {
+            const linePath = lineGenerator(
+              data.map((d) => ({
+                x: xScale(toNumberValue(d.data.x)),
+                y: yScale(toNumberValue(d.data.y)),
+              }))
+            );
+            return linePath !== null ? linePath : undefined;
+          })()}
+          fill="none"
+          stroke={getColor(solid)}
+          style={
+            !solid
+              ? {
+                  strokeDasharray: '2.4 2.4',
+                  strokeWidth: 1.5,
+                }
+              : {
+                  strokeWidth: 1.5,
+                }
+          }
+        />
+        {solid &&
+          data.map((d, pointIndex) => (
+            <circle
+              key={`${id}-${pointIndex}`}
+              cx={xScale(toNumberValue(d.data.x))}
+              cy={yScale(toNumberValue(d.data.y))}
+              r={4}
+              fill={getColor(solid)}
+            />
+          ))}
+      </g>
+    );
+  });
+};
diff --git a/ui/src/lib/components/Charts/DashedLine/helpers.ts b/ui/src/lib/components/Charts/DashedLine/helpers.ts
new file mode 100644
index 00000000..a9fb1265
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/helpers.ts
@@ -0,0 +1,76 @@
+import { DatumValue } from '@nivo/line';
+
+type NumberValue = number | { valueOf(): number };
+
+export const toNumberValue = (value: DatumValue | null | undefined): NumberValue => {
+  if (value === null || value === undefined) {
+    return 0;
+  }
+  return value as NumberValue;
+};
+
+const allowedMultipliers = [1, 1.2, 1.4, 1.5, 1.6, 1.8, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 7.5, 8, 9, 10];
+
+export function roundUpNice(x: number) {
+  if (x <= 0) {
+    return x;
+  }
+  const exponent = Math.floor(Math.log10(x));
+  const base = Math.pow(10, exponent);
+  const fraction = x / base;
+  for (const m of allowedMultipliers) {
+    if (m >= fraction) {
+      return Math.round(m * base);
+    }
+  }
+  return Math.round(10 * base);
+}
+
+export function roundNearestNice(x: number) {
+  if (x <= 0) {
+    return x;
+  }
+  const exponent = Math.floor(Math.log10(x));
+  const base = Math.pow(10, exponent);
+  const fraction = x / base;
+  let best = allowedMultipliers[0];
+  let bestDiff = Math.abs(fraction - best);
+  for (const m of allowedMultipliers) {
+    const diff = Math.abs(fraction - m);
+    if (diff < bestDiff) {
+      best = m;
+      bestDiff = diff;
+    }
+  }
+  return Math.round(best * base);
+}
+
+export function spacedLogValues(min: number, max: number, steps: number) {
+  if (steps < 2) {
+    return [];
+  }
+
+  if (min === 0) {
+    const nonzeroCount = steps - 1;
+    const exponent = Math.floor(Math.log10(max)) - (nonzeroCount - 1);
+    const lowerNonZero = roundNearestNice(Math.pow(10, exponent));
+    const upperTick = roundUpNice(max);
+    const r = Math.pow(upperTick / lowerNonZero, 1 / (nonzeroCount - 1));
+    const ticks = [0];
+    for (let i = 0; i < nonzeroCount; i++) {
+      const value = lowerNonZero * Math.pow(r, i);
+      ticks.push(roundNearestNice(value));
+    }
+    return ticks;
+  } else {
+    const lowerTick = roundUpNice(min);
+    const upperTick = roundUpNice(max);
+    const r = Math.pow(upperTick / lowerTick, 1 / (steps - 1));
+    const ticks = [];
+    for (let i = 0; i < steps; i++) {
+      const value = lowerTick * Math.pow(r, i);
+      ticks.push(roundNearestNice(value));
+    }
+    return ticks;
+  }
+}
diff --git a/ui/src/lib/components/Charts/DashedLine/index.tsx b/ui/src/lib/components/Charts/DashedLine/index.tsx
new file mode 100644
index 00000000..67fbf071
--- /dev/null
+++ b/ui/src/lib/components/Charts/DashedLine/index.tsx
@@ -0,0 +1,2 @@
+export { Component as DashedLine } from './DashedLine.component';
+export type { DashedLineProps } from './DashedLine.interfaces';
diff --git a/ui/src/lib/components/Charts/MetricLine/MetricLine.component.tsx b/ui/src/lib/components/Charts/MetricLine/MetricLine.component.tsx
new file mode 100644
index 00000000..e9793de4
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/MetricLine.component.tsx
@@ -0,0 +1,123 @@
+import { useTheme } from '@mui/material';
+import { ResponsiveLine } from '@nivo/line';
+import React, { FC } from 'react';
+
+import { useColor } from '@/lib/hooks/useColor';
+
+import { MetricLineProps } from '.';
+
+import CustomAxes from './components/CustomAxes';
+import ThresholdBar from './components/ThresholdBar';
+import { ScaleType } from '../DashedLine/DashedLine.interfaces';
+
+export const Component: FC<MetricLineProps> = ({
+  data,
+  threshold,
+  lineColor,
+  yScaleType = ScaleType.log,
+}) => {
+  const theme = useTheme();
+  const selectedColor = useColor(lineColor);
+  const lineTheme = {
+    axis: {
+      legend: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+          fontSize: theme.typography.axisTitle.fontSize,
+          fontWeight: theme.typography.axisTitle.fontWeight,
+          fontFamily: theme.typography.axisTitle.fontFamily,
+        },
+      },
+      ticks: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+        },
+      },
+    },
+  };
+  const xValues = data[0].data.map((d) => d.x) as Array<number>;
+  const yValues = data[0].data.map((d) => d.y) as Array<number>;
+
+  const maxX = Math.max(...xValues);
+  const minX = Math.min(...xValues);
+  const maxY = Math.ceil(Math.max(...yValues));
+  const minY = Math.floor(Math.min(...yValues));
+
+  let extraYScaleOptions = {};
+  if (yScaleType === ScaleType.linear) {
+    extraYScaleOptions = {
+      stacked: true,
+      reverse: false,
+    };
+  }
+
+  return (
+    <ResponsiveLine
+      curve="monotoneX"
+      data={data}
+      colors={[selectedColor]}
+      margin={{ top: 20, right: 10, bottom: 20, left: 35.5 }}
+      xScale={{ type: 'linear', min: minX }}
+      yScale={{
+        type: yScaleType,
+        min: 'auto',
+        max: 'auto',
+        ...extraYScaleOptions,
+      }}
+      axisBottom={null}
+      axisLeft={{
+        legendOffset: -30,
+        tickRotation: 0,
+        tickSize: 5,
+        tickPadding: 5,
+        tickValues: [minY, maxY],
+        renderTick: ({ value, x, y, tickIndex }) => {
+          return (
+            <g transform={`translate(${x},${y})`} data-id="ticks">
+              <text
+                x={-4}
+                y={tickIndex === 0 ? 0 : 6}
+                textAnchor="end"
+                style={{
+                  fontFamily: theme.typography.axisTitle.fontFamily,
+                  fontWeight: theme.typography.axisLabel.fontWeight,
+                  fontSize: theme.typography.axisLabel.fontSize,
+                  fill: theme.palette.surface.onSurfaceSubdued,
+                }}
+              >
+                {value}
+              </text>
+            </g>
+          );
+        },
+      }}
+      enableGridX={false}
+      enableGridY={false}
+      pointSize={0}
+      useMesh={true}
+      layers={[
+        CustomAxes,
+        ({
+          xScale,
+          yScale,
+        }: {
+          xScale: (value: number) => number;
+          yScale: (value: number) => number;
+        }) => (
+          <ThresholdBar
+            threshold={threshold}
+            yScale={yScale}
+            xScale={xScale}
+            minX={minX}
+            maxX={maxX}
+            minY={minY}
+            maxY={maxY}
+          />
+        ),
+        'axes',
+        'lines',
+      ]}
+      theme={lineTheme}
+    />
+  );
+};
diff --git a/ui/src/lib/components/Charts/MetricLine/MetricLine.interface.ts b/ui/src/lib/components/Charts/MetricLine/MetricLine.interface.ts
new file mode 100644
index 00000000..6df9fb47
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/MetricLine.interface.ts
@@ -0,0 +1,15 @@
+import { LineSvgProps } from '@nivo/line';
+
+import { ScaleType } from '../DashedLine/DashedLine.interfaces';
+
+export enum LineColor {
+  Primary,
+  Secondary,
+  Tertiary,
+  Quarternary,
+}
+export interface MetricLineProps extends LineSvgProps {
+  threshold?: number;
+  lineColor: LineColor;
+  yScaleType?: ScaleType;
+}
diff --git a/ui/src/lib/components/Charts/MetricLine/components/CustomAxes/CustomAxes.interfaces.ts b/ui/src/lib/components/Charts/MetricLine/components/CustomAxes/CustomAxes.interfaces.ts
new file mode 100644
index 00000000..66fad024
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/CustomAxes/CustomAxes.interfaces.ts
@@ -0,0 +1,6 @@
+import { CustomLayerProps } from '@nivo/line';
+import type { ScaleLinear } from '@nivo/scales';
+
+export type CustomLineLayerProps = Omit<CustomLayerProps, 'xScale' | 'yScale'> & {
+  yScale: ScaleLinear<number>;
+};
diff --git a/ui/src/lib/components/Charts/MetricLine/components/CustomAxes/index.tsx b/ui/src/lib/components/Charts/MetricLine/components/CustomAxes/index.tsx
new file mode 100644
index 00000000..b5275349
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/CustomAxes/index.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from '@mui/material';
+import React from 'react';
+
+import { CustomLineLayerProps } from './CustomAxes.interfaces';
+
+const CustomAxes = ({ yScale }: CustomLineLayerProps) => {
+  const theme = useTheme();
+  const minY2 = yScale.domain()[0];
+  const maxY2 = yScale.domain()[1];
+  return (
+    <>
+      <line
+        x1={0}
+        x2={0}
+        y1={yScale(minY2)}
+        y2={yScale(maxY2)}
+        stroke={theme.palette.surface.onSurfaceSubdued}
+      />
+    </>
+  );
+};
+
+export default CustomAxes;
diff --git a/ui/src/lib/components/Charts/MetricLine/components/CustomGrid/CustomGrid.interfaces.ts b/ui/src/lib/components/Charts/MetricLine/components/CustomGrid/CustomGrid.interfaces.ts
new file mode 100644
index 00000000..2e440fba
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/CustomGrid/CustomGrid.interfaces.ts
@@ -0,0 +1,10 @@
+export interface CustomGridProps {
+  xScale: (d: number) => number;
+  yScale: (d: number) => number;
+  width: number;
+  height: number;
+  xTicks: number[];
+  yTicks: number[];
+  scaledHeight: number;
+  fullGrid?: boolean;
+}
diff --git a/ui/src/lib/components/Charts/MetricLine/components/CustomGrid/index.tsx b/ui/src/lib/components/Charts/MetricLine/components/CustomGrid/index.tsx
new file mode 100644
index 00000000..69726062
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/CustomGrid/index.tsx
@@ -0,0 +1,72 @@
+import { useTheme } from '@mui/material';
+
+import { CustomGridProps } from './CustomGrid.interfaces';
+
+const CustomGrid = ({
+  xScale,
+  yScale,
+  width,
+  height,
+  xTicks,
+  yTicks,
+  scaledHeight,
+  fullGrid = false,
+}: CustomGridProps) => {
+  const theme = useTheme();
+  const xTick = xTicks[0];
+  const yTick = yTicks[yTicks.length - 1];
+
+  const renderAxlesOnly = (
+    <>
+      <line
+        key={`x${xTick}`}
+        x1={xScale(xTick)}
+        x2={xScale(xTick)}
+        y1={scaledHeight}
+        y2={height}
+        stroke={theme.palette.outline.subdued}
+      />
+      <line
+        key={`y${yTick}`}
+        x1={0}
+        x2={width}
+        y1={yScale(yTick)}
+        y2={yScale(yTick)}
+        stroke={theme.palette.outline.subdued}
+      />
+    </>
+  );
+
+  const renderFullGrid = (
+    <>
+      {xTicks.map((tick) => (
+        <line
+          key={`x${tick}`}
+          x1={xScale(tick)}
+          x2={xScale(tick)}
+          y1={scaledHeight}
+          y2={height}
+          stroke={theme.palette.outline.subdued}
+        />
+      ))}
+      {yTicks.map((tick) => (
+        <line
+          key={`y${tick}`}
+          x1={0}
+          x2={width}
+          y1={yScale(tick)}
+          y2={yScale(tick)}
+          stroke={theme.palette.outline.subdued}
+        />
+      ))}
+    </>
+  );
+
+  return (
+    <g transform={`translate(0,-${scaledHeight})`} id="grid">
+      {fullGrid ? renderFullGrid : renderAxlesOnly}
+    </g>
+  );
+};
+
+export default CustomGrid;
diff --git a/ui/src/lib/components/Charts/MetricLine/components/CustomTick/CustomTick.interfaces.ts b/ui/src/lib/components/Charts/MetricLine/components/CustomTick/CustomTick.interfaces.ts
new file mode 100644
index 00000000..efe5ef04
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/CustomTick/CustomTick.interfaces.ts
@@ -0,0 +1,8 @@
+export interface CustomTickProps {
+  scale: (d: number) => number;
+  isXAxis: boolean;
+  tick: number;
+  withTicks?: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+}
diff --git a/ui/src/lib/components/Charts/MetricLine/components/CustomTick/index.tsx b/ui/src/lib/components/Charts/MetricLine/components/CustomTick/index.tsx
new file mode 100644
index 00000000..b7f97f30
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/CustomTick/index.tsx
@@ -0,0 +1,65 @@
+import { useTheme } from '@mui/material';
+
+import { CustomTickProps } from './CustomTick.interfaces';
+
+const CustomTick = ({
+  isXAxis,
+  tick,
+  scale,
+  withTicks = false,
+  isFirst,
+  isLast,
+}: CustomTickProps) => {
+  const theme = useTheme();
+
+  const getGroupPosition = () => {
+    if (!isXAxis) {
+      return { x: 0, y: scale(tick) };
+    }
+
+    let x = scale(tick);
+    if (isFirst) {
+      x = 4;
+    }
+    if (isLast) {
+      x -= 4;
+    }
+    return { x, y: 0 };
+  };
+
+  const renderTickContent = (
+    textAnchor: 'middle' | 'end',
+    x: number,
+    y: number,
+    lineX: number,
+    lineY: number
+  ) => (
+    <>
+      {withTicks && (
+        <line x1={0} y1={0} x2={lineX} y2={lineY} stroke={theme.palette.surface.onSurface} />
+      )}
+      <text
+        textAnchor={textAnchor}
+        x={x}
+        y={y}
+        dominantBaseline={isXAxis ? undefined : 'middle'}
+        fontFamily={theme.typography.axisLabel.fontFamily}
+        fontWeight={theme.typography.axisLabel.fontWeight}
+        fontSize={theme.typography.axisLabel.fontSize}
+        fill={theme.palette.surface.onSurface}
+      >
+        {tick}
+      </text>
+    </>
+  );
+
+  const { x, y } = getGroupPosition();
+
+  return (
+    <g key={tick} transform={`translate(${x}, ${y})`}>
+      {isXAxis ? renderTickContent('middle', 0, 10, 0, 6) : renderTickContent('end', -5, 0, -6, 0)}
+    </g>
+  );
+};
+
+export default CustomTick;
diff --git a/ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/ThresholdBar.interfaces.ts b/ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/ThresholdBar.interfaces.ts
new file mode 100644
index 00000000..266b4c16
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/ThresholdBar.interfaces.ts
@@ -0,0 +1,9 @@
+export interface ThresholdBarProps {
+  xScale: (value: number) => number;
+  yScale: (value: number) => number;
+  threshold?: number;
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
diff --git a/ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/index.tsx b/ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/index.tsx
new file mode 100644
index 00000000..c4027104
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/components/ThresholdBar/index.tsx
@@ -0,0 +1,53 @@
+import { useTheme } from '@mui/material';
+import React, { FC } from 'react';
+
+import { ThresholdBarProps } from './ThresholdBar.interfaces';
+
+const ThresholdBar: FC<ThresholdBarProps> = ({
+  xScale,
+  yScale,
+  threshold,
+  minX,
+  maxX,
+  minY,
+  maxY,
+}) => {
+  const theme = useTheme();
+
+  if (threshold === undefined || threshold <= 0 || threshold > maxY) {
+    return null;
+  }
+
+  const x0 = xScale(minX);
+  const y0 = yScale(minY);
+  const xMax = xScale(maxX);
+  const yThreshold = yScale(threshold);
+
+  if ([x0, y0, xMax, yThreshold].some((value) => value === undefined)) {
+    return null;
+  }
+
+  return (
+    <g>
+      <line
+        x1={x0}
+        y1={yThreshold}
+        x2={xMax - x0}
+        y2={yThreshold}
+        stroke={theme.palette.outline.main}
+        strokeWidth="1.5"
+        strokeDasharray="2.4 2.4"
+      />
+      <rect
+        id="threshold"
+        x={x0}
+        y={yThreshold}
+        width={xMax - x0}
+        height={y0 - yThreshold}
+        fill={theme.palette.surface.surfaceContainerHighest}
+      />
+    </g>
+  );
+};
+
+export default ThresholdBar;
diff --git a/ui/src/lib/components/Charts/MetricLine/index.tsx b/ui/src/lib/components/Charts/MetricLine/index.tsx
new file mode 100644
index 00000000..22a9636d
--- /dev/null
+++ b/ui/src/lib/components/Charts/MetricLine/index.tsx
@@ -0,0 +1,3 @@
+export { Component as MetricLine } from './MetricLine.component';
+export { LineColor } from './MetricLine.interface';
+export type { MetricLineProps } from './MetricLine.interface';
diff --git a/ui/src/lib/components/Charts/MiniCombined/MiniCombined.component.tsx b/ui/src/lib/components/Charts/MiniCombined/MiniCombined.component.tsx
new file mode 100644
index 00000000..96341cfe
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/MiniCombined.component.tsx
@@ -0,0 +1,131 @@
+import { useTheme } from '@mui/material';
+import { BarCustomLayerProps, ResponsiveBar } from '@nivo/bar';
+import { Point } from '@nivo/core';
+import React from 'react';
+
+import useChartScales from '../common/useChartScales';
+import CustomBars from './components/CustomBars';
+import CustomGrid from './components/CustomGrid';
+import CustomTick from './components/CustomTick';
+import { MiniCombinedWithResizeProps } from './MiniCombined.interfaces';
+
+export const Component = ({
+  bars,
+  lines,
+  margins,
+  xLegend,
+  containerSize,
+}: MiniCombinedWithResizeProps) => {
+  const theme = useTheme();
+  const combinedGraphTheme = {
+    axis: {
+      legend: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+          fontSize: theme.typography.axisTitle.fontSize,
+          fontWeight: theme.typography.axisTitle.fontWeight,
+          fontFamily: theme.typography.axisTitle.fontFamily,
+        },
+      },
+      ticks: {
+        text: {
+          fill: theme.palette.surface.onSurface,
+        },
+      },
+    },
+  };
+  const defaultMargins = { top: 10, left: 10, right: 10, bottom: 10 };
+  const finalMargins = {
+    ...defaultMargins,
+    ...margins,
+    bottom: margins?.bottom || defaultMargins.bottom,
+  };
+  const { xTicks, yTicks, fnScaleX, fnScaleY, innerHeight } = useChartScales({
+    bars,
+    lines,
+    width: containerSize.width,
+    height: containerSize.height,
+    margins: finalMargins,
+  });
+
+  const CustomGridLayer = () => {
+    const scaledWidth = fnScaleX(xTicks[xTicks.length - 1]);
+    const scaledHeight = innerHeight - fnScaleY(yTicks[0]);
+
+    return (
+      <CustomGrid
+        xScale={(d: number) => fnScaleX(d)}
+        yScale={(d: number) => innerHeight - fnScaleY(d)}
+        width={scaledWidth}
+        height={innerHeight}
+        xTicks={xTicks}
+        yTicks={yTicks}
+        scaledHeight={scaledHeight}
+      />
+    );
+  };
+
+  const CustomBarLayer = (props: BarCustomLayerProps<Point>) => {
+    const heightOffset = innerHeight - fnScaleY(yTicks[0]);
+    return (
+      <CustomBars
+        {...props}
+        xScaleFunc={(d: number) => fnScaleX(d)}
+        yScaleFunc={(d: number) => innerHeight - fnScaleY(d)}
+        heightOffset={heightOffset}
+      />
+    );
+  };
+  return (
+    <div
+      style={{
+        width: containerSize.width + 'px',
+        height: containerSize.height + 'px',
+        position: 'relative',
+      }}
+    >
+      <ResponsiveBar
+        animate={true}
+        data={bars}
+        keys={['y']}
+        indexBy="x"
+        margin={{
+          top: finalMargins.top,
+          right: finalMargins.right,
+          bottom: finalMargins.bottom,
+          left: finalMargins.left,
+        }}
+        padding={0.5}
+        colors={[theme.palette.primary.shades['0']]}
+        axisLeft={null}
+        axisBottom={{
+          tickValues: xTicks,
+          legend: xLegend,
+          legendPosition: 'middle',
+          legendOffset: 20,
+          tickSize: 5,
+          tickPadding: 5,
+          tickRotation: 0,
+          renderTick: (tick) => (
+            <CustomTick
+              isXAxis={true}
+              scale={(d: number) => fnScaleX(d)}
+              tick={xTicks[tick.tickIndex]}
+              isFirst={tick.tickIndex === 0}
+              isLast={tick.tickIndex === xTicks.length - 1}
+            />
+          ),
+        }}
+        layers={['axes', CustomGridLayer, CustomBarLayer]}
+        theme={combinedGraphTheme}
+      />
+      {/* <DottedLines
+        lines={lines}
+        leftMargin={finalMargins.left}
+        topMargin={finalMargins.top}
+        innerHeight={innerHeight}
+        xScale={fnScaleX}
+      /> */}
+    </div>
+  );
+};
diff --git a/ui/src/lib/components/Charts/MiniCombined/MiniCombined.interfaces.ts b/ui/src/lib/components/Charts/MiniCombined/MiniCombined.interfaces.ts
new file mode 100644
index 00000000..6e2b6b13
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/MiniCombined.interfaces.ts
@@ -0,0 +1,15 @@
+import { LinesSeries, Margins, Point } from '../common/interfaces';
+import { ContainerSize } from './components/ContainerSizeWrapper';
+
+export interface MiniCombinedProps {
+  bars: Point[];
+  lines: LinesSeries[];
+  width: number;
+  height: number;
+  margins?: Margins;
+  xLegend: string;
+}
+
+export interface MiniCombinedWithResizeProps extends MiniCombinedProps {
+  containerSize: ContainerSize;
+}
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/ContainerSizeWrapper/index.tsx b/ui/src/lib/components/Charts/MiniCombined/components/ContainerSizeWrapper/index.tsx
new file mode 100644
index 00000000..ae9dac6f
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/ContainerSizeWrapper/index.tsx
@@ -0,0 +1,39 @@
+import React, { useState, useEffect, useRef, RefObject } from 'react';
+
+interface ContainerSizeWrapperProps {
+  children: (containerSize: ContainerSize) => React.ReactNode;
+}
+
+export interface ContainerSize {
+  width: number;
+  height: number;
+}
+
+const ContainerSizeWrapper: React.FC<ContainerSizeWrapperProps> = ({ children }) => {
+  const [containerSize, setContainerSize] = useState<ContainerSize>({ width: 0, height: 0 });
+  const containerRef: RefObject<HTMLDivElement | null> = useRef(null);
+
+  useEffect(() => {
+    const updateSize = () => {
+      if (containerRef.current) {
+        setContainerSize({
+          width: containerRef.current.offsetWidth,
+          height: containerRef.current.offsetHeight,
+        });
+      }
+    };
+
+    updateSize();
+    window.addEventListener('resize', updateSize);
+
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      {children(containerSize)}
+    </div>
+  );
+};
+
+export default ContainerSizeWrapper;
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/CustomBars/CustomBars.interfaces.ts b/ui/src/lib/components/Charts/MiniCombined/components/CustomBars/CustomBars.interfaces.ts
new file mode 100644
index 00000000..faad401e
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/CustomBars/CustomBars.interfaces.ts
@@ -0,0 +1,7 @@
+import { BarCustomLayerProps } from '@nivo/bar';
+
+export interface CustomBarsProps<T> extends BarCustomLayerProps<T> {
+  xScaleFunc: (d: number) => number;
+  yScaleFunc: (d: number) => number;
+  heightOffset: number;
+}
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/CustomBars/index.tsx b/ui/src/lib/components/Charts/MiniCombined/components/CustomBars/index.tsx
new file mode 100644
index 00000000..f438d2b6
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/CustomBars/index.tsx
@@ -0,0 +1,87 @@
+import { ComputedBarDatum } from '@nivo/bar';
+import { Point } from '@nivo/core';
+import { useTooltip, BasicTooltip } from '@nivo/tooltip';
+import React from 'react';
+
+import { CustomBarsProps } from './CustomBars.interfaces';
+
+const CustomBars = ({ bars, xScaleFunc, yScaleFunc, heightOffset }: CustomBarsProps<Point>) => {
+  const { showTooltipFromEvent, hideTooltip } = useTooltip();
+  const minX =
+    bars.length === 1 ? 0 : Math.min(...bars.map((bar) => xScaleFunc(bar.data.data.x || 0)));
+  const maxX = Math.max(...bars.map((bar) => xScaleFunc(bar.data.data.x || 0)));
+  const handleMouseEnter = (
+    event: React.MouseEvent<SVGPathElement>,
+    bar: ComputedBarDatum<Point>
+  ) => {
+    const x = xScaleFunc(bar.data.data.x || 0) || 0;
+    const normalizedPosition = (x - minX) / (maxX - minX);
+    const maxPadding = 80;
+
+    let paddingLeft = 0;
+    let paddingRight = 0;
+    // log scale padding so that tooltip doesn't get cut off by the edges
+    if (normalizedPosition < 0.5) {
+      const logFactor = -Math.log(2 * normalizedPosition + 0.01) / Math.log(100);
+      paddingLeft = Math.min(maxPadding, Math.max(0, logFactor * maxPadding));
+    } else {
+      const logFactor = -Math.log(2 * (1 - normalizedPosition) + 0.01) / Math.log(100);
+      paddingRight = Math.min(maxPadding, Math.max(0, logFactor * maxPadding));
+    }
+    showTooltipFromEvent(
+      <div
+        style={{
+          paddingLeft: `${paddingLeft}px`,
+          paddingRight: `${paddingRight}px`,
+        }}
+      >
+        <BasicTooltip
+          id={`x: ${bar.data.data.x || 0}, y: ${bar.data.data.y}`}
+          enableChip={true}
+          color={bar.color}
+        />
+      </div>,
+      event
+    );
+  };
+
+  const handleMouseLeave = () => {
+    hideTooltip();
+  };
+
+  return (
+    <g transform={`translate(0,-${heightOffset})`}>
+      {bars.map((bar) => {
+        const barWidth = Math.min(10, bar.width);
+        const maxRadius = Math.floor(barWidth / 2);
+        const x = xScaleFunc(Number(bar.data.data.x || 0)) - barWidth / 2;
+        const y = yScaleFunc(Number(bar.data.data.y));
+        let r;
+        if (bar.height < 4) {
+          r = Math.min(1, maxRadius);
+        } else if (bar.height < barWidth) {
+          r = Math.min(Math.floor(bar.height / 2), maxRadius);
+        } else {
+          r = maxRadius;
+        }
+        r = Math.min(r, Math.floor(bar.height / 2));
+        const v = Math.max(0, bar.height - r);
+        const path = `M ${x + r},${y} h ${
+          barWidth - 2 * r
+        } a ${r},${r} 0 0 1 ${r},${r} v ${v} h -${barWidth} v -${v} a ${r},${r} 0 0 1 ${r},-${r} z`;
+
+        return (
+          <path
+            key={bar.key}
+            d={path}
+            fill={bar.color}
+            onMouseEnter={(event) => handleMouseEnter(event, bar)}
+            onMouseLeave={handleMouseLeave}
+          />
+        );
+      })}
+    </g>
+  );
+};
+
+export default CustomBars;
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/CustomGrid.interfaces.ts b/ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/CustomGrid.interfaces.ts
new file mode 100644
index 00000000..2e440fba
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/CustomGrid.interfaces.ts
@@ -0,0 +1,10 @@
+export interface CustomGridProps {
+  xScale: (d: number) => number;
+  yScale: (d: number) => number;
+  width: number;
+  height: number;
+  xTicks: number[];
+  yTicks: number[];
+  scaledHeight: number;
+  fullGrid?: boolean;
+}
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/index.tsx b/ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/index.tsx
new file mode 100644
index 00000000..0ef400b3
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/CustomGrid/index.tsx
@@ -0,0 +1,72 @@
+import { useTheme } from '@mui/material';
+
+import { CustomGridProps } from './CustomGrid.interfaces';
+
+const CustomGrid = ({
+  xScale,
+  yScale,
+  width,
+  height,
+  xTicks,
+  yTicks,
+  scaledHeight,
+  fullGrid = false,
+}: CustomGridProps) => {
+  const theme = useTheme();
+  // const xTick = xTicks[0];
+  const yTick = yTicks[yTicks.length - 1];
+
+  const renderAxlesOnly = (
+    <>
+      {/*<line*/}
+      {/*  key={`x${xTick}`}*/}
+      {/*  x1={xScale(xTick)}*/}
+      {/*  x2={xScale(xTick)}*/}
+      {/*  y1={scaledHeight}*/}
+      {/*  y2={height}*/}
+      {/*  stroke={theme.palette.outline.subdued}*/}
+      {/*/>*/}
+      <line
+        key={`y${yTick}`}
+        x1={0}
+        x2={width}
+        y1={yScale(yTick)}
+        y2={yScale(yTick)}
+        stroke={theme.palette.outline.subdued}
+      />
+    </>
+  );
+
+  const renderFullGrid = (
+    <>
+      {xTicks.map((tick) => (
+        <line
+          key={`x${tick}`}
+          x1={xScale(tick)}
+          x2={xScale(tick)}
+          y1={scaledHeight}
+          y2={height}
+          stroke={theme.palette.outline.subdued}
+        />
+      ))}
+      {yTicks.map((tick) => (
+        <line
+          key={`y${tick}`}
+          x1={0}
+          x2={width}
+          y1={yScale(tick)}
+          y2={yScale(tick)}
+          stroke={theme.palette.outline.subdued}
+        />
+      ))}
+    </>
+  );
+
+  return (
+    <g transform={`translate(0,-${scaledHeight})`} id="grid">
+      {fullGrid ? renderFullGrid : renderAxlesOnly}
+    </g>
+  );
+};
+
+export default CustomGrid;
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/CustomTick/CustomTick.interfaces.ts b/ui/src/lib/components/Charts/MiniCombined/components/CustomTick/CustomTick.interfaces.ts
new file mode 100644
index 00000000..efe5ef04
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/CustomTick/CustomTick.interfaces.ts
@@ -0,0 +1,8 @@
+export interface CustomTickProps {
+  scale: (d: number) => number;
+  isXAxis: boolean;
+  tick: number;
+  withTicks?: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+}
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/CustomTick/index.tsx b/ui/src/lib/components/Charts/MiniCombined/components/CustomTick/index.tsx
new file mode 100644
index 00000000..c4764019
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/CustomTick/index.tsx
@@ -0,0 +1,60 @@
+import { useTheme } from '@mui/material';
+
+import { CustomTickProps } from './CustomTick.interfaces';
+
+const CustomTick = ({
+  isXAxis,
+  tick,
+  scale,
+  withTicks = false,
+  isFirst,
+  isLast,
+}: CustomTickProps) => {
+  const theme = useTheme();
+
+  if (isXAxis && !isFirst && !isLast) {
+    return null;
+  }
+
+  const getGroupPosition = () => {
+    if (isXAxis) {
+      let x = scale(tick);
+      if (isFirst) {
+        x = 4;
+      }
+      if (isLast) {
+        x -= 4;
+      }
+      return { x, y: 0 };
+    }
+    return { x: 0, y: scale(tick) };
+  };
+
+  const renderTickContent = (textAnchor: 'middle' | 'end', x: number, y: number) => (
+    <>
+      {withTicks && <line x1={0} y1={0} x2={x} y2={y} stroke={theme.palette.surface.onSurface} />}
+      <text
+        textAnchor={textAnchor}
+        x={x === 0 ? undefined : x}
+        y={y === 0 ? undefined : y}
+        dominantBaseline={isXAxis ? undefined : 'middle'}
+        fontFamily={theme.typography.axisLabel.fontFamily}
+        fontWeight={theme.typography.axisLabel.fontWeight}
+        fontSize={theme.typography.axisLabel.fontSize}
+        fill={theme.palette.surface.onSurface}
+      >
+        {tick}
+      </text>
+    </>
+  );
+
+  const { x, y } = getGroupPosition();
+
+  return (
+    <g key={tick} transform={`translate(${x}, ${y})`}>
+      {isXAxis ? renderTickContent('middle', 0, 10) : renderTickContent('end', -5, 0)}
+    </g>
+  );
+};
+
+export default CustomTick;
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/DottedLines/DottedLines.interfaces.ts b/ui/src/lib/components/Charts/MiniCombined/components/DottedLines/DottedLines.interfaces.ts
new file mode 100644
index 00000000..be9085ee
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/DottedLines/DottedLines.interfaces.ts
@@ -0,0 +1,9 @@
+import { Point } from '../../../common/interfaces';
+
+export interface DottedLinesProps {
+  lines: Point[];
+  leftMargin: number;
+  topMargin: number;
+  innerHeight: number;
+  xScale: (d: number) => number;
+}
diff --git a/ui/src/lib/components/Charts/MiniCombined/components/DottedLines/index.tsx b/ui/src/lib/components/Charts/MiniCombined/components/DottedLines/index.tsx
new file mode 100644
index 00000000..869f457c
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/components/DottedLines/index.tsx
@@ -0,0 +1,31 @@
+import useLineColors from '../../../common/useLineColors';
+
+import { DottedLinesProps } from './DottedLines.interfaces';
+
+const DottedLines = ({ lines, leftMargin, topMargin, xScale, innerHeight }: DottedLinesProps) => {
+  const lineColor = useLineColors();
+  return (
+    <svg
+      style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
+      width="100%"
+      height="100%"
+    >
+      <g transform={`translate(${leftMargin}, ${topMargin})`}>
+        {lines.map((line, i) => (
+          <line
+            key={i}
+            x1={xScale(line.x)}
+            y1="0"
+            x2={xScale(line.x)}
+            y2={innerHeight}
+            stroke={lineColor[i]}
+            strokeWidth="1.5"
+            strokeDasharray="3,3"
+          />
+        ))}
+      </g>
+    </svg>
+  );
+};
+
+export default DottedLines;
diff --git a/ui/src/lib/components/Charts/MiniCombined/index.tsx b/ui/src/lib/components/Charts/MiniCombined/index.tsx
new file mode 100644
index 00000000..55532687
--- /dev/null
+++ b/ui/src/lib/components/Charts/MiniCombined/index.tsx
@@ -0,0 +1,2 @@
+export { Component as MiniCombined } from './MiniCombined.component';
+export type { MiniCombinedProps, MiniCombinedWithResizeProps } from './MiniCombined.interfaces';
diff --git a/ui/src/lib/components/Charts/common/interfaces.ts b/ui/src/lib/components/Charts/common/interfaces.ts
new file mode 100644
index 00000000..468fb4af
--- /dev/null
+++ b/ui/src/lib/components/Charts/common/interfaces.ts
@@ -0,0 +1,34 @@
+import { MiniCombinedProps } from '../MiniCombined/MiniCombined.interfaces';
+
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export type LinesSeries = Point & {
+  id: string;
+};
+
+export type Margins = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
+type RequiredCombinedProps = Required<MiniCombinedProps>;
+type RequiredMargins = Required<Margins>;
+type BaseChartScalesProps = Omit<RequiredCombinedProps, 'xLegend' | 'yLegend'>;
+export type ChartScalesProps = BaseChartScalesProps & {
+  margins: RequiredMargins;
+};
+
+export interface CombinedProps {
+  bars: Point[];
+  lines: LinesSeries[];
+  width: number;
+  height: number;
+  margins?: Margins;
+  xLegend: string;
+  yLegend: string;
+}
diff --git a/ui/src/lib/components/Charts/common/useChartScales.ts b/ui/src/lib/components/Charts/common/useChartScales.ts
new file mode 100644
index 00000000..99615e87
--- /dev/null
+++ b/ui/src/lib/components/Charts/common/useChartScales.ts
@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+
+import { ChartScalesProps } from './interfaces';
+
+export const calculateStep = (min: number, max: number) => {
+  const range = max - min;
+  const approxStep = range / 10;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(approxStep)));
+  return Math.ceil(approxStep / magnitude) * magnitude;
+};
+
+const useChartScales = ({ bars, width, height, margins }: ChartScalesProps) => {
+  return useMemo(() => {
+    const xValues = bars.map((d) => d.x);
+    const yValues = bars.map((d) => d.y);
+
+    const xMin = xValues.length === 1 ? 0 : Math.min(...xValues);
+    const xMax = Math.max(...xValues);
+    const yMin = Math.min(...yValues) > 0 ? 0 : Math.min(...yValues);
+    const yMax = Math.max(...yValues);
+
+    const xStep = calculateStep(xMin, xMax);
+    const yStep = calculateStep(yMin, yMax);
+
+    const xTicks = Array.from(
+      { length: Math.ceil((xMax - xMin) / xStep) + 1 },
+      (_, i) => xMin + i * xStep
+    );
+    const yTicks = Array.from(
+      { length: Math.ceil((yMax - yMin) / yStep) + 1 },
+      (_, i) => yMin + i * yStep
+    ).reverse();
+
+    const innerHeight = height - margins.top - margins.bottom;
+    const innerWidth = width - margins.left - margins.right;
+    const fnScaleX = (d: number) => innerWidth * Math.min(1, (d - xMin) / (xMax - xMin));
+    const fnScaleY = (d: number) => (innerHeight * (d - yMin)) / (yMax - yMin);
+
+    return {
+      xTicks,
+      yTicks,
+      fnScaleX,
+      fnScaleY,
+      innerWidth,
+      innerHeight,
+    };
+  }, [bars, width, height, margins]);
+};
+
+export default useChartScales;
diff --git a/ui/src/lib/components/Charts/common/useLineColors.tsx b/ui/src/lib/components/Charts/common/useLineColors.tsx
new file mode 100644
index 00000000..b0c9fe07
--- /dev/null
+++ b/ui/src/lib/components/Charts/common/useLineColors.tsx
@@ -0,0 +1,14 @@
+import { useTheme } from '@mui/material';
+
+const useLineColors = () => {
+  const theme = useTheme();
+  const palette = theme.palette;
+  return [
+    palette.primary.shades.W100,
+    palette.secondary.main,
+    palette.tertiary.main,
+    palette.quarternary.main,
+  ];
+};
+
+export default useLineColors;
diff --git a/ui/src/lib/components/DataPanel/DataPanel.component.tsx b/ui/src/lib/components/DataPanel/DataPanel.component.tsx
new file mode 100644
index 00000000..a8a29b1e
--- /dev/null
+++ b/ui/src/lib/components/DataPanel/DataPanel.component.tsx
@@ -0,0 +1,26 @@
+import { Typography } from '@mui/material';
+
+import { DataPanelProps } from './DataPanel.interfaces';
+import { BottomCell, InnerContainer, TopCell, HeaderContainer } from './DataPanel.styles';
+
+export const Component = ({ header, topContainer, bottomContainer }: DataPanelProps) => {
+  return (
+    <InnerContainer item xs={4}>
+      <HeaderContainer xs={12}>
+        <Typography variant="overline1" color="surface.onSurface">
+          {header}
+        </Typography>
+      </HeaderContainer>
+
+      <TopCell item xs={12} data-id="top-cell">
+        {topContainer}
+      </TopCell>
+
+      {bottomContainer && (
+        <BottomCell item xs={12} data-id="bottom-cell">
+          {bottomContainer}
+        </BottomCell>
+      )}
+    </InnerContainer>
+  );
+};
diff --git a/ui/src/lib/components/DataPanel/DataPanel.interfaces.ts b/ui/src/lib/components/DataPanel/DataPanel.interfaces.ts
new file mode 100644
index 00000000..3ea55a8d
--- /dev/null
+++ b/ui/src/lib/components/DataPanel/DataPanel.interfaces.ts
@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface DataPanelProps {
+  header: string;
+  topContainer: ReactNode;
+  bottomContainer?: ReactNode;
+}
diff --git a/ui/src/lib/components/DataPanel/DataPanel.styles.tsx b/ui/src/lib/components/DataPanel/DataPanel.styles.tsx
new file mode 100644
index 00000000..7c364ab8
--- /dev/null
+++ b/ui/src/lib/components/DataPanel/DataPanel.styles.tsx
@@ -0,0 +1,35 @@
+import { Grid, styled } from '@mui/material';
+
+import { HeaderContainer as HeaderContainerBase } from '../MetricsContainer/MetricsContainer.styles';
+
+export const InnerContainer = styled(Grid)(({ theme }) => ({
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: theme.palette.outline.subdued,
+  borderRadius: '8px',
+  overflow: 'hidden',
+  backgroundColor: theme.palette.surface.surfaceContainerLow,
+}));
+
+export const TopCell = styled(Grid)({
+  display: 'flex',
+  alignItems: 'flex-start',
+  height: '180px',
+  padding: '24px !important',
+});
+
+export const BottomCell = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: '220px',
+  height: '180px',
+  borderTopWidth: '1px',
+  borderTopStyle: 'solid',
+  borderTopColor: theme.palette.outline.subdued,
+  padding: '24px !important',
+}));
+
+export const HeaderContainer = styled(HeaderContainerBase)({
+  display: 'flex',
+  justifyContent: 'flex-start',
+});
diff --git a/ui/src/lib/components/DataPanel/index.tsx b/ui/src/lib/components/DataPanel/index.tsx
new file mode 100644
index 00000000..73cfde05
--- /dev/null
+++ b/ui/src/lib/components/DataPanel/index.tsx
@@ -0,0 +1,2 @@
+export { Component as DataPanel } from './DataPanel.component';
+export type { DataPanelProps } from './DataPanel.interfaces';
diff --git a/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.component.tsx b/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.component.tsx
new file mode 100644
index 00000000..e54da88c
--- /dev/null
+++ b/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.component.tsx
@@ -0,0 +1,22 @@
+import { Box, Typography } from '@mui/material';
+
+import { Badge } from '../Badge';
+import { Section } from '../Section';
+import { DistributionPercentilesProps } from './DistributionPercentiles.interfaces';
+
+export const Component = ({ list, rpsValue, units }: DistributionPercentilesProps) => {
+  return (
+    <Box>
+      <Box flexDirection="row" display="flex" alignItems="center" gap={'12px'}>
+        <Typography variant="overline1" color="surface.onSurfaceSubdued" textTransform="uppercase">
+          Distribution At
+        </Typography>
+        <Badge label={`${rpsValue} rps`} />
+      </Box>
+
+      {list.map((item) => (
+        <Section key={item.label} label={item.label} value={`${item.value} ${units}`} />
+      ))}
+    </Box>
+  );
+};
diff --git a/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.interfaces.tsx b/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.interfaces.tsx
new file mode 100644
index 00000000..23e86cfb
--- /dev/null
+++ b/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.interfaces.tsx
@@ -0,0 +1,10 @@
+export type PercentileItem = {
+  label: string;
+  value: string;
+};
+
+export interface DistributionPercentilesProps {
+  list: PercentileItem[];
+  rpsValue: number;
+  units: string;
+}
diff --git a/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.styles.tsx b/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.styles.tsx
new file mode 100644
index 00000000..19c7bd34
--- /dev/null
+++ b/ui/src/lib/components/DistributionPercentiles/DistributionPercentiles.styles.tsx
@@ -0,0 +1,8 @@
+import { Box, styled } from '@mui/material';
+
+export const BadgeContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  borderRadius: '6px',
+  padding: '4px 6px',
+  marginLeft: '12px',
+}));
diff --git a/ui/src/lib/components/DistributionPercentiles/index.tsx b/ui/src/lib/components/DistributionPercentiles/index.tsx
new file mode 100644
index 00000000..2e75fad0
--- /dev/null
+++ b/ui/src/lib/components/DistributionPercentiles/index.tsx
@@ -0,0 +1,5 @@
+export { Component as DistributionPercentiles } from './DistributionPercentiles.component';
+export type {
+  PercentileItem,
+  DistributionPercentilesProps,
+} from './DistributionPercentiles.interfaces';
diff --git a/ui/src/lib/components/GraphTitle/GraphTitle.component.tsx b/ui/src/lib/components/GraphTitle/GraphTitle.component.tsx
new file mode 100644
index 00000000..274269ee
--- /dev/null
+++ b/ui/src/lib/components/GraphTitle/GraphTitle.component.tsx
@@ -0,0 +1,12 @@
+import { Typography, useTheme } from '@mui/material';
+
+import { GraphTitleProps } from './GraphTitle.interfaces';
+
+export const Component = ({ title }: GraphTitleProps) => {
+  const theme = useTheme();
+  return (
+    <Typography variant="subtitle2" color={theme.palette.surface.onSurfaceSubdued} mb={2}>
+      {title}
+    </Typography>
+  );
+};
diff --git a/ui/src/lib/components/GraphTitle/GraphTitle.interfaces.ts b/ui/src/lib/components/GraphTitle/GraphTitle.interfaces.ts
new file mode 100644
index 00000000..70853edb
--- /dev/null
+++ b/ui/src/lib/components/GraphTitle/GraphTitle.interfaces.ts
@@ -0,0 +1,3 @@
+export interface GraphTitleProps {
+  title: string;
+}
diff --git a/ui/src/lib/components/GraphTitle/index.tsx b/ui/src/lib/components/GraphTitle/index.tsx
new file mode 100644
index 00000000..0dad3c2b
--- /dev/null
+++ b/ui/src/lib/components/GraphTitle/index.tsx
@@ -0,0 +1,2 @@
+export { Component as GraphTitle } from './GraphTitle.component';
+export type { GraphTitleProps } from './GraphTitle.interfaces';
diff --git a/ui/src/lib/components/Input/Input.component.tsx b/ui/src/lib/components/Input/Input.component.tsx
new file mode 100644
index 00000000..87caae82
--- /dev/null
+++ b/ui/src/lib/components/Input/Input.component.tsx
@@ -0,0 +1,60 @@
+import { Box, Typography } from '@mui/material';
+import React, { FC } from 'react';
+
+import { useColor } from '../../hooks/useColor';
+
+import { InputProps } from './Input.interfaces';
+import { StyledTextField, InputContainer, ErrorMessage } from './Input.styles';
+
+export const Component: FC<InputProps> = ({
+  label,
+  prefix,
+  disabled = false,
+  value,
+  onChange,
+  fullWidth = false,
+  fontColor,
+  error,
+  isNumber = false,
+}) => {
+  const selectedColor = useColor(fontColor);
+  return (
+    <Box>
+      <InputContainer
+        className={disabled ? 'disabled' : ''}
+        fullWidth={fullWidth}
+        data-id="input-wrapper"
+      >
+        <Typography variant="overline2" color="surface.onSurface">
+          {label}
+        </Typography>
+        <Box display="flex" alignItems="baseline">
+          {prefix && (
+            <Typography variant="body1" color="surface.onSurfaceAccent" sx={{ marginRight: 1 }}>
+              {prefix}
+            </Typography>
+          )}
+          <StyledTextField
+            fontColor={selectedColor}
+            disabled={disabled}
+            placeholder={label}
+            variant="standard"
+            type="number"
+            value={value}
+            onChange={onChange}
+            {...(isNumber && {
+              inputProps: {
+                type: 'number',
+                step: '1',
+                min: '0',
+              },
+            })}
+          />
+        </Box>
+      </InputContainer>
+      <ErrorMessage variant="caption" color="error.main">
+        {error || ' '}
+      </ErrorMessage>
+    </Box>
+  );
+};
diff --git a/ui/src/lib/components/Input/Input.interfaces.ts b/ui/src/lib/components/Input/Input.interfaces.ts
new file mode 100644
index 00000000..820132c3
--- /dev/null
+++ b/ui/src/lib/components/Input/Input.interfaces.ts
@@ -0,0 +1,23 @@
+import { ChangeEvent } from 'react';
+
+import { LineColor } from '@/lib/components/Charts/MetricLine';
+
+export interface InputProps {
+  label: string;
+  prefix?: string;
+  disabled?: boolean;
+  value: number | undefined;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  fullWidth?: boolean;
+  fontColor?: LineColor;
+  error?: string | undefined;
+  isNumber?: boolean;
+}
+
+export type CustomInputContainer = {
+  fullWidth?: boolean;
+};
+
+export type CustomInputProps = {
+  fontColor: string;
+};
diff --git a/ui/src/lib/components/Input/Input.styles.tsx b/ui/src/lib/components/Input/Input.styles.tsx
new file mode 100644
index 00000000..1d5a832e
--- /dev/null
+++ b/ui/src/lib/components/Input/Input.styles.tsx
@@ -0,0 +1,60 @@
+import { Box, styled, TextField, Typography } from '@mui/material';
+
+import { CustomInputContainer, CustomInputProps } from './Input.interfaces';
+
+export const StyledTextField = styled(TextField, {
+  shouldForwardProp: (propName) => propName !== 'fontColor',
+})<CustomInputProps>(({ theme, fontColor }) => ({
+  '& .MuiInputBase-input': {
+    color: fontColor,
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: theme.typography.body1.fontWeight,
+    padding: '0',
+  },
+  '& .MuiInput-underline:before': {
+    borderBottomColor: 'transparent',
+  },
+  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
+    borderBottomColor: 'transparent',
+  },
+  '& .MuiInput-underline:after': {
+    borderBottomColor: 'transparent',
+  },
+  '& input[type=number]': {
+    MozAppearance: 'textfield',
+  },
+  '& input[type=number]::-webkit-outer-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
+  },
+  '& input[type=number]::-webkit-inner-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
+  },
+  '& .Mui-disabled': {
+    color: theme.palette.surface.onSurfaceSubdued + ' !important',
+    WebkitTextFillColor: theme.palette.surface.onSurfaceSubdued + ' !important',
+  },
+}));
+
+export const InputContainer = styled(Box, {
+  shouldForwardProp: (propName) => propName !== 'fullWidth',
+})<CustomInputContainer>(({ theme, fullWidth }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  marginBottom: '8px',
+  padding: '8px 12px 11px 12px',
+  display: fullWidth ? 'block' : 'inline-block',
+  borderRadius: '8px',
+  minWidth: '168px',
+  width: 'auto',
+  flex: 1,
+  '&.disabled': { opacity: 0.4 },
+}));
+
+export const ErrorMessage = styled(Typography)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  minHeight: '15px',
+});
diff --git a/ui/src/lib/components/Input/index.tsx b/ui/src/lib/components/Input/index.tsx
new file mode 100644
index 00000000..70ca783d
--- /dev/null
+++ b/ui/src/lib/components/Input/index.tsx
@@ -0,0 +1,2 @@
+export { Component as Input } from './Input.component';
+export type { InputProps } from './Input.interfaces';
diff --git a/ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.component.tsx b/ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.component.tsx
new file mode 100644
index 00000000..a83c0ebe
--- /dev/null
+++ b/ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.component.tsx
@@ -0,0 +1,22 @@
+import { Box, Typography } from '@mui/material';
+
+import { Badge } from '../Badge';
+import { MeanMetricSummaryProps } from './MeanMetricSummary.interfaces';
+
+export const Component = ({ meanValue, meanUnit, rpsValue }: MeanMetricSummaryProps) => {
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row" display="flex" alignItems="center" gap={'12px'}>
+        <Typography variant="overline1" color="surface.onSurfaceSubdued" textTransform="uppercase">
+          Mean At
+        </Typography>
+        <Badge label={`${rpsValue} rps`} />
+      </Box>
+      <Box flexDirection="row" display="flex">
+        <Typography variant="h4" color="surface.onSurfaceAccent" pt={1}>
+          {meanValue} {meanUnit}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
diff --git a/ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.interfaces.tsx b/ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.interfaces.tsx
new file mode 100644
index 00000000..d7561593
--- /dev/null
+++ b/ui/src/lib/components/MeanMetricSummary/MeanMetricSummary.interfaces.tsx
@@ -0,0 +1,5 @@
+export interface MeanMetricSummaryProps {
+  meanValue: string;
+  meanUnit: string;
+  rpsValue: number;
+}
diff --git a/ui/src/lib/components/MeanMetricSummary/index.tsx b/ui/src/lib/components/MeanMetricSummary/index.tsx
new file mode 100644
index 00000000..86d23f77
--- /dev/null
+++ b/ui/src/lib/components/MeanMetricSummary/index.tsx
@@ -0,0 +1,2 @@
+export { Component as MeanMetricSummary } from './MeanMetricSummary.component';
+export type { MeanMetricSummaryProps } from './MeanMetricSummary.interfaces';
diff --git a/ui/src/lib/components/MetricsContainer/MetricsContainer.component.tsx b/ui/src/lib/components/MetricsContainer/MetricsContainer.component.tsx
new file mode 100644
index 00000000..41c2122c
--- /dev/null
+++ b/ui/src/lib/components/MetricsContainer/MetricsContainer.component.tsx
@@ -0,0 +1,48 @@
+import { Grid, Typography } from '@mui/material';
+
+import { MetricsContainerProps } from './MetricsContainer.interfaces';
+import {
+  HeaderContainer,
+  InnerContainer,
+  MainContainer,
+  RightColumn,
+} from './MetricsContainer.styles';
+
+export const Component = ({ header, leftColumn, rightColumn, children }: MetricsContainerProps) => {
+  return (
+    <InnerContainer container spacing={2}>
+      <HeaderContainer xs={12} flexDirection="row" display="flex" justifyContent="space-between">
+        <Typography variant="overline1" color="surface.onSurface">
+          {header}
+        </Typography>
+      </HeaderContainer>
+
+      <MainContainer
+        xs={12}
+        padding="24px"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        display="flex"
+      >
+        {children}
+      </MainContainer>
+
+      {/* middle containers  */}
+      <Grid
+        xs={rightColumn ? 6 : 12}
+        display="flex"
+        alignItems="center"
+        padding="24px"
+        minHeight="232px"
+      >
+        {leftColumn}
+      </Grid>
+      {rightColumn && (
+        <RightColumn xs={6} display="flex" alignItems="center" padding="24px" minHeight="232px">
+          {rightColumn}
+        </RightColumn>
+      )}
+    </InnerContainer>
+  );
+};
diff --git a/ui/src/lib/components/MetricsContainer/MetricsContainer.interfaces.ts b/ui/src/lib/components/MetricsContainer/MetricsContainer.interfaces.ts
new file mode 100644
index 00000000..cd709539
--- /dev/null
+++ b/ui/src/lib/components/MetricsContainer/MetricsContainer.interfaces.ts
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface MetricsContainerProps {
+  header: string;
+  leftColumn: ReactNode;
+  rightColumn?: ReactNode;
+  children: ReactNode;
+}
diff --git a/ui/src/lib/components/MetricsContainer/MetricsContainer.styles.tsx b/ui/src/lib/components/MetricsContainer/MetricsContainer.styles.tsx
new file mode 100644
index 00000000..2117afaa
--- /dev/null
+++ b/ui/src/lib/components/MetricsContainer/MetricsContainer.styles.tsx
@@ -0,0 +1,33 @@
+import { Grid, styled } from '@mui/material';
+
+export const InnerContainer = styled(Grid)(({ theme }) => ({
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: theme.palette.outline.subdued,
+  borderRadius: '8px',
+  overflow: 'hidden',
+  backgroundColor: theme.palette.surface.surfaceContainerLow,
+  marginLeft: 0,
+  marginTop: 0,
+}));
+
+export const HeaderContainer = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainer,
+  borderBottomWidth: '1px',
+  borderBottomStyle: 'solid',
+  borderBottomColor: theme.palette.outline.subdued,
+  padding: '18px 24px',
+  margin: 0,
+}));
+
+export const RightColumn = styled(Grid)(({ theme }) => ({
+  borderLeftWidth: '1px',
+  borderLeftStyle: 'solid',
+  borderLeftColor: theme.palette.outline.subdued,
+}));
+
+export const MainContainer = styled(Grid)(({ theme }) => ({
+  borderBottomWidth: '1px',
+  borderBottomStyle: 'solid',
+  borderBottomColor: theme.palette.outline.subdued,
+}));
diff --git a/ui/src/lib/components/MetricsContainer/index.tsx b/ui/src/lib/components/MetricsContainer/index.tsx
new file mode 100644
index 00000000..d6bbc5f2
--- /dev/null
+++ b/ui/src/lib/components/MetricsContainer/index.tsx
@@ -0,0 +1,2 @@
+export { Component as MetricsContainer } from './MetricsContainer.component';
+export type { MetricsContainerProps } from './MetricsContainer.interfaces';
diff --git a/ui/src/lib/components/MetricsSummary/MetricSummary.interfaces.ts b/ui/src/lib/components/MetricsSummary/MetricSummary.interfaces.ts
new file mode 100644
index 00000000..b806b4e6
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/MetricSummary.interfaces.ts
@@ -0,0 +1,3 @@
+export type CustomSelectProps = {
+  placeholder?: string;
+};
diff --git a/ui/src/lib/components/MetricsSummary/MetricsSummary.component.tsx b/ui/src/lib/components/MetricsSummary/MetricsSummary.component.tsx
new file mode 100644
index 00000000..cbc3c05e
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/MetricsSummary.component.tsx
@@ -0,0 +1,303 @@
+import { Box, Button, Typography, useTheme } from '@mui/material';
+import React, { ElementType } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { MetricLine, LineColor } from '@/lib/components/Charts/MetricLine';
+import { selectSloState } from '@/lib/store/slices/slo/slo.selectors';
+import { setCurrentRequestRate } from '@/lib/store/slices/slo/slo.slice';
+
+import { Expand } from '../../../app/assets/icons';
+
+import {
+  selectInterpolatedMetrics,
+  selectMetricsSummaryLineData,
+  useGetBenchmarksQuery,
+} from '../../store/slices/benchmarks';
+
+import { selectRunInfo } from '../../store/slices/runInfo';
+import { formatNumber } from '../../utils/helpers';
+
+import { BlockHeader } from '../BlockHeader';
+import { Input } from '../Input';
+import { MetricValue } from './components/MetricValue';
+import {
+  CustomSlider,
+  FieldCell,
+  FieldsContainer,
+  FooterLeftCell,
+  FooterRightCell,
+  GraphContainer,
+  HeaderLeftCell,
+  HeaderRightCell,
+  MetricsSummaryContainer,
+  MiddleColumn,
+  InputContainer,
+  StyledSelect,
+  StyledInputLabel,
+  OptionItem,
+  StyledFormControl,
+} from './MetricsSummary.styles';
+import { useSummary } from './useSummary';
+
+const percentileOptions = ['p50', 'p90', 'p95', 'p99'];
+
+export const Component = () => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const { data } = useGetBenchmarksQuery();
+
+  const lineDataByRps = useSelector(selectMetricsSummaryLineData);
+  const interpolatedMetricData = useSelector(selectInterpolatedMetrics);
+  const runInfo = useSelector(selectRunInfo);
+
+  const { currentRequestRate } = useSelector(selectSloState);
+  const handleSliderChange = (event: Event, newValue: number | number[]) => {
+    dispatch(setCurrentRequestRate(newValue as number));
+  };
+
+  const {
+    ttft: ttftSLO,
+    tpot: tpotSLO,
+    timePerRequest: timePerRequestSLO,
+    throughput: throughputSLO,
+    percentile,
+    minX,
+    maxX,
+    errors,
+    handleTtft,
+    handleTpot,
+    handleTimePerRequest,
+    handleThroughput,
+    handlePercentileChange,
+    handleReset,
+  } = useSummary();
+
+  const isTtftMatch = Boolean(
+    ttftSLO && interpolatedMetricData.ttft.enforcedPercentileValue <= ttftSLO
+  );
+  const isTpotMatch = Boolean(
+    tpotSLO && interpolatedMetricData.tpot.enforcedPercentileValue <= tpotSLO
+  );
+  const isTprMatch = Boolean(
+    timePerRequestSLO &&
+      interpolatedMetricData.timePerRequest.enforcedPercentileValue <= timePerRequestSLO
+  );
+  const isThroughputMatch = Boolean(
+    throughputSLO && interpolatedMetricData.throughput.enforcedPercentileValue >= throughputSLO
+  );
+
+  const sliderMarks = [
+    {
+      value: minX,
+      label: minX,
+    },
+    {
+      value: maxX,
+      label: maxX,
+    },
+  ];
+
+  if ((data?.benchmarks?.length ?? 0) <= 1) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <BlockHeader label="Metrics Summary" />
+      <MetricsSummaryContainer container>
+        <HeaderLeftCell item xs={9}>
+          <Box display="flex" flexDirection="row" justifyContent="space-between">
+            <Typography variant="h6" color="surface.onSurface" mb={2}>
+              Service Level Objectives for{' '}
+              <span style={{ color: theme.palette.surface.onSurfaceAccent }}>
+                [{runInfo?.task || 'N/A'}]
+              </span>
+              :
+            </Typography>
+
+            <Button onClick={handleReset}>
+              <Typography variant="button" color="surface.onSurfaceAccent" mb={2}>
+                RESET TO DEFAULT
+              </Typography>
+            </Button>
+          </Box>
+
+          <FieldsContainer data-id="fields-container">
+            <FieldCell data-id="field-cell-1">
+              <Input
+                label="TTFT (ms)"
+                value={ttftSLO}
+                onChange={handleTtft}
+                fullWidth
+                fontColor={LineColor.Primary}
+                error={errors?.ttft}
+              />
+            </FieldCell>
+            <FieldCell data-id="field-cell-2">
+              <Input
+                label="TPOT (ms)"
+                value={tpotSLO}
+                onChange={handleTpot}
+                fullWidth
+                fontColor={LineColor.Secondary}
+                error={errors?.tpot}
+              />
+            </FieldCell>
+            <FieldCell data-id="field-cell-3">
+              <Input
+                label="TIME PER REQUEST (Ms)"
+                value={timePerRequestSLO}
+                onChange={handleTimePerRequest}
+                fullWidth
+                fontColor={LineColor.Tertiary}
+                error={errors?.timePerRequest}
+              />
+            </FieldCell>
+            <FieldCell data-id="field-cell-4">
+              <Input
+                label="THROUGHPUT (tok/s)"
+                value={throughputSLO}
+                onChange={handleThroughput}
+                fullWidth
+                fontColor={LineColor.Quarternary}
+                error={errors?.throughput}
+              />
+            </FieldCell>
+          </FieldsContainer>
+        </HeaderLeftCell>
+        <HeaderRightCell item xs={3}>
+          <Typography variant="h6" color="surface.onSurface" mb={'23px'}>
+            Observed Values at:
+          </Typography>
+
+          <InputContainer>
+            <StyledFormControl fullWidth sx={{ fieldset: { legend: { maxWidth: '100%' } } }}>
+              <StyledInputLabel shrink={true}>percentile</StyledInputLabel>
+              <StyledSelect
+                value={percentile}
+                onChange={handlePercentileChange}
+                autoWidth
+                placeholder="Select percentile"
+                IconComponent={Expand as ElementType}
+                displayEmpty
+                MenuProps={{
+                  PaperProps: {
+                    sx: {
+                      backgroundColor: theme.palette.surface.surfaceContainerLow,
+                      borderRadius: '8px',
+                    },
+                  },
+                }}
+              >
+                {percentileOptions.map((value) => (
+                  <OptionItem key={value} value={value} sx={{ minWidth: '168px' }}>
+                    {value}
+                  </OptionItem>
+                ))}
+              </StyledSelect>
+            </StyledFormControl>
+          </InputContainer>
+        </HeaderRightCell>
+        {/* graphs */}
+
+        <MiddleColumn sx={{ paddingLeft: '0px !important' }} item xs={9}>
+          <GraphContainer>
+            <MetricLine
+              data={[{ id: 'ttft', data: lineDataByRps.ttft || [] }]}
+              threshold={ttftSLO}
+              lineColor={LineColor.Primary}
+            />
+          </GraphContainer>
+        </MiddleColumn>
+        <MiddleColumn item xs={3}>
+          <MetricValue
+            label="TTFT"
+            value={`${formatNumber(interpolatedMetricData.ttft.enforcedPercentileValue)} ms`}
+            match={isTtftMatch}
+            valueColor={LineColor.Primary}
+          />
+        </MiddleColumn>
+
+        <MiddleColumn sx={{ paddingLeft: '0px !important' }} item xs={9}>
+          <GraphContainer>
+            <MetricLine
+              data={[{ id: 'tpot', data: lineDataByRps.tpot || [] }]}
+              threshold={tpotSLO}
+              lineColor={LineColor.Secondary}
+            />
+          </GraphContainer>
+        </MiddleColumn>
+        <MiddleColumn item xs={3}>
+          <MetricValue
+            label="TPOT"
+            value={`${formatNumber(interpolatedMetricData.tpot.enforcedPercentileValue)} ms`}
+            match={isTpotMatch}
+            valueColor={LineColor.Secondary}
+          />
+        </MiddleColumn>
+
+        <MiddleColumn sx={{ paddingLeft: '0px !important' }} item xs={9}>
+          <GraphContainer>
+            <MetricLine
+              data={[{ id: 'time per request', data: lineDataByRps.timePerRequest || [] }]}
+              threshold={timePerRequestSLO}
+              lineColor={LineColor.Tertiary}
+            />
+          </GraphContainer>
+        </MiddleColumn>
+        <MiddleColumn item xs={3}>
+          <MetricValue
+            label="time per request"
+            value={`${formatNumber(
+              interpolatedMetricData.timePerRequest.enforcedPercentileValue
+            )} ms`}
+            match={isTprMatch}
+            valueColor={LineColor.Tertiary}
+          />
+        </MiddleColumn>
+
+        <MiddleColumn sx={{ paddingLeft: '0px !important' }} item xs={9}>
+          <GraphContainer>
+            <MetricLine
+              data={[{ id: 'throughput', data: lineDataByRps.throughput || [] }]}
+              threshold={throughputSLO}
+              lineColor={LineColor.Quarternary}
+            />
+          </GraphContainer>
+        </MiddleColumn>
+        <MiddleColumn item xs={3}>
+          <MetricValue
+            value={`${formatNumber(
+              interpolatedMetricData.throughput.enforcedPercentileValue
+            )} tok/s`}
+            label="throughput"
+            match={isThroughputMatch}
+            valueColor={LineColor.Quarternary}
+          />
+        </MiddleColumn>
+
+        {/* slider */}
+        <FooterLeftCell item xs={9}>
+          <CustomSlider
+            size="medium"
+            step={0.01}
+            value={formatNumber(currentRequestRate, 2)}
+            min={minX}
+            max={maxX}
+            marks={sliderMarks}
+            valueLabelDisplay="on"
+            onChange={handleSliderChange}
+          />
+        </FooterLeftCell>
+        <FooterRightCell item xs={3}>
+          <Typography variant="overline1" color="surface.onSurface" textTransform="uppercase">
+            Maximum RPS per gpu
+          </Typography>
+          <Typography variant="metric1" color="primary">
+            {formatNumber(currentRequestRate)} rps
+          </Typography>
+        </FooterRightCell>
+      </MetricsSummaryContainer>
+    </>
+  );
+};
diff --git a/ui/src/lib/components/MetricsSummary/MetricsSummary.styles.tsx b/ui/src/lib/components/MetricsSummary/MetricsSummary.styles.tsx
new file mode 100644
index 00000000..83b5ce1d
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/MetricsSummary.styles.tsx
@@ -0,0 +1,213 @@
+import {
+  Box,
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  Slider,
+  styled,
+} from '@mui/material';
+
+import { CustomSelectProps } from './MetricSummary.interfaces';
+
+export const MetricsSummaryContainer = styled(Grid)(({ theme }) => ({
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: theme.palette.outline.subdued,
+  borderRadius: '8px',
+  overflow: 'hidden',
+  backgroundColor: theme.palette.surface.surfaceContainerLow,
+}));
+
+export const MiddleColumn = styled(Grid)(({ theme }) => ({
+  borderBottomWidth: 1,
+  borderBottomColor: theme.palette.outline.subdued,
+  borderBottomStyle: 'solid',
+  padding: '16px',
+}));
+
+export const FieldsContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: '16px',
+});
+
+export const FieldCell = styled('div')({
+  flex: 1,
+  minWidth: 'calc((100% - 3 * 16px) / 4)',
+  boxSizing: 'border-box',
+});
+
+export const HeaderLeftCell = styled(Grid)(({ theme }) => ({
+  borderBottomWidth: 1,
+  borderBottomColor: theme.palette.outline.subdued,
+  borderBottomStyle: 'solid',
+  paddingTop: '16px',
+  paddingLeft: '16px',
+  paddingBottom: '16px',
+  paddingRight: '8px',
+}));
+
+export const HeaderRightCell = styled(Grid)(({ theme }) => ({
+  borderBottomWidth: 1,
+  borderBottomColor: theme.palette.outline.subdued,
+  borderBottomStyle: 'solid',
+  borderLeftWidth: 1,
+  borderLeftColor: theme.palette.outline.subdued,
+  borderLeftStyle: 'solid',
+  paddingTop: '16px',
+  paddingLeft: '8px',
+  paddingBottom: '16px',
+  paddingRight: '24px',
+}));
+
+export const FooterRightCell = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+  padding: '16px',
+}));
+
+export const FooterLeftCell = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  paddingTop: '32px',
+  paddingBottom: '16px',
+  paddingLeft: '36px',
+  paddingRight: '26px',
+}));
+
+export const CustomSlider = styled(Slider)(({ theme }) => ({
+  '& .MuiSlider-valueLabel': {
+    backgroundColor: theme.palette.surface.surfaceContainer,
+    color: theme.palette.surface.onSurface,
+    opacity: 1,
+    fontSize: theme.typography.caption.fontSize,
+    fontFamily: theme.typography.caption.fontFamily,
+    fontWeight: theme.typography.caption.fontWeight,
+    lineHeight: theme.typography.caption.lineHeight,
+  },
+  '& .MuiSlider-markLabel': {
+    color: theme.palette.surface.onSurface,
+    opacity: 1,
+    fontSize: theme.typography.caption.fontSize,
+    fontFamily: theme.typography.caption.fontFamily,
+    fontWeight: theme.typography.caption.fontWeight,
+    lineHeight: theme.typography.caption.lineHeight,
+  },
+  '& .MuiSlider-thumb': {
+    position: 'relative',
+    '&::before, &::after': {
+      borderRadius: 0,
+      content: '""',
+      position: 'absolute',
+      top: '-510px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      width: '1px',
+      height: '470px',
+      display: 'block',
+      borderLeftColor: theme.palette.primary.main,
+      borderLeftWidth: '1px',
+      borderLeftStyle: 'dashed',
+    },
+    // '&::after': {
+    //   left: 'calc(50% - 1px)',
+    // },
+  },
+}));
+
+export const GraphContainer = styled('div')({
+  width: '100%',
+  height: '90px',
+  overflow: 'visible',
+});
+
+export const InputContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  padding: '8px 12px',
+  display: 'block',
+  borderRadius: '8px',
+  minWidth: '168px',
+  width: 'auto',
+  height: '50px',
+  overflow: 'hidden',
+  '&.disabled': { opacity: 0.4 },
+}));
+
+export const StyledSelect = styled(Select, {
+  shouldForwardProp: (propName) => propName !== 'placeholder',
+})<CustomSelectProps>(({ theme, placeholder }) => ({
+  '& .MuiSelect-select .notranslate::after': placeholder
+    ? {
+        content: `"${placeholder}"`,
+        opacity: 0.42,
+      }
+    : {},
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      borderColor: 'transparent',
+    },
+    '&:hover fieldset': {
+      borderColor: 'transparent',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'transparent',
+    },
+  },
+  '& .MuiSelect-select': {
+    padding: '24px 14px',
+  },
+  '& .MuiInputLabel-root': {
+    color: theme.palette.text.secondary,
+    marginTop: '8px',
+    marginBottom: '8px',
+  },
+  '& .MuiInputLabel-root.Mui-focused': {
+    color: theme.palette.surface.onSurfaceSubdued,
+  },
+  '& .MuiInputLabel-root.MuiFormLabel-filled': {
+    color: theme.palette.surface.onSurfaceSubdued,
+  },
+  '& .MuiInputBase-input': {
+    color: theme.palette.surface.onSurfaceSubdued,
+  },
+}));
+
+export const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
+  color: theme.palette.surface.onSurface,
+  textTransform: 'uppercase',
+  marginTop: '6px',
+  '&.MuiInputLabel-shrink': {
+    transform: 'translate(14px, 0px) scale(0.75)',
+    color: theme.palette.surface.onSurface,
+  },
+}));
+
+export const StyledFormControl = styled(FormControl)({
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      borderColor: 'transparent',
+    },
+    '&:hover fieldset': {
+      borderColor: 'transparent',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'transparent',
+    },
+  },
+});
+
+export const OptionItem = styled(MenuItem)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerLow,
+  color: theme.palette.surface.onSurface,
+  '&:hover': {
+    backgroundColor: theme.palette.surface.surfaceContainerHigh,
+    color: theme.palette.surface.onSurface,
+  },
+  '&.Mui-selected': {
+    backgroundColor: theme.palette.surface.surfaceContainerHigh,
+    color: theme.palette.surface.onSurface,
+  },
+}));
diff --git a/ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.component.tsx b/ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.component.tsx
new file mode 100644
index 00000000..85ccb611
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.component.tsx
@@ -0,0 +1,27 @@
+import { Box, Typography } from '@mui/material';
+import { FC } from 'react';
+
+import { CheckCircle, WarningCircle } from '../../../../../app/assets/icons';
+import { useColor } from '../../../../hooks/useColor';
+
+import { MetricValueProps } from './MetricValue.interfaces';
+
+export const Component: FC<MetricValueProps> = ({ label, value, match, valueColor }) => {
+  const selectedColor = useColor(valueColor);
+  return (
+    <Box display="flex" flexDirection="column" alignItems="flex-end" gap={1}>
+      <Box display="flex" flexDirection="row">
+        <Typography variant="overline2" color="surface.onSurface" textTransform="uppercase">
+          {label}
+        </Typography>
+        <Typography variant="overline2" color="surface.onSurfaceSubdued" pl={0.5}>
+          (observed)
+        </Typography>
+      </Box>
+      <Typography variant="metric1" color={selectedColor}>
+        {value}
+      </Typography>
+      {match ? <CheckCircle /> : <WarningCircle />}
+    </Box>
+  );
+};
diff --git a/ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.interfaces.ts b/ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.interfaces.ts
new file mode 100644
index 00000000..fb3155e3
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/components/MetricValue/MetricValue.interfaces.ts
@@ -0,0 +1,8 @@
+import { LineColor } from '@/lib/components/Charts/MetricLine';
+
+export interface MetricValueProps {
+  label: string;
+  value: string;
+  match: boolean;
+  valueColor: LineColor;
+}
diff --git a/ui/src/lib/components/MetricsSummary/components/MetricValue/index.tsx b/ui/src/lib/components/MetricsSummary/components/MetricValue/index.tsx
new file mode 100644
index 00000000..45775c65
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/components/MetricValue/index.tsx
@@ -0,0 +1,2 @@
+export { Component as MetricValue } from './MetricValue.component';
+export type { MetricValueProps } from './MetricValue.interfaces';
diff --git a/ui/src/lib/components/MetricsSummary/index.tsx b/ui/src/lib/components/MetricsSummary/index.tsx
new file mode 100644
index 00000000..ef1a8e00
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/index.tsx
@@ -0,0 +1 @@
+export { Component as MetricsSummary } from './MetricsSummary.component';
diff --git a/ui/src/lib/components/MetricsSummary/useSummary.ts b/ui/src/lib/components/MetricsSummary/useSummary.ts
new file mode 100644
index 00000000..9cd10ca5
--- /dev/null
+++ b/ui/src/lib/components/MetricsSummary/useSummary.ts
@@ -0,0 +1,118 @@
+import { SelectChangeEvent } from '@mui/material';
+import { ChangeEvent, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Point } from '@/lib/components/Charts/common/interfaces';
+
+import { selectMetricsSummaryLineData } from '../../store/slices/benchmarks';
+import { selectSloState } from '../../store/slices/slo/slo.selectors';
+import { setEnforcedPercentile, setSloValue } from '../../store/slices/slo/slo.slice';
+import { ceil, floor } from '../../utils/helpers';
+
+type Errors = { [key: string]: string | undefined };
+
+const initErrorsState: Errors = {
+  ttft: undefined,
+  tpot: undefined,
+  timePerRequest: undefined,
+  throughput: undefined,
+};
+
+const findMinMax = (lineData: Point[]) => {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+
+  for (let i = 0; i < lineData.length; i++) {
+    const { x, y } = lineData[i];
+    if (x < minX) {
+      minX = ceil(x, 2);
+    }
+    if (x > maxX) {
+      maxX = floor(x, 2);
+    }
+    if (y < minY) {
+      minY = ceil(y, 2);
+    }
+    if (y > maxY) {
+      maxY = floor(y, 2);
+    }
+  }
+
+  return { minX, maxX, minY, maxY };
+};
+
+export const useSummary = () => {
+  const dispatch = useDispatch();
+
+  const { current, enforcedPercentile, tasksDefaults } = useSelector(selectSloState);
+  const { ttft, tpot, timePerRequest, throughput } = useSelector(selectMetricsSummaryLineData);
+
+  const [errors, setErrors] = useState<Errors>(initErrorsState);
+
+  const ttftLimits = findMinMax(ttft || []);
+  const tpotLimits = findMinMax(tpot || []);
+  const timePerRequestLimits = findMinMax(timePerRequest || []);
+  const throughputLimits = findMinMax(throughput || []);
+
+  const limitsByMetric = {
+    ttft: ttftLimits,
+    tpot: tpotLimits,
+    timePerRequest: timePerRequestLimits,
+    throughput: throughputLimits,
+  };
+
+  const validateInput = (field: keyof typeof current, value?: number) => {
+    let error: string | undefined;
+    const limits = limitsByMetric[field];
+    if (value === undefined) {
+      error = 'Invalid value';
+    } else if (value > limits.maxY) {
+      error = 'Error: Larger than maximum';
+    } else if (value < limits.minY) {
+      error = 'Error: Smaller than minimum';
+    }
+    setErrors((prev) => ({ ...prev, [field]: error }));
+  };
+
+  const sanitizeInput = (value: string) => {
+    const sanitizedValue = value.replace(/\D/g, '');
+    return sanitizedValue !== '' ? Number(sanitizedValue) : undefined;
+  };
+
+  const handleChange = (metric: keyof typeof current) => (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = sanitizeInput(event.target.value);
+    validateInput(metric, newValue);
+    if (newValue !== undefined) {
+      dispatch(setSloValue({ metric, value: newValue }));
+    }
+  };
+
+  const handlePercentileChange = (event: SelectChangeEvent<unknown>) => {
+    // TODO: need to validate slos on percentile change
+    const newValue = `${event.target.value}`;
+    dispatch(setEnforcedPercentile(newValue));
+  };
+
+  const handleReset = () => {
+    Object.entries(tasksDefaults).forEach(([metric, value]) => {
+      dispatch(setSloValue({ metric: metric as keyof typeof current, value }));
+    });
+    setErrors(initErrorsState);
+  };
+
+  return {
+    ...current,
+    percentile: enforcedPercentile,
+    minX: ttftLimits.minX,
+    maxX: ttftLimits.maxX,
+    errors,
+    handleTtft: handleChange('ttft'),
+    handleTpot: handleChange('tpot'),
+    handleTimePerRequest: handleChange('timePerRequest'),
+    handleThroughput: handleChange('throughput'),
+    handlePercentileChange,
+    handleReset,
+  };
+};
diff --git a/ui/src/lib/components/PageHeader/PageHeader.component.tsx b/ui/src/lib/components/PageHeader/PageHeader.component.tsx
new file mode 100644
index 00000000..4c3b054f
--- /dev/null
+++ b/ui/src/lib/components/PageHeader/PageHeader.component.tsx
@@ -0,0 +1,101 @@
+'use client';
+import { Box, Link, Typography, useTheme } from '@mui/material';
+import dynamic from 'next/dynamic';
+import NextLink from 'next/link';
+
+import { useGetRunInfoQuery } from '../../store/slices/runInfo';
+import { formateDate, getFileSize } from '../../utils/helpers';
+import { SvgContainer } from '../../utils/SvgContainer';
+import { Open } from '@assets/icons';
+
+import { SpecBadge } from '../SpecBadge';
+import { HeaderCell, HeaderWrapper } from './PageHeader.styles';
+
+const Component = () => {
+  const theme = useTheme();
+  const { data } = useGetRunInfoQuery();
+  const modelSize = getFileSize(data?.model?.size || 0);
+
+  return (
+    <Box py={2}>
+      <Typography variant="h1" color="white">
+        Header
+      </Typography>
+      <Typography variant="subtitle2" color="surface.onSurfaceAccent">
+        Guidellm
+      </Typography>
+      <Typography variant="h4" color="surface.onSurface" my={'12px'}>
+        Workload Report: Single Experiment
+      </Typography>
+      <HeaderWrapper container>
+        <HeaderCell item xs={5} withDivider sx={{ paddingLeft: 0 }}>
+          <SpecBadge
+            label="Model"
+            value={data?.model?.name || 'N/A'}
+            variant="metric2"
+            withTooltip
+          />
+          <SpecBadge
+            label="Model size"
+            value={data?.model?.size ? `${modelSize?.size} ${modelSize?.units}` : '0B'}
+            variant="body1"
+          />
+        </HeaderCell>
+        {/*<HeaderCell item xs={2} withDivider>*/}
+        {/*  <SpecBadge*/}
+        {/*    label="Hardware"*/}
+        {/*    value="A10"*/}
+        {/*    variant="metric2"*/}
+        {/*    additionalValue={*/}
+        {/*      <Chip*/}
+        {/*        label="x3"*/}
+        {/*        color="primary"*/}
+        {/*        variant="filled"*/}
+        {/*        size="small"*/}
+        {/*        sx={{ padding: '0 5px' }}*/}
+        {/*      />*/}
+        {/*    }*/}
+        {/*    key="Hardware"*/}
+        {/*  />*/}
+        {/*  <SpecBadge label="Interconnect" value="PCIE" variant="body1" key="Interconnect" />*/}
+        {/*  <SpecBadge*/}
+        {/*    label="Version"*/}
+        {/*    value={reportData.server.hardware_driver}*/}
+        {/*    variant="body1"*/}
+        {/*    key="Version"*/}
+        {/*  />*/}
+        {/*</HeaderCell>*/}
+        <HeaderCell item xs={2} withDivider>
+          <SpecBadge label="Task" value={data?.task || 'n/a'} variant="metric2" />
+        </HeaderCell>
+        <HeaderCell item xs={3} withDivider>
+          <SpecBadge
+            label="Dataset"
+            value={data?.dataset?.name || 'n/a'}
+            variant="metric2"
+            additionalValue={
+              <Link href="https://example.com" target="_blank" component={NextLink}>
+                <SvgContainer color={theme.palette.primary.main}>
+                  <Open />
+                </SvgContainer>
+              </Link>
+            }
+          />
+        </HeaderCell>
+        <HeaderCell item xs={2} sx={{ paddingRight: 0 }}>
+          <SpecBadge
+            label="Time Stamp"
+            value={data?.timestamp ? formateDate(data?.timestamp) : 'n/a'}
+            variant="caption"
+          />
+        </HeaderCell>
+      </HeaderWrapper>
+    </Box>
+  );
+};
+
+const DynamicComponent = dynamic(() => Promise.resolve(Component), {
+  ssr: false,
+});
+
+export { DynamicComponent as Component };
diff --git a/ui/src/lib/components/PageHeader/PageHeader.interfaces.ts b/ui/src/lib/components/PageHeader/PageHeader.interfaces.ts
new file mode 100644
index 00000000..af994cdc
--- /dev/null
+++ b/ui/src/lib/components/PageHeader/PageHeader.interfaces.ts
@@ -0,0 +1,3 @@
+export type HeaderCellProps = {
+  withDivider?: boolean;
+};
diff --git a/ui/src/lib/components/PageHeader/PageHeader.styles.tsx b/ui/src/lib/components/PageHeader/PageHeader.styles.tsx
new file mode 100644
index 00000000..a292becf
--- /dev/null
+++ b/ui/src/lib/components/PageHeader/PageHeader.styles.tsx
@@ -0,0 +1,19 @@
+import { Grid, styled } from '@mui/material';
+
+import { HeaderCellProps } from './PageHeader.interfaces';
+
+export const HeaderWrapper = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerLow,
+  padding: '0 16px',
+  borderRadius: '8px',
+}));
+
+export const HeaderCell = styled(Grid, {
+  shouldForwardProp: (propName) => propName !== 'withDivider',
+})<HeaderCellProps>(({ theme, withDivider }) => ({
+  overflow: 'hidden',
+  padding: '8px',
+  ...(withDivider && {
+    borderRight: `1px solid ${theme.palette.outline.subdued}`,
+  }),
+}));
diff --git a/ui/src/lib/components/PageHeader/index.tsx b/ui/src/lib/components/PageHeader/index.tsx
new file mode 100644
index 00000000..86e81a23
--- /dev/null
+++ b/ui/src/lib/components/PageHeader/index.tsx
@@ -0,0 +1 @@
+export { Component as PageHeader } from './PageHeader.component';
diff --git a/ui/src/lib/components/RequestOverTime/RequestOverTime.component.tsx b/ui/src/lib/components/RequestOverTime/RequestOverTime.component.tsx
new file mode 100644
index 00000000..076cc392
--- /dev/null
+++ b/ui/src/lib/components/RequestOverTime/RequestOverTime.component.tsx
@@ -0,0 +1,53 @@
+import { Box, Grid, Typography } from '@mui/material';
+import { FC } from 'react';
+
+import { Badge } from '../../components/Badge';
+import { SpecBadge } from '../../components/SpecBadge';
+
+import { RequestOverTimeProps } from './RequestOverTime.interfaces';
+import { MiniCombined } from '../Charts/MiniCombined';
+import ContainerSizeWrapper, {
+  ContainerSize,
+} from '../Charts/MiniCombined/components/ContainerSizeWrapper';
+
+export const Component: FC<RequestOverTimeProps> = ({
+  benchmarksCount,
+  barData,
+  rateType,
+  lines = [],
+}) => (
+  <Box display="flex" flexDirection="column" sx={{ width: '100%' }} justifyItems="center">
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <SpecBadge
+          label="Number of Benchmarks"
+          value={benchmarksCount?.toString()}
+          variant="body2"
+        />
+      </Grid>
+      <Grid item>
+        <Typography variant="overline2" color="surface.onSurface" textTransform="uppercase">
+          Rate Type
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Badge label={rateType} />
+      </Grid>
+    </Grid>
+    <div style={{ width: '100%', height: '85px' }}>
+      <ContainerSizeWrapper>
+        {(containerSize: ContainerSize) => (
+          <MiniCombined
+            bars={barData}
+            lines={lines}
+            width={312}
+            height={85}
+            xLegend="time"
+            margins={{ bottom: 30 }}
+            containerSize={containerSize}
+          />
+        )}
+      </ContainerSizeWrapper>
+    </div>
+  </Box>
+);
diff --git a/ui/src/lib/components/RequestOverTime/RequestOverTime.interfaces.ts b/ui/src/lib/components/RequestOverTime/RequestOverTime.interfaces.ts
new file mode 100644
index 00000000..b40c7da2
--- /dev/null
+++ b/ui/src/lib/components/RequestOverTime/RequestOverTime.interfaces.ts
@@ -0,0 +1,9 @@
+export interface RequestOverTimeProps {
+  benchmarksCount: number;
+  barData: {
+    x: number;
+    y: number;
+  }[];
+  rateType: string;
+  lines?: { x: number; y: number; id: string }[];
+}
diff --git a/ui/src/lib/components/RequestOverTime/index.tsx b/ui/src/lib/components/RequestOverTime/index.tsx
new file mode 100644
index 00000000..cdb73593
--- /dev/null
+++ b/ui/src/lib/components/RequestOverTime/index.tsx
@@ -0,0 +1,2 @@
+export { Component as RequestOverTime } from './RequestOverTime.component';
+export type { RequestOverTimeProps } from './RequestOverTime.interfaces';
diff --git a/ui/src/lib/components/RowContainer/RowContainer.component.tsx b/ui/src/lib/components/RowContainer/RowContainer.component.tsx
new file mode 100644
index 00000000..31c5ac82
--- /dev/null
+++ b/ui/src/lib/components/RowContainer/RowContainer.component.tsx
@@ -0,0 +1,18 @@
+import { Grid, Typography } from '@mui/material';
+
+import { RowContainerProps } from './RowContainer.interfaces';
+
+export const Component = ({ label, children }: RowContainerProps) => {
+  return (
+    <Grid container alignItems="center">
+      <Grid item xs={2}>
+        <Typography variant="h6" color="surface.onSurface">
+          {label}
+        </Typography>
+      </Grid>
+      <Grid item xs={10}>
+        {children}
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/ui/src/lib/components/RowContainer/RowContainer.interfaces.tsx b/ui/src/lib/components/RowContainer/RowContainer.interfaces.tsx
new file mode 100644
index 00000000..d25aab89
--- /dev/null
+++ b/ui/src/lib/components/RowContainer/RowContainer.interfaces.tsx
@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface RowContainerProps {
+  label: string;
+  children: ReactNode;
+}
diff --git a/ui/src/lib/components/RowContainer/index.tsx b/ui/src/lib/components/RowContainer/index.tsx
new file mode 100644
index 00000000..c9aa63de
--- /dev/null
+++ b/ui/src/lib/components/RowContainer/index.tsx
@@ -0,0 +1,2 @@
+export { Component as RowContainer } from './RowContainer.component';
+export type { RowContainerProps } from './RowContainer.interfaces';
diff --git a/ui/src/lib/components/Section/Section.component.tsx b/ui/src/lib/components/Section/Section.component.tsx
new file mode 100644
index 00000000..11969a7a
--- /dev/null
+++ b/ui/src/lib/components/Section/Section.component.tsx
@@ -0,0 +1,19 @@
+import { Grid, Typography } from '@mui/material';
+
+import { SectionProps } from './Section.interfaces';
+import { ValueCell } from './Section.styles';
+
+export const Component = ({ label, value }: SectionProps) => {
+  return (
+    <Grid container display="flex" flexDirection="row" m="6px" sx={{ width: 'auto' }}>
+      <Grid item alignContent="center">
+        <Typography variant="subtitle2" color="surface.onSurfaceSubdued">
+          {label}
+        </Typography>
+      </Grid>
+      <ValueCell alignContent="center" item>
+        {value}
+      </ValueCell>
+    </Grid>
+  );
+};
diff --git a/ui/src/lib/components/Section/Section.interfaces.ts b/ui/src/lib/components/Section/Section.interfaces.ts
new file mode 100644
index 00000000..792bfe67
--- /dev/null
+++ b/ui/src/lib/components/Section/Section.interfaces.ts
@@ -0,0 +1,4 @@
+export interface SectionProps {
+  label: string;
+  value: string;
+}
diff --git a/ui/src/lib/components/Section/Section.styles.tsx b/ui/src/lib/components/Section/Section.styles.tsx
new file mode 100644
index 00000000..4ae5d1f2
--- /dev/null
+++ b/ui/src/lib/components/Section/Section.styles.tsx
@@ -0,0 +1,10 @@
+import { Grid, styled } from '@mui/material';
+
+export const ValueCell = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerHigh,
+  color: theme.palette.surface.onSurface,
+  borderRadius: '6px',
+  padding: '6px',
+  gap: 10,
+  marginLeft: '12px',
+}));
diff --git a/ui/src/lib/components/Section/index.tsx b/ui/src/lib/components/Section/index.tsx
new file mode 100644
index 00000000..8182a403
--- /dev/null
+++ b/ui/src/lib/components/Section/index.tsx
@@ -0,0 +1,2 @@
+export { Component as Section } from './Section.component';
+export type { SectionProps } from './Section.interfaces';
diff --git a/ui/src/lib/components/SectionContainer/SectionContainer.component.tsx b/ui/src/lib/components/SectionContainer/SectionContainer.component.tsx
new file mode 100644
index 00000000..6c4234b2
--- /dev/null
+++ b/ui/src/lib/components/SectionContainer/SectionContainer.component.tsx
@@ -0,0 +1,65 @@
+'use client';
+import { Grid, useTheme } from '@mui/material';
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
+
+import { SvgContainer } from '../../utils/SvgContainer';
+import { ArrowDown, ArrowUp } from '@assets/icons';
+
+import { SectionContainerProps } from './SectionContainer.interfaces';
+import { Container, RoundedButton } from './SectionContainer.styles';
+
+export const Component = ({ children }: SectionContainerProps) => {
+  const theme = useTheme();
+  const [expanded, setExpanded] = useState(false);
+  const [showButton, setShowButton] = useState(false);
+  const containerRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      const container = containerRef.current;
+      if (container) {
+        const hasOverflow = container.scrollHeight > container.clientHeight;
+        setShowButton(hasOverflow);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener('resize', checkOverflow);
+
+    return () => {
+      window.removeEventListener('resize', checkOverflow);
+    };
+  }, []);
+
+  return (
+    <Container display="flex">
+      <Grid
+        flexGrow={1}
+        flexWrap="wrap"
+        direction="row"
+        display="flex"
+        ref={containerRef}
+        sx={{ maxHeight: expanded ? 'none' : '42px', overflow: 'hidden' }}
+      >
+        {children}
+      </Grid>
+      <Grid sx={{ width: '72px' }} justifyContent="flex-end" alignItems="flex-start" display="flex">
+        {showButton && (
+          <RoundedButton onClick={() => setExpanded(!expanded)} sx={{ marginTop: '4px' }}>
+            <SvgContainer color={theme.palette.primary.onContainer}>
+              {expanded ? (
+                <SvgContainer color={theme.palette.primary.onContainer}>
+                  <ArrowDown />
+                </SvgContainer>
+              ) : (
+                <SvgContainer color={theme.palette.primary.onContainer}>
+                  <ArrowUp />
+                </SvgContainer>
+              )}
+            </SvgContainer>
+          </RoundedButton>
+        )}
+      </Grid>
+    </Container>
+  );
+};
diff --git a/ui/src/lib/components/SectionContainer/SectionContainer.interfaces.ts b/ui/src/lib/components/SectionContainer/SectionContainer.interfaces.ts
new file mode 100644
index 00000000..629b06b6
--- /dev/null
+++ b/ui/src/lib/components/SectionContainer/SectionContainer.interfaces.ts
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+
+export interface SectionContainerProps {
+  children: ReactElement;
+}
diff --git a/ui/src/lib/components/SectionContainer/SectionContainer.styles.tsx b/ui/src/lib/components/SectionContainer/SectionContainer.styles.tsx
new file mode 100644
index 00000000..9e4e3695
--- /dev/null
+++ b/ui/src/lib/components/SectionContainer/SectionContainer.styles.tsx
@@ -0,0 +1,21 @@
+import { Grid, styled } from '@mui/material';
+
+export const Container = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.surfaceContainerLow,
+  borderRadius: '6px',
+  padding: '12px',
+  width: 'auto',
+  margin: '8px',
+}));
+
+export const RoundedButton = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.primary.shades.B80,
+  width: '32px',
+  height: '32px',
+  borderRadius: '16px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+  cursor: 'pointer',
+  userSelect: 'none',
+}));
diff --git a/ui/src/lib/components/SectionContainer/index.tsx b/ui/src/lib/components/SectionContainer/index.tsx
new file mode 100644
index 00000000..1b857fe8
--- /dev/null
+++ b/ui/src/lib/components/SectionContainer/index.tsx
@@ -0,0 +1,2 @@
+export { Component as SectionContainer } from './SectionContainer.component';
+export type { SectionContainerProps } from './SectionContainer.interfaces';
diff --git a/ui/src/lib/components/SpecBadge/SpecBadge.component.tsx b/ui/src/lib/components/SpecBadge/SpecBadge.component.tsx
new file mode 100644
index 00000000..24b9a55b
--- /dev/null
+++ b/ui/src/lib/components/SpecBadge/SpecBadge.component.tsx
@@ -0,0 +1,30 @@
+import { Box, Typography, Tooltip } from '@mui/material';
+import { FC } from 'react';
+
+import { SpecBadgeProps } from './SpecBadge.interfaces';
+import { Container, EllipsisTypography, ValueWrapper } from './SpecBadge.styles';
+
+export const Component: FC<SpecBadgeProps> = ({
+  label,
+  value,
+  variant,
+  additionalValue,
+  withTooltip = false,
+}) => {
+  const tooltipContent = (
+    <EllipsisTypography variant={variant} color="primary">
+      {value}
+    </EllipsisTypography>
+  );
+  return (
+    <Container>
+      <Typography variant="overline2" color="surface.onSurface">
+        {label}
+      </Typography>
+      <ValueWrapper>
+        {withTooltip ? <Tooltip title={value}>{tooltipContent}</Tooltip> : tooltipContent}
+        {additionalValue && <Box ml={1}>{additionalValue}</Box>}
+      </ValueWrapper>
+    </Container>
+  );
+};
diff --git a/ui/src/lib/components/SpecBadge/SpecBadge.interfaces.ts b/ui/src/lib/components/SpecBadge/SpecBadge.interfaces.ts
new file mode 100644
index 00000000..5bc778b3
--- /dev/null
+++ b/ui/src/lib/components/SpecBadge/SpecBadge.interfaces.ts
@@ -0,0 +1,12 @@
+import { Variant } from '@mui/material/styles/createTypography';
+import { TypographyPropsVariantOverrides } from '@mui/material/Typography/Typography';
+import { OverridableStringUnion } from '@mui/types';
+import { ReactNode } from 'react';
+
+export interface SpecBadgeProps {
+  label: string;
+  value: string;
+  variant: OverridableStringUnion<Variant | 'inherit', TypographyPropsVariantOverrides>;
+  additionalValue?: ReactNode;
+  withTooltip?: boolean;
+}
diff --git a/ui/src/lib/components/SpecBadge/SpecBadge.styles.tsx b/ui/src/lib/components/SpecBadge/SpecBadge.styles.tsx
new file mode 100644
index 00000000..3057d7f2
--- /dev/null
+++ b/ui/src/lib/components/SpecBadge/SpecBadge.styles.tsx
@@ -0,0 +1,21 @@
+import { Box, styled, Typography } from '@mui/material';
+
+export const EllipsisTypography = styled(Typography)({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const Container = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  marginBottom: '8px',
+});
+
+export const ValueWrapper = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  maxWidth: '100%',
+  width: 'auto',
+});
diff --git a/ui/src/lib/components/SpecBadge/index.tsx b/ui/src/lib/components/SpecBadge/index.tsx
new file mode 100644
index 00000000..54052cc2
--- /dev/null
+++ b/ui/src/lib/components/SpecBadge/index.tsx
@@ -0,0 +1,2 @@
+export { Component as SpecBadge } from './SpecBadge.component';
+export type { SpecBadgeProps } from './SpecBadge.interfaces';
diff --git a/ui/src/lib/components/TokenLength/TokenLength.component.tsx b/ui/src/lib/components/TokenLength/TokenLength.component.tsx
new file mode 100644
index 00000000..1b8f6681
--- /dev/null
+++ b/ui/src/lib/components/TokenLength/TokenLength.component.tsx
@@ -0,0 +1,47 @@
+import { Box, Typography } from '@mui/material';
+import { FC } from 'react';
+
+import { MiniCombined } from '../../components/Charts/MiniCombined';
+import ContainerSizeWrapper, {
+  ContainerSize,
+} from '../../components/Charts/MiniCombined/components/ContainerSizeWrapper';
+
+import { TokenLengthProps } from './TokenLength.interfaces';
+
+export const Component: FC<TokenLengthProps> = ({ label, tokenCount, bars, lines }) => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    sx={{ width: '100%' }}
+    justifyItems="center"
+    alignItems="space-between"
+  >
+    <Box display="flex" flexDirection="column">
+      <Box>
+        <Typography variant="overline2" color="surface.onSurface">
+          {label}
+        </Typography>
+      </Box>
+      <Box mt="8px" mb="16px">
+        <Typography variant="metric1" color="primary">
+          {`${tokenCount} token${tokenCount !== 1 ? 's' : ''}`}
+        </Typography>
+      </Box>
+    </Box>
+    <div style={{ width: '100%', height: '85px' }}>
+      <ContainerSizeWrapper>
+        {(containerSize: ContainerSize) => (
+          <MiniCombined
+            bars={bars}
+            lines={lines}
+            width={312}
+            height={85}
+            xLegend="length (tokens)"
+            margins={{ bottom: 30 }}
+            containerSize={containerSize}
+          />
+        )}
+      </ContainerSizeWrapper>
+    </div>
+  </Box>
+);
diff --git a/ui/src/lib/components/TokenLength/TokenLength.interfaces.ts b/ui/src/lib/components/TokenLength/TokenLength.interfaces.ts
new file mode 100644
index 00000000..d8e9dd15
--- /dev/null
+++ b/ui/src/lib/components/TokenLength/TokenLength.interfaces.ts
@@ -0,0 +1,6 @@
+export interface TokenLengthProps {
+  label: string;
+  tokenCount: number;
+  bars: { x: number; y: number }[];
+  lines: { x: number; y: number; id: string }[];
+}
diff --git a/ui/src/lib/components/TokenLength/index.tsx b/ui/src/lib/components/TokenLength/index.tsx
new file mode 100644
index 00000000..e0eba389
--- /dev/null
+++ b/ui/src/lib/components/TokenLength/index.tsx
@@ -0,0 +1,2 @@
+export { Component as TokenLength } from './TokenLength.component';
+export type { TokenLengthProps } from './TokenLength.interfaces';
diff --git a/ui/src/lib/components/WorkloadDetails/WorkloadDetails.component.tsx b/ui/src/lib/components/WorkloadDetails/WorkloadDetails.component.tsx
new file mode 100644
index 00000000..48efe6ca
--- /dev/null
+++ b/ui/src/lib/components/WorkloadDetails/WorkloadDetails.component.tsx
@@ -0,0 +1,106 @@
+'use client';
+import { Box, Grid } from '@mui/material';
+import dynamic from 'next/dynamic';
+import { useSelector } from 'react-redux';
+
+import {
+  selectGenerationsHistogramBarData,
+  selectGenerationsHistogramLineData,
+  selectPromptsHistogramBarData,
+  selectPromptsHistogramLineData,
+  selectRequestOverTimeBarData,
+  useGetWorkloadDetailsQuery,
+} from '../../store/slices/workloadDetails';
+
+import { formatNumber, parseUrlParts } from '../../utils/helpers';
+
+import { BlockHeader } from '../BlockHeader';
+import { Carousel } from '../Carousel';
+import { DataPanel } from '../DataPanel';
+import { RequestOverTime } from '../RequestOverTime';
+import { SpecBadge } from '../SpecBadge';
+
+import { TokenLength } from '../TokenLength';
+
+const Component = () => {
+  const { data } = useGetWorkloadDetailsQuery();
+  const promptsBarData = useSelector(selectPromptsHistogramBarData);
+  const promptsLineData = useSelector(selectPromptsHistogramLineData);
+  const generationsBarData = useSelector(selectGenerationsHistogramBarData);
+  const generationsLineData = useSelector(selectGenerationsHistogramLineData);
+  const { barChartData: requestOverTimeBarData } = useSelector(selectRequestOverTimeBarData);
+  const { type, target, port } = parseUrlParts(data?.server?.target || '');
+
+  return (
+    <>
+      <BlockHeader label="Workload Details" />
+      <Grid
+        container
+        spacing={0}
+        gap={2}
+        data-id="workload-details"
+        sx={{ marginLeft: 0, flexWrap: 'nowrap' }}
+        justifyContent="space-between"
+      >
+        <DataPanel
+          header="Prompt"
+          topContainer={<Carousel items={data?.prompts?.samples || []} label="Sample Prompt" />}
+          bottomContainer={
+            <TokenLength
+              label={'Mean Prompt Length'}
+              tokenCount={formatNumber(data?.prompts?.tokenDistributions.statistics.mean ?? 0)}
+              bars={promptsBarData || []}
+              lines={promptsLineData}
+            />
+          }
+          key="dp-1"
+        />
+        <DataPanel
+          header="Server"
+          topContainer={
+            <Box display="flex" flexDirection="column" sx={{ width: '100%' }}>
+              <SpecBadge label="Target" value={target} variant="body2" />
+              <Grid container spacing={2}>
+                <Grid item xs={6}>
+                  <SpecBadge label="Type" value={type} variant="body2" />
+                </Grid>
+                <Grid item xs={6}>
+                  <SpecBadge label="Port" value={port} variant="body2" />
+                </Grid>
+              </Grid>
+            </Box>
+          }
+          bottomContainer={
+            <RequestOverTime
+              benchmarksCount={data?.requestsOverTime?.numBenchmarks || 0}
+              barData={requestOverTimeBarData || []}
+              rateType={data?.rateType ?? ''}
+            />
+          }
+          key="dp-2"
+        />
+        <DataPanel
+          header="Generated"
+          topContainer={
+            <Carousel items={data?.generations?.samples || []} label="Sample Generated" />
+          }
+          bottomContainer={
+            <TokenLength
+              label={'Mean Generated Length'}
+              tokenCount={formatNumber(data?.generations?.tokenDistributions.statistics.mean ?? 0)}
+              bars={generationsBarData || []}
+              lines={generationsLineData}
+            />
+          }
+          key="dp-3"
+        />
+      </Grid>
+    </>
+  );
+};
+
+const DynamicComponent = dynamic(() => Promise.resolve(Component), {
+  ssr: false,
+});
+
+export { DynamicComponent as Component };
diff --git a/ui/src/lib/components/WorkloadDetails/index.tsx b/ui/src/lib/components/WorkloadDetails/index.tsx
new file mode 100644
index 00000000..702f16ad
--- /dev/null
+++ b/ui/src/lib/components/WorkloadDetails/index.tsx
@@ -0,0 +1 @@
+export { Component as WorkloadDetails } from './WorkloadDetails.component';
diff --git a/ui/src/lib/components/WorkloadMetrics/WorkloadMetricSummary.interfaces.tsx b/ui/src/lib/components/WorkloadMetrics/WorkloadMetricSummary.interfaces.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.component.tsx b/ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.component.tsx
new file mode 100644
index 00000000..c5186673
--- /dev/null
+++ b/ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.component.tsx
@@ -0,0 +1,127 @@
+'use client';
+import { Box } from '@mui/material';
+import { useSelector } from 'react-redux';
+
+import { DashedLine } from '../../components/Charts/DashedLine';
+import { DistributionPercentiles, PercentileItem } from '../../components/DistributionPercentiles';
+import { MeanMetricSummary } from '../../components/MeanMetricSummary';
+import {
+  selectInterpolatedMetrics,
+  selectMetricsDetailsLineData,
+  useGetBenchmarksQuery,
+} from '../../store/slices/benchmarks';
+
+import { selectSloState } from '../../store/slices/slo/slo.selectors';
+
+import { formatNumber } from '../../utils/helpers';
+
+import { BlockHeader } from '../BlockHeader';
+import { GraphTitle } from '../GraphTitle';
+import { MetricsContainer } from '../MetricsContainer';
+import { GraphsWrapper } from './WorkloadMetrics.styles';
+
+export const columnContent = (rpsValue: number, percentiles: PercentileItem[], units: string) => (
+  <DistributionPercentiles list={percentiles} rpsValue={rpsValue} units={units} />
+);
+
+export const leftColumn = (rpsValue: number, value: number, units: string) => (
+  <MeanMetricSummary meanValue={`${value}`} meanUnit={units} rpsValue={rpsValue} />
+);
+
+export const leftColumn3 = (rpsValue: number, value: number, units: string) => (
+  <MeanMetricSummary meanValue={`${value}`} meanUnit={units} rpsValue={rpsValue} />
+);
+
+export const Component = () => {
+  const { data } = useGetBenchmarksQuery();
+  const { ttft, tpot, timePerRequest, throughput } = useSelector(selectMetricsDetailsLineData);
+  const { currentRequestRate } = useSelector(selectSloState);
+  const formattedRequestRate = formatNumber(currentRequestRate);
+  const {
+    ttft: ttftAtRPS,
+    tpot: tpotAtRPS,
+    timePerRequest: timePerRequestAtRPS,
+    throughput: throughputAtRPS,
+  } = useSelector(selectInterpolatedMetrics);
+
+  const minX = Math.floor(Math.min(...(data?.benchmarks?.map((bm) => bm.requestsPerSecond) || [])));
+  if ((data?.benchmarks?.length ?? 0) <= 1) {
+    return <></>;
+  }
+  return (
+    <>
+      <BlockHeader label="Metrics Details" />
+      <Box display="flex" flexDirection="row" gap={3} mt={3}>
+        <MetricsContainer
+          header="TTFT"
+          leftColumn={leftColumn(formattedRequestRate, formatNumber(ttftAtRPS.mean), 'ms')}
+          rightColumn={columnContent(formattedRequestRate, ttftAtRPS.percentiles, 'ms')}
+        >
+          <GraphTitle title="TTFS vs RPS" />
+          <GraphsWrapper>
+            <DashedLine
+              data={ttft}
+              margins={{ left: 50, bottom: 50 }}
+              xLegend="request per sec"
+              yLegend="ttft (ms)"
+              minX={minX}
+            />
+          </GraphsWrapper>
+        </MetricsContainer>
+        <MetricsContainer
+          header="TPOT"
+          leftColumn={leftColumn3(formattedRequestRate, formatNumber(tpotAtRPS.mean), 'ms')}
+          rightColumn={columnContent(formattedRequestRate, tpotAtRPS.percentiles, 'ms')}
+        >
+          <GraphTitle title="TPOT vs RPS" />
+          <GraphsWrapper>
+            <DashedLine
+              data={tpot}
+              margins={{ left: 50, bottom: 50 }}
+              xLegend="request per sec"
+              yLegend="tpot (ms)"
+              minX={minX}
+            />
+          </GraphsWrapper>
+        </MetricsContainer>
+      </Box>
+      <Box display="flex" flexDirection="row" gap={3} mt={3}>
+        <MetricsContainer
+          header="E2E Latency"
+          leftColumn={leftColumn(
+            formattedRequestRate,
+            formatNumber(timePerRequestAtRPS.mean),
+            'ms'
+          )}
+          rightColumn={columnContent(formattedRequestRate, timePerRequestAtRPS.percentiles, 'ms')}
+        >
+          <GraphTitle title="E2E Latency vs RPS" />
+          <GraphsWrapper>
+            <DashedLine
+              data={timePerRequest}
+              margins={{ left: 50, bottom: 50 }}
+              xLegend="request per sec"
+              yLegend="latency (ms)"
+              minX={minX}
+            />
+          </GraphsWrapper>
+        </MetricsContainer>
+        <MetricsContainer
+          header="Throughput"
+          leftColumn={leftColumn3(formattedRequestRate, formatNumber(throughputAtRPS.mean), 'ms')}
+        >
+          <GraphTitle title="Throughput vs RPS" />
+          <GraphsWrapper>
+            <DashedLine
+              data={throughput}
+              margins={{ left: 50, bottom: 50 }}
+              xLegend="request per sec"
+              yLegend="throughput (tok/s)"
+              minX={minX}
+            />
+          </GraphsWrapper>
+        </MetricsContainer>
+      </Box>
+    </>
+  );
+};
diff --git a/ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.styles.tsx b/ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.styles.tsx
new file mode 100644
index 00000000..2e59c0f5
--- /dev/null
+++ b/ui/src/lib/components/WorkloadMetrics/WorkloadMetrics.styles.tsx
@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const GraphsWrapper = styled('div')({
+  width: '540px',
+  height: '288px',
+});
diff --git a/ui/src/lib/components/WorkloadMetrics/index.tsx b/ui/src/lib/components/WorkloadMetrics/index.tsx
new file mode 100644
index 00000000..611578ba
--- /dev/null
+++ b/ui/src/lib/components/WorkloadMetrics/index.tsx
@@ -0,0 +1 @@
+export { Component as WorkloadMetrics } from './WorkloadMetrics.component';
diff --git a/ui/src/lib/hooks/useColor.ts b/ui/src/lib/hooks/useColor.ts
new file mode 100644
index 00000000..bc519bad
--- /dev/null
+++ b/ui/src/lib/hooks/useColor.ts
@@ -0,0 +1,19 @@
+import { useTheme } from '@mui/material';
+
+import { LineColor } from '@/lib/components/Charts/MetricLine';
+
+export const useColor = (colorType: LineColor | undefined) => {
+  const theme = useTheme();
+  switch (colorType) {
+    case LineColor.Primary:
+      return theme.palette.primary.main;
+    case LineColor.Secondary:
+      return theme.palette.secondary.main;
+    case LineColor.Tertiary:
+      return theme.palette.tertiary.main as string;
+    case LineColor.Quarternary:
+      return theme.palette.quarternary.main as string;
+    default:
+      return theme.palette.surface.onSurfaceAccent;
+  }
+};
diff --git a/ui/src/lib/store/benchmarksWindowData.ts b/ui/src/lib/store/benchmarksWindowData.ts
new file mode 100644
index 00000000..e8a5cc40
--- /dev/null
+++ b/ui/src/lib/store/benchmarksWindowData.ts
@@ -0,0 +1,1154 @@
+export const benchmarksScript = `window.benchmarks = {
+  "benchmarks": [
+    {
+      "requestsPerSecond": 0.6668550387660497,
+      "tpot": {
+        "statistics": {
+          "total": 80,
+          "mean": 23.00635663936911,
+          "median": 22.959455611213805,
+          "min": 22.880917503720237,
+          "max": 24.14080301920573,
+          "std": 0.18918760384209338
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 22.959455611213805
+          },
+          {
+            "percentile": "p90",
+            "value": 23.01789086962503
+          },
+          {
+            "percentile": "p95",
+            "value": 23.30297423947242
+          },
+          {
+            "percentile": "p99",
+            "value": 24.14080301920573
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 80,
+          "mean": 49.64659512042999,
+          "median": 49.23129081726074,
+          "min": 44.538259506225586,
+          "max": 55.47308921813965,
+          "std": 1.7735485090634995
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 49.23129081726074
+          },
+          {
+            "percentile": "p90",
+            "value": 50.16160011291504
+          },
+          {
+            "percentile": "p95",
+            "value": 54.918766021728516
+          },
+          {
+            "percentile": "p99",
+            "value": 55.47308921813965
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 210,
+          "mean": 42.58702991319684,
+          "median": 43.536023084668,
+          "min": 0.0,
+          "max": 43.68247620237872,
+          "std": 4.559764488536857
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 43.536023084668
+          },
+          {
+            "percentile": "p90",
+            "value": 43.62613633999709
+          },
+          {
+            "percentile": "p95",
+            "value": 43.64020767654067
+          },
+          {
+            "percentile": "p99",
+            "value": 43.68202126662431
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 80,
+          "mean": 1496.706646680832,
+          "median": 1496.1087703704834,
+          "min": 1490.584135055542,
+          "max": 1505.8784484863281,
+          "std": 3.4553340533022667
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 1496.1087703704834
+          },
+          {
+            "percentile": "p90",
+            "value": 1500.9305477142334
+          },
+          {
+            "percentile": "p95",
+            "value": 1505.3200721740723
+          },
+          {
+            "percentile": "p99",
+            "value": 1505.8784484863281
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 28.075330129628725,
+      "tpot": {
+        "statistics": {
+          "total": 3416,
+          "mean": 126.08707076148656,
+          "median": 125.30853256346687,
+          "min": 23.034303907364134,
+          "max": 138.08223756693178,
+          "std": 3.508992115582193
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 125.30853256346687
+          },
+          {
+            "percentile": "p90",
+            "value": 129.21135009281218
+          },
+          {
+            "percentile": "p95",
+            "value": 129.52291770059554
+          },
+          {
+            "percentile": "p99",
+            "value": 132.21229490686636
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 3416,
+          "mean": 8585.486161415694,
+          "median": 8965.316534042358,
+          "min": 110.53991317749023,
+          "max": 12575.379610061646,
+          "std": 1929.5632525234505
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 8965.316534042358
+          },
+          {
+            "percentile": "p90",
+            "value": 9231.79316520691
+          },
+          {
+            "percentile": "p95",
+            "value": 9485.00108718872
+          },
+          {
+            "percentile": "p99",
+            "value": 12096.465587615967
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 15981,
+          "mean": 1795.4403743554367,
+          "median": 670.1236619268253,
+          "min": 0.0,
+          "max": 838860.8,
+          "std": 5196.545581836957
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 670.1236619268253
+          },
+          {
+            "percentile": "p90",
+            "value": 4068.1901066925316
+          },
+          {
+            "percentile": "p95",
+            "value": 6374.322188449848
+          },
+          {
+            "percentile": "p99",
+            "value": 16194.223938223939
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 3416,
+          "mean": 16526.811318389147,
+          "median": 17058.441638946533,
+          "min": 1711.3444805145264,
+          "max": 20646.55351638794,
+          "std": 2054.9553770234484
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 17058.441638946533
+          },
+          {
+            "percentile": "p90",
+            "value": 17143.84412765503
+          },
+          {
+            "percentile": "p95",
+            "value": 17248.060703277588
+          },
+          {
+            "percentile": "p99",
+            "value": 20116.52660369873
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 4.071681142252993,
+      "tpot": {
+        "statistics": {
+          "total": 488,
+          "mean": 24.898151556004148,
+          "median": 24.889995181371294,
+          "min": 24.822999560643755,
+          "max": 26.217273871103924,
+          "std": 0.11227504505081555
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 24.889995181371294
+          },
+          {
+            "percentile": "p90",
+            "value": 24.90483389960395
+          },
+          {
+            "percentile": "p95",
+            "value": 24.965975019666885
+          },
+          {
+            "percentile": "p99",
+            "value": 25.306613214554325
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 488,
+          "mean": 58.341102033364976,
+          "median": 58.38632583618164,
+          "min": 44.857025146484375,
+          "max": 111.23061180114746,
+          "std": 8.190008649880411
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 58.38632583618164
+          },
+          {
+            "percentile": "p90",
+            "value": 67.66843795776367
+          },
+          {
+            "percentile": "p95",
+            "value": 68.76754760742188
+          },
+          {
+            "percentile": "p99",
+            "value": 71.46525382995605
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 11338,
+          "mean": 260.42072092623033,
+          "median": 47.630070406540995,
+          "min": 0.0,
+          "max": 838860.8,
+          "std": 886.8274389295076
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 47.630070406540995
+          },
+          {
+            "percentile": "p90",
+            "value": 604.8895298528987
+          },
+          {
+            "percentile": "p95",
+            "value": 1621.9273008507348
+          },
+          {
+            "percentile": "p99",
+            "value": 3054.846321922797
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 488,
+          "mean": 1626.5668087318297,
+          "median": 1626.236915588379,
+          "min": 1611.9341850280762,
+          "max": 1690.2406215667725,
+          "std": 8.871477705542668
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 1626.236915588379
+          },
+          {
+            "percentile": "p90",
+            "value": 1635.761022567749
+          },
+          {
+            "percentile": "p95",
+            "value": 1637.390375137329
+          },
+          {
+            "percentile": "p99",
+            "value": 1643.500804901123
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 7.466101414346809,
+      "tpot": {
+        "statistics": {
+          "total": 895,
+          "mean": 27.56459906601014,
+          "median": 27.525402250744047,
+          "min": 26.69054911686824,
+          "max": 29.5785041082473,
+          "std": 0.18545649185329754
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 27.525402250744047
+          },
+          {
+            "percentile": "p90",
+            "value": 27.62497795952691
+          },
+          {
+            "percentile": "p95",
+            "value": 27.947206345815506
+          },
+          {
+            "percentile": "p99",
+            "value": 28.41202157442687
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 895,
+          "mean": 64.73036744741088,
+          "median": 62.484025955200195,
+          "min": 48.038482666015625,
+          "max": 256.4809322357178,
+          "std": 21.677914089867077
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 62.484025955200195
+          },
+          {
+            "percentile": "p90",
+            "value": 72.04723358154297
+          },
+          {
+            "percentile": "p95",
+            "value": 72.50738143920898
+          },
+          {
+            "percentile": "p99",
+            "value": 229.35032844543457
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 12465,
+          "mean": 477.5134940335642,
+          "median": 49.76925541382379,
+          "min": 0.0,
+          "max": 1677721.6,
+          "std": 2472.852317203968
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 49.76925541382379
+          },
+          {
+            "percentile": "p90",
+            "value": 1191.5636363636363
+          },
+          {
+            "percentile": "p95",
+            "value": 2501.075730471079
+          },
+          {
+            "percentile": "p99",
+            "value": 7025.634840871022
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 895,
+          "mean": 1800.9132816804852,
+          "median": 1797.5835800170898,
+          "min": 1756.2305927276611,
+          "max": 1994.28129196167,
+          "std": 24.24935353039552
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 1797.5835800170898
+          },
+          {
+            "percentile": "p90",
+            "value": 1808.2549571990967
+          },
+          {
+            "percentile": "p95",
+            "value": 1813.141107559204
+          },
+          {
+            "percentile": "p99",
+            "value": 1967.8056240081787
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 10.83989165148388,
+      "tpot": {
+        "statistics": {
+          "total": 1300,
+          "mean": 31.6048062981453,
+          "median": 31.577579558841766,
+          "min": 30.171105355927438,
+          "max": 33.10690323511759,
+          "std": 0.15146862300990216
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 31.577579558841766
+          },
+          {
+            "percentile": "p90",
+            "value": 31.63230986822219
+          },
+          {
+            "percentile": "p95",
+            "value": 31.682415614052424
+          },
+          {
+            "percentile": "p99",
+            "value": 32.138043834317116
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 1300,
+          "mean": 66.61205951984113,
+          "median": 65.78803062438965,
+          "min": 51.81550979614258,
+          "max": 244.69709396362305,
+          "std": 14.858653160342651
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 65.78803062438965
+          },
+          {
+            "percentile": "p90",
+            "value": 76.70044898986816
+          },
+          {
+            "percentile": "p95",
+            "value": 77.78120040893555
+          },
+          {
+            "percentile": "p99",
+            "value": 88.29903602600098
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 12708,
+          "mean": 693.3695002980695,
+          "median": 55.59272071785492,
+          "min": 0.0,
+          "max": 838860.8,
+          "std": 2454.288991845712
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 55.59272071785492
+          },
+          {
+            "percentile": "p90",
+            "value": 1897.875113122172
+          },
+          {
+            "percentile": "p95",
+            "value": 2931.030048916841
+          },
+          {
+            "percentile": "p99",
+            "value": 7108.989830508474
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 1300,
+          "mean": 2057.3723330864545,
+          "median": 2056.5311908721924,
+          "min": 2027.0307064056396,
+          "max": 2233.853578567505,
+          "std": 16.334707021033957
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 2056.5311908721924
+          },
+          {
+            "percentile": "p90",
+            "value": 2065.953254699707
+          },
+          {
+            "percentile": "p95",
+            "value": 2067.810297012329
+          },
+          {
+            "percentile": "p99",
+            "value": 2087.8031253814697
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 14.211845819540324,
+      "tpot": {
+        "statistics": {
+          "total": 1704,
+          "mean": 35.695500394825224,
+          "median": 35.60370869106717,
+          "min": 34.798149078611345,
+          "max": 38.94662857055664,
+          "std": 0.24967658675392423
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 35.60370869106717
+          },
+          {
+            "percentile": "p90",
+            "value": 35.84100708128914
+          },
+          {
+            "percentile": "p95",
+            "value": 36.09923778041716
+          },
+          {
+            "percentile": "p99",
+            "value": 36.71476489207784
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 1704,
+          "mean": 74.19940031750102,
+          "median": 71.50626182556152,
+          "min": 53.643226623535156,
+          "max": 322.6609230041504,
+          "std": 23.98415146629138
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 71.50626182556152
+          },
+          {
+            "percentile": "p90",
+            "value": 83.71734619140625
+          },
+          {
+            "percentile": "p95",
+            "value": 98.2356071472168
+          },
+          {
+            "percentile": "p99",
+            "value": 113.44718933105469
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 15532,
+          "mean": 908.715763654939,
+          "median": 98.84067397195712,
+          "min": 0.0,
+          "max": 838860.8,
+          "std": 3628.67537220603
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 98.84067397195712
+          },
+          {
+            "percentile": "p90",
+            "value": 2205.2071503680336
+          },
+          {
+            "percentile": "p95",
+            "value": 3775.251125112511
+          },
+          {
+            "percentile": "p99",
+            "value": 10512.040100250626
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 1704,
+          "mean": 2321.92987861208,
+          "median": 2313.3785724639893,
+          "min": 2290.93074798584,
+          "max": 2594.4881439208984,
+          "std": 29.46118583560937
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 2313.3785724639893
+          },
+          {
+            "percentile": "p90",
+            "value": 2339.4439220428467
+          },
+          {
+            "percentile": "p95",
+            "value": 2341.9249057769775
+          },
+          {
+            "percentile": "p99",
+            "value": 2370.450496673584
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 17.5623040970073,
+      "tpot": {
+        "statistics": {
+          "total": 2106,
+          "mean": 39.546438065771135,
+          "median": 39.47442675393725,
+          "min": 38.74176740646362,
+          "max": 43.32651032341851,
+          "std": 0.3121106751660994
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 39.47442675393725
+          },
+          {
+            "percentile": "p90",
+            "value": 39.722594003828746
+          },
+          {
+            "percentile": "p95",
+            "value": 40.083578654697966
+          },
+          {
+            "percentile": "p99",
+            "value": 40.73049983040231
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 2106,
+          "mean": 85.68002797259905,
+          "median": 89.88213539123535,
+          "min": 57.360172271728516,
+          "max": 362.8504276275635,
+          "std": 27.802786177158218
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 89.88213539123535
+          },
+          {
+            "percentile": "p90",
+            "value": 101.7305850982666
+          },
+          {
+            "percentile": "p95",
+            "value": 103.26790809631348
+          },
+          {
+            "percentile": "p99",
+            "value": 138.88931274414062
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 15121,
+          "mean": 1123.0284569989917,
+          "median": 99.91909855397003,
+          "min": 0.0,
+          "max": 932067.5555555555,
+          "std": 4358.833642800455
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 99.91909855397003
+          },
+          {
+            "percentile": "p90",
+            "value": 2868.8809849521203
+          },
+          {
+            "percentile": "p95",
+            "value": 4848.906358381503
+          },
+          {
+            "percentile": "p99",
+            "value": 12905.55076923077
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 2106,
+          "mean": 2575.916517267653,
+          "median": 2573.6281871795654,
+          "min": 2533.904790878296,
+          "max": 2894.4458961486816,
+          "std": 33.18594265783404
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 2573.6281871795654
+          },
+          {
+            "percentile": "p90",
+            "value": 2588.9015197753906
+          },
+          {
+            "percentile": "p95",
+            "value": 2591.136932373047
+          },
+          {
+            "percentile": "p99",
+            "value": 2700.568437576294
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 20.885632360055222,
+      "tpot": {
+        "statistics": {
+          "total": 2505,
+          "mean": 44.20494748431818,
+          "median": 44.02147020612444,
+          "min": 42.981475591659546,
+          "max": 52.62617986710345,
+          "std": 1.0422073399474652
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 44.02147020612444
+          },
+          {
+            "percentile": "p90",
+            "value": 44.47330747331892
+          },
+          {
+            "percentile": "p95",
+            "value": 45.131300316482296
+          },
+          {
+            "percentile": "p99",
+            "value": 50.400745301019576
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 2505,
+          "mean": 98.4621736103903,
+          "median": 95.84355354309082,
+          "min": 61.09285354614258,
+          "max": 524.099588394165,
+          "std": 34.20521833421915
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 95.84355354309082
+          },
+          {
+            "percentile": "p90",
+            "value": 109.4822883605957
+          },
+          {
+            "percentile": "p95",
+            "value": 111.46354675292969
+          },
+          {
+            "percentile": "p99",
+            "value": 334.31243896484375
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 14779,
+          "mean": 1335.7133120200747,
+          "median": 104.45284522475407,
+          "min": 0.0,
+          "max": 1677721.6,
+          "std": 5200.1934248077005
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 104.45284522475407
+          },
+          {
+            "percentile": "p90",
+            "value": 3472.1059602649007
+          },
+          {
+            "percentile": "p95",
+            "value": 5882.6143057503505
+          },
+          {
+            "percentile": "p99",
+            "value": 15768.060150375939
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 2505,
+          "mean": 2882.6246785070603,
+          "median": 2869.71378326416,
+          "min": 2826.8485069274902,
+          "max": 3324.9876499176025,
+          "std": 78.07038363701177
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 2869.71378326416
+          },
+          {
+            "percentile": "p90",
+            "value": 2888.715982437134
+          },
+          {
+            "percentile": "p95",
+            "value": 2937.7262592315674
+          },
+          {
+            "percentile": "p99",
+            "value": 3282.898426055908
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 24.179871480414207,
+      "tpot": {
+        "statistics": {
+          "total": 2900,
+          "mean": 51.023722283946924,
+          "median": 50.24327550615583,
+          "min": 47.58137645143451,
+          "max": 60.63385087935651,
+          "std": 2.0749227872708285
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 50.24327550615583
+          },
+          {
+            "percentile": "p90",
+            "value": 52.928451507810564
+          },
+          {
+            "percentile": "p95",
+            "value": 57.28437408568367
+          },
+          {
+            "percentile": "p99",
+            "value": 58.51330454387362
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 2900,
+          "mean": 123.56691516678907,
+          "median": 115.33927917480469,
+          "min": 88.05131912231445,
+          "max": 594.1901206970215,
+          "std": 44.50765227271787
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 115.33927917480469
+          },
+          {
+            "percentile": "p90",
+            "value": 141.8297290802002
+          },
+          {
+            "percentile": "p95",
+            "value": 144.49095726013184
+          },
+          {
+            "percentile": "p99",
+            "value": 375.5221366882324
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 14925,
+          "mean": 1546.3194569459229,
+          "median": 138.59511614843208,
+          "min": 0.0,
+          "max": 1677721.6,
+          "std": 5844.302138842639
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 138.59511614843208
+          },
+          {
+            "percentile": "p90",
+            "value": 3916.250233426704
+          },
+          {
+            "percentile": "p95",
+            "value": 6678.828025477707
+          },
+          {
+            "percentile": "p99",
+            "value": 17924.37606837607
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 2900,
+          "mean": 3336.9750574539444,
+          "median": 3282.672882080078,
+          "min": 3228.010654449463,
+          "max": 3863.8863563537598,
+          "std": 141.37106520368962
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 3282.672882080078
+          },
+          {
+            "percentile": "p90",
+            "value": 3561.7692470550537
+          },
+          {
+            "percentile": "p95",
+            "value": 3737.921953201294
+          },
+          {
+            "percentile": "p99",
+            "value": 3811.5434646606445
+          }
+        ]
+      }
+    },
+    {
+      "requestsPerSecond": 27.382251189847466,
+      "tpot": {
+        "statistics": {
+          "total": 3285,
+          "mean": 62.44881585866599,
+          "median": 60.908238093058266,
+          "min": 58.94644298250713,
+          "max": 72.59870383699061,
+          "std": 2.9764436606898887
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 60.908238093058266
+          },
+          {
+            "percentile": "p90",
+            "value": 68.3861043718126
+          },
+          {
+            "percentile": "p95",
+            "value": 69.21934324597555
+          },
+          {
+            "percentile": "p99",
+            "value": 70.13290269034249
+          }
+        ]
+      },
+      "ttft": {
+        "statistics": {
+          "total": 3285,
+          "mean": 142.7834399758953,
+          "median": 129.18686866760254,
+          "min": 92.2248363494873,
+          "max": 802.5562763214111,
+          "std": 54.896961282893
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 129.18686866760254
+          },
+          {
+            "percentile": "p90",
+            "value": 158.26964378356934
+          },
+          {
+            "percentile": "p95",
+            "value": 166.79859161376953
+          },
+          {
+            "percentile": "p99",
+            "value": 422.8503704071045
+          }
+        ]
+      },
+      "throughput": {
+        "statistics": {
+          "total": 15706,
+          "mean": 1751.1720673421933,
+          "median": 318.5950626661603,
+          "min": 0.0,
+          "max": 1677721.6,
+          "std": 6434.120608249914
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 318.5950626661603
+          },
+          {
+            "percentile": "p90",
+            "value": 4165.147964250248
+          },
+          {
+            "percentile": "p95",
+            "value": 7194.346483704974
+          },
+          {
+            "percentile": "p99",
+            "value": 19878.218009478675
+          }
+        ]
+      },
+      "timePerRequest": {
+        "statistics": {
+          "total": 3285,
+          "mean": 4076.002237894764,
+          "median": 3972.564697265625,
+          "min": 3890.990972518921,
+          "max": 4623.138666152954,
+          "std": 197.81266460135544
+        },
+        "percentiles": [
+          {
+            "percentile": "p50",
+            "value": 3972.564697265625
+          },
+          {
+            "percentile": "p90",
+            "value": 4444.445371627808
+          },
+          {
+            "percentile": "p95",
+            "value": 4506.659030914307
+          },
+          {
+            "percentile": "p99",
+            "value": 4553.745985031128
+          }
+        ]
+      }
+    }
+  ]
+};`;
diff --git a/ui/src/lib/store/index.ts b/ui/src/lib/store/index.ts
index c1671d75..39ec0aa4 100644
--- a/ui/src/lib/store/index.ts
+++ b/ui/src/lib/store/index.ts
@@ -1,21 +1,28 @@
-import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { configureStore } from '@reduxjs/toolkit';
 
-const defaultSlice = createSlice({
-  name: 'model.state',
-  initialState: { model: 'meta-llama/Llama-2-7b' },
-  reducers: {
-    setDefaultData: (state, action: PayloadAction<string>) => {
-      return { ...state, model: action.payload };
-    },
-  },
-});
-
-export const { setDefaultData } = defaultSlice.actions;
+import { benchmarksApi, benchmarksReducer } from './slices/benchmarks';
+import metricsReducer from './slices/metrics/metrics.slice';
+import { runInfoApi, infoReducer } from './slices/runInfo';
+import sloReducer from './slices/slo/slo.slice';
+import { workloadDetailsApi, workloadDetailsReducer } from './slices/workloadDetails';
 
 export const store = configureStore({
   reducer: {
-    default: defaultSlice.reducer,
+    metrics: metricsReducer,
+    slo: sloReducer,
+    runInfo: infoReducer,
+    [runInfoApi.reducerPath]: runInfoApi.reducer,
+    benchmarks: benchmarksReducer,
+    [benchmarksApi.reducerPath]: benchmarksApi.reducer,
+    workloadDetails: workloadDetailsReducer,
+    [workloadDetailsApi.reducerPath]: workloadDetailsApi.reducer,
   },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(
+      runInfoApi.middleware,
+      benchmarksApi.middleware,
+      workloadDetailsApi.middleware
+    ),
 });
 
 export type RootState = ReturnType<typeof store.getState>;
diff --git a/ui/src/lib/store/mockData.ts b/ui/src/lib/store/mockData.ts
new file mode 100644
index 00000000..8295c60c
--- /dev/null
+++ b/ui/src/lib/store/mockData.ts
@@ -0,0 +1,191 @@
+export const runInfo = {
+  model: {
+    name: 'Model name',
+    size: 12345678,
+  },
+  task: 'Task name',
+  dataset: {
+    name: 'Dataset name',
+  },
+  timestamp: '1686700800',
+};
+
+export const workloadDetails = {
+  prompts: {
+    samples: ['string'],
+    tokenDistributions: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+  },
+  generations: {
+    samples: ['string'],
+    tokenDistributions: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+  },
+  server: {
+    target: '128.0.0.1',
+    protocolType: 'string',
+    port: '8000',
+  },
+};
+
+export const benchmarks = [
+  {
+    ttft: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+    tpot: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+    timePerRequest: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+    requestOverTime: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+    throughput: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [
+        {
+          percentile: 'p50',
+          value: 0,
+        },
+      ],
+      buckets: [
+        {
+          value: 0,
+          count: 0,
+        },
+      ],
+      bucketWidth: 0,
+    },
+  },
+];
diff --git a/ui/src/lib/store/runInfoWindowData.ts b/ui/src/lib/store/runInfoWindowData.ts
new file mode 100644
index 00000000..1fe0e21d
--- /dev/null
+++ b/ui/src/lib/store/runInfoWindowData.ts
@@ -0,0 +1,11 @@
+export const runInfoScript = `window.run_info = {
+  "model": {
+    "name": "neuralmagic/Qwen2.5-7B-quantized.w8a8",
+    "size": 0
+  },
+  "task": "N/A",
+  "dataset": {
+    "name": "N/A"
+  },
+  "timestamp": 1744310555.0286171
+};`;
diff --git a/ui/src/lib/store/slices/benchmarks/benchmarks.api.ts b/ui/src/lib/store/slices/benchmarks/benchmarks.api.ts
new file mode 100644
index 00000000..7be7bee2
--- /dev/null
+++ b/ui/src/lib/store/slices/benchmarks/benchmarks.api.ts
@@ -0,0 +1,82 @@
+import { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+import { formatNumber } from '../../../utils/helpers';
+
+import { Benchmarks, MetricData } from './benchmarks.interfaces';
+import { defaultPercentile } from '../slo/slo.constants';
+import { setSloData } from '../slo/slo.slice';
+
+const USE_MOCK_API = process.env.NEXT_PUBLIC_USE_MOCK_API === 'true';
+
+const fetchBenchmarks = async () => {
+  return { data: window.benchmarks as Benchmarks };
+};
+
+const getAverageValueForPercentile = (
+  firstMetric: MetricData,
+  lastMetric: MetricData,
+  percentile: string
+) => {
+  const firstPercentile = firstMetric.percentiles.find((p) => p.percentile === percentile);
+  const lastPercentile = lastMetric.percentiles.find((p) => p.percentile === percentile);
+  return ((firstPercentile?.value ?? 0) + (lastPercentile?.value ?? 0)) / 2;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const setDefaultSLOs = (data: Benchmarks, dispatch: ThunkDispatch<any, any, UnknownAction>) => {
+  // temporarily set default slo values, long term the backend should set default slos that will not just be the avg at the default percentile
+  const firstBM = data.benchmarks[0];
+  const lastBM = data.benchmarks[data.benchmarks.length - 1];
+
+  const ttftAvg = getAverageValueForPercentile(firstBM.ttft, lastBM.ttft, defaultPercentile);
+  const tpotAvg = getAverageValueForPercentile(firstBM.tpot, lastBM.tpot, defaultPercentile);
+  const timePerRequestAvg = getAverageValueForPercentile(
+    firstBM.timePerRequest,
+    lastBM.timePerRequest,
+    defaultPercentile
+  );
+  const throughputAvg = getAverageValueForPercentile(
+    firstBM.throughput,
+    lastBM.throughput,
+    defaultPercentile
+  );
+
+  dispatch(
+    setSloData({
+      currentRequestRate: firstBM.requestsPerSecond,
+      current: {
+        ttft: formatNumber(ttftAvg, 0),
+        tpot: formatNumber(tpotAvg, 0),
+        timePerRequest: formatNumber(timePerRequestAvg, 0),
+        throughput: formatNumber(throughputAvg, 0),
+      },
+      tasksDefaults: {
+        ttft: formatNumber(ttftAvg, 0),
+        tpot: formatNumber(tpotAvg, 0),
+        timePerRequest: formatNumber(timePerRequestAvg, 0),
+        throughput: formatNumber(throughputAvg, 0),
+      },
+    })
+  );
+};
+
+export const benchmarksApi = createApi({
+  reducerPath: 'benchmarksApi',
+  baseQuery: USE_MOCK_API ? fetchBenchmarks : fetchBaseQuery({ baseUrl: '/api' }),
+  endpoints: (builder) => ({
+    getBenchmarks: builder.query<Benchmarks, void>({
+      query: () => 'benchmarks',
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          setDefaultSLOs(data, dispatch);
+        } catch (err) {
+          console.error('Failed to fetch benchmarks:', err);
+        }
+      },
+    }),
+  }),
+});
+
+export const { useGetBenchmarksQuery } = benchmarksApi;
diff --git a/ui/src/lib/store/slices/benchmarks/benchmarks.constants.ts b/ui/src/lib/store/slices/benchmarks/benchmarks.constants.ts
new file mode 100644
index 00000000..deb444b2
--- /dev/null
+++ b/ui/src/lib/store/slices/benchmarks/benchmarks.constants.ts
@@ -0,0 +1,7 @@
+import { Benchmarks, Name } from './benchmarks.interfaces';
+
+export const name: Readonly<Name> = 'benchmarks';
+
+export const initialState: Benchmarks = {
+  benchmarks: [],
+};
diff --git a/ui/src/lib/store/slices/benchmarks/benchmarks.interfaces.ts b/ui/src/lib/store/slices/benchmarks/benchmarks.interfaces.ts
new file mode 100644
index 00000000..4dc755b2
--- /dev/null
+++ b/ui/src/lib/store/slices/benchmarks/benchmarks.interfaces.ts
@@ -0,0 +1,44 @@
+export type Name = 'benchmarks';
+
+interface Statistics {
+  total: number;
+  mean: number;
+  std: number;
+  median: number;
+  min: number;
+  max: number;
+}
+
+export type PercentileValues = 'p50' | 'p90' | 'p95' | 'p99';
+
+interface Percentile {
+  percentile: string;
+  value: number;
+}
+
+interface Bucket {
+  value: number;
+  count: number;
+}
+
+export interface MetricData {
+  statistics: Statistics;
+  percentiles: Percentile[];
+  buckets: Bucket[];
+  bucketWidth: number;
+}
+
+export interface BenchmarkMetrics {
+  ttft: MetricData;
+  tpot: MetricData;
+  timePerRequest: MetricData;
+  throughput: MetricData;
+}
+
+export interface Benchmark extends BenchmarkMetrics {
+  requestsPerSecond: number;
+}
+
+export type Benchmarks = {
+  benchmarks: Benchmark[];
+};
diff --git a/ui/src/lib/store/slices/benchmarks/benchmarks.selectors.ts b/ui/src/lib/store/slices/benchmarks/benchmarks.selectors.ts
new file mode 100644
index 00000000..d98a2452
--- /dev/null
+++ b/ui/src/lib/store/slices/benchmarks/benchmarks.selectors.ts
@@ -0,0 +1,149 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { Point } from '@/lib/components/Charts/common/interfaces';
+
+import { PercentileItem } from '../../../components/DistributionPercentiles';
+import { formatNumber } from '../../../utils/helpers';
+import { createMonotoneSpline } from '../../../utils/interpolation';
+import { RootState } from '../../index';
+
+import { BenchmarkMetrics, PercentileValues } from './benchmarks.interfaces';
+import { selectSloState } from '../slo/slo.selectors';
+
+export const selectBenchmarks = (state: RootState) => state.benchmarks.data;
+
+export const selectMetricsSummaryLineData = createSelector(
+  [selectBenchmarks, selectSloState],
+  (benchmarks, sloState) => {
+    const sortedByRPS = benchmarks?.benchmarks
+      ?.slice()
+      ?.sort((bm1, bm2) => (bm1.requestsPerSecond > bm2.requestsPerSecond ? 1 : -1));
+    const selectedPercentile = sloState.enforcedPercentile;
+
+    const lineData: { [K in keyof BenchmarkMetrics]: Point[] } = {
+      ttft: [],
+      tpot: [],
+      timePerRequest: [],
+      throughput: [],
+    };
+    const metrics: (keyof BenchmarkMetrics)[] = ['ttft', 'tpot', 'timePerRequest', 'throughput'];
+    metrics.forEach((metric) => {
+      const data: Point[] = [];
+      sortedByRPS?.forEach((benchmark) => {
+        const percentile = benchmark[metric].percentiles.find(
+          (p) => p.percentile === selectedPercentile
+        );
+        data.push({
+          x: benchmark.requestsPerSecond,
+          y: percentile?.value ?? 0,
+        });
+      });
+
+      lineData[metric] = data;
+    });
+    return lineData;
+  }
+);
+
+const getDefaultMetricValues = () => ({
+  enforcedPercentileValue: 0,
+  mean: 0,
+  percentiles: [],
+});
+
+export const selectInterpolatedMetrics = createSelector(
+  [selectBenchmarks, selectSloState],
+  (benchmarks, sloState) => {
+    const sortedByRPS = benchmarks?.benchmarks
+      ?.slice()
+      ?.sort((bm1, bm2) => (bm1.requestsPerSecond > bm2.requestsPerSecond ? 1 : -1));
+    const requestRates = sortedByRPS?.map((bm) => bm.requestsPerSecond) || [];
+    const { enforcedPercentile, currentRequestRate } = sloState;
+    const metricData: {
+      [K in keyof BenchmarkMetrics | 'mean']: {
+        enforcedPercentileValue: number;
+        mean: number;
+        percentiles: PercentileItem[];
+      };
+    } = {
+      ttft: getDefaultMetricValues(),
+      tpot: getDefaultMetricValues(),
+      timePerRequest: getDefaultMetricValues(),
+      throughput: getDefaultMetricValues(),
+      mean: getDefaultMetricValues(),
+    };
+    const metrics: (keyof BenchmarkMetrics)[] = ['ttft', 'tpot', 'timePerRequest', 'throughput'];
+    if (!sortedByRPS || sortedByRPS.length === 0) {
+      return metricData;
+    }
+    const invalidRps =
+      currentRequestRate < sortedByRPS[0].requestsPerSecond ||
+      currentRequestRate > sortedByRPS[sortedByRPS.length - 1].requestsPerSecond;
+    if (invalidRps) {
+      return metricData;
+    }
+    metrics.forEach((metric) => {
+      const meanValues = sortedByRPS.map((bm) => bm[metric].statistics.mean);
+      const interpolateMeanAt = createMonotoneSpline(requestRates, meanValues);
+      const interpolatedMeanValue: number = interpolateMeanAt(currentRequestRate) || 0;
+      const percentiles: PercentileValues[] = ['p50', 'p90', 'p95', 'p99'];
+      const valuesByPercentile = percentiles.map((p) => {
+        const bmValuesAtP = sortedByRPS.map((bm) => {
+          const result =
+            bm[metric].percentiles.find((percentile) => percentile.percentile === p)?.value || 0;
+          return result;
+        });
+        const interpolateValueAtP = createMonotoneSpline(requestRates, bmValuesAtP);
+        const interpolatedValueAtP = formatNumber(interpolateValueAtP(currentRequestRate));
+        return { label: p, value: `${interpolatedValueAtP}` } as PercentileItem;
+      });
+      const interpolatedPercentileValue =
+        Number(valuesByPercentile.find((p) => p.label === enforcedPercentile)?.value) || 0;
+      metricData[metric] = {
+        enforcedPercentileValue: interpolatedPercentileValue,
+        mean: interpolatedMeanValue,
+        percentiles: valuesByPercentile,
+      };
+    });
+    return metricData;
+  }
+);
+
+export const selectMetricsDetailsLineData = createSelector([selectBenchmarks], (benchmarks) => {
+  const sortedByRPS =
+    benchmarks?.benchmarks
+      ?.slice()
+      ?.sort((bm1, bm2) => (bm1.requestsPerSecond > bm2.requestsPerSecond ? 1 : -1)) || [];
+
+  const lineData: {
+    [K in keyof BenchmarkMetrics]: { data: Point[]; id: string; solid?: boolean }[];
+  } = {
+    ttft: [],
+    tpot: [],
+    timePerRequest: [],
+    throughput: [],
+  };
+  const props: (keyof BenchmarkMetrics)[] = ['ttft', 'tpot', 'timePerRequest', 'throughput'];
+  props.forEach((prop) => {
+    if (sortedByRPS.length === 0) {
+      return;
+    }
+    const data: { [key: string]: { data: Point[]; id: string; solid?: boolean } } = {};
+    sortedByRPS[0].ttft.percentiles.forEach((p) => {
+      data[p.percentile] = { data: [], id: p.percentile };
+    });
+    data.mean = { data: [], id: 'mean', solid: true };
+    sortedByRPS?.forEach((benchmark) => {
+      const rps = benchmark.requestsPerSecond;
+      benchmark[prop].percentiles.forEach((p) => {
+        data[p.percentile].data.push({ x: rps, y: p.value });
+      });
+      const mean = benchmark[prop].statistics.mean;
+      data.mean.data.push({ x: rps, y: mean });
+    });
+    lineData[prop] = Object.keys(data).map((key) => {
+      return data[key];
+    });
+  });
+  return lineData;
+});
diff --git a/ui/src/lib/store/slices/benchmarks/benchmarks.slice.ts b/ui/src/lib/store/slices/benchmarks/benchmarks.slice.ts
new file mode 100644
index 00000000..e54ded76
--- /dev/null
+++ b/ui/src/lib/store/slices/benchmarks/benchmarks.slice.ts
@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { benchmarksApi } from './benchmarks.api';
+import * as Constants from './benchmarks.constants';
+import { Benchmarks } from './benchmarks.interfaces';
+
+interface BenchmarksState {
+  data: Benchmarks | null;
+}
+
+const initialState: BenchmarksState = {
+  data: null,
+};
+
+const benchmarksSlice = createSlice({
+  name: Constants.name,
+  initialState,
+  reducers: {
+    setBenchmarks: (state, action: PayloadAction<Benchmarks>) => {
+      state.data = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addMatcher(benchmarksApi.endpoints.getBenchmarks.matchFulfilled, (state, action) => {
+      state.data = action.payload;
+    });
+  },
+});
+
+export const { setBenchmarks } = benchmarksSlice.actions;
+export default benchmarksSlice.reducer;
diff --git a/ui/src/lib/store/slices/benchmarks/index.ts b/ui/src/lib/store/slices/benchmarks/index.ts
new file mode 100644
index 00000000..953b52c8
--- /dev/null
+++ b/ui/src/lib/store/slices/benchmarks/index.ts
@@ -0,0 +1,4 @@
+export * from './benchmarks.api';
+export { default as benchmarksReducer } from './benchmarks.slice';
+export * from './benchmarks.selectors';
+export * from './benchmarks.interfaces';
diff --git a/ui/src/lib/store/slices/metrics/metrics.constants.ts b/ui/src/lib/store/slices/metrics/metrics.constants.ts
new file mode 100644
index 00000000..a9ae8414
--- /dev/null
+++ b/ui/src/lib/store/slices/metrics/metrics.constants.ts
@@ -0,0 +1,10 @@
+import { MetricsState, Name } from './metrics.interfaces';
+export const name: Readonly<Name> = 'metrics.state';
+
+export const initialState: MetricsState = {
+  currentRequestRate: 0,
+  timePerRequest: { valuesByRps: {} },
+  ttft: { valuesByRps: {} },
+  tpot: { valuesByRps: {} },
+  throughput: { valuesByRps: {} },
+};
diff --git a/ui/src/lib/store/slices/metrics/metrics.interfaces.ts b/ui/src/lib/store/slices/metrics/metrics.interfaces.ts
new file mode 100644
index 00000000..b38dc98b
--- /dev/null
+++ b/ui/src/lib/store/slices/metrics/metrics.interfaces.ts
@@ -0,0 +1,13 @@
+export type Name = 'metrics.state';
+
+export interface MetricsState {
+  currentRequestRate: number;
+  timePerRequest: SingleMetricsState;
+  ttft: SingleMetricsState;
+  tpot: SingleMetricsState;
+  throughput: SingleMetricsState;
+}
+
+export type SingleMetricsState = {
+  valuesByRps: Record<number, number>;
+};
diff --git a/ui/src/lib/store/slices/metrics/metrics.selectors.ts b/ui/src/lib/store/slices/metrics/metrics.selectors.ts
new file mode 100644
index 00000000..9aa4d46a
--- /dev/null
+++ b/ui/src/lib/store/slices/metrics/metrics.selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../../index';
+
+export const selectMetricsState = (state: RootState) => state.metrics;
diff --git a/ui/src/lib/store/slices/metrics/metrics.slice.ts b/ui/src/lib/store/slices/metrics/metrics.slice.ts
new file mode 100644
index 00000000..40f16dc1
--- /dev/null
+++ b/ui/src/lib/store/slices/metrics/metrics.slice.ts
@@ -0,0 +1,20 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import * as Constants from './metrics.constants';
+import { MetricsState } from './metrics.interfaces';
+
+const metricsSlice = createSlice({
+  name: Constants.name,
+  initialState: Constants.initialState,
+  reducers: {
+    setMetricsData: (state, action: PayloadAction<MetricsState>) => {
+      return { ...state, ...action.payload };
+    },
+    setSliderRps: (state, action: PayloadAction<number>) => {
+      state.currentRequestRate = action.payload;
+    },
+  },
+});
+
+export const { setMetricsData, setSliderRps } = metricsSlice.actions;
+export default metricsSlice.reducer;
diff --git a/ui/src/lib/store/slices/runInfo/index.ts b/ui/src/lib/store/slices/runInfo/index.ts
new file mode 100644
index 00000000..5595ffac
--- /dev/null
+++ b/ui/src/lib/store/slices/runInfo/index.ts
@@ -0,0 +1,4 @@
+export * from './runInfo.api';
+export { default as infoReducer } from './runInfo.slice';
+export * from './runInfo.selectors';
+export * from './runInfo.interfaces';
diff --git a/ui/src/lib/store/slices/runInfo/runInfo.api.ts b/ui/src/lib/store/slices/runInfo/runInfo.api.ts
new file mode 100644
index 00000000..9c510b5b
--- /dev/null
+++ b/ui/src/lib/store/slices/runInfo/runInfo.api.ts
@@ -0,0 +1,21 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+import { RunInfo } from './runInfo.interfaces';
+
+const USE_MOCK_API = process.env.NEXT_PUBLIC_USE_MOCK_API === 'true';
+
+const fetchRunInfo = async () => {
+  return { data: window.run_info as RunInfo };
+};
+
+export const runInfoApi = createApi({
+  reducerPath: 'runInfoApi',
+  baseQuery: USE_MOCK_API ? fetchRunInfo : fetchBaseQuery({ baseUrl: '/api' }),
+  endpoints: (builder) => ({
+    getRunInfo: builder.query<RunInfo, void>({
+      query: () => 'run-info',
+    }),
+  }),
+});
+
+export const { useGetRunInfoQuery } = runInfoApi;
diff --git a/ui/src/lib/store/slices/runInfo/runInfo.constants.ts b/ui/src/lib/store/slices/runInfo/runInfo.constants.ts
new file mode 100644
index 00000000..af773759
--- /dev/null
+++ b/ui/src/lib/store/slices/runInfo/runInfo.constants.ts
@@ -0,0 +1,3 @@
+import { Name } from './runInfo.interfaces';
+
+export const name: Readonly<Name> = 'runInfo';
diff --git a/ui/src/lib/store/slices/runInfo/runInfo.interfaces.ts b/ui/src/lib/store/slices/runInfo/runInfo.interfaces.ts
new file mode 100644
index 00000000..6fb8b393
--- /dev/null
+++ b/ui/src/lib/store/slices/runInfo/runInfo.interfaces.ts
@@ -0,0 +1,13 @@
+export type Name = 'runInfo';
+
+export interface RunInfo {
+  model: {
+    name: string;
+    size: number;
+  };
+  task: string;
+  dataset: {
+    name: string;
+  };
+  timestamp: string;
+}
diff --git a/ui/src/lib/store/slices/runInfo/runInfo.selectors.ts b/ui/src/lib/store/slices/runInfo/runInfo.selectors.ts
new file mode 100644
index 00000000..1f8338ca
--- /dev/null
+++ b/ui/src/lib/store/slices/runInfo/runInfo.selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../../index';
+
+export const selectRunInfo = (state: RootState) => state.runInfo.data;
diff --git a/ui/src/lib/store/slices/runInfo/runInfo.slice.ts b/ui/src/lib/store/slices/runInfo/runInfo.slice.ts
new file mode 100644
index 00000000..787786b1
--- /dev/null
+++ b/ui/src/lib/store/slices/runInfo/runInfo.slice.ts
@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { runInfoApi } from './runInfo.api';
+import * as Constants from './runInfo.constants';
+import { RunInfo } from './runInfo.interfaces';
+
+interface RunInfoState {
+  data: RunInfo | null;
+}
+
+const initialState: RunInfoState = {
+  data: null,
+};
+
+const runInfoSlice = createSlice({
+  name: Constants.name,
+  initialState,
+  reducers: {
+    setRunInfo: (state, action: PayloadAction<RunInfo>) => {
+      state.data = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addMatcher(runInfoApi.endpoints.getRunInfo.matchFulfilled, (state, action) => {
+      state.data = action.payload;
+    });
+  },
+});
+
+export const { setRunInfo } = runInfoSlice.actions;
+export default runInfoSlice.reducer;
diff --git a/ui/src/lib/store/slices/slo/slo.constants.ts b/ui/src/lib/store/slices/slo/slo.constants.ts
new file mode 100644
index 00000000..f58ccc05
--- /dev/null
+++ b/ui/src/lib/store/slices/slo/slo.constants.ts
@@ -0,0 +1,22 @@
+import { Name, SloState } from './slo.interfaces';
+
+export const name: Readonly<Name> = 'slo.state';
+
+export const defaultPercentile = 'p90';
+
+export const initialState: SloState = {
+  currentRequestRate: 0,
+  enforcedPercentile: defaultPercentile,
+  current: {
+    timePerRequest: 0,
+    ttft: 0,
+    tpot: 0,
+    throughput: 0,
+  },
+  tasksDefaults: {
+    timePerRequest: 0,
+    ttft: 0,
+    tpot: 0,
+    throughput: 0,
+  },
+};
diff --git a/ui/src/lib/store/slices/slo/slo.interfaces.ts b/ui/src/lib/store/slices/slo/slo.interfaces.ts
new file mode 100644
index 00000000..0d59baa2
--- /dev/null
+++ b/ui/src/lib/store/slices/slo/slo.interfaces.ts
@@ -0,0 +1,18 @@
+export type Name = 'slo.state';
+
+export interface SloState {
+  currentRequestRate: number;
+  enforcedPercentile: string;
+  current: {
+    timePerRequest: number;
+    ttft: number;
+    tpot: number;
+    throughput: number;
+  };
+  tasksDefaults: {
+    timePerRequest: number;
+    ttft: number;
+    tpot: number;
+    throughput: number;
+  };
+}
diff --git a/ui/src/lib/store/slices/slo/slo.selectors.ts b/ui/src/lib/store/slices/slo/slo.selectors.ts
new file mode 100644
index 00000000..38000830
--- /dev/null
+++ b/ui/src/lib/store/slices/slo/slo.selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '../../index';
+
+export const selectSloState = (state: RootState) => state.slo;
diff --git a/ui/src/lib/store/slices/slo/slo.slice.ts b/ui/src/lib/store/slices/slo/slo.slice.ts
new file mode 100644
index 00000000..a02fbf29
--- /dev/null
+++ b/ui/src/lib/store/slices/slo/slo.slice.ts
@@ -0,0 +1,44 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import * as Constants from './slo.constants';
+import { SloState } from './slo.interfaces';
+
+const sloSlice = createSlice({
+  name: Constants.name,
+  initialState: Constants.initialState,
+  reducers: {
+    setSloData: (state, action: PayloadAction<Partial<SloState>>) => {
+      if (action.payload.enforcedPercentile !== undefined) {
+        state.enforcedPercentile = action.payload.enforcedPercentile;
+      }
+      if (action.payload.current) {
+        state.current = { ...state.current, ...action.payload.current };
+      }
+      if (action.payload.tasksDefaults) {
+        state.tasksDefaults = { ...state.tasksDefaults, ...action.payload.tasksDefaults };
+      }
+      if (action.payload.currentRequestRate) {
+        state.currentRequestRate = action.payload.currentRequestRate;
+      }
+    },
+    setEnforcedPercentile: (state, action: PayloadAction<string>) => {
+      state.enforcedPercentile = action.payload;
+    },
+    setCurrentRequestRate: (state, action: PayloadAction<number>) => {
+      state.currentRequestRate = action.payload;
+    },
+    setSloValue: (
+      state,
+      action: PayloadAction<{ metric: keyof SloState['current']; value: number }>
+    ) => {
+      const { metric, value } = action.payload;
+      if (value >= 0) {
+        state.current[metric] = value;
+      }
+    },
+  },
+});
+
+export const { setCurrentRequestRate, setEnforcedPercentile, setSloData, setSloValue } =
+  sloSlice.actions;
+export default sloSlice.reducer;
diff --git a/ui/src/lib/store/slices/workloadDetails/index.ts b/ui/src/lib/store/slices/workloadDetails/index.ts
new file mode 100644
index 00000000..e5cd556b
--- /dev/null
+++ b/ui/src/lib/store/slices/workloadDetails/index.ts
@@ -0,0 +1,4 @@
+export * from './workloadDetails.api';
+export { default as workloadDetailsReducer } from './workloadDetails.slice';
+export * from './workloadDetails.selectors';
+export * from './workloadDetails.interfaces';
diff --git a/ui/src/lib/store/slices/workloadDetails/workloadDetails.api.ts b/ui/src/lib/store/slices/workloadDetails/workloadDetails.api.ts
new file mode 100644
index 00000000..6720f865
--- /dev/null
+++ b/ui/src/lib/store/slices/workloadDetails/workloadDetails.api.ts
@@ -0,0 +1,21 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+import { WorkloadDetails } from './workloadDetails.interfaces';
+
+const USE_MOCK_API = process.env.NEXT_PUBLIC_USE_MOCK_API === 'true';
+
+const fetchWorkloadDetails = async () => {
+  return { data: window.workload_details as WorkloadDetails };
+};
+
+export const workloadDetailsApi = createApi({
+  reducerPath: 'workloadDetailsApi',
+  baseQuery: USE_MOCK_API ? fetchWorkloadDetails : fetchBaseQuery({ baseUrl: '/api' }),
+  endpoints: (builder) => ({
+    getWorkloadDetails: builder.query<WorkloadDetails, void>({
+      query: () => 'workload-details',
+    }),
+  }),
+});
+
+export const { useGetWorkloadDetailsQuery } = workloadDetailsApi;
diff --git a/ui/src/lib/store/slices/workloadDetails/workloadDetails.constants.ts b/ui/src/lib/store/slices/workloadDetails/workloadDetails.constants.ts
new file mode 100644
index 00000000..c45efa76
--- /dev/null
+++ b/ui/src/lib/store/slices/workloadDetails/workloadDetails.constants.ts
@@ -0,0 +1,58 @@
+import { Name, WorkloadDetails } from './workloadDetails.interfaces';
+
+export const name: Readonly<Name> = 'workloadDetails';
+
+export const initialState: WorkloadDetails = {
+  prompts: {
+    samples: [],
+    tokenDistributions: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [],
+      buckets: [],
+      bucketWidth: 0,
+    },
+  },
+  generations: {
+    samples: [],
+    tokenDistributions: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [],
+      buckets: [],
+      bucketWidth: 0,
+    },
+  },
+  requestsOverTime: {
+    numBenchmarks: 0,
+    requestsOverTime: {
+      statistics: {
+        total: 0,
+        mean: 0,
+        std: 0,
+        median: 0,
+        min: 0,
+        max: 0,
+      },
+      percentiles: [],
+      buckets: [],
+      bucketWidth: 0,
+    },
+  },
+  rateType: '',
+  server: {
+    target: '',
+  },
+};
diff --git a/ui/src/lib/store/slices/workloadDetails/workloadDetails.interfaces.ts b/ui/src/lib/store/slices/workloadDetails/workloadDetails.interfaces.ts
new file mode 100644
index 00000000..2aa7619f
--- /dev/null
+++ b/ui/src/lib/store/slices/workloadDetails/workloadDetails.interfaces.ts
@@ -0,0 +1,49 @@
+export type Name = 'workloadDetails';
+
+interface Statistics {
+  total: number;
+  mean: number;
+  std: number;
+  median: number;
+  min: number;
+  max: number;
+}
+
+interface Percentile {
+  percentile: string;
+  value: number;
+}
+
+interface Bucket {
+  value: number;
+  count: number;
+}
+
+interface Distribution {
+  statistics: Statistics;
+  percentiles: Percentile[];
+  buckets: Bucket[];
+  bucketWidth: number;
+}
+
+interface TokenData {
+  samples: string[];
+  tokenDistributions: Distribution;
+}
+
+interface BenchmarkData {
+  numBenchmarks: number;
+  requestsOverTime: Distribution;
+}
+
+interface Server {
+  target: string;
+}
+
+export interface WorkloadDetails {
+  prompts: TokenData;
+  generations: TokenData;
+  requestsOverTime: BenchmarkData;
+  rateType: string;
+  server: Server;
+}
diff --git a/ui/src/lib/store/slices/workloadDetails/workloadDetails.selectors.ts b/ui/src/lib/store/slices/workloadDetails/workloadDetails.selectors.ts
new file mode 100644
index 00000000..df22cb4a
--- /dev/null
+++ b/ui/src/lib/store/slices/workloadDetails/workloadDetails.selectors.ts
@@ -0,0 +1,71 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { formatNumber } from '../../../utils/helpers';
+import { RootState } from '../../index';
+
+export const selectWorkloadDetails = (state: RootState) => state.workloadDetails.data;
+
+export const selectPromptsHistogramBarData = createSelector(
+  [selectWorkloadDetails],
+  (workloadDetails) => {
+    return workloadDetails?.prompts?.tokenDistributions.buckets.map((bucket) => ({
+      x: formatNumber(bucket.value),
+      y: bucket.count,
+    }));
+  }
+);
+
+export const selectGenerationsHistogramBarData = createSelector(
+  [selectWorkloadDetails],
+  (workloadDetails) => {
+    return workloadDetails?.generations?.tokenDistributions.buckets.map((bucket) => ({
+      x: formatNumber(bucket.value),
+      y: bucket.count,
+    }));
+  }
+);
+
+export const selectPromptsHistogramLineData = createSelector(
+  [selectWorkloadDetails],
+  (workloadDetails) => [
+    {
+      x: formatNumber(workloadDetails?.prompts?.tokenDistributions.statistics.mean ?? 0),
+      y: 35,
+      id: 'mean',
+    },
+    {
+      x: formatNumber(workloadDetails?.prompts?.tokenDistributions.statistics.median ?? 0),
+      y: 35,
+      id: 'median',
+    },
+  ]
+);
+
+export const selectGenerationsHistogramLineData = createSelector(
+  [selectWorkloadDetails],
+  (workloadDetails) => [
+    {
+      x: formatNumber(workloadDetails?.generations?.tokenDistributions.statistics.mean ?? 0),
+      y: 35,
+      id: 'mean',
+    },
+    {
+      x: formatNumber(workloadDetails?.generations?.tokenDistributions.statistics.median ?? 0),
+      y: 35,
+      id: 'median',
+    },
+  ]
+);
+
+export const selectRequestOverTimeBarData = createSelector(
+  [selectWorkloadDetails],
+  (workloadDetails) => {
+    const requestObjs = workloadDetails?.requestsOverTime?.requestsOverTime;
+    return {
+      barChartData: requestObjs?.buckets?.map((bucket) => ({
+        x: formatNumber(bucket.value),
+        y: bucket.count,
+      })),
+    };
+  }
+);
diff --git a/ui/src/lib/store/slices/workloadDetails/workloadDetails.slice.ts b/ui/src/lib/store/slices/workloadDetails/workloadDetails.slice.ts
new file mode 100644
index 00000000..7d05a0d7
--- /dev/null
+++ b/ui/src/lib/store/slices/workloadDetails/workloadDetails.slice.ts
@@ -0,0 +1,34 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { workloadDetailsApi } from './workloadDetails.api';
+import * as Constants from './workloadDetails.constants';
+import { WorkloadDetails } from './workloadDetails.interfaces';
+
+interface WorkloadDetailsState {
+  data: WorkloadDetails | null;
+}
+
+const initialState: WorkloadDetailsState = {
+  data: null,
+};
+
+const workloadDetailsSlice = createSlice({
+  name: Constants.name,
+  initialState,
+  reducers: {
+    setWorkloadDetails: (state, action: PayloadAction<WorkloadDetails>) => {
+      state.data = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addMatcher(
+      workloadDetailsApi.endpoints.getWorkloadDetails.matchFulfilled,
+      (state, action) => {
+        state.data = action.payload;
+      }
+    );
+  },
+});
+
+export const { setWorkloadDetails } = workloadDetailsSlice.actions;
+export default workloadDetailsSlice.reducer;
diff --git a/ui/src/lib/store/workloadDetailsWindowData.ts b/ui/src/lib/store/workloadDetailsWindowData.ts
new file mode 100644
index 00000000..8913f5c2
--- /dev/null
+++ b/ui/src/lib/store/workloadDetailsWindowData.ts
@@ -0,0 +1,167 @@
+export const workloadDetailsScript = `window.workload_details = {
+  "prompts": {
+    "samples": [
+      "such a sacrifice to her advantage as years of gratitude cannot enough acknowledge. By this time she is actually with them! If such goodness does not make her miserable now, she will never deserve to be happy! What a meeting for her, when she first sees my aunt! We must endeavour to forget all that has passed on either side, said Jane I hope and trust they will yet be happy. His consenting to marry her is a proof, I will believe, that he is come to a right way of thinking. Their mutual affection will steady them; and I flatter myself they will settle so quietly, and live in so rational a manner",
+      "a reconciliation; and, after a little further resistance on the part of his aunt, her resentment gave way, either to her affection for him, or her curiosity to see how his wife conducted herself; and she condescended to wait on them at Pemberley, in spite of that pollution which its woods had received, not merely from the presence of such a mistress, but the visits of her uncle and aunt from the city. With the Gardiners they were always on the most intimate terms. Darcy, as well as Elizabeth, really loved them; and they were both ever sensible of the warmest gratitude towards the persons who,",
+      "struck her, that _she_ was selected from among her sisters as worthy of being the mistress of Hunsford Parsonage, and of assisting to form a quadrille table at Rosings, in the absence of more eligible visitors. The idea soon reached to conviction, as she observed his increasing civilities towards herself, and heard his frequent attempt at a compliment on her wit and vivacity; and though more astonished than gratified herself by this effect of her charms, it was not long before her mother gave her to understand that the probability of their marriage was exceedingly agreeable to _her_. Elizabeth, however, did not choose",
+      "were comfortable on this subject. Day after day passed away without bringing any other tidings of him than the report which shortly prevailed in Meryton of his coming no more to Netherfield the whole winter; a report which highly incensed Mrs. Bennet, and which she never failed to contradict as a most scandalous falsehood. Even Elizabeth began to fear not that Bingley was indifferent but that his sisters would be successful in keeping him away. Unwilling as she was to admit an idea so destructive to Jane s happiness, and so dishonourable to the stability of her lover, she could not prevent its frequently recurring",
+      "? cried Elizabeth, brightening up for a moment. Upon my word, said Mrs. Gardiner, I begin to be of your uncle s opinion. It is really too great a violation of decency, honour, and interest, for him to be guilty of it. I cannot think so very ill of Wickham. Can you, yourself, Lizzie, so wholly give him up, as to believe him capable of it? Not perhaps of neglecting his own interest. But of every other neglect I can believe him capable. If, indeed, it should be so! But I dare not hope it. Why should they not go on"
+    ],
+    "tokenDistributions": {
+      "statistics": {
+        "mean": 128.07115246019785
+      },
+      "buckets": [
+        {
+          "value": 128,
+          "count": 14389
+        },
+        {
+          "value": 130,
+          "count": 182
+        },
+        {
+          "value": 129,
+          "count": 677
+        },
+        {
+          "value": 131,
+          "count": 15
+        }
+      ]
+    }
+  },
+  "generations": {
+    "samples": [
+      ", that his relations could not choose but be struck with their pleasing and advantageous change. Ten years of reproofs, threats, and chastisements, may not have given them all they ought to know; but surely evidence and conviction will soon do the rest, thanks to the happy truth-so-discovered is Bess",
+      " for her sake, had generously given up the one interest, and risked the other, the only real friends whom she could ever be able to acknowledge. Miss Gardiner had attended her nephew, the season before, and it was some consolation to Elizabeth to see his sisters again at Pemberley. Henry, of course",
+      " to attend to any reasoning. He was already so far her friend, and the habit of their acquaintance, attended as it was by a new share of regard, could produce but good offices among them, and we must take our comfort as well as we may. This comfort he soon united with, in possessesing her esteem",
+      " to her by the conduct of her mother and sisters. Charlotte was ins   el      amorous, silly, and headstrong; but he is, or seems to be, really in love with her.   El   ,   The      rury waning of his best songs, and no man over 50",
+      ", with a certain tolerable income, in the genteel style they had known before? Why should not you, your father, and their cousins, protect and assist them, if you could prevail on your uncle to indemnify them sufficiently? -- But to deal out money recklessly, is indeed disgraceful. Had he"
+    ],
+    "tokenDistributions": {
+      "statistics": {
+        "mean": 63.951778811504944
+      },
+      "buckets": [
+        {
+          "value": 64,
+          "count": 14618
+        },
+        {
+          "value": 62,
+          "count": 147
+        },
+        {
+          "value": 63,
+          "count": 431
+        },
+        {
+          "value": 61,
+          "count": 19
+        },
+        {
+          "value": 65,
+          "count": 40
+        },
+        {
+          "value": 66,
+          "count": 4
+        },
+        {
+          "value": 67,
+          "count": 2
+        },
+        {
+          "value": 60,
+          "count": 2
+        }
+      ]
+    }
+  },
+  "requestsOverTime": {
+    "numBenchmarks": 10,
+    "requestsOverTime": {
+      "statistic": {},
+      "percentiles": [],
+      "buckets": [
+        {
+          "value": 0.12647485733032227,
+          "count": 46
+        },
+        {
+          "value": 68.87534944216411,
+          "count": 831
+        },
+        {
+          "value": 137.6242240269979,
+          "count": 2076
+        },
+        {
+          "value": 206.37309861183167,
+          "count": 629
+        },
+        {
+          "value": 275.12197319666546,
+          "count": 282
+        },
+        {
+          "value": 343.87084778149926,
+          "count": 397
+        },
+        {
+          "value": 412.619722366333,
+          "count": 517
+        },
+        {
+          "value": 481.3685969511668,
+          "count": 669
+        },
+        {
+          "value": 550.1174715360006,
+          "count": 732
+        },
+        {
+          "value": 618.8663461208344,
+          "count": 958
+        },
+        {
+          "value": 687.6152207056682,
+          "count": 962
+        },
+        {
+          "value": 756.364095290502,
+          "count": 1224
+        },
+        {
+          "value": 825.1129698753357,
+          "count": 1197
+        },
+        {
+          "value": 893.8618444601696,
+          "count": 1458
+        },
+        {
+          "value": 962.6107190450033,
+          "count": 1435
+        },
+        {
+          "value": 1031.359593629837,
+          "count": 1695
+        },
+        {
+          "value": 1100.108468214671,
+          "count": 1640
+        },
+        {
+          "value": 1168.8573427995047,
+          "count": 1931
+        }
+      ]
+    }
+  },
+  "rateType": "sweep",
+  "server": {
+    "target": "http://192.168.4.13:8000"
+  }
+};`;
diff --git a/ui/src/lib/utils/helpers.ts b/ui/src/lib/utils/helpers.ts
new file mode 100644
index 00000000..ee45274b
--- /dev/null
+++ b/ui/src/lib/utils/helpers.ts
@@ -0,0 +1,67 @@
+import { filesize } from 'filesize';
+
+export const formatValue = (value: number, fractionDigits = 2) =>
+  `$ ${value.toFixed(fractionDigits)}`;
+
+export const ceil = (number: number, precision = 0) => {
+  const n = number * Math.pow(10, precision);
+  return Math.ceil(n) / Math.pow(10, precision);
+};
+
+export const floor = (number: number, precision = 0) => {
+  const n = number * Math.pow(10, precision);
+  return Math.floor(n) / Math.pow(10, precision);
+};
+
+export const formatNumber = (number: number, precision = 2) => Number(number.toFixed(precision));
+
+export const parseUrlParts = (urlString: string) => {
+  try {
+    const url = new URL(urlString);
+    return {
+      type: url.protocol.replace(':', ''),
+      target: url.hostname,
+      port: url.port || '',
+      path: url.pathname,
+    };
+  } catch (_) {
+    return {
+      type: '',
+      target: '',
+      port: '',
+      path: '',
+    };
+  }
+};
+
+export const getFileSize = (
+  size?: string | number | null,
+  roundDecimal?: number,
+  bits?: boolean
+): { size: string; units: string } | undefined => {
+  if (size) {
+    const round = roundDecimal === 0 ? 0 : roundDecimal || 1;
+    const fileSize = `${filesize(size, { round, bits })}`.split(' ');
+
+    return {
+      size: fileSize[0],
+      units: fileSize[1].toUpperCase(),
+    };
+  }
+};
+
+export const formateDate = (timestamp: string) => {
+  const date = new Date(Number(timestamp) * 1000);
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  };
+
+  return date.toLocaleString('en-US', options).replace(',', '');
+};
diff --git a/ui/src/lib/utils/interpolation.ts b/ui/src/lib/utils/interpolation.ts
new file mode 100644
index 00000000..50e559a0
--- /dev/null
+++ b/ui/src/lib/utils/interpolation.ts
@@ -0,0 +1,67 @@
+export function createMonotoneSpline(xs: number[], ys: number[]) {
+  const n = xs.length;
+  if (n < 2) {
+    throw new Error('Need at least two points');
+  }
+  const dx = new Array<number>(n - 1);
+  const dy = new Array<number>(n - 1);
+  const m = new Array<number>(n - 1);
+  const c1 = new Array<number>(n);
+
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = xs[i + 1] - xs[i];
+    if (dx[i] === 0) {
+      throw new Error(`xs[${i}] == xs[${i + 1}]`);
+    }
+    dy[i] = ys[i + 1] - ys[i];
+    m[i] = dy[i] / dx[i];
+  }
+
+  c1[0] = m[0];
+  for (let i = 1; i < n - 1; i++) {
+    if (m[i - 1] * m[i] <= 0) {
+      c1[i] = 0;
+    } else {
+      const dx1 = dx[i - 1],
+        dx2 = dx[i],
+        common = dx1 + dx2;
+      c1[i] = (3 * common) / ((common + dx2) / m[i - 1] + (common + dx1) / m[i]);
+    }
+  }
+  c1[n - 1] = m[n - 2];
+
+  return function (x: number) {
+    // Binary search for interval i: xs[i] <= x < xs[i+1]
+    let lo = 0,
+      hi = n - 2;
+    while (lo <= hi) {
+      const mid = (lo + hi) >> 1;
+      if (x < xs[mid]) {
+        hi = mid - 1;
+      } else if (x > xs[mid + 1]) {
+        lo = mid + 1;
+      } else {
+        lo = mid;
+        break;
+      }
+    }
+    let i = lo;
+    if (i < 0) {
+      i = 0;
+    } else if (i > n - 2) {
+      i = n - 2;
+    }
+
+    const h = dx[i];
+    const t = (x - xs[i]) / h;
+    const t2 = t * t,
+      t3 = t2 * t;
+
+    const h00 = 2 * t3 - 3 * t2 + 1;
+    const h10 = t3 - 2 * t2 + t;
+    const h01 = -2 * t3 + 3 * t2;
+    const h11 = t3 - t2;
+
+    return h00 * ys[i] + h10 * h * c1[i] + h01 * ys[i + 1] + h11 * h * c1[i + 1];
+  };
+}
diff --git a/ui/src/tests/test.helper.tsx b/ui/src/tests/test.helper.tsx
new file mode 100644
index 00000000..7d93b4e7
--- /dev/null
+++ b/ui/src/tests/test.helper.tsx
@@ -0,0 +1,17 @@
+import { ThemeProvider } from '@mui/material/styles';
+import React, { ReactNode } from 'react';
+
+import { muiThemeV3Dark } from '@/app/theme';
+import { ReduxProvider } from '@/lib/store/provider';
+
+interface TestProvidersProps {
+  children: ReactNode;
+}
+
+export const MockedWrapper = ({ children }: TestProvidersProps) => {
+  return (
+    <ReduxProvider>
+      <ThemeProvider theme={muiThemeV3Dark}>{children}</ThemeProvider>
+    </ReduxProvider>
+  );
+};
diff --git a/ui/src/tests/unit/components/Charts/DashedLine/helpers.test.ts b/ui/src/tests/unit/components/Charts/DashedLine/helpers.test.ts
new file mode 100644
index 00000000..bfe7ec8e
--- /dev/null
+++ b/ui/src/tests/unit/components/Charts/DashedLine/helpers.test.ts
@@ -0,0 +1,86 @@
+import {
+  roundNearestNice,
+  roundUpNice,
+  spacedLogValues,
+} from '../../../../../lib/components/Charts/DashedLine/helpers';
+
+describe('roundNearestNice', () => {
+  it('rounds to a nearby nice number', () => {
+    expect([10, 12]).toContain(roundNearestNice(11));
+    expect([25, 30]).toContain(roundNearestNice(27));
+    expect([50]).toContain(roundNearestNice(49));
+    expect([75, 80, 85]).toContain(roundNearestNice(81));
+    expect([800]).toContain(roundNearestNice(810));
+    expect([1300, 1400, 1500]).toContain(roundNearestNice(1342));
+  });
+  it("doesn't round some nice numbers", () => {
+    expect(roundNearestNice(15)).toBe(15);
+    expect(roundNearestNice(20)).toBe(20);
+    expect(roundNearestNice(30)).toBe(30);
+    expect(roundNearestNice(40)).toBe(40);
+    expect(roundNearestNice(75)).toBe(75);
+    expect(roundNearestNice(100)).toBe(100);
+    expect(roundNearestNice(150)).toBe(150);
+    expect(roundNearestNice(200)).toBe(200);
+    expect(roundNearestNice(400)).toBe(400);
+    expect(roundNearestNice(1000)).toBe(1000);
+    expect(roundNearestNice(1200)).toBe(1200);
+  });
+});
+
+describe('roundUpNice', () => {
+  it('rounds up to a nearby nice number', () => {
+    expect([12, 15]).toContain(roundUpNice(11));
+    expect([30]).toContain(roundUpNice(27));
+    expect([50]).toContain(roundUpNice(49));
+    expect([80, 85, 90]).toContain(roundUpNice(79));
+    expect([85, 90]).toContain(roundUpNice(81));
+    expect([850, 900, 1000]).toContain(roundUpNice(810));
+    expect([1350, 1400, 1500]).toContain(roundUpNice(1342));
+  });
+  it("doesn't round some nice numbers", () => {
+    expect(roundUpNice(15)).toBe(15);
+    expect(roundUpNice(20)).toBe(20);
+    expect(roundUpNice(30)).toBe(30);
+    expect(roundUpNice(40)).toBe(40);
+    expect(roundUpNice(75)).toBe(75);
+    expect(roundUpNice(100)).toBe(100);
+    expect(roundUpNice(150)).toBe(150);
+    expect(roundUpNice(200)).toBe(200);
+    expect(roundUpNice(400)).toBe(400);
+    expect(roundUpNice(1000)).toBe(1000);
+    expect(roundUpNice(1200)).toBe(1200);
+  });
+});
+
+describe('spacedLogValues', () => {
+  const checkValuesRoughlyLogSpaced = (values: number[]) => {
+    const valuesRatios = [];
+    for (let i = 1; i < values.length; i++) {
+      valuesRatios.push(values[i] / values[i - 1]);
+    }
+    const valuesRatiosAvg = valuesRatios.reduce((a, b) => a + b) / valuesRatios.length;
+    valuesRatios.forEach((ratio) => {
+      expect(ratio).toBeCloseTo(valuesRatiosAvg, -0.5);
+    });
+  };
+
+  it('generates an array of roughly log-scale spaced values', () => {
+    expect(spacedLogValues(1, 1000, 4)).toEqual([1, 10, 100, 1000]);
+    checkValuesRoughlyLogSpaced(spacedLogValues(1, 1324, 4));
+    checkValuesRoughlyLogSpaced(spacedLogValues(123, 12324, 6));
+    checkValuesRoughlyLogSpaced(spacedLogValues(1, 122, 6));
+    checkValuesRoughlyLogSpaced(spacedLogValues(1, 122, 9));
+  });
+  it('generates an array of nice round numbers', () => {
+    for (const value of spacedLogValues(1, 1000, 4)) {
+      expect([roundUpNice(value), roundNearestNice(value)]).toContain(value);
+    }
+    for (const value of spacedLogValues(1, 1324, 4)) {
+      expect([roundUpNice(value), roundNearestNice(value)]).toContain(value);
+    }
+    for (const value of spacedLogValues(1, 132, 7)) {
+      expect([roundUpNice(value), roundNearestNice(value)]).toContain(value);
+    }
+  });
+});
diff --git a/ui/src/tests/unit/store/slices/slo.test.tsx b/ui/src/tests/unit/store/slices/slo.test.tsx
new file mode 100644
index 00000000..f50b3880
--- /dev/null
+++ b/ui/src/tests/unit/store/slices/slo.test.tsx
@@ -0,0 +1,19 @@
+import { initialState } from '../../../../lib/store/slices/slo/slo.constants';
+import { SloState } from '../../../../lib/store/slices/slo/slo.interfaces';
+import sloReducer, { setSloData } from '../../../../lib/store/slices/slo/slo.slice';
+
+test('should handle initial state', () => {
+  expect(sloReducer(undefined, { type: '' })).toEqual(initialState);
+});
+
+test('should set slo data', () => {
+  const slo = {
+    enforcedPercentile: 'p50',
+  } as Partial<SloState>;
+
+  const fullSlos = {
+    ...initialState,
+    ...slo,
+  };
+  expect(sloReducer(undefined, setSloData(slo))).toEqual(fullSlos);
+});
diff --git a/ui/src/tests/unit/utils/interpolation.test.ts b/ui/src/tests/unit/utils/interpolation.test.ts
new file mode 100644
index 00000000..d0173548
--- /dev/null
+++ b/ui/src/tests/unit/utils/interpolation.test.ts
@@ -0,0 +1,50 @@
+import { createMonotoneSpline } from '@/lib/utils/interpolation';
+
+test('should reproduce points on a straight line', () => {
+  const xs = [0, 1, 2, 3];
+  const ys = [0, 2, 4, 6];
+  const interpolate = createMonotoneSpline(xs, ys);
+
+  [0, 0.5, 1.5, 3].forEach((x) => {
+    expect(interpolate(x)).toBeCloseTo(2 * x, 1e-6);
+  });
+});
+
+test('should return constant data on flat line', () => {
+  const xs = [0, 1, 2, 3];
+  const ys = [5, 5, 5, 5];
+  const interpolate = createMonotoneSpline(xs, ys);
+
+  [0, 1.5, 2].forEach((x) => {
+    expect(interpolate(x)).toBeCloseTo(5, 1e-6);
+  });
+});
+
+test('should hit each point precisely', () => {
+  const xs = [0, 2, 5];
+  const ys = [1, 4, 2];
+  const interpolate = createMonotoneSpline(xs, ys);
+
+  xs.forEach((x, i) => {
+    expect(interpolate(x)).toBeCloseTo(ys[i], 1e-6);
+  });
+});
+
+test('no local extremas added', () => {
+  // generate wavy line
+  const xs = Array.from(Array(50)).map((_, i) => (i + 1) / 10);
+  const ys = xs.map((x) => 1 + Math.sin((3 * Math.PI * x) / 10));
+  // check that each interpolated point is between its two bounding points
+  const interpolate = createMonotoneSpline(xs, ys);
+  for (let i = xs[0]; i < xs[xs.length - 1]; i += 0.01) {
+    const upperIndex = xs.findIndex((x) => x >= i);
+    if (upperIndex === 0) {
+      expect(interpolate(i)).toBeCloseTo(ys[0]);
+      continue;
+    }
+    const lowerY = ys[upperIndex - 1];
+    const upperY = ys[upperIndex];
+    expect(interpolate(i)).toBeLessThanOrEqual(Math.max(lowerY, upperY));
+    expect(interpolate(i)).toBeGreaterThanOrEqual(Math.min(lowerY, upperY));
+  }
+});
diff --git a/ui/src/types/declaration.d.ts b/ui/src/types/declaration.d.ts
new file mode 100644
index 00000000..6a070e24
--- /dev/null
+++ b/ui/src/types/declaration.d.ts
@@ -0,0 +1,11 @@
+import { Benchmarks } from './src/lib/store/slices/benchmarks/benchmarks.interfaces';
+import { RunInfo } from './src/lib/store/slices/runInfo/runInfo.interfaces';
+import { WorkloadDetails } from './src/lib/store/slices/workloadDetails/workloadDetails.interfaces';
+
+declare global {
+  interface Window {
+    run_info?: RunInfo;
+    workload_details?: WorkloadDetails;
+    benchmarks?: Benchmarks;
+  }
+}

From f92a82ee431d22fd420ad044d23176df6a83459a Mon Sep 17 00:00:00 2001
From: dalthecow <dalcowboiz@gmail.com>
Date: Mon, 19 May 2025 12:22:28 -0400
Subject: [PATCH 2/5] update ui to pass integration test

---
 ui/src/lib/components/PageHeader/PageHeader.component.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/src/lib/components/PageHeader/PageHeader.component.tsx b/ui/src/lib/components/PageHeader/PageHeader.component.tsx
index 4c3b054f..8b536c28 100644
--- a/ui/src/lib/components/PageHeader/PageHeader.component.tsx
+++ b/ui/src/lib/components/PageHeader/PageHeader.component.tsx
@@ -18,11 +18,8 @@ const Component = () => {
 
   return (
     <Box py={2}>
-      <Typography variant="h1" color="white">
-        Header
-      </Typography>
       <Typography variant="subtitle2" color="surface.onSurfaceAccent">
-        Guidellm
+        GuideLLM
       </Typography>
       <Typography variant="h4" color="surface.onSurface" my={'12px'}>
         Workload Report: Single Experiment

From 4461583871310ed7efc9f87a5fba76adbb811d51 Mon Sep 17 00:00:00 2001
From: dalthecow <dalcowboiz@gmail.com>
Date: Mon, 19 May 2025 14:18:55 -0400
Subject: [PATCH 3/5] Update Readme towards desired usage pathway

---
 ui/DEVELOPING.md                              | 28 +++++++++++++--
 ui/README.md                                  | 36 +++++++++++++++++++
 .../PageHeader/PageHeader.component.tsx       |  2 +-
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/ui/DEVELOPING.md b/ui/DEVELOPING.md
index 02defbc6..449564c7 100644
--- a/ui/DEVELOPING.md
+++ b/ui/DEVELOPING.md
@@ -1,12 +1,20 @@
 ## Getting Started
 
-First, run the development server:
+The GuideLLM UI is built with Next.js
+
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, run the development server:
 
 ```bash
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
 
 #### `npm run build`
 
@@ -31,3 +39,19 @@ Fix code styling issues.
 #### `make quality`
 
 Run quality eslint quality checks.
+
+##### Tagging Tests
+
+Reference [https://www.npmjs.com/package/jest-runner-groups](jest-runner-groups)
+Add @group with the tag in a docblock at the top of the test file to indicate which types of tests are contained within.
+Can't distinguish between different types of tests in the same file.
+
+```
+/**
+ * Admin dashboard tests
+ *
+ * @group smoke
+ * @group sanity
+ * @group regression
+ */
+```
diff --git a/ui/README.md b/ui/README.md
index 6bb542b8..8ade3b16 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -1 +1,37 @@
 # GuideLLM UI
+
+The GuideLLM UI is a companion to GuideLLM that allows you to visualize the peformance of your model in regards to a specific benchmark run.
+
+## Getting Started
+
+The two pathways to running the UI for your benchmark report are:
+
+1. Rely on the hosted build.
+
+If you choose this option, then you can just run your benchmarks and a report.html will be generated automatically. Assets will pull from the latest compatible version of GuideLLM UI. By default the report will be located
+
+2. Build locally.
+
+For this option:
+
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then
+
+```bash
+npm run build
+```
+
+This builds the app for production to the `out` folder.\
+
+Following this step you can serve the build however you like, for example:
+
+```bash
+npx serve out
+```
+
+Tell GuideLLM you are running things locally
diff --git a/ui/src/lib/components/PageHeader/PageHeader.component.tsx b/ui/src/lib/components/PageHeader/PageHeader.component.tsx
index 8b536c28..1be31e80 100644
--- a/ui/src/lib/components/PageHeader/PageHeader.component.tsx
+++ b/ui/src/lib/components/PageHeader/PageHeader.component.tsx
@@ -22,7 +22,7 @@ const Component = () => {
         GuideLLM
       </Typography>
       <Typography variant="h4" color="surface.onSurface" my={'12px'}>
-        Workload Report: Single Experiment
+        Workload Report
       </Typography>
       <HeaderWrapper container>
         <HeaderCell item xs={5} withDivider sx={{ paddingLeft: 0 }}>

From fe7fdc606d638de66e5e1217f170a3ac50e56415 Mon Sep 17 00:00:00 2001
From: dalthecow <dalcowboiz@gmail.com>
Date: Mon, 19 May 2025 17:06:59 -0400
Subject: [PATCH 4/5] update readme

---
 ui/README.md | 49 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/ui/README.md b/ui/README.md
index 8ade3b16..836cbea7 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -1,37 +1,52 @@
-# GuideLLM UI
+### GuideLLM UI
 
-The GuideLLM UI is a companion to GuideLLM that allows you to visualize the peformance of your model in regards to a specific benchmark run.
+GuideLLM UI is a companion frontend for visualizing the results of a GuideLLM benchmark run.
 
-## Getting Started
+### 🛠 Running the UI
 
-The two pathways to running the UI for your benchmark report are:
+1. Use the Hosted Build (Recommended for Most Users)
 
-1. Rely on the hosted build.
+After running a benchmark with GuideLLM, a report.html file will be generated (by default at guidellm_report/report.html). This file references the latest stable version of the UI hosted at:
 
-If you choose this option, then you can just run your benchmarks and a report.html will be generated automatically. Assets will pull from the latest compatible version of GuideLLM UI. By default the report will be located
+```
+https://neuralmagic.github.io/guidellm/ui/dev/
+```
+
+Open the file in your browser and you're done—no setup required.
+
+2. Build and Serve the UI Locally (For Development)
+   This option is useful if:
 
-2. Build locally.
+- You are actively developing the UI
 
-For this option:
+- You want to test changes to the UI before publishing
 
-First, install dependencies:
+- You want full control over how the report is displayed
 
 ```bash
 npm install
+npm run build
+npx serve out
 ```
 
-Then
+This will start a local server (e.g., at http://localhost:3000). Then, in your GuideLLM config or CLI flags, point to this local server as the asset base for report generation.
+
+### 🧪 Development Notes
+
+During UI development, it can be helpful to view sample data. We include a sample benchmark run wired into the Redux store under:
 
-```bash
-npm run build
+```
+src/lib/store/[runInfo/workloadDetails/benchmarks]WindowData.ts
 ```
 
-This builds the app for production to the `out` folder.\
+In the future this will be replaced by a configurable untracked file for dev use.
 
-Following this step you can serve the build however you like, for example:
+### 🚧 Future Possibilities
 
-```bash
-npx serve out
+We're evaluating options for hosting dev/staging/prod builds on GitHub Pages. For now, production builds will be published at:
+
+```
+https://neuralmagic.github.io/guidellm/ui/dev/
 ```
 
-Tell GuideLLM you are running things locally
+If needed, alternative hosting (e.g., Vercel, Netlify) may be explored, but simplicity and transparency remain key priorities for this open-source tool.

From 32cbe0735e875cd63591d26b936ed153b766b890 Mon Sep 17 00:00:00 2001
From: dalthecow <dalcowboiz@gmail.com>
Date: Wed, 21 May 2025 19:41:10 -0400
Subject: [PATCH 5/5] run precommit check

---
 ui/.prettierignore | 2 +-
 ui/Makefile        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/.prettierignore b/ui/.prettierignore
index ee9e77cf..2c0da97a 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -3,4 +3,4 @@
 /bin
 /build
 /public
-/.meta
\ No newline at end of file
+/.meta
diff --git a/ui/Makefile b/ui/Makefile
index 59354ef1..73075015 100644
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -9,7 +9,7 @@ quality:
 	@# Run TypeScript checks
 	npx tsc -p tsconfig.json        --noEmit   # app code
 	npx tsc -p tsconfig.test.json   --noEmit   # unit + integration tests
-	npx tsc -p tsconfig.cypress.json --noEmit 
+	npx tsc -p tsconfig.cypress.json --noEmit
 
 # Style the code according to accepted standards for the repo
 style:
@@ -25,4 +25,4 @@ test-unit:
 test-integration:
 	@echo "Running integration tests";
 	@# Run react tests
-	npm run test:integration
\ No newline at end of file
+	npm run test:integration