diff --git a/client/src/App.tsx b/client/src/App.tsx
index 18cd939..e76bca3 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -106,6 +106,7 @@ function App() {
                   name: "vendor",
                   list: "/vendor",
                   create: "/vendor/create",
+                  clone: "/vendor/clone/:id",
                   edit: "/vendor/edit/:id",
                   show: "/vendor/show/:id",
                   meta: {
@@ -173,7 +174,14 @@ function App() {
                   </Route>
                   <Route path="/vendor">
                     <Route index element={<VendorList />} />
-                    <Route path="create" element={<VendorCreate />} />
+                    <Route
+                      path="create"
+                      element={<VendorCreate mode="create" />}
+                    />
+                    <Route
+                      path="clone/:id"
+                      element={<VendorCreate mode="clone" />}
+                    />
                     <Route path="edit/:id" element={<VendorEdit />} />
                     <Route path="show/:id" element={<VendorShow />} />
                   </Route>
diff --git a/client/src/pages/vendors/create.tsx b/client/src/pages/vendors/create.tsx
index 1121f60..7073c2f 100644
--- a/client/src/pages/vendors/create.tsx
+++ b/client/src/pages/vendors/create.tsx
@@ -4,11 +4,21 @@ import { Create, useForm } from "@refinedev/antd";
 import { Form, Input } from "antd";
 import TextArea from "antd/es/input/TextArea";
 
-export const VendorCreate: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps } = useForm();
+interface CreateOrCloneProps {
+  mode: "create" | "clone";
+}
+
+export const VendorCreate: React.FC<
+  IResourceComponentsProps & CreateOrCloneProps
+> = (props) => {
+  const { formProps, saveButtonProps, formLoading } = useForm();
 
   return (
-    <Create saveButtonProps={saveButtonProps}>
+    <Create
+      title={props.mode === "create" ? "Create Vendor" : "Clone Vendor"}
+      isLoading={formLoading}
+      saveButtonProps={saveButtonProps}
+    >
       <Form {...formProps} layout="vertical">
         <Form.Item
           label="Name"
diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
index 57e8888..63dc589 100644
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -6,6 +6,7 @@ import {
   EditButton,
   ShowButton,
   DateField,
+  CloneButton,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 import dayjs from "dayjs";
@@ -40,8 +41,24 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
-              <EditButton hideText size="small" recordItemId={record.id} />
-              <ShowButton hideText size="small" recordItemId={record.id} />
+              <EditButton
+                hideText
+                title="Edit"
+                size="small"
+                recordItemId={record.id}
+              />
+              <ShowButton
+                hideText
+                title="Show"
+                size="small"
+                recordItemId={record.id}
+              />
+              <CloneButton
+                hideText
+                title="Clone"
+                size="small"
+                recordItemId={record.id}
+              />
             </Space>
           )}
         />