diff --git a/_app.tsx b/_app.tsx
index dda0aac..7fb1a13 100644
--- a/_app.tsx
+++ b/_app.tsx
@@ -1,4 +1,4 @@
-import { Provider } from "react-redux";
+import { Provider, useSelector } from "react-redux";
 // import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { persistor, store } from "../store/store";
@@ -34,7 +34,13 @@ function MyApp({ Component, pageProps }: AppProps) {
     const TRACKING_ID = "G-JEKLX6CZRT";
     ReactGA.initialize(TRACKING_ID);
   }, []);
-
+  useEffect(() => {
+    const isRTL: any = document.documentElement.dir === "rtl";
+    // Load the appropriate global CSS file based on text direction
+    if (isRTL) {
+      import("../styles/pages/CssLayout-rtl.scss");
+    }
+  }, []);
   return (
     <div>
       <Script
diff --git a/cards/CartCard.tsx b/cards/CartCard.tsx
index 35aff7f..f4e7b72 100644
--- a/cards/CartCard.tsx
+++ b/cards/CartCard.tsx
@@ -58,7 +58,7 @@ const CartCard = ({
 
   return (
     <>
-      <div className="d-lg-block d-none " >
+      <div className="d-lg-block d-none ">
         <div className="row text-center cart_wrapper-detail">
           <div className="col-lg-7 text-start">
             <Link
@@ -68,7 +68,9 @@ const CartCard = ({
               <a className="prod_name products-name">{orders.item_name}</a>
             </Link>
             <br />
-            <b className="products-name item-code-line-height ">Item code : {orders.item_code}</b>
+            <b className="products-name item-code-line-height d-inline-flex">
+              Item code :<span>{orders.item_code}</span>
+            </b>
             <p>
               <button
                 className="astext product-font-family line-height"
@@ -76,7 +78,10 @@ const CartCard = ({
                   HandleDeleteCart(orders.item_code, cartListingItems.name)
                 }
               >
-                <Link href="" className="text-primary product-font-family line-height-delete">
+                <Link
+                  href=""
+                  className="text-primary product-font-family line-height-delete"
+                >
                   {selectedMultiLangData?.delete}
                 </Link>
               </button>
@@ -86,14 +91,14 @@ const CartCard = ({
             {orders?.details.length > 0 &&
               orders?.details !== null &&
               (orders?.details[1]?.value !== 0 ? (
-                <p className="text-center price_font_family products-name">
+                <p className="text-center price_font_family products-name d-inline-flex">
                   {orders?.currency_symbol}
                   <span className="text-center products-name">
                     <IndianNumber value={orders.details[1]?.value} />
                   </span>
                 </p>
               ) : (
-                <p className="border button_color price_request products-name ">
+                <p className="border button_color price_request">
                   {selectedMultiLangData?.price_on_request}
                 </p>
               ))}
@@ -131,9 +136,9 @@ const CartCard = ({
             />
           </div> */}
           <div className="col-2 price_font_family">
-            <p className="products-name">
+            <p className="products-name d-inline-flex">
               {orders.currency_symbol}
-              {orders.amount}
+              <span>{orders.amount}</span>
             </p>
           </div>
         </div>
@@ -150,7 +155,8 @@ const CartCard = ({
           <div className="col-5">
             <Link href={`${orders.product_url}`} legacyBehavior>
               <a className="prod_name products-name">{orders.item_name}</a>
-            </Link><br/>
+            </Link>
+            <br />
             <b>{orders.item_code}</b>
             <p className="my-0">
               <button
@@ -158,7 +164,6 @@ const CartCard = ({
                 onClick={() =>
                   HandleDeleteCart(orders.item_code, cartListingItems.name)
                 }
-
               >
                 <Link href="" className="text-primary">
                   {selectedMultiLangData?.delete}
@@ -168,7 +173,11 @@ const CartCard = ({
           </div>
         </div>
         <div className="row">
-          <div className="col-6 fs-4 products-name"> {selectedMultiLangData?.price}</div>:
+          <div className="col-6 fs-4 products-name">
+            {" "}
+            {selectedMultiLangData?.price}
+          </div>
+          :
           <div className="col-5 text-start">
             {orders?.details.length > 0 &&
               orders?.details !== null &&
@@ -188,25 +197,37 @@ const CartCard = ({
           </div>
         </div>
         <div className="row">
-          <div className="col-6 fs-4 products-name">{selectedMultiLangData?.unit_weight}</div>
-          :<div className="col-5 text-start products-name">{orders.weight_per_unit}</div>
+          <div className="col-6 fs-4 products-name">
+            {selectedMultiLangData?.unit_weight}
+          </div>
+          :
+          <div className="col-5 text-start products-name">
+            {orders.weight_per_unit}
+          </div>
         </div>
         <div className="row">
           <div className="col-6 fs-4 products-name">
             {selectedMultiLangData?.total_weight}
           </div>
-          :<div className="col-5 text-start products-name">{orders.total_weight}</div>
+          :
+          <div className="col-5 text-start products-name">
+            {orders.total_weight}
+          </div>
         </div>
         <div className="row">
           <div className="col-6 fs-4 products-name">
-            {selectedMultiLangData?.tax} </div>:
-          <div className="col-5 text-start price_font_family" >
+            {selectedMultiLangData?.tax}{" "}
+          </div>
+          :
+          <div className="col-5 text-start price_font_family">
             {orders.currency_symbol}
             {orders.tax}
           </div>
         </div>
         <div className="row my-5">
-          <div className="col-6 fs-4 products-name">{selectedMultiLangData?.quantity_c} </div>
+          <div className="col-6 fs-4 products-name">
+            {selectedMultiLangData?.quantity_c}{" "}
+          </div>
           :
           <div className="col-5 ">
             <input
@@ -221,7 +242,7 @@ const CartCard = ({
             <button
               type="button"
               className="text-start astext"
-            // onClick={() => UpdateCart(orders.item_code)}
+              // onClick={() => UpdateCart(orders.item_code)}
             >
               <Link href="" legacyBehavior>
                 <a className="text-primary">{selectedMultiLangData?.update}</a>
@@ -230,7 +251,10 @@ const CartCard = ({
           </div>
         </div>
         <div className="row">
-          <div className="col-6 fs-4 products-name">{selectedMultiLangData?.total} </div>:
+          <div className="col-6 fs-4 products-name">
+            {selectedMultiLangData?.total}{" "}
+          </div>
+          :
           <div className="col-5 price_font_family products-name">
             {orders.currency_symbol}
             {orders.amount}
diff --git a/cards/MyOrderCard.tsx b/cards/MyOrderCard.tsx
index 690404b..a4b935f 100644
--- a/cards/MyOrderCard.tsx
+++ b/cards/MyOrderCard.tsx
@@ -18,9 +18,9 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
   const currency_state_from_redux: any = useSelector(currency_selector_state);
   return (
     <>
-      <div key={data.id} >
-        <div className="card-header myorder-card-header " >
-          <div className="row pb-0" >
+      <div key={data.id}>
+        <div className="card-header pb-1 ">
+          <div className="row pb-0">
             <div className=" mb-sm-0 col-md-2 col-6 order-div">
               <p className="text-uppercase gray  myorder_p">
                 {selectedMultiLangData?.order_placed}
@@ -53,48 +53,49 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
                 <div className="dropdown text-dark" key={index}>
                   {personAddress?.name === "Shipping Address"
                     ? personAddress?.values.map((addr: any) => (
-                      <div key={addr.address_id}>
-                        <a
-                          className="dropdown-toggle p-0 bold text-dark"
-                          role="button"
-                          id="ship_to"
-                          data-bs-toggle="dropdown"
-                          aria-haspopup="true"
-                          aria-expanded="false"
-                        >
-                          {personAddress?.name}
-                        </a>
-                        <ul
-                          className="dropdown-menu"
-                          aria-labelledby="ship_to"
-                        >
-                          <li className="ps-1 pe-1  ">
-                            {addr?.address_title}
-                          </li>
-                          <li className="ps-1 pe-1  ">
-                            {addr?.address_1}
-                          </li>
-                          <li className="ps-1 pe-1 ">
-                            {addr?.address_2}
-                          </li>
-                          <li className="ps-1 pe-1 ">
-                            {addr?.city} - {addr?.postal_code}
-                          </li>
-                          <li className="ps-1 pe-1 ">{addr?.country}</li>
-                          <li className="ps-1 pe-1 ">
-                            {selectedMultiLangData?.mobile_number}:{" "}
-                            {addr?.contact}
-                          </li>
-                        </ul>
-                      </div>
-                    ))
+                        <div key={addr.address_id}>
+                          <a
+                            className="dropdown-toggle p-0 bold text-dark"
+                            role="button"
+                            id="ship_to"
+                            data-bs-toggle="dropdown"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                          >
+                            {personAddress?.name}
+                          </a>
+                          <ul
+                            className="dropdown-menu"
+                            aria-labelledby="ship_to"
+                          >
+                            <li className="ps-1 pe-1 mb-0 ">
+                              {addr?.address_title}
+                            </li>
+                            <li className="ps-1 pe-1 mb-0 ">
+                              {addr?.address_1}
+                            </li>
+                            <li className="ps-1 pe-1 mb-0">
+                              {addr?.address_2}
+                            </li>
+                            <li className="ps-1 pe-1 mb-0">
+                              {addr?.city} - {addr?.postal_code}
+                            </li>
+                            <li className="ps-1 pe-1 mb-0">{addr?.country}</li>
+                            <li className="ps-1 pe-1 mb-0">
+                              {selectedMultiLangData?.mobile_number}:{" "}
+                              {addr?.contact}
+                            </li>
+                          </ul>
+                        </div>
+                      ))
                     : null}
                 </div>
               ))}
             </div>
             <div className="text-end col-md-6 col-8 order-cards">
-              <p className=" myorder_p">
-                {selectedMultiLangData?.orders} # {data?.name}
+              <p className="mb-0 myorder_p d-inline-flex justify-content-end">
+                {selectedMultiLangData?.orders}
+                <span># {data?.name}</span>
               </p>
 
               <div className="d-flex justify-content-end align-items-center">
@@ -116,19 +117,21 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
           >
             <div className="d-flex  pb-0" >
               <div className="flex-fill">
-                <h6 className="green text-capitalize bold  mt-2 order-ptag ">
-                  {selectedMultiLangData?.status} : {data?.payment_status}
+                <h6 className="green text-capitalize bold mb-0 mt-2 order-ptag d-inline-flex">
+                  <div>{selectedMultiLangData?.status} </div>
+                  <div>&nbsp;: {data?.payment_status}</div>
                 </h6>
               </div>
               <div className="justify-content-end d-none d-sm-block align-items-end"></div>
             </div>
 
-            <div className="d-flex align-items-center row" >
-              <div className=" mb-sm-0 col-lg-2 col-md-2 col-4 mt-2">
-                <div className="product-img cart-image  mt-2 mb-4">
+            <div className="d-flex align-items-center row">
+              <div className="mb-3 mb-sm-0 col-lg-2 col-md-2 col-4 mt-2">
+                <div className="product-img">
                   <img
-                    src={`${CONSTANTS.API_BASE_URL}/${detail?.img !== null ? detail?.img : detail?.brand_img
-                      }`}
+                    src={`${CONSTANTS.API_BASE_URL}/${
+                      detail?.img !== null ? detail?.img : detail?.brand_img
+                    }`}
                     className="product_img img-fluid orderdetail_img"
                     alt="product-img"
                   />
@@ -219,15 +222,15 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
                     </p>
 
                     {data?.shipping_method.door_delivery === 0 &&
-                      data?.shipping_method?.godown_delivery === 0 ? (
-                      <p className="">
+                    data?.shipping_method?.godown_delivery === 0 ? (
+                      <p className="mb-0">
                         {selectedMultiLangData?.door_delivery_yes}
                       </p>
                     ) : (
                       ""
                     )}
                     {data?.shipping_method?.door_delivery === 0 &&
-                      data?.shipping_method?.godown_delivery !== 0 ? (
+                    data?.shipping_method?.godown_delivery !== 0 ? (
                       <>
                         <p className="">
                           {selectedMultiLangData?.godown_delivery_yes}
diff --git a/cards/product-list-view-card.tsx b/cards/product-list-view-card.tsx
index b30d3a5..63070c9 100644
--- a/cards/product-list-view-card.tsx
+++ b/cards/product-list-view-card.tsx
@@ -17,6 +17,7 @@ import { login_state } from "../store/slices/auth/login_slice";
 import { Router, useRouter } from "next/router";
 import { get_access_token } from "../store/slices/auth/token-login-slice";
 import CatalogModal from "../components/Catalog/CatalogModal";
+import { profileData_state } from "../store/slices/general_slices/profile-page-slice";
 
 const ProductListViewCard = (props: any) => {
   const {
@@ -38,10 +39,12 @@ const ProductListViewCard = (props: any) => {
   const router = useRouter();
 
   const TokenFromStore: any = useSelector(get_access_token);
+  const profileData: any = useSelector(profileData_state);
   const [showEditModal, setshowEditModal] = useState(false);
   const [show, setshow] = useState(false);
   const [addToCartButtonDisabled, setAddToCartButtonDisabled] = useState(false);
   let isLoggedIn: any;
+  let partyName: any;
   if (typeof window !== "undefined") {
     isLoggedIn = localStorage.getItem("isLoggedIn");
   }
@@ -60,10 +63,18 @@ const ProductListViewCard = (props: any) => {
       item_code: name,
       quantity: 1,
     });
+    if (profileData?.partyName !== "") {
+      if (Object?.keys(profileData?.partyName)?.length > 0) {
+        partyName = profileData?.partyName;
+      }
+    } else {
+      partyName = "Guest";
+    }
     let AddToCartProductRes: any = await AddToCartApi(
       addCartData,
       currency_state_from_redux?.selected_currency_value,
-      TokenFromStore?.token
+      TokenFromStore?.token,
+      partyName
     );
     if (AddToCartProductRes.msg === "success") {
       showToast("Item Added to cart", "success");
@@ -127,25 +138,33 @@ const ProductListViewCard = (props: any) => {
                           ? ""
                           : product_data?.short_description}
                       </div>
-                      <div className="product-desc text-gray products-name ">
-                        {selectedMultiLangData?.item_code}: {product_data?.name}
+                      <div className="product-desc text-gray products-name d-inline-flex">
+                        {selectedMultiLangData?.item_code}:
+                        <span>&nbsp;{product_data?.name}</span>
+                      </div>
+                      <div>
+                        {product_data?.weight_per_unit === 0 ||
+                        product_data?.weight_per_unit === null ? (
+                          ""
+                        ) : (
+                          <div className="product-desc text-gray d-inline-flex">
+                            {selectedMultiLangData?.approx_weight}:{" "}
+                            <span className="d-inline-flex">
+                              {" "}
+                              &nbsp;
+                              {product_data?.weight_per_unit}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                      <div>
+                        {product_data?.brand !== null && (
+                          <div className="sold-by product-desc products-name d-inline-flex">
+                            <span>{selectedMultiLangData?.brand}:&nbsp;</span>
+                            {product_data?.brand}
+                          </div>
+                        )}
                       </div>
-
-                      {product_data?.weight_per_unit === 0 ||
-                      product_data?.weight_per_unit === null ? (
-                        ""
-                      ) : (
-                        <div className="product-desc text-gray">
-                          {selectedMultiLangData?.approx_weight}:{" "}
-                          {product_data?.weight_per_unit}
-                          {""} {product_data?.weight_uom}
-                        </div>
-                      )}
-                      {product_data?.brand !== null && (
-                        <div className="sold-by product-desc products-name">
-                          {selectedMultiLangData?.brand}: {product_data?.brand}
-                        </div>
-                      )}
 
                       {product_data?.price === null ||
                       product_data?.price === 0 ? (
@@ -164,48 +183,52 @@ const ProductListViewCard = (props: any) => {
                           )}
                         </>
                       )}
-                      <div className="p-0 m-0 d-flex ">
-                        {isLoggedIn === "true" ? (
-                          <div className="text-center w-0">
-                            <button
-                              className={` ${
-                                addToCartButtonDisabled === true
-                                  ? "disabled"
-                                  : ""
-                              } btn standard_button add_cart_btn`}
-                              onClick={() =>
-                                AddToCartProduct(product_data.name)
-                              }
-                            >
-                              {selectedMultiLangData?.add_to_cart}
-                            </button>
-                          </div>
-                        ) : (
-                          <Link href="/login">
-                            <div className="text-center w-50">
-                              <button className="btn standard_button">
-                                {selectedMultiLangData?.add_to_cart}
-                              </button>
-                            </div>
-                          </Link>
-                        )}
-                        {isLoggedIn === "true" && (
-                          <>
-                            {router.route !== "/catalog/[category]" ? (
+                      <div className="p-0 m-0 row">
+                        <div className="col-lg-7">
+                          {isLoggedIn === "true" ? (
+                            <div className="text-center w-0">
                               <button
-                                type="button"
-                                className={`btn btn-link catalog-btn-size pt-2 fs-5 products-name add-to-catlog-btn ms-5`}
-                                onClick={() => handleShow(product_data.name)}
+                                className={` ${
+                                  addToCartButtonDisabled === true
+                                    ? "disabled"
+                                    : ""
+                                } btn standard_button add_cart_btn`}
+                                onClick={() =>
+                                  AddToCartProduct(product_data.name)
+                                }
                               >
-                                <span className="bold">
-                                  {selectedMultiLangData?.add_to_catalog}
-                                </span>
+                                {selectedMultiLangData?.add_to_cart}
                               </button>
-                            ) : (
-                              ""
-                            )}
-                          </>
-                        )}
+                            </div>
+                          ) : (
+                            <Link href="/login">
+                              <div className="text-center w-50">
+                                <button className="btn standard_button">
+                                  {selectedMultiLangData?.add_to_cart}
+                                </button>
+                              </div>
+                            </Link>
+                          )}
+                        </div>
+                        <div className="col-lg-5">
+                          {isLoggedIn === "true" && (
+                            <>
+                              {router.route !== "/catalog/[category]" ? (
+                                <button
+                                  type="button"
+                                  className={`btn btn-link catalog-btn-size pt-2 fs-5 products-name text-decoration-none`}
+                                  onClick={() => handleShow(product_data.name)}
+                                >
+                                  <span className="bold">
+                                    {selectedMultiLangData?.add_to_catalog}
+                                  </span>
+                                </button>
+                              ) : (
+                                ""
+                              )}
+                            </>
+                          )}
+                        </div>
                       </div>
                     </div>
                     <div className="row mt-lg-5 mt-2 ps-5">
diff --git a/components/Auth/Registration.tsx b/components/Auth/Registration.tsx
index e5f72c6..addffff 100644
--- a/components/Auth/Registration.tsx
+++ b/components/Auth/Registration.tsx
@@ -174,7 +174,7 @@ const Registration = () => {
                             <Form.Group controlId={details?.controlId}>
                               <div className="row">
                                 <div className="col-md-4">
-                                  <Form.Label className="registration_label color-black bold">
+                                  <Form.Label className="registration_label">
                                     {HandleRegistrationForm(details)}:
                                   </Form.Label>
                                 </div>
diff --git a/components/CartListing.tsx b/components/CartListing.tsx
index ebac5e8..32315eb 100644
--- a/components/CartListing.tsx
+++ b/components/CartListing.tsx
@@ -16,11 +16,6 @@ import {
 import { Norecord } from "./NoRecord";
 import UseCheckoutPageHook from "../hooks/CheckoutHooks/checkout-page-hook";
 import getQuotationCart from "../services/api/cart-page-api/get-quotation-api";
-import {
-  failmsg,
-  hideToast,
-  successmsg,
-} from "../store/slices/general_slices/toast_notification_slice";
 import { get_access_token } from "../store/slices/auth/token-login-slice";
 import { SelectedFilterLangDataFromStore } from "../store/slices/general_slices/selected-multilanguage-slice";
 import DeleteProductFromCart from "../services/api/cart-page-api/delete-cart-product";
@@ -460,7 +455,7 @@ const CartListing = () => {
                                 }
                               </div>
                               :
-                              <div className="col-lg-3 col-6 text-end products-name bold">
+                              <div className="col-lg-3 col-6 text-end products-name bold d-inline-flex">
                                 {
                                   cartListingItems?.categories[0]?.orders[0]
                                     ?.currency_symbol
diff --git a/components/Catalog/CatalogListCard.tsx b/components/Catalog/CatalogListCard.tsx
index 303e18f..28d9768 100644
--- a/components/Catalog/CatalogListCard.tsx
+++ b/components/Catalog/CatalogListCard.tsx
@@ -32,7 +32,7 @@ const CatalogListCard = ({
                     <h5 className="text-uppercase catalog-heading">
                       {catalog?.name}
                     </h5>
-                    <p className="card-text">
+                    <p className="card-text d-inline-flex">
                       {selectedMultiLangData?.product_count} :
                       <span className="catalog-count ps-5">
                         {catalog?.product_counts > 10
@@ -42,32 +42,32 @@ const CatalogListCard = ({
                     </p>
                   </div>
                   <div className="row card-body ">
-                    <div className="col-lg-4 col-md-4">
+                    <div className="col-lg-5 col-md-4">
                       <Link
                         href={`/${catalog.url}?page=1&currency=${currency_state_from_redux?.selected_currency_value}`}
                         className="btn btn-catalogview btn-colors mr-2"
                       >
                         {selectedMultiLangData?.view_catalog_product}
-                        <i className="fa fa-eye ml-2" aria-hidden="true"></i>
+                        <i className="fa fa-eye px-3" aria-hidden="true"></i>
                       </Link>
                     </div>
-                    <div className="col-lg-4 col-md-4 pl-lg-5 my-lg-0 my-md-0 my-3">
+                    <div className="col-lg-3 col-md-4 my-lg-0 my-md-0 my-3 ">
                       <Link
                         href={`/product-category/?page=1&currency=${currency_state_from_redux?.selected_currency_value}`}
                         className="btn btn-catalogAddProduct mr-2 text-dark "
                       >
                         {selectedMultiLangData?.add_product}
-                        <i className="fa fa-plus ml-2" aria-hidden="true"></i>
+                        <i className="fa fa-plus px-3" aria-hidden="true"></i>
                       </Link>
                     </div>
-                    <div className="col-lg-4 col-md-4 pr-lg-5">
+                    <div className="col-lg-4 col-md-4">
                       <button
                         className="btn btn-catalogview btn-colors mr-lg-5"
                         onClick={() => handleDeleteCatalog(catalog?.name)}
                       >
                         {selectedMultiLangData?.delete_catalog}
                         <i
-                          className="fa fa-trash-o ml-2"
+                          className="fa fa-trash-o px-3"
                           aria-hidden="true"
                         ></i>
                       </button>
diff --git a/components/CheckoutPageComponent/CheckoutPageMaster.tsx b/components/CheckoutPageComponent/CheckoutPageMaster.tsx
index 95a8e39..9fc1d20 100644
--- a/components/CheckoutPageComponent/CheckoutPageMaster.tsx
+++ b/components/CheckoutPageComponent/CheckoutPageMaster.tsx
@@ -102,7 +102,7 @@ const CheckoutPageMaster = () => {
 
   console.log("visitor state", currencySymbolForSummary);
   return (
-    <div className="container margin_from_nav mb-0">
+    <div className="container margin_from_nav_checkout mb-5">
       {isBreakpoint ? (
         <>
           <div className="ps-4 checkout_web_heading ">
diff --git a/components/DealerLedger/DealerLedger.tsx b/components/DealerLedger/DealerLedger.tsx
index cfa9135..2610470 100644
--- a/components/DealerLedger/DealerLedger.tsx
+++ b/components/DealerLedger/DealerLedger.tsx
@@ -82,41 +82,48 @@ const DealerLedger = () => {
 
   return (
     <>
-      <div className="container margin_from_nav " >
+      <div className="container margin_from_nav ">
         <DealerAccounting
           dealerLedgerSummary={dealerLedgerSummary}
           selectedMultiLangData={selectedMultiLangData}
         />
-        <div className="row justify-content-center dealer-ledger-container mt-0 pt-0 color-black dealer-account-container dealer-account-container-mob "  >
-          <div className="col-lg-8 ml-3" >
-            <div className="row m-lg-5" >
+        <div className="row justify-content-center dealer-ledger-container mt-0 pt-0 products-name dealer-account-container">
+          <div className="col-lg-8">
+            <div className="row m-lg-5">
               <div className="col-lg-4 col-6 mt-0 pt-0 mb-0 pb-0">
                 <div className="fs-3 color-black ">
                   {selectedMultiLangData?.account_name} :
                 </div>
               </div>
-              <div className="col-lg-6 col-6" >
-                <div className="fs-3 bold color-black" >
+              <div className="col-lg-6 col-6">
+                <div className="fs-3 bold products-name">
                   {dealerLedgerSummary?.party_name}
                 </div>
               </div>
             </div>
-            <div className="row mx-lg-5 mt-0 color-black" >
-              <div className="col-lg-4 col-4 mb-0 pb-0 mt-0 pt-0" >
-                <input
-                  type="radio"
-                  className="form-check-input color-black"
-                  id="radio1"
-                  name="optradio"
-                  value="option1"
-                  onClick={() => setFieldDisable(false)}
-                  defaultChecked
-                />
-                <label className="form-check-label ms-4 color-black" htmlFor="radio1">
-                  {selectedMultiLangData?.month}
-                </label>
+            <div className="row mx-lg-5 mt-0 products-name">
+              <div className="col-lg-4 col-4 mb-0 pb-0 mt-0 pt-0 d-inline-flex justify-content-around">
+                <div className="w-25">
+                  <input
+                    type="radio"
+                    className="form-check-input products-name"
+                    id="radio1"
+                    name="optradio"
+                    value="option1"
+                    onClick={() => setFieldDisable(false)}
+                    defaultChecked
+                  />
+                </div>
+                <div className="w-75">
+                  <label
+                    className="form-check-label products-name"
+                    htmlFor="radio1"
+                  >
+                    {selectedMultiLangData?.month}
+                  </label>
+                </div>
               </div>
-              <div className="col-lg-4 col-6">
+              <div className="col-lg-4 col-6 ">
                 <select
                   className={`${
                     fieldDisable ? "" : "disabled"
@@ -137,22 +144,26 @@ const DealerLedger = () => {
                 </select>
               </div>
             </div>
-            <div className="row mx-lg-5 my-2 color-black"  >
-              <div className="col-lg-4 col-4 mt-lg-2">
-                <input
-                  type="radio"
-                  className="form-check-input color-black"
-                  id="radio2"
-                  name="optradio"
-                  value="option1"
-                  onClick={() => setFieldDisable(true)}
-                />
-                <label
-                  className="form-check-label ms-lg-4 ms-1 text-start color-black"
-                  htmlFor="radio1"
-                >
-                  {selectedMultiLangData?.date_range}
-                </label>
+            <div className="row mx-lg-5 my-2 products-name">
+              <div className="col-lg-4 col-4 mt-lg-2 d-inline-flex justify-content-around">
+                <div className="w-25">
+                  <input
+                    type="radio"
+                    className="form-check-input products-name"
+                    id="radio2"
+                    name="optradio"
+                    value="option1"
+                    onClick={() => setFieldDisable(true)}
+                  />
+                </div>
+                <div className="w-75">
+                  <label
+                    className="form-check-label text-start products-name"
+                    htmlFor="radio1"
+                  >
+                    {selectedMultiLangData?.date_range}
+                  </label>
+                </div>
               </div>
               <div className="col-lg-6 col-12 ">
                 <div className="row" >
@@ -191,7 +202,7 @@ const DealerLedger = () => {
                   className="btn btn-outline-primary ledger-submit-button rounded-3 mt-2 w-25 color-black"
                   onClick={HandleLedgerData}
                 >
-                  <span className="">{selectedMultiLangData?.submit}</span>
+                  {selectedMultiLangData?.submit}
                 </button>
               </div>
             </div>
diff --git a/components/DisplayTags/DisplayTagMaster.tsx b/components/DisplayTags/DisplayTagMaster.tsx
index 6fb7900..2d589dd 100644
--- a/components/DisplayTags/DisplayTagMaster.tsx
+++ b/components/DisplayTags/DisplayTagMaster.tsx
@@ -20,7 +20,7 @@ const DisplayTagMaster = (props: any) => {
   //   useDisplayTagHooks();
   return (
     <div className="">
-      <div className="container" >
+      <div className="container">
         <div className="row banner-product-wrapper pb-1 products-name">
           <h3 className="text-center mb-0 mt-5">{data?.tag_name}</h3>
           <div className="banner-product col-lg-3 col-md-4 d-lg-block d-none mb-4 mb-md-0">
@@ -97,6 +97,18 @@ const DisplayTagMaster = (props: any) => {
                                   {list.item_name}
                                 </Link>
                               </h4>
+                              <div className=" d-flex justify-content-center product-price">
+                                <ins className="d-flex new-price">
+                                  <span>{list?.currency_symbol}</span>
+                                  <span className="product-price-rtl"> {list?.price}</span>
+                                </ins>
+                                <del className="old-price">
+                                  <span>{list?.currency_symbol}</span>
+                                  <span> {list?.mrp_price}</span>
+                                </del>
+                              </div>
+{/* 
+
                               <div className="product-price">
                                 <ins className="new-price">
                                   {list?.currency_symbol} {list?.price}
@@ -104,7 +116,7 @@ const DisplayTagMaster = (props: any) => {
                                 <del className="old-price">
                                   {list?.currency_symbol} {list?.mrp_price}
                                 </del>
-                              </div>
+                              </div> */}
                             </div>
                           </div>
                         </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 319e63c..9b36d04 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -54,11 +54,11 @@ const Footer = () => {
               </div>
               <div className="col-xl-4 col-lg-5">
                 <div className="icon-box icon-box-side text-dark ">
-                  <div className="icon-box-icon d-inline-flex footer-icon">
+                  <div className="icon-box-icon d-inline-flex footer-icon mx-0">
                     <i className="w-icon-envelop3 text-white msg-icon footer-icon "></i>
                   </div>
                   <div className="icon-box-content">
-                    <h5 className="icon-box-title text-uppercase font-weight-bold text-white text-left pl-1">
+                    <h5 className="icon-box-title text-uppercase font-weight-bold text-white text-left">
                       {selectLangData?.subscribe_to_our_newsletter}
                     </h5>
                     <p className="text-light">
@@ -73,26 +73,27 @@ const Footer = () => {
                 <form
                   onSubmit={handleSubscription}
                   method="get"
-                  className="input-wrapper input-wrapper-inline input-wrapper-rounded"
+                  className="input-wrapper input-wrapper-inline input-wrapper-rounded row"
                 >
-                  <input
-                    type="email"
-                    className="form-control mr-2 bg-white text-default"
-                    // name="email"
-                    // id="email"
-                    value={subScription}
-                    onChange={handleSubscriptionInput}
-                    // onChange={(e: any) => setSubscriptions(e?.target?.value)}
-                    placeholder="Your E-mail Address"
-                    required
-                  />
-                  <button
-                    className="btn btn-primary btn-rounded btn-left  footer-button"
-                    type="submit"
-                  >
-                    {selectLangData?.subscribe}
-                    <i className="w-icon-long-arrow-right"></i>
-                  </button>
+                  <div className="col-8 my-auto">
+                    <input
+                      type="email"
+                      className="form-control mr-2 bg-white text-default subscribe_input"
+                      value={subScription}
+                      onChange={handleSubscriptionInput}
+                      placeholder="Your E-mail Address"
+                      required
+                    />
+                  </div>
+                  <div className="col-3">
+                    <button
+                      className="btn btn-primary btn-rounded btn-left  footer-button"
+                      type="submit"
+                    >
+                      {selectLangData?.subscribe}
+                      <i className="w-icon-long-arrow-right px-2"></i>
+                    </button>
+                  </div>
                 </form>
               </div>
             </div>
@@ -228,11 +229,11 @@ const Footer = () => {
             <div className="footer-left">
               <p className="copyright">{selectLangData?.copyright_text}</p>
             </div>
-            <div className="footer-right">
-              <span className="payment-label mr-lg-8">
+            <div className="footer-right ">
+              <span className="payment-label px-3">
                 {selectLangData?.using_safe_payment}
               </span>
-              <figure className="payment">
+              <figure className="payment ">
                 <Image
                   src="/assets/images/payment.png"
                   alt="payment"
diff --git a/components/Navbar/components/WebNavbar.tsx b/components/Navbar/components/WebNavbar.tsx
index 2c2ab06..4ddac21 100644
--- a/components/Navbar/components/WebNavbar.tsx
+++ b/components/Navbar/components/WebNavbar.tsx
@@ -90,6 +90,14 @@ const WebNavbar = ({
     const logoutAPI = await LogoutList();
   };
 
+  const HandleLangToggle = (event: any) => {
+    console.log("handletoggle", event?.target?.checked);
+    if (event?.target?.checked === true) {
+      document.documentElement.dir = "rtl";
+    } else {
+      document.documentElement.dir = "ltr";
+    }
+  };
   return (
     <div>
       <header className="header fixed-header">
@@ -139,6 +147,21 @@ const WebNavbar = ({
             </div>
 
             <div className="navbar-left-icon1 d-flex align-items-center text-center mob-icon-wrapper">
+              <div className="form-check form-switch pe-5 fs-3 rtl-toggle-section">
+                <input
+                  className="form-check-input cursor_pointer"
+                  type="checkbox"
+                  role="switch"
+                  id="flexSwitchCheckDefault"
+                  onChange={HandleLangToggle}
+                />
+                <label
+                  className="form-check-label text-white"
+                  htmlFor="flexSwitchCheckDefault"
+                >
+                  Ar
+                </label>
+              </div>
               <div className=" dropdown cart-dropdown cart-offcanvas text-white mx-lg-3 d-flex align-items-center heart-icon-margin heart-icon-mob">
                 <Link href="/wishlist" legacyBehavior>
                   <a className=" cart-toggle label-down link">
@@ -258,7 +281,7 @@ const WebNavbar = ({
                       title="Browse Categories"
                     >
                       <i className="w-icon-category"></i>
-                      <span>{selectedMultiLangData?.browse_categories}</span>
+                      <span className="browse-cat-label">{selectedMultiLangData?.browse_categories}</span>
                     </a>
                   </Link>
 
@@ -267,12 +290,14 @@ const WebNavbar = ({
                       {isLoading === "succeeded" &&
                         navbarData?.length > 0 &&
                         navbarData.map((items: any, index: number) => (
-                          <li key={index}>
+                          <li key={index} className="vertical-menu-li-rtl">
                             <a>
                               <i className="w-icon-tshirt2"></i>
+                              <span className="browse-cat-list-span">
                               {items.label}
+                              </span>
                             </a>
-                            <ul className="megamenu">
+                            <ul className="megamenu vertical-menubar-rtl">
                               {items?.values?.length > 0 &&
                                 items.values.map((items_val: any, i: any) => (
                                   <li key={i}>
diff --git a/components/OrderDetails/OrderDetail.tsx b/components/OrderDetails/OrderDetail.tsx
index 303f378..d7931eb 100644
--- a/components/OrderDetails/OrderDetail.tsx
+++ b/components/OrderDetails/OrderDetail.tsx
@@ -76,15 +76,15 @@ const Index = ({ sales_order_id }: any) => {
     // <div className="margin_from_nav_l">
     <div
       className={`${
-        router?.pathname?.includes("/myOrder") ? "margin_from_nav" : ""
-      } container`}
+        router?.pathname?.includes("/myOrder") ? "margin_from_nav_l" : ""
+      }`}
     >
       {detail?.length === 0 ? (
         <>
           <div className="row justify-content-center mt-5">
             {[...Array(4)].map(() => (
               <>
-                <div className="col-lg-12 mx-3 mt-2">
+                <div className="col-lg-12 mx-3">
                   <ListViewLoadingLayout />
                 </div>
               </>
@@ -98,52 +98,49 @@ const Index = ({ sales_order_id }: any) => {
             detail?.map((data: any) => (
               <div className="container color-black" key={data?.name}>
                 <div className="row"></div>
-                <div className="row color-black">
-                  <div className="col-md-6 ">
+                <div className="row products-name">
+                  <div className="col-md-6">
                     <div className="page_heading">
-                      <h4 className="p-0 m-0">
+                      <h5 className="bold text-uppercase black mb-2 mt-8 orderDetail-heading">
                         {selectedMultiLangData?.order_details}
-                      </h4>
+                      </h5>
                     </div>
                   </div>
                 </div>
-                <div className="order_detail_head row color-black pb-2" >
+                <div className="order_detail_head row products-name ">
                   <div className="col-12">
                     <div className="item_action d-flex ">
                       <div className="item_action_link me-3 ">
                         {data.creation}
                       </div>
-                      <div className="item_action_link order-pipe color-black">
-                        <span>
-                           {selectedMultiLangData?.orders} # {data?.name}
-                        </span>
+                      <div className="item_action_link order-pipe d-inline-flex ">
+                        <span>| {selectedMultiLangData?.orders}</span>
+                        <span># {data?.name}</span>
                       </div>
                     </div>
                   </div>
                 </div>
-
-                
-                <div id="printableArea" className="row color-black" >
+                <div id="printableArea" className="row products-name">
                   <div className="col-lg-12">
                     <div className="order_card mb-3 card">
-                      <div className="card-body" >
+                      <div className="card-body">
                         <div className="row">
                           {data?.addresses?.map((addr: any, index: any) => (
-                            <div className="mb-0 mb-sm-0 col-md-3" key={index}>
+                            <div className="mb-3 mb-sm-0 col-md-3" key={index}>
                               <div>
                                 <h5 className="data_heading mb-1">
                                   {addr?.name}
                                 </h5>
                                 {addr?.values &&
                                   addr?.values.map((addrValue: any, i: any) => (
-                                    <div className="myorders" key={i} >
-                                      <p className="my-0 py-0 address_tiitles">
+                                    <div className="myorders" key={i}>
+                                      <p className="mb-0 address_tiitles">
                                         {addrValue?.address_title}
                                       </p>
-                                      <p className="my-0 py-0 line-height">
+                                      <p className="mb-0">
                                         {addrValue?.address_1}
                                       </p>
-                                      <p className="mb-0 my-0 py-0 line-height">
+                                      <p className="mb-0">
                                         {addrValue?.postal_code}
                                       </p>
                                       <p className="mb-0">
@@ -208,19 +205,19 @@ const Index = ({ sales_order_id }: any) => {
                             </div>
                           </div>
 
-                          <div className="col-md-4 myorders" >
+                          <div className="col-md-4 myorders">
                             <h5 className="data_heading mb-1">
                               {" "}
                               {selectedMultiLangData?.order_summary}
                             </h5>
                             <div className="mb-1 row">
                               <div className="col-6">
-                                <p className="mb-0 ">
+                                <p className="mb-0 order_summary_p">
                                   {selectedMultiLangData?.sub_total_excl_tax}
                                 </p>
                               </div>
                               <div className="text-right col-6">
-                                <p className="mb-0 price_font_family">
+                                <p className="mb-0 order_summary_p price_font_family">
                                   {data?.currency_symbol}{" "}
                                   {data?.subtotal_exclude_tax}
                                 </p>
@@ -228,7 +225,7 @@ const Index = ({ sales_order_id }: any) => {
                             </div>
                             <div className="mb-1 row">
                               <div className="col-6">
-                                <p className="mb-0 ">
+                                <p className="mb-0 order_summary_p">
                                   {" "}
                                   {selectedMultiLangData?.tax}
                                 </p>
@@ -239,7 +236,7 @@ const Index = ({ sales_order_id }: any) => {
                                 </p>
                               </div>
                             </div>
-                            <div className="mb-0 row" >
+                            <div className="mb-1 row">
                               {data?.coupon_code !== null ? (
                                 <>
                                   <div className="col-6">
@@ -257,7 +254,7 @@ const Index = ({ sales_order_id }: any) => {
                                 ""
                               )}
                             </div>
-                            <div className="mb-0 row" >
+                            <div className="mb-1 row">
                               {data?.coupon_amount !== 0 ? (
                                 <>
                                   <div className="col-6">
@@ -280,7 +277,7 @@ const Index = ({ sales_order_id }: any) => {
                               )}
                             </div>
 
-                            <div className="mb-1 row" >
+                            <div className="mb-1 row">
                               <div className="col-6">
                                 <p className="mb-0 order_summary_p">
                                   {selectedMultiLangData?.sub_total_incl_tax}
@@ -293,8 +290,8 @@ const Index = ({ sales_order_id }: any) => {
                                 </p>
                               </div>
                             </div>
-                            {/* <hr className="mt-1 mb-1" /> */}
-                            <div className="mb-1 row" >
+                            <hr className="mt-1 mb-1" />
+                            <div className="row">
                               <div className="col-6">
                                 <p className="mb-0 bold order_summary_p">
                                   {selectedMultiLangData?.order_total}
@@ -306,7 +303,7 @@ const Index = ({ sales_order_id }: any) => {
                                 </p>
                               </div>
                             </div>
-                            {/* <hr className="mt-1 mb-1" /> */}
+                            <hr className="mt-1 mb-1" />
                             <div className="row">
                               <div className="col-6">
                                 <p className="mb-0 bold order_summary_p">
@@ -324,20 +321,20 @@ const Index = ({ sales_order_id }: any) => {
                         </div>
                       </div>
                     </div>
-                    <div className="order_card cart_table mb-0 card" >
+                    <div className="order_card cart_table mb-3 card">
                       {data?.order_details.map((oDetail: any, index: any) => (
                         <div
-                          className=" card-body "
+                          className="cart_item card-body border-bottom"
                           key={index}
                         >
-                          <div className="d-flex mb-0">
+                          <div className="d-flex mb-2">
                             <div className="flex-fill">
                               <h6 className="green text-capitalize bold mb-0 status"></h6>
                             </div>
                           </div>
                           <div className="d-flex align-items-center row">
-                            <div className="mb-3 mb-sm-0 col-lg-2 col-md-2 col-4" >
-                              <div className="product-image cart-image ">
+                            <div className="mb-3 mb-sm-0 col-lg-2 col-md-2 col-4">
+                              <div className="product-image">
                                 {oDetail?.img === null ||
                                 oDetail?.img?.length === 0 ? (
                                   <Image
@@ -360,22 +357,22 @@ const Index = ({ sales_order_id }: any) => {
                                 )}
                               </div>
                             </div>
-                            <div className="product_item_details col-lg-8 col-md-7 col-8" >
+                            <div className="product_item_details col-lg-8 col-md-7 col-8">
                               <div className="d-flex orderdetail-name">
                                 <div className="flex-fill">
                                   <Link
                                     href={`${oDetail?.product_url}?currency=${currency_state_from_redux?.selected_currency_value}`}
                                     legacyBehavior
                                   >
-                                    <a className="product_item_name bold">
+                                    <a className="product_item_name">
                                       {oDetail?.item_name}
                                     </a>
                                   </Link>
 
                                   <table
                                     width="100%"
-                                    className="mt-0 table table-borderless"
-                                     >
+                                    className="mt-2 table table-borderless"
+                                  >
                                     <tbody>
                                       <tr className="item_options myorder_tr">
                                         <td className="px-0 py-0 pb-0 myorder_td">
@@ -623,8 +620,6 @@ const Index = ({ sales_order_id }: any) => {
                     </div>
                   </div>
                 </div>
-
-
               </div>
             ))}
         </>
@@ -633,4 +628,4 @@ const Index = ({ sales_order_id }: any) => {
   );
 };
 
-export default Index;
\ No newline at end of file
+export default Index;
diff --git a/components/OrderSummary/OrderSummary.tsx b/components/OrderSummary/OrderSummary.tsx
index fc88bc1..29ffeff 100644
--- a/components/OrderSummary/OrderSummary.tsx
+++ b/components/OrderSummary/OrderSummary.tsx
@@ -56,7 +56,7 @@ const OrderSummary = ({
                             <div className="col-6">{data?.name}</div>
                             <div className="col-6 text-end">
                               <p className={`mb-0 summary_p`}>
-                                <div>
+                                <div className="d-inline-flex">
                                   {currencySymbolForSummary}
                                   <IndianNumber value={data?.value} />
                                 </div>
@@ -91,7 +91,7 @@ const OrderSummary = ({
                                     <IndianNumber value={data?.value} />
                                   </div>
                                 ) : (
-                                  <div>
+                                  <div className="d-inline-flex">
                                     {currencySymbolForSummary}
 
                                     <IndianNumber value={data?.value} />
@@ -210,20 +210,22 @@ const OrderSummary = ({
                                           className="px-0 py-0 pb-1"
                                         >
                                           <p
-                                            className={`text-capitalize mb-0 cart_p text-end`}
+                                            className={`text-capitalize mb-0 cart_p text-end d-inline-flex`}
                                           >
                                             {detail.name === "Price" ? (
                                               <>{currencySymbolForSummary}</>
                                             ) : (
                                               ""
                                             )}
-                                            {detail.name === "Model No" ? (
-                                              detail.value.split("-")[0]
-                                            ) : (
-                                              <IndianNumber
-                                                value={detail?.value}
-                                              />
-                                            )}
+                                            <div>
+                                              {detail.name === "Model No" ? (
+                                                detail.value.split("-")[0]
+                                              ) : (
+                                                <IndianNumber
+                                                  value={detail?.value}
+                                                />
+                                              )}
+                                            </div>
                                           </p>
                                         </td>
                                       </tr>
@@ -251,7 +253,9 @@ const OrderSummary = ({
                                       </p>
                                     </td>
                                     <td width="50%" className="px-0 py-0 ">
-                                      <p className={`mb-0 cart_p text-end`}>
+                                      <p
+                                        className={`mb-0 cart_p text-end d-inline-flex`}
+                                      >
                                         {currencySymbolForSummary}
 
                                         <IndianNumber value={data?.amount} />
@@ -266,7 +270,9 @@ const OrderSummary = ({
                                       </p>
                                     </td>
                                     <td width="50%" className="px-0 py-0 ">
-                                      <p className={`mb-0 cart_p text-end`}>
+                                      <p
+                                        className={`mb-0 cart_p text-end d-inline-flex`}
+                                      >
                                         {currencySymbolForSummary}
 
                                         <IndianNumber value={data?.tax} />
diff --git a/components/ProductDetailComponents/ProductDetails/BreadCrumbs.tsx b/components/ProductDetailComponents/ProductDetails/BreadCrumbs.tsx
index 519ff8c..978e06b 100644
--- a/components/ProductDetailComponents/ProductDetails/BreadCrumbs.tsx
+++ b/components/ProductDetailComponents/ProductDetails/BreadCrumbs.tsx
@@ -1,23 +1,21 @@
-import React,{useState} from "react";
+import React, { useState } from "react";
 import UseBreadCrumbsHook from "../../../hooks/GeneralHooks/breadcrumbs-hook";
 import Link from "next/link";
 // import { CONSTANTS } from "../../services/config/app-config";
-import {CONSTANTS} from "../../../services/config/app-config"
+import { CONSTANTS } from "../../../services/config/app-config";
 
-const BreadCrumbs = ( props: any) => {
+const BreadCrumbs = (props: any) => {
   const { breadCrumbData } = UseBreadCrumbsHook();
   console.log("breadCrumbData", breadCrumbData);
   const { listItems, handleToggleProductsListingView, selectedMultiLangData } =
-  props;
+    props;
 
   const [showMissingPartsModal, setShowMissingPartsModal] =
-  useState<any>(false);
-
-const handleMissingPartsModalClose: any = () => {
-  setShowMissingPartsModal(false);
-};
-
+    useState<any>(false);
 
+  const handleMissingPartsModalClose: any = () => {
+    setShowMissingPartsModal(false);
+  };
 
   let sub_sub_cat: String;
   console.log("Data from breadcrumbs - ", breadCrumbData);
@@ -34,7 +32,7 @@ const handleMissingPartsModalClose: any = () => {
       console.log(sub_sub_cat);
     });
   return (
-    <section className="breadcrumb_section pt-5 product-font-family " >
+    <section className="breadcrumb_section pt-5 product-font-family ">
       <div className="container pt-0">
         <div className="row">
           <div className="col-lg-9">
@@ -58,7 +56,11 @@ const handleMissingPartsModalClose: any = () => {
                         className="breadcrumb-item active text-color-black"
                         aria-current="page"
                       >
-                        <Link href={`${item?.link}?page=1`} legacyBehavior className="text-color-black">
+                        <Link
+                          href={`${item?.link}?page=1`}
+                          legacyBehavior
+                          className="text-color-black"
+                        >
                           {item?.name === null && sub_sub_cat !== "undefined"
                             ? "value is null"
                             : item?.name}
@@ -68,71 +70,57 @@ const handleMissingPartsModalClose: any = () => {
                   ))}
               </ol>
             </nav>
-            </div>
-            
-            <div className="col-lg-3 pe-0" >
-              <div className="row">
-                {CONSTANTS.ENABLE_TOGGLE_PRODUCT_LISTING_VIEW ? (
-                  <>
-                  
-                      <div className="col-lg-6 col-8" >
-                        {/* Price :-{" "}
-                        <select
-                          className={`${styles.form_select}`}
-                          aria-label="Default select example"
-                        >
-                          <option value="low_to_high" selected>
-                            Low to High
-                          </option>
-                          <option value="high_to_low">High to Low</option>
-                        </select>
-                       */}
-                      </div>
-                      <div className="col-lg-6 col-4 d-flex justify-content-end">
-                        <div className="ms-3 mob-breadcrum-icon">
-                          <i
-                            className="fa fa-list fa-lg cursor_pointer"
-                            aria-hidden="true"
-                            onClick={() =>
-                              handleToggleProductsListingView("list-view")
-                            }
-                          ></i>
-                          <i
-                            className="fa fa-th fa-lg ms-3 cursor_pointer"
-                            aria-hidden="true"
-                            onClick={() =>
-                              handleToggleProductsListingView("grid-view")
-                            }
-                          ></i>
-                        </div>
-                      </div>
-                  
-                  </>
-                ) : (
-                  <>
-                    <div className="col-lg-6"></div>
-                    <div className="col-lg-6 ">
-                      <div>
-                        {selectedMultiLangData?.price} :-{" "}
-                        <select
-                          className="form_select"
-                          aria-label="Default select example"
-                        >
-                          <option value="low_to_high" selected>
-                            {selectedMultiLangData?.low_to_high}
-                          </option>
-                          <option value="high_to_low">
-                            {selectedMultiLangData?.high_to_low}
-                          </option>
-                        </select>
-                      </div>
+          </div>
+
+          {/* <div className="col-lg-3 pe-0 ">
+            <div className="row list-toggle-rtl">
+              {CONSTANTS.ENABLE_TOGGLE_PRODUCT_LISTING_VIEW ? (
+                <>
+                  <div className="col-lg-6 col-8">
+                   
+                  </div>
+                  <div className="col-lg-6 col-4 d-flex justify-content-end">
+                    <div className="ms-3 mob-breadcrum-icon">
+                      <i
+                        className="fa fa-list fa-lg cursor_pointer"
+                        aria-hidden="true"
+                        onClick={() =>
+                          handleToggleProductsListingView("list-view")
+                        }
+                      ></i>
+                      <i
+                        className="fa fa-th fa-lg ms-3 cursor_pointer"
+                        aria-hidden="true"
+                        onClick={() =>
+                          handleToggleProductsListingView("grid-view")
+                        }
+                      ></i>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="col-lg-6"></div>
+                  <div className="col-lg-6 ">
+                    <div>
+                      {selectedMultiLangData?.price} :-{" "}
+                      <select
+                        className="form_select"
+                        aria-label="Default select example"
+                      >
+                        <option value="low_to_high" selected>
+                          {selectedMultiLangData?.low_to_high}
+                        </option>
+                        <option value="high_to_low">
+                          {selectedMultiLangData?.high_to_low}
+                        </option>
+                      </select>
                     </div>
-                  </>
-                )}
-              </div>
+                  </div>
+                </>
+              )}
             </div>
-       
-        
+          </div> */}
         </div>
       </div>
     </section>
diff --git a/components/ProductDetailComponents/ProductDetails/ProductDetail.tsx b/components/ProductDetailComponents/ProductDetails/ProductDetail.tsx
index 37e1839..e3c28b9 100644
--- a/components/ProductDetailComponents/ProductDetails/ProductDetail.tsx
+++ b/components/ProductDetailComponents/ProductDetails/ProductDetail.tsx
@@ -61,6 +61,8 @@ const ProductDetail = ({
     setnewObjectState(newData);
   };
 
+  console.log("quantity", productQuantity, minQty);
+
   let isLoggedIn: any;
   let isDealer: any;
   if (typeof window !== "undefined") {
@@ -230,7 +232,7 @@ const ProductDetail = ({
         <b className="product_name products-name products-name-font">
           {productDetailData?.item_name}
         </b>
-        <p className=" text-dark  products-name ">
+        <p className=" text-dark  products-name mt-0">
           <span>
             {" "}
             {productDetailData?.short_description ===
@@ -246,36 +248,54 @@ const ProductDetail = ({
             className="product_brand_name"
           />
         </div>
-        <p className="mt-3 text-dark p-tagfont product_item_name products-name product-line-height">
-          {selectedMultiLangData?.item_code}: {productDetailData?.name}
+        <p className="mt-3 text-dark p-tagfont product_item_name products-name product-line-height d-inline-flex">
+          {selectedMultiLangData?.item_code}:
+          <span>&nbsp; {productDetailData?.name}</span>
         </p>
 
-        <h3 className="p_price m-0 price_font_family rating-container">
-          {productDetailData?.price !== 0 ? (
-            <>
-              <span className="products-name bold">
-                {" "}
-                {productDetailData?.currency_symbol} {productDetailData?.price}
-              </span>
-              {/* <IndianNumber value={productDetailData?.price} /> */}
-            </>
-          ) : (
-            <button className="button_color p-2 rounded-3 fs-4 mb-2 product-font-family">
-              {selectedMultiLangData?.price_on_request}
-            </button>
-          )}
+        {/* <div className=" d-flex justify-content-center product-price">
+          <ins className="d-flex new-price">
+            <span>{productDetailData?.currency_symbol}</span>
+            <span className="product-price-rtl">
+              {" "}
+              {productDetailData?.price}
+            </span>
+          </ins>
+          <del className="old-price">
+            <span>{productDetailData?.currency_symbol}</span>
+            <span> {productDetailData?.mrp_price}</span>
+          </del>
+        </div> */}
 
-          {productDetailData?.mrp_price !== 0 ? (
-            <>
-              <s className="old-price currency_symbol price_font_family product-font-family">
-                {productDetailData?.currency_symbol}{" "}
-                {productDetailData?.mrp_price}
-                {/* <IndianNumber value={productDetailData?.mrp_price} /> */}
-              </s>
-            </>
-          ) : (
-            ""
-          )}
+        <h3 className="d-flex justify-content-start p_price m-0 price_font_family rating-container">
+          <div>
+            {productDetailData?.price !== 0 ? (
+              <>
+                <span className="products-name bold ">
+                  {" "}
+                  {productDetailData?.currency_symbol}{" "}
+                  {productDetailData?.price}
+                </span>
+                {/* <IndianNumber value={productDetailData?.price} /> */}
+              </>
+            ) : (
+              <button className="button_color p-2 rounded-3 fs-4 mb-2 product-font-family">
+                {selectedMultiLangData?.price_on_request}
+              </button>
+            )}
+          </div>
+          <div>
+            {productDetailData?.mrp_price !== 0 ? (
+              <>
+                <del className="old-price fs-2 ms-4 price_font_family product-font-family mrp-price-color ">
+                  {productDetailData?.currency_symbol}{" "}
+                  {productDetailData?.mrp_price}
+                </del>
+              </>
+            ) : (
+              ""
+            )}
+          </div>
         </h3>
 
         {productDetailData?.price !== 0 ? (
@@ -323,33 +343,42 @@ const ProductDetail = ({
 
         {productDetailData?.brand !== null &&
         productDetailData?.brand !== "" ? (
-          <p className="mt-2 text-uppercase p-tagfont product_brand_name products-name product-line-height">
-            {selectedMultiLangData?.brand}: {productDetailData?.brand}
-          </p>
-        ) : (
-          ""
-        )}
-        {productDetailData?.gst_hsn_code !== null &&
-        productDetailData?.gst_hsn_code !== "" ? (
-          <p className="text-uppercase p-tagfont  products-name product-line-height">
-            {selectedMultiLangData?.hsn_code}: {productDetailData?.gst_hsn_code}
-          </p>
-        ) : (
-          ""
-        )}
-        {productDetailData?.oem_part_number !== null &&
-        productDetailData?.oem_part_number !== "" ? (
-          <p className="mt-2 text-uppercase p-tagfont product_brand_name products-name">
-            {selectedMultiLangData?.oem_part_number}:{" "}
-            {productDetailData?.oem_part_number}
+          <p className="text-uppercase p-tagfont product_brand_name products-name product-line-height d-inline-flex my-3">
+            {selectedMultiLangData?.brand}:
+            <span>&nbsp; {productDetailData?.brand}</span>
           </p>
         ) : (
           ""
         )}
+        <div className="py-0">
+          {productDetailData?.gst_hsn_code !== null &&
+          productDetailData?.gst_hsn_code !== "" ? (
+            <p className="text-uppercase p-tagfont  products-name product-line-height d-inline-flex my-3">
+              {selectedMultiLangData?.hsn_code}:
+              <span> &nbsp;{productDetailData?.gst_hsn_code}</span>
+            </p>
+          ) : (
+            ""
+          )}
+        </div>
+        <div>
+          {productDetailData?.oem_part_number !== null &&
+          productDetailData?.oem_part_number !== "" ? (
+            <p className="mt-2 text-uppercase p-tagfont product_brand_name products-name d-inline-flex">
+              {selectedMultiLangData?.oem_part_number}:{" "}
+              <span>{productDetailData?.oem_part_number}</span>
+            </p>
+          ) : (
+            ""
+          )}
+        </div>
         {productDetailData?.weight_per_unit !== 0 ? (
-          <p className="mt-2 text-uppercase p-tagfont product_brand_name products-name">
+          <p className="mt-2 text-uppercase p-tagfont product_brand_name products-name d-inline-flex">
             {selectedMultiLangData?.approx_weight}:{" "}
-            {productDetailData?.weight_per_unit} {productDetailData?.weight_uom}
+            <span className="d-inline-flex">
+              &nbsp; {productDetailData?.weight_per_unit}{" "}
+              <span>{productDetailData?.weight_uom}</span>
+            </span>
           </p>
         ) : (
           ""
@@ -369,6 +398,7 @@ const ProductDetail = ({
             stockDoesNotExistsForSelectedVariants
           }
           selectedMultiLangData={selectedMultiLangData}
+          minQty={minQty}
         />
       </div>
 
@@ -494,7 +524,7 @@ const ProductDetail = ({
                     <div className="mt-5">
                       <div className="row btn-wrapper">
                         <button
-                          className={`w-50 btn standard_button_filled cart_btn_gtag product-font-family`}
+                          className={`w-75 btn standard_button_filled cart_btn_gtag product-font-family`}
                           onClick={handleRedirect}
                           disabled={doesSelectedVariantDoesNotExists}
                         >
diff --git a/components/ProductDetailComponents/ProductSpecifications/ProductSpecificationMaster.tsx b/components/ProductDetailComponents/ProductSpecifications/ProductSpecificationMaster.tsx
index 2171345..b2116fa 100644
--- a/components/ProductDetailComponents/ProductSpecifications/ProductSpecificationMaster.tsx
+++ b/components/ProductDetailComponents/ProductSpecifications/ProductSpecificationMaster.tsx
@@ -13,7 +13,7 @@ const ProductSpecificationMaster = ({
 
   return (
     <>
-      <div className="container mt-3">
+      <div className="container mt-3 specs-tabs-container-rtl">
         <Tabs
           id="controlled-tab-example"
           activeKey={key}
diff --git a/components/ProductDetailComponents/ProductSpecifications/ProductTechnology.tsx b/components/ProductDetailComponents/ProductSpecifications/ProductTechnology.tsx
index 0a2d0f7..6ff5630 100644
--- a/components/ProductDetailComponents/ProductSpecifications/ProductTechnology.tsx
+++ b/components/ProductDetailComponents/ProductSpecifications/ProductTechnology.tsx
@@ -36,8 +36,12 @@ const ProductTechnology = ({ technologyData, selectedMultiLangData }: any) => {
                       />
                     </div>
                     <div className="card-body p-4">
-                      <h5 className="card-title products-name">{cardDetails.name}</h5>
-                      <p className="card-text products-name">{cardDetails.description}</p>
+                      <h5 className="card-title products-name">
+                        {cardDetails.name}
+                      </h5>
+                      <p className="card-text products-name">
+                        {cardDetails.description}
+                      </p>
                       {cardDetails.technology_details?.length > 0 && (
                         <button
                           type="button"
diff --git a/components/ProductDetailComponents/ProductVariants/VariantsMaster.tsx b/components/ProductDetailComponents/ProductVariants/VariantsMaster.tsx
index 92d6ad2..84fe195 100644
--- a/components/ProductDetailComponents/ProductVariants/VariantsMaster.tsx
+++ b/components/ProductDetailComponents/ProductVariants/VariantsMaster.tsx
@@ -10,6 +10,7 @@ const VariantsMaster = ({
   stockDoesNotExistsForSelectedVariants,
   variantsData,
   selectedMultiLangData,
+  minQty,
 }: any) => {
   let isDealer: any;
   if (typeof window !== "undefined") {
@@ -23,6 +24,7 @@ const VariantsMaster = ({
           variants={productVariants}
           variantsData={variantsData}
           selectedMultiLangData={selectedMultiLangData}
+          minQty={minQty}
         />
       ) : (
         <CustomerVariants
diff --git a/components/ProductDetailComponents/ProductVariants/components/DealerVariants.tsx b/components/ProductDetailComponents/ProductVariants/components/DealerVariants.tsx
index 84cf5bf..a47560b 100644
--- a/components/ProductDetailComponents/ProductVariants/components/DealerVariants.tsx
+++ b/components/ProductDetailComponents/ProductVariants/components/DealerVariants.tsx
@@ -1,24 +1,90 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 const DealerVariants = ({
   variants,
   variantsData,
   selectedMultiLangData,
+  minQty,
 }: any) => {
   const [Quanties, setQuanties] = useState<any>();
   const [newobject, setnewObject] = useState<any>([]);
+  const [quantity, setQuantity] = useState<any>();
 
   let newarry: any;
 
-  console.log("dealer variant", variants);
+  console.log("dealer variant", variants, minQty, newobject);
+
+  useEffect(() => {
+    if (variants?.variants?.length > 0) {
+    } else {
+      if (minQty === 0) {
+        let objs: any = {
+          item_code: variants.item_code,
+          quantity: 1,
+        };
+        let newarrys = newobject?.filter(
+          (item: any) => item?.item_code !== objs?.item_code
+        );
+        console.log("new object1", newarrys);
+        setnewObject([...newarrys, objs]);
+      } else {
+        let objs: any = {
+          item_code: variants.item_code,
+          quantity: minQty,
+        };
+        let newarrys = newobject?.filter(
+          (item: any) => item?.item_code !== objs?.item_code
+        );
+        console.log("new object1", newarrys);
+        setnewObject([...newarrys, objs]);
+      }
+    }
+    // if (
+    //   variants?.variants?.length > 0 &&
+    //   variants?.variants.map((variant: any, index: any) => {
+    //     if (minQty === 0) {
+    //       let objs: any = {
+    //         item_code: variant.variant_code,
+    //         quantity: 1,
+    //       };
+    //       let newarrys = newobject?.filter(
+    //         (item: any) => item?.item_code !== objs?.item_code
+    //       );
+    //       console.log("new object1", newarrys);
+    //       setnewObject([...newarrys, objs]);
+    //       variantsData(newobject);
+    //     } else if (minQty > 0) {
+    //       let objs: any = {
+    //         item_code: variant.variant_code,
+    //         quantity: minQty,
+    //       };
+    //       let newarrys = newobject?.filter(
+    //         (item: any) => item?.item_code !== objs?.item_code
+    //       );
+    //       console.log("new object1", newarrys);
+    //       setnewObject([...newarrys, objs]);
+    //     }
+    //     variantsData(newobject);
+    //   })
+    // ) {
+    // } else {
+    // }
+  }, []);
 
   const InputvalchangeHandler: any = (e: any, variant_code: any) => {
-    console.log("inputtt", variant_code, e.target.value);
+    console.log("inputtt", variant_code, e.target.value, newobject);
+    if (e?.target?.value === "" && minQty === 0) {
+      console.log("cart", 1);
+    } else if (minQty > 0) {
+      console.log("cart", minQty);
+    } else {
+      console.log("cart", e.target.value);
+    }
     if (e?.target?.value !== "") {
       newarry = newobject?.find((item: any) => {
         return item?.item_code === variant_code;
       });
-      console.log(newarry);
+      console.log("updated new", newarry);
       if (newarry) {
         setnewObject(
           newobject?.map((item: any) => {
@@ -99,6 +165,7 @@ const DealerVariants = ({
                                 min="0"
                                 value={Quanties}
                                 name={item?.variant_code}
+                                defaultValue={1}
                                 onChange={(e) => {
                                   InputvalchangeHandler(e, item?.variant_code);
                                 }}
@@ -138,7 +205,8 @@ const DealerVariants = ({
                           type="number"
                           className="form-control varient_input"
                           min="0"
-                          value={Quanties}
+                          // value={Quanties}
+                          defaultValue={`${minQty === 0 ? "1" : minQty}`}
                           name={variants.item_code}
                           onChange={(e) => {
                             InputvalchangeHandler(e, variants.item_code);
diff --git a/components/ProductListingComponents/ProductListingMaster.tsx b/components/ProductListingComponents/ProductListingMaster.tsx
index 07a8f01..15ebf0c 100644
--- a/components/ProductListingComponents/ProductListingMaster.tsx
+++ b/components/ProductListingComponents/ProductListingMaster.tsx
@@ -157,22 +157,73 @@ const ProductListingMaster = () => {
   return (
     <>
       <div className="margin_from_nav_cart">
-        <section className="listing-page ">
-          <div className="container">
+        <div className="container d-flex justify-content-between w-100  ">
+          <div className="w-50">
             <BreadCrumbs
               handleToggleProductsListingView={handleToggleProductsListingView}
             />
-            <div className="row mt-2 ms-3">
+          </div>
+          <div className="col-lg-3 ">
+            <div className="row list-toggle-rtl">
+              {CONSTANTS.ENABLE_TOGGLE_PRODUCT_LISTING_VIEW ? (
+                <>
+                  <div className="col-lg-6 col-8"></div>
+                  <div className="col-lg-6 col-4 d-flex justify-content-end">
+                    <div className="ms-3 mob-breadcrum-icon">
+                      <i
+                        className="fa fa-list fa-lg cursor_pointer"
+                        aria-hidden="true"
+                        onClick={() =>
+                          handleToggleProductsListingView("list-view")
+                        }
+                      ></i>
+                      <i
+                        className="fa fa-th fa-lg ms-3 cursor_pointer"
+                        aria-hidden="true"
+                        onClick={() =>
+                          handleToggleProductsListingView("grid-view")
+                        }
+                      ></i>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="col-lg-6"></div>
+                  <div className="col-lg-6 ">
+                    <div>
+                      {selectedMultiLangData?.price} :-{" "}
+                      <select
+                        className="form_select"
+                        aria-label="Default select example"
+                      >
+                        <option value="low_to_high" selected>
+                          {selectedMultiLangData?.low_to_high}
+                        </option>
+                        <option value="high_to_low">
+                          {selectedMultiLangData?.high_to_low}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <section className="listing-page ">
+          <div className="container">
+            <div className="row mt-2 ms-3 product-listing-row">
               <span className="col-lg-3 handle_display_web_filter">
-                <div className="">
-                  <Topbar
-                    listItems={productListingData}
-                    handleToggleProductsListingView={
-                      handleToggleProductsListingView
-                    }
-                    selectedMultiLangData={selectedMultiLangData}
-                  />
-                </div>
+                {/* <div className=""> */}
+                <Topbar
+                  listItems={productListingData}
+                  handleToggleProductsListingView={
+                    handleToggleProductsListingView
+                  }
+                  selectedMultiLangData={selectedMultiLangData}
+                />
+                {/* </div> */}
                 <WebFilters
                   filtersData={filtersData}
                   loading={filtersLoading}
diff --git a/components/ProductListingComponents/products-data-view/products-grid-view.tsx b/components/ProductListingComponents/products-data-view/products-grid-view.tsx
index cec32f0..60bd361 100644
--- a/components/ProductListingComponents/products-data-view/products-grid-view.tsx
+++ b/components/ProductListingComponents/products-data-view/products-grid-view.tsx
@@ -30,10 +30,10 @@ const ProductsGridView = (props: ProductsViewProps) => {
   return (
     <div
       className={`${
-        filtersData && filtersData?.length > 0 ? "col-lg-9" : "col-lg-12"
-      }`} 
+        filtersData && filtersData?.length > 0 ? "col-lg-9 px-0" : "col-lg-12"
+      }`}
     >
-      <div className="row product-mg-r">
+      <div className="row product-mg-r ">
         {loading ? (
           <div className="row justify-content-center">
             {[...Array(10)].map(() => (
@@ -46,8 +46,8 @@ const ProductsGridView = (props: ProductsViewProps) => {
           </div>
         ) : listItems.length > 0 ? (
           listItems?.map((items: any, index: number) => (
-            <div className="col-md-3 mt-0 product-grid-view" key={index}  >
-              <ProductCard 
+            <div className="col-md-3 mt-0 product-grid-view" key={index}>
+              <ProductCard
                 key={index}
                 name={items?.name}
                 item_name={items?.item_name}
diff --git a/components/ProductListingComponents/products-data-view/products-list-view.tsx b/components/ProductListingComponents/products-data-view/products-list-view.tsx
index 81e5127..6e698a8 100644
--- a/components/ProductListingComponents/products-data-view/products-list-view.tsx
+++ b/components/ProductListingComponents/products-data-view/products-list-view.tsx
@@ -46,7 +46,7 @@ const ProductsListView = (props: ProductsProps) => {
           ))}
         </div>
       ) : (
-        <div className="row ">
+        <div className="row product-list-card-rtl">
           {product_data && product_data.length > 0 ? (
             product_data.map((product: any, index: number) => {
               return (
diff --git a/components/ProfilePage/ProfileMaster.tsx b/components/ProfilePage/ProfileMaster.tsx
index 478cebd..4df1037 100644
--- a/components/ProfilePage/ProfileMaster.tsx
+++ b/components/ProfilePage/ProfileMaster.tsx
@@ -496,7 +496,7 @@ const ProfileMaster = () => {
           <div className="col-lg-12">
             <div className="">
               <div className="profile">
-                <h4 className="text-start fw-bolder text-uppercase mb-0 pb-2 color-black">
+                <h4 className="text-inline-start fw-bolder text-uppercase mb-0 pb-2 products-name">
                   {selectedMultiLangData?.enquiry_history}
                 </h4>
               </div>
@@ -710,7 +710,7 @@ const ProfileMaster = () => {
                   </ul>
                 </div>
               </div>
-              <div className="col-lg-9 myacc-margin-mob" >
+              <div className="col-lg-9 profile-tab-content-rtl">
                 <div className="tab-content" id="contact-tabContent">
                   <div
                     className={`tab-pane fade show  ${!documentQueued.setTrue ? "active" : ""
diff --git a/components/QuickOrder/QuickOrderCard.tsx b/components/QuickOrder/QuickOrderCard.tsx
index 2a39ca9..6bbf43e 100644
--- a/components/QuickOrder/QuickOrderCard.tsx
+++ b/components/QuickOrder/QuickOrderCard.tsx
@@ -40,7 +40,7 @@ const QuickOrderCard = (props: any) => {
           .map((data: any, index: any) => (
             <>
               {/* <div className="col-lg-2 col-2"></div> */}
-              <div className="col-lg-2 col-12 text-start ps-lg-0 color-black cart-image ">
+              <div className="col-lg-2 col-12 text-inline-start ps-lg-0 products-name cart-image ">
                 {data.image_url !== null ? (
                   <Image
                     loader={myLoader}
@@ -69,12 +69,20 @@ const QuickOrderCard = (props: any) => {
                   {selectedMultiLangData?.item_name}
                   {data.item_name}
                 </p>
-                <p className="mb-0 bold">
-                  {selectedMultiLangData?.item_code}: {data.name}
-                </p>
-                <p className=" mb-0 quick-detail-lh">
-                  {selectedMultiLangData?.brand}: {data.brand}
+                <p className="mb-0 bold d-inline-flex">
+                  {selectedMultiLangData?.item_code}:
+                  <span>&nbsp;{data.name}</span>
                 </p>
+                <div>
+                  <p className=" mb-0 quick-detail-lh d-inline-flex">
+                    {selectedMultiLangData?.brand}:{" "}
+                    <span>
+                      {" "}
+                      &nbsp;
+                      {data.brand}
+                    </span>
+                  </p>
+                </div>
 
                 <Link href="" legacyBehavior>
                   <a
@@ -101,7 +109,7 @@ const QuickOrderCard = (props: any) => {
                   )}
                 </p>
               </div>
-              <div className="col-lg-1 col-6 mx-lg-0 ps-0 mx-0 color-black quick-order-mgs" >
+              <div className="col-lg-1 col-6 products-name d-inline-flex justify-content-center align-items-start mt-0">
                 {
                   <>
                     <input
@@ -114,7 +122,7 @@ const QuickOrderCard = (props: any) => {
                   </>
                 }
               </div>
-              <div className="col-lg-1 col-12 mx-lg-0 mx-0 price_font_family color-black mb-3 quick-order-mgs" >
+              <div className="col-lg-1 col-12 mx-lg-0 mx-4 price_font_family products-name mb-3 d-inline-flex justify-content-center">
                 {data.currency_symbol}
                 <IndianNumber
                   value={(total = data.price * showValue(data?.min_order_qty))}
diff --git a/components/QuickOrder/QuickOrderMaster.tsx b/components/QuickOrder/QuickOrderMaster.tsx
index ff2ec46..8b2d27f 100644
--- a/components/QuickOrder/QuickOrderMaster.tsx
+++ b/components/QuickOrder/QuickOrderMaster.tsx
@@ -125,8 +125,8 @@ const QuickOrder = () => {
   };
 
   return (
-    <div className="container  margin_from_nav quickorder-main-conatainer-mob color-black" >
-      <div className="row  mx-0 mt-0 ">
+    <div className="container  margin_from_nav_quick_o quickorder-main-conatainer-mob products-name">
+      <div className="row  mx-0 mt-5  ">
         <div className="col-lg-12  ">
           <div className="row">
             {/* <div className="col-lg-2"></div> */}
@@ -185,30 +185,30 @@ const QuickOrder = () => {
 
       <div className="row  mt-5  table-heading-quick-order-mob color-black  ms-3 me-1 " >
         <div className="col-lg-12 text-center cart_heading_bg">
-          <div className="row products_title_quick py-3 ">
+          <div className="row justify-content-center products_title_quick py-3 ">
             {/* <div className="col-lg-2 cart_heading_bg_none"></div> */}
             <div className="col-lg-2 ">
-              <h5 className="mb-0 pt-2 text-start ps-lg-4 ">
+              <h5 className="mb-0 pt-2 text-start ">
                 {/* {selectedMultiLangData?.image} */}
               </h5>
             </div>
-            <div className="col-lg-6  color-black ">
-              <h6 className="mb-0 pt-2 text-start ps-lg-5 font-size-quick">
+            <div className="col-lg-7  products-name px-5 d-inline-flex justify-content-start">
+              <h6 className="mb-0 pt-2 text-start font-size-quick">
                 {selectedMultiLangData?.details}
               </h6>
             </div>
-            <div className="col-lg-1  mx-lg-5 ms-5 ps-5 price-title-margin">
-              <h6 className="mb-0 pt-2 text-end ps-lg-5 font-size-quick">
+            <div className="col-lg-1 d-inline-flex ">
+              <h6 className="mb-0 pt-2 text-end  font-size-quick">
                 {selectedMultiLangData?.price}
               </h6>
             </div>
-            <div className="col-lg-1 col-1 text-start ms-0 ps-0 qty-title-margin" >
-              <h6 className="mb-0 pt-2 ps-lg-2 font-size-quick">
+            <div className="col-lg-1 col-1 text-start  m-auto mt-0 d-inline-flex justify-content-start">
+              <h6 className="mb-0 pt-2 font-size-quick d-flex ">
                 {selectedMultiLangData?.quantity_c}
               </h6>
             </div>
-            <div className="col-lg-1 col-1 text-start ms-3 total-tiltle-margin">
-              <h6 className="mb-2 pt-2 ps-lg-3 font-size-quick">
+            <div className="col-lg-1 col-1 d-inline-flex justify-content-start">
+              <h6 className="mb-2 pt-2  font-size-quick">
                 {selectedMultiLangData?.total}
               </h6>
             </div>
diff --git a/components/Wishlist/WishlistMaster.tsx b/components/Wishlist/WishlistMaster.tsx
index b0d185b..f5b1560 100644
--- a/components/Wishlist/WishlistMaster.tsx
+++ b/components/Wishlist/WishlistMaster.tsx
@@ -211,18 +211,18 @@ const WishlistMaster = () => {
                       {" "}
                       {stockData?.incoming_date !== ""
                         ? stockData?.incoming_date
-                          ?.split("-")
-                          .reverse()
-                          .join("-")
+                            ?.split("-")
+                            .reverse()
+                            .join("-")
                         : stockData?.incoming_date === ""}
                     </td>
                     <td className="text-center">{stockData?.additional_qty}</td>
                     <td className="text-center">
                       {stockData?.available_on !== ""
                         ? stockData?.available_on
-                          ?.split("-")
-                          .reverse()
-                          .join("-")
+                            ?.split("-")
+                            .reverse()
+                            .join("-")
                         : stockData?.available_on === ""}
                     </td>
                   </tr>
@@ -346,10 +346,11 @@ const WishlistMaster = () => {
                             </div>
                           </div>
                           <div className="col-lg-7 col-12 py-2">
-                            <p className="mb-0 fs-5 ">
+                            <p className="mb-0 fs-5 d-inline-flex">
                               <span className="bold">
                                 {selectedMultiLangData?.item_code}:
-                              </span>
+                              </span>{" "}
+                              &nbsp;
                               {item?.name}
                             </p>
                             <a
@@ -361,10 +362,11 @@ const WishlistMaster = () => {
                             <p className="mb-0 fs-6 mb-0 pb-0">
                               {item?.short_description}
                             </p>
-                            <p className="mb-0 fs-5 mb-0 pb-0 mt-0 pt-0">
+                            <p className="mb-0 fs-5 mb-0 pb-0 mt-0 pt-0 d-inline-flex">
                               <span className="bold">
                                 {selectedMultiLangData?.brand}:{" "}
-                              </span>
+                              </span>{" "}
+                              &nbsp;
                               {item?.brand}
                             </p>
                           </div>
@@ -391,16 +393,18 @@ const WishlistMaster = () => {
                         )}
                       </div>
                       <div className="col-lg-2 col-md-3">
-                        <div className="d-flex align-items-center  ml-2">
-                          <span
-                            className="fs-2 ml-lg-2 icon-cursor"
-                            onClick={() =>
-                              decrementCount(index, item?.min_order_qty)
-                            }
-                          >
-                            -
-                          </span>
-                          <div className="pe-3 input-width">
+                        <div className="d-inline-flex  align-items-center">
+                          <div>
+                            <span
+                              className="fs-2 icon-cursor"
+                              onClick={() =>
+                                decrementCount(index, item?.min_order_qty)
+                              }
+                            >
+                              -
+                            </span>
+                          </div>
+                          <div className="w-25 mx-3">
                             <input
                               type="text"
                               defaultValue={
@@ -409,11 +413,12 @@ const WishlistMaster = () => {
                                   : item?.min_order_qty
                               }
                               value={productCounts[index]}
-                              className={`${alertMinQty === true &&
-                                  productCounts[index] === item?.min_order_qty
+                              className={`${
+                                alertMinQty === true &&
+                                productCounts[index] === item?.min_order_qty
                                   ? "text-danger"
                                   : ""
-                                } w-100 ml-2 pb-lg-0 pb-1 text-center`}
+                              } w-100 pb-lg-0 pb-1 text-center`}
                               onChange={(e: any) =>
                                 handleQuantityChange(
                                   +e?.target?.value,
@@ -425,22 +430,26 @@ const WishlistMaster = () => {
                               max="99999"
                             />
                           </div>
-                          <span
-                            className="fs-2 ml-2 ml-md-5 icon-cursor"
-                            onClick={() =>
-                              incrementCount(index, item?.min_order_qty)
-                            }
-                          >
-                            +
-                          </span>
+                          <div>
+                            {" "}
+                            <span
+                              className="fs-2  icon-cursor"
+                              onClick={() =>
+                                incrementCount(index, item?.min_order_qty)
+                              }
+                            >
+                              +
+                            </span>
+                          </div>
                         </div>
                         {item?.min_order_qty !== 0 ? (
                           <div
-                            className={`${alertMinQty === true &&
-                                productCounts[index] === item?.min_order_qty
+                            className={`${
+                              alertMinQty === true &&
+                              productCounts[index] === item?.min_order_qty
                                 ? "text-danger"
                                 : "text-dark"
-                              } fs-6 mt-1 text-uppercase bold`}
+                            } fs-6 mt-1 text-uppercase bold`}
                           >
                             {selectedMultiLangData?.minimum_order_qty}:{" "}
                             {item?.min_order_qty}
diff --git a/components/myOrder/MyOrderMaster.tsx b/components/myOrder/MyOrderMaster.tsx
index 794d64f..a6cbfbc 100644
--- a/components/myOrder/MyOrderMaster.tsx
+++ b/components/myOrder/MyOrderMaster.tsx
@@ -22,18 +22,18 @@ const MyOrderMaster = () => {
     UseCartOrderHistory();
   return (
     <>
-      <div className="container margin_from_nav myorder-wrapper-pd " >
-        <div className="mt-0 row">
+      <div className="container margin_from_nav my-order-container-pd ">
+        <div className="mt-4 row">
           <div className="col-md-6">
             <div className="page_heading">
-              <h4 className=" ">
+              <h2 className=" bold text-captilize pb-3 order-heading products-name">
                 {selectedMultiLangData?.your_orders}
-              </h4>
+              </h2>
             </div>
           </div>
         </div>
-        <ul className="nav nav-tabs nav-tabs-myorder color-black" role="tablist" >
-          <li className="nav-item" >
+        <ul className="nav nav-tabs products-name" role="tablist">
+          <li className="nav-item">
             <a
               className="nav-link active"
               data-bs-toggle="tab"
@@ -49,8 +49,8 @@ const MyOrderMaster = () => {
           </li>
         </ul>
 
-        <div className="tab-content " >
-          <div id="placed_order" className="container tab-pane active show mb-0 pb-0">
+        <div className="tab-content">
+          <div id="placed_order" className=" container tab-pane active show">
             <br />
             <PlaceOrder
               orderHistoryItems={orderHistoryItems}
diff --git a/components/myOrder/components/PlaceOrder.tsx b/components/myOrder/components/PlaceOrder.tsx
index db4e27d..2cbd7f6 100644
--- a/components/myOrder/components/PlaceOrder.tsx
+++ b/components/myOrder/components/PlaceOrder.tsx
@@ -21,8 +21,8 @@ const PlaceOrder = ({
   const currency_state_from_redux: any = useSelector(currency_selector_state);
   return (
     <>
-      <div role="tabpanel" aria-hidden="false" >
-        <div className="row mb-2 color-black select-myorder-margin" >
+      <div role="tabpanel" aria-hidden="false">
+        <div className="row mb-5 products-name">
           <div className="col-lg-12" >
             <div className="row">
               <div className="col-lg-2 col-sm-4 col-6">
diff --git a/index.tsx b/index.tsx
index af73389..82b5769 100644
--- a/index.tsx
+++ b/index.tsx
@@ -5,11 +5,12 @@ import HomePage from "../components/HomePage";
 import Header from "../components/Header/Header";
 import { getMultiCurrencyValue } from "../services/api/general_apis/default-currency-api";
 import MultiLangApi from "../services/api/general_apis/multilanguage-api";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setDefaultCurrencyValue } from "../store/slices/general_slices/multi-currency-slice";
 import { setMultiLingualData } from "../store/slices/general_slices/multilang-slice";
 import { setRevalidationTime } from "../store/slices/general_slices/cache-slice";
 import { askForPermissionToReceiveNotifications } from "../push-notifications";
+
 const Home: NextPage = (fetchedDataFromServer: any) => {
   askForPermissionToReceiveNotifications();
   console.log("check data of server obj", fetchedDataFromServer);
@@ -55,14 +56,14 @@ export async function getServerSideProps(context: any) {
       fetchedDataFromServer = {};
     }
   }
-  let get_default_currency_value:any = await getMultiCurrencyValue();
+  let get_default_currency_value: any = await getMultiCurrencyValue();
   if (get_default_currency_value?.status === 200) {
     fetchedDataFromServer.defaultCurrencyValue =
       get_default_currency_value?.data?.message;
   } else {
     fetchedDataFromServer.defaultCurrencyValue = {};
   }
-  let get_multi_lingual_data_value:any = await MultiLangApi();
+  let get_multi_lingual_data_value: any = await MultiLangApi();
   if (get_multi_lingual_data_value?.length > 0) {
     fetchedDataFromServer.multiLingualValues = get_multi_lingual_data_value;
   } else {
diff --git a/styles/base/header/_header.scss b/styles/base/header/_header.scss
index cd39fd7..fcbb009 100644
--- a/styles/base/header/_header.scss
+++ b/styles/base/header/_header.scss
@@ -29,7 +29,7 @@
           letter-spacing: -0.027em,
           text-transform: capitalize,
           _links-gap: false,
-          icon: (margin-#{$right}: 0.6rem, font-size: 1.5rem),
+          icon: (margin-#{$right}: 0.6rem, font-size: 1.5rem)
         ),
       // Header Middle
       middle:
@@ -41,10 +41,7 @@
           background: $primary-color,
           font-size: 1.2rem,
           border-bottom: 1px solid $border-color,
-          logo: (
-            margin-#{$right}: 4.1rem,
-            _mobile-margin-#{$right}: 2rem,
-          ),
+          logo: (margin-#{$right}: 4.1rem, _mobile-margin-#{$right}: 2rem)
         ),
       bottom: (
         padding-top: false,
@@ -57,14 +54,14 @@
         font-size: 1.4rem,
         font-weight: 600,
         letter-spacing: -0.025em,
-        text-transform: false,
+        text-transform: false
       ),
       // Main Nav
       main-nav:
         (
           margin: false,
           padding: false,
-          background: false,
+          background: false
         ),
       search: (
         _background-color: $primary-color,
@@ -74,28 +71,28 @@
         expanded:
           (
             // width: 55.6rem,
-            height: false,
+            height: false
           ),
         simple: (
           width: 35rem,
-          height: false,
+          height: false
         ),
         round: (
-          border-radius: 3rem,
+          border-radius: 3rem
         ),
         rounded: (
-          border-radius: 0.4rem,
+          border-radius: 0.4rem
         ),
         btn: (
-          width: 5.1rem,
+          width: 5.1rem
         ),
         toggle: (
-          width: 30rem,
-        ),
+          width: 30rem
+        )
       ),
       logo: (
         min-width: 14.4rem,
-        margin-#{$right}: 2rem,
+        margin-#{$right}: 2rem
       ),
       // Login
       compare:
@@ -107,26 +104,20 @@
             margin-top: 0.1rem,
             font-weight: inherit,
             text-transform: false,
-            color: inherit,
+            color: inherit
           ),
           icon: (
             font-size: 3.3rem,
-            color: inherit,
-          ),
+            color: inherit
+          )
         ),
       // Wishlist
       wishlist:
         (
           margin-#{$right}: 2.3rem,
           color: $dark-color,
-          label: (
-            _gap: false,
-            margin-top: 0.3rem,
-            font-weight: inherit,
-            text-transform: false,
-            color: inherit
-          ),
-          icon: (font-size: 2.7rem, color: #f15622),
+          label: (_gap: false, margin-top: 0.3rem, font-weight: inherit, text-transform: false, color: inherit),
+          icon: (font-size: 2.7rem, color: #f15622)
         ),
       // Minicart
       cart:
@@ -135,8 +126,8 @@
           color: $dark-color,
           icon: (
             font-size: 2.3rem,
-            color: inherit,
-          ),
+            color: inherit
+          )
         ),
       // Call
       call:
@@ -146,9 +137,9 @@
           icon: (margin: side-values(0 0.6rem 0.2rem 0), font-size: 3rem),
           info: (margin-top: 0.4rem),
           num: (font-size: 1.6rem, line-height: 1.7),
-          chat: (color: $dark-color),
-        ),
-    ),
+          chat: (color: $dark-color)
+        )
+    )
   )
 );
 
@@ -160,7 +151,6 @@
   display: none !important;
 }
 
-
 @media screen and (max-width: 1000px) {
   .resp-dropdown {
     display: none !important;
@@ -201,19 +191,18 @@
 
 .fixed-header {
   position: fixed;
-  top:0;
+  top: 0;
   background-color: $primary-color !important;
   z-index: 888;
   width: 100% !important;
 }
 
 .margin_from_nav_l {
-  margin-top: 107px !important;
+  margin-top: 120px !important;
+}
+.margin_from_nav {
+  margin-top: 170px !important;
 }
-// .margin_from_nav {
-//   margin-top: 150px !important;
-//   margin-bottom: 15px !important
-// }
 .margin_from_nav_cart {
   margin-top: 116px !important;
 }
@@ -222,17 +211,16 @@
   margin-top: 168px !important;
 }
 
-@media only screen and (max-width:560px){
-
-.margin_from_nav_l {
-  margin-top: 97px !important;
-}
-.margin_from_nav {
-  margin-top: 87px !important;
-}
-.margin_from_nav_quick_o {
-  margin-top: 107px !important;
-}
+@media only screen and (max-width: 560px) {
+  .margin_from_nav_l {
+    margin-top: 97px !important;
+  }
+  .margin_from_nav {
+    margin-top: 87px !important;
+  }
+  .margin_from_nav_quick_o {
+    margin-top: 107px !important;
+  }
 }
 
 .btn_close_btn {
@@ -303,7 +291,9 @@
       transform: translateX(if-ltr(-50%, 50%));
       border: 11px solid transparent;
       border-bottom: 11px solid $white-color;
-      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+      transition:
+        opacity 0.2s ease-out,
+        transform 0.2s ease-out;
       visibility: hidden;
 
       opacity: 0;
@@ -433,7 +423,9 @@
     height: 5.3rem;
     border: 1px solid $body-color;
     font-size: 2.6rem;
-    transition: border-color 0.3s, color 0.3s;
+    transition:
+      border-color 0.3s,
+      color 0.3s;
   }
 
   span {
@@ -546,7 +538,10 @@
       opacity: 0;
       transform: translate3d(0, 20px, 0);
       z-index: 100;
-      transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
+      transition:
+        transform 0.3s,
+        visibility 0.3s,
+        opacity 0.3s;
     }
 
     .menu_titlee:hover {
@@ -629,7 +624,9 @@
       justify-content: center;
       background: $white-color;
       // border-radius: 0 3rem 3rem 0;
-      transition: opacity 0.4s, color 0.4s;
+      transition:
+        opacity 0.4s,
+        color 0.4s;
 
       i {
         margin: 0;
@@ -762,7 +759,6 @@
 
 .fa-user-o:before {
   font-size: 25px !important;
-
 }
 
 .compare {
@@ -947,7 +943,9 @@
 
   .welcome-msg {
     transform: translateX(0);
-    animation: 6s linear 2s 1 showMsgFirst, 12s linear 8s infinite showMsg;
+    animation:
+      6s linear 2s 1 showMsgFirst,
+      12s linear 8s infinite showMsg;
   }
 
   .header-middle {
@@ -1176,9 +1174,7 @@ header.header.fixed {
     background-color: $primary-color !important;
   }
 }
-.color-black{
-  color: black;
-}
+
 // navbar
 .navbar-left-icon1 {
   // border:2px solid red;
@@ -1192,25 +1188,24 @@ header.header.fixed {
 }
 .ternarytheme-middle-header {
   background-color: $white-color !important;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 .Secondarytheme-mainMenu-color {
   color: $black-color !important;
 }
 .secondarytheme-select {
-  background-color:  $black-color !important;
+  background-color: $black-color !important;
   color: $white-color !important;
-  border:none;
+  border: none;
 }
 .secondarythemedropdown-login {
   color: $white-color;
-padding: 7px !important;
+  padding: 7px !important;
 }
 .secondarythemedropdown-login:hover {
   color: #fff !important;
 }
 @media (max-width: 576px) {
-
 }
 
 .cursor_pointer {
@@ -1225,10 +1220,10 @@ padding: 7px !important;
 }
 
 .dropdown-item:active {
-  background-color:#e9ecef !important;
+  background-color: #e9ecef !important;
 }
 
-.dropdown-toggle::after{
+.dropdown-toggle::after {
   display: none !important;
 }
 // .login-icon-margin{
@@ -1239,30 +1234,25 @@ padding: 7px !important;
 // }
 
 // Forget
-.padding-top-forget{
+.padding-top-forget {
   padding-top: 50px !important;
 }
-.btn-forget-mb{
+.btn-forget-mb {
   padding-bottom: 20px !important;
 }
 
-
-
-
-
-
 @media only screen and (max-width: 600px) {
- .login-mob-margin{
-  // border: 2px solid red;
-  margin-bottom: 7.1px !important
- }
- .heart-icon-mob{
-  margin-right: 10px !important;
- }
-  .mob-icon-wrapper{
-      display: flex !important;
-      justify-content: space-between !important;
-      // border: 2px solid red
+  .login-mob-margin {
+    // border: 2px solid red;
+    margin-bottom: 7.1px !important;
+  }
+  .heart-icon-mob {
+    margin-right: 10px !important;
+  }
+  .mob-icon-wrapper {
+    display: flex !important;
+    justify-content: space-between !important;
+    // border: 2px solid red
   }
   .not-acc-margin{
     margin-left: -6px !important;
@@ -1270,6 +1260,6 @@ padding: 7px !important;
   // .mob-logo-img1 {
   //   width: 500px !important;
   //   height: 30px !important;
-    
+
   // }
-}
\ No newline at end of file
+}
diff --git a/styles/components/_checkoutCustom.scss b/styles/components/_checkoutCustom.scss
index 12d7668..9e6b703 100644
--- a/styles/components/_checkoutCustom.scss
+++ b/styles/components/_checkoutCustom.scss
@@ -58,9 +58,8 @@
 }
 
 .card_p {
-  font-size: 14px;
-  color:black !important;
-  // margin-top: -5px;
+  font-size: 13px;
+  margin-top: -5px;
 }
 
 /* order sumamry */
diff --git a/styles/components/_element.scss b/styles/components/_element.scss
index 28cbf6c..f70d866 100644
--- a/styles/components/_element.scss
+++ b/styles/components/_element.scss
@@ -16,14 +16,18 @@
         display: block;
         padding: 3.1rem 0 3.6rem;
         background-color: $white-color;
-        box-shadow: 0 2rem 3rem rgba(0,0,0,0.05), 0 0 5px rgba(0,0,0,0.05);
+        box-shadow:
+            0 2rem 3rem rgba(0, 0, 0, 0.05),
+            0 0 5px rgba(0, 0, 0, 0.05);
         border-radius: 1rem;
         svg {
             fill: $body-color;
             stroke: $body-color;
             stroke-dashoffset: 1500;
             stroke-dasharray: 1500;
-            transition: transform .3s, fill .5s;
+            transition:
+                transform 0.3s,
+                fill 0.5s;
         }
         &:hover {
             svg {
@@ -31,7 +35,10 @@
                 stroke-dashoffset: 0;
                 stroke: $primary-color;
                 fill: transparent;
-                transition: transform .3s, fill .5s, stroke-dashoffset 6s;
+                transition:
+                    transform 0.3s,
+                    fill 0.5s,
+                    stroke-dashoffset 6s;
             }
             p {
                 color: $primary-color;
@@ -44,7 +51,7 @@
             text-transform: uppercase;
             line-height: 1.2;
             margin-bottom: 0;
-            transition: color .4s;
+            transition: color 0.4s;
         }
         &.element-vendor {
             padding: 2.5rem 0 3.6rem;
@@ -60,4 +67,8 @@
         max-width: 23.2rem;
         margin: 0 auto;
     }
-}
\ No newline at end of file
+}
+
+.icon-box-icon {
+    padding: 0px 10px;
+}
diff --git a/styles/components/_products.scss b/styles/components/_products.scss
index cb918d2..00dc292 100644
--- a/styles/components/_products.scss
+++ b/styles/components/_products.scss
@@ -15,24 +15,25 @@
             font-family: $font-family,
             font-size: 1rem,
             // color: #020101,
-            body: (
-                // padding-top: 1.7rem,
-                background-color: #fff
-            ),
+            body:
+                (
+                    // padding-top: 1.7rem,
+                    background-color: #fff
+                ),
             label: (
-                margin-bottom: .5rem,
+                margin-bottom: 0.5rem,
                 font-family: false,
                 font-size: 1.2em,
-                letter-spacing: -.005em,
+                letter-spacing: -0.005em,
                 color: #fff,
                 line-height: 1,
-                padding: .6rem 1rem,
-                border-radius: .3rem,
+                padding: 0.6rem 1rem,
+                border-radius: 0.3rem,
                 text-transform: uppercase,
                 new: (
                     color: false,
                     background: $primary-color,
-                    padding: .6rem 1rem
+                    padding: 0.6rem 1rem
                 ),
                 discount: (
                     color: false,
@@ -43,7 +44,7 @@
                 )
             ),
             category: (
-                margin-bottom: .5rem,
+                margin-bottom: 0.5rem,
                 font-family: false,
                 font-size: 1.1rem,
                 color: #999,
@@ -51,14 +52,14 @@
                 text-transform: uppercase
             ),
             name: (
-                margin-bottom: .7rem,
+                margin-bottom: 0.7rem,
                 font-family: false,
                 font-size: 1.3rem,
                 font-weight: 500,
-                letter-spacing: false,
+                letter-spacing: false
             ),
             rating: (
-                margin-bottom: .6rem,
+                margin-bottom: 0.6rem,
                 font-size: 1.2rem,
                 _star-color: $secondary-color
             ),
@@ -67,7 +68,7 @@
                 font-family: false,
                 font-size: 1.6rem,
                 font-weight: 600,
-                letter-spacing: -.05em,
+                letter-spacing: -0.05em,
                 margin-bottom: false,
                 old: (
                     font-weight: 400,
@@ -76,7 +77,7 @@
                 new: (
                     color: #333,
                     _space: 1rem,
-                    text-decoration: none,
+                    text-decoration: none
                 )
             ),
             sales-wrapper: (
@@ -94,13 +95,13 @@
                 height: 2.6rem,
                 color: #333,
                 border: 1px solid #ccc,
-                padding: .2rem,
+                padding: 0.2rem,
                 _active-border: 1px solid $primary-color,
                 _active-outline: #fff solid 2px,
 
                 // custom types
                 _color-border: 1px solid #ccc,
-                _image-border: 0,
+                _image-border: 0
             )
         )
     )
@@ -112,32 +113,34 @@
 
 .handle_display_mob_filter {
     display: none !important;
-  }
+}
 
-@media only screen and (max-width:450px){
+@media only screen and (max-width: 450px) {
     .handle_display_mob_filter {
-      display: block !important;
+        display: block !important;
     }
-  
+
     .handle_display_web_filter {
-      display: none !important;
+        display: none !important;
     }
-  }
+}
 
-  .sorting_bar .total_result {
+.sorting_bar .total_result {
     line-height: 2.5;
-  }
+}
 
-  .sorting_bar .form_select {
+.sorting_bar .form_select {
     width: auto;
     border: none;
     box-shadow: none;
-  }
+}
 
 .product {
     position: relative;
-    @include print_css( product );
-    transition: box-shadow .3s, opacity .3s;
+    @include print_css(product);
+    transition:
+        box-shadow 0.3s,
+        opacity 0.3s;
     &:hover {
         .product-action,
         .product-action-vertical,
@@ -155,19 +158,18 @@
         overflow: hidden;
         white-space: nowrap;
     }
-    
 }
 
 // Product Media
 .product-media {
     position: relative;
     margin-bottom: 0;
-    transition: box-shadow .35s;
+    transition: box-shadow 0.35s;
     img {
         display: block;
         width: 100%;
         height: auto;
-        transition: opacity .4s;
+        transition: opacity 0.4s;
     }
     img:last-child {
         position: absolute;
@@ -205,26 +207,26 @@
 .product-label {
     display: inline-block;
     text-align: center;
-    @include print_css( product, label );
+    @include print_css(product, label);
     &.label-new {
-        @include print_css( product, label, new );
+        @include print_css(product, label, new);
     }
     &.label-discount {
-        @include print_css( product, label, discount );
+        @include print_css(product, label, discount);
     }
     &.label-hot {
-        @include print_css( product, label, hot );
+        @include print_css(product, label, hot);
     }
 }
 // Product sales bar
 .product-sales-wrapper {
     position: relative;
-    @include print_css( product, sales-wrapper );
+    @include print_css(product, sales-wrapper);
     .progress-bar {
-        @include print_css( product, sales-wrapper, bar );
-        margin-bottom: .7rem;
+        @include print_css(product, sales-wrapper, bar);
+        margin-bottom: 0.7rem;
         span {
-            @include print_css( background-color, product, sales-wrapper, bar, span );
+            @include print_css(background-color, product, sales-wrapper, bar, span);
         }
     }
     .product-sales-count {
@@ -249,10 +251,11 @@
     color: #fff;
     font-size: 1.4em;
     font-weight: 600;
-    letter-spacing: -.025em;
+    letter-spacing: -0.025em;
     text-transform: uppercase;
-    transition: opacity .3s;
-    &:hover, &:active {
+    transition: opacity 0.3s;
+    &:hover,
+    &:active {
         color: #fff;
     }
     &.btn-link {
@@ -268,7 +271,7 @@
         }
     }
     &.btn-sm {
-        padding: .693em 0;
+        padding: 0.693em 0;
     }
 }
 
@@ -294,13 +297,14 @@
     font-weight: 600;
     &.btn-link {
         color: $primary-color;
-        &:hover, &:active {
+        &:hover,
+        &:active {
             color: $primary-color;
         }
     }
     &:not(.btn-product-icon) i.w-icon-cart {
         font-size: 1.8rem;
-        margin-bottom: .4rem;
+        margin-bottom: 0.4rem;
     }
 }
 
@@ -311,7 +315,7 @@
     justify-content: center;
     width: 3.6rem;
     height: 3.6rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     background-color: #fff;
     // border: 1px solid #eee;
     // color: #999;
@@ -320,27 +324,38 @@
     font-weight: 400;
     line-height: 3.5rem;
     overflow: hidden;
-    transition: background-color .3s, border-color .3s, color .3s, visibility .3s, opacity .3s, transform .3s;
-    &:hover, &:active {
+    transition:
+        background-color 0.3s,
+        border-color 0.3s,
+        color 0.3s,
+        visibility 0.3s,
+        opacity 0.3s,
+        transform 0.3s;
+    &:hover,
+    &:active {
         border-color: $primary-color;
         color: #999;
         // background-color: $primary-color;
     }
     &.btn-cart,
-    &.btn-quickview { font-size: 1.6em; }
-    &.btn-compare { font-size: 2em;}
+    &.btn-quickview {
+        font-size: 1.6em;
+    }
+    &.btn-compare {
+        font-size: 2em;
+    }
     .product-action-vertical & {
         border-radius: 50%;
     }
     &.btn-cart {
-        margin-bottom: .2rem;
+        margin-bottom: 0.2rem;
     }
     &.loading {
         // background-color: #fff;
         // opacity: .2;
-        background-color: rgba(255,255,255,.2);
+        background-color: rgba(255, 255, 255, 0.2);
         &::before {
-            opacity: .4;
+            opacity: 0.4;
         }
     }
 }
@@ -355,7 +370,10 @@
     align-items: center;
     background-color: transparent;
     z-index: 10;
-    transition: opacity .3s, visibility .3s, bottom .3s;
+    transition:
+        opacity 0.3s,
+        visibility 0.3s,
+        bottom 0.3s;
     opacity: 0;
     visibility: hidden;
 }
@@ -365,7 +383,9 @@
     position: absolute;
     top: 1.5rem;
     #{$right}: 1.5rem;
-    transition: opacity .3s, visibility .3s;
+    transition:
+        opacity 0.3s,
+        visibility 0.3s;
     opacity: 0;
     visibility: hidden;
 }
@@ -377,9 +397,9 @@
     position: absolute;
     justify-content: center;
     background-color: #fff;
-    box-shadow: 5px 5px 8px rgba(0,0,0,0.08);
+    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.08);
     #{$left}: 50%;
-    transform: translateX(if-ltr(-50%,50%));
+    transform: translateX(if-ltr(-50%, 50%));
     bottom: 0;
     width: 166px;
     max-width: 80%;
@@ -387,7 +407,10 @@
     padding: 5px;
     opacity: 0;
     visibility: visible;
-    transition: opacity 0.3s,visibility 0.3s,bottom 0.3s;
+    transition:
+        opacity 0.3s,
+        visibility 0.3s,
+        bottom 0.3s;
     .btn-product-icon {
         margin-bottom: 0;
         border: none;
@@ -401,24 +424,25 @@
     }
 }
 
-.product-action-horizontal, 
-.product-hidden-details, 
+.product-action-horizontal,
+.product-hidden-details,
 .product-list .product-details {
     .btn-product-icon {
-        &:hover, &:active, &:focus {
+        &:hover,
+        &:active,
+        &:focus {
             background-color: transparent;
             color: $primary-color;
         }
     }
 }
 
-
 // Product Details
 .product-details {
     position: relative;
     // height: 100px !important;
-    @include print_css( product, body );
-    transition: box-shadow .3s;
+    @include print_css(product, body);
+    transition: box-shadow 0.3s;
     > .btn-wishlist {
         position: absolute;
         top: 1.7rem;
@@ -429,8 +453,8 @@
         &.loading {
             #{$right}: 1.8rem;
             &::after {
-                #{$left}: .9rem;
-                top: .9rem;
+                #{$left}: 0.9rem;
+                top: 0.9rem;
             }
         }
         &:hover {
@@ -461,13 +485,16 @@
         min-width: 9.5rem;
         max-width: 12.3rem;
         height: 3.5rem;
-        padding: .92em 0;
+        padding: 0.92em 0;
         font-size: 1.3rem;
         font-weight: 600;
-        transition: color .3s, background-color .3s, border-color .3s;
+        transition:
+            color 0.3s,
+            background-color 0.3s,
+            border-color 0.3s;
         z-index: 1;
         background-color: #454545;
-        border-radius: .3rem;
+        border-radius: 0.3rem;
         &:hover {
             background-color: $primary-color;
             border-color: $primary-color;
@@ -477,12 +504,13 @@
             display: none;
         }
     }
-    .btn-product-icon {  
+    .btn-product-icon {
         visibility: hidden;
         opacity: 0;
     }
 }
-.product-hidden-details, .product-list .product-details {
+.product-hidden-details,
+.product-list .product-details {
     .btn-product-icon {
         width: 3rem;
         height: 3.5rem;
@@ -491,11 +519,12 @@
         color: #333;
         text-align: center;
         &.btn-compare {
-            margin-#{$left}: .8rem;
+            margin-#{$left}: 0.8rem;
         }
     }
 }
-.product-hidden-details, .product-list {
+.product-hidden-details,
+.product-list {
     .btn-wishlist {
         font-size: 1.8rem;
     }
@@ -512,21 +541,21 @@
 
 // Product Name
 .product-name {
-    @include print_css( product, name );
+    @include print_css(product, name);
     // white-space: nowrap;
     overflow: hidden;
     // text-overflow: ellipsis;
     a {
         color: inherit;
         &:hover {
-            color:#007185;
+            color: #007185;
         }
     }
 }
 
 // Product Category
 .product-cat {
-    @include print_css( product, category );
+    @include print_css(product, category);
     a {
         display: inline-block;
         color: inherit;
@@ -558,10 +587,10 @@
         background-color: #fff;
         width: 2.6rem;
         height: 2.6rem;
-        border-radius: .3rem;
-        transition: border-color .3s;
+        border-radius: 0.3rem;
+        transition: border-color 0.3s;
         &:not(:last-child) {
-            margin-#{$right}: .8rem;
+            margin-#{$right}: 0.8rem;
         }
     }
     // > .color {
@@ -578,17 +607,17 @@
     display: flex;
     align-items: center;
     line-height: 1;
-    @include print_css( product, rating );
+    @include print_css(product, rating);
 }
 .ratings-full,
 .ratings {
     position: relative;
-    font-family: 'wolmart';
-    letter-spacing: .2em;
+    font-family: "wolmart";
+    letter-spacing: 0.2em;
 }
 .ratings-full {
     cursor: pointer;
-    margin-#{$right}: .5rem;
+    margin-#{$right}: 0.5rem;
     &::before {
         content: "\e986" "\e986" "\e986" "\e986" "\e986";
         color: rgba(0, 0, 0, 0.16);
@@ -610,7 +639,7 @@
 
     &::before {
         content: "\e986" "\e986" "\e986" "\e986" "\e986";
-        @include css( color, product, rating, _star-color );
+        @include css(color, product, rating, _star-color);
     }
 }
 .rating-reviews {
@@ -626,28 +655,30 @@
     }
 }
 
-// Product Price 
+// Product Price
 .product-price {
-    @include print_css( product, price );
+    @include print_css(product, price);
     line-height: 1.6;
-    transition: visibility .4s, opacity .4s;
+    transition:
+        visibility 0.4s,
+        opacity 0.4s;
     .old-price {
-        @include print_css( product, price, old );
+        @include print_css(product, price, old);
     }
     .new-price {
-        @include print_css( product, price, new );
+        @include print_css(product, price, new);
         &:not(:last-child) {
             @include css(margin-right, product, price, new, _space);
         }
     }
     &:not(:last-child) {
-        margin-bottom: .9rem;
+        margin-bottom: 0.9rem;
     }
 }
 
 // Product Sold By
 .sold-by {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     font-size: 1.2rem;
     color: $body-color;
     a {
@@ -680,18 +711,18 @@
         width: 100%;
         padding-top: 1.5rem;
         transform: translateY(0);
-        transition: transform .3s;
+        transition: transform 0.3s;
         background-color: #fff;
     }
     .product-details {
         background-color: #fff;
-        transition: transform .3s;
+        transition: transform 0.3s;
     }
     .btn-wishlist {
-        transform: translateX(if-ltr(-150%,150%));
+        transform: translateX(if-ltr(-150%, 150%));
     }
     .btn-compare {
-        transform: translateX(if-ltr(-300%,300%));
+        transform: translateX(if-ltr(-300%, 300%));
     }
     &:hover {
         .product-details,
@@ -707,7 +738,7 @@
 }
 // Product Image Gap
 .product-image-gap {
-    padding: .9rem;
+    padding: 0.9rem;
     border: 1px solid #eee;
     background-color: #fff;
 
@@ -721,7 +752,7 @@
         }
     }
     &:hover {
-        box-shadow: 0 5px 30px rgba(0,0,0,0.05);
+        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
     }
 }
 // Product small list - 1, Product Widget
@@ -733,7 +764,7 @@
         font-size: 1.3rem;
         white-space: normal;
         line-height: 1.45;
-        margin-bottom: .6rem;
+        margin-bottom: 0.6rem;
         @include text-block(2);
     }
 }
@@ -751,7 +782,7 @@
         padding: side-values(0 1rem 0 0);
     }
     .product-name {
-        margin-bottom: .7rem;
+        margin-bottom: 0.7rem;
         color: $body-color;
     }
     .product-price {
@@ -767,11 +798,11 @@
             padding: 0;
         }
         .product-name {
-            margin-bottom: .6rem;
+            margin-bottom: 0.6rem;
             color: $dark-color;
         }
         .ratings-container {
-            margin-bottom: .5rem;
+            margin-bottom: 0.5rem;
         }
     }
 }
@@ -813,7 +844,7 @@
 }
 
 .product-listviewname a {
-    font-size: 15px!important;
+    font-size: 15px !important;
     font-weight: 500;
 }
 
@@ -827,18 +858,18 @@
         margin-#{$right}: 2rem;
     }
     .product-details {
-        padding: 0
+        padding: 0;
     }
     .product-name {
         font-size: 1.8rem;
         font-weight: 700;
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
     }
     .ratings-container {
-        margin-bottom: .9rem;
+        margin-bottom: 0.9rem;
     }
     .product-price {
-        margin-bottom: .6rem;
+        margin-bottom: 0.6rem;
         font-size: 1.8rem;
     }
     .product-action {
@@ -860,7 +891,7 @@
                 display: block;
                 #{$left}: 0;
                 top: 1px;
-                content: '\e969';
+                content: "\e969";
                 font-family: "wolmart";
                 font-weight: 700;
             }
@@ -872,21 +903,24 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         text-align: center;
-        padding: 0.86em .5em;
+        padding: 0.86em 0.5em;
         max-width: 17.6rem;
         background-color: transparent;
         border: 2px solid #ccc;
         color: $dark-color;
         font-size: 1.4rem;
-        border-radius: .3rem;
-        transition: background-color .3s, border-color .3s, color .3s;
+        border-radius: 0.3rem;
+        transition:
+            background-color 0.3s,
+            border-color 0.3s,
+            color 0.3s;
         &:hover {
             background-color: $primary-color;
             border-color: $primary-color;
             color: $white-color;
         }
         i.w-icon-cart {
-            margin: side-values(0 .8rem 0 0);
+            margin: side-values(0 0.8rem 0 0);
             font-size: 1.7rem;
         }
     }
@@ -900,7 +934,7 @@
         top: 0;
         width: 100%;
         height: 100%;
-        background-color: rgba(34,34,34,0.6);
+        background-color: rgba(34, 34, 34, 0.6);
         opacity: 0;
         z-index: 1;
         transition: opacity 0.3s;
@@ -916,7 +950,9 @@
         transform: translateY(-50%);
         color: #fff;
         margin-top: 1rem;
-        transition: margin-top .3s, opacity .3s;
+        transition:
+            margin-top 0.3s,
+            opacity 0.3s;
         opacity: 0;
         z-index: 1;
         &:hover {
@@ -925,8 +961,8 @@
             }
         }
     }
-    &:hover { 
-        box-shadow: 0 2rem 1.6rem -1.6rem rgba(0,0,0,.5);
+    &:hover {
+        box-shadow: 0 2rem 1.6rem -1.6rem rgba(0, 0, 0, 0.5);
         &::before {
             opacity: 1;
         }
@@ -952,7 +988,7 @@
 }
 @include mq(xs, max) {
     .product:not(.product-list) {
-        font-size: .8rem;
+        font-size: 0.8rem;
         .btn-product-icon {
             width: 3rem;
             height: 3rem;
@@ -1006,14 +1042,14 @@
     font-size: 21px !important;
     font-weight: 500;
     line-height: 30px;
-    color: black !important
+    color: black !important;
 }
 .product-border {
-    border: 1px solid #E23A05;
+    border: 1px solid #e23a05;
     padding: 15px;
 }
 .top-cat-banner {
-    background-image:url('/assets/images/ecommerce_theme/background_img.png');
+    background-image: url("/assets/images/ecommerce_theme/background_img.png");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
@@ -1021,114 +1057,105 @@
 .category_div {
     padding: 50px;
 }
-  
-
-.enquiry_link{color: black !important}
 
+.enquiry_link {
+    color: black !important;
+}
 
-.paginationDisabled{
-        pointer-events: none;
-        color: gray;
-      
+.paginationDisabled {
+    pointer-events: none;
+    color: gray;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
 
-.products-name{
+.products-name {
     color: black !important;
-    font-family: 'Nunito' !important
+    font-family: "Nunito" !important;
 }
-.product-font-family{
-    font-family: 'Nunito' !important
+.product-font-family {
+    font-family: "Nunito" !important;
 }
- .product-desc {
+.product-desc {
     font-size: 1.3rem;
-    line-height: 1.5 !important
+    line-height: 1.5 !important;
 }
-.add_cart_btn{  
+.add_cart_btn {
     padding-left: 4rem !important;
     padding-right: 4rem !important;
 }
-.add-to-catlog-btn{
+.add-to-catlog-btn {
     text-transform: capitalize !important;
     text-decoration: none !important;
     font-weight: normal !important;
 }
-.heart-icon-wrapper{
+.heart-icon-wrapper {
     // border: 2px solid red;
     display: flex !important;
     justify-content: center !important;
     // margin-top: 8px !important;
     // padding-right: 15px !important;
 }
-.products-name-font{
+.products-name-font {
     font-weight: 800 !important;
 }
-.product-wrapper-main{
+.product-wrapper-main {
     position: relative;
 }
-.best-seller-wrapper{
+.best-seller-wrapper {
     position: absolute;
     margin-left: 13px !important;
     // padding-top: .5rem !important;
 }
-.best-seller-tag{
-    padding: .8rem 1.4rem !important;
+.best-seller-tag {
+    padding: 0.8rem 1.4rem !important;
 }
-.text-color-black{
+.text-color-black {
     color: black !important;
 }
 
 .product-price .new-price {
     color: black;
-    
 }
-.checkbox-line-height{
+.checkbox-line-height {
     margin-top: 3.5px !important;
-    
 }
-.checkbox-wrapper{
-   margin-top: 6px !important;
-   margin-bottom: 20px !important;
+.checkbox-wrapper {
+    margin-top: 6px !important;
+    margin-bottom: 20px !important;
 }
-// .checkbox-margin{
-//     padding-top: -20px !important;
-
-// }
-// .product-grid-name{
-//     line-height: 1;
-// }
-
-// .product_card_h {
-//     height: 150px !important;
-//     width: 140px !important;
-//     // margin-top: 20px !IMPORTANT;
-//     text-align: center !important;
-//     margin-left: 35px;
-// }
 
+.list-toggle-rtl {
+    margin-top: 25px !important;
+    margin-inline-end: 2px;
+}
 
-.product-main-container{
-    position: relative
+.product-main-container {
+    position: relative;
 }
 
-.icon-container-ps{
+.icon-container-ps {
     position: absolute;
-   z-index: 2;
-   width: 82%;
-   
+    z-index: 2;
+    width: 82%;
 }
 
-.add-cart-btns{
+.add-cart-btns {
     font-size: 10px !important;
     padding: 15px 6px !important;
 }
-.product-mg-r{
-    margin-right: .02px !important;
+.product-mg-r {
+    margin-right: 0.02px !important;
     margin-top: -10px !important;
 }
-.product-border-pd{
+.product-border-pd {
     padding-left: 10px !important;
     padding-right: 10px !important;
     padding: 10px !important;
-}
\ No newline at end of file
+}
+
+.mrp-price-color {
+    color: gray !important;
+    font-weight: 500 !important;
+    font-size: 22px !important;
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 79f6520..88d1432 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -129,4 +129,4 @@
 @import "pages/notfound";
 @import "pages/dealerLedger";
 @import "pages/resetPassword";
-@import "pages/allpage-wrapper";
\ No newline at end of file
+@import "pages/CssLayout-rtl";
diff --git a/styles/pages/CssLayout-rtl.scss b/styles/pages/CssLayout-rtl.scss
new file mode 100644
index 0000000..3f5bb46
--- /dev/null
+++ b/styles/pages/CssLayout-rtl.scss
@@ -0,0 +1,90 @@
+html[dir="rtl"] {
+    .navbar-left-icon1 {
+        margin-left: 0px;
+    }
+    .rtl-toggle-section {
+        margin-left: 18px;
+    }
+    .menu > li:last-child {
+        margin-right: 3rem;
+    }
+    .category-menu > li:last-child {
+        margin-right: 0.6rem;
+    }
+    .category-menu > li:last-child > a i {
+        font-size: 1.7rem;
+        font-weight: 400;
+    }
+    .menu li {
+        position: unset;
+    }
+    .menu > li .megamenu {
+        left: 4.4rem;
+    }
+    .menu > li .vertical-menubar-rtl {
+        left: -82rem;
+    }
+    .vertical-menu > li:first-child:hover > ul {
+        top: 0;
+    }
+    .category-menu .megamenu > li:not(:last-child) {
+        padding: 0.8rem 2rem 0 0rem;
+    }
+    .vertical-menu-li-rtl {
+        position: relative;
+    }
+    .vertical-menubar-rtl:hover {
+        position: absolute;
+        top: 3rem;
+    }
+    .browse-cat-label {
+        padding-right: 10px;
+    }
+    .tab-content > .active {
+        visibility: hidden;
+    }
+    .browse-cat-list-span {
+        padding-right: 10px;
+    }
+    .corousel-captionn {
+        right: auto !important;
+    }
+    .product-price .new-price {
+        margin-left: 1rem !important;
+    }
+    .product-price-rtl {
+        padding-right: 4px;
+    }
+    // React Toastify
+    .Toastify__toast-container--top-right {
+        right: auto;
+        left: 1em;
+    }
+    .Toastify__toast {
+        direction: rtl;
+    }
+    // #listing page
+    .mob-breadcrum-icon i {
+        margin: 5px;
+    }
+    .product-listing-row {
+        margin-right: 10px;
+    }
+    .product-list-card-rtl {
+        margin-left: -26px;
+    }
+    .list-toggle-rtl {
+        margin-left: -15px;
+    }
+    .specs-tabs-container-rtl .tab-content > .active {
+        visibility: inherit;
+    }
+    // #profile page
+    .profile-tab-content-rtl .tab-content > .active {
+        visibility: inherit;
+    }
+    // #myorder
+    .my-order-container-pd .tab-content > .active {
+        visibility: inherit;
+    }
+}
diff --git a/styles/pages/_buttons.scss b/styles/pages/_buttons.scss
index 78db225..f258245 100644
--- a/styles/pages/_buttons.scss
+++ b/styles/pages/_buttons.scss
@@ -128,4 +128,10 @@
             content: none;
         }
     }
+}
+
+
+.form-switch .form-check-input:checked {
+    // background-color: wheat !important;
+    border: 1px solid white !important;
 }
\ No newline at end of file
diff --git a/styles/pages/_dealerLedger.scss b/styles/pages/_dealerLedger.scss
index 4038328..d643484 100644
--- a/styles/pages/_dealerLedger.scss
+++ b/styles/pages/_dealerLedger.scss
@@ -7,13 +7,12 @@
 }
 
 .ledger-submit-button {
-    border: 1px solid #0071dc !important;
-    color: $black-color !important;
-
+    border: 1px solid #3884f5 !important;
+    color: $body-color !important;
 }
 
 .ledger-submit-button:hover {
-    background-color: #0071dc!important;
+    background-color: #0071dc !important;
     color: $white-color !important;
 }
 
@@ -21,30 +20,19 @@
     padding-left: 10px !important;
 }
 
-
 .dealer-ledger-td-r {
     padding-right: 10px !important;
 }
-.dealer-heading{
+.dealer-heading {
     font-size: 24px !important;
 }
 
 @media screen and (min-width: 580px) {
-.dealer-ledger-table {
-    overflow-x: hidden !important; 
+    .dealer-ledger-table {
+        overflow-x: hidden !important;
+    }
 }
-  }
-
-
-  
 
-
-  @media only screen and (max-width: 600px) {
-    .dealer-account-container-mob {
-      margin-top: 20px !important;
-    }
-    .dealer-todate-mob{
-        margin-left: -60px !important;
-        // background-color: red;
-    }
-  }
\ No newline at end of file
+.ledger-submit-button:hover {
+    color: white;
+}
diff --git a/styles/rtl.css b/styles/rtl.css
new file mode 100644
index 0000000..78efc70
--- /dev/null
+++ b/styles/rtl.css
@@ -0,0 +1,3 @@
+body {
+    background-color: red !important;
+}
\ No newline at end of file