diff --git a/app/(home)/article/[slug]/_components/movie.tsx b/app/(home)/article/[slug]/_components/movie.tsx
index b72b3c6..0a218e3 100644
--- a/app/(home)/article/[slug]/_components/movie.tsx
+++ b/app/(home)/article/[slug]/_components/movie.tsx
@@ -379,6 +379,7 @@ const ArticleRender = memo(
 									<p
 										className="text-lg leading-relaxed m-0"
 										style={{ fontFamily: notoKR.style.fontFamily }}
+										lang="ko"
 									>
 										{cue.text}
 									</p>
diff --git a/app/(home)/article/[slug]/_components/text.tsx b/app/(home)/article/[slug]/_components/text.tsx
index e09fb7c..086714e 100644
--- a/app/(home)/article/[slug]/_components/text.tsx
+++ b/app/(home)/article/[slug]/_components/text.tsx
@@ -8,6 +8,7 @@ const Text = ({ content }: { content: string }) => {
 	return (
 		<SelectToSearch showAdd prompt="sentence">
 			<RenderMDTextServer
+				lang="ko"
 				text={resolvedContent}
 				className={clsx(notoKR.className, "pt-2")}
 			/>
diff --git a/app/(home)/article/[slug]/page.tsx b/app/(home)/article/[slug]/page.tsx
index 7eb05bc..828e6e7 100644
--- a/app/(home)/article/[slug]/page.tsx
+++ b/app/(home)/article/[slug]/page.tsx
@@ -111,6 +111,7 @@ const SlugPage = async ({
 						}}
 						// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
 						dangerouslySetInnerHTML={{ __html: article.title }}
+						lang="ko"
 					/>
 					<div
 						className="text-base text-base-content/70 leading-relaxed flex-grow"
diff --git a/app/(home)/article/page.tsx b/app/(home)/article/page.tsx
index 2fce451..618bf20 100644
--- a/app/(home)/article/page.tsx
+++ b/app/(home)/article/page.tsx
@@ -21,7 +21,7 @@ const ArticlePage = async () => {
 	return (
 		<div className="container px-4 py-8 mx-auto">
 			<div className="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-[1024px]">
-				{sortedArticles.map(async (article) => (
+				{sortedArticles.map((article, index) => (
 					<div
 						key={article.id}
 						className="card shadow-sm hover:shadow-lg hover:scale-105 transition-all duration-300 !rounded-xl backdrop-blur-lg bg-white/10"
@@ -31,6 +31,7 @@ const ArticlePage = async () => {
 								key={article.id}
 								href={`/article/${article.id}`}
 								className="block w-full"
+								prefetch={article.type === "TEXT" && index < 6}
 							>
 								<img
 									src={article.poster || "/icon"}
@@ -49,6 +50,7 @@ const ArticlePage = async () => {
 								style={{ viewTransitionName: `article-title-${article.id}` }}
 								// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
 								dangerouslySetInnerHTML={{ __html: article.title }}
+								lang="ko"
 							/>
 							<div
 								style={{
diff --git a/app/components/header/_component/search.tsx b/app/components/header/_component/search.tsx
index 63100e9..c068b8e 100644
--- a/app/components/header/_component/search.tsx
+++ b/app/components/header/_component/search.tsx
@@ -25,7 +25,6 @@ type SearchResult = {
 
 const Search = () => {
 	const tHeader = useTranslations("Header");
-	const [isInputFocused, setIsInputFocused] = useState(false);
 	const [query, setQuery] = useState("");
 	const [results, setResults] = useState<SearchResult[]>([]);
 	const [searchIndex, setSearchIndex] =
@@ -107,7 +106,7 @@ const Search = () => {
 	};
 
 	return (
-		<div className="relative w-5/6 sm:w-28 sm:focus-within:w-64 transition-[width] [transition-duration:300ms]">
+		<div className="group relative w-5/6 sm:w-28 sm:has-[:focus]:w-64 transition-[width] [transition-duration:300ms]">
 			<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
 				<svg
 					aria-hidden="true"
@@ -132,22 +131,20 @@ const Search = () => {
 				type="search"
 				className="input input-sm w-full pl-10 bg-white/30 peer"
 				placeholder={tHeader("search")}
-				onFocus={() => setIsInputFocused(true)}
 				// TODO: animation lib
-				onBlur={() => setTimeout(() => setIsInputFocused(false), 150)}
 			/>
 			<ul
 				className={clsx(
-					isInputFocused ? "block" : "hidden",
-					"peer-focus:opacity-100 transition-opacity opacity-0 absolute z-10 w-full bg-base-100 bg-transparent backdrop-blur-lg shadow-2xl rounded-lg max-h-[70dvh] sm:max-h-[50dvh] overflow-auto",
+					"group-has-[:focus]:opacity-100 group-has-[:focus]:pointer-events-auto pointer-events-none opacity-0 transition-opacity",
+					"absolute z-10 w-full bg-base-100 bg-transparent backdrop-blur-lg shadow-2xl rounded-lg max-h-[70dvh] sm:max-h-[50dvh] overflow-auto",
 				)}
 			>
 				{results.map((res) => (
 					<li
 						key={`${res.type}-${res.id}`}
-						className="hover:bg-slate-400/40 rounded-md p-2"
+						className="hover:bg-slate-400/40 rounded-md p-2 focus-within:bg-slate-400/40"
 					>
-						<Link href={res.url}>
+						<Link href={res.url} className="focus:outline-none">
 							<div className="text-sm font-bold truncate">
 								{[tHeader(res.level), ...res.relativeReadablePath].join(" > ")}
 							</div>
diff --git a/app/components/render-md-server.tsx b/app/components/render-md-server.tsx
index 5a048c6..2eb8cb1 100644
--- a/app/components/render-md-server.tsx
+++ b/app/components/render-md-server.tsx
@@ -1,16 +1,22 @@
 import { components } from "@/components/markdown-render";
 import clsx from "clsx";
 import { compileMDX } from "next-mdx-remote/rsc";
+import type { ComponentProps } from "react";
 
 const RenderMDTextServer = async ({
 	text,
 	className,
-}: { text: string; className?: string }) => {
+	...props
+}: { text: string } & ComponentProps<"div">) => {
 	const { content } = await compileMDX({
 		source: text,
 		components: { ...components },
 	});
-	return <div className={clsx("markdown-body", className)}>{content}</div>;
+	return (
+		<div className={clsx("markdown-body", className)} {...props}>
+			{content}
+		</div>
+	);
 };
 
 export { RenderMDTextServer };