diff --git a/src/views/Home/Download/index.js b/src/views/Home/Download/index.js
index 187bc76..ec413ac 100644
--- a/src/views/Home/Download/index.js
+++ b/src/views/Home/Download/index.js
@@ -59,7 +59,9 @@ const H_DownloadApp = () => {
           <a
             download
             href="https://danovin.ir/app.apk"
-            className="h-download-app-content-mobile"
+            className={`h-download-app-content-mobile d-flex ${
+              window.lang === "en" ? "flex-row-reverse" : ""
+            }`}
           >
             <div className="h-download-app-content-box2-app-img-container">
               <img
diff --git a/src/views/Home/HomeSearch/index.js b/src/views/Home/HomeSearch/index.js
index 1bedfad..20a9900 100644
--- a/src/views/Home/HomeSearch/index.js
+++ b/src/views/Home/HomeSearch/index.js
@@ -58,7 +58,7 @@ class HomeSearch extends Component {
             <img src={dropdown} alt={window.t("فلش")} />
           </div>
         </div>
-        <div className="home-mobile-search  ">
+        <div className="home-mobile-search">
           <input
             ref="input"
             placeholder={window.t("نام یک کتاب را جستجو کنید")}
@@ -71,7 +71,6 @@ class HomeSearch extends Component {
               })
             }
           />
-
           <button
             className="home-mobile-search__submit"
             style={{ float: "left" }}
diff --git a/src/views/Home/HomeSlider/Blog/index.js b/src/views/Home/HomeSlider/Blog/index.js
index c0cb7b9..f9de45e 100644
--- a/src/views/Home/HomeSlider/Blog/index.js
+++ b/src/views/Home/HomeSlider/Blog/index.js
@@ -113,12 +113,19 @@ export default class Simple extends Component {
         ) : null}
         {window.innerWidth < 1000 ? (
           <article
-            className="mobile-slider-blog d-flex flex-column"
+            className={`mobile-slider-blog d-flex flex-column ${
+              window.lang === "en" ? "align-items-end" : ""
+            }`}
             style={{
               height: height,
             }}
           >
-            <Link to={`/blogs/${data.id}`}>
+            <Link
+              to={`/blogs/${data.id}`}
+              className={`d-flex flex-column ${
+                window.lang === "en" ? "align-items-end" : ""
+              }`}
+            >
               {data.type === "image" ? (
                 <div style={{ textAlign: "center" }}>
                   <img
@@ -133,15 +140,25 @@ export default class Simple extends Component {
               {data.type === "audio" ? (
                 <img src={music} alt={data.title} />
               ) : null}
-              <h1>{data.title}</h1>
+              <h1 className={`${window.lang === "en" ? "text-end" : ""}`}>
+                {data.title}
+              </h1>
 
               <h2>
                 <div
                   dangerouslySetInnerHTML={{ __html: data.text }}
-                  style={{ height: 80, overflow: "hidden" }}
+                  style={{
+                    height: 80,
+                    overflow: "hidden",
+                    textAlign: window.lang === "en" ? "left" : "",
+                  }}
                 ></div>
               </h2>
-              <div className="mobile-slider-blog__footer d-flex mt-3">
+              <div
+                className={`mobile-slider-blog__footer d-flex mt-3 ${
+                  window.lang === "en" ? "flex-row-reverse" : ""
+                }`}
+              >
                 <div
                   className={`d-flex ${
                     window.lang === "en" ? "flex-row-reverse" : ""
@@ -149,7 +166,9 @@ export default class Simple extends Component {
                 >
                   {/* <img src={} /> */}
                   <div
-                    className="d-flex flex-column"
+                    className={`d-flex flex-column ${
+                      window.lang === "en" ? "align-items-end" : ""
+                    }`}
                     style={{ fontSize: "12px" }}
                   >
                     <span>
diff --git a/src/views/Home/HomeSlider/index.js b/src/views/Home/HomeSlider/index.js
index 2c4e8fd..c98fcfe 100644
--- a/src/views/Home/HomeSlider/index.js
+++ b/src/views/Home/HomeSlider/index.js
@@ -55,8 +55,16 @@ const SimpleHeader = (props) => {
         </div>
       ) : null}
       {window.innerWidth < 1000 ? (
-        <div className="mobile-home-scroll__header d-flex">
-          <div className="mobile-home-scroll__header--right d-flex">
+        <div
+          className={`mobile-home-scroll__header d-flex ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+        >
+          <div
+            className={`mobile-home-scroll__header--right d-flex ${
+              window.lang === "en" ? "flex-row-reverse" : ""
+            }`}
+          >
             <h1>{props.title}</h1>
             <span></span>
           </div>
@@ -82,8 +90,16 @@ const TabHeader = (props) => {
         </div>
       ) : null}
       {window.innerWidth < 1000 ? (
-        <div className="mobile-home-scroll__header d-flex">
-          <div className="mobile-home-scroll__header--right d-flex">
+        <div
+          className={`mobile-home-scroll__header d-flex ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+        >
+          <div
+            className={`mobile-home-scroll__header--right d-flex ${
+              window.lang === "en" ? "flex-row-reverse" : ""
+            }`}
+          >
             <h1>{props.title}</h1>
             <span></span>
           </div>
diff --git a/src/views/Home/HomeStatic/index.js b/src/views/Home/HomeStatic/index.js
index 4a6d65e..00a8527 100644
--- a/src/views/Home/HomeStatic/index.js
+++ b/src/views/Home/HomeStatic/index.js
@@ -102,14 +102,20 @@ const Item = (props) => {
             width: `${props.data.width}%`,
             height: props.height,
           }}
-          className={"home-static__list2--item"}
+          className={`home-static__list2--item  ${
+            window.lang === "en" ? "d-flex" : ""
+          }`}
         >
           <img
             src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
             alt={window.t("عکس")}
             style={{ float: "left" }}
           />
-          <div className="d-flex flex-column">
+          <div
+            className={`d-flex flex-column ${
+              window.lang === "en" ? "align-items-end" : ""
+            }`}
+          >
             <h2 style={{ color: "#02733c", fontSize: 12 }}>
               {props.data.topText}
             </h2>
diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
index 7dd5057..3b30f19 100644
--- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
+++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
@@ -169,7 +169,11 @@ class NavbarDrawer extends Component {
 
     let score = 2;
     return (
-      <div className="navbar-drawer d-flex flex-column">
+      <div
+        className={`navbar-drawer d-flex flex-column ${
+          window.lang === "en" ? "align-items-end" : ""
+        }`}
+      >
         {statusx ? (
           <div className="navbar-drawer__header d-flex align-items-center">
             <>
@@ -218,7 +222,11 @@ class NavbarDrawer extends Component {
           </div>
         ) : null}
         {this.state.dropdown ? (
-          <div className="navbar-drawer__dropdown d-flex flex-column">
+          <div
+            className={`navbar-drawer__dropdown d-flex flex-column ${
+              window.lang === "en" ? "align-items-start" : ""
+            }`}
+          >
             {/* {this.props.users.map((item, i) => (
               <User data={item} key={i} />
             ))} */}
@@ -247,9 +255,13 @@ class NavbarDrawer extends Component {
                 (() => (item.link === "" ? toast.error(item.toast) : null))
               }
             >
-              <div className="navbar-drawer__bottom--link d-flex">
+              <div
+                className={`navbar-drawer__bottom--link d-flex align-items-center ${
+                  window.lang === "en" ? "flex-row-reverse" : ""
+                }`}
+              >
                 {item.icon}
-                <div>{item.name}</div>
+                <div style={{ margin: "0px 10px" }}>{item.name}</div>
                 {item.message && <div class="badge">{item.message}</div>}
               </div>
             </Link>
diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
index 51432ab..289d1fd 100644
--- a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
+++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
@@ -90,7 +90,7 @@
       & img {
         width: 20px;
         height: 20px;
-        margin-left: 20px;
+        // margin-left: 20px;
       }
       & .badge {
         background-color: red;
diff --git a/src/views/Home/Navbar/Mobile/index.js b/src/views/Home/Navbar/Mobile/index.js
index 94bc321..fc8745a 100644
--- a/src/views/Home/Navbar/Mobile/index.js
+++ b/src/views/Home/Navbar/Mobile/index.js
@@ -86,56 +86,75 @@ export default function MobileNavbar(props) {
   );
   if (!status)
     return (
-      <nav className="mobile-navbar d-flex">
+      <nav
+        className={`mobile-navbar d-flex ${
+          window.lang === "en" ? "flex-row-reverse" : ""
+        }`}
+        style={{ width: "100%" }}
+      >
         <div
-          className={`d-flex ${window.lang === "en" ? "flex-row-reverse" : ""}`}
+          className={`d-flex justify-content-between align-items-center ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+          style={{ width: "100%" }}
         >
           <div
             className="mobile-navbar__menu"
-            style={{ marginTop: 10 }}
+            // style={{ marginTop: 10 }}
             onClick={toggleDrawer("right", true)}
           >
             <img src={hamburger} alt={window.t("منو")} />
+            {/* <Link to="/" className="mobile-navbar__logo2" style={{}}>
+              <img src={logo} alt={window.t("لوگو")} className="logo" />
+            </Link> */}
           </div>
-          <Link to="/" className="mobile-navbar__logo2" style={{}}>
-            <img src={logo} alt={window.t("لوگو")} className="logo" />
-          </Link>
-        </div>
-        <div className="mobile-navbar__left d-flex" style={{ marginLeft: 10 }}>
-          <select
-            className="language-select"
-            onChange={(e) => {
-              window.localStorage.setItem("language", e.target.value);
-              window.location.reload();
-            }}
-          >
-            {[
-              { key: "فارسی", lang: "fa", default: true },
-              { key: "English", lang: "en" },
-              { key: "العربیه", lang: "ar" },
-            ].map((el, index) => (
-              <option
-                key={el.lang}
-                value={el.lang}
-                selected={
-                  (!window.lang && el.default) || el.lang == window.lang
-                }
-              >
-                {el.key}
-              </option>
-            ))}
-          </select>
-          <Link
-            style={{ fontSize: 12 }}
-            to={"/auth"}
-            className="mobile-navbar__signup"
+          <div
+            className={`d-flex align-items-center ${
+              window.lang === "en" ? "flex-row-reverse" : ""
+            }`}
           >
-            {window.t("ورود یا ثبت‌نام")}
-          </Link>
+            <select
+              className="language-select"
+              onChange={(e) => {
+                window.localStorage.setItem("language", e.target.value);
+                window.location.reload();
+              }}
+            >
+              {[
+                { key: "فارسی", lang: "fa", default: true },
+                { key: "English", lang: "en" },
+                { key: "العربیه", lang: "ar" },
+              ].map((el, index) => (
+                <option
+                  key={el.lang}
+                  value={el.lang}
+                  selected={
+                    (!window.lang && el.default) || el.lang == window.lang
+                  }
+                >
+                  {el.key}
+                </option>
+              ))}
+            </select>
+            <Link
+              style={{ fontSize: 12, padding: "8px 5px" }}
+              to={"/auth"}
+              className="mobile-navbar__signup"
+            >
+              {window.t("ورود یا ثبت‌نام")}
+            </Link>
+          </div>
+        </div>
+        <div
+          className={`mobile-navbar__left d-flex ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+          style={{ marginLeft: 10 }}
+        >
           {page !== "home" ? <BackButton /> : null}
         </div>
         <SwipeableDrawer
-          anchor="right"
+          anchor={window.lang === "en" ? "left" : "right"}
           open={state["right"]}
           onClose={toggleDrawer("right", false)}
           onOpen={toggleDrawer("right", true)}
diff --git a/src/views/Products/BreadCrumb/index.js b/src/views/Products/BreadCrumb/index.js
index f24f120..9c87835 100644
--- a/src/views/Products/BreadCrumb/index.js
+++ b/src/views/Products/BreadCrumb/index.js
@@ -13,7 +13,10 @@ const fontSize = {
 
 export default function ActiveLastBreadcrumb() {
   return (
-    <Breadcrumbs aria-label="breadcrumb">
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      style={{ direction: window.lang === "en" ? "ltr" : "" }}
+    >
       <Link
         to={"/"}
         style={{
diff --git a/src/views/Products/Filters/AppliedFilters/index.js b/src/views/Products/Filters/AppliedFilters/index.js
index 844569a..1460b14 100644
--- a/src/views/Products/Filters/AppliedFilters/index.js
+++ b/src/views/Products/Filters/AppliedFilters/index.js
@@ -32,14 +32,35 @@ export default class AppliedFilters extends React.Component {
   render() {
     const { data } = this.props;
     return (
-      <div className="products-filters-applied d-flex flex-column">
-        <header className="products-filters-applied__header d-flex align-items-center">
+      <div
+        className={`products-filters-applied d-flex flex-column ${
+          window.lang === "en" ? "align-items-start" : ""
+        }`}
+        style={{
+          width: "100%",
+        }}
+      >
+        <header
+          className={`products-filters-applied__header d-flex align-items-center ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+          style={{
+            width: "100%",
+          }}
+        >
           <span></span>
           <h2 style={{ fontSize: fontSize.h2 }}>
             {window.t("فیلترهای اعمال شده")}
           </h2>
         </header>
-        <div className="products-filters-applied__items d-flex flex-wrap">
+        <div
+          className={`products-filters-applied__items d-flex flex-wrap ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+          style={{
+            width: "100%",
+          }}
+        >
           {data.level.map((item, i) => (
             <Item name={"level"} data={item} key={i} parent={this} />
           ))}
diff --git a/src/views/Products/Filters/TypicalFilters/index.js b/src/views/Products/Filters/TypicalFilters/index.js
index 8217982..93d2905 100644
--- a/src/views/Products/Filters/TypicalFilters/index.js
+++ b/src/views/Products/Filters/TypicalFilters/index.js
@@ -36,12 +36,36 @@ export default class TypicalFilters extends React.Component {
   render() {
     const { data, title, theme } = this.props;
     return (
-      <div className="products-filters-typical d-flex flex-column">
-        <header className="products-filters-typical__header d-flex align-items-center">
-          <span style={{ background: theme }}></span>
+      <div
+        className={`products-filters-typical d-flex flex-column ${
+          window.lang === "en" ? "align-items-end" : ""
+        }`}
+        style={{
+          width: "100%",
+        }}
+      >
+        <header
+          className={`products-filters-typical__header d-flex align-items-center ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+        >
+          <span
+            style={{
+              background: theme,
+              marginLeft: window.lang === "en" ? "" : 5,
+              marginRight: window.lang === "en" ? 5 : "",
+            }}
+          ></span>
           <h2 style={{ fontSize: 15 }}>{title}</h2>
         </header>
-        <div className="products-filters-typical__items d-flex flex-column">
+        <div
+          className={`products-filters-typical__items d-flex flex-column ${
+            window.lang === "en" ? "align-items-end" : ""
+          }`}
+          style={{
+            width: window.lang === "en" ? "90%" : "auto",
+          }}
+        >
           {data.map((item, i) => (
             <Item data={item} key={i} parent={this} />
           ))}
@@ -72,7 +96,11 @@ const Item = (props) => {
     return available;
   };
   return (
-    <div className="d-flex align-items-center mt-2">
+    <div
+      className={`d-flex align-items-center mt-2 ${
+        window.lang === "en" ? "flex-row-reverse" : ""
+      }`}
+    >
       <FormControlLabel
         control={
           <Checkbox
@@ -84,7 +112,7 @@ const Item = (props) => {
         checked={checkHandler(data, parent.props.name)}
         onChange={() => parent.onChange(parent.props.name, data)}
       />
-      <strong style={{ fontSize: 15 }}>{data}</strong>
+      <strong style={{ fontSize: 15, margin: "0px 10px" }}>{data}</strong>
     </div>
   );
 };
diff --git a/src/views/Products/Filters/index.js b/src/views/Products/Filters/index.js
index bd84d55..575c58d 100644
--- a/src/views/Products/Filters/index.js
+++ b/src/views/Products/Filters/index.js
@@ -8,7 +8,14 @@ export default class Filtesrs extends React.Component {
   render() {
     const { parent } = this.props;
     return (
-      <div className="products-filters d-flex flex-column">
+      <div
+        className={`products-filters d-flex flex-column ${
+          window.lang === "en" ? "align-items-end" : ""
+        }`}
+        style={{
+          width: "100%",
+        }}
+      >
         {parent.state.selectedFilters.level.length !== 0 ||
         parent.state.selectedFilters.subject.length !== 0 ? (
           <AppliedFiltesrs
diff --git a/src/views/Products/List/index.js b/src/views/Products/List/index.js
index 75731fc..419dcbd 100644
--- a/src/views/Products/List/index.js
+++ b/src/views/Products/List/index.js
@@ -16,7 +16,11 @@ class List extends React.Component {
     let { filterResult, loading } = this.props;
 
     return window.innerWidth > 1000 ? (
-      <div className="products-list d-flex flex-wrap">
+      <div
+        className={`products-list d-flex flex-wrap ${
+          window.lang === "en" ? "flex-row-reverse" : ""
+        }`}
+      >
         {!loading ? (
           filterResult?.length > 0 ? (
             (Array.isArray(filterResult) ? filterResult : []).map((item, i) => (
diff --git a/src/views/Products/Sort/index.js b/src/views/Products/Sort/index.js
index 2af8670..a8f848c 100644
--- a/src/views/Products/Sort/index.js
+++ b/src/views/Products/Sort/index.js
@@ -14,12 +14,23 @@ export default class Sort extends React.Component {
   render() {
     const { parent, selectedSort } = this.props;
     return (
-      <div className="products-sort d-flex align-items-center">
+      <div
+        className={`products-sort d-flex align-items-center  ${
+          window.lang === "en" ? "flex-row-reverse" : ""
+        }`}
+        style={{
+          width: window.lang === "en" ? "100%" : "",
+        }}
+      >
         <SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} />
         <span style={{ fontSize: fontSize.span }}>
           {window.t("مرتب سازی بر اساس")}
         </span>
-        <ul className="d-flex align-items-center mr-2">
+        <ul
+          className={`d-flex align-items-center mr-2 ${
+            window.lang === "en" ? "flex-row-reverse" : ""
+          }`}
+        >
           {parent.props.sortItems.map((item, i) => (
             <Item
               data={item}
diff --git a/src/views/Products/index.js b/src/views/Products/index.js
index 78e37ff..130a06a 100644
--- a/src/views/Products/index.js
+++ b/src/views/Products/index.js
@@ -64,14 +64,26 @@ class Products extends Component {
       <>
         {window.innerWidth > 1000 ? (
           <>
-            <div className="products d-flex flex-column">
+            <div
+              className={`products d-flex flex-column ${
+                window.lang === "en" ? "align-items-end" : ""
+              }`}
+            >
               <Navbar page={"products"} />
               <Breadcrumbs />
-              <div className="products__body d-flex">
+              <div
+                className={`products__body d-flex ${
+                  window.lang === "en" ? "flex-row-reverse" : ""
+                }`}
+              >
                 {this.props.subjects.length > 0 ? (
                   <Filters parent={this} />
                 ) : null}
-                <div className="products__body--left d-flex flex-column">
+                <div
+                  className={`products__body--left d-flex flex-column ${
+                    window.lang === "en" ? "align-items-end" : ""
+                  }`}
+                >
                   <Sort
                     parent={this}
                     selectedSort={this.state.selectedFilters.sort}