diff --git a/src/lib/hooks/obtenerUsuario.ts b/src/lib/hooks/obtenerUsuario.ts
new file mode 100644
index 0000000..40481bf
--- /dev/null
+++ b/src/lib/hooks/obtenerUsuario.ts
@@ -0,0 +1,27 @@
+import { apiBase } from '@/stores/url';
+import type { UserResponseDto } from '../../types';
+import { get } from 'svelte/store';
+import { sesionStore } from '@/stores/usuario';
+
+export async function obtenerUsuarioPorUsername(username: string): Promise<UserResponseDto | null> {
+	try {
+		const response = await fetch(`${get(apiBase)}/api/users/username/${username}`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+
+		if (!response.ok) {
+			//console.error('Error fetching user data:', response.status);
+			return null;
+		}
+
+		const user: UserResponseDto = await response.json();
+		return user;
+	} catch (error) {
+		//console.error('Failed to reach the server while fetching user:', error);
+		return null;
+	}
+}
diff --git a/src/routes/[perfil]/+error.svelte b/src/routes/[perfil]/+error.svelte
new file mode 100644
index 0000000..460a950
--- /dev/null
+++ b/src/routes/[perfil]/+error.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import CardContent from '@/components/ui/card/card-content.svelte';
+	import Card from '@/components/ui/card/card.svelte';
+</script>
+
+<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
+	<div class="w-full max-w-6xl">
+		<Card>
+			<CardContent>
+				<h1 class="mb-4 text-center text-3xl font-bold text-gray-800">
+					{page.status}
+				</h1>
+				<p class="text-center">
+					{page.error!.message}
+				</p>
+			</CardContent>
+		</Card>
+	</div>
+</div>
diff --git a/src/routes/[perfil]/+page.server.ts b/src/routes/[perfil]/+page.server.ts
new file mode 100644
index 0000000..641b412
--- /dev/null
+++ b/src/routes/[perfil]/+page.server.ts
@@ -0,0 +1,11 @@
+import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario.js';
+import type { User, UserResponseDto } from '../../types.js';
+import { error } from '@sveltejs/kit';
+
+export async function load({ params }) {
+	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil);
+	if (usuario) {
+		return usuario;
+	}
+	error(404, 'No se encontro el usuario, ' + params.perfil);
+}
diff --git a/src/routes/[perfil]/+page.svelte b/src/routes/[perfil]/+page.svelte
index e1160cc..189d37f 100644
--- a/src/routes/[perfil]/+page.svelte
+++ b/src/routes/[perfil]/+page.svelte
@@ -11,11 +11,9 @@
 	import { fade, slide } from 'svelte/transition';
 	import PostCard from '@/components/PostCard.svelte';
 	import { posts, setPosts, updatePostStore } from '@/stores/posts.js';
-	import InputGroup from '@/components/ui/input-group/input-group.svelte';
-	import InputGroupTextarea from '@/components/ui/input-group/input-group-textarea.svelte';
-	import InputGroupAddon from '@/components/ui/input-group/input-group-addon.svelte';
 	import { updatePost } from '@/hooks/updatePost.js';
 	import ModalEditar from './modalEditar.svelte';
+	import { page } from '$app/state';
 
 	let { params } = $props();
 
@@ -78,7 +76,7 @@
 				<h1
 					class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl"
 				>
-					{'test'}
+					{page.data.displayName}
 				</h1>
 				<h3 class="scroll-m-20 text-center text-2xl tracking-tight text-muted-foreground">
 					@{params.perfil}
diff --git a/src/types.d.ts b/src/types.d.ts
index 16d437a..9d79673 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -74,3 +74,15 @@ export interface PostResponseDto {
 	visibility: string;
 	hashtags: string[]?;
 }
+
+export interface UserResponseDto {
+	id: string;
+	username: string;
+	displayName: string;
+	email: string;
+	bio: string;
+	profileImageUrl: string;
+	followersCount: number;
+	followingCount: number;
+	createdAt: string;
+}