diff --git a/packages/server/src/modules/Vendors/dtos/EditVendor.dto.ts b/packages/server/src/modules/Vendors/dtos/EditVendor.dto.ts
index cc5a29a3f..8e2980b40 100644
--- a/packages/server/src/modules/Vendors/dtos/EditVendor.dto.ts
+++ b/packages/server/src/modules/Vendors/dtos/EditVendor.dto.ts
@@ -1,5 +1,6 @@
 import { ContactAddressDto } from '@/modules/Customers/dtos/ContactAddress.dto';
-import { IsEmail, IsString, IsBoolean, IsOptional } from 'class-validator';
+import { IsEmail, IsString, IsBoolean } from 'class-validator';
+import { IsOptional } from '@/common/decorators/Validators';
 import { ApiProperty } from '@nestjs/swagger';
 
 export class EditVendorDto extends ContactAddressDto {
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx
index 368e14bc3..1a27a9b97 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx
@@ -34,7 +34,7 @@ export function CustomerFormContent() {
             <Tab id={'primary'} title={'Basic'} />
             <Tab id={'financial'} title={'Financial'} />
             <Tab id={'billingAddress'} title={'Billing address'} />
-            <Tab id={'shippingAddress'} title={'Ship address'} />
+            <Tab id={'shippingAddress'} title={'Shipping address'} />
             <Tab id={'notes'} title={'Notes'} />
           </Tabs>
 
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormSectionTitle.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormSectionTitle.tsx
index ff927fd7d..826d139f6 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormSectionTitle.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormSectionTitle.tsx
@@ -5,7 +5,7 @@ const customerFormSectionTitleClass = css`
   font-size: 14px;
   color: #8f99a8;
   margin-bottom: 18px;
-  margin-top: 0;
+  margin-top: 10px;
 `;
 
 export function CustomerFormSectionTitle({ children }: { children: React.ReactNode | string }) {
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx
index 48ab23694..cfcb8b57d 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx
@@ -7,16 +7,8 @@ import { css } from '@emotion/css';
 import { VendorFloatingActions } from "./VendorFloatingActions";
 import { VendorFormSections } from "./VendorFormFields";
 
-const vendorFormSections = {
-  primary: 'primary',
-  financial: 'financial',
-  billingAddress: 'billingAddress',
-  shippingAddress: 'shippingAddress',
-  notes: 'notes',
-};
-
 export function VendorFormContent() {
-  const [selectedTabId, setSelectedTabId] = useState(vendorFormSections.primary);
+  const [selectedTabId, setSelectedTabId] = useState('primary');
 
   const handleTabChange = (tabId: string) => {
     const sectionId = String(tabId);
@@ -40,11 +32,11 @@ export function VendorFormContent() {
           onChange={handleTabChange}
           className={css`position: sticky; top: 20px; .bp4-large > .bp4-tab{font-size: 14px;} `}
         >
-          <Tab id={vendorFormSections.primary} title={'Basic'} />
-          <Tab id={vendorFormSections.financial} title={'Financial'} />
-          <Tab id={vendorFormSections.billingAddress} title={'Billing address'} />
-          <Tab id={vendorFormSections.shippingAddress} title={'Ship address'} />
-          <Tab id={vendorFormSections.notes} title={'Notes'} />
+          <Tab id={'primary'} title={'Basic'} />
+          <Tab id={'financial'} title={'Financial'} />
+          <Tab id={'billingAddress'} title={'Billing address'} />
+          <Tab id={'shippingAddress'} title={'Shipping address'} />
+          <Tab id={'notes'} title={'Notes'} />
         </Tabs>
         <VendorFormSections />
       </Group>
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
index 22d710bc6..255b997d7 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
@@ -47,9 +47,6 @@ function VendorFormFormikBase({
     isNewMode,
   } = useVendorFormContext();
 
-  /**
-   * Initial values in create and edit mode.
-   */
   const initialFormValues = useMemo(
     () => ({
       ...defaultInitialValues,
@@ -101,7 +98,6 @@ function VendorFormFormikBase({
   };
 
   return (
-    
       <Formik
         validationSchema={
           isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormProvider.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormProvider.tsx
index 0d44267c7..4d47e6867 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormProvider.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormProvider.tsx
@@ -33,7 +33,6 @@ function VendorFormProvider({ query, vendorId, ...props }) {
   const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
     enabled: !!vendorId,
   });
-
   // Handle fetch contact duplicate details.
   const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
     contactId,
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormSectionTitle.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormSectionTitle.tsx
index e9c8cb614..6717884fd 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormSectionTitle.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormSectionTitle.tsx
@@ -4,7 +4,7 @@ const vendorFormSectionTitleClass = css`
   font-size: 14px;
   color: #8f99a8;
   margin-bottom: 18px;
-  margin-top: 0;
+  margin-top: 10px;
 `;
 
 export function VendorFormSectionTitle({ children }: { children: React.ReactNode | string }) {
diff --git a/packages/webapp/src/routes/dashboard.tsx b/packages/webapp/src/routes/dashboard.tsx
index 8c2f4543e..c3c16d97d 100644
--- a/packages/webapp/src/routes/dashboard.tsx
+++ b/packages/webapp/src/routes/dashboard.tsx
@@ -619,7 +619,7 @@ export const getDashboardRoutes = () => [
   {
     path: `/vendors/:id/edit`,
     component: lazy(
-      () => import('@/containers/Vendors/VendorForm/VendorFormPage'),
+      () => import('@/containers/Vendors/VendorForm/VendorFormPage').then(module => ({ default: module.VendorFormPage })),
     ),
     name: 'vendor-edit',
     breadcrumb: intl.get('edit_vendor'),
diff --git a/packages/webapp/src/style/objects/buttons.scss b/packages/webapp/src/style/objects/buttons.scss
index 2840e0a1b..05c811809 100644
--- a/packages/webapp/src/style/objects/buttons.scss
+++ b/packages/webapp/src/style/objects/buttons.scss
@@ -8,6 +8,12 @@
   min-height: 32px;
   padding-left: 12px;
   padding-right: 12px;
+
+  &.bp4-outlined {
+    .bp4-dark & {
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+  }
 }
 
 .bp4-button:not([class*='bp4-intent-']) {