diff --git a/apps/website/app/[locale]/blog/[slug]/page.tsx b/apps/website/app/[locale]/blog/[slug]/page.tsx
index 0b6c89a..4ae8bc3 100644
--- a/apps/website/app/[locale]/blog/[slug]/page.tsx
+++ b/apps/website/app/[locale]/blog/[slug]/page.tsx
@@ -80,282 +80,291 @@ export async function generateStaticParams() {
 }
 
 export default async function BlogPostPage({ params }: Props) {
-	const { locale, slug } = await params;
-	// setRequestLocale(locale);
-	const t = await getTranslations({ locale, namespace: "blog" });
-	const post = await getPost(slug);
-	const allPosts = await getPosts();
+	try {
+		const { locale, slug } = await params;
+		// setRequestLocale(locale);
+		const t = await getTranslations({ locale, namespace: "blog" });
+		const post = await getPost(slug);
+		const allPosts = await getPosts();
 
-	// Get related posts (excluding current post)
-	const relatedPosts = allPosts.filter((p) => p.id !== post?.id).slice(0, 3); // Show only 3 related posts
+		// Get related posts (excluding current post)
+		const relatedPosts = allPosts.filter((p) => p.id !== post?.id).slice(0, 3); // Show only 3 related posts
 
-	if (!post) {
-		notFound();
-	}
+		if (!post) {
+			notFound();
+		}
 
-	// Convertir HTML a Markdown
-	const turndownService = new TurndownService({
-		headingStyle: "atx",
-		codeBlockStyle: "fenced",
-	});
-	const gfm = turndownPluginGfm.gfm;
-	const tables = turndownPluginGfm.tables;
-	const strikethrough = turndownPluginGfm.strikethrough;
-	turndownService.use([tables, strikethrough, gfm, remarkToc]);
+		// Convertir HTML a Markdown
+		const turndownService = new TurndownService({
+			headingStyle: "atx",
+			codeBlockStyle: "fenced",
+		});
+		const gfm = turndownPluginGfm.gfm;
+		const tables = turndownPluginGfm.tables;
+		const strikethrough = turndownPluginGfm.strikethrough;
+		turndownService.use([tables, strikethrough, gfm, remarkToc]);
 
-	const markdown = turndownService.turndown(post.html);
+		const markdown = turndownService.turndown(post.html);
 
-	const formattedDate = new Date(post.published_at).toLocaleDateString(locale, {
-		year: "numeric",
-		month: "long",
-		day: "numeric",
-	});
+		const formattedDate = new Date(post.published_at).toLocaleDateString(
+			locale,
+			{
+				year: "numeric",
+				month: "long",
+				day: "numeric",
+			},
+		);
 
-	const components: Partial<Components> = {
-		h1: H1,
-		h2: H2,
-		h3: H3,
-		p: ({ node, children, ...props }) => (
-			<p
-				className="text-base text-muted-foreground leading-relaxed mb-4"
-				{...props}
-			>
-				{children}
-			</p>
-		),
-		a: ({ node, href, ...props }) => (
-			<a
-				href={href}
-				className="text-blue-500 hover:text-blue-500/80 transition-colors"
-				target="_blank"
-				rel="noopener noreferrer"
-				{...props}
-			/>
-		),
-		ul: ({ node, ...props }) => (
-			<ul className="list-disc list-inside space-y-2 mb-4" {...props} />
-		),
-		ol: ({ node, ...props }) => (
-			<ol className="list-decimal list-inside space-y-2 mb-4" {...props} />
-		),
-		li: ({ node, ...props }) => (
-			<li className="text-base leading-relaxed" {...props} />
-		),
-		blockquote: ({ node, ...props }) => (
-			<blockquote
-				className="border-l-4 border-primary pl-4 py-2 my-4 bg-muted/50"
-				{...props}
-			/>
-		),
-		table: ({ node, ...props }) => (
-			<div className="my-6 w-full overflow-x-auto border rounded-lg">
-				<table className="w-full border-collapse" {...props} />
-			</div>
-		),
-		thead: ({ node, ...props }) => (
-			<thead className="bg-muted border-b border-border" {...props} />
-		),
-		tbody: ({ node, ...props }) => (
-			<tbody className="divide-y divide-border" {...props} />
-		),
-		tr: ({ node, ...props }) => (
-			<tr className="transition-colors hover:bg-muted/50" {...props} />
-		),
-		th: ({ node, ...props }) => (
-			<th className="p-4 text-left font-semibold" {...props} />
-		),
-		td: ({ node, ...props }) => (
-			<td className="p-4 text-muted-foreground" {...props} />
-		),
-		img: ({ node, src, alt }) => (
-			<ZoomableImage
-				src={src || ""}
-				alt={alt || ""}
-				className="object-cover max-w-lg mx-auto rounded-lg border max-lg:w-64 border-border overflow-hidden"
-			/>
-		),
-		code: ({ className, children }) => {
-			const match = /language-(\w+)/.exec(className || "");
-			return (
-				<CodeBlock
-					lang={match ? (match[1] as BundledLanguage) : "ts"}
-					code={children?.toString() || ""}
-				/>
-			);
-		},
-	};
-
-	return (
-		<article className="mx-auto px-4 sm:px-6 lg:px-8 pb-12 max-w-7xl w-full">
-			<Link
-				href="/blog"
-				className="inline-flex items-center mb-8 text-primary hover:text-primary/80 transition-colors"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					className="h-5 w-5 mr-2"
-					viewBox="0 0 20 20"
-					fill="currentColor"
+		const components: Partial<Components> = {
+			h1: H1,
+			h2: H2,
+			h3: H3,
+			p: ({ node, children, ...props }) => (
+				<p
+					className="text-base text-muted-foreground leading-relaxed mb-4"
+					{...props}
 				>
-					<path
-						fillRule="evenodd"
-						d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-						clipRule="evenodd"
+					{children}
+				</p>
+			),
+			a: ({ node, href, ...props }) => (
+				<a
+					href={href}
+					className="text-blue-500 hover:text-blue-500/80 transition-colors"
+					target="_blank"
+					rel="noopener noreferrer"
+					{...props}
+				/>
+			),
+			ul: ({ node, ...props }) => (
+				<ul className="list-disc list-inside space-y-2 mb-4" {...props} />
+			),
+			ol: ({ node, ...props }) => (
+				<ol className="list-decimal list-inside space-y-2 mb-4" {...props} />
+			),
+			li: ({ node, ...props }) => (
+				<li className="text-base leading-relaxed" {...props} />
+			),
+			blockquote: ({ node, ...props }) => (
+				<blockquote
+					className="border-l-4 border-primary pl-4 py-2 my-4 bg-muted/50"
+					{...props}
+				/>
+			),
+			table: ({ node, ...props }) => (
+				<div className="my-6 w-full overflow-x-auto border rounded-lg">
+					<table className="w-full border-collapse" {...props} />
+				</div>
+			),
+			thead: ({ node, ...props }) => (
+				<thead className="bg-muted border-b border-border" {...props} />
+			),
+			tbody: ({ node, ...props }) => (
+				<tbody className="divide-y divide-border" {...props} />
+			),
+			tr: ({ node, ...props }) => (
+				<tr className="transition-colors hover:bg-muted/50" {...props} />
+			),
+			th: ({ node, ...props }) => (
+				<th className="p-4 text-left font-semibold" {...props} />
+			),
+			td: ({ node, ...props }) => (
+				<td className="p-4 text-muted-foreground" {...props} />
+			),
+			img: ({ node, src, alt }) => (
+				<ZoomableImage
+					src={src || ""}
+					alt={alt || ""}
+					className="object-cover max-w-lg mx-auto rounded-lg border max-lg:w-64 border-border overflow-hidden"
+				/>
+			),
+			code: ({ className, children }) => {
+				const match = /language-(\w+)/.exec(className || "");
+				return (
+					<CodeBlock
+						lang={match ? (match[1] as BundledLanguage) : "ts"}
+						code={children?.toString() || ""}
 					/>
-				</svg>
-				{t("backToBlog")}
-			</Link>
+				);
+			},
+		};
 
-			<div className="grid grid-cols-1 lg:grid-cols-[1fr_250px] gap-8">
-				<div className="rounded-lg p-8 shadow-lg border border-border">
-					<header className="mb-8">
-						<h1 className="text-xl md:text-2xl xl:text-3xl font-bold mb-4">
-							{post.title}
-						</h1>
-						<div className="flex items-center mb-6">
-							{post.primary_author?.profile_image && (
-								<div className="relative h-12 w-12 rounded-full overflow-hidden mr-4">
-									{post.primary_author.twitter ? (
-										<a
-											href={`https://twitter.com/${post.primary_author.twitter}`}
-											target="_blank"
-											rel="noopener noreferrer"
-											className="block cursor-pointer transition-opacity hover:opacity-90"
-										>
+		return (
+			<article className="mx-auto px-4 sm:px-6 lg:px-8 pb-12 max-w-7xl w-full">
+				<Link
+					href="/blog"
+					className="inline-flex items-center mb-8 text-primary hover:text-primary/80 transition-colors"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						className="h-5 w-5 mr-2"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+					>
+						<path
+							fillRule="evenodd"
+							d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+							clipRule="evenodd"
+						/>
+					</svg>
+					{t("backToBlog")}
+				</Link>
+
+				<div className="grid grid-cols-1 lg:grid-cols-[1fr_250px] gap-8">
+					<div className="rounded-lg p-8 shadow-lg border border-border">
+						<header className="mb-8">
+							<h1 className="text-xl md:text-2xl xl:text-3xl font-bold mb-4">
+								{post.title}
+							</h1>
+							<div className="flex items-center mb-6">
+								{post.primary_author?.profile_image && (
+									<div className="relative h-12 w-12 rounded-full overflow-hidden mr-4">
+										{post.primary_author.twitter ? (
+											<a
+												href={`https://twitter.com/${post.primary_author.twitter}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="block cursor-pointer transition-opacity hover:opacity-90"
+											>
+												<Image
+													src={post.primary_author.profile_image}
+													alt={post.primary_author.name}
+													fill
+													className="object-cover"
+												/>
+											</a>
+										) : (
 											<Image
 												src={post.primary_author.profile_image}
 												alt={post.primary_author.name}
 												fill
 												className="object-cover"
 											/>
-										</a>
-									) : (
-										<Image
-											src={post.primary_author.profile_image}
-											alt={post.primary_author.name}
-											fill
-											className="object-cover"
-										/>
-									)}
+										)}
+									</div>
+								)}
+								<div>
+									<p className="font-medium">
+										{post.primary_author?.twitter ? (
+											<a
+												href={`https://twitter.com/${post.primary_author.twitter}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="hover:text-primary transition-colors"
+											>
+												{post.primary_author.name || "Unknown Author"}
+											</a>
+										) : (
+											post.primary_author?.name || "Unknown Author"
+										)}
+									</p>
+									<p className="text-sm text-muted-foreground">
+										{formattedDate} • {post.reading_time} min read
+									</p>
+								</div>
+							</div>
+							{post.feature_image && (
+								<div className="relative w-full  h-[400px] mb-8">
+									<ZoomableImage
+										src={post.feature_image}
+										alt={post.title}
+										className="rounded-lg h-full w-full object-cover"
+									/>
 								</div>
 							)}
-							<div>
-								<p className="font-medium">
-									{post.primary_author?.twitter ? (
-										<a
-											href={`https://twitter.com/${post.primary_author.twitter}`}
-											target="_blank"
-											rel="noopener noreferrer"
-											className="hover:text-primary transition-colors"
-										>
-											{post.primary_author.name || "Unknown Author"}
-										</a>
-									) : (
-										post.primary_author?.name || "Unknown Author"
-									)}
-								</p>
-								<p className="text-sm text-muted-foreground">
-									{formattedDate} • {post.reading_time} min read
-								</p>
-							</div>
+						</header>
+
+						<div className="prose prose-lg max-w-none">
+							<ReactMarkdown
+								remarkPlugins={[
+									remarkGfm,
+									[remarkToc, { tight: true, maxDepth: 3 }],
+								]}
+								rehypePlugins={[rehypeRaw]}
+								components={components}
+							>
+								{markdown}
+							</ReactMarkdown>
 						</div>
-						{post.feature_image && (
-							<div className="relative w-full  h-[400px] mb-8">
-								<ZoomableImage
-									src={post.feature_image}
-									alt={post.title}
-									className="rounded-lg h-full w-full object-cover"
-								/>
+
+						{post.tags && post.tags.length > 0 && (
+							<div className="mt-12 pt-6 border-t border-border">
+								<h2 className="text-xl font-semibold mb-4">{t("tags")}</h2>
+								<div className="flex flex-wrap gap-2">
+									{post.tags.map((tag) => (
+										<Link
+											key={tag.id}
+											href={`/blog/tag/${tag.slug}`}
+											className="px-4 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm transition-colors"
+										>
+											{tag.name}
+										</Link>
+									))}
+								</div>
 							</div>
 						)}
-					</header>
-
-					<div className="prose prose-lg max-w-none">
-						<ReactMarkdown
-							remarkPlugins={[
-								remarkGfm,
-								[remarkToc, { tight: true, maxDepth: 3 }],
-							]}
-							rehypePlugins={[rehypeRaw]}
-							components={components}
-						>
-							{markdown}
-						</ReactMarkdown>
 					</div>
 
-					{post.tags && post.tags.length > 0 && (
-						<div className="mt-12 pt-6 border-t border-border">
-							<h2 className="text-xl font-semibold mb-4">{t("tags")}</h2>
-							<div className="flex flex-wrap gap-2">
-								{post.tags.map((tag) => (
-									<Link
-										key={tag.id}
-										href={`/blog/tag/${tag.slug}`}
-										className="px-4 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm transition-colors"
-									>
-										{tag.name}
-									</Link>
-								))}
-							</div>
+					<div className="hidden lg:block max-w-[16rem]">
+						<div className="sticky top-4">
+							<TableOfContents />
 						</div>
-					)}
-				</div>
-
-				<div className="hidden lg:block max-w-[16rem]">
-					<div className="sticky top-4">
-						<TableOfContents />
 					</div>
 				</div>
-			</div>
 
-			{relatedPosts.length > 0 && (
-				<div className="mt-12">
-					<h2 className="text-2xl font-bold mb-6">{t("relatedPosts")}</h2>
-					<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-						{relatedPosts.map((relatedPost) => {
-							const relatedPostDate = new Date(
-								relatedPost.published_at,
-							).toLocaleDateString(locale, {
-								year: "numeric",
-								month: "long",
-								day: "numeric",
-							});
+				{relatedPosts.length > 0 && (
+					<div className="mt-12">
+						<h2 className="text-2xl font-bold mb-6">{t("relatedPosts")}</h2>
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+							{relatedPosts.map((relatedPost) => {
+								const relatedPostDate = new Date(
+									relatedPost.published_at,
+								).toLocaleDateString(locale, {
+									year: "numeric",
+									month: "long",
+									day: "numeric",
+								});
 
-							return (
-								<Link
-									key={relatedPost.id}
-									href={`/blog/${relatedPost.slug}`}
-									className="group"
-								>
-									<div className="bg-card rounded-lg overflow-hidden h-full shadow-lg transition-all duration-300 hover:shadow-xl border border-border">
-										{relatedPost.feature_image && (
-											<div className="relative h-48 w-full">
-												<Image
-													src={relatedPost.feature_image}
-													alt={relatedPost.title}
-													fill
-													className="object-cover"
-												/>
+								return (
+									<Link
+										key={relatedPost.id}
+										href={`/blog/${relatedPost.slug}`}
+										className="group"
+									>
+										<div className="bg-card rounded-lg overflow-hidden h-full shadow-lg transition-all duration-300 hover:shadow-xl border border-border">
+											{relatedPost.feature_image && (
+												<div className="relative h-48 w-full">
+													<Image
+														src={relatedPost.feature_image}
+														alt={relatedPost.title}
+														fill
+														className="object-cover"
+													/>
+												</div>
+											)}
+											<div className="p-6">
+												<h3 className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors line-clamp-2">
+													{relatedPost.title}
+												</h3>
+												<p className="text-sm text-muted-foreground mb-4">
+													{relatedPostDate} • {relatedPost.reading_time} min
+													read
+												</p>
+												<p className="text-muted-foreground line-clamp-2">
+													{relatedPost.excerpt}
+												</p>
 											</div>
-										)}
-										<div className="p-6">
-											<h3 className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors line-clamp-2">
-												{relatedPost.title}
-											</h3>
-											<p className="text-sm text-muted-foreground mb-4">
-												{relatedPostDate} • {relatedPost.reading_time} min read
-											</p>
-											<p className="text-muted-foreground line-clamp-2">
-												{relatedPost.excerpt}
-											</p>
 										</div>
-									</div>
-								</Link>
-							);
-						})}
+									</Link>
+								);
+							})}
+						</div>
 					</div>
-				</div>
-			)}
-		</article>
-	);
+				)}
+			</article>
+		);
+	} catch (error) {
+		console.error("Error in BlogPostPage:", error);
+		return <div>Error loading blog post</div>;
+	}
 }