diff --git a/client/src/components/JobMetrics/AwsEstimate.vue b/client/src/components/JobMetrics/AwsEstimate.vue
index 4cecb0346e3..fbd7b79b7a9 100644
--- a/client/src/components/JobMetrics/AwsEstimate.vue
+++ b/client/src/components/JobMetrics/AwsEstimate.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-export interface AwsEstimateProps {
+const props = defineProps<{
     jobRuntimeInSeconds: number;
     coresAllocated: number;
     memoryAllocatedInMebibyte?: number;
@@ -18,9 +18,7 @@ export interface AwsEstimateProps {
             source: string;
         }[];
     }[];
-}
-
-const props = defineProps<AwsEstimateProps>();
+}>();
 
 const computedAwsEstimate = computed(() => {
     const { coresAllocated, jobRuntimeInSeconds, memoryAllocatedInMebibyte } = props;
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionCard.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionCard.vue
index 8302c5c1ddd..7be125ff2fe 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionCard.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionCard.vue
@@ -2,14 +2,12 @@
 import { ref } from "vue";
 import CarbonEmissionsIcon from "./CarbonEmissionsIcon.vue";
 
-export interface CarbonEmissionsCardProps {
+const props = defineProps<{
     heading: string;
     explanation: string;
     value: string | number;
     icon: InstanceType<typeof CarbonEmissionsIcon>["$props"]["icon"];
-}
-
-const props = defineProps<CarbonEmissionsCardProps>();
+}>();
 
 const shouldShowInfo = ref(false);
 
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
index ed625e6c645..e30240e995a 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
@@ -10,7 +10,7 @@ import * as carbonEmissionsConstants from "./carbonEmissionConstants.js";
 
 library.add(faQuestionCircle);
 
-export interface CarbonEmissionsProps {
+interface CarbonEmissionsProps {
     estimatedServerInstance: {
         name: string;
         cpuInfo: {
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
index 09a4787ad50..0fdf3f8a569 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
@@ -14,11 +14,9 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 
 library.add(faBolt, faCar, faGasPump, faLightbulb, faMobile, faSmog, faTree, faTruck);
 
-export interface CarbonEmissionsIconProps {
+const props = defineProps<{
     icon: "bolt" | "car" | "gasPump" | "lightbulb" | "mobilePhone" | "smog" | "tree";
-}
-
-const props = defineProps<CarbonEmissionsIconProps>();
+}>();
 </script>
 
 <template>
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index 8c073f47851..a6804fa6814 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -4,21 +4,31 @@ import CarbonEmissions from "./CarbonEmissions/CarbonEmissions.vue";
 import { useJobMetricsStore } from "@/stores/jobMetricsStore";
 import { computed, ref, unref } from "vue";
 
-export interface JobMetricsProps {
-    datasetFilesize?: number;
-    datasetId?: string;
-    datasetType?: string;
-    includeTitle?: boolean;
-    jobId: string;
-    shouldShowAwsEstimate?: boolean;
-}
-
-const props = withDefaults(defineProps<JobMetricsProps>(), {
-    datasetFilesize: 0,
-    datasetId: "",
-    datasetType: "hda",
-    includeTitle: true,
-    shouldShowAwsEstimate: false,
+const props = defineProps({
+    jobId: {
+        type: String,
+        required: true,
+    },
+    datasetFilesize: {
+        type: Number,
+        default: 0,
+    },
+    datasetId: {
+        type: String,
+        default: "",
+    },
+    datasetType: {
+        type: String,
+        default: "hda",
+    },
+    includeTitle: {
+        type: Boolean,
+        default: true,
+    },
+    shouldShowAwsEstimate: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const jobMetricsStore = useJobMetricsStore();