From fb9ba558a827dbb60994bed09ee899d6df0d12ed Mon Sep 17 00:00:00 2001
From: tomolld <tomoki2757@gmail.com>
Date: Mon, 12 Aug 2024 16:32:10 +0900
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E3=81=8D=E3=81=8F=E4=BD=9C=E3=82=8A?=
 =?UTF-8?q?=E5=A4=89=E3=81=88=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/components/TargetLanguageSelect.tsx   |  63 -----
 web/app/components/ui/command.tsx             | 153 ++++++++++++
 web/app/components/ui/popover.tsx             |  31 +++
 .../translate/functions/mutations.server.ts   |  12 +-
 .../translate/lib/translate.server.ts         |  24 +-
 .../translate/translate-user-queue.ts         |   2 +-
 web/app/features/translate/types.ts           |   6 +-
 web/app/root.tsx                              |  27 ++-
 ...{queries.server.ts => mutations.server.ts} |  15 +-
 web/app/routes/$userName+/edit/route.tsx      | 111 +++++----
 .../$userName+/functions/queries.server.ts    |   1 +
 web/app/routes/$userName+/index.tsx           |  55 ++---
 .../components/TargetLanguageSelector.tsx     |  95 +++++---
 .../components/UserAITranslationStatus.tsx    | 106 +++++++++
 .../page+/$slug+/constants/languages.ts       | 191 +++++++++++++++
 .../$slug+/edit/{index.tsx => _edit.tsx}      |   8 +-
 .../$slug+/edit/functions/mutations.server.ts |  33 ---
 .../$slug+/functions/mutations.server.ts      |  25 +-
 .../page+/$slug+/functions/queries.server.ts  |  11 +
 .../routes/$userName+/page+/$slug+/index.tsx  |  53 +++--
 web/app/routes/_index/index.tsx               | 140 +++++------
 web/app/routes/_index/route.tsx               | 114 ---------
 web/app/routes/api.target-language.tsx        |   7 +-
 web/app/routes/privacy.tsx                    | 175 +++++++-------
 web/app/routes/resources+/footer.tsx          |  10 +-
 .../resources+/gemini-api-key-dialog.tsx      |  24 +-
 web/app/routes/search/route.tsx               |   3 +-
 web/app/routes/terms/route.tsx                | 217 ++++++++++--------
 .../components/TranslationInputForm.tsx       |  55 +----
 .../components/UserAITranslationStatus.tsx    | 154 -------------
 .../translator/functions/mutations.server.ts  |  26 +--
 web/app/routes/translator/route.tsx           |  60 ++---
 web/app/routes/translator/types.ts            |   2 +-
 .../welcome/functions/mutations.server.ts     |   2 +-
 web/app/routes/welcome/route.tsx              |  13 +-
 web/app/utils/target-language.server.ts       |   9 +-
 web/package.json                              |   2 +
 .../migrations/20240812055942_/migration.sql  |  21 ++
 .../migrations/20240812063423_/migration.sql  |   9 +
 web/prisma/schema.prisma                      |   9 +-
 40 files changed, 1135 insertions(+), 939 deletions(-)
 delete mode 100644 web/app/components/TargetLanguageSelect.tsx
 create mode 100644 web/app/components/ui/command.tsx
 create mode 100644 web/app/components/ui/popover.tsx
 rename web/app/routes/$userName+/edit/functions/{queries.server.ts => mutations.server.ts} (51%)
 create mode 100644 web/app/routes/$userName+/page+/$slug+/components/UserAITranslationStatus.tsx
 create mode 100644 web/app/routes/$userName+/page+/$slug+/constants/languages.ts
 rename web/app/routes/$userName+/page+/$slug+/edit/{index.tsx => _edit.tsx} (95%)
 delete mode 100644 web/app/routes/_index/route.tsx
 delete mode 100644 web/app/routes/translator/components/UserAITranslationStatus.tsx
 create mode 100644 web/prisma/migrations/20240812055942_/migration.sql
 create mode 100644 web/prisma/migrations/20240812063423_/migration.sql

diff --git a/web/app/components/TargetLanguageSelect.tsx b/web/app/components/TargetLanguageSelect.tsx
deleted file mode 100644
index 27842b6e..00000000
--- a/web/app/components/TargetLanguageSelect.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useFetcher } from "@remix-run/react";
-import { useCallback, useEffect, useState } from "react";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "~/components/ui/select";
-
-type TargetLanguage = {
-	code: string;
-	name: string;
-};
-
-const targetLanguages: TargetLanguage[] = [
-	{ code: "ja", name: "日本語" },
-	{ code: "en", name: "English" },
-	{ code: "zh", name: "中文" },
-	{ code: "ko", name: "한국어" },
-	{ code: "es", name: "Español" },
-	{ code: "fr", name: "Français" },
-];
-
-export function TargetLanguageSelect() {
-	const fetcher = useFetcher<{ targetLanguage: string }>();
-	const [currentLanguage, setCurrentLanguage] = useState(
-		fetcher.data?.targetLanguage ?? "ja",
-	);
-
-	const loadLanguage = useCallback(() => {
-		if (fetcher.state === "idle" && !fetcher.data) {
-			fetcher.load("/api/target-language");
-		}
-	}, [fetcher]);
-
-	useEffect(() => {
-		loadLanguage();
-	}, [loadLanguage]);
-
-	const handleLanguageChange = (value: string) => {
-		setCurrentLanguage(value);
-		fetcher.submit(
-			{ targetLanguage: value },
-			{ method: "post", action: "/api/target-language" },
-		);
-	};
-
-	return (
-		<Select value={currentLanguage} onValueChange={handleLanguageChange}>
-			<SelectTrigger className="w-[100px]">
-				<SelectValue placeholder="翻訳言語を選択" />
-			</SelectTrigger>
-			<SelectContent>
-				{targetLanguages.map((lang) => (
-					<SelectItem key={lang.code} value={lang.code}>
-						{lang.name}
-					</SelectItem>
-				))}
-			</SelectContent>
-		</Select>
-	);
-}
diff --git a/web/app/components/ui/command.tsx b/web/app/components/ui/command.tsx
new file mode 100644
index 00000000..8b038be9
--- /dev/null
+++ b/web/app/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+
+import { Dialog, DialogContent } from "~/components/ui/dialog";
+import { cn } from "~/utils/cn";
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};
diff --git a/web/app/components/ui/popover.tsx b/web/app/components/ui/popover.tsx
new file mode 100644
index 00000000..638d5194
--- /dev/null
+++ b/web/app/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "~/utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/web/app/features/translate/functions/mutations.server.ts b/web/app/features/translate/functions/mutations.server.ts
index ec72b372..a68eb811 100644
--- a/web/app/features/translate/functions/mutations.server.ts
+++ b/web/app/features/translate/functions/mutations.server.ts
@@ -38,24 +38,18 @@ export async function getOrCreatePageTranslationInfo(
 }
 
 export async function updateUserAITranslationInfo(
-	userId: number,
-	slug: string,
-	targetLanguage: string,
+	userAITranslationInfoId: number,
 	status: string,
 	progress: number,
 ) {
 	return await prisma.userAITranslationInfo.update({
 		where: {
-			userId_slug_targetLanguage: {
-				userId,
-				slug,
-				targetLanguage,
-			},
+			id: userAITranslationInfoId,
 		},
 		data: {
 			aiTranslationStatus: status,
 			aiTranslationProgress: progress,
-			lastTranslatedAt: new Date(),
+			createdAt: new Date(),
 		},
 	});
 }
diff --git a/web/app/features/translate/lib/translate.server.ts b/web/app/features/translate/lib/translate.server.ts
index b804914e..bd2d3339 100644
--- a/web/app/features/translate/lib/translate.server.ts
+++ b/web/app/features/translate/lib/translate.server.ts
@@ -10,14 +10,12 @@ import { extractTranslations } from "../utils/extractTranslations.server";
 import { splitNumberedElements } from "../utils/splitNumberedElements.server";
 
 export async function translate(params: TranslateJobParams) {
-	await updateUserAITranslationInfo(
-		params.userId,
-		params.slug,
-		params.targetLanguage,
-		"in_progress",
-		0,
-	);
 	try {
+		await updateUserAITranslationInfo(
+			params.userAITranslationInfoId,
+			"in_progress",
+			0,
+		);
 		const chunks = splitNumberedElements(params.numberedElements);
 		const totalChunks = chunks.length;
 		for (let i = 0; i < chunks.length; i++) {
@@ -33,26 +31,20 @@ export async function translate(params: TranslateJobParams) {
 			);
 			const progress = ((i + 1) / totalChunks) * 100;
 			await updateUserAITranslationInfo(
-				params.userId,
-				params.slug,
-				params.targetLanguage,
+				params.userAITranslationInfoId,
 				"in_progress",
 				progress,
 			);
 		}
 		await updateUserAITranslationInfo(
-			params.userId,
-			params.slug,
-			params.targetLanguage,
+			params.userAITranslationInfoId,
 			"completed",
 			100,
 		);
 	} catch (error) {
 		console.error("Background translation job failed:", error);
 		await updateUserAITranslationInfo(
-			params.userId,
-			params.slug,
-			params.targetLanguage,
+			params.userAITranslationInfoId,
 			"failed",
 			0,
 		);
diff --git a/web/app/features/translate/translate-user-queue.ts b/web/app/features/translate/translate-user-queue.ts
index 0ec1e3b2..368f2f39 100644
--- a/web/app/features/translate/translate-user-queue.ts
+++ b/web/app/features/translate/translate-user-queue.ts
@@ -2,7 +2,7 @@ import { Queue } from "~/utils/queue.server";
 import { translate } from "./lib/translate.server";
 import type { TranslateJobParams } from "./types";
 
-const QUEUE_VERSION = 4;
+const QUEUE_VERSION = 2;
 
 export const getTranslateUserQueue = (userId: number) => {
 	return Queue<TranslateJobParams>(
diff --git a/web/app/features/translate/types.ts b/web/app/features/translate/types.ts
index b1095775..d47625e5 100644
--- a/web/app/features/translate/types.ts
+++ b/web/app/features/translate/types.ts
@@ -4,13 +4,13 @@ export type NumberedElement = {
 };
 
 export interface TranslateJobParams {
+	userId: number;
+	pageId: number;
+	userAITranslationInfoId: number;
 	geminiApiKey: string;
 	aiModel: string;
-	userId: number;
 	targetLanguage: string;
-	pageId: number;
 	title: string;
 	numberedContent: string;
 	numberedElements: NumberedElement[];
-	slug: string;
 }
diff --git a/web/app/root.tsx b/web/app/root.tsx
index 7f071c26..843fb323 100644
--- a/web/app/root.tsx
+++ b/web/app/root.tsx
@@ -42,20 +42,29 @@ export function Layout({ children }: { children: React.ReactNode }) {
 	);
 }
 
-function CommonLayout({ children }: { children: React.ReactNode }) {
+function CommonLayout({
+	children,
+	showHeaderFooter = true,
+}: { children: React.ReactNode; showHeaderFooter?: boolean }) {
 	const { safeUser } = useTypedLoaderData<typeof loader>();
 	return (
 		<>
-			<Header safeUser={safeUser} />
-			<div className="container mx-auto">{children}</div>
-			<Footer safeUser={safeUser} />
+			{showHeaderFooter && <Header safeUser={safeUser} />}
+			<div className="flex flex-col min-h-screen">
+				<main className="flex-grow">
+					<div className="container mx-auto">{children}</div>
+				</main>
+				{showHeaderFooter && <Footer safeUser={safeUser} />}
+			</div>
 		</>
 	);
 }
 
 export default function App() {
 	const location = useLocation();
-	const isEditPage = /^\/\w+\/page\/[\w-]+\/edit$/.test(location.pathname);
+	const isSpecialLayout =
+		/^\/\w+\/page\/[\w-]+\/edit$/.test(location.pathname) ||
+		location.pathname === "/welcome";
 
 	return (
 		<ThemeProvider
@@ -64,13 +73,9 @@ export default function App() {
 			enableSystem
 			disableTransitionOnChange
 		>
-			{isEditPage ? (
+			<CommonLayout showHeaderFooter={!isSpecialLayout}>
 				<Outlet />
-			) : (
-				<CommonLayout>
-					<Outlet />
-				</CommonLayout>
-			)}
+			</CommonLayout>
 		</ThemeProvider>
 	);
 }
diff --git a/web/app/routes/$userName+/edit/functions/queries.server.ts b/web/app/routes/$userName+/edit/functions/mutations.server.ts
similarity index 51%
rename from web/app/routes/$userName+/edit/functions/queries.server.ts
rename to web/app/routes/$userName+/edit/functions/mutations.server.ts
index 872f6250..b6465788 100644
--- a/web/app/routes/$userName+/edit/functions/queries.server.ts
+++ b/web/app/routes/$userName+/edit/functions/mutations.server.ts
@@ -1,16 +1,5 @@
-import type { Page } from "@prisma/client";
-import type { SafeUser } from "~/types";
-import { prisma } from "~/utils/prisma";
 import type { User } from "@prisma/client";
-
-export async function getUserByUserName(userName: string) {
-	return prisma.user.findUnique({
-		where: {
-			userName,
-		},
-	});
-}
-
+import { prisma } from "~/utils/prisma";
 export async function updateUser(userId: number, data: Partial<User>) {
 	return prisma.user.update({
 		where: {
@@ -18,4 +7,4 @@ export async function updateUser(userId: number, data: Partial<User>) {
 		},
 		data,
 	});
-}
\ No newline at end of file
+}
diff --git a/web/app/routes/$userName+/edit/route.tsx b/web/app/routes/$userName+/edit/route.tsx
index a5536a0f..e643f32a 100644
--- a/web/app/routes/$userName+/edit/route.tsx
+++ b/web/app/routes/$userName+/edit/route.tsx
@@ -1,72 +1,85 @@
-
+import { getFormProps, getInputProps, useForm } from "@conform-to/react";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
-import { Form, useLoaderData } from "@remix-run/react";
+import { Form } from "@remix-run/react";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { authenticator } from "~/utils/auth.server";
-import { getUserByUserName, updateUser } from "./functions/queries.server";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { commitSession, getSession } from "~/utils/session.server";
+import { updateUser } from "./functions/mutations.server";
 
 const schema = z.object({
-  displayName: z.string().min(1, "Display name is required").max(50, "Display name must be 50 characters or less"),
+	displayName: z
+		.string()
+		.min(1, "Display name is required")
+		.max(50, "Display name must be 50 characters or less"),
 });
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-  const currentUser = await authenticator.isAuthenticated(request, {
-    failureRedirect: "/login",
-  });
+	const safeUser = await authenticator.isAuthenticated(request, {
+		failureRedirect: "/login",
+	});
+	if (safeUser.userName !== params.userName) {
+		throw new Response("Unauthorized", { status: 403 });
+	}
 
-  const user = await getUserByUserName(params.userName || "");
-  if (!user) throw new Response("Not Found", { status: 404 });
-
-  if (user.userName !== params.userName) {
-    throw new Response("Unauthorized", { status: 403 });
-  }
-
-  return typedjson({ user });
+	return typedjson({ safeUser });
 };
 
-export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const currentUser = await authenticator.isAuthenticated(request, {
-    failureRedirect: "/login",
-  });
-
-  const formData = await request.formData();
-  const displayName = formData.get("displayName") as string;
+export const action = async ({ request }: ActionFunctionArgs) => {
+	const safeUser = await authenticator.isAuthenticated(request, {
+		failureRedirect: "/login",
+	});
+	const submission = parseWithZod(await request.formData(), { schema });
 
-  const result = schema.safeParse({ displayName });
+	if (submission.status !== "success") {
+		return submission.reply();
+	}
 
-  if (!result.success) {
-    return typedjson({ errors: result.error.flatten().fieldErrors });
-  }
+	const { displayName } = submission.value;
 
-  await updateUser(currentUser.id, { displayName });
+	await updateUser(safeUser.id, { displayName });
+	const session = await getSession(request.headers.get("Cookie"));
+	const updatedUser = { ...safeUser, displayName };
+	session.set("user", updatedUser);
 
-  return redirect(`/${params.userName}`);
+	return redirect(`/${safeUser.userName}`, {
+		headers: {
+			"Set-Cookie": await commitSession(session),
+		},
+	});
 };
 
 export default function EditProfile() {
-  const { user } = useTypedLoaderData<typeof loader>();
+	const { safeUser } = useTypedLoaderData<typeof loader>();
 
-  return (
-    <div className="container mx-auto mt-10">
-      <h1 className="text-3xl font-bold mb-6">Edit Profile</h1>
-      <Form method="post" className="space-y-4">
-        <div>
-          <Label htmlFor="displayName">Display Name</Label>
-          <Input
-            type="text"
-            id="displayName"
-            name="displayName"
-            defaultValue={user.displayName}
-            required
-          />
-        </div>
-        <Button type="submit">Save Changes</Button>
-      </Form>
-    </div>
-  );
-}
\ No newline at end of file
+	const [form, { displayName }] = useForm({
+		id: "edit-profile-form",
+		constraint: getZodConstraint(schema),
+		shouldValidate: "onBlur",
+		shouldRevalidate: "onInput",
+		defaultValue: { displayName: safeUser.displayName },
+		onValidate({ formData }) {
+			return parseWithZod(formData, { schema });
+		},
+	});
+	return (
+		<div className="container mx-auto mt-10">
+			<h1 className="text-3xl font-bold mb-6">Edit Profile</h1>
+			<Form method="post" {...getFormProps(form)} className="space-y-4">
+				<div>
+					<Label htmlFor={displayName.id}>Display Name</Label>
+					<Input {...getInputProps(displayName, { type: "text" })} />
+					<div id={displayName.errorId} className="text-red-500 text-sm mt-1">
+						{displayName.errors}
+					</div>
+				</div>
+				<Button type="submit">Save Changes</Button>
+			</Form>
+		</div>
+	);
+}
diff --git a/web/app/routes/$userName+/functions/queries.server.ts b/web/app/routes/$userName+/functions/queries.server.ts
index 0947cc20..c8964033 100644
--- a/web/app/routes/$userName+/functions/queries.server.ts
+++ b/web/app/routes/$userName+/functions/queries.server.ts
@@ -2,6 +2,7 @@ import type { Page } from "@prisma/client";
 import type { SafeUser } from "~/types";
 import { prisma } from "~/utils/prisma";
 import type { UserWithPages } from "../types";
+
 export async function getUserWithPages(
 	userName: string,
 ): Promise<UserWithPages | null> {
diff --git a/web/app/routes/$userName+/index.tsx b/web/app/routes/$userName+/index.tsx
index f41924a5..4cc64fc3 100644
--- a/web/app/routes/$userName+/index.tsx
+++ b/web/app/routes/$userName+/index.tsx
@@ -1,5 +1,6 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import { Link } from "@remix-run/react";
 import { Button } from "~/components/ui/button";
 import {
 	Card,
@@ -11,7 +12,6 @@ import {
 import { authenticator } from "~/utils/auth.server";
 import { getUserWithPages } from "./functions/queries.server";
 import type { UserWithPages } from "./types";
-import { Link } from "@remix-run/react";
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	const { userName } = params;
 	if (!userName) throw new Error("Username is required");
@@ -35,34 +35,37 @@ export default function UserProfile() {
 	return (
 		<div className="container mx-auto mt-10">
 			<div className="flex justify-between items-center mb-6">
-				<h1 className="text-3xl font-bold">
-					{userWithPages.displayName}
-				</h1>
+				<h1 className="text-3xl font-bold">{userWithPages.displayName}</h1>
+				{isOwnProfile && (
+					<Link to={`/${userWithPages.userName}/edit`}>
+						<Button variant="outline">Edit Profile</Button>
+					</Link>
+				)}
 			</div>
 
 			<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {userWithPages.pages.map((page) => (
-          <Link
-            to={`/${userWithPages.userName}/page/${page.slug}`}
-            key={page.id}
-            className="h-full"
-          >
-            <Card className="flex flex-col h-full">
-              <CardHeader>
-                <CardTitle className="line-clamp-2">{page.title}</CardTitle>
-                <CardDescription>
-                  {new Date(page.createdAt).toLocaleDateString()}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex-grow">
-                <p className="text-sm text-gray-600 line-clamp-4">
-                  {page.content}
-                </p>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
+				{userWithPages.pages.map((page) => (
+					<Link
+						to={`/${userWithPages.userName}/page/${page.slug}`}
+						key={page.id}
+						className="h-full"
+					>
+						<Card className="flex flex-col h-full">
+							<CardHeader>
+								<CardTitle className="line-clamp-2">{page.title}</CardTitle>
+								<CardDescription>
+									{new Date(page.createdAt).toLocaleDateString()}
+								</CardDescription>
+							</CardHeader>
+							<CardContent className="flex-grow">
+								<p className="text-sm text-gray-600 line-clamp-4">
+									{page.content}
+								</p>
+							</CardContent>
+						</Card>
+					</Link>
+				))}
+			</div>
 
 			{userWithPages.pages.length === 0 && (
 				<p className="text-center text-gray-500 mt-10">
diff --git a/web/app/routes/$userName+/page+/$slug+/components/TargetLanguageSelector.tsx b/web/app/routes/$userName+/page+/$slug+/components/TargetLanguageSelector.tsx
index 1f329b12..033396dd 100644
--- a/web/app/routes/$userName+/page+/$slug+/components/TargetLanguageSelector.tsx
+++ b/web/app/routes/$userName+/page+/$slug+/components/TargetLanguageSelector.tsx
@@ -1,29 +1,26 @@
 import { useFetcher } from "@remix-run/react";
+import { Check, ChevronsUpDown } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
+import { Button } from "~/components/ui/button";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "~/components/ui/select";
-
-type TargetLanguage = {
-	code: string;
-	name: string;
-};
-
-const targetLanguages: TargetLanguage[] = [
-	{ code: "ja", name: "日本語" },
-	{ code: "en", name: "English" },
-	{ code: "zh", name: "中文" },
-	{ code: "ko", name: "한국어" },
-	{ code: "es", name: "Español" },
-	{ code: "fr", name: "Français" },
-];
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "~/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "~/components/ui/popover";
+import { cn } from "~/utils/cn";
+import { targetLanguages } from "../constants/languages";
 
 export default function TargetLanguageSelector() {
 	const fetcher = useFetcher<{ targetLanguage: string }>();
+	const [open, setOpen] = useState(false);
 	const [currentLanguage, setCurrentLanguage] = useState(
 		fetcher.data?.targetLanguage ?? "ja",
 	);
@@ -31,6 +28,8 @@ export default function TargetLanguageSelector() {
 	const loadLanguage = useCallback(() => {
 		if (fetcher.state === "idle" && !fetcher.data) {
 			fetcher.load("/api/target-language");
+		} else if (fetcher.state === "idle" && fetcher.data?.targetLanguage) {
+			setCurrentLanguage(fetcher.data.targetLanguage);
 		}
 	}, [fetcher]);
 
@@ -40,6 +39,7 @@ export default function TargetLanguageSelector() {
 
 	const handleLanguageChange = (value: string) => {
 		setCurrentLanguage(value);
+		setOpen(false);
 		fetcher.submit(
 			{ targetLanguage: value },
 			{ method: "post", action: "/api/target-language" },
@@ -47,17 +47,48 @@ export default function TargetLanguageSelector() {
 	};
 
 	return (
-		<Select value={currentLanguage} onValueChange={handleLanguageChange}>
-			<SelectTrigger className="w-[100px]">
-				<SelectValue placeholder="翻訳言語を選択" />
-			</SelectTrigger>
-			<SelectContent>
-				{targetLanguages.map((lang) => (
-					<SelectItem key={lang.code} value={lang.code}>
-						{lang.name}
-					</SelectItem>
-				))}
-			</SelectContent>
-		</Select>
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					className="w-[200px] justify-between"
+				>
+					{currentLanguage
+						? targetLanguages.find((lang) => lang.code === currentLanguage)
+								?.name
+						: "select"}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0">
+				<Command>
+					<CommandInput placeholder="search..." />
+					<CommandList>
+						<CommandEmpty>No languages found.</CommandEmpty>
+						<CommandGroup>
+							{targetLanguages.map((lang) => (
+								<CommandItem
+									key={lang.code}
+									value={lang.code}
+									onSelect={handleLanguageChange}
+								>
+									<Check
+										className={cn(
+											"mr-2 h-4 w-4",
+											currentLanguage === lang.code
+												? "opacity-100"
+												: "opacity-0",
+										)}
+									/>
+									{lang.name}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
 	);
 }
diff --git a/web/app/routes/$userName+/page+/$slug+/components/UserAITranslationStatus.tsx b/web/app/routes/$userName+/page+/$slug+/components/UserAITranslationStatus.tsx
new file mode 100644
index 00000000..bf2b698e
--- /dev/null
+++ b/web/app/routes/$userName+/page+/$slug+/components/UserAITranslationStatus.tsx
@@ -0,0 +1,106 @@
+import type { UserAITranslationInfo } from "@prisma/client";
+import { useRevalidator } from "@remix-run/react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useEffect, useState } from "react";
+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 { cn } from "~/utils/cn";
+
+type UserAITranslationStatusProps = {
+	userAITranslationInfo: UserAITranslationInfo[] | null;
+};
+
+export function UserAITranslationStatus({
+	userAITranslationInfo,
+}: UserAITranslationStatusProps) {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const revalidator = useRevalidator();
+	useEffect(() => {
+		const intervalId = setInterval(() => {
+			revalidator.revalidate();
+		}, 5000);
+
+		return () => clearInterval(intervalId);
+	}, [revalidator]);
+
+	if (!userAITranslationInfo || userAITranslationInfo.length === 0) {
+		return null;
+	}
+
+	return (
+		<Card className="mt-6">
+			<CardHeader className="flex flex-row items-center justify-between">
+				<CardTitle>Translation Status</CardTitle>
+				<Button
+					variant="ghost"
+					size="sm"
+					onClick={() => setIsOpen(!isOpen)}
+					aria-label={
+						isOpen ? "Close translation status" : "Open translation status"
+					}
+				>
+					{isOpen ? (
+						<ChevronUp className="h-4 w-4" />
+					) : (
+						<ChevronDown className="h-4 w-4" />
+					)}
+				</Button>
+			</CardHeader>
+			{isOpen && (
+				<CardContent>
+					<ScrollArea className="h-[300px]">
+						<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+							{userAITranslationInfo.map((item) => (
+								<Card key={item.id} className="flex flex-col h-full">
+									<CardHeader>
+										<CardTitle className="text-sm truncate flex flex-col h-10">
+											<Badge
+												className="mt-2 w-full flex justify-center"
+												variant={getVariantForStatus(item.aiTranslationStatus)}
+											>
+												{item.aiTranslationStatus}
+											</Badge>
+										</CardTitle>
+									</CardHeader>
+									<CardContent className="flex-grow flex flex-col">
+										<Progress
+											value={item.aiTranslationProgress}
+											className={cn(
+												"mt-2",
+												item.aiTranslationStatus === "in_progress" &&
+													"bg-blue-400 animate-pulse",
+											)}
+										/>
+										<p className="text-xs mt-2">{item.aiModel}</p>
+										<p className="text-xs mt-2">
+											{new Date(item.createdAt).toLocaleString()}
+										</p>
+									</CardContent>
+								</Card>
+							))}
+						</div>
+					</ScrollArea>
+				</CardContent>
+			)}
+		</Card>
+	);
+}
+
+function getVariantForStatus(
+	status: string,
+): "default" | "secondary" | "destructive" | "outline" {
+	switch (status) {
+		case "completed":
+			return "default";
+		case "in_progress":
+			return "secondary";
+		case "failed":
+			return "destructive";
+		default:
+			return "outline";
+	}
+}
diff --git a/web/app/routes/$userName+/page+/$slug+/constants/languages.ts b/web/app/routes/$userName+/page+/$slug+/constants/languages.ts
new file mode 100644
index 00000000..beea3d5c
--- /dev/null
+++ b/web/app/routes/$userName+/page+/$slug+/constants/languages.ts
@@ -0,0 +1,191 @@
+export type TargetLanguage = {
+	code: string;
+	name: string;
+};
+
+export const targetLanguages: TargetLanguage[] = [
+	{ code: "ab", name: "Аҧсуа" },
+	{ code: "aa", name: "Afaraf" },
+	{ code: "af", name: "Afrikaans" },
+	{ code: "ak", name: "Akan" },
+	{ code: "sq", name: "Shqip" },
+	{ code: "am", name: "አማርኛ" },
+	{ code: "ar", name: "العربية" },
+	{ code: "an", name: "Aragonés" },
+	{ code: "hy", name: "Հայերեն" },
+	{ code: "as", name: "অসমীয়া" },
+	{ code: "av", name: "авар мацӀ" },
+	{ code: "ae", name: "avesta" },
+	{ code: "ay", name: "aymar aru" },
+	{ code: "az", name: "azərbaycan dili" },
+	{ code: "bm", name: "bamanankan" },
+	{ code: "ba", name: "башҡорт теле" },
+	{ code: "eu", name: "euskara" },
+	{ code: "be", name: "Беларуская" },
+	{ code: "bn", name: "বাংলা" },
+	{ code: "bh", name: "भोजपुरी" },
+	{ code: "bi", name: "Bislama" },
+	{ code: "bs", name: "bosanski jezik" },
+	{ code: "br", name: "brezhoneg" },
+	{ code: "bg", name: "български език" },
+	{ code: "my", name: "ဗမာစာ" },
+	{ code: "ca", name: "Català" },
+	{ code: "ch", name: "Chamoru" },
+	{ code: "ce", name: "нохчийн мотт" },
+	{ code: "ny", name: "chiCheŵa" },
+	{ code: "zh", name: "中文" },
+	{ code: "cv", name: "чӑваш чӗлхи" },
+	{ code: "kw", name: "Kernewek" },
+	{ code: "co", name: "corsu" },
+	{ code: "cr", name: "ᓀᐦᐃᔭᐍᐏᐣ" },
+	{ code: "hr", name: "hrvatski" },
+	{ code: "cs", name: "česky" },
+	{ code: "da", name: "dansk" },
+	{ code: "dv", name: "ދިވެހި" },
+	{ code: "nl", name: "Nederlands" },
+	{ code: "dz", name: "རྫོང་ཁ" },
+	{ code: "en", name: "English" },
+	{ code: "eo", name: "Esperanto" },
+	{ code: "et", name: "eesti" },
+	{ code: "ee", name: "Eʋegbe" },
+	{ code: "fo", name: "føroyskt" },
+	{ code: "fj", name: "vosa Vakaviti" },
+	{ code: "fi", name: "suomi" },
+	{ code: "fr", name: "français" },
+	{ code: "ff", name: "Fulfulde" },
+	{ code: "gl", name: "Galego" },
+	{ code: "ka", name: "ქართული" },
+	{ code: "de", name: "Deutsch" },
+	{ code: "el", name: "Ελληνικά" },
+	{ code: "gn", name: "Avañeẽ" },
+	{ code: "gu", name: "ગુજરાતી" },
+	{ code: "ht", name: "Kreyòl ayisyen" },
+	{ code: "ha", name: "Hausa" },
+	{ code: "he", name: "עברית" },
+	{ code: "hz", name: "Otjiherero" },
+	{ code: "hi", name: "हिन्दी" },
+	{ code: "ho", name: "Hiri Motu" },
+	{ code: "hu", name: "Magyar" },
+	{ code: "ia", name: "Interlingua" },
+	{ code: "id", name: "Bahasa Indonesia" },
+	{ code: "ie", name: "Interlingue" },
+	{ code: "ga", name: "Gaeilge" },
+	{ code: "ig", name: "Asụsụ Igbo" },
+	{ code: "ik", name: "Iñupiaq" },
+	{ code: "io", name: "Ido" },
+	{ code: "is", name: "Íslenska" },
+	{ code: "it", name: "Italiano" },
+	{ code: "iu", name: "ᐃᓄᒃᑎᑐᑦ" },
+	{ code: "ja", name: "日本語" },
+	{ code: "jv", name: "basa Jawa" },
+	{ code: "kl", name: "kalaallisut" },
+	{ code: "kn", name: "ಕನ್ನಡ" },
+	{ code: "kr", name: "Kanuri" },
+	{ code: "ks", name: "कश्मीरी" },
+	{ code: "kk", name: "Қазақ тілі" },
+	{ code: "km", name: "ភាសាខ្មែរ" },
+	{ code: "ki", name: "Gĩkũyũ" },
+	{ code: "rw", name: "Ikinyarwanda" },
+	{ code: "ky", name: "кыргыз тили" },
+	{ code: "kv", name: "коми кыв" },
+	{ code: "kg", name: "KiKongo" },
+	{ code: "ko", name: "한국어" },
+	{ code: "ku", name: "Kurdî" },
+	{ code: "kj", name: "Kuanyama" },
+	{ code: "la", name: "latine" },
+	{ code: "lb", name: "Lëtzebuergesch" },
+	{ code: "lg", name: "Luganda" },
+	{ code: "li", name: "Limburgs" },
+	{ code: "ln", name: "Lingála" },
+	{ code: "lo", name: "ພາສາລາວ" },
+	{ code: "lt", name: "lietuvių kalba" },
+	{ code: "lu", name: "Kiluba" },
+	{ code: "lv", name: "latviešu valoda" },
+	{ code: "gv", name: "Gaelg" },
+	{ code: "mk", name: "македонски јазик" },
+	{ code: "mg", name: "Malagasy fiteny" },
+	{ code: "ms", name: "bahasa Melayu" },
+	{ code: "ml", name: "മലയാളം" },
+	{ code: "mt", name: "Malti" },
+	{ code: "mi", name: "te reo Māori" },
+	{ code: "mr", name: "मराठी" },
+	{ code: "mh", name: "Kajin M̧ajeļ" },
+	{ code: "mn", name: "монгол" },
+	{ code: "na", name: "Ekakairũ Naoero" },
+	{ code: "nv", name: "Diné bizaad" },
+	{ code: "nd", name: "isiNdebele" },
+	{ code: "ne", name: "नेपाली" },
+	{ code: "ng", name: "Owambo" },
+	{ code: "nb", name: "Norsk bokmål" },
+	{ code: "nn", name: "Norsk nynorsk" },
+	{ code: "no", name: "Norsk" },
+	{ code: "ii", name: "ꆈꌠ꒿ Nuosuhxop" },
+	{ code: "nr", name: "isiNdebele" },
+	{ code: "oc", name: "Occitan" },
+	{ code: "oj", name: "ᐊᓂᔑᓈᐯᒧᐎᓐ" },
+	{ code: "cu", name: "ѩзыкъ словѣньскъ" },
+	{ code: "om", name: "Afaan Oromoo" },
+	{ code: "or", name: "ଓଡ଼ିଆ" },
+	{ code: "os", name: "ирон æвзаг" },
+	{ code: "pa", name: "ਪੰਜਾਬੀ" },
+	{ code: "pi", name: "पाऴि" },
+	{ code: "fa", name: "فارسی" },
+	{ code: "pl", name: "polski" },
+	{ code: "ps", name: "پښتو" },
+	{ code: "pt", name: "Português" },
+	{ code: "qu", name: "Runa Simi" },
+	{ code: "rm", name: "rumantsch grischun" },
+	{ code: "rn", name: "kiRundi" },
+	{ code: "ro", name: "română" },
+	{ code: "ru", name: "русский язык" },
+	{ code: "sa", name: "संस्कृतम्" },
+	{ code: "sc", name: "sardu" },
+	{ code: "sd", name: "सिन्धी" },
+	{ code: "se", name: "Davvisámegiella" },
+	{ code: "sm", name: "gagana faa Samoa" },
+	{ code: "sg", name: "yângâ tî sängö" },
+	{ code: "sr", name: "српски језик" },
+	{ code: "gd", name: "Gàidhlig" },
+	{ code: "sn", name: "chiShona" },
+	{ code: "si", name: "සිංහල" },
+	{ code: "sk", name: "slovenčina" },
+	{ code: "sl", name: "slovenščina" },
+	{ code: "so", name: "Soomaaliga" },
+	{ code: "st", name: "Sesotho" },
+	{ code: "es", name: "español" },
+	{ code: "su", name: "Basa Sunda" },
+	{ code: "sw", name: "Kiswahili" },
+	{ code: "ss", name: "SiSwati" },
+	{ code: "sv", name: "svenska" },
+	{ code: "ta", name: "தமிழ்" },
+	{ code: "te", name: "తెలుగు" },
+	{ code: "tg", name: "тоҷикӣ" },
+	{ code: "th", name: "ไทย" },
+	{ code: "ti", name: "ትግርኛ" },
+	{ code: "bo", name: "བོད་ཡིག" },
+	{ code: "tk", name: "Türkmen" },
+	{ code: "tl", name: "Wikang Tagalog" },
+	{ code: "tn", name: "Setswana" },
+	{ code: "to", name: "faka Tonga" },
+	{ code: "tr", name: "Türkçe" },
+	{ code: "ts", name: "Xitsonga" },
+	{ code: "tt", name: "татарча" },
+	{ code: "tw", name: "Twi" },
+	{ code: "ty", name: "Reo Tahiti" },
+	{ code: "ug", name: "Uyƣurqə" },
+	{ code: "uk", name: "українська" },
+	{ code: "ur", name: "اردو" },
+	{ code: "uz", name: "zbek" },
+	{ code: "ve", name: "Tshivenḓa" },
+	{ code: "vi", name: "Tiếng Việt" },
+	{ code: "vo", name: "Volapük" },
+	{ code: "wa", name: "Walon" },
+	{ code: "cy", name: "Cymraeg" },
+	{ code: "wo", name: "Wollof" },
+	{ code: "fy", name: "Frysk" },
+	{ code: "xh", name: "isiXhosa" },
+	{ code: "yi", name: "ייִדיש" },
+	{ code: "yo", name: "Yorùbá" },
+	{ code: "za", name: "Saɯ cueŋƅ" },
+	{ code: "zu", name: "isiZulu" },
+];
diff --git a/web/app/routes/$userName+/page+/$slug+/edit/index.tsx b/web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx
similarity index 95%
rename from web/app/routes/$userName+/page+/$slug+/edit/index.tsx
rename to web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx
index a4aaeca7..b545934b 100644
--- a/web/app/routes/$userName+/page+/$slug+/edit/index.tsx
+++ b/web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx
@@ -16,10 +16,9 @@ import {
 import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { Save } from "lucide-react";
+import { ArrowDownToLine } from "lucide-react";
 import { z } from "zod";
 import { Button } from "~/components/ui/button";
-import { Footer } from "~/routes/resources+/footer";
 import { authenticator } from "~/utils/auth.server";
 import { Header } from "./components/Header";
 import { createOrUpdateSourceTexts } from "./functions/mutations.server";
@@ -121,9 +120,9 @@ export default function EditPage() {
 			<Header safeUser={safeUser} />
 			<div className="w-full max-w-3xl mx-auto">
 				<Form method="post" {...getFormProps(form)}>
-					<div className="flex justify-end">
+					<div className="flex justify-center">
 						<Button type="submit" variant="ghost">
-							<Save className="w-6 h-6 mr-2" />
+							<ArrowDownToLine className="w-6 h-6 mr-2" />
 							Save
 						</Button>
 					</div>
@@ -152,7 +151,6 @@ export default function EditPage() {
 					</div>
 				</Form>
 			</div>
-			<Footer safeUser={safeUser} />
 		</div>
 	);
 }
diff --git a/web/app/routes/$userName+/page+/$slug+/edit/functions/mutations.server.ts b/web/app/routes/$userName+/page+/$slug+/edit/functions/mutations.server.ts
index 7d91188a..ba123c3c 100644
--- a/web/app/routes/$userName+/page+/$slug+/edit/functions/mutations.server.ts
+++ b/web/app/routes/$userName+/page+/$slug+/edit/functions/mutations.server.ts
@@ -1,39 +1,6 @@
 import { prisma } from "~/utils/prisma";
 import type { NumberedElement } from "../types";
 
-export async function getOrCreateUserAITranslationInfo(
-	userId: number,
-	slug: string,
-	targetLanguage: string,
-) {
-	try {
-		const userAITranslationInfo = await prisma.userAITranslationInfo.upsert({
-			where: {
-				userId_slug_targetLanguage: {
-					userId,
-					slug,
-					targetLanguage,
-				},
-			},
-			update: {
-				aiTranslationStatus: "pending",
-				aiTranslationProgress: 0,
-			},
-			create: {
-				userId,
-				slug,
-				targetLanguage,
-				aiTranslationStatus: "pending",
-				aiTranslationProgress: 0,
-			},
-		});
-		return userAITranslationInfo;
-	} catch (error) {
-		console.error("Error in getOrCreateUserAITranslationInfo:", error);
-		throw error;
-	}
-}
-
 export async function getOrCreatePage(
 	userId: number,
 	slug: string,
diff --git a/web/app/routes/$userName+/page+/$slug+/functions/mutations.server.ts b/web/app/routes/$userName+/page+/$slug+/functions/mutations.server.ts
index 6da2e246..13b39b40 100644
--- a/web/app/routes/$userName+/page+/$slug+/functions/mutations.server.ts
+++ b/web/app/routes/$userName+/page+/$slug+/functions/mutations.server.ts
@@ -92,35 +92,26 @@ export async function updateUserReadHistory(
 	});
 }
 
-export async function getOrCreateUserAITranslationInfo(
+export async function createUserAITranslationInfo(
 	userId: number,
-	slug: string,
+	pageId: number,
+	aiModel: string,
 	targetLanguage: string,
 ) {
 	try {
-		const userAITranslationInfo = await prisma.userAITranslationInfo.upsert({
-			where: {
-				userId_slug_targetLanguage: {
-					userId,
-					slug,
-					targetLanguage,
-				},
-			},
-			update: {
-				aiTranslationStatus: "pending",
-				aiTranslationProgress: 0,
-			},
-			create: {
+		const userAITranslationInfo = await prisma.userAITranslationInfo.create({
+			data: {
 				userId,
-				slug,
+				pageId,
 				targetLanguage,
+				aiModel,
 				aiTranslationStatus: "pending",
 				aiTranslationProgress: 0,
 			},
 		});
 		return userAITranslationInfo;
 	} catch (error) {
-		console.error("Error in getOrCreateUserAITranslationInfo:", error);
+		console.error("Error in createUserAITranslationInfo:", error);
 		throw error;
 	}
 }
diff --git a/web/app/routes/$userName+/page+/$slug+/functions/queries.server.ts b/web/app/routes/$userName+/page+/$slug+/functions/queries.server.ts
index e882bcbe..070ffef8 100644
--- a/web/app/routes/$userName+/page+/$slug+/functions/queries.server.ts
+++ b/web/app/routes/$userName+/page+/$slug+/functions/queries.server.ts
@@ -98,3 +98,14 @@ export async function getLastReadDataNumber(userId: number, pageId: number) {
 
 	return readHistory?.lastReadDataNumber ?? 0;
 }
+
+export async function fetchUserAITranslationInfo(
+	pageId: number,
+	userId: number,
+) {
+	const userAITranslationInfo = await prisma.userAITranslationInfo.findMany({
+		where: { pageId, userId },
+		orderBy: { createdAt: "desc" },
+	});
+	return userAITranslationInfo;
+}
diff --git a/web/app/routes/$userName+/page+/$slug+/index.tsx b/web/app/routes/$userName+/page+/$slug+/index.tsx
index 2a345f2d..9c80f6a7 100644
--- a/web/app/routes/$userName+/page+/$slug+/index.tsx
+++ b/web/app/routes/$userName+/page+/$slug+/index.tsx
@@ -18,14 +18,16 @@ import { authenticator } from "~/utils/auth.server";
 import { getTargetLanguage } from "~/utils/target-language.server";
 import { ContentWithTranslations } from "./components/ContentWithTranslations";
 import TargetLanguageSelector from "./components/TargetLanguageSelector";
+import { UserAITranslationStatus } from "./components/UserAITranslationStatus";
 import {
 	handleAddTranslationAction,
 	handleVoteAction,
 } from "./functions/mutations.server";
-import { getOrCreateUserAITranslationInfo } from "./functions/mutations.server";
+import { createUserAITranslationInfo } from "./functions/mutations.server";
 import {
 	fetchPage,
 	fetchPageWithTranslations,
+	fetchUserAITranslationInfo,
 	getDbUser,
 } from "./functions/queries.server";
 import { actionSchema } from "./types";
@@ -51,8 +53,17 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	if (!pageData) {
 		throw new Response("Failed to fetch article", { status: 500 });
 	}
-
-	return typedjson({ targetLanguage, pageData, safeUser, hasGeminiApiKey });
+	const userAITranslationInfo = await fetchUserAITranslationInfo(
+		pageData.id,
+		safeUserId ?? 0,
+	);
+	return typedjson({
+		targetLanguage,
+		pageData,
+		safeUser,
+		hasGeminiApiKey,
+		userAITranslationInfo,
+	});
 };
 export const action = async ({ request }: ActionFunctionArgs) => {
 	const safeUser = await authenticator.isAuthenticated(request);
@@ -107,15 +118,17 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 					slug: null,
 				};
 			}
-			await getOrCreateUserAITranslationInfo(
+			const userAITranslationInfo = await createUserAITranslationInfo(
 				dbUser.id,
-				page.slug,
+				page.id,
+				submission.value.aiModel,
 				targetLanguage,
 			);
 
 			const numberedElements = extractNumberedElements(page.content);
 			const queue = getTranslateUserQueue(safeUser.id);
 			const job = await queue.add(`translate-${safeUser.id}`, {
+				userAITranslationInfoId: userAITranslationInfo.id,
 				geminiApiKey: dbUser.geminiApiKey,
 				aiModel: submission.value.aiModel,
 				userId: safeUser.id,
@@ -124,7 +137,6 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 				title: page.title,
 				numberedContent: page.content,
 				numberedElements,
-				slug: page.slug,
 			});
 			return { intent, lastResult: submission.reply({ resetForm: true }) };
 		}
@@ -134,7 +146,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 };
 
 export default function ReaderView() {
-	const { pageData, safeUser, hasGeminiApiKey } =
+	const { pageData, safeUser, hasGeminiApiKey, userAITranslationInfo } =
 		useTypedLoaderData<typeof loader>();
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const actionData = useActionData<typeof action>();
@@ -151,7 +163,7 @@ export default function ReaderView() {
 	return (
 		<div className="container px-4 py-8  sm:max-w-prose lg:max-w-2xl xl:max-w-3xl mx-auto">
 			<div className="flex justify-end items-center mb-8">
-				{pageData.userId === safeUser?.id && (
+				{pageData.userId === safeUser?.id && safeUser && (
 					<Button asChild variant="outline">
 						<Link to={`/${safeUser.userName}/page/${pageData.slug}/edit`}>
 							Edit
@@ -184,21 +196,18 @@ export default function ReaderView() {
 								)}
 							</Button>
 						) : (
-							<>
-								<Button onClick={() => setIsDialogOpen(true)}>
-									<div className="flex items-center justify-center w-full">
-										<Languages className="w-4 h-4 mr-1" />
-										<p>Add Translation</p>
-									</div>
-								</Button>
-								<GeminiApiKeyDialog
-									isOpen={isDialogOpen}
-									onOpenChange={setIsDialogOpen}
-								/>
-							</>
+							<Button onClick={() => setIsDialogOpen(true)}>
+								<div className="flex items-center justify-center w-full">
+									<Languages className="w-4 h-4 mr-1" />
+									<p>Add Translation</p>
+								</div>
+							</Button>
 						)}
 					</div>
 				</Form>
+				<UserAITranslationStatus
+					userAITranslationInfo={userAITranslationInfo}
+				/>
 			</div>
 			<article className="prose dark:prose-invert lg:prose-xl">
 				<h1>
@@ -212,6 +221,10 @@ export default function ReaderView() {
 					userId={safeUser?.id ?? null}
 				/>
 			</article>
+			<GeminiApiKeyDialog
+				isOpen={isDialogOpen}
+				onOpenChange={setIsDialogOpen}
+			/>
 		</div>
 	);
 }
diff --git a/web/app/routes/_index/index.tsx b/web/app/routes/_index/index.tsx
index cf36d1bb..9dacf4e2 100644
--- a/web/app/routes/_index/index.tsx
+++ b/web/app/routes/_index/index.tsx
@@ -9,19 +9,17 @@ import { FaDiscord, FaGithub } from "react-icons/fa";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
-import { Footer } from "~/routes/resources+/footer";
 import { authenticator } from "~/utils/auth.server";
 
-
 export const meta: MetaFunction = () => {
-  return [
-    { title: "EveEve" },
-    {
-      name: "description",
-      content:
-        "EveEve is an open-source platform for collaborative article translation and sharing.",
-    },
-  ];
+	return [
+		{ title: "EveEve" },
+		{
+			name: "description",
+			content:
+				"EveEve is an open-source platform for collaborative article translation and sharing.",
+		},
+	];
 };
 export async function loader({ request }: LoaderFunctionArgs) {
 	const safeUser = await authenticator.isAuthenticated(request);
@@ -47,68 +45,70 @@ export default function Index() {
 	return (
 		<div className="min-h-screen bg-gradient-to-b ">
 			<main className="container mx-auto px-4 py-20">
-			<div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-5xl font-bold mb-6">
-            Everyone Understand Everyone
-          </h1>
-          <p className="text-xl mb-12">
-            EveEve is an open-source platform where users can post articles and collaborate on translations, fostering global understanding and knowledge sharing.
-          </p>
-          <div className="flex justify-center gap-4 mb-8">
-            <Form method="POST" className="w-full ">
-              <Button type="submit" variant="default">
-                Start
-              </Button>
-            </Form>
-          </div>
-          <div className="flex justify-center gap-6">
-            <a
-              href="https://github.com/ttizze/eveeve"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-colors"
-            >
-              <FaGithub size={24} />
-            </a>
-            <a
-              href="https://discord.gg/2JfhZdu9zW"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-colors"
-            >
-              <FaDiscord size={24} />
-            </a>
-          </div>
-        </div>
+				<div className="max-w-4xl mx-auto text-center">
+					<h1 className="text-5xl font-bold mb-6">
+						Everyone Understand Everyone
+					</h1>
+					<p className="text-xl mb-12">
+						EveEve is an open-source platform where users can post articles and
+						collaborate on translations, fostering global understanding and
+						knowledge sharing.
+					</p>
+					<div className="flex justify-center gap-4 mb-8">
+						<Form method="POST" className="w-full ">
+							<Button type="submit" variant="default">
+								Start
+							</Button>
+						</Form>
+					</div>
+					<div className="flex justify-center gap-6">
+						<a
+							href="https://github.com/ttizze/eveeve"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="transition-colors"
+						>
+							<FaGithub size={24} />
+						</a>
+						<a
+							href="https://discord.gg/2JfhZdu9zW"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="transition-colors"
+						>
+							<FaDiscord size={24} />
+						</a>
+					</div>
+				</div>
 
-        <div className="mt-20">
-          <Card className="border-gray-700">
-            <CardContent className="p-6">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div className="text-center">
-                  <h3 className="text-2xl font-semibold mb-2">Easy to Use</h3>
-                  <p className="">
-                    Simple interface for effortless article posting and translation.
-                  </p>
-                </div>
-                <div className="text-center">
-                  <h3 className="text-2xl font-semibold mb-2">Open Source</h3>
-                  <p className="">
-                    A community-driven platform that continuously evolves.
-                  </p>
-                </div>
-                <div className="text-center">
-                  <h3 className="text-2xl font-semibold mb-2">Multilingual</h3>
-                  <p className="">
-                    Access and contribute to content in multiple languages.
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
+				<div className="mt-20">
+					<Card className="border-gray-700">
+						<CardContent className="p-6">
+							<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+								<div className="text-center">
+									<h3 className="text-2xl font-semibold mb-2">Easy to Use</h3>
+									<p className="">
+										Simple interface for effortless article posting and
+										translation.
+									</p>
+								</div>
+								<div className="text-center">
+									<h3 className="text-2xl font-semibold mb-2">Open Source</h3>
+									<p className="">
+										A community-driven platform that continuously evolves.
+									</p>
+								</div>
+								<div className="text-center">
+									<h3 className="text-2xl font-semibold mb-2">Multilingual</h3>
+									<p className="">
+										Access and contribute to content in multiple languages.
+									</p>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
 			</main>
-			<Footer safeUser={safeUser} />
 		</div>
 	);
 }
diff --git a/web/app/routes/_index/route.tsx b/web/app/routes/_index/route.tsx
deleted file mode 100644
index 3acd5ef1..00000000
--- a/web/app/routes/_index/route.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type {
-	ActionFunctionArgs,
-	LoaderFunctionArgs,
-	MetaFunction,
-} from "@remix-run/node";
-import { Form } from "@remix-run/react";
-import { FaDiscord, FaGithub } from "react-icons/fa";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { Header } from "~/components/Header";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent } from "~/components/ui/card";
-import { Footer } from "~/routes/resources+/footer";
-import { authenticator } from "~/utils/auth.server";
-export const meta: MetaFunction = () => {
-	return [
-		{ title: "EveEve" },
-		{
-			name: "description",
-			content:
-				"EveEve is an open source project that translates text on the internet.",
-		},
-	];
-};
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const safeUser = await authenticator.isAuthenticated(request);
-	return typedjson({ safeUser });
-}
-
-export async function action({ request }: ActionFunctionArgs) {
-	const user = await authenticator.authenticate("google", request);
-
-	if (user) {
-		if (user.userName) {
-			return redirect(`/${user.userName}`);
-		}
-		return redirect("/welcome");
-	}
-
-	return redirect("/auth/login");
-}
-
-export default function Index() {
-	const { safeUser } = useTypedLoaderData<typeof loader>();
-
-	return (
-		<div className="min-h-screen bg-gradient-to-b ">
-			<Header safeUser={safeUser} />
-			<main className="container mx-auto px-4 py-20">
-				<div className="max-w-4xl mx-auto text-center">
-					<h1 className="text-5xl font-bold mb-6">
-						Everyone Translate Everything
-					</h1>
-					<p className="text-xl  mb-12">
-						EveEveは、インターネット上のテキストを翻訳し､共有し､より良い翻訳を作り上げていくオープンソースプロジェクトです。
-					</p>
-					<div className="flex justify-center gap-4 mb-8">
-						<Form method="POST" className="w-full ">
-							<Button type="submit" variant="default">
-								Start
-							</Button>
-						</Form>
-					</div>
-					<div className="flex justify-center gap-6">
-						<a
-							href="https://github.com/ttizze/eveeve"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="  transition-colors"
-						>
-							<FaGithub size={24} />
-						</a>
-						<a
-							href="https://discord.gg/2JfhZdu9zW"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="  transition-colors"
-						>
-							<FaDiscord size={24} />
-						</a>
-					</div>
-				</div>
-
-				<div className="mt-20">
-					<Card className=" border-gray-700">
-						<CardContent className="p-6">
-							<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-								<div className="text-center">
-									<h3 className="text-2xl font-semibold mb-2">Easy to Use</h3>
-									<p className="">
-										シンプルなインターフェースで、誰でも簡単に翻訳を始められます。
-									</p>
-								</div>
-								<div className="text-center">
-									<h3 className="text-2xl font-semibold mb-2">Open Source</h3>
-									<p className="">
-										コミュニティの力で、常に進化し続けるプラットフォーム。
-									</p>
-								</div>
-								<div className="text-center">
-									<h3 className="text-2xl font-semibold mb-2">Multilingual</h3>
-									<p className="">
-										多言語対応で、世界中のコンテンツにアクセス可能。
-									</p>
-								</div>
-							</div>
-						</CardContent>
-					</Card>
-				</div>
-			</main>
-			<Footer safeUser={safeUser} />
-		</div>
-	);
-}
diff --git a/web/app/routes/api.target-language.tsx b/web/app/routes/api.target-language.tsx
index 89fcd1a3..a681fd41 100644
--- a/web/app/routes/api.target-language.tsx
+++ b/web/app/routes/api.target-language.tsx
@@ -1,8 +1,8 @@
 import { json } from "@remix-run/node";
 import type { ActionFunction, LoaderFunction } from "@remix-run/node";
 import {
-	buildTargetLanguageCookie,
 	getTargetLanguage,
+	setTargetLanguage,
 } from "~/utils/target-language.server";
 
 export const loader: LoaderFunction = async ({ request }) => {
@@ -13,10 +13,9 @@ export const loader: LoaderFunction = async ({ request }) => {
 export const action: ActionFunction = async ({ request }) => {
 	const formData = await request.formData();
 	const targetLanguage = formData.get("targetLanguage");
-
 	if (typeof targetLanguage === "string") {
-		const cookie = await buildTargetLanguageCookie(request, targetLanguage);
-		return json({ success: true }, { headers: { "Set-Cookie": cookie } });
+		const headers = await setTargetLanguage(request, targetLanguage);
+		return json({ success: true }, { headers });
 	}
 
 	return json({ success: false }, { status: 400 });
diff --git a/web/app/routes/privacy.tsx b/web/app/routes/privacy.tsx
index b0025d78..bf2a244e 100644
--- a/web/app/routes/privacy.tsx
+++ b/web/app/routes/privacy.tsx
@@ -1,92 +1,109 @@
 import { Link } from "@remix-run/react";
 
 export default function PrivacyPolicyPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <main className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Privacy Policy</h1>
+	return (
+		<div className="min-h-screen bg-background">
+			<main className="container mx-auto px-4 py-8">
+				<h1 className="text-3xl font-bold mb-6">Privacy Policy</h1>
 
-        <section className="mb-8">
-          <p className="mb-4">
-            This Privacy Policy describes how EveEve ("we", "our", or "us") collects, uses, and shares your personal information when you use our service.
-          </p>
-        </section>
+				<section className="mb-8">
+					<p className="mb-4">
+						This Privacy Policy describes how EveEve ("we", "our", or "us")
+						collects, uses, and shares your personal information when you use
+						our service.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">1. Information We Collect</h2>
-          <p className="mb-4">We collect the following types of information:</p>
-          <ul className="list-disc pl-6">
-            <li>Account information (e.g., username, email address)</li>
-            <li>Content you post (articles and translations)</li>
-            <li>Usage data (e.g., pages visited, actions taken)</li>
-            <li>Device information (e.g., IP address, browser type)</li>
-          </ul>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						1. Information We Collect
+					</h2>
+					<p className="mb-4">We collect the following types of information:</p>
+					<ul className="list-disc pl-6">
+						<li>Account information (e.g., username, email address)</li>
+						<li>Content you post (articles and translations)</li>
+						<li>Usage data (e.g., pages visited, actions taken)</li>
+						<li>Device information (e.g., IP address, browser type)</li>
+					</ul>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">2. How We Use Your Information</h2>
-          <p className="mb-4">We use your information to:</p>
-          <ul className="list-disc pl-6">
-            <li>Provide and improve our service</li>
-            <li>Communicate with you about your account or the service</li>
-            <li>Analyze usage patterns and optimize user experience</li>
-            <li>Prevent fraud and ensure the security of our service</li>
-          </ul>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						2. How We Use Your Information
+					</h2>
+					<p className="mb-4">We use your information to:</p>
+					<ul className="list-disc pl-6">
+						<li>Provide and improve our service</li>
+						<li>Communicate with you about your account or the service</li>
+						<li>Analyze usage patterns and optimize user experience</li>
+						<li>Prevent fraud and ensure the security of our service</li>
+					</ul>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">3. Information Sharing and Disclosure</h2>
-          <p className="mb-4">We may share your information in the following circumstances:</p>
-          <ul className="list-disc pl-6">
-            <li>With your consent</li>
-            <li>To comply with legal obligations</li>
-            <li>To protect our rights, privacy, safety, or property</li>
-            <li>In connection with a merger, sale, or acquisition</li>
-          </ul>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						3. Information Sharing and Disclosure
+					</h2>
+					<p className="mb-4">
+						We may share your information in the following circumstances:
+					</p>
+					<ul className="list-disc pl-6">
+						<li>With your consent</li>
+						<li>To comply with legal obligations</li>
+						<li>To protect our rights, privacy, safety, or property</li>
+						<li>In connection with a merger, sale, or acquisition</li>
+					</ul>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">4. Data Security</h2>
-          <p>
-            We implement reasonable security measures to protect your personal information. However, no method of transmission over the Internet or electronic storage is 100% secure.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">4. Data Security</h2>
+					<p>
+						We implement reasonable security measures to protect your personal
+						information. However, no method of transmission over the Internet or
+						electronic storage is 100% secure.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">5. Your Rights</h2>
-          <p className="mb-4">You have the right to:</p>
-          <ul className="list-disc pl-6">
-            <li>Access, correct, or delete your personal information</li>
-            <li>Object to or restrict the processing of your data</li>
-            <li>Request a copy of your data in a portable format</li>
-            <li>Withdraw your consent at any time</li>
-          </ul>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">5. Your Rights</h2>
+					<p className="mb-4">You have the right to:</p>
+					<ul className="list-disc pl-6">
+						<li>Access, correct, or delete your personal information</li>
+						<li>Object to or restrict the processing of your data</li>
+						<li>Request a copy of your data in a portable format</li>
+						<li>Withdraw your consent at any time</li>
+					</ul>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">6. Changes to This Policy</h2>
-          <p>
-            We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						6. Changes to This Policy
+					</h2>
+					<p>
+						We may update this Privacy Policy from time to time. We will notify
+						you of any changes by posting the new Privacy Policy on this page
+						and updating the "Last updated" date.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">7. Contact Us</h2>
-          <p>
-            If you have any questions about this Privacy Policy, please contact us at: [Your Contact Information]
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">7. Contact Us</h2>
+					<p>
+						If you have any questions about this Privacy Policy, please contact
+						us at: [Your Contact Information]
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <p className="italic">Last updated: [Date]</p>
-        </section>
+				<section className="mb-8">
+					<p className="italic">Last updated: [Date]</p>
+				</section>
 
-        <div className="mt-8">
-          <Link to="/" className="text-blue-600 hover:underline">
-            Return to Home
-          </Link>
-        </div>
-      </main>
-    </div>
-  );
-}
\ No newline at end of file
+				<div className="mt-8">
+					<Link to="/" className="text-blue-600 hover:underline">
+						Return to Home
+					</Link>
+				</div>
+			</main>
+		</div>
+	);
+}
diff --git a/web/app/routes/resources+/footer.tsx b/web/app/routes/resources+/footer.tsx
index a9d60eaa..e071e396 100644
--- a/web/app/routes/resources+/footer.tsx
+++ b/web/app/routes/resources+/footer.tsx
@@ -40,7 +40,7 @@ export function Footer({ safeUser }: FooterProps) {
 	const currentYear = new Date().getFullYear();
 
 	return (
-		<footer className="fixed bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700">
+		<footer className="bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700">
 			<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
 				<div className="flex justify-between items-center">
 					<div className="flex items-center">
@@ -52,11 +52,9 @@ export function Footer({ safeUser }: FooterProps) {
 							/>
 						</Link>
 					</div>
-          <Link to={`/${safeUser?.userName}`}>
-            <Button variant="outline">
-              {safeUser?.userName}
-            </Button>
-          </Link>
+					<Link to={`/${safeUser?.userName}`}>
+						<Button variant="outline">{safeUser?.userName}</Button>
+					</Link>
 
 					<div className="flex items-center space-x-4 text-sm text-gray-6000 dark:text-gray-300">
 						<Link
diff --git a/web/app/routes/resources+/gemini-api-key-dialog.tsx b/web/app/routes/resources+/gemini-api-key-dialog.tsx
index 44769407..4314ada9 100644
--- a/web/app/routes/resources+/gemini-api-key-dialog.tsx
+++ b/web/app/routes/resources+/gemini-api-key-dialog.tsx
@@ -2,9 +2,10 @@ import { useForm } from "@conform-to/react";
 import { getFormProps, getInputProps } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import type { ActionFunctionArgs } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { useFetcher } from "@remix-run/react";
-import { Save } from "lucide-react";
+import { ArrowDownToLine } from "lucide-react";
 import { ExternalLink, Key } from "lucide-react";
 import { useEffect } from "react";
 import { z } from "zod";
@@ -15,7 +16,6 @@ import {
 	DialogContent,
 	DialogHeader,
 	DialogTitle,
-	DialogTrigger,
 } from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
 import { validateGeminiApiKey } from "~/features/translate/services/gemini";
@@ -26,6 +26,10 @@ export const geminiApiKeySchema = z.object({
 	geminiApiKey: z.string().min(1, "API key is required"),
 });
 
+export async function loader() {
+	return redirect("/");
+}
+
 export async function action({ request }: ActionFunctionArgs) {
 	const safeUser = await authenticator.isAuthenticated(request, {
 		failureRedirect: "/",
@@ -34,7 +38,12 @@ export async function action({ request }: ActionFunctionArgs) {
 		schema: geminiApiKeySchema,
 	});
 	if (submission.status !== "success") {
-		return { lastResult: submission.reply(), success: false };
+		return {
+			lastResult: submission.reply({
+				formErrors: ["Gemini API key is required"],
+			}),
+			success: false,
+		};
 	}
 
 	const { isValid, errorMessage } = await validateGeminiApiKey(
@@ -82,12 +91,9 @@ export function GeminiApiKeyDialog({
 
 	return (
 		<Dialog open={isOpen} onOpenChange={onOpenChange}>
-			<DialogTrigger asChild>
-				<Button>Set Gemini API Key</Button>
-			</DialogTrigger>
 			<DialogContent>
 				<DialogHeader>
-					<DialogTitle>Set Gemini API Key</DialogTitle>
+					<DialogTitle className="text-center">Set Gemini API Key</DialogTitle>
 				</DialogHeader>
 				<div className="text-center mb-4">
 					<Link
@@ -109,7 +115,7 @@ export function GeminiApiKeyDialog({
 				</div>
 				<fetcher.Form
 					method="post"
-					action="/resources/gemini-api-key-form"
+					action="/resources/gemini-api-key-dialog"
 					{...getFormProps(form)}
 				>
 					<div className="flex items-center space-x-2">
@@ -125,7 +131,7 @@ export function GeminiApiKeyDialog({
 							{fetcher.state === "submitting" ? (
 								<LoadingSpinner />
 							) : (
-								<Save className="w-4 h-4 mr-2 " />
+								<ArrowDownToLine className="w-4 h-4 mr-2 " />
 							)}
 							Save
 						</Button>
diff --git a/web/app/routes/search/route.tsx b/web/app/routes/search/route.tsx
index 638b97ec..f3849758 100644
--- a/web/app/routes/search/route.tsx
+++ b/web/app/routes/search/route.tsx
@@ -5,9 +5,8 @@ import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useActionData, useNavigation } from "@remix-run/react";
 import { Link } from "@remix-run/react";
 import { Form } from "@remix-run/react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { typedjson } from "remix-typedjson";
 import { z } from "zod";
-import { Header } from "~/components/Header";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { authenticator } from "~/utils/auth.server";
diff --git a/web/app/routes/terms/route.tsx b/web/app/routes/terms/route.tsx
index 2750a042..5f075a0d 100644
--- a/web/app/routes/terms/route.tsx
+++ b/web/app/routes/terms/route.tsx
@@ -1,106 +1,137 @@
 import { Link } from "@remix-run/react";
 
 export default function TermsPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <main className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Terms of Service</h1>
+	return (
+		<div className="min-h-screen bg-background">
+			<main className="container mx-auto px-4 py-8">
+				<h1 className="text-3xl font-bold mb-6">Terms of Service</h1>
 
-        <section className="mb-8">
-          <p className="mb-4">
-            Please read the following Terms of Service carefully before using EveEve (hereinafter referred to as "the Service").
-            By using the Service, you are deemed to have agreed to these terms.
-          </p>
-        </section>
+				<section className="mb-8">
+					<p className="mb-4">
+						Please read the following Terms of Service carefully before using
+						EveEve (hereinafter referred to as "the Service"). By using the
+						Service, you are deemed to have agreed to these terms.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">1. Service Description</h2>
-          <p>
-            The Service is a platform where users can post articles and other users can provide translations for those articles.
-            Users can post their own articles and provide translations for articles posted by other users.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						1. Service Description
+					</h2>
+					<p>
+						The Service is a platform where users can post articles and other
+						users can provide translations for those articles. Users can post
+						their own articles and provide translations for articles posted by
+						other users.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">2. User Responsibilities</h2>
-          <ul className="list-disc pl-6">
-            <li>
-              Users are responsible for complying with all applicable laws and regulations when using the Service.
-            </li>
-            <li>
-              Users are responsible for complying with the copyright and terms of use of the content they translate.
-            </li>
-            <li>
-              Use that violates copyright law or unauthorized commercial use is prohibited.
-            </li>
-            <li>
-              Users are fully responsible for the use of content displayed through the Service.
-            </li>
-          </ul>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						2. User Responsibilities
+					</h2>
+					<ul className="list-disc pl-6">
+						<li>
+							Users are responsible for complying with all applicable laws and
+							regulations when using the Service.
+						</li>
+						<li>
+							Users are responsible for complying with the copyright and terms
+							of use of the content they translate.
+						</li>
+						<li>
+							Use that violates copyright law or unauthorized commercial use is
+							prohibited.
+						</li>
+						<li>
+							Users are fully responsible for the use of content displayed
+							through the Service.
+						</li>
+					</ul>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">3. Copyright and Intellectual Property Rights</h2>
-          <p>
-            Users grant the operating company permission to post and distribute (including public transmission and making transmittable) user content on this website.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						3. Copyright and Intellectual Property Rights
+					</h2>
+					<p>
+						Users grant the operating company permission to post and distribute
+						(including public transmission and making transmittable) user
+						content on this website.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">4. Disclaimer</h2>
-          <ul className="list-disc pl-6">
-            <li>
-              The Service is provided "as is" and makes no warranties of any kind, either express or implied.
-            </li>
-            <li>
-              The Service does not guarantee the accuracy, completeness, timeliness, or quality of posted articles or translations.
-            </li>
-            <li>
-              The Service is not responsible for any damages arising from interactions between users or content posted on the Service.
-            </li>
-          </ul>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">4. Disclaimer</h2>
+					<ul className="list-disc pl-6">
+						<li>
+							The Service is provided "as is" and makes no warranties of any
+							kind, either express or implied.
+						</li>
+						<li>
+							The Service does not guarantee the accuracy, completeness,
+							timeliness, or quality of posted articles or translations.
+						</li>
+						<li>
+							The Service is not responsible for any damages arising from
+							interactions between users or content posted on the Service.
+						</li>
+					</ul>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">
-            5. Content Removal and Usage Restrictions
-          </h2>
-          <p>
-            The Service reserves the right to remove without notice any posts or content deemed to violate the terms of service or be inappropriate.
-            The Service also reserves the right to restrict or terminate the use of the Service by specific users.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						5. Content Removal and Usage Restrictions
+					</h2>
+					<p>
+						The Service reserves the right to remove without notice any posts or
+						content deemed to violate the terms of service or be inappropriate.
+						The Service also reserves the right to restrict or terminate the use
+						of the Service by specific users.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">6. Governing Law and Jurisdiction</h2>
-          <p>
-            The interpretation and application of these terms shall be governed by Japanese law, and the Tokyo District Court shall have exclusive jurisdiction as the court of first instance for any disputes related to the Service.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						6. Governing Law and Jurisdiction
+					</h2>
+					<p>
+						The interpretation and application of these terms shall be governed
+						by Japanese law, and the Tokyo District Court shall have exclusive
+						jurisdiction as the court of first instance for any disputes related
+						to the Service.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">7. Changes to the Terms</h2>
-          <p>
-            The Service reserves the right to change these terms as necessary. In case of significant changes,
-            we will notify you on the Service. If you continue to use the Service after changes are made,
-            you are deemed to have agreed to the updated terms.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						7. Changes to the Terms
+					</h2>
+					<p>
+						The Service reserves the right to change these terms as necessary.
+						In case of significant changes, we will notify you on the Service.
+						If you continue to use the Service after changes are made, you are
+						deemed to have agreed to the updated terms.
+					</p>
+				</section>
 
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">Confirmation of Agreement</h2>
-          <p>
-            By using the Service, you are deemed to have agreed to the above terms of service.
-            If you do not agree to these terms, please discontinue use of the Service.
-          </p>
-        </section>
+				<section className="mb-8">
+					<h2 className="text-2xl font-semibold mb-4">
+						Confirmation of Agreement
+					</h2>
+					<p>
+						By using the Service, you are deemed to have agreed to the above
+						terms of service. If you do not agree to these terms, please
+						discontinue use of the Service.
+					</p>
+				</section>
 
-        <div className="mt-8">
-          <Link to="/" className="text-blue-600 hover:underline">
-            Return to Home
-          </Link>
-        </div>
-      </main>
-    </div>
-  );
-}
\ No newline at end of file
+				<div className="mt-8">
+					<Link to="/" className="text-blue-600 hover:underline">
+						Return to Home
+					</Link>
+				</div>
+			</main>
+		</div>
+	);
+}
diff --git a/web/app/routes/translator/components/TranslationInputForm.tsx b/web/app/routes/translator/components/TranslationInputForm.tsx
index 996b6f27..541e563f 100644
--- a/web/app/routes/translator/components/TranslationInputForm.tsx
+++ b/web/app/routes/translator/components/TranslationInputForm.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from "@conform-to/react";
+import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import { Form, useNavigation } from "@remix-run/react";
 import { Languages } from "lucide-react";
@@ -7,7 +7,6 @@ import { useTypedActionData } from "remix-typedjson";
 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 "~/features/translate/components/AIModelSelector";
 import type { action } from "../route";
 import { translationInputSchema } from "../types";
@@ -18,22 +17,6 @@ export function TranslationInputForm() {
 	const actionData = useTypedActionData<typeof action>();
 	const [inputType, setInputType] = useState<"url" | "file">("url");
 
-	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const selectedFiles = e.target.files;
-		if (selectedFiles) {
-			const filesArray = Array.from(selectedFiles).map((file) => {
-				Object.defineProperty(file, "path", {
-					value: file.webkitRelativePath || file.name,
-					writable: false,
-					configurable: true,
-					enumerable: true,
-				});
-				return file;
-			});
-			console.log(filesArray);
-		}
-	};
-
 	const [form, fields] = useForm({
 		lastResult: actionData?.lastResult,
 		id: "translation-input-form",
@@ -54,13 +37,6 @@ export function TranslationInputForm() {
 				className="space-y-4"
 			>
 				<div className="flex space-x-2 mb-2">
-					<Button
-						type="button"
-						onClick={() => setInputType("url")}
-						variant={inputType === "url" ? "default" : "outline"}
-					>
-						URL
-					</Button>
 					<Button
 						type="button"
 						onClick={() => setInputType("file")}
@@ -71,30 +47,21 @@ export function TranslationInputForm() {
 				</div>
 				<div className="flex space-x-1">
 					<div className="flex-col flex-grow w-full">
-						{inputType === "url" ? (
-							<Input
-								className="bg-gray-800 text-white w-full"
-								placeholder="https://example.com"
-								{...getInputProps(fields.url, { type: "url" })}
-							/>
-						) : (
-							<input
-								type="file"
-								id="folder"
-								name="folder"
-								/* @ts-expect-error */
-								directory=""
-								webkitdirectory=""
-								multiple
-								className="mt-1 block w-full text-sm text-gray-500
+						<input
+							type="file"
+							id="folder"
+							name="folder"
+							/* @ts-expect-error */
+							directory=""
+							webkitdirectory=""
+							multiple
+							className="mt-1 block w-full text-sm text-gray-500
                           file:mr-4 file:py-2 file:px-4
                           file:rounded-full file:border-0
                           file:text-sm file:font-semibold
                           file:bg-blue-50 file:text-blue-700
                           hover:file:bg-blue-100"
-							/>
-						)}
-						<div id={fields.url.errorId}>{fields.url.errors}</div>
+						/>
 					</div>
 					<div className="w-[200px]">
 						<AIModelSelector onModelSelect={setSelectedModel} />
diff --git a/web/app/routes/translator/components/UserAITranslationStatus.tsx b/web/app/routes/translator/components/UserAITranslationStatus.tsx
deleted file mode 100644
index 8e08c167..00000000
--- a/web/app/routes/translator/components/UserAITranslationStatus.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { useForm } from "@conform-to/react";
-import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import type { UserAITranslationInfo } from "@prisma/client";
-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 "~/features/translate/components/AIModelSelector";
-import { cn } from "~/utils/cn";
-import { translationInputSchema } from "../types";
-
-type UserAITranslationStatusProps = {
-	userAITranslationInfo: UserAITranslationInfo[];
-	targetLanguage: string;
-};
-
-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",
-		constraint: getZodConstraint(translationInputSchema),
-		shouldValidate: "onBlur",
-		shouldRevalidate: "onInput",
-		onValidate({ formData }) {
-			return parseWithZod(formData, { schema: translationInputSchema });
-		},
-	});
-
-	if (!userAITranslationInfo || userAITranslationInfo.length === 0) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardTitle>Translation Status ({targetLanguage})</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<p>No translation history available.</p>
-				</CardContent>
-			</Card>
-		);
-	}
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Translation Status ({targetLanguage})</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<ScrollArea className="h-[300px]">
-					<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-						{userAITranslationInfo.map((item) => {
-							const isCompleted = item.aiTranslationStatus === "completed";
-							const CardContents = (
-								<Card key={item.id} className="flex flex-col h-full">
-									<CardHeader>
-										<CardTitle className="text-sm truncate flex flex-col h-10">
-											{item.slug}
-										</CardTitle>
-									</CardHeader>
-									<CardContent className="flex-grow flex flex-col">
-										<Badge
-											className="mt-2 w-full flex justify-center"
-											variant={getVariantForStatus(item.aiTranslationStatus)}
-										>
-											{item.aiTranslationStatus}
-										</Badge>
-										<Progress
-											value={item.aiTranslationProgress}
-											className={cn(
-												"mt-2",
-												item.aiTranslationStatus === "in_progress" &&
-													"bg-blue-400 animate-pulse",
-											)}
-										/>
-										<p className="text-xs mt-2">
-											{new Date(item.lastTranslatedAt).toLocaleString()}
-										</p>
-										{item.aiTranslationStatus === "failed" && (
-											<div className="mt-auto pt-2">
-												<Form method="post">
-													<input type="hidden" name="slug" value={item.slug} />
-													<div className="w-full">
-														<AIModelSelector onModelSelect={setSelectedModel} />
-														<input
-															type="hidden"
-															name="aiModel"
-															value={selectedModel}
-														/>
-													</div>
-													<Button
-														type="submit"
-														className="w-full"
-														disabled={navigation.state === "submitting"}
-													>
-														{navigation.state === "submitting" ? (
-															<LoadingSpinner />
-														) : (
-															<RotateCcw className="w-4 h-4" />
-														)}
-													</Button>
-												</Form>
-											</div>
-										)}
-									</CardContent>
-								</Card>
-							);
-
-							return isCompleted ? (
-								<Link
-									key={item.id}
-									to={`/reader/${encodeURIComponent(item.slug)}`}
-									className="block hover:shadow-md transition-shadow duration-200"
-								>
-									{CardContents}
-								</Link>
-							) : (
-								<div
-									key={item.id}
-									className="hover:shadow-md transition-shadow duration-200"
-								>
-									{CardContents}
-								</div>
-							);
-						})}
-					</div>
-				</ScrollArea>
-			</CardContent>
-		</Card>
-	);
-}
-
-function getVariantForStatus(
-	status: string,
-): "default" | "secondary" | "destructive" | "outline" {
-	switch (status) {
-		case "completed":
-			return "default";
-		case "in_progress":
-			return "secondary";
-		case "failed":
-			return "destructive";
-		default:
-			return "outline";
-	}
-}
diff --git a/web/app/routes/translator/functions/mutations.server.ts b/web/app/routes/translator/functions/mutations.server.ts
index a56fdf94..44b6f9b3 100644
--- a/web/app/routes/translator/functions/mutations.server.ts
+++ b/web/app/routes/translator/functions/mutations.server.ts
@@ -1,27 +1,18 @@
 import { prisma } from "~/utils/prisma";
-import { NumberedElement } from "../types";
+import type { NumberedElement } from "../types";
 
-export async function getOrCreateUserAITranslationInfo(
+export async function createUserAITranslationInfo(
 	userId: number,
-	slug: string,
+	pageId: number,
+	aiModel: string,
 	targetLanguage: string,
 ) {
 	try {
-		const userAITranslationInfo = await prisma.userAITranslationInfo.upsert({
-			where: {
-				userId_slug_targetLanguage: {
-					userId,
-					slug,
-					targetLanguage,
-				},
-			},
-			update: {
-				aiTranslationStatus: "pending",
-				aiTranslationProgress: 0,
-			},
-			create: {
+		const userAITranslationInfo = await prisma.userAITranslationInfo.create({
+			data: {
 				userId,
-				slug,
+				pageId,
+				aiModel,
 				targetLanguage,
 				aiTranslationStatus: "pending",
 				aiTranslationProgress: 0,
@@ -34,7 +25,6 @@ export async function getOrCreateUserAITranslationInfo(
 	}
 }
 
-
 export async function getOrCreatePage(
 	userId: number,
 	slug: string,
diff --git a/web/app/routes/translator/route.tsx b/web/app/routes/translator/route.tsx
index 96f1051d..48a10600 100644
--- a/web/app/routes/translator/route.tsx
+++ b/web/app/routes/translator/route.tsx
@@ -1,7 +1,6 @@
 import { parseWithZod } from "@conform-to/zod";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { useRevalidator } from "@remix-run/react";
-import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { addNumbersToContent } from "~/features/prepare-html-for-translate/utils/addNumbersToContent";
 import { extractArticle } from "~/features/prepare-html-for-translate/utils/extractArticle";
@@ -10,15 +9,14 @@ import { getTranslateUserQueue } from "~/features/translate/translate-user-queue
 import { authenticator } from "~/utils/auth.server";
 import { getTargetLanguage } from "~/utils/target-language.server";
 import { TranslationInputForm } from "./components/TranslationInputForm";
-import { UserAITranslationStatus } from "./components/UserAITranslationStatus";
-import { getOrCreateUserAITranslationInfo } from "./functions/mutations.server";
-import { getOrCreatePage,  } from "./functions/mutations.server";
+import { createUserAITranslationInfo } from "./functions/mutations.server";
+import { getOrCreatePage } from "./functions/mutations.server";
+import { createOrUpdateSourceTexts } from "./functions/mutations.server";
 import { getDbUser } from "./functions/queries.server";
 import { listUserAiTranslationInfo } from "./functions/queries.server";
 import { translationInputSchema } from "./types";
 import { generateSlug } from "./utils/generate-slug.server";
 import { processUploadedFolder } from "./utils/process-uploaded-folder";
-import { createOrUpdateSourceTexts } from "./functions/mutations.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const safeUser = await authenticator.isAuthenticated(request, {
@@ -101,12 +99,6 @@ export async function action({ request }: ActionFunctionArgs) {
 
 		for (const [folderPath, fileList] of Object.entries(folderStructure)) {
 			const folderSlug = await generateSlug(folderPath);
-			await getOrCreateUserAITranslationInfo(
-				dbUser.id,
-				folderSlug,
-				targetLanguage,
-			);
-
 			// ファイルのslugを非同期で生成
 			const fileInfoPromises = fileList.map(async (file) => ({
 				name: file.name,
@@ -117,21 +109,29 @@ export async function action({ request }: ActionFunctionArgs) {
 			// フォルダ内の各ファイルを処理
 			for (const [index, file] of fileList.entries()) {
 				const fileSlug = fileInfos[index].slug;
-				await getOrCreateUserAITranslationInfo(
-					dbUser.id,
-					fileSlug,
-					targetLanguage,
-				);
 
 				const html = await file.text();
 
 				const { content, title } = extractArticle(html);
 				const numberedContent = addNumbersToContent(content);
-				const page = await getOrCreatePage(safeUser.id, fileSlug, title, numberedContent);
+				const page = await getOrCreatePage(
+					safeUser.id,
+					fileSlug,
+					title,
+					numberedContent,
+				);
+				const userAITranslationInfo = await createUserAITranslationInfo(
+					dbUser.id,
+					page.id,
+					submission.value.aiModel,
+					targetLanguage,
+				);
+
 				const numberedElements = extractNumberedElements(numberedContent);
 				await createOrUpdateSourceTexts(numberedElements, page.id);
 				// ファイルの翻訳ジョブをキューに追加
 				await queue.add(`translate-${safeUser.id}`, {
+					userAITranslationInfoId: userAITranslationInfo.id,
 					geminiApiKey: geminiApiKey,
 					aiModel: submission.value.aiModel,
 					userId: safeUser.id,
@@ -140,7 +140,6 @@ export async function action({ request }: ActionFunctionArgs) {
 					title,
 					numberedContent,
 					numberedElements,
-					slug: fileSlug,
 				});
 			}
 
@@ -167,32 +166,19 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export default function TranslatePage() {
-	const {  targetLanguage, userAITranslationInfo, hasGeminiApiKey } =
+	const { targetLanguage, userAITranslationInfo, hasGeminiApiKey } =
 		useTypedLoaderData<typeof loader>();
 	const revalidator = useRevalidator();
 
-	useEffect(() => {
-		const intervalId = setInterval(() => {
-			revalidator.revalidate();
-		}, 5000);
-
-		return () => clearInterval(intervalId);
-	}, [revalidator]);
-
 	return (
 		<div>
 			<div className="container mx-auto max-w-2xl min-h-50 py-10">
 				<div className="pb-4">
-					{hasGeminiApiKey ? <TranslationInputForm /> : "Gemini API key is not set"}
-				</div>
-				<div>
-					<h2 className="text-2xl font-bold">Translation history</h2>
-					<div>
-						<UserAITranslationStatus
-							userAITranslationInfo={userAITranslationInfo}
-							targetLanguage={targetLanguage}
-						/>
-					</div>
+					{hasGeminiApiKey ? (
+						<TranslationInputForm />
+					) : (
+						"Gemini API key is not set"
+					)}
 				</div>
 			</div>
 		</div>
diff --git a/web/app/routes/translator/types.ts b/web/app/routes/translator/types.ts
index 41c8e724..cb5d9d90 100644
--- a/web/app/routes/translator/types.ts
+++ b/web/app/routes/translator/types.ts
@@ -22,4 +22,4 @@ export type PageTranslationInfoItem = z.infer<typeof PageTranslationInfoSchema>;
 export type NumberedElement = {
 	number: number;
 	text: string;
-};
\ No newline at end of file
+};
diff --git a/web/app/routes/welcome/functions/mutations.server.ts b/web/app/routes/welcome/functions/mutations.server.ts
index f0996c09..f4f55230 100644
--- a/web/app/routes/welcome/functions/mutations.server.ts
+++ b/web/app/routes/welcome/functions/mutations.server.ts
@@ -6,6 +6,6 @@ export async function updateUserName(
 ): Promise<void> {
 	await prisma.user.update({
 		where: { id: userId },
-		data: { userName },
+		data: { userName, displayName: userName },
 	});
 }
diff --git a/web/app/routes/welcome/route.tsx b/web/app/routes/welcome/route.tsx
index 905677b5..1c915d3a 100644
--- a/web/app/routes/welcome/route.tsx
+++ b/web/app/routes/welcome/route.tsx
@@ -9,9 +9,9 @@ import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { authenticator } from "~/utils/auth.server";
+import { commitSession, getSession } from "~/utils/session.server";
 import { updateUserName } from "./functions/mutations.server";
 import { isUserNameTaken } from "./functions/queries.server";
-
 const schema = z.object({
 	userName: z
 		.string()
@@ -47,7 +47,16 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 	try {
 		await updateUserName(user.id, userName);
-		return redirect(`/${userName}`);
+		// セッションを更新
+		const session = await getSession(request.headers.get("Cookie"));
+		user.userName = userName;
+		user.displayName = userName;
+		session.set("user", user);
+		return redirect(`/${userName}`, {
+			headers: {
+				"Set-Cookie": await commitSession(session),
+			},
+		});
 	} catch (error) {
 		console.error("Error updating username:", error);
 		return submission.reply({
diff --git a/web/app/utils/target-language.server.ts b/web/app/utils/target-language.server.ts
index ec73a24e..e328794e 100644
--- a/web/app/utils/target-language.server.ts
+++ b/web/app/utils/target-language.server.ts
@@ -2,15 +2,16 @@ import { commitSession, getSession } from "~/utils/session.server";
 
 export const getTargetLanguage = async (request: Request) => {
 	const session = await getSession(request.headers.get("Cookie"));
-	const targetLanguage = session.get("targetLanguage") ?? "ja";
-	return targetLanguage;
+	return session.get("targetLanguage") ?? "ja";
 };
 
-export const buildTargetLanguageCookie = async (
+export const setTargetLanguage = async (
 	request: Request,
 	targetLanguage: string,
 ) => {
 	const session = await getSession(request.headers.get("Cookie"));
 	session.set("targetLanguage", targetLanguage);
-	return await commitSession(session);
+	return {
+		"Set-Cookie": await commitSession(session),
+	};
 };
diff --git a/web/package.json b/web/package.json
index 0037ddec..6ae0f8cd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.1.1",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-label": "^2.1.0",
+		"@radix-ui/react-popover": "^1.1.1",
 		"@radix-ui/react-progress": "^1.1.0",
 		"@radix-ui/react-scroll-area": "^1.1.0",
 		"@radix-ui/react-select": "^2.1.1",
@@ -46,6 +47,7 @@
 		"bullmq": "^5.10.4",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
+		"cmdk": "1.0.0",
 		"html-react-parser": "^5.1.11",
 		"htmlparser2": "^9.1.0",
 		"isbot": "^5.1.13",
diff --git a/web/prisma/migrations/20240812055942_/migration.sql b/web/prisma/migrations/20240812055942_/migration.sql
new file mode 100644
index 00000000..237388a5
--- /dev/null
+++ b/web/prisma/migrations/20240812055942_/migration.sql
@@ -0,0 +1,21 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `slug` on the `user_ai_translation_info` table. All the data in the column will be lost.
+  - Added the required column `ai_model` to the `user_ai_translation_info` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `page_id` to the `user_ai_translation_info` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropIndex
+DROP INDEX "user_ai_translation_info_user_id_slug_target_language_key";
+
+-- AlterTable
+ALTER TABLE "user_ai_translation_info" DROP COLUMN "slug",
+ADD COLUMN     "ai_model" TEXT NOT NULL,
+ADD COLUMN     "page_id" INTEGER NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "user_ai_translation_info_page_id_target_language_idx" ON "user_ai_translation_info"("page_id", "target_language");
+
+-- AddForeignKey
+ALTER TABLE "user_ai_translation_info" ADD CONSTRAINT "user_ai_translation_info_page_id_fkey" FOREIGN KEY ("page_id") REFERENCES "pages"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/web/prisma/migrations/20240812063423_/migration.sql b/web/prisma/migrations/20240812063423_/migration.sql
new file mode 100644
index 00000000..e8a11dff
--- /dev/null
+++ b/web/prisma/migrations/20240812063423_/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `last_translated_at` on the `user_ai_translation_info` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "user_ai_translation_info" DROP COLUMN "last_translated_at",
+ADD COLUMN     "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
diff --git a/web/prisma/schema.prisma b/web/prisma/schema.prisma
index d14c7f21..88362a36 100644
--- a/web/prisma/schema.prisma
+++ b/web/prisma/schema.prisma
@@ -37,15 +37,17 @@ model User {
 model UserAITranslationInfo {
   id                    Int      @id @default(autoincrement())
   userId                Int      @map("user_id")
-  slug                   String   @default("unknown")
+  pageId                Int      @map("page_id")
   targetLanguage        String   @map("target_language")
+  aiModel               String   @map("ai_model")
   aiTranslationStatus   String   @default("pending") @map("ai_translation_status")
   aiTranslationProgress Int      @default(0) @map("ai_translation_progress")
-  lastTranslatedAt      DateTime @default(now()) @map("last_translated_at")
+  createdAt             DateTime @default(now()) @map("created_at")
   user                  User     @relation(fields: [userId], references: [id])
+  page                  Page     @relation(fields: [pageId], references: [id])
 
-  @@unique([userId, slug, targetLanguage])
   @@index([userId])
+  @@index([pageId, targetLanguage])
   @@map("user_ai_translation_info")
 }
 
@@ -83,6 +85,7 @@ model Page {
   createdAt           DateTime              @default(now()) @map("created_at")
   user                User                  @relation(fields: [userId], references: [id])
   userId              Int                   @map("user_id")
+  userAITranslationInfo UserAITranslationInfo[]
   sourceTexts     SourceText[]
   pageTranslationInfo PageTranslationInfo[]
   userReadHistory     UserReadHistory[]