diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 4c87a39..d64bbcb 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -6,6 +6,7 @@ const route = useRoute();
 
 const isProducts = computed(() => route.path.startsWith("/products"));
 const isOrders = computed(() => route.path.startsWith("/orders"));
+const isPayments = computed(() => route.path.startsWith("/payments"));
 
 const linkClass = (active: boolean) =>
     [
@@ -43,6 +44,13 @@ const linkClass = (active: boolean) =>
               Orders
             </router-link>
 
+            <router-link
+                to="/payments"
+                :class="linkClass(isPayments)"
+            >
+              Payments
+            </router-link>
+
             <!-- placeholder za kasneje -->
             <button
                 class="px-3 py-2 rounded-lg text-sm text-zinc-700 hover:bg-zinc-100 transition"
diff --git a/src/pages/PaymentsPage.vue b/src/pages/PaymentsPage.vue
new file mode 100644
index 0000000..60ccccd
--- /dev/null
+++ b/src/pages/PaymentsPage.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+const items = ref<any[]>([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const r = await fetch("/api/payments/payments", {
+      headers: { Accept: "application/json" },
+    });
+    items.value = await r.json();
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="flex items-end justify-between mb-6">
+    <div>
+      <h1 class="text-2xl font-semibold">Payments</h1>
+      <p class="text-sm text-zinc-500">Check all payments</p>
+    </div>
+
+    <div class="text-sm text-zinc-500">
+      <!-- placeholder -->
+      <span class="px-2 py-1 rounded-md bg-zinc-100">v0</span>
+    </div>
+  </div>
+
+  <div>
+    <h1 class="text-2xl font-semibold mb-4">Payment</h1>
+
+    <div v-if="loading">Loading…</div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <router-link
+          v-for="p in items"
+          :key="p.id"
+          :to="`/payments/${p.id}`"
+          class="rounded-xl border p-4 hover:shadow"
+      >
+        <div class="font-medium">{{ p.name }}</div>
+        <div class="text-sm opacity-70">{{ p.total_cost }} {{ p.currency }}</div>
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/src/router.ts b/src/router.ts
index 29680eb..66bd694 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,6 +4,7 @@ import ProductsPage from "./pages/ProductsPage.vue";
 import ProductDetailPage from "./pages/ProductDetailPage.vue";
 import NotFoundPage from "./pages/NotFoundPage.vue";
 import OrdersPage from "./pages/OrdersPage.vue";
+import PaymentsPage from "./pages/PaymentsPage.vue";
 
 const router = createRouter({
     history: createWebHistory(),
@@ -12,6 +13,7 @@ const router = createRouter({
         { path: "/products", component: ProductsPage },
         { path: "/products/:id", component: ProductDetailPage, props: true },
         { path: "/orders", component: OrdersPage },
+        { path: "/payments", component: PaymentsPage },
         { path: "/:pathMatch(.*)*", component: NotFoundPage }
     ],
 });