diff --git a/web/app/routes/resources+/LoginDialog.tsx b/web/app/components/LoginDialog.tsx
similarity index 93%
rename from web/app/routes/resources+/LoginDialog.tsx
rename to web/app/components/LoginDialog.tsx
index 4fcf31a..bceade5 100644
--- a/web/app/routes/resources+/LoginDialog.tsx
+++ b/web/app/components/LoginDialog.tsx
@@ -7,7 +7,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "~/components/ui/dialog";
-import { GoogleForm } from "./google-form";
+import { GoogleForm } from "../routes/resources+/google-form";
 
 interface LoginDialogProps {
 	isOpen: boolean;
diff --git a/web/app/routes/translate/components/SelectConform.tsx b/web/app/components/SelectConform.tsx
similarity index 100%
rename from web/app/routes/translate/components/SelectConform.tsx
rename to web/app/components/SelectConform.tsx
diff --git a/web/app/routes/translate/components/AIModelSelector.tsx b/web/app/feature/translate/components/AIModelSelector.tsx
similarity index 95%
rename from web/app/routes/translate/components/AIModelSelector.tsx
rename to web/app/feature/translate/components/AIModelSelector.tsx
index ed443fe..aea288b 100644
--- a/web/app/routes/translate/components/AIModelSelector.tsx
+++ b/web/app/feature/translate/components/AIModelSelector.tsx
@@ -28,7 +28,7 @@ export function AIModelSelector({ onModelSelect }: AIModelSelectorProps) {
 
 	return (
 		<Select value={selectedModel} onValueChange={handleModelChange}>
-			<SelectTrigger className="w-[200px]">
+			<SelectTrigger>
 				<SelectValue placeholder="Select a model" />
 			</SelectTrigger>
 			<SelectContent>
diff --git a/web/app/feature/translate/utils/addNumbersToContent.ts b/web/app/feature/translate/utils/addNumbersToContent.ts
index af69ea2..53a8b7a 100644
--- a/web/app/feature/translate/utils/addNumbersToContent.ts
+++ b/web/app/feature/translate/utils/addNumbersToContent.ts
@@ -18,7 +18,6 @@ export function shouldProcessElement(element: Element): boolean {
 		"style",
 		"textarea",
 		"input",
-		"pre",
 		"noscript",
 		"iframe",
 		"source",
diff --git a/web/app/feature/translate/utils/gemini.ts b/web/app/feature/translate/utils/gemini.ts
index 4e92c55..ddfb41f 100644
--- a/web/app/feature/translate/utils/gemini.ts
+++ b/web/app/feature/translate/utils/gemini.ts
@@ -81,7 +81,9 @@ export async function getGeminiModelResponse(
 	console.error("Max retries reached. Translation failed.");
 	throw lastError || new Error("Translation failed after max retries");
 }
-export async function validateGeminiApiKey(apiKey: string): Promise<boolean> {
+export async function validateGeminiApiKey(
+	apiKey: string,
+): Promise<{ isValid: boolean; errorMessage?: string }> {
 	try {
 		const genAI = new GoogleGenerativeAI(apiKey);
 		const model = genAI.getGenerativeModel({ model: "gemini-pro" });
@@ -90,9 +92,23 @@ export async function validateGeminiApiKey(apiKey: string): Promise<boolean> {
 		const response = await result.response;
 		const text = response.text();
 
-		return text.length > 0;
+		return { isValid: text.length > 0 };
 	} catch (error) {
 		console.error("Gemini API key validation failed:", error);
-		return false;
+		if (
+			error instanceof Error &&
+			error.message.includes("The model is overloaded")
+		) {
+			return {
+				isValid: false,
+				errorMessage:
+					"The model is currently overloaded. Please try again later.",
+			};
+		}
+		return {
+			isValid: false,
+			errorMessage:
+				"Failed to validate the API key. Please check your key and try again.",
+		};
 	}
 }
diff --git a/web/app/routes/reader.$/components/AddTranslationForm.tsx b/web/app/routes/reader.$/components/AddTranslationForm.tsx
index 4f9b33f..e92a9e9 100644
--- a/web/app/routes/reader.$/components/AddTranslationForm.tsx
+++ b/web/app/routes/reader.$/components/AddTranslationForm.tsx
@@ -4,9 +4,9 @@ import { getZodConstraint } from "@conform-to/zod";
 import { useFetcher } from "@remix-run/react";
 import { Save } from "lucide-react";
 import { useState } from "react";
+import { LoginDialog } from "~/components/LoginDialog";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
-import { LoginDialog } from "~/routes/resources+/LoginDialog";
 import type { action } from "../route";
 import { addTranslationSchema } from "../types";
 
diff --git a/web/app/routes/reader.$/components/VoteButtons.tsx b/web/app/routes/reader.$/components/VoteButtons.tsx
index d6d4582..66de118 100644
--- a/web/app/routes/reader.$/components/VoteButtons.tsx
+++ b/web/app/routes/reader.$/components/VoteButtons.tsx
@@ -3,7 +3,7 @@ import { parseWithZod } from "@conform-to/zod";
 import { useFetcher } from "@remix-run/react";
 import { memo, useMemo } from "react";
 import { useState } from "react";
-import { LoginDialog } from "~/routes/resources+/LoginDialog";
+import { LoginDialog } from "~/components/LoginDialog";
 import { cn } from "~/utils/cn";
 import type { TranslationWithVote } from "../types";
 import { voteSchema } from "../types";
diff --git a/web/app/routes/reader.$/route.tsx b/web/app/routes/reader.$/route.tsx
index 7b8b625..14e4ac4 100644
--- a/web/app/routes/reader.$/route.tsx
+++ b/web/app/routes/reader.$/route.tsx
@@ -15,7 +15,6 @@ import { fetchLatestPageVersionWithTranslations } from "./functions/queries.serv
 import { actionSchema } from "./types";
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-	const targetLanguage = await getTargetLanguage(request);
 	const { "*": urlParam } = params;
 
 	if (!urlParam) {
@@ -24,6 +23,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
 	const safeUser = await authenticator.isAuthenticated(request);
 	const safeUserId = safeUser?.id;
+	const targetLanguage = await getTargetLanguage(request);
 	const normalizedUrl = normalizeAndSanitizeUrl(urlParam);
 	const pageData = await fetchLatestPageVersionWithTranslations(
 		normalizedUrl,
@@ -78,15 +78,14 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 };
 
 export default function ReaderView() {
-	const { encodedUrl } = useParams();
-	const { targetLanguage, pageData, safeUser } =
-		useTypedLoaderData<typeof loader>();
+	const { "*": urlParam } = useParams();
+	const { pageData, safeUser } = useTypedLoaderData<typeof loader>();
 
 	if (!pageData) {
 		return <div>Loading...</div>;
 	}
 
-	const originalUrl = encodedUrl ? decodeURIComponent(encodedUrl) : "";
+	const originalUrl = urlParam ? decodeURIComponent(urlParam) : "";
 
 	return (
 		<div>
diff --git a/web/app/routes/translate/functions/mutations.server.ts b/web/app/routes/resources+/functions/mutations.server.ts
similarity index 100%
rename from web/app/routes/translate/functions/mutations.server.ts
rename to web/app/routes/resources+/functions/mutations.server.ts
diff --git a/web/app/routes/translate/components/GeminiApiKeyForm.tsx b/web/app/routes/resources+/gemini-api-key-form.tsx
similarity index 68%
rename from web/app/routes/translate/components/GeminiApiKeyForm.tsx
rename to web/app/routes/resources+/gemini-api-key-form.tsx
index 8c5652f..9cbffb4 100644
--- a/web/app/routes/translate/components/GeminiApiKeyForm.tsx
+++ b/web/app/routes/resources+/gemini-api-key-form.tsx
@@ -1,23 +1,54 @@
 import { useForm } from "@conform-to/react";
 import { getFormProps, getInputProps } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { Form, useActionData } from "@remix-run/react";
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { Link } from "@remix-run/react";
-import { useNavigation } from "@remix-run/react";
+import { useFetcher } from "@remix-run/react";
 import { Save } from "lucide-react";
 import { ExternalLink, Key } from "lucide-react";
 import { TriangleAlert } from "lucide-react";
+import { z } from "zod";
 import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Alert, AlertDescription } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
-import type { action } from "../route";
-import { geminiApiKeySchema } from "../types";
+import { validateGeminiApiKey } from "~/feature/translate/utils/gemini";
+import { authenticator } from "~/utils/auth.server";
+import { updateGeminiApiKey } from "./functions/mutations.server";
+
+export const geminiApiKeySchema = z.object({
+	geminiApiKey: z.string().min(1, "API key is required"),
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+	const safeUser = await authenticator.isAuthenticated(request, {
+		failureRedirect: "/",
+	});
+	const submission = parseWithZod(await request.formData(), {
+		schema: geminiApiKeySchema,
+	});
+	if (submission.status !== "success") {
+		return { lastResult: submission.reply() };
+	}
+
+	const { isValid, errorMessage } = await validateGeminiApiKey(
+		submission.value.geminiApiKey,
+	);
+	if (!isValid) {
+		return {
+			lastResult: submission.reply({
+				formErrors: [errorMessage || "Gemini API key validation failed"],
+			}),
+		};
+	}
+	await updateGeminiApiKey(safeUser.id, submission.value.geminiApiKey);
+	return { lastResult: submission.reply({ resetForm: true }) };
+}
 
 export function GeminiApiKeyForm() {
-	const actionData = useActionData<typeof action>();
-	const navigation = useNavigation();
+	const fetcher = useFetcher<typeof action>();
+	const actionData = fetcher.data;
 	const [form, { geminiApiKey }] = useForm({
 		id: "gemini-api-key-form",
 		lastResult: actionData?.lastResult,
@@ -71,7 +102,11 @@ export function GeminiApiKeyForm() {
 						</AlertDescription>
 					</div>
 				</Alert>
-				<Form method="post" {...getFormProps(form)}>
+				<fetcher.Form
+					method="post"
+					action="/resources/gemini-api-key-form"
+					{...getFormProps(form)}
+				>
 					<div className="flex items-center">
 						<div className="w-full">
 							<Input
@@ -85,12 +120,10 @@ export function GeminiApiKeyForm() {
 						</div>
 						<Button
 							type="submit"
-							name="intent"
-							value="saveGeminiApiKey"
 							size="icon"
-							disabled={navigation.state === "submitting"}
+							disabled={fetcher.state === "submitting"}
 						>
-							{navigation.state === "submitting" ? (
+							{fetcher.state === "submitting" ? (
 								<LoadingSpinner />
 							) : (
 								<Save className="w-4 h-4" />
@@ -107,7 +140,7 @@ export function GeminiApiKeyForm() {
 					{form.errors && (
 						<p className="text-red-500 text-center mt-2">{form.errors}</p>
 					)}
-				</Form>
+				</fetcher.Form>
 			</CardContent>
 		</Card>
 	);
diff --git a/web/app/routes/resources+/google-form.tsx b/web/app/routes/resources+/google-form.tsx
index 8d9c3a9..cf3d1da 100644
--- a/web/app/routes/resources+/google-form.tsx
+++ b/web/app/routes/resources+/google-form.tsx
@@ -4,13 +4,14 @@ import { FcGoogle } from "react-icons/fc";
 import { Button } from "~/components/ui/button";
 import { authenticator } from "~/utils/auth.server";
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export async function action({ request }: ActionFunctionArgs) {
 	return authenticator.authenticate("google", request, {
 		successRedirect: "/api/auth/callback/google",
 		failureRedirect: "/login",
 	});
-};
-export const GoogleForm = ({ redirectTo }: { redirectTo: string }) => {
+}
+
+export function GoogleForm({ redirectTo }: { redirectTo: string }) {
 	const fetcher = useFetcher();
 	return (
 		<fetcher.Form
@@ -31,4 +32,4 @@ export const GoogleForm = ({ redirectTo }: { redirectTo: string }) => {
 			</Button>
 		</fetcher.Form>
 	);
-};
+}
diff --git a/web/app/routes/translate/components/URLTranslationForm.tsx b/web/app/routes/translate/components/URLTranslationForm.tsx
index 25503f5..378bc17 100644
--- a/web/app/routes/translate/components/URLTranslationForm.tsx
+++ b/web/app/routes/translate/components/URLTranslationForm.tsx
@@ -8,9 +8,9 @@ import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
+import { AIModelSelector } from "~/feature/translate/components/AIModelSelector";
 import type { action } from "../route";
 import { urlTranslationSchema } from "../types";
-import { AIModelSelector } from "./AIModelSelector";
 
 export function URLTranslationForm() {
 	const navigation = useNavigation();
@@ -39,14 +39,11 @@ export function URLTranslationForm() {
 						/>
 						<div id={fields.url.errorId}>{fields.url.errors}</div>
 					</div>
-					<AIModelSelector onModelSelect={setSelectedModel} />
+					<div className="w-[200px]">
+						<AIModelSelector onModelSelect={setSelectedModel} />
+					</div>
 					<input type="hidden" name="model" value={selectedModel} />
-					<Button
-						type="submit"
-						name="intent"
-						value="translateUrl"
-						disabled={navigation.state === "submitting"}
-					>
+					<Button type="submit" disabled={navigation.state === "submitting"}>
 						{navigation.state === "submitting" ? (
 							<LoadingSpinner />
 						) : (
@@ -55,7 +52,7 @@ export function URLTranslationForm() {
 					</Button>
 				</div>
 			</Form>
-			{actionData?.intent === "translateUrl" && actionData?.url && (
+			{actionData?.url && (
 				<Alert className="bg-blue-50 border-blue-200 text-blue-800 animate-in fade-in duration-300">
 					<AlertTitle className="text-center">
 						Translation Job Started
diff --git a/web/app/routes/translate/components/UserAITranslationStatus.tsx b/web/app/routes/translate/components/UserAITranslationStatus.tsx
index e2238c9..80fe3bd 100644
--- a/web/app/routes/translate/components/UserAITranslationStatus.tsx
+++ b/web/app/routes/translate/components/UserAITranslationStatus.tsx
@@ -4,15 +4,18 @@ import { Link } from "@remix-run/react";
 import { Form } from "@remix-run/react";
 import { useNavigation } from "@remix-run/react";
 import { RotateCcw } from "lucide-react";
+import { useState } from "react";
 import { LoadingSpinner } from "~/components/LoadingSpinner";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Progress } from "~/components/ui/progress";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import { AIModelSelector } from "~/feature/translate/components/AIModelSelector";
 import { cn } from "~/utils/cn";
 import type { UserAITranslationInfoItem } from "../types";
 import { urlTranslationSchema } from "../types";
+
 type UserAITranslationStatusProps = {
 	userAITranslationInfo: UserAITranslationInfoItem[];
 	targetLanguage: string;
@@ -22,6 +25,7 @@ export function UserAITranslationStatus({
 	userAITranslationInfo = [],
 	targetLanguage,
 }: UserAITranslationStatusProps) {
+	const [selectedModel, setSelectedModel] = useState("gemini-1.5-flash");
 	const navigation = useNavigation();
 	const [form, fields] = useForm({
 		id: "url-re-translation-form",
@@ -99,10 +103,16 @@ export function UserAITranslationStatus({
 														name="url"
 														value={item.pageVersion.page.url}
 													/>
+													<div className="w-full">
+														<AIModelSelector onModelSelect={setSelectedModel} />
+														<input
+															type="hidden"
+															name="model"
+															value={selectedModel}
+														/>
+													</div>
 													<Button
 														type="submit"
-														name="intent"
-														value="translateUrl"
 														className="w-full"
 														disabled={navigation.state === "submitting"}
 													>
diff --git a/web/app/routes/translate/functions/translate-job.server.ts b/web/app/routes/translate/functions/translate-job.server.ts
deleted file mode 100644
index 56a031f..0000000
--- a/web/app/routes/translate/functions/translate-job.server.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { translate } from "~/feature/translate/libs/translation";
-import { addNumbersToContent } from "~/feature/translate/utils/addNumbersToContent";
-import { extractArticle } from "~/feature/translate/utils/extractArticle";
-import { extractNumberedElements } from "~/feature/translate/utils/extractNumberedElements";
-import { fetchWithRetry } from "~/feature/translate/utils/fetchWithRetry";
-
-interface TranslateJobParams {
-	url: string;
-	targetLanguage: string;
-	apiKey: string;
-	userId: number;
-}
-export const translateJob = async (params: TranslateJobParams) => {
-	const html = await fetchWithRetry(params.url);
-	const { content, title } = extractArticle(html, params.url);
-	const numberedContent = addNumbersToContent(content);
-	const extractedNumberedElements = extractNumberedElements(
-		numberedContent,
-		title,
-	);
-	const targetLanguage = params.targetLanguage;
-
-	await translate(
-		params.apiKey,
-		params.userId,
-		targetLanguage,
-		title,
-		numberedContent,
-		extractedNumberedElements,
-		params.url,
-	);
-};
diff --git a/web/app/routes/translate/route.tsx b/web/app/routes/translate/route.tsx
index 79a7a8f..17ef1e7 100644
--- a/web/app/routes/translate/route.tsx
+++ b/web/app/routes/translate/route.tsx
@@ -5,19 +5,17 @@ import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Header } from "~/components/Header";
 import { getTranslateUserQueue } from "~/feature/translate/translate-user-queue";
-import { validateGeminiApiKey } from "~/feature/translate/utils/gemini";
 import { authenticator } from "~/utils/auth.server";
 import { normalizeAndSanitizeUrl } from "~/utils/normalize-and-sanitize-url.server";
 import { getTargetLanguage } from "~/utils/target-language.server";
-import { GeminiApiKeyForm } from "./components/GeminiApiKeyForm";
+import { GeminiApiKeyForm } from "../resources+/gemini-api-key-form";
 import { URLTranslationForm } from "./components/URLTranslationForm";
 import { UserAITranslationStatus } from "./components/UserAITranslationStatus";
-import { updateGeminiApiKey } from "./functions/mutations.server";
 import {
 	getDbUser,
 	listUserAiTranslationInfo,
 } from "./functions/queries.server";
-import { schema } from "./types";
+import { urlTranslationSchema } from "./types";
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const safeUser = await authenticator.isAuthenticated(request, {
@@ -44,59 +42,39 @@ export async function action({ request }: ActionFunctionArgs) {
 	const safeUser = await authenticator.isAuthenticated(request, {
 		failureRedirect: "/",
 	});
-	const submission = parseWithZod(await request.formData(), { schema });
+	const submission = parseWithZod(await request.formData(), {
+		schema: urlTranslationSchema,
+	});
 	if (submission.status !== "success") {
-		return { intent: null, lastResult: submission.reply() };
+		return { lastResult: submission.reply() };
 	}
-	const intent = submission.value.intent;
-
-	switch (submission.value.intent) {
-		case "saveGeminiApiKey": {
-			const isValid = await validateGeminiApiKey(submission.value.geminiApiKey);
-			if (!isValid) {
-				return {
-					intent,
-					lastResult: submission.reply({
-						formErrors: ["Gemini API key validation failed"],
-					}),
-				};
-			}
-			await updateGeminiApiKey(safeUser.id, submission.value.geminiApiKey);
-			return { intent, lastResult: submission.reply({ resetForm: true }) };
-		}
-		case "translateUrl": {
-			const dbUser = await getDbUser(safeUser.id);
-			if (!dbUser?.geminiApiKey) {
-				return {
-					intent,
-					lastResult: submission.reply({
-						formErrors: ["Gemini API key is not set"],
-					}),
-					url: null,
-				};
-			}
-			const targetLanguage = await getTargetLanguage(request);
-			const normalizedUrl = normalizeAndSanitizeUrl(submission.value.url);
-			// Start the translation job in background
-			const queue = getTranslateUserQueue(safeUser.id);
-			const job = await queue.add(`translate-${safeUser.id}`, {
-				url: normalizedUrl,
-				targetLanguage,
-				apiKey: dbUser.geminiApiKey,
-				userId: safeUser.id,
-			});
-			console.log(job.toJSON());
 
-			return {
-				intent,
-				lastResult: submission.reply({ resetForm: true }),
-				url: normalizedUrl,
-			};
-		}
-		default: {
-			throw new Error("Invalid Intent");
-		}
+	const dbUser = await getDbUser(safeUser.id);
+	if (!dbUser?.geminiApiKey) {
+		return {
+			lastResult: submission.reply({
+				formErrors: ["Gemini API key is not set"],
+			}),
+			url: null,
+		};
 	}
+
+	const targetLanguage = await getTargetLanguage(request);
+	const normalizedUrl = normalizeAndSanitizeUrl(submission.value.url);
+	// Start the translation job in background
+	const queue = getTranslateUserQueue(safeUser.id);
+	const job = await queue.add(`translate-${safeUser.id}`, {
+		url: normalizedUrl,
+		targetLanguage,
+		apiKey: dbUser.geminiApiKey,
+		userId: safeUser.id,
+	});
+	console.log(job.toJSON());
+
+	return {
+		lastResult: submission.reply({ resetForm: true }),
+		url: normalizedUrl,
+	};
 }
 
 export default function TranslatePage() {
diff --git a/web/app/routes/translate/types.ts b/web/app/routes/translate/types.ts
index 5d2895a..e9ddb0e 100644
--- a/web/app/routes/translate/types.ts
+++ b/web/app/routes/translate/types.ts
@@ -1,12 +1,6 @@
 import { z } from "zod";
 
-export const geminiApiKeySchema = z.object({
-	intent: z.literal("saveGeminiApiKey"),
-	geminiApiKey: z.string().min(1, "API key is required"),
-});
-
 export const urlTranslationSchema = z.object({
-	intent: z.literal("translateUrl"),
 	url: z
 		.string()
 		.min(1, { message: "URLを入力してください" })
@@ -14,11 +8,6 @@ export const urlTranslationSchema = z.object({
 	model: z.string().min(1, "モデルを選択してください"),
 });
 
-export const schema = z.discriminatedUnion("intent", [
-	geminiApiKeySchema,
-	urlTranslationSchema,
-]);
-
 export const PageVersionTranslationInfoSchema = z.object({
 	id: z.number(),
 	pageVersionId: z.number(),