Full antd design 2

app/user/knowledge/create/page.tsx

@@ -202,7 +202,6 @@ const CreatePersona: React.FC = () => {
                             </Col>
                         </Row>
 
-
                     </Form>
                 </Col>
             </Row>

app/user/layout.tsx

@@ -14,7 +14,9 @@ const AppLayout = ({ children }: { children: React.ReactNode }) => {
   const skipLayoutPrefixes = [
     '/user/chat/',
     '/user/persona/create',
-    '/user/knowledge/create'
+    '/user/knowledge/create',
+    '/user/settings/profile',
+    '/user/payment'
   ];
 
   const shouldSkipLayout = skipLayoutPrefixes.some(prefix =>

app/user/page.tsx

@@ -13,7 +13,7 @@ const { Title, Text } = Typography;
 const page = () => {
     return (
         <Layout className="!space-y-4 !bg-white">
-            <PageTitle title="DASHBOARD" />
+            <PageTitle>DASHBOARD</PageTitle>
 
             {/* Plan Details */}
             <Row>

app/user/payment/page.tsx

@@ -1,144 +1,157 @@
 "use client";
 
-import { useState } from 'react'
+import { useCallback, useState } from 'react';
 import PageTitle from '@/components/ui/PageTitle';
-import { Typography, Button, Input, Form, Select, Switch } from 'antd'
+import { Typography, Button, Input, Form, Select, Switch, Flex } from 'antd';
 import Link from 'next/link';
 import { BankFilled, WalletFilled } from '@ant-design/icons';
 import type { PaymentType } from '@/types/payment';
 import { useQuery } from '@tanstack/react-query';
 import { getPaymentType } from '@/app/api/general/paymentService';
+import AltLayout from '@/components/layout/AltLayout';
 
 const { Text, Title } = Typography;
 
-const iconMapper = {
-  "card": <WalletFilled className='!text-white !text-xl' />,
-  "bank": <BankFilled className='!text-white !text-xl' />
-};
-
 const CreatePersona: React.FC = () => {
-  const [selectedPaymentID, setSelectedPaymentID] = useState<number | undefined>()
-  const [companyName, setCompanyName] = useState("")
-  const [cardNumber, setCardNumber] = useState("")
-  const [cvc, setCvc] = useState("")
+  // Form states
+  const [selectedPaymentID, setSelectedPaymentID] = useState<number | undefined>();
+  const [companyName, setCompanyName] = useState('');
+  const [cardNumber, setCardNumber] = useState('');
+  const [cvc, setCvc] = useState('');
 
+  // Fetch payment types using React Query
   const { data: paymentType, error, isLoading } = useQuery<PaymentType[] | undefined>({
-    queryKey: ["getPaymentType"],
-    queryFn: () => getPaymentType()
+    queryKey: ['getPaymentType'],
+    queryFn: getPaymentType
   });
 
-  if (isLoading) {
-    return <p>Loading...</p>;
-  }
+  const renderIcon = useCallback((nameId: string) => {
+    if (nameId === "card") return <WalletFilled className='!text-white !text-xl' />
+    else if (nameId === "bank") return <BankFilled className='!text-white !text-xl' />
+    else return <></>
+  }, [])
+
+  if (isLoading) return <p>Loading...</p>;
 
   return (
-    <div className="flex flex-col bg-white">
-      <PageTitle title='PAYMENT' />
-      <div className='p-4 px-8 '>
-        <div className='flex flex-col gap-5 mb-8'>
-          <div className='text-xs'>
-            <p className='font-semibold'>Enter your payment details</p>
-            <p className='font-semibold italic'>
-              By continuing you agree to our <Link href="/">Terms</Link>
+    <AltLayout header={<PageTitle backButton={true}>PAYMENT</PageTitle>}>
+      <Flex vertical className='!bg-white'>
+        <div className='p-4'>
+          {/* Section intro */}
+          <div className='flex flex-col gap-5 mb-8 text-xs text-gray-400'>
+            <p className='font-semibold'>Enter your payment details <br />
+              <span className='font-semibold italic'>
+                By continuing you agree to our <Link href="/">Terms</Link>
+              </span>
             </p>
           </div>
-        </div>
 
-        <div className='flex flex-row flex-wrap gap-2'>
-          {paymentType?.map(({ id, type, description, icon_id }) => (
-            <div
-              key={id}
-              className={`${selectedPaymentID === id ? 'bg-blue-950' : 'bg-gray-200'} hover:bg-blue-950 transition-all ease-in-out rounded-lg p-4 max-w-[160px] cursor-pointer`}
-              onClick={() => setSelectedPaymentID(id)}
-            >
-              {iconMapper[icon_id]}
-              <p className='text-white'>{`Transfer via card number`}</p>
-            </div>
-          ))}
-        </div>
+          {/* Payment type selection */}
+          <div className='flex flex-row flex-wrap gap-2'>
+            {paymentType?.map(({ id, type, description, icon_id }) => (
+              <div
+                key={id}
+                className={`
+                  ${selectedPaymentID === id ? 'bg-blue-950' : 'bg-gray-400'} 
+                  hover:bg-blue-950 transition-all ease-in-out 
+                  rounded-lg p-4 max-w-[160px] cursor-pointer
+                `}
+                onClick={() => setSelectedPaymentID(id)}
+              >
+                {renderIcon(icon_id)}
+                <p className='text-white'>Transfer via card number</p>
+              </div>
+            ))}
+          </div>
 
-        <div className="px-2 mt-4">
-          <Form layout="vertical">
-            <div className="grid grid-cols-1 sm:grid-cols-2">
-              <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Company Name</Text>}>
-                <Input
-                  placeholder="Company Name"
-                  value={companyName}
-                  onChange={(e) => setCompanyName(e.target.value)}
-                />
-              </Form.Item>
-
-              <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Card Number</Text>}>
-                <Input
-                  value={cardNumber}
-                  onChange={(e) => {
-                    const rawValue = e.target.value.replace(/\D/g, '').slice(0, 16);
-                    const formattedValue = rawValue.replace(/(.{4})/g, '$1 ').trim();
-                    setCardNumber(formattedValue);
-                  }}
-                />
-              </Form.Item>
-
-              <div className='flex flex-row gap-5'>
-                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Month</Text>} className="w-full">
-                  <Select
-                    allowClear
-                    style={{ width: '100%' }}
-                    placeholder="Please select"
-                    options={
-                      Array.from({ length: 12 }, (_, i) => {
-                        const month = String(i + 1).padStart(2, '0');
-                        return { label: month, value: month };
-                      })
-                    }
-                  />
-                </Form.Item>
+          {/* Payment form */}
+          <div className="px-2 mt-4">
+            <Form layout="vertical">
+              <div className="grid grid-cols-1 sm:grid-cols-2">
 
-                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Year</Text>} className="w-full">
-                  <Select
-                    allowClear
-                    style={{ width: '100%' }}
-                    placeholder="Please select"
-                    options={
-                      Array.from({ length: 10 }, (_, i) => {
-                        const year = new Date().getFullYear() + i;
-                        return { label: String(year), value: String(year) };
-                      })
-                    }
+                {/* Company Name */}
+                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Company Name</Text>}>
+                  <Input
+                    placeholder="Company Name"
+                    value={companyName}
+                    onChange={(e) => setCompanyName(e.target.value)}
                   />
                 </Form.Item>
-              </div>
 
-              <Form.Item label={<Text className='!italic !text-xs !font-semibold'>CVC</Text>}>
-                <div className='flex gap-6 items-center'>
+                {/* Card Number with formatting */}
+                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Card Number</Text>}>
                   <Input
-                    placeholder="123"
-                    className='!max-w-[50px]'
-                    value={cvc}
+                    value={cardNumber}
                     onChange={(e) => {
-                      const rawValue = e.target.value.replace(/\D/g, '').slice(0, 4);
-                      setCvc(rawValue);
+                      const rawValue = e.target.value.replace(/\D/g, '').slice(0, 16);
+                      const formattedValue = rawValue.replace(/(.{4})/g, '$1 ').trim();
+                      setCardNumber(formattedValue);
                     }}
                   />
-                  <p className='text-gray-300 max-w-[160px]' style={{ fontSize: 10 }}>
-                    3 or 4 digits usually found on the signature strips
-                  </p>
-                </div>
-              </Form.Item>
+                </Form.Item>
+
+                {/* Expiration Month & Year */}
+                <div className='flex flex-row gap-5'>
+                  <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Month</Text>} className="w-full">
+                    <Select
+                      allowClear
+                      placeholder="Please select"
+                      options={Array.from({ length: 12 }, (_, i) => {
+                        const month = String(i + 1).padStart(2, '0');
+                        return { label: month, value: month };
+                      })}
+                    />
+                  </Form.Item>
 
-              <Form.Item>
-                <div className='flex flex-row items-center gap-2'>
-                  <Switch checked={true} onChange={() => { }} />
-                  <Text className='!text-xs font-semibold'>SET AS DEFAULT</Text>
+                  <Form.Item label={<Text className='!italic !text-xs !font-semibold'>Exp Year</Text>} className="w-full">
+                    <Select
+                      allowClear
+                      placeholder="Please select"
+                      options={Array.from({ length: 10 }, (_, i) => {
+                        const year = new Date().getFullYear() + i;
+                        return { label: String(year), value: String(year) };
+                      })}
+                    />
+                  </Form.Item>
                 </div>
-              </Form.Item>
-            </div>
-            <Button type="primary" className='!w-full !py-3'>CONFIRM</Button>
-          </Form>
+
+                {/* CVC with note */}
+                <Form.Item label={<Text className='!italic !text-xs !font-semibold'>CVC</Text>}>
+                  <div className='flex gap-6 items-center'>
+                    <Input
+                      placeholder="123"
+                      className='!max-w-[50px]'
+                      value={cvc}
+                      onChange={(e) => {
+                        const rawValue = e.target.value.replace(/\D/g, '').slice(0, 4);
+                        setCvc(rawValue);
+                      }}
+                    />
+                    <p className='text-gray-300 max-w-[160px]' style={{ fontSize: 10 }}>
+                      3 or 4 digits usually found on the signature strip
+                    </p>
+                  </div>
+                </Form.Item>
+
+                {/* Default payment switch */}
+                <Form.Item>
+                  <div className='flex flex-row items-center gap-2'>
+                    <Switch checked={true} onChange={() => { }} />
+                    <Text className='!text-xs font-semibold'>SET AS DEFAULT</Text>
+                  </div>
+                </Form.Item>
+              </div>
+
+              {/* Submit Button */}
+              <Button type="primary" className='!w-full !py-3'>
+                CONFIRM
+              </Button>
+            </Form>
+          </div>
         </div>
-      </div>
-    </div>
-  )
-}
+      </Flex>
+    </AltLayout>
+  );
+};
 
 export default CreatePersona;

app/user/persona/create/page.tsx

@@ -13,6 +13,8 @@ import type { RcFile } from 'antd/es/upload';
 import PhoneInput from 'react-phone-input-2';
 import 'react-phone-input-2/lib/style.css';
 
+const { Text, Title } = Typography
+
 const CreatePersona: React.FC = () => {
 
     const [name, setName] = useState<string | undefined>("")
@@ -67,7 +69,6 @@ const CreatePersona: React.FC = () => {
         return false;
     };
 
-
     return (
         <AltLayout header={<PageTitle backButton={true}>Create Persona</PageTitle>}>
             <Row className='px-4'>
@@ -145,66 +146,66 @@ const CreatePersona: React.FC = () => {
 
                         <Form.Item label={<p className='font-bold'>Persona Training Center</p>}>
                             <Flex vertical gap={10}>
-                                <Flex gap={10} className='!items-center'>
+                                <Flex gap={10}>
                                     <Switch
                                         checked={enabled.isManualKnowledgeEntry}
                                         onChange={(checked) =>
                                             setEnabled({ ...enabled, isManualKnowledgeEntry: checked })
                                         }
                                     />
-                                    <span className='font-bold'>Manual Knowledge Entry</span>
+                                    <Text className='font-bold'>Manual Knowledge Entry</Text>
                                 </Flex>
-                                <div className='flex items-center gap-2'>
+                                <Flex gap={10}>
                                     <Switch
                                         checked={enabled.isUploadTextDocument}
                                         onChange={(checked) =>
                                             setEnabled({ ...enabled, isUploadTextDocument: checked })
                                         }
                                     />
-                                    <span className='font-bold'>Upload Text Document</span>
-                                </div>
-                                <div className='flex items-center gap-2'>
+                                    <Text className='font-bold'>Upload Text Document</Text>
+                                </Flex>
+                                <Flex gap={10}>
                                     <Switch
                                         checked={enabled.isImportWebLink}
                                         onChange={(checked) =>
                                             setEnabled({ ...enabled, isImportWebLink: checked })
                                         }
                                     />
-                                    <span className="font-bold">
+                                    <Text className="font-bold">
                                         Import from Web Link{' '}
                                         <Tag color="blue" className="font-semibold text-xs px-2 py-[2px] !rounded-full">
                                             Premium
                                         </Tag>
-                                    </span>
-                                </div>
-                                <div className='flex items-center gap-2'>
+                                    </Text>
+                                </Flex>
+                                <Flex gap={10}>
                                     <Switch
                                         checked={enabled.isDallEImageGen}
                                         onChange={(checked) =>
                                             setEnabled({ ...enabled, isDallEImageGen: checked })
                                         }
                                     />
-                                    <span className="font-bold">
+                                    <Text className="font-bold">
                                         DALL-E Image Generation{' '}
                                         <Tag color="blue" className="font-semibold text-xs px-2 py-[2px] !rounded-full">
                                             Premium
                                         </Tag>
-                                    </span>
-                                </div>
-                                <div className='flex items-center gap-2'>
+                                    </Text>
+                                </Flex>
+                                <Flex gap={10}>
                                     <Switch
                                         checked={enabled.isSOPAutoLearn}
                                         onChange={(checked) =>
                                             setEnabled({ ...enabled, isSOPAutoLearn: checked })
                                         }
                                     />
-                                    <span className="font-bold">
+                                    <Text className="font-bold">
                                         Enable SOP Auto-Learning{' '}
                                         <Tag color="blue" className="font-semibold text-xs px-2 py-[2px] !rounded-full">
                                             Premium
                                         </Tag>
-                                    </span>
-                                </div>
+                                    </Text>
+                                </Flex>
                             </Flex>
                         </Form.Item>
 

app/user/profile/page.tsx

@@ -1,135 +0,0 @@
-'use client'
-
-import {
-    UploadOutlined,
-    DeleteOutlined
-} from '@ant-design/icons'
-import { Button, Input, Typography, Upload, Form } from 'antd'
-import { useState } from 'react'
-
-const { Title, Text } = Typography
-
-const ProfileSettings = () => {
-    const [companyName, setCompanyName] = useState('')
-    const [role, setRole] = useState('')
-    const [profileName, setProfileName] = useState('')
-    const [newPassword, setNewPassword] = useState('')
-    const [confirmPassword, setConfirmPassword] = useState('')
-
-    return (
-        <Form layout="vertical" className="!flex !flex-col !gap-y-8 !max-w-2xl !mx-auto !p-5">
-            {/* 1. Profile Photo */}
-            <div>
-                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
-                    Profile Photo
-                </p>
-                <div className="flex flex-col items-center gap-4 mt-4">
-                    <img
-                        src="/default-avatar.png"
-                        alt="Profile"
-                        className="w-20 h-20 rounded-full object-cover border"
-                    />
-                    <Upload showUploadList={false}>
-                        <Button type='primary'>
-                            <span className='font-bold'>Upload Photo</span>
-                        </Button>
-                    </Upload>
-                </div>
-            </div>
-
-            {/* 2. Company Info */}
-            <div>
-                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
-                    Company Info
-                </p>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
-                    <Form.Item label={<Title level={5}>Company Name</Title>}>
-                        <Input
-                            placeholder="Company Name"
-                            value={companyName}
-                            onChange={(e) => setCompanyName(e.target.value)}
-                        />
-                    </Form.Item>
-                    <Form.Item label={<Title level={5}>My Role</Title>}>
-                        <Input
-                            placeholder="My Role"
-                            value={role}
-                            onChange={(e) => setRole(e.target.value)}
-                        />
-                    </Form.Item>
-                </div>
-            </div>
-
-            {/* 3. Profile Name */}
-            <div>
-                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
-                    Profile Name
-                </p>
-                <div className="mt-4">
-                    <Form.Item label={<Title level={5}>Profile Name</Title>}>
-                        <Input
-                            placeholder="Profile Name"
-                            value={profileName}
-                            onChange={(e) => setProfileName(e.target.value)}
-                        />
-                    </Form.Item>
-                </div>
-            </div>
-
-            {/* 4. Change Password */}
-            <div>
-                <p className="font-bold text-white bg-pink-300 py-1 px-5 w-fit rounded-full">
-                    Change Password
-                </p>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
-                    <Form.Item label={<Title level={5}>New Password</Title>}>
-                        <Input.Password
-                            placeholder="New Password"
-                            value={newPassword}
-                            onChange={(e) => setNewPassword(e.target.value)}
-                        />
-                    </Form.Item>
-                    <Form.Item label={<Title level={5}>Confirm Password</Title>}>
-                        <Input.Password
-                            placeholder="Confirm Password"
-                            value={confirmPassword}
-                            onChange={(e) => setConfirmPassword(e.target.value)}
-                        />
-                    </Form.Item>
-                </div>
-                <Button
-                    type="primary"
-                    className="mt-4 w-fit mx-auto"
-                    onClick={() => console.log('Change password confirmed')}
-                >
-                    <span className='px-10 font-bold'>Save</span>
-                </Button>
-            </div>
-
-            {/* 5. Delete Account */}
-            <div>
-                <div className="flex items-center gap-2 mb-2">
-                    <DeleteOutlined className="text-xl" style={{ color: "red" }} />
-                    <p className="font-bold text-red-600 py-1 w-fit">
-                        Delete Account
-                    </p>
-                </div>
-                <Text type="danger">
-                    Your account and data will be permanently deleted.
-                </Text>
-                <div className="mt-4 flex flex-col">
-                    <Button
-                        danger
-                        className='w-fit mx-auto'
-                        type="primary"
-                        onClick={() => console.log('Account deletion confirmed')}
-                    >
-                        <span className='px-10 font-bold'>Delete</span>
-                    </Button>
-                </div>
-            </div>
-        </Form>
-    )
-}
-
-export default ProfileSettings

app/user/settings/profile/page.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState } from 'react';
+import {
+    UploadOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons';
+import {
+    Button,
+    Input,
+    Typography,
+    Upload,
+    Form,
+    Row,
+    Col,
+    Divider,
+    Flex,
+} from 'antd';
+
+import AltLayout from '@/components/layout/AltLayout';
+import PageTitle from '@/components/ui/PageTitle';
+
+const { Title, Text } = Typography;
+
+const ProfileSettings: React.FC = () => {
+    const [companyName, setCompanyName] = useState('');
+    const [role, setRole] = useState('');
+    const [profileName, setProfileName] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+
+    return (
+        <AltLayout header={<PageTitle backButton={true}>Profile Settings</PageTitle>}>
+            <Row justify="center">
+                <Col xs={24} sm={20} md={16} lg={12}>
+                    <Form layout="vertical" className="px-4 py-6 space-y-10">
+
+                        <Row>
+                            <Col span={24}>
+                                <Title level={5} className="!mb-3">Profile Photo</Title>
+                                <Flex vertical align="center" gap={16}>
+                                    <img
+                                        src="/default-avatar.png"
+                                        alt="Profile"
+                                        className="w-20 h-20 rounded-full object-cover border"
+                                    />
+                                    <Upload showUploadList={false}>
+                                        <Button icon={<UploadOutlined />} type="primary">
+                                            Upload Photo
+                                        </Button>
+                                    </Upload>
+                                </Flex>
+                            </Col>
+                            <Divider />
+                            <Col span={24}>
+                                <Title level={5} className="!mb-3">Company Info</Title>
+                                <Row gutter={16}>
+                                    <Col xs={24} sm={12}>
+                                        <Form.Item label="Company Name">
+                                            <Input
+                                                placeholder="Company Name"
+                                                value={companyName}
+                                                onChange={(e) => setCompanyName(e.target.value)}
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col xs={24} sm={12}>
+                                        <Form.Item label="My Role">
+                                            <Input
+                                                placeholder="My Role"
+                                                value={role}
+                                                onChange={(e) => setRole(e.target.value)}
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                </Row>
+                            </Col>
+                            <Divider />
+
+                            {/* Profile Name */}
+                            <Col span={24}>
+                                <Title level={5} className="!mb-3">Profile Name</Title>
+                                <Form.Item label="Profile Name">
+                                    <Input
+                                        placeholder="Profile Name"
+                                        value={profileName}
+                                        onChange={(e) => setProfileName(e.target.value)}
+                                    />
+                                </Form.Item>
+                            </Col>
+
+                            <Divider />
+
+                            {/* Change Password */}
+                            <Col span={24}>
+                                <Title level={5} className="!mb-3">Change Password</Title>
+                                <Row gutter={16}>
+                                    <Col xs={24} sm={12}>
+                                        <Form.Item label="New Password">
+                                            <Input.Password
+                                                placeholder="New Password"
+                                                value={newPassword}
+                                                onChange={(e) => setNewPassword(e.target.value)}
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                    <Col xs={24} sm={12}>
+                                        <Form.Item label="Confirm Password">
+                                            <Input.Password
+                                                placeholder="Confirm Password"
+                                                value={confirmPassword}
+                                                onChange={(e) => setConfirmPassword(e.target.value)}
+                                            />
+                                        </Form.Item>
+                                    </Col>
+                                </Row>
+                                <Button
+                                    type="primary"
+                                    className="mt-2"
+                                    onClick={() => console.log('Change password confirmed')}
+                                >
+                                    Save Password
+                                </Button>
+                            </Col>
+
+                            <Divider />
+
+                            {/* Delete Account */}
+                            <Col span={24}>
+                                <Flex align="center" gap={8} className="mb-2">
+                                    <DeleteOutlined className="text-xl text-red-500" />
+                                    <Text strong className="text-red-500">Delete Account</Text>
+                                </Flex>
+                                <Text type="danger">
+                                    Your account and data will be permanently deleted. This action cannot be undone.
+                                </Text>
+                                <div className="mt-4">
+                                    <Button
+                                        danger
+                                        type="primary"
+                                        onClick={() => console.log('Account deletion confirmed')}
+                                    >
+                                        Delete Account
+                                    </Button>
+                                </div>
+                            </Col>
+                        </Row>
+
+                    </Form>
+                </Col>
+            </Row>
+        </AltLayout>
+    );
+};
+
+export default ProfileSettings;

app/user/wallet/page.tsx

@@ -1,65 +1,106 @@
 'use client';
 
 import React, { useState } from 'react';
-import PageTitle from '@/components/ui/PageTitle';
-import { Input, Radio, Typography } from 'antd';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import PageTitle from '@/components/ui/PageTitle';
+import {
+    Typography,
+    Input,
+    Button,
+    Radio,
+    Row,
+    Col,
+    Card,
+    Form,
+    Space,
+} from 'antd';
 
-const { Text } = Typography;
+const { Text, Title } = Typography;
 
 const Wallet: React.FC = () => {
     const [amount, setAmount] = useState('');
     const [autoRenew, setAutoRenew] = useState(false);
 
+    const router = useRouter();
+
     return (
-        <main className="flex flex-col bg-white min-h-screen">
-            <PageTitle title="WALLET" />
+        <main className="min-h-screen bg-white">
+            {/* Page Header */}
+            <PageTitle>Wallet</PageTitle>
+
+            <Row justify="center" className="mt-6 px-4">
+                <Col xs={24} sm={20} md={16} lg={12}>
+                    <Form layout="vertical" className="space-y-6">
+
+                        {/* 1. Balance + History Link */}
+                        <Form.Item>
+                            <Space className="w-full justify-between" align="center">
+                                <Text strong>Current Balance</Text>
+                                <Link
+                                    href="/transaction-history"
+                                    className="text-blue-500 underline text-sm"
+                                >
+                                    Transaction History
+                                </Link>
+                            </Space>
+                        </Form.Item>
 
-            <div className="flex flex-col gap-y-6 mt-6 max-w-md">
-                <div className='px-3'>
-                    {/* 1. Top Section: Title + History */}
-                    <div className="flex justify-between items-center mb-2">
-                        <p className="font-bold">Current Balance</p>
-                        <Link href="/transaction-history" className="text-blue-500 underline text-sm">
-                            Transaction History
-                        </Link>
-                    </div>
+                        {/* 2. Top-Up Section */}
+                        <Form.Item label="Top-Up Amount (RM)">
+                            <Input
+                                placeholder="Enter amount"
+                                type="number"
+                                value={amount}
+                                onChange={(e) => setAmount(e.target.value)}
+                                size="large"
+                                className="border-blue-500 bg-blue-50"
+                            />
+                        </Form.Item>
 
-                    {/* 2. RM Input */}
-                    <div className='flex flex-col'>
-                        <Input
-                            className="border border-blue-500 bg-blue-50 mb-3"
-                            placeholder="Enter amount in RM"
-                            type='number'
-                            value={amount}
-                            onChange={(e) => setAmount(e.target.value)}
-                            prefix="RM"
-                            size="large"
-                        />
-                        <button className='w-fit rounded-lg text-xs px-4 py-2 bg-[#369cc1] hover:bg-[#436d86] text-white shadow border-0 mb-3 ms-auto'>
-                            <span className='font-bold'>Top Up Wallet</span>
-                        </button>
-                    </div>
+                        <Form.Item className="!text-right">
+                            <Button
+                                type="primary"
+                                className="!text-xs !font-bold !px-6 !py-2"
+                                onClick={() => {
+                                    router.push('/user/payment')
+                                }}
+                            >
+                                Top Up Wallet
+                            </Button>
+                        </Form.Item>
 
-                    <div className="flex items-start gap-3 px-3">
-                        <Radio
-                            checked={autoRenew}
-                            onChange={(e) => setAutoRenew(e.target.checked)}
-                        />
-                        <div>
-                            <Text strong>Auto-Renew Subscription</Text>
-                            <p className="text-xs text-gray-500">
-                                Enable monthly or yearly auto payment using wallet.
-                            </p>
-                        </div>
-                    </div>
-                </div>
+                        {/* 3. Auto-Renew */}
+                        <Form.Item>
+                            <Row align="top" gutter={16}>
+                                <Col>
+                                    <Radio
+                                        checked={autoRenew}
+                                        onChange={(e) => setAutoRenew(e.target.checked)}
+                                    />
+                                </Col>
+                                <Col flex="auto">
+                                    <Text strong>Auto-Renew Subscription</Text>
+                                    <p className="text-xs text-gray-500">
+                                        Enable monthly or yearly auto payment using wallet.
+                                    </p>
+                                </Col>
+                            </Row>
+                        </Form.Item>
 
-                {/* 4. Current Plan */}
-                <div className='border-y-2 p-3 border-blue-700'>
-                    <p><span className='font-bold'>Current Plan:</span> <span >Premium (RM25/Month)</span> </p>
-                </div>
-            </div>
+                        {/* 4. Current Plan Display */}
+                        <Card
+                            bordered
+                            className="border-blue-700 border-2"
+                            bodyStyle={{ padding: '12px' }}
+                        >
+                            <Text>
+                                <Text strong>Current Plan:</Text> Premium (RM25/Month)
+                            </Text>
+                        </Card>
+                    </Form>
+                </Col>
+            </Row>
         </main>
     );
 };

components/layout/AltLayout.tsx

@@ -1,39 +1,56 @@
-import React from 'react'
+import React from 'react';
 import { Flex, Layout, Row, Col } from 'antd';
-import Navigation from '@/components/layout/Navigation'
+import Navigation from '@/components/layout/Navigation';
+
+// This layout component is an alternative layout for Next.js routes 
+// where the default layout from app/layout.tsx is intentionally skipped.
+// It is useful when you define certain paths to avoid the global layout (e.g., login pages, special full-screen pages).
 
 type AltLayoutProps = {
-    header?: React.ReactNode,
-    children?: React.ReactNode,
-    footer?: React.ReactNode
-}
+    header?: React.ReactNode;    // Optional header component
+    children?: React.ReactNode;  // Main content of the page
+    footer?: React.ReactNode;    // Optional footer component (defaults to <Navigation />)
+};
 
-const AltLayout: React.FC<AltLayoutProps> = ({ header = <></>, children = <></>, footer =<Navigation /> }:AltLayoutProps) => {
+// Functional component definition with default props set
+const AltLayout: React.FC<AltLayoutProps> = ({
+    header = <></>,              // Empty fragment by default if no header passed
+    children = <></>,            // Empty fragment by default if no children passed
+    footer = <Navigation />      // Defaults to Navigation if no footer is passed
+}: AltLayoutProps) => {
     return (
+        // Top-level Layout from Ant Design
         <Layout className="!w-full !max-w-[430px] !mx-auto !relative !bg-white">
-            <Flex vertical className='!h-screen'>
+            {/* Full vertical height flex container */}
+            <Flex vertical className="!h-screen">
+
+                {/* Header Row (if provided) */}
                 <Row>
                     <Col span={24}>
                         {header}
                     </Col>
                 </Row>
-                <Row className='flex-1 overflow-y-scroll overflow-x-hidden'>
+
+                {/* Content Row: grows to take available space, scrollable vertically only */}
+                <Row className="flex-1 overflow-y-scroll overflow-x-hidden">
                     <Col span={24}>
                         <Flex vertical className="!bg-white">
-                            {/* Chat messages */}
+                            {/* Content wrapper - handles chat body or main content scroll */}
                             <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
                                 {children}
                             </div>
-
                         </Flex>
                     </Col>
                 </Row>
+
+                {/* Footer section - typically bottom navigation */}
                 <div>
                     {footer}
                 </div>
+
             </Flex>
         </Layout>
-    )
-}
+    );
+};
 
-export default AltLayout
+export default AltLayout;

components/layout/Navigation.tsx

@@ -19,7 +19,7 @@ const navItems = [
         label: 'Chat',
     },
     {
-        key: '/user/profile',
+        key: '/user/settings/profile',
         icon: <UserOutlined />,
         label: 'Profile',
     },