diff --git a/dist/index.js b/dist/index.js
index dba1871..a284110 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1,8 +1,8 @@
 import { t as Z, a as w } from "./chunks/Pagination-LRiUo8_9.js";
 import { P as ht, b as mt } from "./chunks/Pagination-LRiUo8_9.js";
-import { jsxs as D, jsx as u } from "react/jsx-runtime";
-import { useState as F, useRef as q, useEffect as y, useCallback as x, createContext as G, useMemo as M, useContext as oe } from "react";
-import { HStack as z, IconButton as Y, Button as V, Input as U, Text as T, extendTheme as ie, withDefaultColorScheme as re, ChakraProvider as Ae, Spinner as se, Box as de, VStack as L, Image as P } from "@chakra-ui/react";
+import { jsxs as z, jsx as u } from "react/jsx-runtime";
+import { useState as F, useRef as q, useEffect as x, useCallback as y, createContext as G, useMemo as M, useContext as oe } from "react";
+import { HStack as D, IconButton as Y, Button as V, Input as U, Text as T, extendTheme as ie, withDefaultColorScheme as re, ChakraProvider as Ae, Spinner as se, Box as de, VStack as L, Image as P } from "@chakra-ui/react";
 import { IoChevronForwardOutline as J, IoChevronBackOutline as k } from "react-icons/io5";
 import le from "keycloak-js";
 import { useQuery as Q, useQueryClient as ue, useMutation as ce, QueryClient as ae, QueryClientProvider as ge } from "@tanstack/react-query";
@@ -17,13 +17,13 @@ const At = ({
   const [l, A] = F(Z(e)), [o, s] = F(!1), [C, d] = F(null), p = q(null), b = [.../* @__PURE__ */ new Set([1, e, t])].filter(
     (i) => i >= 1 && i <= t
   );
-  y(() => {
+  x(() => {
     if (C !== null) {
       e === C && (d(null), s(!1), A(Z(e)));
       return;
     }
     o || A(Z(e));
-  }, [e, o, C]), y(() => {
+  }, [e, o, C]), x(() => {
     if (!o || !l || C !== null) return;
     const i = parseInt(w(l), 10);
     if (isNaN(i)) return;
@@ -51,8 +51,8 @@ const At = ({
     const I = Math.min(Math.max(i, 1), t);
     I !== e ? (d(I), A(Z(I)), r(I)) : (A(Z(e)), s(!1), d(null)), (g = p.current) == null || g.blur();
   };
-  return t === 0 || !n ? null : /* @__PURE__ */ D(
-    z,
+  return t === 0 || !n ? null : /* @__PURE__ */ z(
+    D,
     {
       justifyContent: "space-around",
       backgroundColor: "white",
@@ -63,7 +63,7 @@ const At = ({
       borderColor: "blue.200",
       w: "100%",
       children: [
-        /* @__PURE__ */ D(z, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ z(D, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
           /* @__PURE__ */ u(
             Y,
             {
@@ -134,7 +134,7 @@ const At = ({
             }
           )
         ] }),
-        /* @__PURE__ */ D(z, { spacing: 2, children: [
+        /* @__PURE__ */ z(D, { spacing: 2, children: [
           /* @__PURE__ */ u(T, { w: "auto", fontWeight: "bold", whiteSpace: "nowrap", children: "تعداد کل:" }),
           /* @__PURE__ */ u(T, { children: Z(n) })
         ] })
@@ -147,13 +147,13 @@ const At = ({
   totalCount: n,
   onPageChange: r
 }) => {
-  const [l, A] = F(""), [o, s] = F(!1), [C, d] = F(null), p = q(null), b = C ?? e, h = x(
+  const [l, A] = F(""), [o, s] = F(!1), [C, d] = F(null), p = q(null), b = C ?? e, h = y(
     (m) => {
       const E = Math.min(Math.max(m, 1), t);
       s(!1), A(""), d(null), E !== e && r(E);
     },
     [e, t, r]
-  ), i = x(() => {
+  ), i = y(() => {
     if (!l) {
       s(!1), A(""), d(null);
       return;
@@ -166,12 +166,12 @@ const At = ({
     const E = Math.min(Math.max(m, 1), t);
     s(!1), A(""), E !== e ? (d(E), r(E)) : d(null);
   }, [l, e, t, r]);
-  y(() => {
+  x(() => {
     var m;
     o && ((m = p.current) == null || m.focus());
-  }, [o]), y(() => {
+  }, [o]), x(() => {
     C !== null && e === C && d(null);
-  }, [e, C]), y(() => {
+  }, [e, C]), x(() => {
     if (!o || !l) return;
     const m = setTimeout(() => {
       i();
@@ -196,7 +196,7 @@ const At = ({
   if (t === 0 || !n) return null;
   const g = t > 1 && b !== 1, S = t > 1 && b !== t;
   return /* @__PURE__ */ u(
-    z,
+    D,
     {
       justifyContent: "center",
       backgroundColor: "white",
@@ -206,7 +206,7 @@ const At = ({
       border: "1px",
       borderColor: "blue.200",
       w: "100%",
-      children: /* @__PURE__ */ D(z, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
+      children: /* @__PURE__ */ z(D, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
         /* @__PURE__ */ u(
           Y,
           {
@@ -290,17 +290,17 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
   initOptions: n,
   loading: r = null
 }) => {
-  const [l, A] = F(!1), [o, s] = F(!1), [C, d] = F(null), p = q(!1), b = x(() => {
+  const [l, A] = F(!1), [o, s] = F(!1), [C, d] = F(null), p = q(!1), b = y(() => {
     c && (s(!!c.authenticated), d(c.token ?? null));
   }, []);
-  y(() => (p.current = !0, _({ config: t, initOptions: n }).then((g) => {
+  x(() => (p.current = !0, _({ config: t, initOptions: n }).then((g) => {
     p.current && (s(!!g), d((c == null ? void 0 : c.token) ?? null), A(!0));
   }).catch(() => {
     p.current && (s(!1), d(null), A(!0));
   }), () => {
     p.current = !1;
   }), [t, n]);
-  const h = x(() => c == null ? void 0 : c.login(), []), i = x((g) => c == null ? void 0 : c.logout(g), []), I = x(
+  const h = y(() => c == null ? void 0 : c.login(), []), i = y((g) => c == null ? void 0 : c.logout(g), []), I = y(
     async (g = 30) => {
       if (!c) return !1;
       const S = await c.updateToken(g);
@@ -329,16 +329,16 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
   const A = Se(n), [o, s] = F(
     () => Fe(A)
   ), { data: C, isLoading: d, error: p } = we(n), b = C ?? o;
-  y(() => {
-    C && (ye(A, C), s(C));
+  x(() => {
+    C && (xe(A, C), s(C));
   }, [C, A]);
   const h = M(
-    () => xe(b),
+    () => ye(b),
     [b]
-  ), i = x(
-    (g = "") => De(h, g),
+  ), i = y(
+    (g = "") => ze(h, g),
     [h]
-  ), I = x((g = "") => !i(g), [i]), a = M(
+  ), I = y((g = "") => !i(g), [i]), a = M(
     () => ({
       user: e,
       can: i,
@@ -358,7 +358,7 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
     } catch {
       return;
     }
-}, ye = (e = v, t) => {
+}, xe = (e = v, t) => {
   if (!(typeof window > "u"))
     try {
       localStorage.setItem(e, JSON.stringify(t));
@@ -370,7 +370,7 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
       localStorage.removeItem(e);
     } catch {
     }
-}, xe = (e) => e ? new Set(e.map((t) => t.name)) : /* @__PURE__ */ new Set(), De = (e, t = "") => {
+}, ye = (e) => e ? new Set(e.map((t) => t.name)) : /* @__PURE__ */ new Set(), ze = (e, t = "") => {
   if (!t) return !1;
   if (e.has(t) || [...e].some((r) => r.startsWith(t))) return !0;
   let n = t;
@@ -380,7 +380,7 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
 }, ee = {
   all: ["permissions"],
   list: (e) => [...ee.all, e]
-}, ze = async (e) => {
+}, De = async (e) => {
   if (!(e != null && e.url) || !(e != null && e.clientId))
     throw new Error("Permission config requires url and clientId.");
   const t = f(), n = new URL(e.url);
@@ -401,7 +401,7 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
   return e;
 }, we = (e) => Q({
   queryKey: ee.list(e == null ? void 0 : e.clientId),
-  queryFn: () => ze(e),
+  queryFn: () => De(e),
   enabled: !!(e != null && e.url) && !!(e != null && e.clientId) && H(),
   staleTime: 1 / 0,
   refetchOnWindowFocus: !1,
@@ -418,7 +418,7 @@ const pe = G(null), be = ({ url: e, realm: t, clientId: n }) => (c || (c = new l
   return n && t("admin") ? e : null;
 }, at = ({ children: e }) => {
   const { can: t, isLoading: n } = R();
-  return y(() => {
+  return x(() => {
     n || t("panel_access") || j();
   }, [n, t]), e;
 };
@@ -551,7 +551,7 @@ function gt({
 }
 function Ne() {
   const [e, t] = F(!1), n = q(null);
-  return y(() => {
+  return x(() => {
     if (process.env.NODE_ENV !== "production") return;
     let r;
     const l = async () => {
@@ -611,9 +611,11 @@ const Re = new ae({
     styles: {
       global: {
         html: {
+          fontSize: "14px",
           direction: "rtl"
         },
         body: {
+          bg: "white",
           direction: "rtl"
         },
         "*": {
@@ -681,16 +683,16 @@ function Ct({
       r
     ]
   );
-  if (y(() => {
+  if (x(() => {
     i(!0);
-  }, []), y(() => {
+  }, []), x(() => {
     h && fe(g);
   }, [h, g]), !h)
     return null;
   let S = e;
-  return a && (S = /* @__PURE__ */ u(Ee, { config: g.permission, loading: l, children: S })), I && (S = /* @__PURE__ */ u(Ze, { config: g.keycloak, loading: l, children: S })), /* @__PURE__ */ D(Ae, { theme: Oe, children: [
+  return a && (S = /* @__PURE__ */ u(Ee, { config: g.permission, loading: l, children: S })), I && (S = /* @__PURE__ */ u(Ze, { config: g.keycloak, loading: l, children: S })), /* @__PURE__ */ z(Ae, { theme: Oe, children: [
     /* @__PURE__ */ u(Ge, {}),
-    /* @__PURE__ */ D(ge, { client: Re, children: [
+    /* @__PURE__ */ z(ge, { client: Re, children: [
       A && /* @__PURE__ */ u(Ne, { ...o }),
       S
     ] })
@@ -712,12 +714,12 @@ function Ue({ children: e, ...t }) {
       position: "fixed",
       color: "white",
       ...t,
-      children: /* @__PURE__ */ u(z, { h: "100%", alignItems: "center", justifyContent: "space-between", children: e })
+      children: /* @__PURE__ */ u(D, { h: "100%", alignItems: "center", justifyContent: "space-between", children: e })
     }
   );
 }
 function Le({ children: e, ...t }) {
-  return /* @__PURE__ */ u(z, { alignItems: "center", h: "100%", py: "10px", ...t, children: e });
+  return /* @__PURE__ */ u(D, { alignItems: "center", h: "100%", py: "10px", ...t, children: e });
 }
 function Pe(e) {
   return /* @__PURE__ */ u(P, { loading: "lazy", alt: "logo", maxW: "80px", maxH: "80px", ...e });
@@ -742,7 +744,7 @@ function Qe({ children: e, ...t }) {
   return /* @__PURE__ */ u(T, { ...t, children: e });
 }
 function He({ logoSrc: e = Ve, ...t }) {
-  return /* @__PURE__ */ D(
+  return /* @__PURE__ */ z(
     L,
     {
       w: "fit-content",
@@ -777,23 +779,23 @@ export {
   Ee as PermissionProvider,
   st as SimplePagination,
   te as api,
-  De as checkPermission,
+  ze as checkPermission,
   lt as clearCachedPermissions,
   fe as configureApi,
   gt as createApi,
-  xe as createPermissionSet,
+  ye as createPermissionSet,
   Ye as fetcher,
   Me as getApi,
   Fe as getCachedPermissions,
   f as getKeycloakToken,
-  ze as getPermissions,
+  De as getPermissions,
   _ as initKeycloak,
   H as isKeycloakAuthenticated,
   me as isKeycloakInitialized,
   dt as loginKeycloak,
   j as logoutKeycloak,
   ee as permissionKeys,
-  ye as setCachedPermissions,
+  xe as setCachedPermissions,
   w as toEnDigits,
   Z as toFaDigits,
   mt as toFaNumber,
diff --git a/src/core/style.jsx b/src/core/style.jsx
index 188877e..69daf5f 100644
--- a/src/core/style.jsx
+++ b/src/core/style.jsx
@@ -8,9 +8,11 @@ export const theme = extendTheme(
     styles: {
       global: {
         html: {
+          fontSize: "14px",
           direction: "rtl",
         },
         body: {
+          bg: "white",
           direction: "rtl",
         },
         "*": {