diff --git a/.vscode/settings.json b/.vscode/settings.json
index c70f36a0b..2b4386002 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,5 +13,8 @@
         "./lumigator/schemas",
         "./lumigator/jobs",
         "./lumigator/sdk"
+    ],
+    "cSpell.words": [
+        "LUMIGATOR"
     ]
 }
diff --git a/lumigator/frontend/eslint.config.ts b/lumigator/frontend/eslint.config.ts
index f0f5bdb1f..3a11c8b87 100644
--- a/lumigator/frontend/eslint.config.ts
+++ b/lumigator/frontend/eslint.config.ts
@@ -17,7 +17,13 @@ export default defineConfigWithVueTs(
 
   {
     name: 'app/files-to-ignore',
-    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+    ignores: [
+      '**/dist/**',
+      '**/dist-ssr/**',
+      '**/coverage/**',
+      '**/playwright-report/**',
+      '**/test-results/**',
+    ],
   },
 
   pluginVue.configs['flat/essential'],
diff --git a/lumigator/frontend/package-lock.json b/lumigator/frontend/package-lock.json
index 0cc611038..10b0303be 100644
--- a/lumigator/frontend/package-lock.json
+++ b/lumigator/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@primevue/themes": "^4.2.5",
+        "@sentry/vue": "^9.5.0",
         "axios": "^1.7.9",
         "papaparse": "^5.5.2",
         "pinia": "^3.0.1",
@@ -2168,6 +2169,103 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.5.0.tgz",
+      "integrity": "sha512-AE9jgeI5+KyGvLR0vf1I6sesi0NZXZe6pDlZNXyg+pWZB2vkE9dksE8ZsoU+YiD9zjUqazgPcVyb3O0VvmaCGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "9.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.5.0.tgz",
+      "integrity": "sha512-p+yOTufEYHP1RLwkD+aZwpCNS4/2l6t4uHgphjYrEC2U/U2mtZQh+EvlBAt0wY/eiKC4/acPNrF5yFD/4A7a0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "9.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.5.0.tgz",
+      "integrity": "sha512-fBBNimElAnu865HT3MJ6xH2P26KvkZvAYt+yRrWr+x5zS5KvjBYUPsSI+F0FTE14XmLW9q7DlNUl5iAZhXSy3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "9.5.0",
+        "@sentry/core": "9.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.5.0.tgz",
+      "integrity": "sha512-W7MS7/9Z8uP2i0pbndxqz2VcGlFPc7Bv6gCoxRdGIWUWSBS9rsRbryO0sM0PwwuHt2mQtWMqwjYykcR441RBRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "9.5.0",
+        "@sentry/core": "9.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.5.0.tgz",
+      "integrity": "sha512-HYSPW8GjknuYykJgOialKFyWg7ldmrbD1AKTIhksqdsNXLER07YeVWFAbe+xSYa1ZwwC8/s6vQJP9ZOoH1BaVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "9.5.0",
+        "@sentry-internal/feedback": "9.5.0",
+        "@sentry-internal/replay": "9.5.0",
+        "@sentry-internal/replay-canvas": "9.5.0",
+        "@sentry/core": "9.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.5.0.tgz",
+      "integrity": "sha512-NMqyFdyg26ECAfnibAPKT8vvAt4zXp4R7dYtQnwJKhEJEVkgAshcNYeJ2D95ZLMVOqlqhTtTPnw1vqf+v9ePZg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/vue": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-9.5.0.tgz",
+      "integrity": "sha512-AoGyvK//urE1bh+1nA7vQPaUaaralHBJxYaojc4SbshYbP/HdAW/ml5e42L47kQRwLN/ONcbaZFjA1U6fc7Z5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser": "9.5.0",
+        "@sentry/core": "9.5.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "pinia": "2.x || 3.x",
+        "vue": "2.x || 3.x"
+      },
+      "peerDependenciesMeta": {
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
diff --git a/lumigator/frontend/package.json b/lumigator/frontend/package.json
index 61fa54a26..8361348f2 100644
--- a/lumigator/frontend/package.json
+++ b/lumigator/frontend/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.2.5",
+    "@sentry/vue": "^9.5.0",
     "axios": "^1.7.9",
     "papaparse": "^5.5.2",
     "pinia": "^3.0.1",
diff --git a/lumigator/frontend/src/App.vue b/lumigator/frontend/src/App.vue
index 3a519ffbf..f80d483ff 100644
--- a/lumigator/frontend/src/App.vue
+++ b/lumigator/frontend/src/App.vue
@@ -23,12 +23,12 @@
           <ul>
             <li>
               <a href="https://github.com/mozilla-ai/lumigator" target="_blank"
-                >GitHub <span class="pi pi-arrow-up-right" />
+                >GitHub <span class="pi pi-arrow-up-right"></span>
               </a>
             </li>
             <li>
               <a href="https://mozilla-ai.github.io/lumigator/" target="_blank"
-                >Documentation <span class="pi pi-arrow-up-right" />
+                >Documentation <span class="pi pi-arrow-up-right"></span>
               </a>
             </li>
           </ul>
@@ -55,6 +55,11 @@
       </div>
       <div class="sliding-panel" :class="{ open: showSlidingPanel }"></div>
     </div>
+    <ConsentBanner
+      v-if="!hasResponded && isProdBuild"
+      @accept="acceptConsent"
+      @reject="rejectConsent"
+    ></ConsentBanner>
   </div>
 </template>
 
@@ -67,9 +72,13 @@ import { useSlidePanel } from '@/composables/useSlidePanel'
 import ConfirmDialog from 'primevue/confirmdialog'
 import Toast from 'primevue/toast'
 import Button from 'primevue/button'
+import ConsentBanner from './components/common/ConsentBanner.vue'
+import { useSentryConsent } from './composables/useSentryConsent'
 
 const datasetsStore = useDatasetStore()
 const experimentsStore = useExperimentStore()
+const { hasResponded, acceptConsent, rejectConsent } = useSentryConsent()
+const isProdBuild = import.meta.env.PROD
 
 const tooltipConfig = ref({
   value: `Lumigator is connected to external GPUs.`,
diff --git a/lumigator/frontend/src/components/common/ConsentBanner.vue b/lumigator/frontend/src/components/common/ConsentBanner.vue
new file mode 100644
index 000000000..285bf180d
--- /dev/null
+++ b/lumigator/frontend/src/components/common/ConsentBanner.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="consent-banner">
+    <div class="container">
+      <PrimeVueButton
+        class="close-button"
+        icon="pi pi-times"
+        severity="secondary"
+        variant="text"
+        raised
+        rounded
+        aria-label="Cancel"
+        @click="declineConsent"
+      ></PrimeVueButton>
+      <div class="content-wrapper">
+        <h4 class="header">Data Usage</h4>
+        <p class="text">
+          To help improve Lumigator, you can choose to share completely anonymized usage data. We do
+          not profile you or track your location or web activity. Do you allow us to collect this
+          data? You can always change your choice in Settings.
+        </p>
+        <div class="actions">
+          <PrimeVueButton size="small" severity="secondary" @click="declineConsent" rounded
+            >No</PrimeVueButton
+          >
+          <PrimeVueButton size="small" @click="acceptConsent" rounded>Yes</PrimeVueButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Button } from 'primevue'
+
+export default {
+  name: 'ConsentBanner',
+  emits: ['accept', 'reject'],
+  components: {
+    PrimeVueButton: Button,
+  },
+  setup(_props, { emit }) {
+    function acceptConsent() {
+      emit('accept')
+    }
+
+    function declineConsent() {
+      emit('reject')
+    }
+
+    return {
+      acceptConsent,
+      declineConsent,
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables';
+@use '@/styles/mixins';
+
+.consent-banner {
+  position: fixed;
+  bottom: 0;
+  color: variables.$l-grey-100;
+  text-align: center;
+
+  display: flex;
+  width: 100%;
+  padding: 0.5rem;
+  justify-content: center;
+  align-items: center;
+
+  border-top: 0.5px solid variables.$border-stroke;
+  background: variables.$black;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 31.75rem;
+  padding: 0.5rem 0rem;
+  align-items: center;
+}
+
+.header {
+  @include mixins.paragraph-2;
+  color: variables.$white;
+}
+
+.text {
+  color: variables.$l-grey-100;
+
+  @include mixins.paragraph;
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.close-button {
+  position: absolute;
+  margin-right: 2rem;
+  top: 0;
+  right: 0;
+}
+</style>
diff --git a/lumigator/frontend/src/components/common/TableView.vue b/lumigator/frontend/src/components/common/TableView.vue
index 55ba04c4b..71f1ebbec 100644
--- a/lumigator/frontend/src/components/common/TableView.vue
+++ b/lumigator/frontend/src/components/common/TableView.vue
@@ -91,7 +91,6 @@
 </template>
 <script lang="ts">
 import {
-  // Button,
   Column,
   DataTable,
   IconField,
@@ -110,7 +109,6 @@ export default defineComponent({
   components: {
     DataTable,
     Column,
-    // PrimeVueButton: Button,
     PrimeVueTextarea: Textarea,
     IconField,
     InputIcon,
@@ -209,7 +207,6 @@ export default defineComponent({
       onCellEditComplete,
       onCellEditCancel,
       filters,
-      // allColumns,
       selectedColumns,
       onToggle,
       expandedRows,
diff --git a/lumigator/frontend/src/components/datasets/LDatasetDetails.vue b/lumigator/frontend/src/components/datasets/LDatasetDetails.vue
index ccda68135..43cebb24a 100644
--- a/lumigator/frontend/src/components/datasets/LDatasetDetails.vue
+++ b/lumigator/frontend/src/components/datasets/LDatasetDetails.vue
@@ -171,7 +171,6 @@ async function handleGenerateGroundTruth() {
 <style lang="scss" scoped>
 @use '@/styles/variables' as *;
 .l-dataset-details {
-  $root: &;
   display: flex;
   flex-direction: column;
 
diff --git a/lumigator/frontend/src/components/datasets/LDatasetEmpty.vue b/lumigator/frontend/src/components/datasets/LDatasetEmpty.vue
index f7823e39b..aab59d446 100644
--- a/lumigator/frontend/src/components/datasets/LDatasetEmpty.vue
+++ b/lumigator/frontend/src/components/datasets/LDatasetEmpty.vue
@@ -38,8 +38,8 @@
         href="https://mozilla-ai.github.io/lumigator/get-started/quickstart.html#upload-a-dataset"
         target="_blank"
         style="background-color: transparent"
-        >Learn more <span class="pi pi-arrow-up-right"
-      /></a>
+        >Learn more <span class="pi pi-arrow-up-right"></span
+      ></a>
     </p>
   </div>
 </template>
@@ -53,7 +53,6 @@ const emit = defineEmits(['l-add-dataset'])
 @use '@/styles/variables' as *;
 
 .l-dataset-empty {
-  $root: &;
   max-width: 600px;
   margin: auto;
 
diff --git a/lumigator/frontend/src/components/datasets/LDatasetTable.vue b/lumigator/frontend/src/components/datasets/LDatasetTable.vue
index 07aec7752..45c0a6bb3 100644
--- a/lumigator/frontend/src/components/datasets/LDatasetTable.vue
+++ b/lumigator/frontend/src/components/datasets/LDatasetTable.vue
@@ -173,7 +173,6 @@ defineExpose({ loading })
 @use '@/styles/variables' as *;
 
 .l-dataset-table {
-  $root: &;
   width: 100%;
   display: flex;
   place-content: center;
diff --git a/lumigator/frontend/src/components/datasets/LInferenceJobsTable.vue b/lumigator/frontend/src/components/datasets/LInferenceJobsTable.vue
index 7f43aa3cc..6e9a51ff6 100644
--- a/lumigator/frontend/src/components/datasets/LInferenceJobsTable.vue
+++ b/lumigator/frontend/src/components/datasets/LInferenceJobsTable.vue
@@ -149,7 +149,6 @@ onBeforeUnmount(() => {
 <style scoped lang="scss">
 @use '@/styles/variables' as *;
 .l-job-table {
-  $root: &;
   width: 100%;
   display: flex;
   place-content: center;
diff --git a/lumigator/frontend/src/components/datasets/LJobDetails.vue b/lumigator/frontend/src/components/datasets/LJobDetails.vue
index 09226ede4..1871bac08 100644
--- a/lumigator/frontend/src/components/datasets/LJobDetails.vue
+++ b/lumigator/frontend/src/components/datasets/LJobDetails.vue
@@ -188,26 +188,6 @@ const tagSeverity = computed(() => {
   }
 })
 
-// const focusedItemRunTime = computed(() => {
-//   if (isJobFocused.value) {
-//     return selectedJob.value.runTime ? selectedJob.value.runTime : '-'
-//   }
-
-//   if (
-//     currentItemStatus.value !== WorkflowStatus.RUNNING &&
-//     currentItemStatus.value !== WorkflowStatus.PENDING
-//   ) {
-//     const endTimes = selectedJob.value.workflows.map((workflow) => workflow.end_time) || []
-//     const lastEndTime = endTimes.reduce((latest, current) => {
-//       return new Date(latest) > new Date(current) ? latest : current
-//     })
-//     if (lastEndTime && selectedJob) {
-//       return calculateDuration(selectedJob.value.created_at, lastEndTime)
-//     }
-//   }
-//   return '-'
-// })
-
 const showResults = () => {
   if (isJobFocused.value) {
     emit('l-job-results', selectedJob)
@@ -220,7 +200,6 @@ const showResults = () => {
 <style lang="scss">
 @use '@/styles/variables' as *;
 .l-experiment-details {
-  $root: &;
   display: flex;
   flex-direction: column;
 
diff --git a/lumigator/frontend/src/components/experiments/LExperimentDetails.vue b/lumigator/frontend/src/components/experiments/LExperimentDetails.vue
index 63b9ad33b..650c66dc4 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentDetails.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentDetails.vue
@@ -307,7 +307,6 @@ function isExperiment(item: Experiment | Workflow): item is Experiment {
 <style lang="scss">
 @use '@/styles/variables' as *;
 .l-experiment-details {
-  $root: &;
   display: flex;
   flex-direction: column;
 
diff --git a/lumigator/frontend/src/components/experiments/LExperimentForm.vue b/lumigator/frontend/src/components/experiments/LExperimentForm.vue
index 65c79cfc6..abf22aa2d 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentForm.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentForm.vue
@@ -319,7 +319,6 @@ onMounted(async () => {
 }
 
 .l-experiment-form {
-  $root: &;
   display: flex;
   flex-direction: column;
 
diff --git a/lumigator/frontend/src/components/experiments/LExperimentLogs.vue b/lumigator/frontend/src/components/experiments/LExperimentLogs.vue
index e28ef7121..6718501ed 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentLogs.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentLogs.vue
@@ -46,7 +46,6 @@ watch(logsLength, scrollToBottom)
 @use '@/styles/variables' as *;
 
 .l-experiment-logs {
-  $root: &;
   border-radius: $l-main-radius;
   height: 100%;
 
diff --git a/lumigator/frontend/src/components/experiments/LExperimentTable.vue b/lumigator/frontend/src/components/experiments/LExperimentTable.vue
index 3f93b32d3..5a406e1f5 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentTable.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentTable.vue
@@ -310,7 +310,6 @@ watch(
 @use '@/styles/variables' as *;
 
 .l-experiment-table {
-  $root: &;
   width: 100%;
   display: flex;
   place-content: center;
diff --git a/lumigator/frontend/src/components/experiments/LExperimentTabs.vue b/lumigator/frontend/src/components/experiments/LExperimentTabs.vue
index 61aa3b4b7..4a896189f 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentTabs.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentTabs.vue
@@ -37,8 +37,6 @@ const emit = defineEmits(['l-close-details'])
 
 <style scoped lang="scss">
 .l-experiment-tabs {
-  $root: &;
-
   &__list {
     position: sticky;
     top: 0;
diff --git a/lumigator/frontend/src/components/experiments/LExperimentsDrawer.vue b/lumigator/frontend/src/components/experiments/LExperimentsDrawer.vue
index 19548508b..be3aa4975 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentsDrawer.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentsDrawer.vue
@@ -45,8 +45,6 @@ after the LResultsDrawer is mounted -->
 <style lang="scss">
 @use '@/styles/variables' as *;
 .l-experiments-drawer {
-  $root: &;
-
   .p-drawer-title {
     color: $l-grey-100;
     font-size: $l-font-size-md;
diff --git a/lumigator/frontend/src/components/experiments/LExperimentsEmpty.vue b/lumigator/frontend/src/components/experiments/LExperimentsEmpty.vue
index a6ff45c9c..7e0066241 100644
--- a/lumigator/frontend/src/components/experiments/LExperimentsEmpty.vue
+++ b/lumigator/frontend/src/components/experiments/LExperimentsEmpty.vue
@@ -38,7 +38,6 @@ const emit = defineEmits(['l-add-experiment'])
 @use '@/styles/variables' as *;
 
 .l-experiment-empty {
-  $root: &;
   margin: auto;
   max-width: 560px;
 
diff --git a/lumigator/frontend/src/components/experiments/LJobsTable.vue b/lumigator/frontend/src/components/experiments/LJobsTable.vue
index 43279a1e2..ac7c41e92 100644
--- a/lumigator/frontend/src/components/experiments/LJobsTable.vue
+++ b/lumigator/frontend/src/components/experiments/LJobsTable.vue
@@ -70,16 +70,13 @@
 import DataTable, { type DataTableRowClickEvent } from 'primevue/datatable'
 import Tag from 'primevue/tag'
 import Column from 'primevue/column'
-// import { storeToRefs } from 'pinia'
-// import { useExperimentStore } from '@/stores/experimentsStore'
+
 import { formatDate } from '@/helpers/formatDate'
 import { WorkflowStatus, type Workflow } from '@/types/Workflow'
 import { ref, type PropType } from 'vue'
 import type { MenuItem } from 'primevue/menuitem'
 import { Menu } from 'primevue'
-// import type { Job } from '@/types/Job'
-// const experimentStore = useExperimentStore()
-// const { jobs } = storeToRefs(experimentStore)
+
 defineProps({
   tableData: {
     type: Array as PropType<Workflow[]>,
@@ -151,11 +148,9 @@ function handleRowClick(event: DataTableRowClickEvent) {
 @use '@/styles/variables' as *;
 
 .options-trigger {
-  // padding-left: -$l-spacing-1;
 }
 
 .l-job-table {
-  $root: &;
   width: 100%;
   display: flex;
   place-content: center;
diff --git a/lumigator/frontend/src/components/layout/LPageHeader.vue b/lumigator/frontend/src/components/layout/LPageHeader.vue
index 6bd343639..56e672572 100644
--- a/lumigator/frontend/src/components/layout/LPageHeader.vue
+++ b/lumigator/frontend/src/components/layout/LPageHeader.vue
@@ -58,7 +58,6 @@ const handleAction = () => {
 @use '@/styles/variables' as *;
 
 .l-page-header {
-  $root: &;
   display: flex;
   width: 100%;
   justify-content: space-between;
diff --git a/lumigator/frontend/src/components/views/LDatasets.vue b/lumigator/frontend/src/components/views/LDatasets.vue
index 616d4cd5b..0367d5990 100644
--- a/lumigator/frontend/src/components/views/LDatasets.vue
+++ b/lumigator/frontend/src/components/views/LDatasets.vue
@@ -363,7 +363,6 @@ const onGenerateGT = () => {
 @use '@/styles/variables' as *;
 
 .l-datasets {
-  $root: &;
   max-width: $l-main-width;
   width: 100%;
   margin: 0 auto;
@@ -393,8 +392,6 @@ const onGenerateGT = () => {
 @use '@/styles/mixins';
 
 .l-datasets .p-tabs {
-  $root: &;
-
   & .p-tablist {
     margin-bottom: $l-spacing-1;
   }
diff --git a/lumigator/frontend/src/components/views/LExperiments.vue b/lumigator/frontend/src/components/views/LExperiments.vue
index 5488fbc5a..e870c4b53 100644
--- a/lumigator/frontend/src/components/views/LExperiments.vue
+++ b/lumigator/frontend/src/components/views/LExperiments.vue
@@ -272,11 +272,6 @@ function stopPollingForWorkflowLogs() {
   }
 }
 
-// function getJobRuntime(jobId: string) {
-//   const job = jobs.value.find((job) => job.id === jobId)
-//   return job ? job.runTime : undefined
-// }
-
 watch(
   selectedExperiment,
   (newValue) => {
@@ -341,7 +336,6 @@ watch(showSlidingPanel, (newValue) => {
 @use '@/styles/variables' as *;
 
 .l-experiments {
-  $root: &;
   max-width: $l-main-width;
   margin: 0 auto;
 
diff --git a/lumigator/frontend/src/components/views/SettingsPage.vue b/lumigator/frontend/src/components/views/SettingsPage.vue
index 1b6032aee..3416b92d2 100644
--- a/lumigator/frontend/src/components/views/SettingsPage.vue
+++ b/lumigator/frontend/src/components/views/SettingsPage.vue
@@ -1,12 +1,30 @@
 <template>
   <div class="settings-container">
-    <div>
-      <h3 class="settings-title">Settings</h3>
+    <h3 class="settings-title">Settings</h3>
+    <div class="settings-group-container">
+      <div class="settings-group-header">
+        <h4 class="settings-group-title">Data usage</h4>
+        <p class="settings-group-description">
+          To help improve Lumigator, You can choose to share completely anonymized error reports via
+          Sentry. We do not profile you or track your location or web activity.
+
+          <!-- <a
+            href=""
+            class="learn-more-link"
+            rel="noopener"
+            target="_blank"
+            >Learn more<span class="pi pi-arrow-up-right"></span>
+          </a> -->
+          <ToggleSwitch v-model:model-value="hasConsented" @update:model-value="setConsent" />
+        </p>
+      </div>
     </div>
-    <div class="api-keys-container">
-      <div class="api-keys-header">
-        <h4 class="api-keys-title">API Keys</h4>
-        <p class="api-keys-description">
+    <Divider />
+
+    <div class="settings-group-container">
+      <div class="settings-group-header">
+        <h4 class="settings-group-title">API Keys</h4>
+        <p class="settings-group-description">
           To use API-based models in Lumigator, add your API keys.
           <a
             href="https://mozilla-ai.github.io/lumigator/operations-guide/configuration.html#api-settings"
@@ -70,19 +88,22 @@
 <script setup lang="ts">
 import { settingsService } from '@/sdk/settingsService'
 import type { SecretUploadPayload } from '@/types/Secret'
-import { InputText, type ToastMessageOptions } from 'primevue'
+import { Divider, InputText, ToggleSwitch, type ToastMessageOptions } from 'primevue'
 import Button from 'primevue/button'
 import { onMounted, ref, type Ref } from 'vue'
 import { useConfirm } from 'primevue/useconfirm'
 import { useToast } from 'primevue/usetoast'
 import axios, { AxiosError } from 'axios'
 import { getAxiosError } from '@/helpers/getAxiosError'
+import { useSentryConsent } from '@/composables/useSentryConsent'
 
 const confirm = useConfirm()
 const toast = useToast()
 // Placeholder for configured secrets where the actual value is hidden.
 const maskedValue = '****************'
 
+const { hasConsented, setConsent } = useSentryConsent()
+
 // API key map is used to track API key names (based on the provider name) to their corresponding ref, title and whether the setting exists remotely.
 // NOTE: the key names are based on the provider name and should not be changed: ${provider}_api_key
 const apiKeyMap = new Map<
@@ -261,21 +282,23 @@ const handleBlur = (key: string) => {
   padding: 2.5rem 1.5rem;
 }
 
-.api-keys-container {
+.settings-group-container {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.api-keys-header {
+.settings-group-header {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.api-keys-description {
+.settings-group-description {
   @include mixins.caption;
   color: variables.$l-grey-100;
+  gap: 0.5rem;
+  display: flex;
 }
 .learn-more-link {
   font-weight: 700;
@@ -288,7 +311,7 @@ const handleBlur = (key: string) => {
   gap: 1.5rem;
 }
 
-.api-keys-title {
+.settings-group-title {
   @include mixins.paragraph-2;
   color: variables.$white;
 }
@@ -337,7 +360,6 @@ const handleBlur = (key: string) => {
   background: none;
   border: none;
   outline: none;
-  // color: #E0C414;
   color: red;
 }
 
diff --git a/lumigator/frontend/src/composables/useSentryConsent.ts b/lumigator/frontend/src/composables/useSentryConsent.ts
new file mode 100644
index 000000000..4c93a3186
--- /dev/null
+++ b/lumigator/frontend/src/composables/useSentryConsent.ts
@@ -0,0 +1,32 @@
+import { ref } from 'vue'
+
+export const SENTRY_CONSENT_LOCAL_STORAGE_KEY = 'sentry-consent'
+
+export function useSentryConsent() {
+  const hasResponded = ref(window.localStorage.getItem(SENTRY_CONSENT_LOCAL_STORAGE_KEY) !== null)
+  const hasConsented = ref(window.localStorage.getItem(SENTRY_CONSENT_LOCAL_STORAGE_KEY) === 'true')
+
+  const acceptConsent = () => {
+    window.localStorage.setItem(SENTRY_CONSENT_LOCAL_STORAGE_KEY, 'true')
+    hasResponded.value = true
+    hasConsented.value = true
+    window.location.reload()
+  }
+
+  const rejectConsent = () => {
+    window.localStorage.setItem(SENTRY_CONSENT_LOCAL_STORAGE_KEY, 'false')
+    hasResponded.value = true
+    hasConsented.value = false
+    window.location.reload()
+  }
+
+  const setConsent = (consent: boolean) => {
+    if (consent) {
+      acceptConsent()
+    } else {
+      rejectConsent()
+    }
+  }
+
+  return { hasResponded, hasConsented, setConsent, acceptConsent, rejectConsent }
+}
diff --git a/lumigator/frontend/src/helpers/setupSentry.ts b/lumigator/frontend/src/helpers/setupSentry.ts
new file mode 100644
index 000000000..d3313603e
--- /dev/null
+++ b/lumigator/frontend/src/helpers/setupSentry.ts
@@ -0,0 +1,44 @@
+import { SENTRY_CONSENT_LOCAL_STORAGE_KEY } from '@/composables/useSentryConsent'
+import { browserTracingIntegration, init, replayIntegration } from '@sentry/vue'
+import type { App } from 'vue'
+import type { Router } from 'vue-router'
+
+export function setupSentry(app: App<Element>, router: Router) {
+  const hasGivenConsent = window.localStorage.getItem(SENTRY_CONSENT_LOCAL_STORAGE_KEY) === 'true'
+  const isProdBuild = import.meta.env.PROD
+
+  if (hasGivenConsent && isProdBuild) {
+    return init({
+      app,
+      sendDefaultPii: false, // Ensures Sentry doesn't auto-collect user PII
+      dsn: import.meta.env.VITE_APP_LUMIGATOR_SENTRY_DSN,
+      integrations: [browserTracingIntegration({ router }), replayIntegration()],
+      beforeBreadcrumb(breadcrumb) {
+        if (
+          breadcrumb.message?.includes('/secrets') ||
+          breadcrumb.data?.url?.includes('/secrets')
+        ) {
+          return { ...breadcrumb, message: '[REDACTED]' }
+        }
+        return breadcrumb
+      },
+      beforeSend(event) {
+        if (event.request) {
+          // Redact sensitive request details
+          if (event.request.url?.includes('settings/secrets')) {
+            event.request.data = '[REDACTED]'
+            event.request.query_string = '[REDACTED]'
+          }
+
+          // Remove sensitive headers (We don't really have auth or api keys in our app, but this is here for future-proofing)
+          if (event.request.headers) {
+            delete event.request.headers['Authorization']
+            delete event.request.headers['X-API-Key']
+          }
+        }
+
+        return event // Return null if you want to drop the event
+      },
+    })
+  }
+}
diff --git a/lumigator/frontend/src/main.ts b/lumigator/frontend/src/main.ts
index da14202f7..10d08e8d7 100644
--- a/lumigator/frontend/src/main.ts
+++ b/lumigator/frontend/src/main.ts
@@ -8,7 +8,7 @@ import PrimeVue from 'primevue/config'
 import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import { LumiPreset } from './primevue.config'
-
+import { setupSentry } from './helpers/setupSentry'
 const app = createApp(App)
 
 app
@@ -28,4 +28,6 @@ app
   .use(ToastService)
   .directive('tooltip', Tooltip)
 
+setupSentry(app, router)
+
 app.mount('#app')
diff --git a/lumigator/frontend/src/sdk/settingsService.ts b/lumigator/frontend/src/sdk/settingsService.ts
index e1e3a9411..0add0ff6f 100644
--- a/lumigator/frontend/src/sdk/settingsService.ts
+++ b/lumigator/frontend/src/sdk/settingsService.ts
@@ -1,9 +1,7 @@
 import { lumigatorApiAxiosInstance } from '@/helpers/lumigatorAxiosInstance'
 import type { Secret, SecretUploadPayload } from '@/types/Secret'
 
-const PATH_SETTINGS_ROOT = 'settings'
-const PATH_SECRETS_ROOT = `${PATH_SETTINGS_ROOT}/secrets`
-const PATH_SECRET = (secretName: string) => `${PATH_SECRETS_ROOT}/${secretName}`
+const PATH_SECRET = (secretName: string) => `/settings/secrets/${secretName}`
 
 /**
  * Deletes a secret by name.
@@ -18,7 +16,7 @@ export function deleteSecret(secretName: string): Promise<void> {
  * @returns The list of secrets (without their values).
  */
 export async function fetchSecrets(): Promise<Secret[]> {
-  const response = await lumigatorApiAxiosInstance.get(PATH_SECRETS_ROOT)
+  const response = await lumigatorApiAxiosInstance.get('/settings/secrets')
 
   return response.data
 }
diff --git a/lumigator/frontend/src/styles/_mixins.scss b/lumigator/frontend/src/styles/_mixins.scss
index d26056a22..dd2cec7ac 100644
--- a/lumigator/frontend/src/styles/_mixins.scss
+++ b/lumigator/frontend/src/styles/_mixins.scss
@@ -3,7 +3,7 @@
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.3125rem; /* 150% */
+  line-height: 1.1875rem; /* 135.714% */
   letter-spacing: -0.00875rem;
 }