diff --git a/ui/actions/roles/roles.ts b/ui/actions/roles/roles.ts
index 2c1c26abd0..5b8887e708 100644
--- a/ui/actions/roles/roles.ts
+++ b/ui/actions/roles/roles.ts
@@ -48,6 +48,33 @@ export const getRoles = async ({
   }
 };
 
+export const getRoleInfoById = async (roleId: string) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/roles/${roleId}`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      headers: {
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch role info: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return parseStringify(data);
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
 export const addRole = async (formData: FormData) => {
   const session = await auth();
   const keyServer = process.env.API_BASE_URL;
diff --git a/ui/app/(prowler)/roles/(add-role)/edit/page.tsx b/ui/app/(prowler)/roles/(add-role)/edit/page.tsx
index 34dbd7857c..84341039a6 100644
--- a/ui/app/(prowler)/roles/(add-role)/edit/page.tsx
+++ b/ui/app/(prowler)/roles/(add-role)/edit/page.tsx
@@ -1,17 +1,43 @@
 import { redirect } from "next/navigation";
-import React from "react";
+import { Suspense } from "react";
 
+import { getRoleInfoById } from "@/actions/roles/roles";
+import { SkeletonRoleForm } from "@/components/roles/workflow";
 import { EditRoleForm } from "@/components/roles/workflow/forms/edit-role-form";
 import { SearchParamsProps } from "@/types";
 
-export default function EditRolePage({
+export default async function EditRolePage({
   searchParams,
 }: {
   searchParams: SearchParamsProps;
 }) {
-  if (!searchParams.roleId || Array.isArray(searchParams.roleId)) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
+
+  return (
+    <Suspense key={searchParamsKey} fallback={<SkeletonRoleForm />}>
+      <SSRDataRole searchParams={searchParams} />
+    </Suspense>
+  );
+}
+
+const SSRDataRole = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const roleId = searchParams.roleId;
+
+  if (!roleId || Array.isArray(roleId)) {
     redirect("/roles");
   }
 
-  return <EditRoleForm roleId={searchParams.roleId} />;
-}
+  const roleData = await getRoleInfoById(roleId as string);
+
+  if (!roleData || roleData.error) {
+    return <div>Role not found</div>;
+  }
+
+  const { attributes } = roleData.data;
+
+  return <EditRoleForm roleId={roleId} roleData={attributes} />;
+};
diff --git a/ui/components/roles/workflow/forms/edit-role-form.tsx b/ui/components/roles/workflow/forms/edit-role-form.tsx
index 5e5c0203fe..a13799cc0c 100644
--- a/ui/components/roles/workflow/forms/edit-role-form.tsx
+++ b/ui/components/roles/workflow/forms/edit-role-form.tsx
@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Checkbox } from "@nextui-org/react";
 import { SaveIcon } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -16,17 +16,19 @@ import { ApiError, editRoleFormSchema } from "@/types";
 
 export type FormValues = z.infer<typeof editRoleFormSchema>;
 
-export const EditRoleForm = ({ roleId }: { roleId: string }) => {
+export const EditRoleForm = ({
+  roleId,
+  roleData,
+}: {
+  roleId: string;
+  roleData: FormValues;
+}) => {
   const { toast } = useToast();
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const searchRoleId = searchParams.get("roleId") || roleId;
 
   const form = useForm<FormValues>({
     resolver: zodResolver(editRoleFormSchema),
-    defaultValues: {
-      roleId: roleId,
-    },
+    defaultValues: roleData,
   });
 
   const { watch, setValue } = form;
@@ -66,7 +68,7 @@ export const EditRoleForm = ({ roleId }: { roleId: string }) => {
   };
 
   const onSubmitClient = async (values: FormValues) => {
-    if (!searchRoleId) {
+    if (!roleId) {
       toast({
         variant: "destructive",
         title: "Error",
@@ -89,7 +91,7 @@ export const EditRoleForm = ({ roleId }: { roleId: string }) => {
     );
 
     try {
-      const data = await updateRole(formData, searchRoleId);
+      const data = await updateRole(formData, roleId);
 
       if (data?.errors && data.errors.length > 0) {
         data.errors.forEach((error: ApiError) => {
diff --git a/ui/types/formSchemas.ts b/ui/types/formSchemas.ts
index 5fb153d723..92f4cc0f99 100644
--- a/ui/types/formSchemas.ts
+++ b/ui/types/formSchemas.ts
@@ -12,7 +12,6 @@ export const addRoleFormSchema = z.object({
 });
 
 export const editRoleFormSchema = z.object({
-  roleId: z.string().uuid(),
   name: z.string().min(1, "Name is required"),
   manage_users: z.boolean().default(false),
   manage_account: z.boolean().default(false),