diff --git a/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx b/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx
index ddeb52058..d6b0d9d25 100644
--- a/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx
@@ -1,10 +1,13 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { Loader } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { Combobox } from '@documenso/ui/primitives/combobox';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
@@ -13,7 +16,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { FormErrorMessage } from '../../../../../components/form/form-error-message';
 
 export default function UserPage({ params }: { params: { id: number } }) {
-  const toast = useToast();
+  const { toast } = useToast();
+  const router = useRouter();
 
   const result = trpc.profile.getUser.useQuery(
     {
@@ -24,6 +28,15 @@ export default function UserPage({ params }: { params: { id: number } }) {
     },
   );
 
+  const roles = result.data?.roles;
+  let rolesArr: string[] = [];
+
+  if (roles) {
+    rolesArr = Object.values(roles);
+  }
+
+  const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
+
   const {
     register,
     control,
@@ -31,10 +44,44 @@ export default function UserPage({ params }: { params: { id: number } }) {
     formState: { errors, isSubmitting },
   } = useForm();
 
-  console.log(result.data);
-
   const onSubmit = async (data) => {
     console.log(data);
+
+    // const submittedRoles = data.roles
+    //   .split(',')
+    //   .map((role: string) => role.trim())
+    //   .map((role: string) => role.toUpperCase());
+
+    // const dbRoles = JSON.stringify(Role);
+
+    // const roleExists = submittedRoles.some((role: string) => dbRoles.includes(role));
+    // console.log('roleExists', roleExists);
+
+    // console.log('db roles', dbRoles);
+
+    try {
+      await updateUserMutation({
+        id: Number(result.data?.id),
+        name: data.name,
+        email: data.email,
+        roles: data.roles,
+      });
+
+      router.refresh();
+
+      toast({
+        title: 'Profile updated',
+        description: 'Your profile has been updated.',
+        duration: 5000,
+      });
+    } catch (e) {
+      console.log(e);
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating your profile.',
+        variant: 'destructive',
+      });
+    }
   };
 
   return (
@@ -45,17 +92,30 @@ export default function UserPage({ params }: { params: { id: number } }) {
           <Label htmlFor="name" className="text-muted-foreground">
             Name
           </Label>
-          <Input placeholder={result.data?.name} type="text" register={'name'} />
+          <Input placeholder={result.data?.name} type="text" {...register('name')} />
           <FormErrorMessage className="mt-1.5" error={errors.name} />
         </div>
         <div>
           <Label htmlFor="email" className="text-muted-foreground">
             Email
           </Label>
-          <Input placeholder={result.data?.email} type="text" register={'email'} />
+          <Input placeholder={result.data?.email} {...register('email')} />
           <FormErrorMessage className="mt-1.5" error={errors.email} />
         </div>
-        <div>
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="roles" className="text-muted-foreground">
+            User roles
+          </Label>
+          <Controller
+            control={control}
+            name="roles"
+            render={({ field: { onChange } }) => (
+              <Combobox listValues={rolesArr} onChange={(values: string[]) => onChange(values)} />
+            )}
+          />
+          <FormErrorMessage className="mt-1.5" error={errors.roles} />
+        </div>
+        {/* <div>
           <Label htmlFor="signature" className="text-muted-foreground">
             Signature
           </Label>
@@ -74,7 +134,8 @@ export default function UserPage({ params }: { params: { id: number } }) {
             />
             <FormErrorMessage className="mt-1.5" error={errors.signature} />
           </div>
-        </div>
+        </div> */}
+
         <div className="mt-4">
           <Button type="submit" disabled={isSubmitting}>
             {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
diff --git a/packages/lib/server-only/admin/update-user.ts b/packages/lib/server-only/admin/update-user.ts
index b10e6477d..0a80c8c64 100644
--- a/packages/lib/server-only/admin/update-user.ts
+++ b/packages/lib/server-only/admin/update-user.ts
@@ -2,23 +2,23 @@ import { prisma } from '@documenso/prisma';
 import { Role } from '@documenso/prisma/client';
 
 export type UpdateUserOptions = {
-  userId: number;
+  id: number;
   name: string;
   email: string;
   roles: Role[];
 };
 
-export const updateUser = async ({ userId, name, email, roles }: UpdateUserOptions) => {
+export const updateUser = async ({ id, name, email, roles }: UpdateUserOptions) => {
   console.log('wtf');
   await prisma.user.findFirstOrThrow({
     where: {
-      id: userId,
+      id,
     },
   });
 
   const updatedUser = await prisma.user.update({
     where: {
-      id: userId,
+      id,
     },
     data: {
       name,
diff --git a/packages/trpc/server/admin-router/router.ts b/packages/trpc/server/admin-router/router.ts
new file mode 100644
index 000000000..67556a251
--- /dev/null
+++ b/packages/trpc/server/admin-router/router.ts
@@ -0,0 +1,33 @@
+import { TRPCError } from '@trpc/server';
+
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import { updateUser } from '@documenso/lib/server-only/admin/update-user';
+
+import { authenticatedProcedure, router } from '../trpc';
+import { ZUpdateProfileMutationByAdminSchema } from './schema';
+
+export const adminRouter = router({
+  updateUser: authenticatedProcedure
+    .input(ZUpdateProfileMutationByAdminSchema)
+    .mutation(async ({ input, ctx }) => {
+      const isUserAdmin = isAdmin(ctx.user);
+
+      if (!isUserAdmin) {
+        throw new TRPCError({
+          code: 'UNAUTHORIZED',
+          message: 'Not authorized to perform this action.',
+        });
+      }
+
+      const { id, name, email, roles } = input;
+
+      try {
+        return await updateUser({ id, name, email, roles });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to retrieve the specified account. Please try again.',
+        });
+      }
+    }),
+});
diff --git a/packages/trpc/server/admin-router/schema.ts b/packages/trpc/server/admin-router/schema.ts
new file mode 100644
index 000000000..08967230c
--- /dev/null
+++ b/packages/trpc/server/admin-router/schema.ts
@@ -0,0 +1,13 @@
+import { Role } from '@prisma/client';
+import z from 'zod';
+
+export const ZUpdateProfileMutationByAdminSchema = z.object({
+  id: z.number().min(1),
+  name: z.string(),
+  email: z.string().email(),
+  roles: z.array(z.nativeEnum(Role)),
+});
+
+export type TUpdateProfileMutationByAdminSchema = z.infer<
+  typeof ZUpdateProfileMutationByAdminSchema
+>;
diff --git a/packages/trpc/server/router.ts b/packages/trpc/server/router.ts
index 61dfcb40f..afe3b2b07 100644
--- a/packages/trpc/server/router.ts
+++ b/packages/trpc/server/router.ts
@@ -1,3 +1,4 @@
+import { adminRouter } from './admin-router/router';
 import { authRouter } from './auth-router/router';
 import { documentRouter } from './document-router/router';
 import { fieldRouter } from './field-router/router';
@@ -10,6 +11,7 @@ export const appRouter = router({
   profile: profileRouter,
   document: documentRouter,
   field: fieldRouter,
+  admin: adminRouter,
 });
 
 export type AppRouter = typeof appRouter;