diff --git a/frontend/src/components/views/PendingRequests.vue b/frontend/src/components/views/PendingRequests.vue
index 59c2f6a..0b6aa34 100644
--- a/frontend/src/components/views/PendingRequests.vue
+++ b/frontend/src/components/views/PendingRequests.vue
@@ -2,22 +2,120 @@
 // @ts-ignore
 import { useStore } from "vuex";
 import { ref, onBeforeMount } from "vue";
+import { Tabs } from "@/components/ui/tabs";
+import DualColumnLayout from "@/components/layouts/DualColumnLayout.vue";
+import { Button } from "@/components/ui/button";
+import { Check, X } from "lucide-vue-next";
+import SquircleAvatar from "@/components/elements/SquircleAvatar.vue";
+
+interface RelationData {
+  idRelacion: string;
+  idActor: string;
+  avatar: string;
+  name: string;
+  alias: string;
+  routeType: string;
+}
 
 const store = useStore();
 const pendings = ref();
+const idSelf = ref();
+const relationDataList = ref<RelationData[]>([]);
+
+onBeforeMount(async () => {
+  idSelf.value = store.getters["USERS/getSelected"]._id;
+  pendings.value = await store.dispatch("NOTIFICATIONS/GET_PENDINGS", idSelf.value);
 
-onBeforeMount(() => {
-  pendings.value = store.dispatch(
-    "NOTIFICATIONS/GET_PENDINGS",
-    store.getters["USERS/getSelected"]._id
-  );
+  const tag = store.getters["USERS/getTypeSelected"];
+
+  for (const pending of pendings.value) {
+    const idOther = pending.id1 == idSelf.value ? pending.id2 : pending.id1;
+    let actor = await getActorInfo(idOther, tag);
+    relationDataList.value.push({
+      idRelacion: pending._id,
+      idActor: idOther,
+      avatar: actor.avatar,
+      name: tag == "user" ? actor.username : actor.nickname,
+      alias: tag == "user" ? actor.nickname : actor.pjname,
+      routeType: tag == "user" ? "user" : "pj",
+    });
+  }
 });
+
+const getActorInfo = async (id: string, type: string) => {
+  return type === "user"
+    ? await store.dispatch("USERS/GET_USER_BY_ID", id)
+    : await store.dispatch("CHARACTERS/GET_CHARACTER_BY_ID", id);
+};
+
+const accept = () => {};
+const deny = () => {};
 </script>
 
 <template>
   <DualColumnLayout>
     <template #firstColumn>
-      <div class="flex-col">{{ pendings }}</div>
+      <div class="flex-col">
+        <Tabs default-value="all">
+          <div class="border-b">
+            <div class="flex h-16 px-4 items-center justify-between">
+              <h2 class="text-lg font-bold tracking-tight">Solicitudes</h2>
+            </div>
+          </div>
+
+          <!-- Renderizar los datos de la relación -->
+          <div
+            v-for="relationData in relationDataList"
+            :key="relationData.idRelacion"
+            class="flex items-center space-x-4 border-b py-4"
+          >
+            <!-- Columna 1: Avatar -->
+            <div class="pl-5">
+              <router-link
+                :to="`/profile/${relationData.routeType}/${relationData.name}`"
+              >
+                <SquircleAvatar
+                  size="45px"
+                  :src="relationData.avatar"
+                  :name="(relationData.name as string)"
+                />
+              </router-link>
+            </div>
+
+            <!-- Columna 2: Nombre y Alias -->
+            <div class="flex flex-col">
+              <router-link
+                :to="`/profile/${relationData.routeType}/${relationData.name}`"
+              >
+                <div class="font-semibold">{{ relationData.name }}</div>
+                <div class="graytext text-[0.875rem]">@{{ relationData.alias }}</div>
+              </router-link>
+            </div>
+
+            <!-- Columna 3: Botones -->
+            <div class="flex items-center space-x-2 ml-[auto!important] pr-5">
+              <Button
+                @click="accept"
+                variant="outline"
+                size="icon"
+                type="submit"
+                class="rounded-full"
+              >
+                <Check class="w-4 h-4" />
+              </Button>
+              <Button
+                @click="deny"
+                variant="outline"
+                size="icon"
+                type="submit"
+                class="rounded-full"
+              >
+                <X class="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </Tabs>
+      </div>
     </template>
 
     <template #secondColumn>
diff --git a/frontend/src/store/notifications/notifications.module.ts b/frontend/src/store/notifications/notifications.module.ts
index a5bd047..baa8821 100644
--- a/frontend/src/store/notifications/notifications.module.ts
+++ b/frontend/src/store/notifications/notifications.module.ts
@@ -20,9 +20,11 @@ export default {
       async GET_PENDINGS({}: Triggers, identifier: string): Promise<Request[]> {
          try {
             const response = await axios.get(`${uri}/mutuals/id:${identifier}`);
+            console.log("GET_PENDINGS-response:",response.data);
             const pendingRequests = response.data
                .filter((request: any) => request.status === "pending");
 
+               console.log("GET_PENDINGS-filtered:",pendingRequests);
             return pendingRequests;
          } catch (error) {
             // Manejar errores (por ejemplo, usuario no autenticado)