diff --git a/sysken-pay-front/src/pages/charge/complete.tsx b/sysken-pay-front/src/pages/charge/complete.tsx
new file mode 100644
index 0000000..d2bf8db
--- /dev/null
+++ b/sysken-pay-front/src/pages/charge/complete.tsx
@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+import Button from "../../components/ui/Button";
+import { useBalanceStore } from "../../store/useBalanceStore";
+
+export default function Charge() {
+  const navigate = useNavigate();
+
+  const handleHome = () => {
+    navigate("/");
+  };
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      <div className="flex flex-col items-center justify-center gap-8 h-full">
+        <div className="text-6xl font-bold  text-[#454a53] mb-13 mt-50">
+          チャージが完了しました
+        </div>
+        <div className="text-4xl font-bold  text-[#BD2929] mb-20">
+          現在のカード残高　￥
+          {useBalanceStore((state) => state.balance?.balance ?? 0)}
+        </div>
+        <Button onClick={handleHome}>ホームへ戻る</Button>
+      </div>
+    </div>
+  );
+}
diff --git a/sysken-pay-front/src/pages/charge/index.tsx b/sysken-pay-front/src/pages/charge/index.tsx
index 0df996c..e21bc34 100644
--- a/sysken-pay-front/src/pages/charge/index.tsx
+++ b/sysken-pay-front/src/pages/charge/index.tsx
@@ -12,7 +12,7 @@ export default function Charge() {
     // TODO: APIから残高を参照
     setBalance({
       userId: barcode,
-      balance: 150,
+      balance: 550,
     });
     navigate("/charge/select");
   };
diff --git a/sysken-pay-front/src/pages/charge/insert.tsx b/sysken-pay-front/src/pages/charge/insert.tsx
new file mode 100644
index 0000000..524c0ec
--- /dev/null
+++ b/sysken-pay-front/src/pages/charge/insert.tsx
@@ -0,0 +1,39 @@
+import Header from "../../components/layouts/Header/index";
+import { useNavigate } from "react-router-dom";
+import ArrowButton from "../../components/ui/ArrowButton";
+import { PriceLabel } from "../../components/ui/PriceLabel";
+import { useChargeStore } from "../../store/useChargeStore";
+import { useBalanceStore } from "../../store/useBalanceStore";
+
+export default function ChargeInsertPage() {
+  const navigate = useNavigate();
+  const chargeAmount = useChargeStore((state) => state.chargeAmount);
+  const setBalance = useBalanceStore((state) => state.setBalance);
+
+  const handleNext = (barcode: string) => {
+    // TODO: APIから残高を参照
+    setBalance({
+      userId: barcode,
+      balance: 550,
+    });
+    navigate("/charge/complete");
+  };
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      <Header title="チャージ金額" />
+      <div className="flex-1 flex flex-col items-center justify-center gap-8 pb-[10vh]">
+        <div className="text-6xl text-center font-bold text-center text-[#454a53]">
+          箱にお金を入れてください
+        </div>
+        <PriceLabel label="チャージ金額" price={chargeAmount} />
+      </div>
+      <ArrowButton variant="prev" onClick={() => navigate("/charge/select")}>
+        戻る
+      </ArrowButton>
+      <ArrowButton variant="next" onClick={() => handleNext("user123")}>
+        完了
+      </ArrowButton>
+    </div>
+  );
+}
diff --git a/sysken-pay-front/src/pages/charge/select.tsx b/sysken-pay-front/src/pages/charge/select.tsx
index b2605f4..f919f31 100644
--- a/sysken-pay-front/src/pages/charge/select.tsx
+++ b/sysken-pay-front/src/pages/charge/select.tsx
@@ -6,13 +6,19 @@ import { PriceLabel } from "../../components/ui/PriceLabel";
 import { Input } from "../../components/ui/Input";
 import { useBalanceStore } from "../../store/useBalanceStore";
 import { useState } from "react";
+import { useChargeStore } from "../../store/useChargeStore";
 
 export default function ChargeSelectPage() {
   const navigate = useNavigate();
   const balance = useBalanceStore((state) => state.balance?.balance ?? 0);
+  const saveChargeAmount = useChargeStore((state) => state.setChargeAmount);
   const [chargeAmount, setChargeAmount] = useState("");
-  const handleHome = () => {
-    navigate("/");
+
+  const handleNext = () => {
+    const normalizedChargeAmount =
+      Number(chargeAmount.replace(/[^\d]/g, "")) || 0;
+    saveChargeAmount(normalizedChargeAmount);
+    navigate("/charge/insert");
   };
 
   return (
@@ -33,10 +39,10 @@ export default function ChargeSelectPage() {
         </div>
         <SelectButtonGroup onSelectAmount={setChargeAmount} />
       </div>
-      <ArrowButton variant="prev" onClick={handleHome}>
+      <ArrowButton variant="prev" onClick={() => navigate("/charge")}>
         戻る
       </ArrowButton>
-      <ArrowButton variant="next" onClick={() => navigate("/charge/insert")}>
+      <ArrowButton variant="next" onClick={handleNext}>
         次へ
       </ArrowButton>
     </div>
diff --git a/sysken-pay-front/src/router.ts b/sysken-pay-front/src/router.ts
index 8bd0698..b924ba1 100644
--- a/sysken-pay-front/src/router.ts
+++ b/sysken-pay-front/src/router.ts
@@ -21,6 +21,8 @@ export type Path =
   | `/buy/confirm`
   | `/buy/list`
   | `/charge`
+  | `/charge/complete`
+  | `/charge/insert`
   | `/charge/select`
 
 export type Params = {
diff --git a/sysken-pay-front/src/store/useChargeStore.ts b/sysken-pay-front/src/store/useChargeStore.ts
new file mode 100644
index 0000000..8fcccb4
--- /dev/null
+++ b/sysken-pay-front/src/store/useChargeStore.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type ChargeStore = {
+  chargeAmount: number;
+  setChargeAmount: (amount: number) => void;
+  clearChargeAmount: () => void;
+};
+
+export const useChargeStore = create<ChargeStore>((set) => ({
+  chargeAmount: 0,
+  setChargeAmount: (amount) => set({ chargeAmount: amount }),
+  clearChargeAmount: () => set({ chargeAmount: 0 }),
+}));