diff --git a/app/Http/Controllers/BuildController.php b/app/Http/Controllers/BuildController.php
index 77edc1586c..f969b9ed1c 100644
--- a/app/Http/Controllers/BuildController.php
+++ b/app/Http/Controllers/BuildController.php
@@ -67,6 +67,16 @@ public function tests(int $build_id): View
             ->with('filters', $filters);
     }
 
+    public function measurements(int $build_id): View
+    {
+        $this->setBuildById($build_id);
+
+        $filters = json_decode(request()->get('filters')) ?? ['all' => []];
+
+        return $this->view('build.measurements', 'Build Measurements')
+            ->with('filters', $filters);
+    }
+
     protected function renderBuildPage(int $build_id, string $page_name, string $page_title = '')
     {
         $this->setBuildById($build_id);
diff --git a/database/migrations/2024_10_14_183851_buildmeasurements_unique_buildid_source_type_name.php b/database/migrations/2024_10_14_183851_buildmeasurements_unique_buildid_source_type_name.php
new file mode 100644
index 0000000000..b0c834d830
--- /dev/null
+++ b/database/migrations/2024_10_14_183851_buildmeasurements_unique_buildid_source_type_name.php
@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('buildmeasurements', function (Blueprint $table) {
+            $table->unique(['buildid', 'source', 'type', 'name']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('buildmeasurements', function (Blueprint $table) {
+            $table->dropUnique(['buildid', 'source', 'type', 'name']);
+        });
+    }
+};
diff --git a/resources/js/app.js b/resources/js/app.js
index 350342e429..afc4254a0e 100755
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -31,6 +31,7 @@ import ViewDynamicAnalysis from './components/ViewDynamicAnalysis.vue';
 import AllProjects from './components/AllProjects.vue';
 import SubProjectDependencies from './components/SubProjectDependencies.vue';
 import BuildTestsPage from './components/BuildTestsPage.vue';
+import BuildMeasurementsPage from './components/BuildMeasurementsPage.vue';
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import * as FA from '@fortawesome/fontawesome-svg-core';
@@ -60,6 +61,7 @@ const cdash_components = {
   AllProjects,
   SubProjectDependencies,
   BuildTestsPage,
+  BuildMeasurementsPage,
 };
 
 /**
diff --git a/resources/js/components/BuildMeasurementsPage.vue b/resources/js/components/BuildMeasurementsPage.vue
new file mode 100644
index 0000000000..b9ee139363
--- /dev/null
+++ b/resources/js/components/BuildMeasurementsPage.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-w-full tw-gap-4">
+    <filter-builder
+      filter-type="BuildMeasurementsFiltersMultiFilterInput"
+      primary-record-name="build measurements"
+      :initial-filters="initialFilters"
+      :execute-query-link="executeQueryLink"
+      @changeFilters="filters => changedFilters = filters"
+    />
+    <loading-indicator :is-loading="!build">
+      <data-table
+        :columns="columns"
+        :rows="formattedMeasurementRows"
+        :full-width="true"
+        initial-sort-column="source"
+      />
+    </loading-indicator>
+  </div>
+</template>
+
+<script>
+
+import DataTable from './shared/DataTable.vue';
+import gql from 'graphql-tag';
+import FilterBuilder from './shared/FilterBuilder.vue';
+import LoadingIndicator from './shared/LoadingIndicator.vue';
+
+export default {
+  components: {
+    LoadingIndicator,
+    FilterBuilder,
+    DataTable,
+  },
+
+  props: {
+    buildId: {
+      type: Number,
+      required: true,
+    },
+
+    initialFilters: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  apollo: {
+    build: {
+      query: gql`
+        query($buildid: ID, $filters: BuildMeasurementsFiltersMultiFilterInput, $after: String) {
+          build(id: $buildid) {
+            measurements(filters: $filters, after: $after, first: 100) {
+              edges {
+                node {
+                  id
+                  name
+                  source
+                  type
+                  value
+                }
+              }
+              pageInfo {
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                endCursor
+              }
+            }
+          }
+        }
+      `,
+      variables() {
+        return {
+          buildid: this.buildId,
+          filters: this.initialFilters,
+          after: '',
+        };
+      },
+      result({data}) {
+        if (data && data.build.measurements.pageInfo.hasNextPage) {
+          this.$apollo.queries.build.fetchMore({
+            variables: {
+              after: data.build.measurements.pageInfo.endCursor,
+            },
+          });
+        }
+      },
+    },
+  },
+
+  data() {
+    return {
+      changedFilters: JSON.parse(JSON.stringify(this.initialFilters)),
+    };
+  },
+
+  computed: {
+    executeQueryLink() {
+      return `${window.location.origin}${window.location.pathname}?filters=${encodeURIComponent(JSON.stringify(this.changedFilters))}`;
+    },
+
+    columns() {
+      const uniqueMeasurements = [...new Set(this.build.measurements.edges.map(edge => {
+        return edge.node.name;
+      }))];
+
+      const columns = [
+        {
+          name: 'source',
+          displayName: 'Source',
+          expand: true,
+        },
+        {
+          name: 'type',
+          displayName: 'Type',
+        },
+      ];
+
+      uniqueMeasurements.forEach(element => {
+        columns.push({
+          name: `measurement_${element}`,
+          displayName: element,
+        });
+      });
+
+      return columns;
+    },
+
+    formattedMeasurementRows() {
+      // A mapping of the form: source_type => {row object}
+      const source_type_pairs = {};
+
+      this.build.measurements.edges.forEach(edge => {
+        const key = `${edge.node.source}_${edge.node.type}`;
+        if (!source_type_pairs.hasOwnProperty(key)) {
+          source_type_pairs[key] = {
+            source: edge.node.source,
+            type: edge.node.type,
+          };
+        }
+
+        source_type_pairs[key][`measurement_${edge.node.name}`] = {
+          value: isNaN(edge.node.value) ? edge.node.value : Number(edge.node.value),
+          text: edge.node.value,
+        };
+      });
+
+      return Object.values(source_type_pairs);
+    },
+  },
+};
+</script>
diff --git a/resources/views/build/measurements.blade.php b/resources/views/build/measurements.blade.php
new file mode 100644
index 0000000000..26fa0c9d71
--- /dev/null
+++ b/resources/views/build/measurements.blade.php
@@ -0,0 +1,8 @@
+@extends('cdash', [
+    'vue' => true,
+    'daisyui' => true,
+])
+
+@section('main_content')
+    <build-measurements-page :build-id="{{ $build->Id }}" :initial-filters="@js($filters)"></build-measurements-page>
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 54338a13fa..05d0a17362 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -79,6 +79,8 @@
 
 Route::get('/builds/{build_id}/tests', 'BuildController@tests');
 
+Route::get('/builds/{build_id}/measurements', 'BuildController@measurements');
+
 Route::get('/builds/{id}/update', 'BuildController@update');
 Route::permanentRedirect('/build/{id}/update', url('/builds/{id}/update'));
 Route::get('/viewUpdate.php', function (Request $request) {
diff --git a/tests/cypress/e2e/CMakeLists.txt b/tests/cypress/e2e/CMakeLists.txt
index be818423fd..3a23c765d3 100644
--- a/tests/cypress/e2e/CMakeLists.txt
+++ b/tests/cypress/e2e/CMakeLists.txt
@@ -72,3 +72,6 @@ set_tests_properties(cypress/e2e/build-configure PROPERTIES DEPENDS cypress/e2e/
 
 add_cypress_e2e_test(all-projects)
 set_tests_properties(cypress/e2e/all-projects PROPERTIES DEPENDS cypress/e2e/build-configure)
+
+add_cypress_e2e_test(build-measurements)
+set_tests_properties(cypress/e2e/all-projects PROPERTIES DEPENDS cypress/e2e/all-project)
diff --git a/tests/cypress/e2e/build-measurements.cy.js b/tests/cypress/e2e/build-measurements.cy.js
new file mode 100644
index 0000000000..311055f200
--- /dev/null
+++ b/tests/cypress/e2e/build-measurements.cy.js
@@ -0,0 +1,15 @@
+/**
+ * TODO: Fill out this test once seed data for the build measurements functionality becomes available.
+ *       For now, we just verify that the page loads with no errors.
+ */
+describe('Build measurements page', () => {
+  it('Loads page successfully', () => {
+    cy.visit('/builds/372/measurements');
+    cy.get('#headername2').should('not.contain', '404 Not Found');
+  });
+
+  it('Shows 404 if build does not exist', () => {
+    cy.visit('/builds/12345678/measurements');
+    cy.get('#headername2').should('contain', '404 Not Found');
+  });
+});