diff --git a/src/components/Product/index.js b/src/components/Product/index.js
index bfce651..c4aa26d 100644
--- a/src/components/Product/index.js
+++ b/src/components/Product/index.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { BsExclamationSquareFill } from "react-icons/bs";
 
-
+import { connect } from "react-redux";
 
 
 const ProductDesign = ({
@@ -36,7 +36,8 @@ const ProductDesign = ({
   hoverMode,
   teacher,
   btnOnClick,
-  catId
+  catId,
+  isMobile
 }) => {
   const [isHovering, setIsHovering] = useState(false);
 
@@ -75,8 +76,8 @@ const ProductDesign = ({
 
   if (catId == 1) {
     return (
-      <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP`}
-        style={{ width: '375px', direction: 'rtl' }}
+      <div className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${isMobile && 'w-11/12'}`}
+        style={{ width: !isMobile && '375px' , direction: 'rtl' }}
 
       >
 
@@ -119,7 +120,7 @@ const ProductDesign = ({
   }
   if (catId == 2) {
     return (
-      <div className="flex p-6 pl-0 pb-0 border border-red82OP my-4 rounded-lg" style={{width: '90%' , marginRight: '5%'}}>
+      <div className="flex p-6 pl-0 pb-0 border border-red82OP my-4 rounded-lg" style={{width: '90%' }}>
         <div className="h-full w-60 pl-4">
           {/* image */}
           <img src="https://fa.tripyar.com/uploads/picture/2977/2.jpg" className="h-full rounded-md" />
@@ -274,8 +275,12 @@ const ProductDesign = ({
     return <div></div>
   }
 };
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
+const mapDispatchToProps = ({});
 
-export default ProductDesign;
+export default connect(mapStateToProps, mapDispatchToProps)(ProductDesign);
 
 
 
diff --git a/src/view/services/index.js b/src/view/services/index.js
index ac8303a..4f7c486 100644
--- a/src/view/services/index.js
+++ b/src/view/services/index.js
@@ -429,7 +429,7 @@ if (!isMobile){
   // Mobile Version
   else{
     return(
-    <div className="flex flex-col items-center mt-16 rtl">
+    <div className="flex flex-col items-center mt-16 mb-40 rtl">
 
       <Games
             selectedGames={selectedGames}
@@ -577,6 +577,80 @@ if (!isMobile){
             </div>
           </div>
           <div className="w-11/12 border-b border-gray-200"></div>
+
+          <div
+          className={`flex items-center w-full justify-center flex-col `}
+        >
+          {books?.map((product, index) => (
+            <Link
+              //  to={"/class/" + product?.id}
+              to="#"
+              onClick={() => {
+                setPopUpContent({
+                  id: gameId,
+                  title: product?.name,
+                  video: "",
+                  teacher: product.vodTeacher,
+                  description:
+                    "در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
+                  price: product.product[0].price,
+                  classHour: 21,
+                  classMinute: 56,
+                  image: 'https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg',
+                  examCont : [
+                    {
+                      title: 'بخش اول آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۳',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۱۸',
+                      price: 10000
+                    },
+                    {
+                      title: 'بخش دوم آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۴',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۱۸',
+                      price: 10000
+                    },
+                    {
+                      title: 'بخش سوم آزمون ' + product.name,
+                      date: '۱۴۰۰/۱۲/۱۵',
+                      time: '۱۴:۴۶',
+                      numberOfQ: '۳۲',
+                      price: 250000
+                    },
+                  ]
+                });
+                setPopUp(true);
+                console.log(gameId)
+              }}
+            >
+              {/* {console.log(product)} */}
+              <Product
+                key={index}
+                productsType={filter.productsType}
+                product={product}
+                index={Number(index)}
+                productName={`${product?.name}`}
+                productCat={`پایه ${grades[product?.gradeId]}`}
+                productPrice={product.product[0].price}
+                // productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                numberOfRegards={160}
+                productHolderBorder=""
+                productHolderHoverBorder="shadow-md"
+                teacher={product.vodTeacher}
+                catId={gameId}
+                btnOnClick={() =>
+                  pushToCart({
+                    productId: product?.productId,
+                    userId: product?.userId,
+                    count: 1,
+                  })
+                }
+              />
+            </Link>
+          ))}
+</div>
     </div>
     )
   }