diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx
index 8e9b8ff49..c71702cfb 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPage.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { Box, DashboardCard, DashboardInsider } from '@/components';
-import { CustomerFormFormik } from './CustomerFormFormik';
+import { CustomerFormFormik, ustomerFormFormik } from './CustomerFormFormik';
 import {
   CustomerFormProvider,
   useCustomerFormContext,
@@ -14,26 +14,35 @@ import {
  * @returns {JSX}
  */
 export default function CustomerFormPage() {
-  const history = useHistory();
   const { id } = useParams();
+  const customerId = parseInt(id, 10);
+  
+  return (
+    <CustomerFormProvider customerId={customerId}>
+     <CustomerFormPageContent /> 
+    </CustomerFormProvider>
+  );
+}
+
+function CustomerFormPageContent() {
+  const history = useHistory();
   const { isFormLoading } = useCustomerFormContext();
 
-  const customerId = parseInt(id, 10);
 
-  // Handle the form submit success.
   const handleSubmitSuccess = (values, formArgs, submitPayload) => {
     if (!submitPayload.noRedirect) {
       history.push('/customers');
     }
-  };
-  // Handle the form cancel button click.
+  }
+
+    // Handle the form cancel button click.
   const handleFormCancel = () => {
     history.goBack();
   };
 
+
   return (
-    <CustomerFormProvider customerId={customerId}>
-      <DashboardInsider loading={isFormLoading}>
+    <DashboardInsider loading={isFormLoading}>
         <Box mx={'auto'} maxWidth={800}>
           <CustomerFormFormik
             onSubmitSuccess={handleSubmitSuccess}
@@ -41,6 +50,5 @@ export default function CustomerFormPage() {
           />
         </Box>
       </DashboardInsider>
-    </CustomerFormProvider>
-  );
+  )
 }
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx
index e490aed0a..f982c83da 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormProvider.tsx
@@ -63,7 +63,7 @@ const CustomerFormContext = createContext<CustomerFormContextValue | undefined>(
   undefined,
 );
 
-function CustomerFormProvider({ query, customerId, children }: CustomerFormProviderProps) {
+export function CustomerFormProvider({ query, customerId, children }: CustomerFormProviderProps) {
   const { state } = useLocation<{ action?: number | string }>();
   const contactId = state?.action;
 
@@ -132,7 +132,7 @@ function CustomerFormProvider({ query, customerId, children }: CustomerFormProvi
   );
 }
 
-const useCustomerFormContext = () => {
+export const useCustomerFormContext = () => {
   const ctx = React.useContext(CustomerFormContext);
   if (!ctx) {
     throw new Error(
@@ -141,5 +141,3 @@ const useCustomerFormContext = () => {
   }
   return ctx;
 };
-
-export { CustomerFormProvider, useCustomerFormContext };
diff --git a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
index 56e09c17b..bd5957016 100644
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
@@ -8,8 +8,8 @@ import {
   VendorFormProvider,
   useVendorFormContext,
 } from '@/containers/Vendors/VendorForm/VendorFormProvider';
-import VendorFormFormik, {
-  VendorFormHeaderPrimary,
+import {
+  VendorFormFormik,
 } from '@/containers/Vendors/VendorForm/VendorFormFormik';
 
 import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
@@ -62,13 +62,11 @@ function QuickVendorFormDrawer({
   return (
     <VendorFormProvider vendorId={vendorId}>
       <DrawerVendorFormLoading>
-        <VendorFormCard>
           <VendorFormFormik
             initialValues={{ first_name: displayName }}
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleCancelForm}
           />
-        </VendorFormCard>
       </DrawerVendorFormLoading>
     </VendorFormProvider>
   );
@@ -79,20 +77,3 @@ export default R.compose(
   withDashboardActions,
 )(QuickVendorFormDrawer);
 
-const VendorFormCard = styled(Card)`
-  margin: 15px;
-  padding: 25px;
-  margin-bottom: calc(15px + 65px);
-
-  ${VendorFormHeaderPrimary} {
-    padding-top: 0;
-  }
-  .page-form {
-    padding: 0;
-
-    &__floating-actions {
-      margin-left: -41px;
-      margin-right: -41px;
-    }
-  }
-`;
diff --git a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
index de4e7fe3b..2f75f99b7 100644
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
@@ -18,7 +18,6 @@ export default function QuickWriteVendorDrawerContent({ displayName, autofillRef
       <DrawerHeaderContent
         name={DRAWERS.QUICK_CREATE_CUSTOMER}
         title={<T id={'create_a_new_vendor'} />}
-
       />
       <DrawerBody>
         <QuickVendorFormDrawer displayName={displayName} autofillRef={autofillRef} />
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
index 64848827f..22d710bc6 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
@@ -101,7 +101,7 @@ function VendorFormFormikBase({
   };
 
   return (
-    <Box mx={'auto'} maxWidth={800}>
+    
       <Formik
         validationSchema={
           isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
@@ -114,8 +114,7 @@ function VendorFormFormikBase({
             <VendorFormContent onCancel={onCancel} />
           </VendorFormFields>
         </Form>
-      </Formik>
-        </Box>    
+      </Formik>    
   );
 }
 
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx
index ea0e09700..ec5fdf3c0 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPage.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useParams, useHistory } from 'react-router-dom';
-import { DashboardCard, DashboardInsider } from '@/components';
+import { Box, DashboardCard, DashboardInsider } from '@/components';
 import { VendorFormProvider, useVendorFormContext } from './VendorFormProvider';
 import { VendorFormFormik } from './VendorFormFormik';
 
@@ -41,10 +41,12 @@ export function VendorFormPage() {
   return (
     <VendorFormProvider vendorId={id}>
       <VendorFormPageLoading>
+        <Box mx={'auto'} maxWidth={800}>
           <VendorFormFormik
             onSubmitSuccess={handleSubmitSuccess}
             onCancel={handleFormCancel}
-          />
+            />
+        </Box>
       </VendorFormPageLoading>
     </VendorFormProvider>
   );
diff --git a/packages/webapp/src/routes/dashboard.tsx b/packages/webapp/src/routes/dashboard.tsx
index ffd709df0..8c2f4543e 100644
--- a/packages/webapp/src/routes/dashboard.tsx
+++ b/packages/webapp/src/routes/dashboard.tsx
@@ -631,7 +631,7 @@ export const getDashboardRoutes = () => [
   {
     path: `/vendors/new`,
     component: lazy(
-      () => import('@/containers/Vendors/VendorForm/VendorFormPage'),
+      () => import('@/containers/Vendors/VendorForm/VendorFormPage').then(module => ({ default: module.VendorFormPage })),
     ),
     name: 'vendor-new',
     breadcrumb: intl.get('new_vendor'),