diff --git a/frontend/components/assets/Transfer.tsx b/frontend/components/assets/Transfer.tsx
new file mode 100644
index 000000000..aa068aa13
--- /dev/null
+++ b/frontend/components/assets/Transfer.tsx
@@ -0,0 +1,134 @@
+// "use client";
+
+// import Link from "next/link";
+// import { usePathname, useRouter } from "next/navigation";
+// import { clsx } from "clsx";
+// import {
+//   LayoutDashboard,
+//   Package,
+//   Users,
+//   Building2,
+//   BarChart3,
+//   Settings,
+//   LogOut,
+//   X,
+// } from "lucide-react";
+// import { useAuthStore } from "@/store/auth.store";
+
+// const navItems = [
+//   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+//   { href: "/assets", label: "Assets", icon: Package },
+//   { href: "/users", label: "Users", icon: Users },
+//   { href: "/departments", label: "Organisation", icon: Building2 },
+//   { href: "/reports", label: "Reports", icon: BarChart3 },
+// ];
+
+// interface SidebarProps {
+//   open?: boolean;
+//   onClose?: () => void;
+// }
+
+// export function Sidebar({ open, onClose }: SidebarProps) {
+//   const pathname = usePathname();
+//   const router = useRouter();
+//   const { logout } = useAuthStore();
+
+//   const handleLogout = async () => {
+//     await logout();
+//     router.push("/login");
+//   };
+
+//   return (
+//     <>
+//       {/* Mobile overlay */}
+//       {open && (
+//         <div
+//           className="fixed inset-0 bg-black/40 z-20 lg:hidden"
+//           onClick={onClose}
+//         />
+//       )}
+
+//       <aside
+//         className={clsx(
+//           "fixed left-0 top-0 h-full w-60 bg-white border-r border-gray-200 flex flex-col z-30 transition-transform duration-200",
+//           "lg:translate-x-0",
+//           open ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
+//         )}
+//       >
+//         {/* Logo */}
+//         <div className="flex items-center justify-between px-5 py-5 border-b border-gray-100">
+//           <div className="flex items-center gap-2.5">
+//             <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-900">
+//               <svg
+//                 className="w-4 h-4 text-white"
+//                 fill="none"
+//                 viewBox="0 0 24 24"
+//                 stroke="currentColor"
+//               >
+//                 <path
+//                   strokeLinecap="round"
+//                   strokeLinejoin="round"
+//                   strokeWidth={2}
+//                   d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+//                 />
+//               </svg>
+//             </div>
+//             <span className="font-semibold text-gray-900 text-sm">AssetsUp</span>
+//           </div>
+//           {onClose && (
+//             <button onClick={onClose} className="lg:hidden text-gray-400 hover:text-gray-600">
+//               <X size={18} />
+//             </button>
+//           )}
+//         </div>
+
+//         {/* Navigation */}
+//         <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
+//           {navItems.map(({ href, label, icon: Icon }) => {
+//             const active = pathname === href || pathname.startsWith(`${href}/`);
+//             return (
+//               <Link
+//                 key={href}
+//                 href={href}
+//                 onClick={onClose}
+//                 className={clsx(
+//                   "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+//                   active
+//                     ? "bg-gray-100 text-gray-900"
+//                     : "text-gray-500 hover:text-gray-900 hover:bg-gray-50",
+//                 )}
+//               >
+//                 <Icon size={17} />
+//                 {label}
+//               </Link>
+//             );
+//           })}
+//         </nav>
+
+//         {/* Bottom: Settings + Logout */}
+//         <div className="px-3 py-4 border-t border-gray-100 space-y-0.5">
+//           <Link
+//             href="/settings"
+//             onClick={onClose}
+//             className={clsx(
+//               "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+//               pathname.startsWith("/settings")
+//                 ? "bg-gray-100 text-gray-900"
+//                 : "text-gray-500 hover:text-gray-900 hover:bg-gray-50",
+//             )}
+//           >
+//             <Settings size={17} />
+//             Settings
+//           </Link>
+//           <button
+//             onClick={handleLogout}
+//             className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50 transition-colors"
+//           >
+//             <LogOut size={17} />
+//             Logout
+//           </button>
+//         </div>
+//       </aside>
+//     </>
+//   );
+// }
diff --git a/frontend/components/assets/vote.tsx b/frontend/components/assets/vote.tsx
new file mode 100644
index 000000000..761980a58
--- /dev/null
+++ b/frontend/components/assets/vote.tsx
@@ -0,0 +1,257 @@
+// // frontend/components/assets/create-asset-modal.tsx
+// "use client";
+
+// import { useForm } from "react-hook-form";
+// import { zodResolver } from "@hookform/resolvers/zod";
+// import { z } from "zod";
+// import { X } from "lucide-react";
+// import { Button } from "@/components/ui/button";
+// import { Input } from "@/components/ui/input";
+// import { useCreateAsset } from "@/lib/query/hooks/useAssets";
+// import { useDepartments } from "@/lib/query/hooks/useAsset";
+// import { useCategories } from "@/lib/query/hooks/useAssets";
+// import { AssetStatus, AssetCondition } from "@/lib/query/types/asset";
+
+// const schema = z.object({
+//   name: z.string().min(1, "Asset name is required"),
+//   categoryId: z.string().min(1, "Category is required"),
+//   departmentId: z.string().min(1, "Department is required"),
+//   serialNumber: z.string().optional(),
+//   manufacturer: z.string().optional(),
+//   model: z.string().optional(),
+//   location: z.string().optional(),
+//   condition: z.nativeEnum(AssetCondition).optional(),
+//   status: z.nativeEnum(AssetStatus).optional(),
+//   purchasePrice: z.string().optional(),
+//   notes: z.string().optional(),
+// });
+
+// type FormValues = z.infer<typeof schema>;
+
+// interface Props {
+//   onClose: () => void;
+//   onSuccess?: () => void;
+// }
+
+// export function CreateAssetModal({ onClose, onSuccess }: Props) {
+//   const { data: departments = [] } = useDepartments();
+//   const { data: categories = [] } = useCategories();
+//   const createAsset = useCreateAsset();
+
+//   const {
+//     register,
+//     handleSubmit,
+//     setError,
+//     formState: { errors },
+//   } = useForm<FormValues>({
+//     resolver: zodResolver(schema),
+//     defaultValues: {
+//       condition: AssetCondition.NEW,
+//       status: AssetStatus.ACTIVE,
+//     },
+//   });
+
+//   const onSubmit = async (values: FormValues) => {
+//     try {
+//       await createAsset.mutateAsync({
+//         name: values.name,
+//         categoryId: values.categoryId,
+//         departmentId: values.departmentId,
+//         serialNumber: values.serialNumber || undefined,
+//         manufacturer: values.manufacturer || undefined,
+//         model: values.model || undefined,
+//         location: values.location || undefined,
+//         condition: values.condition,
+//         status: values.status,
+//         purchasePrice: values.purchasePrice
+//           ? Number(values.purchasePrice)
+//           : undefined,
+//         notes: values.notes || undefined,
+//       });
+//       onSuccess?.();
+//       onClose();
+//     } catch (err: unknown) {
+//       const message =
+//         (err as { response?: { data?: { message?: string } } })?.response?.data
+//           ?.message || "Failed to register asset.";
+//       setError("root", { message });
+//     }
+//   };
+
+//   return (
+//     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+//       {/* Backdrop */}
+//       <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+//       {/* Modal */}
+//       <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
+//         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white">
+//           <h2 className="text-base font-semibold text-gray-900">
+//             Register New Asset
+//           </h2>
+//           <button
+//             onClick={onClose}
+//             className="text-gray-400 hover:text-gray-600"
+//           >
+//             <X size={20} />
+//           </button>
+//         </div>
+
+//         <form onSubmit={handleSubmit(onSubmit)} className="px-6 py-5 space-y-4">
+//           <Input
+//             id="name"
+//             label="Asset Name *"
+//             placeholder='e.g. MacBook Pro 16"'
+//             {...register("name")}
+//             error={errors.name?.message}
+//           />
+
+//           <div className="grid grid-cols-2 gap-3">
+//             {/* Category */}
+//             <div className="flex flex-col gap-1">
+//               <label className="text-sm font-medium text-gray-700">
+//                 Category *
+//               </label>
+//               <select
+//                 {...register("categoryId")}
+//                 className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+//               >
+//                 <option value="">Select category</option>
+//                 {categories.map((c) => (
+//                   <option key={c.id} value={c.id}>
+//                     {c.name}
+//                   </option>
+//                 ))}
+//               </select>
+//               {errors.categoryId && (
+//                 <p className="text-xs text-red-500">
+//                   {errors.categoryId.message}
+//                 </p>
+//               )}
+//             </div>
+
+//             {/* Department */}
+//             <div className="flex flex-col gap-1">
+//               <label className="text-sm font-medium text-gray-700">
+//                 Department *
+//               </label>
+//               <select
+//                 {...register("departmentId")}
+//                 className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+//               >
+//                 <option value="">Select department</option>
+//                 {departments.map((d) => (
+//                   <option key={d.id} value={d.id}>
+//                     {d.name}
+//                   </option>
+//                 ))}
+//               </select>
+//               {errors.departmentId && (
+//                 <p className="text-xs text-red-500">
+//                   {errors.departmentId.message}
+//                 </p>
+//               )}
+//             </div>
+//           </div>
+
+//           <div className="grid grid-cols-2 gap-3">
+//             <Input
+//               id="serialNumber"
+//               label="Serial Number"
+//               placeholder="SN-12345"
+//               {...register("serialNumber")}
+//             />
+//             <Input
+//               id="location"
+//               label="Location"
+//               placeholder="Floor 2, Room 204"
+//               {...register("location")}
+//             />
+//           </div>
+
+//           <div className="grid grid-cols-2 gap-3">
+//             <Input
+//               id="manufacturer"
+//               label="Manufacturer"
+//               placeholder="Apple"
+//               {...register("manufacturer")}
+//             />
+//             <Input
+//               id="model"
+//               label="Model"
+//               placeholder="MacBook Pro"
+//               {...register("model")}
+//             />
+//           </div>
+
+//           <div className="grid grid-cols-2 gap-3">
+//             {/* Condition */}
+//             <div className="flex flex-col gap-1">
+//               <label className="text-sm font-medium text-gray-700">
+//                 Condition
+//               </label>
+//               <select
+//                 {...register("condition")}
+//                 className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900"
+//               >
+//                 {Object.values(AssetCondition).map((c) => (
+//                   <option key={c} value={c}>
+//                     {c.charAt(0) + c.slice(1).toLowerCase()}
+//                   </option>
+//                 ))}
+//               </select>
+//             </div>
+
+//             <Input
+//               id="purchasePrice"
+//               label="Purchase Price ($)"
+//               type="number"
+//               placeholder="0.00"
+//               {...register("purchasePrice")}
+//             />
+//           </div>
+
+//           <div className="flex flex-col gap-1">
+//             <label
+//               htmlFor="notes"
+//               className="text-sm font-medium text-gray-700"
+//             >
+//               Notes
+//             </label>
+//             <textarea
+//               id="notes"
+//               rows={3}
+//               placeholder="Any additional notes..."
+//               {...register("notes")}
+//               className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 resize-none"
+//             />
+//           </div>
+
+//           {errors.root && (
+//             <p className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
+//               {errors.root.message}
+//             </p>
+//           )}
+
+//           <div className="flex gap-3 pt-2">
+//             <Button
+//               type="button"
+//               variant="outline"
+//               className="flex-1"
+//               onClick={onClose}
+//             >
+//               Cancel
+//             </Button>
+//             <Button
+//               type="submit"
+//               className="flex-1"
+//               loading={createAsset.isPending}
+//             >
+//               Register Asset
+//             </Button>
+//           </div>
+//         </form>
+//       </div>
+//     </div>
+//   );
+// }