diff --git a/src/lib/components/CardPerfil.svelte b/src/lib/components/CardPerfil.svelte
index 2a0b78a..e29df1b 100644
--- a/src/lib/components/CardPerfil.svelte
+++ b/src/lib/components/CardPerfil.svelte
@@ -9,8 +9,10 @@
 	import Button from './ui/button/button.svelte';
 	import { updateImagenDePerfil } from '@/hooks/updateImagenDePerfil';
 	import { updateUsuario } from '@/hooks/updateUsuario';
+	import { sesionStore } from '@/stores/usuario';
+	import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
 
-	let { data, messageError = $bindable() } = $props();
+	let { data = $bindable() } = $props();
 
 	let cargando = $state(false);
 	let hoverimg = $state(false);
@@ -33,7 +35,12 @@
 		if (image === null) return;
 		cargando = true;
 		await updateUsuario({ id: data.id, profileImage: true, image: image });
+		let ret = await obtenerUsuarioPorUsername(data.username);
+		if (ret) {
+			data = { ...data, ...ret };
+		}
 		cargando = false;
+		hoverimg = false;
 	}
 </script>
 
@@ -46,7 +53,7 @@
 				<Skeleton class="h-8 w-48" />
 				<Skeleton class="h-16 w-3/4 rounded-full" />
 			</div>
-		{:else}
+		{:else if $sesionStore?.isAdmin || $sesionStore?.username == data.username}
 			<button
 				class="relative flex w-full items-center justify-center"
 				onmouseenter={() => (hoverimg = true)}
@@ -78,6 +85,26 @@
 			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
 				{data.bio}
 			</p>
+		{:else}
+			<div class="relative flex w-full items-center justify-center">
+				<Avatar
+					class={{
+						'brightness-0': hoverimg,
+						'relative z-0 mt-2 scale-250 border-2 border-slate-950 transition-all': true
+					}}
+				>
+					<AvatarImage src={data.imageUrl} alt="Imagen de perfil"></AvatarImage>
+					<AvatarFallback class="select-none">
+						{data.displayName?.[0]?.toUpperCase() || ''}
+					</AvatarFallback>
+				</Avatar>
+			</div>
+			<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
+				{data.displayName}
+			</h1>
+			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
+				{data.bio}
+			</p>
 		{/if}
 	</CardContent>
 </Card>
diff --git a/src/routes/[perfil]/+page.svelte b/src/routes/[perfil]/+page.svelte
index 3ebada1..7cd3f91 100644
--- a/src/routes/[perfil]/+page.svelte
+++ b/src/routes/[perfil]/+page.svelte
@@ -25,7 +25,6 @@
 	import CardHeader from '@/components/ui/card/card-header.svelte';
 	import CardTitle from '@/components/ui/card/card-title.svelte';
 	import Badge from '@/components/ui/badge/badge.svelte';
-	import Pen from '@lucide/svelte/icons/pen';
 	import CardCargando from '@/components/CardCargando.svelte';
 	import CardError from '@/components/CardError.svelte';
 	import CardPerfil from '@/components/CardPerfil.svelte';
@@ -41,6 +40,7 @@
 
 	const { subscribe } = apiBase;
 	let baseUrl: string = '';
+	let data = $state(page.data);
 
 	subscribe((value) => {
 		baseUrl = value;
@@ -83,19 +83,19 @@
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
 	<div class="w-full max-w-6xl">
 		<div class="flex gap-2">
-			<CardPerfil data={page.data} />
+			<CardPerfil bind:data />
 			<aside class="flex w-1/4 flex-col gap-2">
 				<Card class="w-full">
 					<CardContent>
 						<CardHeader class="flex justify-between">
 							<CardTitle>Seguidos:</CardTitle>
-							<Badge variant="secondary">{page.data.seguidos.length}</Badge>
+							<Badge variant="secondary">{data.seguidos.length}</Badge>
 						</CardHeader>
 						<CardContent>
-							{#if page.data.seguidos.length === 0}
+							{#if data.seguidos.length === 0}
 								<h3>No hay Seguidos</h3>
 							{:else}
-								{#each page.data.seguidos as seguidos (seguidos.id)}
+								{#each data.seguidos as seguidos (seguidos.id)}
 									<p class="text-muted-foreground">
 										{seguidos.username}
 									</p>
@@ -108,13 +108,13 @@
 					<CardContent>
 						<CardHeader class="flex justify-between">
 							<CardTitle>Seguidores:</CardTitle>
-							<Badge variant="secondary">{page.data.seguidores.length}</Badge>
+							<Badge variant="secondary">{data.seguidores.length}</Badge>
 						</CardHeader>
 						<CardContent>
-							{#if page.data.seguidores.length === 0}
+							{#if data.seguidores.length === 0}
 								<h3>No hay Seguidores</h3>
 							{:else}
-								{#each page.data.seguidores as seguidores (seguidores.id)}
+								{#each data.seguidores as seguidores (seguidores.id)}
 									<p class="text-muted-foreground">
 										{seguidores.username}
 									</p>