Refactor: Update tick-circle-icon.svg to use a stroked circle and adjusted tick mark path and styling.

public/assets/icons/caution-red-icon.svg

@@ -0,0 +1,5 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9.5" cy="9.5" r="8.5" stroke="#FF0000" stroke-width="1.2"/>
+<path d="M9.5 5.5V10.5" stroke="#FF0000" stroke-width="1.2" stroke-linecap="round"/>
+<circle cx="9.5" cy="13" r="0.75" fill="#FF0000"/>
+</svg>

public/assets/icons/lock-icon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.167" y="8.333" width="11.667" height="9.167" rx="2" stroke="#00293D" stroke-width="1.2"/>
+<path d="M6.667 8.333V5.833C6.667 3.992 8.159 2.5 10 2.5C11.841 2.5 13.333 3.992 13.333 5.833V8.333" stroke="#00293D" stroke-width="1.2" stroke-linecap="round"/>
+<circle cx="10" cy="13" r="1.25" fill="#00293D"/>
+</svg>

public/assets/icons/lock-white-icon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.167" y="8.333" width="11.667" height="9.167" rx="2" stroke="white" stroke-width="1.2"/>
+<path d="M6.667 8.333V5.833C6.667 3.992 8.159 2.5 10 2.5C11.841 2.5 13.333 3.992 13.333 5.833V8.333" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+<circle cx="10" cy="13" r="1.25" fill="white"/>
+</svg>

public/assets/icons/shield-check-icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.667L3.333 4.167V9.167C3.333 13.75 6.217 18.017 10 18.333C13.783 18.017 16.667 13.75 16.667 9.167V4.167L10 1.667Z" stroke="#00293D" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 10L9 12L13 8" stroke="#00293D" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/icons/tick-circle-icon.svg

@@ -1,4 +1,4 @@
 <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5 1.75C5.67 1.75 1.75 5.67 1.75 10.5C1.75 15.33 5.67 19.25 10.5 19.25C15.33 19.25 19.25 15.33 19.25 10.5C19.25 5.67 15.33 1.75 10.5 1.75Z" fill="#e58625"/>
+<path d="M10.5 1.75C5.67 1.75 1.75 5.67 1.75 10.5C1.75 15.33 5.67 19.25 10.5 19.25C15.33 19.25 19.25 15.33 19.25 10.5C19.25 5.67 15.33 1.75 10.5 1.75Z" stroke="#4CAF50" stroke-width="1.8" fill="none"/>
-<path d="M7 10.5L9.333 12.833L14 8.167" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.5 10.5L9.333 13.333L14.5 7.667" stroke="#4CAF50" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
 </svg>

src/app/(agent)/agent/settings/billings/checkout/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { SettingsSidebar } from '@/components/settings';
+import { PaymentCheckoutForm } from '@/components/settings/PaymentCheckoutForm';
+
+export default function CheckoutPage() {
+  return (
+    <div className="flex flex-col lg:flex-row gap-6">
+      {/* Left Sidebar */}
+      <SettingsSidebar basePath="/agent/settings" />
+
+      {/* Main Content */}
+      <div className="flex-1">
+        <PaymentCheckoutForm />
+      </div>
+    </div>
+  );
+}

src/components/settings/PaymentCheckoutForm.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+
+interface CheckoutFeature {
+  label: string;
+}
+
+const CHECKOUT_FEATURES: CheckoutFeature[] = [
+  { label: 'Unlimited Property Reports' },
+  { label: 'Priority 24/7 Concierge Support' },
+  { label: 'Advanced Lead Generation Tools' },
+];
+
+export function PaymentCheckoutForm() {
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handlePayNow = async () => {
+    setIsProcessing(true);
+    // TODO: Integrate with payment gateway
+    setTimeout(() => setIsProcessing(false), 2000);
+  };
+
+  return (
+    <>
+      {/* Page Title */}
+      <div className="mb-6">
+        <h1 className="font-fractul font-bold text-[20px] text-[#00293D] mb-2">
+          Payments
+        </h1>
+        <p className="font-serif text-[14px] text-[#00293D]/70">
+          Manage Your billing cycles , upgrade your plan , or boost individual listings
+        </p>
+      </div>
+
+      {/* Checkout Card */}
+      <div className="border border-[#00293D] rounded-[10px] overflow-hidden">
+        <div className="flex flex-col lg:flex-row">
+          {/* Left Side - Order Summary */}
+          <div className="flex-1 p-8 lg:border-r border-[#00293D]/20">
+            {/* Order Summary Header */}
+            <h2 className="font-fractul font-bold text-[20px] text-[#00293D] mb-6">
+              Order Summary
+            </h2>
+
+            {/* Divider */}
+            <div className="border-b border-[#00293D]/20 mb-6 -mx-8 px-8" />
+
+            {/* Annual Subscription Badge */}
+            <div className="inline-block bg-[#e58625] rounded-[15px] px-4 py-2 mb-5">
+              <span className="font-serif text-[14px] text-white">
+                Annual Subscription
+              </span>
+            </div>
+
+            {/* Plan Name */}
+            <h3 className="font-fractul font-bold text-[20px] text-[#00293D] mb-4">
+              Professional Premium Plan
+            </h3>
+
+            {/* Plan Description */}
+            <p className="font-serif text-[14px] text-[#00293D] leading-[22px] mb-8 max-w-[280px]">
+              Empower your real estate business with full access to our unified solutions platform. Designed specifically for professional Lenders & Agents seeking seamless transaction management for 12 months.
+            </p>
+
+            {/* Features */}
+            <div className="space-y-5">
+              {CHECKOUT_FEATURES.map((feature) => (
+                <div key={feature.label} className="flex items-center gap-3">
+                  <Image
+                    src="/assets/icons/tick-circle-icon.svg"
+                    alt=""
+                    width={21}
+                    height={21}
+                    className="flex-shrink-0"
+                  />
+                  <span className="font-serif text-[14px] text-black">
+                    {feature.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Side - Payment Details */}
+          <div className="flex-1 p-8 max-w-full lg:max-w-[452px]">
+            {/* Trust Badges */}
+            <div className="flex items-center gap-6 mb-6">
+              <div className="flex items-center gap-2">
+                <Image
+                  src="/assets/icons/shield-check-icon.svg"
+                  alt="Verified"
+                  width={20}
+                  height={20}
+                />
+                <span className="font-serif text-[14px] text-[#00293D]">
+                  Verified User
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Image
+                  src="/assets/icons/lock-icon.svg"
+                  alt="Secure"
+                  width={20}
+                  height={20}
+                />
+                <span className="font-serif text-[14px] text-[#00293D]">
+                  Secure Checkout
+                </span>
+              </div>
+            </div>
+
+            {/* Line Items */}
+            <div className="space-y-5 mb-6">
+              <div className="flex items-center justify-between">
+                <span className="font-serif text-[15px] text-[#00293D]/50">
+                  Annual Subscription
+                </span>
+                <span className="font-fractul font-bold text-[15px] text-black/50">
+                  $499 .00
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-serif text-[15px] text-[#00293D]/50">
+                  One-Time Setup Fee
+                </span>
+                <span className="font-fractul font-bold text-[15px] text-[#43a047]">
+                  Free
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-serif text-[15px] text-[#00293D]/50">
+                  Tax
+                </span>
+                <span className="font-fractul font-bold text-[15px] text-black/50">
+                  $00 .00
+                </span>
+              </div>
+            </div>
+
+            {/* Divider */}
+            <div className="border-b border-[#00293D]/20 mb-6" />
+
+            {/* Total */}
+            <div className="flex items-baseline justify-between mb-1">
+              <span className="font-fractul font-bold text-[20px] text-[#00293D]">
+                Total Amount
+              </span>
+              <div className="text-right">
+                <div>
+                  <span className="font-fractul font-bold text-[35px] text-black">$499</span>
+                  <span className="font-fractul font-bold text-[20px] text-black"> / </span>
+                  <span className="font-fractul font-bold text-[20px] text-black/50">Year</span>
+                </div>
+              </div>
+            </div>
+            <div className="text-right mb-6">
+              <span className="font-serif text-[15px] text-[#00293D]/50">
+                Billed Annually
+              </span>
+            </div>
+
+            {/* Divider */}
+            <div className="border-b border-[#00293D]/20 mb-6" />
+
+            {/* Security Notice */}
+            <div className="flex items-start gap-2 mb-6">
+              <Image
+                src="/assets/icons/caution-red-icon.svg"
+                alt="Notice"
+                width={19}
+                height={19}
+                className="flex-shrink-0 mt-0.5"
+              />
+              <p className="font-serif text-[10px] text-red-600 leading-[15px]">
+                You will be redirected to our secure payment gateway after clicking &quot;Pay Now&quot; to enter your payment details safely.
+              </p>
+            </div>
+
+            {/* Pay Now Button */}
+            <button
+              onClick={handlePayNow}
+              disabled={isProcessing}
+              className="w-full bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+              <Image
+                src="/assets/icons/lock-white-icon.svg"
+                alt=""
+                width={20}
+                height={20}
+              />
+              {isProcessing ? 'Processing...' : 'Pay Now'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/settings/SubscriptionForm.tsx

@@ -2,6 +2,7 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 interface PlanFeature {
   icon: string;
@@ -16,6 +17,8 @@ const PLAN_FEATURES: PlanFeature[] = [
 ];
 
 export function SubscriptionForm() {
+  const router = useRouter();
+
   return (
     <>
       {/* Page Title */}
@@ -71,7 +74,10 @@ export function SubscriptionForm() {
               </div>
 
               {/* CTA Button */}
-              <button className="bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] px-10 py-4 rounded-[15px] hover:bg-[#d47920] transition-colors">
+              <button
+                onClick={() => router.push('/agent/settings/billings/checkout')}
+                className="bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] px-10 py-4 rounded-[15px] hover:bg-[#d47920] transition-colors"
+              >
                 Get Premium Access
               </button>
             </div>

src/components/settings/index.ts

@@ -6,3 +6,4 @@ export { NotificationsForm } from './NotificationsForm';
 export { PrivacyForm } from './PrivacyForm';
 export { TwoFactorSettings } from './TwoFactorSettings';
 export { SubscriptionForm } from './SubscriptionForm';
+export { PaymentCheckoutForm } from './PaymentCheckoutForm';