diff --git a/apps/web/src/app/admin/users/[slug]/page.tsx b/apps/web/src/app/admin/users/[slug]/page.tsx
index de613c26..ba125b2a 100644
--- a/apps/web/src/app/admin/users/[slug]/page.tsx
+++ b/apps/web/src/app/admin/users/[slug]/page.tsx
@@ -40,6 +40,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
 		return <p className="text-center font-bold">User Not Found</p>;
 	}
 
+	const roles = await db.query.roles.findMany({
+		columns: { id: true, name: true },
+	});
+
 	const banInstance = await db.query.bannedUsers.findFirst({
 		where: eq(bannedUsers.userID, subject.clerkID),
 	});
@@ -83,6 +87,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 							name={`${subject.firstName} ${subject.lastName}`}
 							currentRoleId={subject.role_id}
 							userID={subject.clerkID}
+							roles={roles}
 						/>
 					</Restricted>
 
@@ -146,6 +151,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 									name={`${subject.firstName} ${subject.lastName}`}
 									currentRoleId={subject.role_id}
 									userID={subject.clerkID}
+									roles={roles}
 								/>
 							</div>
 
diff --git a/apps/web/src/components/Restricted.tsx b/apps/web/src/components/Restricted.tsx
index 52b46e56..e7c61814 100644
--- a/apps/web/src/components/Restricted.tsx
+++ b/apps/web/src/components/Restricted.tsx
@@ -25,22 +25,24 @@ function Restricted({
 	if (targetRolePosition !== undefined) {
 		if (
 			position === "higher" &&
-			!compareUserPosition(user, targetRolePosition)
+			compareUserPosition(user, targetRolePosition)
 		) {
-			return <></>;
+			return <>{children}</>;
 		}
 		if (
 			position === "lower" &&
 			compareUserPosition(user, targetRolePosition) !== -1
 		) {
-			return <></>;
+			return <>{children}</>;
 		}
 		if (
 			position === "equal" &&
 			compareUserPosition(user, targetRolePosition) !== 0
 		) {
-			return <></>;
+			return <>{children}</>;
 		}
+
+		return <></>;
 	}
 	return <>{children}</>;
 }
diff --git a/apps/web/src/components/admin/users/UpdateRoleDialog.tsx b/apps/web/src/components/admin/users/UpdateRoleDialog.tsx
index cea26185..1648374f 100644
--- a/apps/web/src/components/admin/users/UpdateRoleDialog.tsx
+++ b/apps/web/src/components/admin/users/UpdateRoleDialog.tsx
@@ -21,25 +21,24 @@ import { useAction } from "next-safe-action/hooks";
 import { updateRole } from "@/actions/admin/user-actions";
 import { useState } from "react";
 import { Badge } from "@/components/shadcn/ui/badge";
-import { db } from "db";
 import { titleCase } from "@/lib/utils/shared/string";
 
 interface UpdateRoleDialogProps {
 	userID: string;
 	name: string;
 	currentRoleId: number;
+	roles: { id: number; name: string }[];
 }
 
 export default async function UpdateRoleDialog({
 	userID,
 	currentRoleId,
 	name,
+	roles,
 }: UpdateRoleDialogProps) {
 	const [roleToSet, setRoleToSet] = useState(currentRoleId);
 	const [open, setOpen] = useState(false);
 
-	const roles = await db.query.roles.findMany();
-
 	const currentRoleName = titleCase(
 		roles.find((r) => r.id === currentRoleId)?.name.replace("_", " ") || "",
 	);