diff --git a/src/pages/request/NewRequest.tsx b/src/pages/request/NewRequest.tsx
index 9818753..a3e34d0 100644
--- a/src/pages/request/NewRequest.tsx
+++ b/src/pages/request/NewRequest.tsx
@@ -22,8 +22,7 @@ const NewRequest: FC = () => {
     const [formKey, setFormKey] = useState(0)
     const [showConfirmModal, setShowConfirmModal] = useState(false)
     const composerRef = useRef<ChatComposerHandle>(null)
-    const [pendingNote, setPendingNote] =
-        useState<ChatComposerSubmitPayload | null>(null)
+    const [pendingNote, setPendingNote] = useState<ChatComposerSubmitPayload | null>(null)
 
     useEffect(() => {
         setItems([])
@@ -49,9 +48,7 @@ const NewRequest: FC = () => {
         }
     }
 
-    const handleEdit = (index: number) => {
-        setEditingIndex(index)
-    }
+    const handleEdit = (index: number) => setEditingIndex(index)
 
     const openSubmitConfirm = () => {
         if (items.length === 0) {
@@ -65,15 +62,11 @@ const NewRequest: FC = () => {
         }
 
         if (composerRef.current?.hasUploadErrors()) {
-            toast(
-                'برخی فایل‌ها آپلود نشدند. آن‌ها را حذف یا دوباره انتخاب کنید',
-                'error',
-            )
+            toast('برخی فایل‌ها آپلود نشدند. آن‌ها را حذف یا دوباره انتخاب کنید', 'error')
             return
         }
 
-        const note = composerRef.current?.getPayload() ?? null
-        setPendingNote(note)
+        setPendingNote(composerRef.current?.getPayload() ?? null)
         setShowConfirmModal(true)
     }
 
@@ -82,9 +75,7 @@ const NewRequest: FC = () => {
             {
                 items,
                 ...(pendingNote?.content ? { description: pendingNote.content } : {}),
-                ...(pendingNote?.attachments?.length
-                    ? { attachments: pendingNote.attachments }
-                    : {}),
+                ...(pendingNote?.attachments?.length ? { attachments: pendingNote.attachments } : {}),
             },
             {
                 onSuccess: () => {
@@ -105,32 +96,31 @@ const NewRequest: FC = () => {
     }
 
     return (
-        <div className='mt-4 pb-12'>
-            <div className='flex items-center justify-between gap-4'>
-                <h1 className='text-lg font-light'>درخواست جدید</h1>
+        <div className='pb-16'>
+            {/* Page header */}
+            <div className='flex items-center justify-between gap-4 mb-1'>
+                <h1 className='text-lg font-semibold'>درخواست جدید</h1>
                 <Link
                     to={Paths.myRequests}
-                    className='flex items-center gap-1 text-sm text-description hover:text-black shrink-0'
+                    className='flex items-center gap-1 text-sm text-description hover:text-black transition-colors shrink-0'
                 >
                     <ArrowRight2 size={18} color='currentColor' />
                     بازگشت به لیست
                 </Link>
             </div>
 
-            <p className='text-description text-xs mt-2 leading-5'>
-                برای هر محصول یک قلم اضافه کنید. در صورت نیاز توضیحات یا فایل را
-                در بخش پایین وارد کنید و از دکمه «ثبت نهایی درخواست» در کنار لیست
-                استفاده کنید.
+            <p className='text-description text-xs leading-6 mt-1 max-w-xl'>
+                برای هر محصول یک قلم اضافه کنید. در صورت نیاز توضیحات یا فایل را در بخش پایین وارد کنید و از دکمه «ثبت نهایی درخواست» استفاده کنید.
             </p>
 
-            <div className='flex flex-col-reverse xl:flex-row gap-6 xl:mt-8 mt-4'>
-                <div className='flex-1 min-w-0'>
+            {/* Main content */}
+            <div className='flex flex-col xl:flex-row gap-6 mt-6'>
+                {/* Left column: form + notes */}
+                <div className='flex-1 min-w-0 flex flex-col gap-6'>
                     <Request
                         key={editingIndex !== null ? `edit-${editingIndex}` : `new-${formKey}`}
                         editIndex={editingIndex}
-                        initialItem={
-                            editingIndex !== null ? items[editingIndex] : undefined
-                        }
+                        initialItem={editingIndex !== null ? items[editingIndex] : undefined}
                         onSaved={handleSaved}
                         onCancelEdit={
                             editingIndex !== null
@@ -141,8 +131,24 @@ const NewRequest: FC = () => {
                                 : undefined
                         }
                     />
+
+                    <section className='bg-white rounded-3xl p-6'>
+                        <h2 className='text-sm font-medium mb-1'>توضیحات درخواست</h2>
+                        <p className='text-description text-xs mb-5 leading-6'>
+                            توضیحات، فایل یا پیام صوتی خود را اینجا بنویسید.
+                        </p>
+                        <ChatComposer
+                            ref={composerRef}
+                            onSubmit={async () => undefined}
+                            showSubmitButton={false}
+                            label='پیام شما'
+                            placeholder='توضیحات یا درخواست خود را بنویسید...'
+                            allowEmptySubmit
+                        />
+                    </section>
                 </div>
 
+                {/* Right column: items list (sticky on xl) */}
                 <RequestItemsList
                     items={items}
                     editingIndex={editingIndex}
@@ -153,22 +159,6 @@ const NewRequest: FC = () => {
                 />
             </div>
 
-            <section className='bg-white rounded-3xl p-6 mt-6'>
-                <h2 className='text-sm font-light mb-1'>توضیحات درخواست</h2>
-                <p className='text-description text-xs mb-6 leading-5'>
-                    توضیحات، فایل یا پیام صوتی خود را اینجا بنویسید. برای ارسال
-                    درخواست از دکمه کنار لیست اقلام استفاده کنید.
-                </p>
-                <ChatComposer
-                    ref={composerRef}
-                    onSubmit={async () => undefined}
-                    showSubmitButton={false}
-                    label='پیام شما'
-                    placeholder='توضیحات یا درخواست خود را بنویسید...'
-                    allowEmptySubmit
-                />
-            </section>
-
             <ModalConfirm
                 open={showConfirmModal}
                 onClose={() => setShowConfirmModal(false)}
diff --git a/src/pages/request/components/AvatarSelectionGrid.tsx b/src/pages/request/components/AvatarSelectionGrid.tsx
new file mode 100644
index 0000000..6a66d0a
--- /dev/null
+++ b/src/pages/request/components/AvatarSelectionGrid.tsx
@@ -0,0 +1,112 @@
+import { type FC } from 'react'
+import { clx } from '@/helpers/utils'
+import PresignedImage from '@/components/PresignedImage'
+import placeholderImage from '@/assets/images/placeholder-product.svg'
+
+export type AvatarSelectionOption = {
+    id: string
+    title: string
+    imageUrl?: string
+}
+
+type Props = {
+    label: string
+    items: AvatarSelectionOption[]
+    selectedId?: string
+    onSelect: (id: string) => void
+    isLoading?: boolean
+    emptyMessage?: string
+    error_text?: string
+}
+
+const SKELETON_COUNT = 6
+
+const AvatarSelectionGrid: FC<Props> = ({
+    label,
+    items,
+    selectedId,
+    onSelect,
+    isLoading = false,
+    emptyMessage = 'موردی یافت نشد',
+    error_text,
+}) => {
+    return (
+        <div className='w-full'>
+            <label className='text-sm font-medium text-primary-content'>{label}</label>
+
+            <div className='mt-3 w-full overflow-x-auto scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent pb-1'>
+                {isLoading ? (
+                    <div className='flex flex-nowrap gap-3'>
+                        {Array.from({ length: SKELETON_COUNT }).map((_, index) => (
+                            <div key={index} className='flex w-[72px] shrink-0 flex-col items-center gap-2'>
+                                <div className='size-14 animate-pulse rounded-full bg-gray-200' />
+                                <div className='h-6 w-full animate-pulse rounded-md bg-gray-100' />
+                            </div>
+                        ))}
+                    </div>
+                ) : items.length === 0 ? (
+                    <p className='text-sm font-light text-[#7B7E8B] py-2'>{emptyMessage}</p>
+                ) : (
+                    <div className='flex flex-nowrap gap-3'>
+                        {items.map((item) => {
+                            const isSelected = selectedId === item.id
+
+                            return (
+                                <button
+                                    key={item.id}
+                                    type='button'
+                                    onClick={() => onSelect(item.id)}
+                                    className={clx(
+                                        'flex w-[72px] shrink-0 flex-col items-center gap-2 text-center rounded-2xl p-1.5 transition-all',
+                                        isSelected
+                                            ? 'bg-primary/8'
+                                            : 'hover:bg-gray-50',
+                                    )}
+                                >
+                                    <div
+                                        className={clx(
+                                            'size-14 overflow-hidden rounded-full border-2 bg-[#F5F7FC] transition-all',
+                                            isSelected
+                                                ? 'border-primary shadow-sm shadow-primary/20'
+                                                : 'border-transparent',
+                                        )}
+                                    >
+                                        {item.imageUrl ? (
+                                            <PresignedImage
+                                                src={item.imageUrl}
+                                                alt={item.title}
+                                                className='size-full object-cover'
+                                            />
+                                        ) : (
+                                            <img
+                                                src={placeholderImage}
+                                                alt={item.title}
+                                                className='size-full object-cover'
+                                            />
+                                        )}
+                                    </div>
+                                    <span
+                                        className={clx(
+                                            'line-clamp-2 w-full text-[11px] leading-4',
+                                            isSelected ? 'text-primary font-medium' : 'text-[#292D32] font-light',
+                                        )}
+                                    >
+                                        {item.title}
+                                    </span>
+                                </button>
+                            )
+                        })}
+                    </div>
+                )}
+            </div>
+
+            {error_text && (
+                <p className='mt-2 mr-1 text-right text-xs font-medium text-red-500'>
+                    {error_text}
+                </p>
+            )}
+        </div>
+    )
+}
+
+export default AvatarSelectionGrid
diff --git a/src/pages/request/components/ProductsSelect.tsx b/src/pages/request/components/ProductsSelect.tsx
index 0afc5b6..77b619b 100644
--- a/src/pages/request/components/ProductsSelect.tsx
+++ b/src/pages/request/components/ProductsSelect.tsx
@@ -1,46 +1,39 @@
 import { type ChangeEvent, type FC, type SelectHTMLAttributes, useEffect, useMemo, useState } from 'react'
 import { useGetCategories, useGetProducts } from '../hooks/useRequestData'
-import Select from '@/components/Select'
 import type { CategoryType, ProductType } from '../type/Types'
 import {
     extractList,
     findCategoryById,
     findCategoryPath,
     getCategoriesAtLevel,
+    getLevelsToShow,
 } from '../utils/categoryUtils'
+import AvatarSelectionGrid from './AvatarSelectionGrid'
 
 type Props = {
-    error_text?: string,
-    onProductSelect?: (product: ProductType | undefined) => void,
+    error_text?: string
+    onProductSelect?: (product: ProductType | undefined) => void
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const ProductsSelect: FC<Props> = (props) => {
-    const { error_text, onProductSelect, value, onChange, ...rest } = props
+    const { error_text, onProductSelect, value, onChange } = props
     const [selectedPath, setSelectedPath] = useState<string[]>([])
 
-    const { data: categoriesData } = useGetCategories()
+    const { data: categoriesData, isLoading: isCategoriesLoading } = useGetCategories()
     const categories = useMemo(
         () => extractList<CategoryType>(categoriesData),
         [categoriesData],
     )
 
-    const levelsToShow = useMemo(() => {
-        const levels = [0]
-
-        for (let level = 0; level < selectedPath.length; level++) {
-            const category = findCategoryById(categories, selectedPath[level])
-            if (category?.children?.length) {
-                levels.push(level + 1)
-            }
-        }
-
-        return levels
-    }, [categories, selectedPath])
+    const levelsToShow = useMemo(
+        () => getLevelsToShow(categories, selectedPath),
+        [categories, selectedPath],
+    )
 
     const activeCategoryId = selectedPath.at(-1) ?? ''
     const canLoadProducts = !!activeCategoryId
 
-    const { data: productsData } = useGetProducts(activeCategoryId || undefined, {
+    const { data: productsData, isLoading: isProductsLoading } = useGetProducts(activeCategoryId || undefined, {
         enabled: canLoadProducts,
     })
 
@@ -59,14 +52,7 @@ const ProductsSelect: FC<Props> = (props) => {
         [resolveProductsData],
     )
 
-    const productItems = useMemo(
-        () => products.map((product) => ({
-            label: product.title,
-            value: product.id,
-        })),
-        [products],
-    )
-
+    // Resolve initial selectedPath when editing an existing item
     useEffect(() => {
         if (!value || selectedPath.length || !categories.length) return
 
@@ -83,6 +69,7 @@ const ProductsSelect: FC<Props> = (props) => {
         setSelectedPath(path)
     }, [value, resolveProducts, categories, selectedPath.length])
 
+    // Emit onProductSelect whenever the selected product changes
     useEffect(() => {
         if (!value) {
             onProductSelect?.(undefined)
@@ -101,47 +88,59 @@ const ProductsSelect: FC<Props> = (props) => {
         } as ChangeEvent<HTMLSelectElement>)
     }
 
-    const handleCategoryChange = (level: number, nextValue: string) => {
-        setSelectedPath((prev) => [...prev.slice(0, level), nextValue])
+    const handleCategorySelect = (level: number, categoryId: string) => {
+        setSelectedPath((prev) => [...prev.slice(0, level), categoryId])
         emitProductChange('')
+
+        // If the selected category has children, keep drilling; don't auto-select product
+        const category = findCategoryById(categories, categoryId)
+        if (category?.children?.length) return
     }
 
-    const handleProductChange = (e: ChangeEvent<HTMLSelectElement>) => {
-        onChange?.(e)
-
-        const product = products.find((item) => item.id === e.target.value)
+    const handleProductSelect = (productId: string) => {
+        emitProductChange(productId)
+        const product = products.find((item) => item.id === productId)
         onProductSelect?.(product)
     }
 
     return (
-        <div className='space-y-4'>
+        <div className='space-y-6'>
             {levelsToShow.map((level) => {
-                const items = getCategoriesAtLevel(categories, level, selectedPath).map((category) => ({
-                    label: category.title,
-                    value: category.id,
-                }))
+                const levelCategories = getCategoriesAtLevel(categories, level, selectedPath)
+                const levelLabel = level === 0 ? 'دسته‌بندی' : 'زیر دسته‌بندی'
 
                 return (
-                    <Select
+                    <AvatarSelectionGrid
                         key={level}
-                        items={items}
-                        label={level === 0 ? 'دسته‌بندی' : 'زیر دسته‌بندی'}
-                        placeholder={level === 0 ? 'انتخاب دسته‌بندی' : 'انتخاب زیر دسته‌بندی'}
-                        value={selectedPath[level] ?? ''}
-                        onChange={(e) => handleCategoryChange(level, e.target.value)}
+                        label={levelLabel}
+                        isLoading={isCategoriesLoading}
+                        items={levelCategories.map((cat) => ({
+                            id: cat.id,
+                            title: cat.title,
+                            imageUrl: cat.avatarUrl,
+                        }))}
+                        selectedId={selectedPath[level]}
+                        onSelect={(id) => handleCategorySelect(level, id)}
+                        emptyMessage='دسته‌بندی یافت نشد'
                     />
                 )
             })}
-            <Select
-                items={productItems}
-                label='محصول'
-                placeholder='انتخاب محصول'
-                value={value}
-                onChange={handleProductChange}
-                error_text={error_text}
-                disabled={!activeCategoryId}
-                {...rest}
-            />
+
+            {canLoadProducts && (
+                <AvatarSelectionGrid
+                    label='محصول'
+                    isLoading={isProductsLoading}
+                    items={products.map((product) => ({
+                        id: product.id,
+                        title: product.title,
+                        imageUrl: product.images?.[0],
+                    }))}
+                    selectedId={typeof value === 'string' ? value : undefined}
+                    onSelect={handleProductSelect}
+                    error_text={error_text}
+                    emptyMessage='محصولی برای این دسته‌بندی یافت نشد'
+                />
+            )}
         </div>
     )
 }
diff --git a/src/pages/request/components/Request.tsx b/src/pages/request/components/Request.tsx
index f20c493..771a168 100644
--- a/src/pages/request/components/Request.tsx
+++ b/src/pages/request/components/Request.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState, type ChangeEvent, type FC } from 'react'
 import Button from '@/components/Button'
 import { COLORS } from '@/constants/colors'
-import { AddSquare, CloseCircle, Edit } from 'iconsax-react'
+import { AddSquare, CloseCircle, Edit2 } from 'iconsax-react'
 import ProductsSelect from './ProductsSelect'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
@@ -25,7 +25,6 @@ type Props = {
 
 const Request: FC<Props> = ({ editIndex, initialItem, onSaved, onCancelEdit }) => {
     const isEditing = editIndex !== null
-
     const setItems = useRequestStore((state) => state.setItems)
     const [productSelected, setProductSelected] = useState<ProductType>()
 
@@ -45,14 +44,11 @@ const Request: FC<Props> = ({ editIndex, initialItem, onSaved, onCancelEdit }) =
                 const items = useRequestStore.getState().items
                 setItems([...items, values])
             }
-
             onSaved()
         },
     })
 
-    const resolvedProduct = productSelected
-
-    const { data: attributes } = useGetAttributes(resolvedProduct?.id)
+    const { data: attributes } = useGetAttributes(productSelected?.id)
 
     const handleProductChange = useCallback(
         (e: ChangeEvent<HTMLSelectElement>) => {
@@ -68,7 +64,7 @@ const Request: FC<Props> = ({ editIndex, initialItem, onSaved, onCancelEdit }) =
             formik.setFieldValue('productId', productId)
             formik.setFieldValue('attributes', [])
         },
-        [formik]
+        [formik],
     )
 
     const handleProductSelect = useCallback((product: ProductType | undefined) => {
@@ -77,23 +73,36 @@ const Request: FC<Props> = ({ editIndex, initialItem, onSaved, onCancelEdit }) =
 
     return (
         <div className='bg-white rounded-3xl p-6'>
-            <div className='flex items-center justify-between'>
-                <div className='font-light'>
-                    {isEditing ? 'ویرایش قلم' : 'افزودن قلم جدید'}
+            {/* Section header */}
+            <div className='flex items-center justify-between mb-6'>
+                <div className='flex items-center gap-2'>
+                    <div
+                        className={clx(
+                            'size-8 rounded-full flex items-center justify-center text-white text-xs font-bold',
+                            isEditing ? 'bg-blue-500' : 'bg-primary',
+                        )}
+                    >
+                        {isEditing ? <Edit2 size={15} color='white' /> : <AddSquare size={15} color='white' />}
+                    </div>
+                    <span className='text-sm font-medium'>
+                        {isEditing ? 'ویرایش قلم' : 'افزودن قلم جدید'}
+                    </span>
                 </div>
+
                 {isEditing && onCancelEdit && (
                     <button
                         type='button'
                         onClick={onCancelEdit}
-                        className='flex items-center gap-1 text-xs text-description hover:text-black'
+                        className='flex items-center gap-1 text-xs text-description hover:text-black transition-colors'
                     >
-                        <CloseCircle size={18} color='currentColor' />
+                        <CloseCircle size={16} color='currentColor' />
                         انصراف
                     </button>
                 )}
             </div>
 
-            <div className='mt-6 rowTwoInput'>
+            {/* Product selector */}
+            <div className='rowTwoInput'>
                 <ProductsSelect
                     value={formik.values.productId ?? ''}
                     onChange={handleProductChange}
@@ -106,32 +115,30 @@ const Request: FC<Props> = ({ editIndex, initialItem, onSaved, onCancelEdit }) =
                 />
             </div>
 
-            <div>
-                <ManageAttribute
-                    key={`${resolvedProduct?.id ?? 'none'}-${editIndex ?? 'new'}`}
-                    attributes={attributes?.data}
-                    formik={formik}
-                />
-            </div>
+            {/* Attributes */}
+            <ManageAttribute
+                key={`${productSelected?.id ?? 'none'}-${editIndex ?? 'new'}`}
+                attributes={attributes?.data}
+                formik={formik}
+            />
 
+            {/* Action button */}
             <div className='mt-6 flex justify-end'>
                 <Button
                     className={clx(
-                        'w-fit px-6',
+                        'w-fit px-8 gap-2',
                         isEditing
-                            ? 'bg-transparent border border-[#3B82F6] text-[#3B82F6]'
-                            : 'bg-transparent border border-primary text-primary'
+                            ? 'bg-transparent border border-blue-500 text-blue-500 hover:bg-blue-50'
+                            : 'bg-transparent border border-primary text-primary hover:bg-primary/5',
                     )}
                     onClick={() => formik.handleSubmit()}
                 >
-                    <div className='flex gap-1 items-center'>
-                        {isEditing ? (
-                            <Edit color='#3B82F6' size={20} />
-                        ) : (
-                            <AddSquare color={COLORS.primary} size={20} />
-                        )}
-                        <span>{isEditing ? 'ذخیره تغییرات' : 'افزودن به لیست'}</span>
-                    </div>
+                    {isEditing ? (
+                        <Edit2 color='currentColor' size={18} />
+                    ) : (
+                        <AddSquare color={COLORS.primary} size={18} />
+                    )}
+                    <span>{isEditing ? 'ذخیره تغییرات' : 'افزودن به لیست'}</span>
                 </Button>
             </div>
         </div>
diff --git a/src/pages/request/components/RequestItemsList.tsx b/src/pages/request/components/RequestItemsList.tsx
index 0af7ea6..0e6cbcd 100644
--- a/src/pages/request/components/RequestItemsList.tsx
+++ b/src/pages/request/components/RequestItemsList.tsx
@@ -1,6 +1,6 @@
 import { type FC } from 'react'
 import Button from '@/components/Button'
-import { Edit, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
+import { Edit2, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
 import { useGetProducts } from '../hooks/useRequestData'
 import type { RequestItemType } from '../type/Types'
 import { clx } from '@/helpers/utils'
@@ -28,60 +28,75 @@ const RequestItemsList: FC<Props> = ({
         productsData?.data?.find((p) => p.id === productId)?.title ?? 'محصول'
 
     return (
-        <div className='bg-white w-full xl:w-[320px] shrink-0 py-6 px-5 h-fit rounded-3xl xl:sticky xl:top-6'>
-            <div className='flex items-center gap-2'>
-                <ShoppingCart size={20} color='black' />
-                <span className='text-sm font-medium'>اقلام درخواست</span>
+        <div className='bg-white w-full xl:w-[340px] shrink-0 rounded-3xl xl:sticky xl:top-6 h-fit'>
+            {/* Header */}
+            <div className='flex items-center gap-2 px-5 pt-5 pb-4 border-b border-[#f0f2f8]'>
+                <ShoppingCart size={20} color='black' variant='Bold' />
+                <span className='text-sm font-semibold'>اقلام درخواست</span>
                 {items.length > 0 && (
-                    <span className='text-xs bg-primary/20 text-black rounded-full px-2 py-0.5 mr-auto'>
-                        {items.length}
+                    <span className='mr-auto text-xs bg-primary/15 text-primary font-medium rounded-full px-2.5 py-0.5 tabular-nums'>
+                        {items.length} قلم
                     </span>
                 )}
             </div>
 
-            {items.length === 0 ? (
-                <p className='text-description text-xs mt-6 leading-6'>
-                    هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
-                </p>
-            ) : (
-                <ul className='mt-4 space-y-3 max-h-[360px] overflow-y-auto'>
-                    {items.map((item, index) => (
-                        <li
-                            key={index}
-                            className={clx(
-                                'border rounded-2xl p-3 transition-colors',
-                                editingIndex === index
-                                    ? 'border-primary bg-primary/5'
-                                    : 'border-[#f0f2f8]'
-                            )}
-                        >
-                            <div className='text-sm font-medium truncate'>
-                                {getProductTitle(item.productId)}
-                            </div>
-                            <div className='flex gap-2 mt-3'>
-                                <button
-                                    type='button'
-                                    onClick={() => onEdit(index)}
-                                    className='flex items-center gap-1 text-xs text-[#3B82F6] hover:opacity-80'
-                                >
-                                    <Edit size={16} color='#3B82F6' />
-                                    ویرایش
-                                </button>
-                                <button
-                                    type='button'
-                                    onClick={() => onRemove(index)}
-                                    className='flex items-center gap-1 text-xs text-red-500 hover:opacity-80 mr-auto'
-                                >
-                                    <Trash size={16} color='#ef4444' />
-                                    حذف
-                                </button>
-                            </div>
-                        </li>
-                    ))}
-                </ul>
-            )}
+            {/* Items */}
+            <div className='px-5 py-4'>
+                {items.length === 0 ? (
+                    <div className='flex flex-col items-center justify-center gap-3 py-8 text-center'>
+                        <div className='size-12 rounded-full bg-gray-50 flex items-center justify-center'>
+                            <ShoppingCart size={22} color='#c0c4d0' />
+                        </div>
+                        <p className='text-description text-xs leading-6 max-w-[200px]'>
+                            هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
+                        </p>
+                    </div>
+                ) : (
+                    <ul className='space-y-2 max-h-[380px] overflow-y-auto -mx-1 px-1'>
+                        {items.map((item, index) => (
+                            <li
+                                key={index}
+                                className={clx(
+                                    'border rounded-2xl px-4 py-3 transition-all',
+                                    editingIndex === index
+                                        ? 'border-primary bg-primary/5 shadow-sm'
+                                        : 'border-[#eef0f6] hover:border-gray-300',
+                                )}
+                            >
+                                <div className='flex items-start justify-between gap-2'>
+                                    <span className='text-sm font-medium truncate leading-6'>
+                                        {getProductTitle(item.productId)}
+                                    </span>
+                                    <span className='text-[10px] text-description shrink-0 bg-gray-100 rounded-full px-2 py-0.5'>
+                                        #{index + 1}
+                                    </span>
+                                </div>
+                                <div className='flex gap-3 mt-2'>
+                                    <button
+                                        type='button'
+                                        onClick={() => onEdit(index)}
+                                        className='flex items-center gap-1 text-xs text-primary hover:opacity-75 transition-opacity'
+                                    >
+                                        <Edit2 size={14} color='currentColor' />
+                                        ویرایش
+                                    </button>
+                                    <button
+                                        type='button'
+                                        onClick={() => onRemove(index)}
+                                        className='flex items-center gap-1 text-xs text-red-500 hover:opacity-75 transition-opacity mr-auto'
+                                    >
+                                        <Trash size={14} color='currentColor' />
+                                        حذف
+                                    </button>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
 
-            <div className='mt-6 pt-4 border-t border-[#f0f2f8]'>
+            {/* Submit footer */}
+            <div className='px-5 pb-5 pt-3 border-t border-[#f0f2f8]'>
                 <Button
                     className='w-full'
                     onClick={onSubmit}
@@ -89,7 +104,7 @@ const RequestItemsList: FC<Props> = ({
                     disabled={items.length === 0}
                 >
                     <div className='flex gap-2 items-center justify-center'>
-                        <TickSquare size={20} color='black' />
+                        <TickSquare size={20} color='currentColor' />
                         <span>ثبت نهایی درخواست</span>
                     </div>
                 </Button>