diff --git a/client/.env.development.rome b/client/.env.development.rome
index eabf048e8..8a2ad85b7 100644
--- a/client/.env.development.rome
+++ b/client/.env.development.rome
@@ -19,4 +19,5 @@ TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
-VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78
\ No newline at end of file
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78
+VITE_ENABLE_COMPILER_IN_DEV=1
diff --git a/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx b/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
index 02b82e436..56b0d1c65 100644
--- a/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
+++ b/client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx
@@ -80,7 +80,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
   };
 
   const handleVendorSelect = (vendorid) => {
-    const vendor = VendorAutoCompleteData.vendors.filter((v) => v.id === vendorid)[0];
+    const vendor = VendorAutoCompleteData?.vendors?.filter((v) => v.id === vendorid)[0];
     if (vendor) {
       form.setFieldsValue({
         addr1: vendor.name,
diff --git a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
index 2792adcdc..cb1e077be 100644
--- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
+++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
@@ -1,4 +1,4 @@
-import { Form, Input, Select } from "antd";
+import { Card, Form, Input, Select } from "antd";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -29,7 +29,7 @@ export default function JobsCreateOwnerInfoNewComponent() {
   ];
 
   return (
-    <div>
+    <Card>
       <LayoutFormRow header={t("owners.forms.name")} grow>
         <Form.Item
           label={t("owners.fields.ownr_ln")}
@@ -178,6 +178,6 @@ export default function JobsCreateOwnerInfoNewComponent() {
           <Select disabled={!state.owner.new} allowClear placeholder="Type" options={PREFERRED_CONTACT_OPTIONS} />
         </Form.Item>
       </LayoutFormRow>
-    </div>
+    </Card>
   );
 }
diff --git a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx
index 990cc7c0c..0544a7dc2 100644
--- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx
+++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx
@@ -1,4 +1,4 @@
-import { Form, Input } from "antd";
+import { Card, Form, Input } from "antd";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -11,7 +11,7 @@ export default function JobsCreateVehicleInfoNewComponent({ form }) {
 
   const { t } = useTranslation();
   return (
-    <div>
+    <Card>
       <LayoutFormRow header={t("vehicles.forms.detail")} grow>
         <Form.Item
           label={t("vehicles.fields.v_vin")}
@@ -151,6 +151,6 @@ export default function JobsCreateVehicleInfoNewComponent({ form }) {
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
-    </div>
+    </Card>
   );
 }
diff --git a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
index 9a5f0b6b2..2f39801b7 100644
--- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
+++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
@@ -1,4 +1,4 @@
-import { Form, Statistic, Tooltip } from "antd";
+import { Card, Form, Statistic, Tooltip } from "antd";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -27,7 +27,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
     : [];
 
   return (
-    <div>
+    <Card>
       <FormRow header={t("jobs.forms.estdates")}>
         <Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
           <DateTimePicker disabled={jobRO} isDateOnly />
@@ -122,7 +122,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
           <DateTimePicker disabled={true} />
         </Form.Item>
       </FormRow>
-    </div>
+    </Card>
   );
 }
 
diff --git a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
index 7840f37ca..172400edd 100644
--- a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
+++ b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
@@ -1,4 +1,4 @@
-import { Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
+import { Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -37,7 +37,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
   };
 
   return (
-    <div>
+    <Card>
       <FormRow header={t("jobs.forms.claiminfo")}>
         <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
           <Input disabled={jobRO} />
@@ -268,7 +268,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
           <Input disabled={jobRO} allowClear />
         </Form.Item>
       </FormRow>
-    </div>
+    </Card>
   );
 }
 
diff --git a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
index c2e647ec2..e4c25643b 100644
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
@@ -1,4 +1,4 @@
-import { Divider, Form, Input, InputNumber, Select, Space, Switch, Tooltip } from "antd";
+import { Card, Divider, Form, Input, InputNumber, Select, Space, Switch, Tooltip } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -25,7 +25,7 @@ const mapStateToProps = createStructuredSelector({
 export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
   const { t } = useTranslation();
   return (
-    <div>
+    <Card>
       <FormRow>
         <Form.Item label={t("jobs.fields.class")} name="class">
           <Select disabled={true} />
@@ -227,7 +227,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
           </>
         )
       })}
-    </div>
+    </Card>
   );
 }
 
diff --git a/client/src/components/owner-detail-form/owner-detail-form.container.jsx b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
index 7e10f5da2..455b8b274 100644
--- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
@@ -1,6 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { useApolloClient, useMutation } from "@apollo/client/react";
-import { Button, Form, Popconfirm } from "antd";
+import { Button, Card, Form, Popconfirm } from "antd";
 import { phone } from "phone"; // Import phone utility for formatting
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -116,7 +116,7 @@ function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
   };
 
   return (
-    <>
+    <Card>
       <PageHeader
         title={t("menus.header.owners")}
         extra={[
@@ -152,7 +152,7 @@ function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
           }
         />
       </Form>
-    </>
+    </Card>
   );
 }
 
diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
index 89f192245..6eedc84c7 100644
--- a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
+++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx
@@ -1,6 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { useMutation } from "@apollo/client/react";
-import { Button, Form, Popconfirm } from "antd";
+import { Button, Card, Form, Popconfirm } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -68,7 +68,7 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
   };
 
   return (
-    <>
+    <Card>
       <PageHeader
         title={t("menus.header.vehicles")}
         extra={[
@@ -100,7 +100,7 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
       >
         <VehicleDetailFormComponent form={form} loading={loading} />
       </Form>
-    </>
+    </Card>
   );
 }