diff --git a/src/widgets/cabinet/ui/index.tsx b/src/widgets/cabinet/ui/index.tsx
index 1d51bd2..c24cd30 100644
--- a/src/widgets/cabinet/ui/index.tsx
+++ b/src/widgets/cabinet/ui/index.tsx
@@ -6,7 +6,7 @@ import { Sidebar } from './Sidebar';
 import { CabinetNav } from './CabinetNav';
 import { Dashboard } from './dashboard';
 import { useCabinet } from '../lib/hooks/useCabinet';
-import { MOCK_USER, MOCK_STATS, MOCK_PAYMENTS } from '../lib/mock';
+import { MOCK_USER, MOCK_STATS } from '../lib/mock';
 import type { CabinetSection } from '../lib/types';
 
 // ─── Lazy sections (separate JS chunks) ───────────────────────────────────────
@@ -51,7 +51,7 @@ function SectionContent({ section }: { section: CabinetSection }) {
     case 'si':
       return <SiTable />;
     case 'payments':
-      return <PaymentsTable data={MOCK_PAYMENTS} />;
+      return <PaymentsTable />;
     case 'profile':
       return <ProfileSection user={MOCK_USER} stats={MOCK_STATS} />;
   }
diff --git a/src/widgets/cabinet/ui/profile/ProfileForm.tsx b/src/widgets/cabinet/ui/profile/ProfileForm.tsx
index 35cb0dd..4737f65 100644
--- a/src/widgets/cabinet/ui/profile/ProfileForm.tsx
+++ b/src/widgets/cabinet/ui/profile/ProfileForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { User, Mail, Phone, Lock, Save, CheckCircle } from 'lucide-react';
+import { User, Phone, Lock, Save, CheckCircle } from 'lucide-react';
 import { useProfile } from '../../lib/hooks/useProfile';
 import type { UserProfile } from '../../lib/types';
 
@@ -81,14 +81,6 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({ initial }) => {
             icon={User}
             placeholder="Karimov"
           />
-          <InputField
-            label="Email"
-            value={form.email}
-            onChange={(v) => handleChange('email', v)}
-            type="email"
-            icon={Mail}
-            placeholder="ali@example.com"
-          />
           <InputField
             label="Telefon"
             value={form.phone}
diff --git a/src/widgets/cabinet/ui/tables/PaymentsTable.tsx b/src/widgets/cabinet/ui/tables/PaymentsTable.tsx
index 8542127..df10c4a 100644
--- a/src/widgets/cabinet/ui/tables/PaymentsTable.tsx
+++ b/src/widgets/cabinet/ui/tables/PaymentsTable.tsx
@@ -1,101 +1,187 @@
-import React from 'react';
-import { CheckCircle, Clock, XCircle } from 'lucide-react';
-import type { Payment } from '../../lib/types';
+'use client';
+import React, { useState } from 'react';
+import { Clock, XCircle, ReceiptText } from 'lucide-react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { apiRequest } from '@/shared/request/apiRequest';
+import { links } from '@/shared/request/links';
+import PaymentStatus from '@/widgets/detail/paidStatus';
+import { toast } from 'react-toastify';
+import { PaymentModal } from '@/features/modals/paymentModal/ui/Paymentmodal';
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+
+type Inspection = {
+  created_at: string;
+  discount: string | null;
+  id: number;
+  state: 'paid' | 'unpaid' | null;
+  total_price: string;
+  turi: string;
+};
 
 // ─── Helpers ───────────────────────────────────────────────────────────────────
 
-const STATUS_MAP = {
-  paid: {
-    label: "To'landi",
-    icon: CheckCircle,
-    cls: 'text-emerald-600 bg-emerald-50',
-  },
-  pending: {
-    label: 'Kutilmoqda',
-    icon: Clock,
-    cls: 'text-amber-600  bg-amber-50',
-  },
-  failed: { label: 'Xato', icon: XCircle, cls: 'text-red-600    bg-red-50' },
-} as const;
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('uz-UZ', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+}
+
+function formatPrice(price: string) {
+  return Number(price).toLocaleString('uz-UZ');
+}
 
 // ─── Component ─────────────────────────────────────────────────────────────────
 
-interface PaymentsTableProps {
-  data: Payment[];
-}
+export function PaymentsTable() {
+  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
+  const { data, isLoading } = useQuery({
+    queryKey: ['pay_history'],
+    queryFn: (): Promise<Inspection[]> =>
+      apiRequest('GET', links.pay_history).then(
+        (res) => res.data as Inspection[],
+      ),
+  });
 
-export const PaymentsTable: React.FC<PaymentsTableProps> = ({ data }) => (
-  <div className="space-y-4">
-    <div>
-      <h2 className="text-xl font-bold text-slate-900">
-        To&apos;lovlar tarixi
-      </h2>
-      <p className="text-sm text-slate-500 mt-0.5">
-        {data.length} ta to&apos;lov
-      </p>
-    </div>
+  const payment = useMutation({
+    mutationKey: ['payload'],
+    mutationFn: ({ order_id }: { order_id: number }) =>
+      apiRequest<{ payment_link: string }>('POST', links.payment(order_id)),
+    onSuccess: (res) => {
+      console.log('payment res: ', res);
+      window.open(res.data.payment_link, '_self');
+      //route.push(`/${document_id}`);
+      setIsPaymentOpen(false);
+    },
+    onError: (err) => {
+      const message =
+        err instanceof Error ? err.message : 'An unexpected error occurred.';
+      toast.error(message);
+      setIsPaymentOpen(false);
+    },
+  });
 
-    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="bg-slate-50 border-b border-slate-100">
-              {['#', 'Xizmat', 'Summa', 'Chegirma', 'Sana', 'Holat'].map(
-                (h) => (
-                  <th
-                    key={h}
-                    className="text-left px-5 py-3 text-[11px] font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap"
-                  >
-                    {h}
-                  </th>
-                ),
-              )}
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-slate-50">
-            {data.map((row) => {
-              const s = STATUS_MAP[row.status];
-              const Icon = s.icon;
-              return (
-                <tr
-                  key={row.id}
-                  className="hover:bg-slate-50/60 transition-colors"
-                >
-                  <td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
-                    {String(row.id).padStart(2, '0')}
-                  </td>
-                  <td className="px-5 py-3.5 text-slate-800 font-medium whitespace-nowrap">
-                    {row.service}
-                  </td>
-                  <td className="px-5 py-3.5 text-slate-800 font-semibold tabular-nums whitespace-nowrap">
-                    {row.amount.toLocaleString()} UZS
-                  </td>
-                  <td className="px-5 py-3.5 tabular-nums whitespace-nowrap">
-                    {row.discount > 0 ? (
-                      <span className="text-emerald-600 font-medium">
-                        -{row.discount.toLocaleString()} UZS
-                      </span>
-                    ) : (
-                      <span className="text-slate-300">—</span>
+  const handleSubmit = ({ document_id }: { document_id: number }) => {
+    if (document_id === 0) {
+      toast.error('Id not found');
+      return;
+    }
+    payment.mutate({ order_id: document_id });
+  };
+
+  return (
+    <>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-xl font-bold text-slate-900">
+            To&apos;lovlar tarixi
+          </h2>
+          <p className="text-sm text-slate-500 mt-0.5">
+            {data?.length ?? 0} ta to&apos;lov
+          </p>
+        </div>
+
+        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-16 gap-3 text-slate-400">
+              <Clock size={20} className="animate-spin" />
+              <span className="text-sm">Yuklanmoqda...</span>
+            </div>
+          ) : !data || data.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 gap-3 text-slate-400">
+              <ReceiptText size={40} strokeWidth={1.5} />
+              <p className="text-sm">To&apos;lovlar tarixi mavjud emas</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-slate-50 border-b border-slate-100">
+                    {['#', 'Xizmat', 'Summa', 'Chegirma', 'Sana', 'Holat'].map(
+                      (h) => (
+                        <th
+                          key={h}
+                          className="text-left px-5 py-3 text-[11px] font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap"
+                        >
+                          {h}
+                        </th>
+                      ),
                     )}
-                  </td>
-                  <td className="px-5 py-3.5 text-slate-500 whitespace-nowrap">
-                    {row.date}
-                  </td>
-                  <td className="px-5 py-3.5">
-                    <span
-                      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${s.cls}`}
-                    >
-                      <Icon size={12} />
-                      {s.label}
-                    </span>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-50">
+                  {data.map((row) => {
+                    const service_fee = row.total_price + row.discount;
+                    return (
+                      <tr
+                        key={row.id}
+                        className="hover:bg-slate-50/60 transition-colors"
+                      >
+                        <td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
+                          {String(row.id).padStart(2, '0')}
+                        </td>
+                        <td className="px-5 py-3.5 text-slate-800 font-medium whitespace-nowrap">
+                          {row.turi}
+                        </td>
+                        <td className="px-5 py-3.5 text-slate-800 font-semibold tabular-nums whitespace-nowrap">
+                          {formatPrice(row.total_price)} UZS
+                        </td>
+                        <td className="px-5 py-3.5 tabular-nums whitespace-nowrap">
+                          {row.discount ? (
+                            <span className="text-emerald-600 font-medium">
+                              -{formatPrice(row.discount)} UZS
+                            </span>
+                          ) : (
+                            <span className="text-slate-300">—</span>
+                          )}
+                        </td>
+                        <td className="px-5 py-3.5 text-slate-500 whitespace-nowrap">
+                          {formatDate(row.created_at)}
+                        </td>
+                        <td className="px-5 py-3.5">
+                          {row.state ? (
+                            <span
+                              onClick={() => {
+                                if (row.state === 'unpaid') {
+                                  setIsPaymentOpen(true);
+                                }
+                              }}
+                              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium text-emerald-600 bg-emerald-50"
+                            >
+                              <PaymentStatus status={row.state} />
+                            </span>
+                          ) : (
+                            <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium text-slate-400 bg-slate-50">
+                              <XCircle size={12} />
+                              Noma&apos;lum
+                            </span>
+                          )}
+                        </td>
+                        <PaymentModal
+                          isOpen={isPaymentOpen}
+                          onClose={() => setIsPaymentOpen(false)}
+                          price={{
+                            service_fee: Number(service_fee),
+                            discount: Number(row.discount) || 0,
+                            total_price: Number(row.total_price) || 0,
+                            currency: 'UZS',
+                          }}
+                          onConfirmPayment={() => {
+                            handleSubmit({ document_id: 0 });
+                          }}
+                          isLoading={payment.isPending}
+                        />
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  </div>
-);
+    </>
+  );
+}
diff --git a/src/widgets/history/ui/historyTableRow.tsx b/src/widgets/history/ui/historyTableRow.tsx
index 94b574c..ea94eab 100644
--- a/src/widgets/history/ui/historyTableRow.tsx
+++ b/src/widgets/history/ui/historyTableRow.tsx
@@ -13,7 +13,9 @@ import { PaymentModal } from '@/features/modals/paymentModal/ui/Paymentmodal';
 
 // ─── State badge ───────────────────────────────────────────────────────────────
 
-const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({ state }) => {
+export const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({
+  state,
+}) => {
   const isPaid = state === 'paid';
   return (
     <span