diff --git a/routes/tenant/payment-methods/index.tsx b/routes/tenant/payment-methods/index.tsx
index e69de29..1994d25 100644
--- a/routes/tenant/payment-methods/index.tsx
+++ b/routes/tenant/payment-methods/index.tsx
@@ -0,0 +1,97 @@
+// routes/tenant/payment-methods/index.tsx
+import { define } from "../../../utils.ts";
+import { page } from "fresh";
+import { PaymentMethod } from "../../../services/paymentService.ts";
+import PaymentMethodsList from "../../../islands/PaymentMethodsList.tsx";
+
+interface PaymentMethodsPageData {
+  paymentMethods?: PaymentMethod[];
+  error?: string;
+}
+
+export const handler = define.handlers({
+  async GET(ctx) {
+    const { user_id } = ctx.state.data;
+
+    if (!user_id) {
+      return new Response("", {
+        status: 302,
+        headers: { Location: "/auth/login" },
+      });
+    }
+
+    try {
+      const response = await fetch("/api/retrieve/payment_methods", {
+        headers: {
+          "Cookie": ctx.req.headers.get("Cookie") || "",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!data.success) {
+        console.error("Failed to fetch payment methods:", data.error);
+        return page<PaymentMethodsPageData>({
+          error: "Failed to load payment methods",
+        });
+      }
+
+      return page<PaymentMethodsPageData>({
+        paymentMethods: data.payment_methods || [],
+      });
+    } catch (error) {
+      console.error("Error loading payment methods:", error);
+      return page<PaymentMethodsPageData>({
+        error: "Failed to load payment methods",
+      });
+    }
+  },
+});
+
+export default define.page(function PaymentMethodsPage({
+  data,
+}: {
+  data: PaymentMethodsPageData;
+}) {
+  const { paymentMethods, error } = data as PaymentMethodsPageData;
+
+  if (error) {
+    return (
+      <div class="min-h-screen bg-gray-50 p-8">
+        <div class="max-w-4xl mx-auto">
+          <h1 class="text-3xl font-bold text-red-600 mb-4">Error</h1>
+          <p class="text-gray-700">{error}</p>
+          <div class="mt-6">
+            <a
+              href="/tenant/dashboard"
+              class="text-blue-600 hover:text-blue-500 font-medium"
+            >
+              Go to Dashboard
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="min-h-screen bg-gray-50">
+      <div class="bg-white shadow">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="py-6">
+            <h1 class="text-3xl font-bold text-gray-900">
+              Payment Methods
+            </h1>
+            <p class="mt-1 text-sm text-gray-500">
+              Manage your payment methods for rent payments.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 py-8">
+        <PaymentMethodsList paymentMethods={paymentMethods || []} />
+      </div>
+    </div>
+  );
+});