diff --git a/frontend/app/(dashboard)/assets/[id]/page.tsx b/frontend/app/(dashboard)/assets/[id]/page.tsx
index 3de49715..c53d409d 100644
--- a/frontend/app/(dashboard)/assets/[id]/page.tsx
+++ b/frontend/app/(dashboard)/assets/[id]/page.tsx
@@ -8,6 +8,9 @@ import { Button } from "@/components/ui/button";
 import { StatusBadge } from "@/components/assets/status-badge";
 import { ConditionBadge } from "@/components/assets/condition-badge";
 import { useAsset, useAssetHistory } from "@/lib/query/hooks/useAsset";
+import { useAuthStore } from "@/store/auth.store";
+import { TransferAssetDialog } from "@/components/assets/transfer-dialog";
+import { MoveHorizontal } from "lucide-react";
 
 type Tab = "overview" | "history" | "documents";
 
@@ -15,6 +18,8 @@ export default function AssetDetailPage() {
   const { id } = useParams<{ id: string }>();
   const router = useRouter();
   const [tab, setTab] = useState<Tab>("overview");
+  const [isTransferOpen, setIsTransferOpen] = useState(false);
+  const { user } = useAuthStore();
 
   const { data: asset, isLoading } = useAsset(id);
   const { data: history = [] } = useAssetHistory(id);
@@ -73,6 +78,16 @@ export default function AssetDetailPage() {
               <ConditionBadge condition={asset.condition} />
             </div>
           </div>
+
+          {(user?.role === 'ADMIN' || user?.role === 'MANAGER') && (
+            <Button
+              onClick={() => setIsTransferOpen(true)}
+              className="flex items-center gap-2"
+            >
+              <MoveHorizontal size={16} />
+              Transfer Asset
+            </Button>
+          )}
         </div>
       </div>
 
@@ -82,11 +97,10 @@ export default function AssetDetailPage() {
           <button
             key={key}
             onClick={() => setTab(key)}
-            className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${
-              tab === key
+            className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${tab === key
                 ? "border-gray-900 text-gray-900"
                 : "border-transparent text-gray-500 hover:text-gray-700"
-            }`}
+              }`}
           >
             {icon}
             {label}
@@ -235,6 +249,14 @@ export default function AssetDetailPage() {
       )}
 
       {tab === "documents" && <AssetDocumentsSection assetId={id} />}
+
+      {isTransferOpen && (
+        <TransferAssetDialog
+          assetId={id}
+          assetName={asset.name}
+          onClose={() => setIsTransferOpen(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/app/(dashboard)/departments/page.tsx b/frontend/app/(dashboard)/departments/page.tsx
new file mode 100644
index 00000000..20e9951a
--- /dev/null
+++ b/frontend/app/(dashboard)/departments/page.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+    useDepartmentsList,
+    useCreateDepartment,
+    useDeleteDepartment,
+    useCategories,
+    useCreateCategory,
+    useDeleteCategory
+} from '@/lib/query/hooks/query.hook';
+import { DepartmentWithCount, CategoryWithCount } from '@/lib/api/assets';
+import { Plus, Trash2, LayoutGrid, Tags, Loader2, AlertCircle } from 'lucide-react';
+import { toast } from 'react-toastify';
+
+type TabType = 'departments' | 'categories';
+
+export default function DepartmentsPage() {
+    const [activeTab, setActiveTab] = useState<TabType>('departments');
+    const [isAdding, setIsAdding] = useState(false);
+    const [formData, setFormData] = useState({ name: '', description: '' });
+
+    const { data: departments, isLoading: isLoadingDepts } = useDepartmentsList();
+    const { data: categories, isLoading: isLoadingCats } = useCategories();
+
+    const createDept = useCreateDepartment();
+    const deleteDept = useDeleteDepartment();
+    const createCat = useCreateCategory();
+    const deleteCat = useDeleteCategory();
+
+    const handleCreate = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formData.name.trim()) return;
+
+        try {
+            if (activeTab === 'departments') {
+                await createDept.mutateAsync(formData);
+            } else {
+                await createCat.mutateAsync(formData);
+            }
+            toast.success(`${activeTab === 'departments' ? 'Department' : 'Category'} created successfully`);
+            setFormData({ name: '', description: '' });
+            setIsAdding(false);
+        } catch (err: any) {
+            toast.error(err.message || `Failed to create ${activeTab}`);
+        }
+    };
+
+    const handleDelete = async (id: string, name: string) => {
+        const confirmMessage = `Are you sure you want to delete ${name}? Assets in this ${activeTab === 'departments' ? 'department' : 'category'} will need to be reassigned/recategorised.`;
+        if (!window.confirm(confirmMessage)) return;
+
+        try {
+            if (activeTab === 'departments') {
+                await deleteDept.mutateAsync(id);
+            } else {
+                await deleteCat.mutateAsync(id);
+            }
+            toast.success(`${activeTab === 'departments' ? 'Department' : 'Category'} deleted successfully`);
+        } catch (err: any) {
+            toast.error(err.message || `Failed to delete ${activeTab}`);
+        }
+    };
+
+    const items = activeTab === 'departments' ? departments : categories;
+    const isLoading = activeTab === 'departments' ? isLoadingDepts : isLoadingCats;
+
+    return (
+        <div className="p-6 max-w-7xl mx-auto space-y-6">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <h1 className="text-3xl font-bold tracking-tight">Management</h1>
+
+                <div className="flex bg-gray-100 p-1 rounded-lg">
+                    <button
+                        onClick={() => { setActiveTab('departments'); setIsAdding(false); }}
+                        className={`flex items-center gap-2 px-4 py-2 rounded-md transition-all ${activeTab === 'departments'
+                                ? 'bg-white shadow-sm text-blue-600 font-medium'
+                                : 'text-gray-600 hover:text-gray-900'
+                            }`}
+                    >
+                        <LayoutGrid size={18} />
+                        Departments
+                        {departments && <span className="ml-1 text-xs bg-gray-200 px-2 py-0.5 rounded-full text-gray-600">{departments.length}</span>}
+                    </button>
+                    <button
+                        onClick={() => { setActiveTab('categories'); setIsAdding(false); }}
+                        className={`flex items-center gap-2 px-4 py-2 rounded-md transition-all ${activeTab === 'categories'
+                                ? 'bg-white shadow-sm text-blue-600 font-medium'
+                                : 'text-gray-600 hover:text-gray-900'
+                            }`}
+                    >
+                        <Tags size={18} />
+                        Categories
+                        {categories && <span className="ml-1 text-xs bg-gray-200 px-2 py-0.5 rounded-full text-gray-600">{categories.length}</span>}
+                    </button>
+                </div>
+            </div>
+
+            <div className="flex justify-between items-center py-4 border-b">
+                <h2 className="text-xl font-semibold capitalize">
+                    {activeTab} ({items?.length || 0})
+                </h2>
+                <button
+                    onClick={() => setIsAdding(!isAdding)}
+                    className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+                >
+                    <Plus size={20} />
+                    Add {activeTab === 'departments' ? 'Department' : 'Category'}
+                </button>
+            </div>
+
+            {isAdding && (
+                <form onSubmit={handleCreate} className="bg-white p-6 rounded-xl shadow-sm border animate-in fade-in slide-in-from-top-4 duration-300">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="space-y-1">
+                            <label className="text-sm font-medium text-gray-700">Name *</label>
+                            <input
+                                required
+                                type="text"
+                                placeholder="Enter name"
+                                value={formData.name}
+                                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
+                            />
+                            {activeTab === 'departments' ? createDept.isError && (
+                                <p className="text-xs text-red-500 flex items-center gap-1 mt-1">
+                                    <AlertCircle size={12} /> {createDept.error?.message}
+                                </p>
+                            ) : createCat.isError && (
+                                <p className="text-xs text-red-500 flex items-center gap-1 mt-1">
+                                    <AlertCircle size={12} /> {createCat.error?.message}
+                                </p>
+                            )}
+                        </div>
+                        <div className="space-y-1">
+                            <label className="text-sm font-medium text-gray-700">Description (Optional)</label>
+                            <input
+                                type="text"
+                                placeholder="Enter description"
+                                value={formData.description}
+                                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
+                            />
+                        </div>
+                    </div>
+                    <div className="flex justify-end gap-3 mt-6">
+                        <button
+                            type="button"
+                            onClick={() => setIsAdding(false)}
+                            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={createDept.isPending || createCat.isPending}
+                            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-6 py-2 rounded-lg font-medium transition-colors"
+                        >
+                            {(createDept.isPending || createCat.isPending) && <Loader2 size={18} className="animate-spin" />}
+                            Save {activeTab === 'departments' ? 'Department' : 'Category'}
+                        </button>
+                    </div>
+                </form>
+            )}
+
+            {isLoading ? (
+                <div className="flex flex-col items-center justify-center py-20 text-gray-400 space-y-4">
+                    <Loader2 size={40} className="animate-spin text-blue-500" />
+                    <p>Loading {activeTab}...</p>
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {items?.map((item: any) => (
+                        <div key={item.id} className="group relative bg-white p-6 rounded-xl border hover:shadow-md transition-all duration-300">
+                            <div className="flex justify-between items-start mb-4">
+                                <h3 className="text-lg font-semibold text-gray-900 truncate pr-8">{item.name}</h3>
+                                <button
+                                    onClick={() => handleDelete(item.id, item.name)}
+                                    className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
+                                    title="Delete"
+                                >
+                                    <Trash2 size={18} />
+                                </button>
+                            </div>
+                            <p className="text-sm text-gray-500 leading-relaxed min-h-[40px] mb-4">
+                                {item.description || 'No description provided.'}
+                            </p>
+                            <div className="flex items-center justify-between pt-4 border-t border-gray-50">
+                                <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Asset Count</span>
+                                <span className="text-lg font-bold text-blue-600">{item.assetCount || 0}</span>
+                            </div>
+                        </div>
+                    ))}
+                    {!isLoading && items?.length === 0 && (
+                        <div className="col-span-full bg-gray-50 border-2 border-dashed rounded-xl py-20 flex flex-col items-center justify-center text-gray-400">
+                            <AlertCircle size={40} className="mb-2" />
+                            <p>No {activeTab} found. Create one to get started.</p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/components/assets/transfer-dialog.tsx b/frontend/components/assets/transfer-dialog.tsx
new file mode 100644
index 00000000..0df1fe35
--- /dev/null
+++ b/frontend/components/assets/transfer-dialog.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { X, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useDepartments, useUsers, useTransferAsset } from '@/lib/query/hooks/useAsset';
+import { toast } from 'react-toastify';
+
+const schema = z.object({
+    departmentId: z.string().min(1, 'Department is required'),
+    assignedToId: z.string().optional(),
+    location: z.string().optional(),
+    notes: z.string().optional(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+interface Props {
+    assetId: string;
+    assetName: string;
+    onClose: () => void;
+    onSuccess?: () => void;
+}
+
+export function TransferAssetDialog({ assetId, assetName, onClose, onSuccess }: Props) {
+    const { data: departments = [] } = useDepartments();
+    const { data: users = [] } = useUsers();
+    const transferAsset = useTransferAsset(assetId);
+
+    const {
+        register,
+        handleSubmit,
+        setError,
+        formState: { errors },
+    } = useForm<FormValues>({
+        resolver: zodResolver(schema),
+    });
+
+    const onSubmit = async (values: FormValues) => {
+        try {
+            await transferAsset.mutateAsync({
+                departmentId: values.departmentId,
+                assignedToId: values.assignedToId || undefined,
+                location: values.location || undefined,
+                notes: values.notes || undefined,
+            });
+            toast.success('Asset transferred successfully');
+            onSuccess?.();
+            onClose();
+        } catch (err: any) {
+            const message = err.message || 'Failed to transfer asset.';
+            setError('root', { message });
+            toast.error(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-lg 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">Transfer Asset: {assetName}</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">
+                    {/* Department */}
+                    <div className="flex flex-col gap-1">
+                        <label className="text-sm font-medium text-gray-700">Destination 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>
+
+                    {/* Assigned To */}
+                    <div className="flex flex-col gap-1">
+                        <label className="text-sm font-medium text-gray-700">Assign To (Optional)</label>
+                        <select
+                            {...register('assignedToId')}
+                            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="">Unassigned</option>
+                            {users.map((u) => (
+                                <option key={u.id} value={u.id}>{u.firstName} {u.lastName}</option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <Input
+                        id="location"
+                        label="New Location (Optional)"
+                        placeholder="e.g. Building B, Room 102"
+                        {...register('location')}
+                    />
+
+                    <div className="flex flex-col gap-1">
+                        <label htmlFor="notes" className="text-sm font-medium text-gray-700">Transfer Notes (Optional)</label>
+                        <textarea
+                            id="notes"
+                            rows={3}
+                            placeholder="Reason for transfer, current condition, etc..."
+                            {...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" disabled={transferAsset.isPending}>
+                            {transferAsset.isPending && <Loader2 size={18} className="animate-spin mr-2" />}
+                            Complete Transfer
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/lib/api/assets.ts b/frontend/lib/api/assets.ts
index 17515cbb..ec3a778a 100644
--- a/frontend/lib/api/assets.ts
+++ b/frontend/lib/api/assets.ts
@@ -6,9 +6,12 @@ import {
   AssetHistoryFilters,
   AssetNote,
   AssetUser,
+  Category,
+  CategoryWithCount,
   CreateMaintenanceInput,
   CreateNoteInput,
   Department,
+  DepartmentWithCount,
   MaintenanceRecord,
   TransferAssetInput,
   UpdateAssetStatusInput,
@@ -46,8 +49,34 @@ export const assetApiClient = {
     return apiClient.request<AssetNote[]>(`/assets/${id}/notes`);
   },
 
-  getDepartments(): Promise<Department[]> {
-    return apiClient.request<Department[]>('/departments');
+  getDepartments(): Promise<DepartmentWithCount[]> {
+    return apiClient.request<DepartmentWithCount[]>('/departments');
+  },
+
+  createDepartment(data: { name: string; description?: string }): Promise<Department> {
+    return apiClient.request<Department>('/departments', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  deleteDepartment(id: string): Promise<void> {
+    return apiClient.request<void>(`/departments/${id}`, { method: 'DELETE' });
+  },
+
+  getCategories(): Promise<CategoryWithCount[]> {
+    return apiClient.request<CategoryWithCount[]>('/categories');
+  },
+
+  createCategory(data: { name: string; description?: string }): Promise<Category> {
+    return apiClient.request<Category>('/categories', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  deleteCategory(id: string): Promise<void> {
+    return apiClient.request<void>(`/categories/${id}`, { method: 'DELETE' });
   },
 
   getUsers(): Promise<AssetUser[]> {
diff --git a/frontend/lib/query/types/asset.ts b/frontend/lib/query/types/asset.ts
index 7ed789e4..869be4a5 100644
--- a/frontend/lib/query/types/asset.ts
+++ b/frontend/lib/query/types/asset.ts
@@ -17,15 +17,24 @@ export enum AssetCondition {
   DAMAGED = 'DAMAGED',
 }
 
-export interface AssetCategory {
+export interface Category {
   id: string;
   name: string;
   description?: string;
 }
 
+export interface CategoryWithCount extends Category {
+  assetCount: number;
+}
+
 export interface Department {
   id: string;
   name: string;
+  description?: string;
+}
+
+export interface DepartmentWithCount extends Department {
+  assetCount: number;
 }
 
 export interface AssetUser {
@@ -39,7 +48,7 @@ export interface Asset {
   assetId: string;
   name: string;
   description: string | null;
-  category: AssetCategory;
+  category: Category;
   serialNumber: string | null;
   purchaseDate: string | null;
   purchasePrice: number | null;