diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 737dc5b..1c85e45 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,10 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="bb7b50a5-be9c-4cd7-a05b-979f0e91b173" name="Changes" comment="update">
-      <change afterPath="$PROJECT_DIR$/lib/axios.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.env.local.example" beforeDir="false" afterPath="$PROJECT_DIR$/.env.local.example" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/page.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/CartDrawer.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/CartDrawer.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/ChatWidget.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/ChatWidget.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/TicketForm.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/TicketForm.jsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -88,7 +88,7 @@
       <workItem from="1785583517424" duration="145000" />
       <workItem from="1785645096071" duration="26000" />
       <workItem from="1785646314677" duration="16621000" />
-      <workItem from="1785730130350" duration="8979000" />
+      <workItem from="1785730130350" duration="9270000" />
     </task>
     <task id="LOCAL-00001" summary="update">
       <option name="closed" value="true" />
@@ -178,7 +178,15 @@
       <option name="project" value="LOCAL" />
       <updated>1785744250045</updated>
     </task>
-    <option name="localTasksCounter" value="12" />
+    <task id="LOCAL-00012" summary="update">
+      <option name="closed" value="true" />
+      <created>1785745317460</created>
+      <option name="number" value="00012" />
+      <option name="presentableId" value="LOCAL-00012" />
+      <option name="project" value="LOCAL" />
+      <updated>1785745317460</updated>
+    </task>
+    <option name="localTasksCounter" value="13" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
diff --git a/components/CartDrawer.jsx b/components/CartDrawer.jsx
index 1df8152..0bb7b48 100644
--- a/components/CartDrawer.jsx
+++ b/components/CartDrawer.jsx
@@ -2,110 +2,113 @@
 
 // کشوی (Drawer) سبد خرید: نمایش آیتم‌های انتخابی، تغییر تعداد، جمع کل، و دکمه پرداخت (placeholder).
 
-import { Drawer, Button, Empty, InputNumber, message } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
-import { useSelector, useDispatch } from 'react-redux';
+import {Drawer, Button, Empty, InputNumber, message} from 'antd';
+import {DeleteOutlined} from '@ant-design/icons';
+import {useSelector, useDispatch} from 'react-redux';
 import {
-  selectCartItems,
-  selectCartTotal,
-  selectIsDrawerOpen,
-  closeDrawer,
-  removeFromCart,
-  incrementQty,
-  decrementQty,
+    selectCartItems,
+    selectCartTotal,
+    selectIsDrawerOpen,
+    closeDrawer,
+    removeFromCart,
+    incrementQty,
+    decrementQty,
 } from '@/store/cartSlice';
-import { useLanguage } from '@/app/context/LanguageContext';
+import {useLanguage} from '@/app/context/LanguageContext';
+import api from "@/lib/axios";
 
 function toLocaleNumber(n, locale) {
-  return n.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US');
+    return n.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US');
 }
 
 export default function CartDrawer() {
-  const dispatch = useDispatch();
-  const isOpen = useSelector(selectIsDrawerOpen);
-  const items = useSelector(selectCartItems);
-  const total = useSelector(selectCartTotal);
-  const { t, locale, dir } = useLanguage();
+    const dispatch = useDispatch();
+    const isOpen = useSelector(selectIsDrawerOpen);
+    const items = useSelector(selectCartItems);
+    const total = useSelector(selectCartTotal);
+    const {t, locale, dir} = useLanguage();
 
-  const currencySuffix = locale === 'fa' ? ' ریال' : ' Rials';
+    const currencySuffix = locale === 'fa' ? ' ریال' : ' Rials';
 
-  const handleCheckout = async () => {
-    // -------------------------------------------------------------------
-    // TODO: Connect to payment gateway API.
-    //
-    // import axios from 'axios';
-    //
-    // try {
-    //   const { data } = await axios.post('/api/payment/create', {
-    //     items: items.map((i) => ({ id: i.id, qty: i.qty })),
-    //     totalAmount: total,
-    //   });
-    //   window.location.href = data.paymentRedirectUrl;
-    // } catch (err) {
-    //   message.error('...');
-    // }
-    // -------------------------------------------------------------------
-    message.info(t.cart.checkoutToast);
-  };
+    const handleCheckout = async () => {
+        // -------------------------------------------------------------------
+        // TODO: Connect to payment gateway API.
 
-  return (
-    <Drawer
-      title={t.cart.title}
-      placement={dir === 'rtl' ? 'right' : 'left'}
-      onClose={() => dispatch(closeDrawer())}
-      open={isOpen}
-      width={400}
-    >
-      {items.length === 0 ? (
-        <Empty description={<span className="text-secondary">{t.cart.empty}</span>} className="mt-16" />
-      ) : (
-        <div className="flex flex-col gap-4">
-          {items.map((item) => (
-            <div key={item.id} className="flex items-center gap-3 bg-surface border border-subtle rounded-xl p-3">
-              <img src={item.image} alt={item.name} className="w-14 h-20 object-contain shrink-0" />
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-semibold text-primary truncate">{item.name}</p>
-                <p className="text-xs text-brand-400 mt-1">
-                  {toLocaleNumber(item.priceNumeric, locale)}
-                  {currencySuffix}
-                </p>
-                <div className="flex items-center gap-2 mt-2">
-                  <InputNumber
-                    size="small"
-                    min={1}
-                    value={item.qty}
-                    onChange={(val) => {
-                      if (val > item.qty) dispatch(incrementQty(item.id));
-                      else if (val < item.qty) dispatch(decrementQty(item.id));
-                    }}
-                    className="w-16"
-                  />
-                  <Button
-                    type="text"
-                    danger
-                    size="small"
-                    icon={<DeleteOutlined />}
-                    onClick={() => dispatch(removeFromCart(item.id))}
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
+        // try {
+        //   const { data } = await axios.post('/api/payment/create', {
+        //     items: items.map((i) => ({ id: i.id, qty: i.qty })),
+        //     totalAmount: total,
+        //   });
+        //   window.location.href = data.paymentRedirectUrl;
+        // } catch (err) {
+        //   message.error('...');
+        // }
 
-          <div className="border-t border-subtle pt-4 mt-2">
-            <div className="flex items-center justify-between text-sm text-secondary mb-4">
-              <span>{t.cart.total}</span>
-              <span className="text-lg font-bold text-primary">
+        // api() <===> todo : use this func to fetch ...
+
+        // -------------------------------------------------------------------
+        message.info(t.cart.checkoutToast);
+    };
+
+    return (
+        <Drawer
+            title={t.cart.title}
+            placement={dir === 'rtl' ? 'right' : 'left'}
+            onClose={() => dispatch(closeDrawer())}
+            open={isOpen}
+            width={400}
+        >
+            {items.length === 0 ? (
+                <Empty description={<span className="text-secondary">{t.cart.empty}</span>} className="mt-16"/>
+            ) : (
+                <div className="flex flex-col gap-4">
+                    {items.map((item) => (
+                        <div key={item.id}
+                             className="flex items-center gap-3 bg-surface border border-subtle rounded-xl p-3">
+                            <img src={item.image} alt={item.name} className="w-14 h-20 object-contain shrink-0"/>
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm font-semibold text-primary truncate">{item.name}</p>
+                                <p className="text-xs text-brand-400 mt-1">
+                                    {toLocaleNumber(item.priceNumeric, locale)}
+                                    {currencySuffix}
+                                </p>
+                                <div className="flex items-center gap-2 mt-2">
+                                    <InputNumber
+                                        size="small"
+                                        min={1}
+                                        value={item.qty}
+                                        onChange={(val) => {
+                                            if (val > item.qty) dispatch(incrementQty(item.id));
+                                            else if (val < item.qty) dispatch(decrementQty(item.id));
+                                        }}
+                                        className="w-16"
+                                    />
+                                    <Button
+                                        type="text"
+                                        danger
+                                        size="small"
+                                        icon={<DeleteOutlined/>}
+                                        onClick={() => dispatch(removeFromCart(item.id))}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+
+                    <div className="border-t border-subtle pt-4 mt-2">
+                        <div className="flex items-center justify-between text-sm text-secondary mb-4">
+                            <span>{t.cart.total}</span>
+                            <span className="text-lg font-bold text-primary">
                 {toLocaleNumber(total, locale)}
-                {currencySuffix}
+                                {currencySuffix}
               </span>
-            </div>
-            <Button type="primary" block size="large" onClick={handleCheckout}>
-              {t.cart.checkout}
-            </Button>
-          </div>
-        </div>
-      )}
-    </Drawer>
-  );
+                        </div>
+                        <Button type="primary" block size="large" onClick={handleCheckout}>
+                            {t.cart.checkout}
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </Drawer>
+    );
 }
diff --git a/components/ChatWidget.jsx b/components/ChatWidget.jsx
index 03a6e0a..788c9b6 100644
--- a/components/ChatWidget.jsx
+++ b/components/ChatWidget.jsx
@@ -38,6 +38,8 @@ export default function ChatWidget() {
     // import axios from 'axios';
     // const { data } = await axios.post('/api/chat', { message: text });
     // setMessages((prev) => [...prev, { from: 'bot', text: data.reply }]);
+    // api() <===> todo : use this func to fetch ...
+
     // -----------------------------------------------------------------
     setTimeout(() => {
       setMessages((prev) => [...prev, { from: 'bot', text: t.chat.fallbackReply }]);
diff --git a/components/TicketForm.jsx b/components/TicketForm.jsx
index 40105df..6a561bb 100644
--- a/components/TicketForm.jsx
+++ b/components/TicketForm.jsx
@@ -23,6 +23,9 @@ export default function TicketForm() {
     //   message.error('...');
     //   return;
     // }
+
+    // api() <===> todo : use this func to fetch ...
+
     // -------------------------------------------------------------------
     console.log('Ticket submitted (placeholder):', values);
     message.success(t.ticket.successMsg);