diff --git a/magefiles/targets/generate_proto.go b/magefiles/targets/generate_proto.go
index ef31acae3c..042de9caa1 100644
--- a/magefiles/targets/generate_proto.go
+++ b/magefiles/targets/generate_proto.go
@@ -110,7 +110,7 @@ func (Generate) ProtobufTypescript() error {
 			},
 		}),
 		external.NewGenerator([]string{"./web/service-generator/generate"}, external.GeneratorOptions{
-			Opt: "target=ts",
+			Opt: "target=ts,import_extension=none",
 		}),
 	}, targets...)
 	if err != nil {
diff --git a/web/package.json b/web/package.json
index 82249bf6a0..174f0c2a69 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,6 +12,7 @@
     "chartjs-plugin-annotation": "^2.0.1",
     "core-js": "3.21.1",
     "css-loader": "4.3.0",
+    "dayjs": "^1.8.16",
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
     "js-yaml": "4.1.0",
@@ -19,8 +20,7 @@
     "marked": "^4.3.0",
     "unique-names-generator": "^4.7.1",
     "vue-chartjs": "^4.1.1",
-    "vue-fragment": "^1.6.0",
-    "dayjs": "^1.8.16"
+    "vue-fragment": "^1.6.0"
   },
   "resolutions": {
     "**/webpack": "4",
@@ -37,5 +37,8 @@
     "docker": "docker build -t opni-ui -f ./Dockerfile .",
     "build": "IS_STANDALONE=true ./node_modules/.bin/vue-cli-service build",
     "start": "node prod.js"
+  },
+  "devDependencies": {
+    "@bufbuild/protobuf": "1.2.1"
   }
-}
\ No newline at end of file
+}
diff --git a/web/pkg/opni/api/opni.ts b/web/pkg/opni/api/opni.ts
new file mode 100644
index 0000000000..950b1a8cb0
--- /dev/null
+++ b/web/pkg/opni/api/opni.ts
@@ -0,0 +1,13 @@
+import * as CortexOpsService from '@pkg/opni/generated/github.com/rancher/opni/plugins/metrics/apis/cortexops/cortexops_svc';
+import * as CortexOpsTypes from '@pkg/opni/generated/github.com/rancher/opni/plugins/metrics/apis/cortexops/cortexops_pb';
+import * as StorageTypes from '@pkg/opni/generated/github.com/rancher/opni/internal/cortex/config/storage/storage_pb';
+import * as DryRunTypes from '@pkg/opni/generated/github.com/rancher/opni/pkg/plugins/driverutil/dryrun_pb';
+
+export const CortexOps = {
+  service: CortexOpsService,
+  types:   CortexOpsTypes,
+};
+
+export const DryRun = { types: DryRunTypes };
+
+export const Storage = { types: StorageTypes };
diff --git a/web/pkg/opni/components/Alarm/AgentDisconnect.vue b/web/pkg/opni/components/Alarm/AgentDisconnect.vue
index e8a0f1c11a..6b9f0c8d8e 100644
--- a/web/pkg/opni/components/Alarm/AgentDisconnect.vue
+++ b/web/pkg/opni/components/Alarm/AgentDisconnect.vue
@@ -2,6 +2,7 @@
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -65,15 +66,7 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.value.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.value, 'timeout', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('value.timeout'),
   },
 };
 </script>
diff --git a/web/pkg/opni/components/Alarm/CPU.vue b/web/pkg/opni/components/Alarm/CPU.vue
index 4ca059ab38..cf57ef60d5 100644
--- a/web/pkg/opni/components/Alarm/CPU.vue
+++ b/web/pkg/opni/components/Alarm/CPU.vue
@@ -10,6 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { Banner } from '@components/Banner';
 import dayjs from 'dayjs';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType, Severity, SeverityResponseToEnum } from '../models/alerting/Condition';
 import {
   createAlertCondition, getAlertConditionChoices, getAlertCondition, updateAlertCondition, deactivateSilenceAlertCondition, silenceAlertCondition
@@ -357,25 +358,9 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.system.config.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.system.config, 'timeout', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('system.config.timeout'),
 
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.kubeState.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.kubeState.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    kubeStateFor: createComputedTime('kubeState.config.for'),
 
     silenceUntil() {
       if (!this.config?.silence?.endsAt) {
@@ -393,15 +378,9 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.downstreamCapability.config.for || '0');
-      },
 
-      set(value) {
-        this.$set(this.downstreamCapability.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    downstreamCapabilityFor: createComputedTime('downstreamCapability.config.for'),
+
     downstreamCapabilityStateOptions() {
       const options = this.downstreamCapability.choices.clusters[this.downstreamCapability.config.clusterId]?.states || [];
 
@@ -421,15 +400,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.monitoringBackend.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.monitoringBackend.config, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('monitoringBackend.config.for'),
   },
 
   watch: {
diff --git a/web/pkg/opni/components/Alarm/DownstreamCapability.vue b/web/pkg/opni/components/Alarm/DownstreamCapability.vue
index 04d570ea3b..c70b07c9a5 100644
--- a/web/pkg/opni/components/Alarm/DownstreamCapability.vue
+++ b/web/pkg/opni/components/Alarm/DownstreamCapability.vue
@@ -3,6 +3,7 @@ import ArrayListSelect from '@shell/components/form/ArrayListSelect';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -71,15 +72,9 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.value.for || '0');
-      },
 
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) }s`);
-      }
-    },
+    downstreamCapabilityFor: createComputedTime('value.for'),
+
     downstreamCapabilityStateOptions() {
       if (!this.value.clusterId) {
         return [];
diff --git a/web/pkg/opni/components/Alarm/Filesystem.vue b/web/pkg/opni/components/Alarm/Filesystem.vue
index aff08def46..e53f12dd9f 100644
--- a/web/pkg/opni/components/Alarm/Filesystem.vue
+++ b/web/pkg/opni/components/Alarm/Filesystem.vue
@@ -10,6 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { Banner } from '@components/Banner';
 import dayjs from 'dayjs';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { exceptionToErrorsArray } from '../utils/error';
 import { AlertType, Severity, SeverityResponseToEnum } from '../models/alerting/Condition';
 import {
@@ -357,25 +358,9 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.system.config.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.system.config, 'timeout', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('system.config.timeout'),
 
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.kubeState.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.kubeState.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    kubeStateFor: createComputedTime('kubeState.config.for'),
 
     silenceUntil() {
       if (!this.config?.silence?.endsAt) {
@@ -393,15 +378,9 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.downstreamCapability.config.for || '0');
-      },
 
-      set(value) {
-        this.$set(this.downstreamCapability.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    downstreamCapabilityFor: createComputedTime('downstreamCapability.config.for'),
+
     downstreamCapabilityStateOptions() {
       const options = this.downstreamCapability.choices.clusters[this.downstreamCapability.config.clusterId]?.states || [];
 
@@ -421,15 +400,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.monitoringBackend.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.monitoringBackend.config, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('monitoringBackend.config.for'),
   },
 
   watch: {
diff --git a/web/pkg/opni/components/Alarm/KubeState.vue b/web/pkg/opni/components/Alarm/KubeState.vue
index 1ac4506d01..a5f73df7e2 100644
--- a/web/pkg/opni/components/Alarm/KubeState.vue
+++ b/web/pkg/opni/components/Alarm/KubeState.vue
@@ -2,6 +2,7 @@
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -123,15 +124,7 @@ export default {
       return options;
     },
 
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.value.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) }s`);
-      }
-    },
+    kubeStateFor: createComputedTime('value.for'),
   },
 
   watch: {
diff --git a/web/pkg/opni/components/Alarm/Memory.vue b/web/pkg/opni/components/Alarm/Memory.vue
index aff08def46..83055383e3 100644
--- a/web/pkg/opni/components/Alarm/Memory.vue
+++ b/web/pkg/opni/components/Alarm/Memory.vue
@@ -10,6 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { Banner } from '@components/Banner';
 import dayjs from 'dayjs';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { exceptionToErrorsArray } from '../utils/error';
 import { AlertType, Severity, SeverityResponseToEnum } from '../models/alerting/Condition';
 import {
@@ -357,25 +358,7 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.system.config.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.system.config, 'timeout', `${ (value || 0) }s`);
-      }
-    },
-
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.kubeState.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.kubeState.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('system.config.timeout'),
 
     silenceUntil() {
       if (!this.config?.silence?.endsAt) {
@@ -393,15 +376,8 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.downstreamCapability.config.for || '0');
-      },
+    downstreamCapabilityFor: createComputedTime('downstreamCapability.config.for'),
 
-      set(value) {
-        this.$set(this.downstreamCapability.config, 'for', `${ (value || 0) }s`);
-      }
-    },
     downstreamCapabilityStateOptions() {
       const options = this.downstreamCapability.choices.clusters[this.downstreamCapability.config.clusterId]?.states || [];
 
@@ -421,15 +397,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.monitoringBackend.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.monitoringBackend.config, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('monitoringBackend.config.for')
   },
 
   watch: {
diff --git a/web/pkg/opni/components/Alarm/MonitoringBackend.vue b/web/pkg/opni/components/Alarm/MonitoringBackend.vue
index e49dcd6d62..4ce55cb460 100644
--- a/web/pkg/opni/components/Alarm/MonitoringBackend.vue
+++ b/web/pkg/opni/components/Alarm/MonitoringBackend.vue
@@ -2,6 +2,7 @@
 import ArrayListSelect from '@shell/components/form/ArrayListSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -66,15 +67,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.value.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('value.for'),
   },
 };
 </script>
diff --git a/web/pkg/opni/components/Alarm/Prometheus.vue b/web/pkg/opni/components/Alarm/Prometheus.vue
index 8e9abce049..d9c3ba30c3 100644
--- a/web/pkg/opni/components/Alarm/Prometheus.vue
+++ b/web/pkg/opni/components/Alarm/Prometheus.vue
@@ -3,6 +3,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -71,14 +72,7 @@ export default {
       return options;
     },
 
-    prometheusQueryFor: {
-      get() {
-        return Math.floor(Number.parseInt(this.value.for || '0') / 60);
-      },
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) * 60 }s`);
-      }
-    }
+    prometheusQueryFor: createComputedTime('value.for', 60),
   },
 };
 </script>
diff --git a/web/pkg/opni/components/AttachedEndpoints.vue b/web/pkg/opni/components/AttachedEndpoints.vue
index edfbbee172..649d14d8bd 100644
--- a/web/pkg/opni/components/AttachedEndpoints.vue
+++ b/web/pkg/opni/components/AttachedEndpoints.vue
@@ -6,6 +6,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow';
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { Severity } from '../models/alerting/Condition';
 import { getAlertEndpoints } from '../utils/requests/alerts';
 import ArrayListSelect from './RancherOverride/ArrayListSelect';
@@ -99,40 +100,16 @@ export default {
       },
 
       set(value) {
-        console.log('seeeti', value);
         this.$emit('input', { ...this.value, items: value.map(v => ({ endpointId: v })) });
       }
     },
 
-    initialDelay: {
-      get() {
-        return Number.parseInt(this.value.initialDelay || '0');
-      },
+    initialDelay: createComputedTime('value.initialDelay'),
 
-      set(value) {
-        this.$emit('input', { ...this.value, initialDelay: `${ (value || 0) }s` });
-      }
-    },
+    repeatInterval: createComputedTime('value.repeatInterval', 60),
 
-    repeatInterval: {
-      get() {
-        return Number.parseInt(this.value.repeatInterval || '0') / 60;
-      },
+    throttlingDuration: createComputedTime('value.throttlingDuration', 60),
 
-      set(value) {
-        this.$emit('input', { ...this.value, repeatInterval: `${ Math.round(value * 60 || 0) }s` });
-      }
-    },
-
-    throttlingDuration: {
-      get() {
-        return Number.parseInt(this.value.throttlingDuration || '0') / 60;
-      },
-
-      set(value) {
-        this.$emit('input', { ...this.value, throttlingDuration: `${ Math.round(value * 60 || 0) }s` });
-      }
-    },
     showMessageOptions() {
       return this.value.items.length > 0 && this.value.items.some(item => item?.endpointId);
     }
diff --git a/web/pkg/opni/components/Backend.vue b/web/pkg/opni/components/Backend.vue
index 7dc1b2981e..fa5ff00c22 100644
--- a/web/pkg/opni/components/Backend.vue
+++ b/web/pkg/opni/components/Backend.vue
@@ -2,6 +2,7 @@
 import Loading from '@shell/components/Loading';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
+import LoadingSpinner from '@pkg/opni/components/LoadingSpinner';
 import { exceptionToErrorsArray } from '../utils/error';
 
 export default {
@@ -9,6 +10,7 @@ export default {
     AsyncButton,
     Banner,
     Loading,
+    LoadingSpinner
   },
 
   props: {
@@ -42,6 +44,11 @@ export default {
       default: () => null
     },
 
+    getConfig: {
+      type:    Function,
+      default: () => null
+    },
+
     save: {
       type:     Function,
       required: true
@@ -80,6 +87,7 @@ export default {
 
       statsInterval:    null,
       statusInterval:   null,
+      loadingConfig:    false,
     };
   },
 
@@ -115,9 +123,11 @@ export default {
       this.$set(this, 'editing', true);
     },
 
-    async loadStatus() {
+    loadStatus() {
       if (this.enabled || this.editing) {
-        this.$set(this, 'status', await this.getStatus());
+        this.getStatus().then((status) => {
+          this.$set(this, 'status', status);
+        });
       }
     },
 
@@ -163,6 +173,19 @@ export default {
       }
     }
   },
+
+  watch: {
+    async editing() {
+      if (this.editing && this.getConfig) {
+        try {
+          this.$set(this, 'loadingConfig', true);
+          this.$set(this, 'config', await this.getConfig());
+        } finally {
+          this.$set(this, 'loadingConfig', false);
+        }
+      }
+    }
+  }
 };
 </script>
 <template>
@@ -171,7 +194,7 @@ export default {
     <header>
       <h1>{{ title }}</h1>
 
-      <div v-if="(enabled && !editing && $slots.details) ">
+      <div v-if="(enabled && !editing && $slots.details && !loadingConfig) ">
         <button class="btn role-secondary mr-5" @click="editFn">
           Edit Config
         </button>
@@ -180,7 +203,7 @@ export default {
         </button>
       </div>
 
-      <button v-if="enabled && (editing || !$slots.details)" class="btn bg-error" @click="disableFn">
+      <button v-if="enabled && (editing || !$slots.details) && !loadingConfig" class="btn bg-error" @click="disableFn">
         Uninstall
       </button>
     </header>
@@ -205,8 +228,9 @@ export default {
     </div>
     <div v-if="(enabled && !editing)" class="body">
       <slot name="details">
-        <slot name="editing" />
-        <div class="resource-footer mt-20">
+        <LoadingSpinner v-if="loadingConfig" />
+        <slot v-else name="editing" />
+        <div v-if="!loadingConfig" class="resource-footer mt-20">
           <button class="btn role-secondary mr-10" @click="cancel">
             Cancel
           </button>
@@ -215,8 +239,9 @@ export default {
       </slot>
     </div>
     <div v-if="(editing || (enabled && !showDetail))" class="body">
-      <slot name="editing" />
-      <div v-if="editing" class="resource-footer mt-20">
+      <LoadingSpinner v-if="loadingConfig" />
+      <slot v-else name="editing" />
+      <div v-if="editing && !loadingConfig" class="resource-footer mt-20">
         <button class="btn role-secondary mr-10" @click="cancel">
           Cancel
         </button>
diff --git a/web/pkg/opni/components/CapabilityTable.vue b/web/pkg/opni/components/CapabilityTable.vue
index d597bed13a..787e698e30 100644
--- a/web/pkg/opni/components/CapabilityTable.vue
+++ b/web/pkg/opni/components/CapabilityTable.vue
@@ -2,7 +2,7 @@
 import { Card } from '@components/Card';
 import SortableTable from '@shell/components/SortableTable';
 import { Banner } from '@components/Banner';
-import LoadingSpinner from './LoadingSpinner';
+import LoadingSpinner from '@pkg/opni/components/LoadingSpinner';
 import UninstallCapabilitiesDialog from './dialogs/UninstallCapabilitiesDialog';
 import CancelUninstallCapabilitiesDialog from './dialogs/CancelUninstallCapabilitiesDialog';
 
diff --git a/web/pkg/opni/components/MonitoringBackend/Storage.vue b/web/pkg/opni/components/MonitoringBackend/Storage.vue
index efc2927553..f4e72297ea 100644
--- a/web/pkg/opni/components/MonitoringBackend/Storage.vue
+++ b/web/pkg/opni/components/MonitoringBackend/Storage.vue
@@ -3,7 +3,8 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Checkbox } from '@components/Form/Checkbox';
 import UnitInput from '@shell/components/form/UnitInput';
-import { DeploymentMode, StorageBackend } from '../../utils/requests/monitoring';
+import { Storage } from '@pkg/opni/api/opni';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 
 export const SECONDS_IN_DAY = 86400;
 
@@ -70,75 +71,27 @@ export default {
         { label: 'SSE-S3', value: 'SSE-S3' },
       ],
       SECONDS_IN_DAY,
-      StorageBackend,
-      DeploymentMode,
+      Storage,
     };
   },
 
   computed: {
     storageOptions() {
-      // only enable filesystem in standalone mode (0)
-      if (this.value.mode === DeploymentMode.AllInOne) {
-        return [
-          { label: 'Filesystem', value: StorageBackend.Filesystem },
-          { label: 'S3', value: StorageBackend.S3 }
-        ];
-      }
-
       return [
-        { label: 'S3', value: StorageBackend.S3 }
+        { label: 'Filesystem', value: 'filesystem' },
+        { label: 'S3', value: 's3' }
       ];
     },
 
-    s3RetentionPeriod: {
-      get() {
-        return Number.parseInt(this.value.storage.retentionPeriod || '0') / SECONDS_IN_DAY;
-      },
+    s3RetentionPeriod: createComputedTime('value.limits.compactorBlocksRetentionPeriod', SECONDS_IN_DAY),
 
-      set(value) {
-        this.$set(this.value.storage, 'retentionPeriod', `${ (value || 0) * SECONDS_IN_DAY }s`);
-      }
-    },
+    s3IdleConnTimeout: createComputedTime('value.storage.s3.http.idleConnTimeout'),
 
-    s3IdleConnTimeout: {
-      get() {
-        return Number.parseInt(this.value.storage.s3?.http?.idleConnTimeout || '0');
-      },
+    s3ResponseHeaderTimeout: createComputedTime('value.storage.s3.http.responseHeaderTimeout'),
 
-      set(value) {
-        this.$set(this.value.storage.s3.http, 'idleConnTimeout', `${ value || 0 }s`);
-      }
-    },
-
-    s3ResponseHeaderTimeout: {
-      get() {
-        return Number.parseInt(this.value.storage.s3?.http?.responseHeaderTimeout || '0');
-      },
+    s3TlsHandshakeTimeout: createComputedTime('value.storage.s3.http.tlsHandshakeTimeout'),
 
-      set(value) {
-        this.$set(this.value.storage.s3.http, 'responseHeaderTimeout', `${ value || 0 }s`);
-      }
-    },
-
-    s3TlsHandshakeTimeout: {
-      get() {
-        return Number.parseInt(this.value.storage.s3?.http?.tlsHandshakeTimeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.value.storage.s3.http, 'tlsHandshakeTimeout', `${ value || 0 }s`);
-      }
-    },
-
-    s3ExpectContinueTimeout: {
-      get() {
-        return Number.parseInt(this.value.storage.s3?.http?.expectContinueTimeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.value.storage.s3.http, 'expectContinueTimeout', `${ value || 0 }s`);
-      }
-    },
+    s3ExpectContinueTimeout: createComputedTime('value.storage.s3.http.expectContinueTimeout'),
   },
 
   methods: {
@@ -191,7 +144,7 @@ export default {
 <template>
   <div class="m-0">
     <div>
-      <div class="row" :class="{ border: value.storage.backend === StorageBackend.S3 }">
+      <div class="row" :class="{ border: value.storage.backend === 's3' }">
         <div class="col span-6">
           <LabeledSelect v-model="value.storage.backend" :options="storageOptions" label="Storage Type" />
         </div>
@@ -205,7 +158,7 @@ export default {
           />
         </div>
       </div>
-      <div v-if="value.storage.backend === StorageBackend.S3" class="mt-15">
+      <div v-if="value.storage.backend === 's3'" class="mt-15">
         <h3>Target</h3>
         <div class="row mb-10">
           <div class="col span-6">
@@ -226,7 +179,7 @@ export default {
         <h3>Access</h3>
         <div class="row mb-10">
           <div class="col span-6">
-            <LabeledInput v-model="value.storage.s3.accessKeyID" label="Access Key ID" :required="true" />
+            <LabeledInput v-model="value.storage.s3.accessKeyId" label="Access Key ID" :required="true" />
           </div>
           <div class="col span-6">
             <LabeledInput
@@ -301,17 +254,19 @@ export default {
         </div>
         <div class="row mb-10">
           <div class="col span-4">
-            <UnitInput v-model="value.storage.s3.http.maxIdleConns" label="Max Idle Connections" suffix="" />
+            <UnitInput v-model="value.storage.s3.http.maxIdleConnections" label="Max Idle Connections" suffix="" :input-exponent="0" base-unit="" />
           </div>
           <div class="col span-4">
             <UnitInput
-              v-model="value.storage.s3.http.maxIdleConnsPerHost"
+              v-model="value.storage.s3.http.maxIdleConnectionsPerHost"
               label="Max Idle Connections Per Host"
               suffix=""
+              :input-exponent="0"
+              base-unit=""
             />
           </div>
           <div class="col span-4">
-            <UnitInput v-model="value.storage.s3.http.maxConnsPerHost" label="Max Connections Per Host" suffix="" />
+            <UnitInput v-model="value.storage.s3.http.maxConnectionsPerHost" label="Max Connections Per Host" suffix="" :input-exponent="0" base-unit="" />
           </div>
         </div>
       </div>
diff --git a/web/pkg/opni/components/MonitoringBackend/index.vue b/web/pkg/opni/components/MonitoringBackend/index.vue
index 682d78baf9..1b6da4b32f 100644
--- a/web/pkg/opni/components/MonitoringBackend/index.vue
+++ b/web/pkg/opni/components/MonitoringBackend/index.vue
@@ -3,20 +3,22 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { cloneDeep } from 'lodash';
+import { CortexOps, DryRun } from '@pkg/opni/api/opni';
+import { Duration } from '@bufbuild/protobuf';
 import Backend from '../Backend';
 import CapabilityTable from '../CapabilityTable';
 import { getMetricCapabilities } from '../../utils/requests/capability';
 import { getClusterStats } from '../../utils/requests';
-import {
-  StorageBackend, InstallState, DeploymentMode, configureCluster, uninstallCluster, getClusterStatus, getClusterConfig
-} from '../../utils/requests/monitoring';
 import Grafana from './Grafana';
-import Storage, { SECONDS_IN_DAY } from './Storage';
+import { default as StorageComponent } from './Storage';
 
 export async function isEnabled() {
-  const status = (await getClusterStatus()).state;
+  // TODO: Uncomment once status is updated
+  // const status = (await CortexOps.service.Status()).state;
 
-  return status !== InstallState.NotInstalled;
+  // return status !== CortexOps.types.InstallState.NotInstalled;
+
+  return true;
 }
 
 export default {
@@ -25,77 +27,18 @@ export default {
     LabeledSelect,
     Grafana,
     CapabilityTable,
-    Storage,
+    StorageComponent,
     Tab,
     Tabbed
   },
 
-  async fetch() {
-    try {
-      const config = await getClusterConfig();
-
-      config.storage = config.storage || { backend: StorageBackend.S3 };
-      const backendField = StorageBackend[config.storage.backend].toLowerCase();
-      const clone = cloneDeep(this.config);
-
-      this.$set(this.config, 'mode', config.mode || DeploymentMode.HighlyAvailable);
-      this.$set(this, 'config', { ...clone, ...config });
-      this.$set(this.config, 'storage', { ...clone.storage, ...config.storage });
-      this.$set(this.config.storage, backendField, { ...clone.storage[backendField], ...config.storage[backendField] });
-      this.$set(this.config.storage, 'backend', config.storage.backend);
-      this.$set(this.config, 'grafana', config.grafana || { enabled: true });
-    } catch (ex) { }
-  },
-
   data() {
     return {
-      modes:                      [
-        {
-          label: 'Standalone',
-          value: DeploymentMode.AllInOne
-        },
-        {
-          label: 'Highly Available',
-          value: DeploymentMode.HighlyAvailable
-        },
-      ],
-      loading:                    false,
-      dashboardEnabled:           false,
-      capabilities:               [],
-      status:           InstallState.NotInstalled,
-      config:           {
-        mode:    DeploymentMode.HighlyAvailable,
-        storage:       {
-          backend:         StorageBackend.S3,
-          retentionPeriod: `${ 30 * SECONDS_IN_DAY }s`,
-          filesystem:       { directory: '' },
-          s3:               {
-            endpoint:         '',
-            region:           'us-east-1',
-            bucketName:       '',
-            secretAccessKey:  '',
-            accessKeyID:      '',
-            insecure:         false,
-            signatureVersion: 'v4',
-            sse:              {
-              type:                 '',
-              kmsKeyID:             '',
-              kmsEncryptionContext: '',
-            },
-            http: {
-              idleConnTimeout:       '90s',
-              responseHeaderTimeout: '120s',
-              insecureSkipVerify:    false,
-              tlsHandshakeTimeout:   '10s',
-              expectContinueTimeout: '10s',
-              maxIdleConns:          100,
-              maxIdleConnsPerHost:   0,
-              maxConnsPerHost:       100,
-            },
-          },
-        },
-        grafana: { enabled: true },
-      },
+      presets:       [],
+      presetOptions: [],
+      presetIndex:   0,
+      capabilities:  [],
+      config:        {},
     };
   },
 
@@ -159,23 +102,23 @@ export default {
     },
 
     async disable() {
-      await uninstallCluster();
-      if (this.config.storage.s3?.secretAccessKey) {
-        this.$set(this.config.storage.s3, 'secretAccessKey', '');
+      await CortexOps.service.Uninstall();
+      if (this.config.cortexConfig.storage.s3?.secretAccessKey) {
+        this.$set(this.config.cortexConfig.storage.s3, 'secretAccessKey', '');
       }
     },
 
     async save() {
-      if (this.config.storage.backend === StorageBackend.S3) {
-        if (this.config.storage.s3.endpoint === '') {
+      if (this.config.cortexConfig.storage.backend === 's3') {
+        if (this.config.cortexConfig.storage.s3.endpoint === '') {
           throw new Error('Endpoint is required');
         }
 
-        if (this.config.storage.s3.bucketName === '') {
+        if (this.config.cortexConfig.storage.s3.bucketName === '') {
           throw new Error('Bucket Name is required');
         }
 
-        if (this.config.storage.s3.secretAccessKey === '') {
+        if (this.config.cortexConfig.storage.s3.secretAccessKey === '') {
           throw new Error('Secret Access Key is required');
         }
       }
@@ -187,34 +130,40 @@ export default {
         }
       }
 
-      const copy = cloneDeep(this.config);
+      const newConfig = CortexOps.types.CapabilityBackendConfigSpec.fromJson(this.config);
+      const activeConfig = await CortexOps.service.GetConfiguration(CortexOps.types.GetRequest.fromJson({}));
+      const shouldSetConfig = activeConfig.revision.revision === 0n;
 
-      if (this.config.storage.backend !== StorageBackend.Filesystem) {
-        delete copy.storage.filesystem;
-      }
-      if (this.config.storage.backend !== StorageBackend.S3) {
-        delete copy.storage.s3;
-      }
-      if (this.config.storage.backend !== StorageBackend.GCS) {
-        delete copy.storage.gcs;
-      }
-      if (this.config.storage.backend !== StorageBackend.Azure) {
-        delete copy.storage.azure;
+      const dryRunRequest = new CortexOps.types.DryRunRequest({
+        spec:   newConfig,
+        action: shouldSetConfig ? DryRun.types.Action.Set : DryRun.types.Action.Reset,
+        target: DryRun.types.Target.ActiveConfiguration
+      });
+
+      const dryRun = await CortexOps.service.DryRun(dryRunRequest);
+
+      if (dryRun.validationErrors?.length > 0) {
+        throw dryRun.validationErrors;
       }
-      if (this.config.storage.backend !== StorageBackend.Swift) {
-        delete copy.storage.swift;
+
+      await CortexOps.service.SetDefaultConfiguration(newConfig);
+
+      if (shouldSetConfig) {
+        await CortexOps.service.SetConfiguration(CortexOps.types.CapabilityBackendConfigSpec.fromJson({}));
+      } else {
+        await CortexOps.service.ResetConfiguration();
       }
 
-      await configureCluster(copy);
+      await CortexOps.service.Install();
     },
 
     bannerMessage(status) {
       switch (status) {
-      case InstallState.Updating:
+      case CortexOps.types.InstallState.Updating:
         return `Monitoring is currently updating on the cluster. You can't make changes right now.`;
-      case InstallState.Uninstalling:
+      case CortexOps.types.InstallState.Uninstalling:
         return `Monitoring is currently uninstalling from the cluster. You can't make changes right now.`;
-      case InstallState.Installed:
+      case CortexOps.types.InstallState.Installed:
         return `Monitoring is currently installed on the cluster.`;
       default:
         return `Monitoring is currently in an unknown state on the cluster. You can't make changes right now.`;
@@ -223,41 +172,76 @@ export default {
 
     bannerState(status) {
       switch (status) {
-      case InstallState.Updating:
-      case InstallState.Uninstalling:
+      case CortexOps.types.InstallState.Updating:
+      case CortexOps.types.InstallState.Uninstalling:
         return 'warning';
-      case InstallState.Installed:
+      case CortexOps.types.InstallState.Installed:
         return `success`;
       default:
         return `error`;
       }
     },
 
-    async isEnabled() {
-      return await isEnabled();
-    },
+    isEnabled,
 
     async isUpgradeAvailable() {
       return await false;
     },
 
     async getStatus() {
-      try {
-        const status = (await getClusterStatus()).state;
+      // TODO: Uncomment once status is updated
+      // try {
+      //   const status = (await CortexOps.service.Status()).state;
 
-        if (status === InstallState.NotInstalled) {
-          return null;
-        }
+      //   if (status === CortexOps.types.InstallState.NotInstalled) {
+      //     return null;
+      //   }
 
-        return {
-          state:   this.bannerState(status),
-          message: this.bannerMessage(status)
-        };
-      } catch (ex) {
-        return null;
-      }
+      //   return {
+      //     state:   this.bannerState(status),
+      //     message: this.bannerMessage(status)
+      //   };
+      // } catch (ex) {
+      //   return null;
+      // }
+      return await null;
+    },
+
+    async getConfig() {
+      const presets = (await CortexOps.service.ListPresets()).items;
+
+      this.$set(this, 'presets', presets);
+      this.$set(this, 'presetOptions', presets.map((p, i) => ({
+        label: p.metadata.displayName,
+        value: i
+      })));
+      this.setPresetAsConfig(this.presetIndex);
+
+      const config = JSON.parse((await CortexOps.service.GetDefaultConfiguration(new CortexOps.types.GetRequest({}))).toJsonString());
+
+      config.cortexConfig.storage = config.cortexConfig.storage || { backend: 's3' };
+      const backendField = config.cortexConfig.storage.backend;
+      const clone = cloneDeep(this.config);
+
+      this.$set(this, 'config', { ...clone, ...config });
+      this.$set(this.config.cortexConfig, 'storage', { ...(clone.cortexConfig.storage || {}), ...(config.cortexConfig.storage || {}) });
+      this.$set(this.config.cortexConfig.storage, backendField, { ...(clone.cortexConfig.storage?.[backendField] || {}), ...(config.cortexConfig.storage?.[backendField] || {}) });
+      this.$set(this.config.cortexConfig.storage, 'backend', config.cortexConfig.storage.backend || 'filesystem');
+      this.$set(this.config, 'grafana', config.grafana || { enabled: true });
+
+      return this.config;
     },
+
+    setPresetAsConfig(index) {
+      this.$set(this, 'config', this.presets[index].spec);
+    }
   },
+
+  watch: {
+    presetIndex() {
+      this.setPresetAsConfig(this.presetIndex);
+    }
+  }
 };
 </script>
 <template>
@@ -267,17 +251,18 @@ export default {
     :disable="disable"
     :is-upgrade-available="isUpgradeAvailable"
     :get-status="getStatus"
+    :get-config="getConfig"
     :save="save"
   >
     <template #editing>
       <div class="row mb-20">
         <div class="col span-12">
-          <LabeledSelect v-model="config.mode" :options="modes" label="Mode" />
+          <LabeledSelect v-model="presetIndex" :options="presetOptions" label="Preset" />
         </div>
       </div>
       <Tabbed :side-tabs="true">
         <Tab :weight="4" name="storage" label="Storage">
-          <Storage v-model="config" />
+          <StorageComponent v-model="config.cortexConfig" />
         </Tab>
         <Tab :weight="3" name="grafana" label="Grafana">
           <Grafana v-model="config.grafana" :status="status" />
diff --git a/web/pkg/opni/utils/computed.ts b/web/pkg/opni/utils/computed.ts
new file mode 100644
index 0000000000..456bcb9305
--- /dev/null
+++ b/web/pkg/opni/utils/computed.ts
@@ -0,0 +1,25 @@
+export function createComputedTime(path: string, factor: number = 1, defaultValue: number = 0) {
+  return {
+    get() {
+      return Number.parseInt(conditionalGet(this, path) || `${ defaultValue }`) / factor;
+    },
+
+    set(value: number) {
+      const parts = path.split('.');
+      const last = parts.splice(-1, 1)[0];
+      const prefix = parts.join('.');
+
+      (this as any).$set(conditionalGet(this, prefix), last, `${ (value || defaultValue) * factor }s`);
+    }
+  };
+}
+
+function conditionalGet(source: any, key: string) {
+  const parts = key.split('.');
+
+  for (const part of parts) {
+    source = source?.[part];
+  }
+
+  return source;
+}
diff --git a/web/service-generator/generate b/web/service-generator/generate
index 7270aec280..2ccf74fb83 100755
--- a/web/service-generator/generate
+++ b/web/service-generator/generate
@@ -2,6 +2,6 @@
 /* eslint-disable */
 
 const { runNodeJs } = require("@bufbuild/protoplugin");
-const plugin = require("./dist/src/index.js");
+const plugin = require("./dist/service-generator/src/index.js");
 
 runNodeJs(plugin.default);
\ No newline at end of file
diff --git a/web/service-generator/src/index.ts b/web/service-generator/src/index.ts
index e2984d33a9..340ef514f3 100644
--- a/web/service-generator/src/index.ts
+++ b/web/service-generator/src/index.ts
@@ -28,12 +28,15 @@ function printMethod(f: GeneratedFile, method: DescMethod) {
   const m = findCustomMessageOption(method, 72295728, HttpRule);
   const input = f.import(method.input);
   const output = f.import(method.output);
+  const inputName = input.name === 'Empty' ? '' : 'input: ';
+  const inputType = input.name === 'Empty' ? '' : input;
+  const returnType = output.name === 'Empty' ? 'void' : output;
+  const data = inputName ? `,\n    data: input.toJson()` : '';
 
-  f.print(`export async function ${ method.name }(input:`, input, `): Promise<`, output, `> {
+  f.print(`export async function ${ method.name }(`, inputName, inputType, `): Promise<`, returnType, `> {
    const result = (await axios.request({
     method: "${ m?.pattern.case || 'get' }",
-    url: '/opni-api/${ method.parent.name }${ m?.pattern.value || '' }',
-    data: input.toJson()
+    url: '/opni-api/${ method.parent.name }${ m?.pattern.value || '' }'${ data }
    })).data;
 
    return `, output, `.fromJson(result);
diff --git a/web/service-generator/tsconfig.json b/web/service-generator/tsconfig.json
index 4995aae23d..59afd12ca6 100644
--- a/web/service-generator/tsconfig.json
+++ b/web/service-generator/tsconfig.json
@@ -22,7 +22,7 @@
         "outDir": "./dist"
     },
     "include": [
-        "./src/**/*"
+        "./src/index.ts"
     ],
     "exclude": [
         "./node_modules/**/*",
diff --git a/web/yarn.lock b/web/yarn.lock
index 6f96645f85..67ce076c08 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2006,6 +2006,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@bufbuild/protobuf@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.2.1.tgz#f8b1fbbe79726a4eafa9772ddde147b57f85d177"
+  integrity sha512-cwwGvLGqvoaOZmoP5+i4v/rbW+rHkguvTehuZyM2p/xpmaNSdT2h3B7kHw33aiffv35t1XrYHIkdJSEkSEMJuA==
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"