diff --git a/README.md b/README.md
index 9d988f0..10d8206 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,32 @@
-# admin application template
+# next-admin
 
-Admin application template using Next.js 16 (App Router) with yarn workspaces monorepo structure.
+Next.jsを使用した管理画面アプリケーションのテンプレートプロジェクトで、  
+Yarn Workspacesによるモノレポ構成になっています。
 
-## base libraries
-- Next.js v16
-- Better Auth
-- TailwindCSS
-- prisma
-- yarn workspace
-- quill
-- resend
+## Base Libraries
+
+- Next.js 16
+- Better Auth 1.4
+- TailwindCSS 7
+- prisma 4
+- yarn 4
+
+### Infrastructures
 
-### infrastructures
 - docker compose
-- PostgreSQL
-- mailhog
-- localstack
-  - S3
-  - SES
+- PostgreSQL 18
+- oven(SES)
+
+
+## リポジトリ構成
 
+```
+next-admin/
+├── apps/
+│   ├── admin/          # 管理画面アプリケーション (Next.js)
+│   └── web/            # サービスアプリケーション用フレイスホルダー
+├── packages/
+│   └── db/             # マイグレーション管理 (Prisma)
+├── infra/              # インフラ設定
+└── docker-compose.yml  # ローカル開発用インフラ管理
+```
diff --git a/apps/admin/.env.template b/apps/admin/.env.template
index bfa3c7e..657df42 100644
--- a/apps/admin/.env.template
+++ b/apps/admin/.env.template
@@ -21,5 +21,7 @@ AWS_S3_IMAGE_BUCKET='local-image'
 AWS_S3_RESION='us-east-1'
 # for local only
 AWS_S3_ENDPOINT=http://localhost:4566
+AWS_SES_ENDPOINT=http://localhost:58005
+MAIL_FROM="Next Admin <no-reply@example.com>"
 
 # add packages/db environments
diff --git a/apps/admin/README.md b/apps/admin/README.md
index db7e73a..d4f9c41 100644
--- a/apps/admin/README.md
+++ b/apps/admin/README.md
@@ -1,36 +1,82 @@
 # Admin
 
-# for Developers
+Next.jsを使用した管理画面アプリケーション
 
-## 0. start containers
+## セットアップ手順
 
-```
-$ docker compose up -d
-```
+### 1. インフラの起動
 
-## 1. install
+プロジェクトルートでDockerコンテナを起動する。
 
+```bash
+docker compose up -d
 ```
-$ cat .node-version | nodenv install
-$ yarn
+
+### 2. Node.js のインストール
+
+`.node-version`に記載のバージョンを使用する。
+
+```bash
+cat .node-version | nodenv install
 ```
 
-## 2. create .env.local
+### 3. 依存パッケージのインストール
 
-create .env.local from .env.template and edit it.
+プロジェクトルートで実行する。
 
+```bash
+yarn
 ```
+
+### 4. 環境変数の設定
+
+`.env.template` を元に `.env.local` を作成し、必要な値を設定する。
+
+```bash
 cp .env.template .env.local
 ```
 
-## 3. start local application
+主な設定項目:
+- `BETTER_AUTH_SECRET` - 認証用シークレットキー（要生成）
+- `JWT_SECRET` - JWT署名用キー（要生成）
+- AWS関連 - ローカル開発ではデフォルト値で動作
+
+`packages/db` の環境変数も `.env.local` に含める（テンプレート内のコメント参照）。
+
+### 5. データベースのセットアップ
 
+```bash
+# Prisma クライアント生成
+yarn db:generate
+
+# マイグレーション実行
+yarn db:deploy
 ```
-$ yarn dev
+
+### 6. 開発サーバーの起動
+
+```bash
+# ルートからの場合
+yarn admin:dev
+
+# apps/adminからの場合
+yarn dev
 ```
 
 - http://localhost:3500/
 
-## 4. create first account
+### 7. 初回アカウントの作成
+
+ブラウザで以下にアクセスし、最初の管理者アカウントを作成する。
 
 - http://localhost:3500/firstuser
+
+
+## 開発用Tips
+
+### メールの受信確認
+
+ローカル環境で送信したメールは、実際のアドレスには送信されません。  
+内容は以下のURLで確認することができます。
+
+- http://localhost:58005/
diff --git a/apps/admin/src/app/(app)/_layout/app-layout.tsx b/apps/admin/src/app/(app)/_layout/app-layout.tsx
index b717f55..61c07c7 100644
--- a/apps/admin/src/app/(app)/_layout/app-layout.tsx
+++ b/apps/admin/src/app/(app)/_layout/app-layout.tsx
@@ -3,6 +3,7 @@
 import { usePathname } from "next/navigation";
 import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { NavigationProgressProvider } from "@/hooks/use-navigation-router";
 import { Breadcrumb } from "./breadcrumb";
 import type { Navigation } from "./navigation";
 import { ProtectedView } from "./protected-view";
@@ -20,30 +21,32 @@ export const AppLayout = ({ children, navigation, userName, userEmail }: Props)
 
   return (
     <ProtectedView>
-      <SidebarProvider>
-        <AppSidebar pathname={pathname} navigation={navigation} userName={userName} userEmail={userEmail} />
-        <SidebarInset>
-          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-            <div className="flex items-center gap-2">
-              <SidebarTrigger className="-ml-1" />
-              <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-              <Breadcrumb />
-            </div>
-          </header>
-          <main className="flex-1 p-6">{children}</main>
-          <footer className="p-4 text-right text-sm text-muted-foreground">
-            <a
-              href="https://github.com/seriwb/next-admin"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:underline"
-            >
-              next-admin
-            </a>
-            <span className="ml-4">©seri</span>
-          </footer>
-        </SidebarInset>
-      </SidebarProvider>
+      <NavigationProgressProvider>
+        <SidebarProvider>
+          <AppSidebar pathname={pathname} navigation={navigation} userName={userName} userEmail={userEmail} />
+          <SidebarInset>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+              <div className="flex items-center gap-2">
+                <SidebarTrigger className="-ml-1" />
+                <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+                <Breadcrumb />
+              </div>
+            </header>
+            <main className="flex-1 p-6">{children}</main>
+            <footer className="p-4 text-right text-sm text-muted-foreground">
+              <a
+                href="https://github.com/seriwb/next-admin"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:underline"
+              >
+                next-admin
+              </a>
+              <span className="ml-4">©seri</span>
+            </footer>
+          </SidebarInset>
+        </SidebarProvider>
+      </NavigationProgressProvider>
     </ProtectedView>
   );
 };
diff --git a/apps/admin/src/app/(app)/_layout/breadcrumb.tsx b/apps/admin/src/app/(app)/_layout/breadcrumb.tsx
index 89aaa2f..4b4e18d 100644
--- a/apps/admin/src/app/(app)/_layout/breadcrumb.tsx
+++ b/apps/admin/src/app/(app)/_layout/breadcrumb.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import React, { useMemo } from "react";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { BREADCRUMB_ROUTES } from "@/app/(app)/_layout/navigation";
+import { Link } from "@/components/link";
 import {
   BreadcrumbItem,
   BreadcrumbLink,
diff --git a/apps/admin/src/app/(app)/_layout/sidebar.tsx b/apps/admin/src/app/(app)/_layout/sidebar.tsx
index 33a8c44..ada75f7 100644
--- a/apps/admin/src/app/(app)/_layout/sidebar.tsx
+++ b/apps/admin/src/app/(app)/_layout/sidebar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import Link from "next/link";
 import { ChevronsUpDown, Gauge, LogOut, type LucideIcon, Shield, User, Users } from "lucide-react";
+import { Link } from "@/components/link";
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx b/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx
index bd1cb2e..8496f5f 100644
--- a/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx
+++ b/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { useForm } from "react-hook-form";
@@ -21,6 +20,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { deleteAccountAction, updateAccountAction } from "./actions";
 import { type EditAccountInput, editAccountSchema } from "./lib";
 
@@ -30,7 +30,7 @@ type Props = {
 };
 
 export const EditAccount = ({ account, currentUserId }: Props) => {
-  const router = useRouter();
+  const { push } = useNavigationRouter();
   const [errorMessage, setErrorMessage] = useState("");
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -54,7 +54,7 @@ export const EditAccount = ({ account, currentUserId }: Props) => {
       const result = await updateAccountAction(account.id, data);
       if (result.success) {
         toast.success("アカウントを更新しました");
-        router.push("/system/accounts");
+        push("/system/accounts");
       } else {
         setErrorMessage(result.error || "");
         if (result.fieldErrors) {
@@ -75,7 +75,7 @@ export const EditAccount = ({ account, currentUserId }: Props) => {
       const result = await deleteAccountAction(account.id);
       if (result.success) {
         toast.success("アカウントを削除しました");
-        router.push("/system/accounts");
+        push("/system/accounts");
       } else {
         toast.error(result.error || "削除に失敗しました");
         setShowDeleteDialog(false);
@@ -199,7 +199,7 @@ export const EditAccount = ({ account, currentUserId }: Props) => {
                   <Button
                     type="button"
                     variant="outline"
-                    onClick={() => router.push("/system/accounts")}
+                    onClick={() => push("/system/accounts")}
                     disabled={isSubmitting}
                   >
                     キャンセル
diff --git a/apps/admin/src/app/(app)/system/accounts/_parts/account-list.tsx b/apps/admin/src/app/(app)/system/accounts/_parts/account-list.tsx
index f0a61f9..dcf5bf6 100644
--- a/apps/admin/src/app/(app)/system/accounts/_parts/account-list.tsx
+++ b/apps/admin/src/app/(app)/system/accounts/_parts/account-list.tsx
@@ -10,6 +10,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { PER_PAGE } from "@/constants/application";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import dayjs from "@/lib/utils/date";
 import { AccountSearch } from "./account-search";
 import { deleteAccountAction } from "./actions";
@@ -48,6 +49,7 @@ const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destr
 
 export const AccountList = ({ data, total, page, query, sort, currentUserId }: Props) => {
   const router = useRouter();
+  const { push } = useNavigationRouter();
   const [deleteTarget, setDeleteTarget] = useState<AccountSummary | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
@@ -56,7 +58,7 @@ export const AccountList = ({ data, total, page, query, sort, currentUserId }: P
     params.set("page", String(newPage + 1));
     if (query) params.set("query", query);
     if (sort) params.set("sort", sort);
-    router.push(`/system/accounts?${params.toString()}`);
+    push(`/system/accounts?${params.toString()}`);
   };
 
   const handleDelete = async () => {
diff --git a/apps/admin/src/app/(app)/system/accounts/_parts/account-search.tsx b/apps/admin/src/app/(app)/system/accounts/_parts/account-search.tsx
index 0fa3167..4f41532 100644
--- a/apps/admin/src/app/(app)/system/accounts/_parts/account-search.tsx
+++ b/apps/admin/src/app/(app)/system/accounts/_parts/account-search.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useRef, useState } from "react";
-import { useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 
 type Props = {
   query: string;
@@ -11,7 +11,7 @@ type Props = {
 };
 
 export const AccountSearch = ({ query, sort }: Props) => {
-  const router = useRouter();
+  const { push } = useNavigationRouter();
   const [searchValue, setSearchValue] = useState(query);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -20,7 +20,7 @@ export const AccountSearch = ({ query, sort }: Props) => {
     params.set("page", "1");
     if (value) params.set("query", value);
     if (newSort) params.set("sort", newSort);
-    router.push(`/system/accounts?${params.toString()}`);
+    push(`/system/accounts?${params.toString()}`);
   };
 
   const handleSearchChange = (value: string) => {
diff --git a/apps/admin/src/app/(app)/system/accounts/new/_parts/actions.ts b/apps/admin/src/app/(app)/system/accounts/new/_parts/actions.ts
index b870cc0..0794b71 100644
--- a/apps/admin/src/app/(app)/system/accounts/new/_parts/actions.ts
+++ b/apps/admin/src/app/(app)/system/accounts/new/_parts/actions.ts
@@ -22,6 +22,7 @@ export const createAccountAction = async (input: CreateAccountInput): Promise<Se
       password: parsed.data.password,
       name: parsed.data.name || undefined,
       privilege: parsed.data.privilege,
+      sendInvite: parsed.data.sendInvite,
     });
     return result;
   } catch (error) {
diff --git a/apps/admin/src/app/(app)/system/accounts/new/_parts/create-account.tsx b/apps/admin/src/app/(app)/system/accounts/new/_parts/create-account.tsx
index 5a520db..a5303b3 100644
--- a/apps/admin/src/app/(app)/system/accounts/new/_parts/create-account.tsx
+++ b/apps/admin/src/app/(app)/system/accounts/new/_parts/create-account.tsx
@@ -1,21 +1,22 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useNavigationRouter } from "@/hooks/use-navigation-router";
 import { createAccountAction } from "./actions";
 import { type CreateAccountInput, createAccountSchema } from "./lib";
 
 export const CreateAccount = () => {
-  const router = useRouter();
+  const { push, back } = useNavigationRouter();
   const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<CreateAccountInput>({
@@ -27,6 +28,7 @@ export const CreateAccount = () => {
       confirmPassword: "",
       name: "",
       privilege: "Normal",
+      sendInvite: false,
     },
   });
   const { isSubmitting } = form.formState;
@@ -37,7 +39,7 @@ export const CreateAccount = () => {
       const result = await createAccountAction(data);
       if (result.success) {
         toast.success("アカウントを作成しました");
-        router.push("/system/accounts");
+        push("/system/accounts");
       } else {
         setErrorMessage(result.error || "");
         if (result.fieldErrors) {
@@ -146,9 +148,24 @@ export const CreateAccount = () => {
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="sendInvite"
+              render={({ field }) => (
+                <FormItem className="flex items-center gap-2">
+                  <FormControl>
+                    <Checkbox checked={field.value} onCheckedChange={field.onChange} id="sendInvite" />
+                  </FormControl>
+                  <FormLabel htmlFor="sendInvite" className="cursor-pointer">
+                    招待メールを送信する
+                  </FormLabel>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             {errorMessage && <p className="text-sm font-medium text-destructive">{errorMessage}</p>}
             <div className="flex gap-2">
-              <Button type="button" variant="outline" onClick={() => router.back()} disabled={isSubmitting}>
+              <Button type="button" variant="outline" onClick={() => back()} disabled={isSubmitting}>
                 キャンセル
               </Button>
               <Button type="submit" disabled={isSubmitting}>
diff --git a/apps/admin/src/app/(app)/system/accounts/new/_parts/lib.ts b/apps/admin/src/app/(app)/system/accounts/new/_parts/lib.ts
index b4ecd9c..0cacf37 100644
--- a/apps/admin/src/app/(app)/system/accounts/new/_parts/lib.ts
+++ b/apps/admin/src/app/(app)/system/accounts/new/_parts/lib.ts
@@ -15,6 +15,7 @@ export const createAccountSchema = z
     confirmPassword: passwordSchema,
     name: accountNameSchema,
     privilege: accountPrivilegeSchema,
+    sendInvite: z.boolean(),
   })
   .refine(passwordMatchRefine.check, passwordMatchRefine.params);
 
diff --git a/apps/admin/src/app/api/admin/accounts/route.ts b/apps/admin/src/app/api/admin/accounts/route.ts
index 40f0909..271c9ca 100644
--- a/apps/admin/src/app/api/admin/accounts/route.ts
+++ b/apps/admin/src/app/api/admin/accounts/route.ts
@@ -1,7 +1,10 @@
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
-import { PER_PAGE } from "@/constants/application";
+import { render } from "@react-email/render";
+import { APP_NAME, PER_PAGE } from "@/constants/application";
 import { auth } from "@/lib/auth";
+import { sendMail } from "@/lib/mail";
+import { InviteEmail } from "@/lib/mail/templates/invite-email";
 import prisma from "@/lib/prisma";
 import type { ServerResult } from "@/types/app";
 
@@ -69,6 +72,7 @@ export async function POST(request: NextRequest) {
       password: string;
       name?: string;
       privilege: string;
+      sendInvite?: boolean;
     };
 
     await auth.api.signUpEmail({
@@ -80,6 +84,24 @@ export async function POST(request: NextRequest) {
       },
     });
 
+    // 招待メール送信（失敗してもアカウント作成はブロックしない）
+    if (body.sendInvite) {
+      try {
+        const loginUrl = `${process.env.NEXT_PUBLIC_HOST}/signin`;
+        const html = await render(
+          InviteEmail({
+            name: body.name || "",
+            email: body.email,
+            password: body.password,
+            loginUrl,
+          })
+        );
+        await sendMail(body.email, `[${APP_NAME}] アカウントが作成されました`, html);
+      } catch (mailError) {
+        console.error("招待メール送信エラー:", mailError);
+      }
+    }
+
     return NextResponse.json({ success: true });
   } catch (error) {
     console.error("Accounts POST API error:", error);
diff --git a/apps/admin/src/components/link-indicator.tsx b/apps/admin/src/components/link-indicator.tsx
new file mode 100644
index 0000000..9653d16
--- /dev/null
+++ b/apps/admin/src/components/link-indicator.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { useLinkStatus } from "next/link";
+
+// ページ遷移中にプログレスバーを表示するインディケーター
+export const LinkIndicator = () => {
+  const { pending } = useLinkStatus();
+
+  if (!pending) {
+    return null;
+  }
+
+  return <span className="fixed top-0 left-0 z-100 h-0.5 w-0 animate-indicator-bar bg-ring" />;
+};
diff --git a/apps/admin/src/components/link.tsx b/apps/admin/src/components/link.tsx
index f2a2f31..49cb693 100644
--- a/apps/admin/src/components/link.tsx
+++ b/apps/admin/src/components/link.tsx
@@ -1,5 +1,6 @@
 import { type AnchorHTMLAttributes, type ReactNode, forwardRef } from "react";
 import NextLink, { type LinkProps as NextLinkProps } from "next/link";
+import { LinkIndicator } from "@/components/link-indicator";
 
 type LinkProps = NextLinkProps &
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof NextLinkProps> & {
@@ -11,10 +12,16 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function LinkWithRe
     // Turn next/link prefetching off by default.
     // @see https://github.com/vercel/next.js/discussions/24009
     prefetch = false,
+    children,
     ...rest
   },
   ref
 ) {
-  return <NextLink prefetch={prefetch} {...rest} ref={ref} />;
+  return (
+    <NextLink prefetch={prefetch} {...rest} ref={ref}>
+      <LinkIndicator />
+      {children}
+    </NextLink>
+  );
 });
 export default Link;
diff --git a/apps/admin/src/constants/application.ts b/apps/admin/src/constants/application.ts
index 7f65a71..6247d13 100644
--- a/apps/admin/src/constants/application.ts
+++ b/apps/admin/src/constants/application.ts
@@ -1,6 +1,6 @@
 // TODO: Change these constants.
-export const TITLE = "Application Name";
-export const APP_NAME = "Application Name";
+export const TITLE = "Next Admin";
+export const APP_NAME = "Next Admin";
 export const DEFAULT_VIEW = "/dashboard";
 
 export const ACCOUNT_PRIVILEGE = {
diff --git a/apps/admin/src/hooks/use-navigation-router.tsx b/apps/admin/src/hooks/use-navigation-router.tsx
new file mode 100644
index 0000000..507092a
--- /dev/null
+++ b/apps/admin/src/hooks/use-navigation-router.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { createContext, useCallback, useContext, useTransition } from "react";
+import { useRouter } from "next/navigation";
+
+type NavigationProgressContextType = {
+  push: (href: string) => void;
+  replace: (href: string) => void;
+  back: () => void;
+};
+
+const NavigationProgressContext = createContext<NavigationProgressContextType>({
+  push: (_href: string) => {
+    return;
+  },
+  replace: (_href: string) => {
+    return;
+  },
+  back: () => {
+    return;
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+// router.push/replace/back をラップしてページ遷移中にプログレスバーを表示するプロバイダー
+export const NavigationProgressProvider = ({ children }: Props) => {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const push = useCallback(
+    (href: string) => {
+      startTransition(() => {
+        router.push(href);
+      });
+    },
+    [router]
+  );
+
+  const replace = useCallback(
+    (href: string) => {
+      startTransition(() => {
+        router.replace(href);
+      });
+    },
+    [router]
+  );
+
+  const back = useCallback(() => {
+    startTransition(() => {
+      router.back();
+    });
+  }, [router]);
+
+  return (
+    <NavigationProgressContext.Provider value={{ push, replace, back }}>
+      {isPending && <span className="fixed top-0 left-0 z-100 h-0.5 w-0 animate-indicator-bar bg-ring" />}
+      {children}
+    </NavigationProgressContext.Provider>
+  );
+};
+
+// router.push/replace/back の代わりに使うフック（遷移中にプログレスバーを表示）
+export const useNavigationRouter = () => useContext(NavigationProgressContext);
diff --git a/apps/admin/src/lib/aws.ts b/apps/admin/src/lib/aws.ts
new file mode 100644
index 0000000..1b99964
--- /dev/null
+++ b/apps/admin/src/lib/aws.ts
@@ -0,0 +1,17 @@
+import { S3Client } from "@aws-sdk/client-s3";
+import { SESClient } from "@aws-sdk/client-ses";
+
+export const s3Client = new S3Client({
+  // credentials: {
+  //   accessKeyId: process.env.AWS_ACCESS_KEY_ID || '',
+  //   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || '',
+  // },
+  region: process.env.AWS_S3_RESION,
+  endpoint: process.env.AWS_S3_ENDPOINT,
+  forcePathStyle: true,
+});
+
+export const sesClient = new SESClient({
+  region: process.env.AWS_SES_REGION || "us-east-1",
+  ...(process.env.AWS_SES_ENDPOINT ? { endpoint: process.env.AWS_SES_ENDPOINT } : {}),
+});
diff --git a/apps/admin/src/lib/mail/index.ts b/apps/admin/src/lib/mail/index.ts
new file mode 100644
index 0000000..d630133
--- /dev/null
+++ b/apps/admin/src/lib/mail/index.ts
@@ -0,0 +1 @@
+export { sendMail } from "./send-mail";
diff --git a/apps/admin/src/lib/mail/send-mail.ts b/apps/admin/src/lib/mail/send-mail.ts
new file mode 100644
index 0000000..430ebc7
--- /dev/null
+++ b/apps/admin/src/lib/mail/send-mail.ts
@@ -0,0 +1,26 @@
+import { SendEmailCommand } from "@aws-sdk/client-ses";
+import { sesClient } from "@/lib/aws";
+
+// メール送信ユーティリティ
+export const sendMail = async (to: string, subject: string, html: string): Promise<void> => {
+  const from = process.env.MAIL_FROM ?? "no-reply@example.com";
+  const command = new SendEmailCommand({
+    Source: from,
+    Destination: {
+      ToAddresses: [to],
+    },
+    Message: {
+      Subject: {
+        Data: subject,
+        Charset: "UTF-8",
+      },
+      Body: {
+        Html: {
+          Data: html,
+          Charset: "UTF-8",
+        },
+      },
+    },
+  });
+  await sesClient.send(command);
+};
diff --git a/apps/admin/src/lib/mail/templates/invite-email.tsx b/apps/admin/src/lib/mail/templates/invite-email.tsx
new file mode 100644
index 0000000..46b09da
--- /dev/null
+++ b/apps/admin/src/lib/mail/templates/invite-email.tsx
@@ -0,0 +1,61 @@
+import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text } from "@react-email/components";
+import { APP_NAME } from "@/constants/application";
+
+type Props = {
+  name: string;
+  email: string;
+  password: string;
+  loginUrl: string;
+};
+
+// 招待メールテンプレート
+export const InviteEmail = ({ name, email, password, loginUrl }: Props) => {
+  return (
+    <Html>
+      <Head />
+      <Preview>{`[${APP_NAME}]アカウントが作成されました`}</Preview>
+      <Body style={{ backgroundColor: "#fff", fontFamily: "sans-serif" }}>
+        <Container style={{ maxWidth: "600px", margin: "0 auto", padding: "40px 20px" }}>
+          <Heading style={{ fontSize: "24px", color: "#333" }}>アカウントが作成されました</Heading>
+          <Text style={{ color: "#555" }}>
+            {name ? `${name} 様` : ""}
+            <br />
+            管理者により{APP_NAME}のアカウントが作成されました。以下の情報でログインしてください。
+          </Text>
+          <Section
+            style={{
+              backgroundColor: "#fff",
+              border: "1px solid #e0e0e0",
+              borderRadius: "8px",
+              padding: "20px",
+              margin: "20px 0",
+            }}
+          >
+            <Text style={{ margin: "4px 0", color: "#333" }}>
+              <strong>メールアドレス:</strong> {email}
+            </Text>
+            <Text style={{ margin: "4px 0", color: "#333" }}>
+              <strong>パスワード:</strong> {password}
+            </Text>
+          </Section>
+          <Button
+            href={loginUrl}
+            style={{
+              backgroundColor: "#0070f3",
+              color: "#fff",
+              borderRadius: "6px",
+              padding: "12px 24px",
+              textDecoration: "none",
+              display: "inline-block",
+            }}
+          >
+            ログインする
+          </Button>
+          <Text style={{ color: "#999", fontSize: "12px", marginTop: "32px" }}>
+            このメールに心当たりがない場合は、無視してください。
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
diff --git a/apps/admin/src/styles/globals.css b/apps/admin/src/styles/globals.css
index 672d4c1..4a5cb85 100644
--- a/apps/admin/src/styles/globals.css
+++ b/apps/admin/src/styles/globals.css
@@ -39,7 +39,23 @@
   --foreground: oklch(0.145 0 0);
 }
 
+@keyframes indicator-bar {
+  0% {
+    width: 0%;
+    opacity: 1;
+  }
+  70% {
+    width: 80%;
+    opacity: 1;
+  }
+  100% {
+    width: 100%;
+    opacity: 0;
+  }
+}
+
 @theme inline {
+  --animate-indicator-bar: indicator-bar 1.5s ease-in-out forwards;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
diff --git a/docker-compose.yml b/docker-compose.yml
index 419919a..9125ad3 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
     image: postgres:18.1
     container_name: next-admin_postgres
     ports:
-      - 5432:5432
+      - 55432:5432
     volumes:
       - ./infra/postgres/sql/:/docker-entrypoint-initdb.d/
       - postgres-data:/var/lib/postgres
@@ -12,31 +12,12 @@ services:
       POSTGRES_PASSWORD: "admin"
     networks:
       - next-admin-network
-
-  localstack:
-    image: localstack/localstack:4.11.1
-    container_name: next-admin_localstack
-    ports:
-      - "4566:4566"            # LocalStack Gateway
-      - "4510-4559:4510-4559"  # external services port range
-    environment:
-      - DEBUG=${DEBUG-}
-      - PERSISTENCE=${PERSISTENCE-}
-      - LAMBDA_EXECUTOR=${LAMBDA_EXECUTOR-}
-      - DOCKER_HOST=unix:///var/run/docker.sock
-    volumes:
-      - localstack-volume:/var/lib/localstack
-      - "/var/run/docker.sock:/var/run/docker.sock"
-    networks:
-      - next-admin-network
-
-  mailhog:
-    image: mailhog/mailhog:latest
-    platform: linux/amd64
-    container_name: next-admin_mailhog
+  ses:
+    image: oven/bun:1
+    container_name: next-admin_ses
     ports:
-      - "8025:8025"
-      - "1025:1025"
+      - 58005:8005
+    command: bunx aws-ses-v2-local --host=0.0.0.0
     networks:
       - next-admin-network
 
diff --git a/packages/db/.env.template b/packages/db/.env.template
index 9b6cb34..e6fd9e7 100644
--- a/packages/db/.env.template
+++ b/packages/db/.env.template
@@ -1,7 +1 @@
-DATABASE_HOST=localhost
-DATABASE_PORT=5432
-DATABASE_USERNAME=admin
-DATABASE_PASSWORD=admin
-DATABASE_NAME=next_admin
-DATABASE_TIMEZONE="+09:00"
-DATABASE_URL="postgresql://${DATABASE_USERNAME}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME}"
+DATABASE_URL="postgresql://admin:admin@localhost:55432/next_admin"
\ No newline at end of file
diff --git a/packages/db/README.md b/packages/db/README.md
index b67e705..8c0cbb1 100644
--- a/packages/db/README.md
+++ b/packages/db/README.md
@@ -1,20 +1,31 @@
 # DB
 
-## Environments
+データベース管理パッケージ (`@next-admin/db`)
 
-Set following environments at applications.
+## セットアップ手順
 
-- DATABASE_URL
+### 1. 環境変数の設定
 
+`.env.template` を元に `.env` を作成する。
 
-## Connect database
-
+```bash
+cp .env.template .env
 ```
-psql postgresql://admin:admin@127.0.0.1:5432/next_admin
+
+### 2. Prisma クライアント生成
+
+```bash
+yarn db:generate
 ```
 
-## Create migration
+### 3. マイグレーション実行
 
+```bash
+yarn db:deploy
 ```
-yarn run prisma migrate dev --name first-migration
+
+## データベース接続
+
+```bash
+psql postgresql://admin:admin@127.0.0.1:55432/next_admin
 ```