diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 5370c02..06b6a46 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -125,7 +125,7 @@ const Table = <T extends RowDataType>({
             <thead className={`h-[60px] md:h-[69px] bg-white text-sm text-[#8C90A3] ${headerClassName}`}>
                 <tr>
                     {selectable && (
-                        <th className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 relative z-[5]">
+                        <th className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 relative z-[5] first:rounded-tr-2xl md:first:rounded-tr-3xl">
                             <Checkbox
                                 checked={data.length > 0 && selectedRows.length === data.length}
                                 onCheckedChange={handleSelectAll}
@@ -133,19 +133,13 @@ const Table = <T extends RowDataType>({
                         </th>
                     )}
                     {columns.map((col) => (
-                        <th
-                            key={col.key}
-                            className={getCellClassName(col)}
-                            style={{ width: col.width }}
-                        >
-                            <Td text={col.title} />
-                        </th>
+                        <Td key={col.key} text={col.title} />
                     ))}
                     {rowActions && (
-                        <th className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10"></th>
+                        <th className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 rounded-tl-2xl md:rounded-tl-3xl"></th>
                     )}
                 </tr>
-            </thead>
+            </thead >
         );
     };
 
@@ -166,7 +160,7 @@ const Table = <T extends RowDataType>({
         <div className={`relative mt-6 md:mt-9 w-full ${className}`}>
             {(actionsPosition === 'top' || actionsPosition === 'above-header') && renderActions()}
 
-            <div className="overflow-x-auto overflow-hidden rounded-b-2xl md:rounded-b-3xl bg-white shadow-sm">
+            <div className="overflow-x-auto overflow-hidden rounded-2xl md:rounded-3xl bg-white shadow-sm">
                 <table className="w-full text-sm border-collapse min-w-[600px]">
                     {renderHeader()}
                     {actionsPosition === 'header-replace' && (
diff --git a/src/components/Td.tsx b/src/components/Td.tsx
index 14314ed..eb57c7f 100644
--- a/src/components/Td.tsx
+++ b/src/components/Td.tsx
@@ -4,11 +4,12 @@ interface Props {
     text: string | number | ReactNode,
     children?: ReactNode,
     dir?: string,
+    className?: string,
 }
 
 const Td: FC<Props> = (props: Props) => {
     return (
-        <td className='px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-xs' style={{ direction: props.dir === "ltr" ? "ltr" : "rtl" }}>
+        <td className={`px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-xs ${props.className}`} style={{ direction: props.dir === "ltr" ? "ltr" : "rtl" }}>
             {
                 props.text ?
                     props.text
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 3610cfc..b58a2db 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -92,7 +92,11 @@
     "smtp_server": "SMTP سرور",
     "smtp_port": "SMTP پورت",
     "username": "نام کاربری",
-    "password": "پسورد"
+    "password": "پسورد",
+    "record_dns": "رکوردهای DNS",
+    "record_dns_description": "در این قسمت میتوانید وضعیت رکوردهای DNS سرویس ایمیل خود را بررسی کنید.",
+    "your_domain": "دامنه شما",
+    "submit": "ثبت"
   },
   "upload": "آپلود",
   "new_message": {
diff --git a/src/pages/setting/domain/Domain.tsx b/src/pages/setting/domain/Domain.tsx
index 648fb1f..8bc1804 100644
--- a/src/pages/setting/domain/Domain.tsx
+++ b/src/pages/setting/domain/Domain.tsx
@@ -1,79 +1,147 @@
+import Button from '@/components/Button'
 import Input from '@/components/Input'
-import RadioGroup from '@/components/RadioGroup'
+import Table from '@/components/Table'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { TickCircle } from 'iconsax-react'
+import { Copy } from 'iconsax-react'
+
+interface DNSRecord extends Record<string, unknown> {
+  id: number
+  status: 'verified' | 'pending'
+  type: string
+  name: string
+  value: string
+  number: number
+}
 
 const Domain: FC = () => {
-    const { t } = useTranslation()
-    return (
-        <div className='bg-white rounded-4xl p-8 mt-9'>
-            <div className=''>
-                <div className='flex justify-between items-end border-b pb-10 broder-border'>
-                    <div className='flex-1'>
-                        <div className='text-lg'>
-                            {t('setting.setting_fetch')}
-                        </div>
-                        <div className='text-sm text-description mt-1.5'>
-                            {t('setting.setting_fetch_description')}
-                        </div>
-                    </div>
-                    <div className='flex-1'>
-                        <RadioGroup
-                            items={[
-                                {
-                                    label: '۱ دقیقه',
-                                    value: '1'
-                                },
-                                {
-                                    label: '۲ دقیقه',
-                                    value: '2'
-                                },
-                                {
-                                    label: '۳ دقیقه',
-                                    value: '3'
-                                }
-                            ]}
-                            onChange={() => null}
-                            selected='1'
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className='mt-9'>
-                <div className='flex justify-between items-start pb-10'>
-                    <div className='flex-1'>
-                        <div className='text-lg'>
-                            {t('setting.setting_smtp')}
-                        </div>
-                        <div className='text-sm text-description mt-1.5'>
-                            {t('setting.setting_smtp_description')}
-                        </div>
-                    </div>
 
-                    <div className='flex-1'>
-                        <Input
-                            label={t('setting.smtp_server')}
-                        />
-                        <div className='mt-8'>
-                            <Input
-                                label={t('setting.smtp_port')}
-                            />
-                        </div>
-                        <div className='mt-8'>
-                            <Input
-                                label={t('setting.username')}
-                            />
-                        </div>
-                        <div className='mt-8'>
-                            <Input
-                                label={t('setting.password')}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
+  const { t } = useTranslation()
+
+  // نمونه داده‌های DNS records طبق تصویر
+  const dnsRecords: DNSRecord[] = [
+    {
+      id: 1,
+      status: 'verified',
+      type: 'TXT',
+      name: 'example.com',
+      value: 'v=spf1 include:_spf.example.com ~all',
+      number: 1
+    },
+    {
+      id: 2,
+      status: 'verified',
+      type: 'MX | Priority:10',
+      name: 'example.com',
+      value: '10 mail.example.com',
+      number: 1
+    },
+    {
+      id: 3,
+      status: 'verified',
+      type: 'Cname | No CDN',
+      name: 'example.com',
+      value: 'v=spf1 include:_spf.example.com ~all',
+      number: 1
+    },
+    {
+      id: 4,
+      status: 'verified',
+      type: 'TXT',
+      name: 'example.com',
+      value: 'v=spf1 include:_spf.example.com ~all',
+      number: 1
+    }
+  ]
+
+  const columns = [
+    {
+      title: 'شماره',
+      key: 'number',
+      width: '80px',
+      align: 'center' as const,
+    },
+    {
+      title: 'مقدار رکورد',
+      key: 'value',
+      render: (record: DNSRecord) => (
+        <div className="flex items-center gap-2">
+
+          <span className="truncate max-w-[300px]">{record.value}</span>
         </div>
-    )
+      )
+    },
+    {
+      title: 'نام رکورد',
+      key: 'name',
+      render: (record: DNSRecord) => (
+        <div className="flex items-center gap-2">
+          <button className="text-blue-500 hover:text-blue-700">
+            <Copy size={16} color='#0038FF' />
+          </button>
+          <span>{record.name}</span>
+        </div>
+      )
+    },
+    {
+      title: 'نوع رکورد',
+      key: 'type',
+    },
+    {
+      title: 'وضعیت',
+      key: 'status',
+      render: (record: DNSRecord) => (
+        <div className="flex items-center gap-2">
+          {record.status === 'verified' && (
+            <>
+              <TickCircle size={20} color="#22C55E" variant="Bold" />
+              <span className="text-green-500 text-xs">ثبت شده</span>
+            </>
+          )}
+        </div>
+      )
+    },
+  ]
+
+  return (
+    <div>
+      <div className='flex justify-between'>
+        <div>
+          <div className='text-lg'>
+            {t('setting.record_dns')}
+          </div>
+          <p className='mt-2 text-sm font-extralight'>
+            {t('setting.record_dns_description')}
+          </p>
+        </div>
+
+        <div className='flex gap-2'>
+          <Input
+            placeholder={t('setting.your_domain')}
+            className='w-[300px]'
+          />
+
+          <Button
+            variant='secondary'
+            className='w-fit px-14 border border-black'
+            label={t('setting.submit')}
+          />
+        </div>
+      </div>
+
+
+      <div className='mt-9'>
+        <Table
+          columns={columns}
+          data={dnsRecords}
+          className="!mt-0"
+        />
+      </div>
+
+
+    </div>
+  )
 }
 
 export default Domain
\ No newline at end of file
diff --git a/src/pages/setting/mail-server/MailServer.tsx b/src/pages/setting/mail-server/MailServer.tsx
index 1c87ae3..648fb1f 100644
--- a/src/pages/setting/mail-server/MailServer.tsx
+++ b/src/pages/setting/mail-server/MailServer.tsx
@@ -1,134 +1,79 @@
-import { FC, useState } from 'react'
+import Input from '@/components/Input'
+import RadioGroup from '@/components/RadioGroup'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const MailServer: FC = () => {
+const Domain: FC = () => {
     const { t } = useTranslation()
-    const [serverType, setServerType] = useState('smtp')
-    const [host, setHost] = useState('')
-    const [port, setPort] = useState('')
-    const [username, setUsername] = useState('')
-    const [password, setPassword] = useState('')
-    const [encryption, setEncryption] = useState('tls')
-
     return (
-        <div className='bg-white rounded-4xl p-8'>
-            <div className='flex justify-between mb-8'>
-                <h2 className='text-xl font-semibold'>{t('setting.mail_server')}</h2>
-                <button className='bg-primary text-white px-6 py-2 rounded-lg'>{t('common.save')}</button>
-            </div>
-
-            <div className='grid grid-cols-1 gap-6'>
-                <div>
-                    <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.server_type')}</label>
-                    <div className='flex gap-4 mb-4'>
-                        <label className='flex items-center gap-2 cursor-pointer'>
-                            <input
-                                type="radio"
-                                checked={serverType === 'smtp'}
-                                onChange={() => setServerType('smtp')}
-                                className='h-4 w-4 accent-primary'
-                            />
-                            <span>SMTP</span>
-                        </label>
-                        <label className='flex items-center gap-2 cursor-pointer'>
-                            <input
-                                type="radio"
-                                checked={serverType === 'api'}
-                                onChange={() => setServerType('api')}
-                                className='h-4 w-4 accent-primary'
-                            />
-                            <span>API</span>
-                        </label>
+        <div className='bg-white rounded-4xl p-8 mt-9'>
+            <div className=''>
+                <div className='flex justify-between items-end border-b pb-10 broder-border'>
+                    <div className='flex-1'>
+                        <div className='text-lg'>
+                            {t('setting.setting_fetch')}
+                        </div>
+                        <div className='text-sm text-description mt-1.5'>
+                            {t('setting.setting_fetch_description')}
+                        </div>
+                    </div>
+                    <div className='flex-1'>
+                        <RadioGroup
+                            items={[
+                                {
+                                    label: '۱ دقیقه',
+                                    value: '1'
+                                },
+                                {
+                                    label: '۲ دقیقه',
+                                    value: '2'
+                                },
+                                {
+                                    label: '۳ دقیقه',
+                                    value: '3'
+                                }
+                            ]}
+                            onChange={() => null}
+                            selected='1'
+                        />
                     </div>
                 </div>
-
-                {serverType === 'smtp' && (
-                    <>
-                        <div className='grid grid-cols-2 gap-4'>
-                            <div>
-                                <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.host')}</label>
-                                <input
-                                    type="text"
-                                    value={host}
-                                    onChange={(e) => setHost(e.target.value)}
-                                    className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
-                                    placeholder='mail.example.com'
-                                />
-                            </div>
-                            <div>
-                                <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.port')}</label>
-                                <input
-                                    type="text"
-                                    value={port}
-                                    onChange={(e) => setPort(e.target.value)}
-                                    className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
-                                    placeholder='587'
-                                />
-                            </div>
+            </div>
+            <div className='mt-9'>
+                <div className='flex justify-between items-start pb-10'>
+                    <div className='flex-1'>
+                        <div className='text-lg'>
+                            {t('setting.setting_smtp')}
                         </div>
+                        <div className='text-sm text-description mt-1.5'>
+                            {t('setting.setting_smtp_description')}
+                        </div>
+                    </div>
 
-                        <div>
-                            <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.username')}</label>
-                            <input
-                                type="text"
-                                value={username}
-                                onChange={(e) => setUsername(e.target.value)}
-                                className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
-                                placeholder='username@example.com'
+                    <div className='flex-1'>
+                        <Input
+                            label={t('setting.smtp_server')}
+                        />
+                        <div className='mt-8'>
+                            <Input
+                                label={t('setting.smtp_port')}
                             />
                         </div>
-
-                        <div>
-                            <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.password')}</label>
-                            <input
-                                type="password"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
+                        <div className='mt-8'>
+                            <Input
+                                label={t('setting.username')}
                             />
                         </div>
-
-                        <div>
-                            <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.encryption')}</label>
-                            <select
-                                value={encryption}
-                                onChange={(e) => setEncryption(e.target.value)}
-                                className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
-                            >
-                                <option value="none">{t('setting.none')}</option>
-                                <option value="ssl">SSL</option>
-                                <option value="tls">TLS</option>
-                            </select>
-                        </div>
-
-                        <div>
-                            <button className='bg-blue-50 text-blue-600 px-4 py-2 rounded-lg mt-4'>{t('setting.test_connection')}</button>
-                        </div>
-                    </>
-                )}
-
-                {serverType === 'api' && (
-                    <>
-                        <div>
-                            <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.api_key')}</label>
-                            <input
-                                type="password"
-                                className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
+                        <div className='mt-8'>
+                            <Input
+                                label={t('setting.password')}
                             />
                         </div>
-                        <div>
-                            <label className='block text-sm font-medium text-gray-700 mb-1'>{t('setting.api_url')}</label>
-                            <input
-                                type="text"
-                                className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent'
-                                placeholder='https://api.example.com/send'
-                            />
-                        </div>
-                    </>
-                )}
+                    </div>
+                </div>
             </div>
         </div>
     )
 }
 
-export default MailServer 
\ No newline at end of file
+export default Domain
\ No newline at end of file