diff --git a/dist/chunks/Pagination-BFHGSAKW.js b/dist/chunks/Pagination-BFHGSAKW.js
deleted file mode 100644
index 974372f..0000000
--- a/dist/chunks/Pagination-BFHGSAKW.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { jsxs as x, jsx as l } from "react/jsx-runtime";
-import { useState as B, useRef as A, useEffect as v } from "react";
-import { HStack as w, Text as u, IconButton as y, Button as S, Input as E } from "@chakra-ui/react";
-import { IoChevronForwardOutline as M, IoChevronBackOutline as N } from "react-icons/io5/index.js";
-import { toFaDigits as e, toEnDigits as C } from "../utils.js";
-const V = ({
-  currentPage: i,
-  totalPages: r,
-  totalCount: I,
-  onPageChange: c
-}) => {
-  const [p, o] = B(e(i)), [m, d] = B(!1), [h, f] = B(null), a = A(null), D = Array.from(
-    /* @__PURE__ */ new Set([1, i, i + 1, r])
-  ).filter((n) => n >= 1 && n <= r).sort((n, t) => n - t);
-  v(() => {
-    if (h !== null) {
-      i === h && (f(null), d(!1), o(e(i)));
-      return;
-    }
-    m || o(e(i));
-  }, [i, m, h]), v(() => {
-    if (!m || !p || h !== null) return;
-    const n = parseInt(C(p), 10);
-    if (isNaN(n)) return;
-    const t = setTimeout(() => {
-      var b;
-      const s = Math.min(Math.max(n, 1), r);
-      s !== i ? (f(s), o(e(s)), c(s)) : (d(!1), o(e(i))), (b = a.current) == null || b.blur();
-    }, 1e3);
-    return () => clearTimeout(t);
-  }, [
-    p,
-    m,
-    h,
-    r,
-    i,
-    c
-  ]);
-  const k = () => {
-    var s, b;
-    const n = parseInt(C(p), 10);
-    if (isNaN(n)) {
-      o(e(i)), d(!1), f(null), (s = a.current) == null || s.blur();
-      return;
-    }
-    const t = Math.min(Math.max(n, 1), r);
-    t !== i ? (f(t), o(e(t)), c(t)) : (o(e(i)), d(!1), f(null)), (b = a.current) == null || b.blur();
-  };
-  return r === 0 || !I ? null : /* @__PURE__ */ x(
-    w,
-    {
-      justifyContent: "space-around",
-      backgroundColor: "white",
-      py: "10px",
-      px: "16px",
-      rounded: "lg",
-      border: "1px",
-      borderColor: "blue.200",
-      w: "100%",
-      children: [
-        /* @__PURE__ */ x(w, { spacing: 2, whiteSpace: "nowrap", children: [
-          /* @__PURE__ */ l(u, { fontWeight: "bold", children: "صفحه" }),
-          /* @__PURE__ */ l(u, { children: e(i) }),
-          /* @__PURE__ */ l(u, { fontWeight: "bold", children: "از" }),
-          /* @__PURE__ */ l(u, { children: e(r) })
-        ] }),
-        /* @__PURE__ */ x(w, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ l(
-            y,
-            {
-              size: "md",
-              bg: "#e6e6f1",
-              color: "#4B49AC",
-              _hover: { bg: "#cbcbe8" },
-              onClick: () => c(i - 1),
-              isDisabled: i === 1,
-              icon: /* @__PURE__ */ l(M, {}),
-              "aria-label": "صفحه قبلی"
-            }
-          ),
-          D.map((n) => /* @__PURE__ */ l(
-            S,
-            {
-              size: "md",
-              bg: i === n ? "#4B49AC" : "#e6e6f1",
-              color: i === n ? "#e6e6f1" : "#4B49AC",
-              _hover: { bg: i === n ? "#4B49AC" : "#cbcbe8" },
-              onClick: () => c(n),
-              variant: "soft",
-              children: e(n)
-            },
-            n
-          )),
-          /* @__PURE__ */ l(
-            y,
-            {
-              size: "md",
-              bg: "#e6e6f1",
-              color: "#4B49AC",
-              _hover: { bg: "#cbcbe8" },
-              onClick: () => c(i + 1),
-              isDisabled: i === r,
-              icon: /* @__PURE__ */ l(N, {}),
-              "aria-label": "صفحه بعدی"
-            }
-          ),
-          /* @__PURE__ */ l(
-            E,
-            {
-              ref: a,
-              type: "text",
-              inputMode: "numeric",
-              placeholder: "صفحه",
-              w: "100px",
-              value: p,
-              onFocus: () => {
-                d(!0), f(null), o("");
-              },
-              onChange: (n) => {
-                const t = n.target.value, s = C(t).replace(/\D/g, "");
-                o(e(s));
-              },
-              onBlur: () => {
-                p || (o(e(i)), d(!1), f(null));
-              },
-              onKeyDown: (n) => {
-                n.key === "Enter" && k();
-              },
-              textAlign: "center",
-              color: "#1D2939",
-              px: 1,
-              minW: 0,
-              dir: "ltr"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ x(w, { spacing: 2, whiteSpace: "nowrap", children: [
-          /* @__PURE__ */ l(u, { fontWeight: "bold", children: "تعداد کل:" }),
-          /* @__PURE__ */ l(u, { children: e(I) })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  V as P
-};
diff --git a/dist/chunks/Pagination-DjllHYU8.js b/dist/chunks/Pagination-DjllHYU8.js
new file mode 100644
index 0000000..380cb14
--- /dev/null
+++ b/dist/chunks/Pagination-DjllHYU8.js
@@ -0,0 +1,196 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { forwardRef as D, useState as k, useRef as L, useEffect as y } from "react";
+import { HStack as v, Text as u, IconButton as B, Button as S, Input as W } from "@chakra-ui/react";
+import { toFaDigits as t, toEnDigits as C } from "../utils.js";
+const A = D(
+  ({ size: i = 24, title: o, children: h, ...l }, r) => /* @__PURE__ */ a(
+    "svg",
+    {
+      ref: r,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: i,
+      height: i,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...l,
+      children: [
+        o && /* @__PURE__ */ n("title", { children: o }),
+        /* @__PURE__ */ n("path", { d: "m15 18-6-6 6-6" }),
+        h
+      ]
+    }
+  )
+);
+A.displayName = "ChevronLeft";
+const I = D(
+  ({ size: i = 24, title: o, children: h, ...l }, r) => /* @__PURE__ */ a(
+    "svg",
+    {
+      ref: r,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: i,
+      height: i,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...l,
+      children: [
+        o && /* @__PURE__ */ n("title", { children: o }),
+        /* @__PURE__ */ n("path", { d: "m9 18 6-6-6-6" }),
+        h
+      ]
+    }
+  )
+);
+I.displayName = "ChevronRight";
+const T = ({
+  currentPage: i,
+  totalPages: o,
+  totalCount: h,
+  onPageChange: l
+}) => {
+  const [r, s] = k(t(i)), [w, p] = k(!1), [m, f] = k(null), x = L(null), N = Array.from(
+    /* @__PURE__ */ new Set([1, i, i + 1, o])
+  ).filter((e) => e >= 1 && e <= o).sort((e, c) => e - c);
+  y(() => {
+    if (m !== null) {
+      i === m && (f(null), p(!1), s(t(i)));
+      return;
+    }
+    w || s(t(i));
+  }, [i, w, m]), y(() => {
+    if (!w || !r || m !== null) return;
+    const e = parseInt(C(r), 10);
+    if (isNaN(e)) return;
+    const c = setTimeout(() => {
+      var b;
+      const d = Math.min(Math.max(e, 1), o);
+      d !== i ? (f(d), s(t(d)), l(d)) : (p(!1), s(t(i))), (b = x.current) == null || b.blur();
+    }, 1e3);
+    return () => clearTimeout(c);
+  }, [
+    r,
+    w,
+    m,
+    o,
+    i,
+    l
+  ]);
+  const j = () => {
+    var d, b;
+    const e = parseInt(C(r), 10);
+    if (isNaN(e)) {
+      s(t(i)), p(!1), f(null), (d = x.current) == null || d.blur();
+      return;
+    }
+    const c = Math.min(Math.max(e, 1), o);
+    c !== i ? (f(c), s(t(c)), l(c)) : (s(t(i)), p(!1), f(null)), (b = x.current) == null || b.blur();
+  };
+  return o === 0 || !h ? null : /* @__PURE__ */ a(
+    v,
+    {
+      justifyContent: "space-around",
+      backgroundColor: "white",
+      py: "10px",
+      px: "16px",
+      rounded: "lg",
+      border: "1px",
+      borderColor: "blue.200",
+      w: "100%",
+      children: [
+        /* @__PURE__ */ a(v, { spacing: 2, whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ n(u, { fontWeight: "bold", children: "صفحه" }),
+          /* @__PURE__ */ n(u, { children: t(i) }),
+          /* @__PURE__ */ n(u, { fontWeight: "bold", children: "از" }),
+          /* @__PURE__ */ n(u, { children: t(o) })
+        ] }),
+        /* @__PURE__ */ a(v, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
+          /* @__PURE__ */ n(
+            B,
+            {
+              size: "md",
+              bg: "#e6e6f1",
+              color: "#4B49AC",
+              _hover: { bg: "#cbcbe8" },
+              onClick: () => l(i - 1),
+              isDisabled: i === 1,
+              icon: /* @__PURE__ */ n(I, {}),
+              "aria-label": "صفحه قبلی"
+            }
+          ),
+          N.map((e) => /* @__PURE__ */ n(
+            S,
+            {
+              size: "md",
+              bg: i === e ? "#4B49AC" : "#e6e6f1",
+              color: i === e ? "#e6e6f1" : "#4B49AC",
+              _hover: { bg: i === e ? "#4B49AC" : "#cbcbe8" },
+              onClick: () => l(e),
+              variant: "soft",
+              children: t(e)
+            },
+            e
+          )),
+          /* @__PURE__ */ n(
+            B,
+            {
+              size: "md",
+              bg: "#e6e6f1",
+              color: "#4B49AC",
+              _hover: { bg: "#cbcbe8" },
+              onClick: () => l(i + 1),
+              isDisabled: i === o,
+              icon: /* @__PURE__ */ n(A, {}),
+              "aria-label": "صفحه بعدی"
+            }
+          ),
+          /* @__PURE__ */ n(
+            W,
+            {
+              ref: x,
+              type: "text",
+              inputMode: "numeric",
+              placeholder: "صفحه",
+              w: "100px",
+              value: r,
+              onFocus: () => {
+                p(!0), f(null), s("");
+              },
+              onChange: (e) => {
+                const c = e.target.value, d = C(c).replace(/\D/g, "");
+                s(t(d));
+              },
+              onBlur: () => {
+                r || (s(t(i)), p(!1), f(null));
+              },
+              onKeyDown: (e) => {
+                e.key === "Enter" && j();
+              },
+              textAlign: "center",
+              color: "#1D2939",
+              px: 1,
+              minW: 0,
+              dir: "ltr"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(v, { spacing: 2, whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ n(u, { fontWeight: "bold", children: "تعداد کل:" }),
+          /* @__PURE__ */ n(u, { children: t(h) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  I as C,
+  T as P,
+  A as a
+};
diff --git a/dist/pagination.js b/dist/pagination.js
index aaf0527..2f9bc84 100644
--- a/dist/pagination.js
+++ b/dist/pagination.js
@@ -1,17 +1,17 @@
-import { jsxs as I, jsx as s } from "react/jsx-runtime";
-import { useState as C, useRef as N, useEffect as v, useCallback as E } from "react";
-import { HStack as y, IconButton as A, Button as g, Input as j, Text as M } from "@chakra-ui/react";
-import { IoChevronForwardOutline as z, IoChevronBackOutline as S } from "react-icons/io5/index.js";
-import { toFaDigits as f, toEnDigits as k } from "./utils.js";
-import { P as G } from "./chunks/Pagination-BFHGSAKW.js";
-const L = ({
+import { jsxs as A, jsx as s } from "react/jsx-runtime";
+import { useState as B, useRef as g, useEffect as v, useCallback as E } from "react";
+import { HStack as y, IconButton as I, Button as N, Input as j, Text as M } from "@chakra-ui/react";
+import { toFaDigits as f, toEnDigits as D } from "./utils.js";
+import { C as z, a as S } from "./chunks/Pagination-DjllHYU8.js";
+import { P as J } from "./chunks/Pagination-DjllHYU8.js";
+const K = ({
   currentPage: e,
-  totalPages: l,
-  totalCount: D,
+  totalPages: t,
+  totalCount: k,
   onPageChange: a
 }) => {
-  const [r, n] = C(f(e)), [d, c] = C(!1), [b, o] = C(null), x = N(null), h = [.../* @__PURE__ */ new Set([1, e, l])].filter(
-    (i) => i >= 1 && i <= l
+  const [r, n] = B(f(e)), [d, c] = B(!1), [b, o] = B(null), x = g(null), h = [.../* @__PURE__ */ new Set([1, e, t])].filter(
+    (i) => i >= 1 && i <= t
   );
   v(() => {
     if (b !== null) {
@@ -21,33 +21,33 @@ const L = ({
     d || n(f(e));
   }, [e, d, b]), v(() => {
     if (!d || !r || b !== null) return;
-    const i = parseInt(k(r), 10);
+    const i = parseInt(D(r), 10);
     if (isNaN(i)) return;
     const m = setTimeout(() => {
-      var B;
-      const u = Math.min(Math.max(i, 1), l);
-      u !== e ? (o(u), n(f(u)), a(u)) : (c(!1), n(f(e))), (B = x.current) == null || B.blur();
+      var C;
+      const u = Math.min(Math.max(i, 1), t);
+      u !== e ? (o(u), n(f(u)), a(u)) : (c(!1), n(f(e))), (C = x.current) == null || C.blur();
     }, 1e3);
     return () => clearTimeout(m);
   }, [
     r,
     d,
     b,
-    l,
+    t,
     e,
     a
   ]);
   const w = () => {
-    var u, B;
-    const i = parseInt(k(r), 10);
+    var u, C;
+    const i = parseInt(D(r), 10);
     if (isNaN(i)) {
       n(f(e)), c(!1), o(null), (u = x.current) == null || u.blur();
       return;
     }
-    const m = Math.min(Math.max(i, 1), l);
-    m !== e ? (o(m), n(f(m)), a(m)) : (n(f(e)), c(!1), o(null)), (B = x.current) == null || B.blur();
+    const m = Math.min(Math.max(i, 1), t);
+    m !== e ? (o(m), n(f(m)), a(m)) : (n(f(e)), c(!1), o(null)), (C = x.current) == null || C.blur();
   };
-  return l === 0 || !D ? null : /* @__PURE__ */ I(
+  return t === 0 || !k ? null : /* @__PURE__ */ A(
     y,
     {
       justifyContent: "space-around",
@@ -59,9 +59,9 @@ const L = ({
       borderColor: "blue.200",
       w: "100%",
       children: [
-        /* @__PURE__ */ I(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ A(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
           /* @__PURE__ */ s(
-            A,
+            I,
             {
               size: "md",
               bg: "#e6e6f1",
@@ -74,7 +74,7 @@ const L = ({
             }
           ),
           h.map((i) => /* @__PURE__ */ s(
-            g,
+            N,
             {
               size: "md",
               px: 2,
@@ -88,14 +88,14 @@ const L = ({
             i
           )),
           /* @__PURE__ */ s(
-            A,
+            I,
             {
               size: "md",
               bg: "#e6e6f1",
               color: "#4B49AC",
               _hover: { bg: "#cbcbe8" },
               onClick: () => a(e + 1),
-              isDisabled: e === l,
+              isDisabled: e === t,
               icon: /* @__PURE__ */ s(S, {}),
               "aria-label": "صفحه بعدی"
             }
@@ -113,7 +113,7 @@ const L = ({
                 c(!0), o(null), n("");
               },
               onChange: (i) => {
-                const m = i.target.value, u = k(m).replace(/\D/g, "");
+                const m = i.target.value, u = D(m).replace(/\D/g, "");
                 n(f(u));
               },
               onBlur: () => {
@@ -130,67 +130,67 @@ const L = ({
             }
           )
         ] }),
-        /* @__PURE__ */ I(y, { spacing: 2, children: [
+        /* @__PURE__ */ A(y, { spacing: 2, children: [
           /* @__PURE__ */ s(M, { w: "auto", fontWeight: "bold", whiteSpace: "nowrap", children: "تعداد کل:" }),
-          /* @__PURE__ */ s(M, { children: f(D) })
+          /* @__PURE__ */ s(M, { children: f(k) })
         ] })
       ]
     }
   );
-}, O = ({
+}, H = ({
   currentPage: e,
-  totalPages: l,
-  totalCount: D,
+  totalPages: t,
+  totalCount: k,
   onPageChange: a
 }) => {
-  const [r, n] = C(""), [d, c] = C(!1), [b, o] = C(null), x = N(null), h = b ?? e, w = E(
-    (t) => {
-      const p = Math.min(Math.max(t, 1), l);
+  const [r, n] = B(""), [d, c] = B(!1), [b, o] = B(null), x = g(null), h = b ?? e, w = E(
+    (l) => {
+      const p = Math.min(Math.max(l, 1), t);
       c(!1), n(""), o(null), p !== e && a(p);
     },
-    [e, l, a]
+    [e, t, a]
   ), i = E(() => {
     if (!r) {
       c(!1), n(""), o(null);
       return;
     }
-    const t = parseInt(k(r), 10);
-    if (isNaN(t)) {
+    const l = parseInt(D(r), 10);
+    if (isNaN(l)) {
       c(!1), n(""), o(null);
       return;
     }
-    const p = Math.min(Math.max(t, 1), l);
+    const p = Math.min(Math.max(l, 1), t);
     c(!1), n(""), p !== e ? (o(p), a(p)) : o(null);
-  }, [r, e, l, a]);
+  }, [r, e, t, a]);
   v(() => {
-    var t;
-    d && ((t = x.current) == null || t.focus());
+    var l;
+    d && ((l = x.current) == null || l.focus());
   }, [d]), v(() => {
     b !== null && e === b && o(null);
   }, [e, b]), v(() => {
     if (!d || !r) return;
-    const t = setTimeout(() => {
+    const l = setTimeout(() => {
       i();
     }, 1e3);
-    return () => clearTimeout(t);
+    return () => clearTimeout(l);
   }, [r, d, i]);
   const m = () => {
     o(null), n(""), c(!0);
-  }, u = (t, p = !1) => /* @__PURE__ */ s(
-    g,
+  }, u = (l, p = !1) => /* @__PURE__ */ s(
+    N,
     {
       size: "md",
       bg: p ? "#4B49AC" : "#e6e6f1",
       color: p ? "#e6e6f1" : "#4B49AC",
       _hover: { bg: p ? "#4B49AC" : "#cbcbe8" },
-      onClick: p ? m : () => w(t),
+      onClick: p ? m : () => w(l),
       variant: "soft",
-      children: f(t)
+      children: f(l)
     },
-    t
+    l
   );
-  if (l === 0 || !D) return null;
-  const B = l > 1 && h !== 1, T = l > 1 && h !== l;
+  if (t === 0 || !k) return null;
+  const C = t > 1 && h !== 1, T = t > 1 && h !== t;
   return /* @__PURE__ */ s(
     y,
     {
@@ -202,9 +202,9 @@ const L = ({
       border: "1px",
       borderColor: "blue.200",
       w: "100%",
-      children: /* @__PURE__ */ I(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
+      children: /* @__PURE__ */ A(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
         /* @__PURE__ */ s(
-          A,
+          I,
           {
             size: "md",
             bg: "#e6e6f1",
@@ -216,7 +216,7 @@ const L = ({
             "aria-label": "صفحه قبلی"
           }
         ),
-        B && u(1),
+        C && u(1),
         d ? /* @__PURE__ */ s(
           j,
           {
@@ -226,15 +226,15 @@ const L = ({
             placeholder: "صفحه",
             w: "48px",
             value: r,
-            onChange: (t) => {
-              const p = t.target.value, V = k(p).replace(/\D/g, "");
+            onChange: (l) => {
+              const p = l.target.value, V = D(p).replace(/\D/g, "");
               n(f(V));
             },
             onBlur: () => {
               r ? i() : (n(""), c(!1), o(null));
             },
-            onKeyDown: (t) => {
-              t.key === "Enter" && i(), t.key === "Escape" && (n(""), c(!1), o(null));
+            onKeyDown: (l) => {
+              l.key === "Enter" && i(), l.key === "Escape" && (n(""), c(!1), o(null));
             },
             textAlign: "center",
             color: "#1D2939",
@@ -243,16 +243,16 @@ const L = ({
             dir: "ltr"
           }
         ) : u(h, !0),
-        T && u(l),
+        T && u(t),
         /* @__PURE__ */ s(
-          A,
+          I,
           {
             size: "md",
             bg: "#e6e6f1",
             color: "#4B49AC",
             _hover: { bg: "#cbcbe8" },
             onClick: () => w(h + 1),
-            isDisabled: h === l,
+            isDisabled: h === t,
             icon: /* @__PURE__ */ s(S, {}),
             "aria-label": "صفحه بعدی"
           }
@@ -262,7 +262,7 @@ const L = ({
   );
 };
 export {
-  L as LightPagination,
-  G as Pagination,
-  O as SimplePagination
+  K as LightPagination,
+  J as Pagination,
+  H as SimplePagination
 };
diff --git a/dist/table.js b/dist/table.js
index cf2efa9..3dd98bb 100644
--- a/dist/table.js
+++ b/dist/table.js
@@ -1,6 +1,6 @@
 import { jsx as r, jsxs as X, Fragment as ne } from "react/jsx-runtime";
 import { VStack as oe, Box as _, Tbody as re, Tr as H, Td as F, Text as R, Thead as le, Th as ce, Table as se, Checkbox as W, HStack as Y, Spacer as ie } from "@chakra-ui/react";
-import { P as ue } from "./chunks/Pagination-BFHGSAKW.js";
+import { P as ue } from "./chunks/Pagination-DjllHYU8.js";
 import { toFaDigits as q } from "./utils.js";
 import { useReactTable as ae, getCoreRowModel as de, flexRender as J } from "@tanstack/react-table";
 import { useMemo as P, useCallback as p, useState as me, useRef as fe, useEffect as ge, createContext as he, useContext as be } from "react";
diff --git a/src/icons/ChevronLeft.jsx b/src/icons/ChevronLeft.jsx
new file mode 100644
index 0000000..335cf56
--- /dev/null
+++ b/src/icons/ChevronLeft.jsx
@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+
+export const ChevronLeft = forwardRef(
+  ({ size = 24, title, children, ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        {title && <title>{title}</title>}
+        <path d="m15 18-6-6 6-6" />
+        {children}
+      </svg>
+    );
+  },
+);
+
+ChevronLeft.displayName = "ChevronLeft";
diff --git a/src/icons/ChevronRight.jsx b/src/icons/ChevronRight.jsx
new file mode 100644
index 0000000..6e4c040
--- /dev/null
+++ b/src/icons/ChevronRight.jsx
@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+
+export const ChevronRight = forwardRef(
+  ({ size = 24, title, children, ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        {title && <title>{title}</title>}
+        <path d="m9 18 6-6-6-6" />
+        {children}
+      </svg>
+    );
+  },
+);
+
+ChevronRight.displayName = "ChevronRight";
diff --git a/src/pagination/LightPagination.jsx b/src/pagination/LightPagination.jsx
index e8fd922..99dc676 100644
--- a/src/pagination/LightPagination.jsx
+++ b/src/pagination/LightPagination.jsx
@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { Button, HStack, IconButton, Input, Text } from "@chakra-ui/react";
-import { IoChevronBackOutline, IoChevronForwardOutline } from "react-icons/io5/index.js";
 import { toEnDigits, toFaDigits } from "../utils/numbers.js";
+import { ChevronLeft } from "../icons/ChevronLeft.jsx";
+import { ChevronRight } from "../icons/ChevronRight.jsx";
 
 export const LightPagination = ({
   currentPage,
@@ -113,7 +114,7 @@ export const LightPagination = ({
           _hover={{ bg: "#cbcbe8" }}
           onClick={() => onPageChange(currentPage - 1)}
           isDisabled={currentPage === 1}
-          icon={<IoChevronForwardOutline />}
+          icon={<ChevronRight />}
           aria-label="صفحه قبلی"
         />
 
@@ -139,7 +140,7 @@ export const LightPagination = ({
           _hover={{ bg: "#cbcbe8" }}
           onClick={() => onPageChange(currentPage + 1)}
           isDisabled={currentPage === totalPages}
-          icon={<IoChevronBackOutline />}
+          icon={<ChevronLeft />}
           aria-label="صفحه بعدی"
         />
 
diff --git a/src/pagination/Pagination.jsx b/src/pagination/Pagination.jsx
index 69f4b5a..12ec847 100644
--- a/src/pagination/Pagination.jsx
+++ b/src/pagination/Pagination.jsx
@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { Button, HStack, IconButton, Input, Text } from "@chakra-ui/react";
-import { IoChevronBackOutline, IoChevronForwardOutline } from "react-icons/io5/index.js";
 import { toEnDigits, toFaDigits } from "../utils/numbers.js";
+import { ChevronRight } from "../icons/ChevronRight.jsx";
+import { ChevronLeft } from "../icons/ChevronLeft.jsx";
 
 export const Pagination = ({
   currentPage,
@@ -122,7 +123,7 @@ export const Pagination = ({
           _hover={{ bg: "#cbcbe8" }}
           onClick={() => onPageChange(currentPage - 1)}
           isDisabled={currentPage === 1}
-          icon={<IoChevronForwardOutline />}
+          icon={<ChevronRight />}
           aria-label="صفحه قبلی"
         />
 
@@ -147,7 +148,7 @@ export const Pagination = ({
           _hover={{ bg: "#cbcbe8" }}
           onClick={() => onPageChange(currentPage + 1)}
           isDisabled={currentPage === totalPages}
-          icon={<IoChevronBackOutline />}
+          icon={<ChevronLeft />}
           aria-label="صفحه بعدی"
         />
 
diff --git a/src/pagination/SimplePagination.jsx b/src/pagination/SimplePagination.jsx
index 447228b..0985745 100644
--- a/src/pagination/SimplePagination.jsx
+++ b/src/pagination/SimplePagination.jsx
@@ -1,7 +1,8 @@
 import { Button, HStack, IconButton, Input } from "@chakra-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { IoChevronBackOutline, IoChevronForwardOutline } from "react-icons/io5/index.js";
 import { toEnDigits, toFaDigits } from "../utils/numbers.js";
+import { ChevronLeft } from "../icons/ChevronLeft.jsx";
+import { ChevronRight } from "../icons/ChevronRight.jsx";
 
 export const SimplePagination = ({
   currentPage,
@@ -128,7 +129,7 @@ export const SimplePagination = ({
           _hover={{ bg: "#cbcbe8" }}
           onClick={() => goToPage(visibleCurrentPage - 1)}
           isDisabled={visibleCurrentPage === 1}
-          icon={<IoChevronForwardOutline />}
+          icon={<ChevronRight />}
           aria-label="صفحه قبلی"
         />
 
@@ -186,7 +187,7 @@ export const SimplePagination = ({
           _hover={{ bg: "#cbcbe8" }}
           onClick={() => goToPage(visibleCurrentPage + 1)}
           isDisabled={visibleCurrentPage === totalPages}
-          icon={<IoChevronBackOutline />}
+          icon={<ChevronLeft />}
           aria-label="صفحه بعدی"
         />
       </HStack>