diff --git a/client/src/App.tsx b/client/src/App.tsx
index da011ab..18cd939 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -94,6 +94,7 @@ function App() {
                   name: "filament",
                   list: "/filament",
                   create: "/filament/create",
+                  clone: "/filament/clone/:id",
                   edit: "/filament/edit/:id",
                   show: "/filament/show/:id",
                   meta: {
@@ -159,7 +160,14 @@ function App() {
                   </Route>
                   <Route path="/filament">
                     <Route index element={<FilamentList />} />
-                    <Route path="create" element={<FilamentCreate />} />
+                    <Route
+                      path="create"
+                      element={<FilamentCreate mode="create" />}
+                    />
+                    <Route
+                      path="clone/:id"
+                      element={<FilamentCreate mode="clone" />}
+                    />
                     <Route path="edit/:id" element={<FilamentEdit />} />
                     <Route path="show/:id" element={<FilamentShow />} />
                   </Route>
diff --git a/client/src/pages/filaments/create.tsx b/client/src/pages/filaments/create.tsx
index c1b7d58..842f3a3 100644
--- a/client/src/pages/filaments/create.tsx
+++ b/client/src/pages/filaments/create.tsx
@@ -5,8 +5,19 @@ import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor } from "../vendors/model";
 
-export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps } = useForm();
+interface CreateOrCloneProps {
+  mode: "create" | "clone";
+}
+
+export const FilamentCreate: React.FC<
+  IResourceComponentsProps & CreateOrCloneProps
+> = (props) => {
+  const { formProps, saveButtonProps, formLoading } = useForm();
+
+  if (props.mode === "clone" && formProps.initialValues) {
+    // Fix the filament_id
+    formProps.initialValues.vendor_id = formProps.initialValues.vendor.id;
+  }
 
   const { selectProps } = useSelect<IVendor>({
     resource: "vendor",
@@ -14,7 +25,11 @@ export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
   });
 
   return (
-    <Create saveButtonProps={saveButtonProps}>
+    <Create
+      title={props.mode === "create" ? "Create Filament" : "Clone Filament"}
+      isLoading={formLoading}
+      saveButtonProps={saveButtonProps}
+    >
       <Form {...formProps} layout="vertical">
         <Form.Item
           label="Name"
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 2e92470..3a55eba 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -6,6 +6,7 @@ import {
   EditButton,
   ShowButton,
   DateField,
+  CloneButton,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
@@ -107,8 +108,24 @@ export const FilamentList: 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>
           )}
         />
diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx
index 1e7d5a1..f3c7224 100644
--- a/client/src/pages/spools/create.tsx
+++ b/client/src/pages/spools/create.tsx
@@ -12,7 +12,7 @@ interface CreateOrCloneProps {
 
 export const SpoolCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
-> = (props: IResourceComponentsProps & CreateOrCloneProps) => {
+> = (props) => {
   const { formProps, saveButtonProps, formLoading } = useForm();
 
   if (props.mode === "clone" && formProps.initialValues) {
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index d9c742c..9cc622d 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -99,9 +99,24 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
-              <EditButton hideText size="small" recordItemId={record.id} />
-              <ShowButton hideText size="small" recordItemId={record.id} />
-              <CloneButton 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>
           )}
         />