diff --git a/elebox-core/src/category.rs b/elebox-core/src/category.rs
index 34248bf..8b02b8b 100644
--- a/elebox-core/src/category.rs
+++ b/elebox-core/src/category.rs
@@ -87,7 +87,20 @@ impl<'a> CategoryManager<'a> {
             ));
         }
 
-        let db_category = self.to_db_category(new_category)?;
+        // Normalize
+        let mut cat = Category {
+            name: new_category.name.clone(),
+            alias: new_category.alias.clone(),
+            parent: match &new_category.parent {
+                Some(p) => match p.as_str() {
+                    "" => None,
+                    _ => Some(p.to_string()),
+                },
+                None => None,
+            },
+        };
+
+        let db_category = self.to_db_category(&cat)?;
         self.db.update_category(ori_name, &db_category);
         Ok(())
     }
@@ -127,7 +140,20 @@ impl<'a> CategoryManager<'a> {
             ));
         }
 
-        let db_category = self.to_db_category(category)?;
+        // Normalize
+        let mut cat = Category {
+            name: category.name.clone(),
+            alias: category.alias.clone(),
+            parent: match &category.parent {
+                Some(p) => match p.as_str() {
+                    "" => None,
+                    _ => Some(p.to_string()),
+                },
+                None => None,
+            },
+        };
+
+        let db_category = self.to_db_category(&cat)?;
         self.db.add_category(&db_category);
         Ok(())
     }
diff --git a/elebox-core/src/db.rs b/elebox-core/src/db.rs
index a29eba9..1e22457 100644
--- a/elebox-core/src/db.rs
+++ b/elebox-core/src/db.rs
@@ -347,7 +347,7 @@ impl<'a> Database for JammDatabase<'a> {
     }
 
     fn update_mfr(&self, ori_name: &str, new: &DbManufacturer) {
-        if let Some(id) = self.get_package_id(ori_name) {
+        if let Some(id) = self.get_mfr_id(ori_name) {
             self.update_item(MFR_BUCKET, &id, new);
         }
     }
diff --git a/elebox-tauri/package.json b/elebox-tauri/package.json
index 41ec1ca..a131835 100644
--- a/elebox-tauri/package.json
+++ b/elebox-tauri/package.json
@@ -1,7 +1,7 @@
 {
   "name": "elebox",
   "private": true,
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "type": "module",
   "scripts": {
     "tauri dev": "tauri dev",
diff --git a/elebox-tauri/src-tauri/Cargo.toml b/elebox-tauri/src-tauri/Cargo.toml
index 77f7cb7..48de272 100644
--- a/elebox-tauri/src-tauri/Cargo.toml
+++ b/elebox-tauri/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "elebox"
-version = "1.0.0-beta.1"
+version = "1.0.0-beta.2"
 license = "MIT OR Apache-2.0"
 description = "Lightweight personal electronic parts inventory management tool"
 repository = "https://github.com/ziteh/elebox"
diff --git a/elebox-tauri/src-tauri/src/main.rs b/elebox-tauri/src-tauri/src/main.rs
index c5a2a63..00b831d 100644
--- a/elebox-tauri/src-tauri/src/main.rs
+++ b/elebox-tauri/src-tauri/src/main.rs
@@ -50,11 +50,11 @@ fn update_part(path: tauri::State<DbPath>, ori_name: &str, new_item: Part) -> Re
 }
 
 #[tauri::command(rename_all = "snake_case")]
-fn del_part(path: tauri::State<DbPath>, item: &str) -> Result<String, String> {
+fn del_part(path: tauri::State<DbPath>, name: &str) -> Result<String, String> {
     let p = GET!(path);
     let db = elebox_core::JammDatabase::new(&p);
     let mgr = elebox_core::PartManager::new(&db);
-    mgr.delete(item).map_err(|e| e.to_string())
+    mgr.delete(name).map_err(|e| e.to_string())
 }
 
 #[tauri::command(rename_all = "snake_case")]
diff --git a/elebox-tauri/src/App.vue b/elebox-tauri/src/App.vue
index c046190..ae69481 100644
--- a/elebox-tauri/src/App.vue
+++ b/elebox-tauri/src/App.vue
@@ -28,11 +28,6 @@
           title="Manufacturers"
           :to="{ name: 'mfrs' }"
         ></v-list-item>
-        <v-list-item
-          prepend-icon="mdi-file-tree"
-          title="Tree"
-          :to="{ name: 'tree' }"
-        ></v-list-item>
         <v-list-item
           prepend-icon="mdi-cog"
           title="Settings"
diff --git a/elebox-tauri/src/components/CategoryField.vue b/elebox-tauri/src/components/CategoryField.vue
index 90ca1bd..c3b65b7 100644
--- a/elebox-tauri/src/components/CategoryField.vue
+++ b/elebox-tauri/src/components/CategoryField.vue
@@ -21,13 +21,22 @@ async function update() {
     return;
   }
 
+  if (category.value.parent === "") {
+    category.value.parent = undefined; // To root
+  }
+
   await Db.update(props.origin_name, category.value);
   await list();
 }
 
 async function list() {
   const data = await Db.list();
+
+  if (props.origin_name) {
+    data.splice(0, 0, { name: "" }); // Root
+  }
   Object.assign(categories, data);
+
   console.debug(`get categories: ${categories.length}`);
 }
 
diff --git a/elebox-tauri/src/components/ManufacturerList.vue b/elebox-tauri/src/components/ManufacturerList.vue
index b12cc33..0dc7818 100644
--- a/elebox-tauri/src/components/ManufacturerList.vue
+++ b/elebox-tauri/src/components/ManufacturerList.vue
@@ -30,11 +30,7 @@ onMounted(list);
       <tr v-for="(m, i) in mfrs" :key="i">
         <td>
           {{ m.name }}
-          <a
-            v-if="m.url !== '' && m.url !== undefined"
-            :title="m.url"
-            :href="m.url"
-            target="_blank"
+          <a v-if="m.url" :title="m.url" :href="m.url" target="_blank"
             ><v-icon>mdi-open-in-new</v-icon>
           </a>
         </td>
diff --git a/elebox-tauri/src/components/PackageField.vue b/elebox-tauri/src/components/PackageField.vue
index 27f4509..d7b0ccf 100644
--- a/elebox-tauri/src/components/PackageField.vue
+++ b/elebox-tauri/src/components/PackageField.vue
@@ -1,9 +1,24 @@
 <script setup lang="ts">
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
+import { PkgType } from "../interface"; // TODO to db_cmd_package
 
 const props = defineProps<{ origin_name?: string }>();
-const pkg = ref<Db.Package>({ name: "", pkg_type: "", alias: "" });
+const pkg = ref<Db.Package>({ name: "", pkg_type: PkgType.Smt, alias: "" });
+const pkg_type_input = ref<string>("SMT");
+
+function setPkgType(input: string): PkgType {
+  // --noImplicitAny
+  // pkg.value.pkg_type = PkgType[pkg_type.value as keyof typeof PkgType];
+
+  if (input === "SMT") {
+    return PkgType.Smt;
+  } else if (input === "THT") {
+    return PkgType.Tht;
+  }
+
+  return PkgType.Others;
+}
 
 async function add() {
   if (pkg.value === undefined) {
@@ -11,6 +26,7 @@ async function add() {
     return;
   }
 
+  pkg.value.pkg_type = setPkgType(pkg_type_input.value);
   await Db.add(pkg.value);
 }
 
@@ -19,18 +35,26 @@ async function update() {
     return;
   }
 
+  pkg.value.pkg_type = setPkgType(pkg_type_input.value);
   await Db.update(props.origin_name, pkg.value);
 }
 
 async function get(name: string) {
   const data = await Db.get(name);
   pkg.value = data as Db.Package;
+
+  if (pkg.value.pkg_type == PkgType.Smt) {
+    pkg_type_input.value = "SMT";
+  } else if (pkg.value.pkg_type == PkgType.Tht) {
+    pkg_type_input.value = "THT";
+  } else {
+    pkg_type_input.value = "Others";
+  }
 }
 
 onMounted(() => {
   if (props.origin_name !== undefined) {
     get(props.origin_name);
-    pkg.value.pkg_type = pkg.value.pkg_type.toUpperCase(); // TODO no effect
   }
 });
 </script>
@@ -43,14 +67,14 @@ onMounted(() => {
           label="Type"
           :items="['SMT', 'THT', 'Others']"
           variant="outlined"
-          v-model="pkg.pkg_type"
+          v-model="pkg_type_input"
           :rules="[(v: any) => !!v || 'Required']"
           required
         ></v-select>
         <v-text-field
           label="Name"
           variant="outlined"
-          v-model="pkg.name"
+          v-model.trim="pkg.name"
           placeholder="SOT-23"
           :rules="[(v: any) => !!v || 'Required']"
           required
@@ -58,7 +82,7 @@ onMounted(() => {
         <v-text-field
           label="Alias"
           variant="outlined"
-          v-model="pkg.alias"
+          v-model.trim="pkg.alias"
           placeholder=""
         ></v-text-field>
 
diff --git a/elebox-tauri/src/components/PartCustomField.vue b/elebox-tauri/src/components/PartCustomField.vue
index 950c1df..80dbdc4 100644
--- a/elebox-tauri/src/components/PartCustomField.vue
+++ b/elebox-tauri/src/components/PartCustomField.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const custom_field = ref<CustomField>({
   name: props.name,
-  field_type: props.field_type,
+  field_type: props.field_type || "Normal",
   value: props.value,
 });
 
@@ -31,43 +31,79 @@ function emitAdd() {
     return;
   }
 
-  emit("add", { new: custom_field.value });
+  const clone: CustomField = {
+    name: custom_field.value.name,
+    field_type: custom_field.value.field_type,
+    value: custom_field.value.value ?? "",
+  };
+
+  // Clear
+  custom_field.value = {
+    name: "",
+    field_type: "Normal",
+    value: "",
+  };
+
+  emit("add", { new: clone });
 }
 </script>
 
 <template>
-  <v-select
-    label="Type"
-    :items="['Normal', 'Link']"
-    variant="outlined"
-    v-model="custom_field.field_type"
-  ></v-select>
-  <v-text-field
-    label="Name"
-    variant="outlined"
-    v-model.trim="custom_field.name"
-    placeholder=""
-  ></v-text-field>
-  <v-text-field
-    label="Value"
-    variant="outlined"
-    v-model.trim="custom_field.value"
-    placeholder=""
-  ></v-text-field>
+  <v-form @submit.prevent>
+    <v-row class="ma-2 ga-8">
+      <v-select
+        v-if="props.create"
+        label="Type"
+        :items="['Normal', 'Link']"
+        variant="outlined"
+        v-model="custom_field.field_type"
+        :rules="[(v: any) => !!v || 'Required']"
+        required
+        :readonly="!props.create"
+      ></v-select>
+      <v-text-field
+        v-else
+        label="Type"
+        variant="outlined"
+        v-model.trim="custom_field.field_type"
+        required
+        readonly
+      ></v-text-field>
+      <v-text-field
+        label="Name"
+        variant="outlined"
+        v-model.trim="custom_field.name"
+        placeholder=""
+        :rules="[(v: any) => !!v || 'Required']"
+        required
+        :readonly="!props.create"
+      ></v-text-field>
+      <v-text-field
+        label="Value"
+        variant="outlined"
+        v-model.trim="custom_field.value"
+        placeholder=""
+        :readonly="!props.create"
+        :dirty="!props.create"
+      ></v-text-field>
 
-  <v-btn
-    v-if="!props.create"
-    density="comfortable"
-    icon="mdi-trash-can-outline"
-    title="Delete"
-    @click="emitDel()"
-  ></v-btn>
-  <v-btn
-    v-if="props.create"
-    density="comfortable"
-    icon="mdi-plus"
-    title="Add"
-    color="green"
-    @click="emitAdd()"
-  ></v-btn>
+      <v-btn
+        v-if="props.create"
+        density="comfortable"
+        icon="mdi-plus"
+        title="Add"
+        color="green"
+        type="submit"
+        @click="emitAdd()"
+      ></v-btn>
+      <v-btn
+        v-else
+        density="comfortable"
+        icon="mdi-trash-can-outline"
+        title="Delete"
+        type="submit"
+        @click="emitDel()"
+      ></v-btn>
+    </v-row>
+  </v-form>
 </template>
diff --git a/elebox-tauri/src/components/PartDel.vue b/elebox-tauri/src/components/PartDel.vue
index e7eb4c0..d84f409 100644
--- a/elebox-tauri/src/components/PartDel.vue
+++ b/elebox-tauri/src/components/PartDel.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/tauri";
+import { DbPart as Db } from "../db_cmd_part";
 
-defineProps({
-  part: String,
-});
+const props = defineProps<{ part: string }>();
 
-async function partDel(part: string) {
-  console.debug(`Part delete: ${part}`);
-  await invoke("part_del", { part });
+async function remove() {
+  await Db.remove(props.part);
 }
 </script>
 
@@ -15,7 +12,7 @@ async function partDel(part: string) {
   <v-btn
     density="comfortable"
     icon="mdi-trash-can-outline"
-    :title="`Delete: ${part}`"
-    @click="partDel(part!)"
+    :title="`Delete: ${props.part}`"
+    @click="remove"
   ></v-btn>
 </template>
diff --git a/elebox-tauri/src/components/PartSupplier.vue b/elebox-tauri/src/components/PartSupplier.vue
index 8f10dc5..9a574b9 100644
--- a/elebox-tauri/src/components/PartSupplier.vue
+++ b/elebox-tauri/src/components/PartSupplier.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { readonly, ref, watch } from "vue";
 import { Supplier } from "../interface";
 
 const props = defineProps<{
@@ -33,50 +33,80 @@ function emitAdd() {
     return;
   }
 
-  emit("add", { new: supplier.value });
+  const clone: Supplier = {
+    name: supplier.value.name,
+    link: supplier.value.link ?? "",
+    note: supplier.value.note ?? "",
+    price: supplier.value.price,
+  };
+
+  // Clear
+  supplier.value = {
+    name: "",
+    link: "",
+    note: "",
+    price: undefined,
+  };
+
+  emit("add", { new: clone });
 }
 </script>
 
 <template>
-  <v-text-field
-    label="Name"
-    variant="outlined"
-    v-model.trim="supplier.name"
-    placeholder=""
-  ></v-text-field>
-  <v-text-field
-    label="Link"
-    variant="outlined"
-    v-model.trim="supplier.link"
-    placeholder="https://"
-  ></v-text-field>
-  <v-text-field
-    label="Price"
-    variant="outlined"
-    v-model.number="supplier.price"
-    type="number"
-    min="0"
-  ></v-text-field>
-  <v-text-field
-    label="Note"
-    variant="outlined"
-    v-model.trim="supplier.note"
-    placeholder=""
-  ></v-text-field>
+  <v-form @submit.prevent>
+    <v-row class="ma-2 ga-8">
+      <v-text-field
+        label="Name"
+        variant="outlined"
+        v-model.trim="supplier.name"
+        placeholder=""
+        :rules="[(v: any) => !!v || 'Required']"
+        required
+        :readonly="!props.create"
+      ></v-text-field>
+      <v-text-field
+        label="Link"
+        variant="outlined"
+        v-model.trim="supplier.link"
+        placeholder="https://"
+        :readonly="!props.create"
+        :dirty="!props.create"
+      ></v-text-field>
+      <v-text-field
+        label="Price"
+        variant="outlined"
+        v-model.number="supplier.price"
+        type="number"
+        min="0"
+        :readonly="!props.create"
+        :dirty="!props.create"
+      ></v-text-field>
+      <v-text-field
+        label="Note"
+        variant="outlined"
+        v-model.trim="supplier.note"
+        placeholder=""
+        :readonly="!props.create"
+        :dirty="!props.create"
+      ></v-text-field>
 
-  <v-btn
-    v-if="!props.create"
-    density="comfortable"
-    icon="mdi-trash-can-outline"
-    title="Delete"
-    @click="emitDel()"
-  ></v-btn>
-  <v-btn
-    v-if="props.create"
-    density="comfortable"
-    icon="mdi-plus"
-    title="Add"
-    color="green"
-    @click="emitAdd()"
-  ></v-btn>
+      <v-btn
+        v-if="props.create"
+        density="comfortable"
+        icon="mdi-plus"
+        title="Add"
+        color="green"
+        type="submit"
+        @click="emitAdd()"
+      ></v-btn>
+      <v-btn
+        v-else
+        density="comfortable"
+        icon="mdi-trash-can-outline"
+        title="Delete"
+        type="submit"
+        @click="emitDel()"
+      ></v-btn>
+    </v-row>
+  </v-form>
 </template>
diff --git a/elebox-tauri/src/interface.ts b/elebox-tauri/src/interface.ts
index 8a01e20..36883a2 100644
--- a/elebox-tauri/src/interface.ts
+++ b/elebox-tauri/src/interface.ts
@@ -1,54 +1,59 @@
-
 export interface CustomField {
-    name: string;
-    field_type: string; // TODO enum
-    value: string;
+  name: string;
+  field_type: string; // TODO enum
+  value: string;
 }
 
 export interface Supplier {
-    name: string;
-    link: string;
-    price?: number;
-    note: string;
+  name: string;
+  link: string;
+  price?: number;
+  note: string;
 }
 
 export interface Part {
-    name: string;
-    quantity: number;
-    category: string;
-    package?: string;
-    package_detail?: string;
-    mfr?: string;
-    location?: string;
-    alias?: string;
-    description?: string;
-    mfr_no?: string;
-    datasheet_link?: string;
-    product_link?: string;
-    image_link?: string;
-    custom_fields: CustomField[];
-    suppliers: Supplier[];
+  name: string;
+  quantity: number;
+  category: string;
+  package?: string;
+  package_detail?: string;
+  mfr?: string;
+  location?: string;
+  alias?: string;
+  description?: string;
+  mfr_no?: string;
+  datasheet_link?: string;
+  product_link?: string;
+  image_link?: string;
+  custom_fields: CustomField[];
+  suppliers: Supplier[];
 }
 
 export interface Category {
-    name: string;
-    parent?: string;
-    alias?: string;
+  name: string;
+  parent?: string;
+  alias?: string;
+}
+
+export enum PkgType {
+  Smt = "Smt",
+  Tht = "Tht",
+  Others = "Others",
 }
 
 export interface Package {
-    name: string;
-    pkg_type: string; // TODO enum
-    alias?: string;
+  name: string;
+  pkg_type: PkgType;
+  alias?: string;
 }
 
 export interface Manufacturer {
-    name: string;
-    alias?: string;
-    url?: string;
+  name: string;
+  alias?: string;
+  url?: string;
 }
 
 export interface TreeNode {
-    name: string;
-    children: TreeNode[];
+  name: string;
+  children: TreeNode[];
 }
diff --git a/elebox-tauri/src/router.ts b/elebox-tauri/src/router.ts
index 2c63f95..447abbe 100644
--- a/elebox-tauri/src/router.ts
+++ b/elebox-tauri/src/router.ts
@@ -58,10 +58,5 @@ export default createRouter({
       name: "update_manufacturer",
       component: () => import("./views/ManufacturerEdit.vue"),
     },
-    {
-      path: "/tree",
-      name: "tree",
-      component: () => import("./views/CategoriesTree.vue"),
-    },
   ],
 });
diff --git a/elebox-tauri/src/styles.css b/elebox-tauri/src/styles.css
index 69718bb..b3bc395 100644
--- a/elebox-tauri/src/styles.css
+++ b/elebox-tauri/src/styles.css
@@ -19,90 +19,30 @@
   --light: #f6f6f6;
 }
 
-.container {
+/* .container {
   margin: 0;
   padding-top: 3vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
-}
+} */
 
-.row {
+/* .row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-}
+} */
 
-.field {
+/* .field {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-}
-
-
-table {
-  text-align: left;
-  border-collapse: collapse;
-}
-
-th,
-td {
-  border: 1px solid #c1c1c1;
-  padding: 3px 10px;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
+} */
 
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button,
-select,
-textarea {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
+.v-btn{
+  text-transform: none;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -126,4 +66,4 @@ button {
   button:active {
     background-color: #0f0f0f69;
   }
-}
\ No newline at end of file
+}
diff --git a/elebox-tauri/src/views/CategoriesTree.vue b/elebox-tauri/src/views/CategoriesTree.vue
index f1b0753..7d8a1a1 100644
--- a/elebox-tauri/src/views/CategoriesTree.vue
+++ b/elebox-tauri/src/views/CategoriesTree.vue
@@ -19,7 +19,5 @@ onMounted(async () => {
 </script>
 
 <template>
-  <v-container>
-    <TreeItem v-if="catNodes.length > 0" :nodes="catNodes" />
-  </v-container>
+  <TreeItem v-if="catNodes.length > 0" :nodes="catNodes" />
 </template>
diff --git a/elebox-tauri/src/views/Category.vue b/elebox-tauri/src/views/Category.vue
index 99a237b..75dbabb 100644
--- a/elebox-tauri/src/views/Category.vue
+++ b/elebox-tauri/src/views/Category.vue
@@ -1,11 +1,24 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import CategoryField from "../components/CategoryField.vue";
 import CategoryList from "../components/CategoryList.vue";
+import CategoriesTree from "./CategoriesTree.vue";
+
+const displayTree = ref(false);
 </script>
 
 <template>
   <v-container>
     <CategoryField />
-    <CategoryList />
+
+    <v-switch
+      label="Display"
+      false-icon="mdi-view-list"
+      true-icon="mdi-file-tree"
+      v-model="displayTree"
+    ></v-switch>
+
+    <CategoryList v-if="!displayTree" />
+    <CategoriesTree v-else />
   </v-container>
 </template>
diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index b121e1b..c81d5c8 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -6,6 +6,7 @@ import { DbPart } from "../db_cmd_part";
 import PartQty from "../components/PartQty.vue";
 import PartDel from "../components/PartDel.vue";
 import ItemEditButton from "../components/ItemEditButton.vue";
+import "../styles.css";
 
 let parts = reactive<Part[]>([]);
 
@@ -55,7 +56,10 @@ onMounted(getParts);
       <tbody>
         <tr v-for="(p, index) in parts" :key="index">
           <td>
-            <v-btn :to="{ name: 'part_detail', params: { name: p.name } }">
+            <v-btn
+              :to="{ name: 'part_detail', params: { name: p.name } }"
+              variant="text"
+            >
               {{ p.name }}</v-btn
             >
           </td>
@@ -67,16 +71,7 @@ onMounted(getParts);
           <td>{{ p.package }}</td>
           <td>{{ p.mfr }}</td>
           <td>
-            <!-- <v-btn
-              density="comfortable"
-              icon="mdi-square-edit-outline"
-              :to="{ name: 'update_part', params: { ori_name: p.name } }"
-            ></v-btn> -->
-
-          <ItemEditButton
-            :path_name="'update_part'"
-            :item_name="p.name"
-          />
+            <ItemEditButton :path_name="'update_part'" :item_name="p.name" />
             <PartDel :part="p.name" />
           </td>
         </tr>
diff --git a/elebox-tauri/src/views/Part.vue b/elebox-tauri/src/views/Part.vue
index 5c6b4fa..7ea5386 100644
--- a/elebox-tauri/src/views/Part.vue
+++ b/elebox-tauri/src/views/Part.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
-import { CustomField, Supplier } from "../interface";
+import { CustomField, PkgType, Supplier } from "../interface";
 import PartCustomField from "../components/PartCustomField.vue";
 import PartSupplier from "../components/PartSupplier.vue";
 import { useRoute } from "vue-router";
@@ -10,7 +10,7 @@ import { DbCategory } from "../db_cmd_category";
 import { DbManufacturer as DbMfr } from "../db_cmd_manufacturer";
 import { DbPackage } from "../db_cmd_package";
 
-const origin_name = ref<string>();
+const origin_name = ref<string>("");
 const part = ref<DbPart.Part>({
   name: "",
   quantity: 0,
@@ -19,7 +19,9 @@ const part = ref<DbPart.Part>({
   suppliers: [],
 });
 
+const qty_input = ref<number | undefined>(undefined);
 const favorite = ref();
+const alert = ref(false);
 
 const new_custom_field = ref<CustomField>({
   name: "",
@@ -41,6 +43,12 @@ let custom_fields = reactive<CustomField[]>([]);
 let suppliers = reactive<Supplier[]>([]);
 
 async function newPart() {
+  if (origin_name.value === undefined || qty_input.value === undefined) {
+    return;
+  }
+
+  part.value.quantity = Math.trunc(qty_input.value);
+
   if (
     part.value.name === "" ||
     part.value.category === "" ||
@@ -49,15 +57,25 @@ async function newPart() {
     return;
   }
 
-  part.value.quantity = Math.trunc(part.value.quantity);
+  if (part.value.mfr === "") {
+    part.value.mfr = undefined;
+  }
+  if (part.value.package === "") {
+    part.value.package = undefined;
+  }
+
+  part.value.custom_fields = custom_fields;
+  part.value.suppliers = suppliers;
   await DbPart.add(part.value);
 }
 
 async function updatePart() {
-  if (origin_name.value === undefined) {
+  if (origin_name.value === undefined || qty_input.value === undefined) {
     return;
   }
 
+  part.value.quantity = Math.trunc(qty_input.value);
+
   if (
     part.value.name === "" ||
     part.value.category === "" ||
@@ -66,6 +84,15 @@ async function updatePart() {
     return;
   }
 
+  if (part.value.mfr === "") {
+    part.value.mfr = undefined;
+  }
+  if (part.value.package === "") {
+    part.value.package = undefined;
+  }
+
+  part.value.custom_fields = custom_fields;
+  part.value.suppliers = suppliers;
   await DbPart.update(origin_name.value, part.value);
 }
 
@@ -77,16 +104,19 @@ async function getCategories() {
 async function getMfrs() {
   const date = await DbMfr.list();
   Object.assign(mfrs, date);
+  mfrs.splice(0, 0, { name: "" });
 }
 
 async function getPackages() {
   const data = await DbPackage.list();
   Object.assign(packages, data);
+  packages.splice(0, 0, { name: "", pkg_type: PkgType.Others });
 }
 
 async function getPart(name: string) {
   const data = await DbPart.get(name);
   part.value = data as DbPart.Part;
+  qty_input.value = part.value.quantity;
   Object.assign(custom_fields, part.value.custom_fields);
   Object.assign(suppliers, part.value.suppliers);
 }
@@ -104,11 +134,6 @@ function handleCustomFieldDel(data: { name: string }) {
 }
 
 function handleCustomFieldAdd(data: { new: CustomField }) {
-  new_custom_field.value = {
-    field_type: "",
-    name: "",
-    value: "",
-  };
   custom_fields.push(data.new);
 }
 
@@ -126,19 +151,16 @@ function handleSupplierDel(data: { name: string }) {
 
 function handleSupplierAdd(data: { new: Supplier }) {
   suppliers.push(data.new);
-  new_supplier.value = {
-    name: "",
-    link: "",
-    note: "",
-    price: undefined,
-  };
 }
 
 const route = useRoute();
 
 onMounted(() => {
-  origin_name.value = route.params.origin_name;
-  if (origin_name.value !== undefined && origin_name.value !== "") {
+  if (
+    route.params.origin_name !== undefined &&
+    route.params.origin_name !== ""
+  ) {
+    origin_name.value = route.params.origin_name; // FIXME
     getPart(origin_name.value);
   }
 
@@ -149,7 +171,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-form fast-fail @submit.prevent>
+  <v-form @submit.prevent>
     <v-container>
       <v-row class="mb-3 ga-8" align="center">
         <v-btn v-if="origin_name == ''" type="submit" @click="newPart"
@@ -176,7 +198,7 @@ onMounted(() => {
         <v-text-field
           label="Quantity"
           variant="outlined"
-          v-model.number="part.quantity"
+          v-model.number="qty_input"
           placeholder="15"
           :rules="[(v: any) => !!v || 'Required']"
           required
@@ -264,9 +286,9 @@ onMounted(() => {
         ></v-textarea>
       </v-row>
 
-      <v-card title="Custom Fields" variant="flat">
+      <v-card title="Custom Fields" variant="flat" class="mb-2">
         <v-container>
-          <v-row class="ga-8" v-for="cf in custom_fields">
+          <v-row class="ma-2" v-for="cf in custom_fields">
             <PartCustomField
               :field_type="cf.field_type"
               :name="cf.name"
@@ -275,7 +297,7 @@ onMounted(() => {
               @del="handleCustomFieldDel"
             />
           </v-row>
-          <v-row class="ga-8">
+          <v-row class="ma-2">
             <PartCustomField
               :field_type="new_custom_field.field_type"
               :name="new_custom_field.name"
@@ -290,7 +312,7 @@ onMounted(() => {
 
       <v-card title="Suppliers" variant="flat">
         <v-container>
-          <v-row class="ga-8" v-for="s in suppliers">
+          <v-row class="ma-2" v-for="s in suppliers">
             <PartSupplier
               :name="s.name"
               :link="s.link"
@@ -300,7 +322,7 @@ onMounted(() => {
               @del="handleSupplierDel"
             />
           </v-row>
-          <v-row class="ga-8">
+          <v-row class="ma-2">
             <PartSupplier
               :name="new_supplier.name"
               :link="new_supplier.link"
diff --git a/elebox-tauri/src/views/Settings.vue b/elebox-tauri/src/views/Settings.vue
index d8be1bb..61f6e01 100644
--- a/elebox-tauri/src/views/Settings.vue
+++ b/elebox-tauri/src/views/Settings.vue
@@ -32,7 +32,7 @@ async function import_csv() {
     <div class="flex-fill"></div>
     <div class="d-flex align-end ga-2 mt-auto">
       <v-label>Version</v-label>
-      <code>1.0.0-beta.1</code>
+      <code>1.0.0-beta.2</code>
     </div>
   </v-container>
 </template>